User Interface Ingrediënten [4/4]

user interface ingredienten

Deel 4 – onderweg naar een ontwerp …

Eerder heb ik al geschreven dat je voor een ontwerp niet meteen achter de computer kruipt. Ten eerste schets je waar de content en de knoppen komen. Daarna maak je een wireframe om per actie te laten zien wat er gebeurd. Daarna kijk je naar de look-and-feel. Een moodboard is een optie, ook kan de klant websites en andere grafische uitingen verzamelen om een beeld te krijgen waar de designtaal heen gaat.

Designtaal

We zijn inmiddels bij stap vier. Om een idee te krijgen hoe het er allemaal uit gaat zien gaan we een pallet aan kleuren kiezen en een lettertype die het goed doet online. Met de klant kijk je natuurlijk naar hun bestaande huisstijl. Allicht is dit alles al beschreven in het huisstijl-handboek.

Bedenk je dat je voor een groot aantal letterfamilies een licentie nodig heb. Maar met google fonts kom je een heel eind. Nadeel is dat je werk misschien wat (sneller) op andere bedrijven lijkt.

TIP: kies voor koppen een lettertype dat net iets smaller is. Zo kan je meer tekst kwijt op de regel.

Lettertypes en snelheid

Je wilt je onderscheiden en gaat op zoek naar exotische lettertypes (fonts). Het gebruik van lettertypes die niet op iemands computer staan en dus van elders geladen worden. Hoe meer varianten en verschillende font-families je laadt hoe langer het laden van je website kost. Dit wordt afgestraft door de zoekmachines.

Maak van je site geen kerstboom, maar ga ook niet voor een ontwerp met maar één lettertype. Een lettertype kan uit meerdere ‘zwaarte’ bevatten. Denk aan dun (thin), regulier, medium, vet (bold) en black. Daarnaast kan je van die varianten ook nog een cursieve versie nodig hebben. – Je begrijpt ook hier geldt: een grote familie laad langzamer en je hebt misschien niet eens alle varianten nodig.

Bræntsheet ontwikkelen

Het kan zijn dat je nog geen styling heb vastgesteld voor je bedrijf of je bent toe aan een refresh. Dan komt dit tijdens de ontwikkeling van de high fidelity ontwerpen zeker voorbij.

  • Je stelt het kleuren pallet vast
  • Je stelt de lettertypes vast
    • Een letter voor je koppen
    • Een letter voor je body
  • Je stelt de lettergrootte vast (hou rekening met schaling voor diverse apparaten!)
    • Hou rekening met je grid
    • Bepaal je interlinie
  • Je bepaalt je knoppen en kaders

Knoppen en kaders

Zeker op een website worden knoppen vaak gebruikt. Ze hebben een bepaalde ‘call-to-action’,

  • een kleur,
  • mogelijke ronding,
  • kapitalen,
  • verloop en
  • al dan niet een schaduw.

Voor kaders die om aandacht vragen zou je dezelfde vormgeving kunnen gebruiken. De kleur is echt belangrijk. Bij het ontwikkelen van een app of site kan kleur een extra intentie geven.

  • Groen – Ga door
  • Grijs – Sla op
  • Rood – Gooi weg
  • Blauw - Bewerk

Verder met je identiteit

Ben jij klaar om aan de slag te gaan met je identiteit (drijfveren) of met de vormgeving (afstemmen van communicatie) dan kunnen we een kopje koffie doen bij jou of bij mij ‘in de buurt’
~ anderhalve meter.

Laat een reactie achter

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *