8 online & grafisk design trends i 2018 6 min.
Hvert år ser vi inden for den digitale verden nye design trends. Nogle bliver en standard, mens andre forsvinder igen. Det drejer sig ikke nødvendigvis om helt nye koncepter, men derimod trends der har vind i sejlene, og forventes at blive endnu mere etablerede former for grafisk kommunikation i 2018.
Vi har her kigget på nogle af dem vi ser blive dominerende i 2018.
Brutalisme og anti-design
Det er ikke nødvendigvis smukt, og det er heller ikke meningen. Men brutalisme (på engelsk: Brutalism) er altså en trend i 2018, selvom man måske kan håbe på at det ikke for alvor bliver mainstream, for så kunne det hurtigt blive noget man er træt af at se på. Begrebet stammer fra arkitektur, og er nu blevet videreført, selvom man dog ikke 100% kan sammenligne dem.
Brutalisme er råt, det er beskidt og ofte bevidst ”grimt”. Nogle retninger inden for brutalisme beskrives endda som ”anti-design”. Dog vil vi mene at der skal en del designtalent før en brutalistisk hjemmeside bliver en fed oplevelse.
Der er også store forskelle på hvordan man bruger brutalisme. Nogle sider vil se nærmest helt nøgne ud, og bruge meget få elementer og de klassiske blå tekstlinks, mens andre går i en helt anden retning og maxer helt ud.
En del brutalistiske anti-design hjemmesider i 2018 vil måske ligne en hjemmeside fra 90’erne der har fået væksthormoner og lidt syre, men det er helt bevidst.
Har du nogensinde haft lyst til at designe med farver der slet ikke komplementerer hinanden? Så er der endelig et trend-tog du kan hoppe på.
Men bør alle så bruge brutalisme? NEJ. Slet ikke. Du skal selvfølgelig kun bruge det, hvis det er noget din målgruppe kan acceptere. Forvent f.eks. ikke at se et brutalistisk design hos Danske Bank eller Mærsk. Men har du et mere edgy brand og målgruppe kan du give det et skud, som f.eks. Gucci har gjort det.
Gradients
Tidligere var gradients (farveovergange) allestedsnærværende, men forsvandt i stor stil i takt med fladt design blev en standard.
Nu lader det dog til at gradients er ved at få et stort comeback i grafisk design. Dog gøres det mere subtilt end de gradients der herskede i nullerne, og det bruges i dag mere stilrent.
Du har sikkert set det i den nyeste version af iOS og hos nogle af de visuelle frontløbere som f.eks. hos Instagram.
Så forvent at se så mange gradients at du kan nå at blive træt af dem igen.
Semi fladt / Fladt 2.0 design
Lidt i forlængelse af gradients har vi semi fladt eller fladt 2.0 design, fordi man også bruger dem her.
Fladt design har været dominerende i nogle år, mens flere eksperter har spået at det er på vej ud. Derfor har der også været en tendens til at man de seneste par år har tilføjet lidt ekstra, så det ikke er 100% fladt. Fladt 2.0 er ikke nyt, men vi vil se det endnu mere i takt med at det helt flade begynder at forsvinde.
Semi fladt kan gøre det flade lidt mere intuitivt og brugervenligt, uden at det bliver alt for flashy og ekstravagant.
Fladt 2.0 design kan f.eks. skille sig ud fra almindeligt fladt design ved:
- Gradients
- Drop shadow (skygger)
- En svag hentydning af dybde
- Forskellige farvetyper
Hvor en af kritikpunkterne ved faldt design er at det bliver for minimalistisk, giver det semi flade design lidt ekstra lækkerhed uden at ødelægge enkeltheden og samtidig tilføjer en øget grad af brugervenlighed.
Typografi: Store kraftige fonts og større variation
Du har sikker allerede lagt mærke til tendensen, men lige i øjeblikket lader det til at større bare er bedre. I hvert fald når det kommer til fonts (skrifttyper).
Overskrifterne og titler bliver større, federe og mere dominerende. Vi har set det på tryk, i tv og film i nogle år, og det er altså også kommet til det digitale.
Derudover ser vi en større variation i skrifttyperne. Og hvor det nærmest har været kriminelt at bruge serif fonts (skrifttyper der har ”fødder”), fordi læsning på skærm gjorde det sværere at læse disse fonts, specielt i mindre størrelser, ser vi nu et lille skift. I og med at skærmkvaliteten forbedres, ser vi altså at serif begynder at snige sig ind på det digitale.
Det betyder dog ikke at vi vil se sans-serif (sans=uden) forsvinde helt. Men specielt ved de store fonts vil vi komme se at se flere ”fødder” på skrifttyperne.
Se også: Vælg en ny font – når du skal finde en anden slags skrifttype
Skæve linjer: Asymmetri
Vi så de asymmetriske design snige sig mere ind i løbet af 2017, og det var et velkomment modspil til de rene linjer og firkanter over alt, vi ellers så.
Asymmetri betyder ikke, at det ikke samtidig kan være stilrent, men bryder blot den tendens til at alt er i de linjer vi forventer. Man behøver ikke bruge det overalt, men det virker derimod rigtig godt som et modspil til det mere traditionelle.
Siden introduktionen af de responsive designs, har der været mange bokse og firkanter, hvor det asymmetriske design giver et lille modsvar til dem der er trætte af den tendens.
Mobile-first
Mobile-first handler om at den mobile visning af en hjemmeside, ikke skal være en eftertanke, men derimod top-prioritet. Det mobile internetbrug dominerer i stadig stigende grad, så du går glip af en masse trafik og potentielle kunder, hvis ikke du tænker mobile-first.
Særligt vigtigt bliver det fra juli 2018, fordi Googles søgeindeks her også vil være mobile-first, og din mobilvisning derfor indekseres først.
Se mere om mobile-first design.
SVG
I dag skal en hjemmeside automatisk tilpasse sig den enhed den ses på, og samtidig se ordentlig ud. Her passer SVG billedfiler perfekt ind. Det er vektorgrafik og kan derfor skaleres op og ned uden at miste kvalitet. Og fordi de er XML-tekstbaserede holder de samme filstørrelse, uanset hvilken opløsning de vises i.
Derfor ser vi også en kæmpe eksplosion i brugen af SVG filer, som lige nu er det hurtigste voksende billedformat. Og det med god grund.
Bruger du ikke allerede SVG filer, er det altså noget du bør overveje.
Cinemagraphs
Cinemagraphs er en mellemting af et still foto og en video. Enkelte elementer bevæger sig, mens resten er fastfrosset. Det ser super lækkert ud, og så bruger du ikke ligeså meget båndbredde som en video kræver.
Et eksempel på en cinemagraph
Læs mere om hvad cinemagraphs er og hvordan du bruger dem.
Grafik: Freepik