Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
Transcript of Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
![Page 1: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/1.jpg)
Jeden prototyp za 1000 meetingov
Andrej Minárik
![Page 2: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/2.jpg)
![Page 3: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/3.jpg)
![Page 4: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/4.jpg)
![Page 5: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/5.jpg)
That web thing...
![Page 6: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/6.jpg)
![Page 7: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/7.jpg)
Jediná istota v živote je zmena.
— Konfucius (alebo Mark Twain)
![Page 8: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/8.jpg)
![Page 9: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/9.jpg)
Webový projekt
UX výskum a návrh
Grafik
Copík
Kóder / programátor
Klient
Používateľ
![Page 10: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/10.jpg)
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
![Page 11: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/11.jpg)
![Page 12: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/12.jpg)
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)
![Page 13: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/13.jpg)
![Page 14: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/14.jpg)
![Page 15: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/15.jpg)
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)
![Page 17: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/17.jpg)
The early stages of a rapid prototype should be created in HTML, CSS and JavaScript with little to no aesthetics.
![Page 18: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/18.jpg)
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/
![Page 19: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/19.jpg)
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
![Page 20: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/20.jpg)
Teraz sa to všetko po...ie
![Page 21: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/21.jpg)
Č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)
![Page 22: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/22.jpg)
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.
![Page 23: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/23.jpg)
Ďalšia divočina
Prototyp navigácie – tree testing*
Prototyp služby
Kníhviazačstvo - maketa
* https://www.optimalworkshop.com/treejack
![Page 24: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/24.jpg)
(and users)
![Page 26: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/26.jpg)
![Page 27: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/27.jpg)
![Page 28: Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8](https://reader031.fdocuments.in/reader031/viewer/2022022001/589bb1891a28ab1d748b5c1f/html5/thumbnails/28.jpg)