Skip to content
DIG 245 Critical Web Design

2-3View Source

Sep 4

📌 Complete before class

Learning Objectives
  1. Use browser DevTools to temporarily modify a live website’s content (e.g. text, color, or images) and document the change with a screenshot.
  2. Collect inspiration from design manifestos and visual poetry examples to inform an original project concept.
  3. Sketch at least three hand-drawn wireframes exploring different layouts for a text-based design project.

🛠 Demo - How to use DevTools

Section titled “🛠 Demo - How to use DevTools”

Demo HTML-4

  1. View Source vs. DevTools (Elements, Console)
  2. 👉 Use DevTools to temporarily modify a real website: change a headline, swap a color, hide an ad, alter a price. Screenshot your modifications and post in Slack.

👉 Paper Wireframe

Section titled “👉 Paper Wireframe”
FollowExercise 2.1.1 Draw a Wireframe on Paper (54)

As a class, review the 📌 View Source assignment

Individual

  1. Find a phrase from this list of manifestos that speaks to you.
  2. Collect inspiration - locate several visual poetry examples that inspire you
  3. Using a pencil and paper, draw at least three simple wireframes to plan for your View Source project. They should represent some text from one of the design manifestos.

Tips

  • Make as many as it takes until you find a layout you like.
  • Play with the meaning of the phrase using the layout.
  • Try different phrases.

👉 Prompt 2.1

Section titled “👉 Prompt 2.1”

By next class, select one of these and create a much more detailed drawing. This will be your View Source design v.1

👉 Figma

Section titled “👉 Figma”

Depending on our time, try to recreate (and improve) these designs in Figma.

Section titled “Related”

Intro to Chrome DevTools (5:33)

📌 Homework