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.

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.