(Photo by Torley: ‘An experiment in visual kinetics‘)
Welcome to Part 3 in this series of posts that takes an inside look into the development of my WordPress flash games arcade. If you’re new to this blog and you want to catch up on the series, read part 1 here and part 2 here. In this entry I will outline some of the initial design ideas for my new arcade, including elements of layout, textures and color schemes.
I should add that as of last night I have a working version up and running and I’ve purchased the domain name for the arcade. I’m planning on launching a closed beta next Monday. It won’t have all the user-side functionality but the core of the site will be working and will allow anonymous users to play all the games. Now on to design matters…
Working Process
So in simple practical terms how did I go about starting a design? Well it all came down to some basic research. I began by brainstorming the key elements I’d like to see in an arcade – an arcade that I would enjoy using myself. I then went and tried out around 10 other existing games arcades, ranging from ‘A-listers’ to small scale sites, and I compiled a quick pros and cons list based on my experience. The last thing I did was to look at my two existing arcades and specifically to look at statistics. Using Google Analytics I was able to get an in-depth sense of which games were popular, which parts of the site were most used, and most crucial of all: which parts were unnecessary. I then looked back over this data and reduced it to a set of 10 fundamental features that I’d like to use in my arcade.
I should also point out that the background to this research was oriented towards eliminating excess and redundancy from the arcade structure (something I wasn’t able to do in this post!), optimising categorisation and maximsing the presentation of game content.
Once I had my 10 point feature set, I then began a quick layout sketch using basic shapes, squares, rectangles, circles etc to come up with a content layout. Given the fact that any design I came up with would have to be layed over an existing WordPress theme, I had to limit myself to some fundamental layout factors: 2 column, 3 column, header, footer, sidebar etc. As much as I’d like to try something more radical, I simply don’t have the developer skills to implement wild ideas at this point, so it was important to be as realistic and economic as possible – and that’s not necessarily a bad thing!
After I reached a satisfactory layout in sketch form, I then went onto search for an appropriate WordPress theme that could act as a solid skeleton for my modifications. The ‘wireframe’ diagram I made below was really only something I made for readers of this blog, my work on the design was based on the sketches.
Front Page Mockup
The wireframe illustration below shows you how I’d like the front page to look in an ideal sense. It looks fairly ‘busy’ right now, but that’s mostly because I’m a novice at making wireframe diagrams. What the site will actually look like on launch day is quite a bit different. Nevertheless, you can get an overall sense of the key elements and it also provides a good goal to work towards.
Logo & Branding
I’ll now talk you through some of the main features of this design. Starting at the top the first thing that will hit the visitor is the logo, or in other words the ‘brand’. Without even getting into spam arcades, I’ve seen so many arcade sites that pay little to no attention to branding. There’ an obsession in the industry to search for domain names that contain the word ‘arcade’ as if somehow this keyword alone would make your site an instant success. So you have things like arcadefun, fungamesarcade, retroarcade, funretroarcade, funretrogamesarcade, etc etc. This strategy is completely counter productive, because it ends up rendering your arcade characterless, anonymous and one of a million other similar sites.
Get a brand name, go for something unsual but evocative and make sure you spend time developing a logo. Even if it’s just refining a nice font you got from dafont for example, it will help print the brand on your visitor’s minds, and that sad as it may seem, is the fundamental principle of advertising. Branding is not jsut about having a memorable logo, it can be instilled in all aspects of the design, from color to texture and font type (more on that below).
Bookmarking
The next feature you will notice on the top right is a search box, some content and game review RSS feeds and some key social bookmarks (delicio.us, magnolia, blinklist, technorati etc). Bookmarking is important for the following reasons: loyalty and hearsay. These services provide a means of one-shot visitors finding your site again, but they also have a secondary purpose of sharing content with other users. Get a popular delicio.us user to bookmark your site and you will suddenly have 2000 other users visiting as a direct result.
Navigation
At the time of writing, I’m still working on some extra navigation elements, but what I wanted to aim towards was one main navigation bar that serves the entire site. I found that the majority of the sites I visited during the research phase overwhelmed me with navigational options, sent me in the wrong direction and overall made me loose interest very quickly. Having a simple and functional navigation structure will enable visitors to have an immediate response to the way they access content on your site. It is important for a visitor to feel in ‘control’ on a website, to master the structure in a matter of seconds.
In my previous post I talked about ways of challenging categorisation. The ideas that came from that have been implemented into the site and you’ll be able to test the new approach to categories on launch day.
Featured Content
The next main feature in the design is the featured content strip that forms the second visual layer after the logo. This area will hopefully use a dynamic script (ajax??) to power a sliding gallery of featured/most recent games on the site. It will be regularly updated and it will help give the site a sense of continual freshness. Providing a sense of the ‘new’ is another key element in keeping loyal visitors.
Main page left column
The left hand column has 4 basic components: a large thumbnail image, a brief introductory outline of each game, a voting system and a review section (authenticated users only). The main emphasis is on the image. Another one of my observations of the many arcades I visited was how tiny and meaningless the thumbnail images were. I want to provide users with a real ‘feel’ for a game just by looking at an image. Clicking on the large thumbnails enables users to play the game straight away. Clicking on the test or title of the entry allows them to see the game details in more length and to play the ‘embedded’ version.
The voting and review elements are part of the interactive side of the site reserved for authenticated users. There are many more interactive features that I don’t have time to cover here but that will emerge in later posts.
Main page right column
The right column contains first of all the user login panel. This is placed in a prominent position since the site will attempt to nurture a community. Next is space for some 125×125 banner ads. I decided not to go the google ads or flashing banner ad route with this aracade, partly because its annoying and overused but partly because a monthly banner ad on a PR4 site earns more anyway.
Below the ad section will be 2-3 panels displaying various site stats such as ‘editor’ picked games and most rated games and possibly also user uploaded games and blog posts etc. The order and nature of this has yet to be fully decided.
But that’s a very brief overview of the front page layout. I’ve missed out a lot of detail, but there’s no time for that now and this post is already way too long 
I’ll finish things off now with a brief look at textures and colors.
Textures
Partly inspired by Bryan Veloso’s relaunch of Avalonstar and partly out of personal preference. I wanted the site to be ’space age grunge’. I know it sounds ludicrous and it probably is but that’s the way I saw it. The space age element is a reference to some of my personal influences such as Stanley Kubrick’s 2001: A Space Odyssey and Tarkosvsky’s film version of Solaris. The grunge element is a nod to my youth and growing up with ‘grunge’ culture.
Below are two texture sketches showing contrasting colors, light grey and black. These elements will form part of the site background. The black element may feature elsewhere too.
Texture 1: ‘Light Grunge’
Texture 2: ‘Dark Grunge’
Color Scheme & Fonts
The link color scheme will be bright and strongly contrasted with the grayscale base layers of the design with strong blue and orange colors. To balance this out there will be a sufficient amount of grayscale tones and some good old white space too. The font type will be mostly modern, probably Arial which is a spin off of Helvetica.
That’s it for now. The next step in this process it the beta launch. Again that will be happening (knock on wood) next Monday. After the launch I’ll write part 4 in this series which will be a debrief and will address some of the user feedback that I hope to receive. I may well write a 5th part if there’s more to say. See you on the other side!
