4 formas de diseñar una página de inicio de pantalla dividida perfecta
Una pantalla dividida en dos.
La técnica de pantalla dividida se conoce desde hace mucho tiempo en la industria del cine, con ejemplos tempranos que se remontan a los días del cine mudo de principios del siglo XX, y todavía es un dispositivo popular en el cine y la televisión en la actualidad.
Se utiliza un diseño de pantalla dividida cuando los elementos de pantalla completa se dividen en dos o más partes verticales. Una escena de la película «Scott Pilgrim contra el mundo»
Sin embargo, esta es una técnica relativamente nueva para la industria del diseño web. Las pantallas divididas solo se hicieron populares a mediados de 2016 y ahora tenemos cada vez más sitios web que utilizan este patrón de diseño. Hay algunas razones por las que este patrón de diseño se volvió tan popular:
- Tiene una buena calidad estética. Cuando se ejecuta correctamente, puede ofrecer a los usuarios una experiencia de visualización maravillosa.
- Es una buena opción para marcos receptivos. El diseño de pantalla dividida se puede adaptar para una variedad de pantallas, incluso pequeñas. Cuando se trata de pantallas más pequeñas, como pantallas móviles, los paneles se pueden apilar.
- Ayuda a guiar la navegación. Usando técnicas de diseño simples, puede llamar la atención del usuario hacia una parte específica de la pantalla o alentarlo a hacer clic.
Cuando la pantalla dividida funciona mejor
La pantalla dividida es especialmente buena cuando tienes dos cosas que promocionar. Por ejemplo, cuando un sitio ofrece dos variaciones completamente opuestas. Este enfoque permite a los diseñadores dar protagonismo a ambas cosas y permitir al usuario seleccionar rápidamente entre ellas.
Una pantalla, dos mensajes en Guías de Dropbox
Cuándo debe evitar la pantalla dividida
Los diseños de pantalla dividida no se expanden bien a medida que crece el contenido, por lo que no se recomienda aplicarlos a diseños con mucho contenido. Es importante mantener las pantallas simples porque las complejas pantallas divididas hacen que la interfaz de usuario parezca sobrecargada de información. Es por eso que el diseño de pantalla dividida sería perfecto para diseños de sitios web minimalistas.
Cómo decidir si la pantalla dividida es buena para usted
Si está considerando una técnica de pantalla dividida para su sitio web, le aconsejo que se haga algunas preguntas:
- ¿Es adecuado para tu contenido?
- ¿Habrá suficiente espacio negativo para que el diseño funcione?
- ¿Tus usuarios apreciarán el diseño o los confundirá?
- ¿Estará bien dividir la atención de sus usuarios a la mitad?
Lo más importante a tener en cuenta es que el contenido es el rey y la pantalla dividida debería ser una forma sencilla de transmitir su mensaje a las personas.
Técnicas de diseño para pantallas divididas
1. Combina colores vibrantes y tipografía dramática
Gracias a Flat and Material Design, los colores vibrantes y la tipografía dramática son grandes tendencias ahora. Los colores vibrantes son visualmente estimulantes y la tipografía dramática realza el contenido del texto. Simplemente combine los dos y creará un diseño visualmente interesante. Baesman lo ha hecho con maestría. Dieron la misma importancia a ambos elementos y, al mismo tiempo, permitieron al usuario elegir entre ellos rápidamente.
Los colores brillantes y los pares de tipografías interesantes pueden agregar interés
2. Llame la atención del usuario sobre el botón CTA
Mucho más que una simple tendencia gráfica, dividir la pantalla en dos partes distintas proporciona una forma original de guiar al usuario a través de su sitio. Es una excelente opción cuando desea crear un punto focal más grande para las llamadas a la acción. En el siguiente ejemplo, puede ver cómo el espacio negativo crea una división vertical para dar la misma ponderación a dos opciones diferentes.
La división vertical permite enfatizar dos CTA diferentes sin favorecer a ninguno
3. Cree un flujo visual entre «pantallas»
Cuando la pantalla dividida representa un solo objeto, es importante establecer una conexión entre los contenedores de contenido. Una forma posible de hacerlo es utilizando un color. Simplemente duplique un color distinto para establecer un flujo visual entre dos pantallas. Esto funciona particularmente bien con un color o tono de marca con mucho contraste. Usando el color es posible comunicar una conexión más fuerte entre dos piezas de contenido.
Otra forma posible de crear una conexión sólida es superponer un solo elemento, como la copia de texto, en las pantallas:
El texto superpuesto conecta dos pantallas
Por último, pero no menos importante, puede utilizar una superposición de colores para este propósito:
Considere la parte izquierda de la pantalla
4. Utilice la animación para animar a los usuarios a actuar
La animación fina y los efectos interactivos animan a los usuarios a hacer clic. Mire el diseño utilizado para el «Chéjov está vivo”Sitio a continuación. El diseño te pide que hagas clic para encontrar tu personaje.
Conclusión
Un visitante tarda aproximadamente tres segundos en tomar una decisión con respecto a su sitio web. En consecuencia, sus diseños siempre deben ser amigables para los visitantes si desea reducir las tasas de rebote. La técnica de pantalla dividida puede ayudarte con eso. Los diseños de pantalla dividida son una forma divertida, funcional y receptiva de crear un diseño atractivo.
