Design webů v prohlížeči

transcript

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.

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.

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.

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.

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

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