Skeuomorphism, Flat Design & Almost Flat Design04/15/2013
Skeuomorphism is a design style made to resemble real-life materials, like textiles or knobs. Examples include the simulated woodgrain you see on an old station wagon and Garage Band, the iPad app (shown below). Using skeuomorphism in this case is actually useful because it takes a familiar interface for musicians (keys on a piano, strings on a violin, etc) and digitally represents them visually as the interactive elements. It’s the interface that gets to the user’s experience (UX) with the design, brand, and the emotive response (eg online behavior of the user) the brand wants the user to do or act.
Flat design, by contrast is a minimalistic design approach that emphasizes usability. It features clean, open space, crisp edges, bright colors, and two-dimensional/flat illustrations. Currently it is being held as the revolutionary solution to skeuomorphism but it has been around for a while and it is not revolutionary. Google and Facebook, for example, have employed this style too. With the launch of Microsoft Windows 8 (pictured below) taking flat design to a whole new level, many in the community saw it as a backlash to skeuomorphism.
The argument for flat-design over skeuomorphism is that it is minimal, simple and cuts out all the unnecessary giving it a clean look. It can, however, be poor UX if the design is executed in a way that doesn’t allow for flow, or is not intuitive. Elements like a button (examples below) might not have any visual cues for the user to know that it’s actually a button.
The argument for skeuomorphism is that it is a realistic representation of what one interacts with in the real world, making it feel more intuitive. Where skeuomorphism fails is when it’s aesthetic appeal can become visually heavy and bloated like the extreme example below.
A great middle-road approach to take is what is being called “almost flat-design” where the style takes on that clean, bold look of flat design while also incorporating the visual cues of interaction that is so inherent in skeuomorphism. Take a look at the example below, pictured is a screenshot of the facebook app on my iPhone. Notice the subtle shading to denote layers. Subtle gradients show a little bit of depth. The news feed indicates that it is selected because of the use of a darker shade of the menu color.
Whether skeuomorphism, flat design, or almost flat design, these design trends are very strong right now in the web design space. They are great examples and I am excited that they happen to be in right now, because skeuomorphism and flat design are complete opposites of each other as far as style is concerned. They might be the style du jour but that doesn’t mean either one is a style that will work for your site. To put it simply, as with any trend, it is best to execute with an ability of out-lasting its own trendiness or to not execute it at all. Whichever way you go, pure flat-design, skeuomorphism, or some place right in the middle, it has to be built with the user’s experience (UX) in mind. If you are designing one for trend-sake, keep in mind that good design transcends style.