How to Review a UI Design: A Practical 7-Point Checklist Before You Ship

Design feedback often sounds like this:

“Something feels off.”

“Make it cleaner.”

“It needs to look more professional.”

Although such comments express a genuine reaction, they rarely tell a designer what actually needs to change.

Is the layout poorly aligned? Is the typography too weak? Are the colours competing with one another? Is the page crowded, or is the information hierarchy unclear?

A structured UI design review replaces subjective opinions with specific observations. Instead of deciding whether a design simply looks good or bad, you evaluate the elements that determine how polished, readable and usable it feels.

This guide presents a practical seven-point UI design checklist that you can use to review website pages, mobile app screens, dashboards, landing pages and digital posters.

What Is a UI Design Review?

A UI design review is the process of evaluating the visual structure and presentation of a digital interface before it is approved, developed or published.

A useful review does not focus only on decoration. It examines whether the interface:

• Communicates information clearly

• Guides attention to the right elements

• Uses spacing and alignment consistently

• Maintains readable typography

• Provides sufficient colour contrast

• Follows a repeatable visual system

• Feels intentional rather than accidental

A UI review can be performed manually by a designer, collaboratively by a team or with the support of an automated design analysis tool.

The purpose is not to remove creativity. It is to identify preventable problems before they reach users or clients.

Start by Identifying the Design Context

Before evaluating a screenshot, identify what type of design you are reviewing.

A landing page should not be judged in exactly the same way as a mobile app screen. A dashboard may contain more information than a promotional poster, while a poster may rely more heavily on colour and visual hierarchy.

Ask these questions first:

• Is this a website, mobile interface, dashboard or poster?

• What is the primary action users should take?

• What information should users notice first?

• Who is the intended audience?

• Is the design being reviewed as a full page or as an individual component?

Once the context is clear, review the design across the following seven areas.

1. Colour Usage and Contrast

Colour should help users understand the interface. It should not be added only to make the design look more exciting.

Start by identifying the roles assigned to different colours.

A well-planned interface commonly includes:

• A primary brand colour

• One or two supporting colours

• Neutral background and surface colours

• Text colours

• Status colours for success, warning and error messages

Problems appear when too many colours compete for attention or when visually similar colours are used without a clear purpose.

Questions to ask

• Is the primary colour used for the most important actions?

• Are too many bright colours competing on the same screen?

• Is body text clearly readable against its background?

• Are buttons visually distinct from decorative elements?

• Do error and success states rely on more than colour alone?

• Does the palette feel consistent with the brand?

For accessibility, WCAG 2.2 specifies a minimum contrast ratio of 4.5:1 for normal text and 3:1 for qualifying large text. These should be treated as minimum thresholds rather than visual preferences.

Low-contrast text may appear elegant in a design file but become difficult to read on smaller screens, low-quality displays or in bright environments.

Quick colour test

Convert the design to greyscale temporarily.

If the main heading, supporting content and primary action all appear to have similar visual weight, the design may be relying too heavily on colour instead of building a strong hierarchy.

2. Spacing

Spacing is one of the fastest ways to distinguish a polished interface from an unfinished one.

Good spacing creates relationships. Elements positioned close together appear connected, while larger gaps communicate separation between different groups.

Spacing problems usually occur when values are chosen individually instead of following a system.

For example, one card may use 20 pixels of padding, another 27 pixels and a third 32 pixels without a clear reason. Each difference may appear small, but together they make the interface feel inconsistent.

Questions to ask

• Is the space between related elements smaller than the space between separate sections?

• Do cards and containers use consistent internal padding?

• Are headings positioned close enough to the content they introduce?

• Is text crowded against icons, borders or buttons?

• Does the page contain enough breathing room?

• Is the mobile version more compressed than necessary?

You do not have to use an eight-pixel system in every project. What matters most is that spacing values feel intentional and repeatable.

A simple spacing scale might include:

• 4px for very small gaps

• 8px for closely related elements

• 16px for standard component spacing

• 24px for grouped content

• 32px or more for larger sections

The exact numbers can change, but the relationships should remain consistent.

3. Alignment

Users may not consciously identify a five-pixel alignment error, but they often sense that something is wrong.

Alignment creates visual order. When headings, paragraphs, buttons, cards and images share common edges, the interface becomes easier to scan.

Questions to ask

• Do section headings begin on the same vertical line?

• Are cards aligned consistently within their grid?

• Do icons and labels share a common centre or baseline?

• Are button labels properly centred?

• Are form fields and labels aligned?

• Do left and right margins remain consistent?

• Are elements aligned to a deliberate grid?

Turn on layout guides in your design software and follow the major visual lines through the page.

Misalignment commonly appears in:

• Cards with different internal padding

• Buttons containing icons

• Form labels and inputs

• Pricing tables

• Navigation bars

• Mixed text and image sections

• Components copied from different design files

Correcting alignment often improves a design without changing its colours, typography or content.

4. Visual Consistency

Consistency reduces the number of visual rules users need to understand.

If every button, card, form field and heading follows a different style, users must repeatedly interpret the interface. A consistent system makes interactions more predictable.

Questions to ask

• Do similar buttons use the same height and radius?

• Are heading sizes reused consistently?

• Do all cards use the same shadow treatment?

• Are icons drawn in the same style?

• Do form fields have consistent borders and focus states?

• Are similar sections structured in similar ways?

• Are the same spacing values repeated throughout the interface?

Consistency does not mean every section must look identical. It means differences should communicate purpose.

A primary button can look different from a secondary button because it has a different role. Two primary buttons performing equally important actions should not look unrelated.

Create a small interface inventory during your review. Record the different button styles, font sizes, border radii, shadows, icon styles and spacing values being used.

Unexpected duplicates often reveal where the design system has started to break down.

5. Visual Hierarchy

Visual hierarchy determines the order in which people notice and process information.

Every screen should answer three questions:

1. What should users notice first?

2. What should they understand next?

3. What should they do after that?

Hierarchy is created through several properties:

• Size

• Weight

• Colour

• Contrast

• Position

• Whitespace

• Scale

• Repetition

A larger element is not automatically the most important. A small, high-contrast button may attract more attention than a large grey heading.

Questions to ask

• Is there one obvious focal point?

• Can users identify the page purpose quickly?

• Is the primary action more visible than secondary actions?

• Are headings clearly differentiated from body text?

• Is supporting information visually quieter?

• Are too many elements competing for attention?

• Does the eye move through the design in a logical sequence?

A useful test is to zoom out until individual words become difficult to read.

At that distance, you should still be able to identify the main heading, major sections, images and primary call to action. If everything blends into one visual block, the hierarchy needs improvement.

6. Typography

Typography affects both the personality and usability of an interface.