Sorcerer’s Oath – Game UI

This user interface is for a mystical game.

ui6-logo

I drew the icons and UI elements, and then vectorized them to get the rustic feel.

The whole UI was built in After Effects, with some help from Photoshop (for the background and images) and Illustrator (for the icons and shapes). Here’s the full video animation:

ui6-1-mainmenu

I wanted a simple style, but still with a premium feel. For that reason, I added a golden glow and particles to elements. It creates a strong contrast to the background and matches the theme.

ui6-2-levels

I didn’t want the background to feel static, so I added several layers of animated fog and particles there too.

ui6-3-levels

The navigation follows two simple rules everywhere: High level navigation elements scroll horizontally and low level navigation elements scroll vertically.

ui6-4-levels

For the PlayStation controller icons, I’ve used the Cross always for positive actions (choose, enter, activate, etc), the Circle always for negative actions (back, cancel, etc), the Triangle for irreversible actions (drop item, delete mission, etc) and the square for options that do not fit the other three, or when the other three are already assigned.

ui6-5-ingame

Here the PlayStation Square key is used to pick up items in the game. The UI panels on both corners of the screen emit a glow, as well as smoke/fog and particles.

Under the map, the user can see the current objective, and under the current weapon, the user can see the available options: Circle to change weapon and Triangle to open the Inventory.

ui6-6-inventory

Here we can see the open Inventory overlayed on the game. There’s high level navigation on the top, which the player can use to open the map, or the skills screen.

ui6-icons

Here are some of the icons made for the UI.

ui6-sketch

And here’s the original sketch of potential icons and screen layouts.


The 3D dagger model was downloaded from here. And the golden coin from here.

Leave a Reply

.