Portfolio
Records on Ribs
Like most websites I design, this project began in Adobe Photoshop rather than HTML & CSS. The client initially 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 the 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, while also allowing for the two sides of the site to communicate with one another. 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). Those removed much of the visual clutter as 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 the grid system is an important design heuristic. 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 for XHTML and CSS was also crucial, and I believe we 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 various pages is the amount of work and restructuring that occurred behind the scenes, especially 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 redesign. 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 stuff like compressed and optimized code, reduced loading time, etc.