Figma para web design de UI e UX: primeiro design de página inicial

1. Olá!: Ei, eu sou Chris var1, um designer profissional de web e aplicativos no seguinte Gower, você e eu, vamos criar uma página inicial incrível na Figma. Se você não viu meu FIG, meu curso essencial leva. Comece com isso. Você vai precisar dessa base antes de pular para este bar. Agora, no final desta hora, você terá um design de página inicial completo para um site real. Mas, por favor, tenha em mente não há codificação envolvida. Agora, na Figma, estamos criando a aparência do site. E isso poderia liderá-los. Codewords vão pegar nosso design e implementá-lo em um site de trabalho real. Isso é uma coisa totalmente diferente. E se você tiver dúvidas sobre isso, é esse processo de codificação. Mais uma vez, lembro-me das pontuações essenciais que vão esclarecer tudo. Agora o que eu quero de você é uma réplica perfeita do meu design nesse vídeo. Então, com isso, quero ver sua versão. Então, por favor, publique-o na plataforma para que eu possa dar meus pensamentos sobre isso. Prometo que meu feedback será construtivo. Portanto, não se preocupe com suas habilidades. Estamos aqui para aprender. Isso não é julgamento. É tudo sobre se divertir e crescer como designer de portão, vamos começar a trabalhar. 2. Configure a versão de desktop o caminho correto: Bem-vindo de volta. Abra Figma, a versão autônoma, e vamos criar um novo projeto. Chame de LG, abreviação para essas pernas, ótimo dotnet. Certo, bom. A Ferramenta Frame e clique na redefinição da área de trabalho. Essas etapas devem ser muito familiares, mas esse é o ponto. Quero que você possa passar por essas ações com os olhos fechados até o final deste curso, com o quadro selecionado, alterar o valor da largura para 1920. Você pode deixar a altura como está. Vamos ajustá-lo à medida que nos movemos para baixo. Em seguida, a grade, como aqui na grade de layout, o valor padrão não é o que estamos procurando. Então, encabeça este ícone. Agora, a partir desta lista, escolha colunas. É por isso que você não deve tomar notas ao repetir as etapas mais importantes muitas e muitas vezes para o número de colunas. Tenho certeza que você já sabe que são 12. Para as margens. 360, por favor. Mesmo que a opacidade esteja definida como 10%, isso interferirá na gravação. É uma distração. Então, vou reduzi-lo para 3%. Você não precisa fazer isso a propósito. Mais do que isso, adicionarei duas guias que configurarão ou ativarão a área de 1200 pixels. Use Shift R para habilitar as réguas se você não as tiver ativas. Agora mova o cursor aqui no lado esquerdo e você verá esse ícone no cursor. Clique, arraste e mova-o para a borda esquerda. Você sentirá que o grande homem está tentando ajudá-lo a encaixá-lo no lugar e diminuir o zoom, se necessário. Repita para a outra borda da grade. Basicamente, essa é a base do nosso design. Este é o nosso ponto de partida. Abra o site no seu navegador. Ou seja, isso parece ótimo. Dotnet. A partir daqui, queremos baixar o logotipo, o que pode ser feito de várias maneiras. Se o seu navegador permitir, clique com o botão direito do mouse e veja se você pode baixar a imagem diretamente. Se isso não funcionar. Aqui está meu outro método. Clique com o botão direito do mouse e escolha Inspecionar nesta lista. Então isso é inspecionar. navegadores mais conhecidos têm essa opção. Estou usando o Firefox, a propósito, neste painel na parte inferior você está procurando a única coisa, esta parte aqui, logo que PNG. Se você mover o cursor acima dele, verá que este é um logotipo em um formato transparente, PNG e isso é lindo, é exatamente o que queremos. Clique nele. E agora você pode dizer que, uma vez feito isso, arraste e solte-o da sua área de trabalho para o nosso design. O melhor disso é que você não precisa redimensioná-lo. Já é exatamente como queremos. Em termos de colocá-lo, isso deve ser um acéfalo. Alinhe-o com a guia esquerda. Do topo. Deixe cerca de 30 pixels também dê data a ela. Não se preocupe com esse valor específico pois vamos jogar com ele mais tarde. Vamos fazer uma pausa porque há um ponto muito importante. Por favor, volte sempre ao nível de zoom de 100%. Isso é como escovar os dentes ou beber água. Não é discutível, não é opcional. Não se baseia no seu humor. Vou aumentar e diminuir o zoom com o mouse o tempo todo. Você terá que fazer a mesma coisa para verificar os vários detalhes. Mas nós sempre, e repito, sempre temos que voltar a 100%. Agora, por que estou fazendo isso tão grande coisa? Porque nosso trabalho será visto em 100%. Sempre temos que julgar nosso trabalho através dos olhos do usuário. Vamos notar todos os tipos de detalhes de minutos finos. Mas se aumentarmos para 100%, esses detalhes são o intestino e se perderão. Portanto, esse é um erro muito comum entre os iniciantes porque eles conseguiram ampliar. Eles veem todos esses detalhes e eles apenas assumem que os usuários também os verão. E, obviamente, esse não é o caso. E aqui está o outro lado. Você diminui o zoom para 50% ou algo parecido. Você adiciona o campo de texto que diz bem-vindo ou o que quer que seja. Agora é hora de definir o tamanho certo? 12 é claramente pequeno demais. Mas como estamos ampliados, podemos escolher um valor como 70. Agora, isso parece bom neste contexto específico, nesse nível de zoom específico. Mas quando você volta a 100%, e você pode ver claramente que isso é muito grande. Isso é tão grande quanto o logotipo e é apenas uma palavra. É assim que os iniciantes costumam se enganar, que a visão fica distorcida por causa do nível de zoom errado. Ok, exclua os textos e familiarize-se com essa opção. Inquieto, diga que a tecla de atalho não faz absolutamente nenhum sentido para mim. Mude o 0. Então, você terá que soltar o mouse para realmente usar o Shift Z. É o que é em outros programas de design é controlado um, mas que há algo completamente diferente aqui. Por enquanto. Por favor, certifique-se de se acostumar com este menu suspenso aqui e que você sempre volta para 100%. Vamos fazer uma pausa rápida. 3. Crie o cabeçalho: Bem-vindo de volta. Agora temos a base. Agora vamos passar para o cabeçalho. Para facilitar as coisas, selecione o quadro e menos alterações na cor de fundo. Estou procurando o cinza muito claro e tenho um código de cores exato em mente. É F2, F2, F2. À medida que você cresce e experimenta, logo começará a lembrar alguns códigos de cores essenciais. Confie em mim nisso. Agora, aperte a tecla de escape e espero que você possa ver por que o sistema de grade é um problema. Então, olá isso clicando neste ícone aqui porque precisamos nos concentrar no que está acontecendo, no Canvas real. Agora, para o cabeçalho, precisamos do fundo branco puro, figma. Não confiamos tanto em retângulos porque temos a Ferramenta Frame pressionada F e arrastamos um para fora. Eu realmente não me importo com o tamanho que seja. Tudo o que eu quero é ter certeza de que o logotipo está incluído nesta caixa. Se você fez certo, você deve ver o logotipo dentro do quadro 1, que está dentro deste topo. Certo, agora vamos ativar um preenchimento branco puro. É por isso que escolhi esse tom particular de cinza porque funciona muito bem com esses retângulos brancos. Agora, sobre o tamanho dessa chuva, não importa o que seja, vamos mudá-la para 1920. E isso porque esse é o tamanho do nosso projeto. Agora, para centralizá-lo, basta mover o mouse para cima e clicar neste ícone. Ok, agora para a altura, não precisamos muito, então cerca de 100 pixels devem estar bem. Mais ou menos 10, 20 pixels dar ou tirar está sempre na mesa porque realmente nada é colocado em pedra. Você realmente tem que se ajustar à medida que avança bem, ok, agora alinhe em cima clicando aqui. Agora, o logotipo precisa de um pouco de trabalho porque está dentro desse retângulo. Podemos clicar neste ícone aqui para alinhá-lo verticalmente dentro do quadro. E, claro, ele precisa tocar no Guia à esquerda. Agora. Ok, coisas boas, simpáticas e simples. O próximo passo é arquivar flat icon.com, que é novamente meu site para ícones. Novamente, você precisa de uma assinatura para isso e não havia recursos gratuitos por aí que sejam comparáveis. Certo, precisamos das mídias sociais para o lado direito. Tenha em mente que o ícone plano não é gratuito, mas como o melhor dos melhores de longe. Lamento dizer isso. Não há sites semelhantes que sejam totalmente gratuitos. Certo. Estamos procurando os pacotes de ícones. Poderíamos pesquisar o Facebook, depois o Twitter e o Instagram e assim por diante. Mas eu prefiro encontrar o pacote. Isso porque ser consistente é incrivelmente importante. Então digite as mídias sociais e dê uma olhada. Eu recomendo vivamente que você use ícones da mesma cor. Parece muito mais limpo, muito melhor, mas é claro, isso é uma coisa subjetiva. Agora, eu preferi essas mídias sociais de volta, ícones arredondados. Acho que estes parecem 10 vezes melhores na minha mente. Adoro essa simetria. Se você não gostar disso de volta, este também é um segundo forte. Queremos baixá-los como SVGs. Vou adicioná-los rapidamente à minha coleção clicando aqui. Isso é bastante intuitivo, então não vou gastar muito tempo nisso. Agora, quando estiver pronto, baixe a coleção e escolha SVG. Png não é uma ótima escolha porque não é tão crista. A qualidade não é tão boa quanto os SVGs exportam, arquivam e arrastam e soltam na Figma. Agora, estou indo muito rápido, mas espero que você esteja trabalhando em sua segunda visualização. Ok, temos todos eles selecionados. Por favor, vá buscar a ferramenta de escala e redimensione-a para algo ao longo dessas linhas. Tão pequeno. Em seguida, amplie 100% para que possamos verificá-los. Idealmente, eu gostaria de tê-los com menos 40 pixels enquanto você os está diminuindo. Fique de olho no campo de largura. Bem, a largura e a altura são as mesmas porque são círculos perfeitos. Mas você entende a ideia. olho nesta parte quando estiver feliz com o tamanho, mude para o movimento para bem, agora reposicione o mouse entre dois ícones e você verá algumas linhas cor-de-rosa. Vou aparecer, clicar e arrastar para fora para aumentar a distância entre eles. Quero ver dez pixels aqui, caso você não goste dessa ordem em particular, vá acima de um desses círculos, clique, segure e arraste o ícone para outro lugar. Isso está disponível porque todos eles estão selecionados e que o mesmo tipo de camada, a propósito, estou em movimento para, uh, agora e não há mais nada acontecendo. Não há técnica avançada aqui e apenas coisas básicas na Figma. Ok, agora, uma última coisa. Vamos movê-los na posição correta. Clique em arrastar e não solte. Procure essas duas linhas. Isso significa que o conjunto está centrado verticalmente na moldura branca, mas também está alinhado com este guia. E isso é absolutamente perfeito. Uma coisa, porém, não os deixe pretos. Clique nas cores de seleção e o seletor de cores deve aparecer. Escolha a ferramenta conta-gotas, este ícone aqui. Ok, agora experimente a laranja do logotipo, e é basicamente isso. Estamos acabados. Parabéns pelo primeiro cabeçalho. Trabalho incrível. Agora vamos fazer uma pequena pausa e depois continuaremos. Obrigado. 4. Crie o menu principal: Bem-vindo de volta. Antes de passarmos para o menu principal, é melhor você o nome enquadrar um para a cabeça. Havia algo semelhante. É melhor manter-se organizado. Então, novamente, por favor, renomeie-o. Ok, agora, arraste um novo quadro e é a mesma história de antes. Nenhum tamanho específico, apenas um aleatório. Antes de ajustarmos, ative um preenchimento, abra o seletor de cores e devemos ter essa laranja disponível por baixo. Ok, lá vai você. Cores de documentos porque o agora para a largura 1920 é a escolha óbvia. Hoje em dia, este é um dos estilos mais populares do Menu Principal. Sem efeitos, sem gradientes extravagantes, apenas agradáveis e simples. Centralize horizontalmente e vamos falar sobre o tamanho. Isso abrirá nossos itens do menu principal, mas isso é sobre isso e nada mais. Então eu acho que 60 pixels devem ser suficientes, todo o caminho ampliado para 100% e ver se isso faz sentido. E acho que está tudo bem, embora não possamos mudar de ideia mais tarde depois de adicionarmos os itens. Ok, vamos pegar a ferramenta de tipo e vamos começar com a casa. Pode obter 14 pixels. E vamos conversar sobre o tipo de letra que vamos usar. A resposta curta é esse Poppins. Gosto porque tem algum personagem muito molhado, mas não é tão chique. É como uma bela camisa ajustada, um bom meio entre a camisa havaiana e uma formal que deve ser usada com uma gravata borboleta. Então, um médium feliz, isso é Poppins para mim. Agora, eu queria me destacar, então vou habilitar o recurso all caps. Isso está muito alinhado com a versão existente do site. Lembre-se, se você quiser desativar esse estilo de todas as maiúsculas, clique no menos. Estou feliz com ele como está, mas é um pouco leve demais para minha base. Então, vamos mudar o estilo para semi-negrito. Parecendo bem até agora, mova-o no quadro laranja e coloque-o para que ele toque no guia esquerdo, embora não seja obrigatório. Eu recomendo que você use o Shift a para transformar isso em uma chuva de layout automático, caso você não goste de atalhos, vou pressionar Control Z, para que eu possa escrever o trecho desta lista, escolha adicionar layout automático. Agora, novamente, coisas boas. Observe que temos algum espaço extra ao redor Isso é preenchimento e você pode ajustá-lo a partir daqui, configurá-lo para 0, que o eliminará do lugar, mas não se preocupe, agarre-o e mova-o para trás pertence. Agora, o próximo passo é importante. Verifique se você selecionou a casa e não o quadro em si. Ok, use o Controle D para criar uma cópia e duplicar. E como este é um layout automático, a Figma sabe onde posicioná-lo à direita deste item. Como ele sabe disso? Selecione o quadro e mostrarei que é essa seta aqui. Esta seta diz que vai ser horizontal. Se você escolher o outro, essa será a nossa lista vertical. Obviamente, não queremos isso, então mude-o de volta. E vamos editar isso Clique duas vezes para selecionar isso. Você pode precisar fazer isso duas vezes, a propósito. Ok, isso deve dizer aprender Photoshop. Esse é o meu blog, essa é uma das páginas. Ele escapou para confirmar a alteração e usar Control D mais uma vez. Se você não estiver bem com a tecla de atalho, apenas tudo para arrastar ou Option Drag. Se você estiver em um Mac, isso precisa ver brindes. Certo. Agora, o próximo item é sobre Chris estéril e o último, contato. Todo site precisa dessa página. Agora, por favor, tenha uma abordagem relaxada sobre o layout automático e todas essas teclas de atalho. Se você quiser apenas adicionar camadas de textos regulares e, em seguida, espalhá-las manualmente. Isso é totalmente bom também. Tudo o que eu pedi é ter certeza de que você tem o mesmo espaço vazio entre eles. Falando nisso, selecione o quadro. A lacuna padrão é de 10 pixels, mas isso é um pouco baixo, especialmente considerando a quantidade de espaço que temos que brincar. Então clique aqui e sugiro que você segure o shift e toque na tecla de seta para cima. Não tenho um valor específico em mente. Às vezes eu só congelo o dialeto. Nesse caso, eu gostaria que este último item de menu fosse um pouco sobre o meio do quadro, você pode perguntar, por que não centralizar este menu principal? E é uma resposta simples porque os usuários, estaria do lado esquerdo. Há muito mais a dizer, mas essa é a essência, terá uma discussão mais profunda mais adiante no curso. O item inicial é amarelo no design existente, você pode acionar seu navegador, você pode acionar seu navegador, clicar com o botão direito do mouse e inspecionar isso. E o código de cores é FF FE 00 000. Como uma dica rápida, se você desmarcar assim, terá que clicar duas vezes para chegar a essa camada de texto. Clique uma vez e terá Rimland selecionado clique duas vezes e você terá emoldurado para selecionar duas vezes novamente, desta vez acima de casa, e finalmente o terá. Isso é um pouco tedioso. Então, aqui está uma desseleção de raios mais rápida. Certo. Agora, com tudo isso eleito controle glyc casa. E é isso. Likud controlado e você está pronto. Ok, abra o seletor de cores e use esse código, FS e FF, FE 00 , 00, 00. Ótimo trabalho. Portanto, lembre-se, se você controlar o clique em uma camada de bolha que está dentro de vários quadros, você selecionará imediatamente coisas incríveis. Vamos renomear este para o Menu Principal, e terminamos por enquanto. Muito obrigado. 5. Configure a caixa de pesquisa: Bem-vindo de volta. Vamos lidar com a caixa de pesquisa copiando colando esse pedaço de texto do design existente. Boa a Ferramenta Type e cole-a. Brindes de design feitos com amor, gratuitos para uso comercial. Incrível. Centralize o texto tanto em termos de posicionamento, mas também neste lugar aqui. Isso já está em todas as maiúsculas. Então, vamos ajustar o tamanho. Vamos com Poppins, resistente, mas quero algo um pouco mais suave. Bold basicamente significa que você está fazendo uma declaração forte, mas não queremos muita atenção a esse título. Então, um estilo mais leve pode funcionar melhor. E na luz parece estar bem. Por favor, deixe cerca de 40 pixels do menu principal. Isso não é ressonância, não, aliás, para os Pexels. Mas queremos atingir esse ponto ideal entre ter um design compacto e deixar espaço suficiente para respirar. Agora, para ter certeza de que você está no caminho certo, segure a tecla Alt e passe o mouse sobre o menu principal. Em seguida, use as teclas de seta com o quê? Sem turno. Ok, agora para a caixa de pesquisa, vamos começar com nosso tipo de texto em busca do brinde. E isso vai ser uma dica que está dentro da caixa. Mesmo que a maioria das pessoas saiba como usar uma caixa de pesquisa, essa dica faz com que pareça um pouco melhor para o estilo. Vamos derrubá-lo bastante. Eu diria que talvez Poppins, 13 pixels regulares, nenhum tratamento de tampas. Essa deve ser uma palavra simples e direta. Lembre-se de abrir este painel para desativar essa configuração , a configuração todas as maiúsculas. Você faz isso clicando neste símbolo de menos. Ok, vamos escolher uma cor depois de adicionar o plano de fundo para esta região. Pressione Shift a para ativar o layout automático. Poderíamos ter usado o quadro simples, mas isso é um pouco melhor. Ative um sino clicando aqui. branco puro é totalmente bom. Agora, ok, agora vamos redimensioná-lo para algo sobre talvez 500 pixels, 500 ou algo assim ao longo dessas linhas. Agora, por que 500 pixels? Porque o fardo será colocado dentro dele e não há nada mais importante do que essa área. Algo agora, embora 300 pixels não ocupasse o espaço corretamente, pareceria estranho, muito pequeno. Mas algo acima dos 750 seria um exagero massivo. Caso você queira trabalhar com precisão, vá para o campo W aqui e digite 550, o que, qualquer que seja o valor que lhe convier para a altura. Lembre-se, o menu principal era de 60 pixels, 600. No entanto, use o mesmo valor aqui. Você pode notar que o campo H está acinzentado. Isso pode acontecer com você. Isso é por causa de uma configuração aqui a partir de restrições e redimensionamento. Mas vamos continuar. Vamos mantê-lo simples. Vá aqui e arraste isso para baixo. Agora, o campo de idade, o campo de altura é desbloqueado porque Figma entende com tryna fazer algo aqui. O texto não está mais centralizado, mas abra a configuração de preenchimento a partir deste local. A configuração padrão é superior esquerda. Estou procurando por este. Certo? Algumas pessoas gostam de centralizá-lo assim. Mas como o botão de pesquisa estará dentro dele, acho que vou deixá-lo assim. Ok, bordas quadradas são um pouco 2005. Então, vamos arredondá-los para cinco pixels. E porque temos aqui neste painel, vamos centralizá-lo dentro desse quadro grande. Agora, a marcha, com boa aparência até agora em relação ao título, deixa 20 pixels entre eles. Algumas camadas de texto têm essa caixa delimitadora que é um pouco maior que o texto real. Portanto, a medição pode não ser 100% precisa, mas se você permanecer consistente e usar a mesma medição do mundo, isso é tudo o que importa. Então confie nas medidas mostradas pela Figma e você estará pronto para ir. Agora, é hora de configurar o fardo, dar a ferramenta de tipo e escrever a pesquisa. Agora você pode notar algo um pouco estranho aqui, mas não se preocupe, vou explicar. Lembre-se de como fizemos o menu principal, onde os itens do menu seriam colocados um ao lado do outro quando pressionamos o controle D, Isso é layout automático em ação. Agora, deixe-me excluir isso. Neste caso, aqui precisamos fazer o seguinte. Selecione o quadro e, na janela pop-up de preenchimento, temos esse menu suspenso aqui que você pode ter perdido. Agora ele diz de volta, mude-o para o espaço entre eles. Então, de volta para o espaço entre eles. E lá vai você. E enquanto estamos aqui, vamos editar o preenchimento na borda esquerda para dizer 20 pixels. Ok, a próxima cama deve ser simples, como o texto de pesquisa e o cabeçalho ou clique com o botão direito do mouse e escolha adicionar layout automático. Feito. Em seguida, adicione um preenchimento a ele. E, claro, isso deve ser laranja. Você notará que ainda não configuramos estilos de texto ou cores. E isso porque até agora não há necessidade disso. Além disso, este será um projeto muito pequeno, por isso não é realmente necessário. Agora, mude o texto em branco e completamos as coordenadas com um valor de cinco pixels para tornar este botão mais saudável, alterar a rebatida e, em seguida, está bem para a parte superior e inferior 40 deve lhe dar um botão de tamanho decente. Agora sei que temos uma lacuna diferente para a caixa de pesquisa, mas isso é intencional. Sinto que parece melhor assim porque temos a mesma distância ao nosso redor botão e isso é 10 pixels. Ok, agora recuando, isso é tudo caixa de pesquisa. Ainda temos alguns detalhes para resolver, mas deixe-me mostrar por que usamos o Auto Layout. Pegue qualquer borda e redimensione. Você notará que ainda faz sentido. Nenhum método. De onde você arrasta? Menos pausa agora para que você possa rebobinar o vídeo e trabalhar comigo. Vejo você em um minuto. 6. Crie um menu de entrega: Bem-vindo de volta. Temos todas as caixas de pesquisa e o contraste é um pouco decente, mas sinto que precisamos de um pouco mais de separação entre eles. Para nos ajudar com isso, vou adicionar um derrame. Agora, isso será aplicado a esse quadro que, a propósito, deve ser renomeado para pesquisa. Então, por favor, lide com isso agora, renomeie-o para pesquisar em termos de cor, estamos procurando esse ponto ideal. Não muito escuro, nem muito leve. Acho que algo nessas linhas deve funcionar bem. O código de cores é C9. C9, C9. Incrível. Agora vamos fazer o menu suspenso para movê-lo. Vamos duplicar essa caixa de pesquisa, usar o Controle D e movê-la para o lado, renomeá-la para menu suspenso antes de mergulharmos nela. Agora, ok, agora a primeira coisa que precisamos configurar é alterar esse texto, renomeá-lo até o momento. Mas você pode usar todas as tampas para isso. Não há necessidade de ir para a transformação do texto. Às vezes, é mais fácil. Ok, em seguida, teremos que adicionar o ícone suspenso. Então, irei acionar meu site favorito para aquele lab icon.com enquanto eu passar por essas etapas, deixe-me sublinhar uma coisa fundamental. Não adicionamos nada ao nosso painel de ativos. Normalmente, esse botão de pesquisa, nem configuramos nenhuma cor ou têxtil. Poderíamos fazer isso. Mas se não planejamos usá-los em várias páginas, por que se preocupar? Se estamos falando de algumas páginas? Configuração do tutorial, estou mais do que feliz em pular algumas dessas coisas que realmente nos desfocam, que nos afastam do trabalho de design real. Ok, excluímos o botão e a camada de texto foi movida. Não se preocupe. Traga lá e encolha. Você não precisa usar a ferramenta de escala para esta. Se você usar esse tipo de ícone, isso suportará o empréstimo. Portanto, não há necessidade de se preocupar com o ícone olhando por 10 ou qualquer coisa assim. Estou procurando 36 pixels, embora faça apenas uma preferência pessoal. Se você colocou o ícone dentro do quadro, a data voltará para o lugar. Agora, por que isso volta dessa forma? Se você selecionar o quadro suspenso, verá que esta opção está configurada no espaço da janela de preenchimento entre, ok, eu gostaria que este item tivesse cerca de 120 pixels de largura. Certo? Agora olhando para ele, acho que esqueci de mudar a cor da mão. Veja, esta é uma seleção aqui. A data é o valor padrão. Isso está ativo. Este texto aqui. Por outro lado, isso é uma mão. Este é um pedaço de texto que desaparecerá quando você começar a digitar. Então, por favor, controle clique nele e abra o seletor de cores. Embora eu esteja tentado a usar o cinza do traço, acho que isso é muito leve para ele. Então, em vez disso, vamos com algo em torno desse código de cores. A4. A4, a4. Ok, isso está parecendo melhor. Agora a questão é: precisamos dessa palavra extra entre esses dois campos? Este aqui diz tipo por e eu digo não. Em vez disso, acho que preferiria uma altura menor, mas ambos os itens, selecione-os. Ambos os 50 pixels devem ser um melhor ajuste. E vou fazer algo um pouco controverso, mas estou firme por trás disso. Para o quadro de pesquisa, altere o preenchimento no lado direito para 50 pixels. E isso porque eu quero cinco pixels nos três lados. Isso deve parecer muito melhor. E, de fato, sim. Antes de fazermos uma pausa, vamos centralizá-los horizontalmente. Para conseguir isso, selecione os dois quadros e agrupe-os. Sim, nosso primeiro grupo neste curso. Ok, você pode usar o Control G ou clicar com o botão direito do mouse depois que eles tiverem selecionado. Eu prefiro o Control G por razões óbvias, é um pouco mais rápido. Em seguida, use este ícone aqui, alinhe os centros horizontais. Agora podemos desagrupar esses itens assim. o botão direito do mouse no painel de camadas e pronto. Basicamente, terminamos. E estou muito feliz com nosso progresso. E espero que você esteja se divertindo passo a passo. Vamos criar este site incrível. Vejo você em um minuto. 7. Crie o item mais importante: o cartão: Bem-vindo de volta, saltos altos. A parte mais importante do nosso design, o cartão. Isso é essencial porque ocupa cerca de 80% da página. Isso determinará a aparência da nossa página inicial, então é melhor fazer um bom trabalho com ela. Por favor, certifique-se de trabalhar em sua segunda visualização. Ok, abra, isso parece ótimo. Dotnet, clique em qualquer brinde. E quando você estiver, essa página é salvar a foto, copie o título e adicionada à Figma. Você pode deixá-lo como está por enquanto. Para a descrição, copie cerca de duas frases, parte e cole-a. Mas desta vez, desenhe uma caixa. Ok, adicionamos o texto porque vamos usar o layout automático, pegar os dois e usar Shift a. Você notará que terá um layout automático verificando o painel de camadas. Este é o símbolo para isso. Certo? Agora, adicione o preenchimento branco. Isso não parece todo aquele salto, mas não se preocupe, vamos mudar esses estilos de camada e ficará melhor. A primeira coisa que quero consertar é o preenchimento. Use 24 todas as arestas. E isso porque isso tem um grande impacto na aparência do site e tem a sensação. É tudo sobre esses pequenos detalhes. Para o título, vamos usar Poppins, semi negrito, 20 pixels, sem transformação de todas as maiúsculas. O design existente tem um estilo normal, mas acho que prefiro o semi ousado. Não importa o caso, podemos experimentar tudo em apenas algumas lições na estrada. Certo, Poppins semi negrito 20. Para a descrição, vamos tentar Poppins regular 14 pixels, sem todas as maiúsculas. Novamente, você não precisa saber disso de cor e não precisa tratar cada escolha como se fosse uma coisa permanente. É muito provável que vamos mudar isso. A chave aqui é garantir que a descrição seja insignificantemente menor do que o título do livro. Isso é estranho. O principal. Certo. Caso o preenchimento na parte inferior não pareça com isso, faça o seguinte com a descrição selecionada, escolha a segunda opção aqui chamada auto hide. Com o selecionado, a caixa branca se expandirá e o preenchimento de 20 pixels deve parecer certo. É por isso que estamos usando o layout automático. Sem isso, teríamos que ajustar constantemente o retângulo de fundo e medir as coisas constantemente. Não é o fim do mundo, mas ainda assim isso é muito melhor. Falando em trabalhar de forma mais inteligente, queremos ser colunas como na versão ao vivo. Como devemos fazer isso? Bem, há duas maneiras. Número um, fazemos algumas contas. 1200 pixels, área ativa menos duas lacunas. Digamos que os pixels cada, são 16 no total. Então 1200 menos 60 é 1140 dividido por três, isso é 380. Então esse é o primeiro método. Um cartão deve ter 380 pixels de largura. Selecionaríamos o quadro e, em seguida, alteraríamos o valor de w para 380. Agora, aqui está o segundo método. Se simplesmente arrastarmos essa alça para fora, as coisas não vão dar certo. Então, vou mudar alguma coisa. Vou controlar o clique na descrição e vou me concentrar aqui. Isso diz onde. E isso é porque eu desenhei aquela caixa, eu fiz. Mas digamos que eu queira que o texto se ajuste com base na largura do quadro. Bem, temos que mudar isso para preencher o contêiner. E deixe-me explicar. Esta é uma camada de texto que está dentro do quadro. Portanto, o contêiner é o quadro. Se definirmos a camada de texto para preencher o contêiner, isso significa que ele seguirá sua largura. Aqui está o que isso parece. Selecione o quadro e torne-o mais amplo. Assim, o texto está se reorganizando é como mágica. Em mais do que isso, ainda temos esse preenchimento de 20 pixels. Se eu fizer o contêiner de nanowire, esse texto vê isso e ele se ajusta, cresce em altura. Isso é totalmente incrível e eu adoro. E aqui está outra vantagem em que eles compram, tenha mais textos com essa descrição. Deixe-me colar algo. E lá vai você. Parece adorável. E se eu remover parte dele, mesma coisa, o layout muda. Ok, deixe-me redimensioná-lo para 380 pixels e vamos fazer uma recapitulação. Criamos duas camadas de texto para o título que acabei de coletar, e depois colei para a descrição. Eu fiz a caixa e depois coloquei algo dentro disso. Em seguida, para ambos são usados Layout Automático para envio. Ei, adicionei um preenchimento de fundo e configurei um preenchimento de 20 pixels para a largura do cartão. Eu poderia ter feito algumas contas, mas optei por adicionar mais flexibilidade ao projeto. Fiz isso selecionando a descrição e configurei-a para preencher o contêiner. Recipientes simplesmente significa quadro. Nesse caso, você pode pensar nisso como dentro do quadro. Ok, com essa configuração, agora posso redimensionar o quadro e a descrição será ajustada. Mas esteja ciente de que não fizemos nenhuma alteração no título. Então, se adicionarmos mais linhas a ele, não parecerá certo. Então, novamente, selecione-o e altere-o para criar contêiner. Agora você pode ver claramente que está na borda aqui. Se eu colar mais textos, estaremos prontos para ir. Voltando a ele. Não configuramos a distância entre essas duas camadas. Então, vamos fazer isso, selecione o quadro e defina esse valor para 10 pixels. Finalmente, mova isso para baixo e vamos adicionar um retângulo. Torne-o tão largo quanto o quadro e não se preocupe com a altura. Certo, está bem. Agora, onde a foto, vamos usar Control Shift J. A que baixamos no início da aula é totalmente boa, se eles estão no lugar e agora você pode redimensionar tão alto quanto necessário. Você quer ter certeza de que o canto está visível. E quando estiver feliz, mova-o um pouco para baixo. Espero que isso tenha sido interessante, mas não se preocupe se você não receber esse recurso de redimensionamento ainda. Não é o fim do mundo. É uma técnica avançada para torná-lo um pouco mais rápido. Se você não consegue gerenciar, tudo bem. Por favor, venha a este tribunal e peça ajuda. Muito obrigado. 8. Como melhorar os cartões: Bem-vindo de volta. Sempre há escolhas em Figma. Nós vimos anteriormente como podemos adicionar um pouco de complexidade jogando com o recurso de redimensionamento. Não precisávamos fazer isso, mas isso nos deu muito mais flexibilidade no caso de quisermos tornar o cartão mais estreito ou talvez adicionar a quarta coluna, o trabalho levará apenas alguns cliques. O trabalho será feito com apenas alguns cliques. Se não adicionássemos essa complexidade, haveria muito mais trabalho manual. É o mesmo com o que estamos prestes a fazer. Poderíamos duplicar este cartão várias vezes. Mas e se quisermos alterar o raio do canto, por exemplo, ou talvez o tamanho do título. Seria muito mais trabalho manual. Então aqui está o que eu proponho. Selecione o quadro e essa forma aqui. Verifique o painel de camadas para garantir que você tenha a coisa certa selecionada. Agora, transforme-o em um componente clicando aqui, você notará que o símbolo no painel de camadas foi alterado. E isso significa que estamos prontos para ir. Por favor, remova-o do quadro, basta arrastá-lo para fora dele. Normalmente, eu criaria uma página separada para todos os meus componentes, mas quero que você a veja aqui. Ok, em seguida, arraste algumas cópias, tudo para arrastar é o melhor caminho a percorrer. Ok, outro, mas desta vez Centralize dentro do quadro clicando aqui. E, finalmente, mais um. Tenho certeza de que queremos pelo menos mais dois desses. Então, vamos aumentar o tamanho do quadro. Selecione este top e arraste-o bastante para baixo. Faça isso realmente grande. Ok, em seguida, use alterar, arrastar e deslocar para criar mais algumas cópias. Grade impensável de três por três. Isso deve ser suficiente. Enquanto eu estou trabalhando em segundo plano, deixe-me dizer que é essencial que mudemos as fotos e os títulos. Se deixarmos um único cartão nove vezes, isso vai dizer muito sobre nós, pois os designers dirão que somos preguiçosos em qualquer projeto, certifique-se de diversificar seu conteúdo. O objetivo é simples. Você quer fazer com que pareça que o projeto já foi codificado. Assim, este é o site ao vivo. O conteúdo repetitivo ou falso simplesmente quebra essa imagem, quebra esse sonho, essa miragem, o que quer que você queira chamar, certo? Ok, agora de volta para onde agora temos essa grade. Mas não estou apaixonado por isso. Então, vamos voltar ao componente principal que está ao lado do quadro grande. Ok, agora, selecione o quadro, o layout automático que contém nossas camadas de texto. Digamos que queremos completar essas coordenadas, certo? Bem, não use esse campo aqui porque isso também afetaria as bordas superiores. Não queremos isso. Em vez disso, clique aqui. Agora, com esta nova linha, podemos controlar cada canto individualmente e queremos as bordas inferiores. Portanto, esses são os dois últimos campos com 15 pixels. E observe como a mudança se espalhou por toda a linha. É por isso que adicionamos um pouco de complexidade com os componentes. Acho que vale a pena o problema. Agora, que tal adicionarmos o derrame ao estudioso do AVC foi C9, C9, C9. Sem portão. Aqui vamos nós Muito melhor. Só pela diversão disso. Selecione o título e toque na tecla de seta para baixo. Essa alteração está disponível para nós devido a esse recurso Layout automático. E como é um componente, um se espalha por todas as outras instâncias. Novamente, uma instância é um clone. Em outra nota. E se fizermos o título lido? Bem, vamos dar uma olhada. É assim que ficaria. Mas você sabe o que, eu acho que prefiro uma cor cinza escuro, não preto puro, a propósito , mas perto disso , para, fazer. Este é um dos meus códigos de cores favoritos e parece um pouco mais refinado versus preto puro para que a coordenada, você pode não perceber isso. Mas acredite em mim, é uma diferença sutil, mas perceptível porque eu gosto muito disso. Deixe-me adicioná-lo aos meus estilos de cores só para que possamos praticar novamente, não é realmente necessário, mas acho que é uma boa prática. Vou chamá-lo de texto escuro ou algo assim. E estou feliz por termos introduzido nosso primeiro estilo de cor em nosso projeto. Lembre-se de trabalhar em sua segunda visualização. A propósito, é claro, temos algumas camadas que precisam do mesmo tratamento. O título, a data e o ícone suspenso. Selecione o título com um único clique. Em seguida, use o controle Shift clique para capturar a data. E controle a mudança como mais uma vez para selecionar a seta. É assim que seu painel de camadas deve se parecer com essas três camadas selecionadas. Agora. Agora, escolha texto escuro e estamos prontos para ir. Aqui está o que eu quero que você faça antes de continuarmos controle da cabeça Shift K e substituímos todas essas imagens. Claro, você terá que baixá-los deste parece gray.net. Mas sim, substitua as imagens e depois disso, substitua os títulos e as descrições. Deixe-me mostrar-lhe uma situação. Digamos que o título seja muito longo e o cartão cresça em altura. Agora, poderíamos fazer todo tipo de truque aqui, mas isso seria muito complicado. E eu não quero fazer isso. Em vez disso, quero que você faça isso. Remova uma linha na descrição. Esta não é uma solução perfeita. Nossas configurações não nos permitirão flexibilidade máxima, mas isso é mais do que bom o suficiente para este ponto. Quando terminar, tente estilos diferentes para o título, a descrição do preenchimento e veja o que você pode criar. É aqui que você pode brincar com as coisas. Aproveite o seu tempo e divirta-se com ele. 9. Configure a navegação secundária: Bem-vindo de volta. Vamos configurar a navegação secundária colocada entre a caixa de pesquisa e a grade. Anteriormente, ignoramos isso porque os cartões têm a maior prioridade no meu livro. Uma última coisa sobre eles, porém, neste momento, poderíamos fazer muito mais em termos de redimensionamento, flexibilidade e até estilo. Mas, honestamente, isso seria mostrar recursos sigmas e nada mais. É tão fácil ficar sobrecarregado com todas essas configurações. Então vou deixar o muito avançado, talvez no final do curso, caso você tenha essa situação em que um dos cartões é um pouco maior, vá para o componente principal, selecione o quadro que contém os dois textos camadas e altere esta parte aqui em vez de conteúdo HCG, mude-a para fixa. Isso vai quebrar algumas das configurações anteriores. Mas, novamente, está tudo bem porque é um projeto tão pequeno. E, novamente, consertá-lo, torná-lo 100% flexível exigiria muita complexidade. E eu não quero fazer isso agora. Ok, para as categorias, obtenha a tecla de atalho da ferramenta de tipo D e escreva tudo. Em seguida, mude um para o layout automático. Você pode ver como a caixa se expandiu, faz o preenchimento, Vamos soltá-la para 0. E se estivermos ouvindo no painel direito, vamos configurar um layout horizontal. O próximo passo é muito importante. Certifique-se de selecionar a camada de texto e não o quadro em si. Verifique o painel de camadas para isso. Ok, agora pressione Control D várias vezes para criar um monte de cópias. Agora o colocá-los um por um, eles existiriam em categorias da versão ao vivo? Assim como em passar por isso, trabalhe na sua segunda visualização e crie a réplica perfeita. Em primeiro lugar, depois de gerenciar a réplica, você pode ser criativo com uma nova versão, criativo e se divertir com ela. Outras cores, outros layouts, outras fontes, você o nomeia. Mas, por enquanto, vamos simplificar , criando a mesma coisa, até mesmo nomeando as mesmas coisas juntas. Ok, Agora que temos um item configurado, Lee renomeou o quadro duas categorias. Ok, uma vez feito isso, use as ferramentas de alinhamento no lado direito para centralizá-lo. Certo, coisas incríveis. Vamos mudar o estilo dessas camadas de textos. E aqui está uma dica. Depois de selecionar o quadro, pressione a tecla Enter que selecionará todos os itens nesse cérebro. Ok, agora temos a região de texto disponível para nós no painel direito. Poppins regular 14 é totalmente bom. O que eu quero fazer é adicionar uma transformação all caps. E isso é porque eu quero que isso se destaque um pouco mais, menos. Ele também espelhará a navegação principal. Agora, ok, pressione a tecla de escape e selecione o quadro mais uma vez. Desta vez, queremos ajustar o espaçamento entre esses itens. Estou procurando algo generoso, como 40 pixels cheios de 0. Para se certificar de que você julgue direito, por favor, centralize de volta. E sim, estou muito feliz com isso. Agora temos algumas coisas para fazer. Então, queremos 30 pixels da caixa de pesquisa. Use a tecla ALT e as teclas de seta para isso. E 30 pixels dos cartões. Agora esse valor, você poderia usar mais? Claro, vá para isso se você sentir vontade. Mas, por enquanto, vamos fazer uma réplica completa e então você vai experimentar. Oh, não vamos esquecer a cor. Selecione o quadro, pressione Enter para selecionar todas as camadas de texto e, em seguida, atribua esse tecido escuro. Eu quase esqueci disso. Certo, estamos quase acabando. Como uma etapa opcional. Vamos mostrar que estamos atualmente nesta primeira categoria na versão ao vivo, isso é mostrado em laranja. Então, vamos fazer o mesmo, mas também o tornaremos ousado. Controle clique nele e, em seguida, altere o peso daqui. Mas vamos, Ok, Incrível, Coisas boas para a cor. Primeiro temos que quebrar o link para esse estilo, porque novamente, esse é um estilo escuro. Isso é o que esse botão é para esse bit. E agora temos acesso ao seletor de cores, coisas fáceis. Agora nosso tom de laranja deve estar disponível aqui, selecionado e terminamos. Se você não o tiver por qualquer motivo, basta usar a ferramenta conta-gotas. Eu não adicionei esse ponto arredondado porque não acho que isso traga muito para a mesa e acho que é uma distração de tudo o mais que está acontecendo aqui. Então, vamos continuar. Mas depois da pequena pausa, muito obrigado. 10. Crie a paginação: Bem-vindo de volta. Esta parte que mostra o número de páginas é chamada de paginação. Vamos trabalhar e fazê-lo em Figma. Comece com a ferramenta de tipo e escreva uma. Em seguida, ative o layout automático com Shift a e configure um filme. Espero que você esteja começando a aprender esses passos de cor. Se não, não se preocupe, vamos passar por eles constantemente. Para o preenchimento, vamos usar 24 de ambos lados e sair na parte superior e inferior. Ok, configure um raio de coordenadas de 10 pixels, embora possamos querer alterar esse valor mais tarde. Ok, agora, vamos ativar o traçado. preto puro por enquanto está definido no lado n. traços de pixels funcionam muito melhor. Nunca sugiro que eles usem traços de um pixel para as cores visíveis nos cartões. A nota que usamos é muito sutil. É por isso que podemos nos safar lá, mas não aqui. Nesse caso, com este botão, isso não é bom. Agora, ok, coisas boas. Na verdade, não estou feliz com o raio de coordenadas, então simplesmente não está fazendo isso por mim. Então, baixe-o para cinco pixels, por favor. E acho que isso é muito melhor. Temos que criar várias cópias. Mas primeiro, vamos transformá-lo em um componente do topo do programa. Certo, coisas incríveis. Arraste-o para o lado da tela e renomeie-o para paginação ou algo parecido. Novamente, prefiro não usar o mestre dos componentes no design real. E acho que esse é um bom hábito de se ter. Idealmente, você deve colocá-los em uma página separada, mas isso também é bom. Agora, arraste a primeira cópia mantendo pressionada a tecla Alt ou Option em um Mac. Amarre 30 pixels do cartão, ou seja, 300, 30. Ok, em seguida, vamos arrastar mais algumas cópias. Estamos procurando os cinco no total. Agora, poderíamos adicionar um layout automático aqui, mas preferi a maneira clássica desse elemento. Ok, cinco instâncias desse componente, cinco clones porque nós os temos todos selecionados e do mesmo tipo. Vamos ajustar o espaçamento entre eles para 10 pixels. Clássico. Agora, ok, com boa aparência, mas ainda temos que estilizá-los. E vamos começar com o traçado e o texto. Eles precisam ser configurados para laranja. Eu clico no componente principal que está ao lado. E a partir de cores de seleção, abra o seletor de cores e escolha coisas clássicas e laranja. Certo, agora precisamos que o primeiro seja preto porque já está pressionado. Deixe-me mostrar como é fácil alterá-lo, selecioná-lo e remover o traçado para o símbolo de menos. Então, do mesmo lugar, alterne essas cores. É tão fácil quanto isso. Ok, agora vamos separar esses fardos. Queremos três à esquerda e dois à direita. E isso porque, entre eles, queremos a camada de texto que mostra três pontos. Você pode pensar que as coisas estão ficando complicadas, mas é hora de romper as paredes de alinhamento. Mas primeiro, vamos alterar as camadas de texto para alguns outros valores. Agora, novamente, isso só levará um momento. Pratique sua velocidade como sempre. Você verá o fato de que esta instância com dois dígitos se redimensionará, o que é totalmente bom para mim. Ok, agora use esse recurso chamado arrumado e isso resolverá tudo. Hills lá desde que estamos chegando perto do final deste design de página inicial, tudo o que estamos fazendo é bastante simples. São camadas de texto e retângulos, nada extravagante. Nós nos certificamos de que nossas distâncias são discretas e que usamos o mesmo punhado de cores. Acredite ou não, esta é a base, decisões sólidas, uma boa base ao trabalhar e o conhecimento decente do programa. Isso é tudo o que você precisa. Sinta-se à vontade para selecionar todos esses caras e organizá-los em grupo. E quando isso for feito, terminamos esta seção. Muito obrigado e te vejo em um minuto. 11. Crie a base para o rodapé: Bem-vindo de volta. Vamos trabalhar no quanto mais você precisar para ampliar o quadro da área de trabalho um pouco mais, mas isso é fácil de fazer. Não se preocupe com isso agora. Ok, agora, boa ferramenta The Frame e desenhe uma. Isso precisa ter 1920 pixels de largura. E em relação à altura, eu diria cerca de 400 pixels. É um tamanho decente. Precisará editar algumas coisas como de costume. Para a cor, eu normalmente prefiro rodapés claros, mas neste caso o original é escuro. Então deixe-me usar algo como 33 para ser. Este é outro tom de cinza escuro que eu costumo usar e você logo começará a lembrar deles também. No site existente, temos uma barra laranja que está passando por isso. Para isso, usaremos a ferramenta Retângulo. Espero que você já tenha visto que, em geral, desenho formas aleatórias, depois uso o painel de propriedades para misturá-lo. Então, neste caso, isso é 1920 por seis pixels. Acho que isso deve estar bem. Seis é um meio decente. Oito funcionaria também, mas eu preferiria seis um pouco mais finos. E como estamos deste lado, também podemos centralizá-lo e, em seguida, alinhar em cima. Isso funciona bem porque o quadro que criamos o engole. A propósito, devemos renomeá-lo para rodapé. Então, temos um pouco mais encomendado aqui. Também poderíamos agrupar todos esses componentes juntos. Mas, novamente, vamos, vamos continuar. Obtenha a ferramenta de tipo e comece a colar todos esses títulos. Navegação, essa é a primeira no meio, os melhores downloads. Em seguida, entre em contato conosco e assine nosso boletim informativo, espalhe-os pela cama. Mas não estamos procurando algo em particular neste momento. Basta colocá-los todos para fora. Agora. Ok, agora vamos falar sobre estilo. Selecione todas essas camadas de texto e vamos mantê-las bastante simples. Poppins, 14 pixels regulares em todas as maiúsculas. Existem muitos, muitos detalhes que você pode adicionar para tornar um design melhor. Com o tempo. Você verá o que eles são, mas posso dizer que eles não são o que você poderia esperar. Os iniciantes normalmente adoravam jogar quando fotos, gráficos enormes e coisas dessa natureza. Então, ao mar, demais. Profissionais fazem isso. Em vez de usar branco para esses títulos ou isso é branco puro. Podemos usar um desses cinza claro. Por exemplo, E5, E5, e5. Não parece muito, mas confie em mim, é assim que você mostra atenção aos detalhes. É assim que os profissionais trabalham. Outra coisa, vamos colocar todos esses itens 60 pixels da parte superior do quadro, Isso é 60. Certo? Uma coisa sobre esse espaçamento, você também pode usar 40, 50, 60, 70, 80 pixels, o que quiser. Mas e a lacuna entre eles? Bem, no topo temos três colunas e sabemos a largura exata porque fizemos as contas. Era 380. Agora vamos repetir a matemática aqui. 1200 pixels para a área ativa no topo, temos duas lacunas, mas aqui temos três. As lacunas podem ser de qualquer tamanho, mas vamos usar 20 neste caso. Isso é bastante padrão. Então 3 vezes 20 é 60, 1200 pixels menos 60 é 1140 dividido por quatro, porque queremos quatro colunas, isso é 285. Então, o que você pode fazer é desenhar um retângulo tão amplo. 285. Lá vamos nós. Agora, é claro que você pode alinhá-lo com o guia esquerdo. Uma vez feito isso, podemos adicionar mais algumas cópias e deixar 20 pixels entre elas. Agora essa maneira infalível de trabalhar, mas há ainda uma maneira mais rápida com menos matemática. Lembre-se da grade que configuramos no início. Vamos selecionar o quadro da área de trabalho e eu o habilitarei. Também mudarei a opacidade para 10% para que você possa ver o que está acontecendo. Agora, observe alguma coisa. Os retângulos cinza são tão largos quanto três colunas. Então, na verdade, não precisávamos fazer nenhuma matemática. Sabemos que temos 12 colunas no total e queremos quatro áreas. Portanto, cada título deve receber três colunas. V vezes 4 é 12. O primeiro tem esses três. Então, o próximo tem o seguinte. Agora, alinhar os títulos à esquerda com a primeira coluna em cada grupo é um acéfalo. Isso é bastante fácil. Então, no geral, as mortes você pode dividir um rodapé usando matemática para 85 ou usando essa grade. Agora, se você quiser três áreas, três colunas, bem, isso significaria o seguinte. Os melhores downloads apenas se moveriam em direção à coluna da direita. Isso é tudo o que há para isso. O líder retângulos e agora podemos continuar. Mas depois dessa pausa rápida, muito obrigado. E novamente, espero que você esteja trabalhando comigo. 12. Adição de conteúdo no rodapé: Bem-vindo de volta. Vamos começar a adicionar algum conteúdo para além, continuar as coisas. Vou copiar colar esses itens de menu. Nada tão chique. O que eu quero ter certeza é que eu deixei alinhar e aumentar a altura da linha para algo bastante generoso. Talvez 30 pixels, então isso é 300 algo ao longo dessas linhas. Certifique-se de que o texto seja branco e remova a transformação de todas as maiúsculas. O bit mais importante é que essa navegação é o título nesses itens é o conteúdo dessa seção. Portanto, esse é um único elemento. Para garantir que transmitimos isso ao nosso design. Eu queria que os itens estivessem bastante próximos do Título, 15, 20 pixels no máximo. Bem, em algum lugar ao longo dessas linhas, talvez 10, isso também funcionaria, mas idealmente 15 a 20. Agora, o que eu quero que você evite é um pesado, esse denso, que basicamente quebra a ideia que este é um único elemento. Ok, agora para a próxima coluna, vou colar meu conteúdo e vou deixar cerca de 30 pixels entre eles. Eu não quero ir para a borda da terceira coluna porque ela vai parecer estranha e lotada também. Uma coisa que você deve ter notado é que a segunda coluna é realmente maior que a primeira. E isso não é uma grande sorte. Idealmente, esses itens terão a mesma altura ou o esquerdo seria maior que o outro. É apenas visualmente mais agradável de se olhar. Mas como este é um projeto real, vou mantê-lo como está, porque é assim que está na biblioteca. E deixe-me explicar o raciocínio. A primeira coluna espelha a navegação principal agora. A outra é a navegação secundária. Por causa disso, não podemos cortar os outros e colocá-lo no lado esquerdo. Isso não faria sentido. Então, esses são os organizados de forma lógica. Podemos começar a reorganizar as coisas à custa da lógica ou da experiência do usuário. Vou dizer isso de novo. Não baseamos nossas escolhas no argumento de que, Oh, eu gosto mais assim. Quando sabemos que isso vai contra lógica ou a experiência do usuário. Certo, vamos continuar com isso. Os melhores downloads já estão classificados, apenas o monte de espaço vazio que você precisa excluir. Certifique-se de não deixar espaços vazios no final da linha. Isso mostra falta de atenção aos detalhes e é um erro no meu livro não é grande, mas é um erro que diz a mim e ao cliente que você não está realmente tão interessado em executar as coisas corretamente. Navegue. Para a seção Fale Conosco. Por favor, arraste uma caixa que diz por que há três colunas e cole o texto dentro. Selecione o endereço de e-mail da linha e torne-o semi-negrito. Mais do que isso, por favor, torne-o amarelo. Você deve ter essa amostra embaixo do seletor de cores. Caso contrário, basta amostrá-lo ou colocá-lo manualmente. A ideia é que este é um link e ele precisa se destacar. Você poderia dizer, ok, mas os da esquerda também são links, certo? E, de fato, você está correto. Mas em termos de importância, queremos avançar esse pouco. Isso é um pouco mais interessante. Os links à esquerda, bem, eles são, são principalmente para fins de CEO, para fins de SEO. Poucas pessoas realmente as usam, mas é apenas uma parte de qualquer site. Portanto, é uma coisa clássica a se fazer para incorporá-los no rodapé. Ok, agora faça a mesma coisa para contato, semi negrito, e depois torne-o amarelo. As coisas estão se movendo bem. Enquanto eu copio colar os ícones de mídia social, deixe-me dizer por que você deve ficar longe de rodapés muito pequenos. Quero dizer, aquelas fotos que são incrivelmente curtas, como 100 pixels de altura ou algo assim, que só têm um aviso de direitos autorais e isso dá a coisa. A maioria das empresas tem vários requisitos legais que precisam postar, que precisam mostrar no rodapé. Termos de serviço, cookies, coisas do GDPR, política de privacidade, você o nomeia. Então é por isso que é melhor ter fotos como esta , generosas. Ah, a propósito, você deve selecionar essa camada de texto e alterá-la para alta. Isso porque eu quero copiar o conjunto de colagem para a breve descrição da newsletter, caso você não tenha certeza se as coisas estão alinhadas corretamente, selecione ambas as camadas e use o comando Alinhamento. Certo, coisas incríveis. Outra dica. Quando você quiser desligar rapidamente a grade, não diminua o zoom e selecione o quadro da área de trabalho. Em vez disso, use o painel de camadas. Assim mesmo. Agora você pode ativar ou desativar a grade. Bom trabalho. Deixe-me mostrar outro bom trabalho. Precisamos do campo aqui, certo? Vamos copiar a caixa de pesquisa da parte superior do nosso design. Agora, clique no rodapé e cole-o com Control V. Agora posicione-o a cerca de 10 pixels da camada de texto. É por isso que eu queria que você mudasse para altura automática para que não tivéssemos acesso. Isso é um pouco largo demais, mas em nenhum lugar é. Primeiro, clique no botão e coloque-o para fora deste quadro. Coloque-o à esquerda como com todo o resto, novamente em geral, alinhamento à esquerda da coisa não centralize, ok? Uma vez que você escolhe um alinhamento B, ele está centralizado embora eu tenha deixado a linha. Então, novamente, você deve especificar para deixar a linha, esse campo requer um pouco mais de amor. Isso é muito alto para esta região. Então selecione-o e baixe-o para 40. Então isso é para o z. Torne a web mais estreita também. Se você ainda não fez isso, use o guia certo para isso. Esse deve ser o ponto do Líbano. Substitua a largura do texto, insira seu endereço de e-mail. E estou indo muito rápido. Mas, novamente, se você estiver assistindo isso em sua segunda visualização, você deve ser capaz de acompanhar, pausar quantas vezes precisar saber, ok? Isso vai ser centralizado porque costumava haver um fardo para o lado dele. Isso significa que temos que selecionar o quadro de pesquisa e alterar a configuração no preenchimento, aparecer do espaço entre DO novamente agora. Certo, incrível, coisas boas. Removido o traço cinza. Você realmente não precisa disso, especialmente neste plano de fundo. Você deve ter notado que isso é branco enquanto o bibliotecário está escuro. A pequena variação do meu lado. Estou totalmente bem com isso. Verifique suas distâncias e quando você estiver feliz, podemos chamá-lo de um dia. Não me entenda mal. Ainda há muito trabalho a fazer na página inicial, mas vamos continuar após o curto intervalo. Muito obrigado. 13. Como lidar as imperfeições visuais: Bem-vindo de volta. O mais adiante está quase pronto. Mas você deve ter notado que ele não parece tão equilibrado, embora seja tecnicamente correto e bem executado de acordo com a matemática, simplesmente não parece certo. Por isso, agrupará tudo em quatro pastas diferentes. Um para cada coluna. Use shift para camadas de seleção múltipla e, em seguida, use o Controle G para agrupá-las. Então, esse será o grupo número um. Enquanto eu cuido do resto. Deixe-me falar sobre essa situação um pouco mais. Este é um daqueles poucos casos em que você deve dobrar as regras. Novamente, o sistema de grade é um bom guia e pode nos ajudar, mas não é o fim do mundo. Se algo não está perfeitamente alinhado para desenvolvedores, isso realmente não é grande coisa, não é um problema enorme. Por causa disso. Não hesito em fazê-lo da seguinte maneira. Depois de ter todos esses quatro grupos, selecione todos eles. Em seguida, vá para o canto superior direito e use esse recurso chamado arrumado. Isso basicamente você reajustará o espaço entre cada pasta, entre cada grupo. E assim, isso parece melhor. Ok, temos alguns elementos restantes. Selecione a linha muito bem, para que possamos adicionar esse divisor horizontal. Se você tiver seus guias ativos, esse deve ser um trabalho fácil. Dê uma olhada aqui no campo de largura para se certificar de que isso está configurado corretamente. O que os iniciantes costumam fazer é deixá-lo branco ou um cinza muito claro. E isso é um grande erro. Isso é como um cinto, mas para o seu rodapé em vez de suas bandas. Agora, você quer que seu cinto realmente se destaque? Não, na verdade não. É por isso que precisamos de uma cor muito sutil. Talvez você queira experimentar essas notas área de cores do documento, mas não acho que nenhuma delas seja sutil o suficiente. Em vez disso, proponho algo assim. 434343. No passado, alguns designers usavam branco com uma opacidade menor, mas os desenvolvedores realmente não gostavam desse tipo de coisa. Então, prefiro usar código de cores específico. É mais seguro dessa forma. Agora, em termos de sua posição, 30 pixels da navegação secundária estão totalmente bem. Agora tudo o que resta é um pouco de colagem de cópia, mas por favor, não se apresse. São os últimos minutos do projeto. Agora, nesta parte, poderíamos ter usado o layout automático com essa configuração chamada espaço entre. Mas a maneira clássica de trabalhar é totalmente boa. Gosto muito de usar a tecla alt para verificar minhas medidas e empurrar as coisas no lugar com minhas teclas de seta. Sugiro que você faça o mesmo agora. Isso pode não vir naturalmente, mas à medida que você projeta cada vez mais projetos, você verá que começará a fazê-lo sem sequer pensar nisso. Certo. Para termos de uso e política de privacidade, gostaria de pressionar a tecla Barra de espaço várias vezes para configurar meu espaço vazio. Então eu gosto de copiar esse espaço vazio e colá-lo do outro lado. Dessa forma, está perfeitamente equilibrado. O rápido selecionou esse dataframe e ajustou o tamanho, se necessário. Sim, ok. Agora, para verificar o design, aperte o botão de reprodução quando estiver pronto e dê uma boa olhada de cima para baixo. Este design é um oito em cada 10 no meu livro. Não é nada credível, certo? Não é lindo, mas é bem executado e parece bom e faz o trabalho. O que significa que as pessoas não terão problemas ao usá-lo. Se você conseguir gerenciar isso, um simples oito em cada 10, você pode facilmente ganhar milhares de dólares por mês. Você não precisa ser criativo. Oh, aqui está um detalhe que não devemos perder. O botão Fale conosco está logo acima do mais. Vamos copiar a carga da caixa de pesquisa. Primeiro, certifique-se de selecionar o quadro e não a camada de texto. Isso é uma grande coisa. Então, novamente, selecione o quadro e copie-o. Sabemos que se arrastarmos este botão acima do pé da veia vai levá-lo, ele vai engoli-lo assim. Não queremos isso. Precisamos do fardo flutuar acima dele. A solução é bem simples. Comece a movê-lo e segure a tecla da barra de espaço. E é realmente tão fácil. Isso dirá à Figma para deixá-lo. Onde você deixa isso? Novamente, você começa a mover a camada e, em seguida mantém espaço, encontra o centro. E é isso. Faça com que pareça melhor. Complete as coordenadas usando um valor muito alto como AD, por exemplo. Então, isso é e a z. Isso será completamente arredondado, mudará o texto para algo mais interessante, como me enviar uma mensagem e depois centralizá-la mais uma vez. Você pode querer renomear o quadro para sobrecarregar ou o call to action ou CTA ou algo parecido. Então, sabemos se é LK, coisas divertidas com quase feito com o nosso projeto. Vejo você em um segundo depois daquele Greg, quebra. Obrigado. 14. Aqui está o que você precisa lembrar: Ei, aí, este é o Chris. Como você se saiu? Espero que você consiga se divertir com isso porque no final do dia, é disso que se trata. Não importa o resultado final, você tem que ficar com ele e fazer o seu melhor mesmo que não esteja 100% feliz com sua própria versão, por favor, publique-os na plataforma. O que eu gostaria de ver de você é um esquema de cores diferente, fontes diferentes, talvez uma grade diferente de cartões. Agora, esteja ciente de que primeiro você precisa criar a réplica perfeita somente então no novo conseguiu fazer isso sozinho. Só então você deve passar para sua própria versão. Agora, se você gosta de Figma e acha que isso é o ajuste certo para você, continue aprendendo. Há muito mais para desempacotar, mas vamos dar passo a passo. Então, com isso, espero vê-lo em outro curso meu em breve. Este é o Chris estéril saindo para o momento. Eles dão.