Fl.ower.

As some of you know I got the chance to work with the super joyful people of Happy Cog on their project for Ma.gnolia, that keen social bookmarking application that more and more people are using. With every large project there is a lot of unseen work that gets left behind in archived folders, Basecamp projects, and as attachments to old email threads. Most of which is never to be seen again, just saved as bits for posterity.

I have been granted a special opportunity which I think you will all enjoy (no, I did not turn down a job at Apple but I did get a job description sent my way. Apparently when Moll said "no" it sent Cupertino into a mild panic. And no, I don't know that for sure but I can read between the lines). Ma.gnolia and Happy Cog have agreed to let me show you the designs that didn't make the final cut and talk a little about the process. It's not every day that a client agrees to talking about things that were behind-the-scenes so I hope you'll enjoy this as much as we had fun making it (yes, we did have fun, the folks at Ma.gnolia were a breeze to work with, at least during the phase when I was involved).

Last October I was brought in to design the look and feel for the application shortly after Tanya Rabourn finished wireframing every template/page of the website. Every. Page. This was a bonus for me as I've never worked with anyone who took the time to go through a complete round of information architecture, it sure made my work a lot easier.

I had already worked with the client at the end of September to create a temporary website to help promote the product while it was in some kind of greek-lettered state. At the time visual direction was sparse as the people at Ma.gnolia were hard at work developing the software but they did have this fantastic logo created by Jason Santa Maria. And so I set off, inspired by Jason's work, to create a design that would do everything in its power to compliment and showcase the public unveiling of the new brand.

Thanks to the help of code-warrior Ryan Irelan, I was able to flip the jolly green site within a week. It was a fun project and it served me well as Zeldman, upon seeing the site, asked me to come on-board and design the "real thing".

Figure 0 — TEMPORARY SITE

The plan for designing the full application — the "real thing" — was to go from three designs down to finished Photoshop comps that would be handed over to Eric Meyer for coding. Three weeks, three design rounds. I have to admit I was skeptical at first. Similar projects to this scale jump out of their milestones with feature creep and decision trees that bend with the wind and my workload was already more than full but how often do I get the chance to work with Happy Cog?

Damn the torpedoes! Full speed ahead!

Ma.gnolia wanted to create a social bookmarking application that would appeal to everyone, not just young guys who are hip and into the social software scene, yet they wanted it to be clean and free of too many eye-candy elements. I took that to mean the site should not look like a man-tool while feeling clean, comfortable and hopefully inviting.

For the first comp my instructions were to continue the look and feel of the temporary site. Considering that design was created to hold short brochure-ware content for only a month, maybe two, I thought the design made for a nice fit on the full-scale application. It looked great but I had some reservations. Did it look different from other, similar types of websites out there: yes. Was it way too green to be used on a regular basis: probably so. Would it work better for an apple martini product site: most definitely.

Figure 1 — APPLE SOUR

Wanting to depart from the apple-sour look I went the other way with the second comp, enlisting the help of a few earth tones — nothing brings a project back down to Earth like a good neutral palette. Some of the elements of the first design were dropped in favor of gradients to give the client an different approach (normally when presented with three comps a client will pick and chose the elements they like across all three and then these things are married together in the second round of design). I liked this version a lot, as did Happy Cog, and a few of us thought this was it, the version that would be used for the application. I think in hindsight we might have liked it mostly because it wasn't day-glo green.

Figure 2 — CONTEMPORARY EARTH

By the time I launched Photoshop to begin working on the last design I was pushing a little burn-out having worked many, many twelve hour days for about a month straight (that's the glamorous life for the self-employed kids) but after a quick chat with the foreman I was re-engergized and ready to go. This time I started off with white. It is a great color (or absence of color), easy to read off of, it's clean, and helps launch anything non-white off the page. I also wanted to get away from the gradients and bring in some nice rules and boxes, serif type instead of sans.

The result was a cleaner, more sophisticated look that stood on its own while borrowing colors from the first two. Gradients are good and fun when used once and a while but there is a reason the drop-shadow fad fell from grace earlier in the decade. Object lesson: clean rules and boxes will beat overly designed shady backgrounds gradient fills every time. I bet Roger Black has said something similar but I don't know the guy well enough to quote him.

Figure 3 — JUST RIGHT

After I was done with the third comp I knew that it had to be the one. Not an amalgam of the three, just this one. I wanted to go back and delete my prior design work and blame it on a random dog or computer crash. Unfortunately Jeffrey didn't buy the dog story and I had already uploaded the files to Basecamp so crashing my computer wouldn't do any good.

A few moons passed when word from the client arrived and I braced for the worst. Amazingly they liked all three designs equally and didn't know which one to pick as being their favorite nor were they interested in picking any of them apart (when does that ever happen?!). Jeffery was able to work them over, I mean worked with the client to chose the right design — the one you have all come to know as today's Ma.gnolia.

The next two weeks were spent carving, sanding, painting, and moving things around until we had them in the right order. We elected to use Dan Cederholm's Chameleon icons because they worked well with the product and there really wasn't enough time to roll our own and with all the great choices out there now, there had better be a pretty compelling reason for going to the trouble of creating custom icons. Eric finished the XHTML/CSS in the shortest time I would have thought humanly possible making me wonder if he can talk to the code and make it move for him. A little more than a month later the site went live and open to the public.

The three weeks allocated for the design phase went by in a hurry but every milestone was met and the client was pleased with the work all along the way. It was a real pleasure working my friends at Happy Cog and the good folks at Ma.gnolia — it is so easy to get work done with those good people.