MM2203 Introduction to Web Design

image of book An exploration of the process of Web design from proposal to production –students design and produce Web sites with Web editing software.

Class Information

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 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.

Course Prerequisite(s): MM1123 Fundamentals of Web-based Programming

Required Text: Stunning Css3: A Projects-based Guide to the latest in CSS by Zoe Mickley Gillenwater. Published December 10, 2010 by New Riders Press. ISBN-10: 0-321-72213-2.

Projects: CSS ZenGarden and documentation, 1 kb challenge

Weekly Course Outline:

Week 1: Syllabus

Lecture: Creating layouts for web pages. What kind of sites do you do? We will look at inspiration web sites: Example 1 and Example 2 and discuss the mechanics. Web Style Guide, the web page layout.

How to Wireframe and organize and present your content is discussed.

The Gestalt principles as they pertain to web design is reviewed.

Lab:

Back-to-basics: A review of web page development. Creating a css sheet from scratch.

Create a blog for your homework. Each week you will post to this site. For full credit, give me this address before you leave class today.

Homework:

Read chapter 1 of text, The CSS3 Lowdown, paying special attention to the Case Study. Then submit your current site to http://www.websiteoptimization.com/services/analyze/. Improve some quality of your site that will decrease your page upload time. Blog results of before and after.

Useful links:

http://www.subcide.com/articles/creating-a-css-layout-from-scratch/

http://dribbble.com/

Smashing Magazine
mastering-css-styling-design-elements/
The perfect 3-col layout
45 step by step web designs with Photoshop
Simplicity in Good Web Design (thanks, Franky!)
What Copyright Means for your Website: http://www.sitepoint.com/blogs/2009/03/11/what-it-means-to-copyright-a-website/ submitted by Nick Dyzkeul, former AI student and currently Web Developer for Gallo Winery
Free FTP: http://www.smartftp.com/
An Ebay-like site for artists: http://www.etsy.com/
http://www.cssdrive.com/

Week 2: Lecture: Process, design & color schemes. Elements of design. CSS properties: word-wrap, border-radius, hsla, linear-gradient, box-shadow, text-shadow, transform. Flexible text: setting a base font
Lab: convert pantone colors to rgb, block out code. Review of box model (last week).
Homework: Create box model tutorial and upload to your blog. Add something you learned today to your own site (see me Monday at noon if you need some additional help, room 309).

Useful links:

Character Entity Reference

YouTube: Work Backwards to Understand CSS Structural Pseudo Classes

CSS3 Transform Tool: http://westciv.com/tools/transforms/

Css structure and rules

Pseudo elements and pseudo classes

Week 3:

Lecture:

Web standards - accessibility and usability
http://css-tricks.com/what-beautiful-html-code-looks-like/ - with a big thank you to Franky for this link.
http://www.ic3.gov/ - report abuse
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

Lab: Creating Transforms

We will explore animations and movement using the transform property of CSS3.

Download this page and take a look at your source code. We will use this base page to create different menu animations. The original page and other menu options came from an excellent source: http://tympanus.net/codrops/2011/10/24/creative-css3-animation-menus/ for many different web tutorials and resources. For the base css, download their styles page: demo.css which just styles the initial page.
Begin research on your midterm Tutorials page. Share found resources with your fellow students.
http://www.1stwebdesigner.com/css/50-awesome-css3-animations/
http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/
http://coding.smashingmagazine.com/2011/09/14/the-guide-to-css-animation-principles-and-examples/
http://webdesignerwall.com/trends/47-amazing-css3-animation-demos
http://www.sitepoint.com/a-primer-on-css3-transforms/
http://css3.bradshawenterprises.com/transitions/
http://w3schools.com/cssref/css3_pr_transform.asp

Homework:

Add to your Tutorials section, an explanation of the differences between Absolute, Static, Relative and Fixed positioning.
Begin considering what tutorial you will offer (CSS related) as your midterm week 6.

Interesting Links:

http://cssbeauty.com/
http://www.cssplay.co.uk/layouts/index.html
http://www.artinhk.com/
http://www.madeofjapan.com/
This is that site that makes html code for movies http://cit.ucsf.edu/embedmedia/step1.php
Fight spam: http://acme-web-design.info/
http://www.toxiclab.org/ various software tutorials
http://960.gs/ - the 960 grid site has a following with our WDIM students
http://www.alistapart.com/articles/practicalcss/
Case sensitivity and selectors: http://reference.sitepoint.com/css/casesensitivity#

Week 4:

Find out what they like, and how they like it, And let 'em have it just that way.
- Fats Waller

Lecture: In week 3, we continue with coding but focus on the end user as well. It's all about user centered design and designing as efficiently as possible.

Visual hierarchy. Pantone color vs. Web colors.

Psuedo-classes: http://www.youtube.com/watch?v=nuCoBOdY2Qk

The structure of css continued - http://24ways.org/2009/cleaner-code-with-css3-selectors

http://webdesignledger.com/tools/8-useful-css-tools

Organizing information - "chunking", hierarchy of information, relations and functions. Site design themes. Page layout tools.

Process. What makes good web design? The psychology of the web user.

Page size design: what is optimal?

Structure and color schemes: arrangement of text and images on a page: visual hierarchy

Browser data: www.w3schools.com/browsers/browsers_stats.asp

from Scott: http://www.sawmac.com/

Lab:

Creating a CSS site using built in Dreamweaver templates. Creating your own templates and assets.

http://www.webreference.com/authoring/style/sheets/layout/advanced/

step-by-step Dreamweaver and CSS palettes

Homework:

In text, complete chapter 3 Multiple Backgrounds. Email me when completed.
Study for quiz: css positioning, html tags, Web Standards, web graphics

Week 5:

Lecture: [Midterm] in class quiz. Stylesheets: Using stylesheets to make your site more flexible. Print, smartphones css.
Lab: Dreamweaver Commands and Behaviors. HTML5 form.
Homework: Create a print stylesheet for your personal site and post.

Useful links: http://coding.smashingmagazine.com/2011/11/24/how-to-set-up-a-print-style-sheet/

Week 6:

Lecture: Student presentations of tutorials.
Lab: Student midterm presentations and discussion.
Homework: Be sure to post backup material of tutorial. Begin Zen research.

Example: Transitions, transforms, animations - http://css3.bradshawenterprises.com/all/

Useful link: http://www.yourhtmlsource.com/stylesheets/advancedselectors.html

http://mezzoblue.com/zengarden/alldesigns/

Week 7:

Lecture: Continuation of tutorials. Discussion of CSS Zen Garden (final project)
Lab: Research CSS and layouts: who are you targeting? What research says about them?
Homework: On your blog: Find 3 examples of existing sites for inspiration and link. Quote your research (use MLA). Sketch some sample ideas & post.

Week 8: Lecture: CSS Zen Garden (final project). Design list. Testing your site.
Lab: Lab time to begin work on your final project
Homework: Create wireframe of final project and post to blog.

Week 9: Lecture: Documenting your project. Presentations of Zen Garden

Lab: Critiques and examination of projects. Introduction to 1kb challenge.
Homework: Work on 1kb project. Blog about your experience with both 1kb and Zen in learning css.

Week 10: Lecture: Animation http://tympanus.net/codrops/2011/12/19/experimental-css3-animations-for-image-transitions/
Or try this: http://tympanus.net/Tutorials/ExperimentsBackgroundClipText/index.html
Lab: Animation and changes to your personal site are completed. http://spielzeugz.de/html5/liquid-particles.html
Homework: Create an animation and post.

Week 11: Lecture: [Final Quiz.]
Lab: Presentations and critique.
Homework: None.