‘Playing at Wimbledon’ interactive information graphic

Rafa Höhr
Jun 30 · 3 min read

This is a tiny description of how we used to create horizontal interactive information graphics before actual “scrollytelling” vertical narratives with graphics and data.

This case study graphic is made by The Sunday Times Graphic Department for The Sunday Times online and tablet publications.

Stories are presented by sequences, theatrical scenes trying to clarify the 5W journalism questions. Every unit of content is concise in its explanation and it could be published separately complementing different articles.

Unit contents from left to right: surface types, tactics, retractable roof, court explanation and pop up information and legends.
Navigation interface with draggable bar and backwards/forwards buttons.

Every scene is accesible from a button menu as well as a draggable bar. All this items are visible in a standard clear interface (situated at the top or at the bottom of the graphic depending on the publication design). If we rotate this way of access and control of the content, we find our actual ‘hamburger menu’ and scroll navigation.

Hotspots over draggable image give access to second layer of content.

Interaction with hotspots gets the reader to a second level of information. We use to call this a: ”do you want to know more?” button. In these pop up windows, visuals are combined with smooth animations used just to get the attention to some interesting point of the graphic.

Pop ups information windows. Animations focus attention in some detail of the graphic.
Picture research for 3d model recreation.

We try to attract the attention for each content, not with great drawings (as we use to do in print), but with clear and simple animations, camera movements and sound. The aim is to ensure the reader gets into the story as much time as possible and retains some of the content offered. Something we could see now at scroll narratives where animations work as openings of next ‘floor’.

In this Wimbledon interactive graphic, sound is effective to accent the tennis ball bounce animation. Ball racket hits, ball bounces and final people applauses makes more dynamic the play recreation.

Also animation is played twice: first time with no content and second time with stops and all information we want the reader to know.

Using 3d models allow us to rotate and play with render cameras to find the most interesting and attractive point of view for the story to be explained. Animation is displayed as video or realized as a combination of image sequences underneath of a vector drawing animation layer.

Animate and Hype software is used for animations and interactivity. Carrara 3d software and Cinema 4D for 3d models.

The goal is to balance the sometimes difficult relationship between time of production, visuals and effects quality and the device technical requirements.

Once finished, all elements are also available for a newspaper print layout.

Other example of ST sports graphics can be seen at Behance Interactive World Cup 136 goals. A daily coverage.

The Sunday Times Graphic Department: Gary Cook, Jenny Holley, Julian Osbaldstone, Alex Cox, Mathew Cornick, Clare Collins, Chris Watson, Kester Mollahan, Richard Hawkins, Jeremy Christopher, John Smith and Rafa Höhr

Rafa Höhr

Written by

Interactive infographic editor specialized in news media

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade