The Metagame Website

Process

To start, I met with Colleen, John, and Eric to talk about what they needed from the site and what direction they wanted to take from their previous version. From that, and after doing research into the SEO implications, we decided to move to a one-page site for The Metagame.

After consolidating all the information about the game into concise and manageable sections and putting it into a clear outline, we discussed the tone and voice of The Metagame, and how that translates into the site's design.

I put together a few wireframes for the site's sturcture, and also a few visual design directions – using placeholder images just for general look and feel. The Metagame, as a social card game, can be played anywhere, and I wanted to show that through the visual backdrops of sections – bars, cafes, dinner tables, and living rooms – all with a cohesive tone.

However, the first iterations were too busy with images, and The Metagame has a very subtle, understated feel to its design, and I wanted to reflect that in the website. So I scaled back for the second design iteration.

Next, I kept the notion of multiple settings but restrained it to the home landing section of the site. Rather than have every version of the game – there are seven different ways to play with the same deck of The Metagame, several special versions available to print as a pdf, and two expansion packs already – immediately visible and possibly overwhelming, I put them into separate sliders.

In the end, we decided to showcase the clean and elegant illustrations of the game and keep the homepage images – an assortment randomly chosen from each time the site loads – of the diversity of locations in which one can play The Metagame, but as illustrations.

Narrow strips of videos – compressed for quick loading time – show the different games being played in the wild and give life and motion to the entire site. The modular nature of the sections and sliders make it easy to add to as more versions of the gameplay and expansion packs are developed and published.