Diciembre trajo una gran variedad de sitios web fascinantes a Made in Webflow.
Dando continuidad a las tendencias de 2022 y aplicando muchas de nuestras propias predicciones de diseño para 2023, estos elementos interactivos y de diseño son el lugar perfecto para encontrar inspiración creativa para el nuevo año.
Secciones hero de alto impacto
Los comienzos son importantes. La primera escena de una película, la primera línea de un libro, las primeras notas de una canción: todo eso captura el interés de la audiencia y la prepara para lo que viene. Una sección hero de alto impacto en un sitio web puede lograr exactamente lo mismo.
Los diseños más sencillos para las secciones hero han estado de moda últimamente. Muchos diseñadores han optado por diseños tipográficos y estéticas minimalistas en lugar de fotografías o imágenes en los hero, que solían dominar el diseño web.
Sin embargo, una imagen visualmente impactante para empezar una página web sigue siendo una opción de diseño efectiva y potente; quizás incluso más ahora que es menos habitual.
Matthis Garnier
El sitio del portafolio de Matthis Garnier es la definición de impactante. La imagen hero es literalmente un héroe mirando al frente y equipado con un traje que evoca un entorno de ciencia ficción. Los detalles en esta página están cuidados al milímetro. Incluso el cabello de la imagen se mueve con el viento en la misma dirección que el texto al hacer scroll, lo que aporta una sensación de movimiento y armonía al diseño.
Esta sección hero atrae al espectador y te invita a seguir explorando el resto del sitio. Tras la opulencia visual de la primera sección, continúa con un diseño limpio y minimalista que contiene información clara y fácil de leer sobre quién es y qué hace.
Hay otro detalle genial en la sección de Proyectos Anteriores. En la página, parece una lista limpia basada en texto, lo que permite al lector asimilar los nombres y descripciones fácilmente. Sin embargo, al pasar el ratón sobre la lista, aparecen ventanas emergentes animadas de cada sitio, dándote una muestra de cómo es el diseño. Es otra forma ingeniosa de despertar la curiosidad de los usuarios.
Western Sydney Lakes
Diseñado por Q Agency, el sitio web de Western Sydney Lakes te recibe con una espectacular vista aérea del futuro desarrollo. La imagen es nítida, el agua brilla y puedes ver kilómetros a la redonda a lo largo de la orilla del lago.
El proyecto de Western Sydney Lakes es un futuro desarrollo de uso mixto, y el papel del sitio web es atraer inversores. Puede ser difícil interesar a alguien en una idea que aún no existe, pero la impactante imagen hero da solidez a todo el concepto y al sitio web. Hace que el lugar se sienta más real y visualmente tangible, y, con suerte, más fácil de imaginar como una inversión.
Western Sydney Lakes también opta por mantener la mayor parte de su sitio web minimalista y claro. Utiliza una paleta de colores limitada, secciones de colores sólidos y tipografía de gran tamaño para lograr efectos gráficos. Esto hace que la información sea fácil de acceder y leer, guiando la mirada del espectador hacia las espectaculares imágenes sin distracciones innecesarias.
Diseños con aire retro y un toque dulce
La nostalgia fue señalada como una de las grandes tendencias de diseño web para 2023. Dos sitios web que nos encantaron este mes combinan un aire retro con una paleta de colores modernizada que evoca tanto rosas millennial como tonos brillantes de la Generación Z.
También son un recordatorio de que la inspiración retro no tiene por qué significar una estética exagerada. Puedes usar elementos de diseño más sutiles, como iconos, texto, imágenes o colores, que evoquen las sensaciones de una época específica sin parecer un disfraz.
Resumen del año de Webflow
El resumen del año 2022 de Webflow se inspira en el diseño de la Era Atómica, popular desde los años 40 hasta los 60. Al igual que los patrones comerciales de esa época, utiliza una enérgica variedad de elementos gráficos como estrellas, flechas, texto e imágenes. Los elementos también se superponen y utilizan ángulos inclinados (en diagonal en lugar de alineados con la página), al igual que gran parte del diseño gráfico de mediados de siglo.
Una tipografía genial para el encabezado aporta un toque extra de diversión al diseño. Los colores más vivos y un desenfoque gaussiano que crea un efecto de glassmorphism en el fondo anclan el diseño en la actualidad, a pesar de sus claros elementos retro.
Las letras tipo burbuja, las ilustraciones coloridas y los degradados que cambian al hacer scroll aportan un aire divertido, juguetón y caprichoso al diseño. Expresa a la perfección la alegría y el entusiasmo del último año en Webflow.
What IF
El sitio web de What IF tiene una estética noventera moderada. El fondo utiliza una cuadrícula de papel milimetrado y hay gráficos tipo pegatina por todas partes, incluyendo cabezas de alienígenas, caras sonrientes e iconos de ratón pixelados. Incluso hay un efecto de ventana emergente que llama la atención sobre su nombre, que también sirve de introducción a su sección principal. Es un efecto divertido, especialmente con varios huevos de pascua ocultos por todo el sitio, junto con una animación de carga retro.
Otro elemento muy bien logrado es el efecto al pasar el ratón sobre los sitios de ejemplo que presentan. Un suave resplandor detrás de cada uno ayuda a que resalten, y cada imagen se desplaza suavemente hacia arriba, dando al espectador una mejor idea del sitio completo. Es una forma inteligente y eficaz de mostrar de lo que son capaces.
Se presentan a sí mismos como "No la típica agencia de sitios web", por lo que el ambiente retro y divertido del sitio ayuda a comunicar esa perspectiva.
Efectos al pasar el ratón que mantienen el minimalismo en los diseños
Los efectos al pasar el ratón son una interacción que puede utilizarse para añadir interés visual e interactividad a un diseño. ¡Pero no solo son útiles para la estética! También pueden incorporarse para ayudar a que un diseño parezca menos saturado visualmente, al tiempo que ofrecen un acceso sencillo a textos e imágenes.
Grace Walker
El portafolio de Grace Walker es sencillo, directo y eficaz. Prescinde de gran parte del texto que normalmente ocuparía la mayor parte de un diseño. En su lugar, utiliza una cuadrícula de cajas coloridas con capturas de pantalla de sus trabajos anteriores en cada una. Esto permite que su diseño sea el verdadero protagonista de su portafolio.
Aun así, los visitantes necesitan saber más sobre cada sitio, por lo que añade un efecto al pasar el ratón para revelar el título, las etiquetas y los enlaces. Es una forma eficaz de simplificar el sitio sin sacrificar los detalles necesarios.
Raca Design Studio
Raca Design Studio, de Marcin Mikołajczyk, también utiliza un efecto al pasar el ratón para reducir la saturación visual. Sin interacción, el sitio es un sutil tono bicolor de azul y gris, casi como un plano arquitectónico. Cuando el ratón pasa sobre una imagen, esta florece en todo su color o convierte una ilustración arquitectónica en un renderizado 3D completo.
El resultado es un sitio sofisticado, apropiado para un estudio de arquitectura y diseño de interiores, que permite que las imágenes de sus trabajos brillen por sí solas.
Empieza gratis
Crea sitios web personalizados y escalables, sin escribir código. Empieza a construir en Webflow.
Animaciones de scroll que educan y entretienen
El scroll vertical puede ser una forma sencilla de navegar por una página web, o puede utilizarse de formas más creativas. Añadir un elemento narrativo o una animación interesante motivará a los visitantes a seguir explorando tu sitio.
Pablansh
El sitio de portafolio de Juan Pablo Sanchez, Pablansh, es una maravilla visual y cuenta con ese tipo de animación de scroll introductoria que estimula la mente.
A medida que los visitantes bajan desde la sección principal, los elementos visuales caen de la página y tres textos ondulados se desplazan por todo el sitio. Es un efecto tan agradable que los visitantes podrían encontrarse subiendo y bajando solo por diversión.
Automator Wrapped 2022
Automator Wrapped 2022 de Diagram es un ejemplo perfecto de narrativa mediante scroll. A medida que los visitantes bajan por la página, el sitio los guía a través de los logros y hitos más emocionantes que su comunidad alcanzó el último año. Los usuarios pueden interactuar con cada sección y explorar un recuento increíblemente impresionante de las actividades del año pasado.
Este diseño es clonable, lo que lo convierte en una opción fantástica para que los usuarios de Webflow experimenten y aprendan técnicas muy útiles.
Diccionario para no diseñadores
Un placer de usar y realmente útil, el Diccionario para no diseñadores de Unknw Studio es un diccionario interactivo que los diseñadores pueden enviar a sus colaboradores para asegurarse de que todos hablen el mismo idioma.
Como bien sabe cualquiera que haya diseñado para clientes, a veces la falta de un lenguaje común es el mayor obstáculo para entenderse y hacer realidad una visión compartida. Es una herramienta muy práctica para enviar a cualquier persona con la que trabajes.
El diccionario se presenta como un juego interactivo, con un cuestionario al final. El efecto de scroll funciona casi como una cinemática de videojuego retro, añadiendo diálogos y términos a medida que el visitante baja hacia la sección del diccionario. Es cautivador e intrigante: una forma muy efectiva de presentar la herramienta.
Crea algo para compartir con la comunidad en Made in Webflow
La vitrina de Made in Webflow es el lugar ideal para buscar inspiración o compartir los proyectos que has creado, ya sea por trabajo o por pura diversión. ¡Quizás hasta aparezcas en el resumen del próximo mes!
