Objective

To develop conceptual thinking skills. To communicate ideas visually and verbally. To explore illustration and photography styles. To apply design principles to real-world visual communication problems as it relates to web design.

Secondary objectives

To utilize the Adobe Creative Suite as layout and production tools.

Description

Redesign the web site for Public Interest Fund of Illinois (PIFI). Make improvements in any of the following areas: form (design principles, typography, navigation, information architecture), content (logo, photography, illustration, copywriting, marketing objectives). Keep in mind who the target audience is.

Your design must show an understanding of unity, emphasis, balance and color. When appropriate, utilize rhythm and depth as well.

• Download old web site

Note: High resolution stock photos and illustrations are now available from Photospin. Contact your instructor for more information.

Procedure

1. RESEARCH FOR INSPIRATION: Research existing award winning web sites. Be sure to review trade publications (Print, How, Communication Arts) and the art director's annuals. Scan or take screenshots of designs that you think are successful. Look specifically for creative concepts, innovative navigation, clean typography and good page layout. Publish your research on your projects page for discussion (see example). Be sure to caption each image and cite the source.

2. DEVELOP THE CONCEPT: In your sketchbook begin to conceptualize ideas for this project (see sample thumbnails). Make at least 10 sketches of all possible directions you might take this project. Draw exactly how you intend to layout key pages of your site (i.e. splash page, inside page, portfolio page). Edit your concepts down to your best three ideas and redraw them inside a browser window using a felt tip pen (download blank browser window ). Rough out site maps (download examples of site maps) as needed to explain your navigation scheme. Publish your concepts/site map on your projects page for critique.

3. PROTOTYPE MOCK-UP: Based on the critique of the above, create a prototype "mock-up" of key sample screens in Adobe Photoshop which will show the "look and feel" of the web site. Place your art inside a blank browser window (download your favorite blank browser chrome in PNG format: IE7, Firefox, Safari). Also develop your site architecture by preparing the text for your web site and publish a text-only web site (see example). Generate web-ready JPEGs of your prototype screens and publish them on your personal projects page for critique (see example).

4. TEMPLATE PRODUCTION: Revise your mock-up as needed, then slice up the pixel elements and produce working template pages in XHMTL. Publish the templates on your personal projects page for critique (see example).

5. WEBSITE PRODUCTION: Revise your template as needed, then produce a fully functional web site. Publish your web site as a link from your personal projects page for critique.

6. FINAL PRESENTATION: Based on the critique of the above, revise the web site as needed. Prepare a presentation and "sell" the design to the client. If necessary, make refinements until you are 100% satisfied with the project.

7. GRADING: Review your projects page and make sure you have an accurate record of your process. You will not receive credit for this project if any of the above elements are missing.

8. STUDENT GALLERY ARCHIVES: Prepare a ZIP archive of your finished web site and drop it in Angel's drop box. Your project may be published in a showcase of student work on Parkland's web site.