81

Possible Duplicate:
New Design Launched

First, I want to thank you for your valuable feedback for the first design concept. Programmers.SE is a site about people and conceptual design more than coding. The old design simply did not reflect that; so it failed.

I talked to Jeff about this, and he agrees that Programmers.se is much different from Stackoverflow. I quote him:

Stack Overflow is when you sit down in front of the compiler, Programmers is when you sit down in front of the whiteboard

Dan Grossman and Jon Purdy also thought a whiteboard theme was more appropriate from their comments regarding the first design review, and I agree.

Since late last week I've been working on a whiteboard theme, and I'm pleased with the outcome. I feel it gives the site a more positive and personal touch, and has some similarities from the Beta theme.

(click to see full res version.) alt text

The handwritten font in the title, top nav and section header is House Whiteboard. Yes, it is actually Hugh Laurie's handwriting. ("It's Not Lupus!")

For the question title typeface, I tried a few "handwritten" ones; they looked great visually, but they scored rather poorly on readability. I eventually went with Yanone Kaffeesatz. I feel it has that soft look, and works well with the whiteboard theme.

Please let me know what you think.

bonus: (the making of)

alt text

26
  • 24
    Please tell me that if you are using Hugh Laurie's handwriting that you worked "It's not Lupus!" in to the site somewhere, maybe the 404 page?
    – rjzii
    Dec 14, 2010 at 13:36
  • 2
    I was happy with the previous design, but this is much better. I'll add the link to the site header.
    – ChrisF Mod
    Dec 14, 2010 at 13:57
  • 3
    squeals with glee like a little Japanese girl SWEEET. I like it.
    – jcolebrand
    Dec 14, 2010 at 15:00
  • 15
    The subtle ghost marks of erased diagrams and code is nice.
    – Jeremy
    Dec 14, 2010 at 15:11
  • It's looking good!
    – HedgeMage
    Dec 14, 2010 at 17:34
  • 4
    Is that a cup of... Java?
    – Corey
    Dec 14, 2010 at 17:36
  • That's just perfect Jin! Thank you
    – user2567
    Dec 14, 2010 at 17:50
  • 6
    @Rob - Actually, I think "As the philosopher Jagger once said, 'You can't always get what you want'" would be better for a 404 page. "It's not Lupus!" would work well for a 500 page though. :-) Dec 14, 2010 at 19:52
  • 1
    @Jason Baker - Ah, good point, but you don't see the 500 page that often. Granted 404 doesn't show up that often either, but likely more often than 500 (hopefully!).
    – rjzii
    Dec 14, 2010 at 19:55
  • 3
    Any user who can't view the 500 page isn't a Real Programmer...
    – Shog9
    Dec 14, 2010 at 23:14
  • 1
    @muntoo: compositional aesthetic. also, arguably, this could be an instance of if() { } else { } Dec 15, 2010 at 12:55
  • 2
    @Axidos - We are programmers, we use obscure references all of the time. ;)
    – rjzii
    Dec 15, 2010 at 13:29
  • 1
    I assume that when a "final" design is done, the Stack Exchange icon will be updated to reflect it as well? It would be much nicer to find it at a glance in the ever-expanding list. Dec 15, 2010 at 13:54
  • 2
    @Wonko, yes. Programmers.SE will get a new favicon/apple-touch-icon and a new icon on SE.com site listing.
    – Jin
    Dec 15, 2010 at 14:40
  • 1
    Absolutely beautiful. Great job! Dec 16, 2010 at 18:00

15 Answers 15

63

This design is AWESOME. I think it captures the spirit of Programmers and sets us apart from SO (IMO that's a good thing). I'm not even going to offer any suggestions - Spot ON.

4
  • 10
    +1 I like it unconditionally, too. Not 100% sure about the Yanone font but that's a minor detail. Great work.
    – Pekka
    Dec 14, 2010 at 1:18
  • 3
    Really like the whiteboard theme. Spot on, Jin.
    – Gary
    Dec 14, 2010 at 20:48
  • 1
    I really like it! Maybe we can add a bit of japanese somewhere i.e. 完全(kanzen) 看板 (kanban) 無駄 (muda) :)
    – Uberto
    Dec 15, 2010 at 13:11
  • 1
    @Uberto 1 [4|\|t R34D T|-|4T. Dec 15, 2010 at 23:58
34

I really like it.

I'm not too crazy about ultra-narrow fonts, but as long as it's not used for the really important text (question, answer, and comment bodies), I think it works well with the "whiteboard" theme.

The only other concern I have is with the logotype: I get why people latched onto the current design, that } Programmers { is a play on the fact that this site is "out of scope" of Stack Overflow, but I'd really like to see that changed for two reasons:

  1. It doesn't fit in with the idea that this is a conceptual site, rather than a coding site.
  2. Most of the problems with this site's scope has arisen from people confusing Programmers.SE as the "dumping ground" for Stack Overflow, where the real questions are asked. Reinforcing that conception with a logo that says "Programmers is the place for out of scope questions" doesn't seem constructive.

In keeping with the idea of using some code for the logotype, what about /* Programmers */ or similar?

22
  • 4
    @mark, the }{ was from a logo suggestion thread: meta.programmers.stackexchange.com/questions/4/… i'm not locked into anything right now. I do like /* */ also. i think the commenting looks more appropriate for the meta nature of the site.
    – Jin
    Dec 14, 2010 at 7:57
  • 11
    Second the comment idea. Fits well with the idea that this is a commentary on programming.
    – Nicole
    Dec 14, 2010 at 9:14
  • 5
    Yes, but that comment style is fairly language specific. There's also #, ;, ', //, REM, etc. I like the fact that the }{ doesn't confuse matters or start comments on which comment style to use. Dec 14, 2010 at 14:31
  • 1
    @BerinLoritsch ~ But most people recognize that /* */ is indeed a comment without second thoughts, and it's used even for pseudocode a lot to mark large comment blocks (in my experience in textbooks). Plus, all the languages a Microsoft shop faces use that style, and you have to admit that whether you like it or not, the majority of the tech world is influenced by Microsoft and their styles. It's not an unlikely prospect to know what that means.
    – jcolebrand
    Dec 14, 2010 at 15:02
  • 1
    I originally thought the wrong-facing braces were weird but I couldn't put my finger on why because they really look good. I love it.
    – msanford
    Dec 14, 2010 at 15:03
  • 5
    Yes, but that comment style is fairly language specific. Javascript (and by association I presume ActionScript), TSQL, C/C++/C#, Java, PHP, CSS, ... I'm sure there are plenty more.
    – jcolebrand
    Dec 14, 2010 at 15:08
  • 4
    @Berin scope delineators are language-specific too: I can think of a half-dozen languages off the top of my head that don't use curly braces to delineate scope. Both curly braces and C-style comments are pretty universally recognized by programmers to be stand-ins for the things they normally denote. And I think what curly braces stand for in context is contrary to what Programmers.SE is about.
    – user8
    Dec 14, 2010 at 15:24
  • 8
    I will use /* Programmers */ for the final design. I'm converting to CSS now.
    – Jin
    Dec 14, 2010 at 17:09
  • @Jin sweet. Can't wait!
    – user8
    Dec 14, 2010 at 17:10
  • @Jin hooray! I disliked the "out-of-scope" concept, simply because it's pointing away from the logo, which is highly unusual and looks wrong.
    – Corey
    Dec 14, 2010 at 17:39
  • 3
    @Jin I actually prefer the "} Programmers {" logo. Using the c/c++ style comment, to me makes the site too specific. But that's just me I suspect.
    – ChrisF Mod
    Dec 14, 2010 at 18:32
  • 2
    I agree with every point from Renesis to improve this design and see the major problem with the logo. I like the comment style logo. However I want to remember that the most voted up-voted (least down-voted) logo is more elaborated that the second option that @Jin based the current logo. Maybe the blend of both could be better. I see Pr.SE like a meeting in front of a white-board. I felt the complete lack of the meeting concept on this design. Probably the logo could reflect it.
    – Maniero
    Dec 14, 2010 at 19:39
  • 1
    @bigown: Maybe it's just me but I see that diagram off to the right as implying the presence of a meeting. Dec 14, 2010 at 23:12
  • 2
    Agree, needz moar meeting. If there's one thing that sounds good to a programmer browsing the web while stuck in a boring meeting, it's more meeting.
    – Shog9
    Dec 14, 2010 at 23:18
  • 1
    @bigown, @Chris: I agree and prefer the } Programmers { style header. Chosen by the community does have that kind of weight.
    – Josh K
    Dec 16, 2010 at 14:26
16

Like

  • The overall feel
  • The graphic logo on the top and the flow-charts on the side and bottom
  • The color palette (like good, solid whiteboard markers - awesome)
  • The sticky note
  • The navigation
  • The font on the number on the vote boxes

Could be improved

  • The mixing of different handwriting-style fonts
  • The badge style
  • The vote boxes
  • The tags

Suggestions

  • For question titles (and any body text), I think a simple, standard web font (like SO and Pr.SE already have) would be both more readable and not conflict with the styled fonts of the navigation [Edit]: Now that I see you said it was Yanone Kaffeesatz, which I like, I wonder if I just need to see a higher res image to like it more.
  • I think the badge style would look good with light-on-dark like SO. It complements the light layout nicely.
  • For the badge icons (gold, silver, bronze), I think a black outline might look nice (like you would draw on a whiteboard to help make the light colors more solid)
  • I like the font on the vote boxes, but (minor nitpick) I think the box background should surround the word as well as the number. The pale-green is also a little strange (white-board colors are bold)
  • I can't really see the tags but I think I like them. I really like the tags on the SE beta theme - I wonder if we could keep the same look somehow (with the little tag hole punch)

Great work and great idea!

8
  • @Renesis oops, I forgot to link to the high res version. it's been since corrected. take a look and see what you think.
    – Jin
    Dec 14, 2010 at 2:19
  • Agree on using a standard font on body text AND titles. Non-standard-font rendering is too sketchy on Windows to be readable for long periods. Dec 14, 2010 at 9:55
  • 7
    Re: badges, how about keeping them as pieces of paper, but turning the colored dots into magnets that attach them to the whiteboard? @Jin.
    – RegDwight
    Dec 14, 2010 at 12:15
  • I like the typography. It's visually interesting and the important things are clear. Dec 14, 2010 at 14:34
  • I think I agree with the tags comment as well. The little tag hole punch provides a visual cue that the box represents a tag as opposed to a badge or some other visual element. Dec 14, 2010 at 14:38
  • @regDwight that's a neat idea. But I'm afraid while it looks awesome against the badge paper background, but when used individually (next to user names) it may look distracting.
    – Jin
    Dec 14, 2010 at 17:08
  • 1
    @Jin: you've got a point, but you've also got the skillz; in fact, look at what Pro Webmasters have — that's not entirely unsimilar to what I'm proposing here, and it actually works. (Even if I absolutely had to pick a site where the badge icons look "distracting", I'd probably go with Gaming rather than Pro Webmasters.)
    – RegDwight
    Dec 14, 2010 at 17:49
  • @RegDwight you got a point there too... I'll see what I can do!
    – Jin
    Dec 14, 2010 at 17:50
8

That is a much more modern design. The previous iteration was a tad predictable for a site about programming, but this one is much better. I especially like the whiteboards in there, as those, or other planning mechanisms, are a big part of programming. The colour scheme (going from the screenshot) looks very readable.

Like that last picture - how very meta!

2

Here's what I really like about this design:

  • The whiteboard theme really reinforces that this site is less about code and more about other things surrounding it. Feels very much like a brainstorming session.
  • The typography is clear, yet not cookie cutter. The handwritten elements are on the less critical repetitive portions of the site while the clear type is on the all important questions.
  • Badges don't have too much contrast to pull your attention to them disproportionately.
  • I really like this site design. It's shows a lot of creativity.

Minor criticism I'll repeat from the last iteration:

The "Add" buttons are done with a different perspective than the remainder of the visual elements. The badges that curl up are from directly overhead, as is the post-it note. The light is coming from the top-left and casts the shadow toward the bottom-right as demonstrated by the aforementioned badges, post-it note, as well as the text boxes.

The "Add" buttons have the perspective from slightly below the button as opposed to overhead, although the shadow is correct.

Perhaps if you made the top of the buttons slightly smaller than the bottom, like a keyboard, you can maintain the consistent perspective and still make it look like the type of button you want. If you are modeling the button after a physical button on something you've seen (looks somewhat like a calculator button), hold the physical object in front of you in the same perspective as the post-it note to figure out how to really make it look like it belongs on the site.

1
  • @Berlink good points. I'll make some tweaks in the final design in css
    – Jin
    Dec 14, 2010 at 18:09
2

It's a cool design.

The whiteboards we use bring a sense of urgency in our minds when it comes to taking action on to-do's, and I believe the whiteboard scheme for the site will help replicate the same feeling when it comes to solving problems, or asking questions that will help the SE community.

1

Nice and clear.

I'm a bit undecided between that one and the previous one with the cyan theme though...

But both are pretty cool.

1

I love this new design.
Just an idea, I would like to see the metaphor of "Sticky Notes on a whiteboard" extended to the Votes, Answers, Views panels to the left of each question. If each of these were a specific colored sticky, I think that would work well, and look really great.

1

I don't quite like the font, I would like something more like, you know, programming font ( something like Courier )

Plus I don't use which board too much. I'm not identified (oops, I'll start feeling bad if I'm the only programmer who doesn't use a white board ) anyway it may be just me.

I actually like the design, but I'm not 100% identified ( probably this would be more like a designer/architect role? )

4
  • 1
    We are designers - of solutions. Programmers is not about programming, it's about programmers. Meaning people and their profession (which is programming) and everything involved. Even though that might include the activity of writing code, that is hardly the core of it. </possible reasons why you're getting downvotes> Dec 15, 2010 at 13:08
  • 1
    Now that makes sense. I'm ok with the downvotes. Not taking it personally.
    – OscarRyz
    Dec 15, 2010 at 17:45
  • 1
    Voted you up for your humility... Dec 16, 2010 at 18:30
  • Voted up, the fonts are terrible - can hardly read the labels at the top. Looks like something that escaped from the 90s :( Dec 17, 2010 at 12:29
1

I'm going to make a different argument why I highly dislike the fonts than OscarRyz did: Its too hard to read. I know giving each site a personal touch is nice, but readability stands above all. I'm in the group that hates the webapps font: Just too blocky and weird. Every single title for the rest of this sites life will take a second glance just to see if they translated it correctly.

I'm all for changing the design. Just not the fonts. The original 3 sites have been widely successful on just the same general font style. Why change it now?

1

This design is good, I like it for the clearance & simplicity over the previous one. Please keep up the good job. :)

0

Very nice design, nice to see that you went for the } Programmers { way...

Only two small remarks:

  • I think that the question section would fit better on a white background, perhaps you could create the background white between the line under "top questions" and the line above "looking for more?".

  • Similar, some elements don't contrast well, for example: Badges could benefit from a yellow note-like background as you are more likely to put that on a whiteboard.

I really like the coffee cup logo, the new user note and the add buttons. Well done!

0

Loving the new design, and just wanted to say that the "post comment" button works much better than before!

0

I like the design, overall. I'm not quite so keen on the badge icons though. When I look at the users page, their "3dness" makes it harder for me to read/find users' names.

(This is a minor nit.)

-1

beautiful!

but... }PROGRAMMERS{ won't compile, the braces are backwards

(yes i know they look like faces, but not that much; to me it looks like a syntax error)

6
  • 1
    @Steven, I'm going to use /* Programmers */ for the final design as I commented above.
    – Jin
    Dec 14, 2010 at 18:09
  • @Jin: good, thank you. I hope you don't expect people to read everything before commenting ;-) Dec 14, 2010 at 18:21
  • @Steven: the original idea was that it signifies Programemrs.SE is "out of scope": that is, in { foo; } bar; { baz; }, bar is outside both defined scopes.
    – user8
    Dec 14, 2010 at 19:06
  • 3
    @Mark: that's even more obscure than braces as faces ;-) Dec 14, 2010 at 19:22
  • 2
    @Jin: I prefer } Programmer { . I have a habit of not really taking anything inside /* */ too seriously. Dec 15, 2010 at 13:00
  • @Jin: My preference goes to } Programmer { too, perhaps we should have a vote about this in a separate question? Dec 16, 2010 at 11:47

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