Mock-ups 📝

In UI Design it is most important to demonstrate how the user will interact with your application. Sketches, wireframes, and mock-ups are used at different stages of development to plan and visualise the interface.

• Sketches

  • Quick, freehand drawings

  • Used early to explore ideas

  • Focus on layout and basic function

  • Not detailed or to scale

• Wireframes

  • Structured, simplified layouts

  • Show placement of UI elements (buttons, menus, images)

  • Often in black and white or grayscale

  • Help define content hierarchy and functionality

• Mock-ups

  • High-fidelity visual designs

  • Include colours, fonts, spacing and branding

  • Look like the final product but aren’t interactive

  • Used for client presentation or UI testing

Key features of mock-ups¶

• Visual accuracy:

  • Display exact colours, fonts, spacing, icons, images, and branding

  • Represent the final visual style of the UI

• Not interactive:

  • Unlike prototypes, mock-ups do not include clickable elements or animations

  • They show appearance, not behaviour

• Used for feedback:

  • Help clients, stakeholders, and users understand what the final product will look like

  • Allow for early visual testing and feedback before development begins

• Created with design tools:

  • Common tools include Figma, Adobe XD, Sketch, or Canva

Purpose in UI design¶

• Communicate detailed visual design choices

• Support decision-making about colours, typography, and layout

• Identify visual issues before coding

• Bridge the gap between wireframes and prototypes

For Digital Solutions¶

• an essential way of demonstrating how the success criteria have informed your design decisions

• demonstrate your understanding of usability principles and visual communication

Annotations¶

A mock-up on its own shows what the interface looks like. Annotations explain the thinking behind the design — why elements are placed where they are, which success criteria they address, and how usability principles are applied. The QCAA syllabus explicitly identifies annotations as a specific language feature for communicating in Digital Solutions.

Annotations typically take the form of:

• labels pointing to specific UI elements with brief explanations

• codes or numbers that link directly to a numbered success criterion

• short justifications explaining how a design decision addresses a usability principle or user need

What makes a strong annotation:

• It is specific to the element it refers to, not a general statement

• It links the design decision to a success criterion, usability principle, or user need

• It explains why the decision was made, not just what was done

Annotations in assessments¶

Annotations on mock-ups contribute to marks across all three internal assessments. The evidence they provide is distinct from the visual design itself — the mock-up shows what, the annotation demonstrates understanding of why.

IA1 — Technical Proposal

In IA1, annotated sketches or mock-ups are assessed under the Symbolising descriptor of the Comprehending criterion.

• At the competent level, annotations support the clarity of ideas and show awareness of the user problem and solution goals.

• At the adept level, annotations strengthen ideas through reasoning, justification, or explicit links to the success criteria.

This means your annotations need to go beyond describing what is on screen. They should explain how design decisions respond to the user problem and connect to your proposed success criteria.

IA2 — Digital Solution

In IA2, annotated mock-ups form part of the evidence for developing possible solutions. Responses must show work in progress — earlier iterations of components with annotations identifying possible solutions for user interfaces, data, and programmed components.

High-level responses focus on problem-specific features and decisions rather than generic ones. For example, annotating why a particular input validation approach was chosen for the specific user need is stronger than noting that input validation exists.

IA3 — Digital Solution

In IA3, annotations on mock-ups and screenshots of developed interfaces are used to communicate interrelationships between components. Strong responses use:

• codes in annotations to make direct links to success criteria

• annotations with arrows to explain relationships between front-end and back-end components

• annotations that explicitly communicate relevant security and privacy considerations

Including earlier iterations of UI components alongside the final version — with annotations identifying what was refined and why — creates clear evidence of design thinking across the development process.