GDS 220 Graphic Design for the Web

Project 4: Museum at the Crossroads 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

This is a group project. In your assigned teams, determine how to split the work fairly. At the end of the project, you will be asked to recommend a grade based on your team members' level of participation. The instructor will take the recommendations into account along with the final results when assigning the project grade for each student.

Re-design the promotion web site of Museums at the Crossroads using client provided content. The client has requested the following improvements:

  • A professional and visually sophisticated design
  • An better interactive map with the museums annotated and clickable
  • An interactive calendar where events can be easily added
  • A blog-like news section for announcements and event openings
  • Email form to request to request more information (with check boxes for options)
  • A photogallery (or slide show, or collage, or...)
  • A link to Paypal as well as instructions for sending in a check
  • An accessibility-friendly design (read about accessible frames)

The home page should have their mission statement somewhere on the page:

The Consortium was created to raise awareness of the presence of member museums and related institutions and their contributions to Champaign County:

  • To promote museum attendance and support
  • To promote an understanding of museums as learning environments.
  • To promote and facilitate an environment of mutually beneficial collaboration between consortium members and related cultural institutions.

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

Download current web site

 

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). Test how successful your concepts are by discussing them with your team members. Collaboratively edit your team's concepts down to the best three ideas and publish them on your Process Page for critique. 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.