Miami University: Web and Interaction Design and Interaction Design

Course Number and Section: IMS222  Web and Interaction Design

Term: Spring 2011

Meeting Time: T/TH 2:15-4:50pm


Location: Hiestand 200


Instructor: Lindsay D. Grace


Office Phone: 513-529-2203

Email: (best)

Office Address:  Hiestand 206

Twitter: @mindtoggle

Course Site
:  or

Office Hours: 11:00 am – 12:30 pm Tuesday and Thursday and by appointment (can meet in 201 Laws when available)

Course Overview:

This course is an opportunity to investigate interactive design as it relates to a variety of media types.  Using industry standard tools, students will learn to design, implement and refine interactive media for specific audiences.  For the purpose of this class, interactive media includes websites, menu systems, and the variety of software and hardware solutions that intersect the domain of human-computer interaction. 

Effective interactive design is often achieved by the creative application of sometimes disparate disciplines. Students should expect to incorporate their understanding of art theory, psychology, commercial business practice and good old fashioned creative problem solving. 

This course will use web design and web page development as the central case study for exploring the many challenges of interactive design.

Required Textbook:

HTML, XHTML, & CSS for the World Wide Web: Visual Quickstart Guide 6th edition
Elizabeth Castro  / Peachpit Press

Paperback: 456 pages
ISBN-10: 0321430840
ISBN-13: 978-0321430847

Available as a no-fee electronic text from the Library/Safari online

Suggested – but not required:

Interaction Design: Second Edition

Yvonne Rogers and Helen Sharp

Paperback: 800 pages

·  ISBN-10: 0470018666   ISBN-13: 978-0470018668


Students may also receive timely articles debating interactive design standards and practices as well as excerpts from standard texts available on the class site or distributed in class.


Required Materials

Reliable Storage Media: USB Drive or portable hard drive for in-class work (must have by second class meeting)
Access to Adobe Suite – CS5: Dreamweaver, Flash, Photoshop, Bridge (available in Hiestand 200)


The computer lab in Hiestand 200 has all required software for the course. This lab has hours posted on its front door. King27 (swipe access required) and the King Library’s SIM lab also have the software required to make websites.  If you are interested in a career in web design or a related field, buying the software a discounted would be a good decision.  For beginners, the differences between Adobe software versions are far less pronounced. Adobe Creative Suite (CS) interface changes are largely incremental.

Estimated Homework Hours:

As always, learning a language takes practice.  Expect at least 3-6 hours a week.


Upon successful completion of this course, students should be able to:



 Course Schedule


Day 1 – Design Day

Day 2 -  Development/Making Day


(reading to be completed by the end of the week it is posted)

Week 1:  8/23 -8/25

Interaction Design


Introduction  and Orientation



  Defining interactions and HCI

  Overview of Technology


Making Websites

·         Client, Server and the Browser

·         Language and Translation-HTML,CSS and Dreamweaver - Markup Coding introduced

Suggested Design Orientation Reading:

    Interaction Design, Beyond HCI pp 3-10

Week 2:  8/30 – 9/1
Web Design and Development


  Understanding the feedback loop

  Interesting Interactions

  Designing Interactions – Process and     Creative Workflow

-      Determining audience needs

Demo, Psycho,  Technographics



Introduction to Dreamweaver:

·         Linking, Images and text

Introduction to Photoshop

·         Resolution and document editing

Required Tech Reading (Castro):

   Introduction: pages 13-26 Design

   Chapter 1: 27-42


Assignment 1 Preparation: Come to next week’s class (9/8/11) with an elevator pitch – what kind of site would you like to make? Have a 2-3 minute graphical presentation (e.g. Powerpoint) ready for who, what, where, why, etc. –think small, simple site. Review example pitch presentation

Week 3:  9/6 – 9/8
Designing with People in Mind



It’s About People

-      Optimizing Use/Usability

-      Presentation Pitch Prep – how to pitch



Dreamweaver Continued:

·         (X)HTML and HTML5 Fundamentals

·         Habits of Highly Effective Coders – the semantic web

·         CSS Introduction


Due: 5% of your grade

Assignment 1 Due: Pitch

 In Class Presentation of Elevator Pitches  (site ideas)


Required Design Reading:

Don’t Make Me Think Chapter 2


Suggested Design Reading:

    Interaction Design Chapter 1, pp 10-18

Suggested Tech Reading (Castro):
   Chapter 2: 44-46
   Chapter 3: 55-58,  64-65

Week 4:  9/13 – 9/15
Information Architecture


Information Architecture

Formal Paper Prototypes and Testing


-      CSS Crash Course

Liquid, elastic, and static

Development:  Guest Lecture

·         Wireframes, Comps, and Paper Prototyping

·         Web Page Layout and structure: Layers, Tables, and Frames in Dreamweaver


Required Design Reading

 The Elements of User Experience – Chapter 2

Suggested Tech Reading (Castro)

    Chapter 7: 119-124

    Chapter 8: 127-136

Week 5:  9/20 – 9/22
Diagnosis and Design


Assignment 1 Due



Design Lab – Research your web design idea with real people and design based on their feedback.



Comp lab time / instructor feedback


Come to class ready to design or continue design of your comp/mock up. Have something to show.



Review feedback and prepare comp for 9/29

Week 6:  9/27 – 9/29
Visual Content and “Stimuli”




Design: User task analysis


Due: 5% of your grade

Assignment 2 Comps – “PechaKucha Style”

Present comps in 2 minutes or less – solicit feedback


Suggested Design Reading:

     Interaction Design Chapter 1, pp18-20
 Suggested Tech Reading (Castro):

    Chapter 5: 81-102 (skim)

Week 7:  10/4 – 10/6


Lab  Week – Individual help with implementing your  web page design


Week 8: 10/11 – 10/13 Project 1 Due


Due: Present Midterm websites and provide critique                                                                                                                

25% of your grade

- 5 minute (maximum) presentation of your work ready

See checklist for full requirements

Week 9: : 10/18 – 10/20

Post Midterm Review

Post Midterm Review

·         CSS: External styles and multiple formats



Week 10

10/25 – 10/27

Design: Animation and Engagement

·         Processing feedback

·         Balance doing and seeing

Flash, Javascript , Java and Plugins (a little development)


·         Animation with Dreamweaver

Animation with 3rd Party Tools

Suggested Tech Reading (Castro):
    Chapter 11: 169-182

    Chapter 17: 253-280


Week 10: 11/1 – 11/3

Calculation and Engagement

·         Animation with Photoshop

 Lab  / Studio – Start Project 2


·         JavaScript (light intro)

·         Adding JavaScript and client side Interactions


Lab  / Studio – Continue Project 2 (get feedback)

Assignment 3 Prep (some in class):  Begin Final Project Wireframes, Comps/Image mockups and research

Week 11: : 11/8 – 11/10

JavaScript Primer

– Using Lightbox

– Galleries and Data Visualization


Lab  / Studio


Lab / Studio

Continue work on wireframes, comps and image mockups
   Suggested Castro Chapter 18: 281-310
   Suggested Castro Chapter 19: 311-320

Week 12: 11/15 – 11/17

Assignment 3: Due Present final project draft:

    Wireframes, comps/image mockups and research presentation                                                                                          

Mass Producing Pages:

·         Making Templates, frames and external CSS

Assignment 3 is worth 10% of your grade

Week 13: 11/22 – 11/24


Design:  Sound, Video


Thanksgiving break – no class

Tech Reading (Castro):

Chapter 20: 321-326


Week 15: 11/29 – 12/1

Studio   Week – Individual help with implementing your  web page design


No reading – simply work on your project



Development: Pre Beta Development Support

No reading – simply work on your project

Week 16: 12/6-12/8

Final Project Presentations and Beta Turn in due (online) via Niihka

Project 3: Beta  Due (working site with very minor problems)  -                                                                                              30% of your grade





Week 17:

Finals Week

Project 4: Final version of site Due at the start of exam period     (12/13 @ 3:00pm)                                                          10% of your grade






*Schedule subject to change based on student need and at the instructor’s discretion. 

Please review the following page for scheduled due dates:


·         Sections marked with green are days in which studio/lab hours are at least half of the class session. Please bring your working files and any specific questions about your current project to class.

·         Sections marked with white on black are grade-impacting due dates. Required readings are quiz eligible, suggested reading is bonus eligible.

·         Sections marked in gray are homework reminders  and warnings

5% of your grade is allocated for quizzes. Quizzes are not scheduled. Quizzes are provided only when either the class is clearly not doing homework, general participation is poor, or upon request by students.  If no quizzes are given, then all students receive full credit for their quiz grade.





Grading System:

Point Score range

Letter Grade

93 and above




















Below 62






Score Breakdown:

·         Assignments (includes traditional homework if needed):                                                                                            25%

o   Assignment 1:  Elevator Pitch for Midterm Site (9/8/11)                                (5%)

o   Assignment 2:  Midterm Site Comps (9/29/11)                                                  (5%)


o   Assignment 3: Competency Quiz(es) –( if needed)                                          (5%)


o   Assignment 3:  Pitch/Comp/Wireframe Prep for final site (3/29)              (10%)

·         Project 1: Website #1  

o   Basic 5 page site: good design, working site                                                                                                        25%

·         Project 2: Site Beta Website #2

o   min 10 pages – (90% function and error free-ready for limited release)                                                                30%

·         Project 4:  

o   Site Final (revisions to site 2 –best work and uploaded)                                                                                               10%

·         Participation:                                                                                                                                                                                    10%

o   Critique comments, questions in class, preparedness


Course Requirements and Policies

All students must adhere to the guidelines set forth by the Miami University handbook.

Assignments (25%)

All assignments are due at the beginning of the class. 


Students should provide a copy of their design work on a clearly labeled CD. All assignments must be clearly labeled (filenames, correct file extensions, etc), and provided in a system folder with the students first and last name.

Students should always keep a backup copy of their work.  Lost data or computer failures are not excuses for poor or missing work.

No late assignments will be accepted. In this course, assignments build on the previous.  Failure to complete prior assignments will make each subsequent assignment more difficult. It is in your best interest to complete each assignment on time and to the best of your ability. Always hand in what you have, even if it does not work. Partial credit is better than no credit at all.

Pitch : You will make 2 project pitches during the semester.  Ptich presentations are quick, clear overviews of planned projects. A sample pitch presentation slide set is provided on the class website

Wireframes and Comps: Wireframes describe the relationship of elements on your page (page wireframe) and the relationship of web pages to each other (site wireframe). A comp is a mockup of a page or set of pages. A comp provides a preview of the intended design before actual development begins.  A comp is a good way to elicit feedback before you are completely invested in your design.  Comps should be made in Photoshop for this course. If your comp is constructed well, it will lessen the effort needed to complete the final product.

A separate list of evaluation criteria are provided for the major projects in this class. Please review that list for further details. 

Midterm and Final Projects (55%-65% of total grade):

The bulk of the grade in this class is based on the two projects. Assignments inform the projects. Doing a good job on the assignment should simplify your midterm and final project work.  Project expectations are outlined on the class website. Projects are graded using a checklist of requirements that balance technical challenges with design objectives.  While there are subjective elements to any aesthetic creation, I do my best to standardize evaluation. 

All completed midterm and final projects must also contain a single screenshot of your webpage in its optimal resolution. Please supply the image in JPG formal, resized to 1024x768.



Participation Grade (10%):

Students are encouraged to ask questions and initiate dialogue about interaction design in the course. Given the diverse set of majors participating in the course, there is terrific potential for informative discussion. 


This course is delivered through a studio model. In a studio model students spend more time in class and are expected to participate in class critiques. Critiques are opportunities to share ideas and provide constructive feedback about design and technical considerations for everyone’s project.  Positive and negative feedback should be provided by all students in the class. 


Participation grades are determined by students willingness to answer questions, preparedness for discussion (did you do the reading?), and the feedback they provide in class. Absences will negatively effect your participation grade.  In cases where a blog or forum is used for the class, students’ contributions to the blog or forum effect their participation grade.



This course is modeled after the traditional art-studio. This means the course relies heavily on feedback from the instructor and other students. This feedback takes the form of critique which aims to offer improvements to every project.  If you have never taken an art or design course, this may be a new process to you. The hallmark of good critique is constructive criticism that takes into account learned methodology, references to related work, and clear communication.  As part of every student’s grade involves participation, offering useful critique is essential for class success.

Studio Course

Studio courses combine hands-on education with time for students to work through self initiated challenges. The instructor’s role in a studio course is to guide the student, but not necessarily solve the problem.  Making is a process, and much of the education happens when a student is confronted with a challenge they must solve.  This course offers ample time for studio work. Typically the last hour of the course is provided for students to work through their projects. The instructor is available during studio hours to help student through their most pressing challenges. Please use studio hours effectively, and plan specific questions during these hours. You are not required to stay in the lab during studio hours, but doing so typically promotes student success.

Attendance / Absences:

As stated in the Student Handbook, you are expected to attend all scheduled class meetings. The attendance policy for this course is as follows: Up to two absences will be tolerated without penalty. Three unexcused absences will result in the final grade being lowered one letter grade (10pts. on a 100pt. scale). Four unexcused absences will result in the final grade being lowered two letter grades. The fifth unexcused absence will be regarded as the final cut and the Registrar will be notified to drop the student from the course. The three absence allowance is provided for emergency and health related situations. It is the student’s responsibility to provide information concerning all absences and you should speak to the instructor before missing a class. The determination of an excused (vs. unexcused) absence is up to the discretion of the instructor (doctor’s written excuse for example). Please do not arrive late or leave early from class. If you arrive late it is your responsibility to make sure you’re counted as present. Please see the student handbook for specifics on university policies.

All planned absences should be clearly explained in an email sent to the instructor before the student misses the class. The instructor will reply indicating whether or not the absence is excused.

All issues of attendance and tardiness will be handled as school policy dictates and at the discretion of the instructor.

Class Lab/Studio Time:

This course operates under studio hours. Typically each class will begin with a lecture or demonstration, followed by some type of practice activity.  This portion of class will typically take the first 2/3 of the session, with the remainder of the time available for one on one guidance from the instructor.  At the beginning of the semester the ratio or group instruction and activity will be highest. Toward the end of the semester you will be given substantial amounts of class time to complete projects using studio hours.  For students who have not taken studio classes it might help to think of them as supervised work hours. They work best when you seek guidance and support from the instructor.

In Class Conduct:

In-class web surfing, email, electronic chat, text messaging, or related behavior is prohibited during class meetings.  Please be attentive to people’s comments and engage yourself in class. 

No recording (audio or visual) of this class may be made without the prior written consent of the instructor.

Statement of Community and Non-Discrimination: Miami University is committed to fostering a supportive learning environment for all students irrespective of individual differences in gender, race, national origin, religion, handicapping condition, sexual preference or age.  Students should expect, and help create, a learning environment free from all forms of prejudice.  If disrespectful behaviors occur in class, please seek the assistance of your instructor or the IMS director.

Disability Support

Students who have any disability, either permanent or temporary, which might affect their ability to perform in this class, are encouraged to inform me immediately.” (If a student self-identifies, please contact the Rinella Learning Center (9-8741). Website:

Cheating and Plagiarism:

Any student that cheats or plagiarizes will be reported to the academic standards committee and may be dismissed from the course.  A student may be considered in violation of cheating and plagiarism policy if they present the work of others as their own, even if the work is provided through multiple online and print resources.  Much like a writing course, students involved in web scripting, programming and related activities should attribute their work by stating the resource from which the work was derived.  This is common practice in industry.  Examples of such attribution are provided below:

<!--An implementation of the “floating div alignment hack” as first offered by Sarah Smith at on April 30, 2009-->

//Bubble Sort algorithm in Actionscript provided at //

/*  Derived from Craig Reynold’s Boids Flocking Behavior as specified on pp. 48-52 of Great Game Algorithms, ISBN 1233131321  */

All homework is to be completed independently (except when told otherwise). Any student who is caught or suspected of working in conjunction with any other student will be penalized. Using lines of code borrowed from any source other than the prescribed book for this course will be considered plagiarism unless the student clearly credits their source. Do not use websites, message boards, chat rooms, or other related resources to solve homework problems.

When presenting your work, you should also credit sources and attribute work appropriately.