Skip to content

jgagne/id-sp18-ec

BranchesTags

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

56 Commits
lessons
lessons
 
 
LICENSE.md
LICENSE.md
 
 
README.md
README.md
 
 

Repository files navigation

ART3402

Interactive Design

  • Wednesday, 1:25–4:05 p.m., ADM 535
  • Instructor: Justin Gagne
  • Email: [email protected]
  • Office Hours: TBA
  • Class Workspace on Slack — Where Work Happens™
  • Work: Design lead for Gymnasium at Aquent in Boston, MA.

Course Description

This advanced course introduces students to the concepts and techniques of interactive design through industry standard web development. Through focused projects, students will explore interactive paradigms of user experience, information architecture, and navigation design with an emphasis on organization and usability. Current and future directions of interactive design will be discussed with a focus on advanced HTML, CSS, responsive design, frameworks, and workflows.

Schedule

Week 1

January 17

  • First Day of Class

Content Markup

90 percent of design is typography. And the other 90 percent is whitespace.

—Jeffrey Zeldman, designer, writer, and publisher

Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside.

—Frank Chimero, designer, illustrator, and writer

Lectures

Hello World

Readings

Warm-Up

Editing Soft Copy

Text, format, and markup (text-level semantics).

Week 2

January 24

  • No Class; Work from Home Day

Readings

Week 3

January 31

Warm-Up

Editing Soft Copy

Text, format, and markup (text-level semantics).

Readings

Project

Recipe

Select a cooking/baking recipe to share (and make).

  • Markup the content first with semantic HTML.
    • Consider what each content chunk and phrase is and about
  • Use proper typographical characters for numbers, punctuation, symbols, etc.
  • Photograph the final product
  • Develop the look and feel of your content
    • Create a style tile
      • Develop a color palette based on the colors your recipe
      • Serif or sans-serif text, or both? (≥90% Win/Mac)
Inspect

Week 4

February 7

Homework

Recipe

Create a style tile (for the general look and feel) and, then layout two comps, one for small screens (mobile first) and the other for wider screens (tablet–desktop).

  • Make comps by hand on paper (as a paper prototype) or use a digital design tools like Illustrator, InDesign, Sketch, etc. (Please, skip Photoshop.)
  • Be ready to show style tile(s) and comps for the next class as a print-out or an on-screen PDF
Separation of Content and Style
  • Markup content with semantic HTML
  • Add an image and write a descriptive alternative text
    • For example: <img alt="An orange cat is sleeping." src="img/orange-tabby.jpg">
  • Use an external stylesheet
    • For example: <link rel="stylesheet" href="css/main.css">

Comping

Readings

References

Week 5

February 14

  • Valentine’s Day

Content precedes design. Design in the absence of content is not design, it’s decoration.

—Jeffrey Zeldman, designer, writer, and publisher

The Web is 90% text, so let’s style it first.

—Jeremy Thomas, CSS guru and author of MarkSheet

Choosing a typeface is not typography.

iA, digital design and product agency

Homework

Recipe

Focus on content first and mobile first layout using padding, border, and margin, accessible text and background colors, use of web safe fonts, and basic typographical adjustments. Don’t worry about layout for wider width screens — mobile first and friendly.

Lecture

Type, Color, and Layout

Readings

References

Week 6

February 21

Readings

Week 7

February 28

Demo

  • Web Fonts Demo Using @font-face and preload for loading performant web fonts

Project

Reading Redesign

Select and redesign a previously assigned reading from the course syllabus as a single-page website focusing on readable typography, accessible colors, and flexible images with a responsive layout for various screen sizes — small (mobile first) to wide(r) (tablet, laptop, and desktop).

Week 8

March 7

  • No Class

Week 9

March 14

Week 10

March 21

Lecture

HTML and CSS frameworks — web design and development made faster and easier.

Homework

Reading Redesign

Select and redesign a previously assigned reading from the course syllabus as a single-page website focusing on readable typography, accessible colors, and flexible images with a responsive layout for various screen sizes — small (mobile first) to wide(r) (tablet, laptop, and desktop).

  • Begin with sketches of the article redesign — mobile first, then for a wider screen
  • Use Bootstrap’s stylesheet, bootstrap.css, as the foundation for layout
  • Use a separate stylesheet, main.css, for custom typography and colors

Readings

References

Week 11

March 28

Demo

Tutorial

Week 12

April 4

Demo

Week 13

April 11

Simplicity is about subtracting the obvious and adding the meaningful.

—John Maeda, designer and technologist

Project

Single Serving

Design a modern responsive single serving website — a single-page with a single-theme based on self generated content; focusing on type, color, image, and layout built using Bootstrap as a foundation.

References

Homework

Recipe To-Dos

  • Recipe To-Dos #tasklist
  • Copy and paste tasklist (click the "Raw" button, then copy and paste) in your recipe repo as a new "To-Dos" issue and start checking each to-do off

Week 14

April 18

To-Dos

Copy and paste each tasklist (click the "Raw" button, then copy and paste) in your repo as a new "To-Dos" issue and start checking each to-do off.

Week 15

April 25

  • Last Day of Class

Break Bread

Bake, cook, or prepare your recipe and bring to the last class to share for potlock lunch. #optional

Critique

  • Recipe
  • Redesign
  • Single-Serving

To-Dos

Copy and paste each tasklist (click the "Raw" button, then copy and paste) in your repo as a new "To-Dos" issue and start checking each to-do off.

Grading

  • Any updates to project repos must be done, and please notify me via Slack, by the end of day on Monday, May 7 for final grading. (Final grades are due Wednesday, May 9.)

Course Eval

Interactive Design (01)-ART340201 #comments

Tools

Text Editors

Pick a free flavor…

Developer Tools

HTML and CSS validators, and more…

Digital Design

Image Optimization

Books

Nice-to-have, but not required.

Resources

HTML

Misc

  • HTML Arrows A delightful reference for HTML Symbols, Entities and ASCII Character Codes
  • TitleCap Automatically Capitalize Your Title

Author

A course developed by Justin Gagne.

License

Creative Commons License

This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 4.0 International License.

About

Interactive Design

Topics

higher-education syllabus

Resources

Readme

License

View license
Activity

Stars

3 stars

Watchers

4 watching

Forks

1 fork
Report repository

Releases

No releases published

Packages

No packages published

Languages