Skip to content

Lab 3: Design Phase

Lab 3 — Design Phase

Weeks 5–6

Define the design model of your software system. Starting from the outputs of Lab 2 (use cases), map requirements to architecture, design user interfaces, and model system behavior.

Design Process

Stage What It Is Do This
Low-fidelity Wireframe Grayscale layout, default font, simple shapes Use Figma/Moqups/Miro — grayscale only
High-fidelity Mockup Full visual design with colors, icons, styles Upgrade from wireframe for Lab 4.0
Interactive Prototype Clickable, navigable version Build for Lab 4.1 submission

⚠️ Skipping wireframes is a trap. Wireframes make mistakes cheap before implementation gets expensive. Use only grayscale at this stage — no colors, icons, images, or styled components. Submissions resembling visual mockups rather than wireframes will lose all points.

Checklist

  • Project Progress Report (5 pts) — summary with contribution percentages
  • Low-Fidelity Wireframe (30 pts) — all screens from login to logout; each team member contributes; grayscale only
  • Class Diagram (65 pts) — detailed data/system structure; use IDE or diagram tools (not Word/PowerPoint); each member contributes at least one class diagram

Key Deliverables

Item Points
Design Artifacts (all parts) 100

Notes

  • 7-day grace period with 10% penalty
  • Professional tools only: Draw.io, Lucidchart for diagrams
  • Individual: Complete the Lab 3 Peer- and Self- Assessment or receive 0