iDNES.cz · Lidovky.cz · Esprit
Tři svébytné značky. Jeden společný základ.
Společný systém pro tři odlišné značky.
Zpravodajský portál, názorový deník a lifestylový magazín potřebují jiný výraz i rytmus čtení. Pod povrchem ale řeší podobné věci: titulky, články, navigaci a rozhraní pro různé velikosti displeje. Při práci na iDNES.cz a Lidovky.cz jsem budoval společný základ, na který později navázal také Esprit. Výzvou bylo rozšířit systém a zachovat osobitost každé značky.
Barva má v rozhraní svoji roli
Komponenta nepracuje prostě s „bílou“, ale s rolí „text na barevném podkladu“. Konkrétní hodnotu určuje značka a světlý či tmavý režim. Sémantická vrstva tak odděluje význam barvy od její hodnoty. U rozměrů a typografie se pravidla zase řídí značkou a velikostí obrazovky. Změny se dělají v návazných proměnných, místo ručního přebarvování a přestavování každé instance.
Esprit: prostor pro fotografii, vlastní nastavení
U Espritu jsme nejprve hledali čisté světlé prostředí, ve kterém vynikne fotografie. Návrh se dál vyvíjel: finální podklady pro vývoj už měly vlastní zelenomodrou paletu, teplejší neutrální tóny a zaoblení pro desktop i dotykové rozhraní. Charakter magazínu vznikal úpravou společných pravidel. Responzivní prototyp pomohl posoudit šířku a proporce ještě před programováním.
Systém musí dorazit až k vývoji
Součástí práce je i překlad mezi Figmou a implementací. Při obnově knihovny jsem dokumentoval změny a mapoval proměnné na názvy používané ve vývoji. S týmem jsme řešili barvy, mezery i zaoblení a domluvili postupný přechod: nové návrhy mohou používat novou knihovnu, starší dokumenty se přepojují vědomě.
CO PROJEKT PŘINÁŠÍ
Společný designový systém propojuje iDNES.cz, Lidovky.cz a Esprit, přičemž každý web má vlastní charakter. Vedle rozhraní vznikají pravidla, dokumentace a ověřený export proměnných do CSS. Další návrhy i předání vývoji se tak mají o co opřít: o knihovnu, kterou lze průběžně rozvíjet.