Art 442B Interactive Design III

442B Syllabus Spring 2019

Kathryn Bondi – bondi@maryu.marywood.edu

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? http://www.romanpichler.com/blog/10-tips-writing-good-user-stories/

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

https://www.smashingmagazine.com/2014/10/improving-information-architecture-card-sorting-beginners-guide/


WEEK 4

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: https://www.webdesignerdepot.com/2015/02/the-best-free-ui-kits-february-2015/

http://graphicssoft.about.com/od/softwaretutorials/ss/An-Adobe-Experience-Design-Quick-Start.htm

Thursday, February 7:

App work session/progress check


WEEK 5-

Tuesday, February 12: QUIZ #1

App work session/progress check

Thursday, February 14:


WEEK 6-

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: https://indd.adobe.com/view/e7718b9a-4518-4bda-9efe-9df4d60cb3b3

https://helpx.adobe.com/indesign/using/dynamic-pdf-documents.html


WEEK 7-

Tuesday, February 26:

InDesign interactive demo

What makes an engaging story/layout? https://www.pinterest.com/pin/417357090443267463/?lp=true

Video editing, sound editing

https://helpx.adobe.com/indesign/using/movies-sounds.html

Review magazine outline/topic – Magazine lab

Thursday, February 28: NO INSTRUCTOR

Lab – continue working on magazine


WEEK 8-

Tuesday, March 5

Demo on publishing; Progress check on magazine

Publishing: https://helpx.adobe.com/indesign/how-to/self-publishing-online.html?set=indesign–whats-new

Upload magazine to test

Thursday, March 7:

Load magazine to iPad; magazine crit;

Introduction of Adobe After Effects; Assignment 4: AfterEffects


WEEK 9-

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


WEEK 11

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


WEEK 12

Tuesday, April 2:

Animation lab time/progress check

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

Thursday, April 4:

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”


WEEK 13

Tuesday, April 9:

Ecommerce wireframes – sketches on paper

Thursday, April 11:

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

https://webflow.com

https://university.webflow.com/courses/getting-started-with-webflow-ecommerce

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: GUEST SPEAKER

Guest speaker in the web development/design industry! (Posture Interactive)

Professional feedback on eComm site

Thursday, May 2: FINAL CRIT

Last day of class – eComm website CritF