One graph design could be much the same as someone else’s. So how do we make it distinctively Harmoney?
Overview
A curve here, a gradient there and some big type. These are the moves that help us visualise data so that it ‘looks like Harmoney’. In this section we’ll outline a set of best practices and go through some finer details.
Rounded corners
Use rounded corners for all bars, donut charts
and the end of lines. This little detail adds a nice
and friendly feeling into our graphs.
Round the ends of donut charts
Remember to round the ends of strokes with no pointed joins
Use a dotted line or a rounded dash as alternate line techniques
Gradiated backgrounds
We use this to show the different levels on a graph but also to help create depth and texture. This technique links back to our section separation method used for the website.
Vertical backgrounds should have a gradient of 0 to 100 from bottom to top
Horizontal backgrounds should have a gradient of 0 to 100 from left to right
Drop shadows
Use drop shadows to separate stacked graphs. This gives depth to the chart and allows for the individual entries to be read more clearly.
No drop shadow
Lead with Choral Red
If there is only one colour required for a graph always use the red gradient.
OFFICE
PROFESSIONAL
TRADE
OTHER
SELF-EMPLOYED
UNSKILLED
HOME
Gradiate from dark to light
When using multiple colours use the darker colour
in the front and the lighter colour on the back. This allows the graph to feel grounded and not out of balance.
The example below makes use of this. See how the graph transitions from darkest colours to lightest back through to the darker variations. Try and make your transitions between monochromatic spectrums for visual harmony.
Dark
Dark
Light