15+ Beautiful Website Headers and Why They Work So Well

Care este primul lucru pe care un utilizator îl vede pe site-ul dumneavoastră?

Exact, antetul.

Dacă acesta nu este suficient de atrăgător, dacă nu aduce claritate, utilizatorii dvs. ar putea să plece și poate să nu se mai întoarcă niciodată.

Nu vrem asta, nu-i așa?

Capitolele site-ului web sunt o parte centrală a proiectării unui site web. Ele joacă un rol cheie în captarea atenției utilizatorilor și în stabilirea unei conexiuni cu vizitatorii site-ului.

De aceea, în rândurile următoare, vom aborda câteva principii de design de antet pe care ar trebui să le cunoașteți atunci când proiectați un antet de site web.

Principii de design al antetului de urmat

Studiile de cercetare au constatat că ochii utilizatorilor se deplasează pe o pagină web urmând unul dintre cele 3 modele:

• Modelul Gutenberg

Sursa imaginii: https://vanseodesign.comThe Modelul Gutenberg poate fi aplicat la conținutul cu mult text. Acesta sugerează că ochii cititorilor se plimbă de-a lungul și de-a latul paginii într-o serie de mișcări orizontale.

Exemplu:

• Tabloul în formă de Z

Patronul în formă de Z definește traseul pe care îl urmează ochii utilizatorilor atunci când scanează o pagină, un traseu care ia forma literei Z. Este recomandat pentru proiectarea paginilor de aterizare, pe care cititorii le scanează rapid.

Exemplu:

• Patronul în formă de F

Acest tipar descrie stilul cel mai frecvent utilizat de citire a blocurilor de conținut în mediul online. Utilizatorii scanează rapid o pagină web, iar ochii lor urmează un model F.

Exemplu:

Fără a intra în mai multe detalii despre aceste modele, am dori să întărim faptul că pentru oricare dintre aceste modele, linia orizontală superioară este locul unde vizitatorii încep să scaneze o pagină.

Ce să integrezi în antetul unui site web?

Aceste modele arată de ce un designer web trebuie să decidă cu atenție ce ar trebui să vadă mai întâi utilizatorii. Antetul ar trebui să servească drept un cârlig care să le atragă atenția și să-i invite să exploreze restul paginii.

Nu există nicio șansă de a face o a doua impresie. Așadar, ar trebui să vă gândiți de două ori la ce să includeți în antet:

• Imagine eroină puternică

O imagine eroină este o imagine banner foarte mare care este afișată deasupra pliului pe o pagină web. Este inclusă în secțiunea header și este primul lucru pe care utilizatorii îl văd atunci când ajung pe un site web. Imaginile erou au, de asemenea, scopul de a atrage atenția vizitatorilor asupra punctului unic de vânzare (USP) al afacerii. O practică optimistă afirmă că utilizarea unor chipuri de persoane reale în imaginile eroilor poate ajuta vizitatorii să se raporteze mai bine la marcă. Comunicarea devine mai umană și mai personală.

Sursa: Drift.com

• Punctul unic de vânzare (USP)

PSU este o frază care explică motivul pentru care o afacere există. Ar trebui să dezvăluie ce face afacerea, de ce și pentru cine. De asemenea, ar trebui să sublinieze caracteristicile și beneficiile unice, care fac ca marca să iasă în evidență printre concurenții săi. Un USP puternic este vital în transmiterea mesajului corect către vizitatorii site-ului web și, în cele din urmă, în transformarea acestora în clienți.

Sursa: miro.com

• Nume de marcă

Numele de marcă îi obișnuiește pe oameni cu identitatea site-ului sau întărește imaginea pe care oamenii o au despre identitatea afacerii dvs.

Imaginea ar trebui să reflecte personalitatea mărcii dvs. și să se asigure că vocea mărcii dvs. este consecventă pe întregul site web. Ar trebui să fie ușor de recunoscut chiar dacă este decupată din antetul site-ului web. Iar atunci când este plasată în antetul site-ului web, ar trebui să joace un rol cheie în stabilirea unei conexiuni personale cu fiecare utilizator.

Sursa: carolinaherrera.com

• Product video

Pentru că este nevoie de doar 50 de milisecunde pentru ca utilizatorii să își formeze o opinie despre un site web, înseamnă că ar trebui să aveți cele mai importante mesaje în antet. Acesta este motivul pentru care multe întreprinderi nu așteaptă ca utilizatorii lor să deruleze în jos și să ajungă la caracteristicile produsului/serviciului lor, ci folosesc puterea videoclipului pentru a transmite mai bine mesajul lor. De asemenea, să nu uităm că 78% dintre oameni urmăresc videoclipuri online în fiecare săptămână, iar 55% vizualizează videoclipuri online în fiecare zi.

Sursa: wistia.com

• Call to action (CTA)

Un CTA este un mesaj (de obicei pe un buton), care declanșează un anumit răspuns din partea vizitatorilor site-ului. Apelul la acțiune trebuie să fie clar definit și ușor de înțeles de către vizitatorii site-ului web. În mod firesc, un CTA plasat în antet, chiar acolo unde vizitatorii își încep călătoria pe site-ul web, crește șansele de a obține acțiunea dorită din partea utilizatorilor respectivi.

Sursa: creatopy.com

• Prezentarea produsului

În cazul în care conduceți un magazin de comerț electronic, veți dori să subliniați calitatea și comoditatea unui anumit produs, iar cel mai bun mod de a face acest lucru este să includeți acel produs în antet. Atenția utilizatorilor va fi îndreptată spre acea cea mai bună ofertă, iar aceștia vor fi predispuși să pășească în procesul de cumpărare.

Sursa: amazon.com

În oricare dintre cazurile de mai sus, regula generală de bază este: păstrați-l simplu, păstrați-l clar, faceți ca header-ul să fie atractiv! Cercetările arată că „diferența medie în modul în care utilizatorii tratează informațiile de deasupra față de cele de dedesubt este de 84%”. Așadar, cel mai bine este să vă concentrați eforturile pe reducerea cât mai mult posibil a acestor cifre. Și o veți face cel mai bine dacă v-ați stabilit niște obiective cu privire la ceea ce doriți să transmiteți.

Site-urile mari, cum ar fi www.youtube.com, limitează spațiul dedicat antetului la o cantitate mică. Acest lucru este făcut intenționat, deoarece intenția este de a lăsa atenția utilizatorilor să fie direcționată către ceva mai important, cum ar fi produse, sau servicii, sau videoclipuri (de exemplu, YouTube).

Câteodată nici măcar nu ai nevoie de un antet, sau dacă ai nevoie, ai nevoie doar de unul mic.

Tot depinde de particularitățile site-ului. Gândește-te bine și oferă-i website-ului tău personalitatea de care are nevoie, indiferent de ceea ce îți „spun” din când în când tendințele în materie de web design.

Ce inspiră header-ul website-ului tău?

În afară de a transmite anumite mesaje, te poți gândi să le insufli cititorilor și anumite emoții. În funcție de scopul pe care îl dați antetului, acesta poate inspira cititorilor una dintre următoarele:

• Curiozitate

Pentru anumite site-uri, ar fi indicat să setați un antet care să inspire curiozitatea cititorilor. Aceștia vor dori să afle mai multe, vor tânji după mai mult, se vor grăbi să exploreze restul poveștii.

Asta este ceea ce simt în legătură cu acest header de la Canva. Ei fac o promisiune uriașă chiar acolo: „Proiectați orice”. Și sunteți invitați să testați acest lucru. Poți rezista?

• Acțiune

În unele cazuri, este mai bine să stârnești acțiunea direct din antet. Cu un call-to-action, puteți invita utilizatorii să facă clic pe un buton sau să efectueze o altă interacțiune cu site-ul web, chiar de la început. În cazul Planable, USP-ul lor este direct legat de CTA-ul de mai jos. de asemenea, dacă nu sunteți chiar gata să cumpărați, există și o opțiune pentru a programa o demonstrație.

• Încredere

Ar putea fi util să începeți prin a inspira încredere vizitatorilor dvs. Doriți ca aceștia să întreprindă o acțiune mai târziu, iar pentru a face acest lucru, ei trebuie să se simtă pe deplin încrezători că iau decizia corectă.

Să vedem cum o face Salesforce. Ei afirmă că sunt cel mai mare CRM din lume. Bine, ați putea spune că 99% dintre companiile de acolo nu sunt primele în domeniul lor. Și ați avea dreptate. Dar, dacă citiți mai jos, cu siguranță există ceva ce vă poate fi de folos. Există un studiu de caz care arată cât de eficient este produsul. Poți valorifica și tu un astfel de studiu de caz.

• Durere

De ce naiba ai vrea să inspiri durere cititorilor, mai ales din antet? Ei bine, multe companii își au marketingul bazat pe principiul FUD (Fear, Uncertainty, Doubt). Într-un stadiu incipient al procesului de conversie, frica/durerea va declanșa decizia de a aplica imediat o soluție și va face ca acea durere să se estompeze.

Aceasta poate fi o abordare pentru serviciile de securitate cibernetică, servicii de securitate fizică, dar și în domeniul sănătății sau al fondurilor de pensii.

O astfel de abordare poate fi valorificată în campaniile care vor să îi facă pe oameni să conștientizeze că trebuie să se vaccineze împotriva COVID, sau să poarte centura de siguranță.

• Laughter

Poate că doriți să vă conectați emoțional cu vizitatorii, încă de la început. Și nu există o modalitate mai bună de a face acest lucru decât să-i faci să râdă. Și să râdă tare. Se formează un sentiment de complicitate și îi veți face pe utilizatori să vă fie alături, în timp ce explorează site-ul.

• Familiaritate

Conectarea situației utilizatorilor cu o situație similară prezentată în antet poate crea un anumit grad de familiaritate.

Tipuri de anteturi pentru diferite tipuri de site-uri web

În funcție de specificul site-ului, un antet se va potrivi mai bine cu designul general decât altul. În consecință, ar trebui să aveți o idee clară despre ce tip de antet se va potrivi cel mai bine propriului dvs. site web (fie că este vorba de eCommerce, blog, portofoliu, ziar online etc.).

• Abaterie axată pe CTA

În cazul Blue Apron, antetul site-ului web folosește un video mare, în loc de o imagine eroină mare. Acesta transmite un sentiment de confort, familiaritate, poftă de mâncare.

În continuare, avem un CTA care invită utilizatorul să acționeze pentru a beneficia de aceeași experiență confortabilă și gustoasă.

Site-ul CrazyEgg vine cu un header care invită utilizatorii să ia produsul lor pentru o demonstrație live. Produsul lor se potrivește perfect pentru astfel de demonstrații în timp real. Și dovedește instantaneu beneficiile produsului. Ei folosesc, de asemenea, un indiciu vizual, care indică spre CTA: mâna omului din balon îndreaptă privirea spre buton.

• Editor axat pe brand

Acesta este un exemplu frumos de site web cu un antet axat pe identitatea brandului și elementele de branding. Acesta include logo-ul, o replică a culorilor logo-ului de marcă în partea superioară, precum și sloganul lor.

• Content-focused header

Este foarte potrivit pentru bloguri, și reviste, care promovează articole și povești.

Dar, am găsit și câteva excepții.

Patagonia nu își promovează magazinul pe pagina principală, dar, promovează povești care arată angajamentul lor de a face o schimbare în lume. Această poveste actuală, prezentată în antetul site-ului, este despre sclavie și activism.

În cazul Ikea, partea stângă a ecranului îi îndeamnă pe vizitatori la unul dintre magazinele online, în timp ce cealaltă jumătate îi îndeamnă pe utilizatori să citească povestea Ikea.

• În antet centrat pe fundal video

BUKWILD a integrat 3 videoclipuri diferite în antetul site-ului. Fiecare dintre videoclipuri poate fi redat prin plasarea mouse-ului pe secțiunea corespunzătoare. Ceea ce este interesant la acest lucru este modul creativ în care folosesc videoclipurile ca părți ale unei „imagini” mai mari, una care le reprezintă brandul.

• Un antet axat pe produs

În cazul Cropp, un magazin online de modă, cele mai recente colecții sunt prezentate în antet.

Threadless.com pune wall-art-ul într-un context și prezintă un Squad CMYK. Antetul include și un CTA clar, pentru toți cei care simt că aparțin într-un fel acelui scenariu prezentat în header de către „squad”.

• Un header axat pe branding personal

În cazul blogului de călătorii Alex in Wanderland, în header-ul site-ului, pe lângă o fotografie a lui Alex, utilizatorii pot vedea în acest header începutul unei povești: „Five years and counting on the road…”. Aceasta este o invitație pentru cititori să dorească să exploreze mai multe povești.

În concluzie…

Capitolele contribuie foarte mult la succesul sau eșecul unui site web. Din punct de vedere tehnic, această parte superioară este, în mod natural, primul lucru de pe site-ul web cu care interacționează oamenii.

.