--- title: "Civilus | Identidad de marca y sitio web | Mattriz Studio" description: "Civilus: identidad de marca y sitio web en React para una plataforma de cálculo estructural en línea, diseñados y desarrollados por Mattriz Studio." lang: es url: https://mattriz.com/es/project/civilus/ --- > Civilus: identidad de marca y sitio web en React para una plataforma de cálculo estructural en línea, diseñados y desarrollados por Mattriz Studio. Caso de estudio 2023 # Civilus Identidad visual y sitio web para una plataforma de cálculo estructural en línea. [Visitar el sitio](https://civilus.co/) ## En resumen - **Cliente**: Civilus - **Industria**: Ingeniería civil · Análisis estructural · EdTech / SaaS - **Qué hicimos**: Identidad de marca, Diseño UI/UX, Desarrollo web El sitio en vivo: las propiedades de una sección I y luego una viga resuelta con sus diagramas de cortante y momento. 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. [Ver sitio web](https://civilus.co/) ![Logotipo de Civilus - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-223-1080.webp) 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. ![Cross Section Properties con una sección I dibujada a escala](https://mattriz.com/media/projects/civilus/cv-site-cross-1600.webp) ![Propiedades de la sección: área, centroide, inercia, módulos de sección y constante de torsión](https://mattriz.com/media/projects/civilus/cv-site-results-1600.webp) Doce propiedades de una vez, con unidades que se pueden cambiar. ![Beam Solver: datos de la viga, apoyos y diagrama de cuerpo libre](https://mattriz.com/media/projects/civilus/cv-site-beam-1600.webp) ![Diagramas de cortante y momento flector de la viga resuelta](https://mattriz.com/media/projects/civilus/cv-site-diagrams2-1600.webp) De los apoyos y las cargas a los diagramas de cortante y momento, en el navegador. ![Sitio web de Civilus - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-148-1080.webp) ![Sitio web de Civilus - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-146-1600.webp) Lo que hacemos 1. **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. 2. **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. 3. **Sistema de identidad**: logotipo e ícono para el header del sitio, los favicons y los avatares en redes. 4. **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. 5. **Sistema tipográfico**: fuentes de Google Fonts elegidas para leerse bien en interfaces con muchos números y en etiquetas pequeñas. 6. **UI kit**: botones, campos, tarjetas, tablas y componentes de layout pensados para reutilizarse en nuevas herramientas y páginas. 7. **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. ![Portada de Civilus en el celular](https://mattriz.com/media/projects/civilus/cv-m-home-900.webp) ![Las herramientas en el celular](https://mattriz.com/media/projects/civilus/cv-m-tools-900.webp) ![Diagramas de cortante y momento en el celular](https://mattriz.com/media/projects/civilus/cv-m-beam-900.webp) ![Sitio web de Civilus - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-188-1080.webp) ![Sitio web de Civilus - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-124-1080.webp) 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. ![Sitio web de Civilus - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-232-1600.webp) ![Sitio web de Civilus - Estudio Mattriz](https://mattriz.com/media/projects/civilus/instagram-post-116-1600.webp) ## 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 ## ¿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 a mes. [Cuéntanos tu proyecto](https://mattriz.com/es/contact/) [Visita el sitio en vivo civilus.co](https://civilus.co/) --- ## Sobre Mattriz Mattriz es un estudio de diseño y desarrollo con sede en Bogotá, Colombia, que trabaja con negocios en Estados Unidos y Latinoamérica. Diseñamos la marca, construimos el sitio, la tienda o el sistema de reservas y pagos, y lo mantenemos funcionando mes a mes. La IA acelera el trabajo; las decisiones siguen siendo nuestras. - Qué hacemos: sistemas de reservas y operación, integración de pagos (Square, Stripe, Wompi), paneles de administración a la medida, automatización y seguimiento, sitios web que convierten. - Cómo trabajamos: un plan mensual para construir, mantener y seguir mejorando. No hacemos proyectos sueltos. - Capacidad: tres clientes activos a la vez, un límite deliberado. - Idiomas: español e inglés. - Contacto: contacto@mattriz.com · https://mattriz.com/es/contact/ - Agenda una llamada gratuita de 30 minutos: https://calendly.com/contacto-mattriz/30min - Escáner gratuito de sitios: https://mattriz.com/es/scan/ - Todo sobre el estudio para asistentes de IA: https://mattriz.com/llms.txt