Week 1

October 3

Complete the student survey. Review of the school’s emergency evacuation procedures.

Lecture:

• Process. What makes good web design? How do the rules differ from print, dvd, movie? An overview of the process, including a mission statement, immediate and long-term goals, and information architecture.
• A garden is finished when there is nothing left to remove
  - Zen aphorism
• Structure and color schemes: arrangement of text and images on a page
• Design elements: alignment, proximity, repetition, contrast, horizontal and vertical space
• Grid Systems: Design grids for Web pages, Web grid systems, Thinking outside the Grid
• http://www.stylegala.com/

Lab:

• Using Photoshop to preview layouts for clients. Best practices for images on the Web.
• Design a new sample home page for your student account:
  • 744 pxls width by 410 pxls height
  • all information above the fold
  • navigation (with rollovers) showing your major areas
  • viewer knows what they will see within 2-3 seconds

Homework:

• Read Part I: Chapters 1-4 of The Missing Manual and work through any exercises that are unclear to you. You are expected to know this material by next class.
• Read http://www.webstyleguide.com/ as a supplement to your required texts. This should be ongoing throughout the quarter and will be included in tests.
• What size should you create for? Read http://www.webmonkey.com
• Complete home page design. Bring to class next week.
• Bring OLS information to class next week. You are required to have access to a server for in-class use by next week.

All homework is due the following week.

Lecture:

• Interface Design. The interaction process of web design. How do your pages answer Who? What? When? Where? User-centered design.
• I have an existential map. It has "you are here" written all over it.
  - Steven Wright

Lab:

• [Critique #1] new sample home page
• [In-class assignment] Read through 10 guidelines for user-centered design. Discuss as a group.
• Introduction to Dreamweaver. Create root and sub-folders. Upload to OLS account.

Homework:

• Part II: Building better web pages, chapters 4 - 8, of Missing Manual.
• Chapter 3, content design, in Nielsen book.
• Redesign your sample home page (pick two styles): international, street savvy, informational, business. Upload to site and link from homework section.
• Email me your url.

Lecture:

• Site design. Organizing information - "chunking", hierarchy of information, relations and functions. Site design themes.
• Find out what they like, and how they like it, And let 'em have it just that way.
  - Fats Waller

Lab:

• [Critique #2] 2 new styles
• Assignment of new style (student's pick)
• Introduction to ImageReady. Example: Laurel Highlands area of PA

Homework:

• Using Dreamweaver, design a new page for your root folder. It must contain all of the following elements, and fit in style to your already existing web pages:
  • one named anchor
  • linked image
  • link to outside URL that opens a new browser window
  • one class and one id style
  • the page should be designed as a "stand-alone" page - it should get the viewer to within one or two clicks every page within your site, regardless how the viewer came upon it. This means no reliance on a BACK button.
  • the page should immediately establish where within the site it is located, what the site is about, and where the viewer can go from that page

Lecture:

• Page design. Visual hierarchy: design grids for web pages.
• Clutter and confusion are failures of design, not attributes of information.
  - Edward Tufte, 1997 interview

Lab:

• [Critique #3] present "stand-alone" page for critique/discussion
• Dreamweaver design elements. Using the tools of the trade. In-class lab. Creating a template using Dreamweaver.
• Discussion of each other's styles.
• Assign new style.

Homework:

• Redesign of "stand-alone" page
• Assigned Readings
• Bring at least 10 self-created graphics to create a portfolio.

Lecture:

• [Quiz] based on assigned readings
• Typography on the web. Dreamweaver and CSS. W3C and CSS.
• The satisfaction of the craft comes from elucidating, and perhaps ennobling, the text, not from deluding the unwary reader by applying scents, paints and iron stays to empty prose.
  - Robert Bringhurst, The Elements of Typographic Style

Lab:

• [Critique #4] Review redesign in new style
• Review of final project and discussion of design elements. Your final project is a minimum of 7 pages that teaches something that you know. See past student examples.
• Dreamweaver Commands and Behaviors. Creating a Web Gallery.

Homework:

• Create a portfolio section for your personal site. Remember to spell check. Due next week.
• Research effects of typography on the web. Send an email to your classmates and instructor outlining what you read, before next class. Include a linked reference on (choose one): it's effect on learning, -or- typography as design, -or- visual effects.
• Chapter 4: Site Design in Jakob Nielsen book.
• Chapter 12: Letting Visitors Talk to You (and Each Other) of The Missing Manual text.

Lecture:

• Editorial style: writing for the web.
  • Prefer the specific to the general, the definite to the vague, the concrete to the abstract.
    - William Strunk, Jr., and E.B. White, The Elements of Style

Lab:

• Final project requirements and project assistance.
• Interactivity and the Web. JavaScript and DHTML.
• In class critiques/discussion.

Homework:

• Send an email to your classmates. Include within your message, links to one example of good web writing, and one example of bad writing. We are looking at the use of chunking and visual space, but you can also choose pages that have misspellings, poor use of grammar, are too busy/too little contrast to read, etc. Explain within the email what was good or bad.
• Your final project is worth 15 points:
• 5 points for a project timeline and supporting documentation including the information design, as well as navigation and screen design. Provide documentation for your choice of delivery to your targeted audience. Include sketches (roughs) to finish web page (screenshot) of your home page.
• 10 points for the project itself. How well do you wear the 3 hats of a Web Designer?
• Chapter 6: Accessibility for Users with Disabilities in Jakob Nielsen book.
• Chapter 14: JavaScript and DHTML: Adding Interactivity of The Missing Manual text.

Week 7

November 14

Lecture:

• Designing Web Usability and Accessibility. Creating menus and buttons.
  • Who are you gonna believe, me or your own eyes?
    - Groucho Marx

Lab:

• Web graphics. Photoshop: converting Pantone color to Web colors.
• More work with ImageReady: creating animations and rollovers.

Homework:

• Create an animated rollover and upload to portfolio page
• Chapter 15: Fancy Buttons and Menus of The Missing Manual text.
• Research interactivity

Week 8

November 21

Lecture:

• Multimedia applications, design and delivery.
  • For time is the medium of narration, as it is the medium of life.
    - Thomas Mann, The Magic Mountain

Lab: Forms, Validation using Behaviors, Importing Tabular Data

Homework:

• Add feedback form to site. Must be able to receive my feedback.
• Chapter 16: Audio and Video of The Missing Manual text.
• Continue work on final project design and storyboards.

Week 9

November 28

Lecture:

• Design for clients. Submitting sites to search engines. Blogs. Q&A.
  • It's as large as life, and twice as natural!
    — Lewis Carroll, Through the Looking-Glass

Lab:

• [Critique #5] of projects to date. We will look for all the main considerations and offer suggestions.
• Lab time for work on your final project: completing your final design documents.

Homework:

• Chapter 17: Blogs of The Missing Manual text.
• Add site map to your root folder
• complete final design documents

Week 10

December 5

Lecture:

• Security issues. Comment Spam Manifesto.
• “In design sometimes one plus one equals three.”
  - Josef Albers.

Lab:

• Review the user-centered workbook from the University of Washington for your own site.
• Write a style guide for your site. Due at end of class.
• Open lab

Homework: Continue work on final project.

Week 11

December 12

Lecture:

• [Final quiz]
• Presentations and in-class critiques. You will present your final project to the class. Speak about technical, design and creative challenges. Use your design documents to illustrate how you targeted your selected audience, and where you were successful.
• “Design must seduce, shape, and perhaps more importantly, evoke emotional response.”
  - April Greiman.

Lab: Presentation of final project and evaluations.

Homework: None.

Student Progress & Site Information

Quick links:
	Details of your individual score
	Web Resources
	Tutorials
	Instructor's Schedule
	Final Project
	Past Student's Work

Student Web Sites

Spring 2006 Final Grade
Sunday, June 18, 2006 7:42 PM