{"id":102679,"date":"2023-02-03T09:32:57","date_gmt":"2023-02-03T17:32:57","guid":{"rendered":"https:\/\/thegood.com\/?post_type=insights&p=102679"},"modified":"2024-07-15T09:45:18","modified_gmt":"2024-07-15T16:45:18","slug":"visual-design","status":"publish","type":"insights","link":"https:\/\/thegood.com\/insights\/visual-design\/","title":{"rendered":"The Fundamentals of Visual Design and Why You Need It"},"content":{"rendered":"\n

Humans are visual creatures. We taught ourselves to read and write, but we evolved<\/em> to process the imagery of the world.<\/p>\n\n\n\n

Nearly 50% of our brain<\/a>\u00a0is involved in visual processing – We can process images in just 13 milliseconds<\/a>, which is 60,000 times faster than text.<\/p>\n\n\n\n

This innate skill not only applies to our physical surroundings, but the digital products and websites we use. Raw text and plain links are boring and unengaging, even if they function well.<\/p>\n\n\n\n

What’s more, we can use colors, shapes, and lines to provide visual cues that communicate specific functionality, which creates affordances that support a better and more efficient user experience.<\/p>\n\n\n\n

Ultimately, we can use visual design and aesthetics to improve functionality.<\/p>\n\n\n\n

In this article, we explain the fundamentals of visual design and why your site needs it, providing examples to help you incorporate these principles into your own user experience.<\/p>\n\n\n\n

Our goal is to show you how to think about design strategically and objectively to improve your site\u2019s user experience.<\/p>\n\n\n\n

What is Visual Design?<\/h2>\n\n\n\n

Visual design is a combination of both graphic design and user experience (UX) design that uses aspects of the site, such as brand identity, internal consistency, and visually communicated goals, to provide a unified, cohesive experience to its users.<\/p>\n\n\n\n

Basically, visual design is the use of aesthetics to support a system\u2019s usability. That system could be a physical product, an app, or your ecommerce site.<\/p>\n\n\n\n

A strong visual design doesn\u2019t take away from the site\u2019s content, usability, or conversion potential. Instead, it enhances these functions by creating an engaging and trustworthy experience for users.<\/p>\n\n\n\n

Let\u2019s look at a super basic example: The checkout button is just a link, but we always see it styled like a button. It\u2019s typically displayed visually, <\/em>rather than with just text. Which of these two links supports the user experience better?<\/p>\n\n\n\n

\"image<\/figure>\n\n\n\n

Option B is clearly more effective.<\/p>\n\n\n\n

The colored background and space it occupies on the page make it stand out as a button. The lock icon assures users that clicking it is safe. The slight shadow and conventional design as a button communicate its functionality clearly, appealing to users\u2019 affordances.<\/p>\n\n\n\n

Our innate ability to quickly process these visual cues provides a more efficient user experience and minimizes the effort required to interact with a site, improving the overall experience and bringing users one step closer to conversion.<\/p>\n\n\n\n

The Aesthetic-Usability Effect<\/h2>\n\n\n\n

There\u2019s a misconception that visual design has a minor effect on the overall user experience, but it actually plays an important role in positively impacting user perception and the overall experience. We can observe this impact through the aesthetic-usability effect<\/a>.<\/p>\n\n\n\n

The aesthetic-usability effect refers to our tendency to perceive attractive products as more usable. If something looks<\/em> better, we tend to think it will work<\/em> better, even if it isn\u2019t as effective or efficient. Essentially, a positive emotional response to visual stimuli makes us tolerate small usability issues.<\/p>\n\n\n\n

The aesthetic-usability effect was first studied in 1995<\/a> when researchers Masaaki Kurosu and Kaori Kashimura from the Hitachi Design Center tested dozens of variations of an ATM user interface. They asked the study participants to rate each UI design on two criteria: 1) ease of use and 2) aesthetic appeal.<\/p>\n\n\n\n

The researchers found a strong correlation between the participants\u2019 ratings of aesthetic appeal with perceived<\/em> ease of use. The correlation between their ratings of aesthetic appeal with actual <\/em>ease of use was much lower. Therefore, not only are users influenced by aesthetics to the point of overlooking usability challenges, they do so even when they are intentionally trying to evaluate the functionality of the system.<\/p>\n\n\n\n

Naturally, there are limits to this effect. A pleasing design can make users overlook minor usability issues, but not substantial ones.<\/p>\n\n\n\n

For instance, if your customers can\u2019t find the products they need on your ecommerce site, no pretty layout or trendy color scheme will save the sale. But if you find the balance, you can make users perceive more usability than there actually is<\/a>.<\/p>\n\n\n\n

\"graph<\/figure>\n\n\n\n

Source: https:\/\/uxdesign.cc\/the-importance-of-clarity-in-ux-91052e0ad4e4<\/a> <\/p>\n\n\n\n

Ultimately, form and function need to work together. When interfaces and digital experiences struggle with usability issues, or when aesthetics are completely neglected for the sake of usability, the users tend to have a poor experience. The solution, therefore, is balance.<\/p>\n\n\n\n

The 5 Principles of Visual Design<\/h2>\n\n\n\n

There are five basic principles of visual design<\/a>. When used properly, they create a pleasing experience that keeps users engaged and helps them navigate the site to find what they need.<\/p>\n\n\n\n

Visual designers apply these principles whenever they combine lines, shapes, colors, textures, typography, and layout.<\/p>\n\n\n\n

\"infographics<\/figure>\n\n\n\n

1. Scale<\/h3>\n\n\n\n

Designers use scale to establish the visual hierarchy of content on a page.<\/p>\n\n\n\n

Scale uses the relative size of elements (such as text, icons, or CTAs) to indicate the importance and rank of the element in relation to other components on the site.<\/p>\n\n\n\n

Proper use of scale can demonstrate how items relate to one another and create clear visual boundaries that help guide the user efficiently through the content on the site.<\/p>\n\n\n\n

Notice how Allbirds<\/a> makes their hero row full width and taller than subsequent rows. It draws the eye and directs you toward those options.<\/p>\n\n\n\n

\"Allbirds<\/figure>\n\n\n\n

2. Visual Hierarchy<\/h3>\n\n\n\n

Visual hierarchy controls the delivery of the experience by guiding the users\u2019 eyes sequentially down a page using elements on the site such as color, size, spacing, and organization of content.<\/p>\n\n\n\n

Unclear page hierarchies with elements competing for visual attention can create clutter that makes a site feel overwhelming and difficult to navigate.  <\/p>\n\n\n\n

Ritual<\/a> does a great job utilizing white space, layout, and scale to signify the most important content on its homepage.<\/p>\n\n\n\n

The large text, both in the hero area and further down the page, directs the user\u2019s attention, while the organization of the content follows the conventional left-to-right, down-the-page layout, typical of western reading patterns.<\/p>\n\n\n\n

\"example<\/figure>\n\n\n\n

3. Balance<\/h3>\n\n\n\n

Achieving visual balance on a page requires the visual weight of elements on a site, such as imagery or text, to be equally distributed across an imaginary y-axis down the center of the page.<\/p>\n\n\n\n

Balance can be symmetrical or asymmetrical. A page is considered symmetrical when there is the same or a similar amount of content on both sides of the axis, while an asymmetrical page contains the same amount of visual weight on both sides of the axis but with different elements, sometimes in different locations.<\/p>\n\n\n\n

This Verve<\/a> product details page is a great example of symmetrical balance. The product image in the center is winged by elements on the right and left. If you scroll a bit, the right-side add-to-cart widget scrolls with you, so there\u2019s always even weight on that side.<\/p>\n\n\n\n

\"Verve<\/figure>\n\n\n\n

Github<\/a> showcases asymmetrical balance on its site using heavy imagery on both corners of the page and bolder text to the right to maintain consistent visual weight on both sides of the imaginary y-axis of the page.<\/p>\n\n\n\n

\"Github<\/figure>\n\n\n\n