Menu Search
Jump to the content X X
Smashing Conf Barcelona 2016

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf Barcelona, dedicated to smart front-end techniques and design patterns.

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? Link

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 Link

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 Warcraft
Blizzard’s World of Warcraft 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 multiplayer online game will focus mainly on players already playing their game opposed to seducing potential buyers. This leads to an entirely different website where content is more important than a slick presentation.

A good example of the second is the World of Warcraft site. This site is a massive 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? Link

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 gamers 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 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 many 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 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 Link

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 perfect sense (an experience-driven site needs Flash), but in some other cases Flash is used just for the sake of it.

Full Flash sites Link

Full Flash, being 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 brief 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 makes sense.

The Bioshock5 site is an average full Flash game site.

Flash and HTML/CSS combined Link

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 primary 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 2
The Starcraft 2 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 2. The site regularly 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 Link

If you take a look around in the game industry, 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, these images are used to create an appropriate atmosphere rather than create an interactive user experience.

Apparently, 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 two site which is purely CSS-based and has a lot of content including developer profiles and diaries.

Fable 2
YouLionhead’s Fable 2 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 really 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 Link

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 Believe6 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 Believe7
Halo 3 Believe8 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 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 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 49 site are an excellent example of this problem.

Splash screens Link

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 publish the website like this?

Use of intros Link

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 Gaiden 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 Link

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 the use of iconic images or by using vivid imagery which is used in the game. A common example is that you see elements of the game’s user interface re-used on 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 argonauts10
The Rise of the Argonauts11 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 Link

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 Link

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 cares. To avoid such problems game producers try to bind gamers to the game long before it is 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 Link

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 that leads to other games released by the same publisher. Its main downside is that the header adds an extra layer of navigation that users don’t need to have. In some cases it is 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 argonauts12
Double navigation and two logos are common amongst game sites.

Unconventional navigation and layouts Link

This is an attribute that 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 planet13
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 Link

I’ve you have read this far you’ve already concluded that websites 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 Link

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 beautiful 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 Link

The liberal use of Flash combined with a desire to offers users something truly different results in some sites with unusual 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 Link

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 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 king14
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 king15

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

Kung Fu Panda

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

Sonic Chronicles

Diablo 316
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 317

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

Champions Online19

The Darkness20
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 Darkness21

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


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

Fallout 325

Starcraft 2
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 2

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

Gaia online27

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

Infinite undiscovery29

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

Dragon quest monsters

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 box34
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 box35

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

The Last remnant37

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


The zelda universe40
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 universe41

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

Mario Kart43

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

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.

Footnotes Link

  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
SmashingConf Barcelona 2016

Hold on, Tiger! Thank you for reading the article. Did you know that we also publish printed books and run friendly conferences – crafted for pros like you? Like SmashingConf Barcelona, on October 25–26, with smart design patterns and front-end techniques.

↑ 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

    I find this article very interesting !
    For me, user experience is really important but the goal when you make a game site to create an universe for the game and to make user dream.
    Hybrid sites (flash-html) are a good solution for big websites that have much content.
    I think fortunately everyone has a different idea of game website conception and this make the difference between one site and another.
    If all websites were the sames, it would be to much boring.

  2. 2


  3. 3

    I think that fansites should be mentioned too.

    Here is mine:

  4. 4

    Good article. :)

  5. 5

    my firm designs a lot of websites for game companies, and it’s kind of a hard sell to get someone to do an HTML/css site (except for a title with a tiny budget). user experience is NOT at the heart of the designs and, as much as we push it, doesn’t feel like we’re getting anywhere. We just launched the Warhammer: Battle March ( in HTML/CSS, but even there we use flash (for videos and some other stuff coming up). User experience is king, and should always be king.

  6. 6

    Why mmorpgs?…. really why? I just don’t get it. The designs are great but come on… once you’ve slain the level 77 dragon on game A is it really that all different from conquering the level 12 master on game B? Console games all the way…

  7. 7

    Rodrigo Seroiska

    August 21, 2008 5:00 pm

    Oh my god!
    This is one of the best article what I read in a lot of months…
    Amazing =)

  8. 8

    @ James, your site seems to be suffering from a www. problem:
    In otherwords, turns up nothing if it is not preceeded by www. If your host didn’t set that up for you, you can fix it in you htaccess file (assuming you’re using apache).

  9. 9

    @ben weird – the url works for me

  10. 10

    Fantastic article. Blizzard is amazing. (And yes, I play World of Warcraft so I’m probably a little biased, but they definitely produce some amazing work.)

  11. 11

    I love all of the BLizzard Sites, tho I may be a little biased because I’ve been a fan of Blizz for over 5 years, but it is true. They put great effort into their sites.

  12. 12

    It’s so great!

  13. 13

    Jamie Lottering

    August 21, 2008 8:08 pm

    Gonna have to also say that Blizzard wins my heart for game site design

  14. 14

    Awesome collection….
    very inspiring..!!

  15. 15

    Excellent article – best I’ve seen here in months!

    (One thing, though: there’s no “t” in “Lich”.)

  16. 16

    yes i really agree that this is a nice blog.

  17. 17

    yes reall i agree to that topic.

  18. 18

    Interesting read, excellent article with lots of details and examples.

  19. 19

    Well done! Please though, next time around get a spelling and grammar checker.

  20. 20

    wooooOOoo… nice!

    I prefer if game site is in full flash :)


↑ Back to top