Slasti a pasti prototypování

v HTML

Martin Michálek @machal

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.

skica →

prototyp

grafika

→

dokument →

skica →

prototyp

grafika

→

dokument →

skica →

prototyp

grafika

→

dokument →

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í.

Díky!

@machal vzhurudolu.cz