To the Records on Ribs listeners, readers, and staff,
I was asked by Alex to write up a brief post on the work that went into designing the latest Records on Ribs layout that you now see in front of you, so I’d like to begin first by introducing myself: my name is Bryan and I’m a graphic designer and (soon to be) graduate student in the humanities. I also run a little graphic design company called Ivy Street, where you can find my portfolio and some more information about who I am and what I study. Now, on to business.
Like most websites I design, this one began in Adobe Photoshop rather than HTML & CSS. In our earliest correspondence back in October, Alex stipulated that he was looking for “something clean, simple, and with the minimum of additional graphics, that can display album artwork well.” Websites to draw inspiration from included BLEEP.com, Tomlab, and my own blog, The Velvet Howler.
One aspect of the design process that became quite important early on was to distinguishing what is clearly a record label from a simple WordPress blog. This involved drawing a distinction between News and Archives, on the one hand, and Ribcage on the other, but allowing for the two sides of the site to communicate with one another rather than appear artificially separated. Furthermore, it meant doing away entirely with the “blogging” metaphor–as found in the previous design–for the front page. Instead, a new user interface was needed to adequately express the depth and structure of the website as a whole, without seeming muddled or overwrought.
Another area in which design played a key role was in minimizing the amount of exposed interface elements. For example, in the previous design, links such as “Download,” “Buy,” “More,” and “Listen” were repeated for each release entry, which, while useful, also appears to be visually redundant and space-consuming. Our solution was to propose a jQuery alternative involving standards-compliant and accessible hover menus (both the black vertical ones on the front page and sidebars, as well as the gray horizontal ones on the releases index). These remove much of the visual clutter found in the previous design, while simultaneously retaining all of the prior functionality.
Perhaps the most fundamental aspect of the design, however, was the implementation of the 960 grid system, which structures every page and element. It may not be noticeably apparent at first glance, but using the grid system is an important design heuristic that prevents visual clutter. As the author of the system writes:
As long as we’re using shapes consisting of right angles, we might as well make some logical sense of it all. Some time after the intial work of Khoi [Vinh] and Mark [Boulton], I happened upon an article by Cameron Moll, heralding a width of nine-hundred and sixty pixels as the optimal size for design. Basically, 1024×768 is the new 800×600, and 960 makes for a good magic number to utilize the wider canvas on which we paint.
In addition to the 960 grid system, a focus on W3C standards compliance for XHTML and CSS was also crucial, and I believe we have passed all such tests, allowing for readers to view the site without any errors across a multitude of browsers, ranging from Internet Explorer to Firefox to Safari.
In truth, however, the best way to describe the design process isn’t so much by writing about it, which is often difficult when it comes to something like aesthetics (especially in justifying certain design decisions without getting overly technical), but to simply browse the site freely and explore all of the various UI elements that we’ve added.
One thing, however, that might not be gleamed from quickly browsing through all of the pages is the amount of work and restructuring that occurred under the hood with regards to the Ribcage system, which required quite a bit of labor in order to make the system compatible with all of the various ideas Alex and I had for the design. Just to name a few new features, the site now includes an integrated Events system, a beautifully-designed store for purchasing physical albums, revised indices for the artists and releases pages, and lots of other unnoticeable things like compressed and optimized code, reduced loading time, etc.
To conclude, I’d like to say that it’s been great working for the Records on Ribs team and appreciate their attention to detail and occasional pedantry, without which the final design would surely not have been as great (in my opinion) as it in fact turned out.
Sincerely,
Bryan Klausmeyer
Ivy Street Design
