Visual Design Basics

Introduction

Visual design is not decoration. It is how we communicate what matters, what to do next and how things relate. A few simple principles can make an interface clearer, even if you are not an artist.

Visual hierarchy

Hierarchy shows what is most important, then next. People scan before they read. Create hierarchy with:

• Size: larger things draw attention first
• Weight and contrast: bold, dark text stands out from light
• Position: top and left (in left-to-right languages) get noticed early
• Space: isolated items stand out
• Colour: one accent colour for the main action

Each screen should have one clear main action. If everything shouts, nothing is heard.

Space, grouping and alignment

• Proximity: things that belong together should be close. Put more space between groups than within them.
• Alignment: line things up on a clear grid. Messy alignment looks careless and is harder to scan.
• Consistency: use the same spacing, sizes and styles for the same kinds of things.
• White space (empty space) is not wasted. It gives the eye rest and separates ideas.

Typography

• Use one or two typefaces. A clear, simple one for body text is best.
• Size: body text of at least 16 pixels on screens is a common baseline.
• Line length: about 50 to 75 characters per line is comfortable to read.
• Line spacing: about 1.4 to 1.6 times the text size for paragraphs.
• Create levels with size and weight: page title, headings, body, small print.
• Avoid long passages in capitals, tiny text and centred paragraphs.
• Left-align body text in left-to-right languages.

Colour

• Start with one main colour, a neutral set (white, greys, black) and status colours for success, warning and error.
• Use colour consistently: for example, one colour always means "primary action".
• Never use colour as the only signal. An error should also have an icon or text, since some people cannot tell certain colours apart.
• Consider cultural meanings of colours when designing for different audiences.

Contrast and accessibility

People need enough contrast between text and background to read comfortably, especially with low vision, glare or small screens. The Web Content Accessibility Guidelines (WCAG) set a minimum contrast ratio of 4.5 to 1 for normal text, and 3 to 1 for large text.

Ratios calculated for text on a white background:

A tiny change from #767676 to #777777 moves it across the line. Use a free contrast checker to test your colours instead of trusting your eyes. Check text on coloured buttons and images too.

Images and icons

• Use images that support the message, not just fill space.
• Add alt text for meaningful images.
• Icons need labels, since meanings vary. A magnifying glass is understood, many others are not.
• Keep touch targets large enough for fingers. A common guideline is around 44 pixels square or more.

Keep it simple

The best designs usually remove things. For each element, ask: does it help the user do their task? If not, take it away. Consistent, familiar patterns reduce effort, because people already know how they work.

Try it yourself

Take a screenshot of a page you find cluttered. Redraw it with one clear primary action, clear groups with space between them and no more than two font sizes for body text. Check the contrast of three of your colour choices with a free checker.

Summary

• Hierarchy, proximity and alignment guide attention and show structure, with one main action per screen.
• Choose readable type, a simple palette used consistently, and never rely on colour alone.
• Check contrast against WCAG, with 4.5 to 1 for normal text, and keep the design as simple as possible.