Atomic Design Systeem

Het Atomic Design systeemAtomic Design is bedacht door Brad Frost, zie ook zijn online boek Atomic Design. gaat uit van modulair ontwerpen. De belangrijkste voordelen zijn:

  • betere kwaliteit
  • besparing tijd en geld

Modules zijn zo klein mogelijke onderdelen die hergebruikt kunnen worden op verschillende locaties van de website. Een button bijvoorbeeld wordt voor verschillende onderdelen gebruikt. Het verbetert de consistentie van de website als de opmaak van de buttons gelijk is.

Websites worden op veel verschillende apparaten en schermgroottes gebruikt. Een website heeft geen vaste breedte meer. Met modulair ontwerpen is de website beter geschikt voor alle verschillende schermgroottes en apparaten. Het zorgt voor een consistent uiterlijk en bespaart tijd en geld nodig voor realisatie van de website.

Voordelen Atomic Design

Belangrijkste voordelen van een Atomic Design systeem zijn:

  • besparing tijd en geld
  • betere consistentie en kwaliteit website
  • project en teamwerk verloopt productiever
  • betere documentatie
  • testen gaat beter en sneller
  • flexibeler bij toekomstige aanpassingen/uitbreidingen

Interface Inventory

An interface inventory rounds up and categorizes all the unique patterns that make up an interface.

Een Interface Inventory brengt alle onderdelen (patterns) van een bestaande website in beeld. Het verzamelt en categoriseert deze onderdelen. Met de Interface Inventory kan duidelijk gemaakt worden of onderdelen consistent vormgegeven zijn.

Maken van een Interface Inventory

  1. Maak screenshots van de belangrijkste onderdelen (patterns).
  2. Maak screenshots van elke unieke interface element. De diversiteit aantonen is belangrijk.
  3. Orden de interface elementen in categorieën.

Zie ook het overzicht van belangrijke categorieën hieronder.

Website onderdelen categorieën

De meest voorkomende website onderdelen:

Basis:

  • layout: header, footer etc.
  • blokken: hero's, featured items
  • navigatie: hoofdmenu, footer menu's, breadcrumbs, pagina navigatie
  • kleuren: alle kleuren en variaties daaropTools die hierbij kunnen helpen: [CSS Stats](http://cssstats.com).
  • animatie: alles met beweging

Typografie:

  • headings: h1, h2, h3, h4 etc en alle varianten erop
  • tekst: paragraven, opmaak
  • links: alle links in tekst, footer, widgets etc. (anders dan buttons)
  • lijsten: alle onderdelen die als een lijst gepresenteerd worden

Media:

  • afbeeldingen: logo's, hero afbeeldingen, inline afbeeldingen, achtergrondafbeeldingen
  • icons: vormen een aparte groep, voorbeelden: vergrootglas (zoekfunctie), social media icons
  • media: video, audio, pdf etc.
  • advertenties: alle soorten advertenties

Interactief:

  • interactief: accordions, tabs, carousel (slider), alle onderdelen met beweging
  • formulieren: invul velden, radio buttons etc.
  • buttons: daar zijn er altijd veel van, verzamel ze allemaal!
  • berichten: verschijnen vaak nadat de gebruiker iets met de website gedaan heeft, denk aan inschrijven op nieuwsbrief, aanschaf in webshop
  • third party: widgets, iframes (ingeladen functionaliteit), social media sharing buttons, niet zichtbare tracking scripts en alles wat niet op de eigen website gehost is

Bronnen