Flat Design in iOS

I’m working on a cool iOS app right now. That’s all I can say about the app itself, but I can say how difficult it has been choosing between a ‘flat’ style of design and a softer style with subtle gradients and drop shadows. I’ve been making cases for each in my head, so why not write about them?

In support of flat design

If you’ve been keeping close attention on my Dribbble page, you’ll notice that my designs have become more and more minimalistic. This isn’t because I’m addicted to the so-called fad of flat design, as coined by Allan Grinshtein (as a side note, you really should check out Designer News), but because of my need for something different, and less ostentatious than what I’ve been seeing on Dribbble and the App Store. In my own interpretation of flat design, I wanted to include subtleties so that it wouldn’t be as cold as Windows 8, while maintaining the crisp, colorful vibrance of a native iOS app.

But the main downside to this style was the way it looked on the iPhone. The tab bar I originally created for this app had only three icons, but there needed to be four. For some strange reason, adding one more icon makes the tab bar cluttered, and when you add the text below each icon (which is something I utterly despise), it becomes a total mess. Why is this? Three seems to be the magic number, in the way that you have one primary center tab, and two secondary tabs to the left and right. Five also seems to be a good number, because you end up with four secondary tabs. But when you have a tab bar with four icons, you don’t have the ability to mark primary and secondary icons. This is fine when you aren’t making a social app, but when there is a major action associated with your app (such as taking a picture) it should be the centered keystone in your tab bar.

Apart from the tab bar, there were also annoyances with spacing and the look of the navigation bars, especially in search views. The search bars you see above look very different, not only because of their styling, but because of their spacing. The search bar on the left has no styling, making it seem slightly larger in comparison to the one on the right, which is styled in a subtle way (both examples are the same size).

In support of a softer design style

The first reason I can think of in support of this approach is its familiarity. Facebook and Instagram have embraced this style of soft gradients and pressed text (think 90 degree white drop shadow on dark text on an off-white background). The drop shadows and light inner shadows on list items implies that they’re tappable, instead of creating a confusing experience by replicating the styling of the navigation bar (flat styling only distinguishes items based on their color, border, or shade). The apps I use that master this style are Fancy, Readability, Twitter, and Wunderlist. Clear is also a good example of this approach, although I’ll abstain from including it in this article because I feel it’s an overused example.

When using a softer design style, tab bars and list items feel tappable, and your app feels more refined to less design-oriented users. This may be why Microsoft’s efforts haven’t been as fruitful as Apple’s and Google’s.

What am I going with?

For this app I’m working on, I’m going with a combination, but it reflects more of the latter style’s traits. Why? Because I feel it will be not only more user-friendly, but better suited to this platform.

Feel free to discuss these ramblings with me on Twitter. Please be nice.