Trender i webbdesign 2022

av Frida Nyvall

Vår årliga förutsägelse om vad som kommer att trenda inom webbdesign och varför.

En personlig touch

För inte länge sedan skämtades det om att alla webbsidor såg likadana ut – hade samma struktur och använde samma typsnitt (väldigt ofta Open Sans).

Webbdesign kommer under 2022 utseendemässigt att våga ta ut svängarna lite mer. För att stärka sitt varumärke och särskilja sig från mängden förutspår vi att webbsidor framöver kommer att få en mer individuell stil.

Detta åstadkoms t.ex. genom att använda ovanliga och icke-traditionella typsnitt blandat med kreativa bildredigeringar och animationer.

Webbtekniker som underlättar för kreativa och nytänkande designer är bl.a. möjligheten att skapa olika typer av blend modes och bildfilter (läs mer och se exempel på dessa tekniker) och den ökande andelen variabla typsnitt.

Text i fokus

Color fonts

En ny teknik för mer kreativa typsnitt är sk. ”color fonts”, som till skillnad från vanliga typsnitt kan ha flera färger, texturer, opacitet och gradienter. Notera dock att colorfonts för närvarande inte stödjs av alla webbläsare. Läs mer om color fonts på www.colorfonts.wtf.

Animerad text

Skapa ett personligt, annorlunda och kreativt uttryck med hjälp av animerad text. Animera hela textblock, t.ex. som en rad av text som rör sig horisontellt på skärmen.

Det går också att animera bokstäver längs med en bana enklare än tidigare då browserstödet för CSS Motion Path ökar.

Sedan tidigare går det bra att använda SVG banor för att animera illustrationer av text, som:

See the Pen
Script SVG path animation by Frida Nyvall (@fridanyvall)
on CodePen.

Ytterligare ett sätt att animera text är att använd variabla typsnitt för att animera text.

Läs mer om variabla typsnitt i vår bloggpost ”Variabla teckensnitt”, och om hur man kan implementera dessa i ”How to Implement Variable Fonts on the Web”.

Färg, form & struktur

Färgstarkt

Färgerna på webben följer klädmodet, och blir klarare och starkare. Tack vare nya tekniska möjligheter går det att bättre återge klara och starka färger på webben. LAB och LCH färger kommer i framtiden att kunna användas på webbsidor (nuvarande browsersupport är begränsat till senaste Safari), och göra det möjligt att visa fler och klarare färger.

Claymorphism

Årets ”-ism” är claymorphism, och går ut på att skapa bilder som påminner om objekt skapade i 3D av lera. Mjuka kanter, fluffighet och ett intryck av att objekten är uppblåsta som luftmadrasser.

Webbutvecklare kan använda stylebiblioteket Clay.css för att lägga till claymorphism känsla till webbsidor. Läs mer om trenden här.

Gryn och glitchar

Gryniga, repiga och icke perfekta bilder i 90-tals stil går hand i hand med både retrotrenden och viljan att skapa ett mera eget uttryck.

Glitchyimage är ett verktyg för att skapa egna glitchiga bilder online. Skapa bilder med brus via ffuel.co eller cssmatic.

Immersion

Tidigare års trend att skapa mer verklighetstrogna upplevelser återkommer. De senaste årens upplevelser av isolering och karantän har gjort det viktigt att kunna skapa engagemang och intresse även om användaren inte är på plats. Detta har i synnerhet påverkat e-handelsbranschen.

När kunder inte har möjlighet att komma till en fysisk butik, blir det viktigare att företagets webbshop ger en proffsig upplevelse. Samtidigt ökar konkurrensen på e-handelsmarknaden. Ett sätt för företag att särskilja sig från mängden är att ge kunderna samma upplevelse som i en fysik butik, t.ex. med hjälp av digital teknik som låter kunder interagera med webbsidan för att skräddarsy sina inköp eller ta del av produktpresentationer.

Från ett tekniskt perspektiv trendade datavisualiseringsverktyget D3 under pandemins mer intensiva fas. Nu trendar istället verktyg för 3D animation och interaktion, som Three.js.

• trend
• webbdesign