4 desembertrender

Trender kommer og går innen design og UX som i motebransjen. Det kan være vanskelig å holde styr på alt som kommer opp i feeden og derfor har jeg samlet 4 trender for desember.

1. Oppdelt og tildekket typografi

Det å leke med typografi er ikke noe nytt, og grafiske designere har gjort dette i årevis. Men hvor bra er det å ta denne trenden med dele opp og tildekke teksten på web? Når man designer for web er det mye man må tenke på, og det å dele opp eller dekke til deler av teksten kan by på mange misforståelser som skaper en dårlig brukeropplevelse. Men, når det blir gjort riktig, så er det utrolig fint å se på.

Det er et par ting man bør ha i bakhodet om man ønsker å leke med typografien på web:

  • Sørg for at ordet er vanlig nok til å bli forstått
  • Ikke dekk til ordet for mye
  • Vær oppmerksom på at tildekket tekst kan føre til uønskede ord
  • Hold resten av designet simpelt slik at brukeren kan fokusere på teksten og lese det så enkelt som mulig
  • Bruk en simpel font slik at fonten ikke konkurrerer med effekten du ønsker å skape

Artempivovarov.com er et eksempel hvor teksten er for vanskelig å lese. Det er mye som skjer i bakgrunnen og kontrasten med teksten og lyset er for dårlig. Teksten er også tildekket med personen i forgrunnen som gjør at teksten blir uleselig.

Supercrowds.co har også en bakgrunn som tiltrekker seg oppmerksomheten og gjør at teksten blir vanskelig å lese. Det at spacingen mellom hver bokstav og ord er veldig like er også et hinder for å ha en god lesbar tekst.

Siste eksempelet er fra kikk.be. Her er tittelen på siden tydelig og lesbar selv om den er tildekket på flere steder. Det er tittelen som tiltrekker oppmerksomheten og det fungerer bra med å ha dato over tittelen fordi kontrastene er gode.

2. Tekst i hvite bokser

Denne trenden høres kanskje kjedelig ut og at en designer virker lat, men når det gjort på riktig, så ser det veldig bra ut.

Hvite bokser med tekst øker lesbarheten på en side med mye farger, bilder og visuelle elementer. Du kan ikke bare slenge på en hvit boks og håpe på det beste. Hvite tekstbokser må bli strategisk plassert i henhold til bildebruk slik at det ikke dekker viktige motiver.
Boksene må være store nok til å inneholde riktig mengde med tekst, og du må ha en plan for hvordan boksene skal være på mindre skjermer.

Et eksempler på hvordan bruke hvite tekstbokser er howlt.com. De bruker hvite “tekstbobler” som passer inn i stilen og tonen deres. Boksene er animert med en flytende effekt som gjør at de passer inn med bakgrunnen. Du vil ikke ha hvite bokser for at teksten skal føles som de er tilfeldig plassert på bakgrunnen.

Et annet godt eksempel er Macaulay Sinclair. De har mer tekst enn det andre eksemplet og bruker da en del av et bildegriddet for å holde tekstelementet. Bildet bak tekstboksen har ingen informasjonsverdi og fungerer derfor bra. Bildet har lignende stil som på andre bilder, og fungerer hovedsakelig for å skape sammenheng mellom tekstelementet og resten av designet.

3. Cartoon stil

Den siste tiden har jeg sett et par nettsider som har gått for en cartoon stil. Dette er en leken og gøyal stil som jeg tror vi kommer til å se mer av. Men her er det viktig å tenke på at det skal passe til målgruppen ellers blir det en skikkelig krasj for brukeren.
Det er ikke lenge siden Slottsfjellfestivalen fikk en helt ny stil og har da gått for en fresh 8-bits cartoon stil med spreke farger og lekne motiver. Fokuset ligger på forsiden og resten av siden er simpel med en touch av de lekene elementen

Et annet eksempel er Vans. De har laget en animert webshop for årets julegavetips. Dette er en morsom opplevelse og enkel å bruke til tross for at det er mye som skjer i bildet. Stilen passer til målgruppen og blir derfor ikke for “barnslig” for en typisk vans bruker.

4. Typografisk cut outs

Flere designere velger å bruke typografisk utklipping over et bilde slik at bildet kommer tydelig igjennom bokstavene. Denne teknikken fungerer bra med både stillbilder eller bevegelige bilder. Teksten kan være en full overlay, slik at kun en liten mengde informasjon kommer gjennom bokstavene (nesten som en tekstur) eller med mer som en tekstboks lag med mer av bildet synlig.

Trikset for at dette skal funke er å velge riktig skrifttype. Bokstaver må ha tykke nok strokes slik at bildet eller teksturen i bakgrunnen er synlig. Du kan ikke gjøre dette med en tynn eller kondensert skrift med konsekvent suksess.
Denne teknikken fungerer også best hvis antall ord og bokstaver er ganske begrenset. Hold deg til 1–3 ord med 10 eller færre bokstaver, eller bruk svært vanlige ord som brukerne vil kjenne ved et øyeblikk.