A Kraken Makeover: Redesigning Game UI — Blog

Establishing a strong visual style for Kraken has been a priority from day one. Until recently, though, the distinctive 50s aesthetic – with its carefully curated colour palette and comic-book visual references – has been largely confined to the gameworld, the spaces inhabited by the player and characters. As we’re approaching (say it quietly) the final stages of development, we wanted to extend that visual style to the user interface (UI) as well: to the menus, buttons and controls, in order to immerse the player from the moment they launch the game. Here’s how we went about it:

Brief, inspiration, and initial concepts

My brief was to re-work and develop the placeholder UI for The Kraken Wakes to be both more visually striking and more in-keeping with the game’s 1950s style and themes. This would involve creating a wide range of UI elements including checkboxes, tabs, next/previous controls, input fields, dropdowns, persistent hotkey instructions, content alerts and menu items.

As part of the UI overhaul, we also spent a lot of time thinking about the usability and clarity of the interface – UX as well as UI. This led to the addition of some new features, including a ‘Chapters’ menu page to enable players to track their progress and navigate back to earlier scenes. It wasn’t just a case of creating like-for-like UI elements with a bit more pizzazz: whole new features needed to be developed from scratch.

A game menu screen. The background is dark blue. In the centre, at the top, is a screenshot of the game with a chapter title underneath it. Below that are four jagged buttons in green, pink, turquoise and red. They read 'Continue', 'Chapters', 'New game' and 'Back'.

My process began, as it usually does, with a search for design inspirations. I decided to explore visual styles connected to different themes and aspects of the game, including journalism, under the sea, 1950s adverts and comics, and retro art. I also spent some time researching the UI designs of other games, such as Firewatch, Sea of Thieves and L.A. Noire. As per the brief, my guiding inspiration was the already-established art style of the game (having worked on the props and environments previously, I was already very familiar with this). Below is a small moodboard showing some of the inspirations I referred to while redesigning the UI:

A moodboard showing a range of images, including brightly-coloured, retro cartoon strips, some screenshots of game menu screens, mostly in more muted palettes (blues, blacks and dark reds), and some black and white sketches of notebook pages.

A moodboard of initial inspirations for the new Kraken UI.

After my initial research, I began drafting some ideas. I sketched some concepts for UI elements in various styles using Adobe Photoshop and Illustrator. I also explored different fonts and colours at this stage.

A screenshot of early UI designs, including hand-drawn titles and sliders, a selection of example fonts, a colour palette, and designs for buttons and menu boxes – some painterly, some geometric.

My quick, early concepts for the new UI designs.

The team and I consulted back and forth to determine which style worked best for the game. In the end, we agreed that we liked the offset retro block designs, with hand-drawn ticks, crosses, arrows and underlines where the player would interact with certain aspects of the UI. This aesthetic allowed us to reflect the retro, 1950s setting of the game in the UI design, while also referencing the theme of journalism through the hand-drawn elements.

A screenshot of geometric buttons and menus for the UI design, in pale green and grey. There are also some hand-drawn ticks, crosses and arrows in red.

Developed concepts for buttons and menus.

Developing the style

Once we had agreed on a style, I then developed the designs further using Adobe XD. I created examples of what the UI might look like in the game itself by taking screenshots and placing my UI designs and layout over them. This also helped me to develop the colour palette, ensuring it worked with the colours of the game. Here’s my final design for the main gameplay UI:

A mock-up of the main gameplay design overlaid onto a screenshot of the game. The screenshot shows a first person perspective of a player picking up the receiver of a red wall-phone. The player input text box at the bottom centre of the screen is white with a pink background. The 'Speak' prompt button above it is pink.

A mock-up of the main gameplay UI using a screenshot from the game.

I regularly updated the team on my progress and, after a few rounds of feedback, I achieved the desired look and feel of the various UI elements of the game. Below are two series of screenshots charting the design development process for the menu and settings pages. On the left are my initial ideas, and on the right are my finished designs.

Six images in two horizontal rows of three. The top row shows the development of the main menu design, and the bottom row shows the development of the settings screen. The menu screen develops from being a list of options in white letters, to options on grey geometric buttons, to options on multi-coloured geometric buttons. The settings screen changes from being a grey geometric box, to a light-blue box, to a pink and turquoise box with a wavy line separating the header from the main settings menu, in-keeping with the ocean theme.

The design development of the main menu and settings screens.

Finalising the UI

Once the team had approved the final designs, the next step was to separate the UI elements onto individual islands, and to organise the colour palette to be clearly presented for the person arranging the UI in Unreal. Doing this also makes the different elements easier to organise when exporting.

A range of geometric, multi-coloured buttons and menu shapes, without any text on them.

Menus and buttons separated onto individual islands.

More geometric buttons and menu shapes without writing on them, including a stylised design for radio controls.

More menus and buttons separated onto islands including the design for the radio controls.

More geometric, multi-coloured buttons and menu shapes, without any text on them, including what looks like a page of notebook paper.

The menus and buttons for the 'Chapters' page separated onto islands.

The UI elements had to be exported in a particular way. Each element had to be split up into its different shape components, coloured in white (or black-to-white gradient for UI elements with gradient colours), and then exported separately. This step is required because the UI colours are assigned in Unreal. If the UI components are merged into one object, they cannot be assigned separate colours:

On the left, a button comprising a pale green, irregular four-sided shape, with a darker green background, and a black background behind that. On the right, that same shape separated out into its component parts.

An example of breaking a button down into its component shapes.

Once everything had been exported, it was up to our programmer, Oscar, to create the functionality of each UI element and make it work in the game!

Before and after: the main menu.

Before and after screenshots of the phone interface. On the left, the numbers are displayed in a neat, pale grey grid of perfect squares. On the right, the numbers are displayed on paper-coloured, irregular shaped boxes, using a typewriter-style font.

Before and after: the phone interface.

Before and after screenshots of the settings menu. On the left, pale grey buttons and white text on a dark blue background. On the right, a turquoise menu with a pink header; the header is separated from the menu by a wavy line. The text is in a type-writer font, in dark turquoise on a light turquoise background.

Before and after: the settings menu.