70
\$\begingroup\$

My name is Paweł, I’m a product designer at Stack Exchange. As all of you know, you’ve already undergone the first phase of graduation. I’m pleased to announce that we’re just about ready for you to undergo the second phase—the design! It took us a while to make a special design for you, but we’re finally very close to finishing it. I’m very sorry you had to wait so long. And to be clear, you’ve never been forgotten.

Anyway, let’s move on with good news! There’s lots of it.

Your Site Design

We want to give you your own unique theme that reflects your topic, culture & community. 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.

Main Concept

Pattern

We wanted to create something simple yet creative. Something that fits this community’s professional style but stands out a little from other sites as well.

Color Scheme

Color Scheme

As a main color we picked two shades of blue. It is the most common color on the Web but it also symbolizes technology, harmony, cleanliness & order.

Logo & Identity

A magnifying glass was the foundation of the site’s identity. Reviewing code is about searching for patterns, bugs, mistakes, algorithms to improve, blocks to replace and other things to fix. So it doesn’t sound like a normal search. It’s something more than that. It was obvious for us that we should add some context to that magnifying glass. So we came up with the metaphor of the code block. Code is your source (“source code” - see what I did here? :)); your roots. Seeking perfection, going after correct conventions—this is what characterizes this community.

At least, that is how we saw you. But we like to think we’re also good listeners. You, the community, came up with the really great idea of splitting a magnifying glass in half to look more like your initials: “C” & “R”. Very subtle and clever.

Logo

Overall Site Design

Here’s what you were waiting for… (click to zoom)

Home Question

We believe the design and branding work very well for this community. It’s unique and captures the right mood. We’d love to hear your feedback, and if there are no major design changes, we’ll launch the new site design very soon.

Update Nov 25, 2015

Hello again. Thank you all for your feedback, it's been really valuable for me. I've decided to tweak few things, update some stuff and also show you SWAG! Few words of explanation and changelog notes:

LOGO

There was a lot of feedback around that split of magnifying glass shape in logo. Some of you suggested it looks as it supposed to, so „C” & „R” letters. But some of you saw Q instead R. That’s why I decided to get rid of that split at all and just keep original magnifying glass shape.

There was a lot of suggestions on how to fix it, so I’d like to give feedback to those solutions:

  1. "Make stem longer" - it would change proportions of logo, which of course isn’t bad. But if we resize it to smaller versions like 16x16 favicon it would look pixelated. We could keep old proportions for smaller sizes, but then we would have separate logos which isn’t the best idea ever.

  2. "Rotate split" - this actually doesn’t solve the problem at all. I asked few people about this and they still were not sure if it’s R or Q.

By removing split we just avoid any subconscious suggestions that this might be metaphor of letters. I’d love to please all of you guys and find some sweet spot, but it’s technically impossible :) So I had to make some decision and I really hope you gonna love it and get used to it :)

BADGES

As you suggested, I replaced <> badges with {} which is closer to code block metaphor. It was very good suggestion, thank you for that.

BACKGROUND

I did not get rid of squares pattern from background but I made them slightly less visible. So you won’t be distracted by background image when reading posts.

SWAG

Now exciting part! Here are some examples of how logo can be used elsewhere to strengthen the visual identity.

T-Shirt

Stickers

And the most exciting thing... Drumroll please... Rubber Duck

\$\endgroup\$
12
  • 10
    \$\begingroup\$ Can you post a sample of what a code block would look like inside a block-quoted section, as well as a regular block-quote section. An example post would be: Comments Concerning \$\endgroup\$
    – rolfl
    Nov 23, 2015 at 22:27
  • 1
    \$\begingroup\$ It's happening! \$\endgroup\$
    – h.j.k.
    Nov 24, 2015 at 2:51
  • \$\begingroup\$ IMHO, at the first sight, the logo looks like "finding a bug in a code" which seems more appropriate for Stack Overflow. However, I don't have alternative suggestion for now. The overall design looks great btw. \$\endgroup\$
    – Andrew T.
    Nov 24, 2015 at 3:57
  • 4
    \$\begingroup\$ "splitting a magnifying glass in half to look more like your initials: “C” & “R”" so… like… the letter Q? \$\endgroup\$
    – bjb568
    Nov 24, 2015 at 4:10
  • 2
    \$\begingroup\$ @AndrewT. "Finding unexpected bugs" is a fine message to convey. We just need to avoid suggesting "help me fix this bug". \$\endgroup\$
    – 200_success
    Nov 24, 2015 at 6:39
  • 2
    \$\begingroup\$ I'm on the fence regarding the logo. I feel it's a bit too overloaded which makes the small versions (e.g. 16x16 pixels) problematic. What about the favicon variant only having two lines of code instead of three? \$\endgroup\$
    – kleinfreund
    Nov 24, 2015 at 9:11
  • 1
    \$\begingroup\$ Thanks for the hard work. I'm happy to see that blue is a big part of the color scheme. \$\endgroup\$
    – RubberDuck
    Nov 24, 2015 at 10:14
  • 1
    \$\begingroup\$ @kleinfreund this logo was created having 16x16 favicon in mind. so it looks perfectly fine with three lines: cl.ly/image/1z0J2r0y092e \$\endgroup\$
    – Paweł
    Nov 24, 2015 at 10:15
  • \$\begingroup\$ Darn.. the new theme breaks the dark-stackoverflow theme for Stylish. Darn. \$\endgroup\$
    – Justin
    Nov 25, 2015 at 20:56
  • \$\begingroup\$ What happened to splitting the logo into a C and R? Now it just looks like a magnifying glass. \$\endgroup\$
    – Barry
    Nov 25, 2015 at 21:20
  • \$\begingroup\$ @Barry it's explained at the end of this post ('Update' section) \$\endgroup\$
    – Paweł
    Nov 25, 2015 at 21:34
  • \$\begingroup\$ Rubber ducky!!! \$\endgroup\$
    – Malachi Mod
    Dec 2, 2015 at 15:16

12 Answers 12

Reset to default
36
\$\begingroup\$

It's now fixed.

I like it, it's clean, unique, the blockiness is oddly satisfying, and relevant.

+1

Thanks for the attention to detail.

I was wondering aobut the "badge" Icon - it does not seem to have any particular significance....:

Badges

Is there some way to incorporate something more code-like, a variation on {} for example?

Hmm.... for the record, I was going to suggest:

braced

But the <> works as well!

Here's an example using curly braces, with less 'kerning', and a brighter "bronze":

enter image description here

\$\endgroup\$
10
  • 1
    \$\begingroup\$ @rolfl actually badges have been already created but the black top bar wasn't updated. it should be fixed now. good catch, thanks man! \$\endgroup\$
    – Paweł
    Nov 23, 2015 at 21:55
  • 1
    \$\begingroup\$ Thanks, great minds think alike-ish. \$\endgroup\$
    – rolfl
    Nov 23, 2015 at 22:03
  • 15
    \$\begingroup\$ Personally I think { } look better than <> and are more representative, those <> just remind me of XML & HTML which are not code (not really, anyways) \$\endgroup\$
    – Phrancis
    Nov 23, 2015 at 22:28
  • 6
    \$\begingroup\$ @Phrancis - the more I think about it, the more I prefer the {} too. Everything about this site-design is about "blocks" that represent "code blocks", and {} is a code block, not <> It really, really should be {} !!!! \$\endgroup\$
    – rolfl
    Nov 23, 2015 at 22:33
  • 3
    \$\begingroup\$ I like the curly braces one! It'd be great to see them appear somewhere in the design. :-) \$\endgroup\$
    – Jamal
    Nov 23, 2015 at 22:42
  • 8
    \$\begingroup\$ Python devs will beg to differ about {} being a 'code block'... ;) \$\endgroup\$
    – h.j.k.
    Nov 24, 2015 at 2:01
  • \$\begingroup\$ FWIW, <> are also used in BNF, and personally I'm partial to the diamond operator. :p \$\endgroup\$
    – h.j.k.
    Nov 24, 2015 at 2:55
  • \$\begingroup\$ I like both. Think of <> as in a C++ template or a Java generic ;) \$\endgroup\$
    – glampert
    Nov 24, 2015 at 4:31
  • 3
    \$\begingroup\$ I like the idea of {}, but visually I think <> just works better \$\endgroup\$
    – janos
    Nov 24, 2015 at 6:28
  • \$\begingroup\$ That original badge icon looks like it was taken from a benzene ring. \$\endgroup\$
    – TRiG
    Nov 27, 2015 at 17:14
20
\$\begingroup\$

It's now fixed.

I like this design.... well almost.

What I don't like about it is the UPPERCASE LETTERS of the statistics about the question like VIEWED 123456 TIMES because it is the only occurance in the whole design where capital letters are used and it is considered as shouting what I see as a no go because we are a very friendly and welcoming site.

Another thing I don't like that much is the green (e.g of the checkmark) but I guess I can get used to that ;-)

About the Icon, I support @glampert. Having the handle of the magnifying glass longer will IMO look much better.

But nevertheless the overall design is pretty good and I am looking forward to see this each day ;-) not only because of the design but because then the reputation levels have been increased.

Good job Ludwik !

\$\endgroup\$
1
  • \$\begingroup\$ I think you're right about uppercase letters. I will get rid of them in stats section. The green color issue is more like subjective think I guess. \$\endgroup\$
    – Paweł
    Nov 24, 2015 at 10:04
19
\$\begingroup\$

Logo has been updated to slightly different version.

I think the reason why most are seeing a capital "Q" in the logo is because the leg (or the magnifying glass' handle) is too short.

Here's a quick sample with a longer handle for comparison:

New CR logo

Pretty clear what it depicts now.

Magnifying glass

Anyhow, very nice job, looking forward to see it live!

\$\endgroup\$
4
  • 5
    \$\begingroup\$ I think it's not really bad to mistake the logo for a q. It's a Q&A site after all :) \$\endgroup\$
    – Vogel612
    Nov 24, 2015 at 8:19
  • 2
    \$\begingroup\$ I dislike the short handle as well. It looks strange to me. \$\endgroup\$
    – kleinfreund
    Nov 24, 2015 at 9:07
  • 2
    \$\begingroup\$ The problem with the long handle is that it will not look good as a favicon or as a really small image (Like the Hot Network Question) because it takes too much place. \$\endgroup\$
    – IEatBagels
    Nov 24, 2015 at 14:27
  • 1
    \$\begingroup\$ @TopinFrassi, yep, that seems like a fair reason. It didn't occur to me, but that's probably why they did it like this then. But since the handle is nearly invisible in a tiny image, perhaps they might consider creating the two versions and use one or the other, depending on size. \$\endgroup\$
    – glampert
    Nov 24, 2015 at 16:58
10
\$\begingroup\$

It's now fixed.

I quite like it.

Will the duck be a limited series for the first two pages of https://codereview.stackexchange.com/users?tab=Reputation&filter=all, or will lesser users have a way to get one?

A minor annoyance: can we please have a little more contrast on tags? I'm fine with the font shape, thickness and size but I find the gray background and the gray text too close to permit quick scanning.

codereview on Code Review
unix on Unix & Linux
stackoverflow on Stack Overflow
beta on beta sites

\$\endgroup\$
2
  • \$\begingroup\$ You're right, I will increase the contrast. Thanks! \$\endgroup\$
    – Paweł
    Nov 25, 2015 at 21:37
  • \$\begingroup\$ Agreed. I've posted this as a separate question. \$\endgroup\$
    – 200_success
    Nov 25, 2015 at 22:10
8
\$\begingroup\$

I think we make code more than slightly less wrong...

\$\endgroup\$
2
  • 2
    \$\begingroup\$ Agreed. I usually describe our site as "Making working code better" \$\endgroup\$
    – Simon Forsberg
    Nov 25, 2015 at 18:38
  • 2
    \$\begingroup\$ Forgot to mention that we may discuss later on that tagline on tshirt :) What it should say, etc. But that's probably for separate post. \$\endgroup\$
    – Paweł
    Nov 25, 2015 at 18:39
8
\$\begingroup\$

It's now fixed and will be live after our next production build.

It looks like the moderator flag queue is missing a white background:

enter image description here

\$\endgroup\$
5
  • 7
    \$\begingroup\$ waaaait... You can see our moderator flag queue??? \$\endgroup\$
    – Vogel612
    Nov 25, 2015 at 21:12
  • 12
    \$\begingroup\$ @Vogel612 No - but I can see the flag queue on a site I do moderate, then apply the CR stylesheet to it ;) \$\endgroup\$
    – Undo
    Nov 25, 2015 at 21:15
  • \$\begingroup\$ Thanks for reporting, will handle that! \$\endgroup\$
    – Paweł
    Nov 25, 2015 at 21:35
  • \$\begingroup\$ this will be fixed in upcoming build. \$\endgroup\$
    – Paweł
    Nov 26, 2015 at 14:09
  • 6
    \$\begingroup\$ Ook!​​​​​​​​​​​ \$\endgroup\$
    – Doorknob
    Nov 26, 2015 at 18:20
8
\$\begingroup\$

We have to stay consistent with arrows shape across whole network.

I suggest using ++ and - - for up and down voting of questions and answers, as that is a pretty common idiom for incrementing and decrementing in code.

\$\endgroup\$
5
  • \$\begingroup\$ I like this as well. My only hesitation is that the buttons may have to resemble up/down arrows in some way (Money's buttons come to mind), but I may be wrong. \$\endgroup\$
    – Jamal
    Nov 23, 2015 at 22:43
  • \$\begingroup\$ For someone more artistic than me, they could easily be done within a triangle or similar shape... \$\endgroup\$
    – holroy
    Nov 23, 2015 at 22:51
  • 16
    \$\begingroup\$ Cute, but no other Stack Exchange site does anything like that. Some newcomers already have a hard enough time understanding how to upvote, so making the buttons look like anything other than an arrow is a bad idea. \$\endgroup\$
    – 200_success
    Nov 23, 2015 at 23:29
  • \$\begingroup\$ The idea is neat, but it doesn't work in the Stack Exchange context as 200_success explained. Also, keep in mind that people have code reviewed which knows no increment/decrement, so they don't necessarily get the idea. \$\endgroup\$
    – kleinfreund
    Nov 24, 2015 at 9:05
  • 4
    \$\begingroup\$ exactly what @200_success said: we want to be more/less consistent across whole network. We sometimes customize an arrow a little bit, but it's still shape of an arrow. I can't imagine having an arrow with +/- characters and being simple, readable and obvious enough for newcomers at the same time. \$\endgroup\$
    – Paweł
    Nov 24, 2015 at 11:16
7
\$\begingroup\$

Logo has been updated to slightly different version.

In the change log of the original design, it says:

Better angles for the breaks, so people actually figure out what the letters may be. :~)

I think that in this design, the "C" should be made to look more like a "C" by moving the breaks farther into the "R".

It may just be me, but I don't write my "C"s like that (nor type them like that) and, when I "C"(ha) the logo, I can't immediately tell that it is a "C".

\$\endgroup\$
5
  • 3
    \$\begingroup\$ FWIW my wife sees it as a "Q" regardless of the angle of the break \$\endgroup\$
    – Mathieu Guindon
    Nov 24, 2015 at 0:36
  • \$\begingroup\$ I like both though. \$\endgroup\$
    – Mathieu Guindon
    Nov 24, 2015 at 0:37
  • \$\begingroup\$ Without the vertical bar of the R, they letters aren't distinguishable. \$\endgroup\$
    – bjb568
    Nov 24, 2015 at 4:19
  • \$\begingroup\$ Maybe by increasing the length of the leg/handle it won't look like a "Q" as much... \$\endgroup\$
    – glampert
    Nov 24, 2015 at 4:35
  • \$\begingroup\$ @glampert That is a good question. Although I do not have the tools to test it, I think that it would still look like a Q, considering that a circular shape is still being formed by the C and Q and that the Q part is only meant to be part of a Q anyway. \$\endgroup\$
    – SirPython
    Nov 24, 2015 at 21:39
6
\$\begingroup\$

We will consider this update probably slightly later.

Code Blocks

Many will remember we had discussed some potential syntax-highlighting schemes some time back, the primary post being:

Code Prettify - Choose your favorite or make your own!

Also related:

Code Prettify - Line numbers?

What are the chances that this could be added with the new design? (or at some point shortly after, if implementing this is a bit more work than the "colors" at first)

\$\endgroup\$
2
  • \$\begingroup\$ This is actually very big change that would affect whole Network. This won't be done soon, but we will keep an eye on that topic. \$\endgroup\$
    – Paweł
    Nov 26, 2015 at 18:04
  • 1
    \$\begingroup\$ OK, I realize that, thanks for responding and great work again! \$\endgroup\$
    – Phrancis
    Nov 26, 2015 at 18:06
4
\$\begingroup\$

Logo has been updated to slightly different version.

First off, I think it looks great.

I do feel strongly that the breaks in the magnifying glass could be more obviously a "c" and an "r". In particular, this configuration (credit to @kleinfreund) just intuitively "looks" like a C.

enter image description here

In addition, I feel the stem of the magnifying glass should be at least a little longer. Not only does it make it look much more like a glass than a "Q" but it also makes the "R" look much more like one.

\$\endgroup\$
1
  • \$\begingroup\$ The issue here is the smaller variations of the logo. The angled gaps work here, but don't necessarily do so on sub 32x32 pixel resolution. \$\endgroup\$
    – kleinfreund
    Nov 24, 2015 at 15:25
3
\$\begingroup\$

It's now fixed.

There are two things I don't like about the new design:

  1. The tags are hard to read because there isn't enough contrast between the tag text and the background of the tag. In fact, I think a lot of the text (not just the tag text) could be a little darker to be more readable. For example, the text for the votes, views, and the question title text are all a bit light.

  2. The teal/green Answered color is hard to read against a white background. The solid rectangle of teal is also a little bright compared to everything else. I suggest darkening that color a bit.

\$\endgroup\$
1
  • \$\begingroup\$ those will be updated in upcoming commit. thanks for reporting! \$\endgroup\$
    – Paweł
    Nov 25, 2015 at 21:45
2
\$\begingroup\$

Overall, nice design. Only suggestions are that the smaller icons (sidebar, url, etc) could use thinner lines and the color used to indicate answers (Teal) seems really out of place with the rest of the color scheme.

\$\endgroup\$

You must log in to answer this question.

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