MOBA UI Project​
Project: MOBA UI
​
Engine: Unreal engine 4
Platform: Windows PC
Role: UI/UX Artist/Designer
Description: MOBA UI prototype game. This project was created using a MOBA framework to design, script and implement a fully functional UI for a MOBA game.
Responsibilities
-
UI design
-
Wireframes
-
Anchor considerations
-
Spatial UI
-
Typography
-
Colour theory
-
UI Animations
-
Shop functionality
-
(Un)Equip items logic
-
All UI art assets
-
UX Design​
-
IA Design
Role Breakdown
​
UI Scripting (Blueprint/UMG): In this project my scripting role primarily focused on separation of concerns as I was required to produce many different widgets that fit good scripting practices and could be re-used. For example the buttons for the shop or for the creation of the ability buttons. The main challenge for this project blueprint related was having items equip and unequip on the character as well as shop functionality and ensuring the UI can not be exploited in any way by the player. Animations were also a large aspect of this as this is one of the main elements that produces a good "feel" and user experience, implementing these and having correct timings alongside other code is an important element that caused this project to succeed. For more on motion design see the design research in the PDF at the bottom of this page.
​
UI Art: The UI art was all created by myself (apart from any 3D models using scene captures). This project was great for understanding a pipeline for creating many different art assets on bulk and really excelled my photoshop skills. Understanding iconography was incredibly important here to allow for the correct idea to be portrayed to the player for individual items. I also made my first tiling texture in this project to help with backgrounds and to keep the theme consistent but not repetitive.
​
UI Design: Design for this projected helped me solidify my knowledge of UI & UX design practices. With a focus on wireframes, anchor considerations, typography, colour theory and IA design. These design elements can be seen on this page below:
​
​
IA (information architecture) Design

No pop-up UI wireframe

With pop-up UI wireframe

The document below gives a bit of an insight into some of the research and other design elements produced for this project: