From Fake Leather to the Great Flattening: The Evolution of iOS

With the debut of iOS 7 this week, Apple has made the most radical change to its mobile operating system since it first launched on the iPhone way back in 2007. Need proof? Let's take a walk down memory lane and look at how iOS has evolved.

Apple introduced a boatload of design and user experience elements with the first version of iOS. The bulk of those stuck around largely unchanged through iOS 6. Over the years, new apps, settings, and features were added -- all things that made the OS more useful and, for the most part, improved the user experience. And of course, these additions all spoke the same design language.

But now, for the first time since its birth, the look and feel of iOS is fundamentally different. We look at how it got there, and we trace some of its important milestones along the way.

Photo: Alex Washburn / Wired

iOS 1

With the launch of the first iPhone, Apple established the general look and feel of what would become the world's first mature touchscreen-driven mobile operating system.

Its main interface became iconic -- a grid of app icons, each a square with rounded corners, and a dock of four icons fixed across the bottom of the screen. It's a look that inspired a few copycats.

Besides the homescreen, iOS 1.0 established a number of other interfaces and design elements that would continue to show up in each subsequent version of iOS. The onscreen keyboard, Google Maps, mobile Safari, the phone call interface, "visual voicemail" were all key features established in iOS 1.0. Also, the Settings menu -- with the darker blue title bar across the top, lighter blue background, and tappable options rendered in black text -- stayed largely the same after launch.

Photo: Apple

iOS 2

While iOS 1.0 established the paradigms of Apple's mobile experience, iOS 2, that experience expanded with the addition of the App Store and third-party apps.

The second version of iOS was released when the iPhone was a year old, in July 2008. It kept the same general look and feel as the original, but added MobileMe, Apple's first failed venture at cloud-based mail and syncing. There was also added support for Microsoft Exchange accounts, and the ability to search through your contacts -- nothing else that majorly affected the UI.

But the App Store was a huge addition, and a model that went on the revolutionize software distribution -- not just for iOS, but for mobile and dekstop apps across several platforms.

Photo: Apple

iOS 3

With iOS 3, Apple polished things up. Its Apple-made app icons gained depth and texture -- a subtle way to show off the improved processing power of its latest handset, the iPhone 3GS.

iOS 3, which launched in June 2009, filled in a lot of the blanks left by previous versions of the OS (copy and paste!) and added things users had been requesting, like making the keyboard available in landscape mode. iOS 3 brought the introduction of the push notification, which would eventually alert us to everything from new emails and text messages to the availability of new editions of digital magazines, or whether you needed to take action in a game ("Oh no! My plants are dying!"). Voice Control was also added, giving users a new way to find and play music, or call specific contacts just by speaking requests into the phone.

In April 2010, Apple released iOS 3.2, which marked a major change in iOS' evolution as it filled a big screen for the first time -- the iPad had arrived. The look and feel was very similar to the iPhone, but scaled up and slightly tweaked to take advantage of the additional screen real estate. That larger screen made it possible for the Settings menu and Mail app to have two panes of information, for example, and for the look of the Music app's interface to be more iTunes-like. Also, you could store more apps in the dock.

Photo: Apple

iOS 4

iOS 3 made iOS icons look more polished; iOS 4 refined that even more. Arriving in June 2010, it added a subtle reflection to the apps in your dock, which now appeared to sit on a glossy virtual plane. It also added a whole lot of textures -- too many for some. Example: Game Center, with its green felt and wood trim.

iOS 4 brought with it a big new feature: multitasking. By double-clicking the home button, you could access a row of app icons on the bottom of your screen, allowing you to quickly toggle between your most accessed apps without navigating through various pages in the home screen.

Apple also introduced folders into iOS 4, allowing you to group related apps in a single place. The background in the folders was a black linen texture, a skeuomorphic element that made its way into a number of Apple apps.

Photo:Wired

iOS 5

While the interface remained largely the same, iOS 5 brought one very important addition to Apple's mobile OS: Siri.

Although her abilities were initially quite limited, for the first time, Apple introduced a real way we could interact with our iOS device in a different manner. Siri became a portal to information, and to information normally housed within specific apps. This meant you could bypass having to click on an app or doing a Google search in the first place. You could just tap and hold the home button to pull up Siri, and you'd see that now-familiar circular chrome icon punctuated by pulsing purple virtual light.

Skeuomorphism was always an integral part of the iOS experience, easing users into apps that replicated the purpose of real-life objects by looking like those real-world counterparts. Notes is one of those, with its yellow notepad background; Reminders, an addition to iOS 5, was another one. It featured lined paper with a paper pulp background texture. Background textures like paper and linen became an increasingly prominent fixture in iOS 5.

Photo: Wired

iOS 6

One of the major themes of iOS 6 was its unification with OS X through cloud-synced services like Messages, Calendar, and of course, iCloud. Design cues from the desktop OS were shared with the mobile OS, and design elements for syncing behaviors were repeated from app to app.

Also, the use of textures was still going strong. The design changes from iOS 5 were subtle -- things like the shine pattern on chrome in the OS, which changed depending on the angle. This was particularly evident in the music player and volume slider. Skeuomorphism remained at an all-time high, as new apps like Passbook featured pseudo-paper-shredder animations.

More of the user experience changed around sharing and syncing (in addition to deeper iCloud integration, iOS 6 introduced Facebook sharing) than it did around design though.

Photo:Wired

iOS 7

Onstage at WWDC this week, Apple CEO Tim Cook called iOS 7 "the biggest change to iOS since the introduction of the iPhone," and we certainly can't disagree, based on what we've seen so far.

Apple's typically slow, iterative design roadmap came to a stark about-face with this rebirth of iOS. Version 7 ditches the simulated shine and textures of a number of its apps and app icons, redrawing the visual elements in a simple, flat style. Just a couple of contrasting colors, maybe a gradient, and that's it. The new iOS also uses circles as a key design element throughout the interface. Backgrounds are now almost all pure white, as opposed to the old light blue or grey, and miles away from the old textures. Apps on the home screen have a parallax element -- when you tilt the phone, it appears as if you are looking behind the app slightly. Translucency is also a bigger design feature.

Just about every Apple-made app seems to have been rebuilt from the ground up with this new design aesthetic. It's also notable that the multitasking experience, which first popped up in iOS 4, has been substantially improved. Double tapping the home button brings up thumbnail screen shots of your open apps, so you can see not just the app icons, but what exactly is going on inside of each app. Like before, you can swipe between the open apps to call a specific one up, but now you can close the app by swiping upward on the thumbnail.