88
$\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$
12
  • $\begingroup$ Now, as a possible side-effect, StackOverflow has old 230px-wide sidebar... $\endgroup$
    – user11153
    May 4, 2016 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, 2016 at 15:08
  • 1
    $\begingroup$ No review privileges for me anymore :( Great logo though. $\endgroup$
    – cst1992
    May 4, 2016 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, 2016 at 16:04
  • 1
    $\begingroup$ Curved tags will be good, instead of rectangle tags. $\endgroup$
    – Arulkumar
    May 4, 2016 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, 2016 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, 2016 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, 2016 at 13:49
  • 1
    $\begingroup$ If I could put a bounty on a comment, I would @GordonAllocman $\endgroup$
    – Raystafarian
    May 5, 2016 at 18:16
  • 1
    $\begingroup$ Wait, when did we graduate? And how come PPCG still doesn't have one yet? D: $\endgroup$
    – user88
    May 6, 2016 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, 2016 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$
    – user20
    May 13, 2016 at 23:31

15 Answers 15

Reset to default
76
$\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$
7
  • 14
    $\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, 2016 at 19:10
  • 4
    $\begingroup$ The grey in meta looks better $\endgroup$
    – Fabich
    May 5, 2016 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, 2016 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, 2016 at 15:12
  • 2
    $\begingroup$ Thanks for reporting. It will be fixed in one of the upcoming builds. $\endgroup$
    – Paweł
    May 6, 2016 at 10:27
  • 3
    $\begingroup$ @Pawel: Much better now, thanks. $\endgroup$
    – BmyGuest
    May 8, 2016 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, 2016 at 10:32
37
$\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$
12
  • $\begingroup$ Indeed; currently it's 1.66:1 (#1f8e8a on #2dbab4). $\endgroup$
    – Sam
    May 4, 2016 at 18:15
  • $\begingroup$ Related: meta.stackexchange.com/q/237657/237813 $\endgroup$
    – bjb568
    May 4, 2016 at 18:39
  • 2
    $\begingroup$ The entire colour scheme reminds me of an Ishihara test. $\endgroup$
    – user2503
    May 4, 2016 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, 2016 at 21:54
  • 7
    $\begingroup$ I didn't edit it. That's a screen shot from the front page of the site. $\endgroup$
    – user14295
    May 4, 2016 at 23:59
  • $\begingroup$ Looks identical to me (Chrome 50.0 on Windows 10) $\endgroup$
    – 2012rcampion
    May 5, 2016 at 5:13
  • $\begingroup$ Looks identical to me too, in fact I couldn't actually find it when I looked. $\endgroup$
    – Raystafarian
    May 5, 2016 at 18:15
  • $\begingroup$ @Loong NOOOO. Are you telling me I can't be a pilot?! $\endgroup$
    – Raystafarian
    May 5, 2016 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, 2016 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, 2016 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, 2016 at 18:42
  • $\begingroup$ @Daedric nope.. $\endgroup$
    – Paweł
    May 13, 2016 at 21:17
33
$\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$
2
  • 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, 2016 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, 2016 at 17:30
25
$\begingroup$

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

$\endgroup$
0
25
$\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$
7
  • 18
    $\begingroup$ There are three primary colors. $\endgroup$
    – Trang Oul
    May 5, 2016 at 6:47
  • $\begingroup$ @TrangOul fair point. ;-) $\endgroup$
    – BmyGuest
    May 5, 2016 at 7:40
  • $\begingroup$ Thanks. Or even six, if counting both additive and subtractive :) . $\endgroup$
    – Trang Oul
    May 5, 2016 at 7:43
  • 8
    $\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, 2016 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, 2016 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, 2016 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, 2018 at 5:38
13
$\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$
10
$\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$
7
$\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$
1
  • $\begingroup$ Looks like the issue has been fixed in Area51 $\endgroup$
    – Arulkumar
    Jun 17, 2016 at 9:43
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$
2
4
$\begingroup$

Puzzling Meta icon should say "meta".

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

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

enter image description here

$\endgroup$
1
  • 1
    $\begingroup$ It's a caching issue, I can see the real logo $\endgroup$
    – Stéphane
    May 11, 2016 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$
1
  • 3
    $\begingroup$ That's a caching issue. $\endgroup$
    – f''
    May 12, 2016 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$
2
  • 1
    $\begingroup$ This has been raised on this answer, unless you're referring to whole icon. $\endgroup$
    – Andrew T.
    May 9, 2016 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, 2016 at 14:35

You must log in to answer this question.

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