Designing with Rhythm, Composing with Rhythm

Professional Creativity

User Experience (UX) and Product Design are my outlets for professional creativity. To me, great design encompasses proportional measurements rather than absolute values – design should flow into whatever size or medium is necessary, in the most organic way possible. I believe that fluidity in design is the best way to create harmony within a composition. Whether that’s a wireframe, user flow mapping, or in a user interface (UI) and its individual elements, proportions are always going to be your friend. We practice Atomic Design at Very, so this comes naturally when establishing a consistent design language and rhythm within a UI’s composition. When you use a base unit of measurement (ex. 16px = 1rem), establishing a rhythm based in proportions becomes quite easy, moving the pace of design into hyperdrive. I find that this makes spacing values (widths, heights, margins, padding, font-size, line-height etc.) much easier to comprehend when working with what are basically simple fractions. It also becomes second nature to know when you need to break your rhythm and add some styling to the composition – but more on that in a bit.

Personal Creativity

When your brain is wired to think creatively, it can be hard to turn it off – but I find that it’s extremely therapeutic and fulfilling to take that creative energy and refocus it. For me, that means writing and playing music. I grew up playing jazz – drumming in particular – and writing drum cadences for my marching band in high school. Eventually, I branched out to guitar, piano, and all of the electronics I can get my hands on.

Writing and playing music is a lot like design: you work within set constraints such as tempo, tone, length of the composition, and most importantly, note lengths and their subdivisions. Just like working on a UI design, these things become baseline measurements for creating consonance (notes vibrate within a harmonious frequency) and dissonance (notes do not vibrate within a harmonious frequency) within a musical composition.

Design Composition = Music Composition, and Why The Number Four is Magical

Design and music composition are all about establishing a rhythm via proportional subdivisions of a baseline unit of measurement. I find that the number four is more often than not at the base of these measurements.

In design, working in proportional units like rem and em are where we begin; 16 is the common number you’ll see all over the web, but the most common subdivisions of that (1/2, 1/4, 1/8, 1/16) are extremely common. We abstract those into simple values such as:

• 16px = 1 rem
• 8px = .5 rem
• 4px = .25 rem
• 2px = .125 rem
• 1px = .0625 rem

By abstracting a unit of measurement into a proportional value, you’ve opened the gateway for establishing a new system of measurement that’s ready to change at your will. You can still achieve any value with all of those abstractions.

In music, we’re dealing with note length as a baseline. The most common subdivision in music also starts with a value of one:

• 1 = Whole Note (one note sustained over four beats of the tempo)
• 1/2 = Half Note
• 1/4 = Quarter Note
• 1/8 = Eighth Note
• 1/16 = Sixteenth Note

While there are many other subdivisions of a whole note in music (triplets, dotted notes, etc.), these are the most common ones used. The point I want to make here is that style and creativity can be added to any design subdivision or music note subdivision.

Modification: When Composition Comes Alive

Style and creativity in design and music are the key modifiers for creating an experience worth remembering. Here are some modifiers you can add to any subdivision of your base measurement in design and music composition to make it more dynamic and memorable.

Design (CSS Decoration Properties):

• Color
• Borders
• Alignment (especially when using flex or grid layouts)
• Backgrounds
• Transitions, Transforms, and Animations
• Pseudo Classes and Pseudo Elements
• …and many, many more

Music:

• Key
• Tone
• Sustain
• Tempo
• Intonation
• Key Change(s) Dynamics
• …and many, many more

Stretch Your Brain

For anyone who has been kind enough to read this, I urge you to look for similarities between two different mediums. It’s an exercise that I often use to keep my design theory and thinking game up to snuff. Speaking from experience: picking the mediums is the easy part. Abstracting similarities is the fun part. Defining those abstractions, then learning from them, is the fulfilling part — and will stretch your creative muscles every which way.