Diseño UI, Diseño UX, Diseño web

Cinco maneras de diseño web para pantallas grandes

Los diseñadores web normalmente son personas que les gusta diseñar en grande y con una resolución alta.

Pero sin embargo, muchos sitios web no están a la altura del potencial prometido por las pantallas grandes, o incluso el presentado por los teléfonos con resolución HD.

Esto se debe a que vivimos en un primer mundo móvil, con personas que utilizan el móvil primero y tenemos que crear sitios web que se puedan usar en pantallas pequeñas.

Todo eso está muy bien, y no va a cambiar a corto plazo. Pero las pantallas grandes tampoco van a ninguna parte. La gente aún trabaja en oficinas, en casa y en cafeterías con ordenadores portátiles y de escritorio. La gente todavía tiene un pequeño ordenador de familia en casa. Los jugadores de PC “gamers” están comprando algunas de las pantallas más grandes, junto con los fotógrafos y editores de vídeo.

Y este grupo de personas a menudo se quedan con experiencias diseñadas para pantallas de rango medio a pequeñas. Es probable que esto no les suponga un problema en la experiencia de usuario para ellos, pero ¿por qué no deberían tener una experiencia adaptada a sus necesidades? Además, ¿para qué sirve todo ese espacio de pantalla extra, si no para jugar con él? Aquí hay algunas maneras de aprovechar las pantallas más grandes, junto con algunos ejemplos:

1 Grandes imágenes laterales

Una de las formas más comunes en que las personas intentan usar el espacio vacío es colocando imágenes en él. Todos hemos visto sitios web que utilizan alguna foto de archivo como fondo, especialmente en la sección “hero” de la página de inicio. Esto está en todas partes.

No es la peor manera ni la mejor de hacerlo. Mientras que la compresión de la imagen está mejorando, esas imágenes aún consumen el ancho de banda, en el almacenamiento en caché o sin almacenamiento en caché. Si deseas ahorrarte y a tu CDN algún problema, mejor con SVG. Funciona, y funciona de maravilla. Mira bebold para ver un ejemplo perfecto, de cómo usar imágenes SVG simples para llenar un poco de espacio mientras mantiene el ancho de banda.

2 Escalado del diseño

Todos sabemos cómo funciona el diseño “responsive”, Se ha vuelto mucho más fácil con CSS Grid, pero realmente lo cambia todo.

Con todo ese tiempo que te queda, ¿por qué no ver lo que puedes hacer cuando dejas que la división central de envoltura sea más ancha que 1.200 px? Para un ejemplo absolutamente creativo (aunque un pesa un poco en cuanto a ancho de banda), ver Seedlip.

3 Escalado de tipografías

Hay a veces que no quieres molestarte tanto con las fotos. Tal vez solo quieres un gran texto. Sin embargo, hemos tenido varias iteraciones en el diseño receptivo durante años. Lo que ha sido más difícil es escalar nuestra tipografía hacia arriba y hacia abajo según la resolución de la pantalla de una manera que parezca natural y fluida. Puedes hacerlo con unas pocas consultas de medios, pero la función de CSS nos cubre si queremos hacerlo de la manera más fácil.

Para ver un ejemplo de la técnica en acción, CSS-Tricks.

4 Solo pon mas cosas en la pantalla

Como minimalista, no es bueno bombardear al usuario con información en general. Sin embargo, hay ocasiones en que esto es exactamente lo que quieren y necesitan. Los casos de uso más claros para este enfoque son las interfaces de usuario de estilo panel de control y el comercio electrónico tradicional. En cualquiera de estos casos, si se está utilizando el máximo espacio posible para la funcionalidad y/o los productos, en realidad se está ralentizando al usuario cuando es posible que no se desee eso.

La mayoría de los diseñadores ya están a bordo. Sin embargo, veo más y más plantillas de sitios de ecommerce que intentan agrupar productos en áreas pequeñas en pantallas grandes, y eso tiene poco sentido.

Ahora, donde me opongo a este enfoque es en los sitios de noticias. Aunque algunos siguen usando la pantalla completa, hacen que el contenido sea lo suficientemente grande como para que no haya demasiada información en la ventana al mismo tiempo, lo que alienta a desplazarse hacia abajo y elegir realmente sus artículos. Claro, lo hacen para mostrar más anuncios, pero esta podría ser una de las pocas veces que los anuncios han ayudado a mejorar una experiencia. Mas o menos.

5 Video

Y por último. No estoy realmente seguro de que se esté haciendo mal. Aún así … si vas a usar el video de forma extensiva en tu sitio de todos modos, y no estás demasiado preocupado por el ancho de banda, hazlo a lo grande. Es un video, para eso es. Si no es nada más, al menos da a las personas la opción de ver sus videos en modo de pantalla completa. Para ver ejemplos en acción: + Ring.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies