SmartToolz Learning Hub
Advanced TechnologyLesson 5

Processes and Services

Learn the concept, follow the practical steps, and apply what you learn through a simple activity.

Design principles are the rules that help visual elements work together. The elements from the previous lesson are your raw materials; principles such as hierarchy, contrast, balance, alignment, proximity, repetition and unity help you turn those materials into a clear composition.

1. Hierarchy: decide what gets noticed first

Hierarchy creates a visual order. A viewer should be able to recognise the most important message before reading every detail. Size, weight, colour, position and whitespace can all create hierarchy.

For a workshop poster, the event name might be largest, the date and time next, and supporting details smaller. If every line is equally large and bold, the viewer has to work harder to understand the message.

2. Contrast: create useful difference

Contrast separates things that should not look the same. You can create contrast through size, colour, weight, shape, texture or spacing. Good contrast improves scanning and can make an important call to action easier to find.

Smart tip: Contrast is not the same as making everything loud. One strong difference is often more effective than many competing effects.

3. Balance: control visual weight

Balance is about how visual weight is distributed across a composition. A large dark image can visually outweigh several small light elements. Symmetrical layouts often feel stable, while asymmetrical layouts can feel more dynamic when their visual weights are still controlled.

4. Alignment: create relationships

Alignment gives elements an invisible structure. Shared left edges, centres or baselines make a layout feel intentional. Use guides or a grid when possible.

5. Proximity: group related information

Items placed close together are usually perceived as related. Put an event date near the event title rather than leaving the date floating elsewhere on the canvas. Increase the gap between unrelated groups to make the structure easier to understand.

6. Repetition: build consistency

Repeating a visual treatment creates a system. The same heading style, button treatment, icon style or spacing rhythm can make several pieces of content feel like one brand.

7. Unity: make the design feel like one thing

Unity is the overall sense that the parts belong together. Consistent typography, colour, spacing, imagery and visual language help create unity.

How the principles work together

PrincipleMain questionUseful result
HierarchyWhat should the viewer notice first?Clear reading order
ContrastWhat needs to stand apart?Emphasis and readability
BalanceWhere is the visual weight?Stability or controlled energy
AlignmentWhich edges or centres should relate?Order and structure
ProximityWhich items belong together?Clear grouping
RepetitionWhat should feel consistent?Rhythm and recognition
UnityDo all parts feel like one system?Coherence

Real-world example: a mobile event poster

Imagine a 1080 × 1350 social post for a free design workshop. Make the workshop name visually dominant, keep the date and time close to it, use one deliberate accent for registration, align supporting details consistently and leave enough space around the main message for quick phone reading.

Practical exercise

  1. Create an event poster containing a title, date, location, short description and call to action.
  2. Make three clear hierarchy levels: primary, secondary and supporting information.
  3. Align the text to one main edge.
  4. Group related information with proximity.
  5. Use one deliberate contrast point for the call to action.
  6. Duplicate the poster and change only alignment or spacing. Compare which version is easier to scan.

Common mistakes

  • Making every element bold, large or brightly coloured.
  • Using alignment inconsistently between similar blocks.
  • Adding borders everywhere instead of using proximity and whitespace.
  • Using contrast without checking text readability.
  • Repeating decorative effects until the design loses hierarchy.

Quick self-check

  1. What should a viewer notice first in your design?
  2. Which elements are grouped because they belong together?
  3. Where is the strongest contrast, and why is it needed?
  4. Can you point to the alignment system?
  5. Which repeated choices make the design feel consistent?

Key takeaway

Design principles turn individual visual elements into an organised communication system. When a design feels confusing, check hierarchy, contrast, balance, alignment, proximity, repetition and unity before adding more decoration.

← Previous lessonNext lesson →
Advertisement