Skip to content

Add hyperlinks to ui-ux-design.md #870

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Oct 29, 2024
Merged

Add hyperlinks to ui-ux-design.md #870

Changes from 10 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
aabb7ef
Fix punctuation on Glue.yaml
Oct 17, 2024
5896cb1
Merge branch 'main' into main
IgnisRBX Oct 17, 2024
6da1108
Merge branch 'Roblox:main' into main
Oct 17, 2024
f9ddd72
Add hyperlinks to ui-ux-design.md
Oct 17, 2024
7de2751
Patch Spellbound RPG italics
Oct 17, 2024
2bd13b8
Patch Spellbound RPG Italics 2
Oct 17, 2024
947d505
Add hyperlinks and text revision on ui-ux-design.md
Oct 17, 2024
7407fa6
Merge branch 'main' into ui-ux-design-patch1
Oct 19, 2024
afe0f94
Merge branch 'main' into ui-ux-design-patch1
Oct 25, 2024
60c502f
Merge branch 'main' into ui-ux-design-patch1
Oct 27, 2024
bc95561
Apply suggestions from code review
IgnisRBX Oct 29, 2024
6f901e3
Merge branch 'main' into ui-ux-design-patch1
IgnisRBX Oct 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 12 additions & 12 deletions content/en-us/production/game-design/ui-ux-design.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,11 +37,11 @@ Irrelevant elements can cause confusion and distraction. [_Spellbound RPG_](http
<GridContainer numColumns="2">
<figure>
<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%"/>
<figcaption>Items prior to selection in *Spellbound RPG*</figcaption>
<figcaption>Items prior to selection in [*Spellbound RPG*](https://www.roblox.com/games/6468323505/)</figcaption>
</figure>
<figure>
<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%"/>
<figcaption>Items after selection in *Spellbound RPG*</figcaption>
<figcaption>Items after selection in [*Spellbound RPG*](https://www.roblox.com/games/6468323505/)</figcaption>
</figure>
</GridContainer>

Expand All @@ -50,19 +50,19 @@ In [_Super Striker League_](https://www.roblox.com/games/3360853050/), player in
<GridContainer numColumns="2">
<figure>
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-6.png" width="100%"/>
<figcaption>Contextual buttons in _Super Striker League_</figcaption>
<figcaption>Contextual buttons in [_Super Striker League_](https://www.roblox.com/games/3360853050/)</figcaption>
</figure>
<figure>
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-7.png" width="100%"/>
<figcaption>Contextual buttons in _Super Striker League_</figcaption>
<figcaption>Contextual buttons in [_Super Striker League_](https://www.roblox.com/games/3360853050/)</figcaption>
</figure>
</GridContainer>

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.

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

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

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

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.

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

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.

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

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

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

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.
Expand All @@ -146,11 +146,11 @@ Given their widespread use, players are typically familiar with such conventions
<GridContainer numColumns="2">
<figure>
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-14.png" width="100%"/>
<figcaption>X Close Buttons in *Winds of Fortune*, *Dragon Adventures*, *BotClashSimulator*, and *DOORS*</figcaption>
<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>
</figure>
<figure>
<img src="../../assets/game-design/ui-ux-design/ui-ux-design-15.png" width="90%"/>
<figcaption>Green "Health" stat consistency in *Arcane Odyssey*</figcaption>
<figcaption>Green "Health" stat consistency in [*Arcane Odyssey*](https://www.roblox.com/games/3272915504/)</figcaption>
</figure>
</GridContainer>

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

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

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.
Expand Down
Loading