.............................

Section 0101
Heavilon 227
T-Th, 10:30 -11:45 a.m.
Dr. David Blakesley
Office: Heavilon 302c
Hours: T-Th, 9:30 - 10:30 a.m. and by appt.
Ph: 765.494.3772
Fax: 765.494.3780
blakesle@purdue.edu

.............................

Project Overview

For Project 3, you'll work individually to design the interface, including navigational structure, for a Web portfolio. The focus will be just on designing the "front door" to your portfolio without worrying at this stage about the content of the rest of the site. We'll learn a lot more about using Dreamweaver and Flash as design media, and one resource will be the online (free) version of Web Style Guide, 2nd edition. You will be asked to show your completed portfolio interface to the class and turn-in Design Notes. Due Date: Thursday, November 13. (Individual; 20% of course grade.)

Prompt

Using the Web Style Guide (2nd edition) and various other Web-based models, develop a professional, Web-based portfolio interface (starting node) that can be used as a gateway to a digital portfolio of your work as a student and professional.

Discussion: The emphasis for this the project is on interface design, not on the production of a complete Website or digital portfolio. When finished, you should have a good prototype that you can develop further as you collect documents that represent your work. The interface will need to take into account user expecations for navigational and visual components, cross-browser compatibility, availability of plug-in technologies, and (of course) the nature of your work in professional writing. In the end, your interface should not only make a good first impression (and thus establish a tone and visual theme) but also be fully funtional.

Project Goals

• Learn strategies for planning, writing, and revising the content and design of Web-based documents.
• Improve your management of the digital tools that are often used in writing and designing for the World Wide Web
• Learn the principles of effective design and how to use them in creative and liberating ways on the Web, as well as when to be conservative
• Develop a critical eye for interface design

Deliverables

The final draft of your Portfolio Interface and Design Notes should be submitted as a URL emailed to me on the due date. Your presentation will be scheduled on one of two days using a sign-up sheet.

1. Portfolio Interface

Draft and design one Web page that can serve as an interface for a professional digital portfolio and upload it to your Career Account homepage for review. In addition to Dreamweaver, you should attempt to use at least one of the following programs to help you design your interface: Flash, Fireworks, Photoshop or Acrobat.

• Technologies: Dreamweaver, Flash, Acrobat, Photoshop, Fireworks
• Format: Turn in URL via email to blakesle@purdue.edu.
• Important Date: You need to have a draft prototype ready for in-class review on Tuesday, November 4.

2. Design Notes

Prepare a two-page, single-spaced report describing the design of your portfolio interface, with these sections:

1. URL of Interface:
2. Description of Visual Theme and Design Metaphor (discussed in class)
3. Description of Navigational System
4. Description of Technologies Used
5. Description of Typography Used
6. Description of Colors Used

• Technologies: Word, Pagemaker or InDesign, Acrobat
• Format: Short Report
• Important Date: Place your Design Notes in your Turn-In folder for Project 3 on the project due date, Thursday, November 13.

3. Presentation of Interface

Prepare a five-minute presentation in which you show your interface to the class and go over the highlights included on your design notes. You will have access to the instructor's machine and the multimedia projector for your presentation. Presentations will take place on Tuesday, November 11, and Thursday, November 13.

Models

Digital Portfolios Samples. These are not meant to be perfect models but are examples of a range of what's possible.

David Blakesley
Anne Wysocki
Mark C. Taylor
Victoria Vesna
Victor Vitanza

Kate Agena
Jennie Blankert
Kristine Blair
Jeff Jablonski
Erin Karper
Jessie Moore Kapper
Mike Kapper
Paul Kei Matsuda
Karl Stolley

In addition to applying the design criteria discussed in class and in Looking Good in Print and Web Style Guide, I'll look to see that you have developed an effective and aesthetically interesting visual theme and a clear navigational system. Your interface should be browser-independent (i.e., look virtually the same through any browser, MAC or PC). You should use layout, typography, and color to suit the overall design.

Print-Friendly Version (PDF format)

Course Texts