Overview of Projects

The projects are subject to change so only projects that are assigned or started will be listed. For rubrics and handouts relating to each projects, go to the handouts page.

Project 3 - MAD 102/103/162/163 students

Build a 4 page site which includes:

  1. EVERYTHING MUST WORK
  2. Functioning links on each page.
  3. Divs must include a container with the following nested divs: header, nav, main and footer.
  4. Aesthetically pleasing colors and artwork
  5. Logical CSS
  6. INSTRUCTIONS / NAVIGATION for MAD 102/103-> MAY CREATE TABLE-BASED NAVIGATION
    1. More advanced students are encouraged to create their navigate in whole or part using CSS
    2. NAVIGATION for MAD 162/163 -> CREATE NAVIGATION IN CSS
      1. Step by step instructions for building a web-page with working CSS based navigation is available on the handouts page,
      • Download instructions on how to create a web page with a navigation bar in 4 steps.
      • Follow along, and save your web-page with a different name at the end of each step. At the end you should have a web-page that looks like this
      • Once you have a web page with fully functioning navigation you will do a "save as"naming each page appropriately example index.html, contact.html portfolio.html etc
      • Then you will bring in your content (text, images, etc)
A Sterling C Angela J Austin M Raul Q Danny
T Nancy L Vicky U Larissa V Lona W Ansley
H Jan Vincent SAMPLE
Illustrator Assignment: Due week 15 at start of class

IF YOU ARE TAKING AN ILLUSTRATOR CLASS:

Most of you have already taken or are taking an illustrator class. So for this assignment you will create one image in illustrator that can be used as a small background image, logo or other visual element that will be used in one of your DIV rules. The item can be anything you want but must be saved as either jpeg or png (8 bit for RBG or 24 bit if you have transparent space)

If YOU ARE NOT TAKING OR HAVEN'T TAKEN AN ILLUSTRATOR CLASS:

Watch this video (45 minutes long) - Adobe Illustrator Intro: Youtube top 10 things you need to know Illustrator.

 
Final Project (MAD 102/103/162/163)

Proposal Stage:

  1. Part A -over view (about 1 page)
    1. Start with a one paragraph description about what you site is about
    2. Create your personas profile (see Art & Science pdf on handouts page)
    3. Create your stakeholders list (see Art & Science pdf on handouts page)
  2. Part B - basic structure of your divs
    1. on a single page Draw out the wireframe architecture
      1. for each your divs include a name and relevant properties
  3. Part C - your navigation
    1. file name & title of each page
      1. example: index.html & Home of Mary Smith's Tastiest Pies on the Planet
      2. Yours ____________________ & _____________________
      3. Yours ____________________ & _____________________
      4. Yours ____________________ & _____________________
      5. Yours ____________________ & _____________________
  4. Part D - overall aesthetic you wish to achieve
    1. mood:
    2. colors: include colors, fonts and artwork
  5. Part E - content for each page
    1. name the file name and describe the content you will present
      1. For each persona - describe content that is relevant
    2. any technical elements like javascript or animation.

Final Project Proposal Handout from class

Final Project

Website Uploaded: Site will have a minimum of 4 pages worth of content and contain web-optimized images, links, text and any other relevant Media. The goal is to produce a fully functioning website which is user friendly and aesthetically connected to the site’s brand. Grading will be based on functionality, creativity & visual appeal, clean coding (lean CSS, accuracy and proper comments), and folder structure.

PART A – Proposal / Plan – 25 points

PART B - Final Project – 175 points

Site will be graded as follows

ADD 25 points per section

  1. Student Graded Rubrics
    1. Student fills out rubrics in advance of start of class)
  2. Site Setup / correct folder structure
    1. Home saved as index.html
    2. CSS is saved as external file and saved in css folder
    3. Images are in images folder
  3. Images
    1. 10 images (2 points per image – full 25 points if more than 10 images are included
  4. Menu (navigation)
    1. CSS driven for 25 points
    2. Table based for 10 points
  5. Persona Relevant Content
    1. Information fully developed to MATCH personas objectives
  6. Persona driven Aesthetics / Design
    1. Colors and art MATCH personas demographics
  7. Complexity of project

DEDUCTABLE Errors:

  1. Spelling mistakes, Broken links, Pages not titled etc

PDF files Final Project Description and Rubrics

A Sterling C Angela J Austin M Raul Q Danny
T Nancy L Vicky U Larissa V Lona W Ansley