What Music Can Teach Us About Design

January 10, 20195 min read

A well designed user interface is like a great song. It pulls you in, it relates to you, it somehow knows your wants, your needs, your struggles and your desires. Although neither a web page or a piece of music are tangible, physical things, they nevertheless can prove to be highly valuable and meaningful, adding beauty, clarity, and purpose to our lives if crafted intelligently. Below I attempt to draw comparisons between a good song and a well designed User Interface.


Time signatures, Keys & Constraints

There are a lot of corollaries to draw between music and web design. One being that they both represent a balance between two things, free artistic expression and strict order.


In music, all songs exist in structures called time signatures and keys. The time signature defines the rhythm that must be followed so that all the instruments can work together in a unified way. The key of the song, or the "root note" is also pre-defined and all instruments must adhere to it as well, if not, the sound produced could not be described as more than that of utter chaos. Any successful song you can possibly think of follows these strict orders of the time signature and the key. These two rules can be thought of as "best practices". Songwriters can choose to follow them or not, but if you don't follow them you risk alienating the listener and they will most likely choose to listen to something


In Web Design, we have the same sort of "best practices." There are elements of interfaces that users are simply accustomed to, in terms of layout. If done deliberately and tastefully, deviating from these norms can help a product stand out or even set a new design trend in motion. However, if done arbitrarily and without a deep understanding of design principles, it can be disastrous.


As the web progresses we as users become more accustomed to things working a certain way and hold the products we use to a higher standard. For example, it is now a must for a website to have a great mobile experience. Users have come to expect that, it is no longer a nice-to-have.

In design, it's easy to become frustrated by these constraints. Not only do we have to adhere to best practices, but we have countless other constraints such as deadlines, stakeholder input, etc. However, it's helpful to not look down upon these constraints as stifling creativity-blockers, but as opportunities.


Constraints provide clarity. Designing a user interface by it's very nature is complex. With so many problems to solve for, constraints help us determine what the most viable solutions are. They help us to quell the forces of ambiguity and uncertainty that are constantly working against us. Constraints in turn save us TONS of time. Without them you may end up designing a product that ignores what customers will actually use and what makes the most sense for the business you're working in.


With this concept in mind, think about any art form and you will realize that constraints are a wonderful and integral part of them all. The painter's canvas, the actor's script, the songwriter's time signature & key, these constraints are ubiquitous and should not be avoided but embraced.


Silence & Space

In music, silence is the origin from which sound is created, sound cannot exist without silence. The same can be said of space in UI design. Everything emanates from blank space.


"Silences have a purpose in music – they help to distinguish different sections of the score, they allow listeners to shift their attention from one syntactic unit to the next (Knösche et al., 2004), and they help us lay down memory for the tune (Deutsch, 1980)."


If there is too much noise in a song, too much clutter, it can be difficult to understand what the music is trying to convey. For example, imagine listening to a song and the instruments are so loud that they drown out the vocals, preventing you from hearing the singer clearly. This would irritate most listeners and in turn alienate them, they would probably listen to something else. Drawing a corollary back to UI design, imagine a site where the primary call-to-action is drowned out by the noise of a neighboring element. This would cause confusion among users, they would probably determine your product is too hard to use and navigate elsewhere.


Without giving your UI room to breathe, you add clutter and dysfunction into the user experience. The power and importance of whitespace in UI/UX design cannot be overstated. For a deeper dive into the topic, read this article.


"Yesterday" and Effective Communication

What makes a great song? Well that's hard to define, but for now let's dissect an undoubtedly successful song in terms of reach, and the most covered song of all time, "Yesterday" by The Beatles. What makes this song so great? What enabled it to stand the test of time, captivating entire generations? Effective communication. It's clear, concise, it's unambiguous as to the emotions of the songwriter and what they are trying to convey.


It's also completely stripped down, instrumentally speaking. No accompaniment that doesn't serve the song is present. I don't think the song would have been nearly as successful if the whole band was rocking out and there was a random guitar solo after the second verse. By the same token, if the final released version of the song was just Paul McCartney singing A Capella, it might not have had the same emotional effect.


The aforementioned qualities of a successful song can be said of a well designed User Interface as well. All elements of the page must support the main message or call to action so that the message is being communicated in a clear, concise, and direct manner. Is the message your trying to deliver through your design being transmitted in a way that's easy to feel and understand? Are you communicating effectively with your user? Make sure you're not adding any components (accompaniments) to your site that do not serve the larger message. If you are, chances are you're adding clutter and perhaps drowning out your message making it hard for the user to make out the purpose of your product. At the same time you must also make sure you're creating something engaging, interesting and satisfying enough that the user will not lose interest.


A good question to ask is: "Is everything on the page serving a purpose?" Be realistic about what information is absolutely necessary. When you use a website or app, your typically scanning your way through it, not going line by line as you would read a book. With that in mind, think of how you can make the user experience of your site better by making it more scannable.


Conclusion

We can put the same passion and attention to detail into our design as a songwriter does into their masterpiece. In fact, why not think of ourselves as songwriters, as artists? We are crafters of experiences after all and are faced with similar constraints and challenges. Go create your masterpiece using all of these beautiful constraints to your advantage. Go make the world a more beautiful place.