Visual Design

Your constantly-updated definition of Visual Design and collection of topical content and literature

What is Visual Design?

Visual design aims to improve a design’s/product’s aesthetic appeal and usability with suitable images, typography, space, layout and color. Visual design is about more than aesthetics. Designers place elements carefully to create interfaces that optimize user experience and drive conversion.

See why Visual Design is about more than product prettiness.

“Problems with visual design can turn users off so quickly that they never discover all the smart choices you made with navigation or interaction design.”

— Jesse James Garrett, UX Designer & Co-founder of Adaptive Path

Visual Design is Aesthetic, Strategic Design

Users’ first impressions typically form in 50 milliseconds. This fact reflects the visceral level of emotional design—in other words, the user’s first impression of or gut reaction to a design. If they don’t like what you show them in those critical moments, they will leave. So, visual design is a vital part of your work as a designer. Many people mistake it to mean that designers include attractive elements just to maximize an item’s appeal. Actually, you use visual design to create and organize elements to A) lead the users eye to an items functionality, and B) make the aesthetics consistent. For instance, designers compose and arrange website content around each page’s purpose and are careful to ensure that content gives off the right visual cues. The smallest and subtlest details will affect what users think and how they feel. So, you must always show them the right things in the right way. Your enemy here is user uncertainty. If your users have to stop and think about your design, they won’t trust it—or you. Therefore, a visual design should draw their attention to the important aspects and strike the balance between a fresh, powerful design and something they expect to see. How you apply visual design will depend on your product, its organization/industry and its users (including their culture). A major factor in visual design is that you work to accommodate user limitations such as cognitive load. For example, you use chunking to help users understand and remember information more easily.

Visual Design, Analyzed

These are some of the most common—and fundamental—elements and principles of visual design:

Elements

  1. Lines (straight/curved/geometric/organic) – use these to create divisions, textures and shapes.
  2. Shapes – use lines, different colors, etc. to create enclosed/self-contained areas.
  3. Negative space/whitespace – use the blank area around a “positive” shape to create a figure/ground effect or calm the design overall.
  4. Volume – use this to show the rich fullness of all three dimensions of elements on two-dimensional screens.
  5. Value – use this to set the relationship between lightness and darkness, typically through a light source to create shadows and highlights.
  6. Color – use this to set the theme/tone and attract attention.
  7. Texture – use this to define an object’s surface.

Principles

  1. Unity – use this to establish harmony between page elements, so they appear to belong together and users aren’t distracted by chaotic (e.g., misaligned) layouts.
  2. Gestalt – use these principles of how people perceive objects to guide how users interpret your design.
  3. Hierarchy – use placement, font, etc. to show importance.
  4. Balance – use this to distribute elements evenly.
  5. Contrast – use differences in color, etc. to accentuate elements.
  6. Scale – use this to emphasize elements to establish importance or depth.
  7. Dominance – use an object’s size, color, etc. to make it stand out.

Three examples of the effects of following (or not following) best practice visual design principles.

Careful Visual Design + Good Usability = Successful Design

As a visual designer, you should strive to create content that is consistent and predictably organized, but at the same time impressively distinct. You do this to give users the context they need. A visual designer wants to meet users’ expectations so they win and keep their trust, and impress them with a unique brand presence. Brand style guides typically define standards about color use, typography, etc. However, some principles of visual design are universal. For instance, users will appreciate effective chunking and whitespace regardless of what you want to show them. Likewise, visual design should be a factor in how you apply copywriting. So, those carefully chosen plain words should appear in well-placed sections which users can easily digest. As part of the design process you shouldn’t forget accessibility when you judge how best to approach visual design regarding color, contrast, etc.

Unity, balance, contrast and hierarchy are among the design principles the designer applied to the Interaction Design Foundations landing page.

Learn More about Visual Design

Several Interaction Design Foundation courses closely examine visual design, including:https://www.interaction-design.org/courses/interaction-design-for-usability and https://www.interaction-design.org/courses/the-ultimate-guide-to-visual-perception-and-design

Here’s a revealing look at visual design’s significance for UX, featuring examples: https://uxmag.com/articles/why-visual-design-is-more-than-meets-the-eye

Read a compelling piece addressing how visual design relates to user conversion: http://www.uxbooth.com/articles/how-visual-design-makes-for-great-ux/

Find the 960 Grid System resource here: https://960.gs/

Literature on Visual Design

Here’s the entire UX literature on Visual Design by the Interaction Design Foundation, collated in one place:

Learn more about Visual Design

Take a deep dive into Visual Design with our course The Ultimate Guide to Visual Perception and Design .

Human vision is an amazing ability; we are capable of interpreting our surroundings so as to interact safely and accurately with little conscious effort. However, we are well attuned to nature and things that occur naturally in our environment, which has significant implications for design. Unless man-made products are attuned to, and support, human visual perception, the viewing experience suffers and there is significant potential that users will be unable to use your products quickly, safely, or without error. For this reason, it is essential that we investigate how we see the world and why we see things in the way we do in order to know what we can do to ensure our products provide the best viewing experience possible. This is why we have developed “The Ultimate Guide to Visual Perception and Design,” and why it is such an important topic for designers to master.

For those of us who are blessed with good eyesight, we seldom consider it. That’s why going off to investigate the whys and hows involved is a little like trying to get behind the wind for the sake of finding the exact spot where it comes from. Happily, getting to the bottom of the phenomena involved in visual perception is a lot less laborious, and perhaps infinitely more fascinating. During the course, we will first cover the basic anatomy of the human eye so as to understand how vision is formed. We will then look at lots of different designs, evaluating each one according to specific aspects of the human visual experience. We will also identify how we can improve designs to support human vision better and improve usability as a direct result. Using the knowledge it imparts earlier on, this course will then analyze the design of icons in screen-based interfaces.

All Literature

Please check the value and try again.