Context

Hieronder staat mijn onderzoek naar verschillende begrippen binnen de context van deze opdracht beschreven.

Design systems

Bedrijven als Airbnb, Uber en IBM hebben de manier waarop zij digitaal design en development veranderd door het gebruik van design systems te introduceren (Fanguy, 2017). Een design system is een collectie van herbruikbare componenten met daarbij de regels om deze componenten te gebruiken. Deze componenten kunnen worden gecombineerd om een applicatie op een schaalbare manier te bouwen. Componenten zijn de bouwstenen van een applicatie. Deze kunnen verschillen in complexiteit. Een 'button' component heeft niet veel functionaliteit, dit zorgt ervoor dat dit component veel herbruikt kan worden. Een 'tabel' component voor een specifiek soort data heeft minder functionaliteit en kan dus ook minder vaak herbruikt worden.

Als je dit bovenstaande leest lijkt dit heel erg op een pattern library. Het verschil met een pattern library is dat het bij het design system draait om het 'waarom' en 'wanneer'. De componenten gaan samen met een duidelijke beschrijving van wanneer het component toegepast kan worden. Hierdoor zorg je ervoor dat bij bijvoorbeeld grote bedrijven met veel teams één waarheid is voor de componenten die ze kunnen gebruiken in hun ontwerp.

Vaak bestaan design systems niet alleen uit herbruikbare componenten, maar ook een styleguide voor bijvoorbeeld kleuren, lettertypes en animaties. Dit is te zien bij het Carbon design system. Ook kunnen regels voor de tone of voice van de content een goede toevoeging zijn, zoals te zien bij het Lightning design system.

Om een goed design system te maken is het belangrijk dat je weet uit welke elementen je interface bestaan. Hiervoor is het belangrijk dat je een 'interface inventory' maakt.

Interface inventory

Een 'interface inventory' is een verzameling van alle bestaande onderdelen van een website. Het maken van een interface inventory kan verschillende doelen dienen:

• Uitzoeken uit welke componenten een bestaande website bestaat om inconsistenties te ontdekken, zoals Jackson (2015) beschrijft in het artikel 'From Pages to Patterns: An Exercise for Everyone'
• Bepalen uit welke componenten een opgeleverd ontwerp bestaat voord (of tijdens) het bouwproces van een website, zoals Frost (2013) beschrijft in zijn artikel over interface inventories.

Om een goed overzicht te krijgen van alle componenten die er in een nieuw ontwerp of van een website bestaan is het handig om een 'interface inventory' te maken. "An interface inventory is a comprehensive collection of the bits and pieces that make up your interface." (Frost, 2013). Deze techniek wordt vaak toegepast om erachter te komen welke componenten er in een huidige website bestaan.

Er zijn vershillende niveaus waarop een interface inventory gemaakt kan worden (Suarez, Anne, Sylor-Miller, Mounter, & Stanfield, z.d.):

• Visuele attributen, zoals ruimte tussen elementen, kleur en typografie. Dit zal van pas komen bij het maken van een basis voor de code van de website.
• UI elementen, zoals knoppen, modals en tabellen. Dit zal van pas komen bij het maken van een overzicht van componenten.

Tijdens dit project zal ik me gaan richten op het tweede, het maken van een overzicht van componenten in een ontwerp. Dit ga ik doen omdat dit in het huidige proces ook al gebeurd en het verzamelen van visuele attributen hier niet bij hoort.

Bij dit voorbeeld is te zien dat er (te) veel verschillende knoppen binnen deze website bestaan en dat er geen consistentie is. Het is belangrijk om te weten dat deze inconsistencies te zien voordat er een design system voor een website gebouwd wordt.

Uit interviews is gebleken dat deze methode ook wordt toegepast door developers om te kijken uit welke onderdelen een ontwerp bestaat voordat ze deze gaan bouwen. Ze printen de ontwerpen uit en markeren hierop welke componenten hierin bestaan. Zo krijgen ze een goed overzicht welke componenten ze moeten gaan bouwen. Hier wordt dus ook een 'interface inventory' gemaakt, maar met een ander doel.

Conclusie

In eerste instantie dacht ik dat de applicatie ervoor ging zorgen dat er een design system gevormd ging worden. Na het onderzoek naar design systems kwam ik erachter dat het uitknippen van componenten een stap is in het maken van een design system. In plaats van dat je met de applicatie een design system maakt, maakt je een 'interface inventory'. Dit is een verzameling van de componenten die bestaan in het ontwerp. Dit overzicht kan ervoor zorgen dat er een duidelijk overzicht is van de componenten in de applicatie.