Commit 6d150c
2026-05-25 21:14:47 lisa: SD C04: add Mood Boards student guide (with verified video + StudyStreak example); link from C04-home and checkpoint page Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>| sd/C04/C04-home.md .. | |
| @@ 20,6 20,7 @@ | |
| Short explainers for the concepts most commonly confused or under-done at each rubric band: | |
| + | - [Mood Boards](/sd/C04/Mood%20Boards) — what a mood board is (and isn't), a worked example built around one feeling, and a video; for the C4-1 design pack |
| - [Evaluation vs Testing](/sd/C04/Evaluation%20vs%20Testing) — why a solution can pass all tests and still fail evaluation; the exact distinction the 7–10 band requires you to hold | |
| - [Efficiency vs Effectiveness](/sd/C04/Efficiency%20vs%20Effectiveness) — side-by-side scenario; how each term maps to separate evaluation matrix tables; why getting this wrong costs marks | |
| - [Evaluation Criteria and the SRS](/sd/C04/Evaluation%20Criteria%20and%20the%20SRS) — why every criterion must trace to a numbered SRS requirement, with worked counter-examples and a pre-submission checklist | |
| sd/C04/C4-1 Checkpoint - Design Pack.md .. | |
| @@ 18,7 18,7 @@ | |
| | # | Artefact | What it is | Where | | |
| |---|---|---|---| | |
| | 1 | **Design-ideas list** | A rough list: what features it could have, what it could look like, how users might interact, what existing apps inspire you | ☁️ GitHub | | |
| - | | 2 | **Mood board** | Visual look-and-feel — colours, typography, UI patterns, screenshots of apps that inspire you | ☁️ GitHub | |
| + | | 2 | **Mood board** ([how-to](/sd/C04/Mood%20Boards)) | Visual look-and-feel — colours, typography, UI patterns, screenshots of apps that inspire you | ☁️ GitHub | |
| | 3 | **Brainstorm** | A timed (10–15 min) burst — quantity over quality, no filtering — then group the ideas into themes | ☁️ GitHub | | |
| | 4 | **Mind map** | Your solution at the centre; branch out to feature areas → specific functions → design choices | ☁️ GitHub | | |
| | 5 | **Design sketches** | 2–3+ annotated screen layouts — focus on layout, navigation flow, key interactions | ☁️ GitHub | | |
| /dev/null .. sd/C04/Mood Boards.md | |
| @@ 0,0 1,93 @@ | |
| + | > **DRAFT** — under teacher review. |
| + | |
| + | # Mood Boards |
| + | |
| + | The Hamilton and Alexandra College · Year 12 · 2026 |
| + | |
| + | A **mood board** is one of the four ideation tools in your [C4-1 design pack](/sd/C04/C4-1%20Checkpoint%20-%20Design%20Pack). If you've never made one, start here. |
| + | |
| + | --- |
| + | |
| + | ## What is a mood board? |
| + | |
| + | A mood board is a **visual collage that captures the *look and feel*** of your software — *before* you design any real screens. It gathers the things that set a creative direction: |
| + | |
| + | - **Colours** — a small palette (3–5 colours) |
| + | - **Typography** — 1–2 fonts you'd use |
| + | - **Imagery & texture** — photos, icons, UI patterns, screenshots of apps that inspire you |
| + | - **Keywords** — a few words for the feeling you want (e.g. *calm, playful, trustworthy*) |
| + | |
| + | It is **not** a layout or a wireframe — it doesn't show where buttons go. It answers a different question: *"What should this app **feel** like?"* |
| + | |
| + | ## Why bother? |
| + | |
| + | - It **sets the direction early**, so your later sketches and detailed designs are consistent instead of random. |
| + | - It's a fast way to **explore and compare** visual ideas before committing. |
| + | - It gives you **reusable assets** — the colours and fonts you choose here carry straight into C5. |
| + | |
| + | --- |
| + | |
| + | ## Watch: building one (10 min) |
| + | |
| + | **🎯 Watch for:** how the designer picks a *feeling* first, then chooses colours, type and images to match it — not the other way around. |
| + | |
| + | ▶ [How To Create a Mood Board — Design Process for App UI](https://youtu.be/UsPKDV7ozfI) (NAM Design) |
| + | |
| + | The video builds the board in Miro; you can use **Excalidraw, Canva, Obsidian, or even a Google Slide** instead — the thinking is the same. |
| + | |
| + | --- |
| + | |
| + | ## Worked example — "StudyStreak" |
| + | |
| + | > **The project:** a focus-and-wellbeing tracker that helps VCE students log study sessions and protect their downtime. |
| + | > **The audience:** stressed senior students. |
| + | > **The one feeling:** *calm, focused, encouraging* — **not** hyped-up or gamified. |
| + | |
| + | Everything on the board ladders up to that one feeling: |
| + | |
| + | | Element | Choice | Why it supports *calm & focused* | |
| + | |---|---|---| |
| + | | 🟦 Deep teal | `#1F6F78` | Focus and trust; reads as grown-up, not childish | |
| + | | 🟩 Soft sage | `#A8C3A0` | Calm and growth — used to show progress | |
| + | | ⬜ Warm sand | `#F4EDE4` | A light background = breathing space, low stress | |
| + | | 🟧 Muted coral | `#E8845E` | A *single* warm accent for streak highlights — used sparingly | |
| + | | **Type — headings** | Nunito (rounded sans) | Friendly and approachable, not corporate | |
| + | | **Type — body** | Inter (clean sans) | Easy to read for tired eyes | |
| + | | **Imagery** | tidy desks, morning light, plants, journaling | Quiet, hopeful, real — not stocky or busy | |
| + | | **UI patterns** | rounded cards, lots of whitespace, a *growing plant* for streaks | Gentle encouragement instead of aggressive scores | |
| + | | **Keywords** | calm · focus · steady · encouraging · uncluttered | The feeling in words | |
| + | |
| + | ### What we deliberately *avoided* — and why |
| + | |
| + | This is what lifts a mood board from "nice pictures" to a real design decision: |
| + | |
| + | - ❌ **Neon, high-saturation "gamer" colours** — senior students read these as childish and over-stimulating. |
| + | - ❌ **Leaderboards and confetti badges** — competition raises stress; StudyStreak is about *your own* steady progress. |
| + | - ❌ **Dense, data-heavy dashboards** — clutter is the opposite of calm. |
| + | |
| + | > [!TIP] |
| + | > **The coherence test:** pick **one** feeling, then check every colour, font and image against it. If something doesn't support that feeling, it doesn't belong on the board. A mood board that "feels like five different apps" hasn't done its job. |
| + | |
| + | --- |
| + | |
| + | ## Your turn |
| + | |
| + | 1. Open **Excalidraw, Canva, or Obsidian**. |
| + | 2. Write your project's **one feeling** at the top (the hardest and most important step). |
| + | 3. Add at least **5 images**, **3 colours** (with their feeling), and **2 fonts**. |
| + | 4. Add a few **keywords**. |
| + | 5. Check every element against your one feeling — cut anything that doesn't fit. |
| + | 6. Be ready to **explain your choices** — *why* this colour, this font, this image. That explanation is exactly what your C4-1 annotations need. |
| + | |
| + | Commit it to GitHub and add it to your printed design pack. |
| + | |
| + | --- |
| + | |
| + | ## See also |
| + | |
| + | - [C4-1 Checkpoint — Your Design Pack](/sd/C04/C4-1%20Checkpoint%20-%20Design%20Pack) — where the mood board fits among the four ideation tools |
| + | - [C4 Design Ideas and Evaluation Explained](/sd/C4%20Design%20Ideas%20and%20Evaluation%20Explained) — the C4 walkthrough videos |
| + | |
| + | --- |
| + | |
| + | ← Back to [C04 Home](/sd/C04/C04-home) · [VCE Software Development Hub](/sd/VCE%20Software%20Development%20Hub) |