Hi all!

Today I'm going to talk about one of the things I (Alex) do these days.

At Parabole, with a team of three, we have no choice but to expand our knowledge to do all sorts of stuff. Etienne deals with terrains, lighting, level art, some level design and character art. Maxime deals with coding Artificial Intelligence, vehicles, player interactions and many other intense programming tasks. Me, I do all the business-related stuff (PR, finance, etc.), all project-management tasks (scheduling recording sessions, set priorities, etc.) and finally, I do web, graphic and user interface design.

The pre-Kickstarter era

Before our successful Kickstarter campaign, I could not really afford to focus on searching for the ideal typography and colours for our title. I had to deal with the company not doing so well and to manage relations with our clients. If you look at Kôna gameplay videos out there, you will see something similar to this:

The whole UI design and its implementation was done in approximately three weeks. That means I had to design, do some photoshop, code the Ui system and implement all of this in a really short time frame. While in a rush, you don't necessarily stop to ask yourself: "Does this look good?" or "Does this fit the game aesthetic?".

During the holidays, I took some time to breathe, and to challenge all aspects of the game. I also read all the comments made by the community and watched movies from 1960-1970. It became clear that something had to be done to give the game interface the look it deserves.

Inspirations from 1960 to 1970

Since our game takes place in October 1970, my searches for inspirations on the web ranged from 1960 to 1972.

Games

The best way to create interfaces for a game is to actually look at other games. However, I really want to have a vintage look and feel that fits with he game setting. While I should embrace the history of videogames, I can't do much with something like this:

So I have to look at other things such as Advertising and Films.

Vintage Advertising

I find advertisements from the 60s ad 70s really enjoyable to look at. I explored Google Image and Pinterest and found some really interesting work.

However, while they look good to me, they are filled with many visual elements and to appreciate its art, you have to focus on the image for more than one second. The goal of posters and banners is to communicate a message through a single image. This is not the case in games where interfaces must be understood really quickly by the player.

I might at some point create banners and ads that draws influences from vintage advertising, but for now, I have to focus on giving the actual game an interface signature of its own. Lets exclude these for now and move on to the next source of inspiration: Films.

Old movies

In the 1960s and 1970s, movies had little to none text elements displayed on screen. The best way to see how film makers communicated text informations on screen is to look at the intro credits of some films. I watched a lot (can't put enough emphasis on that) of intro credits and cannot really reference them all here, but here are the ones that kept my attention:

The Shining (1980). Not necessarely 60s-70s, but the snowy environements in the film was part of our inspirations in creating snow in Kôna. This, and the fact that the intro credits look like this:

Notice how filmmakers sometime did not care at all about graphic design. Does this make it a bad movie? No. In fact, it's simplicity allow the moviegoers to focus on the imagery and music. My goal with Kôna is to create interface that allows the players to focus on gameplay to make him feel immersed in the world we are creating.

Psycho (1960) This is an example of "full screen credits":

The Good, the Bad and the Ugly also did its own full-screen stylised intro:

They both look great, but they can't really fit in a moving 3D world. Again, the goal is to create something that don't get in the way, while communication crucial informations to the player. In a sense, The Shining intro is more what I'm looking for than Psycho.

Mon oncle antoine (1971) This movie is considered one of the most important film of Canadian filmmaking history. Its story also take place during the winter in Quebec, which is quite similar to Kôna setting. (Credits last for a minute and a half in the following video)

It is as simple as The Shining one, but has better colouring, at least in my opinion. So I used it as a starting point for creating Kôna's own vintage look and feel.

The Result

I won't document the whole creative process behind Kôna UI design, since it took me several weeks, but here are the main lines.

Font

Right now, I only have found the font we will use for titles in the game. I wanted it all in caps, with no serif. The aformentioned Mon oncle antoine movie has a serif font, but testing this kind of font with the word Kôna did not give me convincing results. I ended up using Bebas Neue Bold from FontFabric :

It supports fancy characters like the Ô from Kôna, is condensed enough to not get in the way too much and well, it looks great.

Colors

I had a hard time figuring out what colors would fit the game visuals. I did a lot of tests and asked everyone around me about how they perceived them.

I noticed that a lot of people simply don't have an opinion on how we display texts and icons. In fact, I think that the majority of gamers would not even care if I did it all in black and white. However, people had preferences and the one that ended up being the most popular is the first one (top left).

In-game implementation

Once it looked great in Photoshop on top of a screenshot, I opened the game engine and played with my brand new style. I tried it on titles:

And on icons and 3D text.

In the end, I felt satisfied with it. It is not final, but it is in my opinion a great starting point. I may tweak the colors, the shadows and blurs the text a little, but in the end it will look like the above images. Notice that I removed the small descriptive text above the objects and replaced them with icons. I also stripped out on-screen text dialogs. Texts will always appear in the environement. Don't worry, they only appear when you click on things and disppear over time or if you move out of the "readable zone".

On another note, we also changed the overal coloring in the game to blend it with the UI. We added a lot of blue and a little bit of green in darkness and removed some green in the white.

Hope you like it! :)

P.S.: Sorry if there are typos in my blog posts. I have a lot of work and I prefer to send these quickly and focus more on creating the game.

• Alex