Caso de estudio2023
Identidad visual y sitio web para una plataforma de cálculo estructural en línea.
- Cliente
- Civilus
- Industria
- Ingeniería civil · Análisis estructural · EdTech / SaaS
- Qué hicimos
- Identidad de marca
- Diseño UI/UX
- Desarrollo web
(01) El reto
Crear una identidad clara y moderna para Civilus, una startup que ofrece herramientas gratuitas en línea para cálculos estructurales, de modo que resulte confiable para estudiantes, docentes e ingenieros profesionales. La marca necesitaba destacarse en un campo técnico sin dejar de ser cercana y amigable.
La identidad tenía que transmitir precisión, innovación y confianza, consolidar a Civilus como la plataforma de referencia para resolver problemas estructurales y funcionar de forma coherente en la web, las presentaciones, las redes sociales y la interfaz del producto.
(02) Enfoque
Construimos un sistema de marca compacto con Adobe Creative Cloud, con un logotipo y un símbolo geométricos inspirados en secciones y vigas estructurales. El lenguaje visual equilibra la precisión técnica con un tono cercano gracias a un set de íconos limpio y una paleta de color acotada.
Para el sitio web diseñamos la interfaz en Figma y la llevamos a un front-end responsive con React, HTML, CSS y JavaScript. De la mano de un desarrollador amigo, usamos GitHub para el control de versiones (ramas, commits, pull requests) y publicamos el sitio en Netlify, con la conexión del dominio y la configuración básica. El resultado es una experiencia rápida y sencilla que lleva a los usuarios directo a las herramientas Cross Section y Beam Solver.
(03) Lo que hacemos
- 01
Estrategia de marca y mensajes clave: definimos a Civilus como un compañero en línea y accesible para los cálculos estructurales, con mensajes centrados en rapidez, confiabilidad y facilidad de uso.
- 02
Guías de marca: reglas de uso del logo, el color y las imágenes para mantener la marca coherente en el sitio web, las presentaciones y las redes sociales.
- 03
Sistema de identidad: logotipo e ícono para el header del sitio, los favicons y los avatares en redes.
- 04
Sistema de color: una paleta técnica pero cercana, con buen contraste para la interfaz, las gráficas y los llamados a la acción.
- 05
Sistema tipográfico: fuentes de Google Fonts elegidas para leerse bien en interfaces con muchos números y en etiquetas pequeñas.
- 06
UI kit: botones, campos, tarjetas, tablas y componentes de layout pensados para reutilizarse en nuevas herramientas y páginas.
- 07
Sitio web: landing, resumen de herramientas y formulario de contacto, diseñados y programados para llevar al usuario de la explicación al cálculo sin fricción.
(04) Impacto
Una marca coherente y un sitio responsive que hacen que las herramientas técnicas de Civilus se sientan cercanas y confiables, y ayudan a estudiantes y profesionales a entender rápido el valor de la plataforma y a empezar a resolver problemas estructurales en línea.
Servicios
Sistema de marca
Guías de marca
UI kit
Diseño web y desarrollo front-end
Publicación en Netlify y configuración del dominio
Herramientas
Adobe Creative Cloud (Illustrator / Photoshop)
Figma
Google Fonts
VS Code
React · HTML · CSS · JavaScript
GitHub (control de versiones)
Netlify (build y hosting)
Entregables
Minimanual de marca (PDF)
Archivos del logo y del ícono (SVG/PNG)
Especificaciones de color y tipografía
Librería de componentes de UI (Figma)
Landing responsive e interfaz de las herramientas
Publicación en Netlify, conexión del dominio y configuración básica
Tiempos
De 6 a 8 semanas, desde la renovación de marca hasta el sitio publicado