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 vzory, které fungují.
Vizuální zaměření — jak odsazení řídí pohled
Není to náhoda. Prázdné místo kolem prvku automaticky upoutá pozornost čtenáře přesně tam, kde chcete.
Když se podíváte na stránku, kde se všechno tlačí těsně k sobě, cítíte se sevřeni. Oko neví, kde se zastavit. Ale když je něco obklopené prázdným místem — prostě to vidíte. To není design, to je psychologie.
Odsazení (padding a margin) nejsou jen číslice v CSS. Jsou to nářadí, kterým říkáte čtenáři: „Podívej se sem.” Čím více místa dáte něčemu, tím více se zdá důležité. Čím více ho zmáčknete, tím víc se zdá druhořadé.
Jednoduchý princip
Více prostoru = více pozornosti. To je vše, co potřebujete vědět. Zbytek je jen aplikace.
Jak funguje odsazení kolem prvků
Vezměte si tlačítko. Když je tlačítko stisknuto těsně k textu bez mezer, vypadá to, jakoby neexistovalo. Přidejte 16px paddingu kolem něj — najednou si jej všimne každý.
Funkce je stejná. Možná se tlačítko pohybuje stejně. Ale vnímáme ho jinak. Lidský mozek interpretuje prostor jako důležitost. V přírodě jsou důležité věci obklopeny místem — hvězdy na obloze, strom v poli. Prázdno signalizuje výjimečnost.
Praktické pravidlo: Hlavní akční prvky (tlačítka, formuláře) by měly mít alespoň 20-24px vnitřního odsazení. Důležitý text by měl mít 16-20px kolem sebe. Sekundární obsah: 8-12px.
Pozn. — Tento článek se věnuje designu jako edukačnímu tématu. Prostor a odsazení nejsou správné nebo chybné — existují jen různé intence a kontexty. Vždy testujte své rozhodnutí s opravdovými uživateli.
Odsazení mezi prvky vs. kolem prvků
Máme dva typy mezer. Padding — prostor uvnitř prvku. Margin — prostor vně. Nejčastěji se matou.
Padding řídí, jak se obsah cítí uvnitř. Margin říká, jak se prvek chová v okolí ostatních prvků. Kombinace obou vytváří jazyk, kterým komunikujete se čtenářem.
Když máte karty vedle sebe bez mezer, splývají. Přidáte margin 20px — najednou jsou to samostatné jednotky. Není to jen estetika. Je to rozdíl mezi tím, aby se karty jevily jako skupina, nebo jako součást větší sítě.
Vedení pohledu prostřednictvím asymetrického odsazení
Ne všechno musí být symetrické. Někdy chcete, aby se pohled posunul určitým směrem. Asymetrické odsazení to dělá jemně.
Vezměte si nadpis. Pokud máte 40px místa nahoře a 20px dole, pohled se přirozeně pohybuje dolů. Pokud máte 20px nahoře a 40px dole, pohled se zvedá. Nevíte, že se to děje, ale mozek to cítí.
- Více místa nad prvkem = připouští jej, dává mu dýchat
- Více místa pod prvkem = tlačí pohled dolů, signalizuje pokračování
- Víc místa vlevo = asymetrická orientace, která vypadá moderně
- Víc místa vpravo = klasický, tradičnější pocit
Měřítko odsazení na různých obrazovkách
Na telefonu máte méně místa. To znamená, že každý pixel má větší cenu. Pokud používáte 32px odsazení na mobilu, obsah se zmenšuje. Potřebujete flexibilitu.
Na desktopech: 24-32px kolem obsahu. Na tabletech: 16-20px. Na telefonech: 12-16px. Není to přesná věda. Ale následování této stupnice vám pomůže zůstat konzistentní.
CSS clamp() je pro to perfektní. Místo psaní tří media queries, napíšete:
padding: clamp(12px, 4vw, 32px)
. Odsazení se automaticky přizpůsobí mezi těmito hodnotami.
Vzpamatování: prostor vede
Odsazení není jen dekorace. Je to jazyk. Když chcete něco zvýraznit, obklopte to místem. Když chcete, aby se něco sjednotilo, zmáčkněte to blíž. Čím více se učíte myslet na odsazení jako na součást struktury, tím lépe se vám navrhují webové stránky.
Zkuste si příště při prohlížení jakéhokoli webu zaměřit se na prostor. Všimněte si, jak vás vodí. Jak vás něco láká a jiné věci ignorujete. Nebude to shodou okolností. Bude to proto, že designer věděl, jak používat prostor.
Chcete se naučit víc?
Přečtěte si naše další články o bílém prostoru a konzistentním měřítku odsazení.
Základy bílého prostoru v praxi
Pokračujte v učení
