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.
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.
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.
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.
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.
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.
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.
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.
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:
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 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.
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 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.
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.
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.
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.
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.
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?
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.
6. Help us to shape the follow-up article!
This article is the first part of a two-part-series. The second part will deal with the workflow of designers and developers in the game industry. I’ll be talking to people from the industry and ask them questions on who they work with, what strengths and traits they look for and much more.
For part two I’m going to give you the opportunity to ask questions about working and getting work as a web designer/developer in the game industry. So post your questions in the comments and I’ll try to find answers to most of them.
- 1 http://www.thefwa.com/
- 2 http://www.blizzard.com/diablo3/
- 3 http://www.blizzard.com/diablo3/
- 4 http://www.worldofwarcraft.com
- 5 http://www.worldofwarcraft.com
- 6 http://www.worldofwarcraft.com/
- 7 http://www.2kgames.com/bioshock/enter.html
- 8 http://www.2kgames.com/bioshock/enter.html
- 9 http://www.starcraft2.com/
- 10 http://www.starcraft2.com/
- 11 http://www.starcraft2.com/
- 12 http://www.lionhead.com/fable2/Default.aspx
- 13 http://www.lionhead.com/fable2/Default.aspx
- 14 http://www.lionhead.com/fable2/Default.aspx
- 15 http://halo3.com/believe/
- 16 http://halo3.com/believe/
- 17 http://halo3.com/
- 18 http://www.konami.jp/mgs4/de/index.html
- 19 http://ninjagaidengame.com
- 20 http://www.rise-of-the-argonauts.com/
- 21 http://www.rise-of-the-argonauts.com/
- 22 http://www.lucasarts.com/games/theforceunleashed/
- 23 http://www.lostplanet-thegame.com/ce/flash_index.php
- 24 http://www.worldofwarcraft.com/wrath/
- 25 http://www.worldofwarcraft.com/wrath/
- 26 http://www.kungfupandagame.com/
- 27 http://www.kungfupandagame.com/
- 28 http://www.sega.com/sonicchronicles/us/
- 29 http://www.sega.com/sonicchronicles/us/
- 30 http://www.blizzard.com/diablo3/index.xml
- 31 http://www.blizzard.com/diablo3/index.xml
- 32 http://www.champions-online.com/
- 33 http://www.champions-online.com/
- 34 http://www.2kgames.com/thedarkness/flash.htm
- 35 http://www.2kgames.com/thedarkness/flash.htm
- 36 http://game.wakfu.com/en/news/2613-the-boars-are-on-the-march.html
- 37 http://game.wakfu.com/en/news/2613-the-boars-are-on-the-march.html
- 38 http://fallout.bethsoft.com
- 39 http://fallout.bethsoft.com
- 40 http://www.starcraft2.com/
- 41 http://www.starcraft2.com/
- 42 http://www.gaiaonline.com/
- 43 http://www.gaiaonline.com/
- 44 http://www.infiniteundiscovery.com/
- 45 http://www.infiniteundiscovery.com/
- 46 http://www.dragonquestmonstersjoker.eu.com/en/
- 47 http://www.dragonquestmonstersjoker.eu.com/en/
- 48 http://www.rockstargames.com/bully/home/
- 49 http://www.rockstargames.com/bully/home/
- 50 http://www.rockband.com/
- 51 http://www.rockband.com/
- 52 http://orange.half-life2.com/
- 53 http://orange.half-life2.com/
- 54 http://www.square-enix.co.jp/remnant/
- 55 http://www.square-enix.co.jp/remnant/
- 56 http://www.zackandwiki.com/
- 57 http://www.zackandwiki.com/
- 58 http://www.zelda.com/universe/
- 59 http://www.zelda.com/universe/
- 60 http://www.mariokart.com/wii/launch/
- 61 http://www.mariokart.com/wii/launch/