Clicando ao redor: o uso de cursores circulares do mouse

Publicados: 2020-04-01

Recentemente, discutimos uma pequena tendência em cursores de mouse, explorando uma dúzia de exemplos de efeitos solitários, mas atraentes. Hoje está novamente sob os holofotes, desta vez com outra ideia interessante.

Parece que os web designers têm uma inclinação particular para brincar com nosso único dispositivo para se mover pela tela. Sem dúvida, os cursores estão ganhando popularidade nos dias de hoje. As razões para isso podem variar: começando pelo simples desejo de fugir de tudo o que é comum, e terminando com a ambição ardente de tornar a web um lugar melhor.

Entramos em uma era de interfaces interativas. O cursor do mouse é parte integrante de todas essas soluções grandiosas. É lógico que ele sofra algumas mudanças para atender às demandas atuais e ajudar a criar uma experiência perfeita.

Parece que chegou a hora de fazer alguns experimentos com sua forma, deixando de lado a flecha chata e optando por algo mais elegante e refinado, como, por exemplo, um círculo. A forma redonda combina idealmente com interfaces modernas com telas e animações interativas. Parece natural e gracioso. E, está sempre aparecendo – discretamente chamando a atenção.

Últimos projetos de arte / Maraka

Vamos considerar Last Art Projects e Maraka, cujas equipes usam essa pequena tendência a seu favor.

Last Art Projects tem um belo tema de dois tons preenchido com ilustrações de estilo de linha e decoração oca. Aqui, o cursor combina perfeitamente com o conceito. Consiste em dois círculos. O anel na frente é um cursor, enquanto um círculo escuro sólido na parte de trás é uma cauda. Juntos, eles parecem um alvo que naturalmente concentra a atenção na tela.

Últimos projetos de arte

Maraka mudou a forma do cursor, mas não apenas para fins decorativos. Aqui ele é usado como uma dica visual para visitantes online. Assim, ele mostra uma seta para a esquerda ou para a direita quando detecta que você deseja percorrer os slides. E ele se transforma em um círculo sólido regular (com um círculo secundário semitransparente relativamente grande) quando você atinge a área de destino, como links, legendas ou navegação.

Maraka

Ambos os exemplos nos mostram como uma simples forma circular pode fazer maravilhas. É tão natural e elegante em seu comportamento que parece um parceiro ideal para todas essas extravagâncias modernas. Vamos também considerar alguns outros exemplos fantásticos.

Kwok Yin Mak

Kwok Yin Mak tem um design espaçoso com uma coloração tradicional em preto e branco e ritmo vertical. Personagens japoneses roubam a cena aqui. A atmosfera é refinada e autêntica. Você tem que admitir, uma forma de seta padrão pareceria primitiva aqui, mas uma forma circular é outra questão. Joga bem com todos os detalhes e se sente em casa.

Kwok Yin Mak

Sessões Prime Park

O design do Prime Park Sessions é marcado por uma bela estética geométrica. O intrincado elefante poligonal, navegação vertical localizada nas laterais e uma tonelada de espaço em branco. Aqui, o minúsculo ponto preto de um cursor se encaixa como uma luva, atendendo habilmente ao tema.

Sessões Prime Park

cartesiano

A forma de onda majestosa dá o tom para Cartesiam. A área do herói apresenta uma bela animação abstrata que é brilhante e fluida. Aqui o cursor do mouse é um círculo relativamente grande com um nível médio de transparência. Graças às suas curvas divinas e comportamento suave, naturalmente chama a atenção e, ao mesmo tempo, se encaixa perfeitamente na comitiva bacana.

cartesiano

Eum Ray

O portfólio da Eum Ray tem um certo nível de personalidade. O artista está ansioso para mostrar seu gênio interior. Portanto, não é de surpreender que tudo aqui seja bem pensado. Até o cursor do mouse se destaca da multidão com seu estilo oco e formato circular.

Eum Ray

Parque infantil

Essa tendência também é usada para identificar prioridades, adicionando peso visual aos detalhes cruciais. Dê uma olhada no Playground.

A equipe por trás do Playground emprega dois círculos. O círculo pequeno é usado como um cursor, enquanto o grande serve como um “seguidor”. Juntos, eles tornam os movimentos na tela mais proeminentes. E isso não é tudo: o ponteiro tem dois tipos de comportamento. Quando o cursor atinge um controle deslizante, botão de hambúrguer ou link – ele cresce, sugerindo a importância desses elementos. Quando sai dessas áreas, ele volta ao tamanho normal, permitindo que os visitantes explorem a interface sem muito incômodo.

Parque infantil

Tappezzeria Novecento

Tappezzeria Novecento tem uma área de heróis de conteúdo pesado com uma imagem grande e muito conteúdo. É natural que a equipe por trás do design tenha decidido tornar o cursor mais proeminente. Assim como no caso do Playground, ele tem dois círculos: um é o próprio cursor e o outro é sua cauda. Ele também tem uma coloração semelhante, o que o torna um toque final perfeito.

Tappezzeria Novecento

Mallard e Claret

Mallard e Claret provam que um cursor circular do mouse pode encontrar seu lugar, mesmo nos tipos mais comuns de sites. Na verdade, você encontrará duas formas redondas. O primeiro é um link para a seção de rodapé, que também é algum tipo de logotipo. E o outro é um cursor do mouse. É pequeno e rápido. Isso torna a experiência do usuário neste blog um pouco mais divertida do que o normal.

Mallard e Claret

Presente da Gucci

O grande nome aqui, mas infelizmente não é um bom exemplo a seguir. Gift by Gucci também tem um cursor circular do mouse. Certamente adiciona seu charme aqui, e a interação com a tela dinâmica parece mais natural. No entanto, o contraste ruim entre o plano de fundo e o primeiro plano prejudica a experiência do usuário. O círculo dourado é quase imperceptível contra um fundo rosa. Isso e uma pena.

Presente da Gucci

Ferramenta de bônus: Cursomizer

Se você está pronto para abandonar o cursor genérico em forma de seta, temos um projeto interessante para conferir. Chama-se Cursomizer. E faz o que diz – permite personalizar o cursor. É um pequeno playground onde você pode definir tamanho, cor, efeito de foco e efeitos de clique para o cursor e desfrutar de sua aparência e comportamento final em uma visualização ao vivo. É muito útil.

Cursomizador

Há apenas algo sobre círculos

É sempre um prazer ver coisas triviais, às quais às vezes não damos o devido crédito, ganhar um segundo fôlego.

Claro, vimos muitos cursores personalizados. No entanto, há algo divino em ponteiros circulares. Parece que eles sobem e se movem suavemente pela tela. Em conjunto com outra pequena tendência, também conhecida como trilhas circulares do mouse, elas parecem ainda mais sofisticadas.