Gå til hovedindhold

14 fantastiske websitehoveder til din inspiration

Divi: Det nemmeste WordPress tema at bruge

Divi: Det bedste WordPress tema hele tiden!

mere 901.000 downloads, Divi er det mest populære WordPress tema i verden. Den er komplet, nem at bruge og leveres med mere end 62 gratis skabeloner. [Anbefalet]

Tidligere henviste et "header" i webdesign til den allestedsnærværende strip øverst på websteder, der indeholdt logoet, navigationslinjen og måske kontaktoplysninger og en søgelinje. I disse dage refererer et "overskrift" oftere til hele rummet over folden på startsiden.

Medmindre nogen fandt dit websted via et blogindlæg delt på sociale medier eller fra en henvisning på et andet websted, er chancerne gode for at de kommer ind på det via siden. Velkommen. Og det første, de vil se, er, at førsteklasses ejendomme bliver blottet.

Jeg har før skrevet om, hvordan besøgende reagerer bedre på den forudsigelige placering af visse elementer på dit websted (som logo og CTA). Ved at designe et websted, der opfylder deres forventninger og forbedre deres bekvemmelighed ved at gøre oplevelsen lidt mere forudsigelig, kan du effektivt forbedre klik- og konverteringsfrekvenser.

Tænk nu over det headerrum på hjemmesiden.

Quickbooks -overskrift
Hvad er egentlig et "header" i disse dage?

De fleste mennesker er kommet til at stole på hjemmesider for at give dem det store billede af, hvad en virksomhed eller et websted handler om, hvilket betyder, at du ikke har råd til at spilde denne mulighed. Opfylde disse forventninger.

Selvfølgelig kan dit design på din startsides side være unikt for dit brand, men elementerne i det burde virkelig ikke være det. Besøgende forventer, at rulning ikke er nødvendig for at finde ud af, hvad et websted vil gøre for dem. Grundlæggende bør din header være en historie på 10 sekunder, der viser dine besøgende den værdi, som webstedet vil bringe dem.

Så hvad vil du gøre med dette rum for at fange dine besøgendes interesse?

Lad os tale om nogle af trenderne inden for header -design, hvad du kan gøre for at bruge disse meget synlige ejendomme og tage et kig på nogle fede header -eksempler undervejs.

At notere: Ikke alle eksempler på de nedenstående eksempler bruger WordPress, men de kan gøres ved hjælp af WordPress.

14 header web designs

Det er ikke sådan, at dine besøgende ignorerer deres evne til at rulle ned på en side eller gennemse ved at klikke for at lære mere om mærket bag et websted. Men hvorfor skulle de gøre dette?

Der er plads nok i overskriften til at give en kortfattet besked, der fortæller dem alt, hvad de har brug for at vide. Og hvis 50 ord eller mindre ikke er nok, vil baggrundsbilledet eller designet kommunikere resten af ​​historien.

Først og fremmest kan overskriften på hjemmesiden lave eller bryde de første indtryk af dine besøgende, og derfor er det så vigtigt at sømme dette afsnit.

Opret nemt dit websted med Elementor

Elementor giver dig mulighed for nemt at oprette ethvert webstedsdesign med et professionelt look. Stop med at betale dyre for hvad du selv kan gøre. [Gratis]

Hvis du kæmper for at finde en måde at få dit websted godt i gang, kan du måske finde lidt inspiration i de følgende header designs.

1. Oversized heltebillede

Kreativt Cleverbird -websted.
Nogle overskrifter, som den fra Cleverbird Creative, er enorme.

Takket være den modulære stil med responsivt sitedesign er de fleste designs nu opdelt i separate blokke og sektioner. Denne designstil egner sig godt til heltebilleder i fuld bredde, der befolker så mange websteder.

Tag for eksempel Cleverbird Creative -webstedet. Det bruger et entydigt og slående billede lagt over enkel tekst for at byde besøgende velkommen. Der er ingen tvivl om, hvad de leder efter her: skønhed gjort enkel. Plus, at have Wonder Woman gør ikke ondt.

2. Glatte billeder

Eksempel på et rullende billede.
Mmm… is…

Jeg tror, ​​der var en tid, ikke så længe siden, da mange af os stillede spørgsmålstegn ved skyderen som et levedygtigt designelement. Imidlertid har mange designere gjort et godt stykke arbejde ved at bruge det i overskrifterne. Der er glidende billeder, der automatisk ruller fra et smukt billede i høj opløsning til et andet, og der er dem som Peters tiggeriske besøgende om selv at tage kontrol over denne oplevelse.

3. Transformativ parallax -billeddannelse

Anakin Design Studio -webstedet.

Parallax har været et kendetegn for moderne webdesign i nogen tid. Selvom det blev betragtet som "varmt" for et par år siden, er brugen af ​​parallakseffekter stadig populær, og overskriften har vist sig at være det perfekte sted at anvende denne type visuel "illusion" på webdesign. Hvad du dog senest vil se, er designerne, der giver deres parallaxrulle en transformativ kant, der sandsynligvis vil overraske besøgende med det uventede resultat af rullen. Dette er præcis, hvad Anakin Design Studio gjorde med sin header.

4. Videobaggrunde

Eksempel på video baggrund.
Brave People -webstedet gør et godt stykke arbejde med at inkorporere videoer.

Videobaggrunden er en anden sådan nyere trend, der virkelig fungerer bedst, når den anvendes på startsidens overskrift. Denne fra Brave People gør et godt stykke arbejde med at sætte tonen til deres websted og vise forskellige klip frem.

5. Skjult navigation

Canals eksempel header.
Overskriften på kanalerne er super moderne, og navigationen er vanskelig at få øje på.

Selvom det kan argumenteres for, at hamburgermenuen tilhører websteder, der ses på mobile enheder (som oprindeligt tiltænkt), er der noget at sige til, hvad denne form for navigationsminimalisme gør for den. -Head. Canals -stedet er et godt eksempel. Ved at rydde op i navigationen tiltrækkes din umiddelbare opmærksomhed på de spændende billeder.

6. Brand maskot

Eksempel på en maskot header.
Som Tony the Tiger ville sige om maskotoverskrifter: "De er fantastiske!

Hvis headeren er det perfekte sted at præsentere dit websted for besøgende, hvilken bedre måde at starte det på er ved at introducere dem for de "karakterer", de vil møde undervejs? Hvis dit websted bruger en mærket maskot, som Kellogg's Frosted Flakes -websted gør, er det nu tid og sted at vise dem frem.

Leder du efter de bedste WordPress-temaer og plugins?

Download de bedste plugins og WordPress-temaer på Envato og nemt oprette dit websted. Allerede mere end 49.720.000 downloads. [EXCLUSIVE]

7. Iøjnefaldende typografi

Eksempel på Slack -websted.
Stærk typografi kan virkelig få dit indhold til at skinne.

Der er meget, der kan gøres for at give dit websteds typografi et ansigtsløftning. Når det er sagt, handler det nogle gange ikke om at vælge den mest fantasifulde kursive skrifttype til at smide folks ansigter ind. Hvis du ser på Slack -eksemplet ovenfor, vil du se, at det hele afhænger af skriftstørrelsen. Der er ikke noget særligt ved den typografi, de valgte, men den er så ren og sprød. Det er det, der sammen med hovedpostens størrelse gør det så iøjnefaldende.

8. Indhold først

Eksempel på en Glamour -startside.
Glamour -hjemmesiden er først og fremmest indhold.

For websteder, hvis primære mål er at levere massive mængder indhold til besøgende (tænk ethvert større nyhedswebsted eller blog), vil en indholdsdrevet strategi for overskriften give mest mening.. Der er virkelig ingen mening med små ord her. Folk er kommet til dit websted for at læse dit indhold, de behøver ikke at stå fast i yderligere læsning på hjemmesiden, så du kan springe direkte til det som Glamour gør.

9. Produkter først

Eksempel på Apple -websted.
I mellemtiden fokuserer Apple på sit seneste store produkt.

På en relateret note behøver e -handelswebsteder ikke at genere at bruge overskriften til at skrive en fængende overskrift eller give en forklaringsvideo om virksomheden. Besøgende ved, hvorfor de kom til stedet, så du kan dykke lige ind. Men i modsætning til indholdsudbydere kan produktforhandlere bruge disse førsteklasses ejendomme til at fremvise deres bedst sælgende produkter eller deres seneste udgivelser for at tiltrække besøgende, ligesom Apple gør.

10. CTA Front-and-Center

The Everywhereist inviterer besøgende til at klikke på sin dristige CTA.

Der kan komme en tid, hvor dit websted har noget helt særligt at vise besøgende, noget du vil have dem til at downloade eller købe. Selvom dette måske ikke er dit websteds hovedattraktion, kan du midlertidigt eller permanent bruge overskriften til at fremhæve den særlige opfordring til handling, som bloggeren gør. Overalt med sin bog.

11. Levende farver og teksturer

Eksempel fra Stripe -webstedet.
Åh ... genialt ...

En af de dejligste ting, der kommer ud af Google Material Design, er vores drev til at bruge mere levende farver, lag og gradienter i webdesign. De bør ikke længere henvises til opfordringsknapper, de kan bruges til hele blokke på webstedet, ligesom Stripe gør med deres farverige, teksturerede header.

12. Animationer

Disney hjemmeside.
Disneys websted indeholder ofte animationer af deres seneste projekt.

Der er absolut intet galt med at have et statisk headers -design på hjemmesiden, især hvis du vil have fokus på en CTA eller video. Vær venlig at holde det enkelt, så der ikke er nogen forstyrrelser, der forhindrer besøgende i at foretage sig den handling, du vil have dem til at foretage.

Men for websteder, der ønsker en interessant måde at dele deres indlæg med læsere, kan du prøve animation. For eksempel bruger Disney en lille animation til at dele et antal indlæg i samme rum, som forhindrer den i at se rodet eller overbelastet med information.

13. Geometriske designs

Perspektivwebsted.
Perspektiv API forenklet header.

Geometrisk webstedsdesign er meget vigtigt lige nu, fordi det egner sig godt til de logiske, rene linjer, der er nødvendige for responsivt design. Så det er ingen overraskelse, at flere og flere websteder, ligesom Perspective API'er, inkorporerer geometriske elementer i headerdesignet. Andre, som Stripe og WPMU DEV, bruger diagonale linjer til at skabe et unikt og uventet visuelt landskab for besøgende.

14. Eksperimentel

Teamgeeks overskrift er underlig og sjov.

Endelig kommer vi til de eksperimentelle header designs. Nøglen til disse er normalt ikke, at overskriften ser underlig og usædvanlig ud. Det ville være for ubelejligt for besøgende. I stedet bør du fokusere på at skabe en uventet effekt forårsaget af overskriftens enkle bevægelse.

Tag f.eks. Teamgeek -designet. Du kan se, at der er noget galt med logoet og budskabet i midten af ​​siden, men det er først, når du engagerer dig i det, at du indser, at der er et særligt strejf indbygget i det.

pakke

Som du kan se, er der forskellige måder at designe et header til et WordPress -websted. Hvis du kigger nærmere på eksemplerne ovenfor, vil du bemærke, at designerne var meget strategiske omkring den headerstil, de brugte, og hvilke elementer der var inkluderet i dem. Når det er tid til at designe en overskrift til dit næste webstedsprojekt, skal du afgøre, om du får brug for følgende:

  • Logo
  • Traditionel vs skjult
  • Hero header sektion vs gå direkte til indhold
  • Slogan eller mission statement
  • Kontaktoplysninger
  • Links til sociale medier
  • Søgefelt
  • Flersproget switch
  • Indkøbskurv
  • Mærke maskot
  • Stockfotografering versus egentlig fotografering af virksomheden, mennesker eller produkt
  • Statisk billede vs glidende billeder vs baggrundsvideo
  • Integreret salgsfremmende video
  • Opkald til handling -knap
  • kontaktformular
  • Hej bar

Du finder muligvis også andre elementer, der hører til denne sektion med øverste overskrift på din hjemmeside. Det kommer virkelig ned på, hvad der giver mest mening for dit websted.

Med andre ord, hvilke elementer vil fortælle dit brands historie, uddanne og engagere dit publikum fra starten og inspirere tilstrækkelig tillid til at drive dem til dit websted?

Opret nemt din online butik

Download gratis WooCommerce, de bedste e-handels-plugins til at sælge dine fysiske og digitale produkter på WordPress. [Anbefalet]

Redaktørens note: Dette indlæg er blevet opdateret for nøjagtighed og relevans. [Oprindeligt udgivet: august 2017 / revideret: august 2021]