Documentia, the small world into your computer files.

https://ldjam.com/events/ludum-dare/43/documentia

Every choice have an impact.

Discover our RPG narrative game : https://ldjam.com/events/ludum-dare/43/documentia

A small world into your computer files.

https://ldjam.com/events/ludum-dare/43/documentia

A small world living into your computer files.

https://ldjam.com/events/ludum-dare/43/documentia

Documentia is our RPG narrative game.

You can try it here if you want to. https://ldjam.com/events/ludum-dare/43/documentia

And I love to share my art process, so let's have a look on it.

All that you can see on a game screen have to be designed. You already knew, sure. But how each design choices you made serve your game intention ？ How to manage the little space of the screen to lead the player in the right way ？

Let's talk about visual hierarchy. I'd love to share you, how I designed the world of documentia with the main priority : Readability.

The colors, shapes and lines are the most powerful tools to lead the player where you want he goes.

To be sure thay anyone can understand the topic, i'll first explain how colors works.

You have three parameters to think about.

Those three parameters leads to three types of contrasts.

Those contrasts can be combined to get a powerfull one.

That's the main point, contrast. It is always about contrast.

I'll take the very first screen of the world. A little clearing.

Where did you want to go ？ In the bottom on screen ？ in the top right ？

Yeah.

How did you know that ？ how the colors are managed to let you think that ？

First, VALUE CONTRAST

on this image we can only see the values. Let see how your brain understand those informations :

You have to make a value hierarchy. In this case, your brain understand that u can't go in the darker greys because of the lighters greys. Also, the most contrasted object is the character. The most lighter space is in the top right. It is to subtile to see clearly the point but you can feel it.

SATURATION CONTRAST :

It push a bit further the idea that nothing can go on the trees. You can walk on the saturated grass. Something is different, there are dirt in the top right.

HUE CONTRAST :

The main color is green. So, when something isn't in the same main color, your eyes are catched. First, the character, then the dirt. Also the trees have a different green, to explain that you can't walk on the forest.

And there is a point I've missed something.

SHAPES and PATTERNS CONTRAST

I've well think to the tree's patterns.

I thought to invite the player going up right by doing this shape

but it is a triangle like the trees. There is no contrast here. Plus of that, the grass pattern is to messy, it do not leads the eyes to the top right of the screen.

I should do something like :

Because it create a pattern contrast that open to the way to go.

The circle make the contrast between the triangles of trees, where you can't go and the good way to go.

Thanks to have read this and I hope you'll enjoy to designing signals to the player trought the your visual hierarchy ！

You can also play our game here to analyse the process by your own and tell us what could be improved for the readability :

https://ldjam.com/events/ludum-dare/43/documentia