91
$\begingroup$

As you can see the new design just went live. Congratulations! Thank you for your valuable design feedback.

We have also themed the chat rooms and newsletter template for this site, and adjusted the privilege levels to higher thresholds.

If you see any CSS/styling bugs, please start a new post and tag it with and .

Congrats again and thank you for being an awesome community!

$\endgroup$
  • $\begingroup$ Now, as a possible side-effect, StackOverflow has old 230px-wide sidebar... $\endgroup$ – user11153 May 4 '16 at 14:59
  • 33
    $\begingroup$ While you thank us for our feedback, it seems neither of the two most popular answers to that question were implemented. Could you give some explanation as to why you chose not to make those changes? (I do really like the new site design though, nice job) $\endgroup$ – Gordon Allocman May 4 '16 at 15:08
  • 1
    $\begingroup$ No review privileges for me anymore :( Great logo though. $\endgroup$ – cst1992 May 4 '16 at 15:35
  • 2
    $\begingroup$ I don't even use this SE but dang, it's pretty. I was very confused by the icon in the HNQ til I clicked :P $\endgroup$ – cat May 4 '16 at 16:04
  • 1
    $\begingroup$ Curved tags will be good, instead of rectangle tags. $\endgroup$ – Arulkumar May 4 '16 at 16:32
  • $\begingroup$ 0 down vote Huch! Having been member here for quite some time, the design-change came as a real shock to me... I will need some time to "adapt my brain" to the changes - old habbits die hard - but I think it is a very nice and clean layout overall. Well done. $\endgroup$ – BmyGuest May 4 '16 at 17:42
  • 2
    $\begingroup$ @Arulkumar I disagree. I think rounded tags would contrast too harshly with the sharp rectangular accept indicator. $\endgroup$ – Will May 4 '16 at 18:24
  • 4
    $\begingroup$ My name is Paweł and I'm one of the designers at Stack Overflow. Stephane is the author of this design, but I'm gonna help him kill few bugs you've reported so far. So expect some updates from me today and tomorrow. $\endgroup$ – Paweł May 5 '16 at 13:49
  • 1
    $\begingroup$ If I could put a bounty on a comment, I would @GordonAllocman $\endgroup$ – Raystafarian May 5 '16 at 18:16
  • 1
    $\begingroup$ Wait, when did we graduate? And how come PPCG still doesn't have one yet? D: $\endgroup$ – Joe Z. May 6 '16 at 0:38
  • 4
    $\begingroup$ This looks amazing, except for literally one thing. From the tiny icons in the HNQ bar, I can barely tell the difference between the Workplace's logo and Puzzling's logo. $\endgroup$ – fi12 May 7 '16 at 0:19
  • 1
    $\begingroup$ @Paweł Hello! I'm not sure you'll notice this post since it's not tagged bug or feature-request, but I think it looks like people are leaning toward the key. Thank you (both!) again for your fantastic design work! $\endgroup$ – Aza May 13 '16 at 23:31

15 Answers 15

77
$\begingroup$


Another detail: Is the "upvote" in red not a tiny bit to "aggressive" ? In particular in combination with the accept-check it looks a bit odd to me:

enter image description here

I guess, I'd prefer something a bit down-tuned, either in grey or blue.

BTW, I'm sorry I've missed the original email a month ago.

$\endgroup$
  • 13
    $\begingroup$ I agree. It's the only thing I've found really odd so far. Red typically indicates that something is wrong or has failed. $\endgroup$ – KeyboardWielder May 4 '16 at 19:10
  • 4
    $\begingroup$ The grey in meta looks better $\endgroup$ – Fabich May 5 '16 at 7:44
  • 5
    $\begingroup$ For me the whole colour scheme is a bit too bright. My eyes protest against it. But red color for positive vote is totally inappropriate. $\endgroup$ – klm123 May 5 '16 at 9:42
  • 5
    $\begingroup$ I revisited an old question and my first thought on seeing a red up arrow was "Why did I downvote this?", it's just an automatic association, red highlighting = bad or danger $\endgroup$ – user56reinstatemonica8 May 5 '16 at 15:12
  • 2
    $\begingroup$ Thanks for reporting. It will be fixed in one of the upcoming builds. $\endgroup$ – Paweł May 6 '16 at 10:27
  • 3
    $\begingroup$ @Pawel: Much better now, thanks. $\endgroup$ – BmyGuest May 8 '16 at 18:37
  • $\begingroup$ Great, i can recall that this was getting very annoying. Thank you for pointing this out :D $\endgroup$ – ABcDexter Jul 20 '16 at 10:32
39
$\begingroup$


Low Contrast Considered Harmful:

low contrast footer

The footer is almost unreadable if you have good eyesight, and actually unreadable if you don't. Make sure your designs are high enough contrast to be accessible to everyone. The contrast ratio between text and background should be at least 4.5:1 (see page 36).

$\endgroup$
  • $\begingroup$ Indeed; currently it's 1.66:1 (#1f8e8a on #2dbab4). $\endgroup$ – Sam May 4 '16 at 18:15
  • $\begingroup$ Related: meta.stackexchange.com/q/237657/237813 $\endgroup$ – bjb568 May 4 '16 at 18:39
  • 2
    $\begingroup$ The entire colour scheme reminds me of an Ishihara test. $\endgroup$ – user2503 May 4 '16 at 19:47
  • $\begingroup$ I think it's perfectly readable. The snippet above honestly looks edited to make it less contrasting, because if I look at the actual page, it's easier to read than the above. It should also be noted that the related meta post linked just above hasn't changed anything. $\endgroup$ – mbomb007 May 4 '16 at 21:54
  • 7
    $\begingroup$ I didn't edit it. That's a screen shot from the front page of the site. $\endgroup$ – snailcar May 4 '16 at 23:59
  • $\begingroup$ Looks identical to me (Chrome 50.0 on Windows 10) $\endgroup$ – 2012rcampion May 5 '16 at 5:13
  • $\begingroup$ Looks identical to me too, in fact I couldn't actually find it when I looked. $\endgroup$ – Raystafarian May 5 '16 at 18:15
  • $\begingroup$ @Loong NOOOO. Are you telling me I can't be a pilot?! $\endgroup$ – Raystafarian May 5 '16 at 18:15
  • $\begingroup$ making it slightly less visible was our intention. but seems like we went too far. I'm going to make it slightly more visible. $\endgroup$ – Paweł May 6 '16 at 10:32
  • 2
    $\begingroup$ @Paweł Better, but it still manages to fail every single accessibility test: webaim.org/resources/contrastchecker/…. i don't see a reason why it should be slightly less visible; sites across the network (like Stack Overflow) have contrast ratios in the footer much better than that of Puzzling (SO's is 6.11:1 vs. Puzzling's 2.9:1). $\endgroup$ – hichris123 May 7 '16 at 15:24
  • $\begingroup$ @snailplane It must be the white background of an answer that makes it harder to see. Anyways, I like the way it looks. $\endgroup$ – mbomb007 May 11 '16 at 18:42
  • $\begingroup$ @Daedric nope.. $\endgroup$ – Paweł May 13 '16 at 21:17
35
$\begingroup$

I only have one problem - In the Hot Network Questions, this logo is hard to distinguish at first glance from the Workplace logo. Perhaps the classic impossible triangle?

$\endgroup$
  • 6
    $\begingroup$ I assumed this was deliberate. It's like a snapped version of The Workplace, to symbolise the fact most people visiting this site should be working not getting distracted by puzzles ;-) $\endgroup$ – user56reinstatemonica8 May 5 '16 at 15:15
  • 10
    $\begingroup$ @user568458 Wouldn't that mean all SE sites should have a modified version of the The Workplace's logo? $\endgroup$ – svick May 5 '16 at 17:30
26
$\begingroup$

Thank you! I'm sure we can agree that it looks amazing!

$\endgroup$
23
$\begingroup$

Minor suggestion (or question): I think the design would lool slightly better if the icon would use all four primary colors instead of just red/green/yellow, in particular the minaturized icon.

I've made a rought mock-up (not aliased correctly, and you might want to adjust the exact color values as well) to give an idea: (right is current display, left is my suggestion)

enter image description here

$\endgroup$
  • 15
    $\begingroup$ There are three primary colors. $\endgroup$ – Trang Oul May 5 '16 at 6:47
  • $\begingroup$ @TrangOul fair point. ;-) $\endgroup$ – BmyGuest May 5 '16 at 7:40
  • $\begingroup$ Thanks. Or even six, if counting both additive and subtractive :) . $\endgroup$ – Trang Oul May 5 '16 at 7:43
  • 7
    $\begingroup$ Psychologically speaking, there are four (or six if you count black and white): Red, Green and Blue based on the three types of cone cell in our retinas, plus Yellow which is abstracted in the LGN when there are high levels of both red and green but low levels of blue. These are formed into opposing pairs, red-green and blue-yellow, and every other colour is essentially some mix of colours from different pairs. $\endgroup$ – user56reinstatemonica8 May 5 '16 at 15:22
  • $\begingroup$ I actually think this would be a good thing, the puzzle icon on the hot questions looks dull and faded. $\endgroup$ – Raystafarian May 5 '16 at 18:13
  • $\begingroup$ There is a logic in it, but purely subjectively - my eyes don't like how left logo looks. And I think eyes are more important here than logic. $\endgroup$ – klm123 May 12 '16 at 6:51
  • 1
    $\begingroup$ @TrangOul well those are the three primary colours when talking about light, and not painting and such. (Just nitpicking). $\endgroup$ – Mr Pie Jul 10 '18 at 5:38
14
$\begingroup$

This is a minor change, but those little badges-puzzles-pieces, they are much better than keys, but I would rotate them, otherwise they look exactly like Apple logo.

$\endgroup$
9
$\begingroup$

I appreciate the choice of the jigsaw puzzle piece instead of the keys initially used, but I would have preferred something similar to this, as someone suggested:

enter image description here

The actual graphic too much resembles a "bitten apple", or something like that...

$\endgroup$
8
$\begingroup$

In the Area 51 Launched Proposals section, the new icon is not fit with the placeholder, a minor top part of the icon is truncated.

Top part truncated with new icon

$\endgroup$
  • $\begingroup$ Looks like the issue has been fixed in Area51 $\endgroup$ – Arulkumar Jun 17 '16 at 9:43
5
$\begingroup$

Puzzling Meta icon should say "meta".

$\endgroup$
  • 1
    $\begingroup$ Well, now it does say meta. $\endgroup$ – EKons May 9 '16 at 14:17
4
$\begingroup$

Something I would like to point out:

On the side bar hot questions you get the proper icon for Puzzling questions, but when you go to Stack Exchange hot questions page (http://stackexchange.com/questions?tab=hot) the icon for Puzzling questions is still the blue thought bubble with ?? instead of the new logo

$\endgroup$
3
$\begingroup$

Ok, I noticed that on my network profile the Puzzling icon is still the Beta one.

enter image description here

$\endgroup$
  • 1
    $\begingroup$ It's a caching issue, I can see the real logo $\endgroup$ – Stéphane May 11 '16 at 7:06
2
$\begingroup$

A : On the Stack Exchange Homepage, I still get this:enter image description here

Note the ?? standard icon, not the <> design. Will this be changed?

$\endgroup$
  • 3
    $\begingroup$ That's a caching issue. $\endgroup$ – f'' May 12 '16 at 0:23
0
$\begingroup$

Just a few more suggestions that are completely subjective.

I'm not sure what CSS changes can be made that would affect only this forum, but I think we could do with some more white space. The new upvote/downvote icons are quite wide (in comparison to other stacks' icons), and for some reason, the entire area around the posts feels tight. The following CSS changes give a bit more breathing room:

#content {
  padding: 15px;
  padding: 25px;
}

#question-header {
  margin-bottom: 1em;
  margin-bottom: 2em;
}

With regards to the icons, can we not have the color entirely overlay them? The blending between the overlay color and the arrow color causes it to feel muted and inconsistent with the other non-active icon.

Also, can we have the text from the logo be vertically aligned as middle rather than baseline with respect to the buttons to its right? The baseline alignment makes it so that the logo is placed higher up, and the uneven vertical spacing of the logo slightly bugs me.

$\endgroup$
0
$\begingroup$

The chat oneboxing still shows the old icon (not sure if it should be reported here or elsewhere). It may easily be a caching error, but who knows...

enter image description here

$\endgroup$
0
$\begingroup$

The Pz SE (Puzzling StackExchange) icon and logo look much like W SE (Workplace StackExchange), especially in the meta...

$\endgroup$
  • 1
    $\begingroup$ This has been raised on this answer, unless you're referring to whole icon. $\endgroup$ – Andrew T. May 9 '16 at 14:31
  • $\begingroup$ @AndrewT. Well, I think answering again is so the icon be changed (yes, completely, not just the small icon) Edit: Edited my answer. $\endgroup$ – EKons May 9 '16 at 14:35

You must log in to answer this question.

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