Diseño a medida · Portfolio de fotografía · WordPress

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 (Castellón). Su web era un blog con WordPress 4.9 y PHP 7.2, versiones sin soporte y con riesgo de seguridad. La rehíce desde cero con una condición: que la fotografía mande.

Diseño a medida
WordPress + Breakdance
Portfolio de fotografía
Panel de edición para el cliente
Rendimiento

99
Rendimiento en móvil, antes 63
2,1 s
En pintar lo principal de la portada, en móvil, antes 6,4 s
524 KB
Peso de la portada en móvil, antes 5 MB
142
De las 149 entradas del blog son de bodas: el activo de posicionamiento a conservar

El cliente

Un estudio de fotografía de Onda con una web de blog de 2010

Portada del rediseño de Tamayoimatge en el entorno de pruebas: fondo casi negro, titular «Comuniones» en cursiva y menú discreto, con su fotografía — La portada del rediseño, en el entorno de pruebas: fondo casi negro y la fotografía a sangre.

Miguel García Tamayo fotografía bodas, comuniones y familias en Onda desde 2010. Su trabajo es lo que vende el estudio, y la web tenía que ser el sitio donde mejor se viera.

No lo era. La web era un WordPress 4.9 con PHP 7.2, versiones sin soporte desde hace años y con ataques automáticos sostenidos contra el servidor, con un diseño de blog de fondo blanco, letra pequeña y botones de compartir debajo de cada foto. Y tenía 149 entradas que conservar.

El reto

Dejar que la fotografía mande, con el menor ruido posible alrededor

El cliente aceptó rediseñarla desde cero, sin conservar nada del diseño ni del WordPress anteriores. La dirección que acordamos fue «high fashion»: centrada en imágenes y tipografía, con poco texto.

Una base técnica sin soporte
WordPress 4.9.29 y PHP 7.2, ambos fuera de soporte, con un servidor de un solo procesador que recibía intentos de acceso automáticos de forma constante. Seguir parcheando no era una salida.
Ordenar por lo que ingresa, no por el calendario
Comuniones es lo que más ingresa al estudio, pero Bodas sigue siendo el mayor activo de posicionamiento: 142 de las 149 entradas del blog. La estructura tenía que servir a las dos cosas.
149 entradas que no se podían perder
El blog es casi todo bodas (82), preboda (35) y postboda (25), y es lo que Google conoce del estudio. Había que migrarlo sin romperlo.
Un cliente que edita sin tocar el maquetador
Miguel no es perfil técnico. Las galerías tenían que poder cambiarlas él solo: el orden de las fotos, añadir y quitar, la foto de apertura y la frase.

Lo que se desarrolló

Un portfolio que pasa de la luz a la sombra, con un panel para editarlo

Construí el sitio nuevo en WordPress con Breakdance, en un servidor nuevo, y lo diseñé para que la fotografía ocupe casi todo.

Portada del rediseño de Tamayoimatge — La portada: fondo casi negro, fotografías ordenadas de la más oscura a la más clara y el nombre de cada categoría como titular.

Portada tipo portfolio
Elegí entre tres portadas con la misma fotografía. Gana la de claroscuro: fondo casi negro y fotografías ordenadas de la más oscura a la más clara.
Siete categorías en el orden de lo que ingresa
Comuniones, Bodas, Navidad, Familias e infantil, Embarazo y newborn, Retrato y tradición y Books. El estudio deja de ser una categoría y se eliminan los vídeos promocionales.
Panel «Portfolio» para el cliente
Miguel edita las galerías desde un panel propio: orden de las fotos, añadir y quitar, foto de apertura, frase y cierre. El texto alternativo sale de la biblioteca de medios y avisa, sin bloquear, si es malo.
Reservas de sesiones por campaña
Un sistema de reservas para las sesiones de Navidad, que se reutiliza para otras campañas, con correos de verificación, confirmación y aviso al estudio.
Migración del blog
Las 149 entradas pasan al sitio nuevo, y la página de vídeos promocionales, que el cliente decidió eliminar, se redirige con un 301.
Una base técnica actual
WordPress al día en un servidor nuevo, en lugar de WordPress 4.9 y PHP 7.2, y un diseño medido para cargar rápido en el móvil.

Resultados

Una portada de 5 MB que pasa a 524 KB, medida en el entorno de pruebas

El cambio más directo está en la portada en móvil: de 63 sobre 100 en rendimiento, 6,4 segundos hasta pintar lo principal y 5 MB de peso, a 99, 2,1 segundos y 524 KB. La web anterior, además, se movía mientras cargaba (0,673 de desplazamiento de diseño en escritorio); en el rediseño es 0.

Son mediciones de laboratorio del 23/10/2026 sobre el entorno de pruebas, que todavía no es público. El cliente ha aceptado el rediseño y el sitio está pendiente de pasar a su dominio.

Portada del rediseño de Tamayoimatge en móvil — La versión móvil de la portada y de Nosotros, en el entorno de pruebas.

Lo que todavía no puedo contar es el efecto en posicionamiento: el entorno de pruebas va con noindex, y las 149 entradas, 142 de ellas de bodas, son el activo que hay que vigilar tras la migración. Tampoco están todas las páginas: el archivo de bodas y la de contacto estaban sin construir en esa fecha.

Diseño

Un portfolio que pasa de la luz a la sombra

Tamayoimatge tenía una fotografía muy buena en una web de blog de 2010. La rediseñé desde cero con una condición: que la fotografía mande, con el menor ruido posible alrededor. El cliente aceptó el rediseño, que está en el entorno de pruebas pendiente de pasar a su dominio, y las cifras son de ese entorno.

99: rendimiento en Lighthouse móvil del rediseño; la web actual saca 63
2,1 s: en pintar el elemento principal de la portada en móvil; eran 6,4 s
524 KB: pesa la portada en móvil; eran 5 MB
3: portadas con la misma fotografía; el cliente eligió la C

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.

La web actual, medida el 23/10/2026, sacaba 78 de accesibilidad en Lighthouse móvil, tardaba 6,4 s en pintar el elemento principal de la portada, tenía un desplazamiento de diseño de 0,673 en escritorio (la página se movía mientras cargaba) y su portada pesaba 5 MB en móvil.

Portada de la web actual de Tamayoimatge: fondo blanco, menú pequeño y una fotografía con botones de compartir debajo

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.

Tres portadas con la misma fotografía, una elección

Diseñé tres portadas estructuralmente distintas, no tres variaciones de color, y el cliente eligió la C. La A es editorial y limpia, la B va de la luz de la tarde al marrón de la noche y la C es un claroscuro casi negro.

Portada A: fondo claro, titular grande «Lo que no queréis olvidar» y un recuadro para una foto vertical — A · EditorialNo elegidaTitular grande y una fotografía vertical a un lado, sobre fondo claro. La construí primero como portada real.

Portada B: fondo crema, titular largo en dos líneas y una tira de fotografías debajo — B · Luz de tardeNo elegidaUn fondo que avanza de crema a marrón de noche, sin marcos de foto, con una tira de fotografías.

Portada C: fondo casi negro, una niña con sombrilla azul a sangre y el titular «Comuniones» en cursiva grande — C · ClaroscuroElegida por el clienteFondo 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.

Abrir con Comuniones, y probar tres maneras de hacerlo

La portada C abría con Bodas. La cambié a Comuniones, lo que más ingresa, y probé tres aperturas: fotografía a sangre con color apagado y viñeta, fotografía virada a sepia con el titular arriba, y una ventana por la que la fotografía entra desde el negro. Se eligió la primera.

Apertura 1a: fotografía a sangre con viñeta y titular «Comuniones» abajo — 1a · ViñetaElegidaFotografía a sangre con color apagado y viñeta.

Apertura 1b: fotografía virada a sepia con el titular «Comuniones» arriba — 1b · VirajeNo elegidaFotografía virada a sepia con el titular arriba.

Apertura 1c: texto a la izquierda y la fotografía entrando desde el negro a la derecha — 1c · VentanaNo elegidaUna ventana por la que la fotografía entra desde el negro.

El archivo de bodas: tres ideas, una estantería

El archivo reúne los reportajes de bodas de 2011 a 2025. Planteé 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.

Antes y después

Capturas del 23/10/2026: a la izquierda, la web actual; a la derecha, el rediseño en el entorno de pruebas.

Portada

Bodas

Página de fotos de boda de la web actual de Tamayoimatge: texto largo sobre fondo blanco — La web actual.

Nosotros

Página 404

Portada en el móvil (390 px)

Portada de la web actual de Tamayoimatge en móvil

Nosotros en el móvil (390 px)

Página Nosotros de la web actual en móvil

Lo que dicen las cifras

Lighthouse, 23/10/2026: web actual → rediseño en el entorno de pruebas
Página	Móvil	Escritorio
Rendimiento	anterior 63 actual 99	anterior 59 actual 100
Accesibilidad	anterior 78 actual 100	anterior 78 actual 100
Buenas prácticas	anterior 92 actual 100	anterior 92 actual 100
Elemento principal de la portada (LCP)	anterior 6,4 s actual 2,1 s	anterior 2,6 s actual 0,6 s
Desplazamiento de diseño (CLS)	anterior 0,186 actual 0	anterior 0,673 actual 0
Peso de la portada	anterior 5 MB actual 524 KB	sin dato

Medido con Lighthouse en laboratorio el 23/10/2026. El rediseño está en el entorno de pruebas, que todavía no es público: repetiré las cifras cuando pase a su dominio. SEO no es comparable, porque el entorno de pruebas va con noindex. «Sin dato»: no se midió en esa casilla.

Las páginas de Archivo de bodas y Contacto todavía no estaban construidas en el entorno de pruebas en esa fecha.

Más detalle

Cinco decisiones de detalle

01Un titular con transparencia uniforme

Probé un relleno translúcido con contorno sólido en la palabra «Comuniones» y lo descarté porque se veía mal. El titular pasó a una transparencia uniforme sobre toda la palabra, con una sombra suave detrás.

02El brillo decide el orden de las fotos

Ordené las fotografías 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.

03La 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.

04Hablar 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.

05Sin numeración decorativa

Quité toda numeración decorativa (01, 02, 03...) y lo fijé como regla del sitio: la fotografía y los nombres de categoría ya ordenan la página.

Paleta, tipografías y contrastes

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.

Ver la paleta y los contrastes

Contrastes sobre el fondo noche (#110E0C), calculados con WCAG 2.1:

Texto: hueso (texto principal) 15,81:1; tono cálido (secundario) 9,49:1; apagado (etiquetas) 6,23:1.

Solo decorativo: los filetes y separadores dan 1,68:1 y no sirven como texto, por eso nunca llevan información.

¿Tu portfolio está a la altura de tu trabajo?

Una web de fotografía tiene que enseñar primero la fotografía. Si tu portfolio vive en una web vieja, lenta o que ya no se puede actualizar, hablemos.

Hablemos del proyecto Ver el servicio de diseño y rediseño web