Skip to content

Commit bc95561

Browse files
IgnisRBXIgnisRBX
authored
Apply suggestions from code review
1 parent 60c502f commit bc95561

File tree

1 file changed

+12
-12
lines changed

1 file changed

+12
-12
lines changed

‎content/en-us/production/game-design/ui-ux-design.md‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,11 @@ Irrelevant elements can cause confusion and distraction. [_Spellbound RPG_](http
3737
<GridContainer numColumns="2">
3838
<figure>
3939
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-3.png" alt="A close up view of an unselected circular Items button with a brown book icon. The environment in the background is a brown dirt with a patch of snow." width="100%"/>
40-
<figcaption>Items prior to selection in [*Spellbound RPG*](https://www.roblox.com/games/6468323505/)</figcaption>
40+
<figcaption>Items prior to selection in [Spellbound RPG](https://www.roblox.com/games/6468323505/)</figcaption>
4141
</figure>
4242
<figure>
4343
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-2.png" alt="A close up view of a selected circular Items button with a brown book icon, along with three additional buttons for skills, equipment, and the players deck. The additional buttons only display when the button is selected." width="90%"/>
44-
<figcaption>Items after selection in [*Spellbound RPG*](https://www.roblox.com/games/6468323505/)</figcaption>
44+
<figcaption>Items after selection in [Spellbound RPG](https://www.roblox.com/games/6468323505/)</figcaption>
4545
</figure>
4646
</GridContainer>
4747

@@ -50,19 +50,19 @@ In [_Super Striker League_](https://www.roblox.com/games/3360853050/), player in
5050
<GridContainer numColumns="2">
5151
<figure>
5252
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-6.png" width="100%"/>
53-
<figcaption>Contextual buttons in [_Super Striker League_](https://www.roblox.com/games/3360853050/)</figcaption>
53+
<figcaption>Contextual buttons in [Super Striker League](https://www.roblox.com/games/3360853050/)</figcaption>
5454
</figure>
5555
<figure>
5656
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-7.png" width="100%"/>
57-
<figcaption>Contextual buttons in [_Super Striker League_](https://www.roblox.com/games/3360853050/)</figcaption>
57+
<figcaption>Contextual buttons in [Super Striker League](https://www.roblox.com/games/3360853050/)</figcaption>
5858
</figure>
5959
</GridContainer>
6060

6161
In [_The Survival Game,_](https://www.roblox.com/games/11156779721/) players need to be aware of their health and hunger status, and have quick access to their map, inventory, and tools. This information allows them to make decisions and prioritize actions for survival. If this information or tools are hard to find or missing, survival becomes more challenging and needlessly frustrating.
6262

6363
<figure>
6464
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-1.png" width="60%"/>
65-
<figcaption> HUD features in [_The Survival Game_](https://www.roblox.com/games/11156779721/)</figcaption>
65+
<figcaption> HUD features in [The Survival Game](https://www.roblox.com/games/11156779721/)</figcaption>
6666
</figure>
6767

6868
### Attention
@@ -83,21 +83,21 @@ In [_Jailbreak_](https://www.roblox.com/games/606849621/)'s season pass UI, a st
8383

8484
<figure>
8585
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-8.png" width="60%"/>
86-
<figcaption> Season pass UI in [_Jailbreak_](https://www.roblox.com/games/606849621/)</figcaption>
86+
<figcaption> Season pass UI in [Jailbreak](https://www.roblox.com/games/606849621/)</figcaption>
8787
</figure>
8888

8989
In [_Dragon Adventures,_](https://www.roblox.com/games/3475397644/) visual priority is given to the highest-value coin bundle by increasing its size and separating it with more padding, to distinguish it from smaller bundles.
9090

9191
<figure>
9292
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-9.png" width="60%"/>
93-
<figcaption> Coin bundles in [_Dragon Adventures_](https://www.roblox.com/games/3475397644/)</figcaption>
93+
<figcaption> Coin bundles in [Dragon Adventures](https://www.roblox.com/games/3475397644/)</figcaption>
9494
</figure>
9595

9696
In [_Tower Defense Simulator_](https://www.roblox.com/games/3260590327/), both size and proximity are used to visually group and distinguish Daily Tower Skins from Daily Crates.
9797

9898
<figure>
9999
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-10.png" width="60%"/>
100-
<figcaption>The shop in [_Tower Defense Simulator_](https://www.roblox.com/games/3260590327/)</figcaption>
100+
<figcaption>The shop in [Tower Defense Simulator](https://www.roblox.com/games/3260590327/)</figcaption>
101101
</figure>
102102

103103
### Visual language
@@ -128,7 +128,7 @@ Headers and titles containing significant high-level information should be large
128128

129129
<figure>
130130
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-13.png" width="40%"/>
131-
<figcaption> Clothing Shop in [*Winds of Fortune*](https://www.roblox.com/games/7714627632/)</figcaption>
131+
<figcaption> Clothing Shop in [Winds of Fortune](https://www.roblox.com/games/7714627632/)</figcaption>
132132
</figure>
133133

134134
Once the visual language has been designed, it can be documented in a _Style Guide_, a set of rules and examples that help everyone on the team understand how to apply the language consistently across the game.
@@ -146,11 +146,11 @@ Given their widespread use, players are typically familiar with such conventions
146146
<GridContainer numColumns="2">
147147
<figure>
148148
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-14.png" width="100%"/>
149-
<figcaption>X Close Buttons in [*Winds of Fortune*](https://www.roblox.com/games/7714627632/), [*Dragon Adventures*](https://www.roblox.com/games/3475397644/), [*BotClash Simulator*](https://www.roblox.com/games/9300407930/), and [*DOORS*](https://www.roblox.com/games/6516141723/)</figcaption>
149+
<figcaption>X Close Buttons in [Winds of Fortune](https://www.roblox.com/games/7714627632/), [Dragon Adventures](https://www.roblox.com/games/3475397644/), [BotClash Simulator](https://www.roblox.com/games/9300407930/), and [DOORS](https://www.roblox.com/games/6516141723/)</figcaption>
150150
</figure>
151151
<figure>
152152
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-15.png" width="90%"/>
153-
<figcaption>Green "Health" stat consistency in [*Arcane Odyssey*](https://www.roblox.com/games/3272915504/)</figcaption>
153+
<figcaption>Green "Health" stat consistency in [Arcane Odyssey](https://www.roblox.com/games/3272915504/)</figcaption>
154154
</figure>
155155
</GridContainer>
156156

@@ -245,7 +245,7 @@ For example, to equip an item on an avatar in [Berry Avenue RP](https://www.robl
245245

246246
<figure>
247247
<video controls src="../../assets/game-design/ui-ux-design/ui-ux-design-18-video.mp4"></video>
248-
<figcaption>Avatar customization flow in [*Berry Avenue RP*](https://www.roblox.com/games/8481844229/)</figcaption>
248+
<figcaption>Avatar customization flow in [Berry Avenue RP](https://www.roblox.com/games/8481844229/)</figcaption>
249249
</figure>
250250

251251
These steps taken together represent the avatar customization flow. This flow is simple and straightforward, with as few steps as possible needed to equip an item. Because players do not have to perform many actions or think too much about what they need to do, this flow is low in _friction_, a measurement of the effort required to reach a goal.

0 commit comments

Comments
 (0)