Welcome to the fourth of our ‘Developer Diaries’ – for this update we wanted to focus on the User Experience and User Interface, moving from a Game Design Document, through to an interactive prototype.
Before we begin, what do we mean by UX and UI? At the most basic level, User Experience (UX) is how a player experiences every aspect of a videogame. User Interface (UI), on the other hand, is a series of screens, pages, and visual elements – like buttons and icons – that they will interact with. UI is about visual and information design around screens. UX is about the complete experience.
The Game Design Document (GDD) is a document that captures all of the features and mechanics of the videogame. Before any coding begins, we extract the key information from the GDD that the design team has put together and create a visual flow of the entire project using www.draw.io.
For example, a key of symbols was defined to aid user navigation through each screen; with each navigation, decision and interaction point being clearly defined.
The next step was to share, discuss and refine each flow diagram with all the project stakeholders. We iterated each flow diagram approximately four times over the course of a month. Flexibility and iteration is a key factor at this point, as you move from words on a page, to a more meaningful user experience.
Our next step was to rapidly move beyond these flow diagrams to an interactive demo. For this part of the process we chose to use Adobe Xd.
Xd allowed us to rapidly prototype and test the UX at an artist/designer level without additional code support. It was also at this point that the wireframing of each screen began.
These wireframes will be the starting point for all future UI tasks, including the placement, consistency, scale and priority of visual information across each screen.
At this wire framing stage we look only at functional design rather than the look and feel. Again, this allows us to share and iterate a functional prototype to ensure all behaviours met design expectations, but with minimal visual distraction.
Functionally we now know and understand how the videogame will behave, having completed the first important steps of defining the user experience.
In future diary updates we will cover what comes next; the refinement of each screen’s wireframe, the UI design and the application of the title’s art direction. This will bring the experience to life and – if everything comes together as we hope – make Reality Clash look beautiful!
In related news: accessory stripping has been completed whilst the clean-up and optimisation of the base set of in-game weaponry has begun. We’re delighted to be able to start playing with some of these weapons in our prototype and can’t wait to let you all get your hands on them.
We continue to expand our weapon designs and will announce details of the upcoming Armoury launch very soon. For updates between these diaries, follow us on Twitter at https://twitter.com/reality_clash.
via Mint VR