Efter ett år som det vi just har upplevt, vågar man ta en titt på de kommande trenderna och tar på sig nästan utopiska egenskaper. När allt kommer omkring, vem skulle ha 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.
Mellan dimension och interaktion
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 mot integrering av organiska färger och element kvarstår. Vi uppnår mer personlighet genom collage, blandade medier och integrering av animationseffekter. Låt oss ta en titt på 2021 års webbdesigntrender i detalj nu!
Webbdesigntrender 2021: Rulla
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?
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.
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.
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.
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.
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.
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 förbinda dig till en riktning så mycket som möjligt. Om du växlar mellan riktningar förvirrar du användarna alltför ofta.
- Var försiktig med blandningen av långa texter och horisontell rullning. Den här layouten kan göra dina texter mindre läsbara.
Vilket teckensnitt passar min 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.
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
Ett intressant exempel är också Webflow. Webbplatsen inbjuder dig till en resa genom konsthistorien på jakt efter framtidens webbdesigntrender.
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.
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.
Webdesign Trender 2021: Spännande layouter
Integrering av de fysiska egenskaperna hos den produkt som ska säljas
Ora London säljer bland annat nagellack. De använder strukturen på sin produkt för att utforma sin webbplats.
På 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.
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:
- Neumorfism är svårt att reproducera. Inte genereras ordentligt, designen verkar snabbt ganska oprofessionell.
- 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.
Handledning: Hur man skapar nya morfismelement
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.
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: Färger
Ekologiskt och diskret
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
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
Webbdesigntrender 2021: 3D-effekter
Ikoner och bilder
Precis som med Virtual Reality (VR) har vi väntat en tid på att 3D-objekt äntligen ska få uppleva sitt stora genombrott. Liksom i början av varje år förväntas 3D-element och VR spela en större roll från och med nu. Detta kommer inte att ses annorlunda för 2021.
3D-element kommer att användas i allt större utsträckning under 2021: till exempel som ersättning för 2D-ikoner och illustrationer, för representation av produkter och som geometriska designelement.
Vi kommer också att se 3D som en interaktiv del av webbplatsen, som med byrån Dogstudio.
Eller som ett statiskt, mer exakt animerat element, som visas i nästa exempel.
E-handel
Förstärkt verklighet har tidigare använts sporadiskt för e-handelsändamål.
Diesel, å andra sidan, förlitar sig mer på den interaktiva 3D-varianten.
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:
Webbdesigntrender 2021: 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.
På Madwells kontaktsida är varje grafiskt element interaktivt.
Med mycket personlighet erbjuder Sennep sina tjänster.
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.
"*" visar obligatoriska fält
Slutsats om webbdesigntrender 2021
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 därför särskilt viktig – också för att konkurrensen är mycket större. Och i framtiden kommer vi inte längre att kunna tillåta oss att ignorera ämnen som tillgänglighet.
Naturligtvis kan ett videosamtal inte ersätta ett viktigt, ansikte mot ansikte möte. Men kanske kommer vi att lära oss att genom den nuvarande situationen skilja på vad som verkligen är viktiga möten och vad som eventuellt kan göras med hjälp av en uppmaning. 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. kommer att förbli viktiga faktorer för skapandet av din webbplats 2021.
Dina frågor om webbdesigntrender 2021
Berätta dina frågor och prognoser om webbdesigntrenderna 2021 i kommentarerna nedan – vi är nyfikna. Vill du bli informerad om nya inlägg om WordPress? Följ sedan Raidboxes på Twitter, Facebook och via vårt nyhetsbrev.
