An exploration of the process of Web design from proposal to production –students design and produce Web sites with Web editing software.
Course Description: An exploration of the process of Web design from proposal to production –students design and produce Web sites with Web editing software.
Upon successful completion of this course, the student should be able to:
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
Week 1: Syllabus
How to Wireframe and organize and present your content is discussed.
The Gestalt principles as they pertain to web design is reviewed.
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.
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.
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).
CSS3 Transform Tool: http://westciv.com/tools/transforms/
Lab: Creating Transforms
We will explore animations and movement using the transform property of CSS3.
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.
The structure of css continued - http://24ways.org/2009/cleaner-code-with-css3-selectors
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/
Creating a CSS site using built in Dreamweaver templates. Creating your own templates and assets.
step-by-step Dreamweaver and CSS palettes
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.
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/
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 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.
Maria Miranda | Blog | CSS Zen | Personal site
Amanda Mathews | Blog | CSS Zen | Personal site
Essence Smith | Blog | CSS Zen | Personal site | homework
Chris Dopp | Blog | CSS Zen | 1kb Challenge
Student Web Sites
Glenn Maravilla | Website | Final Project | Blog
Cody Byrnes | Website | Final Project | Blog
Stella Hui | Website | Final Project | Blog
|Elizabeth Daniels | Css zen garden|
|Jack Bowen | Css zen garden|
|Karina Baylocq | Css zen garden|
|Adam Flores | Css zen garden|
|Jessica Gillis | Css zen garden|
|Sean Mangosing | Css zen garden|
|Rafael Martin | Css zen garden|
|Adrienne Nodado | Css zen garden|
|Gina Padgitt | Css zen garden|
|Maddy Reingold | Css zen garden|
|Serenity Rushton | css zen garden|