Skip to main content

Blog Post

Design Languages: Past, Present, and Future

“Most people make the mistake of thinking design is what it looks like. People think it’s this veneer – that the designers are handed this box and told, “Make it look good!” That’s not what we think design is. It’s not just what it looks like and feels like. Design is how it works. “

- Steve Jobs 

When thinking about how we interact with our digital content, what we are really talking about are design languages. These design languages are the ways in which designers help the end user to understand the context and usage of their content. To talk about how design languages help us, let’s start at the beginning. 

The Start of GUI Design

First System for GUI Design

 

When computers made their first move to graphical user interfaces (GUI), there was the need for people who never handled computers before to understand the basic concepts of computing using familiar workplace terminology. This is the primary reason we have a “desktop” where we can place “folders” that contain “files” and we can delete said “files” by putting them in the “trash” or “recycle bin.” These terms were pulled directly from real world use and real world objects that the user can relate to, thus making the transition that much simpler. 

Combining these terms with a GUI that matched is the start of skeuomorphic design. With skeuomorphic design, the visuals on screen match the real world counterparts to quickly give users visual clues as to what they are to be doing. One famous example of how far designers tried to push this type of design was the Microsoft Bob software, which placed the items directly into rooms for the average user who Microsoft thought just couldn’t grasp how Windows 95 operated.

Microsoft Bob

 

Web and Mobile Design

The internet started in a different direction, with more focus on data rather than tying it back to real world items. Mainly because the bandwidth speed of early modems limited the internet to primarily text and links so it was difficult to apply graphical skeuomorphism to web pages. This was akin to the very beginning of computers using just a terminal prompt before the adoption of operating systems that had graphical interfaces and helped lead to the widespread adoption of computers in the home. 

By the 90’s, with modem speeds getting faster, realism design starts to show up in web design.

An example of Realism Web Design

 

Often confused with skeuomorphic design, realism design mimics physical items or textures purely for aesthetic whereas skeuomorphism is used to support a metaphor that helps a user understand what the function of the item is. Once users began to understand the concepts of computing and didn’t need the metaphors, the design look still stuck around but was no longer always used to indicate to the user what to do. While the web moved towards realism design, a new tech comes into focus with touch screen mobile devices. 

Iphone IOS 1

 

Once again we move back towards skeuomorphic design with iOS and the icons on screen matching what the real world counterparts look like. This move back to skeuomorphic design shows how every new technology seems to use this initial design phase to help new users become acclimated to how the system works by relating it back to a real life object they already know. 

Where are we going?

So once again we’re left with, what’s next? Once users understand how a system works, how can we then shift design to better achieve the task rather than to make new users understand through metaphor how it works? These new thoughts gave rise to flat design, which is a reactionary movement against 3d (drop shadows, elements that appear raised, sunken or hollow), skeuomorphic and realistic design styles. 

The beginning of the flat design movement came with the launch of Windows 8 in 2011. Apple joined in with this shift around 2013 when they changed their website and iOS 7 to flat design. The shift did not come easy for either Microsoft or Apple as both the tiles in Windows 8 and Windows Phone as well as the icons in iOS 7 were harshly criticized upon first viewings. 

Windows 8 Interface

 

Iphone IOS 11

 

The Verge reported on the changes to iOS 7 in an article entitled, The design of iOS 7: simply confusing. They said, “But with the icons, there's an enormous feeling that Apple's designers couldn't decide on a direction. And for all the jokes about skeuomorphism, I would have preferred something nearer to the company's previous efforts than the new set, which seems closer to bathroom signage than even the Windows Phone's plainness.” 

Apple is now calling their approach iOS Human Interface Guidelines and have stuck firmly with the no drop shadow, minimally distracting approach to keep the focus on the main elements while keeping things full responsive.

With a more tech-savvy user base, designers can continue to innovate new ways to simplify design for our current devices without getting tangled up in heavy metaphors and distracting textures. However, whenever we see new technologies pop up, we’ll always see the initial push towards skeuomorphism. With VR becoming the newest system in need of design, we’ve seen a shift back with Oculus Home creating a near version 2.0 of Microsoft Bob.

Virtual Reality Design

The GUI takes the form of a room in your house which you can decorate and then uses icons to open up your games and programs once again showing that it’s easiest to make people comfortable with new technology by giving them something familiar. 

While this shows a new tech in its infancy, for more developed tech such as the web, we’ll see the push further away from this type of design and experimentation into just how abstract we can go while still making the user feel comfortable with knowing just what they are expected to do when they go to their favorite websites.

Resources

For more information related to why design is important and what we can do to help your site’s UX, here are some other posts from our team.

Why Your Website Project Needs A UX Designer

For the LOVE of User Experience Design

Think First, Then Design
 

Sam Seide

Meet team member, Sam Seide

Samuel brings a unique blend of technical and creative skills to his role as a Drupal Developer. His professional web development background has given him a strong foundation for planning,...

Learn more about Sam >
Access icon Up arrow icon Drupal 8 icon Facebook icon - white Facebook icon - blue outline Facebook icon - yellow Hollow right arrow icon Hollow right arrow icon - white LinkedIn icon - white LinkedIn icon - hollow LinkedIn icon - blue outline LinkedIn icon - yellow Mediacurrent wordmark Quote icon Twitter icon - white Twitter icon - hollow Twitter icon - blue outline Twitter icon - yellow Youtube icon - white Youtube icon - yellow