Figma para design de UI/UX 2021: como aprender fazendo abordagens.

1. Introdução ao curso: Ei amigos, bem-vindos a este curso. Meu nome é Samira e sou designer de produtos e UX. Eu projetei este curso para iniciantes que querem aprender sigma para design UX UX. Neste curso, eu vou levá-lo em uma jornada desde a exigência do cliente para entender o que é um wireframe, que é o requisito que é ilustrado. E, em seguida, projetar este site absolutamente a partir do zero. Nós vamos usar o aprendizado fazendo metodologia, que significa que quando eu estiver criando isso, você pode seguir esse desenho exato do curso. E vil você está fazendo isso, você vai aprender todas as características e funcionalidades do sigma. Uma sugestão que gostaria de fazer neste momento é fazer este curso e praticar lado a lado. Se você tem dois monitores como este, então você pode disparar um Fichman um monitor e usar o outro para executar o curso. Caso contrário, você pode usar um celular ou um tablet e executar o curso no aplicativo móvel e usar seu computador para trabalhar no sigma. Estou muito animado para a sua jornada de aprender sigma. Vou resumir esta introdução e vamos começar. Vemo-nos na próxima aula. 2. Como configurar o ambiente: Deixe-me saltar para a aprendizagem real. Vamos definir o ambiente em primeiro lugar. Eu quero chamar sua atenção para dois arquivos, que eu vou fazer referência nos links desta palestra. Então um é o arquivo da pasta de trabalho, excelente estudo no exterior. O arquivo da pasta de trabalho. Este é o arquivo é algo que você está indo para usar para trabalhar com. Ele tem o resumo do cliente, ele tem o wireframe. Eu forneci os wireframes para que ele se torne um pouco fácil para o design final. E então você terá áreas de pasta de trabalho para criar sua própria paleta de cores para definir a própria tipografia. Também incluí as imagens aqui. E então aqui você pode começar o design real. E o segundo arquivo que incluí na seção de recursos é o arquivo de referência no qual este é o arquivo que eu usei para fazer este projeto. Então você verá esta paleta de cores que eu projetei para trabalhar o mesmo curso, que você também pode projetar comigo. Você pode ver a topografia, que eu disse, e você pode ver o design final nisso. Então, basicamente, eu forneci dois links. Então o que eu queria fazer era clicar em um link. Então isso é algo assim que vai acontecer. Então, uma vez que você vai clicar em um link de projeto e você apenas entrar, em primeiro lugar, você é obrigado a entrar com FISMA. Fisma funciona em um navegador. Fisma também tem aplicação. Eu recomendarei que você baixe o aplicativo. Então ok, então uma vez que você tenha clicado para baixo os recursos, algo assim vai abrir. Ele tem a intenção de ser apenas um arquivo de visualização. Então este é o arquivo de pasta de trabalho que você tem. Então o que você tem que fazer é ir até aqui na seção de projeto de lei e você tem que duplicar isso para seus rascunhos. Então, por isso, o que vai acontecer é quando você duplicar este arquivo, este arquivo é copiado em seu figo meus rascunhos e ele se torna uma parte de seus arquivos recentes ou qualquer projeto que você tem atualmente em curso. Então eu vou apenas duplicar isso para os meus rascunhos. E assim que isso acontecer, posso abrir isto. E você verá que ele foi aberto agora e isso é completamente editável. Tem uma pequena abordagem guiada também. Posso ignorar isso por enquanto. Mas então eu serei capaz de fazer alterações na maneira que eu quero neste arquivo. Então, basicamente, eu quero que você use esses links para chegar aos arquivos. Alternativamente, vou baixar os arquivos e também fornecer um arquivo zip para que você possa baixar fisicamente esses arquivos e talvez até mesmo carregá-los ou importá-los para sigma. Ok, então eu acho que isso é suficiente para configurar o ambiente. Vemo-nos na próxima aula. 3. Se você estiver com problemas com importação de arquivos: O alarme desligado, você não será capaz de abrir o arquivo de pasta de trabalho depois de baixá-lo da palestra anterior. Estou tentando encontrar uma solução rápida para isso. Mas enquanto isso, você sempre pode usar os links que são fornecidos na palestra anterior, bem como esta palestra na descrição para abrir diretamente o arquivo de pasta de trabalho ou o arquivo de referência. Como você sabe, para sigma é ferramenta colaborativa on-line. Você não precisa baixar os arquivos e importá-los exclusivamente. Você pode simplesmente usar esses links e obter, começar a aprender tudo de melhor. 4. OLHO HELLO: Esta lição vamos explorar as características muito básicas do sigma e tentou entender a interface do usuário sigma. Mas antes disso, eu quero que você assegure que você está usando este arquivo, que é excelente estudo no exterior, o arquivo de pasta de trabalho. Por uma questão de repetição, gostaria apenas de dizer mais uma vez que este será o arquivo que você vai usar durante todo o curso para projetar. Por exemplo, este arquivo tem essas páginas aqui. Ele tem o resumo do cliente, ele tem o wireframe, a paleta de cores. Esta é apenas uma estrutura. Você será capaz de me acompanhar nos objetivos e criar sua própria paleta de cores. O mesmo para tipografia, algumas imagens. E esta vai ser uma tela em branco onde você desenha. Então eu quero pedir que você mantenha este arquivo aberto e apenas me siga e vamos tentar entender o figo, minha interface. Quando aprendemos codificação, o primeiro programa que ensina é o de Olá Mundo. Olá mundo não é nada, mas apenas uma simples introdução ao mundo da codificação. Vamos fazer algo semelhante para o design. Até agora que eu quero fazer design apenas um par de telas fora de um aplicativo. E eu vou tentar usar o máximo que os recursos que eu puder. Então vamos ver. Vou te apresentar a Sigma. Então este é todo o espaço de trabalho. É com isto que temos de trabalhar. Estes são chamados de ferramentas de região. Vou selecionar a primeira legião dupla que é de um quadro. No FISMA, o modo ímpar é chamado de quadro. Temos todas estas opções à direita. Por exemplo, você pode escolher um quadro para um telefone. Você pode escolher um quadro para um tablet versus apresentação de desktop, relógio, papel, etc. Vou apenas selecionar são a moldura para o telefone. Vamos fazer o iPhone 11 pro. Assim que eu clicar nisso, eu tenho este quadro aqui, que também se torna meu quadro de arte. Então, isso vai olhar exatamente para o iPhone uma vez que tenhamos concluído o design do aplicativo. Se eu puder, aqui, eu posso clicar duas vezes nisso e talvez eu possa ler esta arte para ele. Gostaria de renomear a tela de login por enquanto. Tela de login. Então, para o nosso aplicativo, que estamos apenas projetando para o nosso aplicativo Hello World. Esta vai ser a tela de login. Agora, eu vou para a ferramenta de texto e eu vou apenas clicar em qualquer lugar, e eu vou apenas escrever login. Funciona de forma muito simples. É bastante simples. E agora vou mudar sua fonte. Para fazer isso, eu posso ir a este painel de design aqui, e então eu posso ver texto. Então esta área está relacionada com todas as manipulações que queremos fazer através do texto. Vou apenas aumentar o tamanho da fonte de 12 para 80. Uma vez que eu, uma vez que eu faço isso, você pode ver que o tamanho da fonte foi aumentado. Eu vou para as ferramentas de forma novamente. Vou selecionar a linha e, em seguida, eu vou apenas casualmente desenhar linha abaixo desta. Agora, quando eu estou desenhando a linha, você pode ver que está indo bem Hayward. Mas se eu pressionar Shift enquanto arrasto isso, então a linha tipo encaixa-se em ângulos de 4590 graus. Muito legal. Apresentar isso. Então eu vou apenas traçar uma linha, certo? Faça um pouco, você sabe, ter alguma aparência de uma tela de login. Agora, queremos fazer a mesma coisa para capturar o recurso de senha também, certo? Então, uma maneira rápida de fazer isso como eu vou selecionar ambos esses elementos como este, eu vou apenas arrastar e eu vou apenas pressionar Enter no meu teclado. E então vamos fazer apenas duplicar assim. Só estou arrastando simplesmente. E então eu vou escrever a senha aqui. Bastante simples. Então não se preocupem, pessoal, estamos apenas mexendo com a interface. Toda a aprendizagem real vai acontecer nas próximas palestras. E eu vou ser muito mais detalhado e eu vou ser um pouco lento também para que você possa apenas resolver isso como você está aprendendo. Então isso vai ajudá-lo a construir as habilidades, bem como não gastar muito tempo mais tarde revisá-los. Voltando a isso, agora o que posso fazer é adicionar um botão aqui que diga “talvez entrar”. Então, como fazer isso? Então eu vou para as ferramentas de forma como um retângulo de ator. E eu vou desenhar um retângulo aleatório. Então a coisa boa sobre Sigma é que se eu começar a mover este retângulo, ele só vai me mostrar o guia para alinhamento, esta linha vermelha que você é visto. Então eu vou apenas alinhá-lo aqui. E eu quero, eu sempre quero mudar a cor disso. Então, para mudar a cor, novamente vamos para o painel de design e selecionamos no preenchido. Então, uma vez que eu clicar sobre isso, eu posso escolher qualquer cor que eu quiser por. Mais uma vez, basta usar este controle deslizante para passar por qualquer gama de cores. Vou escolher isto. Ok, isso soa muito cérebro, então eu vou fechar isso. Como você pode ver, a cor não foi alterada. Para que isto pareça um botão, vou adicionar um raio de canto. Isso só acontecerá aqui. Só vou atrasar 20 pixels para que pareça um metal. Talvez eu faça 30. Vai dar uma aparência mais arredondada. Ok, e agora, a fim de colocar texto nele, eu vou novamente para a ferramenta Texto e eu vou escrever aqui e novamente alinhá-lo apenas arrastando-o junto. E assim, até agora, criamos uma tela de login muito rudimentar. Agora, uma coisa muito legal sobre sigma é sigma permite que você baixe um monte de plugins que ajudam você com o fluxo de trabalho. Vou te mostrar como baixar os plugins. Então, se você apenas ir para a barra de status, já existe um bar plugins divinos. Eu baixei todos estes plugins fordder para este curso e para o meu FISMA. Então, para baixar um plugin, você precisa ir para Gerenciar plugins. E então se você, estes são os plugins que eu instalei, eu vou recomendar que você instale gradientes web. Quantificador e splash estes três plugins. Então a maneira básica de fazer isso é ir aqui. E, em seguida, basta procurar o plugin. Como, por exemplo, se eu quiser baixar e splash, eu vou apenas procurar por isso. E você vê-los splash plugin. Neste momento está instalado o meu sistema. Mas se você apenas clicar sobre isso, como por exemplo, como você verá esse botão, se você não tiver instalado, ele será instalado em um único clique. Você não tem que fazer nada. E uma vez que você voltar para sua planilha, ele estará lá. Então eu vou abrir o ícone se eu ligar agora. Então, e eu vou apenas encontrar um ícone, ícone se eu plug-in permite que você encontrar qualquer ícone. Então eu meio que vou baixar isso. Eu realmente gosto disso. Vou baixar isto por 200 pixels. Vou fechar isto e colocá-lo aqui. Metade legal. Então foi assim que nós apenas conseguimos projetar uma tela de login muito rudimentar de algum tipo. Então vamos apenas genes desta cor para a qual podemos mudá-la. Se você quiser combinar isso com a cor do botão, você pode simplesmente escolher o seletor de cores. Você pode clicar aqui como você pode ver as cores mudando. Se você quer algo um pouco mais vibrante, você pode ir para um gradiente linear. E você pode escolher tipo de duas cores diferentes de famílias diferentes e então tentar, você sabe, apenas copo jazzy, você sabe. Ok. Então isso parece legal, certo? Então, tudo bem. Então vamos em frente. Vamos projetar mais uma tela. Só por diversão. Só estamos tentando mexer. Não há caminho certo, não há caminho errado por enquanto. Então eu vou em frente e agora eu quero criar outro a bordo. Então a maneira de fazer isso é talvez eu possa duplicar este quadro de arte também pressionando o Comando D. e você verá o mesmo a bordo aparecendo aqui. Eu posso simplesmente apagar isso clicando no backspace ou apagar o teclado que você está usando. Então, a fim de adicionar mais uma história, e eu vou voltar para a ferramenta iFrame. E eu vou adicionar o iPhone 11, Bruce Green novamente. E agora isso vai ser uma espécie de página de produto, você sabe. Então isso vai ter qualquer imagem. Então, novamente, há este belo plugin chamado Splash. Vou mostrar como é fácil adicionar uma imagem. Então eu vou para plugins. Eu seleciono e espirro. Ok, então, mas antes disso eu vou apenas desenhar retângulo aqui para que eu possa colocar diretamente o meu imaginado para este retângulo. Então eu vou para a ferramenta de retângulo a partir das ferramentas de forma. Vou manter um retângulo aqui, centralmente alinhado. E então eu vou procurar neste plugin. Vou procurar sapatos. E isso é ótimo. Acho que vou usar esta imagem. Então colocar esta imagem neste retângulo é tão simples e apenas clicar nela e ver você obter sua imagem aqui. E só, eu vou usar um campo de texto para apenas mencionar algum preço. Eu pareço aqui. Vou escrever 350 dólares. Soa sobre a direita, para tal taxa de sapatos vibrantes, estes são Nike como Ok, então sem distrações. Ok, então eu preciso apenas fazer um botão muito grande talvez, mas agora mesmo. Então eu vou entrar no dual retangular novamente. Vou selecionar o retângulo. E então eu vou selecionar novamente o grande retângulo. Vou arredondar as bordas para Toddy desta área. E, a fim de desistir desta cor, eu vou usar outro plugin agora. Chama-se gradientes web. Gradientes, e este plug-in já tem alguns gradientes em massa. Então eu vou apenas continuar rolando até encontrar um plug-in que eu realmente gosto. Talvez eu goste deste. Então eu vou apenas clicar sobre isso e você pode ver que nós temos um gradiente para isso. Vou usar uma ferramenta de texto. E agora, vou alinhar isto no meio. E assim não temos telas muito rudimentares do nosso aplicativo. Vou tentar resumir isso rapidamente. Vou adicionar mais um quadro nas ferramentas da região. E eu vou escrever o sucesso aqui. E vou alinhar isto. Certo, então é assim que acabamos de montar algo mexendo com Sigma. A fim de ampliar em qualquer parte. O que você vai fazer é você pode pressionar Z ou Z e então você pode apenas arrastar um quadrado como este, e então ele apenas é ampliado para essa área. Se você quiser usar a roda de rolagem no mouse, você pode pressionar o comando e, em seguida, rolar para cima, rolar para baixo, a fim de aumentar e diminuir o zoom. E então se você quiser pegar isso e fazer deslizar, então você pode usar a alça. A ferramenta de mão permite que você simplesmente agarre e deslize as placas de arte ao redor e você pode simplesmente pressionar Escape para soltar. Uma das características legais do sigma é também que a prototipagem avarento figo. Então vamos ver o que queremos dizer com isso. Então, um evento de usuário, o usuário vem para este AP Hill, ele ou ela vai ver esta tela primeiro e então eles vão entrar e ir para a página. E então quando eles clicarem em comprar, agora eles receberão essa mensagem de sucesso. Este é o fluxo muito básico que temos atualmente à nossa frente. Então, para fazer isso, eu fui para a seção Protótipo. E então eu tenho que apenas conectar os botões para os destinos. Como, por exemplo, se eu quiser, se o usuário clicar em enter, o usuário deve ir para essa taxa de tela. Então eu só vou cronometrar este quadro de arte. E se o usuário clicar neste botão, ele deve ir para esta tela. E é isso. Então, agora vamos rever o que fizemos até agora. Apenas mexendo em torno clicando na aba presente aqui. Se eu clicar no presente, ele só vai me mostrar o aplicativo. Vamos ver como fica. Ok, então isso está na verdade em uma moldura de iPhone. Então, se eu clicar em enter, ele me mostra esta tela. Se eu clicar em comprar agora, isso me mostra sucesso. Então esta é, esta é a operação muito básica de sigma. Ao longo das próximas lições, vamos adicionar muitas nuances a isso. No design UX da interface do usuário essa ferramenta. É só uma parte. compreensão do processo é a maioria de conhecer e praticar o design UX da interface do usuário. Então, nas próximas palestras, o que vamos fazer é passar pelo processo de compreensão das etapas do resumo do cliente para conhecer o wireframe, para definir a topografia da paleta de cores e, em seguida, pulando em seu design. Estou muito animado para sua jornada em Sigma e vê-lo na próxima aula. 5. Entender a exigência do cliente e wireframe: Agora vamos dar uma olhada no resumo do cliente para facilidade de uso, eu incluí o resumo do cliente nesta página na excelente pasta de trabalho estudo no exterior. Para ampliar dentro do resumo do cliente, você pode pressionar comando no Mac ou Control no Windows e usar a roda de rolagem do mouse. Ou há um truque puro em que você pode pressionar Z ou Z e, em seguida, basta arrastar uma seleção e, em seguida, você vai vê-lo ampliado para a seleção que você faz. Um resumo de projeto é essencialmente algo que o cliente envia a você, o cliente envia um designer. Normalmente, é um documento do Word. Por exemplo, este documento fala sobre o nome da empresa que é excelente estudo no exterior. Qual é o objetivo é construir uma página inicial para o novo site da empresa. Há componentes na página do herói. Está tudo aí nessa exigência. A fim de deslizar isso, você pode agarrá-lo usando a ferramenta de mão e você pode tipo de mover ao redor do papelão como você gosta. Agora, este resumo do cliente foi convertido em um wireframe, e eu incluí esse wireframe neste arquivo específico. No final do curso, vamos tomar um rápido 10 minutos sobre como fazer um wireframe. Mas para você aprender agora, eu acho que você pode usar esta página de destino Bagram, que eu já incluí. Vamos passar pelo wireframe muito rápido. E então vamos começar o processo de design real. Eu vou usar z e então eu vou apenas fazer uma seleção. Então, basicamente, estamos falando sobre a primeira página do site. Vai haver um logotipo aqui. Vai haver uma barra de navegação. Esta é a cópia em dois tamanhos de fonte para morrer faces. Estes são os ícones sociais que são mencionados no resumo do cliente. Isso significa que vai haver uma imagem aqui. O cliente já mencionou no resumo do cliente que eles gostariam de uma foto de uma garota que está indo para a faculdade porque isso vai ser como porque este vai ser um site de estudo no exterior. Estes são os serviços que têm actualmente. No site. Há também detalhes de alguns eventos universitários futuros. Estes são os países que eles cobrem. Haverá quando o testemunho e, em seguida, há este último chamado à ação chamado como você está pronto para realizar seus sonhos? E então o botão é aplicar não, para você ou se eu for para o relatório do cliente agora, você verá que exatamente todas as coisas estão cobertas por isso. Eu usei esse relatório de cliente para criar esse wireframe. E só para dar-lhe um vislumbre do que está por vir, se você abrir o excelente estudo no exterior arquivo sigma referência, que eu dei. Então este é o projeto final que eu criei a partir desse wireframe. E este vai ser todo o vidro, onde você vai estar aprendendo a converter esse wireframe. Você vai aprender a converter este wireframe e fazer um design como este. É isso por enquanto. Vemo-nos na próxima aula. 6. Palete e cores principais: Haverá uma lição muito interessante. Nesta lição, vamos projetar nossa paleta de cores. O que eu fiz foi incluir um modelo nesta página, a página da paleta de cores. Vamos verificar o que este modelo é tudo sobre. Então este é o modelo. Este é essencialmente um layout automático. Vamos cobrir isso à medida que avançarmos neste curso. E esta tem uma cor, neste momento, esta aqui. E depois tem dez latas da cor. Então, quando você adiciona mordida a uma cor, ela se torna sua tenda. Então, o objetivo deste modelo é, por exemplo, digamos, se eu mudar de cor indo para as cores de seleção e talvez escolhendo vermelho, então você verá que você terá todos os tendões de vermelho, que temos o que planejamos. Vou te dizer o propósito por trás disso. Os propósitos talvez enquanto você está projetando, você vai descobrir que talvez esta leitura em particular é para Gaudi ou dois em sua cara. E você iria querer algo de um resistor mais suave. Então talvez você gostaria que isso fosse para o seu documento. Então, a fim de fazer uma escolha muito visual, o que fazemos é basicamente pegamos cor e então fazemos dezenas de Puppet. Vou fazer o Comando Z ou Controle Z para desfazer isso. E agora vamos falar mais sobre cores. Vamos fazer quatro tipos de cores, cores primárias, cores secundárias, cores terciárias. E depois vamos fazer pastagem. Vamos ver como podemos fazer isso. Então eu vou apenas duplicar isso que vai ser duas cores primárias porque o logotipo da empresa Excellence estudo no exterior tem um gradiente linear. Vamos verificar isso rapidamente. Vou copiar este logotipo da página de imagens para a página da paleta de cores. Vou colá-lo aqui. E se eu for analisar o filme aqui, você verá que é um gradiente linear. E o gradiente linear é dessa cor particular, que é esse valor, para essa cor particular, que é esse valor. Então o que vamos fazer é que nossas cores primárias serão as duas cores que formam o gradiente do logotipo. Isso será sincronizado com diretrizes da marca ou as cores da marca que a empresa possui. Vamos ver como podemos fazer isso. Primeiro de tudo, vou selecionar este conjunto de cores. E então eu vou apenas duplicá-lo pressionando o Comando D, porque haverá duas cores. Vou renomear isso como cores primárias clicando duas vezes aqui e escrevendo cores primárias. Certo, grade. Haverá duas cores secundárias também. Então y nada, vamos apenas criar a coisa do modelo inteiro. Vou acelerar isto. Vou duplicar mais uma vez. E vejo as cores primárias chegando aqui. Vou pousar. Eu apenas encaixá-lo no lugar, é realmente ótimo com isso. Você começa você recebe grades quando você está tentando mover elementos ao redor. Vou renomear isso como cores secundárias para renomear isso. Agora, quando eu selecionar isso, o globo ocular correspondente aqui é realçado. Posso renomear isso como cores secundárias. Agora eu quero duplicar ainda mais isso. Então, o que eu vou fazer é pressionar a tecla opção ou a tecla alt no Windows. E quando eu fizer isso, você verá de repente que o cursor, há agora dois cursores. Você sabe, você vai ver o cursor duplo espelhado ou perna. Isso só significa que sempre que você arrastar algo, ele apenas irá duplicá-lo. Aqui vamos nós. Vou renomear isso rapidamente como cores terciárias. Agora as cores terciárias, como existem duas cores primárias, existem duas cores secundárias, apenas cobrirão isso em um pouco. Mas as cores terciárias são basicamente cores de destaque e nós normalmente usamos para ícones. Então, por que não tem um monte de cores terciárias? Então, possivelmente terá seis cores terciárias. Estou apenas a duplicar pelo Comando D. E está a acontecer. E então vamos abrir um pouco de espaço para os nossos cinzentos. Vou pressionar a tecla Option ou Alt no Windows. E eu vou fazer este raspão. Fantástico. Então, chegando às cores primárias, eu vou pressionar Zed e apenas arrastar esta seleção para que ela seja ampliada para nosso benefício. Então a maneira que eu vou fazer é eu vou copiar o código de cor azul daqui. E eu vou colá-lo na cor de seleção. Depois de selecionar esta primeira linha. Vou colá-lo aqui. E temos a nossa primeira cor primária. Para a cor secundária, eu vou fazer o mesmo. Vou escolher o outro código de cor. E eu vou colá-lo aqui. Então temos nossas cores primárias. Vamos verificar como fazer as cores secundárias, cores terciárias, e a graça na próxima aula. 7. Cores Tertiary: Na última lição, criamos essas cores primárias. E ao criá-los, nós os baseamos no esquema de cores deste logotipo. Vamos agora entender por que fizemos isso? Então basicamente cores primárias da maioria dos elementos no design visual. Isso vale para cabeçalhos, que vale para quaisquer links, quaisquer componentes principais, qualquer chamada para ações, etc. E é bom que isso seja síncrono com as diretrizes gerais da marca sobre as cores da marca para que fique bem. E essa é a razão pela qual escolhemos as cores primárias do nosso logotipo. Vamos começar a falar sobre as cores secundárias. É uma regra geral que as cores primárias e as cores secundárias são complementares entre si. E com isso, quero dizer que as cores secundárias e as cores primárias, elas criam esse visual harmonioso. Agora, como encontrar cores que são complementares a essas duas cores. Então, basicamente, o que eu faço é usar uma ferramenta realmente boa chamada de cor Adobe. Então vamos verificar rapidamente o que pode ser feito. Então eu vou apenas selecionar a roda de cores. Vou navegar até a roda de cores do ponto de cor adobe.com. E enquanto isso está carregando, ok, então isso carregou. Portanto, a maneira mais rápida de fazer, a maneira mais rápida de obter uma cor complementar é seguindo este método. Então eu vou selecionar este código de cor. E depois vou colá-lo aqui. E então eu apresentei, ele me mostra que esta é a cor. E mais, aqui, tem muitas opções para aplicar a regra de harmonia de cores. Então eu posso ir monocromático, em que ele vai apenas me mostrar sentença sombra da mesma cor. Posso ir para a Tríade, que é uma combinação de três cores. E depois venho a cortesia. Então, quando eu estou vindo para complementar, então todas as outras cores são complementares para isso. Então eu vou escolher possivelmente esta cor como a minha primeira cor complementar. Então eu vou copiar este código de cor aqui. E eu vou colá-lo na cor de seleção aqui. E voilá, temos a nossa primeira cor secundária. Vou repetir o processo para a segunda cor secundária. Vou copiar isto e colá-lo aqui. E então eu pego este código de cor e eu colado na cor de seleção e wallah, se você acha que esta cor é um pouco verde demais, talvez seja muito fluorescente, então nós sempre podemos mudar usando esta, esta opção. E talvez isso seja mais um visual de Mac, e talvez eu selecione isso. Então lá vamos nós. Então agora temos duas cores primárias e, em seguida, temos as cores secundárias. Então vamos falar sobre as cores terciárias. Mas antes disso, vamos entender rapidamente onde vamos usar as cores secundárias? Nós vamos usar as cores secundárias para peças de sotaque principalmente. E eu vou recuperar as peças de acento e eu vou me referir de volta a essas cores secundárias como e quando estamos projetando nas próximas lições, chegando às cores terciárias, cores terciárias são usadas realmente com moderação em todo o design. Vamos usá-los principalmente para os itens. Então a largura da onda, que eu crio as cores terciárias é que estou usando a mesma roda de cores da Adobe. Então eu vou copiar isso e talvez eu vou colá-lo aqui. E então eu vou para um composto de cores. E então eu estou indo para um composto de cores. Então eu escolho as cores que eu gosto disso. E eu vou começar a fazer os dados em três cores. Você é livre para escolher as cores que quiser. Apenas certifique-se de que estas não são as sombras ou latas das cores primárias e secundárias. Basicamente, vamos apenas usá-los para ícones. Então, há isso. Vou acelerar isso um pouco e te vejo na próxima aula. 8. Terci e cinza: Então estas são as cores terciárias que eu criei usando exatamente o mesmo processo que eu mostrei na palestra anterior. Você pode usar essas mesmas cores em seu design. Você pode referenciar estes do arquivo de referência que eu compartilhei como parte desta classe. Ou você pode usar o mesmo processo e criar seu próprio calendário. Eu recomendo muito que você tente criar tantas idéias de cores que você pode usando a cor B da Adobe e torná-los suas cores terciárias. Estes serão usados apenas para ícones para, pelo menos, o nosso design. E vamos ver o que vocês conseguem inventar. Agora vamos falar sobre a graxa. Pastar. - Ele. Isto é, no nosso caso, vamos usá-los para as nossas formas anti fases. Basicamente, esta primeira cor é total de preto, como podemos ver. E agora estas são como as coisas da mesma cor. Como podem ver, estamos reduzindo a opacidade dessa cor em 10% cada. Então, basicamente, o que eu gosto de fazer é que eu gosto ter a cor cinza original em meus desenhos ser uma função da minha cor primária. Então deixe-me mostrar-lhe o que eu faço. Isso não é muito difícil e rápido, mas eu acho que é um muito bom pouco novo para ter. Então o que eu vou fazer agora é eu vou fazer um retângulo aqui. E então eu vou, eu vou usar minha cor primária como o núcleo deste retângulo. Então eu vou copiar isso e eu vou colá-lo aqui. Certo, então temos um retângulo na cor primária. Vou duplicar isto. Eu posso fazer isso fazendo o comando D ou eu posso usar a opção na tecla altar. Vou duplicar isto. E então eu vou fazer isso preto. Está bem? E agora, quando eu vou super impor os dois. Então, se você ver claramente agora, eu só vou ampliar isso. Então, se eu reduzir a opacidade do preto, então ele começa a parecer uma fusão entre a cor preta e a cor azul. Eu vou fazer isso em 50% para você ver, é quase, você pode ver 50% do azul que existe. Então isso é demais, isso não é ótimo. Mas se eu fizer 90%, então isso é ótimo o suficiente. E este é definitivamente um tom mais claro do que o 100% preto. Então lá vamos nós. Então eu gostaria de usar essa cor para minha área cinza. E o que vou fazer é escolher isto. Vou usar o seletor de cores. E eu vou apenas clicar aqui. Então, lá temos. Então isso não é tudo preto, isso não é todos os seis zeros, mas este é este é 000318. Então essa vai ser a nossa cor cinza. Está bem? Tudo bem, então nesta seção, o que fizemos foi projetar completamente nossa paleta de cores. Temos cores primárias, temos cores secundárias, cores terciárias e graxa. Isto, estamos prontos com a nossa paleta de cores. E a partir da próxima lição, vamos mergulhar profundamente no processo de design real. Vemo-nos na próxima aula. 9. Seleção de tipos e tipos: Nós projetamos esta bela paleta de cores. Vamos concentrar a nossa atenção na tipografia. tipografia é essencialmente tudo a ver com o tipo de texto, letra e fontes que vamos usar em nosso design. Por aqui, você vai ver. E é claro que estou ampliando pressionando zag e arrastando uma seção. Então, basicamente, esta é uma palavra estranha em que nós vamos selecionar nosso tipo de letra para títulos. Estou diminuindo pressionando o comando. E então eu estou usando a roda de rolagem do meu mouse. E então eu estou arrastando isso pressionando a barra de espaço, e então eu estou apenas arrastando usando o botão esquerdo do mouse em memorandos. Então, basicamente, vamos pegar dois tipos de faces, um para títulos e outro para corpo de texto, modo que há uma variedade natural e quais íons no design. Então vamos fazer algo chamado como escala de tipo, que é organizar os tamanhos de fonte de uma forma que tudo pareça harmonioso. E então vamos entrar em estilos de cabeçalho e títulos de parágrafo. Você sabe, o que vamos usar exatamente ou edições de parágrafo, bem como para texto de parágrafo. Vamos mergulhar muito rapidamente, a fim de escalar. A fim de apenas diminuir o zoom para um 100% da escala. O que você pode fazer é usar um atalho chamado US ship one. Então, quando eu faço o turno e um, ele amplia para caber. Ok, vamos começar agora. Então vamos escolher um tipo de letra para os nossos títulos. Deixe-me tirar isso do caminho. Ok, ótimo. Então, uma das principais questões é, Ei, que tipo de tipo consideramos? O que é que devemos procurar? Como encontrar o tipo de letra é como selecionar os telefones. Então todo mundo tem seu próprio método. Gostaria de lhe mostrar o meu método. Eu sempre vou ao site fontes do Google para escolher os tipos de letra. Vamos definir os formulários do Google. Então, agora na minha frente, eu tenho fontes dot google.com, que é o site do Fundo Google. E neste site você pode visualizar muitas fontes. Uma coisa engraçada sobre as fontes é que se você for para as categorias, então o serif e o sans-serif , o que significa sem serif, são os dois tipos básicos de fontes que temos que escolher. Vamos entender rapidamente o que é um serif e o que é, o que é um sans-serif? Então, se eu apenas desmarcar tudo isso, então deixe-me apenas ampliar esta perna realmente em BC, esta base em, sob esta letra A ou este L. Você vê esta base? Então esta base é chamada de serif. Então, em todos os tipos de letra, família Serif, isso se baseia sempre lá. Além disso, se você observar cuidadosamente a espessura do traçado, o traçado da escova do traçado da caneta, ele varia, certo? C. Então esta linha é. Um pouco mais fino que esta linha, e assim por diante, assim por diante. Basicamente, como regra geral, usamos fontes serif quando imprimimos algo em papel, especialmente em tamanho de fonte muito legível. Serifs, melhor legibilidade quando está no papel. Mas se estamos falando de algo a ser exibido na tela, devemos sempre ir para sans-serif. Novamente, como se pode definitivamente usar fontes sans-serif no papel e fontes Serif na tela também. Não há regra dura e rápida, mas algo como rubato, que é bastante moderno, sans-serif ou tipo de letra. Ele realmente fica bem na tela. Então, basicamente, você pode definitivamente passar por todas essas fontes para fazer a escolha para o, para o formulário que você deseja incluir em seu design. Vou selecionar Poppins para os meus títulos. Ou eu pessoalmente gosto desta fonte e talvez essa seja a razão com a qual eu vou escolher que você pode escolher qualquer outra fonte, estilo tipo de letra que você gosta. E para o corpo, para o tipo de letra, o que eu vou fazer para o corpo. Vou escolher a música aberta. Então vamos voltar para a fase Sigma e pi a partir dos títulos. Vou usar Poppins. Então deixe-me escrever Poppins para os títulos. Isso é quase certo. E deixe-me selecionar a fonte. Deixe-me selecionar um tipo de letra, Poppins. Ok, ele mudou, e então eu vou apenas mantê-lo 55 para que ele é do tamanho de cabeçalho correto. Agora, a China é uma atividade muito visual. Então eu gostaria de primeiro imaginar primeiro ver os diferentes estilos de tipos de letra. Como eles parecem, a fim de ter uma idéia do que quando e como eu vou usar esse tipo de letra em particular no meu design? Então, para isso, eu vou apenas duplicar isso possivelmente três vezes. Vou fazer isso pressionando o Comando Z ou Controle G, perdoe-me, Comando D e Controle D. Certo, então agora, esse estilo é médio aqui. Eu me converti em normal, e isso vai ser semi ousado. Então agora, se você pode ver que existem três hierarquias nos pesos da fonte. E eu acho que eu adoraria que isso fosse o meu principal caminho para os Antigos. Ok, agora vamos fazer o mesmo processo para o corpo do texto. Para o corpo do texto, decidi ir para MS. de código aberto então vou escrever aqui isso. E eu vou selecionar o tipo de letra para OK. Ótima. Uma coisa a lembrar aqui é que estes dois, ambos os tipos de letra são bastante comuns e eles foram pré-carregados. E eles vêm com Sigma. Se você optar por obter qualquer outra fase de TI acostumada, então você precisará instalar essa fonte em seu sistema primeiro. Ok, então para legibilidade e mulheres, jeans azul é 255. E estarei interessado, mais uma vez, em combater visualmente os debates uns contra os outros, apenas para ver o seu aspecto. Então eu vou duplicar isso por comumente. E deixa-me continuar a mudar de tarde. Dois, regular semi negrito, negrito, extra ousado, metálico talvez. Está bem, mas tenho uma ideia. Então, na maioria das vezes eu vou ficar com este peso, o peso leve. Ok, então isso é sobre os títulos e o corpo do texto que eu enfrento que nós escolhemos. Este aqui é Poppins. Isso vai ser usado para títulos. E é quando esta é a música aberta, que vai ser usada para o corpo. Está bem, movendo-se. Então agora vamos falar sobre algo chamado como um tipo de pele é tipo escala. Vamos descobrir. Deixe-me levá-lo a este recurso realmente bom da Web chamado como type scale.com. É uma calculadora visual. Como você pode ver, todas essas fontes são dispostas de uma forma particular. Agora vamos explorar o que é isso. Vamos fazer isso para Poppins, que é o nosso tipo de letra. E vamos tomar a base como 1818 pontos. E a escala vai ser grande. Terceiro, que é 1,25. Então, se você observar cada uma das progressões são 1,25 vezes a anterior. Então isso cria essa bela harmonia das escalas de tempo. E então é muito agradável aos olhos. Tudo não é proporcional. Você não tem que se preocupar com a minha direção em proporção ao corpo, que é proporcional ao subtexto. Então está tudo coberto aqui. Então isso é exatamente o que é chamado de escala temporal. E então vamos usar isso para definir a hierarquia do forte para nosso próprio projeto. Vou fazer isso copiando isto para a minha pasta de trabalho Sigma. E vou colá-lo aleatoriamente aqui. E como você pode ver, estes são os tamanhos de fonte que estamos realmente procurando. Deixa-me só dar um zoom nisto. Então 54, que será cinquenta e cinco quarenta e quatro trinta e cinco, vinte e oito, vinte e dois pontos cinco e dezoito. Eu gosto do evento 24 sobre isso. Então deixe-me mostrar a vocês como podemos fazer essas mudanças. Então, no quadro de arte em escala de tempo, o que eu vou fazer é escrever qualquer texto aleatório. Vamos escrever um excelente estudo no exterior. E então eu vou fazer isso em nossa fase principal, que é Poppins. E depois vou duplicar isto seis vezes. Então eu vou combinar as seis vezes. E então eu vou mudar o aspecto das fontes deste. Então deixe-me fazer isso em 255. Isso seria 43. E eu só vou diminuir um pouco. Isto vai ser 35. Isto vai ser 28. Vou verificar isto para 2422.5. É uma preferência pessoal. Você pode optar por aderir a isso estritamente. E isso vai ser 80, que é 80. Então esta é a nossa escala de tempo. Agora esta é a progressão harmônica muito agradável que temos com nossas faces oculares e os tamanhos de fonte. E isso definitivamente vai se traduzir em um design melhor. Então deixe-me deletar isso e na próxima lição, vamos usar essas três coisas. Nossa seleção estrangeira ou seleção de Taipei para títulos, corpo de texto, bem como a escala de tempo. E vamos usar isso para criar os estilos de cabeçalho e parágrafo, texto de parágrafo. Vemo-nos na próxima aula. 10. Estilos de Heading: Bem-vinda de volta. Na última lição, nós fizemos o objetivo de saber se o tipo de letra forma os títulos, corpo do texto, bem como o esquema de tipos. Agora vimos que a escala de tipo é a progressão harmoniosa dos tamanhos estrangeiros, o que dá uma API visual muito boa. Agora, o que vamos fazer é converter esses canos, matança títulos são os planos de direção. Vamos ver como fazer isso. Então eu vou selecionar estes. Em seguida, em algumas maneiras de selecionar, eu posso ir continuar segurando Shift e, em seguida, ir, continuar clicando. Mas eu posso apenas fazer controle AR comumente assim. E agora o que eu tenho que fazer é que eu tenho que começar de volta para os estilos de cabeçalho aqui porque essa é a área designada para os estados de direção. Então vamos ver como isso pode ser feito. Então eu vou manter pressionada a tecla Alt ou a tecla Option. Então você verá que Nobel Carson. E então você será capaz de tirar isso. Mas, a fim de inserir isso em estilos de cabeçalho, a fim de inserir usando o layout automático. Eu gravei o comando Jasmine, e então eu seguro-os, vamos lá. Você pode ver que ele fez azul de repente. Pergunta-me se entrou em erupção abaixo ou acima da posição de adição. Eu vou cair de azul e eu vou deixá-lo. Você vai ver que amarra a barba e fazer os estados de direção. Então eu vou em frente e excluir isso para que agora o que eu fiz foi essencialmente duplicar isso. Mas agora estes estão dispostos a ser nossos estilos de título. Por exemplo, este pode ser o título. Dirigindo um. Eu gostaria de ser um conselho de líderes. Este é um Poppins 55. Mas eu vaguearia, será como Boulez isso. Então eu só vou copiar as propriedades e eu vou colá-lo aqui. Então essa vai ser a minha direção, MAN. Volto a fazer esta rubrica dois. Penso que a rubrica dois também deve ser ousada. Então eu vou copiar novamente suas propriedades. Vou basear o teu assistente. Esta é a direção H3. A direção três pode ser normal. Isto está indo por agora. Podemos ir ao máximo em profundidade nos títulos que não éramos. Mas basicamente o que estamos tentando fazer é que estamos tentando obter uma progressão harmoniosa dos tamanhos estrangeiros. E este pode ser finalmente o título seis. Então, sim, então estes são os estilos de cabeçalho que eu tenho criador. Você tem liberdade absoluta para criar seus próprios estilos de cabeçalho. Apenas certifique-se de que estes estão absolutamente dentro. Como podemos nomear aquele professor que oh, espere, eu acho que perdi este discagem. Então sim, isso não deve ser 55, isso deve ser 43 de acordo com este prazo. Então eu vou apenas, eu, apenas embora, formado antes de D3. Ótima. Então você pode brincar com ele, qualquer progressão que você gosta. Você pode ir para o site em escala e, em seguida, você pode jogar com as diferentes opções que eu tenho um pouco. Mas para fins de design, vou usá-los. Em vez disso. Agora está chegando à última parte da tipografia que temos que afirmar do que o que estamos fazendo para fazer mais títulos de parágrafo. Batygin tem títulos ou não são os títulos reais procurados desse ponto na cadela atendida, em seguida, BBN em seu design. Então eu vou escolher o título três, o título de estilo três títulos de parágrafo da foto Maya. Vou copiar as propriedades e as propriedades aqui. Grão. E, em seguida, a partir desse texto de parágrafo, eu vou escolher a fonte 24. Vou copiar as propriedades e colá-las aqui. Mas se você pode ver que eu acabei de fazer os estilos de cabeçalho para os Poppins, mas eu gostaria de música aberta no meu saco texto suficiente. Então eu só vou mudar o rosto do tipo de fonte para abrir música. E então você vai. Então isso é tudo sobre a topografia que vamos nos preocupar com a forma como estamos projetando lutou sobre o projeto. Vemo-nos na próxima aula. 11. Como configurar up e grade: Agora que temos classificado, a topografia estará indo para o design. Por favor, note que na página de imagens, eu mantive todas as imagens que vamos usar em nosso design. Mais tarde no curso, estarei fora do curso cobrindo como adicionar imagens de fontes externas também. E nós já vimos o que podemos fazer com plugins, e nós estaremos usando um pouco de plug-ins também. Então, sem mais delongas, vamos para a página de design e vamos começar o nosso design. Em primeiro lugar, gostaríamos de fazer um quadro de arte ou um quadro para esse assunto. Para isso, você pode ir para esta região para selecionar o quadro, ou você pode pressionar F no teclado. E então você terá este cursor com o qual você pode arrastar um quadro. Antes de fazer isso, podemos ver que há um monte de opções dadas aqui mais tamanhos de quadro em telefone e tablet e desktop e qualquer outra coisa. Para este propósito, eu vou escolher um quadro aleatório. Então eu vou desenhar um retângulo aleatório. E eu vou para esta região onde eu vou definir a largura para 1600 pixels. Estou tirando 1600 pixels. Antes deste projeto, você pode escolher diretamente alguns, alguns predefinidos reais como um desktop ou um tablet ou um celular com base em sua exigência para este projeto, vamos levar 1600. Agora, eu vou definir o comprimento deste quadro de arte para ser de 5 mil porque este vai ser um site longo rolável, página do site. E então eu pensei que vamos apenas para começar, vamos começar com abundância. Ok? Então, agora que o quadro de arte fez, o que vamos fazer é colocar uma grade neste quadro de arte. Novamente, estou usando Zed e arrastando, usando meu mouse para ampliar. O objetivo da grade é realmente alinhar os elementos dentro de uma maneira muito agradável de olhar. Eu vou para o, eu vou selecionar este R. E então eu vou para a seção de grade de layout aqui. E eu vou clicar nele. Como você pode ver. Neste momento, a grade de layout está visível aqui. Vou só ampliar e diminuir o zoom. Você pode ver a grade. Para o propósito deste projeto. Eu vou para a grade vertical. Então eu vou clicar aqui. E eu vou pegar uma grade de coluna. Então, como você pode ver que estas são as colunas. Vou reduzir ainda mais a opacidade para 5% para que isso não se torne intrusivo. E eu vou centralizar essas colunas. Vamos escolher 12 colunas para começar, porque realmente se torna fácil alinhar elementos. A largura de cada coluna pode ser de 72 pixels. Isso está em sintonia com o que estamos tentando fazer. E a calha, que é a distância entre duas colunas. Então isso pode ser 32. Ok, então estamos todos prontos com a grade. A razão por trás de eu ter escolhido 12 colunas é que eu posso, quando eu estou usando 12 colunas, eu posso organizar talvez dois objetos, três objetos para objetos, e seis objetos em uma linha. Então essa é a principal vantagem de escolher 12 como um número de contagem para o número de colunas. Você pode, obviamente, ativar e desativar a grade clicando neste ícone para desligá-la e iniciá-la novamente. Ou você pode usar o atalho de teclado Controle G. Tem o mesmo efeito. Ok, então agora terminamos com o nosso quadro de anúncios e a grade. Então, em primeiro lugar, o que gostaríamos de fazer é colocar o logotipo. Então, se você for para a página de imagens, você verá este logotipo tipográfico. Eu vou copiar esse comando C, e eu vou colá-lo aqui usando o Comando V. E eu gostaria de manter o logotipo no topo, no topo à esquerda. Mas eu gostaria de alinhá-lo como de uma maneira adequada para as bordas, então eu vou escolher 64 pixels. A razão por trás de usar 64 é o getter é 32. Então, duas vezes melhor seria 64. Então eu vou apenas modificar os x e y's deste. Isto significa que este valor X significa a distância desta aresta para este logótipo. Se você clicar em Alta, então você pode ser capaz de ver se você apenas colocá-lo para baixo no papel e, em seguida, basta passar o mouse ao redor, você vai ver que diferente. Então veja se você pode ver ainda é 90 e os machados 90. Então o meu D é esta distância. Então eu vou fazer 6464 dias de m. Então, com isso, nós colocamos nosso logotipo no lugar. Vemo-nos na próxima aula. 12. Criação a barra de navegação: Na última lição, aprendemos sobre como definir o popa, configurar as grades, e então colocamos este logotipo, 6464 pixels equidistantes do x e do y. Então agora vamos apenas para o wireframe e entender o que, o que precisamos adicionar mais. Então vamos falar sobre esta barra de navegação. Portanto, esta barra de navegação aparecerá no topo da página de design dela. Então o que eu faço é apenas copiar este comando C e eu vou colá-lo no meu design. E então eu posso apenas alinhá-lo em relação ao logotipo que você acabou de colocar. Essa é uma maneira de fazer isso. Mas eu vou mostrar-lhe uma onda que é mais reutilizável e talvez uma maneira melhor para a estética geral que estamos indo para. Então eu vou escolher a ferramenta de texto daqui. Eu também posso apenas clicar em P no meu teclado e a ferramenta aparece. E então eu vou apenas escrever, escrever os nomes dos elementos na barra de navegação. Então, isso é sobre nós. Temos um elemento. Agora vou duplicar isso. Eu poderia fazer isso com o comando li e depois arrastá-lo para baixo. Ou eu poderia apenas, eu queria duplicar mais três vezes. Eu poderia apenas pressionar a tecla Option ou a tecla. E quando eu vejo o cursor Nobel, eu cito, novamente, arraste-o para baixo. E então eu poderia apenas copiar e colar com o Comando C, Comando D. E então aqui estão os quatro elementos, essencialmente esses elementos que você está falando. Então eu vou apenas escrevê-las. Estes são os serviços. Estes são os depoimentos e este botão é para o aplicar. Ótima. Então, agora, quando estamos, então estes são atualmente elementos individuais como você pode ver, mas nós queremos eles juntos como um grupo. Então a maneira de fazer isso é que eu posso apenas selecionar todos eles. Eu poderia fazer isso individualmente. E depois de ter feito isso, eu uso ou eu vou clicar com o botão direito do mouse e eu vou clicar em adicionar auto-layout. Ou eu posso usar Shift e auxiliar para adicionar camada de ordem. Então, uma vez que eu faço isso, você pode ver que todos esses elementos estão em um layout. Agora, o layout automático é a característica mais legal do sigma que você pode usar como quase para cada elemento e economiza uma tonelada de tempo. Agora, como, como você pode ver que estes são empilhados em cima do outro. Estes são verticais, mas queremos que sejam horizontais para o nosso caso. Então, se eu for para a seção de layout automático aqui e eu posso clicar neste botão. Aqui diz direção horizontal. E voilá, temos estes na nossa direcção horizontal. Trata-se de espaçamento entre itens. Agora é 46, é um pouco arbitrário, mas eu posso escolhê-lo para ser 64 e ver como igualmente espaçado para fora que parece. Eu também posso experimentar usando talvez 32 porque essa é a largura da calha. Mas eu acho que 32 está um pouco apertado, então eu vou ficar com 64. Só faço o Comando Z para desfazer. E agora se você observar, se você observar esses elementos, então estes estão usando o tipo rubato, mas este não é o tipo que nós selecionamos. Então o que podemos fazer é ir para essa topografia. E talvez eu gostaria de usar o título para, que é médio e 28 para a minha barra de navegação. Então eu vou copiar essas propriedades. E eu vou para o projeto. Vou selecionar todos os elementos. Então a parte legal sobre isso é que agora é um layout automático. Ele, você tenta selecionar tudo dentro dele. Mas se você pressionar no comando e apenas segurar o mouse para algo em algum elemento, então você tem a capacidade de escolhê-lo individualmente. Então, então eu vou selecionar todos os interiores do elemento usando o comando a. Bem que vai selecionar tudo e, em seguida, eu vou colar as propriedades. Então vamos antes de realmente colocá-lo, eu gostaria de verificar a cor. É preto puro agora, se você pode ver aqui. Mas como decidimos em nossa topografia que vamos usar um único, ou melhor, decidimos em nossa paleta de cores, vamos usar um compartilhamento muito único de preto. Então, basicamente, esta é a sombra. Então, e então esta sombra de cor está aqui. E então ele está passando em 90%. Então eu vou apenas copiar isso e eu vou para o design. E eu vou colá-lo aqui. Lê-lo vai apenas mudar a cor por apenas literalmente apenas um pouco demais. Mas isso será mais congruente com o nosso esquema de cores original. Eu também vou fazer isso em 90%, então dá um efeito realmente bom. E agora com isso, eu posso colocar esta barra de navegação e eu vou alinhá-la de acordo com as linhas de grade que Sigma já nos fornece. Então, sim, então isso é tudo sobre configurar a barra de navegação. Vou apagar isto. Ok, então nos vemos na próxima aula onde estaremos começando a preencher o texto. 13. Cabeçalhos e estilos de texto: Bem-vinda de volta. Na última lição, nós aplicamos essa navegação, mas uma coisa que eu perdi é que precisamos alinhar essa barra de navegação de tal forma que essa extremidade seja 64 pixels dessa extremidade. Então a maneira de fazer isso atualmente é se eu pressionar a tecla Alt ou a tecla Option C, eu posso ver que ele está 184 pixels de distância disso. Deixe-me só ampliar pressionando zag e isso. Ok. Então, se eu pressionar a tecla Option na tecla Alt, eu posso ver que ele está 184 pixels de distância disso. E agora se eu pressionar a tecla de direção no meu teclado, se eu pressionar para a direita, então você pode ver que ele tem quando fez três. Agora, sempre que você fizer 101, da mesma forma, se eu continuar pressionando a esquerda, ele vai apenas mudar em um pixel impedimentos. No entanto, se você pressionar shift fazendo isso e, em seguida, pressione a direção q0, em seguida, ele vai mudar nos incrementos de dez pixels. Então, como queremos que isto seja 64, eu estou disposto a fazer apenas um feito o volume 64. Então eu vou apenas fazer o controle G, remover a grade e apenas dar uma olhada. E isso definitivamente parece limpo. Certo, então a melhor volta. E agora vamos para o wireframe para realmente começar a colocar os elementos de texto, os cabeçalhos neste design final. E para isso precisamos ir para o wireframe. Isto é, este vai ser o tema desta lição. Então esta cópia é dada a nós. Ajudamo-lo a construir o seu sonho. E depois isto, temos a liberdade de consultar, etc. Então o que eu vou fazer é copiar as coisas e vou colá-las aleatoriamente. Por aqui. Este é um elemento diferente. Este é um elemento diferente. Então eu vou apenas copiar isso e eu vou apenas colar o texto também. Ok. Então agora o que precisamos fazer é alinhar isso com o início da grade assim. E esta vai ser a nossa primeira taxa. Então, quando estamos fazendo nosso primeiro título, nós já atribuímos o valor para isso em nossa topografia. Então, se você for para a tipografia e se, se eu selecionar este título um, então eu vou copiar essas propriedades. E então eu vou chegar ao projeto e eu vou colar essas propriedades sobre isso. E então temos muito ousado 55 ligação colisão na fronteira semi. Este será o nosso principal título principal, o texto principal. Isto é, e este vai ser o subtexto disso. Então, para isso, eu vou escolher a árvore de cabeçalho, que é 35 abóboras médias Barnes. E eu copio. Vou copiar as propriedades. E então eu vou para o design e vou colar as propriedades aqui. E como você pode ver que ele se mudou para ele tem humor, bem como tem genes, o termo estrangeiro, então eu vou manter esta sobrecarga. Há outra maneira de fazer isso em uma espécie de apenas copiar propriedades e colar propriedades. Vamos verificar rapidamente o que é isso. Então eu vou desfazer tudo isso. Estou fazendo o Comando Z. Então, como podem ver, há muita ruína aqui. Está bem. Então sim, então eu não fiz tudo. A outra maneira que eu queria mostrar é se eu for para a tipografia e quando eu souber que este vai ser o meu primeiro lugar. Então o que eu posso fazer é criar um estilo de texto. Vou te mostrar o que quero dizer com isso. Então este título um vai ficar têxtil. Então, para isso, o que eu posso fazer é clicar neste ícone de estilo e eu posso clicar neste sinal de mais que diz criar estilo. E escreverei isto como Título Um. E se eu criar este azulejo, então isso se torna o estilo. Então, basicamente, há uma criação de componente tipo de coisa acontecendo que nele salva Cabeçalho um como têxtil dos EUA para que eu possa selecionar qualquer texto e, em seguida, aplicá-lo a isso. Eu vou fazer da mesma forma para o título três taxa. Então eu vou aqui. Eu costumo vir mais um irado rumo três. Legal. Então a maneira mais fácil de fazer isso é então eu vou para o design. Vou selecionar o meu Texto e, em seguida, vou apenas para este ícone de estilo. E então eu vou clicar sobre isso e ver se temos 55 Poppins. Eu vou aqui, eu vou apenas clicar no título três, e então nós temos isso também. E eu posso mantê-lo aqui e estamos prontos para ir. Ok, então basicamente falamos sobre estilos de título nesta lição. Na próxima lição, adicionaremos um layout automático a isso e também adicionaremos a imagem. E por baixo disso, verei você na próxima aula. 14. Criação de fundo e colagem: Para trás. Antes de prosseguir, vamos apenas verificar o wireframe para alguns. Então basicamente o que fizemos foi colocar o logotipo, a barra de navegação, e essas duas linhas de texto é o que colocamos em nosso design principal. Esta imagem de slot de tempo, temos que inserir uma imagem aqui, e então há uma chamada à ação Cortes aplicar agora. E temos que fazer isso também. E então essa lição fará exatamente isso. Então vamos para a página de design agora. Ok, então eu só examinei a imagem que eu queria inserir. Então esta é a imagem que queremos copiar para a coisa do design. Antes de fazermos isso, vamos apenas tentar animar esta página, incluindo alguns elementos de cor. Eu vou fazer uma vez que você está livre para escolher qualquer outro Sky linear daquela nave. Você, você, você verá o padrão e então você pode aplicar sua própria criatividade para criar seus próprios antecedentes. O que eu vou fazer atualmente é escolher a ferramenta Elipse. Eu poderia até pressionar o meu teclado. E com esta ferramenta eu posso desenhar um círculo. A maneira de fazer isso é clicar e arrastar. Então, enquanto eu estou desenhando, você pode ver que ele está fazendo uma elipse centrada isso levando a nave de acordo com como eu estou arrastando. Mas se eu pressionar Shift no meu teclado, então ele cria um círculo perfeito. Portanto, não há medida de regra rígida e rápida para isso. Vou criar um círculo como este. E então, a fim de preenchê-lo, eu vou criar um gradiente linear, que vai combinar com o logotipo, o setor de cores que o logotipo tem, que são basicamente cores primárias, como fizemos criá-los em nossa paleta de cores. Então voltando a isso, eu vou preencher isso, eu vou fazer, eu vou fazer um gradiente linear. E quando eu estiver fazendo o gradiente linear, eu vou apenas ir para a paleta de cores, Selecionar a cor primária. Venha aqui, cole-o aqui. Ok, então nós temos uma cor e eu vou voltar para a paleta de cores. Vou escolher a cor secundária. E você volta aqui e eu vou colar o código de cores ainda. E temos o nosso gradiente. Mas gradientes, onde chegamos a este eixo que temos nos dá a escolha de escolher a maneira que gradiente, que interagir com tudo. Então este fim é embora MyTime, como podemos ver, que este é o dez mais leve desta sobrecarga de cor. Então você pode brincar com isso tanto quanto você quiser e escolher um gradiente que você acha que parece mais lisonjeiro. Ok, então eu acho que isso vai fazer isso por mim. Eu meio que gosto disso. Ok, então esse é o meu gradiente. Então agora o que vou fazer é torná-lo um pouco mais transparente. Então eu vou torná-lo 60% opaco. Nós, eu vou adicionar isso a uma passagem ou a 60%. Ok? Então o que eu faço é tentar criar um elemento ou o que ele ouviu falar que vai nos ajudar a colocar um sotaque. Faça o outro lado é a imagem monótona. Vou duplicar isto usando o perú. Vou duplicar isso de novo. Vou manter esta coisa no topo absoluto. Eu levo para a frente. E para adicionar apenas um sotaque, o que eu vou fazer é reverter os gradientes não estão dispostos a fazer o azul como a coisa da batalha leve. E então, ok, então isso é apenas uma peça de sotaque e você pode definitivamente fazer do jeito que quiser. Eu acho que eu gosto disso e nós podemos brincar com isso agora com isso como um saco sozinho, o que eu vou fazer é eu vou colar, eu vou copiar esta imagem Command C e colá-lo. E cole-o aqui. E eu acho que isso fornece um pouco de um olhar equilibrado para isso. Então, se eu apenas voltar para o wireframe agora, eu posso ver que eu coloquei este logotipo, a barra de navegação, essas duas linhas de texto e imagem. Agora vamos apenas adicionar a chamada à ação que é aplicada agora. E faremos isso na próxima aula. Vemo-nos na próxima aula. 15. Botão de ação: Até agora, nós projetamos isso. E uma coisa que eu costumo seguir é clicar neste botão Play no topo aqui. Isso me dá a visão real ao vivo ou o protótipo do que eu projetei. E parece assim até agora. Eu costumo fazer isso. Eu costumo olhar isso na tela grande para que eu possa existir como meu julgamento visual. Se eu descobrir isso, se algo está errado, se eu quiser adicionar qualquer coisa, se eu tiver algum feedback improvisado para mim mesmo, eu posso incorporar isso. Então, isto era sobre olhar para a pré-visualização. Agora, vamos voltar ao nosso projeto principal. E agora o que vamos fazer é adicionar um apelo à ação, como vimos no quadro do laboratório. Há uma chamada à ação limpa chamada de planeta. E depois há esses ícones sociais. Então, nesta lição vamos vaiar, adicionar esses dois elementos. Vamos para o design deles, a fim de projetar esse botão. Eu quero escolher um processo que é muito popular. Eu poderia copiar esse botão, colá-lo aqui e então fazer alguns ajustes superficiais nele. Mas eu quero começar do zero. E para isso, eu acho que eu vou para a ferramenta Text takes também pode ser ativado digitando T no teclado e eu vou escrever aplicar agora aqui. Se você ver o Apply Now atualmente está no Roberto I enfrentar. Eu vou para a minha tipografia e eu acho que eu vou escolher Poppins médio, este título para dois b. Eu vou escolher título para ele para ser o estilo para meu chamado à ação que é aplicado agora eu vou apenas colar isso. Então, agora você pode ver isso aplicar agora botão tendo a propriedade text de Poppins e médio lá. A fim de converter isso para um botão, Eu posso usar um corte muito limpo do auto-layout, que eu posso ativar pressionando Shift minúsculo. Ou eu poderia simplesmente clicar com o botão direito do mouse e clicar em Adicionar layout automático. Então, quando eu adiciono um layout automático, o que acontece é esse pedaço de texto, essa string de texto, ele é convertido em um componente, ele é convertido em um botão. E estas são as configurações de layout automático. O que eu posso fazer é adicionar preenchimento de 32 pixels. Então, se você pode ver que há preenchimento agora 32 pixels de todos os lados para este botão. Mas os botões geralmente não são tão volumosos. Então eu vou para esta seção, alinhamento e preenchimento. E então eu vou tipo de fazer o preenchimento 16 nas bordas verticais e 30 para um as bordas horizontais. Então pressione Enter. Então isso parece certo. A fim de dar a isso uma fronteira, porque agora é apenas uma forma, mas não tem uma fronteira. Então eu vou para a seção de AVC, acidente vascular cerebral. Vou clicar sobre isso e, em seguida, talvez dois pixel borda para ter. Então, ok, então agora temos um botão rudimentar com isso. É bastante semelhante ao do wireframe. Mas, a fim de torná-lo como um botão apropriado com um chamado à ação, o que eu vou fazer é eu vou arredondar os cantos da IA em torno deles para possivelmente um 100. E este tipo de botão é chamado como um botão de pílula. Então agora, como podem ver, o fardo está tomando forma. Este é um apelo à ação. Um apelo à ação. Basicamente temos que usar a cor primária. Então eu vou escolher a cor do texto para ser a cor primária. Posso selecionar isso na paleta de cores. Esta é a cor primária quarto quatro. Vou copiar isto e chegar ao projeto deles. E depois vou colá-lo aqui. E lá temos. Este é o nosso botão. Olhando para o botão agora, eu sinto que algumas maneiras de melhorar essas coisas. Tudo o que eu gostaria de desafiar a opacidade deste tifo. Vou reduzi-lo para, possivelmente, 80%. Ok, agora que tem um registro muito agradável e isso é semelhante ao fundo que você está vendo. Então isso é mais congruente agora. E então eu gostaria de soltar uma flecha nisso, apenas um pequeno item. Então, para isso, vamos usar eu quantificar. Nós cobrimos isso nas lições anteriores. Então eu vou para o plug-in e, em seguida, eu vou clicar no ícone. Vou escolher uma seta para um ícone, eu quero uma seta para a direita. Então esta é a seta para a direita e nenhuma altura de 36 pixels parece adequada. Então eu vou apenas importar o item. Ok, então agora que o ícone é importante, o que eu vou fazer é mudar a cor para o próprio call-to-action. Eu já copiei isso e então eu vou converter isso para um d. Ok, agora, a fim de inserir isso neste botão, este é realmente um layout automático. O que vou fazer é arrastar isto. Mas enquanto eu estou arrastando isso, se eu pressionar a tecla de comando, então ele me permite inserir diretamente nisso. Então, se eu deixar cair, aí vai você. Então isso parece bem legal. Hmm. Então foi assim que criamos nosso botão e o call-to-action. Agora o que precisamos fazer é adicionar uma camada a isso agora todos esses textos são muito arbitrariamente colocados e não há nenhuma relação real entre o espaçamento entre eles. Então isso pode ser facilmente resolvido. O que poderíamos fazer é selecionar todos os três elementos. E então podemos adicionar um, outro layout automático por turno a. E quando eu faço isso, você pode ver que essa coisa já tem, ele agora tem uma largura de linha fixa. E então eu posso estar ajustando o espaço entre os itens para 6060 pixels. E talvez 60 pixels pareçam um pequeno cume. Então, se eu fizer isso a 72 pixels. E agora há como um olhar harmonioso para a nossa página. Agora, tudo está se juntando neste momento. Então, isso é tudo para esta lição. Na próxima lição, vamos adicionar os ícones de mídia social e, em seguida, vamos começar a projetar para as próximas seções. Vemo-nos na próxima aula. 16. Próxima seção: Para trás. Antes de avançar, vamos aplicar alguma sombra para este botão call-to-action para que ele realmente se pareça com um link clicável. Aqui está como fazê-lo. Você tem que selecionar o botão. Eu fiz isso clicando duas vezes dentro deste layout automático. E então eu vou para os efeitos. E o efeito é a sombra. Agora vamos mantê-lo nas configurações padrão, que é como 44 borrão. E quatro no eixo y da sombra, que é como, que cai na direção vertical, mas para baixo. Então isso é sobre ele vai apenas mantê-lo no nível padrão. E se você pode ver agora este botão realmente parece um link clicável. Então eu vou pressionar Shift 1, zoom para caber. E então novamente eu vou pressionar e arrastar e ouvir sobre isso. Então, agora que terminamos com a construção desta seção, vamos rapidamente para o wireframe e ver que temos que adicionar esses ícones sociais. E depois de termos feito isso, vamos para a próxima seção da página de heróis, que é as universidades em destaque. Vamos adicionar os ícones. Agora. O que eu fiz foi manter esses ícones na página de imagens. Normalmente o que acontece é que você tem que baixar esses ícones de qualquer que eu possa ver e, em seguida, usá-los na imagem. Para facilidade de uso, acabei de mantê-los na página de imagens. Vou colar os ícones assim. Vou trazê-los para baixo. E agora, novamente, para alinhar todos esses ícones horizontalmente, vamos usar a ferramenta mágica do layout automático. Vou selecionar todos eles. Eu perco deslocado. Então, um layout automático decidiu, e eu vou apenas para as configurações de layout automático e eu vou clicar na direção horizontal. E você tem todos os ícones na direção horizontal. Vou mudar o espaçamento entre os dois eigen espaçamento entre os itens para 32 pixels. E isso tem uma aparência uniforme para ele. E voilá, eu posso até colocar na grade pressionando o controle G a fim de ver que eu estou alinhando o consentimento com a grade assim. Ou talvez isso isso em relação ao este fardo não está parecendo simétrico. Então eu vou voltar novamente e eu vou escolher simetria central para ambos os elementos. Eu vou mudar a grade e eu vou clicar no botão play apenas para ver como o protótipo é, são os, como os designers se moldam. E eu acho que está chegando de uma maneira muito boa. Ok, nota então eu vou para a pasta de trabalho e agora vamos projetar para o próximo item, que é o destaque na guia universidades do wireframe. Então, para isso eu vou para a página de design. O que vou fazer agora é criar seções dentro desta página. Para fazer isso. Eu primeiro tento fazer algo na tela e depois tentei explicar isso enquanto avançamos. Vou construir um retângulo. E retângulo como este. Então este retângulo, mas ele vai fazer, vai cobrir esta camada da imagem. Porque nós gostaríamos porque isso, este Crawford as imagens muito boas e padrão agora. Então eu vou apenas usar esta camada extra, forma extra de um retângulo para dividir a página em laminados legíveis. E então eu vou trabalhar em cima disso. Então vamos ver o que tem que ser feito agora, se eu for para o wireframe, eu vou ver que está escrito em destaque Universidade, então eu preciso escrever universidades em destaque lá. Mas antes disso, o que vou fazer é mudar o preenchimento deste retângulo que é a cor. E vou mudá-lo para algo mais saboroso como este. Este é, na verdade, um documento e uma cor. Este E phi, se eu mesmo E5 é um dos cinzentos que já definimos em nossa paleta de cores. Então isso parece um pouco sombrio. E agora, a fim de escrever universidades em destaque aqui, eu vou para a ferramenta Texto para clicar dentro deste retângulo para que ele se torne uma parte de todo esse retângulo. E eu vou escrever universidades de longa-metragem. Então, enquanto eu estou escrevendo universidades de longa-metragem, centro de Ilhas alinhá-lo assim. Isto é bom o suficiente. Estilo de cabeçalho para o nosso recurso Universidade. Isto é retirado directamente da subposição deste elemento. Embora o que eu gostaria de ajustar é que eu gostaria de torná-lo um pouco menos opaco. Então eu vou mudar a opacidade para 80%. Vamos ver como fica. Acho que está tudo bem. Se pudermos ajustar o tipo de letra e um tamanho de fonte como avançamos quando apenas continuamos a provar o que somos feitos. Então, agora, além disso, o que precisamos fazer é adicionar os quatro logotipos das universidades que são características. Então eu vou selecioná-los assim. Vou copiá-los. Vou trazer para a página de design deles. Estou copiando usando o Comando C. Eu vou fazer um comando v aqui, então eu tenho colado eles. Então, agora essas quatro imagens, geralmente antes da FISMA, o que precisamos fazer era separar manualmente, enviá-las, e depois nos preocupar com a distância entre as imagens e tudo mais. Mas graças ao figo, meu, graças ao layout automático, é tão simples. Agora deixa-me mostrar-te. Vou selecionar todos os quatro. E eu vou fazer layout automático ou clicando com o botão direito e clicando aqui, ou eu posso usar a coisa do turno EIA também. Então eu vou clicar aqui. E o layout automático criado. Vou para as configurações de layout automático. Farei a reação horizontal. E lá temos. E Central e eu fazemos um alinhamento central. Agora que penso nisso, gostaria de uma pequena separação entre as duas imagens. Então tudo o que eu preciso fazer é ir aqui, que é espaçamento entre itens. Eu linspace eles 16 pixels entre os itens. Parece um pouco menos. Então eu posso aumentar isso até 32. Ok? E eu acho que isso parece muito decente. Eu vou apenas adicionar apenas fez agora. O que pode ser feito é que eu também posso fazer um auto-layout desta forma para que todos os outros espaçamentos e cuidado, mas isso não é necessário agora. Possivelmente vamos dar uma nova olhada em tudo. E vamos agrupar todos os componentes e padronizar todos os espaçamentos no final deste projeto uma vez que tenhamos projetado completamente isso. Então, então sim, então, até agora nós projetamos dois itens principais. Uma é a página de herói e a segunda é a seção para universidades de longa-metragem. Vamos dar uma olhada rápida nisso clicando em Jogar. Esta é uma prática muito boa para fazê-lo porque lhe dá uma idéia justa sobre o que você está tentando construir. E eu acho que isso está chegando a uma boa forma agora. Então é isso para esta lição. Vemo-nos na próxima aula. 17. Como criar de recursos com layout automático: Espero que você esteja seguindo até agora. Nesta lição, vamos projetar ainda mais. Vamos rapidamente para a página do wireframe e ver o que temos na nossa frente. Então, basicamente, temos esta seção por enquanto e vamos ver o que fazemos com ela. Basicamente, minha idéia é descrever todas essas características que a excelência tem em cartões. E nós vamos fazer os cartões usando layout automático, que é o melhor recurso do FISMA. Vamos começar. Eu vou começar selecionando tudo e eu vou apenas copiar isso na página de design de bordo. Então eu tenho sido um trabalho muito sujo de copiar e colar. Por aqui, eu desligo a rede por enquanto concluindo G. Agora, este nosso serviço vai ser o nosso rumo para a seção. O título da secção, como já decidimos, vai ser uma rubrica três. Então, quando vamos para um título três, isso serve como nosso título de seção. Este será o subtexto a este título. Então vamos atribuir isso como rumo. É muito fácil uma vez que você escolhe esses têxteis. E se eu apenas ir para e voilá, nós temos este adicionando c completo aqui. Você pode ver que isso é, isso está se encaixando muito bem. Ok, então agora a tarefa em mãos é converter estes em cartas. E basicamente, vou fazer o processo para este aconselhamento profissional. E então eu também vou repetir isso para as admissões da universidade e então você pode fazer para o resto. E isso vai ser muita liberdade criativa no Mundo. Então vamos em frente e basicamente eu vou começar com a duplicação disso. Vou pressionar o altar no teclado. Eu vou apenas duplicar isso e então eu vou remover todo esse corpo de texto deste. Vou remover todo o espaço, todo o espaço em branco dele. E eu vou fazer a largura automática aqui. Agora, para isso, este vai ser o título do urso comigo. Tenho certeza de que você não é capaz de visualizar como a curva se parece, mas vamos chegar lá. Então eu vou atribuir isso da mesma maneira que este estilo. E isto está indo para nós. Então, vou fazer um rumo para aqui. Eu vou para o texto e eu vou selecionar aqui. Vou fazer a direção quatro. Então, tudo bem. Então, temos o nosso aconselhamento profissional vindo para cá. E então copiamos isso, certo? Então agora vou remover a parte de aconselhamento profissional disto. Remova o espaço extra também. E este vai ser o corpo do texto ou o texto do parágrafo. Agora, se você for para a nossa topografia, veremos que o texto do parágrafo é a música aberta às 24 horas, 2446. Então eu vou apenas copiar isso. Vou copiar a propriedade e vou colar a propriedade para isso. E veja nós temos o Open Sans e em 24, eu vou fazer uma largura automática rápida para isso clicando aqui em 8 de outubro. E então eu vou apenas cortar a largura e você pode ver o fluxo de texto. Este é um recurso legal. Ele vem com layout automático. E eu vou manter três linhas de texto para que haja uniformidade. Então, há isso. Agora queremos um call-to-action aqui. Está faltando no wireframe, mas este guarda vai ligar para alguma página no site. Então, vai haver um aprender mais call-to-action. Então eu vou para o design, eu vou para o design, eu vou. Então, certo? Então temos que projetar uma chamada à ação. Saiba mais. E eu vou fazer isso usando a ferramenta de texto. Vou usar T no teclado, e vou digitar Saiba mais. Então, como você pode ver, o Saiba Mais não está em ciência aberta tinha 24. Este vai ser um botão CPA, então eu prefiro que ele seja em Poppins, que é o nosso tipo de letra principal que você decidiu. Então eu estou indo para apenas quatro 1s tipo Poppins aqui. Quatro pinos no meio parece bom. Eu só reduzo o peso, eu vou fazer o tamanho da fonte para 22. Acho que isto parece um pouco melhor. Então, como esta é uma chamada à ação, deve ter a cor primária. Então eu vou preencher, e então eu vou selecionar essa cor, que é, aliás, nossa cor primária, que você selecionou. A coisa legal sobre Sigma está nesta caixa, grandes meus sapatos, a aula de documentos. E nas cores do documento, ele mantém todas as cores que estão presentes neste documento. Então, se você observar, estas são as cores que criamos em nossa paleta de cores. Então, agora que a cor primária está selecionada, eu vou apenas reduzir a opacidade para 80% e, em seguida, apenas adicionar um pouco de sombra para ela. Então eu vou para efeitos e eu vou fazer o drop shadow 44. Então isso, de fato, parece um botão clicável. Agora, o que eu vou fazer é eu também vou adicionar uma seta, apenas o tipo de seta que temos mantido para o CTA original aplicar agora call-to-action. Então, para fazer isso, o que eu vou fazer é clicar no ícone do plugin. Se eu, eu vou procurar por uma flecha, eu vou para um escritor novamente essencialmente. Mas desta vez, como os tamanhos de fonte são 22, eu vou manter a altura da seta 222 também. E eu só vou importar este ícone. Como você pode ver, o ícone é importado e importado. Então sim, então uma vez que o ícone é importante, eu só vou trazer que eu entrar no quadro um. Esta é apenas uma pequena coisa a fazer para ver que tudo não está confuso. Isto não é tão importante. De qualquer forma. Vou dar esta flecha de novo, a cor da marca, a cor do CTA, que é esta aqui. Então lá vamos nós. Então nós temos nossa flecha, bem como que está combinando em cores com disciplina, aprender mais CDA, certo? Então, a fim de agora transformar isso em um cartão, nós falamos no início que estas serão cartas agora. Então o que eu vou fazer é fazer com que este Learn More CPA seja um botão de estilo de layout automático. Então, eu só vou pressionar Shift a. Então o layout automático é adicionado com, eu vou pressionar 16 aqui, 16 para o preenchimento em todos os lados. Agora o que eu vou fazer é pegar essa flecha, essa pequena flecha, eu vou redimensioná-la. Eu vou fazer 22, 10-22 alturas para que ele se torne um pouco maior em tamanho. E então eu vou apenas arrastá-lo para este layout pressionando comando. Então, quando eu pressionar comando, ele me permite colocar elementos nos layouts automáticos. Agora que você pode ver que isso se torna um botão, um layout. Embora você possa ver que a seta é ligeiramente maior do que o Saiba mais. Então isso pode ser resolvido indo para este menu aqui e pressionando isso. Então eu acho que este Learn More CTA está pronto. Então, a fim de agora converter isso em cartão, o que vamos fazer é fazer um outro layout automático de todos esses elementos. E então nós vamos enchê-lo de branco e depois colocar um pouco de sombra. Vamos ver como fazer isso. Então eu vou começar selecionando esses três elementos. Estou disposto a fazer Shift a, que é para auto-layout. O layout automático é adicionado. Agora, depois que eu adicionei o layout automático, eu vou para a seção de preenchimento, e eu vou adicionar 16 pixels de preenchimento para que você possa ver que há espaços ao redor do texto. E, em seguida, como o próximo passo, vou introduzir algum filtro. Então, quando eu clico no preenchimento, o Phil padrão é o branco. Então agora essa coisa toda tem um preenchimento branco, encha. E então eu vou para efeitos e eu vou aplicar o efeito de sombra. Agora, como você pode ver, mesmo com um mínimo, um efeito padrão de sombra, você pode realmente ver que ele está tomando a forma de uma carta. Precisamos acentuar isso mais. Então eu vou para o menu de sombra e eu vou mudar o desfocado para 30. E então eu vou mudar o fio 215. E lá vamos nós. Temos o nosso primeiro cartão pronto para aconselhamento profissional. Um par de pontos a ser melhorado para este cartão, que vêm à minha mente é este aprender mais precisa ser alinhado para a esquerda. Então eu vou apenas selecionar esse elemento. E esta é uma questão do próprio preenchimento. Então eu vou para aqui e eu vou mudar o preenchimento esquerdo para 0. E enquanto eu faço isso, você pode ver que o Learn Moodle apenas muda para a esquerda também. É muito mais do que eu. Uma das coisas que poderiam realmente adicionar um sabor muito bom a este design vai ser um ícone. Então, e marés e ícones, eles vão muito bem juntos. Para este aconselhamento profissional, temos que encontrar um ícone contextual. Aconselhamento profissional é tudo sobre a conversa. É sobre um diálogo. Então eu estou indo para ir para o meu efeito ícone plug-in. E vou procurar algo como uma mensagem. Uma mensagem. Eu posso, eu acho que isso eu posso, eu gosto disso. Eu poderia. Você é livre para escolher o que eu quiser. E então eu vou escolher o ícone itis 64 pixels. E quando eu fizer isso, eu vou apenas importar o ícone aqui. Ícone Nós é importado, como você pode ver. Você vê. Então o ícone está bem aqui neste elemento e neste layout automático, isso foi porque nós tínhamos isso selecionado, então nós importamos o ícone. Lci pode ter aterrissado em qualquer lugar desta página. Tão legal. Agora, se você se lembra, enquanto estávamos projetando a paleta de cores, nós decidimos que todas as cores terciárias deles são algo que vamos usar para ícones. terciárias são cores flare. Então eu vou voltar ao design e eu vou escolher uma cor terciária para este pequeno ícone. Então deixe-me ir para a paleta de cores. Acho que vou usar esta cor. Então eu vou selecionar o ColorCode. E eu vou para Design. E eu vou colá-lo aqui. E muda a cor. E eu vou torná-lo 80% opaco. E tudo que eu tenho que fazer isso é caixa de layout automático, então eu só tenho que arrastá-lo e fazê-lo apenas sentar lá. Então é assim que o arquivo está pronto para acentuar ainda mais a aparência do cartão. O que posso fazer é colocar um raio de coordenadas de 20 pixels. Então isso só vai fazer o guarda estourar. Então, aqui vamos nós. Este é o cartão sobre o qual projetamos. Agora temos que colocar o cartão na tela. Então, para isso eu vou ativar a grade novamente pelo controle g. E eu vou pegar este cartão e eu vou alinhá-lo à grade. Então foi assim que criamos este cartão. O que vou fazer agora é repetir todo o processo para o guarda de admissões universitárias também. E depois vou parar esta lição. E então você pode fazer o mesmo processo para o resto das cartas. Então, vamos começar. Eu vou desligar o, o maior pressionando o controle G. E eu vou duplicar esta, esta caixa. Então eu vou pressionar Alter e eu vou apenas duplicar. By the way, se você pegou o jeito do processo, então você pode parar este vídeo agora e começar trabalhar em seus cartões ou você pode começar o próximo vídeo também. Agora voltando ao processo, vou apagar essas linhas. Vou apenas remover todo o espaço em branco e dar-lhe alguma largura automática. E eu vou dar o estilo de texto como título para. Com o título do estilo de texto. Eu vou pegar isso e eu vou remover o título disso. Eu também vou acabar com todo o espaço extra do que existe. Vou dar-lhe uma largura automática. Sim, isso vai além das linhas. E então eu vou dar-lhe o estilo de texto de parágrafo que tomamos, que é a fonte Open Sans. Então eu posso, o que eu posso fazer é selecionar essas propriedades e eu posso copiar essas propriedades. Vou colá-lo aqui e as propriedades são coladas. O que eu também posso fazer é tirar isso e os criadores se acumulam disso. Posso nomear isso como meu estilo de parágrafo. E o estilo de parágrafo é criado. Vamos transformar isto em três linhas. Então, basicamente, o que eu vou fazer é redimensionar isso e torná-lo em três pistas. Vou diminuir o zoom pressionando o controle e minha roda de rolagem. E quando eles fizerem isso, então eu vou apenas copiar este elemento. Eu apenas duplico este outro. Vou pressionar e depois vou tirá-lo. Vou mantê-lo aqui e no fim de semana. Basta adicionar um layout automático a isso. Vou fazer a mudança a para adicionar o layout automático. Esta é muito Elaine. Vou escolher 16 pixels de preenchimento. Isso está saindo bem. Eu vou dar a ele preencher o padrão. Phil vai ser branco. E então eu vou para os efeitos e eu vou estourar o efeito de sombra com o borrão como 30 e o valor y para 15. Então eu também vou levar o raio do jardineiro para 20 pixels e a guarda está pronta. Mas espere um minuto, nós não adicionamos o item. Então, a fim de adicionar o ícone, o que eu vou fazer é eu estou indo para o meu plug-in, phi icônico, e eu vou procurar para a universidade. Então eu acho que este é um item decente da universidade. Posso pegá-lo pela altura 64. E eu vou importar isso. Então, quando eu importar este ícone, o que eu preciso fazer é que este ícone vem em sua própria, sua própria bota de arte. Então eu tenho que, e esta é a taxa de ícones, então eu tenho que adicionar isso ao quadro 29. E então eu posso deletar isso daqui para fora. Eu posso mudar a cor para qualquer uma das cores terciárias que eu gosto. Eu vou para a paleta de cores e talvez eu escolha uma universidade descolorida. E vamos copiar isto. E eu vou colá-lo aqui. Farei a opacidade a 80%. E então eu vou apenas mover este ícone para o topo da linha. E assim temos um pequeno segundo cartão. Pronta. Vou parar esta lição em Munique. E eu pediria que você fizesse todas essas três cartas sozinho. Quando uma das maneiras de fazer isso como possivelmente para apenas duplicar esta camada como esta, e, em seguida, tentar apenas digitá-lo para que você não mexa com qualquer um dos trabalhos que temos feito. O que também pode ser feito é que você pode se referir a essas camadas no material de referência que eu forneci para que você possa tomar, você pode referenciar diretamente os cartões que já tinham sido feitos e possivelmente reverter engenharia e aprenda com eles. Então acho que vou parar esta lição por enquanto. 18. Como adicionar fundo aos cartões: Bem-vinda de volta. Eu suponho que você está em uma página semelhante e você realmente trabalhou banir Deus estes guardas para si mesmo. Tudo bem se houver uma pequena diferença entre o que você está vendo na tela agora e a saída de urina. Há definitivamente liberdade criativa autonômica criativa conosco com as cores terciárias especulares em relação aos tamanhos das fontes, etc. Então a parte importante é você ter todas as cinco cartas agora na sua frente para que possamos prosseguir e podemos adicionar nossas peças de sotaque. Vamos falar um pouco sobre fundo como uma peça de sotaque. Então se, se não for para este fundo das cores, os três círculos que colocamos com esse gradiente, esta imagem pareceria realmente, realmente feita. Então VOD, essas cores estão fazendo atualmente, é que eles estão fornecendo um fundo e eles estão fornecendo um sotaque que é muito agradável para os olhos. Então vamos fazer algo do mesmo tipo aqui. E apenas para mantê-lo lúdico, a imagem estava no lado direito do eixo. Então vamos colocar nosso sotaque no lado esquerdo. A fim de colocar essa peça de sotaque, eu vou selecionar a ferramenta círculo, a ferramenta Elipse que é. E eu vou clicar e arrastar. Como você pode ver, é como fluir livremente. Está formando uma forma de elipse de fluxo livre, mas no momento em que pressiona Shift, ele se tranca em uma forma e isso é um círculo. Então eu vou pegar este círculo e vou colocá-lo bem aqui. Agora, a fim de colocar um gradiente nele, última vez que escolhemos todas as cores primárias. Desta vez vamos usar uma maneira um pouco mais eficiente. Então, há esse plug-in chamado como gradientes da web. E eu vou clicar em gradientes da web e eu vou apenas verificar os gradientes que eles têm no arquivo. Eu acho que o Ashwin chuvoso é bastante congruência com o nosso esquema de cores primário. Então eu vou apenas clicar sobre isso. E voilá, temos qualquer Ash Villa aqui. Vou acrescentar apenas a transparência neste caso. Vou adicionar apenas a opacidade. Ou seja, vou torná-lo 50% opaco. E então eu vou apenas duplicar isso para um efeito. Vou pressionar mais velho ou controle ou opção. E então eu vou apenas duplicar isso. E só por diversão, vou mudar o gradiente neste também. Vou abrir o mesmo plug-in. E vamos agora ter um pouco de cor complementar para o plugin. Acho que podemos acertar com isso. Tentador como o seu, que é bastante semelhante a uma das cores terciárias que você selecionou. Então, se eu fizer isso, chega a isso. Vou mudar novamente a opacidade para 50%. Talvez eu leve o preenchimento para 80% também. E agora o que eu tenho que fazer é clicar em ambas as peças e eu tenho que enviá-las para trás. E assim, acabamos de transformar a aparência desta tela apenas adicionando esses dois atos e peças. Vemo-nos na próxima aula. 19. Crie cartões de outra maneira para a próxima seção: Antes de mergulharmos no próximo bit, vamos visualizar rapidamente o que fizemos até agora. Vamos clicar neste botão presente. E então vamos ver um é para uma prévia real do nosso trabalho. Olhando tão longe, tão bem. Ok, então esta é a nossa página de herói que você projetou. Tudo parece bem arrumado. O, esta é uma segunda seção que fizemos, que foi mais destacado universidades do que alguns logos universitários espaçamento igual entre cada um deles. E esta é a terceira seção que projetamos, que tem sobre nossos serviços. E então projetamos esses guardas do zero. E então nós também adicionamos este elemento visual. Então, com isso, vamos agora começar a trabalhar na próxima seção. E para isso, vamos rapidamente para o wireframe e entender o que vem a seguir. Então, nós projetamos para esta seção principalmente, que são nossos serviços. Então, a próxima seção está chegando em eventos USD. Então eu vou usar o padrão bastante semelhante de operações que eu estava usando anteriormente. Vou selecionar tudo. E vou copiar isto. Eu vou para a fase de design e vou colá-lo em algum lugar aqui. Ok? Ok, agora, a tarefa em mãos é converter isso em uma seção realmente visualmente atraente deste site. Então, para isso, primeiro de tudo, o que eu vou fazer é eu vou fazer um retângulo e um retângulo desta cor. Então, basicamente, o cenário que estamos indo para nós. Há uma seção branca com alguma peça de acento colorido, e depois há uma seção cinza retangular que não tem qualquer acento. Mais uma vez, há esta peça branca. E agora, então, de novo, vamos para um Greenpeace aqui. Então eu vou clicar em e apenas desenhar retângulo aleatório. Não estou disposto a prestar muita atenção às dimensões por enquanto. E posso usar o seletor de cores. E um seletor de cores apenas escolhe a cor em que você clica. Então eu vou clicar aqui. E assim temos grande essa cor. Então, com isso, o que eu vou fazer é copiar este elemento para este retângulo. Vou arrastar isto. Eu preciso enviar isso para trás primeiro para que as camadas não sejam perturbadoras. Mas agora vou copiar isto aqui. Vou usar o alinhamento central. E então este é basicamente o título três, que temos usado aqui para nossos serviços. Podemos também usar isso, que não será exatamente a terceira posição, isto é Poppins e 28. Então este tem que ser um título quatro. Deixe-me verificar a topografia. Sim, faz. Na verdade, na direção quatro, você pode ver Poppins no 28. Então deixe-me apenas criar esta pilha chamada como rumo para que possamos usar isso sem problemas. Ok, e então, então, eu vou usar o título para, para isso. Ótimo. E eu vou estar usando este estilo, que está novamente indo para o texto abaixo dele. Então eu vou levá-lo aqui. E então eu vou apenas clicar no estilo. E eu vou para a direção. Embora agora o problema aqui é que o que está acontecendo é tanto o título como um subtexto têm o mesmo tamanho de fonte, mesmo corante, mesmo bit. Então talvez o que eu gostaria de fazer é que eu gostaria de aumentar esse tamanho porque de qualquer maneira, isso vai ser como um cabeçalho de seção. Então eu faço um título três. Vou alinhá-lo no centro. E eu vou levá-lo um pouco para que não seja aglomerado. Tudo bem. Passamos por cima da coisa do auto-layout, talvez no final para que possamos padronizar o espaço. Ok, então agora indo em frente, esta é a informação que queremos retratar aqui. E isso tem que ser em um formato visualmente atraente. Então, para isso, o que podemos fazer é projetar um cartão, mas não seguiremos o mesmo processo que usamos para projetar esses cartões. Vamos ver outra maneira que podemos criar um cartão com. Vou começar com a ferramenta de texto. Então eu vou apenas pressionar T no meu computador. E então eu vou escrever 24 de abril aqui. Ok? Então, 24 de abril, então o que podemos fazer é converter isso em uma espécie de botão de uma coisa. Então eu vou fazer é mudar um, que faz o layout automático. E uma vez que o layout automático é feito, eu posso escolher o preenchimento. E desta vez vou usar uma das cores terciárias. Decidimos que usaremos cores terciárias para ícones, bem como para pequenos acentos. Vamos tratar isso como um item. Então eu vou para a paleta de cores. E talvez eu gostaria de usar essa cor. Esta cor soa bem. Então eu vou usar essa cor em particular com 30% de opacidade. Vou copiar isto. Eu vou para o design, e então eu vou colocar isso no filme. E eu vou preencher este 230. Acho que posso usar um pouco mais leve, então talvez eu faça 20%. Ok, isso parece bom. Embora agora o que sinto é que precisa de espaço para respirar. É como se sentir um pouco preso. Então eu vou aumentar o preenchimento para 16 pixels e, em seguida, curva o raio para talvez dez pixels. Grau. Isto parece bem. Isto absolutamente parece bem. Ok? Então, seguindo em frente, o que eu vou fazer é pegar o texto daqui e eu vou colar este texto ao lado disso. Não queremos isso das 10h às 02h. Por agora. Vamos apresentá-lo de uma maneira melhor. E para isso, eu vou apenas clicar na largura automática para que ele tipo de recebe redimensionar a caixa e a caixa é redimensionada. E agora o que vou fazer é mudar o rumo dois. Então eu vou aqui e vou clicar no título quatro. Ok, minha posição mudou. E então, apenas para simetria, vou tentar trazer isso assim. E enquanto estou movendo a caixa, esse texto está fluindo para dentro. E lá vamos nós. Então temos este 24 de abril e a Universidade da Austrália Ocidental. Então nós escrevemos estes dois componentes do cartão que estamos tentando criar. Vou selecionar os dois. Vá para uma mudança de layout automático. Ok, se você pode ver esta unidade da Austrália Ocidental está ligeiramente acima da linha de simetria para isso. Então, para resolver isso, eu vou clicar aqui, que é a opção de alinhamento e preenchimento. E eu vou trazê-lo no meio. Então é isso. Então é assim que criamos este componente em particular. Temos um monte de texto sob isso. Então o que vamos fazer é usar algum tipo de processo semelhante. Vou copiar esta mensagem. Vou colar este texto aqui e vou arrastá-lo de uma forma que eles são legíveis. Ok? E então eu vou usar a opção de texto de parágrafo. Veja que temos usado opção Texto parágrafo aqui também, que é a fonte Open Sans em 24 Legler. Então eu vou usar o texto do parágrafo neste. Então eu vou para os estilos de texto e eu vou fazer estilo de parágrafo. E ok, então você tem isso diz, ok, então basicamente quando eu estou visualizando este botão, é este cartão, eu quero que este cartão seja ligado talvez a um calendário ou talvez lista de e-mail ou algo assim. Então você vai precisar de uma chamada à ação. Eu vou simplesmente clicar duas vezes aqui e então eu vou clicar dentro. E então eu vou apenas duplicar isso. Vou pressionar a tecla Option. E depois vou trazê-lo para cá. E nós temos nosso pequeno apelo à ação para acrescentar a isso. E agora a última coisa que resta é adicionar a hora, que é das 10h às 02h. Então eu vou apenas copiar isso e colá-lo aqui. Ou seja, eu vou fazer a largura automática neste para que ele se torne gerenciável. Vou alinhar isto aqui. E eu vou usar novamente o estilo de parágrafo para isso. Embora agora, embora agora pense nisso, talvez eu possa adicionar um pouco de peso a este tipo de letra. Mas se você vir aqui, a opção se foi porque nós escolhemos um têxtil pré-selecionado. Então, a fim de obter essa opção de volta, o que nós vamos fazer é clicar aqui, que diz separar o estilo. Então, à medida que detestamos esse estilo, novamente, toda a coisa de opções de texto sai. E então eu vou apenas fazer isso semi negrito, ok? E eu acho que isso parece um pouco melhor do que o peso da linha anterior. Ok, então, a fim de apenas adicionar um pouco mais de talento a isso, o que eu vou fazer é eu vou pegar um ícone de um relógio que vai significar tempo. Então, para isso, eu vou para phi icônico. Vou clicar em um ícone. Se eu a partir da lista de plugins, Eu vou procurar por relógios. E talvez eu gostaria de escolher isso, adicionar 24 pixels altura. E então eu vou apenas importar o ícone e está aqui. Finalmente, o que posso fazer é selecionar esse ícone. E então eu vou arrastá-lo e colocá-lo ao lado da minha seção de tempo. E só para torná-lo um pouco mais uniforme, eu vou adicionar um layout automático deslocado. Se você puder observar que o relógio se inclinou para o topo. Então o que eu vou fazer é ir para esta seção e tentar derrubá-lo e tudo centrado e alinhado. Vou apenas alinhar isto, vou alinhar este elemento ao nosso chamado à acção. Aqui vamos nós. Então, restam alguns passos agora. Então, a fim de fazer um cartão real, real dele, o que nós vamos fazer é que vamos usar outro retângulo. Então eu escolho um retângulo. Eu tenho mesmo pressionar R? E então eu vou apenas desenhar um retângulo como este. O que eu vou fazer é encher isto com branco porque é isso que eu quero fazer. E então eu vou enviá-lo para trás. Então, enquanto eu estou enviando para trás camada por camada, você pode ver que tudo começou a aparecer e vir para a frente. Continue fazendo isso até que todos os elementos apareçam na minha frente. E voilá. Então é aqui que toda a navegação acontece. E, nas aulas futuras, vou ensinar-vos como podemos organizar melhor isto, como podemos agrupar elementos juntos. Mas, por agora, o que vou fazer só para este propósito. Então eu vou selecionar isso e eu vou selecionar todas as camadas dentro. E então eu vou fazer o comando G para criar um grupo. Agora que criei esse grupo, todos esses elementos se moverão juntos. Ok, então como isso é um cartão, o que vamos fazer é dar um raio de canto de 20 pixels para que ele apareça em torno dele no canto. E então eu também vou dar o efeito de uma sombra. Para sombra, eu vou manter 30 como o borrão e 15 como o y. exatamente como temos feito para estes cartões. Então é assim que criamos um guarda. Para colocar esta carta neste design, o que posso fazer é reativar essa grade fazendo o controle G. E então novamente, talvez alinhá-la ao início da grade. Vou desativar a grade usando o controle G de novo. Então, agora que estamos aqui, vou parar essa lição em um minuto, e vou pedir que você faça um carro semelhante para este evento da Universidade de Monash e vê-lo na próxima palestra. 20. Como criar próxima seção com imagens e cartões: Eu suponho que você criou um, tal cartão como falamos na última palestra. Então, vamos agora seguir em frente. Mas antes de irmos em frente, quero trazer ao seu conhecimento que não implementamos o scroller, que está presente no wireframe em nosso design. Este scroller realmente dá ao usuário a idéia que há mais para vir e, portanto, o usuário pode rolar. Eu poderia copiar este pergaminho aqui e encerrar o dia. Mas eu gostaria de projetar isso do zero para que possamos ver mais um método de uso de elementos, usando formas, bem como usando auto-layout. Então, para criar isso do zero, eu vou escolher a ferramenta Elipse. Eu poderia ter clicado no meu teclado também. E eu vou desenhar uma elipse, em vez disso, eu vou desenhar círculo. Então, para desenhar um círculo, vou continuar pressionando Shift. E então talvez eu parasse em qualquer lugar. Agora, isso parece que humungous diz, eu vou fazer este 16 pixels. Assim que eu fizer 16 pixels, isso parece um pouco minúsculo e possivelmente o tamanho que estamos procurando atualmente. Então o que eu vou fazer agora é eu vou duplicar isso usando minha tecla Option. E eu vou fazer quatro círculos tão pequenos, que são bastante análogos ao que estamos tentando projetar. Agora, eu quero escurecer este círculo e eu vou usar talvez uma cor primária para isso. Então eu vou até aqui e eu vou selecionar esta cor primária da cor do meu documento agora. E como último passo, vou selecionar todos eles. E eu vou apenas adicionar layout automático. Vou pressionar Shift a e um Auto Layout é adicionado. Eu escolherei o espaçamento entre os itens para 16 pixels. E eu vou centralizar isso apenas selecionando. E é assim que conseguimos um pergaminho. Ótima. Então vamos agora ir em frente e vamos para o wireframe para ver o que a próxima seção tem reservado para nós. Então, de longe, o que fizemos foi cobrir os próximos eventos universitários. Nós também adicionamos o scroller, e agora temos uma guia Países para ser projetado na nossa frente. Isso vai ser, haverá três imagens. Agora, essas três imagens seriam sobre os países que o cliente quer que mantenhamos na página. E depois vai haver outro pergaminho. Então vamos pular para isso. Como sempre, vou copiar isto. E eu vou, e eu vou colar isso no meu projeto. Eu levo isto aqui. Eu vou deletar isso porque nós projetamos isso. Agora, países parecem ser um cabeçalho de seção. Então eu acho que vou colocá-lo aqui e eu vou usar esse estilo de texto do título três. De modo que ele, ele realmente aparece como ele realmente aparece como um cabeçalho de seção. Agora, depois disso, quero que se concentre aqui. Então esses três elementos têm que estar em conjunto. Tem que haver um cartão para isso. E isso vai ser um elemento quando vai haver quando a imagem aqui. Então vamos apenas projetar isso do zero. Para isso eu vou ativar a grade pelo controle g, essencialmente. Então eu quero alinhar isto à esquerda. Então o que eu vou fazer é desenhar um retângulo agora. E eu vou desenhar um retângulo a partir daqui. Aqui eu vou desenhar um retângulo abrangendo quatro linhas de grade. Estou fazendo quatro porque temos Dwell Gridlines. E então, dessa forma, seremos capazes de projetar para três retângulos. Então agora este retângulo vai ser onde nossa imagem vai ser alojada. Então, há várias maneiras de colocar imagens em um retângulo, mas por enquanto, eu vou usar o plugin chamado como um splash. E eu vou apenas selecionar e espirrar. Em um plug-in sem emendas. Ele só acelera o fluxo de trabalho quando você está tentando importar imagens. Então, vou procurar o Canadá. Não posso nem procurar um satélite, Toronto ou Vancouver, ou algo assim. Mas esta imagem parece um pouco mais legal. Então o que eu vou fazer é eu vou apenas clicar nesta imagem. E então você verá a imagem vindo para cá. Vou fechar isto e plash plug-in. Agora, eu tenho que construir o resto dos elementos que está estudando o Canadá. E eu só vou arrastá-lo até aqui e o subtexto por trás de estudar o Canadá. A fim de tornar a minha vida mais fácil, o que eu vou fazer é que eu vou fazer diretamente tomar esses estilos. Vou copiar estas peças do título, bem como para o subtexto. E eu vou colá-lo aqui. Então vamos fazer isso. Vou copiar as propriedades. Vou colar as propriedades aqui. Está bem? E eu vou copiar as propriedades desse subtexto também. E eu vou colá-lo aqui. Está bem? Então, agora, a fim de converter esses três elementos em um cartão a, estaremos usando o mesmo procedimento que usamos para nossos cartões de serviços, que é vamos combinar todos esses três em um layout automático. Vou usar Shift a para que você veja que tudo está reorganizado. Agora, vou adicionar preenchimento de 16 pixels. E então eu vou adicionar um filme. E o filme vai ser de cor branca. Então, quando eu estou adicionando um preenchimento e eu estou fazendo o preenchimento, ele começa a parecer um cartão já. Eu vou apenas fazer um raio de canto de 20 pixels para que ele fique claro fora dos cantos. E um efeito, vou adicionar uma sombra. E para a sombra, o desfoque será 30 pixels e o valor y será 15. E assim, nosso cartão está pronto. Vou desativar o controle GRID_WIDTH G. E você pode ver que temos um cartão. Então eu vou parar essa lição agora mesmo. E eu vou pedir que você trabalhe o resto das cartas sozinho, além da barra de rolagem na parte inferior. E então vamos reagrupar na próxima palestra para projetar as seções adicionais. Vemo-nos na próxima aula. 21. Faça você mesmo para o resto do design: Suponho que você tenha projetado todas essas três cartas por si mesmo a partir do título que eu desenhei na sessão anterior. Eu tinha feito algumas modificações para esses guardas, especialmente com os estofos, modo que parece um pouco coeso. Vou pedir-lhe para tentar isso também. Agora, esta é a seção onde o fundo é branco e precisamos adicionar algum elemento visual a isso. Então, basicamente, o que eu vou fazer é apenas copiar o elemento visual que eu projetei anteriormente. Deixa-me mostrar-te como. Estou falando desses dois círculos. Então eu clico neles. Vou selecionar ambos os círculos e vou duplicá-los usando a tecla de opção. E vou arrastá-los até aqui. E eu vou dizer apenas imprimi-los e eu vou manter um como este, o outro como este. E acho que sim, acho que terminamos. Você não acreditaria na diferença que fez só ter um pouco de sotaque no design. E isso faz o trabalho muito bem feito. Vou pressionar o botão Shift para ampliar para caber. E se você pode ver, isso é tão harmonioso. Então, todas essas peças de acento no herói medem à direita, depois na próxima carta, à esquerda, na próxima carta à direita. Então, há isso. Então, antes de irmos para as próximas seções do projeto, o que eu quero fazer é que eu quero que você tente tudo. Nas próximas seções. Estas serão as mesmas técnicas que temos usado até agora para projetar tanto. Por isso, vou levar-vos à folha de referência que já incluí. E vamos rever o que precisa ser feito. E eu vou pedir que você faça você mesmo. Tire algum tempo para praticar sobre o que aprendemos. E você sempre pode me contatar se houver alguma dificuldade. Se você quiser alguma orientação, você pode me deixar uma mensagem e eu vou ajudá-lo a superar seu obstáculo. Então eu vou apenas clicar nesta folha de referência e eu vou apenas ampliar. Então, basicamente, o que temos feito é ter concluído como projetar juntos até a guia Países. Nós também incluímos estes dois círculos para elemento visual. Então, na próxima seção, haverá um testemunho. Para o testemunho, vamos seguir este padrão de que oferecem grande fundo cinza. O, isto é, estes são os nossos títulos e estes são os nossos subtítulos. E este é um cartão que nós projetamos. Então, se você for ao wireframe, verá que o testemunho já foi dado lá. É o mesmo testemunho, a mesma pessoa. Então tudo isso foi feito para os designers finais. Eu adicionei esta imagem de um splash, e eu escolhi isso como o título e este como o corpo. Este é o mesmo pergaminho, que é, eles estão por todo o lado. Então essa é a seção de depoimentos. Na próxima seção, há uma seção muito curta e há um chamado à ação chamado como pronto para perseguir seu sonho. Este vai ser o nosso primeiro lugar, Poppins 55. E então este é o botão Aplicar agora que nós projetamos aqui na primeira página. Então este é o mesmo botão Aplicar. E então esta seção, é apenas o rodapé. O fóton é dado nos wireframes. Não está na verdade o rodapé é dado no documento requisito do cliente. Não está no wireframe, mas de qualquer maneira, este é apenas um retângulo simples pintado com texto de cor primária como convite. E estes são os elementos. Então isso efetivamente completa todo o design da página web que fizemos. E eu quero pedir que você faça todos esses elementos sozinho e experimente isso. Volte para mim se você enfrentar qualquer dificuldade. E te vejo na próxima aula. 22. Obrigado: Ei amigos, obrigado por completar este curso e assistir isso até agora. Espero sinceramente que você tenha aprendido algo de valor e esteja usando sigma para fazer UI e UX design. Estou no processo de criar adições a este curso. Primeiro de tudo, estou direcionando o feedback do cliente e alterando o aspecto das coisas. Mostrei este desenho exato para cinco a seis pessoas que estão na indústria agora. E eu reuni esse feedback e estou no processo de criar uma palestra em vídeo como parte do curso em si. E estou planejando completar isso até 28 de fevereiro de 2021, que é este ano. E eu também vou aumentar o curso com mais um projeto, o de inmovido pela lâmpada. Este projeto de aplicativo móvel será concluído até 15 de março de 20211 coisa especial que este projeto de aplicativo móvel vai ter é que vamos explorar a parte de componentes, os componentes reutilizáveis, que são sigmas one-off, core pontos fortes. Então vamos cobrir essa parte completamente neste projeto de aplicativo móvel. E nós também vamos fazer alguns protótipos. Vemo-nos na próxima aula.