![](data:image/svg+xml,<svg display="block" role="presentation" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g d="M 0 0 L 16 0 M 0 6 L 16 6 M 0 12 L 16 12" fill="transparent" height="12px" id="tOoTk1b7B" transform="translate(4 6)" width="16px"><path d="M 0 0 L 16 0 M 0 6 L 16 6 M 0 12 L 16 12" fill="transparent" height="12px" id="dx3OnzCPD" stroke-dasharray="" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" stroke="rgb(105, 78, 59)" width="16px"/></g></svg>)
designlibrary
designsystem
accessibility
figma
Sofie
verbetering Design System
Het ontwerp van een Styleguide naar een Figma Library.
Disclaimer
Vanwege de tijdspan die ik had voor dit project, heb ik enkele minimale 'Accessibility Guidelines' volgens de WCAG (Web Content Accessibility Guidelines, 2024) kunnen realiseren. Van alle guidelines heb ik enkel het oppervlak aangeraakt: er is nog veel meer ruimte voor verbetering op dit gebied die ik niet heb kunnen behandelen. Daarnaast ben ik me ervan bewust dat deze guidelines zijn ontworpen voor web en dat ik dit toepas op een mobiele app, maar de guidelines waarmee ik aan de slag ben gegaan, zijn evengoed belangrijk voor mobiel gebruik.
Before & After: Stijl en toegankelijkheid
Sofie is een bedrijf dat omgaat met geldzaken en hoort daardoor betrouwbaarheid en een bepaalde serieusheid uit te stralen. Tegelijkertijd is één van de kernwaarden van Sofie geldzaken leuk maken. De CEO’s van Sofie stemden echter met mij in dat de huisstijl nog niet voldoet aan die mate van betrouwbaarheid: zo zijn onder andere de kleuren zijn te fel en druk. Daarnaast voldoen deze kleuren niet aan de Accessibility Guidelines zoals vastgesteld door de WCAG (2024). Met deze gedachten in het achterhoofd, heb ik de huisstijl van Sofie iets aangepast.
Kleuren
Het kleurenpalet was, zoals in onderstaande afbeelding te zien, beperkt tot huisstijlkleuren. Verschillende tinten van deze kleuren om contrast te vergroten in bijvoorbeeld buttons, ontbraken.
Deze kleuren heb ik uitgebreid om dit contrast en daarmee het gebruiksveld te vergroten — vastgelegd in Figma Variants. Waar welke kleur voor ingezet wordt, heb ik toegewezen in Figma Tokens (zie onderstaande afbeelding). Op deze manier is het duidelijk hoe elke kleur ingezet dient te worden: voor welke variant van een knop bijvoorbeeld.
Het kleurenpalet, beperkt tot de huisstijlkleuren.
Door een donkere tint toe te wijzen aan de hoofdknop, voldoet deze kleur ook meteen aan de toegankelijkheidsgrens volgens de WCAG. Dit vergroot het contrast en maakt het beter leesbaar. Deze donkerdere kleur draagt daarnaast bij aan de betrouwbaardere, serieuzere uitstraling waar de CEO’s van Sofie naar op zoek waren.
De kleur van de hoofdknop: voor (links) en na (rechts).
Menubalk
Een verschil in status (state) mag niet alléén gecommuniceerd worden met kleur volgens de Accessibility Guidelines. Dit is wel het geval in de menubalk van de app: bij sommige iconen wordt enkel met kleur aangegeven dat dit icoon actief is. Om dit te laten voldoen aan de guidelines, heb ik de iconen, behalve hun kleur, op een andere manier visueel onderscheiden door met vulling (fill) te werken. Door daarnaast de schaduw om de menubalk weg te halen, heeft dit meteen een strakkere uitstraling.
Oude menubalk, waar bij sommige iconen enkel kleur een verschil in staat aangeeft.
Nieuwe menubalk, waarbij naast kleur ook de vulling van een icoon de actieve staat aangeeft.
Lettertype en uitstraling
Om de wens voor een meer betrouwbare uitstraling verder te vervullen, koos ik ervoor om het lettertype van de huisstijl te veranderen van Open Sans naar Nunito. Open Sans geeft een standaard en toch wel saaie uitstraling. Nunito heeft meer karakter, en straalt tegelijkertijd professionaliteit en speelsheid uit: dit past perfect bij de visie en kernwaarden van Sofie.
Daarnaast, met oog op zowel accessibility als een professionele uitstraling, wijzigde ik de kleuren van de cards. Tot slot veranderde ik de gestippelde omranding van de knop naar een eenlijnige omranding, omdat een stippellijn vaak aanduidt dat er iets 'in' het vak kan worden gevoegd (slepen of uploaden), en dat is hier niet het geval.
Dagelijks gebruiksgemak voor designers
Ikzelf als Interaction Designer ervaarde met de oude styleguide samen met andere (grafische) ontwerpers een aantal pijnpunten in ons dagelijkse werk: doordat deze onvolledig was, zowel in afwezigheid van documentatie als afwezigheid van elementen in hun geheel, waren we veel tijd kwijt aan steeds nieuwe elementen ontwerpen. Hierdoor ontstonden er meerdere varianten van hetzelfde component, zonder dat hier bewustwording van was.
Dat moest anders. In het Design System dat ik ontwierp, inventariseerde ik alle verschillende varianten en maakte daar één optimale variant van. Door deze componenten op een geordende manier te categoriseren, ontstond er een overzichtelijk document waar designers het gewenste component uit kunnen kopiëren. Niet langer tevergeefs zoeken of onnodig nieuwe elementen ontwerpen. Gewoon checken en kopiëren: snel en makkelijk, én dit vertaalt zich richting gebruikers naar een consistent ontwerp en betere gebruikerservaring in de app.
Voorbeeld: hoofdknop
De hoofdknop was in de oude styleguide onvolledig opgebouwd; in het nieuwe Design System is deze flexibel en compleet met verschillende varianten om uit te kiezen.
Oude knop in de styleguide: beschikbare varianten.
Nieuwe knop: veel verschillende varianten mogelijk, van primary tot tertiary, disabled, en verschillende opties voor het positioneren van een icoon. (Opmerking: de afbeelding laat slechts een gedeelte van het gehele component zien.)
Conclusie
De opdracht
Vanwege ondervonden problemen in het dagelijks werk van designers bij Sofie, zoals het ontbreken van ontwerpelementen of het ontwerpen van meerdere designs voor één component zonder dat daar bewustwording voor was, en vanwege de wens voor één complete plek om alle componenten vandaan te halen, ontstond de vraag naar een nieuw, flexibel Design System. Ik zette de huidige styleguide om naar een Figma Library, waarbij ik niet alleen het document overzichtelijk categoriseerde, maar ook alle componenten flexibel opbouwde en sommige elementen opnieuw definieerde met oog op Accessibility Guidelines.
Resultaat in de praktijk
De praktijk bevestigt dat het veel gemakkelijker is om met dit Design System nieuwe schermen te ontwerpen: volgens de ontwerpers bij Sofie brengt dit structuur en overzicht aan. Zij hoeven minder na te denken over hoe een onderdeel ontworpen dient te worden omdat hier stijlregels en flexibele componenten voor zijn. Dit resulteert in een snellere workflow en consistentere designs, zoals de wens was.
De terugblik
Opgedane skills
Het inventariseren en opzetten van een Design System in een Figma Library heeft mij de volgende skills laten inzetten.
Meer showcases
Geraadpleegde bronnen
Web Content Accessibility Guidelines (WCAG) 2.2. (2024, 12 december). W3C.org. https://www.w3.org/TR/WCAG22/#abstract