Hero sekce — Správná architektura rozložení
Naučte se, jak postavit hero sekci, která skutečně funguje. Pokrývá velikost fontu, umístění tlačítka a jak vytvořit dojem profesionality hned na první pohled.
Přečíst článekPrázdné místo v designu — Základní principy
Více místa není vždy lépe, ale málo místa určitě škodí. Naučte se, jak správně používat prázdné plochy pro čitelnost a profesionální vzhled.
Proč je prázdné místo důležité?
Prázdné místo — někdy zvané “negativní prostor” — je vzduch kolem vašeho obsahu. Není to chyba designu, kterou by se mělo opravit. Je to důležitá součást každé dobré webové stránky. Když lidi vidí nekomplikovaný design se spoustou místa kolem textu, jednodušeji si obsah přečtou a lépe jej zapamatují.
Věc je jasná: Stránky bez dostatečného místa vypadají zahlcené a neprofesionálně. Naopak, dobré využití prázdného místa vytváří důvěru a eleganci. Není to jen o vzhledu — je to o tom, aby se lidé na vašem webu cítili pohodlně.
Čtyři základní principy prázdného místa
Pojďme se podívat na to, jak vůbec používat prázdné místo efektivně. Není to věda, ale když si zapamatujete čtyři jednoduché principy, vaše návrhy budou okamžitě vypadat profesionálněji.
01. Vzdušnost textu
Odsazení řádků — zvané “line height” — by mělo být alespoň 1,5krát větší než velikost fontu. Pokud je váš text 16 pixelů, mělo by být meziprostor mezi řádky aspoň 24 pixelů. Lidi si pak text přečtou lépe, méně je unavuje.
02. Okraje a polštářování
Kolem obsahu musí být prostor. Pokud text začíná hned na kraji obrazovky, vypadá to tlačeně. Přidejte minimálně 32 pixelů prosoru ze všech stran. Na větších obrazovkách zvyšte až na 64 pixelů. Obsah pak vypadá nadýchaněji.
03. Seskupování obsahu
Obsahem, který spolu souvisí, byste měli dát méně místa. Naopak obsah, který spolu nesouvisí, oddělte větším prostorem. Tímto způsobem lidi automaticky pochopí, která část patří k sobě. Funguje to bez vysvětlování.
04. Délka řádků
Příliš dlouhé řádky jsou bolestivé. Váš hlavní text by neměl být širší než 70 znaků na jednom řádku. Pro weby to znamená maximálně 600–700 pixelů šířky. Kratší řádky lidi snáze čtou a neztratí se v textu.
Jak to aplikovat na svém webu
Teď víte principy, ale jak je opravdu použít? Tady je postup, který funguje. Začněte s CSS — nastavte si základní hodnoty pro všechny prvky a pak pracujte s konkrétními sekcemi.
Nejjednoduší způsob je pracovat s jednotkami relativní k velikosti fontu. Pokud váš text je 16 pixelů, pak 1rem (relative em) se rovná 16 pixelům. Pro vertikální prostor mezi prvky používejte hodnoty jako 1.5rem (24 pixelů) nebo 2rem (32 pixelů). Tímhle způsobem se vám design automaticky přizpůsobí, když změníte velikost základního fontu.
Zkuste si svůj web zobrazit na různých zařízeních — počítač, tablet, mobil. Na mobilu bude prázdné místo působit ještě důležitěji, protože obrazovka je menší. Nastavte si breakpoints a zvyšte prostor na menších obrazovkách, aby obsah zůstal čitelný.
Příklady z praxe
Podívejte se, jak to vypadá v reálných webech. Známé české weby používají prázdné místo velmi chytře.
Minimalistické e-shopy
Kvalitní e-shopy nechávají kolem produktů spoustu místa. Každý produkt je jasně vidět, není konkurence od sousedních produktů. Zákazník se lépe rozhoduje, když vidí produkt v “tichém” prostoru bez rušení.
Návštěvnické weby
Weby věnované cestování nebo restauracím používají velké fotografie s malým textem kolem nich. Fotografie je hvězda, text jen doplňuje. Tímhle stylem se stránka vypadá luxusně a lákavě. Nespěchá.
Blogy a články
Weby zaměřené na psaní články používají klasické sloupce o šířce kolem 600 pixelů, s velkým prostorem kolem. Čtenář se může plně soustředit na obsah. Není tu reklam, postranních panelů nebo rozptylujících prvků.
Kontrolní seznam pro váš web
Chcete si svůj web ověřit? Tady je snadný kontrolní seznam. Projděte si jej a podívejte se, které body máte splněné.
Mám odsazení řádků (line-height) aspoň 1,5 až 1,6?
Jsou okraje kolem obsahu aspoň 32 pixelů (na mobilu) a 64 pixelů (na počítači)?
Je text jednoho odstavce širší než 600–700 pixelů?
Jsou související prvky blízko sebe, a nespojité prvky dál od sebe?
Když se podívám na web na mobilu, je text stále čitelný bez přetékání?
Nejsou obrázky sevřené textem — mají kolem sebe vzduch?
Shrnutí — prázdné místo není prázdné
Dobré využití prázdného místa není o ničem. Je to o všem. Je to o čitelnosti, důvěře a profesionálnosti. Když se naučíte pracovat s prostorem okolo svého obsahu, automaticky se vám web zlepší. Nebude vypadat jako by byl hotový za jeden den — bude vypadat jako by jej navrhoval někdo, kdo ví, co dělá.
Vezměte si tyto principy a aplikujte je. Nemusíte je všechny implementovat najednou. Začněte s odsazením řádků a okraji kolem obsahu. Pak se poučte o délce řádků a seskupování. Postupně budete vidět, jak se vám web zlepšuje. A co je nejlepší — vaši návštěvníci to budou cítit, i když nebudou vědět proč.
Poznámka
Tento článek je edukačním materiálem určeným k seznámení se základními principy prázdného místa v designu webových stránek. Každý web je unikátní a optimální hodnoty se mohou lišit podle obsahu, cílové skupiny a konkrétního účelu. Při návrhu svého webu vždy zohledňujte vaši konkrétní situaci a testujte na skutečných uživatelích.
Související články
