> **DRAFT** — under teacher review. # Annotated Mock-up in Excalidraw — Reusable Template The Hamilton and Alexandra College · Year 12 · 2026 Setting up a fresh Excalidraw file from scratch each time costs 10+ minutes and often produces sparse, inconsistent annotations. This page gives you a standard starting point: a blank screen frame with labelled callout arrows and a dedicated annotation zone, so your time goes into the annotations themselves rather than the scaffolding. --- ## What an annotated mock-up needs A VCE-compliant annotated mock-up is not just a sketch with some labels. It must show: | Element | What it means | |---|---| | **Screen frame** | A bordered rectangle representing the UI window or mobile screen — makes the layout context clear | | **Labelled UI components** | Named elements (button, text field, label, image area) placed inside the frame | | **Callout arrows** | Lines or elbowed arrows from a UI element to an annotation box — not floating text | | **Annotation text** | A sentence or two per callout: *what* the element is, *how* it applies a design principle, and *why* that serves the user | | **Design principle named explicitly** | "Contrast" not "I used a colour" | A rough sketch that labels what the screen contains (layout / structure) is a sketch. A mock-up adds the annotation layer that argues for design decisions. That distinction sits exactly at the 3–4 / 5–6 band boundary. --- ## Setting up the template in Excalidraw ### Step 1 — Open a new file Go to [excalidraw.com](https://excalidraw.com) and open a blank canvas, or use Excalidraw inside VS Code if your teacher has that set up. ### Step 2 — Draw the screen frame Use the **Rectangle** tool. Draw a large rectangle (roughly two-thirds of your canvas). This is your screen / application window. - Set **stroke** to black, **fill** to white or light grey. - Add a label at the top: small text inside the rectangle top edge, e.g. `Main Menu — ClubTracker`. ### Step 3 — Place UI components Inside the screen frame, add rectangles or rounded rectangles for: - Navigation bar (top strip) - Buttons (smaller rectangles with centred labels) - Text fields (narrow rectangles) - Image or chart area (rectangle with an X through it, or a placeholder label) Keep components sparse at first — you can add more as you build your design. ### Step 4 — Add the annotation zone Draw a rectangle to the **right** or **below** the screen frame, roughly the same height or width. Label it `Annotation Zone`. This keeps your callout text from floating over the UI. ### Step 5 — Add callout arrows For each UI element you want to annotate: 1. Select the **Arrow** tool; choose **elbow** style (right-angle corners look clean for callouts). 2. Click the UI element, drag to an empty spot in the annotation zone. 3. Add a text label on the arrow's endpoint (or use an attached text box). ### Step 6 — Write annotation text In each annotation box, write in full sentences. A minimum annotation for a 5–6 band: > "The navigation bar is aligned to the top edge of the screen (Alignment). This placement matches the user's expectation of where navigation lives, reducing cognitive load and supporting usability." For 7–8 or 9–10, also name the UX characteristic your design choice produces: > "The high-contrast login button (Contrast, design principle) makes the primary action immediately visible, improving affordance (UX characteristic) for first-time users." --- ## Standard annotation structure (copy and fill in) ``` [Design principle name]: [What element you applied it to] → Appearance / functionality: [one sentence describing the visual or behavioural choice] → Why it helps the user: [one sentence connecting to user need or UX outcome] ``` Example filled in: ``` Contrast: Login button vs background → Appearance: Button uses dark blue (#1a56db) against a white background, with white button text. → Why it helps the user: The high contrast makes the primary action visible at a glance, supporting affordance — users immediately know what to click. ``` --- ## Saving your template Once your blank screen frame, annotation zone, and one sample callout are set up: 1. Press **Ctrl+A** (select all) then **Ctrl+C** (copy). 2. Open a new Excalidraw file for your next screen. 3. **Ctrl+V** to paste the scaffold in and start fresh for that screen. Alternatively, save the blank file and duplicate it in your file system for each new screen you need to annotate. --- ## Common mistakes - **Floating text labels** — typing a label directly on the canvas with no arrow is not a callout annotation. Use arrow → annotation box. - **Design principle not named** — "I made the button blue for visibility" does not name a principle. Write "Contrast" explicitly. - **Annotation zone inside the screen frame** — this makes the mock-up unreadable. Keep annotations outside the frame. - **One annotation for the whole screen** — VCAA expects multiple design decisions documented. Aim for at least three distinct callouts per screen. --- ## See also - [Design Principles vs UX Characteristics](/sd/C05/Design%20Principles%20vs%20UX%20Characteristics) — which list each term belongs to - [C05 Resources](/sd/Resources/C05-Resources) — external reading on design principles and mock-up fidelity --- ← Back to [C05 Home](/sd/C05/C05-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub)