Cuando vimos por primera vez una demostración de Vizcom, nos encontramos con algo que realmente nos sorprendió.
Los bocetos se convertían en renders; los renders, en decenas y decenas de variaciones de color y estilo; y luego la idea se transformaba en un modelo 3D, que a su vez se convertía en recursos exportables para la producción en el mundo real, todo en cuestión de minutos. Como diseñadores en OFF+BRAND, fue similar a la sensación de esos primeros momentos experimentando con una herramienta de IA donde el resultado es sorprendentemente mejor de lo esperado. Solo que esta vez, el resultado no era solo visualmente impresionante; era un producto real y funcional que adopta un flujo de trabajo creativo familiar.
Esa sensación de entusiasmo, velocidad y posibilidades se convirtió en la base de nuestro enfoque para diseñar la página de inicio de Vizcom — y el prisma a través del cual se tomó cada decisión de diseño. El movimiento y WebGL no se eligieron simplemente para describir el producto, sino para ayudar a los usuarios a sentir lo que hace Vizcom antes incluso de leer sobre ello.
Convertir el "hazlo realidad" en una experiencia
Para los diseñadores, a menudo una idea va seguida de una realidad desalentadora. Comprobar si algo realmente funcionará suele requerir una larga cadena de bocetos, modelado, iteración y reelaboración a través de múltiples herramientas. Vizcom es una herramienta de diseño con IA creada para colapsar esa cadena, y su eslogan —"hazlo realidad"— es engañosamente simple, pero increíblemente potente. Una herramienta. Un lugar. Una respuesta mucho más rápida.
Desde el principio, supimos que esta promesa no podía comunicarse solo con texto o imágenes estáticas. La página de inicio necesitaba ofrecer a los usuarios una sensación honesta y tangible de la ideación creativa que ocurre dentro de Vizcom.
Este cambio —de explicar a dejar que los usuarios sientan— dio forma a cada decisión posterior.
El primer momento: del boceto a la realidad
La sección principal presenta a los usuarios tres objetos de diseño familiares: un coche, un abrigo y una silla. Cada uno comienza como un boceto y se transforma rápidamente en un objeto tridimensional renderizado. Esto refleja el momento dentro de Vizcom en el que una idea cruza repentinamente el umbral de lo abstracto a lo tangible.
En lugar de explicar este proceso, queríamos que los usuarios lo experimentaran de inmediato.
Los usuarios que interactúan con los elementos visuales de la página principal tienen una idea mucho más clara de lo que hace Vizcom antes de registrarse para una demostración, lo que hace que cada conversación posterior sea más útil porque los usuarios ya están calificados, lo que lleva a conversiones de mayor calidad. En resumen, saben lo que hace la herramienta.
La experiencia es la explicación
Hay muchos sitios web de productos que explican lo que hacen sus herramientas. Muchos menos permiten que los usuarios lo sientan.
Queríamos que los usuarios experimentaran una muestra de la transformación que ocurre dentro del área de trabajo de Vizcom, no solo que leyeran sobre ella. Diseñamos la página de inicio como su propia forma de educación sobre el producto: una elección deliberada para dejar que el movimiento, la interacción y la progresión guíen a los usuarios hacia una comprensión genuina, porque las palabras por sí solas no deberían tener que cargar con ese peso. Esto alivia la presión sobre las ventas y la incorporación, y hace que la página de inicio realice un trabajo real en el recorrido del usuario.
Creando un diseño centrado en el impulso
Elegimos los efectos de desplazamiento como el mecanismo principal para la transformación porque refleja la experiencia de usar Vizcom. Durante las primeras demostraciones, el proceso de ideación se sintió continuo y fluido, con ideas evolucionando rápidamente en lugar de pasar por pasos rígidos.
A medida que los usuarios se desplazan, sienten esa misma sensación de impulso. La experiencia fluye desde el boceto hasta el producto sin interrupciones, reforzando que hacer algo realidad no tiene por qué ser lento o fragmentado.
Cruzar el umbral hacia el mundo real
El momento más importante de la experiencia ocurre cuando el usuario sale de la pantalla y entra en un espacio físico real. Este movimiento simboliza la velocidad a la que las ideas pueden convertirse en resultados tangibles usando Vizcom.
En la escena de la silla, el boceto se convierte en una silla que ahora descansa bajo el escritorio del diseñador. Es un momento pequeño, casi poético, pero transmite un mensaje claro: la idea no se perdió en el software, sino que llegó a un lugar real.
Colocar el resultado en un espacio real —una silla bajo un escritorio, no flotando en un render— hace que el resultado se sienta menos especulativo. Ese momento de reconocimiento vale más que cualquier llamada a la acción.
Preservar la ambigüedad y el juego
El diseño inicial se nutre de la exploración, la variación y la ambigüedad. Queríamos que la página de inicio asegurara a los usuarios que esta parte del proceso creativo no se pierde al trabajar con Vizcom.
La segunda sección de la experiencia muestra un espectro de resultados en lugar de un único resultado. Esto refleja cómo funciona realmente la ideación y muestra a Vizcom como una herramienta que puede seguir el ritmo, en lugar de una que impone una única dirección.
Estas decisiones refuerzan la posición de Vizcom como una herramienta de diseño profesional: no es un generador de un solo clic, sino un entorno creativo serio que se gana su lugar en un flujo de trabajo profesional.
Diseñar el momento en que una idea se hace realidad
"Hacerlo real" tiene sus raíces en la fase inicial del diseño de productos, donde las ideas existen principalmente como bocetos aproximados en lugar de objetos terminados. La aplicación Vizcom está diseñada para ayudar a los diseñadores a pasar de estas ideas iniciales y poco definidas a un producto real con herramientas líderes en la industria. Desde el principio, nos enfocamos en capturar este momento: cuando un concepto abstracto toma forma real por primera vez.
Para mejorar la fase de exploración, creamos un carrusel lúdico como punto de entrada a la experiencia. El carrusel reacciona con un movimiento natural y dinámico que responde inmediatamente a la interacción del usuario, atrayendo la atención y animando a los usuarios a deslizarse por los objetos 3D esbozados para descubrir qué hay detrás de ellos. Para aumentar la diversión, uno de los elementos del carrusel, el abrigo, cuenta con una mecánica de movimiento personalizada que reacciona de forma natural al deslizamiento del usuario.
Evitar el 3D por el simple hecho de usar 3D
Uno de los mayores riesgos al usar WebGL en una página de inicio es crear un espectáculo sin sentido. Desde el principio, cada elemento 3D tuvo que ganarse su lugar, sirviendo a la historia en lugar de simplemente demostrar lo que era técnicamente posible.
Las escenas finales debían representar resultados creíbles y cercanos. Diseñamos cada entorno para reflejar el mundo laboral real del diseñador que lo observa. Al abordar la escena automotriz, por ejemplo, investigamos los procesos de fabricación reales y descubrimos que las fresadoras de cinco ejes se utilizan habitualmente para acelerar el modelado en arcilla. Incluir esta máquina no fue decorativo; fue una señal reconocible para los diseñadores de automóviles de que el resultado de Vizcom estaba listo para la producción.
Trabajar con IA en esta etapa significó que podíamos avanzar a través de múltiples direcciones visuales rápidamente, sin perder el impulso. Mantuvo nuestro propio proceso tan fluido como la herramienta para la que estábamos diseñando.
Iterar el lenguaje visual
También utilizamos la IA para apoyar el proceso de iteración, generando múltiples estilos de boceto para los tres objetos, sus contrapartes renderizadas y la habitación en la que finalmente aparecen. Esto nos permitió iterar rápidamente a través de las direcciones visuales mientras manteníamos una relación coherente entre la fase de boceto y el estado final renderizado.
Incluso extendimos el lenguaje de boceto a otros elementos de la interfaz, incluyendo partes de la misma y la colorida ventana de transición dentro de la escena WebGL, asegurando que el estilo visual se mantenga en toda la experiencia.
Creando un momento de impacto memorable
Diseñamos la transición hacia la escena final para crear un claro momento de impacto para el usuario. Para lograrlo, tuvimos que renderizar la habitación de la forma más realista posible, trabajando dentro de las limitaciones de recursos de una experiencia WebGL de alto rendimiento.
Exploramos varios enfoques para equilibrar el realismo y el rendimiento. Utilizamos las herramientas de Vizcom para generar los modelos principales de la escena, combinándolos con modelado y texturizado detallado mediante IA para el resto. Las escenas se enriquecieron aún más con reflejos planos en el suelo y las ventanas para añadir profundidad y detalle.
El rendimiento como principio de diseño
Teniendo en cuenta la naturaleza de alto rendimiento del sitio web, optimizamos los recursos siempre que fue posible. Implementamos una compresión potente junto con un sistema de carga asíncrona y análisis bajo demanda, asegurando que solo los elementos visibles para el usuario se descarguen y procesen durante la carga inicial.
Para reducir el tamaño de los archivos y mejorar aún más el rendimiento, especialmente en dispositivos de gama baja y conexiones móviles más lentas, utilizamos un conjunto independiente de texturas de menor resolución para usuarios móviles, sin comprometer la calidad visual de la escena.
En lugar de depender de un motor de física para el movimiento del abrigo en el carrusel, estudiamos cómo se comporta el material de un abrigo real en una percha y recreamos su movimiento mediante un enfoque algorítmico más sencillo directamente en el sombreador. Esto nos permitió lograr un movimiento creíble manteniendo la solución ligera y eficiente.
La experiencia WebGL se construyó utilizando OGL.js —elegido por su pequeño tamaño y arquitectura directa—, lo que ayudó a mantener la versión final ligera en comparación con bibliotecas más comunes.
La colaboración como acelerador creativo
Trabajar con un especialista en WebGL desde el principio definió fundamentalmente el resultado del proyecto. Los prototipos iniciales en estructura alámbrica nos permitieron probar el comportamiento del desplazamiento, los tiempos de interacción y la fluidez de la escena antes de comprometernos con los recursos finales.
Esto significó que el concepto estuvo bien fundamentado desde el inicio; algo sobre lo que Vizcom puede construir y expandir con el tiempo, sin tener que replantear el sistema desde cero.
Diseña la sensación, no la explicación
En última instancia, esto no se construyó para mostrar capacidad técnica. Se creó para responder a una pregunta: ¿Puede esto realmente hacer realidad mis ideas?
Al diseñar una experiencia en lugar de escribir una declaración, la página de inicio se convierte en parte del viaje del producto. El diseño de movimiento sintetiza la comprensión, demuestra credibilidad y da a los usuarios la confianza para dar el siguiente paso.
La experiencia no muestra lo que Vizcom puede hacer; muestra cómo se siente cuando una idea finalmente cobra vida.
Trabaja con un Partner de Webflow
Los Partners certificados de Webflow cuentan con experiencia verificada y un historial probado de satisfacción del cliente.
