Being an avid gamer, I thought I would get out there on the internets and see what video game industry websites were not only well built and designed, but also use the Drupal CMS. For each website I’ll talk a little bit about the overall visual appeal, their UI/UX (maybe even a little bit of information architecture) and I’ll also highlight a particular feature that made the website stand out to me as a front-end developer. Also keep in mind that not all of the websites in this list are for a video game in particular, but in the video game industry as a whole. Listed in no particular order:
We might as well start out with the heavy-hitter of the group here: League of Legends. With an active user base of over 32 million users, this is a fantastic example of a Drupal video game site that is showing its worth for a large scale enterprise setup. For its visual appeal, you gotta love the big, larger than life graphics that they are using for the backgrounds and the main navigation. They stick to a colour palette that I assume is sticking with the brand design guidelines as well, which always makes a huge difference to general aesthetics and balance. As for UI/UX they keep it simple, using what is commonly referred to as the K.I.S.S. methodology (Keep It Simple, Stupid). Basically they aren’t trying to overcomplicate the page, it's very clear and concise where you’re supposed to navigate in order to accomplish your goals as a user when you get to the site. A great example of this is their main navigation which also features what you could call a “Mega Nav” if you wanted. The difference between a “Mega Nav” and a simple drop down list is that they usually have links grouped in categories with some supporting imagery or other elements that you wouldn’t normally expect a drop down navigation to have. This allows the website to have most - if not all - of their links in a central place of the website, once again making it easy for users to navigate and find what they’re looking for.
Favourite Feature: Their “Promo Slider” they have right below the main navigation is pretty cool, especially when they mix in some animations to give it that extra oomph. That isn’t a real word but I’m using it anyways. And yes, while their current animation is using flash, they are providing a fallback via a background image - good job Riot!
Star Wars! As far as brand recognition goes, it doesn’t get much better than this, so it’s great to see them using Drupal for one of their biggest and most ambitious titles to date. Visually, they are definitely playing to their audience by showcasing large, action packed imagery of not only the game, but concept art as well - classic video game website tactic but an effective one nonetheless for that “Wow” factor. The site also uses iconography to great effect throughout the body of the page which I’m really glad to see. Icons (used properly) are a great way to break up what could be very text heavy sections, and also help to guide the user to particular actions that perhaps one word couldn’t possibly cover. The user interface/experience is fairly intuitive, but I do have to question their decision to put a primary navigation element below the “Hero Promo” banner. I find that it gets a little bit lost in between the header and the main content - but at the very least when you do find it, it’s implemented correctly and looks great as well.
Favourite Feature: An easy feature to overlook here is the multilingual capabilities of the site. SWTOR.com is available in 3 languages which you can switch to seamlessly at the top of the page. The layout is perfectly maintained throughout the site which is something that is often not easy to achieve. Again, while it’s not the sexiest of features, when implemented correctly it’s definitely an important part of the overall user experience especially for those of us who are overseas!
What? A gaming news site? Yes, while screwattack is not a game, it is still a website that represents the gaming community and they’ve used the Drupal CMS to bring their users what I think is quite a unique experience. As we’ve done with the previous two sites, lets start with the visual appeal of the site. I think it’s amazing. Why? For most gaming news/review sites I often feel like I’m being visually pummelled by all sorts of content, whether it be game ratings or popup ads or what have you. This site once again keeps it simple with a nice 2 column layout (body + sidebar) that lets you focus on the main body area first before then guiding you to the sidebar for any extra content they wish to publish there. The other interface elements of the page are fairly standard here such as the main navigation and search, but sometimes that's okay - using familiar techniques definitely does not hurt your users, but rather makes them feel at home.
Favourite Feature: In the “Our Latest Videos & Stuff” block in the sidebar the posts are coloured from red to blue according to how popular they are. A great subtle effect that I’m really interested to see how they implemented. Smells like some sort of SASS function to me…
Riot Games are the creators of League of Legends and they’ve developed a Drupal website to power their corporate site as well. They developed a really clean but impactful layout that really conveys their message and company culture. The colour palette is bang-on and they are doing some layering of elements which I really like as well. I’m going to mix my UI/UX review with my favourite feature because I absolutely love what they have done with the main body area of the front page. The treatment of the images on hover/active state is subtle yet effective in drawing you in at the same time.
Favourite Feature: “News Grid” on the front page is well laid out and has some fantastic active/inactive treatment - great work!
The Need For Speed franchise is a classic and it's great to see them (or their overlords, EA) using Drupal to power such an iconic brand in racing video games. Visually, I feel that the front page lacks a bit of substance that the other sites in this list provide, but once you start navigating around and getting deeper into the website it starts to show a lot more in terms of content and layout design. The UI is simple and effective especially with the use of our old pal the “Mega Nav” for the Games section - a sensible implementation in my opinion.
Favourite Feature: It’s responsive! The only responsive site in this list which I’m happy to see finally. While it may not be the best responsive implementation, its still nice to see them thinking about users viewing the site on various devices.
Well thats the end of my list. Hope it provided you with some insight on not only why these designs are appropriate, but also what the Drupal CMS platform can do for the video game industry. If you think I’ve missed any sites out there, throw them down in the comments. I’m always curious to see what else is out there!
Until next time, GLHF
Share this Blog with colleagues
