Crie seu site com o design de web de figma |

1. Introdução ao curso: Quando você está em uma startup ou está apenas criando um novo negócio, você geralmente é uma estrela. A coisa mais importante é ter muito pouco capital. No mundo de hoje, é muito difícil administrar qualquer tipo de negócio sem ter algum tipo de presença on-line. É por isso que vencemos a prototipagem. Ferramentas como o Figma são úteis e permitem que você crie o protótipo do site ou do aplicativo usando a menor quantidade de recursos gratuitamente. Digamos, por exemplo, que você esteja trabalhando em uma startup educacional e sua equipe solicite que você crie um site usando HTML, CSS e JavaScript. Digamos que você tenha um trimestre profissional e crie essa landing page educacional para startups em dois dias. Depois de analisar seu trabalho, um dos membros da sua equipe pede que você altere a cor do plano de fundo. Você precisaria acessar sua base de código. Você precisa fazer alterações na folha de estilos em cascata e implantar o código novamente, que é muito ineficiente e desperdiça muito tempo. No entanto, essas mesmas mudanças Figma são muito simples. , você pode alterar o plano de fundo entanto, você pode alterar o plano de fundo selecionando o conta-gotas e selecionando a cor que você gostaria que seu plano de fundo fosse. Este é apenas um exemplo muito básico e, à medida que as coisas progridem, pode não ser tão simples. Seu objetivo como uma nova startup ou uma nova visita deve ser criar algo usando a menor quantidade de recursos com softwares como o Figma, que mudam o jogo. Sim. Em seguida, repete alguém que trabalhou como engenheiro de software nos últimos 20 anos. E um de seus artigos mencionou que investir no processo de design, seja por meio de um designer de UX ou simplesmente educando-se, trará enormes dividendos. A longo prazo. É aí que entra a Figma. Ele permite que você invista no processo de design e valide o que você construiu com seus colegas. Este curso é para fundadores de startups, novos negócios ou qualquer pessoa que queira aprender Figma e usar esse conhecimento para criar um site ou página de destino. Embora o foco principal deste curso seja sigma, também abordaríamos outros aspectos importantes do web design, como alinhamento, paleta de cores, topografia, obtenção de inspiração, logotipo, wireframing. Meu nome é Otto e serei seu instrutor nessa jornada. E se você estiver pronto, vamos começar. 2. Começar com a Figma: Bem-vindos de volta a todos. Agora vamos começar com o Figma. Se você já tem uma grande bagunça no seu dispositivo e também tem alguma experiência com isso. Sinta-se à vontade para pular esta parte do vídeo, supondo que esta seja sua primeira vez usando o Figma Vamos começar adicionando sigma em nosso navegador. Certifique-se de selecionar na parte inferior do meu site que aparece. Isso o levará à página inicial do Figma. E se você já tem uma conta ou precisa fazer o login. No entanto, se você não tiver uma conta, clique em Começar e faça login com o Google ou forneça suas informações e crie uma conta depois de fazer login, essa é a aparência que deve ser. Muitas vezes, não há necessidade de recriar algo do zero. Sempre podemos construir sobre o que outros já criaram. Por exemplo se você for à comunidade, Ginny pode encontrar recursos, desde obter ícones até wireframes e tudo mais. Por exemplo, digamos que você esteja procurando uma landing page para uma startup. Você pode pressionar na web e digitar a página inicial da inicialização. E aí está. Temos uma variedade de designs para escolher. Este tem muitas reações, portanto, deve ser bom. Ele pode obter uma cópia pressionando, pegue uma cópia. Depois de abri-lo. Por exemplo, se formos para a seção de heróis, você pode ver muitos designs diferentes, fazendo com que isso do zero tenha levado muito mais tempo, no entanto, com a ajuda da comunidade, você pode criar sua landing page de startups e muito menos tempo. Nosso principal projeto para esta aula será a criação de uma landing page para startups. No entanto, para lhe dar uma visão geral completa, faremos a maioria das coisas do zero. 3. Página de destino de inicialização do projeto 1: Bem-vindos de volta a todos. O primeiro projeto dessa classe é criar uma página inicial de inicialização usando esse arquivo sigma que foi compartilhado na comunidade. E o objetivo deste exercício é ajudá-lo a criar uma landing page para startups e um mínimo de tempo aproveitando os recursos criados pela comunidade Figma. Para o propósito deste exercício, digamos que queremos criar uma página de destino para um criador de sites sem código sob pH. Se formos até aqui ou seção e navegarmos pelo pH do herói, podemos ver uma variedade de designs. Digite dez, parece ótimo, ou um site sem código. No entanto, no cabeçalho 15, o título é muito menor. Então, vou selecionar isso para este exercício indo para a nossa esquerda e você seleciona no cabeçalho 15, estou pressionando Control C, que fará com que seja copiado. Vamos até a seção de componentes e criar uma nova página abaixo dela pressionando esse botão de adição, renomeado de 17 anos para página de destino e pressionando Control V. Vamos para o Página de recursos e veja se podemos encontrar algo que corresponda à nossa seção de heróis. O recurso 37 parece coincidir com o título que temos em nossa seção de heróis. Então, podemos copiar isso acessando o recurso 37 a partir daqui. Pressione Control C e cole-o de volta em nossa página de destino e verifique se eles estão alinhados. Também é bom ter uma página na qual possamos exibir o que oferecemos. E a partir daqui, se formos para o traço P, você pode descobrir que escolheu biscoitos seis. Parece ótimo, ótimo. Então, espero que volte à nossa página de destino. Vamos supor que sejamos uma empresa baseada em assinaturas. E se formos menores de idade para as tabelas de preços, há uma variedade de opções para escolher. A tabela de preços A3 parece ótima. Para manter as coisas simples, vou ficar com a tabela de preços cinco. Então, vamos também copiar isso de volta para nossa página de destino. Agora, vamos adicionar uma seção temática. Vamos para a página da equipe. Quatro seriam ótimos. Eu disse que isso nos permitiria permanecer consistentes com as paletas de cores. Já temos a equipe de cópia do botão verde para voltar à página de destino. Vamos adicionar mais dois itens e pronto, ou seja, uma landing page básica para startups. Vamos para a seção de contato. E depois de folhear para ver o que parece ótimo, acho que contatos e sexo são muito legais. Então, vamos duplicar isso de volta à nossa posição inicial. E por último, os CMS são colocados em nossa página. E é aqui que podemos ter uma seção sobre empresas, uma seção de recursos ou o que funciona para sua empresa, dependendo da natureza do que você faz. Foot or five parece ótimo , pois tem uma parte que você pode permitir que seus usuários assinem boletins informativos. Então, vou escolher a pé ou cinco e replicar isso de volta para nossa página de destino, que permite que você apresente rapidamente seus designs para outras pessoas. Então você quer mostrar isso para outras pessoas. Você pode simplesmente fazer com que pareça melhor pressionando o presente. E uma vez carregado, pode continuar neste horário. E isso permitirá que você apresente rapidamente suas ideias para outras pessoas. E em pouco tempo conseguimos criar uma landing page que parece muito boa graças à comunidade Pigma. Então, ao criar uma landing page de startup ou qualquer outra coisa em geral, dependendo do que você está tentando criar, algumas coisas podem ser diferentes aqui e ali, mas o básico permanece consistente. Por exemplo, para sites, você sempre terá uma barra de navegação, uma seção de heróis, uma seção Fale conosco. E eu também disse que, mesmo que você não seja um web designer, você deveria pelo menos tentar obter os direitos fundamentais. Então, na próxima seção desta aula, abordaremos coisas como paletas de cores, tipografia, alinhamento, quadros de humor e wireframes. E até o final da aula, espero que você tenha conhecimento suficiente para criar sua própria landing page. 4. Orientação para apresentação do projeto: Bem-vindos de volta a todos. Neste vídeo, descreverei as etapas que você precisa seguir para obter ajuda, fazer perguntas e compartilhar seus projetos nesta classe. Primeiro, vou começar explicando como compartilhar um projeto. Você pode compartilhar um projeto, reduzir o resfriamento às discussões. E aqui, sem querer, você deve compartilhar um projeto. Depois de clicar nele. Por exemplo, para enviar o exercício, examinamos a página inicial da startup. Você pode compartilhá-lo acessando aqui em cima e pressionando o botão azul que diz compartilhar. E certifique-se de que qualquer pessoa que tenha sido esse link possa ver e também ter esse link selecionado. E basta copiar o link. E depois de fazer isso, volte para a seção de projetos no Skillshare. Certifique-se de especificar o projeto no qual você está trabalhando. Por exemplo, esse projeto é o primeiro, então certifique-se de rotulá-lo como o projeto um. Aterrissagem, praia. E acesse o link abaixo. E você pode pressionar e enviar. Se você sempre quis compartilhar uma imagem. Você também pode fazer isso fazendo o upload de uma imagem. Se você tiver alguma dúvida, você também pode acessar esta seção onde diz, faça uma pergunta e faça uma pergunta e eu pessoalmente farei meu melhor para responder à sua pergunta. E, por fim, sinta-se à vontade para iniciar uma conversa a qualquer momento desta aula. Como a participação é apreciada. Por exemplo, se houver algo que seja benéfico ou alguma dica que você tenha, podemos compartilhá-la apenas iniciando uma conversa e publicando-a. Temos vários projetos nesta classe. E se você esquecer como compartilhar seu projeto, basta voltar a este vídeo. 5. Figma Noções básicas para você começar: Agora vamos voltar à nossa página inicial do Figma pressionando Voltar aos arquivos. E vamos criar nosso primeiro novo arquivo criando um arquivo do InDesign. Se selecionarmos uma moldura ou F. Isso nos permite escolher entre as diferentes molduras disponíveis, é muito correto. Podemos ver todas as molduras disponíveis. Se selecionarmos a margem da área de trabalho. Isso nos dará uma largura de 0, 14, 40 e uma altura de 1024. Se você selecionar no menu suspenso ao lado do ícone de retângulo na parte superior, isso permitirá que você adicione isso ao seu quadro, por exemplo, selecione essa opção. E se quiser duplicar isso em todo o quadro, você pode fazer isso pressionando Control C e Control V. No entanto, uma abordagem melhor seria pressionar o item e pressionar tudo enquanto o arrasta para a direita. Isso também pode ser feito para vários itens. Depois de destacar tudo e selecionar tudo, exceto um perdido, você deve movê-lo para onde quiser. E podemos mudar a cor da campainha de nossos carros destacando tudo à nossa direita. Em preenchimento, podemos selecionar nossa cor. Podemos adicionar um retângulo. E podemos enviar o retângulo para trás clicando com o botão direito do mouse nele e pressionando Enviar para trás. E podemos melhorar a aparência do retângulo ajustando o raio para falso. E parece muito melhor. E se você quiser adicionar texto, pressione esta camiseta, o que permitiria inserir texto. E podemos obter um texto fictício de um site gerador de texto fictício e preencher a parte do texto. São muitos textos. Aqui é o suficiente. Você já deve ter adivinhado, estamos construindo como um componente de depoimento ou um produto para nosso primeiro tutorial, pense em mim. Se você notou que os depoimentos geralmente têm uma pessoa. Então, vamos começar com um marcador de colesterol para a imagem da pessoa. E isso pode ser feito selecionando essa opção e criando um círculo. E esse círculo, para ser par, podemos simplesmente inserir 50 por 50. E isso nos daria uma forma mais arredondada. O círculo está se dirigindo, então vamos trazê-lo para a frente. Basta clicar com o botão direito do mouse e Crestone trazer para a frente. Embora tenhamos isso claramente, não conseguimos vê-lo porque ele tem exatamente o mesmo preenchimento de nós, nossos retângulos para que possamos fazer uma mudança rápida apenas preenchendo, preenchendo a mudança a cor é branca. Agora vamos adicionar o nome da pessoa ao lado do avatar. Parece muito grande, então podemos minimizar o tamanho daqui para algo como oito. Também podemos colocar outro texto no título de uma pessoa. Agora vamos minimizar ainda mais o tamanho do título. Digamos que você queira replicar esse componente que você criou. Como você perguntou, geralmente os sites têm várias avaliações, não apenas a avaliação de uma pessoa. Você pode seguir o caminho mais fácil, destacando tudo, pressionando Alt e arrastando para a direita. Ou outra maneira de fazer isso é destacá-lo e pressionar essa opção que diz Criar componente. E depois de criar um componente, você pode acessá-lo acessando seus ativos. E a partir daqui, você pode simplesmente arrastá-lo e colocá-lo. Isso pode economizar muito tempo, especialmente se você estiver trabalhando no mesmo componente repetidamente durante todo o projeto. E antes de encerrarmos o dia, vamos examinar o recurso de caneta no Figma, que basicamente permite que você crie sua própria forma personalizada e você pode acessá-la de cima a partir daqui selecionando a caneta desaparecida. E depois de selecionar a caneta, você pode desenhar a forma que desejar. E da forma como esse recurso de caneta funciona clicando e arrastando até o próximo ponto. E depois de conectar todos os pontos, você pode preenchê-los com a cor de sua escolha selecionando neste balde de tinta. Há muito mais, muito mais recursos do que o Sigma. No entanto, abordamos tudo o que precisamos para começar os projetos que abordaremos nesta aula. 6. Alinhamento e grade: Ao projetar nossas startups ou negócios, nesta página de destino, nosso objetivo é tornar nosso site visualmente atraente e fácil de usar. E o alinhamento desempenha um papel importante , pois nos ajuda a criar um equilíbrio entre o conteúdo e então eles o têm. Então você tem uma ideia de como é esse alinhamento. Examinaremos alguns exemplos. O primeiro exemplo, qual você acha que é melhor? Os elementos à nossa direita são os elementos à nossa esquerda. À nossa esquerda, tudo parece bem organizado. O espaçamento parece perfeito junto com o alinhamento. No entanto, à nossa direita, as coisas estão em todo lugar. Não vemos nenhum alinhamento ou ordem. Embora os do Foursquare em ambos os lados sejam exatamente iguais, a única diferença é como eles se alinharam e também o espaçamento. E isso fez a diferença de ter um design atraente e um design verdadeiro e atraente. O mesmo padrão pode ser visto em nosso segundo exemplo. E também nosso terceiro exemplo. Você pode estar se perguntando: como você pode garantir que as coisas estejam alinhadas corretamente? E a resposta é adicionar grades de layout ao seu design. Vamos adicionar uma nova página e criar um novo quadro. Selecione na área de trabalho. E sob design. Selecione a opção que diz grade de layout. E selecione as configurações da grade de layout e converta-as de nota coluna e altere a conta 5-12. E vemos que não há espaço entre o final. Então, vamos ver as margens dos complementos até 140 e a calha até 30. Adicionar uma grade de layout permitirá que você tenha um quadro de referência claro que o ajudará a permanecer on-line. Por exemplo, podemos criar uma barra de navegação e garantir que tudo esteja alinhado. Pode ter um texto para o nosso logotipo. Podemos ter um espaço reservado para imagens. E então alinhe isso ao nosso parágrafo de texto. A menos que possamos adicionar uma linha na parte inferior. Como você pode ver, adicionando pães Leo, conseguimos ter o alinhamento e o espaçamento adequados. E isso nos ajudou a criar um equilíbrio entre o conteúdo e o layout. Em resumo, ter um alinhamento garante que todos os elementos estejam alinhados entre si. Para garantir que sua página de destino ou site tenha uma aparência mais profissional e organizada. Para obter mais detalhes sobre a grade, incluí uma referência criada pela Figma sobre a grade de layout. Os valores dessa grade foram selecionados com base em um ótimo web designer. 7. Inspirando-se: Você pode estar se perguntando se deveria criar algo como um site do zero. Ou você pode estar se perguntando: como os outros fazem um ótimo e excelente design? E a melhor resposta é se inspirar nos outros. Agora você pode dizer, bem, como faço para me inspirar? Bem, você pode se inspirar visitando sites como este. Bill.com é um site que permite que você veja um ótimo web design, design de produtos e muitas outras coisas boas. Para o propósito desta aula, digamos que você esteja tentando criar uma landing page de startup. Então, em web design, você pode digitar a página inicial da startup. Atualmente, não estou logado, então não conseguirei salvar esse design. Portanto, certifique-se de criar sua conta. E depois de criar uma conta, você poderá salvar seu design. Depois de fazer login, posso salvar esse design. Então, para o propósito deste exercício, digamos que eu esteja interessado nesse design. Posso criar uma nova coleção, dê um nome a ela também. Página inicial da startup. E clique em Criar coleção. Eu terei uma coleção relacionada a essa coleção. Digamos que eu esteja interessado neste design. Posso adicionar isso à página inicial da startup. Você pode adicionar quantos quiser, mas ter três é bom o suficiente para começar. A página de destino que você está tentando criar. Então, agora, abaixo do seu perfil, você pode acessar suas coleções. E nas minhas coleções, temos a melhor página de destino e podemos ver as três páginas de destino com Peck. Se você estiver procurando por um site que forneça mais detalhes, visite o manual aqui. Se digitarmos a página inicial da startup. Se abrirmos apenas um deles, podemos ver que eles são muito detalhados em comparação com os exemplos e resumo do drible. Antes criar seu aplicativo ou site, é recomendável veja o que outras pessoas em seu domínio estão fazendo. Isso é porque você não precisa projetar tudo do zero. 8. Introdução de Wireframing: Antes de criar a taxa de chegada, ter um wireframe nos ajudará a entender e ver o site com antecedência, economizando tempo a longo prazo. Por exemplo, é mais fácil criar reis na fase de wireframe do que ter que fazer essas mudanças depois de implantar a vida útil do site. Uma maneira fácil de pensar sobre isso é a seguinte. Esta casa tem plantas antes de serem construídas. O wireframe serve como um modelo para sites. Vamos voltar para a comunidade Figma. Pressione em wireframes. Vamos procurar um kit mínimo de wireframe. E este, projetado por uma pessoa chamada Bonnie Hong, parece bom, pois tem muitas reações. Então, vamos obter uma cópia pressionando essa cópia getter, que a duplicará automaticamente em seu Figma. Então, depois de abri-lo, se acessarmos Ativos e abrirmos componentes, podemos ver que temos um avatar, botão principal e tudo o que precisamos para começar a enquadrar nosso site, que abordaremos na seção final do projeto desta aula. 9. Introdução do projeto principal: Bem-vindos de volta a todos. Nosso projeto final é criar uma landing page educacional para startups. Desde o wireframe até a criação do design final da figma. Ao final deste projeto, você poderá aplicar o que abordamos em seus próprios projetos e criar o web design Figma para sua startup ou empresa real. Embora possamos nos inspirar sites como Dribbble ou Behance. Eu recomendo experimentar primeiro o Figma como comunidade, especialmente se você não tiver muito tempo. Eu disse que pelo menos você receberá arquivos já projetados que podem ser facilmente ajustados e usados, como o que abordamos em um de nossos vídeos anteriores. Com isso dito, vamos começar. 10. Criando um moodboard: As recompensas geralmente são usadas para servir inspiração para gerar novas ideias. Acesse behance.net e pesquise por startups educacionais ou web design. E fique à vontade para selecionar o superprojetado fora das startups educacionais. Pois estamos apenas procurando inspiração. Este site foi desenvolvido por uma agência de marketing. Isso parece bom. Podemos adicionar isso ao nosso quadro de humor. Ao salvá-lo. Podemos criar um novo quadro de humor e chamá-lo de página inicial de startups educacionais. Eu também gosto desse web design. Embora seja para uma empresa de desenvolvimento de software. As paletas de cores parecem padrões e estão boas até agora. Então, adicione isso também ao quadro de humor que acabamos de criar. Vamos selecionar mais um projetado para finalizar nosso moodboard. Talvez para a nossa última, vamos pesquisar a página inicial da startup. Isso parece bom até agora. Então, vamos adicionar isso ao nosso quadro de humor. Então, agora, se voltarmos ao nosso perfil do Behance e irmos para a seção do quadro de humor. Podemos ver os painéis de humor que acabamos de salvar. Nosso último passo é colocar tudo isso no Figma para que tenhamos um único lugar onde possamos visualizar tudo de uma vez. E agora vou colocar tudo isso no Figma. E se você estava apenas assistindo e ainda não entrou no quadro de humor, fique à vontade para pegar os arquivos do projeto e baixar o arquivo Figma que contém o quadro de humor que acabamos de criar. 11. Wireframe da página inicial: Agora vamos criar um wireframe usando o kit mínimo de wireframe que duplicamos anteriormente. Depois de ter o kit mínimo de wireframe, abra-os Figma. Vamos começar adicionando uma página e renomeá-la para wireframe. Para a página inicial de inicialização, depois de selecionar em verde. E agora estamos projetando para um desktop. Então, na área de trabalho, no menu suspenso, selecione Área de trabalho. Primeiro, começaremos criando nossa barra de navegação. No vídeo anterior, criamos um quadro de humor e o adicionamos ao nosso arquivo Figma. Então, vamos colocar isso aqui. Temos tudo em um só lugar, então digite humor, quadro de humor. E posso duplicar isso acessando nosso quadro de humor. E em camadas, se você apenas selecioná-las, enquadre um, controle C. E se você voltar para o quadro de humor, pode simplesmente duplicá-lo. Pressionando Control V. Começaremos primeiro criando nossa barra de navegação. E antes de fazer isso, vamos criar uma grade de layout para que tudo fique alinhado. Se voltarmos ao nosso quadro de humor, o que você descobriria como Coleman agora é um bar com o logotipo da empresa. Seção de contato sobre nós. E dependendo da natureza da sua startup ou negócio, você faria pequenos ajustes. Não recebi um call to action na sua barra de navegação. Também seria uma boa ideia adquirir nossa barra de navegação. Vamos para Assets. E em ativos, esse kit de wireframe vem com uma barra de navegação que já foi criada. Então, tudo o que temos que fazer é adiar essas duas horas. Vemos que o botão Começar está fora da grade, o que nos agradou. E podemos corrigir isso clicando duas vezes em Começar. E à nossa direita. Se você pressionar esses três pontos, desconecte a instância. Depois de desconectá-lo, basta movê-lo para fora do quadro da barra de navegação. E podemos fazer o mesmo com nosso componente de cabeçalho. Mova-o para fora e podemos fazer o mesmo com o logotipo. Podemos remover essa moldura. Então, agora ficou mais fácil navegar. Podemos ter nosso logotipo no topo. Podemos garantir que tudo esteja alinhado destacando os elementos da nossa barra de navegação depois selecionando os centros verticais de alinhamento. E sim, parece melhor. Em vez de um bom começo. Vou substituir isso por entrar em contato. E agora podemos voltar às camadas e ir embora. Na verdade, toda a página de destino tem algum tipo de imagem em sua página inicial. Vamos voltar para a página do wireframe. Pode ir para ativos. Represente que estaríamos colocando uma imagem. Um estranho. Então, 598 por quatro ou 46 deve ser bom o suficiente. Agora, se voltarmos ao nosso quadro de humor, podemos ver que todas as empresas têm. Sou uma breve descrição do que eles oferecem para o texto. Vamos ver se temos recursos em nossos ativos. Se formos para Assets e no kit de wireframe, podemos ver que existem conteúdos diferentes. E acontece que há uma seção de heróis da qual podemos aproveitar. Então, por enquanto, já temos um espaço reservado para imagens policiado. Então, podemos simplesmente pegar essa parte por Copia. Você pode obter o Controle C, voltando ao nosso wireframe, colando-o volta e certificando-se de que está alinhado. Sim, isso parece bom o suficiente. Não precisamos desse segundo botão para que eu possa excluí-lo. Se voltarmos ao nosso quadro de humor, podemos ter algo assim e colocar o nome da nossa empresa por enquanto. Digamos que o nome da nossa empresa seja UB event. Então, antes do parágrafo, Sr. mova isso. E, por favor, algo que faria sentido para uma startup educacional dizer. Vou sugerir que tenha sucesso aprendendo com eficiência. aprendizado não deve ser visto como um evento relacionado, mas sim como parte da vida e do crescimento. Em vez de priorizar, substitua melhor os textos por algo como aprender mais. É muito difícil mover as coisas nesse quadro, então é melhor separar cada instância. Vamos colocar uma flecha. Percebi que a barra de navegação está um pouco baixa, então vamos movê-la um pouco para o topo, destacando tudo e subindo. Sim, isso é bom. Também podemos mover a imagem e o texto um pouco para cima. 12. Sobre nós Wireframe: Na seção Sobre nós, tudo é muito parecido com o que fizemos. Podemos copiar isso pressionando a tecla Alt enquanto arrastamos para baixo. Vamos ter um pequeno cabeçalho para nós, seguido por um pequeno Logan e um parágrafo explicando o que oferecemos. Esse pode ser nosso short, Logan. Educação de qualidade e acessível. Em vez desse texto fictício, vai substituí-lo por algo que faça mais sentido. Vamos reduzir um pouco isso para abrir espaço para o que será o policiamento. Podemos descrever um texto, colocá-lo aqui e escrever sobre nós. E torna isso um pouco maior. Essa fonte parece boa. E sim, isso é basicamente tudo para a seção Sobre nós. 13. Plano de preços Wireframe: Agora criaremos nosso wireframe para os preços e isso para obter inspiração. E se voltarmos ao painel de avaliação, procure informações sobre preços. Podemos descobrir que o terceiro mood board tem algum preço de inspiração. Assim, podemos recriar algo assim para nós mesmos. Podemos ver que há um título, um título e um parágrafo menores . Então, vamos fazer isso acessando de wireframe kit de wireframe clicando duas vezes no conteúdo central. Por enquanto, precisamos apenas do cabeçalho e do parágrafo para que possamos copiar esse Controle C e colá-lo novamente. Ou podemos colocar esse cabeçalho com preços acessíveis. Em nosso quadro de humor, podemos ver o cabeçalho menor no topo. Então, podemos fazer isso acessando a seção Sobre nós. Acabei de perceber que havia um pouco de espaço, então eu o removi e você pressiona o Alt e arrasta para baixo. Eu posso duplicar isso facilmente. Podemos substituir isso por plantas de preços. Podemos ter um parágrafo de apelo à ação em que podemos ver algo ao lado, investir em si mesmo com nosso conteúdo de qualidade. Em nosso kit de wireframe. Não conseguimos encontrar nada para usar. Assim, podemos recriar rapidamente os retângulos. Indo para o retângulo, criando uma forma retangular. Podemos ver que cada um tem algum tipo de descrição da chave de assinatura, seguida pelo preço e seguido por algumas das coisas que eles oferecem. Junto com um apelo à ação. Para R1, estou pensando em ter apenas três. Portanto, a primeira versão seria a versão gratuita. Certifique-se de que esteja centralizado. E substitua isso por $0. Isso é um pouco pequeno, então vamos aumentar o tamanho da fonte para algo como 32 ou até mesmo. 36 deve ser bom. Então, para a versão gratuita, estamos em uma startup educacional. Podemos ter, podemos oferecer algo ao lado. Os alunos podem ter acesso a qualquer disciplina. Limitação de quatro aulas. Eu posso simplesmente duplicar isso, diminuir o tamanho para algo como 15. Centralize esse outro serviço que podemos oferecer, que pode ser que os alunos possam postar até cinco perguntas por mês. Certifique-se de que tudo esteja espaçado igualmente. E as pessoas poderão ter acesso a dois problemas práticos. E podemos ter um apelo à ação igual ao que podemos ver no quadro de humor. Então, para fazer isso, podemos acessar Ativos, acessar componentes e adicionar um botão principal. Vamos ter algo, digamos 543. Certifique-se de que esteja centralizado. Essa borda afiada não parece muito boa, então podemos torná-la mais arredondada alterando o raio do canto para algo como 14. Sim, isso parece muito melhor. Hopi com facilidade. Já que estou pensando em ter uma versão padrão e uma versão premium. Ele pode simplesmente dirigir com isso enquanto pressiona Alt. O espaçamento parece perfeito. A próxima é nossa versão de assinatura padrão. Na versão padrão, podemos cobrar algo como $10 por mês. A diferença média seria que as pessoas que assinaram acesso ilimitado às aulas podem postar um número ilimitado de perguntas por mês. O mesmo vale para os problemas de prática. E, obviamente, se, para o botão principal, precisarmos fazer a alteração para algo como se inscrever. E nossa última versão seria a versão premium. A versão premium cobrará $19 e será permanente. E podemos remover isso e simplesmente duplicá-lo em nosso modelo premium. A única diferença que o prêmio terá em relação ao padrão seria receber feedback instantâneo de um especialista. Vamos garantir que isso esteja alinhado com a prisão. O alinhamento parece um pouco errado. Aqui. Há muito espaço entre os preços e os recursos que a assinatura oferece. No entanto, aqui, não há muito espaço. Então, para acomodar isso, podemos simplesmente aumentar um pouco essa altura e movê-la. E podemos fazer o mesmo para todos. Podemos selecionar tudo isso uma vez e movê-lo. E certifique-se de que esteja alinhado com a versão padrão e a versão premium. E isso parece bom e há uma boa quantidade de espaçamento. E só precisamos mudar isso de desculpe, podemos nos inscrever gratuitamente. E sim, isso é basicamente tudo para o nosso plano de preços. E só falta uma coisa. Embora possamos ver que o espaçamento entre as diferentes versões de assinatura é o mesmo. Se você observar nossas bordas, veremos que a versão premium está mais próxima da borda, enquanto a versão gratuita está mais distante. Então, podemos corrigir isso destacando tudo de uma vez. Pressionando o controle e movendo-o levemente até sentirmos que tudo está centrado. E sim. 14. Contacte-nos Wireframe: Vamos agora fazer nossa seção de contato. Se voltarmos ao nosso quadro de humor, podemos ver que a primeira página de destino tem um ótimo design que podemos replicar ou nossa seção de wireframes Fale conosco. Vamos primeiro obter um cabeçalho para nossa seção de contexto. Podemos obter isso facilmente pressionando Alt enquanto eu arrasto para baixo e coloco o texto. Vamos mudar o estilo da fonte de negrito para normal. Vamos também ter algum tipo de plano de fundo que, antes disso, eu preciso estender o quadro. Então, personalize a área de trabalho e arraste-a para baixo. Para criar um plano de fundo. Podemos simplesmente pegar um retângulo e adicioná-lo. Traga o Fale Conosco para a frente. Vamos também criar uma antipatia por apontar o sol, uma no quadro de humor. E faça o mesmo, Bring it on. E podemos ter algo como ficar à vontade para me fazer qualquer pergunta. Depois vamos recriar esse botão em nosso wireframe obtendo um retângulo. E para que fique visível, vamos mudar o preenchimento de cinza para branco. E queremos que seja oval. Então, mude seu raio para algo como 20 ou até mais. 25. Podemos adicionar, digamos, seu nome. Isso muda para claro e muda a cor de preto para cinza. Ou podemos simplesmente ter a cor preta e mudar isso de 100% para algo como 50 por cento. Sim, isso parece muito melhor. Vamos diminuir o tamanho da fonte para algo como 14. E certifique-se de que isso esteja centrado. Sim, isso parece bom. fazer o mesmo com e-mail e assunto. Destaque. Um padrão. Ao selecionar Alt, arraste para baixo e altere o nome para assuntos do e-mail. Precisamos de outra caixa ou da mensagem. E basta pressionar Alt, arrastá-lo para a direita e ampliar isso. Vamos torná-lo menor. Certifique-se de que esteja alinhado na parte inferior. A seção de dispersão dos textos que vê a mensagem. Isso parece perfeito. Agora tudo o que nos resta é um botão e uma linha. Podemos recriar isso facilmente. No entanto, para o botão, podemos simplesmente obtê-lo dos ativos. Arraste o botão principal. Claro, está alinhado e pode fazer com que o texto e o raio falem. Ou até engraçado. Engraçado, parece melhor que o meu. Vamos adicionar um retângulo. A cor é preta e verifique se você está saturação de matiz e brilho e altere isso de 100% para 40%. Sim, isso parece melhor. 15. Blog Wireframe: Nos vídeos anteriores, conseguimos criar um wireframe para nossa página inicial ou nossa seção Sobre nós além de entrar em contato conosco e, em vez de recursos, substituí-lo por um log. E neste vídeo, criaremos nosso wireframe ou a seção do blog a partir do nosso quadro de humor. Vamos ver se podemos encontrar seção de blog oblíqua que possamos usar em nosso wireframe. Na segunda página de destino, você ainda tem algo que estamos procurando, uma seção de blog. Vamos voltar ao nosso wireframe. finalizar, vamos verificar se já temos um kit de design de blog que podemos usar a partir de nossos ativos. Se formos para o kit de wireframe e acessarmos o conteúdo central, vamos começar copiando o cabeçalho ao lado da mesa, ao lado do subtítulo. De volta ao nosso wireframe, controle C, controle V. Agora vamos voltar aos ativos. Podemos simplesmente copiar um desses e duplicá-lo. Então, basta selecionar qualquer um deles. Esse suporte de imagem parece um pouco grande, então tente minimizá-lo. Vamos primeiro separar a instância. Essa mensagem deve ser suficiente. Agora, pressionando Alt com água. Arraste para a direita. Certifique-se de que esteja centralizado. Então, quando tivermos tudo, você volta ao nosso quadro de humor, você pode ver que eles têm um pequeno tronco somando o topo, mas um título maior e um subtítulo menor. Então, podemos ter algo assim. Para o blog. Podemos obter um texto com a mesma fonte exata. Então, em Altoid se arrastando pela metade. Isso se converteu em Logan Stan. Vamos substituir esse texto por algo como ficar atualizado. nosso subtítulo, podemos acompanhar nossas últimas notícias sobre educação e nos manter informados. Por fim, acabamos de fazer algumas alterações neste texto. Normalmente, os blogs tendem a ter o nome do autor. Bem como a imagem do autor. Só vamos fazer isso. Agora. Vá para Ativos. E em componentes, você poderá encontrar uma arbitragem. Podemos adicionar o avatar. Movemos esse centro de conteúdo e minimizamos o tamanho, algo como 40. Parece um pouco menor, então vamos em frente. Agora vamos adicionar texto, o nome do autor. Então vamos pegar nosso retângulo. Vamos também marcar um encontro. Claro. Os dados dessas listas publicadas de logotipos publicadas listas ajustam a cor do nosso texto ajustando a porcentagem de matiz, saturação e brilho para algo como 50. Vamos fazer o mesmo com o nome do autor. Agora podemos duplicar isso nos outros dois elementos de log. Basta seguir em frente. Coloquei tudo o que foi selecionado, pressionei o alt e arrastei para a direita. O sinal não parece estar centrado. Então, isso sugere que vamos ao quadro de humor. Podemos ver que também é possível ver esses componentes para mostrar que podemos alternar entre páginas diferentes ou a seção do blog, onde podemos recriar algo semelhante selecionando neste círculo e tenha algo em torno de dez por dez pessoas Alt. Enquanto arrasta para a direita. Certifique-se de que esteja centralizado. Para mostrar que P é a página exata que somos N, podemos destacar na página alterando as cores para indicar que somos essa página. 16. Wireframe do rodapé: Bem-vindos de volta a todos. Agora nos resta a última parte do nosso wireframe, que está criando a seção de rodapé da nossa página de destino. Se você voltar ao nosso painel de humor, as páginas de destino desta startup têm um motor adequado que podemos usar como inspiração para criar o nosso próprio. Podemos começar criando algum tipo de plano de fundo. Antes de fazer isso. Em seguida, sua área de trabalho. Para criar mais espaço, pressione retângulo de Rex e crie um espaço reservado de fundo. Vamos ver se temos algum recurso para nosso rodapé em nossa seção de ativos. E se formos para o componente, existe uma seção de rodapé que podemos trazer para nosso wireframe. E atualmente não está correspondendo ao nosso histórico. Então, vamos tentar desanexar a instância para que possamos movê-la. Atualmente, não podemos mover nenhum desses elementos. No entanto, se nos separarmos, a instância poderá movê-la para fora e remover esse fundo branco. Também podemos mover os elementos em um nível individual. Não precisamos de nenhum desses ícones. Então eu disse excluí-lo ou removê-lo. Vamos alinhar as coisas. Custos do logotipo. Então, aqui, temos muitos elementos que não precisamos desse quadro. Podemos remover a seção de casas. Além disso, remova os termos e a privacidade mais longos de Sobre nós. Vamos ajustar o texto para as fontes. Eles são muito pequenos. Podemos alterá-lo de pequeno, meio arrojado para apenas grande, meio arrojado. E também para contato. Verifique se o espaçamento está correto. Sim, não precisamos de preços. Em vez de preços, tenha algo como empresa. E em Empresa, podemos ter coisas como preços, suporte no blog e usar regularmente. fonte pode até ser melhor. E a cor muda 100%, ou a cor preta para algo como 50%, 60% são os recursos que oferecemos. Podemos ter algo como suporte lunar, parte educacional algo como passar o mouse sobre o mouse, talvez uma área para feedback de clientes. Na seção de contato, podemos ter a conta de e-mail da empresa, o número de telefone, o endereço, a empresa. Para melhorar a aparência, vamos mover os contatos um pouco mais longe. Vamos garantir que os recursos sejam inseridos no meio. Junto com todo o conteúdo que você precisa. Você volta ao nosso quadro de humor. Você pode ver que todos os moodboards têm um lugar onde os usuários podem fornecer seu endereço de e-mail para assinar nosso boletim informativo. Vamos recriar algo para nossa landing page. Vamos nos certificar de que temos espaço suficiente, então vamos nos mover. Isso deve ser bom o suficiente. Não é um cabeçalho que diz pipe. Nosso boletim informativo e altere o tamanho da fonte de extra grande para pequena, normal. Claro, está alinhado. Agora vamos criar um botão, igual ao que vimos em nosso quadro de humor. Solicita que os usuários escrevam seus endereços de e-mail. E podemos fazer isso indo até o retângulo, criando uma forma retangular. E mude a cor para branco para que fique visível após o raio da agenda para algo como 20. Vamos copiar o e-mail de cima para baixo. Basta pressionar o Alt, arrastar enquanto o arrasta para baixo. Certifique-se de trazê-lo para a frente. Certifique-se de que todos os elementos da nossa comida estejam alinhados para destacar todos eles e alinhar os centros verticais. Sim, isso parece muito melhor. A única coisa que resta são dois. Apenas o nome dessa empresa. Sim. Estamos praticamente prontos em termos de criar nosso wireframe. 17. Nota final no Wireframe: Então, você pode estar pensando que passamos muito tempo construindo esse wireframe e pode pensar que ele não agregou valor. Por que não criar um site real em realidade? Fizemos um grande favor a nós mesmos construindo um wireframe. Isso nos permite validar a suposição de nossa startup ou empresa usando a menor quantidade de recursos. Imagine que você criou um site ou um aplicativo e sua equipe é cofundadora e diz que quer que a página de serviços ou que a página de contato que você criou seja revisada. Depois de criar o site real, teria perdido muito tempo com um wireframe como esse, no qual você possa criar facilmente. O Figma permitirá que você se comunique com outras pessoas e receba feedback. E quando todos estiverem na mesma página, você pode prosseguir para a próxima etapa, que é fazer com que tenha uma boa aparência ao criar a página de destino real no Figma. 18. Criando seu logotipo: Antes de começar a criar nosso design, primeiro criaremos um logotipo. A menos que você esteja pensando em ter um texto , pois seu logotipo era apenas o nome da sua empresa. Os sites que usaremos para criar nosso logotipo são chamados meio cheio e você pode acessá-lo digitando asheville.shopify.com, pressionar e começar. E dependendo da natureza do seu negócio e empresa em que você é. Como somos uma startup educacional, continuaremos com a opção tecnológica. Para os fins deste vídeo. Aqui, para o visual, os estilos permitem selecionar até três opções futuristas, criativas e modernas. E depois desse preço no próximo. E se voltarmos, já temos nosso nome. Você seria inventado. Mas, por enquanto, vamos deixá-lo em branco. Eu recomendo que você selecione todas as opções aqui para economizar tempo se precisar de alguma dessas opções no futuro. Depois, podemos ver que há muitos logotipos gerados por IA que podemos escolher. O logotipo, isso parece bom. Depois de pressionar Editar, você pode até mesmo fazer com que o chá goste da fonte que aparece e também das diferentes cores. A fonte. Vou apenas mudá-lo para o correlativo. Nos próximos vídeos, abordaremos os diferentes tipos de tipografia. Quero que o estilo da fonte seja padronizado. É por isso que vou escolher um condecorado. Mas a moral será discutida no próximo vídeo. E veja qual você gostaria. Esse parece bom. Então, vou continuar com essa tia e pressionar Avançar. E depois prove isso. Oh, parabéns, você tem seu novo logotipo. O pacote do logotipo inclui todas essas opções. Este download precedente. No entanto, para fazer o download, você precisa fornecer seu e-mail e também sua senha ou você pode simplesmente fazer o login. Eu já tenho uma conta, então posso simplesmente fazer o login. Depois de fazer login, você pode clicar em Download. E se você recebesse essa notificação informando que todo o pacote de logotipo e arquivos de design foram enviados para seu e-mail. Aguarde três ou 4 minutos e verifique seu e-mail e você provavelmente receberá um arquivo compactado do qual poderá baixá-lo. Então, pressione para baixo. Depois de baixá-la, você pode ver todos os diferentes lugares para os quais pode usar a imagem. Por enquanto, queremos apenas o logotipo transparente para nosso próximo exercício. Então tenha isso à mão. 19. Paleta de cores: Bem-vindos de volta a todos. Neste vídeo, examinaremos algumas ferramentas que podemos usar para criar nossa paleta de cores. E também veríamos alguns exemplos de como é uma paleta de cores ruim. Então, deixe-me começar fazendo uma pergunta simples. Você confiaria ou faria um pedido de uma empresa que tivesse um site parecido com esse? Eu pessoalmente não confiaria em um site assim. Há muitas cores densas. Onde está a pessoa que projetou isso? Ele quer que nos concentremos no texto de fundo. Não há nem mesmo uma barra de navegação apropriada. Então, quais são algumas ferramentas que podem facilitar esse processo para nós e potencialmente nos ajudar a evitar a sensação de paletas de cores terríveis. Vamos começar visitando um site chamado humano, que permite criar paletas de cores ou combinações de cores incríveis. Você pressiona no site. Seção. Existe uma opção em que você pode escolher entre revista ou monocromática. Aumentando o número a partir daqui. Se estiver pressionando três, você terá mais. Mas ter uma paleta de quatro cores é bom o suficiente para o nosso exercício. Toda vez que você quiser gerar um novo, você pode simplesmente passar para gerar. Se você quiser ver um site baseado em ilustrações, você pode fazer esse ajuste aqui. E dependendo da quantidade de paletas de cores que você deseja usar, você pode aumentar os números. Você pode até mesmo fazer upload de sua própria imagem e ver. Este site é especialmente útil se seu logotipo consistir apenas em letras sem design. Podemos ter uma ideia rápida do que esperar. Era o seu logotipo. 20. Extraia paleta de cores do logotipo: Neste exercício, coletaremos amostras de cores do nosso logotipo, embora possamos amostrar as cores manualmente, graças aos sites avançados hoje em dia, esse processo é muito mais fácil. Nosso primeiro exercício é obter amostras de cores para as paletas de cores que usaríamos em nosso wireframe. Visite os sites chamados colors dot C-O e acesse Ferramentas. Este site permite que você faça o upload do seu logotipo e gera cores que combinam com o logotipo, que acaba economizando seu tempo. Pressione o gerador OnStart. Aqui. Toda vez que você pressiona a barra de espaço, ele gera paletas de cores que você pode usar. No entanto, para o nosso caso, estamos procurando criar uma paleta de cores a partir da imagem que acabamos de baixar. Então, primeiro precisaríamos descompactar a pasta zip que recebemos no ensino médio. Vou apenas criar uma nova pasta e renomeá-la para Logo e copiar tudo dessa pasta. Agora, será mais fácil enviá-lo para o site a partir do desktop, selecionar o logotipo. E vamos escolher a opção Transparente. E você pode jogar com isso para ver quais combinações seriam ótimas para o seu site. Até agora, temos preto e azul claro. Você pode clicar em Avançar. E podemos até abri-lo no gerador. Podemos bloquear essa primeira opção, a segunda opção e alterar as três restantes porque elas parecem praticamente iguais às que temos no nosso lado esquerdo. Podemos pressionar a barra de espaço e ver o que podemos. Podemos até selecionar nossa própria cor. Por exemplo, eu gostaria que meu site tivesse cores brancas. Então, vai ter certeza. E então eu concluo o restante até encontrar a cor que eu quero. Eu posso pressionar a barra de espaço. Sim, isso parece bom para mim. Agora eu posso exportar isso como uma imagem. Dê um nome à paleta de cores e basta pressionar em exportar. E isso nos dará a imagem baixada. Como estávamos perto da metade deste curso, eu agradeceria se você deixasse uma resenha com isso dito: “ Até o próximo vídeo”. 21. Projeto de cores de amostragem: Bem-vindos de volta a todos. Neste exercício, coletaremos amostras de cores de qualquer imagem que tenhamos. Por exemplo, digamos que você tenha uma página em seu site e seu conteúdo organizado , exceto onde estão suas cores. Vamos apenas seguir as etapas abordadas no vídeo anterior e obter a combinação de cores, pois isso economiza esse tempo. Primeiro, teríamos que exportar a imagem. Você pode ter uma prévia rápida. Clique em exportar. Depois de ter esse expoente, olá não é zero. Podemos simplesmente soltar a imagem que acabamos de baixar e pronto, temos a combinação de cores. O inicial parece bom para mim. No entanto, você pode escolher o que quiser e jogar com isso. Todos o exportam como uma imagem. Basta chamá-la de cor um. E esporte. Depois de baixar a imagem, podemos simplesmente colocá-la aqui e minimizá-la. Que parece muito melhor. Assim que tivermos isso. Podemos facilmente provar as cores. Selecione na moldura. Selecione no conta-gotas. E vamos ver se a laranja será uma ótima opção. Isso é muito escuro, então talvez reduza a porcentagem 100-40. Primeiro. Vamos experimentar a cor verde. O verde está bem até agora, então vamos ficar com o verde em vez do laranja. M para a caixa em vez de preta. Podemos comer laranja. Isso parece muito melhor do que o que tínhamos inicialmente, apesar de uma pequena mudança. No que diz respeito aos textos. Examinaremos isso no próximo projeto, onde discutiremos a topografia e ajustaremos o texto adequadamente para torná-lo ainda melhor. Essa parte da aula do exercício é para aplicar o que acabamos de fazer com isso. Eu quero que você exporte esta imagem para o site chamado cores C0. Devido à amostra das cores. Como fizemos neste vídeo. Sinta-se à vontade para compartilhá-los na discussão. 22. Tipografia: Bem-vindos de volta a todos. Neste vídeo, abordaremos a topografia. topografia é normalmente usada para melhorar o apelo visual, estabelecer algum tipo de hierarquia e também criar uma sensação de equilíbrio em seu site ou em qualquer outro lugar. É recomendável não usar mais de três estilos de fonte em um único site. Website. Pessoalmente, fico com apenas dois. Eu obtenho as fontes de que preciso, geralmente do Google Fonts. Se você acessar o Google Fonts e acessar a seção de categorias, verá que temos as quatro fontes principais. Serif, sans, serif, display e caligrafia, que também é conhecida como script. Talvez você só precise saber isso, pois certas famílias têm pontos que normalmente têm algum tipo de rabo no final de cada letra. O sans serif é o próximo e mais usado atualmente. Você verá isso em muitos sites. O próximo ponto é chamado de fonte de exibição. Geralmente, é melhor ter esse tipo de fonte em um título. E, por segurança, você prefere usar sans serif em vez de display, pois telas muito decoradas e podem ser difíceis de ler se você estiver usando parágrafos. Quem demonstra como é se você o estiver usando em um parágrafo. Então, você pode ver que isso é muito difícil ler em comparação com o san-serif, que é mais fácil para o gelo. A última família estrangeira que também vou examinar é a caligrafia. É autoexplicativo. Geralmente é bom ter algum tipo de caligrafia nas manchetes. Como uma cafeteria ou posso criar um negócio. E isso é tudo para esta lição. Na próxima lição, teremos um projeto de tipografia. 23. Projeto de tipografia: Bem-vindos de volta a todos. Então, vamos agora aplicar o que aprendemos sobre tipografia à prática, examinando alguns exercícios. um de nossos exercícios anteriores, examinamos a amostragem fixa da cor com base na imagem. E neste exercício, o foco será ajustar a topografia. Você não tem esse arquivo Figma. Você pode encontrá-lo na pasta do projeto. Começaremos primeiro com esse cabeçalho. Clique duas vezes nele. E na guia Exportar, podemos ver que a fonte é ou garrafa. Quando você seleciona a fonte para tentar encontrar um estilo de fonte, havia mais de seis estilos de fonte. Se você está se perguntando como encontrar isso, você pode ver aqui que existem diferentes estilos de fonte. Por exemplo, se formos para a luz, ela ficará mais leve. Atualmente somos um parafuso. No entanto, se você acessar fontes do Google, sempre poderá encontrar fontes diferentes. Injete isso de volta em Poppins. Como esse é o cabeçalho principal, queremos que as pessoas prestem atenção. Isso aumenta o telefone para pelo menos 64. E, como você pode ver, quando você tem palavras muito ousadas, a melhor coisa a fazer é diminuir o espaçamento entre elas para que fique melhor. Isso parece muito melhor do que o que tínhamos inicialmente. No que diz respeito aos textos. Não vamos mudar nada. Vamos apenas receber esse texto fictício e alterá-lo para aparecer também. Para textos mais claros, é preferível ter algum espaçamento. Então, a única coisa que resta agora é ajustar esse estilo de fonte. Não está centralizado, então certifique-se de que esteja centralizado. E talvez mude de normal, meio ousado. E isso parece muito melhor. Agora temos algum tipo de hierarquia. O exercício para esta parte desta aula é para você ajustar o quadro dois e o quadro três. Atualmente, estamos prontos para. Até agora. Suponho que você já tenha amostrado a cor como parte do exercício anterior. Para este projeto, você só precisa se preocupar com o ajuste da topografia e nada mais. 24. Design de página inicial: Bem-vindo de volta. Agora continuaremos de onde paramos de fazer a parte de wireframe do vídeo e agora projetaremos o wireframe real. Começaremos duplicando o wireframe simplesmente pressionando na área de trabalho a partir daqui ou de cima. Temos que fazer é pressionar Alt. E quando você estiver selecionando Alt, arraste para a direita. Vamos escolher esse design. Se você quiser usar um logotipo que criamos anteriormente, basta ir até a pasta do projeto e obtê-lo de lá. Ou se você tiver seu próprio logotipo que foi enviado por e-mail pelo ensino médio, você também pode inseri-lo aqui. Da pasta do projeto. Com recursos mais baixos, será capaz de encontrar tudo isso. Podemos levar isso diretamente para Figma. Em vez do logotipo, o substituirá pelo logotipo real. Apenas certifique-se de minimizá-lo. Isso parece bom por enquanto. Também tenha uma ideia das paletas de cores que usaremos em quatro designs Seria uma boa ideia colocá-las em algum lugar no topo. Se você acessar a pasta do projeto, também poderá encontrar a paleta de cores. Então você pode simplesmente retirá-lo de lá e minimizá-lo. Tamanho. O que é considerado pequeno? Vamos ter algum tipo de cor de fundo para a primeira página. Então, basta adicionar um retângulo clicar com o botão direito do mouse e enviá-lo para trás. Depois. Vamos selecionar a paleta de cores azul. No entanto, como você pode ver, nosso logotipo desaparece. Então você está ligado, verifique se você está com saturação de matiz, brilho e altere isso para algo em torno de 50%. Que também podemos ver nosso logotipo e que parece muito melhor. Também seria uma boa ideia delinear o estilo da topografia. Você vai se ater a esse design de wireframes. Então, isso é criar um retângulo e colocar um texto. Há duas fontes que eu escolhi para este wireframe Poppins e a cabine. Quer, você pode escolher o que quiser ter certeza. E nada mais. Deixe-me ampliar isso. Vou mudá-lo de Enter para Poppins. Segunda fonte. Vou mudar isso para cabine. E tenha um pouco de espaço no meio. Para o cabeçalho. Na maioria das vezes, terei uma fonte Poppins. Também para nossos elementos da barra de navegação. Certifique-se de ensinar a separar o estilo definido apenas clicando no estilo de separação ao lado do texto. Para todos eles. Depois de se desconectar, basta alterar a fonte para abre. Agora vamos mudar a fonte na balança primária, a partir da inserção de dois carbonos. mesmo vale para o que está aqui. E também o texto, o texto do parágrafo. Vamos mudar as cores dos botões primários. Ao separar a cor daqui e selecionar laranja, prefiro ter mais laranja do que seja facilmente visível. O mesmo vale para este botão principal na parte superior. Você toca nas instâncias. E a única coisa que resta, tudo bem, agora é a imagem da página inicial. Para a imagem, visitei um site chamado andro. Antes de entrarmos em 100, vamos ver o que as outras startups do moodboard têm. Todos eles têm algum tipo de ilustração. Portanto, este site parece ser uma boa opção. Às vezes, manter as coisas simples é o melhor caminho a percorrer. Vamos digitar tecnologia. E o primeiro parece bom. Em vez disso, sinta-se à vontade para selecionar qualquer pessoa que você queira selecionar. Certifique-se de baixá-lo. Deveria mentir e excluí-lo. Depois de recuar e tentar mover a grade de layout. Como você pode ver, isso é uma bagunça porque nosso histórico é preenchido e não parece muito bom. Então, o que podemos fazer é visitar um site chamado Remove Background ou simplesmente Remover BG. Basta fazer o upload dessa imagem. A partir daqui. Podemos simplesmente baixá-lo e voltar ao nosso Figma. Mova isso e coloque isso de volta. Parece muito melhor do que o que estávamos vendo anteriormente. Só para que você tenha uma ideia. Isso é o que parecia anteriormente. Parece muito melhor. 25. Design sobre nós: Na seção Sobre nós, tudo é muito parecido com o que fizemos em nossa página inicial. No entanto, que estamos no caminho certo. Vamos ver o que a outra startup começa a fazer a partir do nosso quadro de humor. E, como você pode ver, muitas dessas startups têm. Em seguida, Scholar na página inicial e, em seguida, as páginas seguintes são apenas cores brancas simples. Então, vamos ficar com esse fundo branco. Ou vamos ver se podemos encontrar um plano de fundo melhor. Selecione um retângulo, certifique-se de enviá-lo para trás. E a partir daqui, vamos tentar reduzir isso para 50%. Sim. Parece melhor do que apenas ter um fundo branco liso, na minha opinião, mais do que listas de experimentadores de 30% para ver a diferença e certamente olha um pouco para baixo. Então isso era 40 ou 50, também deveria estar bem. Mas, em quarto lugar, parece bom até agora. Para o título principal, como fizemos na seção anterior que examinamos, é a fonte Poppins. Faça isso, certifique-se de separar da instância, digitar Poppins ou sobre nós e o parágrafo. Vamos usar a fonte de carbono. Separe a instância em que eles são mais IID, pop e tudo o que nos resta agora é ter uma imagem. Se formos ao nosso quadro de humor, podemos ver muitas imagens, muitas ilustrações sendo exibidas. Então, vamos voltar para Andrew. Aqui, queremos dizer que somos uma startup educacional. Então eu digito educação. 12 estão muito certos, parece bom para mim. Portanto, certifique-se de baixar e remover esse espaço reservado para imagens. Mas esquecemos de fazer algo, que é remover o fundo. Portanto, certifique-se de fazer o upload e baixá-lo em segundo plano gratuitamente. E isso parece muito melhor. Amplie o tamanho. Sim, isso é tudo para a seção Sobre nós. 26. Design de plano de preços: Para nossa seção de preços da página de destino, deixaremos o plano de fundo como está, esse fundo branco. As coisas principais serão exatamente esse ponto. Começaremos com o cabeçalho. Você pode ver que há um ponto associado a ele. Você pode simplesmente se separar. Eles estão sempre aparecendo. Os planos de preços parecem estar separados do carbono. Para esses cabeçalhos. Para nossos diferentes modelos de preços, podemos abrir os valores dos preços. Vamos para a cabine dele. E também pelos diferentes recursos que oferecemos. E também para os botões. Acontece. Então, sim, isso é tudo para o plano de preços. 27. Design Contacte-nos: Então, agora vamos direto para o Fale conosco, o blog e o rodapé. E pelo quadro de humor para o qual nos inspiramos, podemos ver que há algum tipo de plano de fundo. Vamos mudar o fundo de cinza para outra coisa. Desta vez, talvez optemos por um azul mais escuro. E vamos diminuir a porcentagem 100-80. Esse texto está quase invisível, então separe a instância cinza e coloque-a em preto. Em vez de normal. Vá para o estilo light ou o ponto Fale conosco, onde vamos separá-lo da instância e usar a fonte Poppins. Vamos ficar com cabines para o parágrafo e Poppins para o nome, e-mail e o resto. E em vez do fundo preto, vamos destacá-lo e substituí-lo pelo laranja escuro que tínhamos anteriormente. O Fale Conosco parece muito próximo da borda para que possamos movê-lo um pouco para baixo. E isso parece muito melhor. Embora a seção Fale conosco pareça melhor do que a que tínhamos inicialmente, isso pode ser aprimorado ainda mais alterando o preenchimento do plano de fundo. Então, basta pressionar o preenchimento e, abaixo, em vez de sólido, pressionar linear. E, na minha opinião, isso parece muito melhor do que o que tínhamos inicialmente. Parece muito mais limpo e se integra bem na próxima página. 28. Design de blogs: Para a seção do blog, adicione uma cor de fundo. Primeiro, começaremos ajustando a fonte. Eu vou com a cabine, seguida pelo bombeamento. Ou o cabeçalho. Cabines para o parágrafo. Abre para isso. Títulos. Acontece para o parágrafo. Abertura para o nome do autor, cabine para a data. Se você notar. O nome Matthew está muito mais próximo do que os jogos de nomes, mostra que há alguma inconsistência. Então, podemos ajustar isso destacando tudo e puxando para a direita. Ou podemos até mesmo adicionar grades de layout e fazer uma estimativa rápida do espaçamento. Isso parece melhor. Quanto à imagem. Embora possamos visitar sites como pixels que fornecem imagens de banco de imagens gratuitas. Estamos falando sobre dicas para estudantes. E, felizmente, existe uma imagem de banco de dados que diz etapas. Use isso a nosso favor. Não precisa necessariamente ser a mesma coisa que as palavras, mas quanto mais próximas, melhor. Vamos tentar colocar a imagem. Não funcionou. Então, basta ativar as grades de layout. Então, podemos ver que ele se estende dessa grade de layout até aqui. E podemos ter esse quadro de referência rápido de ativos em nossas mentes. E posicione a imagem que, embora pareça muito grande, apenas a torne menor. O que podemos fazer é ver o tamanho da imagem ao lado de 367 por 28. Então, podemos fazer isso pressionando 367 e ajustando a altura de dois a 80. E alinhando isso com a outra imagem. Onde você pode fazer o mesmo com os dois. Por enquanto, vou baixar essa imagem. Parece muito bom. E podemos minimizar a imagem em vamos ver o que era 367 por 28. Então, vamos fazer 367 por 80. Desconecte isso porque está causando alguns problemas. Sim. Vamos nos certificar de que está alinhado. Pois a ciência da computação vai ser bastante fácil. Você acabou de digitar o código. A primeira imagem parece boa. E minimize a desconexão para que não cause nenhum problema e minimize-a. Alinha a polícia. Em seguida, certifique-se de que esteja alinhado. E isso parece bom. Desative as grades de layout. E está faltando alguma coisa. O espaçamento não é uniforme , então vamos voltar atrás. Isso deveria acontecer. Como você pode ver, ambas as imagens são de 6367 por 280. No entanto, o primeiro não é. Portanto, certifique-se de separar isso porque isso é o que está causando o problema, as proporções restritas. Depois de remover isso, retransmita que o espaçamento é igual. E a única coisa que resta é sua pintura, alguma imagem de perfil. E podemos fazer isso apenas tirando algumas fotos na cabeça. E também é a mesma coordenada do raio coronário ou a coordenada do raio coronário. Então, se escolhermos 38,4, seria a coisa exata. Você pode simplesmente colocá-lo em cima dele. Podemos fazer o mesmo com a próxima imagem. Remova isso e apenas coloque aquilo. E faça o mesmo com o próximo. Remova a grade de layout. Sim, a seção do blog parece ótima. 29. Design de rodapé: Onde está a seção de rodapé, começaremos primeiro obtendo nosso logotipo de cima para baixo. Pressione a tecla Alt e arraste para baixo. Mova o logotipo. Em seguida, ajustaremos a fonte. Os cabeçalhos. Aberto. O e-mail Can Company faz todo o resto para recebê-lo. Por fim, ficamos com o plano de fundo e vamos ver qual cor combinaria perfeitamente. Então, retire o preenchimento. Nós escolhemos azul escuro. Como você pode ver, você não conseguirá ver nosso logotipo. Voltamos ao nosso quadro de humor. Normalmente, os rodapés têm uma cor sólida. Vamos tentar porque a cor laranja, deixe-me tentar brincar com as porcentagens para ver melhorar. Em 60%. Parece muito melhor do que o que eu vi 100%