Last year we worked on the
TTEITI project. In this post we will share a bit more information on the concept development.
We started with the development of the general look and feel for the data story. We developed a colour scheme, icons and matching illustrations for a GIF banner.
When we had the guidelines and banner in place, we designed a series of graphs, like this simple slope chart that compares the ammonia and methanol production for 2017 and 2018.
Normally, after we have the main elements in place, we start with drafting a visual storyline. Graph titles are a great way to tell that story. Unfortunately, the deadlines were tight and more detailed information came to us in bits and pieces. So we used descriptive titles instead.
TTEITI wanted to publish the story in
Shorthand , which gave us the possibility to easily add scrollmotion effects. This is an animation effect that is triggered by scrolling the page. For data visualisation this offers quite a few interesting possibilities to tell stories with charts. You can see the end-result of these effects on the
TTEITI website.
We tried to apply scrollmotion strategically, highlighting the most important elements of the story and making sure that static and dynamic charts are balancing each other. One graph with scrollmotions consist of at least 3 images that are shown in sequence. It may look simple, but it took a lot of time and tweaking to get the effects just right. If you want to learn more about how to use Shorthand for data visualisation, check this
blog.
All in all this was a very interesting project where we explored the possibilities of scrollmotion in Shorthand for storytelling with data.