Criando designs com Figma: página inicial para aplicativos móveis

1. Boas-vindas ao curso: Alguma vez você quis projetar uma página web, mas não sabia por onde começar? ou talvez você tenha começado, mas você ficou preso em algum momento porque você não sabia como escolher as cores certas, tipos de letra ou como criar um bom layout. Bem, isso é o que você vai aprender nesta aula. Mas se estamos nos encontrando, meu nome é ADI PURDILA e sou um web designer da Romênia. Trabalhei neste campo há mais de dez anos, e também leciono há alguns anos. Web design ocupa a maior parte do meu tempo, mas eu amo apenas ficar longe dele de vez em quando e trabalhar em um jardim, com minha família, ou fazer alguns trabalhos de madeira. O que eu gosto, o teclado e o mouse, eu também sou um cara muito prático. Agora, juntos, vamos projetar uma página inicial para um aplicativo de orçamento. Vamos começar a partir de um breve projeto e um quadro de fio. Em cada lição vou mostrar-lhe como lidar com uma etapa diferente deste processo. Começará definindo cores, tipografia e imagens. Em seguida, vamos projetar em uma seção da página de cada vez. Então, na linha de chegada vai acabar com esta página de destino completa com seções para recursos, galeria, depoimentos e preços. Para esta aula vamos usar F-I-G-M-A. Isso é gratuito e multiplataforma, para que você possa usá-lo no Windows e Mac OS. E você pode abri-lo diretamente no seu navegador. Agora, fazendo essa aula, eu garanto duas coisas. Número um, você aprenderá a trabalhar no F-I-G-M-A, e número dois, aprenderá um processo eficiente de projetar uma página web com base em uma solicitação do cliente. Esta aula é para iniciantes completos, você não precisa de nenhuma experiência de design anterior, e eu vou orientá-lo em cada passo do caminho. Então, vamos começar. 2. Seu projeto do curso: Olá e bem-vindo à primeira lição desta aula, onde eu vou dar uma olhada mais aprofundada sobre o que estaremos criando.We também vamos rever os projetos de classe para que você possa ver o que você precisa criar ao rever os projetos de classe para que você possa ver o que você precisa criar aotomar esta classe. escolheu este projeto, como ele pode ser benéfico para você e também o que você precisa fazer para começar. Vamos começar. Esta é a página de destino final que será criando.As eu estava dizendo no vídeo de introdução, isso é para um aplicativo de orçamento móvel. Agora isso é claro, um produto fictício. Estas imagens aqui são apenas espaços reservados, há imagens de demonstração tiradas de um kit de interface do usuário. Mas deixe-me explicar-lhe rapidamente o que temos. No topo, começamos com uma área de herói que tem uma seleção de capturas de tela do aplicativo, bem como nossa navegação e conteúdo. Rolando para baixo, encontramos a primeira seção, quatro recursos, onde cada recurso é exibido nesta maneira grade. Então temos uma segunda seção, quatro características. Seguindo em frente. Temos uma pequena chamada à acção. Isso é seguido pela terceira seção quatro features.That temos uma galeria de captura de tela que é seguido por depoimentos. Finalmente, temos a principal chamada à ação e tabela de preços. No final, temos um rodapé. Isso pode parecer que é muito trabalho.Mas vamos levar as coisas passo a passo, vamos dividir esta página em pedaços menores e gerenciáveis. Vamos fazer uma seção de cada vez. Você verá que não é tão complicado criar algo assim. Tudo bem, então agora para o projeto de classe, sua tarefa será criar uma página inicial a partir deste wire-frame. Vou mostrar-te isto daqui a pouco. Este é o mesmo arame que eu estou começando. Você vai precisar fazer o mesmo para acabar com isso. Agora, seu produto final não tem que ser exatamente o mesmo que o meu. Vou mostrar-te uma maneira de o fazer. Obviamente você pode seguir exatamente o que eu faço e acabar com um resultado idêntico. Isso está totalmente bem. Mas eu encorajo você a experimentar um pouco e colocar sua própria rotação nas coisas. Por exemplo, você pode querer usar um conjunto diferente de cores ou usar um conjunto diferente de fontes, talvez organizar elementos de forma diferente na página. Eu vou te dar todas as ferramentas que você precisa para fazer isso e eu vou te mostrar como usar essas ferramentas.Mas no final, cabe realmente a você determinar como você quer que este resultado final se pareça. Agora, deixe-me mostrar como você pode fazer Isso. Primeiro de tudo, montei um kit inicial de página de aterrissagem. Você precisará baixar isso primeiro. Dentro dos kits iniciais, temos alguns ativos da marca que são essencialmente apenas duas versões do logotipo do espaço reservado que vamos usar. Também temos algumas imagens de demonstração que usaremos. Então temos um resumo do projeto. O resumo do projeto é um documento PDF e isso se assemelha algo que você receberia de um cliente, certo? Nossos clientes como um fictício, é chamado Numm Inc.. Dentro do resumo do projeto, temos alguns antecedentes sobre o cliente e a empresa. Temos os slogan que precisamos usar para este projeto. Presumi que a equipe de marketing do cliente montou este documento e eles basicamente nos deram tudo o que precisamos. Que tipo de slogan usar, que tipo de títulos, legendas, texto de botão usar para a chamada para ações. Está tudo aqui. Em seguida, eles atualmente estabeleceram alguns recursos do produto para nós. Você pode ver que os recursos são categorizados. Então temos características individuais. Podemos ver o título do recurso, descrição e assim por diante. Está tudo aqui. Em seguida, temos informações de preços para o produto, alguns depoimentos e, em seguida, a estrutura da página proposta. Finalmente, no final, algumas considerações de design. Que tipo de cores o cliente gosta? Que tipo de estilo podemos usar para o design? Além disso, que tipo de sites o cliente gosta? Você pode ver que eles nos enviaram três exemplos aqui. Este é, novamente, normalmente o tipo de documento que você receberia de um cliente ao fazer um projeto como este. Em qualquer momento, ele pode voltar a este projeto breve e aprender todos os detalhes que você precisa. Agora, com base no resumo do projeto, eu fui em frente e projetei este arame. Um arame é basicamente um esboço. É uma representação de baixa fidelidade do produto final. Você não tem que levar isso literalmente. Um wire-frame serve apenas como um ponto de partida, como uma diretriz. Ele está lá para mostrar que tipo de conteúdo você precisa adicionar à sua página.It não significa que o layout que usamos no wire-frame precisa estar no produto final. Por exemplo, o layout desta seção de heróis só me mostra uma imagem à direita e o conteúdo à esquerda. Mas se olharmos para o produto final, podemos ver que temos uma imagem à direita e o conteúdo à esquerda, mas não se assemelha a nada assim. Olhe para esta seção, isso é para os recursos. No wireframe, imagino que talvez precisemos ter alguma imagem aqui à esquerda e depois as feições à direita, mas no resultado final, não temos essa imagem à esquerda, em qualquer lugar, temos apenas uma grade de ícones. E sobre a outra seção para recursos? Aqui está como ele parece no wireframe, e aqui está como ele parece aqui. Aqui eu adicionei uma imagem que não estava aqui no wireframe, e eu também escolhi para exibir esses recursos assim. Espero que entenda o que estou tentando dizer. Use o wireframe como um guia para o conteúdo que você precisa usar, não o layout real. No kit inicial, você também encontrará um arquivo resources.pdf. Aqui, você encontrará uma lista completa de recursos que são usados no design, como o logotipo, as imagens, os ícones, ilustrações e também alguns links úteis. Sempre que você não encontrar um recurso que eu uso para ter certeza de voltar para este documento e você definitivamente encontrará um link lá. Agora, como você começa e coloca tudo pronto para as lições principais? Bem, antes de tudo, você precisa baixar este kit inicial. Você encontrará um link para ele na descrição da classe. Depois de fazer isso, vá em frente e crie uma conta Figma. Acesse figma.com e, se você não tiver uma conta, clique em Cadastre-se e siga as instruções. Se você tem uma conta, então simplesmente vá em frente e faça login. passo número 3 é abrir o kit inicial ou o arquivo Figma inicial que eu forneci. Deixe-me mostrar-lhe o que isso parece. É um arquivo Figma relativamente branco com quatro páginas que eu fiz para você. A primeira página é o wireframe, e você pode usá-lo para verificar rapidamente o que você está fazendo. A segunda página é para cores, e mostrarei como editar isso assim que chegarmos à próxima lição. terceira página é para tipografia, e eu fui em frente e criei esses quadros para você saber o que você precisa preencher, e então nós temos uma página para o design principal. Aqui é onde vamos criar o design real para a página de destino. Vá em frente e abra este arquivo e você pode começar a trabalhar diretamente nele. Agora o quarto e último passo é realmente opcional, você pode baixar Figma para a área de trabalho. Como você pode ver agora, eu tenho Figma aberto no navegador e você pode trabalhar assim, sem problema, o resultado é exatamente o mesmo. Mas se é mais confortável para você, você pode baixar Figma para desktop. Você pode fazer isso acessando figma.com/downloads e, em Desktop App, escolha o que deseja para Mac OS ou Windows. Depois de fazer tudo isso, você está pronto para ir. Agora, você pode estar me perguntando, Adi, por que este projeto, por que uma página de destino? A resposta para isso é muito simples. Para esta aula, eu queria que você aprendesse, número 1, como trabalhar na Figma, e número 2, o processo de passar de uma solicitação de cliente para um produto acabado. Uma página de destino é bem simples. É apenas uma página, você não precisa se preocupar com elementos complexos que você normalmente encontraria em um site, e é rápido e fácil de fazer. Eu queria que este projeto se assemelhasse a um cenário da vida real. Você começa a partir de um resumo de projeto, você começa a partir de um conjunto de wireframes, essas são coisas que você normalmente obteria ou que você normalmente usaria quando você está interagindo com seu cliente. Os clientes fornecem todas as informações que você precisa no resumo do projeto, e com base nisso, você constrói o wireframe e com base no wireframe, você cria a página real. Este é o mais próximo de um projeto da vida real que você pode obter em uma classe como esta. Esperemos que você possa usar as informações que aprendeu aqui e aplicá-las em projetos futuros. Agora, como você está fazendo essa aula, eu recomendo fortemente que você poste seus resultados na galeria do projeto. Quero ver o seu resultado. Quero ver os projetos que você está fazendo. Como eu estava dizendo, eu gostaria que você experimentasse e adicionasse sua própria rotação sobre as coisas. Tudo bem se você seguir exatamente o que eu faço, vá em frente e poste isso. Mas se você quiser, fique à vontade para adicionar suas próprias cores, suas próprias fontes, deixe-me ver sua própria visão para criar esta página de destino com base nesse wireframe. Então vá em frente e poste isso na galeria do projeto e eu lhe darei feedback se você quiser. Eu adoraria ver seus resultados. Também poste na aba de discussão se você tiver alguma dúvida ou comentário, não importa o quão simples você acha que eles podem ser, se há algo que você quer me perguntar, vá em frente e faça isso. Responderei a cada uma de suas perguntas. Tudo bem. Aqui está o que você precisa fazer neste momento. Vá em frente e prepare-se, como te mostrei antes. Baixe os kits iniciais, crie uma conta Figma, abra o arquivo Figma inicial e também instale opcionalmente o Figma no seu computador. Uma vez que você fizer isso, você estará pronto para ir para as lições principais. Na primeira lição principal, será a descoberta do esquema de cores. Vou mostrar-vos algumas ferramentas que vos ajudarão com isso. Isso está chegando a seguir. 3. Esquema de cores: Bem-vindos de volta à aula. Nesta lição, criaremos o esquema de cores para nossa página de aprendizado. Agora, este é um passo crucial em qualquer processo de design, então precisamos prestar muita atenção a ele. Há também um par de ferramentas que eu uso o tempo todo para simplificar esta parte e eu vou mostrar-lhe essas ferramentas também. Pronta? Vamos lá. Vamos começar abrindo nosso kit inicial em Figma e indo para a guia de cores, página de cores. Bem aqui, você pode ver que eu criei para você quatro quadros. Se você não sabe o que são quadros, bem, isso é basicamente um quadro. É uma forma de organizar o conteúdo no Canvas. Mas vamos falar sobre quadros em apenas um pouco agora vamos nos concentrar nas cores. Sempre que você está começando um projeto como este. Eu recomendo que você divida suas cores nessas quatro categorias, primária, secundária, terciária e cinza. As cores primárias serão as que você mais usa, e geralmente você as usaria para botões ou links. As cores secundárias são geralmente para certos atos e peças, e elas devem trabalhar harmoniosamente com as cores primárias. As cores terciárias são aquelas que não são muito proeminentes. Você os usaria talvez uma vez em uma página ou em certas situações como coloração contextual para um estado de entrada, erro, sucesso, informação, coisas assim. No nosso caso, usaremos as cores terciárias, principalmente para ícones. Então, finalmente, os cinzentos são usados principalmente no texto. Mas você pode usá-los em outros elementos em sua página também. Como talvez alguns ícones, divisores, e assim por diante. O que eu tenho aqui é uma coleção de 10 desses quadrados em cada categoria, e cada um é mais leve em 10% do que o anterior. Essencialmente, temos a cor principal e nove matizes. Se você não sabe o que é uma tonalidade, bem, é muito simples. Quando você mistura uma cor com branco, você obtém uma tonalidade dessa cor. Quando você mistura uma cor com preto, você obtém um tom dessa cor. Uma sombra é, portanto, uma versão mais escura de uma cor, uma tonalidade é uma versão mais clara da cor. Eu sempre recomendo ao definir um esquema de cores que você crie essas tonalidades. Você também pode criar tons se você quiser, mas eu geralmente apenas criar tons porque ele me dá opções. Quando eu estou escolhendo uma cor para o nosso design, eu poderia olhar para a cor principal e dizer, ok isso é um pouco intenso demais para mim talvez eu vou usar uma tonalidade dele. Talvez em algum lugar desta área ou desta área. Mas a idéia é, eu posso vê-los e eu posso decidir qual deles funciona melhor naquele momento. Como escolhemos as cores? Bem, geralmente tudo começa com a marca. Quais cores a marca que você está projetando para usar? No nosso caso, sob ativos de marca, podemos encontrar este logotipo colorido. Isso torna muito fácil para nós porque eu posso definir duas cores primárias a partir daqui. Posso definir como azul e posso definir como roxo. O que eu vou fazer é trazer este arquivo SVG em Figma simplesmente arrastando e soltando e você pode ver que selecionando qualquer um desses componentes, sob preenchimento, vamos encontrar um gradiente linear. Clique nisso, e isso nos dará nossas duas cores. Vamos clicar neste, vamos copiar o seu valor hexadecimal. Esta é uma representação dessa cor e, vamos selecionar esse quadro inteiro, esse grupo de elementos e onde diz cores de seleção, clique e cole. Esta é uma das características mais impressionantes de Figma. Em vez de selecionar cada elemento individualmente e alterar sua cor, quando você está selecionando mais de um elemento, ele ativa essa seção chamada cores de seleção. Você pode mudar as cores individualmente lá, ou no meu caso, porque eu estava usando a mesma cor, preto antes, minha seleção apenas me mostrou essa cor preta e mudando isso, mudou a cor de cada elemento neste grupo. Não se preocupe se isso parecer um pouco estranho, vou contar mais sobre isso enquanto estamos progredindo nesta aula. Agora você pode ver que definimos a primeira cor primária, que é este azul. Vamos definir o segundo. Vamos voltar para Linear, vamos selecionar este elemento, copiar e, em seguida, vamos selecionar este quadro que você pode ver aqui. Podemos fazer uma de duas coisas, podemos duplicá-la pressionando o comando ou controle D. Comando D se você estiver em um Mac ou controle D se você estiver no Windows e isso vai duplicá-lo, ele vai fazer uma cópia dele. Alternativamente, você pode selecioná-lo e ir para o menu Figma editar, duplicar. Vai fazer exatamente a mesma coisa. Ou você pode simplesmente copiar e colar como faria normalmente. Vamos dar um pouco de espaço aqui. Então eu vou selecionar este grupo e eu vou colar em seguida, a outra cor e agora eu posso me livrar deste logotipo. Muito legal e assim, definimos as duas cores primárias que usaremos. Agora, e as cores secundárias. Vamos mover isso um pouco para cima. Para as cores secundárias, aqui está o que eu costumo fazer. Seleciono ou copio o valor da minha cor primária e, em seguida, vou para Adobe Color. Esta é uma ferramenta que eu uso o tempo todo e Adobe Color é uma ferramenta gratuita, e me dá a opção de criar um esquema de cores baseado em uma cor. Na guia Recreate, vá em frente e cole esse valor e, em seguida, do lado esquerdo, aplique uma Regra de Harmonia. Isto é analógico, isto é monocromático, tríade e gratuito. Normalmente, eu uso esquemas de cores complementares porque assim como o nome diz, as cores nesta pelota se complementam, elas criam harmonia. Neste caso, a primeira cor secundária que vou usar é, esta cor de mostarda. Vou ir em frente e copiar isso. Eu vou voltar aqui, selecionar meu quadro, colá-los dessa cor e se eu não gostar do jeito que parece, isso é totalmente bom eu não tenho que usar exatamente a mesma cor. Eu posso usar isso como um guia e, em seguida, basta usar o controle deslizante para criar minha própria cor e apenas escolher um que eu acho que parece melhor. No meu caso, vou usar este FFC700. Agora eu também quero uma cor secundária adicional, então eu vou duplicar este bit e para esta cor, eu vou escolher F25C63. Agora vamos passar para as minhas cores terciárias. Vamos mover isso um pouco para cima. Vamos abrir espaço porque vamos criar um monte de cores terciárias. Para ser mais exato, vamos criar sete deles. Vamos duplicar isso 2,3,4,5,6,7 usando o mesmo comando de atalho de teclado D porque eu estou em um Mac e agora, eu vou apenas preenchê-los com as cores que eu escolhi. O primeiro é 00DAA7. O próximo é 37c2cc. O próximo é 3a96e8. O quarto é 64C9FF. O quinto será 9E76FE. Então o número 6 vai ser CC37BD. E então o último será FFCA64. Tudo bem. Estas são as cores terciárias que vamos usar. Agora, você pode me perguntar, onde você conseguiu todas essas cores? Bem, é apenas uma questão de abrir o seletor de cores e usar os controles deslizantes aqui para determinar a cor que eu gosto. E eu acabei de passar por tudo isso e eu apenas escolhi um que eu pensei que seria melhor para este projeto. Alternativamente, aqui está outra ferramenta que eu uso e eu acho que é muito útil. Chama-se Dribbble Color. E eu tenho certeza que você está bem ciente de Dribbble, o site onde você pode encontrar inspiração para o design. Bem, agora você pode procurar por cores, certo? Você pode escolher entre uma dessas cores predefinidas, ou simplesmente inserir seu próprio valor. E ele vai lhe dar uma lista de resultados que estão usando essa cor. E quando você abre uma dessas fotos Dribbble, você também pode encontrar a paleta de cores que foi usada. Eu costumo ir aqui e obter inspiração para as cores. Ou eu vou para o site da Adobe Color e eu apenas aperto explorar e eu olho para as paletas de cores deste site ou eu apenas escolhê-los à mão. Agora, a razão pela qual eu fui para tantas cores é algo que eu li no resumo do projeto. O cliente, logo no final, sob considerações de design, nos disse que deveríamos torná-lo colorido. E também, o esquema de cores principal deve ser centrado em torno da cor azul porque transmite confiança e profissionalismo. E eles também nos deram outra opção aqui, grama verde para frescura e novidade. Mas a idéia principal é centralizar o esquema de cores em torno de azul e também torná-lo colorido. Essa é a razão pela qual procuramos tantas cores terciárias porque queremos opções. Finalmente, o último passo que temos de abordar aqui é definir os cinzentos. E estes serão usados principalmente para texto. E é aqui que ter vários matizes da cor cinza principal é muito útil porque você pode usar esse bit para os cabeçalhos principais. E você pode usar esse bit que é 70 por cento, ou este que é 80 por cento para o texto principal. Agora, ao escolher uma cor cinza, aqui está o meu processo muito simples. Eu só crio esta forma aqui, e eu escolho a cor da minha marca principal. Eu colo isso, e então eu duplico esta forma e eu encho com preto. E então eu apenas abaixo a opacidade nessa cor preta para digamos 90%. E eu não tenho certeza se você vê, mas agora não é totalmente preto. Parte daquela cor azul de baixo vem através. Agora o que eu faço é criar outra forma. E eu uso o seletor de cores para provar essa cor. E isso dá-me o meu cinzento principal. E se eu não gostar da aparência, posso voltar, mudar a opacidade do preto. E isso é um pouco demais, talvez 88%, ou talvez eu quisesse ser um pouco mais escuro, talvez 95%. E então eu posso ir em frente e eu posso provar isso novamente e escolher minha cor cinza. Agora, eu costumo passar um pouco de tempo neste processo até obter a cor exata que eu quero. No meu caso, seria em algum lugar por perto, eu acho que esta área. A cor cinza final que vamos usar é 030F1A. Agora podemos excluir isso e podemos colar em nossa cor aqui. E isso nos deu o cinza principal e as nove tonalidades que agora podemos usar em nosso design. Alternativamente, se você está olhando para criar tons e tons, a maneira mais fácil, deixe-me mostrar-lhe uma ferramenta muito agradável para fazer isso. Chama-se Tint and Shade Generator. Podemos encontrá-lo em maketintsandshades.com. E o que você faz basicamente, vamos dar isso como um exemplo, você seleciona sua cor principal, você cola isso e você bate fazer tons e tons. E isso dá as sombras na parte superior e as tonalidades na parte inferior, juntamente com o código hexadecimal para cada valor. E a qualquer momento você pode pairar sobre um deles. Copiar. E esse valor agora é copiado para a área de transferência e você pode usá-lo onde quiser. Ou se você tem uma configuração como esta, você apenas define uma opacidade diferente em cada camada e você obterá relativamente o mesmo resultado. E com isso, o esquema de cores está completo. Tudo bem. Agora é a sua vez de se ocupar. Se você seguiu e trabalhou ao meu lado, então seu esquema de cores está completo. Ótima. Se não, vá em frente e faça isso agora. Use os modelos que lhe dei no Figma e também as ferramentas que mostrei para criar seu próprio esquema de cores. Você não tem que usar exatamente os mesmos valores que eu usei. Vá em frente e experimente. Essa é a melhor maneira de aprender. Use as cores que você se sentir melhor. Agora, uma vez que você faça isso, você está pronto para passar para a próxima lição, que é sobre tipografia. Este é mais um passo crucial no processo de design. E vamos abordar isso na próxima lição. Te vejo lá. 4. tipografia: Bem-vindos de volta à aula. Nesta lição, vamos abordar a tipografia da nossa página de aprendizagem. Agora, o que isso significa? Bem, isso significa escolher as fontes certas e todas as outras propriedades de texto para garantir que tudo pareça agradável e limpo. Isso significa tamanhos de fonte, alturas de linha, pesos de fonte, e assim por diante e assim por diante. Eu também vou estar mostrando algumas ferramentas muito úteis que vão tornar seu trabalho muito mais fácil, e nós também vamos discutir escalas tipográficas, e eu vou dar a vocês uma introdução ao sistema de grade de oito pontos que usaremos durante todo este processo de design. Vamos começar. Começamos aqui no arquivo Figma inicial em Tipografia, onde criei alguns quadros, para definir tipos de letra, a escala de texto, os estilos de cabeçalho, o estilo para as aspas de bloco e os parágrafos. Isso é o suficiente para você ir. Vamos passar para definir os títulos. Para fazer isso, vamos começar por dar uma olhada no resumo do projeto. Logo no final, sob considerações de design, o cliente nos pede para tornar a página de destino moderna, profissional, mas divertida. Como isso se traduz para a tipografia? Bem, a parte divertida, podemos realmente obter das cores. Quando o tornamos colorido, tornamo-lo brincalhão. Mas esta parte, torná-lo moderno e profissional. Podemos fazer isso com a ajuda da tipografia. Ao iniciar um projeto como este, é sempre uma boa idéia visitar os sites que você usa para obter seus arquivos de fonte. Há muitos deles. Eu uso dois deles, principalmente Adobe Fonts e Google Fonts. Agora, o Google Fonts é gratuito e o Adobe Fonts, bem, você precisa ter uma assinatura da Adobe para ter acesso a eles. Mas vou dizer isso, Adobe tem tipos de letra de qualidade muito maior do que o Google. Você ainda pode encontrar grandes fontes aqui, mas geralmente eu alcanço o Adobe Fonts, porque eles são apenas um pouco mais refinados, e a coleção aqui é realmente muito maior do que o que você encontraria no Google Fonts. Como eu tenho uma assinatura da Adobe, faz sentido usar suas fontes. Agora, porque o cliente nos pediu para fazer a página de destino parecer moderna, vamos usar um tipo sem serif. O que é um tipo de letra sans serif? Bem, deixe-me dar-lhe um exemplo. Vou abrir o Roboto aqui. Na verdade, eu só vou fazer isso muito grande para que você possa ver a diferença. Um sans serif é um tipo de letra que não tem serifas nas letras. Acho que deveria começar com um tipo serif, para que você possa ver a diferença. Este é um tipo de letra Serif. Vê estas decorações aqui, e também aqui, e também aqui? Estes são chamados serifas. serifas são geralmente encontradas em tipos de letra mais antigos. Os tipos de letra mais modernos são sem serif ou sem serif. Assim como este. Veja aqui, nós não temos mais essas decorações. Não podemos encontrá-los aqui, aqui ou aqui. Estes são mais limpos e modernos. Agora, eu não vou passar por serif versus sans serif nesta classe, isso está além do escopo. Mas se em algum momento um cliente perguntar : “Ok, queremos um site moderno.” Então, no que diz respeito à tipografia, você precisa usar fontes sans serif. Agora, no meu caso, depois de investigar um pouco o Adobe Fonts, eu me contentei com Brandon Grotesque. Este é um tipo de letra que se encaixa em ambos os critérios, é moderno, é sem serif, e também é muito profissional, e também tem todos esses estilos. Temos estilos ou pesos que variam de fino a leve, regular a preto. Este é o que vamos usar para os títulos e alguns dos outros elementos. Agora, quando se trata do corpo do texto, vamos usar Tisa Sans Pro ou FF Tisa Sans como é chamado aqui.This é um tipo de letra que é semelhante a Brandon Grotesque, mas obviamente tem suas próprias diferenças. Eu estou usando dois tipos de letra porque enquanto Brandon Grotesque é ótimo para cabeçalhos, isso é grandes e grandes tamanhos de fonte. Ele não faz muito bem no corpo de texto menor. Por isso estou usando FF Tisa Sans ou Tisa Sans Pro. Isso funcionará muito bem em tamanhos de texto menores, como por exemplo 18, quando estamos fazendo o corpo do texto, isso funcionará lindamente. Agora, estas são as minhas escolhas. Suas escolhas podem variar e eu sugiro fortemente que você investigue um pouco no Adobe Fonts ou no Google Fonts, e encontre o tipo de letra que você acha melhor, e vá em frente e use-os. No meu caso, tenho ambas as fontes instaladas no meu sistema. Tudo o que tenho que fazer agora é entrar aqui em Figma e referi-los. Eu vou dizer Brandon Grotesque, e eu vou para aqui sob texto, e eu vou selecionar Brandon Grotesque. Vamos deixar isso em negrito, e vamos usar um tamanho de fonte maior, talvez 55. O que costumo fazer, e deixa-me tirar isto do caminho. Eu normalmente duplico esses valores e eu apenas realço ou apresento todos os pesos para este tipo de letra. Isto é normal, isto é médio, ousado, e este é preto. Isso só me dá uma idéia de como o tipo parece sem ter que mudar um pedaço de texto manualmente. Por exemplo, se eu estou no design principal, eu posso apenas entrar em tipografia e eu posso dizer, ok, então esta é a versão mais leve dele, ou é assim que a versão mais pesada dele se parece. Vamos em frente e fazer o mesmo para os textos corporais, estamos usando Tisa Sans Pro, e eu vou fazer exatamente o mesmo aqui. Isso tem um par de versões também. A partir de fino, leve, ou realmente estes são prejudicados maneira ao redor, regular e, em seguida, médio, negrito, extra negrito, e preto. Tudo bem. Agora temos os nossos tipos de letra prontos. By the way, para ampliar assim, você pode manter o comando no Mac e apenas usar a roda de rolagem para ampliar e reduzir, ou no Windows, você pode usar o controle e a roda do mouse para fazer a mesma coisa. Já que estamos no tópico de ampliar e reduzir, deixe-me mostrar dois outros atalhos de teclado que uso o tempo todo. Shift zero sempre ampliará para 100%, independentemente do Mac ou do Windows. Shift 1 irá aplicar zoom para caber, então ele vai pegar todos os seus quadros e vai encaixá-los na parte visível da sua tela de desenho. Se você selecionar um elemento ou um quadro e pressionar Shift 2, ele aumentará para a seleção. Estes são três atalhos de teclado que eu uso o tempo todo. Novamente, Shift 0 irá ampliar para 100%, Shift 1 zoom para ajustar, Shift 2 zoom para seleção. Manter pressionado o Command no Mac ou o controle no Windows basicamente permitirá que você use a roda de rolagem para ampliar e reduzir o zoom. Muito legal. Agora, vamos passar para a escala de tipos. Agora, o que é uma escala tipográfica? Bem, a maneira mais fácil de explicar é mostrar-lhe. Aqui temos um site que eu uso o tempo todo é chamado types-cale.com, e aqui o que você faz é basicamente você definir o tamanho da fonte base. Você seleciona uma escala e isso lhe dará uma lista de tamanhos de fonte que você precisa usar para criar essa escala harmoniosa. Se eu mudasse a proporção aqui, você verá que a escala também muda. Usando esta ferramenta, você pode dizer, “Ok, isso é o que eu vou usar para o título um, rumo dois, três, quatro, cinco e seis. Isto é o que eu uso para texto menor. Usando esta ferramenta, eu me certifico de que minha tipografia é sempre perfeita porque sem ela, você realmente não sabe que tipo de tamanho de fonte usar. Quero dizer, você começa com, digamos, o tamanho da fonte base para o corpo do texto, que geralmente é 16 pixels. Mas e depois disso? O que você usa para o H1 ou o H3? Você usa 20 pixels, ou usa 21 pixels? Ou talvez use o que achar melhor? Isso pode funcionar, mas ter uma ferramenta como essa que diz exatamente que tipo de, ou quais tamanhos de fonte usar com base em uma escala é fundamental. A maneira como isso funciona é realmente muito simples. Deixe-me abrir uma calculadora e explicar o princípio por trás disso. base de escala de tipos funciona com base em uma proporção. Começamos com o valor base, que é 16 pixels. Esse valor base, multiplicamos pela escala, que no nosso caso é 1.414, e isso nos dá o resultado, 22.624. Agora, para o próximo item na escala, tomamos esse valor, 22.624 ou 22.62. Podemos usar duas casas decimais e dividi-lo, ou multiplicá-lo com a mesma proporção, 1.414 e isso nos dará o próximo valor. No nosso caso, eu realmente usei o separador errado aqui. No nosso caso é 31.98 e você faz isso uma e outra vez até obter todos os valores para o resto de seus elementos de texto. Agora, a vantagem de usar uma ferramenta como Type Scale é que você não precisa fazer esses cálculos manualmente. Ele faz isso para você, e ele faz isso em M, bem como em pixels. Agora, porque eu estou usando Figma, Eu tenho um plugin útil que gera escalas de tipo para mim e esse plugin é chamado Font Scale. Se você quiser instalá-lo, você simplesmente precisa ir para Plugins, Gerenciar Plugin e, em seguida, procurar por Font Scale e instalá-lo. É muito, muito simples. Agora, para usar este Plugin, você digitar os tamanhos de fonte base, no meu caso vai ser 18 e escolher o fator de escala no meu caso vai ser terceiro maior e, em seguida, gerar camadas. Isso gerou essas camadas e pode realmente colá-las aqui. Como você pode ver, isso fornece elementos de texto que têm os tamanhos de fonte corretos. É exatamente o mesmo que ir aqui e dizer, “Ok, eu quero usar 18 pixels e 1.250 ou terceiro maior.” Isso vai lhe dar exatamente o mesmo resultado, a diferença é, em Figma você tem essas camadas e você pode referenciá-las a qualquer momento que quiser. Vamos selecionar tudo isso e mudar o tipo de letra para Brandon Grotesque, lá vamos nós. Agora, eu também vou adicionar outro elemento aqui porque eu quero este valor final de 55 pixels. Agora o que eu vou fazer, eu vou passar por cada um e eu vou arredondar o tamanho da fonte. Isto é 43.95, vamos fazer 44, isto é 35, isto é 28, isto é 22.5. Posso ir 22 ou 23. Vamos com 23. Isto é 18, e isto é 14.4, mas vamos usar 14. Agora, uma vez que temos a escala tipográfica no lugar, vamos fazer um pouco de simulação para os estilos de cabeçalho. Vamos dizer o título um e então, vamos multiplicar isso para criar títulos de um a seis. Também vamos fazer um pequeno elemento aqui. Todos eles usarão Brandon Grotesque e os títulos de um a três, vamos torná-los ousados. Dirigido cinco, provavelmente vamos fazer este meio. O número seis vai ser regular e o pequeno vai usar maiúsculas. Você pode abrir esses detalhes avançados do tipo clicando neste pequeno botão aqui e escolhendo maiúsculas e isso será definido como 14 pixels. Vamos fazer 5% de espaçamento de letras, vai ser negrito e devemos ser bons para ir lá. Agora, vamos definir os estilos ou o estilo para os outros títulos. Temos rumo um. Isso vai ser 55 pixels, porque 55 é o tamanho da fonte deste elemento de nossa Escala de Tipo. Dirigido dois, vamos usar 44, rumo três, vamos usar 35. Então teremos 28 para o título quatro, 23 para o título cinco e, em seguida, para o título seis, vamos usar 18, que é o tamanho da fonte base. Ao fazer isso, basicamente encontramos os tamanhos de fonte para todos os nossos cabeçalhos com base nesta escala de tipo. Muito legal e muito, muito fácil. Vamos em frente e mover isso. Já que estamos no tema de definir estilos, vamos definir um estilo para as aspas de blocos e aqui vamos usar também Brandon Grotesque e vamos usar o tamanho da fonte de 35 pixels. Vamos tirar isso do caminho e, finalmente, vamos definir um estilo para os parágrafos. Estes usarão Tisa Sans Pro, regular, 18 pixels. Agora, a nossa tipografia está muito bem configurada. A última coisa que temos que fazer é definir as alturas de linha adequadas. Agora, para fazer isso, vamos trabalhar com o sistema de grade de oito pontos. Deixe-me falar um pouco sobre isso. Há um ótimo artigo que liguei nos recursos, arquivo P-D-F. Vá em frente e confira isso. Isso realmente explica por que é benéfico usar o sistema de grade de oito pontos em web design. Essencialmente, o que estamos tentando fazer é alcançar um ritmo vertical consistente. Portanto, qualquer medida ou distância, qualquer margem ou preenchimento que vamos aplicar, qualquer altura que vamos aplicar aos nossos elementos deve ser um múltiplo de oito. Isso também se aplica aos elementos de texto. O tamanho da fonte não precisa necessariamente ser um múltiplo de oito. O que importa é que a altura da linha é um múltiplo de oito porque a altura da linha dita a altura das linhas de texto e se houver múltiplos de oito, então tudo vai cair bem em uma grade de linha de base. Vou mostrar um pouco sobre isso quando adicionarmos mais elementos e seguirmos este sistema de grade de oito pontos. Mas, por enquanto, o que você deve saber é que quando se trata de tipografia, vamos definir a altura da linha dos elementos de texto para ser um múltiplo de oito. Vamos em frente e fazer isso agora. cabeçalho um tem uma altura de linha que deve ser em torno de 79 pixels. Isso é calculado automaticamente pelo Figma, então eu vou configurá-lo para 80 pixels. cabeçalho dois deve ser em torno de 63, ou o próximo, ou o múltiplo mais próximo de oito é 64. Então vamos fazer isso. A direção três é 50. Aqui, podemos ir ou 48, que é um múltiplo de oito, ou podemos ir com 56. Vamos fazer isso com 56. direção quatro é 40, então está no ponto. direção cinco é 36 e podemos ir com 40 ou 32. Então vamos ao 32. A direção seis é 18. Podemos ir 24 aqui e este, podemos ir 24 também. Essa é a altura da linha definida para os cabeçalhos. Agora, para as aspas de blocos, vamos ver 35, vamos usar 56 porque isso é o que usamos aqui também. Mas se você acha que isso é demais e agora que eu realmente vejo, eu posso voltar para 48. Acho que parece um pouco melhor. Então vamos fazer isso aqui também, 48. By the way, estes não são finais, nós sempre podemos alterá-los, se você chegar ao ponto de design e você descobrir que isso realmente não funciona muito bem. Você sempre pode voltar a isso e mudar. Não é grande coisa. Parágrafos 18, vamos usar 24 como uma altura de linha e com isso, criamos as características de tipografia para nossa página de destino. Tudo bem, se você tem trabalhado ao meu lado, então você deveria ter a tipografia toda planejada. Se não, vá em frente e faça isso agora e assim como com cores, experimente um pouco, você não precisa usar os mesmos tipos de letra que eu uso ou a mesma escala que eu fiz. Escolha uma fonte ou escolha as duas fontes que você acha que funcionam melhor para este tipo de produto ou para este tipo de projeto. Não importa se é um tipo de letra grátis ou pago. Se você acha que parece bom, vá em frente e use-o. Além disso, você não precisa usar a mesma escala de 1,25 que eu usei. Brincar com eles. Escolha um que você acha que parece melhor e ao escolher as diferentes proporções, observe como estas afetam a composição geral desses elementos de texto. Veja como isso altera a hierarquia visual. Na página, você verá que quanto menor a proporção, menor será a diferença entre cada passo na escala. Quanto maior a razão, maior a diferença entre cada passo na escala. Por exemplo, se você estiver usando uma proporção dourada, verá que há uma diferença dramática entre os tamanhos de fonte menores e os tamanhos de fonte maiores. Cada escala de tipo, cada proporção tem seu lugar para coisas diferentes. Você usaria taxas menores para blogs talvez, ou talvez para um painel onde você não precisa de uma diferença tão grande entre tamanhos de fonte e você usaria algo como a proporção dourada quando você quer fazer uma declaração, quando você tem um site com grande tipografia ousada. Quando você tem uma grande diferença entre o corpo do texto e o título maior. Então brinque com eles, e quando terminar, você estará pronto para passar para a próxima lição, que é sobre imagens e outros recursos visuais, como ícones. Agora, vamos usar algumas imagens de espaço reservado e mesmo que estas não sejam finais, pelo menos, elas nos dão um ponto de partida. Isso está chegando na próxima lição. Te vejo lá. 5. Imagens e outros ativos: Bem-vindos de volta à aula. Nesta lição, vamos nos familiarizar com as imagens e os ícones que usaremos para este design. É sempre uma boa idéia prepará-los antes de iniciar o processo de design real, porque ele só vai tornar as coisas mais fáceis para você. Claro, você pode mudá-los mais tarde, mas pelo menos você tem um ponto de partida. Então eu vou mostrar a vocês quais imagens e ícones vamos usar. Também vou compartilhar alguns recursos que você pode usar para facilitar todo esse processo. Vamos começar. Tudo bem, para as imagens, como eu mostrei, nós temos os logotipos, os logotipos da marca. Você pode encontrar um link no arquivo PDF de recursos para este logotipo exato, e você pode baixá-lo. Agora, para as imagens de espaço reservado, obtive essas imagens de um kit de interface do usuário, um kit de interface do usuário financeiro. Deixe-me fazer isso um pouco menor para que você possa vê-los melhor. Como estamos trabalhando com um projeto fictício, não temos capturas de tela ou imagens do produto real. Então vamos usar essas imagens de demonstração e, na verdade, deixe-me mostrar onde você pode obter isso. Isso é chamado de Free Finance UI Kit. Você pode encontrá-lo no Behance, e é aqui que ele também pode baixá-lo. Acho que foi um esboço, sim. Então é um arquivo de desenho. Apenas no caso de você não ter o esboço instalado, eu fui em frente e exportei essas imagens JPEG para você, então você pode usá-las imediatamente em seu design. Agora, em cima desses, também temos esses renderizadores de dispositivos. Isto é para um iPad Pro, e este é para um iPhone 7, e também vamos usá-los em nossos designs. Estes são arquivos PNG e eu os exportei dos arquivos do Photoshop que podem ser baixados daqui. Estes também estão vinculados no arquivo PDF a propósito. Estes são recursos gratuitos da Pixeden. Este é um Psd iPhone 7 Pro Mockup, e este é um iPhone 7 Mockup. Estes são todos vetores, eles estão no Photoshop, e eles têm esse objeto inteligente como tela. Você pode clicar duas vezes nisso e colocar qualquer imagem ou imagem que quiser, assim como eu fiz. Observe, eu tenho uma dessas outras imagens dentro da tela do telefone e o mesmo vale para este iPad. Então estas são as imagens de espaço reservado que vamos usar. Agora, se você está apenas procurando algumas imagens de espaço reservado, um recurso que eu uso o tempo todo é Unsplash. Basta procurar uma foto, como, por exemplo, o iPhone. Isso lhe dá uma lista de imagens que correspondem aos critérios de pesquisa. Estas são imagens gratuitas que você pode usá-los em qualquer lugar, grande recurso. Agora, quando se trata de ícones, existem tantos sites por aí, que permitem que você baixe cargas e montes de conjuntos de ícones. Uma opção que eu vou o tempo todo é Iconfinder. Você pode encontrar conjuntos de ícones gratuitos premium e você pode baixar ícones individuais também. Aqui você simplesmente procura casa, e você pode pesquisar por estilo. Você pode encontrar ícones gratuitos apenas e você pode clicar em qualquer um deles e baixá-lo como um PNG, SVG ou outros formatos, depende do conjunto de ícones. Assim, você pode obter conjuntos de ícones a partir daqui. Mas para esta demonstração em particular, vamos usar alguns ícones deste conjunto de ícones. Chama-se micons. Isto é feito por um colega romeno chamado Cosmic Negoita. Este é um grande ícones que eu usá-lo em um monte de meus projetos. Outro conjunto de ícones que usaremos é chamado Ionicon. Isto é novamente, Eu realmente amo este conjunto de ícones. Eu uso o tempo todo, eu realmente gosto e eu posso recomendá-lo fortemente para você também. Agora, com qualquer um desses conjuntos, você pode simplesmente baixá-los. Ele vai lhe dar um arquivo, e você provavelmente tem arquivos SVG e PNG. Mas o que eu gosto de fazer, é usar um aplicativo chamado Iconset. Este é um aplicativo gratuito, é multi-plataforma e funciona tanto no Mac OS e Windows; Parece algo parecido com isso. Você pode criar conjuntos de ícones aqui e importá-los do seu disco rígido. Como podem ver, tenho os dois conjuntos que vamos usar carregados aqui. Você pode ver todos os ícones, você pode procurar por um ícone específico, e uma vez que você encontrá-lo, é realmente simples. Basta clicar com o botão direito do mouse, você pode copiá-lo e, em seguida, você pode ir para Figma ou qualquer software de design que você está usando e simplesmente colar isso. Ou você pode clicar e arrastar, que vai fazer exatamente a mesma coisa. Então estas são as ferramentas que eu recomendo que você obtenha. Mas se você não quiser instalar mais nada em seu computador, tudo bem. Vamos dizer que queremos baixar este conjunto ionicon. Ele vai baixar um arquivo, e uma vez que você descompacte isso, ele apenas lhe dá esta lista de arquivos SVG. Você pode simplesmente pegar o arquivo que você quer e arrastar e soltar em Figma, e você está pronto para ir. Neste ponto você deve ter as imagens e ícones todos prontos para ir. Como estamos trabalhando para um produto fictício, estamos obviamente usando algumas imagens de espaço reservado. Mas lembre-se que em um projeto real você usaria imagens que são relevantes para esse produto específico. Sinta-se livre para usar as imagens que eu forneci ou baixar as suas próprias. Se você acha que pode encontrar imagens ou ícones que funcionam melhor para o seu design, por todos os meios, vá em frente e faça isso. Eu adoraria ver resultados diferentes na galeria do projeto. Agora, supondo que você tenha tudo configurado e que inclui cor, tipografia e imagens, estamos prontos para passar para o design real da página. Estas páginas de aprendizagem estão divididas em várias seções, e vamos abordar uma seção de cada vez no restante desta aula. Vamos começar com a seção de heróis, e isso está chegando na próxima lição. Vejo você lá. 6. Cabeçalho e fundo: Bem-vindos de volta à aula. Nesta lição, estamos começando o design da página real. Até agora temos estado a preparar, a preparar tudo, incluindo cores, imagens de tipografia. Agora estamos prontos para estabelecer os primeiros pixels. Agora vamos começar com a seção de heróis. Isto é bastante complexo e vamos dividi-lo em duas partes. Nesta parte, vamos adicionar a navegação do logotipo e também vamos criar um plano de fundo bonito para ele. Se você está pronto para ir, vamos começar. De volta à figma, vamos mudar para a página de design principal e vamos começar criando um quadro. Para fazer isso, podemos usar o atalho F para quadro e isso ativa esta barra lateral direita onde você pode escolher um tamanho de quadro predefinido. Isso vem em vários formatos que vão desde tamanhos de desktop até tamanhos de tablet e telefone. Você pode ver o tamanho em pixels aqui no lado direito. Ele também pode escolher entre alguns tamanhos comuns de papel e tamanhos de mídia social. Ou, se você quiser um tamanho personalizado, basta clicar e arrastar para criar o quadro para o tamanho desejado. Se você quiser mudar o tamanho depois, tudo o que você precisa fazer é selecionar o quadro da tela ou da lista de camadas e alterar as propriedades de largura e altura neste inspetor do lado direito. No meu caso, eu vou fazer este 1600 pixels de largura e cerca de 2000 pixels de altura. Em última análise, vai acabar muito maior e mais alto do que isto. Mas, como ponto de partida, isso é mais do que suficiente. Podemos clicar duas vezes aqui ou podemos clicar duas vezes aqui para renomear isso. Eu vou dizer Desktop. Agora vamos definir uma grade de coluna. Se você não está muito familiarizado com o uso de grades em web design, é muito simples. Uma grade de coluna é basicamente uma lista de colunas verticais que você pode usar para alinhar elementos ou elementos de tamanho. Então, se você está pensando em um layout de três colunas, é sobre alinhar o conteúdo a três colunas iguais nessa página. Deixa-me mostrar-te o que quero dizer. Em figma, é muito fácil adicionar uma grade de coluna. Basta selecionar o quadro desejado, entrar no inspetor e escolher a grade de layout. Basta clicar nele ou simplesmente clicar no sinal de mais. Faz exatamente a mesma coisa. A partir desta lista onde diz configurações de grade de layout, você pode escolher entre grade que é este, Colunas que é o que precisamos ou Linhas que é a mesma coisa, mas horizontal. Então nós vamos escolher Colunas e normalmente você iria para 12 colunas. Este é um número padrão porque 12 é facilmente divisível por 2,3,4 e 6. Em seguida, você definiria uma cor para esta grade. Você pode ir com qualquer cor que você quiser, mas torná-lo uma cor que vai deixar você saber que esta é realmente uma grade e não é parte do design real. Também pode mudar sua opacidade aqui. Em Tipo, nós escolheríamos Centro e, em seguida, definiríamos a largura de cada coluna, no meu caso, eu vou ir com 72. Sob Gutter, vamos escolher 32. A calha é basicamente a distância entre essas colunas. Agora, obviamente, sinta-se livre para usar qualquer tipo de propriedades de grade que você quiser. No meu caso, isto é o que vou usar. Agora, se em algum momento você deseja ocultar a grade, você pode clicar neste ícone de olho aqui ou se você quiser removê-lo completamente, podemos clicar no sinal de menos. Há também um atalho de teclado para ele, seu Controle G. Você pode alternar isso para ligar e desligar, mas você pode facilmente encontrar o atalho de teclado correto se você ir para o menu figma, Exibir, Layout Grades. Ele pode, obviamente, ativá-lo daqui e desligado. Assim, a grade de layout ou a grade de coluna agora é criada. Vamos seguir em frente. Para saber exatamente o que colocar nesta área de herói, vamos nos referir ao nosso Wireframe. Podemos mudar para essa página. A propósito, há uma maneira mais rápida de fazer isso. Você pode pressionar Page Up ou Page Down no teclado se tiver essas teclas para trocar entre páginas. Isso funciona no Windows e no Mac OS. É exatamente o mesmo atalho de teclado. Então, se formos para o Wireframe, podemos ver que a área do herói, que é este aqui tem o nosso cabeçalho que contém o logotipo e navegação. Em seguida, ele tem o conteúdo herói, que é composto por este objeto de mídia e título, legenda e chamada à ação. Agora esta parte vamos abordar na próxima lição. Então não vamos nos preocupar com isso agora. Mas nesta lição, nós vamos adicionar nossa navegação de logotipo e também vamos criar um plano de fundo bonito para esta área de herói. Então é assim que fazemos isso. Vamos começar com esse fundo. Vamos esconder essa grade porque não precisamos dela agora. Vamos começar com uma forma retangular para que pressione “R” ou você pode escolher a partir desta lista de ferramentas aqui e vamos simplesmente clicar na tela ou podemos clicar e arrastar e criar um de um tamanho personalizado. Então vamos fazer uma que seja da mesma largura que a nossa tela. Vamos empurrá-lo para cima e, em Preencher, vamos escolher um gradiente linear. Agora, para obter os valores de cor corretos, eu vou voltar para a guia Cor. Então eu vou pegar minha cor primária e colocá-la aqui. Vamos ver qual é, é este. Então para a outra cor eu vou escolher a minha segunda cor primária que é esta. Isso realmente precisa ser 100 por cento de opacidade. Agora, se você não estiver totalmente satisfeito com a aparência do gradiente, você pode realmente usar esses controles deslizantes para mover as paradas de cor para cima e para baixo, para a esquerda ou para a direita. Depende muito do seu ponto de vista aqui. Então, se você quiser mais desse roxo, você se moveria assim. Se você quiser mais do azul, você iria movê-lo assim. Se você quiser criar como um ângulo, você pode clicar nessas alças individuais e ele pode movê-los ao redor até chegar onde quiser. Então, no meu caso, acho que vou fazer algo assim. Isso deve ser muito forte por enquanto. Agora o que eu vou fazer é, eu vou selecionar este retângulo e eu vou girá-lo. Para fazer isso, você pode inserir um novo valor no campo de rotação aqui. Vamos com 16 graus. Tudo bem, isso é muito bom. Agora eu vou redimensionar isso para que ele preencha minha página completamente, assim. Eu também vou arredondar os cantos. Vou adicionar um grande raio de borda de 64 pixels. Agora, como você obtém esses valores , realmente não importa. No meu caso, estou usando o sistema de oito pontos. 16, 64, estes são todos múltiplos de oito. Não importa para o ritmo vertical, mas torna mais fácil para mim lembrar. Agora você pode mover isso para a esquerda e para a direita, cima e para baixo até encontrarmos uma posição adequada para isso. Você também pode ativar a grade de layout e alinhá-la à grade, se desejar. Então, no meu caso, vou deixar isso aí. Agora. Outra coisa que vou fazer é adicionar uma sombra a isto. Para isso selecione-o, vá para efeitos, clique, selecione sombra suspensa e selecione este ícone de sol. Para abrir as configurações. Para as configurações, vou selecionar 30 para desfoque, zero x 20 para y. Quanto à cor, bem, vou usar minha cor cinza principal. Copie daqui. Cole isso aqui e por uma opacidade, vou escolher 20 por cento. Agora, aqui vai uma dica profissional. Sempre que você estiver usando esses efeitos, ele pode realmente criar modelos para eles. Então, com o elemento selecionado, onde você teve o efeito, clique neste botão de estilo e clique no sinal de adição e basta digitar um nome. No meu caso, vou dizer sombra, criar estilo. Então o que isso faz é, se eu tiver outro elemento, por exemplo, e eu quero adicionar exatamente a mesma sombra. Eu posso selecionar isso, ir para efeitos e selecionar sombra suspensa. Agora tem exatamente o mesmo. Agora, se eu quiser mudar a sombra em ambos, eu posso clicar no ou fora de qualquer elemento e isso vai selecionar minha tela. Posso encontrar estilos locais aqui. Posso selecionar sombra, editar estilo e posso alterar suas propriedades aqui. Talvez eu queira uma cor diferente. Veja como ele muda em ambos os elementos?. Esse é o poder de trabalhar com estilos locais como estes. Torna estilos reutilizáveis muito eficazes. Agora você pode fazer o mesmo com gradientes, por exemplo. Onde diz preenchimento, talvez eu queira salvar este gradiente para uso posterior. Eu posso clicar na mesma cor ou no mesmo botão onde diz estilo e sob estilos de cores, eu vou bater mais. Vou digitar gradiente principal. Agora, vamos adicionar um pouco mais de interesse visual a esta seção. Vou selecionar isto, Comando D, para duplicá-lo. Vou mudar a rotação para 12 graus. Vou clicar com o botão direito do mouse e selecionar Enviar para trás. Isso vai colocá-lo atrás da minha camada principal. Só vou ajustar um pouco o seu posicionamento. Algo assim. Talvez empurrá-lo um pouco para baixo também. Vou mudar a sua capacidade global para 30%. Agora, eu quero mostrar alguns truques legais aqui. Quando você tem um elemento selecionado, você pode pressionar qualquer número entre um e zero para alterar sua opacidade. Então, se eu pressionar um, ele está definindo sua opacidade de 10 por cento para 20 por cento, 3,4,5,6,7,8,9 e zero muda para um 100 por cento. Agora, se você fizer esses números em rápida sucessão, por exemplo, três quatro. Isso altera a capacidade para 34. Aqui está outro exemplo, 12, 76, 32. Se eu fizer, três e dois, ele muda sua opacidade para 30 por cento e depois 20 por cento. Então, no meu caso, vamos deixar isso em 30%. Agora, vamos fazer isso de novo. Vamos duplicar. Esta seção principal. Vamos mudar sua rotação para 26 graus. Vamos colocar tudo isso lá atrás. Para fazer isso, você pode clicar com o botão direito do mouse e selecionar enviar para trás. Em seguida, novamente, clique com o botão direito do mouse em Ou ele pode fazer tudo de uma vez selecionando enviar para trás. Isso vai colocar tudo na parte de trás. Como alternativa, você pode simplesmente clicar e arrastar o retângulo do painel Camadas. Para esta parte, vou mudar sua opacidade para 10 por cento. Vou movê-lo para a esquerda e para a direita, até encontrar uma posição adequada para isso. Acho que parece muito bom. Agora aqui vai outra dica. Ele pode usar as teclas de seta no teclado para mover elementos. Para cima, para baixo, move esse elemento um pixel de cada vez. Esquerda, direita, faz a mesma coisa. Mas se você segurar Shift enquanto faz isso, ele vai movê-lo 10 pixels de cada vez. Esta é uma maneira muito rápida de mover objetos em sua tela sem usar o mouse. Isso parece muito bom. Agora, para terminar isso, vamos fazer isso. Vamos duplicar isso mais uma vez. Vamos mudar esta rotação para 26. Mas desta vez vamos movê-lo para dentro, para um lugar como este. Acho que parece muito bom. Agora sob preenchimento, vou remover meus gradientes principais e vou adicionar um preenchimento linear de branco para transparente. Então isso, é na verdade branco, zero por cento e vamos realmente trocar estes. > Então vamos de sólido para branco para branco transparente, e eu vou mudar sua opacidade para cinco por cento. Ao fazer isso, eu só tenho esse efeito muito bonito, onde eu começo com branco aqui e ele simplesmente desaparece quando ele sobe. Eu posso até fazer isso menor, assim. Com isso, podemos selecionar todos esses comandos G ou controlar G se você estiver em um PC para agrupar todos eles, e vamos chamá-lo de fundo. Com isso, o fundo do herói é feito. Vamos em frente e adicionar o logotipo e a navegação para isso. Vamos abrir a grade de layout e, vamos abrir nossos ativos de marca. Vamos pegar nosso logotipo branco. Basta clicar e arrastar. Vamos posicioná-lo em algum lugar em nossa página. Agora, o logotipo, vamos fazer 48 pixels de altura. Este pequeno botão aqui irá restringir como proporções. seja, quando você altera um valor, largura ou altura, o outro valor será redimensionado de acordo. Se você desmarcar essa opção, poderá alterar esses valores individualmente. Mas no meu caso, eu quero fazer meu logotipo 48 pixels de altura, por que 48, porque eu estou usando o sistema de grade de oito pontos, então qualquer elemento deve ter uma altura que é um múltiplo de oito. Agora eu vou pegar meu logotipo e eu vou posicioná-lo de modo que ele está 64 pixels a partir desta borda. Para fazer isso, vou manter pressionada a opção no Mac, mas ele pode manter a tecla Alt pressionada em um PC. Assim no Windows. Vou mover o cursor do mouse até que eu possa referenciar as bordas que eu quero. Então repare onde diz 71 pixels aqui. Isso significa que o logotipo está, 71 pixels dessa borda. Eu posso usar minhas teclas de seta agora no meu teclado para apenas empurrá-lo no lugar para que ele está 64 pixels agora, a partir dessa borda esquerda. Eu também vou colocá-lo 64 pixels do topo. Então, para fazer isso e tornar mais fácil para mim, posso usar a tecla para baixo duas vezes. Agora vou manter a tecla Shift pressionada e usar a tecla para cima três vezes. Porque se você se lembrar de manter pressionada a tecla Shift enquanto empurra, um elemento fará isso em incrementos de dez pixels em vez de um. Então agora meu logotipo está perfeitamente posicionado, exatamente onde eu quero. Agora vamos fazer a navegação para isso. Vamos começar com o elemento de texto. Você pode pressionar T no seu teclado ou clicar neste pequeno botão aqui. Vou digitar o primeiro item do menu. De acordo com o nosso arame. Temos quatro itens de menu: recursos, capturas de tela, depoimentos e preços. Então, na verdade, uma coisa que você pode fazer é pegar esses links individualmente, copiá-los do wire-frame, e colá-los aqui. Quão legal é isso? Agora, para a cor, vamos usar, branco, 90 por cento. Para o texto, usaremos Brandon grotesco, que é o tipo de letra para nossos títulos. 18 pixels regulares. 24 pixels altura da linha. Então precisamos posicioná-los a uma distância igual um do outro. Poderíamos fazer isso manualmente selecionando cada um deles. Ok, este é um 24 pixels. Talvez eu quisesse ser um 32 pixels. Eu posso fazer isso. Então você precisará fazer o mesmo com o resto. Normalmente isto funciona. Mas há uma maneira muito mais fácil de fazer as coisas e isso é usando layout automático. Este é provavelmente o meu recurso favorito em Figma. O layout automático permite agrupar um conjunto de elementos e definir a distância igual entre eles ou em torno deles. É o mesmo que usar margem e preenchimento em CSS. Então, para fazer isso, você selecionaria todos os elementos que deseja adicionar. Você pode clicar no layout automático ou pressionar a tecla Shift A no Mac e no Windows. Ou ele pode clicar com o botão direito do mouse e selecionar, Adicionar layout automático. Então isso vai criar o novo quadro que contém todos os seus elementos. Então, por padrão, ele examina como seus elementos são posicionados. Os meus são um após o outro, então ele mostra horizontal, mas eu posso mudar isso para vertical se eu quiser. Esta é a parte legal aqui. Eu posso definir o preenchimento horizontal. Então, isso adicionará espaço à direita e à esquerda. Posso adicionar o preenchimento vertical, que irá adicionar espaço na parte superior e inferior, e posso especificar o espaçamento entre os itens. Este é o que estamos interessados neste momento. Então deixe-me desfazer, e eu vou especificar 24 pixels. Então agora os meus elementos estão perfeitamente separados. Este é um recurso que eu recomendo que você use o tempo todo porque ele apenas torna seu trabalho muito mais fácil. Então, com isso, vamos pegar nosso menu principal e vamos posicioná-lo. Vamos alinhá-lo à grelha. Eu não tenho certeza se você pode vê-lo aqui corretamente. Mas agora ele está alinhado com a grade e Figma é realmente muito inteligente sobre isso. Ele o encaixa automaticamente no lugar. Então eu posso selecionar meu menu e meu logotipo. Eu posso ir aqui para o painel de alinhamento e eu posso definir uma linha centros verticais. Fácil como torta. Com isso, a primeira parte do nosso herói está completa. Temos o logotipo, a navegação e o fundo. A primeira parte daseção de heróis agora está completa. A primeira parte da Se você não seguiu e trabalhou ao meu lado, vá em frente e crie-o, agora mesmo para que você esteja pronto para o próximo passo. Como de costume, sinta-se livre para trazer seu próprio talento ou sua própria visão para este design. Eu adoraria ver esses resultados na galeria do projeto. Presumindo que você projetou com sucesso nesta primeira parte da área do herói, acho que é hora de terminá-la. Lidaremos na próxima lição, onde adicionaremos o conteúdo de herói. Então, vemo-nos lá. 7. Conteúdo de heróis: Bem-vindos de volta à aula. Nesta lição, vamos terminar de projetar a seção de heróis. Anteriormente, criamos a estrutura para ele com a grade, o logotipo, a navegação e o plano de fundo. Agora, é hora de adicionar o conteúdo. Vamos começar. O conteúdo do herói, se olharmos para o wireframe, é composto de um objeto de mídia que pode ser imagem, vídeo qualquer coisa, e um título, legenda e que é uma opção deschamada. Nós temos este botão, e este link que provavelmente leva a um vídeo pop-up, eu imagino. Para facilitar as coisas para nós, vamos selecionar todos esses elementos. Na verdade, vamos selecionar todo esse grupo onde ele diz conteúdo, e eu vou apenas colá-lo aqui. Agora, vamos abordar o título primeiro. Aqui está uma dica rápida para você. Se você quiser selecionar um elemento dentro de um grupo, normalmente você precisará selecionar o grupo e, em seguida, clicar duas vezes para entrar dentro do grupo. Mas se você quiser fazer isso sem clicar duas vezes, você pode manter a tecla Command no Mac ou Control no Windows pressionada. Isso permitirá que você clique e selecione qualquer elemento independentemente de quão profundo ele esteja na estrutura da camada. Para o título, vamos mudar sua cor para branco. Então vamos voltar à nossa tipografia e vamos usar o estilo do Título 1. Agora, você pode olhar sobre esses valores e confirmá-los para a memória e, em seguida, replicá-los do outro lado, ou você pode clicar com o botão direito do mouse, ir para Copiar/Colar, Copiar Propriedades, e então você pode voltar para o design principal, direito clique, Copiar/Colar, Colar Propriedades. Isso mudará tudo, a família da fonte, o peso, o tamanho da fonte, a altura da linha, tudo isso. Agora tudo o que temos que fazer é basicamente mudar a cor de volta e vamos trazer a grade, vamos alinhar isso com a grade, e vamos mudar a largura deste elemento para que ele se estenda em sete colunas. Temos 1, 2, 3, 4, 5, 6, 7. Em seguida, vamos mirar esta parte. Para isso, vamos voltar à tipografia e selecionar um estilo que funcionaria melhor para nós. No nosso caso, provavelmente usaremos o título 5. Clique com o botão direito, Copiar/Colar, Copiar Propriedades, voltar e Colar Propriedades. Agora, isso não funciona muito bem no meio, então vamos voltar ao normal. Você pode fazer essas alterações, sem problema. Vamos redimensionar isso também e vamos realmente mudar para largura automática. Isso significa que a caixa de texto será redimensionada para a largura máxima do texto dentro dela. Vamos mudar sua cor para branco, e vamos usar uma tonalidade mais moderada, 60 por cento, digamos. Incrível. Estamos a fazer grandes progressos. Agora, vamos olhar para este botão. Para este botão, eu quero que o texto diga, baixe gratuitamente, mas eu também gostaria de uma bela seta para sentar ao lado dele. Vou mostrar-lhe uma maneira incrível de criar botões no Figma que permite digitar qualquer texto que você quiser neles e eles vão redimensionar automaticamente. Isso é com a ajuda do nosso amigo confiável layout automático. O que eu vou fazer é selecionar o texto em si, e eu realmente vou mover isso para fora, e eu vou desagrupar isso. Com o Texto selecionado, pressione “Shift+A” para adicionar layout automático e selecionarei 32 pixels, preenchimento horizontal, 16 pixels, preenchimento vertical e 16 pixels de espaçamento entre os itens. Agora o que posso fazer é adicionar uma cor de preenchimento e vou adicionar 100% de preenchimento branco. Também vou adicionar um raio de canto de 100 pixels. Sabe por que fiz isso? Porque se vamos dar uma olhada no resumo do projeto, sob considerações de design, o cliente nos diz que, “Ei, nós gostamos de pílulas e botões fantasmas”. Um botão de pílula é aquele com cantos muito arredondados. Parece uma pílula de verdade. Com isso feito, eu posso selecionar o texto dentro dele e eu posso configurá-lo para a minha cor primária. Vamos para Cores, selecionar meu primário, vamos voltar e colá-lo. Agora, no que diz respeito ao texto, vamos usar Brandon Grotesque. Deixe-me realmente ampliar aqui. Vamos usar negrito 18 pixels, 24 para a altura da linha, e devemos estar prontos. Agora, eu também vou adicionar uma sombra a ele. Eu vou selecionar meu quadro, que eu vou chamar de Button, e sob efeitos, eu vou escolher Drop shadow. O mesmo que usamos para esses elementos aqui. A última coisa que precisamos fazer aqui é adicionar uma bela flecha. Para isso, eu vou para o meu aplicativo aqui, eu vou procurar seta, e nós vamos escolher a seta direita do conjunto Microns. Então clique e arraste e solte-o. Aqui, vamos mantê-lo em 24 pixels e eu vou apertar “Command+X”. Vou selecionar este texto e Command+V+V ou Control+V para no Windows. Isso vai colá-lo bem ao lado daquele texto dentro do meu quadro de botão. Tudo o que tenho que fazer agora é mudar a cor para a mesma cor do texto. Aqui, vou te dar outra dica profissional. Ao trabalhar no Figma, e você deseja alterar a cor em vários elementos, você pode selecionar o elemento pai e quando você vê cores de seleção, isso basicamente dará as cores de cada elemento na seleção. Se eu quiser mudar a cor desta seta para a cor deste texto, tudo que eu tenho que fazer é copiar a cor do texto, colá-lo, e eu estou pronto para ir. Agora nosso botão está completo, e como eu estou usando layout automático, eu posso alterar o texto neste botão, assim e o botão será redimensionado automaticamente. Quão legal é isso? Claro, eu também posso mudar o preenchimento e a distância entre os itens. Eu posso fazer isso, e eu posso fazer isso. Eu posso fazer isso. Bem, isso foi um valor muito grande, mas você entendeu o ponto. Eu tenho muito controle sobre como isso parece e é super fácil de usar. Agora, vamos ver sobre este link de introdução de vídeo. Para isso, vou usar minha cor secundária. Vamos selecionar isso, copiá-lo, colá-lo, digitar face. Vamos usar Brandon Grotesque novamente, 18, 24 e Bold. A última coisa a fazer é adicionar um pequeno ícone a ele também, porque eu queria mostrar o fato de que, hey, se você clicar neste link um vídeo vai ser reproduzido. Precisamos de um ícone que diga “jogar”. Temos este ou se formos ao Ionicon, vamos conseguir este. Arrastar e soltar. Vou redimensionar para 24, assim e vou selecionar o ícone e o texto. Vou pressionar “Shift + A” para criar um layout automático. Agora, ao fazer isso, você pode alinhar elementos de várias maneiras diferentes. Se o layout automático for horizontal, você poderá alinhar elementos na parte superior, central ou inferior. Se o layout automático estiver definido como vertical, você poderá alinhar elementos à esquerda, ao centro e à direita. Isto é o que está a fazer. Você também pode optar por mover um elemento para cima ou mover para baixo. Claro, se o layout estiver no modo horizontal, você pode mover elementos para a esquerda e para a direita. Você também pode usar os atalhos de teclado esquerda, direita, superior, inferior. No meu caso, eu vou escolher para alinhar este ícone no meio e também este texto no meio. Quanto à distância entre os itens, vou escolher 16 pixels. Vou me certificar de que estou usando a mesma cor neste ícone. Agora o que você pode fazer é agrupar esses dois elementos com layout automático. Você pode pressionar “Shift + A” e isso vai criar outro quadro para ambos. Ele pode definir seu espaçamento entre os itens para 32. Por padrão, isso alinhará esses elementos no meio. Agora, eu quero a mesma distância entre esses três elementos. O que eu posso fazer é selecionar todos eles mantendo pressionado “Shift”. Eu posso fazer “Shift + A” para adicionar layout automático. Vou simplesmente mudar a distância entre eles ou o espaçamento entre eles para 32. Além disso, vou certificar-me de que todos estes estão alinhados à esquerda. Assim como. Agora, a última coisa a fazer é posicionar este conteúdo a uma distância respeitável do cabeçalho. No nosso caso são 96 pixels, que aliás é um múltiplo de oito. Na verdade, vou manter este posicionamento. Mas se você quiser posicioná-lo de forma diferente, você usaria as teclas de seta para cima e para baixo. Legal. Agora, esta é a primeira parte do conteúdo. A última parte é adicionar este objeto de mídia. É assim que vamos resolver isso. Vamos começar criando uma forma simples e vamos adicionar um raio de borda de 8, uma altura de 240 pixels. E quanto à largura? Bem, para a largura, você pode ir basicamente qualquer largura que você quiser. Mas o que eu gostaria de fazer é usar uma proporção de 16 por 9. Eu tenho um pequeno plugin legal para isso. Chama-se Aspectos. Você pode encontrar isso no diretório de plugins do Figma. Basta procurar por aspectos e você vai encontrá-lo. Isso me permite selecionar um elemento, escolher uma proporção e escolher uma propriedade para redimensionar com base nessa proporção. No meu caso, eu quero alterar a largura porque a altura é definida em suas dimensões corretas. Eu vou bater aplicar e isso mudou a largura para 427 pixels. Agora eu tenho uma forma perfeitamente dimensionada para uma proporção de 16 por 9. Com o selecionado, o que posso fazer agora é clicar nele e, em Preencher, selecione “Imagem”, escolha “Imagem”. Posso abrir meu kit inicial de página de destino, ir para Imagens de espaço reservado e posso escolher qualquer uma das imagens deste kit de interface do usuário. Vamos escolher “Principal”. Aqui você tem várias opções de como a imagem se comporta. Você pode escolher entre Preencher, Ajustar, Cortar e Azulejo. No meu caso, vou deixar em Preencher. Então eu vou selecionar isso e eu vou adicionar uma sombra. Assim como. Agora o que eu quero fazer é criar uma grade legal com essas imagens. Vou selecionar “Duplicar” e posicionar isso em 32 pixels do outro. Vamos duplicar de novo, 32 pixels. Vamos fazer isso de novo. Vamos fazer isso de novo. Vamos fazer uma terceira coluna. Assim como. Agora, vamos em frente e adicionar algumas imagens novas aqui. Na verdade, para torná-lo mais interessante, aqui está o que vamos fazer, vamos excluir as imagens principais aqui. Vamos mover estes para cima assim. Só acrescenta um pouco mais de interesse visual. Vamos mudar as imagens agora. Quando você tem uma forma de retângulo com um preenchimento de imagem, você pode realmente clicar duas vezes nela para abrir a caixa de diálogo de preenchimento. Então vamos escolher outra imagem, talvez esta e vamos fazer o mesmo para o resto. Certo, uma vez que você está feliz com o resultado, aqui está o que você faz. Você seleciona todos estes e você vai para a direita aqui onde diz componentes e selecione criar componente. Agora, componentes e fig-ma permitem que você reutilize certos elementos. Fazer quaisquer alterações no componente pai também alterará os componentes filho. Se eu duplicasse esse componente em outra página e fizesse alterações nessa instância mestre, essas alterações também serão refletidas nas outras páginas. Agora que eu tenho isso transformado em um componente, eu posso selecioná-lo e eu posso girá-lo. Vamos usar a mesma rotação de 16 graus que usamos nesses elementos. Lembre-se deste número 16 graus. Vamos usar isso com bastante frequência no design desta página. Agora está girado. Eu posso movê-lo em sua posição final e isso realmente depende de você e como você quer que ele se pareça. No meu caso, eu provavelmente vou deixar algo assim ou outra coisa que eu possa fazer é o seguinte. Posso mudar a imagem aqui para a imagem principal. Eu posso escolher esconder esta imagem completamente e eu posso até deslizá-la em algo assim e eu posso movê-la para baixo para que o texto aqui meio entrelace com esta imagem talvez um pouco mais como esta. vez, esta é uma questão de preferência pessoal, mas eu acho que vai ficar muito bom. Vá em frente e mexa com isso, brinque, veja o que parece melhor para você. Agora falando do que parece melhor, dê uma olhada mais de perto nessa sombra. Vê como é cortado aqui? Isso ocorre porque quando você está adicionando ou quando você está criando um quadro com layout automático, ele geralmente vai marcar esta caixa onde ele diz conteúdo do clipe e que basicamente irá cortar qualquer conteúdo que está fora dos limites desse quadro. No nosso caso, a sombra está fora dos limites. Eu posso desmarcar isso e então podemos ir mais fundo e desmarcar esta caixa e agora, ver como a sombra está aparecendo. Isso é algo que você pode fazer quando você vê isso acontecendo. Quando uma imagem que deveria estar fora dos limites do seu quadro não aparece normalmente este é o culpado aqui. Certo, há uma última coisinha que precisamos fazer aqui. Aqui, na parte inferior, vamos adicionar um pequeno ícone que permitirá que os usuários saibam que, 'ei, você pode rolar para baixo nesta página. ' Para criar que comece com um retângulo. Vamos definir sua largura para 24, é altura para 48, seu raio para 100, e nós vamos realmente remover a cor de preenchimento e vamos adicionar um traçado ou uma borda, e a borda vai ser branca. Ele vai estar dentro de um pixel e, em seguida, dentro que nós vamos criar um círculo agradável usando a ferramenta de elipse. Ao usar a ferramenta de elipse, podemos liberar a mão ou podemos manter o deslocamento pressionado e ele vai encaixar na mesma largura e altura. Vamos fazer isso muito pequeno, seis por seis deve fazer o truque. Preencha branco, e depois mova-o para dentro do meu pequeno ícone aqui. Você pode defini-lo em oito pixels a partir do topo. Isso deve fazer o truque. Selecione ambos, comande G para agrupá-los todos juntos e nomeie-o de rolagem ou o que você quiser. Agora vamos trazer a grade e alinhar com a grade. Assim como. Obviamente você não tem que alinha-lo para a grade se você sente Ele parece melhor em uma posição particular como para que você pode fazer isso sem problema. Só porque estamos usando uma grade não significa que temos que alinhar cada coisa a ela. Essa é a seção de heróis acabada. Certo, agora é sua vez de terminar a seção de heróis. Se você já fez isso, fantástico. Caso contrário, vá em frente, assista a esta lição novamente se precisar e conclua esta seção. Agora, você vai descobrir que, isso é algo muito interessante que eu queria dizer, você vai descobrir que na maioria dos casos, o herói ou a parte do cabeçalho de um site é o mais difícil de fazer. Eu não sei por que isso é, mas normalmente uma vez que você faz isso é apenas uma vela suave a partir desse ponto em diante. Acho que é porque depois de completar o cabeçalho ou a seção de heróis você tem uma base para construir, certo? Você tem um ponto de partida. Então eu acho que mentalmente isso só torna mais fácil para você fazer as coisas funcionarem. Estamos prontos para seguir em frente. A próxima seção em nossa lista é a primeira seção para recursos. Abordaremos isso na próxima lição. Vejo você lá. 8. Primeira seção para recursos: Bem-vindos de volta à aula. Nesta lição, vamos projetar a primeira seção para recursos. Aqui é onde vamos usar a maioria dos ícones e também vai jogar com cores muito. Isso deve ser divertido, então vamos começar. Vamos começar por dar uma olhada no quadro do fio para que saibamos exatamente o que precisamos fazer. Então esta é a seção que precisamos projetar. Como você pode ver, começamos com o título da categoria, depois uma pequena descrição e, em seguida, cada recurso é apresentado assim. Tem um título e tem uma descrição. Alguns dos recursos estão disponíveis apenas na versão Pro, então precisamos projetar algum tipo de emblema para isso. Também adicionaremos alguns ícones. Se me lembro corretamente do briefing do projeto, cada uma dessas categorias de recursos tem algum tipo de legendas. Então, se abrirmos o resumo do projeto, e olharmos para os recursos, há uma categoria de recurso, e aqui está outra categoria de recurso, a que precisamos agora “Orçamento simplificado”. Temos um subtítulo chamado “Orçamento de Envelope”. Então precisamos ter certeza que adicionamos isso em algum lugar também. Então, na verdade, vamos em frente e pegar isso. Vamos copiá-lo e vamos até aqui, vamos colá-lo. Vamos também obter praticamente todo o conteúdo que temos aqui. Vamos nos preocupar em estilizá-lo em apenas um pouquinho. Uma outra coisa que eu gostaria de fazer é aumentar a altura deste quadro. Agora vamos começar do início, vamos? Com isso, vamos chamá-lo de subtítulo. Agora porque isso precisa ser muito discreto, então ele não precisa sair tanto. Vamos voltar à nossa tipografia, e vamos usar os estilos pequenos. Então vá em frente e copie as propriedades disto e cole-as aqui. Além disso, vamos mudar sua cor. Acho que devemos usar esse tipo secundário de cor vermelha coral. Então vá em frente e copie isso, cole isso dentro, e nós estaremos prontos para ir. Agora, vamos trazer a grade. Vamos realmente alinhar isso para a grade e vamos posicioná-lo em comparação com este elemento em cerca de 120 pixels. Não precisa ser perfeito. Em alguns casos, é mais importante que todo o layout pareça corretamente em vez de aderir a esse conjunto rigoroso de regras. Então agora eu posicionei a 120 pixels deste elemento aqui. Mas se não parecer certo, posso empurrá-lo um pouco para baixo. Não precisa ser perfeito para pixels. Agora vamos passar para os próximos elementos. Primeiro, na verdade, vamos selecionar isso, vamos desagrupar tudo. Agora este título, vamos ver que estilo devemos usar para ele. Eu estou pensando talvez na direção três ou quatro, mas o título três parece mais apropriado, então vamos copiar isso e vamos colá-lo e também usar a cor adequada para ele. Então vamos ao nosso cinzento, eu pego isto e colamo-lo aqui. Vamos usar cinza 100. A propósito, quando digo cinza 100, significa cinza 100% de opacidade. Se eu disser cinza 40, significa este valor, esta cor aqui, cinza 40% de opacidade. Então, mantenha isso em mente. Vamos alinhar isso corretamente aqui também. Vamos realmente empurrar isso para cima e deixar cerca de 32 pixels de distância entre esses dois elementos. Próximo passo é este elemento aqui, que também deve ser colocado 32 pixels do título principal. Na verdade, vou redimensioná-lo primeiro. Quero que isto ocupe cerca de cinco colunas de grade. Então vamos redimensioná-lo até aqui. Agora, para o estilo real, vamos voltar à tipografia e eu estou pensando em usar o título cinco. Dirigir cinco deve fazer o truque. Mas nós vamos realmente remover este peso médio porque é um pouco demais. Agora, se eu pensar sobre isso, nós realmente usamos o mesmo estilo aqui, certo? 25,32 para a altura da linha. Então vamos ser consistentes. Regular e usaremos esta cor. Mas acho que vamos usar um tom de cinza. Então vamos ver, talvez este, este seja 50 ou 60. Sim, acho que este parece bem. Então vamos fazer cinza 60. Legal. Então agora o que eu posso fazer é simplesmente selecionar todos estes, mudar A para adicionar layout automático. Agora, sempre que eu mudar este texto, os elementos que o rodeiam também serão afetados. Esta é uma forma muito eficiente de trabalhar em Figma. Agora vamos voltar nossa atenção para os recursos reais. A primeira coisa que vou fazer é mudar a cor e a família de fontes e todas as informações de texto. Então, para esses títulos, precisamos usar o tipo de cabeçalho, mas para o texto precisamos usar o tipo de corpo e agora estes são como um elemento de texto, é apenas o título, enter, e então o texto em si. Precisamos dividir isso, então o que vou fazer é remover isso de lá, duplicar. Eu estou basicamente colocando o título em seu próprio elemento de texto. Eu vou definir Auto Width para ele. Então eu vou agrupá-lo com isso e selecionar Shift A. Para o espaçamento entre itens, eu vou selecionar 16 pixels. Não precisamos de nenhum estofamento aqui. Agora eu vou alinhar isso com minha grade, e o texto vai ter três colunas de largura ou 280 pixels. Vamos mudar a cor. Para esta parte, vou usar o título cinco. Copie as propriedades daqui e cole as propriedades e, novamente, certifique-se de atualizar a cor do texto. Para o texto, vamos usar o estilo de parágrafo. Copie as propriedades, cole-as aqui e certifique-se de atualizar a cor também. Para os parágrafos, Tisa Sans Pro, 18 pixels, tamanho da fonte e 24 altura da linha. Uma outra coisa que eu quero fazer, é diminuir a opacidade sobre estes um pouco. Vou usar 80%. Deixe-me mostrar-lhe como isso parece. 80% sobre o título e 60% sobre o texto. Basicamente temos que fazer a mesma coisa com o resto dos itens. Eu vou fazer um desses itens novamente para que você possa ver o processo, e então eu vou avançar para os outros. Primeiro, precisamos separar o título da descrição. Então precisamos fazer o título Auto Width. Selecione o título e a descrição. Deslocar A para criar Layout automático. Defina o espaçamento como 16 e, em seguida, copie as propriedades do texto, cole-as. Copie as propriedades do título e cole-as. É isso. Então agora vamos avançar até que eu faça o resto das mudanças. Agora que tudo está devidamente configurado aqui, vamos em frente e agrupar estes. Temos beneficiários, categorias e podemos colocar em transações programadas aqui. Vamos também alinhar estes à grelha. Então, a maneira que eu quero que isso aconteça é, eu quero que os elementos de texto reais abranjam três colunas, então eu vou deixar uma coluna em branco. Em seguida, o próximo grupo começará na próxima coluna, e assim por diante e assim por diante. Na verdade, uma última coisa que preciso fazer aqui, é redimensionar todos esses elementos de texto para 280 pixels. Lá vamos nós. Então eu deveria ir relativamente, simplesmente assim. Nós vamos selecionar todos eles, vamos alinhá-los ao topo eselecioná-los novamente, selecioná-los novamente, Command ou Control G para criar um grupo. A seguir vai ser, digamos Vários orçamentos, depois talvez o rastreamento de metas e a sincronização entre dispositivos. Finalmente, teremos relatórios e sincronizaremos com seu banco assim. Agora selecione estes, alinhe-os ao comando superior G. Selecione estes, alinhe-os ao comando superior G a agrupar. Agora aqui está o que eu quero. Quero espaçamento de 64 pixels entre cada um desses grupos. Quero dizer espaçamento vertical, como este. Também 64 pixels entre estes e este grupo aqui. Isso é muito fácil de fazer com layout automático. Então, selecione todos eles. Desloce A, 64 pixels aqui e, em seguida, certifique-se de que tudo está alinhado à esquerda, assim. Estou pronto para ir. A última coisa que precisamos fazer aqui é adicionar os ícones. Adicione um emblema Pro em vez desses pedaços de texto aqui, onde ele diz Pro. Vamos realmente ir em frente e criar esse crachá Pro, e para isso, vou escolher a ferramenta Retângulo ou pressionar R no teclado. Ou, na verdade, vamos fazer isso com layout automático novamente. Então T para a ferramenta Texto, eu vou dizer Pro, para o tipo de letra, eu vou usar Brandon Grotesque, negrito, 14 pixels e também 5% de espaçamento entre letras. Aqui está uma dica profissional, Quando você está trabalhando com letras maiúsculas ou palavras maiúsculas, com um tamanho de fonte baixo; para melhorar a legibilidade, você deve sempre aumentar o espaçamento entre letras. Só para dar um exemplo, aqui está sem espaçamento entre letras e aqui está com espaçamento entre letras. Veja como você pode ler este pouco mais facilmente do que este pedaço. É por isso que também adicionamos espaçamento de letras a este estilo aqui ou a este elemento de texto. Agora com o selecionado, mude A para criar um quadro em torno dele. Vamos adicionar um preenchimento. O preenchimento será nossa cor primária, depois 100 para a borda radiosa Vamos adicionar talvez oito pixels preenchimento horizontal, e talvez quatro pixels no preenchimento vertical. Não precisamos de espaçamento aqui. O texto em si vamos deixar branco. Acho que devemos estar prontos para ir. O que podemos fazer aqui, podemos diminuir o tamanho da fonte ainda mais e com o espaçamento das letras também. Estamos indo para cada uso 16 pixels para o espaçamento entre letras. Acho que parece um pouco melhor. Então, com isso, porque vamos usá-lo em vários lugares, é sempre uma boa idéia criar um componente. Então selecione-o e vá para criar componente ou use o atalho de teclado. Então, agora, eu vou apertar o Comando X, para cortá-lo, e eu vou começar a inseri-lo, em vez deste pedaço de texto. Então vários orçamentos, Comando V e em seguida, para criar um layout automático com apenas esses dois elementos, eu vou selecioná-los e apertar Shift A e, em seguida, eu vou selecionar o modo para horizontal. Vou me certificar de desmarcar o conteúdo do clipe. Vou alinhar este distintivo ao centro e certificar-me de que isto também está alinhado ao centro. Quanto ao espaçamento, 16 pixels é bastante. Então, agora, vou em frente e fazer o mesmo pelo resto. Tudo bem. Feijão legal Então, agora que temos praticamente tudo no lugar, tudo o que precisamos fazer agora é adicionar os ícones. Então, para fazer isso, podemos começar em nosso ícone configurado. Vou usar o conjunto de ionícones. Então vamos procurar pessoas. Eu vou estar usando, People Outline, Copie isso, Cole e eu vou redimensioná-lo. Agora, aqui está uma situação que você pode encontrar quando você está usando figma em certos elementos SVG. Ao importar para figma e redimensionado da maneira normal com a ferramenta Mover selecionada. Você verá que as formas lá dentro ou os traços das formas ficam muito grossos. Isso não é algo que você queira fazer. Em vez disso, você precisa subir aqui e selecionar escala ou K. Se você fizer isso, você verá que o elemento agora está redimensionado corretamente. Então vamos redimensionar isso, para 24 pixels de altura. Algo como isto. Então agora vou alinhar isto à esquerda. Você também pode pressionar a seta do teclado esquerdo e eu também vou movê-lo para cima, empurrando a seta para cima no teclado. Tudo o que resta a fazer agora é encontrar uma cor agradável para ele. Para isso, vamos para nossas cores terciárias de confiança. Esta é uma das razões pelas quais estamos a usá-los. Então, é realmente levá-los em ordem. Eu vou copiar essa cor, colar isso aqui e, estamos prontos para ir. Então agora tudo o que resta a fazer é preencher o resto dos elementos com ícones. Vou usar exatamente o mesmo procedimento. Eu vou fazer mais um e então eu vou para a frente. Então, para categorias, talvez estejamos procurando alguma grade. Vamos ver se conseguimos encontrar. Vou usar o esboço da grade. Então, copie isso. Selecione o texto ou o elemento onde eu quero Colar no meu outro elemento. Comando V e K para redimensionar isso para 24 pixels de altura, assim. Mova-se e vamos escolher uma cor bonita para ele. Talvez eu não saiba, esse roxo. Isso realmente não importa. Você só escolhe as cores que você acha melhor. Tudo bem. Então agora deixe-me avançar e preencher o resto dos ícones. Tudo bem. Isso não foi tão ruim. Era isso? Processo muito rápido, especialmente quando você está assistindo em fast-forward. Mas tudo brincando à parte, é realmente simples uma vez que você pega o jeito dele, uma vez que você cria um ou dois elementos, é apenas enxaguar e repetir para fazer o resto. [ MÚSICA] Tudo bem, a primeira seção de recursos agora está completa. Agora é a sua vez. Se você ainda não fez isso, vá em frente e crie-o, agora mesmo. Eu usei uma abordagem de três colunas aqui, mas você poderia fazer as coisas de forma diferente. Por que não usar duas colunas ou quatro colunas? Experimente isso. Veja como o layout muda quando você está organizando esses elementos de forma diferente. Então, agora, uma vez que você faça isso, você está claro pronto para passar para a próxima lição. Na próxima lição, vamos criar mais uma seção para recursos, mas desta vez de uma maneira diferente. Então, estou ansioso para te ver lá. 9. Segunda seção para recursos: Bem-vindos de volta à aula. Nesta lição, vamos projetar o segundo conjunto de recursos ou a segunda seção para recursos, você quiser chamá-lo e faremos isso de uma maneira diferente da primeira. Agora, quando você está projetando uma página de destino como esta ou qualquer tipo de site de apresentação, é muito importante variar a maneira como você está exibindo esses recursos, e se você fizer isso, você garante que você está mantendo os interesses do usuário vivos. Imagine ter que exibir 30 feições em uma página. Agora, se você pegar esses 30 recursos e colocar todos em uma lista, por exemplo, vai ser simplesmente chato. Ninguém vai ler isso. Em vez disso, se você pegar dez deles, você os exibe talvez em uma grade com alguns ícones como fizemos e, em seguida, você pega os outros dez ou outros dez e você os exibe mais abaixo na página de uma maneira diferente e então você pegar os últimos dez e exibi-los ainda mais abaixo na página, talvez com algumas imagens ou ilustrações que acompanham. Bem, essa é uma abordagem muito melhor porque vai manter o usuário envolvido e o usuário vai digerir esse conteúdo muito mais fácil. Então, nesta lição, vamos usar um layout diferente para o segundo conjunto de feições. Vamos começar. Vamos dar uma olhada no wireframe para ver exatamente o que precisamos fazer. Então, temos esta categoria de recurso com esta descrição e, em seguida, quatro recursos. Agora, no wireframe, eu adicionei esta caixa preta como um espaço reservado para uma imagem. Podemos usar uma imagem aqui ou podemos simplesmente usar o texto. Cabe a nós mesmo. Então aqui está o que vamos fazer. Nós vamos copiar todos estes, todo o texto que é, e nós vamos colá-lo em nosso design principal assim. Mas, na verdade, antes de fazermos isso, vamos fazer um pouco de limpeza. Acho que é muito importante trabalharmos o mais limpo possível. Então vamos nomear esses recursos ou realmente recursos um, e então você pode ir em frente e renomear esses grupos também. Eu não vou fazer isso aqui porque o tempo é essencial mas saiba que sempre que você estiver criando um design, nomeie suas camadas e grupos acordo, porque isso só vai tornar sua vida muito mais fácil. Tudo bem. Então, agora, há alguns elementos comuns que esses dois conjuntos de recursos compartilham. Então, nós também vamos adicionar um subtítulo como este. Então deixe-me apenas trazer isso para baixo. O subtítulo para esta seção é, se bem me lembro, magia iOS. Agora, para economizar tempo, copiar propriedades, colar propriedades, copiar propriedades e colar propriedades. Legal. Agora, vamos nos certificar de que este texto é exibido em um máximo de cinco colunas, exatamente assim, e este também e então vamos selecionar todos esses shift A e selecionar 32 pixels entre eles e também certifique-se de desmarque o conteúdo do clipe se você encontrar alguns dos remetentes no texto aqui são cortados. Legal. Certifique-se de que tudo está alinhado à esquerda e que estamos prontos para ir. Agora, eu vou pegar tudo isso e posicioná-lo 240 pixels da seção acima e agora olhando para esta página, eu percebo que eu realmente esqueci de fazer alguma coisa. Esqueci de adicionar um fundo muito claro às primeiras seções, às duas primeiras seções, com licença. Então deixe-me corrigir isso rapidamente. Vou começar criando um retângulo e vou posicionar isso abaixo. Vamos fazer isso maior assim, e assim. Vamos redimensionar isso para que tenhamos um preenchimento aqui na parte inferior ou espaço entre a borda e esses elementos de 120 pixels. Agora, aqui está outra dica rápida e um atalho de teclado muito útil. Lembra quando eu falei sobre as ferramentas de cutucar, onde você pode usar as setas do teclado para mover um elemento para a esquerda, direita, superior e inferior? Agora, se você pressionar comando em um Mac ou Control no Windows, poderá redimensionar um elemento. Então, por exemplo, se eu pressionar o comando e pressionar a tecla de seta para baixo, e prestar muita atenção aqui, eu posso realmente redimensionar isso do teclado, e se eu também segurar Shift, eu posso redimensioná-lo ainda mais rápido. O mesmo vale para a largura. Então, comando ou controle e, em seguida, setas esquerda e direita me permite mudar a largura de um elemento e novamente, se eu manter pressionado shift, eu posso alterar esses valores em incrementos de dez em comparação com incrementos de um com apenas a tecla comando ou control pressionada. Então é assim que você pode redimensionar um elemento usando seu teclado. Então, de volta a esta parte. Precisamos redimensionar isso para que tenhamos 120 pixels de preenchimento na parte inferior, exatamente assim e agora vamos usar uma boa cor de fundo. Eu poderia usar um cinza, um cinza muito claro, talvez cinza dez daqui ou eu posso usar o dez primário. Então vamos fazer isso. Então, 10 por cento primários e se eu acho que isso é um pouco demais, eu posso ir ainda mais baixo 5% e eu acho que, na verdade, esse é o valor que eu vou mantê-lo em, 5% e isso cria uma boa separação entre esta seção aqui e esta seção aqui. Então agora vamos selecionar todos estes e vamos empurrá-los para baixo novamente até chegarmos a 240 por cento deste elemento superior. Legal. Agora vamos estilizar esses elementos. Para todos estes, vamos usar os seguintes estilos, Brandon Grotesque, regular, e eu vou usar exatamente o mesmo estilo que temos aqui. Então copie colar, copiar propriedades, colar propriedades. A única diferença é que eu vou usar 80 por cento na cor em vez de 60 por cento e também vamos corrigir a capitalização aqui. Então agora, o que eu vou fazer é criar elementos de cartão a partir desses elementos de texto. Muito fácil de fazer isso, selecione um elemento, mude A para adicionar layout automático e selecione vertical 32, preenchimento horizontal 64, preenchimento vertical 0 aqui. Podemos adicionar um preenchimento como branco e também podemos adicionar uma sombra. Então a sombra será assim, 30 para desfoque, 0 x, 20 y, e então vamos usar essa cor, nosso cinza principal 25% como cor de sombra e também, vamos adicionar um raio de borda de oito pixels. Agora o que eu posso fazer é definir o texto para alinhar ao centro, e eu posso redimensionar isso para que ele se estenda por três colunas e também, nós vamos redimensionar este até chegarmos ao preenchimento desejado aqui à esquerda. Tudo bem, então agora é apenas enxaguar e repetir para os outros dois elementos. Então vamos selecionar todos eles e alinhá-los ao centro. Vamos definir sua largura para 216 pixels e, em seguida, vamos fazer deslocamento A, deslocamento A, deslocamento A, selecionar este quadro, copiar propriedades, selecionar esses quadros, colar propriedades. Muito legal, certo? Agora, vamos alinhar estes com o nosso texto. Vamos usar um espaçamento de 64 entre esses elementos, e vamos posicioná-los assim. Vou usar 32 pixels de espaçamento entre esses elementos. Agora que vemos todos juntos, percebemos que este é menor do que o resto. Precisamos definir uma largura fixa para isso. Uma vez que temos layout automático adicionado, precisamos mudar a orientação para vertical para que possamos seguida, selecionar largura fixa em vez de largura automática. Como assim. Agora eu posso redimensionar isso para qualquer valor que eu precisar. Para tornar isso um pouco mais interessante, vou selecionar os dois e vou empurrá-los para baixo 32 pixels. Mantendo a tecla Shift pressionada e pressionando a tecla de seta para baixo, 1, 2, 3, eu solto Shift 1, 2. Agora eu tenho um intervalo de 32 pixels do topo deste para o que o topo deste. Agora podemos ir em frente e agrupar estes. Podemos ir em frente e Shift A sobre isso. Certifique-se de desmarcar o conteúdo do clipe. Esta parte está feita agora. Para tornar esta seção um pouco mais interessante, faremos mais duas coisas. Primeiro, vamos adicionar algumas imagens. Para isso, eu realmente vou mover esta seção inteira para a direita e eu vou voltar para o meu kit inicial, eu vou selecionar as imagens de espaço reservado e eu vou selecionar o iPad Pro e o iPhone 7. Arraste e solte na minha página. Estes são um pouco grandes demais agora, então vamos redimensioná-los. Eu vou redimensionar isso para cerca de, eu não sei, 700, e então eu vou redimensionar este telefone para cerca de metade desse valor, para 350. Eu não sei a proporção exata entre esses dois elementos, mas de relance isso parece certo. O que eu vou fazer agora é, colocar o iPhone em cima do iPad para que eles se pareçam com isso. Então eu vou empurrar isso para baixo, 10, 20, 30, 1, 2, então 32 pixels. Vou selecionar ambos, Comando G para agrupá-los e, em seguida, vou alinhar a borda do iPhone com a borda desta coluna. A ideia é deixar esta coluna aqui em branco. Vou selecionar estes dois, selecionar isto, alinhar o topo. Finalmente, a última coisa que eu quero fazer é selecionar esta imagem do iPad e adicionar sombra. Selecione o iPhone e faça o mesmo. Isso só cria um pouco de profundidade. Bastante fixe. Agora, finalmente, o que eu quero fazer é adicionar algumas listras aqui. Se você está se perguntando como eu tenho a inspiração para este design com os ângulos e outras coisas, bem, eu dei uma olhada no resumo do projeto onde o cliente nos disse que, hey, aqui estão alguns sites que nós gostamos e um deles é Stripe. Se você não viu o site do Stripe, bem, é muito legal. Parece algo parecido com isto. Você pode ver que eu tenho muita inspiração daqui com as cores ousadas, com os ângulos, com a forma como esta seção de imagem aqui é apresentada. Como comecei a usar essa diagonal ou essa abordagem angular, vou usá-la no resto da página. Vou começar criando um retângulo deste tamanho. Vou ajustar a rotação para 16 graus. Então eu vou posicioná-lo em algum lugar por aqui para que ele passe apenas através da lista de recursos. Vou trazê-lo debaixo desta moldura, assim. Vou adicionar um gradiente a ele. Para adicionar um gradiente, podemos fazê-lo de duas maneiras diferentes. Nós podemos selecioná-lo, ir para preencher, selecionar Linear, Radial, um Angular, um gradiente Diamante, qualquer que seja, mas linear é geralmente o que você iria para. Em seguida, escolha as cores manualmente. Eu realmente tenho um ótimo recurso para você e isso é chamado WebGradients. Você pode encontrá-lo em webgradients.com. Basicamente, ele mostra uma lista de gradientes pré-fabricados. Muito legal, certo? Você pode ver as cores de início e fim e você pode até mesmo copiar o código CSS para ele. O que é bom sobre este site é que ele também oferece um plug-in para Figma. Esse plugin é chamado WebGradients. Vá em frente e instale-o como qualquer outro plug-in. Tudo o que você precisa fazer é selecionar a forma em que você deseja usar o gradiente e, em seguida, clicar nesta lista. O plug-in preenche automaticamente o gradiente para você. Quão legal é isso? É realmente até sua preferência, que tipo de gradientes você deseja usar aqui. Vou escolher este, Rainy Ashville. Vou posicionar isto aqui por enquanto. Vou mudar a opacidade da camada para 10 por cento. Estou fazendo isso porque vou adicionar outro gradiente. Vou mudar o ângulo para talvez 12 graus. Mexa-se, algo assim. Para isso eu vou usar um gradiente mais escuro, talvez algo com cores diferentes. Algo assim. Você pode brincar com a opacidade desta vez. Vamos um pouco mais alto, 20 por cento. Vamos com 20 por cento neste também. É só um detalhe ou estas duas listras, mas acho que fazem toda a diferença. Eles ficam fabulosos com o resto dos elementos. Em seguida, selecione tudo, Comando G para agrupar tudo, e vamos chamar esses Recursos 2. A segunda seção para recursos é feita. Agora é a sua vez de colocar o seu próprio giro sobre ele. Você pode fazer isso de tantas maneiras diferentes. Você pode usar gradientes diferentes para essas duas listras. Você pode trocar a imagem pelo conteúdo escrito. Você pode usar um estilo diferente para esses cartões brancos. Pode fazer muitas coisas. Vá em frente e experimente e certifique-se de postar seu projeto na galeria do projeto para que todos possamos dar uma olhada. Dito isto, estamos agora prontos para passar para a próxima seção. Depois de um rápido olhar sobre o arame, podemos ver que essa seção é uma pequena ação fria. Faremos isso na próxima lição. Te vejo lá. 10. Chamada para ação: Bem-vindos de volta à aula. Nesta lição, mais uma vez jogaremos com formas e cores para criar a pequena chamada à ação que fica entre a segunda e a terceira seções de feição. Estamos praticamente prontos, então vamos começar. Se dermos uma olhada na armação do fio, podemos ver o que precisamos fazer aqui. Então, basicamente temos um título, pequena descrição e, em seguida, o botão de chamada à ação real. Então vamos em frente e copiá-los, e na verdade eu vou apenas copiar o texto. Eu vou colar isso aqui e eu vou realmente usar esses estilos. Então copie, cole e copie e cole. E isso vai nos poupar um monte de tempo. Vamos alinhar isto ao centro, e depois vamos agarrar este botão. Vou colá-lo aqui mesmo. E isso vai dizer download grátis. Isso é bom. E vamos em frente e selecionar tudo isso. Deslocar a para adicionar layout automático. Certifique-se de desmarcar esta opção. Vamos adicionar 32 pixels de espaçamento entre os itens. E então aqui está o que vamos fazer, vamos adicionar uma cor de preenchimento na forma do nosso gradiente principal. E então vamos adicionar oito pixels, raio da borda. E então vamos adicionar 64 pixels acolchoamento lateral, 64 preenchimento vertical. E então a única coisa que resta para mudar é a cor do texto. Então vamos trocar isso com branco e devemos ser bons para ir por este lado. Agora eu também vou me certificar de que isso se estende sobre, digamos seis colunas. E estamos quase lá. Só temos que ajustar isso um pouco assim. E finalmente, vamos adicionar nossa sombra salva a ele. E estamos muito bem para ir, certo? Bem, eu não acho que devemos deixar assim porque é bem simples, certo? Ele meio que fica ali, uma caixa sozinha. E acho que podemos integrá-lo melhor com tudo o que está ao seu redor. E para fazer isso, vamos brincar com algumas formas e lotes e lotes e muitos gradientes. Então pegue a ferramenta de retângulo e desenhe um retângulo de 320 por 64 e 100 para o raio e adicione nossa sombra salva. Então agora o que eu vou fazer é duplicar isso, movê-lo assim, e empurrá-lo para dentro, 10, 20, 30, 40, 50, 60, um, dois, três, quatro. Então 64 pixels, você pode até parar em 60. A idéia é que você quer esconder esta costura aqui para que você possa até mesmo fazê-lo manualmente, mas eu acho que usar um certo número me permite ser muito preciso. Então novamente, um, dois, três, quatro, cinco, seis, um, dois, três, quatro. Agora vou duplicar e repetir o processo. Um, dois, três, quatro, cinco, seis, um, dois, três, quatro. E outra vez. Agora vamos selecionar estes e duplicá-los e movê-los para baixo assim. E duplique isso de novo e mova-os para baixo. Então agora eu vou pegar a linha do meio e eu vou empurrá-la para a direita, 10, 20, 30, ou qualquer coisa talvez um pouco mais, 40, 50, 60, um, dois, três, quatro. Tudo bem. Então agora eu vou agrupar estes, então Comando G ou Controle G se você estiver no Windows. E eu vou abrir meu plug-in de gradientes. E eu vou começar a fazer isso, basta selecionar um elemento, escolher um gradiente, selecionar um elemento, clicar em um gradiente, e assim por diante, e fazer o mesmo para o resto. Agora, como você decide vestir isso, é realmente com você. Mas é assim que se faz. Então, agora que isso está feito, selecione tudo e vamos criar um componente. E vamos definir 16 graus de rotação. Agora, vou alinhar isto no meio da minha página. E eu também vou posicioná-lo em algum lugar ao redor desta área, eu acho que 120 dos elementos acima. Mais uma vez, isto não tem de ser exacto. Você pode olhar para ele. O que parecer bom, use-o. Então agora eu vou simplesmente mover isso para baixo da minha caixinha aqui. E podemos ir em frente e alinhá-los ao centro verticalmente. E se parecer um pouco plana, você pode entrar. E você pode mover esses grupos para que a sombra do grupo acima seja lançada no grupo abaixo dele. Isso foi difícil de fazer? Na verdade, não. Você viu como é fácil trabalhar com formas e gradientes e criar elementos muito interessantes. E com isso, agora podemos comandar G para agrupá-lo. E eu vou chamá-lo de CTA Pequeno para chamada à ação. Tudo bem, chamada à ação feita. Agora eu quero ver sua perspectiva única sobre isso. Brinque com essas cores, esses gradientes, ou talvez não use gradientes. Mostrei-te uma maneira de o fazer, mas obviamente não é a única maneira. Então brinque e seja criativo. E estou ansioso para ver o que você inventou. Depois de completar esta seção, você está pronto para passar para a próxima. E a próxima é a terceira e última seção de recursos. E como de costume, vamos usar um layout diferente para exibir este terceiro conjunto. Isso vai acontecer na próxima lição, então eu vou te ver lá. 11. Terceira seção para recursos: Bem-vindos de volta à aula. Nesta lição, vamos projetar a terceira e última seção para os recursos. Se você se lembrar do que eu disse nas lições anteriores sobre design de recursos, é sempre uma boa idéia misturá-lo. Então, para permanecer fiel a isso, para este terceiro lote vamos usar um layout diferente, e também vamos adicionar algumas ilustrações. Então, se você está pronto, vamos começar. Vamos dar uma olhada rápida no wireframe, e como você pode ver, essas são as duas seções que precisamos criar. Então é assim que vamos fazer isso. Vamos voltar ao nosso projeto principal e vamos copiar isso. Vamos realmente fazer este quadro um pouco maior. Vamos colar isto aqui. Nós vamos trazer a grade e vamos alinhar isso bem com a grade. Vou deixar cerca de 240 pixels de distância entre este elemento e a chamada à ação. Vamos ver se isso é suficiente, vamos apenas olhar rapidamente para ele e eu acho que podemos precisar de um pouco mais do que isso. Então vamos com 320, algo assim. Então agora visualmente, isso parece equilibrado. Esta chamada à ação parece a meio caminho entre este elemento e este elemento. Como eu estava dizendo em uma lição anterior, você nem sempre precisa confiar em medidas exatas. Como por exemplo, entre isso e isso, eu tenho um 120 pixels. Então normalmente você estaria inclinado a dizer, ok, bem, vamos manter essas distâncias iguais, e então eu vou colocar isso em 120 pixels. Mas quando você olha para ele de uma perspectiva de olho de pássaro, você verá que visualmente ele não parece equilibrado, e nesse caso, você só tem que escolher o que é melhor. No meu caso, sobre isso parece bom para mim. Para o conteúdo desta seção, podemos pegar o texto de nossos wireframes e faremos o mesmo aqui. Mas em vez de segurança ser o título principal, vamos mudar um pouco. Vamos usar a segurança como legenda aqui e quanto ao título principal, vamos dizer que seus dados estão seguros. Faz mais sentido assim. Então vamos pegar duas subseções. Além disso, eu quero ter certeza de que este elemento se estende em seis colunas e não cinco, apenas assim, porque eu quero colocar duas dessas seções menores que se estendem em três colunas cada. Vamos posicionar isso em 64 pixels do elemento acima dele. Vamos nos livrar do ícone, não precisamos disso e para o texto, temos o quê? Online banking, vamos copiar este texto aqui. Agora, aqui vai uma dica rápida para você. Se você está indo para copiar um pedaço de texto de figma e você vai colá-lo aqui assim. Você notará que o estilo não está preservado. Assim, o estilo original do texto de cópia é usado em vez disso. Para contornar isso, você precisa ir para Editar, colar e combinar estilo, assim. Legal. Então vamos duplicar esse alinhamento com a grade e vamos copiar o outro pedaço de texto e isso é para criptografia de dados. Vamos seguir em frente novamente, editar, colar e combinar estilo. Legal. Então estamos quase terminando aqui. A última coisa que precisamos fazer é adicionar uma ilustração. Então vamos fazer um layout clássico para um recurso onde temos uma imagem do lado e conteúdo do outro lado. Agora, para a ilustração, e você pode encontrar links para tudo que eu estou usando e que recursos, esse arquivo PDF. Eu vou estar usando uma ilustração que eu tenho de elementos voláteis, vamos trazê-lo para cima. Eu vou alinhar o topo dos elementos, então o topo da imagem, eu vou alinhá-lo com o topo deste elemento, e eu vou posicionar esta imagem para que ela vá para fora da grade. Isso é totalmente bom, mas em vez disso, vou alinhar esta borda esquerda, com a grade. Para manter o mesmo espaçamento que usamos em outras partes do nosso projeto, vou deixar esta coluna em branco. Então essa é uma seção. Vamos comandar ainda para criar um grupo e agora vamos duplicá-lo. Vamos movê-lo para baixo. Digamos que a distância de 120 pixels entre os dois e vamos fazer exatamente o oposto. Então eu vou excluir essa imagem, eu vou mover isso para o outro lado. Novamente, esta é uma maneira clássica de exibir recursos. Você faz a imagem e o conteúdo e , em seguida, na próxima linha você inverte a imagem e o conteúdo. Aqui vamos pegar a segunda ilustração. Novamente, eu vou alinhá-lo com esta coluna aqui para deixar esta coluna em branco, alinhá-la com o topo e pronto. Agora, a última coisa a fazer é atualizar a cópia no texto. Então aqui temos apoio. Então, digamos apoio lá. Quanto ao título principal, vamos dizer grande suporte para grandes produtos. Aqui, editar, colar e combinar estilo e as duas subseções são as seguintes; suporte on-line 24/7 e também temos um link lá na parte inferior. Então, suporte on-line 24/7 baseado no estilo de jogo. Este é chamado de aulas educacionais gratuitas. Então colar isso assim e foi chamado de aulas educacionais gratuitas, eu esqueci. Tudo bem. Agora, a última coisa a fazer aqui é criar rapidamente esses dois links. Então o primeiro, e eu estou realmente indo para duplicar esse texto de suporte lá. Mas em vez de usar esta cor vermelha, eu vou usar a cor azul porque este é um link e este azul é atualmente a minha cor primária. Eu também vou pegar esta seta colá-lo dentro Selecione estes dois, desloque A para criar layout automático. Altere a orientação para horizontal. Certifique-se de que ambos os itens estão alinhados no meio e definir a distância entre eles para 8 pixels, assim e agora podemos excluir esta linha de texto e atualizar isso para dizer, enviar ticket. Uma outra coisa que podemos fazer aqui é redimensionar esta seta em vez de 24 vamos torná-la 16 pixels. Só um pouco menor porque está ligado a este pequeno elo ali. Então agora podemos copiar isso. Posso colá-lo. Podemos dizer, visitar o canal, e podemos apagar este bit. Finalmente, vamos selecionar tudo. Comando G para agrupar ou controlar G se você estiver em um computador Windows e vamos chamar isso de recursos 3. Incrível. Agora, antes de encerrarmos as coisas, eu disse que essas ilustrações são tiradas ou baixadas de elementos Envato. É um serviço pago. Mas se você quiser algumas ilustrações gratuitas, deixe-me mostrar rapidamente que agora, você pode ir para OnDraw.co clique em Procurar agora e aqui você pode encontrar um monte de ilustrações SUP. Há muitos deles, você pode até mesmo procurar uma palavra-chave específica e o que é legal sobre isso, você pode alterar a cor do acento neles facilmente. Uma vez que você encontrar um que funcione para você, basta clicar nele e você pode baixar um PNG ou um SVG que realmente depende do que você quer fazer com ele. SVG significa Scalable Vector Graphics e este é um formato vetorial, que significa que você pode redimensionar essa imagem tanto quanto quiser e não vai perder qualidade. Um PNG é um formato raster, o que significa que se você redimensioná-lo e torná-lo maior do que seu tamanho original, ele vai parecer pixelado. Então, ele realmente depende de sua aplicação, mas sim, OnDraw.co/ilustrações, ótimo recurso para obter ilustrações SVG gratuitas. Tudo bem, com a seção final de recursos feita, estamos bem além do ponto de meio caminho em projetar esta página de aprendizado. Se você chegou até aqui, deixe-me dizer, ótimo trabalho. Agora, como de costume, sua tarefa para esta lição é criar esta terceira e última seção para recursos. Assim como eu tenho dito até agora, coloque seu próprio giro nas coisas. Não faça exatamente o que eu faço, apesar de tudo bem, você pode aprender muito fazendo isso. Mas também é uma boa idéia fazer as coisas do seu jeito e experimentar e ver quais são os resultados. Agora, se você já fez isso e está pronto para seguir em frente, então acho que devemos ir direito. A próxima seção da nossa lista é a Galeria de Capturas de Ecrã. Isso está chegando na próxima lição. Então, vemo-nos lá. 12. Galeria de captura: Bem-vindos de volta à aula. Nesta lição, vamos projetar a galeria de capturas de tela. Isso é muito fácil de fazer, então vamos começar. Se olharmos para trás no wire-frame, podemos ver que eu originalmente mocei a galeria de imagens como uma simples grade de imagens, e embora esta seja uma solução perfeitamente viável, acho que podemos fazer algo um pouco mais interessante do que e vamos fazer um carrossel de imagens. Um carrossel é basicamente quando você pode ver uma linha de imagens e você tem controles esquerda e direita para mover essa linha de imagens. À medida que você move para a esquerda e para a direita outras imagens estão sendo reveladas. Então, vamos pular para a parte principal do design e eu vou mostrar a vocês o que eu quero dizer com isso. Agora, para isso, eu vou estar usando algumas das imagens de espaço reservado que são fornecidas nestes [inaudível]. e vamos ver. Vou pegar as principais economias abertas, talvez esta, esta, esta e a principal. Então, com estes basta clicar e arrastar e Figura. Certo, e isso carregou um monte de imagens. Agora, queremos que nossas imagens sejam dimensionadas de acordo com a grade que estamos usando. Então eu vou trazer a grade e vamos fazer com que cada imagem ocupe quatro colunas de grade. Então, vamos em frente e redimensionar isso assim, e o tamanho que estamos procurando é 384 pixels. Então agora eu vou fazer o mesmo para os outros. Então, com 384, e agora vou começar a trazê-los um de cada vez. Então vamos trazer estatísticas, Isso eu estou realmente indo para mover. Então as estatísticas vão aqui e esta imagem eu vou posicioná-la em 32 pixels da outra. O que mais? Vamos trazer a imagem principal e não se preocupe com esta imagem ser muito mais alta, vamos corrigir isso em apenas um pouco. O que mais temos? Nós temos isso, e eu realmente acho que temos imagens suficientes aqui. Então, vamos posicionar estes corretamente assim. Agora vamos esconder a grade e vamos selecionar cada uma dessas imagens e adicionar uma bela sombra e também oito pixels raio de borda. Agora, o que fazemos com essa imagem grande? Queremos que seja exatamente a mesma altura que os outros, que é 683. Bem, podemos fazer isso. Sem problema. Basta desmarcar proporções restritas, digitar 683 e clicar duas vezes nele. Agora ele está definido para preencher, mas se queremos movê-lo ao redor, podemos configurá-lo para cortar. Então podemos escolher qual parte da imagem que queremos exibir. Muito legal. Então, vamos movê-lo para baixo, só um toque. Vamos nos certificar de que está exatamente onde deveria estar. Acho que em algum lugar como aqui deve ser bom. Vamos ver. Só um pouco, um pixel para cima deve fazer o truque bem. Está bem. Então agora aqui está o que podemos fazer para adicionar um pouco de interesse visual. Vamos cambalear essas imagens, significa que todas as outras imagens serão posicionadas 64 pixels abaixo da anterior. Então nós selecionamos isso e isso e vamos dizer 1-2-3-4-5-6, que é 60, e então 1-2-3-4, que é 64. Legal. Agora, vamos selecionar esses comandos G para agrupá-los. Vamos movê-los mais para baixo. O que eu quero fazer, para ser consistente no design é eu quero pegar essas duas listras angulares, e usá-las como um fundo, e isso vai amarrar bem com todo o motivo ângulo que estamos usando para ter ângulos aqui, aqui e também aqui. Ok? Então vamos em frente e fazer isso. Vamos colar estes. Vamos trazê-los para o nosso grupo. Agora posso selecionar os dois. Vamos fazer isso individualmente e então eu posso torná-los maiores ou menores, depende do tipo de efeito que eu estou procurando, algo assim e vamos pegar o outro. Vamos fazer isso um pouco maior, algo assim. Então eles meio que se cruzam um ao outro e vamos avançar assim. Você pode brincar com essas duas formas e uma vez que você faz isso, você pode abrir os gradientes e você pode dar-lhes cores diferentes. Algo assim ou algo assim. Ele pode até mesmo alterar sua ordem dependendo do gradiente que você deseja mostrar primeiro. Agora também precisamos de algum tipo de navegação aqui, certo? Como vamos mover este carrossel? Bem, vamos em frente e fazer isso então. Vamos começar pegando a ferramenta Retângulo ou R. E vamos criar um retângulo de 320 por 320. Vamos adicionar 64 pixels, raio de borda e vamos fazer um ângulo ou rotação de 26 graus. Vou adicionar a bela sombra. Eu vou definir seu preenchimento para branco e eu vou definir sua capacidade para 95 por cento. Então isso vai ficar em cima desses itens, assim e podemos até trazer a grade para que tenhamos algum tipo de medição. O que eu vou fazer é alinhar na grade e, em seguida, empurrá-lo para a direita 10,1,2,3,4,5,6, 16 pixels algo parecido com isso. Eu também vou alinhá-lo no centro com minhas capturas de tela, então agora eu vou pegar a seta e vou colá-la aqui e vamos trazê-la para dentro deste grupo. Comando G para agrupá-lo e vamos mudar sua altura para 32, então torná-lo um pouco maior. Agora você pode simplesmente posicionar esta seta para o conteúdo do seu coração. Eu vou fazer algo assim, 1, 2, então 20, 1, 2, 3, 4, 24 e eu acho que realmente precisamos torná-lo um pouco maior. Vamos tentar 48 sim 1, 2, 3, 4, 5, 6. Sim, algo assim. Você precisa brincar com ele até acertar, do jeito que eu gosto, mas para mim agora, isso parece muito bom. O que eu vou fazer é duplicar esta parte e eu vou apenas movê-la para o outro lado, assim. Deixe-me primeiro alinhá-lo no meio e novamente, eu vou alinhá-lo com a grade e, em seguida, empurrá-lo para a esquerda, 10, 1, 2, 3, 4, 5, 6, 16 pixels. Então eu vou apenas posicionar a seta em posição relativamente semelhante. Você pode alcançar um nível muito maior de precisão quando você está codificando isso com CSS. Então não se preocupe muito com isso agora. A última coisa a fazer é virar horizontalmente, o que vai virar para o outro lado. Agora temos os botões para mover o carrossel, para frente e para trás. A última coisa que eu gostaria de adicionar a isso é algum tipo de indicador para nos informar em qual página do carrossel estamos, então, para isso, aqui está o que vamos fazer. Vamos pegar a ferramenta de retângulo novamente. Vamos desenhar retângulo simples e vamos fazer este 32 pixels de largura, 4 pixels de altura, e o raio 16 pixels. Então agora temos uma forma pequena que se parece com isso. Para a cor, eu quero usar a mesma cor primária assim, mas vou fazer 10 por cento de capacidade. Esta é uma representação de uma página de carrossel que não está ativa no momento. Vamos repetir o processo. Vamos duplicá-lo, vamos selecionar ambos “Shift A” para adicionar um layout automático. Vamos definir 16 pixels distância entre os dois e agora vamos criar o estado ativo. Para isso duplicado mais uma vez, mas desta vez, vamos fazer com que 80 pixels de largura. Nós vamos usar um 100 por cento a cor primária e, em seguida, apenas adicionar um pouco mais para representar outras páginas inativas e eu acho que isso deve fazer o truque. Agora vamos selecionar isso, alinhá-lo no meio da página e vamos trazê-lo um pouco para cima. Vamos realmente alinhá-lo com a borda inferior desta forma e essa é a galeria de captura de tela. Agora vamos selecionar tudo. Comando G para agrupá-lo e vamos chamá-lo de galeria de captura de tela. Finalmente, vamos movê-lo para cima ou realmente vamos movê-lo para baixo e deixar cerca de 240 pixels distância entre a galeria e a seção acima dela. Agora, se fizermos uma visão de pássaro, podemos ver que temos um bom equilíbrio de espaço em branco. Tudo bem, como de costume, agora é hora de agir e criar sua versão da galeria de capturas de tela. Eu fui para uma abordagem de carrossel barra deslizante, mas você pode permanecer fiel ao quadro de arame e apenas fazer um grupo simples de imagens ou você pode criar algum outro layout. Na verdade, cabe a você. Estou ansioso para ver o que você inventou. Agora, com isso dito, é hora de seguir em frente. O próximo item em nossa lista é a seção de depoimentos e lá eu vou realmente manter as coisas muito simples. Deixe-me mostrar-lhe a minha opinião sobre isso na próxima lição. Vejo você lá. 13. Testemunhos: [ MÚSICA] Bem-vindos de volta à aula. Fizemos um grande progresso com este design da página de destino. Só temos que projetar mais três seções e acabamos. Nesta lição, vamos criar as seções de depoimento. Pronta? Vamos lá. Então vamos verificar primeiro a armação do arame para ver com o que estamos lidando. Inicialmente, minha idéia era apenas ter uma lista de avatares aqui e quando você clica em um avatar, o depoimento em si mudaria. Eu acho que o que nós vamos manter as coisas muito mais simples do que isso, e apenas fazer uma navegação com seta para a direita, seta para a esquerda e é isso. Vamos voltar aqui. Vamos para a tipografia e pegar essa citação de bloco que eu tenho aqui, colar isso, e vamos trazer a grade. Vamos alinhar corretamente isso à grade e dimensioná-la para 10 colunas, bem no meio da página. Vamos também alterar a cor do texto para classificar 80 por cento. Para marcar o fato de que esta é uma seção para depoimentos, vamos em frente e adicionar um desses, uma citação. Isto vai usar Brandon grotesco. Vamos fazer um tamanho de fonte realmente grande e vamos torná-lo ousado e eu acho que um pouco maior, algo como um 110. Realmente não importa que não estamos aderindo exatamente à escala de tipo agora porque este é um elemento decorativo. Então um 110 e isso deve ser bom. Vamos mudar a cor, na verdade, vamos usar este, mas um pouco mais moderado, como 80%, algo assim. Isso parece bom, vamos selecionar ambos alinhados ao centro e vamos alinhar as coisas assim. Então, sob a citação real, vamos colocar um avatar da citação, autor, nome e talvez posição e, em seguida, a navegação de seta. 40 avatar, vamos pegar a ferramenta de elipse ou O no teclado e vamos fazer uma elipse que é 64 por 64. Isso deve fazer o truque. Não precisamos de um avatar muito grande. Vamos posicionar isto a 32 pixels do quadro acima e precisamos colocar um retrato lá. Há muitas maneiras diferentes de fazer isso. Você pode baixar uma imagem gratuita da internet, se você quiser fazer um espaço reservado. Se você está fazendo um projeto real, então você colocaria a foto da pessoa que realmente lhe deu esse testemunho. No meu caso, eu só quero uma imagem titular lugar para que eu possa abrir um plugin chamado unsplash. Isto é para o site “unsplash “e posso procurar por um retrato. Eu posso usar esse e isso vai preencher bem assim. Para o nome e posição, vamos realmente pegar esse tipo de estilo de texto e vamos realmente fazer uma mudança a para adicionar um layout automático. Certifique-se de excluir o preenchimento padrão que são adicionados. Vamos fazer 16 pixels de distância entre os itens ou espaçamento entre os itens. Vamos fazer as coisas verticais e eu vou colar nesse elemento e depois mudar a cor. Vou usar 80 por cento cinza. Vamos dizer Mary Anne, advogada, legal. Agora vamos pegar esse alinhamento no centro. Certifique-se de posicioná-lo 32 pixels da citação real e , em seguida, vamos pegar as setas esquerda e direita. Cole isto. Assim, duplicá-lo, movê-lo para o lado, clique com o botão direito do mouse, virar horizontal. Vamos fazer uma opacidade de 10 por cento neste. Na verdade, vamos fazê-lo na própria camada, assim. Isso nos mostrará como uma seta inativa se parece. Vamos mudar A estes para adicionar layout automático e vamos definir a distância de 16 pixels entre os dois. Podemos ir ainda mais alto do que esses 32 pixels, porque talvez no futuro queiramos adicionar algum preenchimento ao espaço em torno deles e precisamos ter espaço para fazermos isso. Eu vou pegar estes e eu vou posicioná-los 72 pixels do autor. Agora pegue tudo isso, comande G e vamos chamar isso de depoimentos. Certifique-se de que ele está devidamente alinhado no meio e vamos posicioná-lo em 240 pixels da seção acima. Agora vamos fazer outra visão de pássaro para verificar se tudo parece bem e parece. [ MÚSICA] Você viu como era simples projetar esta seção de depoimentos? Obviamente, há muitas maneiras de fazê-lo. Você pode ir com grades. Você pode ir com um tipo diferente de controle deslizante. Cabe à sua imaginação. Vá em frente e crie esta ou sua própria versão dos depoimentos e assim que fizer isso, estamos prontos para seguir em frente. O próximo item da nossa lista de tarefas é provavelmente a seção mais importante da página e essa é a principal chamada à ação. É uma seção bastante complexa porque contém uma tabela de preços. Nada que não possamos lidar, mas pode ser um pouco complicado. Vamos ver como podemos criar isso na próxima lição. 14. : Bem-vindos de volta à aula. Nesta lição, estaremos projetando o principal call-to-action, e esta é, sem dúvida a seção mais importante da página porque pode ser um disjuntor de negócios. Os visitantes usarão esta seção para comprar o produto ou baixar a versão gratuita, mas essencialmente, é aqui que os usuários estão convertendo. Vamos nos certificar de que fazemos isso direito, e vamos a isso. Uma rápida olhada no wire-frame nos mostra que, originalmente, eu tinha planejado criar a área de preços e o call-to-action separadamente, mas eu acho que é uma idéia muito melhor incorporar ambos em uma única seção porque faz sentido certo. Se eu fosse fazê-los separadamente, eu teria dois conjuntos de botões, mas se eu mesclá-los, eu vou ter um único conjunto de botões. É muito mais claro assim. Além disso, esta coluna da tabela de preços é para a versão pro ou a versão paga do aplicativo, então precisamos fazer isso se destacar de alguma forma. Tudo bem, vamos a isso. Vamos começar digitando o texto que usaremos para o cabeçalho da seção. Vamos realmente ir em frente e copiar estes, colá-los aqui. Acho que vamos usar exatamente os mesmos estilos que usamos aqui. Vamos fazer uma cópia colada. Copiar propriedades, colar propriedades, e o mesmo vale para isso, copiar e colar. Vamos alinhá-los ao centro, e também alinhá-los à central uns com os outros. Vamos deslocar A e adicionar 32 pixels de distância entre eles. Está bem. Ótima. Agora, vamos em frente e adicionar nossa tabela de preços. Por isso, eis o que faremos. Começaremos trazendo o logotipo. Vamos para os ativos da marca, a cor do logotipo, e vamos redimensionar esse logotipo para que ele tenha 48 pixels de altura. Vamos usar a versão colorida para a primeira coluna da tabela de preços. Aqui, basicamente precisamos exibir a palavra livre para mostrar o preço do plano, depois a lista de recursos e a call-to-action, o botão para download. Isso deve ser relativamente fácil de fazer. Vamos pegar este texto e vamos colá-lo aqui. Só vai dizer grátis. Vou ampliar um pouco para que você possa ver o que estamos fazendo. Novamente, isso vamos alinhá-lo ao centro, vamos alinhá-lo com o logotipo. Vamos mudar A, estes dois para adicionar layout automático, e vamos definir 32 pixels de distância entre eles. Em seguida, vamos adicionar a lista de recursos. Para isso, vou pegar um parágrafo simples. Vamos colá-lo aqui, e vamos começar a digitar os recursos. Agora, vamos alinhar estes no meio. Tamanho da fonte, 18, altura da linha, vamos escolher 32 pixels porque eu quero que estes sejam espaçados um pouco mais, e finalmente, o que precisamos é de um daqueles botões chiques que fizemos. Entendido, cole-o. Agora o que podemos fazer é selecionar tudo, deslocamentos A para adicionar um layout automático. Certifique-se de desmarcar este bit. Ele vai ser vertical, e nós vamos fazer 64 pixels, horizontal, vertical, preenchimento, e também 64 espaçamento entre os itens. Para isso, podemos realmente adicionar uma cor de preenchimento de branco. Vamos adicionar uma sombra, e também arredondar os cantos. Oito pixels devem fazer muito bem. Tudo bem, então agora, este elemento deve caber dentro de quatro dessas colunas de grade. Se isso não acontecer, podemos simplesmente redimensionar este elemento porque isso é o que dá a este quadro inteiro sua largura. Se você não entende isso, aqui está uma explicação muito simples. Este pedaço de texto, esta caixa de texto, tem atualmente uma largura de 260 pixels. O quadro que eu criei com layout automático, que é este, tem um preenchimento horizontal de 64 pixels. Além destes 260, precisamos adicionar 64 à esquerda, 64 à direita. Sempre que redimensiono essa caixa de texto, meu quadro inteiro redimensiona junto com ela. Na verdade, é bem simples. Podemos fazer isso até chegarmos à largura perfeita para que ele se encaixe dentro de quatro colunas de grade. Agora, vamos duplicar isso e criar a coluna para a versão pro. Agora, se você se lembra do que eu disse anteriormente sobre fazer isso se destacar, porque isso é, afinal, para a versão pro, há uma maneira muito simples de fazer isso. Em vez de usar preenchimento branco, podemos usar nosso gradiente principal. Então podemos simplesmente selecionar este logotipo e podemos fazer tudo branco, assim. Então eu posso selecionar esse elemento inteiro, e eu posso mudar as cores para branco. Agora, esta descrição não é inteiramente precisa porque precisamos adicionar algumas coisas. A versão pro tem todos os recursos em livre mais vários orçamentos, rastreamento de metas, sincronização entre dispositivos, relatórios e sincronização com o seu banco. Isso, eu vou fazer ousado, e eu vou estar usando minha cor secundária, que é esta. Vou definir para 100 por cento. nos esqueçamos de mudar o preço. Isso vai ser $9,99 por mês. Vamos também mudar o estilo deste botão. Eu vou usar essa mesma cor secundária para o fundo e para o texto dentro, eu vou usar cinza, talvez 80 por cento, algo assim. Legal. Agora, vamos agrupar estes. Vamos posicioná-los em 64 pixels do texto acima. Vamos agrupá-los, Comando G. O que acha? Devemos acabar aqui? Como é que isto te parece? Pessoalmente, eu acho que poderíamos usar com um pouco mais de separação da seção acima e também um pouco mais de ênfase nesta seção porque afinal, esta é a seção mais importante da página, certo? Para acompanhar o nosso motivo aqui, o que vou fazer é simplesmente copiar este ângulo, a faixa. Vou colá-lo aqui. Eu só vou empurrá-lo até encontrar o equilíbrio certo, e eu também vou torná-lo maior, assim. Vou colocá-lo sob o nosso grupo recém-criado. Então eu vou pegar isso, eu vou colocá-lo dentro assim. Acho que parece muito bom, talvez um pouco maior. Sim, isso parece muito bom. Agora, só temos que brincar com o gradiente é um pouco. Vamos abrir o nosso plugin e vamos fazer algo com um bom tom de azul aqui, talvez algo assim ou assim. Não quero algo muito escuro, mas também não quero algo muito colorido. Eu acho que talvez eu vou deixá-lo para isso porque ele também tem algumas cores que podem ser encontrados nesta seção aqui. Isso é bom. Além disso, vou duplicá-lo, girá-lo um pouco. Para isso, podemos até usar um conjunto diferente de cores, talvez algo assim, ou talvez algo um pouco mais moderado. Podemos até diminuir a opacidade nesta camada. Eu acho que isso parece quase certo. Claro, você sempre pode entrar e mordiscar os detalhes, colocar tudo em sintonia, apenas para a direita, mas por enquanto, eu acho que isso é bom o suficiente. Como última coisa, como estamos sempre fazendo, selecione tudo, Comando G, para agrupar tudo. Vamos chamar isso de C-T-A principal ou chamada à ação. Legal. Tudo bem, como você viu nesta lição, eu me afastei de seguir a armação do fio e, em vez disso, eu criei meu próprio layout. Isso é totalmente bom para fazer. Como eu estava dizendo em uma lição anterior, o quadro de arame está lá para guiá-lo, e ele está lá para servir como um guia para o conteúdo realmente, não necessariamente para o layout. Esta seção aqui foi um bom exemplo disso. Agora, como de costume, vá em frente e crie sua própria versão deste call-to-action principal, seja seguindo o quadro de arame ou faça exatamente o que eu fiz, ou simplesmente invente algo novo. É inteiramente com você. Agora, uma vez que você faz isso, você está pronto para a seção final da página, e este é o rodapé. Isso está chegando na próxima lição. 15. Rodapé: Bem-vindos de volta à aula. Nesta lição, vamos projetar a seção final desta página de aterrissagem, o rodapé. É uma tarefa bem simples, então vamos começar. Agora, dando uma olhada no wireframe, podemos ver a composição do rodapé. Temos o logotipo aqui, um pequeno menu lateral no lado direito aqui, algumas informações sobre a empresa, as informações típicas de direitos autorais, e uma lista de links para redes sociais. Vamos começar. Vou começar trazendo o logotipo, e já que o temos aqui, vou copiar este e colá-lo aqui. Eu também vou trazer a grade, que possamos alinhar adequadamente os elementos aqui. Então vamos criar o menu lateral que você viu aqui em cima. Vamos copiar isso, colá-lo aqui. Vamos fazer um Shift A para criar um layout automático, horizontal, vamos fazer 32 pixels entre os itens. Quanto ao estilo, bem, vamos usar um estilo que já usamos anteriormente, que é este aqui, que é este aqui então Copiar Propriedades, Colar Propriedades, bom. Vamos pegar esses dois e alinhar centros verticais. Agora vamos pegar isso e alinhá-lo à borda direita da nossa grade. Agora, em seguida, vamos adicionar um separador aqui. Para fazer isso, vamos realmente recorrer a esses elementos bem aqui. Eu vou pegar um deles, e eu vou me mudar para cá colar isso dentro Basta movê-lo para o lugar, e vamos redimensioná-lo até que ele expanda toda a largura da minha grade e vamos trazer sua altura de volta para 48 pixels porque eu acidentalmente redimensioná-lo lá. Vamos posicionar isso, agora está em 48 pixels, vamos fazer talvez 64. Isso deve fazer o truque muito bem. Mas eu acho que, no entanto, pode ser um pouco demais, então vamos voltar para 48 na verdade, assim. Acho que parece um pouco melhor. Em seguida, precisamos adicionar as informações da empresa. Vamos copiar isso, colar isso aqui. Vamos usar o estilo de parágrafo para isso, então vamos copiar as propriedades disso, colá-las, alinhar tudo à esquerda. Também o que eu quero fazer aqui é fazer estes ousados e usar a cor primária. Porque estes são links. Na verdade, vou usar o normal. Eu não acho que ousado parece tão bem aqui. Negrito vamos manter para estes tipos de links, mas para estes, vamos usar o peso normal. Vamos trazer isso um pouco, para combinar com o espaçamento, assim. Temos 48 do texto ao separador e, em seguida, 48 do separador ao logótipo. Finalmente, vamos adicionar as informações de direitos autorais. Vamos fazer Editar, Colar e Corresponder Estilo. Vamos também posicionar que 48 pixels do elemento acima dele. O que mais? Bem, nós precisamos fazer os links para as redes sociais, mas em vez de apenas jogar links, vamos fazer ícones. Isso deve ser super simples. Vou usar ícones do conjunto que usamos essa classe inteira. Vamos procurar o Twitter. Vamos copiar isso, colá-lo em, K para redimensioná-lo, e nós vamos redimensioná-los para, eu acho que 24 pixels, é um pouco complicado. Vamos também adicionar a cor adequada a eles. O que mais temos? Facebook, eu acho, Eu adiciono Instagram. Vamos pegar Facebook, mesma broca K para escala, e depois redimensioná-lo para 24 pixels. Vamos colá-lo dentro do meu quadro principal aqui, e Instagram, copiá-lo, colá-lo e redimensioná-lo para 24 pixels. Agora, junte tudo, selecione esses Shift A para adicionar layout automático. Vamos fazer 32 pixels entre eles. Vamos nos certificar de que tudo está alinhado no meio. Vamos usar a cor adequada em todos estes. Vou selecionar os dois, alinhar os centros verticais, e eu vou trazer a lista de ícones diretamente para a borda da minha grade aqui. Então pegue esses dois, ordene G para agrupá-los. Agora o que posso fazer é certificar-me de que as minhas medidas estão correctas. 48 lá, 48 e 48, selecione tudo, comando G, e agrupe como rodapé. Agora, a única coisa a fazer é descobrir que tipo de espaçamento precisamos no fundo. Uma boa maneira de fazer isso é olhar o espaçamento que você usou no topo, e no meu caso, é, eu acredito que 64 pixels. Há muitos elementos aqui. São 64 pixels. Vamos fazer isso. Vamos selecionar minha área de trabalho e redimensioná-la de acordo. Salvem, e isso aí, senhoras e senhores, é a nossa página de destino terminada. Vamos dar uma última olhada nisso. Vou esconder a interface aqui, que possamos ver melhor. Tudo começou com a seção de heróis. Primeiro, criamos esse logotipo, navegação e fundo, e depois adicionamos o conteúdo de texto e a colagem de imagens. Em seguida, temos a primeira seção para recursos, seguida de uma segunda seção para recursos, usando, claro, um layout diferente. Em seguida, adicionamos uma pequena chamada área de ação. Em vez de fazer uma caixa simples, adicionamos esse plano de fundo a ela usando formas simples, sombras e gradientes. Isto é seguido pela terceira e última seção de recursos. Novamente, com um layout diferente, mas ligeiramente mais clássico. Depois seguimos isso com a galeria de capturas de tela, que fizemos parecer um carrossel completo com navegação, botões e também página nas operadoras. Seguindo isso é uma seção simples para depoimentos, com um controle deslizante simples. Então, provavelmente, a seção mais importante da página, a principal chamada à ação, que também inclui a tabela de preços. Finalmente, nesta lição, criamos a seção final na página, que é o rodapé. Agora é a sua vez de terminar de desenhar a página de destino. Vá em frente e crie o rodapé. Depois que o fizer, quero parabenizá-lo porque você acabou passar nesta aula com cores voadoras. Por favor, junte-se a mim na próxima lição para a conclusão. 16. A conclusão épica: Bem, parabéns por terminar esta aula. Eu realmente esperava que correspondesse às suas expectativas e você aprendeu algo valioso, algo que irá ajudá-lo em sua carreira. Agora, por favor, dedique um momento e anote as principais conclusões desta aula. Como eu estava dizendo nas lições anteriores, eu encorajo fortemente você a criar sua própria versão desta página de destino. Uma vez que você fizer isso, vá em frente e postá-lo na Galeria do Projeto porque eu lhe dará feedback lá se você quiser. Tenho certeza de que outros alunos lhe darão feedback também. Além disso, se você tiver dúvidas ou comentários, se quiser ver mais conteúdo como este no Skillshare, deixe seus comentários na guia de discussão. Eu adoraria ouvir de você. Agora, antes de encerrarmos as coisas, eu só quero fazer esta nota rápida. Esta classe, ou esta foi a primeira classe de uma série chamada Designing with Figma. Planeio fazer mais aulas como esta. Se você quiser ver mais conteúdo como este, certifique-se de me seguir. Com isso dito, muito obrigado por assistir e eu realmente espero vê-lo novamente em breve na próxima aula. Muito amor e respeito, cuide-se.