SlideShare a Scribd company logo
Jeden prototyp za 1000
meetingov
Andrej Minárik
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
That web
thing...
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
Jediná istota v živote je zmena.
— Konfucius (alebo Mark Twain)
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
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
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
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)
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
Pohyblivé vobrázky!
Use case 1
redizajn, 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)
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
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)
Otázky, hejty & vaše skúsenosti
Andrej Minárik
@andrejminarik
hello@andrzej.sk
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8
Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8

More Related Content

Viewers also liked

Sketches
SketchesSketches
Sketches
Alfred Tan
 
Diegun bb
Diegun bbDiegun bb
Iaetsd solar based energy efficient system
Iaetsd solar based energy efficient systemIaetsd solar based energy efficient system
Iaetsd solar based energy efficient system
Iaetsd Iaetsd
 
Study of forced convection in smooth and ribbed ducts
Study of forced convection in smooth and ribbed ductsStudy of forced convection in smooth and ribbed ducts
Study of forced convection in smooth and ribbed ducts
Haamid Shah
 
Eye Audio 極簡天籟
Eye Audio 極簡天籟Eye Audio 極簡天籟
Eye Audio 極簡天籟
YANtouch Corp.
 
საღმრთო ისტორია ~წიგნი 23~
საღმრთო ისტორია ~წიგნი 23~საღმრთო ისტორია ~წიგნი 23~
საღმრთო ისტორია ~წიგნი 23~
Koba Ksovreli
 
Diapositivas Herramienta Colaborativa
Diapositivas Herramienta ColaborativaDiapositivas Herramienta Colaborativa
Diapositivas Herramienta Colaborativa
stiven meneses
 
Maintenance, Repair & Overhaul (MRO)
Maintenance, Repair & Overhaul (MRO) Maintenance, Repair & Overhaul (MRO)
Maintenance, Repair & Overhaul (MRO)
Melissa Gannaway
 
AerSale MRO Presentation
AerSale MRO PresentationAerSale MRO Presentation
AerSale MRO Presentation
Steven Lyons
 

Viewers also liked (9)

Sketches
SketchesSketches
Sketches
 
Diegun bb
Diegun bbDiegun bb
Diegun bb
 
Iaetsd solar based energy efficient system
Iaetsd solar based energy efficient systemIaetsd solar based energy efficient system
Iaetsd solar based energy efficient system
 
Study of forced convection in smooth and ribbed ducts
Study of forced convection in smooth and ribbed ductsStudy of forced convection in smooth and ribbed ducts
Study of forced convection in smooth and ribbed ducts
 
Eye Audio 極簡天籟
Eye Audio 極簡天籟Eye Audio 極簡天籟
Eye Audio 極簡天籟
 
საღმრთო ისტორია ~წიგნი 23~
საღმრთო ისტორია ~წიგნი 23~საღმრთო ისტორია ~წიგნი 23~
საღმრთო ისტორია ~წიგნი 23~
 
Diapositivas Herramienta Colaborativa
Diapositivas Herramienta ColaborativaDiapositivas Herramienta Colaborativa
Diapositivas Herramienta Colaborativa
 
Maintenance, Repair & Overhaul (MRO)
Maintenance, Repair & Overhaul (MRO) Maintenance, Repair & Overhaul (MRO)
Maintenance, Repair & Overhaul (MRO)
 
AerSale MRO Presentation
AerSale MRO PresentationAerSale MRO Presentation
AerSale MRO Presentation
 

More from WEBtlak

Introduction to DDD - Adam Štipák
Introduction to DDD - Adam ŠtipákIntroduction to DDD - Adam Štipák
Introduction to DDD - Adam Štipák
WEBtlak
 
Hello, Laravel - Tomáš Gustiňák
Hello, Laravel - Tomáš GustiňákHello, Laravel - Tomáš Gustiňák
Hello, Laravel - Tomáš Gustiňák
WEBtlak
 
Clean Code / ako nevariť objektové špagety - Martin Razus
Clean Code / ako nevariť objektové špagety - Martin Razus Clean Code / ako nevariť objektové špagety - Martin Razus
Clean Code / ako nevariť objektové špagety - Martin Razus
WEBtlak
 
HTTP hlavičky - Tomas Adamjak
HTTP hlavičky - Tomas AdamjakHTTP hlavičky - Tomas Adamjak
HTTP hlavičky - Tomas Adamjak
WEBtlak
 
Ako na užívateľské testovanie - Katarína Zalánová | WEBtlak #4
Ako na užívateľské testovanie - Katarína Zalánová | WEBtlak #4Ako na užívateľské testovanie - Katarína Zalánová | WEBtlak #4
Ako na užívateľské testovanie - Katarína Zalánová | WEBtlak #4
WEBtlak
 
Dizajn orientovaný na človeka - Jozef Benko | WEBtlak #4
Dizajn orientovaný na človeka - Jozef Benko | WEBtlak #4Dizajn orientovaný na človeka - Jozef Benko | WEBtlak #4
Dizajn orientovaný na človeka - Jozef Benko | WEBtlak #4
WEBtlak
 
Future of Microservices - Jakub Hadvig
Future of Microservices - Jakub HadvigFuture of Microservices - Jakub Hadvig
Future of Microservices - Jakub Hadvig
WEBtlak
 
Výtlak 10 ročnej praxe
Výtlak 10 ročnej praxeVýtlak 10 ročnej praxe
Výtlak 10 ročnej praxe
WEBtlak
 
Single Sign On - Michal Vagač
Single Sign On - Michal VagačSingle Sign On - Michal Vagač
Single Sign On - Michal Vagač
WEBtlak
 

More from WEBtlak (9)

Introduction to DDD - Adam Štipák
Introduction to DDD - Adam ŠtipákIntroduction to DDD - Adam Štipák
Introduction to DDD - Adam Štipák
 
Hello, Laravel - Tomáš Gustiňák
Hello, Laravel - Tomáš GustiňákHello, Laravel - Tomáš Gustiňák
Hello, Laravel - Tomáš Gustiňák
 
Clean Code / ako nevariť objektové špagety - Martin Razus
Clean Code / ako nevariť objektové špagety - Martin Razus Clean Code / ako nevariť objektové špagety - Martin Razus
Clean Code / ako nevariť objektové špagety - Martin Razus
 
HTTP hlavičky - Tomas Adamjak
HTTP hlavičky - Tomas AdamjakHTTP hlavičky - Tomas Adamjak
HTTP hlavičky - Tomas Adamjak
 
Ako na užívateľské testovanie - Katarína Zalánová | WEBtlak #4
Ako na užívateľské testovanie - Katarína Zalánová | WEBtlak #4Ako na užívateľské testovanie - Katarína Zalánová | WEBtlak #4
Ako na užívateľské testovanie - Katarína Zalánová | WEBtlak #4
 
Dizajn orientovaný na človeka - Jozef Benko | WEBtlak #4
Dizajn orientovaný na človeka - Jozef Benko | WEBtlak #4Dizajn orientovaný na človeka - Jozef Benko | WEBtlak #4
Dizajn orientovaný na človeka - Jozef Benko | WEBtlak #4
 
Future of Microservices - Jakub Hadvig
Future of Microservices - Jakub HadvigFuture of Microservices - Jakub Hadvig
Future of Microservices - Jakub Hadvig
 
Výtlak 10 ročnej praxe
Výtlak 10 ročnej praxeVýtlak 10 ročnej praxe
Výtlak 10 ročnej praxe
 
Single Sign On - Michal Vagač
Single Sign On - Michal VagačSingle Sign On - Michal Vagač
Single Sign On - Michal Vagač
 

Jeden prototyp za 1000 meetingov - Andrej Minárik | WEBtlak #8

  • 1. Jeden prototyp za 1000 meetingov Andrej Minárik
  • 7. Jediná istota v živote je zmena. — Konfucius (alebo Mark Twain)
  • 9. Webový projekt UX výskum a návrh Grafik Copík Kóder / programátor Klient Používateľ
  • 10. 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
  • 12. 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)
  • 15. Pohyblivé vobrázky! Use case 1 redizajn, 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)
  • 17. The early stages of a rapid prototype should be created in HTML, CSS and JavaScript with little to no aesthetics.
  • 18. 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/
  • 19. 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
  • 20. Teraz sa to všetko po...ie
  • 21. Č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)
  • 22. 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.
  • 23. Ďalšia divočina Prototyp navigácie – tree testing* Prototyp služby Kníhviazačstvo - maketa * https://www.optimalworkshop.com/treejack
  • 25. Otázky, hejty & vaše skúsenosti Andrej Minárik @andrejminarik hello@andrzej.sk