Visual communication principles

Visual communication principles

Learning intention

WALT

We are learning to use visual elements and principles to communicate interface structure and meaning.

WILF

• Distinguish visual elements from design principles.
• Identify evidence of balance, contrast, proximity, harmony, alignment, repetition and hierarchy.
• Explain how a visual decision affects a user task.
• Recommend refinements without relying on decoration alone.

Cognitive verbs

• Recognise: identify facts or characteristics from what you know.
• Describe: give an account of features or characteristics.
• Analyse: break down information to reveal relationships.
• Determine: use evidence or reasoning to reach a conclusion.
• Explain: make an idea or relationship clear by showing how or why.
• Evaluate: make a judgment about quality using evidence.
• Recommend: propose an appropriate action for the context.
• Justify: support a conclusion with evidence or reasoning.

Elements are materials; principles organise them

Visual elements are the building materials visible in a composition. Principles describe how those elements are arranged to communicate.

Elements	Principles
Space, line, colour, shape, texture, tone, form, proportion and scale	Balance, contrast, proximity, harmony, alignment, repetition and hierarchy

Visual elements

• Space: occupied and empty areas; separates groups and reduces crowding.
• Line: divides, connects or guides attention.
• Colour: can distinguish state, category or emphasis when used accessibly.
• Shape: creates controls, containers and recognisable symbols.
• Texture: suggests surface or variation; usually restrained in interfaces.
• Tone: relative lightness and darkness.
• Form: appearance of three-dimensional volume.
• Proportion: size relationship between parts.
• Scale: size relative to a reference, screen or user context.

Not every interface needs every element to be visually obvious. Use them to communicate, not to fill space.

Recognise the element

A form uses blank space between address and payment sections, a thin rule beneath the heading and a much larger title. Identify the main element in each decision.

Check your answer

Space separates the sections; line divides the heading; scale and proportion distinguish the title.

Balance

Balance distributes visual weight so a composition feels stable. Symmetrical balance mirrors weight; asymmetrical balance uses different elements with comparable visual influence.

A large chart on the left may be balanced by a grouped summary and controls on the right. Balance does not require identical halves.

Contrast

Contrast creates a noticeable difference using colour, tone, shape, size, weight or space. It helps users distinguish content and action.

• Dark text on a light background supports readability.
• A larger, heavier heading distinguishes it from body text.
• A primary action can stand out from secondary actions.
• A warning can combine text, symbol and visual emphasis.

Colour contrast supports accessibility, but visual communication should not rely on colour alone.

Explain the effect

A dashboard displays every label, heading and button at the same size and weight. Explain how contrast could improve it.

View a sample solution

Use stronger size and weight contrast for screen and section headings, and distinguish the primary action from secondary controls. Users can then scan the structure and locate the next action without reading every item equally.

Proximity and alignment

Proximity places related items closer together and separates unrelated groups. Alignment places elements along shared edges or axes to create order.

A field label should sit closer to its own input than the previous input. Form fields aligned to a consistent edge are easier to scan.

Diagnose grouping

A validation message appears halfway between two fields, and buttons use unrelated left edges. Analyse the visual communication problems.

Check your answer

Ambiguous proximity makes it unclear which field caused the error. Place the message directly beside or below its field. Align related controls to consistent edges so the form has a predictable reading path.

Repetition and harmony

Repetition reuses visual patterns such as typography, icon style, spacing and component appearance. Harmony is the coherent overall relationship among elements.

• Repeated card structure lets users learn where each value appears.
• Consistent button styles communicate similar behaviour.
• A compatible type and colour system creates a unified experience.

Repetition supports learnability, but identical styling should not be applied to actions with different importance or risk.

Hierarchy

Hierarchy communicates order and importance. It can be produced through scale, position, contrast, spacing and grouping.

1. Screen purpose or urgent state
2. Section headings and primary task
3. Supporting content and secondary actions
4. Metadata and low-priority detail

Hierarchy should reflect user goals, not the organisation's desire to promote every feature.

Rank the content

An emergency-alert screen contains the warning type, affected location, time, safety action, app logo and settings link. Determine a useful hierarchy.

View a sample solution

Make the warning type and required safety action most prominent, followed by affected location and time. Keep the app identity visible but secondary, and place settings outside the urgent reading path.

Principles work together

A section heading may use larger scale and darker tone for contrast, align with its fields, repeat a type style used elsewhere and sit close to related controls. Together these choices create hierarchy and harmony.

Evidence	Principle	User effect
Related label and value are close	Proximity	Relationship is interpreted correctly
All cards share structure	Repetition	Information becomes predictable
Primary action is prominent	Contrast and hierarchy	Next action is found quickly

Evaluate with a cause-and-effect chain

The interface uses [element evidence] to create or weaken [principle]. This [effect on perception or grouping], helping or hindering [specific user task].

Weak: The colours have harmony and look professional.

Stronger: The interface repeats one restrained colour palette and icon style across all booking cards, creating harmony and making components feel related. A contrasting status label still distinguishes cancellations without disrupting the overall system.

Independent practice: repair dashboard

A repair dashboard has these features:

• all text, including headings, uses the same size and weight
• status is indicated only by red, amber or green text
• each card places its address in a different position
• large empty gaps appear inside cards, but unrelated cards touch
• the Delete button is larger than Update status
• icons come from several unrelated visual styles.

1. Analyse four visual communication problems using four different principles.
2. Recommend one specific refinement for each.
3. Justify each refinement using a worker's task.

View a sample solution

• Hierarchy/contrast: Increase heading scale and weight so workers can scan sections and job names.
• Contrast/accessibility: Add text and symbols for status, with sufficient tonal contrast, so meaning does not depend on colour.
• Alignment/repetition: Use one card grid with the address in the same aligned position, reducing search time.
• Proximity: Keep content within each card close and separate cards with consistent space so relationships are clear.
• Hierarchy: Make Update status the primary action and reduce visual emphasis on Delete, matching task frequency and risk.
• Harmony/repetition: Use one consistent icon family so meaning and component style are predictable.

Review and exit ticket

1. How do elements and principles differ?
2. How can proximity communicate without borders?
3. Why is hierarchy not the same as making everything large?
4. How can repetition both help and harm?

Check your answers

1. Elements are visual materials; principles organise them.
2. Related items are close and unrelated groups have more separation.
3. Hierarchy uses relative differences to communicate priority.
4. It creates predictability, but identical treatment can hide differences in importance or danger.

Exit ticket

Choose one interface you used today. Evaluate one visual principle using specific evidence and a task consequence.