all the design work fit to show.
I recently had an opportunity to design a FAQ section for Scripted, a service that pairs writers with people who need writing. The ask was for a very colorful, interactive, compact design that would slip right into the site’s Bootstrapped framework. There was also a need to categorize the various questions under different parts of Scripted’s service. The site’s existing color palette came into play and allowed for color-coding of the different question/answer pairs.
One of CNN.com’s major initiatives is severe weather tracking, particularly during hurricane season in the United States. One of my tasks from the start at the company was to redesign and rebuild a hurricane tracker. For 2008, 2009 and 2010, this meant rebuilding from scratch as requirements and the availability of data changed.
The tracker has remained largely as it was in 2010, with minor changes to the visual design and some small updates to the Flash codebase. There is also now an iOS-friendly version built by one of CNN’s developers.
Remember when Boeing’s 787 Dreamliner was getting ready to return to flight after a slew of technical issues? CNN wanted to run a visual breakdown of what was so different — and challenging — about the new airplane.
This is effectively a traced composite of Boeing promotional materials, so that the graphic would adhere to CNN’s visual style and minimize visual clutter. The whitespace is deliberate — it allows the highlighted areas of each diagram to jump off the field.
This was my very last project at CNN. It was a great one to go out on: I had to do it very quickly, under pressure, while working with some amazing people.
Asteroids, meteors, comets, and meteorites are sometimes used interchangeably. With all the space rocks that seem to be taking aim at Earth lately, it seemed that a graphic explaining the differences among them was called for.
One of the major constraints on CNN.com is the width of the image area on the template — 640 pixels. Height, however, is not a concern, so I made use of vertical space and laid out the information in terms of altitude, top to bottom.
One of CNN.com’s writers needed art for his Rules of the Internet story and asked for a simple type treatment of the rules. Originally, the intent was to illustrate each rule, but for the sake of visual clarity the illustrations were eliminated.
Color and font choices were dictated by CNN’s digital style guide and a need for multiple font weights: the orange gradient is part of a new color palette and speaks to the Tech section’s look and feel. The font is Gotham, which is the only font in the style guide with the variety of weights necessary for these graphics.
Latino in America is a CNN.com franchise that’s run for several years. This graphic was designed and executed at the request of the LIA blog producers, who wished to shed light on the reality of being Latino in America.
This graphic ran on CNN.com during NY Fashion Week. It required working closely with both a writer as well as a CNN Library researcher in order to compile the data and select the information that best tells the story, and went through several rounds of revision.
BorderStories was produced by a team of four people over about three months. I was responsible for building the site, which included building the Flash players, maintaining the WordPress backend, and creating the core of the branding.
Because of the bootstrapped nature of the documentary, everyone on the team played multiple roles, which meant that I also had opportunities to shoot video, do research, and translate between English and Spanish.
I have big dreams of turning the site over into full HTML5 so that it places nice on more devices, especially since we still get feedback that the content is in use in classrooms around the world. One day!
The 2010 Haiti earthquake left a ripple of devastation around the world, but the personal stories that emerged from the devastation were both poignant and inspiring.
This was designed by a teammate, and I built the final product in Flash. It was my responsibility to make sure all the functionality was in place and working properly.
After the Haiti earthquake in 2010, CNN.com struggled with how to best quickly display the reams of data we had for quakes and aftershocks, relief locations, casualties and damage.
We created these maps by leveraging KML files and the Google Maps for Flash API along with an HTML shell to house them in.