Interactive Web Design I

W 22 Jan

Topics

• Introduction

In-class

• Kenilworth (text)
• Sign up for a GitHub account and verify your email address

Projects

• Start Communicating design

Hey!

There’s reading due for next week! It’s listed under next week’s entry.

W 29 Jan

Topics

• HTML/CSS typography: capturing meaning

Reading

• Frank Chimero, Designers vs Coding
• HTML & CSS, ch. 1 (available for download)
• Suggested: Don't Fear the Internet:
  Not a Series of Tubes and HTML (video)

Projects

• Review Communicating design
• Start Recipe markup

In class

• Recipe starter file on GitHub
• Completed recipe (ZIP)

W 5 Feb

Topics

• The Box Model
• HTML/CSS page layout

Reading

• HTML & CSS, ch. 2, 3

Demo materials

• Layout demo (ZIP)

From class

• Layout examples (ZIP) for review
• Completed recipe demo (ZIP)

W 12 Feb

Topics

• Class shortened b/c of snow
• Images
• GitHub Pages
• Layout questions, if snow allows

Reading

• HTML & CSS, ch. 5, 16

Projects

• Final Recipe markup
• Start Event

Demo materials

• GitHub instructions
• Basic site on GitHub
• Image samples (ZIP)

W 26 Feb

Topics

• Images

Reading

• HTML & CSS, ch. 13, 15

Projects

• Have two weeks worth of design for Event! Finish steps 1 and 2, and make progress on 5 and 6. For class, show type, image, and color samples, and bring rough sketches that explain several concepts. (Sketches can be on paper.)

Demo materials

• Basic site on GitHub
• Image samples (ZIP)

From class

• Image demo, complete

W 5 Mar

Topics

• GitHub publishing
• Layout

Reading

• HTML & CSS, ch. 16
• UX Sketching or Lost Art of Thumbnail Sketches

Demo materials

• GitHub instructions
• Basic site on GitHub
• Multicolumn layout (ZIP)
• Multicolumn layout, complete (ZIP)

W 12 Mar

Topics

• Guest speaker, Ross Nover

Reading

• HTML & CSS, ch. 14 (Lists, tables, and forms)
• Look inside Google’s data centers

Class exercise

• Layout exercise

W 26 Mar

Topics

• Building navigation systems

Reading

• HTML & CSS, ch. 18 (Process and design)

In-class

• Navigation demo

W 2 Apr

Topics

• Publishing a website
• Content Management Systems
• CSS detailing

Reading

• Why “OK” Buttons Are Always On The Right
• 99% Invisible: The Blue Yarn

Projects

• Semifinal Event
• Start Narrative

W 9 Apr

Topics

• Guest speaker, Beth Soderberg
• Mobile/responsive sites

Reading

• The Myth of the Myth of the Unicorn Designer

Projects

• Final Event

W 16 Apr

Topics

• Responsive sites

Reading

• Responsive Web Design
• Should I Use a Carousel?

In class

• Responsive demo
• Responsive demo, complete
• In-class exercise

W 23 Apr

Topics

• Accessibility
• JavaScript fundamentals

Reading

• What is Web Accessibility?
• Contrast is King

In class

• jQuery documentation
• Basic JavaScript + jQuery demo (ZIP)
• Basic JavaScript + jQuery demo, complete (ZIP)
• JavaScript scene demo (ZIP)
• JavaScript scene demo, complete (ZIP)
• To reiterate, jQuery is a library (a set of tools) for JavaScript. They are not the same.

W 30 Apr

Topics

• Working with and evaluating scripts
• Online mapping

Reading

• What Screens Want

In class

• FlexSlider

From class

• Slider demo, complete (ZIP)
• Consider Unslider instead

W 7 May

Topics

• Making accessible websites
• Information architecture, usability, and testing

Reading

• Frank Chimero, No New Tools

In class

• Accessibility example (ZIP)

W 14 May

Topics

• Professional practice and process
• Futures

Projects

• Final critique