Tag el gaffney

Obama Baton: Pass It On.

Obama Baton

Ahh, so the Obama Baton. As you might know, we went from a 160-line chat to a wireframe, to a live site in under 10 days. I won’t get into the how, but instead into the why.

Seth reached out to me about two weeks ago with an idea: running the NYC marathon with a blue baton to represent his support for Obama. The blue baton (and the act of passing it along to other runners) would be a symbol of the way Obama brings people together.

Seth’s question: what should be done about it online?

The answer? Talk it up. Get people to support. Get people to download the baton image and slap it on their blogs. Get people to buy a button and wear it on their book bags, jerseys, race numbers, and shorts. Get people to watch out for the baton as it goes by on race day.

So now, fair reader, what can you do?

  1. Follow us on twitter, where you can find out when and where the baton will be running every day.
  2. Check us out on Flickr
  3. Buy a button and wear it around to show your support for us, and for the idea that we are stronger when we stick together and run toward a common goal
  4. Help us out by commenting on our site
  5. Join the Chicago team, even if you’re not running
  6. Join the NYC team, again… even if you’re not running
  7. Blog about it!

Thanks, y’all, for reading and offering support.

How to Wireframe


How to Wireframe from Clay Parker Jones on Vimeo.

I kinda love wireframing* things. Mostly because I longed to be an architect while I was younger, and like George Costanza, never became one. This video quickly runs through my process for wireframing the new obamabaton.com site in Microsoft Visio. You’ll hear a LOT more about this project in the days to come, courtesy of El Gaffney and my boys at Hustlewood.

Some tips for a good wireframe:

  1. Use the grid to line things up. I find that the more you fuss over the details, the easier it is to sell to both clients and design teams. Why? It shows that you care. It also shows that you’ve thought about it for more than a few minutes.
  2. Add all the user interface elements you think you’ll need, and then enlist a team of people to help you hack away at them until you’re left with a clean interface. More elements is usually NOT better, while more detail usually is.
  3. Have reasons for why you do things, other than that it is “innovative” or “looks cool”. However, “expected” is also not a reason. Metrics, for one, count as good reasons. As do particular experiences that you may have had elsewhere.
  4. Sketch on a whiteboard first. Then move to paper. Then go play basketball or go for a walk. Poke around on the web for a bit. Then translate to a design/wireframe program of your choice.

Lastly, have fun. I know I did.

* “Crap, what’s a wireframe?” It’s kinda like a blueprint for the design of a website. Have questions? Ask them in the comment area.