Figma Fashion Web App UI/UX - Design a Web APP UI/UX - Aprenda Figma recursos avançados

1. Apresentação: Bem-vindo a este aplicativo web figma, curso de design UI UX. Meu nome é Danny Chelsea e serei seu instrutor neste curso. Neste curso, você criará um aplicativo web de moda completo, UI UX. Portanto, este é o aplicativo completo que você vai projetar neste curso. Enquanto você projetará este aplicativo da web, UI UX UI pode alarmar e diferentes tipos de técnicas e melhores práticas da Figma. Vou te mostrar como você pode preparar seu projeto? Como você pode fazer o design do sistema, o design do sistema de cores, sistema de grade, criar um componente , criar um grupo e tantas coisas. Vamos dar uma olhada no aplicativo que você vai projetar neste curso. Portanto, este é o aplicativo completo que você vai projetar aqui. Então, por cima, temos nosso item de navegação e, em seguida, temos nossos bons heterossexuais. E depois disso temos nossos itens de moda feminina, itens de moda masculina. Temos nosso pombo é mostrado e, em seguida, assinatura de categoria sexual e nosso rodapé. Aqui na seção principal, podemos ver que temos esse botão de rolagem horizontal. Então, se eu clicar no Horrigan para este cromatídeo vai rolar horizontalmente. Vou clicar aqui. Ele vai voltar para a primeira posição. Mesmo fazendo isso, também podemos distribuir horizontal você. Também vamos aprender como fazer esse tipo de opções de visualização de rolagem de rolagem na Figma. E a partir daqui, se eu clicar neste item, podemos ver que um modelo funciona com nossas informações de itens de moda na caixa do modelo. Também temos essa protuberância nas principais opções esco. Assim, você pode fazer seus itens dessa maneira, ou simplesmente clicar no botão e, em seguida, temos nossas informações, e depois disso, temos esse ícone de fechamento. Se eu clicar aqui, ele será removido. E se eu abri-lo novamente, e se eu clicar no nosso lado, ele também será removido daqui. E dois, enquanto você projetará esta seção de categoria, você aprenderá a trabalhar com imagens. Na Figma, você pode ver diferentes tipos de formas que adicionei nessas imagens nesta seção de categoria de suco. Então, vou mostrar como selecionar imagens, como trabalhar com imagens na Figma. E então temos nossas seções de assinatura e nossas seções de rodapé. Você também aprenderá muitas coisas sobre plugins Figma. Você pode ver todos esses ícones que temos neste aplicativo da web que eu uso do plugin. Então você também aprenderá a usar um tipo diferente de plug-ins para ícones e outras paradas. E também temos nossos recursos de inscrição. Então, se eu clicar em Inscrever-se, ele mostrará nosso pop-up modal. E este, embora formulário de inscrição. Se eu clicar na inscrição, posso ir para a página de login. E a partir do login, tenho base em ODP. E depois de verificar esse RTP, poderemos usar nosso domicílio. E uma coisa é perceptível aqui é que, enquanto mostramos a inscrição, podemos ver uma pequena animação e transição de diferentes sites. Então, o que você fará esse tipo de protótipo, você aprenderá a usar animação, sobrepor e aprofundar diferentes tipos de protótipos, funcionalidades, por exemplo. Então, se eu, se eu clicar nele, para que possamos ver que o login está vindo do lado direito. E se eu clicar no login, ele vem do topo. E se eu clicar na periferia, ela desapareceu. E agora podemos ver nossa página inicial. É o mesmo aqui. Então você pode ver pouca animação no momento da oferta let. Você também aprenderá a fazer prototipagem neste curso. Este curso ajudará você muito a melhorar suas habilidades. E o mais importante, depois de terminar este curso, você terá um projeto completo que poderá adicionar ao seu portfólio. Portanto, vou me esconder, encorajá-lo a curtir este curso. Vejo você na classe. 2. Grid de layout do projeto e design do sistema de cores: Bem-vindo a esta palestra. Nesta parte, vamos começar a trabalhar em nosso aplicativo de moda ou web, UI UX. Assim que você fizer login na sua conta Figma, você verá esse tipo de interface de usuário. Agora, a partir daqui, temos um novo arquivo de design tão rápido que precisamos criar, precisamos abrir o arquivo do InDesign. E depois disso, precisamos selecionar nossos amigos. Aqui na barra superior, você geralmente vê todas as ferramentas ou Figma. A partir daqui, precisamos selecionar um quadro. Então, vou selecionar o quadro aqui na erupção cutânea naquele canto. Vai te dar algumas opções. Então, sob essa parada de deck, vou selecionar esse indexado de opções. Agora ele nos dá um quadro, certo? Então, basicamente vamos projetar esse tipo de moda em nenhum lugar, mas não exatamente o mesmo porque vamos adicionar mais alguns recursos e um pouco de mudanças, não apenas para fins de referência, para que possamos olhar para a seção que temos. Tudo bem, então agora vamos passar para os projetos tão rápido antes de iniciar qualquer projeto, é sempre uma decisão sábia preferir o design do seu sistema para que você saiba que tipo de cor, que tipo de ponte, qualquer estilo que você deseja usar. E então você pode reutilizá-lo dessa maneira. Você pode fazer seu design o mesmo para todas as páginas. Ele vai organizar seu projeto e ficará perfeito em pixel. Tudo bem, tão rápido. E teremos que criar uma grade de layout. Então, vou criar uma grade de layout aqui, e ela nos dará esse tipo de grade, mas eu quero ter apenas coluna. Portanto, vou selecionar a coluna e depois vou ter 15. E então podemos começar a trabalhar deste lado para este lado. Quero dizer, quaisquer que sejam os dados que adicionaremos, adicionaremos deste lado a este lado. Agora vou fazer isso R. Agora vou torná-lo uma grade de layout de estilo é tokens notável. Então eu seleciono a grade, depois clico neste ícone, depois clico neste plus e posso dizer coluna da grade principal. Certo? Agora ele vai salvar aqui. Mas se eu tiver agora, digamos que eu criei mais um quadro, então eu posso simplesmente selecionar esse quadro daqui, da grade e, em seguida, posso reutilizá-lo. Tudo bem, é assim que podemos manter uma distância do lado esquerdo e do lado direito. E podemos fim de semana, sabemos disso de onde precisamos iniciar nosso projeto. Agora, vamos criar mais um. Design é um sistema de design que é para cores. Então eu selecionei alguns códigos de cores para isso. Para adicionar esse código de cores, estou apenas adicionando algum retângulo aleatório e esse é o meu código de cores que eu quero ter. Então você pode simplesmente escrever esse código de cores ou usar seu próprio código de cores, não importa. Agora, esse retângulo é selecionado e esse é o código de cores. Então, vou substituir esse código de cores pelo meu código de cores e depois clicar em. Esse processo é quase o mesmo. E então aqui podemos ver algumas cores pré-construídas que a figma adicionou. Mas não vamos usar nenhum desses. Então, vou clicar nele. Isso é chamado, agora como esse item é selecionado e eu adicionei essa cor, podemos ver essa cor. E aqui posso dizer cor primária. Assim que eu criar um estilo, ele ficará aqui. Agora crie mais um retângulo. Agora temos esse campo, temos essa cor. Agora, se eu clicar nesse estilo, você pode ver que essa é a nossa cor principal que acabamos de criar. Ok, agora, vai o mesmo. Para este. Quero ter um código de cores diferente. E eu tenho esse código de cores, que está nisso. Então, vou selecionar este aqui. E vou dizer que este é para rodapé. E então eu vou criar mais um retângulo aqui. E então eu tenho mais um código de cores. Assim, você pode adicionar tantas cores quanto tiver para o seu projeto e, em seguida, basta adicionar seu estilo. Então posso dizer o botão Inscrever-se. Depois disso, temos mais um. E agora este, vou mudar este para essa cor. E posso dizer que é uma grade oriental para o plano de fundo da categoria. Eu posso apenas tentar adicionar ou qualquer laboratório significativo para que isso faça sentido. E mais tarde, se você tiver que mudar alguma coisa, então você pode entendê-lo facilmente. E temos mais um código de cores, o que será esse? E este está indo para o nosso botão Adicionar ao carrinho. Agora, assim que eu tiver tudo agora, posso remover isso. Agora não preciso ter nenhum objeto porque nossa cor de cor já está salva em nosso estilo de cor. Então, em primeiro lugar, temos esse histórico na cabeça. Deixe-me adicionar um plano de fundo, então parece que ainda temos um. Então, vou removê-lo. Então agora temos este. Então, vou selecionar um retângulo daqui, e vou projetar esse retângulo para o nosso cabeçalho. E então temos nossa cor ainda está certa que acabamos de criar. E você pode ver que todo o código de cores está aqui. Vou selecionar esse estilo de cor. Agora, se eu executá-lo, se eu executar isso, selecione este quadro, sinto muito, precisamos selecionar esse quadro para executá-lo. Ok, então a conexão é interrompida, então esse é o motivo. Portanto, o quadro é selecionado. E então, se eu clicar nele, ele será aberto. E definitivamente para trabalhar, não há nada para se preocupar. Acabamos de adicionar um retângulo e vou adicionar isso. Para que possamos ver nosso quadro, podemos ver nosso layout. Acho que podemos manter essa altura. Eu só queria ver a altura se for maior ou menor. Deixe-me reorganizá-lo e depois combiná-lo com este. Ligue. Parece muito bom. E podemos manter essa altura para o nosso retângulo. Então, vou parar este vídeo aqui. E em nossa próxima palestra vamos projetar todo esse tema. Então vejo você na próxima palestra. Tchau. 3. Barra de navegação e design do cabeçalho: Olá, Bem-vindo a esta palestra. Nesta parte, vamos projetar esta seção de cabeçalho para que possamos ver que temos um EMS e, em seguida, temos esses Dido e Barto e um pouco de razão aqui. Então, primeiro vou adicionar a imagem aqui para isso rápido, terei que selecionar esse retângulo aqui. Vou selecionar esse retângulo aqui. E então vou clicar duas vezes nele para que eu possa fazer um pouco de design aqui. Então, o que posso fazer aqui? Basta clicar duas vezes aqui. E então eu preciso selecionar este. E aqui vai você. Então eu quero ter desta prateleira aqui. E depois disso eu preciso clicar no botão Concluído. Agora, a partir daqui, preciso selecionar este lugar, MS, para que eu possa selecionar a imagem aqui. Então, vou colar a imagem aqui. Então agora podemos ver esse EMS e eu vou adicioná-lo aqui. Agora. Parece bom. Então, o que posso fazer agora? Acho que posso ajustar isso dessa maneira. E depois disso, temos, para que também possamos mudar o nome deste. Então, vou renomear esse nome. Vou dizer qualquer imagem. Portanto, é sempre uma prática recomendada para adicionar o nome do seu item ou do seu groove para que mais tarde você possa identificar facilmente. E agora precisamos adicionar esse tipo de design. Então, para isso, o que vou fazer, vou criar e selecionar nossa elipse aqui. E deve ter a mesma altura e peso, talvez 25 por 25. E depois vou adicionar uma cor. Então, vamos adicionar a mesma cor. Então, vou adicionar essa cor aqui. Mas o que vou fazer, vou, o que vou fazer. Ok, então precisamos adicionar cor para este. Então esta é a cor que temos depois de selecionar aqui, podemos simplesmente alterar o contraste nessa cor para que eu possa dizer 50%. Então vai ficar assim, mas teremos que usar uma cor diferente. Então, vou selecionar essa cor e depois terei que clicar nela. Vamos mudá-lo para 50%. Sim, talvez 40 por cento. Mas não precisamos ter esse efeito. Vou remover esse efeito aqui e vamos ver como ele se parece. Então, está fora deste. Então, parece isso semelhante a essa cor. E agora o que vou fazer, vou fazer, vou duplicá-lo algumas vezes. E vou desenhá-lo aqui. Então, para fazer uma duplicata, basta pressionar selecionar este e controlar D, ou no botão direito do mouse e copiar e colar. E agora vou duplicá-lo algumas vezes. Controle D, Controle D. Agora temos toda essa elipse. Então, o que vou fazer, vou fazer deles um grupo para que possamos, vou pressionar Control G ou daqui você pode dizer seleção de grupo. Então eu vou fazer outro, agora sei que vou duplicar esse grupo para que tenhamos algum design aqui. Agora temos dois grupos, grupo um e grupo dois. E combinados neste grupo, posso dizer folhas de aquecedor. Então, temos essa coisa agora aqui. Vou arrastá-lo aqui. Vou fazer uma duplicata deste e colocá-lo aqui. Mas desta vez precisamos comer verticalmente, então vou girá-lo dessa maneira. E então eu vou colocá-lo neste lado. E aqui vamos nós. Agora vamos ver como ele se parece. Parece bom. E vou colocá-lo no mesmo tamanho. Tudo bem, então agora temos um texto e botões. Então, vamos adicionar esse título rapidamente. Então, qual é o texto aqui? Encontre seu vestido aqui. Podemos adicionar textos diferentes. E esse é outro problema. Então, vou, ok. Então agora podemos novamente ativar nosso vamos novamente, sinto muito, vou remover este texto primeiro daqui. Não precisamos ter esse texto aqui. E vou adicionar essa grade novamente e começaremos nossa, começaremos a adicionar nosso texto a partir deles. Ótimo, então vou adicionar este texto aqui e vou dizer, vou dizer, vou dizer, tudo bem para moda aqui. Posso dizer, oh, tudo faz com que seja capital. Ótimo para você. Aqui. E agora vou aumentar o tamanho da fonte desta para 48. Parece bom, acho 4848, talvez 36, para que possamos selecionar. E vou mudar a cor desse texto. Então, mude a cor deste. Talvez possamos escolher a cor branca. Que cor não vai ficar boa. Então podemos tentar o bloco um, acho que o preto é bom aqui. Isso não é um problema. Então, podemos escolher essa cor preta, mas o baço não é bom, então terei variedade. Então vou ter que escrever para encontrar sua moda aqui. E aqui vai tão bom para a moda. E depois disso temos outro texto. Então, vou começar a partir daqui. E o texto é selecionar seu vestido da coleção permite. Então podemos simplesmente flutuar aqui. Escravo do seu vestido online. Mas desta vez precisaremos de um tamanho menor de texto, então não precisamos ter o mesmo tamanho. Talvez possamos selecionar o máximo para D6 e não 20 exatamente. Vou selecioná-lo 20. E depois disso, vamos adicionar nosso botão aqui. Então agora vou adicioná-lo, colocá-lo desta forma. Então, se você fizer isso dessa maneira, então você pode ver que essa linha de pontos vai impedir, significa que ambos estão no mesmo tamanho do mesmo ponto de partida. Agora, teremos que projetar nosso botão. Então, vou projetar nosso botão aqui. E o nome inferior vai ser nítido agora. Então, vou começar a partir daqui. Então, esse será o nosso botão. E aqui primeiro vou adicionar este raio de borda para adicionar o raio de borda 20. E então um texto vou ter que adicionar aqui. Então, vou dizer Compre agora. E novamente, e teremos que alterar o tamanho da fonte desta. Não é bem seis vai ser 16. E vou colocá-lo no centro. E aqui vai você. Temos este texto do Shop Now e agora rápido, torná-lo um grupo. Portanto, essa ferramenta será em grupo e podemos salvar o botão nítido agora. A partir daqui, teremos que mudar a cor de fundo. Então, teremos que mudar a cor de fundo. Então, o que podemos fazer? Podemos adicionar nossa cor. Para este texto, podemos adicionar cor branca. Então agora temos este botão Shop Now e encontre sua moda aqui. O que mais deixamos? Temos botão. E então uma coisa que posso fazer, posso diminuir o tamanho do botão. E então eu posso colocá-lo aqui. E temos o texto aqui que podemos colocar. Podemos colocar o texto aqui. E eu posso, acho que precisamos que possamos arrastar isso. Você pode vê-lo para que possamos adicionar nosso item de navegação aqui. Então, vou selecionar este e colocá-lo aqui. Também podemos adicionar um pouco de raio de borda aqui. E vamos ver como ele parece agora. Agora parece melhor. Agora, no topo, podemos adicionar nosso texto de nossos itens de menu. Então, vou começar daqui, e vou ter nossa casa. E depois disso vou duplicá-lo. Então, em casa. E então podemos dizer, você pode dizer T-shirt. Então podemos dizer, ou em vez de, podemos dizer, ok, podemos fazê-lo. Podemos dizer camiseta e depois podemos dizer sapatos. Então podemos dizer moda masculina. E então vou duplicá-lo para. Então eu vou ter, podemos dizer aqui, em vez de manifestação, podemos dizer manufatura. E então teremos mais um offshore, que será nosso login e se inscrever. Para o, para o login, vou selecionar nosso raio de borda aqui. Então eu não vou para o raio fronteiriço, vou adicionar um retângulo aqui. Vou adicionar este ou este, esse tamanho. Então, o que vou fazer, vou adicionar raio de fronteira aqui, 20 pixels. E então aqui posso dizer login. Posso dizer que assine aqui. E preciso mudar o tamanho para 12. Eu preciso que o tamanho é 12 aqui. Então, temos o botão de inscrição e depois disso, vou me deixar agrupar rapidamente o grupo McDermott e vou dizer se inscrever. E também precisamos ter mais um texto para o nosso botão de login, para, para nossa opção de login. Então podemos dizer isso aqui. Então podemos dizer fazer login. E vou mudar a cor inferior. Já temos nossa cor, que será, podemos dizer essa cor. Vamos ver como ele se parece. Parece bom, mas eu prefiro ter o botão de login e cadastro. Agora estamos com este. Então eu vou pressionar Command D. E em vez de aprovar este texto será, em vez de aprovar, esse texto será registrado. Então, em vez de assinar, vou dizer para entrar. Agora, se eu abrir este, então poderemos ver a aprovação e entrar. Mas eu preferiria ter uma cor diferente. Então, vou adicionar cores diferentes, esta. E para este, vou escolher este também. E para o acaso, o gato, ok, então para mudar a cor do texto aqui. Então, aqui veremos que onde está o único? Então esta é a aprovação. Assim, você pode ver que, ao selecionar um grupo ou um novo criar um grupo, você vê todos os itens do grupo. Então, no grupo, temos um retângulo e um texto. E há uma razão pela qual podemos ver duas cores. Um é para este, que é o nosso texto. Então agora vou mudar este para branco e ele vai mesmo para este. Este bloco vai ser branco. Agora temos esse design. Acho que está tudo bem. Mas antes disso, o que eu preciso fazer. Então eu preciso verificar se tudo está do mesmo lado, a mesma distância. Então, temos esse peixe amêndoa mostrado, vou selecionar tudo isso. E assim que você selecionar todas essas coisas, há uma propriedade chamada dados arrumados. Você pode ver no, eu disse se o seu item não tem para itens e não tem exatamente uma largura ou altura. Então este estará em uma tigela e, se você clicar nela, ele irá ajustá-lo. Agora. Agora vamos ver que ele tem o mesmo tamanho, ok? E outra coisa que precisamos fazer, precisamos torná-los um grupo. Então pressione Command G. Agora podemos renomear o nome. Podemos dizer nav bar, e agora não temos nada aqui. Você pode ver agora que este não está visível porque já temos isso, já temos esse item exatamente na mesma distância. Então agora eu posso ver que parece muito bom. Temos o cadastro, o texto de login e também temos essas partes de navegação. Então, para a barra de navegação, se eu selecionar esta, temos 16, ou cada item, temos 16. Agora temos este. Tudo bem, então agora, se eu quiser, também posso arrastar a coisa toda e posso arrastar e soltar porque sabemos todos os nossos dados agora em um grupo. Mas outra coisa que notei aqui, podemos arrastar que leva um pouco para o centro. E o mesmo vale para este. Vamos ver como ele parece agora. Agora parece melhor. Mais uma vez, deixe-me verificar o arrumado se for. Ok, temos o formato certo agora, terminamos com sucesso nossa seção de cabeçalho. E na próxima parte dois, vamos começar a trabalhar nessa parte. Vejo você na próxima palestra. 4. Design de cartões para mostrar o item da moda: Bem, bem-vindo de volta mais uma vez. Nesta parte, começaremos a projetar nosso cartão. Para isso. Em primeiro lugar, o que vou ter que fazer para que tenhamos uma estrela MS e depois Dido, e depois quando ícone, e depois o texto. Então, mais rápido teremos que criar um retângulo aqui. Portanto, temos um título também, e temos dois ícones aqui que teremos que projetar. Certo, tão rápido, vou, vou adicionar a um retângulo para o cartão. Então, começaremos a trabalhar a partir desta grade. E aqui também desta grade significa que vamos pegar um espaço dessa sombra branca e, em seguida, esta sombra vermelha, esta branca e, em seguida, essa sombra vermelha. Vamos começar a partir daqui. Nosso retângulo. Podemos pegar o tamanho. Podemos pegar esta linha de árvore. Ok, então temos esse retângulo e vou adicionar o pequeno movimento do raio de fronteira de talvez cinco. Deixe-me ver como parece agora. Parece assim. Ok, então vamos precisar de um pouco de espaço do topo porque teremos que colocar nosso título aqui. Então agora temos esse item e , em seguida, precisaremos entrar em vigor. Então, vou adicionar esse efeito aqui e soltar o efeito de sombra. E também vou mudar a cor. Essa cor será a cor branca aqui. Então, esta é a cor branca. E agora no topo aqui dentro do cartão, teremos que pegar outro retângulo, o retângulo da nossa imagem. Então, vou levar esse tamanho a esse nível e também fazer com que o mutuário tenha cinco pixels. E teremos que colocá-lo exatamente do mesmo tamanho. Tudo bem, então vamos ver. Então, temos este e aqui vamos colar nosso emus. E agora o que mais temos? Temos, ok, então acho que precisamos fazer nosso retângulo um pouco maior porque temos texto barato. Então, o primeiro será capaz de nomear. Então, o que podemos dizer? Podemos dizer, podemos dizer essa opção aqui. Temos título e, em seguida, uma estrela. Então, vou adicionar um texto aqui. E esse texto vai ser, podemos dizer, posso dizer vestido de noiva, apenas um exemplo. E os textos devem ter 16 pixels. Então, aguardando apenas 16 pixels. E então temos 16 pixels para este ícone. Então temos uma estrela, assim por diante. Usando uma estrela, vou ajudar o plugin chamado ícones do alimentador. Se você não sabe como instalar o plugin, basta acessar isso e procurar plug-ins na comunidade. E aqui você pode pesquisar qualquer plug-in para o ícone. Então você pode usá-lo. Você pode ver que nem o plug-in que eles têm muito plug-in que eles têm, você só precisa clicar em Instalar, então ele adicionará. E então, a partir daqui, você pode simplesmente explorá-lo daqui. Então agora vou ajudar os ícones de preenchimento. Você também pode instalar este plugin. Então, nos ícones de preenchimento, eu acho, e temos esse ícone de estrela. Então, vamos abrir, aparecer aqui, e aqui poderemos ver todos os ícones. Vou dizer uma estrela. Você pode ver que temos esse começo aqui. Então, vou selecionar essa estrela onde ela está. Então, agora ele selecionou dessa maneira. E vou colocá-lo aqui. Mas antes disso, você pode ver que ele vai selecionar fora do quadro, mas você tem que se certificar de que ele está dentro do quadro, caso contrário você não poderá vê-lo. Então agora se eu, se eu abrir essa visão, agora podemos ver que esta é estrela está aqui, mas deve começar do ponto de partida deste texto. Ok, então agora temos esse espaço. E não vou fazer alterações na altura porque já está em uma boa posição, 24 por 24. Então, o que vou fazer, vou fazer com que eles tornem uma duplicata. Então pressione Command D. E vou ter pouco menos espaço entre isso. E vou duplicá-lo 345. Então, agora parece bom. Então, vou selecionar, fazer deles um grupo. Vou dizer estrela. E agora temos essa estrela. Então, o que podemos fazer agora temos que adicionar o que mais temos aqui. Temos um ícone e, em seguida, precisamos mudar a cor deste. Assim, você pode ver que atualmente a cor de seleção é preta. Então, também uma coisa que você precisa notar que esta não é sua cor de preenchimento principal e principal é principalmente uma cor de traçado porque é. Um traço, você pode ver esse tipo de traço que ele adiciona. Mas se você quiser mudar o plano de fundo deste, então você tem que fazê-lo dessa maneira. Então você tem que fazer isso dessa maneira. Então agora vai, então ficará assim. Nós também podemos definitivamente fazer isso. Então, o que posso fazer? Eu vou, para este, vou selecionar este 14 aqui para o traçado, vou selecionar o bloco. Então ficará assim. Mas eu não quero ter este. Eu só quero ter a cor preta preta. Portanto, não precisamos ter esse histórico. Também não precisamos ter este. Normalmente, não vai mostrar agora que temos essa cor preta e agora aqui precisamos adicionar mais uma. Toma. Este texto estará aqui. Então, vou adicionar um texto aqui. E posso dizer que talvez 50 leituras, apenas um número de textos para mostrar. E desta forma, e podemos levar o tamanho para 16, mas ele deve estar no centro para que possamos arrastá-lo um pouco dessa maneira. Tudo bem, então parece bom, mas se quisermos, acho que podemos mudar a cor e deixar-me tentar a aparência. Se selecionarmos uma cor diferente e ela parece, ela não parece boa, mas podemos ficar com uma cor preta, mas, em vez disso, podemos apenas dizer que é uma cor ousada. Então, é um parafuso para que possamos ver que temos número de leitura. Portanto, temos o título, captamos o script mostrado. E então eu quero adicionar mais um texto, que será nosso preço. Então podemos dizer símbolo de dólar e eles podem dizer para US $50. E certifique-se de que o ponto de partida seja o mesmo. E vem de 19 por 19. Tudo bem, então temos nosso preço, temos essa imagem. E outra coisa que agora precisamos ter, precisamos mostrar nossa necessidade de colar nossa imagem aqui que não temos. Então, antes disso, antes de irmos mais longe , o que vou fazer primeiro, vou fazer deles um grupo nesses três itens. E então eu vou fazer o arrumado para que possamos, conhecemos aquela estrela. Então temos esse título. Então, faça-os um grupo primeiro. E vou renomear ele pode salvar o sinal de texto de guarda. Agora, se eu for aqui, já vemos que este é visível. Isso significa que temos a mesma distância. Agora, outra coisa que precisamos adicionar aqui, temos mais um botão aqui que precisamos adicionar. Então, vou pegar metade desse retângulo dessa ferramenta elipse, não o retângulo. Certo? Quero selecionar a ferramenta elipse. Então, temos a Ferramenta Ellipse aqui. E vou selecionar a ferramenta elipse. E para torná-lo mais escuro, você sempre precisa se certificar de que se esconda em um molhado exatamente o mesmo. Então, parece assim. Acho que podemos levar um pouco maior, talvez 32 por 32. E podemos colocá-lo na mesma distância e na mesma distância. Dessa forma, podemos colocá-lo aqui. Vamos colocar nosso ícone, para que possamos colocar nosso ícone aqui. Então, antes disso, quero mudar a cor de fundo. Então eu quero ter essa cor aqui. E então selecionaremos nosso ícone de blog aqui, o ícone do coração. E posso dizer, então aqui posso dizer esse ícone de coração. E, primeiro, vou colocá-lo dentro do quadro e depois puxei ícone do coração dentro deste e tornarei a cor do traço branca. E eu posso centralizá-lo um pouco. E aqui vamos nós. Tudo bem, então parece muito bom. Vou parar este vídeo aqui e continuaremos a partir da próxima palestra. 5. Selecione e mostre uma imagem múltipla no cartão: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos implementar o resto do projeto. Então, temos essa opção. Agora, temos este cartão. Agora queremos torná-los um grupo, a parte inteira, que saibamos que essa parte podemos simplesmente duplicar para criar vários itens. Então, temos esse coração aqui. Então isso deixa para torná-los um grupo primeiro. Então, vou fazer deles um grupo e renomeá-lo. E vou dizer aqui, como manteiga. Então temos nosso córtex, que é outro design. Temos esse retângulo para o texto e , em seguida, temos o retângulo do carrinho principal. Então eu posso mudar o nome deste. Podemos dizer carrinho principal. E então nosso cartão EMS, que é este, que será um cartão bem-humorado. Então agora temos nosso cartão principal, temos nosso cartão MS, temos nosso botão Curtir. E posso fazer deles um grupo e posso dizer moda, cartão de moda. Tudo bem, então agora eu posso fazer isso duplicado. Vou pressionar Duplicar até agora deste cartão. E então vou duplicá-lo algumas vezes. Então, quatro. E depois phi seis. Por enquanto, talvez seis. E nós temos, temos este cartão, certo? Ok, então temos esse número de itens agora, mas queremos ter uma opção de visualização de rolagem aqui para que possamos instalá-lo. Agora é hora de colar nossa imagem aqui. Então, como podemos fazer isso para fazer tão rápido, o que eu vou ter que fazer? Então este é o nosso carrinho, este é o nosso cartão. Então, vou expandir tudo isso para que possamos selecionar nosso protetor de imagem. Porque vou ter vários, múltiplos IMS por completo. Então agora vou selecionar a imagem. Então clique em Coloque a bagunça. Agora vou selecionar três a seis ou sete cartas. Então, vou selecionar as imagens aqui. Então 12, então 34567. Certo, e depois vou abri-la. Assim que ele carrega todas as imagens, você pode ver adicionando imensa. O que vou ter que fazer, então vou ter que clicar um por um. Então eu posso apenas postar, você pode ver essas sete imagens selecionadas. Então, agora o que posso fazer? Posso clicar nele. Um EMS foi selecionado, depois 10mers. Ok, vou desmarcá-lo. Ok, então deixe-me removê-lo. Então eu vou fazer com dois novamente porque eu queria mostrar algo que em seguida, o número de posição da imagem. Então, vamos selecionar a imagem aqui. Então, vou selecionar esta imagem. Então, vou selecionar essa imagem, essa imagem. Estes, estes, estes, estes, não este, este, este, e este. Agora vamos clicar em Abrir. E assim que o selecionarmos, emite três sites. Precisamos esperar alguns momentos porque leva tempo para fazer o upload do MS. Então, assim que nossa imagem estiver pronta, poderemos vê-la em nossas milhas. E aqui vai você. Você pode ver que 80 bagunça, a última que você selecionou estará na primeira posição. Então você pode começar a fazer distinto. Agora eu posso apenas pressionar clique um por um, isso. E isso. Aqui vamos nós. E teremos mais uma imagem aqui, que será nosso último item. E então deixe-me ver o que podemos ver aqui? Então, temos duas imagens aqui. Temos cinco mulheres, mas não temos certeza sobre esse item aqui. E agora. Podemos salvá-lo. Então, o que posso fazer? Eu posso apenas pressioná-lo em linha reta. Só vou removê-lo agora vou remover essas imagens. Então agora o que eu quero que você veja aqui, se tivermos essa imagem, é assim que você pode adicionar vários limites porque temos outro cartão aqui que talvez seja este. Em vez disso, este que temos para um texto aqui. Então, cometemos um erro aqui. Nós removemos nosso item quando fiz essa coisa. Então agora temos este, MS. aqui, mas temos outra moda aqui nesta. Então, temos este cartão, que é este cartão e este cartão. Isso, embora possamos ver aqui. Vou arrastar este para ver se temos MAC ou não. Portanto, não temos EM aqui. Então, podemos ter que pressionar uma imagem para este item aqui. Então, vou arrastar o EMS, selecionar um que você sente falta. Mais uma vez. Talvez eu possa me juntar à esquerda dele. Então, temos este item, e vou selecionar este. E agora tenho que pressionar esta imagem aqui. Então o problema é que, se nosso quadro estiver fora de quatro, se nossas imagens são uma espécie de quadro, então, nesse caso, teremos ou você disso porque não sabemos, então temos esse item ou não. Então, podemos adicionar mais alguns itens aqui. Então, talvez dois. Mas assim que eu coloco dentro do quadro, então eu recebo a mesma distância. Então, nesse caso, mais rápido teremos que preparar nosso cartão e então poderemos no nosso trabalho e , em seguida, definirei a posição deste item. Então, tudo bem. Então eu não dupliquei. Portanto, ele precisa fazer uma duplicata. Então, temos um item aqui. Temos outro item aqui. Então este é um cartão diferente. Então, vou adicionar para nos defender aqui. Agora temos outra imagem aqui, que é essa. Já temos uma foto aqui. Então, vou adicionar mais duas imagens para este item. Então, vou colocar e-mails daqui. Vou dizer este para este item e outra, outra imagem para este. Então, vou selecionar Inserir imagem. E então posso dizer, vamos adicionar este. E aqui vai você. Ok, então agora nosso trabalho é definir todos esses e-mails fora disso. Então aqui, agora temos rápido, vamos colocá-lo aqui. E depois podemos reorganizá-lo assim que tivermos distintos. Então agora esses dois itens estão fora do nosso quadro. Então agora o que vou fazer, vou colocá-lo em deflação é que o quadro e este é um quadro de incentivo. Então agora temos o nosso, este, que é este. Temos este, e temos este. Então, vamos fazer isso. Agora. Temos, podemos ver que a distância é 20. E este também é que precisamos selecionar a distância 20. Certo? Então, se você ver que essa linha vermelha está na mesma , significa que sua posição é a mesma. Certo? Então, agora, se eu vier aqui, então podemos ver todas as imagens, mas podemos ver o lado direito, então por diante que agora o que vou fazer, terei que adicionar visualização de rolagem horizontal para este cartão de moda. Nós projetamos nossos itens até agora. E na próxima parte, vamos aprender como você pode fazer a visualização de rolagem horizontal. Portanto, não fique confuso. O que fizemos basicamente acabamos de criar um cartão, adicionamos várias imagens MS e, em seguida, estamos apenas adicionando vários cartões para que possamos fazer horizontal é chamado View for right? Vou parar este vídeo aqui, e continuaremos a partir da próxima palestra. 6. Seleção de quadros e rolagem horizontal: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar a visualização de rolagem horizontal quando você clicar duas vezes sobre isso, neste ícone. E, como lição, eles rastrearão isso. Teremos que converter cada grupo em um quadro. Então só podemos fazê-lo. Portanto, temos nosso design de carro e cada cartão é nosso grupo. Então você pode ver que este cartão é um grupo, descartar é um grupo. Este cartão é um grupo. Descartar é um grupo e descartar é um grupo. Também posso arrastá-lo para aqui. Acho que este cartão é o groove. Este cartão é um groove. Isso, isso, isso, isso e isso. Então, agora o que vou ter que fazer, terei que fazer um grupo fazer um quadro, cada cartão. Ok, tão rápido, faça, faça dele um quadro. Então este carrinho, teremos que fazer quadro, certo? Selecione o cartão. E, em seguida, uma seleção de quadros, este será o nosso quadro um. Então eu vou desfazer ou Controlar Z para desfazer isso tão mais rápido, vamos começar a partir daqui para que possamos, sabemos que nosso quadro um é nosso primeiro item. Certo? Então este é o nosso primeiro item. Então, vou clicar com o botão direito do mouse e vou dizer seleção de quadros. E então este será o nosso quadro. E este também será nosso quadro. Então, vou dizer seleção de quadros. Todd será a palestra Frames pois isso será esta, nossa seleção de quadros. E este item é, são esses itens. Então eu vou dizer, vou desfazer este porque esta será a nossa quinta posição. Então quatro, e vou clicar com o mouse e dizer fase de seleção de quadros. E então este será a nossa sexta posição numérica. Então, seleção de quadros de sete da seleção. E o último é a seleção de quadros. Deixe-me ver qual é o último. Portanto, o último item é o número oito, número sete, número seis, o número cinco, Número quatro. Tudo bem. Agora, selecione todo o quadro que acabamos de criar. Precisamos criar, precisamos fazer um quadro agora. Então enquadre estes, estes, estes, estes e, em seguida, selecione todo o quadro que você tem. E depois disso, clique com o botão direito do mouse e faça a seleção de quadros. Agora você tem um quadro e dentro desse quadro, você pode renomeá-lo. Você pode definir esse mainframe dentro do quadro principal. Você tem seu quadro múltiplo, que é cada item. Agora. Você precisa selecionar seu mainframe e, em seguida, clicar no lado direito, você poderá ver o conteúdo do Cliff. Você precisa verificar este. Assim que você fizer o conteúdo do Cliff, o que você terá que fazer, você poderá ver nesse tipo de coisa. E então você precisa arrastá-lo até onde você deseja mostrar, você quer exibir, queremos exibir essa grade sem uma rolagem. Queremos mostrá-lo até esta grade. Porque nós, no início decidimos que faremos assim. Deixaremos esse gradiente de espaço em branco mais amplo e do lado esquerdo e do lado direito neste espaço amplo e levantado. Agora, se eu vier aqui, poderei ver que nosso item é apenas disso. Também podemos fazer uma coisa. Podemos mostrar esses três itens. Mas faremos isso mais tarde. Mas agora temos nosso quadro aqui e depois vamos para o protótipo. Aqui, você pode ver que o estouro está puxando o ruído puxando. Você precisa selecionar essa rolagem horizontal. Certo? Agora, se eu vier aqui , agora, poderei rolar nossos dados horizontalmente. Mas agora podemos ver que temos esse pequeno problema de design e agora teremos que corrigi-lo. Certo? Agora podemos rolar nosso item horizontalmente. Mas antes disso, deixe-me consertar este. Então volte para o design novamente e eu vou abrir este. Então, temos este item aqui, que é nosso para o nosso número de item, este é o nosso quinto número de item. Temos problemas com nossos itens de seis números. Portanto, o item de seis números é sobreposto ao nosso item de quinto número. Temos nosso número de item quinto, então temos nosso quadro número seis. Então quadro número seis. Deveria ter isso. Ok, então agora temos isso. Então, deve começar assim, certo? Então, ele deve funcionar agora. Agora vamos tentar novamente, fazer esse conteúdo do clipe e, em seguida, vou ajustar novamente o tamanho aqui. Então, vou ajustar o tamanho aqui. Tudo bem, então agora temos essa opção. Ok, então parece que também precisamos adicionar apenas nossas outras duas partes com esta. Então, vou abrir esse penhasco novamente. Então temos nossos seis agora, nossos sete estão sobrepostos com este. Você pode ver. Então agora precisamos selecionar R7 e , em seguida, precisamos ter certeza de que, com um sete, temos essa distância. Temos essa distância 28. Agora. Temos nossos seis, temos 07, mas agora temos nossos oito com sobreposição. Agora temos o mesmo tamanho. Então este é o nosso, este é o nosso pesquisado, e isso é seis, este é o nosso quatro. Estes são três, este é o nosso cinco, este é o nosso 678. Certo? Então agora, novamente, vou selecionar o mini penhasco e depois ajustado com nossa grade. Agora, eu acho, ok, legal. Agora não temos nenhuma sobreposição. Mas você pode ver que na parte inferior temos pouco problema aqui. Então, precisamos mudar nossa altura do conteúdo deste clipe para que eu possa simplesmente arrastá-lo um pouco assim para que possamos obter a sombra. Agora podemos rolar nosso item. Perfeito. Não temos nenhum problema com isso. Para que possamos rolar. Vamos rolá-lo e podemos rolá-lo. Então outra coisa é perceptível que acho que temos pouco mais espaço daqui e depois aqui. Então, o que posso fazer agora? Posso simplesmente ir aqui. Ok, então vou abrir novamente este item para adicionar apenas esse problema aqui. Então temos, temos isso, acho que temos esse 14420, mas daqui, de T, de quatro. Portanto, precisamos ter certeza de que temos nossa distância 20 entre todo o cartão. Então, temos seis. Então, se selecionarmos seis, então podemos ver que um T só tem 277 também terá 20. E, a partir das oito, vamos chegar à Índia também. Tudo bem, então agora selecione mainframe e depois ajustado com a grade que queremos mostrar. Então, vou adicioná-lo aqui. Aqui vamos nós. Agora podemos ver que temos exatamente o mesmo visual. E parece muito bom. Podemos fazer uma rolagem dessa maneira. Agora queremos ter mais um item aqui, correção do senador que eu quero mostrar aqui. Queremos mostrar apenas para carro. Não queremos mostrar este pequeno aqui. Vou ajustá-lo com essa grade. E então o que posso fazer? A coisa toda agora eu posso adicionar apenas um também. E eu posso ajustá-lo dessa maneira. Podemos ajustá-lo. Metade deste daqui, metade deste aqui. Ou, alternativamente, o que podemos fazer? Também podemos mudar nossa grade. Então, em vez de 1015, talvez possamos adicionar 20. E então podemos decidir, então podemos selecioná-lo dessa maneira. Sim, ok, então agora temos esse show, então podemos simplesmente declarar com 20 ou mais. Vamos fazer 18. Desculpe, eu vou, em vez de 20 Agora, fazê-lo 1919 exatamente. Precisamos fazer isso 21. Ok, então temos essa grade e no lado direito estamos pegando o rosto dele nisso e precisamos do lado esquerdo. Estamos tomando um branco, um vermelho, um branco um vermelho, um branco, cem, cem. Então, essa é a nossa principal coisa aqui. E agora temos este cartão principal. E para o penhasco, quero ter pouco mais espaço aqui. Por que isso é? Para que possamos ver o cartão inteiro? Você pode ver que o cartão não está visível. Então eu preciso adicionar um pouco mais de espaço aqui. Aqui vamos nós. Então, temos este cartão e, em seguida, temos esse design, temos este cartão e podemos rolar nosso item. Perfeito. E na próxima parte, implementaremos isso para botão e em seguida, faremos uma rolagem. 7. Rolinho horizontal clicando no botão de rolagem: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar isso ao nosso botão e depois aos dados, e então isso leva, depois disso, adicionaremos essa horizontal. Vamos chamar a opção clicando agora que podemos fazer é ligar para mim fazendo esse tipo de coisa de troca , alguma coisa de arrastar e soltar. Mas queremos ter dois botões aqui. E então, quando eles clicarem nele, vamos mostrar essa origem para listicles muito rápido. Vamos adicionar o texto aqui. Então, vou adicionar texto aqui e vou dizer aqui, posso dizer aqui fissura de amêndoa. Então essa moda de mulher dourada. Portanto, certifique-se de que seja, o ponto de partida é o mesmo com este item. Então homens faciais e não queremos ter isso ousado. Podemos dizer que é um parafuso médio e então podemos dizer essas coisas. Então eu estou no rosto e vou, podemos fazer uma coisa, eu acho. Certo. Então aqui temos isso sublinhado. Não quero adicionar esse sublinhado. Então eu quero deixá-lo dessa maneira e depois adicionar isso ao botão aqui. Então, primeiro, vamos adicionar um botão. Então eu vou pegar essa ferramenta de elipse e depois vou desenhar nossas vidas aqui. Portanto, certifique-se de que ele tenha a mesma altura e peso. 46 por 46 jejum, terei que olhar para ele. Como parece, é maior ou menor. Então agora 4243. Então terei que primeiro adicionar efeito e depois mudar a cor de fundo deste. E essa será essa cor de fundo branco. E aqui temos que adicionar um ícone. Então, vou pegar novamente metade desse plug-in chamado ícones de alimentador. Vou dizer, ok, então temos essa seta para a direita e a esquerda ícone. Então, vou dizer selecione este ícone. E, em seguida, vou selecionar esse ícone e arrastá-lo para aqui. Vou arrastá-lo para cá. E o centro, nós não estaríamos, ok, então está dentro deste. Então, temos esse ícone. E agora o que posso fazer? O que vou fazer, vou fazer deles um sulco. Posso dizer grupo e depois dizer o ícone certo. E então podemos fazer isso duplicado. Então pressione Command D. E então precisamos ter mais um ícone, que será o ícone da esquerda. Então, vou remover esse ícone daqui. E então vou selecionar esse ícone à esquerda. Este ícone à esquerda aparecerá aqui. E vou colocá-lo aqui. O mesmo. Agora temos nosso ícone esquerdo e ícone de passeio. Esta é a nossa seta para a esquerda. Este é um ícone certo. Portanto, este é o nosso ícone certo. Este será o nosso ícone da esquerda. Então, vou alterar o nome para o ícone da esquerda. Ícone esquerdo. E vou colocar essa seta para a esquerda dentro desse sulco. Temos esse ícone esquerdo e direito, e depois vou fazer deles um grupo. Portanto, este ícone esquerdo e ícone direito, selecionamos dois. Posso nomear este e este , torná-los um grupo. Digamos, podemos dizer o botão Scroll. Ok, então agora essas duas coisas, podemos apenas adicionar um ponto de partida desse grupo. Você pode ver a linha no lado esquerdo do texto e na linha em uma grade. Certo? Então isso significa que está na posição perfeita aqui. Então, agora tudo o que precisamos adicionar são opções de chamada. Então, quando o usuário selecionar este, queremos mostrar o último quadro que é decente. Desta forma, poderemos fazer é chamado. Quando um usuário clicar neste item, queremos mostrar o primeiro. Então é assim que podemos fazer uma rolagem. E o bom é que, em nossa parte anterior, já criamos nosso quadro. Portanto, só podemos fazer isso facilmente se tivermos uma seleção de quadros porque a prototipagem do protótipo é sempre procurar o quadro. Agora temos todos esses quadros são o primeiro quadro é este. E nosso último quadro é o quadro oito, que é o último. Então, quando um usuário clicar neste lado direito, selecionaremos o auxílio do quadro. Quando clicar no lado esquerdo, vamos selecioná-los e o quadro número um. Então, essa é a principal lógica aqui. Então, agora vamos clicar na prototipagem e agora clicar nos itens da direita. Então, quando tivermos, quando temos isso. Então agora você pode ver que, por padrão, ele selecionará todo o grupo, mas precisamos selecionar esse botão exatamente. Este, botão direito do ícone que você pode ver. Então, vou clicar nele. E agora dentro do protótipo onde você precisa clicar nessas interações e aqui clique em Nenhum. Então, em vez de em diante. Então, quando o usuário fizer onclick, queremos mostrar, queremos mostrar, queremos rolar também. Certo, a Marinha não chega. Normalmente, usamos navegar para, para passar de um lugar para outro lugar. Mas desta vez também precisamos selecionar um pergaminho, porque queremos rolar para onde queremos ir. Queremos rolar para o nosso, você pode ver. Nosso quadro onde queremos rolar, queremos rolar é o quadro Columba número oito, que é o último item. Mais uma vez. Antes de selecionar, deixe-me esclarecer. Então você vai para a seção de protótipo. Você seleciona o botão que deseja mostrar. Depois de selecionar o bastão, você adiciona interação. Você adiciona esses programas indiretos. Aqui. Você o seleciona, clica nele, seleciona um onclick e, depois disso, você clica em rolar para e depois da escola para onde deseja rolar, você deseja ir para o quadro oito, que é o último item à direita lado. E você tem que se certificar de que é um quadro que fizemos em nossa palestra anterior. Então, vou clicar neste quadro oito. E depois disso aqui você poderá ver qualquer menção que tipo de animação você quer ter, você quer animar e então você tem essa animação aqui. Você pode simplesmente dizer fácil entrar e sair, depois fantasia ou ouvir falar sobre você, você pode simplesmente fazer isso dessa maneira. Então, talvez você queira ter saltitante, talvez você queira ter devagar. Mantenha o lento. Agora, se eu voltar aqui e então eles podem ver que temos esse ícone agora. Então, se eu clicar nele, aqui vamos nós, estão no último quadro. Legal. Agora, se eu clicar no lado esquerdo, não funcionará porque não entramos no modelo de protótipo. Nosso swab é chamado é sempre integral porque fizemos isso antes. E se eu clicar nele, ele vai para o lado grande. Ok, então agora o que podemos fazer aqui? Podemos simplesmente adicionar, podemos simplesmente adicionar outro protótipo. Então selecione este item novamente e clique nele. Vá para esta seção de cliques, selecione uma ferramenta de rolagem. E então esse termo será nosso quadro um. Legal. E, novamente, queremos ter algum encontro e íntimo. Vai ser lento. E o gentil? O que eles querem dizer com gentil? Zen? Ok, então vamos selecionar este. Agora. Estamos em ritmo acelerado. Estamos no último item. Agora, se eu clicar nele e, em seguida, estamos no primeiro quadro. Então este está funcionando. Este está funcionando, e este está funcionando. Então você aprendeu a fazer isso. Então eu acho gentil significa que isso vai te dar uma pequena animação. Há apenas um nome da animação. Você pode apenas brincar com este. Você pode apenas brincar com esse tipo de animação. Como se eles tivessem algumas opções. Qual deles? Hormônio ou o que você preferir, basta selecionar qualquer um desses, então ele vai adicionar em seu projeto. Então, adicionamos com sucesso neste design. Temos esse pequeno ícone que vai projetar aqui e depois desta moda. E podemos rastrear este dessa maneira. Também podemos arrastar este. Nosso botão também está funcionando. Tudo bem, então vou parar este vídeo aqui e continuaremos com a próxima palestra. Vejo você na próxima palestra. Tchau. 8. Design de cartões de moda para homens: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar mais uma seção para a moda masculina. Para isso antes de tudo, terei que aumentar o tamanho do mainframe. Então, vou apenas selecionar este e depois arrastá-lo. E agora teremos que adicionar mais uma textura. Então, vou duplicar esse texto aqui. Então, vou dizer o Comando D, e depois vou adicionar este aqui. Assim, você pode ver que você sempre precisa seguir a linha vermelha que ela mostrará para que você possa entender que ela está começando do mesmo tamanho, do mesmo, do mesmo ponto de partida. Agora, vou dizer isso à moda masculina. E depois disso, teremos um tipo semelhante de design de carro com imagem diferente, mas deriva. E desta vez não vamos mostrar essa opção de rolagem. Em vez disso, vamos ter que fazer uma coluna, ok, então primeiro vou fazer isso uma duplicata. Portanto, não este quadro. Não precisamos selecionar o quadro, em vez disso, vou selecionar este cartão. Certo. Então vou fazer dele um grupo duplicado. E depois vou arrastar mais um aqui. E do mesmo ponto de partida que temos aqui. Certo, legal. Então agora você pode ver que temos alguma distância 37 do topo do título. E agora podemos ver que temos homens peixes. E então o que eu quero, eu quero ter. Então, em vez disso, ainda podemos ler essa imagem, mas depois vamos mudá-la. Então eu vou, o que vou fazer, vou fazer duplicar. Queremos mostrar como temos quatro aqui. Então eu vou pressionar Comando D e depois quatro. Certo? Tudo bem, então há um erro que eu cometi aqui. Em vez de selecionar todo o grupo, eu estava apenas selecionando. Então, o que posso fazer agora? Vou dizer, vamos mudá-lo para nim. Eu direi cartão de moda masculina. Agora vou fazer uma duplicata. Agora posso duplicar o cartão inteiro. E então temos esse ponto de partida. Em seguida, faça e faça. Tudo bem, então primeiro vou fazer deles um grupo. Então, faça-os crescer mais rápido. Todos esses cartões de moda masculinos. E antes disso, ok, então temos nosso arrumado. Isso significa que está na mesma distância. Você pode ver isso 202020. Então, não fazemos nenhum sentido nem nada. Então, vou fazer deles um grupo. Podemos dizer que homens formam uma linha. E então vou fazer dele uma duplicata. Então, esta será nossa segunda linha. Sinto muito, precisamos ter, devemos ter esse ponto de partida daqui. Aqui vai. Então, temos essa coisa, 202020. E agora podemos dizer que esses homens estão na moda. Temos esse design de moda aqui, que será essa moda masculina. Então, ok, então agora uma coisa que eu quero acrescentar, eu quero fazer essas duas fileiras em um grupo e agora podemos dar-lhes um escravo africano. Moda masculina. Podemos dizer seção de moda masculina. E agora deixe-me ver se temos arrumados. Ok, então temos isso arrumado, temos 37 distância. Temos nossa distância para este. Ok, então não temos um problema com isso. Tudo bem, então agora parece muito bom. Nós adicionamos este. Agora é hora de adicionar várias imagens para esses quatro itens. Então, para isso, vou selecionar Inserir imagem novamente. E então, em vez de homem ou mulher facial, o caule, vou selecionar homens faciais. Então temos 448 imagem, então vou selecionar oito, MS. aqui, 2334567, e depois oito. Agora, o que vou ter que fazer, então ele vai adicionar nossos e-mails aqui e no momento. Portanto, leva algum tempo para carregar toda a MS. Com base na velocidade da sua internet e no tamanho da imagem. Assim que nossas imagens estiverem prontas, poderemos vê-las em nosso mouse. Aqui está você. Agora temos oito imagens, então vou selecionar, vou substituir essa imagem por esta. Então, substitua essa imagem por esta. E para substituir essa imagem por esta, esta, esta, esta e esta. Agora, devemos ser capazes de ver nossos e-mails aqui. Levará algum tempo ou podemos apenas fazer Atualizar lá. Ele substituirá nosso MS esta imagem principal ou minimizará. Então agora temos homens, faciais e mulheres peixes prontos. O que eu quero ter, quero ter uma paginação aqui no fundo para esta moda masculina. Então, temos esse design, temos esse design e temos, então eu não gosto dessa imagem, então vou substituir essa imagem. Vou selecionar outra foto. Então, vou dizer, vou selecionar este. Acho que fizemos um adicionar este. E vou substituir essa imagem por esta. Mas não tem rosto. No entanto, ainda é melhor. Ok, então temos essa coisa aqui agora. Agora eu quero ter nossa paginação aqui, então vamos adicioná-la em nossa próxima parte. Vou parar este vídeo aqui para ver qual é a próxima palestra. 9. Design de paginação: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar nossa paginação. Até agora, fizemos esse design e nosso aplicativo parece muito bom agora. Então, temos este cartão, temos essa opção aqui. E agora é hora de adicionar nossa paginação aqui. Então, para adicionar uma paginação, tentaremos tirar a saúde da nossa ferramenta de elipse. E então vou começar a projetar a partir desse meio de dois itens. Então eu vou pegar ls e daqui vou começar a projetar isso. Então, precisamos ter certeza de que temos a mesma altura e peso. Então podemos dizer 35 ou talvez 40, eu acho. Vamos mudá-lo mais tarde, não se preocupe. Então 40 por 40. Agora deixe-me ver como parece. Parece assim. Acho que é o tamanho perfeito, para que possamos ficar com este. Vou adicionar efeito aqui. E então vou mudar a cor para essa cor branca. E agora precisamos adicionar a posição exatamente. Eu queria ter essa posição. Certo, então podemos começar com isso. Vamos começar, vamos começar com este, que é o nosso subshell a d, essa grade. E então podemos dizer 123456, então 123456 até aqui podemos adicionar nossa paginação. Tudo bem, faremos isso. Isso não é um problema. Então agora vou adicionar e, em seguida, aqui teremos que adicionar um ícone. Então, já temos nosso ícone, que é esse ícone, ícone de seta para a esquerda. Então eu vou, ok, para que possamos diretamente, podemos obter diretamente esse ícone do nosso plugin que já temos. Então, ícones de preenchimento, então vamos adicionar isso, este ícone aqui. Então, ele vai adicionar aqui. E vamos colocá-lo no centro. E então vou colocá-lo no centro. E agora temos esse ícone. Então Fastow, teremos que torná-los um grupo. Então, essa elipse. Antes de torná-los um grupo, vou duplicar essa elipse porque precisamos alguma elipse para nossas outras opções. Ok, então o problema é que eu poderia, eu vou selecionar a elipse mais cedo. Ok, então agora temos esses elevadores. Tudo bem, então temos esse texto, temos esse ícone, e então temos essa elipse aqui. E aqui vai você. Neve aqui. Dentro da elipse, teremos que adicionar um texto, e esse texto será um. E teremos que adicionar vários textos. Mas primeiro deixe-me colocá-lo no centro. No mesmo tamanho. Deve estar no meio. Então, o que vou fazer, vou colocá-lo dessa forma coisa. Ainda assim precisamos. Então, em vez de 16, faça 18. Faça 18. Tudo bem, então agora está no meio, então eu vou fazer, torná-lo um grupo também. Então, não este. Eu só preciso fazer agrupar essa elipse e essa ferramenta. Então, vou fazer o grupo make. Posso dizer item de paginação. Item de paginação. Agora temos nosso item, temos nosso próximo botão, botão Anterior, então temos nosso item. Agora vou duplicar esse grupo para que possamos adicionar alguns botões, alguns itens de paginação, 123 e depois quatro. E este vai ser um ponto. Então, para um ok, então vamos precisar de mais, na verdade, quatro, depois cinco, depois 67, e depois o 81. E então estes serão nossos dois e isso vai ser C. E isso vai ser quatro, e isso vai ser cinco. Então, precisamos adicionar ci dot aqui, não cinco. Vamos ter esse ponto quatro. E então 54 é, então este vai ser cinco. E então este vai ser seis. E Sete e aqui teremos que, aqui não precisamos ter esse texto. Queremos ter esse ícone certo. Então agora vou tomar a saúde dessa elipse, desculpe, não dos elevadores. Então, precisamos tomar a saúde desse plug-in para que possamos adicionar nosso ícone. Então, desta vez, teremos que adicionar este ícone certo. Vou colocá-lo no centro. E então o que eu vou ter que fazer, primeiro coloque-o dentro. E este é o ícone certo. E o que é a paginação? Temos alguns itens de paginação. Então 4321. E assim podemos ver dessa maneira, mas devemos ter outra elipse aqui para a média. Devemos ter essa elipse aqui. Então, onde está essa elipse? Então este e essa elipse. Olhe para ele aqui. Não precisamos ter esses elevadores se eu excluir este. Ok, então não devemos excluir este. Temos como este item de paginação é esse, são esses itens de paginação. Então, temos este item, mas agora não temos, ok, então este é o nosso item de paginação, então este é o nosso ícone certo. Então, vou colocá-lo dentro deste. Então agora temos isso e essa seta para a esquerda deve estar dentro desta paginação. Então, temos essa paginação e sete para um. Então, estou procurando por este item de paginação. Oh, ok. Então, essas duas coisas não estão em um grupo, então faça-as um grupo. Certo? Então agora podemos dizer item de paginação também. Ok, então agora vou selecionar todos esses itens de paginação aqui. E então terei que fazer isso arrumado para que possamos ver que podemos ter a mesma distância. E então podemos ver que ainda está, nossos dados não Distribute Horizontal Distribute espaçamento vertical. E então nós distribuímos a rolagem horizontal. Então temos tudo bem, mas precisamos fazê-lo no mesmo tamanho porque você pode ver que este não tem o mesmo tamanho. Você não precisa ter essa coisa dessa maneira. Você não precisa ter essa coisa dessa maneira. Não queremos tê-lo dessa maneira. Então, o que precisamos fazer? Precisamos ter certeza de que ele tem na mesma camada. Também podemos aumentar o espaço, mas agora está tudo bem se tomarmos isso, desta forma, mas ainda assim precisamos garantir que cada item seja selecionado da mesma distância. E dessa forma podemos ajustá-lo. Mas depois podemos fazer o arrumado de novo. Mas agora estou apenas focando na mesma, ah, mesma altura e mesmo ponto de partida de cima e de baixo. Você pode ver agora que parece o mesmo. E desta forma podemos. Então deixe-me colocá-lo aqui para que não faça nenhum problema aqui. Bem, vamos fazer isso. Então agora podemos colocar o item um por um aqui. E então podemos garantir que tudo esteja alinhado perfeitamente. Seis, sete. E então isso. Então, agora podemos selecionar todas essas paginação juntos. E posso dizer df, perfeito. Então agora temos tudo do mesmo tamanho. Você pode ver que iniciando a parte superior e inferior e de cada item temos a mesma distância. Está tudo bem. Agora temos nossa originação. Agora, uma coisa que eu quero fazer alterações aqui. Então, este item, quero alterar esse plano de fundo, essa cor de fundo, essa nova cor verde, modo que isso significa que este está marcado e este está selecionado. E agora temos tudo daqui. Para verificar este, o que podemos fazer? Basicamente, podemos selecionar nossa outra grade. Temos nossas opções de grade, certo? Temos nossa coluna de grade principal. Assim, podemos selecionar, dizer apenas para fins de teste. Podemos selecionar e cumprimentar, e então eu posso selecionar tardy. Então podemos, aqui podemos apenas dar uma olhada nisso, que tudo está começando dessa maneira, a partir do meio da linha. Ok, assim você também pode verificar sua grade para que sempre tenhamos, então isso é o que temos agora. Outro certo? Então nossa paginação está feita. Implementamos com sucesso nosso pombo é mostrado, assim como nossa horizontal é chamada View, e este é o nosso cabeçalho. E na próxima parte, tentaremos projetar nossa seção de categoria. Vejo você na próxima palestra. Adeus. 10. Design de categoria de moda: Bem-vindo de volta mais uma vez. Nesta parte, adicionaremos nossa seção de categorias para nossa aplicação de design de moda. Então, em primeiro lugar, o que basicamente fazemos, tentaremos projetar assim para que você possa saber como trabalhar com o contraste da imagem. Então, vou te mostrar essa coisa. Então, primeiro teremos que pegar metade dessa ferramenta retangular. Então, vou adicionar essa ferramenta de retângulo. E antes disso, precisaremos adicionar nosso texto aqui. Então, primeiro vou duplicar este texto aqui, esse título. Vou duplicar este, e vou rastreá-lo aqui. Então, exatamente o mesmo ponto de partida que queremos ter. Talvez aqui. E posso dizer este, certo? Ou podemos tirar um pouco mais de espaço do topo. Posso dizer que escolha a categoria. Portanto, podemos dizer Escolher categoria. E então teremos o mesmo design. Então escolha a categoria. E então queremos ter um retângulo aqui. Então, vou adicionar este retângulo aqui e depois adicionar, desculpe, precisamos desse tamanho, tamanho normal. E então temos essa categoria. Assim, podemos rastrear um pouco mais. E então queremos ter essa categoria, essas dentro desse retângulo. E aqui vamos nós. Então, temos essa opção agora, mas estávamos preparados para uma cor para esta, que é essa cor. Então, quero adicionar essa cor para essa categoria de plano de fundo. E depois disso, teremos que adicionar nosso retângulo para adicionar nossa imagem de categoria. Então, vou adicionar esse tamanho e me certificar de que, ok, primeiro deixe-me adicionar, deixe-me adicionar alguma margem aqui. Então, raio fronteiriço aqui, então cinco. E vamos ver como ele se parece. Talvez possamos tentar adicionar dez. Aqui está você. E então podemos selecionar o cartão daqui. E este é o cartão. Agora queremos adicionar. Então eu vou dizer, vou, para que eu possa renomear este. Posso dizer categoria, categoria, cartão médio. Em seguida, diga cartão de item de categoria. E agora eu quero duplicar este. Queremos ter esse tipo de e nos certificar de que temos o mesmo ponto inicial e final. Então, esse será nosso ponto inicial e final. Então podemos fazer essa coisa 43. Ok, então temos agora quarenta e três, quarenta e três. E nosso início e fim no lado esquerdo é o mesmo. Então, temos esse ponto. Então, se eu selecionar este, posso ver que esse símbolo vermelho está conectado a este. E este também está conectado. Ok, então agora o que vou fazer, vou selecionar todo esse cartão retangular, não descartar. Vou fazer deles um grupo, e depois vou fazer isso , não precisamos arrumar, porque já é que já tem a mesma distância. Então, vou duplicá-lo. E então vou adicionar, vou adicionar mais uma linha aqui. E deixe-me fazer isso, está no mesmo. Então, se você vir esse símbolo vermelho, ele estará no mesmo de cima e de baixo. Certo? Então agora esses dois, vou fazer deles um grupo. Então eu posso simplesmente reorganizá-lo. Certo, legal. Perfeito. Então eu preciso dele no centro deste item. Até agora temos esses 44 ou quatro itens. Agora o que vou fazer, vou selecionar MAS para esses quatro itens para colocar imagens. E então, em vez desta, vou dizer categoria de moda. Temos 36. Vamos selecionar isso. Vamos selecionar todos esses. E vamos adicionar dois diferentes, eu tenho duas almas famosas diferentes. Vai levar algum tempo para adicionar este. Ainda está carregando. E agora temos seis. Então eu quero pressionar este aqui. Quero pressionar este aqui. Quero adicionar este aqui. Quero adicionar este aqui. Este aqui, alguém aqui. Tudo bem, então ainda precisamos de imagem, então vou colocar a imagem. Vou para esta pasta. Vou acrescentar. Vou selecionar isso. E vou selecionar isso. E então eu vou pressioná-lo aqui. Então isso, e isso. Legal. Então agora devemos ser capazes de ver nossas quatro imagens. Agora, em cima das imagens, quero adicionar texto. Então, para isso, o que eu quero ter, este é o nosso grupo, e este é o nosso antigo grupo, certo? Então cresceu quatro. Temos, e temos esse grupo. E nós temos esses e-mails. Certo? Então agora temos essa imagem. Então temos essa imagem, esta imagem. Portanto, se você selecionar essa imagem e ela terá a opção de alterar o contraste do MS. Ok, então você tem, como se tivesse muita funcionalidade que você pode tentar com base no seu, você pode simplesmente mudar a associação de exposição. Algumas outras opções que eles têm. Desta forma, você pode simplesmente arriscar o design principal do EMS adicione cor de fundo ou qualquer coisa. Você pode fazer isso dessa maneira. Então, vou aumentar o contraste. E para este, também vou mudar o contraste. Preciso mudar. Ok, então, por algum motivo, este não está selecionado. Então, vou selecionar esta imagem aqui e também alterar o contraste desta forma. E, em seguida, selecione este aqui. E vou mudar o contraste desta e dessa exposição para que pareça um pouco escuro. E vamos colocar nosso texto aqui. Então este vai ser esse. E aqui vamos nós, temos este. Então, nosso contraste ficará assim. E esses são os quatro. E aqui temos outros MAs. E para esta imagem, vou selecionar esse contraste assim. Essas imagens. Precisamos adicionar isso, não este mês. E então temos essa imagem. E então temos esses sapatos. Tudo bem, então temos tudo isso agora. Então, podemos adicionar o texto aqui. Então, vou pressionar o texto aqui em cima deste. Posso dizer vestido de noiva. Agora, não acontece. Este não é visível de forma alguma. Então, o que temos que fazer? Teremos que mudar a cor para branco para este. Mas ainda assim, não é viável. Então, agora o que podemos fazer? Podemos simplesmente alterar o contraste da imagem desse item para que ele fique visível. Agora, você pode ver isso. Então podemos dizer um vestido de noiva. E então, para este, precisaremos de mais um texto. Então, na verdade, o que posso fazer? Podemos basicamente duplicar esse texto. E então vou colocá-lo aqui. Posso dizer jaqueta de inverno. Então posso dizer jaqueta de inverno e é visível. E então posso dizer sapatos. E então temos este. Então, precisamos mudar isso para sapatos. Então, vou dizer sapatos. E eu deveria colocá-lo no centro. E no centro, temos shows, mas não é visível. Então, vou adicionar um pouco mais de contraste e o pouco escuro para que seja um símbolo vivo. Então, sapatos. E então, para este, posso dizer, oh, eu acho que preciso deixá-lo mais escuro. Então, vou duplicar esse texto aqui. Então, vou arrastá-lo aqui e me certificar de que é. Posso dizer uma jaqueta de inverno. Tudo bem, então temos nossa camiseta para essa arte de prato. Vou duplicar esse texto e depois temos que acrescentar, vou dizer uma camiseta. Mas não parece bom aqui temos dois. Mais uma vez, temos que mudar esse contraste neste só para deixá-lo um pouco escuro. Legal. Esse é o contraste, então este é o gráfico normal. Acho que precisamos de genes este aqui. E aqui vamos nós, temos esse humor. E vou mudar essa duplicata. E então temos este, fragmento. E então temos outra, outra categoria aqui. Mas eu não mudei o contraste, acho mais. Então eu vou ter que Meca isso. E então posso dizer, duplique este. Esta eu posso adicionar à nossa camiseta de inverno. Estou apenas adicionando um nome aleatório. E então temos outro que vai ser capaz de calçar. E então podemos dizer sapatos térmicos. Precisamos fazer isso um pouco de contraste. Aqui vai ele. Então, temos nossas categorias prontas agora. Tudo bem, então você aprendeu a adicionar imagens em cima dos e-mails. Como podemos enviar mensagens de texto? E então você sabe que como você pode adicionar o contraste? Então, esse foi o principal objetivo de mostrar como você pode adicionar este? Então vou parar este vídeo aqui e continuaremos a partir da próxima palestra. Vejo você na próxima palestra. Tchau. 11. Design de seção do boletim de Newsletter: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar uma assinatura que mostrei em nosso design semelhante a esta. Resolva para isso. Então, o que temos? Basicamente, temos este aqui. Tudo bem, então primeiro, vou aumentar o tamanho do quadro ou horizontalmente para que adicionemos, podemos adicionar mais opções aqui. Agora precisamos pegar metade desse retângulo aqui. Vou desenhar um retângulo aqui. E este é o retângulo que eu quero projetar aqui. E então vamos ver como ele se parece. Então, temos esse tamanho de retângulo. Posso diminuir um pouco e então temos esse problema aqui. Então, vou selecionar essa cor também. E depois disso, precisamos adicionar a uma imagem aqui. Para isso, quero acrescentar, quero desenhar um retângulo aqui para colocar nossos e-mails aqui. Então eu quero adicionar a um retângulo aqui. E o que eu quero ter, quero adicionar pouco design aqui. Então clique duas vezes. Então eu quero ter isso. Precisamos selecionar este aqui desta forma, e aqui também desta forma. E no meio. E aqui também dessa maneira. E depois disso, quero adicionar um pouco de raio de água de 20 pixels. E álcalis. Faça isso. Então adicione o que for, 20 pixels. Vamos ver como ele se parece. Parece assim. Agora eu quero colar nossos e-mails aqui. Então, por favor, uma imagem. E vemos bagunça que quero colar aqui, posso colar esta. E assim que tivermos este. E devemos ser capazes de ver nossa imagem aqui. Tudo bem, então também temos um campo de entrada aqui e, em seguida, um título. Então, temos este. Então, vou adicionar rapidamente um texto aqui. E posso dizer para assinar a carta de notícias. Então, temos esse problema aqui. Podemos dizer que assine nossa newsletter. Então, vou aumentar o tamanho da fonte desta. Deve ser de 30 a um pouco maior. E vou mudar a fonte, estilizar esta. Este não. Vou adicionar algo como este. Não exatamente este. Parece bom, mas não é totalmente viável. Então, vamos selecionar outra coisa até que possamos escolher este, subscrever dois boletins informativos. E aqui temos mais dois projetos, que são esses dois projetos que tínhamos anteriormente. Então, o que é basicamente é basicamente atingir nosso design de elipse que tínhamos. Então, vou duplicar este. Então, onde está esse design de elipse de cabeçalho? Portanto, esse design de elipse de cabeçalho está aqui. Então, precisamos subir. Então, precisamos subir e descer. Portanto, esta é a nossa principal ilustração que projetamos anteriormente. Então, o que vou fazer basicamente vou torná-los um componente. Então clique com o botão direito do mouse e crie o componente, ok, para que possamos reutilizá-lo. Então agora está dentro do nosso ativo. Está dentro do nosso ativo. Certo, então temos essa coisa. Então, o que vou fazer, vou apenas duplicar, vou arrastá-lo para cá. Vou arrastá-lo para cá. E, novamente, vou arrastá-lo para cá. E temos nossa newsletter e logo aqui. E então vou adicionar a um retângulo aqui para adicionar o texto aqui. Então, vou adicionar o texto aqui para nossa assinatura, para o nosso botão. Então, deve ficar assim. Então, às 20. E então eu vou escolher este. Vou adicionar esse giz. Então, o que temos basicamente aqui temos esse resultado. Não temos nenhum derrame aqui. Portanto, não precisamos ter nenhum derrame aqui. Então, temos 20, eu acho. Em vez de 20, vamos adicionar festa. Então agora temos esse design tardy. E vou duplicar este. E vou arriscar o segundo tamanho do botão. E vou mesclá-lo com este. Tão rápido, mude o plano de fundo deste para que saibamos basicamente o que estamos projetando. Portanto, esses são todos os botões subseqüentes. Então é assim que nosso segundo botão parece que eu apenas dupliquei. Então, basta duplicar o mesmo botão aqui e depois dobrar em cima. Agora temos este aqui. Acho que precisamos aumentar, precisamos aumentar nossa necessidade de aumentar nosso lado inferior. Então você pode aumentar um pouco nesse tamanho e neste lado. E aqui temos um texto que será nosso texto de espaço reservado. E este vai ter 12 pixels. Muito mais do que isso. Vou colocá-lo aqui. Então, envie um e-mail. E então eu quero adicionar a um ícone do nosso ícone que é chamado r. Podemos dizer ícone de centavo. E só em choque aqui. Coloque-o aqui. Adicione também apenas o texto e o centro. E deixe-me ficar fora do quadro, então ele deve estar dentro do quadro. Agora temos nosso ícone e temos nossos textos. Então eu posso adicionar um pouco mais perto deste. Aqui vamos nós. Temos este e-mail, temos isso. Agora temos esse texto aqui. Teremos que adicionar o botão de inscrição. E vou selecioná-lo para 16. Podemos selecioná-lo 20, acho que assim vinte anos ou descendo o tamanho da fonte para esse tipo de botão. Então, podemos dizer inscreva-se aqui. Legal, temos isso, isso e por que precisamos corrigir esse problema aqui? Então, precisamos adicioná-lo dessa maneira. E então temos nossa imagem, temos nosso design, nossa assinatura e, em seguida, este texto que eu quero adicionar aqui. E podemos adicionar. E vou duplicar esse texto aqui. E para este, vou fazer com que o tamanho da fonte seja 216. E aqui vou adicionar outro texto. Posso dizer. Você obterá longe e desconto por promoção por e-mail. Então você receberá uma oferta com desconto por promoção por e-mail. Há oito para este. Portanto, temos nossa assinatura, receberemos todos os quatro e desconto por promoção por e-mail. Este é o nosso boletim informativo. É apenas o boletim informativo básico. Tudo bem, então projetamos nossa parte de assinatura até agora. E na próxima palestra, tentaremos fazer outra coisa. Então vejo você na próxima palestra. Tchau. 12. Design da seção de rodapé: Bem-vindo de volta mais uma vez. Nesta parte, vamos projetar nossa seção de fotos para isso, terei que aumentar o tamanho do quadro um pouco mais. Tudo bem, então no nosso rodapé temos esse tipo de design. Então temos nosso, temos nossos dois itens, então produto e, em seguida, informações sobre pouca informação e, em seguida, ícone social. Tão rápido vou projetar esse retângulo aqui. E então vou desenhar esse retângulo porque precisamos de um retângulo para adicionar nosso item aqui. E vamos ver como ele se parece. Como o branco parece basicamente. Então, deve ser isso. Então, essas áreas brancas, ok, então vou adicionar a cor do plano de fundo. Sou apenas pasta. Então , parece com isso. Então este é o nosso rodapé. Agora vamos adicionar nosso, vamos adicionar nosso item em uma pasta. Então, primeiro vamos adicionar nosso título e podemos dizer que podemos ver que esse é o aplicativo eficiente. E você pode dizer, todos os homens se vestem. Apenas um nome aleatório que estou apenas adicionando. Não deve ser significativo. O objetivo principal é mostrar esse texto. Então, vamos começar nosso item a partir daqui, laranjas. E então eu vou, vou duplicá-lo. E para esse texto será de 16 pixels, ou talvez 15 pixels. Aqui eu posso dizer isso. Posso dizer vestido de noiva. Então podemos dizer vestido de festa, DJs. E então posso dizer, podemos dizer uma coleção de inverno, coleção janelas. E depois vou adicionar mais um texto aqui e vou dizer os sapatos de alguém. Tudo bem, então temos essa coisa. Então eu vou, vamos dar uma olhada nisso. Tão rápido, selecione todas essas coisas, faça delas um grupo. E aqui vai você. Portanto, não precisamos de uma boa ideia porque ela já está na mesma distância que temos. Então, agora o que posso fazer aqui? Basicamente, podemos torná-los um grupo. E então vou duplicar este. E então terei que duplicá-lo para este item. E então posso dizer vestido infantil. E então temos outra informação, o texto e o lado direito. Então, vou selecionar o texto aqui, e vou adicionar o texto aqui que podemos dizer. E aqui vamos nós. Podemos adicioná-los a partir daqui. E esse tamanho será deste lado é 20, certo? Então este também tem 20. E aqui você quer adicionar informações segundos, digamos Loren Ipsum. Eu só quero adicionar algum texto fictício aqui. Então, para adicionar texto fictício. E podemos pegar, você pode apenas adicionar este texto fictício aqui. Então isso e isso. Então, temos esse texto aqui. E então eu vou desenhar, então você só precisa selecionar a ferramenta Texto e depois desenhar essa inflamação dessa maneira. Para que este lado, para que seja o que você colar aqui, APR dentro disso, dentro desta opção. Mas em vez de 15, então 20 nós adicionamos o 12º Selecionado. E então só funcionará. Ou podemos fazer uma coisa, podemos dar um passo para trás aqui, e então eu posso fazer isso aqui. Então, temos nosso sobre, temos nossas informações, mas ainda assim precisamos adicionar apenas um pouquinho. Acho que daqui podemos ajustá-lo. Legal. Então, temos este e, na parte inferior, temos o ícone shri para este. Então, eu quero criar esse ícone dessa maneira. Então eu não vou retângulo, vou usar a ferramenta elipse. Então, vou adicionar essa ferramenta de elipse dessa maneira e, em seguida, definir a ferramenta Elipse 40 por 4040 e depois 40. E vamos ver como ele se parece. Então, parece com isso. Então nós temos esse 40 e depois vou, vou duplicá-lo. Seleção duplicada. Então, quantos ícones temos? Temos nossos quatro ícones. Temos quatro ícones. Então, vou duplicá-lo quatro vezes três e os quatro e torná-los um grupo. Todo esse item, crescimento econômico. Você pode dizer, podemos dizer como ir. E deixe-me ver, ok, então temos a mesma distância e agora vou mudar a cor de fundo desta. Podemos selecionar essa cor. E agora dentro disso, teremos que adicionar nossa fonte de ícone social que vou tirar ícones do ícone do alimentador. E vou dizer, vou dizer Facebook. Vou dizer Facebook. Então, terei que selecionar todo esse Facebook. Preciso selecionar este dentro disso. E vou levá-lo para dentro. Então nosso Facebook está aqui. E então precisamos adicionar estrela. Então, vou selecionar esse instar, colocá-lo dentro desse quadro e arrastar o ícone do Instagram para dentro dele. Então agora temos nosso ícone do Instagram, mas achamos que precisamos colocá-lo no centro dessa maneira. Sim. Agora temos nosso LinkedIn. Então, temos nosso LinkedIn dessa maneira. E então eu preciso colocá-lo dentro do quadro. E depois disso, temos o ícone do Twitter. Então, vou ver o Twitter. Então, o Twitter vai aparecer aqui e depois colocá-lo dentro. Antes disso, coloque-o aqui. E então aqui vamos nós. Então, temos todo o nosso ícone. Portanto, projetamos com sucesso nosso rodapé é apenas um alimento ou item básico. E vou parar esse vídeo aqui. E na próxima palestra, tentaremos projetar nossa inscrição e login. Vejo você na próxima palestra. Tchau. 13. Design de página para inscrição: Bem-vindo de volta mais uma vez. Até agora, projetamos nossa página principal. Nós projetamos nosso rodapé, nossa parte do boletim informativo por assinatura, nossa seção de categoria sobre paginação, seção de moda, essa origem para a visualização de rolagem. E agora teremos que fazer mais duas coisas. Um deles é para a página de inscrição e login. E outra coisa é que quando você clicar duas vezes nele, mostraremos uma caixa modal pop-up como esse tipo de cartão. E também implementaremos esse tipo de visão de escopo horizontal que fizemos anteriormente. E então faremos, teremos que projetar essa coisa também. Então, para isso, primeiro, vou completar esta página de inscrição e login. Então vamos olhar para ele. E agora temos nossa seção de design aqui. Portanto, para que isso adicione recursos de inscrição e login, teremos que criar nosso quadro diferente para nosso login de inscrição. E vou tentar mostrar mais um design de tela. Então, este é o material do nosso deck. Agora vou selecionar mais um quadro. Então, vamos definir a área de trabalho. Vou mudar o nome, vou dizer em casa. A peça principal. Agora vou selecionar um quadro. E agora desta vez vou desenhar nosso quadro personalizado. Então, vou desenhar um quadro personalizado. Assim, você pode desenhar um quadro personalizado. Vou desenhar neste tamanho. Então, adicionaremos um EMS e, em seguida, adicionaremos nossas informações. Então, vou fazer isso nesse tamanho. Sim. Então, vou dizer que se despense. Vou adicionar um raio de borda em pixel. E não tentando consertar isso, acho que posso corrigir que esse pixel é suficiente para este. E aqui vou adicionar mais um retângulo. Aqui, ou um ângulo indireto. Vamos mostrar nossa EM. Então eu quero, vou fazer um retângulo para que possamos ajustá-lo com os lados esquerdos. E agora daqui, o que podemos fazer? Então, vou fazer isso pouco. E agora terei que adicionar o MS nesta parte. Então, o que posso fazer? Vamos tentar adicionar esse MS. Vamos selecionar esta imagem. E agora, então vou colar esta imagem aqui. Ok, então o que mais temos? Temos outras compras surpreendentes? Talvez possamos experimentar este EMS e vamos ver. Oh, este não. Vou manter o anterior. E aqui precisamos adicionar um texto e esse texto será seno de aprovação. Então, e então teremos que adicionar isso a 20 ou talvez 24. E então eu vou mudar a cor para, vou adicionar uma cor que temos, todos, a escura que temos. Então eu acho que há uma cor verde escura e pré-construída. Então, vou ficar com este. E então aqui também precisamos, agora podemos cortar nossa grade para que saibamos exatamente de onde começamos. Então, temos nossa grade pré-construída. Então eu posso fazer agora? Então esse é o nosso texto. Então, vou colocá-lo aqui. Então, vamos começar a projetar nossos itens a partir disso. Ótimo, ok, então vou selecionar nosso retângulo aqui, e aqui, teremos que desenhar nosso campo de entrada. Vou adicionar o raio de borda em dois pixels. E precisamos adicionar nossa fronteira aqui. Então, na borda, um pixel. E antes disso, deixe-me executar este e vamos ver como ele parece para que saibamos exatamente onde precisamos fazer alterações. Então, temos este e leva algum tempo para fazer essa coisa. Tudo bem, então temos esse design, então vou mudar o plano de fundo deste. Vou torná-lo branco. E então temos esse branco. E dentro destes vou colocar um nome. Vou dizer, coloque uma mensagem aqui. Vou dizer o nome. O nome será esse nome. E em vez de 24 e vai ser 12, será 12º. Precisamos ajustar este. Então esse nome e esse retângulo, vou fazer grupo. E depois vou fazer uma duplicata. Então, precisamos ter dois itens, mais dois itens. Então, um é para e-mail, um é para senha e também precisamos de um para o nosso botão. E antes do botão precisamos de outro item. Então, vou dizer o nome e agora vou mudar o texto, então o nome. E então este será nosso e-mail, será nosso e-mail, e essa será nossa senha. Tudo isso é espaço reservado, texto de espaço reservado. Então, a senha e este serão nosso texto, mas esse texto estará aqui. Então eu vou, vou mudar, remover essas tomadas daqui. E para este, não precisamos ter nenhuma fronteira. Então, precisamos ter nossa cor de fundo, que é essa cor. E agora preciso colocar esse texto aqui. E aqui podemos dizer sair. Tudo bem, e posso colocá-lo aqui. Então, quero aumentar o tamanho da fonte desse texto. Então eu vou adicioná-lo, eu acho, e então posso apenas ter certeza de que está no centro. Agora temos nossa aprovação e podemos adicionar nosso ícone aqui. Então, vou selecionar o ícone Filtro aqui. Vou adicionar esse ícone. Então, vou arrastar este aqui. E vou mudar essa cor para branco e colocá-la no quadro. Tudo bem, então temos nossa aprovação, temos nossa página de inscrição. E aqui eu quero adicionar a um botão Concordar que muitas vezes vemos com termos e condições. Portanto, temos esse termo e condição. E aqui vamos nós. E podemos adicionar um pequeno raio de borda. Então eu posso adicionar a este raio de borda 1010. Posso adicionar este raio de borda cinco. E é assim que vai se parecer. A direita. Portanto, temos essa paginação e acho que podemos adicionar um ícone aqui, que será nosso ícone Don ou ícone de seleção. Portanto, não há nenhum ícone para este. Portanto, não há nenhum ícone para isso. Certo. Portanto, há um ícone. Eu estava procurando por este que se chama ícone Check. Sim. Tudo bem. Este é o nome deste. E vou colocar esse ícone dentro desta caixa. Tudo bem, então nossa página de inscrição está pronta, e agora precisamos adicionar mais um texto aqui. Então, vou selecionar o texto aqui. Posso escrever aqui no texto, posso dizer que já tenho uma conta e depois faça login aqui. Portanto, já tenho um login na conta aqui. Então, se você já tem uma conta, eles podem fazer login clicando aqui. E se eles não tiverem dez, podemos enviá-los para o ritmo de saída. Então agora eu vou, hum, ok, então nossa base de inscrição terminou, e eu vou parar este vídeo aqui, e continuaremos com a próxima palestra. Vejo você na próxima palestra. Tchau. 14. Design de login e página OTP: Bem-vindo de volta mais uma vez. Nesta parte, projetaremos nossa pasta de login e nosso design baseado em ODP. Então, precisamos de um tipo semelhante de design para nossa página de login. Então, o que vou fazer, vou selecionar este quadro. E então vou duplicar esse quadro. Ok, então agora vou fazer a página de login. Certo. Então, vou fazer você, vou dizer para entrar. E também vou alterar o texto para entrar. E então vou mudar isso. Em vez disso, remova este. Vou adicionar essa coisa aqui. E também vou adicionar essa coisa aqui. E não precisamos ter este aqui. Não precisamos ter este aqui. Então, ok, então temos este aqui, para que possamos rastreá-lo aqui. Podemos começar a partir daqui. Acho que podemos reorganizar este. Você também pode arrastar este aqui. Portanto, mantenha 34. E vou colocar esse texto aqui. Então eu posso dizer aqui, não tenho conta. Posso dizer que não tem uma conta. Então posso dizer que posso dizer assinar aqui. E este vai ser seno. Tudo bem, então acabamos com nossa base de login, e agora precisamos de outro design para nossa OTP. Então, vou duplicá-lo. Portanto, temos nossa fase de login e temos nosso login. Agora, tudo vai ser nosso RTP, ODP. Então aqui não precisamos ter este. Não precisamos ter este. Mas ainda assim, precisamos ter um botão aqui em vez desse texto. Podemos, ok, acho que podemos manter esse texto aqui. Você pode, eu posso simplesmente escrever aqui ou o p que vai ficar bem. Então, todo o P aqui. Então, este será o lugar onde a OTP paga. Aqui. Vou mudar isso leva para verificação. Posso dizer verificar. Então, vou dizer “verifique”. Isso vai ser o texto. Aqui eu quero adicionar para caixa retangular para nosso OTP que precisamos colocar. Então, vou dizer esse tamanho. E vou adicionar essa cor branca. E então vou sombrear. E depois um golpe. Sim, um pouco de raio de borda, talvez dez pixels, não dez pixels, cinco pixels. E vamos executá-lo e vamos ver como ele se parece. Até agora. Temos nossa página de login de inscrição. Então este é o nosso OTP paga e parece assim. Está tudo bem. Não precisamos ter esse texto aqui. Então agora eu só preciso duplicar este algumas vezes. Então, vou adicioná-lo. Certo, então precisamos fazer uma duplicata. E depois 23456. Então temos 61 e então podemos ver a verificação, tudo bem. Assim que o verificar, nós os enviaremos para a página inicial. Tudo bem, então projetamos nosso ritmo de inscrição, nosso login paga, nosso ritmo de design. E até agora nós projetamos tantas coisas. Por isso, temos jogadores da OTP cadastrar-se na página , ritmo e base inicial. E então, na próxima parte, tentaremos projetar esta caixa de modelo e também teremos que adicionar nossa prototipagem. Vejo você na próxima palestra. Tchau. 15. Item design de caixa modal: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos projetar nossa caixa de modelo para o nosso item. Para isso, vou criar uma primeira vez, preciso criar nosso quadro personalizado aqui. Então, vou selecionar um quadro aqui. E posso dizer, este é o nosso quadro. Sim, podemos fazer esse tamanho e depois vou adicionar o raio de fronteira dez. E esse nome do quadro vai ser, posso dizer o que posso dizer. Posso dizer lâmpadas modelo de item. Tudo bem, então agora eu quero adicionar imagem. Para isso. Preciso adicionar um retângulo primeiro. E este é o nosso retângulo que eu quero adicionar dez. Ok, então temos um retângulo e eu vou duplicá-lo. Vou adicionar mais um aqui. Então, vou adicionar dois. Ok, vamos colocá-lo no mesmo tamanho. Agora, eu rápido, quero adicionar duas imagens aqui. Então, o que vou acrescentar, terei que adicionar ao EMS aqui. Vou selecionar este e este. E vamos colocá-lo primeiro aqui. Então este está aqui e este. Então, esses são os dois EMS. E como eu já lhe disse como fazer isso, rolando, você já sabe disso. Então, o que vamos aplicar as mesmas técnicas tão rápido. Eu quero fazer, torná-lo um fragmento, fragmentar, torná-lo um quadro. Então, este será um quadro nove. E este será o nosso quadro, quadro número dez. Mas se você quiser, você também pode alterar o nome porque esse número vem de todo o projeto. Ou em nosso outro, em nossa página inicial, fizemos oito quadros. Então, como resultado, ele começará de nove e depois dez. Ok, então agora vou ter que fazer deles um grupo. Então eu vou combinar, desculpe, precisamos fazê-los em um grupo, que será nosso grupo, elefante novamente. Ok, então agora o que precisamos fazer basicamente, então precisamos clicar neste conteúdo do clipe e então precisamos dimensioná-lo até este pequeno espaço aqui. Certo? Então, temos essas coisas e tudo bem, então outra coisa que eu esqueci de acrescentar, deixe-me adicioná-lo rápido. Tão rápido, vamos selecionar este. Esqueci de adicionar esse efeito, então vamos adicionar esse efeito aqui primeiro. E se o executarmos, também podemos executar este desta forma para que possamos vê-lo. Então, temos nosso quadro. E eu vou, combinamos tudo isso em um quadro. E então tudo bem, então parece bom. Ok, então há um problema aqui. Este não tem uma fronteira para, quero dizer, para este. Então, se olharmos aqui, se eu olhar para este quadro número dez, e este é o quadro número dez, mas esse quadro não tem bordas, então precisamos adicionar água a este quadro para que tenhamos exatamente o mesmo. Ok, então selecione o quadro e adicione o raio da borda aqui, não a borda. Então, temos esses dois raios fronteiriços. Tudo bem, agora podemos selecionar nosso mainframe para esses dois. Então, clique na área de transferência e , em seguida, faça isso dessa maneira. Agora vá para essa prototipagem. E aqui na rolagem horizontal, agora, devemos ser capazes de ver, devemos ser capazes de rolar nosso item agora, precisamos colocá-los para fazer o item aqui, para botão aqui. Então, já temos nosso botão pronto. Então, podemos reutilizá-lo. Reutilizá-lo. O que podemos fazer? Onde estão nossos botões? Então, temos nossa casa. E deixe-me minimizar isso para que saibamos onde está nosso botão. Então, temos nosso item de paginação, temos nosso cartão de moda de quadro e temos nossa seção principal, retângulo de paginação de seção. Então, seção principal. Essas são as duas coisas que temos. Temos o ícone direito, temos o ícone da esquerda. Certo, então o que podemos fazer aqui? Assim, podemos duplicá-lo e, em seguida, você pode arrastar um ícone. Podemos arrastá-lo daqui. Na verdade, vou desfazer este. Vou desfazer este aqui. Espero que não tenhamos quebrado nada. Espero que não tenhamos quebrado nada. Certo. Está tudo bem aqui. Então, o que vou fazer basicamente, vou chegar onde está. Então, vou torná-lo um componente para que possamos reutilizá-lo. Portanto, crie um componente e o ícone da esquerda será criado. Componente. Tudo bem, agora não precisamos arrastá-lo e soltá-lo daqui. Podemos fazer isso diretamente a partir do nosso componente, de nosso ativo. Então, temos nosso ícone à esquerda, então vou arrastá-lo para o ícone direito. Vou arrastá-lo aqui. E então temos nosso ícone à esquerda. Então, vou arrastá-lo para cá. Como é fácil, então não precisamos fazer a mesma coisa de novo e de novo. E agora outra coisa é que precisamos colocá-lo dentro da nossa caixa. Ok, então podemos ter certeza de que temos, são exatamente a mesma distância aqui. E também precisamos adicionar este desse tamanho. Assim, podemos fazer desse tamanho. E deixe-me ver como parece. Então, parece assim. Certo, então precisamos nos desculpar. Acho que cometemos algum erro aqui, então vou colocá-lo aqui. Ok, então temos agora a mesma distância desse tamanho e também o ponto de partida é o mesmo. Certifique-se de que temos essa coisa. Então, temos semi-ponto de partida. Agora, se eu passar para essa prototipagem, então, para este botão, já temos, já temos um protótipo. Está vindo do anterior, então vou remover este. Agora, não temos nenhum protótipo para este botão. E, à medida que conhecemos o componente, ele pegou todas as funcionalidades e recursos do nosso padrão anterior. Então você só precisa selecionar este aqui. E a partir daqui, você só precisa remover o protótipo. Então, não temos nenhuma prototipagem agora neste padrão. E podemos fazer sobre prototipagem daqui. Então, agora vou adicionar interações. Aqui. Clique nele, clique em onclick. E então, a partir daqui, precisamos adicionar um pergaminho para onde queremos rolar. Queremos rolar. Queremos rolar para este é o quadro nove. E eu preciso verificar qual deles é exatamente o quadro nove e qual deles é cortado dez. Então este é o quadro nove e este está emoldurado em agosto. Estamos agora de nove. Teremos que ir para o quadro dez. Ok, então precisamos agora, devemos passar para rolar para o quadro número dez. E então precisamos ter animação íntima. E então, em vez de sair fácil, precisamos ser gentis. Ok, então precisamos dizer gentil daqui até aqui. Ok, então vai se parecer esse tipo de, esse tipo de inovação. E a partir deste, se clicarmos nele em interações, selecione uma rolagem de nenhuma para rolar para adicionar o quadro nove. Este é o nosso quadro nove. E em animação. E, em seguida, selecione isso e gentil. Ok, então espero que possamos ver que podemos, podemos, podemos rolar da esquerda para a direita e da esquerda para a direita. Então, aprendemos a fazer isso. Tudo bem, agora, o que mais temos? Temos que adicionar um texto e, em seguida, precisamos adicionar texto normal. E agora algumas outras opções. Então, vou adicionar R. Então agora vou voltar para a seção de design aqui. E aqui. Primeiro, vamos adicionar essa grade de layout para que saibamos de onde podemos começar. Podemos começar com este. Então, vou adicionar um texto. Então, vou editar o texto aqui. Vou dizer, vamos dizer, vamos começar daqui. Podemos dizer facial de verão, o vestido de verão, ou posso dizer camiseta de verão. Apenas texto aleatório. Ok, então temos isso em vez de 15, vou selecioná-lo para 20 para que pareça maior. Então T Alguns são camisetas. Aqui vamos nós. E depois disso eu quero ter, então vou copiar esse texto de Loren ipsum. Mais uma vez, vou adicionar esse texto aqui. E vou desenhar um texto. E vou colá-lo aqui, mas não precisamos ter gêmeos. Precisamos ter um 12º. Legal, parece bom para que possamos reduzir a distância entre esses dois itens. E então eu também posso reduzir essa altura desse texto. Então, temos essa informação agora. E depois disso, queremos ter um ícone de mais. Um ícone de preço e, em seguida, botões mais e menos. Então vou dizer dólar por 5450 e o tamanho será 20. Tudo bem, parece bom e ainda é, precisamos adicionar algumas opções aqui. Então, aqui também precisamos ter um plus e, em seguida, o número e, em seguida, o botão de menos. Então, para isso, vou adicionar um retângulo aqui. Vou desenhar rect, tamanho pequeno do retângulo, adicionar o raio de borda cinco e depois mudar a cor para branco. Então podemos adicionar nosso traço e vamos ver como ele se parece. Parece assim. E então eu vou para o Comando D. E o D do que vou ter que fazer. Então, vou adicionar aqui menos o ícone, que leva como menos. Mas você definitivamente pode desenhar. E então terei que adicionar variar porque o tamanho e aqui podemos colocá-lo no centro. À direita, podemos colocá-lo no centro. E então precisamos adicionar um número aqui. Posso dizer cinco, mas vamos mudar o tamanho da fonte para o tamanho normal, talvez 20, e depois colocá-lo dentro do texto. Então o número é cinco. E depois vamos adicionar mais um texto, que será nosso ícone mais. Então, esse ícone de mais. E, novamente, vou adicioná-lo porque o tamanho do tamanho da fonte. Então vou dizer que 40 não são 44, este, acho que 36 ou 24. Preciso colocá-lo no centro. Então agora temos esse menos e, em seguida, temos esse ícone de mais. Vou escrever. Parece bom, mas agora o que precisamos ter? Temos outras coisas a acrescentar. Temos esse excise oh, LMS e, em seguida, este e este botão. Então, vou acrescentar, então o que posso fazer aqui. Assim, podemos fazer todos esses itens em um grupo, isso, isso e isso, e também isso, torná-los um grupo. Ok, eu sei que podemos dizer o número de itens. E aqui precisaremos adicionar nosso tamanho. E vou adicionar efeitos deste. E vamos ver. Então nós temos isso e eu quero ter um raio de borda de cinco pixels, e então eu posso duplicá-lo quatro vezes. Então eu vou dizer Control D. Então, em vez de fazer isso diretamente primeiro, vamos adicionar texto aqui. E eu posso dizer grande, e este não vai para lá. Então, serão 20 pixels. E então podemos colocá-lo aqui. Podemos colocá-lo aqui, não estão no lado direito, mas no lado raro. Então agora temos isso e temos isso. Vou pressionar Command G. E agora posso fazer uma duplicata desse item. Acho que é grande. Então este vai ser médio. Este será pequeno, e este será extra grande, extra grande. Esses textos, acho que preciso ajustá-lo. E eu tenho essa coisa aqui. Mas não é do mesmo tamanho, então precisamos ajustar este aqui. Tudo bem, então agora parece o mesmo. E embora também possamos verificar dessa maneira, podemos selecionar todo esse grupo. E então podemos verificar nosso arrumado. Portanto, há um totalmente desligado. Então, temos essa coisa aqui. E aqui vai você. Temos essa coisa que acho que ainda não está no centro. Então eu quero ter certeza de que está no centro. Sim, parece central. Mas vamos verificar novamente. Agora mesmo. Está no centro. E certo, então eu, agora precisamos adicionar um botão aqui. E esse botão será um botão e três cores. Então, eu quero adicionar a ferramenta elipse aqui. Então ferramenta Elipse. E então aqui eu quero adicionar 45. Estes são nossos 45 elevadores. E aqui eu quero adicionar itens T. E agora posso escolher esse número e este, e também este. Temos o ícone T. E agora temos que adicionar mais um botão. Para isso. Precisamos desenhar um retângulo aqui. E então podemos adicionar esta 25ª célula. E aqui vamos nós. Precisamos tensionar nossa cor. E vou adicionar o plugin. Então, precisamos selecionar nosso ícone de carrinho. Portanto, este é o nosso ícone de carrinho. Vou colocá-lo aqui. E o que eu quero ter, então eu preciso primeiro colocá-lo na caixa, no quadro e depois mudar a cor para branco. E então terei que editar o texto. Então eu vou dizer, vou dizer Adicionar ao carrinho. Para x igual, temos Adicionar ao carrinho. Tudo bem, então temos nosso design de botão agora. Mas para o tamanho da fonte, acho que, para as fontes, acho que posso alterá-la para 14. E nós temos isso? Podemos levá-lo um pouco mais perto desse ícone. Então, temos nosso botão, temos nosso design. Mas aqui eu quero ter um ícone, que será esse ícone, que é nosso ícone de roupas. Então, vou colocá-lo aqui. Então, vou mudar a largura e a altura para 35 por 35. E arraste-o aqui. E vamos ver como ele se parece. Está fora do quadro agora, então, arraste-o para dentro do quadro, então só podemos vê-lo. Então agora temos nosso ícone, temos nosso design e podemos fazer é ligar. Tudo bem, então finalmente temos esse fim, este. Agora, na próxima parte, tentaremos conectar esta caixa de modelo com nosso mainframe, onde temos nosso, onde temos nosso item. Então, quando o usuário clicar neste item, abriremos esta caixa de modelo. Então vou parar este vídeo aqui e continuaremos com a próxima palestra. Vejo você na próxima palestra. 16. Sobreposição do protótipo para mostrar uma caixa modal: Bem-vindo de volta mais uma vez. Nesta parte, adicionaremos nossa caixa de modelo, nossa caixa de modelo de item com nosso cartão. Tão rápido, deixe-me administrar esta casa. O que podemos ver em nossa casa. Portanto, esta é a nossa caixa modelo que precisamos conectar. Certo, então, por isso, digamos que quando o usuário clicar neste item, queremos mostrar esta caixa de modelo, que é o nosso modelo de item funciona. Então agora esta é a nossa página principal e esse é o nosso design principal. E no fim de semana horizontalmente Skoll, podemos rolar desta maneira. E então temos nosso design de paginação. Temos nossa seção, temos nossa paginação. Temos nosso rodapé. Então agora eu quero, e vou clicar nele. Este cartão, quero mostrar nossa caixa modelo que acabamos de projetar aqui. Ok, então agora vou clicar neste modo de protótipo aqui e depois selecionar este quadro. Somente este quadro. Agora, quando você seleciona este quadro, você pode ver que esse quadro, ok? Então agora terei que adicionar essa interação. Então clique nele, clique e precisamos ter uma opção rápida. E então aqui, em vez de navegar para, precisamos selecionar Abrir. Abrir excessivamente significa a caixa modelo que mostraremos onde queremos mostrar. Queremos mostrar com o que queremos mostrar a você e mostrar nosso modelo de item funciona. Agora aqui você verá algumas opções. Então este já está conectado. Certo? Então agora, se eu vier aqui, se eu clicar aqui, posso ver nesta caixa de modelo. Certo? Mas ainda assim precisamos adicionar algumas opções e esta também está funcionando. Então aqui temos duas opções. Um está próximo quando um clique fora, significa que, se eu clicar fora da caixa modal, queremos fechar nossos terrivelmente não são. Atualmente, ele não está funcionando. Então, vamos selecionar este. E vamos ver, agora ele vai remover se eu clicar em RC agora, na verdade, ele não parece sobreposição. Estou nos livros de modelo porque quando abrimos a caixa modal, que geralmente vemos algum tipo de sombra, como o fundo vai ficar um pouco de desfoque, assim por diante eles têm essa opção de adicionar um fundo por trás da sobreposição. Selecione este. Agora, o que podemos ver? Agora podemos ver este agora. Parece muito bom. Parece que o modelo original funciona agora, tipo de coisas que costumamos ver. E agora aqui está uma opção. Então, quanta cor você quer, como se você adicionar 100%, então ele lhe dará todo o fundo preto. Se nós os adicionarmos, então você obtém este, esse tipo de solo, dê uma festa. E agora como você quer mostrar sua opção. Quero dizer, como você quer adicionar seu modelo funciona. Então, temos esse tipo de antecedentes agora. Agora, se eu clicar, nosso site será removido. Agora, podemos ver que nosso modelo está vindo do lado esquerdo, mas também podemos selecionar do lado direito, do lado esquerdo. Agora, se eu clicar nele, ele virá do lado esquerdo. Também podemos selecionar a partir do TAF. Então agora ele virá do topo. Então eu vou manter este n. Agora, novamente, precisamos trabalhar neste ícone. Agora, se eu clicar nisso, ele deve continuar, mas não está funcionando agora, assim por diante. Que o que vou ter que fazer, terei que ir para este quadro, que é esse quadro. E aqui terei que selecionar este. E agora preciso adicionar a interação aqui. Então, o que eu quero dizer aqui, quando onClick, o que eu quero, quero dizer sobreposição próxima. Ok, agora vou conectá-lo aqui. Agora, se eu clicar nele, ele vai fechar, abrir este e depois fechar. Então, também posso adicionar a dimensão aqui. Fechar sobreposição. A sobreposição vai voltar diretamente. Então, ele vai ligar automaticamente de volta do oficial do impedimento. E acho que preciso ajustar esse design um pouco. Então, vamos voltar ao design. Sinto muito. Preciso, você queria colocá-lo aqui neste tamanho. Este é o nosso seno. E faça isso. E podemos simplesmente chamá-lo, podemos clicar no nosso lado. Vai continuar, Remover e depois clicar nele. Tudo bem, perfeito. Portanto, temos todo o nosso design e, na próxima parte, adicionaremos essa prototipagem para inscrição e pagamento de login para inscrição e pagamento de login. Vejo você na próxima palestra. 17. Protótipo para inscrição e página de login: Bem-vindo de volta mais uma vez. Nesta parte, tentaremos adicionar prototipagem para nossa base de inscrição e login. Tudo bem, mude tão rápido para a opção de protótipo. E agora a partir daqui, e agora precisamos clicar no botão Inscrever-se, clicar no botão Inscrever-se e, em seguida, adicionar indireta. E aqui clique. E em vez de navegar para clicar em Abrir sobreposição porque queremos mostrar o nosso, o que queremos aparecer na sobreposição? Queremos mostrar a base de inscrição. Então, aqui, selecione toda essa opção e também esta. Então, em vez de instantâneo que eu quero ter, quero dizer mude e depois adicionar o movimento do duro. E então você pode selecionar, você pode selecionar a alça. Ok, então agora deixe-me tentar. Então, se eu clicar em aprovar, então temos esse design agradável. Então, precisamos adicionar qualquer um como o plano de fundo a 40% porque temos fundo branco. Agora parece que temos esse problema, talvez 50%. Agora parece bom. Então, quando o usuário clicar na página de inscrição, queremos enviá-los para a página inicial. Ok, então agora primeiro em uma imagem, primeiro no protótipo de login. Então clique no login. Então clique no login e, em seguida adicione interações, clique nele. E aqui você precisa clicar novamente em abrir sobreposição. E a partir dessa sobreposição aberta, desta vez precisamos selecionar nossa página de login. Clique neste item, selecione o contraste de cores para 50%. E na animação morphing, o que quiser. E então gentil. Agora, vamos ver. Se eu clicar no login. Então, estamos em fase de assinatura, mas há um problema. Eu não notei este. Ok, então temos outra imagem de fundo, outra imagem aqui. Então deixe-me resolver este rapidamente. Então, temos nosso rosto de login aqui. Então, de onde essa coisa vem. Então, vou remover este, e agora ele se foi. Então, nosso login está feito. Agora, quando o usuário clicar nisso, no login, queremos mostrá-los para a página inicial. Certo, então vou voltar ao protótipo. Quando o usuário clicar no botão de login, queremos enviá-lo para a base inicial. Então por diante, clique e navegue até onde queremos ir para nossa página inicial. E então, em vez de instantâneo, quero dizer para entrar e sair. Certo, então vamos tentar. Ok, então estamos na página inicial, clique nela, login estava na página inicial. E quando o usuário clicar na página de inscrição, nós os enviaremos para a fase de login. Após a aprovação, nós os enviaremos para a página de login. Então, vou adicionar indireta, clicar nele e, em seguida, posso dizer navegue para onde você chegar. Vamos enviá-los para o ritmo de login. Em vez de exemplo, acabamos a dizer morfina e, em seguida, essa coisa. Então, assine e depois assine. Ok, então há um problema aqui. Agora, pensando logicamente que temos nossa caixa modelo. Podemos dizer que, se você chegar, teremos que sentar sobreposição aberta. Certo. Então abra a sobreposição para a fase de login. Certo, então agora vou voltar. Agora, se eu clicar no cadastro temos este d. Agora, se eu clicar na fase de inscrição, agora estamos na página de login, e se eu clicar na página de login, estaremos em nossa página inicial. E outra coisa que precisamos adicionar já tem um login de conta aqui. Mais uma vez, ele vai para nossos colegas de login. Então clique nele e, em seguida, clique em Abrir sobreposição. E a partir daqui, precisamos clicar em Login aqui e depois adicionar 50 versa. E em vez de instância, adicione a movimentação em um pouco difícil. Portanto, já tem uma conta, já tem um login de conta aqui. Então, faça login e, se entrar, então quando estiver em casa e há outro ok, então cometemos um erro aqui porque vou rapidamente adicionado aqui. Portanto, não tenha uma conta inscreva-se aqui. Então eu preciso adicionar um texto aqui, que será N é um erro. Então, assine aqui. Se não tiver uma conta, então clique nela e, em seguida, precisamos enviá-la. Precisamos enviá-los para se inscrever é sobreposição aberta. Queremos ir para o ritmo de inscrição e, em seguida, passar instantaneamente para o site. Ok, então adicionamos isso. Vou remover esse protótipo do design de pares. Então, se você clicar no login, nós os enviaremos para a fase RDB porque temos nossos jogadores OTP. Ok, então agora, então clique nele. Então, onClique em sobreposição não aberta. E este vai ser OTP e adicionar. Todas essas coisas. Mova-se do dedo do pé e vai ser 50%. Então, faça login, cole aqui, não tenha uma conta inscreva-se aqui. Já. Faça login na conta aqui. E, em seguida, clique no login para que enfrentemos, mas perdemos nossa imagem. Então, vou consertar este aqui. Então, temos essa imagem. Então eu vou, vou duplicar rapidamente, vou duplicar rapidamente este EMS A partir daqui. E vou arrastar este. Tudo bem, então temos nossa imagem aqui. E agora, quando você clica duas vezes na verificação, nós os enviaremos para a página inicial e voltaremos ao protótipo. Quando eles clicam neste botão, adicionamos uma direção e será nosso onclick, navegue até onde queremos ir, queremos ir para casa colar. E vai ser instância. Ok, então agora se eu clicar na verificação, estamos aqui. Então, agora clique no login e eles entrarão serão nossos pares OTP da pasta OTP. Se eu clicar nele, passaremos para este. Então, estamos em nossa base de inscrição. Então, terei que corrigir esse texto. Já. Tenha uma conta. Então, estamos em uma página de login. Não tenha um sinal de conta aqui e depois assine. Faça logoff e, em seguida, assine e confirme. Certo, e se eu clicar nele, podemos ver nossa caixa de modelo e, em seguida, adicionamos a opção de chamada de artistas também. Tudo bem, então adicionamos todos os tipos de prototipagem. 18. Design de exportação e compartilhamento: Bem-vindo a esta palestra. Nesta parte, vamos aprender a exportar nosso design. Até agora, criamos para frame. Um deles é inscrição, login, design de itens domésticos e arte se você enquadrar. Então, digamos que eu queira exportar essa casa rapidamente. Para isso, basta selecionar o quadro que eu quero exportar. E então, na parte inferior, há uma opção chamada Exportar. Clique no ícone de mais. Aqui, há vários itens. Quantos itens você deseja exportar? 12 ou três, o que você quiser. Tipo, sou pobre, como um X0 para X. Depois, o formato. Quero ter um formato JPEG e incluir essa coisa. Agora, você pode simplesmente explorar a quantidade, exportá-la, ele vai exportar seu design. Portanto, dependendo do tamanho e das MAs ou do que quer que você tenha adicionado, isso levará tempo com base nisso. Então agora ele está exportando. Levará um tempo para que o papel seja exportado. Dessa forma, você terá que selecionar seu quadro e clicar no botão Exportar. Então ele vai. Você também pode selecionar o formato que deseja ter para exportar. E então você também pode nosso rosto e você não pode esperar por eles, tornar-se menos moldado, sentar-se no espaço. Então, vou clicar em L1 para você possa ver que ele foi baixado. Então, agora, se eu clicar nele, poderemos ver nossa página inicial. Então esta é a nossa página inicial que acabamos de projetar. Aqui você pode ver que tudo está aqui. Tudo está aqui. Esta é a nossa imagem. Parece muito bom. Tudo bem, então agora vamos exportar nossa base de inscrição. Então, basta selecionar o quadro e, a partir daqui, exportar e, em seguida, selecionar JPEG e, em seguida, exportar a peça de logon. Em seguida, clicarei nele para verificá-lo. Então este é o nosso cadastro ou quadro, e então este é o nosso login. Então, se eu quiser importar, exporte nosso lado para que eu vou adicionar esse login e depois vou clicar nele. Este é o nosso login, depois nosso OTP. Então clique nele e vou explorar tudo. E então o último temos nossos modelos de itens. Então este é o nosso OTP e temos nosso modelo de item aqui. Então, temos nossa exportação. E é assim que podemos ver. Este é o nosso design de modelo de item. Tudo bem? E a partir daqui você também pode compartilhar. Então, só precisamos clicar no botão Compartilhar. E você pode selecionar, ver ou editar, pode, apenas, eles podem ver a bagunça. E então você pode simplesmente colocar o endereço de e-mail do membro da sua equipe e , em seguida, enviar convite. Ou você pode simplesmente copiar o link e depois compartilhá-lo. Certo? Isso também vai funcionar. Então, copie o link e, por exemplo, você pode compartilhá-lo aqui. E deixe-me abri-lo em uma janela diferente. Agora vou colá-lo. E não devemos ser capazes de ver nosso design aqui. Então, ele vai carregar dois vai levar um pouco de tempo. E então eu quero dizer algumas coisas aqui e aqui. Você também pode obter código incorporado. Você pode adicionar. Você também pode, se quiser, também pode publicar na comunidade. Eles têm tantas opções aqui. Aqui vai. Então esse é o nosso design. Agora, ele está pedindo login, mas para ver este, não precisamos fazer login. Podemos acessar nosso design aqui. E dependendo de quantos arquivos você tem, leva tempo para carregar. Podemos ver todo o nosso quadro agora aqui, mas ainda levará algum tempo para carregar nosso MS e porque temos muitas imagens, então agora esta é a nossa página inicial. Então, é assim que você poderá compartilhar isso com os membros da sua equipe. Eu posso ver que é só um que você sente falta disso. Diga que qualquer um pode ver. Mas se você tiver acesso de login e, em seguida, você será capaz de ver outras funcionalidades. Tudo bem, então vou parar este vídeo aqui.