Web Design II—CE2413

Week 1: HTML Refresher

May 28

  • Introductions
  • Review Syllabus
  • Class goals/personal goals
  • Browsers
    • Modern Browsers
    • Plugins
  • The pillars of web design
  • Tags: syntax, anatomy
  • Turning in assignments

Homework Assignment

Get web hosting if you don’t already have it. (Must support server-side scripting; PHP recommended, but not required.) I recommend these hosts:

Create a one-page web site that includes your name, a picture of yourself, and some info about what you’d like to get out of this class. Your XHTML must validate according to the DOCTYPE you use (Transitional or Strict). You must turn in:

  1. A link in email to your live page
  2. A screenshot of your page (in JPEG or PNG format)
  3. A ZIP file of all your source files (including PSDs, HTML, and anything else you use to create your page)

Due no later than Tuesday, June 3, 2008 at 11:59:59 PM.

Reading Assignments

Be prepared to discuss these articles in class next week:

View week 1 slides (.pdf)

Week 2: CSS Primer

June 4

  • Anatomy of rules
  • Selectors
    • Descendant selectors
    • Class & ID selectors
    • Pseudo-classes
    • Pseudo-elements
    • Child selectors
    • Adjacent selectors
    • Attribute selectors
  • CSS Properties
  • Files to practice on
  • Attaching CSS to HTML
    • <style>
    • <link>
    • @import
  • Styling text
  • CSS for layout
  • Testing the “Bulletproofness” of a web site

Homework Assignment

Take your favorite book or textbook and create an HTML version of the table of contents. Your book must have at least 10 chapters and preferrably has sub-sections within a chapter. If there are no sub-sections, use a summary of each chapter (or one paragraph from the chapter) as a sub-section. You must turn in:

  1. A link in email to your live page
  2. A screenshot of your page (in JPEG or PNG format)
  3. A ZIP file of all your source files (including PSDs, HTML, and anything else you use to create your pages)

Due no later than Tuesday, June 10, 2008 at 11:59:59 PM.

Reading Assignments

Be prepared to discuss these articles in class next week:

View week 2 slides (.pdf)

Week 3: CSS Part 2 (Page Layout)

June 11

Homework Assignment

Find a page offline that you will produce online. This can be a magazine article, a poster, a newspaper ad, or something similar. Requirements:

  • The page must contain at least 2 columns of text and 1 image
  • XHTML must validate (XHTML Strict 1.0)
  • Your CSS file(s) must validate
  • Your programmed page must look as close to the original as humanly possible, while still adhering to web best practices

You must turn in:

  1. A link in email to your live page. Only HTML is due for homework. We’ll work on CSS this week in class.
  2. A screenshot of your page (in JPEG or PNG format)
  3. A ZIP file of all your source files (including a scan/photo of the original page you’re reproducing, PSDs, HTML, CSS and anything else you use to create your page)

Due no later than Tuesday, June 17, 2008 at 11:59:59 PM.

Reading Assignments

Be prepared to discuss these articles in class next week:

View week 3 slides (.pdf)

Week 4: Even More CSS

June 18

Homework Assignment

(Continuation from last week) Find a page offline that you will produce online. This can be a magazine article, a poster, a newspaper ad, or something similar. Requirements:

  • The page must contain at least 2 columns of text and 1 image
  • XHTML must validate (XHTML Strict 1.0)
  • Your CSS file(s) must validate
  • Your programmed page must look as close to the original as humanly possible, while still adhering to web best practices

You must turn in:

  1. A link in email to your live page, marked up and styled.
  2. A screenshot of your page (in JPEG or PNG format)
  3. A ZIP file of all your source files (including a scan/photo of the original page you’re reproducing, PSDs, HTML, CSS and anything else you use to create your page)

Due no later than Tuesday, June 24, 2008 at 11:59:59 PM.

Reading Assignments

Be prepared to discuss these articles in class next week:

View week 4 slides (.pdf)

Week 5: Process—Content Organization, Information Architecture, & Design

June 25

  • The importance of content
  • Organizing content
    • Site maps
    • Wireframes
    • Page Description Diagrams
    • Page Schematics
  • Visual Design
    • Color
    • Layout
    • Typography
    • Designing for Content
    • Art Direction

Homework Assignment

Create a presentation for the class, pitching 2 ideas for a final project. Your presentation should assume the class knows nothing about your topic. In your presentation, each idea should include:

  • Enough to inform the class on an unknown subject matter
  • A site map
  • Wireframes (6 pages or states)

Your presentation (including discussion with the class) should be no longer than 5 minutes. Next week, the class will vote and choose which idea you’ll pursue.

Recommended Online Reading

View week 5 slides (.pdf)

Week 6: Pitch presentations

July 2

Each student will pitch both ideas to the class for a critique. The class will choose one of the two ideas and provide feedback on the architecture for that idea.

Homework Assignment

Using the idea the class chooses and feedback on that idea, revise your site’s architecture. Create 2 unique looks for your web site that are informed by the information architecture. Each look should show a home page and an interior page (4 pages total).

Week 7: Visual Design presentations

July 9

Each student will present their visual designs (2 unique directions) to the class for a critique. The class will choose one of the two directions.

For those of you that stayed late last week (and those of you who wanted to but couldn’t), here are the sample files we worked on in class:

Download “It’s a Start” files (.zip)

Homework Assignment

Using the feedback on the chosen visual design, revise the initially designed home and interior page and design the rest of the pages (6 total) for the site. Begin to code your site.

Recommended Online Reading

Week 8: Lab time

July 16

Use this time to continue creating your site. Get help from Dan, Kerry, or your peers if you need it.

Homework Assignment

Continue to work on your site.

Download “Image-Based Nav” files (.zip)

Week 9: Lab time

July 23

Use this time to continue creating your site. Get help from Dan, Kerry, or your peers if you need it.

Homework Assignment

Continue to work on your site.

Week 10: Final Presentation

July 30

Students will present their finished site to the class. Congrats, you’ve made it through!