Tag Archive for: app design

What Do Designers Need To Do Before iOS 7?

,

iOS 7 Icon

There is a lot of talk going on about Apple’s new mobile operating system iOS 7, even though it is at least a couple months away from actually being unleashed on the public. Most of the discussion is centered around the new flatter aesthetics Apple has adopted, especially the new icons. But, there are quite a few other changes designers are concerned with, namely the actual app redesigns necessary to keep up to date with the update and how much influence iOS 7’s new UI should have on the redesigns.

Many believe that the Apple’s new style should be a heavy influence on the new app designs so that they will appear more native. But, other brands have put a ton of energy and resources into designing their own style and appearance and they don’t want to throw all of their independence and unique brand identity away. To make it even more confusing, there is a fair amount of confusion over how strict Apple’s iOS Human Interface Guidelines are.

This puts designers in a place where they aren’t sure what they are required to do to continue to be accepted by Apple’s app store, and what is simply suggested to keep in step with Apple’s style. Sam Jones from Web Designer Depot decided to tackle all the questions designers have during the transition period, and his article will give designers a good idea of where to go from here.

Jones also pulled quotes from Apple’s iOS 7 Transition Guide which help clear up exactly what Apple expects from their apps. If you want to know the exactly what apps must do, and what Apple suggests for moving forward, the information from the Transition Guide is about as clear as can be.

Things Apps Must Do

  • Update the app icon. In iOS 7 app icons are 120 x 120 pixels in high resolution, rather than the 114 px they’ve been using for the Retina capable iPhones.
  • Every app must update the launch image to unclude the status bar area, if the app doesn’t already do so.
  • All apps are also expected to support Retina displays and iPhone 5 dimensions in all artwork and designs

Things Apps Should Do

  • Apple would like all app content to be discernible through translucent UI elements such as bars and keyboards, as well as the transparent status bar. In iOS 7, view controllers use full-screen layout.
  • iOS 7’s bar button icons are lighter in weight and displayed in a new style, and as such they would like designers to redesign their own custom bar button icons.
  • Prepare for borderless buttons by moving away from supplying button background images and reassessing how to handle them within 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.
  • 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.
  • In iOS 7, users can adjust the text size within apps, and as such designers should move to adopt dynamic type, so that text responds appropriately.
  • Ensure your app doesn’t respond inappropriately to the new Control Center gesture or to a navigation controller’s swipe to go back gesture.
  • Keeping in line with Apple’s new flatter style, they would like designers to reassess their use of drop shadows, gradients, and bezels. Apple’s new aesthetic puts way less emphasis on visual effects that attempt to make UI elements look physical.
/0 Comments

Free Resources: Icon Grids For iOS7

,

grid4

 

Apple’s keynote event earlier this month made news across the world, and few were impacted by the announcement of the new mobile operating system iOS7 more than designers and developers. While consumers will be receiving an updated user experience and new aesthetics on their phones and iPads in the next few months, designers are rushing to update apps and icons to keep their content up to date and optimized for the new operating system.

These designers won’t be forced to redesign from the ground up, however. There are already numerous resources available to help update to the new iOS. Designmodo is gradually collecting the best of these resources, and they recently highlighted two different icon grids for iOS, which are templates which you build icons on top of.

Beyond offering a few simple grids to assist the icon redesign process, there are also tons of examples of updated icons to help get designers steered in the right direction before the public has even gotten a hands-on turn at the operating system.

/0 Comments

Left Nav Flyouts Don’t Work, Please Stop Using Them

, ,

Mobile navigation can be difficult because you are forced to condense everything your site or app offers into a simple list or set of buttons. For the iPhone, three naviagational patterns rose up that are fairly good solutions to the problems of mobile navigation. You have the tab bar, the table view (like Messages or Mail), and the card stack, like what you find in Weather.

That doesn’t mean there aren’t designers trying other navigational solutions. Some of the more experimental ways to move around apps and sites work great, but there are some that just don’t work. Facebook’s mobile left nav flyout pattern is a perfect example of a mobile navigation system that should be gotten rid of.

Brent Jackson agrees that Facebook’s navigation system needs to be replaced, and argues why on his Tumblr page. More than anything, the issue I have with the system is it hides a lot of the functionality the app offers under small, hard to tap buttons.

As Jackson points out, the left nav flyout is also innefficient. While normally you have a small set of buttons always available to help you get where you want to be, Facebook makes you continuously wait for new lists or areas of the app to load. It becomes very tedious to do anything except look at the News Feed.

If you can think of times when a lefy nav flyout works, I’m all ears. There are none that work for me, or wouldn’t benefit from another site navigation system.

 

/0 Comments