Canva: Criação de landing pages e e-mail marketing

Construção da landing page - Apresentação

Apresentando o instrutor e o curso

Olá! Meu nome é Filipe Laborioa, sou designer, instrutor e coordenador na Alura. Gostaria de convidá-los a participar do nosso curso de construção de landing pages e email marketing com o Canva.

Audiodescrição: Filipe é um homem de pele branca, com cabelos e olhos castanhos escuros. Ele usa óculos transparentes e veste uma camiseta preta. Está gravando o vídeo de seu escritório, onde há uma parede branca ao fundo com projeção de luzes azuis e roxas.

Explicando o público-alvo e objetivos do curso

Este curso foi desenvolvido para aqueles que já conhecem o Canva. Portanto, não apresentaremos o Canva do zero, pois este curso faz parte de uma formação na qual já trabalhamos com o Canva anteriormente. Nosso objetivo é preparar materiais para a divulgação de uma campanha de marketing, que é o Case e o projeto que vamos desenvolver aqui.

Detalhando a construção do site

Conforme podem observar na tela, aprenderemos a construir um site para uso pontual, onde a pessoa pode, por exemplo, inserir seu nome e e-mail em um formulário. Esses dados serão coletados e salvos em um banco de dados, que poderá ser consultado posteriormente para gerar uma planilha.

Vamos construir este site entendendo as melhores práticas de design e construção de sites, criando uma página inicial e também páginas acessórias.

Desenvolvendo o site com animações e responsividade

Vamos desenvolver um site de três páginas que apresentará conteúdo, incluindo animações. Não apenas exibiremos imagens, mas também traremos uma pré-visualização que permitirá enriquecer visualmente o material com animações. O conteúdo dos sites, preparado no Canva, poderá ser visualizado tanto no computador quanto em smartphones. Estamos projetando com o princípio do Mobile First (Primeiro o Móvel), que é essencial na construção de sites e aplicativos.

Criando e-mail marketing integrado com o Canva

Além do site, vamos preparar um e-mail marketing para a campanha da marca Usedev. Vamos elaborar o layout do zero, aproveitando que o Canva se integra bem com ferramentas de disparo de e-mail marketing. Diferente de outras soluções que geram uma imagem para ser colada no e-mail, aqui podemos veicular um código HTML gerado no Canva e disparado por ferramentas como o MailChimp.

Concluindo com a proposta do curso

Este curso foi pensado para quem já conhece o Canva e precisa utilizar a plataforma para criar landing pages (páginas de destino) e e-mail marketing, sem depender de softwares mais sofisticados ou de pessoas programadoras. Vale lembrar que o uso dos sites aqui é mais restrito; não vamos desenvolver um site complexo com banco de dados vinculado. É um site para uso pontual, mas que pode ser importante para você.

Esperamos que tenha gostado da nossa proposta e nos vemos no curso.

Construção da landing page - Boas práticas

Introduzindo boas práticas em landing pages e email marketing

Vamos iniciar o conteúdo do nosso curso abordando boas práticas na construção de landing pages e email marketing. Se estivermos realizando toda a formação de campo, podemos nos perguntar: "Por que não aplicamos as mesmas práticas quando construímos materiais de comunicação visual, como posts para a internet ou edição de vídeo? Por que estamos discutindo isso agora?" A razão é que landing pages e email marketing trazem, além da comunicação visual, a interatividade. É importante refletirmos sobre essas decisões de comunicação visual nesse contexto, onde esperamos que o usuário não apenas observe o material, mas também interaja, clicando ou preenchendo um formulário, por exemplo.

Falando da primeira boa prática, devemos sempre nos preocupar com a hierarquia da informação, que precisa ser o mais clara possível. Ao acessar uma landing page ou um email marketing, a pessoa deve identificar facilmente o que é mais importante. Devemos destacar as principais ações que esperamos que a pessoa realize. Na prática, isso significa que a página deve começar com uma mensagem central e que todas as seções da página ou do email marketing sigam o mesmo tema ou layout.

Exemplificando a hierarquia da informação

Vamos ver um exemplo disso na página da Alura. Se não estivermos logados, teremos acesso a uma página onde a área mais relevante está marcada com o número 1. Repare como ela chama mais atenção devido à tipografia maior e ao destaque visual proporcionado pelo fundo. No segundo momento, temos os dois botões "ver planos" na parte superior direita e logo abaixo da área central de Desenvolvimento, Carreira e Tecnologia. Eles têm destaque visual, mas não tanto quanto a área marcada com o número 1. Em seguida, temos outra grande área marcada com o número 3, onde estão as categorias dos cursos da Alura. É importante prestar atenção nessa hierarquia para guiar a pessoa a seguir a ação esperada.

Na sequência, devemos lembrar da escaneabilidade do conteúdo. Páginas não são necessariamente lidas no primeiro momento, mas sim varridas. O usuário não precisa ler tudo para entender o que está acontecendo. Na prática, isso significa dividir as seções por títulos curtos e objetivos, listar conteúdos com bullets em vez de parágrafos longos, e separar blocos de texto com espaçamento visível.

Demonstrando a escaneabilidade e uso do espaço vazio

Vamos acessar novamente a página da Alura para entender como isso se traduz na prática. Note a separação clara entre os elementos, como na seção que fala das categorias de conteúdo. Os títulos e os CTAs (Call to Action), que são elementos que chamam para uma ação, têm textos curtos e objetivos. "Desenvolva sua carreira em tecnologia" é um título curto, e "ver planos" é um CTA, um botão com texto curto para clicar.

Falando do terceiro ponto, devemos usar o espaço vazio de maneira intencional. Os espaços em branco, onde não há conteúdo, são uma parte ativa na composição visual.

Eles não devem ser interpretados como uma ausência de conteúdo. Uma sessão deve ter um título, uma frase curta e um elemento visual central, cercado por bastante espaço em branco. A separação entre sessões deve ser bem clara, para que os textos, as imagens e os ícones não encostem uns nos outros e não fiquem muito próximos.

Observando a consistência visual e sequência lógica

Vamos observar isso novamente na página da Alura. Note como há um espaço bem confortável nas laterais, direcionando o olhar para o centro. A sessão principal, "Desenvolva sua carreira em tecnologia", é destacada. Há mais espaços abaixo para que o foco seja nas categorias dos conteúdos. Existe uma separação clara entre o logo da Alura, no canto superior esquerdo, e o texto dos botões das sessões que vêm na sequência, evitando que as coisas se misturem. O logo está em um local específico, seguido por um espaço, e então outra categoria de conteúdos, como os menus clicáveis, aparece.

Vamos passar para o quarto ponto, que é a consistência visual entre elementos. Elementos semelhantes, com o mesmo objetivo, devem manter sempre a mesma aparência para facilitar o entendimento e a usabilidade. Títulos devem utilizar a mesma tipografia, tamanho e cor. Ícones devem seguir o mesmo estilo visual. Blocos de conteúdo devem ter o mesmo layout.

Explorando o catálogo da Alura

Vamos novamente para a página da Alura e observar os dois exemplos que trouxemos. Note como os ícones na página inicial têm o mesmo estilo visual. Eles são apenas traçados, na mesma cor. Não há um ícone preenchido e outro traçado, ou um ícone de cantos arredondados e outro de cantos quadrados. O mesmo padrão é mantido. A tipografia se mantém nas carreiras da Alura, com uma tipografia de título e uma cor reservada para o título. Embora "Explore o Catálogo" traga parcialmente o azul, ele não utiliza a mesma cor. Assim, começamos a separar esses elementos e destacá-los, contribuindo para a hierarquia da informação mencionada anteriormente.

Falando agora do quinto parâmetro que devemos observar, que é a sequência lógica da informação. O conteúdo deve seguir uma ordem que faça sentido, sem mudanças abruptas de assunto. Uma página que começa apresentando um contexto geral ou principal deve continuar com esse mesmo assunto. Na sequência, aprofunda-se com explicações e benefícios, por exemplo, falando especificamente de Late Pays e E-Mail Marketing, e depois apresenta essas informações com apoio de ícones, imagens e detalhes adicionais necessários.

Concluindo com a aplicação prática

Vamos acessar o catálogo da Alura e observar como, em "Explore o Catálogo", as carreiras estão listadas, como Engenharia de Dados e Especialista em A. A página começa apresentando o contexto geral, ou tema principal, que é "Carreiras Alura". Em seguida, aprofunda-se em explicações e benefícios, com caminhos estruturados, prática, profundidade e orientação para sair do zero e conquistar domínio real. Por último, apresenta informações de apoio, como detalhes adicionais, que são as carreiras em si.

Com tudo isso em mente, no próximo vídeo, iniciaremos a construção do nosso site, da nossa Landing Page. Esses pontos não ficarão restritos a este vídeo. Durante todo o curso, vamos relembrá-los e mostrar, dentro do Canva, como traduzir todos esses conceitos e teorias em prática. Finalizamos este vídeo por aqui e nos vemos no próximo.

Construção da landing page - Layout do site

Iniciando a construção da landing page

Muito bem, vamos iniciar a construção da nossa landing page a partir deste vídeo. Vamos criar um site para a Usedev, a marca com a qual estamos trabalhando desde o início desta formação no Canva. Este site será promocional e pontual, destinado ao preenchimento de um formulário para a campanha de Black Friday da Usedev. É importante termos em mente que os sites construídos no Canva são para uso mais pontual. Não é adequado, por exemplo, construir um site complexo no Canva, que necessite de integração com um banco de dados. Para sites mais complexos, é necessário seguir a construção da engenharia de um site, envolvendo pessoas programadoras, entre outros, e não trabalhar 100% no Canva.

Vamos agora criar nosso site, acessando o botão "Criar" no canto superior esquerdo do Canva. Selecionaremos a opção "Sites", que possui um único tamanho disponível, com dimensões de 1.366 pixels de largura por 768 pixels de altura, mas podemos alterar a altura. Podemos também iniciar a construção a partir de modelos de sites. Como estamos apresentando esta ferramenta no Canva, faremos do zero.

Configurando o design inicial

Vamos clicar em "Site", e o Canva abrirá uma nova janela para nós. Vamos trabalhar como se estivéssemos criando qualquer outra arte de comunicação visual, como já fizemos em outros cursos da formação. Clicaremos na prancheta de trabalho, onde temos a tela do site, e atribuiremos uma cor de fundo. Clicando no botão contextual "Cor do fundo", colocaremos o roxo escuro da nossa marca. A marca que estamos usando é o kit da Usedev, que elaboramos no primeiro curso da formação.

Iniciaremos a construção de baixo para cima, ou seja, começaremos com o que está mais atrás e traremos os elementos que estão acima, lembrando das boas práticas discutidas no último vídeo. O que queremos destacar aqui? Qual será a informação principal? No nível de título, é o desconto extra na Black Friday que esta landing page garantirá. Vamos pegar o texto já salvo e colá-lo. Para isso, traremos uma caixa de texto que pode ser o subtítulo e colaremos o texto com "Ctrl+V": "Ganhe até 20% de desconto extra na Black Friday". No entanto, este texto está muito grande, ocupando uma parte significativa da nossa página. Lembremos do que discutimos sobre espaço vazio; não está respeitando o espaço vazio, estando bem no limite.

Ajustando elementos visuais e texto

Vamos diminuir clicando no botão de redimensionamento. Dessa forma, fica interessante. Agora, vamos centralizar na página. Esta é a nossa mensagem principal, porém, é importante lembrar que estamos em uma lead page da Usedev. Vamos acessar o kit de marca para trazer o logotipo da Usedev. Vamos escolher o logotipo mais horizontalizado. Ele está muito grande e não precisa ter tanto destaque. Vamos reduzi-lo e posicioná-lo mais acima.

Começamos com uma mensagem central que tem importância e destaque visual. Também trazemos mais detalhes que explicam o que é essa página. Já temos um texto preparado. Vamos trazê-lo com a ferramenta de texto, selecionando o corpo, que é um texto menor, e colar com "Ctrl+V". O texto é: "Cadastre-se gratuitamente e receba ofertas exclusivas antes de todo mundo." No entanto, esse texto está grande, com 24 pontos de dimensão. Para materiais na web, 16 ou 14 pontos são suficientes. Vamos selecionar todo o texto e trocar o tamanho da fonte para 16. Vamos nos aproximar e redimensionar, pois o texto está mais largo que o título acima. Queremos que ele fique menor, então vamos centralizá-lo também.

Integrando formulário de coleta de dados

Estamos começando a construir nossa página. Não há mistério, é similar a outras artes que podemos fazer no Canva. Vamos trazer um novo elemento do Canva, lançado em 2025, que é o formulário. O formulário permite coletar dados integrados, por exemplo, com as planilhas do Canva. Podemos criar uma landing page dentro do Canva, pois há integração com esse banco de dados. Mesmo que seja simples, é possível extrair uma planilha com as informações de quem preencheu.

Vamos configurar esse formulário e o e-mail da pessoa. Clicamos em elementos e selecionamos, dentro de categorias, formulários. Há diversos modelos de formulários disponíveis. Podemos escolher um que faça mais sentido, mas nosso formulário é para preenchimento de duas informações: nome e e-mail. Podemos usar o modelo verde. Clicamos em "ver tudo" e arrastamos para dentro da nossa landing page. O formulário está inserido. Agora, vamos personalizá-lo, o que faremos no próximo vídeo.

Sobre o curso Canva: Criação de landing pages e e-mail marketing

O curso Canva: Criação de landing pages e e-mail marketing possui 96 minutos de vídeos, em um total de 37 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:

• capitulo