Programming Puzzles & Code Golf will someday graduate out of public beta, and it will get a new site design. Stack Exchange employees generally do all the design work and make the design decisions, but that doesn't mean we can't nudge them in the right direction when the time comes.

This meta post is for discussing and rating ideas about our graduation design; the shapes, colors, icons, images, fonts, etc. to use. There is also a chatroom for brainstorming.

Every answer to this question should be a proposal about one particular aspect of the design. This way each idea can be kept separate from related ideas and be up or downvoted individually.

Here are some specific design aspects that you might make a post about:

• Main logo (and favicon)
• Main title
• Top banner image (e.g. from academia)
• Background (e.g. from code review)
• Up and downvote buttons
• Favorite question button
• Color scheme
• Guiding principles

Feel free to add to the list if you think something is missing.

Here is the sprite sheet from Stack Overflow for an idea of what design elements can change. (Many other things can be changed as well.)

So this question might end up with several answers about each list topic, but the highest voted ones will indicate what we PPCG users really want in our design.

• The operative word in the first sentence being "someday"... Jan 4 '16 at 2:12
• "Programming Puzzles & Code Golf will someday graduate out of public beta" [citation-needed]
– Doorknob Mod
Jan 4 '16 at 2:13
• Gosh, going years without graduating has slowly driven us insane. We're that lady who is planning every detail of her future baby's nursery while on her first date.
– xnor
Jan 4 '16 at 6:07
• @xnor After almost five years of PPCG dating Stack Exchange, I think we're well past "first date" territory. While this may indeed be a fruitless endeavor, we can still hope that one day Stack Exchange will finally propose. Jan 4 '16 at 6:30
• @AlexA. Actually, I think SE is friend-zoning us...
– xnor
Jan 4 '16 at 6:31
• @xnor ._.​​​​​​ Jan 4 '16 at 6:33
• @AlexA. SE is telling us "I just want you to be my beta now. It's not you, it's me, I just can't do challenge sites. Maybe in a few years..." Come on SE, what does Code Review have that we don't?! THERE'S MORE TO US THAN OUR QUESTIONS PER DAY.
– xnor
Jan 4 '16 at 6:37
• @xnor Maybe they don't like us because we have long conversations about our relationship in comments. Jan 4 '16 at 6:39
• I gasped when I read the title, then I read the beginning and went "Oh...", then I went "Wait Geobits isn't the one making this post?" Jan 4 '16 at 14:05
• Voting separately on the different elements is not a good idea. The site should look good as a whole. Good design is not putting together good individual objects. We should somehow create example pages in different designs and vote on these.
– nimi
Jan 4 '16 at 17:44
• @nimi Ultimately our site design upon graduation will be up to the Stack Exchange design team, so as far as I can tell, this is mostly for fun. :P Jan 4 '16 at 18:17
• Soemone should make a suggestion for 404 error: StackOverflow's is a polyglot.
– user46167
Jan 4 '16 at 20:56
• @BlockCoder1392 Maybe a random code from here or here (with the language name included). If StackOverflow does a polyglot, then we'll return them the favor by doing a stack overflow! Maybe add "We couldn't find your site, but we found this code that causes a stack overflow..." so we don't get in trouble. Jan 6 '16 at 3:45
• +1 for @geo's suggestion
– user46167
Jan 6 '16 at 22:06
• So... What happened to this? Dec 30 '17 at 1:56

# No relation to the sport golf

There should be nothing related to actual golf in the design. Our name may make for good puns, but it would be way too cheesy to be used.

• Agreed. The only connection that physical golf and code golf have is that we try to get the hole/solution in as few hits/bytes as possible. Jan 4 '16 at 2:15
• Not only would it be annoyingly cheesy, but we might start getting a new type of off topic question: "How can I get 3 strokes off my golf game?" Jan 4 '16 at 3:35
• @AlexA. Have you tried using jQuery?
– user45941
Jan 4 '16 at 5:32
• Kinda funny that this is the most popular answer since this was the most popular suggestion for a new favicon. Jan 4 '16 at 10:20
• I think this is why it's important to discuss more abstract, general points like this. Otherwise we'll spend all our time getting pixel perfect a design we don't really want. Jan 4 '16 at 16:10
• @MartinBüttner Granted, that suggested favicon was two years ago. I wouldn't be opposed to having a little golf reference here and there, I just don't want the site to look like a country club. Jan 4 '16 at 18:53
• No stubby pencils? What a waste. Jan 6 '16 at 2:59

A collaborative graduation user-script has been put together. Github Repo

## Pictures

### Main

Question:

Auto TIO Execution:

### Chat:

Color Scheme:

If you have any ideas, don't hesitate to comment below.

Features:

• See vote counts even if you don't have enough rep.
• Automatic leaderboards for all code-golf challenges.
• Automatic code-block byte and char counting. (For bytes, uses UTF-8/16, ISO 8859-1, or byte-per-char, depending on the language. Hexdumps are parsed correctly as well.)
• An options button to customize the theme, colors, and disable/enable various features.
• A Question of the day widget.
• Automatic TIO™ preview. See an answers output without leaving PPCG! (this can be disabled)

Design Features:

• New Logo / Voting / Favorite / Badge icons
• General redesign
• Customizable parts:

• Text font and color
• Logo / Spritesheet
• Background image / color
• Post container color
• and more!

### How do I use this?

You can install Tampermonkey which supports a ton of browsers (probably will include yours). You can then just use this link to install the script (or copy-paste the code into a new script).

• Counting bytes and chars might be useful. Jan 5 '16 at 6:10
• I was wondering why you would move the notification alerts to the right. Then I realized it was your avatar >.>
– user42643
Jan 5 '16 at 6:58
• The star of the favorite icon doesn't seem to be aligned properly with the number below it (From your screenshot). Jan 5 '16 at 12:51
• Seeing the logo in the design, i think it is a bit thick. If anyone wants to tinker with it, I can upload the vector source somewhere.
– user42643
Jan 5 '16 at 13:14
• This is really nice, but I'm concerned that we may have too much game of life. It works for the upvotes, but using beehives for badges also makes it seem like game of life is a really important part of the site. Jan 5 '16 at 17:00
• @mınxomaτ could you upload vector? I'd like to try to fiddle with the colors, etc. Jan 5 '16 at 23:29
• @Doᴡɴɢᴏᴀᴛ Sure (Inkscape SVG(!), be sure to save as "Optimized SVG"(!) when using it in a design, or else some browsers won't handle it correctly): workupload.com/file/OS0ZAtch
– user42643
Jan 5 '16 at 23:37
• This doesn't load the logo next to the meta site name for me.
– user45941
Jan 7 '16 at 15:37
• @Calvin'sHobbies A char-counter has been added, along with support for hexdumps, and custom encodings for specific languages. Jan 7 '16 at 19:25
• @Mego Should be fixed now. Jan 7 '16 at 19:25
• Also, Greasemonkey for Firefox. Jan 11 '16 at 5:26
• I hate the favourite button, it looks like a bomb. Jan 12 '16 at 11:19
• It seems like bold text doesn't get rendered when previewing answers: i.imgur.com/rG1co1D.png Jan 24 '16 at 16:58
– user45941
Feb 10 '16 at 18:42
• @Mego I do not see the issue Apr 1 '16 at 15:25

# Vote Boat Buttons - Game of Life Boats

They could be boat still life's from Conway's game of life.

Upvote:

Downvote:

These are Phi's circular rotated versions, which I think work much better.

With glowyness (credit to Cᴏɴᴏʀ O'Bʀɪᴇɴ):

Doᴡɴɢᴏᴀᴛ's boats:

The main fun part with these is that then it could be called upboating and downboating.

If you have an image for this design that's not too different, feel free to edit the post and include it.

• What if I misspell "downboat"as "downgoat"? :P
– user46167
Jan 4 '16 at 2:09
• +1 for Phi's suggestion Jan 4 '16 at 3:41
• For me, the connection to programming puzzles is too tenuous. Jan 4 '16 at 4:02
• @ThomasKwa Granted. It's going more for our esoteric angle. Jan 4 '16 at 4:03
• I'll work on adding this today. It seems to be the best idea so far. Jan 4 '16 at 12:04
• Phi's icon looks great! Jan 4 '16 at 23:47
• Wow, there's more than an vote icon here! I think this has potential as a favicon! See my separate answer. Jan 5 '16 at 0:12
• I love the idea. But turned 45 degrees I hardly recognize them as Life's boats Jan 5 '16 at 4:04
• I think the downboats look too much like dropbox's logo. Jan 5 '16 at 15:55
• But what if there is eventually a Conway's Stack Exchange? Feb 15 '16 at 17:35
• Is the downboat too similar to a smiley? Maybe a simple ++ and -- would be better? Feb 22 '16 at 19:07
• I agree, they look like smileys. As much as I like downvotes, they shouldn't look like happy faces. Feb 25 '16 at 16:01
• @ev3commander MISspell? Don't you mean spell correctly! ;) Jan 8 '17 at 3:41
• An upboat for "upboat". Apr 4 at 11:12

# Another logo!

Credits to @Dennis and several other people who helped me with the idea! This seems to be better because it suggests that PPCG is a competitive site.

Here is a cropped image for use as a favicon, here is an auto-generated SVG version, and here is a greyscale version for Meta.

This has been added to the userscript managed by Downgoat.

• Oooh, I like this one :) Jan 6 '16 at 14:52
• I think this is really nice. Jan 6 '16 at 16:01
• Agreed. Plus it's a lot more intuitive than the zippered one. Jan 6 '16 at 21:05
• Could you upload a vector version? Jan 6 '16 at 21:06
• Surprisingly, this scales down reasonably well. The leaves lose their definition (not massively important) but the bigger issue is that the yellow brackets all but disappear. I guess they could be in a different colour in the scaled down version. Yellow obviously alludes to gold, but so does orange. Either way, this is the best so far! Jan 6 '16 at 21:53
• @steveverrill: We've got a chatroom for design discussion. That said, Dennis has pointed out multiple times that puzzles aren't really on-topic and thus they shouldn't be incorporated in to the design, and I agree, so I won't be doing any further work in that direction. Jan 6 '16 at 22:33
• @Doᴡɴɢᴏᴀᴛ I'll try. Jan 7 '16 at 1:25
• This is just Tex-Latex...
– user46167
Jan 7 '16 at 1:27
• This logo is a lot clearer then the other one. Jan 7 '16 at 20:14
• I'd just like to point out that {} is what our rival site Code Review uses as their badge icons... Jan 16 '16 at 0:43
• But they don't use wreaths, do they? Jan 16 '16 at 2:31
• Yellow on white is a poor choice in my opinion. Can we change that yello into something else that has a nicer contrast with white? Feb 15 '16 at 22:37
• @LuisMendo If you have the official userscript, you will notice that we will not be putting the logo over white. Feb 15 '16 at 22:47
• @ӍѲꝆΛҐӍΛПҒЦꝆ Yes, sorry, I hadn't seen that. Dennis sent me a link Feb 16 '16 at 10:04
• The SVG link is dead. :( Dec 4 '17 at 18:42

# Guiding Principle/Color Scheme - Anything but blue

All beta Stack Exchange sites have the same light blue design which I am kind of sick of, but it doesn't stop there. Looking at all the SE sites, I quickly categorized the non-beta computer-related sites as blue or not blue, based on their icon colors.

Blue: (or blueish components)

• super user
• web applications
• webmasters
• user experience
• unix and linux
• theoretical computer science
• programmers
• information security
• code review
• sharepoint
• cryptography
• salesforce
• network engineering

Not Blue:

• stack overflow
• server fault
• game development
• android enthusiasts
• electrical engineering
• mathematica
• rasberry pi
• tex - latex

I'd prefer if PPCG stayed away from this blue trend. Any other dominating color would be fine (perhaps greens?), just not blue!

• Maybe use a color palette tool? Here's one I found: paletton.com/… Jan 4 '16 at 6:02
• Especially since Code Review is blue. We don't want the same color as Code Review do we? ;) Jan 4 '16 at 14:03
• Please do also consider visually impaired. (colours that colourblinds can discriminate and generally high contrast.) Jan 4 '16 at 23:26
• materialpalette.com/teal/deep-orange Jan 4 '16 at 23:54
• I don't really see where you find blue in the TeX stack exchange though Jan 5 '16 at 14:24

# Let's keep it newcomer-friendly

By all means customise various aspects of the site, but let's have a guiding principle that this shouldn't obscure the intuitive meaning of any of the buttons or symbols. Both users of other Stack Exchange sites and brand new users from outside Stack Exchange should be able to see what is going on without needing to read Meta first.

# "Hello World" Greeting

Many organizations have the word "Welcome" in many languages displayed prominently to show that they are internationally-friendly. How about take a selection of answers from the Hello World catalogue and incorporate them into a watermarked background for the site, or a "Hello World" of the day?

# Main logo - zippered curly brackets

mınxomaτ posted this in chat, so they deserve all the credit:

It's left and right curly brackets ({}) joined by a closed zipper. The brackets indicate that what we do involves coding, and the zipper indicates that we do compression, i.e. golfing (think zip file).

I think it's far more fitting for PPCG than mınxomaτ's other design of the test tube brackets. It scales down pretty well too. My only complaint is that it is not very colorful.

• +1 Colour can come later. In fact you could always change black on white to white on green right now. I like the curly brackets. The question is what to put between them (and I do like a question mark). A vast improvement on minxomat's previous test tube idea. Jan 5 '16 at 0:56
• Trivia: Nothing scales perfectly. Favicons are mainly drawn by hand, because 16px is below any threshold for many anti-aliasing algorithms. Case in point: Both favicons I posted were redrawn by hand using favicon.cc, a really handy tool.
– user42643
Jan 5 '16 at 13:17
• To be honest this logo makes no sense to me. The majority of the various site logos are at least vaguely descriptive of their sites, but IMO this looks irrelevant to PPCG without explanation. Jan 5 '16 at 21:37
• @AlexA. Stack Overflow's logo is a slinky in a box, so comparatively it's pretty clear Jan 6 '16 at 5:40
• @Doᴡɴɢᴏᴀᴛ I figured it was a stack overflowing. Jan 6 '16 at 5:42
• @Downgoat can you add this as an option in the userscript? Sep 12 '16 at 23:34

# Stack Overflow 404 message

This comment got some up votes, so let me post it as an answer. Maybe someone will want to incorporate this into their UserScript!

If you get a 404 on Stack Overflow, you see a polyglot. We should have something similar, but instead we show a random code from Shortest program that throws StackOverflow Error or Weirdest way to produce a stack overflow (with the language name included). Maybe add "We couldn't find your site, but we found this code that causes a stack overflow..." so we don't get in trouble if people test the code out. Polyglots are sort of a PPCG thing, so PPCG should return SO the favor by making our 404 a Stack Overflow!

• I've put this on the userscript. Here's how it looks Feb 1 '16 at 4:16
• I think the code shown on our 404 page should be the shortest code to generate a 404 error. That way, the code shown may actually have been the cause of the error. Feb 19 '16 at 22:21
• +1 for the weirdest way of the stack overflow, May 21 '16 at 18:55

# Top banner image

What if we took some of the most popular answers on the site and make a background out of them? Example:

(Based on @Doᴡɴɢᴏᴀᴛ's idea)

### Edit: Now incorporated into Doᴡɴɢᴏᴀᴛ's graduation design userscript:

Slightly recolored.

• Do you meant to generate it? Or to just make a png and set that for the background? Jan 23 '16 at 6:51
• For me it's too random without a context. Jan 23 '16 at 22:42
• The idea is to make it look something like the the background for cryptoSE (crypto.stackexchange.com). Jan 23 '16 at 22:43
• @geokavel I added an improved example of what I intended. Jan 23 '16 at 22:58
• @Doᴡɴɢᴏᴀᴛ I just noticed my response, it was late ;) I meant that this would be a static resource. Jan 23 '16 at 23:05
• here's my attempt the colors could be improved. The programs are from the hello world challenge Jan 25 '16 at 20:32
• I've tried it out on main now and it looks pretty good (once I fix all the image sizing bugs) Jan 25 '16 at 21:23
• What did you change? I'm not all that familiar with CSS and can't for the life of me get it to work right. Jan 25 '16 at 22:22
• @JAtkin You'll have to install ppcg.alt.user.js from the github instead. Jan 26 '16 at 1:25
• Looks good in the UserScript, so I undid my -1. Jan 30 '16 at 22:38
• @JAtkin Can I use this, please?
– user51533
Mar 31 '16 at 13:04
• Sure, I don't see why not ;) Mar 31 '16 at 13:10

I've been messing around with Stylebot to see what I could do. Below is one possible idea, with a couple main features:

• Background color surrounds content
• Green color theme
• Dashed outlines
• The questions/tags/etc. navbar has a larger font size.

This is given by the following CSS modifications:

a.question-hyperlink {
color: #000000;
}

background-color: #fff8dc;
border-style: dashed;
border-color: #ffffff;
border-width: 3px;
}

#nav-tags {
font-size: 16px;
}

#nav-questions {
font-size: 16px;
}

#nav-users {
font-size: 16px;
}

font-size: 16px;
}

font-size: 16px;
}

div.categories {
background-color: #eafced;
}

div.snippet-hidden {
border-style: dashed;
border-color: #eafced;
border-width: 7px;
}

div.module.community-bulletin {
border-style: dashed;
border-width: 3px;
border-color: #ffffff;
}

div.module.newuser {
background-color: #eafced;
border-style: dashed;
border-width: 3px;
border-color: #ffffff;
}

a.post-tag {
color: #000000;
background-color: #ddffd6;
border-style: none;
}

color: #ffffff;
background-color: #eafced;
border-style: solid;
width: 1000px;
margin-color: 0;
}

div.container {
border-color: #ffffff;
background-color: #eafced;
}

.container {
}

#hlogo a {
}

font-size: 16px;
}

color: #ff24ff;
}

ol li a {
color: #306630;
}

color: #457548;
}

div.module {
border-style: dashed;
border-width: 3px;
border-color: #ffffff;
}


For future reference, one problem I ran into was fixing the colors in the upper right and left corners, which was solved with this:

.container {
}

• Note that Conor and Downgoat have made similar changes with userscripts. Maybe we could combine them and post one core version here? Jan 5 '16 at 0:28
• @Calvin'sHobbies I was thinking that each user script basically acts like its own set of design suggestions. I posted this design here with the idea that someone may choose to incorporate this design into their own. (After an hour or so of using this design, however, I got sick of it, and wouldn't personally recommend it as a final design.) Jan 5 '16 at 0:48
• Alright. Just thinking that if two userscripts are basically the same they could be combined, but sure, people can post their own for individual ratings. Jan 5 '16 at 0:52

# Sidebar Links to Important Items

This site is already a large archive of programming questions, but for most users not familiar with the site it is only the front page. There needs to be a way for high quality old questions to be recycled so that they still receive attention. I suggest permanent side-bar links to very-popular tags like and . Also, underneath those should be a list of other popular tags like or that is recycled every so often. Note, there is already a "Frequented Tags" list on the Sidebar, so this proposal could become integrated with that.

Another problem is that there are important questions sitting in Main and Meta that do not have prominent, permanent links to them. Things like Sandbox for Proposed Challenges and the wiki, etc. need to have permanent Sidebar links to them, so that everyone knows the rules from the get-go! Moreover, there should be a page that archives all the questions in an organized way, and it should get a sidebar link. Also, I think interesting reference questions like Showcase of Languages should be on the sidebar, maybe on a recycled basis.

# Use Stellated Dodecahedron as the Favorite Star

10 point view

6 point view

Let's not mess around with baby stars, let's go big with a crazy star! The colored in version would to be for the selected state. There would need to be an outline version for the unselected state.

Here's the version the userscript uses:

• Wow, I came here for something else, I didn't expect to find this. I like it but I think the 10 point view may not scale down too well. I've added a 6 point view to my question/answer, It's is a bit simpler. The stellated octahedron also has a 6 point view. Jan 6 '16 at 21:27
• Upvote this comment if you prefer the 10 point view Jan 6 '16 at 21:27
• Upvote this comment if you prefer the 6 point view Jan 6 '16 at 21:28
• @Downgoat that last image you added isn't a (small) stellated dodecahedron (12 points), it's a great stellated dodecahedron (20 points), which is a different polygon from the previous images. I think it looks best of all. You have it in a (slightly offcentre) 10 point view, but the points are much thinner than the ones on the (small) stellated dodecahedron, which will give better definition when scaled down Jan 7 '16 at 16:10
• @Downgoat I think the one you posted looks to much like the Mathematica logo, but to be fair the one i posted is very similar to the Wolfram Alpha one. Jan 7 '16 at 16:24
• I think i prefer the 6-point now, because it is simpler, and looks different from the stars Wolfram uses. Jan 7 '16 at 16:32
• The images above hurt my eyes to look at. And I would honestly prefer a regular star over those. Feb 19 '16 at 22:25
• I like the last one alot. Sep 12 '16 at 23:34

# Showcase some of the answers to the question "Images with all colours"

This is our 6th most popular question of all time, and it produced some amazing answers.

Some of these could serve as favicon, or could be displayed in a similar manner to the "images of the month" on photography.SE

Images with all colors

• They're currently my backgrounds. :D Jan 5 '16 at 4:36
• I tinkered around with a couple grayscale versions of these as the background image, but I think they're a little too flamboyant. Jan 6 '16 at 20:52
• We could showcase the creepy Mona Lisa image... It's on that challenge where you fill a missing section of an image. Mar 15 '16 at 21:50

# The IBM golfball printer head

I agree with Alex A's comment on Maltysen's very popular answer:

I wouldn't be opposed to having a little golf reference here and there, I just don't want the site to look like a country club. – Alex A

I think a stylized, artistic version of the IBM golfball printer head might work. My main concern is that when scaled down to a favicon it would look too much like a real golfball. Enclosing it in brackets per Blockcoder's answer might help (maybe square instead of curly.)

The other golf reference I'm OK with, is flag icons in the style of golf flags

• I honestly would have had to Google this in order to know what it was. To me, it just looks like a cryptographic metal turd. Mar 15 '16 at 21:52

# Vote Buttons - Bracket Fish

They could be the fish symbol ><> from the eponymous esoteric language rotated to vertically point up and down

So perhaps something like

If you have an image for this design feel free to edit the post and include it.

• This design isn't very "readable" to me. I don't really like the fact that is looks like there is a downvote arrow inside of the upvote arrow (I also think you should check your kerning). A single bracket might look nice, though. Jan 4 '16 at 2:17
• @PhiNotPi I agree that a down arrow in the upvote and vice-versa is confusing. Maybe slightly different shaping could avoid that? Jan 4 '16 at 2:20
• I think if the opposite brackets were connected it would look better. (so more like a diamond followed by an arrow) Jan 4 '16 at 2:25
• How about a simple ++ or --? Jan 4 '16 at 22:44

# Favicon: Question mark in Conway's game of life

I looked at Calvin's Conway answer, and thought Conway's game of life is the core of the type of thing we do. This would make an excellent scalable icon.

The only thing is, Black and white is a bit boring. I've tried to do something about that in the image below, but it needs more work.

• But this is not a still life or an oscillator as far as I can tell. If the dark blue cells are the alive ones then this dies right away when you run it. So this is just a pattern on a grid. Jan 5 '16 at 0:19
• @Calvin'sHobbies Does that matter for a logo? I enjoyed the new Star Wars film even though the physics was ridiculous, as were many of the plot points. ("thermal oscillator" anyone?) Also, there's more than one set of rules for Conway's game of life. Jan 5 '16 at 0:28
• @Calvin'sHobbies I would have no objection to a proper still life or oscillator being used, though :-) Jan 5 '16 at 0:30
• This design dies in 10 generations under standard rules. Deleting the bottom right square gives a pattern that rapidly becomes symmetrical and finally stabilizes as a still life. It looks more like a 7 than a question mark, but its behaviour is more interesting than the 5x3 question mark composed of a standard glider with a dot below it. The dot dies and the glider goes on its way. Jan 5 '16 at 1:14

# Another favicon

Here's another favicon that I made.

It's like a contest standings thing, with first, second and third (square brackets, semicolon, and parentheses).

• 22 downvotes...ouch Apr 17 '18 at 22:12