What could I design?

What's the best way to adopt flat UI in iOS app design?

  • Since Flat UI is getting more popular. More and more apps are using Flat UI design. Some articles about Flat UI design http://gigaom.com/2013/01/04/mobile-designers-no-longer-see-apple-on-the-forefront-of-ios-design/. http://sachagreif.com/flat-pixels/ As an iOS developer not a designer, I would like to adopt Flat UI in my apps. What's the best way to adopt Flat UI in iOS app design? Let me break down this question. 1. Any Design Guideline for Flat UI design? 2. Any good articles about how to adopt Flat UI in iOS app? 3. Is any open source projects which are using Flat UI design I can refer to? 4. When I apply Flat UI in iOS apps, do I need to code each single part separately, for example, Navigation bar, Tool bar, buttons, app icon? Or I can use global code to reset the whole app to Flat UI. 5. Any good UI Mockups I can use? Thanks in advance.

  • Answer:

    TL;DR: Don't, unless you really know what you're doing and you have a real reason for doing it. Let's start by agreeing to disagree that there is a such thing as *Flat UI Design*. The term is deceiving and superficial. It's just your good old UI Design with another visual flavour. This is not new, we had *Flat Design* since forever and it worked beautifully when the project was a good fit for it. The recent trend is just a response to app designers taking things too far when it comes to UI elements that resemble real life objects (call it *skeuomorphism* if you want). Call it a cry for responsibility amongst UI designers gone terribly wrong. If you want an analogy, read on the birth of the Modernist ideology in art. People thinking the current form of [something] is not good anymore are going to come up with something radically different. While in our case we're just talking about the aesthetic of iOS apps and websites, I believe the analogy stands. There are no specific Design Guidelines for *Flat UI Design*. It's just design and it has to fit your target audience and the type of app you're building. If you don't understand the subtleties of User Interface Design, don't try to just adopt a new trend in your apps. You'll most likely fail. Some quick advice: Aim for a simple not simplistic interface. It doesn't matter if it has gradients or flat bright emerald buttons. As long as it's  intuitive & consistent it's in the right direction. Every interface needs contrast and hierarchy. If you do go the *Flat Design* path, make sure you still respect the basic rules of composition, contrast, colour and typography and keep the app very intuitive and usable. These are universal principles, whatever app aesthetic you choose. There is no real battle between *Flat Design* and *Skeuomorphism*. At least nobody outside our little world knows about it. Use whatever works best for your app. Keep in mind that the vast majority of iOS users have no idea what the hell *Skeuomorphism* or *Flat Design* are. They were exposed to pretty much the same aesthetic in apps since the first time they used their iPhone. Make sure your new visual design still makes sense to your non-designer / non-developer users (of course, given your target audience is not just the tech community). Think really hard if the time you'll invest in adopting a new design trend wouldn't be better used on making your app easier to use, improving usability & the interactions? When in doubt, work with a professional User Interface Designer. Even if only for consulting and guidance purposes.

Radu Ceucă at Quora Visit the source

Was this solution helpful to you?

Other answers

1 & 2. Start with Apple UI Guidelines (https://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/Introduction/Introduction.html) and then follow with iOS 7 Design Resources (https://developer.apple.com/library/prerelease/ios/design/index.html) . Yup, you need an Apple iOS developer account to read the latter one. You can also read "Dieter Rams: As Little Design as Possible", to have a more realistic perspective on what people think of when they think "minimal" design. Then, spend time playing around with iOS 7 and try to understand how it works and what it means. Seriously, question your experience while using the flat iOS and try to answer as to why some things work the way they do, and not the other way. It would be a painful process, but if you can really see why new ways are better than old ones, then you'd be happier when it comes to designing. 3. I haven't seen any open source apps, but there are plenty of examples - https://www.scoutzie.com/search?category=iphone 4. You would probably follow the same standards you had in iOS 6, except adopt the process to the flat UI standards. The guidelines mentioned above should contain all the information. 5. Yup, here's a great set that you can use for free. http://www.teehanlax.com/tools/ios7/ p.s. All said, I wouldn't do this on your own. If you are really not a designer, do the mockups, code them up together so it's functional, but then trust a professional to give you the real deal. Your users will really appreciate it.

Kirill Zubovsky

I love this question and the premise around it. As a designer, it is easy to replicate items from the physical world that we commonly use and adapt them to digital interfaces as they are instantly recognizable and often carry a personal relationship with the user. Now that smartphones and adoptions of iOS and then Android interfaces have brought touch interfaces and understanding to critical mass, the evolution of design for apps will evolve along with the devices we are now used to. I'll back peddle a bit and point out one of the most critical parts of design. Always, design for the user that is going to use the application/device and never for yourself. You first have to make sure that the experience the user is going to receive is the best and simplest experience they will have. I say this because there are thousands of weather, calendar, note, alarm, music, and misc. apps that all do the same basic functions. However, only a few bubble to the top of the pile and trump the others. This is normally because they focus on the core features at a time of release and only the core features. Now marketing and previous mass market appeal have some say but apps that do specific things very well and utilize the platform they are on, win. This is why iPhones stole the smartphone market when it was released, Apple promoted  3 key core features even though the device could do a ton more. The rest of the features played secondary to the main points sold to consumers at initial launch. Flat UI is a great way to get to the core of your product and produce the simplest way a user can interact with it, however it does typically require the developer/creator to simplify the feature set and the ease of use. Sometimes this is not an easy task. One of my favorite examples of apps that do this well is Clear (the todo app). Very basic, simple, and easy to learn. It is also the right solution for the tool it was designed for. Haze, a recently released weather app does something very similar and incorporates a Flat UI premise with information that is very useable and simple to understand. I truly think you shouldn't necessarily seek out a pure Flat UI design for a project just because it's catching on and is currently the newest item on the hot list for design. That is never the correct answer. What you have to do is look at your product, do a demographic, psychographic analysis of your target and secondary markets. Determine why your customer should believe your product is better, and then deliver the first layer of the idea in the simplest way possible. That is where your design & product features start. All too often this gets lost in the quest for a "cool" design rather than innovating ways of improving interface and layout. To answer your questions directly: 1. Not that I'm aware of at this point, but here is another good article about what isn't Skeuomorphic. http://sachagreif.com/what-skeuomorphism-is-and-isnt/ I would look at Helveticons and the Noun Project as good references for icons though. 2. Not that I have seen personally, but I typically develop with Appcelerator and have started using their Alloy framework for more of a top down skinning approach. However all designs start with pen and paper to guide experience and initial user data. 3. There was one here http://designmodo.com/demo/flat-ui/ and while that might help in mobile web, might not be the right answer for iOS and Android dev. 4. Again, based on the design elements and my development I generate global styles for elements I know will have consistent design elements. However it is important to also develop themes for your call to actions. 5. I would look at ThemeForest and CodeCanyon for any templates or ideas. There are several other resources to reference as well. I would also look at the apps you use the most or are the most popular in their categories and what makes them work and not related to design. Hope this helps a bit and answers some questions for you.

Conrad Fuhrman

I released a library to update the UISwitch class to have a flat aesthetic. Pull requests welcome. https://github.com/andrewpbrett/ABFlatSwitch

Andy Brett

Apple is introducing a completely new design language for iOS 7. Apple is giving developers a couple of tips for building “crisp, beautiful UI and fluid motion” for iOS 7 so that third-party apps match Apple’s own style. This means apps should, whenever possible, take advantage of the whole screen, and developers should reconsider the use of insets and visual frames and instead let the content “extend to the edges of the screen.” They should also “reconsider visual indicators of physicality and realism” and avoid bezels, gradients and drop shadows, because that “sometimes lead to heavier UI elements that can overpower the content.

Mayank Sharma

I'm not a developer. I'm a user. Thos response is to provide inform devs what a strong user might look want in general ui. (I certainly do) I will use a comparison between apple mail vs. sparrow on iOS to show specific features I seek out in an app: By far no. 1 is gesture-based interaction. Look at apple mail vs sparrow. How many user inputs does it take to move an email to a folder/tag? How much distance does user have to toto hit those appropriate actions? Settings to expedite actions. A "reply and auto-archive". (And of course settings should be within app, not in settings app) And less settings the better. When performing an action, use icons instead of text. Apple mail reads "delete" in red box after swipe. Sparrow has trash can. This also makes touching correct spot easier bc it's a box shape, not rectangle Related to last, use pop-ups instead of new screen or lists for actions. The new app mailbox uses this well. When acting on an email, choices pop-up above current screen provides actions. If reasonable, use a swipe from left o right from side of screen to go "up" a level. Avoid "back" button. I hope these help. Maybe they are very obvious.. Maybe they are not target audience. But they are absolutely what I appreciate. Who am I? The kind of user that reads this post in quora for pleasure.

David Kay

I designed and built the https://github.com/VAlexander/Chameleon#chameleon-for-ios to make such task simple, efficient, and effective (completely free and open-sourced). Chameleon is a lightweight, yet powerful, flat color framework for iOS. It is built on the idea that software applications should function effortlessly while simultaneously maintaining their beautiful interfaces. Chameleon is the first and only color framework on the market that focuses its full attention and efforts on "flat colors". With Chameleon, you can easily forget about UIColor RGB values, wasting hours figuring out the right color combinations to use in your app, and worrying about whether your text will be readable on the various background colors of your app. Continue reading below to get a quick scoop on some of Chameleon's features: 100% Flat & Gorgeous Chameleon features over 24 hand-picked colors that come in both light and dark shades. Flat Color Schemes Chameleon equips you with 3 different classes of flat color schemes that can be generated from a flat or non-flat color. In the examples below, the white stars indicate the color used to generate the schemes. Analogous Flat Color Scheme Complementary Flat Color Scheme Triadic Flat Color Scheme Color-Aware Text With a plethora of color choices available for text, it's difficult to choose one that all users will appreciate and be able to read. Whether you're in doubt of your text and tint color choices, or afraid to let users customize their profile colors because it may disturb the legibility or usability of the app, you no longer have to worry. With Chameleon, you can ensure that all text stands out independent of the background color. Oh... Chameleon works with the status bar as well. : ) Flatify (Beta) The flatify feature is the most innovative and easy-to-use feature of Chameleon. With only one line of code, every single color on the screen can be converted into the closest flat version of themselves. It works with both storyboard objects and programmatically-created objects. Gradient Colors With iOS 7, Apple mainstreamed flat colors. Now, with the impending release of iOS 8, Chameleon strives to elevate the game. Say 'hello' to gradient colors. Using one line of code, you can easily set any object's color properties to a gradient (background colors, text colors, tint colors, etc). Other features, like Chameleon's contrasting feature, can also be applied to create a seamless product. Experimentation is encouraged, and gutsiness is applauded! Xcode Quick Help Documentation Chameleon's documentation, while written as clearly and concisely as possible (Thank https://github.com/aekwan for that!), may still render some slightly confused. But don't fret! Staying true to our vision of simplifying the entire color process, we added Xcode Quick Help's Documentation Support! Simply highlight a Chameleon method or tap it with three fingers to find out more about what it is and what it does! Storyboard Palette If you're like me and love to use storyboard, Chameleon's got you covered. We've provided you with a quick and easy way to access Chameleon colors right from Storyboard, and any other app that uses the color picker (i.e. TextEdit). https://github.com/VAlexander/Chameleon/blob/master/Extras/Chameleon.dmg?raw=true. Hopefully Chameleon can do the job for you. The framework will only get better with time. In the mean time, I would also love to suggest an awesome design resource by the folks over at Drawar titled, https://www.drawar.com/ios/course/design. It's a great read and completely free. I honestly believe every developer hoping to dwell into design should give it a read. Good luck!

Vicc Alexander

On iOS (6 and below) coding a flat design will be a real hassle, you'll probably end up reimplementing most (if not all) standard UI elements: bar buttons, segmented controls, pickers, action sheets etc... Question is - do you have resources to do that? (and even if you do, is it worth it?) I think has some really good tips for you: "intuitive & consistent", "contrast", "usable". These features are IMHO far more important than trying to implement the flat design by all means.

Błażej Biesiada

Just Added Q & A:

Find solution

For every problem there is a solution! Proved by Solucija.

  • Got an issue and looking for advice?

  • Ask Solucija to search every corner of the Web for help.

  • Get workable solutions and helpful tips in a moment.

Just ask Solucija about an issue you face and immediately get a list of ready solutions, answers and tips from other Internet users. We always provide the most suitable and complete answer to your question at the top, along with a few good alternatives below.