AULÃO DE FIGMA - Criando uma Landing Page do zero!

Fala meu povo como é que vocês estão finalmente a gente vai para o nosso aulão de firma vamos criar uma Landing Page do zero eu vou mostrar todo o meu processo criativo a gente vai fazer uma Landing page de um projeto real aqui não tem nada de fake Então vai ser um projeto real de um cliente meu essa aula vai ser braba vai ser pesada então para quem ainda não assistiu minhas aulas eu indico fortemente que você volte nos vídeos e assista são três aulinhas de figma básico para você ter uma noção do que eu

vou fazer aqui porque eu vou fazer um processo meio acelerado vamos ter algumas etapas que você pode não entender porque eu já expliquei lá nas aulas Então volta aí assiste as aulinhas e depois vem pro aulão certo então vamos lá vamos começar aqui eu vou mostrar todo o meu processo criativo vou dar várias dicas Então a gente vai começar a criar ela do zero e eu vou mostrar para vocês no final como que eu apresento isso pro meu cliente e como que eu faço para ter quase 100% de aceitação nos meus layouts de primeira certo

então sem mais Então nós vamos para o figma bom galera Então vamos lá antes de eu abrir o figma eu tô aqui no no Miro para quem não conhece o Miro é um site para você fazer um mapa mental de qualquer projeto então miro.com para quem não conhece é muito bom então eu resolvi fazer aqui mapa mental do que a gente vai criar porque como eu já falei nas outras aulas é muito muito importante a gente entendeu o projeto como um todo entendeu que a gente está fazendo não é simplesmente abrir o Sigma e sair

fazendo um layout tá ligado a gente tem que ter um propósito e um objetivo ah Rodrigo mas como a gente sabe o objetivo conversando com o cliente Antes de iniciar o projeto a gente vai fazer o famoso briefing tá para quem não conhece pra quem não sabe como fazer um briefing eu vou dar um exemplo de um do meu aqui para você entenderem um pouquinho então existe várias formas de você fazer um Brief você pode usar o formato do Google você pode fazer uma Call com seu cliente você pode mandar um e-mail com as perguntas

eu já testei todos os formatos possíveis e esse que eu tô usando é o que mais me ajuda o que mais me agiliza no meu processo então o cara vai vir aqui quando eu fechar com o cliente eu mando esse link para ele ele vai vir aqui ele vai colocar o nome da empresa dele aqui você vê que é um formulário dinâmico então ele funciona de uma forma bem fluida colocar errado meu telefone né aqui vocês vão ver que ele é um formulário dinâmico Se eu colocar assim eu posso colocar até pelo teclado por isso

tem esse ASB aqui certo então se eu colocar o a se ele já possui site eu pergunto o endereço do site se ele não possui eu pergunto se ele já tem domínio então aqui eu vou pegando informações do meu cliente ó se ele já possui a identidade visual sim eu tenho que enviar não eu quero fazer Já possui texto para o site sim e vou enviar Já possui foto do Expert o produto não tem que ser feito selecionar as páginas que vamos institucional de produto página de captura Ah eu quero fazer uma página de venda

e uma página de captura certo Qual é o objetivo do seu site muito importante Qual é o público alvo principal do projeto vai ter integração com algum CRM vai ter com a rede Station então aqui galera eu consigo capturar informações valiosas para eu iniciar o meu projeto tá essa é a primeira coisa que eu faço depois que eu pego o briefing eu vou dar uma estudada né vou dar uma estudada no meu cliente vou entender as necessidades e a dor dele depois eu vou estudar o nicho para entender um pouco vou ver os concorrentes vou

ver que eles estão fazendo de bom que eles estão fazendo de ruim e como eu posso melhorar o que eu tenho que fazer certo então depois dessa etapa a gente vai vir aqui para o nosso famoso behance e vamos buscar muita referência é ideal que você perca no mínimo uma hora aqui buscando referência Você pode buscar referência de duas formas uma do nicho do seu cliente em específico para ver o que que tem de legal aqui para você aproveitar e a outra você pode buscar aleatoriamente então eu vou vir aqui por exemplo eu vou digitar

aqui ó além de peixe e eu vou começar a Navegar igual um maluco aqui procurando referência visual a gente não vai se prender conteúdo obviamente porque é um outro nicho é um nicho que nada a ver mas assim pode ter algum elemento alguma composição aqui que a gente acha interessante tá desde composição de imagem até a parte de lettering tá então tudo que você achar de interessante você vai buscar e vai salvar lá no seu painel semântico eu vou mostrar agora como é que faz isso para quem ainda não conhece Este plugin aqui ó que

ele chama Light shot vamos ver aqui ó Light shot é uma extensão do Google Chrome tá aqui ó Light shot Então você vai instalar ele depois você vai vir nesse bagulhinho aqui ó e vai clicar nessa paradinha em cima dele aqui para ele ficar aqui certo então vamos supor que eu tô aqui buscando referência E aí eu vou entrar em uma página aqui qualquer para dar um exemplo para vocês e de repente eu gostei desses elementos aqui como eles estão aqui então eu vou vir aqui vou clicar e arrastar aqui eu posso salvar eu posso

imprimir Eu posso salvar no Google e eu posso copiar eu vou copiar eu vou vir no nosso Sigma e vou simplesmente dar um control V então eu acabei de colar o bagulho aqui certo então vamos começar aqui o nosso projeto eu vou eu vou tirar meu rostinho lindo aqui da tela porque vai ficar em cima das Ferramentas aqui bom então vamos lá qual que é o primeiro passo que a gente tem que fazer eu vou criar aqui as páginas para quem não lembra ou para quem não assistiu as aulas a gente vai clicar aqui em

páginas eu vou adicionar três páginas para começar uma vai ser a capa não vão ser quatro mais uma uma vai ser a capa a outra vai ser o nosso painel semântico a outra vai ser o design System e aqui o projeto em si certo então vamos vir aqui na capa vamos vir aqui em frame criar um novo vou colocar aqui 1920 por 1080 para quem lembra da aula essa página aqui ela só serve como capa então eu vou pular aqui agora para o design System e a gente vai criar um novo frame aqui eu vou

criar um uma forma aleatória aqui e aqui primeira coisa que eu vou fazer eu vou jogar Os Logos que eu vou usar do cliente certo isso já capturei com ele numa reunião pós briefing então simplesmente vou pegar da pasta e vou arrastar para cá ele tá gigantesca Vou colocar aqui 500 até menor 300 Vamos aumentar aqui e Vamos aumentar aqui que eu vou colocar mais dele eu vou acelerar o processo aqui [Música] pronto galera então eu importei aqui todos os Logos então eu vou ver qual que eu vou usar ainda vou colocar aqui logotipo certo

a segunda parte Vamos criar outro frame aqui do lado Vou colocar aqui cores Então aqui estão as cores que a gente vai usar certo pronto galera fiz a paleta de cor e agora vamos criar aqui ó o seguinte vamos criar os estilos os estilos para as cores certo então vamos clicar aqui nesse íconezinho clicar [Música] aqui ó Preto Vou colocar aqui Amarelo Vamos colocar aqui Verde cinza o azul e o branco certo então temos todos os estilos de cores Pronto agora vou ensinar uma coisa que eu não mostrei nas aulinhas que é uma coisa muito

importante eu vou dar um exemplo disso se você tá querendo um site grande que tem sei lá 10 20 páginas e você cria um botão com esse azul por exemplo E aí na hora que você vai mostrar para o seu cliente ele fala não gostei desse azul vamos trocar a cor desse botão aí para laranja então se você não fizer isso aqui e você tiver o botão espalhado pelas 20 páginas você vai ter que alterar um por um e isso vai te tomar um tempo danado e vai encher a do saco então quando a gente

criar os estilos de cor é muito importante você fazer isso não só para couro como para qualquer elemento que você usar é legal você fazer isso você vai clicar aqui em cima e você vai clicar aqui ó criar componente quando você criou o componente você sabe que ele fica com a cor roxa aqui e aqui tá vendo ó Isso significa que é um componente certo então a gente vai fazer isso com todos os elementos então agora repara que se eu duplicar esse botão e Aqui foram um botão um exemplo de um botão que tá na

home aqui é um botão que tá em contato e aqui é um botão que tá na página de quem somos esse aqui que vai ficar no design System ele é o objeto principal esses daqui são secundários que estão espalhados pelo site certo então se o cliente falar muito desse azul para um vermelho o que que você vai fazer você vai clicar em cima dele você vai vir aqui no azul vai clicar com o botão direito e clicar em editar estilo e vai vir aqui ó então repare que se eu mudar a cor dele ele tá

mudando a cor de todos sacou Essa é a pegada isso é uma coisa muito importante para você fazer para lá na frente você não se fufu certo então cria um componente E aí se precisar alterar a cor precisar fazer qualquer ajuste então por exemplo o cliente gostou do botão mas ele não quer que tenha borda arredondada Então você vai vir aqui vai tirar a borda ali e vai sair de tudo tá vendo Então façam isso é muito importante tá Então como que funciona Você vai deixar aqui o original aqui no design System e vai usar

ele no seu projeto quando você tiver que mudar a cor mudar qualquer coisa você vem aqui no design System e altera certo então agora vamos vir aqui na capa e Vamos alterar essa cor aqui vamos colocar um verde Spa E aí eu vou vir aqui no design System eu vou copiar esse logo eu vou jogar ele aqui certo vou aumentar vou centralizar vamos dar a cor aqui vai vamos colocar o escuro aqui pronto temos a nossa capa certo capa Brasil show turismo galera Vão renomeando tudo que for possível para você ter organização no seu projeto

Tá bom então a gente tá aqui com o nosso design System tá bem simples ele pode ser bem mais completo Até bem mais elementos do que isso como tipografia botão e qualquer tipo de elemento que você for replicar no seu site tá para iniciar eu vou deixar assim e mais para frente a gente vem aqui e atualiza ele tá então agora como eu já fiz a minha busca o meu estudo ali de referência eu vou vir aqui no nosso painel semântico e vou começar a colar tudo que eu peguei que eu achei legal então eu

vou começar colando isso aqui uma parada que eu achei legal a composição dela vou dar um acelero que aqui é copia e cola tá [Música] bom galera aqui tá meu painel semântico Tem várias coisas aqui que eu acho interessante eu vou dar mais uma dica quando você tiver criando seu painel semântico Você vai clicar nesse balãozinho aqui e vai colocar um comentário para você não esquecer porque que você pegou essa imagem tá então por exemplo eu vou vir aqui vou clicar aqui em cima eu vou colocar aqui ó Gostei da sobreposição tá ligado Então se

lá na frente eu precisar para não me perder eu vou deixar isso aqui certo então você pode ir colocando esses avisos aqui até se você trabalhar em time para outra pessoa ver porque que essa imagem tá aqui certo então você pode fazer várias coloca esses espinhos Aonde você quiser para você lembrar porque ela existe certo então depois tudo isso agora assim a gente vai para o projeto em si tá então a gente vai clicar aqui em projeto Vamos criar um Frame vou colocar 1920 por ser a seis mil que isso aqui vai ser gigante 7

000 certo então temos aqui a nossa página ela vai ser aqui ó Landing page destinos Rio de Janeiro aqui eu vou colocar também ó LP destinos Rio de Janeiro Pronto agora qual que é o próximo passo a gente vai criar o nosso guideline certo então vamos clicar aqui em cima de layout Grid depois vamos clicar aqui e vim aqui em coluna certo aqui eu trabalho com 12 colunas Eu trabalho com guter guter de 20 que nada mais é do que esse espaçamento entre as colunas e aqui na margem eu vou colocar 320 esse aqui eu

já expliquei também na aula então o que que aconteceu eu criei um Grid que eu vou ter uma área útil aqui de 1280 pixels de largura tá que é o que eu preciso e é o que eu trabalho aqui cada um cada designer trabalha de um jeito Depende de alguns fatores de como site vai ser desenvolvido e tal e eu vou tá aqui para falar que tudo que eu faço aqui que eu falo é a forma que eu trabalho não tô falando que a forma certa e nem que a única forma correta de se fazer

Cada um faz o seu jeito o que importa não é a ferramenta O que importa não é o seu método o que importa é o resultado certo então é isso tá bom então pronto estamos aqui com o nosso projetinho já criamos aqui o nosso Grid e agora vamos para o regaço para adiantar um pouco a aula já salvei algumas coisas como imagem etc Eu Já criei Inclusive essa primeira imagem que a gente vai usar na primeira dobra no que a gente chama de Hero que é uma das partes mais importantes do site porque aqui que

vai impactar o cliente a primeira vista quando ela entrar no site é a primeira coisa que ele vai ver então ele tem que ver uma coisa bonita atraente para que ele tenha vontade de ver o que tem para baixo certo eu fiz essa imagem aqui já no Photoshop Tá eu vou mostrar porque eu joguei ela aqui eu cliquei e arrastei eu vou utilizar ela ao meio aqui e aqui no topo certo vou apertar um shifting giro para esconder a guia e vou dar um Ctrl colchete cara eu sempre esqueço o nome dessa por favor Quem

souber o nome disso aqui ó Coloca aí nos comentários para mim por favor esse bagulho aqui então se você apertar Contra esse bagulho ele vai sumir com as colunas laterais de ferramenta Tá vendo você vai ter só o seu layout aqui se você apertar ctrl + shift mas esse barato aqui ele vai esconder só a do lado esquerdo então se você quer ganhar espaço mas não quer perder aqui porque você vai trabalhar com as informações do elemento você consegue tá então contra o shift esse bagulho esconde ali e contra o shift esconde as duas tá

então é isso vou dar um control zero para deixar a imagem sempre por cento e vou esconder o bang ali pronto a gente tá com a imagem aqui por que que eu eu fiz ela no Photoshop primeiro que eu dei um tratamento na imagem bem de leve mas eu dei Mas isso você pode fazer no Sigma e eu fiz esse lancezinho aqui para esconder aqui fazer essa máscarazinha também dá para fazer no Sigma Mas eu prefiro fazer no Photoshop tá Inclusive eu vou fazer uma aula sobre Hero para a gente fazer uma um giro cabuloso

usando Photoshop e depois jogando aqui para o Sigma acho que vai ser a próxima aula na verdade então jogamos Bang aqui e agora vamos começar a colocar o conteúdo do bagulho certo então eu já tenho aqui o meu a minha cópia eu vou jogar ela aqui pronto vamos alinhar ela bem certinho aqui na parada pronto vamos colocar agora o texto aqui então aqui tá copy agora aqui o texto complementar eu não quero ele maiúsculo não então vou vir aqui eu vou tirar isso aqui ó certo já temos aqui o nosso testinho eu posso fazer assim

ou eu posso vir aqui simplesmente clicar aqui Pronto agora vamos colocar um botãozinho Vamos fazer um botãozinho certo Existem algumas formas de fazer botão uma delas é você fazendo isso e vindo com texto escrevendo e a outra forma é você simplesmente clicar no tezinho aqui e escrever então vou colocar aqui ó fale com um especialista eu creio texto eu já vou vir aqui vai ser Inter semibode Não esse remédio mesmo e vai ser preto e agora eu vou dar um shift a que que eu fiz agora eu fiz um alto layout Então vou vir aqui

agora em fio e vou colocar um verde tá então agora a gente tem um botão Opa ó já vou falar aqui ó vamos pegar essa imagem aqui clicar no cadeadinho Para não acontecer isso travei ela pronto então agora a gente tem um botão aqui e aqui a gente tem as configurações dele aqui eu posso esticar ou diminuir o espaçamento das laterais certo então eu vou fazer o seguinte eu vou jogar ele vou jogar ele aqui e vou vir aqui e vou esticar ele até aqui tá E também eu posso vir aqui esticar o espaçamento na

altura eu vou deixar 18 pronto temos um big botão e vou vir aqui agora eu vou arredondar esse botão vou colocar nove aqui só para dar um papo certo então Já temos um botão temos uma cop e temos a nossa Hero pronta agora eu vou dar uma alinhada Eu acho que eu vou tirar um pouco peso dessa parada aqui assim aqui a gente está com a fonte Inter usando 18 eu vou usar 18 aqui e no resto do site para corpo de texto vou usar 15 ou 16 e aqui tá nosso botão Então vamos ajustar

agora os espaçamentos eu quero daqui para cá você pode vir aqui ó e ajustar o espaçamento você pode vir no na mão por exemplo tá aqui eu vou apertar um Alt ele vai me mostrar quanto que tem aqui ó tem 53 espaçamento eu posso simplesmente vir na setinha por para cima ó 52 51 50 e daí eu posso apertar o shift E aí vai de 10 em 10 então ó 40 30 20 pronto é o que eu quero tá então para ajustes milimétrico você pode vir na setinha aqui ó se você quiser ou ajustar diretamente

aqui selecionando os dois apertando o shift vindo aqui ó eu coloquei 20 aqui vou colocar 20 aqui pronto vamos dar um contra o trequinho aqui para a gente ver tá aqui a parada eu tô achando só esse botão muito grande Tá ligado eu não gosto então eu vou dar uma ajustada aqui nele eu vou tirar aqui para o 40 e aqui para um 15 eu acho Pronto acho mais elegante tá ligado 20 tá pronto então a gente tá com tudo alinhadinho certo aqui tá bom Agora que a gente vai fazer vou vir aqui e vou

criar uma bola vou colocar essa bola branca certo vou jogar ela aqui para baixo vou vir aqui em efeito e vou colocar um Blair e aqui eu vou colocar no talo eu quero criar uma mancha branca para que para dar destaque no meu texto certo então eu vou colocar isso aqui ó vou tirar um pouquinho da opacidade para não ficar tão estourado acho que tá bom então com a bola sem a bola tá bem Sutil Mas você percebe que a leitura melhorou bastante tá galera o texto vou arrumar eu achei ele muito pesado Eu acho

que eu vou fazer só assim ó Rio de Janeiro sem perrengue essa cópia que tá aqui não é uma cópia definitiva tá é uma cópia que eu coloquei aqui vou mostrar para o cliente a gente vai definir a cópia do site inteiro junta mas concordam comigo que não existe coisa pior do que você viajar e passar perrengue cara não existe nada pior uma outra coisa que eu costumo fazer na minha zona de peso é criar aqui um quadradinho eu coloco aqui 60 a linha ele no topo dou um shift r e puxa uma reguinha para

cá ó e deleto isso isso aqui serviu só para marcação Então agora eu tenho uma um parâmetro da onde eu posso chegar não vai me vir com esse texto aqui e fazer isso deixar colado porque isso é horrível a gente tem que respeitar as margens tá isso aqui é um pouquinho falando de White Space e eu vou falar disso numa aula específica que é um lance muito importante no design Tá mas a gente tem que sempre deixar respiro sempre deixar espaço e sempre deixar tudo meio brocado o que a gente quer mostrar eu vou falar

disso melhor aqui mas eu vou fazer uma aula só disso também bom galera Agora vamos começar a descer aqui assim eu vou fazendo por bloco então a gente acabou de finalizar a parte da primeira Dobra a gente vai pra segunda depois a gente vai vir dando um pente fino em tudo tá bom então a ideia a gente coloca nos elementos e ajustando conforme for necessário tá então agora eu vou escrever aqui ó uma chamadinha o que faz o Rio de Janeiro ser não que faz o Rio de Janeiro especial pergunta que não quer calar então

aqui vai ser no mito é regular 30 vamos centralizar aqui vamos centralizar aqui vamos colocar lá agora eu vou vir aqui galera eu vou vir aqui no espaçamento vou deixar aqui uns 30 tá 35 Pronto agora vou vir aqui ó vou colocar essa parte aqui em Bold galera aquele lance no design System aqui eu já expliquei na aula você pode criar H1 h2h3 e aqui a hora que você vir aqui você já tem elas aqui tá eu não tô fazendo isso porque eu vou fazer daqui a pouco Pronto agora vamos ver quanto tem espaçamento aqui

ó tem 31 tá vendo eu vou dar um toquezinho aqui no minha setinha pronto 30 já alinhei certo então já temos uma chamada bem aqui e agora eu vou colocar uma setinha aqui e um texto aqui então Vamos colocar o texto vou dar um shift G para abrir a nossa guiazinha vou clicar aqui no tempo vou clicar e arrastar que eu quero Que preencha este Campo aqui vou colar o meu texto aqui nossa que zona vamos vir aqui tirar o maiúsculo vamos alinhar ele para esquerda Vamos dar um Ctrl zero para ver em tamanho real

100%, então ele tá aqui alinhado Aqui você pode vir aqui clicar aqui ó que se você for escrevendo ele vai aumentando Se você deixar aqui e puxar aqui ele vai ficar travado nesse tamanho tá então algumas coisas eu faço na mão por exemplo aqui ó tá começando uma frase eu vou dar um enter aqui também não gosto de deixar um uma palavrinha pequena assim no final vou jogar lá para baixo e tá pronto são detalhezinhos tá vamos tirar aqui a guia vamos ver se tá bom o tamanho da fonte o espaçamento entre as linhas vou

deixar aqui com 25 de espaçamento entre as linhas e tá pronto tá ligado tá pronto essa parte aqui ela tá centralizadinha certinha e agora eu vou fazer o seguinte vem aqui no nosso quadrado vou criar um quadradinho pequenininho aqui dos 20 por 20 vou vir aqui vou colocar o preto vou dar um zoom vim aqui ó girar 45 e vou colocar isso aqui ó centralizar então agora a gente tem uma setinha ali certo porque eu tô respondendo essa pergunta aqui então agora eu vou subir isso aqui vamos ver aqui ó vou deixar 60 eu vou

mostrar um padrão que eu uso aqui de espaçamento entre os elementos tá pronto certo agora vamos para mais conteúdo eu vou vir aqui vou duplicar esse rolê aqui dando um Ctrl D já vou vir aqui vou colocar um preto e vou escrever aqui ó principais pontos turísticos do Rio de Janeiro Vamos descer esse rolê para cá tá pronto vamos alinhar aqui ao centro já vamos dar o espaçamento aqui que vai ser 90 já é começou aqui uma Landing page e uma Landing page ela serve Com um único objetivo a gente tem que ter um objetivo

dentro de uma Landing page não adianta você querer vender cinco serviços ou três produtos não adianta maland page é uma página de venda ela tem que ter um foco um objetivo Qual que é o objetivo aqui que a gente definiu o objetivo aqui é gerar liderari de como com esse botãozinho essa Colt reaction que tá escrito fale com especialista A ideia é a gente conseguir levar o lide que tá aqui dentro para um X1 no WhatsApp então a gente quer fazer uma venda um X1 no WhatsApp então esse é o objetivo principal desse site sendo

assim a gente tem que evitar ter link externo evitar Não não pode usar link externo porque a gente não pode tirar o nosso vídeo daqui de dentro a gente não pode tirar o foco dele a gente tem que ter um único objetivo tá então Não tem link não tem menu não tem logo não tem nenhuma tem o que precisa para gerar Lead Isso aqui é uma página de venda uma página de conversão Não inventa moda não fica enfeitando firula que não precisa não fica colocando elementos à toa aqui nessa página essa página tem um único

objetivo e se ela não E se você não respeitar isso você não vai ter uma boa conversão Tá então vamos lá agora eu quero mostrar um pouquinho do Rio pô Rio é bonito para Nada mais justo do que a gente mostrar bastante imagem do Rio para convencer o cara de ir para o Rio ele vai olhar a foto igual um lanche você viu um lanche bonitão você fica com vontade de comer aqui a ideia é a mesma Então vamos habilitar aqui a nossa guia e agora vamos pegar aqui o nosso quadradinho vamos começar a criar

eu vou fazer aqui uma primeira parada que vai ser eu acho que assim vou colocar aqui de altura e vou deixar ele aqui no meio certo eu dou um zoom cabuloso para ver se tá certinho Tá certinho vamos vir aqui por 9 de arredondamento que é padrão que eu tô usando então se você usou 9 e tá redondando tudo arredondo o site inteiro não vai deixar uma coisa quadrada outra Redonda outra você tem que deixar sempre os elementos em sintonia tá então use um padrão tem um padrão para tudo é muito importante você ter padrão

de tamanho de fonte de espaçamento de elemento então assim você consegue deixar o seu trampo profissional respeitando o espaçamento Esse é o a dica chave para você ter um layout bonito bem feito e que vai dar uma cara de profissional porque se você fizer isso aqui ó juntar aqui e depois junta aqui e depois coloca outro bagulho aqui e daí vai ficar tudo grudado vai ficar horroroso não vai dar leitura vai ficar uma verdadeira merda tá então esse é o trabalho que a gente tem é cada momento tomar todo o cuidado de espaçamento deixar tudo

muito certinho Tá bom para ficar um negócio bonito o negócio profissional então Ó você percebe que eu tô criando blocos ó só com espaçamento Dá para perceber que isso tá integrado a isso por vários motivos eles estão relativamente pertos e eu coloquei essa setinha indicando que isso daqui tá ligado a isso certo aqui já é um outro bloco então eu tô dando 90 de espaço então para cada divisão de bloco eu uso 90 para cada item relacionado assim eu uso sempre 30 tá então isso daqui já vai definir o meu espaçamento do site todo então

agora eu vou dar um Ctrl gelo duplicar esse rolê Então agora eu vou apertar o alt e o shift e vou arrastar aqui para esquerda porque eu aperto o chifre se eu não apertar o shift ele pode se perder assim ó seu seguro ele fica na linha tá bom puxei para cá venho aqui puxo aqui para cá então agora vou fazer a mesma coisa vou apertar o alt o shift e vou arrastar lá para o outro lado pronto fizemos a primeira coluna de conteúdo certo então temos aqui a primeira coluna de conteúdo onde eu vou

colocar fotos do Rio de Janeiro na sequência galera eu já vou criar uma outra parte que é uma parte mega importante isso daqui as estruturas eu já tenho ela na cabeça porque porque eu vi referência porque eu estudei porque eu vi o conteúdo Então você já vai formando uma ideia na sua cabeça você vem aqui coloca pode funcionar pode não funcionar se não funcionar você simplesmente muda mas eu já tinha essa estrutura na minha cabeça porque quando a gente vai estudando vem na referência a gente já consegue ter essa visão tá então como é que

eu tô usando 20 de ganter eu vou colocar aqui 20 de altura Entre esses elementos tá então agora esse daqui ele vai vir de ponta a ponta pronto vou fazer a mesma coisa ó out shift vou puxar para baixo já vou deixar aqui com 20 ó tá vendo que tá tudo com 20 Olha lá ele avisa ó tá tudo com 20 Maravilha vou puxar isso aqui para cá vou puxar esse aqui para baixo pronto tenho várias colunas que eu vou usar para trabalhar o meu conteúdo bom galera então agora como eu falei essa parte aqui

ela vai ter um ela vai ter um Call to Action né a gente faz chamar o nosso cliente o nosso Líder aqui para ação Então tem que destacar como eu destaco isso duas maneiras o tamanho você vai querer a maior elemento aqui da tela e o segundo é com cor Então vamos colocar um amarelão e agora vamos começar a trabalhar algumas imagens aqui dentro tá bom vamos vir aqui ó então eu já salvei algumas imagens que eu vou usar aqui para adiantar um pouco a aula certo então agora eu vou vir aqui eu vou jogar

vou vir na minha pastinha aqui e vou arrastar a imagem ali para nossa tela então aqui tá a nossa imagem eu vou tirar o zoom vou apertar o Shift para diminuir a imagem se não apertar o shift Olha o que acontece então com chifre eu vou diminuir vou colocar ela aqui como ela não entrou direto na no objeto que eu selecionei eu vou clicar aqui aqui e vou clicar com direito e vou colocar mesc Pronto agora ela tá dentro da máscara deste elemento como eu vou editar dois cliques puxo aqui e arrasta ela tá dentro

da minha máscara certo então vou dar uma diminuída aqui eu vou alinhar aqui e vou deixar um pouco mais do céu ali tá bom Aqui tá nossa primeira imagem talvez na hora de desenvolver isso ou no protótipo a gente pode fazer um Carrossel aqui tá pode fazer um Carrossel que vai ficar bem legal eu vou mudar aqui vou colocar dois esse elemento tem 400 de altura Se eu colocar 200 ele vai ficar metade mas eu tenho que ter esse espaçamento de 20 Então vou tirar 10 aqui aí fica com 190 vou clicar no Alt shift

vou arrastar para baixo temos dois elementos certo tem uma divisão agora mais bacaninha vou pegar mais uma foto vamos fazer o mesmo esquema shift máscara vamos alinhar ela aqui dentro certo carnaval no Rio de Janeiro quem não quem nunca foi vá porque é muito louco vamos por uma praiazinha né porque a praia do Rio de Janeiro se você vai polir ou não foi para praia você não foi para o rio certo então vamos colocar aqui ó o Maraca vou diminuir vou dar aqui uma máscara tem um jeito que você coloca direto ela já entra como

máscara Mas eu prefiro fazer assim porque eu tenho maior controle aqui do tamanho da onde eu quero deixar a imagem e tudo mais tá então aqui tá o nosso Maracanã aqui vai ser um vídeo Então vamos colocar Vamos fazer uma simulação do vídeo colocando uma foto certo galera Então já estamos começando a definir nosso conteúdo já tem uma nossa Hero lá pronta tá tomando forma já parada Então vamos para a nossa praia agora eu vou vir aqui no Google eu vou pegar uma imagem que eu esqueci que é da escadaria eu vou simplesmente clicar aqui

no Google vou copiar a imagem vou clicar aqui e vou colar ela já caiu aí para dentro certo então já era mano agora vamos trabalhar essa parte aqui creio eu uma das mais importantes aqui do site que é onde a gente vai capturar o nosso Lead então eu também já salvei uma imagem que eu vou usar aí tá aqui galera a imagem que eu vou usar certo então o que que eu vou fazer vou fazer mesmo vou clicar aqui vou fazer uma máscara e agora vamos alinhar ela aqui ó temos aqui nossa imagens certo mano

agora que a gente vai fazer é o nosso formulário e eu vou explicar para vocês e vou dar uma dica agora que muita gente esquece Só essa dica aqui já vale a aula tá ligado Então mano agora é sério mesmo eu vou pedir para vocês eu vou voltar aqui para tela galera agora é sério mesmo eu tô fazendo esse esse conteúdo para vocês totalmente na faixa eu garanto que o conteúdo que tem aqui é melhor que alguns ou muitos cursos pagos que tem por aí de gente que só quer saber de grana tá ligado eu

tô fazendo isso porque eu gosto porque eu tenho tesão de fazer então dá aquele like dá aquele likezão para gente daquele likezão para nós aí e também se inscreve aí que eu vejo que tem muita gente que assiste aula mas não se inscreve no canal se inscreve aí que eu vou postar muito conteúdo prometo para vocês toda semana vai ter pelo menos uma aula com conteúdo muito bom então ajuda aí daquela fortalecida que também me motiva a dar mais aula aqui para vocês mostrar mais conteúdo um pouco da minha experiência Tá bom então bora bom

galera então agora vamos fazer aqui o nosso formulário eu vou dar algumas dicas que muita gente esquece que é muito valiosa tá de verdade Primeiro vamos colocar nas textinhos aqui eu vou copiar essa aqui vou jogar aqui então aqui a gente vai colocar o seguinte confira nossos passeios e reserve pelo WhatsApp Tá eu vou tirar aqui vou vir aqui no reserve pelo WhatsApp e vou colocar um balde um extra Bold então aqui tá nas textinho e agora vamos criar aqui o formulário então vou clicar aqui vou vir aqui vou deixar 260 por Tá bom vou

arredondar aqui para 9 e vou colocar o nosso Branco vamos vir aqui ó nome então galera agora eu vou criar o primeiro estilo de texto aqui que eu não fiz ainda vamos usar aqui um padrão de 15 tá bom de 16 a fonte aqui vai ser no Nito mesmo então no Nito regular 16 é isso que eu quero eu vou vir aqui ó no mais para dar uma chamada texto vou criar o estilo pronto hoje eu quero aqui para dentro já centralizei vou jogar ele para direita e vou puxar aqui com a seta com shift

duas vezes nome out shift arrastei para o lado vou deixar aqui 10 espaçamento seu e-mail até a linha HD antes Aqui ó a direita para não acontecer isso aí ó seu e-mail pronto então estamos aqui os campos do formulário eu vou deixar um pouco menor aqui 50 e agora eu vou dar diquinha hein Agora vou dar diquinha não aplica porque eu tô fazendo aqui que eu tô fazendo a parada na horizontal Mas normalmente faz o formulário assim certo muita gente usa formulário assim é uma forma Ok de usar eu tô usando no outro jeito posso

usar Sim vamos assim vamos assim que eu vou dar um exemplo aqui a gente já aplica então é o seguinte primeira dica Se você não for usar o texto aqui dentro do campo que a gente chama isso de Place holder Se você não for usar aqui você for usar como Label você vai usar ele aqui certo assim certo Então a primeira dica é o seguinte esse espaçamento aqui ó entre o nome e o campo é regrinha tá isso essa tem que usar isso é uma regra é bom usar Então esse espaçamento aqui tem que ter

8 pixels daqui para cá 8 pixels tá bom a segunda dica Essa é mais importante desse Campo de texto para esse elemento aqui a gente tem que ter um espaçamento aqui ó esse é uma regrinha tá de 40 pixels a gente tem que respeitar 40 pixels aqui de espaçamento Ah porque Rodrigo porque é só uma regra inventaram do nada não tudo tem sentido então eu vou falar porque se o cara vem aqui e coloca aqui o nome Então se o cara vem aqui envie o formulário sem preencher o nome que que vai acontecer ele vai

dar um aviso de erro não vai você não preencheu você não preencheu este Campo sei lá e esse aviso ele vai vir exatamente aqui ó o programador bonitão lá ele vai colocar aqui porque aqui coloca então se você não deixar esse espaçamento provavelmente vai acontecer essa merda aqui ó vai estar aqui quando o cara não preencher vai ficar assim ó aí Que cagada certo então a gente tem que pensar em tudo então espaçamento aqui de 40 40 se você quiser você pode até deixar no seu layout isso daqui não é não é obrigatório não é

lei Mas você pode deixar tá ligado uma fontezinha menor então agora a gente está respeitando os 40 Aqui quando dá esse errinho vai ficar tudo lindo tudo maravilhoso certo então eu vou fazer o seguinte eu vou usar aqui dentro que eu gosto eu acho que ocupa o melhor o espaço e vamos fazer a parada aqui ó vou dar um controle aqui vamos subir esse Bang na verdade eu vou usar do outro jeito vai ficar melhor aqui para o meu para o meu projeto aqui eu prefiro usar assim agora tá ligado Então vou vir aqui ó

contra o g também agropeia tudo isso aqui vamos clicar aqui no texto e aqui você entra Vamos deixar tipo aqui certo agora o botão Vamos colocar o botão vou copiar o botão aqui de cima control V vou descer aqui vou deixar o mesmo espaçamento que tá aqui para cá tirar o controle tirar o Então agora eu vou descer esse botão aqui vou deixar com 30 certo a gente tá com tudo Centralizado bonitinho eu vou agrupar tudo isso aqui contra o g vou clicar aqui no retângulo e vou clicar aqui para alinhar verticalmente já era e

agora eu vou colocando mais para cá um pouco tá feito confiança passeios e reserve pelo WhatsApp agora está me perguntando Mas por que que você tá colocando enorme e-mail se o botão podia clicar ali já ir direto para o WhatsApp justamente porque eu quero pegar colher os dados desse desse Lead e jogar para o nosso CRM então o cliente tem um CRM quando o cara colocar o nome e o e-mail já vai para o CRM quando ele clicar aqui ele vai para o WhatsApp então ele vai fazer um duplo comando ele vai enviar os dados

do meu cliente do nosso Líder aqui para o CRM para depois o cliente meu cliente fazer um remarketing um trabalho de remarketing e aqui ele vai para o WhatsApp fazer uma venda um X1 certo então é isso eu vou pegar um elemento aqui do WhatsApp para a gente dar uma reforçada na pegada de que a gente está chamando o cara para o WhatsApp vou jogar a imagem aqui ó o ícone certo vou dar uma diminuída nele vamos ver se eu consigo fazer alguma brincadeira aqui acho que eu vou deixar tipo aqui assim ó e agora

a gente vai trabalhar com o modo de mesclagem do layer vamos vir aqui e vamos clicar em overlay ou melhor vamos clicar aqui em screen e agora vou vir aqui em efeito vou colocar um layer blurry vou vir aqui e vou aumentar isso muito pronto acho que vou deixar ele meio assim aqui para cá saindo ali Pronto acho que ficou legal certo galera Então temos essa área pronta temos aqui pronto temos temos um layout tá saindo vamos dar mais uma trabalhada agora aqui ó eu vou usar uma outra fonte galera eu vou falar vou fazer

uma aula juro para vocês sobre fonte qual fonte usar como mesclar a fonte por aí vai então mas eu vou dar uma diquinha rápida aqui que é básica nunca se usa mais do que três tipos de fonte um projeto nunca Isso é uma regra tanto para peça gráfica quanto para site qualquer coisa então Nunca use mais de três Fontes falando de Landing page de site além de você tomar esse Cuidado você tem que tomar outro cuidado que é o seguinte ó fonte a mesma fonte um estado normal e a mesma fonte no estado bold e

daí você vai usar Itálico depois você vai usar Extra bonde para cada uma dessas mesmo que seja a mesma fonte ela vai pedir uma solicitação nova no servidor isso acarreta no que lentidão no site tá então use duas fontes é o ideal fontes e dois estilos também ou três no máximo bold normal e light Sei lá o Bolt normal e Itálico tá ligado Três eu tô sendo usado aqui porque isso daqui ó por isso que eu fiz até no photoshop e isso daqui ó eu já vou usar dentro da imagem Então vou salvar essa imagem

aqui isso aqui já vai junto então ela não é uma fonte ela é uma imagem e agora eu vou fazer a mesma coisa aqui ó você pode ver que aqui eu tô usando a mesma fonte que aqui existem Fontes galera que fica legal para você usar de título mas fica uma merda para usar aqui no texto e vice-versa tem umas que ficam boas aqui e umas que ficam boas aqui então galera existe Fontes que ficam boas para o título e fontes que ficam boa para o texto corrido tem fonte que fica boa para os dois

tem uma delas Qual é popens potência eu gosto se a gente colocar palpites aqui aqui vai ficar bom não vai ficar ruim nesse caso aqui eu tô usando duas eu tô usando a no Nito que é uma fonte já usada pelo nosso cliente certo e tô usando a internet para texto corrido que eu gosto muito de usar enter aqui para ter escorrido Eu poderia usar Pops aqui e aqui poderia quer ver ó vamos colocar aqui ó Pops Então galera isso daqui é um trabalho que você tem que ter bastante cuidado na hora de fazer ó

tá vendo como ficar bonito essa fonte é maravilhosa eu gosto muito tem gente que fala ah é muito usada é muito usada porque ela é muito boa e é bonita Então tomem este cuidado tá na hora de trabalhar com fonte principalmente para web por causa de tamanho etc e outra coisa também você tem que usar fonte do Google tá usa a fonte do Google vai no Google fontes e escolha uma fonte lá uma outra diquinha que eu vou mudar de fonte aqui galera rápida que eu queria fazer só uma aula de fonte é o seguinte

a gente não tem no fígado infelizmente uma pré-visualização de fonte né então se eu escrever um Bang aqui pô quero trocar fonte ele não mostra a fonte isso é horroroso é um defeito do Sigma o filho é maravilhoso apaixonado nele Mas ele tem alguns pequenos defeitos esse aqui é o maior deles Então como que eu vou saber qual a fonte que eu tô usando né é uma merda então você vai vir aqui ó Clica com o botão direito vem plugin está nesse plugin aqui ó better Font Peter instala esse plugin e aqui você vai ter

o pré-visualização das suas fontes certo galera então pô agora facilita nossa vida né Então é só instalar esse plugin Tá bom eu vou mostrar aqui rapidinho também uma outra parada que eu uso bom o primeiro é o Google phone sim sim então você vem aqui escreve o que que você quer para você ter uma noção uma dica que eu dou ou você clica aqui em mostrar as variantes da fonte porque ele vai mostrar se tem a família E também você pode vir aqui ó e colocar uma palavra contigo com acento com tudo para você saber

se a fonte tem a parada que você quer tá ligado Às vezes tem fonte que não tem acento e você roda então você pode pôr assim Pode por maiúsculo E aí você já consegue ver de uma forma geral certo uma outra dica rápida tente encontrar uma família de fonte que tenha bastante variação ó dá mais fina normalmente vai ter 900 as completas então é legal você ter esse porque se você usar no site eu falei que você não pode usar várias não pode mas para usar em rede social você vai fazer um post você quer

usar por essa daqui pesadona você usa e você não vai perder a característica porque está usando a mesma família certo então se você for criar uma identidade visual sua de algum cliente presta atenção nisso vou mostrar só mais um aqui então aqui você coloca seu nome seu nome não você coloca um texto qualquer aqui clica aqui que esse site faz galera ele mostra as fontes que você tem instalado no seu computador só isso é muito útil também tá Às vezes a gente tem muita fonte instalada nem lembra delas e você clica e você entra nesse

site você consegue visualizar tudo que tem instalado no seu computador tá bom quem quiser uma aulinha de fonte galera que dá para fazer muito mais coisa tem muito mais coisa para ser explorado aqui e eu vou falar mais é uma das partes mais importantes do layout é a fonte é a da fonte tá então quem quiser uma aulinha específica de fontes deixa nos comentários que eu tô anotando tudo para ir fazendo conteúdo para vocês Tá bom então quem quiser olhar de fonte tipografia deixa aí nos comentários que a gente anota aqui e vai fazer Então

galera esse site tá ficando grande ele vai demorar porque ainda falta uma porrada de coisa ele é grande tá ligado é um projeto bem complexo no sentido de informação Então agora eu vou vir aqui ó vou duplicar esse texto aqui para baixo vou vir aqui copiar o textinho que eu tenho vou colar aqui contra o zero vou vir aqui ó regrinha 90 porque é um novo bloco certo novo bloco ó novo bloco aqui é um bloco inteiro e aqui estamos partindo para mais um bloquinho certo então aqui vai ter Um textinho antes disso vou fazer

um bagulhinho aqui eu vou usar outra fonte que essa daqui aqui também vou fazer o mesmo esquema vou juntar junto da imagem na hora de exportar vai como uma parada só tá então eu vou colocar aqui o nome dos lugares se isso daqui meu teclado oh meu pai amado açúcar Então vamos colocar nome aos bois aqui alguns elementos aqui vai aumentar para e eu vou usar Aquela fonte lá de cima que ela é a morganete morganete certo agora eu vou vir aqui ó vou colocar aqui em maiúsculo vou vir aqui vou colocar um extra bom

de itálico vou aumentar o tamanho dela mais ainda vou colocar aqui 160 vou vir aqui ó dá uma inclinadinha de leve para dar um charme certo mano vou vir aqui ó na imagem vou travar ela vou selecionar o bagulho de fundo retângulo e o texto Então agora a gente vai vir aqui de novo ó ler Vamos dar um overlay Olha o que vai acontecer pomba aqui coisa bonita certo agora que eu vou fazer eu só vou vir aqui tirar um pouquinho da opacidade e tá pronto Então esse lance de aqui do laser galera você tem

que fuçar vai trocando vai testando aqui ó que assim que aprende tá ligado você pode colocar screen e vai testando para cada tipo de fundo ele tem uma reação diferente dá uma outra aulinha também ó se eu mexer ele aqui galera vocês vão ver que ele vai reagir conforme o fundo tá vendo certo pronto então agora a gente vai dando um acabamento nessa parte aqui vou colocar os títulos aqui ainda mas eu vou prosseguir aqui no conteúdo aqui galera eu vou fazer uma parada tipo uma linha do tempo tá ligado que eu vou fazer um

paralaxe na hora do desenvolvimento que vai ficar muito legal vai se trollando aqui e vai mostrando o rolê tudo então vamos centralizar essa bolotinha aqui vamos deixar certinho aqui ó pronto vou vir aqui ô disgrama Vamos colocar ela amarela vou dar um control D para duplicar ela vai aumentar vou jogar para trás vou selecionar as duas aqui com chifre e vou alinhar elas vou pegar de trás aqui vou tirar a opacidade dela certo vamos vir aqui ó relacionado com texto de cima é então 30 agora vamos colocar aqui de novo Aquela fonte eu tô usando

bastante ela e aí Teste tá galera aqui eu vou ter que colocar uma imagem também se começar a ficar pesado eu vou lá e mudo tá ligado Nada me impede de fazer testes inclusive é uma coisa muito importante fazer teste um grande impede de conversão depois de pronto você tem que fazer testes teste a b de tipografia teste a b de imagem teste a b de cor de Botão teste a b de copo e por aí vai É assim que você consegue ter uma grande impede campeã de vendas testando bom vou diminuir aqui ó espaçamento

vou deixar bem juntinho aqui vou centralizar e vou diminuir esse texto menor maior vou dar uma giradinha nele de leve pronto vou clicar na bola e aqui segurando shift centro Centro certo essa bola que está muito grande agora galera vamos vir aqui ó clicar aqui vir na linha fazer uma linha aqui ó aperta o Shift para ela ficar reta certo vou colocar aqui ó uns 2.000 de altura você centralizar ela vou deixar ela quase perto da bolota ouvindo as nossas cores aqui vamos ter um cinza aliás eu vou tirar esse Brancão de fundo clicando aqui

ó vou colocar um cinzinha tá vendo ó cinzinha bem clarinho para a gente conseguir trabalhar com branco sobre o cinza que fica bem bonito e para não ficar também muito chapado de branco bom então agora vamos fazer o seguinte ó vamos colocar uma outra bolinha Menorzinha certo com 60 pixels vamos centralizar a bolinha e vamos colocar ela amarela essa aqui é nessa primeira bolinha da timeline e agora vamos entrar com o texto certo vou copiar esse texto aqui contra o zero Vamos colocar aqui ó quero fazer em eu vou aproveitar aqui ó Cristo Redentor deixa

menor Uns 24 vou alinhar ela com a bolota vou dar um Ctrl G um shift G vou puxar ela aqui para o nosso canto vou vir aqui ó vou colar o meu texto vou criar um outro elemento de texto aqui ó vamos criar aqui um novo texto texto 2 vou aplicar em tudo isso aqui ó texto 2 texto 2 vou criar aqui um outro texto esse aqui vai ser o H3 pronto aqui tá aqui certo agora vamos clicar aqui aqui com x não controlo de jogar esse rolê para cá e agora vamos alinhar para o

outro lado e você também Para cá e para cá e você vai chamar Pão de Açúcar certo vamos arrumar os textos aqui ó pronto pronto vamos pegar essa bolinha ou não control D eu vou descer bastante ela com 400 300 vamos ver vou dar um controle de novo contra de novo controle de novo Viu ele criou várias bolinhas já com espaçamento certo [Música] agora vou vir aqui nessa bolinha vou duplicar ela contra o d vou diminuir o tamanho dela para 30 eu vou colocar ela o preto Verde vamos ver como vai ficar melhor certo então

esse daqui vai apontar Qual que é o item que tá passando aqui ó quando a timeline o cara foi trollando aqui essa bolinha verde vai descendo para chamar atenção do cara para o texto que tá ao lado certo então agora no final dessa timeline galera vamos aumentar isso aqui um pouco então agora no final da nossa timeline que que vocês acham que poderia ter eu acho que a gente pode pôr um outro caldo o cara vai ver toda a linha do tempo no final ele vai chegar no pote de ouro então vamos colocar aqui falei

com especialista pronto o cara vai esclarecer ó vou dar um control zero aqui galera tirar aqui para a gente ver o projeto como um todo como tá ficando então a gente pode fazer de duas formas ou fazer assim você vai ver o projeto inteiro sem o bagulho ali para atrapalhar ou você pode vir aqui e clicar simplesmente nesse botãozinho ele vai abrir o projeto e aqui você consegue ver e Navegar melhor então nossa primeira dobra uma informação conteúdo Call to Action um pouquinho mais conteúdo timeline certo e agora galera a gente pode colocar aqui embaixo

vamos copiar o texto daqui para baixo certo aqui quanto que a gente vai usar 90 né 90 pronto aqui veja o que a galera está comentando como é que o meu teclado está comentando certo então aqui que a gente vai colocar depoimentos depoimento é uma parada muito forte uma prova social hoje que é indispensável e tem que usar tá ligado Então vamos criar aqui uns bloquinhos acho que de três vou colocar Branco vou vir aqui na Redonda para nove o nosso padrãozinho certo ó achar certinho vamos fazer o primeiro aqui deixa eu deixar esse aqui

no meio vou tirar aqui ó como fica legal confundindo que eu pus Cinza o branco tá ligado Então agora vamos clicar aqui um texto arrastar Vou colocar aqui meu nome Rodrigo Bon Jovi uma acertar essa fonte aqui e eu vou vir aqui no texto 2 vamos alinhar para direita e vamos colocar aqui ó fiz o passeio para o passeio de helicóptero não fiz o passeio do Cristo Redentor e foi uma das melhores da minha vida tá aqui eu vou quebrar aqui ó porque vai ter outra configuração Então vamos vir aqui vai ser um Inter 15

aqui vou diminuir esse espaçamento aqui e aqui vai ser Bold certo semi boi vai você parar aqui galera ficar com espaçamento mas ok então ó vamos deixar aqui com 10 certo vou selecionar os dois para agrupar vou clicar aqui com shift alinhar vertical e horizontalmente pronto ficou um boxzinho bonitinho na verdade eu vou descer isso aqui ó porque eu vou fazer o seguinte pegar uma bolinha clica aqui colocar aqui uns 70 vão centralizar ela um elemento vou descer ela aqui Talvez eu coloque ela para cá E é isso que pode continuar Centralizado certo agora vamos

usar outro pluginzinho galera para a gente simular uma pessoa aqui clicar com o botão direito plugin vamos vir aqui em usa ele profile eu quero colocar uma mulher uma qualidade da foto qualquer uma e tal vamos aqui você não gostou não de novo pronto certo escolher uma imagem fechou aqui já era vou deixar um pouquinho mais para baixo aqui Então não vai chamar Rodrigo né Chama Priscila Barros pronto aí o depoimento da Priscila certo agora eu vou vir aqui galera tem outros plugin a gente tem duas coisas aqui fazer a sombra fazer uma sombrinha bonitinha

aqui então você pode vir aqui em efeitos drop Shadow e o cara já tá com uma sombrinha tá muito forte é que se ajusta ela então vou dar maior e vou aumentar um pouquinho aqui e um pouquinho aqui e vou aumentar aqui aqui a configuração tá Galera vocês vão testando vou diminuir um pouco aqui aumentar aqui pronto temos uma sombrinha bem de leve tá essa é uma sombra que você faz padrão aqui do figma eu vou ensinar uma outra como plugin que também é bem legal vem aqui em plugins e colocam aqui ó beautiful chanels

ele vai abrir esse rolê aqui você coloca como se fosse a câmera da parada então ele vai por a sombra de acordo com de onde está a luz a sombra não aqui é a luz imagina que você quer uma lâmpada Então você coloca ela Onde você quer eu vou deixar ela centralizada vou clicar aqui e aqui a gente tem as mesmas configurações certo então aqui a gente pode diminuir pode aumentar pode fazer o que você quiser vou aplicar pronto nosso Box está com uma sombrinha então agora vou selecionar estudo Ctrl G para agrupar então agora

grupei vou jogar aqui para o canto vou dar um control D para cá controle pronto temos uma linha de depoimento certo talvez essa sombra tenha ficado um pouco forte Então agora você selecionar aqui vou vir aqui ó 30 né galera 30 porque é um elemento relacionado ao outro certo na verdade aqui a gente pode pôr Um textinho também tá ligado vamos copiar isso aqui ó às vezes é legal a gente ter o título e ter um complemento explicando o que que a gente está falando deixa bem claro o que a gente está querendo transmitir então

confira o que a galera que já experimentou [Música] confira o que a galera que fez os passeios estão falando por aí não perca tempo e seja o próximo a viver essa incrível experiência certo vou centralizar eu vou levar aqui para cima com 20 agora 20 certo e agora sim vamos subir isso com temos aqui uma área de depoimentos eu não tô gostando desse texto assim então vou vir aqui ó vou fazer isso Agora sim vou subir aqui não tô gostando galera dessa parte de texto aqui então eu vou dar uma melhorada bom então fechou vou

deixar assim estamos aqui com a nossa área de depoimentos pronta tá ligado E agora acho que de conteúdo Falta pouco certo Então vamos vir aqui ó vamos ter que aumentar essa parada Olha já tá Gigante hein velho você é louco 7000 de 7 mil pixels de altura não é mole não vou aumentar aqui ó uma coisa que pode acontecer é você puxar isso aqui ó e às vezes vem algum elemento junto se isso acontecer nossa demorei muito para conseguir solucionar duas maneiras ou você ajusta o elemento aqui ou você clica aqui Aperta o controle você

puxa aqui à vontade certo então você tá curtindo Deixa aquele likezão e vamos meter marcha próximo passo Vamos colocar uma parte de perguntas e perguntas e respostas eu tô montando uma Landing page um pouquinho fora do padrão de página de venda mas com todos os elementos chaves que precisa ter tá então agora a gente tem que ter perguntas frequentes Então vamos lá vamos habilitar aqui vamos vir aqui puxar um quadrado um retângulo aqui certo 300 aqui vou deixar o branquinho vocês vão ver de novo como vai dar aquele Charme agora vou fazer aquele esqueminha que

a gente viu na aula vou clicar aqui vou clicar com o botão direito copiar copiar propriedades e vou colar aqui a propriedade uma já pegou a nossa sombrinha certo também vou vir aqui vou copiar esse texto vou jogar ele para cá vamos dar um control zero aqui para trabalhar no 100% e vamos colocar aqui o Rio de Janeiro é seguro muita gente acha que não muita gente fala que hoje é certo então vou puxar para cá Colei o bagulho aqui nosso texto vamos ajustar ele aqui vamos deixar aqui para cima vou clicar aqui para ajustar

que a altura dele e vamos deixar aqui com 10 pixels certo vou vir aqui ó Ctrl G para agrupar centralizar Vou puxar ele para cá vou vir aqui eu posso vir aqui galera usar um outro ícone um tricoline não outro plugin para pegar um ícone vamos vir e como vai existem alguns não existe só esse plugin ser pesquisa aí qual você gosta mas Particularmente eu gosto de usar esse site maravilhoso que eu gosto muito dos ícones aqui então vou pegar esse daqui agora por exemplo ou então vem aqui ó vou pegar esse ícone aqui ó

eu posso mudar a cor dele já aqui então vou usar preto e eu posso copiar o svg ou fazer o download do svg ou do png eu vou pegar aquele svg vou voltar para o irmão vou vir aqui e vou colar certo então temos ele aqui vetorizado maravilhoso então boa vou alinhar isso aqui com isso aqui tá vamos fazer o seguinte agora o espaçamento aqui de 40 espaçamento aqui de 40 fechou aqui a gente pode até dar mais um espaço aqui ó e já era vou agrupar tudo isso você centralizar aqui aqui pronto temos o

nosso primeira caixa de perguntas aqui é como se ela tivesse aberta certo vou vir aqui ó contra o d o corpo para baixo vou deixar aqui com agora pergunta 2 [Música] Pronto agora galera pô o cara tirou a dúvida tirou o que ele precisa fala com o especialista de novo nós subjetivo é só um aqui dentro vou deixar aqui um 40 certo e agora vamos dar um grau aqui vou usar de novo aquela fontezinha Marota vou colocar ela de background que come imagem png vai ficar pequenininhas uns 20 kbytes então acho que não dá bo

Vamos colocar aqui ó perguntas frequentes vou fazer o seguinte vou jogar ela aqui para baixo Então vamos agora arrastar isso aqui para baixo para a gente configurar um por um cinzinha bem clarinho aqui ó só para dar um grau vou colocar ela aqui meio cortado mesmo para dar um charme acho que tá bom tá ligado perguntas frequentes vamos pegar isso tudo aqui vamos subir vamos deixar aqui com 90 pronto galera tem algumas partes que eu gosto de deixar com mais espaço ainda esse daqui é uma delas por causa da sombra ali eu vou deixar com

200 essa aqui também eu vou deixar com 200 vou deixar com 20 vou deixar com 120 Isso aqui é uma questão de de olho também né então você consegue ver aqui o que que tá muito tá dando interferência visual porque esse botão perto daqui não tá rolando entendeu então vamos deixar um espaço de 120 aqui aqui como tem a sombra tem tudo isso aí também vou vir aqui ó 120 certo que a leitura fica muito mais gostosa vamos ver como tá ficando Então tá aqui nossa primeira dobra Nossa timeline Zinha eu vou mostrar para vocês

uma animaçãozinha que a gente vai fazer aqui tem várias formas de fazer isso aqui tá a nossa depoimento e aqui nosso FAQ certo Estamos quase lá galera estamos quase lá eu acho que esse texto aqui ó o que vejo que a galera está comentando então agora vamos fazer o seguinte eu tô achando que essa sombra tá muito forte tá ligado Então vou vir aqui eu vou remover tudo Então pronto prefiro assim acho mais clean mais bonito mais fácil de ser muito frufru tá bom aqui essa aqui também tá me incomodando um pouco vou arrumar essa

cor aqui deixa bem fraquinha mesmo quase branco Tá bom Agora vamos Vamos fazer um rodapé como eu falei não esqueçam galera e são site de venda de alta conversão não vamos ficar enchendo de firula no rolê certo mas vamos deixar bonito Bora lá galera vocês perceberam uma coisa eu não usei quase nada ou Nada ali do que eu salvei aqui ó Porque eu peguei aquilo como referência mas assim eu gosto de deixar na minha imaginação rolar solta então enquanto está fluindo eu vou fazendo se eu dou alguma travada que é normal de acontecer a gente

tem uns bloqueios criativos aí eu uso ali entendeu ou se é uma coisa que eu gostei muito dali eu falei eu vou usar senão eu prefiro fazer isso então eu vou trabalhando vou deixando fluir no final eu olho e falo vale a pena colocar alguma coisa dali não vale e é assim tá não é porque tá ali que tem que usar Então agora eu vou jogar uma imagem aqui ó a gente vai usar ela aqui no fundo tá ligado vou usar ela aqui ó de fundo eu acho uma imagem bonita tá ligado vou usar ela

aqui e aqui a gente vai fazer um gatinho aqui ó vamos clicar no quadrado colocar ele aqui vamos vir aqui ó linear e aqui em linear eu vou fazer o seguinte galera eu vou pegar as coisas que eu tô usando aqui de fundo e aqui eu vou colocar a cor que tem aqui ó certo e agora vou tirar um pouquinho daqui e aqui vou deixar 100% e vamos tentar fazer um gato aqui ó tem que ir lá para baixo Vamos tentar disfarçar o máximo esse rolê aqui tá então a gente usa isso daqui para ir

esse efeito aqui para tirar essa quebra de cor e emendar uma cor na outra tá vendo tá vendo Então acho que já funcionou tá ligado aqui você consegue configurar tudo eu vou descer ela até aqui ó aqui eu vou diminuir um pouco para zero aqui eu vou colocar praticamente zero tá aqui eu vou subir mais um pouco acho que ficou ok só preciso agora subir tudo que ficou muito espaço vou deixar aqui e vou diminuir agora o tamanho da página aqui certo galera agora aqui a gente vai colocar o nosso login aqui embaixo bem de

boinha nada muito cheguei Vamos colocar ele bem pequenininho aqui certo vou colocar ele aqui deixa eu dar um 100% aqui e agora vamos colocar o textinho padrão que é usado né então aqui ó todos os direitos reservados uma fonte aqui ó todos os direitos reservados Brasil show Turismo colocar o CNPJ razão social uma linha no centro a linha no centro colocar esse Bang aqui um control zero aqui a gente vamos ver como é que ficou lá bom galera eu acho que é isso aí acho que a gente matou aqui essa parte aqui vou diminuir mais

ainda pronto pronto matamos aqui que tá faltando eu acho que foi hein galera eu acho que foi Faltou um playzinho aqui certo vamos vir aqui no Então vamos vir aqui no nosso plugin de ícone vou pegar um play aqui vou simplesmente arrastar ele para cá fechei aqui vamos mudar aqui para branco diminuir colocar ele aqui no meio centralizar vou tirar um pouquinho da opacidade dele pronto agora vou colocar só uma navegaçãozinha que eu acho legal para além de um peixe aqui nesse Canto Porque como é uma página que ficou muito comprida ela tem quase 9

mil pixels Então ela é gigante Vamos colocar uma navegação aqui nessa lateral vou clicar aqui bolinha vamos clicar aqui ó fazer uma bolinha de 20 pixels Vamos dar um Ctrl D para baixo de novo de novo de novo de novo vamos pegar essa daqui por Verde Então essa daqui é uma navegação que Eu gosto muito de usar tá ligado eu vou mostrar para vocês como ela funciona certo tá ali na nossa navegação ela vai ficar fixa na tela certo então vou vir aqui ó fixar ela a gente vai olhar aqui ó tá vendo que ela

tá fixa aqui eu vou mostrar para vocês um site que eu usei o site da minha agência Então tá aqui galera o site da minha agência como vocês podem ver ó tá vendo aqui no canto é o menu você pode colocar o textinho do lado ou não tanto faz então se eu escrolar aqui ó ele vai mostrando em qual seção certo ó aqui um exemplo de animação ó que eu posso usar ali naquele e-mail então a navegação aqui ó ela vai mostrando onde eu tô Posso ter o nome aqui que legal também então eu navego

assim e navego assim ó tá vendo então isso aqui é muito legal e eu vou usar ali certo bom então eu acho que aqui matei essa aula ficou gigantesca tá ligado deixa eu por o meu rostinho lindo aqui eu acho que deu para passar legal aqui né a gente criou essa página do zero com uma página interessante de conteúdo de diagramação né Respeita a mão aqui toda as regrinhas básicas de outras habilidades né eu não vou criar a versão mobile porque já tô cansada essa aula foi Grande para caramba mas tem que fazer a versão

mobile diz tudo aqui vamos dando uma geral aqui ó esse final ficou bem bonito com uma página interessante certo eu vou de fato mostrar para o cliente aprovar e depois vou desenvolver e vou mostrar ela com as animaçõeszinhas que eu tenho na minha cabeça provavelmente essa parte aqui do meio vou ficar passando os destaques principais os pontos turísticos principais aqui nesse meio Onde está o Pão de Açúcar tá bom vai ter essa navegação lateral aqui vai ter um videozinho aqui essa timeline aqui vai ser animada também certo e o resto é o padrão então é

isso galera quem ficar com dúvida ou quem quiser alguma aula em específico deixa nos comentários Eu leio um por um quem pensa que tem um monte né mas eu gosto de ler eu fico feliz para caramba quando vocês comentam interagem comigo então é isso galera espero que vocês tenham gostado do coração eu já tô com uma pauta legal de conteúdo de filho mas também vou dar um pouquinho de aula de Photoshop tudo que como eu falei já a ferramenta não é o que determina nada mas eu sei que tem bastante gente aqui que quer aprender

também o Photoshop e eu vou dar algumas aulinhas também Photoshop Então é isso deixa aquele likezão se inscreve no canal tamo junto um abraço