2013 Visual Branding: Finals

It's been a few months since the previous visual branding post, and since I've been looking at branding 2014, I thought I'd get this out of the way.

Visual design for finals didn't start until after quals; we were too busy panicking to get that put together and working to even consider panicking and putting finals together. I decided to not only stick with the Japanese game show theme, but also recycle most of the assets (the strawberry linen texture, the specific pinks and yellows, the stripe texture). This saved a surprising amount of time.

My original vision was a two-pane scoreboard at angles to each other, with teams on one fold and score data on another. Scores would be visually graphed as well as numbered, possibly with little graphs representing how that score was derived; this was before I remembered discussions from the beginning about zero-sum scoring, and we had more than one metric to graph.

Behind the two panes. we'd have two linen layers at right angles to each other, moving in opposite directions to produce a weird effect. Additionally, the scoreboard would have a scrolling floor beneath it and at an angle to the camera to look like you were constantly moving towards the scoreboard. Finally, the two panes would wave back and forth, as if blown by a breeze.

The big constraint was making the scoreboard fit both on the ridiculous monitors competitors bring (there was more than one Apple Thunderbolt Display on the floor), and also on the projectors DEF CON would graciously provide. I went responsive, with setpoints usable on both 1024x768 (typical projector) and sizes bigger than 1366x768 (11" MacBook Air).

I also set up two information screens for competitors.  First was a "How To Play" screen with rules and high-level instructions. What teams used most was the "Dashboard" that had basic SLA information, a flag submission form, an example command line to submit flags with curl (get on my level), and how to use the flag submission responses. Both of these screens were also in the two-pane style, but with different divisions between the panes, and not waving.

I got this all built out (with very little iteration due to time constraints), and took it to Vegas. When I first set foot in the room, it had already been mostly set up by Selir, Jymbolya, and Duchess, so all I had to do was get the scoreboard on the network and the scoreboard system on the network and projector.

This exposed a couple issues though: the projectors were only 800x600, and the color accuracy wasn't going to show the background texture at all, let alone the subtle crossed-scrolling effect. I made a new, even smaller 800x600 setpoint for the scoreboard, and got it mostly visible, with the exception of the timers being wonky. I removed one of the background layers, but didn't want to remove both of them because I'd still enjoy having them there.

After the first day, I was regretting the decision to not auto-update the scoreboard, so I added a meta refresh tag on the scoreboard. This could've been done with AJAX, but doing it in time with the background cycle and over a LAN meant that the reload flash wasn't too bad. Also after the first day, we removed the broken "you got owned" indicator from the SLA because, in Gyno's words, "we're not your fucking IDS."

Finals Statistics

Lines of Sass317
Bytes of minified CSS9829
CSS "float" declarations10
Inline style attributes1, for sizing the score bars
Favorite CSS declaration"width"