46

I’m Stéphane, the new designer at Stack Exchange. First, I wanted to announce that this site is now starting the process of moving out of beta to become a fully-graduated site! Congratulations!

Graduation and Your Site Design

Graduation comes with a few perks. I have already begun work on your sites design, which will give you your own unique theme that reflects your topic and culture. This will help brand your site as unique, even while you share common elements with other sites that show you are part of a bigger Stack Exchange family.

Once the design goes up, you will receive a link in the footer of other sites in the network, along with the ability to migrate content to and from other sites — and the notoriety of a public launch that says, "Congratulations, you finally made it!"

So I wanted to present some ideas and discuss my design thought process.

During my research on the community, I read a lot of questions and answers posted on the main site. Most were on quite serious topics (e.g. coworker/employers relationships, job security, interviewing etc). I'd like our site to evoke a friendly and more relaxed feeling while talking about these important issues.

Concept

The main concept is to approach topics in a milder way to contrast with the seriousness of the corporate world. I wanted to create a calm, friendly place similar to a “coffee break/water cooler break” environment.

From a design point of view, I want the site to look simple, clean and light-hearted.

Mood board

I was looking for illustrations with office related items, drawn in a simple and playful way. Moodboard

Color scheme

Color scheme

I went with mostly blue shades for the site, with orange for an accent color. Blue symbolizes peace, calm and serenity, but also sensitivity and wisdom. On the other hand, orange warms up the overall tone.

Logo

For the logo, I’m using an origami icon for the “O” letter. As a logo mark, it stands out on its own and can be easily translated to other sizes, or for promotional materials for the site.

click on the image below to see the full resolution version Logo

Overall site design

I’ve put familiar objects in the header which remind us of our daily jobs in order to evoke a professional workplace feeling. I wanted everything to be clean, sharp and flat so it doesn't overwhelm the menu and the content.

click on the image below to see the full resolution version Home page

click on the image below to see the full resolution version Question page

click on the image below to see the full resolution version Errors pages

I believe the design captures the mood I was going for. I'd love to hear your feedback. If there are no major design changes, we're hoping to launch the site soon. Thank you for being an awesome community!

21
  • 14
    This is exciting and looks amazing Stéphane! – jmort253 Feb 5 '14 at 17:56
  • I personally concept site looks great! I was going to post it as an answer but I have nothing to add beyond that. Way to knock this out of the park for us! – IDrinkandIKnowThings Feb 5 '14 at 18:08
  • 7
    Very nice!! Also, yay new designer! Welcome to SE, Stéphane. – Monica Cellio Feb 5 '14 at 18:13
  • 1
    "origami icon for the “O” letter" -- O! O-O-O!!! Fantastic! – gnat Feb 5 '14 at 18:15
  • Sweet!!!!!!!!!!! – enderland Feb 5 '14 at 18:24
  • 1
    I don't get the "O" - what is this supposed to represent? – Shog9 Feb 5 '14 at 18:34
  • 3
    @Shog9 - I immediately thought of teamwork and cooperation. I see the top representing management and the bottom color the employees and the blue lines being the questions that get asked here about dealing with them. But thats just my interpretation – IDrinkandIKnowThings Feb 5 '14 at 18:41
  • 1
    @Shog9: gnat seems to be making an Office Space reference. But that doesn't seem to be the purpose of the design. – Jon Ericson Feb 5 '14 at 18:44
  • 2
    Looks fantastic! I love the water cooler graphic. – Roger Feb 5 '14 at 19:26
  • 11
    robots AND coffee? I'm in. – jcmeloni Feb 5 '14 at 20:21
  • O-o-o simply clicked on me - I thought, yeah, that's how I feel about this site - I love it! @JonEricson but now that you mentioned it, I think theory about Office Space makes even better sense than that :) – gnat Feb 5 '14 at 22:34
  • 11
    As an incidental remark, next time you're doing a mockup, use example.net as the fake e-mail address, not mydomain.com. The example domains (.com, .net, and .org) are reserved for use in documentation, while mydomain.com is an actual company reselling domains. – TRiG Feb 6 '14 at 0:24
  • 5
    Thanks everyone for your feedback! I'm glad you like it! @TRiG I didn't know that. Good to know! – Stéphane Feb 6 '14 at 8:41
  • 1
    The red swingline stapler 404 page is a work of genius, I salute you! – Carson63000 Feb 10 '14 at 2:36
  • 2
    Small typo on CAPTCHA page: ARE YOU A HUMAIN [sic] BEING? – hairboat♦ Feb 11 '14 at 22:28
8

Well done! I particularly like the Stapler in the 404 page.

I'm not too sure everyone will understand the image on the "something bad happened" page, though. Are 2 cup coffee machines universal enough?

6
  • 5
    Thanks :). For the error page (Something bad happened) I think everyone will understand. It's not a matter of coffee cup, it's a matter of an error that occurred and I think this illustration conveys the idea of a malfunction. What do you think about this? – Stéphane Feb 7 '14 at 13:36
  • I understand what you are shooting for here, but I'm not sure the illustration on its own conveys the message you are intending. I think it's too subtle. I'm not a graphic designer and if it were my site, I'd request a different image. But as evidenced by your terrific designs, you are the expert here! – Joe Strazzere Feb 7 '14 at 13:56
  • I actually didn't understand that image myself, until Joe said what it was. It probably doesn't help that I don't really drink coffee, nor does my office have the two cup variety. The "Something Bad Happened" text was clear enough so I doubt many people would miss the purpose of the page, but I just wanted to put it out there. @StephaneMartin, these designs are incredible! – rbwhitaker Feb 7 '14 at 17:34
  • 2
    I love the stapler for 404. – Monica Cellio Feb 7 '14 at 18:48
  • 1
    The image doesnt need to do all the talking though... fortunately there is text that spells it all out :) – IDrinkandIKnowThings Feb 7 '14 at 22:20
  • 2
    It could be a cultural thing, but the broken coffee maker screams OMG NO!! for me. As @Chad said, we may not find the perfect image to suit all backgrounds, but luckily we also have text to go with it. – Jin Feb 8 '14 at 19:10
8

The site design looks great, and I particularly like the images of typical office products across the top.

My few complaints about it though are

  • I don't like the all-caps used in some areas, such as the META links on the sidebar, the user names, and the ASKED cards. The all-caps in the headers of the sidebar seem fine though.
  • The date in the "Answered" box is hard to read on some monitors due to the extremely light font color. I think it should be a bit darker, as this is information I sometimes want to see.
  • Those paperclips in the upper right are far too small. They should be much longer, and ideally should look a little bit more like paperclips instead of safety pins
  • I'm not sure why, but it looks extremely strange to have the word "Share" capitalized when the word "edit" is not. Can we get them all lowercase like other SE sites I see?
  • I'm being a bit nit-picky here, but the "Accepted Answer" check mark doesn't really stand out to me. The shade seems like it doesn't quite match the rest of the site, and I feel like the box with white background makes it blend in a little too much with the up/down arrows

enter image description here

enter image description here

enter image description here

Overall though, I love the design, colors, and logo. Great job! :)

6
  • 2
    Good eye, Rachel. – jmort253 Feb 11 '14 at 2:00
  • 2
    Hi @Rachel, thanks for your feedback. I'm currently coding the site and I change a lot of small details which are too light / too small in order not to have any problem with real data. I've changed a lot of light gray, I think this will resolve all our issues! For the word "share", this was a typo, thanks! – Stéphane Feb 11 '14 at 10:43
  • @StéphaneMartin Thanks! Good to know you're on top of things :) My biggest problem was with the all-caps in various places, as usually caps are associated with yelling on the internet, and I find them hard/annoying to read when used in a non-header context. Is that something you will be fixing too, or is that a deliberate design decision? – Rachel Feb 12 '14 at 16:53
  • @Rachel I don't think all-cap used in labels means screaming, if used in a long sentence, yes. All-cap here is used for stylistic reasons I don't think it looks bad. – Jin Feb 13 '14 at 18:31
  • @Jin I guess I could get used to the all-caps if I had to :) I mostly don't like it because it draws my attention to areas that I don't think are worth the drawing extra attention to, such as the "META" links, and the user/timestamp on posts. I also get used to see user names in a specific casing, and seeing them in all caps looks very weird to me. – Rachel Feb 13 '14 at 19:37
  • I agree with you about the capitals. Especially if @StéphaneMartin's intent is to make it less serious. All caps don't say "friendly and welcoming" to me. I love the general feel of the site though. – starsplusplus Feb 20 '14 at 10:41

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .