View profile

Level Up Your Data Viz: Part 2

Hello! I’m a bit late sending this one out – the second instalment looking at a recent design from the Viz of the Day Tableau Public gallery. I’m taking great designs and looking at the details to see if we can take them to the next level.

Obstacles to Gender Equality
This week @anakomissarof kindly agreed for her data viz to feature in the series. Some great work that caught my eye with its fantastic bold colour palette. It’s another powerful example of a data viz shining a spotlight on a social injustice. I also particularly liked how the illustration of the girl added to the message.
The original data viz
The original data viz
Redesign
While I liked the illustration of the girl, her central positioning created a number of layout issues. The redesign was based around addressing this core issue.
The redesign version
The redesign version
Layout
One of the first things I wanted to do was balance the layout. Just having equal left-right and top-bottom margins made a big difference in balancing everything.
Balancing the margins
Balancing the margins
Grid
It would be tempting to work on something like this without a grid, but when you have blocks of text it almost always makes sense to have some kind of logical rhythm and spacing that a gird provides. I used a 12 column grid to space the content that was separate from the data – the title, text and illustration. The title and text taking 5 columns each, and the illustration of the girl taking 2.
Illustration
To optimise and focus the layout for the data itself, I moved the illustration of the girl to a supporting role. By having her look up at the text, the source of the data, we find a compromise where the illustration is still adding some impact without interfering with the primary focus – the data. 
Repositioning the illustration to make space for the bar chart
Repositioning the illustration to make space for the bar chart
If you work with illustrative elements, it’s important to maintain a consistent visual style. I removed the gender icon in the top right of the original, as that flat vector style was not aligned with the style of the girl. It’s positioning also didn’t seem to lend the design any extra meaning or value. You may have noticed another illustrative element I removed – the tape above the text. These elements serve to catch the eye and our attention and they should be used sparing with specific intent. We already have the girl, so by removing the other elements we create less distraction and make that particular visual flourish more powerful.  
Typography
I used one typeface through the design – Montserrat – which is fairly similar to Futura (when in all caps) that’s used in the original title. Montserrat has a wider design and when you set a wide geometric sans-serif in bold all caps it feels like you’re making an important, authoritative statement. Perfect for this subject matter. 
Montserrat compared to Futura
Montserrat compared to Futura
For the title treatment, putting everything over three lines created a more compact block of text. The extra height of that block of text enabled me to align the text to the right of the title to its height. I used both colours in the title to add visual interest as well create some punch. You have to be wary of what colour is dominant and how you’re breaking up a sentence when you use this effect. Often people use a lower contrast colour to highlight words which ruins the effect. In this example, Gender jumps out first, we immediately see the subject matter. But we can also read the title both ways: Gender, Obstacles to Equality; or Obstacles to Equality, Gender. 
I also added some letter spacing to the all caps options in the menu for countries. Small all caps type always greatly benefits in terms of readability when you add some letter spacing. 
Chart
By moving the girl out of the way, we create more space for the bar chart itself. And that allows us the width to place the opposing male/female bars for each category side-by-side. When two bars are nearly equal we cannot easily tell which is greater when they’re stacked on top of each other. It’s also much harder in an array of stacked bars to see which set of bars has the greatest differential.  
Stacked vs side-by-side
Stacked vs side-by-side
By moving the radio button menu for countries to the left side, we can seamlessly scan down from the title straight into making our first selection. I made use of all the vertical space available so I could give breathing space between each item. You can often avoid unnecessary repetition of visual elements, like unselected radio buttons, by making it very clear in a list that one element is selected – here I use a circular icon, bold text and a different colour. Finally, the Female/Male key is an example of how we can always look to every detail and ask ourselves is there are more interesting and equally effective way of doing something. 
One of the main practical issues with the original was the labels along the x-axis. The combination of small, serif and all caps typography made the labels difficult to read. By addressing some of the previous core layout issues, our extra width gives us the room to set these labels at a readable size with more comfortable spacing. 
Colour
I only made two minor adjustments to what was already a strong colour palette. I changed the background colour to have the same hue as the dark red. I also tried using the same hue from the dark blue, but the red hue gave a warmer, cleaner feel. A subjective call, but the main idea in this choice is to call on an existing hue in the palette to ensure the colours sit together. 
The other change was to slightly darken the red, mainly by decreasing the saturation. The original had 3 slightly different reds across the title, bars and gender icon. The red on the title had a slight buzz, an effect heavily saturated colours can give on screen. With a big bold title like this, it’s better to avoid this effect if possible.
Et voilà!  
That’s it for part 2. If you found this useful, then it would be great if you could give a like or retweet on the Twitter thread.
Pascal Barry
Level up your data viz: part 2

Taking a Viz of the Day from Tableau Public gallery and seeing how we can take the design to the next level.
👇
Did you enjoy this issue? Yes No
Pascal

Design tips straight to your inbox 💙

If you don't want these updates anymore, please unsubscribe here.
If you were forwarded this newsletter and you like it, you can subscribe here.
Created with Revue by Twitter
Laumière 75019 Paris France