Over the weekend, iOS 7 was officially released to the public, after months of being in the hands of Apple’s entrusted community of developers, coinciding with the release of Apple’s latest iPhones, the iPhone 5S and 5C. Regardless of how revolutionary the hardware iteration is, no one can doubt that the operating system itself has gone one of the most radical changes, since it’s inception, something Apple dubs, “pure representation of simplicity”.
The flattening of the interface design, absent of skeumorphism and depth instead focus on a cleaner streamlined interface, powered by the animation dubbed the parallax. Sure there are indeed quite a few new API changes, as far as development goes, but designers will certainly feel overwhelmed with where to start. So to get things started, we will outline the 7 important tips for migrating to IOS 7.
1 SUPPORTING iOS 6 AND iOS 7
The first thing you need to worry about, as a developer and designer before moving to iOS 7, is whether you are carrying baggage with you. That is, will you need to still maintain support for iOS 6? Will you be designing this app from scratch for iOS 7? Are you migrating an existing project?
Apple still recommend that you design for iOS 7, adapting the visual principles and philosophy, which would still be valid in both iOS 6 and iOS 7. As for the translucent objects, such as navigation bars, or navigation buttons, re-introduce them back into iOS 6 using appropriate judgement. XCode provides a great tool to assist in the migration, by allowing you to preview through Storyboards, how your changes would look on both iOS 6 and iOS 7.
Clarity is the philosophy of ensuring your primary content or message for the screen is clear, free from distortion, interruption and visual decoys. This is more typographically-focused, and Apple recommend you follow the following clarity guidance:
– Negative spacing between elements to provide the sense of focus and noticeability, whilst ensuring you don’t overlap, you optimise boundaries between objects on your screen.
– Colour or rather a good pure system colour to annunciate important states subtly gives the app a similar theme.
– Font adjustability or rather Dynamic Typing should be employed to ensure that the app looks great at every font size, with the interface responding when the user selects a custom or system font and size.
Deference is the art of ensuring once’s art doesn’t get in the way of content, no matter how crisp and fluid the animation and highlights are in your app, and rather focus on the functionality of the app.
With the design guide of negative spacing and borderless buttons, you are encouraged to maximise your screen usage and dimensions, whilst avoiding inserts and thick borders and frames, as well as bezels, gradients, drop shadows and other visual indicators that compete with content for space.
Finally, using translucent UI elements, like those found in UINavigationBar allows you to slide content behind them, providing a transient hint whilst allowing your content extra height.
Depth affords a perceptive distinction through layers between on-screen objects, providing a sense of hierarchy and intuitiveness when interacting with the objects. Apple’s own calendar is a perfect example of hierarchy, providing a logical transition and depth from year-view, selecting a day displays a month-view, going all the way down to day-view. At all times you sense through animation the depth or level you are at, and how to get back.
5 LAYOUTS & CONTROLS
The use of Dynamic Fonts, means you need to anticipate variability in font typography and size, which means your UI element positioning and sizes need to adjusted adapt accordingly. So how do you do that?
Last year Apple introduced Auto-Layout in Interface Builder, a quite helpful visual and pro grammatical tool to anticipate changes in screen layout, and adjust each object relatively. This fluidity in positioning and sizing not only allows you to maintain a robust interface in iOS 7, but also makes life easier if you need to support both iOS 6 and iOS 7. So now you have a compelling reason to either adopt this tool, or go through the programmatic hassles of adjusting layout according to different text sizes.
Even thought it may seen that the borderless buttons Apple are emphasising look more condensed, button hit points still remains at 44×44, a long-standing standard Apple has advocated in their Human User Interface Guidelines. This is something you need to maintain when creating your own custom buttons.
Apple make use of Perspective, a visual weight and balance to create the perception of prominence of certain elements and buttons over others, as a more visually prominent button tends to be a more functionally prominent button.
IOS 7 saw the birth of Parallax animation at a system level, a visual trickery in perception of size and depth, allowing certain objects nearer to appear larger, and Apple have simulated the effect when the phone is tilted or rotated around, thanks to gyroscope and accelerometers. For instance, you could see that the home icons appear subtly above the background. Going back to your app design, you should adhere to subtly, fluid gorgeous animation where you can, and where appropriate.
The general design principle for choosing animation is to communicate feedback and status/state of a task/app, whether they are touching an object, or awaiting a result from a touch or action, drawing attention to the outcome. The animation of pressing a button, switching a view needs to be subtly and not gratuitous, perverting the user from their intended primary task, or break the flow of the app. Apple have done a good job of providing animation in their standard UI controls, allowing iPhone users to anticipate consistency and familiarity, so it’s best you try and follow their philosophy and mimic similar animations for similar types of controls, and make them consistent throughout your app, as well as realistic, adhering to the laws of physics.
Along with the borderless buttons, Apple’s new default styles for icons in bars are now constructed with a lighter stroke weight, which is perceptively more condensed even though the icon sizes remain the same. If you don’t use custom icons for your toolbar, then you will get the new icon designs for free.
System icons that you would find normally when you choose a standard icon for your bar button icon, look flattened, borderless and small. These are standard icons that will become more synonymous with iPhone users, and will be used by many apps to represent common app functions, such as bookmarks, camera, create/author and location, and so forth.
If you decide to design your own custom icons, you should aim to create an icon that is simplified, rather than something that is graphically complex. All of Apple’s system default icons are simple representation objects. You should also ensure your icons are recognisable and non-ambiguous, something that visually makes sense, following a consistent stroke weight and perspective, across your app.
If you are unable to visually represent a function graphically, you don’t have to create a graphical icon. Apple’s Calendar app makes use of text instead of icons, in it’s toolbar. This is especially effective if you only require one, two or three buttons in your tool bars.
Want to learn more?