Treci la conținutul principal

14 antete minunate de site web pentru inspirație

Divi: cea mai ușoară temă WordPress de utilizat

Divi: cea mai bună temă WordPress din toate timpurile!

mai mult Descărcări 901.000, Divi este cea mai populară temă WordPress din lume. Este completă, ușor de folosit și are mai mult de șabloane gratuite 62. [Recomandat]

În trecut, un „antet” în designul web se referea la banda omniprezentă din partea de sus a site-urilor web care conținea sigla, bara de navigare și, probabil, detaliile de contact și o bară de căutare. În aceste zile, un „antet” se referă mai des la întregul spațiu de deasupra pliului de pe pagina de pornire.

Cu excepția cazului în care cineva ți-a găsit site-ul printr-o postare pe blog partajată pe rețelele de socializare sau dintr-o recomandare de pe alt site, sunt mari șanse să intre pe acesta prin pagina. Și primul lucru pe care îl vor vedea este că imobilele primare sunt scoase la iveală.

Am mai scris despre modul în care vizitatorii răspund mai bine la plasarea previzibilă a anumitor elemente pe site-ul dvs. (cum ar fi sigla și CTA). Prin proiectarea unui site web pentru a le îndeplini așteptările și a le îmbunătăți confortul, făcând experiența puțin mai previzibilă, puteți îmbunătăți efectiv ratele de clic și de conversie.

Acum gândiți-vă la acel spațiu de antet de pe pagina principală.

Antetul Quickbooks
Ce este exact un „antet” în aceste zile?

Majoritatea oamenilor au ajuns să se bazeze pe paginile de pornire pentru a le oferi o imagine de ansamblu a ceea ce înseamnă o afacere sau un site web, ceea ce înseamnă că nu vă puteți permite să pierdeți această oportunitate.

Sigur, designul antetului paginii de pornire poate fi unic pentru marca dvs., dar elementele din interiorul acestuia nu ar trebui să fie. Vizitatorii se așteaptă ca derularea 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 demonstreze vizitatorilor valoarea pe care site-ul le va aduce.

Deci, ce veți face cu acest spațiu pentru a capta interesul vizitatorilor dvs.?

Să vorbim despre unele dintre tendințele în proiectarea anteturilor, ce puteți face pentru a utiliza aceste proprietăți imobiliare extrem de vizibile și să aruncăm o privire la câteva exemple de antet interesante pe parcurs.

A nota: Nu toate site-urile exemplare enumerate mai jos utilizează WordPress, dar pot fi realizate folosind WordPress.

14 modele web antet

Nu este ca și cum vizitatorii tăi își ignoră capacitatea de a derula o pagină sau de a naviga prin clic pentru a afla mai multe despre marca din spatele unui site. Dar de ce ar trebui să facă acest lucru?

Există suficient spațiu în antet pentru a oferi un mesaj succint care le spune tot ce trebuie să știe. Și dacă 50 de cuvinte sau mai puțin nu sunt suficiente, dezordine sau design vor comunica restul poveștii.

În primul rând, antetul paginii de pornire poate face sau distruge primele impresii ale vizitatorilor dvs., motiv pentru care este atât de important să închideți această secțiune.

Creați cu ușurință site-ul dvs. web cu Elementor

Elementor vă permite să creați cu ușurință orice design de site web cu un aspect profesionist. Nu mai plătiți scump pentru ceea ce puteți face singur. [Gratuit]

Dacă vă luptați pentru a găsi o modalitate de a începe site-ul dvs. la un început bun, s-ar putea să găsiți o inspirație în următoarele modele de antet.

1. Imagine de erou supradimensionată

Site-ul Creative Cleverbird.
Unele anteturi, precum cel de la Cleverbird Creative, sunt uriașe.

Datorită stilului modular de proiectare a site-ului receptiv, cele mai multe modele sunt acum împărțite în blocuri și secțiuni separate. Acest stil de design se pretează bine acelor imagini de erou pe toată lățimea care populează atât de multe site-uri web.

Luați, de exemplu, site-ul web Cleverbird Creative. Folosește o imagine singulară și izbitoare suprapusă pe un text simplu pentru a-i întâmpina pe vizitatori. Nu se înșeală ceea ce caută aici: frumusețea simplificată. În plus, dacă ai Wonder Woman nu te doare.

2. Imagini alunecoase

Exemplu de imagine cu derulare.
Mmm ... înghețată ...

Cred că a existat o vreme, nu cu mult timp în urmă, când mulți dintre noi au pus sub semnul întrebării glisorul ca element de design viabil. Cu toate acestea, mulți designeri au făcut o treabă excelentă folosindu-l în anteturi. Există imagini glisante care derulează automat de la o imagine frumoasă de înaltă rezoluție la alta și există imagini precum Petru care îi imploră pe vizitatori să preia ei înșiși controlul acestei experiențe.

3. Imagistica de paralaxă transformativă

Site-ul Anakin Design Studio.

Parallax a fost un semn distinctiv al designului web modern de ceva timp. Deși considerată „fierbinte” în urmă cu câțiva ani, utilizarea efectelor de paralaxă este încă populară și antetul s-a dovedit a fi locul perfect pentru a aplica acest tip de „iluzie” vizuală proiectelor web. Totuși, ceea ce veți vedea cel mai recent sunt proiectanții care oferă defilarea lor de paralaxă o margine transformatoare, susceptibilă de a surprinde vizitatorii cu rezultatul neașteptat al derulării. Exact asta a făcut Anakin Design Studio cu antetul său.

4. Fundaluri video

Exemplu de fundal video.
Site-ul Brave People face o treabă excelentă de a încorpora videoclipuri.

Fundalul video este o altă tendință recentă care funcționează cel mai bine atunci când este aplicată la antetul paginii de pornire. Acesta de la Brave People face o treabă excelentă de a da tonul site-ului lor web, prezentând diferite clipuri.

5. Navigare ascunsă

Antetul de exemplu Canals.
Antetul canalelor este foarte modern, iar navigarea este dificil de observat.

Deși se poate susține că meniul hamburger aparține site-urilor web vizualizate pe dispozitive mobile (așa cum se intenționa inițial), există ceva de spus pentru ceea ce face acest tip de minimalism de navigație pentru el. Site-ul Canals este un bun exemplu. Prin ordonarea navigării, atenția dvs. imediată este atrasă de imagini incitante.

6. Mascota de marcă

Exemplu de antet pentru mascotă.
Așa cum Tony Tiger ar spune despre antetele mascotei, „Sunt minunate!

Dacă antetul este locul perfect pentru a vă prezenta site-ul vizitatorilor, ce modalitate mai bună de a-l lansa decât prin a le prezenta „personajelor” pe care le vor întâlni pe parcurs? Dacă site-ul dvs. folosește o mascotă de marcă, așa cum face site-ul Kellogg's Frosted Flakes, acum este momentul și locul pentru a le arăta.

Căutați cele mai bune teme și pluginuri WordPress?

Descărcați cele mai bune pluginuri și teme WordPress pe Envato și creați cu ușurință site-ul dvs. Web. Deja mai mult de descărcări 49.720.000. [EXCLUSIV]

7. Tipografie atrăgătoare

Exemplu de site web Slack.
Tipografia puternică vă poate face să strălucească conținutul.

Există multe lucruri care pot fi făcute pentru a oferi tipografiei site-ului dvs. un lifting facial. Acestea fiind spuse, uneori nu este vorba despre alegerea fontului cursiv cel mai amuzant pe care să-l arunce în fața oamenilor. Dacă priviți exemplul Slack de mai sus, veți vedea că totul depinde de dimensiunea fontului. Nu este nimic cu adevărat special în tipografia pe care au ales-o, dar este atât de curată și clară. Iată ce, împreună cu dimensiunea postului principal, îl face atât de atrăgător.

8. Conținutul mai întâi

Exemplu de pagină de start Glamour.
Pagina de pornire Glamour este conținută mai întâi, printre altele.

Pentru site-urile web al căror obiectiv principal este de a furniza cantități masive de conținut vizitatorilor (gândiți-vă la orice site de știri sau blog major), o strategie bazată pe conținut pentru antet va avea cel mai mult sens. Nu are nici un rost în cuvintele tocate aici. Oamenii au venit pe site-ul tău pentru a-ți citi conținutul, nu trebuie să fie împotmolit în lecturile ulterioare pe pagina principală, astfel încât să poți sări direct la el, așa cum face Glamour.

9. Produsele mai întâi

Exemplu de site web Apple.
Între timp, Apple se concentrează pe ultimul său mare produs.

Într-o notă asemănătoare, site-urile de comerț electronic nu trebuie să se deranjeze folosind antetul pentru a scrie un titlu atrăgător sau să ofere un videoclip explicativ despre afacere. Vizitatorii știu de ce au venit pe site, astfel încât să puteți face scufundări chiar în. Cu toate acestea, spre deosebire de furnizorii de conținut, comercianții cu amănuntul de produse pot folosi aceste bunuri imobiliare de top pentru a-și prezenta produsele cele mai bine vândute sau ultimele lor versiuni pentru a atrage vizitatori, la fel ca Apple.

10. CTA Front-and-Center

Everywhereist invită vizitatorii să facă clic pe CTA-ul său îndrăzneț.

S-ar putea să vină un moment în care site-ul dvs. să prezinte ceva cu adevărat special pentru a le arăta vizitatorilor, ceva pe care doriți să îl descarce sau să cumpere. Acum, deși s-ar putea să nu fie principala atracție a site-ului dvs., puteți utiliza antetul temporar sau permanent pentru a evidenția acel îndemn special, așa cum face bloggerul. Oriunde cu cartea sa.

11. Culori și texturi vibrante

Exemplu de pe site-ul web Stripe.
Ooh ... genial ...

Unul dintre cele mai frumoase lucruri care rezultă din Google Material Design este unitatea noastră de a folosi culori, straturi și gradiente mai vii în designul web. Acestea nu ar trebui să mai fie relegate la butoane de îndemn, ele pot fi utilizate pentru blocuri întregi de pe site, așa cum face Stripe cu antetul lor colorat și texturat.

12. Animații

Site-ul Disney.
Site-ul Disney prezintă adesea animații ale celui mai recent proiect al lor.

Nu este absolut nimic în neregulă dacă aveți un design static al antetului paginii de pornire, mai ales dacă doriți ca accentul să fie atras de un CTA sau un videoclip. Păstrați-l simplu, astfel încât să nu existe distrageri care să împiedice vizitatorii să ia măsurile pe care doriți să le facă.

Dar pentru site-urile web care doresc o modalitate interesantă de a-și împărtăși mesajul cititorilor, încercați animația. De exemplu, Disney folosește o mică animație pentru a partaja mai multe postări în același spațiu, ceea ce îl împiedică să pară aglomerat sau supraîncărcat cu informații.

13. Proiecte geometrice

Site web Perspective.
Perspectiva API antet simplificat.

Proiectarea geometrică a site-urilor web este foarte importantă în acest moment, deoarece se pretează bine la liniile logice și curate necesare pentru un design receptiv. Așadar, nu este de mirare că tot mai multe site-uri web, precum API-ul Perspective, încorporează elemente geometrice în designul antetului. Altele, precum Stripe și WPMU DEV, utilizează linii diagonale pentru a crea un peisaj vizual unic și neașteptat pentru vizitatori.

14. Experimental

Antetul Teamgeek este ciudat și amuzant.

În cele din urmă, ajungem la proiectele de antet experimentale. Cheia acestora nu este de obicei faptul că antetul este ciudat de ciudat și neobișnuit. Ar fi prea incomod pentru vizitatori. În schimb, ar trebui să vă concentrați asupra creării unui efect neașteptat cauzat de simpla mișcare a antetului.

Luați, de exemplu, designul Teamgeek. Puteți vedea că este ceva în neregulă cu sigla și mesajul din centrul paginii, dar numai atunci când vă angajați în ea, vă dați seama că există o notă specială încorporată în ea.

ambalaj

După cum puteți vedea, există diferite moduri de a proiecta un antet pentru un site WordPress. Dacă aruncați o privire atentă 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 ele. Când vine timpul să proiectați un antet pentru următorul dvs. proiect de site, determinați dacă veți avea nevoie de următoarele:

  • logo
  • Tradițional vs ascuns
  • Secțiunea antet erou vs merge direct la conținut
  • Slogan sau declarație de misiune
  • Informații de contact
  • Link-uri de socializare
  • Bara de căutare
  • Comutator multilingv
  • coș
  • Mascota de marcă
  • Fotografie de stoc comparativ cu fotografia reală a companiei, a persoanelor sau a produsului
  • Imagine statică vs imagini glisante vs video de fundal
  • Videoclip promoțional integrat
  • Butonul de îndemn
  • formular de contact
  • Salut bar

De asemenea, puteți găsi alte elemente care aparțin acestei secțiuni de antet de sus a paginii dvs. de pornire. Se reduce la ceea ce are cel mai mult sens pentru site-ul dvs.

Cu alte cuvinte, ce elemente vor spune povestea mărcii dvs., va educa și va implica publicul de la început și va inspira suficientă încredere pentru a-i propulsa pe site-ul dvs.?

Creați ușor magazinul dvs. online

Descărcați gratuit WooCommerce, cele mai bune pluginuri de e-commerce pentru a vă vinde produsele fizice și digitale pe WordPress. [Recomandat]

Nota editorului: Această postare a fost actualizată pentru acuratețe și relevanță. [Publicat inițial: august 2017 / revizuit: august 2021]