</branding>

Adbusters' Corporate American Flag (2023)

Introduction

Reimagine a corporate message using critical web design.

Learning Objectives

Students who complete this assignment will be able to:

• Compare Dunne and Raby's A/B columns e.g. critical design vs. commercial design
• Identify aspects of an organization's brand and identity including logo, wordmark, and logo lockup.
• Design a web page in Figma
• Demonstrate how to use @font-face and online type services like Google Fonts to style text in a web page.
• Implement a click event listener in Javascript.

Preparation

Complete the following to prepare for this assignment:

• Chapter 3 of Critical Web Design
• Course content listed on the schedule

Rubric

See Moodle.

Concept

• 📚 "Critical Design" (chapter 3) in Critical Web Design

Inspiration

• Chapter examples: Time, Monopoly

See the Critical Web Design Index for examples tagged with #subvertisement or #culture jam, including...

• MSCHF onlybags.biz (2022), eattherichpopsicles.com (2022), cdgrandprix.com (2022)
• Dan Kurtz Binky (2017)
• Ian Bogost Cow Clicker (2010)
• Tega Brain and Surya Mattu unfitbits.com (2015)
• adnauseam.io
• Steve Lambert, et al add-art (2011)
• termsandconditions.game
• Adbusters collection of spoof ads
• stupidhackathon.com (2015) organized by Sam Lavigne & Amelia Winger-Bearskin

Articles

• 📚 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)
• Graphic Design Theory #13 Leading Lines (4:59)

Design

Follow the prompt in Chapter 3 of Critical Web Design to create a design that unbrands a corporate identity.

1. At this point, it is better to use a simple layout than try to recreate an entire website. Try looking for designs in print that you can use. Or create a simple print ad to alter.
2. Consider incorporating what Paula Scher calls "Serious Play" (2008) (21:35)

Code

Follow the prompt in Chapter 3 of Critical Web Design to:

1. Fork this repository and clone it to your machine.
2. Code your design in HTML/CSS/JS
3. Use @font-face or an online font service to match the identity
4. Use Javascript mouseover and/or CSS :hover to add interactivity to the page
5. Write a short statement explaining your motivation and intentions. Log it, as well as any sources you used in your research about the company, to the console using console.log()

Publish

1. Save and refresh your work in the browser often to see your changes.
2. Commit changes regularly.
3. Confirm valid HTML and CSS ^(?)
4. When finished, push, publish, and post all deliverables to Moodle per documentation in the Assignments.

Resources

• Course resources HTML, CSS, JS, Figma, Bootstrap
• Mozilla Developer Guides

Past examples

• 2023
  • Jeremy
  • Patrick
  • Tyler
  • David
  • Isabel
  • Richard
  • Riana
  • Will