CS 257: Software Design

Web Application: wireframes

Folder: webapp/wireframes

You will work with your web application team for this assignment.

Goals

Wireframes and mockups

One important step in developing a user interface (web-based or otherwise) is to sketch the visual and navigational designs of the UI you hope to create. Drawing pictures of your UI and describing the steps a user will have to take to invoke the website's features and move between its pages will help you clarify and refine your vision of the web application and its features. The resulting images are called (depending on who you talk to) wireframes or mockups. Generally, a wireframe is a rough sketch of the visual layout and navigational structure of your user interface, while a mockup is a higher-fidelity picture that includes your intended colors, images, fonts, etc. But some people (including me) will occasionally use the term mockup when they mean wireframe, so watch out for the potential ambiguity.

For this assignment, you will draw wireframes of your web application. 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 wireframe process is quite formal, leading eventually to high-quality mockup 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. Your goal will be to make visually clear roughly what your web application will look like and how it will operate, but without forcing you to commit yet to color palettes, font families, exact images, etc.

You may use a wireframe 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, scanned (or photographed with good lighting) once they're ready.

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

Your tasks

Have fun!