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 deliverable.
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:
Main Game Page