Are Apple UI designers practicing at Pixar?

Original author: Watching apple
  • Transfer
Squash and Stretch animations

in the Apple user interface Designers who develop user interfaces in Apple have learned how to draw user attention using a technique called Squash and Stretch (literally “squeeze and stretch”). The effect, as in the cartoon, when a character has a flattened nose after hitting a wall, suddenly returns to its original state - this is squash and stretch. Animators have been using this effect for decades to add depth to painted characters. Well, plus to all this is ridiculous.

At Tiger, iChat uses the same effect to show you that someone just greeted you. When an invitation window appears on iChat that someone wants to chat with you, it is small at first, then “swells” to a large size, then clap ... and it becomes a normal size. This last “clap” is squash and stretch in action and everything happens very quickly - almost imperceptibly. The effect of estrangement is similar to the fact that someone is leaning towards you, his face seems larger, and then suddenly decreases again.

This is how Apple designers used this technique to attract attention - it seems that someone is moving directly to the user.

Leopard squash and stretch effect

The animated squash and stretch effect appears everywhere in Leopard. Mail automatically selects dates, addresses and phone numbers when it receives a letter and issues them in a small pop-up menu with the ability to configure. If you select “Add Contact” or “Create New”, iCal opens a miniature editing window with a similar approximation as iChat.

The same for the “Mail's To Do” settings: when you click on the arrow next to the “To Do” element, the settings window appears with the squash and stretch effect.

And it seems that Leopard’s new Stacks feature uses the same effect.

Squash and stretch effect on iPhone

When viewing Google Map on iPhone / iPod touchsmall pins appear on top and land on the map. At the time of landing, they “plunge” a little into the map, and then again stretch to their full length. And when the terrain indicator appears, it also stretches a little when it appears, and then it becomes a normal size. Both are a squash and stretch effect in motion. And in both cases it looks very impressive and fun.



Animation seems to open up new possibilities for designers. The Log In window uses a very elegant animation to indicate that an error has occurred in the login or password. Animation expands the boundaries for Apple designers, and allows them to look for very interesting and unusual solutions. Well, do not forget that the animation gives liveliness and diversity to the design as such.

Let's see what else the developers will come up with. If they managed to do something like CoverFlow without animation, then imagine what they can come up with with it.

Also popular now: