Puzzling Design Pitch - Congratulations, you're graduating!

Question

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 and Your Site Design

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).

---

Home page

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!

Answer 1

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?}

Answer 2

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.

Answer 3

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)

Answer 4

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!

Answer 5

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?)

Answer 6

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

Answer 7

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.

Answer 8