Förr hänvisade en ”rubrik” inom webbdesign till den ständigt närvarande remsan högst upp på webbplatser som innehöll logotypen, navigeringsfältet och kanske några kontaktuppgifter och ett sökfält. Numera avser en ”rubrik” oftare hela utrymmet ovanför viken på startsidan.
Om inte någon har hittat din webbplats genom ett blogginlägg som delats på sociala medier eller genom en hänvisning på en annan webbplats, är chansen stor att de kommer in på den via startsidan. Och det första de kommer att se är den utmärkta fastigheten högst upp, som är helt öppen.
Jag har tidigare skrivit om hur besökare reagerar bättre på en förutsägbar placering av vissa element på din webbplats (t.ex. logotypen och CTA). Genom att utforma en webbplats med målet att uppfylla deras förväntningar och öka deras bekvämlighet genom att göra upplevelsen något mer förutsägbar kan du effektivt förbättra klick- och konverteringsfrekvensen.
Tänk nu på det utrymme för rubriken på startsidan.
De flesta människor har förlitat sig på att startsidorna ska ge dem en överblick i fågelperspektiv över vad ett företag eller en webbplats handlar om, vilket innebär att du inte har råd att slösa bort den här möjligheten att leva upp till den förväntningen. Självklart kan designen av startsidans rubrik vara unik för ditt varumärke, men de element som finns i den bör verkligen inte vara det. Besökare förväntar sig att det inte är nödvändigt att scrolla för att ta reda på vad en webbplats kommer att göra för dem. I huvudsak bör din rubrik vara en 10-sekunders berättelse som bevisar för dina besökare vilket värde webbplatsen kommer att vara för dem.
Så, vad ska du göra med det här utrymmet för att fånga dina besökares intresse?
Låt oss prata om några av trenderna inom rubrikdesign 2017, vad du kan göra för att använda dig av den här väl synliga fastigheten, och ta en titt på några intressanta exempel på rubriker längs vägen.
14 trender inom webbdesign för rubriker 2017
Det är inte så att dina besökare är omedvetna om att de kan scrolla nedåt på en sida eller klicka sig igenom en navigering för att lära sig mer om varumärket bakom en webbplats. Men varför skulle de behöva göra det? Det finns tillräckligt med utrymme i rubriken för att ge ett kortfattat budskap som berättar allt de behöver veta. Och om 50 ord eller mindre inte räcker, kommer bakgrundsbilden eller designen att kommunicera resten av historien.
Högst av allt kan startsidans rubrik göra eller bryta dina besökares första intryck, vilket är anledningen till att det är så viktigt att lyckas med detta avsnitt.
Om du kämpar med att hitta ett sätt att starta din webbplats med en smäll, kanske du kan hitta lite inspiration i följande trender för design av rubriker för 2017:
Oversized Hero Image
Tack vare den modulära stilen när det gäller att utforma webbplatser för att de ska vara responsiva är de flesta designerna nu uppdelade i tydliga block och sektioner. Den här designstilen lämpar sig bra för dessa hjältebilder i full bredd som finns på så många webbplatser.
Tag till exempel Cleverbird Creatives webbplats. Den använder sig av en enda slående bild överlagrad med enkel text för att välkomna besökarna. Det är ingen tvekan om vad de vill åstadkomma här: förenklad skönhet.
Sliding Images
Jag tror att det fanns en tid, inte alltför långt tillbaka i tiden, då många av oss ifrågasatte slidern som ett användbart designelement. Många formgivare har dock gjort ett bra jobb genom att använda det i rubriker. Det finns glidbilder som automatiskt rullar från en vacker högupplöst bild till nästa och det finns sådana som Pierres som ber besökarna att själva ta kontroll över upplevelsen.
Transformativa parallaxbilder
Parallaxrullning växer sig fortfarande stark och rubrikerna har visat sig vara den perfekta platsen för att använda den här typen av visuell ”illusion” i webbdesign. På senare tid har man dock sett formgivare som ger sina parallaxrullningar en transformativ kant, förmodligen för att överraska besökarna med det oväntade resultatet av rullningen. Den australiensiska UX-designbyrån August har gjort just det med sin rubrik.
Videobakgrund
Videobakgrunden är en annan av de senaste trenderna som verkligen fungerar bäst när den tillämpas på startsidans rubrik. Den här från Le 28 gör ett bra jobb med att sätta stämningen för restaurangens webbplats och visar videor från restaurangens framsida och baksida.
Hidden Navigation
Och även om man skulle kunna hävda att hamburgermenyn hör hemma på webbplatser som ses på mobila enheter (vilket ursprungligen var tänkt), finns det något att säga om vad den sortens navigationsminimalism gör för rubriken. Webbplatsen +rehabstudio är ett bra exempel på detta. Genom att gömma undan navigeringen dras ditt omedelbara fokus till den spännande visuella bilden inom plus-symbolen… och sedan inser du att det finns små inslag av animationer som omger den.
Märkesmaskot
Om rubriken är platsen för att introducera besökarna till din webbplats, finns det då inget bättre sätt att inleda den än att presentera dem för de ”karaktärer” som de kommer att möta på vägen? Om din webbplats använder sig av maskotar – som WPMU DEV:s webbplats gör – är det här rätt tillfälle och plats att visa upp dem.
Typografi som fångar ögonen
Det finns mycket som kan göras för att ge typografin på din webbplats en ansiktslyftning. Ibland handlar det dock inte om att välja det finaste kursiva teckensnittet för att kasta det i ansiktet på folk. Om du tittar på Slack-exemplet ovan ser du att det handlar om storleken på typsnittet. Det finns inget speciellt med den typografi som de har valt, men den är så ren och tydlig. Det tillsammans med storleken på huvudbudskapet är det som gör den så iögonfallande.
Innehåll först
För webbplatser som i första hand fokuserar på att leverera mängder av innehåll till besökarna (tänk på alla större nyhetssajter eller bloggar), kommer en innehållsorienterad strategi för rubriken att vara den mest meningsfulla. Det är verkligen ingen idé att pressa orden här. Människor har kommit till din webbplats för att läsa ditt innehåll, de behöver inte bli förvirrade av ytterligare läsning på startsidan, så du kan gå rakt på sak som Glamour gör.
Produkten först
I samma anda behöver e-handelssajter inte bry sig om att använda rubriken för att skriva en catchy rubrik eller tillhandahålla en videoförklaring om företaget. Besökarna vet vad de har kommit till webbplatsen för, så du kan gå rakt på sak. Till skillnad från innehållsleverantörer kan dock produktåterförsäljare använda denna utmärkta fastighet för att visa upp sina bästsäljande produkter eller de senaste utgåvorna för att locka besökare framåt som Apple gör.
CTA Front-and-Center
Det kan komma en tid när din webbplats har något riktigt speciellt att visa upp för besökarna, något som du vill att de ska ladda ner eller köpa. Även om det kanske inte är huvudattraktionen på din webbplats kan du använda rubriken antingen tillfälligt eller permanent för att framhäva denna speciella uppmaning till handling, som bloggaren Everywhereist gör med sin bok.
Vibranta färger och texturer
Kanske är en av de trevligaste sakerna med Google Material Design att vi är villiga att använda mer levande färger, lager och gradienter i webbdesign. De behöver inte längre vara hänvisade till call-to-action-knappar, de kan användas för hela block på webbplatsen, som Stripe gör med sin färgglada och texturerade rubrik.
Animation
Det finns absolut inget fel med att ha en statisk rubrikdesign för startsidan, särskilt inte om du vill att fokus ska riktas mot en CTA eller video. Håll den enkel så att det inte finns några distraktioner som hindrar besökarna från att vidta den åtgärd du ville att de skulle göra. Men för webbplatser som vill ha ett intressant sätt att dela sitt budskap med läsarna kan animationer vara ett klokt val. Baianat använder en liten animation för att dela ett antal budskap inom samma utrymme, vilket gör att det inte ser rörigt eller överfyllt ut med information.
Geometrisk design
Geometrisk webbdesign råkar vara riktigt stor just nu, eftersom den lämpar sig väl för de logiska och rena linjer som behövs för responsiv design. Så det är ingen överraskning att vi ser fler webbplatser, som den här för Perspective API, integrera geometriska element i rubrikens design. Det finns andra, som Stripe och WPMU DEV, som använder diagonala linjer för att skapa ett unikt och oväntat visuellt landskap för besökarna.
Experimentell
Slutligt kommer vi till experimentell headerdesign. Nyckeln till dessa brukar inte vara att rubriken ska vara utomordentligt konstig och ovanlig. Det skulle vara alltför distraherande för besökarna. Istället bör ditt fokus ligga på att skapa någon oväntad effekt som orsakas av den enkla rörelsen över rubriken.
Tag till exempel Teamgeek-designen. Du kan se att det är något ”konstigt” med logotypen och meddelandet i mitten av sidan, men det är inte förrän du engagerar dig i det som du inser att det finns en speciell twist inbyggd.
Vidare
Som du kan se finns det en mängd olika sätt att utforma en rubrik för en WordPress-webbplats. Om du tittar noga på exemplen ovan kommer du dock att märka att formgivarna var mycket strategiska när det gäller vilken stil av rubrik de använde och vilka element som ingick i den. När det är dags att utforma en rubrik för ditt nästa webbplats projekt, fundera på om du behöver följande:
- Logo
- Traditionell vs. dold
- Hero rubriksektion vs. Gå direkt till innehållet
- Tagline eller uppdragsbeskrivning
- Kontaktinformation
- Länkar till sociala medier
- Sökfältet
- Multilingual toggle
- Växelkorg
- Marknadsmaskot
- Stockfotografi vs. Verkliga fotografier av företaget, personerna eller produkten
- Statisk bild vs. glidande bilder vs. bakgrundsvideo
- Inbäddad promovideo
- Knapp för att komma till handling
- Kontaktformulär
- Hello bar
Du kan hitta andra objekt som hör hemma i denna övre rubrik på din startsida också. Det handlar egentligen bara om vad som är mest meningsfullt för din webbplats. Med andra ord, vilka element kommer att berätta ditt varumärkes historia, utbilda och engagera din publik direkt från början och inspirera tillräckligt med förtroende för att driva dem framåt genom din webbplats?
Taggar:
- design
- rubriker