Apple has revealed a radical new vision for iOS - but what does this mean for designers? Sam Hampton-Smith delves into the official guidelines to find out...
Apple has long been criticised for the slightly haphazard approach it's taken to the user interface design of its apps, and the iOS platform in general. Some apps have featured heavily skeuomorphic design, while others have been purely functional with little or no design flourish.
Yesterday, though, that all changed. At its annual developers conference, WWDC, Apple introduced an all-new design language for iOS 7, eschewing the pseudo-3D patent-leather, wood and felt in favour of a clean approach that’s typography-led and heavily (although not exclusively) influenced by flat design.
This shift in approach is a game changer to designers responsible for crafting iOS app interfaces. So what changes to iOS are most relevant to designers, and how does Apple's change in thinking affect what it now looks for in iOS app interfaces?
We’ve scoured Apple’s Transition Guide and picked out the 10 most important considerations for designers. Read on to find out what you need to know about iOS 7 and how it will necessitate changes to the way you present your content.
Nav bars, tab bars, tool bars and more are now see-through
One of the most important changes in iOS 7 for interface designers is the introduction of transparency and translucency.
The status bar is now transparent, while navigation bars, tab bars, tool bars and other user controls have adopted translucency. Consequently, your app content now needs to be discernible through translucent user interface elements.
You'll also need to take account of the all-new control centre, which allows quick access to common functions on the device (such as turning on bluetooth, or adjusting the screen brightness). This modal view appears over the top of the current app or homescreen, using a translucent effect to continue hinting at what lies beneath.
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
02. Buttons have lost their borders
Custom button designs will have to be adapted for iOS 7
Buttons in iOS 7 don’t have borders and backgrounds like they did in iOS 6 and earlier versions of the operating system. This allows the type to be bigger, but means that custom button designs will need to be reworked to fit the new scheme.
Buttons with designer-defined backgrounds now need a special mask to support the automatic view-swapping animations Apple has baked into the operating system, and tab bars have an entirely new, simplified aesthetic that will require new artwork.
You'll notice that buttons throughout the new Apple apps have been simplified and removed, as can be seen in the Messages app where the navigation bar and message-send buttons have been stripped back to concise text labels.
03. Type has gone dynamic
The updated Weather app shows off iOS 7's new dynamic type system
iOS 7 uses a new dynamic type system which is designed to improve legibility of text, regardless of the size it is rendered at.
Dynamic type automatically adjusts font-weight, letter-spacing and leading for each font size. It also supports text styles, allowing you to specify different attributes for headlines, body copy and buttons.
The updated Weather app shows off the new font and clear typography with a full-screen view that is typography-led while using animated backgrounds that reflect the content.
04. More of the screen is available
You now need to consider the whole screen in your designs
With the new transparent status bar, and the removal of segmented borders to provide a margin to the side of the screen, Apple is now actively encouraging app designers to extend their content to the edge of the screen.
Modal views such as the on-screen keyboard are now translucent, allowing elements of content to shine through from below, allowing meaning to be conveyed even when a view is partially obscured. The refreshed Weather, Photos and Camera apps all make full use of the screen to display content.
05. Hierarchy is conveyed through depth
Apple wants you to follow its lead in using transparency and transitions to create hierarchy
One of the most striking, albeit gimmicky, aspects of the new OS is the accelerometer-powered 3D effect on the homescreen, where the icons move in parallax against the background as the handset is moved in physical space. This hints at the third primary theme of iOS 7 - that depth and realistic motion communicates hierarchy to heighten users’ understanding.
Of course, Apple would like designers to adopt the same approach to authoring apps, making use of transparency and transitions to help communicate hierarchical position. It's a big leap in the way we think about app design, but it's probably won't be long before users of iOS 7 start to expect it.
06. There's lots of white space available
Apple is leading by example, reducing clutter in its apps - and wants you to follow suit
With iOS 7, Apple has gone big on extolling the virtues of breathing space in providing clarity and ease of use. And the official guidelines make it clear they want designers to create apps with a sense of calm and tranquility, focus and efficiency.
This is best achieved by not cramming everything in tight together, so embrace white space and let your content breathe. As with the other considerations, Apple is leading by example here by reducing the amount of clutter in its own apps - as seen in the App Store and lost/stolen screens.
07. Apple's laid out 3 key design principles
Follow Apple's three core design themes and you won't go far wrong
There are three core themes to iOS 7 that app designers must follow, according to Apple's guidelines:
Deference: The user interface helps users understand and interact with the content, but never competes with it
Clarity: Text is legible at every size, icons are precise and lucid, adornments are subtle and appropriate, and a sharpened focus on functionality motivates the design
Depth: Visual layers and realistic motion heighten users’ delight and understanding
Apple wants you to pay close attention to these themes when designing your user interface and interactions, and it's paying particular attention to deference, which reinforces the best-practice approach of design supporting content, rather than overpowering the content itself.
A good example of this is seen in the way the Calendar app has been updated to simplify the user interface, removing unnecessary design elements and using a stark white background.
08. Apps must be redesigned from scratch
You won't be able to get away with small tweaks to your iOS6 app
In its guidelines, Apple suggests the best approach to achieving a meaningful redesign within the iOS 7 framework is to strip away your existing user interface to expose the app’s core functionality, and reaffirm its relevance.
Once you’ve established the core elements of functionality, you should use the themes of iOS 7 (see point 07) to inform the design of both the UI and UX. To take one example, Apple’s Compass app now uses a refined, detailed display to communicate key information, while adopting the new approach to minimalist and functionality-led design.
09. Skeuomorphism is a no-no
Apple's guidelines warns against bevelled buttons
In keeping with the theme of deference introduced in point 07, Apple's design guidelines strongly suggest that designers avoid "visual indicators of physicality and realism". The user interface should be a supporting structure for the content, and not risk overpowering that content.
Loosely translated, this means Apple isn’t keen to see bevelled buttons, gradients, drop shadows or other skeuomorphic design elements, because this can "lead to heavier UI elements that can overpower the content". The guideline 44px-square-minimum interactive-element hit-zone continues to apply; don’t expect users to be able to accurately tap an area smaller than 44px square on their screen.
Apple have removed these visual indicators of physicality throughout iOS 7, most noticeably in apps such as Game Center, Calendar and Podcasts (although the latter was actually changed earlier this year).
10. Splash screens are out
The mock-up on the right is exactly what Apple doesn't want you to do
This last point isn’t technically new, but in its iOS 7 guidelines Apple has taken the opportunity to remind designers to avoid self-serving splash-screens and other views that interfere with the purpose of their app. The aim is to get content and functionality in front of the user as quickly as possible, so a welcome screen needs a good reason to exist. As if to prove the point, Apple have mocked up a splash screen for the Calculator app (see above, right) to show what NOT to do!
