El diseño de sitios web con una estética de pantalla dividida es una tendencia que sigue evolucionando y creciendo. Un diseño de pantalla dividida puede ser bueno por varias razones, incluida la compatibilidad móvil y la facilidad de uso. Además, muchos de estos diseños se ven geniales!
Los cambios en la tendencia muestran que hay tantas formas diferentes de crear un diseño de pantalla dividida efectivo que a los usuarios les encantará. ¡Considera esta introducción al diseño de pantalla dividida en la nueva y mejorada era!
Beneficios del diseño de pantalla dividida
Funcionan bien cuando hay dos bits de contenido que el usuario necesita ver de inmediato. Los diseños de pantalla dividida siguen creciendo en popularidad porque pueden ser altamente efectivos. Funcionan bien cuando hay dos bits de contenido que el usuario necesita ver de inmediato. Esta misma idea se aplica al contenido que requiere que el usuario tome una decisión para continuar, como elegir una ruta de contenido.
Los diseñadores utilizan el diseño de pantalla dividida porque son efectivos. Las principales razones para usar un diseño de pantalla dividida son:
- Anime al usuario a hacer una elección - elija esto o aquello
- Resaltar una imagen vertical.
- Crea una experiencia común en dispositivos de escritorio y móviles.
- Establecer un flujo visual distinto (a una llamada a la acción)
- Establecer un patrón de diseño que funcione con otras técnicas y tendencias de diseño.
- Cree una imagen visual que se distinga de tantas páginas de héroes de pantalla completa o diferencie los tipos de contenido en un sitio web
Lo mejor de los diseños de pantalla dividida es que funcionan a la perfección con el formato de respuesta. Obtiene el contenido doble en el escritorio y el contenido apilado en las pantallas móviles. Independientemente del dispositivo, el usuario no siente que se haya perdido nada cambiando el tipo de dispositivo.
?¿Clásico? Diseño de pantalla dividida
Puede que sea un poco pronto llamar a la estética del diseño de pantalla dividida "clásico", pero teniendo en cuenta la velocidad con que se mueven las tendencias de diseño web, eso no está fuera de lo razonable.
Hemos estado escribiendo sobre el diseño de pantalla dividida aquí desde 2015. Se presentó como una tendencia de diseño superior de 2017 y una tendencia que debe probar en 2018. Entonces, ¿qué está esperando?
Aquí es por qué nos gustó entonces (y ahora):
- El diseño de pantalla dividida puede ser una buena opción para marcos sensibles. 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 la animación y los efectos que fomentan los clics basados en el contenido proporcionado.
- Dos paneles simétricos facilitan la creación de un esquema modular para el diseño completo del sitio y la organización del contenido dentro de los bloques.
Pantallas divididas en desarrollo
Hay un cambio a pantallas divididas de diseño más mínimo. Si bien los primeros diseños de pantalla dividida fueron bastante simples, y simétricos, ya no es la historia completa. Los diseñadores siguen utilizando algunas de las divisiones de igual peso, pero también trabajan en divisiones que no están en la mitad de la pantalla.
Algunas cuentan con más patrones en zig-zag, divisiones basadas en cuadrícula (piense en pantallas de tres cuartos y de un cuarto) y pantallas de división con ponderaciones de contenido desiguales. También hay un cambio a pantallas divididas de diseño más mínimo.
Originalmente, las pantallas divididas solían tener un poco de peso porque estaban diseñadas para llevar al usuario en un viaje a través de un canal de contenido adecuado y el contenido debe ayudarlo a llegar allí. Ahora esa elección se está optimizando aún más. (Incluso hay algunos diseños de pantalla dividida que usan el patrón visual sin una opción o la otra, como el ejemplo anterior).
Dividir pantallas con múltiples áreas de clic
Uno de los cambios más grandes en la tendencia de diseño de pantalla dividida es que hay varias áreas de clic en algunos de los diseños más nuevos. Donde originalmente las pantallas divididas tenían dos CTA por pantalla, estas divisiones a menudo contienen otra información y áreas seleccionables.
El ejemplo anterior muestra una pantalla dividida con una imagen fuerte y mensajes combinados con enlaces de comercio electrónico. Se ve genial en los equipos de escritorio: con la gran imagen para atraerlo y se acumula en el móvil, lo que hace que la experiencia de compra sea más placentera.
Pantallas divididas no tan obvias
No todos los diseños de pantalla dividida son super obvios. (Tenga en cuenta que esto es tanto una tendencia de experiencia de usuario como una visual).
En diseños mínimos, se puede establecer una pantalla dividida con el uso de una cuadrícula, pero sin color o imágenes, ¿las pantallas? parezca uno Owl Studios, arriba, hace esto bien. Sobre el rollo, parece un diseño de una sola pantalla, debajo del rollo y en el móvil, la división se vuelve más obvia.
Este diseño de pantalla dividida es hermoso y altamente utilizable en todos los dispositivos. Eso es exactamente lo que debería intentar lograr con esta tendencia de diseño de sitios web.
Una palabra de precaución
Si bien trabajar con pantallas de división vertical puede crear experiencias de usuario sorprendentes, debes tener cuidado con las divisiones horizontales. ¡Esto puede volverse incómodo y volverse un poco desconcertado rápidamente!
La mayoría de los usuarios esperan el mismo sitio web en todos los dispositivos.El ejemplo anterior es realmente un buen sitio web y utiliza principios de pantalla dividida muy por debajo del desplazamiento, pero ¿las dos primeras pantallas? faltar. Hay casi demasiado espacio en blanco y no hay suficientes mensajes para fomentar el desplazamiento y falta la UX móvil. El diseño funcionaría mejor con una pantalla dividida vertical aquí, manteniendo el espacio en blanco y los CTA con el video al lado.
Una pantalla dividida horizontal a menudo te deja con imágenes con un área de imagen amplia que no es alta. Esta es una relación de aspecto difícil de hacer funcionar en pantallas móviles. Si bien puede hacer que funcione con un plan sólido y un conjunto diferente de cultivos, puede llevar a dos experiencias de usuario diferentes.
La mayoría de los usuarios esperan el mismo sitio web en todos los dispositivos. Si planea crear diferentes experiencias, incluso solo con imágenes o texto, tenga una buena conversación al respecto con su equipo y asegúrese de que esta sea la mejor opción de diseño para el proyecto.
6 diseños de pantalla dividida que amamos
Alcance digital
Paradise Pad
Nikos Pandazaras
Weima
Dr. Roebuck's
Conclusión
¿Puedes ver el uso de un diseño de pantalla dividida en tus proyectos? Si el tipo de contenido es correcto, esta puede ser una técnica de diseño altamente efectiva. Y hay muchas maneras diferentes de hacerlo funcionar. ¡Buena suerte!