Home Typography
Browse Playground Type Info

Resources

Twitter Thread HuePlot Dropbox Brand

Forms and Values

YouTube Video

Priority is to learn rendering / drawing (SVG & Raster) in OKLAB/OKLCH based on:

  • Lightness
  • Chroma and Hue
  • A (how green/red the color is)
  • B (how blue/yellow the color is)

Study how conventional lighting methods in film making are applicable to UI, alongside existing Product UIs and what combination/value curves make them aesthetic.

Technical Resources

OKLAB Post Culori GitHub thi-ng Color Packages
As light increases and decreases in its intensity -> less intensity -> hue will shift around the color wheel (clock-wise direction) and saturation will increase as the light falls off.

Cinematic Lighting

YouTube Video 1 YouTube Video 2

Essential Tutorials

  • YouTube Video 3
  • YouTube Video 4
  • YouTube Video 5
  • YouTube Video 6
  • YouTube Video 7

Advanced Concepts

  • YouTube Video 8
  • YouTube Video 9
  • YouTube Video 10
  • YouTube Video 11
  • YouTube Video 12
  • YouTube Video 13
  • YouTube Video 14

Lighting Techniques

Split Lighting (9 or 3 o'clock)
Split lighting involves setting a single light at either 9 or 3 o'clock, resulting in one side of the subject's head being illuminated.
Backlight or Rim Lighting (12 o'clock)
When the light is behind your subject at 12 o'clock, it can result in beautiful rim lighting.
Butterfly Lighting (6 o'clock)
Butterfly lighting results when you place a light source slightly above and in front of your model at 6 o'clock.
Clamshell Lighting
Clamshell lighting is achieved by combining butterfly lighting with a reflector or a light placed underneath as fill light.
Loop Lighting (5 or 7 o'clock)
Loop lighting involves positioning the main light just above eye level at approximately 5 or 7 o'clock.
Rembrandt Lighting (4 or 8 o'clock)
Named after the Dutch painter, achieved by placing the light closer to 4 or 8 o'clock.
Short Lighting
Involves positioning the light source similarly to Rembrandt lighting, but you also turn the subject towards the light.
Broad Lighting
Similar to short lighting, but the subject is slightly turned away from the light source.
Cross Lighting
Place the main light source at 4-5 o'clock and an edge light at 10-11 o'clock.

Color Harmony Types

  • Monochrome
  • Analogous
  • Complementary
  • Split Complementary
  • Triadic
  • Tetradic

Additional Concepts

  • How colors interact — i have this book.
  • Aerial perspective