10 spännande trender inom webbdesign som du inte kommer undan 2019

  Agentur, Företag, Media

Liksom varje år har jag kammat igenom internet i jakt på de nya trenderna som vi kanske kommer att börja se mer av på hemsidorna som lanseras under 2019. Från layout, färger och typografi till white space och allt däremellan – inga designelement har utelämnats i den här listan över möjliga webbdesigntrender för 2019.

Här kommer de tio designtrender som du nog kommer att börja se mer av på webben när våra digitala kalendrar går över till 2019.

1. Broken grid och asymmetrisk layout

Jag inkluderade den här trenden på förra årets guide med designspaningar, men den verkar hålla i sig under 2019 också.

Konceptet ”grid” inom design är ett fiktivt plan med horisontella och vertikala linjer, vilka används för att hjälpa till med utplaceringen av element på sidan eller skärmen. På de flesta webbplatser är detta rutnät lätt att upptäcka – du kan till exempel titta till vänster på startsidan och i de flesta fall se loggan, titeln och innehållet grupperade tillsammans. Broken grid innebär att innehållet har flyttats runt på planet på ett sätt som får rutnätet att kännas mindre stelt, eller brutet.

Times Talks hemsida består till stor del av en broken grid-layout, särskilt i hero-ytan (se ovan) och på olika sektioner av sidan.

Den här typen av design – som gynnar det oväntade, tänjer på gränserna och experimenterar med asymmetri – har funnits med ett tag. Den har använts som en teknik för att sticka ut från mängden, dra till sig uppmärksamhet eller för att på andra sätt experimentera med design. Men inför 2019 förutspår jag att den kommer att användas på djärvare sätt och bli ännu vanligare på webben.

Studio Revele experimenterar med en asymmetrisk broken grid-design på sin hemsida (cirklarna kan flyttas runt på skärmen för att förstärka broken grid-konceptet ytterligare).

2019 förväntar jag mig att se mer av broken grid- och asymmetriska layouter i takt med att vi börjar överge den strama grid-formen som vi till stor del har förlitat oss på de senaste åren. I och med att vi börjar experimentera med rutnätet och acceptera asymmetri inom webbdesign, förutspår jag att den här trenden kommer att blir alltmer utbredd det kommande året.

2. Flytande/organisk design och element

Långsamt börjar vi mer och mer röra oss bort från de raka linjer som följde med platt design (”flat design”) och experimentera med mer flytande former och linjer. Den här typen av former, där du inte hittar den typiska cirkeln, fyrkanten, rektangeln eller andra rätsidiga former, brukar kallas flytande eller organiska former.

En liten del av Wandering Aimfullys hemsida, där organiska former och linjer syns bakom de cirkelformade bilderna och som en subtil bakgrund till rubriken nedanför.

Genom att ta bort de väldigt raka och nästan kliniska linjerna som vi är vana vid att se online, och ersätta dem med element från naturen och det verkliga livet (såsom formen av en damm, sjö eller rivet papper), kan de här organiska formerna och linjerna få design att kännas mer tillgänglig och närmare naturen.

Mawla använder organiska former och linjer på sin hemsida, särskilt i hero-ytan.

Under 2019 kommer de typiska formerna som har använts i webbdesign så länge (cirklar och kvadrater, jag tittar på er) att få sällskap eller ersättas av fler organiska former och linjer, vilket kan lägga till nya, spännande designinslag till webbplatser som designas och lanseras 2019.

3. Nostalgisk/tillbakablickande/retro designestetik

Det gamla är nytt igen. Medan vi tar oss förbi platt design, och experimentlustan inte verkar ha några gränser, verkar det som att tiden är mogen för att även ta tillbaka gamla designelement med ett inslag av nostalgi.

Statamic använder en retrofärgskala på sin hemsida som påminner om 1980-talets starka färger och bildspråk.

Att experimentera med nostalgi och retrodesign-stilar kan skapa en fin kontrast mellan dåtidens och nutidens design. Det som gör det här ännu mer intressant är att vi kan förvänta oss att se mer av designstilar som speglar tidsperioder där webbplatser ännu inte var enkelt tillgängliga för allmänheten, så att de kommer att kännas ”nya” för många människor.

Great Jones webbplats har typografi och ett färgschema med 70-talstendenser, en designestetik som var vanlig långt före ARPANET 1983.

Jag förutspår att fler webbplatser kommer att omfamna olika designstilar som kan härledas till gångna tider, både vad gäller själva webbdesignen och innehållet. Några av de här återblickande elementen kommer troligtvis att innefatta färgscheman som påminner om designtrender från förr och typografi som får oss att minnas en annan tid.

4. Mer förstärkt/förhöjd bildbehandling

Bilder har alltid erbjudit unika designmöjligheter, särskilt på webben. Att placera bilder i cirklar, göra dem svartvita, lägga en skugga bakom dem – allt detta är tekniker som designers har använt för att förstärka och/eller dra uppmärksamhet till bilder på webbplatser (och i stort sett alla typer av design).

KOBUs hemsida innehåller bilder där subjekten är utskurna i stället för en standardbild, så att designen kan flöda mellan ”urklippen” av medarbetarna i teamet.

Att ta bildbehandlingen ett steg längre kan dra uppmärksamhet till en bild, eller till och med leda uppmärksamheten bort från den. Medan de flesta webbplatser har en väldigt stor bild i hero-stil som sträcker sig över hela sidans bredd, och som tar upp en stor del av höjden och tillför väldigt lite variation, är nya sätt att presentera bilder en designtrend som jag tror kommer att få alltmer plats under 2019.

Drips webbplats visar utskurna bilder där man har lagt till teckningar och former för att framhäva bilden ännu mer, vilket även lyfter fram själva sidans design.

I stället för en enda typ av bildbehandling kan vi förvänta oss att se webbplatser där man använt flera lager för att bearbeta bilden till max för att antingen dra mer uppmärksamhet till den eller dra uppmärksamheten bort från dem. Att stapla flera lager, som att göra en bild monokrom, skära ut subjektet eller lägga till ett mönster ovanpå för att få fram en helt ny bild, kommer troligtvis att bli vanligare inom webbdesign under 2019.

5. Monokromt och avsaknad av färg

Att ha tillgång miljontals färger är så klart häftigt, men tänk om du skulle begränsa dig till bara en färg, eller ingen färg alls? När det görs rätt kan den typen av begränsning hjälpa till att stärka en design och göra den mer minnesvärd.

Digital Bros webbplats håller sig till ett väldigt monokromt färgschema genom att använda en viss gul ton och avviker ytterst sällan från den varianten av gul (svart och vit räknas som neutrala).

Att hålla sig till en färg kan hjälpa till att förstärka varumärkesprofileringen men begränsar samtidigt designflexibiliteten. Eftersom de flesta hemsidor har två till fem färger som används genomgående, kan användandet av endast en färg göra att du skiljer dig från mängden och blir mer minnesvärd för den som besöker hemsidan.

Climates hemsida håller sig till ett färgschema med gråskalor, helt utan någon annan färg, och till och med deras videor på hemsidan går i grått.

Att ta det ett steg längre och skippa färg helt och hållet är definitivt ett alternativ om du vill förenkla din färgpalett (inom konst och design räknas svart, vitt och grått inte som färger då de kallas neutrala). 2019 förväntar jag mig att fler webbplatser kommer att använda färre färger eller inga färger alls.

6. Överlappande designelement

I likhet med broken grid-layout och asymmetri kan element som överlappar varandra göra specifika typer av innehåll på en sida mer intressanta. Det kan tillföra ett överraskningsmoment eftersom vi har vant oss vid att element på en hemsida har sin egen plats, separerade från de andra runtomkring (oftast utan att de rör vid varandra).

Mad Studios hemsida har överlappande element som ett genomgående designgrepp på hela sidan, framhävda av subtila animationer som får hemsidan att kännas tredimensionell.

När det här görs med fingertoppskänsla kan trenden med överlappande element hjälpa till att framhäva den genomgående estetiken på en webbplats. Detta kan dock vara svårt att genomföra i dagens ”mobile first”-tider, eftersom överlappning av element som inte göra på rätt sätt kan skapa förvirring och frustration hos användare när elementen överlappas på fel sätt.

Hers använder överlappande element på delar av sin webbplats, bland annat på startsidans huvudsakliga hero-yta.

Att använda överlappande element som delar en liknande yta är en trend som jag tror kommer att bli allt större under 2019 när vi börjar experimentera mer med att göra webbplatser tredimensionella.

7. Nytänkande sidhuvud/hero-yta

Som jag har antytt ovan, innehåller de flesta hero-ytor (tidigare kallade ”above the fold”) en stor bild som sträcker sig över större delen av visningsområdet, ofta med någon text över som fokuserar besökarens uppmärksamhet. Och under de senaste två åren har det inte experimenterats särskilt mycket med den här delen av en webbplats (som kan anses vara den viktigaste delen).

En unik utformning av en hero-yta av Zoo Creative (man utnyttjar hero-ytan som en reklamtavla och använder animation på ett smart sätt).

Även om vissa webbplatser redan har börjat tänja på gränserna med sina hero-ytor/sidhuvuden, förväntar jag mig att se fler och fler webbdesigners som experimenterar med den här delen i takt med att vi börjar överge den typiska hero-ytan med en bild i fullbredd och text över.

Andreas Nymarks hemsida har en hero-yta med en hel del white space och en enkel rubrik längst ned (vilket även prickar in en annan trend som nämns senare i den här artikeln).

Under 2019 förväntar jag mig att se olika typer av experimenterande med den här så viktiga delen av en webbplats, såsom att minimera ytan, variera innehållet (och använda något annat än bara en bild i fullbredd) och att lägga större vikt vid att den ska göra ett starkt första intryck.

8. Stor och experimentell navigation

Det verkar som att varje år har en trend som har att göra med navigeringen på en hemsida. Troligtvis beror det på att det är ett av de svåraste elementen på sidan att designa för. Så avgörande för hur vi använder webben, men svår att göra både funktionell och estetiskt tilltalande.

56 Digitals webbplats har en stor navigation som blir en central del av hemsidan snarare än en liten del av den.

Under 2019 lär trenden att experimentera med navigationen att fortsätta. Men i stället för att bara ändra några saker, som placeringen på sidan, fontstorlek eller ens själva layouten, kommer experimenterandet troligtvis att tänja på gränserna för vad som är möjligt under 2019, till exempel genom att göra navigationen till huvuddelen av webbsidan eller att göra den väldigt stor och till ett blickfång.

Ganders webbplats har stora navigationsikoner i vartdera hörn av sidan i stället för det typiska navigationsfältet längst upp eller längs sidan.

I och med att experimentell navigering blir en större designtrend under 2019 kan vi förvänta oss att se väldigt stora navigationer, startsidor som helt domineras av sin navigation och navigationer med sofistikerade animationer.

9. Mer än tillräckligt med white space

En effektiv användning av white space är ett designgrepp som har använts av designers i årtionden. Men det som kanske inte är riktigt lika vanligt är mängden white space som används eller till och med att göra white space till fokusområdet i stället för själva innehållet.

Daniel Boddams använder extra mycket white space i sidhuvudet av din hemsida, vilket leder uppmärksamheten till ytor som annars brukar vara fyllda med innehåll.

Att använda extra mycket white space på det här sättet skiljer sig från anledningen till att vi normalt använder white space – att lägga till marginaler eller ytor som låter ögonen vila. Att lägga till extra white space blir nu ett sätt att göra det till ett fokusområde eller en tydligare del av designestetiken. Genom att lägga till extra white space i områden som inte nödvändigtvis behöver det, blir det en viktigare del av designen och mer märkbart för besökare.

Maxime Rimbert använder ett stort område med white space för att dra mer uppmärksamhet till informationen nedanför och ge den ett visuellt avstånd från introt.

Under 2019 kommer vi nog att se webbplatser använda mängder av white space med syftet att göra ett intryck eller att göra det till webbplatsens fokusområde. Om vi tidigare kände att extra mycket white space var ett slöseri med utrymme, är den nuvarande trenden att det kan addera något extra till utrymmet.

10. Tänja på gränserna för typografin

Även om experimenterande med typografi är något som alltid förväntas av designers, är det lite svårare att tänja på gränserna för typografi på webben än i tryck. Men i takt med att kodningen blivit mer sofistikerad har det blivit lite enklare att experimentera med typografi med tiden.

Kurppa Hosks webbplats experimenterar med typografi genom att lägga till animationer och interaktion med användare. Texten exploderar och bildar en cirkel runt användarens muspekare.

Att experimentera och tänja på gränserna för typografi skulle kunna innefatta att skära ut eller utelämna delar av bokstäver och ord (och förlita sig på att negativa ytor fyller i resten av bokstäverna), foto innanför typografin, att skriva på en diagonal linje eller form, animera typografi och så vidare.

ARCHE68s webbplats har typografi som har pressats till sin tvådimensionella gräns för att göra den näst intill tredimensionell. Typografin har inte bara en böjd effekt, utan den skrollar även automatiskt åt vänster och höger och följer med när användaren skrollar uppåt och nedåt (navigationen är synlig, vilket prickar in en annan designtrend som nämnts ovan).

Att experimentera och tänja på gränserna för vad som är möjligt med text på webben kommer troligtvis att bli en trend för webbplatsdesign under 2019. Eftersom det är mycket enklare att experimentera med text i tryck kan man förvänta sig att samma sätt som text har behandlats i tryck kommer att överföras till webben allteftersom vi lär oss nya sätt att koda typografi.

Några avslutande kommentarer

Vi har lämnat platt design-eran bakom oss, och det ser ut som att webbdesign är på väg mot ett mer experimentellt håll än vi sett de senaste åren. Det är i stort sett inget element på webbplatsen som undkommer experimenterandet när vi går in i 2019.

(Behöver du mer inspiration? Kolla in vår guide för webbdesign 2018, guide för webbdesign 2017 och guide för webbdesign 2016 också).

Med större användning av white space, navigationen i fokus på webbplatser, experimenterande med typografi och inspiration från gångna tider, ser 2019 ut att innehålla webbplatser där vi experimenterar med alla delar av designestetiken.

Denna artikel författades av Amber Leigh Turner från The Next Web och har licensierats via utgivarnätverket NewsCred. Skicka alla licensieringsfrågor till legal@newscred.com.