Webbplatslayouter

Bästa exempel på webbplatslayout och idéer


Layouten på din webbplats kan definiera dess framgång. Få fel design så att människor blir förvirrade och desorienterade och förstör användarupplevelsen. De kommer sannolikt att missa kritiskt innehåll eller inte se en uppmaning.

Men vikten av din layout går längre. Designen måste passa på webbplatsens innehåll. Med rätt layout kan ditt innehåll lysa, men med fel innehåll kan det bli trångt, svårläst och oinspirerande.

Layouten på din webbplats kan definiera dess framgång. Få fel design så att människor blir förvirrade och desorienterade och förstör användarupplevelsen. De kommer sannolikt att missa kritiskt innehåll eller inte se en uppmaning.

Men vikten av din layout går längre. Designen måste passa på webbplatsens innehåll. Med rätt layout kan ditt innehåll lysa, men med fel innehåll kan det bli trångt, svårläst och oinspirerande.

I slutändan har alla webbplatser ett rutnätssystem som sitter under webbdesignen. Dessa kolumner och rader ger ditt innehåll ordning och styr användarens öga runt sidan. Inom dessa rutnät kan du skapa en mängd olika tillvägagångssätt. Varje webbplats har ett underliggande rutnät som designern har byggt layouten på.

Men när det gäller att välja rätt layoutdesign för din webbplats finns det flera vanliga utgångspunkter som du kan använda för att börja.

Det är värt att säga att du inte behöver hålla dig till en strategi. Du kan enkelt kombinera flera layouter på din webbplats eller till och med på en enda sida, t.ex. en målsida.

Som sagt, låt oss titta på de vanligaste layoutalternativen som finns tillgängliga för dig.

Vi börjar med det mest enkla layoutmönstret av alla, den enda kolumnen.

1. Layout med en kolumn

Även om den mest okomplicerade layouten du hittar har den växt betydligt i popularitet sedan tillväxten av mobilwebben. Det beror på att webbplatsen kan använda samma design på mobila enheter, surfplattor och stationära datorer, vilket minskar utvecklingstiden.

Dessutom fungerar layouter med en kolumn bra för att skapa en bra läsupplevelse eftersom det fokuserar användaren på innehållet utan distraktioner till någon sida. Det är därför bloggsidan Medium antar det för alla deras artiklar.

Medium använder en enkel kolumnlayout för att förbättra läsupplevelsen.

Slutligen, i kombination med bilder, kan en enkel kolumnlayout göra en kraftfull inverkan eftersom den låter dig visa dessa bilder så stora som möjligt. The Ocean Resort är ett bra exempel på detta i handling.

Ocean Resort använder hela bredden på sin en-kolonn design för att maximera inverkan av bilder.

Med dessa faktorer i åtanke bör du överväga att använda en enda kolumnlayout om du vill att folk ska spendera mycket tid på att läsa på din webbplats eller om du har bilder som behöver rummet för att lysa.

På grund av dess enkelhet finns det få utmaningar kring en enda kolumnlayout. Du måste dock ta hänsyn till flödet av information noggrant. Vilken ordning behöver användaren för att se ditt innehåll?

Till exempel är det bra att ge användarna en sammanfattning av vad sidan täcker högst upp för att rita in dem och erbjuda en tydlig uppmaning mot slutet.

Tänk också på hur du kan hålla användaren rulla ner på sidan. Layouter i en enda kolumn tenderar att vara längre, och det är inte alltid uppenbart för användaren att det finns mer innehåll under vikningen. En visuell indikator, till exempel en pil, kan hjälpa.

Om en enkel kolumnlayout verkar lite begränsande, men du fortfarande har mycket innehåll att kommunicera, överväg att anta en design som fokuserar på innehållet.

2. Innehållsfokuserad layout

Webbdesigners använder ofta den innehållsfokuserade layouten på nyhetssajter eller bloggar, och den har vanligtvis en primär kolumn för innehåll och en eller flera sidokolumner för ytterligare information.

Fördelen med denna layout är att den kan hjälpa dig att hantera linjelängden på det centrala innehållet genom att variera bredden på sidokolumnerna. Det betyder för om textens längd är för lång eller kort blir det svårare att läsa, så minskar förståelsen och behåller informationen.

Men gjort rätt, är den innehållsorienterade layouten idealisk för alla kopieringscentrerade webbplatser. Hemligheten är att dela upp innehållet i denna layout i små, lätt att smälta bitar.

Inläggen på Boagworld bryter upp innehåll med rubriker, listor, bilder och utdragande citat.

Till exempel, på min blogg, du kommer att upptäcka att mitt genomsnittliga inlägg pekas av rubriker, listor, bilder och drar offert. Allt detta är tekniker för att hjälpa användaren att skanna artikeln, hitta delar som är av intresse.

Sidospelarna måste också noggrant övervägas. Det är viktigt att webbdesignern placerar rätt innehåll i dessa kolumner och att de visuellt har rätt viktning.

Problemet är att användare förväntar sig att hitta sekundärt innehåll i sidokolumnerna och så ge dem mindre uppmärksamhet. Därför, om du planerar att inkludera något som en uppmaning till handling i en sidokolumn, måste den vara tillräckligt stark för att uppmärksamma.

Lägg till exempel märke till hur Smashing Magazine använder en färgstark illustration av en katt för att fästa uppmärksamhet på deras formulär för nyhetsbrev i höger kolumn.

Smashing Magazine använder sina sidokolumner för att ge sekundär information om inlägget.

Inte för att den innehållsfokuserade layouten är lämplig för varje sida på din webbplats. Webbplatser kopplar ofta samman denna layout med en tidningsstil.

3. Tidskriftslayout

Som namnet antyder används denna layoutmetod i stor utsträckning i tidskrifter eller nyhetssidor för att visa ett stort antal olika berättelser.

De är inspirerade av utskriftslayout och gör det möjligt att kombinera rubriker och bilder för att introducera berättelser. Det kan vara ett engagerande sätt att förmedla vad som i huvudsak är en lista över länkar.

Det är också en utmärkt layout för att markera innehåll som regelbundet ändras. Det är därför nyhetswebbplatser gillar The Washington Post så föredrar det.

Nyhetswebbplatser tenderar att föredra tidningen-stillayouten.

Emellertid är layouten inte utan sina nackdelar. En magasinlayout kan vara utmanande att svara, ofta kräver en fullständig designändring för mindre skärmenheter.

Denna webbplatslayoutstil kan också vara något överväldigande, med ett stort antal bilder och rubriker som ropar för uppmärksamhet.

Det mest effektiva sättet att ta itu med detta problem är att skapa en tydlig visuell hierarki. Med andra ord, göra några av “berättelserna” större än andra.

Genom att variera berättelsestorlekar leder de användarnas öga.

Lägg till exempel märke till hur Vogue webbplatsen fokuserar uppmärksamheten på den vänstra bilden genom att göra den betydligt större. De säger effektivt användaren var man ska titta först.

Det hjälper också att resten av användargränssnittet är enkelt, med ren typografi och enkla navigeringsfält. Om du ska använda magasinlayouten måste du arbeta hårt för att förenkla saker.

En annan möjlig nackdel med magasinlayouten är att det kan se “boxy” ut eftersom rutnätet som ligger under det är så synligt. Du kan dock mildra det genom att hämta inspiration från vår nästa layouttyp.

4. Grid Breaking Layout

Layouter som verkar bryta deras underliggande rutnät kan vara visuellt mycket mer intressanta än mer traditionella metoder. De är också utmärkta för att uppmärksamma vissa skärmelement som bryter ut från de vanliga kolumnerna.

Ta till exempel VR Arles Festival webbplats. Lägg märke till hur de uppmärksammar deras navigeringsfält genom att det överlappar två kolumner.

VR Arles-festivalen uppmärksammar deras navigeringsfält genom att den överlappar två kolumner.

En annan praktisk användning av rutnätbrytningslayouten är att använda den för att lägga över text på en bild på ett sådant sätt att uppmärksamma kopian. När en webbsida helt överlagrar text på en bild kan den ofta gå förlorad. Men som du kan se från exemplet nedan, om texten överlappar bilden delvis sticker den ut mycket mer.

Denna design väcker uppmärksamhet på texten och uppmaning genom att dela över den delvis med bilden.

Nackdelen med nätbrytande layouter är att de är svåra att få rätt, särskilt när webbplatser måste vara lyhörda. I själva verket är de flesta nätbrytande mönster inget sådant. Det finns fortfarande ett underliggande rutnät, och alla skärmelement passar in i det. Det är bara så att rutnätet är mycket mer komplicerat och det är inte så uppenbart. Det gör dem svåra att designa.

Deras inneboende komplexitet är därför du tenderar att se dem som används av designledda företag som designbyråer eller modemärken. De visar en grad av designförfining som tilltalar en viss publik.

Om en gridbrytande layout känns för komplicerad för din situation, men du fortfarande vill göra något mer innovativt och ovanligt, överväg en helskärmdesign.

5. Helskärmlayout

Layouter på helskärm passar, som namnet antyder, på en enda skärm utan att användaren behöver bläddra. Det gör dem idealiska för berättelser eller presentationer.

Ta till exempel, Arter i bitar. Denna rika och interaktiva presentationsupplevelse berättar historier om 30 engagerade arter.

Species and Pieces är en rik, interaktiv upplevelse som allt sker utan att behöva rulla.

Som du ser är layouter på helskärm bäst när de åtföljs av kraftfulla bilder. Det gör dem till ett utmärkt val för webbplatser som är rika på fotografering, illustrationer eller video.

Inte för att du måste hålla fast vid enkelskärmsstrategin. Vid första anblicken, Roux på webbplatsen för parlamentstorget verkar vara en helskärmswebbplats i samma mening som Species in Pieces. Deras underbara bilder fyller hela utsiktsområdet.

Denna webbplats använder hela visningsområdet för att visa upp sin fantastiska fotografering.

Det är dock möjligt att navigera längre ner på sidan för att se ytterligare innehåll. Tyvärr framhäver det en potentiell nackdel med denna layoutmetod. Användare inser inte alltid att de kan bläddra och så kan missa värdefullt innehåll.

Du måste också noga överväga hur layouten kommer att anpassas i olika storlekar. Exempelvis fungerar helskärmsmetoden på en mobil enhet? Kommer också bilder att beskära när skärmstorleken ändras eller helt enkelt krympa? Du kan snabbt hitta fokuspunkter för bilder som beskärs ur det synliga området i mindre storlekar.

Som sagt, om du har fantastiska bilder att visa upp, kommer du att kämpa för att hitta en bättre layoutdesign. Men om du vill ha alternativet att lägga till en beskrivning och anropa till handling tillsammans med dessa bilder, kanske du vill överväga en alternerande layout.

6. Växlande layout

Det växlande layoutmönstret är ett av de vanligare på webben. Du kommer att upptäcka att den består av en serie innehållsblock, som var och en har en två-kolumnslayout. Blocken består vanligtvis av en bild på ena sidan och text på den andra.

Det som ger det sitt namn är att bilden växlar sida. Så det första blocket kommer att ha innehåll till vänster och bilden till höger, medan nästa block vänder den layouten.

Det är en layoutmetod som särskilt föredras när man förklarar en produkts funktioner eller fördelar. Till exempel mjukvaruprodukter som Webydo kommer att använda bilden för att visa en funktion och sedan kopian för att förklara hur den fungerar eller nyttan.

Webydo alternativ text och bilder i olika innehåll blockerar hemsidan.

Inte för att dessa innehållsblock är begränsade till bilder och text. Ibland ersätter webbplatser bilden med en video. På samma sätt kan innehållets sida av elementet innehålla allt från ikoner till vittnesmål eller samtal till handling.

Till exempel, Convertkit innehåller ett vittnesmål och uppmaning vid sidan av texten i varje innehållsblock.

Convertkit inkluderar vittnesmål och uppmaningar till handlingar tillsammans med deras bilder.

En del av anledningen till att växelblock är så vanliga är att de är en enkel layoutmetod med få nackdelar. Om du behöver kommunicera flera säljpunkter är det nästan alltid ett pålitligt layoutalternativ.

Naturligtvis kan dina krav vara olika, så ett annat alternativ att överväga är den kortbaserade layouten.

7. Kortbaserade layouter

Kortbaserade sidlayouter är en annan vanlig layout som du ser över hela webben.

Kortbaserade layouter är ett utmärkt sätt att ge människor en rad alternativ för användaren att välja mellan och presentera tillräckligt med information om varje val för att fatta ett beslut.

Det gör dem till ett populärt val för produktlistansidor på e-handelswebbplatser. Det gör det möjligt för webbplatsen att visa en bild av produkten, en beskrivning och priset. Du kan till och med lägga till funktionalitet som “spara för senare” som du kan se från Asos webbplats.

E-handel webbplatser som Asos föredrar kortbaserade layouter för att visa produktlistor.

Men du hittar webbplatser som använder kortbaserade layouter i alla situationer där användare måste välja från en lista. Till exempel skulle en annan typisk användning vara att visa en lista med artiklar på en blogg eller nyhetssajt.

En kortbaserad layout gör att du kan visa en bild av berättelsen, titeln och beskrivningen samt eventuella ytterligare detaljer om det inlägg du vill inkludera. Awwwards blogg är ett utmärkt exempel på den här typen av användning i action.

Awwwards använder en kortbaserad layout för att lista inlägg på sin blogg.

Bäst av allt, kortbaserade layouter fungerar bra responsivt, med antalet kort i rad minskar långsamt när den tillgängliga bredden minskar.

Det finns dock ett par mindre nackdelar med tillvägagångssättet. Först fungerar kort bäst när du inkluderar bilden. Det betyder att om du kämpar för att hitta lämpliga foton för var och en av dina listobjekt kan du bli bättre med en annan design.

Det andra lilla problemet är med varierande mängder innehåll. Om ett kort har mer innehåll än ett annat kan det lämna vitt utrymme antingen inom kortet eller mellan varje rad.

Om kort har olika mängder av innehåll kan det lämna mellanrum mellan korten.

Ett sätt att mildra problemet är att inte försöka hålla kort på samma rad, som visas i exemplet nedan.

Genom att låta kort fylla tomt utrymme, slutar du med en mer estetiskt tilltalande design.

Ändå är detta en mindre fråga, vilket förklarar det utbredda antagandet av denna layoutmetod.

En annan lika populär design är hjältebildlayouten.

8. Hjältelayout

Hjälteuppsättningen är uppkallad efter hjältebilder, de stora bilderna med textöverlägg som dominerar hemsidorna på så många webbplatser. Apple utnyttjar den klassiska hjältebilden bra.

Apple utnyttjar den klassiska hjältebilden väl.
Pixave för MacOS tar hjälteuppsättningen ännu längre genom att låta den dominera sin hemsidesdesign.
Pixave för MacOS tar hjälteuppsättningen ännu längre genom att låta den dominera sin hemsidesdesign.

Det som gör hjältebilder så utbredda är att de låter dig utforma dina värde proposition på ett påverkande sätt precis vid din webbplats.

Som du kan se från Pixave och Äpple webbplatser ovanför de består vanligtvis av en stor bakgrundsbild, en titel eller strapline och en beskrivning. Hjälteuppsättningar kommer också ofta med en framträdande uppmaning till handling.

Om du tydligt måste förklara vad du erbjuder på din hemsida eller målsida på ett sätt som kommer att fånga uppmärksamhet, kan en hjältebild vara vägen att gå. Men det är förmodligen omfattningen av deras användning.

Ibland ser du hjälteuppsättningen som används på följande sidor. Men i de flesta fall drar hjältebilden helt enkelt uppmärksamheten från mer värdefullt innehåll. Så använd försiktigt.

Bortsett från det finns det en liten nackdel med att använda en hjälteorientering. Ja, de är vanliga, men användare är bekanta med dem och de är effektiva.

Ett betydligt mindre vanligt layoutalternativ är layouten med delad skärm.

9. Dela upp skärmlayout

Precis som i helskärmens layout är en delad skärm ett utmärkt sätt att fånga uppmärksamhet när användare först kommer till din webbplats som du kan se från webbdesignföretagets hemsida Nedan.

Denna webbplats använder split-screen layout för att förklara de två delarna till deras erbjudande.

Vad som gör exemplet ovan så effektivt är att det finns ett tydligt skäl för uppdelningen av delad skärm. Webbplatsen gör det klart att det finns två sidor i deras verksamhet – design och utveckling.

Ett liknande exempel är när du vill ge användarna ett tydligt binärt val. En split-screen ger mycket mening i den situationen eftersom den delar skärmen lika mellan de två alternativen.

Till exempel modelleringsbyrån 62 Hantering använder en delad skärm för att uppmuntra användare att identifiera om de letar efter en manlig eller kvinnlig modell.

62 Management använder en delad skärmdesign för att uppmuntra användare att välja mellan två alternativ.

Tyvärr, utöver det begränsade antalet applikationer, finns det liten anledning att anta en split-screen design. Det är ett relativt begränsande layoutalternativ, och det finns helt enkelt inte så många scenarier där det är lämpligt. Men i de fall där det är är det absolut det bästa valet.

Ett liknande alternativ som skulle ge lite mer flexibilitet är den asymmetriska layouten.

10. Asymmetrisk layout

Medan den delade skärmlayouten tvingar en jämn uppdelning i mitten av utsiktsporten, ger en asymmetrisk design dig möjlighet att dela upp skärmen oavsett vad du tycker passar.

Fördelen med denna layout jämfört med split-screen är att den gör det möjligt att lägga tonvikt på en viss sida av sidan. Ju mer fastigheter en sida har, desto mer fokus placerar du på den. Det tillåter i sin tur att identifiera primärt och sekundärt innehåll.

Med antagandet om primära och sekundära kolumner på plats kan du använda metoden på flera sätt. Till exempel, Félix Lesouef använder metoden på sin webbplats för att dela mellan innehåll och navigering.

Félix Lesouef använder en asymmetrisk layout för att markera sin webbplatsnavigering.

Däremot Nourish Eats webbplats använder den andra kolumnen för att du kan se nästa avsnitt på sin webbplats.

Nourish Eats använder denna layoutmetod för att exponera sekundärt innehåll mer framträdande.

På många sätt är den asymmetriska layouten ett utmärkt val. Det är flexibelt, relativt enkelt att implementera och mindre använt. Det är ett bekvämt sätt att få din webbplats att se annorlunda ut utan huvudvärk från några av de andra valen.

Hur man väljer en layout

Genom att läsa den här artikeln har du tagit ditt första steg i att välja rätt layout för din webbplats. Du har lärt dig vilken typ av alternativ som finns tillgängliga för dig.

Därefter måste du få en uppfattning om vilka alternativ som kan vara lämpliga för din webbplats. Ett sätt att göra detta är att titta på dina konkurrenter. Jag skulle dock rekommendera att du inte stannar där. Faran är att du kommer att kopiera dem, och det kommer alltid att sätta dig ett steg bakom.

Istället kan du titta på webbplatser i andra sektorer som har relaterade typer av innehåll till din egen. Om du har en broschyrwebbplats som riktar sig till en B2B-publik, titta på andra liknande webbplatser. På samma sätt, om du har en e-handelswebbplats, titta på e-handel i andra sektorer.

Därifrån, arbeta med din designer för att experimentera med olika sätt. Få dem att rama in några idéer baserade på olika layouter och se vad som passar ditt innehåll bäst.

Om du inte kan fatta ett beslut eller saknar förtroende i rätt riktning kan du försöka sätta alternativen framför vissa användare och få deras reaktioner. Fråga dem inte bara vad de föredrar, fråga dem också om de upptäckte kritiskt innehåll eller förstod vad företaget handlade om.

I själva verket kommer du förmodligen att hitta dig själv välja och välja mellan olika layoutmetoder för olika delar av din webbplats, och det är okej. För när det gäller webbplatslayout är det viktigt att använda den rätta i rätt tid.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me