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