10 exemplos dramáticos de telas de splash em web design

Quer fazer uma entrada dramática? Quer aquecer os visitantes antes de surpreendê-los com suas animações impressionantes, experimentos com bibliotecas de ponta ou apenas design engenhoso? Então você provavelmente deve colocar seus olhos em uma tela inicial.

Tendo vindo do mundo do software de desktop, conseguiu se enraizar com sucesso no design da web. É rápido, rápido, leve, relativamente simples e poderoso. Sempre falamos sobre como os primeiros segundos podem fazer muita diferença. Tudo deve ser perfeito desde o início. E as telas iniciais são um daqueles componentes da aplicação web que estão diretamente ligados ao sucesso desta missão.

A maioria pensa que a área do herói está por trás da criação dessa preciosa primeira impressão. No entanto, existem aqueles artistas de código escrupulosos e diligentes que adoram pontilhar os i's e cruzar os t's, acreditando que cada segundo conta. Bem, é assim que é.

Quanto mais cedo você começar a agradar seu público online, melhor a primeira impressão que você causará. É por isso que estamos testemunhando várias soluções originais nesta arena. De fato e de fato, eles abrem a conversa entre o site e o público. E se você acha que um carregador não tem a capacidade de mostrar sua criatividade, as telas iniciais certamente têm algum potencial.

Fazendo uso da tela cheia

Com uma animação inicial, a tela inteira está à sua disposição, não apenas um pequeno elemento. São como sequências de créditos de abertura de filmes que prometem ao público algo incrível, despertando assim o interesse.

Smoke T por Tedd Arcuri

O Three.js não é um bom companheiro para criar introduções rápidas e leves, mas no caso de Tedd Arcuri certamente funciona. Aqui, o efeito de fumaça altamente realista habilmente reproduzido é usado para melhorar a aparência da letra “T”. Este último é puramente simbólico aqui, pois pode ser facilmente transformado em um logotipo, mascote ou título.

.

Página inicial de Timothy Giblin

A maioria das telas iniciais andam de mãos dadas com a identidade da marca. Por exemplo, página inicial de Timothy Giblin. É uma tela inicial 100% clássica que apresenta a identidade da marca enriquecida com o pensamento criativo de um artista. O autor nos mostra como aderir à média áurea. Seu conceito é original e ao mesmo tempo modesto. Ele revela apenas um logotipo, mas essa descoberta chama a atenção.

Animação de tela inicial por Hitesh Sahu

Este exemplo é menos impressionante do que a solução de Timothy Giblin, mas é mais prático e pode ser visto em todos os lugares nos dias de hoje. Em essência, é apenas um carregamento lento levado para o próximo nível. Ele revela os elementos da página inicial um a um de forma divertida e criativa, tornando as coisas muito mais interessantes.

Existem alguns trechos de código mais interessantes. Vamos explorar a coleção juntos e encontrar a melhor combinação para o seu próximo projeto.

Soluções clássicas

Procurando usar uma abordagem mais testada e comprovada para sua tela inicial? Os exemplos abaixo ajudarão você a chegar lá.

Splash Screen por Adam Blum

Um efeito de deslizamento tradicional está por trás da beleza da solução de Adam Blum. Inclui um fundo limpo e puro e várias frases-chave que aparecem uma após a outra. Ele aproveita o poder da antecipação: a maneira primitiva, mas viável, de despertar o interesse de um usuário.

Jogue em Nirajan

Para tornar a solução anterior um pouco mais interessante, você pode adicionar manipulações com um plano de fundo como Niranjan fez nesta caneta. Seu projeto Play On apresenta lindas transições deslizantes entre as telas de sobreposição semitransparentes aplicadas ao pano de fundo da imagem. Bonito e divertido.

Meu respingo por Williams

My Splash by Williams é outro exemplo representativo de uma tela inicial clássica. O conceito tem duas etapas. Num primeiro momento, a animação revela a assinatura do autor em um ritmo moderado e confortável. Depois, uma tela preta aparece. Esta é uma solução elegante, elegante e profissional que se adapta a vários projetos.

Splash Screen animado por Dmytro Lvivsky

Tela inicial animada por Dmytro Lvivsky é um ponto de partida perfeito para criar sua própria solução. A animação baseada em JavaScript tem várias telas e uma transição tradicional entre cada uma. Este último é baseado em um efeito onde um círculo conduz a peça.

Veja a tela inicial animada da caneta por Dmytro Lvivsky (@UnforbiddenYet) no CodePen.

Desvanecimento CSS3 Simples por Giles Papworth

Aqui está uma solução incrivelmente simplificada. A rotina consiste em mostrar blocos de textos um a um, acompanhados por um efeito de desvanecimento consagrado pelo tempo. No entanto, ele faz tudo o que deveria. E, o mais importante, faz isso sem “comer” seus preciosos recursos porque usa apenas CSS3. É simples, elegante, modesto e leve.

O criador de humor

Os exemplos a seguir mostram que uma tela inicial também pode ser usada para definir o tom de um site desde o início.

Animação de carregamento do console por Andrew Tunnecliffe

Por exemplo, se você é um programador, a animação de carregamento do console de Andrew Tunnecliffe estabelecerá uma atmosfera adequada. É old-school, é brutalmente simples e combina perfeitamente com qualquer portfólio pessoal para um desenvolvedor.

Números em queda de Thibault Jan Beyer

Se você tem um projeto baseado em estatísticas ou baseado em dados em mente, Falling Numbers de Thibault Jan Beyer é um bom começo para sua experiência de contar histórias. A animação abre com números caindo que eventualmente atingem o chão e abrem a tela principal. Tem um charme geométrico enriquecido com algum tempero digital.

Por último, mas não menos importante

Para muitas pessoas, Stan Lee sempre será o “irmão nerd de Bruce Lee”. Para nós, ele é um ícone que estava por trás de um universo onde o bem triunfa sobre o mal e que estará em nossos corações para sempre.

Marvel Splash Screen por Matt Feinstein

Marvel Splash Screen de Matt Feinstein não é exatamente uma homenagem, mas todos os fãs de super-heróis vão gostar. O título fala por si só. Sua animação splash tem uma vibe maravilhosa de quadrinhos. É uma réplica de uma sequência de abertura de filmes da Marvel que parece incrível.

Como fazer um respingo

As telas de respingo podem ser usadas como alternativa aos carregadores – a menos, é claro, que sejam pesadas. Infelizmente, ainda existem pessoas que os levam muito a sério e tentam transformá-los em uma parte de uma peça repleta de ação.

Splash screens em web design são eficazes desde que sejam rápidos, curtos, leves e diretos ao ponto. Claro, eles dão a você a tela inteira para mostrar sua genialidade. Ainda assim, você deve manter sua missão original. São splashes que devem despertar o interesse e passar imediatamente o bastão para uma solução mais empolgante.