If you have lived in the same world as me in recent years, you have surely witnessed the “clash” between flat design and skeuomorphism.
In this article I want to explain in detail what skeuomorphism is, what flat design is and why we talk about it and above all why we talk about it as two things “in conflict” with each other.
What is skeuomorphism?
This strange and obscure word, which can also be called skeuomorphism and derives from Greek, indicates a physical or graphic ornament placed on an object with the aim of recalling the aesthetic characteristics of another.
More specifically, however, skeuomorphism almost always refers to aesthetic characteristics of the past or in any case of “outdated” objects.
There are hundreds of examples of this, such as notepad apps with graphics that recall post-its or book reading software that simulates the gesture of browsing a book. Of course, post-its, sheets of paper and books are not objects of the past (or at least not yet), but they are objects, already known to people, which help to familiarize themselves with interfaces that are not yet known.
Skeuomorphism therefore aims to act as a bridge between what is already known and what we still need to understand how it works.
As seen, there are numerous examples of skeuomorphic graphical interfaces that simulate objects in the physical world. But skeuomorphisms do not necessarily concern visual graphics, but, as in the case of the shutter noise when smartphones take a photo, also sound.
On the other hand, as we will see, there is flat design, based on minimalism and the representation of objects through flat and mono-colored shapes, but we will get there slowly.
Is skeuomorphism realism?
True skeuomorphism usually refers to objects from the past. The skeuomorphism that became a trend a few years ago, however, had more to do with realism which seeks, as the name suggests, to simulate real objects.
So, quickly going back to the example at the beginning of the post, the calculator apps, both are skeuomorphic because they simulate the shape and functions of a real calculator, but only the one on the right is also visually realistic.
Obviously the two trends go hand in hand. Where skeuomorphic design tends towards realism (to make the reference more immediate to understand), realistic design tends towards skeuomorphism (to make realism not seem out of place).
So while realism is something purely visual, skeuomorphism is something that permeates design in a much deeper way.
The Pros and Cons of Skeuomorphism
As with everything, there are both positive and negative aspects to skeuomorphism. Assuming good and correct design the “pros” of skeuomorphism are:
- Helps users better understand the purpose and use of an app by having graphics that resemble those of an existing object;
- When done well, it gives a very pleasing look of elegance and cleanliness ;
- Thanks to all the aspects I have told you about so far, a familiar approach with the user can be defined by the designer.
Of course there are also negative aspects. These “cons” have perhaps caused the fashion of skeuomorphism that blossomed a few years ago in the world of design to pass very quickly. Here they are:
- It is a very slow and cumbersome creative process. Creating photorealistic textures is not easy at all and takes a lot of time.
- Files generated in a skeuomorphic way require a lot of disk space.
- It is not very suitable for the web and especially for the CSS and HTML5 programming codes used to make websites responsive, that is, suitable for any device (computer, tablet, mobile phone).
- It’s too much about changing trends to be something worth spending time and money on. A dark brown leather texture can be trendy today and boring tomorrow, you know?
So if skeuomorphism has all these defects, what are you talking about?
First of all, it’s still a valid design tool in certain cases. Then it’s also been one of the hottest trends in recent years, even if, during 2014, it was supplanted by another trend in the world of graphics: flat design.
Wait. Before I explain what flat design is, maybe I should explain a little where the hell this “clash” to the death between Flat and Skeuomorphism comes from.
Flat vs Skeu
Before the first iPhone came out in 2008, skeuomorphism and realism in graphical interfaces were extremely uncommon, with the sole exception of video games. In fact, skeuomorphism was widely used in game design, especially in role-playing games like War of Warcraft or something like that, to make it easier to understand the various dynamics of the game.
Apple heavily introduced skeuomorphism into its iOS graphical interfaces for two valid reasons:
- Skeuomorphism was attractive. Sure, we’re fed up with seeing those textured surfaces of wood, faux leather, or yellowed paper, but at the beginning it was a huge innovation! When the iPhone came out, no one was used to such visual richness on a cell phone.
- The iPhone was a completely new device for everyone. It needed to connect to the real world to be understood and used by everyone. Skeuomorphism is the best way to make the user understand the functions of an interface, you should know that by now!
An e-book reader app that simulates a library. Very skeuomorphic interface that makes it immediately clear what you are using. Between 2008 and 2012, the world of graphics saw an almost uncontrolled proliferation of skeuomorphism in the wake of the Apple model. But not everyone agreed.
The advent of flat design
If the advent of skeuomorphism can be traced back to Apple, that of flat design can certainly be attributed to Microsoft’s rebranding from 2010 onwards.
In fact, a few years ago, perhaps to differentiate themselves from Apple’s design, perhaps because they sincerely considered this new style the best, Microsoft adopted a completely new style that was initially called Metro Style. The name was then changed for copyright reasons but who cares, now everyone remembers it as Metro design.
It’s that famous design that we’ve been seeing since Windows 8 and, even before, on Windows Phone, based on a grid like this:
This new Metro Style from Microsoft, got rid of all those semi-realistic textures, gradients and shadows that were so popular a few years earlier thanks to Apple. It was part of what is called Flat design.
What is flat design?
Flat design is an approach, a design style based on “flat” geometric shapes, clear and defined spaces, bright colors, illustrations and two-dimensional and minimalist interfaces.
The difference between skeuomorphism and flat design is not only visual, but also deeply conceptual: while the former tends to create connections between the real world and that of graphics and technology, flat design aims to completely break any type of link between the two worlds.
Instead of representing a calendar app by trying to simulate its shape, flat design tends to represent it through a very synthetic and minimalist graphic sign, for example.
The pros and cons of flat design
Flat design is certainly a style associated with the concepts of simplicity, cleanliness and modernity, but I will now analyse in more detail the positive and negative aspects of this trend.
Pros
- Flat design is trendy. People are used to seeing it and are well disposed towards it. In short, flat is cool!
- It is adaptable. And I mean extremely adaptable. A flat graphic can be easily adapted to any type of graphical interface, perhaps simply by changing the size of the basic geometric shape.
- It is perfect for the web and for mobiles, both because it is adaptable and because its simplicity makes it light for loading, for example, a website.
- There is an opportunity to focus on cool typography in the design as the light image makes it suitable to use not only classic fonts preferred by designers, but also innovative or visually striking fonts.
Cons
- Extreme simplicity and strong minimalism can make this style appear too simple, lacking in personality or even unprofessional.
- Flat design is trendy. I know, it has its pros and cons but, you know, when something is trendy after a while it starts to get boring!
- Sometimes the usability of the interface suffers, especially when there is a lot of information to convey. You even end up not understanding where you can and cannot click.
These negative aspects make it clear how flat design could change slightly or radically in the next few years or even months.