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.
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.
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 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.
If you want to see the final product, you may find the interactive graphics here