Тёмный

NIKDY NETVOŘTE WEB V ELEMENTORU, DOKUD NEMÁTE WIREFRAME! - Co to je Wireframe a jak ho používat? 

Ondřej Dušek
Подписаться 9 тыс.
Просмотров 13 тыс.
50% 1

Co je to wireframe a proč tvorbu webu nezačínat rovnou v Elementoru? V dnešním videu si řekneme něco o Wireframingu! 👉👉NAUČ SE TVOŘIT PROFI WEBY: herohero.co/ondrejdusek 👈👈
--- KONTAKT
📧 EMAIL: hello@ondrejdusek.com
--- ODKAZY
🎯 KONTROLA WEBU: ondrejdusek.com/kontrola-webu/
✅ WEBGLOBE - DOPORUČENÝ WEBHOSTING: www.webglobe.cz/webhosting?de...
✅ WEDOS (pro menší projekty) - WEBHOSTING SE SLEVOU 50%: www.wedos.cz/webhosting?ap=rw...
⏱ ČASOVÉ ÚSEKY:
00:00 - Úvod
00:52 - Co je to Wireframe?
01:44 - Proč Wireframy používat?
05:42 - Jak tvořit základní Wireframy ve Figmě
WIREFRAME - CO TO JE?
Wireframe je návrh webové stránky nebo aplikace, který se používá v procesu návrhu uživatelského rozhraní. Je to jednoduchý náčrt stránky nebo aplikace, který se obvykle skládá z elementů, textu a několika obrázků. Wireframe je obvykle vytvořen v některém z návrhových nástrojů, jako je například Adobe XD nebo Figma, a slouží jako základ pro další designové práce.
Wireframing je důležitý krok v procesu návrhu webové stránky nebo aplikace, protože vám umožňuje vytvořit základní strukturu stránky nebo obrazovky aplikace a zaměřit se na základní funkce a prvky, které budou potřeba. To vám umožňuje vyhnout se zbytečným komplikacím a zaměřit se na základní funkčnost.
Používání wireframů v procesu návrhu webové stránky nebo aplikace má několik výhod:
- Umožňuje vám rychle vytvořit základní strukturu stránky nebo aplikace a zaměřit se na její základní funkce a prvky.
- Pomáhá vám lépe pochopit, jak budou jednotlivé prvky stránky nebo aplikace navzájem spolupracovat a jak budou působit na uživatele.
- Umožňuje vám snadno změnit uspořádání prvků stránky nebo aplikace a zjistit, co funguje nejlépe.
- Pomáhá vám lépe komunikovat návrh a spolupracovat na něm s ostatními členy týmu.
V procesu návrhu webové stránky nebo aplikace se obvykle používá několik různých wireframů, které se postupně vyvíjejí a zdokonalují.
První wireframe bývá obvykle velmi jednoduchý a slouží především k vytvoření základní struktury stránky nebo aplikace. Teprve poté, co máte základní strukturu stránky nebo aplikace vytyčenou, můžete začít pracovat na detailech a vytvářet pokročilejší wireframy (tzv. high-fidelity), které budou obsahovat více prvků a budou více připomínat finální design.
Ve chvíli, kdy máte wireframy vytvořené, můžete začít pracovat na vizuálním designu stránky nebo aplikace. Vizuální design se zabývá tím, jak bude stránka nebo aplikace vypadat a např. jaké barvy a fonty budou použity.
Wireframy se obvykle používají spolu s prototypy, což jsou funkční modely stránky nebo aplikace, které umožňují uživateli procházet stránku nebo aplikaci a otestovat její funkčnost. Prototypy jsou obvykle vytvářené pomocí nástrojů jako je InVision, Figma nebo Marvel.
Blogpost na webu:
#wireframe #webdesign #wordpress

Опубликовано:

 

4 июл 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 50   
@ondrej-dusek
@ondrej-dusek 11 месяцев назад
🔥 NAUČ SE TVOŘIT PROFESIONÁLNÍ WEBY KROK PO KROKU: herohero.co/ondrejdusek
@ros8989
@ros8989 4 месяца назад
Zítra se na to vrhnu, už mám shlédnuté skoro všechny videa a přejdu na předplatné, už se těším :-) Vy jste jasná a bezkonkurenční volba číslo jedna, tak sem se ani nemusel dlouho rozmýšlet mezi více lidmi :-) mám z toho super pocit, že se naučím další fajn věci a budu mít větší rozhled..
@ondrej-dusek
@ondrej-dusek 4 месяца назад
@@ros8989 Zdravím, jsem rád, že video pomohlo, mockrát díky za komentář! :) Přesně tohle mě žene dopředu.
@MrJosfa
@MrJosfa Год назад
Tak tohle jsou pro mne naprosto luxusni tutorialy v cestine od Ondry ,nemam ani slov ,jak podekovat za tohle co delas ,opravdu tohle je obsah ,ktery nema u nas konkurenci ,nebo alespon o zadne nevim a ze jsem jich uz nakoukal moc a moc diky ,rad podporim tvoji tvorbu ,jelikoz mě doslova nadchla ,dekuji dekuji a zase dekuji
@ondrej-dusek
@ondrej-dusek Год назад
Zdravím, moc děkuji za komentář, vážím si toho🙂 Jsem rád, že videa pomáhají👍
@kareljacisko2441
@kareljacisko2441 Год назад
Na tvoje videa jsme narazil před měsícem. A musím říct, že tvoje know-how, které šíříš přes YT jsou neskutečná. Hodně mi pomohli při tvorbě webu. Za tohle ti patří opravdu velké díky! Co se týče námětu na další video, tak já bych rád uvítal náčrt webu ve Firmě a následné přetvoření ve Wordpressu (např. přes Elementor), myslím si, že bych nebyl sám komu by se takové video líbilo :-) Ještě jednou díky za tvorbu kterou děláš. Je to fakt mazec :)
@ondrej-dusek
@ondrej-dusek Год назад
Ahoj Karle, moc děkuji za komentář a zpětnou vazbu, fakt to potěší❤️ Námět na téma si poznamenávám :)
@Vorgonful
@Vorgonful Год назад
Naprosto super. Díky za tyhle videa. V práci jsem zdědil několik firemních webů založených na wordpressu a joomle, který tvořil někdo jinej a tvoje videa mi neuvěřitelně pomáhaj se jima prokousat. Kdyby šlo dát padesát palců hore, máš je tam.
@ondrej-dusek
@ondrej-dusek Год назад
Zdravím, moc díky za komenář! :) Jsem rád, že videa pomáhají👍
@zdenekjanacek6560
@zdenekjanacek6560 2 месяца назад
Přeji pěkný den máte video kde si web který si podleVás vytvořím spojím s platební bránou??? Moc děkuji za odpověd Zdeněk Janáček
@petrb5451
@petrb5451 Год назад
Děkuji za fajn tvorbu, video na Figmu se zaměřením na prototypy by bylo super. :)
@ondrej-dusek
@ondrej-dusek Год назад
Díky za komentář a návrh na video, píšu si :)
@danielgago-sk
@danielgago-sk Год назад
Ondřeji, toto je naozaj skvelé video, ktoré ma nakoplo zamyslieť sa nad dajakým tým "wireframe" skôr ako chcem vytvoriť stránku, konečne zapnúť a použiť Figmu, ktorú mám už dajaký čas pripravenú, no a po pár pokusoch (že ako to vo Figme funguje) som zistil že je to naozaj skvelý nástroj kde bez riadku kódu vidím čo asi dostanem... Ladenie pozícii, proporcií je tam "malina". Ďakujem za nasmerovanie. Aj keď s dizajnom bojujem (násobne viac ako so samotným kódovaním...), tak toto mi naozaj pomôže...
@ondrej-dusek
@ondrej-dusek Год назад
Ahoj, moc díky za komentář! Jsem rád, že video inspirovalo :)
@jaramacha
@jaramacha Год назад
Nějaké to video o Figmě bylo super. Díky za videa.
@ondrej-dusek
@ondrej-dusek Год назад
Díky za návrh a komentář! :)
@emilru
@emilru Год назад
Děkuju za Figmu - vždy jsem šel odzadu -tj. tvorba webu s tím, že osnovu (WIREFRAME) tvořím až potom :-( a vůbec díky za všechny videa :-) 👏jsem původně technik - takže funguju reverzně, ale teď se rád učím dělat weby správně🙂
@ondrej-dusek
@ondrej-dusek Год назад
Rád slyším, že ti videa pomáhají :) Díky za komentář 😉
@secret37aa
@secret37aa 7 месяцев назад
Ondřeji, máš opravdu skvělá videa!
@ondrej-dusek
@ondrej-dusek 6 месяцев назад
Díky za komentář! :)
@RomanaZemberyova
@RomanaZemberyova Год назад
Ahoj Ondro tvé videa jsou super, já se z nich učím už od základu i když tedy vyučená jsem v IT a programování mi není cizí. Jen bych ráda pokud bys natočil toho víc na Figmu jak tam tvořit ten web a jak ho popřípadě nasadit na wordpress. díky
@ondrej-dusek
@ondrej-dusek 11 месяцев назад
Ahoj, díky za námět na video! :)
@marekmatuska6758
@marekmatuska6758 Год назад
vyborne video :D
@ondrej-dusek
@ondrej-dusek Год назад
Zdravím, jsem rád, že video pomohlo. Díky za komentář 👍
@michalerror3822
@michalerror3822 Год назад
Ahoj, chtěl bych se zeptat zda je lepší udělat základní stránky s webhostingem a postupně zlepšovat kvůli seo (aby to vypadalo že je web aktivní), nebo si vše udělat v pozadí bez hostingu a potom to tam dát a už jen semtam měnit maličkosti. Díky.
@ondrej-dusek
@ondrej-dusek Год назад
Zdravím, díky za dotaz :) Já vše dělám na odděleném webhostingu, kde mám rozpracované weby na subdoméně (např. projekt1.vyvojovadomena.cz). Vše pak následně přenáším na ostrý webhosting s doménou :)
@jakubjanecek6403
@jakubjanecek6403 Год назад
Ahoj, děkuju moc za video. Hodně mi pomohlo. Dokázal bys říct rozdíly mezi Wordpress a Wix? A proč si spíš vybrat třeba Wordpress?
@ondrej-dusek
@ondrej-dusek Год назад
Ahoj Jakube, díky za dotaz :). WordPress jsem si vybral pro jeho rozšířenost, komunitu a ten fakt, že je opensource (volně dostupný). Všechno má své pro a proti. U wixu člověk narazí na nějaké limity dříve nebo později (je to krabicové řešení). Osobně bych doporučil místo Wixu např. Webflow :)
@jakubjanecek6403
@jakubjanecek6403 Год назад
@@ondrej-dusek Ahoj Ondro, přešel jsem na Wordpress. Měl jsem tam jít už od začátku. Mám takový problém. Nahrál jsem tam svůj font, který se mi ukazuje na pc, ale na tabletech a mobilech ne. Navíc se mi často stává, že na mobilu ta stránka vypadá úplně jinak, než jak ji vidím v elementoru. Dá se to prosím nějak opravit?
@Dejvikful
@Dejvikful Год назад
Zdravím Ondro, nechystáte se udělat detailnější návod na Figmu a potom převod do WP? Díky
@ondrej-dusek
@ondrej-dusek Год назад
Ahoj, díky za námět na video :)
@micekdesign8780
@micekdesign8780 Год назад
Pěkný :-) Otážečka: když buduji web na wordpressu přímo na hostingu. A dělám to relativně dlouho. A google už mě začal indexovat, ale samozřejmě se všemi těmi nevychytanými chybkami, které vlastně postupně odstraňuji. Je to problém? Může se stát, že mě google zařadí mezi "špatné" stránky protože dá na první dojem a pak mu bude trvat dost dlouho, než si u něj budu spravovat reputaci? Mimochodem já si předpřípravu dělám ve zmiňovaném illustrátoru. Mám tak po ruce v jednom "systému" celý vizuál od konceptu až po finální tisky, to mi extrémně vyhovuje.
@ondrej-dusek
@ondrej-dusek Год назад
Ahoj, díky :) To je dobrá otázka, nicméně nemám úplně přesnou odpověď. Pokud máš web, který spouštíš čerstvě, tak by to podle mě takový problém být neměl, google na tvůj web neustále kouká a hodnotí ho pravidelně (halvně pokud máš propojenou google search console). Nicméně pokud máš web na živém hostingu ve vývoji, tak dočasně stačí vypnout indexci přímo ve WP. Pak ji ale NEZAPOMEŇ zapnout, často to pak bývá velký fail... Už jsem viděl "nové" weby, po půl roce provozu s vyplou indexací... :) Jinak illustrátor je díky všestrannosti super👍
@martinsvanda5874
@martinsvanda5874 4 месяца назад
Diky
@ondrej-dusek
@ondrej-dusek 4 месяца назад
Rádo se stalo, díky za komentář :)
@martinsvanda5874
@martinsvanda5874 4 месяца назад
@@ondrej-dusek Jo sam vim ze sveho druheho kanalu jak tezky je prorazit ten algoritmus a ze proste kdyz cloveku neda like a odber a komentar aspon jeden clovek z kazde vekove skupiny a kazdeho pohlavy z kazde zeme na kazdem kontinentu tak je proste v p*deli :D ale s timhle kontentem brzy nebudete mit problem .... jen takovy dotaz kdyz si chci udelat web jako porfolio (pracuji v unreal engine ) a chtel bych jen jednoduche 3D prostredi kde kdyz clovek najede na ikonu v menu kamera se zameri na jinou cast mistnosti a po kliknuti jenom vyjede text ........ jakou technologii bych k tomu mel pouzit nebo jaka by byla nejjednodussi na zrealizovani ? Vite Nodejs Tree React ? nebo jsem uplne mimo ?
@miloslavtetour2942
@miloslavtetour2942 8 месяцев назад
delej vic videii o tomhle je to super a videa o figme by byli taky dobry
@ondrej-dusek
@ondrej-dusek 8 месяцев назад
díky za námět :)
@koubektomas
@koubektomas Год назад
Zdravím, díky za Vaše videa, hodně pomáhají si doplnit mezery :-), měl bych dotaz, co by jste doporučil Elementor Pro nebo Oxygen?
@TomasRzyman_cz
@TomasRzyman_cz Год назад
Určitě Oxygen, Elementor je to jediné co bych Ondrovi vytkl v jeho tvorbě webů. Jinak skvělá práce! Každopádně Figma je určitě super nástroj, ovšem mám mnohem rychleji taký "drátěný model" sestavený v oxygenu a ten pak na své subdoméně zasílám k jednání klientovi. Každopádně jsou i klienti, kteří zasílají svůj požadavek již vytvořený ve figmě, takže nikdy není od věci vědět o co jde a jak to funguje.
@koubektomas
@koubektomas Год назад
@@TomasRzyman_cz děkuji za názor a tip !
@ondrej-dusek
@ondrej-dusek Год назад
Zdravím, Tomáši :) Jsem rád, že videa pomáhají! Oxygen je rozhodně skvělá volba. Je od základu rychlejší než Elementor a má spoustu dalších výhod. Nicméně bych ho doporučil spíše pokročilejším Webdesignerům. Rozhodně doporučuji vyzkoušet obojí a nezůstat jen u jedné věci :)
@michalstefanko843
@michalstefanko843 Год назад
chcelo by to video ako tvoriš vo Figme, pozrieť si napr. landing page, tvoj postup,šýtl atd
@ondrej-dusek
@ondrej-dusek Год назад
Díky za námět, píšu si :)
@PetrZaruba87
@PetrZaruba87 Год назад
Když chceš dům, tak je potřeba dokumentace, návrh a plány. Stavět dům nebo web naslepo se nevyplácí. Díky. 👍
@ondrej-dusek
@ondrej-dusek Год назад
Přesně tak! Díky za komentář :) 👍
@bloodas1234
@bloodas1234 Год назад
jak se pak wirefrane v kladá do šablony? diky
@ondrej-dusek
@ondrej-dusek Год назад
Zdravím, díky za dotaz :) Po vytvoření wireframu je potřeba vše ručně přetvořit do Elementoru.
@zeleninka
@zeleninka Год назад
Mimo téma: Jůů, někdo má stejnou klávesnici, už jí mám 12 let a pořád drží :D
@ondrej-dusek
@ondrej-dusek Год назад
Je prakticky nezničitelná :D. Naučit se wireframy je rozhodně dobrý nápad 👍 Člověk je ale klidně může tvořit rovnou ve Figmě
Далее
ПРОЖАРКА ХАРЛАМОВА
00:15
Просмотров 47 тыс.
Осторожно селеба идет 😂
00:16
Просмотров 414 тыс.
6 UI Hacks I Wish I Knew As A Beginner
11:11
Просмотров 743 тыс.
Nejlepší AI generátory obrázků
17:12
Просмотров 4,9 тыс.
Jak si dělám poznámky z knih pomocí AI v roce 2024
11:41
Responsive Design in Figma: Crash Course 2023
20:47
Просмотров 101 тыс.
Learn MUI (Material UI) in under 10 min!
9:06
Просмотров 123 тыс.