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 Midterm Project

For Next Class

Begin Midterm 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 midterm.)

Week 7 - March 15

In Class

Class Cancelled. Please post your homework to your website.

For Next Class

Continue working on Midterm 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 Midterm

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

Midterm 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

Intro to P5.js - variables, functions, and if statements

For Next Class

Create a sketch with p5.js.

  • Explore the library and try out new code. There are lots of complex examples, but for this assignment, it is more important to turn in code that works and that you can understand.
  • Examples on Codepen.io
  • Examples on Behance

My Favorite Internet 10

Week 13 - May 3

In Class

Intro to P5.js - creating animation with loops, reviewing basics

Overview of Final Project

For Next Class

Begin work on your Final Project

You have two weeks to create a polished project using p5.js. This project is worth 30 points. You may choose to make a musical interface, a simple game, or a digital art piece, but it must be interactive.

Visual Design - 10 Points

  • Design is cohesive and consistent
  • Concept is well-developed and shows creativity
  • Design is well-executed, and attention to detail is apparent

Interaction Design - 10 Points

  • Interaction is apparent or discoverable
  • Project is easy to use and enjoyable
  • Visual design contributes to the usability, and does not distract from functionality

Coding - 10 Points

  • Code is written clearly, with comments and proper indentation
  • Code works

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