Graphite - ons eigen design system!
Een design system zorgt ervoor dat je efficiënt kunt werken aan de user experience van een applicatie, aan een prettige look and feel. Bij PAQT hebben we ons eigen (open source) design system ontwikkeld. Senior front-end developer Elwin van Eede vertelt er meer over. Samen met developer Tom Stemerding heeft hij er, naast het reguliere werk, 15 maanden aan gewerkt.
Wat is het Graphite Design System?
Graphite is een verzameling herbruikbare UI-componenten en tools om digitale producten te kunnen bouwen. Het is eigenlijk een grote doos LEGO stenen, ontwikkeld volgens duidelijke standaarden, compleet met goede documentatie en met een gids voor het gebruik ervan. Graphite zorgt voor hoge kwaliteit, goede toegankelijkheid en plezierige interacties.
Wat zijn de voordelen van een design system?
Met Graphite hoef je veelvoorkomende elementen, zoals bijvoorbeeld een knop, niet telkens opnieuw te ontwerpen en te programmeren. Dat is fijn, want zelfs een eenvoudige knop is nog niet zo simpel.
Je moet kiezen voor tekstkleur, gewicht, grootte, witruimte en het soort hoeken. Daarnaast heb je verschillende ‘states’, zoals hover, active en disabled. Varianten zoals primary, secondary en danger. Je kunt icons toevoegen en diverse ondergronden gebruiken. En de knop moet ook nog eens toegankelijk zijn voor alle mensen in iedere situatie.
Dat is dus nogal wat om rekening mee te houden. Als je daarvoor ieder project een designer en een developer aan laat werken, dan kost dat heel veel geld en heel veel tijd. En dan hebben we het alleen nog maar over een eenvoudige knop. Niet eens over invoervelden, modals en cards.
Met een design system beschik je over een heldere, visuele taal, met herbruikbare componenten. Dat verbetert de kwaliteit en de consistentie, terwijl onze ontwerp- en ontwikkelprocessen veel efficiënter worden. Graphite is een soort gemeenschappelijke woordenschat voor iedereen en dat maakt ook het samenwerken tussen teams en disciplines makkelijker.
We zijn nu bezig om design kits te maken waarmee de designers de Graphite componenten makkelijk kunnen gebruiken. De developers kunnen het design vervolgens eenvoudig implementeren dankzij de overeenkomende ‘coded’ componenten. Allemaal tijdwinst dus. Tijd die we liever gebruiken om specifieke klantvragen op te lossen.
Waarin verschilt Graphite van andere design systems?
Het is door onszelf gemaakt voor de digitale producten die wij doorgaans bouwen voor onze klanten. Wij hebben het in eigen beheer. Het is white-label, waardoor we zonder moeite de huisstijl van de klant kunnen toepassen. Bovendien hebben we het open-source gemaakt.
Graphite is eenvoudig te implementeren en de componenten kun je gebruiken in elk framework zoals Laravel Blade, Laravel Livewire, Vue 2, Vue 3 en React. Daarnaast bieden we geoptimaliseerde integraties met Vue 3 en React voor een verhoogde Developer Experience (DX). Maar ook zonder framework is Graphite bruikbaar.
Ieder project waarbij Graphite gebruikt wordt, profiteert makkelijk en snel van verbeteringen en doorontwikkeling van de componenten. Het stelt ons in staat om UI/UX-kwaliteit te leveren op het niveau van de grote spelers. Onze opdrachtgevers verwachten niet anders!
Waarom hebben jullie gekozen voor open source?
Graphite wordt gefinancierd en gebouwd door PAQT, wat betekent dat we bouwen voor de zakelijke behoeften van onze eigen onderneming, maar we hebben het open source gemaakt zodat iedereen ermee kan werken en kan bijdragen aan verbeteringen en uitbreidingen.
Software is namelijk nooit ‘af’, het Graphite design system ook niet. Je blijft telkens uitbouwen en onderhouden. We hebben een eerste release gedaan met basiscomponenten voor formulieren. Nu gaan we het toepassen in diverse projecten en het op basis van de feedback die we krijgen verbeteren. Daarna gaan we het design system uitbouwen met meer componenten. Wordt vervolgd dus!
Vragen?
We staan voor je klaar om ze te beantwoorden.
Neem contact op
Je bereikt me het snelst door te bellen naar 06 43 09 10 30
Vul je het formulier hiernaast in, dan reageer ik uiterlijk de eerstvolgende werkdag.
Een bericht via mail of LinkedIn kan natuurlijk ook.
Tot binnenkort!
