= Design + Software + The Rest

All Posts about Design

TRUE Made: An NCAA Tournament Bracket

This is the only time during the year when I care about College Basketball. I’m drawn in by the possibility of upsets, of David getting a shot at Goliath. But more than that, I’m drawn in by the bracket.

Growing up I spent lots of time around wrestling and football tournaments, both as a spectator and as an athlete. At wrestling tournaments the champion takes home a medal and the big poster-board size bracket. I never won a wrestling tournament, but if I had (insert Uncle Rico joke here) I doubt that the medal would have meant as much to me as the bracket. The medal is abstract because it only represents the final result, where the bracket is specific because it represents a complete history of the tournament experience by including the names and final scores of every opponent.

I’m also really into bracket design. I like how the precision and order of a bracket layout collides with the utter chaos that ensues as a tournament unfolds. As a kid I would hand-draw video game tournament brackets for my friends, and a couple years ago I got the chance to design a bracket for a sports social network.

TRUE Made: An NCAA Tournament Bracket

We worked really hard to make our bracket design:

Fast to fill out – our entire bracket fits on a single 1024×768 screen so there’s no paging or scrolling. Also, a site visitor doesn’t need to log in before making selections – this makes it easier to convert new visitors into site members.

Visually interesting – we gave our bracket a hardwood background and, like the key and sidelines of a basketball court, we used different wood colors to distinguish between areas of the page (branding, navigation, scores, prizes, tournament round titles, bracket).

Easy to interpret - there was quite a bit of debate on this point. When designing a bracket, you need to provide visual states that answer the following:

  • Before a game’s result is known – which team was picked?
  • Before a game’s result is known – which team was not picked?
  • After a game’s result is known – was the pick correct or incorrect?
  • For the next round – is one of the teams in the matchup already eliminated from the tournament (ie. incorrect pick from the previous round)?

My position was that the MOST important thing with a bracket is to answer the question, “How may correct vs. incorrect picks did I have this round?” So, the first design of the bracket used color cues and icons to give a site member an immediate, qualitative sense of how well he/she did in a given round:

TRUE Made: An NCAA Tournament Bracket

  • Gold with an Arrow Icon: before a game’s result is known, team that was picked.
  • Beige with No Icon: before a game’s result is known, team that was not picked.
  • Green with a Checkmark Icon: after a game’s result is known, the pick was correct.
  • Red with an X Icon: after a game’s result is known, the pick was incorrect.
  • Beige or Gold with a Strikethrough: the team in the matchup was eliminated in a previous round.

Our client didn’t like the use of color to emphasize correct vs. incorrect picks, so we went with this approach:

TRUE Made: An NCAA Tournament Bracket

  • Gold with an Arrow Icon: before a game’s result is known, team that was picked.
  • Beige with No Icon: before a game’s result is known, team that was not picked.
  • Gold with a Checkmark Icon: after a game’s result is known, the pick was correct.
  • Gold with a Strikethrough: after a game’s result is known, the pick was incorrect.
  • Beige or Gold with a Strikethrough: the team in the matchup was eliminated in a previous round.

What we ended up with was fine, but I was a little disappointed; my biggest complaint about the brackets I’ve used at ESPN and CBS Sportsline over the years is that they don’t make it easy/fast enough to get the info I care about the most – for a given round, did I get my picks mostly right or mostly wrong? I thought our solution with solid, bold colors and icons provided the clarity that the Worldwide Leader and others were missing.

Army Football: Digital Camouflage Uniforms by Nike

Army Football: Nike Digital Camouflage Uniforms

During today’s Army/Navy football game, Nike unveiled new uniforms for both teams. The new designs boast the latest performance fabrics, construction advancements, and careful application of design features that are symbolic of each of the academies. You can read about the details on the Army athletics web site.

Army was beaten badly by Navy, but they looked great doing it. Nike designers used a digital print camouflage pattern on helmets, pants and jersey numbers. They’ve done some horrible and not so horrible things with Oregon’s uniforms, but this Army uniform design is easily Nike’s coolest looking gridiron design experiment yet.

Army Football: Nike Digital Camouflage Uniforms

New NFL Logo

New NFL Logo

This is old news, but I talk to enough people who don’t realize that the NFL updated its shield logo this season that I figured it was still worth posting. This was really more of a refresh than a redesign:

  • The football symbol was redrawn to look like the football that sits atop the Vince Lombardi (Super Bowl) Trophy.
  • The number of stars was reduced from the arbitrary 25 to 8, one each to represent the combined 4 NFC and 4 AFC divisions. Apparently there were official apparel licensees who were reducing the number of stars to keep the logo from becoming a mess when embroidered and silkscreened at small sizes.
  • The antique serifs on the “NFL” type were replaced with stronger, chiseled serifs. The white space around the type was also increased; both of these modifications were designed to make the logo easier to read.

We do a fair share of logo refresh (or “Brand Aid”) design work, which is a great alternative to designing a new logo because it lets you retain any brand recognition you’ve established while improving any aesthetic and/or practical shortcomings of your existing logo.

The information and image above are from this USA today article:

www.usatoday.com/sports/football/nfl/2007-08-30-shield-change_N.htm

Another Uniform Design for Oregon Ducks Football

A couple of years ago the University of Oregon football team unveiled a new array of uniform options. While I wasn’t a big fan of the uniform designs, I loved the idea of including multiple helmet options (and jersey and pant colors) instead of the traditional (and limited) home and away jersey variations.

I haven’t seen much coverage of this online, but during last weekend’s ESPN’s College Football Final highlights show I caught a glimpse of the latest design collaboration between Oregon and their close friends at Nike.

I love the flat black helmet color (which, like the head of a Mallard, has a slight hint of green in certain lighting conditions), and think that the silver duck wing design on the shoulder pads is wild but way better than the ugly diamond plate pattern on the other jerseys.

Another Uni Design for Oregon Ducks Football

Another Uni Design for Oregon Ducks Football

Make an iPhone Icon for your Web Site

(or the Self-Indulgence Activity of the Week)TRUE iPhone icon

You can add this to the list of things I’ve done that only I will appreciate…

Ever since I purchased my iPhone one year ago I’ve been meaning to make a custom iPhone icon so that when I bookmark our web site on my home screen I’ll see a nicely rendered TRUE logo instead of an ugly scaled down screenshot. Total number of iPhone users with a home screen bookmark for our web site now = 1.

There are plenty of sources online for learning how to do this, but I’m providing a link to the only well-designed (fantastic, actually) source that I saw: Playground Blues.

You can also go directly to Apple for the how-to, but you’ll miss out on all the nerdy comment hilarity at the site above.

To satisfy my curiosity as to whether there are any iPhone users who read our blog (other than Mike 3), I’ll design an iPhone icon for the first web site owner that emails me a digital photo of an iPhone home screen that shows a bookmark for the TRUE web site (no, sending me the screenshot above does not count). And Mike 3, if I don’t have an email from someone else by end of day this Saturday (September 27) the icon is yours.