ART3402
- 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.
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.
Wednesday at 1:25–4:05 pm and via Slack.
- Week 1, January 22
- Week 2, January 29
- Week 3, February 5
- Week 4, February 12
- Week 5, February 19
- Week 6, February 26
- Week 7, March 4
- Week 8, March 11, No class, Arts and Sciences Spring Break
- Week 9, March 18
- Week 10, March 25
- Week 11, April 1
- Week 12, April 8
- Week 13, April 15
- Week 14, April 22
- Week 15, April 29, Last class
- Week 16, May 6, Optional class; work session; update all projects (repos) and rubrics (see repo Issues tab) for final grading
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
- The World Wide Web project
- This is a web page.
- This is a motherfucking website.
- This bare site is being redesigned in the open.
- Layers of the Web with Jeremy Keith (45m)
Let’s talk about content, HTML, and semantics.
- Continue to inspect, markup, and style a copy of the article 8 Ways to Work Smarter in 2020.
- Create your own illustration for the hero artwork in the article, but in the same style (keep it simple) and size (2:3 [4:6] aspect ratio) using a vector-based application such as Illustrator, Inkscape, Sketch, etc.
- HTML5 For Web Designers by Jeremy Keith
- Designers vs Coding by Frank Chimero
- HTML Basics
- HTML Content
- CSS Box Model
- 8 Ways to Work Smarter in 2020
- HTML5 Element Index — Helping you implement HTML5 today
- MarkSheet — A free HTML & CSS tutorial
- HTML Reference
- CSS Reference
- Rolling Up Our Responsive Sleeves with Ethan Marcotte (1h)
Let’s talk about responsive web design, CSS, and maybe even GitHub.
- Responsive Web Design
- Boston Global Scope
- CSS Zen Garden by Dave Shea
- Essential Image Optimization
- Responsive Images 101
- Alt-texts: The Ultimate Guide
- A free guide to
<head>
elements - A guide to using Github Pages
- ImageOptim (Mac only)
- ImageAlpha Optimize 24-bit PNG files (including alpha transparency); (Mac only)
- Squoosh
- SVGOMG!
Validate HTML/CSS and more…
Let’s talk about responsive web design, CSS, interaction, color, and GitHub.
- 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
andmargin
) 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
- You are doing :focus wrong (and I was too)
- When do the :hover, :focus, and :active pseudo-classes apply?
- Accessible Colors
- Contraste (Mac only)
Validate HTML/CSS and more…
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
- Old CSS, New CSS
- Resilient, Declarative, Contextual
- Naming Stuff in CSS is Hard
- The i, b, em, & strong elements
- Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes p.s. It’s “class”, not “CSS class”.
Let’s talk about web-safe typography.
Let’s talk about lists, more on typography, typographic details, and special characters.
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.
Continue working on recipe.
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)
See HTML/CSS comments for details.
No class, Arts and Sciences Spring Break
Online-only, Working remotely via Slack and Google Hangouts
- Class sync and discussion @ 1:30 p.m. (Google Hangouts invite via Slack)
- Create a repo for your Recipe Review (Project 2)
- Share a link to your repo in the Slack
#recipe-review
channel
- Share a link to your repo in the Slack
- Complete the rubric for the Article Rework (Project 1)
- A rubric (task list) Issue will be added to your repo
- Accessible HTML Elements
- Learn to Code HTML & CSS
- Lesson 6: Working with Typography
- Lesson 7: Setting Backgrounds & Gradients
- Lesson 8: Creating Lists
- Modern Web Design
- Lesson 4: Getting Started With CSS
- Lesson 5: CSS As A Design Tool
- The CSS Podcast
- 001: The Box Model
- 002: Selectors
Online-only, Working remotely via Slack and Google Hangouts (via invite)
- Free online discussion — Response and Adaptation for Online Teaching 1.0 @ 1:00–2:30 p.m. (Optional to attend; educators and students are welcome)
- Class sync and discussion @ 2:30 p.m. (Google Hangouts invite via Slack)
- Create a repo for your Recipe Review (Project 2)
- Share a link to your repo in the Slack
#recipe-review
channel
- Share a link to your repo in the Slack
- 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
- Grid Layout in Bootstrap 3 (Bootstrap 3, not 4, but this free short course explains the fundamentals of Bootstrap)
- Learn Bootstrap 4 in 30 minutes by building a landing page website (Disregard the jQuery bit; it's not needed to start)
- Adobe XD
- Free vector drawing and design tool; import Sketch, Photoshop, and Illustrator files, etc.
- Affinity Photo, Designer, and Publisher
- 90-day free trial; alternatives to Photoshop, Illustrator, and InDesign
- Sketch (Mac-only; free trial)
Online-only, Working remotely via Slack and Google Hangouts (via invite)
- 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
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).
- Responsive Images the Simple Way
- Building Twitter Bootstrap
- Bootstrap: Thoughts, Rants and Defending My Stance
- Textise → Remove everything from a web page except for its text
Online-only, Working remotely via Slack and Google Hangouts (via invite)
- Class sync, discussion, and demo @ 1:30 p.m. (Google Hangouts invite via Slack)
- Web Fonts via Google Fonts
- Grid Layout in Bootstrap 3 (Bootstrap 3, not 4, but transferable — this free short course explains the fundamentals of getting started with Bootstrap)
- Bootstrap Tutorial: Learn Bootstrap 4 in 10 minutes
- Google Fonts
- How to use Google Fonts in your next web design project
Online-only, Working remotely via Slack and Google Hangouts (via invite)
- Class sync and discussion @ 1:30 p.m. (Google Hangouts invite via Slack)
- Web Accessibility Checklist → 15 Things to Improve Your Website Accessibility
- Web Font Test → Test up to three fonts (Google Fonts and/or Websafe fonts)
- Snapfont → We help you choose the right font.
Online-only, Working remotely via Slack and Google Hangouts (via invite)
- Class sync and discussion @ 1:30 p.m. (Google Hangouts invite via Slack)
- Class work session 2–4 p.m.
Design a one-page portfolio showcasing your class projects and more.
Last class, Online-only, Working remotely via Slack and Google Hangouts (via invite)
-
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
Optional, Online-only, Working remotely via Slack and Google Hangouts (via invite)
-
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
- Erik Brobst
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Dimitri Christo
- Article Rework → ?
- Recipe Review → ?
- Single Serving → ?
- Jordan Currier
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Tanner Demaggio
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Abby Hart
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Ally Jesse
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Kayla Keating
- Maddy Kew
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Yona Kimball-Smith
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Rory Lake
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Jack Mastrototaro
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Diane McGregor
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Mallory Michaud
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Will Ortiz
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Taylor Rathbun
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Tayla Robinson
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Ben Whitmore
- Article Rework → ❏
- Recipe Review → ❏
- Single Serving → ❏
- Portfolio → ❏
Choose your brand or flavor; free-range, open or locally sourced.
- Atom (GitHub)
- BBEdit (Mac only; made in North Chelmsford, Massachusetts since 1993)
- Brackets (Adobe)
- Visual Studio Code (Microsoft)
- JS Bin (web-based; made in Brighton, England with blood sweat and code)
Browsers other than Chrome (or Safari). See Switchin’ to Firefox
- ImageOptim (Mac only)
- ImageAlpha Optimize 24-bit PNG files (including alpha transparency); (Mac only)
- Squoosh
- SVGOMG!
- Accessible Colors
- Colorable
- Contraste (Mac only)
Validate HTML/CSS and more…
- Gridzzly Make your own grid paper.
- Sneakpeekit Printable grids for design wireframing.
Nice-to-have, but not required.
- HTML5 for Web Designers by Jeremy Keith (Second Edition)
- Responsive Web Design by Ethan Marcotte (Second Edition)
- Designing with Web Standards by Jeffrey Zeldman (Third Edition)
- The Art and Science of Web Design by Jeffrey Veen (Oldie, but goodie.)
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.