Jumper Cables Dynamic App Screens

These are screens that were designed for a hypothetical platformer app. For this project, I was tasked with only designing a few of the menus that would show up throughout playing. I made a main menu, a minigame sub-menu, and a pause menu.

Out of the gate, I wanted these menus to stand out in the sea of existing menus with basic rectangles and rounded corners. I sketched out some designs reminiscent of the UI in the video game series “Persona.” In those games, most of the options you select in a menu feature dynamic zig-zag shapes, and I did my best to try and recreate something similar without verbatim copying their style.

For the minigame sub-menu, I moved the minigame button from the main menu to the top of the screen to maintain the dynamic look, and kept a simplified rectangular menu at the bottom. A video would be playing demonstrating the selected minigame near the top, followed by a gradient background with instructions. Then below that a divider for what minigame you chose, and finally a back-to-main-menu button at the bottom.

As for the pause screen, I thought it would be a cool idea to have the menu be a scrolling, 3D wheel. To help imply this to the player viewing the screen, I put an axel behind the selected option, and turn the other options above and below it into trapezoids to give the illusion that they are curving backwards. 

After those sketches were complete, I began to draw them up in Adobe Illustrator. Upon completion of that, I had some fresh eyes take a look at my screens. They pointed out that the minigame menu could use some tweaking in terms of the game selection, as the boxes were very small, especially for a phone screen. To remedy this, I got rid of the minigame options on the sides, and made the one in the middle span the whole width of the screen. I also added in an indicator letting you know how far you’ve scrolled through the minigames. And with that, the screens were complete.