Assignment 01 | GD 220-01 | Fall 2018 | 3 CREDITS

Lyrical Mapping

Adapted from an assignment by Mark Sanders

HTML / CSS webpage



6 SEP.
Assign: Song selection, lyrics, analysis and sketches (1-2)

20 SEP.
Assign: Symbols / images / text and modular compositions (3-4)

27 SEP.
Review work
Assign: HTML / CSS structure

4 OCT.
Final Critique
Assign: Final project edits

8 OCT.
Final Files Due

  1. Pick a song that has lyrics
  2. Extract all the lyrics as text. Be sure to type them exactly as they appear in the song, ie. preserve repetition or word/syllable/line breaks.
  3. Analyze the rhythm and sequence of the lyrics. Is it even throughout? Are there more powerful moments? Does it build? Do any elements repeat? Is there a transformation?
  4. Sketch vertical compositions that visually represent your analysis and interpretation of the lyrics. What do lateral or vertical movement communicate? What do white space and gaps communicate? What does size communicate? What does density communicate?
  5. Create symbols, images and/or typography to represent your interpretation of the song lyrics.
  6. Translate sketches into a modular composition that utilizes scale, form, and counter form to visually communicate your interpretation of the lyrics.
  7. Combine modular structure, symbol, image, and text into a coded (HTML/CSS) map for your interpretation of the song lyrics.
  8. Refine your lyrical map based on feedback from classmates.


Download the project files HTML5 Boilerplate