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

Next Story — Bigger is better… life in the age of the phablet.
Currently Reading - Bigger is better… life in the age of the phablet.

Bigger is better… life in the age of the phablet.


So, with pre-orders for the Nexus 6 starting this week, the Google offering in the ‘phablet’ space, I was thinking about this larger form factor for devices. I’ve held a Samsung Galaxy Note and was a little overwhelmed by it but having had chance to play with an iPhone 6+ it started off a discussion…

This new generation of halfway phone/tablets with beautiful high-resolution screens are where manufacturers seem to be placing their chips. There’s no denying that the incredible, rich displays look fantastic and have a use case for engaging content-consumption but how does that translate to actual, physical interaction. I feel like they could lead to an entirely different user approach to interacting with devices on a simple but quite profound level.

After a laughably unscientific study of myself and some friends/colleagues, it seems that everybody uses their current phone in (and often locked into) portrait mode 90–95% of the time. The ergonomics of holding one of these new phones single-handed and upright takes some large hands or crafty finger positioning. Once you add trying to navigate your thumb towards the home button/navigational buttons you start verging on wobbly. Typing leads you directly into ‘worringly tentative grip’ territory and, given the price of these devices, that’s not the sort of hold I want to have on $500+ worth of phone. One of the ways around this I tried was to hold the phone landscape whilst one-handed and moving around which, for me, worked a lot better for thumb reach and navigation and seemed reasonably secure when doing so.

The input method does dictate that you use two hands due to reach, comfort and speed but that is generally the case in portrait mode too. However, usually the layout of the screen doesn’t make the most of the form factor by splitting the screen or rearranging positions of key functional components.

The issue here is that most apps haven’t traditionally been optimised for landscape mode due to the historical lack of screen length/width. They tend to just be stretched versions of the portrait view or even an extended version on the bottom half of the portrait view. Neither of which are taking advantage of the extended real estate or shape of the screen.

The iOS springboard now functions in landscape mode (well done) and they have started to edge towards this new paradigm with layouts like the Mail.app inbox but it’s still lacking in the majority of use cases and apps.

ALL NEW LANDSCAPE OPTIMISATION! WOO! Thanks to Ryan Lynch for the screenshots.

How should we be building our apps to cope with these larger screens and the possibility of the extended use of landscape view? Could we create our devices to be smarter and be more exactly aware of how we’re holding them?

Where we were once in a position of ‘YOU MUST OPTIMISE FOR TABLET’ for all apps which, although valid, I believe going forward we will see a much larger emphasis also placed upon optimising landscape view for the new generation of phablets. To quote my manager, “it feels like the natural position for the form factor” and that’s going to drive not only innovation but also user behaviour.

If you’ve been using any of the 5+" devices and have any thoughts on this, get in touch in the comments or on twitter @destroywerk

Next Story — Android Popup & Dialog UI
Currently Reading - Android Popup & Dialog UI

Android Popup & Dialog UI

Now we’re talking.

I was reminded with the release of Mailbox for Android of some screenshots of popups I’ve been collecting since January. Amongst all the many details and improvements which have been progressing across native KitKat and 3rd party Android apps, one of the things that has struck me is the popup UI improvements.

L-R: Native Android popups — Date selection in Calendar, Time selector, Repetition in Create Event, Print in Chrome

The clean and clear layouts make taking action easy and are combined with some really interesting and intuitive UX, such as the double-radius circle picker in the ‘select time’ popup.

There’s some very simple but effective design that people have been doing to incorporate their own branding too.

L-R: Mailbox, Dropbox, Runtastic Heartrate Pro, Sol Calendar
L-R: Southern Rail, AirBnB, CloudMagic, Noom

There’s some very simple but beautiful design happening that, even though it’s a temporary modal screen, is important to enhance the feeling of integration and not as though the user is ‘leaving’ the app experience with an Android Holo themed popup. Sol Calendar and Noom are two apps that do this particularly well in my opinion.

One of the trends I’ve noticed starting to creep in is bringing these popups from the base of the screen and full width. It’s a small difference but one that feels modern and clean.

L-R: Photos, Any.Do, Yplan, CamScanner

I believe we’ll start to see more apps using this slide-from-base style of overlay as Android moves forward into it’s next iterations.


UPDATE: Here’s a taster popup of a little project I’ve been working on to explore these ideas — https://www.behance.net/gallery/16571659/Android-Popup-UI

Next Story — Linked smart objects
Currently Reading - Linked smart objects

Linked smart objects

or: In Which Our Hero Falls A Little Bit More In Love With Adobe Photoshop CC

At my work we have long used Smart Objects as a way of keeping complexly structured files reasonably simple but still retaining editability. One of the best examples of this that I can share is within our marketing documents and product images.

For the uninitiated, Smart Objects work by essentially embedding a fully editable Photoshop file (a .psb) inside another (usually .psd) as a single layer. You can open up this file, edit the contents and then return to the original, cleanly organised parent file. If you have good reasons to keep certain files easily accessible to Photoshop novices or are just a bit anally retentive (I refuse to disclose which of these applies to me), then they are a godsend.

However, they are pretty resource-heavy in terms of file size and if you have a number of files essentially using the same smart object but duplicated, such as an app screen on varying product shots, then it can become a pain to go through and edit/replace each one. Photoshop CC’s new feature allows you to not only embed Smart Objects, but also link various psds to the same source psb file.

Check the animated gif below; the file on the far left is a fully editable homescreen .psb file of our Divide app on Android. By changing the wallpaper on that one file it has updated all the other mockups immediately. Now if you work at a startup you’ll know that you have to iterate quickly and from release to release you may go through reasonably noticeable UI changes. This means replacing all those lovingly crafted product shots on the website & marketing documents in a not un-tedious task. Using the linked Smart Objects feature you can create a single .psb file and then place (File > Place Linked) into each mockup/position you need it. When you then edit this single .psb file and save it, and it will automatically update all of those extra product shots you need.

Changing the source document and saving it automatically updates all other marketing product shots.

I know personally that we’ll be making use of this feature in a number of different ways in the Divide design team but I’m sure plenty of people will find this new update indispensible.

If you’re confused or just want a bit more info then Adobe has put together a great little tutorial to explain it.

Nexus 5 .psd with ‘at size’ linked Smart Object app screen

As a simple guide/freebie too, here’s a vectorized Nexus 5 .psd* with linked Smart Object at the correct 1080 x 1920 resolution for you to swap out your own app screens. Try linking another Nexus 5 .psd to the same .psb included here and watch the magic happen.

*Beware that it’s 100+mb.

Next Story — Well, colour me indecisive.
Currently Reading - Well, colour me indecisive.

Well, colour me indecisive.

Using brand colouring for the Android Action Bar.

One of the things that particularly stood out for me regarding the new iOS 7 design style has been the use of bold brand colours for the navigation bars. It’s been made possible, and more appealing, by the move to flat colour and the transparent (or removable) status bar in the new OS. It gives a sense of integration between the app and the OS which, although minor, helps with user acceptance.

Android seemingly should be easily able to handle such brand integration, and it does. Certainly with the new UI style of Android 4.4, which has seen a reduction in the use of the ‘Android Blue’ in favour of white or less natively-branded colours (eg. status bar icons and touch feedback).

Two header styles usually seen in Android apps.

Generally, the Android native UI for the action bar has been a light grey (around #dddddd) with the actual app icon faithfully placed at the top left position to legibly brand the app. But there’s been a move away from this in certain 3rd party apps and even in some of Google’s own apps. A simplified vector of the logo/icon upon a flat colour Action Bar can be seen in apps such as Snapchat, Twitter, Google Play Music and Play Store. It takes from the same styling used in many iOS 7 apps to boldly brand the app navigation and give stark colour contrast to the body content below. Although this can be distracting and wouldn’t work for every brand, it can be implemented effectively; Twitter, Vine, BBC news and Foursquare are examples where the UI is instantly enhanced and recognisable by the bold use of their primary ID colour.

Action Bars from popular 3rd party Android apps; (top down) Twitter, Snapchat, BBC News, Citymapper, Strava, Foursquare, MyFitnessPal, Yahoo Mail, Vine.
Google Play Store, Play Music, Play Newsstand, Play Books, Play Movies & TV.

The way Google’s Play Store app uses the coloured header to distinguish between the various sections of the Store (Apps/Games, Movies & TV, Music, Books, Newsstand) is effective and quick to parse. The separate apps follow these same stylings.

Dropbox uses the coloured Action Bar as a way of incorporating it’s tabular navigation system which I haven’t seen elsewhere but is a clever way of integrating the icon, branding and navigation in a way that frees up extra body space for the content.


Action Bars from; (top down) Gmail, Google Drive, Google+, Google Keep, YouTube, YPlan, Duolingo, Pocket, CloudMagic, Pinterest, Hailo.

The more usual, and traditional, styling we see is the light grey header with either the app icon itself, a reducted version or just a logo. This works much more universally for apps given multi-coloured or oddly shaded logos but also has the advantage of feeling very ‘Android’ and native in style. It fits with the Holo Light theme perfectly (or Holo Dark for the dark grey ones) and gives focus to the content without drawing the eye. It also works in conjuction with the Navigation Drawer UI pattern by keeping the same grey and making the drawer feel aligned visually with the Action Bar. There are subtle edits, even within the Google app suite, which can add to the individuality whilst keeping this light and clean style (Pocket is one of the best examples of this in my opinion).

There seems to be a gradual drift away from this traditional light style in favour of coloured headers. This could be something we see more of in Android 5.0, but for now the clean & light Action Bars have enough legs left in them to be customised to fit well with most app designs; especially ones like Pocket, Pinterest, or indeed any email app, where the entire concept of the app is to ‘get out of the way’ of the content.

It, of course, depends upon the complexity, use case and target audience of your app as to how you style it. The simpler, consumer-orientated apps are taking branding to fuller lengths than more content-orientated products.


**EDIT**

After seeing this report on the purportedly leaked screenshots of the Android Gmail app update (not 100% convinced myself but we saw how that worked out for the iOS 7 doubts), I thought I’d update this post slightly.

Google Keep has just been redesigned and has gone down the route of the Google Play Store styling of using the brand colour as the main Action Bar colour and a simplified white icon in the top left. This does indicate a moving away from the standard light grey headers that we’re used to so could give creedence to the possibility of a major Gmail overhaul.

New Google Keep redesign

The Facebook Messenger app now takes over the Action Bar as a tabular navigation system like Dropbox but uses the base Action Bar as the branded colour indicator (relying on Facebook’s overwhelming familiarity to imply brand).

Facebook Messenger

Another trend we’re starting to see become a lot more prevalent is in-app theming and the coloured Action Bars allows a lot more license for this. As I stated before, it’s a very quick and clear way to get across your brand identity within an app. I guess we’ll have to wait and see what happens with Android 4.5/5.0 until we know for certain but I definitely approve of this move to a clean and bright style.


Let me know your thoughts, I’m intrigued to see what other people think about this. Hit me up on twitter @destroywerk or via destroywerk.com

Sign up to continue reading what matters most to you

Great stories deserve a great audience

Continue reading