If you’re a web designer then you have likely seen some debate about skeuomorphism and flat design around the web. As with any design trend, there are good and bad implementations of both. The important thing to keep in mind is that there isn’t a right or wrong way to design something. Diversity in design is what makes it compelling. This article is my perspective on the topic and how you can avoid failing while using any design style.
Skeuomorphism is a Double-Edged Sword
Skeuomorphism has undeservingly become a dirty word. Skeuomorphism is an object that retains ornamental design cues from an original item that are no longer necessary. Here are a few examples:
- on your computer interface you store files within a folder, and delete files by putting them in the trash can or recycle bin
- on Apple’s first versions of iOS, the Notes app looks like a yellow pad of paper with a handwriting font
- a lightbulb that is shaped like the flame of a candle
Skeuomorphism can be very helpful by giving the user a cue as to how to interact with an object. A link that looks like a button is a clear indication that it can be pressed. A folder icon indicates that this is a place to store things. Skeuomorphism can also be useful in creating an exceptional user experience. A podcasting app could look like you’re in a broadcasting booth. A music player may look like a jukebox. These elements aren’t necessary, but they do add something to the experience.
The main issue with these type of designs is they often become overindulgent to the point where the design elements are no longer fun or helpful, but obstruct the main functionality of the site or app.
The Rise in Popularity of Flat Design
Flat design has always been around, but it has received a resurgence in popularity (an a shiny new name) with companies like Microsoft, and now Apple, redesigning their interfaces to remove extra ornamentation. Many designers are jumping on the bandwagon. This could be a good thing for design if it is done with the right considerations, but unfortunately it can turn into designers spending less time considering their design. Flat design done right should be about simplicity and focus, which is often something that is harder to do than skeuomorphic design.
How Not to Fail: Using Design Principles
The key to not failing, regardless of what style of design you choose, is sticking to design principles. If you start off by deciding what type of design style you’re going to use, the end product is likely to suffer. Instead, start off by thinking about the purpose of the site and how users will accomplish their goals. If you don’t have this part right, no styling will save your project.
Once you’ve got everything planned out, wireframed, and tested then you can move on to enhancing the interface. When deciding between a more heavily ornamented (possibly skeuomorphic) or flatter design, consider the task at hand. Is this site for fun? Is it business oriented? How complex is the task? Generally, I’d suggest that the more repeatedly the tool will be used and the more task oriented it is, the less ornamentation you should put in the way of your user. A design with lots of textures and depth may be beautiful at first but it gets old very quickly if it’s not completely unobtrusive.
Here are a couple of examples. The iOS Game Center has gotten a lot of complaints because of its skeuomorphic design. It is very design-heavy, but at the same time I don’t know how much (or if at all) that is interrupting its function, so I don’t have such a problem with it. It does feel a little overboard though. The notes app however, I find much more obtrusive. I want to open this app, quickly jot down some ideas, and be able to easily access and read them later. The main issue I have is that, in going for a notepad look, they’ve chosen a font that isn’t very readable. Characters such as a zero and an O or a one and an L can’t be differentiated. The cuteness of having a notepad isn’t worth the loss in usability.
On the flip-side, if you’re going to create a flat design you can’t force things to be flat in-spite of usability. If something is a button, you’d better make sure the user knows that it can be clicked. Sections need to be clearly defined by using font-size, font-weights, color, lines, or other visual cues. When a design is lacking heavy ornamentation, it makes all the layout and design choices more obvious, so you can’t afford to get them wrong. Look at each element you have on your page, is it obvious what purpose and function it serves?
I’m going to pick on Apple a bit more here because they have a few good examples of possible design issues in their iOS 7 Beta. For example, the Voice Memo app used a couple flat buttons that work because they’re prominent and circular, but then they made a third button for ‘Done’ that doesn’t appear to be a button at all. In some places they’ve removed the rounded buttons completely, but at least they’ve used color to communicate what can be clicked.
The key to make sure your design is working is to test it on people. You’ve likely been looking at the design too long to know exactly where any confusion might lie. When working on something new, consider any existing interfaces that users are familiar with. You don’t have to replicate a physical object exactly, but the design can help inform your decisions. If you have the fundamental usability of your interface right the design can be flat, 3d, skeuomorphic, or anything in-between. The key to a good design is balance.
Jason Santa Maria has a good article on the subject “The Space Between the Notes” and Steven Bradley also has an article called “Flat Design Done Wrong“. Here are a couple great books that can help your design in general: The Design of Everyday Things & Universal Principles of Design.
Have any thoughts on the topic or good/bad example of either type of design? Share them below.