The UI Sketches

Decided to stop the modelling to work on the UI system and programming part which will be the framework of the project.

I would describe the UI’s style as medieval,  Bosch-ish, and fit in the overall project style.

1. Medieval

Firstly as I have no experience with game UI design, I looked for how it should look like online. Most of them were too cartoon, while the flat ones seemed too technological or modern for the painting’s age.

Then I thought about some historic RTS games I played like Total War and Europa Universalis. The UI designs are much more delicate in these successful game. I also found a very nice design on Behance (from which the last pic came).

 

2. Bosch-ish

I found a fun app in Apple Store the other day called Bosch Painter, which offers many interesting element cutouts from Bosch’s paintings, as well as canvases for the users to compose their own Bosch styled images. It gave me great inspiration.

bosch-the-painter-26c47b-h900

The idea in this app is that we can create Bosch-ish pictures using things he drew as they are just so recognisable; and this method is also used somewhere else, like the exceptional exhibition Hieronymus Bosch 500 took place in city of Den Bosch this spring.

home_jb500

What surprised me afterwards was that when I looked for some good elements to use, I found some of his paintings are “born with UI” – with some perfect decorative elements:

What’s more, an unsolved problem that how I should include the exterior shutter of the painting the Garden of Earthly Delights from the very first when I was still planning to make all the 3 scenes this summer, seemed to have got a way.

Hieronymus_Bosch_-_The_Garden_of_Earthly_Delights_-_The_exterior_(shutters)

 

3. The Overall Project Style

This is the hardest part of all. But first I should actually introduce what I’ll use my UI system for. As I have mentioned a little in my plans before, I’m going to create a collection system for all the messages the player will meet with during the exploration of the scene. So when the player has found one message, it will appear in the collection, while the uncovered ones will still remain a “???” status. This is the main game mechanics of this project. Also, I’d like to add the functions of viewing where the message was from in map (based on the original painting), marking the objects you like and reviewing the spinning models later, and taking photos from the perspective you like.

So the demo came out as below. I don’t have a model’s pic taking from a proper view so I’m using a previews work of mine to imitate at the moment. And I found a gothic font to use on that title scroll like what Bosch wrote on it originally (but in a more recognisable font). I didn’t even use any other resources; all of materials I used were from Bosch’s paintings.

ui_detailui_map

This should be very Bosch-ish. However, I don’t find it fit in the game scene’s style at all. It’s too heavy and not at all flat, but the problem is if I want to use elements from the renaissance paintings, the style can’t be like today’s aesthetics.

Here I changed a bit of it and hopefully it could be better with the flat-shading models later. I quite like those ancient styled things I deleted from the last version though. And I still not really satisfied with this design… apparently the layout is quite unbalanced. But the important thing right now, is to go on with Unity to realise the graphics, which is going to be an extremely tricky thing! Bless me 😛

ui_detail2