This week I want to write about my early attempts to define a design for the game. You can see what I ended up with here, it is simple, functional and is themed to feel like a book that you are reading. It meets all my design requirements and fits my theme – something that it is really important to define when you want to include lots of different functions. So further below in this post you’ll see how helpful it is, to have a theme for your project.
This week I want to show you some layouts that I tested when I didn’t have a theme. I don’t see these first experiments as a waste of time, since they helped me to build the tone of the story and make the project more understandable for other people at this early stage.
Here is the first try! At this stage, when I didn’t have anything to work with, I collected existing assets and rearrange them… which is exactly what you can see here. None of these elements were created by me, I just mashed up separate graphics. I had thought about what a game might look like, if it had a generic UI, but slightly old-fashioned elements so that it would fit into the story setting.
Weird fishgirl by Desirée Schütze
UI art by Ariel Icandri
Original art of 1st blurred background by Jorge Jacinto, found on Tumblr
Original art of 2nd blurred background by Dora0913, found on Tumblr
To make these screens I worked with existing menu assets that I had grabbed from Pinterest, cut, scaled and tinted, so that they would have more of a parchment look. The amazing character concept art was done by a friend of mine, I just added some backlights to create a particular lighting situation. I picked a background with light and colours that I liked and did nothing more than add a blur filter to it. It didn’t need one, but I wanted to test a rather blurry background. And as you can see, I also tested some first font styles in the text area, which all got discarded in the end.
In the second round of layout development I wondered what shapes I could use that were old-fashioned and fitting for a Lovecraft tale. I liked the thought of using ornate picture frames as a reference, and I tried lots of versions that had krakens in them.
When idea of a big kraken as a top decoration came up, I had in mind that there would be one big eye that would slowly open (in three or four steps) to represent the player character slowly going mad. I still like the idea of representing this visually but am not dwelling on it right now.
Here another simple version…
Before I got to the point of polishing any of these initial designs I discovered the COYA book-theme and decided to use it rather than my initial approach. I did this for several reasons:
- It was clear that the text would play the most important part in the game. A book page offers the ideal way to display a full screen of text. When I use background images and characters they are an addition to the the page, but it can do without them.
- In the above designs a text field is placed on top of the background. Of course, it could stretch up to the top, covering the whole screen, but the background would still be visible, which isn’t ideal. It means that wherever you are in the game, there would always have to be a background image, even if there is no reason to display one and there is no important character confrontation. It wouldn’t be the end of the world, but it would’ve bugged me. It makes the text seem a secondary part of the game, rather than the most important one.
- The Main Menu and its sub sections would need a separate design that fits on to the ‘normal‘ game.
This led to a texture-heavy style that still felt more generic than what I ended up with, so I’m glad I dropped it…