24 tips om kommende webdesign trends for 2015

24 tips om kommende webdesign trends for 2015

Nå som desember er i full gang og adventstiden står for tur, tenkte jeg at det var på sin plass med en liten adventskalender! I følgende blogginnlegg vil jeg beskrive 24 webdesign trends for 2015, og det vil bli presentert ett nytt tips hver dag frem mot julaften.

#1 MINIMALT

Minimalt design er verken noe nytt eller uventet. Det er en global designtrend som også brukes i industrielt design og grafisk design. Likevel bør minimalt design fremheves som en ny tendens i 2015 ettersom det har utviklet seg til et grunnprinsipp i den nye designmetodikken. Det vil bli forventet enda enklere og renere layout, dette gjelder også former og effekter. Minimalisme er ikke lenger ansett som en trend, men vil faktisk bli et utgangspunkt for andre trender.

Her finner du en oversikt over minimalt design nettsider.

#2 SAY MORE WITH LESS

Slutt med hjemmesider som begynner med masse blah-blah tekst. Slutt med å integrere en hele Word-fil forfattet av bedriftens kommunikasjonsansvarlig. Kort sagt: Slutt med tekstblokk som sentral kommunikasjonsobjekt. Webdesign bruker teknikker fra reklame og skal nå også kommunisere hovedsakelig gjennom bilder. Gi mindre informasjon men utform den mer strukturert og poengtert! Nettsiden er nå tenkt som et rent visuelt området, med få elementer i riktig balanse. Vi sier mer, men på en smartere og mer subtil måte! Det ville Mies Van der Rohe være veldig stolt over: hans arkitekturteori gjelde nå også web design!

Les mer om Mies Van der Rohe.

#3 FOTO, VIDEO og ILLUSTRASJON OVERTAR

Men hvis det er så lite tekst, hva skal vi gjøre med plassen? Vi byr brukeren en hel verden og stemming gjennom andre objekter: bilder, video og illustrasjon. Det må tenkes “HD” og “visuell opplevelse”. Full-skjerm blir den viktigste regelen og de nye HD-skjermene (f eks. Retina, eller Samsung S9 HD) utnyttes maksimalt. Slik bildekvalitet har vi aldri før sett på weben og dette kommer sikkert til å skape en helt ny brukeropplevelse.

Les mer om HD-webdesign.

#4 FONT

Google Fonts og @font-face er nå et vanlig og vellykket verktøy for å bryte med Arial og Times tradisjonelle webfonter. De er kompatible med alle moderne nettlesere og vil være en selvfølge i 2015. Det blir stadig mer og mer utvalg. Håndskrift blir også en trend som kommer tilbake. Tekst brukt som illustrasjon gjør siden mer livlig. Typografi tar opp plassen: bokstavene blir så store som aldri før og får rollen som visuelle elementer. Trenden støttes av de nye høyoppløselige skjermene.

#5 EN VERDEN AV IKONER OG GLYFFER

Ikoner og glyffer (glyphs) av en ny kvalitet har blitt fremtredende i de siste årene. Dette henger sannsynligvis sammen med utviklingen av Bootstraps ikonsprites. Ikonbruk har blitt en selvfølge, og man tviler ikke lenger på betydningen av standardikoner. Disse har blitt innlemmet i den felles kodenavigasjonen. For første gang var det mulig å observere at både ikoner og glyffer i noen tilfeller kunne brukes som en erstatning  av tekst uten at grensesnittet forverres (Obs: Dette gjelder ikke nettsider som følger WCAG 2.0 kraver). Gratis ikonbiblioteker vokser og sprer seg, blant annet tilbyr Google skalerbare ikoner. Så det vil ikke være noe å nøle med i 2015.

#6 SKEUEOMORPHISMENS ENDELIKT 

Skeueomorphism er en mimetisk bevegelse innen digitalt bevegelse basert på mimikk og orientert mot ornament. I denne bevegelsen forsøker man å gjenskape trofast tekstur og lyseffekter av objekter for en rask identifikasjon. Apple baserte sin designlinje på dette, men har selv skilt seg fra den siden de lanserte sin IOS7. Dette markerer en klar nedgang av trenden. Mens noen hevder at skeumorphism ikke kan dø, vil jeg heller tro på at den vil komme tilbake senere, men at 2015 vil markere dens virkelige høst og begynnelsen av et nødvendig fravær. Les mer om fremtiden for skeuomorphism. 

#7 FORTSETT Å SURFE PÅ FLAT UI BØLGEN

I 2014 så en rekke Flat UI biblioteker og kits dagens lys, f.eks Flat UI, Bootflat, Pure og Bootstrap. Visuelt sett gjenkjennes det ved forenklede former og fargefelt. En klar og enkel stil med intuitivitet, enkelhet og adaptivitet som hovedbegreper. En farlig konkurrent til skeuomorphism! Grunnen til denne oppgangen er enkel: Flatt design fungerer sammen med den minimalistiske trenden. I tillegg er det en fordel at det brukes modulære former slik at man lett kan oppnå en effektiv og nøyaktig visuell kommunikasjon. Derfor tar jeg ingen sjanse når jeg påstår at det ikke vil gå under i 2015! Gå for det!

#8 GEOMETRISKE OG KUBISKE FORMER

Firkanter, sirkler, trekanter, geometriske striper... Man tenker alltid mer eller mindre geometrisk når man lager webdesign. Men tidligere hadde webdesigneren ikke noe valg. I 2015 får vi det! Formene er mer kantete og skarpe, bildene er omarbeidet og kroppet etter disse nye mønstrene. Dette skaper enkelhet i layouten og setter lys på farger og gir høy metning. Se design inspirert av geometriske former.

#9 FARGE OG HØY METNING

Det forventes en større fokus på farge i det kommende året. Her blir også fargen mer minimalistisk og skarpere, og den tar opp mer plass. Den brukes som et element i seg selv og fyller siden. Men, vær forsiktig: det er greit med noen områder med flat og mettet farge ja, men gjør det i kombinasjon med mer letthet som skravert hvitt, subtilt grått, nyansert svart. Minimalisme er nødvendig, og nøkkelordet er: balanse. "Flat ui color picker" er et nyttig verktøy for å komponere prosjektsfargeprøver.

#10 MATERIAL DESIGN // By Google

Material design, hva er det for noe? Det er et nytt visuelt språk som Google har introdusert i sommer. Noen stikkord er: intuitivitet, naturlighet, dimensjon og samhandling. Dette er konsepter som allerede er i bruk i noen Google-produkter, og som de nå er i ferd med å oppdatere (se f.eks Android Lollipop og Google Messenger). Hele konseptet er beskrevet på disse sidene.

Biblioteket fortsetter i mellomtiden å vokse, og det meste av materialet har blitt publisert i Open Source, så ikke nøl med å plukke derfra gjennom hele året.

#11 SKEUOMINIMALISTIC? Den nye utfordringen

Vi har sett at Skeueomorphism er truet og at Flat UI fremdeles har vind i seilene. Vi kan allerede nå stille oss følgende spørsmål: Vil Flat UI virkelig være trenden i 2015 med tanke på at vi allerede har hatt den på skjermene våre siden midten av 2013? Jeg tror ikke det. Material Design har nettopp kommet opp som et alternativ, en add-on til Flat-UI. Vi registrerer også at IOS8 og Apple Yosemite fortsatt låner fra begge stiler. Kunne vi derfor tenke oss en kombinasjon av Skeueomorphism og minimalisme? Noen kaller det allerede skeuominimalism.

#12 MOBILE FIRST & GRIDS

Siden februar i år vet man at bruk av mobiltelefoner og nettbrett har tatt over for bruken av datamaskiner i USA, og slik vil det sannsynligvis også bli i Europa fra 2015. Omfanget av mobilbruk har i lang tid vært undervurdert. I fjor, endte endte det opp med DEN løsningen: grids og responsivt design. Bootstrap har reddet mange front-end utviklere som ennå ikke var helt forberedt på situasjonen, og de fleste tenker nå at de står på den trygde siden når de lager såkalte responsive sider. Men vær veldig forsiktig, hvis vi holder oss til tall, ligger den virkelige løsningen faktisk i mobile-først. Vi vil legge Desktop webdesign gradvis bak oss, og det er på tide til å markere endringen i våre layouter.

#13 WCAG 2.0 PÅVIRKER DESIGN & FARGER

Norske forskrifter krever at alle norske nettløsninger som er kjøpt eller bestilt etter 1. juli 2014 skal være universelt utformet fra og med lanseringstidspunktet. Dette har i betydelig grad endret måten vi - både utviklere og designere – pleier å jobbe på. Dette har i betydelig grad endret måten vi - både utviklere og designere – pleide å jobbe. Påvirkningen av WCAG 2.0 føles mye, spesielt i webdesign: dypere kontraster, større tekster, forenklede animasjoner, mindre vesentlige farger, mer beskrivende titler. Har du ikke hatt tid til å oppdatere deg ennå, les her.

#14 TENK TOUCH SCREEN

Dette året ble Touch dataskjermer (desktop) og konvertible tablet-PCer mer vanlige. Dette ble initiert av Windows og inkluderer dens Surface tablett. Vi må derfor tenke annerledes rundt  "event listeners" : større knapper og lenker, mouse over erstatninger, grensesnitt som inviterer til touch og drag & drop, keyboard input omvei ... Mobile og tabletter fantes allerede før, og du lurer kanskje på forskjellen? Den største forskjellen gjelder oppløsningen. Aldri før kunne man skape en touch-grensesnitt på så høyoppløselige skjerme. Er vi nå på vei til en touch-first æra?

#15 SINGLE PAGE

Flersidige nettsider utvikles riktignok på grunn av et reelt behov (f. eks. butikker, aviser ...), men single-side nettsteder er imidlertid bedre tilpasset de forskjellige enhetene og forenkler navigeringen. All informasjon finnes på en enkel side, som man scroller nedover, mens man får en flott visuell opplevelse. Faktisk er dette et veldig bra utgangspunkt for å inkludere mindre trender: mikro-animasjoner og effekter av alle slag. Single-page kommer sannsynligvis til å utvikle seg videre, og derfor nevner jeg den her. Flere faktorer tyder på at et minimalistisk flersiderskonsept kunne se dagens lys i 2015 – basert på single-page design hvor flere landingssider er tilknyttet. Usannsynlig? Se på single-page galleriet!

#16 LESS CLICK MORE SCROLL

Jeg nevnte tidligere begrensninger relatert til touch-events, og nå er det snakk om klikk-events. Musen er et verktøy som blir mindre og mindre brukt. I stedet har vi adoptert drag & drop. Scrolling er den ideelle mellomløsningen, noe som forklarer hvorfor single-page og det veldig vertikale formatet har blitt så populært. Brukeren forventer nå å kunne scrolle nesten overalt ALT. Kort sagt i 2015: Færre klikk, mer scroll!

#17 PARALLAX

Hva er parallax? Det dreier seg om å ha ulike elementer som beveger seg i forskjellige hastigheter avhengig av scrollplasseringen og/eller museplasseringen. Elementene er ofte animasjoner, bakgrunnsbilder, karuseller, ikoner, header/navigasjoner og noen ganger også tekstavsnitt. I praksis vil dette tilføye dybde og interaktivitet til siden. Det bør håndteres sparsomt, men vi kan si at det i en minimal sammenheng vil være veldig trendy ;)

Her en link til et veldig imponerende parallax-nettsted som inkluderer flere av de prinsippene jeg har nevnt.

#18 STORYTELLING

Har dere lagt merke til alle disse single-page nettsidene som begynner med "Jeg er en ..."? Ja, her begynner noe nytt! Nettsider blir mye mer enn bare et utstillingsvindu hvor vi publiserer informasjon. De blir et sted hvor brukeren skal møte en opplevelse. Man kommer seg inn i et nettsted på samme måte som man går inn i en butikk, der man møter man en historie, en interaksjon, en opplevelse! Et eksempel på storytelling.

#19 SVG

SVG (Scalable Vector Graphics) støttes nå helt i de nyeste nettleserne. (Noen biblioteker som Raphael.js er også tilgjengelig for IE <v9). SVG-grafikk har mange fordeler som for eksempel at de er vektor-basert (dermed skalerbar> så ingen problem med oppløsning) og at de er enkelt å animere. De er forøvrig anbefalt av W3C!! I år er det veldig lite som hindrer oss fra å vedta SVG hvis dette ikke allerede er gjort.

To biblioteker for å komme seg i gang med SVG: Raphaël og Snap SVG

#20 DATA DESIGN & INFOGRAPHICS

Hvordan kommunisere en mengde med tall og data hvis tekstomfanget skal reduseres på nettsidene? Infographics vil videreutvikles og illustrere enda større mengder med data på en enda mer kreativ måte. SVG vil også mest sannsynligvis spille en viktig rolle i denne utviklingen. Animert og interaktiv, Infographics vil nærme seg storytelling-trenden og overraske oss alle. Se her for et glimt av hva vi har i vente.

#21 GAMIFICATION

Gamification er et prinsipp som vi allerede bruker mye i Acando/e-vita. Men det er fordi vi er forløpere ;) Hva er det? Det er å ta i bruk elementer og teknikker fra spillteori på områder som ikke har noe med spill å gjøre. Dette kan gjøres ved å bruke kjente grafiske elementer: poeng, badger, utfordringer, oppgaver ... osv. Gamification vil bli enda viktigere neste år fordi det vil kombineres med interaktivitet og storytelling for å fange brukerne. Et eksempel på gamification.

#22 SOCIAL DESIGN & FEEDS

FLICKR, Behance, MySpace, Skype, Facebook, Bebo, Snapchat, Vine ... Mye har skjedd siden den lille Facebook Like-boksen som skulle integreres et eller et annet sted for noen år siden. Har dere lagt merke til at sosial pålogging forventes nå av alle? En bruker som er nødt til å registrere seg er nesten litt fortapt. Den umiddelbare tilkoblingen og delingen har blitt viktige begreper. Det samme gjelder integrering av de ulike datastrømmer som kommer fra disse sosiale mediene. Det er en viktig del av webdesignerens jobb å få til denne integrasjonen så naturlig og kreativ som mulig. Nok en utfordring!

#23 PERSONALISERT GRENSESNITT

Personalisert grensesnitt ble opprinnelig tatt i bruk av nettbutikker, ved hjelp av cache og cookies. I dag er nettsider og sosiale medier tilkoblet og sammenkoblet. Opplysninger samles inn og brukes til å gi en mer personlig opplevelse for brukeren, første besøk, forskjellige roller, forskjellige navn, forskjellige rettigheter, forskjellige påloggingssted osv. Jeg snakker ikke om etikk her, men det er å regne med at slike teknikker blir mer synlige i 2015.

#24 ALL-CONNECTED OG UTVIDET VIRKELIGHET

På samme måte som Google Glass og Internet of Things, er utvidet virkelighet (augmented reality) også basert på ”all-connected” trenden. Innvirkningen på webdesign er allerede merkbart. Med Ikea-applikasjonen kan brukeren f.eks. fotografere en katalogside og så observere hvordan møblene tar form i rommet. Enhetene blir mer mobile og kraftfulle. Virkeligheter formeres og blandes, og nye muligheter åpner seg for oss. Så hvorfor skal vi ikke forsøke å få til en sameksistens av flere virkeligheter i 2015?

OPPSUMMERING

Til slutt vil jeg oppsummere ved å si at fokus for 2015 blir på et forenklet brukergrensesnitt og mindre innhold. Målet blir å tilby en stadig mer spennende og bilderik opplevelse på sidene. Sosiale nettverk og de innsamlede dataene vil åpne muligheter for mer avansert personalisering, spesielt når det gjelder kampanjer for e-handel.

Så det viktigste for et kreativt og innovativt år 2015: minimalisme, struktur og personalisert grensesnitt! Ha et riktig godt nyttår alle sammen!

Le Pontois, Marion

Le Pontois, Marion

Konsulent // Enterprise 2.0
marion.lepontois@acando.no

 

Om bloggeren:
Frontend utvikler som jobber med moderne rammeverk, med et spesielt øye for design og grafisk utforming. Solid erfaring fra store scrum prosjekter for virksomheter som Sporveien, Orkla og TINE. Opptatt av sluttbrukerens perspektiv og brukskvalitet. Interesse for problemstillinger rundt fleksibilitet på jobb og nye måter å arbeide på.

comments powered by Disqus