Como criar páginas iniciais de alta conversão no Sketch para iniciantes

1. Introdução: Ei, todo mundo. Bem-vindos à minha primeira aula de Skillshare. Estou animada por estar aqui com você. Meu nome é Daniel [inaudível], e eu sou um designer independente de interface de usuário e experiência de usuário. Antes de projetar, estudei Negócios Internacionais em Marketing. Neste curso, vamos combinar o melhor dos dois mundos e ver como podemos projetar páginas de destino modernas e bonitas, mas você também tem um curso super rico ou de negócios. Nesta aula, vamos aprender quais são os elementos mais importantes de uma página de destino de alta conversão e como podemos usar o design para chegar a este curso de negócios. Depois de uma breve introdução dou foco através de um projeto a partir da ideia inicial até a execução. Vou mostrar-lhe como e onde encontrar a inspiração para as páginas de destino, como criar sua própria paleta de cores, como escolher os melhores fundos disponíveis para o seu projeto, bem como os planos de esboço mais práticos. Ou o processo de design será criado dentro do esboço, que é o aplicativo de design de iluminação industrial para projetar aplicativos móveis e web. Nesta classe, vamos criar, uma página de destino completa para visualizações de desktop e móveis. No final deste curso, você terá a oportunidade de criar seu próprio design de página de destino para o seu negócio ou ideia. Estarei aqui para ajudá-lo e lhe dar feedback também. Esta aula é dados para iniciantes e designers intermediários que gostariam de aprender a usar esboço e também como melhorar como designer conectando design e curso de negócios. Mal posso esperar para te ver na aula e começar a desenhar juntos. 2. Elementos de uma página de landing de sucesso: Olá, bem-vindo a esta aula. Em primeiro lugar, muito obrigado por se juntar a esta aula. Você é incrível. Antes de entrarmos diretamente no esboço e começarmos a projetar nossa página de destino, deixe-me mostrar como eu costumo começar cada um dos meus projetos e também aos elementos-chave de uma página de destino de alta conversão. Minha primeira pergunta é, por que você gostaria de criar uma página de destino? Você provavelmente deseja criar uma página de destino porque você já tem um produto ou serviço que você gostaria de promover e você precisa de uma página de destino para obter mais conversões. Com uma ótima página de destino, você pode aumentar as conversões de seu produto ou serviço. No nosso caso, isso significa que mais pessoas irão baixar, comprar o seu produto ou inscrever-se no seu serviço. A outra razão mais popular pela qual você precisa da página de destino é que você tem uma ótima idéia que você gostaria de validar antes de construir em cima dela. Você gostaria de ver se as pessoas estão interessadas o suficiente nessa idéia. Com uma ótima página de destino, você pode validar rapidamente sua idéia e ver se há interesse suficiente para ela, que você possa descobrir se vale a pena o dinheiro e o tempo construindo e executando sua idéia. Agora vamos dar uma olhada rápida nos elementos-chave de uma página de destino. Vamos começar com o objetivo do negócio. Antes de iniciar qualquer projeto, eu sempre tento descobrir qual é o principal objetivo de negócios que eu gostaria de alcançar com uma página de destino. Com base no objetivo de negócios, você pode criar a meta de conversão, que é o objetivo principal da página de destino. Por exemplo, se estamos criando uma página de destino para um aplicativo, a meta de conversão mais importante pode ser que, depois que os usuários visitaram a página de destino, eles também baixaram o aplicativo. Caso o aplicativo ainda não esteja pronto, boa prática é pedir seus endereços de e-mail para fins de marketing e notificá-los quando o aplicativo é finalmente lançado. Se possível, tente aprender o máximo de informações sobre os possíveis usuários, para que você possa personalizar a experiência da página de destino para suas necessidades. Lembre-se sempre que você está projetando para os usuários, e não você mesmo ou não para os trimestres estaduais ou proprietários de empresas. Se for feito corretamente, usando a validação social na forma de depoimentos ou estudos de casos curtos, pode melhorar significativamente a credibilidade da sua página de destino. Durante o processo de design, mostrarei como uso a validação social de forma eficaz. Depois de estabelecermos os fundamentos, podemos nos concentrar em criar uma experiência agradável e memorável, que os usuários lembrarão. Vamos dar uma olhada rápida no projeto que teremos que criar. O resumo do projeto geralmente se parece com este grande bloco de texto quando eu recebo. Para esta classe, criei uma empresa falsa fictícia, chamada Showtrackr, que tem serviço e aplicativo para rastrear programas de TV automaticamente. Aqui está o resumo: Showtrackr acaba de lançar um novo aplicativo iOS e web, e eles gostariam de obter mais usuários para se inscrever em seus serviços incríveis. Seu grupo-alvo inclui os primeiros adotantes focados em tecnologia na faixa etária de 15 a 30 anos. A maior vantagem de seu serviço é que eles estão usando tecnologia de ponta, como aprendizado de máquina, para rastrear e recomendar programas de TV automaticamente. A base de usuários atual ama seus serviços e tem um monte de ótimas recomendações no Twitter. A página de destino tem que ser simples e agradável, usando as cores principais da marca, bem como seguir as últimas tendências de design da Dribble. Vamos tentar agrupar essas informações para que possamos trabalhar com isso. Primeiro, temos o objetivo do negócio, que é obter mais usuários usando sua plataforma. Com base no objetivo do negócio, também sabemos o objetivo principal de conversão, que é fazer com que os usuários começam a se inscrever processo, dando seus endereços de e-mail. De todos os usuários, sabemos que eles são tecnologicamente focados primeiros adotantes na faixa etária de 15 a 30 anos. Também temos muitas recomendações ótimas no Twitter, que podemos usar para validação social. Por fim, a página de destino tem que ser simples e agradável, usando as cores principais da marca, bem como seguir as últimas tendências de design da Dribble. Como você pode ver no lado direito, também temos alguns visuais, incluindo a pesquisa do iPhone 10 e também uma captura de tela desse aplicativo web, que podemos usar durante o processo de design da página de destino. Agora que temos uma melhor compreensão do resultado final desejado, vamos criar a primeira versão de nossos wireframes. Muitos designers preferem criar os wireframes iniciais no papel. No entanto, eu gostaria de fazer isso dentro do esboço, mas a chave aqui é baixa fidelidade. Você não quer se preocupar com cores, fontes ou qualquer coisa orientada para detalhes. O objetivo principal aqui é descobrir uma ótima estrutura para a página de destino. Então eu comecei com a navegação, que será uma posição fixa de navegação visível durante scrum. Dentro da navegação, eu também coloquei um botão “call-to-action”, que é realmente importante porque ele é sempre visível, e os usuários podem decidir a qualquer momento que eles gostariam de se inscrever para o serviço e usar o botão “call-to-action”. A seção de heróis é a chave, criando uma página de destino eficaz. Isso tem que ser visualmente envolvente e bonito e interessante para os usuários, então eu também coloco o botão “call-to-action” lá. É instantaneamente visível após o carregamento da página. Temos um iPhone olhar para cima mostrando o aplicativo. Em seguida, teremos uma seção de recursos, com as três características mais importantes do produto e serviço. Então temos uma seção de caso real onde podemos demonstrar e mostrar o aplicativo, e então temos também um par de alternâncias para tornar o protótipo mais interativo, e basicamente não é apenas uma maquete estática, mas é um visual mais complexo. Então teremos a prova social e os depoimentos dentro desses retângulos se tivermos que citar e também um link para o perfil do Twitter da pessoa que recomendou o serviço. Também temos uma seção de call-to-action na parte inferior da página com algumas mensagens simples e também um botão “call-to-action”. Este layout também nos dá um quadro da página de destino. Se você prestar atenção, temos uma parte de call-to -action no final da página e no início da página, e temos o conteúdo principal que amplifica a mensagem da página de destino. Basicamente, estes são os pontos onde tentamos mostrar as possibilidades do aplicativo e do serviço. Os usuários podem se inscrever para ele na parte inferior ou na parte superior da página, e também a qualquer momento porque temos a navegação sempre visível. Se você olhar para ele lado a lado, você pode ver o resultado final que iríamos criar. Você também pode ver como ele se relaciona com os wireframes iniciais. Antes de começarmos a projetar peças, vamos ver como podemos encontrar inspirações incríveis para nossos projetos. 3. Como encontrar inspirações: Para encontrar inspirações de alta qualidade, costumo driblar e também sigo algumas pessoas. Mas você também pode verificar os tiros mais populares. Você também pode filtrá-lo para a última semana, mês passado, ano passado, para que você possa obter alimentação das últimas tendências. O que eu costumo fazer é procurar o termo página de destino e ver o projeto que tem uma tag ou sob descrição, eles têm o termo página de destino, e você também pode ver um antigo termo popular e também, os trabalhos mais recentes. Isso também é realmente útil para ter medo das últimas tendências. O que eu costumo fazer que se eu encontrar uma categoria de designer que eu gosto, eu também gosto. Então essa é a função de vida é usada no meu caso. Se você visitar meu perfil, você também pode dar uma olhada nos gostos que eu dei ao projeto. Então você pode ver uma coleção de meus projetos favoritos também para páginas de empréstimo, e para aplicações. Esta é basicamente uma lista com curadoria de desenhos que eu recomendo entrar em detalhes e estudá-los para obter mais inspiração. O outro grande site que eu recomendo check-out é bom laboratório que o projeto. Aqui você pode procurar design para seções específicas de sua página. Então você pode ter uma visualização de página completa como aqui, mas você também pode procurar apenas a parte de navegação, ou talvez na seção apenas um herói, ou doar uma inspiração para as partes de chamada à ação. Este é um site incrível para temer que esses anúncios e apenas olhar para o que é geralmente necessário. Então, se você tem apenas uma armadilha dele, com design em rodapé, então você pode ter uma inspiração de rodapés incríveis aqui. Se há algo que você gosta, você pode simplesmente clicar nele e ver o site completo onde essa pasta foi encontrada. Então este também é um ótimo site. O outro é uijar.com. Este é um site semelhante ao bom web design. Então você pode filtrá-lo para sites, mas você também pode ter alguma inspiração para aplicativos e ilustrações e branding. Basicamente, este também é um site criado com designs surpreendentes. Por último, você tem aplicativos da Apple, que é muito semelhante ao repo. Aqui você também pode filtrar para web e ver os designs mais populares e populares para páginas de destino e sites completos. Então eu realmente recomendo verificar este também. Quando você encontrou um design que você gosta, tente comercializar, ou você também pode baixá-lo se quiser. Então você pode apenas baixar a imagem e sempre não se esqueça de verificar os anexos. Assim, você pode ter uma aparência e sensação do design completo. Se houver um design que você gosta, você pode simplesmente arrastá-lo e soltá-lo e salvá-lo sua área de trabalho ou colocá-lo na pasta em seu comando de programação, e você pode dar uma olhada nele a qualquer momento quando precisar de uma inspiração e obter novas ideias a partir desses projetos. 4. Noções básicas de uso do esboço: Para criar o design, nós realmente usamos um aplicativo chamado esboço, que é a melhor ferramenta de design para criar aplicativos móveis modernos e projetos ascendentes. Se você já tem esboços, então você pode abri-lo agora, e seguir junto. Mas se você não o tiver instalado, você pode baixar um teste gratuito a qualquer momento e experimentá-lo. Se você abrir um esboço, podemos simplesmente criar um novo documento. Esta é a interface principal do aplicativo de esboço. As ferramentas mais comuns que usamos, podem ser encontradas, aqui sob o item de menu Inserir, e aqui você pode inserir uma placa de arte, ou uma forma como um retângulo, ou uma estrela, ou apenas uma linha. Primeiro, precisamos criar um quadro de arte. Ao lado de cada item, você pode ver uma letra lá, que é um atalho. Então, se eu pressionar A, ele vai apenas criar um quadro de arte, e aqui você pode, encontrar um tamanho diferente de placa de arte. Então, se estamos projetando para celular, você pode apenas ter uma placa de arte para aplicação móvel, ou se eu pressionar A novamente ou apenas ir aqui, para placa de arte. Eu também posso selecionar uma web responsiva, mas eu tenho predefinições para web design responsivo. Vamos usar um desktop HD. Portanto, ele já está predefinido e pronto para usá-lo. No painel inspetor no lado direito, você pode alterar a exibição de uma placa de arte, bem como a altura de uma placa de arte. Então, desde que se você tem um design de página web muito mais longo, podemos apenas mudá-lo e, ter um quadro de arte muito mais longo, pronto para nossos projetos. A outra função que usamos durante o nosso processo de design, é a forma de retângulo. Há um atalho no teclado. Se você pressionar “R”, você terá acesso à ferramenta de retângulo. Então, se eu estiver no quadro de arte, e apertar “R”, posso começar a desenhar. Quando você cria um retângulo, no lado direito, você pode definir na posição. Então, você pode posicioná-lo com números. Você também pode definir os valores de largura e altura. Também é bom notar que, estes são, campos inteligentes. Então você pode fazer também, cálculos, lá dentro. Então, há muitos recursos dentro desses campos de entrada, e você tem que confiar nessa resposta, para que você possa girar uma forma, aqui. Além disso, você pode definir o raio da borda também. Você também pode alterar o campo da forma, bem como a borda também. Então você pode definir a borda, você pode definir a largura da borda. Então, basicamente você pode ajustar os detalhes. Você pode adicionar sombras, que você vai usar também muito. Então, estes são todos os valores que você usará com freqüência. Dentro da cor girada para cima, o padrão é RGB, se bem me lembro. Mas se você clicar nas letras pequenas aqui, você pode alterá-lo para HSB, que é saturação de matiz e brilho. Então você pode definir o matiz, o valor de matiz é basicamente este. O espectro de cores, você pode definir a saturação. Além disso, você pode definir o brilho, da cor. Portanto, é muito mais fácil trabalhar com este seletor de cores, bem aqui. Você também pode definir gradientes, gradientes lineares ou radianos circulares, e também sentir a imagem também. Então, vamos usar este painel muito durante o nosso processo de design. No lado esquerdo, você pode ver a lista de camadas. Então, se tivermos um par de camadas, que você pode ver todas essas camadas, você também pode agrupá-las, pressionando “Comentário” e “G”, e “Shift Command G” e agrupá-las. Mas você também pode ter um ícone lá, e aqui você também pode personalizar a barra de ferramentas, conforme você precisa. Então, estas são todas as camadas, que temos em um quadro de arte. O que também é muito importante, é que você pode ter várias páginas. Assim, você pode ter basicamente vários espaços de trabalho, dentro de um documento de esboço. Então, por exemplo, você pode trabalhar no design do aplicativo, para o iPhone, então , neste quadro de arte, e nesta página, você pode trabalhar no web design nesta página. Assim, você pode ter vários espaços de trabalho, com vários quadros de arte também. Finalmente, minha função favorita com o esboço, é a ferramenta de medida. Então, quando você seleciona um retângulo, e você pressiona a “tecla Option”, ou a “tecla Alt” no teclado. Você pode ver as medidas exatas dos elementos de classificação. Então você pode medi-lo para o quadro de arte, você pode medir um elemento para outro elemento. Você pode usar essas medidas para criar o design perfeito da imagem. Isso é tudo. Isso também é muito útil, se você tiver vários objetos, que você gostaria de alinhar. É que, há algumas ferramentas de alinhamento, bem aqui. Assim, você pode rapidamente, realinhar esses itens como quiser. Assim, você pode distribuí-los uniformemente, ou posicioná-los no centro do quadro de arte, se você os agrupar e pressionar enter. Então, também usaremos esse alerta durante nosso processo de design. 5. Como instalar plugins: Uma das maiores vantagens de usar esboço, é a enorme quantidade de plugins externos que podem tornar nosso trabalho muito mais fácil e rápido. A fim de gerenciar esses plugins. Existe uma opção para plugins gerenciados. Isso também está disponível dentro das preferências. Se você vai para Sketch e preferências, você também começa com os plug-ins disponíveis que você já instalou. Ou se você quiser ter novos, você pode simplesmente clicar no botão get plugins e ele irá levá-lo para o site Sketch com uma lista dos plug-ins mais populares. Você também pode procurar algo como o gerador de conteúdo, que é um plugin incrível. Então eu realmente recomendo a verificação deste plugin gerador de conteúdo que também será usado para incorrer em nosso projeto. É incrível para gerar automaticamente perfil de usuário, imagens ou nomes, ou quaisquer textos. Este é um plugin muito útil. O outro que usaremos é o botão Rótulo. Ele está tornando super fácil de re-rotular um certo botão que nós projetamos. Também lhe mostrarei este em ação. Além disso, vamos usar o Paddy que é realmente como o rótulo padrão, mas com muito mais funcionalidade, por isso é uma rede capaz. A fim de baixar e instalar um plugin, você pode apenas clicar que baixar o arquivo zip e ele irá baixar automaticamente o plugin para você. Eu também baixei. Quando você tiver o plugin baixado, você pode apenas clicar duas vezes no arquivo do plugin Sketch dentro da pasta. Ele diz que o plugin está completamente instalado, então instalado com sucesso. Você já tem o plugin que está bem aqui. Se você quiser experimentá-lo, você pode apenas criar um botão simples. Digamos que é Button. Podemos agrupar esses dois elementos, então teremos o Paddy ativado. Podemos estratificar o estofamento para que o fundo superior e o paddying esquerdo direito. Selecione a parte superior e inferior. Isso seria 20 e tipo esquerdo, defina-o como 40 e aperte aplicar, e já está aplicado. Toda vez que renomeamos um botão dizer, New Button, ele será redimensionado automaticamente. Este é um plugin muito legal e conveniente, e é realmente semelhante ao outro botão que eu já mencionei. Se você criar outro botão, podemos dizer que é um Novo Botão e posicioná-lo da maneira que queremos para que possamos alinhar ao centro e agrupá-los. Agora podemos usar este plugin botão ou apenas usar o comando de atalho G. Podemos simplesmente renomear o botão e todos os outros estilos serão aplicados. Estes plugins são realmente semelhantes e você pode usar qualquer um deles que lhe permitem gostar mais. O outro plugin útil que também discutimos é o Gerador de Conteúdo. Se eu tiver algumas de suas induções e algumas mensagens para os nomes, você pode manter seu cliente fora. Se você selecionar isso, você pode ver que precisamos das fotos pessoais e digamos, imagens femininas. Ele será preenchido automaticamente, e também é verdadeiro para os nomes. Precisamos de nomes femininos e já está feito. Isso torna super fácil trabalhar com seus dados e com suas imagens. 6. Como criar paleta de cores: Criar uma paleta de cores agradável e consistente pode ser um desafio às vezes, mas deixe-me mostrar-lhe algumas dicas e truques que eu uso quando estou procurando as cores perfeitas. Eu tenho um par de grandes sites abertos que eu costumo usar em busca das cores perfeitas, então um deles é uigradients.com, aqui você pode ver gradientes realmente agradáveis criados por marcas e outros designers, e você também pode ver os valores exatos que eles estão usando, e este recurso é enorme, basicamente você pode encontrar qualquer coisa aqui, o outro que eu realmente gosto de usar é o Color Wheel by Adobe, e aqui você pode definir regras diferentes, então como ele funciona é que primeiro você especifica a cor principal, uma cor da marca, e, em seguida, com base em regras diferentes, ele pode oferecer-lhe outras cores para uma empresa que faz cor, e o último que eu uso é o Grabient, isso é realmente semelhante ao Gradientes de interface do usuário, mas eles têm tipos realmente diferentes de gradientes, você também pode ajustar estes e adicionar a cor extra a ele para que seja mais interativo e mais editável. Este também é ótimo site para verificar, e eu vou saltar para o esboço, eu sempre tento começar com a definição do personagem principal, a cor do acento, ou a cor planejada que vamos usar ao longo do projeto, isto é geralmente a cor dos padrões e, em seguida, os elementos mais importantes do site, e geralmente tentar procurar algo em torno do azul ou os tons roxos de cores, então eu estou basicamente apenas trazendo para fora a saturação, brilho e valor de matiz, por isso é muito bom ter em mente que a cor tem que funcionar muito bem tanto em superfícies brilhantes bem como nas superfícies escuras ou pretas se tivermos uma interface de diretório como um motivo escuro no aplicativo, ou apenas um fundo, por isso também é bom ter em mente que ele tem que funcionar em ambos os casos, então sim, aqui podemos brincar com diferentes tons e cores para encontrar o que realmente combina com a nossa marca, então para o nosso projeto, Eu já tenho o valor, então, você também pode copiá-lo e usá-lo, então esta é a cor principal que vamos usar em nossa página de destino, e nós também teremos uma cor para o texto, alguns designers dizem que eles não recomendam usar preto para o texto, às vezes eu concordo, mas é realmente dependendo do caso, melhor prática é usar um azul realmente escuro que é quase preto, mas hoje em dia, os monitores de LED são mais comuns, por exemplo, no iPhone 10, às vezes pode ser útil usar um preto perfeito como um fundo de uma seção no site, por exemplo, para que você possa decidir. Você pode adicionar um usuário preto perfeito para o texto, ou você pode apenas usar uma cor azul realmente escuro, e isso também é verdade para o branco, então alguns designers dizem que é bom usar um completamente branco para texto, mas realmente depende também do fundo. Se tivermos um fundo perfeitamente preto e gostaríamos de escrever em cima dele, é realmente recomendável não usar cor branca completa porque pode ser muito brilhante e diminuir o oposto, então use 90 ou 80 por cento de branco em caso de um fundo preto. Mas para o nosso projeto podemos usar um preto perfeito para o texto e também branco para o texto branco e elementos, e o que tem que ser uma necessidade é que se tivermos três gradientes e desta forma somos gradientes de marca, então todos eles p, a, b na forma diagonal, e vamos ver, este é o primeiro passo do gradiente, que é adicionado aqui e então este é o segundo. Apenas posicione-o. Perfeito. Temos o outro bem aqui. Em termos de gradientes, eu geralmente tento criar e usar duas cores, elas se vizinham. Neste caso, o amarelo e o laranja são quase vermelhos e eles estão realmente próximos um do outro no espectro de cores, bem como você pode ver o roxo e o azul, então estes também estão próximos um do outro, e desta forma ele é bastante certo que eles vão você olhar grande ao lado do outro. Eles são seguros de usar dentro de um gradiente sem problemas ou medo de erros. Agora temos as cores principais que usaremos em todo o projeto, e o que eu recomendo fazer é que aqui você pode salvar essas cores como cores de documento. Mais tarde, você pode simplesmente usá-lo rapidamente com um clique, então nós apenas salvamos esta cor, então sempre que estamos projetando e precisamos da cor específica, nós podemos apenas saltar aqui e, em seguida, clicar nela e ele estará lá instantaneamente. Eu recomendo salvar essas cores, talvez o preto e branco seja desnecessário, mas se você estiver usando o azul direto ou uma sombra diferente para as cores claras, é realmente conveniente colocá-las aqui, e também está funcionando com o gradiente para que você também possa salvar esses gradientes como cor do documento, e vamos usá-los muito durante o projeto, então, é realmente recomendado colocá-los aqui para os próximos textos. Quando se estamos projetando um botão, por exemplo, podemos simplesmente passar rapidamente pelos gradientes e [inaudível], temos o gradiente bem ali. Temos nossa configuração de cores e podemos continuar com o projeto. 7. Escolhendo as fontes: tipografia é o elemento mais importante do design porque queremos garantir que a experiência de leitura seja o máximo possível. As pessoas estão sempre à procura de razões para parar de ler. Com a excelente tipografia, podemos ter certeza de que os usuários vão ler nossas mensagens e ler seria um prazer para eles. Se você gostaria de aprender mais sobre tipografia, eu recomendo que você confira dois artigos. Um deles é o Guia de Cinco Minutos para Melhor Tipografia. Este é um ótimo resumo dos princípios fundamentais da tipografia. Durante nossa prática, nós realmente usamos essas técnicas e princípios. Mas se você está interessado em tipografia, eu realmente recomendo que você leia este artigo e aprenda mais sobre diferentes pesos de fontes e também alturas de linha e comprimentos de linha. Este é um excelente artigo para aprender sobre tipografia. Mas vamos usar quase todas essas técnicas na prática dentro do próximo capítulo ou vídeo. O outro artigo é uma tipografia prática que vem, é tipografia em 10 minutos. É também um ótimo resumo dos princípios tipográficos mais importantes. Para fontes, eu costumo usar o Typekit, que é um serviço pago pela Adobe. Eu realmente gosto deste serviço e é realmente acessível e eles estão fornecendo um monte de alta qualidade em fontes premium. Mas para o nosso projeto, usaremos uma fonte gratuita, porque está disponível para qualquer pessoa e você pode facilmente baixá-la. Vamos usar a fonte chamada Source Sans Pro. Basicamente, para baixá-lo, você pode simplesmente selecionar essa fonte. Então aqui você tem um botão de download e você pode baixá-lo para o seu computador. Depois de baixá-lo, você pode simplesmente abrir a pasta e agora você ordenar arquivos de fonte que você precisa. Basta abrir o aplicativo de lista telefônica no seu Mac e simplesmente arrastar e soltar suas fontes lá dentro. Se eu fizer isso, ele receberá uma mensagem de erro porque eu já os tenho instalados. Mas esse é o processo completo de instalar uma fonte no seu computador. Então, é muito fácil. Depois de instalar a fonte, você pode simplesmente ir para o documento e, em seguida, começar a digitar. Você tem a opção de selecionar a fonte que acabamos de instalar. Então você tem todos os evades, o Boyd semi, Boyd preto, normal. Você tem todas as versões diferentes da fonte. Então, estamos configurados e podemos continuar a projetar a página de destino. 8. Como criar a página de destino: Finalmente, agora podemos começar a projetar nossa página de destino. Este é o processo de design. Primeiro de tudo, vamos precisar de uma prancheta, podemos apenas pressionar A no teclado ou apenas selecionar a prancheta e, em seguida, selecione o “Desktop HD”. Como a página de destino será relativamente longa, altere a altura para cerca de 7.000 pixels de altura. Mais tarde, podemos sempre alterar esse valor se não for suficiente, então podemos aumentá-lo a qualquer momento para 10.000 ou 8.000, não importa porque ele é mutável a qualquer momento. Vamos começar projetando a navegação primeiro. Para navegação, precisaremos do retângulo, que está posicionado exatamente no canto, e a largura é 100 por cento, então é uma largura total, e a altura é de 50 pixels. Quanto às chamadas de cor de fundo, ele deve ser um branco com 97 por cento de opacidade, então quando o usuário via scroll, então ele será capaz de desenvolver mais tarde, em seguida, o conteúdo, ele pode ser visível em apenas um pouco, e também podemos adicionar um desfoque de fundo de células autênticas também. Para ter um pouco de separação sob ele, é uma boa prática adicionar a sombra, que é apenas um pixel para baixo. As cervejarias são zero e a opacidade é 10% preta. Podemos adicionar o logotipo da empresa ou logotipo da marca, que é muito simples. Rastreador curto. Devemos ter 18 pixels, também em negrito. Para ter um pouco mais de separação, a última palavra deve ser a cor da marca como esta. Em termos de posicionamento, o conteúdo do site será 1100 pixels de largura. Isto é, a caixa dentro vamos layout, o conteúdo. Se você quiser, você pode transformar réguas e você pode usar guias aqui também. Você pode simplesmente criar, clicando duas vezes, criar duas linhas ali e você pode mantê-las como referência. Mas eu costumo dizer que são 170 pixels da esquerda e também da direita por isso é muito fácil e não precisamos de um sistema mais complexo no momento. Se você tiver um outro ativo de projeto pronto, então você tem o conteúdo aqui. Este é o nome da marca. Ele são itens de navegação. Podemos criar esses também. Deve ser um 14 pixels em tamanho de fonte e o normal, o primeiro temos os recursos, então temos a comunidade, e o começar, em seguida, colocá-los 60 pixels separados um do outro. Se você os agrupar, posicione-os no centro e estude. Agora precisamos de outro destes para o login, que pode ser um negrito e também precisamos de um botão get start. Para o botão eu recomendo usar quatro pixels, raio da borda. E também use a cor da marca como plano de fundo. Mude a cor para branco. Em termos de sombra, eu recomendo usar uma cor da cor do botão que apenas modificou o brilho para que o bit desvantagens para que seja cor mais escura em torno dele e apenas diminuir o oposto para 10 ou 20. Também mude o texto aqui para semi negrito, em vez de negrito e apenas posicione-o no centro assim, e também este aqui mesmo. Às vezes também é bom acreditar em nossos olhos e não apenas nos números. Por causa da sombra e do equilíbrio visual que pode ser tão óbvio, a melhor ferramenta para colocar o exatamente por números no centro, mas também confiar em seus olhos no processo. Você pode apenas carregar, verificar tudo, e é perfeito. Agora temos o título, o título e o título principal é este, então temos pás regulares automaticamente. Deve ser um 70 pixels em tamanho de fonte e preto e também, assim, e a altura da linha é 72 e nós também levantamos assim e então temos o texto de descrição regular, que temos este. Também é uma boa idéia usar emojis porque é realmente popular hoje em dia e pode parecer seu produto ou serviço estável atualizado e moderno, por isso é apenas um toque agradável de usar este e o tamanho da fonte aqui é 21. Também para a altura da linha, eu costumo multiplicá-lo por 1,5, 1.6 por isso deve ser em torno de 7-1 em geral, de modo que está tudo bem para a altura da linha. Sim, algo assim. Coloque-o em pixels, o que o torna perfeito. Agora podemos criar a seção ir para ação da página e, no nosso caso, não será apenas um botão. Será um campo de entrada para o endereço de e-mail porque se sob usuários para dar que endereços de e-mail. Aqui podemos criar um retângulo que é 450 pixels de largura e 23 pixels de altura e também o raio deve ser quatro pixels. A cor de fundo para ser branca. No entanto, para tornar isso visível, se você aplicar sombras. Uma sombra seria um pixel para baixo e dois desfoque de pixel e preto com 5% de opacidade. Se você adicionar sombra adicional, com valores diferentes, mas o oposto será 5 também. Agora é muito mais visível, mas eles ainda podem melhorar isso aplicando uma borda que será apenas em espessura será apenas uma metade e a cor da borda pode ser o preto com 10% de opacidade ou apenas 5% de opacidade. Portanto, cabe realmente a nós o que preferimos para o nosso projeto, nós preferimos a versão de 5%. Então podemos criar um botão, que é 140 e assim você coloca a cor da marca. O que podemos fazer aqui é uma posição como esta. Se agruparmos esses dois elementos, e clicar no retângulo maior na parte inferior, podemos usá-lo como uma máscara. Como podem ver, temos o raio da fronteira ali, por isso é perfeito assim. Podemos ter o texto de 16 pixels dizendo isso. Comece a acompanhar, porque comece a acompanhar seus programas de TV. Também é uma boa idéia usar textos específicos em termos de ir para botões de ação, que são apenas testes genéticos. Em vez de usar apenas o convidado pontilhado ou juntar-se ou inscrever-se, e também é bom para tentar frases diferentes como começar a trekking porque é mais conectado às funções do aplicativo ou ao serviço que esta empresa fornece. Você também pode ver o posicionamento aqui. Agora precisamos ter o título do campo de entrada, dizendo que é e-mail, e também podemos usar a cor da marca neste caso. Então podemos ter apenas o texto automático base, como your@email.com. Apenas dando ao usuário alguma idéia da entrada que precisamos deles. Podemos usar essa opacidade de 30 por cento. Simplesmente assim. Nós apenas posicionamos como este. Mantenha sempre uma variedade de camadas para que tudo esteja dentro de um grupo aqui, por causa do mascaramento, ele deve estar 30 pixels abaixo do texto da descrição. Se você tem parceiros, é uma ótima idéia colocá-los na página de destino. Bem no começo. Os usuários podem ver que você está trabalhando com grandes marcas e parceiros. Temos esses logotipos. Podemos digitalizá-los, então a altura é de 30 pixels. A Netflix pode ter 25. Se você está fazendo alguma coisa. Todas as maiúsculas, é uma boa idéia aumentar o caractere e o espaçamento entre os caracteres, e também diminuir o tamanho da fonte também. Assim. Nós temos os nobres, e colocamos essa opacidade 30% e apenas distribuímos uniformemente. Ótimo, e posicione-os assim. Incrível. Agora, para tornar essa seção de herói visualmente mais interessante, vamos criar alguns retângulos e usar os gradientes de marca que já criamos durante o capítulo de cores no vídeo colorido. Podemos ter um copo quadrado com 60 ou 40 por cento do raio de Porto. Nós também podemos usar este recurso cantos suaves pelo meu esboço. Torna os cantos mais arredondados basicamente. Podemos selecionar um dos gradientes primários e também diminuir a opacidade para 90% no desfoque de fundo de 10 pixels. Use também uma sombra de oito e 16 pixels, e defina-a para 20 ou apenas 15, assim, e crie outra na cor roxa da marca. Você vê que eles estão em cima um do outro e a opacidade e também o fundo desfocado criando um efeito interessante. Agora só temos que girá-los. Então vamos girar isso, 65 por cento em graus e este em 45 graus e tentar apenas alinhá-los ou talvez seja uma boa idéia primeiro alinhá-los e depois girá-los. Estes estão perfeitamente alinhados desta forma e podemos girá-los agora. É perfeito, sim, deixe-me agrupá-los. É importante que tenhamos a barra de navegação. Nós os colamos juntos e colocamos no topo. Você também pode renomear esse grupo, se desejar. Perfeito e precisamos de outro retângulo, que seria 300. Vamos usar o gradiente azul e ainda aplicar a mesma opacidade e desfoque de fundo, também a sombra. Gire em 45 graus e coloque-o aqui. Agora podemos obter o maquete do iPhone 10 finalmente, e usá-lo. Tem 310 pixels de largura. Adicione também algumas sombras, como 20 pixels abaixo, 30 pixels de desfoque, e 10 por cento de opacidade, exatamente assim. Agora você pode brincar com o posicionamento até encontrar a posição perfeita com a qual você está confortável. Algo como este, ótimo. Bem, se você gostaria de ver o que é visível exatamente quando a página é carregada. O que está acima da fonte, abaixo da fonte. Podemos apenas selecionar a placa de adição e modificar a altura para 900 pixels. Esta é a resolução padrão do Retina MacBook Pro. É 1440 por 900. Isso é praticamente visível sem se agachar na página de aterrissagem. Se você parar aqui e eu penso por um segundo, você pode ver que o visitante do seu Instagram que o que é o principal ponto de venda ou a principal característica deste aplicativo, como o aplicativo se parece. Eles também recebem um pouco de explicação. Eles podem se inscrever imediatamente e começar a usar. Se eles tiverem permissão para ter uma conta, eles podem fazer login. Eles também podem se inscrever e eles também podem dar seus endereços de e-mail, e eles também vêem que há realmente grandes marcas em conexão com este serviço. Eles podem começar automaticamente a rastrear seus programas de TV com a Netflix, ou com uma analogia, sistemas de rede doméstica ou basicamente apenas os dispositivos normais. Basicamente, todas as informações necessárias estão aqui para que o usuário decida se gostaria de se inscrever instantaneamente. Mas no caso de eles não estarem prontos para continuar com o processo de inscrição, podemos dar-lhes mais informações sobre este aplicativo e serviço. Podemos continuar com os textos adicionais. Temos a seção de recursos chegando. Vamos ver. Nós temos os recursos, e eles também têm este para o conteúdo. Pode ser mais rápido para apenas, foi este, rapidamente pegar o conteúdo para o site como este. Agora podemos definir muito leve e 80 por cento de opacidade para torná-lo um pouco menos significativo e pode ter este em preto e também ter este. Ok. Agora só temos que diminuir a altura da linha aqui, assim. É como no caso do título principal. Agora vamos criar os três recursos mais importantes do aplicativo e serviço. Vamos criar um retângulo com uma largura de 300 pixels. Este será o nosso guia. Não será visível na ranhura vazia. Vamos usá-lo como guia. Apenas posicione-os. Agora podemos colar o conteúdo dentro dele. Temos o rastreamento automatizado, que será apenas um. O tamanho da fonte deve ser de 18 pixels. Então temos uma descrição como esta. Isso é apenas 16 pixels e a mão direita é 24. Aqui também a largura pode ser 300 pixels como este e talvez meio Saiba mais botão e link. Na cor da marca, e também com o pequeno ícone, afiar como. Para criar esse, precisamos ter um precisamos ter quadrado de seis por seis e remover para preencher nas bordas, e também definir a espessura para dois. Agora basta apertar Enter, ele vai abrir esta forma e você tem a tesoura, e você pode apenas remover dois desses. Agora eu só tenho que girá-lo assim, e apenas posicioná-lo. Agora você pode apenas agrupar e colocá-lo no meio. Perfeito. Agora temos que criar um pequeno ícone, é um retângulo de 50 por 50. Podemos usar um de nossos gradientes de marca novamente. Cerca de 14 pixels de raio de borda com canto suave e também aplicar alguma sombra como no caso do botão de chamada à ação na navegação. Podemos simplesmente pegar uma cor e configurá-la para 20 na opacidade, ou na verdade apenas 15, e então podemos colocar o botão Play nele. Se formos para Ícones, Recursos e o Jogo, mas podemos posicioná-lo. Tenha em mente que posicionar o botão Play pode ser um pouco complicado, por isso não confie nos números tentem confiar nos seus olhos. Em torno disso. Agrupe-os e coloque-os no meio. Ótimo. Agora só temos que repetir esses passos. Agora vamos criar uma separação interativa entre a seção de dois recursos. Talvez eu use os pôsteres do programa de TV. Vamos criar um retângulo com uma largura de 220 pixels e a altura de 330 pixels. Talvez eu use o raio da borda de seis pixels, e talvez eu posicione 30 pixels entre cada um deles assim. Defina sombra com 0, 10, 20 e 10 por cento para opacidade, e talvez eu precise de sete destes, então mais um como este. Agora podemos agrupá-los juntos, colocados no meio e posicioná-lo assim. Agora podemos mudar o preenchimento dessas duas imagens e começar a usar as imagens para que tenhamos nos cartazes do programa de TV. Temos as imagens de que precisamos. Você pode simplesmente arrastar e soltar lá e está feito. Deixe-me saber qual deles é o seu favorito ou há algum novo programa de TV aqui que você ainda não assistiu, ou se você assistiu, qual era o seu favorito. Só estou curioso. Vamos ver o House of Cards bem aqui no meio e o Flash, e o último. Perfeito. Tudo bem. Temos uma fase interativa e uma separação visualmente interessante entre as diferentes seções. Agora podemos nos concentrar em criar a seção de caso real. Agora crie a seção de vitrine dos aplicativos, então vamos criar um subtítulo aqui. Pegue o conteúdo, pegue o outro, perfeito. Defina a largura como 460 e alinhe-a à esquerda. Este também, defina-o como negrito e o tamanho da fonte é 46 com a altura da linha de 50. A altura da linha deve ser de cerca de 28, e também diminuir o oposto, por isso recebe menos atenção. Essa é melhor entre os elementos. Posicione-o assim. Temos de criar estes Tagore interruptivos. Se usarmos a técnica de sombras diferente novamente. Esta é a primeira sombra, e nós temos uma segunda também, assim. Vamos definir a largura para 340 e a altura para 54, e definir o texto. Agora podemos pegar os ícones. Então, dentro dos ícones, você tem uma pasta para o caso real, e dentro disso você tem o painel. Basta colocá-lo dentro dele e posicioná-lo. Perfeito. Agora basta copiar estes e obter o conteúdo dos outros botões. Perfeito. Pegue os ícones. Ótimo. Agora vamos usar as capturas de tela que temos. Então primeiro comece com a captura de tela do aplicativo. Vamos apenas criar um retângulo com a largura de 820 e a altura de 511. Esta será a máscara que usaremos. Coloque-o abaixo do separador. Agora, se pegarmos a captura de tela, então temos a maquete de aplicativo web. Basta colocá-lo aqui. A largura também pode ser 820. Tente posicionar assim logo acima do retângulo que criamos. Agora você pode simplesmente agrupá-los e usar o retângulo como base da máscara. Agora você pode definir o raio da borda para seis e também aplicar a sombra, que será 0820, e o oposto será um pouco 10. Agora você vê que temos cantos arredondados, e nós também temos a sombra. Perfeito. Agora também podemos adicionar a maquete do iPhone aqui também. Então defina a largura para 65 e também adicione sombra. Ótimo. Agora vamos posicioná-lo posicioná-lo por aqui. Incrível. Portanto, desta forma há pré-visualização para esse aplicativo também. Você pode ver a maquete Eiffel na íntegra também. Em seguida, o usuário clica através desses modos diferentes. O conteúdo dentro deste pode mudar de acordo com o Tagore selecionado aqui. Agora podemos criar o testemunho como uma seção. Vamos apenas criar o grande retângulo que será a base desta seção e apenas definir o fundo para preto. Coloque-o 140 abaixo da seção anterior. Agora podemos colocar o conteúdo aqui, e basta copiar e colar e mudar a cor para branco. Também precisaremos deste pequeno subtítulo aqui. Diga que é comunidade. E nós temos o conteúdo. Incrível. Basta mudar a posição um pouco para que tenhamos um espaço muito mais ativo em torno deste elemento. Basta criar o botão, que temos a cor de impressão e também Leia mais como texto sobre ele. Sim, exatamente. Defina o peso da fonte como semi-negrito. Além disso, linha central. Só te encontro nos detalhes. Além disso, o tamanho da fonte deve ser 16. Você também pode ter a mesma sombra assim como aqui. Que usemos esta cor como sombra. Agora, vamos criar os cartões para os depoimentos. Basta criar um retângulo com uma largura de 260 por 210 e definir o raio do porteiro para 10 pixels e você também pode usar este recurso de maioria dos cantos. Defina a cor de fundo para branco e diminua o oposto para oito. Então vamos criar um círculo para a imagem do perfil e, em seguida, também uma camada de texto. Certifique-se de que está alinhado à esquerda. Deve ser semi negrito e tamanho de fonte de dois pixels e meio. Agora, a partir da prateleira de frutas, basta pegar o ícone do Twitter e você pode apenas atualizar a cor e definir o oposto para 30 por cento assim. Agora, eu posso pegar um desses depoimentos. Basta colocá-lo lá dentro. Atualize a altura da linha e também diminua o oposto e certifique-se de que ela está perfeitamente posicionada. Agora, só precisamos adicionar uma data e defini-la, em frente a 50 por cento e apenas uma normal. A maneira como este cartão funciona é que quando o usuário clica nele, seu feed será direcionado para o tweet real. Ou você pode usar também Facebook ou o post Facebook real. Isso é realmente importante porque caso contrário, se é apenas o nome e a opinião ou apenas uma citação aqui, maioria dos usuários está dizendo que é uma citação falsa e eles estão dizendo que o proprietário da empresa ou o designer ou desenvolvedor apenas descobriu e é apenas uma opinião falsa. Mas, na verdade, amarrar este a um Tweet real ou mensagem do Facebook e vinculá-los juntos. É a melhor maneira de criar depoimentos porque dessa forma o usuário pode validar para si mesmo que, “Ok, esta é uma opinião real.” “ É uma citação real e esse é o post original do Facebook ou tweet para ele.” É muito importante fazer isso porque dessa forma dá muito mais credibilidade à nossa página de destino. Agora, podemos agrupar tudo e criar uma segunda versão com a outra. Você pode usar aspas ou você pode simplesmente usar o texto, cabe a você e apenas atualizar a altura. E se você tiver mais exemplos para o curso? Você pode usar mais exemplos como eu preciso. Então você pode personalizar isso. Agora, vamos apenas selecionar cada segundo das imagens de perfil e ir para o gerador de conteúdo fotos pessoais e feminino e também usar as camadas de texto deste. Além disso, vá para o gerador de conteúdo nomes pessoais e fêmea. Basta ir para as fotos do prefeito, bem como para os nomes. É assim que você pode gerar rapidamente conteúdo 3D em seu design. Então só nomes e perfeito. Agora, nós também podemos preparar isso juntos e apenas atualizar o espaçamento um pouco. Perfeito, agora, podemos diminuir a altura deste fundo e agrupar tudo e usar a camada de fundo como base da máscara. Perfeito. Chegamos à última parte da página de destino, que não é uma seção de chamada à ação. É muito fácil porque o [inaudível] são elementos existentes. Como este, você pode simplesmente colocá-lo logo abaixo da seção de depoimentos como esta e nós podemos atualizar o conteúdo aqui. Não estava alinhado no centro. Então eu só conserto este aqui também. Perfeito. Agora, eu apenas atualizo o conteúdo lá dentro e nós também podemos usar a lacuna existente [inaudível] que nós criamos assim. Agora, podemos ter alguns ícones para os perfis sociais da empresa. Podemos começar com eles no Twitter, depois no Facebook e no YouTube, e distribuí-los uniformemente. Ok, apenas agrupá-los, definir o oposto em 20% e alinhá-los no meio. Agora, temos o rodapé, que tem sido muito simples. Basta configurá-lo para semi negrito e cinco pixels para centralizar a linha. Configure até 30 por cento e também coloque isso mais perto. Ótimo, e só tenho que reposicionar a altura do quadro de arte. Perfeito. Agora, estamos prontos com a próxima versão da página de destino. Parabéns por completar a versão do livro didático desta página de destino. Espero que isso tenha sido útil. Agora, podemos continuar e focar na versão móvel também. Vamos continuar assistindo. 9. Design para celular: Vamos criar a versão móvel da nossa página de destino. Primeiro, vamos precisar de uma saída novamente e, em seguida, para celular, eu costumo ir com o iPhone 8 ou o iPhone 10 tamanhos. Mas, no nosso caso, ambos os tamanhos são idênticos porque a largura do iPhone será a mesma. Vamos escolher a saída do iPhone 10 e torná-lo mais longo assim como no caso da versão desktop. Agora podemos usar os mesmos elementos que usamos durante a versão desktop e podemos simplesmente reutilizá-los novamente. Nós modificamos as configurações. Temos a barra de navegação, é de largura total e, em seguida, temos o logotipo da marca, exatamente assim. Então, se você der uma olhada na navegação, esses links são codificações, então eles estão apenas rolando para as diferentes seções da página, e eu acho que o uso [inaudível] para desnecessário para a versão móvel, o que é realmente necessariamente é ir para o botão Ação. Em vez de fazer esta barra de navegação lotada com um monte de opções diferentes, eu só quero manter o botão essencial e o mais importante, que é o botão Começar, como este. Agora, vamos copiar e colar os outros elementos da seção de heróis. Nós temos a parte título, subtítulo e chamada à ação, e nós apenas copiá-los e colá-los aqui. Vamos atualizar os tamanhos da fonte para tentar aparecer 42 pixels com 48 pixels de altura da linha, assim, e a largura será 343 pixels. Desta forma, temos 16 pixels de espaço negativo em ambos os lados, e vamos atualizar a navegação em conformidade também. Para este texto, teremos o tamanho da fonte de 18, e a largura aqui será a mesma. Além disso, não se esqueça de atualizar a altura da linha também. Só precisamos atualizar a parte de chamada à ação, e também precisaremos dos logotipos da marca. Podemos dimensioná-lo ou também podemos atualizar a vista de espaçamento, se você quiser. Então talvez apenas escalá-lo um pouco assim e atualizar o espaçamento. Agora podemos pegar os visuais e torná-los 60 por cento em escala. Você também pode copiar o telefone e atualizar a largura para 300 pixels. Agora também podemos continuar com a cópia da seção de recursos. Tipo de letra ali. Se você der uma olhada no texto aqui, podemos ver que há apenas uma palavra na última linha. Então, para evitar isso, talvez seja uma boa idéia atualizar o tamanho da fonte, então essa é uma técnica. Mas no caso de mudarmos o texto, então teremos que mudar o tamanho da fonte também. Você pode personalizá-lo para o próprio conteúdo, mas em uma regra geral eu também gosto de manter estes alinhados à esquerda porque se você tiver um olhar para as outras seções e as outras partes do recurso, vai fazer mais sentido e vai parecer mais consistente. Quando nós copiamos estes, você pode apenas ter que alinhar esses elementos também. Você pode simplesmente repetir o mesmo processo com os outros recursos também. Aqui, você tem uma opção para centralizar tudo se você quiser, ou você pode apenas deixar alinhar tudo. A única coisa a ter em mente que ser consistente aqui. Então, se você decidir que você quer centralizar linha este, em seguida, você deve fazer o mesmo com o resto, mas se você gostaria de ir com o alinhamento esquerdo exatamente como eu fiz, certifique-se de alinhar à esquerda tudo aqui também. Também podemos escalar toda esta linha de programas de TV. Talvez seja muito grande. Eu gosto disso. Você também pode atualizar o espaçamento para 16 ou 15 pixels de cada lado. Agora podemos continuar com a parte da vitrine. Assim, como antes, vamos apenas copiar e colar o conteúdo e atualizar o tamanho da fonte. Deve ter 32 pixels com uma altura de linha de 38 pixels. Além disso, defina a largura e centralize-a. Este tem 16 pixels com uma altura de linha de 24 pixels. Também atualize a largura e centralize-a. Ótima. Também podemos copiar essas alternâncias. Ótima. Então, podemos copiar o telefone. Aqui, eu só mantive a maquete do iPhone desde que, quando o visitante vê este site em seu telefone, provavelmente eles gostariam de ter uma sensação de como o aplicativo será parecido em seu telefone. Eles realmente não estarão interessados na replicação de texto neste momento. Mas você também pode incluir isso. A fim de ter uma visão mais simples e dar mais contexto ao usuário. Eu recomendo usar apenas a maquete do iPhone 10 no caso de uma visualização de telefone. Agora, podemos ter a seção da comunidade, a seção de depoimentos. Assim como no caso da versão desktop, a idéia é criar o plano de fundo e, em seguida, copiar o texto. Também atualize o conteúdo. Copie o botão também. Agora, só temos que copiar os cartões. Para fazer isso, vamos usar e pregar o cartão de uma maneira diferente. Em vez de posicioná-los de forma vertical, vamos posicioná-los horizontalmente. Então vamos ter um pouco de área para brincar aqui. Ótima. Podemos colocá-los lado a lado. Atualizaremos a altura de cada carta para que cada carta tenha a mesma altura. Ótima. Podemos colá-los aqui. Não precisaremos descansar por enquanto. Ótima. Agora só atualizamos o espaçamento. Perfeito. Finalmente, só temos que criar a parte de call-to-action do rodapé. Para fazer isso, primeiro, basta copiar e colar esses recursos bloco de texto. Nós podemos centralizar alinhar tudo e atualizar o conteúdo. Para a parte de call-to-action, podemos usar o mesmo campo de entrada de e-mail da seção Hero. Só temos que copiar os ícones sociais e o texto do rodapé. Certifique-se de que a opacidade é de 20% e atualize as distâncias. Certifique-se de que você alinha tudo no centro. Você pode apenas fazer isso regular e apenas 11 pixels no caso de um tamanho de fonte. Ótima. Só precisamos atualizar a altura deste quadro de anúncios. Incrível. O último toque que costumo fazer neste ponto é agrupar tudo para ter um arquivo de esboço mais limpo. Então podemos agrupar estes e você nomeia isso como navegação. Então, este é o “Herói”. Nomeie este Herói, e este aqui com características. Estes são os programas de TV. Então temos a apresentação do aplicativo. depoimentos. Finalmente, temos o rodapé call-to-action. Nós podemos apenas atualizar e classificar estes como eles aparecem dentro do documento. Primeiro é a navegação, depois temos o Herói, e depois os recursos, depois programas de TV e vitrine de aplicativos, depoimentos e call-to-action de rodapé. Incrível. Agora estamos prontos com o nosso design. Ele está pronto para entregar a um desenvolvedor. Você pode trabalhar em animá-lo e começar a desenvolvê-lo e fazer deste um site real. Agora você tem o design perfeito para a versão desktop, bem como para a visualização móvel. O desenvolvedor pode ir a partir deste documento ou você pode levá-lo mais longe e tornar sua página de destino um protótipo, ou até mesmo um site real. 10. Projeto de classe: Ei aí. Parabéns por quase completar este curso. Agora é a sua vez. Eu gostaria que você criasse um design de página de destino, assim como fizemos nos vídeos anteriores. Se você já tem um produto ou serviço, você pode criar um novo design de página de destino para obter mais clientes e aumentar as conversões. No caso de você ter uma ótima idéia para um aplicativo ou serviço incrível, você também pode projetar a página de destino para medir o interesse das pessoas. Ou se você é um designer e gostaria de atualizar seu portfólio, você pode redesenhar sua página inicial ou, caso você tenha um boletim informativo, você pode projetar a página de destino para obter mais assinantes. Finalmente, se você quiser se concentrar apenas nas partes visuais, você pode usar o mesmo resumo do projeto, como fizemos durante este curso, e criar uma nova página de destino para o nosso breve registro, estamos usando o mesmo texto e imagens. Certifique-se de postar seus projetos abaixo, e eu estarei aqui para ajudá-lo e dar-lhe feedback a qualquer momento. 11. Acabamento: Parabéns, você completou esta aula com sucesso. Espero que tenha sido útil e você tenha aprendido algumas novas técnicas. Estou realmente ansioso para ver seus projetos dentro dos projetos da classe, e se você precisar de ajuda, sinta-se livre para perguntar a qualquer momento. Por favor, não se esqueça de deixar um comentário se você gostou desta aula e compartilhá-lo com outras pessoas também. No caso de você querer ver meus outros projetos, baixe meus recursos de design gratuitos ou leia artigos de design detalhados. Certifique-se de conferir meu Perfil Triplo e, caso queira ser notificado sobre meus projetos mais recentes, você pode se manter atualizado no Twitter. Também me avise se você estiver interessado em futuras aulas, seja prototipagem ou desenvolvimento de front-end. Mais uma vez, muito obrigado por ficar por aqui e espero vê-lo na próxima vez. 12. Bônus: fluxo do fluxo de fluxo de fluxo: Ei, bem-vindo nesta lição bônus. Neste vídeo, vou mostrar como preparo meus designs para um Dribbble. Se você abrir nosso arquivo de esboço, eu realmente criarei outra página só para a foto do Dribbble. Basta copiar colar design que vou incluir dentro deste tiro. Para o Dribbble teremos uma regra rígida para fazer upload, que é assim que a largura tem que ser 800 pixels e a altura tem que ser 600 pixels. Esta será a imagem que você pode carregar no Dribbble. Aqui eu apenas copio esse design e atualizo a altura para 900 pixels, então apenas a seção Herói e a Navegação são visíveis. Agora vou converter este design em apenas uma imagem normal. Para fazer isso, basta verificar esta cor de fundo apenas para que o fundo preencha a ferramenta para branco regular e, em seguida, você pode apenas adicioná-lo a um JPEG como o formato. Eu só arrasto e solto este desenho e agora eu tenho a imagem bem aqui. Isso será incluído nesta foto Dribbble. Como plano de fundo, vou criar um retângulo e vou definir a cor para branco e apenas adicionar um por cento de saturação apenas um pouco. Não é completamente leve, geralmente tem um tom de azul ou roxo, assim como no nosso design, assim. Agora, eu definir a largura para 750 ou exibir entre os números e ternos possivelmente sim, o 720 e que eu peguei o centro. Vou criar outro retângulo para a máscara e centralizá-la. Agora podemos agrupar esses dois e fazer isso como uma máscara e definir o raio da borda para quatro ou seis, nos consertar, deixar sempre quatro no momento. Agora podemos aplicar uma sombra para este grupo e também ter certeza de que para a sombra, também estamos usando um pouco de azul escuro matizado com uma sombra azul para ele. Isso tornará o design mais importante e em linha com as tendências Dribbble ultimamente. Assim como este. Agora, no caso de tornar este tiro um pouco mais interessante, se você usar os cartões, assim como nós exigimos que nós usamos durante o processo de design e para adicionar editar banco de dados de caracteres também. Podemos agrupar estes e pele a 60% e colocá-los para trás. Eu só tentaria alinhá-lo perfeitamente. Agora faça o mesmo com o outro também. Agora, se você tiver um olhar para ele, você pode ver que o próprio navegador ou o próprio site, parece ser transparente de uma forma estranha que você ainda vê a barra de navegação. Mas então o diagrama que eu quis dizer é colapsado com o conteúdo também. Tornando-o realmente agradável e interessante efeito visual. Isso está literalmente alinhado com os clientes no Dribbble hoje em dia. Sim, basicamente esta é uma versão de fazer um tiro ou a outra que eu deveria usar é apenas colocar os retângulos de uma maneira interessante e atraente. Talvez apenas tentar jogar com o posicionamento deles que o fundo não é apenas um branco chato e é retângulos que você pode torná-lo mais interessante e mais atraente para seus seguidores e talvez para outros que estão procurando Inspiração. Agora o único passo que você tem que fazer é realmente exportar este trabalho de arte, então em um formato 1x e PNG, você pode simplesmente exportá-lo para o seu próximo aplicativo apenas assim e agora você pode carregá-lo para Dribbble. É isso. Você tem as fotos do Dribbble prontas. Obrigado novamente por se juntar a mim para esta aula e espero que você tenha aprendido algo e foi útil. Estou realmente ansioso para o seu feedback e também para seus comentários. Muito obrigado e tenha um ótimo dia.