De kracht van design systems

Met design systems professionaliseer je de ontwikkeling van je applicaties. Door herbruikbare componenten te gebruiken, werken ontwikkelaars niet alleen beter samen, maar kunnen ze ook sneller en betere applicaties ontwerpen. Bovendien zijn deze apps veel intuïtiever voor gebruikers omdat ze zijn gemaakt vanuit vaste richtlijnen, zeker als je dezelfde methodiek gebruikt voor verschillende applicaties binnen jouw organisatie. Wat design systems zijn en hoe je ze kunt toepassen, vertellen we hier.

Wat zijn design systems?

Design systems zijn herbruikbare componenten die je kunt toepassen op de ontwikkeling van zowel de front end als de back end van applicaties. Deze componenten worden vooraf ontwikkeld en opgeslagen in een soort bibliotheek. Daarna zijn ze (her)bruikbaar om applicaties mee op te bouwen. Ze vormen in feite het fundament waarop de ontwikkelaar verder doorbouwt.

Voor de front end kun je vaste elementen in de structuur en vormgeving vastleggen in deze componenten. Zoals je huisstijl (font, kleurschema’s), maar ook bijvoorbeeld hoe je lijstjes indeelt, of en hoe je drop down menu’s gebruikt, de plaats van het menu op het scherm, de opmaak van de header en footer, en meer.

In de front end zitten vaak ook vaste interactiepatronen. Vooral bij administratie-applicaties zijn deze standaard: invoeren, lezen, updaten, verwijderen (CRUD) en zoeken van gegevens. Ook de afhandeling van acties bestaat vaak uit dezelfde logica. Denk bijvoorbeeld aan het opvragen van een zoekresultaat of het verslepen van een kolom door deze vast te houden.

Toch worden deze bewerkingen in veel gevallen steeds opnieuw ontworpen. Het risico daarvan is dat je technisch iedere keer het wiel opnieuw uitvindt, maar ook dat de user interface niet consistent is binnen de applicatie of tussen verschillende applicaties. Dat maakt ze minder gebruiksvriendelijk. Door deze bewerkingen vast te leggen in design systems zijn ze consistent en kunnen ze eenvoudig opnieuw gebruikt worden.

Samengevat maak je met design systems vooraf vaste afspraken over de indeling, vormgeving, interactiepatronen en de afhandeling van bepaalde interacties. Deze afspraken worden vastgelegd in herbruikbare componenten.

UX designers

Voordelen van design systems

Het hergebruik van de componenten heeft een aantal voordelen:

  • Bespaart tijd, geld en discussie (tussen ontwikkelaars en ontwikkelaars en designers)
  • Consistentie in user interface
  • Consistentie in codering
  • Maakt beheer makkelijker
  • Hogere voorspelbaarheid van applicatie
  • Vereenvoudigt testen

Daarmee neemt de productiviteit en effectiviteit van het ontwikkelteam toe. Maar ook voor de gebruiker wordt de applicatie beter, omdat deze intuïtiever is. Wanneer een bepaalde knop steeds op dezelfde plek zit en een actie op dezelfde manier door de applicatie wordt afgehandeld, raakt de gebruiker hieraan gewend en wordt de applicatie automatisch gebruiksvriendelijker.

Splitsen van vormgeving en structuur

De structuur bepaalt welke componenten je in welke situatie gebruikt. De vormgeving bepaalt de fonts, kleuren, marges en dergelijke. Een voorbeeld: in een design system is bijvoorbeeld vastgelegd welk type zoekveld wanneer wordt gebruikt en hoe de letters worden weergegeven op het scherm. De ontwikkelaar heeft echter nog wel de vrijheid om de breedte van het zoekveld bepalen.

Het gebruik van design systems ontneemt dus een klein deel van de vrijheid aan UX-design. De ontwikkelaar heeft niet meer alle vrijheden in het ontwerp, maar werkt binnen het kader van de gemaakte (huisstijl-)afspraken. Dit zorgt voor consistentie en herkenbaarheid en daarmee, zoals gezegd, voor een betere gebruikerservaring.

Er blijft echter ruimte voor eigen invulling. In een goed opgezet design system worden vormgeving,structuur en componenten immers los gedefinieerd. Vanwege deze scheiding kan ieder onderdeel onafhankelijk van de ander worden aangepast.

Ook kunnen, met de goede technologie en implementatie van design systeem, individuele componenten van derden worden toegevoegd of een bestaande component individueel worden gestyled, mocht dat nodig zijn. Zo kan een complete vormgeving (alle sjablonen die samen een thema of huisstijl vormen) eenvoudig worden aangepast zonder dat structuur of componenten hoeven te wijzigen.

Je bepaalt zelf welke onderdelen je vastlegt in het design system.

UX designers at work

Efficiënter ontwikkelen in combinatie met een generator

Design systems kun je combineren met een generator, zoals Dynamo. Met dit open source Java framewerk, ontwikkeld door Open Circle Solutions, genereren we snel en efficiënt een front end. In de generator worden alle principes van uw design system vastgelegd. Daarmee kunnen we:

  • automatisch je applicatie opmaken in je huisstijl
  • hogere productiviteit realiseren door componenten te hergebruiken
  • de indelingen van schermen in blokken opbouwen

Op die manier professionaliseer je de front end ontwikkeling van je organisatie.

Wanneer zet je design system in?

In design systems zet je afspraken om naar een verzameling herbruikbare componenten of services die je gebruikt om applicaties te bouwen. Zeker wanneer je met meerdere ontwikkelaars werkt, besparen deze prefab componenten tijd, geld en discussie. Het zorgt voor consistentie, zowel in de user interface als de codering.

De toepassing is daarom met name nuttig voor organisaties die regelmatig applicaties (laten) ontwikkelen of aanpassen. Maar ook wanneer je met meerdere scrum teams werkt aan één grote applicatie waarborgt design systems dat iedereen volgens dezelfde uitgangspunten werkt. Dit voorkomt verschillen in broncode en lay out. En daarmee maak je het testen en het beheer van je applicaties op de lange termijn eenvoudiger.

Stapsgewijs toepassen van design systems

Het toepassen van design systems kan groeien. Je begint met afspreken maken over wat je wilt standaardiseren. Dat vertaal je naar herbruikbare componenten die je vastlegt in het design system, te beginnen bij eenvoudige componenten als lettertype en kleurgebruik. Vervolgens bekijk je welke interactiepatronen gestandaardiseerd kunnen worden en vervolgens welke afhandelingen. Zo bouw je stap voor stap je bibliotheek van herbruikbare componenten uit.

Hoe meer je standaardiseert, des te minder ontwikkelaars van scratch af aan hoeven te ontwikkelen. Uiteindelijk komt dit ten goede aan de productiviteit van het ontwikkelteam en de kwaliteit van je applicaties.

Design systems voor uw applicaties?

Lijkt design systems wel iets voor je organisatie, maar kun je wel wat hulp gebruiken bij het opstarten? Open Circle Solutions heeft alles in huis om jouw applicaties op maat te bouwen op basis van deze methodiek. Hierbij heb je de vrije hand in hoeverre je flexibiliteit wilt en wat je graag standaardiseert. We overleggen met je op welke systemen of applicaties we moeten aansluiten en maken gezamenlijk de keuze tussen snelheid en standaard of op maat en meer coderen. Neem vrijblijvend contact met ons op of bel naar +31 40 30 41 330.

Meer artikelen

Planning software op maat is meest flexibele oplossing

Planning software op maat is meest flexibele oplossing

Elke organisatie heeft te maken met planningen: van vergaderingen en serviceroutes tot roosters. Het is belangrijk om schaarse middelen optimaal in te zetten en op elkaar af te stemmen: mensen, machines, ruimtes. Hoe meer variabelen, des te ingewikkelder de planning....

Een gelikte user interface met Angular, zonder bijbehorende nadelen

Een gelikte user interface met Angular, zonder bijbehorende nadelen

Angular is een veelgebruikt JavaScript-framework dat het makkelijk maakt een website of webapplicatie te bouwen. Het geeft je user interface net die extra uitstraling en een supersnelle responstijd. Dat is mogelijk omdat ontwikkelen met Angular de front- en back-end...

Nieuwsbrief

Meld je nu aan voor Open Circle Stories en krijg een verzameling artikelen, tips, nieuws en verdiepingen in je mailbox.

Pin It on Pinterest

Share This