MDTECODE
Sitio web corporativo para una empresa de desarrollo de software.
Plataforma web corporativa desarrollada para presentar la empresa, sus servicios, soluciones SaaS, proyectos y contenido, con una experiencia moderna y orientada a mostrar el ecosistema tecnológico de MDTECODE.
- Next.js
- framework
- TypeScript
- lenguaje
- Framer Motion
- animaciones
- SaaS
- soluciones
Una empresa de tecnología necesita comunicar claramente quién es, qué servicios ofrece y qué productos construye. El reto consiste en presentar diferentes áreas de negocio y contenido sin convertir el sitio en una colección de páginas desconectadas.
Se construyó un sitio web corporativo con Next.js que organiza la experiencia alrededor de diferentes áreas de la empresa: presentación, servicios, soluciones SaaS, portafolio, blog, información corporativa y contacto.
Cómo está montado
Las capas de arriba abajo, con la tecnología concreta de cada una.
- 01
Interfaz
Aplicación web construida con Next.js, React y TypeScript, utilizando Tailwind CSS y componentes basados en Radix UI para construir una interfaz consistente.
- 02
Experiencia
La interfaz incorpora animaciones y transiciones para mejorar la navegación y la presentación del contenido sin depender únicamente de elementos estáticos.
- 03
Contenido
El sitio organiza diferentes áreas de contenido mediante rutas independientes para servicios, soluciones SaaS, portafolio, blog, información corporativa y contacto.
- 05
Componentes
La interfaz utiliza componentes reutilizables basados en Radix UI junto con Tailwind CSS para mantener consistencia entre las diferentes secciones del sitio.
Qué elegí y qué descarté
- D01
Next.js como framework principal
Se utilizó Next.js como base de la aplicación para organizar las diferentes rutas y construir una experiencia web moderna utilizando React y TypeScript.
- D02
Componentes reutilizables
La interfaz utiliza componentes reutilizables y primitivas de Radix UI para mantener patrones consistentes entre las diferentes páginas y secciones.
- D03
Animaciones con propósito
Framer Motion se utiliza para añadir movimiento y transiciones a la experiencia sin convertir las animaciones en el elemento principal de la interfaz.
- D04
Separación por áreas
Las diferentes áreas del sitio se organizan mediante rutas independientes como servicios, SaaS, portafolio, blog, nosotros y contacto, facilitando la evolución de cada sección.
Retos y cómo se resolvieron
- 01
Construir una identidad tecnológica
El sitio necesita comunicar que MDTECODE es una empresa tecnológica sin sacrificar claridad ni convertir la interfaz en una experiencia excesivamente compleja.
- 02
Organizar diferentes tipos de contenido
La plataforma combina contenido corporativo, servicios, productos SaaS, proyectos, artículos y formularios de contacto dentro de una misma experiencia.
- 03
Mantener consistencia visual
Al existir diferentes secciones y tipos de contenido, fue necesario mantener componentes, patrones de interacción y jerarquías visuales consistentes a lo largo del sitio.