Parkland College > CSIT Dept > Web Technology > CSC 121 >
Calendar > Project 3


CSC 121 WEB SITE DESIGN
Project 3: High Tech Edge 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 new web site for the HTE program. Make improvements in any of the following areas: logo, images, graphics, typography, color, balance, copywriting, navigation, information architecture, marketing objectives. Keep in mind who the target audience is.

The finished site should have at least a front page and two templates for the inside pages that can easily be expanded. 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 20% 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.

 

 

 

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. 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 with comments as to why these examples are successful. At our research critique, present your best examples in class (on screen).

2. MARKETING RESEARCH: Meet with the client who will describe the objectives of this project. At the initial client meeting, your objective is to collect all the information you will need for this project. Some questions that need to be answered include: What is the client's history? Are there any unique selling points for this organization? Who is the target audience? Take screen snapshots of select screens of the current HTE site and link them from your personal web site.

3. PLAN YOUR WEB SITE: Analyze your research and write a written statement of objectives in the form of a memo (see sample brief). Email your brief as an attached Word document to pyoung@parkland.edu and anni@lmntal.com. Also post this memo as a link from your personal web site.

4. DETERMINE YOUR CONTENT: How will your web site be organized? Can the client's site map be improved? How many pages will you be building? What are the titles of each page? Publish a text-only version of your site linked from your personal web site (if appropriate, use text from the old site).

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

6. 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. Make any necessary adjustments to your Photoshop file, then post the "mock-up" for the client to review (a minimum of 3 "mock-ups" will be required from the group). Prepare a presentation to "sell" each design to the client.

7. PRODUCTION: Based on client feedback, make any additional adjustments to your Photoshop file, then optimize your pictorial elements for the Web. Using Dreamweaver, combine your pictorial elements with your content, then publish the site as a link from your personal web site for critique. If necessary, make refinements until you are 100% satisfied with the project. Be sure to save all your files for future editing.

 

 

 

Schedule

 

 

See the Calendar page

 

 

BACK TO TOP

______________________________

Last updated: 10/20/05 • Webmaster: Paul Young

 

 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts