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-5:00pm |
|
|
Location: Hiestand 200 |
|
|
|
|
Instructor: Lindsay D. Grace |
|
|
Office Phone: 513-529-2203 |
Email: LGrace@muohio.edu |
|
Office Address: Hiestand 206 |
|
|
|
|
|
Office Hours: 11:00 am – 12:30 pm Tuesday and Thursday and by appointment |
|
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)
Facilities:
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.
Objectives:
Upon successful completion of this course, students should be able to:
- Write and edit (X)HTML,
CSS
- Understand and edit
JavaScript code
- Optimize technical
solutions for fluid design adjustments and appropriate response to user
needs
- Identify, create,
collect and organize assets appropriate to client standards
- Optimize a web design
for search engines and specific technical needs (e.g. iPhone, Kiosk, etc)
- Use professional web
authoring tools including Dreamweaver and Photoshop to produce websites and
other interactive media
- Use and include Flash
technology on a basic site
- Apply interface design
principles to a variety of human-computer interaction environments
- Meet audience and client
needs through considered research and inventive solutions
- Maintain a set of web
pages on the Internet
- Apply usability
standards including consideration for universal accessibility
- Use existing web scripts
and write basic web scripting code (JavaScript)
- Identify and incorporate
varied media assets in a web design (e.g. video, audio, games, etc)
- Understand how design
and development dovetail to produce competent interactive media
- Understand and be able
to draft a basic user task analysis
- Understand the framework
under which a variety of web sites are produced (e.g. development, quality
assurance, production pipeline, wireframes and mock ups)
Course Schedule
|
|
Day 1 – Design Day |
Day 2 - Development/Making Day |
Due (reading to be completed by the end of the week it is posted) |
|
Week 1: 1/11 -1/13 Interaction Design
|
Introduction and Orientation
Design: Defining interactions and HCI Overview of Technology |
Development: 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: 1/18 – 1/20
|
Design: Understanding the feedback loop Interesting Interactions Designing Interactions – Process and Creative Workflow
|
Development: 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
Think about web project idea |
|
Week
3: 1/25 – 1/27
|
Design: It’s About People - Optimizing Use/Usability - Determining audience needs Demo, Psycho, Technographics |
Development: Dreamweaver Continued: - (X)HTML Fundamentals - Habits of Highly Effective Coders – the semantic web - CSS Introduction |
Required Design Reading: Suggested Design Reading:
Interaction
Design Chapter 1, pp 10-18 Suggested
Tech Reading (Castro): |
|
Week
4: 2/1 – 2/3 |
Ice Day / Class Cancelled-University closed |
Design: Information Architecture Formal Paper Prototypes and Testing Pitching your idea Development: - CSS Crash Course - Liquid, elastic, and static |
Required Design Reading: The Elements of User Experience – Chapter 2
Chapter 7: 119-124 Chapter 8: 127-136
Assignment 1 Preparation: Come to next week’s class (2/10/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
5: 2/8 – 2/10
Assignment 1 Due
|
Development: · Making Wireframes, Comps, and Paper Prototyping with Photoshop and others - Web Page Layout and structure: Layers, Tables, and Frames in Dreamweaver Any student may present assignment 1 early on this day
|
Due: 5% of
your grade Assignment 1
Due: Pitch In
Class Presentation of Elevator Pitches (site ideas) – see example
Design: User task analysis
|
Review feedback and prepare comp for 2/17 |
|
Week
6: 2/15 – 2/17
|
Design:
Comp lab time / instructor feedback
Come to class ready to design or continue design of your comp/mock up.
|
Due: 5% of
your grade Assignment 2
Comps – “PechaKucha Style” Present comps
in 2 minutes or less – solicit feedback – see example
|
Suggested Design Reading:
Interaction Design
Chapter 1, pp18-20 Chapter 5: 81-102 (skim) |
|
Week 7: 2/22 – 2/24 |
Lab Week – Individual help with implementing your web page design
|
||
|
Week 8: 3/1 – 3/3 Project 1 Due
|
Due:
Present Midterm websites and provide
critique
25% of your grade See midterm project examples |
No class 3/3/11. Start thinking about your next project and process feedback from project 1. Enjoy your Spring Break. |
- 5 minute (maximum) presentation of your work ready -Completed project burned to CD ( 5 page min). See checklist for full requirements |
|
Week 9: 3/8 – 3/10 |
Spring break! No class
|
||
|
Back to the Drawing Board
10/19 – 10/21 |
Design: Animation and Engagement · Processing feedback · Balance doing and seeing · Flash, Javascript , Java and Plugins (a little development) |
Development: · Animation with Photoshop · Animation with Dreamweaver · Animation with 3rd Party Tools |
Suggested
Tech Reading (Castro): Chapter 17: 253-280
|
|
Week 10: 3/15 – 3/17 |
Calculation and Engagement AJAX |
Development: Dreamweaver SPRY
Lab / Studio |
Assignment 3 Prep (some in class): Begin Final Project Wireframes, Comps/Image mockups and research |
|
Week 11: 3/22 – 3/24 |
Showcasing: Galleries and Data Visualization
Lab / Studio |
Development: JavaScript Primer – Lightbox and others
Development: Web Publication: FTP and Publishing Optimizing page information |
Continue work on wireframes, comps and image mockups
|
|
Week 12: 3/29 – 3/11 |
Assignment 3: Due Present final project draft: Wireframes, comps/image
mockups and research
presentation
10% of your grade 5 Minute presentation (max) |
||
|
Week 13: 4/5 – 4/7/18
|
Design: Sound, Video Making Content for other Devices |
Development: Web Publication: FTP and Publishing Optimizing page information |
Tech Reading (Castro): Chapter 20: 321-326
|
|
Week 14: 4/12- 4/14 |
Design: SEO (Search Engine Optimization) – Making your site more visible
|
General Lab/Studio |
No reading – simply work on your project |
|
Week 15: 4/19 – 4/21 |
User Study and task analysis Lab/Studio |
Development: Pre Beta Development Support |
No reading – simply work on your project |
|
Week 16: 4/26-4/28 |
Final Project Presentations and Beta Turn in due
(on CD and online) Project 3: Beta Due (working site with very
minor problems)
-
30% of your grade |
||
|
|
|
|
|
|
Week 17: 5/3 - 5/5 |
Finals Week Project 4: Final version of site Due at the start
of exam
period
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: http://miami.lgrace.com/documents/IMS222_Spring_2011_Web_Interaction_Design_Due_Dates.html
· 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 |
A |
|
90-92 |
A- |
|
87-89 |
B+ |
|
83-86 |
B |
|
80-82 |
B- |
|
77-79 |
C+ |
|
73-76 |
C |
|
70-72 |
C- |
|
67-69 |
D+ |
|
63-66 |
D |
|
Below 62 |
F |
|
|
|
|
|
|
Score Breakdown:
· Assignments (includes traditional homework if needed): 25%
o Assignment 1: Elevator Pitch for Midterm Site (2/8/11) (5%)
o Assignment 2: Midterm Site Comps (2/17/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 (3/1/11)
o Basic 5 page site: good design, working site 25%
· Project 2: Site Beta Website #2 (4/26/11)
o min 10 pages – (90% function and error free-ready for limited release) 30%
· Project 4: (5/3/11 )
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.
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%):
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.
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.
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: http://www.units.muohio.edu/saf/lrn/
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 CSSZenGarden.com on April 30, 2009-->
//Bubble Sort algorithm in Actionscript provided at //http://mike.newgrounds.com/news/post/59329
/*
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.