Kamarát sa posťažoval, že je natoľko zdigitalizovaný, že doma nemá ani funknčné pero. Tiež som si o sebe myslel, že som značne zdigitalizovaný. Ale keď som urobil inventúru, uvedomil som si, že mám doma slušný arzenál hardwaru na písanie a kreslenie, ktorý používam na skicovanie a tvorbu wireframov. Ak niekoho zaujíma, ako pracujem a čo pri tom používam, tu je môj proces a moje nástroje:

1. Spísanie požiadavkov, očakávaní a nápadov

Ešte než začnem kresliť, spíšem si stručné poznámky. Čo potrebujem urobiť, aké požiadavky to má spĺňať. Tento zoznam mi neskôr slúži ako checklist, či som náhodou na niečo nezabudol.

Hardware: Gelové pero Pilot B2P, 0.5mm. Na značke pera prakticky nezáleží. Dôležité pre mňa je, aby hladko kĺzalo po papieri. Niektorí ľudia majú radi také tie škrabkavé perá. Ja to škrabkanie nenávidím.

2. Hrubá skica fixkami

Keď viem, čo chcem dosiahnuť, začnem skicovať. V prvom kroku veľmi nahrubo. Schválne používam hrubšiu fixku. Jej hrúbka mi nedovolí kresliť detaily. Núti ma sústrediť sa na celok, rozloženie elementov. Nedá sa mazať, takže nestrácam čas korekciami a snahou o dokonalosť. Cieľom v tejto fáze je načmárať spústu rôznych variant. U väčšiny z nich na prvý pohľad odhalím, že nebudú fungovať. V takom prípade nemá zmysel ich nielen ladiť, ale ani ich dokončiť.

Hardware: Čierna fixka Stabilo Pen 68. Na rozdiel od ostatných pomôcok, tieto fixky (bez ohľadu na značku) opotrebujem celkom rýchlo. Takže ich doma obvykle mám celú hromádku.

3. Ladenie detailov

Keď sa rozhodnem pre konkrétne rozloženie prvkov, začnem kresliť detaily. Tužkou si načrtnem mriežku alebo vodiace čiary. Robím to voľnou rukou, šablónami alebo pravítkom sa nezdržiavam. Snažím sa aby proporcie čo najviac sedeli. Počas kreslenia ladím aj znenie krátkych textov (odkazy, popisky, vysvetlivky), takže ich každú chvíľu mažem a prepisujem. Kľudne si cez seba nakreslím viac verzií jedného elementu, takže ich vidím naraz a môžem sa rozhodnúť, ktorú z nich zachovám vo finálnej verzii pri obťahovaní.

Hardware: Mechanická tužka Rotring Tikky, 0.7mm a guma (viď. nižšie). Klasické tužky rýchlo opotrebujem. Musím ich každú chvíľu strúhať a vzniká pri tom špina. Takže som hľadal vhodnú mechanickú tužku. Na všetkom ostatnom môžete šetriť, ale mechanickej tužky sa oplatí si priplatiť. Tento model je masívny, dobre sedí v ruke a hlavne má silný, solídny, celokovový hrot. Vďaka tomu sa tuha vôbec neláme a môžete kresliť fakt precízne. Používam hrúbku 0.7mm, pretože hrotom šírky 0.5 som vždy hrozne ryl do papiera.

4. Obkreslenie finálnej verzie

Jemnou fixkou načisto obtiahnem nakreslený wireframe. Snažím sa byť presný, ale robím to rýchlo. Chcem aby si wireframe zachoval ručne kreslený charakter. Nechcem, aby vyzeral strojovo. Drobné preťahy alebo nepresnosti vôbec nevadia.

Hardware: Koh-i-nor Fineliner 7001, 0.3mm má pevnú špičku a píše neprerušovane aj pri rýchlych pohyboch.

5. Odstránenie vodiacich čiar a bordelu

Tužkou kreslený wireframe je vždy zmäť, ktorá vyzerá celkom masívne. Keď ho vygumujem a na papieri ostanú iba jemné čiary finálneho wireframu, vždy ma prekvapí, aký je čistý a ľahký. Vďaka tomu, že používam 0.7mm tužku a preťahujem to 0.3mm perom, výsledné čiary na seba nikdy nie sú nahňácané, nevznikajú tam husté čmáranice.

Hardware: Guma Pentel Hi-polymer Eraser, soft. Polymerová guma je trochu drahšia než bežné gumy. Ale pri používaní jednak nenecháva na papieri žiadne stopy, ale hlavne netvorí prach alebo hromadu malých šúľkov. Ak svoje kresby plánujete neskôr scanovať, papier bez bordelu vám ušetrí spústu čistenia a fúkania.

6. Zvýraznenie a tieňovanie

Tieňovať som začal až nedávno, v rámci experimentovania. Bol som prekvapený, ako pár jednoduchých šedých čiar môže dodať celému wireframu hĺbku. Obsahovo je to ten istý obrázok, ale tieňovanie z neho robí niečo hmotné, takmer uchopiteľné.

Hardware: Copic Ciao C-3 (šedý) má dva hroty. Na jednej strane šikmo zrezaný, ako zvýrazňovač. Na druhej strane pružnú špičku, ktorá funguje ako štetec. Chce to venovať mu trochu času, zvyknúť si naňho a naučiť sa s ním pracovať. Je celkom drahý, ale oplatí sa to. Prinajhoršom sa dá nahradiť obyčajným zvýrazňovačom, ale budete mať problém zohnať šedý a neónové tieňovanie vyzerá hrozne.

7. Poznámky a inštrukcie

Wireframe dokáže ukázať, ako majú veci vyzerať. Ale ešte treba popísať, ako budú fungovať. Textové poznámky spolu s wireframom sú často to najzrozumiteľnejšie zadanie pre programátorov a kóderov. Ak wireframe obsahuje netriviálne riešenie nejakého problému, stručná textová vysvetlivka často predíde zbytočnej diskusii prečo je to práve tak a nie inak.

Hardware: Červené pero Pilot Frixion Ball a žltý zvýrazňovač Pilot Frixion Light. Rada Pilot Frixion sa dá mazať trením. Ak chcete niečo vymazať, stačí miesto “vygunovať” gumou na zadnej časti pera a je to. Často ma až pri písaní poznámok napadne, ako to vyjadriť lepšie. Vďaka možnosti mazať nemusím škrtať a výsledok vyzerá oveľa profesionálnejšie.

Software

Svoje wireframy digitalizujem tak, že ich jednoducho vyfotím. Alebo, ak chcem aby vyzerali fakt pekne, tak ich oscanujem. Prakticky žiadne ďalšie úpravy už s nimi nerobím.

Wireframy kreslím takmer výhradne ručne. Je to pre mňa oveľa jednoduchšie a rýchlejšie. Zatiaľ som nenarazil na žiadny software na wireframing, v ktorom by som bol fakt výkonný. Občas robím wireframy v Adobe Fireworks. Ale sú to iba hrubé obrysy elementov. Robím to iba ak potrebujem na pixel presne otestovať nejaké veľkosti a rozmery.

Ak je to treba, Fireworks používam na tvorbu realistických mockupov. Tie obvykle skladám zo screenshotov existujúceho webu, ktoré rozrežem, zmodifikujem a preskladám. Do žiadnych grafických návrhov sa nepúšťam.

Čo vy? Prototypujete a wireframujete občas? Ako pri tom postupujete a aké nástroje používate?