Parkland College > CSIT Dept > Digital Media  > CIS 152 >
Calendar > Project 2


CIS 152 WEB DESIGN I
Project 2: Professional Web Site
Instructor: Paul Young

 

 

 

Objectives

 

 

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

 

 

 

Secondary Objectives

 

 

To utilize Adobe Photoshop, Dreamweaver and Flash as layout and production tools.

 

 

 

Description

 

 

As a group, create a professional web site for a client. This web site must meet the objectives of the client and serve the target audience of the client. The site must also be published and work with major browsers. Groups will be assigned to work on the following projects:

  • United Way Youth Volunteer Site. The target audience is youth (teens through early twenties) who might be interested in volunteering their time. The site should look attractive to the target audience and contain information that would encourage youth to volunteer in the community. The site will link from the cuvolunteer.org web page. This site should be completed by October 15. Contact: Sue Grey at 352.5151 or sue@uwayhelps.org.
  • Farren's Pub and Eatery in Downtown Champaign. Carolyn Farren is the owner and Todd is the manager. The phone number at the restaurant is 359-6977.
  • Mayor Jerry Schweighart re-election campaign web site. His contact information is as follows: Office: 217/403-8720 / Email: jerryschweighart@ci.champaign.il.us
  • HTE Opportunity Board. An online job board that lists technology projects that classes or organizations can choose to do in support of either the HTE project or the community in general. This site needs a form that a potential client can complete to describe the job that needs to be done, the timeframe in which it should be completed and the contact information for the person managing the task. Carol Timms <carol@educationaldividends.com> is the contact person for this project. This site should be completed by November 15.

To receive a quality grade, your design must utilize professional typography and show an understanding of key design principles (unity, emphasis, balance, color theory). When appropriate, utilize rhythm and depth as well. A group grade will be given when the project is completed. Each member of the group will receive the same grade.

 

 

Procedure

 

 

1. RESEARCH FOR INSPIRATION: Research existing web sites. Be sure to review Macromedia Showcase, books, annuals and magazine. Look at navigation as well as design. Look for interactive elements, such as rollover buttons. What design principles are at work here? Bookmark pages that have innovative artwork and/or navigation schemes. Collect as many web addresses as you can, and link them from your personal web site. At our research critique, present your best examples in class (linked from your personal web site). Be prepared to explain why these examples are successful.

2. MARKETING RESEARCH: Interview the client. What is the client's history? Are there any unique selling points for this business/organization? Who is the competition? If appropriate, visit the business. Determine the objectives and target audience of the site. Determine how the content will be created (text, images). Acquire copies of existing promotional materials (if available) and a reproduction quality logo. Analyze your research and write a written statement of objectives in the form of a memo (see sample brief). Email the brief to your client for review. Also post your brief as a downloadable Word document linked from your personal web site.

3. PLAN YOUR WEB SITE: How many pages will you need? What are the titles of each page? How will your web site be organized? Sketch out a site map and publish a text-only version of your site linked from your personal web site. Have your client sign off on the content.

4. DEVELOP THE VISUAL LOOK: 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 your pages will look. Edit your concepts down to your best three ideas and redraw them inside a browser window using a felt tip pen (download PDF file of a blank browser window). Test how successful your concepts are by presenting them in class for critique.

5. EXECUTION: Based on the critique of the above, create a prototype "mockup" of key pages in Adobe Photoshop. Place your art inside a blank browser window (download layered PSD file). Print out your prototype screen in b&w for critique and be prepared to talk about how the design principles of unity, emphasis and balance are utilized in your layout. Prepare a presentation to "sell" your design to the client and have your client sign off on the screen "mockups."

6. PRODUCTION: Based on your client's feedback, make any necessary adjustments to your Photoshop file, then optimize your pictorial elements for the Web. Using Dreamweaver, combine your pictorial elements with your content, then publish your site as a link from your personal web site for critique. If necessary, make refinements until you are 100% satisfied with the project. Deliver the finished site to the client.

 

 

 

Schedule

 

 

See the Calendar page

 

 

BACK TO TOP

______________________________

Last updated: 9/7/06 • Webmaster: Paul Young

 

 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts