Framer: crie sites interativos e acessíveis

Projetando micro-interações - Apresentação

Boas-vindas ao terceiro curso da formação de Framer da Alura! Meu nome é Mateus Villain, sou Product Designer e instrutor na escola de UX e Design.

Audiodescrição: Mateus se descreve como uma pessoa de pele branca, com cabelo, sobrancelhas, olhos e barba castanho-escuro. O cabelo está bem curto, diferente da barba, que é longa, cobrindo praticamente o pescoço inteiro. Ele usa óculos de armação arredondada branca, uma corrente de prata no pescoço, veste uma camisa azul-escura com o logotipo branco da Alura, e está sentado em uma cadeira preta em frente a um microfone preto. Ao fundo, há uma parede clara iluminada em gradiente lilás, com uma estante marrom contendo livros, uma câmera fotográfica, uma máquina de escrever antiga, e uma grade preta com itens pendurados.

O que vamos aprender?

Neste curso, vamos aprender tudo o que é necessário para fazer o acabamento do site.

Ao longo da formação, desenvolvemos e aperfeiçoamos a interface e as interações do produto da Zoop Megastore, projeto em que estamos atuando.

Agora, vamos explorar a parte de animações. Quais tipos de efeitos o Framer permite trabalhar? Como aplicar animações ao longo das páginas, em textos, imagens, seções e componentes? Vamos abordar tudo sobre os diferentes tipos de animações e interações que o Framer permite aplicar.

Além disso, abordaremos a parte de acessibilidade. O Framer possui recursos de acessibilidade para melhorar a eficiência para pessoas que utilizam softwares de leitura de tela, por exemplo, e discutiremos sobre isso no decorrer curso.

Finalizaremos com as configurações do site para buscadores. Quando alguém buscar pelo site no Google ou Bing, como ele será visualizado? Por último, aprenderemos a criar multi-idiomas, trazendo um segundo idioma ao site.

Lembre-se! Utilizaremos apenas recursos totalmente gratuitos. Ao longo do curso, não será necessário gastar nada, a menos que você realmente queira.

Para quem é este curso?

Este curso é voltado para qualquer pessoa, que não necessariamente precisa saber programar, mas deseja construir um site da forma mais simples possível, com animações e acessibilidade.

Conclusão

No próximo vídeo, começaremos nossos estudos pela parte de animações!

Projetando micro-interações - Entendendo os efeitos

Ao longo dos anos, o Framer se popularizou não apenas como uma ferramenta para criar interfaces, concorrendo com o Figma, mas também como uma plataforma para criar sites e publicá-los online, competindo com o Webflow. Além disso, ele se destacou como uma ferramenta poderosa para criar animações, embora não tão avançadas quanto as produzidas pelo After Effects.

A grande questão é a seguinte: como começamos a aplicar animações, efeitos, micro interações e interações em nosso site? Vamos descobrir neste vídeo!

Entendendo os efeitos

Acessando o Framer

Para começar, com o projeto da Zoop Megastore aberto no Framer, vamos pressionar a tecla "F" para criar um frame, permitindo visualizar o projeto de forma separada.

Ao clicar sobre o frame, o painel de design aparece à direita, com todas as configurações que podemos ajustar, como posicionamento, cor, tamanho, layout e acessibilidade. Entre essas opções, encontramos a seção "Effects", onde começaremos a trabalhar para criar efeitos no Framer.

Explorando a aba "Effects"

O Framer oferece uma variedade de efeitos. Vamos conhecê-los?

O primeiro deles é o Appear, que faz com que elementos ocultos apareçam após uma interação, como um gatilho ("Trigger"). Esse efeito é comum em sites onde, ao rolar a página para baixo, os elementos surgem gradualmente.

Outro efeito é o Hover, que ocorre quando passamos o cursor sobre um elemento. O cursor, controlado pelo mouse, pode desencadear ações como:

• Mudança de cor;
• Adição de borda;
• Aumento ou diminuição de tamanho;
• Entre outras, conforme definido no Framer.

O Press é semelhante, sendo uma interação com o mouse que ocorre ao pressionar o botão esquerdo. Feito isso, uma ação é executada no elemento selecionado.

Na sequência, temos o efeito Loop, que permite que uma ação seja repetida infinitamente, como em GIFs que recomeçam após terminar.

Além disso, o efeito Drag possibilita arrastar um elemento dentro do site, clicando e arrastando-o livremente, como podemos com o frame criado anteriormente.

Existem também animações relacionadas ao scroll do mouse, como velocidade (Scroll Speed) e transformação (Scroll Transform), além de uma que trabalha com variantes (Scroll Variant). Todas essas opções permitem realizar animações conforme rolamos a página.

Cada efeito possui peculiaridades e ações diferentes, alguns com muitos campos e complexidade. No entanto, ao longo do curso, perceberemos que é simples.

Basicamente, controlamos o estado inicial e o estado final do efeito. Qual será a velocidade da animação? E o tipo de curva? Tudo isso ajustável no Framer.

Conclusão

Neste vídeo, apresentamos a seção de efeitos do Framer, conhecemos os tipos de efeitos disponíveis, e entendemos o que podemos fazer com eles. Na sequência aplicaremos nossa primeira micro interação em um componente de botão. Nos encontramos no próximo vídeo!

Projetando micro-interações - Criando micro-interações nos componentes

A primeira animação que vamos criar no nosso site será trabalhando com micro interações em componentes, uma das coisas mais simples e significativas para aprender, pois utilizamos em todo produto construído e todo site possui.

Criando micro interações nos componentes

No Framer, temos o componente do cabeçalho (header) no topo da interface. Podemos clicar sobre ele duas vezes para selecionar e fazer o mesmo no botão do cabeçalho. Isso nos leva à parte de componentes, uma área separada no Framer.

Para os botões, temos uma versão preenchida e uma versão vazada. A versão preenchida tem cor no meio, e a outra tem apenas a borda, causando uma sensação de hierarquia: um é mais importante, enquanto o outro é secundário.

Como criar micro interações?

O que são micro interações e como criá-las? Ao passar o cursor sobre o botão, queremos que ele faça algo diferente, como mudar estilo, cor, adicionar borda ou sombra. A criatividade é o limite, e podemos fazer conforme acharmos melhor.

Ao clicar em qualquer uma das variantes do botão, temos duas opções:

1. Criar uma nova variante, clicando na opção "(+) Variant";
2. Ou adicionar os efeitos hover e pressed, clicando na opção "(+) Hover / Pressed".

O hover significa passar o cursor sobre o elemento sem fazer nada. Por exemplo: ao passar o cursor sobre o botão de "Hover / Pressed", ele fica roxo. Já o pressed é quando pressionamos e o elemento executa alguma ação. Ao pressionar o mesmo botão, é exibido um menu.

Aplicando o efeito Hover

Podemos definir que, ao pressionar o botão esquerdo do mouse, ocorrerá outra mudança de estilo. Nesse caso, criaremos o efeito hover no botão preenchido. Com isso, ele será replicado abaixo.

A micro interação de hover mais clássica é a mudança de cor. Com o botão selecionado, vamos remover a variável Cor_Botão e escurecer um pouco o tom de vermelho para #8F0D29.

Aplicando o efeito Pressed

Agora, vamos criar o pressed. Nesse caso, pode ser interessante adicionar uma sombra. Testaremos uma sombra em "Styles > Shadows" aumentando o Y para 2, que é a parte vertical da sombra.

Além disso, adicionaremos um desfoque (Blur) de 6. Por fim, a cor será preta com opacidade reduzida. Em "Color", definiremos #000000 em 25%.

Observação: trabalhar com sombra permite usar a criatividade para parecer que o elemento está flutuando na tela da aplicação.

De volta para a página inicial do site, vamos executá-lo para acessar a pré-visualização. Agora, todos os links têm hover e, ao passar o cursor sobre o botão do cabeçalho, aparece a sombra definida anteriormente e o ocorre a mudança de cor.

O detalhe do pressed é a pressão, não o clique. O clique é realizado apenas uma vez, enquanto o pressed significa segurar o botão esquerdo do mouse. Enquanto pressionamos, estamos no estado de pressed, não no hover, padrão ou clique.

Conclusão

A grande vantagem de usar micro interações de hover e pressed é que a pessoa usuária saberá que o elemento está ativo. Sem elas, algumas pessoas podem não identificá-lo como botão, especialmente, iniciantes em tecnologia. Devemos dar a oportunidade para que todas as pessoas identifiquem elementos clicáveis com os quais elas podem interagir.

Agora é sua vez de aplicar. Nos encontramos na próxima aula!

Sobre o curso Framer: crie sites interativos e acessíveis

O curso Framer: crie sites interativos e acessíveis possui 102 minutos de vídeos, em um total de 34 atividades. Gostou? Conheça nossos outros cursos de IA para UX & Design em Inteligência Artificial, ou leia nossos artigos de Inteligência Artificial.

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

• Projetando micro-interações
• Aplicando os primeiros efeitos
• Criando animações e customizações
• Aplicando acessibilidade no site
• Configurando idiomas e páginas