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:
[email protected] - 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.
- Graphic Means
video - The Art of Web Design Off Book series by PBS
video - Jeffrey Zeldman 20 years of Web Design and Community
video
- 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
- Modern Web Design Free online course for step-by-step reference.
14 meetings; Wednesday at 1:25–4:05 pm and via Slack.
- Week 1, January 16
- Week 2, January 23
- Week 3, January 30
- Week 4, February 6
- Week 5, February 13
- Week 6, February 20
- Week 7, February 27
- No Class — March 6 (Spring Break)
- Week 8, March 13
- Week 9, March 20
- Week 10, March 27
- Week 11, April 3
- Week 12, April 10
- Week 13, April 17
- Week 14, April 24
- Final Grades Due — May 8 (10:00 am)
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
- Mark up recipe content in HTML
- 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
- Continue marking up recipe content in HTML and consider basic styles for text elements
- Modern Web Design — Register, enroll, and review Lesson 1, 2, 3, and 4
- 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
- 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
- Create Recipe repo
recipe-markupand commit incremental changes
- Modern Web Design — Lesson 4: Getting Started With CSS
- The i, b, em, & strong elements
- How To Learn CSS
- If you’ve ever had doubts about how to mark up subheadings
- 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?
- 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
- 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)
- Reboot, Resets, and Reasoning
- A look at CSS Resets in 2018
- Naming CSS Stuff Is Really Hard
- Responsive Web Design
- Responsive questions
- Wrap-up Recipe Markup markup, style, and repo
- 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.cssto all pages
- Working remotely via Slack — same day, same time, but from anywhere you’d like (school, home, etc.)
- Review navigation markup and best practices
- Introduction to Bootstrap as a framework for prototyping layout
- Develop layout for Theme Style (Project 2)
- 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 — Comping basic layout using Bootstrap as a foundational framework
- When do the :hover, :focus, and :active pseudo-classes apply?
- How to easily build Mashable’s navigation bar with HTML and CSS
- 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
<details>: The Details disclosure element- Quick Reminder that Details/Summary is the Easiest Way Ever to Make an Accordion
- 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
- In class work session
- 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)
- In class work session
- Bootstrap grid layout and Google web fonts demo
- In class work session
- 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
- Single Serving show and tell
- 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-reposchannel using this format:
- Post in the
- Final Grades Due — May 8 (10:00 am)
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)
- Create a style tile
- Use an external stylesheet
- For example:
<link rel="stylesheet" href="css/main.css">
- For example:
- 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)
- Recipe Markup
demo
- See HTML References
- HTML Lists
- The
dlelement - HTML Validation Tool — Check your markup
- CSS Validation Tool — Check your style
- Alt text is part of your site’s content
- Web-Safe Fonts
- Quick Start: Starbucks Coffee Bean Peanut Brittle
- Furthermore: A Coffee Ritual, Baked Not Brewed
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.
- Textise — Text-Only and Accessibility Tools
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).
- Single Serving Sites
- Purple, Obama, and Single Serving Websites
- How to Order Eggs
- Books on Graphic Design (and Typography)
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)
- 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.)