Photography in UI
The principles for selecting and framing photography to support rather than compete with UI elements.
Plain English
Photos are the most powerful visual element in any UI but also the riskiest. A poorly chosen photo fights with the text, looks inconsistent next to others, or sends the wrong brand signal. Good photography choices: consistent subject distance, consistent colour temperature, enough plain areas for text to sit on, and images that feel like they belong in the same product. The most professional interfaces maintain strict photographic consistency even when using stock photography.
Technical
CSS tools for photography in UI: object-fit: cover (fills a container without distortion), object-position (controls which part of the image shows), aspect-ratio (enforces consistent dimensions), filter (brightness/contrast adjustments), and gradient overlays (for text legibility). For performance: use appropriate image formats (WebP, AVIF), responsive images with srcset, lazy loading (loading="lazy"), and explicit width/height to prevent layout shift.
Live Demo
Rule of Thirds
Subject at intersection
Leading Lines
Lines lead the eye
Negative Space
Emphasis through emptiness
Composition rules apply to UI too — whitespace, focal points, and visual flow are identical concepts.
Usage
✓ Good usage
Set all blog post hero images to aspect-ratio: 16/9 with object-fit: cover — no matter what the photographer uploaded, every image presents identically.
✗ Bad usage
A testimonials section with photos of wildly different cropping and colour temperature — some portraits, some landscape, some warm, some cold — the inconsistency signals carelessness.
Recommended values
- Consistent aspect ratio across a grid: aspect-ratio: 16/9 or 1/1
- object-fit: cover — fills the container without distortion
- Text legibility: gradient overlay rgba(0,0,0,0.5) when text sits on photo
- Colour temperature: use only warm OR only cool photos in one context, not both
- loading="lazy" on below-the-fold images
Common mistakes
- Different aspect ratios across image grids — breaks visual rhythm.
- No gradient overlay when white text sits on a light-coloured photo.
- Using large, unoptimized images that slow page load significantly.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
All product images: aspect-ratio: 1 / object-fit: cover / object-position: center. All hero images: aspect-ratio: 16/9 with a linear-gradient(to top, rgba(0,0,0,0.5), transparent) text overlay. Use consistent warm colour temperature across all photography.