Wireframing
Purpose
Create visual representations of user interfaces at appropriate fidelity levels for design communication and validation.
Process
-
Choose fidelity level
-
Define page structure
-
Create wireframes
-
Add annotations
-
Review and iterate
StudyAbroad-Specific Considerations
-
Dashboard wireframe
-
Application wizard steps
-
University search results
-
Document upload interface
Examples
Wireframe: Application Dashboard
┌────────────────────────────────────────────────────────┐ │ [Logo] Search... [Profile] [Logout] │ ├────────────────────────────────────────────────────────┤ │ │ │ Welcome back, {firstName}! │ │ │ │ ┌──────────────────────────────────────────────────┐ │ │ │ Your Applications (3) [+ New] │ │ │ ├──────────────────────────────────────────────────┤ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ │ │ 🎓 TU Munich - MSc CS [Draft] │ │ │ │ │ │ Progress: ████████░░ 80% [Continue →] │ │ │ │ │ │ Deadline: Mar 15 (10 days) │ │ │ │ │ └────────────────────────────────────────────┘ │ │ │ │ │ │ │ │ ┌────────────────────────────────────────────┐ │ │ │ │ │ 🎓 ETH Zurich - MSc DS [Submitted] │ │ │ │ │ │ Submitted: Jan 5 [View →] │ │ │ │ │ └────────────────────────────────────────────┘ │ │ │ └──────────────────────────────────────────────────┘ │ │ │ └────────────────────────────────────────────────────────┘
Complete SDLC Skills Content - Missing Developer and Security Skills
Project: StudyAbroad-v1