UI para devs: construindo interfaces animadas

Mudando CSS com a interação do usuário - Apresentação

Olá, estudante! Boas-vindas a este curso de animações com CSS! Me chamo Monica Hillman e irei te acompanhar nesta jornada.

Audiodescrição: Monica Hillman se identifica como uma mulher de pele clara. Tem olhos castanhos e cabelos castanhos com mechas loiras. Usa óculos de grau com armação de gatinho e piercing no septo. Ao fundo, há uma estante com livros e uma iluminação azul arroxeada.

O que vamos aprender?

Durante o curso, desenvolveremos animações na interface da plataforma Meteora. Aplicaremos animações como uma transição suave na abertura do menu de localização, que ficará no cabeçalho da página inicial. Ao clicarmos em "localização" na parte superior esquerda, a lista de opções se abrirá de maneira suave.

Também adicionaremos uma animação ao título que exibirá dinamicamente os dados e categorias disponíveis na plataforma Meteora. Além disso, criaremos animações relacionadas ao scroll da pessoa usuária, fazendo com que os cards dos produtos sejam renderizados conforme a posição na tela.

Implementaremos animações nos modais dos produtos, incluindo um carrossel para alterar as imagens dos produtos. Adicionaremos uma animação de preenchimento aos círculos que indicam a seleção do tamanho do produto. Também incluiremos uma transição suave na mudança de cor de fundo dos botões de "Adicionar à sacola" e aplicaremos animações sobre imagens SVG, como a decoração para favoritar um produto.

Além disso, criaremos uma animação na seção de camisetas, onde um banner acompanhará o scroll da pessoa usuária. Esse tipo de animação é chamado de parallax.

O que será aprendido para desenvolver essas animações? Vamos explorar as propriedades transition, transform, animation e, consequentemente, os keyframes. Também abordaremos conceitos de HTML e JavaScript para criar animações dinâmicas.

Este curso terá bastante código, então preparem-se para codificar bastante. Aprender esses tópicos é essencial, pois no trabalho diário de uma pessoa desenvolvedora front-end é comum receber animações do time de design e aplicá-las em projetos existentes.

Pré-requisitos

Antes de começar este curso, é importante ter uma base em HTML, CSS e JavaScript, pois não abordaremos conceitos fora do escopo das animações que desenvolveremos.

Conclusão

Se você está interessado em aprender a usar HTML, CSS e JavaScript para criar animações complexas, não deixe de se matricular. Até o próximo vídeo!

Mudando CSS com a interação do usuário - Por que utilizar animações CSS?

No mundo digital, as interfaces desempenham um papel crucial na interação entre a pessoa usuária e a plataforma. Atualmente, não basta que essas interfaces apenas funcionem; elas também devem ser agradáveis e atraentes.

Para garantir isso, utilizamos HTML, CSS e JavaScript. Além disso, podemos enriquecer ainda mais a experiência da pessoa usuária com o uso de animações web.

Categorias de animações web

As animações web podem ser classificadas em várias categorias, uma delas sendo as animações de transição de tela. Essas animações permitem transitar entre diferentes telas ou seções de uma página.

Um exemplo prático é o carrossel encontrado no site da Caixa, acessível em caixa.gov.br. Na primeira seção do site, há um carrossel com três banners.

A transição entre os banners ocorre ao mover o banner atual para a esquerda e trazer o novo banner da direita para a tela.

Tipos de animações em interações

Existem diferentes tipos de animações, como a animação de foco, a animação de interação e as microinterações. Essas animações respondem às ações da pessoa usuária na tela.

No site da Caixa, por exemplo, no menu hambúrguer do cabeçalho à esquerda, há animações de interação visíveis. Ao passar o mouse sobre o item "Poder Público", o texto muda de cor, o fundo altera a cor e uma sombra é adicionada ao botão. Além disso, um novo elemento aparece com várias opções adicionais, e essa transição é suavizada por uma animação conhecida como fade in.

Problemas pela falta de animações

A ausência de animações pode causar alguns problemas para a pessoa usuária. Sem animações, a pessoa pode se sentir perdida na aplicação, pois pode não entender com o que está passando o mouse ou com o que está interagindo.

Além disso, a falta de animações pode fazer com que a pessoa perca a percepção do tempo e não saiba se algo está sendo carregado ou se a interface está simplesmente parada. Por isso, é importante incluir animações que ajudem a pessoa usuária a entender o que está acontecendo na aplicação.

Importância da consistência visual

A consistência visual é crucial em uma aplicação. Se começarmos a usar feedbacks de interação no início da tela, devemos manter o mesmo padrão até o final.

Vamos considerar o site gov.br como exemplo de como a falta de animações pode afetar a usabilidade. Na seção "Serviços para você", há três colunas com vários links: "Recomendados", "Mais acessados" e "Destaque".

Ao passar o mouse sobre os links abaixo desses títulos, não há um feedback claro indicando qual link está sendo selecionado. Com mais de 20 links na tela, essa falta de feedback pode dificultar a navegação e fazer com que a pessoa usuária perca o interesse na página.

Na seção de notícias um pouco mais para baixo, ao passar o mouse sobre o título de uma notícia, a cor da fonte muda. Isso demonstra que, embora não haja feedback visual claro na primeira seção (como nos links mais acessados), ele está presente em outra parte da tela.

A falta de feedback consistente pode levar a pessoa usuária a interpretar que há um problema na primeira seção, quando, na verdade, foi uma escolha de design. Portanto, é crucial garantir a consistência nos feedbacks visuais para evitar confusão e melhorar a experiência da pessoa usuária.

Sincronização e tempo em animações

Quando decidimos adicionar animações, devemos focar em dois pontos importantes: sincronização e tempo.

Por exemplo, no menu hambúrguer do site gov.br, o menu abre de forma abrupta, sem animação. Se quisermos adicionar uma animação, como um fade in, precisamos definir um tempo adequado para a transição. A animação não deve ser nem muito rápida nem muito lenta. O tempo ideal pode ser determinado por meio de testes com as pessoas usuárias ou em colaboração com o designer da aplicação, se houver.

A consistência visual é fundamental. Quando definirmos uma animação para um elemento específico, devemos garantir que a mesma animação seja usada sempre que esse elemento aparece na aplicação. É essencial considerar todos esses aspectos ao definir as animações para o projeto da Meteoro que desenvolveremos durante este curso.

Próximo passo

Vamos para o próximo vídeo, onde aplicaremos na prática tudo o que aprendemos na análise dos projetos da Caixa e do gov.br, além dos pontos discutidos até agora. Até mais!

Mudando CSS com a interação do usuário - Aplicando pseudo-classes em elementos

Analisamos como diferentes sites utilizam animações. Agora, iniciaremos a construção das nossas próprias animações. Utilizaremos o CodePen como exemplo para a construção e, posteriormente, incorporaremos as animações em um projeto existente chamado Meteora.

Para abrir um projeto no CodePen:

1. Acessamos o site codepen.io.
2. Clicamos no botão "Pen" na primeira coluna à esquerda.

Após clicar em "Pen", temos acesso a blocos separados para "HTML", "CSS" e "JS", onde será possível inserir e testar o código correspondente a cada um desses blocos.

Construção e Estilização de um botão

Vamos começar utilizando o bloco de HTML para criar um botão com o texto "Clique Aqui".

HTML

<button>Clique Aqui</button>

Em seguida, aplicaremos estilos a esse botão usando CSS. No bloco de CSS, utilizamos o seletor button para estilizar o botão. Inseriremos as seguintes propriedades: a cor de fundo como azul usando background-color: blue; e a cor do texto como branca usando color: white;.

CSS

button {
  background-color: blue;
  color: white;
}

Alterando estilos com interação da pessoa usuário

Para alterar os estilos do botão com base na interação da pessoa usuária, como passar o mouse sobre ele, podemos usar a pseudo-classe hover.

Utilizamos button:hover para definir os estilos que serão aplicados quando o mouse passar sobre o botão. Inserimos as seguintes propriedades dentro das chaves: a cor de fundo como branca usando background-color: white; e a cor do texto como azul usando color: blue;. Ou seja, estão aplicando uma inversão de cores.

O código CSS será:

button {
  background-color: blue;
  color: white;
}

button:hover {
  background-color: white;
  color: blue;
}

Visualizando o resultado da interação

Para facilitar a visualização do resultado, passamos o mouse sobre o botão "Clique aqui" na parte inferior esquerda (abaixo do bloco HTML). Observe que as cores do botão serão invertidas quando o mouse estiver sobre ele.

As pseudo-classes permitem definir e alterar os estilos com base na interação da pessoa usuária. O hover é um exemplo de pseudo-classe. Outros exemplos serão fornecidos na atividade para explorar mais sobre essas funcionalidades.

Aplicando estilos na aplicação Meteora

Para aplicar os estilos que visualizamos na aplicação Meteora, seguimos os seguintes passos:

1. Abra o Projeto: Inicie o projeto Meteora no Visual Studio Code.
2. Ative o Live Server: Habilite a extensão Live Server para visualizar em tempo real as alterações feitas nas estilizações.

Isso permitirá que você veja as mudanças imediatamente conforme faz ajustes nos estilos.

A instrutora já possui a extensão habilitada em sua máquina.

Verificaremos se já ocorre essa interação no botão "Ver mais" em cada item da loja virtual.

Verificação de interações no Botão "Ver Mais"

Acessamos o projeto no navegador no endereço 127:0.0.1:5500/index.html. Passamos o mouse sobre o botão "Ver Mais" em cada item da loja virtual e observamos se há uma mudança de estilo, com a cor do botão mudando de roxo para azul.

Clicamos no botão "Ver Mais" dentro do modal e passamos o mouse sobre "Adicionar à sacola" para verificar se ocorre uma alteração de cor de roxo para branco, mesmo sem a adição de novas regras de estilo.

Certifique-se de que essas interações estejam funcionando conforme esperado.

As animações já presentes no projeto são resultado da biblioteca Bootstrap, que inclui animações embutidas nos elementos que estamos utilizando. Assim, mesmo que não tenhamos adicionado manualmente as pseudo-classes, o Bootstrap já fornece essas animações para os botões e outros componentes no projeto. Portanto, o projeto já vem com essas animações devido ao uso do Bootstrap.

Personalizando animações

É possível sobrescrever as animações fornecidas pela biblioteca Bootstrap para aplicar o estilo desejado. Não precisamos aceitar todos os padrões definidos pela biblioteca.

Desejamos, por exemplo, alterar o comportamento do botão ao passar o mouse sobre "Adicionar à sacola". Em vez de ficar branco, o botão deve mudar para um roxo mais escuro. Para isso, substituiremos a animação padrão pela nossa própria configuração.

Primeiro, localizamos a classe do botão no arquivo imprimirUmDeCadaCategoria.js, na pasta js. A classe está definida na linha 114 como botao-lilas. Copiamos esse nome e abrimos o arquivo estilos.css.

Na linha 11, selecionamos a classe .botao-lilas e adicionamos a pseudo-classe :hover. Abrimos e fechamos as chaves {} para definir o estilo desejado para a interação com o mouse.

Dentro das chaves, definimos a propriedade background-color para alterar a cor de fundo quando o mouse passar sobre o botão. Utilizamos a cor #9353ff como base, e o Visual Studio Code pode sugerir ajustes de cor.

Ele possui um seletor de cores, que arrastando o círculo com bordas brancas para escolher um tom escuro e definindo a cor como #6c38c5.

estilos.css

/* código omitido */

.botao-lilas:hover {
    background-color: #6c38c5;
}

/* código omitido */

Salvamos as alterações e verificamos na aplicação se a cor do botão muda para o tom escuro ao passar o mouse sobre "Adicionar à sacola" dentro do modal. Deu certo!

Além disso, na linha 13 do CSS, alteramos a cor do texto para um tom de cinza, usando a cor #D8D8D8, em vez de branco puro. Assim, ajustamos a cor do botão e do texto conforme desejado.

/* código omitido */

.botao-lilas:hover {
    background-color: #6c38c5;
    color: #D8D8D8;
}

/* código omitido */

Quando passamos o mouse sobre o botão "Adicionar à sacola" no nosso servidor local, observamos que a animação é suave, o que não é o esperado com a utilização apenas da pseudo-classe :hover. Normalmente, ao usar :hover sem outras configurações, a animação ocorre de forma abrupta e instantânea, sem transição suave.

A animação que estamos observando é fornecida diretamente pelo Bootstrap.

Conclusão e Próximo passo

Para criar uma transição mais suave, é necessário conhecer algumas propriedades CSS específicas. Aprenderemos sobre essas propriedades e como aplicá-las no próximo vídeo e na próxima aula.

Te vejo na próxima aula!

Sobre o curso UI para devs: construindo interfaces animadas

O curso UI para devs: construindo interfaces animadas possui 136 minutos de vídeos, em um total de 55 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

• Mudando CSS com a interação do usuário
• Animações com transição
• Implementando animações no projeto
• Animações dinâmicas com CSS e JavaScript
• Criando elementos personalizados
• Animações com imagens