Flat Interface Design

November 12, 2012

I love it when I really want to learn about a topic, then I find a spot-on article about that topic. Such was the case a bit ago, when I found this fantastic article covering flat interface design.

What is flat interface design? It doesn’t have a dictionary definition per se, but could be summarized in the phrase, “an interface that exclusively uses shapes and solid colors, instead of textures and gradients, to define the user experience”. Great examples of flat interface design are apps like Letterpress and Clear.

I have been really drawn to flat interface design because of how clean and elegant these interfaces can be when implemented effectively. Counter to flat design is skeuomorphic design, which copies aspects of physical interfaces like leather stitching, torn paper pages, and shiny reflective buttons. One of the problems with skeuomorphic design is that these interfaces can become constrained by reality, or not able to do things because the physical thing the design emulates does not function in the way that is desired in the skeuomorphic design.

It may seem that designing flat interfaces is easier than the work that goes into the richly textured and embellished skeuomorphic interfaces that are so prevalent today, but actually the converse can be true. With none of the comfortable and ubiquitous elements like gradients and textures to support a design, it becomes harder to communicate to a user that, say, a button is clickable. In short, a lot of thought has to go into each element of a flat interface to clearly communicate to the user what it’s function is.

A quote from above article: “Remove the unnecessary embellishments and keep stripping until you’ve almost gone too far … elegant interfaces are ones that have the most impact with the fewest elements.” Great advice, but a friend reminded me recently that the approach requires a very solid understanding of your objective, and that stripping something too far will result in the interface not working the way you intend.
Really, that’s the goal of interface design; to be the perfect balance of beauty and usability, and it’s the designer’s job to strive towards that goal.

2 thoughts on “Flat Interface Design

  1. Wow, Wesley! I seriously had no clue what you were talking about when I first started reading your post, but now that I’m done, I have definitely learned something new! Not that I could design a site, but if someone mentions flat interface design, I’ll at least look a little more, um, “intelligent” concerning technology. :) Thanks for taking time to write this article! :) One quick question…is your blog a flat interface design?

Comments are closed.