Six months of digital design
FD is the Dutch news source for entrepreneurs with all news related to economics and finance. It’s goal: To help deciders make better choices by being better informed. During my time here I was asked to improve the usability of it’s main digital product.
Where to begin
Colours are never a bad idea. Documenting these are always a simple way to make sure everybody 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.
I discovered some of the brand colours did not have enough contrast on the current background. This is noted as a future improvement. Always check your contrast.
Designing a custom grid
After adding the colours, creating a custom designed grid was a pretty complex challenge for two reasons:
- We found out that 20% of our total users had a high-resolution desktop (>1920)
- We wanted to create a smarter, responsive banner solution for our platform
The blue square represents different sorts of banner sizes. On larger monitors we could get away with a 1/4th sidebar which would be wide enough for a 300px banner. On a 768px display we would have an extra 2px on each side of the banner square in a 1/3rd sidebar!
Vertical rhythm: 8pt grid
Readability is one of the most important aspects when you're talking about usability on a website that is information based. When you're whole corporation is focussed on helping deciders making better decisions by being better informed, being able to read the information is pretty essential.
Readability isn't only achieved by using an effective typeface, but also by giving it room to breath. By using an 8pt grid, you make sure that your vertical distances are balanced. This gives a visual softness and helps the users 'flow' trough your content. More on this later.
An 8 pt grid isn't just for spacing. By also having a line-height (and button height) that's dividable by 8, it becomes very easy to align texts and spacing of elements as shown in this example.
FD works with a Serif (Arnhem Pro) and Sans Serif (Proxima Nova) font family. With Sketch I was able to create a Design Library that would serve as a starting point for other design members. In Sketch I created Text Styles in hierarchy that would allow enough freedom for our designers but be easy enough for our front-enders to implement.
Redesigning Sidebar Widgets
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!
Bringing it all together!
Once we've defined our typography and follow our 8pt grid rules, you can start having fun. Saying the spacing between elements is either 8, 16, 24, 32 or 40 and so on makes it a lot simpler. You can really bundle elements together to create hierarchy.
In the above image you can see the visual spacing between elements in orange.
Thank your for watching