At least I didn't use blinky text.
August 4, 2011 3:40 PM Subscribe
My gaming websites are ugly. How can I make them better? I work well with examples and exemplars, but how-tos are welcome too.
Do not feel obligated to check out my sites, but they are here and here if you're interested. They both contain HTML5 games that I have designed, and, while this is strictly a hobby, I would like to make them both a bit more attractive. Right now they look sort of like fantasy baseball websites from 1998.
If you could direct me to any site that functions similarly (eg. a Flash game site that's not terrible) and looks a bit more fun, I would really appreciate it. Also if there are any sites (or books?) about designing gaming sites, please pass them along. As this is a hobby, I'm not interested in paying anyone for a redesign.
Do not feel obligated to check out my sites, but they are here and here if you're interested. They both contain HTML5 games that I have designed, and, while this is strictly a hobby, I would like to make them both a bit more attractive. Right now they look sort of like fantasy baseball websites from 1998.
If you could direct me to any site that functions similarly (eg. a Flash game site that's not terrible) and looks a bit more fun, I would really appreciate it. Also if there are any sites (or books?) about designing gaming sites, please pass them along. As this is a hobby, I'm not interested in paying anyone for a redesign.
I don't have any direct design suggestions for the site, but I do have one for your pacman game: when you're scaling up the images, you should turn off the anti-aliasing and leave the pixels looking blocky; the blurred edges detract from the retro feel.
posted by beerbajay at 4:10 PM on August 4, 2011
posted by beerbajay at 4:10 PM on August 4, 2011
Here are some Pac-Man inspired colour palettes.
Also, you probably want to fix your logo transparency so you don't get the white edges.
posted by empath at 4:13 PM on August 4, 2011
Also, you probably want to fix your logo transparency so you don't get the white edges.
posted by empath at 4:13 PM on August 4, 2011
Not exactly what you're looking for, but I just wanted to chime in and say that "bad" web design like this strikes me as honest and trustworthy and connotes ROM sites and shockwave games from my childhood, so to me it fits perfectly with browser Pac-Man.
posted by vogon_poet at 4:18 PM on August 4, 2011 [3 favorites]
posted by vogon_poet at 4:18 PM on August 4, 2011 [3 favorites]
Okay, last thing -- Whatever you want people to do when you visit your page, make that the first thing on the page, and make it big.
If the site is about your game, make it the first thing under your title, and either embed it or make a big gigantic 'play now' button.
Put the explanation underneath that.
I actually like that your site is very simple and no frills. There's no need to include a bunch of extra flair, imo. Look at Braid's site for example.
An embedded video/screenshot, followed by links to buy/play it, followed by additional explanation. Something like that is really all you need.
posted by empath at 4:20 PM on August 4, 2011 [1 favorite]
If the site is about your game, make it the first thing under your title, and either embed it or make a big gigantic 'play now' button.
Put the explanation underneath that.
I actually like that your site is very simple and no frills. There's no need to include a bunch of extra flair, imo. Look at Braid's site for example.
An embedded video/screenshot, followed by links to buy/play it, followed by additional explanation. Something like that is really all you need.
posted by empath at 4:20 PM on August 4, 2011 [1 favorite]
Response by poster: empath, thanks for all your suggestions! Yes, the Braid site is good inspiration.
beerbajay, I'm actually rewriting the whole Pac-Man game, and I was thinking of redoing the sprites. So, for v 2.0.
posted by hiteleven at 4:32 PM on August 4, 2011
beerbajay, I'm actually rewriting the whole Pac-Man game, and I was thinking of redoing the sprites. So, for v 2.0.
posted by hiteleven at 4:32 PM on August 4, 2011
I might be alone on this but considering the retro-style content, I'd leave the layout alone. I like it, actually. It adds character and compliments the old-school games that it's hosting.
But if you want a more modern look that allows room for expansion and customization, you'll want to learn CSS at least. This way you can create a master css file that becomes the template for all the pages created from now on, so it makes managing content and expanding the site much easier in the end (instead of having to create, recreate and modify tables for the sake of layout).
You might also consider changing the color palette, as empath said, to give it a more unified look instead of that 90's net, unrefined look you have now (but, again, I think it suits the material).
So, layout and color. CSS for layout and beautifying, and empath's link for color guidance. Those IMHO will make the largest impact. Be sure, however, to think in terms of an expanding game library. I would personally create an intuitive way of allowing the user to see the games as they are made (blog style, sorted by date posted, large picture and description, containing link to play game), and a list style (ability to hide/show thumbnail screenshot of game, game title, date created or posted, user rating, so the user can easily sort and find the games based on said criteria).
Start here for ideas (look to the left where it says CSS tutorials), best of luck!
posted by Zeker at 4:53 PM on August 4, 2011 [1 favorite]
But if you want a more modern look that allows room for expansion and customization, you'll want to learn CSS at least. This way you can create a master css file that becomes the template for all the pages created from now on, so it makes managing content and expanding the site much easier in the end (instead of having to create, recreate and modify tables for the sake of layout).
You might also consider changing the color palette, as empath said, to give it a more unified look instead of that 90's net, unrefined look you have now (but, again, I think it suits the material).
So, layout and color. CSS for layout and beautifying, and empath's link for color guidance. Those IMHO will make the largest impact. Be sure, however, to think in terms of an expanding game library. I would personally create an intuitive way of allowing the user to see the games as they are made (blog style, sorted by date posted, large picture and description, containing link to play game), and a list style (ability to hide/show thumbnail screenshot of game, game title, date created or posted, user rating, so the user can easily sort and find the games based on said criteria).
Start here for ideas (look to the left where it says CSS tutorials), best of luck!
posted by Zeker at 4:53 PM on August 4, 2011 [1 favorite]
Two suggestions right off the bat:
1. Get rid of your background, it makes things hard to read on the second example.
2. Center your content.
posted by royalsong at 5:01 PM on August 4, 2011
1. Get rid of your background, it makes things hard to read on the second example.
2. Center your content.
posted by royalsong at 5:01 PM on August 4, 2011
Yum, love this kind of stuff. I contributed some graphics to an open source game a while back (before / after) so this is just my kind of AskMe. :-)
I think there are a lot of questions to answer here before you start designing. Examples:
What do I want visitors to do? Just play, or also communicate with me, or something else?
Which leads to...
What am I writing then? If you just want people to play your games, you might as well be writing ad copy. Pick a simple sentence that describes the game experience, "1979. Kabul, Afghanistan. You versus the Red Army." Put it in big serif (comfy) type, centered above a screenshot that you can click to play now.
And then since you know HTML 5, why not add a "director's commentary" button to the game, so people can listen to all that other stuff you wrote about while they play? How cool would that be?
And then the other questions are things like, "what do my gamer target audience people want to be thinking of while they play this?" What textures, imagery, and typefaces were common when these games were introduced? Easy, just go to Google Images and get inspiration from game covers, photos of old arcades, etc.
At some point you'll always bump into design principles, so you can read up on that, but the other stuff is a good start too.
LOVE THE KABUL GAME!! It has a story! Yay
posted by circular at 5:03 PM on August 4, 2011 [2 favorites]
I think there are a lot of questions to answer here before you start designing. Examples:
What do I want visitors to do? Just play, or also communicate with me, or something else?
Which leads to...
What am I writing then? If you just want people to play your games, you might as well be writing ad copy. Pick a simple sentence that describes the game experience, "1979. Kabul, Afghanistan. You versus the Red Army." Put it in big serif (comfy) type, centered above a screenshot that you can click to play now.
And then since you know HTML 5, why not add a "director's commentary" button to the game, so people can listen to all that other stuff you wrote about while they play? How cool would that be?
And then the other questions are things like, "what do my gamer target audience people want to be thinking of while they play this?" What textures, imagery, and typefaces were common when these games were introduced? Easy, just go to Google Images and get inspiration from game covers, photos of old arcades, etc.
At some point you'll always bump into design principles, so you can read up on that, but the other stuff is a good start too.
LOVE THE KABUL GAME!! It has a story! Yay
posted by circular at 5:03 PM on August 4, 2011 [2 favorites]
Response by poster: Great, thanks for all the fantastic advice, people!
posted by hiteleven at 8:30 PM on August 4, 2011
posted by hiteleven at 8:30 PM on August 4, 2011
BTW, one good practice I used to put my students through was the anti-decoration exercise. You get:
1 Font
2 colors total, one for background, one for type
3 different font sizes.
You might actually like the way that really lets your game graphics send a strong message. And you can always add a few subtle decorations after that. A little pac-man icon to end a paragraph, something like that.
posted by circular at 9:38 PM on August 4, 2011 [1 favorite]
1 Font
2 colors total, one for background, one for type
3 different font sizes.
You might actually like the way that really lets your game graphics send a strong message. And you can always add a few subtle decorations after that. A little pac-man icon to end a paragraph, something like that.
posted by circular at 9:38 PM on August 4, 2011 [1 favorite]
Centering = good. You have no idea how wide my monitor is. I could be on a 10" netbook or running the browser maximized on a 24" widescreen. Shoving everything to the left works fine on the first, it's likely to give me a neck cramp on the second.
If you don't want everything stretched all over the place (why would you want that?) plop your content into an article tag (ooh, HTML5!) and set a minimum and max width on that. Use the display:0px auto trick to center it. Remember to use the header and footer tags for the remaining content. For backwards compatibility you may need to also define those sections as <header id="header"> or something similar.
posted by caution live frogs at 7:39 AM on August 5, 2011
If you don't want everything stretched all over the place (why would you want that?) plop your content into an article tag (ooh, HTML5!) and set a minimum and max width on that. Use the display:0px auto trick to center it. Remember to use the header and footer tags for the remaining content. For backwards compatibility you may need to also define those sections as <header id="header"> or something similar.
posted by caution live frogs at 7:39 AM on August 5, 2011
This thread is closed to new comments.
Using primary colors is an eye-sore.
posted by empath at 4:09 PM on August 4, 2011