Resources


Forms and Values
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
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
Essential Tutorials
Advanced Concepts
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