Share
El toque de pantalla completa es uno de los patrones más familiares en la web en este momento. Algunos lo aman, otros lo detestan, pero cualquiera que sea su opinión, echemos un vistazo a algunos ejemplos notables y hablemos de las mejores prácticas mientras estamos en ello..
El término "convergencia de diseño" se refiere a la forma en que los diseños tienen la costumbre de volverse similares, convergente, a través del tiempo. Recientemente @jongold tuiteó lo siguiente:
¿Cuál de los dos sitios web posibles estás diseñando actualmente? pic.twitter.com/ZD0uRGTqqm
- oro (@jongold) 2 de febrero de 2016
Su punto era que los diseñadores carecen de creatividad en estos días, en lugar de buscar la convención aceptable más cercana al diseñar páginas web. El splash de pantalla completa es un ejemplo perfecto de esto. ¿Estamos, como diseñadores, tomando el camino fácil utilizando este patrón? ¿Estamos ignorando la oportunidad de empujar fronteras e innovar? ¿Está la web quieta debido a la pereza??
O, como afirma Paul Boag, ¿somos simplemente parte de lo que es una escena de diseño web madura? ¿Estamos construyendo lo que los usuarios quieren? lo que esperan, y por lo tanto hacen que nuestros productos sean más fáciles de usar?
“Cuanto más largo es un objeto, más se estandariza su diseño” - Paul Boag
Te lo dejo a ti decidir. Mientras tanto, echemos un vistazo a algunos diseños web en pantalla completa.!
Muchos sitios web de pantalla completa son precisos sobre sus dimensiones, utilizan JavaScript o CSS para asegurarse de que la sección visible inicial es exactamente El mismo tamaño que la ventana del navegador actual. Una vez hecho esto, algunas posiciones de CSS pueden colocar elementos en los extremos, incluso si se cambia el tamaño de la ventana.
Ideas es un tema de WordPress a pantalla completa con varias opciones para presentaciones de diapositivas, presentaciones, páginas de inicio, etc. Utiliza un degradado ubicado en la parte inferior de la pantalla para que el título y la descripción de la imagen sean más legibles..
James Tupper se asoma desde la parte inferior de la pantalla al colocar el gráfico de su cara con posición de fondo: parte inferior central;. El enorme splash amarillo se hace elegantemente igual a la altura de la ventana gráfica usando CSS nativo altura: 100vh;.
Aprenda más sobre estas dos técnicas de CSS:
La revista de estilo de vida Lagom, una creación de Elliot Jay y Samantha Stocks, utiliza una página de inicio que llena la pantalla en su totalidad. No se desplaza aquí (a menos que se vea en una pantalla pequeña). Lagom usa el borde inferior para albergar sus enlaces sociales..
Soul es una plantilla de Shopify, y uno de sus diseños es un control deslizante de pantalla completa con enlaces de navegación ubicados a la derecha.
El peligro de usar la pantalla completa como forma de introducción es que los usuarios pueden no darse cuenta de que se puede encontrar más al desplazarse. Nuestra propia página de inicio de Envato niega esto con un ícono de "desplazamiento", sugiriendo que debería echar un vistazo debajo del pliegue.
Blandly opta por la alentadora flecha apuntando hacia abajo para decir "mira hacia abajo".
La página de inicio de Kindeo usa una técnica que me gusta; asegurándose de que una pequeña porción de la siguiente sección esté siempre visible en la parte inferior de la ventana gráfica. También hay una flecha con "Más información" para que el usuario nunca tenga dudas de que hay algo que se encuentra debajo del pliegue..
Kilani ha adoptado el enfoque bastante dudoso de la reproducción automática de sonido; hay un botón de silencio en la parte inferior derecha de la pantalla. Su manera de sugerirle que siga avanzando también es interesante: puede colocar una instrucción de "Desplazamiento hacia abajo" en el cursor del mouse:
Damir Kotorić, ex diseñador de UX en Envato, comenzó Falcon Films como resultado de su pasión por la fotografía aérea. Es razonable que el video juegue un papel importante en la página de inicio de Falcon Films; mira el fondo , A continuación, mire el showreel para ver imágenes del drone Melbourne.
Una vez más, Damir ha usado CSS nativo min-height: 100vh; para crear una sección de héroe de pantalla completa.
El paisaje logra casi el mismo efecto; una pantalla completa, reproducción automática de video con showreel adicional, pero utiliza JavaScript para obtener la pantalla completa. El archivo de video mp4 de reproducción automática en sí es de 1.3Mb, pero no hay nada más que obstruya el ancho de banda.
Una cosa que aún no hemos mencionado es lo que nos ofrece la pantalla completa: ¡un lienzo! Usar el espacio para presentar un producto, una empresa, una idea, es el punto central de este patrón. Elimina el desorden del resto del contenido y se centra en el mensaje y la personalidad..
El ejemplo de Landscape de antes usa un hermoso azul cobalto (una de las razones por las que me encanta) y Voog hace algo similar, que parece genial.
Aunque siempre lo digo, esta imagen es duotono, por lo que puede tener su 540Kb actual fácilmente recortado. Un poco de desenfoque, luego la reducción de la calidad de JPG al 50% lo reduce a alrededor de 50Kb sin comprometer el efecto en absoluto.
La Conferencia de diseño de Bloomberg Businessweek (¿vas?) Utiliza un diseño tipográfico abstracto para hacer su punto. ¿Convergencia de diseño? No aqui amigo.
¿Alguna vez he mencionado el Proyecto de Traducción Envato Tuts +? Posiblemente ... De todos modos, me encanta la demostración de RTL de este tema, echa un vistazo a Proland, una plantilla de página de inicio creada por Bootstrap con varias opciones de diseño de pantalla completa.
La página de inicio de pantalla completa es un patrón que probablemente no veremos desaparecer pronto. ¿Y por qué debería hacerlo? Es una forma efectiva de presentar a los usuarios sitios web de todo tipo. ¿Cuáles son algunos de tus favoritos? ¿Dónde más has visto este patrón usado, para bien o para mal? Háganos saber en los comentarios.!
Accentsconagua