Designers, website eigenaren, website ontwikkelaars en vele andere hebben wel is van een design systeem gehoord. Ik was benieuwd wat een design systeem is dus vandaar deze design systeem voor beginners blog. We gaat het hebben over wat een design system is en wat er nou allemaal in een design systeem zit.

Wat is een design systeem?

Een ontwerpsysteem is een collectie herbruikbare componenten die kunnen worden samengesteld om applicaties te bouwen. In een design system staan alle design keuzes en patronen beschreven denk hier aan kleuren, logo’s, icoontjes, blokken code en meer. Een heel mooi voorbeeld komt van Google met material design.

Wat zit er in een design systeem?

Een design systeem bestaat uit twee categorieën: een handboek met richtlijnen en herbruikbare componenten. Als eerst nemen we een kijkje in het handboek. Hierin kan je richtlijnen vinden op het gebied van:

  • Lay-out
    Het woord zegt het eigenlijk al… alle richtlijnen over de layout van de pagina. Hierin kan je onderwerpen terugvinden als aantal kolommen, uitlijning en niet te vergeten witruimte.
  • Navigatie
    We zijn het inmiddels allemaal gewend om te navigeren door een website of app. Maar toch kan dit nog steeds fout gaan. Het is heel frustrerend als iets niet werkt of je iets niet kan vinden. Daarom wordt dit onderwerp ook meenomen in een design systeem. Hier vind je informatie over overgangen, zoekfuncties, terug knoppen en meer.
  • Kleur
    Een van de belangrijkste onderdelen van design. De verkeerde kleuren combinatie kan ervoor zorgen dat je ogen weg branden en je gelijk een website verlaat. In dit hoofdstuk staat alles over kleurgebruik, kleurcombinaties, contrast en zelfs over donkere thema’s.
  • Typografie
    Al lijkt het heel simpel typografie is juiste moeilijk voor elkaar te krijgen. Alle informatie over fonts, dikte, grote, lijnhoogte enz. staat allemaal hier beschreven.
  • Geluid
    Dit hoofdstuk is misschien meer van toepassing op apps, maar ook geluid is een onderdeel van design. Geluid communiceert informatie en emotie wat af en toe alleen visueel niet mogelijk is. Geluid design is een vak op zich en daar kan iemand die daar opgeleid voor is wel 100 blogs over schrijven.
  • Icons
    Om je website of app 1 geheel te laten lijken moeten al je icoontjes ook dezelfde stijl en kleuren combinatie hebben. Het lijkt allemaal heel simpel, maar zodra het fout is gedaan valt het direct op. In je design systeem kan je alles neerzetten over complexiteit, kleurgebruik, animaties en veel meer.
  • Vormen
    Vormen “vormen” de basis van je applicatie. Rechte hoeken, ronde hoeken, vierkanten, cirkels noem het maar op. Elke heeft een andere emotie, hiërarchie en betekenis. Wil je het heel simpel voor jezelf maken kies er 1 en hergebruik hem overal.
  • Animaties
    Het is hiervoor al een aantal keer voorbij gekomen, maar animaties zijn ook een belangrijk onderdeel van je app of website. Denk hier aan snelheid, transformaties, acties, gebruikers feedback, beschikbaarheid en meer.
  • Interactie
    In dit hoofdstuk staan onderwerpen beschreven als gebaren en selectie. Ook hoort hierbij informatie als ingevulde velden, met je muis over een knop gaan, de actieve mailbox waar je inzit. Dit heeft allemaal de maken met de interactie die je hanteert in je design systeem
  • En dan als laatst communicatie
    In je design systeem staat ook heel veel informatie over het visualiseren van data, afbeeldingen, feedback en veel meer. Daarnaast kan schrijfstijl als in zakelijk, duidelijk, accuraat en meer ook in je design systeem voorkomen. Dit valt allemaal onder de noemer communicatie.

Ik heb een handboek gemaakt, wat nu?

Nu alle regels zijn vast gesteld kan je een aantal componenten gaan neerzetten aan de hand van je richtlijnen. Maak zoveel je wilt: knoppen, banners, menu’s, sliders, invul velden, vinkjes ga zo maar door. Nadat je al je componenten heb samen gevoegd in een mooie verzameling kan je alles hergebruiken op je applicatie en hoef je alleen nog maar de content in te vullen.

Conclusie

Een design systeem is een hele grote collectie aan regels en componenten die allemaal samen komen om je website, app of andere applicatie samenbrengen tot één geheel. Zonder een design systeem mis je de houvast en is de kans groter dat elke pagina, component of icoontje een andere stijl heeft. Dus of je hem nou zelf maakt of je die van iemand anders gebruikt, bespaar iedereens ogen en oren en gebruik een design systeem.

0 0 stemmen
Artikelbeoordeling

Tim Straver

Business owner, website bouwer en fanatieke turntrainer. Daarnaast persoonlijke chauffeur voor mijn vriendin.
Abonneer
Laat het weten als er
guest
0 Reacties
Inline feedbacks
Bekijk alle reacties

Aanbevolen blogs

Elk bedrijf heeft een website nodig. Voor een klant is het de visitekaart dat de kwaliteit en niveau van dienstverlening weergeeft. Als bedrijf wil je deze dan ook zo professioneel mogelijk presenteren. Echter hebben startende bedrijven die voor het eerst een website aanvragen vaak geen idee van de kosten die hieraan gekoppeld staan. In deze

Lees meer...

Binnen Engetic horen wij vaak de vraag hoe wij SEO toepassen op uw website. Dit is natuurlijk een van de belangrijkste elementen van een website, want waarom zou je een nieuwe website laten opzetten, als deze niet gevonden kan worden door uw doelgroep. In deze blog nemen wij u graag mee in ons proces, om

Lees meer...

Get Energetic with Engetic!

Wij zijn er voor al uw ICT gerelateerde problemen.