Rediseño de mi propia web: de oscura y genérica a clara y que vende
Mi web funcionaba, pero no convencía. La rehíce entera sin perder lo que ya tenía en Google, para que quien entre entienda en segundos qué gana trabajando conmigo.
El punto de partida: una web que funcionaba, pero no vendía
La web llevaba tiempo publicada, aparecía en Google y recibía visitas. El problema era otro: se parecía a la de cualquier freelance. Fondo oscuro, el azul típico de plantilla, titulares en mayúsculas y un mensaje de «web y SEO» que no decía qué ganaba el cliente. Quien entraba no encontraba un motivo para escribirme a mí y no a otro.
Así se veía antes del cambio, en el ordenador y en el móvil.
Lo que le pasa a muchas webs (y le pasaba a la mía)
Un diseño oscuro y genérico, igual al de cientos de webs hechas con plantilla.
Una imagen propia, clara y reconocible: marino, teja y tarjetas con borde marcado.
Titulares que hablaban de mí («diseño web y SEO») y no de lo que gana el cliente.
Titulares que dicen lo que consigue el cliente: más clientes y saber de dónde vienen.
Precios en bloques iguales, difíciles de comparar.
Precios en pestañas: eliges el plan y ves de un vistazo qué incluye y qué no.
Servicios explicados con mucho texto y ningún trabajo real cerca.
Cada servicio con trabajos reales al lado de lo que explica.
En el móvil, botones y bloques que se amontonaban.
En el móvil, un titular corto, un botón principal y todo cabe en la pantalla.
El reto
Cambiar toda la imagen sin romper nada de lo que ya funcionaba.
- Páginas
- 70, entre servicios, sectores y zonas
- Sin perder
- Las posiciones en Google y los datos estructurados
- Herramienta
- WordPress con Divi, todo editable
- Prioridad
- El móvil, desde donde llega la mayoría
- Red de seguridad
- Copia completa y la web antigua guardada
- Sin cierres
- La web siguió abierta durante todo el cambio
Qué hice
Una identidad propia, no una plantilla
Paleta clara con marino y teja, títulos en Clash Display y textos en Inter. Tarjetas con borde marcado y sombra sólida, que se reconocen de un vistazo.
Colores cambiados dentro de Divi
Las 68 páginas se migraron con un script que entiende cada contexto, guardando antes el original. Todo sigue editable desde el constructor y no hay destellos del diseño viejo al cargar.
Movimiento que se nota, sin frenar el móvil
Ocho efectos de entrada distintos para los títulos y animaciones en las tarjetas, hechos con CSS para que vayan fluidos aunque el móvil esté cargando otras cosas.
Precios que se entienden
Los precios pasaron a pestañas en 34 páginas: eliges el plan y ves de un vistazo qué incluye y qué no, en ordenador y en móvil.
Un mensaje claro y planes todo incluido
Home reescrita y una página nueva de planes todo incluido, con una demo navegable del panel que ve cada cliente.
La web antigua, guardada
Antes de tocar nada: copia de seguridad, una copia navegable en un subdominio y capturas de todas las páginas. Es la que ves en el antes y después.
Antes y después
Arrastra la línea para comparar. A la izquierda, la web antigua; a la derecha, la nueva.
La portada
Del titular genérico sobre fondo oscuro a un mensaje claro sobre lo que gana el cliente, con dos botones y los proyectos reales a la vista.
Página de un servicio
Cada servicio pasa a dos columnas: qué hago a la izquierda y el trabajo real a la derecha.
Los precios
De tres columnas iguales, difíciles de comparar, a pestañas: eliges el plan y ves qué incluye.
SEO local
El visual de Google Maps se queda, pero ahora acompaña al texto en lugar de taparlo.
En el móvil
La portada: titular corto y un botón principal.
Un servicio: el mensaje primero, sin bloques amontonados.
Decisiones de diseño y por qué
Claro en vez de oscuro
Un fondo claro se lee mejor y transmite cercanía. El color se reserva para lo que importa: los botones y los avisos.
Dos tipografías con carácter
Clash Display en los títulos, que se reconoce de lejos, e Inter en los textos, que se lee bien en cualquier pantalla.
Tarjetas con borde y sombra sólida
Separan cada idea y se reconocen de un vistazo. Dan a la web un estilo propio que no sale de ninguna plantilla.
Precios que se comparan solos
Con pestañas, el cliente elige el plan y ve qué incluye y qué no, sin hacer cuentas.
Movimiento que acompaña
Las animaciones están hechas con CSS para que vayan fluidas en un móvil normal, y nunca esconden el contenido.
Lo antiguo, guardado
La web anterior sigue en una copia privada. Sirve para comparar y para volver atrás si algo fallara.
Cómo lo hice sin romper nada
Copia y web de pruebas
Copia completa y una versión privada de la web para probar sin tocar la real.
Opciones en pantalla
Varias propuestas de color y tipografía, comparadas sobre la web antes de decidir.
Cambio página a página
Un script aplicó el diseño nuevo a cada página, guardando antes el original.
Revisión completa
Las 70 páginas revisadas en ordenador y en móvil, con capturas de cada una.
Rápida en el móvil
Fuentes en el propio servidor, menos código y las etiquetas de Google unificadas.
Rápida también en el móvil
Google PageSpeed puntúa de 0 a 100 lo rápido que carga una página en un móvil normal.
Portada en el móvil, medida con Google PageSpeed. La nota varía un poco de una medición a otra.
Cómo ha quedado
Algunas de las páginas nuevas. Pulsa cualquiera para verla en grande.
Desliza para ver más
Desliza para ver más
Qué significa para tu negocio
Si tu web funciona pero no te trae clientes, no siempre hay que empezar de cero. Se puede cambiar la imagen y el mensaje manteniendo lo que ya tienes en Google, con una copia de todo por si hay que volver atrás.
¿Tu web también necesita un cambio?
Cuéntame cómo es ahora y te digo qué cambiaría, sin compromiso.