This Isn’t Carl Sagan’s “Flatland”: Achieving Flat Design on iOS

Posted by Flatiron School  /  July 27, 2015

This post originally appeared on Cong Sun's blog. Read more at Cong's iOS Study Note.


Think of flat design as the opposite of 3D. Emphasizing “flatness” and two-dimensionality, flat design focuses on “simplifying an interface by removing extra elements such as shadows, bevels, textures, and gradients that create a 3D look” (Awwwards

Emphasizing minimalism, flat design is geared towards improving usability through the use of open space and bright colors that highlight important elements with little to no clutter.

*Caveat– flat design might be “in” right now, but it might not necessarily be the best approach for every project. Ultimately, the design approach should focus on function and usability as opposed to trendy!


Prior to the advent of flat design, skeuomorphism reigned supreme. Skeuomorphism, unlike the abstraction of flat design, incorporated design cues taken from the physical world. Think – folder and computer icons, at first glance you are able to deduce the purpose of those icons. Even with buttons, a simple toggle slider accurately conveys its interactive nature.

Blog post image: yoyo1.jpg

Notice the wood textures and shelves imitating a real bookshelf

However, critics of skeuomorphism denounced the principle, stating that, “its lack of ingenuity and its failure to pioneer designs that truly harness a computer’s superior capabilities, rather than forcing it to merely mimic the behavior of a physical object” (Techopedia

Even Apple was a huge proponent of skeuomorphism until iOS 7 when, under Jony Ives, there was a sharp shift towards flat design.

Blog post image: yoyo2.jpg

iOS 6 on the left compared to the new flat design of iOS 7 on the right

Blog post image: yoyo3.png

Overview of icon design changes in iOS 7


  1. All design elements should be centered around the idea of simplicity.

  2. Bold, bright colors are used to create emphasis around design elements. This website is a great resource for picking the perfect flat UI color.

  3. Focus on typography. Flat designtypically uses sans-serif typography.

  4. UI elements should be clear and noticeable


Blog post image: yoyo5-300x191.png

Example from