I always mean to describe our process, but because I’m usually in the middle of another process, that never gets done. So here’s a visual look at the evolution of the design process for the Ruby Hero Award website we redesigned and re-engineered for Envy Labs last Spring.

Phase 1 - Super High Level Doodling

Before we could figure out the proper look and feel of the site we had to pin down how it would look in the broadest possible sense. The core functionality of the app (because that’s actually what it is) is the fact that anyone can submit a website. The core purpose of the site is to honor important contributors to the Ruby community. And the rest of the space has to be dedicated to give a little bit of background to both.

Phase 2 - Putting a Fat Finger on Individual Things (aka “More Detail!”)

All the required elements of the main page (80% of the website) have been tentatively placed. This doesn’t mean they will all stay there, or keep the same proportions. But at least they are all identified and taken into account inside the layout. Some visual refinements have also been done, and I still hold on to the pipe dream of having a distorted panel underneath the page. Oh brother CSS4, where art thou?

Phase 3 - Zooooming In

Taking a closer look at how the interface to submit links will look and realizing the two essential parts of this are going to be default browser chrome elements (bummer), or not. And not realizing the countless hours of pixel fucking I just added this very small (and very fast paced) project.

So you thought that input field was an innocent little buddy, did you? Far from it, autocomplete for existing sites (already submitted by other users) allow you to not create a headache for the moderator of the site by submitting 35 different version of the same website.

Phase 4 - Putting on Some Tights

After showing Tyler my cute (horrendous) little doodles of the Ruby Hero, he gets some time to digest the concept and comes up with this outstanding sketch. Blood pressure raises, high fives are exchanged, the project officially has a face. Never neglect the impact of branding on a project, and on the people working for that project.

Phase 5 - Not Allowing Photoshop to Ruin a Beautiful Comp

Creating an HTML & CSS composition, bypassing an outdated drawing tool that has been hacked for to long to pass as an (unreliable) interface designing tool. It’s not sexy, but it gets the job done. Core markup and CSS layout is done, excessively easy to alter and iterate upon with amazing tools like MacRabbit’s Espresso & CSSEdit.

Phase 6 - Properifying the First Live Comp

A little bit of color in there to set the tone for the color palette of the site. Very bold type testing on the logo to see what works (superheroes, superglyphs), the obligatory rubyfying of the branding. Note flagrant lack of change on the copy layout, and the astounding lack of copywriting work. Terrible idea, kicked my ass later on. Don’t wait for the last minute to make your copy less “happy talk” and wordy. Why? Because at that point everything is sized for that copy. And that means you don’t get to sleep.

Phase 7 - Overzealous Move by the Designer to Create Custom Typeface Because The Budget is Way Too Small to Pay for One

- Olivier: “Hmm, Tyler… you’re sure about this? It’s 35 bucks to buy the font you know, we could swallow that”

- Tyler: “Don’t worry.”

- Olivier: “Alright…”

- Olivier: “I’m sorry I ever doubted you, my Lord.”

Phase 7 - Chopping Copy & Fixing Font

I’ll let that one speak for itself. I’m a little bummed this rendering of the type Tyler created didn’t make it to the final product (it’s a bit more Asian than Comic Book-y). Not that the branding now has a close visual relationship with the purpose of the website explained by the aside in the main body copy. Almost makes it look like we know what we’re doing. Almost…

Phase 8 - “On Phase 8, We Itereight… Get It?”

Whenever you’re done staring at the black hole of attention that is Tyler’s very empty earlobe you will notice that our hero’s spandex suit is getting some well deserved attention. I will spare you the details about his crotch, but if you really want to know, we probably spent a couple of hours on the guy’s package. It’s harder than it looks! (That’s what sh…) 

The result isn’t too shabby. Note if you will the immensely witty placement of the word “COMMIT” on the Gem Avenger’s utility belt. I point it out, not because I fought for it against Tyler who was contending that it was silly when our lovely client turned out to love the little attended-to detail so much he actually pointed it out to a crowd of Ruby developers at RailsConf this year (I-told-you-so-s don’t get any better than this). The less satisfying reason I point this detail out is that this shit matters.

Of course Tyler’s countless hours of tweaking every little crease on the Ruby Hero’s suit matters an enormous deal, but personality matters. I might argue that it matters even more while I’m aware it doesn’t necessarily reflect on ability or the quality of craft. This tiny, almost illegible word is something that differentiates our made-with-love-and-sweat-and-firehouse-subs project from something someone whipped up by stealing an illustration on iStockPhoto and tracing it in Illustrator to pretend they can create something. Of course we all did that at first, but this is client work, and clients are people, they deserve the same attention any human being does. Eventually, things like these are like gestures of kindness you do not because you have to, but because what the hell, it makes you smile and that feels pretty damn good. And it might just be the thing that helps people remember what you did.

Here’s the final version of the branding:

Phase 9 - Putting the CSS3 Gloves On

You’ve probably heard by now that copy matters. I would add that if you’re a designer and you let someone else take care of your copy, you’re lying when you say you’re a web designer. Now that doesn’t mean someone better qualified can’t edit the copy you produce. What I mean is that text is as much a part of your design as that amazingly sexy blue list box on this screenshot. If you’re not bothered by what it says or how it looks, you’re in trouble.

The actual Ruby on Rails app powering the site was by this point almost fully functional which meant that proper testing of the user assistance provided when filling out the URL bar could be done. There could be arguments about this but I believe an action such as nominating a website requires a button. In this paradigm that poses a slight problem since we offer the user several similar actions therefore we are forced to also display several similar buttons atop one another. I agree that this isn’t ideal in the scope of reducing the apparent number of visual choices a user has to make. But it’s worth the tradeoff since, in this case, our users are going to be highly technical people familiar with web apps who are unlikely to be confused by identical-looking actions being offered to them.

The faces of the past years’ Ruby Hero Awards recipient have also appeared on this live comp, emphasized using CSS3 linear gradient background, box-shadow and animation on hover for an unmistakable “polaroid” look. Along with making things pretty, this also is a hint that we are nominating people, not comic book characters. A more subtle background (another CSS3 gradient) has also been added.

Two new views of the app also get some attention. The full form for adding a nomination, and the success page once the form has been submitted.

Phase 10 - Tying Up Design Ends

When someone designs that cool of a logo for your project and the entire thing is a vector file, you have no idea how fun it is to create sight variations of this beautiful branding for a web banner, or better yet a humongous graphic to be displayed on a very poorly lit projector at a renowned national conference.

Phase 11 - Work with Nice and Talented People and Hope your Client Loves It

In this case we think he did, and we even have video to prove it.

That’s it for this production process rundown of the Ruby Hero Awards website for Envy Labs. I hope this was even slightly interesting to you and that it will maybe help you avoid the many mistakes we made on this project. If you take anything from my verbose blabbering, remember that failing is always an option and that it’s not such a big deal as you imagine it to be when you’re struggling. It’s no excuse for reveling in failure, you have to confront it. Remember that your clients are human beings too, so long as you talk to them, they will likely understand, provided you’re not a prick about it.