Very often I find that students are left frozen by the infinitudes of possibility, like a child faced with the first day of summer vacation: given the potential to do almost anything, they can’t choose, and so remain stuck doing nothing.

In the light of that all-too-common stumbling block, this week’s web developer exercise is a little different from those I’ve presented in the past: rather than working to reproduce a piece of work exactly, this article sets out a broad set of design goals, while imposing limits to the ways in which they can be executed.

I’ve often found that imposing restrictions actually helps students, forcing them to be inventive in exploring new creative options.  Here are my suggestions, delivered as two separate projects.

PROJECT ONE

Restrictions: color, aesthetics, no scaffolding

Research the aesthetics of “extreme” musical genres such black metal, grindcore, or hardcore punk, and apply them to representing another form of music on a web page, such as classical or jazz. Include information about the artist, genre, or musical track.

• Everything on the page must be high-contrast black and white. No color. No grayscale.
• There must be handmade elements on the page. This may include typography, illustrations, distressed scans, collage, or other forms.
• Don’t use a grid. Everything should be arranged arbitrarily and with intuition.

Stretch goals: Make the page responsive.

PROJECT TWO

Restrictions: color, size.

Nuit Noire is boutique winery that wishes to emphasize its craft. The identity of the winery must center around a strong logo mark that is hand drawn and suggest fine craftsmanship and the individuality of a small winery, all while showing Nuit Noire’s high-end personality.

To find ways to differentiate the mark so it stands out on a shelf in a liquor store, you must use a color palette not traditionally associated with wine: no purples or reds.

Create the logo mark for Nuit Noire and display it a web page. The page should feature a (fictional) history of the winery and suggested food pairings. You may only use one typeface on the page, which must be a sans-serif font. The resulting page must be less than 130K in file size (the contribution of your embedded font is excepted from this total).

Stretch goal: Make the page responsive.

Whether you’re a student in one of my classes or a casual reader, I look forward to seeing what you create. Feel free to leave links to your interpretations of the project in the comments section below.

With gratitude to Jarret Fuller for the concept and structure of the exercises. Photograph by goodmami, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.