Skip to content

Commit

Permalink
Design Guidelines (YARC-Official#271)
Browse files Browse the repository at this point in the history
* New Music Library

+ Added base design for the new library
+ Source Icons added (78 Icons for now, will implement more in the future, for now mainly base games)
- Still need to add scrollbar to the list
- Need to rework the whole Filter/Search bar

* Music Library Update

+ Added default icon for songs that don't have a source
- Removed extra folders in the Sources folder (also EA need to fix this to use the right path, I'm just dumb)

* Design Guidelines

+ Started a simple design guidelines with fonts and colors being used on Interfaces
  • Loading branch information
kaduwaengertner authored May 7, 2023
1 parent 7bda997 commit 1c83692
Show file tree
Hide file tree
Showing 19 changed files with 77 additions and 0 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,11 @@ MonoBehaviour:
m_ReadOnly: 0
m_SerializedLabels: []
FlaggedDuringContentUpdateRestriction: 0
- m_GUID: 50266abeb1da561478acfa688b469cfa
m_Address: sourceIcons
m_ReadOnly: 0
m_SerializedLabels: []
FlaggedDuringContentUpdateRestriction: 0
m_ReadOnly: 0
m_Settings: {fileID: 11400000, guid: e05274e5aee7ff54bb550557e8a635f2, type: 2}
m_SchemaSet:
Expand Down
72 changes: 72 additions & 0 deletions DESIGNING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
# YARG Design Style
A game requires many pieces of a puzzle to fit together in order for it to feel, look, and to just be good. Because of this, a consistent philosophy and quality of work is required for it to fit together. This section contains information on its design guidelines, so contributors know how to approach adding new content to YARG.

# YARG Design Goals
* **Robustness and a “Good Default”:** The goal of YARG is for it to be as fun as possible for new players. Because of this, it is important that we provide users with a good default experience—meaning, before changing the settings. All features of YARG should be as robust as possible, and not require external any \tinkering for it to work. It should just work.

* **Customization, and “Modlessness”:** YARG’s end goal is for it to be as customizable as possible, so it suits the needs of all players, **without sacrificing competitive potential**. Modding of games usually happens because the game is missing a feature, or requires new content. YARG’s goal is for it to not require mods. All features that could be adjustable, should be. As for new content, the user should have the ability to do this without the need of external modification (i.e. new highways, etc.).

* **Familiarity, But Better:** YARG’s stylistic choices should reflect and be inspired off of the newest commercial 5-fret guitar games. The point of this is for it to be as familiar and “at home” as possible for new players, while also delivering a new and polished experience. This means that inspiration is advised, but **innovation is recommended**.

We have an extended Guideline in our Discord, if you want to be a Art Contributor make sure to read the full rules so we can keep a good workflow.

**[Click here to join our Discord and see the full Guidelines](https://discord.com/channels/1086048856678084609/1101237559658561627/1101238054104092714)**

---

## 📖 Fonts

### Red Hat Display
[Google Fonts](https://fonts.google.com/specimen/Red+Hat+Display?query=red+hat)
Used for Interface Headers (Music Library, Settings) and for submenu headers (Settings Tabs Name)

### Barlow
[Google Fonts](https://fonts.google.com/specimen/Barlow)
Our main font, we use Barlow for almost everything, it's a font with good readability so when it's used for big texts we use it as Regular, when using for buttons, small titles always use as uppercase.

### Unbounded
[Google Fonts](https://fonts.google.com/specimen/Unbounded)
Unbounded is our tertiory typography, used mainly for complementary texts (Multiplier Numbers)

## 🎨 Colors

### Main
|Color|Name|HEX|Description|
| :-: | :- | :-: | :- |
| <img src="Images/Design/color-primary.png" width="100%" alt="Primary Color"> | **Vivid Blue Sky** | #00DDFB | Primary Color |
| <img src="Images/Design/color-secondary.png" width="100%" alt="Secondary Color"> | **Xanthous** | ##FFB636 | Secondary Color |
| <img src="Images/Design/color-tertiary.png" width="100%" alt="Tertiary Color"> | **Rose** | ##F70072 | Tertiary Color |

### Dark Palette
|Color|Name|HEX|Description|
| :-: | :- | :-: | :- |
| <img src="Images/Design/color-dark-1.png" width="100%" alt="Primary Color"> | **Rich Black** | #090F1D | Primary Color |
| <img src="Images/Design/color-dark-2.png" width="100%" alt="Secondary Color"> | **Oxford Blue** | #111A30 | Secondary Color |
| <img src="Images/Design/color-dark-3.png" width="100%" alt="Tertiary Color"> | **Oxford Blue #2** | #1A253E | Tertiary Color |
| <img src="Images/Design/color-dark-4.png" width="100%" alt="Tertiary Color"> | **Space Cadet** | #2C344D | Tertiary Color |
| <img src="Images/Design/color-dark-5.png" width="100%" alt="Tertiary Color"> | **White Smoke** | #F2F2F2 | Tertiary Color |
| <img src="Images/Design/color-dark-6.png" width="100%" alt="Tertiary Color"> | **Silver** | #B8B8B8 | Tertiary Color |

### Light Palette
|Color|Name|HEX|Description|
| :-: | :- | :-: | :- |
| <img src="Images/Design/color-light-1.png" width="100%" alt="Primary Color"> | **White Smoke #2** | #F5F5F5 | Primary Color |
| <img src="Images/Design/color-light-2.png" width="100%" alt="Secondary Color"> | **White** | #FFFFFF | Secondary Color |
| <img src="Images/Design/color-light-3.png" width="100%" alt="Tertiary Color"> | **Jet** | #333333 | Tertiary Color |
| <img src="Images/Design/color-light-4.png" width="100%" alt="Tertiary Color"> | **Gray** | #7A7A7A | Tertiary Color |

### Extra
|Color|Name|HEX|Description|
| :-: | :- | :-: | :- |
| <img src="Images/Design/color-extra-success.png" width="100%" alt="Primary Color"> | **Malachita** | #00E85F | Success Messages |
| <img src="Images/Design/color-extra-information.png" width="100%" alt="Secondary Color"> | **Azure** | #0083FA | Info Messages |
| <img src="Images/Design/color-extra-warning.png" width="100%" alt="Tertiary Color"> | **Sunglow** | #FFD24F | Warning Messages |
| <img src="Images/Design/color-extra-error.png" width="100%" alt="Tertiary Color"> | **Red (Pantone)** | #FF0039 | Error Messages |

## ✏️ Icons
Our icons are from [Lucide](https://lucide.dev/), an open source icon library.

---
## Questions

If you have any question about designing for YARG feel free to reach out to our Lead Artist Kadu on Twitter: [**@kaduyarg**](https://twitter.com/kaduyarg) or Discord: **Kadu#7712**
Binary file added Images/Design/color-dark-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-dark-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-dark-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-dark-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-dark-5.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-dark-6.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-extra-error.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-extra-information.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-extra-success.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-extra-warning.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-light-1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-light-2.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-light-3.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-light-4.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-primary.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-secondary.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added Images/Design/color-tertiary.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 1c83692

Please sign in to comment.