1 of 120

NL DESIGN SYSTEM

@codefornl | @gebrcentraal

Kickoff Werkgroep Componenten & Expertgroep Design System

2 of 120

DOELEN VAN VANDAAG

Elkaar leren kennen
Jullie behoeften en wensen omzetten in een inhoudelijke start
Wat hoort bij welke groep?
Eerste tussenresultaat open publiceren
Processen opzetten en verbeteren

3 of 120

AGENDA

Introductie (15 min)
Lego (45 min)
Wie doet wat?(15 min)
Start parallelsessies
12:30 Lunch
13:15 Vervolg parallelsessies
16:00 Gezamenlijke terugkoppeling
Borrel / open space

4 of 120

EVEN VOORSTELLEN

5 of 120

WAAROM EEN GEZAMENLIJK

DESIGN SYSTEM?

6 of 120

7 of 120

WAT LEVERT HET DE BURGER OP?

herkenbaar

toegankelijk

gebruiksgemak

8 of 120

9 of 120

10 of 120

11 of 120

12 of 120

13 of 120

14 of 120

15 of 120

16 of 120

17 of 120

18 of 120

19 of 120

20 of 120

21 of 120

22 of 120

23 of 120

24 of 120

25 of 120

26 of 120

27 of 120

28 of 120

29 of 120

30 of 120

31 of 120

32 of 120

33 of 120

34 of 120

35 of 120

36 of 120

37 of 120

38 of 120

39 of 120

40 of 120

41 of 120

42 of 120

43 of 120

44 of 120

45 of 120

46 of 120

47 of 120

48 of 120

49 of 120

50 of 120

51 of 120

52 of 120

53 of 120

54 of 120

55 of 120

56 of 120

57 of 120

58 of 120

59 of 120

60 of 120

61 of 120

62 of 120

63 of 120

64 of 120

65 of 120

WAT LEVERT HET DE OVERHEID OP?

kwaliteit door standaardiseren

hogere

innovatiesnelheid

minder dubbel

werk

€

66 of 120

WAAR STAAN WE NU?

67 of 120

TOT ZO VER

2 meetups in 2018
Januari project gestart (1 FTE)
2 meetups in 2019
4 blogs
68 organisaties in stakeholder analyse
40+ aanmeldingen werkgroep & expertgroep
1 projectwebsite
20 + interviews
1 multicriteria analyse

68 of 120

AANGEHAAKTE ORGANISATIES

Op basis van stakeholder analyse
Stuurgroep

BZK
DPC
Overheid.nl (via BZK)
ICTU

Naast gebruikers ook netwerken als VDP, Manifestgroep, etc.
Commitment via citaten

69 of 120

LEGO CHALLENGE

70 of 120

DESIGN SYSTEM�componenten en tools

71 of 120

DEFINITIE: COMPONENTEN & TOOL

PLUS: PROCES EN COMMUNITY

COMPONENT

TOOL(S)

Zoals: fractal, patternlab, etc

72 of 120

AANPAK VOOR BEHOEFTEN EN CRITERIA

Werkgroep Tools & technieken

Werkgroep componenten

- (Her)bruikbaarheid code

- Kenmerken tools

- Wensen beheerpartij

- Ontwerpprincipes

- Criteria componenten

- Proces componenten

Onderzoek door projectteam (Interviews, enquêtes, etc)

73 of 120

WERKGROEP

COMPONENTEN

&

WERKGROEP

TOOLS EN

TECHNIEKEN

WIE DOET WAT?

74 of 120

Werkgroep Componenten

Rol: Functionele kwaliteit van componenten verhogen

Stelt design principes vast.
Stelt criteria vast waaronder componenten worden toegevoegd (bv. uniek, herbruikbaar, getest, gedocumenteerd, do’s / don’ts, passend bij design principes, etc.)
Toetst componenten aan deze criteria.
Functioneel testen componenten.
Verbetert eigen proces

Designers 80% & developers 20%
1 x per maand bijeen, ook in ontwikkelfase
Minimaal commitment voor 1 dag per maand

75 of 120

Werkgroep Tools en Technieken

(voorheen: expertgroep design system)

Rol: Technische implementaties van componenten .

te gebruiken formaten en standaarden implementaties (html, css, sass, BEM)
benodigde documentatie (howto, browser support)
functionaliteiten tools (zoekfunctie, unieke id, versie)

Designers 20% & developers 80%
Draagt bij aan workshops voor de criteria, vooral in fase 1: adoptie en POC.
1 x per maand bijeen, in ontwikkelfase rol belegd in projectteam (?)
Minimaal commitment voor 1 dag per maand

76 of 120

Werkgroep Tools en Technieken

(voorheen: expertgroep design system)

Versiebeheer
Werken in Git
Laadtijden
CSS architectuur
Modulaire code (component voor component?)
Sass, Less, NPM, CSS technieken …
Coding standards
Tool(s)
Evalueren bestaande design systems (NL, buitenland)
Op termijn: webcomponents / frameworks?

Naam: Werkgroep Techniek?

77 of 120

GEZAMENLIJK

Overzicht van bekende design systems in de overheid
Integratie / afstemming code en design
Open publiceren van resultaten
Criteria voor componenten (deels technisch, deels ontwerp)
Ambassadeur zijn van NL Design System
Commitment uit je organisatie krijgen (wij helpen je!)

78 of 120

Werkgroep Componenten

Werkgroep Tools en Technieken

(voorheen: expertgroep design system)

Wie zit in welke groep?

79 of 120

WAT GAAN DE GROEPEN DOEN VANDAAG?

Werkgroep Componenten:

Ontwerpprincipes
Criteria voor componenten
Top 3 componenten: waar beginnen we?
Aanvullen componenten & prototype maken
Proces

Werkgroep Tools & Technieken:

Uitgangspunten vaststellen
Bespreken bestaande design systems a.d.v. Multicriteria Analyse

80 of 120

KICKOFF

WERKGROEP COMPONENTEN

KICKOFF

WERKGROEP TOOLS & TECHNIEKEN

81 of 120

KICKOFF

WERKGROEP COMPONENTEN

82 of 120

ONTWERPPRINCIPES

(DIE OVERHEIDSBREED GELDEN)

83 of 120

ONTWERPRINCIPES: WIJ?

Leidraad voor componenten. Dus: zo SMART mogelijk.
Eenduidigheid in ‘hoe het werkt’
Simpel: makkelijk te onthouden

84 of 120

ONTWERPRINCIPES: GOOGLE GLASS

ontwerp specifiek voor Glass
ga niet in de weg staan
houd het relevant
doe niks onverwachts
bouw voor mensen: gebruik beeld, informeel taalgebruik, natuurlijke gebaren

85 of 120

ONTWERPRINCIPES: UXPIN

1. No distractions. Every redundant piece of the interface (lines, buttons, shadows, animations) is a source of distraction. As such, should be eliminated to empower users’ creativity with well architected and inspiring design tool.

2. Design centric. Users’ designs should lie at the center of UXPin. Our interface should be unobtrusive to the point of transparency.

3. Adaptive interface. UXPin’s interface should act according to the context of use. All the ‘inactive’ features should remain completely hidden until user can use them (no inactive buttons and links!)

4. Space. UXPin’s interface should create a peaceful atmosphere, triggering creativity of users. This ambience can be shaped by leaving a lot of space around every piece of interface. Cluttered interface is the source of stress that produces cortisol and adrenaline,both blocks our creative powers.

5. Inspiration. UXPin design should inspire and, as such, can’t be a derivative of design of other SaaS apps. We should strive for an original aesthetic inspired by the best products ever created (some of the sources of our inspiration: Fountain Pen Pilot Vanishing Point Matte Black, speakers Harman Kardon Sound Stick, record player Pro-ject, speakers DALI Zensor).

6. Interactive Consistency. Interface components, icons, fonts should all be consistent to create predictable experience.

7. Predictable Architecture. Architecture of UXPin must be predictable and natural. Features should be placed in the right context to be easy to discover by new users. Example of predictable architecture: settings of canvas should be placed next to the canvas.

86 of 120

ONTWERPRINCIPES: US WEB DESIGN SYSTEM

Make the best thing the easiest thing.
Offer accessibility out of the box.
Design for flexibility.
Showcase benefits for agency and users.
Reuse, reuse, reuse.

87 of 120

ONTWERPRINCIPES: ETSY

Be effective
Create unity
Always be thorough
Express Etsy

88 of 120

AANBEVELINGEN RAPPORT

INFORMATIE OP MAAT

Duidelijke, relevante informatie, persoonlijk, voor mensen

luisteren en behoeftes herkennen
open en prettig
behulpzaam
niet te veel
samenhangend en gebundeld
eenvoudig en concreet
vindbaar
bereikbaar
eigentijdse techniek (geen verouderde systemen)

Duidelijke, begrijpelijke regels, geen onzekerheid
Betrouwbaar en veilig, zonder uitzonderingen

89 of 120

ONTWERPRINCIPES: MEER VOORBEELDEN

Bekijk dit document

90 of 120

ONTWERPRINCIPES: WIJ?

Leidraad voor componenten. Dus: zo SMART mogelijk.
Eenduidigheid in ‘hoe het werkt’
Simpel: makkelijk te onthouden

91 of 120

CRITERIA VOOR COMPONENTEN

92 of 120

UIT MULTICRITERIA ANALYSE (MEETUP 2)

Groep	Criterium	Toelichting
0	Voldoet aan ontwerpprincipes	(design principles nader te bepalen en SMART te maken)
1	Uniek	Bestaat er niet al een vergelijkbaar component?
1	Generiek toepasbaar	Is hij bruikbaar voor meerdere use cases en devices? (hoe is dit aangetoond?)
2	Getest op gebruikers	Testresultaten
2	Getest op gebruikers met beperking
3	Toegankelijk	WCAG2 compliant, wat is er nog meer nodig?
4	Do's en don'ts	Wanneer zet je hem in, wanneer niet. (bijvoorbeeld: vraagteken component, wanneer gebruik je hem, wanneer niet?)
5	Whitelabel: onafhankelijk van stijl	Moet voldoende ruimte bieden voor verschillende huisstijlen (en waar zit die ruimte?)
4	Functionele beschrijving	Wat gebeurt er als je erop klikt? Wanneer kickt de autocomplete in? Toetsenbord interactie. Per
4	Voorbeelden / waar toegepast?
	Minimale performance eisen	RAIL framework van Google (met
	Technische beschrijving	[ input vanuit andere groep ]
	Design deliverables	Sketch e.d. [ andere groep? ]

www.gebruikercentraal.nl/dsmeetup

93 of 120

CRITERIA COMPONENTEN

www.gebruikercentraal.nl/dsmeetup

94 of 120

WELKE COMPONENTEN HEBBEN PRIORITEIT?

95 of 120

WELKE COMPONENTEN

ZIJN HERBRUIKBAAR?

PROTOTYPE: HOE ZIET EEN

IDEALE COMPONENT-PAGINA ERUIT?

www.gebruikercentraal.nl/dsmeetup

96 of 120

PROCES:

TOEVOEGEN COMPONENTEN

97 of 120

PROCES

Moet het een strikt systeem worden of juist niet?
Hoe gaan we om met variatie?
Wat is het proces van toelating?
Willen we statussen van een component? componenten in bèta?
Hoe borgen we continuïteit? Één verantwoordelijke partij? Netwerkorganisatie? Roulerend zitting in een ‘commissie’? etc.

98 of 120

EVALUATIE

99 of 120

EVALUATIE VAN VANDAAG

Wat ging goed?
Wat kon beter?
Waar moet meer aandacht voor komen?

100 of 120

JOUW DEELNAME

Haak je definitief aan?

101 of 120

KICKOFF

EXPERTGROEP DESIGN SYSTEM

102 of 120

DOEL: SELECTIE VAN TOOLS

11:30 Multi-criteria analyse (MCA) bijwerken tot v1.0

12:30 Gezamenlijke lunch

13:15 Bestaande Design Systems bekijken op basis van MCA

13:45 Eerste resultaten delen en bijwerken MCA

14:15 Bestaande Design Systems bekijken op basis van MCA

15:00 Resultaten delen (5 minuten) en prioriteren

15:45 Terugkoppeling bepalen:

wat zit er in het MVP?
welke tools zijn daarvoor het meest geschikt
zou één van de Design Systems een goede basis vormen?
(en wat zijn de belangrijkste observaties?)

103 of 120

UITGANGSPUNTEN DESIGN SYSTEM (1/2)

Voor responsive design websites en webapplicaties (mobiel gebruik en desktopgebruik)
Gezamenlijke basis laat voldoende ruimte voor (huis)stijl
Eenvoudig om mee te beginnen

Bruikbaar op basis van online documentatie
Gebruik van gangbare standaarden
Geen installatie vereist
Geen frameworks vereist

Componenten zijn los te gebruiken

Stijlen interfereren niet met bestaande stijlen
Component-code los te selecteren (dus niet: honderden regels code terwijl je alleen de <h1> nodig hebt)

Maar ook: alles in één keer includeren als basis

104 of 120

UITGANGSPUNTEN DESIGN SYSTEM (2/2)

Geteste, robuust code; snel, klein, valide, WCAG2.1, veilig, etc.
Beheerste uitrol van nieuwe versies
Duidelijk wat de status van een component is (voorstel, productie, verouderd, etc.)
Gezamenlijk beeld voor designers en developers

Gezamenlijke taal/labeling/id’s van componenten
Tools moeten bruikbaar zijn voor beide doelgroepen

We voorzien in de basis

Zelf uit te breiden op basis van duidelijke ontwerpprincipes

Rationale achter componenten duidelijk

Wanneer gebruik je iets wel? Wanneer niet?
Waarom zijn beslissingen genomen? Op basis van welke observaties of best practises?

105 of 120

MULTICRITERIA ANALYSE

106 of 120

MULTICRITERIA ANALYSE

Primair: faciliteert het bekijken/bespreken van Design Systems, en benoemt de (basis)behoeften van developers en designers, zodat we goed weten hoe een design system aansluit op behoeften.
Secundair: Dit geeft een indicatie van sterke en zwakke punten van een design system.

NB: Het is dus géén schoonheidswedstrijd tussen design systems. Het is maar een (tijdelijk) middel om ons meer inzicht te geven en tegelijkertijd de community op te bouwen.