Nettstedsoppsett

Beste eksempler og ideer på nettstedoppsett


Utformingen av nettstedet ditt kan definere suksessen. Få feil design, og folk vil bli forvirret og desorienterte og ødelegge brukeropplevelsen. De vil sannsynligvis savne kritisk innhold eller ikke se en oppfordring til handling.

Men viktigheten av utformingen din går lenger. Designet må passe til innholdet på nettstedet ditt. Med riktig oppsett kan innholdet ditt skinne, men med feil kan innholdet bli overfylt, vanskelig å lese og ikke inspirere.

Utformingen av nettstedet ditt kan definere suksessen. Få feil design, og folk vil bli forvirret og desorienterte og ødelegge brukeropplevelsen. De vil sannsynligvis savne kritisk innhold eller ikke se en oppfordring til handling.

Men viktigheten av utformingen din går lenger. Designet må passe til innholdet på nettstedet ditt. Med riktig oppsett kan innholdet ditt skinne, men med feil kan innholdet bli overfylt, vanskelig å lese og ikke inspirere.

Til syvende og sist har alle nettsteder et rutenettsystem som sitter under nettdesignen. Disse kolonnene og radene gir orden til innholdet ditt og guider brukerens blikk rundt siden. Innenfor disse rutenettene kan du lage en mengde forskjellige tilnærminger. Hvert nettsted har et underliggende rutenett som designeren har bygd oppsettet på.

Når det gjelder å velge riktig layoutdesign for nettstedet ditt, er det imidlertid flere vanlige startpunkter du kan bruke for å begynne.

Det er verdt å si at du ikke trenger å holde deg til én tilnærming. Du kan enkelt kombinere flere oppsett på nettstedet ditt, eller til og med på en enkelt side, for eksempel en destinasjonsside.

Når det er sagt, la oss se på de vanligste layoutalternativene som er tilgjengelige for deg.

Vi starter med det mest enkle layoutmønsteret av alle, den ene kolonnen.

1. Layout med én kolonne

Selv om den mest ukompliserte utformingen du vil finne, har den vokst betydelig i popularitet siden veksten av mobilnettet. Det er fordi nettstedet kan bruke samme design på mobile enheter, nettbrett og stasjonære maskiner, noe som reduserer utviklingstiden.

Dessuten fungerer layouter med én kolonne bra for å skape en god leseopplevelse fordi den fokuserer brukeren på innholdet uten distraksjoner til noen av sidene. Derfor blogger nettstedet Medium vedtar det for alle artiklene sine.

Medium bruker en enkelt kolonneoppsett for å forbedre leseopplevelsen.

Til slutt, når det kombineres med bilder, kan en enkelt kolonnes utforming gi en kraftig innvirkning fordi den lar deg vise bildene så store som mulig. The Ocean Resort er et flott eksempel på dette i aksjon.

Ocean Resort bruker hele bredden av sin enkeltsøyle-design for å maksimere innvirkningen av bilder.

Med disse faktorene i tankene, kan du vurdere å bruke en enkelt kolonnelayout hvis du vil at folk skal bruke mye tid på å lese på nettstedet ditt, eller hvis du har bilder som trenger rommet til å skinne.

På grunn av enkelheten er det få utfordringer rundt en enkelt kolonneoppsett. Du må imidlertid vurdere informasjonsflyten nøye. Hvilken rekkefølge trenger brukeren for å se innholdet ditt?

Det er for eksempel nyttig å gi brukerne et sammendrag av hva siden dekker øverst for å trekke dem inn og tilby en klar oppfordring til handling mot slutten.

Tenk også på hvordan du kan holde brukeren bla gjennom siden. Oppsett av enkelt kolonne har en tendens til å være lengre, og det er ikke alltid det fremgår for brukeren at det er mer innhold under bretten. En visuell indikator, for eksempel en pil, kan hjelpe.

Hvis en enkelt kolonneoppsett virker litt begrensende, men du fremdeles har mye innhold å kommunisere, kan du vurdere å ta i bruk et design som fokuserer på innholdet.

2. Innholdsfokusert layout

Nettdesignere bruker ofte innholdsfokusert layout på nyhetssider eller blogger, og den har vanligvis en primær kolonne for innhold og en eller flere sidekolonner for mer informasjon.

Fordelen med dette oppsettet er at det kan hjelpe deg med å administrere linjelengden til det sentrale innholdet ved å variere bredden på sidekolonnene. Det betyr noe fordi Hvis tekstlengden på linjen er for lang eller kort, blir den vanskeligere å lese, slik at du reduserer forståelsen og oppbevar informasjonen.

Imidlertid, gjort riktig, er den innholdsfokuserte utformingen ideell for ethvert kopisentrisk nettsted. Hemmeligheten er å dele opp innholdet i denne utformingen i små, lett å fordøye biter.

Innleggene på Boagworld bryter opp innhold med overskrifter, lister, bilder og trekksitater.

For eksempel, på bloggen min, vil du oppdage at mitt gjennomsnittlige innlegg er punktert av overskrifter, lister, bilder og trekke ut sitater. Dette er alle teknikker for å hjelpe brukeren med å skanne artikkelen, finne deler som er av interesse.

Sidekolonnene må også tas nøye med. Det er viktig at nettdesigneren plasserer riktig innhold i disse kolonnene og at de visuelt har riktig vekting.

Problemet er at brukere forventer å finne sekundært innhold i sidekolonnene og slik at de gir mindre oppmerksomhet. Derfor, hvis du planlegger å inkludere noe som en oppfordring til handling i en sidesøyle, må den være sterk nok til å trekke oppmerksomhet.

Legg for eksempel merke til hvordan Smashing Magazine bruker en fargerik illustrasjon av en katt for å trekke oppmerksomhet til registreringsskjemaet for nyhetsbrevet i høyre kolonne.

Smashing Magazine bruker sidekolonnene for å gi sekundær informasjon om innlegget.

Ikke at den innholdsfokuserte utformingen passer for hver side på nettstedet ditt. Nettsteder kobler ofte denne utformingen med et magasin-design.

3. Magasinoppsett

Som navnet tilsier, brukes denne layouttilnærmingen mye i magasiner eller nyhetssider for å vise et stort antall forskjellige historier.

Inspirert av utskriftslayout gir de mulighet for kombinasjonen av overskrifter og bilder for å introdusere historier. Det kan være en engasjerende måte å formidle det som egentlig er en liste over lenker.

Det er også et utmerket oppsett for å fremheve innhold som regelmessig endres. Derfor liker nyhetsnettsteder The Washington Post så favoriser det.

Nyhetsnettsteder pleier å favorisere magasinet-stiloppsettet.

Imidlertid er oppsettet ikke uten ulemper. Et magasinlayout kan være utfordrende å gi respons, og krever ofte en fullstendig endring i design for mindre skjermenheter.

Denne utformingen av nettstedets utforming kan også være noe overveldende, med et stort antall bilder og overskrifter som roper om oppmerksomhet.

Den mest effektive måten å løse dette problemet på er å lage et tydelig visuelt hierarki. Med andre ord, gjør noen av ‘historiene’ større enn andre.

Ved å variere historiestørrelser leder de brukerne øye.

Legg for eksempel merke til hvordan Vogue nettstedet fokuserer på det venstre bildet ved å gjøre det betydelig større. De forteller effektivt hvor han skal se først.

Det hjelper også at resten av brukergrensesnittet er enkelt, med ren typografi og enkle navigasjonsfelt. Hvis du skal bruke magasinlayouten, må du jobbe hardt for å holde ting enkelt.

En annen potensiell ulempe med magasinoppsettet er at det kan se ‘boxy’ ut fordi rutenettet som ligger under det er så synlig. Du kan imidlertid dempe det ved å ta inspirasjon fra vår neste layouttype.

4. Grid Breaking Layout

Oppsett som ser ut til å bryte det underliggende rutenettet kan være visuelt mye mer interessant enn mer tradisjonelle tilnærminger. De er også utmerkede for å trekke oppmerksomhet til bestemte skjermelementer som bryter ut av de vanlige kolonnene.

Ta for eksempel den VR Arles Festival nettsted. Legg merke til hvordan de gjør oppmerksom på navigasjonslinjen ved å la den overlappe to kolonner.

VR Arles-festivalen henleder oppmerksomheten til navigasjonslinjen deres ved å la den overlappe to kolonner.

En annen praktisk bruk av nettets bruddoppsett er å bruke den til å legge tekst på et bilde på en slik måte å trekke oppmerksomhet til kopien. Når en webside fullstendig legger over tekst på et bilde, kan den ofte gå tapt. Imidlertid, som du kan se fra eksemplet nedenfor, hvis teksten delvis overlapper bildet, skiller den seg ut mye mer.

Dette designet vekker oppmerksomhet til teksten og oppfordring til handling ved å legge den delvis med bildet.

Ulempen med nettbrytende oppsett er at de er vanskelige å få rett, spesielt når nettsteder trenger å være lydhøre. Faktisk er de fleste nettbrytende design ikke noe av det. Det er fortsatt et underliggende rutenett, og alle skjermelementer passer inn i det. Det er bare at rutenettet er mye mer sammensatt, og det er ikke så opplagt. Det gjør dem vanskelig å designe.

Deres iboende kompleksitet er grunnen til at du har en tendens til å se dem brukes av designledede selskaper som designbyråer eller motemerker. De demonstrerer en grad av design-raffinement som appellerer til et bestemt publikum.

Hvis et nettbrytende opplegg føles for komplisert for situasjonen din, men du fortsatt ønsker å gjøre noe mer nyskapende og uvanlig, bør du vurdere en fullskjermdesign.

5. Fullskjermoppsett

Layouter på fullskjerm, som navnet antyder, passer på en enkelt skjerm uten at brukeren trenger å bla. Det gjør dem ideelle for historiefortelling eller presentasjoner.

Ta for eksempel, Arter i stykker. Denne rike og interaktive presentasjonsopplevelsen forteller historiene om 30 engasjerte arter.

Species and Pieces er en rik, interaktiv opplevelse som alle foregår uten å måtte bla.

Som du kan se, er fullskjermoppsett på sitt beste når de ledsages av kraftige bilder. Det gjør dem til et godt valg for nettsteder som er rike på fotografering, illustrasjoner eller video.

Ikke at du strengt tatt må holde deg til tilnærmingen til enkeltskjermen. Ved første øyekast, Roux på nettstedet til Stortinget ser ut til å være et nettsted på fullskjerm i samme forstand som Species in Pieces. Deres nydelige bilder fyller hele utsiktsområdet.

Dette nettstedet bruker hele visningsområdet for å vise frem den fantastiske fotografien.

Det er imidlertid mulig å navigere lenger ned på siden for å se tilleggsinnhold. Dessverre fremhever det en potensiell ulempe med denne layout-tilnærmingen. Brukere er ikke alltid klar over at de kan bla og kan savne verdifullt innhold.

Du må også ta nøye hensyn til hvordan oppsettet vil tilpasse seg i forskjellige størrelser. For eksempel, vil fullskjermtilnærmingen fungere på en mobil enhet? Vil også bilder beskjære når skjermstørrelsen endres eller bare krympe? Du kan raskt finne fokuspunktene til bilder som beskjæres ut av det synlige området i mindre størrelser.

Når det er sagt, hvis du har fantastiske bilder å vise frem, vil du slite med å finne et bedre layoutdesign. Men hvis du vil ha muligheten til å legge til en beskrivelse og oppfordringer til handling sammen med bildene, kan det være lurt å vurdere et vekslende oppsett.

6. Vekslende layout

Det vekslende layoutmønsteret er et av de mer ofte funnet på nettet. Du vil finne at den består av en serie innholdsblokker, som hver har en to-kolonne-layout. Blokkene består vanligvis av et bilde på den ene siden og tekst på den andre.

Det som gir det navnet er at bildet veksler side. Så den første blokken vil ha innhold til venstre og bilde til høyre, mens den neste blokken reverserer det oppsettet.

Det er en layouttilnærming som er spesielt foretrukket når du forklarer funksjonene eller fordelene ved et produkt. For eksempel programvareprodukter som Webydo vil bruke bildet til å vise en funksjon og deretter kopien for å forklare hvordan den fungerer eller fordelen det gir.

Webydo veksler tekst og bilder i forskjellige innhold blokkerer hjemmesiden sin.

Ikke at disse innholdsblokkene er begrenset til bilder og tekst. Noen ganger erstatter nettsteder bildet med en video. Tilsvarende kan innholdssiden av elementet inneholde alt fra ikoner til attester eller samtaler til handling.

For eksempel, Convertkit inkluderer en attest og en oppfordring til handling ved siden av teksten i hver innholdsblokk.

Convertkit inkluderer attester og oppfordringer til handling sammen med bildene.

En del av grunnen til at vekslende blokker er så vanlig, er at de er en enkel layouttilnærming med få ulemper. Hvis du trenger å kommunisere flere salgspunkter, er det nesten alltid et pålitelig layoutalternativ.

Naturligvis kan kravene dine være forskjellige, så et annet alternativ å vurdere er den kortbaserte utformingen.

7. Kortbaserte oppsett

Kortbaserte sideoppsett er en annen vanlig layouttilnærming du vil se over hele nettet.

Kortbaserte oppsett er en flott måte å gi folk en rekke alternativer for brukeren å velge mellom, og presentere dem med nok informasjon om hvert valg til å ta en beslutning.

Dette gjør dem til et populært valg for produktlistesidene til e-handelsnettsteder. Det gjør det mulig for nettstedet å vise et bilde av produktet, en beskrivelse og prisen. Du kan til og med legge til funksjonalitet som “lagre for senere” som du kan se fra Asos nettsted.

Nettsider som Asos favoriserer kortbaserte oppsett for å vise produktoppføringer.

Imidlertid vil du finne nettsteder som bruker kortbaserte oppsett i alle situasjoner der brukere trenger å velge fra en liste. For eksempel vil en annen typisk bruk være å vise en liste over artikler på en blogg eller nyhetsnettsted.

En kortbasert layout lar deg vise et bilde av historien, tittelen og beskrivelsen, samt eventuelle tilleggsdetaljer om innlegget du ønsker å inkludere. Awwwards blogg er et utmerket eksempel på denne typen bruk i aksjon.

Awwwards bruker et kortbasert oppsett for å liste opp innleggene på bloggen.

Det beste av alt, kortbaserte oppsett fungerer bra responsivt, med antall kort på rad sakte redusert etter hvert som den tilgjengelige bredden går ned.

Det er imidlertid et par mindre ulemper med tilnærmingen. For det første fungerer kortene best når du tar med bildet. Det betyr at hvis du sliter med å finne passende bilder for hver av listeelementene dine, kan du være bedre med et annet design.

Det andre lille problemet er med varierende mengder innhold. Hvis ett kort har mer innhold enn et annet, kan det etterlate hvitt mellomrom enten i kortet eller mellom hver rad.

Hvis kort har varierende mengde innhold, kan det etterlate mellomrom mellom kortene.

En måte å dempe dette problemet er ikke å prøve å holde kort på samme rad, som vist i eksemplet nedenfor.

Ved å la kort fylle tomt område, ender du opp med en mer estetisk behagelig design.

Likevel er dette et mindre problem, som forklarer den utbredte adopsjonen av denne layout-tilnærmingen.

Et annet like populært design er heltebildet.

8. Heltoppsett

Heltoppsettet er oppkalt etter heltebilder, de store bildene med tekstoverlegg som dominerer hjemmesidene på så mange nettsteder. Apple utnytter det klassiske heltebildet godt.

Apple utnytter det klassiske heltebildet godt.
Pixave for MacOS tar helt oppsettet videre ved å få det til å dominere hjemmesidedesignet.
Pixave for MacOS tar helt oppsettet videre ved å få det til å dominere hjemmesidedesignet.

Det som gjør heltebilder så utbredt, er at de lar deg lage dine verdivurdering på en påvirkelig måte rett ved inngangspunktet til nettstedet ditt.

Som du kan se fra Pixave og eple nettsteder over består vanligvis av et stort bakgrunnsbilde, en tittel eller strapline og en beskrivelse. Heltoppsett kommer ofte med en fremtredende oppfordring til handling.

Hvis du tydelig må forklare hva du tilbyr på hjemmesiden din eller destinasjonssiden på en måte som vil fange oppmerksomhet, kan et heltebilde godt være veien å gå. Imidlertid er det sannsynligvis omfanget av bruken av dem.

Noen ganger vil du se helteoppsettet som brukes på påfølgende sider. Men i de fleste tilfeller trekker heltebildet ganske enkelt oppmerksomheten bort fra mer verdifullt innhold. Så bruk med omhu.

Bortsett fra det er det en liten ulempe ved å bruke en helteoppsett. Ja, de er vanlige, men brukerne er kjent med dem, og de er effektive.

Et betydelig mindre vanlig layoutalternativ er layouten med delt skjerm.

9. Oppsett av delt skjerm

I likhet med fullskjermoppsettet, er en delt skjerm en fin måte å fange oppmerksomhet når brukere først ankommer nettstedet ditt, som du kan se fra webdesignbedriftens hjemmeside under.

Dette nettstedet bruker delt skjermoppsett for å forklare de to delene som de tilbyr.

Det som gjør eksemplet over så effektivt er at det er en klar grunn til oppdelingen av delt skjerm. Nettstedet gjør det klart at det er to sider ved virksomheten deres – design og utvikling.

Et lignende eksempel er når du vil gi brukerne et klart binært valg. En delt skjerm gir mye mening i den situasjonen da den deler skjermen likt mellom de to alternativene.

For eksempel modelleringsbyrået 62 Ledelse bruker en delt skjerm for å oppmuntre brukere til å identifisere om de leter etter en mannlig eller kvinnelig modell.

62 Ledelse bruker en delt skjermdesign for å oppmuntre brukere til å velge mellom to alternativer.

Dessverre utover disse begrensede antall applikasjoner, er det liten grunn til å ta i bruk en delt skjermdesign. Det er et relativt begrensende layoutalternativ, og det er rett og slett ikke så mange scenarier der det er passende. I de tilfeller der det er, er det imidlertid det beste valget.

Et lignende alternativ som vil gi litt mer fleksibilitet, er den asymmetriske utformingen.

10. Asymmetrisk layout

Mens den delte skjermoppsettet tvinger en like delt midt på utsiktspunktet, gir en asymmetrisk design deg muligheten til å dele skjermen uansett hvor du vil..

Fordelen med dette oppsettet i forhold til delt skjerm er at det gjør det mulig å legge vekt på en bestemt side av siden. Jo mer eiendom som en side har, jo mer fokus legger du på det. Dette lar deg igjen identifisere primær og sekundært innhold.

Når forutsetningen om primære og sekundære kolonner er på plass, kan du bruke tilnærmingen på flere måter. For eksempel, Félix Lesouef bruker metoden på nettstedet sitt for å dele mellom innhold og navigasjon.

Félix Lesouef bruker en asymmetrisk utforming for å fremheve navigasjon på nettsteder.

Derimot Nourish Eats nettstedet bruker den andre kolonnen for å tillate deg å se den neste delen av nettstedet.

Nourish Eats bruker denne layouttilnærmingen for å eksponere sekundært innhold mer tydelig.

På mange måter er den asymmetriske utformingen et utmerket valg. Den er fleksibel, relativt enkel å implementere og mindre brukt. Det er en praktisk måte å få nettstedet ditt til å se annerledes ut uten hodepine fra noen av de andre valgene.

Hvordan velge et oppsett

Ved å lese denne artikkelen har du tatt ditt første skritt med å velge riktig oppsett for nettstedet ditt. Du har lært hva slags alternativer som er tilgjengelige for deg.

Deretter må du få en følelse av hvilke alternativer som kan være passende for nettstedet ditt. En måte å gjøre dette på er å se på konkurrentene. Jeg vil imidlertid anbefale å ikke stoppe der. Faren er at du kopierer dem, og det vil alltid legge deg ett skritt bak.

Ta heller en titt på nettsteder i andre sektorer som har beslektede typer innhold til din egen. Hvis du har en brochureware nettsted rettet mot et B2B publikum, ta en titt på andre lignende nettsteder. Hvis du har et e-handelssted, kan du også se på e-handel i andre sektorer.

Derfra kan du jobbe med designeren din for å eksperimentere med noen forskjellige tilnærminger. Få dem til å ramme noen ideer basert på forskjellige oppsett og se hva som passer best for innholdet ditt.

Hvis du ikke klarer å ta en beslutning eller mangler tillit i riktig retning, kan du prøve å sette alternativene foran noen brukere og få deres reaksjoner. Ikke bare spør dem hva de foretrekker, også spør dem om de oppdaget kritisk innhold eller forsto hva selskapet handlet om.

I sannhet vil du sannsynligvis finne deg selv å velge og velge mellom forskjellige layouttilnærminger for forskjellige deler av nettstedet ditt, og det er greit. For når det gjelder layout av nettsteder, er det viktig å bruke den rette til rett tid.

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