Design Ideas for Gaming Site (updated with screenshots v2)

Question

Hi all. I'm Jin and I'll be working on the designs for the Stack Exchange sites as they graduate from the beta phase. Each site will have its own unique theme that will reflects its topic. However, all sites will share quite a bit of common elements so they feel like they're part of the Stack Exchange family.

I'm currently in the brain storming phase and I'd LOVE to hear your thoughts and suggestions.

For Gaming site design, here are some of my ideas:

Overall Look and Feel What are the visual elements that feel like "gaming?" Many games and have come and gone in recent years, but it seems the ones people recognize and love are those classics such as Pac-man, Pong, Space Invaders etc. Those games are timeless and they take us back to a simpler time when our senses weren't overloaded. I'm leaning towards a "retro-classic" look for the overall theme. Something I found on the web that I like:

Note: I won't literally use some of these graphical elements due to copyrights. But instead I'll mimic the style, to capture the same "feeling."

Logo I like the style of the logo Michael Herold posted in the logo thread. I think the pixelated look definitely suits the retro-classic look I'm going after. If you have any you'd like to submit, feel free post there. Please note: I prefer gray-scaled logo submissions, that way we can judge the IDEA of the logo more objectively. We can always add colors to the logo later. Also, the logo itself(sans the site title text) should be able to fit in a square dimension nicely. This way we can use it for favicons, mobile touch icons etc.

Color Palette I'm thinking of a dark themed design, with the content area light. Most classic arcade and PC have dark loading screens. I like to use Kuler to create color palettes. Feel free post your own palettes here. Here are some colors Im thinking of.

• Black (0, 0, 0)
• Dark Gray (107, 107, 107)
• Light Gray (239, 239, 239)
• Pink (240, 98, 146)
• Red (221, 0, 0)
• Orange (255, 171, 28)
• Yellow (255, 255, 62)
• Lime (116, 207, 6)
• Cyan (5, 95, 183)

Icons & Buttons You can see all the icons we currently use for SE beta sites in one sprite. For the visual goal, I'm thinking about using flat pixel art style for icons and buttons. for example:

Note: the I'm using "Quicksave" as the title for now, but it may not be final. The idea here is to show the pixelated font usage.

editted: Typeface I'm thinking about using Oribtron for question header text. For example:

To reiterate, I think a retro gaming theme would serve the site better, since the classic games are loved by many and timeless. I also feel the visual of pixelated style will blend into the background of the site nicely, without being obtrusive. After all, a site such as Gaming Q&A is used by people for content, so the design should serve the content, not to get in the way. Lastly, I'd like to point out that I won't change the layout and structure of the site too much.

Please post your ideas about the points above. Or, if you frequent gaming resource sites that you love, please list the URLs here and tell us what you like about it.

UPDATE

Here's the mockup for the homepage, you can see the full res version here.

I decided not to go with Orbitron font due to readability issues. I'm using Inconsolata instead.

I think the header and footer capture the retro style I was aiming for. Note: this version does not include a final logo yet. I'm still working on that.

Undoubtedly, this version is a lot more colorful and lively than the Sketchy theme you're used to. Please let me know what you think so far.

UPDATE 2

Thank you so much for the constructive feedbacks everyone. I have tweaked the homepage some, and created the question view mockup.

In comparison to the previous homepage mockup, the main differences are the pixel font change for the top link items, and the font for the question titles. I'm using Pf Tempesta this time. It's a nice display type that renders nicely at all sizes. It supports Euro chars, so the glyph is more comprehensive.

I also tweaked the "Add" button and the tag shaped a little bit.

For Question view, it's fairly straight forward. I'm using Lucida Sans, a very readable, web-safe font.

Judging from the feedback from the first round, I feel most are OK with the overall look and feel. So I'll start converting the design to CSS today. I won't be posting any more graphical mockups, unless there's a big demand for certain detail changes from today's update.

Thanks for all your help!

Homepage, see full res version here

Question view, see full res version here

Answer 1

I think pixelated look is simply universally linked with computer entertainment and thus would be a nice fit.

Orbitron looks futureish while the pixelated font for the titlebar and rep header counter looks quite retro, add in a websafe type for post bodies and things may be tricky to blend together.

Answer 2

I withdraw my comments, the theme looks very nice in the screenshots.

Nice work!

In a very general opinion, I'd like it if it was a little more modern -- so far we'd had lots of questions about modern games like SC2, TF2, WOW, Fallout 3, etc.

Additionally to that argument, my personal taste leans toward the modern and futuristic.

That said, a retro gaming style would be good also and it's easier to generalize (I don't know under what theme you could unify modern games actually), but I just wanted to express the opposite opinion in this brainstorming phase.

_{When we get more screenshots I'll have more comments}

Answer 3

I like the pixelated look of the font, badges, and I suppose the footer as well.

However, I think that having the tabs (Questions, tags, users, badges, unanswered) and the "ask a question" button also look pixelated clashes with the relative smoothness of the page body and question listing, or is disconcerting at the very least; those are some of the page elements that are going to be the most clicked on -- do we really want them retro to the point that they blend in with the background?

Answer 4

I'm thinking about a black(ish) #header and #footer, using bright contrasting colors for the text and other elements, with a light gray(ish) #sidebar and a white(ish) #content area, using dark font colors.

The 8-bit style in combination with a corresponding bitmap font, is perfect for the smaller design elements, such as the tags, up/downvote, flag, favorite etc... and the header and footer links.

Oribtron is perfect for the logo on a black background, but i think less suitable (for the question titles) on a white background; Oribtron seems also to be able to bridge the bitmap and non-bitmap fonts, as it still has the "squarish" from the bitmap fonts, while retaining the "smoothish" from the non-bitmap fonts.

I think a lot can be learned from the white Wii Menu and the dark Wii Settings.

Don't forget, we don't want to be only a resource for the classic hardcore gamer, we want to be a resource for every gamer, including those those that play Hello Kitty: Island Adventure.

Answer 5

The header and footer black background colour, for me, is too stark a contrast against the white/grey of the body - despite the 'scan lines'.

Take a look again at the work you did on Area51. The final design, with background applied across the page and a darker background for the body text worked much better than the orginal design Jeff showed you, which had similar high contrast headers/footer and white body.

Like the direction it's taking a lot otherwise :)

Answer 6

I like it quite a lot. One suggestion for the question view. The right hand bar looks to plain all grey and green.

I'd change the color between linked and related and maybe, if possible, add some gamey goodness to the titles (an image of some sort.)

Well, on a second thought, given that ads go on that bar (they do, don't they?) just changing font colors between related and linked might be enough.

Answer 7

I really like the Oribtron typeface. I tend to agree with Jon Hadley on the stark contrast and maybe the "scan lines" are too much?

Answer 8

I like it :)

one idea for tags: Make them look like wooden signs. Stick and wooden board with text like in old games. I mean this kind of signs: http://i1.ambrybox.com/270110/1264545680998.jpeg You probably could find (or draw) better examples.

Also please leave questions and description font as usual. Otherwise it will be very hard to read.