UI Planning
To establish effective and cohesive user interfaces (UI), team 10 planned out the layout, design and necessary functionalities early on. Before getting started on the code and deliverables of sprint 1, the UI components were mapped out by using low-fidelity wireframes. The wireframes were shared with each team in the studio to accommodate their respective interactivity with the user. After communicating with teams the wireframes were iterated upon, and ultimately informed the final output.
The initial low-fidelity wireframe was released early on in sprint one, which was fundamental timing for the UI team to understand the essential elements needed to make the game interactive across all pages.
Start Page: The start page was kept relatively similar to the 'Box Boy' game (the code base that was provided to be built upon) but slightly altered to fit the Atlantis Sinks theme and interactivity. Each component of the start page is addressed below...
- Buttons: The start page button was designed to be more distinct and prominent when compared to the Box Boy's small green buttons. From a UI standpoint, larger buttons were decided upon as a bigger click area allows for faster selection times. This approach was also adopted for the settings and exit buttons. It was a decision to remove the load button as we didn't see it as a necessary button as the game itself does not to be loaded as when the game just begins upon start.
- Layout: The layout of the UI elements was similar to that of Box Boy, whereby it is a centred-aligned hierarchal structure. More specifically, the title game logo is at the top of the structure followed by the start, settings ad exit buttons based on what would be the 'most clicked' or interacted buttons on behalf of the user.
Settings Page:
- Buttons: Since the wireframe was created at the beginning of the sprint when the students were only just being exposed to the Box Boy code, the settings wireframes excluded numerous built-in settings features like the FPS Cap, Fullscreen, VSync, UI Scale and Resolution. Hence these elements are missing from the wireframes and were not considered in sprint 1's workload, and will be addressed in the future. However, in the beginning, the team considered it important to allow the user to unmute and mute any audio sounds. By nature, audio can be at times overwhelming, distracting and intrusive when trying to concentrate. In a game environment with stimulated intensity and tasks that require concentration, we wanted to ensure the user had the ability to have a preference on the sound output to reduce interruptions and ultimately, their emotions (bothered, frustrated, or annoying emotions while trying to focus). Thus, a simple on and off button was planned for music as well as sound effects (note that sound effects weren't integrated within sprint 1, however, they were considered for future UI).
Main Game Page