Musical Thinking and Style Guides in Web Design

Mason Wendell
#Design | Posted

Image of man smoking with words "musical thinking and style guides"

I'm a music nerd. I studied at Berklee College of Music, a school where everyone eats, sleeps and breathes music 24/7. I learned about deep music theory, jazz and classical composition, and intensely studied how to play the bass. I wound up finding my passion in web design, but I always felt bits and pieces of this music education to be relevant to my work as a designer – and it still influences my approach today.

In music, you can’t have variations without a theme. Melodies need structure and context, and your website’s structure and content is no different.

2014-07-29 at 8.46 AM

I’ve been designing in the browser since about 2009. I like Photoshop just fine, but since my medium is the web I’m drawn to using the building blocks of the web as my creative tool set. This means that CSS is my primary creative tool. Working this way helps me understand the design I’m creating, and I get to explore emerging web techniques and find their creative potential.

2014-07-29 at 8.47 AM

When we design web pages we're not designing web pages. We're actually designing systems that are assembled into web pages. So we need to think systematically. We need to create a design language that will not just serve the project we're delivering, but will continue to carry the weight of new content. This means we need to think in both the small- and the large-scale to create design elements that seamlessly work together.

This Leads Us to Style Guides

Traditionally, a designer will create a style guide when establishing a design system. This might be done after a design is complete as a means to communicate that design thinking to other stakeholders or future designers. A design language needs to sustain a feeling and character across many different sections of content. If the brand is cool and sophisticated it won't do to lose sight of that and start adding tattoo flames. That's why we have style guides; they codify a design so it can be communicated to others.

Style Guide as Design Tool

2014-07-29 at 8.48 AM

I'm suggesting that we flip this process: start with the style guide and treat it like a design tool. I'm not the only one. You may be familiar with Brad Frost’s concept of atomic design and Pattern Lab, his style guide creation tool. He proposes starting with the smallest things you can design, calling them atoms, and working your way up through bigger and bigger constructs until you've designed full templates and pages.

A more direct way to look at this is to see that each piece, whether it's an atom, a molecule, a menu, an image gallery, an author byline, or whatever, is a Component. A design component is a self-contained chunk of design and is an extension of well-formed content. Components can be assembled into other components and combined into layouts. So instead of designing a page, the goal is to design an interlocking family of components that become our design language.

Blank Page vs Style Guide

When we start with an empty style guide instead of an empty page we actually have a lot less emptiness. We know we need HTML elements, and we add them as part of our baseline starter kit. We've also done at least a preliminary content inventory so we can add some sample HTML to represent key content components. That's not so empty anymore! This method helps guide our design thinking to consider better questions.

Though I still sketch on paper and in my image editor to create broad ideas or refine visual concepts, when I'm designing with CSS in the browser I'm asking questions like, "What's the best way to arrange this content?" and "This looks good, but how does it look on my phone?" These are more productive questions at this stage.

We've got a scaffolding where we can create our design language, understand and organize our content, and then do the hard work of going over and over it as a designer until it has a consistent tone. By building it up from scratch and using the style guide to guide our styles it's much easier to spot patterns, redundancies, and inconstancies and add intentional contrast and surprise.

That sounds like Jazz to me

2014-07-29 at 8.50 AM

This approach to designing strikes me as similar to how hard bop Jazz is stereotypically structured. We all know that there's a lot of improvisation in Jazz, but a song doesn't come from nowhere, and it doesn't all come out at once. Inspiration will strike a composer to create a tune in a key. He’ll explore that tune and find and refine the right tonality and chord progression. And then continue to work it over to define the song's form. That's what the composer writes down.  That's the song as a document - the style guide for the song. Then he’ll take that to the band and they'll play that tune once. It usually takes less than a minute, but the band continues playing. This is where the improvisation kicks in.

What's going on is that players will take turns soloing over all the source material the composer gave them. The players mine the song form and chord progression for interesting material. It's not a free-for-all. They're not trying to play any different songs. They're exploiting the vocabulary the composer gave them. Sounds like design to me.

The thing is, all my specialized musical training has served me well as a designer. Turns out the thinking that goes into creating/finding/crafting a melody and lyrics, constructing a harmony that supports the feeling you want, considering the available instruments and players, and tying that together with a rhythm isn't so different from designing.

In my next blog post, we’ll go deeper down this rabbit hole and look at each component of the composition: harmony and rhythm, typeface and color.

If you are heading to CapitalCamp + Drupal Gov Days or Design For Drupal this week, check out my session Thinking Inside The Box, Inside The Box, Inside The Box."

Mason Wendell