Developing and implementing a Design System

Intro

Developing a Design System

In May 2018 the Dutch Financial Newspaper “Het Financieele Dagblad” achieved an historic achievement when the membership passed 85.000 subscriptions. The previous years, the paper has been stable between 45.000-46.000 subscriptions. The Online Subscriptions of the grew with 41.000 readers.

Client

FDMG / Het Financieele Dagblad

Services

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

Impression

What's inside a Design System?

It should have

Colors are never a bad idea. Documenting them is always a simple way to make sure everyone is on the same page. FD is known for its Salmon Pink paper it uses for its newspaper. This is such an essential part of her identity that it’s also a part of her online identity. It took me a little getting used to but by now, I love it.

Designing a

After defining the colors, I went on to the next challenge. Besides the revenue from subscriptions, the FD (like many others) are dependant on the income of advertorials. This is realized by also displaying banners

The website is responsive. Meaning the layout adapts to the width of the device it’s presented on. Banners on the other hand are fixed sizes and are not allowed to scale. That’s why we needed a custom grid which understands the dimensions of 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.

The 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.

Get in the with vertical rhythm

Readability is extremely important for every website or application. However, do you present extensive articles? Then it only becomes more important! Certainly when you want to present your information as reliable and professional.

Not only the font you use has an impact on readability. Line height, letter spacing, contrast, and white space are just as important. By using an 8pt grid, you ensure that a balanced vertical rhythm is created.

An 8pt grid is not just for distances around elements. For example, by implementing it in line-height, distances within elements such as buttons, it becomes easy to align texts. As in the example below.

Bringing structure to

The “Financieele Dagblad” uses both Serif and Sans Serif fonts. In our Design System, I added hierarchy and standardization within our font use. Meaning in Sketch, you’ll only have a certain amount of choices with increases consistency and developer happiness.

Design System Typography
Redesigning Widgets Design System

Redesigning

It’s great when you’ve set the rules to even the playing field. But that’s when you discover you’ve got more work ahead of you. When you create the rules, you should lead by example. Thus I redesigned the sidebar widgets. New typography, abiding the rules of an 8pt grid and suitable to use in our new custom 12 column grid. There were more. So many more!

Now that we’ve set our Typography and our 8pt Grid, the fun begins! Space (margin) between elements can only be 8, 16, 24, 32 or 40 pixels. This makes designing a lot easier. Now we’ve got all the tools in place to design the perfect article page.

Design System Newsletter Article
That print media had a rough time, is no news. That’s why it was extra exciting to raise the paywall. The question was if we would lose readers because of this. Which it did not. Ever since 2012, the digital membership has grown with 60%.
"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.)