HomeArtikelenOntwerpsystemen
De ultieme gids voor ontwerpsystemen

De ultieme gids voor ontwerpsystemen

Philip Wallage
op
10 september 2020
De ultieme gids voor ontwerpsystemen
HomeArtikelenOntwerpsystemen

De ultieme gids voor ontwerpsystemen

Philip Wallage
op
10 september 2020
HomeArtikelenOntwerpsystemen
De ultieme gids voor ontwerpsystemen

De ultieme gids voor ontwerpsystemen

Philip Wallage
op
10 september 2020

Wij zijn Buitenaardig, een in Nederland gevestigd digitaal bureau. We willen onze waardevolle klanten uitstekende oplossingen bieden door hun verwachtingen te overtreffen. Wij helpen bedrijven om al hun organisatiedoelen te bereiken door het implementeren van het concept "Design Thinking". Het vereist het in lijn brengen van de bedrijven en hun gebruikersbehoeften.

Als ze eenmaal gematcht zijn, geven we samen met onze klanten de meest geweldige en hoogwaardige ervaring en onderzoeken die vervolgens met de daadwerkelijke gebruikers. Het helpt onze klanten om uitmuntend te werken. Met de unieke klantgerichte aanpak van Buitenaardig ervaart u de beste resultaten.

Buitenaardig richt zich op vele gebieden van expertise, waaronder "Ontwerpsystemen". In deze Ultieme Gids voor Ontwerpsystemenblog kunt u ook alles leren over Ontwerpsystemen.


Inhoudstafel
  1. Wat is een ontwerpsysteem?
  2. Waarom heeft u een ontwerpsysteem nodig?
  3. Hoe beïnvloedt een ontwerpsysteem UX
  4. De geschiedenis van ontwerpsystemen
  5. Hoe maak je een ontwerp systeem
  6. Ontwerp systeemarchitectuur
  7. Relevante vragen over ontwerpsystemen
  8. Voorbeelden van ontwerpsystemen
  9. Ontwerpsysteembronnen

Wat is een ontwerpsysteem?

In de afgelopen jaren heeft het internet drastische veranderingen gezien en ondergaan. Het is gegroeid van rauw naar meer verfijnd en gepolijst - de gemeenschappelijke kwesties zoals de afwezigheid van video's, typografieën en entertainment zijn al lang voorbij.

Bedrijven die beter af zijn hebben ook hun toepassingen. Hoe kunt u er dan voor zorgen dat deze meerdere applicaties u hetzelfde niveau van ervaring en stijl blijven bieden? Hier komt Digital Systems in actie.

Een ontwerpsysteem bestaat uit een opeenvolging van componenten die vaak in verschillende combinaties worden hergebruikt.

In principe stelt een ontwerpsysteem u in staat om al uw ontwerpen op schaal te administreren. Eén degelijk ontwerpsysteem is in staat om een uitstekende uniformiteit en consistentie te leveren.

Het systeemontwerp is al een tijdje in gebruik, maar de toepassing ervan in onze werkprocessen is nog nieuw. Het ontwerpen van systemen is veel meer dan een handvol lettertypes en kleuren.

Het is eenvolledig inclusief systeemdat bedrijven in staat stelt om briljante kwaliteit digitale ervaringen te bieden over verschillende toepassingen en apparaten.

Bovendien zorgen ontwerpsystemen voor consistentie, wat tot positieve opmerkingen leidt.

Redenen waarom u een ontwerpsysteem nodig heeft

Om het eenvoudig te maken, heeft u een ontwerpsysteem nodig omdat het zorgt voor consistentie en efficiëntie. Bovendien bespaart het veel geld en tijd. U moet kritisch zijn over tijd, want tijd is geld.

1. Het bespaart u geld en tijd

Hoewel het lijkt alsof u laag na laag toevoegt, is de primaire rol van ontwerpsystemen het verbeteren van uw efficiëntieniveau. Dit kan worden verduidelijkt aan de hand van de volgende vragen:

Consistentie

  • Wilt u dat uw producten een consistente uitstraling en branding hebben en een goede ervaring bieden? 
  • Bestaan uw producten momenteel uit verschillende stijlen knopen? 

Schaal

  • Heeft u een assortiment met producten met verschillende soorten schermen? 
  • Denkt u dat uw producten waarschijnlijk zullen groeien? 

Teamwork

  • Vereist u voor uw projecten dat er meerdere ontwerpers tegelijk werken?
  • Voelt u de behoefte om de verantwoordelijkheden van de ene persoon veel over te dragen aan de andere? 

Efficiëntie

  •  Wilt u dat uw front-end ontwikkelaars, beeldend ontwerpers, etc. efficiënt werken? 
  • Wilt u het proces versnellen zodat ze tijd kunnen besparen?

2. 2. Ontwikkelaars en ontwerpers kunnen efficiënt samenwerken.

Er zijn specifieke protocollen voor het werken met ontwerpsystemen. Zo zullen ontwerpers zeker systematischer te werk gaan. Front-end ontwikkelaars oefenen dit al geruime tijd uit.

Wanneer ontwerpgroepen een ontwerpsysteem opzetten, beginnen ze meestal te denken zoals hun mede-teamgenoten en communiceren ze soms zelfs in dezelfde taal. Als uw teamgenoten dus in dezelfde termen beginnen te spreken en zich bezighouden met het oplossen van problemen, kan het werk sneller en beter worden gedaan.

Wat is de invloed van een ontwerp systeem op UX?

User Experience is beter bekend onder de afkorting UX. Meestal gaat het bij User Experience om de manier waarop een individu zich voelt als hij of zij in aanraking komt met een systeem. Dit systeem kan een webapplicatie zijn, een online website of zelfs desktop software. In de huidige omstandigheden wordt het meestal aangeduid met enige vorm van human-computer interactie (HCI).

Zoals hierboven vermeld, besparen ontwerpsystemen veel tijd en stimuleren ze superieure ontwerpen en ontwikkelingsgemak. Dit resulteert in een betere consistentie in termen van merken, code en ervaring. Een ontwerpsysteem kan de gebruikerservaring (UX) op vele manieren beïnvloeden.

✔ Tegenstrijdigheid verminderen

Onregelmatige gebruikerservaring zorgt voor verwarring bij de gebruikers. Ontwerpsystemen zijn bedoeld om het aantal replicaties te verminderen en een betrouwbaardere ervaring te behouden over een uitgebreid productassortiment. Door het formuleren van gestandaardiseerde workflows en elementen kunnen bedrijven voorspelbare ervaringen genereren voor hun gebruikers terwijl ze van het ene product naar het andere verschuiven.

✔ Focus op de gebruiker

Het ontwikkelen van een gemeenschappelijke basis met vergelijkbare patronen kan veel tijd besparen. Deze tijd kan dan worden gebruikt voor andere essentiële activiteiten zoals gebruikerstesten en onderzoek. Ontwerpsystemen kunnen ook de focus en de inspanningen richten op het verbeteren van de primaire kenmerken van elk project. Dit leidt tot het creëren van een optimale niveau-ervaring voor de gebruikers en vervult individuele gebruikersdoelen.

✔ Voordelen voor het team

De primaire gebruikers van Design Systems bestaan uit ontwikkelaars en ontwerpers. Dit is een cruciaal product dat is ontworpen om te helpen bij het creëren van andere producten en het verbeteren van de samenwerking en communicatie in teamverband.

Gebruikers van ontwerpsystemen kunnen deel uitmaken van hetzelfde team als de mensen die het daadwerkelijk bouwen. Daarnaast kunnen deze gebruikers deel uitmaken van individuele ontwikkelingsteams binnen bedrijven, junior ontwikkelaars/ontwerpers, teams van derden of partnerbureaus.

Tenzij er sprake is van een gedeelde taal, is het voor een groep mensen moeilijk om samen te werken. Elke gebruiker heeft een andere mentaliteit en een andere set van doelen die hij of zij wil bereiken.

Aanbevelingen, principes en documentatie zijn de factoren die alles kunnen laten werken. Kijken naar het waarom en hoe van verschillende beslissingen en principes is cruciaal, net als het bepalen van de componenten en de stijlgids.

De ontwerprichtlijn van het systeem brengt alle rommelstukken samen en zorgt voor waardevolle gebruikerservaringen (UX).

De geschiedenis van ontwerpsystemen

Hoewel Design Systems steeds populairder worden in kleine en grote bedrijven, zijn ze niet relatief nieuw. Modulaire software-oplossingen zijn ontstaan in het begin vande jaren zestig van de vorige eeuw. Sommige studierichtingen hebben al vele jaren een overvloed aan bronnen.

Omdat ze al zoveel jaren aanwezig zijn, kunnen er veel redenen zijn waarom ze recentelijk in de mode zijn gekomen. Ook de opeenvolging van veranderingen in de manier waarop Design Systems worden voorbereid en gebruikt, bevat veel lessen voor ons om te leren.

Ontwerpsysteem in de jaren '90

In de jaren '90 werd elk ontwerpaspect volledig gecontroleerd door de programmeurs. Dit omvatte levendige web-safe kleuren in zwaar gepixelde 8*8 lettertypes, zwarte achtergronden, beroemde old-school gradiënten, die allemaal terugkeren.

In die periode maakten kwesties met betrekking tot de informatiestructuur, de lay-out van het web en de gebruikerservaringen niet veel uit. Het ging volledig om het dumpen van alles en nog wat op een webpagina om deze aantrekkelijker te maken.

De informatie die niet in de pagina kan worden opgenomen, wordt uiteindelijk via hyperlinks aangegeven. De lange lijst van regenboogkleurige hyperlinks zou de gebruikers doorverwijzen naar verschillende andere pagina's die geen deel kunnen uitmaken van de hoofdpagina.

Lees meer over de evolutie van ontwerpsystemen.

nasa-ontwerp systeemborden
markeringen van het nasa-ontwerpsysteem


Leer hoe u een ontwerpsysteem kunt maken

1. 1. Voer een visuele audit uit

De eerste stap naar het creëren van een Ontwerpsysteem is het uitvoeren van een visuele audit van het bestaande Ontwerpsysteem. Dit betekent dat er een overzicht wordt gemaakt van alle bestaande interfacecomponenten in uw digitale producten. 

Het is essentieel om een visuele audit uit te voeren, ongeacht of het gaat om een ontwerp voor een website, een applicatie of een ander digitaal product.

Door de inventarisatie en de picturale kwaliteiten van de componenten kunt u de verantwoordelijkheden die dit proces met zich meebrengt beoordelen.

2. 2. Creëer een visuele ontwerptaal

Het hart van elk ontwerpsysteem is de grafische ontwerptaal. Zo zijn bijvoorbeeld deontwerpprincipes en tokenstwee factoren die u altijd in gedachten moet houden voordat u een ontwerpsysteem creëert.

Een grafische ontwerptaal bestaat uit 4 topcategorieën. Het bevat alle zichtbare elementen die gebruikt zullen worden voor de constructie van uw digitale product. Het is essentieel om rekening te houden met de rol van elkontwerp elementen in elk schermonderdeel.

Kleur

De standaardkleuren in elk designsysteem worden geleverd met 1-3 primaire kleuren die uw merk vertegenwoordigen. U kunt ervoor kiezen om verschillende tinten (kleuren gecombineerd met wit) en tinten (kleuren gecombineerd met zwart) toe te voegen om meer opties te bieden aan uw ontwerpers.

Grootte en afstand

Het ontwerpsysteem dat wordt gebruikt voor de dimensionering en de tussenruimte ziet er nog beter uit als er sprake is van evenwicht en ritme. Een 4-gebaseerde schaal wordt steeds meer erkend als de meest gunstige schaal, uitsluitend vanwege het gebruik in Android en iOS-standaarden en ICO-formaat formaten.

Voor meer informatie, lees alles over het 8pt raster

Typografie

De meeste ontwerpsystemen bevatten slechts twee lettertypes. Het ene wordt gebruikt voor de lichaamskopie en de koptekst. Het andere is een monospace lettertype dat wordt gebruikt voor de codering. Dit kan vrij eenvoudig worden gemaakt als overbelasting en verwarring kunnen worden vermeden.

Probeer minder lettertypes te gebruiken. Dit is niet alleen ideaal voor typografisch ontwerpen, maar houdt ook de prestatieproblemen tot een minimum beperkt, wat vaak wordt veroorzaakt door onnodig gebruik van lettertypes.

Beeldmateriaal

De deur naar succes met beeldmateriaal in uw grafische ontwerptaal is een goede planning en uitvoering. Het is essentieel om richtlijnen voor iconen en illustraties op te stellen en het beste beeldformaat te gebruiken op basis van de situatie.

3​. 3. Een UI/Patroonbibliotheek genereren

In tegenstelling tot de pictorial audit die in de eerste stap is voltooid, richt deze stap zich op uw basis UI-componenten. Verzamel alle onderdelen van uw UI, die momenteel in productie zijn. Dit betekent elke vorm, knop, afbeelding en modaal. Combineer en elimineer alle onderdelen die u niet nodig hebt.

4. 4. Houd bij wat elk onderdeel is en hoe lang het gebruikt wordt.

De laatste stap is cruciaal. Normen en documentatie zijn de elementen die een feitelijk ontwerpsysteem onderscheiden van een patroonbibliotheek. Voordat u aan een ontwerpsysteem gaat werken, is het van vitaal belang om uw beslissingen te herevalueren met betrekking tot het team dat nodig is om er leven aan toe te voegen. Denk aan alle mensen die betrokken moeten worden bij het functioneel maken van het systeem. Let op: een ontwerpsysteem vereist meer dan alleen ontwerpers om succesvol te kunnen werken.

dls-stichting


Ontwerp systeemarchitectuur

De algemene structuur van een typisch ontwerpsysteem is als volgt. Merk echter op dat alle ontwerpsystemen niet noodzakelijkerwijs alle componenten bevatten die we zullen noemen. Bovendien zijn de ontwerpsystemen die deze componenten bevatten op min of meer dezelfde manier met elkaar verbonden.

UI Bibliotheek

Een UI-bibliotheek wordt verondersteld de enige bron van waarheid te zijn, omdat deze de echte operaties van UI-componenten omvat. Complexere ontwerpsystemen kunnen veel van deze bevatten, zoals die voor native Android, iOS en het web.

Stijlgids Generator

Specifieke tools zoals Fractal,Pattern Lab en StoryBookkunnen een echte stijlgids maken via uw UI Library codes.

Pakketbeheerders en opslagplaatsen

Specifieke tools zoals garen,npmenNexuszorgen voor de distributie en verpakking van al uw UI Library.

Design Token Repository

Hulpmiddelen voor het beheer, de opslag en het ontwerpen van penningen vallen allemaal onder deze sectie. Enkele nuttige hulpmiddelen zoalsFrontify en AIFE. AI, kan ontwerp-muntbronnen bevatten.

Visual Design Repository

Folio,Craften Zero Hoogte zijn een paar hulpmiddelen waarmee ontwerpers hun waardevolle bezittingen kunnen delen en synchroniseren.

Visueel Ontwerp Generator

Er is een applicatie genaamdReact Sketch, die dient als een fantastisch hulpmiddel voor het genereren van grafische ontwerpbestanden via uw UI Library code.

Visuele ontwerpgereedschappen

Figma: de collaborative interface design tool is onze keuze voor het creëren van digitale producten zoals Design Systems.

De ontwerpsysteemarchitectuur is hier heel kort beschreven. Voor volledige informatie en details over het ontwerp van de systeemarchitectuur, zie deze informatie over het ontwerp van de systeemarchitectuur.

Relevante vragen over ontwerpsystemen

Naast de primaire vraag "Wat is een ontwerpsysteem" en "Hoe wordt een ontwerpsysteem gemaakt? zijn er verschillende andere relevante vragen met betrekking tot ontwerpsystemen die u moet erkennen.

Waarvoor worden ontwerpsystemen gebruikt?

Ontwerpsystemen zorgen voor consistentie van taal- en ontwerppatronen en verminderen de coderingstijd. Ze kunnen worden gebruikt voor afzonderlijke producten, zoals een bloeiende webpagina, of voor een heel bedrijfsmerk. Wanneer bedrijven een keuze moeten maken tussen consistentie en schaalgrootte, is een designsysteem de beste oplossing voor beide.

Wat zijn de voordelen van een ontwerpsysteem?

  1. Snellere ommezwaai.
  2. De enige bron van waarheid voor ontwerpers.
  3. Voorkomt het ontstaan van onbedoelde variaties die leiden tot merkinconsistentie.
  4. Betere gebruikerservaring.

Wat zijn de kritische onderdelen van een ontwerpsysteem?

Het merendeel van de ontwerpsystemen schaduwt een atomaire ontwerpmethodologie, waarbij het hele proces in het volgende wordt ingedeeld:

Atomen:Belangrijke onderdelen zoals tekstvakken, pictogrammen en knoppen.

Moleculen: Ze kunnen worden geclusterd in organismen die grote factoren betekenen, zoals vormen, navigatiemenu's, enz.

Meer informatie over Atoomontwerp door "Brad Frost".

Wat is het ontwerpdenkproces?

  1. Begrijp wat uw gebruiker nodig heeft of wil.
  2. Definitie van het probleem.
  3. Het vinden van oplossingen op basis van eerdere factoren. 
  4. Prototypering en testen
  5. Maak de oplossing af.

Merk op dat als de bestaande aanpak is mislukt of als er nieuwe problemen zijn ontstaan, u altijd de vorige stappen kunt herhalen.

Wat is het verschil tussen een ontwerpsysteem en een patroonbibliotheek of stijlgids?

Het meest unieke voordeel van ontwerpsystemen is dat ze een gecentraliseerde en gedeelde verzameling van geautomatiseerde middelen zijn waarop ontwikkelaars kunnen vertrouwen. Andersom is een patroonbibliotheek slechts een fragment ervan, waar organismen en moleculen worden opgeslagen.

Een stijlgids wordt gebruikt om een ontwerpsysteem te informeren. Het zet de toon, de branding en verschillende ontwerpfactoren die ontwikkelaars en ontwerpers kunnen gebruiken om het ontwerpsysteem te laten groeien, aan te passen en te gebruiken.

Samenvattend: een ontwerpsysteem bevat alle componenten. Het omvat rasterregels, typografie, atomen, bouwstenen, sjablonen en een patroonbibliotheek en geavanceerde ontwerprichtlijnen.

U kunt kiezen uit verschillende designsystemen. Hieronder vindt u enkele voorbeelden van gerenommeerde systemen:

Deze exclusieve ontwerpsystemen geven u de kans om de regels, atomen en richtlijnen te zien die zijn ontworpen om aan de eisen van elk bedrijf te voldoen.

Zo is Material Design van Google vrij algemeen en breed en richt het zich op UI-duidelijkheid en -gemak. In tegenstelling hiermee is Polaris op maat gemaakt om zich uitsluitend te concentreren op de eCommerce divisie van Shopify.

Ontwerpsysteembronnen

Enkele van de aanbevolen bronnen voor digitale systemen zijn: boeken, artikelen, webinars, webdesigners, enz. als u meer wilt weten over wat deze boeken, artikelen en webinars u te bieden hebben. Laten we eens kijken naar deze ontwerpsysteembronnen, kijk of deze ontwerpsysteembronnen geschikt zijn voor u.

Laatste woorden

Concluderend: een ontwerpsysteem is een uitgebreid product dat alle belanghebbenden bij het project helpt bij het creëren van andere producten. Hoe meer geïntegreerd een ontwerpsysteem is met de workflow van ontwikkelaars en ontwerpers, hoe nuttiger en praktischer het zal zijn.

Net als alle andere geweldige producten, moet ook deze een individuele achterstand hebben en iteratief worden opgebouwd. Dit betekent dat u uw gebruikers in het middelpunt van de belangstelling moet houden, van begin tot eind.


Claim uw GRATIS digitale innovatiesessie