Almost Flat: The Future Of iOS Design?

Almost Flat: The Future Of iOS Design?

‘Completely flat’, ‘like Android’, ‘Microsoft-flat’ etc., etc., etc. The talk about how Apple are going to ‘flatten out’ their 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 Launcher icons given it’s the most obvious port of call. Below 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 (which doesn’t follow Google’s completely-flat Android style – that apps like have done on iOS) suggests to me a direction we might expect Apple to be pushing people.

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 – 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 quite 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 a mimicing of Android, I think it’s fair to say that the idea of needing a button frame to contextualise tappable icons is getting outdated now. There’s been a progessive move by various apps to remove them with 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 perhaps might at least de-emphasise them.

Continuing on from this I’ve even noticed in some key app which have only recently been redesigned, such as Facebook and iOS native music player, that they have removed the back button (the arrow shaped frame containing the word ‘back’) and replaced it with simply an 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, albeit in 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 clean.

I chose the Messages icon simply as it displays the three factors that I believe need addressing in iOS design and specifically 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 also made a simple change to pull the Label text down in boldness to Helvectica Neue Medium and up 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 with me: Twitter / Dribbble / Behance

Reproduced with kind permission from Tim Green. The original post appeared on Medium.