A collection of examples and exercises to accompany Critical Web Design by xtine burrough and Owen Mundy.
Publish your first web page: By the end of the modules in this chapter you will create and publish your first web page. Starting with the next exercise, you will create your Sites folder in your home directory and use the command line to navigate your hard drive in Terminal or Git Bash.
Design and code a page featuring expressive typography. Start by pre-visualizing the design in Figma and then code the page using HTML, CSS, and Javascript. The text can be any glyph, a single word, or an important phrase from one of the texts at designmanifestos.org. Select a phrase that speaks to you. Examples: After Gerhard Rühm | Poem (Chaos) | Poem (Click) | Don't Be Evil) | Poem (Shake) | Poem (Think)
Create a work of critical web design: Throughout the modules in this chapter you will redesign a logo to create a visual form incorporating commentary. You will then use Figma to iterate on design, consider typographic choices using Google Fonts, and create a web page with interactive images and Javascript to express your ideas. Examples: Monopoly | Time
Design a responsive multi-column web page layout for a fictional newspaper. Use lorem ipsum placeholder text throughout your design. Code the page using the Bootstrap framework. Examples: The New York Felines
Create and implement a usability test, then design a responsive web page to reflect on findings. Evaluate your design using the "less is more" critique. Code the design using bootstrap, including a working web form to output the score from the System Usability Scale (SUS) survey. Examples: AIGA usability test
Create an experimental composition and then explode it!
Examples: Haiku (xtine) | Birds | Baldwin | Maintenance
This chapter prompt leads you to continue the work in chapter 7 by designing and coding an interactive album generator application. These exercises model the generative design prompt that follows at the end of the chapter: to create a web page that can generate new iterations of itself based on some changeable data source, like user input, time, location, etc.
Examples: AI Albers | After Jean Arp
TBD
TBD