Trender i webbdesign 2020

av Frida Nyvall

Det här tror vi kommer att trenda i webbdesign under 2020. Vi reder också ut vad neumorphism är och varifrån trenden har kommit.

Neumorphism

Neumorphism är namnet på en trend inom webbdesign som kombinerar de två tidigare trenderna skeuomorphism och platt design till en ny trend.

För att förstå hur och varför neumorphism har uppstått kan vi titta närmare på dess föregångare:

Skeuomorphism

När webbsidor och mobilappar var relativt nya begrepp, var det en fördel om användarna hade tydliga visuella ledtrådar i webbsidans eller appens användargränssnitt som påminde om liknande funktionalitet i den verkliga världen för att förstå hur webbsidan eller appen skulle användas. Det blev därför populärt att skapa så realistiska designelement som möjligt.

Papper, läderpärmar, trähyllor, metallknappar och skinande glasytor användes för att ge användaren rätt associationer med webbsidornas och apparnas funktionalitet.

Bland de mest pådrivande för trenden var företaget Apple. Trenden kallades för skeuomorphism.

Nackdelen med skeuomorphism var att den höga detaljrikedom som krävdes för att skapa alla bilder gjorde att de tog lång tid att producera. Detaljrikedomen innebär även att bilderna inte kunde utnyttja nyare filformat som var mindre, mer flexibla och gick att animera.

Platt design

I takt med att användare började bli mer vana vid att tolka användargränssnitt även utan tydliga jämförelser med verkliga objekt, försvann den stora uppenbara fördelen med skeuomorphism.

Betoningen låg nu istället på att snabbt (kostnadseffektivt) kunna skapa flexibla användargränssnitt med bilder som kunde ändra färg beroende på tema, animeras och samtidigt vara små och lätta sett till datavikt (med andra ord hade god prestanda).

Filformatet SVG fick bättre kompabilitet med olika webbläsare och kunde användas i större utsträckning.

Skeuomorphism + platt design = neumorphism

Efter att platt design har varit rådande en längre tid har skeuomorphism gjort en mindre comeback i form av neumorphism: platt design med vissa realistiska detaljer.

Dessa detaljer består av att med hjälp av subtila skuggor och gradienter skapa en illusion av djup i bilden. Konceptet introducerades av Michal Malewicz och Jason Kelley.

Testa neumorphism på neumorphism.io, ett online-verktyg för att hitta de rätta skuggorna.

😍 I have to admit, I’m liking this whole Neomorphism thing, and this generator makes it pretty easy to make those soft effects in the browser:

In before the replies, it’s ok if you don’t like it too! Just try not to turn it into a flame war.https://t.co/ne8vSXlObc

— Sarah Drasner (@sarah_edo) February 12, 2020

Varaktighet och kritik

Eftersom trenden är relativt ny finns det i skrivande stund ingen som vet hur länge den kommer att vara. Kritiker har framhållit att neumorphism försvårar tillgänglighet eftersom kontrasten mellan exempelvis knappar och bakgrund blir mindre tydliga.

Ytterligare problem kan vara att användare har svårt för att förstå vilka element som går att interagera med. Annan kritik är att designen tar längre tid att implementera, vilket leder till längre produktionstider och högre produktionskostnader.

Andra menar att det i första hand är den yngre generationen som har vuxit upp med digitala verktyg och som därför inte behöver visuella referenser till fysiska objekt som är lämpliga målgrupper för platt design och neumorphism.

Varför kommer denna trend just nu?

Rent kostnadsmässigt är inte neumorphism billigare eller snabbare att ta fram än platt design (snarare tvärt om), och det finns heller ingen ny teknik som skulle främja neumorphism framför någon annan typ av design. Vår gissning är därför att det helt enkelt handlar om att det är dags för en visuell förändring och att en helt platta design inte längre känns modern.

Just nu verkar trenden ha blivit populär bland designers, men framtiden får utvisa om den här typen av designs så småningom kommer att ta sig hela vägen till produktion.

Darkmode

Darkmode innebär att erbjuda användare att kunna byta från ett ljust tema till ett mörkt. Fördelar med att kunna byta till en mörk version är att öka tillgängligheten för användare med nedsatt syn, spara energiåtgång och erbjuda ett mer avslappnande läsläge.

Även om darkmode främst kan vara en feature för webbsidor och webbtjänster där användaren förväntas tillbringa en längre tid framför skärmen, har trenden lett till att mörkare webbdesigner över lag blivit lite mer populära.

Byta mellan light och dark mode

Tekniskt har det blivit lättare att implementera ett alternativt dark mode tack vare möjligheten att ta hänsyn till om användaren föredrar light eller dark mode i CSS (med hjälp av media query prefers-color-scheme). (Läs mer om CSS i vår Ordlista för webbutveckling och webbdesign.) Funktionen har i skrivande stund stöd för ca 79% av alla globala internetanvändare.

Något som ytterligare underlättar implementation av olika färgteman är att CSS Custom Properties (även kallade CSS Variabler) stödjs globalt i ca 93% av alla webbläsare. Läs mer om CSS Custom Properties på vår techblogg.

Designsystem

Designsystem har blivit allt viktigare i takt med att antalet webbapplikationer och webbtjänster ökar. Större webbappar och digitala produkter byggs ofta i komponenter som sätts samman till en helhet. För att hålla designen, brandingen och användarupplevelsen konsekvent genom hela produkten har det visat sig effektivt att sätta upp bestämda regler som beskriver hur komponenter ska byggas och se ut. Dessa samlade regler utgör webbappens designsystem.

Designsystem är en övergripande beskrivning som bland annat även innefattar begrepp som brand guildelines, UI komponenter och ”pattern library”.

Flera ledande techbolag som Google, Microsoft och IBM har gjort sina designsystem publika, men designsystem är inte något som bara är relevant för företag inom IT. På sidan adele.uxpin.com finns en lista över fler publika designsystem. Här återfinns företag från vitt skilda branscher – exempelvis Royal Canin och Financial Times.

För den som vill göra en djupdykning i designsystem tipsar vi om (gratis) boken ”Design Systems Handbook” publicerad av inVision.

Kontakta oss gärna om du behöver hjälp med att utforma ditt designsystem.

• trend
• webbdesign