CSC 239 Web Design III

Project 2: Client Web Site
Instructor: Paul Young

 

Objective

 

To design and develop a web site for a client. To learn client communication and project management skills. To collaborate with clients and peers. To practice solving real-world marketing and visual communication problems.

 

Secondary objectives

 

To showcase your web design and web development skills for the purpose of obtaining employment. To learn to utilize appropriate digital tools as it relates to web development.

 

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 results when assigning the final grade for each student.

As a team, design and develop a web site for WPCD Radio (download logo and client-provided text and images ). The web site should contain the following pages:

  • Listen live (home)
  • News (blog)
  • Playlist
  • About The Wave
  • How to become a DJ
  • Sponsorships
  • Contact

The finished web site must meet client objectives as discussed at the initial client interview.

Note: Each team needs to choose a project manager (a.k.a. "account executive") who will coordinate communication and scheduling among team members and the client.

 

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

2. MARKETING RESEARCH: Meet with the clients who will explain their objectives and marketing needs. You may ask questions at this meeting. 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. Submit your brief as part of your Angel homework assignment (when prompted). 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. Discuss your concepts/site map with your team members and choose the best idea(s) for execution.

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 indicate the "look and feel" of the web site. Place your art inside a blank browser window (download blank browser chrome in PNG format ). 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 team's prototype screens and publish them on your personal projects page for critique (see example ).

5. TEMPLATE PRODUCTION: Revise your team's layout 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 ).

6. WEBSITE PRODUCTION: Revise your team's template as needed, then produce a fully functional web site. Publish your team's web site as a link from your personal projects 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 your team is 100% satisfied with the project.

8. GRADING: Review your projects page and make sure you have an accurate record of your team's 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 team's 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.

 

 

 BACK TO TOP

Version 1.0 • Last updated: 6/25/09 • Webmaster: Paul Young