Moldsid — Experiencia digital para manufactura
Una presencia industrial contemporánea construida alrededor de un producto 3D real
Diseño UX/UI + Frontend
Estudio de 2 personas + equipo cliente
2026 · Publicado
Next.js, React, Three.js, Blender, Lenis
Arquitectura de contenido, Sistema visual, Interacción 3D, Frontend
La capacidad industrial no era visible en línea
La empresa tenía décadas de experiencia técnica, pero no contaba con una presencia digital vigente. Para un posible cliente era difícil comprender sus capacidades, servicios y proceso antes de iniciar una conversación.
El objetivo era construir una experiencia que comunicara precisión y escala sin convertirse en otro catálogo industrial genérico.
Ser contemporáneo sin perder credibilidad técnica
El lenguaje visual debía sentirse avanzado, pero seguir siendo directo para una audiencia industrial. Los servicios complejos necesitaban una explicación clara, las rutas de contacto debían permanecer visibles y la experiencia tenía que funcionar en dispositivos con capacidades distintas.
La tensión principal apareció en el hero: el diferenciador más expresivo también podía convertirse en la parte más costosa de renderizar.
La tecnología tenía que explicar el producto, no competir con él.
La estructura antes del impacto visual
Comencé con la arquitectura de contenido: capacidades, servicios, proceso, evidencia y contacto. El análisis de referentes industriales permitió entender las expectativas del sector y presentar la información técnica con mayor claridad.
La estructura atiende tanto a quien necesita llegar directamente a una cotización como a quien necesita conocer la empresa antes de contactar.
Convertir un producto físico en la interfaz
Mostrar en lugar de describir
El equipo eligió un producto 3D interactivo sobre la dirección inicial de video para mostrar cómo se compone el objeto.
Construir un pipeline real
El archivo CAD fue revisado, exportado, separado en Blender y preparado como geometría organizada para Three.js.
Coordinar capas mediante movimiento
Modelo, texto y fondo funcionan como capas independientes mientras la vista expandida revela el producto.
Hacer visible el trade-off
La experiencia 3D diferencia el sitio, pero introduce un costo real de rendimiento, especialmente en móviles de menor capacidad.
Expresión con restricciones conocidas
Jerarquías amplias, composición técnica, movimiento controlado y módulos reutilizables establecen la dirección visual. Los servicios comparten una estructura común y conservan espacio para explicar procesos específicos.
Algunas combinaciones de color seleccionadas por el cliente introducen limitaciones de contraste. La restricción quedó documentada y las superficies funcionales continúan como área de mejora en accesibilidad.
El navegador cambió el diseño
Construí el sitio con React y Next.js, organizando servicios, capacidades, proceso y llamadas a la acción como componentes reutilizables. También integré Lenis y la secuencia de Three.js.
La implementación cambió espacios, ritmo y escala del modelo respecto a las composiciones estáticas iniciales. La experiencia final tenía que responder al comportamiento real del navegador.
Una base digital publicada
La empresa cuenta ahora con un sitio activo que presenta servicios, capacidades, proceso y contacto dentro de un sistema coherente. Los stakeholders aprobaron la dirección y consideraron que representa mejor a la organización.
Todavía no existe evidencia suficiente para atribuir conversiones, nuevos prospectos o resultados comerciales al rediseño.
La ambición crea una obligación técnica
- →Una interacción avanzada debe justificar su costo de implementación.
- →Trabajar con activos industriales reales produce una narrativa más auténtica.
- →Una propuesta ambiciosa también exige optimización y mantenimiento.
- →La aprobación de stakeholders valida dirección, no impacto de usuario o negocio.
Plataforma de streaming deportivo
