Arquitectura de contenido, Sistema visual, Interacción 3D, Frontend
Resultado
Un fabricante sin sitio activo ahora tiene presencia digital publicada para evaluación comercial.
Decisión clave
Usar un activo CAD real como narrativa principal en lugar de un catálogo industrial genérico.
Trade-off
La interacción 3D diferencia el sitio, pero agrega costo de rendimiento y mantenimiento.
Siguiente medición
Los datos de conversión y leads calificados aún no son suficientes para atribuir impacto comercial.
Contexto
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.
Reto
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.
Enfoque
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.
Composición editorial con activos públicos del sitio Moldsid publicado.
El mismo sistema visual reorganizado para un viewport más pequeño.
Decisiones clave
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.
El punto de partida CAD en formato Siemens NX; se omiten detalles técnicos protegidos.
El modelo fue separado en 10 piezas y organizado para exportación web.
La interacción web final convierte geometría técnica en una explicación.
Sistema visual
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.
La misma dirección visual reorganizada para escritorio y móvil.
Implementación
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.
El hero utiliza la vista expandida 3D como elemento narrativo principal.
Resultado actual
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.
Reflexión
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.
