Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
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 este patrón de diseño 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:
Cuál de los dos posibles sitios web estás diseñando actualmente? pic.twitter.com/ZD0uRGTqqm
— 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;. En amplio y elegante fondo amarillo tiene la misma altura que la ventana (viewport) gracias al empleo de la propiedad nativa de CSS height: 100vh;.
Aprende más sobre este tipo de técnicas CSS:
CSS7 Unidades de Medida CSS Que Posiblemente Desconozcas
CSSRevisión de la Propiedad CSS Background
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.
Sigue Desplazándote Por Favor ↓
El peligro de usar un diseño a pantalla completa como introducción es que los usuarios podrían no darse cuenta de que no van a encontrar nada más si se desplazan. Nuestra propia página de inicio, aquí en Envato lo hace evidente mediante un icono de desplazamiento, sugiriendo que deberías echar un vistazo hacia abajo.
Blandy opta por animar el desplazamiento del usuario a través de un icono en forma de flecha acompañada del texto que dice “mira más abajo”.
La página de inicio de Kindeo usa una técnica que me gusta; se asegura de que una pequeña área de la siguiente sección sea visible al final de la ventana. También existe una flecha con el texto “Descubre Más” de forma que el usuario nunca dude de que hay algo más si continúa desplazándose hacia abajo.
Kiani ha escogido un enfoque dudosos al usar un sonido de fondo que se reproduce de forma automática; hay un botón para silenciarlo al fondo a la derecha. Su forma de indicarte que te desplaces hacia abajo también es interesante – fijando una instrucción al cursor que dice “Scroll Down” (Desplázate hacia abajo).
Vídeo
Damir Kotorić, que fue diseñador de experiencia de usuario aquí en Envato, empezó Falcon Films como resultado de su pasión por la fotografía aérea. Así que es razonable que hiciese uso del formato en vídeo para gran parte de la página de inicio de Falcon Films; observa el fondo creado con el elemento <video>, y después el fantástico montaje de vistas realizadas con un dron sobre Melbourne.
De nuevo, Damir ha usado CSS nativo min-height: 100vh; para crear una gran sección a pantalla completa.
Landscape muestra prácticamente el mismo efecto; una pantalla completa, vídeo que se reproduce de forma automática con un tráiler adicional, pero usa JavaScript para conseguir la pantalla completa. El archivo de vídeo en formato mp4 que se autoreproduce tiene un tamaño de 1.3Mb, pero no hay nada más que ocupe tu ancho de banda.
Estilo
Algo que no hemos mencionado todavía es qué nos puede proporcionar un diseño a pantalla completa: ¡un canvas! Usar el espacio para presentar un producto, una empresa, una idea, es el objetivo de este patrón. Elimina todos el contenido que pudiese distraer y se centra en un mensaje central y la personalidad.
El anterior ejemplo de Landscape usa un atractivo color azul cobalto (una de las razones por las que me encanta), Voog hace algo similar, y tiene un aspecto genial.
Aunque siempre lo menciono – esta imagen es un duotono, así que podemos reducir fácilmente sus 540kb de tamaño. Un poco de desenfoque, después reducimos la calidad del JPG al 50%, lo que lo reduce a 50Kb sin comprometer para nada el efecto final.
La conferencia Bloomberg Businessweek Design (¿vas a ir?) usa un diseño con una tipografía abstracta para dar su acento. ¿Diseño convergente? Aquí no.
¿He mencionado alguna vez el Proyecto de Traducción de Envato Tuts+? Posiblemente. En cualquier caso, a mi me encanta la muestra del script RTL de este tema – mira Proland, una plantilla para página de aterrizaje creada con Bootstrap con varias opciones de diseño de página.
¿Has entendido el concepto?
La página de inicio a pantalla completa es un patrón que no vamos a ver desaparecer en breve. ¿Por qué iba a ser así? Es una forma eficaz de introducir a los usuarios en sitios web de cualquier tipo. ¿Cuáles son tus favoritos? ¿Has visto este patrón en algún otro sitio con mejores o peores resultados? ¡Cuéntanoslo a través de un comentario!
By
