Vizuální design

Designér odevzdá maketu. Tři obrazovky ve Figmě, každá nádherná. Nadpisy jsou krátké a úderné, u každého produktu sedí čtvercová fotka, kategorie má šest položek, perex přesně tři řádky. Klient přikývne, web se postaví, naplní se obsahem z CMS, a najednou to drhne. Nadpis akce má tři řádky a rozhodí celý hero. Jeden produkt fotku nemá vůbec, takže v gridu zeje díra. Kategorie nemá šest položek, ale dvě stě. Layout, který ve Figmě vypadal dokonale, se pod reálným obsahem sype.

Vypadá to jako chyba designéra. Není, je to chyba procesu.

Vzhled musí následovat po přípravě struktury, ne první

Celá tahle část knihy odkládala vzhled. Nejdřív informační architektura, pak obsahový model, pak média. Vzhled až nakonec. Snadno se to vyloží jako despekt: design je kosmetika, dořeší se, až bude hotová ta důležitá práce.

Tak to není myšleno. Odložili jsme to, abychom mohli odmakat přípravu a designér pak měl naopak snazší práci.

Maketa z úvodu stála na třech vymyšlených příkladech. Designér nemaloval systém, který unese cokoliv, co do něj redakce nasype. Maloval tři hezké stránky. A tři hezké stránky reálný obsah nepřežijí, protože skutečný obsah je delší, kratší, chybí, nebo ho je moc.

Takže teprve, když máme hotovou kostru, může dělat vzhled svou skutečnou práci. To je těžší než malovat vymyšlené stránky. A je to designérovo řemeslo, do kterého tu vůbec nechci mluvit. To co tu chci probrat je, kdy v životě webu vizuál přichází, co potřebuje na vstupu a co naopak my bychom chtěli mít o designu.

Co design dostává na vstupu

Vizuál není kreslení obrazovek stranou od zbytku projektu. Má vstupy a výstup. A vstupy jsou přesně to, co jsme doteď vyráběli.

Z informační architektury přichází navigace a hierarchie. Kolik úrovní má menu, jak vypadá breadcrumb, co jsou facety v katalogu. Design tyhle věci vizuálně uchopí, ale nevymýšlí je. Když strom obsahu nefunguje, hezké menu to nespraví.

Z obsahového modelu přicházejí entity a jejich pole. Tohle je nejtěžší vstup, protože nese variabilitu. Model neříká „produkt má fotku". Říká „produkt fotku mít může a nemusí, titulek je krátký i dlouhý, cena je se slevou i bez ní". Vizuál musí unést všechny tyhle stavy, ne jeden vzorový záznam. Komponenta karty produktu, která se rozsype, když fotka chybí, nám může být pěkně k ničemu a nechcete to zjistit při plnění webu daty. Stalo se nám to, zpozdilo to projekt o půl roku.

Z médií přichází skutečný materiál. Reálné fotky v reálných poměrech stran, ne placeholdery z fotobanky vybrané tak, aby se hodily k layoutu. Lorem ipsum a hezké stock fotky jsou ta samá past: design vyladěný na ideální vstup.

Když je tohle hotové dřív, než se otevře Figma, designér dostane zadání, na kterém se dá postavit systém.

Kde se rozhoduje o přístupnosti a výkonu

V designu padají rozhodnutí, která se projeví mnohem později. Barvy rozhodnou o kontrastu textu. Velikost tlačítek o tom, jestli se do nich na mobilu člověk trefí. Font a jeho řezy přinesou kilobajty a rozhodují, jestli text při načítání poskočí. A velikost hlavního obrázku určí, jak rychle se vizuál objeví.

Žádné z těch rozhodnutí se v designu netváří jako přístupnost nebo výkon. Tváří se jako estetika. Proto se vyplatí vědět, že tady ty volby vznikají, i když je pak budeme řešit jinde.

„Redesign je přece nový vzhled"

Tohle má klient v hlavě skoro vždycky. Redesign se rovná nové barvy, nové písmo, modernější vzhled. Nejviditelnější vrstva působí jako ta hlavní.

Přebarvit web je relativně levné a bezpečné. Co web reálně zlepší (a nebo taky rozbije), je zásah do struktury pod vzhledem: změna URL, jiný obsahový model, jiná navigace. Redesign je prostě hlavně o cílech, které jsme si pro web stanovili. Návštěvník přišel něco udělat a design, který je krásný a brání hlavní úloze, je horší než obyčejný, který jí pomáhá.