Apr 08, 2013

Skeu'ed: the Great Skeuomorphic Debate

Alex Yee's picture
Alex Yee
Strategy Intern
3 comments

Amidst the bustle of work here at Hot Studio last month, a single email about "Flat UI” sparked a terrific debate about flat vs. “skeuomorphic” user interface design. 

You may be wondering: What is flat UI? And what’s skeuomorphic interface design? Very simply, it’s like this: skeuomorphs, according to Wikipedia, are design elements that resemble another material or technique. Think wood paneling in your family’s rec room, used to give the appearance of real wood. Or, a drop-shadow added to a button on a website in order to give it a three-dimensional appearance. 

Skeuomorphs in the digital realm imitate familiar physical life conditions to help the user understand their function:

Skeumorphic Example: Clean UISkeumorphic Example: Clean UI

Flat UI is a clean and simple way to communicate content without slowing processing time:

Flat UI ExampleFlat UI Example

Skeuomorphs are commonly used in Bootstrap, the web development kit launched by Twitter through GitHub, which has become a popular starting point for many web designers. A flat design uses no skeuomorphs. An example of this can be seen in Flat UI (shown above), another web dev kit created by Design Modo and recently launched through GitHub, which features no gradients or shadows. Hence its name.

As a Strategy Design intern here at Hot, I am still new to the digital design field, and as I watched the Flat-versus-Skeumorphic debate unfold over email, I asked myself whether one design style pointed toward a better future for interface design. Is one style of design leading the future of our interfaces or can all these styles work together in one symbiotic relationship within the UI ecosystem?

On one hand, I hear that "Flat is the new black,” implying this visual and interaction trend will become a standard among new projects, and on another hand I hear that choosing between Flat UI, almost-flat UI, or the use of skeuomorphs is all a user-based case scenario.

The opinions of everyone else at Hot covered a wide range. Here’s some of what the other Hotties had to say...

"Our job is to know what's current and trendy–and how to translate it appropriately so it lasts," said Dani Malik, Principal of User Experience.

The decision should be based less on preference/taste, and more with an emphasis on what your competitors are doing. With that knowledge, one should go against the grain to better separate yourself from everyone else," said Arvi Raquel-Santos, coming from the visual design perspective. He went on to commend Microsoft's use of an all-flat look as an attempt to separate themselves from Apple's distinct dimensional look and feel:

From Apple (left) to Google (center) to Microsoft (right), today’s tech giants are pushing very different visual design aesthetics. Photo credit: http://www.matthewmooredesign.com/almost-flat-design/From Apple (left) to Google (center) to Microsoft (right), today’s tech giants are pushing very different visual design aesthetics. Photo credit: http://www.matthewmooredesign.com/almost-flat-design/

Jon Bradford of Hot, coming from a user experience standpoint, emphasized, "When making this decision you base it on what is appropriate for the client and what the expectations of their customers are. Does it match their brand? Does it fulfill their value prop?

I'm sure Arvi and Jon are talking about the same thing here. With each new client, different sets of needs arise. There are always different competitors, different values of each brand, and different future visions. It is ultimately designers’ job to make sure these strategies are appropriate for each client while managing the expectations of their customers in order to strengthen the brand's public perception.

"We're seeing a shift to more closely align what users expect to experience and what they actually experience when they interact with touchscreen surfaces. While 3D effects are good on the eye, one can't help but feel that there's still a disconnect when one experiences the skeuomorphic UI on a flat surface," writes Moises Olivares, UX and Visual Designer

So where does this leave us? Are stylistic UI's left for only the modern Brancusi's to hand sculpt the perfect design principles for each client's brand identity? 

Skeuomorphic design or not, we must ask ourselves what is right for our clients' brands. If skeuomorphic features cause slower downloading time and jeopardize the efficiency of the website or mobile experience, then the brand's perception will be hurt. 

Our expert on the subject, Bill Fisher, says "Skeuomorphism can tax mobile web browsers because all those images require HTTP requests, and all those CSS gradients and shadows require a lot of inefficient processing. Using shadows and gradients in a web design tends to have a very negative impact on mobile phone animations for this reason. So to expand on the the form follows function idea, we could be seeing a return to flat design because it simply performs better, particularly on limited devices like mobile phones. Not saying that's the only reason, but it might be contributing significantly to the trend."

While I'll leave the debate over the classic principle of "form following function" and vice versa to the professionals, I have to agree with UX designer Mandy Messer, who reminds us that "As long as the focus of design is ‘to let the content sing,’ we're essentially playing in the grey area between the design having no meaning and design having too much meaning."

Thanks Mandy, Paige Saez (who spawned this whole discussion) and all you other ingenious Hotties who have helped me understand the intricacies of this conversation!

I’d love to keep it going. More thoughts on skeuomorphs or flat design? Leave a comment!

See more from "Our Thoughts."

Because you're a Hottie, please log in before commenting:

3 comments

Aceil's picture

Very cool topic! It baffles me that I didn't realize this before, but when mobile apps, for example, keep switching between the 2 styles as they update every week or so it really becomes a mood setter. So I definitely do not know if one style trumps the other, however I definitely agree that there is a context for each...I had this debate unconsciously with our website design company; we ended up with a flat UI design for my real-estate firm because it was more in line with our competitors (and weak designers coupled with superiors who don't experiment much can't amount to creativity)...fail. Now we are adapting it for mobile use but we already know it will be faster to stick to flat UI. Sorry for the sad story, but thank you for the article :)let me know what you think: www.benchmark.com.lb

Ben's picture

Interesting topic, Alex. I usually hate skeumorphs for so many reasons outlined above, but the sublime interfaces seen in the best video games changed my mind. Minus the skeumorphs and music, Plants and Zombies is any of a million other tower defense games. In reality, it's a pleasant game with consistent and thorough skeumorphism. And also a massive best seller.

Aaron Tait's picture

I can't help but think that Flat UI design is a polar reaction to Apple's zealous use of Skeumorphism. The argument against Skeumorphism has typically been one of patronizing users. However, I think that argument is invalid since the people making that argument are more tech savvy than typical end users and thus misconstrue their familiarity with tech as being common with the collective.

As an iOS App designer/developer I strongly favor the use of skeumorphism to convey the tone of the app and help communicate its functionality. Skeumorphism also speaks to the nature of apps as being self-contained "things" that are substantial and persistent. The web has a much more ephemeral nature and I can understand the use of flat design as it lends itself to the fact that the web is composed of transitory pages.

There also seems to be a lot of confusion around the difference between simplicity and minimalism. Simplicity is a design strategy that seeks to reduce an object as to express it's inner (or true) nature. Whereas minimalism is a design aesthetic that simply seeks to reduce visual elements as much as possible. I think we can all agree the simplicity is the end goal of good design.

That being said, some things should be simplified to the point of having a minimal aesthetic. For example, Apple designs their hardware to be incredibly minimal. This serves the nature of hardware as being an unobtrusive window into your information. However, Apple tends to design their apps with rich textures since the device essentially becomes the app. The app is thus responsible for communicating tone, functionality, and thingness.

Post new comment