Caso
Identidad visual y sitio web para una plataforma de cálculo estructural
- Cliente
- Civilus
- Industria
- Ingeniería civil · Análisis estructural ·
EdTech / SaaS - Qué hicimos
- Identidad
de marca - Diseño UI/UX
- Desarrollo web
- Identidad
(01)
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
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
(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
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
(03) Lo
- 01Estrategia 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. - 02Guí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. - 03Sistema de identidad
logotipo e ícono para el header del sitio, los favicons y los avatares
en redes. - 04Sistema de color
una paleta técnica pero cercana, con buen contraste para la interfaz, las gráficas y los llamados a
la acción. - 05Sistema tipográfico
fuentes de Google Fonts elegidas para leerse bien en interfaces con muchos números y en
etiquetas pequeñas. - 06UI kit
botones, campos, tarjetas, tablas y componentes de layout pensados para reutilizarse en nuevas herramientas
y páginas. - 07Sitio 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
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
¿Tienes un proyecto en mente?
Diseñamos y construimos sitios web, tiendas en línea y sistemas de reservas y pagos, y los mantenemos funcionando mes