A medida que el año llega a su fin, nos tomamos un momento para destacar algunas creaciones impresionantes que utilizan nuestros lanzamientos más recientes.
Para celebrar estos grandes hitos, nos hace mucha ilusión destacar algunos de nuestros proyectos clonables favoritos que exploran dos de nuestras actualizaciones recientes, ya disponibles para todos los usuarios de Webflow: las variables dinámicas y nuestra nueva integración con Spline.
Cada uno es diferente y puede servirte como tutorial o como patio de recreo para tu creatividad, permitiéndote experimentar y practicar tus habilidades a tu propio ritmo.
Ahora, vamos a echarles un vistazo más de cerca.
El poder de las variables
En los últimos años, el desarrollo web ha evolucionado significativamente, con una clara tendencia hacia sistemas más modulares, escalables y reutilizables. Este cambio es fundamental para crear y mantener sitios web de producción grandes y complejos. Una parte clave de esta evolución es el uso de variables CSS para crear tokens de diseño compartidos. Estos tokens permiten realizar cambios centralizados en todo un sitio web o sistema de diseño, mejorando tanto la eficiencia como la coherencia.
Aunque Webflow ya implementaba valores CSS reutilizables en las muestras de color, hemos sustituido y mejorado dichas muestras con variables. Esto supone un gran salto adelante en la funcionalidad de nuestro Panel de Estilos y en los elementos básicos de estilo disponibles en Webflow.
¿Qué hace que las variables sean tan potentes? Cualquier actualización que realices en una variable se aplica automáticamente dondequiera que se esté usando en tu sitio, lo que garantiza que tus diseños se mantengan coherentes y optimizados. Además, al tener todas las variables accesibles en una ubicación central, obtienes una visión más precisa del estilo de tu sitio, lo que hace que la gestión y las actualizaciones sean mucho más eficientes.
Puedes aprender más sobre cómo funcionan las variables consultando esta guía práctica de variables de Webflow University.
Nuestros proyectos clonables favoritos que muestran las variables
Taskflowr
Uno de nuestros proyectos clonables favoritos que demuestra el poder de las variables es Taskflowr.
Al clonar Taskflowr, los usuarios pueden explorar de primera mano cómo se pueden utilizar las variables más allá de los ajustes de color. Este proyecto te permite ver de cerca el uso de variables para tamaños, tipografía y mucho más, todo ello fácil de gestionar y actualizar.
Tanto si eres un desarrollador experimentado como si acabas de empezar en el desarrollo web, Taskflowr te ofrece ideas e inspiración sobre cómo las variables pueden simplificar enormemente tu proceso de diseño.
Jerry's Dairyette
Nuestro arquitecto técnico Ben Parker creó Jerry's Dairyette como proyecto de demostración para nuestros talleres durante la Webflow Conf 2023.
Claro, a simple vista Jerry's Dairyette parece el típico sitio web de una cafetería, pero cuando te sumerges en el Designer, se convierte en un tesoro de variables, elementos 3D y otros componentes. Este proyecto es ideal si quieres entender mejor cómo funcionan estas funciones juntas dentro de un mismo sitio.
Lleva tus diseños 3D al siguiente nivel con Spline
Las animaciones 3D son el núcleo de los sitios web profesionales más cautivadores y premiados, y con nuestra nueva integración con Spline, el poder de las animaciones 3D es ahora mucho más accesible.
Esta integración permite crear elementos 3D interactivos impresionantes, y ya hemos visto a muchos usuarios de Webflow aprovechar Spline de formas realmente creativas.
Puedes aprender más sobre cómo añadir Spline a tu sitio de Webflow echando un vistazo a nuestro tutorial de Webflow University.
Ahora, veamos algunos ejemplos.
Nuestros proyectos clonables favoritos que muestran Spline
Ear Buddies
El proyecto Ear Buddies creado por el equipo de Webflow University demuestra el poder de la integración de Webflow con Spline de una manera minimalista pero llamativa.
A medida que haces scroll, unos auriculares caen suavemente por la página mientras aparece información sobre sus especificaciones y ventajas.
Este proyecto clonable es un gran ejemplo de lo que se puede lograr con Spline y de cómo te permite crear diseños 3D visualmente atractivos e inmersivos.
3DFOLIO
3DFOLIO es un portafolio clonable que es una auténtica obra de arte, con impresionantes modelos de integración de Spline como el modelo principal, el modelo de corazón al hacer scroll y el modelo del pie de página. Usa uno o todos para tu próximo sitio de portafolio y explora el mundo del diseño 3D como nunca antes.
Automaterra
Automaterra muestra el uso innovador de una escena 3D interactiva que permanece fija mientras haces scroll, haciendo que el sitio sea informativo y atractivo a la vez. Es un ejemplo perfecto para quienes quieren ver cómo la integración de elementos 3D dinámicos puede transformar una página web estándar en una experiencia inmersiva.
Clona el proyecto Automaterra para ver cómo crear escenas de Spline sutiles pero atractivas que son tanto funcionales como visualmente cautivadoras.
Saassemble
Visualizar conceptos abstractos en la web puede ser todo un reto. Sin embargo, en el proyecto clonable Saassemble, verás una forma creativa de mostrar la colaboración en el trabajo usando Spline. La interpretación abstracta del concepto en el diseño es impresionante y ofrece una experiencia memorable a los visitantes.
Para quienes buscan añadir un toque de creatividad a su sitio web, la integración con Spline admite hasta las ideas más imaginativas. Echa un vistazo a cómo podrías mejorar tu narrativa visual con renderizado 3D usando el proyecto clonable Saassemble.
UrbanoVelo
El proyecto clonable UrbanoVelo muestra tres interacciones fundamentales que dan vida a los diseños 3D y te ofrecen un excelente punto de partida para tu próximo proyecto 3D.
La primera es una interacción al pasar el ratón. En este clonable, los movimientos sutiles del ratón animan y transforman el modelo 3D de la bicicleta eléctrica, creando una experiencia de usuario interactiva y atractiva al cambiar la perspectiva de la iluminación.
La siguiente es una interacción de explosión que ilustra el poder de animar elementos de Spline sincronizados con el scroll, añadiendo una dimensión dinámica y cautivadora al diseño.
Por último, tenemos una interacción de desplazamiento que potencia la narrativa de una página de inicio de principio a fin con efectos 3D envolventes.
Empieza tu próximo proyecto con estos elementos clonables
Estos son solo ocho de los proyectos más interesantes que utilizan variables y nuestra integración con Spline, disponibles en Made in Webflow. Ya sea que los uses como inspiración o como punto de partida para tu próximo proyecto, ¡estamos deseando ver lo que creas!
