• Course Number: ART-346.01
• Location: Wm. S. White Bldng. Room 3176
• Day and Time: Tuesdays, 8:00 – 10:45 AM
• Dates: 9/3/2019 – 12/17/2019
• Instructor: Andy Deck
• Email Address: Andy.Deck@umich.edu

COURSE DESCRIPTION

The course covers design techniques and concepts relevant to interactive media – a field that encompasses eBooks, web design, interactive kiosks, and apps. Students learn principles and processes useful in the production of these types of digital media. Focusing on interactions among people, machines, and media, students gain experience using several development platforms. Course projects address online, off-line, and mobile device contexts. Readings and assignments for the course explore principles related to layout, color theory, user testing, intuitive navigation, and responsive design. In addition to a collaborative class project, students conceive and develop an independent interactive project. This final work, which serves as a context for technical and creative research, will be discussed in the final class critique. Students will be evaluated on the basis of class participation and on the merits of several projects.

TEXTBOOK

James Beaird and James Michael George’s The Principles of Beautiful Web Design 3rd Edition. 2014.

The topics listed below will be covered in the order listed, time permitting. It's possible &mbdash; based on the cadence of the class &mbdash; that some topics will be overlooked or that other topics may be covered. “Discussion” followed by a reading means that you should read that before coming to class.

Week 1 9/3/2019
Introduction, overview
Discussion: low hanging fruit, interactive content without coding
In-class project: Interactive authoring with card / slide-based tools. Assignment 1 (for 9/20): Sequential, mouse-activated presentation with animal sayings, proverbs, or lyrics, typographical design, and animated effects.

Week 2 9/10/2019
Lecture and discussion: Vector illustration basics, tips and tricks with scalable vector graphics.
Discussion: Chapter 4 of Beautiful Web Design: "Typography"
In-class project: troubleshooting and lab-time for development of 1st assignment.

Week 3 9/17/2019
Assignment 1 due: Sequential mouse-activated presentation with animal sayings, typography,...
Lecture and discussion: adaptive and scroll-driven animations in Muse CC
Discussion: Chapter 5 of Beautiful Web Design: "Imagery"
Assignment 2 (for 10/17): Scroll-driven vertical website built with Adobe Muse (topic of your choosing) with your illustrations/photos, your type design, your writing,...

Week 4 10/3/2017
Discussion: Chapter 2 of Beautiful Web Design: "Color"
In-class project: rollover and scroll effects tutorials
Lecture: Adaptive design with Adobe Muse

Week 5 10/17/2017
Assignment 2 due: Critique scroll-driven vertical website with illustrations, type design, writing.
Assignment 3 (for 11/14): E-book chapter (topic of your choice) that contains A. video assets, B. vectorial illustrations, C. interactive features, D. typographical design, E. your writing.
Lecture and discussion: Assignment 3 intro (analyze an e-book, discuss production process); intro to iBooks Author; discuss topics and plan e-book chapters.
In-class project: exporting video assets from Keynote in H.264 format for iBook intro video.

Week 6 10/24/2017
Discussion: Chapter 1 of Beautiful Web Design: "Layout"
In-class project: Develop and integrate assets for e-book; assemble sections into one story; complete the e-book

Week 7 10/31/2017
Homework due: work in progress for video, illustrations, text, layout, navigation, and interactive features, using Apple's iBooks Author and other software
Discussion: iBooks Author technical development show and tell
In-class exercise: produce video, imagery, and text for the e-book chapter; develop well-sequenced interaction design, and stylistically consistent pages for the e-book chapter.

Week 8 11/14/2017
Assignment 3 due: Critique e-book chapter with video, illustrations, typographical design, writing, and interactivity.
Assignment 4 (for 12/19): a case study in Web design with WordPress; the assignment combines aspects of UX/UI planning and visualization with use of the WP Content Management System.
Lecture and discussion: Responsive design for the Web, introduction to WordPress
In-class project: wireframe sketches

Week 9 11/21/2017
In-class project: CMS basics with WordPress, overview of WordPress site building with "themes"
Discussion: Goal Driven Design, UX/UI
Homework due: written critique (min. 1 page) of a "competing" website OR a site to be revised

Week 10 11/28/2017
In-class project: WP theme selection and modification, practice building website with WP
Lecture and discussion: theme modification, menus, content development techniques in WP
Homework due: one user profile that imagines & describes a demographic website use scenario

Week 11 12/5/2017
In-class project: WP content and concept development, problem solving, plugins
Discussion: Chapter 3 of Beautiful Web Design: "Texture"
Homework due: one mockup image with realistic "look and feel" produced with Adobe CC

Week 12 12/12/2017
In-class project: Develop final WP project, trouble-shooting
Homework due: technical show and tell (explain a WP development process)
Discussion: Preface from of Beautiful Web Design

Week 13 12/19/2017
Assignment due: Present final WP project + critique
Discussion: An in-class critique focusing on WP final projects, including such topics as demographic targets, interaction design, interface concepts, graphic design, usability, and purpose.
Discussion will also address the future directions for research and implementation, design modifications, etc.
ALL WORK OTHER THAN WP SITE MUST BE SUBMITTED ON THIS DATE IN A YOURNAME FOLDER

1. Assignment 1 September
   
   • Sequential, mouse-activated presentation with animal sayings, proverbs, or lyrics, typographical design, and animated effects.
   • Using vectoral Illustrator CC graphics + typography + slideware (Keynote)
   • Great coordinated/consistent color schemes
2. Assignment 2 October
   

   Scroll-driven vertical website built with Adobe Muse (topic of your choosing) with your illustrations/photos, your type design, your writing,...

   • Adobe Muse, Adobe Illustrator, Adobe Photoshop
   • Scroll animation effects and mouse-over effects
3. Assignment 3 October-November
   

   E-book chapter (topic of your choice) that contains A. video assets, B. vectorial illustrations, C. interactive features, D. typographical design, E. your writing.

   • This can re-use content from Assignment 2 (and a topic)
   • Choose a clear target demographic for the chapter
   • Great color harmonies and typography
   • Interactive features (research iBooks Author capabilities)
4. Final Project November-December
   

   A case study in Web design with WordPress; the assignment combines aspects of UX/UI planning and visualization with use of the WP Content Management System.

   • Responsive WordPress website addressing a topic of choice.
   • Weekly homework over the past ~5 weeks will address UI/UX design processes relevant to developing your WordPress website.
   • Rapid obsolescence (product design, material culture)
   • Clearly defined demographic.
   • Competition research.
   • Mock-up imagery.
   • Technical development work using WordPress.

Learning outcomes

Here is a list of course goals.

• apply relevant interface design principles addressed in the prerequisite, WMM 601
• recognize ways to augment traditional media with interactive content
• learn procedures and aesthetic approaches to the production of interactive graphics
• incorporate context specific research to inform interface designs
• learn to maintain quality control for design consistency, and editorial and factual accuracy
• develop a working knowledge of media interaction design and production
• apply prototyping techniques to enable collaborative development
• produce elegant and effective designs in the context of course projects
• learn technical and engineering issues relevant to interactive design
• produce responsive media suitable for use with diverse media devices
• critique the usability and aesthetics of student project designs
• develop and document visual ideas through sketching and illustration

Software relevant to this course is listed below. Whatever tools are not free will be available for use in the computer labs.

This course will leverage several Adobe programs, including Adobe Illustrator and Adobe Photoshop, and possibly Adobe XD

Grades will be based on project assignments, attendance and class participation. You will receive feedback on the work you submit during the course via critique, in class, and in office hours. YOU MUST KEEP YOUR COPY OF ALL SUBMITTED WORK UNTIL THE END OF THE COURSE. Final grades will be established in a 1-on-1 meeting between you and the teacher at the end of the course. Prepare for this defense. Make your case for the grade you think you deserve. Essentially you and the teacher compare notes and agree on the grade you earned.

Make sure you read assignment descriptions carefully. Completed projects are to be graded using the following criteria: timely completion, assignment requirements, design concepts, quality control, comprehension of the material, technical proficiency, project development, and demonstration of aesthetic and technical development. Handouts describing each assignment will give you more details about project grading standards.

Your grade for this course will be computed by the following formula:

• 8% Bad interface analysis
• 15% Mad lib tablet mock-ups
• 15% Gamification cellphone mock-ups
• 15% Team app design project
• 20% Final project interaction design case study
• 27% General participation, attendance and critique

The following descriptions articulate factors relevant to grade assessment in this course.

Students who earn an “A” produce work that is impressive, goes beyond what is required of the course, and exemplifies a superb work ethic. Their work is exceptional. “A” students might — or should — share their knowledge with their classmates, and they are active participants in class discussions. “A”-grade students do not spend time distracted by others or digital devices, and are contributing members of the class. Lastly, “A”-level students demonstrate an evolving understanding of the material through iterative efforts of their work.

In the “A-” range, a student has performed very closely to the level of his or her “A”-level counterpart, but has produced at least one project/homework/component of the grading scheme that was below a grade of “A.” Perhaps the student missed too many classes, sed up to class late too often, or submitted an assignment/homework that was not “A”-level.

Students earning grades of “B+” produce very good work, which is close with that of their counterparts earning in the “C” range, but offer a sustained and meaningful structure to a critical user experience and design that is more complex than students earning a grade in the “C” range. “B+” students’ work is logically organized, responds to assignments in thoughtful and distinctive ways, and offers a sound user experience. Although minor coding and layout errors may be present, they are under control and do not impede user experience or content.

Overall, “B” range students produce work with good results. He or she possesses a strong understanding of the course’s content and shows a high level of competence in the skill set taught in the course.

Students in the “B-” range are producing work that is above adequate but below average. Their work shows flashes of very good work, but, overall, is not compelling for a grade of a “B.”

“These are average assignments. They will demonstrate some success in engaging with the assigned material. The document will show that the student can identify and work with key frameworks and methods with a particular set of content and apply them to ideas and examples found in other precedents, or other outside interactive experiences. Additionally, the assignment will demonstrate effort in the areas of user experience, interaction design. Typical of a “C/C+” assignment, however, is a disjointed sense of content hierarchy and user experience in connection with the page. Generally these assignments contain general coding errors which create unwanted or negative rendering, however, the assignments still work and an effort to debug and fix errors is present.”

In the “C” range, a student has show more than minimal progress to pass, but not quite on the level of a “C+” student.

A student who earns a grade of “D” has performed the bare minimum to pass the course. He or she has performed very near to that of a student who would typically fail, but has some basic understanding of important concepts related to the course. He or she has also shown some attempt at trying to grasp the material of the course. In essence, the student has produced work that shows evidence of minimal effort expended and/or minimal aptitude.

Failing grades are earned by students who do not submit required work, produce incomplete work, and/or do not participate consistently. Grades of “E” are also earned by students who show no comprehension of the topics discussed in class and no commitment to attempt to comprehend. Students who fail show no interest in learning, make no effort to remedy problem areas, are continually distracted in class by other students and/or mobile electronic devices, and interrupt class.

• Responsibility: Students are responsible for all assignments, even if they are absent. Late assignments, failure to complete the assignments for class discussion and/or critique, and lack of preparedness for in-class discussions, presentations and/or critiques will jeopardize their successful completion of this course.
• Participation: Class participation is an essential part of class and includes: keeping up with reading and assignments, and contributing meaningfully to class discussions, active participation in group work, and attending class regularly and on time.
• Attendance: Faculty members may fail any student who is absent for a significant portion of class time. A significant portion of class time is defined as three absences for classes that meet once per week. Lateness or early departure from class may also translate into one full absence.
• Delays: In rare instances, your instructor may be delayed arriving to class. If he or she has not arrived by the time class is scheduled to start, you must wait a minimum of thirty minutes for his/her arrival. In the unlikely event that your instructor misses class entirely, a notice will be posted on this website indicating your assignment for the next class meeting.
• Electronic Devices: Use of electronic devices (phones, tablets, laptops) is permitted when the device is being used in relation to the course's work. All other uses are prohibited in the classroom and devices should be turned off before class starts.
• Academic Honesty and Integrity: Touro views "academic honesty and integrity" as the duty of every member of an academic community to claim authorship for his or her own work and only for that work, and to recognize the contributions of others accurately and completely. This obligation is fundamental to the integrity of intellectual debate, and creative and academic pursuits. Academic honesty and integrity includes accurate use of quotations, as well as appropriate and explicit citation of sources in instances of paraphrasing and describing ideas, or reporting on research findings or any aspect of the work of others (including that of faculty members and other students). Academic dishonesty results from infractions of this "accurate use." The standards of academic honesty and integrity, and citation of sources, apply to all forms of academic work, including submissions of drafts of final papers or projects. All members of the University community are expected to conduct themselves in accord with the standards of academic honesty and integrity. It is the responsibility of students to learn the procedures specific to their discipline for correctly and appropriately differentiating their own work from that of others. Compromising your academic integrity may lead to serious consequences, including (but not limited to) one or more of the following: failure of the assignment, failure of the course, academic warning, disciplinary probation, suspension from Touro, or dismissal from Touro.

Here are some practical resources that are relevant to the course:

Readings

• The Principles of Beautiful Web Design 3rd Edition

Color

• Paletton
• Color wheel tool

Illustrator CC

• Complete beginner’s guide to Adobe Illustrator
• Ep2/19
• Ep3/19