From Web Writing & Design Wiki :: biro.bemidjistate.edu

WebDesign: PortfolioSitePrototypeProject

Portfolio Site Prototype Project

Using Summers and Summers chap 1 as a guide, research, design, and create a portfolio web site, from first requirements gathering through paper prototype.

We're going through this project at high speed: two weeks - four class meetings - from first notes to finished prototype. This is an overview, a practice project, that allows you to become oriented to the processes and practices of user-oriented web design. The project introduces design concepts we'll be working with throughout the course, such as user-centered design, usability, visual hierarchy, nomenclature... It will get you in the habit of using design processes to consider choices and alternatives and in the habit of revising those choices from feedback. It may uncover difficulties in the process that you can anticipate later in the course. And it gives you practice connecting design and rhetorical choices with site goals.

You may do this individually, or in pairs. Not everything in the portfolio needs to be authentic, but stay close to real information in order to ground your design and rhetorical choices in particulars. If you work in pairs, focus on one person's portfolio.

Most of your work will be posted in the classroom so we can all review and discuss it. So, you'll need

• plain paper for notes and text blocks
• 11 X 17 or so paper for charts, maps, wireframes, and mockups
• crayons, pencils, markers for maps, page mockups
• images you might use in page mockups: printed from web, your own stuff, or cut from mags...
• an open mind and willingness to listen to and offer questions, comments, and options.

Day 1: Requirements gathering and content inventory. Do these as a set of notes for the requirements, and a table for the content inventory. (p 2). State the goals of the sites's owners and users, and the human and technical resources you could have at hand. We'll hang your materials on the walls to review and discuss. Be ready to talk about choices and options. Refer to Summers and Summers as you work and as you present.

Day 2: Site maps and wire frames. Note the plurals. Do these by hand or on computer, if you wish. We'll hang them on the walls to review and discuss.

Day 3: Visual design and page mock ups. Get out the crayons and paste. (Refer to S & S chapter 4 for advice on visual design for usability.) Again, we'll hang the designs to review and discuss how the design connects with the goals.

Day 4: Content: nomenclature, introductory text, blurbs, etc. Add typed content to page mockups. Usual procedure.

After a de-briefing, hand everything in for evaluation.