Språng framåt: 10 webbdesigntrender du borde använda 2021

webbdesigntrender 2021

Den konstanta i webbdesign är att ingenting är konstant. Designtrender förändras, teknik ger fler möjligheter till uttryck och vår aptit och smak varierar kontinuerligt. Med det nya året väl på gång kan det nu vara en bra tid att se vad vi tror att de bästa trenderna för webbdesign för 2020 kommer att bli.

En av de stora sakerna på internet är att den aldrig blir still. Det kan se ut samma dag efter dag men när du ser tillbaka på föregående år, (eller kanske du vill hoppa tillbaka till 90-talet, och se vilka trender du verkligen inte missar) du inser snabbt hur mycket som faktiskt har förändrats. Denna stadiga utveckling är utmärkt för webbanvändare eftersom landskapet alltid utvecklas. Det är inte så bra för utvecklare som ständigt måste hålla jämna steg med förändringstakten!

 

Här är vad vår forskning visar och vad vi tror att de tio bästa trenderna för webbdesign kommer att inkludera:

  1.   Ljusa färger och färgblock.
  2.   Större teckensnitt.
  3.   Bättre användning av blanksteg.
  4.   Mörkt läge.
  5.   Mer 3D.
  6.   Ökad minimalism.
  7.   Dold navigering
  8.   Ökad användning av parallaxdesign.
  9.   Anpassade illustrationer.
  10. Röst.

Som du kan se är några av dessa fortsättningar på aktuella trender medan andra tar äldre trender och förändrar dem till något nytt. Vi kommer också att föreslå ett sätt att uppnå detta i ditt nästa webbdesignprojekt.

1. Ljusa färger och färgblock

Vi har alltid varit färgfans så det är fantastiskt att se mer färg bli en webbdesigntrend i år. Vi förväntar oss att mer användning av starkare, ljusare och mer utstående färger används i webbdesign.

En ljus huvudfärg med en kompletterande eller kontrasterande sekundärfärg kommer att explodera. Vi såg några stora varumärken anta denna stil i slutet av förra året och vi tror att den kommer att påskynda.

Speciellt e-handel drar nytta av djärva färgval

Färgblock kommer också att vara inflytelserika. Att dela sidor med färgblock gör det möjligt för designers att dela upp sidor i bitstorlekar medan de fungerar bra på mobilen eller skrivbordet. Rutnät kan också berätta en historia på ett organiserat och linjärt sätt.

Nedanstående exempel av Mango Media blandar livfulla färger med bra val av teckensnitt, en stark illustration och fin skuggning för att ge ett exceptionellt första intryck. Det är denna kvalitetsleverans som vi tror kommer att vara en utmärkt trend för webbdesign under 2020.

Ljusa färger och färgblock

Vill du uppnå en liknande design? Kolla in nedan.

Divi LMS-paket

Divi LMS-paketet använder sig av färgblock och blanksteg för att leverera ett mycket välbalanserat tema. Användningen av färg är mycket modern och ger temat en modern känsla utan att använda gimmicks.

Kolla in Divi LMS Pack

 

Divi Software Marketing-paket

Divi Software Marketing-paketet är liknande. Den använder ett djärvt lila färgschema med fin sidbalans, enkla teckensnitt, unika illustrationer och bra användning av vitt utrymme. Ett annat exempel på modern design som använder de senaste trenderna utan att förlita sig på överflödiga element.

Divi Software Marketing-paket

Kolla in layouten för programvarumarknadsföringspaketet

 

Neve Mountain Bike Race-tema

Neve Mountain Bike Race-temat är ett annat bra exempel på teckensnittsanvändning, färgblock och vitt utrymme. Sidan är väldigt balanserad och kan vara användbar för många typer av affärer, inte bara för fritid. Det är fantastiskt att se kommersiellt tillgängliga webbteman av denna kvalitet!

Neve Mountain Bike Race-tema

 

Se Neve Mountain Bike Demo Live

2. Större teckensnitt

Större och djärvare teckensnitt kommer att bli stora i år. Typografi har alltid varit viktigt i webbdesign men vi ser en bestämd förändring mot färre ord i större eller djärvare typ.

Vi tror att detta kommer att vara en bestämd trend för webbdesign fram till 2020.

Större teckensnitt

Större och djärvare teckensnitt hjälper till att förstärka budskapet och tillsammans med smarta rubriker och uppmaningar till handling kan vara mer kraftfulla än bilder för att framkalla svar. Sådana som Samsung har redan anammat kraften i stora slag och vi förväntar oss att andra märken och många mindre företag efterliknar denna framgång. Du kan se detta i aktion på skärmdumpen ovan från Samsungs webbplats.

Stora och djärva teckensnitt med rätt teckensnittsval kan vara mycket påverkande. Det finns hundratals rena teckensnitt runt som skulle fungera otroligt bra på nya mönster så valet är verkligen inte något som designare saknar.

 

Templatemonster Journeo-tema

Templatemonster Journeo-temat är den perfekta blandningen av starka bilder, färgblock och teckensnittsanvändning. Rulla längre ner på sidan så ser du också bra användning av vitt utrymme och innehållsblock för att ge en mycket modern men ändå balanserad sida.

Templatemonster Journeo-tema

Kolla in Journeo Demo

Hestia Pro från Themeisle

Hesia Pro från Themeisle

Hestia Pro från Themeisle är ett annat exempel på bra typsnittsval, färgpoppar och block och intelligent användning av vitt utrymme. Detta är ett annat samtida tema som ser banbrytande samtidigt som det är realistiskt för ett modernt företag.

Besök Hestia Demo

3. Bättre användning av blanksteg

Vitt utrymme har alltid varit viktigt för bra siddesign och vi förväntar oss att det kommer att komma ännu mer fram i år. Med ökningen av starka färger och djärva teckensnitt kommer användningen av tomt utrymme att vara avgörande för att dessa andra webbdesigntrender ska fungera. Plus, minimalism är fortfarande en stark trend och vi förväntar oss inte att se slutet på det när som helst.

Bättre användning av blanksteg

Förvänta dig att se mycket mer tomt utrymme på webbsidor med mycket uppmärksamhet åt banners, större rubriker, färgblock och bilder. Det krävs ett stort öga för att effektivt balansera innehåll och tomt utrymme och vanligtvis en bra förhandlare för att övertyga kunder att det är en bra idé. Vi förväntar oss att alla dessa saker ska vara en trenddesign trend 2020.

Wistia är ett bra exempel på hur tomt utrymme används bra på en sida. Sidorna förmedlar fortfarande mycket information men visar perfekt balans mellan sidinnehåll och tomt utrymme.

StudioPress Foodie Pro-tema

StudioPress Foodie Pro Theme är ett annat minimalistiskt tema med stor användning av typsnitt, blanksteg och minimalism. Det fungerar bra för sitt livsmedelstema men kan också anpassas till andra branscher. Ett annat värdefullt tema som fungerar på mobilen.

Kolla Foodie Pro nedan eller besök demo

StudioPress Foodie Pro-tema

 

Astra Custom Printing Pro

Astra Custom Printing Pro

Astra Custom Printing Pro-temat visar stor användning av mellanslag, typsnitt, färg och bilder på ett e-handelstema. Sidan är väldigt attraktiv och drar blicken mot produkterna samtidigt som webbinnehåll minimeras för att komplettera den avsikten.

Kolla in Astra Custom Printing Pro

4. Mörkt läge

Med fler appar som erbjuder ett mörkt läge, förväntar vi oss att webbplatser börjar erbjuda detsamma. Kanske en färgomkopplare högst upp på sidan så att användaren kan välja att använda ljus eller mörkt läge beroende på enhet eller situation.

Mörkt läge

Det finns mycket som går in i mörk design, men gjort rätt kan det ge en känsla av lyx och exklusivitet till en sida. Alternativt kan det göra en sida lättare att läsa på vissa enheter eller i svagt ljus.

Webbläsare och insticksprogram för webbläsare lägger i allt större utsträckning verktyg för '' force dark mode '' för att manipulera även ljusa mönster så att de blir mörka. Eftersom detta är en ökande trend kan du lika gärna införliva den på dina sidor så att du kontrollerar slutresultatet!

Liksom blanksteg kan mörka bakgrunder också komma in i årets andra webbdesigntrender, djärva färger, stort teckensnitt och minimalism kan alla fungera tillsammans för att leverera en exceptionell användarupplevelse. Bara en av anledningarna till att vi tror att mörka mönster och mörka lägen kommer att styra 2020.

Bear Grylls Dark Mode webbplats

Bear Grylls webbplats (bilden ovan) är ett bra exempel på mörkt läge gjort bra. Det är också ett utmärkt exempel på starkt teckensnitt, bra bilder och minimalistisk navigering också!

Themeforest Jupiter tema

Themeforest Jupiter tema

Themeforest Jupiter-temat visar vad vi menar med mörka webbplatsdesigner, starka färger och fantastiskt typsnittsval. Det är ett slående tema som sticker ut omedelbart och förmedlar kärnbudskapet under de första två sekunderna. Inte mycket mer behöver sägas om den här!

Kolla in Jupiter Demo

Ju större teckensnitt, desto färre exempel bör du ha på en sida. Detta leder oss snyggt till ...

 

5. Mer 3D

Många webbdesigners undvek tidigare 3D-bilder eftersom det skulle ta tid att rendera.

Förbättringar i både designverktyg och enhetsfunktioner innebär att 3D inte längre är utanför räckvidden när man utformar webbsidor. Vi tror att detta kommer att ge en ny webbdesigntrend 2020, 3D-bilder och webbinnehåll.

Mer 3D

Welly-webbplatsen (bilden ovan) är ett utmärkt exempel på 3D i handling och tar inte längre tid att ladda än en standardsida. Detta kräver mycket skicklighet för att designa en interaktiv 3D-bild utan att orsaka långsam laddning men gjort bra, det kan skapa en fantastisk effekt som gör att en sida sticker ut från mängden.

Detta är en av de trender som kräver högsta möjliga kvalitet vad gäller layout och animering. Det finns inget utrymme för de näst bästa när man arbetar i 3D, så det här kan visa sig vara en utmaning som en möjlighet!

Många tror att 3D-design håller en besökare längre på sidan och ökar interaktionen. Det och det faktum att det ser väldigt cool ut är varför vi tror att 3D kommer att bli stort i år.

6. Ökad minimalism

Minimal design fungerar överallt. På skrivbordet, på mobilen, på webbsidor, appar och allt med ett gränssnitt. Det är inte en ny trend på något sätt men vi tror att den kommer att öka i popularitet under 2020.

Minimalism är en av de svåraste webbdesignteknikerna för att få rätt (även om vi har diskuterat det mycket detaljerat här). Det krävs verklig skicklighet för att kunna balansera en webbsida ordentligt och samtidigt tillgodose behoven hos designen, kunden och publiken.

Minimalism är kompatibel med större teckensnitt, djärvare färger, mörkt läge, anpassade illustrationer och många andra webbdesigntrender vi ser just nu. Det fungerar också otroligt bra på mindre skärmar och det är därför vi tror att det kommer att explodera i år.

Ökad minimalism

Minimalism passar in i vårt behov av snabbhet, önskan att vara kvar på uppgiften och lite tålamod för fluff eller onödiga blomningar i webbdesign.

Evulve (bilden ovan) är ett utmärkt exempel på minimalistisk design som använder färg och typsnitt mycket bra. Även navigeringen hålls på ett minimum!

Templatemonster Kuba tema

Templatemonster Kuba tema

Templatemonster Kuba-temat är en mästarklass i minimalism. Bristen på saker att se och göra fungerar till sidans fördel och visar de element designern vill att du ska se. Den laddas snabbt och fungerar också på mobilen.

Kolla in Kuba-temat

StudioPress Breakthrough Pro-tema

StudioPress genombrottstema

StudioPress Breakthrough Theme är ett utmärkt exempel på minimalistisk design med djärva teckensnitt och små färgblock. Det finns också bra användning av mellanslag i hela temat som också översätts bra på mobilversionen.

Besök Breakthrough Demo

7. Dold navigering

Som nämnts ovan fungerar minimalism hand i hand med dold eller minimal navigering. Vi tror att detta är en annan designtrend som vi kommer att se under 2020. De flesta webbanvändare är nog bekanta med webbdesign för att de vet att om en meny inte är omedelbart synlig kommer den att finnas på sidan någonstans. Så länge som designen är tillräckligt tydlig, tycker vi att det är mer än tillräckligt för att uppmuntra dold navigering.

Dold navigering

Även om det är viktigt för vissa mönster, tar navigering och menyer mycket skärmfastigheter. Ju mindre skärm, desto mer kompakt måste designen vara. Dold navigering löser det. Så länge den övergripande designen gör det klart var navigationen naturligtvis finns!

Mill-webbplatsen är ett utmärkt exempel på dold navigering gjort bra.

Dold navigering är dock en utmaning. Studier har visat att dold navigering kan påverka tid på sidan, interaktion och besökarnöjdhet. Försiktighet måste vidtas för att matcha minimalism med bra design tillsammans med varumärkes- och publikpassning.

Themeforest Framträdande tema

Temat för Themeforest Salient

Themeforest Salient-temat innehåller många av de teman för webbdesign vi har pratat om. Färg, blanksteg, typsnitt, block, minimalistisk navigering och fantastisk design för att leverera ett mycket modernt tema som skulle fungera för alla typer av portföljtyper.

Se framträdande i aktion

8. Ökad användning av parallaxdesign

Ökad användning av parallaxdesign

Parallax design är inget nytt men vi tror att vi kommer att se mycket mer av det i år. Denna designstil överlämnades ofta till webbdesign på nybörjar eller mallmarknader där den inte tjänade något verkligt syfte och inte hade någon verklig påverkan. Design som den på ToyFight.co kommer att förändra allt detta.

Bättre animationsverktyg och tekniker innebär att man skapar verkligt fullbordade parallaxeffekter som fungerar över webbläsare och enheter för att få en verklig effekt. Tillsammans med bra färgval, smarta bilder eller illustrationer och bra sidbalans finns det ingen anledning till att du inte kan berätta en övertygande historia genom en rullningsida.

Astra Yoga Instruktör

Astra Yoga Instruktör

Astra Yoga Instructor-temat är ett annat som använder moderna trender med starka bilder, färganvändning, bra teckenstorlek, färg och val och en snygg parallaxeffekt med logotypen i bakgrunden. Detta är ett utmärkt tema för sin nisch och fungerar bra.

Kolla in Astra-exempel med Parallax

9. Anpassade illustrationer

Anpassade illustrationer är ett sätt för ett varumärke att verkligen sticker ut. Glöm stockbilder eller massmarknadsvektorer, anpassad illustration är där den är. Inbyggda inom märkesfärgschemat kan verkliga originalillustrationer vara ett kraftfullt sätt att engagera och väcka känslor och ett resultat. Vi tror att detta kommer att växa exponentiellt i år.

Anpassade illustrationer

Fördelen med anpassade illustrationer är att de kontinuerligt kan uppdateras, konfigureras för att möta en stämning eller situation och kan användas olika på olika enheter. De kan också kopplas ihop med animationer för att leverera en involverande upplevelse utan att sakta ner sidan eller komma i vägen för kundresan. Fixate (visas ovan) är ett bra exempel på anpassad illustration som fungerar med stor effekt.

De kan medföra extra kostnader under utvecklingsfasen men de flesta grafiska formgivare kan vända på illustrationer ganska snabbt. Detta är ännu en fördel med att använda dem.

10. Voice

Röst blir alltmer relevant på internet. Sökning måste redan implementera röst och webbdesign måste följa. Enligt denna undersökning kommer 65% av webbanvändarna i åldrarna 25-49 att använda röst för att interagera med sina enheter. Att använda röst i siddesign samt navigering och sökning är en logisk utveckling. En som vi tror kommer att bli en viktig trend för webbdesign 2020.

Röst

Siri, Alexa, Google Now och Cortana har alla introducerat oss för röstkommandon i en eller annan grad. Vårt ökade beroende av mobil ger den perfekta möjligheten att använda röst vid sökning, så varför inte webbplatsnavigering och interaktion?

Röstanvändargränssnitt förbättrar också tillgängligheten för en webbplats och förbättrar åtkomst för alla förmågor. Olika länder introducerar strängare tillgänglighetslagar men att göra en webbplats tillgänglig för alla är en grundprincip för både internet och internet så varför skulle vi inte integrera röst i en webbplats.

Den här guiden går in i röstens inverkan på design i detalj. Väl värt att läsa. Så är Googles guide till deras röststyrda webbapp-API.

De webbdesigntrender som vi tror kommer att styra webben 2020 är främst utveckling av befintliga teman. Det finns inget helt nytt här men det finns fortfarande mycket att se fram emot om du är en webbanvändare eller designer.

En anledning till att vi är glada över alla dessa är att de erbjuder en verklig utmaning för webbdesigners. Borta är dagarna med mallsidor och nyckelfärdig design.

Nu är det dags för individualitet, anpassade teckensnitt och illustrationer, perfekt balanserade webbsidor med stort utrymme och bilder och en verkligt personlig surfupplevelse. Lägg till funktioner som 3D, mycket förbättrad parallaxrullning och röst så har du en mer användbar webb för alla. Det måste vara en trend som är värt att följa!

Håller du med vårt trendval? Har du idéer om andra webbdesigntrender i år? Berätta om dem i kommentarfältet nedan! 

Om författaren
David Attard
Författare: David Attardwebbplats: https://www.linkedin.com/in/dattard/
David har arbetat i eller runt online / digital industrin under de senaste 18 åren. Han har stor erfarenhet av mjukvaru- och webbdesignindustrin med WordPress, Joomla och nischer som omger dem. Som digital konsult fokuserar han på att hjälpa företag att få en konkurrensfördel med en kombination av deras webbplats och digitala plattformar som finns idag.

En sak till... Visste du att människor som delar användbara saker som det här inlägget ser fantastiska ut också? ;-)
Tveka inte, lämna en användbara kommentera med dina tankar, dela sedan detta på din Facebook-grupp (er) som skulle tycka att det var användbart och låt oss skörda fördelarna tillsammans. Tack för att du delade och var trevlig!

Upplysningar: Denna sida kan innehålla länkar till externa webbplatser för produkter som vi älskar och rekommenderar helhjärtat. Om du köper produkter vi föreslår kan vi tjäna en remissavgift. Sådana avgifter påverkar inte våra rekommendationer och vi accepterar inte betalningar för positiva recensioner.

Författare Utvalda på:  Inc Magazine-logotyp   Sitepoint-logotyp   CSS Tricks-logotyp    webbdesignerdepot-logotyp   WPMU DEV-logotyp   och många fler ...