Ontwerpsysteem: wat het is, waarom en hoe het te maken

Het lijkt erop dat het onderwerp ontwerpsystemen al van alle kanten is besproken: je kunt er veel artikelen, berichten, rapporten en ander materiaal over vinden het creëren van een ontwerpsysteem. Desondanks heeft iedereen die deze term tegenkomt veel vragen. We zullen proberen de belangrijkste in detail te beantwoorden:

• Wat is een ontwerpsysteem?
• Wat is het voor?

Wat is een ontwerpsysteem?

Een ontwerpsysteem is een structuur die visuele componenten, een codebibliotheek en gebruiksrichtlijnen omvat.

Vaak maken beginnende ontwerpers de fout het concept te vereenvoudigen door een ontwerpsysteem te zien als slechts een UI-kit: een document dat grafische interface-elementen, typografie en kleuren bevat.

Het ontwerpsysteem bestaat uit drie niveaus:

A UI-kit is de beeldtaal van een product waarvoor een ontwerpsysteem is gemaakt. Dit zijn kleuren, lettertypen, pictogrammen, knoppen, opsommingstekens, tuimelschakelaars, schuifregelaars, afbeeldingen, animatie. De elementen variëren en zijn afhankelijk van de specifieke kenmerken van het digitale product. Ze helpen allemaal bij het creëren van het zichtbare deel van de interface waarmee de gebruiker communiceert.

Het raamwerk is een codebibliotheek die voor elk van deze elementen is geschreven, evenals plug-ins voor animatie, tags en labels voor navigatie.

Richtlijnen zijn een reeks sjablonen en regels voor het gebruik van elementen die het werkproces organiseren. Dankzij richtlijnen is een ontwerper niet bezig met eenvoudige taken, maar is er direct een ontwikkelaar bij betrokken.

De richtlijnen specificeren bijvoorbeeld de parameters van een pop-upvenster op een website: inspringingen in de tekst, de locatie en grootte van de titel en hoofdtekst, een plaats voor een knop en hoe het venster eruit zal zien met minder of minder meer tekst.

Soorten ontwerpsystemen

Er is geen eenduidige classificatie, maar experts onderscheiden twee soorten ontwerpsystemen: open en gesloten bron.

In open-sourcesystemen kan elk bedrijf materialen gebruiken en deze voor hun projecten aanpassen – knopkleuren, lettertypen en pictogrammen wijzigen. Bijvoorbeeld in Ant Design-, Human Interface Guidelines- en Material Design-systemen.

Closed-source ontwerpsystemen worden doorgaans gemaakt voor een specifiek bedrijf of product. Dit zijn óf volledig gesloten materialen, alleen toegankelijk voor medewerkers, óf gedeeltelijk open.

Hoe een ontwerpsysteem te creëren

De ontwikkeling van ontwerpsystemen is gebaseerd op de principes van atomair ontwerp. Atoomontwerp is een techniek die vijf niveaus van ontwerpelementen omvat: atomen, moleculen, organismen, patronen en pagina's.

Ontwerp systeemstructuur:

• atomen zijn de kleinste componenten: knoppen, pictogrammen, invoervelden en lettertypen.
• Moleculen zijn een combinatie van verschillende eenvoudige elementen: twee knoppen, een titel en een invoerregel, een notificatiebalk, een selectievakje en tekst.
• Organismen zijn complete componenten: sitekop, autorisatieformulier, productkaarten en meldingsbanner.
• Sjablonen – pagina-indelingen zonder inhoud: menu, uiterlijk van de site.
• Pages zijn pagina's gevuld met inhoud.

Het algemene algoritme ziet er als volgt uit:

• Selecteer kleuren en lettertypen, stel modulaire rasters in en selecteer animaties, afbeeldingen en geluiden.
• Maak basisinterface-elementen.
• Combinaties en lay-outs van ontwerpelementen.
• Maak een lijst met elementen samen met de regels. Geef in de richtlijn aan wat het element is, waar het wordt gebruikt en welke taken het oplost.

Doorgaans worden ontwerpsystemen niet helemaal opnieuw gemaakt, maar gebouwd op basis van reeds ontwikkeld materiaal: UI-kits, richtlijnen of merkboeken.

Waarom heb je een ontwerpsysteem nodig?

Zoals bij elk IT-product is het van cruciaal belang om de vraag te beantwoorden: “Waar dient een ontwerpsysteem voor?” Of, zoals sommige collega’s in de winkel opmerken: “nou en”?

Het antwoord op deze vraag zal u helpen de waarde van het product te begrijpen. Een deel ervan is al te zien aan wat we hierboven hebben beschreven. Maar laten we het opsplitsen en dieper kijken.

Automatisering

Automatisering biedt het meest voor de hand liggende voordeel. Een ontwerpsysteem helpt u bij het automatiseren van werkzaamheden, waardoor u tijd vrijmaakt voor andere taken.

Iterativiteit

Het kunnen overnemen en automatisch toepassen van wijzigingen in ontwerpsysteemelementen is een waardevol hulpmiddel voor een productteam. U kunt snel cosmetische of zelfs grote veranderingen op één locatie doorvoeren. Op deze manier kunt u het product altijd verbeteren.

Consistentie

Consistentie stelt dat de objecten en entiteiten in een product die dezelfde functie vervullen, moeten streven naar eenheid en gelijkenis.

Wanneer we vergelijkbare functies in een product gebruiken, worden ze vertrouwd en handig: we begrijpen instinctief hoe de knop werkt en verschijnt, en waar deze zich bevindt.

We hopen dat iedereen iets waardevols uit het artikel heeft geleerd. En we waren er opnieuw van overtuigd dat het werken aan een artikel kennis structureert en aanvullend onderzoek motiveert.