Dan Parham

Chris Reardon and I worked closely on the overall product design philosophy. We eventually removed quite a bit of product strategy specific to the Music redesign from this document in the interest of keeping its purpose focused on the platform visual design system.

The grid philosophy articulated by Chris and Pablo. I was just the internal salesman !

The foundation of the problem : advertising standard sizes and our key media type : in page video.

Thanks to Peter's oversight, we were able to enforce a new set of standard photo sizes across the network that worked perfectly within the grid. Note that the 10 pixels of padding were subtracted from each horizontal edge of all photos. Once we started designing individual templates, this solution was the most logical.

Highest level of content layout. As simple as this pattern is, we returned to it time and time again with regards to requests from the business to add content or utilities to the design. We consistently asked "What can we take away ?" from the ui in the effort to keep the pages light, simple, and clear.

There are some flaws in the 18 mc approach - in the cases of uneven divisions, we reverted to our basic unit of 10 pixels for padding and gutters.

High level search results, tag results, or information table pattern.

High level pattern for video, given different video player sizes across the network.

As we applied the system across the music site, we simplified padding and guttering to a consistent 10 pixels, which made our rockstar CSS developer, Greg Tomlinson, quite happy.

One of the challenges to creating a typographic system for a dynamic platform is establishing a page-level baseline for type. Given the variance in functionality of many of the modules, we discovered that following this principal from classic print based grids was not scalable to the web.