Internet de alta velocidade Moderna fez-nos realmente estragados. Hoje em dia, se um website demora mais de 4 segundos a carregar, tendemos a não nos preocupar sequer em esperar; simplesmente fechamos a página e encontramos outra coisa. É exactamente por isso que os desenhadores estão a demorar algum tempo a encontrar pré-carregadores criativos como esta divertida bolinha saltitante.
O que é um pré-carregador?
Essencialmente, os pré-carregadores (também conhecidos como carregadores) são o que se vê no ecrã enquanto o resto do conteúdo da página ainda está a carregar. Os pré-carregadores são muitas vezes animações simples ou complexas que são utilizadas para manter os visitantes entretidos enquanto as operações do servidor terminam o processamento. Infelizmente, também são frequentemente ignorados no processo de desenvolvimento da maioria dos projectos.
Porque é importante um pré-carregador?
Os pré-carregadores são importantes elementos de interface que permitem aos visitantes saber que o sítio web não falhou, é apenas o processamento de dados. São normalmente concebidos como faixas móveis ou círculos intermitentes que representam o tempo necessário para carregar, que, embora funcionais, não são nada divertidos. Animações interessantes podem manter os utilizadores envolvidos enquanto esperam que a página carregue.
Designers trabalham arduamente para tornar o tempo de espera menos incómodo para os visitantes do sítio, mas esta pode ser uma tarefa muito difícil se não houver a inspiração certa (e os conhecimentos mais recentes).
O que deveria ser um grande pré-carregador?
Nos últimos anos, a maioria dos projectos foram desenvolvidos com carregadores simplificados como a melhor prática recomendada. As animações complexas dos carregadores não têm sido populares há algum tempo, porque costumavam ocupar muitos recursos para trabalhar, atrasando ainda mais o processo de carregamento da página. Contudo, com o poder de processamento a aumentar, a era dos carregadores simples está a chegar ao fim.
Hoje em dia, uma animação bem concebida e criativa proporciona uma oportunidade para animar a sua interface. Este pequeno, mas importante detalhe contribui para a individualidade e marca de qualquer produto.
Por esta razão, compilámos e curámos a seguinte lista de exemplos de pré-carregadores brilhantes, engraçados e únicos (incluindo alguns dos próprios designs SteelKiwi) para o ajudar a si e à sua equipa de design a encontrar alguma inspiração!
30 dos melhores designs de pré-carregador por aí
Deslizando Square LoaderView
Este carregador quadrado deslizante torna a espera um pouco menos frustrante, uma vez que mantém os seus olhos em movimento juntamente com os quadrados. Uma grande solução para as empresas que vendem electrónica ou jogos online para manter os seus visitantes envolvidos com o website.
DotsLoaderView
As bolas pretas saltitantes que aparecem do nada e desaparecem servem como um elemento de entretenimento e podem ser usadas para websites que querem parecer apresentáveis mas com uma pitada de brincadeira.
Simple Loader
Este é um exemplo perfeito de um pré-carregador semelhante a um tambor que se assemelha a uma roda de lotaria giratória. Se um empresário quiser fazer uma ligação lógica entre este carregador e a aplicação que possa implicar oportunidades, sorte ou excitação, então este ecrã de carregamento deve servir as suas necessidades.
Bird Loader
Estas formas geométricas simples lembram um pássaro a virar a cabeça para a esquerda ou para a direita como se estivesse a falar com alguém. Esta animação pode fazer um bom pré-carregador para sítios com negócios na indústria da televisão, rádio ou meios de comunicação social.
LittlePin Spinner
Aplicações com serviços baseados em viagens ou localização podem tornar o carregamento muito mais apelativo utilizando o pequeno geopin colorido que vira para trás e para a frente.
No Halftime Loaders Petrick
Uma animação emocionante com diferentes tipos de bolas em movimento faz com que os visitantes esqueçam que isto é apenas um carregador. Este carregador poderia complementar qualquer website com eventos desportivos, actividades, ou inventário desportivo.
Monkey Swinging Loader Hello Dribbble
Love animals? Aqui está um carregador disfarçado – um macaco oscilante. Sendo divertido e divertido, pode atrair os utilizadores enquanto esperam que a página seja carregada. Os negócios que estão na indústria do entretenimento, tais como revistas, filmes, marketing, publicidade, ou aqueles que simplesmente se querem destacar entre a multidão e desenhar um sorriso nos rostos dos visitantes podem usá-lo.
Carregador de cobre
O pré-carregador de cobre em forma de laço de eternidade move-se suavemente como uma onda hipnotizante. O carregador com o seu design limpo e minimalista e animação suave é aplicável a quase todos os negócios.
Carregando…
Aqui está a gota que nunca cai. O branco e o azul submisso contrastam bem juntos, e este pré-carregador nunca fará o visitante aborrecido ou frustrado com a carga. As empresas que gostariam de apelar às gerações mais jovens poderiam usar este ecrã de carregamento.
Carregador de ping-pong
O carregador de ping-pong, com a sua animação de borracha com uma pá e uma bola, não pode ajudar a tirar os olhos de cima dele. É suposto aquecer os visitantes antes de acederem efectivamente ao conteúdo de um website. Este carregador é bom para sites desportivos ou quaisquer outros sites que ofereçam desde actividades desportivas até ao inventário.
Carregador de aplicações SurveyPlanet
O planeta turquesa com um foguetão branco em órbita mantém a atenção dos visitantes no ecrã de pré-carregamento. Este carregador de planeta pode ser utilizado para aplicações de entretenimento, ou qualquer outra organização que faça investigação ou faça várias descobertas conhecidas do público.
Carregador de engrenagens turquesa
Um carregador de engrenagens turquesa com as três rodas dentadas encarna o movimento e a complexidade e pode ser apropriado para empresas que comercializam maquinaria ou peças mecânicas.
CSS Stairs Loader
A carregadora de escadas descendente e ascendente com uma bola branca a saltar no topo tem um desenho minimalista, mas é muito simples. Pode fazer sentido para as empresas que se queiram apresentar como sérias e de confiança.
P>Caneta carregadora
Com um leve toque de simplicidade, os círculos coloridos tipo lagarta que se movem para a esquerda ou para a direita e vêm como um de cada lado tornam o carregamento menos aborrecido para os visitantes. O carregador é apropriado para quase todos os tipos de negócios com a sua animação universal, e deve manter os visitantes entretidos enquanto esperam para aterrar na página inicial.
CSS Loader
Um simples carregador “chama a atenção” como este cubo rolante que se torna maior ao avançar e volta à sua forma inicial ao voltar, é uma solução reservada para negócios que querem parecer inteligentes e sofisticados para o visitante.
br>Vivid CSS3 Spinner
O carregador de spinner vívido com o arco-íris rotativo que rola numa espécie de forma geométrica em forma de flor pode animar os visitantes e ajudá-los a prepararem-se para algo divertido e excitante. Este carregador pode ser usado para empresas que comercializam os seus produtos ou serviços a crianças. Deve funcionar bem para sítios de educação infantil.
Tela de carregamento do prisma
A tela de carregamento do prisma deve lembrar um dos fundos do LinkedIn para fotografias. O carregador assemelha-se remotamente a constelações que se movem no espaço com o elemento principal no meio, que poderia potencialmente apresentar um logótipo corporativo. O carregador poderia ser utilizado para empresas que trabalham com clientes internacionais, por exemplo no sector B2B.
Loader
Variedade? Aqui está o carregador que mantém um visitante entretido, deixando-o ver uma contagem decrescente acompanhada de animação variável de diferentes imagens. Tenha em mente, que este carregador pode ter qualquer imagem a rodar de modo a poder satisfazer as necessidades de qualquer negócio.
Carregador de redireccionamento
Aqui está uma silhueta de homem com um jetpack nas costas a voar o mais rápido que pode. Este carregador que redirecciona um utilizador para a página seguinte pode ser utilizado por quase todas as empresas, especialmente as que gostariam de destacar o elemento velocidade do seu serviço.
P>Ponto de Carregamento de Codepen
P>Ainda de um desenho minimalista e sucinto, este pré-carregador de pontos poderia ser utilizado por pessoas artísticas ou designers para os seus portfolios online, por exemplo.
Animação do Pré-carregador
Não deveria este pré-carregador lembrar um jogo de serpentes? Esta animação de ícones de energia com uma ficha pode fazer sentido para os fornecedores de Internet ou quaisquer outras agências que ajudam empresas e clientes a colaborar.
Fazer Panquecas
Pancakes directamente do fogão! O carregador com uma panqueca virada sobre a frigideira deve fazer a boca de um visitante com água. Pode ser um bom começo para websites dedicados a cozinhar ou assar.
P>Carregador simples
Se o dono de um negócio não é exigente quanto ao seu pré-carregador e gostaria de o manter simples, aqui está um simples com um rectângulo que se divide.
Animação de carregador
Aqui está uma colecção de carregadores animados por SVG personalizados com diferentes formas e formas geométricas básicas. Os proprietários de empresas que querem manter a seriedade podem explorar a limpeza destes carregadores com vários fins de design.
Carregamento de Animação Manual
Esta animação manual parece nunca parar de bater com os dedos como se estivesse sempre à espera de algo. Ela transmite a sensação que as pessoas podem sentir enquanto esperam e pode ser utilizada por empresas que se esforçam por manter um grande sentido de humor sobre si próprias.
Preloader de Árvore
O pré-carregador de árvores alimentado por SVG e CSS é uma animação pura para aparecer em aplicações familiares ou médicas. A árvore espalha gradualmente os seus ramos que parecem estar a respirar, tornando a animação agradável de ver.
Preloader de Viagem
Aqui é um pré-carregador aplicável a negócios de viagens e de aluguer de transportes. O ecrã de carregamento muda o tipo de veículo acompanhado pelo texto para melhorar a impressão global.
br>Car Drift Loader
Este carregador de vagões de deriva alimentado por SVG é outra solução não convencional para websites que comercializam veículos. No entanto, se tomado figurativamente, o pré-carregador pode ser utilizado para websites ou aplicações relacionadas com vários eventos sociais que tragam excitação às pessoas e causem uma impressão duradoura.
Cabeça de deriva
E uma cereja no topo! Aqui está um pré-carregador com uma pitada de humor – por muito duro que o personagem da pastilha elástica ande à volta da sua cabeça, é demasiado pesado e grande para se mover, e ele parece gostar.
Grandes Exemplos de Pré-carregamento de Animações de Página
Aqui estão 5 websites com pré-carregadores eloquentes para que possa desfrutar!
1. W. Brett Wilson
Outro ecrã de carregamento criativo pode ser encontrado no website de W. Brett Wilson. Uma silhueta de um homem a correr numa roda de hamster e um texto que aparece como um slideshow mantém o visitante entretido e envolvido com o website, ao mesmo tempo que complementa o seu design.
2. Сreative Сruise
O website do cruzeiro criativo foi construído para convidar as pessoas a celebrar a vibração criativa de Amesterdão. Para enfatizar a atmosfera antes mesmo de um visitante aterrar na homepage, um homem de aspecto hilariante que está a dançar breakdance aparece no ecrã de carregamento. A personagem utilizada no pré-carregador faz todo o sentido, uma vez que a página inicial está cheia de personagens iguais a dançar e a festejar.
3. Opencontinents
Aqui está um website construído para a exploração cinematográfica na narração global de histórias. A animação de Open Continents é um pré-carregador bem disfarçado com estrelas dançantes num círculo de carrossel. A animação é sedutora com o seu elemento interactivo onde um utilizador pode dirigir o seu cursor sobre o círculo e ver como as estrelas se espalham ao longo dele. Este pré-carregador complementa a Terra que aparece na página inicial. A ideia é incorporar movimento e mistério, motivando os visitantes a explorar o site, mantendo-os entretanto interessados.
4. Kokopako
Websites como Kokopako (criado sob a forma de um portfólio) podem fazer bom uso dos pré-carregadores, acrescentando toque pessoal e significado ao conteúdo de um site. O ano de 1987 é um pré-carregador de contagem decrescente que aprofunda a narrativa do sítio web, ao mesmo tempo que está bem integrado na página inicial.
5. McWhopper.com
McWhopper’s website foi criado para comercializar uma proposta especial de McDonald’s e Burger King. O pré-carregador do website é muito apelativo para os primeiros visitantes com o seu hambúrguer animado que salta como se estivesse num trampolim, dando uma oportunidade de ver todos os ingredientes e tornando a experiência de espera mais agradável. Além disso, o pré-carregador faz uso de texto e adapta-se bem ao design geral do sítio.
Mais recursos do pré-carregador
Esperamos que esta lista o inspire a desenvolver um grande design do pré-carregador para o seu projecto!
Para ainda mais exemplos de carregadores criativos, pode também explorar esta mostra dos melhores pré-carregadores de websites feitos com Gifs animados, CSS3, Canvas, ou outras técnicas baseadas em Javascript, aprender com este post sobre a criação de carregadores animados usando apenas CSS, e ler através deste post sobre a criação de animações personalizadas para diminuir as suas taxas de salto.
Não tem tempo para construir o seu próprio? Há muitos pré-carregadores que podem ser usados gratuitamente (ou por um preço pequeno). Consulte preloaders.net ou navegue através desta lista de pré-carregadores e spinners gratuitos para web designers e programadores.
Se tiver quaisquer outras perguntas sobre o design de pré-carregadores, ou se precisar de um design verdadeiramente único e original para um pré-carregador seu próprio, contacte a nossa equipa e nós arranjaremos o carregador perfeito que transformará o seu projecto em algo realmente inesquecível!
Aplique pré-carregadores na sua página inicial e designs de páginas de destino.