Website powered by
'Last Online' - MMO UI Breakdown
The final mock-up of the UI I created for 'Last Online'. This includes a Spell Hud and Icons, Character Frame, Mini-map Border, Character Descriptions, Chat UI with Choices, Cursor, Inventory UI and Icons, and Mini Icons for Inventory and Settings.

The final mock-up of the UI I created for 'Last Online'. This includes a Spell Hud and Icons, Character Frame, Mini-map Border, Character Descriptions, Chat UI with Choices, Cursor, Inventory UI and Icons, and Mini Icons for Inventory and Settings.

ESC menu. This would also pop up if the player clicks on the settings icon in the bottom right of the screen.

ESC menu. This would also pop up if the player clicks on the settings icon in the bottom right of the screen.

The very initial framework provided to me which I based the layout of my UI on.

The very initial framework provided to me which I based the layout of my UI on.

This video demonstrates my UI in the MMO portion of the game.

The older version of the loading screen, including older symbols which represent the different covens mentioned in the lore screen shown previously.

The older version of the loading screen, including older symbols which represent the different covens mentioned in the lore screen shown previously.

The updated and improved version of the loading screen.

The updated and improved version of the loading screen.

Starting screen which details the lore of the MMO game, all written by me.

Starting screen which details the lore of the MMO game, all written by me.

Video demonstrating the loading screen and the lore screen in game.

Colour Scheme for the UI - Particularly the different Covens and the Constellation aesthetics.

Colour Scheme for the UI - Particularly the different Covens and the Constellation aesthetics.

Speedpaint of the Coven Symbols that appear on the Loading Screen and the many iterations I went through.

The final chosen symbols for all Covens, colours were added later.

The final chosen symbols for all Covens, colours were added later.

Fire Coven Symbol iterations.

Fire Coven Symbol iterations.

Earth Coven Symbol iterations.

Earth Coven Symbol iterations.

Wind Coven Symbol iterations.

Wind Coven Symbol iterations.

Water Coven Symbol iterations.

Water Coven Symbol iterations.

The final version of the Chat UI. This piece of UI defined the style for the entire MMO UI, and once I had established this element the rest of the UI followed! I chose blue as the player character is part of the water coven.

The final version of the Chat UI. This piece of UI defined the style for the entire MMO UI, and once I had established this element the rest of the UI followed! I chose blue as the player character is part of the water coven.

Early concepts for the Chat UI.

Early concepts for the Chat UI.

Speedpaint showing the development of the Chat UI.

Final versions of the Character Description UI. These pop up in game when clicking on characters, allowing the player to learn more about the RP biographies of other 'players'. Made to replicate other MMOs such as WoW.

Final versions of the Character Description UI. These pop up in game when clicking on characters, allowing the player to learn more about the RP biographies of other 'players'. Made to replicate other MMOs such as WoW.

Speedpaint showing the development of the newer RP Description UI. The styles of each of these biographies uses the colour schemes of the Covens the characters are associated with. As the player is in the Water Coven, their UI is all blue.

Older versions of the RP description UI.

Older versions of the RP description UI.

I found that with all these older versions, I was incorporating too many details into a piece of UI that did not need them.

I found that with all these older versions, I was incorporating too many details into a piece of UI that did not need them.

Speedpaint showing the development of the older RP Description UI.

Character Frame UI, once again using the different coven colour schemes to identify to the player each character's affiliation. The Coven Symbols are also subtly incorporated in the top tab area.

Character Frame UI, once again using the different coven colour schemes to identify to the player each character's affiliation. The Coven Symbols are also subtly incorporated in the top tab area.

Spell icons used in the Spell HUD. Descriptions of the spells, also written by myself.

Spell icons used in the Spell HUD. Descriptions of the spells, also written by myself.

Inventory icons. Below is the Game Logo, Inventory and Settings Mini-icons, and Cursor.

Inventory icons. Below is the Game Logo, Inventory and Settings Mini-icons, and Cursor.

Rose of Regulas Item with description written by myself, as it would appear in game.

Rose of Regulas Item with description written by myself, as it would appear in game.

Spica Shallot Item with description written by myself, as it would appear in game.

Spica Shallot Item with description written by myself, as it would appear in game.

Amulet of Al Tarf Item with description written by myself, as it would appear in game.

Amulet of Al Tarf Item with description written by myself, as it would appear in game.

Battlemage Bangles Item with description written by myself, as it would appear in game.

Battlemage Bangles Item with description written by myself, as it would appear in game.

Tattered Gown Item with description written by myself, as it would appear in game.

Tattered Gown Item with description written by myself, as it would appear in game.

Pollen of Pollux Item with description written by myself, as it would appear in game.

Pollen of Pollux Item with description written by myself, as it would appear in game.

Scroll of Zōidiakòs Item with description written by myself, as it would appear in game.

Scroll of Zōidiakòs Item with description written by myself, as it would appear in game.

Speedpaint showing how I created the Inventory and Spell Icons, inspired by the icons in WoW.

Scroll pop-up that would appear when the player clicks on the Scroll of Zōidiakòs icon. This features all the lore I wrote for the game to elaborate on the context for all players who are interested.

Scroll pop-up that would appear when the player clicks on the Scroll of Zōidiakòs icon. This features all the lore I wrote for the game to elaborate on the context for all players who are interested.

Full credits for the game, created by myself.

Full credits for the game, created by myself.

Video showing my commentary on the development of the project over its course. A breakdown of what I contributed and worked on throughout the 15 weeks.

'Last Online' - MMO UI Breakdown

A breakdown of the UI work I created for the MMO section of 'Last Online', an interactive Visual Novel which merges MMOs and Online Chatrooms in a very 2010 fashion! The game trailer, with a game link in the description can be found here: https://youtu.be/E9KI5lztol4

In this 15 week long MA student project I created the lore of the MMO that combines Ancient Greek myths and fantasy, and created UI to support this. Although, due to time constraints, not all my work made it into the game, I am proud of what I was able to concept and achieve, especially as this is the first time I have created UI and Icons.

More artwork