[Tutoriais] Como fazer uma Landing Page no GreatPages

Olá designer vamos agora ver na prática como que funciona a construção da laning Page dentro do Great page vou tá mostrando aqui o passo a passo na íntegra como funciona isso OK recebi minha tarefa aqui essa é uma uma refação que eu vou fazer que aqui temos algumas informações aqui né que os gestores disponibilizam como eu falei lá na etapa da checagem para tudo aqui Então já vou deixar aqui a minha copy à disposição ok entrei aqui no drive do cliente onde é que ficam essas informações aqui ó nessas partes e também nos comentários eles

colocam dando uma leitura aqui no uma lida no Brief na verdade né somos o empresa forma do P mé ortopedistas que é importante entender o nicho né com que que ele trabalha a classe também é muito importante é um cliente de Classe A então é um é um trabalho refinado trabalha com ambos os gêneros público específico a parte do público é muito interessante atributos que querem que a arte contenham simples Clean moderno e séri minimalismo é algo que ele Ok leitura rápida do briefing aqui vou est deixando aqui para consultar Caso for necessário aqui no

checklist eu peguei o Instagram dele né Instagram dele tem mais coisas pessoais então não tem muito que olhar daqui posso fechar também entrei no drive do cliente tá como eu falei baixar as fotos já Criei uma pasta aqui para ele no meu computador João Henrique eu separo por ordem alfabética quanto baixa aqui eu vou criar né duplicar Na verdade o template no Great page vou escolher um aqui Sei lá Carlos Teixeira que foi foi um dos últimos que eu fiz como que eu duplico eu posso vir aqui duplicar ou eu posso entrar no perfil e

duplicar eu prefiro fazer por aqui clicar em duplicar e a primeira coisa que você vai fazer já é renomear PR o nome do do novo dono da página entrei na página aqui do template vem em configuração em configuração informações e ce também é uma parte importante título da página coloca coloca o nome do doutor a descrição coloca com o que ele trabalha e CRM se for o caso dos meninos mudarem isso aqui eles ficam responsável por isso palavra-chave não precisa colocar e favc é com o logo dele ou com a foto se ele não tiver

logotipo os logotipos dele tá aqui né colocar para fazer download também Beleza vou salvar por enquanto e clico aqui em editar design ó já baixou aqui o logotipo vou colocar lá na pasta do cliente já consigo fazer meu favicon daqui aproveitar também e mostrar dentro do F [Música] Como construir o padrão visual esse cliente tem aqui as coisas bem definida legal eu vou pegar esses Fundos aqui e colocar para dentro do figma do ilustr figma é muito fácil de fazer só selecionar o que você quer dar o control comand c ó entrei no figma vou

procurar aqui nos favoritos ou pesquisar aqui a letra do meu cliente eu vou criar pro João Henrique letra [Música] J criei a página e jogo aqui o que eu tinha lá no ilustre as fotos também acabaram lá de baixar e eu já tenho aqui aqui tudo bem acessível por que que eu coloco pro figma porque é muito mais fácil de pegar os elementos com a plataforma do fig aqui tem um as cores Beleza vou passar o logotipo cont control ctrl v para dentro do figma também é eu gosto de tirar de dentro desse desse framer

então eu seleciono um e vou até o último de dentro do do framer do cont control x deleto control v e control G para fazer um grupo se eu quiser depois modificar eu venho aqui fazendo grupo então grupo desse primeiro título e aqui o o ícone E aí eu consigo modificar as cores de cada um individualmente como eu só quero agora um Fávio comprar pra página criei aqui um elipse envio para trás colocar um branco aqui centralizar para aumentar no figma com K ou se tiver com a letra V selecionada shift e Alt ou option

cont control G Vem aqui em exportar exporta o PV faz ponto coloca aqui para dentro Ok finalizar essa parte do CEO vamos estruturar a página de fato que a gente tem aqui paraa primeira adra nome do doutor especialidade CRM logotipo título agência consulta Beleza eu vou est deixando um Não na verdade acho que não é [Música] necessário essa parte aqui eu gosto de fazer dentro do figma como nós fazemos nos criativos vou deixar meio que assim sabe como se fosse um protocolo só exportar aqui em svg outra coisa que eu gosto de fazer também é

colocar aqui um azinho antes do meu do meu último da minha última página para ele ficar aqui no topo para não precisar ficar sempre eu venho adicionar a pasta coloco um a na frente e o nome do cliente central e tá aqui começar a importar aqui o CRM ó esse CRM que eu fiz diferente igual dos criativos tá gente só consulta né como eu falei é só uma reposição de elementos esse cliente Eu acredito que ele utilize Ops aqui na no logotipo né como ele não tem outra outra fonte de design para eu analisar então

acredito que seja opções aqui deixa eu ver como é que fica o botão particularmente não gostei muito um robot eu acho que a pop estava legal Ok deixa eu apagar isso aqui que não vai ser necessário isso aqui dá para colocar um pouco maior e aqui é um trabalho de alinhamento de layout mesmo e fing do seu do seu design aqui dentro eu vou colocar a própria logo do doutor ele não tem uma versão horizontal então assim eu vou criar uma versão horizontal porque fica melhor no site [Música] não como trouxe o cont control V

jogando pro figma que é mais fácil de exportar faço aquele processo de tirar Dent do frame cont control G aqui aqui beleza eu vou deixar mais escuro essa parte porque o fundo do início Vai ser branco aí eu vou exportar em svg também que é mais leve o logotipo início Clio aqui na pasta do cliente para deixar tudo organizado vem aqui PR visualizar para ver como é que tá ficando beleza que por enquanto o menu aqui de cima tá OK depois eu vou mexendo em mais coisas vou descompactar aqui as fotos e vou escolher uma

para pra gente fazer geralmente fotos do dror sorrindo né ó esse aqui ficou com bastante foto legal ó Gostei dessa primeira e dessa aqui vou levar essa para dentro do Photoshop aqui no meu modelo e essa outra a gente quase nunca faz muitos efeitos não é necessário para esse nicho quando a gente fala de lan page se pensa muito a respeito de lançamento mas aqui não é preciso tantas coisas digamos assim o básico funciona muito bem nesses casos que que eu faço aqui completo a imagem com inteligência artificial do Photoshop então complete a imagem vamos

ver como é que ele vai fazer requer bastante ajuste essa parte Principalmente quando o fundo não é tão uniforme Mas ajuda bastante porque precisa ficar horizontal a foto né ó ele vai criando diversas coisas que não existem aí o que que você pode fazer remover isso aqui remova as pessoas e objetos deixe o ambiente vamos ver se ele vai pegar esse comando quase foi enfim eu vou tentar ajustar aqui e depois eu volto bom consegui fazer aqui alguns ajustes olhando pra outra a outra página que tinha tá usando um azul bem bem bacana até eu

vou utilizar o cont gotas para tentar copiar esse azul vou fazer um um Gradiente aqui pegar mais escuro Opa converter os dois arrastar opa Beleza vou exportar aqui até 1 MB tá bom header se muitas vezes a gente vai precisar refazer algumas vezes essa etapa ó quando colocar aqui clique em esticar imagem vem aqui em pré-visualizar porque o paralax ele dá um um zoom mas aqui fica tranquilo ó aqui a gente dá para ver que tá de boa colocando isso aqui eu já vejo que esse azul não ficou tão legal acho que uma cor assim

I ficar mais interessante aí eu já vou precisar não aqui tá legal já vou alterando aqui deixa eu só ajustar isso aqui porque tava meio errado mas que eu vou precisar alterar a imagem mas eu deixo aí porque eu altero direitinho depois movendo aqui com com as setinhas do teclado cor texto do botão posso deixar assim o Rover é quando você passa o mouse né essa imagem aqui do Instagram eu deixo ela sempre Preta ou branca aí eu venho aqui em inverter e ela já fica branca porque já tá meio que pré-configurada assim vem visualizar

ó já ficou mais elegante com isso aqui is aqui eu acho que eu vou colocar aqui para cima essa fonte aqui ah eu gostei aqui da da Moa errar acho que dá para colocar aqui bom vou adicionar um umas animações aqui vou colocar deslizar para cima deixar padrão como tá aqui esse aqui vou colocar deslizar também para cima colocar para 1000 que é como tá o outro esse daqui eu vou fazer um dobrar pra direita vamos ver como ficou ó legal né Deixa eu subir mais um pouquinho para cá e esse Rover aqui vou ajeitar

também coloca para essa cor é trabalho diss de visualiza como tá pronto Vamos ajeitar só essa L aqui para finalizar aqui no figma só clicar aqui do lado mudar coloca aqui Branco porque aí já fica duas Verões vem aqui alterar imagem clica na pasta do cliente seleciona imagem selecionar Pronto já tá tudo certo vou colocar uma animação também um Fade Tá bom vamos visualizar perfeito vamos lá pra segunda dobra já é um uma parte de tratamento vamos lá essa parte de tratamento a gente sempre utiliza Essas caixas então eu vou apagar uma e deixar outra

Quando eu for precisar eu utilizo ela já que a gente vai precisar de um texto meio grande copiar aqui esse início vou usar manro para esse texto normal mesmo vou deixar em 22 v testar uma coisinha aqui [Música] fazer um testo maior aqui espalhar melhor os elementos né facilitar a vida do usuário para ele saber o que aqui é mais importante ler primeiro o que ler depois que que eu vou fazer eu acho que eu vou mudar para duas dobras isso aqui aqui deixa eu adicionar um bloco aproveitar e deletar algum desse aqui clicar linha

editar configurar que apaga pronto traz isso para cá deixar essa sessão branca para essa esse sistema de de padrão né é importante dizer que quando você muda um muda todos né então por exemplo esse daqui eu tô usando o O H2 se troco de fonte tudo que tá H2 Muda então eu não tenho muita liberdade nesse sentido então por isso que eu acabo criando outras alternativas aqui o h6 eu vou criar mon cerrar ainda mas a versão dela é regular Ó aqui tá Man Rope aqui tá monerar deixar uma roupa mesmo vou colocar nessa cor

aqui dessa linha vou destacar o você tá sentindo Dores Deixa tentar diminuir para 18 aqui esse texto mexendo aqui no espaçamento tudo fazendo para melhorar a visualização estética e funcional da situação acho que aqui dá para justificar o texto melhor assim aqui eu posso colocar alguma foto deid aí você usa o o banco de dados que banco de dados banco de imagens que você utiliza eu tenho alguns para indicar mas assim a B2 até o momento não não investe nisso mas é algo se conversar então sei lá vou pegar o freque e qual ador que

ele fala aqui tornozelo ador no tornozelo Adobe stock aí vai aparecer as imagens que tem isso ess aqui é legal ó Isso aqui já seria uma boa para criativa também ó eu curti essa daqui ó pode ser essa daqui deixa eu ver se tem animação aqui tá com Fade Fade também ISO aqui eu vou adicionar um F mais para aparecer depois com então vai demorar um pouco para ela aparecer aqui eu posso colocar aqui 1 e 350 e aqui eu botar para 100 aí vai aparecendo um por um essas fotos do João aqui eu vou

fechar confirmar o download aumentar um pouquinho aqui para dar um respiro Tá qual seria a outra parte criar essa vou postar num azul bem escuro acho que eu vou usar essa parte aqui ó fazer um download na foto e vou usar aqui ah nem precisava fazer o download colocar esticar imagem eu vou só deixar aqui a sobreposição para auxiliar aqui na na visualização vou editar só um pouquinho aqui Essa parte a cor aqui pode permanecer conheço alguns os procedimentos deixa eu colocar um elemento aqui de destaque aí o que que eu faço baixo aqui isso

aqui é pra nossa segunda dobra que eu separei em duas para não ficar muito carregado Hum vou editar aqui e vou adicionando os tratamentos aqui só para separar o que é título separei aqui para aqui D cont control x não um pausa enquanto eu faço isso OK agora vem para cá aumenta um pouquinho mais né Vou só ajustar aqui o espaço entre os elementos tem um outro texto ali eu vou utilizar esse mesmo parágrafo coloco aqui num como um disclaimer só parte de procedimentos eu acho que dava para colocar logo aqui será Opa aqui ó

dou um corte para não precisar logo de novo Vamos dar um preview esinho legal ó sobre o h o H1 2 tá vendo aqui que mudou tava uma uma outra fonte colocar aqui quer que eu posso colocar aqui atrás que tá uma galera se exercitando da outra página outra foto do doutor né acho qualquer um só para fazer uma textura na parte de trás formações especializações ele não tem vou deletar isso aqui aqui deixa a 33 será parte aqui já tá meio que que pronta de certa forma essa daqui aí eu vou colocar só um

efeito de de dobrar beleza Só que também eu posso deletar vou tá apagando aqui algums algumas sessões porque eram de um outro cliente vamos lá Gino consulta comigo se você é alguma coisa colocar um azul colocar para 18 e vou criando aqui o a eu vou fazer um um Bullet Point com emoji vou duplicar aqui o parágrafo novamente vi aqui adicionar um ícone vou ver um ícone aqui de agenda de agendamento acho que isso aqui né pode funcionar eu tô tendo uma ideia aqui opa dupliquei sem querer Eu acho que o jeito aqui é deixar

assim mesmo pelo menos por enquanto fica o espaço aqui para colocar algo que mais que tem aqui depoimento né Tem um sobre a clínica mas não tem nada escrito como é que eu faço os depoimentos copiar isso aqui já dentro do das pastas do figma tem esse modelo então é só você vir aqui clicar colar e pronto e jogar pra pasta do seu cliente né para organizar por lá vai ajustando aí conforme o tamanho do texto acho melhor ficar assim mesmo aí os depoimentos a gente tem que colocar até a primeira letra do sobrenome então

aqui Rafaela vai ser até o l e faz um pontinho Deixa eu subir só mais um pouco pronto vou dar cont control G e começar a replicar para outros também vou dar um pause e volto assim que acabar Ok volta aqui pros depoimentos eu vou só aumentar eles mais um pouquinho para preservar qualidade exporta como png Tem uma parte aqui depoimento vou lá pro page deixa eu ver se já tem algum de depoimentos tem mas eu não tô curtindo você pode acessar Alguns alguns blocos salvos aqui também eu vou criar um zer mesmo Vem aqui

adicionar um slider configurar e vem adicionando as imagens Tira aqui esse ajustar imagens ao slide isso aqui dá para colocar no centro mesmo depois disso alguns planos de saúde e endereços bom aqui no filma a gente tem uma parte de planos onde eu tenho Alô e vários planos já meio que salvo hum diversas maneiras só pegar a lista aqui lá Bradesco Bradesco sul-américa petrobr Petrobras aqui S de caixa e Porto Seguro que eu acho que é o que eu não tenho ainda coloca o nome aqui do e aqui tá no padrão tudo branco né trazer

para cá também acabar deixando tudo meio que colorido no meio brades k Unik kit copia cola aqui também o que é que eu vou fazer vou fazer um slide com todos os convênios com o logo de todos os convênios na verdade aí Sul América t fazer agrupamento de todos vou aumentar para auxiliar na qualidade porta PNG vou jogar lá na pasta como logotipos beleza vamos fazer o slider aqui do dos logotipos seleciona tudo e joga para dentro do GR page adicionar um por um tira o ajuste de imagem interessante seria colocar isso em alguma outra

parte acho que desabilitar as setas é mais prudente V colocar por aqui por enquanto porque não faz sentido colocar uma um umaobra para uma parte de Porto de plano de saúde se não tem cpia bom mover aqui também acho que por aqui tudo ok né acho que só exportar aquela foto do tornozelo que provavelmente veio muito grande a gente vai precisar diminuir ela aqui em porcentagem pode colocar 50% aou menos se lá 40 para ficar mais leve vamos ver para para quanto vai baixar 1,47 acho que ainda dá para ir mais 30% T aqui que

é que eu vou fazer dar um close aqui nesse pé vim aqui editar iguala todos os cantos da borda só para fazer um um efeito escolher essa cor aqui ainda animaçãozinha tá agora vamos que tá tudo certo que não tem horário de atendimento então posso tirar aí eu vou colocar aqui vou mudar o título aqui só para diferenciar colocar aqui Como é que coloca aqui o o mapa eu vou colocar nessa clínica principal mas aí se precisar colocar nas três mais uma vez é importante estar em contato com quem tá gerindo o projeto ah a

propósito entrou aqui digita o nome do lugar compartilhar incorporar o mapa copiar HTML vem aqui edita ver que tamanho que tá height que é largura e altura 500 por 290 só que aqui eu acho que vai mudar mas deixa eu ver como ficou aqui a parte da consulta acho que precisa ir um pouco mais aqui sob altura Pro 6 C de altura Então vou colocar 600 aqui e 570 vai testando aqui tem que ser meio as cegas para fazer essa parte precisar ir um pouquinho mais para cima vou usar shift seta para cima também vou

usar aqui 490 piels por 550 precisa ser menor acho que de tamanho tá bom só aqui 430 vamos ver bem certinho deixa eu ver se existe algo aqui que dá para reaproveitar esse copyright aqui dá para colar e o logo ou melhor eu posso adicionar um outro bloco mais Escurinho assim para fazer um rodapé bem melhor vamos ver aqui como é que ficou perfeito a gente finaliza desktop por aqui no próximo eu ensino como adaptar o mobile