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 UI
Flat UI is a clean and simple way to communicate content without slowing processing time:
Flat 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/
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!