Final Interface

Starting with web tech, the JS library flubber gave us the ability to transition between completely different SVG’s.

Animating SVG bodies • David Valente

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 style guide, 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.

Final Mockup • David Valente

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.

Title page • David Valente

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.

Shortcut sidebar • David Valente

Loosely basing the time frames on the date from here, Fisnik out together the copy for the sidebar on the left.

Gif of full animation and interaction:

Final Interface • David Valente

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.

Horozontal nav • David Valente

Project available here

Next project ›


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s