dig245-critical-web-design
DIG 245 - Critical Web Design
Tutorials, demos, and resources for DIG 245 Critical Web Design
Basics
- Set up your development environment topics/development/environment.md
- Learn to use Dev Tools topics/development/dev-tools.md
HTML/CSS
- 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
Examples / Demos
- Bootstrap 5.2 grid demo / jQuery 3.6 template
- SVG Basics
- Learn Javascript Examples / Demos
- Also see demos inside project repos
Figma
- 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
- Bootstrap documentation
- Sam Norton Understanding Bootstrap 5 Layout (2023)
Assets
Articles
Networks
- 📚 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
View Source
- 📚 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
Critical Design
- 📚 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
On the Grid
- 📚 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
Usability & Forms
- 📚 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
Off the Grid
- 📚 David Bryant Copeland Guidelines for Brutalist Web Design (2022)
- 📚 Frank Chimero The Web’s Grain (2015)
Ethical Design
- 📚 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
Generative Design
- 📚 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](https://trydesignlab.com/figma-101-course/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
Data Tracking
- 📚 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](https://trydesignlab.com/figma-101-course/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
Design & Power
- 📚 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
Publishing & Professional Work
Inspiration
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
Interactive Documentary
- 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)