11 Webstedslayouts, der fik indholdet til at skinne i 2017

Hvorfor besøger folk virkelig websteder? I de fleste tilfælde er den primære årsag bag hvert besøg indhold. Indhold er af største vigtighed, og enhver designer ønsker at præsentere det på den mest nyttige og intuitive måde. Det er ikke overraskende, at valg af et layout til dit indhold er en af ​​de første ting, designere gør, når de starter et nyt projekt.

Mange designere mener, at layoutet for hvert websted, de arbejder på, skal være helt unikt for at opfylde projektets mål - dette er langt fra sandheden. Hvis du besøger populære websteder, vil du bemærke, at mange af dem bruger lignende layout. Dette er ikke en tilfældighed eller udført af dovenskab, det skyldes, at disse layouts har tre betydelige fordele:

  • De kan bruges. Fælles layout er blevet så almindelige, fordi de har bevist, at brugere kan arbejde med dem.
  • De er velkendte. En god brugeroplevelse skabes ved at opbygge en følelse af fortrolighed med brugerne. Besøgende føler en behagelig følelse af deja-vu, når de ser velkendte funktioner, som de ville forvente. Som et resultat vil folk bruge tid på at fordøje indholdet i stedet for at fokusere på sidens unikke design.
  • De sparer penge. Genbrug af eksisterende layouts er en tidsbesparende. Designere vil bruge mindre tid på at eksperimentere med layoutet og vil fokusere mere på det visuelle hierarki og andre aspekter af design, der har en direkte indflydelse på brugeroplevelsen.

Selvom hvert projekt er unikt og kræver en individuel tilgang, er det nyttigt at være fortrolig med fælles layout. I denne artikel skal vi se på 11 meget almindelige layout, som du kan finde på utallige websteder i dag.

1. Enkelt kolonne.

Layouter med en enkelt kolonne viser hovedindholdet i en enkelt, lodret kolonne. Denne type layout er måske den enkleste fra denne liste og er den nemmeste for brugere at navigere. Besøgende skal blot rulle ned for at se mere indhold.

På trods af sin enkelhed er layouts med enkelt søjle ret populære blandt mange websteder. Mobilrevolutionen havde også indflydelse på populariteten af ​​denne type layout - layouts med enkelt søjle passer perfekt til mobilskærme.

Hvornår skal det bruges.

Dette layout finder anvendelse i mange personlige blogs baseret på minimalistiske designprincipper. Dette er et almindeligt layout for mikroblogs såsom Tumblr.

Medium, en populær blogging-platform, bruger denne form for layout til at præsentere sine historier. Alle artikler om Medium præsenteres i en enkelt søjlelayout.

Designtips

  • Overvej 'klistrede' menuer til lange sider. Da layoutet med en enkelt søjle ofte bruges til sider med lang rulle, er det vigtigt at altid holde navigationen i syne. 'Sticky navigation' hjælper dig med at undgå, at besøgende behøver at rulle helt tilbage til toppen af ​​siden for at navigere.
Billedkilde: codemyui

2. Opdel skærm

En delt skærm (eller en skærm opdelt i to) layout er perfekt til en side, der har to hovedindhold af lige stor betydning. Det giver designere mulighed for at vise begge genstande samtidig, samtidig med at de tager samme hensyn.

To centrale elementer vises samtidig. Billedkilde: 62 modeller

Hvornår skal det bruges

Opdelte skærmlayouter er perfekte, når dit websted tilbyder to drastisk forskellige variationer af brugerrejsen, såsom to forskellige typer instruktioner, som vi ser i Dropbox-eksemplet nedenfor.

Opdelte skærmlayouter er også ideelle til kontrast, og det er derfor, designere ofte bruger dette layout til at placere to elementer mod hinanden.

De modsatte egenskaber ved dualitet (modsatte farver). Billedkilde: Google Star Wars-tilpasninger

Designtips.

  • Undgå at bruge for meget indhold i opdelte sektioner. Opdelte skærmdesign udvides ikke godt, når indholdet vokser, så det er bedre at undgå at vælge denne type layout, hvis du har brug for en masse tekstlige eller visuelle oplysninger i delte sektioner.
  • Overvej at tilføje animation. Du kan oprette en mere dynamisk oplevelse ved at inkorporere animerede detaljer.
Billedkilde: Chekhov er levende

Asymmetri er den manglende lighed mellem layoutets to sider. Asymmetri er en lang tid foretrukken teknik i kunstverdenen og er for nylig blevet populær blandt webdesignere.

Mange mennesker forveksler asymmetri med ubalance, men faktisk er målet med asymmetri at skabe en balance, når det enten er umuligt eller ikke ønskeligt at bruge lige vægt i to sektioner. Brug af asymmetri gør det muligt at skabe spænding og dynamik, og asymmetri letter bedre scanneadfærd ved at fokusere en brugers opmærksomhed på individuelle objekter (fokuspunkter). Ved at ændre bredden, skalaen og farven på hvert asymmetrisk stykke indhold opfordrer designeren besøgende til at forblive visuelt engageret.

Hvornår skal det bruges.

Denne type layout kan bruges, når designere ønsker at oprette interessante og uventede layout, mens de stadig giver retningsbestemt vægt. Asymmetri, der anvendes korrekt, kan skabe et aktivt rum, der leder øjet fra et element til et andet, selv på tværs af tomhed. Overvej hvordan Dropbox tydeligt viser fokuspunkter i eksemplet herunder.

Asymmetri får Dropbox-hjemmesiden til at virke mere energisk.

Designtips.

  • Sørg for, at dit indhold kan præsenteres i et asymmetrisk layout. Et asymmetrisk layout er ikke praktisk for hvert sted. Det fungerer sandsynligvis bedst for minimalistiske layout.
  • Tilføj fokus med farve. Asymmetri er forankret i ideen om, at et objekt med mere visuel vægt først vil henlede opmærksomheden på det. Du kan bruge elementer med høj farvekontrast for at tilføje visuel vægt til specifikke dele af designet.
Høj farvekontrast tilføjer bestemte dele af designet visuel vægt. Billedkilde: Kultur PL

4. Et gitter kort.

Kort er gode containere til klikbar information - - de giver designere mulighed for at præsentere en tung dosis information på en fordøjelig måde. Forhåndsvisninger af bidestørrelse (normalt et billede og en kort beskrivelse) hjælper besøgende med at finde det indhold, de kan lide, og dykke ned i detaljer ved at klikke eller tappe på kortet.

Det vigtigste ved et gitter med kort er, at denne type layout næsten er uendeligt manipulerbar. Rister kan variere i størrelse, afstand og antallet af kolonner, og kortformatet kan variere afhængigt af skærmstørrelse (kort kan omarrangeres, så de passer til enhver skærm). Derfor fungerer gitre kort så godt med lydhør design.

Hvornår skal det bruges.

Et gitter af kortlayout er godt til indholdstunge sider, der viser en masse genstande med lige hierarki.

YouTube har en streng gitterlayout; lige rækker med kort er grupperet i kategorier.Hver pin på Pinterest-tavlen er repræsenteret som et kort.

Designtips.

  • Gør hele kortet klikbart, ikke kun specifikke dele. Brugerinteraktion med et kort er meget mere behagelig, når brugere ikke behøver at klikke nøjagtigt på et korts overskrift eller billede for at få adgang til indholdsoplysninger.
  • Hvis dit kort indeholder et billede, skal du overveje, hvordan det ser ud på en mindre skærm. Et billede, der ikke skaleres godt og bliver ulæseligt på små skærme, skaber en dårlig brugeroplevelse.
  • Vær opmærksom på det hvide rum mellem kortene, fordi det påvirker, hvordan besøgende gennemsøger. Mere plads mellem kort gør browsing langsommere, men besøgende vil være mere opmærksomme på hvert kort. Minimal plads giver mulighed for hurtig scanning, men øger også risikoen for, at besøgende kan overse noget indhold.
  • Det er muligt at inkorporere animeret feedback. Kortet vises som et klikbare element.
Smashing Magazine har god animeret feedback til sine kort.

Dette er måske det mest komplekse layout, der er nævnt i dette indlæg. Som navnet antyder, blev dette layout oprindeligt populariseret af aviser og magasiner, der havde et problem med at præsentere enorme mængder information til læseren på en let at følge måde. Printdesignere brugte gittersystemet til dette formål. Layouten er bygget ved hjælp af et modulært gitter, der tillader fleksibilitet - et layout med flere søjler bruger forskellig visuel vægt til at prioritere information.

Magasinlayoutet giver læserne mulighed for at scanne, læse. og forstå en side hurtigt. Billedkilde: New York Times

I lighed med papirmagasiner bruger digitale magasiner et multicolumn-gitter, der giver dig mulighed for at oprette et komplekst hierarki og integrere tekst og illustrationer. Det primære mål er det samme - besøgende skal være i stand til hurtigt at scanne, læse og forstå en side. Designere stræber efter at skabe en visuel rytme. De prøver at gøre det lettere for øjet at scanne sektionerne på siden og lade øjet rejse naturligt fra en blok til en anden. Samtidig forsøger designeren at forhindre de forskellige blokke i at konkurrere om opmærksomhed.

Hvornår skal det bruges.

Magasinlayoutet er et godt valg for publikationer, der har et komplekst hierarki med store mængder indhold på en side. Uden effektiv brug af et gitter, er det sandsynligt, at alt indhold på hjemmesiden ser mere rodet og mindre organiseret ud.

Et magasinformat layout er bedst til nyhedswebsteder, der har en masse regelmæssigt opdateret indhold i flere kategorier.

Designtips.

  • Dette layout understreger overskrifter og billeder. Størrelsen på overskriften / billedet er direkte relateret til den opmærksomhed, den kommanderer. Mere fremtrædende elementer trækker en brugers fokus hurtigere end de mindre fremtrædende. Tag for eksempel New York Times - det vigtigste indhold på siden har større miniaturebilleder, større overskrifter og mere detaljeret tekst.
New York Times bruger en anden størrelse til tekst for at skabe en følelse af betydning - tekststørrelser varierer for at skabe et visuelt hierarki.
  • Det at lægge et gitter kræver opmærksomhed på både de vandrette og de lodrette rytmer, og de er lige så vigtige, hvis du vil skabe et godt layout. Overvej forskellen mellem følgende eksempler. I det første eksempel er gitteret i overensstemmelse med søjlebredde og vandret afstand, men den varierede lodrette afstand skaber visuel støj. I det andet tilfælde er den horisontale søjleafstand og den lodrette elementafstand ensartet, og dette får den overordnede struktur til at virke renere og mere behagelig for den bruger, der visuelt forbruger indholdet.

6. Kasser.

Dette layout har en stor rubrik i overskriftsbredden og et par mindre kasser, som hver optager en del af den større kasses skærmsejendom. Antallet af mindre kasser kan variere fra to til fem. Hver af boksene kan være et link, der fører til en større, mere kompleks side.

Hvornår skal det bruges.

Dette er en ganske alsidig layout, der kan bruges til både individuelle porteføljelignende websteder og til firmaer / e-handelswebsteder.

Billedkilde: mrporter

Designtips.

  • Forbind kasser for at fortælle en historie. Den store kasse kan bruges til at fremvise produkter, mens de mindre kasser kan tilbyde yderligere information om produktet.
Billedkilde: Microsoft Surface

Navigation er en kritisk del af ethvert websted - hovedmenuen er den første ting, de fleste brugere ser efter, når de vil navigere. Sammen med vandret navigation på toppen er det muligt at holde menuindstillingerne i syne ved at placere den i en fast sidefelt. Sidefeltet er en lodret kolonne til venstre eller højre del af siden. Til dette layout forbliver sidebjælken stille og forbliver altid synlig, mens resten af ​​siden ændres, når brugerne ruller ned på siden. Denne måde navigation forbliver tilgængelig.

Hvornår skal det bruges.

Dette layout fungerer godt til websteder med et relativt begrænset antal navigationsindstillinger. Det foretrækkes, at alle indstillinger vil være synlige, når en bruger kommer ind på siden.

Billedkilde: Measponte

Designtips.

  • Sidebjælker kan også indeholde andet indhold end eller ud over en menu, såsom links til sociale medier, kontaktoplysninger eller alt andet, som besøgende let kan finde.
Trefecta giver mulighed for at ændre sprog og sidedelingsindstillinger i sidebjælken.

Dette layout er baseret på ideen om, at brug af billeder i design er den hurtigste måde at sælge et produkt på. Billeder har en mulighed for at skabe en følelsesladet forbindelse med besøgende - et stort, fedt fotografi eller illustration af et objekt giver en stærk erklæring og skaber et fantastisk førsteindtryk.

Hvornår skal det bruges.

Dette layout er fantastisk, når du kun har brug for at demonstrere et produkt / tjeneste og fokusere en brugers hele opmærksomhed på det.

Manglen på andre elementer i dette layout fører brugerens opmærksomhed helt mod produktet.

Ved hjælp af denne type layout er det muligt at opbygge en virkelig fordybende, følelsesladet oplevelse. Et godt eksempel er arter i stykker, der giver en rig oplevelse og øger opmærksomheden for truede arter.

Billedkilde: Arter i stykker

Designtips.

  • Sørg for, at din grafik er god nok til at blive fremhævet prominent. Billedet, fotoet eller illustrationen skal være både relevant for den meddelelse, du vil levere, og i høj kvalitet.
  • Overvej typografi. Typografi ledsager billedet. Størrelse, skriftsvægt og farve er alle egenskaber ved et skrifttype, der skal bruges til at forstærke designet.

9. F-form layout.

Denne type layout blev oprettet baseret på den måde, brugerne læser indhold på nettet. Det F-formede scanningsmønster, oprindeligt defineret af NNGroup, siger, at brugere typisk scanner tunge blokke med indhold i et mønster, der ligner bogstavet F eller E. Vores øjne starter i øverste højre hjørne af siden, scanner vandret og derefter falde ned til den næste linje og gør det samme igen og igen, indtil vi finder noget, der fanger vores opmærksomhed (interessant indhold). Dette scanningsmønster er relevant ikke kun for desktopbrugere, men også for mobilbrugere.

Hvornår skal det bruges.

Dette layout er godt til sider, der har behov for at præsentere en masse forskellige muligheder og giver brugerne mulighed for at scanne dem hurtigt. Besøgende vil svare bedre på F-mønsterlayoutet, der efterligner det naturlige scanningsmønster. Dette er nyttigt til en nyhedswebside eller -side, der indeholder søgeresultater.

New Yorker bruger et F-form layout på sin hjemmeside.

Designtips.

  • Juster indholdet i henhold til scanningsopførsel. Det er værd at placere det vigtigste indhold på venstre og højre side af siden, hvor brugeren begynder og afslutter deres vandrette scanning. Når besøgende når slutningen af ​​rækken, pauser de et par sekunder, før de flytter til den næste række, og denne pause giver dig en mulighed for at præsentere indhold.
  • Brug visuelle signaler til at guide den besøgende. Det er muligt at fokusere brugerens opmærksomhed på et specifikt element ved at lægge mere visuel vægt på det. For eksempel kan du fremhæve nøgleord i en tekst for at fokusere brugerens opmærksomhed.

10. Layout i Z-form.

Z-mønsterlayoutet efterligner også naturlige scanningsvaner. Besøgende på stedet (fra vestlige kulturer) starter i øverste venstre hjørne. De scanner fra øverste venstre til øverste højre og danner en vandret linje. Det næste trin er dog lidt anderledes - i stedet for at falde direkte ned, som i det F-formede mønster, vandrer deres øjne ned og til venstre på siden og skaber en diagonal linje. Til sidst kaster man et blik tilbage mod højre igen og danner en anden vandret linje.

Hvornår skal det bruges.

Mens F-mønsteret er bedre til scanning af meget indhold, er Z-mønsteret bedre egnet til steder med et entalligt mål og mindre indhold. Dette mønster er effektivt til at rette brugerens opmærksomhed mod specifikke punkter ved at bruge velplacerede visuals, tekst og CTA'er.

Dette layout er fantastisk, når et websted har en bestemt dagsorden eller en opfordring til handling, som brugerne formodes at interagere med. Billedkilde: Basecamp

Designtips.

  • Engager brugere med en zigzag (eller fortsat Z-mønster). Det er muligt at engagere brugere i scanning ved at skifte tekst og billeder et par gange for at oprette en zigzag.
Et zig-zag-mønster er et Z-mønster gentaget et par gange på den samme side. Zig-zags skaber en rytme, der holder besøgende interesseret. Billedkilde: Evernote

Kerneelementet i dette layout er et stort foto, der bruges som baggrund for siden. Det bruges til at introducere besøgende til webstedsindholdet. Dette layout har en mulighed for at skabe et stærkt førsteindtryk og tilskynder brugerinteraktion.

Hvornår skal det bruges.

Dette layout er fantastisk, når du vil sige mindre og vise mere.

Billedkilde: Søger efter Syrien

Designtips.

  • Vælg et baggrundsbillede omhyggeligt. Da layoutet er baseret på et enkelt billede, er det vigtigt at vælge det rigtige. Et irrelevant billede kan let forvirre besøgende.
  • Brug videoer i stedet for billeder til at engagere besøgende. Det kan være værd at bruge video i stedet for et foto, især når du har brug for at demonstrere noget i aktion.
Video giver dig en bedre mulighed for at engagere dine besøgende over et statisk billede. Billedkilde: Tesla
  • Lad ikke designen mindske læsbarheden. Den tekst, du bruger som et overlay over billedet, skal være kontrasterende nok til at være læsbar. Hvis teksten ikke kontrasterer nok, kan du overveje at tilføje et overlay til billedet.
Billedkilde: Google Wallet

Når du designer et websted, er det vigtigt at huske, at indholdet altid er konge. Webstedets primære formål er fortsat offentliggørelse af let fordøjeligt indhold. Blandt mange variationer af indhold er det vigtigt at vælge det, der får dit indhold til at skinne.

Oprindeligt offentliggjort på theblog.adobe.com den 13. december 2017.