Visual design goes beyond making layouts and designs look nice and aesthetically pleasing. When thoughtfully applied, it can increase usability, provoke emotion, and strengthen brand perception.
Here’s a list of NN/g’s most useful articles and videos about visual design as it relates to user experience. Within each section, the resources are in recommended reading order.
Overview of Visual Design
These articles discuss why visual design is important and why it should be considered in addition to a well thought out user experience. If you’re new to visual design, we recommend you explore the following resources in order, from top to bottom.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
Number 8 of the 10 usability heuristics
|
|
|
2 |
Video |
||
|
3 |
Article |
How looks affect the perception of usability |
|
|
4 |
The Aesthetic Usability Effect and Prioritizing Appearance vs. Functionality |
Video |
|
|
5 |
Video |
Why purely decorative UI elements reduce the UX quality |
|
|
6 |
Video |
Tips for improving visual-design skills |
Principles of Visual Design
The articles in this section discuss various visual-design principles that are key in creating and enhancing a user experience.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
Visual-design principles that, when applied correctly, increase usability |
|
|
2 |
Article |
Definition of visual hierarchy and its components |
|
|
3 |
Video |
How contrast enhances usability |
|
|
4 |
Video |
Definition of scale and examples |
|
|
5 |
Article |
Definition of the Gestalt similarity principle and how it can be used to indicate related elements in the UI |
|
|
6 |
Article |
Definition of the Gestalt proximity principle and how to apply it in designs |
|
|
7 |
Article |
Definition of the Gestalt common-region principle and how to apply it in designs |
|
|
8 |
Article |
Definition of the Gestalt closure principles and applications in logos, icons, and other page elements. |
|
|
9 |
Article |
Definition of the golden ratio and it’s application to user-interface design |
|
|
10 |
Article |
Analysis of several design examples and of the visual-design principles they use |
Elements of Visual Design
The articles in this section discuss elements of visual design — grids, color, typography, icons, and images.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
Definition of the grid, examples, and tips to use a grid |
|
|
2 |
Video |
||
|
3 |
Article |
How to apply colors in your designs |
|
|
4 |
Video |
||
|
5 |
Article |
Glossary of common typographic terms |
|
|
6 |
Article |
Guidelines when pairing typefaces |
|
|
7 |
Article |
A research study providing insights into online reading |
|
|
8 |
Article |
Guidelines for creating and using icons in designs |
|
|
9 |
Video |
||
|
10 |
Video |
Why icons need text labels |
|
|
11 |
Article |
An eyetracking study outlining how users approach website images |
|
|
12 |
Article |
How to signal clickability with visual cues |
Accessibility and Visual Design
This set of articles provide insight on how to create visuals that are accessible by individuals with disabilities.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
Guidelines for improving accessibility of visuals |
|
|
2 |
Article |
Why low contrast text is bad and how to avoid it |
|
|
3 |
Article |
Tips to make text readable when place over a background image |
Testing Visual Design
Testing visual design can be tricky. Subtle design changes, like color, alignment, and fonts can have important effects on the overall user experience. These articles discuss different methods to test visual design, so that both aesthetic impressions and behavioral effects are accounted for.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
When and how to test visual design |
|
|
2 |
Video |
||
|
3 |
Video |
Research methods for assessing visual design |
|
|
4 |
Using the Microsoft Desirability Toolkit to Test Visual Appeal |
Article |
Summary of the desirability study methodology and an example on how to use it |
|
5 |
Article |
How and when to test icons |
Design Systems
Design systems go beyond a visual design language or style guide. They are a set of standards to manage design at scale.
|
Number |
Link |
Format |
Description |
|
1 |
Article |
Definition of a design system and its components
|
|
|
2 |
Video |
