Curated Resource ( ? )

Good Visual Design, Explained

Like visual content , visual design

Curated: 17/11/2025 from www.nngroup.com/articles/good-visual-design/

my notes ( ? )

In this 3rd article in the anatomy-of-good-design series, I explain visual-design principles that contribute to good-looking designs, with real-site examples. How something looks does affect the perception of how well it functions.

Visual Principle: Grid Use and Alignment

Grids help designers create cohesive layouts, allowing end users to easily scan interfaces. A good grid adapts to various screen sizes and orientations, ensuring consistency across platforms. Grids are made up of columns with gutters between them. While there is no ideal gutter size, different gutter sizes are suited to different purposes.

Example: 3-Column Grid Base with Thin Gutters

This page from Flamingo Estate uses a 3-column grid, with thin gutters.

The product images and content align to the columns, providing a predictable and organized shopping experience for end users. The thin gutters provide just enough space to distinguish between the products, and work well because the product images are quite airy.

Example: 4-Column Grid Base with Wide Gutters

This page from Figma Shortcut uses a 4-column grid with wide gutters. Text and other elements can span multiple columns, making them appear as one wide column. It's common for content to extend into the gutter when spanning multiple columns.

The main body text is aligned to the middle two columns, while extra text (like callouts) is anchored in the left and right columns (in the image below, the left column has been cropped out, as it does not contain any callouts). This ample separation between callouts on the right and the main body text in the center helps create a readable design.

Be sure to use a grid in your designs to keep alignment consistent across different pages and elements.

Visual Principle: Use of a Typographic System

Typography is a key component of every design. It not only can increase webpage legibility (and therefore, usability) but can also make a design feel polished. Let’s break down a couple of examples.

Example: Hierarchy Created Through Typography

This example is from Seed.com, a probiotic company. Except for the phrase Viacap technology, this design uses one font family (small caps, medium, regular) and uses white for all text color. The font is clean and easy to read, allowing the user to focus on the content, rather than the typography.

Despite using only one text color and a font family with minimal visual differences across regular and medium weights, the design still achieves text hierarchy. This is accomplished through size.

The largest size (Most probiotics don’t survive digestion) calls the most attention and, therefore, is the element your eye reads first.
The middle size, which signals medium importance, is the text Increases healthy digestion by 4.6x.
The smallest text size, which breaks down the capsule design, is less vital to be read by the user.

As a rule of thumb, limiting your designs to 3 type sizes will establish a strong hierarchy without overwhelming the design or user.

Example: Typography for Reading

Just like in our previous example, three text styles are present in Figma Shortcut’s design. They establish a clear visual hierarchy:

A larger, bold style used for the introduction of the article
The medium style for the main body-copy text
A smaller style for captions and callouts

However, even more important in this example is that the type system was designed and used with reading in mind. Shorter lines of text and just right leading (i.e., the distance between the baselines of two consecutive text line) make reading easier, as the eye can quickly go from one text line to the next, without accidentally skipping a line.

Consider slightly increasing the default leading if you have a lot of text (either several paragraphs or longer paragraphs), as walls of text can feel overwhelming.

Visual Principle: Strategic Color Palette

Aside from the grid and typography, color is one of the most important design tools. Color can set the brand tone and influence brand perception, draw users’ attention, affect their emotions, and increase usability. Using color strategically can be challenging. Let’s break down how color is used in a couple of examples.

Example: Monochromatic Color Palette

Seed.com’s color palette is limited to shades of green and white. This monochromatic color palette (i.e., tones and shades of a single hue or color) creates a pleasant and polished experience, while emphasizing the content. Monochromatic palettes are the easiest to work with and create, and are the most accessible to novice visual designers. (The ability to strategically select and combine colors is a complex skill that’s often underestimated by nondesigners.)

The shades of green are sophisticated and refined — neither too bright nor overly saturated. When choosing color shades for your design, exercise caution with neon colors (such as highlighter yellow), as they may distract users and affect the overall effectiveness of the design.

Example: Color Reserved for Product Photos

In the example from Flamingo Estate, the color palette is also monochromatic, relying mostly on shades of white and cream for the page’s background color, as well as for some button text (e.g., Add to Basket). Refined green colors are also used in the palette but are reserved mostly for text backgrounds or for typography.

Because this design relies on just two main colors, white and green, the product photos can take center stage, without overwhelming users.

In your own designs, limiting your color palette to just two colors will create balance and enforce visual hierarchy. Only if you have extensive color experience should you experiment with more complex color harmonies.

Visual Principle: Useful Imagery

The use of imagery in visual design plays a critical role in engaging users and conveying brand identity. Let’s look at a couple of examples.

Example: Intentional Imagery

Imagery is used purposefully in Seed.com.

The image in the right column adds valuable information about the product being sold. This image is direct, with no visual clutter to distract from the product. The background image creates an interesting pattern reminiscent of viewing cells under a microscope. To keep the background from becoming too distracting for reading, a glassmorphic element is placed between the type and image background.

The imagery subtly contributes to the impression that Seed.com’s designers are surely looking to achieve — that the company’s product is backed by scientific research.

Example: Balanced, Direct Imagery

In Flamingo Estate’s product photos, the actual products are in the center of the photograph. There is no additional, potentially distracting visual clutter. The resulting image is a balanced and direct image. The product photos are centered within the grid columns, further enhancing the sense of balance and symmetry.

On hover, the image changes, revealing additional information about the product (in this case, the inclusion of a tomato alludes to the composition and fragrance of the soap). The Add to Basket button is also center-aligned, further adding to the design's sense of balance.

Designs Don’t Look Good by Chance

Be intentional about decisions you make in your design by relying on well-established visual-design principles. Align typography and other elements to a grid, establish a clear visual hierarchy, use color strategically, and be consistent in your application of various design elements. These core principles will create the foundation for a beautiful, usable design.

Related Courses

Learn More:

Read the Full Post

The above notes were curated from the full post www.nngroup.com/articles/good-visual-design/.