6.1 Experimentation

Overview

Follow brainstorming suggestions from the book and experiment with diverse layouts of a simple phrase.

Create a Text Layout on a Grid in Figma

Excerpt Exercise 6.1.2

The first step in resisting any structure is to familiarize yourself with it. Once you understand and know how such a system functions then your resistance can be focused, specific, and effective. In this exercise you’ll complete four layout variations using only the text you’ve chosen and a layout grid in Figma.

1. Create a new desktop-sized frame in Figma using the templates you used in Chapter 4, https://criticalwebdesign.github.io#figma-templates.
2. Add the text that you have created in the haiku or sourced elsewhere. If you like, you can place an image of your poem to experiment and mock up possibilities over top of it.
3. Experiment with font, position, color, etc.
4. Duplicate and rename the frame for each new iteration. Even though you are aligning the content on the grid you should try to make them significantly different.

Owen used a quote from the poet and author, James Baldwin, to create four distinct grid layouts. The Figma layout grid is hidden in this figure, but it is clear the columns and rows provide structure to the text.

Find Inspiration in the Work of Others

This mood board includes a selection of text and image works made by women. While some present easily-found grid structures, all of these works use intentional expressive typographic design or juxtapose text and image to animate their ideas.

Miles Davis, Kind Of Blue, 1959

In the chapter, “Improvisations and Limitations” of his book The Shape of Design, Frank Chimero writes about finding inspiration in the work of others. Using examples from both (interestingly) Japanese poetry as well as jazz music, Chimero suggests adopting improvisation to facilitate the creative process. He describes the instructions that Miles Davis gave the other musicians when recording Kind of Blue, the groundbreaking album that redefined improvisation across jazz music, by providing them only a “loose framework of limitations to focus them [and] plenty of space of exploration.” However, the music they produced at that moment could only have happened thanks to those who established so much of the language and patterns in this musical form. Davis and his group were informed by a history of jazz greats, like Dizzy Gillespie, Billie Holliday, and Louis Armstrong. While you should always seek to define your unique perspective in what you make, creativity is made possible thanks to others’ Giant Steps. We can “accept the light contained in the work of others” to find our own way.

Owen’s Design Process

Excerpt Exercise 6.1.4

Use these steps to iterate on and improve any design.

1. Seek out, collect images, and make notes about works that inspire you or solve a design problem you are contemplating.
2. Duplicate a previous version of your design. After looking at finished works you might already see areas for improvement.
3. Draw from your inspiration to create a completely new attempt at your design.
4. Take a break so that you can approach the next iteration with a clear mind.
5. Repeat the process!

These logo iterations from chapter 3 prompt outcomes show the above process at work. Building on the original Adobe logo, each new version attempts a different typeface and logo variation. All versions are saved in order to compare them against others, and select the best (or best parts) for the final outcome.

More Inspiration

• Murial Cooper
• Jacqueline Casey 1 2

The LA Times website exploded using code from chapter 6

The New York Times website also gets a redesign.

https://criticalwebdesign.github.io/book/06-off-the-grid/examples/birds.html

https://criticalwebdesign.github.io/book/06-off-the-grid/examples/maintenance.html

https://criticalwebdesign.github.io/book/06-off-the-grid/examples/baldwin.html