Apple unveiled iOS 7 yesterday, sending veritable shock waves through user and designer communities alike. Sporting a head-to-toe redesign, this iteration of Apple’s operating system, which is due for release this Fall, is easily the biggest change Apple has made since first introducing the iPhone.
It also means that some big changes are in store for any visual designer interested app or app icon design, whether you like it or not.
With iOS7, Apple has firmly staked its place in the flat design vs. skeumorphism debate: they are decidedly flat. When Apple makes such a statement, it amounts to more than just a remark in an ongoing design conversation; it’s an imperative, effectively bringing the conversation to a definitive end. “Join us or die,” Apple essentially said, releasing a comprehensive guide for developers about how to conform their apps to the iOS7’s new look and feel. “Flatten out, or prepare to look antiquated. You have a few months. Get cracking.”
An iOS7 home screen
In brief, skeumorphism is the practice of trying to make computer interface elements, such as icons, buttons, windows and other application functions, resemble real-life, physical things through ornamentation. Skeumorphic designs tend to have drop shadows and gradients, because things in the real world do. Some icons really go all out — you’ve seen the address book designs that look like they’re made of real leather, and Apple’s Game Center which looks like wood and green felt.
Flat design rejects all of this in favor of a cooler, sharper, less cluttered aesthetic that, so the theory goes, allows the “content” of an application to take the foreground without ornamentation getting in the way.
iOS7‘s new icons are flat and conform to a grid system
Here are some of the new features that Apple’s flattened out iOS7 will have:
- Simplified, flat icons that all adhere to a uniform grid design system
- Brighter colors
- Multiple functional interface layers, organized hierarchically with translucent pane effects
- Translucent status bar, navigation bars, tab bars, toolbars, search bars and scope bars
- New sliding “go back” gestures
- Buttons without gradients or borders
- Full screen occupation without framing
- Slimmer typeface
- An ability to adjust font size across all apps
- Weather app with background images that mirror actual weather conditions
- Parallax effect between icons and phone background
- Folders expanded to include multiple pages and more apps
- Cell service bars replaced by white and grey dots
- Option of a light or dark theme across all apps, including keyboard
iOS7‘s iMessage interface exemplifies the flat button: no borders, no gradients, no drop shadows.
The iOS7 Weather app (left) abandons frames and extends to the edge of the screen — unlike the iOS6 Weather app (right).
These iOS7 screens demonstrate the new system’s hierarchical use of translucent layers.
Here are some of Apple’s guidelines for how to mesh with this framework:
- Take advantage of the whole screen when designing an app. Instead of using insets or frames, extend right to the edge
- Avoid bezels, gradients and drop shadows
- Flatten all buttons and icons by removing texture and borders
- Ensure that app content is visible through translucent interface elements
- Adopt the adjustable Dynamic Type
So it is spoken. So it shall be done — or so we’ll see.