http://www.vzhurudolu.cz/prednaska/design-webu-v-prohlizeci-149 ***** Přednáška pr WebExpo 2015. Pojďme si ukázat proces návrhu rozhraní webu při responzivním redesignu eshopu VašeČočky.cz. V posledních letech jsem opustil standardní postupy s wireframy a Photoshopem. Vystačím si s papírem, tužkou a prohlížečem.

1. Designování webů
v prohlížeči
Martin Michálek
@machal

2. nabídka → grafika → frontendista → programátor → spuštění
V roce 2005 jsme měli pracovní postupy ve webdesignu krásně jednoduché.

3. nabídka → grafika → frontendista → programátor → spuštění
Tomu postupu říkáme vodopád. Ve skutečnosti tam nepadá voda,
ale průsery. Je to průseropád. foto

4. nabídka + grafika → frontendista → programátor → spuštění
Spojením grafiky a nabídky se to dá ještě zhoršit.
foto

5. Niagarský průseropád.
foto

6. vyhodnocení
→ →
→ → →
→ →
UX grafika frontendista
programátor spuštění
analýza
Když zjednodušíme dnešní obvyklé pracovní postupy, vypadají takto.

7. vyhodnocení
→ analýza →
UX → grafika → frontendista →
programátor → spuštění →
V těchto slajdech se zaměříme na proces návrh uživatelského rozhraní.

8. Do prohlížeče se návrh
dostane pozdě.
(Responzivnost, rychlost načítání…)

9. vyhodnocení
→ analýza →
UX + frontendista → grafika →
programátor → spuštění →
Ukážeme si postup, kdy se díky spojení designéra s kodérem dostane
rozhraní do prohlížeče hned na začátku.

10. obsah a struktura → lineární design → skici → design v prohlížeči
Takto se postupuje. Pojďme si to v dalších slajdech ukázat.

11. A ukážeme si to na procesu probíhajícího redesignu VašeČočky.cz.

12. Tohle je současná verze webu. Jen pro desktop.

13. Analýza

14. Při redesignu zohledňujeme mobilní zařízení a data
z AB testů a různých analytických nástrojů.

15. Chegeva–konzerva stupnice
Zároveň chceme být konzervativní v úpravách rozhraní,
na které si uživatelé zvykli a je na něm postavený byznys klienta.

16. Obsah a struktura

17. V Google dokumentu diskutujeme o obsahu a jeho hierarchii.

18. Lineární design

19. Hierarchii si s reálným obsahem můžeme hned ověřit v prohlížeči.

20. 2
3
1
1
1
1) UI komponenty, které vyžadují zvláštní péči – 2) Špatně umístěný popis produktu –
3) Elementy, které využije minorita uživatelů

21. Namísto UI komponent máme v nové verzi šedivé
placeholdery, abychom se mohli soustředit jen na strukturu a obsah.

22. 1
2
3
Nová verze řeší zmíněné problémy. Byly dobře vidět hlavně
na reálných mobilních zařízeních při testování palcem.

23. V jedno Mobile First
věřiti budeš.
V této fázi se na rozhraní díváme jen z mobilů a návrhové
problémy řešíme v jejich prospěch.

24. Prohlížeč je
webdesignérův
trasér.
Tento způsob návrhu webu je výhodný i pro někoho, kdo s tím nemá velké zkušenosti.
foto

25. Pojďme vymýšlet návrh komponent uživatelského rozhraní.

26. Návrh UI komponent:
skicování

27. V první fázi skicování jen bez přemýšlení vygeneruji ohromné množství variant
rozhraní komponenty. Pak přemýšlím a jednu vyberu.

28. Vybranou ještě podrobněji rozkreslím i v různých stavech a různých rozlišeních.

29. Skica, PSD, wireframe –
statická hypotéza pro
dynamické médium.

30. Web =
Multimediální hypertext
+ Interakce
+ Responzivnost

31. Návrh UI komponent:
ověření v prohlížeči

32. 360px 320px, iPhone 5s 240px
1024px
Tady už ověřuji hypotézu ze statické skici v prohlížeči a v různých podmínkách.

33. Start with
the small screen first
Stephen Hay
“

34. Start with
the small screen first,
then expand it
Stephen Hay
“

35. Start with
the small screen first,
then expand it,
until it looks like shit.Stephen Hay
“

36. Start with
the small screen first,
then expand it,
until it looks like shit.Stephen Hay
“

37. Let’s change the phrase
designing in the browser to
deciding in the browser.
Dan Mall
“

38. Nutně potřebujeme nový Photoshop

39. Postupně skicuji a ověřuji i další komponenty a pak layout stránky,
který výmýšlím úplně stejně.

40. Grafika

41. Vizuální styl
Jelikož jde o redesign webu, vizuální styl se radikálně neměnil. Proto jsme na grafice
pracovali až v téhle fázi. Jinak bychom ji zařadili už k lineárnímu designování.

44. analýza →
obsah a struktura →
lineární design → skici →
design v prohlížeči → grafika →
programování → spuštění →
vyhodnocení
→
→

45. Co si z toho vzít?
1. Statické editory tvoří hypotézy.
2. Prohlížeč je v našem workflow příliš vzadu.
3. Designovat všechno v prohlížeči je náročné.
4. Netriviální komponenty ověření v prohlížeči vyžadují.
5. Prohlížeč je webdesignérský trasér.
6. Čekáme na lepší nástroje.

46. @machal
vzhurudolu.cz
Ebook „Vzhůru do CSS3“
vzhurudolu.cz/ebook