psam2120-checklist_f2017

f Ojus

Logistics:

• One person at a time: classmates fully engaged in critique of their work (10 min each)
• Verbal and written Slack channel: we will have a dedicated Slack channel for critique of the project. While others are verbally critiquing, others can participate by writing their own comments in slack making sure to tag the person who is being critiqued. One person will be designated official note-taker for the person presenting. Once the critique is over, the former presenter becomes the next note taker.

How to approach the critique:

For Presenters:

• Provide as concise as background as possible, but try to keep the amount of talking you do to a minimum and the amount of listening and consideration of comments to a maximum. Don’t be afraid to discuss and clarify but don’t feel the need to be overly defensive.
• If there are specific issues you want feedback on, let that be known.
• Be receptive to critique, concentrate on the discussion and be sure you truly understand what others are identifying.
• Remember, this is not a personal attack. We are critiquing the work, not the person who made the work.

For the Critiquers

I’ll repeat: This is not a personal attack. We are critiquing the work, not the person who made the work.

Understand the Problem Area and Designer Intent

First, try to fully understand the context and goals of the project, and then offer critique. This means making sure you ask questions. What is the problem that the presenter is trying to address? What was the desired outcome? Why does this thing lead to that thing? Etc.

Unhelpful Critique

Personal taste comments (“I like”, “I don’t like”)
Making value judgements (“This is good or bad”)
I like it
I hate it
It’s cool
I love it
I hate you
I love you
You suck
You are awesome
I wish you would shut up
Your work is bad
I would have done it like ______
You should try it like _____
This is right
This is wrong
[Yawning]
[Tweeting]
[Facebooking]
[Internetting]
[Ignoring]

Helpful Critique

Generally this revolves around what is effective and ineffective and why. Considering if it matches the intent and why or why not.

Bringing up precedence or similar work is helpful, especially when you can pinpoint exactly how that work functions in an effective manner in relation to the presenters work.

It can also be useful to just describe what you’re seeing and clarifying how things work, it can often prove to unearth some other observations or suggestions.

Some specific questions and considerations for this project:

For the Presenters

• Introduce your app, give a short 1 or 2 sentence summary of your new feature and what problem it is trying to address, and take us through the user flow.
• Use your promotional website as a tool to show the feature, but also explain why you approached the promotional website the way you did

For the Critiquers

Macro

—Does the app and website meet the intended goals?

—Did the feature deliver on your expectations?

—Is the visual system cohesive? How does it relate to the platform’s overall graphic and UX system?

—Does the tone of the website match the app feature? Does it make you want to use the app or explore the new feature?

Micro

—Any parts of the promotional website that are particularly memorable, especially in moments of interaction and delight that could be using jQuery?

—Is the iconography and UI elements communicating accurately?

—How is the organization of elements and information in both the app and website?

—Is there adequate feedback in UI elements? Is the navigation evident? Are the intended affordances made clear? Does the mental model implied by the feature fit with the rest of the app?

—Any instances in the code that you are curious about?

Experience & Flow

—What’s the experience of getting started?

—Was it clear about what it did and how it works? How did the messaging come across?

—How easy does it seem to use the app feature? Did you understand immediately what the app was about, or did you need a lot of time to figure it out?

Visual Aesthetics & Craft

—Do the colors and forms work?

—Is the typography working?

—Are the aesthetics working considering the original platform (google or apple)?

—How are colors used? How is imagery used?

—Does it feel complete and put together?

f Ojus

http://www.jnd.org/dn.mss/logic_versus_usage_the_case_for_activity-centered_design.html

f Ojus

Class tools:

• Slack
• FTP Client: FileZilla
• Text Editors: Sublime, TextWrangler/BBEdit
• Google Chrome Web Browser
• Codecademy

• HTML Blank Document: html.html

HTML & CSS Tutorials

• Super basic HTML tutorial: www.w3.org/MarkUp/Guide
• HTML / CSS a beginner’s guide: www.sitepoint.com/html-css-beginners-guide
• www.sitepoint.com/xhtml-web-design-beginners-2
• www.sitepoint.com/html-37-steps-perfect-markup
• www.htmldog.com/guides/cssbeginner
• meyerweb.com/eric/css/references/index.html
• CSS Tricks: css-tricks.com
• http://learn.shayhowe.com

Fixed Width Grids

• Khoi Vinh and Mark Boulton’s slides (2007): “Grids are Good (Right?)”
• List of tons of articles and resources (2007): Smashing Magazine Grid Resource
• Smashing Magazine simplified article

Responsive / Fluid Grids

• Chris Coyier’’s simple grid approach
• All List Apart
• Infinite Grid
• Fluid Grids
• Responsive Web

Media Queries & Responsive design

• Responsive Design Media Queries
• 7 Habits of Highly Effective Media Queries
• mediaqueri.es

Type and Typography

• Ellen Lupton’s Thinking with Type
• Matthew Butterick’s Practical Typography
• The em and en-dash article: www.alistapart.com/articles/emen e.g. the em dash (—) & the en dash (–).
• On paragraphs: jontangerine.com/log/2008/06/the-paragraph-in-web-typography-and-design and jontangerine.com/silo/typography/p/
• Background links on the Font-face syntax and workarounds etc. and Nice Web Type’s @font-face guide
• Ascii Character: www.w3schools.com/tags/ref_ascii.asp
• HTML Entity reference: www.w3schools.com/tags/ref_entities.asp
• Use Font-squirrel’s generator for more robust rules that can be used in production (if you have web rights).
• Webtype
• TypeKit
• Fonts.com
• cloud.typography
• Typecast
• Font Deck
• League of Moveable Type
• Google Web Fonts and a nice selection in use.
• Fontstand

Positioning and Floats

• An excellent Tutorial on Floats: css.maxdesign.com.au/floatutorial
• www.barelyfitz.com/screencast/html-training/css/positioning

Validation and Debugging

• HTML: validator.w3.org Choose “Validate by upload” to upload a file
• CSS: jigsaw.w3.org/css-validator
• Firebug a web development and debugging extension for Firefox:getfirebug.com

The site experience (IA, ID, UX, Usability)

• Information Architecture basics
• Defining an Interaction Model: The cornerstone of application design

Javascript

• jQuery plugin examples (zip)
• JQuery: jquery.com
• JQuery tutorial: www.w3schools.com/jquery/default.asp
• JQuery tutorial for beginners: www.impressivewebs.com/jquery-tutorial-for-beginners
• JQuery tutorial for designers 1: jqueryfordesigners.com
• JQuery tutorial for designers 1: webdesignerwall.com/tutorials/jquery-tutorials-for-designers
• JQuery plugin Lettering.js: letteringjs.com
• PaperJS library: paperjs.org

f Ojus

Demo-Code

f Ojus

Click the link and save the page.

html

f Ojus

Web Interaction

PSAM 2120; CRN 6506
Fall 2017
Thursday, 7:00–9:40pm, 6 East 16th Street, Room: 605

Ojus Doshi
doshio@newschool.edu

Office Hours:

Tuesdays 8pm–9:30pm Faculty Resource Center (Room 308 A-D of University Center 63 Fifth Avenue)

Sunday on Slack (or by Appointment Slot)

*Depending on my work schedule, I may not be able to keep these hours consistently. I will let you know if this is the case.
Course Description

This course exposes students to thorough and elaborate interactive concepts and techniques for applications. It is an extensive investigation in the interface, the mechanism, the controls and the aims of interactive works. Students will learn how to design and develop complex interactive projects and understand how to undertake a comprehensive research and direct their thinking process from brainstorming to final outcome. They will be given the tools to conceive, plan and develop an interactive system and they will become aware of the importance of their role in the development of interactive media.

Learning Outcomes
By the successful completion of this course, students will be able to:

1. Use a basic vocabulary of interactive media to both give and respond to critique productively. Including individual evaluation through the instructor, group critique in class, outside critique as well as written anonymous critique.
2. Demonstrate an understanding of the iterative making process in interaction design, using incremental methods such as prototyping, user research and evaluation to build toward more advanced work. This includes: Personas, user interviews, card sorting, sketching and wireframing, storyboarding, mockups, and paper prototypes.
3. Conceptualize a product for the web and realize it through coding.
4. Evaluate the difference in designing interfaces for different kind of devices, their limitations and specific user situation including responsive websites and apps for mobile.
5. Evaluate how typography and its variables are applied to interactive systems to facilitate orientation, support usability and create consistency. Research historic and current design precedents to contextualize own work.
6. Be able to archive and document work that is printed, on screen or time based in a reflective manner for learning portfolio
7. Combine their artistic creativity with technology related to the internet.
8. Demonstrate a comprehension of skills, methods, techniques and processes to realize interactive systems (see competency)

Assessable Tasks

In-class coding exercise (due end of class 10/5/17):

A mini-coding project will familiarize you with basic web development again and enable you to use your new coding knowledge.

Projects / One Mid-term (due 10/12/17) / One Final Project (due 12/14/17)
Projects are more in-depth assignments where you put to use technical and design skills you learn from lectures and exercises. This course features 2 projects: a mid-term and a final. They will be graded on the following criteria:

• Planning and Preparation — How thorough was research, planning, site sketching and wireframing, etc.? Is the student organized with all of their materials throughout the project?
• Content — Did the student meet the minimum requirements for content that must be included in the project as outlined by the assignment instructions? For example, minimum number of images?
• Design — How effective were the student’s design choices? Were design principles put to use when creating the website?
• Coding — Is the student’s code clean, readable, well-commented, using correct syntax and structure, etc.?
• Collaboration — If the project requires any group work, how well do team members work together? Is it evident that everyone contributed to the project?
• Overall — General evaluation of the project outcomes (interesting conceptual exploration, risk taking, craft, striving for originality, etc.)

Coding challenges

I believe in learning through constant “doing” in small batches. Around the midway point in the semester you will begin to have small coding challenges due for homework that will keep you in the practice of coding and advance your familiarity with more difficult syntax.

App user flow critiques

For certain weeks starting after the first project, you’ll download one app (or apps you’ve already download and use) and walk through a userflow for the primary action. It is important to begin to develop habits and awareness around existing user interaction patterns

Readings / due periodically throughout semester
Throughout the semester I will assign readings related to product design, the web, and technology. You will be responsible for reading the article and coming up with one discussion question that will be posted in an online forum. The next class we will discuss the readings using these questions as starting points. Participation in discussion counts towards the final participation grade.

Critiques and discussion / during small-groups and project critiques
Projects will be shared and discussed through a traditional practice in art school — the critique. Expectation is that students will actively engage and comment on their fellow students’ work. Feedback is beneficial for everyone involved and it’s how you get better as a designer. Additionally, we will use a live document called PiratePad to record class feedback during critique. I expect everyone to be commenting in this way in addition to verbal commentary.

Raising Questions & Independent Investigation / Self-Motivation
Part of participation is to ask questions if you have them. They benefit everyone, no matter how “stupid” you think the question is. Feel free to stop me during class or jot down some questions and email me immediately after class. Whatever you do, ask until you understand.

Questions outside of class are another matter. Especially for coding trouble, the majority of that information is available online. Think for yourself, carefully review what you did and what trouble you’re having. Consult Google, consult the recommended books. Ask 2 friends from class. If all else fails, contact me through email, but my work schedule keeps me pretty busy so I may not be able to give you an immediate and detailed answer.

This goes along with a larger expectation that I expect you to take an interest in your own learning. Since we are dealing with digital systems and the web, there is a wealth of knowledge online that you can further use to realize all of your projects and exercises. I encourage students to go beyond the basic tutorials offered in the lecture portions of class and work independently to solidify their knowledge.

Posting Links to Assignments to Dedicated Server space
You will upload assignments and projects to your dedicated server space on Parsons B server (I will explain in class how this works).

Final Grade Calculation
Attendance, Participation, and Effort: 25%

Execution of Project 1 (Mid-Term): 20%

Execution of Project 2 (Final): 30%

Execution of Mini project, Exercises, and User Flow assignments: 25%

TOTAL 100%

Students will deliver Project and Exercise files in one digital bundle on the last day of class using USB flash drive or DropBox. A document with a detailed checklist and way to organize this bundle will be posted to the class website before the last week of the course.

Course Outline

Textbooks & Readings
Reading handouts and links to relevant content in the internet will be provided throughout the semester. You have to check the class website on a regular basis to be updated.

Additionally the following books are required or recommended:

Required

1. Mathis Lukas, Designed for Use, Pragmatic Programmers, 2011
   ISBN-13: 978-1-93435-675-3
   Lukas Mathis wrote a very comprehensive and hands-on guide for the development of interactive media. Owning this book will be helpful throughout your career.

Recommended for Javascript, jQuery and web typography foundational knowledge:

1. Duckett, Jon. JavaScript and JQuery: Interactive Front-End Web Development. John Wiley & Sons, 1^st Edition 2014
   ISBN-13: 978-1118531648
2. Santa Maria, Jason. On Web Typography. New York, NY: A Book Apart, 2014.
   ISBN: 9781937557065

Additionally I strongly recommend the following books. I may or may not provide reading material from them through the semester, however you might consider having them in your library:

1. Mccloud, Scott, Understanding Comics: The Invisible Art, New York: Harper, 1990 (all editions are fine)
2. Norman, Donald, The Design of Everyday Things, New York, Basic Books 1988

**The Design of Everyday Things is available online through the New School Library

1. Norman, Donald, Emotional Design: Why we love or hate everyday things, New York, Basic Books, 2004
2. Krug, Steve. Don’t Make Me Think! A Common Sense Approach to Web Usability. Indianapolis: New Riders, 2006.

The following books should be browsed in the library at some point at least.

1. Moggridge, Bill. Designing Interactions. Cambridge: MIT Press, 2006.
2. Nielsen, Jakob. Designing Web Usability: The Practice of Simplicity. Berkeley: Peachpit Press, 2000.
3. Tufte, Edward R. Envisioning Information. Cheshire: Graphics Press, 1990.
4. Cooper, Alan, David Cronin, and Robert Reimann. About Face 3: The Essentials of Interaction Design. New York: John Wiley & Sons, 2007

Materials and Supplies

Hardware:

1. A functioning laptop (Mac or PC) is required*. The newer the model and operating system, the easier it will be for you (and me).
2. Backup external hard drive. Back up your work every day. EVERY DAY. Multiple times a day is even better. Consider purchasing cloud storage like Crashplan or the paid versions of Dropbox. You are responsible for ensuring all of your work is available throughout the class. I will not accept excuses of “my computer crashed and I lost everything.”

*If you do not have access to a laptop, please see me before class (or send me an email before the first day), and we can make alternate arrangements.

Software:

1. A Text Editor: Sublime Text (sublimetext.com)
2. Mac Users Only: Sketch App from Bohemian Coding (Educational Licence $50)
3. Photo editing and vector illustration software: Adobe Creative Cloud with Photoshop CC and Illustrator CC
4. InVision (online prototyping tool) — Free educational account (with an access code I will provide)

Recommended: A sketchbook or notebook for personal use.

Resources

Course Resources: See the Resources section of this website.

University Resources

The university provides many resources to help students achieve academic and artistic excellence. These resources include:

• The University (and associated) Libraries: http://library.newschool.edu
• The University Learning Center: http://www.newschool.edu/learning-center
• University Disabilities Service: www.newschool.edu/student-disability-services/

In keeping with the university’s policy of providing equal access for students with disabilities, any student with a disability who needs academic accommodations is welcome to meet with me privately. All conversations will be kept confidential. Students requesting any accommodations will also need to contact Student Disability Service (SDS). SDS will conduct an intake and, if appropriate, the Director will provide an academic accommodation notification letter for you to bring to me. At that point, I will review the letter with you and discuss these accommodations in relation to this course.

Grading Standards

A student’s final grades and GPA are calculated using a 4.0 scale. Please note that while both are listed here, the 4.0 scale does not align mathematically with the numeric scale based on percentages of 100 points.

A [4.0; 95 – 100%]

Work of exceptional quality, which often goes beyond the stated goals of the course
A- [3.7; 90 – <95%]

Work of very high quality
B+ [3.3; 87 – <90%]

Work of high quality that indicates higher than average abilities
B [3.0; 83 – <87%]

Very good work that satisfies the goals of the course
B- [2.7; 80 – <83%]
Good work
C+ [2.3; 77 – <80%]

Above-average work

C [2.0; 73 – <77%]

Average work that indicates an understanding of the course material; passable

Satisfactory completion of a course is considered to be a grade of C or higher.

C- [1.7; 70 – <73%]

Passing work but below good academic standing
D [1.0; 60 – <70%]

Below-average work that indicates a student does not fully understand the assignments;

Probation level though passing for credit

F [0.0; 0 – <60%]

Failure, no credit

Grade of W

The grade of Z is issued by an instructor to a student who has not attended or not completed all required work in a course but did not officially withdraw before the withdrawal deadline. It differs from an “F,” which would indicate that the student technically completed requirements but that the level of work did not qualify for a passing grade.
Grade of Z

The grade of Z is issued by an instructor to a student who has not attended or not completed all required work in a course but did not officially withdraw before the withdrawal deadline. It differs from an “F,” which would indicate that the student technically completed requirements but that the level of work did not qualify for a passing grade.

Grades of Incomplete

The grade of I, or temporary incomplete, may be granted to a student under unusual and extenuating circumstances, such as when the student’s academic life is interrupted by a medical or personal emergency. This mark is not given automatically but only upon the student’s request and at the discretion of the instructor. A Request for Incomplete form must be completed and signed by student and instructor. The time allowed for completion of the work and removal of the “I” mark will be set by the instructor with the following limitations:
Undergraduate students: Work must be completed no later than the seventh week of the following fall semester for spring or summer term incompletes and no later than the seventh week of the following spring semester for fall term incompletes. Grades of “I” not revised in the prescribed time will be recorded as a final grade of “F” by the Office of the Registrar.

Divisional, Program and Class Policies

• 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 your successful completion of this course.

• Participation

Class participation is an essential part of class and includes: keeping up with reading, assignments, projects, contributing meaningfully to class discussions, active participation in group work, and coming to class regularly and on time.

• Attendance

Parsons’ attendance guidelines were developed to encourage students’ success in all aspects of their academic programs. Full participation is essential to the successful completion of coursework and enhances the quality of the educational experience for all, particularly in courses where group work is integral; thus, Parsons promotes high levels of attendance. Students are expected to attend classes regularly and promptly and in compliance with the standards stated in this course syllabus.

While attendance is just one aspect of active participation, absence from a significant portion of class time may prevent the successful attainment of course objectives. A significant portion of class time is generally defined as the equivalent of three weeks, or 20%, of class time. Lateness or early departure from class may be recorded as one full absence. Students may be asked to withdraw from a course if habitual absenteeism or tardiness has a negative impact on the class environment.

Whether the course is a lecture, seminar or studio, faculty will assess each student’s performance against all of the assessment criteria in determining the student’s final grade.

My personal attendance guidelines:

• Two unexcused absences lowers an overall grade one-third letter (i.e., A to A-).
• Three unexcused absences lowers an overall grade by a full letter (i.e., B to C).
• More than three absences are grounds for failure or dismissal from class.
• A lateness that is greater than or equal to 30 mins will be counted as an absence.
• Three (3) latenesses that are less than 30 mins will be treated as one absence.

If you know you will be late or will miss class for any reason, please send me an email as early as possible. In addition, the following class, please bring a doctor’s note, a signed employer’s note, or another indication supporting the reason you had to miss class.

• Canvas

Use of Canvas may be an important resource for this class. Students should check it for announcements before coming to class each week.

• Delays

In rare instances, I may be delayed arriving to class. If I have not arrived by the time class is scheduled to start, you must wait a minimum of thirty minutes for my arrival. In the event that I will miss class entirely, a sign will be posted at the classroom indicating your assignment for the next class meeting.

• Electronic Devices

The use of electronic devices (phones, tablets, laptops, cameras, etc.) 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

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 the university, or dismissal from the university.

Students are responsible for understanding the University’s policy on academic honesty and integrity and must make use of proper citations of sources for writing papers, creating, presenting, and performing their work, taking examinations, and doing research. 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. The full text of the policy, including adjudication procedures, is found at

http://www.newschool.edu/policies/# Resources regarding what plagiarism is and how to avoid it can be found on the Learning Center’s website: http://www.newschool.edu/university-learning-center/student-resources/

The New School 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. Please see the complete policy in the Parsons Catalog.

• Intellectual Property Rights: http://www.newschool.edu/policies/#.

f Ojus