Build-a-lot Fairy Tales Casual Mode Level Selection Interface The challenge of the Build-a-lot Fairy Tales casual mode level selection interface was to design a means of letting the character choose which level they wanted to play while keeping the interface rooted in its fairy tale theme. My duties and responsibilities on this project were to design the look of the entire interface screen which included sketching thumbnails, creating a wireframe and completing all of the finished art assets. All artwork was created using Adobe Photoshop. Thumbnail Sketch of storybook themed interface
When I thought about fairy tales the first thing that popped into my mind, aside from the classic characters, was children's books. So instead of simply clicking on graphical text in a list to choose your level, I thought it would be fun to see each of the levels presented as fairy tale books. Each book would have a fairy tale character on the cover as well as all of the important level goal information. The player would choose their level by clicking on any one of the decorative books. Below is a thumbnail sketch of what I thought the interface screen would look like. The game logo is in the top left corner, the books are arranged sequentially according to difficulty and there is a spot for navigation buttons on the bottom right.
Build-a-lot Fairy Tales Game Logo
When I designed the Fairy Tales logo I wanted it to have a timeless typographic look and feel. This font has an old typeset look to it, but the flourishes on the larger letters and the warm gradient makes it feel like a classic storybook.
Fairy Tales Book Cover Character Drawings
Once I knew that we were going to make Build-a-lot Fairy Tales I decided to select a group of characters that would be very recognizable to most people and that would be fun to create stories and level content around. The characters that I settled on were the Nutcracker,the Wolf, the Frog Prince, the Troll and the Witch. Below are the drawings I made when designing these characters.
Build-a-lot Fairy Tales Final User Interface Illustration
Below is the final Image for the Casual Mode Level Select Interface without the game logo, the Gold and Charm requirements or the navigation buttons. Each book highlights when the player passes over it and moves and light up when the player selects the level. Once the illustration was complete, it became obvious that there was more room for the High Scores and Main Menu buttons in the lower left corner.
Final Illustration with all of the interface elements