Een stap-voor-stap handleiding voor het maken van een ontwerpsysteem

Intro

In dit tijdperk van overal en altijd toegankelijk, is alomtegenwoordigheid de norm geworden. Het is echter ook bekend dat consistentie geloofwaardigheid is. Gebruikers zijn zich nu meer bewust. Een snelle en soepele ervaring is een basisverwachting, ongeacht de interface.

Bovendien is tijd een goed dat je je niet kunt veroorloven te verspillen. Dit alles zou genoeg moeten zijn om je te laten struikelen om meer te doen met je website of interface. Het is echter een hele opgave om 50 verschillende onderdelen in het ontwerp foutloos op elkaar af te stemmen.

Tromgeroffel voor "Design System" is hier om je het leven gemakkelijk te maken.

Wat is een ontwerpsysteem?

Een ontwerpsysteem is een uitgebreid archief van duidelijk gedocumenteerde herbruikbare componenten die het productteam kan gebruiken om digitale ervaringen te creëren. Met andere woorden, beschouw ontwerpsystemen als de enige bron van waarheid voor een bedrijf op het gebied van ontwerp.

Meer dan stijlgidsen of patroonbibliotheken is een ontwerpsysteem voortdurend in ontwikkeling. Dit ecosysteem van richtlijnen met betrekking tot verschillende entiteiten, waaronder UX-ontwerp, kan worden gebruikt als een raamwerk van bouwstenen voor elk project om ervoor te zorgen dat alle onderdelen consistent zijn en overeenkomen met de branding.

Een ontwerpsysteem is nuttig voor zowel starters, groeiende bedrijven als ondernemingen en wordt een essentieel, niet-onderhandelbaar bedrijfsmiddel naarmate een product zich ontwikkelt. Het kan ook een positieve invloed hebben op bedrijfsdoelen, workflow, teamwerk, gebruikerservaring en algehele merkbeleving.

Wat zijn de voordelen van een ontwerpsysteem?

Enkele voordelen van het implementeren van een systeemontwerp zijn

1. Verhoogt de efficiëntie en verkort de tijd - Een belangrijk voordeel van elk ontwerpsysteem is de mogelijkheid om snel ontwerp- en ontwikkelingswerk te maken en opnieuw te maken. Teams kunnen kant-en-klare elementen gebruiken om de noodzaak om het wiel steeds opnieuw uit te vinden te verkleinen en het risico op inconsistentie te verkleinen.
2. Verbetert visuele consistentie tussen pagina's en kanalen - Het ontbreken van een organisatiebreed ontwerpsysteem kan leiden tot inconsistente visuals, een gefragmenteerde gebruikerservaring of isolatie van de branding. Een samenhangende set standaarden helpt ook bij het beheren van grote herontwerpen of visuele rebrands op grote schaal.
3. Bevordert een eenduidige taal - Een gedeelde ontwerptaal vermindert de kans op verspilde ontwerp- of ontwikkelingstijd door miscommunicatie binnen en tussen verschillende teams.
4. Zorgt voor een betere focus op complexere problemen - Teams kunnen complexe problemen, zoals informatieprioritering, reisbeheer, enz. beter oplossen wanneer eenvoudige UI-componenten worden gemaakt en eenduidig zijn.
5. Dient als referentie- en leermiddel voor medewerkers - Een ontwerpsysteem vereenvoudigt het inwerkproces bij personeelswisselingen. Het helpt ook om nieuwe individuele medewerkers vertrouwd te maken met UI UX-ontwerp of het creëren van inhoud.
6. Draagt bij aan een sterk en tijdloos merk - Het doel van een ontwerpsysteem is het communiceren van een bepaalde identiteit en een bepaald ontwerp achter de producten die het aanpast. Het helpt bij het creëren van impactvolle merken en helpt mensen bij het onthouden van de merkervaring. Hierdoor voelen mensen zich meer verbonden met een merk en hebben ze er meer vertrouwen in.

Een tienstappengids voor het bouwen van een ontwerpsysteem

We hebben een proces van tien stappen uitgewerkt om je bedrijf te helpen een ontwerpsysteem te creëren.

1. Analyseer grondig je bestaande ontwerpproces.

De eerste stap bij het maken van een strategie en het opstarten van een proces is begrijpen waar je nu staat. Door het huidige ontwerpproces van uw organisatie te bekijken en te analyseren, kunt u beter begrijpen welk systeemontwerp het meest geschikt is voor uw merk. Stel jezelf de volgende vragen:

• Wat is de huidige ontwerpaanpak van uw organisatie?
• Wat zijn de bestaande tools die uw organisatie gebruikt?

Zorg ervoor dat je het ontwerpvolwassenheidsniveau van het productteam evalueert. Dit zal je helpen bij het inschatten van de tijd die nodig is om het nieuwe systeem in je organisatie te implementeren.

2. Bepaal het alfabet van uw merk

Het alfabet van een merk leidt tot de merkidentiteit, d.w.z. de merk- en productwaarden en de merktaal. Merktaal omvat vormen, lettertypen, kleuren, animaties, stem en toon.

Ontwerpers gebruiken een visuele taal die wordt gedefinieerd door het alfabet van het merk. Het bekijken van de merkrichtlijnen en het spreken met de belanghebbenden kan je helpen om de merkidentiteit en -taal te begrijpen.

3. Audit uitvoeren voor huidig product AI

Door een UI-audit van het huidige product uit te voeren, kun je een belangrijke uitdaging op het gebied van productontwerp aanpakken: dubbele ontwerpen. De audit heeft twee doelen -

• Vestig de aandacht op de gebieden binnen het product met significante inconsistenties.
• Bepaal de meest gebruikte en essentiële elementen van het product.

Een UI-audit is een proces dat uit meerdere stappen bestaat. Het identificeren en analyseren van de belangrijkste UI-eigenschappen en hun gebruik in componenten is cruciaal. U kunt beschikbare tools gebruiken om het aantal unieke kleuren en lettertypen in uw stylesheets te bekijken. Vervolgens kun je elk websiteontwerp verder uitsplitsen in afzonderlijke elementen.

4. Stel de ontwerpprincipes van uw systeem vast

Om een uitstekende gebruikerservaring te creëren, is het noodzakelijk om de redenen achter ontwerpbeslissingen te begrijpen. Daarnaast maakt een duidelijke set doelen het definiëren van ontwerpprincipes en het coördineren met teams eenvoudiger.

Wil je een ontwerpsysteemproces? Begin met deze vragen:

• Wat ben je aan het creëren
• Waarom maak je het
• Hoe ga je het bouwen

Ontwerpprincipes moeten de waarden en visie van je merk weerspiegelen.

5. Een onderdelenbibliotheek samenstellen

Dit staat ook bekend als de Pattern Library en moet alle functionele en decoratieve elementen van je UI bevatten. Evalueer de componenten aan de hand van het project, de gebruikersbehoeften en de bedrijfsdoelen en behoud de onderdelen die je nodig hebt.

6. Regels opstellen

Ontwerpsystemen zijn niet gemaakt om ontwerpers te beperken tot een specifieke ontwerprichting. Integendeel, het is alleen bedoeld om ontwerpers en ontwikkelaars te voorzien van een fundamenteel kader dat de creatieve richting uitbreidt en ruimte biedt voor innovatie.

Dit zijn twee benaderingen van de regels van het ontwerpsysteem, zoals vermeld in het boek van Alla Kholmatova:

• Strikte regels - Ontwerpers en ontwikkelaars volgen een rigoureus proces om nieuwe patronen of componenten te introduceren.
• Losse regels - Deze regels staan ontwerpers en ontwikkelaars toe om te creëren zonder zich te houden aan strikte beperkingen als ze geloven dat dit resulteert in een beter ontwerp.

Net als bij veel andere aspecten van het leven is het essentieel om de juiste balans te vinden tussen deze regels, zodat het product consistent en tegelijkertijd creatief kan zijn.

7. Kies je bestuursmodel

Dynamische, steeds veranderende ontwerpsystemen vereisen een eenvoudig proces voor het goedkeuren en implementeren van wijzigingen. Er zijn drie bestuursmodellen:

• Solitair model - Een individu of een groep individuen "regeert" rechtstreeks het proces van het ontwerpsysteem.
• Gecentraliseerd model - Eén team heeft de leiding en leidt de evolutie van het systeem.
• Federatief model - Meerdere mensen uit verschillende groepen leiden het systeemontwerpproces.

Hoewel elk van deze modellen zijn voor- en nadelen heeft, kan vooral het solitaire model ertoe leiden dat één verantwoordelijke een knelpunt wordt voor de uitvoering van vele taken. Het beste is om een combinatie van verschillende modellen te gebruiken in overeenstemming met je behoeften.

8. Componentstructuur definiëren

Duplicatie van functionele componenten is een belangrijke uitdaging in ontwerpsystemen. Dit resulteert in een inflexibel systeem en vereist dat ontwerpers (en ontwikkelaars) nieuwe elementen creëren telkens als er een nieuw scenario is.

Succesvolle systeemontwerpen zijn in hoge mate herbruikbaar en stellen gebruikers in staat om ze te gebruiken als basis voor hun producten. Daarom is het aan te raden om elementen te ontwikkelen die hergebruikt kunnen worden in verschillende inhouden.

Criteria voor herbruikbare en schaalbare componenten:

• Modulair - Onafhankelijke componenten en uitwisselbare elementen.
• Samenstelbaar - Bestaande componenten samenvoegen om nieuwe te maken
• Aanpasbaar - Aanpasbare componenten die in een groot aantal contexten werken.

9. Zorg ervoor dat alle teams dezelfde taal gebruiken

Het doel van een ontwerpsysteem is onder andere het faciliteren van naadloos teamwerk. Daarom is de integratie van het systeem in de workflow van de teams van vitaal belang. Het verhoogt de productiviteit en levert waarde op voor de teamleden.

Als je beter begrijpt hoe verschillende mensen het ontwerpsysteem gebruiken tijdens het eerste integratieproces, kun je het systeem daarop aanpassen.

10. Regelmatig veranderingen doorgeven

Het proces van een ontwerpsysteem evolueert met de organisatie mee en kan niet statisch zijn. Daarom is het essentieel om na de introductie van het systeem in je organisatie alle wijzigingen te communiceren en de organisatie op de hoogte te houden.

Een beknopte en goed onderhouden changelog kan gebruikers helpen om verschillende upgrades te begrijpen en hoe deze hun werk zullen beïnvloeden.

Drie voorbeelden om je op weg te helpen

Atlassian ontwerpsysteem

(https://atlassian.design/)

Het Atlassian Design System, een bekend Australisch bedrijf voor bedrijfssoftware, streeft naar naadloze samenwerking tussen flexibele, verspreide teams over de hele wereld.

Trello en Jira, twee veelgebruikte samenwerkingstools van Atlassian, geven de ontwerpfilosofie van het bedrijf volledig weer. Deze filosofie gaat over het inzetten van de digitale ervaring om de productiviteit en het algehele potentieel van teams en individuele teamleden te verhogen.

Dit gezegd hebbende, biedt het Atlassian Design System agile technieken en effectieve tracking van elke afzonderlijke fase van een project, van productplanning tot oplevering. Dit levert uiteindelijk gunstige resultaten op bij de creatie en levering van producten. Hun ontwerpsysteem omvat voornamelijk:

1. Ontwerprichtlijnen
2. Merknormen
3. Product
4. Illustratie
5. Prototyping
6. Marketing
7. Persoonlijkheid

IBM ontwerpsysteem

(https://carbondesignsystem.com/migrating/guide/design)

IBM is een goed voorbeeld van een grote IT-onderneming die wereldwijd opereert en zijn eigen ontwerpsysteem volgt.

Hun capaciteiten omvatten alles van bedrijfsadvies en financiering tot het maken van software, IT-hosting/beheer en oplossingen die software met hardware verbinden.

Het fundamentele principe van IBM is om voortdurend vooruitgang te stimuleren, of het nu gaat om de menselijke samenleving of om een merk, door gebruik te maken van wetenschap, rede en intellect.

Volgens IBM is een goed ontwerp niet alleen een noodzaak, maar ook een verplichting aan de gebruikers. Hier zijn enkele van de opvallende functies van hun Carbon Design System, dat ontwikkelaars en ontwerpers die werken met Adobe, Axure en Sketch een schat aan tools en hulpmiddelen biedt:

1. Visualisatie van gegevens
2. Patronen
3. Onderdelen
4. Richtlijnen
5. Lesmateriaal

Uber Ontwerp Systeem

(https://baseweb.design/)

We hebben allemaal wel eens een Uber genomen. Het Amerikaanse technologiebedrijf is gebaseerd op beweging, waaronder voedsellevering, ritbezorging, peer-to-peer ridesharing en micromobiliteit met scooters en elektrische fietsen.

Uber heeft een efficiënt systeemontwerp nodig om dit type service vlekkeloos te laten functioneren over alle submerken, interne merken, producten en projecten heen.

De belangrijkste kenmerken van Uber Design System zijn:

1. Merkarchitectuur
2. Samenstelling
3. Toon van de stem
4. Beweging
5. Illustratie
6. Fotografie
7. Iconografie
8. Kleur
9. Logo
10. Typografie

Tips voor het maken van je eerste ontwerpsysteem

1. Vroege, duidelijke communicatie is je nieuwe beste vriend

Het kan ingewikkeld zijn om je interne consumenten er meteen bij te betrekken. In feite kan hun feedback het proces belemmeren als deze dubbelzinnig is, te vroeg wordt gegeven in een alfa- of bèta-releasecyclus of niet nuttig is.

Vertel je klanten, de gebruikers van het ontwerpsysteem, wat je nodig hebt om constructieve feedback te krijgen. Als je in een vroege pre-release cyclus zit, wees dan eerlijk en duidelijk over de exacte input die je wilt. Dit geeft aan dat je op zoek bent naar de belangrijkste tekortkomingen van het product en niet naar high-fidelity kritiek.

Denk niet te veel na, verdoof je geest, maar aarzel niet om te veel te communiceren.

2. Je voetstappen zijn niet het enige dat je moet volgen

Een cruciaal ontbrekend stuk van prioritering is vaak het bijhouden van het gebruik van ontwerpsystemen. Het is noodzakelijk om te begrijpen waar het systeem wordt gebruikt, door wie, hoe vaak en hoe vaak het wordt bijgewerkt.

Door dagelijks statistieken bij te houden over welke teams precies welke versies van de bibliotheek gebruiken, kan een goed beeld worden verkregen van de mate van adoptie, upgraden en downgraden.

Als je de teams identificeert die zelden updaten, kun je de problemen achterhalen die de upgrade blokkeren en deze vervolgens verhelpen.

3. Feedbackmechanismen worden net zo onderschat als Rhaeghal uit GOT

Om ervoor te zorgen dat je systeem niet alleen waardevol is voor de gebruikers, maar ook iets is waar ze zich deel van voelen en actief aan hebben bijgedragen, is het belangrijk dat mensen op eenvoudige manieren feedback kunnen geven (Slack, e-mail, enz.) en kunnen bijdragen aan het systeem.

Geef altijd instructies over hoe en waar je feedback kunt geven op zoveel mogelijk gebieden en ga nooit uit van iets, vooral niet dat een gebruiker het zal vinden op de plek die jij het meest voor de hand liggend vindt.

Een ontwerpsysteem is de Poolster die uw organisatie nodig heeft

Een succesvol, goed ontworpen ontwerpsysteem wordt onderdeel van de ruggengraat van een bedrijf, wat resulteert in consistente en versterkte ervaringen. Bovendien krijgen ontwerpers en ontwikkelaars de kans om het doel van het product beter te communiceren in plaats van vast te zitten aan het samenstellen van basisbouwstenen.

Elke generalist kan uw partner zijn bij het leveren van een ontwerp, maar alleen een ontwerpspecialist identificeert de huidige problemen, uitdagingen en ambities om een ontwerpsysteem te maken, speciaal voor u. Dit is niet het moment om te wachten. Met deze uitgebreide gids over het creëren van een ontwerpsysteem bent u slechts één initiatief verwijderd van een complete transformatie van uw productieproces.

Referenties

https://ionic.io/resources/articles/why-every-company-needs-a-design-system

https://www.baianat.com/books/merits-of-design-systems/design-systems-and-their-benefits

https://www.uxpin.com/create-design-system-guide/

https://builtin.com/design-ux/11-benefits-design-systems

https://elementor.com/blog/design-system/

https://www.nngroup.com/articles/design-systems-101/

https://www.uxpin.com/studio/blog/best-design-system-examples/#h-4-uber-design-system

https://www.eleken.co/blog-posts/7-design-systems-examples-for-your-inspiration

https://aufaitux.com/blog/best-design-systems/

https://www.copycat.dev/blog/design-system-examples/

https://builtin.com/design-ux/design-system

https://www.editorx.com/shaping-design/article/design-system-examples

https://medium.com/spotify-design/5-things-i-wish-id-known-before-starting-a-design-system-at-spotify-f8624abf1081