DRAFT — under teacher review.

Sketch vs Mock-up — They Are Not the Same Thing

The Hamilton and Alexandra College · Year 12 · 2026

A lot of marks are lost at the 3–4 / 5–6 rubric boundary — and almost always for the same reason: submitting a sketch and calling it a mock-up. This page shows exactly what each artefact is, what separates them, and what "annotated" actually means in VCE terms.

What each one is

	Sketch	Mock-up
Fidelity	Low — rough, no colour, placeholder labels	High — real colours, real fonts, real content
Content	Shows layout and structure only	Shows the actual interface as it will look
Annotation	Optional notes on layout ideas	Compulsory — every key control labelled with what it does AND why it is placed there
Tool	Pencil and paper, Excalidraw (lo-fi mode)	Excalidraw with UX library, Figma, Canva
VCE purpose	Brainstorm multiple ideas (C04 design pack)	Evidence for C05 — this is what gets assessed

Note

The VCAA study design defines a mock-up as "an annotated visual representation of the user interface". Annotation is part of the definition — not an optional extra. A polished screen design with no annotation labels is still not a valid mock-up.

The progression: sketch → mock-up

Here is one idea progressed through the three stages. Notice how much more each step adds.

flowchart LR
    A["🖊️ Sketch<br/>──────────<br/>Boxes + arrows<br/>No colour<br/>No real text<br/>Shows: where things go"]
    B["🎨 Mock-up<br/>──────────<br/>Real colours + fonts<br/>Real button labels<br/>Real nav flow<br/>Shows: what it looks like"]
    C["🏷️ Annotated Mock-up<br/>──────────<br/>Everything in mock-up<br/>PLUS: callout on every<br/>key control → what it<br/>does + why placed there<br/>Shows: design decisions"]
    A -->|"add fidelity"| B
    B -->|"add annotation"| C
    style C fill:#d4edda,stroke:#28a745

The highlighted box is what C05 requires. You need both the high-fidelity visual and the annotations — neither alone is enough.

🎬 Watch

Video 1 — Wireframe vs Mockup vs Prototype

🎯 Watch for: The video uses three tiers — wireframe, mockup, prototype. Map them onto our two VCE artefacts: their wireframe ≈ our sketch (lo-fi, layout only); their mockup ≈ our annotated mock-up (hi-fi, visual detail). Their prototype (clickable, working interactions) is beyond what C05 asks for — do not build a prototype for this task.

✍️ While you watch: As the video describes each tier, write one sentence in your own words matching it to either "our sketch" or "our annotated mock-up" — or "beyond C05" for the prototype tier. This mapping question comes up in the annotation validation.

Video 2 — Excalidraw in practice

🎯 Watch for: How Excalidraw's built-in wireframing libraries (Lo-Fi Wireframing Kit, Basic UX elements) let you drop in pre-built components — buttons, input fields, nav bars — so you spend time on design decisions, not drawing rectangles.

✍️ While you watch: Identify at least two components in the video that appear in your own interface (e.g. a text input, a navigation bar). Note the library name they come from — you may need to cite your tool in your design log.

For Level 9: completeness matters

At Level 9 the mock-ups must represent the complete interface — not just the main screen.

That means:

Every screen the user can reach is mocked up (login, dashboard, data entry, confirmation, error states).
Navigation between screens is shown — either as a flow diagram or as directional arrows on the mock-up set.
Each screen has its own annotations.

A single polished home-screen mock-up is a Level 5–6 submission, regardless of how good it looks.

Common mistakes

Mistake 1: Submitting a sketch and labelling it a mock-up

~~A pencil layout with grey boxes showing "button here" and "logo here"~~

A sketch shows structure. A mock-up shows what the interface actually looks like. If it has no colour, no real fonts, and no real content, it is a sketch.

Mistake 2: A polished screen with no annotations

~~A beautiful Figma screen with no callout labels~~

Without annotations, it is a screen design, not a VCE mock-up. Annotations must explain what each key control does and why it is placed where it is.

Mistake 3: Only the main screen

~~One annotated home screen, nothing else~~

C05 requires the complete interface. If your solution has four screens, you need four annotated mock-ups — plus navigation between them shown somewhere.

Mistake 4: Annotations that only describe

~~"This is a blue Submit button."~~

A description states what is there. An annotation explains the design decision — what the control does for the user and why it is positioned and styled that way.

Check Your Understanding

What two things make a high-fidelity screen design a valid VCE mock-up?

...

A valid VCE mock-up must (1) be high-fidelity — real colours, fonts, and content — and (2) be annotated — every key control labelled with what it does and why it is placed there. Both are required; either alone is insufficient.

A student submits a single beautifully annotated home screen. They are targeting Level 9. What is missing?

...

Level 9 requires the complete interface — all screens the user can reach, plus navigation between them shown. A single screen, however detailed, caps the submission at around Level 5–6.

What is the difference between an annotation that describes and one that justifies?

...

A describing annotation says what is there: "There is a blue Submit button." A justifying annotation says what it does for the user and why the design decision was made: "The Submit button uses a high-contrast blue to draw attention as the primary action, placed bottom-right to match the natural reading flow and reduce error submissions."