.
În antetul joacă un rol cheie în designul unui site web și dă tonul pentru toate celelalte aspecte ale acestuia. Mai ales acum, în era minimalismului triumfător, când diverse bomboane pentru ochi sunt adesea expulzate fără milă, dar în mod corect. Uneori nu mai rămâne nimic altceva pentru ca ochiul să prindă, așa că rolul designului antetului unui site web a crescut semnificativ.
Designerii web depun mult efort pentru a proiecta această parte a unui site web cu creativitatea și productivitatea în minte. Potrivit Google, este nevoie de doar 50 ms pentru a forma o opinie despre un site web, iar unele opinii se dezvoltă în incredibila perioadă de 17 ms. Cunoașterea de către consumatori a unui brand începe de aici.
Pentru a afla cum să proiectezi un antet de site web care să funcționeze și ce elemente ar trebui să includă, citește mai departe, vor exista exemple.
„Viața este o primă impresie. Ai o singură șansă.
Fă-o veșnică.”
– J.R. Rim
Un antet de site web este secțiunea superioară a paginii web. Pe vremuri, oamenii înțelegeau anteturile ca fiind benzi înguste în părțile superioare ale site-urilor web care conțineau un logo, un apel la acțiune și informații de contact. Dar în designul modern, întregul spațiu de deasupra pliului de pe pagina de start este considerat un antet.
Fiind partea strategică a paginii pe care oamenii o văd în primele secunde de încărcare a unui site web, un antet acționează ca un fel de invitație. Ar trebui să ofere informații de bază despre un site, astfel încât utilizatorii să poată înțelege ce oferă în câteva secunde.
Cei mai mulți designeri realizează anteturi separate pentru diferite secțiuni ale site-ului. De exemplu, puteți face un antet mare pentru o pagină principală și să lăsați o bandă mică pentru alte pagini. Dar păstrați-o consecventă. Designul antetului de pe pagina interioară ar trebui să fie o versiune prescurtată a antetului de pe pagina principală. Aceasta este o bună practică de proiectare a unui site web.
- Ce include un antet de site web?
- Cele mai bune practici de proiectare a antetului de site web
- Dimensiunea antetului
- În antet fix (lipicios)
- Mesajul transmis de un antet
- Imagini relevante
- Video sau animație
- Un apel la acțiune bine conceput
- Cele mai bune fonturi pentru anteturile site-urilor web
- Design de antet simplu
- Navigație ascunsă (meniu hamburger)
- Designul antetului pentru mobil
- În concluzie
Ce include un antet de site web?
Sarcina antetului este de a oferi utilizatorilor răspunsuri la întrebările de bază: ce marcă este reprezentată, ce bunuri și servicii sunt oferite, cum se poate intra în contact cu angajații companiei, dacă există oferte în curs și așa mai departe.
Pe lângă aceasta, el reprezintă și calitatea și chiar identitatea unui site web. Dacă header-ul evocă un răspuns emoțional bun, iar privitorul simte că are ceva de valoare, atunci ați trecut testul inițial.
Principalele elemente ale antetului unui site web sunt de obicei:
- logo sau identificator de marcă
- call to action
- text sau titlu
- elemente de navigare
- cercetare.
Nu trebuie să le adăugați pe toate deodată. Este necesar să găsiți un echilibru între abundența de informații și dispunerea armonioasă a acestora. Folosiți doar datele de care aveți nevoie, supraîncărcarea unui antet nu s-ar dovedi benefică, oricât de importante ar părea toate legăturile.
Nici să lăsați antetul prea gol nu este o idee bună. Un utilizator care nu-și poate da seama de interfața dumneavoastră în câteva secunde va pleca cel mai probabil și nu se va mai întoarce. Un antet prost poate îndepărta vizitatorii către un alt site cu un conținut inferior.
În designul minimalist al anteturilor, sunt prezentate doar link-urile către secțiunile majore ale site-ului și logo-ul companiei. Această tehnică este deosebit de utilă mai ales atunci când se proiectează landing pages.
Cele mai bune practici de proiectare a antetului de site web
Nimic nu vă limitează creativitatea atunci când vine vorba de proiectarea secțiunii de antet. Antetul site-ului este o zonă deschisă pentru un câmp larg de decizii creative de design, care trebuie să fie memorabile, concise și utile.
Să trecem în revistă principalele puncte.
Dimensiunea antetului
Nu există un răspuns definitiv la întrebarea ce dimensiune trebuie să aibă imaginea antetului unui site web. Unele resurse încearcă să ofere seturi de cifre exacte, dar astăzi unul dintre cele mai dificile aspecte ale construirii unui site web este asigurarea eficienței fiecărei dimensiuni de ecran. Și chiar dacă două ecrane au aceeași dimensiune, rezoluția ar putea fi diferită, astfel încât utilizatorii nu vor vedea același lucru.
Așa că nu vă fixați pe conceptul exact de pixeli, mai bine urmați reguli simple de bun simț.
În antetul ar trebui să aibă o înălțime astfel încât să nu interfereze cu percepția conținutului. Pentru resursele informative, un antet mic ar fi o alegere excelentă, în timp ce pentru aterizări, antetul poate fi mai mare.
În cazul antetelor voluminoase, este mai bine să lăsați ceva spațiu sub pliu, astfel încât utilizatorul să întrevadă ce urmează în pagină și să înceapă să deruleze.
O persoană care se află pe un site nou și nefamiliar își începe întotdeauna călătoria vizuală din colțul din stânga sus al ecranului. Iar dacă nu găsesc acolo informațiile așteptate, atunci pagina va fi percepută automat ca fiind complicată și nestandardizată, necesitând prea mult efort pentru a fi înțeleasă.
Logo. Un alt studiu realizat de NN/g a descoperit că utilizatorii își vor aminti mult mai ușor acele mărci ale căror logo-uri sunt plasate în stânga în comparație cu plasarea în centru sau în partea dreaptă.
Dacă aveți un logo de formă rotundă, atunci este acceptabil să îl plasați în centrul ecranului, deși eficiența sa va fi totuși mai mică în comparație cu cele plasate în stânga.
Navigație. Fiți foarte atenți să nu aglomerați prea mult această secțiune a unui site web. Prea multe linkuri copleșesc vizitatorii. Uneori ar putea fi necesară o întreagă refacere a structurii unui site web pentru a elibera spațiu pentru cele mai importante categorii.
Faceți ca vizitatorii să înțeleagă cu ușurință unde se află și cum să găsească drumul mai departe. Folosiți efectele hover pentru a ghida utilizatorii în timp ce navighează.
Call to action. Implementați principiile ierarhiei vizuale pentru a evidenția în mod natural un CTA.
În antet fix (lipicios)
Barele de navigare persistente, sau cu alte cuvinte „anteturi lipicioase”, înseamnă că navigarea vă urmărește în jurul paginii în timp ce derulați. Acesta este acum un standard de design web.
Faceți ca antetul să fie fix dacă nu încalcă conceptul general de design. Este o idee bună atât pentru designul desktop, cât și pentru cel mobil:
- Site-urile de comerț electronic – coșul de cumpărături este întotdeauna în fața utilizatorului.
- Site-urile de servicii – numărul de telefon sau un CTA sunt afișate în mod constant.
Capitolele fixe îmbunătățesc experiența clientului, menținând utilizatorii orientați și oferindu-le mai mult control.
Mesajul transmis de un antet
Înainte de a proiecta un antet, luați în considerare stilul general al site-ului web și scopul său principal.
Dacă este vorba de un site promoțional destinat prezentării unui produs, designul antetului poate conține linkuri către secțiunile principale, combinate cu o imagine eroină mare pe primul ecran, deoarece scopul principal al unui astfel de site este de a prezenta eficient produsul. În cazul site-urilor de comerț electronic sau de afaceri, situația ar putea fi diferită. Un utilizator trebuie să navigheze ușor, să știe despre cele mai recente oferte, cum să contacteze rapid managerul și unde să vadă comenzile pe care le-a făcut deja, așa că, în acest caz, header-ul poate fi mai concis, lăsând loc altor categorii.
Există mai multe mesaje posibile pe care le poate transmite un antet:
- îndeamnă un consumator să facă ceva
- lucrează la consolidarea încrederii
- încurajează un vizitator să afle mai multe
- este amuzant, etc.
Alegerea depinde de scopul unui anumit site web.
Imagini relevante
Imaginea din antet trebuie să transmită direct informații despre afacere. De exemplu, dacă reprezintă serviciul de livrare de mâncare, atunci imaginea ar putea înfățișa un curier îngrijit cu mâncare atractivă din punct de vedere estetic. În general, vizitatorul, după ce a văzut site-ul dumneavoastră, ar trebui să dorească să cumpere ceva de la dumneavoastră.
Fotografii de înaltă calitate. Fotografia este un instrument puternic pentru designerii web. Ea poate spune o poveste, poate evoca emoții și îi poate motiva pe vizitatorii dvs. să deruleze mai departe. Pentru site-urile cu imagini puternic izbutite, încercați să faceți un antet transparent. Acesta afișează mai bine imaginile, păstrând legăturile principale.
Imagini glisante. Dacă aveți mai multe fotografii grozave care reprezintă activitatea site-ului, dați-i drumul! Utilizatorii pot derula printr-un set de imagini rafinate de înaltă rezoluție.
Ilustrații. Imaginile de antet pentru site-urile web trebuie să atingă coarda potrivită și să stabilească o conexiune personală. Mai bine dacă o imagine este distinctă și ușor de recunoscut chiar dacă este decupată din antetul site-ului web. Puteți realiza acest lucru valorificând tendința actuală pentru ilustrații.
Video sau animație
Nu vă concentrați atenția doar pe imagini statice.
Adaugați video este printre cele mai eficiente idei de antet de site web. Dacă este posibil, încercați să adăugați un material video tematic într-un antet. Multe site-uri web îl folosesc pentru a captiva audiența în timp ce își prezintă compania sau produsul în cel mai bun mod posibil.
O altă modalitate de a vă face designul și mai atractiv, viu și memorabil este să adăugați animație. Aceasta poate realiza anteturi de site web foarte interesante. Dacă sunteți în căutarea unei pagini web interactive care să atragă privitorii, animația este o alternativă excelentă.
Un apel la acțiune bine conceput
În timpul proiectării unui antet web, designerul adaugă acolo câteva elemente de apel la acțiune, cum ar fi „log-in”, „sign-in”, „get in touch”, etc. Pentru a atrage atenția utilizatorului astfel încât să rezulte acțiunea necesară, butonul trebuie să conțină o inscripție inteligibilă pentru client și să fie vizibil printre alte conținuturi.
Plasarea unui call to action într-un loc strategic semnificativ este o ocazie perfectă pentru a îndemna utilizatorii să acționeze încă de la început, sporind astfel rata de conversie. Unele CTA-uri pot fi utilizate pentru o perioadă de timp pentru a promova oferte speciale, altele au o prezență pe termen lung.
Cele mai bune fonturi pentru anteturile site-urilor web
În primul rând, clientul percepe numele secțiunilor și informațiile oferite de companie: date de contact, oferte interesante. De aceea, trebuie să alegeți fonturi clare, lizibile, care nu afectează percepția și care ar putea fi înțelese la prima vedere.
Pentru anteturile mari ale paginilor de start, puteți folosi unele tipografii îndrăznețe și elemente imaginative pentru a capta atenția utilizatorilor, în caz contrar, cel mai bine este să nu alegeți fonturi fanteziste care se pot dovedi greu de citit.
Design de antet simplu
Prin menținerea unui antet bine definit și îngrijit, vizitatorii dvs. vor simți că nu încercați să îi împovărați cu ofertele dvs. Un antet creativ al unui site web poate avea un aspect foarte simplu.
Este o soluție din ce în ce mai folosită pentru designul site-urilor web. Meniul hamburger este o mică pictogramă cu trei dungi, care afișează meniul complet atunci când se face clic pe ea. Această tehnică este folosită de designeri atunci când trebuie să se concentreze pe ecranul principal.
Din punct de vedere al utilizabilității site-ului, aceasta este o opțiune bună. Un astfel de meniu a provenit din designul mobil și este deja familiar utilizatorilor. Hamburgerul este potrivit pentru site-urile promoționale, unde accentul principal este pus pe prezentarea de înaltă calitate a produsului folosind fotografii sau videoclipuri. Pentru magazinele online, această opțiune ar putea fi mai puțin potrivită, deoarece este important pentru client să aibă un coș, produse selectate și un câmp de căutare în acces rapid.
Designul antetului pentru mobil
A antetul trebuie să fie afișat corect nu numai pe versiunea desktop a site-ului, ci și pe cea mobilă. Deci trebuie să fie responsiv și capabil să se adapteze bine la orice dispozitiv mobil.
Utilizarea zilnică a dispozitivelor mobile a dus la designuri de site-uri web care par orientate spre mobil chiar și în întruchipările lor pentru desktop. De exemplu, implementarea imaginilor mari ale eroilor și a meniurilor hamburger își are originile în designul mobil.
În concluzie
Site-ul este prezentat prin antetul său. Este ca o carte de vizită unică. Prin urmare, atunci când proiectați un site web, acordați o atenție maximă antetului.
Și o ultimă bună practică de proiectare a antetului unui site web: faceți modificări regulate pentru a vă menține site-ul web proaspăt și actualizat. Folosiți câteva informații din acest articol.
.