Tidligere henviste en “overskrift” i webdesign typisk til den evige stribe øverst på websiderne, som indeholdt logoet, navigationslinjen og måske nogle kontaktoplysninger og en søgelinje. I dag henviser en “header” oftere til hele pladsen over foldet på forsiden.
Medmindre nogen har fundet dit websted via et blogindlæg, der er delt på sociale medier eller fra en henvisning på et andet websted, er der gode chancer for, at de kommer ind på det via forsiden. Og det første, de vil se, er den førsteklasses ejendom øverst oppe i toppen, der er lagt frit.
Jeg har tidligere skrevet om, hvordan besøgende reagerer bedre på en forudsigelig placering af visse elementer på dit websted (f.eks. logoet og CTA). Ved at designe et websted med det formål at opfylde deres forventninger og øge deres komfort ved at gøre oplevelsen noget mere forudsigelig, kan du effektivt forbedre klik- og konverteringsraten.
Tænk nu på den plads i overskriften på forsiden.
De fleste mennesker er blevet afhængige af, at forsiderne giver dem et overblik i fugleperspektiv over, hvad en virksomhed eller et websted handler om, hvilket betyder, at du ikke har råd til at spilde denne mulighed for at indfri denne forventning. Selvfølgelig kan designet af din hjemmesides header være unikt for dit brand, men de elementer, der findes i den, bør virkelig ikke være det. Besøgende forventer, at det ikke vil være nødvendigt at scrolle for at finde ud af, hvad et websted vil gøre for dem. I bund og grund bør din header være en 10-sekunders historie, der beviser for dine besøgende, hvilken værdi webstedet vil have for dem.
Så, hvad vil du gøre med dette rum for at fange dine besøgendes interesse?
Lad os tale om nogle af tendenserne inden for header-design i 2017, hvad du kan gøre for at gøre brug af denne meget synlige ejendom og tage et kig på nogle interessante eksempler på headere undervejs.
14 tendenser inden for header-webdesign i 2017
Det er ikke sådan, at dine besøgende er uvidende om deres evne til at scrolle ned ad en side eller klikke sig gennem en navigation for at få mere at vide om brandet bag et websted. Men hvorfor skulle de være nødt til at gøre det? Der er plads nok i overskriften til at give et kortfattet budskab, 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.
Hjemmesidens overskrift kan frem for alt gøre eller ødelægge dine besøgendes første indtryk, hvilket er grunden til, at det er så vigtigt at have styr på denne sektion.
Hvis du kæmper med at finde en måde at starte dit websted med et brag, kan du måske finde inspiration i følgende designtrends for headere i 2017:
Oversized Hero Image
På grund af den modulære stil med at designe websteder for at være responsive, er de fleste designs nu opdelt i forskellige blokke og sektioner. Denne designstil egner sig tilfældigvis godt til disse heltebilleder i fuld bredde, som fylder så mange websteder.
Tag f.eks. Cleverbird Creatives websted. Det gør brug af et enkelt og slående billede overlejret med simpel tekst for at byde de besøgende velkommen. Der er ingen tvivl om, hvad de går efter her: forenklet skønhed.
Sliding Images
Jeg tror, der var en tid, ikke så langt tilbage i tiden, hvor mange af os satte spørgsmålstegn ved slideren som et brugbart designelement. Men mange designere har gjort et godt stykke arbejde ved at gøre brug af det i overskrifter. Der er glidende billeder, der automatisk ruller fra et smukt billede i høj opløsning til det næste, og der er dem som Pierre’s, der tigger de besøgende om selv at tage kontrol over denne oplevelse.
Transformative parallax-billeder
Parallax-scrolling er stadig i stærk vækst, og overskriften har vist sig at være det perfekte sted at anvende denne form for visuel “illusion” i webdesign. Det, du ser mest for nylig, er dog designere, der giver deres parallax-scroll en transformativ kant, sandsynligvis for at overraske de besøgende med det uventede resultat af scrollet. Det australske UX-designbureau August har gjort netop dette med deres header.
Videobaggrund
Videobaggrunden er endnu en af de nyere tendenser, der virkelig fungerer bedst, når den anvendes på forsideheaderne. Denne fra Le 28 gør et godt stykke arbejde med at sætte stemningen for restaurantens websted og viser videoer fra forsiden og bagsiden af spisestedet.
Hidden Navigation
Og selv om man kan argumentere for, at hamburgermenuen hører hjemme på websteder, der ses på mobile enheder (som det oprindeligt var meningen), er der noget at sige om, hvad den slags navigationsminimalisme gør for overskriften. Webstedet +rehabstudio er et godt eksempel på dette. Ved at gemme navigationen væk, bliver dit umiddelbare fokus trukket til de spændende visuelle elementer i plus-symbolet … og så opdager du, at der er små strejf af animation omkring det.
Brand Mascot
Hvis headeren er det sted, hvor du introducerer de besøgende til dit websted, hvad er så bedre end at præsentere dem for de “karakterer”, som de vil møde undervejs? Hvis dit websted bruger brandmaskotter – som WPMU DEV-webstedet gør – er dette tidspunktet og stedet at vise dem frem.
Eye-Catching Typography
Der er meget, der kan gøres for at give dit websteds typografi en ansigtsløftning. Når det er sagt, handler det nogle gange ikke om at vælge den flotteste kursive skrifttype, som man kan smide i hovedet på folk. Hvis du ser på Slack-eksemplet ovenfor, vil du se, at det handler om størrelsen af skrifttypen. Der er ikke rigtig noget særligt ved den typografi, de har valgt, men den er så ren og tydelig. Det kombineret med størrelsen på hovedbudskabet er det, der gør det så iøjnefaldende.
Indhold først
For websites med et primært fokus på at levere massevis af indhold til de besøgende (tænk på ethvert større nyhedssite eller blog), vil en indhold først-strategi for overskriften give mest mening. Der er virkelig ingen grund til at lægge fingrene imellem her. Folk er kommet til dit websted for at læse dit indhold, de har ikke brug for at blive forstyrret af yderligere læsning på forsiden, så du kan gå lige til sagen, som Glamour gør.
Produkter først
I samme tråd behøver e-handelssider ikke at gøre sig den ulejlighed at bruge overskriften til at skrive en fængende overskrift eller give en videoforklaring om virksomheden. De besøgende ved, hvad de er kommet til webstedet for, så du kan gå direkte til sagen. I modsætning til indholdsleverandører kan produktforhandlere dog bruge denne førsteklasses ejendom til at vise deres bedst sælgende produkter eller nyeste udgivelser for at lokke de besøgende fremad, ligesom Apple gør.
CTA Front-and-Center
Der kan komme et tidspunkt, hvor dit websted har noget helt særligt at vise de besøgende frem, noget du vil have dem til at downloade eller købe. Nu kan du, selv om det måske ikke er hovedattraktionen på dit websted, bruge overskriften enten midlertidigt eller permanent til at fremhæve dette særlige call-to-action, som Everywhereist-bloggeren gør med sin bog.
Vibrante farver og teksturer
Måske er en af de pæneste ting, der er kommet ud af Google Material Design, vores villighed til at bruge mere levende farver, lag og gradienter i webdesign. De behøver ikke længere at være henvist til call-to-action-knapper, de kan bruges til hele blokke på websitet, som Stripe gør med deres farverige og teksturerede header.
Animation
Der er absolut intet galt med at have et statisk header-design på forsiden, især hvis du ønsker, at fokus skal trækkes til en CTA eller en video. Hold det enkelt, så der ikke er nogen distraktioner, der forhindrer de besøgende i at foretage den handling, du ønskede, at de skulle gøre. Men for websteder, der ønsker en interessant måde at dele deres budskab med læserne på, kan animationer være et klogt valg. Baianat bruger en lille animation til at dele en række budskaber på samme plads, hvilket gør, at det ikke ser rodet eller overfyldt med information ud.
Geometrisk design
Geometrisk webdesign er tilfældigvis virkelig stort lige nu, da det egner sig godt til de logiske og rene linjer, der er nødvendige for responsivt design. Så det er ikke overraskende, at vi ser flere websites, som det for Perspective API, der integrerer geometriske elementer i headerens design. Der er andre, som Stripe og WPMU DEV, der bruger diagonale linjer til at skabe et unikt og uventet visuelt landskab for de besøgende.
Eksperimentelt
Endeligt kommer vi til eksperimentelle header-designs. Nøglen til disse er som regel ikke, at overskriften skal være ualmindeligt mærkelig og usædvanlig. Det ville være for distraherende for de besøgende. I stedet bør dit fokus være på at skabe en eller anden uventet effekt forårsaget af den simple bevægelse hen over overskriften.
Tag f.eks. Teamgeek-designet. Du kan se, at der er noget “mærkeligt” ved logoet og budskabet i midten af siden, men det er først, når du beskæftiger dig med det, at du indser, at der er et særligt twist indbygget.
Afslutning
Som du kan se, er der en række forskellige måder, du kan designe en header til et WordPress-websted på. Hvis du ser nærmere på eksemplerne ovenfor, vil du dog bemærke, at designerne var meget strategiske med hensyn til hvilken stil af header de brugte, og hvilke elementer der blev inkluderet i den. Når det er tid til at designe en header til dit næste webstedsprojekt, skal du overveje, om du har brug for følgende:
- Logo
- Traditionel vs. skjult
- Hero header-sektion vs. at komme direkte til indholdet
- Tagline eller mission statement
- Kontaktoplysninger
- Link til sociale medier
- Søgningslinje
- Multilingual toggle
- Shopping cart
- Brand maskot
- Stock photography vs. Reelt fotografi af virksomheden, personer eller produktet
- Statisk billede vs. glidende billeder vs. baggrundsvideo
- Indlejret promo-video
- Call-to-action-knap
- Kontaktformular
- Hello bar
Du kan også finde andre elementer, der hører hjemme i denne øverste header-sektion på din startside. Det handler i virkeligheden bare om, hvad der giver mest mening for dit websted. Med andre ord, hvilke elementer vil fortælle dit brands historie, uddanne og engagere dit publikum lige fra starten og skabe tilstrækkelig tillid til at drive dem fremad gennem dit websted?
Tags:
- design
- headers