Casa Basa Enterprises ~ blending art with technology

MM2203 Introduction to Web Design

Course Description: An exploration of the process of web design from proposal to production. Students design and produce web sites with web editing software.

Course Length: 11 weeks, Tuesday, October 3, 2006 to Tuesday, December 12, 2006, from 8 a.m. – 12 noon, Room 401.

Course Prerequisites: MM1123 Fundamentals of Web-based Programming

Instructor Availability Outside of Class:
Tutoring Support are Thursdays, noon to 1 p.m., room 311.
S.W.A.P. club meets Tuesdays, noon to 1 p.m., room 401.

Required Textbooks:
Creating Web Sites: The Missing Manual (paperback) by Matthew MacDonald (O'Reilly Media, Inc.), 1st Ed. Oct. 2005. ISBN: 0596008422.
Designing Web Usability by Jakob Nielsen (New Riders Publishing ), ©copyright 2000. ISBN: 1-56205-810-x.

Recommended Textbooks:
Dreamweaver 8 Bible by Joseph Lowery (Wiley; Bk&CD-Rom edition), © copyright 2006. ISBN: 0471763128.
Web Design, The Complete Reference by Thomas A. Powell (Osborne/McGraw-Hill ), © copyright 2002. ISBN: 0-07-222442-8.

Course Competencies:
Upon successful completion of this course, the student should be able to:

Design layouts for a web page.
Successfully convert Pantone colors into web colors.
Develop logically-structured web pages in Dreamweaver or similar program.
Identify the essential elements of successful page navigation.
Create workable links between portions of a page.
Animate graphical content.
Construct a form document.

Grading:

Professional Conduct: Class Attendance, Participation, Teamwork
- 25% of your grade based on class attendance, preparedness for classroom discussion, and assistance to others
Assignments and Exercises
- 45% of your grade will be on class room labs as well as assigned homework
Midterm and Final Projects/Examinations
- 30% will be divided between midterm and final projects and examinations

Return to top of page

MM2203 Introduction to Web Design Study Schedule

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.

Week 2

October 10

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.

Week 3

October 17

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

Week 4

October 24

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.

Week 5

October 31

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.

Week 6

November 7

TOP

Lecture:

Editorial style: writing for the web.

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.

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.