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.

---

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.

---

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.

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

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.

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.

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

In each annotation box, write in full sentences. A minimum annotation for a 5–6 band:

For 7–8 or 9–10, also name the UX characteristic your design choice produces:

---

Example filled in:

---

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.

---

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

---

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