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 509 (June & July 2009)

1. June 30, 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. July 2, Thursday:

HTML & CSS Basics: DIV, SPAN, Class, ID, 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.

*** NO SCHOOL JULY 4 - INDEPENDENCE DAY HOLIDAY WEEKEND ***

3. July 7, Tuesday:

CSS Layout with Floating, Pixels & Percentages

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

4. July 9, Thursday:

CSS Layout with Relative & Absolute Positioning, More Type Formatting

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

5. July 11, Saturday:

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

• More about Links
• Fixed Positioning & Z-index

6. July 14, Tuesday:

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

• Smashing Magazine Wallpaper Showcase
• CSS Background Properties

7. July 16, Thursday:

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

• Lists
• Table Structures
• iFrames

8. July 18, Saturday:

Midterm Exam & in-class Midterm Project

9. July 21, Tuesday:

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. July 23, Thursday:

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

• 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
• Site Planning Documents: Blueprinting Symbols, Wireframes & Prototyping
• Wayfinding & Road Signs: Wayfinding, Immigrant Family Road Sign, Art Signs, Road Sign Fonts

11. July 25, Saturday:

Continuing Web Graphic Techniques: Customizing Templates & Themes, What is JavaScript?

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

12. July 28, Tuesday:

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

13. July 30, Thursday: (Short Day: 5-6pm only)

Final Project Presentations