Nyhetsbrev

Få artiklar, råd och tips om:

Webbdesign trender 2017

Trender i Webbdesign 2017

av Frida Nyvall

Det här är vad vi tror kommer att trenda i webbdesign under 2017. Vilka är de hetaste trenderna just nu, vad är fortfarande populärt från 2016 och vilka trender håller på att mattas av?

Först och främst, några trender som är här just nu, och som vi tror kommer att öka under 2017:

Det allra, allra senaste

Sluttande plan

De stora herobilderna och bildspelen på landnings- och splashsidor har blivit så vanliga att de måste hottas upp för att till fullo fånga uppmärksamheten hos dagens webbesökare.

Det vanligast sättet verkar vara att använda en lätt vinklad, sluttande linje även om andra former för att bryta upp raka, horisontella designelement också förekommer.

Trenden med sluttande linjer påverkar förutom herobilder även andra element. Till exempel använder både Stripe och Microsoft email service Outlook sluttande designelement genomgående på sina webbsidor för att visuellt dela upp dem i olika sektioner.

Vinklad bakgrund på Stripe's webbsida

outlook.com

Vinklad bakgrund på Outlooks webbsida


!

För utvecklare som ska implementera den här trenden kan dessa två artiklar vara till nytta: Ultimate Guide to Non-Rectangular Headers (Part 1) and Sloped edges with consistent angle in CSS

Mobil navigation kommer till desktop

Eftersom användare i allt större utsträckning surfar via mobilen och tillbringar mer och mer tid i mobilappar, är det naturligt att designmönster som främst förekommer på sidor och appar på mobiler överförs även till större skärmar.

Popout menyer som inkluderar designmönstret med en stor ikon och en mindre, centrerad text kommer att bli allt vanligare även på datorer.

Screenshots of Spotify mobile app and Smashing magazine redesign

Spotify mobilnavigation till höger, och redesignen av Smashing Magazine till vänster

Screenshot på Linkedins redesignade navitgation

Den nya navigationen hos Linkedin använder också det här mönstret

Vi tror att det här är en trend som kommer att öka rejält det här året, dels på grund av att den har plockats upp i Linkedins nya design, men också för att den återfinns i redesignen av Smashing magazines nya webbsida. Smashing magazine betraktas av många som den ledande publikationen inom webbindustrin, och redesignen i sig har designats och implementerats av inga andra än Andy Clarke och Sara Soueidan.

Screenshots på meyn på jinx.com och 24ways.com

Till höger: den nyan menyn på Jinx.com. Till vänster: navigationen på 24ways

Andra typiska exempel på detta designmönster återfinns i redesignen av Jinx (säljer kläder och prylar inspirerade av dataspel), och 2016 års version av 24 ways, som är en adventskalender för professionella inom webbranschen.

Som alltid tenderar folk att följa trendsetters, så när stora organisationer eller ledande personer i branschen verkar luta åt den här typen av navigation, tror vi att fler menyer av denna typ kommer att dyka upp.

Gradienter

Exempel på gradienter i Pokémon Go appen

Exempel på gradienter i Pokémon Go appen

Den platta designtrenden har varit här ganska länge nu, och designers har därför börjat letar efter nya vägar att göra platta element lite mer spännande. Att lägga till gradienter till element är ett sätt att få det att sticka ut, samtidigt som man behåller den platta stilen. Tekniken används både i Pokémon Go appen, på Spotify och i projektledningsverktyget Asana.

Gradienter på Spotify och Asanas webbsiter

Gradienter på Spotify och Asanas webbsiter


Kommande trender

Dessa är inte riktigt här, men vi tror att de kommer att utvecklas under året.

Visa innehåll på nya sätt

Några exempel på att använda ny teknik för att visa innehåll på nya sätt är VR design och webbdesign med okonventionella och kreativa layouts.

VR glasögon utsågs till 2016 års julklapp. Även om VR teknik inte är tillgänglig för andra än de priviligierade delarna av jordens befolkning, är en hel del av dessa utvecklare vars intresse och entusiasm för tekniken sprider sig genom webbindustrin.

Screenshot på tweet: Jag ser en massa VR utveckling i framtiden

Med över 18k följare på twitter har designer och front-end utvecklaren Sarah Drasner mycket inflytande i webbranschen

CSS Grid Layout är en ny feature för programmeringsspråket CSS, som används för att bestämma utseende, placering och struktur för element på en webbsida. CSS Grid Layout kommer att lanseras i de senaste versionerna av utvalda browsers under våren 2017, och kommer att göra det lättare att skapa olika typer av layouts på webbsidor.

Bild på Rachel Andrew

Få vet så mycket om CSS Grid Layout som Rachel Andrew, som har blivit funktionalitetens främsta representant

Jordnära färgtoner

Bild på Greenery, Pantones färg för 2017

Greenery är årets färg enligt Pantone

Pantones färg för året heter Greenery, och kan vara en ledtråd till varför ryktet säger att jordnära färger kommer att börja dyka upp i webbdesigns i år, som en kontrast till de skarpa, ibland till och med neonlysande färger som varit moderna under 2016.


Trender från 2016
som är här för att stanna:

Parallax effekter

Parallax effekter* kommer fortfarande att vara populära, även om implementationerna eventuellt kommer att vara mer genomtänkta och ta med performance och användarvänlighet i beräkningen.

*Parallax effekter innebär webbsidor som skapar en känsla av djup genom att flytta bilder på webbsidan vid olika tidpunker och hastigheter, ofta i samband med att användaren scrollar ner på sidan. Se ett typiskt exempel här: www.firewatchgame.com

Djärv typografi

Stor och djärv typografi kommer också att stanna. Typografi kommer att bli ännu viktigare när nya layouter öppnar möjligheter att leka med texter på ett sätt som tidigare ofta bara setts i tryckta medier.

Animationer

Både större och mindre animationer kommer att fortsätta vara viktiga delar av användarinteraktioner. Att bara lägga till rörelse till en webbsite kommer dock inte att räcka längre. Mer arbete med detaljer och större ansträngningar kommer att göras för att försäkra sig om att animationerna uppfyller webbsidans/appens syfte och mål, samt är i linje med organisationens övergripande varumärke och brand.

Stora bakgrundsbilder och video

Vi kommer att fortsätta se mycket webbsidor med stora videos eller bilder i bakgrunden.


På tillbakagång

Hexagoner

Hexagonen eller femuddingen var väldigt popular ett tag, vilket kan ha resulterat till en överanvändning av den och andra geometriska former inom webbdesign.

Överdrivet platt design

Platta ikoner med lång skugga

Ett tag var platta ikoner med lång skugga senaste skriket

Den superplatta designtrenden är på tillbakagång, till förmån för strukturer, gradienter och gradvisa skuggor.

Fejkat innehåll

Såhär kanske arbetsstyrkan inte alltid ser ut i verkligheten

Det ställs högre krav på att det som publiceras på webben är trovärdigt, eftersom besökare har blivit bättre på att upptäcka sådant som är falskt.

När alla använder samma typ av snygga och glada modeller i en politiskt korrekt blandning av olika kön och etnicitet på företagets webbsida, slutar både webbsidan och företaget att vara trovärdigt.


Kom Ihåg

Webbindustrin utvecklas i en svindlande fart, vilket påverkar livslängden på trender inom branschen. När det kommer till att designa och bygga en webbsida bör det huvudsakliga fokus ligga på att uppfylla projektets mål och hantera dess utmaningar, inte på vad som råkar vara trendigt just nu.

Red Onion serie


Missa inga artiklar – anmäl dig till vårt nyhetsbrev i början på sidan!

Tags

Fler inlägg

img

Den mörka sidan av webbdesign - confirmshaming

img

Från idé till app: ta fram projektbeskrivning

img

Att bygga en applikation