28
Jeden prototyp za 1000 meetingov Andrej Minárik
Jeden prototyp za 1000 meetingov
Andrej Minárik
That web thing...
Jediná istota v živote je zmena.
— Konfucius (alebo Mark Twain)
Webový projekt
UX výskum a návrh
Grafik
Copík
Kóder / programátor
Klient
Používateľ
Wireframes
In a typical process wireframes are created and given to a designer to make them "pretty". The prettified wireframes then pass to the developers to make them work. *
* http://www.creativebloq.com/netmag/why-wireframes-should-be-left-die-31411165
Wireframes
● Use case – lebo musíte (je to lepšie ako nič!)
● Use case – fakt veľký projekt, ktorý je nepraktické kresliť na papier alebo nereálne kódiť (viac ochvíľu)
● Radšej kreslite! Pre seba… Papier a pero (dots FTW)
Pohyblivé vobrázky!
Use case 1redizajn, skúsiť nové rozloženie, ...
Use case 2 dizajn from scratch a ste zručnejší v Photoshope / Sketchi ako v kóde
InVision, Marvel, framerjs.com, Adobe Experience Design CC (Beta)
The early stages of a rapid prototype should be created in HTML, CSS and JavaScript with little to no aesthetics.
Trochu toho kódu...
:( Môže trvať dlhšie
:) Môžete zrazu čokoľvek
:) Interakcie! Javascripty! Sme v browseri, klikáme. OMG!
:) Večná dilema čo bolo skôr – copy alebo design – copík vie v akom kontexte sa budú texty nachádzať, dizajnér si nemusí vymýšľať čo bude kde napísané (HZSLI)
http://thenextweb.com/dd/2015/04/09/why-designers-should-never-use-fake-text/https://www.smashingmagazine.com/2010/01/lorem-ipsum-killing-designs/
Moje winning combo
Foundation for Sites
Sublime text 3 + Emmet
SASS / BEM – moduly, atomic design
Gulp, Gulp-twig, gulp-watch, gulp-css-globbing, browser-sync
Všetko to je na https://github.com/andrejm/static-templates-project-2
Teraz sa to všetko po...ie
Čo s nimi
Dajú sa ukázať klientovi
Dajú sa ukázať používateľom!
Dajú sa testovať (guerilla testing, skype + FlashBack Express Recorder, prípadne Smartlook / Hotjar)
Dajú sa iterovať
Dajú sa zahodiť
Dajú sa použiť ďalej! (ak to ne te)
Prototypy nie sú spása
Predchádza im výskum, analýza dát, dobré formulovanie problému, definovanie persón, ideácia, … Je to súčasť procesu.
Ďalšia divočina
Prototyp navigácie – tree testing*
Prototyp služby
Kníhviazačstvo - maketa
* https://www.optimalworkshop.com/treejack
(and users)
