How to transition app designs to iOS 7

Default avatar.
July 11, 2013
How to transition app designs to iOS 7.

Transitioning apps to iOS 7There's been a lot of talk about iOS 7 since its unveiling earlier this month and most of it has been centered around the design, in particular the new icons. Now, as we've all had time to mull over the changes, questions are beginning to be asked about how they will affect the design of our own apps. As a result, a debate has broken out about how much of an influence iOS 7's new UI should have.

While some believe that apps should remain true to their own style and shouldn't be redesigned purely to match the look of iOS 7, others believe that apps should be redesigned in order to make them feel more native. To add to this, there appears to be some confusion over how strict Apple's iOS Human Interface Guidelines actually are.

In an effort to clear things up, I've taken a long look at the documents within Apple's iOS 7 Design Resources and will use this post to share some of my findings.

Understanding Apple's guidelines

With regards to the debate over whether all apps should now adopt a "flat" aesthetic, it's purely a matter of opinion. If you use custom UI elements in your design then ultimately stylistic decisions lie with you and your team. Although Apple do suggest that you revisit the use of drop shadows, gradients, and bezels, I've seen no evidence to suggest that this is a strict requirement.

In the snippet of text below, taken from the iOS 7 UI Transition Guide, more details are given on different levels of customization and how each will affect the amount of work that you need to do in order to prepare your apps for the transition.

Think of app customization as being divided into the following three types:

    • Standard. The app contains only standard, uncustomized UI elements provided by UIKit.
    • Custom. The app presents a completely custom UI that doesn’t include any UIKit UI elements.
    • Hybrid. The app contains a mix of standard and custom elements, including standard elements that you customized using UIKit tinting and appearance-customization APIs.

For a standard app, you need to decide whether your visual and user experience designs still make sense in the iOS 7 environment. If you decide to keep the current layout and interaction model, most of the work involves making minor adjustments and ensuring that the app handles the new systemwide gestures correctly.

Custom apps—that is, apps that use no UIKit UI elements—require a more nuanced approach. For example, if you feel that the current UI and experience of the app is still appropriate, there may be very little to do. On the other hand, if you feel that the app’s personality and user experience should change in order to delight iOS 7 users, you have more work to do.

Hybrid apps vary in the amount of work required, depending on the customizations you did and how you combined custom and standard elements. In addition to revisiting the overall design of a hybrid app, you need to make sure that your customizations still work well and look good when they’re integrated with standard elements.

It's also noted at the end of the document quoted above that an app that mimics standard iOS 6 UI in a completely custom way is likely to require a lot of work because it will simply look out of date. This is certainly a prospect that you're going to want to consider.

Also taken from the iOS 7 UI Transition Guide is the text below, which features two lists — things every app must do and things every app should do. Given the change in language, I'd consider the first to be a list of strict requirements and the second to be a list of things that at the very least should be given some thought.

Things every app must do

  • 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.

Things every app should do

  • Make sure that app content is discernible through translucent UI elements—such as bars and keyboards—and the transparent status bar. In iOS 7, view controllers use full-screen layout (to learn more, see Using View Controllers).
  • Redesign custom bar button icons. In iOS 7, bar button icons are lighter in weight and have a different style.
  • Prepare for borderless buttons by moving away from supplying button background images and by reassessing your layout.
  • Examine your app for hard-coded UI values—such as sizes and positions—and replace them with those you derive dynamically from system-provided values. Use Auto Layout to help your app respond when layout changes are required. (If you’re new to Auto Layout, learn about it by reading Cocoa Auto Layout Guide.)
  • Examine your app for places where the metrics and style changes of UIKit controls and views affect the layout and appearance. For example, switches are wider, grouped tables are no longer inset, and progress views are thinner. For more information on specific UI elements, see Bars and Bar Buttons, Controls, Content Views, and Temporary Views.
  • Adopt Dynamic Type. In iOS 7, users can adjust the text size they see in apps. When you adopt Dynamic Type, you get text that responds appropriately to user-specified size changes. For more information, see Using Fonts.
  • Make sure your app doesn’t respond inappropriately to the new Control Center gesture or to a navigation controller’s swipe to go back gesture, especially if you perform custom touch handling.
  • 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.
  • If necessary, update your app to best practices for iOS 6—such as Auto Layout and storyboards—and ensure that the app uses no deprecated API.

iOS 7 doesn't mean the end of the ultra detailed app icon either. The snippet of text below, taken from the iOS Human Interface Guidelines, suggests there is still a place for realism. However, as mentioned above, all app icons will need to be updated.

If you want to portray real substances, do it accurately. Icons or images that represent real objects should also look as though they are made of real materials and have real mass. Realistic icons accurately replicate the characteristics of substances such as fabric, glass, paper, and metal, and convey an object’s weight and feel.

To summarise

Although there is a lot more to the documents within Apple's iOS 7 Design Resources, and I would recommend reading through them all, I felt that these three snippets in particular provide some much needed clarity. Apple's new approach may do it's best to shun drop shadows, gradients, and bezels, but it doesn't mean that you have to follow suit, and whether you should or not is purely a matter of opinion.

Regardless of what stylistic choices you make, as long as you carefully consider all of the above, then you should have no problem in successfully transitioning your apps to iOS 7.

Has this cleared up any concerns you had? Are you looking forward to making the transition? Let us know in the comments.

Sam Jones

Sam Jones is a Freelance Designer whose work spans multiple disciplines such as brand identity, design for print, web design and illustration. As well as being the owner of one man design studio, Sivioco, he's also an advisor for Mostash. Feel free to follow him on Twitter @Sivioco.

Read Next

3 Essential Design Trends, May 2024

Integrated navigation elements, interactive typography, and digital overprints are three website design trends making…

20 Best New Websites, April 2024

Welcome to our sites of the month for April. With some websites, the details make all the difference, while in others,…

Exciting New Tools for Designers, April 2024

Welcome to our April tools collection. There are no practical jokes here, just practical gadgets, services, and apps to…

14 Top UX Tools for Designers in 2024

User Experience (UX) is one of the most important fields of design, so it should come as no surprise that there are a…

What Negative Effects Does a Bad Website Design Have On My Business?

Consumer expectations for a responsive, immersive, and visually appealing website experience have never been higher. In…

10+ Best Resources & Tools for Web Designers (2024 update)

Is searching for the best web design tools to suit your needs akin to having a recurring bad dream? Does each…

3 Essential Design Trends, April 2024

Ready to jump into some amazing new design ideas for Spring? Our roundup has everything from UX to color trends…

How to Plan Your First Successful Website

Planning a new website can be exciting and — if you’re anything like me — a little daunting. Whether you’re an…

15 Best New Fonts, March 2024

Welcome to March’s edition of our roundup of the best new fonts for designers. This month’s compilation includes…

LimeWire Developer APIs Herald a New Era of AI Integration

Generative AI is a fascinating technology. Far from the design killer some people feared, it is an empowering and…

20 Best New Websites, March 2024

Welcome to our pick of sites for March. This month’s collection tends towards the simple and clean, which goes to show…

Exciting New Tools for Designers, March 2024

The fast-paced world of design never stops turning, and staying ahead of the curve is essential for creatives. As…