We stand with Ukraine and our team members from Ukraine.

The Community Of Over 640,000

Home ›› Business Value and ROI ›› 6 Key Questions to Guide International UX Research ›› small_16 ›› A Look at Flat Design and Why It’s Significant

A Look at Flat Design and Why It’s Significant

by Luke Clum
5 min read
Share this post on
Tweet
Share
Post
Share
Email
Print

Save

By eschewing the design limitations of skeuomorphism and embracing the limitations of digital experiences, flat design has the potential to create great UX.

 

There has been a growing tidal wave of flat designs on the web, and recent trend reports have confirmed that they’re only increasing in popularity.

Of course it’s easy to dismiss flat design as yet another fleeting aesthetic trend.

But further investigation into this new philosophy reveals that flat design is a lot more than “just for looks.”

 

What is Flat Design?

Flat design can be seen as the more sophisticated and versatile cousin of minimalism. While flat designs look great when made within the restraints of minimalism, they can also handle a lot more complexity; these designs have a crispness and clarity that can only be achieved by stripping away three dimensional effects. In its essence, flat design has two objectives:

  • Embracing the limits of the screen and working within those parameters rather than trying to disguise them.
  • Using this newfound simplicity as a starting point for streamlining designs, and making websites faster and more functional.

Flat design doesn’t necessarily mean that anything hinting at dimensionality is out of place. For example, this website features an angled illustration with a clear perspective. But the overall trajectory of the trend is towards simplicity and minimalism. The buttons are plain fields of color with sharp corners. There’s not a drop shadow, beveled edge, or gradient to be seen.

Flat Design as a Response to the Problems of Skeumorphism

For every action, there is a reaction. And in the world of digital design, flat imagery is cropping up more, in part as a reaction against skeumorphism. But flat design is more than just an artistic treatment; it’s a response to the serious functionality issues that skeuomorphism presents.

What is Skeuomorphism?

If you’re unfamiliar with the term, skeuomorphism is the practice of incorporating the look of an object that was made in another material into a design: what was once functionality becomes ornamentation. The reference is meant to evoke a sense of familiarity when encountering a new concept/tool/app online. This principle of imitation is all around us; a plastic chair that duplicates the shape of its wooden original is a good example how it manifests itself in the real world.

In the digital world, skeuomorphism is often associated with Apple products, which provide a great example of how it often looks in digital design. Just take a look at Apple‘s dashboard design:

  • The obvious components: The calculator, clock, and calendar are digital illustrations of their real-world counterparts.
  • The subtle details: The drop shadows and beveled buttons, the textured background, and even the shuddering movement of the second hand on the clock are also made to mirror physical products.
The Problems with Skeuomorphism

While there’s something to be said for the philosophy of skeuomorphism, there are a lot of issues that come with using it in digital design. For example, the analog clock featured in Apple’s dashboard is harder to read than its digital alternative, and it’s much more time-consuming to click the buttons on the calculator then it is to simply key them into the Spotlight function that also comes with Apple products. There are actually quite a few problems that arise with adhering to skeuomorphism:

  • By sticking to standards that are irrelevant in a digital format, skeuomorphism limits creativity and functionality.
  • Skeuomorphic elements look inconsistent when combined with less dimensional elements, and often the imitations don’t even make logical sense. For example, Apple’s Find My Friends app has a background that’s made to look like stitched leather. But this element has no relation to any real-world reference.
  • Skeuomorphic elements can take up valuable screen space and loading time with functionless embellishments.
  • They also tend to look wrong when combined with anything else that isn’t treated with skeuomorphic effects, limiting the entire design as well as any particular element.
The Solution Found in Flat Design

The response of flat design makes is to embrace the real limitations of the digital experience, and to do away with the imposed limitations of skeuomorphism. Anything on a screen will never truly look three dimensional, so why not embrace the beauty (and accompanying increase in functionality) that comes from stripping away illusory decoration?

Example #1:

Example #2:

Take the above examples of LayerVault’s website: example #1, the older design, shows a very detailed and elaborate illustration in the skeuomorphic style, which as previously mentioned, looks wrong in combination with the flat, clean appearance of the rest of the site. Compare it with the flat illustrative style of the new design, example #2, and there’s no contest as to which is more compelling and functional. The original illustration is distracting without being informative, while the modified one guides the eye to important information without eclipsing it.

Flat Design Harmonizes and Builds on the Goals of Skeuomorphism and Minimalism

The elements that bring flat design beyond a passing trend into a lasting and comprehensive strategy are twofold:

  • Flat design is tailored to fit an on-screen experience, as opposed to earlier styles which were made to mimic a physical experience.
  • That tailoring lends itself perfectly to enhancing the user experience in a number of ways.

Flat design takes the best aspects of minimalism and skeuomorphism and makes them work together. Like skeuomorphism, flat design looks friendly and approachable to users. But it does this by presenting a clear and engaging interface, rather than disguising and warping that interface to mimic something familiar. Like minimalism, flat design strips down visual elements to expose their essential functionality. But it’s not as restrictive in the way it does this; as demonstrated above, the importance of ornamentation is recognized and utilized.

Flat Design is the Perfect Style for Great UX

Flat design not only reconciles the goals of minimalism and skeuomorphism, it also is uniquely adaptable to usability considerations. By shedding unnecessary styling, it makes for speedier pages, cleaner code, and easy adaptability. It also lends itself beautifully to every type of application; whether viewed on a desktop or a mobile screen, flat design is always legible and adaptable.

Flat Design is Endlessly Adaptable

Example #1:

Example #2:

To see how simply and beautifully these applications can be integrated with each other, take a look at the design of Windows Phone, in examples #1 and #2 above. The company has chosen to be a key player in the movement away from a look that has been closely associated with Apple, and its decision is paying off in a great interface; bright color blocking is used in both to designate sections, and all the typography and imagery looks elegant and integrated.

Conclusion

Flat design has all the key attributes that make a site as functional as it is beautiful. It recognizes that a sense of familiarity is important to the user experience, but it creates this sense in a way that fits with the medium. At the same time, it’s able to adapt to new discoveries, trends, and ideas. Flat design brings us a step closer to a new paradigm of digital design, where the functionality and aesthetic are in complete harmony.

 

Image of linguine courtesy Shutterstock.

 

post authorLuke Clum

Luke Clum,

Luke Clum is a Seattle based creative specializing in digital design and video. He also runs a TV and movie blog The Best of Hulu.

Tweet
Share
Post
Share
Email
Print

Related Articles

Building effective partnerships with PMs requires stepping outside of any frustration, ego, or resentment at being ignored, and building empathy. How to do that? Here is what we’re going to find out.

How To Research So PMs Will Listen
  • PMs are the most critical audiences for research, they are also often the hardest to convince, and the source of many of researchers’ frustrations and heartaches.
  • Building effective partnerships with PMs requires stepping outside of any frustration, ego, or resentment at being ignored, and building empathy.
  • The author shares:
    • Some practices of working with PMs
    • Questions to ask PMs and stakeholders
  • The baseline expectation setting:
    • Level set
    • Set guardrails based on your role
    • Ask for candid feedback and engagement
    • No surprises
  • When researchers and PMs are in conflict or in separate silos, neither role gets the value of the other, but strong researcher-pm partnerships can be game-changing for extending the strategic impact and influence of both design and research.
Share:How To Research So PMs Will Listen
6 min read
How to research so PMs will listen
How To Empower An Organization Through Design?
  • The author believes that the following reasons are why design/branding/marketing agencies end up damaging the image of design as a tool for getting results:
    • Lots of jargon and little to no action at a fundamental level.
    • Large companies with “foolproof” processes.
    • Fake cases and invented touch points
    • Romanticized view of consumers
  • In order to centralize an organization, designers need to map its interdependence relationships and understand how a project can strengthen all sectors in an equal way.
Share:How To Empower An Organization Through Design?
4 min read
How to empower an organization through design?

And, Is OneReach Under The Radar By Design?

Is OneReach AI The Tesla Of Conversational AI?
  • The author gives his perspective on OneReach.ai as the top scorer in the Gartner 2022 report.
  • The author believes OneReach.ai to be one of the most granular no-code environments that support an exceptional degree of fine tuning.
  • The author refers to the platform as an orchestration canvas, where multiple processes can be orchestrated for multi-dimensional customer service, and gives some details on how the platform works as a single front-door for customers.
  • Cobus Greyling explores two cautions from Gartner about the OneReach.ai platform.
  • He concludes that voice is a strength of OneReach.ai and the company has extreme focus on customer experience, and orchestrating experiences
Share:Is OneReach AI The Tesla Of Conversational AI?
4 min read
Is OneReach AI The Tesla Of Conversational AI?

This website uses cookies to ensure you get the best experience on our website. Check our privacy policy and