Design

9 Months of travel icon

Travel

An information graphic showing my personal travel habits from January to September 2010. After sketching with pencil and paper I moved onto a digital sketch and an animatic. After being satisfied with a system several code experiments were created in flash to find and deal with all possible fringe cases. With fringe cases dealt with an xml file containing what I considered home, far I was from home and how many photos I took on any particular day was parsed and visualized using the flash script previously mentioned. Several more experiments ensued to weed out more issues previously undiscovered and to look for the best way to display the data. Upon finding a satisfactory solution, I ported the generated graphic to Illustrator where I applied visual aids and typography to make a pleasing graphic.

A section of an infographic detailing travel
Boston Marathon App icon

Boston Marathon

Created in about three weeks this application tied into the Boston Globe branding of the Boston Marathon while utilizing an under documented alpha version of jQuery Mobile. I specifically did all design and development except pulling in the RSS and Twitter feeds (which I now know how to do). The map integration was originally designed show any queried runner's location but the BAA refused to share information. As a result it was redesigned to show people's geotagged #marathon tweets's locations. Unfortunately, after looking at datasets for the Boston area an insignificant number of users geotagged their tweets so the idea was put aside. The web application was used approximately 76,000 times over the Marathon weekend.

Misinformatoin Design Logo

Misinformation Design

The person who wins is the person who gets closest to cheating. What I mean is that in order to really become good you need to know every facet of the game. Misinformation Design is a talk explaining how people can and do manipulate visual displays of information based on what they want to say whether intentional or not.

Sample of the branding of my Misinformation Design talk
Scooter instrument panel icon

Instrument Pannels

In Asia a very popular mode of transportation (especially in Vietnam) is to travel by scooter. I noticed that the instrument panels on each bike differed. I felt like this was an under appreciated design so I began taking photos, cataloging features and re-illustrating them for a blog

Dolphin Instrument Panel

Development

Icon of a choropleth map showing unemployment

Choropleth

A tutorial on making the same choropleth map in several languages (JavaScript with and without D3, Processing, R and Python). The tutorial is targeted at designers who maybe familiar with one language and are nervous to try another. The talk, if accepted, is for the open vis conference and touches on data accessibility, proper use and abuses of information design. During the talk I will be specifically using Choropleth maps to make a point about the visualization of electoral votes during the past election. You can see where I am in the Python section on Github.

raster render of the above listed coce generating a cholorpleth map of the US
Raster rendering of a CSS Atari logo icon

Atari

This Atari logo got on the front page of Hacker News and CSS Deck received approximately 8,000 views within a day of release. I enjoy looking at identities and figuring how they were made and then recreating them in After Effects or CSS. Code on Github.

User experience

icon *I think* of No2Nox

No2Nox

Working with a team we created a workflow that would allow students to track their progress as well as that of their colleagues.

Motion

screen capture of a remake of the Doll house intro

Doll House Remake

Remake of the Doll House intro. Lit, shot and edited in less than 10 hours. Yes, it's supposed to be creepy. Edited in After Effects.

an Icon of a stuffed animal Larry Lin liked as a child

Larry Lin

A short demonstrating various things that a classmate enjoyed. The only stipulations to this assignment was that it be the 20 seconds, the age of the classmate. Created with C4D and After Effects.