Visual design is the practice of arranging images, text, colour and space so that a screen is both attractive and easy to understand. It uses elements of visual design – the basic building blocks such as line, shape, direction, size, texture, colour and value – and principles of visual design – the rules for combining them, such as unity, Gestalt, space, balance, hierarchy, contrast, scale, dominance and similarity.

In Unit 1 we used many of these ideas for artwork in Colour Theory, Texture, Composition and Layout. Here we apply them to interactive screens: menus, HUDs, icons and game worlds that players must read quickly while they play.

The seven elements of visual design

Element	What it is	How games use it
Line	A mark joining two points; can be straight, curved, thick or thin.	Borders around panels, paths leading the eye to a door, speed lines.
Shape	A closed area: geometric (squares, circles) or organic (natural, irregular).	Round shapes feel friendly (coins, hearts); sharp shapes signal danger (spikes).
Direction	The way a line or shape appears to point or move.	Arrows and diagonal compositions suggest where to go next.
Size	How big or small something is.	Big buttons for important actions; large enemies feel powerful.
Texture	How a surface looks or feels (rough, smooth, shiny).	Wood grain on a menu panel, rough rock that tells you a wall is climbable.
Colour	Hue, saturation and brightness.	Team colours, red for damage, gold for rewards (see the next post).
Value	How light or dark a colour is.	Bright important objects stand out from darker backgrounds.

The principles of visual design

Unity

Unity means all parts of a design look like they belong together: the same fonts, icon style, colour palette and corner shapes. A cartoon game with one realistic, photographic button breaks unity.

Gestalt

Gestalt (German for “whole form”) describes how our brains group separate parts into a whole. Key Gestalt principles are proximity (things close together belong together), similarity (things that look alike are related), closure (we complete missing parts of a shape), continuity (we follow smooth lines and curves) and figure–ground (we separate an object from its background).

Space

Space (or white space / negative space) is the empty area around and between elements. Space gives the eye room to rest and makes grouped items clearer. Crowded HUDs are hard to read in the middle of the action.

Balance

Balance is the distribution of visual weight. Symmetrical balance (mirror image) feels calm and formal, which suits title screens. Asymmetrical balance (different items with equal weight) feels dynamic and modern.

Hierarchy

Hierarchy shows the order of importance. The player should notice the most important thing first (for example “Play”), the second most important next, and so on. Size, colour, value and position all create hierarchy.

Contrast

Contrast is the difference between elements – light and dark, big and small, warm and cool. High contrast makes text readable and makes collectables pop out of the background. Accessibility guidelines recommend strong contrast between text and its background.

Scale

Scale is the size of objects compared with each other and with the player. A tiny hero next to a huge castle creates a sense of adventure; giant text creates drama.

Dominance

Dominance is when one element clearly takes the lead as the focal point. Every screen should have one dominant element. If everything shouts for attention, nothing is noticed.

Similarity

Similarity means elements that share colour, shape or size are seen as a group. In games, all collectable items might share a glow, and all enemies might share a red outline, so players learn the rules at a glance.

The Nielsen Norman Group explains how Gestalt principles help people make sense of interfaces in this short video:

Example

Consider a level-select screen that shows 12 levels. A designer applies the principles like this:

• Proximity and similarity: the 12 level buttons are the same round shape and sit together in a grid, so players understand they are all levels.
• Contrast and value: unlocked levels are bright; locked levels are dark grey with a padlock.
• Dominance and hierarchy: the next level to play is larger and gently pulses, so it is the first thing players see.
• Space: there is plenty of room between the grid and the “Back” button, so no one taps the wrong thing.
• Unity: the buttons use the same wooden texture and font as the rest of the game.

Exercise

1. Take a screenshot (or sketch) of a game menu. Label at least five of the seven elements of visual design on it.
2. Find examples of proximity, similarity and closure in a game, an app or a logo. Explain how each helps the viewer.
3. Redesign a cluttered screen: list what you would remove, group, enlarge or recolour, and name the principle behind each change.
4. Create a simple title screen wireframe that uses symmetrical balance, then a second version that uses asymmetrical balance. Which suits your game better, and why?

Next: Colour Theory for Game Design and Animation: Meaning, Harmony, Contrast and Colour-Blind Accessibility

Syllabus link: This post is relevant to the CAPE® Animation and Game Design Syllabus, Unit 2: Interactive Design and Game Development, Module 1: Introduction to Interactive Design – Specific Objective 9 (“identify the basic elements of visual design”); Specific Objective 10 (“outline the principles for creating a visual design”).

Attributions to media used in this post:

Reification.jpg – Slehar at English Wikipedia – Public domain (via Wikimedia Commons)

KaniszaTriangle move.gif – Sergejpinka – CC BY-SA 2.5 (via Wikimedia Commons)

© 2026 Vedesh Kungebeharry. All rights reserved.