25 Variations

Phase 1

Instructions

  1. Choose an existing poem. It should be written by someone else — someone who is not yourself and someone you do not know on a personal level. As a general rule, the poem should also be able to fit on approximately one printed page (no epic poems).

  2. You will be making 25 formal variations using this poem. Each variation will be a separate webpage. For each variation, you will focus on changing the poem's form through shifts in composition, typography, hierarchy, scale, and pacing. The poem's content must remain intact throughout all 25 variations.

  3. The 25 variations are divided into 5 levels of 5 variations each. The levels start with my constraints and gradually allow more freedom.

Level 1

Restrictions

Goals

Focus on breaking up the text in different ways. How does the poem usually look? What happens if you present it more spaced out? More condensed? In a specific shape or form? What happens to the poem when you have to scroll to read it all?

Level 2

Restrictions

Goals

Focus on presenting the text in different hierarchies and scales using only HTML.

Level 3

Restrictions

Goals

Focus on positioning elements using CSS. Experiment with space and possibly try a very tall page or a very wide page.

Level 4

Restrictions

Goals

Focus on typography using CSS. Experiment with hierarchy and scale.

Level 5

Restrictions

Goals

Do something you haven't done before. Use colors. Test the limits of what you can do. Experiment with new CSS properties (including animations, if you want).


Phase 2

Instructions

Now that you’ve made at least a first pass on the 25 Variations, please create a navigation system for them. Your navigation system should be both a landing page and some sort of consistent device on each page. (Optionally, you can also have some sort of “cover page” for each Level, describing the constraints and what was allowed in each Level.)

The landing page should...

The consistent page device should...

The optional cover page for each Level could do any or all of these...

Somewhere within all of these pages you should have...

Examples of navigations


Overall project goals

This project is an iterative exploration of typography through HTML and CSS. Since you’ll be making 25 variations on the same text, no one single representation of the poem is important than any other. This should allow you ample room for visual experimentation. You should aim to have a variety of visual treatments that responds to the poem’s content. Additionally, by the end of the project, you will better understand the differences between HTML and CSS and see how each can be used in semantic and visual expression.

Where to find your poem

Useful tools

Credit

Thanks to Lucy Hitchcock for inspiring this project from her print-based version.


Updated on February 25, 2016