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 FWA, 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 3’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.

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?

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.

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

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

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

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

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.

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

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 Believe 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 Believe 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 4 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 publish 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:

Google Ninja Gaiden and enter the game selection page. Pick your game.

Enter your birthdate

Agree that you’d like to continue

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

The Rise of the Argonauts 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’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 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

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.

Double navigation and two logos are common amongst game sites.

Unconventional navigation and layouts

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.

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

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

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

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.

Wrath of the Lich king 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.

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

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

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

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

The Darkness 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?

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

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

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.

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

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

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

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

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

The Orange box 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 Last remnant Good-looking full Flash site with a traditional navigation set-up for easy browsing.

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

The zelda universe 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.

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

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.