NIKDY NETVOŘTE WEB V ELEMENTORU, DOKUD NEMÁTE WIREFRAME! - Co to je Wireframe a jak ho používat?
Vložit
- čas přidán 8. 06. 2024
- 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
🔥 NAUČ SE TVOŘIT PROFESIONÁLNÍ WEBY KROK PO KROKU: herohero.co/ondrejdusek
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..
@@ros8989 Zdravím, jsem rád, že video pomohlo, mockrát díky za komentář! :) Přesně tohle mě žene dopředu.
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
Zdravím, moc děkuji za komentář, vážím si toho🙂 Jsem rád, že videa pomáhají👍
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 :)
Ahoj Karle, moc děkuji za komentář a zpětnou vazbu, fakt to potěší❤️ Námět na téma si poznamenávám :)
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.
Zdravím, moc díky za komenář! :) Jsem rád, že videa pomáhají👍
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...
Ahoj, moc díky za komentář! Jsem rád, že video inspirovalo :)
Nějaké to video o Figmě bylo super. Díky za videa.
Díky za návrh a komentář! :)
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
Děkuji za fajn tvorbu, video na Figmu se zaměřením na prototypy by bylo super. :)
Díky za komentář a návrh na video, píšu si :)
Ondřeji, máš opravdu skvělá videa!
Díky za komentář! :)
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ě🙂
Rád slyším, že ti videa pomáhají :) Díky za komentář 😉
vyborne video :D
Zdravím, jsem rád, že video pomohlo. Díky za komentář 👍
Diky
Rádo se stalo, díky za komentář :)
@@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 ?
delej vic videii o tomhle je to super a videa o figme by byli taky dobry
díky za námět :)
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.
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 :)
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
Ahoj, díky za námět na video! :)
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?
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 :)
@@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?
Zdravím Ondro, nechystáte se udělat detailnější návod na Figmu a potom převod do WP? Díky
Ahoj, díky za námět na video :)
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.
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👍
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?
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.
@@tomasrzyman8389 děkuji za názor a tip !
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 :)
chcelo by to video ako tvoriš vo Figme, pozrieť si napr. landing page, tvoj postup,šýtl atd
Díky za námět, píšu si :)
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. 👍
Přesně tak! Díky za komentář :) 👍
jak se pak wirefrane v kladá do šablony? diky
Zdravím, díky za dotaz :) Po vytvoření wireframu je potřeba vše ručně přetvořit do Elementoru.
Mimo téma: Jůů, někdo má stejnou klávesnici, už jí mám 12 let a pořád drží :D
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ě