From Here To There – Transitions In Design
I've always had a strong held belief that the most important property within a design – whether that be a piece of graphic design, an interface, a website, a physical object or anything that can be described as being designed – is the use of transitions. The movement from one state to another, no matter how subtle is the very thing that we latch on to as human beings, the often invisible differences that somehow resonate within us and make us love something rather than simply like. Without these movements of state the things we design are just static, just data, just pieces of plastic.
Some of you will be aware of my love of title sequences particularly the work of Saul Bass which manifested itself in a site I built back in 1998 over at saulbass.tv. His use of often very simple shapes and graphic devices and the movement of these shapes left a real impression on me, not least teaching me how simple things can still communicate and how when movement is applied, especially movement from one state to another those shapes take on a greater meaning and better tell a story. Whilst Saul Bass was a master of his craft, Maurice Binder and Pablo Ferro were equally brilliant.
But this is a very literal interpretation of what I mean by the importance of transitions. What I'm really talking about is those moments in between – those often invisible, silent moments that so often help make something go from simply OK to great.
An example I've used many times in lectures is the gun slinging sequence in the film Shane. What marks this sequence out as special is the dramitic pause inserted just before Jack Palance's character kills the gentle cowboy. Without it this gun slinging scene would have been fine, but the addition of a little punctuation – a kind of cinematic semicolon – takes the scene from expected to unexpeced and because of that it resonates so much more and becomes much more powerful. The message here is Jack Palance's character proved he was quicker on the drawer than the cowboy yet he still chose to kill him. Now we understand just how evil this guy is – and it was the pause that hammered that message home.
The insertion of silence, the addition of a subtle pause is a very powerful tool within design in all its forms. Most recently, when I was designing the packaging for POPA, the first iteration of the box really bothered me. As you pulled the box apart I felt there was something missing; there didn't seem to be enough of a pause as the state of the box changed from closed to open; it needed more suspense, more expectation.
The answer was another 10mm.
I simply increased the height of the inner cardboard sleeve to be about 20mm as opposed to 10mm. Now, when the two parts of the box were pulled apart, there was greater tension and because of that a slightly longer pause from one state to the other. It felt more significant in some way. More than anything, it just felt right.
I see a lot of design that lacks these important transitions. Just pick up an Android phone and you'll see that lack of any subtle transitions from one state to another. Even worse you often get on-screen flashes; completely horrible. Compare that to the iPhone and the difference is really evident; there is subtle movement from one thing to the to next and it just feels exactly right.
Transitions are the subtle in-between details that we as human beings actually connect with and the reasons we fall in love with something rather than simply like something. To a machine they make no sense whatsoever; but we're designing for people not machines.