FIT5152 Chap.7 Visual Design Elements and Principles
Visual Design Elements and Principles
Week 7 treats visual design as part of usability rather than decoration. The seminar explains how good visual design improves aesthetics, attracts attention to important features and communicates more clearly, and it breaks every screen into six elements: lines, shapes, colour, typography, texture and space.
Colour is described through hue, saturation and value, typography as a balance of legibility and personality, and texture through the debate between skeuomorphic imitation of real materials and flatter modern styles. Accessible implementation runs through all of it, from legible typefaces to never letting colour carry meaning on its own.
The second half covers the principles that organise those elements.
Scale, visual hierarchy, balance, contrast and repetition each have a precise definition, with practical limits such as using no more than three sizes in most designs. Five Gestalt principles, similarity, continuation, proximity, figure-ground and common region, explain how the eye groups separate items into wholes.
The chapter ends with icon design, including Susan Kare’s description of icons as puzzles that marry an image and an idea, and with design systems such as Apple’s Human Interface Guidelines, Material Design and Fluent. Submission 3 accepts visual design and Gestalt principles as theory for justifying high-fidelity screens.
What this chapter covers
- 01
Six elements of visual design
- 02
Colour, typography, texture and space
- 03
Scale and visual hierarchy
- 04
Balance, contrast and repetition
- 05
Gestalt principles of perception
- 06
Icons, graphics and design systems
Worked example · free
Justifying a fitness-tracker summary card with Gestalt and hierarchy
- 1Name a principle for the type sizes: visual hierarchy, built through scale, because steps are the primary metric and the eye reaches them first.
- 1Support it with the size rule: only three type sizes are used, keeping the hierarchy clear without adding load.
- 1Name a Gestalt principle for the panel: common region, because the shared boundary groups the three metrics as one summary.
- 1Link both to the user: a glance answers “how am I doing today?” without reading every number.
Key terms
- Visual Hierarchy
- The arrangement that leads the eye from the most important element on a screen to the least.
- Scale
- Using relative size so that the most important elements look biggest and most dominant.
- Common Region
- The Gestalt principle that elements inside a shared boundary are perceived as one group.
- Skeuomorphism
- Design that imitates the appearance or behaviour of a similar object made from another material.
- Design System
- A shared library of reusable interface parts plus the standards for combining them into many applications.
- Figure-Ground
- The Gestalt principle by which people separate an object from its background using positive and negative space.
- Hue
- The attribute that identifies what a colour is, distinct from its saturation and value.
- Proximity
- The Gestalt principle that elements placed close together are perceived as one group.
Visual Design Elements and Principles FAQ
How many font sizes should a screen use?
The seminar’s rule for scale is to use no more than three different sizes in most designs, because more sizes add cognitive load without adding clearer meaning.
What is the difference between scale and visual hierarchy?
Scale is one tool, using relative size to signal importance. Visual hierarchy is the overall order in which the eye moves through a screen, and it can be built from size, brightness, colour, alignment and spacing together.
Is skeuomorphism still recommended?
The seminar describes its popularity as fading. It helped people transfer real-world knowledge, but users now know screen conventions, and heavy imitation can cause clutter, false affordances and slower performance.
Why add text labels to icons?
Universal icons are rare, so an icon on its own can be ambiguous. Labels improve usability and help people learn what the icon means, after which the icon alone becomes easier to recognise.
Assessment move
Collect five screenshots of apps you use and annotate each with one visual design principle and one Gestalt principle, writing the element, the principle and the user benefit in a single line. Then redraw one cluttered screen in grey boxes only, applying a three-size type scale and grouping related items by proximity or common region, and compare the before and after.
Memorise the precise definitions of scale, hierarchy, balance and contrast, since paraphrases often drift into describing something else. Finally, sketch three icon ideas for one action, show them to a friend at a small size without labels and note what they guess; the exercise makes the seminar’s point about ambiguous icons far more memorable than any slide.
Working through Visual Design Elements and Principles in FIT5152? Sia is AskSia’s AI Information Technology tutor — ask any FIT5152 Visual Design Elements and Principles question and get a clear, step-by-step explanation grounded in how FIT5152 is taught and assessed. Read this chapter free, then take your hardest questions to Sia.
