# Guiado por la fotografía

También llamado: diseño foto primero, web guiada por imágenes, fotografía a sangre, sitio de narrativa visual, lookbook  
Época: 2012 en adelante (portadas de Medium, Airbnb 2014, Unsplash, viajes y hostelería)  
Página: https://designforai.dev/es/style/photography-led

## Rasgos

- fotografías grandes de borde a borde marcan el ambiente; la UI se retira a filetes finísimos y tipo pequeño
- texto superpuesto a las imágenes con un velo en gradiente, o colocado en el espacio negativo de la foto
- etalonaje coherente en todas las fotos (un solo preset) para que el sitio se sienta con autoría
- imágenes a sangre y contenidas alternándose para marcar el ritmo
- retículas masonry o editoriales para galerías con pies
- imágenes responsive con carga diferida y placeholders desenfocados; proporciones fijadas
- movimiento: Ken Burns lento en los heros, parallax al 5-10%, fundidos cruzados

Paleta: tomada de la fotografía; la UI es #ffffff, #111111, velo rgba(0,0,0,0.5), superficie #f2f2f2, un acento muestreado del tono dominante de la foto

Tipografía: Manrope, DM Sans o Instrument Sans para la UI a 13-15px; una serif fina (Cormorant, Newsreader) o la misma sans a 48-88px para los títulos superpuestos; pies 12px en apagado

## Haz

- etalona cada foto con un solo preset (contraste, calidez, ligero desvanecido) y exporta a 1600px como máximo, webp por debajo de 200KB
- reserva cada hueco de imagen con aspect-ratio para que nada se desplace al cargar; usa un placeholder desenfocado de 20px
- coloca el texto en la zona tranquila de cada foto y añade un velo inferior al 40% solo cuando haga falta

## Evita

- no pongas chrome de UI encima de las fotos: sin tarjetas, sin bordes, sin botones de color sobre las imágenes
- no mezcles estilos de fotografía de stock; un solo look o ninguno
- no uses carruseles en el hero; una foto fuerte vale más que cinco

Conocido por: Airbnb, National Geographic, Unsplash, Kinfolk, resorts Aman

## Semilla CSS

```css
:root{--bg:#ffffff; --fg:#111111; --muted:#8a8a8a; --scrim:linear-gradient(transparent,rgba(0,0,0,0.5)); --surface:#f2f2f2; --radius:0; --ratio:3/2; --font:'Manrope',sans-serif}
```

## Prompt

Construye el sitio guiado por la fotografía. Todas las fotos comparten un solo etalonaje (ligeramente cálido, negros levantados) y se sirven como webp por debajo de 200KB a 1600px, con carga diferida, un placeholder desenfocado y un aspect-ratio fijo (3/2 para horizontal, 4/5 para vertical). Colores de UI: #ffffff, #111111, apagado #8a8a8a, superficie #f2f2f2. Fuente Manrope: título del hero superpuesto 300 a 80px con -0.02em colocado en el espacio negativo de la foto (abajo a la izquierda, 64px de margen interior) sobre un velo inferior linear-gradient(transparent, rgba(0,0,0,0.5)); texto de UI 14px; pies 12px en apagado bajo cada imagen. Hero: foto a viewport completo con un zoom Ken Burns de 20s (scale de 1 a 1.08). Cuerpo: alterna imágenes a sangre con filas contenidas de imagen y texto a dos columnas, separadas 120px. Galería: masonry de 3 columnas con huecos de 16px, sin radio, sin bordes, el hover oscurece un 10%. Los botones son texto subrayado, blanco sobre fotos, negro sobre blanco. La nav es transparente sobre el hero, blanca con un filete finísimo tras 80px de scroll. Parallax del 6% en las imágenes a sangre.