Si ve programas de mejoras para el hogar en la televisión, la frase más repetida podría ser "diseño de concepto abierto". ¿Sabía que también puede crear un diseño de concepto abierto en el diseño de sitios web? Esta tendencia de diseño es más que una idea para mejorar el hogar.
Los conceptos abiertos son un patrón visual divertido y funcional que puede ayudar a los usuarios a navegar por su sitio web mientras controlan el desorden digital. ¡Así es como lo hace con 10 casos de estudio y ejemplos!
Primer concepto abierto
En el diseño del hogar, un diseño de concepto abierto es aquel en el que se combinan múltiples espacios de una manera que tiene un flujo que maximiza el espacio de una habitación a otra, como un plano grande para una cocina y un espacio para vivir.
? el flujo visual debe ser obvio para los usuarios, para que sepan exactamente qué hacer?En diseño web, el concepto es muy parecido. Un diseño de concepto abierto crea un excelente flujo entre los elementos de forma brillante y aireada. El diseño maximizará el uso del espacio en blanco y utilizará elementos simples con mucha armonía, equilibrio y un flujo simple.
El uso del color puede ser en negrita o simplificado y las páginas pueden incluir un desplazamiento corto o largo.
Estos diseños a menudo funcionan mejor con un plan y flujo detallados para el diseño que termina en una sola llamada a la acción. Tratar de mezclar y combinar demasiados elementos y piezas puede resultar en un diseño desordenado. La clave a tener en cuenta cuando se trabaja con una tendencia de diseño de concepto abierto es que el flujo visual debe ser obvio para los usuarios para que sepan exactamente qué hacer con el diseño y cómo navegarlo.
GrowX
GrowX utiliza una gran combinación de espacio en blanco, imágenes y texto limpios y una característica interesante con un título arqueado para mezclar elementos en un espacio abierto.
El efecto de capas utilizado aquí con texto e imágenes es una técnica común con diseños de concepto abierto. El uso de capas puede ayudar a dibujar al usuario de un elemento a otro y mantener el flujo visual en movimiento.
La precaución con los diseños de concepto abierto es que los usuarios pueden perderse en el espacio. ¿Gracias a un astuto? Truco? y los elementos en capas, los usuarios saben dónde buscar en este sitio web.
NooFlow
Si bien la mayoría de las ideas de conceptos abiertos te hacen pensar inmediatamente en un espacio en blanco que en realidad es blanco, NooFlow demuestra que el color puede ser igualmente impresionante.
El diseño mezcla elementos con un diseño equilibrado de texto versus imagen en una estética de pantalla casi dividida. Lo que lo une todo es que, si bien es brillante, la paleta de colores es simple. Al eliminar otros tonos, el diseño abierto tiene un flujo que se siente simple y anima a los usuarios a moverse a través del diseño.
Desgaste abierto
Open Wear utiliza un concepto completo de pantalla dividida pero con imágenes direccionales que empujan a los usuarios en la dirección del contenido.
Este diseño se ve aún más abierto gracias a la elección de fotos. El contenido aquí se presta a un montón de blanco en las imágenes que equilibran el fondo blanco. En general, el contorno visual se siente fresco y fresco a pesar de que hay muchos elementos y puntos de entrada visuales.
Piensa en este mismo diseño con una foto a la izquierda que es mayormente oscura. Cambiaría todo el concepto de diseño y el flujo.
Brightscout
Brightscout crea el flujo de forma diagonal desde el logotipo y la navegación a los elementos de texto a una imagen (o viceversa, dependiendo de a dónde vaya primero el ojo).
El concepto abierto aquí se ve y funciona de manera muy similar al plano de una casa utilizando la técnica de diseño del mismo nombre. Hay distintos puntos de entrada con líneas imaginarias que le indican al usuario a dónde ir a continuación.
Y la llamada a la acción se acentúa con un gran botón y color. La funcionalidad es obvia y fácil.
Duotix
El uso exagerado del espacio es un tema común cuando se trata de conceptos abiertos. El espacio le dice al usuario dónde termina una cosa y comienza otra.
Duotix utiliza este patrón de espacio en todo el diseño para crear una distinción visual entre los bloques de contenido, cada uno con sus propias llamadas a la acción. Además, en el pergamino, se alternan fondos blancos y de colores para ayudar al usuario a moverse. (Ahí es donde entra el flujo de concepto abierto)
Pagos populares
Con el desplazamiento de paralaje y, animación simple y márgenes extremos, PopularPays crea múltiples espacios para el contenido al tiempo que establece la funcionalidad.
Las imágenes y el texto son atractivos, especialmente cuando se combinan con efectos animados.
Lo bueno de este diseño es que muestra que múltiples tendencias pueden funcionar en conjunto para crear algo que no sea abrumador pero que tenga un aspecto claramente moderno. Se necesita el tipo correcto de contenido para llevar a cabo un diseño con múltiples tendencias y, en general, los planes de contenido más simples funcionan mejor.
Abel
Como algunos de los otros ejemplos, Abel coloca elementos en capas para que el ojo se mueva de un elemento a otro. Lo bueno de esta versión del plan de concepto abierto es que gran parte del espacio está en la parte superior de la página con los elementos más pesados a continuación.
El mismo tema visual continúa en el desplazamiento con espacio por encima y por debajo de los elementos para crear espacios separados en el diseño de concepto abierto.
Este ejemplo muestra que no todos los sitios de comercio electrónico tienen que tener una sensación completa y desordenada para ser eficaces.
Hampshire Light
La belleza del diseño Hampshire Light es que utiliza un diseño web de concepto abierto para un producto de diseño para el hogar. (¡Habla sobre las tendencias que se mueven de lo digital a lo físico!)
Lo que hace que este diseño funcione es el uso de espacios asimétricos y colores brillantes. Todo sobre el diseño implica una sensación abierta y aireada, desde detalles en amarillo hasta una tipografía transparente sobre la imagen hasta la apertura. logo.
Otro detalle clave en este diseño es el espaciado de línea exagerado. El tipo de letra sans serif más ligero podría haber sido una elección arriesgada, pero gracias a las líneas cortas de texto y espacio, contribuye a la sensación general del diseño de concepto abierto.
Hombres que caminan
Con una animación sutil, colores suaves y mucho espacio, Walking Men puede hacerte pensar en techos altos y posibilidades. La estructura de diseño simple incluye un elemento de contenido por página con una divertida función de hacer clic para desplazarse.
La estética es abierta y constante, y el usuario tiene la sensación de moverse de un espacio a otro, a pesar de que está parado (teóricamente) en el formato de una página.
Quid
Crux podría encarnar el concepto de plano abierto de mi propia casa, con los elementos de diseño más pesados empujados hacia los bordes exteriores.
El logotipo del centro y la llamada a la acción proporcionan un punto focal obvio para que los otros elementos no aparezcan desordenados o fuera de lugar. La navegación de la página inferior lo reúne todo como una hoja de ruta para el diseño de la pluma que podría ser un poco difícil para algunos usuarios navegar con su forma casi redonda sin puntos de entrada o salida distintos.
Conclusión
Es muy probable que ya esté incorporando algunos conceptos abiertos a sus diseños. ¿Es esta una tendencia que te gusta?
Vemos la tendencia de diseño de concepto abierto como algo con cierto poder de permanencia porque está arraigado en la teoría del diseño. Los diseños que usan bien el espacio nunca pasarán de moda (incluso si lo que llamamos tiende a cambiar con el tiempo).