Rubric for visual design

Some qualities of good visual design

Organized. The arrangement of elements should make the structure of the page apparent. Related items should look related, and distinct groups should be distinguishable. Users should not have to read every word to discover how the page is organized.

Selective. Give prominence to what matters. Size, position, spacing, weight, and color should help users notice important information and actions. If everything demands attention, nothing stands out.

Readable. Text should be comfortable to read at the size at which the app will be used. Pay attention to contrast, line length, spacing, and the amount of text presented at once.

Consistent. Typography, colors, spacing, and controls should follow a coherent set of choices. A difference in appearance should have a reason; users should not have to wonder whether two differently styled buttons behave differently.

Appropriate. The appearance should suit the app’s purpose and content. A reading app, a monitoring dashboard, and a party game need not look alike. Choices should follow from what users need to see and do.

Some pitfalls

Everything is emphasized. Several bright colors, large headings, bold labels, and outlined boxes compete for attention. The page is busy, but it does not tell the user where to look.

Grouping by accident. A label is closer to the wrong field, or the space between unrelated items is smaller than the space within a group. The layout suggests relationships that the content does not have.

Decoration without purpose. Colors, borders, icons, and shadows have been added to make the page look designed, but obscure its organization or distract from its content.

A collection of components. Individual components look reasonable, but their typography, spacing, and proportions do not fit together. Using a component library has not produced a coherent page.

Competency levels

Deficient. The presentation makes important content difficult to read or the page structure difficult to understand. Visual choices interfere with using the app.

Emergent. The content is readable and some organization is apparent, but the hierarchy is weak or inconsistent. Users must inspect the page closely to distinguish important actions, related information, or different states.

Competent. The pages are readable, coherent, and clearly organized. Typography, spacing, and color help users distinguish groups and find important information and actions. The design may be conventional, and some details may still feel unresolved.

Expert. The visual design makes the app’s content unusually easy to grasp. Users can see both the overall organization and the details that deserve attention. The pages are a pleasure to use, with a character appropriate to the app; even a dense or unfamiliar screen feels carefully composed.