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.

---

| | 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 |

---

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

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

---

**🎯 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.

{{Video|src=https://www.youtube.com/watch?v=lJipkxgMSF0}}

**✍️ 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.

---

**🎯 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.

{{Video|src=https://www.youtube.com/watch?v=CjKpg_N42Cw}}

**✍️ 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.

---

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.

---

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.

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.

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

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.

---

1. 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.

2. 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.

3. 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."

---

- [Annotated Mock-up in Excalidraw](/sd/C05/Annotated%20Mock-up%20in%20Excalidraw)

- [C04 → C05 — Choose, then Detail](/sd/C05/C04%20to%20C05%20-%20Choose%20then%20Detail)

---

← Back to [C05 Home](/sd/C05/C05-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)