Nyhetsbrev

Få artiklar, råd och tips om:

Du kan läsa mer om vår policy och vår hantering av persondata här.

Webbdesign trender 2024

Trender i webbdesign 2024

av Frida Nyvall

Vilka trender inom webbdesign ser vi fram emot 2024? Vi listar våra förutsägelser inför året: vad som är nytt, vad som hänger kvar och vad som är ute.

Trender som hänger kvar

Många av tidigare års trender hänger fortfarande med. Några av dessa är t.ex.:

  • Mjuka gradienter i flera färger.
  • Stor typografi
  • Maximalism: stora rubriker, yvigt bildspråk, färgglatt och med överlappande element.
  • Nostalgi och Y2K

3D

Detta är en trend som funnits med i flera år, men utvecklar sig under 2024.

3D surrealism

3D surrealism har hängt med ett tag, t.ex. genom olika oformliga figurer som används som designelement. Utvecklingen går nu mot att blobben ska börja röra på sig.

Exempel på animerad 3D blob från designtrends.click

Platt design är ute

00-talets skeuomorphism är på väg tillbaka, men i en modern tappning. Det handlar om att skapa texturer, dimensioner och haptic återkoppling. Det kanske inte blir så mycket läderimitation och träbokhyllor, men det ska skapas en ljusare och lättare känsla som förmedlar 3d och att elementen på webbsidan tydligt associerar till reella ting.

Brian Chesky, VD för Airbnb fastslår i en tweet att platt design nu är omodernt:

Djup kan t.ex. skapas med hjälp av parallax effekter, animationer, skuggor, gradienter, överlappande element, eller opacitet av olika slag.

Trenden kan anpassas efter budget och behov – allt från att jobba med skuggor till animerade 3D modeller.

Ett sätt att skapa djup är trenden glassmorphism från 2021, som fortfarande är inne.

See the Pen
Frosted Glass Effect with backdrop-filter blur
by Frida Nyvall (@fridanyvall)
on CodePen.

Claymorphism från 2022 nämns inte lika ofta, kanske för att stilen ställer högre krav på designelementen och därmed blir dyrare att producera.


Nya trender för 2024

AI både som verktyg och innehållsskapare

AI finns nu med på alla nivåer i webbsidornas utveckling:

  • AI som hjälpmedel vid programmering integrerat i kodediterare.
  • AI används till den funktionalitet som bestämmer vad som ska visas på webbsidan och i vilken ordning.
  • AI används för att generera innehåll som texter, bilder och filmer och översättningar till andra språk.

Tack vare AI blir det enklare för amatörer att sköta uppgifter i anslutning till webbsidan som de tidigare behövde köpa in professionell hjälp för att få gjort. Plattformar som Wix, och produkter som Adobe Express använder AI som gör det möjligt för icke professionella att skapa webbsidor och innehållsmaterial.

Kostnaden för att skaffa en webbsida minskar, eftersom mer arbete kan utföras av AI. Dock krävs det fortfarande relativt god datavana för att kunna använda de olika verktyg som krävs.

Eftersom AI erbjuder nya möjligheter att funktions- och innehållsmässigt förbättra webbsidor, ökar även förväntningarna på vad dessa kan leverera.

Kreativ typografi och serifer

Typografin 2024 förutspås vara väldigt kreativ, experimentell och lekfull. Inspiration tas från 90- och 00-talen, och behöver inte vara lika mänskligt, snällt och empatiskt som tiden under och närmast efter pandemin.

Serifer är trendiga igen. Detta kan bero på allmän nostalgi, eller helt enkelt bero på att de inte har varit populära på länge.

Skrollande animationer

Skrollande animationer är hett. Teknik som parallax animationer, där förgrund och bakgrund rör sig med olika hastighet är återigen inne.

See the Pen
Parallax Example: Firewatch Launch Site
by Stephen Koller (@StephenKoller)
on CodePen.

Parallax exempel av Stephen Koller

Nyare tekniker gör det enklare att åstadkomma andra animationer knutna till skroll. T.ex. CSS animationer längs en bana (motion-path).

Exempel på CSS animation längs en bana. Läs hela artikeln på letsbuildui.dev

Chrome (som numera även driver Edge) har utvecklat en ny teknik för skrolldrivna animationer med hjälp av CSS som har fått en hel del positiv uppmärksamhet.

Förutom att förenkla programmering av UI och UX mönster som tidigare krävt implementation i Javascript, går det också att använda tekniken på olika nya kreativa sätt för att skapa unika animationer och upplevelser.

Exempel på skrolldriven animation av Google.

Förhoppningen är att fler webbläsare ska implementera tekniken i framtiden.


Vid horisonten

Augmented Reality

Detta kommer att bli mer intressant i och med lanseringen av Apples Vision Pro. Men med tanke på prislappen kommer det att dröja innan tekniken förväntas vara tillgänglig för en bredare publik.

Sustainable web

Även en papperslös industri belastar klimatet. Elkonsumtion har blivit en fråga även för digital teknologi. Lättare webbsidor påverkar klimatet mindre eftersom de kräver mindre lagringsutrymme och laddningstider. I framtiden kanske det kommer att finnas miljöcertifieringar även för webbsidor och digitala produkter.

I en utveckling där mer och mer förväntas hända på webbsidor – fler funktioner, mer animationer, fler och större bilder och videos, kan det vara bra att komma ihåg att allt har en konsekvens och påverkan och att inget är gratis.

Tags

Fler inlägg

EAA get ready for the new law

Förbered dig på European Accessibility Act, EAA

Baseline logo on old computer

Värt att veta om Baseline

Robot writing Web Design Trends 2023 on an artboard

Webbdesign trender 2023