Nuestro primer resumen de proyectos de 2023 analiza de cerca aquellos sitios que se sienten unificados, atractivos y fáciles de navegar.
Ya sea algo tan sencillo como usar fotografías llamativas o crear un menú intuitivo, puedes transformar un buen sitio web en una experiencia increíble.
Aquí tienes algunos de nuestros favoritos.
Dale un toque gráfico al diseño fotográfico
Últimamente, combinar el minimalismo con elementos gráficos audaces ha tomado el protagonismo en el diseño web. En particular, se ha puesto énfasis en la fotografía para que los sitios se sientan frescos, contemporáneos y emocionantes.
Cinch PR
El sitio web de la firma de relaciones públicas Cinch, con sede en San Francisco, es un gran ejemplo de cómo integrar fotografías en un diseño moderno. Al dar forma y superponer sus elementos gráficos, la fotografía se siente unificada y armoniosa dentro del diseño, en lugar de verse aislada como en una galería o caja de luz tradicional.
También nos encanta cómo el diseño utiliza muchas formas curvas, fondos e incluso tipografías serif gruesas y sinuosas. Las formas suaves y los arcos han sido tendencia tanto en el diseño gráfico como en el diseño de interiores, por lo que la combinación de estos elementos con colores neutros suaves hace que el sitio de Cinch se sienta muy actual.
Lo más interesante es cómo esos bordes curvos ayudan a que las imágenes se sientan más integradas con el resto del diseño. Las fotografías recortadas y superpuestas parecen puertas y ventanas, lo que añade profundidad y complejidad para que las imágenes formen parte de un todo en lugar de ser objetos independientes.
South Forty Snacks
El sitio web de South Forty Snacks, diseñado por Jesse Morrow en oldfriend.co y desarrollado en Webflow por Lauren Alexander, adopta un enfoque similar para integrar fotos en el diseño web, pero esta vez destacando las imágenes de producto.
Al igual que el sitio de Cinch PR, utilizan muchas formas curvas y recortes que resaltan con colores brillantes sobre un fondo neutro. El recorte más destacado es una imagen de producto de gran tamaño de una de sus barritas, que parece flotar sobre el fondo. Es grande, llamativa y cuenta con una sombra paralela que la hace resaltar visualmente. Incluso tiene una pequeña animación al hacer scroll para darle un toque divertido.
Otros trucos utilizados incluyen fotos dentro de formas que cortan los bordes como si fueran una ventana, además de sellos y texto superpuestos en algunas imágenes, lo que aporta profundidad visual y hace que se sientan más integradas con el resto del diseño. El nombre de la marca incluso se incorpora como espacio negativo en la imagen principal, fluyendo hacia el fondo a medida que te desplazas.
South Forty tiene un pequeño huevo de pascua interactivo en la esquina inferior derecha de su sitio en forma de una experiencia de visualización personalizable. Haz clic en el sol para cambiarlo por un estado de ánimo y montar una pequeña fiesta.
Portafolios minimalistas y bien pensados
El minimalismo no solo puede ser hermoso e intrigante, sino que también permite centrar la atención del espectador en lo más importante: el contenido del sitio. Esto lo hace perfecto para portafolios u otros sitios que exhiben trabajos y proyectos diversos.
Philipp Girzalsky
El sitio de portafolio de Philipp Girzalsky reduce el desorden visual que podría distraer de sus proyectos destacados. En su sitio, deja que la sección principal haga gran parte del trabajo. El elemento visual principal es su nombre, presentado en una tipografía cursiva de gran tamaño. Al usar letras inclinadas aleatorias, Philipp logra dar una sensación de movimiento y romper el diseño limpio del texto del encabezado, aportando un mayor interés visual.
También añade profundidad al fondo neutro con líneas sutiles e incluye su foto de perfil como una imagen recortada. Sin un fondo recargado, los visitantes pueden centrarse realmente en su imagen, creando una conexión personal y un toque humano.
Nos encanta cómo Phillipp colocó sus enlaces de Dribbble y LinkedIn en burbujas flotantes que se mueven, dándole un toque peculiar a un sitio por lo demás refinado.
Descubre diseños inspiradores de la comunidad de Webflow
Made in Webflow es el lugar ideal para explorar, clonar y personalizar los sitios web más recientes creados por la comunidad de Webflow.
Breanna Beckmeyer
Al principio, el portafolio de la diseñadora web Breanna Beckmeyer parece un diseño sencillo de texto y fotos sobre un fondo negro. Sin embargo, a medida que haces scroll, el fondo cambia de color con el movimiento de tu ratón. Es un truco sencillo pero eficaz para que el visitante se involucre más mientras explora su trabajo.
Además, los trabajos inacabados de Breanna, como su proyecto para Zoom, desenfocan la imagen principal con un mensaje de "próximamente". Es una forma más creativa de informar al lector sobre sus proyectos.
Animaciones interactivas entretenidas, con opciones de navegación accesibles
Las animaciones al hacer scroll son una forma muy entretenida de estructurar un sitio web. Estos sitios incorporan todo tipo de movimientos y reacciones creativas a medida que el usuario baja por las páginas. Sin embargo, no siempre es el sistema de navegación más accesible o cómodo para todos los usuarios. Los siguientes diseñadores integran menús claros y sencillos en sus sitios animados para hacerlos divertidos y accesibles.
Resumen del año 2022 de Refokus
Refokus crea sitios web magníficos, y su sitio de Resumen del año 2022 no es la excepción. Incorpora elementos móviles y animaciones entre secciones que resultan visualmente atractivos y separan las partes de la página. Los cambios de color de fondo y el texto animado también le dan un aire más narrativo al resumir su año.
Sin embargo, hacer scroll no es la única forma de navegar por el sitio. En la esquina superior derecha hay un menú siempre disponible para quienes necesiten ir a una sección específica. Un detalle sutil y eficaz que han añadido es la barra de progreso en el menú. A medida que bajas, los botones vacíos del menú se rellenan, indicándote en qué sección estás y cuánto contenido te queda por ver.
The Flow Party
El proyecto social The Flow Party se define como divertido, y esa diversión se refleja en todo su sitio web. Si tu marca es una fiesta, ¡tu web también debería sentirse festiva! Incluso la cara animada que sigue al puntero de tu ratón en la primera parte de la página es entretenida.
Su navegación al hacer scroll desplaza las páginas visualmente, casi como si pasaras las hojas de un calendario. Incorporan bordes ondulados en algunos fondos de sección para que "fluyan" igual que su nombre, y las interacciones entretenidas hacen que la experiencia de navegar por su sitio sea aún más dinámica.
Han optado por ocultar su menú en una tarjeta situada en la parte superior central de la página. Al hacer clic en la pestaña con el símbolo de hamburguesa, el menú se despliega para que puedas navegar con botones, y un botón de "volver arriba" al final evita que tengas que hacer scroll hasta el principio para recuperar información.
Al combinar elementos interactivos con una navegación fácil de usar, Flow Party logra ofrecer una experiencia divertida sin sacrificar la funcionalidad.
Kin
El portafolio de diseño de Kin Virtual Studio es tan intrigante como visual. La página de inicio atrae al visitante con una mezcla de animaciones, clips de vídeo y fotos de sus proyectos que pasan como en una presentación. Puedes verlos pasar o hacer clic para ver los detalles de cada proyecto.
Sin embargo, no limitan a los usuarios a una sola forma de ver sus proyectos. Al hacer clic en su página de Trabajos en la barra de navegación superior, tienes la opción de ver su portafolio en un formato de galería más tradicional. Ofrecer a los usuarios varias opciones para ver tu sitio es una forma estupenda de respetar sus necesidades y preferencias, manteniendo la libertad creativa para construir sitios ingeniosos.
Comparte tu propia creatividad en diseño gráfico, animación o navegación en Made in Webflow
Cada mes, la página principal de Made in Webflow destaca trabajos interesantes, creativos y emocionantes de los diseñadores que crean en la plataforma Webflow. Comparte tu próximo sitio con la comunidad de Webflow y quizás aparezcas en el resumen del mes que viene.
