Khoi Vinh: Ordering Disorder
Minirecenze knihy o mřížce ve webdesignu od Design Directora webu New York Times.
Ti, kdo mě sledují na Twitteru vědí, že jsem si na Vánoce pořídil Kindle. První přečtenou knihou na Kindle se stala Ordering Disorder: Grid Principles for Web Design – prošla sítem jako jediná z poslední doby, kde mě zaujalo téma i autor.
Ve zkratce k mřížkám
Čím složitější web designujete, tím větší pocit vizuálního řádu uživatel potřebuje. Důležité je slovo pocit – mřížka není na první pohled vidět, ale návštěvník s její pomocí intuitivněji prochází webem.
Mřížky ve webdesignu teoreticky
Khoi knihu rozdělil na 2 oddělené části. V první – teoretické – se zabývá historickým vývojem mřížky, argumentací proč mřížky používat a procesem, jak mřížku vytvořit. Zaujal mě přístup vytváření dvojí mřížky – standardní sloupcové + doplňkové řádkové (na základě velikosti písma) s tím, že řádkový (baseline) grid je pouze sekundárním nástrojem a když někde něco nesedí, tak to můžeme ignorovat.
Také mě zaujalo důsledné oddělení textového obsahu o 5px dál od sloupců mřížky – tento přístup už jsem mnohokrát viděl v různých online prezentacích z konferencí, ale doposud jsem ho nepoužíval. Vznikají tak o kousek vzdušnější a paradoxně přesnější layouty vzhledem k mřížce (např. když odkazům v menu dáváte jiné pozadí a chcete je zarovnat do mřížky právě vzhledem k tomu pozadí, ale zároveň chcete, aby odkazy byly v mřížce s ostatním textem).
Při tvorbě mřížek se autor soustředí na omezení – říká doslova, že čím hůře lze omezení obejít (např. ve formě pevné šířky banneru), tím lépe se mřížka řeší (najednou už nemáte nekonečně mnoho interpretací). Obecně doporučuje používat mřížky se sloupci dělitelnými čtyřmi.
Mřížky ve webdesignu prakticky
V druhé části knihy je tvorba a aplikace mřížky prakticky demonstrována při tvorbě hypotetického komunitního webu pro designery – zajímavé je sledovat autorovy myšlenkové pochody a případně je porovnávat s vlastní zkušeností.
Závěr
Kniha je relativně krátká, ale ačkoliv neobsahuje převratné myšlenky, tak může být pro mnohé webdesignery inspirující (obzvláště praktická část). Já jsem si tam také pár „detailů“ pro aplikaci mřížek našel.
Související
Komentáře
Zajímavá recenze, díky.
Přehledná grafika se bez mřížky neobejde. U jednodušších webů je
třeba mít dobře vyřešené alespoň vertikální členění. Je dobře, že
autor nepropaguje jen hotovou šablonku (př. 960 či třeba 978 px), ale
vysvětluje zákonitosti. Jen se svobodnějším poučeným přístupem jde
z mřížky vytěžit maximum.
Nechci píchat do vosího hnízda, ale otevřel jsem si jen tak ze
zvědavosti web http://www.nytimes.com a málem jsem spadl ze židle.
Vidím nepřehledný, graficky velmi nehezký a přitom tak nějak
„přeplácaný“ web.
A mřížka…, ten box vpravo nahoře trčí a banner vlevo nahoře…no.. je
to správně použitá mřížka?
Upřímně – jaké je hodnocení nytimes.com z pohledu odborníka na „webdesign“?
- průšvih
- podprůměr
- docela dobrá práce, ale má to mouchy
- výborná práce
- úžasné, fascinující
Děkuji moc za odpovědi.
Mně NYT sedne – a ano – je tam obrovské množství informací na jednom místě a začínající uživatel si pravděpodobně přečte jen to nejvýraznější (klikne na foto či hlavní články). Zbytek je pro stálé čtenáře.
Je to udělané, jako styl novin a kdo jde po informacích tak je schopen se prodírat množstvím informací, protže mu jde o výsled dozvědět se něco. Né jen něco přelétnout očima. Taky mi ta stránka nepřijde patná. Nemůžeš to srovnávat s alikem, který je pro malé děti.
Souhlasím, že velké weby se spoustou textu jsou bez mřížky neudržitelné.