Ir al contenido

Rediseño de un sitio web de 13 años: cómo renovarlo todo sin romper nada

28 de septiembre de 2026

Muchas empresas tienen un sitio web que en su día fue su orgullo y que hoy parece una postal de la década anterior. Rehacerlo resulta arriesgado: hay años de contenido, posiciones de búsqueda conseguidas con esfuerzo, hábitos de los usuarios y código que nadie quiere tocar. Acabamos de terminar exactamente ese tipo de proyecto —un rediseño completo de la comunidad fotográfica SuperSnimki.ru— y le contamos cómo fue.

SuperSnimki tras el rediseño

Dónde empezó todo

Lanzamos SuperSnimki en 2013. Desde entonces, el sitio ha acumulado más de 200,000 fotos de más de 4,700 fotógrafos, además de miles de artículos e hilos del foro. La plataforma funcionaba de forma fiable, pero la interfaz se había quedado anclada en su época:

los estilos se compilaban en el servidor con una herramienta desfasada;
los iconos estaban repartidos en tres fuentes de iconos distintas;
el archivo JavaScript principal pesaba 674 KB, y aproximadamente la mitad eran bibliotecas que llevaban años sin usarse;
no había modo oscuro ni una navegación móvil cómoda;
algunos problemas eran invisibles: el feed RSS llevaba roto desde finales de 2024, y las fotos eliminadas devolvían una redirección en lugar de un 404 correcto.

La decisión clave: no reescribir la plataforma

La vía más costosa y arriesgada es «reescribir todo sobre una pila nueva». Dijimos que no. El motor en Perl, las bases de datos MongoDB y MySQL, la estructura de las URL y los datos se mantuvieron exactamente como estaban. Cambiamos lo que ven los usuarios y todo aquello que impedía que el sitio fuera rápido.

Por eso el rediseño nunca se convirtió en una migración: ni un solo enlace se rompió, las posiciones en buscadores no sufrieron, y los usuarios simplemente abrieron un día un sitio conocido que se había transformado.

Antes y después: el foro

Un sistema de diseño sobre código heredado

Primero definimos el sistema de diseño en forma de tokens: colores para los temas claro y oscuro, una escala tipográfica, espaciado en una cuadrícula de 4 px, radios de esquina y duraciones de animación. Las 183 plantillas del sitio se trasladaron a estos tokens, y por eso el modo oscuro funcionó en todas partes a la vez, y no solo en la página de inicio.

Un pequeño truco ahorró mucho tiempo: los 130 iconos SVG nuevos recibieron los mismos nombres de clase que los glifos antiguos de la fuente de iconos. No tuvimos que reescribir ni una sola plantilla para los iconos: simplemente empezaron a verse nuevos.

Antes y después: la revista

Una experiencia móvil que parece una aplicación

Hoy en día, la mayor parte del público navega por las fotos desde el teléfono. Por eso añadimos una barra de navegación inferior con un botón de subida en el centro, un menú desplegable y un nuevo visor a pantalla completa con zoom por pellizco, deslizamiento y doble toque. El sitio se puede añadir a la pantalla de inicio, igual que una aplicación.

Versión móvil

Velocidad: eliminar más de lo que se añade

Los rediseños suelen hacer los sitios más pesados. El nuestro hizo lo contrario:

el paquete JS principal se redujo en un 68%: de 674 KB a 213 KB;
se eliminaron 51 bibliotecas heredadas, mientras que el editor, los mapas y los gráficos ahora solo se cargan cuando hacen falta;
los teléfonos reciben fotos de tamaño medio, y mientras se carga una imagen, su color medio ocupa su lugar;
la búsqueda de artículos, que antes podía tardar hasta 30 segundos con palabras comunes, ahora se ejecuta como una única consulta rápida.

El resultado: la base de código tiene 27,000 líneas menos, aunque ha ganado funciones.

Nuevos motivos para volver

Un buen rediseño no es solo cuestión de apariencia. Junto con él añadimos lo que hace que la gente vuelva:

una revista moderada con un panel para autores y una lectura cómoda, con índice y barra de progreso;
un catálogo de equipo fotográfico vinculado a fotos reales mediante EXIF: se puede ver con qué equipo fotografían de verdad los fotógrafos del sitio;
Año en revisión: una página con las estadísticas y las mejores fotos de cada fotógrafo, que invita a compartirla;
herramientas de IA: análisis de fotos, traducción de artículos, fichas de producto rellenadas automáticamente en la tienda e importación de nuevas cámaras.

Antes y después: el catálogo de equipo fotográfico

Seguridad y SEO durante el proceso

Al revisar cada plantilla, también se detecta lo que había pasado inadvertido durante años. Cerramos vulnerabilidades XSS en la búsqueda, los comentarios y el foro, protegimos las eliminaciones con tokens CSRF, volvimos a poner 404 correctos, arreglamos el RSS, ampliamos el marcado JSON-LD y añadimos imágenes al sitemap.

Modo oscuro

Qué puede aprovechar su proyecto

1.
Un rediseño no es motivo para reescribirlo todo. Si la plataforma funciona, renueve la interfaz sobre ella: será más rápido, más económico y sin riesgo para su SEO.
2.
Empiece por un sistema de diseño. Los tokens hacen que el modo oscuro, un estilo coherente y los cambios futuros resulten casi gratuitos.
3.
Elimine sin miedo. Las bibliotecas antiguas y el código sin uso son la forma más sencilla de acelerar un sitio.
4.
Aproveche el rediseño como auditoría. Es el mejor momento para encontrar vulnerabilidades y funciones que se han estropeado sin que nadie lo notara.
5.
Dé a la gente motivos para volver. Una imagen nueva capta la atención; las funciones nuevas la mantienen.

El caso de estudio completo, con capturas de pantalla, está en nuestro portafolio, y puede ver el sitio actualizado en supersnimki.ru.

Si su sitio necesita renovarse, pero tocarlo le da miedo, cuéntenos su proyecto y prepararemos un plan de rediseño en el que no se pierda nada.

Todos los artículos

Auditoría con IA

Auditoría gratuita de su web con IA en 2 minutos

Introduzca su web: nuestra IA comprueba la velocidad, el SEO, las páginas legales suizas, la confianza y la conversión, y le muestra qué corregir primero.

Gratuita y sin compromiso. El informe también llega por correo electrónico.

¿Todavía no tiene web? Responda en su lugar 6 preguntas breves

Lea a continuación