Los diseños a pantalla completa se han convertido en un patrón habitual en la web actual. Algunos los adoran, otros se muestran más reacios, pero sean cuales sean tus sentimientos, veamos algunos ejemplos destacados de esta tendencia en el diseño web y hablemos al mismo tiempo de las mejores prácticas.
Un apunte sobre la convergencia en el diseño
El término “convergencia del diseño” hace referencia a la manera en la que los diseños sufren una tendencia a parecerse unos a otros, acabando por converger con el transcurrir del tiempo. Recientemente @jongold tuiteó lo siguiente al respecto:
which one of the two possible websites are you currently designing? pic.twitter.com/ZD0uRGTqqm
— Jon Gold (@jongold) 2 de febrero de 2016
Su argumento es que los diseñadores carecen de creatividad en la actualidad, y en lugar esr creativos, emplean las convenciones más próximas y aceptables cuando diseñan páginas web. La explosión de los diseños a pantalla completa es una muestra de esto. Estamos nosotros, como diseñadores, tomando el camino fácil usando este patrón? ¿Estamos ignorando la oportunidad de ampliar los límites e innovar? ¿Está estancándose la web a causa de la pereza?
O, como Paul Boag afirma, ¿somos solo una mera parte de lo que se está gestando en la escena del diseño web? ¿Estamos creando lo que quieren los usuarios; lo que esperan, y por tanto haciendo que nuestros productos sean más fáciles de usar?
“Cuanto más permanece un elemento más se estandariza su diseño” – Paul Boag
Dejo la respuesta a tu criterio. Mientras tanto, ¡echemos un vistazo a algunos diseños a pantalla completa!
De arriba abajo, de izquierda a derecha
Muchos sitios web con diseños a pantalla completa son precisos respecto a sus dimensiones, usando JavaScript o CSS para asegurarse de que la sección inicial visible sea exactamente del mismo tamaño que la actual ventana del navegador. Una vez hecho esto, algunos posicionamientos con CSS podrán colocar los elementos en los extremos, incluso aunque la ventana sea redimensionada.
Makeshift usa este patrón para fijar una segunda navegación en la parte inferior de la pantalla, con algunos enlaces anterior/siguiente a la izquierda y a la derecha. La imagen del fondo usa background-size: cover en un elemento figure de gran tamaño.
Ideas es un tema WordPress a pantalla completa con varias opciones para sliders, introducciones, páginas de inicio, presentaciones, etc. Hace uso de un degradado en la parte inferior de la pantalla para que la imagen del título y la descripción sean más legibles.
James Tupper surge desde el margen inferior de la pantalla, posicionando la imagen gráfica de su rostro con background-position: center bottom;. El amplio y elegante fondo amarillo tiene la misma altura que la ventana (o viewport) gracias al empleo de la propiedad nativa de CSS height: 100vh;.
La revista sobre estilo de vida Lagom, cuya concepción se debe a Elliot Jay y Samantha Stocks, usa una página de inicio que ocupa toda la pantalla. No existe desplazamiento o “scrolling” (a menos que la visualices en una pantalla de pequeñas dimensiones). Lagom usa el borde inferior para ubicar sus enlaces sociales.
Soul es una plantilla para Shopify, y uno de sus diseños consiste en un slider con enlaces de navegación posicionados a la derecha.
Lo que te queda por leer:
-
Sigue desplazándote por favor ↓
-
Vídeo
-
Estilo
Deja una respuesta