Some days ago, the SCMP special package about the G20 meeting in Hangzhou, China was released. I must admit, I would have liked to have more time to intervene in the design, but I have a graphics queue waiting in other projects, so, I focused particularly on the graphics for this time.

Illustrator layout for the first graphic.

There are 3 graphics, all them with small simply animations. Usually, I start analyzing the data on excel, or numbers in Mackintosh. Then I go to the paper, the scheme, aspect, interaction, variables and even animation is defined in the phase, thats the reason why this is the crucial part, and the harder one.

Next, is the vector time. I start the translation from paper to Illustrator, in this case, take the paper ideas to illustrator is just one day of work, but all the assets will be ready to the develop phase, is just a thing of order in the groups, layers and documents. That, because I take the illustrator files to generate the svg base for coding through javascript.

Initial scheme for the second graphic. This is a guide to take the idea. Some point forward the graphic change to an partial version with more interactive options by editors observations.

Here is the second proposal of the graphic 2, including the editors request.

The next step was the development phase.
I work with Brackets, an open source software to edit text code, it have a nice extensions to make the life simpler 🙂
If the asset don’t need to interact with js, I just call it as images, but if this asset needs to be transformed on color, position, size, opacity, content, shape… then a take the code from the svg file, which is very similar to an xml file. In this way I will be allowed to select parts of the svg and change it by coding instructions for the user interaction.

The first graphic has 191 posible configurations. At the bottom of this image, also is all the population density por all the G20 country members.

The process includes files such as .css .html .js .svg and some times depending on the functions or effects images, audio or video. Both versions (desktop and mobile) are working simultaneously, but some times different browser testing (cross browsing) and some queries remains to the end o the digital process.

Finally, when the digital product is ready, I have to make some smaller versions for the print, in this time, I take the graphics #1 and #3 to integrate in a very compact version, in total five graphics for different days of publications.

3 col graphics for 5 days of different publications

If you want to see the final product, you may find the interactive graphics here