Overview

Throughout the relatively short history of the 21st century, design has changed drastically. From the skeuomorphic designs of the mid-2000’s, to flat design, material, and finally the recent resurgence of “morphic” derivations such as neumorph and glassmorph.

Make no mistake; in its day skeuomorphic design was considered the absolute pinnacle of UI implementation. It was complex, difficult to achieve, and when done correctly, created interfaces that had a richness that is distinctly lacking in much modern UI.

Today, we’ll cover why skeuomorphic design fell out of favor, and why it’s starting to make a comeback.

The mid-2000’s

Back when Flash sites still roamed the earth, InvisionFree boards were all the rage, and the closest thing you had to Facebook was MySpace, there was a time when most of the web looked a lot like FL Studio’s interface.

As companies and designers alike jockeyed for design supremacy, the advent of Flash and Shockwave for rich online experiences spurred the development of highly interactive Flash websites that served as a tour-de-force for any company looking to stand out from the crowd.

Not bad for an implementation that’s over 20 years old, and these examples are only scratching the surface. At one point, there were sites that leveraged pre-rendered 3D assets to create effects that it would take WebGL decades to catch up with.

It was the wild west of the early internet days, but to be honest with you, in many ways it was beautiful.

So what gives? Where are the flying cars and design utopia we were promised? What the hell happened?

Let’s talk about it.

The downfall of skeuomorph

What led to the collapse of skeuomorphic design was actually a combination of multiple factors that put pressure on the aesthetic implementation of richer interfaces.

The 2008 collapse

Many companies that were working on cutting-edge design techniques, principles, and practices that pushed the frontiers of web, UI, and UX design forward were wiped out in the deluge what was the ’08 collapse.

In the years after the recession, the few companies that survived consolidated their power and created pockets of monopolies that controlled ever-growing swaths of the internet.

Because of Jakob’s Law, their standards were often adopted by other companies who leveraged the design implementation of their competitors in a desperate bid to maintain market relevancy during a time when consumer spending was at a historic low.

But that was just a nail, the actual coffin of skeuomorphic design is just below.

Mobile loading

The real killer of skeuomorphic design was the death of advent of the mobile web. The problem with early generation phones is that they had very poor specs when compared to what we have today.

Cellular networks were also not super great at transmitting large volumes of image data back and forth, so page load times suffered immensely, or had features that just weren’t supported at all.

This led to many companies completely overhauling their design approaches to cater to the mobile web, and adopt a “mobile-first” design mentality, the idea behind that being: “it has to work on phone before it can work on desktop.”

In turn, this created a rift between native designers, web designers, and those that attempted to bridge the gap between the two through responsive and adaptive site designs.

As the dust settled, certain web design libraries/frameworks came to the forefront such as Twitter’s Bootstrap, Foundation, Bulma, and Tailwind (to name just a few) that were created to help product teams get responsive, scalable designs out the door more quickly.

That said, we had to sacrifice some of the richness that skeuomorphic design allowed for on desktops with higher processing power.

Scalability

Another massive issue with skeuomorphic design is that most of them had to be one-offs, because scaling a design system with bitmaps as the base absolutely sucked.

Buttons didn’t flex because they couldn’t flex, and you could do some trickery with CSS to make them look pretty nice, but the skeuomorphic effects that people had come to expect (such as rounded shines on buttons that tucked at oblique angles and curves, or amorphous bitmap gradients) began to fall by the wayside in favor of a more streamlined approach in the form of both flat and material design.

Both flat and material design allowed for greater design operations at scale and greatly simplified the process of creating design specifications for components across companies of disparate teams.

The result was, and still is in many cases, a solid foundation with little room for design innovation outside of the system’s language, paradigms, and internal guidelines for a variety of reasons including aesthetic uniformity, and cross-device performance.

Barrier to entry

But the problems didn’t end there. Along with being a massive challenge to implement at scale, skeuomorphic design set a super high bar for new designers coming into the industry.

Back then it was expected that you could do it and do it well, and most design approaches were geared towards rich UI that was generally flash-based.

The death of Flash

Speaking of Flash, that was probably the final nail in the coffin of skeuomorphic design. As industries pivoted away from rich UI that was time consuming and potentially expensive to implement, adoption of alternative technologies, along with the advent of the HTML5 specification rendered a good chunk of the content made with Flash obsolete.

Gaping security holes combined with a lack of support from Apple dealt a death-blow to the once proud Flash, and after years of circling the proverbial drain, it was finally decommissioned by Adobe in 2017.

The idea was that most designers and developers would use the newer HTML5 specifications rather than relying on Flash, and would move to the newly-appointed Adobe Animate to create new rich content on the web.

The pivot to flat and material design

The pivot away from skeuomorphic design approaches towards flat and material implementations realized quite a few advantages both commercially and technically.

Faster loading

First and foremost, flat design is relatively simple to implement, with minimal gradients, bitmaps, and additional assets. This allows page load times to remain blisteringly fast while providing consistent UI presentations cross-platform, and cross-product.

Less complex

Another massive advantage is that flat and material design specifications are in many ways less complex than their skeuomorphic counterparts.

Lower barrier to entry

Lastly, flat and material design methodologies are well-documented, have multiple dedicated libraries/design systems backing them up, and are much more approachable for beginners just getting into design.

There’s no need to manage amorphous gradients, heavily-layered specifications, non-compliant components, etc.

Just grab specs, customize to suit needs, create components as-needed with respect to specification, and send it.

The long-awaited comeback

There have been a large amount of designers, myself included, who have been patiently waiting for skeuomorph to make a comeback. Now, it’s looking like that time has, in many ways, finally come.

Scalable vector graphics (SVGs)

On the web and native devices alike, we are finally seeing large-scale support of scalable vector graphics. This allows us as designers to specify aesthetically rich components with constraints and specifications in a way that just wasn’t possible years ago.

Yeah, you couldn’t do this back in the day.

Better phones

Phone hardware has absolutely exploded in both complexity and processing power in the last ten years, which lends itself incredibly well to creating interfaces that leverage spec-heavy designs.

You no longer have to settle for fast vs rich, now you can have a whole lot more of both in a more optimized fashion.

Fresher perspectives

After the wild west that was the early days of rich web UI, people were pretty turned off by interfaces and experiences that put aesthetic considerations over users, and rightfully so.

Users both deserve and expect interfaces that are accessible, flexible, robust, and fault-tolerant. The best styles of design are the ones that can make that happen, so skeuomorph has an excellent opportunity to reinvent itself here.

AR/VR applications

Lastly, skeuomorphic design lends itself incredibly well to both AR and VR applications because, in many cases, skeuomorphism never left gaming, and the lion’s share of AR/VR interface development has been in the gaming sphere.

We will more than likely finally see large-scale fusion between gaming interfaces, working interfaces, and general interfaces into one, continuous specification that applies multiple styles as-needed for specific use-cases.

The new “morphic” derivatives

To that end, we’ve seen a resurgence in skeuomorphic patterns and morphic derivatives that seek to add richness to interfaces without sacrificing accessibility or performance.

There are a plethora of new morphic derivatives, including neumorphism, glassmorphism, and aurora to name just a few.

Bringing it all together

So what does this all mean for you as a designer?

1. Flat and material design approaches probably aren’t going anywhere.
2. That said, skeuomorphic designs are gaining traction so it may be wise to familiarize yourself with modern morphic techniques.
3. We will more than likely see more skeuo, neu, glass, and more derivatives in the AR/VR space.
4. This time around we have a much better shot of leveraging skeuomorphic designs to create interfaces that work well for more people, are more accessible, and drive better overall experiences.

Additionally, there’s some additional resources on the topic in case you’re interested in learning more about skeuomorph, and how to implement it in your own designs.