RSS

Behind-The-Scenes of a Board Games Website

We’re journaling the development of FastMovingGames, our new online service for board gamers - read on for previews, tech insights, and news of the launch!

Visual Design and Web 2.0

Design, visual style, and fashion trends are more fickle in the online world than they are in the real world. Technology and online tastes seem to change so fast that if you’re not committed about doing something soon, then by the time you get around to it there’ll probably be enough fashion changes that you’ll need to restart parts of the design somewhere along the way.

And so it was for FastMovingGames - having the idea and codebase semi-developed for the past few years meant that the graphic design I put together initially matched websites that were around at the time, but this didn’t quite work for the modern web.

Here’s a preview of the first version of FMG based on a red colour scheme that was in development all those years ago. It took a few design ideas from Blogger.com at the time, although this never made it to any form of release! If you look closely, you can also see the old idea of it being a turn-based games engine…

So, three years later and everything has changed, so back to the drawing board! (No pun intended…)

Logo Design

Now I didn’t want to throw everything away as I really liked the simple idea of the logo - for those that didn’t work this out yet, the stylized letters F, M, and G in the logo are meant to look like two board games players sitting playing a board game at a table - can you see it? I wanted to reincorporate the logo, modernize it a little bit and use a more modern font.

Thanks to companies like Apple and a few other pioneers, the new face of the web is being updated to a much cleaner design, clearer messages, and easier to navigate sites. Logos are simpler, and often use a single stylized font over elaborate graphic designs to get across the site identity. Thus…

Simplicity

Web 2.0 sites are often free of ‘noise’ with fewer contents, more images, and large fonts to aid readability and get the message across. I’ve tried to take this design concept and apply it to the site - using plenty of whitespace, and large fonts to draw out important sections - check out the homepage again as a reference.

Navigation

Navigation is usually simple in Web 2.0 sites, and I’ve tried to carry this through on the site design - using a single menu strip across the top of all pages. Obviously there’s only two links here at the moment, but there’s a few more planned for the final release to tie in with the functionality.

In the page layout, I’ve aimed for a main content panel to house the meat of the page, then a right hand side area where I’ll add secondary navigation links - similar to the way this blog is laid out. This should give a more context-sensitive area to other navigation links that aren’t part of the top-level functionality of the site.

Other features

A few other features that many of the newer breed of web sites include that haven’t made it to the preview site just yet are things like content syndication (not just for news feeds on the blog, but other features on the site); social networking and bookmarking features tying into sites like digg, del.icio.us and reddit; web stars to indicate new features; lightbox features for images and popups; instant post backs using AJAX so you don’t have to submit the entire page; community forums and more!

Overall I think that the current site design gives a modern feel, is easy to read thanks to the whitespace, large fonts and simple layout, and gives a good canvas for adding the planned features.

Thanks for reading.

-Dan

Add Your Comment