En av de första sakerna du gör när du utformar en webbplats är att bestämma vad den första biten av pixlar som användarna ser ser ut. Du måste ta tag i deras uppmärksamhet och kommunicera ditt meddelande ovanför veckan eller riskera den personen som flyttar vidare till sin nästa öppna flik.
Tyvärr faller många av oss i förutsägbara mönster för denna del av webbplatsen. Vi använder samma gamla tricks, former och plugins och kommer upp med ett resultat som kan se bra ut, men det är inte riktigt så spännande. Idag tar vi en kort titt på hur du kan göra dina huvudbilder mer intressanta. Längs vägen ser vi några levande exempel från webbplatser som har implementerat dessa tekniker framgångsrikt.
Standard, Boring Header Image
Alltför ofta, när jag startar ett projekt med wireframing, börjar jag med något sånt:
Förse mig inte fel, det här är en rockformig layout, och anledningen till att den är så populär är att den fungerar väldigt bra. Men det finns en tid för att gå på säker väg och en tid för att kreativt förgrena sig och utforska nya idéer.
Särskilt är den del som jag blir uttråkad av rubrikbilden (jag använder termen? Header? Löst att mena den övre delen av sidan). Det är bara en stor statisk rektangel. Om det är dynamiskt är det vanligtvis något så enkelt som en jQuery bildreglage. Än en gång, en av mina favorit design tricks, men inte exakt en bra representation av? Ur lådan? tänker vid denna tidpunkt.
Så hur kan vi komma ut ur rutan att springa till den trösta rektangeln varje gång vi behöver en stor, djärv bild i vår rubrik? Om vi verkligen ger problemet någon tanke, presenterar några lösningar sig enkelt.
Ändra upp det
Här är några snabba tankar om hur du lägger till lite variation i dina headerbilder. Kan du tänka på några andra idéer?
Ändra formen
Det första som kommer att tänka på är att dike rektangeln. Försök använda en kvadrat, en cirkel, en triangel eller till och med en serie bilder. Du kan till och med dike behållaren alla tillsammans och försöka placera en ikon eller grafik direkt på din webbplatsbakgrund.
Också, inte bara fångas upp på vanliga former. Prova att skapa en bild som använder en mer abstrakt, flytande form. Böj det runt innehållet för någon riktig kreativitet.
Gör det mer dynamiskt
Gå bortom bildskärmen jQuery. Försök att tänka på ett nytt sätt att du kan få en användare att interagera med bilden. Använd klickning, rullning, musrörelser och mer för att omvandla bilden på ett intressant sätt.
Bryta ut
Ett annat riktigt enkelt sätt att göra huvudbilden mer intressant är att tillåta innehållet som är inuti det att bryta ut eller innehållet som är utanför att bryta in.
Jag använde denna teknik med en app skärmdump i en ny artikel Design Tricks.
Något annorlunda varje gång
Ett populärt trick som du ser Apple använder ofta på sin hemsida är att ha en serie huvudbilder på rotation. När du uppdaterar sidan tar den slumpmässigt från en uppsättning av tre till fyra olika alternativ.
Det gör inte bara din webbplats mer engagerande för användarna, det hjälper dig att spåra vad som fungerar bäst och vilka användare som tycks vara mest intresserade av det. Om du tittar på din statistik kan du spåra vilken bild som får flest klick och sedan skapa en ny en strategi baserad på den kunskapen.
Exempel i det vilda
Nu när vi har några idéer på bordet för att närma sig toppbilder på ett mer intressant sätt, låt oss se om vi kan hitta några exempel på designers som följer dessa tekniker.
Co-Work
Ett av mina favorit exempel som jag har sett nyligen är på sidan Co-Work. Bildreglaget högst upp på denna sida är i hjärtat av samma gamla standardteknik. Emellertid adderade formgivaren några hak som ger den en oregelbunden form.
Lägg märke till hur mycket mer integrerad den här bilden känns med resten av innehållet än din typiska rektangel. Den kurver runt logotypen, navigering och kroppskopia på ett sätt som ger webbplatsen en nästan abstrakt modern konst som känns som perfekt för de rena, snygga designade arbetsutrymmena som webbplatsen marknadsför.
Detta kräver inte en överaktiv fantasi eller så mycket arbete att genomföra, det är bara resultatet av lite extra ansträngning som ger webbplatsen en titt som är helt egen.
Adrian Baxter
Webbutvecklare Adrian Baxter har ett annat bra exempel på en unik header-bild på sin webbplats.
Bortsett från den fantastiska idén att slåss av en zombiehorde med bara ett Mac Bluetooth-tangentbord, är den här bilden annorlunda eftersom den har delats upp i fyra separata paneler. Funktionellt finns det verkligen ingen anledning till detta, men ur ett designperspektiv är det en fin touch. Lägg märke till hur det speglar arrangemanget av länkarna nedan, ett klassiskt exempel på repetition i design.
Det roliga slutar inte där, men Adrian tog det ett steg längre genom att lägga till en parallax-effekt som skiftar scenen när du flyttar musen runt webbplatsen. När scenen skiftar, blöder bilder ut ur en ram och in i en annan. Det är en riktigt fin effekt!
Sony Tablet S
Det mest imponerande innovativa exemplet jag kunde hitta var platsen för Sony Tablet. Från och med ser webbplatsen ut så enkelt att rubrikbilden visar en slags veckad ström som slutar i tabletten. Vid denna tidpunkt var jag inte riktigt imponerad och trodde även att webbplatsen såg lite för rotig.
När du rullar ner (eller tryck ner knappen) blir webbplatsen riktigt snygging väldigt snabbt. Tabletten stannar mitt på skärmen när resten av innehållet flyttas. Den kopplar från den vikta strömmen och börjar snurra och vända i 3D-utrymme.
När du kommer till en ny innehållssektion, flipper tabletten i en pose som integreras med utformningen av det området.
Det går under något innehåll, över andra delar, överläggningar dyker upp och pekar på funktioner, händer kommer ut och använder pekskärmen; Resultatet är super imponerande och skapar en fantastisk, dynamisk och interaktiv webbläsarupplevelse som bara kräver bläddring.
Kyan
Den här webbplatsen är mycket liknande i konceptet till Sony Tablet-sidan, bara horisontellt. Den ursprungliga positionen för bildreglaget visar en iPhone, en tablett och en datorskärm som sitter runt olika designverktyg. Jag älskar den platta pappersliknande illustrationstilen.
När du trycker på pilknappen till höger, flyger alla objekt som omger enheterna i mitten upp och bort från skärmen en efter en, så skärmsskiftet och flyttar enheterna till en ny scen:
Detta är mycket mer imponerande, unikt och engagerande än din typiska reglage. När du först ser effekten kan du inte låta bli att klicka på knappen några gånger för att se den igen.
Slutsats
Syftet är att hjälpa till att få din hjärna ur rutan att infoga samma gamla stora rektangelbild på toppen av dina mönster. Med lite tanke och ansträngning kan du enkelt uppnå något mer unikt och engagerande.
Detta skrapar knappt ytan på vad som görs för närvarande med headerbilder. Har du sett några andra intressanta exempel? Har du också kommit med några bra idéer själv? Lämna en kommentar och meddela oss.