Adobe XD Web App UI/UX: design de um site de portfólio

1. Introdução: Bem-vindo a este curso. Meu nome é ontem, Chelsea, e eu serei o instrutor neste curso. Neste curso, você aprenderá a projetar uma interface de usuário de aplicativo web de portfólio completo, usando o Adobe XD. Você projetará este portfólio da interface do usuário do aplicativo da web. Você, vamos aprender todos os recursos do Adobe XD. Por exemplo, você aprenderá como criar a cor do estilo de caractere do componente de grupo. Ele diz prototipagem, plugins mostrados animados e muitas outras coisas. No final, você aprenderá a exportar seu design e desempenho diferente. Neste curso, você terá um projeto completo do mundo real que você pode adicionar ao seu portfólio e isso o ajudará a conseguir o emprego dos seus sonhos. Este é um aplicativo de portfólio completo que você vai projetar neste curso. Você pode ver que temos uma boa barra de almofada com algum cabeçalho e uma foto aqui. E escreva que temos nossos objetos portadores onde estou mostrando os e-mails do parson e Dan aparecem objetos. Alguns ícones aqui também dez logo acima, temos nossa seção de educação. E você pode ver esse design agradável e compartilhado com as opções de gradiente e caixa de sombra e caixa de lata aqui. E então temos essas seções de projetos. Na seção do projeto, temos agora tigelas de chips. E agora, se eu clicar nesses poucos detestos e ele vai passar para o espaço de detalhes onde temos nossas diferentes cervejas para mostrar nossos detalhes postar informações aqui temos medo, nossa barra de navegação e, em seguida, você pode ver os e-mails e, em seguida, temos essa inflamação. E na parte inferior também temos essa seção de mais projetos. Aqui você pode ver mais alguns projetos em diferentes designs. E na parte inferior temos nosso rodapé. E agora, se eu quisesse voltar para a página inicial, só preciso clicar na página inicial. Isso significa que com a tubulação em nossa aplicação. Então aqui vai você. Você pode ver que agora estamos informados de ritmo. E depois deste projeto seis mostrado, temos outra seção para as habilidades da Kathy. E aqui você pode ver diferentes tipos de design aqui que você vai aprender, deu à cor do estilo. Ele diz gradiente de cor quando você projetará o sexo, então temos outra seção que será a seção de ferramentas. E depois disso, temos essa seção de feedback em nosso portfólio, onde podemos ver algumas informações, alguns comentários em um cartão até Sean. E então temos esse pergaminho opcional, tão doce. Então você pode simplesmente rolá-lo de forma horizontal. Você também vai querer aprender a fazer uma rolagem e como executar diferentes tipos de rolagem. Aqui você pode ver que temos totalmente gentileza ambos. E então temos nossas opções de formulário de contato aqui. Aqui temos um bom formulário de contato ou contato com uma pessoa. E então temos esse fundo, que é o nosso rodapé no aplicativo da web. Então este é o aplicativo completo e que você vai projetar neste curso. E depois de terminar este curso, você terá um projeto completo do mundo real. Portanto, vou encorajá-lo a aproveitar este curso. Vejo você no curso. 2. Criar a placa de arte e design de navegação: Bem-vindo a esta palestra. Nesta parte, vamos começar a trabalhar em nosso projeto Adobe XD. Então, abri meu software Adobe XD. Então, quando você abre o software da Adobe, provavelmente poderá ver esse tipo de interface de usuário. E aqui temos opção para iPhone, que será para o design de interface do usuário de aplicativos móveis. Em seguida, temos a história do Instagram e o tamanho personalizado. Para mim, vou usar esse chicote 19201880 pixel. Como alternativa, você também pode adicionar esse hidrogênio em branco aqui, uma parte superior selecionando esse tamanho personalizado. Vou clicar nessa largura, 1920 e N1 e dois pixels. E isso vai nos dar uma prancheta. Este é o nosso quadro de arte para um design de aplicativo da web. Tudo bem, então teremos que projetar nosso aplicativo aqui. Na barra lateral esquerda, no canto esquerdo temos, deixe-me aumentá-lo. No canto esquerdo, temos todas as ferramentas. Esta é a nossa ferramenta de deslizamento, nossa ferramenta retangular, nossa ferramenta de elipse, ferramenta de linha de ferramentas de polígono, ferramenta de caneta, e esta é a nossa placa de arte. E aqui temos mais dois ícones. Um é para o nosso quadro de arte e outro é para o nosso ativo. Então, se pudermos criar nossa cor, são componentes característicos e tantas coisas? E a parte inferior é para o nosso plug-in. Se você já instalou. Se você ainda não tiver nenhum plugging, vou dizer que usarei esse ícone para o plugin de design. E eles não nos deram um par de ícones que talvez precisássemos usar. Você pode simplesmente instalá-lo. Então, como você pode fazer isso? Se você não sabe, então você pode simplesmente clicar no plugin e, em seguida, você pode clicar em Discover plugin vai lhe dar interface de usuário aqui. E a partir daqui você pode clicar nesta navegação e , em seguida, simplesmente você pode pesquisar o ícone para o design. Então deixe-me mostrar se eu comecei aqui ícone. Assim, podemos pesquisar o ícone deles por design. Então, provavelmente, você poderá ver isso. Nosso plug-in. Nada feito nesta parte não é rápido o suficiente. Há estudos sobre isso não está mostrando nenhuma maneira de mostrar aqui. Vou te mostrar. A partir daqui você pode instalar seu plug-in n na barra lateral direita, temos outra dependência de propriedade. Então, quando selecionamos qualquer uma das ferramentas, podemos personalizá-la para o canto direito. Algo que gostamos. Tudo bem, isso é escuro, eu vou te mostrar. Ele deve aparecer aqui. Acho que por causa da velocidade de intensidade não está aparecendo. Você precisa instalar ícones para design. Vou te mostrar mais tarde. Deixe-me dizer-lhe primeiro. Então, temos aqui, temos nossa ferramenta decente, depois nossa ferramenta de protótipo. Esta é a nossa participação no momento, vamos começar a trabalhar em nosso projeto de portfólio. Então, nesta parte, começaremos a projetar adicionando a barra de navegação. Além de uma replicação, teremos nossa barra de navegação. Então, para adicionar uma barra de navegação, podemos simplesmente pegar metade dessa ferramenta de retângulo e eu vou arrastar, vou soltá-la. Estou indo muito rápido. Você precisa deslizar a ferramenta retângulo. Então você pode arrastar essa coisa dessa maneira. E no canto direito você pode ver a altura e o branco que ele está mostrando aqui e eu vou ajustá-lo a este. Aqui temos o branco, que é 1920, e a altura é 75. A partir daqui, você também pode aumentar a altura. Digamos que eu vou selecionar AT, então ele aumentará a altura. Lágrima vai. Agora podemos adicionar nossa cor de fundo para nossas barras de navegação. Então, para adicionar uma cor de fundo, há uma paleta de cores aqui. Você pode ver o campo por padrão, ele é branco. E se você clicar aqui, poderemos ver uma paleta de cores. A partir daqui, podemos selecionar nossa cor, qualquer cor que quisermos. Alternativamente, você também pode usar seus códigos de cores, então simplesmente você pode copiar seu código de cores de qualquer lugar e então você pode simplesmente colá-lo lá. É assim que vai funcionar aqui, mas para mim, vou selecionar qualquer cor daqui. Talvez. Essa cor. Perfeito. Esta é a nossa cor de navegação. Na navegação, vamos ter algumas coisas. Teremos nossa barra de navegação, item de navegação. Aqui. Teremos alguns textos, talvez portfólio, talvez local. Podemos dizer que você pode apenas dar um nome. Então, para adicionar um texto aqui, preciso ajudar essa ferramenta de texto. Vou clicar nesta ferramenta de texto e posso dizer M branco. E apenas por exemplo, uma vez que você escrever seu texto, você terá que modificá-lo daqui. Você pode ver aqui este é 20 anos o tamanho da fonte do nosso texto. Rápido, deixe-me mudar a cor. Mais uma vez. Precisamos deslizar o texto e podemos mudar a cor daqui. Vamos selecionar para branco. E a partir daqui podemos aumentar o tamanho da fazenda contra o atraso. Aqui está, ele aumentou. E aqui você também pode ter algumas opções. Então isso d, d significa maiúsculas, e isso d, d significa menor que menor e menor. Você pode ajustar dessa maneira. Então, vou pegar este e não precisamos adicionar este. Isso significa que ele vai criar um tamanho um pouco menor. E você pode alterar essa família de fontes de texto aqui. Podemos dizer qualquer cor, qualquer nome de família divertido aqui. Vou escolher este. Agora, aqui vamos ter alguns carrapatos. Então, vou adicionar D aqui. E vamos dizer aqui. Podemos ter aqui. Podemos ter nosso dx, podemos dizer em casa. E precisaremos ter mais alguns itens aqui. Então podemos fazer, posso simplesmente repetir. Posso ajudar essa grade de repetição. Essa aderência estúpida nos dá a opção de duplicar nosso item de dados. Como alternativa, você pode simplesmente selecionar o item e pressionar Comando D, e posso simplesmente adicionar itens aqui. E se eu precisar ter um pouco de espaço entre esses itens, então eu posso simplesmente aumentá-lo, e também posso diminuir esse item aqui. Agora deixe-me desagrupar este. E aqui, depois desta casa, talvez precisemos ter uma opção para esta, podemos dizer, então você pode dizer irrigação. Então eu posso remover um por um. Eu só queria mostrar que como esse grid de repetição funciona. E então outra maneira é que só precisa selecionar o item e pressionar Comando G se você estiver usando um Mac e acho que é Control D duplicá-lo. Então deslizou o item rapidamente e, em seguida, pressione Comando D, e então ele duplicará seu item e, em seguida, você pode arrastá-lo. E você pode ver que a partir daqui você também pode ajustar a distância entre esses dois itens. Você pode ver que é 46 por 46. Para ambos são invertidos e aqui podemos ter projeto de ouro. Temos outra opção. Deixe-me duplicá-lo. Projeto então teremos projeto, então teremos habilidades. Posso dizer que, em vez de East Keys, vou adicionar habilidades. Então teremos, vou duplicar este. E então eu posso adicionar habilidades e, em seguida, teremos a opção de ferramentas aqui. E depois disso, precisaremos ter a condição de anedonia encerrado o item nav, digamos que para o contato entre cada item temos 46. E então posso dizer que o nome é chamado de contato. Aqui vai. Por isso, projetamos nosso item de navegação. Vamos fazer isso um pouco de mudanças aqui. Por exemplo, precisamos ter nosso sublinhado na parte inferior deste item. Significa selecionar o item, selecionar este. Então vamos mostrar essa coisa aqui. Então, vou adicionar abaixo desta linha aqui cuja lá será capaz de sublinhar. E depois de selecionar este daqui, esse tamanho de linha é importante. Então, isso é mais alto aumentando o tamanho. Assim, você pode aumentar a altura da borda óbvia. E então, para mudar a cor, posso simplesmente clicar nessa paleta de cores. E aqui vamos nós. Podemos ver, e se você quiser ter outras opções como dash e gap, mas não precisamos ter essa. Agora, deixe-me executar este. E aqui vai você. Podemos ver nosso projeto, nossos amigos de navegação ficaram assim, mas vamos fazer algumas mudanças. Faremos um pouco de mudanças, mas a coisa é que precisamos, podemos mudar, podemos mudar o tamanho da fonte deste, acho que todos os textos. Então vou selecionar, exceto este N, Y, que é o nosso logotipo. Vamos adicionar um logotipo ou o nome da empresa ou o UNM completo invertido qualquer coisa. Resto do texto? Vou mudá-lo. Vou mudar o tamanho. Vou selecionar controle e, em seguida, selecionar todos esses itens. Depois de selecionar todo esse item, podemos alterar o alvo para 25 talvez. Mais uma vez, agora parece bom ou você pode usar 25. Há tudo para esta parte e continuaremos a partir da próxima palestra. Vejo você na próxima palestra. Tchau. 3. Design de seção de cabeçalho: Bem-vindo de volta mais uma vez. Nesta parte, faremos algumas mudanças na nossa barra de navegação e adicionaremos algumas coisas extras. Então, como podemos fazer com agora, esta é nossa barra de navegação e definimos a altura do nosso AT. Então agora vou aumentar este porque teremos a mesma barra de navegação e a seção do aquecedor aqui. Então, vai ser 500. Deixe-me executar este para que possamos ver exatamente como é preciso dividir, não posso tomar, para que possamos adicionar um pouco mais aqui. Você pode tirar um pouco mais, um pouco mais de espaço aqui. Aqui vamos nós. Agora acho que basta ter e aumentar o tamanho da prancheta, posso simplesmente selecionar a prancheta Clique duas vezes e, a partir daqui, você pode aumentá-la. Após essa quantidade de gráfico, esta linha, teremos a opção de rolar. Ele adicionará automaticamente uma opção de rolagem. Então, deixe-me mostrar que esta é a nossa tela inicial, e agora podemos ver a opção de rolagem aqui. Não há problema algum. Agora temos essa opção. Posso ver que temos algumas opções aqui. Então note este que eu estava pensando em beber, para selecionar este somente depois de selecionar este. Agora você pode ter, você terá isso. Você pode ver esse ponto aqui, anote e faça clique duas vezes aqui. Depois de desejar clicar duas vezes aqui, você terá uma opção para adicionar este ponto, que é um tipo de ferramenta de caminho. Então, vou selecionar nele. Portanto, se você clicar duas vezes novamente após selecionar, você terá outro ponto de dois pontos onde você pode. Me avise. Se você clicar duas vezes nele. Ele não está chegando. Deixe-me selecioná-lo novamente. Este é o nosso pote e se clicarmos duas vezes aqui, teremos esse tipo de opções para Jackie fazer, fazer alterações. Podemos fazer essa coisa. Podemos adicionar esse tipo de opção de design aqui porque vou desfazê-la. E então vou selecionar este de novo. E a partir daqui podemos adicionar esse tipo de problema de design. Você pode ver que podemos simplesmente arrastar este e podemos ter essa opção aqui. Mas não precisamos ter esses dois, mas ao mesmo tempo só precisamos ter uma opção aqui. Portanto, vou desmarcar tudo. E então este é o novo. E clique duas vezes e clique neste, clique duas vezes aqui. E então, a partir daqui, posso simplesmente adicionar esse tipo de design. Você pode ver que isso é o que eu queria ter. Você precisa selecionar uma vez e , em seguida, clicar duas vezes no ponto, então esses dois pontos aparecerão. Então você pode simplesmente arrastá-lo e fazer alterações dele, seja deste lado ou deste lado. Você tem muitas opções para fazer isso. É sua escolha selecioná-lo. Acho que é perfeito. Ou podemos adicionar um pouco disso. Perfeito. Agora, eu executo, agora parece muito bom. Podemos adicionar um pouco mais de mudanças aqui. Então, vou adicionar um gradiente aqui. As cores para selecionar a cor novamente, já temos essa cor aqui. E então uma coisa que você pode fazer aqui, se você precisar usar a mesma cor de novo e de novo, então há duas maneiras de simplesmente clicar nela, e essa cor aparecerá aqui. Ou, alternativamente, você pode criar nossos componentes de cores. Então, como fazer um componente de cores? Então clique nisso agora ele está selecionado. Agora, se eu clicar com o botão direito do mouse, teremos essa opção que você pode ver em cor para ativo. Então, vamos adicionar essa cor à nossa pasta de ativos. E aqui vai você, esta é a nossa cor. E temos essas duas opções porque temos esse padrão. A fronteira que está acontecendo. Vou desmarcar este deste, não há mais do que agora que há um motivo para ele ter sido selecionado, mas não é um grande problema aqui. Então, dessa forma, você pode simplesmente fazê-lo. Agora, vou acrescentar, vou ter nosso ciclo aqui onde vamos adicionar uma foto de perfil. Talvez se você for um desenvolvedor, você adoraria adicionar sua foto de perfil aqui. Para fazer isso, podemos simplesmente adicionar o círculo aqui. Clique nesta ferramenta de elipse e faça ciclos. Como fazer com que ele circule? Como você pode ter certeza se não é Sokoloff? A maneira mais fácil é que você precisa definir a mesma altura e branco. Você pode ver por que os dois W4 e o mais difícil 337, isso significa que não é corretamente círculo. Vou mudá-lo para TI W4. Agora tem o mesmo tamanho, altura e branco agora. Está circulado. Agora, posso simplesmente adicionar os e-mails aqui. Então eu baixei algumas imagens aqui para que você possa adicionar qualquer imagem. Então acabei de baixar nosso EMS. Vou adicionar essas imagens aqui. Erica, temos nessas imagens aqui. Se você quiser, você pode simplesmente adicionar uma borda aqui. Já temos água se você não precisar, podemos removê-la. E então, se eu deslizar essa borda e você poderá alterar a altura, alterar o tamanho da borda e, em seguida, mudar a cor. Este, mude a cor dessa borda para branco para que possamos ver, agora parece muito bom e posso aumentar um pouco mais de tamanho. Você pode dizer talvez cinco, talvez mais do que isso. Sete. Parece bom. Agora, se eu executá-lo, podemos ver essas coisas aqui. Podemos ver essas coisas aqui. Perfeito. Estou apenas adicionando uma imagem. Apenas por exemplo, se você quiser, você pode alterar qualquer e-mail. Deixe-me verificar se tenho outras imagens. Não, não tenho outra imagem até agora. Vou manter isso aqui por enquanto. E vamos mudá-lo mais tarde, se for necessário. Acho que está tudo bem. Não há problema algum. E agora aqui, teremos que adicionar o nome. Podemos adicionar o nome e um pouco de uma descrição. Então, vou clicar nesta ferramenta de texto e posso adicionar, podemos dizer que o nome é, posso adicionar. O que posso adicionar? Posso adicionar qualquer nome. Posso dizer John Doe, só por exemplo. Aqui, posso definir novamente. Primeiro, deixe-me alterar o tamanho do tick desse texto. Então isso é em vez de 25, vou selecionar a festa cinco. Mais do que isso, talvez 45. E aqui podemos adicionar um pouco de defesa do tamanho da fazenda aqui. Deixe-me tentar alguma coisa. Portanto, há muitos tamanhos dos dados, várias fontes, nome da família, você pode escolher qualquer um desses. Podemos adicionar. Podemos adicionar este e, depois disso, precisaremos ter outro texto. Aqui. Podemos aumentar este, e aqui podemos adicionar. E aqui, podemos adicionar nosso pouco de informação, talvez o parson, talvez o parson, recebendo este site de portfólio sobre seu profissional, você pode dizer UI, designers UX. Então talvez ele tenha mais de uma profissão. Então podemos dizer, desculpe, precisamos adicionar capital menos estoque. Estado. Para esse tamanho de fonte, posso adicionar tamanho menor, talvez 35. Agora deixe-me executá-lo. John Doe, UX, designer de UX e estoque menos. Podemos simplesmente, precisamos selecionar este 1 primeiro. Podemos ajustá-lo aqui um pouco mais perto de John Doe, o nome. E em vez desse Cat5, acho que posso fazê-lo 25, então ficará mais melhor. Desta forma. Aqui vamos nós. Por aqui, podemos ter novamente, um pouco de design aqui. E como podemos adicionar um pouco de design aqui? Então, vou clicar nisso. Vou acrescentar, vou pegar metade dessas ferramentas Ellipse. Clique nessas ferramentas de elipse, então eu posso simplesmente desenhar alguns circuitos. Digamos que 15 por 15 altura e y seja 1515. E como parece, parece bom. Agora posso mudar a cor, mudar a cor para isso. Aqui vamos nós. Temos essa opção. Então, podemos simplesmente minimizar o espaço entre esses dois e fazer duplicados. Podemos fazer essa equipe. Agora, se eu clicar do lado de fora, então temos este 12. Ok, então agora podemos fazer mais uma coisa aqui. Em primeiro lugar, precisamos desagrupar este. Então eu vou pressionar o Comando D para fazer com que ele se agrupe. Para fazê-lo crescer. Acabamos de ligar tudo e então você pode pressionar Command G. Agora deve estar aqui, podemos ver que este é o grupo e, em vez disso, este grupo, temos o salão e podemos mudar o nome. Podemos dizer elipse de design. Dentro disso, temos isso. Temos todas essas elipse. Você pode ver que temos esse valor, esse número de um. E se você quiser uma deficiência, você pode fazer isso clicando em. Você pode ver que você pode bloquear este clicando neste botão de registro. Então ele não vai remover em nenhum lugar. Vai ficar aqui. Sinto muito, não tem este. Preciso pressionar Command Z porque o anônimo, ok. Se você bloqueá-lo, então ele não vai cair. Você não poderá removê-lo. Você não será capaz de movê-lo daqui. Vou desbloqueá-lo aqui. E então, se você quiser usá-lo um pouco mais simples, você pode clicar neste. E este item está desativado nulo. Portanto, não podemos desfazer, você pode adicioná-lo este, então você tem este aqui. Vou fazer dessa forma. E então eu posso correr aqui. Ou talvez aqui. Temos essa opção aqui. Tudo bem, agora temos esse design. Agora, se eu executá-lo, acho que parece muito bom. Não há problema algum. Está tudo bem aqui. E deixe-me adicionar um pouco de sombra. Então, se eu clicar nesta elipse e aqui temos uma opção para adicionar, para adicionar essa sombra porque, para esta ela não está adicionando. Desculpe, precisamos selecionar, só precisamos selecionar essa elipse. Aqui. Podemos acrescentar, desculpe, por isso. Para cada item, podemos adicionar uma sombra aqui. Eu acho que não é necessário adicionar sombra aqui porque eles não queriam ser visíveis aqui porque o tamanho é muito pequeno e adicionamos tantas ferramentas de elipse. Vou removê-lo aqui. Então, o que quer que tenhamos, está tudo bem. E isso é por essa parte. E na próxima parte começaremos a trabalhar para nossa próxima parte que aparecerá aqui. Então, vejo você na próxima palestra. Adeus. 4. Design de objetos de carreira: Bem-vindo de volta mais uma vez. Nesta parte, começaremos a adicionar nossa seção de objetos de carreira em nosso projeto. Mas antes disso, eu só queria fazer isso um pouco de mudanças. Então eu quero mudar a EM. Então, em vez do semestre, vou adicionar imagens diretamente diferentes aqui. Você pode simplesmente remover o anterior e depois adicionar este ou simplesmente arrastá-lo aqui. É apenas um emus normal. Nada novidade. Eu só queria arriscar. Agora parece que este é o EMS. Está tudo bem aqui. Então, espero que não seja difícil para você. O que eu fiz, eu simplesmente arrasto uma nova falta neste círculo. Alternativamente, você pode simplesmente excluir a coisa toda, toda essa imagem. Então você pode adicioná-lo. Ele vai substituir dessa maneira. E temos a altura e assistimos mesmo exatamente a mesma coisa. Agora, se olharmos para essa cor de fundo da prancheta, ela parece muito branca. Então eu queria ter uma cor um pouco diferente. Vou mudar isso para a cor do tipo de nota. Talvez nessa cor. Você pode adicionar sua própria cor de grade. E agora, se o executarmos, então eu posso ver essa cor. Agora parece muito bom, sem problema algum. Agora, outra coisa é que eu preciso selecionar esse quadro de arte rapidamente, e então temos essa opção de layout aqui. Precisamos clicar nele. Se clicarmos nele, então poderemos ver esses tipos de mundo dele é que temos esta coluna e temos este sistema RO aqui. Você pode ver que este sistema de layout de disco nos ajudará a adicionar nosso item para que possamos ter a mesma altura e largura de ambos os lados. Você pode ver que temos a coluna número 12. Se você quiser, você pode simplesmente alterá-lo para 15. A escolha é sua. Você também pode fazer o branco e se esconder na calha e coluna larga, altura da coluna e tantas coisas que você pode simplesmente usá-lo. Foram 12, vou mantê-lo com 12. E agora, a partir daqui, podemos simplesmente ajustar este para que faremos nossa aplicação deste para este. Seja qual for o item que vamos criar, começaremos daqui para aqui, que podemos ter a mesma distância desta esquerda no lado esquerdo e do lado direito. Também nos ajudará a projetar nosso item. Deixe-me mostrar agora que precisamos adicionar nosso objeto de carreira adequadamente ou objetar. Podemos jejuar. Vou adicionar uma imagem aqui para fazê-lo, vou selecionar essa coisa daqui, e talvez daqui dessas quatro colunas, e depois fazer esse valor. Agora, posso adicionar essas imagens aqui. Estes são os semi-mitos que temos aqui. Aqui, chegaremos a um pouco de espaço e, a partir daqui, adicionaremos nossa seção de objetos portadores. Então, vou pegar metade dessa ferramenta retangular novamente. E a partir daqui você pode ver que isso nos dará muitas opções para adicionar daqui a esta coluna, a esse tamanho. Vou chegar a este. Dessa forma, podemos definir esconderijo e branco sem teto. Estamos vivendo de ambos os lados, do lado esquerdo e do tamanho grande. Portanto, essa é a melhor maneira de fazer, e temos essa opção aqui. Agora vou acaso, ok, então agora a coisa é que agora, se precisarmos ter um pouco de raio de fronteira aqui, então eu posso fazê-lo adicionando este aqui desta forma, um pouco deste. E então podemos adicionar essas sombras. Vou clicar nesta sombra e talvez eu possa adicionar Hardy por 30. Aqui vamos nós. Temos essa sombra, então vamos consertá-la. Deixe-me executá-lo. Como parece agora. Podemos ver que se parece com isso. Outra coisa é que você pode ver do lado direito que temos o mesmo espaço. Deste lado, tínhamos o mesmo espaço se não usássemos o layout e será muito difícil para nós entender. falta de moradia basicamente está saindo dos sem-teto do lado esquerdo, vivendo do lado direito. Há uma razão pela qual estamos usando isso, selecionando esse layout e, em seguida, podemos fazê-lo. Não precisamos ter essa vitalidade tardia dentro de 20 por 20 é suficiente. Agora não precisamos. Agora podemos passar para a opção anterior. Então, vou clicar nele. Vou clicar nele. E então vou desmarcar essa camada. Agora temos essa opção. Quando precisarmos dele novamente, faremos isso. E agora aqui precisamos adicionar, precisamos adicionar nosso texto. Então, aqui rápido, não precisa escrever objeto portador. Vou clicar nele. Posso adicionar aqui. Posso dizer que a coisa é que parece, podemos vê-lo porque a cor é branca aqui. Então, precisamos escrevê-lo para preto. E então acho que podemos me deixar digitar algo aqui. Então eu posso mudar a cor para preto. Precisa mudar a cor para preto. Agora podemos ver, agora aqui precisamos escrever. Em algum lugar aqui, quando você pode escrevê-lo. Objeto Gettier. Então, aqui teremos essas opções de objetos portadores. E acho que posso alterar o tamanho da fonte para 30. E podemos adicionar um pouco de família de fontes diferente. Talvez essas opções ou talvez a melhor. Não sei exatamente o que é melhor, mas podemos suco. Você pode selecionar talvez este , não um grande problema. E outra coisa é que eu removi a fronteira. Não, ainda não removi a água. Então, vou que você precisa adicionar a ferramenta de deslizamento. Portanto, selecione esse objeto portador e, a partir daqui, remova a borda. Não precisamos ter nenhuma prancha aqui. Tudo bem, agora depois disso, podemos adicionar um pouco de texto para editar o texto. Aqui podemos adicionar texto completo de Laura, algum texto fictício de Loren Ipsum. Você pode usar qualquer texto, o que quiser. Mas, para mim, vou usar um texto fictício. Vou copiar esse texto e vou colá-lo aqui. Quando você fizer isso, a primeira coisa é que você precisa selecionar a ferramenta Texto e , em seguida, você precisa selecionar a área de texto de texto. Qual é o texto? Sinto muito, precisamos selecionar isso. O problema é que precisamos olhar para esta área aqui. Podemos selecionar esse pouco, dessa forma. Podemos deslizar essa área de texto nesse tamanho. Em vez disso, teremos que colar esse texto para que ele apareça somente dentro dessa área de texto. E agora definitivamente mudaremos o tamanho da fonte para 20. Certo, vamos fazer isso agora. Acho que é melhor. Vamos corrigi-lo de qualquer maneira, sem problema algum. Agora deixe-me mostrar. Ok, então temos esses objetos de consulta, para que possamos ajudar esse layout novamente para ajustar esse tema. Podemos clicar neste e temos essa opção. Você pode ver que agora podemos fazer uma coisa. Sim, temos este. Perfeito. E no mesmo tamanho desta linha, podemos adicionar nosso objeto portador aqui exatamente dessa maneira. Agora, se eu e nós podemos simplesmente essa coisa aqui. E se eu, Ryan comer, devemos ser capazes de ver nossos cuidados. Você pode ver que agora temos isso leva o estudo do mesmo tamanho, da frente, do mesmo espaço. Temos este aqui. Aqui vamos nós. E agora temos essa nota aqui. Vamos adicionar mais algumas coisas. Agora não precisamos ter essa opção de layout. Vou arrancar essa coisa. Mais uma vez. Vou remover esse layout barrado daqui. Vamos adicionar alguns talões de cheques aqui. Teremos um ícone aqui, então teremos um ícone de texto e texto, isso significa que tipo de objeto de cuidado é usar seu cabelo. Então ele vai escrever um pouco de descrição , então alguma marca de ponto aqui. Então, faremos isso no próximo local. E vou parar esse vídeo aqui. Parece a próxima palestra. Adeus. 5. Design de objetos de carreira e usos do plugin: Bem-vindo de volta mais uma vez. Nesta parte, concluiremos nossa seção de objetos portadores. Para fazer isso, precisamos adicionar nosso círculo aqui. Em seguida, adicionaremos texto, círculo e textos. Como você pode fazer isso por isso? Precisamos ter. Podemos adicionar meio objetos Ditech fast-twitch , ferramentas Ellipse. Você pode ver esta linha aqui a partir daqui, acho que podemos começar. Então eu posso adicionar um círculo aqui. Certifique-se de que o ciclo ainda não tenha enviado talvez 5150. Eu não fiz White. É uma escrita maior, deixe-me executá-lo. É bem maior. Posso às 40 por 40. Então, chance de endurecer branco 40 por 40 aqui. E então teremos, teremos que mudar o estilo, cor de fundo deste. Podemos mudar alguma coisa assim. Obviamente, não precisamos ter nenhuma fronteira aqui. Vermelho. Agora, podemos adicionar nosso ícone aqui. Então, como eu disse que eu instalei este ícone para plugin, você pode simplesmente instalar essa coisa a partir desta opção de plug-in aqui podemos dizer neste galileo indígena não descoberto por causa do aro inicial desta vez, poderemos vê-lo. Você só precisa clicar nesta opção de plug-in e, em seguida, você pode simplesmente navegar aqui, você poderá pesquisar tantos plug-in. Aqui você tem a opção de gerenciar seu plugin. Posso ver que instalei alguns plug-ins para que eu possa encaminhar. Você pode simplesmente instalá-lo aqui. E você também terá outras opções aqui. Agora vou pesquisar. Então você pode dizer que talvez o nome do ícone esteja pronto. Você pode ver se eu clico em concluído, então eu posso ver esse ícone para baixo. Isso está selecionado. E se eu clicar aqui, e ele deveria estar aqui em algum lugar para deslocar e eu vou me desculpar, não deveria estar lá. Ok, então precisamos adicionar este ícone aqui e podemos selecionar esse pouco difícil cortar quando selecionamos um ícone daqui. Porque estou selecionando esse ícone, vou colocá-lo aqui. Agora, se o executarmos, vamos ver o que podemos dizer. Podemos ver que isso parece bom, nada ruim. Certo? Então agora temos este. Podemos simplesmente o que podemos fazer? Podemos criar componentes para que possamos usá-lo de novo e de novo sempre que for parar. Para isso, temos esse ícone e temos essa elipse. Esta elipse para este ícone. E a ilustração é elites descontinuidade C-loops. Então, podemos tê-los muito rápido. Podemos torná-los um grupo. Podemos, podemos nomeá-lo. Podemos nomear que é feito ícone icônico, íntimo e para baixo. Basta colocar um exemplo e então ele é grupo agora. E vamos torná-lo componente. Se precisássemos de uma carta, podemos reutilizá-la. Então clique com o botão direito do mouse e clique em Criar componente E ele deve aparecer. Deve aparecer aqui você pode ver que este é o componente. Se eu quiser, posso simplesmente adicionar este aqui. Então, essa é a beleza dos componentes. Portanto, não precisamos arrastá-lo de lá. Então agora temos que adicionar, precisamos adicionar um texto aqui para que possamos editar o texto aqui. Podemos dizer que tipo de objeto temos. Podemos dizer que podemos simplesmente copiar algum texto aqui deste Loren ipsum assim como um texto fictício. Porque eles não têm ideia do que aqui. Então, obviamente, quando você projeta seu próprio projeto do mundo real, você escreverá seu verdadeiro nosso objeto e precisamos ajustá-lo neste tamanho, 5959. Parece perfeito. Agora deixe-me dizer o contêiner e o ícone para baixo. E agora podemos selecionar esses dois. Em seguida, faça deles um grupo. E podemos ajudar essa criação repetida. E então podemos duplicá-lo mais algumas vezes. K, perfeito. Aqui vamos nós. Agora deixe-me ver como parece. Parece muito bom, mas podemos adicionar um texto diferente aqui. Para fazer isso. Podemos copiar textos diferentes daqui, deste texto e, em seguida, podemos adicionar mais alguns outros textos. A partir daqui. Podemos adicionar esse texto aqui. Eu copiei o mesmo texto, eu acho, porque já usamos este. Deixe-me verificar o diferente. Temos essa opção aqui. Então, no resto da parte, podemos sair dessa maneira. Só precisa selecionar este e podemos colá-lo em uma coisa completa aqui. E nós temos essa coisa. Precisamos mudar mais alguns porque ficará bom se tivermos em nosso texto diferente aqui. Essa coisa e outras duas, podemos simplesmente adicionar essa coisa daqui. Era popular. Podemos selecionar este. Tem mais alguns textos. Vou remover essa coisa aqui. Agora parece muito bom. Está tudo bem até aqui. Portanto, temos essa opção aqui, e esses são nossos objetos portadores. Executamos a mesma altura e largura de ambos os lados. E na próxima parte começaremos a trabalhar em nossa seção de educação. Tudo bem, agora vou parar este vídeo aqui. Continuaremos a partir da próxima palestra. Vejo você na próxima palestra. Adeus. 6. Seção de educação em design: Bem-vindo de volta mais uma vez. Em nossa parte anterior, terminamos nosso objeto de carreira seis mostrado nesta parte, começaremos a trabalhar para adicionar mais uma seção, que será nossa seção de irrigação. Para fazer isso, em primeiro lugar, vou habilitar a visualização de layout. Então, vou selecionar este e, em seguida, clicar nesse layout para que possamos ver essa visualização de layout. Deste lado para este lado. Vou adicionar outra prancheta, outro retângulo aqui. Então clique nesta ferramenta de retângulo. E aqui, acho que aqui posso desenhar nosso novo retângulo, este. Certo? Então, esta coluna para esta coluna, na verdade, precisamos ter um tamanho um pouco maior. Vou clicar na ferramenta Selecionar para que eu possa aumentar isso, essa altura desta prancheta principal. Vou aumentar a altura dessa prancheta média. Aqui vamos nós. Acho que posso aumentar um pouco mais aqui. Tudo bem, então temos essa opção aqui. E podemos, agora também podemos usar para a visão normal. E vamos ver, por enquanto, podemos mover essa visualização de layout. Agora temos esses aqui. Precisamos adicionar borda aqui, digamos adicionar argamassa 20. Então eu vou remover esta água. Não precisamos ter essa fronteira. Então, adicionamos 20 ideias de água, mas não precisamos ter nenhuma fronteira. Se eu clicar aqui, você pode ver o quadro de ideias que usamos para este item é 26. Então, vou adicionar um a seis para este também. Agora precisamos ter uma sombra aqui. Então, vou verificar que tipo de travesseiro de sombra demos para este. E há 20 por 20. Então vou adicioná-lo, 2020. É isso para que ele pareça sim para toda a parte. Tudo bem, até agora parece bom e ainda está, vou adicionar um pouco de altura e, em seguida vou clicar duas vezes para poder pegar, clicar, clicar duas vezes neste ponto para que possamos adicionar um pouco de razão aqui. Posso simplesmente fazer essa coisa assim, ou dessa forma. Vou levá-lo dessa maneira. Quando você clica duas vezes nele, você pode obter esse tipo de chef. Você só precisa fazer um duplo clique. Então essas duas coisas aparecerão aqui e seguida, basta segurar uma e , em seguida, simplesmente arrastá-la. E de acordo com o seu desejo, você pode fazê-lo. E aqui você também pode ver que esse é o hálux vai mudar aqui aqui. O x ao quadrado quando o valor y, você também pode mergulhá-lo, mas é muito mais fácil usá-lo aqui. Aqui precisamos adicionar um título aqui. Então, o título será educação. Então, vou ver novamente a visualização de layout. E então eu posso adicionar o texto, um texto aqui. Posso começar a partir daqui. Eu posso começar a partir daqui. Acho que vai ser o centro aqui. E posso dizer aqui que posso adicionar educação. E, obviamente, precisamos mudar o tamanho deste para que eu possa mudá-lo para 50. Precisamos de um tamanho maior aqui, e eu posso fazer aqui. Acho um pouco. Ok, deixe-me executá-lo para que eu possa ver como parece exatamente. Este é o nosso baseado na web e acho que está tudo bem, parece bom, mas ainda assim, podemos fazer um pouco de mudança de nossa família de fontes em uma família de fontes diferente. Não neste. escolher este e vou adicionar uma linha abaixo dessa alocação. Então, vou traçar uma linha aqui e aqui. E então precisamos alterar o tamanho da borda porque a linha é uma borda. Então, vou mudá-lo para três. Acho que vai ser bom se eu adicionar aqui cinco. E está tudo bem Agora o centro. E agora vou mudar a cor dessa borda. Isso é o que eu posso escolher. Então, está tudo bem, e agora vou alterar essa visualização de layout. Este aqui. Aqui está você. Temos essa educação e podemos ver isso sublinhado aqui. Está tudo bem aqui. Agora, aqui precisamos adicionar duas coisas. Um é nosso talvez diploma universitário e outro é nosso diploma universitário. Podemos adicionar aqui. Para fazer isso, vou adicionar aqui imediatamente precisamos adicionar uma linha. Então, para isso, podemos novamente ajudar esse layout para que possamos ver o meio. Então, temos isso. Quatro, e aqui temos 12, temos quatro, depois 4810. Então, podemos tirá-lo desses quatro e desses dois e dessa força. Assim, podemos dar nossa linha no meio. Temos cinco por cinco. Então, no medial, podemos adicionar essa linha. Então você pode ver a partir daqui, no meio, você pode ver este é o meio deste. Podemos desenhar uma linha aqui no meio. Ok, então agora eu posso ajustar este. Agora acho que está no meio. Agora vou mudar o tamanho dessa água para dois. E aqui você pode ver esse desânimo de opção de traço significa que ele vai nos dar uma borda de mesa. Você pode ver que temos esse painel desconhecido. E então eu vou mudar a cor deste. Posso mudar qualquer cor. Digamos que essa cor. Neste momento, podemos adicionar um título deste dois itens aqui na educação. No lado esquerdo, teremos nosso diploma universitário. E podemos dizer aqui, chame isso de nosso diploma escolar. Então, vou selecionar esta ferramenta de texto aqui, e vou escrevê-la aqui. Podemos dizer que o diploma universitário. Uma coisa é perceptível aqui é que, se você não mudar o lado do formulário, ele sempre tomará o tamanho anterior dos ataques anteriores. Então, usamos 50 para essa educação. Tomar o site deles, é, ainda está tomando o mesmo tamanho, então precisamos arriscar. Então, em vez de 50, vou dizer 3030. E aqui no centro, acho que aqui posso adicionar este diploma universitário e vou fazer uma duplicata. Então pressione Comando D e eu vou chegar aqui. Também. Você pode ver duzentos e quinhentos, cento e cinco é o espaço igual que estamos tomando de ambos os lados. E vou dizer que aqui é legal e chame essa escola. E agora, depois disso, podemos simplesmente adicionar linhas. Então, o que vou fazer, vou simplesmente duplicar este porque já temos este aqui. E depois vou colocá-lo aqui, depois fazer outra cópia. Então, Comando D, e obviamente, se você quiser, você pode simplesmente escolher um diferente. E se você segurar dessa maneira, então você pode ver que a linha está chegando da mesma na mesma linha. Agora parece bom, não há problema algum. Está tudo bem. E aqui teremos que escrever o nome da universidade e no nome da adversidade e o assunto e o ano talvez para fazê-lo, o que posso fazer aqui? Você pode lembrar que conhecemos um componente desse ícone, ícones para baixo. Vou arrastar este aqui. Usaremos este. Então, vou arrastá-lo para cá. Aqui temos, podemos simplesmente escrever um. Podemos simplesmente escrever, ou podemos simplesmente escrever em um texto, ou podemos simplesmente desenhar retângulos. Então vou desenhar um retângulo aqui, e depois vou escrevê-lo aqui desta forma. Tudo bem? Vou arrastar este aqui no meio desta caixa. E aqui vamos escrever o nome da universidade, o nome da universidade e o assunto e o ano. Vou escrever algum exemplo aqui. E digamos, vou dizer aqui. Posso dizer aqui, Universidade de Oxford. Só por um exemplo. O assunto é BSC em engenharia de software. E então o ano que passa, talvez aqui seja de 2015 a 2018. Isso é o que estou pensando em adicionar aqui. Agora, você pode ver que ele está no mesmo formato, então ainda é se quisermos, acho que podemos simplesmente, eles podem simplesmente minimizar este um pouco. Mais uma vez. Diminua a fonte do tamanho do texto. Agora, se eu executá-lo, deixe-me pegar como parece. Está parecendo muito bom aqui. Está tudo bem. Vou explicar. bacharelado universitário em engenharia de software ano 2015 a 2018 é bom. Não há problema algum. E agora temos talvez um diploma de bacharel, então temos talvez mestrado. Então, vou fazer dele uma duplicata. Então, em vez de fazer uma duplicata, o que podemos fazer? Podemos simplesmente torná-los um grupo aqui. Então este é o texto. E temos essa opção. Então temos essa opção. Podemos selecionar esses alterados. Uma coisa é que eu adicionei um texto aqui. Então, se você quiser, você pode clicar em Tick três vezes e então você pode fazê-lo. Então, vou selecionar todas essas coisas e fazer com que ele se agrupe. E posso renomear o grupo. Podemos dizer que o diploma de educação. Ele pode dar qualquer nome ao seu grupo. E agora vou clicar nessa grade de repetição e posso simplesmente duplicá-la. Perfeito. E agora vou desagrupá-lo. E aqui podemos dizer MAC, basta simplesmente mudar o texto para MSC em engenharia de software. Então talvez aqui esteja 2019202120192021. E é o mesmo para esses mesmos quatro. mesmo para o diploma universitário também. Então, vou usar, vou, vou copiar esse grupo. E então eu posso usar este aqui. Este é o grupo que estamos tendo, então precisamos do mesmo tipo de coisas. E então eu posso simplesmente torná-los um grupo. Então posso dizer o comando G e o grupo dois. E vou colá-lo aqui. Posso simplesmente duplicar. Eu posso fazer isso. Ok, então eu posso simplesmente fazer isso a partir daqui. Vou fazer com que ele comande D porque é grupo aqui você pode ver que está se tornando um grupo. Agora, posso simplesmente adicionar esse tema logo aqui. E então eu posso adicionar Repeat Grid novamente aqui para este. E então eu posso fazer isso duplicado. Agora, parece o mesmo e temos no mesmo tamanho. É como em dois perfeitamente. E podemos dizer isso. Deixe-me mudar o texto aqui. Então, em vez de uma cidade inversa, podemos dizer que receber estudiosos. Então você pode dizer que o assunto talvez seja ciência. Pode-se dizer que o ano é talvez 12º, 2014. E para este, vou mudar o nome é que vou te dar a escola sem nome. O tempo talvez, e a sub-rede talvez também seja sinais. Há o fundo, então eu vou jogar na escola. Você pode adicionar qualquer coisa em relação ao seu nome. Você pode dizer que ciência e o ano será de 2 mil a 2012. É isso. Agora, se eu executá-lo, eu deveria ser capaz de ver. Eu cometi um erro aqui. O que aconteceu aqui? Não, não, é. Certo. Pensei que talvez eu tenha removido este. Agora, se eu executá-lo, posso ver que está tudo bem aqui. E esta é a educação aqui. E nós temos essa opção. Parece bom, Perfeito até agora, estou feliz com isso, mas temos alguns problemas aqui. Precisamos resolvê-lo. Agora, se eu descobrir, então você pode ver que em casa nós temos este é maior que o texto. Eu não notei isso antes. Então, podemos simplesmente resolver este. E esta é a linha. Podemos simplesmente minimizar este. Proprietário, certo? Podemos simplesmente minimizar este. Branco é em vez de 86, podemos dizer 75, talvez 55. Então podemos simplesmente arrastar e simplesmente adicionar apenas este. Podemos simplesmente saber para que possamos simplesmente ajustar este. Acho que está tudo bem agora. Está tudo bem agora, perfeito. Vou parar este vídeo aqui e continuaremos a partir da próxima palestra. Então, espero que você tenha entendido como trabalhar, como projetar esse tipo de coisas usando o Adobe XD. E na próxima parte adicionaremos aqui experiência de trabalho e outras coisas. Então vejo você na próxima palestra. Adeus. 7. Design de seção de projeto de aplicativos: Bem-vindo de volta mais uma vez. Nesta parte, vamos projetar nossa seção de projeto. Então, vamos adicionar nossa seção de projetos onde poderemos mostrar nosso projeto. Para isso, precisamos adicionar, primeiro lugar, vou aumentar a altura dessa prancheta principal. Vou aumentar a altura um pouco mais. Talvez isso, porque teremos que adicionar mais algumas coisas aqui. E aqui vamos nós. Agora, vou selecionar este 1 primeiro, depois clicar neste layout para que possamos ver essa visualização de layout que nos ajudará a adicionar nossa prancheta e design. Então, em primeiro lugar, teremos que adicionar nosso título aqui, que será nosso projeto, projeto e depois sublinhado. Então, o que vou fazer, vou clicar neste e neste. Isso e isso. Ok, então esta linha dois e essa educação, vou fazer deles um grupo e vou dizer o título deles. Este é agora um grupo e vou pressionar Comando D para que possamos duplicá-lo e arrastá-lo aqui e agora ajustar a linha. Você pode ver que ele é estudado deste lado para educação e é o mesmo para este. Posso ocupar um pouco de espaço aqui. Perfeito, agora vou mudar o nome. Então, em vez de Educação nessa coisa serão projetos aqui. E aqui teremos que ajustar o sublinhado aqui porque o texto é um pouco. Ninguém é poucos. Em seguida, integração. Agora parece bom, Perfeito. Agora precisamos ajudar esta ferramenta retangular aqui. Podemos adicionar essa coisa aqui. Podemos arrastar este daqui para cá porque vamos adicionar alguns projetos. Então vou tentar ocupar um pouco mais de espaço para este. Então, ele é iniciado desta coluna para esta coluna. E agora podemos ajustá-lo a partir do projeto. Ok, então outra coisa é isso, para que possamos adicionar o design semelhante como este. Então, vou clicar duas vezes nele e, em seguida, aqui ele pode clicar duas vezes. Depois de clicar duas vezes, você poderá ver essa linha. E então você pode simplesmente desenhar ou ajustar este. Podemos simplesmente adicionar apenas este desta forma. Aqui. Outra coisa é que também precisamos adicionar essas idéias modernas para esta. Tão rápido, acho que acabamos com esse tecido de layout. Não precisamos mais ver o layout aqui por enquanto. Mas precisaremos fazer o upload de um arquivo e, em seguida, faremos isso novamente. Então, vou remover este, vou clicar nele e, em seguida, remover este. E agora temos esses projetos, esses projetos aqui precisamos adicionar fronteira. Vou remover esta borda aqui. E acho que precisamos adicionar a sombra rapidamente. Então adicione sombra 20 por 20. Aqui vamos nós. Temos isso 20 por 20. Agora não temos, deixe-me fazê-los. Faça com que ele desfaça rápido. Agora, clique nele. Se eu clicar neste texto aqui, ele deve ser movido daqui. Vou desmarcar este 1 primeiro. E então, se eu clicar nele, vou desenhá-lo novamente. Não sei por que essa fronteira do Sean não está aparecendo aqui. Ele deve aparecer aqui. Então, onde está isso? Ok, então ele contou no local. Não há motivo para não estar aparecendo. Vou remover deste 1 primeiro e ajustar essa grade de longitude aqui. Acho que, em vez de fazer isso diretamente, adicionei este 1 primeiro. Então, vamos tentar novamente. Agora. Acho que posso ver essa opção de fronteira aqui. E, ao mesmo tempo, podemos simplesmente ter essa opção. Vou selecionar este, depois vou adicionar apenas este 1 primeiro. E então aqui você pode alterar a borda para 26 e, em seguida, clicar nisso, clicar duas vezes aqui, Stuart, e depois fazê-lo. Um pouco de design de coisas aqui. Perfeito. Agora podemos simplesmente mover esse layout. Precisamos que estes sejam mostrados aqui. Podemos adicionar essa sombra. Shadow é 20 até 2020 a partir de x e do site y. Ok, então perfeito agora ainda é que podemos ver esta fronteira, mas não precisamos ter essa fronteira aqui. Então, vou remover essa borda daqui. Perfeito, agora parece muito bom. Agora precisamos adicionar nosso aqui, precisamos adicionar nossa fronteira novamente. Vou pegar esta ferramenta retangular aqui. Então aqui vamos, vamos adicionar nosso projeto. Então, teremos um título, a descrição e, em seguida, dois botões. Para este, vou adicionar apenas a este site aqui. Daqui para aqui. Vou ter outro, vamos ter outro retângulo aqui. E esse retângulo será para os e-mails. E precisamos ajustar este com o tamanho. E neste retângulo, adicionaremos nossos e-mails. E aqui teremos nosso título e a descrição, e teremos dois botões. Para fazer isso. Já baixei algumas imagens. Então, vou usar essas imagens primeiro. Então, vou arrastar essa imagem diretamente para aqui. Você pode ver que ele vai se ajustar automaticamente acordo com o retângulo. Há estudos quando fui criado esse retângulo em cima desse retângulo, e posso simplesmente aumentá-lo ou diminuí-lo aqui. Isso leva a tudo bem. E agora podemos adicionar nosso título e descrição. Para fazer isso. Nós podemos, precisamos tomar saúde para, para esta ferramenta de texto aqui. Deixe-me clicar duas vezes aqui e adicionar o layout para que possamos ver de onde podemos adicionar nosso título. Podemos adicionar este título a partir daqui, ou podemos ajustar isso um pouco aqui. Podemos adicioná-lo a partir daqui e adicionaremos nosso texto daqui. Podemos adicionar um texto aqui, o centro. E esse será o título do nosso texto. Podemos copiar algum texto do nosso Loren Ipsum. Posso dizer que você pode adicionar este. Pode adicionar este aqui. Podemos adicionar alguns contra ele para copiar esta linha daqui, você pode obter qualquer texto, basta colocar um exemplo, estou usando esta. E você, alternativamente, também pode usar algum tipo de plug-in para o texto. Primeiro motivo pelo qual não está aparecendo aqui. Deixe-me pensar que ainda não funcionou. Preciso copiá-lo primeiro. Então eu posso adicionar este aqui. Portanto, esta é a nossa ferramenta de texto selecionada. Aqui eu posso. Isso não sabia. Aqui está você. O problema é que 12 padrão para instalar o tamanho da fonte porque é 50, então deve ser 20, um pouco maior. Acho que 25 seria bom. Aqui vamos nós. Então, podemos adicionar nosso texto aqui. E, alternativamente, podemos, deixe-me verificar, como parece, como o tamanho vai ficar. Para este. Parece bom, está bom. Metal não polar. Isso será capaz de título e precisamos adicionar nossa descrição para adicionar uma descrição aqui, o que podemos fazer aqui? Ou podemos clicar nisso, no próximo, e então podemos desenhá-lo. Isso significa que, se eu vou desenhá-lo dessa maneira, ele ajustará o texto dentro dessa caixa. Dentro desta caixa , não é possível adicionar. Agora vou perder o tamanho. Vou, desculpe, o que aconteceu? Eu clico neste 1 primeiro e mais rápido, preciso adicionar o texto aqui. Então, vou desenhá-lo deste site para aqui. Então, dentro, precisamos colar no texto. Então, vou copiar alguns textos daqui. Vou copiá-lo e depois posso colá-lo aqui. Aqui vamos nós. Agora temos essa opção aqui. Agora podemos simplesmente, simplesmente ajustar este desta forma. Então eles também podem ajustá-lo com isso, com esse detalhe, assim por diante. Para a descrição, deve ser 20. Não precisamos apenas adicionar a mesma altura e peso, mesmo tamanho de fazenda para título e descrição. Parece muito bom, sem problema algum. Agora, podemos, uma coisa que podemos fazer aqui, podemos diminuí-los. É uma coisa aqui que precisamos remover esta. Podemos ter justiça ON porque não precisamos de mais espaço para o detalhe. E outra coisa é que precisamos ajustar o EMS assim como este, porque não precisamos ter muito mais espaço para este. Então, dessa forma, podemos ajustá-lo. E aqui vamos adicionar dois botões. Portanto, não precisamos ter esse combustível de layout agora. Podemos adicionar dois fundos aqui. Um é para testes de beleza e outro é má visão da vida. Para adicionar um botão, vou ajudar nesta ferramenta de retângulo. Vou clicar nisso. Vou fazer um design aqui. Aqui. Então eu posso adicionar um pouco de raio de borda para este. E dentro disso, pode-se adicionar nosso texto para que você possa dizer detalhes Bu, ver detalhes e podemos torná-lo centralizado. Acho que também podemos aumentar o tamanho da fonte para 30 e, em seguida, posso ajustá-lo no centro. E deixe-me mudar o estilo, o estilo da fonte. Podemos adicionar nosso diferente do padrão para este. Talvez não este, talvez algum outro. Não este também. Podemos escolher. Este parece bom. Acho que a aparência escolheu este. Agora, se o executarmos, espero que possamos vê-lo. Então aqui vamos nós. Podemos ver que essa coisa está aparecendo aqui. Vou parar este vídeo aqui e continuaremos com ele na próxima palestra. Vejo você na próxima mistura aqui. 8. Design completo de seção de projeto: Bem-vindo de volta mais uma vez. Nesta parte, terminaremos nossa seção de projetos. Descemos IS ou botão em nossa parte anterior e este e-mail envia essa coisa. Mas o problema é que eu acho que o tamanho inferior é uma serra de béquer ou podemos simplesmente minimizar o tamanho do formulário, bem como o tamanho inferior. Em vez de atrasado, podemos amarrá-lo com 25. Então também podemos tentar um pouco diferente em diferentes famílias de fontes. E denote este. Menor, não este. Isso vai ser ajustado com este. Podemos escolher esses diferentes. Podemos ter essa visão, podemos ver detalhes, mas tem a chance de compartilhar seus detalhes adequados. Mas você definitivamente pode tentar o outro. E podemos ter este perfeito. Serra. Gostei disso, da família das fontes. E então podemos ver, parece muito bom, mas podemos ajustar o syscall inferior. Não precisamos ter um maior. Posso ajustá-lo de acordo com o texto que eu acho. Então podemos ajustá-lo ao centro. Apenas centro tranquilo. Você pode ver que Hardy by Tarde e arrumado para biotita ele cinzel está tudo bem, aqui está tipo de centro. Agora. Precisamos torná-lo um grupo para que possamos duplicá-lo. Então construa detalhes e este solvente retangular, você deslizará os carrapatos e o retângulo. Você poderá ver o destaque disso aqui. Então você pode ver se eu clico em Exibir detalhes e, em seguida, destacará alguns detalhes. E se eu clicar neste retângulo, ele será o ângulo correto. Para. Outra coisa é que, quando você vota, você cria qualquer novo componente no botão Novo e um novo texto, ele sempre aparecerá na parte superior. Então, vai ser muito fácil para você identificar qual é que você precisa fazer grupo, ok, então eu vou selecionar este aqui. Você pode ver o Board foi selecionado. Agora posso pressionar Command Z. Posso dizer “faça”, posso renomeá-lo. Posso dizer botão. Aqui vamos nós. Agora, clique nesta grade de repetição. Esta é a maneira mais fácil de fazer duplicação n. Aqui chamamos Exibir detalhes. E então eu vou desagrupá-lo n em vez desses detalhes da exibição. Então, podemos simplesmente dizer isso vista ao vivo. Talvez se um usuário quiser diretamente. E previsivelmente tenha a visão ao vivo desse projeto. Podemos dizer vida bu. Acho que precisamos nos ajustar novamente porque mudamos tanto que você pode ver tardy by Tardy. Do topo. Tomou espaço atrasado e depois do fundo interessante e Tarde e de ambos os lados 484988 está bem aqui igual. E agora, se eu executá-lo, devemos ser capazes de ver nosso design. Tudo bem, parece perfeito. E fizemos isso e podemos novamente, podemos simplesmente minimizar este. E outra coisa que podemos, se você quiser, você também pode adicionar um pouco de rádios de borda ou água ou você pode mudar a cor deste, mas podemos mudar a cor do botão. Isso é o que podemos fazer. Agora. Então, acaso a cor de fundo desse padrão. O que aconteceu? Eu selecionei um diferente. Certo, deixe-me ver este. Vai nos mostrar aqui. A vista ao vivo. Precisamos adicionar o peito está bom, então precisamos selecionar o retângulo. Não vai fazer isso aqui. Podemos rapidamente definir uma cor de fundo deste botão. E então vou mostrar o que está acontecendo exatamente aqui. Então, podemos simplesmente fazê-lo dessa maneira. Podemos fazer, podemos limpar a prateleira aqui. E você pode ver que agora o próximo é razoável. Então, o que fazemos? Podemos simplesmente dizer que agora traga para a frente. Então podemos simplesmente avançar a cor do texto. Podemos simplesmente mudar a cor do texto ainda, ainda podemos texto não visível aqui. Temos essa opção. Deixe-me agora se por acaso duas vezes, podemos ver que a cor é branca agora, então ela está visível agora. Agora, se eu executá-lo, então devemos ser capazes de ver essa coisa. Ok, então parece muito bom agora. Viva poucos. E então, para este botão, podemos manter este. Álcool, fundo branco. Não há problema algum. Agora, sempre ainda temos um espaço muito maior, para que possamos simplesmente diminuir o espaço. E também, para este, você pode ver que a borda está selecionada aqui. Então, o que posso fazer? Posso simplesmente desmarcar esse botão para que não vejamos nenhuma borda para esses e-mails. E então, se eu vou desacelerar, já posso mover o tamanho dessa imagem. Finalizamos nossa seção de projeto e agora podemos duplicar esse projeto. Para fazer uma duplicata. O que posso fazer? Temos outro problema aqui. O sublinhado passou deste projeto. Não sei qual é o motivo. Na verdade, está aqui. Mas não podemos, não podemos ver isso. Mas não podemos ver ou não está lá. Deixe-me ver. Deixe-me ver o texto do projeto onde ele é positivo. Enquanto esta linha, precisamos selecionar esta cor pois ela foi removida para infelizmente, qualquer forma, agora ela está sendo exibida aqui. Então agora temos essas poucas coisas para torná-lo uma duplicata. Então, como podemos fazer isso? um título e uma descrição sobre essa coisa. E essa coisa é tantas coisas que temos rápido. Temos esse retângulo, três, depois temos esse texto, então temos este. Ou podemos simplesmente negligenciar, podemos fazer podemos simplesmente copiar tudo isso, mas às vezes isso cria um problema aqui. Então, qual é o nome do principal? Precisamos torná-los um grupo é muito longo, então é muito longo. Esses dois, temos essas tranças, então temos o retângulo. Temos esse retângulo também aqui. Então temos neste. E para esses detalhes de visualização, temos esse botão aqui. Vou selecionar este botão e este botão, isso usa essa opção, e essa equipe e este também. Acho que selecionei tudo isso agora posso torná-lo uma duplicata. Então eu esqueci de escravizar este. Também precisamos selecionar esses detalhes de exibição. Agora posso fazer deles um grupo. Então pressione Command Z e até renomeá-lo novamente. Podemos dizer, podemos dizer projetos. Agora, vamos clicar na grade de repetição para que possamos duplicá-la facilmente. Aqui vamos nós, podemos ver que temos todas essas coisas e agora podemos duplicar esta. Tudo bem, e se você quiser, você também pode fazer mudanças entre esse espaço, mas acho que isso é basicamente entendido que está tudo bem. Agora vou desagrupar este. E agora a coisa é que podemos simplesmente mudar os e-mails daqui. Então, em vez desses e-mails, o que posso fazer? Posso pensar que posso remover essa imagem daqui. E então, em vez de remover isso, podemos simplesmente substituir essa imagem aqui. Temos nossas diferentes unidades novamente. Temos este. Vou adicionar este aqui. Ramus foi substituído. E a partir daqui, podemos adicionar, você pode adicionar outro. Só tenho este. Acho que posso fazer este aqui. E eu não tenho outras imagens aqui até agora. Não tenho nenhum outro. Está tudo bem. Agora, se eu executá-lo, posso simplesmente ver essas coisas. Então, corrigimos esse problema, temos este também. E está tudo bem, então temos objeto de carreira. Também é perfeito. Você pode ver que todos os lados são correspondências, então não há problema algum. Então, temos a seção de educação, o que também é bom. Temos uma seção prótica onde temos essa visualização ao vivo e os detalhes da visualização e visualização ao vivo Detalhes da exibição. Então você pode ver o problema é que você pode ver o tamanho, altura larga e as distâncias no tamanho perfeito. Não há nenhum problema com isso. E também temos essas opções aqui. Nós fizemos isso agora na próxima parte, faremos, adicionaremos a seção de demonstração. E outra coisa é que teremos que adicionar prototipagem. Então, quando você usá-lo, clicaremos neste Exibir detalhes. Nós os enviaremos para um lugar diferente, onde adicionaremos alguns detalhes do projeto podem ser novidades para adicionar este, talvez você esteja publicando este neste projeto. Então você precisa adicionar um pouco de descrição no projeto. Nós faremos isso. Mas agora vou parar este vídeo aqui e continuaremos com a próxima palestra. Vejo você na próxima palestra. 9. Design de habilidades de tecnologia: Bem-vindo de volta mais uma vez. Nesta parte, adicionaremos mais uma seção em nosso projeto de portfólio, que será uma habilidade tecnológica. Assim, você pode, para que usuário possa mostrar suas habilidades tecnológicas e as ferramentas, que tipo de habilidade de ticket eles estão trabalhando. Portanto, esse portfólio de estudos baseados em nosso desenvolvedor ou em um parson que trabalha, que está trabalhando em desenvolvimento web, baixo consumo de energia ou qualquer tipo de engenharia de software. Há uma razão pela qual estou adicionando essas habilidades tecnológicas ou seção de ferramentas. Mas se você está mirando dois tipos diferentes de público e pode adicionar diferentes tipos de sexo de acordo com a profissão deles. A outra parte principal publica na célula T você. Essa coisa é como projetar esse tipo de coisas e como você pode usar todas as ferramentas do Adobe XD? Espero que você esteja aprendendo. Em primeiro lugar, precisamos aumentar a altura dessa prancheta principal. Então clique duas vezes e aumente a altura. Vou adicionar um pouco mais. Vai ser um aplicativo de página única. Há uma razão pela qual vamos aumentá-lo. Agora vou clicar duas vezes nele para que eu possa ver o layout. Então, quando você clica duas vezes na prancheta principal, você poderá ver essas opções de layout. Então clique nesta camada. Agora temos essa visão. Agora temos o, então anteriormente conhecemos o grupo dessa educação, acho que vou fazer dele uma duplicata. Então cole o Comando D e, em seguida, podemos simplesmente arrastá-lo. Posso simplesmente arrastá-lo para a parte inferior deste projeto e podemos ajustá-lo. Aqui. Eles são do mesmo tamanho. Você pode ver na mesma posição. Projetos e este vai adotar habilidades. Eu simplesmente não posso alterar esse texto. Então posso dizer que é preciso habilidades de habilidade. Aqui vamos nós. Acho que não precisamos arriscar o sublinhado. E agora vou adicionar esse retângulo aqui. Aqui vamos nós. A partir daqui, precisamos desenhar um retângulo nesta coluna. E aqui vamos nós, temos essa opção. Podemos adicionar um pouco mais de espaço aqui, e se não precisarmos dele, podemos alterá-lo. Vou adicionar border-radius 26. Em seguida, faça um clique duplo e, em seguida, clique nele. Então, simplesmente podemos fazê-lo. Podemos simplesmente adicionar um pouco desse problema de design. Agora, não precisamos mais ter este. Parece OK. E agora podemos remover essa borda. Não precisamos ter essa fronteira. Aqui. Precisamos adicionar nossas sombras. Shadow vai ser 20 por 20. Aqui, vou adicionar outro retângulo onde mostraremos nosso círculo. Acho que podemos ajudar esse layout. Então clique duas vezes e clique neste layout. E está começando daqui, para que possamos iniciá-lo deste lado, desta coluna. Ok, então eu vou, vou pegar este daqui, esses dois. E precisamos adicionar outro círculo em cima deste? O circuito ficará entre essas colunas e essa coluna. Podemos ajustá-lo disso para isso. E para torná-lo circular, precisamos ter certeza de que estamos dando a altura e o branco é exatamente o mesmo, 150 por 150. Você pode ver que o círculo é estabelecido a partir disso, a partir do final desta coluna e ele terminou a partir do final desta coluna. No meio deste. Estamos dando este circuito aqui e aqui vamos nós. Perfeito. Desta forma. Podemos fazer isso e acho que está tudo bem, e podemos ajustá-lo dessa maneira também. Agora não precisamos mais ter esse layout, então vou removê-lo. E agora parece isso, temos isso, o mesmo espaço deste lado para este lado. Agora, aqui podemos adicionar nossos ticks e podemos editar o texto aqui. Então o texto vai ser, podemos dizer, o maior garoto será em vez da maior habilidade, você pode dizer talvez JavaScript. Javascript vai ser isso. E aqui vou mudar isso não leva este. Que textos usamos para este, usamos coco. Vou usar o mesmo texto da mesma família de fontes vai ser co corner e este, perfeito. Agora podemos ajustar este para que não precisemos ter esse espaço maior aqui. Podemos simplesmente minimizar este. Também podemos ajustar o texto e ele deve estar no centro. Você pode ver. Você pode ver facilmente, podemos torná-lo central. Você pode vê-lo aquele por 8076 D6 específico. Esta é a melhor coisa possível que podemos fazer aqui e agora podemos ajustar esta para que não precisemos ter, acho que não precisamos ter a borda aqui, mas podemos adicionar essa sombra aqui. Então, sombra, sombra 20 por 20. Agora vai ficar bem na escrita. Também posso adicionar a borda para que ela possa ser facilmente viável. Deixe-me executá-lo e como parece. habilidade mais lenta vai ser como este projeto. Faça uma escala, e isso é chamado de JavaScript. Ok, então ele vai ficar bem e podemos At, fazer, podemos manter este ou podemos simplesmente minimizar este um pouco mais, então podemos simplesmente ter este. Perfeito n aqui. Podemos simplesmente estilo Jen. Parece que você pode mudar a cor de fundo deste. Podemos adicionar cores diferentes para a diferente. E podemos adicionar gradiente linear. E então podemos simplesmente ajustar esse tema daqui para aqui. Então, podemos simplesmente adicionar apenas este desta maneira. Não precisamos ter essa fronteira daqui. Agora. Tem a mesma altura e branco. Parece muito bom. Podemos manter a borda para JavaScript. Não precisamos ter outras coisas aqui. Posso dizer que pegue o castelo dele alternativamente, o que você pode fazer? Podemos simplesmente, você pode simplesmente adicionar um logotipo ou qualquer outra imagem pode ser colocada no produto para o logotipo do JavaScript. Mas, para mim, vou adicionar a cor. Vai ficar tudo bem com isso. Não há problema algum. Então agora a coisa é que precisamos fazer, temos, precisamos torná-los um grupo. Então, temos JavaScript, temos esse retângulo. Temos este, então é o caminho. Temos essa parte, então ela se tornou parte. Não precisamos fazer isso. Então, essas são as três coisas que precisamos para fazer um grupo. Então, vou pressionar Command D ou Control e JavaScript. E esse retângulo nessa árvore foi selecionado, então vou fazer deles um grupo. Então pressione Command G no teclado ou, alternativamente, você pode pressionar o botão direito do mouse e, em seguida, você pode dizer Desagrupar. Ou se você estivesse no Windows, então você pode simplesmente pressionar Control Z, acho que para o Mac é Command C. Vou pressionar Command G, e ele tem um grupo agora e eu vou mudar o grupo nome2. Podemos dizer habilidades tecnológicas. Vamos dizer que pegue uma habilidade. Agora, podemos facilmente torná-los duplicados. Aqui vamos nós. Podemos simplesmente torná-los duplicados. Então, se quisermos adicionar apenas um G, então sinto muito. Então teremos que reorganizá-lo. Este aqui. Podemos levá-lo um pouco deste lado, e então podemos cumprir este. Também podemos adicionar apenas oito de ambos os lados. E então podemos ter isso, acho que está tudo bem, mas para obter mais confirmação, podemos simplesmente clicar neste layout. Então podemos ajustá-lo agora. Primeiro, deixe-me desagrupar. Está vindo do meio deste e não vem do medial e este deve ser. Lá. É. Certo, acho que está no centro. Perfeito. Agora, na parte inferior, também podemos fazer outro grupo. Acho que dois grupos são suficientes dependendo da pessoa está fechada. Podemos, podemos simplesmente fazer essa coisa. Podemos criar um espaço um pouco maior. Podemos criar um espaço entre eles. Então podemos ver que temos esse espaço de lado e a soma desses espaços do lado. Então está tudo bem, completamente perfeito. E agora, se eu desagrupá-lo, agora clique duas vezes neste quadro de arte principal e remova essa exibição de layout. E aqui vamos nós. Temos essa opção aqui. Então, simplesmente podemos mudar isso leva dois. Então, em vez de JavaScript, podemos salvar esse termo. Podemos dizer Adobe XD. Posso dizer Adobe XD. Então podemos mudar isso leva dois. Podemos mudar isso leva duas batidas. Gs, digamos que não há oxigênios, estou apenas adicionando alguma tecnologia de programação. Design Ux. Então eu posso dizer Figma para este. Para este. Em vez de JavaScript, vou dizer um React js. Vou reagir JS. E para este, vou dizer salve aldeias ou entalhes. Perfeito. Então, sempre que você estiver projetando algo em vez de mostrar as mesmas tags, sempre ficava para adicionar textos diferentes. Parece muito bom quando você fará qualquer tipo de apresentação. Vai ficar muito bom. Agora podemos simplesmente mudar a cor de fundo disso, de cada item, porque precisamos mostrar os diferentes para que pareça bom. E em vez disso, ele está mostrando o gradiente linear. Vamos levar o sindicato primeiro, então vou mudá-lo para uma cor diferente primeiro para que possamos fazê-lo. Podemos simplesmente esse gradiente linear aqui. Podemos simplesmente adicionar essa coisa. Ok, então para este eu posso escolher r, Outra cor diferente. Então, se você tiver algum outro código de cores, então o que você pode fazer? Você pode simplesmente colá-lo aqui e, em seguida, você pode usá-lo. Tão rápido, vou fazer dele um gradiente de cor sólida. Então eu vou fazer este, manter essa cor. Para este, vou escolher um diferente. Então remova essa coisa. E então eu posso adicionar um linear ficando um pouco escuro. Para este, vou escolher o outro que já temos. E para este, vamos torná-lo um pouco mais leve ou assim. Ok, então agora se eu executá-lo, então devemos ser capazes de ver nossa cor, nossas habilidades tecnológicas. E aqui vamos nós. Temos essas habilidades tecnológicas. Perfeito. Parece muito bom, sem problema algum. Na próxima parte, adicionaremos nossas ferramentas. Vai ser o design semelhante, mas veremos como fazê-lo. Vou parar este vídeo aqui e continuaremos a partir da próxima palestra. Vejo você na próxima palestra. Adeus. 10. Design de seção para ferramentas de aplicativos: Bem-vindo de volta mais uma vez. Nesta parte, vamos projetar nossa outra seção, que será nossa seção de ferramentas para seção desta semelhante à nossa seção transversal de técnicos. Então, adicionaremos essas imagens de fundo e , em seguida, adicionaremos as ferramentas, talvez quaisquer outras ferramentas que um desenvolvedor tenha. Então, para isso, eu vou, primeiro, vou exibir o layout de dados de intervalo rápido para que possamos simplesmente ver a coluna. Portanto, esta é a nossa visualização de layout agora. E então eu vou, temos meta grupo dessa educação. Vou fazer dele um grupo novamente. Vou pressionar Comando D e , em seguida, posso arrastar esta para a parte inferior depois disso para cima na seção mais adesiva para que possamos adicionar mais uma seção aqui. Poderíamos fazer isso componente em vez de arrastá-lo de novo e de novo, mas está tudo bem. Também podemos fazer isso dessa maneira. E aqui podemos organizá-lo dessa maneira. Então, essas serão nossas ferramentas, para que possamos deixá-las aqui. E vou mudar o texto rapidamente. O texto será apenas ferramentas. O texto será ferramentas. E aqui vai você. Podemos, precisamos adicioná-lo aqui. E então precisamos reorganizar este. Precisamos diminuir o branco desta borda nesta linha. Perfeito. Temos essa opção aqui agora, as portas estão bem. Agora precisamos aumentar nosso auge desta prancha de arte principal um pouco mais. E então podemos ajudar Bob esta ferramenta de retângulo, e a partir desta coluna podemos ajustar nosso retângulo. Certo? Então, desta vez, vou fazer qualquer ferramenta de dobra. Em seguida, vou usar qualquer ferramenta de caneta. Então, diretamente, vou usar o raio fronteiriço para realmente um seis. Então eu vou remover esse tamanho da borda daqui. Então precisamos adicionar uma sombra aqui para clicar na sombra e adicionar 20 por 20. Perfeito. Então, temos essas opções aqui. Agora, acho que podemos ajustá-lo aqui. E negação, vou remover essas Exibições de Layout. Ok, então agora podemos fazer uma coisa. Podemos simplesmente torná-los um grupo. Acho que já é um grupo que vai ter habilidades. Vou selecionar este ou ícones. Vou selecionar este e pressionar Command D. E então eu posso duplicar este e arrastá-lo para cá para colá-lo sobre este. O que vou ter que fazer, terei a ver com Trazer para a frente. E podemos vê-lo agora aqui. Aqui estão ajustes iguais, coma. Com este, podemos ativar novamente a visualização de layout para que possamos ver o que está acontecendo. E a partir daqui podemos adicionar este para que possamos simplesmente ajustá-lo com disciplina, eu acho. Sim, isso é o que podemos ver aqui? Para este? Ele também faz 14, ok, perfeito. X2, 397299. Assim, podemos mudá-lo para 307. Agora, a partir daqui você também pode fazer isso minimamente. Então, se eu clicar neste, você pode ver os ovos e não é do lado esquerdo. Expressou a partir de um espaço de t 07 x posição. E é por isso que adicionei expedição de três a sete para isso para que ela possa se alinhar ao mesmo tempo. Tudo bem, agora posso levá-lo um pouco de baixo aqui. Em vez disso. Tem chance de contra o que vou adicioná-lo ao 07. Agora temos essas opções aqui, então agora podemos mover, podemos remover essa exibição de layout agora. E então isso aconteceu. Então, ele tomou o tamanho deste. Deixe-me verificar novamente ou você pode simplesmente arrastá-lo. Isso é o que deveria ser. Agora podemos ver isso 307. Mas aqui pensamos, acho que cometemos um pouco de erro. Deixe-me verificar mais uma vez se for o tamanho, então não, não está no tamanho perfeito. Portanto, deve ser iniciado a partir daqui. Então eu não percebi isso naquela época. Esse foi o motivo. Aqui. Você pode ver agora que parece o mesmo. E se eu remover esse layout daqui, você poderá ver agora que ele tem a mesma aparência. Tudo bem, então, em vez de Figma, mudaremos esse texto mais tarde. Mas antes disso, deixe-me usar esta ferramenta Repetir Grade para que possamos adicionar mais algumas ferramentas aqui. Talvez. Perfeito. Temos três. Aqui vamos nós. Acho que três são suficientes para este. Então eu vou desagrupar essa grade. E então vou fazer, posso simplesmente diminuir este. Então aqui podemos, podemos alterar o texto. Então, vou adicionar, você pode dizer ferramentas. Vou adicionar o GitHub ou obter este. Então eu vou dizer dy dt e eu ajustamos no centro porque o menor. Então agora acho que podemos ajustá-lo dessa maneira. Então, 163 por cento e sessenta e três e setenta e cinco por cento a seis. Então, está no centro. Agora podemos mudar a cor deste para que possamos selecionar uma cor diferente. Acho que este é perfeito. E agora, para este, podemos adicionar mais escuro. Podemos adicionar aqui mais escuro. Mais uma vez. Precisamos nos ajustar nisso e mais escuro. O centro. Aqui está um 124 por 23, então está no centro. Agora, a cor de fundo do estilo Jen deste. Podemos escolher essa cor aqui. Perfeito. E para este, acho que podemos escolher. Podemos escolher, podemos dizer chicote. Você pode escolher qualquer nome, o que quiser relacionado à sua exigência. Então aqui temos que ajustá-lo no centro. Então, um 123 não está no centro. Webpack perfeito n Aqui temos essa opção. Podemos alterar a cor de fundo neste. Ok, então agora se eu executar este, eu deveria ser capaz de ver essas ferramentas seção aqui. Temos esse banco de projeto, temos essas habilidades pegajosas e, em seguida, temos essa seção de ferramentas, então parece muito bom, sem problemas. Uma coisa que nem tudo está bem aqui. E na ferramenta sexual, adicionaremos nossa seção de feedback para que possamos compartilhar a nossa própria, para que possamos compartilhar opinião de outra pessoa sobre nosso desenvolvedor. Faremos isso na próxima palestra e vou parar este vídeo aqui. Vejo você na próxima palestra. Tchau. 11. Design de cartões de de de opinião de aplicativos: Bem-vindo de volta mais uma vez. Nesta parte, começaremos a trabalhar em nossa seção de feedback, onde adicionaremos alguns comentários e, em seguida, adicionaremos à nossa visualização de rolagem horizontal. Então, para fazer isso antes de tudo, vou aumentar o tamanho da prancheta de domínio para que possamos adicionar nossa seção aqui. Agora, o que posso fazer aqui? Vou fazer isso componente rápido porque estamos, precisamos copiar este várias vezes. Então, vamos torná-lo um componente. Vou adicionar o componente mike. Então este se tornou um componente e você pode ver que o ícone foi alterado e deve estar aqui. Agora, podemos usar este aqui tão rápido. Precisamos adicionar essa coisa aqui. Deixe-me visualizar o layout de inabilidades. E daqui, agora posso arrastar este. Aqui. Você pode ver este aqui. Aqui novamente. Aqui posso mudá-lo, educação para feedback. Feedback e, em seguida, precisamos ajustar este um pouco. Acho que no meio. É. Certo. Agora deixe-me verificar. Esta educação só está lá, ok, está tudo bem. Não há problema algum. Agora, aqui vamos mostrar nosso feedback. Para fazer isso. Agora, nesta parte, não vamos adicionar nenhum, não precisaremos adicionar. Então, eu queria adicionar à nossa tela cheia mostrando o feedback. Mas, para isso, pode-se colocar o feedback. Para feedback, vou rolar a visualização que faremos com a partir desta coluna o que quero dizer com isso. Então, adicionarei uma cor de fundo e, em cima dessa cor de fundo, adicionaremos o feedback. Deixe-me desenhar nossos retângulos. Clique neste retângulo e desenhe um retângulo aqui. Talvez esse valor. Certo, perfeito. Então, antes de tudo, o que vou fazer, removerei essa borda daqui. Não precisamos ter nenhuma fronteira. E agora precisamos obter a cor de fundo de parada. Podemos adicionar, você pode adicionar uma cor personalizada. Ou, se quisermos, também podemos adicionar o gradiente aqui. Agora podemos simplesmente intrometer, podemos simplesmente mudar o gradiente. Agora, se eu executá-lo, devemos ser capazes de ver descida. Então este é o nosso país, o aplicativo que estamos projetando, nosso Até que tenhamos essas ferramentas e depois feedback, e então temos essa opção aqui. Aqui. Vamos adicionar nosso feedback. Acho que não precisamos ter tanta altura. Podemos simplesmente remover isso, escondê-lo um pouco mais. Esse valor. Vamos corrigi-lo, sem problema algum. E agora o que posso fazer daqui? Vou tentar adicionar esse feedback. Para isso, vou adicionar ou posso adicionar esse valor. E então outro é daqui. Podemos adicionar esses dois daqui para aqui. Eu posso desenhar este. Eu não posso deste conjunto, posso pegar este porque precisamos ter um tamanho um pouco maior. Podemos levá-lo aqui, e estamos pegando nossa coluna cinco aqui, 12345, e aqui vamos levar cinco, ok? Então vamos levar de três a cinco, ok, para que possamos fazer isso aqui. Então, entramos no G6. Vamos levar um pouco no meio deste, e outro está no meio deste. Então podemos cavar o buraco deste lado direito. Ok, então agora podemos ajustar este para que agora possamos pegar a altura e um peso. Portanto, a altura é 401 e a altura é 381, então deve ser 401401. E o coração, por que esses sete lance duplo e 51755. Portanto, deve ser sete W5. Ele deveria estar aqui. Perfeito. Agora, o que faremos aqui? Precisamos fazer isso um pouco. Podemos adicionar a borda primeiro. Então, primeiro adicione o raio de borda 20, e o mesmo vale para este também. Então adicione o raio de borda 20. Aqui. Primeiro, editaremos o texto na parte inferior, adicionaremos, adicionaremos nossos e-mails, adicionará uma foto de perfil e, em seguida, o nome da pessoa que deu o feedback. Em primeiro lugar, estou comendo, não preciso ter esse layout agora, então vou remover este. O que posso fazer agora? Agora posso clicar na ferramenta Texto e agora posso desenhar opção de texto para que possamos adicionar texto aqui. Podemos colar algum texto aqui. E vou copiar algum post forum um Loren Ipsum. Alguma postagem fictícia. O Simon, sinto muito. Posso copiar este. Eu não sei. E agora está funcionando, então vou copiar este , clicar com o botão direito do mouse aqui. E então eu posso simplesmente colá-lo aqui. E vamos ver. Ok, então esse tamanho da fazenda é 50. Esse é o motivo. Então, vou fazer isso de novo. Agora. Deve ser 20 aqui e não 20 exatamente. Talvez 25. Talvez 25 sejam bons. E posso adicioná-lo dessa maneira, no centro ou no lado esquerdo? Ou é simplesmente remover o espaço como olhar este, isso vai apontar isso e esta será a área do texto, texto simples e área que leva essa coisa. Podemos mantê-lo no meio. Você pode ver o centro de alinhamento de texto. E podemos mudar coisas distal a esta que usamos para nosso neste, podemos usar este aqui. E depois disso aqui, teremos que adicionar essa coisa. O que teremos que fazer isso aqui, quero adicionar nossa foto de perfil e seguida, o nome para isso. Podemos ajudar esta ferramenta de elipse. Então eu vou desenhar essas ferramentas de elipse aqui para arrastá-la aqui e precisamos consertar o branco endurecido, talvez 95 por 95. Eu não sabia o que deveria ser o mesmo para que possamos ver se circulasse. E novamente é bastante bico 9895. Portanto, podemos verificar 85 por 8575 por 7575, por 7575 por 75. E aqui, bem acima disso, vou remover essa fronteira rapidamente aqui. Eu não deveria remover a fronteira de nós porque não temos nada nela. Então, o que posso fazer? Posso simplesmente adicionar uma foto de perfil aqui, então eu tenho uma foto fictícia. Eu posso simplesmente deixá-lo aqui. Agora ele se ajustou. Agora eu não removo a borda em vez disso, quero adicionar nosso tamanho de água aqui, talvez cinco. E então eu vou mudar a cor da borda para que eu possa vê-la dessa maneira. Ou acho que ficará bem em uma cor branca que podemos pegar e então podemos adicionar nosso texto aqui, e o texto estará aqui. E podemos salvar o nome do pacote, talvez apenas por exemplo, John Doe. Precisamos ajustar esse texto aqui? Podemos aumentar o tamanho do texto para 35 para que ele possa ser visível facilmente. E deixe-me verificar como parece. Agora, temos essa opção aqui, projeto degli, habilidades e ferramentas. E esse é o feedback que estamos mostrando aqui. E parece bom. Mas aqui eu queria adicionar nosso ícone aqui. Para isso, podemos adicionar, podemos tirar a saúde do nosso plugin de ícones que instalamos. Nós o temos, eu já o tenho. Posso dizer esse ícone para a frente. Vamos ver o que posso ver? Você pode ver tudo se eu amarrar, então posso ver que esse tipo de ícone está aparecendo aqui. Agora vou selecionar este. Omega, ele tem API aqui. Eu não sei. Não sei por quê. Precisamos selecionar este 1 primeiro. Então deixe-me voltar novamente. Então, estamos trabalhando aqui. Então, primeiro, deixe-me selecionar isso primeiro. E então vou selecionar este. Agora tem um período aqui, ainda, ainda melhor do que o anterior. Agora podemos selecionar, não podemos segurar este. Certo. Então, precisamos segurar este. Portanto, não sinto muito, deixe-me remover este rápido. Em seguida, selecione o texto para que ele possa aparecer aqui e clique neste. Desta vez, ele está chegando aqui. Eu não sei. Às vezes isso aconteceu aqui com esse plugin de ícone, então precisamos corrigi-lo. Vou clicar neste e depois vou arrastá-lo para cá. Não, não podemos arrastá-lo aqui. Temos que levá-lo aqui, desculpe, não está funcionando. E dessa forma talvez outro ícone. Podemos selecionar o ícone de seta de carne. Ok, então tem um período aqui. Deixe-me arrastar este. Ok, então agora eu posso segurar este e deixar-me fazer o componente primeiro para que possamos usá-lo a partir daí. Certo, isso é bom. Agora, não precisamos ter, podemos pensar que podemos. Não podemos remover este, mas podemos. A partir daqui, posso remover este. Mas está dentro de nossos componentes, então podemos simplesmente usar este. Agora, aqui posso arrastar esses componentes e depois posso colá-lo aqui. Então este é o nosso componente e aqui posso colá-lo. Aqui vamos nós. Então, temos esse ícone aqui. E aqui vamos nós. Para o ícone, posso aumentar o branco novamente em 4545, posso adicionar 35. Então, se eu vou aumentar a doença e vai parecer muito ruim, ok, agora parece muito bom. Acho que não precisamos ter isso dessa maneira porque vamos adicionar mais alguns itens aqui para que possamos ter nossa horizontal é chamada View. Então, vou remover este aqui. E na próxima parte adicionaremos mais itens aqui e, em seguida, adicionaremos o cálculo horizontal. Então vou parar este vídeo aqui e continuaremos com a próxima palestra. Vejo você na próxima palestra. Tchau. 12. Cartão de feedback e vista de rolagem horizontal: Bem-vindo de volta mais uma vez. Nesta parte, terminaremos nossa seção de feedback. Então, antes de tudo, precisamos duplicar este para que possamos adicionar mais alguns. E então podemos adicionar nossa rolagem horizontal alguns. Para isso, em primeiro lugar, precisamos fazer, torná-lo um grupo. Portanto, temos essa opção aqui, então precisamos clicar nesta ONG primeiro. Então aqui temos esse retângulo oito, e então temos esse texto. Então temos essas grandes células. Então temos John Doe neste ícone. Isso significa que daqui ao retângulo oito, tudo isso em nosso carrinho. Então eu vou pressionar Control e depois vou selecionar todos esses. E aqui vamos nós. Agora eu posso fazer dele um grupo. Então, o Comando Z e eu podemos alterar o nome do grupo apenas para entender. Então podemos dizer, podemos dizer, vou dar feedback do carrinho e agora clicar em Enter. Agora posso clicar nesta grade de repetição. Então clique nesta grade de repetição. Agora podemos torná-lo uma duplicata. Você pode ver que podemos torná-lo duplicado. O primeiro e acima de tudo, eu queria ter um pouco de espaço entre essas duas coisas ou podemos agarrar. Certo, então primeiro eu só não quero que isso aconteça. Então, a coisa é interrompida sem uma rolagem. Só não quero que ele mostre para ganhar é que eu não chamo isso. Vamos mostrar a eles onde parar o carro. Então, talvez tenhamos para feedback, agora podemos chamá-lo, agora podemos duplicá-lo no início da prancheta de domínio. Você pode ver este. Temos este aqui, então temos 1234. Agora. Aqui você pode ver esses são os dois ícones. Uma é para a visualização de rolagem horizontal, uma é para a visualização de rolagem vertical. Então, para isso, precisamos ter um pergaminho horizontal. Scopy horizontalmente significa na horizontal. Agora, se eu clicar neste, ele vai se ajustar com o tamanho da prancheta do domínio. E agora poderemos ver que esse ícone tem API. Então este é o ícone ou seja, isso é por causa do que o selecionamos para visualização de rolagem horizontal e um NTD mostrando que, a partir disso, ele vai ficar aqui. E depois disso, ele vai mostrar rolagem. Então, deixe-me executar este. Agora. Se eu executá-lo, agora se eu rolar para baixo, poderemos ver nossos comentários aqui. Então, temos esta seção de feedback aqui e agora, então aqui está. Ainda assim, você pode ver um pouco disso. Agora, o que posso fazer? Eu posso simplesmente rolá-lo dessa maneira. Não há problema algum. E outra coisa é que precisamos consertá-lo aqui. Então, se estivermos na página inicial, temos essa opção aqui. Você pode ver este, precisamos remover isso e podemos ver que ainda é um pouco de cada prata que podemos fazer podemos simplesmente removê-lo. Acho que estes ou podemos removê-lo. Ou podemos simplesmente aumentar o deixe-me ver se ele resolveu agora. Ainda assim, podemos ver este. Certo, então primeiro eu preciso desmarcar essa visualização de rolagem porque é para esse espaço, não para a escolaridade. Então, precisamos adicionar um pouco mais de espaço. E, em seguida, podemos selecionar essa visualização de rolagem. Agora, se eu executá-lo, devemos ser capazes de ver este aqui. Podemos ver agora que podemos vê-lo deste lado. Então, outra coisa é perceptível aqui. Talvez por isso, agora possamos rolar para que pareça muito bom. E agora podemos adicionar mais coisas aqui. Deixe-me verificar se compramos um não, não temos motor aqui. Por aqui. Precisamos adicionar um ícone para que o usuário possa entender isso. E no lado direito, temos mais algumas coisas para fazer. Então, o que posso fazer? Posso simplesmente levar para casa a saúde dessas ferramentas de elipse. E no meio, posso simplesmente adicionar um círculo aqui. E deve ser do mesmo tamanho para que 55 por 55. Aqui vai ele. E agora neste temos esse ícone. Você pode clicar neste ícone do iOS. Então podemos simplesmente colocá-lo no centro. Posso colocá-lo no centro. Neste momento, parece muito bom, mas podemos torná-los um grupo para que possamos duplicar e fazer novamente, fazê-lo novamente nesta elipse e nesta seta. Vou pressionar Control e então podemos fazer deles um grupo primeiro e depois podemos duplicar o comando D. E aqui vai você. Não podemos, mas precisamos ter um ícone diferente para este, mas podemos manter o, mas deixe-me ajustar a perna de altura na mesma linha. Ok, então agora está na mesma luz, está na mesma linha. Está na mesma linha, eu acho. Perfeito, mas vamos mudar o ícone deste, então não precisamos ter esse ícone aqui para isso. O que podemos fazer? Podemos remover esse ícone daqui. Vamos excluir esse ícone daqui. Mas não está funcionando. Desculpe, precisamos apenas remover o ícone. Agora ele foi removido. Então selecione o ícone e pressione Excluir. Então precisamos adicionar a outro ícone para o lado esquerdo novamente. Então, em vez de avançar, podemos acrescentar, podemos começar lá para trás. Podemos dizer que B está buscando para trás, e temos esse par de ícones aqui. Mas devemos pegar o mesmo ícone que pegamos. Felizmente, temos este aqui. Posso selecionar este aqui, e então posso deixá-lo lá. E, novamente, novamente, o mesmo problema. Portanto, esse é o ícone. Deixe-me removê-lo rapidamente e , em seguida, selecione este. E, novamente, adicione este aqui. Vou torná-lo um componente que possamos acessar facilmente este. Agora posso arrastar esse ícone aqui. Não precisamos ter este a partir daí, mas podemos simplesmente arrastar esse ícone aqui. E não está no centro. Então, primeiro deixe-me remover este. Vou remover este ícone primeiro e depois podemos simplesmente arrastar este no centro. Perfeito, agora deixe-me executá-lo, como parece. Devemos ser capazes de ver esse pequeno ícone. Agora, se eu rolar para baixo , podemos simplesmente ver esse feedback e é assim que ele se parece. E ela tem essa opção agora, podemos simplesmente rolar dessa maneira. Então está tudo bem aqui, não há problema algum. E então a próxima parte vamos adicionar nosso, o que vou acrescentar. Então, agora vamos adicionar, simplesmente adicionaremos um formulário de contato aqui. Vou parar este vídeo aqui e continuaremos com o próximo vídeo. E antes disso, acho que não está no centro. Está na edição central ajustada com esta. A coisa é que ainda podemos, ok, para que possamos adicionar este aqui e, em seguida, podemos simplesmente arrastar este para o centro. Ele diz que mostra que é interesse dentro do centro, mas ainda podemos, esse ícone não é uma pode simplesmente selecionar esse ícone. Agora. Agora parece que está no centro, mas tem que ser movido dessa maneira. Podemos mantê-lo dessa maneira, mas o problema é que podemos adicionar nossa caixa. Podemos adicionar uma sombra aqui. Podemos adicionar uma sombra para este. Talvez possamos adicionar dez por dez para este. E para este também podemos adicionar, ele é selecionado automaticamente na sombra porque nós, novamente, tudo não está aqui, então podemos adicionar dez por dez. Às dez por dez. Aqui vamos nós. Tudo bem, tão perfeito. Como vou parar este vídeo aqui e continuaremos a partir da próxima palestra. 13. Contatar o campo de entrada e botão: Bem-vindo de volta mais uma vez. Nesta parte, projetaremos nosso formulário de contato. Para fazer isso rápido, precisamos aumentar o tamanho, aumentar os otimistas de altura da prancha de arte principal e, em seguida, assim por diante. Isso para o formulário de contato, não quero adicionar nenhuma cor de fundo. Usaremos esse tipo de cor de fundo tão rápido. Precisamos me deixar o acaso. Eles vão colocar alguns primeiro e, em seguida, podemos pegar o componente de texto que tínhamos aqui anteriormente. Você pode ver que essa é a vantagem de fazer o componente de saída se você for duplicar a mesma coisa repetidas vezes. Então, em vez de Educação, agora, vou escrever aqui contato. Agora precisamos nos ajustar nesta linha aqui. Agora conduza e ferramentas feedback Deck execute, está tudo bem. E agora, depois disso, precisamos adicionar um retângulo aqui. O problema é que eu posso adicionar este daqui, a partir disso a isso. Acho que adicionamos o mesmo. Acho que adicionamos o mesmo para todos esses. Porque temos duas colunas, uma coluna da esquerda e uma coluna do lado direito. Agora primeiro vou adicionar nosso raio 26 moderno, e podemos adicionar uma sombra aqui. Então adicione sombra por 30, por 30, e podemos remover o tamanho da borda. Não precisamos ter o tamanho da borda aqui. E agora aqui, teremos que adicionar três campos de entrada. É para nome, um é para e-mail e outro é para caixa de mensagem. Então, podemos começar a partir daqui. Vou desenhar esse retângulo primeiro. Vou desenhar aqui. Aqui. Não precisamos ter essa quantidade de espaço para essa caixa de texto. Podemos adicioná-lo desta forma. Então podemos adicionar apenas este daqui, eu acho, a partir do final desta para esta coluna. Ok, então agora precisamos adicionar um pouco de raio de água aqui. Então, em D e, em seguida, dentro deste, podemos editar o texto. Podemos dizer, podemos dizer o nome, então podemos adicionar ponto duplo. Mas o tamanho da fazenda não deve ser assim. Deve ser 20, um pouco maior, talvez 25. Em seguida, podemos alterar a fonte, a família de fontes. Podemos adicionar qualquer outro o que quisermos ter. Talvez isso ou isso. Deixe-me ver como parece. Então podemos adicioná-lo aqui. Feedback. Após esse feedback, temos este contrato, ok, então os tamanhos mordem muito beaker, quero dizer o tamanho do campo de entrada. Assim, podemos mudar, podemos mudar a altura deste. Precisamos primeiro clicar na ferramenta Selecionar para que possamos selecioná-la. E então podemos simplesmente minimizar a altura, talvez 70. Então precisamos ajustar o texto no centro. Está no centro. Agora podemos torná-lo um grupo e depois podemos duplicá-lo primeiro. Então o problema é que precisamos clicar aqui e, em seguida, precisamos clicar no nome e no retângulo que temos aqui. Então esse nome e esse retângulo e, em seguida, torná-lo um grupo. Então pressione Comando D e vou alterar o nome do grupo2. Podemos dizer campo de entrada. E então eu posso ajudar o estúpido, ótimo, e posso simplesmente duplicá-lo silício adicionar um T1 é para e-mail, um é para o número de telefone. E eu posso ocupar algum espaço entre este. E então eu vou clicar nesta grade de desagrupamento. Então podemos mudar o nome. Então, o segundo será e-mail. Podemos adicionar e-mail aqui, adicionar t dot. E então, para o último, podemos adicionar número de telefone. Você pode adicionar para o número. Agora. Então, daqui para aqui, precisamos ter uma caixa de entrada ou adulto para nossa opção de mensagem. Podemos novamente ajudar este retângulo e daqui ou talvez do medial. Vamos ajustá-lo mais tarde. Não há problema. Então, primeiro vou desenhar este dessa maneira. Acho que daqui podemos pegar ou podemos, acho que esse valor está bem. E agora podemos simplesmente adicionar um raio fronteiriço a 20. Deixe-me ver como parece, mas podemos vê-lo dessa maneira, mas é a altura e o peso não é ajustado. Acho que é. Certo. É. Certo. Certo, perfeito. Agora precisamos adicionar nosso texto aqui. Deixe-me contornar este para que possamos vê-lo. Aqui está você. Portanto, temos este formulário de contato aqui. Mas o problema é que temos um espaço muito grande daqui para aqui para que possamos consertá-lo. Outra coisa é que aqui vamos escrever texto e, em seguida, aqui poderemos adicionar um botão. Para fazer isso. Nós podemos ter. Então, primeiro deixe-me adicionar o texto aqui. Vou adicionar o texto no centro, e vou dizer suas mensagens. Podemos adicionar este aqui e garantir que seja incentivos. Então, como você vai defini-lo no centro, você pode ver que ele vai nos dar nossa linha. Podemos simplesmente estar no centro, mas deve estar no lado esquerdo. Perfeito. Não, não está aqui nisso. Agora, depois disso, podemos ter essa opção de retângulo inferior. Clique neste retângulo e, em seguida, podemos simplesmente, o que podemos fazer? Podemos sair, podemos pegar essas quatro colunas para criar nosso fundo. Quero dizer, essas quatro colunas e depois mediais. E então podemos sair para, podemos sair para formar o lado esquerdo e dois do lado direito. Podemos adicionar um pouco deste n. Para este, acho que podemos adicionar nosso design exclusivo para este. Vamos ver. Podemos adicionar um tipo diferente de diferentes tipos de borda para cantos diferentes. Então vamos dizer a Parte D para este, depois para este, e depois 64 este, e depois 55 para este. Ok, então se eu clicar aqui, acho que devemos ver nossas massas aqui. Posso ver o raio do canto superior esquerdo. raio do canto superior esquerdo está atrasado. Vamos fazer 60. Vamos fazer isso 80. Este faz com que seja 2520. Agora, este faz 80 porque cada célula, canto inferior direito escrevendo, eu acho que é inferior direito. Deixe-me levá-lo. Não aparecendo agora. Ele deve nos mostrar. Você pode ver o raio do canto inferior direito. Isso significa que este deve ter o mesmo tamanho. Agora podemos ajustar este. Solver da sorte, digamos novo design, apenas para mostrar como você pode usar um tipo diferente de canto se precisar usar? E acho que agora não precisamos ter essa visão em camadas. Podemos remover essa exibição de layout agora. Então, podemos adicionar apenas a cor. Acho que podemos usar essa cor, gosto dessa cor, então vou clicar nessa cor e, em seguida, podemos simplesmente adicionar essa cor aqui para que possamos usá-la. Agora clique neste botão e, em seguida, clique aqui e, em seguida, clique nesta cor. Aqui vamos nós. Temos essa cor. Aqui. Ainda assim, podemos adicionar um pouco mais de gradiente linear. Podemos simplesmente ajustar este dessa maneira. Podemos adicionar um texto e um ícone aqui para adicionar um texto aqui. Vou clicar nele. Podemos dizer centavo, e então aqui chamamos, e então podemos adicionar um ícone. E você tem esse ícone aqui. Precisamos adicionar. Podemos adicionar nosso ícone aqui, podemos dizer ícone de Sant. Então podemos pegar este aqui. Onde temos de novo, nós o colocamos no topo para que possamos arrastá-lo para cá. E então eu vou criar componentes de TI para que possamos usá-lo com facilidade, criar um componente. E então vou movê-lo daqui. E então podemos usá-lo a partir daqui. Vou rolar para baixo. E aqui temos este aqui. Podemos ter este. Então eu posso arrastar este. Aqui vamos nós. Podemos adicionar apenas neste aqui. Ok, então agora parece muito bom, mas a coisa é que não está aparecendo no centro, não na parte inferior. Devemos ajustar isso, este. Acho que podemos fazer isso agora. Parece bom. Está bom agora. Então, agora, se eu executá-lo, poderemos ver nosso formulário de contato. Agora. Podemos rolar aqui e aqui vamos nós. Este é o nosso formulário de contato, então temos o perfume, mas precisamos mudar isso ou fontes, família de fontes, eu não gosto deste para a parte inferior. E podemos dizer, este é muito melhor agora, oh, o que podemos fazer? Podemos simplesmente, a coisa é que isso vai mudar. A coisa toda vai acaso. Para este. Vou pressionar desfazer. Então eu vou, ok, então também mudou, para que possamos adicionar novamente aqui. Então o problema é que, embora tenhamos essa opção aqui, então este é o botão retângulo. Então temos esses, todos esses campos de entrada. Podemos copiar todos esses. Clique e copie tudo isso e, em seguida, faça deles um grupo. Uma vez. Se o grupo, então podemos vê-lo completamente. E só este. E vou apenas fazer um contrato que usamos do mesmo tamanho aqui. Então, vou mostrar, vou adicionar a integral da visão dessa visualização de layout. Agora podemos ver que é perfeito. É só isso com esta coluna e esta também. Agora, deixe-me executá-lo novamente para que possamos ver a saída final deste. E aqui são iguais. Temos este ícone de envio, e este é o nosso formulário de contato, tão perfeito. E temos essa origem para a visualização de rolagem aqui. Então vou parar este vídeo aqui. E em nossa próxima parte começaremos a trabalhar para o nosso carro. Vamos apenas adicionar um pouco de design no rodapé. Então, continuaremos a partir da próxima palestra. Vejo você na próxima palestra. Tchau. 14. Design completo de seção de rodapés.: Bem-vindo de volta mais uma vez. Nesta parte, vamos projetar nossa seção de rodapé. Então, para adicionar uma seção de rodapé, teremos que desenhá-la no rodapé e na última parte, mas temos todos os tamanhos maiores, então vou remover esse tamanho da prancheta principal. Acho que essa quantidade de espaço está bem para o rodapé. Agora vou desenhar nosso retângulo aqui. Vamos apenas adicionar um rodapé básico. Antes disso, acho que podemos. Agora podemos simplesmente desenhar nossa seção de rodapé aqui. Vamos apenas adicionar algum ícone aqui porque não precisamos ter mais coisas em massa em nosso projeto de portfólio. Agora, o que podemos fazer? Podemos clicar neste, e aqui podemos adicionar cor de fundo. Podemos adicionar nossa cor de fundo, acho que esta luz uma e depois outra , a laranja. E então podemos clicar neste gradiente linear. Podemos arredondar este. Tudo bem, este aqui. Então aqui eu só queria adicionar alguns ícones, talvez alguns ícones de mídia social, Facebook, instagram ou Twitter. Então, vou clicar neste 1 primeiro. Antes disso, deixe-me verificar se temos um espaço muito grande no meio. O resíduo vai ser difícil alterá-lo depois disso, o formulário de contato e este, está tudo bem. Então, vamos adicionar alguns ícones aqui. Ainda podemos, podemos, podemos simplesmente mudar este. Podemos ajustar este. E também vou remover a altura um pouco mais para me ajustar com esta e não precisamos de uma quantidade decente de espaço. Você também pode diminuir esse espaço. E agora, para adicionar um ícone aqui, ok, então a única coisa que podemos fazer é habilitar a seção de layout para que possamos ver de onde podemos adicionar nosso alelo. Então, temos este. A partir daqui. Estamos trabalhando. Podemos fazer uma coisa, então 34, e então podemos levantar Aquaphor, e depois temos outros quatro. Assim, a partir deste terceiro, podemos deixar a queda e, desse lado, podemos sair para, então podemos trabalhar nesses dois lados, nesta coluna, ou talvez de colunas da indústria, assim por diante. Então podemos fazer essa coisa. Não é um grande problema aqui. Podemos pegar t e então podemos pegar três, e então teremos esses quatro. A partir daqui, podemos, em vez de trabalhar, podemos adicionar essa opção aqui. Podemos fazer isso, podemos nos mover rápido. Deixe-me mover esse alelo ou dois. Não precisa ter esse layout aqui. Aqui precisamos adicionar ter o mesmo tamanho. Haydn white vai ser 80 por 80. Aqui precisamos adicionar o ícone. Para adicionar o ícone. Vou adicioná-lo aqui para adicionar um ícone. O que posso fazer? Posso tirar a saúde desta ferramenta de ícones que podemos salvar o primeiro livro. Você pode ver que existem muitos ícones do Facebook. Assim, podemos clicar em um para este. E então eu vou, vou torná-lo componente. E então eu vou remover este porque vamos copiá-lo do componente. E depois vou adicionar nosso Instagram. Em seguida, clique em um ícone do Instagram. Vou torná-lo componente. Então eu vou removê-lo daqui. E então teremos mais um item. Teremos mais um item, talvez o Twitter. Vamos adicionar o ícone do Twitter novamente aqui. Então, vou torná-lo componente. Em seguida, selecione este e remova este. Temos o ícone C para esta seção de rodapé. Então, agora podemos editar. Agora vou abrir este componente aqui, então temos este livro um, para que eu possa deixar este aqui. Posso ajustá-lo no centro. Certo, perfeito. Agora podemos adicionar, então deixe-me ver. Parece muito bom. Até que possamos fazer, podemos. Só para este, posso fazer um Oregon duplicado tomar ajuda desta grade de repetição. Obviamente, esse dano não vai duplicar o ícone do Facebook porque não o tornamos um grupo, então apenas duplicamos o ciclo. Ok, então você também pode aprender daqui. E então eu vou desagrupar este. Em seguida, posso adicionar essa opção do Twitter aqui. Então eu posso ajustá-lo no centro. Este é o centro para este, eu acho. Certo, perfeito. Está no centro e, em seguida, temos essa opção do Instagram. Então, vou copiar esses Instagram aqui. Então eu posso colocá-lo. Sinto muito. Precisamos arrastá-lo. Precisamos arrastar este aqui. Ok, então o problema é que me deixa desenhá-lo novamente aqui. Precisamos torná-lo central. Acho que está no centro. Está tudo bem aqui. E agora vou executar este e espero que possamos ver nosso rodapé corretamente e nosso feedback, esta é a nossa seção de contato e esta é a nossa seção de rodapé, então parece muito bom. Outra coisa é pensada ou eu farei, vou fazer dele um componente, aquele rodapé inteiro. Vou torná-lo um componente porque, em nossa próxima base, vamos projetar para nossa base de detalhes desta seção de projeto. Também precisaremos desse rodapé para que seja melhor torná-lo nossos componentes para que possamos reutilizá-lo. E T são iguais. Temos isso, temos esse bot. É, está contando como parte e então temos todos esses distritos. Então, temos este e os tornamos nosso grupo. Em seguida, podemos fazer o componente de TI. Você pode ver que agora é um componente. Agora, se eu for aqui, então se eu arrastá-lo aqui, então você pode ver que temos esse todo, esse time inteiro. Então podemos reutilizá-lo em nosso espaço detalhado. Essa é a beleza de torná-lo um componente. Então, o que você precisa fazer? Você só precisa criar um grupo, a coisa toda que deseja criar um componente, então simplesmente escrever fluência, então simplesmente escrever fluência mouse e, em seguida, você pode torná-lo um componente. Então, como já é um componente, então você pode dizer que estou vendo esse componente desagrupado porque já emiti o componente. Uma coisa é que, depois de torná-lo componente, você poderá ver aqui o padrão é steadies será seu componente coruja e o ícone foi alterado. Você pode ver que essa é a beleza desta. Então eu não preciso ter este aqui porque já o temos aqui e podemos copiá-lo tão inteligente quanto quisermos. Quanto tempo quisermos copiar. Está tudo bem aqui. Vou parar este vídeo aqui, e continuaremos da próxima palestra. 15. Detalhes de design de navegação em página: Bem-vindo de volta mais uma vez. Nesta parte, começaremos a trabalhar em nossa seção de detalhes do projeto. Então, quando clicar duas vezes nos detalhes desta BU, nós os enviaremos para uma nova prancheta, onde mostraremos os detalhes do projeto. Para fazer isso antes de tudo, precisamos criar, precisamos criar uma nova prancheta. Então, vou clicar neste ícone do quadro de arte aqui. Agora, em deriva esse canto, devemos ser capazes de vê-los todos na prancheta disponível no Adobe XD. Como alternativa, você também pode dividir o quadro do cliente onde você pode definir seu próprio esconderijo e branco. Mas para mim, vou esperar essa largura 1920 porque é a web 1920. Vou clicar nele. Aqui vamos nós. E nós chamamos esses novos quadros de arte. Então, primeiro vou mudar o nome deste. Posso simplesmente dizer: O que posso dizer? Posso simplesmente dizer detalhes do espaço. Para este, posso selecionar. Posso dizer, posso dizer a peça principal, posso dizer, ou podemos dizer homepage. Tudo bem, então agora aqui, se você olhar para aqui que podemos ver que temos esse tipo de calor aqui fora com isso Tudo isso é opção de navegação aqui, mas aqui vamos adicionar nosso tipo diferente de coisa. Para isso, vou definir uma nova barra de navegação aqui. Então eu posso simplesmente definir uma nova barra de navegação aqui. Aqui está você. Então eu vou remover essa borda. Não precisamos ter nenhuma fronteira. O que precisamos fazer? Precisamos pegar a mesma cor que temos aqui. Então eu vou, acho que já temos essa cor. Então eu acho que essa é a cor que todos nós temos que você já tem. Ok, então esta é da mesma cor. Agora, vou selecionar essa nova barra de navegação e clicar nesta paleta de cores. E então eu vou selecionar este para que tenhamos a mesma cor. Aqui temos um texto que será qualquer. Aqui vou escrever este. Podemos dizer que eles formam isso deve ser 50, apenas 11, então precisamos adicionar 50. Deixe-me verificar quais tamanhos de fonte usamos para nossos Estes são para esta barra de navegação. Acho que não é 50 talvez atrasado ou algo começou. Então eu vou dar tudo atrasado aqui e então podemos colocá-lo no centro. Para isso, para tudo isso , usamos 25. Ok, então vamos precisar de tudo isso. O que posso fazer? Vou acrescentar, vou morrer mais alguns nomes aqui. Então, podemos simplesmente dizer toma nível e, em seguida, podemos adicionar. Vamos começar de volta aqui. Podemos dizer, precisamos alterar o tamanho da fonte para 25. Aqui vamos nós. Então podemos simplesmente que podemos, este é o centro. Você pode ver isso Vinte e sete, Vinte e sete. E então podemos clicar nesta grade de repetição. E aqui podemos adicionar. Temos algumas opções aqui. Eu não faço muito mais. Temos apenas poucos. Temos apenas dois a seis, então temos apenas seis opções aqui. O que posso fazer aqui? Podemos fazer um pouco de espaço aqui. Então, podemos remover alguns desses. Precisamos ter três, talvez t. Então eu vou clicar no Ungroup. E então o segundo será educação. Podemos dizer educação. E então podemos dizer, então temos esse projeto offshore e podemos dizer projeto. E então, para este, podemos dizer habilidades. Vamos dizer as habilidades, habilidades da Debbie e, em seguida, temos ferramentas e depois conduzimos ferramentas. E então temos contato. Precisamos adicionar contato. Este é o item de navegação que temos, mas precisamos tê-lo no mesmo espaço. Assim, podemos ocupar espaço dessa maneira, podemos, agora podemos arrastá-lo e então podemos levá-lo desta forma. Podemos, temos 59, temos este 59. Você pode ver o primeiro e o segundo supõe 59, e então este vai adicionar, podemos arrastá-lo para 59. Para este, ainda podemos adicionar 59. E então, para este, ainda podemos adicionar 59. E está na mesma linha. E teremos que adicionar mais um prato aqui. Outra coisa é que teremos dois genes dessa cor, mas faremos isso antes disso. Ok, então agora se eu for aqui e então eu posso simplesmente selecionar todos os itens que criamos. Então selecione todo o item, selecione todo o item aqui. E então eu posso simplesmente mudar a cor para branco. Você pode ver que a cor foi alterada para branco, mas não deve ser essa cor branca. Perfeito. Agora, só precisamos adicionar um sublinhado aqui e clicar nisso na ferramenta Blend, a ferramenta de linha aqui. E então podemos alterar o tamanho da ferramenta de linha. Talvez. Precisamos ajustá-lo no centro. Precisamos ajustá-lo no centro, no centro deste texto. E então podemos aumentar o tamanho deste e simplesmente alterar a cor da borda para adicionar uma cor diferente aqui. Certo, perfeito. Por isso, projetamos nosso novo espaço digital e barra de irrigação. E agora, quando você clica neste espaço de detalhes, onde você os enviará aqui. Mas o problema é que nós, em nossos pares de detalhes, o que temos em nossos pares de detalhes que temos, deixe-me ver o que temos. Portanto, temos emus e temos uma descrição detalhada e adicionaremos mais algumas coisas. Então, os e-mails que vamos mostrar em cima deste, então você sente falta, eu vou adicionar as unidades para toda essa área. Então, vou arrastar um emus de lá. Posso dizer este MS. aqui. Onde está DC Sra. Ok, então não está aqui. Faça uma coisa que podemos simplesmente, pois, podemos simplesmente fazer nosso retângulo e este retângulo, podemos simplesmente colocar esses e-mails e esta é a melhor maneira para que os e-mails possam se ajustar automaticamente e podemos simplesmente arrastá-lo aqui. Você pode ver que a imagem foi ajustada com esta. E podemos simplesmente ajustar com este. Acho que podemos ter um pouco de espaço. Vou remover essa borda desta imagem. Não precisamos ter nenhuma fronteira. Agora, se eu selecionar esta peça e se eu executá-la, só poderemos ver esse espaço. Se eu executá-lo, então devemos ver nosso espaço detalhado aqui. Podemos ver que esta é a nossa imagem, então esta é nossa própria barra de navegação. Tudo está bem. Agora, o que podemos fazer? Aqui? Teremos que adicionar o título e os recursos, a descrição e o futuro deste. Resolva para isso. Em primeiro lugar, o que posso fazer? Posso habilitar a visualização de layout para que possamos, o que podemos ver a coluna, o número da coluna. Vou clicar duas vezes nele e, em seguida, clicar neste layout. Agora temos dessorção. Então, a partir daqui, eu adoraria adicionar uma nova prancheta com a visualização do cartão para que possamos adicionar nosso título e uma descrição. Em seguida, teremos nosso recurso e a tecnologia usada. Vou clicar neste quadro de arte, neste quadro não artístico nesta ferramenta retangular. E a partir daqui, a partir daqui posso acrescentar, podemos desenhar nosso novo retângulo. Podemos desenhar nosso retângulo aqui. E aqui. Primeiro vou adicionar um pouco de ideias de água que não precisemos ter nada OK, OK. Podemos adicionar uma sombra primeiro para adicionar sombra 20 por 20. Agora remova a borda. Aqui podemos adicionar nosso título e, em seguida, podemos adicionar nossa descrição para editar o título. Podemos simplesmente começar a adicionar o título daqui. Então podemos. Mas precisamos alterá-lo para bloquear o texto. Enquanto o texto. Primeiro, deixe-me selecionar este antes. Acho que não precisamos ter essa visualização de layout agora, podemos simplesmente remover esta e depois podemos adicioná-la. Então o problema é que o fundo é branco e há uma razão pela qual não podemos ver essa forma aqui. Então, aqui em nossa página inicial, usamos dois planos de fundo diferentes para esse layout. Então a cor está nessa cor, então eu vou conseguir, vou dizer essa cor aqui, e então eu vou aqui para esta, para a esfera digital. Então vou selecionar este. Agora podemos ver, podemos ver, podemos ver este aqui. Então, aqui vamos adicionar nosso título. Então talvez daqui possamos adicionar um título e uma descrição disso. Então, primeiro deixe-me mudar a cor para preto. Então, precisamos mudá-lo para preto. Clique nesta paleta de cores. Não selecionado. Agora, podemos mudar a cor para preto. Ok, então podemos adicionar nosso título aqui. Vou fazer MOOC este e vou copiar alguns carrapatos fictícios de Loren Ipsum. Podemos simplesmente copiar alguns textos daqui. Vou copiar daqui para aqui. Vou copiar este. E vou abrir este Adobe XD. E essas são as ferramentas de texto. E eu vou colá-lo aqui. Então podemos, podemos adicionar o tamanho da fonte deste arrumado um pouco maior. Mais rápido precisa selecionar o formado para o texto e adicionar esse tamanho de formulário. E depois vou remover alguns textos porque não precisamos ter muito texto aqui. Posso mover alguns textos aqui. Certo, perfeito. Então agora isso será capaz de título e, em seguida, podemos adicionar o estilo de fonte para este título. Podemos dizer, podemos usar essa cor, podemos usar esta. E agora vamos ter nossa breve descrição desse projeto. Para fazer isso, vou clicar novamente nesta ferramenta de texto e, em seguida, precisamos desenhar área para mostrar nossa postagem de detalhes aqui. Então você pode ver que podemos simplesmente fazê-lo daqui até aqui. Aqui vamos nós. Perfeito. Agora aqui usaremos nosso, adicionaríamos nossa descrição. Vamos adicionar nossa descrição. Então podemos simplesmente colá-lo aqui. Vou alterar o tamanho do formulário aqui. Não precisamos ter 35 e podemos mudá-lo para 25. Há oito, e este é o nosso título e descrição n. Agora podemos ajustar este clicando aqui. Está tão ajustado agora para que possamos simplesmente diminuir o tamanho deste. Agora, se eu executar este e pudermos ter essa descrição de detalhes e, na próxima parte, adicionaremos mais alguns recursos, como tecnologia de uso de tick. Podemos usar recursos e tecnologia usados e , em seguida, mais postagens aqui. Mas faremos isso na próxima parte. E vou parar esse vídeo aqui. Continuaremos lendo a próxima palestra. 16. Detalhes de design de recursos para página: Bem-vindo de volta mais uma vez. Nesta parte, continuaremos trabalhando em nosso espaço detalhado. Portanto, este já é um quadro de arte disperso, então editamos nosso título e descrição e agora aqui podemos adicionar nosso novo campo para o nosso recurso deste projeto. Então, para adicionar esse recurso, o que vou fazer primeiro, vou habilitar essa visualização de layout para que possamos ver a coluna daqui para aqui, vamos adicionar outro, outro retângulo onde nós adicionará todos os recursos. Então, vamos inserir um novo retângulo aqui e ele será um pouco maior porque vamos adicionar mais algumas opções aqui. Para a seção do feto. Aqui você vai, podemos adicionar raio de água 20 e depois adicionar nossa sombra. Shadow vai ser 20 até 2020 e outros 20 daqui. Agora, podemos fazer, agora podemos remover isso. Podemos remover essa visualização daqui. Podemos remover essa visão de layout e também não precisamos ter esse motor aqui. Parece perfeito. Agora podemos adicionar um título aqui primeiro, então clique nas apostas. E você pode ver isso exatamente na mesma posição que podemos escrever. Aqui é preciso, podemos dizer recurso, recurso deste projeto. Talvez possamos alterar o tamanho da fonte para 45. Aqui vamos nós, perfeito. Agora podemos adicionar o mínimo. Podemos adicionar pelo menos aqui. Podemos simplesmente desenhar nosso círculo aqui a partir deste cereal da mesma linha. Ou um pequeno círculo será um ponto. E podemos adicionar 15 por 15, talvez 15 por 15. E então nós podemos, você pode arrastá-lo aqui. E então podemos mudar a cor para preto para este ponto. Este é o ponto de bala. E aqui vamos adicionar o título. Vou clicar na ferramenta sticks e adicionarei texto aqui. Talvez eu vá copiar este. Vou pressionar Command, Control C. Vamos ver se podemos copiá-lo daqui. E então podemos colá-lo aqui. Aqui vamos nós. Podemos copiar este, mas precisamos mudar de estilo. Precisamos estilo de chance, tamanho da fonte porque está decolando 45. Mas este é, acho que 25 ou 35 é 35. Acho que não são quase cinco. É 35. Certo, mas vamos adicionar 25. Podemos adicionar 25 e temos essa opção aqui. Não sei muito mais sobre esse item de dados específico. Nesse caso, podemos ver que acho que copiamos a descrição, não o título um. Essa é a razão pela qual ele está mostrando toda a área. Então, vou apenas copiar este. Melhor. Eu posso fazer isso componente para que eu possa ouvi-lo é que este texto e clique com o botão direito sobre ele. E então podemos torná-lo um componente sábio. O botão não está funcionando. Agora podemos torná-lo um componente, e ele se tornou componente e ícone foi alterado. Agora posso clicar neste e, em seguida, posso simplesmente arrastar esse componente aqui. Você pode ver agora eu posso ajustar este daqui para aqui. Certo, perfeito. Agora, o que posso fazer? Posso simplesmente fazer um grupo ou esse ponto e esses são componentes para que possamos duplicá-lo. Então essa elipse e esse componente serão um grupo. Podemos dizer comando G, pressionar Comando D e, em seguida, podemos nomear o grupo. Podemos dizer, podemos salvar, podemos dizer recurso. Você pode dizer recursos. Há bom. Agora clique neste botão de grade lipídica, e aqui vamos nós. Temos essas duas opções. Podemos fazer, podemos duplicar mais alguns tipos e em seguida, podemos adicionar baú e este. Agora, se eu executá-lo, poderemos ver nossos recursos. E aqui vamos nós. Temos essa opção de recurso, por isso concluímos com sucesso esse recurso do SHA-1. E este é nosso título e descrição, e essa é a nossa opção de recurso. Estamos mostrando nossa imagem aqui. E o que posso fazer? Acho que podemos adicionar, podemos adicionar nosso título aqui e a descrição aqui para obter mais ideias. Então, vou adicionar um título e uma descrição sobre este. Então, vou clicar nesta ferramenta de texto e depois adicionar um título aqui. Podemos dizer título. Você pode dizer título. Tudo bem, agora vou adicionar apenas este um pouco aqui. E então este um pouco feito. Agora, precisamos adicionar outro texto para descrição. Podemos dizer uma descrição. Sinto muito. Em seguida, podemos adicionar abaixo do script mostrado aqui igual. Também temos essa opção de descrição. Certo, perfeito. Assim, podemos alterar o tamanho da fonte desse título e descrição assim como a opção de recurso que usamos. Então, vou selecionar este 1245. Ok, então precisamos ajustar este porque está ocupando muito espaço. Então, vou arrastá-lo para baixo e arrastá-lo para baixo e direcionar para baixo, carregar o título um. Precisamos arrastá-lo um pouco e podemos ajustá-lo agora. Para a descrição, novamente, será 45. E aqui vamos nós. Agora temos essa descrição e título, descrição e o futuro, não se eu executar este, poderemos ver nosso título ou descrição e nossos recursos. E eu adoraria adicionar mais algumas coisas em nosso espaço detalhado. Por exemplo, definitivamente, teremos que adicionar um rodapé que já temos em nosso componente. Mas além disso, vou adicionar nossos outros projetos em outro projeto portuário uma maneira diferente para que, quando você viu que quando alguém vai aumentar o espaço de dados, ele teria acesso a outros posts, então ele pode clicar nisso. X não são projetos adultos. Faremos isso no próximo local. Vou parar este vídeo aqui. Vejo você na próxima palestra. Tchau. 17. Detalhes de design de cartão de página: Bem-vindo de volta mais uma vez. No local onde você adicionará mais algumas opções em nosso espaço detalhado. Para isso, o que podemos fazer? Em primeiro lugar, precisamos aumentar a altura dos nossos detalhes, mas a prancheta, então vou aumentar um pouco mais. E aqui vamos adicionar mais três opções de projetos aqui para que possamos levar um pouco mais. Tudo bem, então primeiro vou adicionar, vou habilitar essa visualização de layout. Então, clique neles podem não ficar entediados. E clique nesta opção de layout. Podemos ver essa visualização de layout agora daqui. Primeiro vou adicionar nosso texto aqui, aqui. Então, primeiro vou adicionar nosso texto. Podemos dizer que o texto será daqui. Porque tudo está vindo do lado. Vou adicionar aqui um texto e aqui você pode dizer, vou clicar, posso dizer mais projetos. Isso é mais projetos sexuais n, talvez eu possa adicionar um sublinhado aqui. Então, primeiro deixe-me ajustar esse texto. Podemos 45. Então, precisamos ter 45. Em seguida, podemos clicar nele. Deixe-me selecionar este. Podemos, podemos ter 45 e, em seguida, podemos clicar nele para ajustar este. E agora, depois disso, podemos ter nosso sublinhado sobre este. Podemos desenhar nossa vesícula subjacente é uma linha que vamos desenhar aqui. E vou dizer, vamos ver, deixe-me mudá-lo. Eu posso arrastá-lo para baixo e então podemos diminuir a altura para, acho que 240 a 40 velho buquê. E então podemos ajustá-lo aqui. Agora, se eu executar este, então podemos simplesmente, vamos ver, precisamos selecionar o porque não adicionamos nenhum. Você não adicionaria nenhuma opção de protótipo agora, podemos navegar até o espaço de dados. Portanto, esse é um espaço total de varejo. E aqui vamos nós, temos esse detalhe de projetos de modo. Agora, aqui vamos adicionar mais três projetos. Vamos projetá-lo em nossa defesa. Vamos definir, vamos projetar uma opção de carta aqui. Então, vou pegar a ferramenta de ângulo de objeto de ajuda, clicar neste retângulo. E então aqui, a partir daqui, podemos, podemos desenhar um guarda. Talvez daqui para aqui. Podemos arrastar, podemos desenhar este cartão aqui. Primeiro, precisamos adicionar nosso raio de borda para adicionar o que já é 20. Em seguida, a borda múltipla. Não precisamos ter a fronteira e precisamos ter uma sombra. Então, vou adicionar a sombra 20 por 20. Agora, se eu executá-lo, vamos ver o que podemos ver? E temos esse projeto aqui. Mas o problema é que está ocupando muitos espaços, então vou remover este. O que posso fazer? Posso simplesmente ajustá-lo dessa maneira. Agora não precisamos ter essa visualização de layout. Vou remover essa camada, ela terminará aqui. Podemos adicionar nossos arquivos de imagem para adicionar arquivos de imagem. Vou desenhar um retângulo aqui que essa imagem possa se ajustar facilmente com isso. E esta será nossa área de imagem. Tão rápido precisamos adicionar, temos altura, temos um amplo 636 e para este, Ok, agora temos um tom alto. Temos branco 536 e temos uma altura cinco T6. Então, vou remover a borda primeiro, e então precisamos adicionar o que for 20. E então acho que podemos ajustá-lo um pouco mais. Agora. Editar ajustado. Agora. É perfeito. O nariz não é perfeito aqui porque precisamos tê-lo exatamente no mesmo tamanho. Agora acho que está tudo bem. Agora podemos grafar nossa imagem aqui. Podemos deixar nosso MA aqui, talvez este. Temos esses e-mails aqui e podemos ver nesta imagem também tem esse raio de borda. E aqui podemos adicionar nosso título e a descrição, e podemos ter pouco texto e o canto direito. Então, agora o que podemos fazer? Podemos fazer, podemos, Já temos um componente disso. Podemos simplesmente ir até aqui, e então podemos simplesmente arrastar esse componente aqui para o título deste. Em seguida, podemos adicionar este título aqui. Antes de fazer essa equipe. Acho que vai tomar esse caminho, mas está tudo bem. E então vou clicar duas vezes nele. E então, no Medial, vou pressionar o botão Enter para que possamos chegar à linha. Parece tudo bem agora, não há problema algum. Portanto, podemos simplesmente alterar o tamanho da fonte para 35 para este título. Nós podemos. O que podemos fazer? Podemos simplesmente tomar muito do seu melhor. Você pode ajustar este ou podemos remover alguns textos. Talvez você seja movido alguns textos daqui apenas para ajustar esse 135. E agora precisamos adicionar nossa descrição aqui. Para editar a descrição, vou selecionar essa ferramenta de texto e, em seguida, vou desenhar a área de texto. Certo, então temos muito menos espaço. Então, o que posso fazer? Vou ajustar o título, o tamanho da fonte. Estude cinco para festejar. Então teremos pouco espaço. Somente. Em seguida, podemos desenhar uma área de texto. Então, vou levá-lo daqui para cá. Talvez daqui para aqui. Certo, e agora vou copiar algum texto para isso, para a descrição, temos essa opção de texto fictício aqui, e eu vou copiar este, talvez isso. Agora, posso copiar isso e colá-lo dentro dessa área de texto e depois colá-lo. E, obviamente, precisamos alterar o tamanho da fonte que ela pode ajustar com esta. O que aconteceu? Sinto muito. Então deixe-me desenhar novamente. Então, vou desenhar, arrastar, desenhar a área de texto aqui. E então eu posso colar o texto aqui. E então eu posso simplesmente mudá-lo para 30. Ok, então se for iniciado, então podemos ter este, mas vou colá-lo para 25 ou talvez beber para a descrição. Para este, podemos ter este. Podemos pegar um texto diferente, famílias de fontes diferentes para que fique bem. Agora podemos apenas anotar este saindo. Não consigo ler este. Talvez este. É. Certo. Agora posso clicar neste para me ajustar com isso. E apenas com o texto. Então é muito bom agora e aqui podemos adicionar nosso texto e podemos dizer detalhes Bu ou, alternativamente, o que podemos fazer? Podemos simplesmente, podemos simplesmente ter um botão Exibir detalhes aqui. Acho que podemos simplesmente pegar este também se você quiser. Acho que podemos pegar este. Deixe-me ver. Acho que conhecemos um grupo se não estiver errado. Então, temos esse fundo aqui. Temos esse fundo em um grupo, então vou fazer isso e duplicar. Então pressione Comando D, então eu posso duplicar este. Você pode ver que posso duplicar este. Agora. Aqui vai você novamente, basta colocá-lo aqui. O que aconteceu? Não está aparecendo aqui. Deixe-me duplicar este, Comando D, e então eu posso arrastá-lo para cá. O problema é que não podemos arrastá-lo diretamente para cá porque está em um quadro de arte diferente. E eu vou essas coisas estão disponíveis dentro desses impostos da prancheta. Este aqui. O que eu teria que fazer, só terei que me ajustar. Vou ter que torná-lo um componente para que eu possa reutilizá-lo. Mas não é visível aqui. Se eu clicar neste, ele não está aparecendo aqui porque já editamos este aqui. Deixe-me remover este rápido. Essa coisa eu vou remover daqui. Então deixe-me ver se temos mais aqui. E este é o fundo principal. Então, vou fazer dele um componente, pode ser componente. Então, essa coisa toda vai estar nesse componente. Agora, podemos simplesmente arrastá-lo aqui. E desta vez vai funcionar. Mais uma vez. Não é. Eu acho que está funcionando, mas o problema é que um momento, podemos simplesmente, podemos simplesmente nossos genes, o pano de fundo deste. Agora, se eu executá-lo, devemos ser capazes de ver este aqui. Agora está tudo bem, não há problema algum. Agora, o que podemos fazer aqui? Isso é o que temos aqui. Então, precisamos torná-lo componente, então, precisamos torná-lo um componente. Então podemos reutilizar neste aqui. Agora está dentro deste. Precisamos adicionar mais alguns aqui? Para fazer isso? Podemos fazer, podemos torná-los um grupo e, em seguida, podemos usar essa grade de repetição para adicionar essa seção de grade de repetição. O que podemos fazer? Podemos simplesmente receber todos esses itens em um grupo. Essas são as poucas coisas que temos aqui. Temos essas células grandes. Temos esse botão componente e este eu acho, acho que daqui temos tudo. Então, vou selecionar todos esses. E agora podemos torná-los um grupo. Agora clique na grade distribuída. Podemos adicionar novamente, duplicá-lo. Acho que podemos duplicá-lo três vezes, mas não podemos duplicá-lo três vezes. Você pode duplicá-lo duas vezes porque ele estará fora deste principal. O que podemos fazer? Podemos simplesmente criar um espaço nele. Podemos fazer o que podemos fazer? Podemos nos misturar para escrever aqui. Podemos no fundo. Deixe-me ver se podemos levar c aqui. Então acho que podemos cavar mais um. Podemos pegar T aqui, e se diminuirmos o espaço, então podemos pegar C. E então deixe-me executá-lo. E vamos ver. Aqui. Temos esses detalhes espaço aqui. E meu computador não está funcionando corretamente. Não é. Deixe-me ler e este. Agora, se eu clicar neste botão Executar, temos esses detalhes. Ok, então é selecionada a página inicial para adultos. Agora, se eu clicar nele, podemos ver nossa peça de detalhes aqui você viu nosso recurso, aqui estão nossos projetos. Eu posso, eu acho que é tão bom que podemos pegar T ou se você quiser, podemos levar mais alguns no fundo também. Poucos mais na parte inferior também. Você pode pegar três daqui, sem problema, metal e podemos tirar mais três na parte inferior. E já temos essa opção aqui, então podemos simplesmente drogar ou dirigir. Não precisamos ter massa mais aqui porque temos apenas três projetos na página inicial. Então agora vou mudar o meio deste. Então, vou selecionar diferente nisso. Vamos selecionar este aqui. Então precisamos substituir este também. Então eu posso selecionar este aqui. Perfeito. Então, temos essa opção aqui e na próxima parte adicionaremos nossa seção de rodapé, ou acho que posso adicioná-la nesta parte porque já temos essa nos componentes. Então, primeiro vou remover, vou diminuir a altura dessa saída principal. E então eu posso simplesmente pegar isso. Posso simplesmente pegar este rodapé porque todos vivemos mais felizes do que nosso componente. Agora, eu posso ajustar este. Acho que não precisamos ter muito mais espaço para que possamos remover mais pouco espaço daqui porque já é um tamanho maior. Aqui vamos nós. Perfeito. Agora, se eu clicar neste post de valas, estamos na página inicial agora, então vou selecionar esse espaço de detalhes. Posso ter essa opção aqui. Podemos ver que temos tudo isso, temos mais projetos sexuais, e então temos esse rodapé ajustado. E uma coisa que posso fazer aqui, posso simplesmente diminuir o tamanho deste porque é muito grande. Tamanho maior. Não precisamos ter esse tamanho maior. E deixe-me primeiro verificar como parece sem um menor, se diminuirmos o acho que parece muito bom e podemos removê-lo, podemos ajustá-lo neste vaso, a altura larga é quatro ou 55. Vou selecionar esses 455. Este também, para este, também selecione 455. Perfeito. Agora podemos ajustá-lo para ouvir. Talvez não faça um. E este também vai estar neste vinte e um noventa, um noventa. Agora parece muito bom. Acho que. Perfeito. Parece muito bom. Tudo é o mesmo aqui, não há problema algum. E temos essa opção de detalhes da BU. Temos esse recurso do Sean e temos nosso rodapé. Então, tudo está feito. No próximo local, trabalharemos em nossa prototipagem. Então vejo você na próxima palestra. Adeus. 18. Protótipo com animação: Bem-vindo de volta. Mais uma vez. Nesta parte, concluiremos nosso projeto e adicionaremos nossa prototipagem. Então, basicamente, temos apenas duas placas de arte na saída principal. Temos toda a nossa aplicação e, em nosso espaço detalhado, temos os detalhes do projeto que estávamos mostrando em nossa página inicial. Então, primeiro deixe-me executar a página inicial. Esta é nossa página inicial. Temos um design muito bom. Temos nossos objetos portadores ou educação, seção de projeto mostrado por sexo. E nossas habilidades tecnológicas são ferramentas. E o feedback e o feedback que recebemos mostrando essa visualização de rolagem. E então também temos nosso formulário de contato. Então temos nosso tempo integral. Agora o problema é que quando nosso usuário clicar neste botão Exibir detalhes, nós os enviaremos para o espaço digital. Mas agora, se eu clicar aqui, nada vai acontecer. Isso significa que não contamos existe nosso espaço digital. Para isso, precisamos adicionar prototipagem. Então, agora a questão é que como podemos fazer isso? Portanto, é uma maneira muito fácil. Nada para já só precisa sombrio algumas vezes. Agora, além disso, você pode ver que existe uma opção chamada protótipo. Você pode simplesmente clicar neste protótipo. Então, se você estiver neste protótipo morte, então no canto direito, você terá algumas opções. Então, basicamente, teremos que trabalhar nisso. O primeiro é o gatilho. Esse gatilho significa que tipo de prototipagem queremos ter. Por isso, tem algumas opções. Primeiro, precisamos selecionar um item de onde podemos fazer essas coisas. Então, primeiro, vou clicar nesta primeira opção, que será esse efeito de detalhes da visualização. Clique neste Exibir detalhes aqui. Agora, se eu clicar quando você quiser, se você estiver em um protótipo ou protetor, então, quando você selecionar qualquer um dos itens, então você só vai te dar um botão daqui. A partir daqui você pode adicionar prototipagem. Agora, se eu selecionar este e então eu puder acessá-los e você poderá ver profundidade, arrastar teclas e gamepad e voz. Então, há tantas coisas a ver com isso. Mas para nós, vamos usar essa opção de etapa para que, quando você clicar nisso, nós os enviaremos loci. Então, vou pular este passo. E então, sob essas ações temos diferentes tipos de opções de animação. Então, o primeiro é digitado. Temos sobreposição de animação automática de transição. Sobreposição significa que se você quiser mostrar algum tipo de muito, então é legal para a reprodução de áudio anterior da prancheta, velocidade de reprodução e essas coisas também estão disponíveis aqui. Então, normalmente, teremos que usar a maior parte do tempo com a transição. Então, vou selecioná-los na transição. Temos o destino. Então agora temos duas opções. Ou podemos clicar diretamente neste e, em seguida, podemos arrastá-lo para o nosso espaço de detalhes. Então, ele vai se conectar dessa maneira. Vou arrastar este. E você pode ver que ele se conectou automaticamente ao espaço de detalhes. Então podemos ver que este é o espaço de detalhes que temos aqui. Agora temos essa opção, então também temos os loops. Ok, então outra coisa que agora está visível, a estatística, nós temos isso, temos outro fundo aqui. Certo, sinto muito. Que não percebemos quando fizemos isso porque copiamos várias vezes. Ok, então isso é o que teremos que consertar. Faremos isso mais tarde. Agora, quando você clicar nele. Então, no, no destino, você terá essa opção para adicionar. Então, quando você clica nele. Portanto, nosso destino é esse espaço detalhado. E aqui temos o slide de animação à esquerda, borda deslizante, para que possamos clicar no trenó à direita. E então temos fácil e fácil na Louisiana, outro tipo para que possamos selecionar Fácil o suficiente. E esta é a duração, 0,6 segundos. Agora, se eu executar este, agora se eu voltar para este, se eu clicar em negação, podemos ver que esse símbolo de mão quando estamos neste botão Detalhes da vista, mas aqui nada vai acontecer. Então, se eu vou clicar nele, vamos ver nosso espaço de detalhes. Aqui vamos nós. Temos nosso espaço de detalhes. E então temos essa opção aqui. O botão está visível aqui. Acho que quando copiamos esta cópia duplicada, aprendemos a fazer essa prototipagem aqui, mas esse botão está aqui de alguma forma. Você verifica este aqui. Acho que este é o botão do qual estamos falando. Agora vou remover esse botão daqui. Vou excluir esse botão daqui. Posso excluí-lo. Ok, então agora tem, mais você pode ver que agora não temos mais nenhum botão . Está tudo bem. Então, quando copiamos do componente, duplicamos mais uma vez, acho eu, mas não percebi. Agora, se eu executá-lo novamente, esta é a nossa página inicial. Agora, se eu clicar neste View Details, estamos neste espaço detalhado e está demorando um pouco mais porque eu selecionei isso. Prazo. Agora, a partir daqui não podemos voltar à nossa página inicial. Então, o que podemos fazer quando estamos no espaço de dados, temos este botão Home. Então, a partir daqui, podemos voltar à nossa página inicial. Para fazer isso o que precisamos fazer, precisamos seguir o mesmo processo. Então, primeiro deixe-me, ok, então agora deixe-me arriscar a duração 0,6 a 0,2 e a padrão. E você também pode selecionar diferentes tipos de coisas aqui, como no topo, a partir do topo, vou clicar nele. Estamos no espaço digital. Agora. Em vez de deslizar certo? Você pode dizer deslizar para baixo também. Se eu clicar no primeiro slide para baixo, ele sairá de cima e depois vai cair. Você pode ver o clique e ele vem do topo. Mas é melhor ter este para selecionar o certo. E só precisamos, precisamos ter isso fácil. Não precisamos adicionar facilidade de entrada e saída fáceis. E podemos clicar agora. Temos esse espaço reduzido. Agora precisamos adicionar mais um protótipo desta casa. Então, quando você clica duas vezes nesta casa, agora há duas coisas que podemos fazer com isso. 11 é que podemos selecionar Prancheta anterior. Podemos ver que nossa transição será Prancheta anterior. Isso significa que de onde viemos, então viemos da página inicial para o espaço digital. Então, ele vai ajustar automaticamente o espaço de detalhes. Mas o problema é que, às vezes, se você estivesse na página inicial ou se estiver em qualquer outro lugar, mas se você quiser, digamos que você tenha 5678 páginas. Mas se você estiver o tempo todo, se você estivesse usando essas Prancheta Anterior, então você só existirá a saída anterior, talvez da página inicial para você se mudar para a peça de educação, então pares de educação para o projeto. Agora, se você quiser voltar para a página inicial a partir do projeto, então você não poderá fazer é dividir a prancheta anterior porque você foi para o projeto, baseado em projetos da educação fase, você só tem permissão para mover para a pasta de integração, não para a página inicial. Há um motivo. Então deixe-me mostrar-lhe ainda, vou mostrar que você clique neste anterior a bordo. Agora podemos ver este. Agora, se eu, agora, se eu executar diretamente esse espaço de dígitos e se eu clicar aqui, então ainda posso ir para a página inicial porque eu não vim para o vir da página inicial desta vez. Definitivamente executo esses detalhes, mas essa é a razão pela qual não está funcionando. Agora, se eu selecionar esta página inicial rapidamente e se eu voltar ao espaço de detalhes daqui e clicar neste, estamos no teste t, mas agora, se eu clicar em Homepage, então estamos no homebased agora podemos fazê-lo. Ok, então esse é o significado do sistema de prancheta anterior, mas é sempre melhor adicionar este. Então, em vez de adicionar prancheta anterior, selecione a transição e escolha uma saída. Então, estamos no espaço de detalhes, vamos para a página inicial. Mais uma vez. Isso dependerá do projeto em que você está trabalhando. Então você só precisa saber como as coisas vão funcionar no Adobe XD e, em seguida, você pode usá-lo em seu design. Agora clique nesta página inicial é agora, se eu clicar nesta página inicial, seremos movidos para a página inicial. Aqui vamos nós novamente, veja que estamos na página inicial. Agora, se eu clicar neste Exibir detalhes, novamente, poderemos passar para esse espaço de detalhes aqui. Esta é a nossa descrição, esse é o nosso recurso. Isso é tudo projeto e temos esse bom rodapé, então está tudo bem. Vou parar este vídeo aqui e continuaremos a partir da próxima palestra. Vejo você na próxima palestra. Adeus. 19. Exportar todos os designs: Até agora, terminamos nosso design de aplicativos da web. Agora é hora de exportar nosso design. Nós fizemos esse design agora é hora de compartilhar essa equipe com outras pessoas. Como posso fazer isso para fazer isso é muito fácil de fazer, o que temos nesta opção na seção de arquivo. Então agora, novamente, deixe-me mostrar nosso projeto mais uma vez porque fizemos um trabalho muito bom. Projetamos um aplicativo web completo. E agora temos essa seção de educação, nosso projeto sexo mostrou nossas ferramentas. Faça comentários sobre as distorções e também podemos rolar nossos comentários a partir daqui. Então temos este contrato de Sean e depois temos este rodapé. Este é o aplicativo completo. Agora, se eu clicar neste Exibir detalhes, poderemos ver nosso espaço de dados aqui é de um espaço de detalhes, e eu tenho nosso recurso de título e a opção de projeto aqui. E então temos o rodapé. Temos que prancha de arte agora precisamos exportá-lo. Agora, se clicarmos na página inicial, estamos na página inicial. Está tudo bem. Para isso, precisamos clicar neste arquivo do Sean. E então aqui você terá uma opção chamada export. Isso significa que, se quisermos exportar nosso design, há muitas maneiras de fazê-lo. E diz que todas as placas de arte ou o líquido fonte selecionado significa que se eu selecionar esta, se eu quiser apenas exportar essa placa de arte em particular, então eu posso fazê-lo. Posso clicar nesta Exportação e, em seguida, você pode dizer, diz um selecionado, significa que apenas este , mas queremos, fazer , queremos exportar todas as pranchetas. Se você quiser exportar todos os poros não de uma só vez, então você precisa selecionar todas as pranchetas. Então você terá a opção de fazê-lo. E isso vai nos dar um pop-up de Shawn aqui teremos diferentes tipos de opções para fazer. Diz que o formato, que tipo de formato você precisa? Talvez você precise de formato PDF, talvez você precise de formato JPEG, talvez formato PNG único, que você possa fazer isso por mim. Vou selecionar meu formato JPG e depois qualidade. Você pode selecionar diferentes tipos de qualidade. Portanto, é melhor ter um 100% e exportá-los e selecionar o ativo será exportado em um. E temos essa opção para exportar para a opção de design não linear. E tudo o que podemos apenas para a opção web, o que significa que você pode executá-la. Anúncio agora projetado. Você pode selecionar. Podemos, agora nós exportamos para este e temos essa opção. E podemos simplesmente selecionar nosso destino onde queríamos salvá-lo. Você pode criar uma nova pasta ou onde quer que você queira definir, o que para mim agora, vou deslizar os desktops e, apenas na área de trabalho, vou mostrá-la. Agora clique em exportar tudo a bordo. E você só vai levar alguns segundos. Acho que está feito. Agora. Este é o meu próximo e aqui temos esses 21. Então esta é a nossa página inicial. Agora, se eu clicar nele, ele será aberto. Momento. Agora está em execução. Ele não está abrindo o aplicativo. Então, aqui está nosso aplicativo. Momento. Deixe-me ver. Largura. Mais alguns momentos são muito lentos. Aqui vamos nós. Temos todo esse design que tínhamos no código Adobe XD executar a mesma coisa. Agora podemos ampliar e diminuir o zoom e depois podemos, acho que podemos torná-lo um tamanho maior. Agora podemos ampliar. Você pode ver que temos exatamente o mesmo design que tínhamos no Adobe XD. Então nós o exportamos com sucesso. Analise o 100%. Então, esta é a nossa página inicial. E temos objeto de carreira, temos nossa educação e temos nosso projeto e definitivamente não tentamos clicar nele porque depois explorar ele não funcionará aqui. Definitivamente, porque é apenas um formato JPEG. E essa é a nossa habilidade tecnológica e você pode ver que não há problemas de pixel, então tudo está em forma e bom. Obviamente, não podemos rolar . Ajuste um e-mail. E esta é a base de contatos e então temos nosso rodapé. Então, tudo está perfeito aqui. Agora deixe-me abrir esses detalhes espaço. Este é o nosso espaço de detalhes. Agora vou aumentar o zoom. Agora, este é o nosso espaço de detalhes e temos essa opção aqui. Nós superaquecemos. Temos nossa barra de navegação, queremos nossos e-mails, depois recursos de descrição do título e mais postagens e nosso rodapé e definitivamente a promoção do produto não funcionará aqui. Então esta é a nossa página inicial e este é o nosso espaço de detalhes. Então, terminamos nosso projeto completo de sua cruz para a visualização ao vivo. Nós exportamos nosso design e acho que você teria gostado deste curso. Vou parar este vídeo aqui.