Webstedslayouts

De bedste eksempler og ideer til webstedlayout


Layoutet på dit websted kan definere dens succes. Få det forkerte design, og folk bliver forvirrede og desorienterede og ødelægger brugeroplevelsen. De vil sandsynligvis gå glip af kritisk indhold eller ikke se en opfordring til handling.

Men vigtigheden af ​​dit layout går videre. Designet skal passe til indholdet på dit websted. Med det rigtige layout kan dit indhold skinne, men med det forkerte kan indholdet blive overfyldt, svært at læse og uinspirerende..

Layoutet på dit websted kan definere dens succes. Få det forkerte design, og folk bliver forvirrede og desorienterede og ødelægger brugeroplevelsen. De vil sandsynligvis gå glip af kritisk indhold eller ikke se en opfordring til handling.

Men vigtigheden af ​​dit layout går videre. Designet skal passe til indholdet på dit websted. Med det rigtige layout kan dit indhold skinne, men med det forkerte kan indholdet blive overfyldt, svært at læse og uinspirerende..

I sidste ende har alle websteder et gittersystem, der sidder under webstedsdesignet. Disse kolonner og rækker giver dit indhold orden og styrer brugerens øje rundt på siden. Inden for disse gitre kan du oprette en overflod af forskellige tilgange. Hvert websted har et underliggende gitter, som designeren har bygget layoutet på.

Når det kommer til at vælge det rigtige layoutdesign til dit websted, er der imidlertid flere almindelige startpunkter, du kan bruge til at begynde.

Det er værd at sige, at du ikke behøver at holde dig til én tilgang. Du kan nemt kombinere flere layouts på dit websted eller endda på en enkelt side, f.eks. En destinationsside.

Når det er sagt, lad os se på de mest almindelige layoutindstillinger, der er tilgængelige for dig.

Vi starter med det mest ligetil layoutmønster af alle, den eneste kolonne.

1. Layout med én søjle

Selvom det mest ukomplicerede layout du finder, er det vokset markant i popularitet siden væksten på mobilwebben. Dette skyldes, at webstedet kan bruge det samme design på mobile enheder, tablets og desktops, hvilket reducerer udviklingstiden.

Layouts med en søjle fungerer også godt til at skabe en god læseoplevelse, fordi det fokuserer brugeren på indholdet uden distraktioner til nogen af ​​siderne. Derfor blogger site Medium vedtager det for alle deres artikler.

Medium bruger et enkelt kolonnelayout til at forbedre læsevirksomheden.

Endelig, når det kombineres med billeder, kan et enkelt kolonnelayout have en stærk effekt, fordi det giver dig mulighed for at vise disse billeder så store som muligt. The Ocean Resort er et godt eksempel på dette i handling.

Ocean Resort bruger den fulde bredde af sit enkelt-søjle-design til at maksimere indvirkningen af ​​billeder.

Med disse faktorer i tankerne, kan du overveje at bruge et enkelt kolonnelayout, hvis du vil have folk til at bruge en masse tid på at læse på dit websted, eller hvis du har billeder, der har behov for, at rummet skal skinne.

På grund af dens enkelhed er der få udfordringer omkring en enkelt søjlelayout. Du skal dog overveje informationsstrømmen omhyggeligt. Hvilken rækkefølge har brugeren brug for for at se dit indhold?

For eksempel er det nyttigt at give brugerne en oversigt over, hvad siden dækker øverst for at tegne dem ind og tilbyde en klar opfordring til handling mod slutningen.

Tænk også på, hvordan du kan holde brugeren ved at rulle ned ad siden. Layouter med enkelt søjle har en tendens til at være længere, og det er ikke altid tydeligt for brugeren, at der er mere indhold under folden. En visuel indikator, såsom en pil, kan hjælpe.

Hvis et enkelt kolonnes layout virker lidt restriktivt, men du stadig har meget indhold at kommunikere, kan du overveje at vedtage et design, der fokuserer på indholdet.

2. Indholdsfokuseret layout

Webdesignere bruger ofte det indholdsfokuserede layout på nyhedswebsteder eller blogs, og det har normalt en primær kolonne for indhold og en eller flere sidekolonner for yderligere information.

Fordelen med dette layout er, at det kan hjælpe dig med at styre linjelængden på det centrale indhold ved at variere bredden på sidekolonner. Det betyder noget fordi hvis tekstlinjen er for lang eller kort, bliver det sværere at læse, så reducere forståelsen og opbevaringen af ​​informationen.

Dog gjort det rigtigt, er det indholdsfokuserede layout ideelt til ethvert kopimentrisk websted. Hemmeligheden er at opdele indholdet inden for dette layout i små, let fordøjelige bidder.

Indlægene på Boagworld opdeler indhold med overskrifter, lister, billeder og tilbagetrækningskurser.

For eksempel, på min blog, vil du opdage, at mit gennemsnitlige indlæg er præget af overskrifter, lister, billeder og træk citater. Dette er alle teknikker til at hjælpe brugeren med at scanne artiklen, finde dele, der er af interesse.

Der skal også tages omhyggelig hensyn til sidesøjlerne. Det er vigtigt, at webdesigner placerer det rigtige indhold i disse kolonner, og at de visuelt har den rigtige vægtning.

Problemet er, at brugerne forventer at finde sekundært indhold i sidekolonnerne og derfor give dem mindre opmærksomhed. Derfor, hvis du planlægger at medtage noget som et opfordring til handling i en sidesøjle, skal det være stærk nok til at henlede opmærksomheden.

Bemærk f.eks. Hvordan Smashing Magazine bruger en farverig illustration af en kat til at henlede opmærksomheden på deres nyhedsbrev tilmeldingsformular i højre kolonne.

Smashing Magazine bruger sine sidekolonner til at give sekundær information om indlægget.

Ikke at det indholdsfokuserede layout er passende for hver side på dit websted. Websteder parrer ofte dette layout med et magasin-design.

3. Magasinlayout

Som navnet antyder, bruges denne layoutmetode i vid udstrækning i magasiner eller nyhedswebsteder til at vise et stort antal forskellige historier.

Inspireret af udskriftslayout giver de mulighed for kombination af overskrifter og billeder til at introducere historier. Det kan være en engagerende måde at formidle, hvad der i det væsentlige er en liste over links.

Det er også et fremragende layout til fremhævelse af indhold, der regelmæssigt ændres. Det er grunden til nyhedswebsteder som The Washington Post så favoriser det.

Nyhedswebsteder har en tendens til at favorisere magasinet-stillayout.

Layouten er dog ikke uden ulemperne. Et magasinlayout kan være udfordrende at gøre lydhør, hvilket ofte kræver en komplet ændring i design til mindre skærmenheder.

Denne stil på webstedets layout kan også være noget overvældende, med et stort antal billeder og overskrifter, der råber om opmærksomhed.

Den mest effektive måde at løse dette problem på er at skabe et klart visuelt hierarki. Med andre ord, gør nogle af ‘historierne’ større end andre.

Ved at variere historiestørrelser leder de brugerens øje.

Bemærk for eksempel, hvordan Vogue webstedet fokuserer på billedet til venstre ved at gøre det betydeligt større. De fortæller brugeren effektivt, hvor han skal se først.

Det hjælper også, at resten af ​​brugergrænsefladen er ligetil, med ren typografi og enkle navigationsbjælker. Hvis du skal bruge magasinlayoutet, skal du arbejde hårdt for at holde tingene enkle.

En anden potentiel ulempe ved magasinlayoutet er, at det kan se ‘boxy’ ud, fordi det gitter, der ligger under det, er så synligt. Du kan dog afbøde det ved at hente inspiration fra vores næste layouttype.

4. Grid Breaking Layout

Layouts, der ser ud til at bryde deres underliggende gitter, kan visuelt være meget mere interessante end mere traditionelle tilgange. De er også fremragende til at henlede opmærksomheden på bestemte skærmelementer, der bryder ud af de sædvanlige kolonner.

Tag f.eks VR Arles Festival hjemmeside. Bemærk, hvordan de henleder opmærksomheden på deres navigationslinje ved at have den overlappende to kolonner.

VR Arles Festival henleder opmærksomheden på deres navigationslinje ved at have den overlappende to kolonner.

En anden praktisk brug af netbrydningslayoutet er at bruge det til at overlejre tekst på et billede på en sådan måde at få opmærksomheden til kopien. Når en webside fuldstændigt overlejrer tekst på et billede, kan den ofte gå tabt. Men som du kan se fra nedenstående eksempel, hvis teksten delvist overlapper billedet, skiller den sig ud meget mere.

Dette design henleder opmærksomheden på teksten og opfordringen til handling ved at overlægge den delvist med billedet.

Ulempen med netbrydende layouts er, at de er svære at få ret, især når websteder skal være lydhøre. I sandhed er de fleste netbrydende designs intet af den art. Der er stadig et underliggende gitter, og alle skærmelementer passer ind i det. Det er netop, at gitteret er meget mere komplekst, og det er derfor ikke så indlysende. Det gør dem svære at designe.

Deres iboende kompleksitet er grunden til, at du har en tendens til at se dem brugt af designledede virksomheder såsom designbureauer eller modemærker. De demonstrerer en grad af designfinesse, der appellerer til et bestemt publikum.

Hvis et netbrydende layout føles for kompliceret til din situation, men du stadig ønsker at gøre noget mere innovativt og usædvanligt, skal du overveje et fuldskærmsdesign.

5. Layout på fuld skærm

Layouter på fuld skærm, som navnet antyder, passer til en enkelt skærm uden brug for at rulle. Det gør dem ideelle til historiefortælling eller præsentationer.

Tag for eksempel, Arter i stykker. Denne rige og interaktive præsentationsoplevelse fortæller historierne om 30 engagerede arter.

Species and Pieces er en rig, interaktiv oplevelse, som alle finder sted uden behov for at rulle.

Som du kan se, er layouts på fuld skærm bedst, når de ledsages af kraftfulde billeder. Det gør dem til et godt valg til websteder, der er rige på fotografering, illustrationer eller video.

Ikke at du er nødt til at holde dig til den enkelt skærm tilgang. Ved første øjekast, Roux på Parlamentets websted ser ud til at være et websted på fuld skærm i samme forstand som Arter i stykker. Deres smukke billeder fylder hele udsigten.

Dette websted bruger hele visningen til at fremvise sin fremragende fotografering.

Det er dog muligt at navigere længere nede på siden for at se yderligere indhold. Desværre fremhæver det en potentiel ulempe ved denne layout-tilgang. Brugere er ikke altid klar over, at de kan rulle og kan gå glip af værdifuldt indhold.

Du skal også nøje overveje, hvordan layoutet vil tilpasse sig i forskellige størrelser. Arbejder for eksempel fuldskærmsfremgangsmåden på en mobilenhed? Vil billeder også beskære, når skærmstørrelsen ændres eller blot krympe? Du kan hurtigt finde fokuspunkterne for billeder, der beskæres ud af det synlige område i mindre størrelser.

Når det er sagt, hvis du har fantastiske billeder at vise frem, vil du kæmpe for at finde et bedre layoutdesign. Men hvis du vil have muligheden for at tilføje en beskrivelse og opfordrer til handling sammen med disse billeder, kan du overveje et skiftende layout.

6. Skiftende layout

Det skiftende layoutmønster er et af de mere almindeligt fundne på nettet. Du finder ud af, at den er sammensat af en række indholdsblokke, som hver har et to-søjles layout. Blokkene består typisk af et billede på den ene side og tekst på den anden.

Det, der giver det sit navn, er, at billedet skifter side. Så den første blok har indhold til venstre og billede til højre, mens den næste blok vender det layout.

Det er en layoutmetode, der især er favoriseret, når man forklarer funktionerne eller fordelene ved et produkt. F.eks. Softwareprodukter som Webydo bruger billedet til at vise en funktion og derefter kopien til at forklare, hvordan den fungerer eller den fordel, det giver.

Webydo skifte tekst og billeder i forskellige indhold blokerer ned for dens hjemmeside.

Ikke at disse indholdsblokke er begrænset til billeder og tekst. Nogle gange erstatter sider billedet med en video. Ligeledes kunne indholdssiden af ​​elementet omfatte alt fra ikoner til vidnesbyrd eller opkald til handling.

For eksempel, Convertkit inkluderer et vidnesbyrd og en opfordring til handling sammen med deres tekst i hver indholdsblok.

Convertkit inkluderer vidnesbyrd og opfordring til handling sammen med deres billeder.

En del af grunden til, at vekslende blokke er så almindelige, er, at de er en enkel layout-tilgang med få ulemper. Hvis du har brug for at kommunikere flere salgssteder, er det næsten altid en pålidelig layoutindstilling.

Naturligvis kan dine krav være forskellige, så en anden mulighed at overveje er det kortbaserede layout.

7. Kortbaserede layout

Kortbaserede sidelayouts er en anden almindelig layoutmetode, som du vil se overalt på nettet.

Kortbaserede layouts er en fantastisk måde at give folk en række muligheder for brugeren at vælge imellem og præsentere dem med nok information om hvert valg til at tage en beslutning.

Det gør dem til et populært valg for sider med produktfortegnelser på e-handelswebsteder. Det giver webstedet mulighed for at vise et billede af produktet, en beskrivelse og prisen. Du kan endda tilføje funktionalitet som “Gem til senere”, som du kan se fra Asos websted.

E-handelswebsteder som Asos favoriserer kortbaserede layout for at vise produktoversigter.

Du vil dog finde websteder, der bruger kortbaserede layout i enhver situation, hvor brugere har brug for at vælge fra en liste. For eksempel ville en anden typisk anvendelse være at vise en liste med artikler på en blog eller nyhedswebsted.

Et kortbaseret layout giver dig mulighed for at vise et billede af historien, titlen og beskrivelsen samt eventuelle yderligere detaljer om det indlæg, du ønsker at inkludere. Awwwards blog er et glimrende eksempel på denne form for brug i handling.

Awwwards bruger et kortbaseret layout til at liste stillingerne på sin blog.

Bedst af alt, kortbaserede layouts fungerer godt responsivt, idet antallet af kort i træk langsomt reduceres, når den tilgængelige bredde går ned.

Der er dog et par mindre ulemper ved fremgangsmåden. Først fungerer kort bedst, når du inkluderer billedet. Det betyder, at hvis du kæmper for at finde passende fotos til hver af dine lister, er du måske bedre med et andet design.

Det andet lille problem er med forskellige mængder indhold. Hvis et kort har mere indhold end et andet, kan det efterlade hvid plads enten inden i kortet eller mellem hver række.

Hvis kort har forskellige mængder indhold, kan det efterlade mellemrum mellem kortene.

En måde at afhjælpe dette problem er ikke at forsøge at holde kort på samme række, som vist i eksemplet herunder.

Ved at give kort mulighed for at udfylde tom plads, ender du med et mere æstetisk tiltalende design.

Ikke desto mindre er dette et mindre problem, som forklarer den udbredte vedtagelse af denne layout-tilgang.

Et andet lige så populært design er heltebilledlayouten.

8. Heltlayout

Heltlayoutet er opkaldt efter heltebilleder, de store billeder med tekstoverlejringer, der dominerer hjemmesiderne på så mange websteder. Apple gør god brug af det klassiske heltebillede.

Apple gør god brug af det klassiske heltebillede.
Pixave til MacOS bringer heltelayoutet endnu længere ved at få det til at dominere sit hjemmesidesign.
Pixave til MacOS bringer heltelayoutet endnu længere ved at få det til at dominere sit hjemmesidesign.

Hvad der gør heltebilleder så udbredt, er at de giver dig mulighed for at layout dine værdiforslag på en virkningsfuld måde lige ved indgangen til dit websted.

Som du kan se fra Pixave og Æble Websteder ovenfor består normalt af et stort baggrundsbillede, en titel eller strapline og en beskrivelse. Heltlayouts kommer også ofte med en fremtrædende opfordring til handling.

Hvis du klart skal forklare, hvad du tilbyder på din startside eller destinationsside på en måde, der vil fange opmærksomhed, kan et heltebilde godt være vejen at gå. Imidlertid er det sandsynligvis omfanget af deres brug.

Lejlighedsvis ser du heltelayoutet, der bruges på efterfølgende sider. Men i de fleste tilfælde tiltrækker heltebildet simpelthen opmærksomheden fra mere værdifuldt indhold. Så brug med omhu.

Bortset fra det er der en lille ulempe ved at bruge en heltelayout. Ja, de er almindelige, men brugerne kender dem, og de er effektive.

En markant mindre almindelig layoutindstilling er split-screen layout.

9. Opdelte skærmlayout

Ligesom på fuldskærmslayout er en delt skærm en god måde at få opmærksomhed på, når brugerne først ankommer til dit websted, som du kan se fra webdesigns virksomheds hjemmeside under.

Dette sted bruger layoutet med delt skærm til at forklare de to dele til deres tilbud.

Hvad der gør eksemplet ovenfor så effektivt, er der en klar grund til opdelingen af ​​delt skærm. Hjemmesiden gør det klart, at der er to sider ved deres forretning – design og udvikling.

Et lignende eksempel er, når du vil give brugerne et klart binært valg. En delt skærm giver meget mening i denne situation, da den deler skærmen lige mellem de to muligheder.

For eksempel modelleringsbureauet 62 Ledelse bruger en split-screen for at opmuntre brugerne til at identificere, om de leder efter en mandlig eller kvindelig model.

62 Management bruger et split-screen design for at tilskynde brugerne til at vælge mellem to muligheder.

Desværre er der ud over dette begrænsede antal applikationer kun lidt grund til at anvende et split-screen design. Det er en relativt begrænsende layoutindstilling, og der er ganske enkelt ikke så mange scenarier, hvor det er passende. Men i de tilfælde, hvor det er, er det langt det bedste valg.

En lignende mulighed, der ville give lidt mere fleksibilitet, er det asymmetriske layout.

10. Asymmetrisk layout

Mens det delte skærmlayout tvinger en lige opdelt midt i visningsporten, giver et asymmetrisk design dig mulighed for at opdele skærmen, uanset hvor du finder det passende.

Fordelen ved dette layout i forhold til delt skærm er, at det giver mulighed for at lægge vægt på en bestemt side af siden. Jo mere fast ejendom en side har, jo mere fokus lægger du på den. Det giver igen mulighed for at identificere primært og sekundært indhold.

Når forudsætningen for primære og sekundære kolonner er på plads, kan du bruge fremgangsmåden på flere måder. For eksempel, Félix Lesouef bruger metoden på sit websted til at opdele mellem indhold og navigation.

Félix Lesouef bruger et asymmetrisk layout til at fremhæve navigationen på hans websteder.

Derimod Nourish Eats websted bruger den anden kolonne for at give dig mulighed for at se det næste afsnit på dets websted.

Nourish Eats bruger denne layout-tilgang til at eksponere sekundært indhold mere prominent.

På mange måder er det asymmetriske layout et fremragende valg. Det er fleksibelt, relativt let at implementere og mindre brugt. Det er en praktisk måde at få dit websted til at se anderledes ud uden hovedpine fra nogle af de andre valg.

Sådan vælges en layout

Ved at læse denne artikel har du taget dit første skridt i at vælge det rigtige layout til dit websted. Du har lært, hvilken slags muligheder der er tilgængelige for dig.

Dernæst skal du få en fornemmelse af, hvilke muligheder der kan være passende til dit websted. En måde at gøre dette på er at se på dine konkurrenter. Jeg vil dog anbefale ikke at stoppe der. Faren er, at du kopierer dem, og det vil altid sætte dig et skridt bagpå.

Se i stedet på sider i andre sektorer, der har relaterede typer indhold til din egen. Hvis du har en brochureware-websted rettet mod et B2B-publikum, se på andre lignende steder. Ligeledes, hvis du har et eCommerce-websted, så kig på eCommerce i andre sektorer.

Arbejd derfra med din designer for at eksperimentere med nogle forskellige tilgange. Få dem til at ramme nogle ideer baseret på forskellige layouts og se, hvad der passer bedst til dit indhold.

Hvis du finder dig ikke i stand til at tage en beslutning eller mangler tillid i den rigtige retning, kan du prøve at sætte indstillingerne foran nogle brugere og få deres reaktioner. Spørg dem ikke bare, hvad de foretrækker, spørg dem også, om de opdagede kritisk indhold eller forstod, hvad virksomheden handlede om.

I sandhed vil du sandsynligvis finde dig selv at vælge og vælge fra forskellige layoutmetoder til forskellige dele af dit websted, og det er okay. For når det kommer til webstedslayout er det kritisk at bruge den rigtige på det rigtige tidspunkt.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map