Clay Allsopp

Definition of Design Terms

Jun 13, 2013
  • Skeuomorph: When a digital interaction behaves in a way that its physical counterpart required but, now being non-physical, is not necessary. Example: camera shutter animation of iOS <= 6.

  • Flat: The reduction, but not necessarily outright elimintation, of shadows, gradients, and textures from visual design. Example: Windows Phone

  • Depth: The ordering of digital visual elements to give the illusion of a physical hierarchy. Depth itself is a kind of skeumorph, since digital elements are not bound by the rules of a physical world. Example: Original Twitter for iPad

Skeuomorphism and flat design are not mutually exclusive; a good example is how most smartphone calculator apps preserve actions like "C", "MC", and "MR" (see: Windows Phone calculator). Skeuomorphism refers to how something functions, whereas flat strictly refers to visuals.

Depth and flat are also not mutually exclusive; see Letterpress.

So, what's up with iOS7?

iOS7 puts emphasis on raw content and reduces unnecessary visual flair. Generally, that means less skeuomorphism (which, by the definition above, is unneeded) and more flat visual elements. The camera shutter animation has been removed, glossy buttons are gone, and the more infamous examples of green felt and rich Corinthean Leather have vanished.

iOS7 has also added a greater and more consistent sense of depth throughout the OS, using not just shadows but also dimming and zooming animations. A notable change of pace is that new view controllers, instead of being just pushed from right-to-left along an invisible track, are now "stacked" with small shadows revealed when you slide them away.

Maybe a word better suited than any of these to describe iOS7 is "reductionist": thinner text, fewer borders, simpler icons. Less (of a particular type of) style, more substance.