GDS 220 Graphic Design for the Web

Project 3: Parkland Theatre Web Site
Instructor: Paul Young

Objective

To develop conceptual thinking skills. To communicate ideas visually and verbally. 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

Re-design the promotion web site of Parkland Theatre using client provided content. The web site must contain at least the following sections:

Home
Current Season
Directions
Audition Information
Donations
Theatre Rental
Archives
Contact Us

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

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 Process Page for discussion (see example). Be sure to caption each image and cite the source.

2. MARKETING RESEARCH: Interview your client. What is your client's background? Who is the target audience? What are their marketing objectives? What does the competition look like? Analyze your research and write a written statement of objectives in the form of a memo (see sample brief). In describing the "character" of the web site, make use of the Vocabulary Wheel as a starting point. Email your brief as a shared Google Doc or an attached Word file to pyoung.parkland.edu@gmail.com. An edited copy of this brief will be emailed to the client by the instructor.

3. 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 Process Page for critique.

4. 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 Process Page for critique (see example).

5. 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 Process Page for critique (see example).

6. WEBSITE PRODUCTION: Revise your template as needed, then produce a fully functional web site. Publish your web site as a link from your personal Process Page for critique.

7. 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.

8. GRADING: Review your Process 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.

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