The way of the paper (Part 1)

Arrrr! Long time has passed since my last journal log: I’m sorry but handling a crew takes quite a lot of your time.

My mates are attending the Milan Games Week, showcasing Nantucket to the Italian public. So, today, it’s my turn to give you some more information about the project development.
This article is about the user interface of Nantucket. In particular I will focus on the process we followed to get to the final result.

Interface design is something crucial for the User Experience or UX. As a relevant part of the design process, we started quite soon to work on the interface concept. Now, for the game we wanted to create, the visual style had to be very specific to the time context: 19th century sea life, ships, a captain…basically, for us, it meant Paper. When you start analyzing ideas, usually, you take a pencil and start sketching down something. That’s where we started, even if we did it on digital paper. This is the very first mock-up of the screen space layout (author: Mex):

Top left: Combat View | Top right: Crew Panel
Bottom left: Ship Panel | Bottom right: Navigation Map

As you can see, there’s no reference to the art style. At this stage it’s still too easy to influence interface design choices with artistic flavors. Once the main idea is blocked out, it’s time to go a step further refining it and, maybe, imagining it:

Top left: Ship Panel | Top right: Crew Panel
Bottom: Combat View

The image above was a first mock-up of the combat phase – the Map view is completely missing here. As you probably can see, the Ship view is quite different from the one we have now. This is the result of several iterations we made. At the very beginning, one of our main references was FTL. We thought to structure the Ship interior in a similar way, assigning task to the crew in a more visual level. This example is also a first trial to imagine the UI style: look at the Crew panel. That’s a classical UI art style copied and pasted from a sea game screen capture, just to test it.

However, I wanted to push further. Since I’m an artist, I usually suffer if I don’t start sketching/art-making. That’s exactly what I suggest you to resist to, at least until the first design ideas are not defined. This doesn’t mean you cannot sketch down ideas but don’t get too attached to them and be prepared to abandon them if not suitable to the project needs.

When we were looking for visual references, we came across these sweet paper cut-out scenes:

We thought: why don’t we represent the whole game as a paper cut-out scenery? That has been the spark to get to the actual art style. Here you have the very first trial where the “paper” style came out:

Top: Combat View
Bottom left: Ship Panel | Bottom right: Captain/Crew Panel

 Here, the Combat view would have been the typical paper cut-out scenery. Imagine the sea creatures coming out, all nicely animated: a sweet picture, indeed. Now, do you remember when I told you “don’t get too attached to your early mockups”? I leave the rest to your imagination…

At this stage, it’s quite usual that the game design changes frequently and, perhaps, drastically. The combat would have needed more space, flexibility and depth. We discussed about ideas about how to solve the “depth” issue. I noticed that we were trying to make choices trying not to change the cut-out idea. That’s the main reason why the concept art is sensible subject at this point. You don’t want to leave what you like and you try anything to justify it. It’s not going to work this way. The main goal is to think about the best solutions for the user. It doesn’t matter if your game looks amazing if playing it is a pain in your “sacred” ass.

For that reason, we started working on new solutions and Mex came with these new mock-ups:

Again, the image elements are very rough and simple. The main concept is quite different: the World Map is the background while the Navigation arrangement and Ship data (Ship panel), the Crew data (Crew panel) and the Place/Date (Calendar) are overlaid.
During the development of this idea, I was working on the World Map artistic style. Here was born the idea to play on top of the Captain’s cabin table, where the map is placed. Even the game mechanics changed and set sail towards a more traditional strategy game. This meant a lot more information to display on screen. As you can see changes are the rule during development. Of course, your goal is to limit them to those really needed.

Well, here ends the first part about Nantucket’s interface design. Next time we will take from here and you will see how and why we ended with the current interface. I leave you now, but keep tuned. Don’t miss, next week, the coverage of the Nantucket’s showcase at the Milan Games Week.

Godspeed!