Konzistentní měřítko mezer — jak na to
Vytvoříme jednotný systém odsazení, který se bude opakovat na celém webu. Bez něj vypadá každá stránka jinak.
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 odsazení, které fungují.
Proč není všechno nahusto?
Když se podíváš na pěkný web, není to proto, že má hromadu barev nebo moderní fonty. Je to proto, že vzduch má prostor. Bílý prostor — nebo prázdný prostor kolem prvků — je to, co dělá stránku čitelnou a přívětivou.
Představ si knihu napsanou bez odstavců. Každý řádek by šel od levého okraje na pravý, text by se valil přes sebe a byla by to noční můra. Teď představ si web stejně zahlcený. To se děje všude — a lidé to pak nechtějí číst.
Dobrý bílý prostor není nehoda. Jsou to rozhodnutí. Konkrétní odsazení, která se opakují, a jednotná měřítka, která dávají celé stránce smysl.
Odsazení mezi prvky
Máš dvě možnosti, jak dát prvkům prostor. První je odsazení okolo prvku — to se jmenuje padding. Druhé je prostor mezi prvky — to se jmenuje margin.
Prakticky: padding je vnitřní prostor, margin je vnější prostor. Když dáš padding na tlačítko, text uvnitř se vzdálí od okraje tlačítka. Když dáš margin, vzdálí se od ostatních prvků kolem něj.
Konkrétní příklad:
Tlačítko se standartním paddingem: 12px nahoře/dole, 16px vlevo/vpravo. To dá textu uvnitř dost místa na dech. Margin mezi tlačítkem a dalším prvkem: 24px. To je dost na to, aby se prvky nespletly.
Není to náhoda. Lidé se lépe orientují, když je mezi věcmi rozumný prostor. Když se prvky dotýkají nebo jsou moc blízko, mozek si není jistý, jestli to patří k sobě nebo ne.
Na co je tohle články?
Tenhle článek je edukační zdroj o principech bílého prostoru v designu. Jsou to obecné pokyny a příklady, které se liší v závislosti na obsahu, cílové skupině a technickém řešení. Konkrétní implementace vždy závisí na tvém projektu a cílech.
Měřítko, které se opakuje
Tady přichází klíč k celému věci. Není to dost jen říct „dej tam nějaký prostor”. Musí to být systém. Něco, co se opakuje.
Myslíš si, že nejlepší weby to dělají náhodně? Ne. Mají měřítko. Třeba 8px jako základní jednotka. Pak je 16px, 24px, 32px — všechno násobky 8. Nebo si vezmeš 12px — pak 24px, 36px, 48px.
- Padding na kartách: 24px všude (nebo 16px na mobilu)
- Gap mezi kartami: 32px (nebo 16px na mobilu)
- Margin nad nadpisem: 48px (nebo 32px na mobilu)
Když máš systém, všechno vypadá jako to patří k sobě. Člověk se na webu orientuje snadno, i když si toho nevšimne. To je dobrý design.
Odsazení řídí pohled
Prostor není jen něco, co je tam proto, aby to vypadalo hezky. Řídí to, kam se podívá čtenář.
Když máš prvek se spoustou odsazení kolem něj, automaticky si na něj všimneš. Oko se na něj přitáhne. To je proč mají důležitá tlačítka — Call-to-Action — kolem sebe víc místa než ostatní věci. Není to nehoda. To je psychologie.
64px
typické odsazení kolem klíčového prvku
Co s tím na mobilu?
Tady je realita. Na mobilu máš místo jen 375px nebo 390px. Nemůžeš dát 64px odsazení všude. Prostě na to místo není.
Takže se měřítko mění. Na mobilu můžeš jít s 16px nebo 24px. Ale pořád to musí být systém. Pořád to musí být logické. Neděláš to náhodně.
Dobrý přístup je vzít si tvé měřítko a vydělit ho na mobilu dvěma. Máš 32px na desktopu? Na mobilu to bude 16px. Tím se stránka přizpůsobí a pořád vypadá jako stejný design, jenom zmenšený.
Začni s jedním pravidlem
Nemusíš to mít všechno vyřešené od prvního dne. Začni s jedním měřítkem — třeba 16px jako základní jednotka. Pak 32px, 48px, 64px. To je dost. Drž se toho a všechno ostatní se srovná.
Příští fois, když se podíváš na web, který se ti líbí, všimni si vzduchů mezi prvky. Všimni si, jak se obsah „dýchá”. Není to štěstí. Je to práce. A teď víš, jak se to dělá.
Klíč: Prostor není zbytečný. Prostor je designová rozhodnutí, která řídí, co vidí čtenář a co cítí.
