9 sites com animações que nos inspiram como criadores da web

Os criadores da web estão em uma busca incessante para atualizar seus sites com os efeitos de design mais modernos e modernos que representam o verdadeiro valor de seu produto ou serviço. Mas entre paletas de cores, tipografia, capacidade de resposta, estratégia de conteúdo e muito mais, a ideia de técnicas de design avançadas pode ser um tanto intimidante. Uma das melhores maneiras de conseguir um site cujo design valha a pena é buscar inspiração em seus colegas. Perguntar a si mesmo o que você adora nos designs deles, como eles podem ser relevantes para o seu design e como você deseja modificá-los de acordo com suas necessidades pode ser realmente muito simples.

Vamos verificar esses nove exemplos de animações criativas de sites e começar a aprender com os profissionais.

As técnicas de animação que Handwrytten usa na seção de herói de sua página inicial são uma representação comovente de seu próprio produto: combinar caneta e tinta. Um valor chave neste design (entre outros) é que o visitante do site entende imediatamente os benefícios que o produto oferece e o que ele ganhará com o uso.

A fotografia de um cartão escrito à mão justaposto à ilustração do cartoon realmente diz tudo. Quanto aos outros elementos de design da página, o esquema de cores branco e preto limpo com toques de laranja do sol atingem um equilíbrio entre sofisticação e talento artístico. Depois de navegar neste site, certamente estamos motivados para dar uma olhada mais detalhada e aprender mais sobre o produto da Handwrytten.

A Crisp adiciona pequenos efeitos de animação às suas ilustrações vetoriais que transmitem mensagens ressonantes da marca, apesar do pequeno tamanho das ilustrações. A animação discreta de cada ilustração vetorial realmente adiciona um toque humano à personalidade da marca crisp. Adoramos especialmente a fogueira animada na seção que discute o suporte ao cliente. Ele adiciona vida ao design minimalista e plano que é elegantemente usado em toda a página inicial. Esta é a maneira perfeita de usar essas técnicas modernas de design plano e, ao mesmo tempo, adicionar a joie de vivre necessária para uma experiência de usuário empolgante.

Corebook dá as boas-vindas ao visitante de seu site no modo totalmente escuro, com animações sutis e elegantes conforme você rola a tela para baixo. À sua maneira única, Corebook encontra uma maneira de projetar animações de heróis que são fácil e claramente visíveis, apesar da falta de contraste entre o cinza escuro sobre o fundo preto.

A escolha do conteúdo da animação é minimalista, mas informativa. Isso é possível com apenas algumas formas quadradas e cores, as animações ilustram o tipo de produto acabado (um brand book) que os clientes terão em mãos depois de ingressar no Corebook: seu próprio brand book que atinge os padrões da indústria e parece moderno, moderno e sofisticado.

Best Day Ever usa uma técnica de animação em loop para que suas ilustrações de animais não dependam de gatilhos para continuar se movendo. Qualquer ilustração visível para o visitante do site está em movimento contínuo, desde que possa ser vista na tela.

Há uma abordagem de conteúdo primeiro em toda a página, já que as palavras e frases são breves e não mais longas do que o necessário. É exatamente esse tipo de abordagem que combina tão bem com animações amigáveis, com a combinação de texto mínimo com um design colorido e otimista. Os movimentos dos animais não apenas dão vida ao texto com o qual estão associados, mas também proporcionam uma experiência de conversação para cada usuário.

O site do Best Day Ever é um excelente exemplo de como você pode pegar uma ideia e um princípio de design (neste caso, o tema de combinar frescor energético com sutileza) e representá-lo de forma consistente por meio de seu esquema de cores, sua estratégia de conteúdo e seus efeitos de design avançados.

Quem não ama o clássico poço de bolinhas? Usando as cores clássicas de sua marca em um fundo branco, o Google atinge o ouro, mais uma vez.

Com um único efeito de rastreamento do mouse, o Google consegue obter uma experiência do usuário que faz o visitante do site se sentir como se estivesse realmente dentro de uma piscina de bolinhas! E quando você rola a página para baixo, tudo o que acontece é que as bolas ficam maiores. Não há conteúdo abaixo das bolas, que é exatamente como é na coisa real.

O Google consegue nos fornecer uma compreensão imediata e sensacional da finalidade deste produto, e eles o fazem com uma descrição de título de texto de herói simples e um botão de CTA.

Sabemos que o Google está prestes a nos ajudar a planejar nossa próxima aventura que não nos decepcionará. E você viu os efeitos de mudança de cor ao passar o mouse sobre o botão? Esta é a primeira vez que vimos um botão cujo efeito de foco muda para quatro cores diferentes, em vez de mudar de uma cor para outra.

É diferente de tudo que já vimos antes. Diante de nossos olhos, vemos formas abstratas animadas se movendo e formando a ilustração de um animal. Isso desperta nossa curiosidade, admirar os belos animais e nos perguntar, quais outros animais eles usaram?

Este é exatamente o processo de pensamento que você deseja que o visitante do seu site tenha. Você está contando a ele uma história visual e quer que ele vá para a próxima página dessa história.

Se você pensar sobre isso, a narração de histórias e a causa de espécies ameaçadas têm muito em comum: ambos tratam de chamar a atenção do ouvinte e convencê-lo (embora sutilmente) de que seu assunto é de importância primordial, também conhecido como vale a pena ouvir.

A indústria da cannabis ainda é muito nova e fresca, então faz sentido para um site que a vende como um produto precisará de uma aparência e vibração com a mesma sensação.

Vamos parar para apreciar quantas técnicas de design estão acontecendo apenas na página inicial: um fundo de apresentação de slides atrás de coleções de imagens animadas, efeitos 3D, palavras giratórias ... e tudo parece lindo.

Como alguém pode ver esta página inicial e não querer explorar mais o site? Somente se você fizer isso, poderá ver as animações de cair o queixo se tornando ainda mais fabulosas conforme você rola para baixo.

Adoramos como, uma vez que você desce na página, o jar gira para baixo e os objetos no plano de fundo colorido deslizam para as margens da página conforme o plano de fundo fica branco. Tão creativo. Quanto mais baixo você vai, mais belos objetos 3D mantêm um efeito de rolagem vertical para cima.

Todas essas técnicas combinadas criam a sensação de que você só quer continuar lendo mais do site, até mesmo para ver os visuais intrigantes e o que os designers criaram a seguir.

Se você navegar para as outras páginas, verá que os objetos 3D do conteúdo principal da página inicial tornaram-se uma parte permanente do plano de fundo, enquanto ainda flutuam e se movem. Essa escolha de continuidade permite uma narrativa holística que leva o ponto mais perto de casa: Somos um produto incrível.

É o esquema de cores, o design 3D, o movimento discreto da imagem ou a ilustração do cartão de crédito que desce em um movimento acrobático conforme percorremos a página inicial?

É um pouco de tudo.

O esquema de cores aqui vai longe. Os tons de laranja rodeados por muitos espaços em branco e uma fonte sans-serif simples e arredondada funcionam todos juntos de forma holística. Mas o que realmente leva o bolo aqui são as técnicas de animação usadas para a ilustração do cartão de crédito.

RappiPay recebe nosso voto pela originalidade e por um engajamento notável. O conteúdo do site guia o visitante pela página até que ele chegue ao fundo do poço, porque conforme o cartão de crédito desliza suavemente pela página, outras imagens e ilustrações aparecem. E entre a interação do cartão de crédito com outros elementos, como revelar notas de dinheiro ou desenhar linhas pontilhadas ao redor de uma esfera, o cartão mostra viradas acrobáticas até o fim.

Assim como o cartão de crédito conta bem a história, cheio de ação e vitalidade, também termina em alta. O recorte circular no final, mostrando as compras do proprietário do cartão, nos diz quantos recursos e capacidades este cartão possui e como o proprietário do cartão realmente o levou a qualquer lugar e em qualquer lugar.

As palavras minimalista e de ponta são tudo o que podemos pensar aqui. Se uma imagem vale mais que mil palavras, diríamos que uma imagem animada vale 5.000 ou provavelmente mais.

OK, agora é sua vez. As técnicas de animação que listamos aqui são apenas uma pequena fração do que os criadores da web podem realizar ao adicionar recursos animados a seus sites. Cada vez mais inspiração se torna disponível a cada dia, e há muito para ver e aprender. Nosso lema como designers é começar com o básico, e como você tem práticas simples de animação em seu currículo, seu site pode mostrar ao mundo o que significa ser um movimentador e agitador.