Designing a map for print and online
Multiplatform media is changing the workflow in many newsrooms and graphic design teams have been one of the affected. While before they where organized according to platform, now increasingly they centralise print, online and interactive roles and aggregate skills, as it happened in FT’s graphic teams.
One of the media I collaborate with is la Directa. This Catalan media publishes a printed biweekly publication — whose articles are later uploaded online — and also keeps an updated website.
Charts and infographics are usually designed either for the printed issues (and later uploaded as static images to the website) or for the online articles (usually as static images but more and more with interactive tools).
My latest contribution to la Directa was in an issue made only by women to mark woman’s day. It included a map showing immigration to Spain by gender to complement a feature by Anna Celma about international division of labour.
As always, I started designing the map for the printed edition with Illustrator and then I added the textual headlines and labels with InDesign, as it is the software used by the compositor.
The usual workflow, then, would be to save the map also as an image with web values. But this time I wanted to use the advantages of the online platform and talked to my design editor about trying to mimic the chart with an interactive tool.
I used Datawrapper, a data visualisation tool I love — “built for journalists, by journalists”. I used the choropleth world map template, uploaded my data and chose a similar colour palette as the one used in the print map.
Biggest differences in the creation process
Data analysis
I was given the number of migrants to Spain from those countries where they are more than 5,000 and the number of them who are women. From this, I calculated the percentage and classified them from those countries with more female migration to those with more male.
For the online map, I also needed to use the Google Spreadsheet translate function to match the Catalan country names in my data to the English countries names pre-set in Datawrapper.
Colour grading
I used a diverging colour palette. The more man, darker green; the more women, darker purple. For those countries with a similar rate, dark grey. And for those countries for which we didn’t provide data, light grey.
To choose the colours, I was consistent with the base colour of this section of the publication, but used Color Brewer to get inspired about possible contrasting combinations.
Although the colours in both platforms look similar, they aren’t. For the printed version I used a stepped colour palette, because I thought on print the colour differences between small value changes would be difficult to appreciate. So, countries between 60% and 75% of women migration, for example, have the same colour.
However, the online map uses a sequential colour palette for the greens and for the purples. I thought that, as the online map can be zoomed in and out, changes can be better perceived and further explored.
Tooltips
The biggest difference and the one that makes me prefer online maps and charts at the moment is the labelling.
Adding specific information per country in the print version can be a nightmare and, if not done with care, look like a mess. For example in this case, there wasn’t space to place the values for European countries next to them, so I created a table at the bottom of the map.
An the other side, Datawrapper allowed me to automatically create tooltips with the information I wished to provide. This interactive labels together with the possibility to zoom and move around make exploring experience easier and much pleasant.
And you, how do you make your vizes for different platforms?
