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

You’re closer than you think to a career in tech. Our grads have launched rewarding new careers — you can too.

View Our Jobs Report

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.


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.


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


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



Example from

Headshot of Flatiron School

Flatiron School

Blog Post Author

Read More Flatiron School Articles

Since we opened our doors in 2012, thousands of students have joined Flatiron School to launch new careers in tech.

Explore our Courses

Find the perfect course for you across our in-person and online programs designed to power your career change.

Explore Our Courses
Join a Community

Connect with students and staff at meetups, lectures, and demos – on campus and online.

Join the Community
Schedule a Chat

Have a question about our programs? Our admissions team is here to help.

Schedule a Chat