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


CSC 121 WEB SITE DESIGN
Project 1: Personal Web Site
Instructor: Paul Young

 

 

 

Objectives

 

 

To be introduced to the principles of web site design. To communicate ideas visually and verbally. To review design principles and typography systems as it relates to web design.

 

 

 

Secondary Objectives

 

 

To utilize Adobe Photoshop, Dreamweaver and Flash as layout and production tools. To be introduced to HTML and CSS.

 

 

 

Description

 

 

Design a personal web site for yourself and publish it. Tell the world who you are and what you are about. Use the appropriate technology to communicate your objectives. Your web site must have a minimum of five pages (one "home" page and four "inside" pages). Each page must load in 10 seconds or less (at 56.6kps) and be tested on 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: Your personal web site will also be used to link to lessons and other projects from this class. Your semester grade will depend on what is published and linked from this site.

See example

 

 

 

Discussion

 

 

A web site can be a small project or a big one. Think about what you want to do versus the amount of time you want to invest in this project. Be realistic. Web sites have a short life span (about 100 days, according to the Internet Archive). Consider starting small and revising your site as you acquire more skills and resources.

 

 

 

Procedure

 

 

1. PLAN YOUR WEB SITE: Determine your objectives ("I want to share my interests with other teens" is very different than "I want to obtain employment as a web professional"). Research your target audience and write a psychological profile (see example). Email your profile as an attached Word document to pyoung@parkland.edu and anni@lmntal.com.

2. DETERMINE YOUR CONTENT: 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 for critique.

3. 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. Pay particular attention to the typographic treatment of your name. Draw exactly how your page 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.

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

5. PRODUCTION: Based on the critique of the above, 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 for critique.

6. GRADING: Continue to update your links page as you complete each project or lesson for this class. Your final semester grade will be based on what is linked to your links page.

Note: the student work URL for this class is:

  • http://www.hightechedge.org/champaign06/jsmith
    (where "jsmith" is your first initial followed by your last name)

 

 

 

Schedule

 

 

See the Calendar page

 

 

BACK TO TOP

______________________________

Last updated: 9/15/05 • Webmaster: Paul Young

 

 

Student
Exhibition

Influential
Designers

Internet
Resources

Tips, Tricks
& Handouts