✎ How you should look in iOS 7
iOS 7 puts its emphasis on motion, and the visual UI design recedes to let the content and feel take room. While the OS itself isn’t finished, the thinking behind it and the direction they’re headed is clear.
We’re working on a new app and updates to our existing apps in Filibaba. During this process I’ve consider every detail again, and it felt right to share some of my insights & thoughts with you.
Strip away details. Get to the core of each element in your app. Consider everything from font choices, iconography to UI elements.
The same goes for home screen icons. The default apps does nothing to decorate their rounded shape. No highlights, no borders, no forced perspectives. Consider dropping all of those. Think of it as a peephole into your app.
Smooth transitioning. If you use the same background in the icon as you do in the default.png & the starting point of your app, the transition from the home screen will be near seamless. It now zooms into the icon, which transitions into the default.png and in turn fades out to reveal the starting screen.
Flatten out buttons. You don’t need to go completely flat and strip away all the personality of your app. But buttons don’t need heavy gradients and shadows to communicate that they’re a button. In fact, navbars has no buttons any more, they are just text. Make sure to use a differentiating color to stand out.
Icons can stand on their own. There’s no need to have a button shape around a glyph, the glyph itself is enough to make users understand that they can tap it.
Use shadows sparsely, and make them subdued. With the general lack of shadows in iOS 7, you don’t need much to make an element stand out. Consider new levels of subtlety.
Same goes for textures. There is still a use for textures, but make them subtle. Again, consider new levels of subtlety to the point where you can feel the texture, but barely see it.
Avoid decorating text with etching or shadows. Instead, make sure the color choice works well with the background. If it doesn’t, consider adjusting the background. In Filibaba’s case, we opted to use a gradient effect to darken photos rather than add shadows to text.
Work in Retina resolution. iOS 7 has many elements redrawn to take full advantage of the Retina display. Perhaps adjust certain details to be just 1 Retina pixel. Apple has plenty of hairline dividers of that size.
Be true to the screen. Gone are the efforts to make the screen look as if it has rounded corners. Navbars are square and blends together with the statusbar. iOS 7 lets the content continue underneath navbars and the statusbar. And sometimes you might not even need a navbar, you could just let it blend with the rest of the screen. Think of this on a screen per screen basis. You can have a navbar in one screen, and get rid of it in another.
Edge to edge. Let elements such as photos reach the edges of the screen, realizing that your app is already framed by hardware.
Contrast. iOS 7 is filled with contrast, from pure white apps to utter darkness in apps such as the compass. Consider the contrast of your app, tinker with the brightness of backgrounds.
Don’t be skeuomorphic when it doesn’t hold up. There was never such a thing as a leathery utility to locate your friends. But there are still uses for skeuomorphic designs. Filibaba has an egg timer to invoke that sense of nostalgia or the feel that your smartphone can replace a physical thing. It works close to the real deal, but you can wind it several times, control it with a start & stop button and it displays the exact time.
I’ve questioned design decisions I’ve made previously, and I feel the result is better for it. By considering the new thinking in iOS 7, you can make your app feel right at home when autumn comes.
Update Jun 27: Jeremy Olsen has written an interesting article on the same topic, called Responding to iOS 7. There’s also a Branch with some commentary.
