Un gran diseño no tiene por qué ser llamativo.
Los sitios web no necesitan saltar de la pantalla para mantener el interés de los visitantes. De hecho, centrarse en adornos sutiles que no interfieran con el diseño suele ser más efectivo que un diseño exagerado.
Exploremos algunos proyectos que ofrecen una experiencia intuitiva y atractiva para los visitantes.
Diseños de comercio electrónico organizados
Las ventas en comercio electrónico dependen tanto del diseño del sitio como de los productos en sí. Echa un vistazo a dos sitios que ofrecen una experiencia de compra en línea agradable.
Mountain Brothers General Store
El sitio web de Mountain Brothers General Store, diseñado por Lions Creative, marca el tono con una imagen a pantalla completa de una taza de café humeante con una granja rústica ligeramente desenfocada al fondo.
Incluso antes de hacer scroll, la página de inicio ofrece tres caminos directos a la tienda: desde la barra de navegación superior, un botón de “Comprar cafés” y un enlace de “Comprar en la tienda general” justo encima del pliegue. Usar un menú desplegable en la barra de navegación es una elección de diseño inteligente, ya que permite a los visitantes ir directamente a la categoría que les interesa.
Cada página de producto incluye una foto, una descripción detallada y una lista de ingredientes. Debajo del botón de “añadir al carrito”, encontrarás algunas sugerencias de productos. Esta es una excelente manera de promocionar artículos adicionales sin estorbar durante el proceso de compra.
Creación de sitio web de comercio electrónico
El sitio web de Everything Design para Welga es vibrante y fácil de usar.
Las imágenes de los productos se muestran de forma destacada en la sección principal. Desde allí, los visitantes pueden optar por desplazarse hacia abajo para explorar o hacer clic en “Productos” en la barra de navegación, lo que abre un menú lateral. Al pasar el cursor sobre una categoría como “Verduras congeladas”, verás productos relacionados junto con su tamaño y precio. Incluir el precio en la vista previa del producto es un buen detalle, algo que los compradores que cuidan su presupuesto agradecerán.
Elementos clonables rápidos
Estos sencillos elementos clonables te ayudan a añadir algo interesante o útil a tu diseño sin tener que crear un elemento desde cero.
#82 Hypnosis
Como sugiere su nombre, #82 Hypnosis es una animación agradable, casi hipnótica, de un arcoíris que dibuja un círculo y luego un símbolo de infinito.
Este elemento clonable de una sola pieza es el resultado de que Bookmark aceptara el desafío informal de crear 100 interacciones en 100 días. Podemos imaginar este relajante remolino de arcoíris como una cautivadora animación de carga en un sitio web.
Formulario accesible para presupuestos de proyectos
Los formularios de contacto son esenciales para cualquier sitio web empresarial, pero crear uno pensando en la accesibilidad y asegurándose de que se ajuste a necesidades específicas —como recopilar información para el presupuesto de un proyecto— puede llevar tiempo. El elemento clonable Project Quote Accessible Form de Finsweet te da una ventaja inicial.
Además de los campos estándar de nombre y correo electrónico, este formulario recopila información sobre el tipo de proyecto que interesa al visitante, su presupuesto estimado y el tamaño del proyecto. Y como Finsweet lo creó con componentes accesibles, el formulario responde a la navegación por teclado.
Micrositio de Spotify
Un sencillo micrositio de Spotify clonable por Matan Assulin facilita la incorporación de una vista previa de Spotify a tu proyecto de Webflow.
Tanto si eres un músico que busca promocionar su trabajo como un creativo al que le gusta compartir su lista de reproducción favorita, la música puede ser un gran complemento para tu sitio web. Dado que la reproducción automática de música puede resultar molesta o incluso perjudicial para algunos visitantes, puedes ofrecerles la opción de escuchar una vista previa de una canción en tu sitio o abrirla en Spotify para escuchar la versión completa.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Interacciones fluidas
Las interacciones son divertidas, pero pueden volverse abrumadoras o distraer rápidamente. Estos proyectos muestran interacciones bien pensadas que ofrecen una experiencia impecable.
Gouach
El sitio web de Gouach, creado por Vincent Bidaux, muestra una variedad de interacciones activadas por el desplazamiento.
Un desplazamiento horizontal proporciona un efecto de deslizamiento de pantalla en la sección principal, pasando de un fondo negro a un desenfoque de azul y verde neón. Más abajo en la página, los titulares grandes encajan en su lugar y las imágenes parecen surgir desde la parte inferior a medida que te desplazas. El sitio web de Gouach también utiliza animación 3D e interacciones de desplazamiento para mostrar el exterior y el interior de su producto: una batería sostenible.
Cuadrícula animada por desplazamiento
Este proyecto clonable, Scroll animated grid de Nube, utiliza el desplazamiento para dar vida a rectángulos coloridos.
Al cargar, varios rectángulos aparecen dispersos alrededor de las palabras "scroll away". A medida que te desplazas, los rectángulos se deslizan hacia el centro y encajan en una cuadrícula. Aunque este clonable usa colores para diferenciar los rectángulos, funcionaría de maravilla para fotos, testimonios o bloques de contenido en un sitio web.
Portafolio de Macaspac Studio
Macaspac Studio utiliza ingeniosas interacciones al pasar el cursor para mostrar su trabajo en la página de inicio.
Debajo del pliegue aparece una lista de proyectos recientes. Cada proyecto tiene una flecha que indica que se abrirá en una ventana nueva, pero al pasar el cursor sobre el nombre del proyecto se abre una imagen de vista previa. Es una forma inteligente de incluir varios proyectos en la página de inicio sin crear desorden visual.
Ordinary Folk
El sitio de portafolio de Ordinary Folk está lleno de interacciones sutiles que añaden un toque de estilo sin sobrecargar el diseño.
Al pasar el cursor sobre el botón de reproducción en la página de inicio, se inicia un bucle de animación que recorre formas geométricas y se transforma en una colorida ciudad sobre una cuadrícula. Los elementos clicables en todo el sitio imitan esta interacción de formas sutiles: un menú de hamburguesa que se convierte en una X al hacer clic, flechas que entran y salen de la vista, e iconos que rebotan o cambian cuando el cursor pasa sobre ellos.
Muestra tu trabajo
Nos encanta recopilar algunos proyectos para destacar cada mes. Si tienes un proyecto del que te sientas orgulloso, ¡asegúrate de enviarlo a Made in Webflow!
.jpeg)
