Pred nedávnom som na LinkedIn zdieľal nostalgický moment, keď som spomínal na svoje časy s Macromedia Director a skriptovaním s Lingo, cítiac sa ako skutočný “režisér” interaktívnych médií. Vtedy neboli nástroje na tvorbu wireframov také bežné, alebo som o nich možno len nevedel.

Moje pozadie v tlačovom dizajne

Pochádzam z prostredia tlačového dizajnu, kde bol layout zvyčajne posledným krokom. Texty a obrázky prichádzali pripravené na použitie a my sme ticho pracovali, kým nebolo treba poslať návrhy ďalej. Nebolo veľa otázok. Jednoducho sme robili svoju prácu, prijímali revízie a robili potrebné úpravy. To boli jednoduchšie časy.

Potom prišiel Macromedia Director a všetko sa zmenilo.

Projekt, ktorý zmenil všetko

Kedysi som prijal projekt CD-ROM, ktorý potreboval podporovať šesť jazykov, každý s rôznymi prekladateľmi, skriptami, hlasovými nahrávkami a, čo bolo najdôležitejšie, bez finálneho obsahu. Mal som chaos bez akéhokoľvek plánu.

Bol som zodpovedný za dizajn aj vývoj. Nebol žiadny dizajnérsky ani vývojársky tím—len ja.

Neboli žiadne responzívne layouty ani štýlové príručky a nikto z nás v projektovom tíme predtým nepracoval s viacjazyčným, interaktívnym CD-ROM.

Bolo to dobrodružstvo! Každý deň však prinášal nové zmeny v layoute, čo spôsobovalo, že každý obrazovka bola ako pohyblivý cieľ. Snažili sme sa nájsť spoločnú víziu, ako by všetko malo vyzerať.

Obrat k peru a papieru

Nakoniec som dosiahol svoj bod zlomu. Chytil som niekoľko prázdnych listov papiera a začal som kresliť obrazovky. Vytvoril som boxy pre hlavičky, štvorce pre tlačidlá a umiestnil navigáciu hore. Dokonca som povedal prekladateľom: “Prosím, udržujte nadpisy pod 50 znakov.”

Neboli tam žiadne farby ani ozdobné písma—len rýchle čiary a popisky.

Vtedy som nevedomky začal s wireframingom: nízka vernosť a čisto na papieri.

Pečiatkový trik

Frustrovaný z opakovaného kreslenia rovnakých posuvníkov a tlačidiel na zatváranie som navštívil miestnu tlačiareň, ktorá sa chválila: “Robíme pečiatky RÝCHLO!”

Po rozhovore s majiteľom som vytvoril vlastné gumové pečiatky svojich najbežnejších prvkov používateľského rozhrania.

Keď som sa vrátil do kancelárie, pečiatkoval som. Pečiatka. Pečiatka.

Za chvíľu bol layout obrazovky hotový. Skopíroval som ho desaťkrát, nakreslil šípky, napísal poznámky a rozdal ich, sledujúc, ako ľudia konečne pochopili produkt.

Nebolo to krásne, ale fungovalo to. Ľudia pochopili koncept.

Prečo stále používam nízku vernosť wireframingu dnes

Počas rokov som pracoval s nespočetným množstvom nástrojov—dizajnérske sady, prototypovacie aplikácie, kolaboračné platformy—ale nízka vernosť wireframingu pre mňa vždy zostala konštantou.

Dnes používam Balsamiq. Napodobňuje pocit kreslenia na papieri, ale je rýchlejší, čistejší a zdieľateľný. Oceňujem, ako úmyselne odoláva pixelovej dokonalosti. Nie sú tam žiadne farby, žiadne rozptýlenia—len tok myšlienok.

Pomáha mi jasne premýšľať, udržiava mojich klientov sústredených a pripomína mi, že skvelé rozhrania začínajú jednoducho.

Moja rada?

Nepreťažujte svoje počiatočné nápady dizajnom. Začnite s čiernobielym; pridajte jednu akcentovú farbu, ak je to potrebné. Použite žlté lepiace poznámky na zdôraznenie—vyhnite sa gradientom alebo skleným efektom.

Zamerajte sa na štruktúru, nie na štýl. Jasnosť prekonáva kreativitu v prvom návrhu.

A ak poznáte nástroj, ktorý je taký čistý a rýchly ako Balsamiq, prosím, podeľte sa oň so mnou. Vždy som otvorený objavovaniu lepších spôsobov, ako pracovať jednoducho.

Dovtedy budem pokračovať v pečiatkovaní, kreslení a wireframingu, ako keby bol rok 1999.