Designing a Website for Data by@workwithdata

Designing a Website for Data

July 5th 2022 2,934 reads
Read on Terminal Reader
Open TLDR
react to story with heart
react to story with light
react to story with boat
react to story with money
It’s complex to create the right design when the only visuals you have are based on data. We don’t realise that most websites have images before creating one without any, to the exception of a few logos and icons. We went for an all blue palette — the darker blue palette is the more intense. We also use some light greys for surrounding elements like buttons like buttons. Everything else else is … complex. Lines, text, numbers, boxes, boxes and numbers are heavy content.
image
Work With Data HackerNoon profile picture

Work With Data

The platform for everyone to access data on everything - backed by reliable sources and our unique model

instagram social iconfacebook social icontwitter social icon

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.


Some of the colours we use

Some of the colours we use


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.


Example of a page

Example of a page


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.


Different chart types

Different chart types


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.


The homepage

The homepage


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!

react to story with heart
react to story with light
react to story with boat
react to story with money
Work With Data HackerNoon profile picture
by Work With Data @workwithdata.The platform for everyone to access data on everything - backed by reliable sources and our unique model
Explore now
L O A D I N G
. . . comments & more!