CS 257: Software Design

Web Application, Phase 3: UI Mockups

For this phase, draw mockups of the pages your web application will include. Depending on your dataset and your features/user stories, you might want to show multiple views of each page—one image showing each major feature in action.

Often, the mockup process is quite formal, leading to high-quality images intended for sharing with all stakeholders (including your boss, your boss's boss, the customers, etc.). But for us, this is going to be a rough-and-ready sort of process. You may use a mockup drawing tool (e.g. the Cloud Trial of balsamiq's Web tool), or a generic drawing tool like gliffy, or just clean drawings on paper, photographed once they're ready.

Keep the principles in Don't Make Me Think in mind as you work on this.

What to hand in for Phase 3

Create a subdirectory webapp/mockups/, and put your mockup image files (jpg, png, pdf,...) there.