Mientras navegaba recientemente por buenos diseños web en Twitter o a través de galerías de diseño web, noté una tendencia a usar bloques de contenido en tamaño y diseño variables para formar un diseño interesante estilo caja bento. Por lo general, se diseña en una cuadrícula, por ejemplo, 3×3, 4×4 u otras configuraciones, y luego se hace visualmente interesante siendo creativo con los tamaños de los bloques mientras se ajusta a la configuración de la cuadrícula subyacente.
En esta publicación, hablaré sobre cómo comenzó la tendencia y luego mostraré algunos ejemplos creativos de la aplicación de la interfaz de usuario del contenido de bento box en el diseño web. Entremos en ello.
Desde Unsplash
Muchos creyeron que la tendencia se inspiró en los videos promocionales de Apple en los que muestran una vista de cuadrícula de las especificaciones y características que se muestran a continuación. Fue único presentar las aburridas especificaciones en un estilo de cuadrícula visualmente interesante con variedad de aplicaciones visuales y tipográficas. A continuación se muestra el ejemplo que tomé como captura de pantalla del reciente video promocional de Apple Mac.
Sin embargo, algunos también podrían argumentar que el verdadero origen podría provenir de Microsoft cuando introdujeron el sistema de lenguaje de diseño Metro cuando presentaron Windows Phone 7. Ya sea quién fue el verdadero inspirador, definitivamente impulsó a muchos diseñadores de todo el mundo a crear el estilo de caja bento. diseño.
Vídeo promocional de Apple Mac
Apple iPhone 14 Pro
Apple continúa utilizando este diseño de caja bento en sus ofertas de productos recientes. En la página de inicio del iPhone 14 Pro, verá una introducción a las funciones de alto nivel presentadas de esta manera con una gran variedad de tratamiento visual para mantener el interés. Si bien tienen diferentes tratamientos visuales, el contenido no choca entre sí debido a la efectividad en el uso de texto de tamaño y degradado para guiar la vista del usuario.
iPhone 14 Pro
Tornillo
Bolt también utilizó la caja bento para transmitir las ofertas y características de los productos de un vistazo para brindar a los visitantes un alto nivel de lo que puede hacer y luego llevarlos a los mosaicos de video al final. Bolt utilizó un enfoque visual más consistente en cada uno de los mosaicos para que el contenido fuera más fácil de escanear. ¡Es una gran utilidad para comunicar funciones y llevarlos a ver más al final!
Tornillo
Lineal
De manera similar, los diseñadores de Linear utilizaron el diseño de caja bento para presentar la característica con el elegante estilo bento oscuro. Me gusta cómo se puede configurar para tener el contenido del texto en la parte superior o debajo de la imagen.
Lineal
Crónica
Chronicle es una herramienta de creación de presentaciones visualmente impresionante. Utilizó un estilo de caja bento más libre para comunicar muchos ejemplos de lo que se puede crear con la herramienta en un pequeño espacio disponible. Tiene mucho sentido usar este estilo aquí porque es exactamente lo que el usuario puede crear con él.
Crónica
Los artesanos
La agencia de desarrolladores The Craftsmen utilizó el estilo de caja bento predominantemente para errar… crear su sitio web. Es todo un placer visual desplazarse por su sitio web, revelando sus menús, trabajo e incluso formulario de contacto en la parte inferior de la página. Casi me hizo pensar que “pensar dentro de una caja” no es tan malo después de todo.
Los artesanos
Nev Flynn
Nev Flynn, desarrollador y diseñador de productos de Irlanda, vio un estilo de caja bento en la página de inicio. Lo usó para segregar de manera efectiva diferentes contenidos, como obras, enlaces a redes sociales, mapas, sus sabias palabras e incluso un bloque para alternar el modo claro u oscuro. ¡El estilo Bento Box sin duda es una forma refrescante de presentar quién eres!
Nev Flynn
Iconwerk
Al igual que Nev, Iconwerk utilizó el estilo de caja bento para mostrar sus mejores diseños de íconos. Cada uno de los cuadros de contenido se mantiene al mínimo para que al juntarlos todos, no se sienta ocupado. Sin duda, Iconwerk hizo un trabajo maravilloso en este sentido.
Iconwerk
tráfico
Uno de mis sitios de portafolios favoritos recientes, Traf usó una caja bento para diseñar sus trabajos de portafolios en un elegante diseño de temática oscura. Al hacer clic en cada trabajo como los íconos, verá más diseños de diseño inspirados en cuadrículas. ¡Verdaderamente inspirador!
tráfico
bento
Bento es uno de los sitios web de estilo “Linktree” recientemente populares para que cualquiera pueda crear su propia página personal. Como sugiere el nombre, utilizó una cuadrícula para formar los bloques de contenido que formaron el diseño de la interfaz de usuario de la caja bento. Puedes ser creativo al formar los bloques con diferentes tamaños y énfasis.
bento