Tutorials, demos, and resources for DIG 245 Critical Web Design
- Set up your development environment topics/development/environment.md
- Learn to use Dev Tools topics/development/dev-tools.md
- Course references HTML, CSS, JS
- Mozilla Developer Guides
- Validators HTML and CSS (?)
- W3Schools HTML, CSS, JS
- https://github.com/omundy/learn-javascript
- Codecademy HTML, Javascript
- Bootstrap 5.2 grid demo / jQuery 3.6 template
- SVG Basics
- Learn Javascript Examples / Demos
- Also see demos inside project repos
- Charli Marie Figma tutorial (18:34)
- Toni Gemayel Figma: How to wireframe (2019)
- Figma Design Basics:
- 01-Getting started in design (1-5)
- 02-What is Graphic Design (1-9)
- 03-Design Thinking and Ethics (1-5)
- 04-Accessibility & Inclusion (1-9)
- 05-Design Research (1-7)
- 06-Content (1-4)
- 07-Storytelling (1-5)
- 08-Simplicity (1-8)
- 09-Consistency (1-5)
- 10-Constraints (1-5)
- 11-Visual Hierarchy (1-8)
- 12-Typography (1-15)
- Noah Levin From Figma's design team: How to run a design critique (2019)
- Figma Tutorial: Creating Styles (6:00)
- Create layout grids with grids, columns, and rows in Figma
- Figma Best Practices Everything you need to know about layout grids in Figma
- DesignLab
- Bootstrap documentation
- Sam Norton Understanding Bootstrap 5 Layout (2023)
- 📚 Bruce Sterling A Short History of the Internet (1-6) (1993)
- 📚 Rob Larson Intro (1-12), The Flaw of Gravity (13-26) in Bit Tyrants
- 📚 B.J. Keeton The History Behind “Hello World” (2020)
- Josh On theyrule.net | Simple Net Art Diagram
- 📚 First Things First Introduction, 1960 Manifesto, and 2020 Manifesto
- 📚 Michael Bierut “Warning: May Contain Non-Design Content” (11-13) in Seventy-nine Short Essays on Design
- 📚 Frank Chimero How and Why (18-27) in The Shape of Design (18-27)
- 📚 Figma 02-What is Graphic Design (1-9)
- csszengarden.com | JODI wwwwwwwww.jodi.org
- 📚 Dunne & Raby “Design as Critique” (33-45) in Speculative Everything (2013)
- 📚 Ian Bogost The App That Does Nothing (2017)
- 📚 Frank Chimero Introduction in The Shape of Design (2012)
- 📚 Aaron Draplin logo design challenge (16:20)
- clickclickclick.click | Binky
- 📚 Diogo Terror Lessons From Swiss Style Graphic Design (2009)
- 📚 Andrew Maher How You Make A Grid (2-9) (2011)
- 📚 Frank Chimero Craft and Beauty (28-34) in The Shape of Design (2012)
- 📚 Aigars Silkalns 20 Excellent Websites With Responsive Web Design (2023)
- loremipsum.io | Rafaël Rozendaal abstractbrowsing.net | Ben Grosser Safebook
- 📚 Jakob Nielsen Usability 101: Introduction to Usability (2012)
- 📚 Brian Jackson The Ultimate Step-by-Step Guide on Website Usability Testing (2022)
- 📚 Dmitry Fadeyev 10 Usability Findings and Guidelines (2009)
- 📚 Cyndi Wiley Nothing About Us Without Us…Including Pizza: The Practice of Designing with Accessibility in Mind (2020)
- 📚 Amy Schade, Yunnuo Cheng and Samyukta Sherugar Top Ten (Enduring) Mistakes in Web Design (2016)
- cantunsee.space | userinyerface.com | Seeing Theory
- 📚 David Bryant Copeland Guidelines for Brutalist Web Design (2022)
- 📚 Frank Chimero The Web’s Grain (2015)
- 📚 Harry Brignull Dark Patterns: Deception vs. Honesty in UI Design (2011)
- 📚 Jennifer Valentino‑DeVries How E‑Commerce Sites Manipulate You Into Buying Things You May Not Want (2019)
- 📚 Roberta Smith Barbara Kruger: A Way With Words The New York Times (2022)
- deceptive.design | Neal Agarwal Dark Patterns
- 📚 Erik Devaney 8 Guidelines for Exceptional Web Design, Usability, and User Experience (2022)
- 📚 Karla Cook What Is Whitespace? 9 Websites to Inspire Your Web Design (2022)
- 📚 Figma Best Practices Everything you need to know about layout grids in Figma
- Design Lab: Figma 101: Day 3 | Create a logo and icon set
- 📚 Emily Grace Adiseshiah 5 design philosophies to live and design by (2017)
- JODI 404.jodi.org | Jonas Lund imhereandthere.com | Mark Napier Shredder 1.1 | Mark Sample Two Moji | MIT Media Lab Identity Redesign | endless.horse | Codepen Spark
- 📚 Tobias Rose-Stockwell This Is How Your Fear and Outrage Are Being Sold for Profit (2017)
- 📚 Steve Lambert “Add-Art: Sharing, Freedom, and Beer” in Net Works: Case Studies in Web Art and Design (ed. xtine burrough) (2012) add-art.org (2011-)
- 📚 Do Not Track documentary (2015)
- Design Lab: Figma 101: Day 2 | Design an app screen
- Anatomy of a computer virus (Stuxnet) (3:21) | Ubermorgen Vote-Auction (2000) | Steve Lambert The Most Awkward 404 Page on the Internet | tosdr.org
- 📚 Wilneida Negrón 10 tech issues that will impact social justice in 2017
- 📚 Brooke Singer “Superfund365.org” in Net Works: Case Studies in Web Art and Design (ed. xtine burrough) (2012)
- 📚 George Aye Design Education’s Big Gap: Understanding the Role of Power (2017)
- Brooke Singer superfund365.org and toxicsites.us | Ben Grosser Facebook Demetricator | fffff.at Google Alarm extension | JODI geogoo.net | Daniel Temkin esoteric.codes
See Critical Web Design examples for examples of internet art, critical design online, and other cultural works. A selection follows:
- clickclickclick.click
- cowclicker.com
- Google Will Eat Itself
- theyrule.net
- Binky
- endless.horse
- thenicestplace.net
- Form Art
- queeringthemap.com
- kathack.com
- Do Not Track
- anatomyof.ai
- docubase.mit.edu
- The New York Times
- Who Are These Kids? (music interactive)
- Meg Miller and Ilaria Parogni The Hidden Image Descriptions Making the Internet Accessible (2022)
- Antonio de Luca and Sasha Portis New York’s Subway Map Like You’ve Never Seen It Before (2019)
- Frank Augugliaro and Jessica Bennett Are You Even Fun? A Mostly Unscientific Quiz. (2022)
- Elon Musk’s Unmatched Power in the Stars (2023)