Webdesign og UI trender i 2020

Hjemmesider 9 min read , March 3, 2020
FunParks av SE Design

En del av jobben som webdesigner, uavhengig av om du jobber som freelancer eller om du er del av et større firma, er å holde deg oppdatert på hva som skjer i markedet. Hvilke trender er det som holder seg, hvilke er i ferd med å gå ut på dato, og ikke minst hvilke trender man må regne med for inneværende eller kommende år.

Det er mange steder man kan sjekke ut hvilke trender det er som gjelder. Det kan f.eks være på Behance, hvor designere deler sine nyeste og beste arbeider, eller det kan være på sider som kårer dagens, ukens, månedens eller årets nettside. Samtidig er det jo også sånn at det kan ære lurt å henge med på trender innen andre retninger også. Jeg mener å erfare at grafisk design og webdesign kommer nærmere hverandre for hvert år som går.

Det er forskjellige regler som gjelder for grafisk design og webdesign, ganske enkelt fordi noe skal på trykk, og noe skal på nett. Det som skal på nett, har man faktisk litt større frihet med, da man kan bruke både interaksjonsdesign og animasjon av ymse slag for å skape engasjement hos den besøkende på siden. Jobber du med trykk, så sier det seg selv. Du er i større grad avhengig av et design som engasjerer, og som er leservennlig, på en slik måte at leseren får med seg alt i trykksaken. Dette krever selvsagt en stor porsjon kreativitet, innen for satte rammer som ganske enkelt ikke kan brytes. En trykksak blir ikke levende på samme måte som på nett.

Likevel mener jeg at grafisk design og webdesign står nærmere hverandre nå enn tidligere, og det er fordi man i større og større grad vektlegger typografi også på nett.

Trend 1. Typografi

av https://jpowers.events/

En av trendene i 2020 er altså en vektlegging av typografi, og kanskje da spesielt det at skrift overlapper bilder, og med det også har et skifte av farger i seg.

Dette er også året hvor designer ser ut til å slå seg mer løs, og bryte flere regler enn tidligere, også innen typografi. Man våger mer, som f.eks kombinasjonen av fonter, store fonter møter små fonter, eller at man rett og slett kan speilvende, eller sett ord opp ned mot et dominerende ord. F.eks kan man skrive et fornavn med store fete typer, mens etternavnet står under, opp ned, og med slankere utgave av samme font.

Trend 2. Minimalisme og mye luft

Minimalistiske sider er noe som har vært en trend i flere år når, og man kan vel nærmest kalle det en klassisk trend som bare fortsetter å holde seg.

av soldo

Noe av det som kanskje er det aller beste med denne designformen, er at den fortsatt holder seg sterk, samtidig som den stadig utvikler seg. Typiske trekk for minimalistiske nettsider i 2020, er at de har store områder med 'white space', eller luft, som jeg liker å kalle det. Områder som rett og slett er helt tomme. Det spesielle i år er at disse store rommene med luft ikke alltid er plassert der man kanskje forventer at de burde være. Dette gjør at sider som Soldo blir veldig elegant, vakker og lett og forstå, og dermed også veldig brukervennlig.

Trend 3. Mørk design.

av davenport

For de som er flittig brukere av telefon og apper, så ser man at det er en svært hyppig bruk av mørk design på apper. Dette er også en design som har spredt om seg til blant annet eposter. Da er det jo heller ikke noen stor overraskelse at mørk design også har kommet tilbake til webdesign. Ja, jeg sier tilbake, for jeg kan huske at det for ikke lenge siden også var en utbredt trend å bruke sort som hovedfarge i webdesign.

Men nå har altså denne trenden kommet tilbake, men selvsagt enda mer utviklet, og hvor man også legger vekt på mye luft, enkel og klar typografi, og med ikke fullt så mange innslag av farger som tidligere. Det er rett og slett blitt mer elegant, akkurat som vi ser eksempel på hos davenport.

Men så er det dette med at 2020 er året som regler kommer til å brytes innen design, og man vil nok også ser langt flere eksempler på hvordan mørk design blir kombinert med sterke farger som flyter i hverandre, og hvor man også ser en utstrakt bruk av illustrasjoner, og nærmest absurde tegninger.

Trend 4. Artistiske illustrasjoner

av absurd illustration

Og nettopp en slik trend er det Absurd Illustration har landet med sin nettside. Men så har de jo jammen også et navn å leve opp til.

Det skal vel ikke stikkes under en stol at jeg personlig ikke nødvendigvis er den største fanen av slik design, da jeg har tro på at dette fort kan være en trend som forsvinner like raskt som den kom. Men når det er sagt, så mener jeg at Absurd illustration har laget en side som rett og slett lander et design som bryter opp til flere regler. Her har vi overskrift med kun små bokstaver, og som fanger interessen din. De kjører lik font, men i teksten så holder de seg innenfor kjente regler med både store og små bokstaver, spørsmålstegn og punktum. I stede for å gå for mørk design, så har de satset på en absurd tegning. En illustrasjon som fint forteller hvem disse er, hva de er og hvor de vil. En gjeng med mange gode ideer og løsninger som vil få deg og din bedrift til å vokse. De tilbyr altså absurde illustrasjoner for din bedrift, som skal kunne illustreres på samme enkle og geniale metode.

I tillegg er det også en trend at artistiske illustrasjoner og enkle tegninger, med et hint av animasjon er noe som vokser seg sterkere og blir mer og mer populært.

av noel heschung

Trend 5. Miksing av illustrasjoner og realisme.

Hvis du som designer, eller som en som ønsker seg en helt ny nettside, sitter og tenker "hvilken stil skal jeg gå for? Illustrasjon eller bilder?".

Vel, du kan ta det helt med ro. En av de store trendene for 2020 er faktisk en god miks av både bilder og artistiske illustrasjoner, og gjerne blandet sammen med litt animasjon. Kombiner disse tingene med en typografi som dominerer eller blir framhevet, og en merkelig balanse mellom overfylt nettside med mye luft.... ja, da får du en nettside som vekker oppsikt, og som rett og slett fungerer godt. Det blir en brukervennlig side ut av det. Og et av de bedre eksemplene på dette er bubka.

av bubka

Trend 6. Flytende animasjon

Flytende animasjon ser ut til å holde seg også i år. Det er ikke en trend som kom i 2020, men det har liksom bitt seg litt fast. Jeg skrev om denne trenden også i fjor, og jeg var vel ganske klar i min tale på at dette er noe jeg ikke er noe stor fan av.

Flytende animasjon, som jeg sikter til her, handler om bilder som på en måte bølger seg utover som ringer i vann (eller i andre snedige mønstre) når du holder eller beveger muspekeren din over bildet. Første gang du gjør det, så kan du få en sånn ' woow, det var noe nytt, artig og rart' - opplevelse. Men jeg gikk i alle fall like fort lei av det, som jeg ble overrasket av det. En av grunnene til det, er som jeg skriv sist, at dette har blitt brukt og misbrukt så mye at man tenker at nok er nok.

Men som all annen design, så har også dette utviklet seg. Jeg sier ikke at jeg er blitt omvendt, eller er blitt super begeistret, men det har skjedd en utvikling til det bedre. Takk o lov. Og en av dem som har klart å få dette til, er Toonami. Grunnen til at jeg synes at de har fått dette til å fungere, er fordi de har kombiner den flytende animasjonen med 3D effekt, og et futuristisk uttrykk.

av toonami

Trend 7. Alt av 3D.

Hvis man lager dybde i sitt design, vil det gi en dypere forståelse av realisme på nettsiden. Tredimensjonale bilder er en måte å gjøre dette på. Dette er en trend som startet for noen år tilbake, og noe som har fortsatt å utvikle seg opp gjennom årene. Vi vil nok fortsette å se en god del av dette også i 2020.

Det beste av 3D design gir besøkende noe uforutsett, som f.eks som på nettsiden til Toke, hvor man har en sideveis 'scroll'

av Toke

Men det er også mange andre måter å gi dybde på, og det er å gi bilder og objekter nesten en overstadig 'drop shadow', en skygge bak bildene som gjør at bilder, eller innhold gir inntrykk av å være 3D, uten egentlig å være det. Dette har også vært en trend som har blitt brukt mye i flere år, men som kan regnes som en klassiker som vi vil fortsette å se mer av i tiden fremover. Spesielt hvis man kombinerer dette med animasjon av ymse slag, f.eks det som kalles parallax. Parallax er en rekke elementer, som bilder, tekst, former (runde, firkanta, streker osv) beveger seg etter en bestemt handling du gjør med musepeker. Det kan f.eks gi en 3D opplevelse av å bare bevege musepeker over skjermen, eller at elementer beveger seg på en spesiell måte, og til et gitt tidspunkt når du scroller nedover siden.

av Mathew P Munger

Trend 8. Lyd

En annen trend som er på full fart tilbake er lyd. I flere år ergret vi oss grønne over lyden som startet å spille så fort vi kom inn på en nettside.... det vil så, når vi endelig kom inn på en nettside. For det var jo sånn at alle disse sidene med musikk som oftest tok en evighet å laste opp. Men i dag har vi jo fått et Internett som er vanvittig mye raskere, og da er det ikke opplastingstiden som betyr noe for om man skal bruke musikk eller ikke. Nå er vel heller spørsmålet om vi fortsatt iriterer oss over musikken som starter å spille, og som vi kanskje ikke liker en gang, og samtidig ikke alltid har muligheten til å få slått av.

Men så er det de som bruker det med visdom. De velger musikk etter hva det er de presenterer på siden sin, og dermed står ting litt mer i stil med en gang.

Men det er nok sånn at vi må belage oss på langt flere enttsider med musikk i tiden som kommer. Like det eller ikke.... og skulle du være en av dem som misliker det sterkt, så sørg i alle fall for at du har mute knappen, eller volumknappen lett tilgjengelig.

Trend 9. Overlapping av lag

Trenden med å bygge nettsider lag på lag på lag er noe som har holdt på de siste årene. Og dette er nok også noe av det jeg mener går hånd i hånd med grafisk design. Dette er et uttrykk som man i grafisk design blant annet benytter for å skape mer dybde. Og dybde gir det også på en nettside.

Selv om overlapping av lag kan lages med ett enkelt element, er trenden oftest at man overlapper flere lag og elementer. Det beste med denne formen av design, er at den går men nesten all form for design.

Du kan overlappe bokser og bakgrunner, bilder eller videoer, tekst eller ikoner. Det vanskeligste med denne formen for design er nok å få det til å se bra ut, og at det flyter godt gjennom siden etterhvert som man scroller seg nedover.

av craftkitchen
Trender Bildeeffekter Animasjon Illustrasjon Design