> **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. ```mermaid 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. {{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. --- ### 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. {{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. --- ## 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 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." --- ## See also - [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) - [Data Dictionary](/sd/C05/Data%20Dictionary) - [Design Principles vs UX Characteristics](/sd/C05/Design%20Principles%20vs%20UX%20Characteristics) --- ← Back to [C05 Home](/sd/C05/C05-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)