Atomic design - ontwerpen

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.