Developing and implementing a Design System

Intro

Design System ontwikkeling en implementatie

In mei 2018 haalde Het Financieele Dagblad een ‘historische mijlpaal’ toen de betaalde oplage de grens van 85.000 abonnees passeerde. De papierkrant is de voorgaande jaren stabiel, schommelend tussen de 45.000-46.000 stuks. Digitaal doet het FD het erg goed en stegen de digitale abonnementen in een paar jaar naar 41.000.

Opdrachtgever

FDMG / Het Financieele Dagblad

Diensten

UX Design, UI Design, Design System & Concept Design.

Impressie

Wat is een Design System?

Is een Design System...

Het zalmroze is één van de heerlijk eigenzinnige eigenschappen van het FD. De roze kleur is synoniem voor zakenkrant. Een essentieel onderdeel van haar identiteit, ook online. Dit betekent echter wel dat er rekening gehouden moet worden met een onorthodox witbalans. Het was even wennen maar ontzettend gaaf om mee te mogen werken. Tijdens het vastleggen van de kleuren ontdekte ik dat een aantal kleuren niet door een W3C Contrast Checker kwamen. Dit betekent dat sommige gebruikers deze als ‘niet erg leesbaar’ ervaren.

Het ontwerpen van

Na het bepalen van de kleuren, gaan we door naar de volgende uitdaging. Naast abonnementsinkomsten, is het FD net als vele anderen afhankelijk van advertentie inkomsten. Dit gebeurd o.a. door het vertonen van banners.

De website is responsive en past zichzelf aan op de schermbreedte van het apparaat van de bezoeker. Banners hebben echter vaste maten en mogen niet geschaald worden. Daarom is er besloten van een Maatwerk Grid dat rekening houdt met de formaten van banners.

De blue rectangles represent banner sizes. A grid exists of 12 columns. The sidebar on the right sometimes is 1/4th and 1/3rd. In our Custom Grid, we’re able to use the largest banner-size possible.

De blauwe vlakken zijn banner formaten. Een grid bestaat uit 12 kolommen. De sidebar rechts is soms 1/4e (3col) en soms 1/3e (4col). In het Maatwerk Grid plaatsen we zo groot mogelijke banners met zo min mogelijke witruimte.

Get in the met verticaal ritme

Leesbaarheid is voor iedere website of applicatie ontzettend belangrijk. Presenteer je echter uitgebreide artikelen? Dan wordt het alleen maar belangrijker! Zeker wanneer je betrouwbaar en professioneel over wilt komen.

Niet alleen het lettertype wat je gebruikt heeft invloed op leesbaarheid. Het gaat om regelhoogte, letterspatiëring, contrast en witruimte. Door gebruik te maken van een 8pt grid, zorg je ervoor dat er een gebalanceerd verticaal ritme ontstaat.

Een 8pt grid is niet alleen voor afstanden om elementen heen. Door het bijvoorbeeld door te voeren in regelhoogte, afstanden binnenin elementen als knoppen, wordt het eenvoudig om teksten uit te lijnen. Zoals in het voorbeeld hieronder.

Stuctuur aanbrengen in

Het Financieele Dagblad werkt met een Serif- (Arnhem Pro) en een Sans Serif (Proxima Nova) lettertype. In het Design System in Sketch heb ik hiërarchie aangebracht en het gebruik gestandaardiseerd. Dit geeft designers het gereedschap om te ontwerpen zonder de developers extra werk te bezorgen.

Design System Typography
Redesigning Widgets Design System

Redesign

Nu alle regels bedacht zijn, is het tijd om deze consistent door te voeren. Je ontdekt op dit moment vaak dat er nog flink wat werk te doen is. Het doorvoeren van deze regels wil je zo behapbaar mogelijk doen. Daarom zijn de widgets van diverse applicaties mooie ‘brokken’. Zo ga je van component naar component voor die heerlijke consistentie!

Nu we onze typografie en 8pt grid geïmplementeerd hebben, begint de echte pret! De ruimte tussen een element kan 8, 16, 24, 32 of 40 pixels zijn. Dat maakt het een stuk eenvoudiger. Nu hebben we alle tools om een perfecte artikelpagina te ontwerpen.

Design System Newsletter Article

Dat de krant een zware tijd heeft gehad, is geen nieuws. Het was daarom extra spannend toen in 2011 de betaalmuur op ging.
De vraag was of het geen lezers zou afschrikken. Dat is niet gebeurd.

Sinds 2012 is de digitale oplage van het FD volgens haar met 60 procent gegroeid.

"I had to chance to collaborate shortly with Phillip at FD Media and it was a pleasure. He is an experienced and professional UX designer, and at the same an enthusiastic, witty team player so a nice person to work with. We had quite a lot of design challenges on our plate. Philip had great ideas on how to improve certain areas that we haven’t even thought of. He took control of the design process to introduce a more structured approach and guided us in our first steps for Design Sprints. So if you need a UX designer for your team, Phillip is someone who I recommend."

Willem-Jan van den Bichelaer
Product Owner FD digital (a.i.)