Game Sites Design Survey: Examples and Current Practices

Advertisement

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.

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

3. Trends in game site designs

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

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

Wakfu37

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

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

Bully49

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

Rockband51

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&Wiki56
Zak&Wiki’s site looks as playful as the game characters themselves.

Zak&Wiki57

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.

Footnotes

  1. 1 http://www.thefwa.com/
  2. 2 http://www.blizzard.com/diablo3/
  3. 3 http://www.blizzard.com/diablo3/
  4. 4 http://www.worldofwarcraft.com
  5. 5 http://www.worldofwarcraft.com
  6. 6 http://www.worldofwarcraft.com/
  7. 7 http://www.2kgames.com/bioshock/enter.html
  8. 8 http://www.2kgames.com/bioshock/enter.html
  9. 9 http://www.starcraft2.com/
  10. 10 http://www.starcraft2.com/
  11. 11 http://www.starcraft2.com/
  12. 12 http://www.lionhead.com/fable2/Default.aspx
  13. 13 http://www.lionhead.com/fable2/Default.aspx
  14. 14 http://www.lionhead.com/fable2/Default.aspx
  15. 15 http://halo3.com/believe/
  16. 16 http://halo3.com/believe/
  17. 17 http://halo3.com/
  18. 18 http://www.konami.jp/mgs4/de/index.html
  19. 19 http://ninjagaidengame.com
  20. 20 http://www.rise-of-the-argonauts.com/
  21. 21 http://www.rise-of-the-argonauts.com/
  22. 22 http://www.lucasarts.com/games/theforceunleashed/
  23. 23 http://www.lostplanet-thegame.com/ce/flash_index.php
  24. 24 http://www.worldofwarcraft.com/wrath/
  25. 25 http://www.worldofwarcraft.com/wrath/
  26. 26 http://www.kungfupandagame.com/
  27. 27 http://www.kungfupandagame.com/
  28. 28 http://www.sega.com/sonicchronicles/us/
  29. 29 http://www.sega.com/sonicchronicles/us/
  30. 30 http://www.blizzard.com/diablo3/index.xml
  31. 31 http://www.blizzard.com/diablo3/index.xml
  32. 32 http://www.champions-online.com/
  33. 33 http://www.champions-online.com/
  34. 34 http://www.2kgames.com/thedarkness/flash.htm
  35. 35 http://www.2kgames.com/thedarkness/flash.htm
  36. 36 http://game.wakfu.com/en/news/2613-the-boars-are-on-the-march.html
  37. 37 http://game.wakfu.com/en/news/2613-the-boars-are-on-the-march.html
  38. 38 http://fallout.bethsoft.com
  39. 39 http://fallout.bethsoft.com
  40. 40 http://www.starcraft2.com/
  41. 41 http://www.starcraft2.com/
  42. 42 http://www.gaiaonline.com/
  43. 43 http://www.gaiaonline.com/
  44. 44 http://www.infiniteundiscovery.com/
  45. 45 http://www.infiniteundiscovery.com/
  46. 46 http://www.dragonquestmonstersjoker.eu.com/en/
  47. 47 http://www.dragonquestmonstersjoker.eu.com/en/
  48. 48 http://www.rockstargames.com/bully/home/
  49. 49 http://www.rockstargames.com/bully/home/
  50. 50 http://www.rockband.com/
  51. 51 http://www.rockband.com/
  52. 52 http://orange.half-life2.com/
  53. 53 http://orange.half-life2.com/
  54. 54 http://www.square-enix.co.jp/remnant/
  55. 55 http://www.square-enix.co.jp/remnant/
  56. 56 http://www.zackandwiki.com/
  57. 57 http://www.zackandwiki.com/
  58. 58 http://www.zelda.com/universe/
  59. 59 http://www.zelda.com/universe/
  60. 60 http://www.mariokart.com/wii/launch/
  61. 61 http://www.mariokart.com/wii/launch/

↑ Back to topShare on Twitter

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.

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1
  2. 2

    I think that fansites should be mentioned too.

    Here is mine: http://lineage2.fansite.cz/

  3. 3

    Good article. :)

  4. 4

    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 (battlemarchthegame.com)site 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.

  5. 5

    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…

  6. 6

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

  7. 7

    @ James, your site seems to be suffering from a www. problem:
    In otherwords, battlemarchthegame.com 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).

  8. 8

    @ben weird – the url works for me

  9. 9

    Christian Watson

    August 21, 2008 5:49 pm

    As the web director for a gaming company, I await your second article with interest. A couple of sites of ours you might enjoy are Tabula Rasa and Dungeon Runners.

    Of course, web sites for MMO games have much different requirements than those of single player games that have a shelf life of a few months or so. In addition MMO companies are becoming increasingly interested in how players can interact with the game outside of the game client — for example, via mobile devices or the game web site.

    This is where MMO game web sites will be going over the next couple of years and it will be a fun challenge for anyone involved in their development.

  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

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

  21. 21

    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.

  22. 22

    James: “my firm designs a lot of websites for game companies… …user experience is NOT at the heart of the designs… …site in HTML/CSS, but even there we use flash… …User experience is king, and should always be king.”

    You will become better at your job if you learn to absorb the latest trends, the meaning behind the buzzwords. Make the ideas and techniques only new weapons to add to your arsenal. Don’t latch on to one idea religiously and refuse to acknowledge the relevance of others. The pursuit of standards compliant code, usable design and accessible implementation is a noble cause and it is important. But do not twist the words “user experience”, as is the trend, to represent one currently favoured way of doing things.

    In the games industry, perhaps more so than other industries with a lot of web-based interaction you know your demographic. Your target audience is quite an easily knowable thing. You must target your audience and, as you are selling an experience in itself, the game, you should offer a relevant experience. “User experience” should not mean HTML/CSS and weeping if Flash begins to load. It should mean identifying your users, understanding what is necessary for them to experience something which appropriately represents the subject matter, and implementing this in a way that is advised by our collective growth and knowledge as an industry but not restricted by popular ideology.

    This is not just the age old pro-/anti-Flash argument. That’s tired. It’s simply about not limiting yourself and knowing your audience.

  23. 23

    a very good article about “indeed” the overlooked game site….

  24. 24

    When you referred to age check you mentioned that its mandatory in some cases, that’s because of the ESRB. As far as I know, and I really should no more since I will be headed into this industry my self soon, any game thats rated M needs to have an age checker to make sure users are 18+. The same might go for rated T games, with the age set to 13, but I’m not 100% on that one.

    But any way, nice article, I’ve been hoping to see some game related stuff and here it is. Cant wait to see the follow up.

  25. 25

    Don’t forget CVG. The second largest gaming site in Europe:

    http://www.computerandvideogames.com

  26. 26

    Superb article!! it covers all i want to know about webdesign for games!!
    I would like to see more of these rich articles!!

    THNX!

  27. 27

    @Tom, probably the only comment from this article worth reading.

    I personally found this article to be a little too in tune with ‘my game genre is better than yours’. Also, I’m not really having a dig since English obviously isn’t your primary language, but someone should really proof read articles before they get published, since the spelling/grammar is terrible in this one.

  28. 28

    Great article excellent coverage of a wide array of gaming sites.


    Cheers
    Mark

  29. 29

    really nice article !

  30. 30

    “The game itself is surely not going to be released in 20 languages, so why release the website like this?”

    You’re so wrong! Games can have as many translations that nowadays movies have. It is so more convenient for websites to try to detect user’s language (browser / Geoloc)

  31. 31

    @Tom

    very, very good point your making there. I share your opinion on identifying your audience.

    My opinion on the article is very very good. It is quite nice to see a different perspective of where Flash is being used and where flash has am acceptance and experience factor you basically cant have with XHTML and CSS. Basic interactive Media.

    I am a Usability Kid. Im not always diggin’ what Jacob Nielsen has to say (especially about Flash) but I cut the informations I need to digest it proper. For me, this article just gave me other perspectives and things to think of about the usage of Flash. Ive never been so much into Games Webdesign (my playstation2 broke ages ago) but it was indeed intersting.

    Thanks alot smashing Mag.

  32. 32

    Very good survey. Keep going SM

  33. 33

    @Tom:
    Agree with you totally on this. Gamers are conditioned to wait large setup and loading times on PC/ Gamestations. And I am talking here as a gamer, not as a designer. We’d love to wait for 10 min of loading time, provided you dazzle us and make the wait worth it.

    @Youri
    Lovely collection you have here, please do note there is no T in Lich King. Fans of Fantasy/Mythology in General and Warcraft in particular would hate you for this, we’re very possessive about our characters.

    I agree with you on the Action vs RPG part, RPG sites are more detailed, because they have to be. RPG games often spawn Fan Fictions, Boardgames, Action figures SETS, and all of them sell, because there is a lot of story associated with each character. If you would look on Deviant Art, you would find more renderings of the said genre than any other. So being text heavy, they have more of HTML and CSS as compared to Flash.

    Perhaps you need to look at it this way, Game Creators have always been pioneers in creating and testing UI widgets. Everquest had faded menus and macro builders way before Vista or MS Office. Age of empires had the silent notification of events way before Yahoo messenger. Warcraft lets you discover and connect to active communities from inside the Game App, I am waiting for that to happen in Photoshop. (Sure, they have the resource center, but they have yet to entice me to go there)

    Usability of Games is different.
    An App is meant to be usable, to do things with ease.
    A Game is meant to be a frustrating obstacle, doable, yet just out of reach.

    if sites try to imitate that experience, do not judge them outright, the consumer base is different.

  34. 34
  35. 35

    It is so simple—video game websites need to tell a story, and hopefully leave the viewer w/ a sense that they have just experienced what the game is all about.

    Contemporary video games, as we all know, border on being mini-movies themselves. There are plots, storylines, casts—the list goes on.

    The reason that Flash is employed as the primary delivery platform is very simple, and no one (including the author of this article) should be scratching their heads as to why Flash is the platform of choice: CSS can’t quite tell a story, or throw the end-user into the middle of a full-blown web experience. Sorry, it just can’t.

    I hope we can move away from the on-going “platform battle”. Flash is Flash—if used properly, it is 2nd-to-none, and is not going anywhere. It displays video natively, and is viewable on everyone’s machine (yes, it is—the “plugin” debate is dead in the water). In fact, according to the latest stats, more machines are able to view Flash 8 content than have javascript enabled—something that is crucial to modern AJAX-powered websites.

    There is a time and place for both platforms—just use them when required, and think about the product being developed, not the platform it is being developed on…

  36. 36

    This is what I call a great article !

  37. 37

    This seems to be the best dialogue I’ve seen in awhile about a post on SM. None of the ridiculous “first post” comments, and good solid discussion not just about the post, but about the meanings behind the post and why some decisions are made.

    @Tom:
    I second the others in their kudos. Though, I’m not sure James’ argument was developed enough. He does say “user experience is king.” And, with that, we all know that the target audience of these sites is going to be looking for a different user experience than my grandma who is looking up tips on playing Bridge. So, as long as we’re designing and developing for the appropriate user, the user experience remains king.

  38. 38

    I’d like to thank everyone for the comments, it’s good to see that the article is appreciated and stirs up a healthy conversation. I’d love to respond to every single comment, but since this is Smashing magazine the volume of comments make this very unrealistic. I’ll do my best though:

    @ 9.Christian Watson:
    I too am very interested where the future sites of MMO’s will be heading to. If I’m not mistaken Sony’s the Agency that’s currently in development is going to have some form of mobile phone integration – perhaps sites will start to play roles like these as well.

    @15. HGK:
    My bad! I’m actually a casual gamer myself and played plenty of Warcraft 3 so I should have know it’s a lich instead of a litch…

    @33 Abhishek:
    Once again, I stand corrected on the lich issue!
    On the usability issue, you present an interesting view. One aspect of games is indeed to challenge the user. Should sites emulate that? I’m not so sure (would require more research!) but it’s definitely food for thought.

    @35 Craig Hooper:
    Fully agree with you. Flash is a tool that can and should be used if the project calls for it, and most game sites need Flash in one way or another.

  39. 39

    The sites are ok , the games are even good but when 80 % of the websites refer to a game that`s available only on consoles and all that stuff , you just want to throw that website to spam/thrash.

  40. 40

    Great article :)
    For me the Blizzard have the best game sites (design, information, functions), as the showcases have 3 of their sites, especially the startcraft 2 site is really great one . And I think this is because they have only few games, who are played for years.

  41. 41

    hey guys. have a look at the valve tf2 heavy update site:
    http://www.steamgames.com/tf2/heavy/

  42. 42

    I would like to know more about the relation between people behind all the artworks, the ones who design characters and such, and the web-designers. Are the web-designers allowed to ask for anything they have in mind, like a specific representation of a monster for the site’s background ? How do they work together etc…

  43. 43

    @Faelar:
    Good question. I think it might depend on whether the web team is in-house or not, but I’ll definitely bring it up.

  44. 44

    The best is diablo3 website yay is the best :)

  45. 45

    You forgot Assassin’s Creed site, where cool game experience is provided via flash.

    I don’t agree about the weaknesses you mentioned, because game sites aren’t designed, as you said, to sell a product. It’s not so called “main action” it expects from the user to take. Some of them got the “buy” button, indeed, but it’s not the main way of distribution. It’s retail stores and online shops like Amazon, in fact (the “buy” button mostly relates to such a site – it’s not the producer’s duty). So the purpose of game sites is to let players and fans experience the game, gain information they want and so on. Those who don’t know the game yet / aren’t its fans don’t visit official game sites at first – they usually get their first info from some game magazines or gaming portals / forums and then, if interested, go further. So if someone visits a game site, he probably knows already what is the game about and he wants to get even more impressed or make sure it’s not worth buying. Cool flash designs have my full approval in this case. I love e.g. SC2 site. I visited it long time ago, I keep coming back from time to time, and if the game is made as good as the site is, I’m gonna buy it (even though I quit playing years ago).

    The second thing is that the target isn’t some 60+ or EVERY young man or something. It’s PLAYERS only and players, believe me (’cause I used to be a hardcore one and I know many others too) are pretty quick at realizing what’s going on and getting used to new interfaces. Typical accessibility / navigation issues don’t apply here. You can be sure no blind person, for example, will visit it too, ’cause he likely don’t play games at all.

    The more interactive the site is, the coolest it is and the player – newbie or not, kid or adult – likes it more. It’s about the game, not the site in this case, so what he sees actually describes the game. How many players think: “the graphics are cool! so the game is cool..” ? – all newbies think so! Hardcore players, on the other hand, will appreciate all details and say: “Yeah, Blizzard has proven again they make best shit ever”.

    Just like a baseball bat is an extension to baseball player’s arm, the game site extends the very game. It’s one of the few exceptions where, IMHO, interactivity over accessibility is not only allowed, not only justified, but also desired.

    Web-design would be boring if such sites wouldn’t exist.

  46. 46

    Little errata: We can agree on the weaknesses if you gave some bad example sites, but I guess their sins wouldn’t differ from flash sites in general. Bad site is a bad site. Summary: game sites can be: flash only, unintuitive (in a creative way), bandwidth-eating, and whatever it takes, if well-done.

    And that into playing automatically on SC2 site, yeah, annoyed me a little, but hey.. It’s designed to be visited once and get the hell out. If you wanna updates, link directly to Features or Forums :-) This intro is stunning and it’s better to impress all newcomers rather than care not to annoy those who’s already seen it, form Blizzard’s point of view.

  47. 47

    What a glorious article. Best one in in months by far.

  48. 48

    about the workflow, who comes up with the idea the web team? the game designers? or is there a marketing team? who is in charge of how it looks and behaves I guess is my question is there any one from the original game overseeing the site?

  49. 49

    Great article and I look forward to the follow up! Good work.

  50. 50

    This is a really good topic, never really seen anyone write about game site design. In my opinion, Blizzard makes some of the most engaging websites for their games. Great attention to detail and I like how they incorporate flash. It, also helps that they have amazing illustrators!

  51. 51

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

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

  53. 53

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

  54. 54

    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.

  55. 55

    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.

  56. 56

    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.

  57. 57

    Nice, completely agree.

  58. 58

    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.

  59. 59

    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.

  60. 60

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

  61. 61

    What about runescape ?

  62. 62

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

  63. 63

    1eZncm hi! how you doin?

  64. 64

    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

  65. 65

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

  66. 66

    @Lelia:

    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.

  67. 67

    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 ?

  68. 68

    Great article :)

    I really like the new gaming sites . Whether it be pulling an online game sites like really engaging the consumers like http://www.freeonlinegamestoall.com, these game sites are really embarrassing online gaming websites.

↑ Back to top