Brandon Kowallis ART 2440 Web Design

Web Site Design | ART 2440

Assignments

Assignment One - Site Research (Due Date)

    Part 1

  • Minimum 1.5 page paper, 12 point, Times, double spaced
  • Identify your target audience. Be specific. You cannot design something that appeals to everyone or even everyone in a given age range.
  • With your target audience in mind, identify a visual style that would pull them in and keep their interest. In writing describe what this would look like.
  • Define yourself or your organization (depending on who you are developing this site for). What are you about? What do you do? What do you believe? etc.
  • Define the purpose of your site
  • Draw out a flow chart to define content and areas of growth or change
  • Obtain a URL
  • Include some links to what you might like your site to look like
  • Click here to download an Example of the first part of this assignment

    • Part 2

  • Gather all the base content for your site: text, images, audio, and video. Then lay this out in a text document. Download an example
  • Sketch out a general layout for each page of your site that shows the position of different page elements. View a sample general layout.
  • You may either email this or turn in a hard copy

Assignment Two - Index Page Design
(Due Date)

  • Design your website using Photoshop or Fireworks
  • Use the principles of good web design discussed in class:
    • Organized and intuitive in its navigation
    • Simple and Clutter free
    • Home pages quickly define the purpose of the site in both content and style
    • There is a visual hierarchy that leads the user where you want them to go
    • Pages are not too big so that they require horizontal scrolling
    • Site is not too text heavy
    • Links look like links
    • Non-links don't look like links
    • Text is readable and not too small
    • Text is not hidden by background color or images
  • Identify your colors using one of the online color pickers and make note of it in Photoshop or Fireworks
  • All layers should be intuitively named and organized
  • File must be properly sliced and all slices optimized
  • Buttons must have a rollover state
  • Submit the PSD file through the inbox

Assignment Three - Hand coded XHTML page for your initial site content (Due Date)

  • Post assignment at your domain
  • Code must be clean
  • Should contain:
    • Page title
    • Properly used headings (h1, h2, h3, etc)
    • Paragraphs
    • Table (list of favorites) with a summary, caption, head, and body (for this assignment only. You may delete it after the assignment is complete and as we build our sites)
    • Links
    • List (ordered or unordered)
    • A Form
    • Div tags with identifiers
    • A resized and optimized image of your website design no larger than 300px wide and 300px high
  • Page must validate (XHTML 1.0 Transitional compliant)

Assignment Four - Hand coded CSS file linked to your XHTML file (Due Date)

  • Code must be clean and readable
  • XHTML file must be linked to it
  • Should contain at least 10 rules which include:
    • A class declared: .myClass { property:value; }
    • An ID declared: #myIdentifier { property:value; }
    • Multiple elements declared together in one rule: a, p, li { property:value; }
    • A specific rule: ul li p { property: value;}
    • A pseudo class: a:hover { property:value; }
    • Declarations for: positioning, color, font, text, borders, background image, margins, and padding
  • Your code must validate

Assignment Five - Functional Index Page
(Due Date)

  • Using XHTML and CSS turn your Photoshop file into a functional webpage
  • No falling back on old web design habbits. This means no using the WYSIWYG editor in Dreamweaver, no tables for layout, no letting Photoshop write your code, etc.
  • Use Images only where they are absolutely necessary, Otherwise use CSS
  • Button over states must work
  • Add filler text in all text areas (you will add the actual text in Assignment Six)
  • Your page must validate
  • Your code must be clean

Assignment Six - First Draft Final Website
(Due 5-6-09)

  • All content specified in Assignment One has been placed on your website.
  • All pages are linked to gether
  • Most functionality is working, with the exception of any advanced coding you are toying with.
  • Pages Validate with IE fix exceptions
  • Code is clean
  • Looks the same in both IE and Firefox