The Musicality of Design Systems (Pt 2)
Composing UI — Musical formulas for major scale
Music is deemed by many as the ultimate expression of humanity.
It holds the power to make us smile, weep, console and unite us.
It has propelled a myriad of cultural movements, adapted effortlessly to regionalisation, inspired waves of technical innovation and weaved its influence into pretty much every facet of life, within every walk of life.
With such command over the world’s population, it’s long been appropriated as a vehicle to drive collective sentiment within religion, politics and commerce.
Those who have mastered the language possess a power to deliver meaning and emulate emotion in ways unachievable in any other medium, yet even a simple composition by relative newcomers can provide captivating results.
It continues to generate endless opportunities for divergence, innovation and reinvention, yet all the while preserving the core foundations that have enabled practitioners to communicate and execute successfully, efficiently and consistently for thousands of years.
Its as reliable as it is prodigious.
At its heart is a simple network of loosely-coupled formulas that converge to generate a flexible framework for structure and style that can be quickly and infinitely (re)configured at any stage of the creative process in order to propel narrative, mood and impact.
As a designer, immersed in the challenges of developing design systems at scale, I see a convincing correlation between the accomplishments of the music language and the goals of a design system and feel we’re beginning to pre-compose similar formulas within our design systems in order to provide safer, more successful and creative environment for composition, collaboration and execution.
The foundations of music
At its very simplest, the language of music has evolved in order to rationalise and communicate the desirable occurrences of pitch over time and the application of style over composition¹.
[1] — Pitch is the term referring to of how high or low a note is. Time hopefully requires no explanation. The application of style over composition is something we’ll come onto later.
These boundless paradigms are rapidly quantised by a handful of loosely-coupled formulas that converge into a highly performant system which limits the scope of inputs to that which offers the greatest possibility for desirable outcomes.
Whilst music continues to expand and diverge in new, unique and previously unimaginable ways, these long-established formulas have remained central to it’s proliferation and the means by which it is developed, adopted and communicated.
Scales, keys and time signatures are foundational, generative formulas that rapidly equip practitioners with succinct, adaptive parameters for configuring musical structure.
Scales
Scales are sequences of musical notes (usually between 5 and 7 notes) that are employed to organise pitch and optimise the execution of melody and harmony. There are a multitude of scales to choose from, each bringing it’s own colour to a composition.
They are typically extracted from the Chromatic scale (Chroma, is derived from the Greek term for colour) and their primary purpose is to promote a desirable collection of notes intended for use, thereby demoting those that are not needed.
By selecting a scale to work with the number of creative choices is effectively reduced by 30–50%, significantly increasing the probability of successful selection straight out of the box.
This produces the lowest possible barrier to success, establishing a safe and efficient basis to begin harmonic collaboration with.
Scales are so foundational to composition and execution that many instruments, effects and production tools have been deliberately designed around them. The piano is the most graphic example of this.
We’re beginning to utilise scales within design systems for the efficiencies they generate for things like…
- Typography
- Color
- Space
- Size
By using scales when composing our UI, designers and developers significantly reduce the opportunity for error by working within purposefully created, limited confines, minimising the cognitive overhead of selecting and recalling the right notes to play time and time again.
By codifying foundational design logic using scales we’re able to programatically generate typography, spacing, styling and layout solutions that can be reconfigured on the fly in order to adapt to screen sizes, devices, specific interface elements.
Simply put, scales scale and if you’re not exploring how they can help within your system you’re missing out.
GET THE TECHO REMIX OF THIS SECTION HERE!
Keys
In many forms of music it’s common to switch between scales at some point within the composition/performance to heighten drama or alter the mood in some way. This known as a key change.
Key changes are executed in an instant, without skipping a beat, so it’s vital that this intent is collectively understood and the methods for communicating change are simple and succinct.
Keys serve as modular referencing system for communicating which scale(s) are to be used in a piece of music. They consist of 2 items of information. These are…
- A note of the Chromatic scale that represents the starting point and the harmonic ‘centre’ of the piece
- A reference to the basic scale required. (This is most commonly major or minor).
Armed with just two pieces of information, groups are empowered to communicate and execute harmonic intent quickly and consistently.
This same convention is also used when referencing chords (groups of 3–5 notes that, played together, create a recognisable harmonic effect).
This recursive syntax for referencing elements relating to harmony and melody is critical to communication in music.
For many working with design systems, few could argue that having a well-structured naming convention for data and UI elements is paramount to achieving consistency and efficiency in communication.
For me, the BEM (Block, Element, Modifier) naming convention performs a similar role in helping with consistency and efficiency of communication between designers and developers.
It’s self-documenting, recursive syntax helps to build consistency in terminology when creating, communicating or performing.
Button
Button — Primary
Button — Secondary
Button — TertiaryDropdown
Dropdown -- Primary
Dropdown -- Secondary
Dropdown -- TertiaryNavigation
Navigation -- Primary
Navigation -- Secondary
Navigation -- TertiaryArticle
Article -- News-item
Article -- Blogpost
Article -- Opinion
Formulas in communication can, as much as anything else, help to drive critical efficiencies in the collaboration and execution of design, providing groups with a shared language that reduces the overhead of articulating frequently repeated concepts with affordance and consistency.
Time signatures
Time signatures programatically generate a rhythmic timeline upon which musical notes are set. They instantly infer a reliable, discreet, repetitive pulse that guide composers and performers to accurately align their harmonic work.
Similarly to keys, they contain the necessary information for delivery and execution in just a few configurable, self-documenting references.
- The first value defines how many beats make up a bar
- The second value describes the note that represents a beat
This creates a grid of relative divisions of time that are configurable through specifying an absolute value, tempo, which is defined by the number of ‘Beats Per Minute’. This sets the measurable duration of a beat and the overall pace for a piece of music.
Along with the the number of beats per bar and the type of beat being used tempo is configured to define the grid system of music.
As with key changes, changes in time signatures are commonly used to create emphasis or switch pace so again, it’s essential that the means of communication is universally understood and executable without skipping a beat.
Concepts of space and duration have typically been difficult to articulate within responsive design and traditional CSS grid systems are now considered overbearing and unwieldy.
By ensuring your divisions of space are configurable in this way, it’s possible reprogram your beats for different screens/devices.
Style over composition
Of course, there’s far more to music than these structural elements and the application style warrants another post in itself.
Briefly, the stylistic elements that can be applied to compositions include..
- Dynamics
- Timbre
- Instrumentation
- Production techniques
Undoubtably, all of these elements play a part in delivering the net effect of music, yet ensuring these are configurable and applicable over and above the structural composition allows extensibility from the outset.
It’s the prime reason there are a myriad of cover versions any given popular song on Spotify today, with many more being jammed in bars and rehearsal spaces throughout the world.
The application of style through orchestration, instrumentation and production is an intrinsic part of the process of creating music, with many of music’s ‘delighters’ not a result of composition, but rather a result of experimentation in rehearsal, live improvisation and in the recording studio.
By building a strict yet flexible contract between style and structure within our design systems, we are able to build a flexible UI system that provides freedom for creativity at all levels and at any stage of development.
Summary
In developing a design system our ultimate goal is to create the logic, the tools and understanding for the rapid development and innovation of experiences in a performant, intuitive and resilient environment.
The language of music has long been developed with these self-same goals and key to it’s accessibility is, in a large part, down to the pre-compositional formulas that form the constructs of the music’s universal language.
As music technology continues to evolve it has long passed the point where the gap between composition and production has closed, thanks to the innovations in tooling and instrument design which leverage these formulas.
I feel design systems are following a similar trajectory.
The more we are establish, pre-compose and codify design logic up front, the quicker, more consistent and performant our creative environment can be. This is something I’m beginning to describe as Formula Driven Design.
With a design system set up on such a basis, designing then becomes less about continually replaying the conventions of language and more about crafting experiences.
See the summary of The Musicality of Design Systems series …
