UI Design

Morrigan’s Story. The Diary

This game is a Far Cry cover, so a lot of the design I took it directly from the franchise. But for the UI inside the game, I wanted something special.  So I based my design on a device called Diary, that I designed previously for my novel.

The Diary is a device that was made to control androids, electronic homes and domestic devices, electronic clothes and as something like Instagram or Facebook but in local mode, without the Internet. This device has the aspect of a Smartphone but futuristic, completely translucent and with a design of stained glass, that goes with the aesthetic of the time, based on the Art Noveau.

In the game, these devices are used to control the robots, the androids, and other electronic devices. Also, they are used as maps and encyclopedias. Groups like Morrigan’s Men or the SPTS use them as a radio to send messages about enemies, missions or just personal messages for the player. Also, this device is the menu inside the game.

The HUD will show as the screen of a transparent Smartphone, so the players will continue seeing the place where they are, behind the device, like a window. The HUD will show the different options like the Apps of the phones. The players will have a cursor whit the form of a finger (representing that the Diary is tactile).

IDEA: It will be funny that the player could have an App in their mobiles that works as Diary. This App will be linked with the game, so the sensation will be more realistic.

  • Craft Recipes

    Drugs, Med Kits and all the unlocked recipes

  • Weapons

    Grid Sub-Title

    See the unlocked Weapons, their upgrades, charms, skins and the select/deselect option.

  • Ammunition

    Grid Sub-Title

    Change the Ammunition type and see all the ammunition types

  • Inventory

    Grid Sub-Title

    The items that the player collected

  • Inhalators & Med Kits

    Grid Sub-Title

    Types and amount

  • Encyclopedia

    Grid Sub-Title

    All the information about the map, the flora, the fauna, the story and the characters.

  • Map

    Grid Sub-Title

    The Map

  • Readable Items

    Grid Sub-Title

    All the loose pages, letters and newspapers.

  • Dron, Ant & Bubble

    Grid Sub-Title

    Check the Devices state, upgrades, skins and the option to use them.

  • Partners

    Grid Sub-Title

    See the Partners available, their state (if their dead, injured or ready to fight) and the option of select/deselect them.

  • Vehicles

    Grid Sub-Title

    See all the unlocked Vehicles, their purchased upgrades, skins, state and the option of “Call for a ride”, that will make that Morrigan send an ally with the vehicle.

  • Mounts

    Grid Sub-Title

    See all the unlocked Rides, their upgrades, skins, state and the options of select/call/heal and deselect.

  • Collections

    Grid Sub-Title

    All the collections

  • Player’s Stats

    Grid Sub-Title

    See the player’s stats (level, health, money…)

  • Equipment

    Grid Sub-Title

    See the Equipment stats (level, skins, damage…) and the select/deselect option.

  • Fast Access

    Grid Sub-Title

    Set the fast access to the Weapons, Inhalators and Medicines.

My Story. Visual Novel

The Menu and the HUD

The idea behind the game is that Jackie receives a notebook where she draws and writes her story. So for the menu, I decided to represent that idea by scanning my notebook blank pages and some fast draws. Also, I hand-painted the buttons, doing one for the normal button and one for the highlighted and the pushed form.

I kept that notebook aesthetic also inside the game by using the same background as the menu and the same type of buttons.

Fixing UI Problems

(I toke this section from My Story GDD. The section Level Desing or How I Fixed the Visual Problems)

When I started the design of Mi Historia, I decided to make it hand-painted. I’m faster and I have more experience that way, so I thought it would be a good idea. The problem came when I started to build the game. I scanned my paintings and I passed them to Photoshop. There I put them in the right resolution 1920×1080. And that was the first problem. By changing the resolution of the painting this one was distorted. So, my solution was to cut them to make them fit in the 1920×1080 resolution.  After that, the second problem appeared. When I was making the level design, adding the dialog panels and the buttons, I discovered that I didn’t let any space for them. So the panels were covering part of the scene. Due at that moment, I didn’t have more time to fix that problem, I let the game like this. But when I edited the game, I decided to base the HUD in the old RPG games that have the screen divided in sections. That way I fixed all the problems at once. I let a section to put the scene, a section to put the dialog and a section to put the options. Leaving the screen much cleaner and tidy.