A few words from Ashley Wells, our Creative Director:
So we’ve stacked up the pieces with the most compelling content on top. Start with a video. Scroll down to read. Want more? Show more. Long text simply expands in place. Then scroll down for photos. Lots of large photos. Share your favorite. Via e-mail. On Facebook. On Twitter. Continue down the page. See what others are saying. Expand. Respond.
Keep going. We post thousands of updates a day and are constantly searching them for related angles. It’s all right there near the bottom of every story. Want the bigger picture? There’s a dashboard view of the latest news trends below. Or jump back to the top of the page. Our site navigation gets bigger, too. Just when you need it.
Read the rest of the article here
Click image to view the graphic
This is another informative msnbc.com infographics about the oil spill created by Clay Frost, our talented designer, together with Ashley Zammitt, our new design intern from University of North Carolina, my Alma Mater. We are currently seven UNC graduates working in the creative department at msnbc.com. I know what you are thinking, but no, there is no connection here 
.
The graphic shows how the oil is degrading over time through chemical and physical processes in nature. Each process affects the oil differently at various time. So if we do nothing, the Mother Nature should “practically” take care of everything, right? What scares me about this is now I see where the oil is going. >:|
View the interactive infographic
Click on image to view the graphic
Click on image to view the graphic
The first graphic puts things in perspective by showing us a sense of scale. At its current rate, the leak pumps out enough oil to fill a third of an olympic-size swimming pool every day. The second graphic is a timeline map showing the spread in the Gulf as of May 20th.
I didn’t work on these since I was busy working on other projects, but I think Clay Frost, our infographics designers, did a great job creating these and keeping them up to date.
Click on image to see full size
Last year I went offline for a few months to work on a couple of personal projects and an iPhone app for msnbc.com. About a year later and after the iPhone project fell through, I was asked to design a new msnbc.com mobile version. The target audience is people who own devices that have Webkit-based browsers such as iPhone and Google Android phones. The project was a huge undertaking especially for an inexperienced web designer like myself. For people who don’t know me, I am more of a data visualization person than a web design person. I have designed and launched a few successful brochure websites, but have never worked on a large scale one like msnbc.com. Given that most other large news organizations have released their websites for these devices, we wanted to challenge ourselves to do something better.
Continue reading »
Click on image to view the map
Update Feb 24, 2010: I just learned that this piece won a Best in Business award for creative use of online media from Society of American Business Editors and Writers. I want to thank all the participants who made this project possible. Cheers!
The Adversity Index, from msnbc.com and Moody’s Economy.com, measures the economic health of 381 metro areas and all 50 states. Each area is in recession, at risk, recovering or expanding. On this map you can explore changes in the four components of the index: employment, housing starts, housing prices and industrial production, each shown as a percentage change from a year earlier.
This map contains more than 350,000 data points. It was a challenge because we didn’t have appropriate database tools to support the map. We had to split the data set into five big chunks and merged them in Flash. I wrote a tool that allow loading data from different subsets and merged them into one data structure that was plotted on the map.
Click here to view the map
Awards and honors
2010 – Best in business from Society of American Business Editors and Writers
Click on image to view the map
We learned and utilized many new technologies in this project. Unlike the Adversity index map where we didn’t have proper server-side tool to handle big data set and we had to use hacks, this project uses a brand new server-side tool to do the heavy lifting.
We built the server-side code using Django framework. This is the first time we are using this framework and it is awesome. It makes my life as a web developer much easier, especially when I was completely new to it.
For this project, we built a framework in AS3 that allows flash to communicate with the server and to make requests in real time. The framework makes it easy to parse responses from the server and deliver them to different parts of the application. With that, we are able to support deep linking, back button and breadcrumb.
Last but not least important is the new map engine I built recently. There are two parts to this. The first part is the script I wrote that runs through any ESRI shape file and parses it to native AS3 code. The second part is the engine that takes the code and renders it on the screen. With this engine, we can create pretty much any kind of maps quickly and efficiently.
View the tracker
Click on image to view the map
I am particularly proud of the world map because we managed to create it from scratch in a day. Even better, I designed the code so that we could reuse the map again without any extra development time. That means editors can just plug in a new data set and the map is ready to go.
View the world map
View the U.S. map
A List Apart
AIGA
Alberto Cairo
Andre Michelle
AS3 Design Patterns blog
Data Mining blog
Flowing Data
Information Aesthetics
Innovative Interactivity
Interactive Narratives
Mark Boulton
News Designer
Stamen design
Subtraction by Khoi Vinh
Typographica
Visual Complexity
Yanko Design