Applying Design Principles to User Experience Design

As the demand for UX designers rises, I often find myself wondering what types of educational backgrounds UX designers have. I, as do many other UX designers, have a traditional graphic design background. However, there are several UX designers who have varying backgrounds including human-computer interaction, communication design, interaction design, psychology and even computer science.  With that being said, I do think it is important for all UX designers – no matter what their educational background – to have a solid understanding of graphic design principles.

Here’s why:

For UX designers, the type of work we do and the technology we use, is always evolving and changing. Examples of emerging technology trends include the use and implementation of big data solutions and data visualizations. Many UX designers may not be familiar with how to design for data-heavy digital applications. This is where a solid understanding of core design principles comes in handy. When user experience professionals are asked to solve design problems that they may not have encountered in the past, these design principles can provide a solid base for creating new and fresh solutions.

Many graphic design principles can be applied towards UX design, but this article will focus specifically on the following principles:

• Balance
• Contrast
• Emphasis
• Hierarchy

Balance is defined as an even distribution of weight. Balance can help guide a user through a screen inside of an application. If UX designers were to create an unbalanced layout, it might make users subconsciously feel uneasy and uncomfortable, ultimately driving them away from whatever they are currently viewing. However, when designers are able to create a well-balanced user interface, the user’s eye movement will follow the intended experience.

Contrast can refer to the differences in: space, position, direction, structure, size, and color, among many other attributes. Contrast adds visual interest to a design. When UX designers use contrast in the correct manner, they can draw emphasis to certain areas of the interface that they want the user to pay attention to, such as an important data visualization, which leads to the next principle.

Emphasis is defined as an area or object that draws attention, and becomes a focal point in a design. Emphasis is critical because it gives elements on screen a sense of importance. For example, elements on screen that are large or more saturated in color may indicate that they are more important than smaller, subtler elements. Without emphasis, a user may be unsure of what exactly to look at on the page first, then second, and so on, which leads to the final principle: hierarchy. Before we learn about the importance of hierarchy, let’s take a look at an example of a big data dashboard that successfully uses the principles of balance, contrast, and emphasis.

applying-design-principles-1

The image above shows an excellent use of balance, contrast, and emphasis. The user interface is balanced in both its layout and use of repetitive typography in each section of the dashboard. Displaying large numbers shows contrast. By glancing at the screen, the user can quickly capture the statistics for the number of jobs, total revenue amount, and total profit amount. Additionally, emphasis is used through the use of color to quickly identify the increasing (green) or decreasing (red) status in the number of jobs, total revenue amount, and total profit amount within the last 7 days. Most of the other elements on this screen are colored in shades of gray so as to not distract the user from the important information on screen, which is of course, the data. 

Hierarchy is the outcome of the correct usage of contrast and emphasis. Users are able to understand and digest what they are looking at quickly and without much cognitive effort. However, as seen in the examples below, designers must create interfaces that are well balanced, with just the right amount of contrast and emphasis. Adding too little contrast can leave the user confused as to what exactly they should be looking at, and adding too much contrast can distract the user.

applying-design-principles-2

Although the image above executes the principle of balance well, the data table is lacking the proper amount of emphasis and contrast. Adding an additional color other than blue, or even adding white, would strengthen the design of this screen by making significant pieces of information more apparent on the screen. 

However, designers must be conscious about their use of contrast. As seen in the image below, this infographic is being overwhelmed with too much contrast and emphasis; therefore, lacking a sense of hierarchy.  

applying-design-principles-3

All of the design principles mentioned above, if used correctly, can help guide a user throughout their experience. By keeping these design principles in mind, UX designers should be able to create a well thought out solution. And as I mentioned before, since the technologies relevant to user experience design are ever changing, UX designers can apply these principles as their base for creating an effective, user-friendly experience, no matter what the current trend or application may be.

Kathryn

Written by Kathryn

Leave a Reply

*