Atomic design - ontwerpen

Geschreven door: op dinsdag 25 juni 2019

Leestijd:

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

 

Elke variabelen hebben hun eigen definities van kleur/kleuren, lettertype, lettergrootte, letterdikte etc.

Creëren van atomen en moleculen

Door de variabelen te hebben gedefinieerd dwing je jezelf als designer om je aan consistentie te houden, dit geeft rust in ontwerpen en maakt de kans op fouten in het ontwerp kleiner. Tevens is het aanpassen van wireframes gemakkelijker doordat je veel tegelijkertijd kan aanpassen bij het simpelweg muteren van de variabelen.

Nu de variabelen gekozen zijn kun je beginnen met het creëren van atomen, hier kun je wat creatiever zijn en komen de volgende variabelen; vormen en iconen meer aan te pas. Denk bijvoorbeeld aan een zoekinput, hier is het mogelijk om met de vormen te spelen, ga je voor ronde of rechte hoeken? Ook kun je denken aan een solid icoon of een outline icoon van een vergrootglas, dit is een creatief proces en hangt vaak af wat de interface moet gaan uitstralen, kijk hier vooral naar missie en/of visie van een bedrijf, wat zijn de kernwaarden, hoe willen ze naar buiten overkomen?

Welke elementen werk je dan uit?

Bedenk goed wat voor moleculen er in het interface gebruikt gaat worden. Is het een tool waar mensen dagelijks gegevens in moeten bijwerken, dan kun je denken aan inputvelden, range sliders, checkboxes, primaire button, secondaire button eventuele tekstlinks en ga zo maar door. Probeer dit voor jezelf af te bakenen, zo houdt je het ontwerp dichtbij elkaar als het gaat om vormgeving. Mocht het later voorkomen dat er moleculen bij moeten komen, werk deze dan eerst uit in je documentatie. In Adobe XD heten dit Componenten.

Met de documentatie een template ontwikkelen

Nu er een goede documentatie sheet ontwikkeld is kun je vrij snel en gemakkelijk organismen en de daarop volgende templates gaan wireframen. Zie bijvoorbeeld het volgende Call to Action organisme waar de volgende atomen in samen komen; Afbeelding + vorm, Titel(H3), Ondertitel, iconen + vorm en een tekstlink.

fonts

Mocht je later toch je interne links een andere kleur geven dan is dit zowel hier als in alle andere componenten op de site waar gebruik wordt gemaakt van deze atomen aangepast. Wat zorgt voor zowel snelheid als consistentie.

Adobe XD update

Sinds kort heeft Adobe XD een update waarmee symbols zijn veranderd in componenten, dit maakt het mogelijk om van componenten alternatieven te maken zo kun je denken aan een volgende situatie. Het component dat je gemaakt hebt bestaat uit donkere letters, nu wil je dit component ook gebruiken op een donkere achtergrond, dan is het door middel van componenten mogelijk hier een alternatief met lichte letters te maken die wel te lezen zijn op een donkere achtergrond. Echter het master component pas je in deze situatie niet aan, het master component is gedefinieerd in de documentatie sheet. Mocht je later het font willen veranderen aan dit component en deze muteert in het master component, dan wordt deze mutatie ook doorgevoerd in het alternatieve component met lichte letters.

Mijn idee is om meer te schrijven over Atomic design, hoe je deze theorie door kunt trekken naar de technische implementatie met CSS en HTML om op een correcte manier modules te bouwen.


Andere blogartikelen

Bel 072 5345 888
Onze Middelen en Technologieën
microsoft silver partner
Adobe partner
fd-gazellen-2018.jpg
Google analytics
partners-logo.jpg
Op de hoogte blijven?

Meld u aan voor de gratis nieuwsbrief om op de hoogte te blijven van onze activiteiten