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: [email protected]
• Work: Design lead for Gymnasium at Aquent in Boston, MA.

---

• Course Description

---

• Schedule
• Tools
• Books
• Resources

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.

Preface

• Graphic Means video
• The Art of Web Design Off Book series by PBS video
• Jeffrey Zeldman 20 years of Web Design and Community video

Resources

History of the Web

• The History of the Web (Timeline)

HTML References

• HTML5 For Web Designers by Jeremy Keith
• HTML5 Element Index Helping you implement HTML5 today
• HTML Elements Organized by Function
• Obsolete and deprecated elements
• HTML Vocabulary
• HTML Reference A free guide to HTML
• MarkSheet A free HTML & CSS tutorial
• MDN Web Docs Web technology for developers

HTML Symbols, Entities, Characters and Codes

• HTML Symbols, Entities, Characters and Codes
• Charcod.es

Supplemental

• Modern Web Design Free online course for step-by-step reference.

Schedule

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

1. Week 1, January 16
2. Week 2, January 23
3. Week 3, January 30
4. Week 4, February 6
5. Week 5, February 13
6. Week 6, February 20
7. Week 7, February 27

• No Class — March 6 (Spring Break)

8. Week 8, March 13
9. Week 9, March 20
10. Week 10, March 27
11. Week 11, April 3
12. Week 12, April 10
13. Week 13, April 17
14. Week 14, April 24

• Final Grades Due — May 8 (10:00 am)

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

Hello World

• The World Wide Web project
• This is a web page.
• This is a motherfucking website.

Project

• Mark up recipe content in HTML

Readings

• Designers vs Coding by Frank Chimero
• A Brief History of Markup and The Design of HTML5 from HTML5 for Web Designers by Jeremy Keith
• The Benefits of Semantic HTML by Tracy Lum

Week 2

Project

• Continue marking up recipe content in HTML and consider basic styles for text elements

Course

• Modern Web Design — Register, enroll, and review Lesson 1, 2, 3, and 4

Readings

• MarkSheet: HTML Basic (2.1–2.7)
• MarkSheet: HTML Text (3.2)
• MarkSheet: Inline semantics (3.3)
• A brief history of CSS until 2016
• How To Learn CSS
• Graphic Design as a Liberal Art

Week 3

• Continue to mark up and review recipe content in HTML and created basic styles in CSS for typography, color, and spacing based on style tile

GitHub

• Create Recipe repo recipe-markup and commit incremental changes

Course

• Modern Web Design — Lesson 4: Getting Started With CSS

Review

• The i, b, em, & strong elements
• How To Learn CSS
• If you’ve ever had doubts about how to mark up subheadings

Readings

• Everything Easy is Hard Again
• Why you should say HTML classes, CSS class selectors, or CSS pseudo-classes, but not CSS classes
• CSS: From Zero to Hero — A brilliant primer on CSS
• CSS Basics
• CSS Text
• CSS Box Model
• Web Typography
• Unitless line-heights
• What’s the Deal with Collapsible Margins?

References

• CSS Font Stack Web safe font families
• Font Family Reunion Compatibility tables for default local fonts
• Butterick’s Practical Typography
• Accessible Colors Test accessible web color combinations
• CSS Reference
• CSS Cheat Sheet

Week 4

• Focus on applying typographic styles with meaningful HTML classes & CSS class selectors to your recipe.
• Focus on the use of web-safe fonts and accesible colors
• Focus on a mobile first layout that is responsive to a wider screen breakpoint (using media queries to tweak content for spacing, line length, and readability)

Readings

• Reboot, Resets, and Reasoning
• A look at CSS Resets in 2018
• Naming CSS Stuff Is Really Hard
• Responsive Web Design
• Responsive questions

References

• How we learned to leave default font-size alone and embrace the em
• HTML5 Boilerplate
• CSS Normalize

Week 5

• Wrap-up Recipe Markup markup, style, and repo

Week 6

• Wrap-up Recipe Markup and being Theme Style

re: Theme Style

• Content First (Text/Image): Copy, paste, clean, and markup content from Wikipedia page
• Create separate HTML pages for each section and link them together
• Link an external stylesheet main.css to all pages

Week 7

• Working remotely via Slack — same day, same time, but from anywhere you’d like (school, home, etc.)

Week 8

• Review navigation markup and best practices
• Introduction to Bootstrap as a framework for prototyping layout
• Develop layout for Theme Style (Project 2)

Theme Layout

• Begin with sketches of your wiki theme layout redesign — mobile first, then for a wider screen
• Use Bootstrap’s stylesheet, bootstrap.css, as the foundation for layout
• Use a your own stylesheet, main.css, for custom typography and colors

Bootstrap Comp Demo

• Bootstrap Comp Demo — Comping basic layout using Bootstrap as a foundational framework

Navigation Interaction

• When do the :hover, :focus, and :active pseudo-classes apply?
• How to easily build Mashable’s navigation bar with HTML and CSS

Hiding Content

• See No Evil: Hidden Content and Accessibility
• How-to: Hide content
• Hide only visually — HTML5 Boilerplate
• Hamburger Menus and Hidden Navigation Hurt UX Metrics
• User interfaces: hiding stuff should be a last resort

Hide & Show Content

• <details>: The Details disclosure element
• Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion

Bootstrap Framework

• Bootstrap 4
• Get Started with Bootstrap — Build responsive, mobile-first projects on the web with the world’s most popular front-end component library
• Grid Layout in Bootstrap 3 — Outdated, but provides the basics to get started video
• Learn Bootstrap 4 for free
• Learn Bootstrap 4 in 30 minutes by building a landing page website

Week 9

• In class work session

Week 10

• Project 1, Recipe Markup
  • Reminder: Complete scoring rubric tasklist (in the Issues tab of your project repo), if you haven't done so already
• Project 2, Theme Style, due next week — Week 13 April 17
• Project 3, Single Serving — starts now (due Week 14 April 24)

Week 11

• In class work session
• Bootstrap grid layout and Google web fonts demo

Week 12

• In class work session

Using Web Fonts

• How to use Google Fonts in your next web design project
• Understanding Web Fonts and Getting the Most Out of Them — Without using a font service such as Google Fonts

Week 13

• Single Serving show and tell

Week 14

• Last Day of Class
  • 1:30–2:00 p.m. — Class lunch (Make Project 1 recipes and bring them in to share, eat, and celebrate)
  • 2:00–2:30 p.m. — Single Serving showdown
  • 2:30-4:30 p.m. — Final extra credit and/or update all projects (and rubric task lists)
  • Complete course eval before you leave, please
• All Projects Due (Extension via Slack: By end of day Tuesday, May 7)
  • Post in the #final-repos channel using this format:
    • https://github.com/username/
      1. https://github.com/username/project-1
      2. https://github.com/username/project-2
      3. https://github.com/username/project-3
      4. https://github.com/username/final-extra-credit
• Final Grades Due — May 8 (10:00 am)

Projects

Recipe Markup

Choose a cooking/baking recipe to share (and make).

• Markup the content first with semantic HTML.
  • Consider what each content chunk and phrase is and about
• Use proper typographical characters for numbers, punctuation, symbols, etc.
• Photograph the final product (and/or the steps [optional])
• Develop the look and feel of your content
  • Create a style tile
    • Develop a color palette based on the colors of your recipe (imagery)
    • Use accesible colors for accessible color contrasts
    • Use web-safe fonts, serif or sans-serif, or both (≥90% Win/Mac)
• Use an external stylesheet
  • For example: <link rel="stylesheet" href="css/main.css">
• Use meaningful HTML classes & CSS class selectors
• Use a mobile first approach to layout that is responsive to a wider screen breakpoint (using media queries to tweak content for spacing, line length, and readability)

Helpful Hints

• Recipe Markup demo

References

• See HTML References
• HTML Lists
• The dl element
• HTML Validation Tool — Check your markup
• CSS Validation Tool — Check your style
• Alt text is part of your site’s content
• Web-Safe Fonts

Inspect

• Quick Start: Starbucks Coffee Bean Peanut Brittle
• Furthermore: A Coffee Ritual, Baked Not Brewed

Theme Style

Choose a single subject, topic, or theme from Wikipedia and design a multi-page website that enhances the experience of content through meaningful HTML and functional CSS and layout for mobile first to wider screens.

Text Tools

• Textise — Text-Only and Accessibility Tools

Single Serving

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

One Page Love

• Single Serving Sites
• Purple, Obama, and Single Serving Websites
• How to Order Eggs
• Books on Graphic Design (and Typography)

Tools

Text Editors

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

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

• Firefox
• Firefox Developer Edition
• Opera

Image Optimization Tools

• ImageOptim (Mac only)
• Squoosh
• SVGOMG!

Image Editing Tools

• Remove Image Background

Color Accessibility Tools

• Accessible Colors
• Colorable
• Contraste (Mac only)

Color Palette Tools

• Color Designer

CSS Tools

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

Text Tools

• TitleCap Automatically Capitalize Your Title
• Textise Text-Only and Accessibility Tools

Developer Tools

Validate HTML/CSS and more…

• W3C Developer Tools

Paper Wireframing Tools

• Gridzzly Make your own grid paper.
• Sneakpeekit Printable grids for design wireframing.

Books

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.)