Graduation Design Ideas

Question

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
• Accepted answer checkmark
• Badges
• 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.)

(original) (various design components from all sites)

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.

Answer 1

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.

Answer 2

Graduation Design Userscript

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

Pictures

Main

Question:

Leaderboard:

Auto TIO Execution:

Meta:

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:

  • Header font and colors
  • 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).

Answer 3

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.

Answer 4

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.

Answer 5

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
• ask different
• programmers
• information security
• database administrators
• code review
• drupal answers
• sharepoint
• cryptography
• salesforce
• network engineering

Not Blue:

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

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

Answer 6

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.

Answer 7

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

Answer 8

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.

Answer 9

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!

Answer 10

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.

Answer 11

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

div.status.answered-accepted {
    background-color: #fff8dc;
    border-style: dashed;
    border-color: #ffffff;
    border-width: 3px;
    padding: 3px;
}

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

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

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

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

#nav-badges {
    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;
    padding: 3px;
    border-color: #ffffff;
}

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

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

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

.container {
    box-shadow: none ;
}

#hlogo a {
}

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

#footer-menu {
    color: #ff24ff;
}

ol li a {
    color: #306630;
}

div.top-footer-links a {
    color: #457548;
}

div.module {
    border-style: dashed;
    border-width: 3px;
    padding: 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 {
    box-shadow: none;
}

Answer 12

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 king-of-the-hill and popularity-contest. Also, underneath those should be a list of other popular tags like string or geometry 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 code-golf 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 tips 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.

Answer 13

Use Stellated Dodecahedron as the Favorite Star

10 point view

6 point view

Made by @steveverrill

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:

Answer 14

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

Answer 15

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

Image from https://en.wikipedia.org/wiki/IBM_Selectric_typewriter

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

Answer 16

Icon/Favicon: This and this combined!

Answer 17

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

as Conor suggested in chat.

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

Answer 18

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.

Answer 19

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