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.
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!
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 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.
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
HOW TO ACHIEVE FLAT DESIGN
All design elements should be centered around the idea of simplicity.
Bold, bright colors are used to create emphasis around design elements. This website is a great resource for picking the perfect flat UI color.
Focus on typography. Flat designtypically uses sans-serif typography.
UI elements should be clear and noticeable
Skeumorphism.it – Photoshop extension that’ll convert graphic assets to “flat design”
Example from skeumorphism.it
Blog Post Author
Since we opened our doors in 2012, thousands of students have joined Flatiron School to launch new careers in tech.
Find the perfect course for you across our in-person and online programs designed to power your career change.
Connect with students and staff at meetups, lectures, and demos – on campus and online.
Have a question about our programs? Our admissions team is here to help.