jim-nielsen.com/blog

Team Color Codes

Posted on   ·   Tagged in #designProcess

Update: Team Colors 2.0 is out! You can see it live at it’s original url teamcolors.ar90.com or read the blog post about it “Team Colors 2.0”.

I recently participated in the Arc90 Hackathon. I originally volunteered for a different project as part of a team, but due to scheduling conflicts my team disbanded. I was left with the option to work on a solo project, which resulted in [Team Colors][http://teamcolors.arc90.com/]: a single-page website that serves as a reference for HEX values for professional sport teams:

Screenshot of Team Colors, an Arc90 Hackathon Project

Unfortunately, the Hackathon took place while I was absent from the office (travelling to Utah for the Christmas break). So a lot of my work was done on a plane and working from home. I started Team Colors by sketching out some ideas for the page hierarchy and navigation:

Sketch of Team Colors

After thinking through and sketching out how to present each team and its corresponding brand colors in a responsive manner, I turned to writing some pseudocode that would power the interaction of the site:

Pseudocode for Team Colors

Once I got everything down on paper, the fun part of building began. The hardest part was finding the actual HEX values for each team. There were some obscure, outdated forum posts scattered across the web. In the end Wikipedia was my best reference, although it did not provide the brand colors in the user interface. I found them in the underlying HTML/CSS using Chrome developer tools.

Technical Overview

Here’s a quick overview of the technology used:

Don’t Forget

You can view Team Colors here. Don’t forget to checkout some of the other amazing Arc90 Hackathon projects, or read about the hackathon.