Design & Authoring for Interactive Media

Fashion Institute of Technology
Computer Graphics Department

Instructor: Teresa Lamb
Email: teresa_lamb [at] fitnyc.edu
Class Time: Wednesdays 6:30 - 9:30pm

document icon Syllabus
github logo icon Github

Class Schedule — Spring 2017

Week 1 - Feb 1

In Class

Course Intro

  • Introductions
  • Review Syllabus

Intro to Web

  • Informal Quiz
  • Set up Github account. Make a new repository named CG221.
  • Set up Github page for CG221
  • Get familiar with Atom

For Next Class

Create your new website. You will use this site to post links to your homework assignments.

  • Add index.html page to CG221 repo. This will be the code for your website.
  • Use this template to structure your website.
  • Add link to My Favorite Internet entry.

My Favorite Internet 1

Codecademy lesson on HTML & CSS

Week 2 - Feb 8

In Class

Intro to CSS

Share MFI

For Next Class

Make a bio page for yourself.

  • Include at least one image, a paragraph about yourself, and add CSS to express your personal style.
  • Make sure you put this project in a separate folder on Github with its own CSS.
  • Have fun, and be prepared to share next week!

Read Ch 1 & 2 of Don't Make Me Think

My Favorite Internet 2

Continue Codecademy lesson on HTML & CSS

Week 3 - Feb 15

In Class

Designing with CSS - Slides

  • Developer Tools
  • Typography and Custom Fonts
  • Color Theory
  • Hierarchy
  • Grids

Share Bio pages and MFI

Discuss Reading

For Next Class

Make a Gallery (part 1)

Your page should include:

Your page should be designed:

  • Use a custom font
  • Have a custom color scheme

Read Ch 3 of Don't Make Me Think

My Favorite Internet 3. (This week it may be helpful to pick gallery or grid websites.)

Week 4 - Feb 22

In Class

Intro to Web Accessibility and Responsive Design

Name Quiz

For Next Class

Make a Gallery (part 2)

Your page should include:

Your page should be designed:

  • Use a custom font
  • Have a custom color scheme

Your page should be accessible:

  • Descriptive alt text for each image tag
  • Semantic HTML tags
  • If you have links, they should look clickable (use :hover)

Your page should be responsive:

  • Include the viewport meta tag in the head of your html
  • Your layout should change to fit the size of the browser

Read Ch 1 of Designing for Emotion

My Favorite Internet 4

Week 5 - March 1

In Class

CSS Graphics - Slides

  • image file formats
  • editing images in CSS
  • creating graphics in CSS
  • CSS animations

Share and critique gallery projects

For Next Class

Make an interactive collage with CSS

  • At least 5 elements (pictures, shapes, text)
  • At least 2 animations or transitions
  • You can try to convey an emotion, reimagine your gallery from last week, or design something completely unique. Have fun with it.

My Favorite Internet 5

Complete Codecademy lesson on HTML & CSS
or
Read through an HTML & CSS guide from the Resources page.

Week 6 - March 8

In Class

HTML & CSS Review - Slides

Overview Mid-Term Project

For Next Class

Begin Mid-term Project

Make a website for a cause that you care about. You should have a main homepage, an about page, and a contact page with a contact form. Your site should include copy about the cause including why you chose it, and at least 2 statistics displayed in a unique and interesting way. You will be graded on design so think about font choices, color schemes, imagery, and layout. Your site should be accessible and responsive.

Page 1 - Home

  • Description of the cause and related images
  • At least 2 statistics displayed in a unique and interesting way

Page 2 - About

  • A more in-depth description of the cause. Write about why this cause matters to you, how you discovered the issue, and additional research and resources. At least 2 paragraphs of text.
  • At least 1 photo related to the cause. Not the same as the homepage.
  • Links to the sources where you found your research and statistics.

Page 3 - Contact

  • Encourage people to take an action. Either send a message, join an email list, or donate money. For this you will need to make a form, but it will be non-funcitonal. Your form shoud have multiple inputs and a button to submit.

For this week

  • Pick a cause you care about, and give your site a name
  • Research your cause
  • Find images related to your cause
  • Create the structure (HTML) of your website, with some CSS. Plan to polish off the design later.

My Favorite Internet 6 (You can pick websites you find while researching your cause)

Read Ch 2 of Designing for Emotion. (This will help you with your mid-term.)

Week 7 - March 15

In Class

Class Cancelled. Please post your homework to your website.

For Next Class

Continue working on Mid-term Project

Refer to project description in week 6.

For this week

  • Choose the statistics you would like to display on your homepage. Sketch some ways you would like to display them. Consider typography, images, and the CSS Graphics slides for ideas.
  • Create your form. Focus on what information you need and the correct form of inputs (textbox, checkbox, radio buttons). Refer to Interneting is hard, W3C, and Shay Howe's HTML & CSS guide.
  • Write copy for your about page. Write in word or Google Docs first, then copy it into HTML to avoid typos. Site your research sources.
  • Begin designing your page by choosing fonts and colors. Make sure you have consistency across pages. Make a new CSS file for this site (not the same as your homework website). All three pages should share this one CSS file.

My Favorite Internet 7

Week 8 - March 22

In Class

HTML Forms - Slides

One-on-one meetings before midterms are due

For Next Class

Work on Mid-term

You are not required to turn in a MFI this week. If you do decide to turn one in, it will replace a late or missing MFI grade. You should have 7 total.

Week 9 - March 29

In Class

Mid-Term Projects Due - 5 minute presentations

For Next Class

You are not required to turn in a MFI this week. If you do decide to turn one in, it will replace a late or missing MFI grade. You should have 7 total.

Week 10 - April 5

In Class

Intro to JavaScript and JQuery

For Next Class

Make an interactive collage with CSS

  • At least 5 elements (pictures, shapes, text)
  • At least 3 JQuery interactions
  • You can try to convey an emotion, or encorperate some of your artwork. Have fun with it.

My Favorite Internet 8

Week 11 - April 19

In Class

More Fun with JQuery

For Next Class

Make an Order Form

  • Follow the instructions in the slide to make a one-page website.
  • Choose a thing or service that you'd like to offer (ex. flowers, puppies, cookies, singing telegram)
  • The user should have to make choices during the order process (ex. quanity, color, when they want it delivered). Use at least 3 elements from JQuery UI.
  • There should be a button to submit the order and something that happens when the button is pressed that let's them know the order was successful.
  • Design the website so the style is appropriate to what you are offering. Use images, color, fonts, etc. Most importantly, think about the interaction design.

My Favorite Internet 9

Week 12 - April 26

In Class

Processing.js

For Next Class

My Favorite Internet 10

Week 13 - May 3

In Class

P5.js - Slides

p5js.org

For Next Class

You are not required to turn in a MFI this week. If you do decide to turn one in, it will replace a late or missing MFI grade. You should have 10 total.

Week 14 - May 10

In Class

One-on-one meetings before finals are due

For Next Class

Work on Final Project

Week 15 - May 17

In Class

FINAL PROJECTS DUE!
10 minute presentations