Moldsid — Experiencia digital para manufactura de precisión
Una presencia industrial contemporánea impulsada por un producto 3D interactivo real
Diseño UX/UI + Frontend
Estudio de 2 personas + equipo Moldsid
2026 · Publicado
Next.js, React, Three.js, Blender, Lenis, SolidWorks
Arquitectura de contenido, Sistema visual, Interacción 3D, Frontend
Décadas de experiencia en manufactura sin presencia digital
Moldsid es un fabricante de moldes de inyección de precisión con más de 40 años de experiencia. A pesar de su capacidad técnica, su dominio anterior había expirado y no contaban con un sitio activo. Los clientes potenciales—muchas veces compradores internacionales—no tenían forma de evaluar capacidades, servicios o calidad antes de iniciar una conversación.
El objetivo era construir una experiencia digital 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 explicación clara, las rutas de contacto debían permanecer visibles y la experiencia tenía que funcionar en dispositivos muy distintos.
La tensión principal apareció en el hero: el diferenciador más expresivo—un producto 3D interactivo—también podía convertirse en el elemento más costoso 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 modelo 3D interactivo sobre la dirección inicial de video para que los visitantes pudieran entender cómo se ensambla el molde.
Un pipeline CAD real
El cliente entregó un archivo CAD en formato Siemens NX. Lo exporté, separé el modelo en 10 piezas individuales en Blender y preparé la geometría optimizada para Three.js.
Narrativa con vista expandida
Modelo, texto y fondo se mueven como capas independientes mientras la vista expandida revela el producto progresivamente.
Hacer visible el trade-off
La experiencia 3D diferencia el sitio pero introduce un costo de rendimiento, especialmente en móviles de gama baja. Lighthouse: Accesibilidad 94, Buenas Prácticas 100, SEO 92.
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. Integré Lenis para scroll suave y la secuencia de Three.js para el hero.
La implementación cambió espacios, ritmo y escala del modelo respecto a las composiciones estáticas iniciales. La experiencia final tuvo que responder al comportamiento real del navegador.
Los más de 40 años de historia de la empresa se convirtieron en el ancla narrativa: el sitio enfatiza experiencia y calidad sobre lo superficial, usando la interacción 3D como prueba de capacidad técnica.
Una base digital publicada para un fabricante con 40 años de historia
Moldsid cuenta ahora con un sitio activo que presenta servicios, capacidades, proceso y contacto dentro de un sistema visual consistente. Los stakeholders aprobaron la dirección y reconocieron que representa mejor la escala de la organización.
El sitio pasó de tener cero presencia digital—sin dominio activo, sin forma de que clientes potenciales los evaluaran en línea—a una presencia publicada y funcional. El feedback cualitativo ha sido positivo, pero no existen todavía datos suficientes para atribuir conversiones o nuevos clientes 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 que los recursos genéricos.
- →Una propuesta ambiciosa también crea una obligación de rendimiento y mantenimiento.
- →La aprobación del cliente valida dirección, no impacto de usuario o negocio.
Evolve — Plataforma privada de streaming para eventos
