YSDN1006 Interactivity Design 1 (Lab 01)
4028TEL Tue 8:30 to 12:30 (Winter 2010)

Prof: Andrew Hladkyj

Week 12 MAR23


in class:
  • review Project 3 for final integration due next week
  • in class production
  • jquery examples

Click here to see a sample site showing various jQuery examples.
Click here to download this demo site.

LINKS

50+ Amazing Jquery Examples
See jQuery links posted to HTML/CSS Tips
jQuery UI demos



Week 11 MAR15


in class:

Inspiration
Ten Commandments of Good Design
Although this list is meant for industrial design, many of these apply to web design
Web Design
look for: Various Portfolio Sites
Sampling of various treatments such as a sketchbook treatment, clean and minimal look, column grid layout, and an unconventional layout with bright colours


Web Design
look for: Spry Menus
From the Dreamweaver Developer Centre


Week 10 MAR09


in class:
Project 3
in-class exercise - group critique
Group 1
Group 2
Group 3
Group 4
LINKS
link
link


Week 9 MAR02


in class:
Project 3
presentation
LINKS
• Inspiration

Smashing MagazineInspiration/Web Design


Week 8 FEB23


in class:
Project 2
presentation
due week 9:
-
for in class review
checklist
LINKS
Technical
link - size text using ems
link - about DOCTYPE

• Inspiration
link
link

Week 7 READING WEEK



Week 6 FEB09


in class:
Project 2
- more on CSS ( presentation )
- CSS rollovers ( tutorial )
- post-it note grid exercise ( print this pdf in tabloid format )

- ex3 production
- review Project 2 / Ex2 - class critique
due next class:
-
for in class review
Remember to check your work and validate your code - use this checklist
FILES
zip - multiple link colours in CSS file and example of nesting class/id in text_1.html
LINKS
Inspiration / Found Image Collage Art
link - by Bill Zindel
link - work by Chad Kouri

Technical
link
link
link


Week 5 FEB02


due next week:
- Project 2 : Ex2 for in class review
-
Bring a magazine you plan to use for Ex 3

Positioning CSS Typography
- Introduce Project 2 / Exercise 2
- Review Project 2 / Exercise 1
- grids for the web
Files
zip sample files for linking/external css for ex 2
Links
•Typography
link - On Web Typography by Jason Santa Maria
link A guide to Web Typography from iLoveTypography.com
link - CSS rotation
• Grids
link - Grids are Good
• Inspiration

link


Week 4 JAN26


- HTML / CSS presentation
- Introduce Project 2 / Exercise 1
- Review Project 1 / Exercise 3

Links
• Colour

For palette inspiration and fun, visit kuler

(also built into Illustrator - Window menu/Extensions/kuler)

• CSS
- Beginner Tutorial / Intermediate Tutorial
• Inspiration

link - Piet Mondrian
link - CSS Zen Garden
link - CSS Beauty



Week 3 JAN19


Motion presentation
(Animation Basics Quicktime movie examples)
Project 1
- review Exercise 2
- introduce Exercise 3

Processing

Motion
Translate Scale Rotate
Interactivity
Mouse 2D MousePress mouseButton mouseClicked()
mouseDragged() mouseMoved() mousePressed()
mouseX mouseY

zip • Sample Code (look for Units 20-29 then folders Input 1 and Input 4)

Week 2 JAN12


Processing: Beyond the Basics Lecture
Project 1
- review Exercise 1
- introduce Exercise 2

Links
• Lexicon for Ex. 2

Pattern | Texture
(source Graphic Design: The New Basics )
variables
(source Processing.org )

• Downloads
link
Sample Processing files
link Example with looping transparent fill
• Processing in Action
link Radiohead / House of Cards
Music video made with 3D capturing and Processing//
link
• Inspiration
link Spirograph



Week 1 JAN05


Course Introduction
Processing Lecture
Project 1

Links
• Lexicon for Ex. 1
link • Rhythm and Balance / Symmetry and Asymmetry
(source Graphic Design: The New Basics )

• Processing Textbook
pdf • Sample Chapters
zip • Sample Code
(source processing.org/learning/books )

• Processing in Action
linkGenerative Identity SoftwareCOP15
link Realtime Information Graphics
• Inspiration
link