Art Direction of Spirit Siege - Part 2: After Kickstarter

This is Part 2 of a two-part post about the evolution of Spirit Siege's art direction. If you haven't already, check out Part 1.

Art Direction of Spirit Siege - Part 1: Before Kickstarter

Note: This is Part 1 of a two-part post about the evolution of Spirit Siege's art direction. If you'd like to jump ahead, here is Part 2.

Art direction is what enables a team of individuals with their own strengths, weaknesses, and artistic styles to ship a unified product. It is the process of getting the team aligned around a vision, a clear goal of what we're all aiming for, why we're aiming for it, and how we're going to achieve it. Done well, it contains the decisions that make a thousand others.

Deck Builder Visual Design

Spirit Siege has a deck builder now! This screen was the first real opportunity to flesh out and nail down the visual language of menus, so lots of the problems we solved here will carry over into other parts of the game.

Spirit Siege - Game Design Kickstarter Updates

 During our Kickstarter campaign, there were a number of game features we wanted to explain in greater detail. For our daily backer updates, I made these explanatory panels to give visual interest to what might have otherwise been walls of text, using copy from our game designers and Caitlyn Patten's character art.

Spirit Siege - Featured Characters

During our Kickstarter campaign, we wanted to highlight the units and teach our backers some basic strategies. I made up these handy informational panels for 15 featured characters using information from our game designers and Caitlyn Patten's adorable character art.

 

Information Density is Fun!

By far, this chart was the most fun piece of graphic design I created for Spirit Siege's Kickstarter campaign. It needed to convey a lot of information and make it easy to see what the backers would recieve at each tier. Many of these types of charts simply use X's to indicate whether items are included in different backer tiers, but we used small graphic representations of each item instead, repeating written information visually where relevant. More visual appeal, easier to parse, and strategic redundancy for the win.

What made this project particularly fun was cramming a lot of information into a really tight space. Over the many iterations shown below, I adjusted things like column widths and icon designs to accommodate the changing character length of item names and the current number of backer tiers.

The Making of Bowman

Spirit Siege has a booth at PAX! Time for eye-catching booth decorations. Caitlyn Patten designed the character, I just made her BIG. The game art, because it's game art, was too low res to print at this scale, so I broke out the old scenic painting skills and made us a prop. At first I was reluctant to get this crafty, but less than a day later I was bouncy with excitement and losing sleep gleefully planning methods and materials. Turned out to be a super fun diversion from the usual pixel-tinting.

Spirit Siege - Kickstarter Banners & Reward Sub-Banners

Lots of graphic design for Spirit Siege's Kickstarter page. The main section banners look like the princess example above. Each one features one of Caitlyn's adorable characters.

Below are some of the sub-banners for the Rewards section, where we go into detail about each reward item. I designed these sub-banners to be smaller, less attention-grabbing, and to feel indented, so that it would be clear that you are looking at a sub-section header even when you're deep inside the long long rewards section of page.

There are more examples on our Kickstarter page, but these are the ones where I created the icon art on the left. Caitlyn made the art on the others.

Tileable Water System

One of the tasks I worked on at Nova Heartbeat was designing a tileable water system for Spirit Siege, a top-down grid-based strategy game. We wanted to create organic-looking coastlines to generate visual interest while clearly delineating which spaces were playable. With some exceptions, units could not be placed on water. My rule of thumb was: water squares should be at least 75% covered by water, and grass squares should be no more than 25% covered by water.

While the original mock-up by Caitlyn had pretty directional wave lines, I wanted the final assets to be more flexible than that, so I used spirals to create a non-directional water texture instead.