Nos encanta contar con diseñadores tan creativos que utilizan Webflow para tantos proyectos increíbles. Echa un vistazo a algunos de los trabajos que más nos han gustado últimamente.
10. Portafolio de Aaron Grieve
El sitio web del portafolio de Aaron Grieve pone sus habilidades de diseño en primer plano con un bloque llamativo de texto introductorio sobre una animación de triángulos suaves y flotantes. Su paleta sencilla de blanco, negro y verde azulado ofrece un ejemplo impactante de minimalismo bien pensado, permitiendo que cada elemento destaque por sí mismo.
Aaron evita caer en el abismo de lo aburrido y presume de su creatividad utilizando las transformaciones e interacciones 3D fáciles de usar de Webflow. Su portafolio es especialmente atractivo gracias a su intuitiva galería basada en deslizadores. La sencillez de este sitio web, combinada con elementos dinámicos, lo convierte en un gran ejemplo de las habilidades de Aaron como diseñador.
Quizás mi parte favorita sea el uso que hace Aaron del menú hamburguesa en todos los dispositivos. Al colocarlo en una zona donde solemos esperar una flecha de "continuar", supera parcialmente la conocida falta de claridad de este tipo de menús. Dada su ubicación, simplemente nos dan ganas de hacer clic.
Vale la pena señalar que el uso de interacciones de Aaron para crear un sitio complejo de una sola página genera algunos problemas potenciales de UX y SEO.
En cuanto a la UX, la experiencia multicapa puede volverse confusa a medida que profundizas en el sitio. Por ejemplo, una vez que haces clic en un elemento del portafolio y te desplazas hacia abajo, no es obvio cómo salir del mismo, y el icono de la X en la parte superior derecha —que ofrece la tentadora posibilidad de cerrar el portafolio por completo— deja de funcionar. Descubres que tienes que desplazarte hasta la parte superior del caso de estudio para cerrar, lo cual resulta un poco laborioso.
También resulta un poco extraño que el sitio de escritorio funcione como una página única, pero en el móvil, cada elemento del portafolio tiene su propia URL única. Para el SEO, sería mejor asignar a cada elemento del portafolio su propia página y URL en todos los dispositivos, incluso si eso significara sacrificar el diseño único y estratificado. De esa manera, las páginas individuales de los casos de estudio podrían enfocarse en términos específicos y potencialmente posicionarse por ellos. Dicho esto, puede ser notablemente difícil posicionar tu portafolio sin mucho contenido geolocalizado, así que no es el peor lugar para experimentar.
Hablando de móviles, Aaron hizo un buen trabajo ofreciendo una experiencia única en dispositivos más pequeños. Sin embargo, la experiencia se desmorona un poco si simplemente cambias el tamaño de tu navegador de escritorio, como se muestra aquí:
Dejando de lado los comentarios sobre SEO y UX, el resultado de la experimentación de Aaron es tan fresco que es difícil reprochárselo.
9. Salon Amann por Ben Visual
El sitio web de Salon Amann creado por Ben Visual presenta un diseño elegante que utiliza el principio de invariancia de la Gestalt para hacer que partes del salón resalten con brillantes toques de color. Las fotos evocan de forma impresionante una galería de arte de alta gama. La estética del sitio web refleja realmente la identidad de marca de Salon Amann.
Este diseño utiliza navegación lateral y enlaces de sección dentro de la página para guiar a las personas a través del contenido. Este estilo de diseño es una gran opción para cualquier persona o empresa que necesite un diseño sencillo y ligero, pero sin escatimar en estilo.
Otro gran elemento de este sitio es el uso de anchos y alturas porcentuales para asegurar que la cuadrícula principal llene toda la pantalla. También me encanta el mapa en escala de grises al final, que Ben personalizó con la práctica herramienta MapBuildr.
Ten en cuenta que, al igual que en el sitio de Aaron, un diseño de una sola página limita el potencial de SEO del sitio, pero quizás el salón empiece a publicar en un blog para darle un impulso en ese aspecto.
8. Christian Arete Photography por IGdesign
Un sitio web de fotografía necesita algo más que imágenes bonitas, e IGdesign hizo un gran trabajo al mostrar las imágenes de Christian Arete en un diseño que es a la vez interactivo y visualmente interesante para este portafolio.
El texto de la página de inicio se muestra sobre un video de fondo que enfoca a medida que una mano gira el objetivo de una cámara. Nos encanta la sencillez de esta idea, que captura la esencia del arte del fotógrafo.
La navegación inferior utiliza un control deslizante para moverse entre las opciones de fotografía de retrato, paisaje y vida silvestre. Al hacer clic en cualquiera de estas opciones, IGdesign creó una transformación 3D con Webflow que activa una transición fluida y atractiva hacia la galería de imágenes. La X giratoria interactiva también es una forma muy satisfactoria de cerrar una ventana. ¿Quién iba a decir que cerrar una página podía ser divertido?
Esta plantilla de sitio web de portafolio es gratuita, así que adelante, clónala.
Por supuesto, esta es otra plantilla de una sola página, por lo que esos posibles problemas de SEO que ya mencionamos vuelven a entrar en juego.
7. Morin Khuur Horsehead Fiddles por Studio Corvus
A través de texto e imágenes fantásticas, el sitio web de Morin Khuur Horsehead Fiddles de Corvus cuenta la historia de cómo se fabrican estos violines en Mongolia, así como su importancia como hermosos instrumentos musicales. El clavijero de uno de estos instrumentos sirve como imagen principal del sitio y realmente resalta el arte y la artesanía que conlleva su fabricación.
Hay bastantes fotos y bloques de contenido, pero el diseño limpio garantiza que el sitio nunca se sienta abrumador. Además, la combinación de fotos y video realmente resalta la belleza artesanal y el sonido magnífico que estos instrumentos pueden producir.
Otros aspectos destacados incluyen una infografía encantadora de un violín con las partes etiquetadas, una galería estilo mampostería de tomas macro que capturan los detalles y un selector de idioma que cambia el contenido al mongol.
¡No es de extrañar que este sitio #MadeInWebflow fuera nominado a los Awwwards!
6. Mecca:83 por EvanJones
Si eres músico, es importante que la gente pueda encontrar tu música y saber quién eres en la web. Evan Jones, productor de hip-hop y multiinstrumentista, diseñó su sitio web Mecca:83 para mostrar quién es como artista y como persona.
La página de inicio tiene un video de fondo de Mecca:83 activando samples en una MPC 2000. Es una imagen visualmente atractiva y es genial verlo en acción. Este sitio web tiene mucho contenido, pero todo se une para contar la historia de cómo pasó de sus humildes comienzos como un chico skater a crear ritmos densos e hipnóticos. Si eres músico o tienes una banda, querrás clonar este diseño para ti.
También es posible que quieras configurar tus propios reproductores de música integrados con nuestras inserciones dinámicas y SoundCloud, para que la gente pueda escuchar sin salir de tu sitio.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
5. REGALO: Plantilla Slick de Arthur
El diseñador de Webflow Arthur se dio una hora para crear este diseño de plantilla Slick. El resultado es un diseño maravillosamente minimalista centrado en el contenido. El área principal consta de un titular grande y llamativo, un poco de texto y una imagen. Es un recordatorio refrescante de que no necesitas una imagen o un vídeo de fondo a pantalla completa para transmitir tu mensaje. Debajo, hay una cuadrícula de imágenes con una superposición de texto que aparece al pasar el ratón.
Esta plantilla funciona de maravilla para un portafolio sencillo de diseño gráfico o redacción, con una página de proyectos ya configurada y accesible desde la navegación superior.
Puede que no exista nada gratis en esta vida, pero esta plantilla de portafolio creativo es gratuita para que la uses, ¡así que clónala sin miedo!
4. Concrete Platform por Overton Graphics
Concrete crea software para ayudar a las empresas a aumentar su productividad minorista. Dado que se preocupan por el funcionamiento y la identidad de una marca, es vital para ellos tener un sitio web que comunique la fuerza de su propia marca.
Con tanto blanco puro y gris frío, habría sido muy fácil que este sitio web fuera tan emocionante como ver secar la pintura. En cambio, Overton Graphics utiliza esta combinación de colores con gran efecto en el sitio web de Concrete al añadir una variedad de imágenes brillantes y animaciones de buen gusto. Este diseño, sencillo y elegante, es fácil de navegar y utiliza la cantidad justa de contenido para comunicar quiénes son.
Si tuviera que poner una pega, es que el texto tiende a usar declaraciones de beneficios vagas (como "Concrete pone el control al alcance de tu mano, conectándote con todas tus tiendas") en lugar de detalles concretos. En una era tan inundada de contenido que la "sobrecarga de información" se ha vuelto un cliché, la gente quiere saber exactamente qué hace tu producto, así como qué beneficios les aporta.
3. Plantilla de página de contacto por Corvus
En esta era post-esqueumorfismo, puede resultar refrescante ver un diseño que se inspira en su equivalente del mundo real sin pasarse. Y el diseño basado en tarjetas de visita de Corvus hace precisamente eso.
Esta plantilla de página de contacto de Corvus nos recuerda que tu página de contacto no debería ser algo secundario, con su diseño limpio y fácil de leer que incluye toda la información necesaria y nada más. Las llamadas a la acción en la parte inferior también son un toque excelente. Recomendamos encarecidamente clonar esta página de contacto para poner en marcha tu propio sitio web.
Al fin y al cabo, si eres una agencia o un diseñador web freelance, tu página de contacto es básicamente tu llamada a la acción definitiva. Así que dale toda la atención que normalmente le dedicas a las secciones principales de tu página de aterrizaje.
2. Olivia AI por Christopher Meeks
Olivia AI es una aplicación de gestión financiera que utiliza inteligencia artificial para ayudarte a equilibrar mejor tu dinero.
La tecnología detrás de esta aplicación es complicada, pero el contenido y el diseño del sitio web de Olivia AI, diseñado por Christopher Meeks, no lo son. Realmente nos hacemos una idea de qué es Olivia sin sentirnos abrumados por la tecnología.
Esto se debe a la clara combinación de declaraciones de beneficios, como "todo lo que necesitas en un solo lugar", con detalles más concretos, como "Olivia organiza todas tus cuentas y transacciones, para que siempre sepas a dónde va tu dinero, cuál es tu saldo y cuánto puedes gastar". El diseño limpio, combinado con animaciones e interacciones que demuestran cómo funciona la aplicación, refuerza el mensaje y crea una experiencia de usuario realmente agradable.
Solo nos queda esperar que la IA Olivia pronto se anime a decirnos cuál es nuestro propósito en la vida.
1. Super Duper Design Studio por Ava Araujo
Hay que reconocerle el mérito a Super Duper. Su sitio web, diseñado por Ava Araujo, parece bastante discreto a primera vista.
Primero aparece el logotipo centrado con un degradado de fondo que cambia. Luego, algo de texto en la esquina inferior izquierda de la pantalla. Todo esto sobre un fondo blanco. La página de inicio proyecta una sensación de calma y quietud muy intencionada.
Basta con bajar un poco para que el sitio web cobre vida con una miríada de colores. Hay un precioso degradado de fondo que cambia a otras combinaciones de colores al hacer scroll, además de otras interacciones y animaciones divertidas que hacen que este sitio web destaque de verdad.
Super Duper puede ser un nombre difícil de llevar a la altura, pero este sitio web hace un trabajo superduper al mostrar su talento para el diseño.
¿Listo para empezar a crear tu propio sitio web genial?
Empieza tu prueba gratuita de Webflow—y descubre tu futuro como diseñador web.
.png)
