Starting with web tech, the JS library gave us the ability to transition between completely different SVG’s.
However, it became very limiting quite soon. After a talk with Oliver Smith and a timely After Effects class, we jumped on creating the animation in After Effects and including it as video in a web app.
We agreed to contextualise this in the wellcome collection. The concept being it would be displayed in an iPad adjacent to large exhibit piece about the human body in a surrounding context of decomposition.
After grabbing the necessary font and , we began mocking up this interface. We stayed with the defines stages construct, having the body animate between them. The Wellcome has a very defined aesthetic, making the layout very easy.
The layout is divided in 2. Each stage has three text indicators. The stage number, and the common simplified term beside it, and the scientific term in the description beneath. This is surrounded by the signature Wellcome branded bars. At the bottom we have included idiot-proof buttons to allow the user to navigate through the stages. The interface animations are all purposefully slow and the buttons are disabled during transition, forcing the user to slow down with the objective being greater concentration on the content, rather than quickly poking this interface and walking away.
To help draw people into the interface wen approaching from afar, we added a blurred representation of the animation in the background of the title screen.
Finally, we added a sidebar to the right hand side of the page, to give greater understanding of the underlying navigation and hierarchy pf the interface. This also provides as a shortcut to jump between stages, rather than a frustrating slow navigating between stages.
Loosely basing the time frames on the date from , Fisnik out together the copy for the sidebar on the left.
Gif of full animation and interaction:
From the final critique, it was said the horizontal navigation on the left felt disconnected forms he vertical sidebar, one idea proposed to solve this would be a horizontal. However, after making the changes to the CSS, this still felt more disconnected.