Una pantalla dividida en dos. Esta podría ser una de las mayores tendencias de diseño que están surgiendo en este momento. Cada vez más sitios web utilizan patrones de diseño que incluyen dos paneles verticales o cuadrados colocados uno al lado del otro.
Y es una bonita estética. El aspecto es fácil de usar, se puede adaptar para una variedad de necesidades y ayuda a guiar la navegación. Es una tendencia que es probable que veamos más, y diseñemos, en los próximos meses. Hoy estamos viendo algunos ejemplos excelentes de diseño de pantalla dividida con mini estudios de casos y descubriendo cómo puede aprovechar al máximo esta tendencia de diseño.
3 cajas para diseño de pantalla dividida
Entonces, ¿por qué querrías dividir tu diseño en dos? Si me hicieras la pregunta sin ver los resultados, también podría haberla cuestionado. Pero hay un caso bastante bueno para probar un concepto de pantalla dividida.
- Es una buena opción para los marcos de respuesta. En pantallas más grandes, el diseño está dividido, pero cuando se trata de pantallas más pequeñas, los paneles se pueden apilar.
- Es fácil trabajar en animaciones y efectos que fomenten los clics. Mira el modelo de gamificación utilizado para el? Chekhow is Alive? sitio arriba El diseño te ruega que hagas click para encontrar a tu personaje. (Y es muy difícil no dejarse atrapar.)
- Dos paneles simétricos facilitan la creación de un esquema modular para el diseño del sitio de relleno y la organización del contenido dentro de los bloques. Es casi una extensión de gran tamaño de los patrones de diseño de estilo de tarjeta que han ido creciendo en popularidad.
Ir negrita con color y tipografía
El color y la tipografía son grandes impulsores de tendencias, gracias a un mayor enfoque desde el diseño plano y de materiales. Combina los dos y terminas con una estética simple que puede ser interesante y atractiva.
Baesman ha hecho esto con maestría con el diseño de pantalla dividida. Dos paneles de colores brillantes y audaces son la primera introducción para este usuario. Cool estados flotantes? Expandir? los mensajes en cada panel casi piden a los usuarios que hagan clic más lejos. La selección del tipo de letra es simple, pero tiene el borde suficiente para hacer que se vea.
Haga clic en el sitio y es fácil ver que este concepto de pantalla dividida se transmite para ayudar a crear una sensación de flujo y organización. Si bien el resto del diseño no está tan perfectamente dividido como la página de inicio, el contenido se organiza en paneles a lo largo del diseño y el color brillante continúa.
Crear un espacio para mensajería
Una pantalla dividida es una excelente opción para crear un tema visual que pueda funcionar con contenido o imágenes desafiantes, o simplemente si desea crear un punto focal más grande para las llamadas a la acción. El truco para hacer que esto funcione es mucho espacio, limpiar tipografía y asegurarse de que el estilo de división (en el caso del ejemplo aquí, una superposición de color) complementa las imágenes.
BAO usa una imagen de héroe de pantalla completa detrás de un bloque de color con texto, navegación y una llamada a la acción. El diseño es interesante de varias maneras porque se rompe con algunos de los patrones a los que estamos acostumbrados, pero sin ser una confusión. Por ejemplo, la navegación (menú de hamburguesas) está cerca del centro de la pantalla y la imagen del héroe incluye solo un toque de animación con el cursor.
Estas cosas ayudan a atraer a los usuarios a la llamada a la acción en el tamaño izquierdo de la pantalla. Lo que es especialmente bueno de este diseño es que cada pantalla adquiere una página de inicio casi de su propio estilo, por lo que cada bit de contenido diferente se carga de manera equitativa. (Este tipo de tratamiento no es para cada proyecto, pero funciona especialmente bien para mostrar el trabajo de cartera o cliente).
Centrarse en una acción
El diseño de un sitio web en pantalla dividida también puede ser una reminiscencia de la impresión. Esto funciona particularmente bien con un marco minimalista que incluye una llamada a la acción distinta para los usuarios.
En el caso de Tree That Gives, el objetivo del sitio es fomentar las donaciones con el botón de color simple en el panel inferior derecho. La imagen solo sirve como punto de aterrizaje para los usuarios que llegan a la página, pero todo el contenido y la información importantes se encuentran en el otro panel. (Esta mitad del sitio web podría vivir solo en términos de contenido, pero no sería tan interesante visualmente).
Crear? Tarjetas?
El diseño de pantalla dividida realmente es un patrón derivado de la popularidad de las tarjetas. Muchos de estos sitios incluyen interacciones que están contenidas en un lado de la pantalla o en el otro, siguiendo un contenedor, una filosofía de clic que es característica de las interfaces estilo tarjeta.
Considere la posibilidad de expandir la pantalla dividida en múltiples contenedores para incluso más toques potenciales de cada usuario. Si le Soleil usa una pantalla dividida en todo el sitio; la gran diferencia es que el panel izquierdo es una tarjeta? Mientras que los paneles de la derecha contienen un par de cartas. Los simples efectos de desplazamiento indican al usuario el hecho de que cada uno de estos elementos se puede hacer clic y conducirá a otra acción. El diseño es limpio, está bien organizado y está diseñado para mantener a los usuarios haciendo clic.
Cambialo
Si bien muchos de los diseños que hemos visto hasta ahora se han centrado en una clara división izquierda-derecha con una línea dura entre los elementos, no siempre es así. Una pantalla se puede dividir visualmente usando otros elementos también.
El sitio de Warsaw Rising lo hace con sencillez y belleza. ¿Un bloque de texto es la línea divisoria? entre los paneles. Cada lado presenta una cara, recortada de manera similar en la pantalla y espaciada a la perfección. El desplazamiento cambia el texto del medio sin quitar el estilo del panel. El estilo casi inverso de la pantalla dividida, las imágenes en blanco y negro y los destellos amarillos hacen que destaque. El diseño general es dramático sin ser difícil de navegar o asimilar.
Conclusión
El diseño de pantalla dividida es algo que veremos mucho en los próximos meses. El patrón es simple, utilizable y funciona para varios tipos de sitios diferentes, como hemos examinado aquí.
El truco para hacer que funcione, ¿y no quedarse atascado en un? Sobre uso? diseño - es para agregar toques que lo hacen tuyo. Si eres grande en color, úsalo; Considere apilar elementos o simplemente alejarse un poco del centro. ¡Pero sobre todo diviértete!