“Flat” is a byword in design these days, particularly in interface design for apps and websites, but that wasn’t always the case. Before we became obsessed with the geometrical starkness of brightly colored two-dimensional shapes, digital design was heavily informed by the concept of skeuomorphism: design that mimics the look and/or function of physical objects.
Think of a video poker game whose screen presents a faux “felt” texture for the playing surface, or a digital knob that can be “turned” to a desired setting. Even more basically, there’s your desktop’s trash icon — a picture of a garbage can making it clear that this is how you dispose of unwanted files.
In the early days of computing, even fundamental concepts like dragging, opening, and maximizing windows were foreign to most users. That’s why designers leaned on real-world imagery to clue them in on what they should be doing onscreen.
But those days are now ancient history. Modern kids are certified digital natives, weaned on pointers, icons, links, scroll bars, and touchscreens. Toddlers figure out how to use an iPad in a week, and master it before they learn to walk. Even the older generations are slowly catching on, as the usefulness of technologies like smartphones and social networks are converting them into superusers as well.
That’s why recent years have seen skeuomorphism start to give way to flatter, less clunky design approaches. The question is: How flat is too flat?
Form Vs. Function
While skeuomorphism is a powerful tool for making interfaces less inscrutable to newbies, as a digital design language, it has several drawbacks.
For starters, it takes up a lot of screen real estate. Consider a digital bookshelf like that we find in iBooks or the Kindle, which apes a real-life bookshelf, complete with images of leather-backed tomes and hefty wood panels. The design looks nice and simple — but it also severely limits how much information can be displayed at any one time.
Real-world designs are also typically difficult to scale. Once upon a time, we were all using desktop monitors that were of similar sizes and aspect ratios. Today, though, designers are expected to craft interfaces that can adapt instantly to desktop, mobile, and now even tiny wearable screen sizes. Once they’re miniaturized, those beautiful wood burls you designed for your big onscreen bookshelf don’t necessarily look like anything anymore.
As designer Howard Belk told Wired: “With wearables and things like that, they have to work on tinier and tinier scales. Skeuomorphism starts to break down when it gets that small.”
iShapes
The early iPhone operating systems were rife with skeuomorphism. Back in 2007 when the first iPhone launched, the nascent smartphone market was ruled by the Blackberry, which had an actual tiny physical keyboard. The industry at the time believed that a pure touchscreen interface would be too alien for users to adopt.
Both Steve Jobs and Scott Forstall, lead developer for the first iPhone and iPad, thought that a full touchscreen could work, though — if it had enough obvious visual clues for the users to follow. So buttons were given three-dimensionality, making them look raised to indicate that they were meant to be pressed; notepads were given papery yellow textures; and so on.
Their plan worked. Apple’s iDevices quickly dominated the marketplace. But that success also sowed the seeds for the end of skeuomorphic-heavy design.
By 2013, a mere six years after the original iPhone was released, users were well acquainted with touchscreen interfaces. Many within Apple felt it was time to abandon the training wheels of physicality and fully embrace the digital nature of their product.
Additionally, their faux-stylings were starting to draw some gibes from the design community. According to an article in “New York Occasions,” iPad apps often had borders with ”…tan pretend-animal pores and skin that a few critics have paradoxically referred to as Corinthian leather-based, after the upholstery utilized in Chrysler automobiles within the Nineteen Seventies.”
Scott Forstall left the company in October of 2012, and designer Jony Ive, who would go on to become Apple’s Chief Design Officer, made a strong push for change. For the 2013 release of iOS 7, an entirely new design language was introduced that opted for “flat” concepts instead.
Ive’s mission was to streamline the interface down to bare essentials. Shadows, rich textures, and bevels were dropped in favor of, sharp lines, solid shapes, bright colors, and crisp typography.
The interface was built from the ground up to convey a maximum of information with a minimum of embellishments. It was clean, scalable, and fast: everything skeuomorphic wasn’t.
Metro
Microsoft also deserves some of the credit for digital designers’ move away from skeuomorphism. Though it failed to dethrone the iPod in 2006 with its Zune music player, the cutting-edge design interface the Zune sported served as a testing ground for flat design. Its monochromatic shapes, sharp edges, and large, narrow, sans serif typography would find their way into the 2010 Windows Phone 7 and eventually serve as the foundation for the “Metro” design language of 2012’s Windows 8 release.
In the ensuing years, it seems that every major website and company has taken a second look at their designs and stripped away as much artifice as possible and hammered down all the parts that stood up. Consider the Starbucks mermaid, which has spent 40 years being stylized into a flatter and flatter design.
Everything Old is New Again
But perhaps designers tossed aside skeuomorphism too aggressively. The new flat look was beautiful and functional, but lacked the ease of use and charm of its predecessor. In fact, a usability test of Windows 8’s flat interface found “that users had difficulty in distinguishing actionable objects from non-actionable ones.”
It’s also become so ubiquitous as to be barely noticeable. It’s hard to stand out when you look just like everyone else.
Google apparently thought it was time to tweak the formula when it codified its own overarching design language, dubbed “Material Design” in 2014. Its design philosophy, modeled after layered sheets of construction paper, still embraced flatness, but added back some of the dimensionality of skeuomorphism like drop shadows and depth effects.
“That users had difficulty in distinguishing actionable objects from non-actionable ones.”
The end result has been called “Semi-Flat,” “Post-Flat,” and “Flat 2.0.” Designer Matías Duarte explained that, “unlike real paper, our digital material can expand and reform intelligently. Material has physical surfaces and edges. Seams and shadows provide meaning about what you can touch.”
Post-Flat design intends to merge the two sometimes seemingly opposed concepts, minimalism and functionality, in one. According to designer Wells Riley: “Without strict visual requirements associated with flat design, post-flat offers designers tons of variety to explore new aesthetics — informed by the best qualities of skeuomorphic and flat design.”
Even Apple hasn’t fully abandoned the use of visual cues: “Shadows, in fact, are a key element of skeuomorphism in flat design, because they tell us the spatial context of visual elements. This, together with the liberally applied parallax and blurring effects in system-wide interactions, give a very real-life (read: skeuomorphic) quality to the virtual interface of iOS 7+.”
Now that we’ve gotten over the rush to squash everything flat as a pancake, designers are realizing that the best aesthetic choices serve the underlying material first, and that two seemingly opposites schools of design can coexist harmoniously.