The Three Accents of a Design Language

Friday, 07 April, 2017

How much do you know about the different schools of design? Designers use something called design language to convey visual messages, such as symbols for app icons, and the layout of user interfaces. You can find more about the accents of that language in this article.

Foreword

We talked about the types of design in IT, and now it is time to talk about design language. To effectively communicate your thoughts, you need to have a means of conversation. As a species, we humans are very vocal. We shout and scream, whisper and hiss to convey our messages effectively. For that purpose we invented language.

So many languages to learn, so little time!

By some form of logic, designers are humans too, and they too invented their language. To make it even more obvious, they named it the “design language”. Not really a secret language, it would seem.

Jokes aside, design languages bear a different kind of a message than an ordinary, spoken one. Sometimes even called design vocabulary, it is a style which guides designers to make a unique, but consistent design for a product or a service. By using a design language, a designer can describe the aspects of design with shapes, patterns, colour schemes, materials, and so on.

 

For example, if you were to design the icons of all the apps for an upcoming iPhone, you’d use a design language to make the design more consistent across the board and to give the screen a feeling of coherence.

Similar to our languages such as English, there are “accents” a of design language. Something that’s always been a matter of controversy. Particularly, in the IT field, three are the most dominant at the moment. And they are the Skeuomorphic Design, the Flat Design, and the youngest yet – the Material Design.

Design Language Pattern Example

Leaves ordered in a pattern. Designer work, right there.

Skeuomorphic Design

A skeuomorph is a word of Greek origin where skéuos means a container or a tool, and morphḗ meaning shape. More accurately, it is a derivative object that retains the design cues inherent to an original object which it tries to mimic. A very common, and a great example in software is the use of the actual trash can as an icon for the recycle bin. Or, if you look at the icons on your phone, the chances are good that you’ll see an actual representation of a camera used as an icon for your camera app. Neat, right? That is what we call a skeuomorphic design.

Kindle paper as a skeuomorph.

An example of paper as a skeuomorph in Kindle.

We’ll focus on the digital aspect of skeuomorphic design in this paragraph. You should note that this design language also appears in physical objects. In UI (user interface) and web design, skeuomorphism seeks to create a three-dimensional effect in a two-dimensional, flat surface. We’ve already covered the icons, but what else is there? If you’ve ever used a Kindle or an Android reading app, you might’ve noticed the effect of turning a page is very similar to the real-life act of, well, turning a page. Using highlights, shadows, and some other details, designers try to make the design as close and as intuitive as possible for a human user.

Our focus was for the most part on the visual design, but you can also find skeuomorphic design in sounds. App developers heavily used the sound of a camera shutter in most of the first camera apps, for example.

While it might seem like a good idea to use this design language, keep in mind that it does take more space than others, and it isn’t as “clean” as others as it can cause visual noise. It can also cause an inconsistent look.

Skeuomorphic Design Camera Representation

A big inspiration for a lot of camera app icons. Click!

Flat Design

Flat Design is a design language which tried to alleviate some of the issues designers had with the skeuomorphic design. It is minimalist, and thus feels neater than skeuomorphic design. Most commonly, designers use it for graphical user interfaces, such as mobile and web apps. The design philosophy of this genre emphasises a minimalistic use of elements to offer visual clarity. In translation, less 3-D like icons. As with most of the design nowadays, the user experience comes first, and with flat design in web apps and sites, you can minimise the loading times. In turn, this decrease of load times can potentially lead to a higher conversion rate.

Flat design allows for a more streamlined and efficient design to quickly convey information while retaining visual appeal. It allows for an easier designing of responsive interfaces. With minimal design philosophy, you can achieve faster load times while being able to resize easily, but still look sharp on screens.
Even though people often contrast flat design to skeuomorphic design, you should note that flat design can also use skeuomorphs, as much as others can.

In 2013, Apple released its iOS 7 which used flat design almost exclusively. It is a “naked” design, stripped down to the most primary elements. Now, now, don’t let that make you feel uncomfortable, a design can also enjoy being naked from time to time.

Pretty much how flat design looks. Minus the flying part.

Material Design

If Material Design were an X-Men, its codename would’ve been Quantum Paper. While it might sound strange at first, it was the name Google gave it while it was still in development, who also announced it at the Google I/O conference on June 25, 2014.

It is the youngest design language of all the three named so far. However, let not its age fool you – it is a bit more complex than the simple flat design.

To quote the designer Matías Duarte, “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.” This same design language, Google used in its apps, including Youtube, Gmail, Drive, Google Maps, and Docs.

You can use Material Design in Android 5.0 and newer versions, which includes virtually all Android devices manufactured after 2009.

With a more liberal use of transitions, padding, lighting and shadows, and grid-based layouts, Material Design brings back a part of skeuomorphic design using the Z-axis.
Some designers and developers argue that these Google’s design guidelines are strangling the everyday creativity which designers had with the flat design. However, some others also argue that flat design has gone too far in removing all the skeuomorphs, even the useful ones.

A generic material design example.

What Design Language to Use Today?

Today, both web and mobile apps count over millions across different stores, such as Google Play (2,800,000) and Apple App Store (2,200,000). What we’re trying to say is that not all icons and interfaces have to adhere to the same rules.

For example, with the emergence of smart watches, the design is getting more spotlight once again.

The flat design and material design don’t differentiate too much one from another. Both are clean and minimalistic and serve a similar purpose. Although many people speak praise of the material design animations, they just make the user interface a bit more user-friendly. Flat websites, on the other hand, are somewhat more practical. There’s more than meets the eye here. Your design choice shouldn’t be taken for granted, especially since your competitors won’t let just any design slide its way into their software.

Smart Watch with Skeuomorphic Design

Skeuomorphic Design is back, baby!

Conclusion

A design language is a term used to denote the patterns found in a particular design philosophy. While we only touched upon three of these, there are many more, and many more yet to come. Design isn’t a thing to be taken lightly as it can both, directly and indirectly, boost your conversion rates.

Luckily, the web is brimming with professionals trained in more design languages, such as our team at Gauss Development. They all can give you clearer instructions on the design language that your software could best use to communicate its purpose to users. Often, it is precisely the design of an app that makes us ditch it right back from where it came. For this particular reason, you should give yourself time enough to ponder the optimal solution.

Another thing you can do is ask for a piece of advice. We’d be more than happy to help. Try us in the comment box bellow.

Darko Šarić

Darko is a passionate digital copywriter at Gauss Development. His job is to create engaging reading material based on the understanding of his audience and to oversee and edit all other writings.

    Comments

    © 2017, All Rights Reserved