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


CIS 152 WEB DESIGN I
Project 4: Champaign County Silver Screen Source 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

 

 

Design a web template for a database-driven web site to promote film production in Champaign County. The look-and-feel of this web site must project an image of professionalism and trustworthiness. The target audience is big Hollywood production companies as well as independent filmmakers.

The finished site should have at least a front page and a template for the inside pages that is easily expandable. The site must be Internet-ready and tested with multiple browsers.

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.

Note: This is a group project worth 10% of your semester grade. Work for this project may be divided among group participants, but each student is required to publish the results linked from your personal web site.

See an example of a staging site

 

 

 

Procedure

 

 

1. RESEARCH FOR INSPIRATION: Research existing web sites. Be sure to review Macromedia Showcase, books, annuals and magazines. Look at navigation as well as design. Look for interactive elements, such as rollover buttons. Bookmark pages that have innovative artwork and/or navigation schemes. Look specifically for elements that will help you communicate your intent to the client. Collect as many web addresses as you can, and link them from your personal web site. In small groups, edit your research down to the best examples to present at our research critique (on screen). Be prepared to explain why these examples are successful. Publish your research by creating a staging area for the project (see example). Discuss the research with the client and record the client's response in the form of a memo.

2. PROJECT MANAGEMENT: As a group, determine the roles and responsibilites each student will have in this project (i.e. art & design, production, copywriting, marketing research, account management, etc.). Communicate well with the client and have the client sign-off on every milestone. Keep written records in the form of memos and post all memos on the staging area as well as on your personal web site.

3. MARKETING RESEARCH: Research the film production community. Determine the type of content that will attract the target audience. How many pages will you need? What are the titles of each page? How will your web site be organized? Organize the content into a wiki as demonstrated in class. Teach the client how to use the wiki as a tool for collaborative writing. Link the wiki to the staging area as well as your personal web site.

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, choose 3 concepts and create prototype "mock-ups" 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. Revise the mock-ups as needed and post them in the staging area for client review. Record the client's comments in the form of a memo.

6. PRODUCTION: Once the client has approved the mock-up, 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 template for review.

7. DATABASE BACK-END: Once the client has approved the template, attach a database back-end to select pages and teach the client how to manage the site.

 

 

 

Schedule

 

 

See the Calendar page

 

 

BACK TO TOP

______________________________

Last updated: 11/30/06 • Webmaster: Paul Young

 

 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts