Possible Duplicate:
New Design Launched

Hi all. I'm Jin, and I'll be working on the designs for the Stack Exchange sites as they graduate from the beta phase. Each site will have its own unique theme that will reflect its topic. However, all sites will share quite a bit of common elements so they feel like they're part of the Stack Exchange family.

Since most user of the base on this site is familiar with Stackoverflow.com, I decided to go with a clean and simple design similar to SO, but with slightly more visual elements. The focus is still on readability and keeping the familiarity you have with SO.com. Layout structure-wise, I'm not changing much.

I've also read the suggestions from the logo thread. I like the idea of using symbols as part of the logo.

(click image to view full resolution version)

alt text

update

Thank you for your feedback. I have revise the initial mockup per your suggestions.

alt text

some changes:

  • Green in the header is changed to cyan, I think it contrasts well against the darker background.

  • Updated the logo treatment to "} Programmers {"

  • Added <!- --> around the tag line.

  • Removed monospace font in top nav

  • Question link color is now in blue instead of green.

  • Redid the tag treatment, so they're less boxy. I feel simpler () treament makes the home/question pages airier.

I'll be hanging out in the chatroom, feel free to drop by.

UPDATE 2

Thank you for the feedback! I've decided to go with a different approach with the design which I think will work better for the Programmers site. I'm locking this thread so no additional feedback will be posted about the old mockup. I'll start a new post for the next design. Thanks.

share
7  
I like the basic structure but I'm not yet sure about the colour scheme. Is it a nodding reference to early orange/green monochrome screens? That would make sense (seeing as a good part of the audience grew up / started working with them), but I'm not sure whether I really like it as an everyday thing. –  Pekka 웃 Dec 8 '10 at 22:42
1  
Maybe a monospaced font would work for the content as well? Would be somehow fitting for a programming site –  Pekka 웃 Dec 8 '10 at 22:44
7  
@Pekka: Monospaced fonts aren't great for readability when it comes to body text. –  Jon Purdy Dec 8 '10 at 22:48
    
What about doing it with some sort of blue? (I know everyone does blue for EVERYTHING, but we want people to be soothed on P.SE so they don't get too out of hand ;) ... ) ~ Alternatively a magenta-ish? –  jcolebrand Dec 8 '10 at 22:49
    
@Pekka - Gaming had mono spaced fonts for question links and it was soon changed. –  ChrisF Dec 8 '10 at 22:49
    
@Chris That was a pixelated font, not a monospaced font. Here's the discussion that changed it back. –  badp Dec 8 '10 at 22:55
1  
@Jin one idea that came to my mind re the programmers site was using photographs of famous programmers, in a rotation like photography.SE does. Clicking on the portrait would take you to their Wikipedia entry. Maybe it's something that works as a side widget in an existing design too –  Pekka 웃 Dec 8 '10 at 22:56
    
@badp - so it was - my mistake. –  ChrisF Dec 8 '10 at 22:57
    
@drachenstern Color psychology: green –  George Marian Dec 8 '10 at 22:57
1  
I mean monospaced more for the question titles (visible in the screenshot) to take the theme a bit further. For body text it would pretty certainly be too much –  Pekka 웃 Dec 8 '10 at 23:01
1  
IMO the header is too dark. –  user281377 Dec 9 '10 at 9:21
1  
I really like the Cyan edit. It is simple and elegant. –  sange Dec 9 '10 at 13:44
1  
There seems to be some kind of syntax error in "} Programmers {"! Me does not like it, at least put a ; there... or maybe transform it into /* Programmers */, but the out of scope concept seems to me like some dyslexic programmer trying to use some kind of set notation (like x = {1, 2, 500}) –  Trinidad Dec 9 '10 at 13:47
2  
@Anon - Comic sans? What is wrong with you??? ;p –  glenatron Dec 9 '10 at 14:31
1  
I like the idea of /* Programmers */. Also, for upvoting comments, perhaps have a ++ icon and downvotes or flags have a -- icon? I think the badges would look good as flat shapes rather than 3D spheres.... –  funkymushroom Dec 9 '10 at 16:03
show 5 more comments

locked by Jin Dec 9 '10 at 17:49

marked as duplicate by Mark Trapp Feb 6 '12 at 6:42

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

18 Answers

I don't want to sound too harsh, but I'm not entirely certain that the green and black monitor scheme is a good direction. Those old monitors are notoriously hard on the eyes, and the current design looks like an attempt to force a reference to something that should perhaps be referenced more subtly, if at all. There seem to be a number of different conflicting styles at work here, as well, from the gradients to the inset navigation links to the mix of oranges and greens.

If others like the idea but not this design, then to improve it I would steer clear of gradients altogether, probably keep the inset navigation, consistently use a fixed-width typeface for small linked items (site navigation, usernames, tags, and badges), be rid of the orange, and reduce the saturation of the green in the body, which right now reads "Christmas tree". The subtle texture in the background works well, as I think do the keyboardesque buttons.

But I'm definitely with Dan Grossman that a whiteboard look would be more suitable. Perhaps a more informal version of the Mathematics design would be more appropriate?

The <Programmers> logo conveys markup more than code, but I'm guessing it's just a placeholder for whatever the name and logotype turn out to be, likely } Out of Scope {.

share
1  
+1 Heavily agree with the first paragraph. Furthermore I am not sure I like the idea. There are much prettier interfaces to be had than terminal impressions. –  Jonathan Hobbs Dec 8 '10 at 23:37
1  
+1, I would prefer a more monochrome color scheme with a highlight color. White on Dark layout anyone? –  Josh K Dec 9 '10 at 1:01
    
+1 I think we need a more positive design. –  user2567 Dec 9 '10 at 9:24
1  
+1 I think we should to differentiate more from Stackoverflow, exactly because the users will be mostly present in both site. They should recognize immediately which is which. Also I think here we have more general questions, so we should put emphasis on the practice itself, not on writing lines of code. –  Uberto Dec 9 '10 at 11:20
add comment

Perhaps the subtitle should be a comment:

/* programming issues beyond coding  */

For the main design, the chevrons need to be smaller. They are already longer than the monotyped spacing of the other letters. (Although, I think the monospaced font should be kerned. Should create a nice effect.)

share
1  
I agree, and I don't think we should use markup comments. C comments are much more programmery. –  Peter Turner Dec 9 '10 at 14:05
add comment

The second (revised) version of your design looks better. However I suggest that the curly braces be like: { Programmers } instead of } Programmers {.

share
1  
+1 The idea of "} out of scope {" just makes it too painful to see after a while. We want our discussions to be syntactically correct! –  Macneil Dec 9 '10 at 5:52
2  
Way I interpret } Programmers { is: We are programmers out of scope. Means about as much as what the } Out of Scope { logo was trying to imply, I think. –  Jonathan Hobbs Dec 9 '10 at 8:53
add comment

I like everything but the greens.

share
3  
I think the problem is the background color behind the greens, not quite right ... –  jcolebrand Dec 8 '10 at 22:44
2  
The green is the coolest part. Reminds me of my old green Gorilla monitor. That said, the white-on-green is hard on the eyes. Nothing that a userstyle can't fix, though. –  George Marian Dec 8 '10 at 22:46
1  
+1 for green ! :) –  Elliott Dec 8 '10 at 22:49
    
Gaming has been using green on white for long now and nobody has yet complained about it :) It's green on dark gray that is kind of iffy... –  badp Dec 8 '10 at 22:52
    
@badp Actually, that lack of contrast is a bit of an issue for me. If I frequented Gaming I would be using a userstyle to fix that. –  George Marian Dec 8 '10 at 22:58
add comment

Since you're going markup, the subtitle should be:

<!-- programming issues beyond coding -->

...or the jQuery unicorns amongst us: (released under the WTFPD license)

$(".issues").find(".programming").not(".coding")
share
    
If you're going to go that route, then technically the title should also be <Programmers />! Either that or <Programmers>programming issues beyond coding</Programmers>... but that's probably a bit too much. :-) –  Jason Baker Dec 9 '10 at 0:48
    
I really like the <!-- programming issues beyond coding --> idea. I was thinking that for the <Programmers> "tag" originally too, but that woudld probably be too much. –  Jason Dec 9 '10 at 2:14
    
@Jason I also thought about <Programmers/>, then decided that it wouldn't have made sense to close the tag... what would the rest of the page be about, then? :) –  badp Dec 9 '10 at 10:13
add comment

I don't like the two proposal. If possible, I would prefer a more positive design.

I think this can be solved by changing the colors. Especially the top gray bar that shouldn't be gray.

The layout itself is fine.

I preferred the BETA layout colors.

share
    
You like the scribles?!! –  Michael K Dec 9 '10 at 14:37
add comment

I am not a fan of the retro look. Programmers are not dinosaurs living in the past. The current programmers design is much more appealing, but it could use less chalkboard and more whiteboard.

share
4  
I can see your point of view, but I don't view the retro look as a negative thing in itself (although I agree somewhat with @Jon Purdy) –  Pekka 웃 Dec 8 '10 at 23:06
add comment

I hate the logo.

share
add comment

Like others, I don't want to reject the effort that has gone into this, but with a subtitle like "Programming issues beyond coding" (which makes sense), do we really want the site to look like code?

I love this site because I learn about a lot more than code here. The site design should not just reflect that, but emote it.

As a side note, if we do have any fixed width font, I'd love it if we could use a similar font-family priority order to the code style on StackOverflow:

code {
    font-family:Consolas,Menlo,Monaco,Lucida Console,Liberation Mono,
      DejaVu Sans Mono,Bitstream Vera Sans Mono,Courier New,monospace,serif;
}

Courier is just so difficult to scan.

share
add comment

Answered question can have corners rounded? It can look like a monitor.

share
add comment

Cool Design and Nice colors.

share
add comment

What happen with the most voted logo? Community approved it. Is there any problem?

What should our logo and site design look like?

Added: Write an Elevator Pitch / Tagline

share
    
11 upvotes isn't much of an approval, except only relative to the other entries. –  Jonathan Hobbs Dec 9 '10 at 7:56
    
And 28 up votes and zero down votes? One of the most up voted answer here. –  bigown Dec 9 '10 at 13:12
    
I'm referring to the logo; the Elevator Pitch / Tagline is another (far more successful) matter. The lack of votes in the logo thread suggests to me that most people aren't really inclined toward the logos posted, so whilst there are acceptable ones proposed, there are none that are really good. –  Jonathan Hobbs Dec 9 '10 at 15:10
add comment

Rather than the brackets, I would like

// Programmers

or

/*  Programmers  */

Indicating comments, rather than out-of-scope. I think that this would be a less obscure reference. But either is good.

share
add comment

Overall, I like the second mockup a lot. The overall look is very clean and looks good. Minor tweak is that the light diamond hash background makes it harder for me to read than the graph paper look we have now. It particularly becomes a problem on machines where the OS doesn't do the antialiasing nicely. I would prefer to see a solid color, or perhaps a variation of the familiar graph paper.

Logos look fine to me, prefering the second logo to the first. I'd also put in a vote for the ;}{; Programmers style logo on the logo thread. Another tweak I'd make is to adjust the look for the "Add" buttons. They don't seem to quite fit the rest of the site. Perhaps all that's needed is for the button to appear as if we are viewing it directly from overhead. As it is now, the perspective is different than the other controls.

The color scheme in the second example is soothing, modern, and crisp. I like it.

share
add comment

I liked the green on grey ( I find the cyan on the title a little bit blaring ) but then I always colour my remote terminal windows to those colours anyways...

share
add comment

The green question links and green answer boxes look fine. They look stellar actually. The green-on-grey header and menu links? Not so much.

share
add comment

Overall, I like it, except for two things.

1) I agree with others that I don't particularly like the logo. I agree with @Jon Purdy that, since the site is about programmers, it should have a code-esque look to it. I also agree with @Renesis though, that since it's supposed to be "beyond coding", maybe it shouldn't look like code. Maybe some combination of "Programmers" in a code-esque look, and then the subtitle something like the first example from @badp:

<!-- programming issues beyond coding -->

2) The font for the questions seems a little thick, maybe something less bold.

share
add comment

Should the title bar background(Programmers) is a little brighter? It may reduces the contrast between the text-color and background-color, which may not very good for eyes.

share
add comment

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