Designování webů v prohlížeči

Martin Michálek @machal

nabídka → grafika → frontendista → programátor → spuštění

V roce 2005 jsme měli pracovní postupy ve webdesignu krásně jednoduché.

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

nabídka + grafika → frontendista → programátor → spuštění

Spojením grafiky a nabídky se to dá ještě zhoršit.foto

Niagarský průseropád.

foto

vyhodnocení

→ → → → →

→ → UX grafika frontendistaprogramátor spuštění

analýza

Když zjednodušíme dnešní obvyklé pracovní postupy, vypadají takto.

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

Do prohlížeče se návrh dostane pozdě.

(Responzivnost, rychlost načítání …)

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.

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.

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

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

Analýza

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

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.

Obsah a struktura

V Google dokumentu diskutujeme o obsahu a jeho hierarchii.

Lineární design

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

23

11

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ů

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

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.

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.

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

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

Návrh UI komponent: skicování

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.

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

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

Web = Multimediální hypertext

+ Interakce+ Responzivnost

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

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.

Start with the small screen first Stephen Hay

“

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

“

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

“

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

“

Let’s change the phrase designing in the browser to deciding in the browser.

Dan Mall

“

Nutně potřebujeme nový Photoshop

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

Grafika

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

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

→

→

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.

@machal vzhurudolu.cz

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