Maestro Nav - V1 UI Design
Title/Splash screen.

Title/Splash screen.

As Ruffle is currently unable to detect whether or not a user is on mobile, this prompt is necessary to provide the user with the mobile layout if need be.

As Ruffle is currently unable to detect whether or not a user is on mobile, this prompt is necessary to provide the user with the mobile layout if need be.

Pg. 1 of story and tutorial.

Pg. 1 of story and tutorial.

Pg. 2 of story and tutorial.

Pg. 2 of story and tutorial.

Mobile gameplay mockup, including on-screen buttons, and re-arranged and re-sized items.

Mobile gameplay mockup, including on-screen buttons, and re-arranged and re-sized items.

PC Mockup.

PC Mockup.

Screen for when the player fails.

Screen for when the player fails.

Screen for when the player succeeds.

Screen for when the player succeeds.

Original wireframe rough for splash/title screen.

Original wireframe rough for splash/title screen.

Wireframe mobile prompt rough.

Wireframe mobile prompt rough.

Wireframe for tutorial/story pg. 1.

Wireframe for tutorial/story pg. 1.

Wireframe for tutorial/story pg. 2.

Wireframe for tutorial/story pg. 2.

Wireframe for PC/desktop gameplay.

Wireframe for PC/desktop gameplay.

Wireframe for mobile gameplay.

Wireframe for mobile gameplay.

Wireframe for "player lost" screen.

Wireframe for "player lost" screen.

Wireframe for "player won" screen.

Wireframe for "player won" screen.

Maestro Nav is a short web game made for Newgrounds' Flash Forward Jam! Made as a "last hurrah" for Flash, this game runs in modern browsers via Ruffle, and is available to play on both desktop and mobile. The current version can be played here: https://www.newgrounds.com/portal/view/782669

Knowing that the game would need to be playable on both PC and mobile, I opted for a click/press-centric UI for menu navigation, with the game itself using screen presses only on the mobile version. The foundational design for the current version can be seen in action at this link: https://xd.adobe.com/view/b694dd41-ffb4-46d5-93c7-c9383423d640-e3c7/
While the wireframe rough can be viewed at this link: https://xd.adobe.com/view/57588791-b417-47d7-a86d-169d1675f8c4-020b/