En webbplatshuvud är ofta det första som en användare ser. Det kan göra eller bryta användarupplevelsen, din branding och mycket mer!
För att behålla användarna och hålla dem rörliga genom designen måste du skapa en webbplatshuvud som väger. Och inte bara på hemsidan. På varje enskild sida av designen. (Kom ihåg att ett stort antal användare inte går till din hemsida först.) Så här gör du det.
1. Använd en fantastisk bild
En bra bild gör alltid ett förstklassigt första intryck. Oavsett om du väljer ett foto, en video, en animering eller någon annan? Konst? element, varje rubrik borde leda med bilder som användare kommer att vilja titta på.
Rubrikbilden är mer än bara en fin bild. Det är ingången till allt innehåll på den sidan, och kanske till och med innehållet djupare i designen.
En bild i sig är en bra utgångspunkt, men du måste para det med andra element för att verkligen få ut det mesta av innehållet. Andra element som kan visas i en rubrik inkluderar:
- Text eller rubrik
- Logotyp eller varumärkesidentifierare
- Knapp eller uppmaning till handling
- Navigationselement
- Sök
Välj bilder som är skarpa, högupplösta och ger mycket kontrast för andra element som text eller knappar. Folk älskar att se ansikten, så överväga att visa att människor använder eller interagerar med din produkt eller tjänst om möjligt. Vill du visa upp ditt senaste portföljprojekt? Använd en mockupmall för att göra det mer intressant och engagerande.
2. Inkorporera navigationselement
Det finns ingen anledning att du måste tänka på rubriken och navigering som separata element. De är ofta en del av samma visuella koncept. Oavsett om du älskar en fullständig menynavigering eller något som dyker upp från en hamburgerikon, ska navigationselement vara en del av huvuddesignplanen.
Och medan du tänker på rubriken och navet, överväga ett klibbigt navigeringsmönster också. Även om användarna kommer bort från huvudhuvudet - som kan vara en liten som navigeringsfält eller så stor som en helskärmskärm - kan de snabbt komma runt platsdesignen.
Navigationselement i rubriken kommer att göra något annat som du kanske inte förväntar dig. Eftersom dessa ofta är mindre bitar av text eller ikoner kan det hjälpa till att skapa hierarki inom rubriken och visa hur användarna ska interagera med designen.
3. Skapa distinkt meddelande
Att bara hoppa en bra bild i rubriken räcker inte. Vad står det?
Tänk på hur meddelandet i rubriken kommunicerar med användarna.
- Berättar dom dem vad de ska göra eller vad man kan förvänta sig av innehållet på sidan?
- Kommunicerar alla element ett enkelt och enhetligt meddelande som är lätt att förstå?
- Låter det användarna veta vilka åtgärder som ska vidtas på sidan eller var du ska klicka på nästa?
Se till att kombinera flera element för att skapa en övergripande effekt med ett enda meddelande.
4. Försök med stor typografi
Överdimensionerad typografi är ett utmärkt sätt att lägga tonvikten på en rubrik. Även om orden är enkla platsidentifierare kan det med hjälp av djärv bokstäver rita ögat överst på skärmen innan användaren börjar läsa annan information.
Även om typografiplaceringar kan variera, försök hålla sig till två grundläggande placeringar för typografi i rubriken.
- Hemsida alternativ med mer typografi eller mer dramatisk bokstäver eller annan typ än på andra sidor.
- Alla andra sidor alternativ med en enkel typ ram som är konsekvent på alla inre sidor.
5. Tänk på läsningsmönster
Läsa på webbplatser tenderar att följa tre olika mönster av ögonrörelse, enligt forskningen från Nielsen Norman Group. Och alla dessa läsmönster justeras sedan för att redogöra för den uppgift som användaren fokuserar på vid läsning, vilket i enkla termer är en gruppering av relaterade delar i det visuella flödet.
Båda studierna av hur användarna tittar på och smälter innehåll är viktiga eftersom de kan hjälpa dig att förstå hur och var du ska placera element i designen och i synnerhet i rubriken.
Börja med att tänka på de grundläggande mönstren:
- F-Mönster: Användare läser över toppen, sedan halvvägs över sidan och slutligen vertikalt ner i vänster sida i en F-form.
- Gutenberg Diagram: Det finns fyra aktiva zoner för läsning, som börjar med två horisontella stopp över toppen från vänster till höger, sedan från höger till vänster och längst ner till vänster och över botten. (Formar en z-form.)
- Z-Mönster: Ögonet rör sig fram och tillbaka från vänster till höger och tillbaka från toppen till botten av designen som bildar flera z-mönster.
Placera element - särskilt nyckelelement - i de hetaste zonerna i de gemensamma läsningsmönstren för den starkaste sannolikheten för användarinteraktion. Tänk sedan på var användaren sannolikt ser nästa ut - för en åtgärd som är relaterad till innehållet som bara smälts.
6. Inkludera ett klickbart element
Är din hemsida header image interactive? Innehåller det klickbara (eller tappbara) element för att uppmuntra användarengagemang?
En rubrik kan vara den perfekta platsen för en uppmaning till åtgärdsknapp eller enkel åtgärd som en e-postadress samlingsformulär. Gå inte överbord med element att klicka på eftersom det kan ta bort det övergripande meddelandet, men ett enkelt one-action-element kan vara effektivt i detta område av designen.
Är du osäker på vilket element huvudet ska innehålla? Tänk på en önskad åtgärd som är konsekvent i hela designen med en knapp som alltid är tillgänglig (ungefär som navigering). En kundvagnsknapp, kontoinformationstillgång eller en kontakt oss-knapp är bra alternativ att överväga.
7. Använd enkla lager
Hur drar du alla element som nämns ovan (eller små grupper av dem tillsammans) i rubriken? Tricket är enkelt lager. Den bästa rubriken - en rubrik som wows användare - ser enkelt ut. Det följer reglerna för designteori och använder ett dominerande element för att locka användare och stödja designtekniker för att hjälpa dem att möta verkningsfulla mål.
Att lägga objekt är ett sätt att uppnå detta.
Inte bara kommer enkla lager att hjälpa dig skapa separata utrymmen för varje element, men det kommer också att ge visuellt fokus för användaren. De kommer att veta var man ska börja med designen och vilka element som förtjänar deras uppmärksamhet och vilka element som kan skummas över.
Det sker inte alltid med ett första försök heller. Flera revisioner och test är ofta nödvändiga för att skapa en grupp av element som fungerar effektivt och wow-användare högst upp på en sida.
Slutsats
Samtidigt som man skapar en hemsidahuvud är något som ofta ligger i framkant av konstruktionsprocessen, och jobbar på sidhuvudet för inre sidor blir ofta borttappad i processen. Innehållet på? Inuti? sidor kan vara lika viktiga som hemsidan eftersom många användare kommer till din webbdesign genom att söka, inte från att skriva in en webbadress och följa navigeringslänkarna som planlagdes av designteamet.
Tänk på båda huvudtyperna självständigt och tillsammans för att uppnå konstruktionsharmoni, enhet och visuellt som wows användare när de landar på sidan.