Learning To Code

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

Flatiron School / 27 July 2015
SHARE:

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

WHAT IS FLAT DESIGN?

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 http://www.awwwards.com/flat-design-an-in-depth-look.html).

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!

THE RISE

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.

yoyo1

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 http://www.techopedia.com/definition/28955/skeuomorphism).

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

yoyo2

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

yoyo3

Overview of icon design changes in iOS 7

HOW TO ACHIEVE FLAT DESIGN

  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 design typically uses sans-serif typography.
  4. UI elements should be clear and noticeable

ADDITIONAL RESOURCES


yoyo4 
yoyo5

Example from skeumorphism.it

Woman Crush Wednesday: Hannah Nordgren [Q&A] Previous Post Fusion Features Two Kode with Karlie Scholars Next Post