Skeuomorphic web design, with its realistic and detailed interface was, at one point, all the rage. But now, times are changing and design trends are changing with it.
Apple, for example, a company that once thrived on skeuomorphic design principles, is now opting for flat design application icons. What would Steve Jobs say to this? After all, he was known to love skeuomorphism saying "We made the buttons on the screen look so good you'll want to lick them."
Skeuomorphic web design versus flat design is a growing debate in the design world today.
Some would argue that flat design is more attractive to users now thanks to its simplicity and clean design. Others would say, the details of skeuomorphic design is more appealing to users.
Today, we will be comparing these two designs side by side and, in turn, we will hopefully prove that skeuomorphism is in fact here to stay!
Simulated woodgrain is an example of skeuomorphism. Photo by Rex Gray, Flickr.
Skeuomorphism is a design strategy where a real object is essentially duplicated in its visual design. Check out some examples here.
Essentially, skeuomorphic web design creates 3-D visuals in a 2-D space. Think of a button which lowers when pressed and pops back up when released.
Another example, take the trashcan icon on a MacBook desktop. This is probably the most recognized skeuomorphic design concept. The Macbook trashcan reflects a trashcan in real life in shape, color, shadows, and in depth.
This is all thanks to skeuomorphic web design.
That said, the category of skeuomorphism is vast. One can even consider non-visual cues to fall under this title. For example, the sound effect of a page turn in your e-book or the shutter sound of a camera.
Steve Jobs is more or less the father of skeuomorphic web design. He brought it back from the dead in an attempt to make Apple products more intuitive to his users. When customers saw icons on the computer that they identified with in daily life, it made the interface that much easier to use.
The Web has become so cluttered that users frequently become turned off when too many elements on a web page compete for their attention. The simplicity of flat design is often easier on the eyes.
Flat design tends to be more responsive: Icons scale to different viewports easily if they are simple vector graphics.
In addition, another challenge with making icons resemble their real-life counterparts, is that objects sometimes become obsolete, which means design must keep up and change accordingly.
We often see a Floppy Disk icon, for instance, used for the Save action. Unfortunately, today, most millennials would not recognize a floppy disk if they saw one. It just doesn't translate.
As a result, not only is flat design simpler to use, but it is simpler to design as well.
A little over a decade ago, Forbes announced that skeuomorphic web design was on a straight path towards extinction.
And, shortly after, companies began to switch over to flat design. These companies include Apple, Windows and even Google. When major Operating Systems make a design switch, the world follows.
So, what exactly is flat design and how is it any different?
Well, while we wouldn't say it is the opposite of skeuomorphic design, flat design certainly prioritizes different aspects of the interface.
For one, flat design is a lot clearer, cleaner, and simpler. All the little details in gradients, reflections, acute angles, and textures which graphic and UI designers often deal with in skeuomorphism, are nearly irrelevant in flat design.
However, although cleaner in design, it is sometimes considered to be less intuitive to users. Therefore making a flat design interface more difficult to interact with.
First off, flat design is not 3D.
It is called flat design because it is (you guessed it) flat. Flat design is simple, but when taken to the extreme, it can be too simple.
This design method obviously lacks certain shapes, dimensions, and details such as textures and shadows when compared to its skeuomorphic counterpart.
A second negative is its limited nature.
One cannot design that a single image, logo or icon can reflect an entire brand. So, a company's relevant designs need to be unique and easily identifiable.
Due to the flat design limitations, there is a natural fear that designs can look too similar and homogeneous.
Windows was not so subtle about its flip from skeuomorphism to flat design. The introduction of Windows 8 did not sit well with users who found the change to be quite dramatic, too dramatic even.
Apple, on the other hand, took a more gradual approach to their adaptation of flat design. iOS7 took on the new graphic design trends without totally abandoning skeuomorphic web design and kicking it to the curb.
Users lost their minds when Instagram switched from skeuomorphism to flat design.
At the end of the day, users enjoy when they can intuitively identify the icons on their scene. It saves time, energy, and makes the user's experience more peaceful.
While there were a few months, years even, of tottering between the two schools of design, today companies seem to be settling down. In other words, Apple, Windows, Google and others have found an equilibrium between flat and skeuomorphic. Alas, skeuomorphism isn't dead. It is just adapting.
Alas, we can proudly say that skeuomorphism is definitely not dead. It just looks a little different than it used to!
While skeuomorphic web design has slowed down in recent years, it is 100% here to stay.
Apple had been a pioneer in optimizing on skeuomorphism and continues to incorporate this method into their interface today.
We would even go so far as to argue that Apple will most likely never totally abandon skeuomorphic web design as it has unarguably become a part of their brand.
In fact, Apple without skeuomorphic web design is just... Windows!
That said, companies will always do what is best for users. So, it really depends on you! Which do you like more? Realistic? Simple? 3D? 2D? Don't underestimate your individual purchasing power.
In 2014, Google introduced Material Design which combines elements of flat design with elements of skeuomorphism. Material provides a happy medium.
If you want to read more on the debate between design philosophies, check out our blog by clicking here.
A drawer works as a better metaphor for saving than a floppy disk. So does a pocket, or a filing cabinet. What ideas do you have?
Shop from thousands of high quality vector icons, providing a consistent look for your project. No subscriptions. Great prices. And free icon sets too.
Comments will be approved before showing up.