The future of iOS design?
Sweating the details of iOS 7
“Completely flat,” “Like Android,” “Microsoft-flat,” etc., etc., etc.
The talk about how Apple is going to “flatten out” its UI style has set the rumour-mills ablaze with completely spurious conjecture. So I thought I’d add to it. However, let’s approach this not from “what one insider source told someone” but instead from evidence of progression within some of the top iOS apps.
Let’s start with homescreen icons given it’s the most obvious port of call.
Above is a selection of some of the most popular, well-known or lauded apps for the iOS platform. And there’s not a gloss, “texture” or stripe in sight. Yes, we can see a hint of it (Spotify, Path, Evernote) but the majority have gone for a different approach. There’s still the evidence of gradient and a “top shine” but it’s a more subtle, radial curve (Facebook, Google Drive, Dropbox, Flipboard) that alludes to a sense of perspective or 3D as opposed to the harshly cut gloss of old.
To me, there is a distinct movement towards a particular style and I would be very surprised if Apple were ignorant of it. It’s not “flat design” per se and it’s certainly nowhere near the “Metro” levels that people are suggesting they may follow, but it’s a mellowing out of the visual indicators that people need to trigger the idea of a tappable element. Why? Because this is not 2007 anymore, and we are all now fully aware of the medium and the process; we don’t need to be led garishly by the hand. There is still a sense of depth and tactility but done in a refined and suggestive way, sensitive to the changed perceptions that people have of interacting with touchscreens.
One of the jobs of a designer is that you’re very sensitive to trying to understand what goes on between seeing something and filling out your perception of it. — Jony Ive
Google and Facebook have led the charge recently for throwing design resources at their iOS apps and redesigning them in a beautiful, subtle and elegant manner. The idea that either of those wouldn’t have inside information about the direction of iOS 7's UI and styling is beyond belief and we can only assume that the similar route they have taken (away from Google’s completely-flat Android style) indicates the direction in which Apple is pushing.
One design pattern which is becoming more and more prevalent is the idea of “cards” on top of a simple (usually neutral/grey) background. This is opposed to the iOS standard of information being displayed in cut-outs into the background. I believe this may have been started by Pinterest but there’s a large number of apps now using this style as a clean way of presenting information (see below — and also Mailbox, Gmail, and many more).
There’s a less common idea of vertically stacked cards which is most prominently used in Google Chrome and Evernote. This is a way of displaying various screen modes as layered on the Y-axis which, although interesting, doesn’t feel right just yet. I do think we’ll start seeing a lot more apps trying to implement it as a navigational tool, however.
Another trend is the removal of button frames from apps, leaving only the icon as the tappable indicator. Although this could be seen as mimicking Android, I think it’s fair to say that the idea of needing a button frame to contextualize tappable icons is getting outdated now. There’s been a progessive move by various apps to remove them, Facebook being the latest to take the plunge. This started noticeably with the hamburger icons but has been pretty pervasive with a number of major developers. I’m not convinced Apple will necessarily remove them from their native styling but they may at least de-emphasise them.
Continuing on from this I’ve even noticed, in some key apps which have only recently been redesigned such as Facebook and iOS native music player, the removal of the back button (the arrow shaped frame containing the word “back”) and its replacement with a simple arrow icon. In case of the redesigned iOS Music app, they have replaced the word “Back” with an arrow icon but kept the arrow-shaped frame, an incredibly subtle and almost illegible styling. I do expect this to be a move they adopt going forward: to start using more icons as visual cues instead of literally spelling out actions for users with words. There’s familiar standards in UI iconography now to able to rely upon them being trigger enough to the user.
In this style, I decided to have a go at redesigning one of the native iOS icons which, to me, are in dire need of a spring cleaning.
I chose the Messages icon simply because it displays the three factors that I believe need addressing in iOS design and especially in the launcher icons: the gloss, the stripes, and the loud colours. I tried to apply the stylings and approaches that I discussed before and made another simple change, pulling the Label text down in boldness to Helvectica Neue Medium and upping the font size to 26px to give it clearer counters and a smoother, more legible readability. The colour’s still bright, as I don’t believe the pastel tones that are popular at the moment reflect iOS styling enough, but I tried to at least tone it down a notch.
I’d be interested to know what other people think so please feel free to get in touch: Twitter / Dribbble / Behance
EDIT: I wrote something about the upcoming Android 4.4 update too. https://medium.com/thoughts-and-words/8df21672166
