Webbdesign trender 2023
20 Feb 2023
Trender i webbdesign 2023
Våra förutsägelser om vad som kommer att trenda inom webbdesign 2023.
Mycket av det vi skrev upp på trendrapporten för 2022 hänger med även detta år, som 3D-världar, starka färger och designinfluenser från digitaliseringens barndom.
Trender från 2022 som hänger kvar 2023
Starka, klara färger
Redan förra året pratade vi om att färgerna på webben skulle bli klarare i takt med nya tekniska möjligheter. Förutom möjligheterna att visa fler och klarare färger, kommer det även att finnas större möjligheter att i framtiden manipulera dem med color-mix().
Rörelse
Eftersom tiden för att fånga besökarnas uppmärksamhet blir kortare och kortare, minskar tiden för att hinna leverera sitt budskap.
Om en bild är värd mer än tusen ord, vad är då värdet på en video? Förutom video, kan rörelse även användas för mikroanimationer för att förstärka och tydliggöra användargränssnittet. En trend i trenden är animerade cursors, där egna bilder används istället för den vanliga muspekaren.
I framtiden hoppas vi på större tekniska möjligheter att kunna animera elements position på samma sätt som i mobilapplikationer, med hjälp av det kommande View Transitions API.
Nostalgi och Y2K
Förra året noterade vi trenden med glitchiga bilder i 90-talsanda, och i år hoppar vi fram till 00-talet och fortsätter på samma spår. Pixliga typsnitt och bilder, grälla färger och designinspiration från internets barndom. Inspireras på Web Design Museum.
Nya trender 2023
Maximalism
Mycket är helt enkelt mest. Överlappande element där texter och bilder animeras över varandra när användaren skrollar på sidan, starka klara färger och stora blaffiga rubriker kännetecknar stilen.
Maximalism exempel: studio-job.com
När tiden för att fånga användarens intresse hela tiden verkar krympa, kan maximalism vara ett sätt att nå fram.
En utmaning med maximalism är att webbsidan lätt kan blir svårnavigerad eller svår att använda då webbsidan riskerar att bli lite kaotisk.
Stora rubriker
En trend är att rubrikerna blir större och större. Gärna med ett lite udda, personligt och noga utvalt typsnitt.
Vår tolkning av trenden är att storleken på rubrikerna har ökat för att fånga besökarens beryktat kortlivade uppmärksamhet.
Djup
Bilder och animationer ska ha 3D effekter och djup, och det är åter inne med realism i effekterna. 3D trenden är en utveckling av tidigare års trender med glassmorphism och claymorphism. Syftet med att lägga till djup i designen är att skapa engagemang och levandegöra interaktiva moment och skräddarsydda upplevelser.
Trenden kan anammas på olika sätt beroende på budget. Exempel på användningar med större budget:
Immersiva världar i 3D, där användarens navigation och upplevelse påminner om ett dataspel. Se exempel från Google Interland.
Google Interland
Gamification som adaptiva berättelser där användaren kan göra val som formar händelsernas gång. Se exemplet ”The Magical Pantry”.
The Magical Pantry: interaktiv berättelse
Interaktiva produkter, som interaktiva produktsidor. Se exempel från Lacoste.
Lacoste: Draw your polo
Exempel på användningar för en lägre budget:
Parallax scrolling hänger fortfarande med, efter att ha använts lite för flitigt för ett par år sedan.
Microanimationer för t.ex. meny, knappar, laddningsikoner och popuprutor.
Bloggande
Twitters förändringar har fått många användare att fundera på riskerna med att förlita sig på en enskild tredjepartsplattform för marknadsföring och kunskapsbyggande. Tidigare diskussioner om betalväggar (bl.a. för Medium) och vem som egentligen äger innehållet som postas på sociala medier eller bloggplattformar har lett till att allt fler känner sig manade att ta kontroll över sitt innehåll.
För användare som använt Twitter för att publicera och samla information, kan en egen blogg vara ett sätt att ta kontrollen över sitt innehåll.
Vi förutspår därför ett uppsving för den personliga bloggen och därmed även ett uppsving för mer personliga uttryck på webbsidor i mindre format.
AI-genererat innehåll
Personligare uttryck och färre standardiserade bilder med AI-genererat innehåll. Dessa gör det billigare och att det går snabbare att få de bilder man vill ha. Bildbanker blir mindre hett och risken att hitta samma stockfoto på konkurrentens hemsida minskar.
De AI-genererade bilderna kan vara realistiska men med fantasifulla orealistiska inslag – eftersom de går enklare och snabbare att uppnå när man kan be AI skapa bilden.
Roboten i herobilden högst upp på den här sidan är t.ex. genererad med verktyget DALL-E 2.
Förutom bilder finns det även AI drivna verktyg för att generera färgpaletter som Colormagic, Colormind och Khroma.
Galileo AI utvecklar en lösning för att skapa användargränssnitt utifrån textbeskrivningar.
I framtiden kommer det förmodligen också att gå att generera videos via text. Google jobbar på ett system för detta som heter Imagen Video och Metas motsvarighet heter Make.