The power of transitions & why I stopped relying on static design mocks

The power of transitions & why I stopped relying on static design mocks

Thomas Bogner, the designer behind the beautiful iWatch Mock-Up created this short animation to show off his design but why did he create an animation instead of just showing a flat design? To see this as a static picture simply wouldn’t have done the design justice. Thomas understands that transitions are an integral part of the design and need just as much love and attention as the rest of our design and should involve less of us holding up printed a4 paper making swooshing noises mimicking the movement we envision. No longer can we think of user interfaces as static designs and add the magic of interaction later on. Instead, we need to embrace the interactive nature of the Web from the very beginning and think of it as natural constituent. So your discussing the progress of your project and when you come to the part were you explain your animation and you get a response which is something along the lines of ‘yeah but the animation is just something fancy and not needed, surely it can do the same thing without the animation so lets not do the animation bit. Kill them!! – only joking, a good explanation is needed here to help your client understand that the animation is to help the user understand what has just happened when he clicked or interacted with something on a page. Below shows a user moving from the home screen to the contact screen:   So if you compare this with the animated transition here: The user can understand the journey a lot more with the animation. Without the animation...