The PPCG Site design is on its way - help us make it awesome!

Question

The long wait is almost over!

You have been eminently patient while we've gotten other site designs finished and then completely redesigned the layout of the network. Now that all of that heavy lifting is complete, we're working on designs for our graduated sites that are still in the beta theme and you're up next!

Over the next few weeks we'll be going through the following process:

1. Collect ideas from y'all about what you'd like this site to look like (that's what this post is for) See below for more info
2. Create a design & release it and get feedback from y'all. We'll make the site live and post an announcement on meta where you can give feedback.
3. Make adjustments We hope that you love the design we built in the prior phase but we expect some minor adjustments may be necessary.

Phase 1 - Collecting Ideas

You have until 17 April to submit ideas for your site design.

It looks like y'all have been really excited about the possibility of a site design for a while and even have a userscript to change the site appearance. I see that discussion was almost three years ago. We'll be looking those ideas over in addition but if you have new ideas or if there are specific standout ideas on that discussion that you'd like to mention again, please add them as answers here.

We're excited to revisit this process with you and I'll be here to answer any questions you have. While I'm not a designer. I've been working with site themes for many months now so I have lots of the answers and, if I don't, I know who to reach out to.

As I mentioned, the sites have gone through a big redesign since you graduated, so there are some limitations to what we can do for you but there's still a lot we can customize. If you're interested in seeing what you can expect to be customized, there's a detailed outline on Meta Stack Exchange here.

We need your help creating a gallery of concepts for Lisa to work from to create your design. Don't worry if you're not artistic or able to come up with beautifully rendered examples. You're the experts in your site and how to exemplify your subject's identity and we need your help if we want your site to fit you.

That could be symbols or a color palette or example images - things that you think really capture some of the personality of the community or define PPCG so that when new users come here, they'll immediately know they're in the right place. It can also be helpful to know what you specifically wouldn't want in some cases - I see you mention not wanting anything golf-related on the other post, for example.

Lisa's a really talented designer, so even if what you send our way looks like the drawings my two-year-old brings home from school, she's well-equipped to interpret that and create a beautiful, representative design we hope you'll love.

Design-wise, that's all I've got for you. Don't hesitate to ask if you have any questions either about the process or what we'll be customizing, feel free to ask in comments. Don't forget the 17 April deadline. We'll be back a week or two after it with more information and maybe even your design!

Reputation Levels

Oh... you're still here? I wanted to take a minute to talk about rep levels, which you may remember are tied to the design release.

Y'all have plenty of active, high reputation users (and have been begging for the higher reputation levels), so we'll also be raising your reputation levels once the design is complete. This means that some of you may lose privileges you currently have as we do not grandfather users in. To see more information about this and what the reputation levels will change to, please see the Meta Stack Exchange FAQ: Reputation requirements compared.

Oh, Who am I?

If you don't know me, I'm one of the Community Managers here at Stack Exchange. I'm here to listen to your input and convey it to our designer, Lisa, so that she can start working on your site design.

Update:

Thanks so much for your input. We're looking it over and will start working on your design.

I do want to say a couple of things, though. I've really enjoyed seeing the neat ideas y'all have for changing this site and I'm really sorry to have to clarify... when I say "site design" I mean what some sites call a "skin". This change won't be impacting the functionality or positioning of where the elements on the page are here.

If you have requests for this sort of thing, you can create a Feature Request post here on PPCG Meta - or link me to one if it already exists, but they won't be considered as part of this work. I'm sorry.

Answer 1

Nothing in the design related to Golf

Not a design idea but rather an anti-idea.

Let me repost one very popular answer about our old graduation design ideas question: "no relation to the sport golf" by Maltysen.

I'm not sure what design I want for PPCG, but I sure don't want anything related to Golf in that design.

Answer 2

Better, and served, monospace font

Yes, I know this isn't on the list of currently modifiable features, but I really think that this is the single most important design issue that is very easy to fix.

The current monospace font stack is:

font-family:
Consolas,
Menlo,
Monaco,
Lucida Console,
Liberation Mono,
DejaVu Sans Mono,
Bitstream Vera Sans Mono,
Courier New,
monospace,
sans-serif;

A quick glance at our site's content will show that non-ASCII programming languages are very frequent here, some of them maybe even as frequently used here as the mainstream languages are "out there". This means that good support for non-ASCII monospace text is essential. Unfortunately, the first five entries in the stack are not very good, and no fonts are hosted by Stack Exchange as fallbacks if the user does not have any of the listed fonts.

As the Microsoft Edge browser becomes yet another Chromium browser, it becomes even more important that a good font is available, because Chromium's Blink rendering engine prefers a consistent look over glyph fidelity. This means that if a font is missing a character, Blink will rather use Unicode combining characters to attempt to overlay characters that together look like the needed symbol, rather than searching up the font stack for a font that has the composite symbol. If you see ≢ as similar to ≡/ rather than ^_\$≢\$ then your browser has this issue.

I suggest that DejaVu Sans Mono be moved up to the very top of the stack, and that it is served by the server (with @font-face) when not present locally. It is the only one of the listed fonts with a very wide repertoire of characters.

I'd personally take this even if it meant forgoing all other site-specific design tweaks, but in fact, that particular font does have a close relationship with the site: It is extremely common for answers to link to Try it online, a site which forces DejaVu Sans Mono for all code. If you had the ≢ display issue mentioned above, check out how nicely it renders in Try it online! Note that Try it online is run by one of our moderators, and that much of the content there (dedicated code golfing languages) was created and submitted by PPCGers. So Try it online and PPCG are very closely knit together. In fact, a good percentage of our members would probably be pretty happy if PPCG's design resembled that of Try it online…

Comparison of fonts

Below is a comparison of how complete the various fonts are when it comes to the non-ASCII characters in six popular programming languages on PPCG. Characters that are included in a font are highlighted in orange on black (dark version with included characters in blue on white). APL385 Unicode has been added for completeness.

Answer 3

Text content should suggest competition as much as possible

PPCG is a competitive site, not a question and answer site. All Stack Exchange Tour pages say

We're a little bit different from other sites.

I've always understood this as referring to the other Stack Exchange sites. Although I realise now that it may actually not be the intent, we are actually a little bit different from all the other Stack Exchange sites.

Text should be adapted, mainly to replace the terms questions/answers with challenges/solutions. This has already been done in one place on the Tour page, but the main page says Top Questions title and has Ask Question, Post Your Answer buttons etc. that should instead read Top Challenges, Post Challenge, Post Your Solution etc. and the Tour page needs a bit more tweaking:

Programming Puzzles & Code Golf is a challenge and solve site for programming puzzle enthusiasts and code golfers. It's built and run by you as part of the Stack Exchange network of Q&A sites. With your help, we're working together to build a library of programming puzzles and their solutions.

We're quite different from other sites. Here's how:

Post challenges, see clever solutions, be distracted

This site is all about posting and solving programming challenges. It's not a discussion forum. There's no chit-chat.

⋮

Answer 4

Links to sandbox

The sandbox is a meta thread which is intended to help people get feedback on draft questions and so reduce closures, arguments, and other friction on the main site. It's been successful enough that other stacks have copied it. Its biggest problem is channelling new users there. Currently we have:

1. It's a featured meta-question. This requires the diamond mods to retag it regularly, because being featured auto-expires.
2. There's a popular (second most popular at +26/-0 behind first place on +33/-0) community ad for it.
3. There's a link from the on-topic help page.
4. Failing that, it's common to leave comments directing new users to it.

There are two design changes which would help:

1. In the "Ask a question" page, add a link to the page. Suggested text:

   It's worth polishing your question in the sandbox if you haven't already done so.

2. Add a link in the right column, above or below the "Featured on meta" panel. This could perhaps use some imagery (inspired by the community ad?) in addition to text. Then the mods could remove the featured tag, because the new link would be a more eye-catching replacement.

Answer 5

Incorporate Conway's Game of Life somewhere

Game of Life (GOL) is A) Very much in the spirit of this site. It's a mathematical curiosity that only exists for the entertainment of people who like spending their time thinking about math and programming. And B) PPCG has a long history of being fascinated by GOL. Arguably, the most notable challenge of all time on this site was Quest for Tetris. And of course, there was also The Digital Clock built in GOL, which is a smaller project, but arguably more impressive, as it was done by a single user.

I don't think the theme should be dominated by GOL. But a little reference somewhere, perhaps in the footer, would be great. A glider is probably the most famous GOL emblem, but I think something like an R-pentomino captures the spirit of the site much better. It's a really small and simple construction (like a code-golf snippet) that takes a very long time before stabilizing (even though it appears simple/short, it accomplishes a lot).

Answer 6

Distinctive is good

We're pretty unusual for a SE site for being about challenges rather than questions and answers. So, I think it would be good to have a distinctive design that set us apart. I know that every site design is custom and special, but I this think is an opportunity to make something that really stands out.

In particular, it would be good to stylistically distinguish us from the many programming sites where people go for coding help, which hapless newbs seem to keep mistaking us for. Part of the issue is that the SE design screams "Q&A", and has become an iconic template that other Q&A sites have copied. While there's many things we can't change about our site layout and text, maybe a really distinctive visual scheme will make it clear that we're different.

Perhaps we could take visual cues from other coding contest sites such as SPOJ, Codeforces, and CodeChef.

Answer 7

Feel of code golfing

Here's a "palette" of words to try to convey the feel of code golfing:

Shorten, optimize, remove characters, squeeze, revise, strikethroughs, pare down, cleverness, minimize, efficiency, loopholes, inventiveness, unintended uses

I have no idea how these could be expressed visually, but that's why we have a designer :)

Answer 8

One unusual characteristic of this site is the prevalence of esoteric programming languages and paradigms. There are three in particular which I think might be appropriate design elements for the site.

The first is APL. It is significant in code golf as having a good claim to be the first language in which people competed at golfing, and it is visually distinctive. I suspect that Adám (the same Adám who has posted a couple of answers to this question) might be able to supply a large chunk of real working code.

The second is Wireworld. (For image searches it may be useful to include the word automaton). This is very visual, very simple (it uses a square grid and four colours, but the logic is really in the wiring so one solid colour and one fully transparent one suffice to convey the essence), and Turing complete. For example, take Ed Pegg's counter. (If you want to ask Ed Pegg for permission to use it, he is active on math.stackexchange.com).

The third is the Penrose tiling. While this is not itself a programming language, it is possible to build Turing complete automata on top of it. It's been used as a design feature in architecture, particularly in CS departments, and is quite recognisable. It conveys structured chaos.

Answer 9

Design should suggest competition as much as possible

PPCG is a competitive site, not a question and answer site. All Stack Exchange Tour pages say

We're a little bit different from other sites.

I've always understood this as referring to the other Stack Exchange sites. Although I realise now that it may actually not be the intent, we are actually a little bit different from all the other Stack Exchange sites.

Artwork (banner, icons, etc.) should reflect this as much as possible. Here are some inspirational words:

• trophies

• medals

• podiums

• measuring tapes

• flags

• laurels

• gold, silver, bronze

Maybe we should even switch to serif font to set us apart from most general programming topic sites like Stack Overflow and Code Review? MathJax is becoming more popular here too, and looks better with surrounding serif body text than sans serif does.

Answer 10

Please keep the green color palette from the user script

It just looks really nice.

At the very least, anything but blue - I think we're all tired of seeing blue.

Answer 11

Remove The Minimum Character Requirement

Not sure if this is within the remit of the site design or if it's even possible on a per-site basis but, on a site that (for the most part) focuses on how short we can make our answers, having a minimum character count very often proves to be an annoyance. On more than one occasion it has, at least for me, delayed the posting of a solution just long enough for someone else to slip in there ahead of me while I padded my post out with a another character or 3.

So, if at all possible, please consider removing that minimum.

Answer 12

Don't spam sub-character information.

Don't use grid lines where each cell is much smaller than an overlapping character (such as cells resembling pixels). It would be too noisy as a background if it shows whole characters. Personally I don't see a problem if there are cells with similarly sized or smaller characters, or however big or small cells without characters. It may be also acceptable in some cases for abstract grids without grid lines or even square cells.

Don't create symbols where two letters share a stoke. Ugly and unintelligible in most cases. Personally I don't see a problem for symbols with some characters partially hidden. (But that doesn't mean they would be appealing.)

These may seem random, and not likely to happen (and maybe designers already knew this). But I feel it too easy for someone to come up with such ideas, and going into a dead end.

Answer 13

Concrete suggestion for site icon

Although a general site design may be derivable from this too.

Inspiration

Super User        TeX - LaTeX
  

Skeptics         emacs
  

Basis

1. xnor's suggestion that we have a feel of code golfing as conveyed by certain words (here squeeze)

2. Peter Taylor's suggestion that we incorporate APL, Wireworld, or Penrose tiling (including cellular automata)

3. DJMcMayhem♦'s suggestion that we incorporate Conway's Game of Life somewhere

4. Pavel's suggestion that we keep the user script green

5. my suggestion that we suggest competition with certain themes (here gold, silver, bronze)

Implementation

1. The three characters {⌺} have been squeezed tightly together to suggest code golf

2. The symbol ⌺ suggests wiring and tiling, and is in fact, the APL Stencil symbol

3. The ⌺ operator is the general cellular automaton operator in APL, and is central to the shortest expressions for Conway's Game of Life

4. The user script's green background has been kept

5. The characters are gold and silver (and the golden braces are also carried over from the user script)

Suggestion

Programming Puzzles & Code Golf