4 maneras 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 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 sigue siendo un dispositivo popular en la actualidad por el cine y la televisión.
Un diseño de pantalla dividida está en uso cuando los elementos de pantalla completa están divididos en dos o más partes verticales. Una escena de la película "Scott Pilgrim vs the World"
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 más y más sitios web que usan este patrón de diseño. Hay algunas razones por las que este patrón de diseño se hizo 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 las más 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 simple, puede llamar la atención del usuario sobre una parte específica de la pantalla o alentarlos 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 importancia a ambas cosas y permite al usuario seleccionar rápidamente entre ellas.
Una pantalla, dos mensajes en las guías de Dropbox
Cuando debe evitar la pantalla dividida
Los diseños de pantalla dividida no se expanden bien a medida que el contenido crece, por lo tanto, no se recomienda aplicarlos a diseños de contenido pesado. Es importante mantener las pantallas simples porque las pantallas divididas complejas hacen que la interfaz de usuario se vea 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 utilizar una técnica de pantalla dividida para su sitio web, le aconsejo que se haga algunas preguntas:
- ¿Es adecuado para su contenido?
- ¿Habrá suficiente espacio negativo para que el diseño funcione?
- ¿Sus usuarios apreciarán el diseño o los confundirá?
- ¿Estará bien dividir la atención de los usuarios a la mitad?
Lo más importante a tener en cuenta es que el contenido es el rey y la pantalla dividida debe ser una forma sencilla de entregar tu mensaje a las personas.
Técnicas de diseño para pantallas divididas
1. Empareje el color vibrante y la tipografía dramática
Gracias a Flat and Material Design, los colores vibrantes y la tipografía dramática son ahora grandes tendencias. Los colores vibrantes son visualmente estimulantes y la tipografía dramática mejora el contenido del texto. Simplemente combine los dos y creará un diseño visualmente interesante. Baesman ha hecho esto magistralmente. Le dieron la misma importancia a ambos elementos, al tiempo que permitían al usuario elegir entre ellos rápidamente.
Colores brillantes y pares de tipografía interesantes pueden agregar interés
2. Atraer la atención del usuario al 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 gran opción cuando quieres 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 tampoco
3. Crear 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 mediante el uso de un color. Simplemente duplica un color distinto para establecer el flujo visual entre dos pantallas. Esto funciona particularmente bien con un color o tonalidad de marca con mucho contraste. Con el color, es posible comunicar una conexión más fuerte entre dos piezas de contenido.
Otra posible forma de crear una conexión fuerte es superponer un elemento como la copia de texto en las pantallas:
El texto superpuesto conecta dos pantallas
Por último, pero no menos importante, puedes usar una superposición de colores para este propósito:
Considera la parte izquierda de la pantalla
4. Use animación para alentar a los usuarios a actuar
La animación fina y los efectos interactivos alientan a los usuarios a hacer clic. Mira el diseño utilizado para el " Chekhov está vivo "Sitio a continuación. El diseño te pide que hagas clic para encontrar tu personaje.
Conclusión
El 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.