Health IS Technology Blog

The Evolution of Digital Design Languages


There isn’t a right or wrong way to design as beauty is in the eye of the beholder.”                            ~ Welcome to Era of Flat Design

Design Languages

Design Languages

The Internet has made it possible for people to connect, share information, and valuable resources in a way that has never before been possible through literally billions of websites, each designed with it’s own creative style and purpose. This is possible through the clever application of distinct design languages or styles, which guide the unique look and feel of webpages, just as you might expect to find in any singular painting, sculpture, or building.

Terms such as, modern and minimal, abstract and surreal, contemporary or classic, may come to mind when you think of art. But in the world of digital design, the keywords to note are skeuomorphism, flat, and more recently, material design. Each of these is associated with its own, unique design language, which encompasses everything from the material and color choices to the shapes, patterns, textures and overall layout of the webpage.

.

Skeuomorphism

Skeuomorphism

Skeuomorphism

One of the first hugely popular design styles was the skeuomorphic design approach. The goal of this style was to give the user the feeling that whatever they could see and potentially interact with on the page was as close to what you might expect to find in reality, as possible. This meant that buttons, icons, navigational elements, etc. all tended to have a heavily detailed, three-dimensional look, including the appearance of shadows.

It’s all about user-friendliness. The guiding thought being that people might find it easier to understand and interact with on-page elements, if they actually looked and functioned the way one would expect them to in the real-world. For example, a button for a survey might actually look as though it was raised until clicked on, at which point it would appear to have been depressed; And an e-book page might look as though it could actually lift up and fall to the other side to reveal the next section of text content, just as it would in a physical book.

So what happened to this once popular, early design trend? It was readily replaced by the advent of our currently popular, flat design language. As one report shares, “The 2012 release of Windows 8 and its ‘Metro’ theming showed the world what the future of computing looked like. Apple’s iOS 5 and 6 were liked when they first came out, but everyone was excited when iOS 7 came out in 2013 and did away with the faux-office design,” (Make Use Of, 2015).

 

Flat Design

Flat Design

Flat Design

So, the modern design language you’re probably most familiar with seeing and experiencing on the web and in applications today is that of flat design. This style is all about simplicity or minimalism, order rather than embellishments and above all else, clarity over “flashy-ness” for ideas and products, online. This design style is especially effective for modern users who are exceptionally familiar with operating in digital spaces. Particular the huge number of people that grew up with computers and technology galore, including Generation X, Millennials, and Generation Z, a.k.a. iGens.

Users experience flat design with clean and open pages that are highly organized for usability. The goal here is less about making things look and function as they could in reality, than it is about conveying clear, distraction-free messages for the digital space(s) in which they exist.

So rather than designing a button that appears to be raised and depressed with shadows and heavy details, a simple two-dimensional icon with two or three crisp, contrasting colors may be employed. This draws attention to the element and saves substantial space on the page. It’s also useful for printing such pages, if and when needed. As one article notes, “This illustrates a clear separation between technology and tactile objects. Bright, contrasting colors make illustrations and buttons pop from backgrounds, easily grab attention, and guide the user’s eye. Simple images convey messages more quickly than detailed illustrations. And the meaning of the icons can quickly be perceived,” (Creative Bloq, 2016). That said, the focus on user experience remains chief.

 

 

Material Design a.k.a. Quantum Paper

Material Design

Material Design

Though flat design is still highly prevalent, a new approach which merges the best of both the traditional skeuomorphic and contemporary flat approach, is rapidly rising in popularity. This is the material design language, which was developed by Google in 2014. Also known as Quantum Paper, this approach was created with goal of unifying the desktop to tablet to mobile experience for end-users. This means that icons within a webpage are designed to not only look and function optimally for common input devices, such as a mouse and keyboard setup, but also for touch-screens.

In the material design world everything has an X, Y, and Z axis. This means skeuomorphic seams and shadows can be re-introduced alongside the crisp, contrasting colors employed in flat approaches. This creates the look and feel of a paper (e.g. flat) world but with a small degree of added depth for intelligent interaction with icons and animations.

“It has countless unique and interesting features, but perhaps the most defining is its use of the Z-axis. Basically, it adds a little skeuomorphism back into flat design, creating the impression of a bunch of two-dimensional planes floating over each other at designated elevations. The three-dimensional arrangement makes programs easier to interact with: For example, drop shadows are used to indicate layer arrangement,” (DesignModo, 2015). This allows end-users to make the connection between depth and importance for key elements in the page.

As Google explains it, the challenge and goal here is to, “Create a visual language for users that synthesizes the classic principles of good design with the innovation and possibility of technology and science. This is material design”.

Whether or not it becomes a web standard is yet to be seen, but stay tuned to the technology blog and we’ll keep you informed on the progress happening in the constantly evolving world of digital design.

Additional Digital Resources:

 

Happy Computing!