UPDATED (March 14): Design for graphicdesign.se

Question

I’m Stéphane, senior product designer at Stack Exchange. First, I wanted to congratulate you because this site is now starting the process of moving out of beta to become a fully-gradutated site! Well done!

Graduation and Your Site Design

Graduation comes with a few perks. I have already begun work on your site's 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!"

Design Concept

I'd like to share my design thought process with you. Designing for a site frequented by designers is rather challenging. Graphic Design as a profession has a rich history and has produced countless art styles over the years. My goal is to give this great community a timeless branding design, so it not only looks great right now, but also years down the road. When I think of timeless design styles, I gravitate towards Swiss/Bauhaus designs' simplicity and elegance.

Swiss/Bauhaus mood board

I decided to work around 3 basic shapes: triangle, square and circle. Simply because all shapes in graphic design come from basic geometric figures.

You can break down every logo, icons or graphic design to basic shapes.

I wanted the logo to convey the idea of the early creation of a logo/icon, a sketch mood where the construction lines are still visible.

I used red because it's a powerful color which was the most used in the bauhaus/swiss style and after several different color tryouts, red was the most effective.

Does this color represent graphic design? Everyone will have a different answer to this question. But keep in mind that we're not trying to find "the" color for the graphic design, but one color for "our" version of graphic design.

Regarding all the others graphic elements, I wanted something very minimalist and clean, this design has stand the test of time.

Swag

Overall Site Design

_{please click to see full resolution versions}

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!

---

EDIT:

Thank you for your valued feedback! I've made some changes to the initial design based on your answers and comments.

Here is a brief list of the changes:

LOGO

• I removed the connection between the G and the R
• I replace the icon by one I made before
• I put the icon on the left of the type
• I decided to keep a red logo on a light grey background

OVERALL DESIGN

• I added some colors (especially green & some blue)
• I changed some icons (vote, accepted answer)
• I updated the design of the answeree box
• I redesigned the badges, now every badge is a portion of the logo
• I changed the sidebar design

I feel the updated design is more cohesive as a whole, and the logo is unique on its own. I’ll start coding the site today and I hope we can launch the site soon!

Answer 1

Overall I like the sleek, clean, appearance. Color choices are quite good.

I'm not really sold on the "clown's nose" logo. I feel it shows no real interaction with the site name and somewhat falls into the "throw some symbol on top of some centered text and call it a logo" genre. I understand the logical path the design took. I'm merely not fond of the end result. I don't think it's bad, just overall nondescript - clown nose, meatball, super ball, - I don't get "design" or "graphic" from it. But... that's just my opinion. As you posted, designing a site for designers would be a challenge. Everyone's going to have their opinion.

I would reiterate @boblet's comment... I'm not looking to "design by committee". Nothing will ever be completed that way :).

It's been stated that my "clown nose" comment may have been "out of line". I don't feel it is. I don't know Stéphane, not at all. My impression of the design has nothing to do with Stéphane in any way. I'm looking at the design, not the person. Whether good or bad.. this is what I immediately saw....

In my experience, any logo which relies on subtle tone variations for clarity is not a good logo. After all, how in the world would you pull off that logo well in one color, no screens? It couldn't be done. The best which could be done is greyscale, but without color it's even more nondescript.

I feel the earlier mock up was better....

The lower image especially. The symbol seems to convey a sense of openness, and reflects rudimentary shapes all designers work with. I merely think you went too far and cluttered it up with the shading and extra angles. I don't necessarily like the type on the earlier mock up, but I definitely like the symbolism use better.

UPDATE AFTER QUESTION EDIT

Much better! Really feels open and inviting now. Great work Stéphane! Love the new badge shapes. Perfect continuity.

Answer 2

Nice, you very nearly did the impossible - very nearly getting a bunch of designers from around the world to agree on one design first time! A real achievement - designers must be clients from hell...

I'm going to try to summarise the essence of the above discussion a bit to try to find next steps (rather than barge in and add yet more opinions to the mix):

• The consensus seems to be that the general concept, colour palette and overall clean simple style are very good. There seems to be a common feeling that these could be taken further and made a touch stronger.
• The rationale behind the logo seems to get a solid thumbs up, but there are reservations about the execution: a) it doesn't follow the concept as far as it could, b) it doesn't correspond as neatly to other elements on the page as it could, c) and like that unfortunate NSFW interpretation of the 2012 Olympics logo, once you've seen it as a clown's nose, it's impossible to un-see it that way...
• The typography gets a cautiously positive response with some reservations about the details (and, of course, we've lived up to the designer stereotype by questioning the kerning :D).

So overall a very positive response - sounds like we might be able to agree without descending into design by committee!

---

I couldn't resist making a quick knockup of what I think might be one way of keeping the original concept pure while addressing the above points. Here's what I tried:

• Simplifying the logo, adding some tie-in with the text below, and taking it a bit more towards the really good original concept of "the idea of the early creation of a logo/icon, a sketch mood where the construction lines are still visible" (reflects our subject matter and positioning within SE), and also, strengthening the implied 'up arrow' (reflects our USPs and positioning in the wider design world).
• Trying to make the tie-in between colours and shapes a touch sharper across the page. In particular, I tried removing the green, which didn't feel like part of the palette, and I tried to make elements (badges, vote arrows, check marks, tag outlines, buttons) compliment the logo.
• Slight tweaks to the typography in the logo type (slightly tighter kerning, slightly shorter horizontal on the G which makes the join less obtrusive, and a bar height on the H more consistent with other letters).

Just a quick experiment to see if it's possible to push the original concept further without losing the neat simplicity, hope it's useful.

A few observations from some other things I tried: a) a red fill on the logo's square or thicker lines looks really strong, but solid reds and white/light grey looks uncomfortably close to Adobe's logo, b) when using outlines on the logo, the triangle at the front really needs to be dominant, else it starts to look like a pentagram, especially when scaled down (more satanism.SE than design...), c) I tried Gramps' suggestion of more red on text, e.g. on user's usernames and on the active tab name, but I was surprised to find it actually looked less clean and consistent and stands out too much. It's quite nice and clean that there is no colour but red on the grey outer section, and no colour but turquoise on the white inner section (excepting images/favicons, and 'post' button / feed link at the very bottom which frame it nicely and should stand out).

Answer 3

Welcome to GDSE! (try to avoid the flying objects).

I will go against the grain here and say: I actually love the logo (typography included). The colors are perfect, the palette is new and the style goes well beyond flat without losing its simplicity: Nothing to add, nothing to take away. My first thought when I saw it: It actually reminded me of the Vitruvian Man by Da Vinci:

So in my (particular) mind it read as the construction of something... geometrical, of something based on but a bit beyond human. Probably not what inspired you to make it, but if you plan on doing a second version based on the critique here, you miiiight consider this idea as a plus? I also completely agree with boblet on the idea that it might be missing an organic component, something that takes it perhaps out of the geometry and the math and into art or the unexpected. Some imperfection, some randomness, a misplaced something...

I'm not entirely sold on the GR connection, but I would like to hear why you decided to go on that direction. What was the concept behind it? I wish Graphic was spelled GDraphic, that would make the GD stand out more :P

And my last comment: Is the green for answered questions perhaps too light? Is the contrast enough with the white? Because the font is so thin, I personally feel it could be a bit difficult to read in older monitors or glary screens.

Answer 4

Nice piece of work. Although I have my reservations about certain aspects, I'm mostly pleased by this design. I have a few things I want to say, though. Opinion alert!

I'm missing some coherence. With the logo, you settle on a set of reds and some really nice lines and angles. I fail to see those return in but very few other elements of the (online) design. The 'ask question' button is the only place I see the elongated hexagon (nicely created by cropping the logo framework) return; the 'no answers' alert is almost the only time you use the logo's red. The 'upvote' blue is way more prominent in your webdesign than is what should be the main red. As such, the site design feels detached from the logo.

I'd like to see those logo-defined elements return in a couple more places. The 'swag' does a much better job of incorporating elements of the logo.

Tying in with that, I fail to see where the badges' open circle comes from. It's been done on other SE sites, but I don't see the connection with this design. A tiny version of, as Scott calls it, the 'clown's nose', or its outline would make much more sense to me.

It has been mentioned before, and I'll add my voice: the word 'Graphic' is bothering me. It's no just the G and its awkward connection to the R that bugs me, to me it also seems like the word's kerning is a tad off. Lastly, the typeface seems to be a grotesque, but in your first shot of the full logo, it seems to me that the G's bowl is inconsistent in line width. Odd.

Once more: these are rather small points, on average this design looks good! Moreover, I see the huge problem of designing for what is arguably the worst committee of designers, and I'll promise you I won't start flaming nor run away when none of my suggestions / opinions are taken into account.

Oh, and: Yay! Graduation!

Answer 5

I think it's all a good start and I thought the logo was OK - neither great nor terrible. Then Scott pointed out an important flaw, it really doesn't have much discernible, immediate meaning. It only carries good meaning once the viewer knows how it came to be or what influenced it.

When I was imagining a GD logo a while back (just for fun), I almost immediately discarded any notion of an icon because I thought there was no such thing that could convey graphic design in a simple icon - you have already come up with a better concept for that than I could have. I imagined that it would be a typographic logo - easy to say but I couldn't come up with any solid ideas.

As for the website, the simplicity is nice but I feel it's bordering on plain, I can't see much custom made and unique for us, I did just notice the medals but I think you should reconsider them as they make a lot of noise next to tiny numbers at tiny sizes.

In conclusion, I think the subtle touches are nice, and I don't think you should get rid of them, I think you should add more subtle elements.

That being said, we have been discussing an ongoing community contest for some time with ideas being thrown around such as logo of the month or (maybe I imagined it) background of the month etc. If this is possible I would say most of the site is perfect for a single variable element.

It's a good design anyway and great news that we're graduating!

Answer 6

First I would like to say thanks for the design and hearing that we are finally up on the block for graduation. The below I will also like to point out its just my opinion and some little things I would like to see implemented.

Logo

I do feel that the logo is good but I believe it would be better suited for a 3D site and, to a degree, I don't think or can see it representing design although I do like how you came up with it. I would rather like to see possibly a custom made typographic font but that's just my thinking.

---

Rep

I believe it needs a little more spacing in between the icon, numbers and the overall rep is a dwarf. Maybe its from spending so much time with the default but I do notice you have increased the height of the font compared to the default but the spacing seems to look better:

I like how they are different then default and the usage of a hollow circle. Maybe separate them evenly:

before:

after:

---

Navigation

I like the typography and how you use all uppercase but I think the shape highlighting the "Ask Question" is off and I would also suggest remove it or correct the position:

Before:

After removed:

After dropped:

---

Answeree

The box around the answeree I believe is overpowering and should be reduced in border size or the color changed to something lighter:

---

Answer panel

The options for the answer section don't fit in the design because it has a very harsh black used:

---

Answer button

Can we possibly add a gradient or some depth to the answer button? The last site I knew that was released was Workplace and it was a flat design.

Sorry for the quick answer but I have a meeting and will be back to edit later.

In regards to the colors on the home page. I love how the blue separates in the design but I think the green is a dwarf but I am not aware if the green is mandatory for an accepted answer.

Question

I believe there needs to be some color separation other than using the shades of gray that are in the design:

If there is no chance on a re-vision of the logo I would like to see some of the shades of red implemented throughout.

Possibly change the hover color for the tag with one of the reds:

Another option would be use either one of the reds or the blue for the name:

---

Just curious but is it not going to be a problem that we are very similar to the color palette of estetica-design-forum?

Answer 7

Stéphane -

Edit:

This is not to be design by committee. I doubt anyone of us would really want that.

btw - I had an idea: the logo, the extra polygon (behind the logo) and the background mesh together indicates mathematics. Maybe one of them could be more organic? That would give a nice subtle contrast.

---

Yes, I realise that designing for designers is an uphill struggle and I feel for you. As mentioned in my comment above, I think the logo is a little too mathematical: it give me the distinct feeling that this is about math, polygons, 3D rendering. It would be superbly suited for Blender, Maya, certain programming, SketchUp etc. (It also reminds me of a logo for a university).

However what I do like is the text under the logo. It is simple, clear and with a gentle alteration I think is well suited. Further, I see what you did with the "ask question"-highlight, and like the consistency in that.

I second Dominic in that the general lacks a little personality. It is certainly safe, but I was hoping for more of a difference from the beta layout. In short; I think you can be a little more daring. Personally, I am a little tired of the "designers are all red-white-black"-thing. Personally, I do red-white-black when in doubt: hardly any client will object.

I believe - as do probably everyone here - that design is important and sets the tone. I believe that design sub/consciously affect how people react and communicate. We have - as I am sure many SE sites - a wish to feel a little friendly. I am not saying that cute animals should stick out everywhere (the horror!), but that there is room for something gentle. Not cozy. Gentle. And I miss a little colour.

I realise - and applaud - your aim at doing something timeless. Something that will not feel dated in two years, but this is also an incredibly hard ting to attempt, and swiss design-ish is to me not really timeless as such.

I hope you do not collapse under the weight of critique, and hope that if we cannot all agree (impossible!), we can maybe reach some sort of balance.

And finally; I hope that just because this to-and-fro might take a little time, that we take that time, instead of getting too excited that we are about to graduate.

Answer 8

Love that you're working on the design...thanks so much!

I like the mark. GD is a tough concept to encapsulate in a logo but I'd be satisfied with this one.

I like that you switched from Klavika, it now feels a little less tech/Facebook and a little more mainstream, which I think this site can benefit from. However, I'm not a fan of the G and R being connected...it's distracting and doesn't seem to have any inherent meaning.

Gotham and Bauhaus don't quite match up, but it doesn't have to. It'd be interesting to see something like Akzidenz Grotesk here :)

Keep up the great work!

Edit: I keep coming back to this design, and that "G" looks weirder and weirder to me, because its curve doesn't match the "C". It's thicker and more contrasted. Don't feel like you have to customize the letters; you've already got something original in the logo (which, for the record, I have never seen a geometric clown nose before...such a comparison is a stretch)!

Answer 9

I would add only this to Scott's excellent contribution: the red-on-grey horizontal logo and logotype make an excellent bit of flair that I would be happy to use anywhere fine blogs are sold... :-)

Answer 10

I like the revision. I think it's a nice improvement. I mentioned it in a comment, but to add a visual I thought I'd add an answer. Just a heads up that the roll-playing site uses an icon (though not logo?) similar in concept (circle with geometric pattern in it).

I don't think it's a huge deal, but just FYI that when it comes time to make the icon version of the logo, you may want to do something a bit different at that size.

Answer 11

I'm just going to offer up one suggestion if you're willing (and don't blame you if you are not): Spend some time working on a type-centric solution.

The hurdle here is how to you create a mark that says 'graphic design'? It's not easy, obviously. But typography is a core part of it, and a well crafted logotype might work well.

Granted, if you also want it to be Swiss, well, then we're stuck with a Helvetica logo. :)

But the Bauhaus mark is in the vein I was thinking of. Something mainly type centric, but still stylized and decorated.

Answer 12

I love the re-design changes, and I think you've done a great job incorporating the feedback. The added splashes of color here and there make it look much more inviting in my opinion. The badge icons are a great idea, and I also prefer this version of the logo.

The only nitpick that I have is the "ASK QUESTION" button. When I de-focus my eyes and look at the design as a whole, my attention is most directed towards the "add ignored tag" button; the solid rouge really stands out in the design.

Something to consider might be changing the question button to a solid shape so that it stands out as well, or perhaps even style it in the same "button" design as the "Post your answer" and "Add ignored tag" buttons.

I look forward to the roll-out!

Answer 13

The words are awfully small, relatively speaking. Why are they tiny and buried under the radish? Could we have the radish to the side and the words the same height, so you can read them?

ETA Sorry, since apparently I wasn't being clear, what I would rather see is something like this. Same idea; I just want to be able to read the words "Graphic Design."

EDIT AFTER THE UPDATE

I really like the new look. Definite improvement; I feel much better about it.