Domine os fundamentos da interface do usuário no Figma: Figma para iniciantes

1. Introdução: Você está procurando aprimorar suas habilidades de web design e criar visualmente atraentes e web visualmente atraentes e fáceis de usar? Não procure mais. Juntos, mergulharemos no mundo do design de interface do usuário usando a poderosa ferramenta Figma Nesta aula, apresentarei fundamentos do design de interface do usuário para páginas da web partir das terminologias básicas da web e compreensão de um layout estruturado para seu grande Usando o Figma, uma ferramenta de design popular. Usado por muitos profissionais que trabalham em todo o mundo, seja Google, Facebook, Microsoft ou Apple. Os grandes peixes do setor de experiência do usuário, aprenderemos sobre essa ferramenta, suas grades de layout, usa prototipagem e Bem-vindo ao Mastering UI Design com Figma, o guia estratégico completo Perfeito para você, se você estiver interessado em levar suas habilidades de design de interface do usuário para o próximo nível. Se você é novo na UI UX e está procurando um caminho e estratégias corretos para trabalhar, ou se você apenas um intruso criativo e quer aprender algo novo, que não é apenas criativo, mas também ajuda você a superar seus conjuntos de habilidades ou a criar Não procure mais. O curso de design de interface do usuário na Figma está aqui para ajudá-lo a desbloquear todo o seu potencial e criar designs deslumbrantes que não apenas impressionarão seus clientes e usuários Mas também será o design da experiência do usuário para resolver problemas da vida real . Em nosso curso de design de interface do usuário, você aprenderá tudo o que precisa saber ou criar, não apenas as excelentes, mas também as interfaces de usuário funcionais. Desde a compreensão, os princípios de design, as estruturas de arame até o domínio das ferramentas e recursos do Figma e, finalmente, o design da página da web, temos tudo o que você Aqui está uma rápida prévia do que você espera aprender conosco: entendendo os fundamentos da linguagem de design de sites, o conceito básico de um bom design de interface de usuário, criando uma identidade visual forte para seu grande projeto, navegando pela interface Figma e criando um logotipo do Font como um exercício de aquecimento, familiarizando-se com os conceitos de enquadramento de arame e desenhando criando uma identidade visual forte para seu grande projeto, navegando pela interface Figma e criando um logotipo do Font como um exercício de aquecimento, um para você mesmo, usando o photoshop como ferramenta de design e criando uma página web completa no Figma, familiarizando-se com os fundamentos da prototipagem e exportando seus ativos para uso posterior, e não apenas trabalhando nessas estratégias e nessas estratégias Fornecerei uma lista de verificação para manter organizado o fluxo de trabalho do projeto para a turma Você pode encontrar facilmente essa lista de verificação na guia Projeto e Recursos da turma e fazer o download de uma para você mesmo Ao longo do curso, você terá acesso a muitas entradas de design e o guiará pelas diferentes estratégias que ajudarão você a criar um design impressionante com facilidade Desde a compreensão das paletas de cores até a criação de opções de tipografia Vou lhe fornecer todo o guia de design. No final da aula, juntos, criamos uma página da web impressionante e interativa derivada de nosso estudo de caso, improvisando a experiência do usuário e o fluxo de trabalho de design Vou orientá-lo na etapa do processo de design, oferecendo o resumo da viagem, além de como você o ajudará não apenas a dominar o Figma como ferramenta de design, mas também a entender bem a linguagem de web design e a criar designs que se destaquem da multidão e sejam seus , que você também pode apresentar em seu portfólio Ao final do curso, você terá uma página da web funcional projetada por você mesmo que mostra suas novas habilidades e conhecimentos em design de interface Vamos começar. Não perca esta oportunidade aprimorar suas habilidades de designer comigo nesta aula 2. Nosso estudo de caso: Para esta aula, vou exemplo real de um site greensp, por meio do qual, juntos, aprenderemos rapidamente sobre terminologias básicas e também descobriremos as brechas ou pontos fracos em que trabalhar como designer para melhorar a interação do cliente com o design do site, e renunciaremos a isso mais tarde na interação do cliente com o design do site, e renunciaremos Vamos começar. A primeira semana na tela que você pode ver é a imagem do herói ou o banner do herói com algum texto, e há uma chamada à ação, ou podemos dizer um botão de CTA nela Eles estão usando imagens realmente armazenadas em cache que, pessoalmente, considero uma boa combinação para seu nome e marca. No lado acima, aqui, você pode ver os diferentes botões. Estes são apenas o painel de navegação, ou você pode dizer menu do site, oferecendo navegação rápida e fácil para as outras páginas da web. Na extrema esquerda, está aqui, o logotipo, qual pude descobrir que mais improvisamos para aprimorá-lo melhor No lado direito, temos uma barra de login para os membros. É um botão de login aqui. À medida que rolamos para baixo, temos algumas informações sobre como a entrega funciona, que eles apresentaram usando alguns ícones. seguir, há um cartão de menu e um CTA para abrir o menu completo em detalhes Por fim, eles usaram novamente um banner para destacar a oferta e os valores Mas é difícil se concentrar nas frases cativantes e são valores muito importantes Mas eles estão desaparecendo um pouco e, finalmente, o site está terminando com a pasta básica com links de navegação para as páginas importantes do Com esse conhecimento básico do site, mesmo se você for iniciante, pode ser difícil se lembrar de tudo de uma vez, ou você pode simplesmente manter esta lição à mão para consultá-la a qualquer momento Então, vamos começar e dar um passo adiante, onde você pode simplesmente usar este site como um estudo de caso e começar a aprender a análise de design por meio dele. Vamos analisar o site do ponto de vista do design, e você pode simplesmente anotar seus pontos em um papel ou consultá-los a qualquer momento do processo, ou simplesmente criar um slide, como eu fiz aqui Descobri que o fluxo de trabalho deles estava por trás dos ícones, e os ícones são muito simples e muito planos, criando um grande espaço para os olhos dos visitantes. Precisamos trabalhar com eles e reformulá-los. Então, a próxima na fila é a receita, qual eu gosto muito das fotos, mas ainda assim, como designer, acho que ela é equivocada com algum apelo visual como marca Na última seção, os valores, slogans e ofertas do rand são ótimos, mas escritos de forma um pouco errada, o que nos faz focar neles O que estamos descobrindo são as brechas em nosso estudo de caso que precisamos improvisar boas ofertas escritas de forma um pouco desbotada, boa apresentação estática e simples demais para E as entradas de design que precisam ser aprimoradas para avaliar o alcance e crescimento do site como designer ou a experiência do usuário ao visitar seu site Defina a cor da marca na qual precisamos focar, melhorando a tipografia, destacando o logotipo, um layout mais Aqui está minha ideia particular. Você mistura esses dois banners e destaca sua oferta de uma maneira melhor como imagem de herói Semelhante à minha, você pode escrever suas próprias ideias, como planeja, sua página e vamos passar para a próxima lição. Você está recebendo alguma inspiração para o nosso projeto. 3. Inspire-se: Para isso, estou agora na minha conta do Pinterest, onde você pode simplesmente pesquisar a inspiração do site ou especificar sua ferramenta, como fiz aqui para a FIMMA, ou você pode pesquisar com seu nicho específico, pois estamos criando um site de alimentos, que você possa buscar inspiração para um site de culinária É muito grande e fácil se perder no oceano desses pinos Eu recomendo que você defina um intervalo de tempo para si mesmo, digamos, 15 minutos quando necessário resolva as coisas e encontre uma imagem realmente ambiciosa e relativa que possa ser útil para seu projeto atual Aqui tenho mais algumas estampas inspiradoras que já fixei separadamente para nosso projeto com um nome ousado Você pode fazer isso da mesma forma ou simplesmente salvar essas imagens em seu dispositivo, o que você acha útil. Acho este um pouco mais novo e relativo ao que nossa marca, nosso site no nicho, está trabalhando. Essa pequena peça interativa também se conecta ao nosso estojo. Da mesma forma, encontre alguma inspiração para seu projeto e vamos nos encontrar na próxima lição sobre trabalhar com as armações de fogo. 4. Como trabalhar com Wireframes: próxima coisa importante em nossas estratégias é criar uma estrutura de arame para trabalhar. Para isso, você não precisa ser superficial ou supereficiente com nenhum software, nem deve cursar um mestrado em esboços Você só precisa se concentrar nos pontos fracos do cliente, no nosso caso, chef ecológico, e também ficar de olho em como você está resolvendo o design Você pode usar papel e caneta ou uma aba de caneta para esboçar sua ideia Estou usando aqui o photoshop e as ferramentas de forma para esboçar claramente uma ideia à sua frente de maneiras simples O que você pode aprender é como é simples. É criar uma estratégia para seu site com uma estrutura de arame forte e por que ela é totalmente necessária Existe um processo simples para criar um bom wireframe. Aqui, temos uma estrutura ampla e precisamos dividir esse espaço em diferentes seções do nosso site para lidar com ela Use as linhas simples para dividi-las. Agora, estou renomeando cada seção para saber o que vamos mostrar nelas Agora, vamos projetar detalhadamente o que será colocado, onde e como. Você pode simplesmente verificá-lo da forma mais fácil possível. Você pode entender isso. Nada para ser mais específico, como se eu estivesse usando formas simples para endireitar que essas são as que serão colocadas. Então, nas linhas, eu me pareço com o texto aqui E os retângulos se assemelham aos botões. E isso junto compõe meu layout de estrutura de arame para minha seção de heróis da página da web Adicionando mais alguns detalhes para aprimorá-lo Para a seção do menu, quero manter as coisas simples e. Espero que você tenha uma ideia clara como esboçar rapidamente a estrutura de arame por si mesmo E espero que, a essa altura, você também tenha uma estrutura de arame pronta para o seu projeto. Você pode tirar uma foto deste esboço em w frame ou mantê-la em uma tela enquanto projeta sua página da web nas próximas lições 5. Por que preciso de elementos de design: Conduzir nossa próxima estratégia é definir nossos elementos de design. Mas antes de acertar, você deve ter uma boa ideia sobre o que é um bom design e quanto design é necessário para tornar seu projeto digno de nota, ou como projetar demais pode acabar acabando com seu design e seus esforços árduos O design nos ajuda a nos destacar como marca. Ela desenvolve o reconhecimento da nossa marca na mente do cliente. Um bom design cria uma impressão duradoura na mente do visitante e, com o tempo, um bom design leva a ótima experiência do usuário e constrói uma marca forte Mas os pontos necessários a ter em mente ao criar uma marca para seu projeto são A, uma identidade visível, e B seu conteúdo e cópia, que é o que você escreve em seu site ou materiais da web. Na identidade visual, existem cores, fontes, gráficos e temas, que precisam ser coesos e solidários para construir juntos uma marca forte, pois é isso que os visitantes verão primeiro e depois vem seu conteúdo, e depois vem seu conteúdo, como o que você está escrevendo no slogan, nas declarações sobre ofertas, promoções e Mas tudo isso será aprimorado com uma identidade visual melhor e limpa. Vamos entender mais sobre essa identidade visual com alguns exemplos. Primeiro, temos a Sigi como marca. Ele se concentra claramente na cor única em todo o site e no estilo de telefone único. Eles também mantiveram as imagens de sua marca todas flanelas e similares, com bordas curvas e com as mesmas dimensões Eles também mantiveram o botão não nítido, mas com bordas arredondadas, e o primeiro banner de herói que aparece é a compilação de imagens PNG, em formato redondo. O que é, novamente, criar uma experiência perfeita por toda parte Agora, na próxima linha, temos o Zomato. Você pode ver que eles têm uma navegação limpa com cores mínimas no fundo para focar apenas em sua única marca, a cor principal da marca, que na verdade eles usam para funcionar como o botão de CTA do site E nosso terceiro exemplo na linha é o novo menu. Eles exibiam uma longa e boa cor amarela dourada brilhante em seus gráficos, em suas fotos, como nos botões. E depois de alguns minutos, você pode ver que é impressionante depois de passar alguns minutos no site porque eles usam muitos amarelos nas imagens dos Podemos dizer que precisamos equilibrar as boas cores com as quais jogar e manter os olhos dos espectadores mais engajados em nosso layout. Vamos passar para a próxima lição , na qual definiremos nosso design. 6. Escolha fontes e cores: I. Para escolher as cores de uma marca, vou usar o site da Coolers , pois é uma ferramenta de design rápida, fácil de usar, com muitas paletas de design populares Basta clicar na lista Explore a paleta de tendências aqui e abrirá a galeria de paletas, que você pode achar perfeitamente adequada para Como este, que é muito legal para incorporar um projeto relacionado a algo básico, macio ou delicado, ou algo parecido com este, que pode apoiar algo denso, profundo e temático florestal Há muitas que você pode explorar em seu projeto. Os que você gosta, você pode abrir em uma nova guia clicando e escolhendo abrir no gerador. Além disso, você pode pesquisar alguma cor específica ou estilo específico. Coisa, eu pessoalmente acho que esse tema é muito mais relativo ao que eu tinha em mente. Vamos ver nossas opções de cores agora. Veja aqui que isso está no formato do gerador, nossa paleta, e podemos simplesmente obter os códigos de cor x, o que é muito útil porque eles são universais e podem ser usados de várias maneiras com qualquer software com o qual você esteja trabalhando e obtendo as mesmas cores no resultado Nesta paleta, eu gosto especificamente do tom verde e vermelho, mas não do resto das cores que combinam Vamos copiar o código hexadecimal daqui e adicioná-lo à outra paleta para substituir algumas das Simples de fazer, não é? Basta clicar no botão Adicionar e podemos adicionar uma nova cor ao esquema. Novamente, substituiremos essa aqui e você poderá remover as cores indesejadas clicando em um botão cruzado aqui. Você pode copiar os códigos de cores para o seu bloco de notas ou anotá-los. Mas acho muito útil fazer uma captura de tela e salvá-la no dispositivo para que ele mantenha as cores e o código no lugar, e possamos simplesmente colocá-la sempre que trabalharmos com o projeto Agora vamos encontrar rapidamente um bom esquema de fanta para nosso trabalho. Estou usando o Font joy para esse propósito. Basta clicar em gerar e isso gerará uma combinação aleatória de título, legendas e corpo Você pode bloquear qualquer uma das fontes se achar que é perfeita para o seu tema pressionando este botão de registro aqui. Você também pode usar o ícone de configuração ao lado do botão, onde encontrar e pesquisar qualquer estilo ou fonte em particular. Todas essas fontes que Pon ji está usando são as fontes do Google, e o Figma já vem carregado e conectado com todas as fontes do Google com as quais trabalhar Você não precisa pesquisá-los outro lugar e baixá-los para seu uso. Você pode simplesmente manter seus nomes, fazer uma captura de ou anotar o nome das fontes que deseja usar para mantê-las à mão para sua finalidade Como conclusão final desta lição, quero esclarecer alguns pontos nos quais focar ao escolher suas fontes e cores Para cores, seja específico com uma cor principal ou uma cor de destaque para seu tema, duas e três cores neutras para apoiá-lo Isso vai ser ótimo. Ao decidir sobre as fontes, certifique-se de que você pode e é fácil de usar. A maioria tenta trabalhar com duas fontes na mão e no máximo, você pode usar apenas três delas. Além disso, se você precisar de alguma fonte sofisticada, certifique-se de que não seja o corpo do texto ou o cabeçalho 7. Navegação básica Figma: Bem-vindo à Figma. Aqui, vamos nos familiarizar rapidamente com as navegações e ferramentas de f. Esta é a tela inicial, como você pode ver, assim que você abre sua conta Figma e, em cima dela, há um botão de anúncio, que diz apenas adicionar arquivo de design Clique aqui para abrir um novo arquivo. Embora os arquivos anteriores nos quais você já está trabalhando possam ser acessados na tela. Aqui no arquivo de trabalho, temos essa área em branco como área de trabalho. À esquerda está o painel de camadas e, à direita, temos o painel de design. Qualquer coisa que projetarmos, suas propriedades serão editadas a partir daqui. A primeira coisa que você pode ver é o nome do seu arquivo e, com apenas um toque duplo nele, você pode editar o nome de acordo com sua escolha No canto superior esquerdo, você tem as ferramentas para trabalhar e, com o atalho F, você pode abrir uma nova moldura no local O quadro é como uma página ou prancheta com a qual você vai trabalhar Assim que você clica nele, no lado direito, você obtém um painel de design ativado com diferentes tamanhos de molduras com as quais deseja trabalhar. Eles têm muitas opções, desde tamanho móvel , tablet e muito mais. Ao clicar aqui, você obtém a moldura aqui na tela. E no painel de camadas, você obtém o nome do quadro. Você pode renomeá-lo se quiser. Além disso, na ferramenta de forma, você pode escolher qualquer uma delas para desenhar as formas, como se eu estivesse usando um atalho de retângulo, basta criar um retângulo aleatoriamente e segurar tecla de opção do teclado e arrastar a forma para fazer uma Dessa forma, você pode facilmente itens e retorná-los posteriormente. Você também pode usar uma ferramenta de caneta para simplesmente desenhar curvas, canalizar, clicar e segurar, arrastar e Nesse caso, estou usando uma ferramenta de caneta para criar apenas uma forma aleatória. Para experimentar como podemos usar ainda mais. No painel de design, você pode ver que está dizendo que traçado do contorno está lá, mas não há cor de preenchimento Você pode adicionar a cor de preenchimento e escolhê-la usando o conta-gotas ou olho de atalho e remover os traços da forma da mesma forma Você também pode usar as camadas para selecionar seus objetos de trabalho específicos. Com isso, espero que agora você tenha uma boa compreensão das ferramentas básicas da Figma e das nações para trabalhar com elas 8. Logotipo de design na Figma: exercício de aquecimento: Vamos criar um logotipo rápido no Figma para nosso projeto. Por isso, não estou pedindo que você seja designer de logotipo profissional ou contrate alguém assim. Você pode simplesmente usar as fontes para criar uma para sua marca ou projeto trabalhar. Para isso, você pode trabalhar com o Type Tool ou o Tap T no teclado e clicar na tela para começar a digitar No painel de design nas configurações de texto, você pode escolher a fonte com a qual deseja trabalhar , como aqui, estou usando a Sinsel decorativa, uma das fontes de nossa marca para brincar e criar um bom logotipo Você também pode redimensionar o texto, mas para mim, parece bom Também dupliquei o texto e brinquei com a inicial do nome da marca Eu gostaria de agrupar este com Command G ou Control G do teclado Além disso, você pode clicar com o botão direito do mouse e escolher contornar uma faixa para expandir o texto como objetos vetoriais Da mesma forma, vou criar esboços para a marca aqui e agora vou jogar com cada personagem para criar algo interessante com isso Talvez um jogo de letras com E seja bem mais minimalista e interessante ao mesmo tempo para nosso projeto. Você também pode usar cada letra individualmente e espaçá-las de forma mais específica. Para o chef, quero colocá-los na mesma base. Para isso, estou apenas ampliando e com o comando ou Control plus Agora, experimente manualmente para fazê-lo funcionar. Mas se ainda não estiver funcionando, não estiver dando certo, tente selecionar o específico. Clique duas vezes e arraste-o para selecioná-lo nessa área como esta e, em seguida, basta arrastá-lo com as setas Espero que você acerte. Dessa forma, não fizemos apenas um aquecimento com a ferramenta de design Figma, mas também criamos algumas amostras inferiores para nosso projeto criativo Espero que você esteja claro comigo agora. Vamos para a próxima lição para escolher opções. 9. Encontre imagens perfeitas: Quanto às cores e fontes, as imagens com as quais você trabalha também desempenham um papel importante para destacar seu design. Ao trabalhar com clientes reais, você pode fazer uma sessão de fotos da marca deles , ou seja, como designer, talvez você precise apenas de um tc, mas para um projeto individual ou de classe como esse, você precisa encontrar algumas idades reais que estejam livres de direitos autorais para trabalhar Para isso, tenho duas plataformas, free pick e splash Ambos têm o download gratuito e o acesso a muitas imagens de alta qualidade para trabalhar com elas sem direitos autorais. Você pode simplesmente pesquisar qualquer coisa da qual queira uma imagem ou apenas em relação ao nicho que está procurando. Aqui no Free, eu já fiz uma busca rápida pelo prato de comida da Nichelle Como minha chave, gosto de alguns deles. Todos eles são livres de direitos autorais e ser baixados gratuitamente. Isso não é ótimo? Lembre-se também de alguns pontos de verificação ao escolher fotos para o projeto de sua marca Eles devem ter uma iluminação boa e limpa. devem ter um foco nítido no produto que eles estão exibindo Deve ser de alta qualidade e corresponder às cores e cores da sua marca. Na próxima lição juntos, encontraremos ícones realmente interessantes e limpos para o projeto. 10. Como encontrar ícones: Para ícones, eu recomendo que você escolha um ícone de plataforma, onde você pode usar diferentes estilos e temas Você pode pesquisar alguns ícones muito legais que estejam bem definidos e eles. I. Ao usar os ícones, certifique-se de que eles sejam claramente compreensivos, definidos, de alta qualidade e estejam em um único tema de design coercitivo Agora, aqui você pode ver, isso é de outro estilo, e este é de outro. Certifique-se de escolher todos os seus ícones relativamente em um estilo. Uma vez, baixe-os gratuitamente como PNG e adquira-os para nosso projeto. 11. Como criar elementos da web: De volta ao Photoshop, vamos editar um pouco nossas fotografias para criar um design específico Como precisamos dessas imagens em PNG como esta, precisamos editar o plano de fundo da imagem. Vamos começar entrando na tela do photoshop para abri-la em um documento como este Estou trabalhando em tela de 108920 pixels, perfeito para vídeo e página Agora use a ferramenta Magic One da barra, um atalho W para selecionar rapidamente o plano de fundo, e nós o mascararemos Nas configurações superiores, certifique-se de adicionar keep na seleção de complementos e e uma média de 11 por 11. Continue clicando e adicionando à seleção, tudo o que é necessário está selecionado. Agora, a primeira coisa é clicar em Control shift I no teclado para selecionar o assunto agora em foco Agora, no painel de camadas aqui, use essa máscara para o líquen de baixo e o resto da Agora vamos adicionar sombra. Para isso, faça uma seleção rápida em uma nova camada abaixo da imagem E pinte-o de preto. No menu superior, vá até o filtro, escolha bla e depois gastan Defina-o para, digamos, 50 a 60 pixels. K. Agora precisamos exportá-los para arquivos PNG Para isso, verifique se você não tem nada em segundo plano e, em seguida, vá para exportação de arquivo escolha exportar como. Nesta caixa de diálogo aqui, verifique se ele foi escolhido como PNG com as configurações transparentes e onde você precisa salvar, apenas onde você precisa salvá-lo e. Temos nossas imagens prontas para uso. 12. Como criar uma página da Web: Aqui, estamos de volta ao Figma e vamos começar a criar a página da web Eu já arrasto e solto todos os arquivos de design relativos, as cores, que usam as fontes, a estrutura de arame, ícones e imagens. Vamos começar com a primeira moldura do tectop. E você pode simplesmente renomear o quadro, seu projeto de marca ou o nome do seu projeto Podemos simplesmente arrastar e reajustar a página a qualquer momento enquanto trabalhamos conforme Agora vamos começar criando o banner do herói para nossa página da web. Agora, selecione a ferramenta caneta e comece com o elemento gráfico com o qual trabalhar. Simples de usar, basta clicar, segurar e arrastar para fazer a curva Ajuste as cores com o que já escolhemos em nosso esquema de cores. E simplesmente remova a cor do traço. Ragan toca o e no quadro, ajuste-o como opção para encontrar um bom ajuste próximo passo é adicionar texto ao nosso banner Selecione as fontes que já escolhemos. Basta pesquisar sua fonte do Google e ajustar o tamanho da fonte. Continue adicionando outras legendas ao seu ouvido. Descrever mais sobre sua oferta ou o banner. Você pode simplesmente acessar o site original do estudo de caso e ter uma ideia para reescrever esses títulos ou criar novos. Agora use o atalho ou a ferramenta retangular na barra de ferramentas de cima Você pode simplesmente usar isso e criar uma caixa do tamanho de um botão como esta e ajustar o arredondamento dos cantos para torná-la mais circular Adicione texto à forma do botão e agrupe-os para agir também. Agora vamos criar uma barra de navegação para diferentes links de navegação para páginas diferentes. Usaremos uma ferramenta de texto e simplesmente adicionaremos um link de navegação a diferentes guias, que funcionará como o botão para mim Agora, segure tudo e duplique, altere o texto individualmente. E você pode simplesmente repeti-lo para quantos botões, quantos links de navegação precisar no menu. Certifique-se de dividir o espaço uniformemente entre todos os links. Você pode agrupá-los como banner para mantê-los à mão. Agora, arraste ainda mais a moldura para montá-la na nova seção Agora vamos colocar o ícone no lugar e espaçá-los. Vamos adicionar pequenas caixas retangulares atrás de cada ícone como uma caixa de texto Clique com o botão direito do mouse e envie para trás. I. Encontrar mais alguns textos como cabeçalho e detalhes da seção. Então o indivíduo para a caixa individual, para cada ícone, vamos adicionar o título e a descrição do conteúdo individual a ela. Você pode ajustar o formato da caixa de acordo com a quantidade de texto e garantir que todas tenham o mesmo tamanho para que pareça limpa e bem cuidada. Variando o tamanho da fonte para mantê-las legíveis. Eu só esqueci de adicionar mais alguns detalhes ao banner do herói, que são os pequenos botões na lateral para fazê-los rolar. Agora vamos adicionar a terceira seção no lugar. Fazendo uma forma de retângulo e adicionando uma foto na frente dela Eu quero que isso seja cortado dentro da caixa. A fase simples é simplesmente segurar a tecla shift e selecionar os dois quadros. Verifique se na parte superior está a imagem e a forma que você deseja recortar deve estar na parte de trás. Agora, no topo, selecione o ícone da meia-lua e clique nele, e ele simplesmente recorta sua imagem na caixa como a massa Agora, vamos adicionar rapidamente elementos diferentes à seção e adicionar o cabeçalho e a descrição da seção com o texto do botão no lugar. Agora você pode consultar a página da web do seu estudo de caso ou a estrutura de arame que você criou anteriormente a qualquer momento entre o processo para mantê-la à mão e ter algumas ideias sobre o que escrever e como colocá-la Espero que a essa altura, junto com esta lição, você também tenha criado sua página da web pronta para explorar o protótipo na próxima 13. Criação de protótipos: Reserve um momento e dê um tapinha nas costas, pois você percorreu um bom caminho, aprendeu e criou uma boa página da web sozinho Agora é hora de torná-lo um pouco interativo. Aqui, neste canto direito, você tem o botão play para apresentar o quadro de trabalho em um novo t ou também pode optar por visualizá-lo em uma pequena janela pop-up. O primeiro passo até aqui é duplicar o quadro inteiro e mais uma vez Dessa forma, vou colocar a bandeira do herói em cada uma das molduras e vamos trocá-la, substituindo-a e a, conforme necessário. Agora, selecionando o botão de seta, que eu quero que funcione como botão para balançar os banners e ativá-los, precisamos mudá-los para o banner direito Para isso, vamos selecionar o painel do protótipo no lado direito Agora, vamos selecionar o botão. Aqui você pode ver. Estamos no painel do protótipo e, assim que seleciono meu design dentro da moldura, ele aparece nos quatro lados Você pode arrastar de qualquer ponto e alternar para o próximo quadro. Assim. Aqui, assim que trocamos, uma caixa de diálogo é aberta. Nessa caixa de diálogo, adicione as configurações e, aqui, certifique-se de que todas as configurações seu quadro também sejam as mesmas que estão sendo mostradas em mente. Da mesma forma, mude para outro banner. Adicione o último para dar um passo para trás e para o primeiro. Isso cria um efeito deslizante em loop. Agora, vamos dar uma prévia e ver com que clareza os botões estão apenas realizando ações Adicionando o restante do efeito deslizante certifique-se de que seja um loop completo Cada botão é alternado para o banner direito. Agora, o próximo passo é dar um efeito completo aos botões. Sim. Para isso, selecione rapidamente um dos botões, mantenha pressionada a tecla alt e arraste-a fora do quadro, clique com o botão direito do mouse e escolha a seleção do quadro. Vamos mudar rapidamente o estilo do botão. Ative alterando a cor redonda do botão. Para algo mais brilhante. Agora, usando o painel do protótipo, você também pode alterar o estilo do botão conforme sua escolha Eu tenho aqui apenas uma amostra. Agora no protótipo, selecionamos o botão de arrastar e trocamos para criar o novo botão. Nas configurações, Nas configurações, vamos alterá-lo de um clique para a opção de passar o mouse selvagem aqui e alterar a navegação para abrir a sobreposição Nas configurações, vamos mudar para Manual. Agora, novamente, faça uma prévia e você poderá ver com que elegância os efeitos estão funcionando Enquanto passamos o mouse, obtemos nosso resultado. Espero que você tenha tido a ideia de adicionar efeito de foco e trocar banners de heróis com controle deslizante à sua página da web e possa criar e adicionar esses efeitos calmantes ainda mais na página da web, onde for necessário o efeito de foco e trocar banners de heróis com controle deslizante à sua página da web e possa criar e adicionar esses efeitos calmantes ainda mais na página da web, onde for necessário ou de acordo com sua escolha. Vamos rapidamente ter uma prévia da página da web que criamos juntos. Agora, na próxima lição, falaremos sobre o uso final posterior e algumas conclusões importantes das aulas da classe 14. Saídas finais: Parabéns. Você criou uma página da web inteira sozinho, com todos os elementos-chave de design e uma interação silenciosa com a qual trabalhar. Espero que você tenha achado esta aula útil e, se sim, será muito gentil de sua parte compartilhar sua experiência na seção de revisão para me ajudar a oferecer aulas interativas e esclarecedoras para você sua parte compartilhar sua experiência na seção de revisão para me ajudar a oferecer aulas interativas e esclarecedoras para Além disso, estou esperando ansiosamente para ver seus projetos no projétil, onde você pode simplesmente exportar seu arquivo do Figma desta forma e enviá-lo aqui ou você pode simplesmente fazer o upload de qualquer captura de tela do processo se estiver enfrentando algum problema ou qualquer problema Se você achar essa aula útil, compartilhe-a também com seus amigos, que a acham útil, aprendem e tiram proveito dela. Nos encontraremos na próxima aula.