Claim your $200 discount or 3 Free Months from UX Mastery

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 user’s eye to an item’s 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 Foundation’s landing page.

Learn More about Visual Design

Several Interaction Design Foundation courses closely examine visual design, including: https://www.interaction-design.org/courses/visual-design-the-ultimate-guide 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 Visual Design: The Ultimate Guide .

In this course, you will gain a holistic understanding of visual design and increase your knowledge of visual principles, color theory, typography, grid systems and history. You’ll also learn why visual design is so important, how history influences the present, and practical applications to improve your own work. These insights will help you to achieve the best possible user experience.

In the first lesson, you’ll learn the difference between visual design elements and visual design principles. You’ll also learn how to effectively use visual design elements and principles by deconstructing several well-known designs. 

In the second lesson, you’ll learn about the science and importance of color. You’ll gain a better understanding of color modes, color schemes and color systems. You’ll also learn how to confidently use color by understanding its cultural symbolism and context of use. 

In the third lesson, you’ll learn best practices for designing with type and how to effectively use type for communication. We’ll provide you with a basic understanding of the anatomy of type, type classifications, type styles and typographic terms. You’ll also learn practical tips for selecting a typeface, when to mix typefaces and how to talk type with fellow designers. 

In the final lesson, you’ll learn about grid systems and their importance in providing structure within design. You’ll also learn about the types of grid systems and how to effectively use grids to improve your work.

You’ll be taught by some of the world’s leading experts. The experts we’ve handpicked for you are the Vignelli Distinguished Professor of Design Emeritus at RIT R. Roger Remington, author of “American Modernism: Graphic Design, 1920 to 1960”; Co-founder of The Book Doctors Arielle Eckstut and leading color consultant Joann Eckstut, co-authors of “What Is Color?” and “The Secret Language of Color”; Award-winning designer and educator Mia Cinelli, TEDx speaker of “The Power of Typography”; Betty Cooke and William O. Steinmetz Design Chair at MICA Ellen Lupton, author of “Thinking with Type”; Chair of the Graphic + Interactive communication department at the Ringling School of Art and Design Kimberly Elam, author of "Grid Systems: Principles of Organizing Type.”

Throughout the course, we’ll supply you with lots of templates and step-by-step guides so you can go right out and use what you learn in your everyday practice.

In the “Build Your Portfolio Project: Redesign,” you’ll find a series of fun exercises that build upon one another and cover the visual design topics discussed. If you want to complete these optional exercises, you will get hands-on experience with the methods you learn and in the process you’ll create a case study for your portfolio which you can show your future employer or freelance customers.

You can also learn with your fellow course-takers and use the discussion forums to get feedback and inspire other people who are learning alongside you. You and your fellow course-takers have a huge knowledge and experience base between you, so we think you should take advantage of it whenever possible.

You earn a verifiable and industry-trusted Course Certificate once you’ve completed the course. You can highlight it on your resume, your LinkedIn profile or your website.

All Literature

Please check the value and try again.