Art 442B Interactive Design III

442B Syllabus Spring 2019

Kathryn Bondi –

T/TH 6-9 pm • VAC 136

WEEK 1 –

Thursday, January 17:

Introduction: Syllabus, Projects overview. Introduction of first assignment, Assignment 1: Mailchimp—arts e-newsletter.

WEEK 2 –

Tuesday, January 22:

Project check; 7:45 p.m. crit for e-blast newsletter; Introduction of Assignment 2: App development; Adobe XD

Thursday, January 24:

Project 2: Lecture: UX design, problem proposal and creating personas – create 3 total

Persona exercises are hidden in everyday life:

What is a user story?

Create 2 user stories for each persona you create

WEEK 3 – 

Tuesday, January 29

Review ideas and personas. Start site map.

Thursday, January 31:

Card sorting and Style tiles


Tuesday, February 5: 

Begin plotting app screens in Adobe Experience Design (intro to Xd)

UI discussion and examples – resources on Google drive

UI elements in app building:

Thursday, February 7:

App work session/progress check


Tuesday, February 12: QUIZ #1

App work session/progress check

Thursday, February 14:


Tuesday, February 19: QUIZ #1

App work session

Short lecture on Sketch vs. XD – benefits and drawbacks

Thursday, February 21:

App project crit

Project 3: iPad interactive magazine.

Watch this example of an interactive magazine article for inspiration:


Tuesday, February 26:

InDesign interactive demo

What makes an engaging story/layout?

Video editing, sound editing

Review magazine outline/topic – Magazine lab

Thursday, February 28: NO INSTRUCTOR

Lab – continue working on magazine


Tuesday, March 5

Demo on publishing; Progress check on magazine


Upload magazine to test

Thursday, March 7:

Load magazine to iPad; magazine crit;

Introduction of Adobe After Effects; Assignment 4: AfterEffects


Tuesday, March 12: Spring Break

Thursday, March 14: Spring Break

WEEK 10-

Tuesday, March 19:

Animated infographics – storyboarding

Thursday, March 21:

Animated infographics – review storyboards and illustrator scenes

Basic AfterEffects overview – import scenes into AfterEffects

AfterEffects Warm-up exercise


Tuesday, March 26:

Animation/progress check

Adobe AfterEffects tutorial for video editing/effects

Thursday, March 28:

Animation lab time

Integrating text in a meaningful way


Tuesday, April 2:

Animation lab time/progress check

Integrating sound/music; Creating a Vimeo account and uploading online

Thursday, April 4: NO CLASS


Tuesday, April 9: Project 4 Crit

Animation Crit

Intro to Assignment 5a: Wireframes/Assignment 5b: Ecommerce website

Webflow Store Front/Small Biz Web site

  • for yourself or a friend that has original products, whether made up by you or actual items you make
  • at least 8 items with a legitimate ability to purchase (paypal, shopping cart, Shopify, etc.). It doesn’t have to function but it would be something that could be set up later.
  • SEO optimized: write meaningful copy, change page titles, use webfonts, alt text images, description and keywords
  • Send link for final submission

Lecture on wireframing advantages, UI elements, and designing for “mobile first”

Thursday, April 11:

Ecommerce wireframes – sketches on paper

Ecommerce wireframes transposed into XD

WEEK 14-

Tuesday, April 16:

Hand in XD wireframes

Begin 5b: Discuss applying wireframes to Webflow website design, Webflow walkthrough

Thursday, April 18: Easter break

WEEK 15-

Tuesday, April 23: 

eComm website

Thursday, April 25: QUIZ #2

eComm website, progress check

Week 16

Tuesday, April 30:

Professional feedback on eComm site

Thursday, May 2: FINAL CRIT

Last day of class – eComm website CritF