Převod designových principů do CSS

Většina designerů používá při práci různé osvědčené postupy, které zlepšují efektivitu, usnadňují rozhodování a pomáhají dosáhnout funkčně a esteticky obstojných výsledků. Mezi takové nástroje patří např. layoutová mřížka, modulární škála nebo různé metody pro volbu barevné palety.

Většina z těchto metod není nijak nová — v tiskovém designu se využívají desítky let. Metody rozvržení textu na stránce jsou dokonce stovky let staré. Co ale nové je, to je médium. Doba, kdy byl web považován za statické médium je již dávno pryč, web je dnes dynamický, fluidní. A zatímco tiskový grafik má stále plnou kontrolu nad tím, jak výsledek jeho snažení bude vypadat, webdesignerův úkol je složitější: místo jediného obrazu musí navrhnout celý systém fungování designu pro ohromné množství variant obrazovek.

Protože nástroje pro skutečný responzivní webdesign jsou stále v plenkách, musí webdesigner svůj návrh zachytit do několika obrazů, kdy typicky říká, jak bude web vypadat na běžném telefonu, tabletu a desktopu. Webdesigner nejen že nevytváří finální dílo, dokonce jen popisuje několik jeho konkrétních stavů. Nakonec, jestliže klasický grafik (zjednodušeně řečeno) pošle tiskové podklady do tiskárny a má hotovo, výroba webu se teprve přesouvá do další fáze — ke kodérovi. A webdesigner může být zatím napnutý, jak dílo dopadne.

Špička ledovce

Úloha kodéra spočívá v uchopení návrhu webdesignera, jeho porozumění a znovuvystavění s pomocí webových technologií. Jestliže prostředníkem v komunikaci mezi webdesignerem a kodérem je grafický design webu, velmi záleží na tom, jak podrobně designer svůj návrh popíše, aby kodérovi umožnil pochopit myšlenku fungování dotčeného designu. Může se stát, že nedostatek dokumentace přinutí kodéra k implementaci vnějších příznaků namísto oživení skutečných principů systému designu. To se pravděpodobně následně neblaze projeví v situacích, které přímo nebyly designerem rozkresleny či popsány, ať jsou to některá netypická či mezní rozlišení nebo třeba tvorba stránky, jejíž design nebyl nakreslen.

Grafický design webu je otisk webdesignerovy mysli — pomyslná špička ledovce.

Už tedy víme, že k úspěchu je důležitá komunikace mezi webdesignerem a kodérem. Jen obrázky nestačí. Designer by měl popsat principy fungování svého návrhu tak, aby je kodér dokázal oživit v prohlížeči. Aby výsledkem nebyl mechanicky nakódovaný obrázek, který se trochu přizpůsobuje šířce monitoru, ale skutečně responzivní web. Má to ale háček. Ne všechny designové principy mají totiž svůj protějšek v CSS.

Barevná paleta

Začněme tím jednodušším — barvami. Barevná paleta je jedním ze základních prvků každého designu. Barvy mají vliv na to, jak bude web vnímat uživatel. Mají svůj význam a některé z nich i zažité konotace, které bývá lepší neměnit. Zvláštní úlohu hrají barvy spojené se stavy uživatelského rozhraní: (červené) chybové hlášky a destruktivní akce, (oranžová) varování, (zelená) oznámení o úspěchu — to jsou kontexty, s nimiž tradičně spojené barvy bude velmi riskantní měnit, protože jsou nositeli významu a uživatel je takto zná.

Designer obvykle nejprve sestaví barevnou paletu, která odpovídá pozicování značky projektu a tomu, jak má design na uživatele působit, jaké emoce má vyvolávat. Inspirovat se může ve vzornících Pantone, RAL, anebo sáhne po nástrojích stvořených speciálně pro navrhování barevných motivů, jako je Adobe Color (dříve Kuler) nebo český Paletton Petra Staníčka. Barevná schémata pak mohou být sestavena podle technicky uchopitelných principů.

Kodér definici barevné palety převezme a pokud je to vhodné, může vztahy mezi barvami zachovat i ve svém kódu. Pravda, definice doplňkové barvy nebo triády (sestavy tří doplňujících se barev) jednoduchá nebude, ale třeba parametrická paleta odstínů šedé, případně jiných barev, je s preprocesorem docela snadná záležitost.

// colors.less

// Adjust the tone of gray using HSL color format:
@_gray-hue: 228;
@_gray-saturation: 5%;

@colors-gray: {
    50: hsl(@_gray-hue, @_gray-saturation, 95%);
    100: hsl(@_gray-hue, @_gray-saturation, 90%);
    200: hsl(@_gray-hue, @_gray-saturation, 80%);
    300: hsl(@_gray-hue, @_gray-saturation, 70%);
    400: hsl(@_gray-hue, @_gray-saturation, 60%);
    500: hsl(@_gray-hue, @_gray-saturation, 50%);
    600: hsl(@_gray-hue, @_gray-saturation, 40%);
    700: hsl(@_gray-hue, @_gray-saturation, 30%);
    800: hsl(@_gray-hue, @_gray-saturation, 20%);
    900: hsl(@_gray-hue, @_gray-saturation, 10%);
}

Velmi zajímavou technickou inspirací je práce s barvami v Material Design Components for Web.

Typografie

Základem každé sazby běžného textu je stanovení správného poměru tří parametrů: velikosti písma, délky řádku a prokladu řádků. Zejména velikost písma a proklad ovlivňuje volba písma. Co bude krásně fungovat s jedním písmem nemusí fungovat s jiným. Přestože existují osvědčené rozsahy parametrů (proklad řádků 1,45—1,55, délka řádku optimálně 45–60 znaků, nejvýše 75; uvádí se ale i jiné hodnoty a navíc vždy záleží na konkrétním písmu, ale i médiu), správný poměr je třeba vždy znovu vyladit pro daný projekt a danou situaci.

Asi nejznámějším nástrojem pro navrhování velikostí písma je modulární škála: každá velikost písma je určitým násobkem předchozí velikosti dle zvoleného poměru. Podobně jako u hudebních intervalů je vyzkoušené, že takto stanovené velikosti písma k sobě esteticky dobře ladí. Jako u každé metodiky, i modulární škálu je možné rozšířit (zvolit kombinaci více řad s různým poměrem), vybrat si jen některé velikosti nebo ji úmyslně porušit.

ModularScale.com nebo Type-Scale.com jsou velmi šikovné nástroje pro stanovení typografické modulární škály.

V preprocesoru pak může implementace modulární škály s lehkým přizpůsobením vypadat třeba takto:

// _variables.scss

$modular-scale-ratio: 1.55;

$font-size-display-1: 1rem * pow($modular-scale-ratio, 5) + 0.9rem;
$font-size-display-2: 1rem * pow($modular-scale-ratio, 3);
$font-size-display-3: 1rem * pow($modular-scale-ratio, 2);
$font-size-display-4: 1.5rem;

Pozorný čtenář si možná všiml, že SASS (narozdíl od LESS) nedisponuje funkcí pro mocninu, kterou bychom si pro příklad výše museli dopsat sami. Pokud nás to neláká, s balíčkem modularscale-sass může být práce dokonce ještě jednodušší.

// _variables.scss

$modularscale: (
    base: 1em,
    ratio: $major-second,
);

$font-size-display-1: ms(5);
$font-size-display-2: ms(3);
$font-size-display-3: ms(2);

Při kódování systému typografie nemusí zůstat jen u parametrických velikostí písma. Tak jako má grafik k dispozici typografické styly ve svém editoru, může styly takřka úplně stejným způsobem definovat a používat i kodér.

// _variables.scss

$typography-styles:
    subheading: (
        default: (
            font-weight: map-get($typography-font-weight-values, regular),
            font-size: map-get($typography-scale, 2),
            line-height: spacing(1),
            font-family: $typography-font-family-serif,
            font-style: italic,
            text-transform: none,
        ),
        breakpoints: (
            md: (
                font-size: map-get($typography-scale, 3),
            ),
        ),
    ),
);

Grid

V digitálním designu se k zarovnání tradičně využívá drobná čtvercová mřížka. Slouží k jemnému zarovnání prvků, jejichž pozice není určena vodítky pro horizontální a vertikální rytmus nebo centrováním.

Až dosud byly možnosti nástrojů grafika a kodéra vyrovnané. Za čtvercovou mřížku připisujeme ale bod pouze designerovi, kodérovi nezbývá než krčit rameny. Výpočet layoutu webové stránky probíhá docela jiným způsobem než nezávislé rozmisťování prvků v grafickém editoru. Přestože na webu můžeme pro odsazení a rozměry používat násobky velikosti této mřížky, principiálně v prohlížeči žádné takové vodítko k dispozici nemáme.

Horizontální rytmus

Zatímco se čtvercovou mřížkou jsme u kodéra nepochodili, v horizontálním rytmu je kodér již roky kovaný. Pod zavedeným názvem grid patří mezi nejpoužívanější rozvržení stránky do 12, 16, případně 24 stejně širokých sloupců s mezerou. Dobré grafické editory umožňují parametrické nastavení horizontálního gridu v zásadě úplně stejně, jako svůj grid nastavuje i kodér.

Synonymem pro grid je pro kodéry již dlouhá léta Bootstrap — proslulý framework, který toho kromě gridu umí mnohem víc. Ve výchozím nastavení generuje CSS třídy pro dvanáctisloupcový fluidní layout s 30px mezerou. To lze samozřejmě přizpůsobit v SCSS proměnných dle potřeb projektu.

Mimochodem: kodéři do svých projektů často zapojují celý Bootstrap, přestože využijí jen jeho grid. Tím pak trpí výkon webu a uživatel. Je dobré vědět, že od verze 4 je grid v Bootstrapu docela dobře izolovaný — a tedy použitelný i samostatně, bez přítěže zbytku frameworku —, případně že existují jiné dobré projekty řešící pouze grid.

Vertikální rytmus

Asi nejtěžší disciplínou v našem srovnání je vertikální rytmus. Z grafických editorů tuto úlohu zvládají spíše nástroje pro sazbu knih a dokumentů jako Adobe InDesign. V těch ostatních je pro nastavení třeba trocha ruční práce a definovat vertikální vodítka. I pak ale funguje pouze přichytávání na tato vodítka. Zarovnání účaří se neděje automaticky, to zůstává výsadou InDesignu.

Citlivé uchopení vertikálního rozložení je stejně důležité jako práce s horizontálním rytmem (gridem). Již staletí víme, že geometrická práce s rozvržením vtiskuje obsahu řád a harmonii. Lidský mozek to ocení a pro čtenáře je jednodušší takový obsah číst.

Vertikální rytmus v praxi znamená, že účaří textu, vertikální odsazení a výšky prvků stránky pracuje s vertikální mřížkou. Ta je odvozena od velikosti písma základního textu, od níž jsou zase odvozené ostatní velikosti písma, a proto výsledek působí harmonicky. Vertikální mřížka může být jemnější, třeba až v detailu čtvercové mřížky v předchozí kapitole, nebo může pracovat s celou výškou řádku základního textu.

Na webu se kodérům s vertikálním rytmem zatím pracuje velice složitě. Především proto, že se musí potýkat se specifikem chování textu v prohlížeči. Grafický editor dovede pracovat s viditelnou hranicí znaků — jmenovitě s účařím a horními dotahy — a výška řádku (proklad) pro něj znamená vzdálenost mezi dvěma účařími. Textové bloky pak zarovnává k těmto hranicím a počítá od nich vzdálenost k sousedním objektům.

Naproti tomu text v prohlížeči disponuje obálkou: nad horními dotahy a pod účařím přidává prostor a výšku řádku definuje jako vzdálenost mezi horním a spodním okrajem obálky. Písmo pak dle jeho charakteristik do obálky umisťuje (různá písma mají různou charakteristiku). Tomuto rozdílu mezi skutečným účařím a okrajem obálky se říká baseline shift — posun účaří. Kodér nejen že skutečné účaří nemá přímo k dispozici a rozdíly musí ručně kompenzovat, navíc je nastavení mezi písmy kvůli odlišné charakteristice nepřenositelné. Kdo někdy měnil písmo na hotovém webu, ví, o čem je řeč.

V kódu to typicky znamená přidání (kladného nebo záporného) vertikálního odsazení:

// _variables.scss

$typography-styles: (
    master-headline: (
        default: (
            padding-top: 0.7rem,
            margin-bottom: spacing(2) - 0.7rem,
            font-weight: map-get($typography-font-weight-values, black),
            font-size: map-get($typography-scale, 6),
            line-height: spacing(2),
            font-family: $typography-font-family-sans-serif,
            letter-spacing: -0.025em,
            text-transform: uppercase,
        ),
    ),
);

Zvláštní kapitolou je práce s responzivními obrázky. Aby i obrázky dodržovaly vertikální rytmus, jejich výška se (narozdíl od rovnoměrně rostoucí šířky) musí měnit skokově v násobcích zvolené jednotky vertikálního rytmu. Pokud se chceme vyhnout JavaScriptu, nezbývá než vytvořit speciální kontejnery pro typové velikosti obrázků, v CSS jim nadefinovat výšky pro potřebný počet breakpointů a vlastní obrázky v nich přizpůsobovat např. pomocí vlastnosti object-fit.

Šikovným nástrojem pro kontrolu účaří v prohlížeči je rozšíření pro Chrome jménem Baseliner.

Shrnutí

Návrh a implementace systematického designu jsou mimořádně složité a jistě ne všechny projekty takovou míru preciznosti vyžadují. Téměř jistě alespoň některé uvedené postupy využijete při budování UI knihovny. Mohou se hodit pro náročné prezentační weby, jako je třeba výše uváděný Egamebook.com, u něhož hraje dobrá sazba zásadní roli. Pro běžné weby s nižšími technickými nároky, relativně krátkou životností a postradatelnou konfigurovatelností a škálovatelností je to spíš kanón na vrabce.

Je také dobré vědět, že technická dokonalost nemusí nutně znamenat dokonalost estetickou. Živelný, kreativní design může být tisíckrát lepší než chladně vypočítaný design inženýrský (ačkoliv může být výrazně složitější na nakódování). Mnohem důležitější je pro úspěšný výsledek komunikace mezi designerem a kodérem. A pozor, pokud je znáte a ovládáte, i pravidla se mohou porušovat.

Související odkazy

• Jak tvořit systematické barvy pro digitální produkty (Jiří Chlebus, 2019)

Napsáno podle autorovy přednášky Turning Design Principles into CSS na setkání pražských Frontendistů v prosinci 2018.