The Essential iOS 7 Design Guide
Hopefully, app designers will quickly embrace the look and feel of iOS 7 by implementing new styling and features into their own app designs. Whether you are a designer or a developer interested in a designer’s perspective, here is a list of things to consider to get you started with design for your iOS 7 apps:
#1 Include the status bar in the content area
You may already include the status bar in your iOS designs, but now, with the visual marriage of status bar and navigation bar in iOS 7, the status bar needs to be considered as part of the content. If you add a tint color to the navigation bar, it includes the status bar and creates a larger space of color than before. If you use the built-in transparency, your content will blur behind the status bar when the user scrolls (see more about the blur effect below).
#2 Consider the physics of your app
iOS 7 is not about flat versus skeuomorphic. Rather than using hyper-realistic textures and shadows, the new OS provides a physics engine to let you parallax items on the screen; objects move with the user to invoke the feeling of depth. Think about the layers of your design as they relate to each other with movement.
#3 Use the blur effect and use it appropriately
Translucent items with a blur effect allow you to hint at content that exists behind that layer while giving context that more content is there. For the designers out there, we’ve found that a 10 pt blur radius plus a 10 pt increase in saturation best mimics iOS 7’s blur effect under most circumstances. It is of note that we don’t get this effect free per-se outside of navigation and tool bars, but there are several options for developers to implement this effect- stay tuned for more information for developers in another insight. Also, be cautious when using a tint colored navigation bar with translucency, as its color can get muddy when content scrolls behind it.
#4 You don’t have to use navigation titles or back button labels
Thank goodness! While a great design should help the user maintain their bearings, sometimes an app calls for content that gets muddled with all the labeling. That said, don’t let your user get far down a navigation stack without letting them know where they are and where they came from.
#5 Consider transitioning between light and dark themes
If the focus contrasts between two areas of your app, you can change the feeling your user gets by making one section light (light navigation and status bar and black status bar items) and one section dark (dark colored navigation and status bar and white status bar items). The new animations in iOS 7 make the transition between the two seamless. Take a look at how the revamped iTunes app uses this to distinguish between music and video content areas.
#6 Become an animation guru
iOS 7 nailed it when it comes to animating content between views. Consider the Photos app in iOS 7 which, at each level of the navigation stack, animates your photos from year to collection to moment to photo detail. As you transition from one view to another, instead of fading or pushing the photos away and reintroducing them, the app grows or shrinks the photos to transition to the next view. When designing your apps, think about elements as objects that exist and can be moved and transformed based on the context of a view.
One more thing…
#7 Forget about designing for previous versions of the OS
If it’s in your power, start supporting only iOS 7. If your app must support earlier versions of the OS, Apple encourages us to honor the versions of the OS that they run on, and, if that’s the case with your app, you can forget the title of this section- your app needs to have a design separate from its iOS 7 counterpart. There is a strong argument to be made, however, that you should design and build your apps for iOS 7-only going forward- that is, until the next major release.
In the past, developers often needed to wait an entire year to implement features using the technology of last year’s OS in order to support the bulk of their user base. Each generation of the OS provides new technologies and tools, such as the ones mentioned in the six sections above, as part of an updated SDK that allow developers to write more effective code more efficiently, enabling easier implementation of functionality that may have been very difficult or nearly impossible to deliver with previous versions of the OS. If an app has to run on iOS 5 devices, for example, developers are stuck using iOS 5 SDK technologies, even if the app also runs on later versions of the OS.
That’s not to say that what a newer SDK gives us for free can’t be recreated with custom code; it just usually comes with a price tag of considerably more time and effort to make those things a reality.
Here is a specific example as it relates to iOS 7. Both iOS 6 and iOS 7 provide developers access to collection views to implement complex arrangements of content, such as array of items displayed in a grid on screen. Transitioning these complex arrangements from one to another (like the iOS 7 Photos app animates between years and collections, and collections and moments), however, wasn’t made easy until the iOS 7 SDK was released. A developer would have to write a substantial amount of custom code to to make this come to fruition on iOS 6.
Because of the obligation to use older technology for backward compatibility, many of today’s apps only recently dropped support for iOS 5 and could begin utilizing tools first introduced with iOS 6. With 93% of devices running iOS 6 (Apple announced this statistic at WWDC in June), the first OS to allow over-the-air system updates, developers can look forward to the fastest adoption rate of any iOS to-date, and immediately switch to iOS 7-only support.
The more access to better tools given to developers, the easier it is to translate great design into an app with great user experience. With iOS 7, we have the opportunity to take the plunge now with design and development instead of a year from now and bring the most up-to-date features to our users right from the start.
Be sure to check out our Essential iOS 7 Developer’s Guide or shoot us an email if you’d like more professional help preparing your company’s app for iOS 7.
Lindsay Giachetti is Director of User Experience for Double Encore, Inc, a leading mobile development company. She is a respected user experience expert for iOS and Android platforms, and is known for her work for major brands, which has consistently been featured on both the iTunes App Store and Google Play.
http://www.doubleencore.com/2013/09/the-essential-ios-7-design-guide/