Skip navigation

Visual Design Articles & Videos

  • Squint Test

    Use the squint test to identify elements that catch attention and assess the visual hierarchy in your design. Ensure high-priority content stands out visually.

  • Dark Mode: How Users Think About It and Issues to Avoid

    Dark mode is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues.

  • Visual Design Hacks for the Non-designer

    Make your work look visually compelling by using these visual-design hacks: preexisting color palettes, cohesive icons, and grids for alignment.

  • Balance in UX Design: Symmetry, Asymmetry, and Radial Balance

    The kind of balance you use in your visual depends on what you want to convey. Symmetry is quiet and static. Asymmetry creates energy and movement. Radial balance leads attention to the central point.

  • Visual Design of UX Maps

    Don’t make a UX map pretty for the sake of making it pretty. Invest in creating a visual system for your map then testing it and getting feedback.

  • Visual Treatments that Improve Accessibility

    To design accessible visuals, account for color contrast, don’t rely on color alone, and make interactive elements easy to identify.

  • Clutter-Free Charts

    Clear out chartjunk (unnecessary visual elements) for a more minimalist and understandable data visualization.

  • Using Imagery in Visual Design

    When choosing images for your visual designs, match similar characteristics, balance high quality with adequate file size, prioritize information-carrying images over purely decorative ones, and provide robust alternative text.

  • What is Visual Weight?

    Visual weight measures how much design elements draw attention from the viewer. Objects that are bigger in size, simpler in shape, use dark colors, or have high contrast appear visually heavier.

  • Choosing Chart Types

    Pick a chart type that will help you make your point. In the vast majority of cases, use bar charts, line charts, or scatterplots.

  • Choosing a Color Palette

    Colors in an effective color palette work together, follow your brand’s color guidelines, and avoid overwhelming users.

  • The IL1 Typography Test

    Using typefaces with distinct characters can help users easily differentiate alphanumeric data. Choose typefaces that pass the I-L-1 test for data tables and information seen at-a-glance.

  • The Anatomy of a Good Design: An Analysis of 4 Sites

    Visually pleasing designs use consistent type styles and spacing, create a visual hierarchy, and utilize an underlying grid structure.

  • Common Region: Gestalt Principle for User Interface Design

    Items within a boundary are perceived as a group and assumed to share some common characteristic or functionality.

  • Figure/Ground: Gestalt Principle for User Interface Design

    Users perceive interface design elements that differentiate the foreground (figure) from the background (ground) as something to focus on or interact with.

  • Continuation: Gestalt Principle for User Interface Design

    The eye automatically follows lines and curves, continuing them. Employ continuation to guide users along desired paths in the UI.

  • Common Fate: Gestalt Principle for User Interface Design

    Things that move in synch are perceived as belonging to the same group and being different than other screen elements that stay put or move differently.

  • Connectedness: Gestalt Principle for User Interface Design

    Visual design elements that are connected (for example, by a line) are seen as belonging together. This principle is strong enough to overrule small differences between the items.

  • Closure: Gestalt Principle for User Interface Design

    People often fill in the gaps between visual elements, using closure to perceive them as a whole instead of being separate UI items.

  • UX Mapping Methods: Visual-Design Guide

    Visual-design principles can be applied consistently throughout the process of creating a polished UX map. Start by choosing a tool, then create a visual system, establish the basic layout, and finally add content and make adjustments.

  • Squint Test

    Use the squint test to identify elements that catch attention and assess the visual hierarchy in your design. Ensure high-priority content stands out visually.

  • Visual Design Hacks for the Non-designer

    Make your work look visually compelling by using these visual-design hacks: preexisting color palettes, cohesive icons, and grids for alignment.

  • Balance in UX Design: Symmetry, Asymmetry, and Radial Balance

    The kind of balance you use in your visual depends on what you want to convey. Symmetry is quiet and static. Asymmetry creates energy and movement. Radial balance leads attention to the central point.

  • Visual Design of UX Maps

    Don’t make a UX map pretty for the sake of making it pretty. Invest in creating a visual system for your map then testing it and getting feedback.

  • Visual Treatments that Improve Accessibility

    To design accessible visuals, account for color contrast, don’t rely on color alone, and make interactive elements easy to identify.

  • Clutter-Free Charts

    Clear out chartjunk (unnecessary visual elements) for a more minimalist and understandable data visualization.

  • What is Visual Weight?

    Visual weight measures how much design elements draw attention from the viewer. Objects that are bigger in size, simpler in shape, use dark colors, or have high contrast appear visually heavier.

  • Choosing Chart Types

    Pick a chart type that will help you make your point. In the vast majority of cases, use bar charts, line charts, or scatterplots.

  • Choosing a Color Palette

    Colors in an effective color palette work together, follow your brand’s color guidelines, and avoid overwhelming users.

  • The IL1 Typography Test

    Using typefaces with distinct characters can help users easily differentiate alphanumeric data. Choose typefaces that pass the I-L-1 test for data tables and information seen at-a-glance.

  • Common Region: Gestalt Principle for User Interface Design

    Items within a boundary are perceived as a group and assumed to share some common characteristic or functionality.

  • Figure/Ground: Gestalt Principle for User Interface Design

    Users perceive interface design elements that differentiate the foreground (figure) from the background (ground) as something to focus on or interact with.

  • Continuation: Gestalt Principle for User Interface Design

    The eye automatically follows lines and curves, continuing them. Employ continuation to guide users along desired paths in the UI.

  • Common Fate: Gestalt Principle for User Interface Design

    Things that move in synch are perceived as belonging to the same group and being different than other screen elements that stay put or move differently.

  • Connectedness: Gestalt Principle for User Interface Design

    Visual design elements that are connected (for example, by a line) are seen as belonging together. This principle is strong enough to overrule small differences between the items.

  • Closure: Gestalt Principle for User Interface Design

    People often fill in the gaps between visual elements, using closure to perceive them as a whole instead of being separate UI items.

  • Proximity: Gestalt Principle for User Interface Design

    UI elements that are close together are perceived as belonging together, whereas users think that things that are apart play different roles in the interaction.

  • Similarity: Gestalt Principle 1 for UI Design

    User interface elements that share one or more traits (such as shape, color, size, etc.) will be seen by users as being similar and belonging together.

  • The Gestalt Principles for User Interface Design

    The gestalt principles for visual perception make users see some graphical user interface design elements as parts of a whole, and others as being separate, and thus different.

  • 3 Strategies for Managing Visual Complexity in Applications and Websites

    In application design, prevent users from being overwhelmed by putting things in predictable places, using a clear visual hierarchy, and taking advantage of progressive disclosure.

  • Dark Mode: How Users Think About It and Issues to Avoid

    Dark mode is popular, but not essential. Users like dark mode but maintain similar behaviors without it. They think about it at the system level, not the application level. If you choose to support dark mode, test your design to avoid common dark-mode issues.

  • Using Imagery in Visual Design

    When choosing images for your visual designs, match similar characteristics, balance high quality with adequate file size, prioritize information-carrying images over purely decorative ones, and provide robust alternative text.

  • The Anatomy of a Good Design: An Analysis of 4 Sites

    Visually pleasing designs use consistent type styles and spacing, create a visual hierarchy, and utilize an underlying grid structure.

  • UX Mapping Methods: Visual-Design Guide

    Visual-design principles can be applied consistently throughout the process of creating a polished UX map. Start by choosing a tool, then create a visual system, establish the basic layout, and finally add content and make adjustments.

  • Visual Design in UX: Study Guide

    Unsure where to start? Use this collection of links to our articles and videos to learn about visual design in UX.

  • 5 Visual Treatments that Improve Accessibility

    To design accessible visuals, account for color contrast, don’t rely on color alone, make interactive elements easy to identify, provide useful alternative text for images, and test your visuals with real users.

  • Fitts's Law and Its Applications in UX

    The movement time to a target depends on the size of the target and the distance to the target.

  • Using Grids in Interface Designs

    Grids help designers create cohesive layouts, allowing end users to easily scan and use interfaces. A good grid adapts to various screen sizes and orientations, ensuring consistency across platforms.

  • The Dos and Don’ts of Pairing Typefaces

    When choosing typography to use in designs, narrow down your options by understanding the most common classifications, looking for typefaces with multiple variations and distinct characters, and pairing typefaces together with consistency and readability in mind.

  • Choosing Chart Types: Consider Context

    Clearly visualize your UX data by providing context and contrast, while avoiding clutter.

  • The Golden Ratio and User-Interface Design

    Although traditionally used in art and architecture, the golden ratio can be referenced to design aesthetically pleasing interfaces.

  • Principle of Closure in Visual Design

    People tend to fill in blanks to perceive a complete object.

  • Using Color to Enhance Your Design

    To support the user experience, colors need to be combined wisely so that they work together well, do not overwhelm, and communicate the same kind of information everywhere in the interface.

  • Left-Side Vertical Navigation on Desktop: Scalable, Responsive, and Easy to Scan

    Vertical navigation is a good fit for broad or growing IAs, but takes up more space than horizontal navigation. Ensure that it is left-aligned, keyword front-loaded, and visible.

  • Applying UX Principles to the Visual Design of Graphical Artifacts: The Case of the Heuristics Posters

    We made the 10 heuristics’ posters easy to read and understand by iterating through multiple versions and improving each based on user-centered principles and methods.

  • Why Does a Design Look Good?

    Visually aesthetic designs use consistent typography, establish a clear hierarchy, utilize a refined color palette, and align to a grid.

  • Aesthetic and Minimalist Design (Usability Heuristic #8)

    Aesthetically pleasing designs can provide memorable experiences that differentiate a brand. However, interfaces should only include necessary elements, with high informational value. Clarity will always win over visual flourish.

  • Visual Hierarchy in UX: Definition

    A clear visual hierarchy guides the eye to the most important elements on the page. It can be created through variations in color and contrast, scale, and grouping.

  • Vote By Mail: Mistakes Are Too Easy

    The design of vote-by-mail materials (made imperative by the COVID-19 pandemic) have UX issues that make the voting process unnecessarily difficult and error prone.

  • Similarity Principle in Visual Design

    Design elements that appear similar in some way — sharing the same color, shape, or size — are perceived as related, while elements that appear dissimilar are perceived as belonging to separate groups.