UI

Learning

Intro to Design

Watch the video here

Notes

• Generate a handful (around five) key design words to keep in mind when designing a specific element
  • Creates a design language to adopt to an IP
  • Examples:
    • Streamlined: lines that pick up acceleration/speed
    • Retro: using lines/curves that are no longer used today
    • Whimsical: playful/toylike
    • Cool: prompts immediate "that's cool" reaction
    • Animalistic: life-like features, mean or cute features
    • Utility: for a specific tool or function
    • Sturdy: can handle some damage and continue functioning as normal
    • Beautifully ugly: bizarre but holistically good-looking
    • Powerful: strong, very capable of extreme function
    • Professional: would require training to learn how to use
• Preparing a design board
  • Construct a board of design influences where the reference images encompass one or more of the design words in your selected design language
  • References do not all have to be in direct reference to the object you are designing
    • Meant to invoke more of an aesthetic feel and provide elements of inspiration
• Sketches
  • Come up with as many rough variations as possible
    • Try to have as many different shapes as possible with larger variations, at least to start
    • Try different things! Have fun!
  • Be as straightforward as possible
    • No need to document many specific cases initially (i.e., different perspectives/angles)
  • Annotate the ones you really like! iterate off of those
  • Pick favorite designs to finalize

NASA Interfaces

Here are some links I've found:

• JPL Robotics
  • User Interfaces
• Space station user interface specifications
• Explorations in NASA's interface design
• NASA UX/UI redesign case study
• UX in space
• NASA web design system
• NASA vs. The Martian

General Overview

The UI of Project Storm will fall into one of two categories which I'm tentatively naming Menu UI and Oppy UI.

• Menu UI consists of all of the buttons, text, images, and other interactable components that are found in menus excluded from the core gameplay loop. This consists of things like the start menu, a pause menu, narrative menus, win/loss screens, etc.
• Oppy UI consists of all of the buttons, text, images, and other interactable components that are found in gameplay when you are playing as Oppy. This UI will largely encompass what Oppy actually sees and how he interacts with his surroundings as the player is controlling him in all three acts of the game. See the Pinterest board here.

These two different interfaces are meant to directly contrast each other.

This document will illustrate both interfaces and their designs, one at a time.

Menu UI

Design Language

Old-World: Made to look like before technological innovation occurred; old-fashioned styles, textures, colors, etc.

Elegant: Embellishments on typography and components are apparent and over-the-top, without running the risk of being too detailed to not see/appreciate the level of detail.

Juxtaposed: Simple/straightforward base components with elegant and detailed embellishments to key features (i.e,. typography, borders, etc.).

Warm: No detail is too harsh or cold to seem unappealing. There is an underlying sensation of feeling drawn to the elegance and safety of the UI.

Robust: Appearing to be made of sturdy materials (i.e., leather, metal, etc.); built to last.

Reference Boards

WIP.

Sketches

Not started yet.

Oppy UI

Design Language

Geometric: Elements are perfect shapes and arranged in a grid-like structured manner.

Modular: Data is clearly organized into functional components; easy to modify/recreate with new function/purpose.

Futuristic: Embodying technological innovation and the future of cybernetics.

Clinical: Lack of warmth; focus on data and analytics.

Sleek: Clean lines, legible fonts, accessible to the highest degree, little to no redundancies.

Reference Boards

Reference Boards Figma

Sketches

Sketches Figma

Component Library

Menu UI

Not started yet.

Oppy UI

Oppy UI Component Library Figma