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: LGrace@muohio.edu (best) |
|
Office Address: Hiestand 206 |
Twitter: @mindtoggle |
|
|
|
|
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)
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: 8/23 -8/25 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: 8/30 – 9/1 |
Design: Understanding the feedback loop Interesting Interactions Designing Interactions – Process and Creative Workflow - Determining audience needs Demo, Psycho, Technographics
|
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
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
|
Design: It’s About People - Optimizing Use/Usability - Presentation Pitch Prep – how to pitch
|
Development: 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:
Suggested Design Reading: Interaction Design Chapter 1, pp 10-18 Suggested Tech Reading (Castro):
|
|
Week 4: 9/13 – 9/15 |
Design: Information Architecture Formal Paper Prototypes and Testing Development: - 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
Chapter 7: 119-124 Chapter 8: 127-136 |
|
Week 5: 9/20 – 9/22
Assignment 1 Due
|
Design Lab – Research your web design idea with real people and design based on their feedback. |
Design:
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
|
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 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 |
|
|
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) |
Development: · Animation with Dreamweaver Animation with 3rd Party Tools |
Suggested Tech Reading (Castro): Chapter 17: 253-280
|
|
Week 10: 11/1 – 11/3 |
Calculation and Engagement · Animation with Photoshop
|
Development: · 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 |
|
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:
http://miami.lgrace.com/documents/IMS222_Fall_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 (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.
Critique:
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: 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.