Designing for iOS 7: Tips and Guidance for Apple’s New OS

iOS 7 is the biggest change to iOS since the first iPhone was first released, and it completely changes the look and feel of the Operating System. But what does that mean for designers? This guide will outline how designers can ensure their apps fit in with the new style.

Designers and developers are responsible for crafting the user experience for millions of iOS users, and users often expect the apps that use on a daily basis to look and behave in a familiar, consistent manner, whether they are using default or third party software.

So, from app icons to rethinking the whole concept of hierarchy and depth, we want to make sure no designer is left behind.

To be or not to be flat?

‘Flat’ is definitely the buzzword of the design scene at the moment, the flat style is a natural, somewhat drastic reaction to many designers realising that the previous trends of ultra-realistic, skeuomorphic designs are becoming outdated and unnecessary. Just like most trends do, the hype will probably fizzle out almost as quickly as it become cool. But, what we will hopefully be left with in its place is a nice balance of function and simplicity, meets skeuomorphism (when appropriate).

One of the major changes in iOS 7 is a focus on hierarchy, for example the translucent menu controls which appear to float above the content of the app. This reduces the designer’s need to adorn interface elements with shadows, gradients and bevels to portray depth.

So the decision of how flat to be is in the designer’s ballpark, but should be based on individual circumstances, after all that is the purpose of being a designer, to craft solutions based on clients and end users needs. Not to blindly follow trends.

App Icons

App icons in iOS 7 have numerous subtle changes, here are the guidelines you should follow when updating your app icons to be more iOS 7 friendly:

• New DimensionsiPhone app icons are now 60 x 60 px, and 120 x 120 px (Retina), so be sure to export your icons at the correct size! If you want to streamline the process of designing and exporting app icons check out our iOS 7 App Icon Kit.
• Updated Rounded CornersNot only has the corner radius on app icons changed in iOS 7, the whole way they are rounded is new tapering from a subtle to more obvious curve gradually. Reassess your icons to make sure they look right with the new rounded corners.
• Grid SystemIn an effort to keep app icons consistent, Apple have created a grid system which may also be useful for third-party designers and developers to use
• Subtle DetailsTextures and other details are still perfectly acceptable to use in app icons, but you should consider toning them down. The app icon should be considered as a small window into your app

Interface Elements

The most notable change in iOS 7 is of course in the user interface. Absolutely no elements have been left untouched, in order to help you design for this new style here are our top tips:

• Implement Borderless ButtonsGlyphs and text can stand on their own, without needing to be surrounded by a different background colour or border, and will still be understood as tappable actions.
• Use Shadows SparinglyiOS 7 has much more focus on hierarchy, so there is less need to excessively use shadows to show the perception of depth.
• Consider Smaller DetailsSince Retina displays were first introduced, designers have been encourage to simply double the dimensions of elements (1px line @2x = 2px for example), but in iOS 7 there is much more use of hairline 1px details.
• Make your designs fit inIf you want your apps to fit in, examine the design of the default apps, almost all of them use primarily white background with a single highlight colour.

Resources

iOS 7 App Icon Kit (Free):

iOS 7 UI Kit (Free):

Ultra-thin Vector Icons (Premium):

Conclusion

The release of iOS 7 doesn’t mean all designers must copy Apple and remove every trace of gradients, shadows and bevels from our apps. As designers however, I think we have a responsibility to consider the platform that we are designing for and adapt our designs accordingly, to create a more consistent, engaging user experience. And remember, iOS 7 still in the early beta stages for now, things may still change before the official release!

We hope these tips help you transition into iOS 7 and as always we welcome your input! Are you eager to start to designing for iOS 7? Maybe indifferent, or even dreading it? Let us know in the comments :).