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.

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

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.

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.

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!