Typografi - hva du bør og ikke bør gjøre

Typografi spiller en avgjørende rolle i brukergrensesnittdesign, ettersom den bidrar til å skape et visuelt hierarki, forbedre lesbarheten og formidle en merkevares personlighet. Å forstå hvordan typografi kan påvirke det generelle estetikken i et design og innflytelse hvordan brukerne oppfatter og samhandler med grensesnittet vil alltid tilby bedre produkter.

Bare se forskjellen 👇

En velvalgt skrifttype kan få et design til å se profesjonelt, ryddig og brukervennlig ut, mens dårlige typografiske valg kan få det til å se uprofesjonelt, uoversiktlig og vanskelig å orientere seg i produktene våre.

I tillegg kan typografi også påvirke Tilgjengelighet ved å sørge for at teksten er leselig for personer med nedsatt syn. Så snart designere forstår hvor viktig typografi er som en vital komponent i brukergrensesnittdesign, desto raskere vil det bidra til å forbedre brukeropplevelsen og kommunisere det tiltenkte budskapet på en effektiv måte.

Ved å ta hensyn til disse designkriteriene og -logikken kan typografien effektivt forbedre den generelle brukeropplevelsen og bidra til å kommunisere de tiltenkte budskapene på produktene dine.

Dos and Don'ts for arbeid med typografi i brukergrensesnittdesign

• Bruk tydelige og leselige skrifttyper: Velg skriftfamilier som er lette å lese og som passer til målgruppen og konteksten.
• Skap et visuelt hierarki: Bruk ulike skriftstørrelser, -tykkelser og -stiler for å skape et fossefall av informasjon og styre brukerens oppmerksomhet.
• Sørg for kontrast: Sørg for at det er nok kontrast mellom teksten og bakgrunnen for å unngå problemer med lesbarheten.
• Vurder linjeavstand og bokstavavstand: Juster linjeavstanden, Kerning (mellomrom mellom to bestemte bokstaver) og Tracking (mellomrom mellom alle bokstaver) for å forbedre lesbarheten og få teksten til å se estetisk tiltalende ut.
• Formidle merkevarens personlighet: Bruk typografi som gjenspeiler merkevarens verdier og opplevelse, noe som er en god måte å forsterke den visuelle identiteten på.

• Unngå for mange skrifttyper samtidig: Begrens antall skrifttyper til én eller to for å sikre konsistens og unngå rot.
• Overdrevent dekorative eller vanskelig lesbare skrifttyper: Unngå å bruke skrifttyper som er vanskelige å lese, spesielt i store tekstblokker. Dette kan fungere i enkelte tilfeller, for eksempel i store titler, men det anbefales ikke å bruke slike skrifttyper i små scenarier.
• Forsømmelse av tilgjengelighet: Sørg for at teksten er leselig for personer med nedsatt syn. Hvis den ikke er lesbar for disse scenariene, skal den forbedres.
• Ignorer konteksten: Tenk på målgruppen og konteksten når du velger skrifttyper og stiler.
• Veldig små størrelser: Unngå å bruke for små typer, spesielt for brødtekst, i liten størrelse, da det kan være vanskelig å lese og føre til anstrengte øyne.

➡️ Fonter er mektige ressurser: noen er faktisk laget spesielt for wireframing, se disse to alternativene:

Flyt

Denne skrifttypen har bare én vekt (sirkulær, avrundet eller blokk) eller, og det er ment å være en svært forenklet versjon for plassholdere, er det veldig nyttig for low-fidelity wireframing i scenarier der vi ønsker å fokusere på en bestemt funksjon eller seksjon.

Last ned Flyt av Dan Ross her.

Redigert manus

Dette er alternativet for de som liker trykte wireframes, Redacted Script har tre vekter og etterligner en persons håndskrift. Den gir et fint utseende og en fin følelse samtidig som den gjør jobben sin.

Last ned Redigert Skript av Christian Nahts her.

☝ Før du avslutter, må Lasting Dynamics-teamet vil vise noen av våre favorittskriftfamilier for digitale grensesnitt:

Last ned Inter av Rasmus Andersson her.

Last ned Larsseit av Nico Inosanto her.

Last ned Sirkulær STD av Laurenz Brunner her.

Last ned Berthold Akzidenz Grotesk av Ferdinand Theinhartd her.