Web Design 1
instructor: Dan Ouellette

Class 02

Introduction to Web Development Process

Meeting with clients
Analyze information
Overview of Information Architecture
Relating information to design

1. Analyze your audience and Purpose
2. Design The Site and It's Pages
3. Aim for Simplicity
4. Make the Text Easy to Read and Understand
5. First Steps in Web Design Video

Assignment: First steps to Design a web site

Instructor will act as the client to answer student questions to get an analysis to begin web project.

Based on the supplied document provided by the client analyze it's content and create:

1. a site map and
2. a wireframe prototype (2 prototypes)
for the Home page and a typical page using a graphic software program. (ie Illustrator, Photoshop, etc...)

Download Word Doc: webinfo.doc

Due beginning of 4th class

Class 03

HTML 101

Fundamentals of HTML code

Exercise:
Hand code an HTML web page using all the tags described in the 2 supplied Word documents.

You may do this in Dreamweaver using code view and deleting all the automated code that comes with a new page then applying code manually.

You can use any text editing software as long as you add .html to the filename.

HTML101a.doc

HTML101b.doc

Class 04

Look & Feels + HTML 101 part 2

  • Review Site plans
  • Review wireframes
  • Introduce re-writing of client supplied text to suit internet scanning. (Discuss with client before changing their text)

Introduction to Look & Feel:
Concerns include branding, colours, layout and applying information design to visual design.

Instructor will demonstrate some possible visual design solutions through showing 3 different Looks & Feels.

Exercises:

  • Re-do HTML exercise using Dreamweaver Tools.
  • Begin work on 1 Look & Feel using graphic software such as Photoshop or Illustrator.

HTML101a.doc

HTML101b.doc

1. Using Dreamweaver Create:
a Heading
a sub-heading
paragraph of text
text hyperlink
place an image
image as a link
an ordered list
an unordered list

Due in Class same day

2.Begin 1st of 3 different looks and feels.

Due beginning of next class

Link to Photos

Class 05

Tables & Table Cells
Function and application

HTML Techniques using Dreamweaver
Auto generated methods using Adobe Imageready .

Exercise:
1. Manipulate and edit table with table cells following PDF handout.

2. Slice an existing design from Photoshop into table cells and create rollover buttons on page for export as an HTML file with table and cut up and optimized graphics.

Bonus: Proper Directory Structures.

1. Tables cells assignment

2. Video tutorial of Imageready auto generated table assignment available in class.

Class 06

Graphic Optimization

Methods using Adobe Photoshop and Imageready

  1. Understanding and applying compressions, formats & resolutions to single images and individual slices in Imageready.
  2. Setting a default optimization for slices.
  3. Optimize to file size.
  4. Indexed Colours.
  5. Transparency in images.
  6. Animated GIFs

Exercise:
1. Available in class

Optimization of Graphics Chart

Class 07

Mid-term Test

 

Class 08

Create Navigation

  • Review Mid-term
  • Review final Project

Apply navigation using html and javascript to students designs and link up 2 pages.

  1. Go over Setting up Root Directory.
  2. Setting up imageready to export html and images with folder.
  3. Definning Site in Dreamweaver.

Class 09

Introduction to Frames

Exercise: Supplied as Video tutorial

Introduction to Cascading Style Sheets Exercise: Supplied as Video tutorial

Class 10

Introduction to Flash

Exercise: Create animation, interactive buttons using actionscripts to trigger motion and link to web sites.

Class 11

In-Depth Process Overview

1. Analyze your audience and Purpose
2. Design The Site and It's Pages
3. Create Code and Content
4. Revise and Test the Site
5. Launch the Site
6. Register with Search Engines
7. Keep your site up to date

Designing Effective Sites and Pages

1. Aim for Simplicity
2. Make the Text Easy to Read and Understand
3. Create Informative Headers and Footers
4. Help Readers Navigate the Site
5. Create Clear, Graceful Links
6. Avoid Web Clichés
7. Include Extra Features Readers might Need

Lab Time

Work on Final project

Class 12

Lab Time

Work on project

Class 13

Lab Time

Work on project

Class 14

Final Projects Due

In class critique