# Puzzling Design Pitch - Congratulations, you're graduating!

I'm Stéphane, a senior product designer at Stack Exchange. First, I wanted to announce that this site is now starting the process of moving out of beta to become a fully-graduated site!

Congratulations!

Graduation comes with a few perks, which should come out over the next couple weeks:

• You will soon have an election for community-voted moderators.
• You will no longer see the "beta" label attached to your site's name.
• You will become eligible for question migration paths with the rest of the network.
• You will soon be able to select your own community ads.

I have already begun work on your site's design, which will give you your own unique theme that reflects the community's topic and culture. 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.

Once the design goes up, you will receive a link in the footer of other sites in the network, along with the ability to migrate content to and from other sites — and the acclaim of a public launch that says, Congratulations, you finally made it!

# Design concept

After going through the top questions of this site, it was time to find a strong icon which could stand on its own. To do so, I had to dig into the meaning of "Puzzling" and think about how we'd represent it with a shape. Two categories and ideas came out of this exercise:

I believe those 2 paths capture the overall themes of our "Puzzling" community, but it was hard to keep only one, so I decided to give it a try and create a unique shape using both:

Final logo:

Regarding the logo environment, I kept some of the same themes (discover and mystery) and came up with a pattern which conveys "a few clues within a thousand pieces of evidence" (the light pieces represent the clues).

The site will use the pattern described above and a contrasted background in the header. This background conveys discovering (putting the light on something).

We believe the design and branding will work very well for this community, it’s unique and capture the correct mood. We’d love to hear your feedback, and if there are no major design changes, we’ll launch the new site design and graduate the site from Beta soon.

Thank you for for making this such a great community!

• HYESSSSS. Also, can I just say, this design looks fantastic. – user20 Mar 30 '16 at 8:25
• I have mixed opinions on the logo, itself, but it definitely seems to fit. The keys for the badges look great, in my opinion! – Khale_Kitha Mar 30 '16 at 12:56
• I need the question mark on the logo somehow. – manshu Mar 30 '16 at 13:05
• It looks really good!!! There's just something wrong with the logo colors... I wouldn't expect on the bottom-right branch the green outside. I know it's impossible geometry, but it should look real when you look at one single corner at time. – Alessandro Mar 30 '16 at 14:39
• Love it. But personally I also expect a jigsaw puzzle piece somewhere as it is a major icon for puzzles in general – Ivo Beckers Mar 30 '16 at 15:51
• I like it a lot, and, as I have zero complaints about the proposed design as-is, I will defer to my fellow puzzleurs (puzzlists? puzzloids?) for that. – question_asker Mar 30 '16 at 17:23
• Looking at it again, it seems like the word "Puzzling" is just a smidge too high next to the logo. It's really small, and I only just noticed it, but is this just me? – user20 Mar 30 '16 at 21:30
• @Emrakul: Nope, I see it too. My hypothesis (read: blind guess) is that it's centered on the logo, but not on what the logo would be if completed, so it looks weird. – Deusovi Mar 31 '16 at 2:59
• @Deusovi Hmm... I see what you're saying, and it seems plausible. Maybe it also has to do with how I'm expecting the horizontal line in the middle of the P to line up with the icon? Who knows, I'm not a graphic designer. – user20 Mar 31 '16 at 3:03
• As far as I can tell, that logo is not impossible geometry (not that it doesn't look good/professional) – elmer007 Mar 31 '16 at 13:46
• The case of the perfect Puzzling SE logo might be unsolvable. Many SE logos are arleady enigmatic and all of SE is built on the question mark. At sizes usually displayed, SE logos pretty much amount to shapes and shades -- check out the color-bordered diamond of workplace.stackexchange.com – humn Mar 31 '16 at 14:46
• I really like the design even though it doesn't scream "puzzling" at me - it doesn't need to. – Raystafarian Mar 31 '16 at 16:26
• Jigsaw pieces might be better for badges – Raystafarian Mar 31 '16 at 21:52
• Well, the logo and the site design in fascinating. The points raised in both the answer are good suggestions. Please make the site (more) awesome ^_^ – ABcDexter Apr 1 '16 at 11:46
• I like the concept for the logo. The most important part of a puzzle is the potential for an aha! moment - when you've found the entry into the heart of the matter and the solution becomes clear. – Lawrence Apr 4 '16 at 12:33

Firstly, looks awesome. Seriously.

One very minor thing though (as mentioned in comments), I think the Puzzling title needs to drop down by a few pixels to align more with the "logical" centre of the logo. I also think it could do with a little more breathing room between the logo and the title in the header. Both changes shown here:

Other minor thing I wanted to mention, is actually a vote in favour of the design. I see a few people saying they'd have expected/preferred to see a question mark in the logo, but I like it as designed*. I think that a question mark would have been the "obvious" choice, but I like the proposed design, as it's more unique, interesting and (most importantly) enigmatic... just like a good puzzle should be.

* Though perhaps a missed opportunity?

• Your description of the logo as enigmatic is astute, as it certainly does conjure up memories of those wooden enigma puzzles they sell at board game/magic shops and airport bookstores. A question mark logo may have been what I expected, but that doesn't mean it's what I need. The positioning adjustment definitely adds some nice breathing room, too. – raisinghellyer Mar 31 '16 at 13:52
• I really like this subtle change. The new design looks :100:. – Ian MacDonald Apr 13 '16 at 14:55
• I've just noticed the same occurs in chat. Should I bring it up in another post, or edit this answer? – boboquack Sep 5 '17 at 8:46

I really like the design graphics and colors. I do have some concerns about using the keys for badges - keys usually have something to do with security rather than "unlocking" a puzzle.

Jigsaw puzzle pieces, I think, would be a much better badge indicator as it's more intuitive to puzzling and less likely to be confused with some other type of site (lock-picking anyone?).

Also, despite not being a graphics type of person, it doesn't seem like the puzzle piece would be any more intricate (read: busy-looking) than the keys.

• I'm Paweł - designer at Stack Overflow helping Stephane (guy who designed this site) with killing some bugs. Anyway, puzzle seems like a better symbol indeed HOWEVER then one you proposed has very "heavy" shape with lots of details which won't look good on small area (yes, we are kinda limited with size). Nevertheless, I'm gonna update it to other puzzle shape and will test it live for next couple days. Then, we will decided if we want to keep that puzzle OR revert to key symbol. – Paweł May 6 '16 at 10:57
• @Paw I think that seeing the result it's clear that the key was better, but that's just me... – yo' May 9 '16 at 5:13
• @Pawel: I disagree with yo', I think the puzzle piece is a better fit for Puzzling than keys. – CodeNewbie May 9 '16 at 8:56
• @CodeNewbie i'd appreciate reading my comment more carefuly. thanks! – Paweł May 9 '16 at 10:33
• @yo' why? I think the corner piece is genius - much better than my suggestion – Raystafarian May 9 '16 at 11:05
• @Raystafarian (Sorry I wrote that from the cell phone so I made the comment very short.) The problem is, when you look at it, you imagine 100 different things and none of them is a puzzle piece. Maybe it's just bad aliasing, bad hinting or whatever, but it simply does not look like a puzzle piece at all. – yo' May 9 '16 at 11:07
• @yo' fair enough, I can see that being the case if you were unaware you were on puzzling – Raystafarian May 9 '16 at 11:11
• Well, if you asked me, I would have preferred a question mark as the badge. That's a puzzle itself -- you really received a golden question mark as an achievement? – yo' May 9 '16 at 11:12
• @Pawel Where would you like to give our opinion on the new icon? Some people had posted here but I wasn't sure if this had come to your attention, yet. – Khale_Kitha May 13 '16 at 12:55

An idea just occurred to me... I'm not sure if it's good or not, but I'll float it here and let the community decide via votes.

Background:

There has recently been discussion about if/how to handle spoilers in comments on Puzzling.SE. The issue is fairly specific to PSE, so doesn't warrant stackexchange-wide code changes, but would still arguably hold some value to this site. Unfortunately the only workarounds available are very clunky to the point of not being worth the usability downsides.

Proposal:

Since we're getting officially launched, we'll be getting our own custom stylesheet, which gives us the potential opportunity to hack in some limited custom functionality (my understanding is that we don't get custom javascript, which limits the power we have access to)... So, what I propose is that we include the following style rules:

.comment-copy b i {
background-color: #ccc;
color: #ccc;
font-style: initial;
font-weight: initial;
}
.comment-copy b i:hover {
background-color: inherit;
color: inherit;
}


Doing so would effectively convert any bold and italicised comment text into mini spoiler blocks. Meaning you could type "I think ***the butler*** was the killer", as a comment and have "the butler" hidden to the casual scroller-by.

Pros:

• Negligible implementation cost (of course this could be completely wrong)
• Writing spoilers in comments is trivial as it's just simple markdown with no external dependencies/lookups/encodings
• Spoiler comments are revealed with a simple mouse hover on the web, so it's not a pain to readers

Cons:

• The mobile website and the mobile app don't get the same custom stylesheets, so it would still render as bold/italics which would ironically draw more attention to the spoiling text (but at least it wouldn't break for them or make them inaccessible)
• We'd lose the ability to use bold+italics in comments (though bold and italics would be fine in isolation)

(another option to somewhat mitigate the cons, at the cost of making the syntax slightly clunkier would be to use *italic code*, or some other less common/visible markdown combination)

• If the community needs a way to handle spoilers in comments, we'll find a solution :) – Stéphane Apr 6 '16 at 7:40
• @StéphaneMartin - Awesome. Thanks in advance. :) – Alconja Apr 6 '16 at 7:48
• I agree that spoilers in comments should be added. This is one of the few sites where spoilers are commonly discussed there. – ASCIIThenANSI Apr 7 '16 at 18:03
• However, misusing some pre-existing markdown that users all over SE are expecting to behave in exactly the way they intend seems the wrong approach. It's not so much about not being able to type bold/italics anymore rather than users expecting to type bold/italic but suddenly having half of their comment magically disappear. – Chris says Reinstate Monica Apr 22 '16 at 15:02
• @Stéphane - just curious, has there been any progress on this? – Alconja May 17 '16 at 2:18
• @Alconja I will be working on all Puzzling issues this week (probably end of the week) – Stéphane May 17 '16 at 7:12
• @Stéphane - Cool. No pressure, was just curious. Thanks for the response. – Alconja May 17 '16 at 7:46

My suggestion would be to include an actual puzzle in the design somewhere. It doesn't have to be an insanely hard Kryptos style mystery for the ages, but it would be nice to have a hidden or encrypted message to find.

Ps. Apologies if there already is one and I just haven't put the effort into solving it!

• If there isn't a cryptographic message saying Puzzling I'd be very disappointed. – warspyking May 6 '16 at 3:04

Wishful text-style thinking. When this site is on the operating table, any chance for:
A font with clearer distinctions between letters?
Cleaner format settings for itemized lists?
Font compatibility with MathJax? This could also solve font clarity problems.
Worked fairly well for Physics SE: Can we have a font which harmonizes better with MathJax?

Details. The present style is aesthetically pleasant but includes familiar problems that probably stemmed from well-intended intuitions and logic but became apparent in full context.
The font would be clearer as not sans serif, even if less attractive or compact.
• To correctly read a puzzle should not require examination of source text.
• Lowercase l (L) and capital I (i), for example, are now identicallllllIIIII.
• Lowercase r and n now blend to look like lowercase mmrnrnrnrnrnmm.
• Then again, some existing puzzles rely on sans serif.
A bizarre phenomenon in the English language
Letter Sequence Shape Shifter
Itemized lists would be clearer with smaller bullet size, vertical separation, and indentation.
Less-clumsy formatting could make longer puzzles more likely to be read.

• Bullets should be much smaller. Oversized $\raise1mu{\small\bullet}$ bullets draw attention to themselves and away from text. Smaller • bullets would neither be overlooked nor mistaken for stray . periods.

• List items could be closer vertically. A little extra spacing between list items does help, but the present somewhat-overgenerous spacing dilutes hierarchical structure and wastes screen space, all without adding clarity.

• First-level bullet • indentation should be eliminated. Unnecessary indentation muddies vertical structure and, in defiance of common sense, does not enhance the completely-sufficient visual cues of • and hanging indent. Incidentally, the inset of this particular 2nd-level item is at the present style's 1st level of (over)indentation.

• Inner-level bullet • indentation should be aligned with the text margin of the previous level. This particular subitem complicates vertical alignment by adding two visible levels of indentation, one for $\raise1mu{\small\bullet}$ and another for text.
This sub-subitem is meant to show that one indentation level per list level is plenty.
• It's easy to overlook some ways that our eyes are counterproductively susceptible to distraction by unnecessarily generous formatting. Didn't the discreetly formatted list items above register at least as readily as the typically formatted items?

Then there's MathJax, truly valuable for going beyond ticker-tape text. But do its font settings look overly $\sf emphatic$ or $intrusive$ to you? (Those samples weren't even $\bf boldfaced$.) And numbers \0123$\$ 3456 \$\small$\small 6789$\$ vary like a ransom note. The first screenshot below shows how the beginning of this paragraph is rendered on my screen. Physics SE did go far in fixing essentially the same problem last year, though the second screenshot shows incomplete success.
At Puzzling SE:
At Physics (and Mathematics) SE:

If you don't share these concerns, no need to vote up of course. Others might not be so lucky though, so no need to vote down, either, unless you think these ideas would make things worse. (How?)

• Not going to downvote, because I don't feel strongly enough about it, but from a purely subjective perspective, I prefer a sans serif font for screen based reading... (and to answer the "how would it make things worse?" question, there are minor edge case puzzles that rely on the ambiguity of character rendering) – Alconja Apr 18 '16 at 1:04
• Examples of sans-serif-dependent puzzles are now included in the post – humn Apr 18 '16 at 10:29

I have to say, I am stoked like the most powerful fire- stroked like the most purri-full cat!- to see that Puzzling is ascending in the ranks, and also that so much thought has been put towards fully representing the site in its imminent design.

But...

Since I sympathize with manshu's need for a question mark and concur with Ivo Beckers' comments on jigsaw puzzle pieces, and mostly because I look for excuses to mess around with designs,* I have spent a wee bit of time cranking out this (call it a conglomerated-concept):

Having been around these parts less than a full year, I won't pretend to be any final word or authority on what really speaks to the community, so- Everybody- take this for what you will. If nothing else, it was a fine alternative diversion to actually puzzling on the site, and at least a few of my cohorts might be pleased to see it, if only in passing.

All that muck aside once again- beautiful job on what you've presented us. Who knew such a rich palette of colors could be seen on our humble site; I can't wait to see it fully realized.

EDIT

One additional thought flying through my brain is the similarity of logos between this:

And this:**

But this may be a lone observation, and is nothing less than a musing (much like my own little design), simply placed here to facilitate discussion.

Note: I just noticed that humn pointed this out in the comments, but I'll leave the graphical representation here, since I really enjoyed the cut/paste process that produced them.

*I am not, however, on the Graphic Design.SE... That's puzzling....
** Workforce logo

• Locks and keys could be confused with security – Raystafarian Mar 31 '16 at 18:10
• @Raystafarian I agree, which is why I don't think the Key badges are as appropriate. Stylistically, they are pretty, but don't hit the mark as much for me. The inclusion of the keyhole on my slapdash whim of a design was to merge elements from Stéphane's proposal with the other opinions voiced in the comments. It's just me entertaining my personal taste du jour. – raisinghellyer Mar 31 '16 at 18:36
• I think you have a good point about looking similar to Workplace, but it's kindof buried by the other suggestion. Maybe split it into a separate answer? – Bobson Apr 8 '16 at 5:06
• I like it... But not enough colour xD – warspyking May 6 '16 at 3:04
• (a bit late now), but as an outsider looking at the hot network questions bar, I was feeling confused as to why workplace.se had gotten it's colors changed. I clicked and was surprised to be brought here. – GiantCowFilms May 6 '16 at 16:50

Sorry, but it's still bothering me.

## I don't like the logo.

It doesn't speak puzzling, or riddles, or mystery, or problem-solving, or anything Puzzling.SE to me, and the colors don't really help either. Unfortunately, I don't have anything to contribute towards an alternative. I really, really do appreciate the time, effort, and thought you've put into it—I can't emphasize this enough; it's far more than anything I've been be able to come up with—but I'm not satisfied with it.

A lot of my other suggestions and concerns have already been voiced. The only other thing—and this is a minor, optional thought—is blue in the background of the proposed home page. It seems highly saturated; I liked the desaturated blue in the logo images better. And frankly, I'd suggest experimenting with a light gray instead. It might seem boring, and it might just be my personal preference, but I don't feel the need to add a ton of color now that we're graduating. If anything, a hazy gray suits the puzzling theme better.

• This... might benefit from some explanatory text. – user20 Apr 2 '16 at 11:51
• Looks like someone spilled ink on a sudoku puzzle. – mmking Apr 3 '16 at 15:42
• Looks like the user wants to change the logo. See the different logo right? – Ashish Ahuja May 6 '16 at 8:45