Sitio web corporativo de Topomex

Contexto

Topomex es una empresa mexicana de ingeniería que se prepara para relanzar sus operaciones después de varios años de inactividad. La empresa necesitaba un sitio web moderno para presentar sus servicios de infraestructura, experiencia en distintos sectores y capacidades técnicas con el nivel de claridad esperado dentro de su industria.

El objetivo era crear una presencia digital para esta nueva etapa del negocio, organizando una cantidad considerable de información sin hacer que el sitio se sintiera denso o difícil de navegar.

El reto

Topomex trabaja en múltiples sectores de infraestructura, cada uno con sus propios servicios, terminología y experiencia en proyectos. El sitio debía permitir que los visitantes comprendieran rápidamente qué hace la empresa, en qué industrias trabaja y por qué su equipo está capacitado para realizar ese trabajo.

El contenido también necesitaba espacio para crecer. Los nuevos servicios, páginas de sectores y proyectos debían integrarse dentro de la estructura existente sin requerir un layout independiente o cambios extensos de código para agregar nuevo contenido.

La solución

Convertí los servicios y la experiencia sectorial de la empresa en una arquitectura de información clara, respaldada por un sistema visual reutilizable.

Utilizando Astro, construí un sitio enfocado en contenido que entrega la mayoría de sus páginas como HTML estático, limitando el JavaScript del cliente a solo donde realmente se necesitan. Tailwind CSS se utilizó para establecer reglas consistentes de tipografía, espaciado, layout y comportamiento responsivo.

Los servicios, sectores y proyectos cuentan con un lugar definido dentro del sitio. Los componentes compartidos mantienen consistentes los patrones de diseño y permiten agregar contenido sin reconstruir la interfaz desde cero.

Enfoque técnico

Entrega static-first y fundamentos de SEO

El sitio fue diseñado para generar páginas estáticas optimizadas, reduciendo la cantidad de JavaScript enviado al navegador y manteniendo un comportamiento de carga predecible.

Las rutas y los sitemaps se generan a partir de la estructura de contenido del sitio. Esto permite que las nuevas páginas de sectores y proyectos formen parte de la arquitectura y estén disponibles para el rastreo de buscadores cuando se publican.

Arquitectura de componentes reutilizables

La navegación, los encabezados de sección, los llamados a la acción, las tarjetas de proyectos y los patrones recurrentes de layout fueron construidos como componentes reutilizables de Astro.

Esto reduce el duplicado de código, mantiene consistente el comportamiento visual y facilita aplicar cambios futuros en todo el sitio.

Sistema de diseño responsivo

El comportamiento responsivo se definió mediante patrones compartidos de Tailwind, en lugar de ajustarse de manera independiente en cada página.

Los layouts se adaptan a pantallas móviles, tablets, equipos de escritorio y resoluciones más amplias, conservando longitudes de lectura cómodas, jerarquía de contenido y espaciado.

Decisiones técnicas clave

• Astro: Seleccionado porque el proyecto está principalmente orientado al contenido y no requiere una cantidad extensa de estado en el cliente.
• Rutas basadas en contenido: Los servicios, sectores y proyectos siguen estructuras de página repetibles que pueden incorporar nuevas entradas.
• Generación automatizada del sitemap: Las nuevas páginas públicas se incorporan al sitemap conforme crece el sitio.
• Reglas de diseño centralizadas: Tailwind CSS mantiene consistentes la tipografía, el espaciado, los breakpoints y el comportamiento del layout.
• JavaScript limitado en el cliente: El código interactivo se incorpora únicamente cuando contribuye directamente a la experiencia del usuario.
• Estructura semántica del contenido: Las páginas utilizan HTML significativo y jerarquías claras de encabezados para apoyar la accesibilidad, la navegación y la visibilidad en buscadores.

Resultado

El sitio terminado proporciona a Topomex una plataforma clara y profesional para su relanzamiento, presentando sus servicios, sectores y experiencia mediante una estructura más fácil de recorrer y comprender.

Su base construida con componentes también permite que el sitio se amplíe conforme la empresa agrega nuevos proyectos y áreas de trabajo, sin introducir una implementación diferente para cada página.