A · Editorial
Titular grande y una fotografía vertical a un lado, sobre fondo claro. Se construyó primero como portada real.
ContactoCaso de estudio
Tamayoimatge
De una web de blog de 2010 a un portfolio que pasa de la luz a la sombra: cómo se rediseñó el sitio de un estudio de fotografía de Onda.
- Cliente
- Tamayoimatge, estudio de fotografía en Onda (Castellón), abierto desde 2010
- Qué hicimos
- Dirección visual, portada, categorías y página 404, sobre una base técnica nueva
- Año
- 2026
- Estado
- Rediseño aceptado por el cliente; en el entorno de pruebas, pendiente de pasar a su dominio
63 a 99Rendimiento en Lighthouse móvil, de la web actual al rediseño.
6,4 s a 2,1 sElemento principal de la portada (LCP) en móvil.
5 MB a 524 KBPeso de la portada en móvil.
0,186 a 0Desplazamiento de diseño en móvil (CLS).
Punto de partida
El encargo
Una fotografía muy buena en una web que no estaba a su altura.
Tamayoimatge lleva desde 2010 fotografiando bodas, comuniones y familias en Onda. Su web era un WordPress 4.9 con PHP 7.2, versiones sin soporte y con riesgo de seguridad, con un diseño de blog de fondo blanco, letra pequeña y botones de compartir. Había 149 entradas que conservar.
El cliente aceptó rediseñarla desde cero. La condición del trabajo: que la fotografía mande, con el menor ruido posible alrededor.
78Accesibilidad en Lighthouse móvil.
6,4 sEl elemento principal de la portada tarda en pintarse, en móvil.
0,673Desplazamiento de diseño en escritorio (CLS): la página se mueve mientras carga.
5 MBLo que pesa la portada en móvil.
Criterio
Decisión 1
Ordenar por lo que ingresa, no por el calendario
La estructura del portfolio la decidió el cliente: Comuniones, Bodas, Navidad, Familias e infantil, Embarazo y newborn, Retrato y tradición y Books. Comuniones es lo que más ingresa, y Bodas sigue siendo el mayor activo de posicionamiento (142 de las 149 entradas del blog). El estudio deja de ser una categoría y se eliminan los vídeos promocionales.
Decisión 2
Tres portadas con la misma fotografía, una elección
Se diseñaron tres portadas estructuralmente distintas, no tres variaciones de color, y el cliente eligió la C. A es editorial y limpia, B va de la luz de la tarde al marrón de la noche, y C es un claroscuro casi negro.
B · Luz de tarde
Un fondo que avanza de crema a marrón de noche, sin marcos de foto, con una tira de fotografías.
C · Claroscuro
Elegida por el cliente
Fondo casi negro y fotografías ordenadas de la más oscura a la más clara. El titular es el nombre de cada categoría.
Decisión 3
Abrir con Comuniones, y probar tres maneras de hacerlo
La portada C abría con Bodas. Se cambió a Comuniones, lo que más ingresa, y se probaron tres aperturas: foto a sangre con color apagado y viñeta, foto virada a sepia con el titular arriba, y una ventana por la que la foto entra desde el negro. Se eligió la primera.
1a · Viñeta
Elegida
1b · Viraje
1c · Ventana
Decisión 4
El archivo de bodas: tres ideas, una estantería
El archivo reúne los reportajes de bodas de 2011 a 2025. Se plantearon tres estructuras: un índice (una lista por año), una estantería (una fila de portadas por año) y un relato (una página por reportaje). Se eligió la estantería, que permite recorrer 15 años de un vistazo. En el entorno de pruebas está pendiente de construir.
Y después, los detalles
Lo que hace que la fotografía mande
Cinco decisiones de detalle, con su razón.
Un titular con transparencia uniforme
Se probó un relleno translúcido con contorno sólido en la palabra «Comuniones» y se descartó porque se veía mal. El titular pasó a una transparencia uniforme sobre toda la palabra, con una sombra suave detrás.
Se descartó el contorno sólido
El brillo decide el orden de las fotos
Las fotografías se ordenan de la más oscura a la más clara, midiendo su brillo de 0 a 255: Navidad está entre las más oscuras (92 a 106) y la comunión de estudio es la más clara (202), por eso cierra la serie.
Brillo medio de 0 a 255
La marca, en una palabra
«Tamayoimatge», en una palabra, confirmada por el cliente el 08/10 y aplicada en el título, la cabecera, el pie, la portada y los metadatos.
Una palabra, un solo nombre
Hablar como habla el cliente
Trato de «vosotros» en toda la web, porque es como escribe el cliente, y el texto de «Sobre nosotros» es literalmente el suyo.
Vosotros
Sin numeración decorativa
Se quitó toda numeración decorativa (01, 02, 03...) y se fijó como regla del sitio: la fotografía y los nombres de categoría ya ordenan la página.
Regla de estilo
Resultado
Antes y después
La web de hoy frente al rediseño
Capturas del 23/10/2026: a la izquierda, la web actual; a la derecha, el rediseño en el entorno de pruebas.
Portada
Bodas
Nosotros
Página 404
En el móvil
La misma jerarquía en 390 px
Primera pantalla de la portada y de Nosotros, en la web actual y en el rediseño.
Portada
Nosotros
Sistema
Casi monocroma
Una noche, un hueso y un tono cálido
Fondo casi negro y texto en hueso, con un tono cálido para los secundarios. Dos familias tipográficas: Bodoni Moda para los titulares y Jost para el texto, con pocos tamaños y saltos grandes. Los filetes marrones son solo decorativos: no transmiten información.
| Muestra | Combinación | Contraste | Para texto |
|---|---|---|---|
| Texto sobre noche #110E0C | |||
| Hueso (texto principal) | 15,81:1 | ✓ Apta | |
| Tono cálido (secundario) | 9,49:1 | ✓ Apta | |
| Apagado (etiquetas) | 6,23:1 | ✓ Apta | |
| Solo decorativo | |||
| Filetes y separadores | 1,68:1 | ✕ No apta | |
| Categoría | Web actual | Rediseño |
|---|---|---|
| Rendimiento | 63 | 99 |
| Accesibilidad | 78 | 100 |
| Buenas prácticas | 92 | 100 |
| Elemento principal de la portada (LCP) | 6,4 s | 2,1 s |
| Desplazamiento de diseño (CLS) | 0,186 | 0 |
| Peso de la portada | 5 MB | 524 KB |
| Categoría | Web actual | Rediseño |
|---|---|---|
| Rendimiento | 59 | 100 |
| Accesibilidad | 78 | 100 |
| Buenas prácticas | 92 | 100 |
| Elemento principal de la portada (LCP) | 2,6 s | 0,6 s |
| Desplazamiento de diseño (CLS) | 0,673 | 0 |
El entorno de pruebas todavía no es público: las cifras del rediseño se repetirán cuando pase a producción. SEO no es comparable, porque el entorno de pruebas va con noindex. Medido con Lighthouse en laboratorio. Las páginas de Archivo de bodas y Contacto todavía no están construidas en el entorno de pruebas.
Cuéntanos tu proyecto
¿Tu marca tiene un código así de ordenado? Te contamos cómo lo haríamos con la tuya: qué se queda, qué se mide y qué se decide contigo.