The Grid: marca y sitio web en Webflow

Caso de estudio2025

Identidad visual y sitio web para una consultora de gemelos digitales para la construcción.

Cliente: The Grid
Industria: Construcción · Tecnología de gemelos digitales · B2B
Qué hicimos: Identidad de marca
Diseño UI/UX
Desarrollo web
SEO

El sitio en vivo, de la portada en video al equipo.

(01) El reto

Crear una identidad moderna, clara y cercana que posicione a The Grid como líder en la digitalización del sector de la construcción, uniendo el mundo físico y el digital.

La marca debe transmitir precisión, innovación y confianza, en línea con su manifiesto (los datos transforman el entorno construido), y funcionar en la web, las presentaciones, las redes y los documentos técnicos. Palabras clave: BIM, gemelos digitales, automatización de flujos de trabajo, IoT, datos en tiempo real, colaboración entre múltiples actores, investigación aplicada.

Ver sitio web

(02) Enfoque

Construimos un sistema de marca modular (tipografías Centra No.2 y Neue Haas Grotesk, azul eléctrico con acentos en menta, negro, blanco y gris claro), con reglas claras de área de protección y variantes del logo (logotipo horizontal, isotipo e imagotipo) para darle flexibilidad.

Llevamos la identidad a un sitio web rápido e intuitivo (navegación clara, imágenes a gran escala, microinteracciones sutiles, accesibilidad AA) que refuerza la conexión con las soluciones digitales para la construcción.

Seis servicios en una cuadrícula limpia de tarjetas

Herramientas: la plataforma de gemelo digital y O-SAM — Cada herramienta con su captura, un “Learn more” y una forma de probarla.

Proyecto: gemelo digital de una prueba de carga en un puente de alta velocidad — Los proyectos contados como casos, cada uno con su página.

(03) Lo que hacemos

01Estrategia de marca y mensajes claveposicionamiento, promesa y un tono profesional y cercano.
02Guías de marcareglas de uso, qué hacer y qué no, áreas de protección, escalas.
03Sistema de identidadlogotipo e imagotipo/isotipo en positivo, negativo y monocromo.
04Sistema de colorazul eléctrico como principal con menta, negro, blanco y gris claro; contraste AA documentado.
05TipografíaCentra No.2 y Neue Haas Grotesk; jerarquía, escalas y guía de espaciado.
06Sistema de layout y componentes de UIgrilla responsive, botones, tarjetas, navegación, estados y animación sutil.
07Sitio web (Webflow)estructura clara; páginas clave (inicio, servicios, casos, contacto); CMS para casos de estudio y servicios.
08Accesibilidad y rendimientocriterios AA y buenas prácticas; metas de LCP y estabilidad visual.
09SEO técnico on-pagemetadatos, encabezados, schema básico, sitemap y robots; guía para los textos.
10Analítica y mediciónGA4 y Google Search Console con eventos y objetivos clave.