VG Views – Evolution of the Design

2 Out of Three recently finished a project for our former Electronic Arts colleague Nitzan Wilnai and his new video game social network VG Views. Working closely with Nitzan – and the 2 Out of Three engineering team – we created a site we’re very proud to show off. We also thought it would be fun to take you through the design processfor VG Views; showing you some of the wireframes, rejected logo designs and the multiple stages of web site design.

For each project it’s good to try and get to the core of the product or service that is being offered. In the case of VG Views we did not have to do much research as we have been working in the video game industry for over six years. So when it came time to find a design metaphor that encompassed the variety of different video games and gaming platforms we quickly gravitated to the idea of pixels. All video games – from low fidelity cell phone games to the graphic intensive games found on the “Play Station 3″ are made from pixels – therefore, it just made sense to create the logo and website design for VG Views with pixels in mind.

We began our work with VG Views by working on the logo. This seemed like the best place to start as it would help define the overall look and feel of the site and go a long way towards defining the color scheme for the website. Using the idea of pixels we began by doodling in our notebook and then brought a few of the better ideas into the computer. After a few rounds of feedback with our client Nitzan we were able to create a design that he was happy with. Below are a few of the iterations we went through.

Wirefremes are valuable because they allow very quick explorations of your site’s layout and functionality. Without having to worry about a polished look and feel – I usually like to do all my wireframes in black and white to reinforce that idea – you can quickly produce and iterate on ideas. In the below examples you can see the different layouts for the header of the site. These different wireframes illustrate a couple of alternative tabbed navigation and advertising options.

Because we were able to pin down the layout and functionality of the website during the wireframe round, the different aesthetic design rounds focused on color schemes, style, and other look and feel elements. Below you can see a few steps in evolution of the design.

After all the steps in the creative process are done it is nice to look back and see how far you’ve come. The live site is now up at www.vgviews.com. You might even want to write a review of your favorite game as they are holding a contest where the best review each month wins a Nintendo Wii.