Prajakta Godbole

This design exercise was done in September 2010.

The dialog box designed is for building a ship.

Approach to the problem

The first step was to play the ‘Kingdom of Camelot’ game and get a feel of the important rules of the game. The next was sketching some ideas and writing down the key concepts related to pirate theme. After getting a rough idea of what I would be doing, I searched flickr and google images for the relevant images. Then I started the rough layout and experimented with it to progressively arrive at the final design layout.

Color theme

Colors suitable for a pirate theme are mostly dark. The look is grungy and old. The color palette used is

Typefaces

Helvetica – for explanatory text. Reason – It is very legible. Sometimes, fancy typefaces cannot be read easily. Rapscallion (downloaded from dafont.com) – for title to reflect the pirate theme. It has an old look and because of the jagged edges, it fits the pirate theme. It is also used for the ‘stealth mode’ header text, to draw the player’s attention.

Images

The ship and the background grungy map images were free downloads. The skull image is actually a font (pirates pw – downloaded from dafont.com).

Grouping data

The dialog box can be divided into 3 sections -

• Objective of the dialog box

  The title is clear and in big font size. The image makes the dialog box engaging. The text explains what to expect after the task completion in this dialog box. This is important because we want the players to know right away what to expect.

• The building phase

  The information here is put on a lighter canvas to highlight its importance. The information is grouped in 3 parts.

  • The ‘Level 1 Requirements’ tell the player the level of the ship buildingphase. It also shows the tabular data of the amounts if different resources needed and how much is available for the player. The green indicates the eligibility. Explanation about the eligibility status is not required as the green color makes it self-explanatory. If any of the numbers are displayed in red, the ‘build’ buttons should be disabled.
  • There is also a ‘ask help’ option and the player gets to know what he can expect. ‘Pirates don’t help for charity’ line adds some attitude to the game. I made a choice between ‘threaten others for help’ and ‘ask for help’. Just a play of words! But wanted to liken the language to the pirate world as much as possible. Finally, decided to stick with ‘ask’ because ‘threaten’ would probably be too much attitude.

• • The last part is the buttons. Earlier layout (shown above) had the ‘build’ button first and then the ‘ask help’ option (which I was going to put as a button just below the original ‘build’ button). I realized that the player must be provided the two options at the bottom, so that he/ she does not rush into clicking it without even glancing at the ‘ask help’ option. Additionally, it must be clear that the player has to select just one button of the two.
  • Final design does that. I thought it was important to let the player know that he/ she can choose only one of the buttons and not both. The text on the button is self-explanatory. Right next to the buttons, the time for completion is also added. A helpful message ‘remember to ask help’ is next to ‘build’ button, just in case some player does not glance on the right side message.

• Monetization (optional)

  The monetization option is highlighted because of the title, the big button and the skull image. Without the image, the bottom part would not have caught the eye. There is a brief explanation (at the bottom of the button) of what to expect when the ‘buy’ button is clicked.

Buttons

The buttons are dark and the text on them is embossed. The buttons cast a little shadow. They look rugged. I decided not to do glossy buttons as they do not go well with the pirate theme. The round corners add a soft touch to the design. This is also the reason why I decided to not have the boxy table and instead just float the tabular data on the canvas.

Overall look

The window has jagged edges on the top and bottom. This torn paper look goes very well with pirate theme. Even a burnt paper effect can go well. All the elements, except a small part of the ship are completely within the rectangle defined in the map. This composition gives the ship a 3D effect, as if it is coming from somewhere. The rest of the elements are aligned properly and grouped together.