Základy bílého prostoru v praxi
Jak správně rozdělit stránku tak, aby se obsah mohl „dýchat”. Konkrétní příklady a principy.
Konzistentní měřítko mezer — jak na to
Vytvoříme jednotný systém odsazení, který se bude opakovat na celém webu. Bez něj to vypadá chaoticky a čtenáři se ztrácejí.
Proč měřítko vůbec vytváříme?
Když na webu používáte různé hodnoty odsazení — někdy 8px, někde 16px, někde 24px, pak 32px — web vypadá bez struktury. Návštěvníci to cítí, i když si to neuvědomují. Design se zdá amatorský a neprofesionální.
Konzistentní měřítko mezer funguje jako neviditelná mřížka, která drží celý design pohromadě. Je to jako hudební rytmus — když je správný, všechno zní harmoniózně. My jsme vám řeknou, jak ho vytvořit a používat.
Co se naučíte
- Jak vytvořit měřítko od základu
- Typické hodnoty, které fungují
- Jak jej používat v komponentách
- Testování na mobilu a desktopu
Klasické měřítko 8px
Nejčastěji se používá měřítko, které začíná na 8px. Proč? Protože se dá snadno dělit a násobit. 8, 16, 24, 32, 40, 48, 56, 64… Všechna čísla jsou sudá a jednoduchá na pamatování.
Když vytvoříte CSS proměnné s těmito hodnotami, nemusíte přemýšlet. Prostě si vezměte nejbližší hodnotu z vašeho měřítka. Aplikujete ji na padding, margin, gap mezi prvky. Všechno se vyvažuje samo.
Příklad CSS proměnných:
--spacing-xs: 8px;
--spacing-sm: 16px;
--spacing-md: 24px;
--spacing-lg: 32px;
--spacing-xl: 48px;
Jak jej používat v praxi
Jakmile máte svých pět či šest hodnot, začínejte s nimi všude. Padding na tlačítku? `padding: var(–spacing-sm);` — to je 16px. Gap mezi kartami? `gap: var(–spacing-md);` — to je 24px. Margin pod nadpisem? `margin-bottom: var(–spacing-lg);` — to je 32px.
Nebudete mít magická čísla. Všechno bude pocházet z jednoho seznamu. Když si později řeknete, že 32px je moc a chcete 28px, změníte to jednou na jednom místě a celý web se změní. Takhle to funguje, když máte systém.
Tip:
Začněte tímto měřítkem a používejte ho alespoň měsíc. Pak si všimnete, zda vám něco chybí. Třeba se vám bude zdát, že 24px je moc a 16px je málo. Pak si přidejte 20px. Ale nespěchejte.
Poznámka k příkladům
Informace v tomto článku jsou vzdělávací a vycházejí z osvědčených postupů v oboru webdesignu. Každý projekt je jiný — některé projekty mohou vyžadovat jiné měřítko nebo přizpůsobení. Tyto principy jsou začátek, ne přísná pravidla. Vždy testujte na svých konkrétních datech a obsahu.
Testování na mobilech
Měřítko 8px funguje skvěle na desktopu. Ale na mobilu, když máte 320px širokého, se 48px odsazení vlevo a vpravo zvládá — zbude vám 224px na obsah. To je málo. Obsah je sevřený.
Proto se měřítko někdy na mobilu sníží. Místo `–spacing-lg: 32px` na desktopu máte `–spacing-lg: 20px` na mobilu. Zůstáváte v systému, ale přizpůsobujete realitě. Je to správný postup.
Kroky pro testování:
- Otevřete web na telefonu (nebo simulátoru)
- Podívejte se, zda je obsah příliš sevřený
- Pokud ano, zmenšete hodnoty přes media query
- Zkontrolujte, zda je čitelné a příjemné
Komponenty a jejich odsazení
Když máte měřítko, začínejte s komponentami. Tlačítko má padding `–spacing-sm` (16px) na všech stranách. Karta má padding `–spacing-md` (24px). Sekce má gap `–spacing-lg` (32px) mezi prvky. Všechno se odvíjí od jednoho zdroje.
Není to povinné, aby všechny komponenty používaly stejný padding. Ale měl by být logický. Tlačítko s 8px paddingem vypadá stlačené. Tlačítko s 64px paddingem je rozpálené a přehnané. Zůstávejte v rozmezí vašeho měřítka a bude to vypadat promyšleně.
Konzistentní měřítko není o tom být rigidní. Je o tom mít jasné pravidlo, aby se nemusely dělat tisíc rozhodnutí. Jednou se rozhodněte a pak jen aplikujete.— Designový princip
Závěr — začněte hned
Nemusíte vymýšlet složité systémy. Vezměte si měřítko 8px, napište si pět hodnot do CSS proměnných a používejte je. Za měsíc si všimnete, jak se web zdá více sjednocený. Výrazně to pomůže i ostatním designérům, kteří budou pracovat na vašem projektu.
Měřítko mezer je základ. Když máte ten správný, všechno ostatní se buduje lépe. Bílý prostor dostane strukturu. Design dostane duši. Čtenáři vám budou děkovat, i když si to neuvědomí.
