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