În trecut, un „antet” în designul web se referea de obicei la banda mereu prezentă în partea de sus a site-urilor web care conținea logo-ul, bara de navigare și poate unele detalii de contact și bara de căutare. În zilele noastre, un „antet” se referă mai des la întregul spațiu de deasupra pliului de pe pagina principală.
Dacă nu cumva cineva a găsit site-ul dvs. printr-o postare de blog partajată pe rețelele de socializare sau dintr-o recomandare de pe un alt site, sunt șanse mari ca acesta să intre pe el prin pagina principală. Și primul lucru pe care îl vor vedea este acel spațiu imobiliar de primă mână din partea de sus, expus la vedere.
Am mai scris înainte despre modul în care vizitatorii răspund mai bine la plasarea previzibilă a anumitor elemente pe site-ul dvs. web (cum ar fi logo-ul și CTA). Prin proiectarea unui site web cu scopul de a le satisface așteptările și de a le spori confortul, făcând experiența oarecum mai previzibilă, puteți îmbunătăți în mod eficient ratele de clic și de conversie.
Gândiți-vă acum la acel spațiu de antet de pe pagina principală.
Majoritatea oamenilor au ajuns să se bazeze pe paginile de start pentru a le oferi o imagine de ansamblu a ceea ce reprezintă o companie sau un site web, ceea ce înseamnă că nu vă puteți permite să irosiți această oportunitate de a vă îndeplini această așteptare. Desigur, designul antetului paginii dvs. de pornire poate fi unic pentru brandul dvs., dar elementele care se găsesc în cadrul acestuia chiar nu ar trebui să fie. Vizitatorii se așteaptă ca defilarea să nu fie necesară pentru a afla ce va face un site pentru ei. În esență, antetul dvs. ar trebui să fie o poveste de 10 secunde care să le dovedească vizitatorilor dvs. ce valoare va avea site-ul pentru ei.
Atunci, ce veți face cu acest spațiu pentru a captiva interesul vizitatorilor dvs.?
Să vorbim despre unele dintre tendințele în materie de design de antet în 2017, despre ce puteți face pentru a utiliza acest spațiu imobiliar foarte vizibil și să aruncăm o privire la câteva exemple interesante de anteturi pe parcurs.
14 tendințe în designul web de antet în 2017
Nu este ca și cum vizitatorii dvs. nu sunt conștienți de capacitatea lor de a derula în josul unei pagini sau de a face clic pe o navigare pentru a afla mai multe despre marca din spatele unui site. Dar de ce ar trebui să facă asta? Există suficient spațiu în antet pentru a oferi un mesaj succint care să le spună tot ce trebuie să știe. Și dacă 50 de cuvinte sau mai puțin nu sunt suficiente, imaginea de fundal sau designul va comunica restul poveștii.
Peste toate, antetul paginii de start poate face sau distruge prima impresie a vizitatorilor dumneavoastră, motiv pentru care este atât de important să reușiți să faceți bine această secțiune.
Dacă vă străduiți să găsiți o modalitate de a da startul site-ului dvs. cu bubuitură, poate veți găsi inspirație în următoarele tendințe de design de antet din 2017:
Oversized Hero Image
Datorită stilului modular de proiectare a site-urilor pentru a fi responsive, majoritatea modelelor sunt acum împărțite în blocuri și secțiuni distincte. Se întâmplă ca acest stil de design să se preteze foarte bine la aceste imagini erou pe toată lățimea care populează atât de multe site-uri web.
După cum ar fi site-ul Cleverbird Creative, de exemplu. Acesta se folosește de o imagine singulară și izbitoare suprapusă cu un text simplu pentru a întâmpina vizitatorii. Nu există nicio greșeală în ceea ce urmăresc aici: frumusețe simplificată.
Imagini glisante
Cred că a existat o vreme, nu foarte îndepărtată în trecut, când mulți dintre noi puneau sub semnul întrebării glisantele ca fiind un element de design viabil. Cu toate acestea, mulți designeri au făcut o treabă excelentă folosindu-l în anteturi. Există imagini glisante care se derulează automat de la o imagine frumoasă de înaltă rezoluție la alta și există cele precum cea a lui Pierre, care îi roagă pe vizitatori să preia singuri controlul acestei experiențe.
Imagini Parallax transformative
Desfășurarea Parallax este încă în creștere puternică, iar antetul s-a dovedit a fi locul perfect pentru a aplica acest tip de „iluzie” vizuală la proiectele web. Cu toate acestea, ceea ce veți vedea cel mai recent sunt designerii care oferă defilării parallax o margine de transformare, probabil pentru a surprinde vizitatorii cu rezultatul neașteptat al defilării. Agenția australiană de design UX August a făcut exact acest lucru cu antetul lor.
Fonduri video
Fondul video este o altă tendință recentă care funcționează cu adevărat cel mai bine atunci când este aplicată la antetul paginii de start. Acesta de la Le 28 face o treabă grozavă de a stabili atmosfera pentru site-ul web al restaurantului, prezentând videoclipuri din fața și din spatele localului de luat masa.
Hidden Navigation
Deși s-ar putea argumenta că meniul hamburger aparține site-urilor web vizualizate pe dispozitive mobile (așa cum s-a intenționat inițial), este ceva de spus despre ceea ce acest tip de minimalism navigațional face pentru antet. Site-ul +rehabstudio este un exemplu frumos în acest sens. Prin ascunderea navigației, atenția ta imediată este atrasă de elementele vizuale interesante din interiorul simbolului plus… și apoi îți dai seama că există mici atingeri de animație în jurul acestuia.
Mascota mărcii
Dacă antetul este locul de introducere a vizitatorilor pe site-ul dumneavoastră, ce mod mai bun de a da startul decât să le prezentați „personajele” pe care le vor întâlni pe parcurs? Dacă site-ul dvs. folosește mascote de marcă – așa cum face site-ul WPMU DEV – acesta este momentul și locul potrivit pentru a le prezenta.
Tipografie care atrage privirile
Există multe lucruri care pot fi făcute pentru a da un lifting tipografiei site-ului dvs. Acestea fiind spuse, uneori nu este vorba de a alege cel mai fantezist font cursiv pe care să-l arunci în fața oamenilor. Dacă vă uitați la exemplul Slack de mai sus, veți vedea că totul ține de dimensiunea fontului. Nu este nimic cu adevărat special în ceea ce privește tipografia pe care au ales-o, dar este atât de curată și clară. Acest lucru, împreună cu dimensiunea mesajului principal, este ceea ce îl face atât de atrăgător.
Content First
Pentru site-urile web care se concentrează în primul rând pe furnizarea de grămezi de conținut pentru vizitatori (gândiți-vă la orice site de știri sau blog important), o strategie content first pentru antet va avea cel mai mult sens. Chiar nu are rost să ne îndulcim cuvintele aici. Oamenii au venit pe site-ul dvs. pentru a vă citi conținutul, nu au nevoie să fie împotmoliți de lecturi suplimentare pe pagina principală, așa că puteți trece direct la subiect, așa cum face Glamour.
Produsele mai întâi
În aceeași ordine de idei, site-urile de comerț electronic nu trebuie să se deranjeze să folosească antetul pentru a scrie un titlu captivant sau să ofere un video explicativ despre companie. Vizitatorii știu pentru ce au venit pe site, așa că puteți intra direct în subiect. Spre deosebire de furnizorii de conținut, totuși, comercianții cu amănuntul de produse pot folosi acest spațiu imobiliar de primă mână pentru a-și prezenta produsele cele mai bine vândute sau cele mai noi lansări pentru a atrage vizitatorii înainte, așa cum face Apple.
CTA Front-and-Center
Poate veni un moment în care site-ul dvs. are ceva cu adevărat special de prezentat vizitatorilor, ceva ce doriți ca aceștia să descarce sau să cumpere. Acum, chiar dacă s-ar putea ca acel lucru să nu fie atracția principală a site-ului dumneavoastră, puteți folosi antetul, fie temporar, fie permanent, pentru a evidenția acest call-to-action special, așa cum face bloggerița Everywhereist cu cartea sa.
Culoare și texturi vibrante
Poate că unul dintre cele mai frumoase lucruri care au ieșit de la Google Material Design este dorința noastră de a folosi mai multe culori vibrante, straturi și gradiente în designul web. Acestea nu mai trebuie să fie relegate la butoanele call-to-action, ci pot fi folosite pentru blocuri întregi de pe site-ul web, așa cum face Stripe cu antetul lor colorat și texturat.
Animare
Nu este absolut nimic greșit în a avea un design static al antetului paginii de start, mai ales dacă doriți ca accentul să fie pus pe un CTA sau pe un videoclip. Păstrați-l simplu, astfel încât să nu existe nicio distragere a atenției care să-i împiedice pe vizitatori să întreprindă acțiunea pe care ați dorit să o facă. Dar pentru site-urile care doresc o modalitate interesantă de a-și împărtăși mesajul cu cititorii, animațiile ar putea fi o alegere înțeleaptă. Baianat folosește o mică animație pentru a împărtăși mai multe mesaje în același spațiu, ceea ce face ca acesta să nu pară aglomerat sau supraaglomerat cu informații.
Designuri geometrice
Designul web geometric se întâmplă să fie foarte mare în acest moment, deoarece se pretează bine la liniile logice și curate necesare pentru designul responsiv. Așa că nu este o surpriză faptul că vedem tot mai multe site-uri web, precum cel pentru Perspective API, care integrează elemente geometrice în designul antetului. Există și altele, cum ar fi Stripe și WPMU DEV, care folosesc linii diagonale pentru a crea un peisaj vizual unic și neașteptat pentru vizitatori.
Experimental
În cele din urmă, ajungem la designurile de antet experimentale. Cheia pentru acestea nu este, de obicei, ca antetul să fie ciudat și neobișnuit. Acest lucru ar fi prea deranjant pentru vizitatori. În schimb, accentul ar trebui să fie pus pe crearea unui efect neașteptat cauzat de simpla mișcare peste antet.
Tomăm, de exemplu, designul Teamgeek. Puteți vedea că există ceva „ciudat” în legătură cu logo-ul și mesajul din centrul paginii, dar abia când vă implicați în el vă dați seama că există o întorsătură specială încorporată.
Încheiere
Cum puteți vedea, există o varietate de moduri în care puteți proiecta un antet pentru un site WordPress. Totuși, dacă vă uitați cu atenție la exemplele de mai sus, veți observa că designerii au fost foarte strategici în ceea ce privește stilul de antet pe care l-au folosit și ce elemente au fost incluse în acesta. Când vine timpul să concepeți un antet pentru următorul proiect de site web, luați în considerare dacă veți avea nevoie de următoarele:
- Logo
- Tradițional vs. ascuns
- Secțiune de antet erou vs. secțiune de antet ascunsă
- Secțiune de antet erou vs. secțiune de antet ascunsă trecând direct la conținut
- Tagline sau declarație de misiune
- Informații de contact
- Legături către rețelele sociale
- Bara de căutare
- Bucătărie multilingvă
- Carc de cumpărături
- Mascotă de marcă
- Fotografie de stoc vs. fotografie de arhivă. fotografie reală a companiei, a oamenilor sau a produsului
- Imagine statică vs. imagini glisante vs. video de fundal
- Video promoțional încorporat
- Boton de apel la acțiune
- Formular de contact
- Bară de salut
Puteți găsi și alte elemente care își au locul în această secțiune de header de sus a paginii dvs. de start. Totul se rezumă la ceea ce are cel mai mult sens pentru site-ul dumneavoastră. Cu alte cuvinte, ce elemente vor spune povestea brandului dvs., vor educa și va implica publicul dvs. încă de la început și vor inspira suficientă încredere pentru a-l propulsa mai departe prin site-ul dvs.
Tags:
- design
- headers
.