Life's easy with Medialoot.

Unlimited access for only $14/mo.

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

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.

iOS 7 UI DesignDesigners 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).

Photoshop vs BrowserOne 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

ios 7 user interface design tips

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

ios 7 user interface design tips

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 app icon kit

iOS 7 UI Kit (Free):

ios 7 ui kit

Ultra-thin Vector Icons (Premium):

ios 7 thin icons

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 :).


Sign up for more

Free premium quality resources and design files

Web and graphic design tutorials and quick tips

Industry related articles and trend discussions

Comments

  • Reply »
    writemyessayhelper.com

    writemyessayhelper.com

    Please let me know if you are looking for someone who can write a powerful academic paper as we are ready to writemyessayhelper.com</a> 24/7.

    Aug 5, 2013 at 4:37 am
  • Reply »
    Arthur

    Arthur

    First, I think that it is very important to know that Apple will accept apps for iOS 7, even if they don’t follow the flat design techniques.

    But there are some strict requirements though, regarding iOS 7:
    - Update the app icon. In iOS 7, app icons are 120 x 120 pixels (high resolution).
    - Update the launch image to include the status bar area if it doesn’t already do so.
    - Support Retina display and iPhone 5 in all your artwork and designs, if you’re not already doing so

    Also, developers which want to create apps for iOS7 that don’t respect the flat design techniques should know Apple’s recommendations: “Revisit the use of drop shadows, gradients, and bezels. Because the iOS 7 aesthetic is smooth and layered—with much less emphasis on using visual effects to make UI elements look physical—you may want to rethink these effects.”

    Oct 19, 2013 at 2:16 am

Leave a comment

Sign up to our Newsletter

Get site updates, freebies, and MediaLoot news.

Contact Us

Suggest a resource

FAQ

Attribution for free resources must be provided in conjunction any time the freebie is used, on the same page where the resource appears on your design. Or, you can purchase a premium version of the free resource.

See all