Designing Area51

by Jin, 08-26-10 // 12 comments

A Little History

In the past two and half years, Stackoverflow, the programming Q&A site Jeff Atwood and Joel Spolsky created has become the de facto place to go for quality answers. The success of Stackoverflow has spawned two other tech Q&A sites, Serverfault.com and Superuser.com. Jeff and company tried to host the Stackoverflow engine to allow anyone to create their own Q&A site for a fee, under the Stack Exchange white label. However it didn’t quite work out the way it was intended. As Joel later wrote:

We tried making our software available as a hosted white label product called Stack Exchange. We thought that other people would create awesome sites on every imaginable topic. Some people did (yay!), but it wasn’t the flood of high quality sites we were hoping for.

Essentially, we decided that Stack Exchange was failing because:

  • Only people with money to burn or a business plan could create sites.
  • Those people didn’t necessarily have the ability to bring an audience.

In other words, it was simultaneously too easy and too hard to create a new, working Stack Exchange site.

If you are the type who keeps up with tech news, you probably heard that back in May StackOverflow raised six million dollars from a group of VC investors. This funding not only allowed the company to provide the service for free, but also to set up a filtering system for quality Q&A site proposals to be launched. You can read Joel’s post on how the new Stack Exchange system works.

Area51

A few months ago while I still worked at my old job at the FCC, I started to become more involved in my freelance work for Jeff. One night, he sent me a URL to a development server and told me to take a look at it. Below is what I saw (note: at the time the content was different).

“What is this… Area51?” I asked. Jeff told me it’s the staging site where people can propose new Stack Exchange 2.0 Q&A ideas. If the proposals gain enough audience and support, then they’ll be launched as beta sites. “We took care of the back-end functionalities. Can you design a new look for it? And design it fast.” Jeff stressed the “fast” part.

Design Process

I spent the next 30 minutes staring at the existing design. Jeff told me Joel had commissioned the talented illustrator Terry Colon for the art work on the site. I never designed a site based on someone else’s art work before. This was a first for me. Looking at the whimsical nature of Terry’s art, I quickly got the message that Joel wanted the site to have a light hearted feel. It made sense to me since the new site should appeal to all audiences, not just techies. However designing the rest of the site around the two banners was a challenge. For one, I’m not a great illustrator. I can’t add much new graphic art that matches Terry’s style. Secondly, the banners themselves already drew way too much attention, and were dominating the rest of the site. Also, I felt they looked more like Ad banners the way they were positioned.

Instead of designing around the banners, I decided to make the entire site have the feeling that was contained within the banners. This way, I could break up the individual aliens and spaceships and use them throughout the site. The idea the banners conveyed was ships being launched, a metaphor for launching new sites. I decided to take the metaphor further: how about we launch to the moon? Terry already had a starry night sky in his art work. I felt it was the perfect background to use for the site. So the header would be the moonlit sky, the footer area the ground and everything in-between the site content. Not only this would serve the theme of the site, but also the design elements would gently fade in the background instead of being obtrusive.

I always pick the color palette first before I start designing the specifics. To me colors are the most important elements because they’re what the brain interprets first. The appropriate colors are responsible for the type of emotion you want to evoke. Luckily for me, I didn’t have to spend too much effort picking the right colors. I used the colors from Terry’s artwork.

For the typeface choice, I wanted something bold and loud for the proposal titles on the homepage because they’re the most important text. Also such a typeface would provide a balance to the “cuteness” of the graphical arts. After a few tries, I decided to go with the web-safe font Impact. iPad doesn’t support Impact, so I used “Futura-CondensedExtraBold” for fallback.

Result

After a few hours of pixel pushing, I was pleased with the overall look. I felt the design accomplished the goal of providing a whimsical mood and emphasized the right elements. In the next few days I collaborated with David and Emmett, the super talented Stack Overflow NYC programmers to implement the design. Area51 was launched in early June.

The screenshots above are taken from the live site. Since the first draft of the initial design, we have tweaked a lot of the UI elements. Not just how they look, but also how they behave.

Since the site went live, about 1,000 proposals have been created by the public and the site itself has been well received. Many of the proposals have been launched as beta sites. Area51 is one of the most fun and rewarding sites I’ve worked on. Design-wise it was a challenge since this kind of design isn’t my typical style. I’m very thrilled the site is being used by 12,000 registered users to create useful Q&A sites. You can see all the new beta sites at Stackexchange.com.

Here are some of my favorite Q&A sites, check them out!

Blooper

Here’s one of the initial design concepts I canned. As you can see, it suffered from “over design.”

12 comments

also feel free to contact me on twitter or via email
David Lantner 08-26-10

Best use of Impact I’ve seen in a long while. It looked fresh yet familiar at the same time. Well done!

Jad Limcaco 08-26-10

Nice to read your thoughts and learn more about your design process Jin!

Will 08-26-10

Whimsical is definitely the right term for this design. The cartoon illustration trend continues! It certainly works for this site and who it is targeting but I wonder when it will end. It really reminds me of the “robotech” flash design trends of the late ’90′s.

That said, you did a hell of a job incorporating the illustrations into a whole design with a terrific colour-scheme and font selection. The moon header pushes the eyes down to the content without being obnoxious and the UFO balances out the Area51 logo.

Great job, Jin!

BTW have you ever checked out meomi.com? They’re the super talented and productive designers/illustrators whose most widely known creations would be the Vancouver 2010 mascots. Play around with their site for a bit and tell me that is not the absolute definition of “whimsy”!

Question: Back to the illustration trend… what are your thoughts on it and how much longer do you think it will last? It seems to have really started about 8 years ago in Japan and is peaking right now, IMO.

Jin 08-26-10

@David, thanks! I think it worked out well, at first I was a bit concerned about readability.

@Jad, thanks!

@Will, thanks for sharing meomi.com. I haven’t heard about them before. Their style is lovely.

Re: illustration trend, to be honest when I was designing the site I didn’t think what I was doing was “trendy.” Terry has been doing web illustration work since the mid 90s. You can see his past work on suck.com. Even for illustration, I consider his work as “timeless.” He has a unique style, plus the subject matter of Area51(aliens, tobots and spaceships) is something that will never get old IMO.

Janko 08-26-10

It’s always a pleasure to read someone’s design process, great read Jin!

Jin 08-27-10

@Janko, thanks! I need to write more of this type of posts!

Chris Ballance 08-27-10

As a developer, it was enlightening to follow along with a designer in the creation process for Area51. Kudos on the great work here and thanks for sharing.

Alex 08-29-10

Enjoyable read. I always like to read about the process from start to finish.

You’ve done a good job!

Jin 08-30-10

@Chris, @Alex thanks!

[...] work hard to get the job. The first work he did for Stack Exchange. His debut was Area 51, which he created in one night! Next came Super User, and then the Stack Exchange 2.0 sites. Today, he’s designed 27 [...]

[...] hard to get the job. The first work he did for Stack Exchange. His debut was Area 51, which he created in one night! Next came Super User, and then the Stack Exchange 2.0 sites. Today, he’s designed 27 [...]

[...] work hard to get the job. The first work he did for Stack Exchange. His debut was Area 51, which he created in one night! Next came Super User, and then the Stack Exchange 2.0 sites. Today, he’s designed 27 [...]