Vidensitetsrubriken, även kallad ”above the fold”-sektionen, är utan tvekan den viktigaste delen av en webbplats. Främst för att det är den första delen av webbplatsen som besökarna ser när de kommer till webbplatsen.
När det gäller webbplatser spelar första intrycket stor roll. Och rubriksektionen spelar en stor roll för det. Faktum är att enligt en studie stannar majoriteten av webbplatsbesökare bara cirka 15 sekunder på en webbplats innan de lämnar den.
Header-designen på din webbplats spelar en viktig roll för om du kan övertyga en besökare att stanna längre än 15 sekunder.
Med rätt header-design kan du påverka besökarna att fortsätta surfa på webbplatsen. Du kan också utforma en rubrik på ett sätt som övertalar besökare att vidta åtgärder också.
För att hjälpa dig att hitta inspiration och lära dig några knep om effektiv rubrikdesign har vi handplockat några av de bästa exemplen på webbplatsens rubrikdesign för din inspiration. Dessa designer kommer säkert att hjälpa dig att få dina egna rubriker att sticka ut från mängden.
2 miljoner+ digitala tillgångar, med obegränsade nedladdningar
Få obegränsade nedladdningar av 2 miljoner+ designresurser, teman, mallar, foton, grafik och mycket mer. Envato Elements börjar på 16 dollar per månad och är det bästa kreativa abonnemanget vi någonsin sett.
Utforska digitala tillgångar
5 tips för effektiv design av webbplatsrubriker
För att komma till exemplen ska vi ta reda på vilka nyckelelement som gör en webbplatsrubrik mer effektiv.
Använd rätt typsnitt
Titeln eller rubriken står i centrum för designen av en webbplatsrubrik. Det är det som hjälper besökarna att förstå vad en webbplats handlar om. Det betyder att titeln måste vara stor, fet och tydligt synlig.
Med rätt typsnitt kan du utforma den perfekta rubriktiteln som väcker uppmärksamhet. Även om det är vanligast att använda ett fet stilfritt typsnitt för rubriker är ett serif-typsnitt mer lämpligt även för vissa varumärken. Framför allt ska du se till att din titel, dina underrubriker och din text syns tydligt över bakgrunden.
Lägg till en illustration
Bild- och videobakgrunder är fortfarande ganska populära. Men den senaste trenden när det gäller header-design för webbplatser är att använda illustrationer.
En bra sak med att använda illustrationer i header-design är att du kan lägga till lite personlighet till din webbplatsdesign. Du kan handarbeta en illustration som passar din verksamhet och ditt varumärke. Använd sedan samma stil av illustrationer i hela webbplatsens design för att skapa en smidig användarupplevelse.
Skapa en Call-To-Action (CTA)
Självklart är Call-To-Action det näst viktigaste elementet (först kommer titeln) i header-designen. Med en CTA kan du övertala besökare att vidta åtgärder och anmäla sig till en tjänst, söka efter artiklar, prenumerera på ett nyhetsbrev, köpa en produkt och mycket mer.
Men du måste vara försiktig med placeringen av CTA. En bra strategi är att A/B split-testa dina header-designs för att hitta den perfekta färgkombinationen och rätt plats att placera CTA:n.
Välj en matchande menystil
Navigationslänkar är också viktiga men behöver inte nödvändigtvis vara en del av din header-design. Du kan utforma en rubrik med ett dolt navigationssystem som bara blir synligt när du scrollar nedåt. Eller till och med dölja navigationen i en hamburgermeny.
Det beror på vilka mål du vill uppnå med din webbplats. En tydligt synlig navigering hjälper besökarna att snabbare se andra sidor på din webbplats. Om du vill undvika att distrahera besökarna och uppmuntra dem att läsa mer om en produkt kan du överväga att dölja navigeringen.
Skapa kreativitet men följ standarder
Designers uppmuntras ofta att vara kreativa när de utformar webbplatser. Men använd alltid standardiserade riktlinjer för design också.
Till exempel bör du använda mått när du lägger till logotyper, knappar och ikoner. Och följ också grundläggande riktlinjer för webbdesign för att hitta lämpliga placeringar för varje element. Detta hjälper till att skapa enhetlighet i hela webbdesignen.
Ta en titt på exempelrubrikerna nedan för att se hur det går till.
PenzGidroMash
Tro det eller ej, men det här är en webbplats för ett företag som tillverkar industriell utrustning i Ryssland. Och den har en av de mest kreativa webbplatsrubrikerna vi har sett.
Även om de flesta företagswebbplatser brukar satsa på gammaldags och klassisk webbplatsdesign är det här företagets moderna designstrategi uppfriskande.
Allt från titeln, typsnittsvalen, färgerna och särskilt användningen av bilder för att skapa en 3D-liknande design gör den här webbplatshuvudet verkligen till en lektion i effektiv webbdesign.
Creative Dreams Design
Den här webbplatshuvuddesignen är ett bra exempel på design som säger ”mer med mindre”. Det ultraminimalistiska utseendet med en enkel animerad illustration hjälper den här webbplatsen att uppnå ett viktigt mål – att visa upp kreativitet. Och det är precis vad en webbplats för en kreativ designbyrå bör syfta till.
Den enkla uppmaningen till handling, den förtjusande illustrationen, animationerna och färgerna ovanpå den rena vita bakgrunden ger den här rubriken den uppmärksamhet den förtjänar.
Digital Horizon
Webbplatsen för investeringsbolaget Digital Horizon erbjuder en bra lektion i rubrikens bakgrundsdesign. Den ger en stor del av sitt huvudutrymme till sin animerade bakgrund, som passar perfekt till företagets namn och koncept. Och lyfter också fram rubriken och uppmaningen till handling ganska bra.
Användning av bilder och animerade bakgrunder är fortfarande relevant. Du måste bara hitta rätt sätt att gifta ihop rubrikdesignen med företagets varumärke.
Okb Interactive Studio
En djärv rubrikdesign behöver ett stort djärvt typsnitt för rubriken. Den här erfarenhetsdesignstudion har hittat den perfekta kombinationen av titelteckensnittet och teckensnittsstorleken för att skapa en verkligt minnesvärd rubrikdesign.
Det handlar inte bara om storleken på rubriken eller teckensnittsvalet. Utan även hur texten avslöjar delar av bakgrunden och döljer menyn, länkarna och till och med företagsnamnet för att ge rubriken dess välbehövliga utrymme är det som gör den här designen anmärkningsvärd.
IdeaBuddy
När det kommer till att designa rubriker för SaaS-landningssidor är det ibland lättare att bara visa vad appen kan än att bara säga det. Idévalideringsappen IdeaBuddy använde detta enkla tillvägagångssätt för att utforma en effektivare rubrik.
Inom den kreativa användningen av illustrationer i rubriken och på hela webbplatsen används även skärmdumpar av appen för att visa vad tjänsten erbjuder.
Together For Animals
När man utformar webbplatser och rubriker är det viktigt att införliva designpsykologi. Särskilt när det gäller webbplatser för ideella organisationer och välgörenhetsorganisationer spelar sådana strategier en avgörande roll för att framkalla känslor.
Hejtsidan för den här webbplatsen för välgörenhetsorganisationer för djur använder sig av designpsykologi på ett bra sätt genom att lägga till en enda bild som berör besökarnas hjärtan och själar.
Stuart
Användning av glidare är ett annat populärt koncept som används vid utformning av webbplatsers rubriker. De gamla sätten att använda bildslidare håller dock långsamt på att blekna bort från moderna vi-designs. Den här webbplatsen för leveransservice tog det gamla sliderkonceptet till en ny nivå.
Den använder en perfekt kombination av högkvalitativa bilder med transparenta bakgrunder, pastellfärger och animerade rubriker för att skapa en mycket underhållande header-design med en innehålls-slider.
Handwrytten
Handwrytten är en mycket unik tjänst som erbjuder sig att leverera dina skrifter som handskrivna lappar. Att utforma en rubrik för en sådan tjänst är verkligen en utmaning. Och de verkar ha skapat den perfekta designen för att visa upp företaget på ett attraktivt sätt.
Med ett verkligt exempel på en handskriven lapp omgiven av kreativt animerade illustrationer fångar rubriken perfekt syftet och målet med denna tjänst och företaget.
Wild Side Design
Den här webbplatsrubriken är ett annat bra exempel på att använda illustrationer för att berätta en historia. I det här fallet använder sig rubriken av en handgjord teckning som visualiserar företagets budskap. Som tillhandahåller varumärkesdesign för företag för att ta dem från vanliga företag till storhet.
Det är en lektion om hur en unik illustration kan lägga till så mycket personlighet till en webbplatsheader.
Stef Ivanov
Freelance-designern Stef Ivanovs portfoliowebbplats har en av de mest unika header-designerna som gör att den sticker ut. Det är inte bara den fantastiska skissritningen av hans foto eller de surrande bina runt hans huvud. Utan främst på grund av hur han använder alla element, typsnitt, färger och vitt utrymme tillsammans för att skapa en minnesvärd upplevelse.
Pragmatic Brains
Det är svårt att sammanfatta ett helt företag eller visa upp alla tjänster hos en byrå på det begränsade utrymmet som finns tillgängligt på headerområdet. På något sätt har Pragmatic Brains webbplats lyckats inkludera alla deras konsulttjänster i rubriken. Utan att skräpa ner designen.
Vid första anblicken ser det ut som en vanlig webbplatsheader med en bunt illustrationer. Men det magiska händer när du håller muspekaren över dessa kortdesigns. De avslöjar detaljer om varje tjänst som byrån erbjuder. Ganska smart och effektiv header-design.
AirPods Pro
Vi kan inte ignorera de briljanta webbplatsdesignerna för Apples produktsidor, särskilt inte när vi skapar en lista över kreativa header-designs. Under årens lopp har Apple bemästrat konsten att fånga användarnas uppmärksamhet med sina otroligt förenklade webbplatsdesigns.
Headerdesignen för produktwebbplatsen för AirPods Pro har också en radikal design. Den är enkel och låter användarna snabbt förstå vad webbplatsen handlar om.
Pixelwithin
Den här webbplatsens header-design passar perfekt med varumärkesbudskapet hos dess webbyrå. Den använder en mycket förenklad rubrik utan många färger, bilder eller text för att visa kraften i minimalistisk och ”okomplicerad” design.
Sheetal Ice Cream
Vid hemsidan för det här indiska glassföretaget ser lika välsmakande ut som deras produkter själva. Särskilt rubriksektionen på webbplatsen lyckas effektivt locka besökare med en ren layout med en färgglad bakgrund som lyfter fram bara en enda bild av glass. Ingen skulle kunna motstå att scrolla ner på den här webbplatsen, även om man är laktosintolerant.
Courses Australia
En av de mest effektiva header-designerna på vår lista tillhör en australiensisk webbplats som fungerar som en sökbar katalog över online-kurser som tillhandahålls av australiensiska högskolor.
Den enkla designen som sätter söksystemet i centrum fungerar som en effektiv uppmaning till handling. Följt av indexet som låter användarna utforska kurser inom olika ämnen, branscher och kvalifikationsnivåer.
Det här är bara några av de många fantastiska header-designs vi har sett. Fortsätt att utforska webben för att hitta fler fantastiska konstruktioner. Kolla också in våra mallar för wireframing av webbplatser och Sketch-webbplatsmallar för mer inspiration.