Game Sites Design Survey: Examples and Current Practices


Game websites are a little bit of a mystery. You won’t find them in the popular CSS-showcases since they are seldom fully CSS-based; however, they also rarely show up in sites that collect best Flash sites. The FWA1, for example, has added only a few game sites this year. This is odd, because there are usually roughly hundred quality titles released each month, each with their own website.

During the research I’ve found out that there are a lot of creative game designs. This makes it very strange that amongst all the showcases and studies we see on blogs and in magazines there is rarely one focused on game industry. High time we take a depth look into this area of web-design.

This article is the first of a two-part-series where Smashing Magazine takes a critical look at web design in the video game industry. The first part is an in-depth review of the game-related sites out there. What design elements keep returning? What factors influence these design elements? Are the sites mainly CSS- or Flash-based? The article ends with a showcase of some beautiful examples of game site designs.

Please note: for this article I’ve confined myself to sites of actual games as much as possible and not drawn conclusions from developer or publisher websites. I’ve focused on games recently released or games currently in production and I estimate I’ve seen around 60 sites prior to writing this article.

1. What defines the design of a game site?

Sites for games differ greatly in many aspects. Some are very large in content with huge amounts of lore and story, while others are barely more than a teaser trailer on a graphic background. Before we can look at the different design and communication choices it’s important to understand a few common factors that come into play when a site is built to represent a game.

Diablo 32
Diablo 33‘s lore is so vast that a single monster entry has more text
than the average game has in total.

Shelf life

How long does a game stay on the shelves of a store before it’s pulled back and replaced by a newer game? This is called the shelf life of a game, a well-known term in the game industry.

A lot of factors decide the shelf life of a game. I’m not going to go into all of them but let’s take the genre of a game as an example. A good comparison of extremes is when you compare an online multiplayer game with an action game. The online multiplayer game is a long-term experience for the players where they lead a character from infancy to higher levels, a process that can take months. The action game on the other hand is a short-term experience: once a player finishes a game, he is much more likely to move on to the next (more or less similar) game instead of replaying the same game again. The action game is also very susceptible to “hype” and graphical achievements.

The online multiplayer game is much less dependent on being “the next big thing” or being “fresh” since its experience is based on a persistent world which the player builds a relationship with. The action game is only good until the next big thing comes around — the one that has better graphics or newer game play mechanisms. The action game will thus probably be on the shelves for a shorter time than the online multiplayer game.

World of Warcraft4
Blizzard’s World of Warcraft5 site is a huge portal filled with various information about the game.

This means that the action game needs to sell fast to make good use of its shelf life and its “fresh release” status. The site will reflect this. Sites for games like this will be built around impressing you with visuals or experiences so you’ll head to the shop and buy the game.

The online multiplayer game’s website, however, is not as dependent on making quick sales. Sales are great, but they also have another major concern. They have to keep players in the game involved, so they don’t step over to another game in the genre. This means that the website for the online multiplayer game will focus mainly on players already playing their game opposed to seducing potential buyers. This leads to a totally different web site where content is more important than a slick presentation.

A good example of the second is the World of Warcraft site6. This site is a huge portal with information on anything you can find and do in the game and also spots a forum. This ensures that gamers will be coming back for pieces of information, strategy or to interact in the community.

What type of gamers are we dealing with?

The target audience is a very strong factor when deciding how a product will be represented. These days gamer are very diverse. The general assumption that gamer are nerds doesn’t hold any longer. Today we have schoolgirls with pink customized handhelds, PC gamer that make it a sport to modify their computer case or kids rocking on plastic guitars. There really is a lot of variety and gamer can’t be put in one big box anymore.

Girlgamer magazine
Girls might just beat you at your favorite game these days.

The specifics of a game’s target audience will greatly decide how a site looks, but also what content is offered. Is a game’s target audience interested in killing monsters with big guns without too much complications or are they the type of gamer that are attracted to things like lore, history of a game world and strategic choices?

The first type of gamer will generally be catered to with a short, more experience-driven site. These sites will aim to give the gamer a taste of the action without getting too lengthy in content and try to impress visually.

The second gamer wants story elements, explanation of the game mechanics and media to immerse them in the world of the game. This leads to a larger and more content-driven site which doesn’t necessarily have to look visually impressive.

2. Flash vs. HTML/CSS

Usually the choice between the Flash-layout and HTML/CSS-layout isn’t that complicated. Flash, being a dynamic and highly interactive medium, definitely has its advantages, but in most cases HTML/CSS is easier to build, less expensive and is also easier to maintain. However, when you enter the game industry (or any entertainment industry), you’ll consider this decision from a completely different point of view.

According to the research, roughly 70% of the game sites used Flash. Some of these sites incorporate Flash elements into HTML/CSS-based layout, but the majority is definitely “Full Flash”. In some cases this makes perfectly sense (an experience-driven site definitely needs Flash), but in some other cases Flash is used just for the sake of it.

Full Flash sites

Full Flash, being the the most common site type for game sites, is primarily used for games that have a short shelf life or are intended to offer a short user experience. As stated above, these games want to sell hard and fast, so a Flash site trying to pull a gamer over the edge with strong visuals and animation actually makes sense.

The Bioshock8 site is an average full Flash game site.

Flash and HTML/CSS combined

A combination of Flash and HTML/CSS appears more often than pure CSS-based designs. The division between the amount of Flash and HTML/CSS varies from site to site — some sites just incorporate a simple animation while others use large trailers and video-clips to attract visitors’ attention.

The “hybrid-approach” has the main benefit that it allows for animation and integrated video, but is much easier to maintain. This type of site has a good balance between being visually impressive according to game industry standards, yet also allowing usual blog activities such as developer blogs, podcasts, news updates, releases of new features etc.

This type of sites is common for game sites that an online multiplayer mode or are intended to be used and developed for a long time. When a developer wants to involve the player into the production process of a game, a hybrid site is often the best option to consider — and Flash can be used to spice things up a little bit and create a rich visual experience.

Starcraft 29
The Starcraft 2401110 site is a good example of a Flash and HTML/CSS-hybrid which combines the best of both worlds.

A good example is the Blizzards highly anticipated real-time strategy game Starcraft 2401110. The site constantly releases new parts of the story and unveils new units on many customized pages. Such updates would be rather time-consuming on a pure Flash-based site.

Pure CSS-based sites

If you take a look around in the game indutry, you’ll rarely find pure CSS-based design solutions. Game sites that go this route are usually focused on content. Such sites never provide an impressive visual experience, although they tend to use vivid background images and striking imagery. In fact, hese images are used to create an appropriate atmosphere rather than create an interactive user experience.

Apparently, usually it has to to with the fact that the site is heavily dependent on regular updates through a CMS system, because CSS-based sites which have been covered in the research were all updated on a regular basis. A good example is Lionhead’s fable 2 site12 which is purely CSS-based and has a lot of content including developer profiles and diaries.

Fable 213
YouLionhead’s Fable 214 site: here you’ll find content instead of interactive elements.

At the first glance game sites seem to be infected with really bad design decisions. On most sites reallz frustrating design elements such as splash screens appear over and over again. Below you’ll see some of the most common ones.

The Flash experience site

Sites of this kind are designed exactly as you would expect them to be designed. The experience site’s goal is to get you excited about a game by offering you something totally different from your usual browsing experience. For instance, Halo 3 Believe15 is a good example of an experience site. It uses strong visuals and 3D-animation to create the appropriate atmosphere and the mood. Such sites focus on creating a “stunning” visual experience and often include mini-games which are supposed to draw visitors’ attention to the actual game in an interactive way.

Halo 3 Believe16
Halo 3 Believe17 is a typical example of a full Flash experience site made to create a
“buzz” for the title.

Examples of how experience sites may try to break the mold:

  • Unique control scheme
  • Replica of certain game elements
  • Mini-games included in site
  • Visual experience with some interactivity

It’s quite unusual that a lot of game sites actually realize that visitors of the site should not be forced into the heavy interactive experience while the page is being loaded. It doesn’t matter how great the experience site is, if a user is simply looking for information related to the game this Flash-experience will only get in his way. Experience sites are often offered separately, as a single page, accessible from the game’s website. Consequently, the choice to launch the experience or not is user’s decision, which is good from the usability point of view.

One frustrating downside of experience sites is the simple fact that most of them require a lot of time to load. Of course, it depends on user’s connection, but file sizes of the Flash files can get pretty large in size to the point that even users with fast broadband connection may need to wait a couple of minutes first. This becomes even more problematic if there are multiple entities in the experience site which are loaded separately, one after each other. Numerous training missions on The Metal Gear Solid 418 site are an excellent example of this problem.

Splash screens

One of the common trends in game industry web-sites are large, vibrant, ugly and obtrusive splash screens. A large number of game sites start with a splash screen which asks the visitors to enter their birthday. Why? Isn’t it more reasonable to as the user to type in his age?

While the age check might be mandatory in some cases or at the very least something that some developers feel is their responsibility, it is remarkable that many sites use dual splash screen: age check being combined with a follow-up language selection screen. Why language selection at all? The game itself is surely not going to be released in 20 languages, so why release the website like this?

Use of intros

You just had an age check splash screen and clicked through the language selection splash screen. What’s next? Right! If you are unlucky you get another splash screen with the game intro — and in many cases the latter can not be skipped! It doesn’t matter whether you are a standards purist or a hardcore Flash developer — we should all be able to agree on this one. This is just ridiculous and disrespectful in regards to users.

Just how bad can the use of splash screens followed by intros be? Have a look at the example below:

Splash screen madness
Google Ninja Gaiden19 and enter the game selection page. Pick your game.

Splash screen madness
Enter your birthdate

Splash screen madness
Agree that you’d like to continue

Splash screen madness
Now wait a couple of minutes while the site loads. When it does you’ll get to see the intro which you can not skip.

Using visuals from the game

To strengthen the brand and ties to a game some designs use visual elements which display the elements of the game itself. This is done through use of iconic images or by using vivid imagery which is used in the game. A common example is that you see elements from the game’s user interface re-used in the site. Another example is to use a big imagery of the main character and give it a dominant position in the design layout.

Rise of the argonauts20
The Rise of the Argonauts21 site opens its main page with a view of the
characters you’ll end up playing in the game.

Video/trailer on the main page

Video footage of a game in action is important since most gamers are very keen on getting a rich visual experience. Some design agencies make use of it and display only a single video or trailer on the main page. Does this give the user exactly what he needs? Or is it a waste of available space and communication potential?

Dragon Age
Dragon Age’s minimalist main page. One can argue if visitors of the site expect to have only a video-footage on the official site’s page.

Developers blogs and podcasts

Games usually have big budgets, large teams and take a long time to develop. For a developer nothing is worse than wasting four or more years at one single game only to see it hit the shelves and find out in the end that nobody actually cares. To avoid such problems game producers try to bind gamers to the game long before it is actually released.

The classic way to do this is through games conventions and advertisements in the game community. Furthermore, design agencies seem to have realized the power of blogging and similar activities recently. Consequence: large game sites often have developer blogs and sometimes even podcasts. Such blogs provide game producers with a medium to communicate their ideas vividly and initiate a dialogue with potential customers, listen to their needs and refine games objectives.

Publisher’s presence in the game’s site

Some game designers have their game’s site incorporated into the site of the publisher or marketer. Sometimes game sites have a tiny header at the top of the site which leads to other games released by the same publisher. Its main downside is that the header adds an extra layer of navigation which users actually don’t need to have. In some cases it is really hard to distinguish between this level of navigation and internal navigation on the actual site which is quite bad from the usability point of view.

Rise of the argonauts22
Double navigation and two logos are common amongst game sites.

Unconventional navigation and layouts

This is an attribute which is common for most Flash-based design layouts. The movie, entertainment and game industries often strive for sites that push the edge as far as the experience is concerned. It often results in sites that have an unconventional navigation. This approach sometimes leads to creative masterpieces, but more often out of the box-layouts simply confuse the user.

Lost planet23
Navigation is hidden in the top left graphic. Have a look at the story section for some really unusual and design choices.

4. Putting it all together

I’ve you have read this far you’ve already concluded that web sites for video games have their absolute highs, but also definite lows. You can find a small recap and some thoughts below.

Strengths of game industry websites

The strength of game industry lays in its creativity and its desire to be inspiring. The average game (usually) has beautiful artwork that can (and usually is) used to create a good-looking website with rich visual experience. Game industry sites are also an excellent place to consider if you are looking for inspiration from websites that break the mold.

The game industry makes uses of blogging to focus users’ attention on the upcoming game. While the amount of Flash found in game sites may put the average standard-aware designers off, sites like Diablo 3 and Starcraft 2 prove that HTML/CSS and Flash can go hand in hand to deliver a visually stunning experience that need not hinder the user’s browsing experience.

Weaknesses of game industry websites

The liberal use of Flash combined with a desire to offers users something truly different results in a number of sites with uncommon layout and navigation schemes. If the navigation is intuitive and simple it’s great: then the designers crafted a unique experience that has bound to get a lot of traffic from web enthusiasts and gamers alike. Most of the time, unfortunately, the navigation ends up being hard to grasp and very unintuitive.

The game industry tries extremely hard to create stunning websites, but seems to have forgotten the old saying “less is more”. The price of biting off more than you can chew as far as “out of the box Flash design and development” is concerned is a site that frustrates and ultimately drives users away prematurely. With games there is a relatively small window of opportunity where all eyes are focused on the title. In this time span the design should manage to capture users’ attention. A poorly executed design and navigation concept that pushes users away or leaves a bad impression should be avoided at all costs.

The use of multiple splash screens combined with intros is a similar problem which should (and can) be avoided. A website that is created to promote or sell a product should always try to avoid elements that frustrate the user. Just because other sites use this approach it doesn’t mean it makes the consequences less important.

5. Showcase

The sites displayed below have been selected according to their visual appeal and uniqueness. I haven’t considered usability and accessibility since these are aspects of design the game industry generally tends to ignore.

Mirror’s edge
The Mirror’s edge site is actually a promotional site for the E3 expo. It’s a one page site that looks like it uses HTML/CSS but doesn’t. The Flash is unobstrusive, though.

Mirror's edge

Wrath of the Lich king24
The Wrath of the Lich King site is a good example of impressive visuals used in a HTML/CSS and Flash-based site. There is also a non-Flash version available.

Wrath of the Lich king25

Kung Fu Panda26
Impressive full Flash site that captures the look and feel of the movie.

Kung Fu Panda27

Sonic Chronicles28
The Sonic Chronicles site has an interesting control scheme that mimics the stylus based controls of the Nintendo DS.

Sonic Chronicles29

Diablo 330
Diablo 3’s site is a visual masterpiece that breathes life into the story, the world and its denizens. The design of classes and monster pages are breathtaking.

Diablo 331

Champions Online32
Great example of a site that follows the style of the game. Notice the use of social media icons in the news items.

Champions Online33

The Darkness34
The Darkness has a unique navigation scheme that is actually rather confusing. What this site actually does extremely well is to set the mood and raise expectations — is it a fair trade-off?

The Darkness35

Very clean and appealing site with a minimal use of Flash. So minimal it could have been left out without losing much mood.


Fallout 338
Fallout 3’s retro look is very different from the rest of the crowd, but perfectly illustrates the art direction of the game.

Fallout 339

Starcraft 2401110
Starcraft 2 is a good example of an eccentric video game site with animation and video all over the place. Apart from the fact that the trailer starts to play automatically, the Flash is never obtrusive.

Starcraft 241

Gaia online42
A clean yet characteristic site that combines an online game with a social community.

Gaia online43

Infinite undiscovery44
A full Flash site with some impressive visuals and interface graphics. The background music also sets the appropriate atmosphere.

Infinite undiscovery45

Dragon quest monsters46
Graphic-heavy Flash site that combines colorful illustrations with a clean interface.

Dragon quest monsters47

Bully’s site is great looking and hits the right mood. The creators have. however, made some really strange choices concerning the use of pop-ups.


This site uses basically only streaming video. Suprisingly, it works very effective.


The Orange box52
The Orange box has a unique design that not only works well, but also instantly sets it apart from every other game site out there.

The Orange box53

The Last remnant54
Good-looking full Flash site with a traditional navigation set-up for easy browsing.

The Last remnant55

Zak&Wiki’s site looks as playful as the game characters themselves.


The zelda universe58
The Zelda universe is a portal site for all of the Zelda games. The site is featured because it looks very different from the usual offerings.

The zelda universe59

Mario Kart60
The Mario Kart site combines the clean look of the Wii with the colorful characters you’d expect from a Mario game.

Mario Kart61

6. Help us to shape the follow-up article!

This article is the first part of a two-part-series. The second part will deal with the workflow of designers and developers in the game industry. I’ll be talking to people from the industry and ask them questions on who they work with, what strengths and traits they look for and much more.

For part two I’m going to give you the opportunity to ask questions about working and getting work as a web designer/developer in the game industry. So post your questions in the comments and I’ll try to find answers to most of them.


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43
  44. 44
  45. 45
  46. 46
  47. 47
  48. 48
  49. 49
  50. 50
  51. 51
  52. 52
  53. 53
  54. 54
  55. 55
  56. 56
  57. 57
  58. 58
  59. 59
  60. 60
  61. 61

↑ Back to top Tweet itShare on Facebook

Youri Souiah is a Web designer, blogger, import magazine addict, Junko Mizuno fan and hardcore gamer turned casual. Other than blogging on his weblog , he also runs Tutorials we heart — the site that collects the best tutorials from all over the Web.

  1. 1

    Blizzard – no comment – ps.(blizzard i love everything!’)

  2. 52

    Not necessarily. I think the article makes a good point that big user experience is important to set up the hype for a “coming soon” title or for a one-off site that will have little or no repeat visitation. Sites that maintain a community would do well to keep a lot of the “oohh ahh” flash bits unobtrusive and navigation straight forward. Otherwise it gets old very quickly and you lose your audience. The alternative of course is to have all of the social interaction done on forums which can work, but isn’t my favorite venue to get all the latest from the game devs.

  3. 103

    Not necessarily. I think the article makes a good point that big user experience is important to set up the hype for a “coming soon” title or for a one-off site that will have little or no repeat visitation. Sites that maintain a community would do well to keep a lot of the “oohh ahh” flash bits unobtrusive and navigation straight forward. Otherwise it gets old very quickly and you lose your audience. The alternative of course is to have all of the social interaction done on forums which can work, but isn’t my favorite venue to get all the latest from the game devs.

  4. 154

    It was the perfect moment to release this article, because just about now I was searching to find inspiration for designing a game site. Can’t wait to see the second article of this series.

  5. 205

    Hah, wow. This article couldn’t have come at a better time. I am currently in the thick of designing a big game website, and I’ve been looking at as many other game sites as I can find for the past month or so. Its great to actually have a narrative to go along with the visuals.

    In my experience, one of the most appropriate uses of flash is websites for the entertainment industry. Especially for big budget games, it is important that the website really captures the feel of the game. If the game favors action over story, the website should reflect that, which can be difficult to do without flash. The websites for Diablo 3 and Starcraft 2 are great examples of marrying the richness of flash with the content of html/css.

    I think the problem is that a lot of good designers tend to be purists in their craft. Its either totally SEO, searchable, standard, degradable html/css or totally rich, immersive flash. Its hard to find someone who does both well.

  6. 256

    Currently, i’m as well designing a site based for a new guild in World of Warcraft, redy for the wrath of the lich king expansion. It is indeed true wht the article sais. The exampels are amazing. However, I feel that the world of warcraft sites gives one of the best user centered experience, as well considering it is a big and demanding audience.

    Currently, im experimenting with Ajax / Flash and css as well to try to obtain the bit of quality.

    I personally think that these sites excell in their different use of elements for picking flash, ajax, javacript, xml based parts. I got the idea that the web-creators there at Blizzard really knew what each part had to do for specific target groups.

    One of the few things I get annoyed about still is the flash intro’s. What I am doing at the moment is trying to get the intro loading one time, set a cookie and won’t show for at least 30 days. It’s on a higher layer using Scriptaculous & Prototype to view the flash intro nice and smooth, with the site loading in the background. So no refreshing pages. I’m not sure if my approach is the best, but I feel it gives a better experience for users.

    I see it as a half-transparant bag, where you are curious about the contents but very attracted to the decoration of the bag itself, making it look even more appealing.

  7. 307

    Nice, completely agree.

  8. 358

    Lelia Katherine Thomas

    September 4, 2008 6:01 pm

    “Today we have schoolgirls with pink customized handhelds…” –Thanks for generalizing about the female sex. I’ll just go play TF2 now.

  9. 409

    You touch upon the obtrusiveness of websites, but I don’t think you emphasize enough. I think the largest problem with pure Flash sites is that they are force you to be “immersed”. All, great, but if I want info, I don’t want to spend years of my time waiting for all the intros to run, then the bday check, then the change scene graphics on top of all the loading screens. OMG!

    I’m convinced that the HTML/Flash combo is the way to go. An added reason is that only now has flash started to implement things like scroll wheel support and function key support. Also, when you are surfing a Flash site… you can forget tab browsing or new-window browsing. I use new-window browsing extensively to temporarily place hold what I need to come back to later, as I assume others do as well. This and you get to wait for the all transitions and loading times every time you want to go back to where you were before. I cut my load times down extensively by almost never using the back function, but by opening new windows.

    Flash looks great, but too many people over do it.

    I have noticed another issue lately. Maybe designers are not starting to open new panes in their sites with Ajax or the like. This is all great too, but also defeats the purpose of tab or new-window browsing. Including the fact that they force you to point your mouse to a small X to close the window or the next image. Not worth my time and bothers the hell out of me when I want to see lots of images.

    Just my two cents.

  10. 460

    I really like how a lot of new gaming sites get really nitty gritty. Whether it be pulling in game stats like or really engaging the consumers like, these game sites are really embrassing marketing vs being simple product pages of the past.

  11. 511

    What about runescape ?

  12. 562

    =) I play runescape too but I don’t think jagex had ‘design priorities’ in mind when they made the site. (Although they’re ‘better-ing’ the graphics lately)

  13. 613

    1eZncm hi! how you doin?

  14. 664

    I think you are all just stupid sons of crap heads who dont know where they are talking about if you want to do it for real then go to 115lakeviewdr. and i will show you!!!!!! my real name is samuel alaniz

  15. 715

    Haha great article guys! I’m a huge game player and have been to a lot of the sites you mentioned– I do agree about the fact that many of them have strange, unintuitive navigation.

    But they’re all so damn pretty, so it made up for it ;)

  16. 766


    I think they’re just trying to put into perspective the kinds of demographics we have playing games now. What’s wrong with a pink handheld? I’d pick one up if I could.

    Also, thanks for picking one of the most mainstream shooters to prove your point. You sure got ’em GOOD.

  17. 817

    Interesting article, however I was looking for an article on design for online tetris-like games, quizzes and stuff like that, those kind of sites / pages are widespread on social networks is there such a post on smashing magazine ?

  18. 868

    Great article :)

    I really like the new gaming sites . Whether it be pulling an online game sites like really engaging the consumers like, these game sites are really embarrassing online gaming websites.


↑ Back to top