Webdesign Trends 2021: Scrollytelling, 3D Effects & mere Interaction

Sonja Hoffmann Senest opdateret den 22. februar 2021
9 Min.
Tendenser inden for webdesign-2021
Senest opdateret den 22. februar 2021

Efter et år som det, vi lige har oplevet, tager man et kig på de kommende trends, der tager på næsten utopisk træk. Når alt kommer til alt, hvem ville have troet i 2020, hvor hurtigt verden kan og vil ændre sig? Og hvor hurtigt vi kan tilpasse os ændringerne. Lad os tage et kig på webdesign tendenser 2021 sammen!

Den nye normale har os alle fast under kontrol: teknologien er blevet vigtigere for os og er mere fast integreret i vores hverdag. Det betyder, at vores teknologi skal bevæge sig i en retning, der giver mulighed for mere personalisering, integration og interaktion. For os alle. 

Lockdown, Homeoffice og Co har fokuseret mere på det digitale. Denne tendens skaber imidlertid også en hurtig vækst i digitale produkter. Det samme gælder for e-handel. Alt dette kræver mere individualitet og dygtighed til at positionere dig mod et større antal konkurrenter.

Lige nu er det vigtigt at fokusere på slutbrugerne. Det handler om at forbløffe dem, integrere dem og tilpasse internettet. Og altid fokusere på maksimal funktionalitet.

I det nye år ser vi derfor flere muligheder for personalisering. Vi ser oftere muligheden for at skifte mellem Mørk / Lys Mode eller endda at justere farverne på et tema selv.

Vi ser designs, der er mere dristige og mindre symmetriske. Modtendensen til integration af organiske farver og elementer forbliver. Vi opnår mere personlighed gennem collager, blandede medier og integration af animationseffekter. Lad os tage et kig på Webdesign Trends 2021 i detaljer!

1. Rulning

Parallax & Parallax Scroll Animationer

Vi har brugt Parallax, især med enkle billeder, i flere år. For nylig er der tilføjet komplekse Parallax Scroll-animationer. Korrekt brugt, disse omdanner din hjemmeside fra en flad 2D-lignende baggrund i en interaktiv digital verden - sammenlignes med en teaterscene.

Hvad er Parallax-effekten?

Parallax effekter opstår, når elementer er i forskellige afstande fra hinanden. Hvis de bevæger sig gennem rulning, opfatter vi deres bevægelse som varierende hastighed.

Bemærk: For brugere, der kæmper med svimmelhed, for meget bevægelse på dit websted kan forårsage ubehag.

Et par tips til en vellykket integration af Parallax effekt:

  • Sørg for, at vigtige oplysninger altid vises og ikke overtrummfes af effekten.
  • Sørg for, at alle din sides funktioner bevares på alle enheder, selv under suboptimale forhold, f.eks.
  • Minimer brugen af parallakse effekter.
  • Overvej at integrere en indstilling for at deaktivere effekten.
Tendenser inden for webdesign-2021

Spillet Firewatch hjemmeside bruger otte forskellige PNG billeder i overskriften, som tilsammen animerer følelsen af et rigtigt landskab. I den mobile version erstattes parallakseeffekten dog af et statisk billede.

Rulleanimationer

Heller ikke helt nye, men så langt mindre bemærket, er omfattende rulle animationer - sandsynligvis ikke mindst fordi deres sammensætning kræver tegning dygtighed. Som altid, mindre er mere. Godt brugt, rulle animationer giver din hjemmeside et harmonisk flow. 

Tendenser inden for webdesign-2021

ToyFight er et kreativt bureau med base i Manchester. Gennem dygtige brug af animationer udløst af rulning, agenturet giver sin hjemmeside dynamik og personlighed. Animationerne fungerer også på mindre enheder – også selvom opladningstiden er påvirket.

Tendenser inden for webdesign-2021

Virksomheden Prevint tilbyder et overordnet koncept mod seksualiseret vold. Den minimale brug af rulleanimationer visualiserer de tre vigtigste forebyggelsesforanstaltninger. Special er brugen af lodret og vandret rulning: hovednavigationen er på et lodret niveau, mens vandret rulning går dybere ind i det respektive emne.

Navigationspilene nederst på skærmen giver ekstra retning. På den mobile side sker navigationen udelukkende ved at trykke på knapper.

Vandret rulning

Selv om udtalelser om horisontal rulning har afveget meget i fortiden, ser vi flere og flere hjemmesider med det. Især set ud fra brugeroplevelsens synspunkt blev deres anvendelse tidligere anset for at være temmelig tvivlsom.

Tendenser inden for webdesign-2021

Hjemmet société hjemmeside, som er struktureret som en en personsøger, fungerer helt vandret orienteret. Den klæbrige navigation, som vi normalt finder øverst, er til venstre. Det fungerer på samme måde med Anchor Links, som det gør med en lodret justeret One Pager. På mobiltelefonen får vi siden vist lodret.

Tendenser inden for webdesign-2021

Hjemmesiden for Kwok Yin Mak er et design portefølje, der ruller vandret gennem alle integrerede sider. Forskellen til Home Société her er brugen af Infinite Scrolling: Hvis du kommer til slutningen af en side, vil du blive transporteret tilbage til begyndelsen ubemærket. Denne side giver også afkald på vandret rulning på farten.

Et par tip til vellykket integration af vandret rulning:

  • Giv dine brugere: En plan B, f.eks.
  • Overvej, hvilket indhold din side drager fordel af vandret rulning.
  • Prøv at sætte dig selv i én retning så meget som muligt. Alt for ofte forveksler skift mellem retninger dine brugere.
  • Vær forsigtig med blandingen af lang tekst og vandret rulning. Dette layout kan gøre teksten mindre læsbar.
Hvilken skrifttype passer til mit websted?

En passende skrifttype kan ikke kun gør din hjemmeside meget mere interessant visuelt. Skrifttyper har afgørende indflydelse på, om dele af teksten ignoreres eller læses. I dette indlæg vil jeg vise dig, hvordan du finder den perfekte skrifttype til din hjemmeside!

Scrollytelling

Scrollytelling betyder visuel historiefortælling gennem animeret rulning. Dette giver hjemmesiden personlighed og følelsen af interaktivitet. Langt indhold er let fordøjeligt. Historier er opbygget mere interessant og kommunikeret mere tiltalende. Internettet bruges i stigende grad som et medium for interaktiv historiefortælling. 

Tendenser inden for webdesign-2021

The New York Times bruger en forholdsvis minimalistisk tilgang her. Sidehovedet består af en parallakseeffekt efterfulgt af meget tekst. Dette er pakket ind i klare afsnit og er visuelt understøttet af Parallax sektioner i komisk stil.

Bedste fremgangsmåder, tips og retningslinjer i webdesign

Hvad gør godt webdesign? Og hvad definerer vi som en designstandard? De vigtigste tips til succesfulde hjemmesider kan findes i min artikel om de bedste praksis i webdesign.

Tendenser inden for webdesign-2021

Et interessant eksempel er også Webflow. Hjemmesiden inviterer dig til en rejse gennem kunsthistorien på jagt efter webdesign tendenser i fremtiden.

Tendenser inden for webdesign-2021

Selv mobil, mister effekten ikke sin charme.

Tendenser inden for webdesign-2021

canals-amsterdam.nl kombinerer scrollytelling med vandret navigation, animation og parallakse. En særlig detalje: Den træge menu ændrer baggrundsfarven afhængigt af farven på den aktuelle position. Du kan finde flere oplysninger om emnet i Scrollytelling-guiden.

Rullekort

Ved at rulle kort mener vi lodret eller vandret rulning, som klikker ind i det næste vindue, før vi fortsætter med at navigere. Visuelt kan du fremhæve dette, for eksempel ved farveseparationer, som giver mere af følelsen af kort, som i eksemplet med Green Meadow.

Tendenser inden for webdesign-2021

En anden særlig funktion her er teksten animationer, som genindlæses igen og igen, samt Infinite Scrolling, som giver os følelsen af en uendelig hjemmeside.

2. Design kompositioner og layout

Integration af de fysiske egenskaber ved det produkt, der skal sælges

Tendenser inden for webdesign-2021

Ora London sælger blandt andet neglelak. De bruger teksturen af deres produkt til at designe deres hjemmeside.

Tendenser inden for webdesign-2021

Main Squeeze Juice hjemmeside, er der farvepletter, der kan ligne en udvasket version af deres frugtsaft. Denne effekt bruges også til nogle overskrifter.

Tendenser inden for webdesign-2021

Ora Blomsterstyrelsen har visuelt understreget sin hjemmeside med blomster fra sit sortiment. 

Neomorfi

Neumorfi eller neumorfi har længe været erklæret en tendens. Men hvorfor de minimalistiske designs hidtil er blevet behandlet med aversion i den kreative scene skyldes primært disse to grunde:

  1. Neumorfi er svært at reproducere. Ikke genereret korrekt, designet hurtigt synes ganske uprofessionelt.
  2. Med bløde skygger og lidt kontrast kan elementer i neomorfidesign give problemer for slutbrugerne. 

I 2021 forventes den nyemorfi-tendens nu at starte lidt mere. Skabelonen Neu Vision viser en hverdagsvenlig integration af neumorfi.

Tendenser inden for webdesign-2021
Selvstudium: Sådan oprettes nyemorfielementer

Med værktøjet Neumorphism.io kan du selv prøve nymorfi. Du vil modtage den tilsvarende CSS-kode direkte. Mere information om emnet kan findes her i denne artikel.

Abstrakte kompositioner, Collage & Mixed Media

Som tidligere nævnt, hjemmesider får lov til at vise mere personlighed. En måde at opnå dette på er gennem abstrakte kompositioner eller collager. Blanding af forskellige medier – det være sig håndtegnede illustrationer kombineret med perfekte geometriske former – er også tilladt.

Tendenser inden for webdesign-2021

City Circus bruger collager overalt på sin egen hjemmeside.

Sløring og matteret glas effekt

Frosted Glass Effect er ideel til at gøre tekst læsbar i billeder. Effekten er også velegnet som en svæveeffekt. For instruktioner om, hvordan du konverterer Frosted Glass Effect i CSS, klik her.

Tendenser inden for webdesign-2021
Kilde: Codepen.io

3. Farver

Økologisk og diskret

Tendenser inden for webdesign-2021

Hjemmesiden bruger pureorganix.ca ret få og lyse, naturlige farver. De organiske farver har været stigende i nogen tid og vil fortsat være et problem i 2021.

Sort hvid

Tendenser inden for webdesign-2021
Hjemmeside: UX Database

Den komplette afkald på farve gør din hjemmeside ser minimalistisk, ryddelig og klar ud. UX Database har godt kompenseret for den alvorlige touch skabt af fjernelse af venlige nuancer med brug af illustrationer.

UX Design & Web Brugervenlighed

Hvorfor skal du være særligt interesseret i brugervenlighed og brugeroplevelse som webdesigner? Og hvordan opnår du reel merværdi gennem god UX for dine brugere? Jeg vil fortælle dig dette og mere i denne artikel.

4. 3D

Ikoner og billeder

Som med Virtual Reality (VR) har vi ventet længe på, at 3D-objekter endelig har oplevet deres store gennembrud. Som i begyndelsen af hvert år forventes 3D-elementer og VR at spille en større rolle fra nu af. Det er ikke anderledes i 2021.

3D-elementer vil i stigende grad blive brugt i 2021: for eksempel som erstatning for 2D-ikoner og illustrationer, til visning af produkter og som geometriske designelementer.

Vi vil også se 3D som en interaktiv del af hjemmesiden, som med agenturet Dogstudio.

Tendenser inden for webdesign-2021

Eller som et statisk eller animeret element, som det ses i det næste eksempel.

Tendenser inden for webdesign-2021
Hjemmeside: https://www.yaya.co/

E-handel

Augmented reality er blevet brugt til e-handel formål i fortiden. Ligesom IKEA-appen.

Tendenser inden for webdesign-2021

Diesel, på den anden side, er mere afhængig af den interaktive 3D-variant.

Tendenser inden for webdesign-2021

Begge tilgange giver mening for det pågældende produkt. At være i stand til at teste møbler næsten i deres fremtidige hjem ikke kun reducerer chancerne for en mis-køb. Den app er også sjovt og giver incitamenter til udsmykning og shopping.

Diesel, på den anden side, forsøger at skabe en slags 3D Feel ved at tillade slutbrugerne at gennemgå produktet og føle sig virtuelle, før de køber det.

Tidligere var integrationen af augmented/virtual reality-elementer og 3D-elementer ofte meget dyr og derfor forbeholdt større virksomheder. Med de nye værktøjer er integrationen af Augmented Reality (AR) nu også blevet mulig for mindre virksomheder.

Her er to eksempler:

5.

Internettet bliver mere personligt, mere interaktivt og tilpasser sig os

Google tilbyder et eksempel på interaktivitet med sin Blob Opera. De egne kreationer kan også registreres og dermed deles med alle.

Tendenser inden for webdesign-2021

Madwells kontaktside er hvert grafisk element interaktivt.

Tendenser inden for webdesign-2021

Med en masse personlighed tilbyder Sennep sine ydelser.

Tendenser inden for webdesign-2021

Webdesign til årsager

Desuden har kun 2020 vist, at vi alle kan netværke med hinanden, og det skal vi endda til dels gøre. Internettet er blevet mere menneskeligt. Webdesign for årsager bliver mere og mere relevant. Etiske hjemmesider, grønne hjemmesider, hjemmesider til at stå op for os og vores medmennesker (for blot at nævne nogle få emner) er vokset i betydning i løbet af det seneste år. Vi kan forvente, at denne tendens vil fortsætte kraftigt i hvert fald i 2021.

Konklusion

Holde kontakten med venner fra hele verden, der arbejder på afstand, markedsføring af produkter og tjenester online - disse er ikke nyheder. Og dog har det hidtil været mere en realitet for et mindretal af befolkningen. 

Mange virksomheder og mennesker har traditionelt behandlet spørgsmålet i dette land: Selv om vi har mulighed for web tilstedeværelse og netværk, kan vi kun bruge det på en sekundær måde. Personlig kontakt var i forgrunden. 

Funktionaliteten af vores online produkter er særlig vigtig – også fordi konkurrencen er meget større. Og i fremtiden har vi ikke længere råd til at lade spørgsmål som tilgængelighed være af vejen.

Selvfølgelig kan et videoopkald ikke erstatte et vigtigt personligt møde. Men måske vil den nuværende situation hjælpe os med at skelne mellem, hvad virkelig vigtige møder er, og hvad der kan gøres ved at ringe. Denne tilgang blev ofte afspejlet i kvaliteten af den digitale tilstedeværelse. 

Sætninger som "Hvis nogen ønsker at vide dette, vil de ringe til os eller spørge" Jeg har hørt oftere i fortiden, når de planlægger online-projekter. Med det nye fokus på isolation og hjemmekontor, har vi ikke længere denne luksus.

Derfor er mobilt design, ydeevne, brugervenlighed og co. fortsat vigtige faktorer i skabelsen af dit website i 2021.

Tendenser inden for webdesign-2021
Kvidre

Ved at indlæse tweetet accepterer du Twitters privatlivspolitik.
Få mere at vide

Indlæse indhold

PGJsb2NrcXVvdGUgY2xhc3M9InR3aXR0ZXItdHdlZXQiIGRhdGEtd2lkdGg9IjU1MCIgZGF0YS1kbnQ9InRydWUiPjxwIGxhbmc9ImVuIiBkaXI9Imx0ciI+UGVvcGxlIG9mdGVuIGZvcmdldCBhYm91dCBjb2duaXRpdmUgaW1wYWlybWVudC4gIE5vLCB0aGF0JiMzOTtzIG5vdCBhbiBpbnRlbnRpb25hbCBwdW4uIDxicj5OaWNlIGV4dGVuc2lvbiBvZiA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL01pY3Jvc29mdD9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5AbWljcm9zb2Z0PC9hPiBpbmNsdXNpdmUgZGVzaWduIHdlIGRpZCBhdCB0aGUgPGEgaHJlZj0iaHR0cHM6Ly90d2l0dGVyLmNvbS9Nb0pHb3ZVSz9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5ATW9KR292VUs8L2E+LiAoYXBvbG9naWVzIHRvIGxhcnJ5IG1pbGVzLCB0b21hc3oga29sZWNraSwgamVuIGxlbW9uIGV0IGFsIGNhbiYjMzk7dCBmaW5kIHlvdSBvbiB0d2l0dGVyISkgPGEgaHJlZj0iaHR0cHM6Ly90LmNvL3NkU0hQMDRGeWYiPnBpYy50d2l0dGVyLmNvbS9zZFNIUDA0RnlmPC9hPjwvcD4mbWRhc2g7IE1hcmsgTWNFbGhhdyAoQG1hcmttY2VsaGF3KSA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL21hcmttY2VsaGF3L3N0YXR1cy85ODkwNDk5MzM4MTc5NjI0OTc/cmVmX3NyYz10d3NyYyU1RXRmdyI+QXByaWwgMjUsIDIwMTg8L2E+PC9ibG9ja3F1b3RlPjxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL3BsYXRmb3JtLnR3aXR0ZXIuY29tL3dpZGdldHMuanMiIGNoYXJzZXQ9InV0Zi04Ij48L3NjcmlwdD4=
Dine spørgsmål om webdesign tendenser 2021
Fortæl os dine spørgsmål og forudsigelser om Webdesign Trends 2021 nedenfor i kommentarerne - vi er glade. Du vil vide mere om nye bidrag omkring WordPress blive informeret? Følg derefter RAIDBOXES på Twitter,Facebook og via vores nyhedsbrev.

Efter at have studeret spildesign og kreativ skrivning i grønne Auckland, Sonja Hoffmann har specialiseret sig i web- og appdesign og dets udvikling. Hendes fokus er på gamification og udforske brugernes motivation og dens erfaringer, kombineret med en passion og nysgerrighed for teknologiske tendenser.

Lignende artikler

Kommentarer til denne artikel

Skriv svar på en

Din e-mailadresse vil ikke blive offentliggjort. Obligatoriske felter er markeret med *.