slasti a pasti prototypování v html
TRANSCRIPT
fb.com/vzhurudolu vrdl.cz/martin
Jsem frontend designér, takže mám na starosti HTML/CSS kód, ale také spolupráci nebo celý návrh rozhraní. O redesignu VašeČočky.cz jsem už mluvil. Pojďme teď do hloubky jedné z částí procesu – HTML prototypování.
Proces Designéři
Frontendisti Nevýhody Nástroje
fb.com/vzhurudolu vrdl.cz/martin
Slasti a pasti prototypování
v HTML
Proces Designéři
Frontendisti Nevýhody Nástroje
fb.com/vzhurudolu vrdl.cz/martin
Slasti a pasti prototypování
v HTML
Proces
skica →
prototyp
grafika
→
dokument →
Můj proces návrhu je velmi jednoduchý a oproštěný od mnohých nástrojů. Jen papír, tužka, kód a prohlížeče.
HTML prototypy jsou fajn!
😃 Brzy v prohlížeči 😃 Plnohodnotné 😃 Znovupoužitelné 😃 Snadno udržovatelné 😃 Volitelná věrnost
Proces Designéři
Frontendisti Nevýhody Nástroje
fb.com/vzhurudolu vrdl.cz/martin
Slasti a pasti prototypování
v HTML
Designéři
HTML prototypy pro designéry:
😃 Responzivnost 😃 Animace 😃 Pokročilé interakce 😃 Pokročilé SVG vlastnosti 😃 Testování na uživatelích
Proces Designéři
Frontendisti Nevýhody Nástroje
fb.com/vzhurudolu vrdl.cz/martin
Slasti a pasti prototypování
v HTML
Frontendisti
Obvyklí podezřelí
Rychlost
načítání
Výkon Přístupnost
Prohlížeče
Udržovatelnost
Zdroj obrázků: shortlist.com
Určité problémy s podklady se u frontendistů stále opakují. Velmi by pomohlo, když by si složitější stránky webů mohli vyzkoušet na prototypu už v rané fázi projektu.
Proces Designéři
Frontendisti Nevýhody Nástroje
fb.com/vzhurudolu vrdl.cz/martin
Slasti a pasti prototypování
v HTML
Nevýhody
HTML prototypy
Zdroj obrázků: kosik.cz
Klikací nástroje už z principu nemohou nabízet všechny možnosti vyjádřitelné kódem, nemohou umět vše co umí prohlížeče. A to i tehdy, když nabízejí export do HTML. Pomůže to, ale není to plnohodnotné.
Nevýhody HTML prototypů
☹ Časově náročné ☹ Zkušenější tým ☹ Intenzivní spolupráce ☹ Dilemata rychlost / kvalita
Patička
Selektor parametrů čoček
Některé komponenty jsou přímočarejší – jako patička na VašeČočky.cz. Tam bych příště dělal prototyp s nižší mírou věrnosti. U selektoru parametrů, který má mnoho variant, bych prototyp s vysokou věrností udělat znovu.
Let’s change the phrase designing in the browser to deciding in the browser.
Dan Mall
“
I když třeba neoceníte HTML prototypování na celé weby, vzpomeňte si na ně až budete dělat jakoukoliv složitější komponentu uživatelského rozhraní.
Proces Designéři
Frontendisti Nevýhody Nástroje
fb.com/vzhurudolu vrdl.cz/martin
Slasti a pasti prototypování
v HTML
Nástroje
Bootstrap
CodePen
Bootstrap používám, když chci prototypovat celý web. CodePen na prototypování malých kousků rozhraní.