Designing, Writing, & Coding 10K Apart

It’s not often that a client comes to us, honestly excited to start work on a project. Unless it’s Nishant Kothary, our friend and previous client for a number of projects, who asked us to design the 10K Apart Contest website. This would involve re-working our earlier design for the successful MIX10K contest that ran earlier this year—but this time, in cooperation with An Event Apart.

Microsoft is readying for Internet Explorer 9, a major browser release that’s shipping with very rich support for web standards. To celebrate the launch, this contest—called 10K Apart—will challenge web developers and designers to come up with creative micro-apps using just 10 kilobytes as well as HTML5, web standards, and popular JS libraries.

Our challenge was to design, write, and code the website in a succinct, nearly single-page design that elegantly meshes the iconic A List Apart / An Event Apart brand with the design work we’d done for MIX Online. I’d have to make sure my front-end code was elegant HTML5. We also had to do all this—design, web copy, HTML5 code—in roughly 3 weeks. How could we say no?

Extending Branding

This was by far the most worrisome aspect of the project—how do I take Jason Santa Maria‘s awesome identity / art direction work from A List Apart and extend it to this site, without making it ham-fisted? It’s such an elegant brand, I figured the best way to do it would involve a simple and tasteful presentation. I took the lovely ALA wreath vectors and set them next to our chosen type face for the project, Jos Buivenga‘s excellent Calluna.

The Design

I was happy with the modern look I’d done on the previous MIX10K site, but I knew that style would clash with the ALA look we wanted to achieve. Instead, I expanded on the somewhat retro/antique illustration look we’d done for MIX Online, but went bolder with it, angling for a more humorous and rich look.

I used a rough, textured background, made all the large illustrations push past the page bounds, and set the ‘AEA wreath’ as a large background element at the top of the page. To keep the information easy to scan and find against this illustration work, I went with simple dark lines and boxes. Calluna, delivered via @font-face, ties the room together, so to speak.

Fun With Forms and Web Copy

One element of the site we had a lot of fun with was the contact form. Just a simple little illustration and some clever copy throughout (courtesy of the lovely @ticjones), really makes entering an app feel fun (as fun as it can be). Helpful and friendly copy always saves the day.

Here’s how it all came together:

And with that, go forth and enter! Visit 10k.aneventapart.com and enter an app.