A Look at iOS UI Elements Over The Years

Next week at WWDC, Apple will unveil the sixth iteration of its mobile operating system, iOS. Although Apple has added a lot of features over the course of these five years, the layout of iOS has remained almost consistent.

That, however, doesn’t mean that every element in the user interface has remained exactly the same throughout. Apple has tinkered around with the look and feel of several standard UI elements over the years.

Rene Ritchie over at iMore writes about the evolution in Apple’s design principles, which has mostly been introducing more and more skeuomorphic interfaces into apps. Skeuomorphic design, in the digital world, is trying to make digital interfaces look like objects from the real world. The wooden shelf in iBooks is a pretty good example of skeuomorphic design.

Skeuomorphism wasn’t a big part of the first few versions iOS (called iPhone OS back then). With the exception of the Notes app, which was inspired by the yellow legal pads, most of Apple’s apps followed a  standard, purely digital design philosophy, which Rene calls the “world of pinstripes.” Pinstripes continue to appear in many of Apple’s in built apps even now.

settings app

It was the release of iOS 4 that unleashed Apple’s skeuomorphic design monster. Game Center debuted with an interface made up of wooden navbars, tab bars, and a green felt background. The whole set up looks like a felt gaming table.

Along with wooden bars, Apple also introduced linen textures in iOS as a metaphor for elements that are in the background, like the app switcher and folders.

linen folders

If the wood in the Game Center app wasn’t enough, Apple’s iBooks app also incorporated wooden textures in the form of a faux bookshelf. The newly introduced iTunes U app also has a similar skeuomorphic interface. (Apple wasn’t the first one to come up with such an interface though.)

bookshelves

Continuing its use of textures, Apple introduced Find my Friends and Reminders, both with a leather texture. Find my Friends, with its stitched leather interface, tries to look like the digital variant of an address book, while Reminders’ black leather interface apes old leather bound agendas, which very few iOS users would have even heard of.

find my friends

(Apple’s designers even carried on a lot of these textures, and skeuomorphic designs in general to Mac OS X Lion.)

Although it doesn’t seem like Apple’s going to wash its hands off skeuomorphic design in an instant, especially with so many of its apps already following the design philosophy, it appears that Apple is gearing to change the default color scheme of standard iOS UI elements to silver from the blue we’re all used to.

The silver color scheme is already being used in a number of apps including most inbuilt iPad apps, and a number of newly released Apple apps like iPhoto and the WWDC app.

Silver colorscheme versus older blue

If the rumors of Apple debuting a TV operating system are true, it’ll be interesting to see what sort of design philosophy does Apple follow.

In his post over at iMore, Rene has also created mockups of what each pattern would look like when applied to the  Settings app, which is the most common type of standard interface found in iOS apps. Head over to this link to see the mockups.

See also: Subtle graphic changes in iOS 5.

  • Skippy

    Almost seems iOS 5 was pointless

  • Tony

    That’s interesting stuff, didn’t really notice it.