/id-sp20-ec

Interactive Design, Spring 2020

Primary LanguageHTML

ART3402

Interactive Design

  • Wednesday, 1:25–4:05 pm, ADM 535
  • Class Workspace: Slack — Where Work Happens™
  • Office Hours: ½ hour before/after class or by appointment (via Slack)
  • Instructor: Justin Gagne
  • Email: gagnej@emmanuel.edu
  • Work: Design lead for Gymnasium at Aquent in Boston, MA.


Course Description

This advanced course introduces students to the concepts and techniques of interactive design through industry standard web development. Through focused projects, students will explore interactive paradigms of user experience, information architecture, and navigation design with an emphasis on organization and usability. Current and future directions of interactive design will be discussed with a focus on advanced HTML, CSS, responsive design, frameworks, and workflows.

Schedule

Wednesday at 1:25–4:05 pm and via Slack.

  1. Week 1, January 22
  2. Week 2, January 29
  3. Week 3, February 5
  4. Week 4, February 12
  5. Week 5, February 19
  6. Week 6, February 26
  7. Week 7, March 4
  8. Week 8, March 11, No class, Arts and Sciences Spring Break
  9. Week 9, March 18
  10. Week 10, March 25
  11. Week 11, April 1
  12. Week 12, April 8
  13. Week 13, April 15
  14. Week 14, April 22
  15. Week 15, April 29, Last class
  16. Week 16, May 6, Optional class; work session; update all projects (repos) and rubrics (see repo Issues tab) for final grading

Week 1

90 percent of design is typography. And the other 90 percent is whitespace.

Jeffrey Zeldman, designer, writer, and publisher

Good design and good markup provide structure to content. Good markup is a fundamental part of good design: beautiful on the inside, beautiful on the outside.

Frank Chimero, designer, illustrator, and writer

Preface

Hello World

Lecture

Discussion

Let’s talk about content, HTML, and semantics.

Homework

Tasks

Readings

Resources

Week 2

Preface

Lecture

Discussion

Let’s talk about responsive web design, CSS, and maybe even GitHub.

Readings

Resources

Image Optimization Tools

Developer Tools

Validate HTML/CSS and more…

Week 3

Preface

Lecture

Discussion

Let’s talk about responsive web design, CSS, interaction, color, and GitHub.

Homework

Tasks

  • Add navigation, to navigation to each section of the article
    • Bonus: Add navigation to go back to the start of the article
  • Add :hover, :focus, and :active state styles in your CSS
  • Start to add simple typographic and basic box model layout (focusing on padding, border and margin) styles to the article
  • Use an accessible color palette in your illustration and your navigation links
  • Optimize illustration (SVG and PNG)
  • Upload all assets to GitHub

Resources

Navigation

Interactive Pseudo-Classes

Color Accessibility Tools

GitHub

Developer Tools

Validate HTML/CSS and more…

Week 4

Homework

Tasks

Rework of the article 8 Ways to Work Smarter in 2020

  • Validate HTML, SVG, and CSS, and check links
  • Create project repo on GitHub and share your project URL in the #article-rework channel via Slack
  • Project rubric TBA

Readings

Week 5

Let’s talk about web-safe typography.

Demo

Typographic Style

Readings

Resources

Week 6

Let’s talk about lists, more on typography, typographic details, and special characters.

Recipe

Brief

Choose a recipe, a borrowed favorite or family secret.

  • Extra Credit: Make your recipe and photograph the final product; (optional) maybe photograph the ingredients, the steps, etc. while you’re at it.

Week 7

Continue working on recipe.

Homework

Markup and style the following content — focusing on meaningful structure and semantics, web-safe typography, and accessible colors:

  • Add recipe title
  • Add description list of recipe cooking time and serving size
  • Add recipe hero photo
  • Add well-written alt-text for all images
  • Add headshot and byline of author
  • Add navigation to internal page sections
  • Add introduction (history, info, etc.)
  • Add an ingredients list
  • Add a preparation list
  • Add any other photos to show steps or final presentation of the recipe
  • Add an about the author section (link byline to about section)

Demos

See HTML/CSS comments for details.

  1. recipe-wip-html-comments
  2. recipe-wip-html-css

Readings

Week 8

No class, Arts and Sciences Spring Break

Week 9

Online-only, Working remotely via Slack and Google Hangouts

WFH

  • Class sync and discussion @ 1:30 p.m. (Google Hangouts invite via Slack)

Homework

  • Create a repo for your Recipe Review (Project 2)
    • Share a link to your repo in the Slack #recipe-review channel
  • Complete the rubric for the Article Rework (Project 1)
    • A rubric (task list) Issue will be added to your repo

Resources

Collaboration

Week 10

Online-only, Working remotely via Slack and Google Hangouts (via invite)

WFH

Reminder

  • Create a repo for your Recipe Review (Project 2)
    • Share a link to your repo in the Slack #recipe-review channel
  • Rubrics for Article Rework (Project 1) are posted; see the Issues tab on your repo for details
    • Check off each task as you complete it
    • If you have questions about a task, leave a comment on the issue and tag me at @jgagne

Readings

Resources

Freebies

GitHelp

Week 11

Online-only, Working remotely via Slack and Google Hangouts (via invite)

WFH

  • Class sync and discussion @ 1:30 p.m. (Google Hangouts invite via Slack)
  • Bootstrap grid layout demo @ 2–3:00 p.m. via Google Hangouts
    • Recording → Bootstrap Layout (and Save Images for Web)
    • Demo → Bootstrap starter project

Single Serving (Project 3)

Design a modern responsive single serving website — a single-page with a single-theme from Wikipedia content; focusing on type, color, image, and layout (built using Bootstrap as a foundation for layout).

Examples

Readings

Text Tools

  • Textise → Remove everything from a web page except for its text

Week 12

Online-only, Working remotely via Slack and Google Hangouts (via invite)

WFH

  • Class sync, discussion, and demo @ 1:30 p.m. (Google Hangouts invite via Slack)
  • Web Fonts via Google Fonts
    • Recording → Web Fonts via Google Fonts (With Fallback Font Stacks)
    • Demo → Google Web Fonts

Readings

Resources

Week 13

Online-only, Working remotely via Slack and Google Hangouts (via invite)

WFH

  • Class sync and discussion @ 1:30 p.m. (Google Hangouts invite via Slack)

Readings

Resources

  • Web Font Test → Test up to three fonts (Google Fonts and/or Websafe fonts)
  • Snapfont → We help you choose the right font.

Week 14

Online-only, Working remotely via Slack and Google Hangouts (via invite)

WFH

  • Class sync and discussion @ 1:30 p.m. (Google Hangouts invite via Slack)
  • Class work session 2–4 p.m.

Extra Credit

Design a one-page portfolio showcasing your class projects and more.

Outdated, But A Good Reference

Week 15

Last class, Online-only, Working remotely via Slack and Google Hangouts (via invite)

WFH

  • Class sync and discussion @ 1:30–2:30 p.m. (Google Hangouts invite via Slack)

    • Single Serving project review
    • Course survey completion (received via email)
    • Portfolio webpage extra credit reminder; see Week 14 Extra Credit for details
  • Class work-a-thon

    • Project updates, rubric completion, etc.
  • Accepting work until Tuesday, May 12 (end of day)

    • Notify me via GitHub, Slack, or email

Week 16

Optional, Online-only, Working remotely via Slack and Google Hangouts (via invite)

WFH

  • Class sync and discussion @ 1:30 p.m. (Google Hangouts invite via Slack)

  • Class work-a-thon

    • Project updates, rubric completion, etc.
    • Portfolio webpage extra credit reminder; see Week 14 Extra Credit for details
  • Accepting work until Tuesday, May 12 (end of day)

    • Notify me via GitHub, Slack, or email

Student Work

Tools

Text Editors

Choose your brand or flavor; free-range, open or locally sourced.

Browsers

Browsers other than Chrome (or Safari). See Switchin’ to Firefox

Image Optimization Tools

Image Editing Tools

Color Accessibility Tools

Color Palette Tools

CSS Tools

  • Blendy CSS background blend modes preview tool.
  • Shapy CSS gradients shape editor.

Developer Tools

Validate HTML/CSS and more…

Paper Wireframing Tools

HTML Symbols, Entities, Characters and Codes

Books

Nice-to-have, but not required.

Policies

Bias-Related Incident and Hate Crime Policy

To achieve our goal of providing a working and learning environment free from harassment or discrimination, we have provided a procedure by which inappropriate conduct will be addressed if encountered by members of the Emmanuel community under the Bias-related Incident and Hate Crime Policy.

What is a bias-related incident? A bias-related incident refers to behavior that is a violation of the policies listed in the student code of conduct. This behavior can be threatened, attempted or completed and is motivated in whole or part, by the offender’s bias toward the victims’ race, color, sex, sexual orientation, gender identity, age, creed, religion, national origin, disability, veteran or active military status, genetic information, or any other protected status.

What is a hate crime? The FBI defines a hate crime as a “criminal offense against a person or property motivated in whole or in part by an offender’s bias against a race, religion, disability, sexual orientation, ethnicity, gender, or gender identity.”

What is Emmanuel’s policy regarding bias-related incidents and hate crimes? A bias-related incident or hate crime is contradictory to Emmanuel College’s community standards. It may also contribute to creating an unsafe, negative or unwelcome environment for the victim and/or other members of the College community. Students who engage in behavior that can be classified as a bias-related incident are subject to disciplinary action through the student conduct system. If an incident is determined to be a hate crime, the Office of Campus Safety will work with law enforcement as needed and the student will also be subject to disciplinary action through the student conduct system.

Take special note that retaliation against an individual who has reported a bias-related incident/hate crime and against witnesses of a bias-related incident/hate crime will not be tolerated by the College. For more detailed information about bias-related incidents and hate crimes and a link to the reporting form, please visit http://www.emmanuel.edu/discover-emmanuel/offices-and-services/human-resources/title-ix/other-forms-of-discrimination/bias-incident-and-hate-crime-policy.html.

Credit Hour Statement

One hour of classroom or direct faculty instruction and a minimum of two hours of out-of-class student work each week for approximately 15 weeks for one semester hour of credit. For accelerated courses, 15-20 hours of out-of-class student work each week. At least an equivalent amount of work for other academic activities, including laboratory work, internships, practicums, studio work, and other academic work leading to the award of credit hours.

For Arts and Sciences traditional, face-to-face classes: Students expected to devote a minimum 12 hours of study for each 4-credit course per week over the semester. A minimum of three of these hours spent in class. Consequently, faculty expected to assign out-of-class work that will require a typical student to spend a minimum of nine hours of effort per week on average.

Academic Integrity Policy Community Statement

Academic integrity, ethics and trust are core values in the Emmanuel College community. These values should matter to all members of the community and should apply everywhere—in our classrooms, in the Library, in the Computer Labs, in the Student Center, in the residence halls, in the dining hall, and in our offices. An academic community where each member of that community upholds the values of academic integrity, ethics and trust is one in which faculty members, students, administrators and staff can achieve significant goals and make meaningful contributions. In such a community, people treat each other with respect and value the intellectual and real property of other individuals and of the community as a whole.

This Community Statement is intended to remind us that everyone is part of the effort to further enhance and sustain a culture of academic integrity, ethics and trust. It should appear on all College syllabi and could also be used in the Admissions process, during orientation, displayed in College buildings and recited at important ceremonial events on campus. “I willingly accept my role in this process” added to the Statement if recited or written and signed. In the event that a faculty member does not include the Community Statement on the syllabus, students are nonetheless responsible for work that is consistent with standards of academic integrity. For complete information about the Academic Integrity Policy please visit http://www.emmanuel.edu/academics/registrar/academic-policies/academic-integrity-policy.html

Academic Support and Accommodations Syllabus Statement

It is the policy of Emmanuel College to respect and welcome students of all backgrounds and abilities. In the event you encounter any barrier(s) to full participation in this course due to the impact of a documented disability, please contact the Disability Support Services office. The Associate Director of Disability Support Services can meet with you to discuss the challenges you are experiencing and explain the eligibility process for establishing academic accommodations. You can contact the Associate Director of Disability Support Services, Alyson Czelusniak, at czelusniaka@emmanuel.edu or disabilityservices@emmanuel.edu. Her office is located on the lower level of the Cardinal Cushing Library in room G-06.

In addition, students who finds themselves struggling in this course are encouraged to speak with the instructor and take advantage of the services offered through the Academic Resource Center (ARC). This center provides peer tutoring, study groups, writing assistance, math/science assistance, and academic coaching. The ARC is also located on the lower level of the Cardinal Cushing Library in LIB G-04. (Updated 8/22/2019)

Statement on Physical/Emotional Health

A range of issues can cause barriers to learning, such as strained relationships, increased anxiety, health issues, alcohol/drug problems, feeling down, difficulty concentrating, lack of motivation or feeling ill. These concerns or other stressful events may lead to diminished academic performance or may reduce your ability to participate in daily activities. University resources can help you address these and other concerns. You can learn more about our broad range of confidential mental health or medical services at the Counseling Center located in Admin 151 or Health Services located in lower level of

St. Joseph’s Hall. Please remember that the Counseling Center is also a confidential place to talk about sexual assault incidents. Getting help is courageous and will make a difference. For more information, please visit http://www.emmanuel.edu/student-life/student-health-and-counseling.html.

Attendance Policy

Class attendance is critical to a student’s mastery of the knowledge and skills that are taught in a specific course. Emmanuel College has established an attendance policy to support student achievement in the classroom and to emphasize the correlation between attendance and academic success. Attending class is the responsibility of the student and the College expects students to attend class regularly. Course syllabi will state clearly the relationship between class participation and the course grade.

Supporting a Diverse and Inclusive Community

Members of our community are expected to demonstrate respect and show sensitivity to differences in others. All members of the community are entitled to and responsible for maintaining an environment of civility that is free from disparagement, intimidation, discrimination, harassment, and violence of any kind. We expect each member of the community to take responsibility for building and improving the quality of our community. We expect that as an educated community we will have a tolerance for others’ opinions and openness to their perspectives. We expect that every member of the Emmanuel community will accept diversity, value inclusivity, and be civil in dealings with each other. The College does not tolerate racism, sexism, classism or discrimination based on sexual orientation. We hope that all members of our community will model and teach respect for the differences among us and celebrate the similarities that unite us as a people worthy of dignity. (Adapted from Emmanuel College Statement on Community Standards)

Title IX

Emmanuel College is committed to providing its students, faculty and staff with a working and learning environment in which all people are treated with respect and dignity. Each person has the right to work and be educated in an atmosphere that is free of harassment and unlawful discrimination. If you have encountered any form of sexual misconduct (e.g. sexual assault, sexual harassment, stalking, domestic or dating violence), we encourage you to report this to the Title IX Coordinator or one of the Deputy Coordinators. If you speak with a faculty member about an incident of sexual misconduct, that faculty member must notify the Title IX Coordinator. The Title IX Coordinator will assist you in understanding all of your options and in connecting you with all possible resources on and off-campus. If you wish to speak with a confidential source, you may contact the confidential counselors in the Office of Counseling or in the Office of Mission and Ministry. For more detailed information on Title IX policies, procedures, and resources please visit http://www.emmanuel.edu/discover-emmanuel/offices-and-services/human-resources/title-ix.html.