Jste tu poprvé? - Skrýt (musíte být přihlášeni)

Kterak se designér wireframy používat naučil

3. 5. 2014 v 14:54 8 Kterak se designér wireframy používat naučil

Ještě před pár lety jsem se na wireframy díval skrz prsty. Nechápal jsem je, považoval je za výsadu velkých firem, které si mohou dovolit čmárat, protože jim na to klient dá peníze. Zkrátka nějaké to vyblbnutí před tím, než se člověk pustí do skutečné práce. A teď když jsem urazil všechny, kteří se účastní plánování, analýz a prototypování, je čas pokání, doznání chyb a inspirace jiných.

Od pohledu je wireframe pouhá kostra bez grafiky - to je každýmu jasný, že. A ta kostra slouží k rozvržení obsahu a interakcí s ním. To už tak jasné není, a mě taky nebylo. Ale příklady táhnou, a protože jsem viděl, že je dělá spousta lidí, začal jsem je dělat taky, aby se neřeklo. Dělat to co jiní, když nemáte úplně potuchy, proč to děláte, je hloupé. A je to základ fungování naší společnosti. Ale je to lepší než nic, protože ta hloupost pak může vést k poznání, když se ve věci šťouráte dost dlouho. Není to tak, že bych absolutně netušil, nebo se někoho nemohl zeptat, ale asi jsem k tomu potřeboval dojít sám. Pak došlo k prozření. Došlo k tomu náhle, jako ve filmu. Dobrá, vlastně to tak nebylo, došlo k tomu postupnou proměnou.

Kreslím grafiku, k čemu mi bude dobrý wireframe?

Zjistil jsem, že wireframy výrazně šetří čas i mě, obyčejnému nuznému web designérovi. Na první pohled se může zdát, že jde o stereotypní záležitost, které by se kreativec měl vyhnout obloukem a přenechat to těm divným jů-ix-ákům. K mému překvapení jsem dospěl k závěru, že u wireframu využijete kreativní myšlení a pomůže vám řešit problémy dřív, než by k nim došlo při kreslení designu. S klientem vyřešíte obsah a u designu tím pádem nebudete řešit "tohle tam nechci" situace. Příprava wireframu vám pomůže představit si projekt jako celek a soustředit se čistě na sestavování obsahu a plánování, jak ho uživatelům prezentovat a jaké akce od nich očekávát. Těch ztracených hodin věnovaných přesunováním jednotlivých věcí v designu sem a tam, protože jsem je vymýšlel za chodu a neměl jasně naplánovaný celek... poznáváte se v tom? Pokud se vám čas od času nad designem stává, že ze zoufalství překusujete jednotlivé klávesy, které jste lžící vydloubali z klávesnice, pravděpodobně jste na tom jako já a zanedbáváte prvotní fázi příprav.

Naučil jsem se wireframy dělat rád, ona je to vlastně taková designérská předehra a její vynechání může katastrofálně ovlivnit váš výkon, stejně jako v posteli. Je mnohem příjemnější strávit tři hodiny vymýšlením wireframu, než následných deset hodin přesouváním prvků v rozpracovaném designu, což je skutečná noční můra. Konzultace s klientem jsou pak snažší, protože můžete dělat i radikální změny bez rizika zvýšení krevního tlaku nebo rozpočtu. Pomohlo mi i to, že jsem se postupně čím dál víc odprošťoval od představy, že u designu tvořím jakési umění. Pořád se snažím dělat věci, které jsou líbivé, ale největší pozornost a kreativitu věnuji obsahu, na což se váže i příprava wireframů.

Jsem přesvědčen, že to patří k profesnímu růstu, pokud se necítíte být pouze grafikem, který na základě instrukcí pracuje s vizuálem (na čemž není nic špatného, ale já se rozhodl jít jinou cestou). Ve chvíli, kdy začnete obsah a rozvržení řešit víc než grafické zpracování, máte nakročeno k tvorbě designu pro lidi. Máte nakročeno k tomu, abyste byli hodni nějaké zodpovědnosti a nebyli jen opička, kterou musí někdo usměrňovat. Zachovejte si cit, ale neupřednostňujte ho před vším ostatním. Pokud jste wireframům nepřikládali velkou důležitost, největším zhodnocením mého času pro mě bude, jestli alespoň jeden člověk po přečtení článku začne s wireframy skutečně pracovat.

Případy, kdy wireframe není potřeba, jsou přímo úměrné náročnosti projektu a množstvím informací na pozadí. No a mimo to, stejně jako design se dá i wireframe pořádně zkazit. Pokud se tak stane, sebelepší grafické zpracování nezachrání břídilské rozvržení layoutu. Navíc situace často není tak růžová, jako popisuji výše, to jsou takové ty ideální stavy, o kterých rádi kážeme, zatímco v realitě se může pokazit úplně všechno. Pokud se řízení projektu vymkne z rukou, může se stát, že se nakonec stejně připomínkuje obsah i mimo schválené wireframy, a nakonec si připadáte, jako kdybyste žádné nedělali.

Schopnost rozumět a vnímat wireframy pomáhá také v případě, kdy je dostanete předpřipravené. Jsou tři situace, které mohou nastat - buď je wireframe opravdu dobrý, nebo opravdu špatný a většinou je to něco mezi. Ať jsou kvality dodaného wireframu sebelepší, vždy je důležité mít možnost ho s klientem či dalšími zúčastněnými konzultovat, protože některé věci mezi wireframem a designem si dokáže reálně představit právě až designér a ne vždy je rozumné realizovat věci přesně tak, jak byly zmíněné ve wireframu - proto je důležité, aby se vývoje webu designér účastnil už od začátku, jelikož odproštění od grafiky, což je v předchozím případě výhoda, se teď stává nevýhodou. Stejně jako většina designů není dokonalá, i wireframy jdou dál ladit. Ale běda, jak něco pozměníte, aniž byste to někomu řekli. Pokud toužíte po tom, připravit zajímavé chvilky plné překvapení lidem, kteří vám v životě nic zlého neprovedli, udělejte to a ve finále ještě argumentujte tím, že to na vás působilo lépe. Pustošení dobrých wireframů kvůli představám o perfektní grafice vás v profesním růstu vrátí zase o hezký kus zpět.

Jak do tvorby wireframů lépe proniknout?

  • Pokud jste jako já jen řadový jouda, překonat nechuť dělat něco navíc může být obtížné. V začátcích mi pomáhalo si wireframe alespoň nakreslit, nijak zvlášť jsem ho neřešil, ale postupně jsem si ho navykl kreslit automaticky a začal nad ním přemýšlet víc.
  • Dbejte na netechnické zpracování, nesmíte se nechat zlákat začít řešit i grafiku - zaoblené prvky, přerušované čáry, komiksové písmo, to vše pomáhá jak vám, tak klientovi, který pak nemá tendenci wireframe spojovat s plnohodnotným návrhem.
  • Pro začátek vám postačí prakticky jakýkoliv program, nemusíte utrácet za specializovaný software - ten využijete spíš ve chvíli, kdy potřebujete propojovat jednotlivé stránky a demonstrovat interakce naživo, nebo pokud pracujete v týmu a s wireframy mají pracovat i jiní lidé.
  • Pokud pracujete ve skupině, zajímavou volbou je moqups.com, který vám dovolí sdílet a v reálném čase upravovat wireframy mezi sebou.
  • Nekreslete na papír. Prostě to nedělejte. Jestli nejste v situaci, kdy za den uděláte 10 variant jedné části obsahu (a pak potřebujete kreslící tabuli), bohatě si vystačíte s digitálními pomůckami. Sice z takové kresby můžete udělat krásnou fotku, ale není to praktické.
  • Konzultujte wireframe. Udělat ho je lepší než nic, ale bez odezvy od klienta nebo kolegů to není o moc lepší než nic.
  • Pokud někdo připíše další, užitečnější rady než to, co napadlo mě, rád je sem doplním.

V mnoha věcech se budu s wireframy dál míjet, nejsem analytik, nemám s tím zkušenosti (zatím, hlavou mi vrtá spousta věcí, které bych chtěl dále zkoumat) a zatím pozoruji procesy, kdy na wireframech pracuje tým lidí po několik týdnů, jen z povzdálí. Ale když to tak vezmu, ani mě to tolik netrápí. Pokud jste doteď dělali designy bez předehry, po přečtení článku se určitě dokážete sami rozhodnout, zda si wireframy chcete začít připravovat, nebo ne.

Ps. Za domácí úkol si spočítejte, kolikrát se v článku opakuje slovo wireframe. Nenašel jsem vhodné synonymum, a doufám že jsem potřebnou kvótu klíčových slov pro vyhledávače naplnil.

Petr Široký Profil na fóru / Osobní stránky / Twitter Webdesignér povoláním, kritik přesvědčením, šašek duší, to vše zde najdete. Tutoriarts jsou poslední 3 roky můj největší osobní projekt. Kromě toho se zkouším věnovat jiným menším webovým projektům, živím se jako nezávislý webový designér a snažím se více hledět do budoucnosti, aby tyto stránky vzkvétaly.

Zdrojový soubor : Není k dispozici

Komentáře k článku

Nejste přihlášeni - před odesláním příspěvku vyplňte protispamovou kontrolu níže - váš komentář bude viditelný až po schválení správcem. Pro okamžité schválení se přihlašte, nebo registrujte. Registrace nezabere déle než minutu.

  • :-D
  • 8-|
  • :-/
  • 8-)
  • :-(
  • :-O
  • =(
  • =D
  • :-)
  • <3
  • ;-)

* Povinné položky

  • #8
  • Neregistrovaný kolemjdoucí
  • 1. September 2014 | 14:42
  • Skupina: Neregistrovaní

Pravda je, že bez Wireframe se neobejdeme a to se odráží na kreativitě. Navíc, čím kratší termín odevzání je, tím horší design a na wireframe nebyl čas vůbec.

  • #7
  • Franklin
  • 12. August 2014 | 12:51
  • Skupina: Neregistrovaní

Ahoj, jsem začínající designer, mám za sebou teprve pár návrhů, ale wireframy používám snad úplně od začátku i když jsem netušil, že pro ty moje náčrty existuje nějaká definice. Když jsem dostal (nebo jsem si sám vymyslel) zadání nějakých webovek, tak jsem si jeden či více wireframů načmáral na papír. Bez nich jsem vůbec nevěděl jak projekt uchopit. Pomohlo mi to soustředit se na podstatné prvky stránky a na chvíli zapomenout na grafiku. Problém u mě nastal až tehdy, kdy se konečný výsledek v mnoha případech podstatně lišil od původního wireframu. Takže při použití pro komunikaci s klientem by mi wireframe uškodil nežli pomohl...Asi nedokážu řádně promyslet všechny věci, odhadnout poměry a velikosti různých prvků apod.

  • #6
  • lefiath
  • 9. May 2014 | 12:38
  • Skupina: Správci

Pokud to pro vás má relaxační účinky, tak dobře pro vás, ale to je individuální záležitost a proto nechci nikomu doporučovat "masti si něco na papíru, budeš se pak cítit uvolněný".

Beru to jako čistě praktickou záležitost a v takovém případě jsem neústupný. Viděl jsem už dost zbytečných čmáranic, které ve výsledku k ničemu nebyly - pokud někoho inspiruji, aby začal wireframy kreslit taky, chci aby vyrazil správným směrem a neučil se zlozvyky. Možná se urazíte, ale řeknu to natvrdo - myslíte wireframy vážně? Tak je začněte dělat pořádně a nekreslete si je na papír, ať to má nějaký smysl a účinek. Jedna věc je srovnat si vlastní myšlenky, a časté předělávání wireframu k tomu prostě patří (pak chci vidět jak moc to šetří čas, když na počítači prostě něco posunu, na papíře opravdu ne), a druhá fáze je porada s klientem, ze které mají vyjít další podněty na to co změnit. A protože je to technická záležitost (kreativní věci se vám odehrávají v hlavě, ne na papíře), přijde mi otravné něco neustále kreslit znova.

Ještě jeden dodatek - u netechnických věcí jako loga, ilustrace a podobné věci je kreslení samozřejmost. Ale u klasických webových wireframů platí co jsem napsal výše - pokud se vám líbí samotné kreslení na papír, nemám proč vás od toho odradit, stejně jako nemám proč členům rodiny radit, aby přestali dávat peníze za kartářky, ale v obou příkladech platí, že zde není valný praktický efekt a neodráží se to na projektu. A pokud chci relaxovat, napadá mě spousta jiných věcí, které taky nemusím dělat u počítače a nemusí se ani týkat drátěných modelů :)

  • #5
  • Zarath
  • 8. May 2014 | 10:43
  • Skupina: Registrovaní Uživatelé

Souhlasím s ren-g. Papír a tužku bych úplně neodsuzoval. Není to sice nejefektivnější, ale rozhodně to má určité klady. I já si rád odpočinu od sezení před obrazovkou a mnohdy mě při črtání napadne něco, na co bych při tahání tvarů na pc nepřišel.

  • #4
  • ren-g
  • 8. May 2014 | 00:07
  • Skupina: Registrovaní Uživatelé

Já mám ten papír prostě rád, takže nepoužívejte papír ignoruji :) Teď jsem dostal k svátku další tečkovaný blok a je to super věc... Jsem rád, že si občas můžu odpočinout od počítače s blokem v křesle, přece jenom u něj trávíme příliš mnoho času, nemyslíte? :)

  • #3
  • Peter90cz
  • 4. May 2014 | 19:46
  • Skupina: Registrovaní Uživatelé

A já si říkal, že někdo jako lefiath, který má za sebou spoustu webů(a některé složité), tak bude mít spoustu wireframů. To mě docela překvapilo. Já moc často webdesign nedělám, ale když už, tak ten wireframe udělám vždycky. Ikdyž jde o prťavý web. Až klient souhlasí s rozložením ve wireframu, tak se teprv pouštím do čistého designu.

  • #2
  • lefiath
  • 4. May 2014 | 18:21
  • Skupina: Správci

No a já jsem je právěže za samozřejmost nepokládal. Ostatně i teď si myslím, že pokud to tak někdo cítí, může se specializovat čistě na grafika, který kreslí na základě podkladů od jiných - speciálně ve firmách, kde na to člověk je, proč ne. Jinak s tím, že vytvořením wireframů všech hlavních stránek webu získáš nadhled, musím jen souhlasit.

  • #1
  • Jarda Bereza
  • 4. May 2014 | 15:04
  • Skupina: Registrovaní Uživatelé

Wireframy považuji za samozřejmost. Vážně to šetří čas. Snažím se je dělat trochu 1:1 ...stejná velikost jakou to bude doopravdy, aby viděl jak mi vychází rozměry a jestli se to tam vážně všechno vejde. Rozhodně je není špatné udělat wireframe pro všechny typy podstránek, čímž se dá vyhnout duplicitnímu obsahu, nelogičnosti v navigaci a člověk si udělá takový nadhled. Dají se tak třeba spojit dvě podstránky s malým množstvím obsahu do jedné nebo snáz vymyslet rozcestník

Před tím, než se pustím do samotné tvorby, nechávám klientovi čas na rozmyšlenou, jestli tam je všechno co tam má být a jestli rozměry i pozice budou v pořádku a na nich se nezapomnělo. Občas se třeba stane, že si během tvorby něco rozmyslí. Např. že se ve výpise produktů nebudou zobrazovat čtyři produkty vedle sebe, ale tři. Každopádně 80 - 90% věcí z wireframu se už nemění a kvůli nim stojí za to je dělat.

Nahoru

Autoři: Jakub Houdek, Jakub Šimůnek, Petr Široký a příležitostní sebevrazi