User Interface (UI)
UI Types
Diegetic
Spatial
Meta
Non-Diegetic
Rules from Erik D. Kennedy
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
Light comes from the sky
Shadows are invaluable cues in telling the human brain what user interface elements we’re looking at.
Buttons
The unpushed button (top) has a dark bottom edge. Sun don’t shine there, son.
The unpushed button is slightly brighter at the top than at the bottom. This is because it imitates a slightly curved surface. Just as how you’d need to tilt a mirror held in front of you up to see the sun in it, surfaces that are tilted up reflect a biiiiit more of the sun’s light towards you.
The unpushed button casts a subtle shadow– perhaps easier to see in the magnified section.
The pushed button, while still darker at the bottom than at the top, is overall darker– this is because it’s at the plane of the screen and the sun can’t hit it as easily. One could argue that all the pushed buttons we see in real life are darker too, because our hands are blocking the light.
Toggles
The top lip of the inset control panel casts a small shadow
The “ON” slider track is also immediately set in a bit
The “ON” slider track is concave and the bottom reflects more light
The icons are set out a bit. See the bright border around the top of them? This represents a surface perpendicular to the light source, hence receiving a lot of light, hence bouncing a lot of light into your eyes.
The divider notch is shadowed where angled away from the sun and vice versa
Elements that are generally inset:
Text input fields
Pressed buttons
Slider tracks
Radio button (unselected)
Checkboxes
Elements that are generally outset:
Buttons (unpressed)
Slider buttons
Dropdown controls
Cards
The button part of a selected radio button
Popups
Black and white first
Double your whitespace
Learn the methods of overlaying text on images
Make text pop— and un-pop
Only use good fonts
Steal like an artist
Resources
https://uidesigndaily.com/
References
https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
https://medium.com/@gfruity/what-are-your-ui-choices-834ea7d937c
https://www.gamasutra.com/view/feature/4286/game_ui_discoveries_what_players_.php?print=1