Mídias sociais: design em movimento com o Canva

A base da animação - Apresentação

Olá, tudo bem? Sou Felipe Laboriau, da equipe de design e instrução da Alura.

Audiodescrição: Felipe Laboriau se identifica como um homem de pele branca, com cabelos pretos e que utiliza bigode. Em seu corpo, há uma camiseta preta. Ao fundo, vemos seu quarto com paredes e móveis brancos, sobre o qual há uma luz projetada em degradê de tons roxos e azuis. Há um quadro pendurado na parede, à direita.

Queremos convidar você a participar do curso de Design em movimento para as mídias sociais.

O que aprenderemos?

Nesse curso, vamos utilizar o Canva, uma plataforma gratuita, embora trabalhemos com a sua versão pró paga, para criar postagens e depois trazer movimento e animações a esses conteúdos.

Afinal de contas, vamos explorar esse potencial extremamente visual que as mídias sociais têm hoje em dia e como as animações, inclusive o uso de trilha sonora, podem nos ajudar a trazer ainda mais interesse para os nossos materiais. Muitas vezes, esses materiais estarão concorrendo com muitas outras postagens dentro do feed de uma rede social.

Além disso, vamos nos preocupar em criar um material que tenha um acabamento visual condizente com uma identidade de marca. Dentro das redes sociais, estamos competindo com outras marcas. Então é fundamental que a pessoa que esteja visualizando o conteúdo saiba que se trata de uma postagem da nossa marca e não de uma outra marca ou pessoa.

Para quem é este curso?

Esse curso é pensado exatamente para quem precisa criar esse tipo de conteúdo, mas que não trabalha com as ferramentas mais avançadas do mercado. Alguém que não trabalha com design necessariamente, mas que precisa fazer essas criações no seu dia a dia ou quer aprender a preparar esse tipo de material utilizando uma ferramenta super acessível que é o Canva.

Esperamos que você tenha gostado da nossa proposta. Nos vemos no próximo vídeo do curso!

A base da animação - Visão geral

Neste vídeo, vamos explicar sobre o que será abordado durante o curso.

Entendendo a proposta

A proposta é trazer movimento aos nossos designs para mídias sociais. No primeiro momento, vamos criar materiais de comunicação visual estáticos, como um story (história) para o Instagram e um anúncio para o YouTube. Em seguida, vamos começar a adicionar animações prontas que o Canva nos oferece, de modo que a animação faça sentido para o elemento.

Vamos entender, considerando, por exemplo, um layout com o texto "Oferta dia do Cliente - Internet móvel R$ 49", que animação traremos para o texto "Oferta", para o texto "dia do", para "Cliente", para "Internet móvel" e para objetos ou imagens. Considerando um anúncio com exemplo, como vamos trazer o movimento para os elementos, principalmente quando temos duas páginas com conteúdos diferentes dentro do mesmo vídeo?

Vamos fazer isso de forma a explorar as características e particularidades desses elementos, bem como a importância de cada um deles dentro do layout. Vamos explorar o caráter automático que as animações do Canva têm, mas vamos personalizá-las também, para que obter uma boa legibilidade.

Por exemplo, ao dar o play na animação do layout, o conteúdo "Oferta dia do Cliente" entra, temos um certo tempo para ler, e depois entra o resto do conteúdo, de forma que não aconteça todas as animações de uma vez.

No caso do anúncio, além das animações, vamos ver também como adicionar uma trilha sonora. Vamos trazer o movimento para esse material, explorando as características e propriedades dos elementos, e também como incorporar música no Canva, discutindo questões de direitos autorais.

Vamos preparar também reels (rolagens) animados, vídeos curtos, explorando as animações, mas com outras técnicas, utilizando as transições do Canva.

Tudo isso, claro, tendo em mente que esse material é produzido para as redes sociais, deve ser visualmente interessante, bem-acabado, e preservar uma identidade visual própria da marca Novexus, com a qual estamos trabalhando.

Este curso é o segundo passo de uma formação de design para mídias sociais. Este é momento em que trazemos movimento para os nossos materiais de comunicação visual. Temos um passo anterior, onde trabalhamos também dentro do Canva e criamos posts estáticos, imagens que não têm movimento.

Lembre-se de que temos os vídeos e também os materiais complementares: atividades como "Para saber mais" — que não tratamos no vídeo, mas que são importantes para o assunto geral do design em movimento —, "Faça como eu fiz" e outras.

Esperamos ter agradado com nossa proposta e nosso formato. Nos vemos nos próximos vídeos.

A base da animação - Briefing

Vamos iniciar a compreensão do que faremos durante o curso. Para isso, abriremos um Briefing, documento que descreve à pessoa criativa ou designer o que esta deve fazer. Este é um processo muito comum no mercado de trabalho, seja para um funcionário de uma empresa maior ou para uma pessoa contratada como freelancer (autônoma).

A pessoa que trabalha com design não escolherá necessariamente o que será postado, determinará o assunto ou criará o texto. Em um processo bem organizado, isso é feito, por exemplo, por uma equipe de marketing, ou pela clientela que passará essa demanda.

O documento de Briefing, que vamos ver a seguir, é a maneira mais correta de fazer isso.

Entendendo o Briefing

Este Briefing é similar ao que apresentamos no curso anterior desta formação: o curso de Design de Posts.

No início do documento, há uma descrição importante da marca Novexus, a mesma do curso anterior, e com a qual continuaremos a trabalhar.

A Novexus é uma marca jovem, moderna e que valoriza a diversidade. As nossas postagens devem transmitir esses conceitos, com imagens, cores e textos de acordo.

Abaixo dessa seção, temos a descrição do estilo visual que o material deve ter.

Estilo visual

Moderno e mais simplista, sem necessidade de muitos elementos visuais. É importante que estejam presentes os elementos (cores, tipografia e grafismos) da identidade da Novexus.

Portanto, cores, tipografia e grafismos devem seguir essa linha.

Vamos criar algumas peças que estão descritas na seção seguinte.

Peças

1. Story de Oferta do Dia do Cliente

Internet móvel por R$49

2. Anúncio YouTube

Texto: "Você em sintonia com o mundo"

QR code que leve para o Instagram da Novexus

3. Dois Reels animados

• 3.1 Texto: "Você conectado"
• 3.2-Texto: "Você em sintonia" Em ambos deve conter o texto "Infos e promos na bio"

A primeira delas é um story sobre a oferta do dia do cliente: internet móvel por R$49,00. Não fomos nós que escolhemos essas postagens, elas foram passadas para nós.

A segunda peça é um anúncio para o YouTube, com o texto "você em sintonia com o mundo". Posteriormente, haverá um QR Code que leva para o Instagram da Novexus.

Note que não temos uma descrição exata de como a peça deve ser, somente as informações principais. O layout, a parte criativa do trabalho, compete a nós.

Por último, temos dois reels animados, um com o texto "você conectado" e o outro com o texto "você em sintonia". Esses são como se fossem slogans da Novexus. Em ambos os stories, deve conter o texto "infos e promos na bio".

O que é interessante neste Briefing são as referências visuais, localizadas abaixo da seção das peças.

Referências visuais:

https://br.pinterest.com/pin/8373949300374372/

https://br.pinterest.com/pin/723250021419383953/

https://br.pinterest.com/pin/368098969557525255/

São materiais gráficos que servirão de inspiração para nós. Ao passar essas referências, a clientela, as pessoas stakeholders ou a pessoa dentro da equipe está sinalizando o que ela quer exatamente. Portanto, se futuramente você criar um Briefing, saiba que essa é uma prática bem útil para fornecer à pessoa designer um ponto de partida mais definido.

Vamos clicar nos três links abaixo e abri-los em novas abas do navegador. Vamos acessá-las para compreender exatamente o que eles trazem.

Story animado para hamburgueria.

No story para a hamburgueria, temos o hambúrguer deslizando da direita para o centro da imagem, enquanto o texto "Do tamanho da sua fome" aparece uma letra por vez acima do alimento. Há um efeito de faíscas por toda a imagem.

Stories Animados Tênis Nike Air Force.

No story para o tênis, o calçado é exibido com um efeito de zoom out no centro da imagem e permanece pulsando na tela. Ao fundo, uma faixa vertical com o texto "AIR FORCE" rotacionado para a esquerda rola de cima para baixo, enquanto os textos "Nike", "1.059,90" e "Air Force" estão em fontes menores e ao redor da faixa.

Story animado Vestibular UVV.

Já no story para a universidade, há a foto de um estudante de medicina no centro, com uma camiseta azul, acima da qual há um jaleco de médico e um estetoscópio animados, desenhados com efeito de lápis. Acima de sua cabeça, há o texto "VEST MEDICINA UVV 2022.2" em letras animadas que mudam de cor. Ao seu redor, há faixas que também mudam de cor. Àbaixo do estudante, à esquerda, há o texto estático "Reinvente sua história", e à direita, há o nome do estudante. No centro inferior da imagem, há o texto "Inscreva-se agora".

Explorando as referências visuais

Temos três animações que são o design colocado em movimento. Não são animações do tipo desenho animado ou filme. Elas trazem o interesse visual para esse material e fazem com que ele fique mais chamativo do que uma peça estática.

Como essas animações não são necessariamente muito avançadas, elas conseguem trazer esse dinamismo. Fazem com que uma peça estática, como a do tênis, por exemplo, chame mais atenção do que um material que é parado, que não tem movimento. No mesmo caso, as animações do story para a universidade, se paramos para pensar, são bem simples, mas reforçam o interesse visual.

Apresentamos o Briefing, para estarmos alinhados sobre o que será feito de fato. Quando formos para o Canva, poderemos iniciar a nossa criação.

Acessando a página do Canva no navegador, como já sabemos, se clicarmos no botão "Criar um design", no topo direito da tela, temos diversas opções de formatos prontos. Será que algum deles vai nos atender?

A primeira peça descrita no Briefing é um story de oferta do dia do cliente. Dentro do menu "Criar um Design", temos justamente a opção "Story do Instagram". Quando passamos o cursor por cima dela, aparecem as dimensões à esquerda. Não precisamos editar e criar um material do zero, pois temos as dimensões de 1080 por 1920 pixels.

Ao clicar nessa opção, o Canva, como padrão, abrirá uma nova aba. No centro dela, temos a nossa prancheta de trabalho para criar o material, representada por uma folha branca. Como já mencionamos antes, vamos trabalhar em cima da identidade visual da Novexus, a qual elaboramos e organizamos no curso anterior da formação.

Quando acessarmos o painel "Marca", na barra de ferramentas da lateral esquerda, veremos uma aba à direita desta, com as configurações da marca, na qual já teremos os elementos principais da marca, como o logotipo, cores e tipografia. As fotografias aqui não são tão importantes neste momento, mas já estão todas salvas nessa aba.

Neste primeiro vídeo, queríamos mostrar o Briefing para acertarmos exatamente o que será feito. Já preparamos um novo documento no Canva para prepararmos as artes estáticas nos próximos vídeos. Nas aulas seguintes, colocaremos esse design em movimento.

Sobre o curso Mídias sociais: design em movimento com o Canva

O curso Mídias sociais: design em movimento com o Canva possui 98 minutos de vídeos, em um total de 43 atividades. Gostou? Conheça nossos outros cursos de Design Gráfico 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:

• A base da animação
• Story animado
• Anúncio animado
• Animações pontuais
• Finalização e exportação