As a professional web designer, I find myself striving into two diverse yet connected skill sets. On one hand, I continue to advance my technical proficiencies by staying up to date with new technologies such as HTML5, CSS3, WordPress, PHP and MySQL. On the other hand, I hone my creativity by practicing typography and applying grid principles into my work. Yet, in over a decade of working on the web, I have learned the importance of white space. It’s not what you put in; it’s what you leave out. I have learned this repeatedly, and from a wide variety of sources.
“White space is to be regarded as an active element, not a passive background,” wrote Jan Tschichold in 1930. As I move further into user-centered web design, white space becomes an essential element in letting the user focus on the content of the site. The use of open space, however, was not obvious to me in my early days of web design. I used to cram as much content as I could into the page without considering the significance of the message.
My appreciation for white space deepened further as I began listening to Miles Davis, whose musical talents and tastes attracted me to jazz. Davis was one of the greatest jazz trumpeters of all time, but he also was a master of communication. Unlike many virtuous beboppers including Charlie Parker and Dizzy Gillespie who squeezed out as much notes as they could in their solos, Davis left plenty of space in his phrasing to allow listeners to absorb his thoughts. In his classic Kind of Blue, Davis played only the most meaningful notes in his solos and yet the notes he didn’t play were as important as the notes he played.
In Bitches Brew, a phenomenal success of fusion, his role comes even closer to a designer. Davis allowed the space for his rhythm section, which was made up of four drummers, three electric keyboardists and two bassists, to work out its chaotic, organic groove. Like a designer whose responsibility is to organize the content into a logical sense, Davis created order out of the disorder when he came in to play. Davis had demonstrated that space in music creates harmony and balance. Similarly, white space in web design can also create harmonious layouts and free the eye from clutter. The correct use of white space not only brings out the content, but also enhances readability.
As mobile devices continue to evolve and the concept of responsive layout is taking off, white space plays an even more crucial role in the design of the web. Responsive web design, which was introduced by renowned web designer Ethan Marcotte, is a technique that combines fluid grids, flexible images with CSS3 media queries to adapt the layout of the web site based on the device viewport.
One of the major advantages of responsive web design is that designers no longer have to create a custom web site for each individual browser and device. With the rise of tablets and mobile devices, designers don’t have control of how the contents are being viewed and the size of the browser window from the users. Unlike print design, the web is an uncontrolled medium. The flexibility of the web not only poses a challenge to the designer, but also forces us to use the space wisely. Once we learn to design the space around our content, we can take advantage of responsive web design to create a truly accessible experience for our users regardless of what device they have in front of them.
Later in his career, Miles Davis experimented with funk, rock, electric, pre-recorded orchestration and even hip-hop backbeat. Because he was the master of using space, he was able to adapt his playing around the new environment and made his horn sing. In a way, Miles Davis was a responsive trumpet player, taking into account the audiences’ window of experience, and tailoring his music to reach through and touch the user. Similarly, it is the web designer’s role to architect an experience as adaptable as the music of Miles Davis.