Ángel Ramón y José Antonio, gerentes de traza2, ya sabían cómo trabaja Colorvivo. Habíamos colaborado antes, así que cuando llegaron a la oficina con Alfredo, el diseñador gráfico que les había creado la nueva imagen corporativa para su 16 aniversario, la conversación fue directa: querían que la web reflejara esa nueva identidad y que aprovecharan para renovar el sitio de raiz.
El reto: claridad y proyectos que se ven de un plumazo
La web anterior tenía demasiada información en la portada. Para un estudio de arquitectura eso es un problema: el potencial cliente entra para ver el trabajo, no para leer descripciones. Las directrices del cliente eran sencillas: web limpia, funcional y que el portfolio de proyectos fuera lo primero.
La portada nueva lo resuelve de golpe: imágenes de los trabajos del estudio combinadas con citas del mundo de la arquitectura. Sin banner corporativo, sin texto de presentación genérico. Lo que el visitante quiere ver primero está primero.
El diseño: fondo blanco, tipografía Avant Garde y un naranja que define
La identidad gráfica la había diseñado Alfredo y nosotros la seguimos al milimetro. Estructura boxed con fondo blanco y tipografía oscura para maximizar la legibilidad. La fuente es Avant Garde, y el color de acentuación, un naranja fuerte que aparece en los enlaces y en los CTA. El resultado es limpio y reconocible, coherente con cómo tenía que verse un estudio de arquitectura de este nivel. El diseño emocional bien aplicado hace que la web comunique los valores del cliente antes incluso de que el usuario lea una sola palabra.
El portfolio: grid con filtro AJAX
La sección de proyectos era la más importante para el estudio. Desarrollamos un grid visual donde todos los proyectos aparecen de entrada, y mediante un filtro que funciona con AJAX el usuario puede seleccionar una categoría y ver cómo los elementos se muestran u ocultan al instante, sin recargar la página. No hace falta navegar por subpáginas ni memorizar la estructura del menú: el portfolio es autoexplicativo.
En la página de detalle de cada proyecto, la galería de imágenes se recorre haciendo scroll vertical, que es el gesto más natural para el usuario. La información del proyecto (datos técnicos, superficies, año, categoría) va en un sidebar en la parte izquierda junto a los enlaces de redes sociales, sin interferir con las imágenes. Para una web con tanto contenido visual, tener la arquitectura web bien estructurada es lo que permite navegar sin perderse.
Páginas interiores y sección de estudio
Las páginas de información del estudio aprovechan la imagenía que Alfredo había creado para la nueva identidad. Eso permite decorar las secciones con elegancia sin sobrecargarlas. Destacan la sección de croquis con su propio grid de imágenes y la página de presentación del estudio, que Alfredo diseñó íntegramente y que aterrizamos en WordPress manteniendo cada detalle.
Preguntas frecuentes
¿Qué es TrazA2?
TrazA2 es un estudio de arquitectura con más de 16 años de trayectoria, con sede en la misma localidad que Colorvivo. Este rediseño coincidió con su renovación de imagen corporativa, que diseñó el gráfico Alfredo.
¿Cómo funciona el filtro AJAX del portfolio?
El filtro AJAX permite al usuario seleccionar una categoría del portfolio y ver al instante qué proyectos pertenecen a ella, sin recargar la página. Los elementos que no coinciden con el filtro se ocultan y los que sí aparecen de forma animada.
¿Por qué el scroll vertical en las galerías de proyectos?
El scroll vertical es el gesto más natural tanto en escritorio como en móvil. En un portfolio de arquitectura donde las imágenes son el contenido principal, no tiene sentido obligar al usuario a aprender una navegación especial para ver las fotos.
¿Cómo se integró la nueva imagen corporativa en la web?
El diseñador gráfico Alfredo elaboró la identidad visual completa: tipografía Avant Garde, paleta de color con naranja de acentuación e imagenía para las secciones interiores. Colorvivo aplicó esas directrices directamente en WordPress, respetando cada especificación del manual de marca.
