New design & branding for Code Review

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.

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

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

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.

Overall Site Design

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

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 :)

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.

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

• 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 – rolfl Nov 23 '15 at 22:27
• It's happening! – h.j.k. Nov 24 '15 at 2:51
• 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. – Andrew T. Nov 24 '15 at 3:57
• "splitting a magnifying glass in half to look more like your initials: “C” & “R”" so… like… the letter Q? – bjb568 Nov 24 '15 at 4:10
• @AndrewT. "Finding unexpected bugs" is a fine message to convey. We just need to avoid suggesting "help me fix this bug". – 200_success Nov 24 '15 at 6:39
• 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? – kleinfreund Nov 24 '15 at 9:11
• Thanks for the hard work. I'm happy to see that blue is a big part of the color scheme. – RubberDuck Nov 24 '15 at 10:14
• @kleinfreund this logo was created having 16x16 favicon in mind. so it looks perfectly fine with three lines: cl.ly/image/1z0J2r0y092e – Paweł Nov 24 '15 at 10:15
• Darn.. the new theme breaks the dark-stackoverflow theme for Stylish. Darn. – Justin Nov 25 '15 at 20:56
• What happened to splitting the logo into a C and R? Now it just looks like a magnifying glass. – Barry Nov 25 '15 at 21:20
• @Barry it's explained at the end of this post ('Update' section) – Paweł Nov 25 '15 at 21:34
• Rubber ducky!!! – Malachi Dec 2 '15 at 15:16

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....:

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

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

But the <> works as well!

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

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

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 !

• 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. – Paweł Nov 24 '15 at 10:04

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:

Pretty clear what it depicts now.

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

• I think it's not really bad to mistake the logo for a q. It's a Q&A site after all :) – Vogel612 Nov 24 '15 at 8:19
• I dislike the short handle as well. It looks strange to me. – kleinfreund Nov 24 '15 at 9:07
• 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. – IEatBagels Nov 24 '15 at 14:27
• @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. – glampert Nov 24 '15 at 16:58

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.

on Code Review
on Unix & Linux
on Stack Overflow
on beta sites

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

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

• Agreed. I usually describe our site as "Making working code better" – Simon Forsberg Nov 25 '15 at 18:38
• 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. – Paweł Nov 25 '15 at 18:39

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:

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

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.

• 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. – Jamal Nov 23 '15 at 22:43
• For someone more artistic than me, they could easily be done within a triangle or similar shape... – holroy Nov 23 '15 at 22:51
• 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. – 200_success Nov 23 '15 at 23:29
• 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. – kleinfreund Nov 24 '15 at 9:05
• 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. – Paweł Nov 24 '15 at 11:16

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".

• FWIW my wife sees it as a "Q" regardless of the angle of the break – Mathieu Guindon Nov 24 '15 at 0:36
• I like both though. – Mathieu Guindon Nov 24 '15 at 0:37
• Without the vertical bar of the R, they letters aren't distinguishable. – bjb568 Nov 24 '15 at 4:19
• Maybe by increasing the length of the leg/handle it won't look like a "Q" as much... – glampert Nov 24 '15 at 4:35
• @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. – SirPython Nov 24 '15 at 21:39

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:

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)

• 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. – Paweł Nov 26 '15 at 18:04
• OK, I realize that, thanks for responding and great work again! – Phrancis Nov 26 '15 at 18:06

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.

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.

• 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. – kleinfreund Nov 24 '15 at 15:25

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.

• those will be updated in upcoming commit. thanks for reporting! – Paweł Nov 25 '15 at 21:45

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.