A · Sobre el dibujo
Elegida, en mezcla con la C
Un dibujo de línea de Onda como hilo de la página, con tarjetas de arco que lo atraviesan.
ContactoCaso de estudio
GuiaOnda
Cómo rediseñar una guía local de 454 negocios en tres idiomas partiendo de una condición: cambiar la cara sin tocar lo que ya posiciona.
- Cliente
- Proyecto propio del estudio: guía independiente y no oficial de Onda (Castellón), sin ánimo de lucro
- Qué hicimos
- Dirección visual y sistema de diez tipos de plantilla, en español, valenciano e inglés
- Año
- 2026
- Estado
- Rediseño terminado en una rama de trabajo, pendiente de publicar
691páginas en tres idiomas (español, valenciano e inglés) en el rediseño.
10tipos de plantilla diseñados, desde la ficha de lugar hasta el directorio.
6siluetas con significado para reconocer de qué trata cada página.
3direcciones visuales; se eligió una mezcla de dos.
Punto de partida
El encargo
Una guía correcta, pero cuadriculada y con los datos mal puestos.
GuiaOnda reúne unas 40 fichas de lugares y 454 negocios de Onda, en tres idiomas, hecha por una sola persona de la zona y sin patrocinios. La usan visitantes de un día, casi siempre desde el móvil y ya en la calle, y vecinos que buscan un comercio.
La web funcionaba, pero tenía tres defectos que se fijaron antes de empezar: demasiado cuadriculada y perfecta, con barras laterales y cajas de datos (horarios, cómo llegar, precios) mal estructuradas y apiladas al final en el móvil, y fichas de negocio poco atractivas.
El encargo: carácter propio, ritmo irregular y que se note que lo ha hecho alguien de Onda, sin perder el posicionamiento ganado.
92Rendimiento de la portada actual en Lighthouse móvil, medido con compresión como en producción.
90Accesibilidad de una ficha de negocio actual.
94Accesibilidad del directorio actual.
279 de 483Fichas de negocio sin fotos al empezar el rediseño (13/10/2026).
Criterio
Decisión 1
Cambiar la cara, no el contenido
El rediseño es solo de la capa visual. Los textos, la jerarquía de cabeceras, los enlaces, las direcciones, el marcado para buscadores y el orden del contenido son intocables, y el logo se conserva. Antes de empezar se fotografió el posicionamiento: 720 páginas, los datos de Search Console por dirección y Lighthouse en móvil. Ese es el listón contra el que se mide cada plantilla portada.
Decisión 2
Tres direcciones, una mezcla
Se diseñaron tres direcciones estructuralmente distintas. La A parte del dibujo de línea del pueblo, la B del paño de azulejo en bloques de color y la C de las torres, las almenas y la tipografía condensada en versales. Se descartó la B y se eligió una mezcla de la A y la C: el mapa dibujado de la primera con el color sólido y las torres de la segunda.
B · Paño de azulejo
Descartada
Bloques de color cobalto, ocre y verde sobre una rejilla de azulejo.
C · Las 300 torres
Elegida, en mezcla con la A
Versales condensadas, color sólido y tarjetas con forma de torres y almenas.
Decisión 3
Seis siluetas con significado
Para que una persona reconozca de qué trata una página sin leerla, el borde de cada tarjeta lleva una silueta con un color fijo: las almenas son el castillo y los monumentos, el arco apuntado el casco histórico, el azulejo la cerámica y los museos, la sierra la naturaleza, la cúpula el patrimonio religioso y el escalón el deporte.
Las seis formas son un canon: se usan siempre igual, y una página puede indicar su silueta de manera explícita.
Decisión 4
Los datos prácticos, a la vista y a mano
Horarios, precios y cómo llegar eran la parte menos usable de la web anterior. En la ficha de un lugar pasan a un panel, «Planifica tu visita», junto al texto. En el diseño de la ficha de un negocio, el horario resalta el día de hoy, calculado en hora de Madrid.
Y después, los detalles
Lo que hace que un sistema funcione de verdad
Cinco decisiones de detalle, con su razón.
Un hero que no depende de la foto
Más de la mitad de las fichas de negocio no tenía fotografías al empezar. La plantilla se diseñó para no depender de ellas: la ficha sin foto tiene un hero propio y la tarjeta del directorio sigue siendo reconocible.
279 de 483 fichas sin foto
El portal de rastrillo, solo donde se capta
Un remate animado (un rastrillo que se levanta y una luz en las saeteras) se usa únicamente en los cierres que invitan a un negocio a aparecer en la guía. No va en los muros de las categorías de lectura.
Entrada 800 ms, salida 300 ms; con movimiento reducido no se mueve
Sin numeración decorativa ni aro azul
Se descartaron los numerales decorativos (01, 02, 03...) y el aro azul de foco global. El foco del teclado sigue siendo visible, con otro aspecto.
Foco visible, sin aro azul
Las valoraciones, con coma
Las valoraciones se escriben con coma, como en español (4,3), y el contador de «Ver todos» se calcula del directorio, no se escribe a mano.
Decimales con coma
El logo, intacto
El logo se conserva tal cual, con su granate. Pasa a ser el color de acento de la página, junto a una paleta de tierra: tinta, crema, arena y cuatro colores sólidos para las siluetas.
Granate #9A3432 del logo
Plantillas
Diez tipos de plantilla
Un sistema, no una portada
El diseño no se quedó en la portada: se diseñaron diez tipos de plantilla, entre ellos la ficha de lugar, la ficha de negocio, la ruta de senderismo, la categoría, el directorio, el Plan Onda, los listados editoriales y el alojamiento. Seis de ellas, tal como salieron del diseño.
Ficha de lugar
Ficha de negocio
Ruta de senderismo
Categoría
Directorio
Plan Onda
Resultado
Antes y después
La web de hoy frente al rediseño
Capturas del 24/10/2026: a la izquierda, la web publicada; a la derecha, el rediseño terminado, servido en local desde su rama de trabajo (todavía sin publicar).
Portada
Ficha de lugar
Directorio
En el móvil
La misma jerarquía en 390 px
Primera pantalla de la portada y de la ficha de un lugar, en la web publicada y en el rediseño.
Portada
Ficha de lugar
Sistema
Tierra y piedra
Una paleta de tierra, tres tipografías y el granate del logo
Tinta casi negra, crema y arena como base, con cuatro colores sólidos (granate, terracota, cobalto y verde) para las siluetas y el granate del logo como acento. Titulares en Big Shoulders Display (versales condensadas), texto en Figtree y un toque de DM Serif Display en cursiva. Las fuentes están autoalojadas.
| Muestra | Combinación | Contraste | Para texto |
|---|---|---|---|
| Texto sobre fondos claros | |||
| Tinta sobre crema | 14,39:1 | ✓ Apta | |
| Tinta sobre arena | 12,13:1 | ✓ Apta | |
| Tinta suave sobre crema | 8,77:1 | ✓ Apta | |
| Texto sobre fondos de color | |||
| Crema sobre granate | 6,20:1 | ✓ Apta | |
| Crema sobre cobalto | 7,35:1 | ✓ Apta | |
| Crema sobre verde | 8,77:1 | ✓ Apta | |
| Crema sobre terracota | 4,76:1 | ✓ Apta | |
| Crema sobre tinta | 14,39:1 | ✓ Apta | |
| Categoría | Web publicada | Rediseño |
|---|---|---|
| Portada, rendimiento | 92 | 91 |
| Portada, accesibilidad | 100 | 100 |
| Ficha de lugar, rendimiento | 93 | 87 |
| Directorio, rendimiento | 85 | 89 |
| Directorio, accesibilidad | 94 | 97 |
| Categoría | Web publicada | Rediseño |
|---|---|---|
| Portada, rendimiento | 100 | 100 |
| Portada, peso | 1,1 MB | 8,1 MB |
| Directorio, accesibilidad | 94 | 100 |
| Directorio, peso | 5,2 MB | 3,0 MB |
Medido en local con el mismo servidor y compresión para las dos versiones, no en producción. El rediseño no mejora la velocidad en todas las páginas: la ficha de lugar baja de 93 a 87 en móvil y la portada de escritorio pesa 8 MB por el vídeo del hero, que se conserva por decisión de diseño.
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.