One of the first things I did when starting at CBS News was to establish a set of Sketch library files for my own use, and to share with my colleagues in case they found them helpful. I had become fluent in the app Sketch in my prior role at The Bump / XO Group. I took to it quite naturally as a replacement for Fireworks, which Adobe had essentially abandoned at the time.
To suit my purposes in my particular role, I established five files, named Web, App, OTT, Brand, and Utility.
- Web: components (for example: nav, footer, ad placeholders, etc.), variables (such as border thickness, color themes, etc.), and styles (text and color)
- App: the same, but for any iOS or Android projects I worked on. I retired this file, before migrating from Sketch to Figma.
- OTT: the same, but for OTT/CTV projects. I retired this file, before migrating from Sketch to Figma.
- Brand: CBS News logos (standardized to compound vector shapes at 100px wide), brand colors (as variables and as layer styles) and gradients (as layer styles). There were an extraordinary number of CBS News brands -- dozens and dozens -- and I was required to keep on top of frequent rebrandings
- Utility: anything else I needed, for file organization or wireframing
Below are screenshots from two of the Sketch libraries I maintained earlier in my time at CBS News, but eventually retired:
In the early days, I also maintained an extensive style guide, created in Sketch (supported by the aforementioned libraries) and hosted on Invision.
A side project I tinkered with off-and-on was a web-based version of this style guide. The idea was that it would be more future-proof and developer-friendly than the Invision version. But I set it aside, as it wasn't an official project, and I didn't have sufficient time to dedicate to it.
When CBS News (and the industry as a whole) later adopted Figma, I migrated my files to Figma equivalents. Below is an overview screenshot of my Figma library specifically dedicated to web:
Below is a simplified look at some of the nav components. These may not look like much, but are the end result of an epic process of completely redesigning News' complex web navigation, described in detail in this case study.
Later in my time at CBS News, my team was merged with the much larger CBS Sports team, which had a dedicated design systems group. I continued to need most of my personal libraries, but was able to leverage their color and spacing libraries, deprecating my equivalents. Below is an example of my CBS News web color patterns that I was able to deprecate:
Two of my last projects at CBS News were to redesign the article template and the homepage. As part of these projects, I was developing a set of text styles, following the naming convention established by the CBS Design Systems team (Headings, Detail, Action, and Body), but specifically for News web.
At the beginning of my time at CBS News, I quickly learned that I would need quick access to logos and colors for its many brands (60 Minutes, 48 Hours, etc.). I established a Sketch library file for myself, and updated it whenever new or rebranded properties were introduced, and eventually migrated it to Figma. Below is the state of the file at the end of my time at CBS News.
One of my biggest difficulties at CBS News was dealing with a widely disparate set of logos, nearly all of which were created for broadcast, with little consideration for web and apps, or to co-exist with each other. I often flashed back to my time at Warner Bros., when I struggled to find ways to use Scooby-Doo, Batman, and Harry Potter logos in a harmonious way.
As part of a project to redesign the CBS News article template, I proposed creating a new set of "mini" horizontally-oriented logos for every CBS News property. As much as possible, these would be need to be legible at very small sizes, while taking up a minimum of horizontal space. Below is the result, with each logo normalized to 10px tall. Some of the differences are subtle, but you may notice that some of the brands I most reworked were CBS Evening News, 60 Minutes Overtime, and The Takeout.
Having these new logo variations approved for use by CBS News was a major feat. I created an SVG sprite file for handoff to engineering. A complication was one brand required two colors, meaning it needed to be an exception in the sprite file. It was the only one with more than one compound vector shape, and with hard-coded hex values.
