V minulosti se „záhlavím“ ve webovém designu obvykle označoval všudypřítomný pruh v horní části webových stránek, který obsahoval logo, navigační panel a možná i kontaktní údaje a vyhledávací panel. V dnešní době se „hlavičkou“ častěji označuje celý prostor nad záhybem na domovské stránce.
Pokud někdo váš web nenašel prostřednictvím příspěvku na blogu sdíleného na sociálních sítích nebo na základě doporučení na jiném webu, je velká pravděpodobnost, že na něj vstoupí přes domovskou stránku. A první, co uvidí, bude ta hlavní nemovitost nahoře, vyloženě obnažená.
Již dříve jsem psal o tom, že návštěvníci lépe reagují na předvídatelné umístění některých prvků na webu (například loga a CTA). Když navrhnete web s cílem splnit jejich očekávání a zvýšit jejich pohodlí tím, že učiníte zážitek poněkud předvídatelnějším, můžete účinně zlepšit míru prokliků a konverzí.
Teď se zamyslete nad tím prostorem v záhlaví na domovské stránce.
Většina lidí si zvykla spoléhat na to, že jim domovské stránky poskytnou pohled z ptačí perspektivy na to, o čem společnost nebo webové stránky jsou, což znamená, že si nemůžete dovolit promarnit tuto příležitost splnit toto očekávání. Design záhlaví domovské stránky může být samozřejmě jedinečný pro vaši značku, ale prvky, které se v něm nacházejí, by to opravdu být neměly. Návštěvníci očekávají, že rolování nebude nutné k tomu, aby zjistili, co pro ně stránka udělá. V podstatě by vaše záhlaví mělo být desetivteřinovým příběhem, který návštěvníkům dokáže, jakou hodnotu pro ně web bude mít.
Co tedy s tímto prostorem uděláte, abyste návštěvníky zaujali?
Povíme si o některých trendech v designu záhlaví v roce 2017, o tom, co můžete udělat, abyste tuto dobře viditelnou nemovitost využili, a podíváme se na některé zajímavé příklady záhlaví po cestě.
14 trendů v designu záhlaví webů v roce 2017
Není to tak, že by vaši návštěvníci nevěděli o tom, že mohou procházet stránku nebo proklikávat navigaci, aby se dozvěděli více o značce, která za webem stojí. Ale proč by to měli dělat? V záhlaví je dost místa na to, abyste jim poskytli stručné sdělení, které jim řekne vše, co potřebují vědět. A pokud vám padesát nebo méně slov nestačí, obrázek nebo design na pozadí vám sdělí zbytek příběhu.
Především záhlaví domovské stránky může vytvořit nebo zničit první dojem návštěvníků, a proto je tak důležité, abyste tuto část zvládli.
Pokud se snažíte najít způsob, jak svůj web razantně odstartovat, možná najdete inspiraci v následujících trendech designu záhlaví roku 2017:
Předimenzovaný obrázek hrdiny
Díky modulárnímu stylu navrhování webů, aby byly responzivní, je nyní většina návrhů rozdělena do samostatných bloků a sekcí. Tento styl designu se náhodou dobře hodí k těmto hrdinským obrázkům přes celou šířku, které vyplňují mnoho webových stránek.
Příklad webové stránky Cleverbird Creative. Využívá jediný a výrazný obrázek překrytý jednoduchým textem, který vítá návštěvníky. Není chybou, o co jim jde: zjednodušená krása.
Posuvné obrázky
Myslím, že byly doby, ne příliš dávné, kdy mnozí z nás zpochybňovali posuvník jako životaschopný designový prvek. Mnoho designérů však odvedlo skvělou práci při jeho využití v záhlaví. Existují posuvníky, které se automaticky posouvají od jednoho krásného obrázku s vysokým rozlišením k dalšímu, a existují i takové, jako je ten Pierrův, které návštěvníky prosí, aby tento zážitek sami ovládli.
Transformační paralaxní obrázky
Paralaxní posouvání je stále na vzestupu a záhlaví se ukázalo jako ideální místo pro použití tohoto druhu vizuální „iluze“ v designu webových stránek. Nejčastěji se však v poslední době setkáte s tím, že designéři dávají paralaxnímu posouvání transformační ráz, pravděpodobně proto, aby návštěvníky překvapili nečekaným výsledkem posouvání. Přesně to se podařilo australské agentuře August, která se zabývá designem UX.
Video pozadí
Video pozadí je dalším z trendů poslední doby, který opravdu nejlépe funguje, když se použije na záhlaví domovské stránky. Tohle od Le 28 skvěle navozuje atmosféru webových stránek restaurace a ukazuje videa z přední a zadní části stravovacího zařízení.
Skrytá navigace
Ačkoli by se dalo namítnout, že hamburgerové menu patří na webové stránky prohlížené na mobilních zařízeních (jak bylo původně zamýšleno), je třeba říct, co takový navigační minimalismus dělá se záhlavím. Web +rehabstudio je toho pěkným příkladem. Tím, že je navigace schovaná, je vaše pozornost okamžitě upřena na vzrušující vizuální prvky uvnitř symbolu plus… a pak si uvědomíte, že kolem něj jsou malé animace.
Maskot značky
Jestliže je záhlaví místem, kde se návštěvníci seznámí s vaším webem, jak lépe ho zahájit než představením „postaviček“, se kterými se cestou setkají? Pokud váš web používá maskoty značky – jako web WPMU DEV – je to ten správný čas a místo, kde se s nimi pochlubit.
Přitažlivá typografie
Pro vylepšení typografie vašeho webu lze udělat mnoho. Přitom někdy nejde o to, vybrat to nejfantastičtější kurzivní písmo, které lidem vmetete do tváře. Když se podíváte na výše uvedený příklad služby Slack, uvidíte, že jde především o velikost písma. Na typografii, kterou zvolili, není nic zvláštního, ale je tak čistá a jasná. To ve spojení s velikostí hlavního sdělení je to, co ho dělá tak poutavým.
Obsah především
Pro webové stránky, které se primárně zaměřují na poskytování hromady obsahu návštěvníkům (vzpomeňte si na jakýkoli velký zpravodajský web nebo blog), bude mít strategie obsah především pro hlavičku největší smysl. Zde opravdu nemá smysl slovíčkařit. Lidé přišli na váš web, aby si přečetli obsah, nepotřebují se zdržovat dalším čtením na úvodní stránce, takže můžete přejít rovnou k němu, jako to dělá Glamour.
Produkty na prvním místě
Ve stejném duchu se weby elektronických obchodů nemusí obtěžovat s využitím záhlaví, aby napsaly chytlavý titulek nebo poskytly vysvětlující video o společnosti. Návštěvníci vědí, kvůli čemu na web přišli, takže můžete rovnou přejít k věci. Na rozdíl od poskytovatelů obsahu však mohou prodejci produktů využít tuto hlavní nemovitost k tomu, aby se pochlubili svými nejprodávanějšími produkty nebo nejnovějšími novinkami a nalákali tak návštěvníky dál, jako to dělá společnost Apple.
CTA Front-and-Center
Může přijít chvíle, kdy váš web bude mít něco opravdu speciálního, co chcete návštěvníkům předvést, něco, co chcete, aby si stáhli nebo koupili. Nyní, i když to nemusí být hlavní atrakcí vašeho webu, můžete použít záhlaví buď dočasně, nebo trvale ke zvýraznění této speciální výzvy k akci, jako to dělá blogerka Everywhereist se svou knihou.
Živé barvy a textury
Možná jedna z nejhezčích věcí, které přinesl Material Design Google, je ochota používat ve webovém designu více živých barev, vrstev a gradientů. Už se nemusí omezovat jen na tlačítka výzvy k akci, ale lze je použít pro celé bloky na webu, jako to dělá společnost Stripe se svou barevnou a texturovanou hlavičkou.
Animace
Není vůbec nic špatného na statickém designu hlavičky domovské stránky, zejména pokud chcete, aby pozornost byla upoutána na CTA nebo video. Zachovejte jednoduchost, aby návštěvníky nic nerozptylovalo a nebránilo jim provést akci, kterou jste zamýšleli. Ale pro webové stránky, které chtějí zajímavým způsobem sdílet své sdělení se čtenáři, mohou být animace moudrou volbou. Baianat používá malou animaci ke sdílení několika sdělení na stejném prostoru, díky čemuž nepůsobí nepřehledně nebo přeplněně informacemi.
Geometrické návrhy
Geometrický webový design je teď náhodou opravdu velký, protože se dobře hodí pro logické a čisté linie potřebné pro responzivní design. Není tedy divu, že se stále častěji setkáváme s tím, že webové stránky, jako je ta pro rozhraní Perspective API, integrují geometrické prvky do designu záhlaví. Existují i další, jako například Stripe a WPMU DEV, které používají diagonální linie, aby pro návštěvníky vytvořily jedinečnou a nečekanou vizuální krajinu.
Experimentální
Nakonec se dostáváme k experimentálním návrhům záhlaví. Klíčem k nim obvykle není to, aby hlavička byla obskurně zvláštní a neobvyklá. To by bylo pro návštěvníky příliš rušivé. Místo toho byste se měli zaměřit na vytvoření nějakého nečekaného efektu způsobeného prostým pohybem po záhlaví.
Příklad design Teamgeek. Můžete si všimnout, že na logu a zprávě ve středu stránky je něco „mimo“, ale teprve když se do ní zapojíte, uvědomíte si, že je v ní zabudován zvláštní zvrat.
Závěr
Jak vidíte, existuje celá řada způsobů, jak můžete navrhnout záhlaví pro web WordPress. Pokud se však pozorně podíváte na výše uvedené příklady, všimnete si, že designéři velmi strategicky zvažovali, jaký styl záhlaví použijí a které prvky do něj zahrnou. Až přijde čas navrhnout záhlaví pro váš příští projekt webových stránek, zvažte, zda budete potřebovat následující:
- Logo
- Tradiční vs. skryté
- Herní část záhlaví vs. přejít rovnou k obsahu
- Tagline nebo poslání
- Kontaktní informace
- Odkazy na sociální sítě
- Vyhledávací panel
- Vícejazyčný přepínač
- Nákupní košík
- Maskot značky
- Fotografie vs. Skutečná fotografie firmy, lidí nebo produktu
- Statický obrázek vs. posuvné obrázky vs. video na pozadí
- Vložené propagační video
- Tlačítko Call-to-action
- Kontaktní formulář
- Hello bar
Můžete najít i další položky, které patří do této horní části záhlaví domovské stránky. Ve skutečnosti jde jen o to, co má pro váš web největší smysl. Jinými slovy, které prvky budou vyprávět příběh vaší značky, vzdělají a zaujmou vaše publikum hned na začátku a vzbudí dostatečnou důvěru, aby je poháněly vpřed skrze váš web?
Štítky:
- design
- hlavní stránky