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:

alt text

alt text

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.

alt text

  • 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:

alt text

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:

alt text

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.

alt text

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

alt text

Question view, see full res version here

alt text

share
1  
Are you going to use the pixelated for everything or just for the larger elements? As I don't consider it very readable when the letters become much smaller –  Ivo Flipse Sep 8 '10 at 17:58
19  
I really like the coins of badges. –  tzenes Sep 8 '10 at 17:58
1  
As a whole, I love the concept of going for retro-classic, although I'm always wary about going too far back. The samples so far are excellent - I'll be glad to provide more input in a complete post later today. –  Grace Note Sep 8 '10 at 18:01
2  
@Ivo no, the pixelated font is only for the site title. I think it will go well with a pixelated logo. For question title font, I'm thinking about using a custom display type of font via font-face. –  Jin Sep 8 '10 at 18:16
1  
So... I guess this means Gaming is graduating? (it might be obvious, it might mean they like to make Jin work in vain, I don't know) –  jmfsg Sep 8 '10 at 19:32
1  
I love all the ideas so far; the retro theme fits really well with a gaming website. –  Kevin Y Sep 8 '10 at 23:23
3  
"I think a retro gaming theme would serve the site better, since the classic games are loved by many and timeless." The majority of questions on this site are about new games, so I don't think a retro theme is that good of an idea. –  user2974 Sep 9 '10 at 21:06
1  
@Powerlord the problem is that there is no theme that is universal across modern games. People see this pixel-ated theme and think: Retro Gaming. By comparison I can't think of anything that will make them think: Modern Gaming. Can you? If so, please post that as an answer, because that would be useful. –  tzenes Sep 9 '10 at 22:53
1  
@Powerlord, the idea is to let people know this is a "gaming" site. I can see your concern about giving the wrong areas of what kind of games we talk about. But it literally takes a second or two from glancing at the topics on site to know we cover all games, and mostly modern ones. –  Jin Sep 10 '10 at 2:58
1  
@jblaske you mean you don't like dark background on the content area, e.g. (white text on black) correct? I won't be doing that, I'll keep the content area readable, but the site background may be dark. –  Jin Sep 10 '10 at 15:15
2  
Rather than simply agree with @tzenes, I will add that there is something that will make people think of modern gaming when visiting our site: its name. Plus, while the name is more reminiscent of PC gaming, the retro theme leaves enough room to expressly refer to console games as well. A retro, console-ish theme counterbalanced by a modern, PC-ish name — now that's what I call having all bases covered. –  ЯegDwight Sep 12 '10 at 3:52
1  
imho, i like the sketchy theme already for gaming. i dunno why but it already gives that feel(scribblenauts?) although it seems every beta SE site uses this theme –  corroded Sep 14 '10 at 4:47
2  
I love how the tabs acquire more and more battle damage from left to right. I think the ADD buttons could use some tweaking - they aren't very legible. Maybe a little less depth/thickness to the font would help? –  sjohnston Sep 14 '10 at 13:56
2  
The "Ask a Question" button does not look like a button. It blends into the header far too much. I'd like it if it stood out more, so the site is still usable ... –  Michael Herold Sep 15 '10 at 14:34
2  
@Reg Actually I like "that one level" better, too. I just couldn't help proposing quicksave... But since that is squatted while t1l is already SO-registered chances are good –  Zommuter Sep 16 '10 at 7:55
show 17 more comments

8 Answers

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.

share
add comment

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

share
5  
I thought about a modern theme first, but as you said it's hard to have one theme to cover all. Modern games cover different type of games, art style etc where as a retro theme immediately shows it's about "Gaming." I looked at popular gaming sites such as IGN, Gamespy, etc, their themes are rather simple. However they can fill up the site with eyecandy of screenshots, movies. We can't do that on our site. –  Jin Sep 8 '10 at 18:37
    
here is the thing about the 4 games you mentioned, they really share nothing in common. SC2 has a very violent look, TF2 an almost humorous cartoon and Fallout 3 is very "world of tomorrow" (WoW being another Blizzard Property). Like Jin says, its hard to have one theme for all of them. –  tzenes Sep 9 '10 at 2:14
    
I like Jin's design, but Juan's idea sounds nice, too. So I propose to allow an individual user-setting of the theme –  Zommuter Sep 16 '10 at 8:04
add comment

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?

share
add comment

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.

share
    
Excellent suggestions. I was thinking of similar color scheme too! Re: Orbitron, I agree. Readability is #1 priority. –  Jin Sep 9 '10 at 5:55
    
If Hello Kitty: Island Adventure actually existed. –  user56 Sep 17 '10 at 15:28
add comment

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

share
add comment

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.

share
add comment

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?

share
add comment

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.

share
1  
for tags I try to keep it minimal and clean as possible. The reason is they appear all over the sites. When a visual element is repeated, it's best to keep it simple otherwise it'd make the site very busy. Especially in this case a tag is something that has less importance of other content elements. –  Jin Sep 27 '10 at 16:37
    
Plus wooden signs would look odd with the otherwise "outer space game" vibe of the rest of the theme. –  Wikwocket Sep 30 '10 at 22:23
add comment

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .