MM2203 Introduction to Web Design

ourse Description:

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

Punctuality is expected. Points are deducted for excessive (more than 3) tardies. You can track your grades by your name and student id on my Gradekeeper page. Grades are updated once a week, usually Sunday morning.

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

Recommended text: The HTML Pocket Guide ISBN:0-321-69974-2 and The CSS Pocket Guide ISBN:0-321-73227-8, both by Peachpit Press.

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

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

 

Grade Information: As I receive emails from students that they have uploaded their homework to their homework sites, I update points. Login to this link to Gradekeeper and enter your First and Last name (case sensitive, capitalize the first letter of each) and your student id number to see your points to date. Your name is exactly like I have it below. It is case (and space) sensitive.

 

open book icon for lecture informationList of lectures and labs

 

Students are responsible to check this at least one day prior to class. Email me at sharon@casabasa.com if you have any questions. Tutoring is available on Mondays at noon, rm. 309.

Week 1: Tuesday January 10, 2012

Complete the student survey.

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/

 

Week 2:

Lecture:

How to Convert Rgb to Pantone in Photoshop | eHow.com tutorial and Pantone conversion chart.

http://kuler.adobe.com/#themes/rating?time=30

Review of the box model. http://www.w3schools.com/css/css_boxmodel.asp

Lab:

Flexible text: setting a base font; using keywords and percentages. Creating a flexible layout. Box Model - what is it?

  • Creating rounded corners, transparency, gradients and drop shadows. Open this page and save it to your root folder. Access to the images can be found on pg. xiv of the Introduction section within your text.
  • Creating CSS @media. Different style sheets for different needs: As a group, research best practices to create a print stylesheet. Download this page to work with. Help each other.

Homework:

Complete your print stylesheet from lab. Be sure to save as it is a requirement for Portfolio I.

Complete chapter 2 of your book, Creating speech bubbles, and link to your site. Make it your own by "tweaking" parts of the code. Experiment but take screenshots of before and after. Post images and thoughts to your blog. Along with the next paragraph, of course.

Blog about both the design qualities (ch. 2) and technical abilities (printing the url on the print stylesheet) that css gives a designer. Let me know once you post.

Useful links:

http://simplebits.com/publications/bulletproof/code/ - many of my best practices comes from the recommended book, Bulletproof Web Design by Dan Cederholm. This is the code cited in the book though I urge you to visit his simplebits site itself. Better yet, BUY THE BOOK. Many WDIM students were grateful to own.

http://webdesign.about.com/od/beginningcss/f/css_import_link.htm @import or <link>?

As a note when specifying content width, 100% is ONLY speaking about the content area. When adding margins or padding, this gets added into the numbers.

The only way to address the whole box model content area is to use a css3 spec of border-box: 100%. When this is applied it takes into account the border, padding and content (not margin). However, this is not a standard yet, so you will have to preface the code with the targeted browser (e.g. web-kit or moz):

box-sizing from http://www.quirksmode.org/css/box.html

box-sizing does not work in combination with min- or max-width or -height.

A CSS3 declaration currently under consideration at W3C allows you to switch box models. The official syntax is:

box-sizing: border-box
box-sizing: content-box

The first declaration will cause the box sizes to be applied to the border and everything inside it (traditional model), the second one will cause the box sizes to be applied to the content only (W3C model).

Mozilla supports its own variation of this declaration:

-moz-box-sizing: border-box;
-moz-box-sizing: content-box;
-moz-box-sizing: padding-box;

The first two declarations behave exactly like their CSS3 counterparts. The third one is a Mozilla extension: it will cause the box sizes to be applied to the padding and everything inside it.

IE8 uses a similar variation:

-ms-box-sizing: border-box
-ms-box-sizing: content-box;

Test

Some boxes for your testing pleasure. The styles of the boxes are:

div.test {
width: 300px;
padding: 10px;
border: 5px solid #000000;
margin-left: 10%;
margin-bottom: 10px;
margin-top: 10px;
}

Week 3

Coding and the structure: what are Web Standards? Today we discuss creating pages usable by all.

I have an existential map. It has "you are here" written all over it.
- Steven Wright

Lecture:

Lab:

Practicing css. Accessing and installing social media: Facebook, LinkedIn, Twitter are examined.

http://cookbooks.adobe.com/post_Scale_Background_image_to_browser_size-17590.html

  • Homework:

    Chapter 3, Notebook Paper, from book. Create a page based on the chapter using multiple backgrounds. Add a Google font. Link on your blog and discuss the process. Email me when ready for grading.

Useful links:

http://www.adobe.com/cfusion/exchange/index.cfm?event=productHome&exc=3&loc=en_us - Dreamweaver exchange.

http://960.gs/

http://compass-style.org/

http://sass-lang.com/

http://www.google.com/webfonts

http://1kbgrid.com/

http://www.modernizr.com/

http://basecamphq.com/

Week 4: Wedneday October 26, 2011

Lecture:

Creating a template in Dreamweaver. Essential parts of a web page are discussed, blocked out visually, then created as a wireframe.

Selectors review: extending .css to get the results you want

Which one? import, external, internal or inline?

http://www.crazyleafdesign.com/blog/top-40-beautiful-and-inspirational-website-designs-of-2008/

http://tv.adobe.com/watch/inside-the-dreamlabs/dreamweaver-cs5-css-inspect/ - working with the box model

If you own CS5.5 or installed the plugin from Adobe's Exchange, there is now increased control of CSS3 in Dreamweaver: http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-css-authoring/

Lab:

Positioning: Absolute, Fixed, Relative and Static.

 

Homework:

  • Create a web page tutorial using a css3 standard. Due week 6.

Week 5:

[Midterm] in class quiz.

Css position: position static, absolute, relative and fixed of an element

http://www.w3.org/TR/xhtml1/ - the rules of a well-formed xhtml document

Lecture: Stylesheets: Using stylesheets to make your site more flexible.

Understanding the beauty of structual pseudo-classes: the nth child. http://www.youtube.com/watch?v=nuCoBOdY2Qk

Lab:

A tutorial using the nth child. Individual evaluations and assistance.

Homework: Post comments to blog about today's classwork. Complete your tutorial for next week. Be sure to have either handouts and/or a web page to augment your teaching.

Useful links: http://www.ecsspert.com/atari.php | http://www.w3schools.com/html5/html5_canvas.asp | http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/ | https://developer.mozilla.org/en/Canvas_tutorial

arrow links to top of page

Week 6:

Lecture:

The importance of designing for your user. Discussion of user-experience with a web page. Student and instructor provided websites are discussed.

Discussion of your final project, CSS Zen Garden.

Lab:

Research and begin your final project, due week 9. Although you may not touch the html at all, with the CSS page, we will bend the rules a bit and allow CSS3. Individual meetings with instructor.

 We will review http://www.gdoss.com/web_info/PRI_wireframes.pdf how to wireframe.

(time allowing) Chapter 4 of text, Styling Images and Links by Type. Following the reference to using attribute selectors to target by type, change an image on a webpage to look like it is a Polaroid.

Homework:

  • Conduct research on your final project. Create wireframe of final project (Zen Garden) proposed page and post to blog.

Helpful Links:

Wireframes: http://www.smashingmagazine.com/2011/11/09/establishing-your-grid-in-photoshop/

http://sixrevisions.com/user-interface/website-wireframing/

Another "look" submitted by Scott Cooksey - be sure to View > Source: http://www.kulturbanause.de/

http://earth.google.com/outreach/tutorial_user_experience.html

Week 7:

Lecture:

http://webdesignerwall.com/trends/47-amazing-css3-animation-demos - Some more uses for CSS3.

We will continue with the tutorial presentations.

Lab:

  • If there is any time left, open lab to work on CSS Zen Garden, your final project.

     

Homework:

  • Research your final project and post 2 credible references to your blog. They can be about your target audience, proposed design, how to create, or anything else relevant to finishing up a portfolio project.

 

Useful Links:

http://tomw.net.au/2006/wd/smartphone.shtml. A world without stylesheets? We will view and discuss various web pages online, while turning stylesheets on and off.

http://css-discuss.incutio.com/wiki/Handheld_Stylesheets

Mobile Web Best Practices 1.0 (W3C)

Read this article from another famous blog, AListApart: http://www.alistapart.com/articles/return-of-the-mobile-stylesheet

 

Week 8:

Lecture:

A peek at HTML5. Be sure you come to class.

Lab:

Lab time to complete final project. Presentation of project-to-date next week.

Homework:

  • Finish final project due next week. Upload your mobile .css page and let me know where it is.

Useful Links (from today):

 

Week 9:

Lecture:

Presentations of CSS Zen Garden - this is of your progress to date. Students have commented that this helped them tremendously to finalize design and perhaps learn new tricks from each other.

Lab:

Homework:

arrow links to top of page

Week 10:

Lecture:

Lab:

General discussion of usability assessment, design and evaluation. http://slodive.com/freebies/jquery-animate/ | http://www.webappers.com/2011/03/21/how-to-create-a-slick-animated-content-menu-with-jquery/ | http://www.emanueleferonato.com/2010/03/03/create-a-dynamic-content-animated-footer-ad-for-your-site-in-just-15-jquery-lines/

Homework:

Add an animation to your site.

Week 11:

Presentation and Critiques

Lecture: [final exam] Formal presentation and critique of student projects.

Lab: None.

Homework: None but wrap up your online production log with your final thoughts.

Student information - Winter 2012

Student Web Sites

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project

Student Name | Homework | Final Project


A few past Zen sites:

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

Anna Guerrero

Alfonse Suriago

Roman Diaz and a second one

Ricky Navarro

Chris Haines

Meredith Picerno

Sam Alegria

Kosta

Oscar Barajas

Melissa Picardo


Interesting readings

 

http://sizzlejs.com/

http://www.modernizr.com/

http://validator.nu/

http://tantek.com/favelets/

http://www.smashingmagazine.com/2009/10/01/how-to-respond-effectively-to-design-criticism/

Statistics to keep in mind

Testing your site. https://browserlab.adobe.com/index.htm

  • ~ peace, polka and piwo

 

Scroll to top