Transcrições
1. Introdução: Olá. Esta aula
será sobre como criar uma página de destino
simples e página de destino
simples e Sigma junto com animações de
Lawdy. Talvez você tenha ouvido falar sobre o
carregamento de animações, mas elas são apenas arquivos
animados e tornam seus designs
muito mais envolventes. Portanto, certifique-se de que a matrícula
nesta classe seja muito curta. É mais ou menos
em torno de dez a 15 minutos. E você
aprenderá muito como usar grades,
como esses gráficos de dipolo, algum tipo de gradiente, também fazem o layout automático da
cama e aplicam animações de carregamento
em seu projeto Figma. Espero ver você
na aula e ainda nos ver no próximo vídeo.
2. O que são as animações da Lottie?: Eles mostram rapidamente o que exatamente é a animação de
Lawdy. Talvez você nunca tenha ouvido falar sobre isso, mas provavelmente
já o viu enquanto interagia com
sites ou aplicativos móveis. Então, adoro visitar travel.com, que
é apenas um monte de estudos de caso e casos de
portfólio
diferentes que
os designers publicam. Então, preciso digitar
aqui muitas animações para
dar alguns exemplos. Então, vamos, por exemplo
, clicar neste primeiro. E nessa imagem você pode ver que ela é
animada, está se movendo. Então, isso é basicamente o que é
carregar animação, apenas uma
ilustração interativa que tem algum tipo de animação. Esse é outro exemplo
dessa ilustração. Então, por exemplo, em vez de ter
duas imagens estáticas simples, você pode animá-la. Os benefícios de
carregar animações é que
elas são mais envolventes, mais curiosas e prendem a atenção do
usuário por mais tempo. É por isso que, especificamente
nesta aula, vamos aplicá-lo a uma página de destino
simples. Você não precisa usar animações
elogiadas. Se você não quiser.
É apenas um bom complemento. Na verdade, isso não
oferece muita
visibilidade do ponto de vista da
experiência do usuário, mas é mais importante para
a estética visual e o engajamento de seus usuários. Então, no próximo
vídeo, mostrarei exatamente onde baixar animações leves
gratuitas para
seus projetos de design Figma.
3. Biblioteca com animações Lottie: Em primeiro lugar, certo, você
pode realmente obter muitas animações
para o seu design Figma? Então, eu tenho uma
sugestão muito boa para você. Você é livre para usá-lo ou também pode pesquisar no Google outra animação de carregamento na
qual você pode encontrar uma linha. Então a creatina é um site
muito simples, está com um creative.com. Você pode ir
aqui e basicamente baixar diferentes animações de
carregamento, bem
como ilustrações, ícones e ícones
animados. Então, vamos clicar rapidamente
em várias animações. E aqui
temos várias opções
diferentes que podemos
aplicar aos nossos projetos. Então, aqui você pode filtrar deseja ver muitas
animações gratuitas ou talvez, se
tiver um pacote premium, também possa filtrar por esse. Então, vamos voltar
às animações antigas e eu
mostrarei rapidamente como elas funcionam. Você também pode procurá-lo
aqui e ver os diferentes. Essa é uma boa animação. Então, por exemplo, temos essa animação de
descoberta. Se você clicar nele, também poderá modificar
basicamente as cores
dessa animação de carregamento. Então, por exemplo, você quer torná-lo mais azul e, em vez de bancário, quer que seja verde. Como exemplo, eu realmente adoro criar, é minha
sugestão pessoal, porque você pode obter muitas
animações muito personalizadas para seus projetos. Adoro o link na descrição da
aula, onde você pode criar sua
conta gratuitamente. Então, especificamente para esta, usaremos apenas uma
animação de loteria, mas se você, por exemplo tiver alguma inspiração,
poderá baixar mais coisas e
experimentar seu design de interface de usuário.
4. Design de landing page: Agora vamos ao nosso arquivo Figma. E antes de tudo,
criaremos um quadro de desktop, como sempre fazemos
em nossos tutoriais. Também
configurará rapidamente a grade de layout. E serão colunas
com uma contagem de 12º. E eu vou
definir as margens em ambos os lados para o
valor de 56 pixels, Gadara entre as colunas, que será de 24 pixels. Isso, na verdade, vamos selecionar
a ferramenta de texto e digitar nosso título
ou as configurações de fonte. Vamos mudar a fonte. E
também será uma fonte em negrito com as configurações com um
tamanho de 60 pixels. Então, aqui é
um pouco grande demais, então vamos diminuir
a largura desse contêiner. E também o
posicionarei
aqui, onde a primeira
coluna realmente começa. Agora vamos duplicar
essa camada de texto com o controle
mais o atalho da tecla D. E mudaremos imediatamente
as propriedades para regulares. E também o tamanho da nossa fonte
será de 24 pixels. Isso também mudará a cor de
preenchimento das pilhas. E também vou digitar algumas coisas que acabei de
encontrar aleatoriamente on-line. E vamos garantir que ele
também esteja alinhado corretamente com
a primeira coluna da
nossa grade de layout. Então, vamos
realmente criar nossos botões de apelo à ação,
que serão dois botões, o primário e o
secundário. Então, o primeiro terá um texto que começará a ser
criado gratuitamente. Também selecionarei
tudo aqui
nesta camada de texto e
clicarei até o fim. Então, vamos fazer com que seja assim. Em seguida, vou trabalhar
com o layout automático, torná-lo mais responsivo, porque vou reutilizar
esse botão mais algumas vezes. Vamos clicar em Shift
mais um atalho. E, como você pode ver
em uma seção posterior, criamos imediatamente
um layout automático. Então, vamos
garantir que tudo esteja alinhado no centro. Além disso, teremos nossas margens
horizontais, preenchimento
horizontal com
um valor de 32 pixels e o preenchimento vertical
com um valor de 16. Também quero criar o raio do canto com
um valor de oito. E então não nos
esqueçamos de acrescentar nossa falha porque agora tudo é transparente. Então,
qual é o botão de adição, que criou um
preenchimento sólido e
é automaticamente branco, então você realmente
não consegue ver
nenhuma diferença. Mas vamos
trabalhar com gradientes. Então, vamos selecionar um gradiente linear. Nosso primeiro marcador
terá esse tipo de cor azul, e o segundo marcador
terá algo mais com os tons de roxo da cor. Também vamos garantir
que aumentemos a opacidade do nosso
segundo marcador para 100%. E também
modificarei rapidamente a posição
dos marcadores e
talvez apenas para ver melhor
visualmente como ficará. Vou esconder nossa grade de layout para que possamos vê-la
com mais detalhes. Obviamente, um
cinza escuro com azul roxo tem um contraste
muito ruim. Então, vamos realmente
mudá-lo para branco. E eu vou novamente modificar um pouco marcador
deles aqui. Vamos
reativar nossa grade de layout. Além disso, certifique-se de que tudo
esteja alinhado corretamente. Em seguida, também teremos
nossa garrafa secundária, que na verdade é apenas pilhas. Então, faça uma demonstração. E, na verdade, para tornar nossos
botões um pouco menores, alterarei novamente o tamanho da fonte
para o vale de 18. Você pode ver como
o layout automático de
tudo
responderá de forma semelhante e
também criará uma largura de banda
com média e a mesma que vou repetir
para este botão secundário. Além disso, vou acessar
rapidamente os plug-ins. Eu tenho esse plugin instalado
e a comunidade de pigmentos, e aqui,
vou procurar o ícone. Vamos rapidamente arrastá-lo
aqui para nossa área. E vou
fechar rapidamente esse plug-in
por enquanto. Em seguida, também vou obter a altura da linha até o
vale de 24 pixels e alinhar esses
dois elementos e garantir que
a distância seja de
oito pixels entre
os dois. Vamos parecer um grupo. Vamos posicioná-lo
um pouco mais perto do nosso botão. E então vou
voltar para a barra de ícones porque quero
mais alguns ícones que
vou usar para
nosso logotipo e também outras informações quando
aparecer em nossa página de destino. Então, vamos pesquisar rapidamente
por um ícone que eles usaram anteriormente em alguns dos
meus projetos anteriores. E então eu também
colocarei rapidamente mais alguns
ícones nessa tela. Tudo bem, vamos
manter esse ícone aqui por enquanto. E essa, eu
também vou mudar sua cor, a roxa que
eu uso no nosso botão. E vamos
digitar rapidamente algum tipo de logotipo, nome, nome da empresa. Também alterarei o tamanho, o valor de 24 e também as camadas vetoriais
dentro do meu quadro, aumentarei a largura
do traçado, mas o valor de dois. Vamos alinhar
tudo assim. E também vamos mantê-lo um
pouco mais próximo um do outro. E, eventualmente, eu
também vou agrupá-lo. Em seguida, vamos digitar
alguns itens do menu. Vou duplicá-lo algumas
vezes porque vou
ter outros itens que vou renomear rapidamente,
selecionarei todas essas camadas, selecionarei todas essas camadas, depois clicarei em arrumar e
certificar-me de que estão à distância entre
si são 64 pixels. E com control plus g, eu também vou
criar rapidamente. Vamos
alinhar tudo em uma linha. E também vou me certificar de
que nosso logotipo esteja alinhado com outros elementos aqui
no lado esquerdo. Na verdade, vamos colocar nossos casos de uso de forma
que também estejam alinhados à nossa
coluna. Tudo bem, agora eu posso
duplicar rapidamente este botão
para controlar mais D e colocá-lo aqui e colocá-lo aqui
porque eu gostaria de ter
outra chamada à ação, que é a terceira gratuita. E então vou me certificar de que o contêiner das
pilhas tenha uma
largura fixa , pois duplicaremos a parte inferior novamente e
teremos outro botão secundário. E o texto aqui pode
ser um pouco mais curto e eu não quero que ele seja
reduzido de forma responsável. Então, vamos parar aqui, seno n, e vamos alinhar
o centro com o meio. E você pode ver
que a largura
do contêiner permanece
a mesma porque
o fixamos . Com nosso cinto. Teremos apenas um preenchimento sólido simples
com uma cor branca e adicionaremos um traçado com
o valor de um pixel. E também nosso texto
terá uma cor escura. Então, ECS, acabamos de criar outro botão que vamos
colocá-lo aqui, 24 pixels do outro. Também vamos agrupar
essas camadas e
garantir que elas estejam alinhadas
com a última coluna. E também alinharemos
tudo ao centro. Tudo bem, perfeito. Agora também temos essa coisa que vamos ver aqui. E vou apenas diminuir o valor
deles para 16 por 16 pixels. E para cada um dos vetores, quero reduzir o
peso do traçado para o valor de um. E vamos digitar alguns
recursos para este projeto, alterá-los para o normal. E também a altura da nossa linha
será 16 pixels porque os
dois são um pouco demais. Em seguida, vamos
ter uma distância de quatro pixels entre cada uma delas e selecionar ambas as
camadas e pressionar Shift e selecionar ambas as
camadas e pressionar Shift
mais a para criar
outro layout automático. Tudo bem, perfeito. Vamos
duplicá-lo duas vezes com controle mais C. E agora, o que há de bom
com o layout automático? Porque eu vou
arrastar outro ícone aqui e você pode
vê-lo imediatamente. Basta adaptar o
depoimento e o mesmo que farei
com um terceiro poço, faria um terceiro rótulo e excluiria também
nosso ícone de pincel. Agora só precisamos alterar o
texto em ambas as camadas. Tudo bem, agora vamos combinar
tudo um com o outro. Clique em arrumar e eu vou ter
a distância entre todas
essas três etiquetas com
o vale acima de 32 pixels. Também podemos pegar essas duas
camadas, agrupá-las também. E então vamos
selecionar nosso título,
nosso corpo, texto e botões
e também eliminá-los. E, basicamente, ter o valor de 60 pixels entre todos eles. Em seguida, ele os
agrupará novamente. E, basicamente, podemos mudar
um pouco sua posição. Esse grupo, essas camadas também. Então, no momento, basicamente temos o básico dessa página de destino. Então, o que eu tenho que fazer
é realmente voltar à minha plataforma criativa e
procurar algumas ilustrações animadas que vamos baixar. Na verdade, vamos até a barra de pesquisa e eu
vou digitar o projeto. Você pode ver aqui
vários resultados. Mas o que eu já
usei e mostrei
na demonstração
será esse projeto de Ai. Vamos clicar por clique sobre isso. E o legal
é que você pode basicamente modificar as cores dessas animações de loteria,
caso queira
baixá-las como uma imagem estática, você também pode
clicar nessa opção que ele apenas o
baixará como uma ilustração, mas eu quero mantê-lo como
uma animação, é claro. Então, vamos clicar em
uma dessas cores. E eu vou realmente
voltar
aqui e apertar meu botão. Vou pegar rapidamente esse código de cor roxo e
colá-lo aqui mesmo
na animação maluca. Você pode ver que a mudança é uma pequena mudança dessa cor. Em seguida, também acessaremos
o marcador de cor azul, copiaremos esse código hexadecimal e, basicamente ,
colaremos em vez
da cor rosa. Você também pode ver imediatamente essa grande mudança e
a mesma com nossa escuridão. Vou deixá-lo um pouco mais escuro, basicamente algo como uma cor
mais preta. Portanto, você também pode modificar uma cor de
fundo, se quiser. No momento, é branco, mas eu
não vou mudar isso em nada. Então, vamos clicar em Baixar. E aqui eu tenho a
opção de baixar gratuitamente o GIF
MP4 ou MP4 adjacente. O que Glenn precisa
para o Figma, embora compatível, é o arquivo GIF. Você também pode aumentar o conjunto, o tamanho até o máximo. Serão 512 pixels. Não sei quais são
os valores mortos, mas esse é o seu Pmax.
Nós vamos usá-lo. Vamos começar o download. Perfeito, porque eu
trabalho no navegador, posso imediatamente pegar
esse download e colocá-lo aqui
mesmo no meu projeto. Também podemos alinhá-lo ao lado direito
do nosso botão de
call to action. E eu também vou selecionar isso e basicamente alinhar
tudo ao centro. Então, no momento, você
pode não ver esse tipo de
animação porque
só temos essa animação de
loteria e parece que não está se movendo. Mas o conjunto de testes,
vamos para o modo de apresentação. E aqui você pode
realmente ver que temos essa
linda animação. Então é assim que simplesmente
baixamos o arquivo GIF do Crazy, colamos aqui
e fazemos sua página de destino. O que eu também quero fazer neste projeto é
adicionar algum tipo de fundo
desfocado para
criar um pouco mais de contraste entre essa
animação de carregamento e meu plano de fundo. Então, vou usar outro plugin chamado blobs
e, em seguida, geraremos
um blob aleatório. Vamos apenas inseri-lo. E basicamente podemos ir
direto aqui e mudar posição
dele
até o fim em nossa página de destino Eu também vou mudar sua cor
para algo assim. Vamos até os
Efeitos e aplicaremos um desfoque de camada e, na verdade, obteremos
o valor com 200 pixels, talvez um pouco mais. Então você pode ver que temos imediatamente esse fundo
desfocado. Então, deixe-me modificar
rapidamente a posição
de ambas as camadas. E vou
duplicá-lo rapidamente novamente com
um controle mais D me. Vou remover esse efeito e também modificar o
preenchimento para a cor branca. E que atalho de tecla shift
mais x. Podemos ver que agora temos um contorno de traçado que
diminuirá sua largura. Então, aqui teremos um
bom efeito que
vamos aplicar em nosso projeto. Eu também vou
aumentá-lo rapidamente e também aumentar novamente. Então, vamos selecionar esses dois
blocos com o contorno e
alinhá-los ao centro. Também controlarei G com os atalhos para que
possamos realmente agrupá-lo. E também podemos brincar
com sua posse, talvez girar um pouco e
criar algum tipo de contraste. Vamos também duplicar rapidamente
nosso bloco desfocado. Também vou diminuí-lo
em uma exposição e modificar seu ângulo de rotação. E também vamos
pegar essa cor roxa, que vou deixá-la um pouco mais clara para que
não seja tão perceptível. E vamos
colocá-lo totalmente atrás em nosso painel de Camadas
nesta tela. Isso é algo
aproximadamente que você pode fazer facilmente como uma página de destino. E, na verdade, vamos
voltar aqui e ver as mudanças que aplicamos
a essa página de destino. Na verdade, é assim que você pode aplicar animações de auditoria simples à sua página de destino ou a
qualquer outro design e torná-la muito mais interessante
para seus usuários finais. Então, pessoal, certifique-se de usar o link abaixo deste vídeo com
um código de desconto para obter
10% de desconto na criação. E espero que você tenha gostado desse tutorial e espero
ver você na próxima vez.
Tetiana G, UX Designer
