Designing a Website for Data

It’s complex to create the right design when the only visuals you have are based on data. Here’s how we did it.

We don’t realise that most websites have images before creating one without any, to the exception of a few logos and icons*.

*Icons are actually a good way of adding some refreshing design elements but can only be considered in addition to the actual content

Colours

First of all, let’s talk about colours. In data, even more than in text, some colours give a sense of interpretation or judgement. Green is positive, red is negative. As we do not want to take this role, we went for an all blue palette — the darker the more intense. We also use some light greys for surrounding elements like buttons.

This helps us keep a sense of nuance within the data without giving it a connotation.

Dashboards

This is by far the most common way of presenting data, except if you have a predefined storyline (then you can use a classic linear article type layout). You want people to see a lot of information at once.

You can always give people the option to enlarge elements so they can work on some details, once they had the overview — which we’ve done.

For tables and data exports, you’re stuck with only one way of displaying it, outside of some search function within those tables. But for graphs, you need to have a large diversity of them: those are the best visuals you can have. There are many good articles out there on the different graphs you can create, I won’t go over it here.

Everything else

Everything else is … complex.

By then, you already have quite heavy content. Lines, text, numbers, boxes, etc. So adding more elements like navigation panels, user information and contextual elements could easily make it too much.

We’ve decided to go for a very light overall design so this doesn’t actually happen.

Coming back to icons, they are almost a need otherwise you just add more text. You cannot use dark borders or this would look too similar to the lines you have on graphs or links. Buttons cannot be too dominant as they are more an option most of the time, to the exception of a few you might really want the user to see first.

Some people might not like such a light view, but we feel that instead of trying to combine both we might just stick to it and prepare a dark mode option.

It is never perfect, and might be far from it, but if you’d like to give it a try: https://www.workwithdata.com/

Thanks for reading and let us know what you think about this!