UI

Inspiration and references

Inspirations

• Neon Genesis Evangelion + Blade Runner (1982) – Highly interested in their HUD shape language, typography and colour palettes. Containers and text will especially rely on these two for inspiration
• Citizen Sleeper 2 – Taking inspiration from its layouts and shapes for menus**

Check out the moodboard here!

Lore

• UI is non-diegetic, in that it does not actually exist in the world – robots do not interact with it; there is no entity that actually develops or creates the interfaces in-game.

Design specifics

Colours

• Item rarities will be indicated by a border surrounding the item:

  • Common – White

  • Green – Rare

  • Yellow – Legendary

  • Purple – Cursed

Typography

• Text will be neon colours, dependent on district and character.

• Currently looking into a combination of serif and sans serif texts  to recreate an older, classic feel to the cyberpunk aesthetic. 

  • Potentially interested in monospace.

• Display text should be bold and angular – Heavy use of mechanically condensed/bolded/capital letters for titles.

• Minimal bloom effect around HUD text. (using textures + gradient maps, will work with programmers to implement this)

Containers and shapes

• Colours will primarily focus on using black, 60% opacity rectangular/diamond/hexagonal containers to slot any text into. Using thin lines to connect containers together.

• Accent will be a neon colour, dependent on district/character.

• Shape language will rely on isometric shapes (leaning towards flat diamond shape/hexagonal shapes.)

• Isometric patterns can be used for decoration.

• Minimal bloom effect around HUD text. (using textures + gradient maps)

Icons

• Icons should be duotone (black + accent colour.) 

  • They should be lined and undetailed for low res and easy distinction.

• Should be 600x600px in greyscale 

  • Work with a black background

  • But EXPORT transparent background

• If adding glow, be careful it doesnt hit the edges of the sprite

Items

Items are resources given to (and apply effects to) units. The player can acquire them in the following ways:

• Combat rewards

• Purchasing them from the “Shop”

• From random encounters/events

Items will be:

• Diegetic and exist in the game’s world as physical items

• Coloured differently according to rarity

Items should be:

• Simple and not take awhile to be drawn

  • “There will be like 100 of them” - Xander

• Limited gradient-mapped colour palette 

• Visually distinct and able to be differentiated between

  • This is so that you can theoretically tell them apart without looking at their descriptions

• Art style similar to Hades / Cyberpunk (below), but leaning more towards Cyberpunk

  • Flat colours/ shapes which we can use to invoke the feeling of a hologram with

  • No soft brushes / gradients (apart from glowing effects if necessary)

For their gameplay purpose- think of their functionality similar to that of Hades boons. (Or any similar screen in a roguelite you’ve played)

In terms of the art direction of the item icons:

• Hades icons (above)

  • We like simpleness and simplicity

  • We like their flat and limited with colours that doesn’t compromise on detail

  • We like the aesthetic

    • Wouldn’t drop them into our game as-is, but with one or two less colours + more focusing on silhouettes they might work

• Cyberpunk 2077 skill tree icons (below)

  • We like the hologram aesthetic that it gives off the most

    • Should fit in well with the rest of our UI

    • Pleasing to look at 

    • Hologram aesthetic could be recreated with some shaders from Saul?

  • We like how simple they are

  • We aren’t too keen on how a lot of them look very similar and are hard to tell apart.

• Final Fantasy 14 icons (below)

  • We like that each icon is visually distinct and can be told apart from each other

  • We aren’t too keen on how detailed they are

    • Clashes with our current UI aesthetic

    • Very time intensive to draw

• Risk of Rain 2 items (below)

  • We like that each icon is visually distinct - if you know the game, you know the item just by looking at it.

  • We like that colour denotes rarity of the icon

  • We aren’t too keen on their art style

    • Clashes with our current UI aesthetic

    • Too many colours - time intensive to draw