The following page will have our assignments, for the due dates check the calendar page.

Note - Assignments will be turned in from now on using the “IN” dropbox on the network drive for both in-class sections.  There are folders created for each assignment that you will drop the file into.  The naming convention for your files is as follows:

first-name_last-name-initial_assignment-number.file-extension

Make sure the filename has NO SPACES and is all LOWERCASE.

If I were going to turn in Assignment 3, I would name the file like so:  andrew_w_3.psd

Windows might not show you the file extension, so make sure you are actually turning in a Photoshop Document, (PSD file) for assignment 3 and not a .jpeg or .pdf.

Right click on the file icon and go to “rename” to change the name according to the naming convention.  Mac users will click on the file and hit the “return” key to rename the file accordingly.

Assignment 1 – Internet Exploration

This assignment has 3 parts. All three parts should be written in a single Word document and turned into the dropbox via the naming convention above.

Part 1

Each student will search the Internet and find 6 examples of good use of the following categories in web design: typography, navigation, sound, graphics, animation, and color.

Copy and paste the URL of each website and an explanation of why you believe the site is a good example of its particular category.  Also describe the use of the media and what message you felt was communicated to you.  Be sure and address design principles discussed in class such as Alignment, Typography, Balance, Color, Repetition, Contrast, White Space, and Proximity with each example provided.  Class members will showcase a few of their favorite examples.

Part 2

Using 12pt font and double spacing write a brief (500 words minimum) description on what web standards are, and why they are important. (W3C)

Part 3

Conclude your paper with one paragraph describing the website you are going to develop for this course.  The paragraph should include items such as:

  • Name of the website (Desired Domain Name)
  • Colors to be used
  • The purpose of the site (who is the audience?, what is it for?)
  • Links to 2 different websites whose layout/design you like.

Assignment 2 – Storyboard

Create a storyboard and gather content for the website you chose to develop in Assignment 1.  Essentially you will gather all text, graphics, logos, documents, maps and other needed information for your website and organize it.  A flow chart outlining each page and its function relative to the entire website will be included.  A crude hand drawn mockup of how you would like your website layout to look should be the last page of the storyboard.

The Storyboard paper should contain 4 main sections.

  1. Audience (What is the purpose of the webiste, What do visitors expect, What is our “mission statement”, what are we trying to accomplish, what are our general colors/design going to be?)
  2. Site Content (List the pages that are going to be on my site –listed in order of importance, each page should be in its own section with the page title, the heading, all of the text (body copy) that will be on the page, the images, video files that will be used –You can use placeholder images if your not sure yet, Any links that will go to other websites or resources)
  3. Flow Chart/Storyboard – Done digitally (I recommend using Power Point)
  4. Mockup / Sketch -This is to be hand done on a blank sheet of paper. Sketch the home-page design/layout only.

Assignment 3 – Digital Mockup

Create a digital mockup of your website’s index (home) page from the storyboard created in Assignment 2 using Adobe Fireworks or Photoshop.  The mockup should include a color scheme with a minimum of 3 colors as a layer.  Good design principles as discussed in class must be adhered to.  The mockups should include and will be graded on the following:

  • Color Scheme Swatch Layer (first layer)
  • A logo, or site title
  • A navigation showing how the user would access different portions of the website (with 3 different rollover states)
  • Photoshop layers should be named and intuitively organized
  • Original raw PSD file will be submitted through the inbox
  • Utilize design principles as discussed in class

This is not a “rough mockup.” It should look exactly like you want your final home page to look. Pixel per pixel, word for word. You’re allowed to make changes as the semester progresses and your skill-set/ideas improve.

Assignment 4 – Tables, Tables, Tables

Students will create 9 different HTML hand-written XHTML tables.  Tables used to be the dominant way for controlling website layout.  With the recent push in web standards, CSS is the preferred method of layout for web pages.  Tables still have many applicable uses in website design and learning to manipulate them is extremely valuable.  The table structures to be re-created are can be found at this link.  A handout of the table structure will also be given out in class.  Each table cell should be labeled with the letters as seen illustrated in the diagram.

Assignment 5 – Humpty Dumpty (CSS Positioning)

For this assignment students will take a photograph provided by the instructor that has been chopped into pieces.  Students must use CSS and DIV elements to reposition all of the images into their original state.  Students can utilize any form of valid CSS and XHTML in order to re-create the original image.  Floats, Z-Index, Absolute vs. Relative Positioning, Padding, Margins and other elements will likely need to be utilized by the students in order to achieve the final image.  It should render properly in major browsers and on Windows and Macintosh operating systems.  Like almost everything in web design there are multiple ways to achieve the end result.  Do not share your finished results with other classmates.  This assignment is designed to be challenging and will be graded accordingly.

Assignment 6 – Navigation mockup into XHTML/CSS Code

Students will use the digital mockup created in Assignment 3 and create a valid XHTML/CSS or XHTML/JAVASCRIPT page of their sites navigation/menu. Only the menu should be created in the XHTML. Students can choose to iether do the Javascript Rollover method, or the CSS Rollover Menu.

The menu should have the same height and width as the Digital Photoshop Mockup shows. Links should be in place, as well as normal, over, and selected states.

Assignment 7 – Full XHTML/CSS Website with Javascript

(DUE – Check Calendar Page

–To turn this assignment in simply send me an email with your URL example (http://www.awcreative.net) along with your Name and Classtime.

Using the digital mockup created in Assignment 3 students will create a hand-written valid XHTML web site.  The index page should be created using the content from Assignment 6.

Websites should contain the following criteria:

  • Minimum 5 pages
  • All content from the storyboard in Assignment 2 has been added
  • Web page validates
  • Clean readable XHTML and CSS
  • Cross-browser/platform compatible
  • Use of .gif, .png. and .jpeg images
  • Use of transparent png or gif
  • Webform
  • Matches digital mockup (small changes/exceptions are allowed)
  • Graphical rollover buttons work
  • Hand coding was used
  • Image Map with at least 3 clickable areas
  • NOT REQUIRED —> Includes embedded media (Choose one: Flash, Video, Audio, Java)
  • Form elements should be styled using CSS
  • NOT REQUIRED —>F.A.Q. Page with named anchors
  • Favicon present for website

Assignment 8 – Presentation & Critique

(Part 1)
Students must present their completed website and showcase its design and features to the class.

(Part 2)
Students will conduct evaluations and critiques of class members websites.