|
Jerry NacierLevel Designer |
SHFT
|
Project Overview Role: UI, UX Design Engine: Unity Duration: Jun 2017– Sept 2017 (4 months) 2D, mobile, maze-like, zen, puzzle game.
Mind Map: 
|
| ||
|
Contributions
|
|
Design Process
Title
The name of the game. Design Reasoning: Stylized as such because the game is about shapes. It is mostly warm colors to stand out against the cool background. Main Menu Buttons "Continue" to begin playing the next level immediately. "Level Selection" where levels can be revisited. "Store" where tokens, color themes, and shape themes can purchased. "Settings" to access audio, themes, save data, sign into Google Play, and share on social media. Design Reasoning: The buttons are different sizes to establish a visual hierarchy; getting players back to gameplay is the highest priority, and so, its associated buttons are larger. Buttons are also positioned near the bottom of the screen to remain within the comfortable zone of thumb reach. Edge Stars Ace Stars that players collect travel along the edges of the screen. After collecting five, they merge into a big star. Design Reasoning: To serve as both a reminder and incentive for mastery. *Note: When players start the game for the first time, they go directly to the first level, not this screen. -- Iterations: 1. Low fidelity paper mock up 2. Mid fidelity digital mock up 3. In-game screen shot; first attempt 4. High fidelity digital mock up
Path
The line between the level buttons. Between two completed levels, the line is solid; otherwise, it is dotted. Design Reasoning: To indicate which levels are accessible. Having two path states creates a difference in kind, and a dotted line reads better as disconnected or missing. The path moves upwards. Design Reasoning: It's symbolic of progress; up is generally regarded as a positive direction. Level Buttons Incomplete levels, similar to the path, are "incomplete" in design (their frames lack filling). Design Reasoning: For the same reason as the path and to establish aesthetic cohesion. Completed levels are "filled in". Their colors are dependent on the current color scheme and always contrast the background color for maximum clarity. They are given a 3D appearances to resemble buttons; this suggests its interactability and method of interaction. Aced Levels Players who complete a level within a certain number of moves will be awarded with an Ace Star. Design Reasoning: To reward players for their skill and appeal to the ones who love a challenge. To reflect this, the level button in question will become an animated star. In addition, the path between two Aced levels will change color and emanate sparkles. Level Button Text On complete levels, they are black with a white stroke; the inverse is true for incomplete levels. Design Reasoning: This is to ensure that no matter what color scheme the player is using, text will always be clearly visible. Menu/Back Buttons These buttons are placed at the bottom of the screen and are the same button shape. Design Reasoning: For ease for access and sport the common icons for "menu" and "return/ go back". Power Ups and Statistics Upper left corner displays collected power ups. Upper right displays number of Ace Stars and tokens (the game's currency). Design Reasoning: Because these UI elements are meant for displaying data only, they don't need to be within comfortable reach, leaving the precious screen real estate for interactable elements. Region Ace Indicator Off to the left is a series of dots and stars. They represent the current screen of levels and how many have been Aced. Design Reasoning: It serves as another measure of mastery. Region Frame Around the edge of the screen is a level frame. Design Reasoning: Navigating the "world map" is done by swiping to pan, not pulling; the map is sectioned into individual screens and will snap back if not swiped hard enough. The frame is a visual reinforcement of segmented nature of the map. Region Mark The three diamonds in the background behind level 7. Each segment of the world map will feature one of these symbols in the background. Design Reasoning: To give each section its own identity. -- Iterations: 1. Low fidelity paper mock up; HUD focus 2. Low fidelity paper mock up; level focus 3. Mid fidelity digital mock up 4. High fidelity digital mock up 5. Low fidelity; player taps level 10 6. High fidelity; player taps level 10
Ace Number Remaining and Next Shape Indicator
In the top left, this element counts down the remaining moves; complete the level before it reaches zero to collect the Ace Star. In the top right, is the Next Shape Indicator. Design Reasoning: As UI elements that players don't directly interact with, they are assigned to the top of the screen. Also, because both elements are light in color, it helps visibility to give them dark backgrounds. Grid Gameplay is front and center. Main lines are at half transparency and dark, corners are fully opaque and dark, the grid background is 75% opaque and bright. Design Reasoning: This configuration works on both the lightest and darkest backgrounds; its self-contained contrast guarantees clarity. Menu Button Positioned in the lower left. Design Reasoning: To keep it in the same place as the level selection screen (consistency) and make it easy to access for players. Power Ups The three power ups are distinct colors and positioned in the lower center and right. Design Reasoning: Since their colors don't change (they don't change with different themes), it was important for the buttons to have a bright face and a dark underside to stand out against any background. The number of power ups remaining is indicated by a dark number in a white bubble below the button. When out of a power up, a plus appears above the button instead. Design Reasoning: Contrast on the text ensures visibility on any background players use. In the case of a completely depleted power up, the shifting of text from the bottom of the button to the top serves as a difference in kind to the power ups that aren't empty, making it more immediately apparent when players have run out. Also, it is positioned closer to the grid where players eyes are going to be most often. -- Iterations: 1. Low fidelity paper mock up v1 2. v2 3. Mid fidelity digital mock up 4. High fidelity digital mock up
Other Low Fi Screens
|
