Designer’s Notes #5 – Art design

Home / Blog / Designer’s Notes #5 – Art design

Designer’s Notes #5 – Art design

In Blog

Introduction

Today I thought I’d share with you how we came up with the overall look of the graphics used in the mobile version of Brass.

The first question I always get is ‘why didn’t you  go with  the original graphics?’. The answer is quite simple:  they’re ugly :) In the board game industry you can get away with graphics that are not beautiful because the focus is on game mechanics rather than presentation. However, now we’re bringing a game to the mobile gaming industry–demanding the highest level of beauty and polish. To be perfectly honest, we just couldn’t see coming up embarrassingly short compared to the other board games out there in the marketplace. Most similar board games have graphics that are better looking and more sophisticated than the Brass boardgame does, which means they could be co-opted for use in the digital version. We didn’t had that luxury.

Inspiration

Once it became clear that we needed new graphics, we started looking around for inspiration. The natural direction was to look to the historical artifacts and ephemera. One of our most compelling finds  findings was “Countries of England”, a geographical card game dating from around 1880.

Jaques’ Counties of England, a geographical game

We loved the idea of building a board game with graphics inspired by an actual  game from the era. We borrowed the beige background and a font directly  from “Counties of England”. Here is a screenshot of the final interface.

User Interface (UI)

We certainly didn’t reach the final look & feel in one step. It was long journey with many iterations and ideas (and subsequent discarded ideas – it’s always a process). We started with UI mockups so we could test the usability. The very first game implementation looked like this:

Here is the first version with graphics in place:

Along the way we’ve tried different colors and shapes for buttons:

This is one of our experiments in finding just the right color tint for play:

Here you have some early card sketches:

Board

With the board we knew that we’d have to use the realistic map for two reasons:

– The map is the single component that has the most impact on the game look. The choice of a realistic map gives us the beauty and authenticity we want for Brass.

– A realistic map is a nice contrast to the flat, paper-like UI, so the two layers of the game have the visual separation they need.

The map itself required a surprisingly small number of iterations. In the original map design we included some mountains that were removed and replaced with hills.

Since we went with a  realistic map it seemed natural that the buildings on the map should also be realistic. Here are two of our concepts for buildings:

We spent the most time on links between regions. We’ve tried many ways to show link ownership, which is an intricate concept dependent on a situational understanding of the rules of play. It was only during public beta testing when we hit upon an idea that we believe is best. Here are some early ideas:

And the final version:

Summary

Retooling the Brass graphics was something we felt was imperative to make a competitive product. We knew map readability and general usability were going to be a problem going into the process so we planned to iterate and rework. Despite our best planning, we did spend more time than we initially expected to fix all the issues. I think it paid off. We now have a game with a top-notch,  clean and elegant interface that will  proudly stand among the other digital board games out there.