Webdesign Trends 2021: Scrollytelling, 3D-effekter & Mer interaktion

Sonja Hoffmann Senast uppdaterad den 22 februari 2021
9 Min.
Webbdesign Trender-2021
Senast uppdaterad den 22 februari 2021

Efter ett år som det vi just har upplevt tar vi en titt på de kommande trenderna nästan utopiska drag. Vem hade trots allt trott 2020 hur snabbt världen kan och kommer att förändras? Och hur snabbt vi kan anpassa oss till förändringarna. Låt oss ta en titt på webbdesigntrenderna 2021 tillsammans!

Det nya normala har oss alla under kontroll: tekniken har blivit viktigare för oss och är mer integrerad i vår vardag. Det innebär att vår teknik måste röra sig i en riktning som möjliggör mer anpassning, integration och interaktion. Och för oss alla. 

Lockdown, Homeoffice och Co. har fokuserat mer på det digitala. Men denna trend orsakar också snabb tillväxt av digitala produkter. Detsamma gäller e-handeln. Allt detta kräver mer individualitet och skicklighet för att positionera dig mot ett större antal konkurrenter.

Just nu är det viktigt att fokusera på slutanvändarna. Det handlar om att förvåna dem, integrera dem och anpassa Internet. Och fokusera alltid på maximal funktionalitet.

Under det nya året ser vi därför fler möjligheter till personalisering. Vi ser oftare möjligheten att växla mellan mörkt/ljusläge eller till och med att justera färgerna på ett tema själva.

Vi ser mönster som är mer vågade och mindre symmetriska. Mottrenden till integrationen av organiska färger och element kvarstår. Vi uppnår mer personlighet genom collage, blandade medier och integration av animationseffekter. Låt oss ta en titt på Webdesign Trends 2021 i detalj!

1. Rullning

Parallax & Parallax Scroll Animationer

Vi har använt Parallax, särskilt med enkla bilder, i flera år. Nyligen har komplexa Parallax Scroll-animeringar lagts till. Korrekt använda omvandlar dessa din webbplats från en platt 2D-liknande bakgrund till en interaktiv digital värld - jämförbar med en teaterscen.

Vad är Parallax-effekten?

Parallax effekter uppstår när element är på olika avstånd från varandra. Om de rör sig genom rullning uppfattar vi deras rörelse som varierande hastighet.

Observera: För användare som kämpar med yrsel kan för mycket rörelse på din webbplats orsaka obehag.

Några tips för att framgångsrikt integrera Parallax-effekten:

  • Se till att viktig information alltid visas och inte trumfas av effekten.
  • Se till att alla sidans funktioner upprätthålls på alla enheter, även under suboptimala förhållanden, till exempel dålig Internetmottagning.
  • Minimera användningen av parallaxeffekter.
  • Överväg att integrera ett alternativ för att inaktivera effekten.
Webbdesign Trender-2021

Spelet Firewatch webbplats använder åtta olika PNG-bilder i rubriken, vilket tillsammans animerar känslan av ett riktigt landskap. I mobilversionen ersätts dock parallaxeffekten av en statisk bild.

Rulla animeringar

Inte heller helt ny, men än så länge mindre uppmärksammad, är omfattande rullningsanimationer – förmodligen inte minst för att deras komposition kräver ritfärdighet. Som alltid är mindre mer. Väl använd, rullningsanimationer ger din webbplats ett harmoniskt flöde. 

Webbdesign Trender-2021

ToyFight är en kreativ byrå baserad i Manchester. Genom skicklig användning av animationer som utlöses av rullning ger byrån sin webbplats livlighet och personlighet. Animationerna fungerar också på mindre enheter – även om laddningstiden påverkas något.

Webbdesign Trender-2021

Företaget Prevint erbjuder ett helhetskoncept mot sexualiserat våld. Minimal användning av rullningsanimationer visualiserar de tre viktigaste förebyggande försiktighetsåtgärderna. Special är användningen av vertikal och vågrät rullning: huvudnavigeringen är på vertikal nivå, medan vågrät rullning går djupare in i respektive ämne.

Navigeringspilarna längst ned på skärmen ger ytterligare orientering. På mobilsidan sker navigeringen enbart genom att trycka på knappar.

Vågrät rullning

Även om åsikter om horisontell rullning har avvikit kraftigt tidigare, ser vi fler och fler webbplatser med det. Särskilt ur användarupplevelsens synvinkel ansågs deras användning tidigare vara ganska tvivelaktig.

Webbdesign Trender-2021

Hem société webbplats, som är strukturerad som en en personsökare, fungerar helt horisontellt orienterad. Sticky Navigation, som vi vanligtvis hittar högst upp, är till vänster. Det fungerar på samma sätt med Ankarlänkar som med en lodrätt justerad One Pager. På mobiltelefonen får vi sidan visad vertikalt.

Webbdesign Trender-2021

Webbplatsen för Kwok Yin Mak är en designportfölj som rullar horisontellt genom alla integrerade sidor. Skillnaden mot Home Société här är användningen av Infinite Scrolling: Om du kommer till slutet av en sida kommer du att transporteras tillbaka till början obemärkt. Den här sidan avstår också från vågrät rullning när du är på språng.

Några tips för hur du kan integrera vågrät rullning:

  • Ge användarna: ett plan B, till exempel pilar eller en klibbig meny, för att navigera på sidan.
  • Tänk på vilket innehåll din sida drar nytta av vågrät rullning.
  • Försök att sätta dig själv i en riktning så mycket som möjligt. Att växla mellan riktningar förvirrar alltför ofta användarna:innen.
  • Var försiktig med blandningen av lång text och vågrät rullning. Den här layouten kan göra texten mindre läsbar.
Vilket teckensnitt passar min webbplats?

Ett lämpligt teckensnitt gör inte bara din webbplats mycket mer intressant visuellt. Teckensnitt har ett avgörande inflytande på om textavsnitt ignoreras eller läses. I det här inlägget ska jag visa dig hur du hittar det perfekta teckensnittet för din webbplats!

Scrollytelling

Scrollytelling betyder visuellt berättande genom animerad rullning. Detta ger webbplatsen personlighet och känslan av interaktivitet. Långt innehåll är lätt att smälta. Berättelser byggs upp mer intressant och kommuniceras mer tilltalande. Internet används i allt högre grad som ett medium för interaktivt berättande. 

Webbdesign Trender-2021

New York Times använder ett relativt minimalistiskt tillvägagångssätt här. Rubrikbilden består av en parallaxeffekt, följt av mycket text. Detta är packat i tydliga stycken och stöds visuellt av Parallax-sektioner i komisk stil.

Metodtips, tips & riktlinjer i webbdesign

Vad gör bra webbdesign? Och vad definierar vi som en designstandard? De viktigaste tipsen för framgångsrika webbplatser finns i min artikel om bästa praxis inom webbdesign.

Webbdesign Trender-2021

Ett intressant exempel är också Webflow. Webbplatsen inbjuder dig till en resa genom konsthistorien på jakt efter framtidens webbdesigntrender.

Webbdesign Trender-2021

Även mobilen förlorar effekten inte sin överklagande.

Webbdesign Trender-2021

canals-amsterdam.nl kombinerar scrollytelling med vågrät navigering, animering och parallax. En speciell detalj: Fästmenyn ändrar sin bakgrundsfärg beroende på färgen på den aktuella positionen. Mer information om ämnet finns i Scrollytelling Guide.

Rullande kort

Genom att rulla kort menar vi vertikal eller vågrät rullning, som snäpperin i nästa fönster innan vi fortsätter navigera. Visuellt kan du markera detta, till exempel genom färgseparationer, vilket ger mer av känslan av kort, som i exemplet med Green Meadow.

Webbdesign Trender-2021

En annan speciell funktion här är textanimationerna, som laddas om om och om igen, liksom Infinite Scrolling, vilket ger oss känslan av en oändlig webbplats.

2. Designkompositioner och layout

Integrering av de fysiska egenskaperna hos den produkt som ska säljas

Webbdesign Trender-2021

Ora London säljer bland annat nagellack. De använder strukturen på sin produkt för att utforma sin webbplats.

Webbdesign Trender-2021

Main Squeeze Juice webbplats finns det färgfläckar som kan likna en urtvättad version av deras fruktjuicer. Den här effekten används också för vissa rubriker.

Webbdesign Trender-2021

Ora Blomsterverket har visuellt understrukit sin hemsida med blommor från sitt sortiment. 

Nymorfism

Neumorfism eller neumorfism har länge förklarats vara en trend. Men varför de minimalistiska designerna hittills har behandlats med aversion i den kreativa scenen beror främst på dessa två skäl:

  1. Neumorfism är svårt att reproducera. Inte genereras ordentligt, designen verkar snabbt ganska oprofessionell.
  2. Med mjuka skuggor och liten kontrast kan element i neomorfismdesign orsaka problem för slutanvändare. 

Under 2021 väntas nu den nya morfismtrenden starta lite mer. Mall Neu Vision visar en vardagsvänlig integration av neumorfism.

Webbdesign Trender-2021
Handledning: Hur man skapar nya morfismelement

Med verktyget Neumorphism.io du prova nymorfism för dig själv. Du får motsvarande CSS-kod direkt. Mer information om ämnet finns här i den här artikeln.

Abstrakta kompositioner, Collage & Blandade Medier

Som nämnts tidigare får webbplatser visa mer personlighet. Ett sätt att uppnå detta är genom abstrakta kompositioner eller collage. Blandning av olika medier – om det är handritade illustrationer i kombination med perfekta geometriska former – är också tillåten.

Webbdesign Trender-2021

City Circus använder collage var som helst på sin egen hemsida.

Oskärpa och frostat glas effekt

Frosted Glass Effect är idealisk för att göra text läsbar i bilder. Effekten är också väl lämpad som en hovringseffekt. För instruktioner om hur du konverterar Frosted Glass Effect till CSS, klicka här.

Webbdesign Trender-2021
Källa: Codepen.io

3. Färger

Ekologiskt och diskret

Webbdesign Trender-2021

Webbplatsen använder pureorganix.ca få och ljusa, naturliga färger. Ekologiska färger har varit på uppgång under en tid och kommer att förbli ett problem under 2021.

Svart vit

Webbdesign Trender-2021
Hemsida: UX-databas

Det fullständiga avståendet av färg gör att din webbplats ser minimalistisk, snygg och tydlig ut. UX Database har väl kompenserat för den allvarliga beröring som skapas genom eliminering av vänliga nyanser med hjälp av illustrationer.

UX Design & Webb användbarhet

Varför ska du vara särskilt intresserad av användbarhet och användarupplevelse som webbdesigner:in? Och hur uppnår du verkligt mervärde genom bra UX för dina användare: inuti? Jag ska berätta detta och mer i den här artikeln.

4. 3D

Ikoner och bilder

Precis som med Virtual Reality (VR) har vi väntat länge på att 3D-objekt äntligen ska få uppleva sitt stora genombrott. Precis som i början av varje år förväntas 3D-element och VR spela en större roll från och med nu. Det här är inte annorlunda för 2021.

3D-element kommer i allt högre grad att användas under 2021: till exempel som ersättning för 2D-ikoner och illustrationer, för att visa produkter och som geometriska designelement.

Vi kommer också att se 3D som en interaktiv del av webbplatsen, som med byrån Dogstudio.

Webbdesign Trender-2021

Eller som ett statiskt eller animerat element, som visas i nästa exempel.

Webbdesign Trender-2021
Hemsida: https://www.yaya.co/

E-handel

Augmented reality har tidigare använts för e-handelsändamål. Precis som IKEA-appen.

Webbdesign Trender-2021

Diesel, å andra sidan, förlitar sig mer på den interaktiva 3D-varianten.

Webbdesign Trender-2021

Båda metoderna är meningsfulla för respektive produkt. Att kunna testa möbler virtuellt i sitt framtida hem minskar inte bara risken för ett felaktigt köp. Appen är också rolig och ger incitament för att dekorera och shoppa.

Diesel, å andra sidan, försöker skapa ett slags 3D-känsla genom att låta slutanvändare granska produkten och känna sig virtuella innan de köper den.

Tidigare var integrationen av augmented/ virtual reality-element och 3D-element ofta mycket dyr och därför reserverad för större företag. Med de nya verktygen har integrationen av Augmented Reality (AR) nu också blivit möjlig för mindre företag.

Här är två exempel:

5. Innehåll

Webben blir mer personlig, mer interaktiv och anpassar sig till oss

Google erbjuder ett exempel på interaktivitet med sin Blob Opera. De egna skapelserna kan också spelas in och därmed delas med alla.

Webbdesign Trender-2021

Madwells kontaktsida är varje grafiskt element interaktivt.

Webbdesign Trender-2021

Med mycket personlighet erbjuder Sennep sina tjänster.

Webbdesign Trender-2021

Webbdesign för orsaker

Dessutom har bara 2020 visat att vi alla kan nätverka med varandra, och till och med delvis måste göra det. Webben har blivit mer mänsklig. Webbdesign för orsaker blir allt mer relevant. Etiska webbplatser, gröna webbplatser, webbplatser för att stå upp för oss och våra medmänniskor (för att bara nämna några ämnen) har vuxit i betydelse under det senaste året. Vi kan förvänta oss att denna trend kommer att fortsätta starkt åtminstone under 2021.

Slutsats

Att hålla kontakten med vänner från hela världen, arbeta på distans, marknadsföra produkter och tjänster online - det här är inte nyheter. Och ändå har det hittills varit mer verklighet för en minoritet av befolkningen. 

Många företag och människor har traditionellt tagit itu med frågan i detta land: Även om vi har möjlighet till webbnärvaro och nätverkande använder vi den bara på ett sekundärt sätt. Personlig kontakt var i förgrunden. 

Funktionaliteten hos våra onlineprodukter är särskilt viktig – också för att konkurrensen är mycket större. Och i framtiden har vi inte längre råd att lämna frågor som tillgänglighet ur vägen.

Naturligtvis kan ett videosamtal inte ersätta ett viktigt personligt möte. Men kanske kommer den nuvarande situationen att hjälpa oss att urskilja vad som verkligen är viktiga möten och vad som kan göras genom att ringa. Detta tillvägagångssätt återspeglades ofta i kvaliteten på den digitala närvaron. 

Fraser som "Om någon vill veta detta kommer de att ringa oss eller fråga" Jag har hört oftare tidigare när jag planerar onlineprojekt. Med det nya fokuset på isolering och hemmakontor har vi inte längre denna lyx.

Det är därför mobil design, prestanda, användbarhet och co. förblir viktiga faktorer för att skapa din webbplats 2021.

Webbdesign Trender-2021
Twitter

Genom att läsa in tweeten accepterar du Twitters sekretesspolicy.
Läs mer

Läsa in innehåll

PGJsb2NrcXVvdGUgY2xhc3M9InR3aXR0ZXItdHdlZXQiIGRhdGEtd2lkdGg9IjU1MCIgZGF0YS1kbnQ9InRydWUiPjxwIGxhbmc9ImVuIiBkaXI9Imx0ciI+UGVvcGxlIG9mdGVuIGZvcmdldCBhYm91dCBjb2duaXRpdmUgaW1wYWlybWVudC4gIE5vLCB0aGF0JiMzOTtzIG5vdCBhbiBpbnRlbnRpb25hbCBwdW4uIDxicj5OaWNlIGV4dGVuc2lvbiBvZiA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL01pY3Jvc29mdD9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5AbWljcm9zb2Z0PC9hPiBpbmNsdXNpdmUgZGVzaWduIHdlIGRpZCBhdCB0aGUgPGEgaHJlZj0iaHR0cHM6Ly90d2l0dGVyLmNvbS9Nb0pHb3ZVSz9yZWZfc3JjPXR3c3JjJTVFdGZ3Ij5ATW9KR292VUs8L2E+LiAoYXBvbG9naWVzIHRvIGxhcnJ5IG1pbGVzLCB0b21hc3oga29sZWNraSwgamVuIGxlbW9uIGV0IGFsIGNhbiYjMzk7dCBmaW5kIHlvdSBvbiB0d2l0dGVyISkgPGEgaHJlZj0iaHR0cHM6Ly90LmNvL3NkU0hQMDRGeWYiPnBpYy50d2l0dGVyLmNvbS9zZFNIUDA0RnlmPC9hPjwvcD4mbWRhc2g7IE1hcmsgTWNFbGhhdyAoQG1hcmttY2VsaGF3KSA8YSBocmVmPSJodHRwczovL3R3aXR0ZXIuY29tL21hcmttY2VsaGF3L3N0YXR1cy85ODkwNDk5MzM4MTc5NjI0OTc/cmVmX3NyYz10d3NyYyU1RXRmdyI+QXByaWwgMjUsIDIwMTg8L2E+PC9ibG9ja3F1b3RlPjxzY3JpcHQgYXN5bmMgc3JjPSJodHRwczovL3BsYXRmb3JtLnR3aXR0ZXIuY29tL3dpZGdldHMuanMiIGNoYXJzZXQ9InV0Zi04Ij48L3NjcmlwdD4=
Dina frågor om webbdesigntrender 2021
Berätta om dina frågor och förutsägelser om Webdesign Trends 2021 nedan i kommentarerna – vi är glada. Du vill veta om nya bidrag runt WordPress informeras? Följ sedan RAIDBOXES på Twitter,Facebook och via vårt nyhetsbrev.

Efter att ha studerat speldesign och kreativt skrivande i lummiga Auckland, Sonja Hoffmann specialiserar sig på webb- och appdesign och dess utveckling. Hennes fokus ligger på gamification och utforska användarmotivation och dess erfarenhet, tillsammans med en passion och nyfikenhet för tekniska trender.

Liknande artiklar

Kommentarer om den här artikeln

Skriva en kommentar

Din e-postadress kommer inte att publiceras. Obligatoriska fält är markerade med *.