Atomic design - ontwerpen

Geschreven door: op dinsdag 25 juni 2019

Leestijd: 1 minuut

In mijn vorige blog heb ik verteld wat Atomic design in theorie is, namelijk het modulair opbouwen van bijvoorbeeld een interface. Hieronder vertel ik meer over het ontwikkelen van modules binnen ontwerpen en dan specifiek op wat UX designers veel doen; wireframen.

Waar ik met het vorige blog eindigde was de documentatie van alle atomen die je voor een website ontwerpt. Dit is waar je mee begint voordat je verder naar bijvoorbeeld een homepage of een navigatiebalk kijkt.

Documentatie ontwikkelen

Bij het ontwikkelen bij zo’n documentatie begin je met het uitwerken van de visuele variabelen, hierbij kun je denken aan;

  • Fonts
  • Iconen
  • Kleuren
  • Vormen

Vervolgens geef je deze variabelen een passende naam zodat je dit zo nodig weer kunt hergebruiken en gemakkelijk kunt delen met het design team.

Wanneer je gebruik maakt van Adobe XD worden deze variabelen ‘Assets’ genoemd, zie hieronder 2 screenshots van de kleuren en fonts.

  fonts   fonts

Geschreven door

Rowan ZomerdijkRowan Zomerdijk
UX Developer
Open Nieuwsbrief Inschrijving Footer

E-book

Zo wordt uw website een lead generator 
In 3 stappen uw website van visitekaartje naar salesfunnel

Download het E-book â€º