Interactivity & Screen Design I

Expression College for Digital Arts

Course Director: Laura Cesari - lcesari@expression.edu

Textbook Materials: Learning Web Design

Assignments, examples, and resources will be given out in class.
Please email me if you have any questions or if you miss a day.

Class Schedule - Term 309 (March & April 2009)

1. April 14, Tuesday:

Intro to HTML & CSS: Image Types, Text & Fonts, Colors, Stylesheets

• Type Resources: Common Web-Safe Fonts, Lorem Ipsum Dummy Text
• Color Resources: Hexadecimal Values, Color Names, WebMonkey Color Chart, Adobe "Kuler" Color Tool

2. April 16, Thursday:

HTML & CSS Basics: DIV, SPAN, Images, Links, Margins, Padding, Borders

• Beginning HTML Elements: DIV, SPAN, Images, Links
• CSS Basics: CSS Reference, CSS Syntax, External Stylesheets
• The Box Model: Margins, Padding, Borders.

3. April 18, Saturday:

CSS Layout with Floating, Pixels & Percentages

• Floating Layouts: The Float Property, Setting Overflow
• Setting Dimensions: Percentages and Pixel Values

4. April 21, Tuesday:

CSS Layout with Relative & Absolute Positioning, More Type Formatting

• Absolute, Relative, & Fixed Layouts: CSS Position Property
• More Type Styles: Fonts, Text Formatting

5. April 23, Thursday:

Image Replacement Techniques with :hover pseudoclass, Different Types of Links, Fixed Positioning & Z-index

• More about Links
• Fixed Positioning & Z-index

6. April 25, Saturday:

Web Graphic Tricks & Techniques: Continuous Wallpaper Background Effects & Tessellation

• Smashing Magazine Wallpaper Showcase
• CSS Background Properties

7. April 28, Tuesday:

Web Graphic Tricks & Techniques: Photoshop Slicing with Absolute Positioning and Image Replacement, HTML Lists & Table Structures

• Lists
• Table Structures
• iFrames

8. April 30, Thursday:

Midterm Exam & in-class Midterm Project

9. May 2, Saturday:

Icons, Wayfinding, and Pixel Graphics

• Icon Design: Susan Kare, Pixture Studio, Mozilla Firefox Theme Designs
• Isometric Pixel Art: eboy, KirupaVille, pixeldam, World's Tallest Virtual Building
• Communities: pixeljoint, deviantART

10. May 5, Tuesday:

Information Design, Design Resources, and Various CSS odds & ends...

• Site Planning Documents: Blueprinting Symbols, Wireframes & Prototyping
• Wayfinding & Road Signs: Wayfinding, Immigrant Family Road Sign, Art Signs, Road Sign Fonts
• Web Design Inspiration: CommArts Web Picks, CommArts Winners, Digital Thread, Smashing Magazine, Webby Awards
• Templates & "Design Hacking": CSS Zen Garden, Firebug
• Not in the alphabet? Special Characters, Symbols

11. May 7, Thursday:

Continuing Web Graphic Techniques: Customizing Templates & Themes

• Lightbox by Lokesh Dhakar, Shadowbox by Michael I. J. Jackson
• CSS Transparency Settings

12. May 9, Saturday:

Continuing Techniques: Embedding Flash and Video, Image Switching, Tooltips, Drop-down Menus

13. May 12, Tuesday: (Short Day: 5-6pm only)

Final Project Presentations