Visual Design Languages
and what we can learn from them
Skeumorphism, flat design and material design. These are all buzz words every modern designer knows and has to deal with. Basically these visual concepts are all describing the look and feel of digital applications and operating systems. But as a fact they are all design aesthetics, which are following design trends just like the fashion industry does. This article is not about describing every concept in the sense of a detailed visual guide. Instead I want to focus on declaring these design concepts as a tool and not a goal to achieve. The following paragraphs are trying to have a closer look at the messages and concepts behind them. Why have they been so successful at their time? And might there be timeless approaches we could keep in mind for further projects?
Skeuomorphism
Creation Through Adaption
A skeuomorph is a derivative object that retains ornamental design cues from structures that were necessary in the original.
-Wikipedia
Since the beginning of graphical user interfaces, real world objects have been used as visual metaphors to represent computer-based interactions.
When we think of skeuomorphism we mostly have the iOS6 design in mind. We think of leadered calendars and the billard-style Game-Center. But skeuomorphism is more than just a visual style. It is the creation of affordances and metaphors through adaptions.
Skeuomorphism is a design emulating another material of an object from the “real world” and consequently has a big advantage in it: By the adaption of natural common objects, we simply know how to use them. For example we know that we can find inactive programs beneath other windows as unused papers are getting lost under a big stack. We know that we can navigate to another page, when the current page has a curled edge. We know that we have to add similar files to the same directory because that is how filling folders work.
The communicated affordances and metaphors are the reason skeuomorphism was such a popular and successful design concept. When the first iPhone was published, it was the first time touchscreens were spreaded to such a large audience. At first the consumers did not know how to interact with this new technology. Skeuomorphism helped to bridge the gap visually by creating a reference to what we already know. The iPhone will probably not be the last product with an innovative technology. So it is plausible, that skeuomorphism might help to explain new interaction patterns and technologies more easily and intuitively.
The Rise of Flat Design
As you might have guessed skeuomorphismus was replaced by the famous flat design, which has significantly shaped the digital visual design we know these days. But what was the reason to leave all the advantages of skeuomorphism behind?
One big aspect of skeuomorphism is to be realistic, which ended up with fake-leather and wooden-UI. The designers were challenging each other on creating the most detailed and realistic visual design adaption they could achieve. The content — the main focus — was totally lost.
“Realism done wrong can transfer into kitsch.”
Another big trend going wrong was that interface elements just looked like realistic adaptions, but did not behave as expected. One popular example is the Apple’s contact app, which uses the famous book metaphor. But unlike apple’s iBook, the apple contact app doesn’t let you navigate via left and right swipes, breaking the book metaphor completely. When you are adapting analog realistic things, they will always bring their own limitations with them, that might not exist in digital context, as for example a digital calendar can easily display more than one month per page. Skeuomorphism was not at its strength anymore and it was time for a change.
Flat Design
Nothing Left To Take Away
Flat design is a minimalist UI design genre, or design language, currently used in various graphical user interfaces.
– Wikipedia
Initiated with Microsoft’s metro design philosophy, flat design became really popular with the release of Apple’s iOS7. Basically flat design’s look can be described as minimalistic and color based with a big focus on typography, removing drop shadows and detailed textures. Flat design aims for simplicity, clarity, and honesty in user interfaces.
With this new design philosophy the focus was shifted away from the look of an application, to the usability and user experience of digital products. This means, that the visual designs are not bad, but the main focus lies from now on on the content itself. With a clean visual structure applications should be easy to operate and not disturb the user by unnecessary visual details.
“Flat design seams to be easy, but it only really becomes easy,
when it is easy to use.”
As the name says itself flat design is flat — really flat to be honest. Without the use of several imaginary layers created through drop shadows and textures, flat design has the approch to use just one layer. This reduction of complexity aims the designer to focus on the content relevant aspects for the user audience.
As mentioned in the section above an important aspect of skeuomorphism was to establish digital interaction patterns, but under the restrictions of the analog world. As a consequence there was no space to develope groundbreaking new interaction patterns or affordances. Flat design really stick to the strengths of digital interfaces, rather than be restricted by the limitations of the adapted real world.
Material Design
Material as a metaphor
Material design (codenamed quantum paper) is a design language developed by Google. Expanding upon the “card” motifs first seen in Google Now, it is a design with increased use of grid-based layouts, responsive animations and transitions, padding, and depth effects such as lighting and shadows.
–Wikipedia
With the enormous popularity of flat design, more and more people complained about the steril content-focused look of every application. As the visual language totally concentrates on the content and information itself, an attractive and enjoyable usage of interfaces were often neglected in the first place.
One new visual design language trying to tackle these problems, by shifting attention to motion and breathe life into the interface, is material design. With the launch of Android Lollipop, Google has introduced this new visual language. Material design is bringing a comprehensive and detailed guide for visual, motion and interaction design concepts on all platforms.
As the name says itself, material is used as a metaphor within the overall visual language. The material is based on reality, inspired by the study of paper and ink, and is constrained by the rules of physics. This affects the system internal light situations, the behaviour of objects, the surface and the space of the interface elements.
“Motion provides meaning.”
As every element has its own mass and weight, objects cannot have linear velocity and should instead always provide an easing. Motion is used to transfer feedback, make system’s changes easily understandable and totally affect the appearance of the whole design.
Because of the missing of textures and ornamental visuals, such as its big color-based areas and large typography, material design is visually related to flat design. Contrary to flat design, material design’s key aspect is the use of the z-axis to easily get the hierarchical structure of the application. Instead of copying the look of real world objects — as skeuomorphism does — material design adapts their movements and behaviors in an abstract way and enables space for inspiration. Material design really sets the focus on, what visual elements should feel like and could be described with “skeuomorphic motion” in order to set the experience of an application as an understandable, enjoyable and personal act.
Design is Experience
Conclusion
So in the end, what can we actually learn from those visual languages and keep in mind for our further projects: Firstly follow current design trends wisley, always understanding why the visual language has established itself.
“In the end the users will always decide,
how the application looks like.”
As a designer we are all designing experiences, that only can be achieved in the relation of users and interfaces. Consequently, the main goal should be to create an experience that is more than just good looking. It should focus strictly the needs of the target group and involve a balance between aesthetic and functionality. For the sake of good user experience keep in mind, that even faked leather is an option.
And what is most important besides gaining from those design trends and their realizings: always keep up your own visual style and signature!
Thanks for reading! Please give me a shoutout on Twitter if you have any questions, if you have ideas for future topics you’d like to see or simply liked what you have just read.
