Introductie

Atomic design

Introductie

• Design systemen zijn geweldig
• Fundament van ieder design
• Maar hup; start nu eens?!

Je moet een nieuwe pagina designen voor een klant, hoe start je?

(Ze hebben al een design systeem)

wooclap.com/UIP

Ga naar:

Wat is het?

Een methodologie ontleend uit de wetenschap

Onderdelen

Atomic design

Onderdelen: Atomen

• De kleinste bouwstenen van een gebruikersinterface
• Kunnen niet nog verder opgesplitst worden

Onderdelen: Atomen

Andere voorbeelden:

• HTML-elementen met een basisstijl
• Kleuren
• Lettertypen
• Iconen
• Microanimaties
• Geluiden

Onderdelen: Moleculen

• Het kleinste onderdeel die uit atomen bestaat.
• Al iets concreter dan atomen, 

Onderdelen: Organismen

• Een combinatie van moleculen
• Relatief complexe onderdelen van een UI.

Onderdelen: what's next?

Om tot een pagina design te komen voorziet atomic design nog 2 stappen:

Onderdelen: template

• Template (of wireframe) is een combinatie van organismes
• Dit is een werkdocument dat de klant te zien krijgt.

Onderdelen: template

Onderdelen: pagina's

• Een pagina (of design) is een wireframe die ingevuld werd met echte inhoud.
• Dit is waar de meeste belanghebbenden mee te maken krijgen in het ontwerpproces.

Onderdelen: pagina's

In de praktijk

Atomic design

In de praktijk

In de praktijk

Brug van abstract naar concreet

Wireframes (of templates) beschrijven de structuur terwijl Designs (of pages) deze structuur gaan opvullen met inhoud.

In de praktijk