10 ejemplos dramáticos de pantallas de bienvenida en diseño web

¿Quieres hacer una entrada dramática? ¿Desea calentar a los visitantes antes de sorprenderlos con sus asombrosas animaciones, experimentos con bibliotecas de alta gama o simplemente un diseño ingenioso? Entonces probablemente deberías poner tus ojos en una pantalla de bienvenida.

Procedente del mundo del software de escritorio, ha logrado arraigarse con éxito en el diseño web. Es rápido, rápido, ligero, relativamente simple y potente. Siempre hablamos de cómo los primeros segundos pueden marcar una gran diferencia. Todo debe ser perfecto desde el principio. Y las pantallas de bienvenida son uno de esos componentes de la aplicación web que están directamente vinculados al éxito de esta misión.

La mayoría por ahí piensa que el área del héroe respalda la creación de esta preciosa primera impresión. Sin embargo, hay artistas de códigos escrupulosos y diligentes que adoran puntear las i y cruzar las t, creyendo que cada segundo cuenta. Bueno, así son las cosas.

Cuanto antes comience a aumentar su audiencia en línea, mejor será la primera impresión que hará. Es por eso que estamos presenciando varias soluciones originales en este campo. De hecho y de hecho abren la conversación entre el sitio web y la audiencia. Y si cree que un cargador no tiene la capacidad de mostrar su creatividad, entonces las pantallas de bienvenida ciertamente tienen algún potencial.

Hacer uso de la pantalla completa

Con una animación de bienvenida, toda la pantalla está a su servicio, no solo un elemento pequeño. Son como secuencias de crédito de apertura de películas que prometen al público algo increíble, lo que enciende el interés.

SmokeT de Tedd Arcuri

Three.js no es un buen compañero para crear introducciones rápidas y livianas, sin embargo, en el caso de Tedd Arcuri, ciertamente funciona. Aquí el efecto de humo altamente realista y reproducido hábilmente se utiliza para mejorar la apariencia de la letra “T”. Este último es puramente simbólico aquí, ya que se puede cambiar fácilmente a un logotipo, mascota o título.

.

Página de bienvenida de Timothy Giblin

La mayoría de las pantallas de presentación van de la mano con la identidad de la marca. Por ejemplo, la página Splash de Timothy Giblin. Es una pantalla de presentación 100% clásica que presenta una identidad de marca enriquecida con el pensamiento creativo de un artista. El autor nos muestra cómo adherirnos al medio dorado. Su concepto es original y al mismo tiempo modesto. Descubre solo un logotipo, pero este descubrimiento llama la atención.

Animación de pantalla de bienvenida por Hitesh Sahu

Este ejemplo es menos impresionante que la solución de Timothy Giblin, sin embargo, es más práctico y se puede ver en todas partes en estos días. En esencia, es solo una carga perezosa llevada al siguiente nivel. Revela los elementos de la página de inicio uno por uno de forma juguetona y creativa, haciendo las cosas mucho más interesantes.

Hay algunos fragmentos de código más interesantes. Exploremos la colección juntos y encontremos la mejor combinación para su próximo proyecto.

Soluciones clásicas

¿Desea utilizar un enfoque más probado en su pantalla de inicio? Los siguientes ejemplos lo ayudarán a llegar allí.

Pantalla de bienvenida de Adam Blum

Un efecto deslizante tradicional respalda la belleza de la solución de Adam Blum. Incluye un fondo limpio y puro y varias frases clave que aparecen una tras otra. Aprovecha el poder de la anticipación: la forma primitiva pero viable de despertar el interés de un usuario.

Play On de Nirajan

Para que la solución anterior sea un poco más interesante, puede agregar manipulaciones con un fondo como lo hizo Niranjan en este bolígrafo. Su proyecto Play On presenta hermosas transiciones deslizantes entre las pantallas de superposición semitransparentes aplicadas al fondo de la imagen. Agradable y divertido

My Splash de Williams

My Splash de Williams es otro ejemplo representativo de una pantalla de presentación clásica. El concepto tiene dos etapas. Al principio, la animación revela la firma del autor a un ritmo moderado y cómodo. Luego, aparece una pantalla en negro. Esta es una solución elegante, elegante y profesional que se adapta a numerosos proyectos.

Pantalla animada de bienvenida de Dmytro Lvivsky

Animated Splash Screen de Dmytro Lvivsky es un punto de partida perfecto para crear tu propia solución. La animación con JavaScript tiene varias pantallas y una transición tradicional entre cada una. Este último se basa en un efecto en el que un círculo lidera la jugada.

Vea la pantalla de bienvenida animada de la pluma de Dmytro Lvivsky (@UnforbiddenYet) en CodePen.

Desvanecimiento CSS3 simple por Giles Papworth

Aquí hay una solución increíblemente simplificada. La rutina consiste en mostrar bloques de textos uno por uno, acompañados de un efecto de desvanecimiento tradicional. Sin embargo, hace todo lo que debería. Y, lo más importante, lo hace sin “comer” sus recursos preciosos porque solo usa CSS3. Es simple, elegante, modesto y ligero.

El humorista

Los siguientes ejemplos muestran que una pantalla de inicio también se puede utilizar para establecer el tono de un sitio web desde el primer momento.

Consola cargando animación por Andrew Tunnecliffe

Por ejemplo, si usted es un codificador, la animación de carga de la consola de Andrew Tunnecliffe establecerá una atmósfera adecuada. Es de la vieja escuela, es brutalmente simple y combina perfectamente con cualquier cartera personal para un desarrollador.

Falling Numbers por Thibault Jan Beyer

Si tiene en mente un proyecto basado en estadísticas o basado en datos, Falling Numbers de Thibault Jan Beyer es un buen comienzo para su experiencia narrativa. La animación se abre con números descendentes que eventualmente tocan el suelo y abren la pantalla principal. Tiene un encanto geométrico enriquecido con algunas especias digitales.

Por último, si bien no menos importante

Para muchas personas, Stan Lee siempre será el “hermano nerd de Bruce Lee”. Para nosotros, él es un ícono que estaba detrás de un universo donde el bien triunfa sobre el mal, y que estará en nuestros corazones para siempre.

Marvel Splash Screen de Matt Feinstein

Marvel Splash Screen de Matt Feinstein no es un tributo exactamente, pero todos los fanáticos de los superhéroes lo disfrutarán. El título habla por sí mismo. Su animación de bienvenida tiene un maravilloso ambiente de cómic. Es una réplica de una secuencia de apertura para películas de Marvel que se ve increíble.

Cómo hacer un chapoteo

Las pantallas de bienvenida se pueden usar como una alternativa a los cargadores, a menos que, por supuesto, sean pesadas. Desafortunadamente, todavía hay personas que los toman demasiado en serio y tratan de transformarlos en una parte llena de acción de una obra.

Las pantallas de bienvenida en el diseño web son efectivas siempre que sean rápidas, cortas, livianas y directas al punto. Por supuesto, te dan la pantalla completa para mostrar tu genio. Aún así, debes seguir con su misión original. Son salpicaduras que deberían despertar interés e inmediatamente pasar el testigo a una solución más emocionante.