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ánekVí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.
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ě.
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.
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.
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.
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í.
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.
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ý.
Podívejte se, jak to vypadá v reálných webech. Známé české weby používají prázdné místo velmi chytře.
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í.
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á.
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ů.
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?
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č.
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.