O curso completo da Adobe XD UI/UX – projete aplicativos e protótipos

1. Introdução: Oi lá. Bem-vindo ao curso completo do Adobe XD UI UX. Neste curso, vamos aprender a projetar interfaces bonitas para dispositivos móveis e web, e como transformá-las em protótipos interativos que podemos compartilhar com os membros da nossa equipe, com nossos colegas e nossos clientes quando ele era Nemo Tommy e eu sou seu instrutor para este curso. Nos últimos 12 anos de prêmio em dezenas de projetos móveis e web para serviços por conta própria e em outros clientes, salvamento foi apresentado em sites como a Forbes. Criar produtos é minha paixão e adoro compartilhar um pouco disso com você neste curso. Neste curso, vamos trabalhar em projetos reais para uma empresa de entrega de alimentos chamada mordidas saudáveis. O primeiro será um aplicativo móvel onde os usuários podem realmente usar esse aplicativo para pedir comida para entrega. E o segundo será um site para mostrar o que mordidas saudáveis têm a oferecer aos clientes em potencial. Faremos tudo isso no Adobe XD se você começar a machucar Não se preocupe. Este curso é destinado a iniciantes em todo o caminho através de especialistas que estamos projetando há vários anos. Mas agora eles querem aprender um novo software. Vamos começar instalando um mar, passando por todos os recursos para acabar com as ferramentas às quais temos acesso. E então vamos entrar diretamente nos projetos e aprender como você usa coisas como componentes, grades repetidas e estatísticas para tornar nosso processo de design mais rápido. Vamos até usar esse modelo da Apple para montar os designs de aplicativos para iPhone. À medida que aprendemos a fazer isso, vamos seguir em frente e também explorar a marca e aprender a criar um logotipo, como montar um esquema de cores e um conjunto tipos acostumado para o nosso projeto. Assim que aperfeiçoarmos nossos projetos, vamos aprender a realmente exportar esses projetos para fora do XC, compartilhá-los com talvez membros da equipe, chamá-los de seus clientes e também aprender como podemos criar protótipos interativos que podemos até testar em nossos próprios dispositivos móveis, que são super legais. Se você quer misturar o próximo estágio de design ou o próximo cliente de design para sua empresa. E este curso é exatamente para você. Se você estiver pronto para começar, direto e eu te vejo neste curso. 2. O que é Adobe XD?: Estamos quase prontos para entrar e explorar o Adobe XD. Mas antes de fazermos isso, queremos passar rapidamente pelo que haverá Stephen para que tenhamos uma ideia do que vamos esperar e de futuras palestras. Então, o que é o Adobe XD? Adobe ICSI é um software de design baseado em aplicativos que essencialmente permite que você aplicativos móveis e da Web em um ambiente fácil de usar criado especificamente para projetar aplicativos móveis e da Web. Agora, é claro, você pode usar o Adobe XD para outras coisas, como um design de jogos ou apenas um design gráfico geral. Mas o principal objetivo disso é para aplicativos móveis e web. E é exatamente nisso que vamos trabalhar neste curso também. O Adobe XD vem com um recurso de prototipagem em tempo real realmente poderoso que vamos explorar. Depois de projetarmos nosso aplicativo, iremos em frente e criaremos um protótipo a partir dele. Essencialmente, seu protótipo permite que você tenha uma ideia do que esse aplicativo móvel ou web parecerá ou será para um usuário quando for concluído. Isso inclui conectar todas as telas que você projetou para que possamos dar uma ideia a um cliente ou colega sobre como esse produto ou aquele aplicativo será assim que esse produto ou aquele aplicativo for desenvolvido, esse recurso economizará muito tempo quando se trata de criar um aplicativo móvel, especialmente para os desenvolvedores, iria realmente colocar esse design em ação. Porque com um protótipo, podemos realmente ter uma ideia do que realmente queríamos o aplicativo antes realmente escrever uma única linha de código. E será que o XT torna muito fácil para você compartilhar seus projetos com clientes e colegas. Para que inclua compartilhamento de pranchetas específicas, se você quiser, ou um projeto inteiro, ou até mesmo poder compartilhá-lo, seu protótipo com outras pessoas e criar vários andares para elas para ver o que se trata o aplicativo. E, em seguida, exploraremos todos os recursos de compartilhamento e recursos de exportação durante todo o curso. Agora, o Adobe XD está disponível gratuitamente, teste de sete dias, que você pode se inscrever e usar, e então você pode realmente obtê-lo por 999 dólares americanos por mês. E isso é apenas uma taxa de assinatura de aplicativo apenas para o Adobe XD. Mas se você quiser mais da Adobe, se quiser instalar o Photoshop ou o Premiere ou outras ferramentas, você também pode fazer isso por um preço um pouco mais alto. Mas pode valer a pena se você estiver realmente explorando outro design ou qualquer outro software for da Adobe. E, em seguida, na próxima palestra, passaremos pelos diferentes preços, bem como como realmente instalá-lo em seu computador. Então eu te vejo lá. 3. Como instalar o Adobe XD: Pronto para começar instalando o Adobe excede. O primeiro passo é seguir em frente e abrir seu navegador. Podemos nos inscrever no Adobe XD por meio do site da Adobe. Então, tudo o que você precisa fazer é ir até a barra avançada do Adobe.com XD e pressionar enter. Depois que o site for carregado, você será levado a esta página para o Adobe XD, que é onde eles explicam como ele funciona e dão a você alguns vídeos de como você pode fazer design de aplicativos, web design ou design de aplicativo, design de marca e jogo com Adobe XD, o que é bem legal, você pode assistir a essas animações para ver o que vai passar. Isso é incrível. E se você vir aqui, você pode realmente ir em frente e descobrir alguns dos recursos que ele tem a partir daqui. Agora, é claro, não entraremos em muitos detalhes com os recursos no site, porque vamos realmente passar por todos esses recursos ao longo do curso. Então, vamos voltar para a página principal aqui. E depois de rolar para baixo aqui, você pode ver que esse é o preço que mencionei na palestra anterior. Se você quiser apenas usar o Adobe XD em si, ele está disponível em 999 dólares por mês, o que acho que vale a pena considerar que um EUA, você uma tonelada de recursos. E você pode usar o aplicativo único. Você não precisa se inscrever todos os aplicativos, a Adobe Creative Cloud. Mas se você quiser usar todos os aplicativos e a Creative Cloud, incluindo Photoshop, Illustrator e assim por diante. Você pode ir em frente e assinar esta opção aqui, que começa em 5299 por mês. Agora, é claro, como mencionei, o Adobe XD vem com uma avaliação de sete dias. Então é aí que vamos usar para este curso aqui. Se você não tiver o Adobe XD e estiver apenas testando. Ou você quer passar por este curso e aprendê-lo antes de comprá-lo, que é o que eu recomendo que você possa seguir frente e simplesmente clicar nos testes gratuitos. O que vamos fazer. Depois de fazer isso, ele lhe faria algumas perguntas para indivíduos, para alunos e professores, que você pode usar para obter algum desconto educacional. Ele requer um ID válido, então você pode ter que enviar um ID para realmente mostrar que você é um aluno. Ou você também pode se inscrever como uma empresa. Mas vamos seguir em frente e usar apenas para indivíduos. E clique em Continuar. Quem pediu para você escolher um plano novamente, você pode escolher apenas o Adobe XD ou todos os aplicativos da Creative Cloud. Por enquanto, estamos apenas escolhendo XD para o propósito deste curso. Quando eu clico em Continuar, ele perguntará se você quer uma opção mensal ou um ano, a opção para o faturamento. Vamos continuar mensalmente. E, claro, vamos usar este teste de sete dias para começar. Portanto, não vai realmente seguir em frente e cobrar. Carter é alguma coisa neste momento? Nós clicaremos em Não, graças a esta oferta adicional que ele lhe dá. No próximo passo, ele apenas pedirá o endereço de e-mail. Então, vou entrar no meu endereço de e-mail aqui. Acabaremos de configurar você com uma conta. Se você já tiver uma conta da Adobe, solicitará sua senha. Caso contrário, ele pedirá que você se inscreva aqui e adicione uma senha. Vá em frente e aproveite esse tempo para configurar sua conta. Se você ainda não tiver uma conta da Adobe, depois de chegar à página de checkout, ela seguirá em frente e, na verdade, solicitará que você insira métodos de pagamento. Então, deixe-me ir em frente e clicar em assinar. A partir daqui, você poderá ver quando começará a carregar. Então eu tenho o teste gratuito disponível até 16 de dezembro. Então, essencialmente, você tem acesso gratuito ao Adobe XD até a avaliação e a data que você vê aqui. Até lá, você pode usar totalmente o produto gratuitamente. E depois disso, será, começaremos a cobrar você com base na sua assinatura. Então, vamos em frente e clique em Começar. Agora, para que o Adobe XD seja instalado, você realmente precisa instalar a Creative Cloud, o que permite instalar. Serão produtos e os manterão atualizados em sua máquina. Vá em frente e permita que a Creative Cloud abra para instalar aqui. Quando a Creative Cloud abrir, ela ficará assim. E você poderá ver daqui o XD sendo instalado. Agora, é claro, porque eu já o tenho instalado, ele irá avançar e atualizá-lo. Como não o atualizei, ele está atualizando-o em vez de instalá-lo. Mas para você é dizer que instale se for a primeira vez que você instala o XD em sua máquina. Então dê algum tempo e depois que estiver totalmente concluído e atualizado, iremos em frente e abriremos e exploraremos nas próximas palestras. 4. Como gerenciar sua conta Adobe: Antes de entrar no Adobe XD e explorar o que se trata e usá-lo. Eu só queria fazer rapidamente um vídeo curto para explicar que, a qualquer momento durante o julgamento ou antes do término do teste, se você decidir que ele não será desculpado para você, ou você só quer aprender. Você sempre pode gerenciar seu plano por meio do site da conta da Adobe. Então, a qualquer momento, você pode ir para a conta dot adobe.com no seu navegador. E a partir daqui você poderá ver seu plano. Portanto, se você escolheu o teste gratuito do Adobe XD, você pode realmente ir em frente e ver quantos dias você ainda disse que o método de faturamento começa cobrar e quanto você será cobrado, em que momento. Então, antes desse momento, se você decidir que deseja encerrar seu faturamento ou quiser cancelar ou talvez atualizar para ter acesso a mais plantas, você pode seguir em frente e clicar em Gerenciar plano aqui. E depois de clicar em Gerenciar plano, você pode seguir em frente e alterar seu plano ou cancelar seu plano daqui. E acabei de fazer este vídeo rápido só para garantir que você não fique preso em nenhum ciclo de faturamento. Porque eu odiava quando isso acontece com testes gratuitos, quando o fim porque aconteceu comigo e tenho certeza que aconteceu com alguns de vocês. Então, estou apenas fazendo este vídeo para que você saiba que a qualquer momento dentro de sua avaliação de sete dias, você pode cancelar sem consequências. Mas espero que você ache o Adobe XD útil o suficiente lá Você continua usando-o. Agora, se você estiver pronto para entrar, vamos em frente e explorar Adobe XD na próxima palestra. 5. O navegador de arquivos: Então, se você tiver a Creative Cloud aberta, ótimo. Caso contrário, certifique-se de ir em frente e abri-lo, você pode ir em frente e apenas pesquisar Creative Cloud a partir do seu centro de destaque. E você vai em frente e abrirá isso. Já o abri agora você deve conseguir encontrar o XD em seus aplicativos instalados. Se você não estiver nesta página, você pode acessá-la simplesmente clicando em Todos os aplicativos do lado esquerdo aqui. E, em seguida, vá em frente e clique em Abrir. E eu simplesmente irei em frente e abrirei seu Adobe XD. Depois de abrir o XY, você não precisa ter a Creative Cloud aberta para poder ir em frente e fechar essa janela e simplesmente abrir o XD. Portanto, esta é a primeira página que você vê no XD é o seu navegador de arquivos e, essencialmente, onde você poderá acessar todos os seus arquivos. O que trabalhamos do nosso caminho do canto superior esquerdo aqui para o canto inferior direito, possamos passar pelo que este navegador de arquivos tem a oferecer. Então, no canto superior esquerdo , você verá uma nova opção de arquivo. Então, a partir daqui, você poderá criar novos arquivos onde você pode projetar seus aplicativos móveis e web ou o que estiver projetando. Você pode ir em frente e abrir arquivos daqui. Então, se você já tiver, seja um arquivo do Photoshop, esse arquivo de esboço ou outro arquivo XD. Você pode ir em frente e abri-los daqui. Depois que você puder clicar nele, ele seguirá em frente e pedirá que você localize esse arquivo e o abra a partir daí. Esta é a nossa página inicial, que é onde estamos aqui. Na página inicial, você poderá acessar o início de um novo documento, mas de forma mais rápida. Então, se você já sabe em qual dispositivo você vai projetar. Então, vamos ver. Vou projetar para um tamanho de tela do iPhone 12 Pro Max. Posso ir em frente e clicar nisso. E o que isso fará é abrir o arquivo e gerar esses formatos precisos ou o dimensionamento para as pranchetas para mim, que faremos na próxima palestra. Então, vamos adiar isso. Mas isso é ótimo porque esse caminho foi todo o tamanho aqui. Você realmente não precisa procurá-lo online. E isso torna nosso processo de design muito mais rápido. Da mesma forma, se você estiver projetando para um projeto web, esse é normalmente o tamanho que projetamos para 1920 por 1080 pixels. Agora você pode ir em frente e usar essas outras duas opções que são menos comuns, mas também disponíveis. Você pode ir em frente e criar um documento para histórias do Instagram. Postagens do Instagram, twitter, postagem no Facebook, até capas de vídeos do YouTube. Então você tem acesso a eles também. Se você estiver trabalhando para um tipo de design de marca ou pode ir em frente e criar um design personalizado inserindo a largura e a altura de suas pranchetas. E iremos em frente e geraremos isso para você. Aqui embaixo, será x t te dará um link para alguns de seus artigos, onde você pode realmente explorar alguns dos recursos disponíveis. Mas, claro, vamos passar por esses recursos e muito mais profundidade ao longo do curso. Movendo-se para cá, no lado esquerdo, você verá seus arquivos. Então, agora, porque não tenho nenhum arquivo criado, não verei nada aqui. Mas quando eu começar a trabalhar em novos arquivos, ele aparecerá aqui. E poderei criar novas pastas daqui para organizar meus arquivos ou vê-los como listas ou grades. E se outras pessoas compartilharam projetos comigo com minha conta da Creative Cloud, poderei vê-los daqui. Se eu tiver designs publicados, posso gerenciar os links aqui para projetos que criei, publiquei ou compartilhei. E se eu tiver algum arquivo excluído, ele seguirá em frente e aparecerá aqui. O que é ótimo porque se você excluir acidentalmente um arquivo em que está trabalhando, poderá acessá-lo de se preocupar aqui, como uma lixeira no seu computador. Então, sem mais delongas, vamos voltar para a tela inicial e aprender como podemos realmente criar novos arquivos juntos na próxima palestra. 6. O layout: Então, agora que estamos familiarizados com nosso navegador de arquivos aqui no Adobe XD, por que não seguimos em frente e aprendemos como podemos criar novos arquivos e analisar rapidamente o layout do software. Então, como mencionado na palestra anterior, a maneira mais fácil de criar um novo arquivo é clicando em novo arquivo aqui. Agora, se você estiver trabalhando com um dispositivo específico, como mencionado, você pode seguir em frente e clicar em qualquer uma dessas opções. Se você clicar em Novo Arquivo, que era o que vamos fazer agora, XD irá em frente e abrirá uma janela para você, assim como esta aqui. Agora, por padrão, ele usa o tamanho de pixel da web 1920 para as pranchetas. Então, se eu for para casa rapidamente apenas para mostrar as outras opções, se eu quiser ir em frente e trabalhar em um projeto móvel, então eu clico nesta opção do iPhone 12 Pro Max aqui. Em seguida, ele seguirá em frente e gerará um novo arquivo. E a prancheta aqui será realmente um iPhone 12 Pro Max Size em vez do site. Então, isso é tudo o que significa, todas as diferenças entre essas opções no navegador de arquivos. Agora vou ir em frente e fechar este arquivo aqui que tenho e continuar com este arquivo que temos aqui. Novamente, você pode criar esse arquivo clicando novo arquivo no navegador de arquivos XD. Primeiras coisas primeiro, esse é o nome do nosso arquivo. Por padrão, a Adobe gera um sem título, seguido por um traço e a data e hora em que o arquivo foi criado. Para alterar esse nome de arquivo, você pode clicar duas vezes aqui. Vamos apenas chamar isso de nosso primeiro arquivo. Só por causa da lição. Vamos em frente e clique em Salvar. E agora, como você pode ver, isso foi substituído pelo primeiro arquivo, que agora é o novo nome do nosso arquivo. Este pequeno ícone de nuvem está apenas indicando que estamos conectados à Web e esse projeto está sendo salvo automaticamente na Creative Cloud, que é onde seus arquivos são armazenados por padrão. Legal. Então, trabalhando do topo, daqui, podemos voltar ao nosso navegador de arquivos ou para a casa. Este é o modo de prototipagem que mencionei brevemente onde você pode criar protótipos e se conectar às suas pranchetas. A partir daqui, você pode compartilhar seus projetos facilmente criando links onde qualquer pessoa pode acessá-lo ou apenas certas pessoas explorarão tudo isso durante todo o curso, vamos voltar ao Guia de design e continue no lado direito aqui, trabalhando no nosso caminho pelo lado direito, você verá um pequeno ícone Compartilhar onde você pode adicionar o endereço de e-mail para alguém que você era trabalhando nessa largura de arquivo e isso os convidará para o projeto, onde eles podem colaborar com você nele. Usando a visualização do dispositivo, podemos realmente seguir em frente e ver nossos projetos em um dispositivo real. E quando chegarmos à seção de prototipagem, definitivamente exploraremos isso e é super legal. Ou aqui você tem a opção apenas visualizar seu protótipo na área de trabalho que você tem em vez de abri-lo em um dispositivo real. E no lado direito, temos o nível de zoom aqui, para que possamos seguir em frente e escolher diferentes níveis de zoom. Ou posso simplesmente rolar para dentro e para fora usando seu trackpad ou sua roda de rolagem no mouse. Legal. Agora, no lado esquerdo aqui , temos um pequeno painel de ferramentas onde podemos clicar em certas formas e desenhá-las em nossa prancheta. Agora, para o bem desta lição, não se preocupe em seguir exatamente o que estou fazendo aqui. Só estou mostrando muito brevemente o que o XD tem a oferecer. Quando analisamos isso em detalhes, você tem alguma ideia do que estamos trabalhando. Continuando a partir do painel Ferramentas, podemos criar reticências, polígonos ou triângulos, linhas. Podemos usar uma ferramenta de caneta para criar formas personalizadas. Podemos usar um texto para escrever textos em nossa prancheta. Podemos usar este pequeno botão para criar uma nova placa de arte. Então, se você for do lado direito aqui, eu posso criar um quadro de arte do meu gosto com o tamanho que eu quiser. Ou se eu quiser um tamanho específico para um tamanho de dispositivo específico, posso usar o pequeno painel à direita aqui para escolher um tamanho. E aqui temos um pouco de Zoom. Então, essencialmente, isso só permitirá que você amplie, um pouco semelhante à opção de zoom aqui, mas apenas lhe dando essa lupa onde você pode ampliar para uma determinada parte. E vamos explorar alguns dos recursos de zoom mais tarde também com mais detalhes. Agora, usando esses pequenos três botões aqui, você pode alternar este painel que temos. Você pode ir do painel de camadas que realmente mostra todas as suas pranchas de arte, bem como objetos dentro dessas pranchetas neste pequeno painel aqui. Então, se eu voltar a esse pequeno ícone, posso ver todas as minhas formas como um clique através desta placa de arte ou apenas todas as minhas placas de arte no painel de camadas. Agora, enquanto trabalhamos em projetos, você verá como esse painel de camadas pode ser útil para classificar e organizar seu projeto. Então, daqui de baixo, temos bibliotecas. Assim, sempre que estamos reutilizando certas cores ou estilos de caracteres são componentes, podemos ir em frente e adicioná-lo à nossa biblioteca e podemos realmente compartilhar essa biblioteca ou publicá-la para que possamos use-o em outras equipes ou outros projetos. Apenas super legal, vamos explorar isso daqui a pouco. Agora, finalmente, temos plug-in aqui onde você pode realmente descobrir plugins. E se eu clicar neste pequeno ícone de plug-in aqui, iremos em frente e abriremos os plugins. Página. Os plugins geralmente nos permitem automatizar nosso processo de design ou nos ajudar a aumentar a produtividade do nosso projeto, explorará alguns plug-ins à medida que passamos pelo curso. Então, definitivamente fique de olho nisso. Vamos seguir em frente e fechar isso aqui. Agora, trabalhando no lado direito aqui , onde temos nosso painel de propriedades. Este painel aqui mudará de acordo com o que você selecionou em sua tela. E se eu não mencionei isso antes ou essa parte do meio aqui, onde você tem todas as suas pranchetas e seus objetos em suas formas e tudo é chamado de tela e seu projeto, esta tela é realmente infinita, então você pode adicionar quantos objetos eu quiser, e ela irá em frente e ficará maior. É como um pequeno universo para seus projetos. Se você quiser pensar nisso dessa forma. Não sei por que, mas isso é apenas uma analogia que eu gosto de usar. Agora, se eu for em frente e selecionar uma prancheta clicando em seu nome aqui, você pode ver que temos algumas opções, incluindo opções de transformação. Assim, posso alterar a largura desse quadro aqui apenas inserindo um novo pixel de largura. Posso mudar a altura. Posso escolher preencher a cor desta placa de arte. Posso até criar grades em meus quadros de arte. Então esse é o painel Propriedades para quando você tiver uma opção estranha selecionada. Mas se você tiver um objeto selecionado, verá que isso mudará em breve. E daremos a você mais opções para trabalhar com mais configurações do seu objeto. Agora, vamos explorar todas essas opções em detalhes à medida que aprendermos a criar formas e tal. E, claro, se você selecionar o texto, você terá diferentes conjuntos de opções, como a fonte, o tamanho da fonte e assim por diante. Agora você notará que existem certas coisas que são compartilhadas entre a maioria dos objetos, textos ou quadros de arte. E alguns deles podem incluir efeitos ou aparências, bem como a transformação. Normalmente, eles são compartilhados entre muitos objetos, mas há coisas diferentes, como textos, que só aparecerão quando você tiver um texto selecionado em seu Canvas. E se você não tiver nada selecionado, então ele seguirá em frente e simplesmente não mostrará praticamente nada. Outra coisa legal, quando você tiver algo selecionado, você pode ir em frente e ajustar seu alinhamento dentro da prancheta. E exploraremos isso quando estivermos aprendendo alinhamento e distribuição no XD. Legal. Então, essa é apenas uma pequena visão geral do que estamos lidando em termos de nosso layout aqui. Espero que agora você esteja um pouco familiar, mas novamente, vamos passar por cada parte em detalhes. Portanto, não se preocupe se você não entendeu muito até agora, isso mudará logo à medida que começarmos a projetar e nos familiarizar com o XD. Agora, na seção a seguir, vamos aprofundar com a maioria desses painéis sobre os quais falamos nesta palestra. Então eu te vejo lá. 7. As opções do menu: Sem entrar extremamente nos detalhes, eu também queria passar pelas opções de menu que o adobe XD tem no topo. Estou em uma máquina Mac obviamente, mas se você tiver o Windows, este menu aqui, provavelmente será diferente para você. Haverá sob um menu de hambúrguer em algum lugar aqui. Então, vou colocar uma captura de tela aqui na qual você poderá ver de onde você pode acessar o mesmo menu. Então, se você está caindo em um Windows, esteja ciente disso uma pequena mudança. Mas as opções do menu ainda devem ser semelhantes. Então, você ainda poderá cair ao longo do mesmo, independentemente de usando o Excel em um Windows ou Mac, trabalhando do nosso caminho da esquerda para a direita do nosso menu. Primeiro, temos arquivo. A partir daqui, podemos criar novos arquivos, abrir arquivos, abrir a partir do seu computador. Se você tiver um arquivo em sua máquina para abrir, poderá acessar projetos recentes. Se você tiver vários projetos, você pode alternar rapidamente entre eles aqui. Mas como só temos um projeto aberto, ele apenas mostrará esse projeto. Você pode obter kits de interface do usuário neste menu aqui, que serão exibidos na próxima seção deste curso. Podemos gerenciar nossas bibliotecas, sobre as quais falamos na palestra anterior muito brevemente. Ele pode ir em frente e salvar esse arquivo do Adobe XD aqui. Se você quiser salvá-lo em algum lugar, projetos específicos são, por padrão, salvos na Creative Cloud, que aparecerá em seus arquivos. No arquivo, você também pode acessar o histórico do documento. Agora, este histórico de documentos que você também tem acesso clicando nesta pequena seta aqui. Ele seguirá em frente e mostrará as diferentes versões do seu projeto à medida que você trabalha nele ao longo do tempo. Assim, você pode ir em frente e clicar em versões diferentes por tempo para ver o que mudou. Agora, é claro, porque eu realmente não mudei muito. É o mesmo agora entre os dois. Mas, à medida que você passa por mais mudanças em seu projeto, você verá mais Histórico de Documentos será somado, que é muito útil se você, digamos que você cometeu um erro e queira voltar a um certo ponto em tempo. Em opções de edição, desfazer, refazer sua cópia e colar recortar habituais. Mas também temos algo chamado Paste aparência, que é legal. Nós iremos em frente e, essencialmente, permitimos copiar apenas uma aparência de um objeto, mas não o objeto em si. Vamos passar por isso enquanto estamos explorando nossas ferramentas de forma. E temos a exclusão usual, selecione tudo, desmarcar tudo e assim por diante. Na nossa opção de objeto, temos Agrupar, Desagrupar. Então, se você estiver trabalhando com vários objetos, podemos agrupá-los e desagrupá-los. E isso também aparecerá no painel de camadas. Você pode bloquear ou colocar objetos altos de seus quadros de arte, seu Canvas. Você pode adicionar cores ao painel de ativos. Nos estilos de caracteres, você pode criar componentes a partir daqui, o que nos permitirá criar objetos reutilizáveis em todo o nosso projeto. E vamos explorar componentes porque é uma das coisas mais úteis no XD. Se você estiver trabalhando com um componente e quisermos redefini-lo para o palco principal. Podemos fazer isso daqui. Podemos marcar coisas para exportação. Então, para trabalhar em várias coisas, podemos selecionar as que queremos exportar e prepará-las para exportação por aqui, podemos criar máscaras ou repetir grades. A partir daqui. Vamos passar pelas duas opções neste curso. Temos algumas opções de caminho pelas quais passaremos. Temos texto. Então, se você quiser deixar seu texto em negrito, itálico, você pode fazer isso a partir daqui. Podemos organizar as coisas. Então, no nosso painel Layers também, podemos fazer isso, mas se você quiser um atalho, você também pode vir aqui para trazer as coisas para a frente ou trazer as coisas para a frente. Para trás. Podemos transformar as coisas virando-as horizontalmente, verticalmente. Aqui, podemos alinhar as coisas à esquerda, centro, direita, superior, meio, inferior, quais também temos acesso. Aqui em cima. Podemos distribuir coisas horizontal e verticalmente. Então, isso espaçará as coisas uniformemente. E vamos passar por isso, pois estamos aprendendo sobre distribuição e alinhamento não estão sob nosso plugin. Conforme explicado. Os plugins nos permitem automatizar nosso trabalho de design e tornar as coisas muito mais rápidas para nós. Portanto, definitivamente usaremos alguns plugins em nossos designs. E depois de instalar alguns plugins que irão em frente e aparecerão aqui para que você possa acessá-los facilmente a qualquer momento. Sob nossa visão, temos nossos recursos de zoom in, zoom out. Podemos usar nossas opções de comando ou controle e número aqui para ampliar em determinados níveis, passará por zoom tudo em uma palestra separada. Podemos entrar no eixo de tela cheia. Nossas camadas de bibliotecas são plugins que essencialmente são os mesmos que esses botões aqui fazem. Podemos criar grades de layout ou quadradas, que também exploraremos. E, sob uma opção do Windows, temos a minimização usual, Zoom, assim por diante e assim por diante. Agora podemos visualizar nosso projeto pressionando Command Enter em um Mac ou Control Enter. E ele irá em frente e abrirá. Mas é essencialmente o mesmo que clicar neste ícone ou no ícone de visualização da área de trabalho aqui. E, em Ajuda, se em algum momento quisermos procurar por uma determinada tarefa. Então, digamos que queremos acessar nossas ferramentas de Zoom que podemos digitar rapidamente o Zoom e acessar a opção que queremos facilmente. E isso só torna muito mais rápido para nós encontrar exatamente o que estamos procurando. Então, a qualquer momento, você pode usar esse recurso de Ajuda durante todo o curso, porque é apenas um pouco breve sobre o que a opção de menu e tem a oferecer. E a próxima palestra que vou compartilhar com vocês alguns atalhos aos quais você pode ter acesso são úteis. Você não precisa memorizar esses atalhos. Na verdade, acho que provavelmente não é a melhor maneira de aprendê-los. A melhor maneira é dar uma breve olhada neste documento. E, ao longo do tempo, enquanto trabalhamos no projeto, vou usá-los e vou lembrá-lo de usá-los também. E assim, dessa forma, através da prática, podemos usar esses atalhos, esses atalhos de teclado, para tornar nosso processo de design muito mais eficiente. 8. Criando formas: Certo, estamos prontos para explorar algumas das ferramentas que temos no XD. E as primeiras coisas primeiro são formas. E, claro, as formas são realmente importantes porque compõem muitos dos nossos objetos em nossos projetos. Quer estejamos trabalhando com botões ou imagens de perfil ou ícones de menu, tudo é realmente composto por formas do InDesign. Agora, é claro que poderia ser tão simples quanto um retângulo ou tão complexo quanto um único desenhar um ícone usando a ferramenta caneta, as possibilidades são infinitas. Então, antes de entrar e explorar algumas formas, vamos nos livrar desse arquivo e criar um novo acessando nossa página inicial e clicando em Novo arquivo. Agora você pode notar que o XD não fechará seus arquivos originais. Então, se você já estiver em um arquivo, ele seguirá em frente e o manterá aberto e apenas criará outra janela, pelo menos no Mac que está. Então, se você quiser, você pode ir em frente e simplesmente fechar esse arquivo. E não se preocupe, ele é salvo na nuvem para que você sempre tenha acesso a ele a qualquer momento da tela inicial. Então, há seu novo arquivo. Vamos prosseguir e renomear este para explorar as ferramentas do XD. Vou apenas seguir em frente e argumentar isso porque é literalmente o que estamos fazendo com esse arquivo. Você pode nomeá-lo realmente o que quiser. Não há realmente certo ou errado aqui. É só que eu gosto de manter meus arquivos organizados para que eu saiba exatamente o que se trata. Primeiras coisas primeiro, nossas formas são acessíveis através do painel de ferramentas ou à esquerda da janela. Portanto, temos acesso a um retângulo, elipse, linhas de polígonos, e podemos criar formas personalizadas com os suportes internos da ferramenta Caneta. Você verá o atalho para criar essas formas. Então, se você já está no seu quadro de arte e quer criar rapidamente, digamos que um retângulo. Você pode simplesmente pressionar a tecla R no teclado. E esse pequeno cursor surgirá onde você pode realmente desenhar seu retângulo. Então, se eu for em frente e começar a clicar e arrastar, você verá que estou criando uma forma ou retângulo com base na minha preferência. Quando você está criando qualquer forma. Se você manter pressionado o shift enquanto estiver criando essa forma, XD irá em frente e bloqueará as proporções da largura e da altura. Assim, você pode criar um quadrado perfeito ou perfeito ou um círculo perfeito se estiver trabalhando com um círculo. Então, vamos em frente e criar um quadrado. Apenas soltando aqui. Como você pode ver, criei uma forma. Posso pressionar Escape no meu teclado para sair da ferramenta de forma quando pressionarem duas vezes. Ou outra opção é que eu posso simplesmente pressionar V, que selecionará essa pequena ferramenta Selecionar para que estejamos sem criar retângulos. Caso contrário, se você permanecer no modo retângulo, poderá criar vários retângulos, se desejar. E sempre que você quiser sair dessa ferramenta, você pode ir em frente e clicar neste pequeno ícone ou V no teclado. E agora estou fora dessa ferramenta retangular. E sempre que arrastar, estou apenas selecionando objetos no meu quadro de arte. Vou apenas ir em frente e selecionar esses e clicar em Excluir para me livrar deles porque só precisamos do quadrado por enquanto. Agora que mencionei, o painel de propriedades mudará de acordo com o que você selecionou. Então, neste momento, nossa forma é apenas consistida nessa pequena fronteira aqui. Mas se quisermos adicionar, digamos, uma cor dentro dela, podemos simplesmente clicar nela aqui. Agora, se você tiver o painel de camadas aberto aqui, o que sugiro que ele seja aberto por padrão. Você pode ver dentro de uma prancheta da minha web 1920, eu tenho uma camada retangular. Agora, se eu estiver aqui fora e eu selecionei através do painel de camadas, ele seguirá em frente e fará a mesma coisa e vamos apenas selecioná-lo para mim. E do lado direito, tenho algumas opções. Posso ir em frente e repetir este quadrado se eu quiser várias cópias dele em toda a minha prancheta, que é super legal, isso será muito útil, pois estamos trabalhando com nossos designs. Pode escapar de lá. E basta selecionar a opção novamente. Se você quiser ir em frente e apenas desagrupar e voltar para o meu retângulo. Como discutido antes, posso ir em frente e mudar minha largura e altura aqui. Então, se eu quiser mudar minha largura aqui, posso alterá-la para 400. E agora eu tenho um retângulo em oposição ao quadrado. Mas se você quiser bloquear a proporção para que, quando você alterar sua largura e altura, elas permaneçam as mesmas. Você pode clicar neste pequeno ícone de aspecto de bloqueio aqui. E uma vez que você fizer isso, se eu mudar minha largura para 400, agora minha largura e altura mudarão por 100, o que é super legal. Isso é um pouco x e Y indicam onde esta pequena forma está no meu quadro de arte. Então esse pequeno ponto aqui e cada canto superior esquerdo é essencialmente o que esses dois pontos representam. Este pequeno ponto aqui, minha prancheta é x 0 e y 0. Portanto, essencialmente 88 significa que essa pequena forma ou essa parte da forma é de 88 pixels horizontalmente e 93 pixels verticalmente. Então, se eu mover isso, você notará que pequenos x e y estão mudando. E se eu colocá-lo no canto, qual das coisas legais é que quando as coisas aproximam de cantos ou bordas, XD irá em frente e encaixará automaticamente no lugar. E agora, como você pode ver, 0000, e é claro que posso imaginar que isso muda apenas digitando o número. Agora, a partir de qualquer momento, posso ir em frente e girar meu quadrado. E eu posso pressionar o Command Z para desfazer isso ou Control Z no Windows. Está funcionando no painel de propriedades. Posso ir em frente e mudar o preenchimento conforme discutimos. Então, clicando neste pequeno ícone de falha, posso ir em frente e escolher uma nova cor, como um pouco azul aqui. E posso mudar a tonalidade para escolher exatamente o que eu quero sem querer mais claro ou mais escuro. Portanto, temos uma taxa de preenchimento agora, bem como uma fronteira. A borda aqui tem um tamanho de um pixel. Então, se eu mudar isso para enganar e 20, você pode realmente ver a fronteira agora muito mais claramente. Podemos mudar a cor da borda também. Então, se você pode fazer uma espécie de borda cinza aqui. E eu posso ir em frente e fechar isso. Posso criar bordas redondas para minha borda. Então, se você olhar agora, se eu apenas ampliar mais, porque é difícil ver nesse nível de zoom. Se você clicar nesta pequena junção redonda, ela seguirá em frente e simplesmente arredondará as bordas da nossa borda. Ou você pode fazer essa opção aqui, que apenas criará uma junção chanfro. Ou você pode simplesmente fazer uma junção de coleiro, essencialmente sem qualquer arredondamento. Vamos apenas ir em frente e diminuir o zoom. Estou usando meu pergaminho no meu trackpad para aumentar e diminuir o zoom. Você pode colocar alguns efeitos em suas formas, mas fazendo sombra interna. Então, há essa pequena sombra interior agora é meio difícil de ver porque provavelmente está sendo escondida pela minha fronteira aqui. Mas se eu fizer um excesso de 20 e um Y de 20, e talvez mudar esse raio de desfoque para 20 também. Agora você pode vê-lo de volta aqui. E se eu clicar nele, você verá as transparências tipo de taxa mais baixa. Então eu posso ir em frente e torná-lo mais opaco ou mais visível. Então, à medida que o tornam mais escuro, você pode ver que a sombra está ficando mais forte, ou se você chegar mais perto do fundo será mais leve. Você pode até mudar a cor da sua sombra se não quiser que ela seja preta. Mas, normalmente, para sombras, usamos a cor preta. Se você quiser sombra externa ou sombra solta, você pode fazer essa opção aqui. E a mesma coisa. Você pode ir em frente e controlá-lo. E como você pode ver agora do lado de fora da minha forma, estou recebendo uma pequena sombra, o que é bem legal. Posso escolher o x e y dele. Então, se eu quiser que fique um pouco mais longe e mais borrão, então está um pouco mais desfocado. Eu posso fazer essa opção também. Novamente, você tem controle total sobre a obesidade da barra de cores de suas sombras basta clicar neste pequeno ícone aqui. E a qualquer momento você pode clicar na pequena caixa de seleção para remover suas sombras. Explorará o desfoque de fundo mais adiante, bem como marcado para exportação. Mas é essencialmente assim que você cria formas. Se você quiser explorar com outras formas, como círculos, vá em frente e crie diferentes círculos ou triângulos diferentes e explore suas formas. Então, é essencialmente assim que você cria formas na Adobe excede. A maioria dessas propriedades é praticamente a mesma quando se trata de formas diferentes. Assim, você pode ir em frente e criar elipses e brincar com o preenchimento da borda, as sombras e ir a partir daí. Uma coisa que eu quero notar é que se eu sair da forma, clique neste pequeno quadrado aqui. Isso aqui é essencialmente a opacidade dessa forma quadrada na minha prancheta. Então, se eu fizer L4, ele, como você pode ver, ele irá em frente e se alimentará. E se eu colocar outros objetos por baixo. Então, se eu colocar essa pequena elipse no canto aqui agora porque está em cima do meu retângulo, está completamente assumindo isso. Se eu for em frente e movê-lo sob meu retângulo. Agora, meu retângulo está em cima da forma de elipse aqui. Então, se eu mudar a opacidade dependendo de quão transparente ela é, ela irá em frente e ocultará completamente essa elipse porque está em cima dela, ou mostrará um pouco dela com base em quão visível você quer sua forma. E as seguintes palestras também exploraremos nossas ferramentas de linha e caneta. Mas antes de fazermos isso, vou fazer um pequeno exercício. E isso é dar a esse pequeno círculo um preenchimento laranja, bem como uma borda preta, apenas para que você possa praticar um pouco de prática em termos de personalizar suas formas no XD. E te vejo na próxima palestra. 9. Solução de exercícios em formas: Tudo bem, então espero que você tenha tido a chance dar uma olhada nas ferramentas de forma e explorá-las um pouco. Agora, eu fiz um pequeno exercício para criar um círculo e dar-lhe um preenchimento laranja, assim como Puerto That é preto. Então vamos fazer isso juntos e esta palestra e depois passar por cima algumas outras coisas que eu quero explorá-lo com formas com você. Então, as primeiras coisas primeiro é ir em frente e apenas excluir esse círculo que eu já criei. Então, como mencionei antes, existem atalhos para criar formas. Então, a única para elipses, que é o que você usa para criar um círculo é E. Então, a qualquer momento, se você estivesse em sua prancheta, você pode ir em frente e simplesmente pressionar a tecla E no seu teclado, hum, que o colocará no mesmo modo que o modo elipse aqui. Caso contrário, você sempre pode pressionar Escape. Estou indo em frente e clicando na ferramenta de elipse. Agora, eu não mencionei exatamente qual tamanho o círculo deveria ser ou quão espessa a borda deveria ser. Então eu deixei isso com você. Mas, para o bem desta lição, vamos apenas seguir em frente e torná-la um círculo 400 pixels por 400 pixels. Agora, uma coisa que eu quero observar é que, se você quiser fazer um círculo ou uma forma que tenha um tamanho específico, você pode ir em frente e simplesmente clicar em sua tela e depois ir em frente e começar a desenhar seu elipse aqui. Agora, agora não sei qual é o tamanho da minha elipse, mas o que posso fazer é ir em frente e, antes de tudo, manter turnos de que é um círculo perfeito. Caso contrário, vou fazer uma forma oval. E então, no lado direito aqui e no painel de propriedades de transformação, enquanto eu estou arrastando minha forma, você pode ver o tamanho, o tamanho do pixel aqui. Então, se em algum momento eu deixar ir, a forma será criada nesse tamanho. Agora, o que aconteceu aqui, mas às vezes você pode acontecer é que eu soltei Shift antes de realmente criar meu círculo. Então, se algo assim acontecer com você, você pode simplesmente ir em frente e excluir ou apenas pressionar Command Z para desfazer isso e, em seguida, fazer isso mais uma vez, certificando-se de manter pressionado todos os enquanto você está arrastando sua forma. E então, se eu gostar daqui, este é o perfeito 400 por 400 pixels. Mas, novamente, você sempre pode ajustar sua forma ou tamanho do objeto daqui, a largura e a altura. Como já temos o círculo perfeito para um círculo de 100 pixels por 100 pixels, podemos deixar isso como está. Vamos seguir em frente e selecionar nossa ferramenta selecionada aqui. Clique no círculo que já selecionamos. E, em seguida, indo em frente para a parte de preenchimento aqui, vamos em frente e dê um preenchimento de laranja. Então, no controle deslizante aqui, você pode simplesmente ir em frente e escolher uma espécie de tonalidade laranja, algo assim funciona. E indo em frente e arrastando este pequeno seletor de cores ou seletor Q na cor que você deseja, Há uma boa cor laranja. E então, para a borda, vamos também ir em frente e dar-lhe um tamanho de 20 pixels, semelhante ao que temos com este quadrado aqui. E então, para a cor da borda, podemos simplesmente ir em frente e clicar nisso. E para preto, podemos simplesmente ir em frente e arrastar este pequeno seletor de cores até o canto inferior direito, que iremos em frente e nos dará cor de borda preta. Legal. Então agora temos um círculo ou um círculo laranja com uma borda preta ao redor dele. Duas pequenas coisas que quero mencionar neste vídeo. Um deles é a característica legal de colar aparências. Então, se você se lembra do que estávamos passando pelas opções de menu do XD, falamos sobre como podemos realmente copiar e colar aparências entre objetos diferentes. Então, digamos que eu queira aplicar essa aparência de círculos laranja neste quadrado. Tenho duas opções. Posso ir em frente e clicar no quadrado e depois fazer esses mesmos ajustes aqui. Agora, uma coisa legal é que eu posso clicar nesta pequena ferramenta conta-gotas aqui, vá em frente e clique nesta laranja para me dar exatamente essa cor. Portanto, esta pequena ferramenta conta-gotas permite que você dê ao seu preenchimento ou cor de borda da mesma cor do cursor. Então, onde quer que o cursor esteja olhando. Então, se estiver nesta pequena borda preta aqui, seguiremos em frente e mudaremos o preenchimento para preto dependendo de onde você clicar. Vou usar o Command Z para desfazer isso duas vezes e voltar ao meu quadrado azul. Agora, vou mostrar uma maneira mais fácil de dar ao seu quadrado a mesma aparência que o seu oval. E simplesmente, você pode fazer isso clicando no quadrado, pressionando o Comando C, que é o mesmo que copiar ou Controlar C no Windows, clique no quadrado, mas em vez de colar, que irá colar outro oval. Em vez de fazer isso, vou usar o Command Z para desfazer isso. Vamos seguir em frente e clicar em seu quadrado e pressionar Opção Comando V, onde ela também pode fazer acessando a aparência Editar, Colar no seu menu. Então, essencialmente, o que isso é feito é que ele foi adiante e dado ao meu quadrado a mesma aparência que o círculo. Agora, se eu der a esse círculo uma sombra ou um blog ou qualquer outra coisa, além disso parece que os efeitos também serão copiados para a forma. Portanto, isso é muito útil e nos economiza muito tempo se você quiser ir em frente e usar o mesmo estilo entre diferentes formas ou objetos. Portanto, é um pequeno truque para dar aos seus objetos as mesmas aparências. E outra coisa legal que eu quero compartilhar com você sobre retângulos. Você pode realmente ir em frente e arredondar os cantos do retângulo. Então, seja um quadrado ou retângulo, você pode ir em frente e ir para qualquer canto. Então, como você pode ver, este pequeno canto aqui, certifique-se de que você não está clicando no círculo externo, pois iremos em frente e deixaremos você redimensionar sua forma quando usar o Comando Z para desfazer isso. Mas estou falando sobre esse círculo íntimo aqui. Este círculo interno, se você seguir em frente e segurá-lo e arrastar, permitirá que você realmente arredonde as bordas ou os cantos da sua forma. Então, quanto mais eu arrasto para dentro, mais ela se transformará em uma elipse e ficará totalmente arredondada. Especialmente porque é um quadrado. Ou se eu for em frente e apenas fazer cantos ligeiramente arredondados, posso fazer algo assim, que podemos usar para botões, formas, ícones de aplicativos e assim por diante e assim por diante. Agora você sempre pode ajustar esse raio de canto, mas indo para o lado direito aqui e aqui abaixo da aparência, você verá esta pequena opção de raio de canto. Você pode ir em frente e alterar esse número aqui. Então, neste momento, temos um raio de canto de 75. Mas se você defini-lo para, digamos 25. E posso ver que sua praça terá um canto um pouco menos arredondado. E se você quiser, o raio de canto específico é de quatro cantos diferentes. Podemos ir em frente e, na verdade, clicar neste pequeno ícone aqui. E então nos dará opções para alterar nosso raio de canto em cantos específicos. E isso vai no formato superior esquerdo, superior direito, canto inferior direito e inferior esquerdo. Então, se você mudar o canto superior esquerdo para, digamos 75. Agora temos um canto superior esquerdo mais arredondado do que os outros lados. E agora, se eu for em frente e twittar isso, ele irá em frente e mudará todas as fronteiras novamente, ou todos os cantos. O raio é novamente. Mas se eu simplesmente desfazer isso e segurar Alt enquanto eu faço isso. Agora você pode ver segurando Alt, eu posso apenas alterar esse raio de canto por si só sem afetar os outros. E eu posso fazer a mesma coisa em outros cantos também. Muito doce. Isso é um pequeno truque para dar suas formas ao redor dela borda. Vou usar o Command Z várias vezes para voltar a um 25 perfeito em todos os lados ou em todos os cantos para o raio. E apenas deixe como está. Nas palestras a seguir, vamos voltar e explorar nossas ferramentas de linha e caneta para criar formas mais personalizadas. 10. Desenhando linhas: Certo, até agora criamos um quadrado, criamos um círculo. E agora é hora de explorar nossa ferramenta de linha. Portanto, as linhas são realmente úteis se você quiser ir em frente e criar coisas como ícones ou divisores do menu de hambúrguer, ou realmente qualquer coisa em que você não precise de um objeto como esse com um preenchimento, mas você só quer simplesmente alinhado através de seus projetos. Então eu posso ir em frente e clicar nisso. Então, vamos seguir em frente e clicar nesta pequena ferramenta de linha aqui no nosso painel de ferramentas. E então vá em frente e desenhe uma linha simplesmente clicando em nossa prancheta e segurando e arrastando para onde queremos que nossa linha termine. Enquanto você está segurando o cursor. Se você seguir em frente e segurar Shift enquanto estiver desenhando sua linha, você pode ir em frente e realmente criar linhas retas. Então, se você quiser uma linha perfeitamente reta como esta, você pode ir em frente e soltar aqui. Ou se você quiser uma linha angular em um ângulo de 45 graus, você pode ir em frente e girar o cursor para obter os ângulos perfeitos nas marcas de 45 graus. Assim, você pode fazer uma linha reta para baixo ou vertical como esta ou um pouco angular queria um ângulo de 45 graus ou apenas um 0 graus ou simplesmente uma linha reta como esta. E, como ir até aqui, certifique-se de que enquanto estiver desenhando suas formas, se você estiver usando esse Shift para soltar esse turno depois de soltar o cursor. Portanto, certifique-se de não fazer isso antes. Caso contrário, essa coisa de ângulo inteiro pode ficar confusa se você simplesmente soltar Shift antes de soltar o mouse e criar a forma. Basta ir em frente e excluir esse. Agora podemos clicar em escapar para sair dessa ferramenta de linha, indo em frente e clicando em nossa linha aqui. Então, a partir daqui, você pode ver a largura da nossa linha, 368. Então, quando vamos em frente e mudamos isso para 400, incrível. Então agora temos uma linha que 400 pixels e não tem altura. Se você der uma altura do forro, como você pode ver, nada acontecerá porque uma linha é essencialmente simplesmente alinhada. Não há altura para uma linha, é apenas uma largura. Então, se você quiser deixar suas linhas mais grossas, você pode simplesmente seguir em frente. E você vê que temos a fronteira aqui, que é o que está mostrando aqui. Podemos ir em frente e simplesmente adicionar tamanho à nossa borda. Então, se você fizer cinco pixels, agora você vê que eu recebo uma linha um pouco mais grossa. Você pode fazer 10 pixels, por isso é ainda mais espesso. Agora, se você quiser dar a nossa linha um pequeno traço, cada cinco pixels, podemos ir em frente e mudá-la assim. Ou digamos que 50 pixels. Podemos criar linhas tracejadas assim. Se você quiser lacunas específicas entre nossos traços, podemos seguir em frente e inserir um número específico. E agora nossos traços terão essa lacuna entre si. Então sinta-se à vontade para brincar com esses números para ver que tipo de formas você obtém. Assim, podemos criar, por exemplo, um traço de 50 pixels com um espaço de 100 pixels, ou um traço perfeito, ou um traço perfeito, que é de 50 pixels com um intervalo de traçado de 50, e assim por diante. Assim, podemos configurá-los de volta para 0 sempre que quisermos redefinir para uma linha reta. Agora, com uma linha semelhante à que tínhamos com nossa opção de fronteira para o quadrado r, podemos ir em frente e realmente dar-lhe um limite de extremidade específico para que possamos fazer uma rodada e assim temos uma linha como arredondada agora nas bordas. Agora eu quero mostrar alguns truques, dicas e truques legais enquanto você está criando formas. Agora isso se aplica a qualquer forma, não apenas linhas, mas se em algum momento você quiser dizer, tornar esta linha mais curta ou mais longa, é claro, você pode ir em frente e pegar cada extremidade e tornar cada extremidade mais curta ou mais longo. Agora, porque agora estou ajustando minha nota aqui para esta linha. Ele seguirá em frente e estará em estilos de forma livre, então não é mais reto, mas novamente, segurando Shift, posso fazer isso direto. Então, se você quiser uma linha mais curta, temos que ir em frente e pegar cada nó e tornar a linha mais curta. Mas se eu realmente desfazer isso, agora enquanto estou segurando um nó, se eu for em frente e segurar Alt, posso ir em frente e arrastar um nó e fazer com que ambos os lados mudem. E novamente, se você quiser manter Shift e Alt juntos agora estamos ajustando essa linha reta do furo sem perder, é ângulo reto. Por exemplo, esse pequeno círculo aqui. Se eu segurar Alt, posso ir em frente e editar todos os lados. E novamente, segurando Shift, ele seguirá em frente e restringirá essa proporção da largura e altura. Só vou deixar ir e deixá-lo como está. E sim, então isso é criar linhas no XD. Agora vamos voltar na próxima palestra e aprender como podemos realmente usar a ferramenta caneta para criar linhas e formas mais complexas para casos específicos em que estamos desenhando certos ícones ou você quer rastrear um objeto e assim por diante, assim por diante. Então, vejo você na próxima palestra. 11. Como usar a ferramenta Caneta: Então, o que é essa pequena ferramenta de caneta aqui? Continuamos falando sobre isso. Parece muito chique. E às vezes nem sequer é usado tanto quanto pensamos. Mas é sempre bom ter uma ideia do que temos acesso em nosso painel de ferramentas. Por precaução, existem casos raros em que precisamos usar certas ferramentas. Então, por que não seguimos em frente e pegamos uma ferramenta de caneta apenas clicando neste pequeno ícone de ferramenta de caneta. Ou você sempre pode pressionar P no teclado e ele lhe dará o mesmo tipo de cursor. Agora estou ampliado aqui. Então vou para este lado da minha prancha de arte aqui. E vou apenas ir em frente e criar uma pequena forma personalizada aqui, apenas clicando e criando nós. Então, quando se trata da ferramenta caneta, pense nela como criando uma forma com várias linhas. Então eu criei o primeiro nó apenas clicando lá. Se eu clicar novamente, ele criará um segundo nó. E se eu clicar novamente em outro lugar, ele criará esse terceiro nó e assim por diante. Agora, uma das coisas legais é que, enquanto você está desenhando uma forma na ferramenta caneta, ela lhe dará esse pequeno guia, como a linha azul aqui para dizer que você está agora em linha reta Vaughn e crie algo que esteja dentro da linha de costura ou na mesma posição y que em outra nota que eu tenho aqui. Então eu posso ir em frente e ver onde essa linha azul se encaixa. E esse é o meu indicador de que isso está no mesmo nível que essa pequena nota aqui, o que é legal. E a mesma coisa quando se trata do outro nó. Então eu posso ir em frente e continuar clicando. Então eu posso criar alguns outros nós aleatórios. Agora, uma coisa que eu gostaria de mencionar é que, a menos que você feche sua nota aqui para sua forma, a ferramenta de caneta, vamos continuar continuando sem deixar você parar em nenhum ponto você pode pressionar escape para sair dessa ferramenta. E agora você só tem isso. E se eu pressionar escapar mais uma vez, eu só tenho esse caminho que é meio que não fechado. Ou sempre posso clicar duas vezes de volta para ele e depois continuar desenhando. Ou pode simplesmente ajustar todos os nós que existem. Então eu posso entrar e ajustar esse nó ou ajustar este aqui, ou este. Ou se eu quiser continuar desenhando , posso simplesmente voltar e clicar na ferramenta caneta e completar essa forma. Agora, enquanto estou aqui, posso ir em frente e clicar neste nó aqui. E agora estou de volta à travagem da minha ferramenta Caneta, vá em frente e feche minha forma clicando aqui. E agora, como você pode ver automaticamente, nos agradou fora dessa ferramenta de caneta, não sei se criei algum tipo de ícone de diamante aqui. Mas acho que podemos voltar e arrastar esta pequena nota aqui para fazer isso parecer um pouco mais como um diamante. Então é essencialmente isso que a ferramenta Caneta nos permite fazer é criar essas formas personalizadas. E uma vez que você tenha uma forma fechada, isso significa uma forma que todos os seus nós estão conectados. Você pode dar um preenchimento como de costume. Então você pode ir em frente e dar a dar essa pequena forma. Não sei. Vamos ver o preenchimento azul e talvez até remover essa borda dele. Assim como qualquer outra forma. E agora com essa forma, uma coisa a notar é que ele sempre pode voltar e editá-la. Portanto, se você clicar duas vezes para entrar nessa forma, sempre poderá editar esses nós. Ou você pode até fazer coisas como ir no meio de 22 nós e adicionar ainda mais nós. Eu realmente brinco com isso e crio formas, formas personalizadas que você gosta. Vou desfazer isso clicando em Command Z. Quero mostrar mais uma coisa legal quando se trata da ferramenta caneta. Até agora, criamos uma forma usando apenas linhas retas. Mas se você quiser criar uma forma mais sofisticada que use linhas curvas, sempre podemos clicar duas vezes em nossa forma aqui para seguir frente e converter esses nós em notas curvas. E vou te mostrar o que isso significa. Portanto, se você passar o mouse sobre qualquer um desses nós aqui, você pode clicar duas vezes nele para realmente transformá-lo em um nó curvo. Então, agora, se eu arrastar esse pequeno ponto aqui, como você pode ver, ele se junta aos outros dois nós usando uma linha curva. E posso ajustar essa linha curva usando esses pequenos pontos aqui. Então eu posso fazer uma pequena curva lateral ou curva vertical como esta. Apenas mantenha a rua segurando Shift. E, como mencionado anteriormente, enquanto você segura Shift, ele seguirá em frente e se encaixará em ângulos específicos. Posso tornar minha curva mais, mais arredondada ou pode torná-la mais sutil assim. Argumentos deixam como é assim. E você pode fazer isso com qualquer nó. Então, clicando duas vezes, você seguirá frente e converterá esses nós em caminhos curvos. Então você pode fazer coisas como criar formas muito personalizadas. Agora, a qualquer momento, se você quiser ir em frente e desfazer isso e transformar suas anotações em linha reta. Você pode simplesmente desfazer isso clicando duas vezes em cada um desses nós curvos. E iremos em frente e levaremos você de volta para aquela rua em forma de rua ou um caminho de caneta forrado de rua que você tinha. Então, acho que não mencionei isso, mas um caminho é essencialmente o que criamos aqui usando a ferramenta caneta. Então, no lado esquerdo aqui, por padrão, isso é chamado de Caminho 1, que é por padrão o nome que recebe nosso caminho aqui. Você sempre pode sair de um caminho apenas clicando em Escape ou pressionando V para voltar para sua ferramenta de seleção. E essa é a ferramenta de caneta para você no XD, onde eles podem fazer na próxima palestra e olhar ferramentas booleanas e como podemos realmente combinar ou usar várias formas juntas para criar, combinar formas. 12. Opções de booleanos: Como mencionado na palestra anterior, ainda existem mais duas formas. Podemos fazer isso realmente legal, que passamos brevemente no menu, que é chamado de caminho aqui no objeto. Portanto, se você clicar no objeto em nosso menu e ir até o caminho, você pode realmente ir em frente e adicionar, subtrair, cruzar, excluir, sobrepor, converter caminho e traçado de contorno. Que agora você provavelmente não tem idéia que qualquer um deles faz, o que é totalmente bom. Esse é o ponto principal desta palestra é que vamos passar por isso. Vamos rever cada um deles brevemente para que você tenha uma ideia do que eles fazem. Então, primeiro as coisas, vou seguir em frente e apenas reunir minhas formas aqui. Que há tipo de sobreposição aqui. Isso é apenas para o propósito desta lição para que você possa aprender o que essas ferramentas booleanas fazem. Então, se eu apenas arrastar e clicar em ambas as formas. E agora que agora posso ver que ambos estão selecionados porque ambos estão destacados no meu painel de camadas. E aqui eu posso ver que ambos têm esse esboço ou dentro do que significa que ambos são selecionados. Outra maneira de selecionar objetos é acessando o painel Camadas, clicando em um objeto. E, em seguida, enquanto segura o shift, você pode clicar em outro objeto. E agora ambos também são selecionados, portanto, qualquer um ou palavras. Então vá em frente e selecione quadrada e oval aqui e, em seguida, desça até Caminho do objeto e adicione, o que também pode ser feito pressionando o comando Alt. Você é legal. Então, agora o que é feito é que criou uma ovelha sindical baseada nessas duas formas que são metade. Então o que isso significa é que ele foi adiante e se juntou a essas duas formas para criar essa forma que agora posso usar como lago. Agora, essas formas ainda estão contidas nesses grupos sindicais. Então, se eu clicar duas vezes na própria forma, ainda poderei acessar minha camada de elipse e retângulo aqui. E ainda posso movê-los. Então, se eu movê-lo e colocá-lo aqui no canto e sair clicando fora ou pressionando Escape, você pode ver as formas agora mudadas. E ainda é uma ovelha. Embora eu ainda possa acessar essas camadas individuais, que são super legais. Isso nos permite criar formas únicas que precisam ser criadas a partir de uma combinação de múltiplas formas ou múltiplas elipses, quadrados, triângulos e assim por diante. Legal. Agora vou ao Command Z para desfazer isso várias vezes. E agora temos nossas formas de volta como duas camadas diferentes como antes. Agora, se fizermos o outro caminho chamado Subtrair, ele fará exatamente o oposto. Ele seguirá em frente e, na verdade, subtrairá e removerá qualquer parte compartilhada entre essas formas. Então, porque o círculo e o quadrado tinham essa pequena área de meio círculo como esse espaço compartilhado entre eles. Ele foi em frente e remova isso das formas combinadas onde obtém formas subtraídas. A mesma coisa com a subtração. Você sempre pode entrar lá e editar sua forma para criar diferentes tipos de subtrações. Agora, é claro, se eu tirar esse círculo completamente da praça, não haverá nenhuma subtração porque não há lugares onde essas duas formas combinadas. Portanto, para que as opções booleanas funcionem, suas formas precisam estar sobrepostas, caso contrário, não há nada para adicionar ou subtrair. Então, vou desfazer isso várias vezes, voltar às minhas formas, e então vamos tentar o cruzamento. Então, o que o Intersect faz é seguir em frente e encontrar a região compartilhada entre essas duas formas. Então, se eu voltar, como você pode ver, essa pequena área é o que ambas as formas se sobrepõem. Então, vamos em frente e apenas vamos pressionar Command Shift Z aqui para refazer isso. Então, como você pode ver, ele irá em frente e combinará esses dois e encontrará a área onde essas formas cruzam e criarão uma forma única como esta, que eu sempre posso, é claro ajustar. Vamos desfazer isso e voltar ao objeto. Explore, exclua a sobreposição, que fará o oposto do cruzamento. Ele seguirá em frente e encontrará a área compartilhada e a removerá da nova forma. Caminho finalmente convertido. Vamos em frente e, na verdade, converteremos essas duas formas em um caminho, que é o que tínhamos com esse tipo de forma de diamante por aqui. Então, agora, se eu clicar duas vezes no meu círculo, posso editar cada nó. E eu posso fazer uma forma realmente única a partir das minhas ovelhas pré-existentes que ele tinha acesso antes. Lembre-se de que, para acessar esses nós, você precisa clicar duas vezes em sua forma. E depois indo em frente e ajustando essa forma. Se você não estiver dentro do caminho e nada mudará. Então você tem que se certificar de que está dentro do caminho em si. E a maneira como você faz isso é que, quando estiver dentro do caminho, você pode realmente editar cada nó. Vamos Comandar Z várias vezes e voltar às nossas formas. Agora vou comandar Z até ver minha elipse e retângulo em vez dos caminhos. Finalmente, por último, mas não menos importante, é traçado de contorno do caminho do objeto Ou você pode conseguir isso pressionando Shift Command O. E o que isso fará é, agora temos as bordas e as formas. Ou se realmente voltar, como você pode ver no painel de camadas, temos uma elipse. Temos esse quadrado, e ele está intacto com sua borda pressionando o Comando Alt O em vez de turnos. Então, se você pressionar Alt Command 0, agora você verá que criei um traçado de contorno. Então o que isso está fazendo é separar minha fronteira das ovelhas. Então, agora a elipse é uma forma separada. E a borda aqui é o traçado, ou a borda aqui é uma forma separada também, ou uma camada separada, devo dizer. Então agora eu posso meio que movê-los e eles serão separados um do outro, então estão realmente relacionados mais. E se eu excluir um, você verá que o traçado de contorno ainda está lá. E se eu excluir o traçado aqui, a forma ainda está, ou acho que elipse aqui sem o traço está aqui. Portanto, se em algum momento você quiser separar a borda da forma, você pode fazer isso indo para Objeto, traçado de contorno do caminho. Depois de selecionar suas formas. Mais uma vez, vou fazer o Command Z várias vezes. Eles voltam a ter minhas ovelhas como a palavra. E então ele vai seguir em frente e separar isso disso. Então, como pouco exercício antes de seguirmos em frente de grupos booleanos, quero que você vá em frente e crie uma forma semelhante a esta. Acho que é uma forma de haltere. E, claro, use suas opções de caminho sob o objeto para conseguir isso combinando várias formas para alcançar esse design semelhante. Uma pequena coisa legal que eu quero te dizer. Se você quiser duplicar formas, você sempre pode pressionar Command D. E então vamos em frente e criaremos outra forma, outra cópia dessa forma para você. Uma pequena dica. Se você está tentando duplicar este pequeno oval e colocá-lo aqui. Então, sim, vou deixar isso como um pequeno exercício para você e depois faremos isso juntos na próxima palestra. 13. Solução de exercícios de opções booleanas: Tudo bem, então como fazemos essa forma usando nossas ferramentas booleanas? Bem, na verdade não é tão difícil. Você simplesmente precisa de três formas e depois vai em frente e juntá-las ou adicioná-las usando a ferramenta booleana. Então eu tenho duas elipses aqui e um retângulo para a parte do meio aqui. Então, vou seguir em frente e apenas excluir este e refazer isso novamente. Então, primeiro vamos seguir em frente e criar nossas elipses. Então vou seguir em frente e pressionar E, criar uma elipse. Sou meio assim. Largura e altura. Não precisa ser exatamente assim. Apenas fazendo isso por causa da solução de exercícios aqui. E então você pode usar o Comando D para duplicar essa elipse. E então indo em frente e movendo-o este lado aqui. E vamos criar um retângulo pressionando R. E meio que criando um retângulo para unir essas duas elipses juntas. Legal, escape de lá usando a chave de fuga dela. Agora vamos em frente e selecione todas as formas juntas. Certifique-se de ter todos os três selecionados. Bem aqui. Vá para o caminho do objeto e você adivinhou, adicione. Ou você também pode usar a opção de comando. Você fez. Agora temos uma forma ou uma união barata que combina todas as três formas. E eu posso até ir em frente e mudar o preenchimento para dar o Phil que eu gosto e concordo um pouco, preencha aqui. Você pode até ir em frente e remover a borda se não quiser. Legal. Então é assim que usamos o grupo booleano para criar uma forma de haltere como esta, precisará saber o que é isso. Que agora estou apenas projetando essa forma fora do meu quadro de arte. Então, qualquer coisa que você projetou fora da sua prancheta ficará sob esse tipo de pasteboard de parte das camadas. Posso voltar e ver tudo aqui, todos os meus quadros de arte. Ou clique neste quadro de trabalho para ver qualquer coisa que seja um lugar fora de mim. Pranchetas. Legal. Então, agora que temos alguma familiaridade com formas e como criar formas, juntou-se a elas e use o painel de propriedades para ajustá-las. Quando voltarmos na próxima palestra e trabalhamos com texto. 14. Como adicionar texto: Finalmente chegou a hora de explorar nossa ferramenta de texto no XD. Portanto, a ferramenta de texto essencialmente nos permite, como o nome sugere, adicionar texto ao nosso design. Então, a qualquer momento, posso apertar a tecla T no meu teclado ou simplesmente ir para esta opção de texto aqui. E então vá em frente e clique em qualquer lugar na minha prancheta para adicionar texto. Você pode ir em frente e começar a digitar. Então, vou ler que este é um exemplo de texto de ponto. E então, a qualquer momento, você pode clicar em Escape para obter uma caixa de texto ou simplesmente clicar em outro lugar fora da sua caixa de texto. E vamos em frente e volte para nossa ferramenta Select. E agora, como você pode ver, eu só vou rolar. Temos esse texto aqui. E todas as propriedades estão listadas neste painel de propriedades aqui. Então este é um texto com helvetica nova fonte. Atualmente, são 20 pixels em termos do tamanho da fonte e tem um peso de fonte normal. E é claro que podemos mudar ou fonte rolando para as fontes que temos aqui. Essas são as fontes que instalei na minha máquina. Portanto, pode parecer diferente do seu. Se em algum momento você quiser instalar novas fontes, você pode simplesmente instalar novas fontes e elas devem ser carregadas no seu XD sem problemas. E, à medida que iniciamos nosso projeto, exploraremos texto personalizado e instalaremos novas fontes também. Por enquanto, vou mudá-lo para essa outra fonte, Avenir Next isso ou como você não precisa fazer isso. Só estou mostrando as propriedades de texto que você tem acesso. Então eu posso alterar esses 20 pixels para 50. E irei em frente e aumentarei meus textos. Como você pode ver. Posso mudar seu caminho. Eles podem torná-lo itálico, ultraleve. Você faz isso ousado, pesado, assim por diante e assim por diante. Agora, essas opções serão diferentes com base na fonte que você instalou e em quais pesos de fonte você instalou para essa fonte em sua máquina. Portanto, nem todas as fontes podem ter tantas opções. Alguns deles podem ter a bola normal, e alguns deles podem ter o meio. Portanto, isso pode ser diferente com base na fonte que você instalou e qual você está usando. A partir daqui, podemos ajustar o espaçamento entre letras. Então, se eu colocar 10 pixels, ele irá em frente e aumentará o espaçamento entre cada uma das letras. E, portanto, há alguns muito visíveis. Mas se eu fizer 50, você pode começar a ver que o texto está começando a ficar mais espalhado são o espaçamento entre cada letra. Posso voltar, definir isso para 0. Agora isso é para a altura da sua linha, porque agora só temos uma única linha. Você realmente não verá isso fazer diferença. E da mesma forma, isso é para o meu espaçamento de parágrafos, mas porque isso é apenas um texto simples, o que significa que é apenas um texto que está em uma única linha. Nós realmente não veremos essas opções. Muitas outras coisas legais às quais você tem acesso. Você pode ir em frente e tornar seu texto totalmente maiúsculo, totalmente minúsculo. Você pode criar um caso de título. Então, cada letra ou cada palavra primeira letra se torna maiúscula. Você pode sobrescrito ou subscrito que seus textos estavam subjacentes, e até mesmo adicionar uma greve através dele. Portanto, esses são alguns recursos interessantes aos quais você tem acesso quando se trata de texto. Tudo o resto é praticamente o mesmo que as formas. Então, temos nossa aparência ou transparência. Podemos alterar o preenchimento ou a cor dos textos reais aqui e dar-lhe um belo azul. Ainda podemos adicionar uma borda a ela também. Podemos até ir em frente e adicionar sombras também. Agora, uma coisa que eu quero observar é que quando você tem um ponto x como este, se você quiser editá-lo, você pode clicar duas vezes nele e ele apenas permitirá que você edite seu texto. Agora, se eu continuar digitando e por diante, como você pode ver, os textos continuarão continuando sem nenhum espaçamento. Então o texto continuará e continuará porque é um ponto x. No ponto x realmente não tem espaçamentos. Você pode pressionar tecnicamente Enter. Estou em certos pontos para criar várias linhas, mas não há a melhor prática porque, à medida que seus textos se ajustam, não parecerá muito uniforme. Então. Vou mostrar exatamente como você pode realmente fazer textos de tipo de parágrafo também. Um dos recursos interessantes que, se você quiser aumentar seu texto sem editar o tamanho da fonte aqui, alguém pode ir em frente e arrastar esta pequena nota aqui e arrastá-la para baixo ou para cima para um tamanho de fonte menor ou menor para um maior. E, como você pode ver no tamanho certo, esse número está mudando. Só vou fazer isso de volta para 50 pixels. E vá em frente e remova essa parte extra e pressionando Excluir e escapar de lá. Então, agora esta é uma marca de ponto de amostra. Agora, erro ao criar um texto ou um texto de parágrafo, você pode simplesmente pressionar a tecla T no teclado e, em vez de clicar nesta linha, simplesmente vá em frente e arraste, assim como você arrastaria com um forma onde você quer que seu parágrafo esteja ou seu texto em contorno. Então, se eu for aqui agora, tenho uma caixa de texto que posso simplesmente ir em frente e começar a digitar. E enquanto estou digitando, você pode ver que ele irá em frente e entrará em uma nova linha com base nessa forma ou quadro que eu criei para o meu texto. Então é assim que você cria esse texto de parágrafo. E agora, se eu pular de lá, posso ir em frente e aumentar isso em termos de largura. Portanto, posso ter uma caixa de texto mais longa. Posso fazer o mesmo aqui aumentando a altura. Então, se em algum momento meus textos meio que vão da altura, podem estar escondidos, então terei que ir em frente e me certificar de que minha altura corresponda a esse texto para certificar de que minha altura corresponda que nenhum Texas fique escondido ou deixado fora dessa caixa de texto. Portanto, certifique-se de que, quando você estiver adicionando texto em seus projetos, algumas outras coisas legais às quais você tem acesso, os textos que serão passados. Então, agora temos uma altura de linha que podemos ir em frente e editar. Então, se você alterar isso para 200, verá que a linha ou o espaçamento entre cada linha aumentou para 200 pixels. Acho que, por padrão, era 68. Então vá em frente e mantenha-o em 68. Você tem novos parágrafos, você pode alterar o espaçamento aqui. Então, se você fizer 50 pixels, oops, 50 pixels. E vou para um novo parágrafo. Como você pode ver em cada novo parágrafo, isso me dará um espaçamento de 50 pixels entre eles. Agora, agora porque temos um tamanho fixo, terei que ajustar minha caixa de texto com base no tamanho do texto. Mas se eu fizer a altura automática aqui, que realmente vai em frente e ajusta altura das minhas caixas de texto com base em quanto tempo todo o texto, o texto dentro dessa caixa de texto é. Então, como você pode ver, a altura fica bloqueada porque agora está na altura automática. A qualquer momento, posso voltar à altura fixa e depois dar minha própria altura. Tenho certeza de que quero dar uma altura específica. A qualquer momento, posso ir em frente e também fazer largura automática. Então isso seria a mesma coisa, mas em termos de largura. Assim, você pode escolher uma largura automática ou uma altura automática. Então, se você deseja alterar dinamicamente a largura da caixa de texto ou a altura. Você pode escolher isso de acordo. Ou, novamente, você pode escolher um tamanho fixo se souber especificamente que sua caixa de texto precisa dessa largura e essa altura. É assim que adicionamos texto aos nossos projetos. 15. Agrupando camadas: Então, à medida que começamos a adicionar mais e mais coisas dentro do nosso quadro de arte, basta clicar nisso aqui para que possamos ver em nosso painel Layers, as coisas começarão a ficar muito ocupadas aqui e muito agitadas se você não quero, faça-os agrupados. É por isso que, em nosso painel Camadas, podemos agrupar coisas que são irrelevantes. que mais tarde possamos ter certos objetos pertencentes a um grupo e podemos fazer edições facilmente e saber exatamente o que pertence a Y. Então, neste caso, pode não fazer sentido agrupar tudo juntos porque realmente experimentamos as ferramentas de uma ovelha e as ferramentas de texto. Nós realmente não temos nenhuma relação entre essas coisas. Mas vamos realmente criar outra prancha de arte pressionando um, apenas desenhando uma prancheta aqui. Acabei de ir em frente e criar outra prancheta e vou clicar em Escape para sair dessa ferramenta de prancheta de arte. Por algum motivo, criou este quadro de arte aqui. Vou excluir esse. Então sim, em vez da minha prancheta, vou apenas ir em frente e criar alguns retângulos. Agora. Vou fazer um retângulo C assim. E então eu vou apertar a tecla T no meu teclado e escrever um título. E talvez, e vá em frente e duplique este usando o Command D. E eu vou pressionar V e voltar para minha ferramenta de seleção e talvez mudar isso para descrição. E talvez eu queira incluí-los no meu tipo de quadrado aqui e vou criar outro retângulo aqui. E assim podemos usar esse tipo de layout para talvez colocar imagens aqui dentro e usá-las como tipo de cartões. E nosso design era essencialmente uma organização de certas coisas, como a descrição, um título e um monte de imagens, digamos. Então, agora essas coisas são meio relevantes ou relacionadas juntas. Então, o que podemos fazer é ir frente e, na verdade, selecionar todos eles. E podemos garantir que no nosso painel de camada esquerda aqui temos tudo selecionado. Novamente, você também pode selecionar coisas daqui. Podemos clicar no objeto mais alto aqui e, em seguida, também ir até o objeto inferior. E enquanto mantém o shift, se eu clicar, ele seguirá em frente e selecionará tudo entre minha primeira e última camada aqui, certo? A maioria das camadas superior e inferior. E então, se eu for em frente e clicar em Comando G ou Control G no Windows, ele irá em frente e, na verdade, colocará esses objetos dentro de um grupo. Agora, é claro, você também pode fazer isso acessando Objeto e clicando em Grupo. Então agora esses objetos realmente pertencem a esse grupo, um aqui, eu posso vê-lo na minha lista. E agora, se eu realmente mover isso aqui, tudo isso está se movendo juntos porque faz parte de um grupo. Agora, só porque as coisas fazem parte de um grupo não significa que eu não possa editá-las individualmente. Então, se eu ainda quiser fazer alterações no meu título aqui, vamos ver, ainda posso clicar duas vezes no grupo e depois ir em frente e selecionar o título aqui. Outro truque legal é que, se estivermos dentro do nosso grupo aqui, se eu quiser selecionar rapidamente algo dentro, em vez de clicar duas vezes para entrar no grupo, posso simplesmente ir em frente e segurar Comande e clique no que eu quero. Isso faz a mesma coisa. E podemos ir em frente e, por exemplo, otimizar esse título para alguma outra coisa que fazemos, cabeçalho, não sabemos. Então é assim que você realmente cria grupos no XD. Agora, claro, meu grupo aqui tem um nome de grupo um agora. Mas se eu for em frente e clicar neste grupo 1 ou clicar duas vezes nele, posso realmente ir de frente e dar um nome a ele. Então eu posso nomeá-lo para carrinho. Então agora sabemos exatamente o que esse grupo tem. E a qualquer momento, se você quiser ver o conteúdo em vez de um grupo, basta clicar neste pequeno ícone de pasta ou clicar nele novamente para ocultar as camadas contidas dentro desse grupo. Coisas químicas. Estamos usando essa opção de altura aqui. Posso ir em frente e, na verdade, esconder isso completamente da minha prancheta. Portanto, isso é útil se você estiver trabalhando com algo em que duas camadas, vamos ver, você está um sobre o outro ou para grupos diferentes estão em cima um do outro e você só quer se concentrar em uma. E então você pode ir em frente e clicar nisso novamente para mostrá-los. Você pode bloquear essa camada no lugar. Então, agora, se eu realmente voltar ao meu design, não posso realmente fazer uma mudança nele. E se eu for aqui você vê que há um pequeno ícone de cadeado e eu posso clicar nele e depois desbloqueá-lo novamente, ou posso fazer a mesma coisa daqui. E você também pode marcar coisas para exportação. Então, digamos que eu queira exportar todo esse grupo. Posso ir em frente e exportá-lo daqui, ou comercializar exportações para que, uma vez que estivermos prontos para exportar, ele será incluído como parte de nossa exportação em lote. E você também pode ver que esse pequeno ícone de marca de seleção será exibido aqui quando o tivermos como marcado para exportação. Mas é claro que vamos explorar a exportação em futuras palestras. Então, é essencialmente assim que você agrupa as coisas em seus designs. E a qualquer momento, se você realmente for em frente e apertar o Shift Command G, eles vão em frente e desagrupar todo o grupo aqui. E agora vejo que estou de volta ao meu layout anterior, onde só tenho minhas camadas sem que elas estejam em um grupo. Então agora, se eu mover as coisas, elas não terão nenhuma relação entre si e não se moverão juntas. Novamente para agrupar coisas, selecione tudo junto e pressione Comando G ou Controle G no Windows. E isso agrupará as coisas juntas. Assim como um exemplo, se você se lembra, nós brincamos com essa grade de repetição. Agora você pode ver o quão útil será se estivermos realmente repetindo um grupo. Por exemplo, digamos que tenhamos um aplicativo e queremos que vários cartões apareçam com imagens diferentes e textos diferentes. Podemos realmente fazer isso e podemos até replicá-los horizontalmente também. Então isso é uma coisa legal que podemos fazer com uma grade de repetição. E definitivamente vamos usá-lo em nossos projetos. Acertando o Comando Z duas vezes. Vou desfazer isso e desagrupar a grade aqui. Basta voltar a tê-lo como um grupo. E sim, é assim que você agrupa as coisas e organiza seus objetos no XD. 16. Grades: Então, o que precisamos de grades em nossos projetos? Bem, usando grades, podemos realmente ir em frente e alinhar objetos e colocá-los de forma mais organizada em toda ou Pranchetas. Ao clicar em qualquer prancheta, você pode ir em frente e acessar essas opções de grade no painel de propriedades do lado direito aqui. E temos dois tipos de grades. Temos uma grade de layout e uma grade quadrada. E vamos passar rapidamente por aqueles nesta palestra. Para usar uma grade, você pode seguir em frente e clicar nesta pequena caixa de seleção aqui. E então iremos em frente e criaremos uma grade para nós. E agora esta é uma grade de colunas que tem 12 colunas ou placa de arte com uma largura de calha de 16 pixels entre cada coluna, a largura da coluna de 221 pixels. E esta aqui é a nossa margem nos lados aqui. Então, o lado esquerdo do que o direito. Se ele disse isso para 0, ele irá em frente e removerá essa margem e criará uma coluna uniformemente espaçada. Podemos aumentar ou uma sarjeta para, digamos 50 pixels. E agora há mais espaçamento entre nossas grades ou nossas colunas de grades. Podemos aumentar ou diminuir nosso número de colunas, e assim por diante e assim por diante. Agora, um padrão no tipo de design da web, 12 colunas é bastante típica. Então, vamos voltar para 12, 16 e 243 e adicionar uma margem de 100 nas laterais. Então, se você estiver nesta reaudiência opcional, você pode realmente ir em frente e definir as margens esquerda e direita juntas, mas você também pode ir em frente e alterá-la para essa opção, se quiser. Margens personalizadas de cada lado, da parte superior, do lado direito, da parte inferior e do lado esquerdo. Mas normalmente fazemos o lado esquerdo e direito assim porque queremos espaçamento dos cantos esquerdo e direito. E então podemos ir em frente e, na verdade alinhar nossos objetos às nossas grades para que criemos um tipo de layout organizado. E sabemos exatamente quanto espaçamento estamos usando entre cada objeto. Agora, uma coisa legal é que, enquanto você trabalha com objetos aqui, e ele irá em frente e mostrará aquela pequena caixa rosa entre seus objetos para mostrar que você tem um espaçamento uniforme entre todos esses três objetos aqui. Ou devo dizer grupos, o que é muito legal. Então, novamente, grades que nos ajudarão a alinhar nossos objetos ao longo de nosso design uniformemente. E à medida que trabalhamos em nosso projeto, você nos verá usar grades de vez em quando para garantir que tudo esteja alinhado e distribuído adequadamente em nossos projetos. Agora, se a cor azul aqui é um pouco distrativa, podemos ir em frente e clicar neste pequeno preenchimento e diminuir a transparência das colunas para que elas fiquem mais escondidas e não interfiram com nossos projetos. E a qualquer momento podemos ir em frente e simplesmente desligá-lo. E agora vemos que nossos objetos estão muito mais bem organizados em nossas pranchetas. O outro tipo de grade é uma grade quadrada. E, essencialmente, isso é como uma grade e grade quadrada uniformemente cruzam esse design. Podemos ir em frente e alterar o tamanho quadrado aqui. Você pode fazer isso, digamos que 50. E agora você tem um tipo diferente de grade onde ela tem as linhas horizontais e verticais uniformemente. Então você definitivamente pode usar uma raiz quadrada se quiser um alinhamento mais específico. Especialmente se você talvez estiver montando um ícone ou algo que exija mais detalhes em termos de espaçamento. Mas, de outra forma, normalmente usamos uma grade de layout. Quando se trata de aplicativos web e móveis, você sempre pode ativá-lo e desativá-lo novamente, como mencionei aqui. Se, em algum momento, você quiser usar essa grade como uma grade padrão, você pode ir em frente e tornar essa a grade padrão. E assim, se eu fizer algumas alterações, digamos 20 grade. E eu quero usar a grade personalizada aqui. E eu quero, digamos que agora eu quero voltar para essa grade padrão. Sempre posso clicar no padrão dos EUA. E irei em frente e voltarei para as configurações da minha grade padrão que defini, o que é muito útil. Então é assim que você usa grades no Adobe XD. E na próxima palestra vamos explorar como alinhar e distribuir nossos objetos em suas placas de arte. 17. Alinhamento e distribuição: Então agora que sabemos como podemos realmente usar nossas grades para alinhar as coisas um pouco melhor dentro do nosso quadro de arte. Também vou mostrar os recursos de alinhamento e distribuição no XD, porque mais comumente usaremos esses recursos para alinhar nossos objetos em nossos projetos. Para demonstrar, vou apenas seguir em frente e clicar na tecla a no meu teclado e apenas desenhar outra prancheta aqui. Apenas com o propósito de mostrar como distribuição e o alinhamento funcionam. Você não precisa seguir esse passo se não quiser, mas eu o encorajo para que você entenda como nossas ferramentas de alinhamento funcionam. Agora usando a tecla R, vou usar minha ferramenta retângulo para criar alguns retângulos, variar aleatoriamente em meu experimento e criar cinco retângulos. E eu vou apenas ir em frente e escapar desse retângulo dois. E segurando Shift, vou seguir em frente e clicar em todos os meus retângulos. E só para que você possa ver melhor, eu vou dar-lhes acordo preenchimento aqui. Legal. Então agora temos um monte de retângulos que estão todos muito desigualmente espaçados em toda a minha prancha de arte. Então deixe-me apenas ampliar aqui para que você possa vê-lo melhor. Então, as primeiras coisas primeiro, se você tiver algum objeto selecionado, não importa se é um retângulo ou uma caixa de texto ou algo assim. Mas usando a tecla Alt no teclado, você pode realmente ver o espaçamento desse objeto dentro da prancheta. Por exemplo, esse retângulo aqui está 270 pixels da parte superior, 1185 pixels acima da parte inferior aqui, 5, 11 pixels da direita e 2551 pixels da esquerda. E você pode repetir esse processo. Portanto, você não só pode ver o espaçamento entre esse objeto e sua placa de arte, como também pode ver o espaçamento entre esse objeto e outro objeto simplesmente segurando velho e pairando sobre objetos diferentes . Então, desta forma, você pode ver qual é o espaçamento entre cada objeto diferente. E à medida que você passa por isso, você notará que meus objetos não estão uniformemente espaçados. Eles estão muito espaçados aleatoriamente. Então é aqui que as características de uma mulher são úteis no XD. Então, clicando e arrastando e selecionando todas as minhas formas aqui, você precisa ter todas as suas formas selecionadas ou aquelas que deseja alinhar com base em sua placa de arte. E, em seguida, usando essas ferramentas aqui, podemos realmente seguir em frente e experimentar diferentes recursos de alinhamento. Então, o primeiro está alinhado para digitar Eu clico nisso. Xd irá em frente e alinhará todos esses retângulos à camada mais superior entre esses objetos. Então, se eu simplesmente desfazer isso, porque a camada mais superior é esse retângulo aqui. Dentro de todos os meus retângulos selecionados estão objetos selecionados. Xy seguirá em frente e empurrará todos esses retângulos para combinar com este aqui, já que este está no topo mais alto. Da mesma forma, se eu fizer isso aqui, ele seguirá em frente e fará a mesma coisa, mas no meio de toda a minha caixa de pais aqui. Então vamos avançar e alinhá-los verticalmente ao meio. Se eu desfazer isso e fazer isso na linha de fundo, iremos em frente e faremos de forma muito semelhante o que é feito com a guia alinhada, mas na parte inferior, para o objeto inferior, que foi este aqui. Usando essa opção, posso ir em frente e distribuir todos os meus objetos horizontalmente. Então isso significa que o XD irá em frente e criará espaçamento uniforme entre todos os meus objetos. Então agora, se eu realmente clicar em um e verificar o espaçamento segurando Alt, posso ver que ele tem um espaçamento de 450 pixels aproximadamente entre cada objeto. E agora, se eu selecioná-los novamente apenas arrastando todos os objetos aqui, também posso fazer uma coisa muito semelhante chamada distribuída verticalmente. Então isso irá em frente e realmente distribuirá todos os meus objetos são verticalmente para que eles tenham um tipo semelhante de espaçamento vertical entre si. E esses são os alinhamentos horizontais. Então alinhados à esquerda, iremos em frente e alinharemos todos os meus objetos ao lado mais esquerdo dessa seleção de pais ali. Portanto, todo esse tipo de visão pai que temos sobre objetos, o ponto mais à esquerda estaria aqui. Então, vamos em frente e empurrar tudo para esse ponto lá. Se eu fizer o meio, ele irá em frente e empurrará tudo para o meio dessa caixa. E então, como seria de esperar com a linha correta, tudo estará alinhado com o objeto mais certo dentro da minha seleção. Então, novamente, uma coisa a notar é que tudo está sendo alinhado em relação ao que você selecionou. Então, se eu tiver apenas esses, digamos que três objetos selecionados e, em seguida, esses recursos funcionarão forma diferente, dependendo do que eu selecionei. Agora, e se você quiser realmente apenas alinhar tudo isso? Toda a seleção aqui horizontalmente dentro da minha prancheta, se eu selecionar todas elas juntas e arrastar, por padrão, o XD se encaixará quando eu estiver no meio horizontalmente, e, da mesma forma, quando estamos no meio verticalmente também. Então agora todo esse contêiner pai está alinhado ao meio da minha prancheta, tanto vertical quanto horizontalmente. E esse é o seu alinhamento e distribuição no XD. E a próxima palestra quando voltar e explorar alguns dos nossos kits de interface do usuário de wireframe que facilitarão muito o design no XD. 18. Kits de UI Wireframe: Então, espero que você esteja familiarizado. Então, espero que você esteja se familiarizando com o XD. Agora, estamos quase prontos para realmente começar nosso projeto. E esta será obviamente a parte mais divertida de todo o curso. Então, mal posso esperar para começar com você nessa. Mas antes de entrarmos e fazer isso, na próxima seção, enquanto começamos nossos designs brutalmente usando wireframe kids que o Adobe XD fornece, que são super úteis. E você verá o porquê em apenas um segundo. O que você deve ir para o arquivo na sua opção de menu e vá em frente e clique em Obter kits de interface do usuário. Depois de fazer isso, o XD realmente seguirá em frente e abrirá seu navegador. E ele deve colocá-lo em uma página como esta. Se você não estiver nesta página, você pode simplesmente ir em frente e fazer uma pausa aqui e certifique-se de seguir este link aqui. Mas você deve ser levado a esta página por padrão. E então, o que são kits de interface do usuário? Bem, kits de interface do usuário são essencialmente crianças de interface do usuário que já foram montadas por outros designers para o XD, que você possa usá-los em seus projetos para acelerar seu processo de design. E então o que isso significa é que empresas como Apple, Google, Amazon e assim por diante criaram essas estruturas, estrutura de design para que você possa realmente ir em frente e pegar essas crianças. E então, em vez de ter que reinventar ou redesenhar uma barra de navegação como esta aqui, você pode realmente ir em frente e usar essa em seus projetos, que é essencialmente o que a maioria dos designers faz para imitar a aparência do aplicativo em um aplicativo real para iPhone ou iOS. Isso é realmente importante porque eu vi designers redesenhar ou recriá-los do zero. Mas, na verdade, não há nenhum ponto porque eles estão disponíveis para você gratuitamente no seu site do XD UI Kit. Portanto, se você está projetando um projeto Bootstrap para a Web ou está montando um aplicativo para Android. Você sempre pode ir em frente e usar o garoto para poder acelerar seu processo de design. E, claro, usaremos isso na próxima seção enquanto trabalhamos em nosso aplicativo móvel. Só dando uma ideia de como isso funciona, vou seguir em frente e colocar o kit no design da Apple. Dependendo de quando você estiver assistindo isso, essas crianças podem ser diferentes ou podem parecer diferentes. Portanto, não entre em pânico se você não vir exatamente o tipo de kit que vemos aqui, ou essas imagens podem ser diferentes. E dependendo do que o iOS está fora no momento. Então, vamos em frente e clique em obter o kit, que nos levará ao site da Apple. E a partir daqui temos acesso aos kits de SO iOS e iPad, que podemos baixar usando esse pequeno ícone aqui para diálogo. Agora este é um arquivo um pouco grande, então pode levar algum tempo para fazer o download, então seja paciente com ele. Vou tomar seu tempo. E, eventualmente, ele se abrirá. Basta fazer uma pausa aqui se precisar. Se você estiver em um Mac, passe pelo processo de configuração normal. E você deve então ser capaz de ver esse pequeno arquivo ou pasta, eu devo dizer. E depois de ir em frente e abri-lo, você receberá esse modelo de design para iPad. Este é para iPhone, eu acredito. E por último, mas não menos importante, isso é para seus têxteis. Este é o que estamos interessados se estivermos projetando para um aplicativo para iPhone. Então, vamos seguir em frente e clicar nos modelos de design mais componentes, além de guias e traço iPhone dot TXT. Ao clicar duas vezes nele, o XD seguirá em frente e o abrirá. Agora, se você for solicitado para a tecla X para abrir arquivos a partir de downloads, vá em frente e clique em OK. Pode levar algum tempo para abrir este arquivo, então seja paciente com ele. Mas uma vez que ele carrega, ele deve se parecer com isso. Então, com meu modelo de design aberto, posso simplesmente ir em frente e vamos ver, estou trabalhando para adicionar talvez uma visualização de atividade controlando esta aqui. Posso simplesmente ir em frente e copiar este clicando nele e clicando em Control ou Command C, ou Control C no Windows. Voltando ao meu projeto e, em seguida, basta colar o final onde eu quiser. Então, é claro, agora não estamos trabalhando em um iPhone. Os aplicativos não são tão relevantes. Mas uma coisa que eu quero observar é que quando você importa ou cola algo de outro arquivo, você pode obter essa fonte ausente. Então isso é simplesmente porque a Apple está usando certas fontes dentro do design aqui que não temos em nossa máquina. Então é aí que estamos recebendo aquela pequena fonte ausente. Mas você pode ir em frente e encontrar esses arquivos e instalá-los e , em seguida, esse erro deve desaparecer. Portanto, não entre em pânico se você conseguir algo assim. Geralmente é por isso que isso acontece. É assim que você usa essencialmente kits de interface do usuário para acelerar seu processo de design. E isso pode não fazer muito sentido agora, mas quando começarmos a trabalhar em nosso projeto, você verá como ele será útil. 19. Atalhos de zoom: Continuo dizendo que vamos chegar ao projeto principal em que vamos trabalhar e continuamos voltando à introdução, mas estamos quase terminando. Esta é, na verdade, a última palestra desta parte da seção. Meu objetivo aqui é garantir que você tenha familiaridade suficiente com o software antes de entrarmos em um grande projeto. Mas é claro que vamos dar passo a passo e ainda continuar aprendendo. A ideia toda não é memorizar tudo o que falamos ao longo dessas palestras, mas fazê-lo o suficiente com a prática que se torne natural para você. Essa é realmente a melhor maneira que descobri que esses softwares de design ou qualquer software em geral funciona quando se trata de aprendê-lo. Tudo bem, basta falar sobre isso, vamos falar sobre zoom. Então, como eu mencionei, vamos explorar o zoom no XD. A maneira mais simples de acessar a opção Zoom está em exibição e seu menu. Então, temos um monte de opções aqui desde 100 por cento, que nos mostrará o tamanho real deste projeto. Então, você sabe, se esse projeto fosse 100%, isso é o que o usuário realmente verá. Então, isso é um tamanho real se você quiser pensar sobre isso dessa maneira, então quando você tiver que 100%, o que, claro, é um zoom ainda maior. E agora essas são apenas predefinições, mas essas são as mais interessantes, que é o comando 0 irá em frente e caberá tudo o que você tem, todas as suas pranchetas em toda a visão. E isso é para acessar esses 100% a 100% e se adequar a todas as opções. Você também pode fazer o Comando 1 para 100% confirmado com quatro a 100% Comando 0 para responder entre 0 para caber tudo. qualquer momento, você também pode fazer o Command plus e menos se quiser aumentar e diminuir um pouco. Se você quiser ampliar para uma seção específica, digamos que eu queira ampliar essa pequena coisa de haltere aqui. Posso pressionar o Z no meu teclado e, em seguida, desenhar um pequeno retângulo em torno dele e ele irá em frente e ampliará para essa área. Vou para o Comando 0 para desfazer isso. Outro truque legal é que, se estivermos trabalhando, digamos que o quadro de arte determinado, que quer que eu tenha selecionado, posso ir em frente e clicar em visualizar, ampliar para a seleção. Ou pode fazer o Comando 3. E iremos em frente e ampliaremos exatamente o que estamos vendo. Então, se eu tiver, digamos que este grupo o selecione e pressione Comando 3. E iremos em frente e ampliaremos exatamente esse grupo. O que é ótimo se você estiver trabalhando com, digamos, apenas um determinado design. Você quer, você sabe, focar no design e talvez em uma determinada camada na parte superior ou ser mais preciso e usá-lo. E então vá em frente e volte para talvez um nível de zoom de 100% ou 200%. Ou apenas use sua pitada no trackpad ou rolagem do mouse para ampliar e diminuir manualmente. Assim. E, claro, à medida que eu amplio e agora você também pode ver a mudança do nível de zoom aqui. Se você quiser o Zoom personalizado com você, Zoom vale 25%. Você também pode conseguir isso apenas digitando-o aqui. Mas isso raramente é usado para sim, Essencialmente essas são suas opções de Zoom. E os dois mais importantes que eu quero que você se lembre, simplesmente pressionando o zed e desenhando em torno da área que você deseja Zoom. E também fazendo uma seleção clicando em algo que você deseja ampliar e, em seguida, pressionando Comando 3. Acho que essas são as opções de Zoom mais usadas e são muito úteis. E assim, com isso dito, vamos entrar na nova seção e começar a trabalhar em nosso novo projeto de design móvel. 20. Bites saudáveis: introdução do projeto: Tudo bem, bem-vindo à nova seção. Estamos prontos para finalmente começar a usar nosso design de aplicativo móvel. Super animado para esta seção, e acho que você vai adorar. Então, antes de entrarmos no projeto em si, eu encorajo você a ir em frente e baixar os recursos desta palestra. Você deve conseguir encontrar um arquivo. Você deve ser capaz de encontrar uma pasta como esta aqui, mordidas saudáveis, ativos de aplicativos móveis. Isso incluirá todos os arquivos documentos e ícones e coisas que você precisa para realmente projetar este aplicativo móvel conosco. Então, tome um segundo lá para baixar isso, vá em frente e descompacte-o e abra-o. Então, dentro dessa pasta, você deve ser capaz de encontrar um pequeno arquivo como este chamado cuecas de design de mordidas saudáveis são PDF. Vá em frente e abra isso na pasta. Então, essencialmente, este é nosso resumo de design que o cliente nos forneceu. Então, o cliente neste caso é chamado de mordidas saudáveis. E o projeto em que estamos trabalhando é chamado de aplicativo de pedidos de alimentos móveis saudáveis. Então, se você não sabe o que informar não é nenhum problema. Essencialmente, um resumo é o que nos fornece as informações iniciais para o projeto fornecido pelo nosso cliente. Então, dentro desse resumo, geralmente temos algo sobre o cliente e isso explica o que eles fazem. Talvez algumas palavras-chave em torno sua empresa e seus projetos, metas e objetivos do projeto, o que eles estão procurando fora desse projeto. E, em seguida, com mais detalhes, às vezes você verá um público-alvo Slash no mercado. Então é isso que eles estão tentando atender este produto 2. Portanto, isso nos permitirá realmente ter certeza de que, quando estamos projetando, estamos projetando para esse público-alvo específico. Junto com outras coisas, como entregas do projeto. Então, é isso que eles estão procurando que nós entregemos a eles no final deste projeto com eles. E, em seguida, outras coisas, como cronograma, orçamento, que direção eles querem tomar em termos de direção criativa, talvez quem seja a principal pessoa de contato nesta empresa e, em seguida, algumas outras notas são fornecidos pelo cliente. Então, esse resumo geralmente é o que é fornecido inicialmente quando você começa a trabalhar com clientes ou até mesmo com uma empresa na qual você está trabalhando? Meu fornece algo assim que inclui o que eles estão procurando. Agora, às vezes, pode incluir mais detalhes nos resultados. Então, agora, vamos passar pelo resumo aqui. E, na próxima palestra, vamos apresentar as páginas que precisaremos em nosso aplicativo móvel. Assim, podemos projetar isso para o nosso cliente. Mas, às vezes, até essas páginas ou recursos serão incluídos neste resumo para que você saiba exatamente o que estão procurando. Ou às vezes eles podem ser mais amplos como este. E realmente é seu trabalho criar esses recursos e páginas e o que eles precisarão em seu aplicativo móvel. Mas, por enquanto, vamos seguir em frente e passar por esse breve. Portanto, para mordidas saudáveis, mordidas saudáveis oferecem aos clientes um aplicativo de pedidos móveis fácil de usar para alimentos saudáveis e sua cidade. Portanto, é essencialmente um aplicativo móvel de pedidos de alimentos, mas apenas para alimentos saudáveis. Muito legal. Aqui estão algumas outras palavras-chave da marca. Alimentos saudáveis, alimentos limpos, baixo teor de carboidratos, dieta, et cetera, et cetera. Você pode ler isso com mais detalhes. Portanto, nosso objetivo é criar um aplicativo de pedidos de alimentos simples de usar que ajude os clientes a navegar em restaurantes saudáveis próximos e fazer um pedido no menu exibido no aplicativo. Os clientes devem ser capazes de definir uma opção de entrega e ver o andamento de seus pedidos à medida que estão sendo preparados e entregues. Legal. Portanto, o cliente-alvo, ou jovens profissionais com idades entre 22 e 40 anos que estão procurando apenas opções de refeições saudáveis e o cuidado com sua aptidão física e saúde, obviamente. E eles raramente cozinham comida em casa e preferem comer fora a maior parte do tempo. Então, é claro, aquela opção saudável. E então é isso que mordidas saudáveis que sua empresa aqui fornece. E as entregas do projeto estavam projetando um design de aplicativo móvel para iOS, bem como o protótipo e, em seguida, também um logotipo para sua empresa, que será montado ao longo do projeto. E havia um cronograma. Temos um modelo inicial em duas semanas, um protótipo em três semanas, e modelos finais e entregas. Então, aqui, devido em quatro semanas. Agora, é claro, estes são apenas meio que feitos para o bem deste projeto neste curso. Normalmente, eles podem ser mais longos dependendo do tamanho do projeto. E, claro, eles disseram orçamento de TI aqui de 6 mil dólares americanos. Agora você pode estar cobrando mais ou mais dependendo de onde você está em sua carreira de design. Então, se você estiver começando, você pode estar cobrando um valor menor pelo seu projeto, o que é totalmente bom. E, em seguida, até projetos maiores que podem estar nos intervalos de 45 figuras. Então, em termos de direção criativa, queremos desenvolver a marca de uma empresa incluindo logotipo, cor e estilos de fonte. E então queremos manter o logotipo e o aplicativo limpos e modernos. E isso sugere que usamos uma cor verde, é claro, para mostrar a saúde do produto por falta de uma palavra melhor, e assim por diante. E, portanto, essas pessoas de contato primárias são feitas novamente para o projeto. Você não precisa se preocupar com isso, mas geralmente você terá uma pessoa de contato principal ou qualquer outra parte interessada e pessoas que deveriam aprovar as pessoas que serão aprovando o projeto depois que ele for concluído. Então, outros nós, alguns ativos de ícones serão fornecidos para o mockup. Portanto, isso está incluído nessa pasta que você deveria ter baixado desta palestra. Então, vamos voltar em uma palestra a seguir e reunir com mais detalhes quais páginas precisamos projetar antes de começarmos a fazer wireframing e criar nossas placas de arte. 21. Inspirando-se: Tudo bem, então o que precisamos para este aplicativo móvel? Então, porque o cliente aqui só nos fornece o material de entrega como o design do aplicativo móvel. Eles não nos deram especificamente quais páginas você precisa precisar ou precisamos ter dentro desse design ou dentro do aplicativo. Nós vamos chegar com eles por conta própria. Então eu fui em frente e abri um documento do Word aqui, você pode simplesmente ir em frente e abrir páginas no Mac ou em um documento do Word no Windows. Qualquer edição de palavras que você usa. Vou fazer algumas anotações aqui para saber quais páginas vamos incluir em nossos designs. Vai em frente e digitará saudável por requisitos móveis de pedidos de alimentos. Isso também será fornecido na pasta que você baixou. Então, no caso de você não querer acompanhar e fazer as mesmas anotações aqui. Você pode ir em frente e acessá-lo em seus recursos que você baixá-lo também. Então, como sabemos quais páginas precisamos projetar para um aplicativo móvel, para Web App, para qualquer projeto estamos trabalhando nesse assunto. Bem, o que eu gosto de fazer pessoalmente é, na verdade, ir em frente e instalar outros aplicativos semelhantes que estão fazendo funcionalidades semelhantes. Então, temos toneladas de aplicativos de pedidos de alimentos por aí. Seja Uber Eats, pule a louça. Há tantos por aí que podemos realmente ir em frente e instalar, brincar, talvez até experimentar e realmente pedir algo para que possamos ver todos os projetos necessários e todos os páginas que entram em tal aplicativo. Então esse é o primeiro passo para fazer isso. Agora, e se você já fez isso e está procurando mais inspiração, bem, não se preocupe, há mais recursos por aí. Vou compartilhar alguns recursos com você que você pode usar para criar inspiração quando estiver vendo o que precisa no design do seu aplicativo móvel. Ou é. Então, abri três recursos que você pode usar gratuitamente para descobrir o que precisa ou criar inspiração quando estiver trabalhando em um aplicativo móvel ou web. E eu incluí os links para todos os três e alguns documentos de texto que eles podem baixar desta palestra também. Então, o primeiro é esse site chamado moveon dot design. Você pode realmente ir em frente e procurar aplicativos iOS e Android aqui. Então, eles foram em frente e baixaram algumas capturas de tela de cada aplicativo. Portanto, temos uma entrega que é semelhante ao que estamos projetando. E vários outros aplicativos, como LinkedIn e assim por diante e assim por diante. Você pode ir em frente e navegar. Eles são filtrados pela categoria do aplicativo. Então, se estivermos procurando apenas aplicativos de comida e bebida, isso nos solicitará o primeiro login. Então, vou seguir em frente e basta clicar em login aqui. Acabei de ir em frente e efetuei login aqui. Posso pedir-lhe um pequeno ano de pesquisa ou assim. Vou ir em frente e pular isso. Mas, essencialmente, depois de fazer o log n, Você pode realmente ir em frente e filtrar pelo tipo de aplicativos que você está procurando. Assim, podemos filtrar por categoria, comida e bebida. E agora vemos um monte de aplicativos que fazem comida e bebida. Então, basta clicar neste primeiro aqui, Deliveroo. E, como você pode ver, eles incluíram todas as capturas de tela de diferentes partes do aplicativo. Então, qualquer coisa, desde sua tela inicial até compartilhamento de localização, navegação , restaurantes, páginas de verificação de telefone , etc até os detalhes da entrega e tal. Agora, para o nosso projeto, não vamos ser tão detalhados quanto um aplicativo como esse, porque obviamente um aplicativo como esse levará muito mais tempo para projetar. Então, vamos nos concentrar em mantê-lo simples. Podemos obter o básico para a funcionalidade principal do aplicativo, que é apenas pedir alimentos, alimentos saudáveis através do aplicativo. Agora, é claro, você sempre pode levá-lo mais para projetar mais páginas e enviar esses designs para obter feedback meu, o que você pode fazer enviando seu projeto ou compartilhando-o com hello clever em gmail.com. E vou tentar o meu melhor para responder a todos os projetos e deixar feedback para você sobre seus projetos. Mas sim, vamos seguir em frente e usar recursos como este para criar inspiração em quais páginas precisamos e no que precisamos incluir nessas páginas. Para outros recursos aos quais você tem acesso ou ao Adobe Stock. E, claro, isso é mais para baixar imagens stock. Mas se você pesquisar algo como o aplicativo de pedidos de alimentos, você ainda terá um monte de páginas que você pode usar como inspiração no que você pode incluir em seus aplicativos móveis, como esta aqui. Portanto, sinta-se à vontade para experimentar isso e navegar por esses recursos. Por fim, o drible é outro ótimo que você pode fazer outro aplicativo de busca de alimentos que eu fiz aqui. E eles têm toneladas de pessoas carregando tipos de aplicativos de pedidos de alimentos de amostra. Onde, uma vez que você fizer o log n, Você pode realmente vê-lo em tela cheia. Ou você pode ter a ideia das miniaturas aqui. Muito legal. Então, se você está se perguntando como vou criar as páginas que vamos projetar. Eu simplesmente vou usar isso. Então, vamos voltar na próxima palestra e montar as páginas que vamos projetar para o nosso aplicativo. 22. Requisitos de aplicativos: Tudo bem, vamos fazer sua lista das páginas que precisamos projetar para este aplicativo de pedidos de alimentos aqui. Então, à medida que passamos na última palestra, você pode usar sites como o design móvel para criar inspiração e ver quais páginas você pode precisar. Então, com base nesses tipos de maquetes e outros modelos que eu criei antes para aplicativos de pedidos de alimentos ou já conheci várias páginas. Então, vou seguir em frente e colocá-los juntos neste documento. Então, apenas como um lembrete, este documento está disponível para download. Os recursos no início desta seção. Então, na primeira página, vamos precisar da página da tela inicial. Então esta é a página que você vê aqui que geralmente mostra um logotipo e um pouco de carregamento que atua como uma espécie de tela de carregamento. E então precisaremos de uma página de login, que é onde os usuários irão em frente e façam login com contas diferentes ou usando e-mail e senha. E então provavelmente faremos algum tipo de verificação para que possamos projetar uma verificação de número de telefone. Lá vamos nós. Em seguida, teremos uma página principal que mostra os restaurantes. Assim, podemos chamar esta página principal ou o restaurante ou a página de navegação, realmente qualquer que funcione. Vou chamá-lo de página principal porque é, normalmente, os usuários irão quando iniciarem o aplicativo depois que fizerem login. E então provavelmente vamos querer algum tipo de página de mapa ou local onde os usuários poderão inserir seu endereço para entrega. Definitivamente vai querer fazer o perfil da página de onde os usuários poderão acessar suas informações, seu cartão de crédito, etc. E por falar em cartão de crédito, definitivamente precisamos de uma página de pagamento. Portanto, é aqui que os usuários poderão adicionar seu método de pagamento para o aplicativo. Vamos ver o que mais. Agora, se você se lembrar, em nosso resumo, o cliente quer que mostremos o progresso do pedido à o progresso do pedido à medida que ele está sendo preparado e entregue. Então, com base nisso, depois do nosso tipo de página principal, definitivamente desejaremos a página do menu de onde os usuários poderão acessar e menu desse restaurante do select, bem como um pedido página, que é onde eles vão em frente e agradarão seus pedidos para a comida que eles querem. E então eu acho que uma página Progress onde será capaz de acompanhar o progresso do pedido, ver quando ele será entregue, e assim por diante. Agora este aplicativo Deliveroo aqui que abri no design de pontos moveon da palestra anterior. Muitas outras páginas, como filtros e ofertas e tantas outras opções, como selecionar suas opções dietéticas e tal. Não precisamos de todos esses recursos agora porque queremos criar um aplicativo de pedidos simples. Mas, como mencionado, você pode definitivamente projetá-los e usar a oportunidade aqui para melhorar a criação dessas páginas. Então, temos tudo aqui o que queremos para o nosso cliente. Como um exercício, vou realmente adicionar uma página de pedido anterior onde você pode realmente acessar os pedidos que o cliente fez no passado, que os clientes possam ver seus anteriores pedidos. Vou deixar esta página e a página de exercícios para você fazer enquanto passamos por projetar este aplicativo. Então, lá temos isso. Esses são nossos requisitos de aplicativos. Claro, é sempre uma boa ideia enviar isso ao seu cliente em checar novamente com ele seu cliente em checar novamente com para ver se isso é exatamente o que eles querem, se há algo faltando, porque este é um processo de ida e volta. Você tem que trabalhar e se comunicar com seus clientes sobre o que está projetando e quais são as necessidades deles para que você os atenda. E não há discrepância aqui entre os dois. Então, uma vez que obtemos nossa aprovação do nosso cliente, o que podemos assumir que já fizemos. Podemos seguir em frente e seguir em frente com o design dessas páginas. Mas antes de saltar para 16, na verdade projetá-los, vamos montar o que é chamado de wireframes de baixa fidelidade, como este que você vê aqui. Então, se você fizer wireframes de baixa fidelidade do Google, você poderá ver alguns exemplos do que eles são. Essencialmente wireframes nos permite criar um blueprint do nosso aplicativo que menciona o que precisamos dentro dessa página e para onde as coisas devem ir. Não há cor envolvida, é tudo preto e branco. Você pode até ir em frente e esboçar isso em um pedaço de caneta e papel para começar. E acho que é isso que vamos fazer na próxima palestra para montar o wireframe para nossas páginas antes de entrarmos e realmente começar a projetá-las. Então pegue um pouco de caneta e papel e te vejo lá. 23. Como desenhar nossas frames de fio: Para esta próxima parte aqui e vá em frente e pegue um pouco de caneta e papel simples, porque vamos realmente desenhar nosso wireframe em caneta e papel e depois movendo isso para o XD. Então, vamos entrar e começar a desenhar ou wireframes. Ei, eles estão prontos para começar com nosso wireframing aqui. Então, espero que a partir daí você consiga ter uma boa ideia do que estamos desenhando aqui. Então deixe-me ir em frente e abrir minha caneta. E então vou começar a escrever o nome do projeto de primeiro. Então, vamos fazer mockup móvel de mordidas saudáveis . E vou apenas seguir em frente e criar uma caixa em cada página que temos para o nosso projeto. Você pode usar uma régua se quiser ser muito preciso com isso, mas eu só vou desenhá-los à mão. Eles não precisam ser perfeitos. Lembre-se, estamos apenas tendo uma ideia do que queremos onde. Então, só para poder tornar um pouco mais fácil para você ver. De nossa palestra anterior, temos nove, 10 e 11. Então, temos dez páginas que seremos projetadas com uma como exercício. Então, vamos projetar as 10 páginas, ou pelo menos enviá-las aqui em nosso papel. Então, vou tentar caber no 4 nesta página. Então ela vai ir em frente e desenhar. Sou uma espécie de app box aqui. Para cada página. Novamente, você não precisa ficar perfeito com isso. A ideia toda é ter uma ideia do que estamos projetando. Então, eu realmente não vou desenhar a página da tela inicial porque só temos o logotipo lá, então sabemos como isso deve ser. Vamos fazer a página de login. Vamos fazer a verificação por telefone. Vamos fazer a página principal e vamos fazer a página de localização. Vou apenas ir em frente e ir para uma nova página. Coloque esse de lado por enquanto. Vamos criar quatro aqui também. Então, temos perfil à esquerda. Perfil. Temos menu de pagamento. Então esta é a página em que veremos o menu dos alimentos e, em seguida, uma página de pedidos, apenas economizando espaço. Acho que posso caber na página de progresso aqui também. Peça desculpas se é um pouco difícil ler minha caligrafia de lá, mas a ideia é apenas montar os wireframes aqui. Então, a partir daqui em nossa página de login, como vimos antes em outras páginas de registro. E, novamente, você pode se inspirar aplicativos que você tem no seu telefone ou simplesmente navegar pelos sites que passamos, provavelmente queremos ou logotipo em algum lugar aqui. Assim, poderíamos fazer logotipo, uma opção de e-mail e senha aqui. Então, como o botão de login. E se você quiser fazer login com o Google ou outras opções, podemos listá-las aqui também. Então, vou escrever outras opções de login. E então talvez um pequeno texto aqui para nossos termos de serviço e política de privacidade. Link para o usuário clicar se quiser ver seus termos de serviço ou sua política de privacidade. Geralmente eles colocam isso em algum lugar na página de login ou talvez sob as páginas de perfil. Para a verificação por telefone é bem simples. Só queremos uma pequena caixa aqui para que eles insiram seu número de telefone com um pequeno botão home para ir em seguida. Para que eles possam verificar isso. E bem direto, podemos colocar um pequeno texto aqui para descrever exatamente o que queremos que eles façam. Página principal, quero ir em frente e clicar em uma pequena barra de navegação aqui e talvez ter uma pequena caixa de pesquisa lá para que eles possam procurar restaurantes específicos, bem como talvez um pequeno menu de hambúrguer. Assim, eles podem ver o menu, do qual falando, na verdade, não criamos uma página de menu. Portanto, esta página de menu realmente nos leva à página de perfil e, a partir daí, eles podem ter acesso a outras opções. E aqui vamos ter cartões que mostrarão os restaurantes. Assim, podemos ter uma pequena imagem do restaurante aqui, bem como o título do restaurante. Então, vou apenas apontar para isso. Podemos incluir um pequeno título. Podemos incluir a classificação. Então, o nome do restaurante inclui uma pequena classificação, inclui uma pequena classificação, talvez alguns cifrões para incluir a faixa de preço e, em seguida, talvez o tipo de comida daquele restaurante. E então vamos seguir em frente e repetir isso para todos os restaurantes que temos e assim por diante, assim por diante. Para localização, só queremos ir em frente e permitir que eles procurem o vestido. Então, esta será uma pequena caixa de pesquisa de endereços aqui com um pequeno mapa. E ele poderá salvar o endereço deles. Talvez tenhamos um pequeno ícone para mostrar a eles onde está o endereço. Podemos fazer um pouco de atual Localização também. Talvez aqui tenhamos uma pequena caixa de texto para escrever a atriz. Então isso é como nossos wireframes de baixa fidelidade para essas páginas. Para este, vamos voltar na próxima palestra para completá-lo. 24. Completando nossos frames de fio: É feito aqui. Vamos prosseguir e concluir esses cinco outros modelos de baixa fidelidade para um projeto também. Então, começando com um perfil, vamos seguir em frente e usar esse perfil na verdade, uma espécie de página de menu também. Porque, como você se lembra ou em outra página da página principal, eu queria que eles clicassem neste pequeno menu de hambúrguer e a partir daí, e eles poderão ver o menu de barra de perfil. Alguém talvez possamos fazer um pequeno menu aqui e para o pequeno X para fechar o menu, talvez tenha sua foto de perfil aqui junto com o nome deles. E a partir daqui podemos dar a eles acesso a várias opções para que possamos fazer uma contagem se eles quiserem ir em frente e editar os detalhes da conta e podemos fazer o histórico de pedidos de pagamento. O que mais precisamos? Precisamos da localização ou endereço que faremos agora, faremos um pequeno botão de logout e acho que é tudo o que precisamos. Lembre-se de que, em algum momento, estamos perdendo alguma coisa, sempre podemos voltar e atualizar esses wireframes. Então, a ideia é apenas colocar o que achamos que precisamos por enquanto. Então, faremos logout. Lá vamos nós. Essa é a nossa pequena página de perfil de barra de menu. Temos uma pequena página de pagamento aqui. Então aqui talvez possamos fazer com que eles possam adicionar um pagamento. E então podemos listar ou seus pagamentos anteriores aqui. Mas os últimos quatro dígitos. E então podemos dizer a eles talvez quais primários e, em seguida, permitir que eles adicionem daqui também, se quiserem. Outro pequeno exercício, vou deixar a página de adição para você fazer. Assim como um lembrete, você sempre pode enviar esses designs para mim e eu lhe darei alguns comentários sobre eles enviando um e-mail para olá inteligente em gmail.com. Perfeito, estamos quase acabando aqui. O menu terá o nome do restaurante aqui. E então faremos um pequeno tipo de subcategoria onde podemos mostrar-lhes talvez bebidas e ter cada tipo de opção de bebida aqui. E então talvez a rede elétrica. Você sabe o que você veria normalmente em um menu. Vamos seguir em frente e anotar o que precisamos neste pequeno cartão aqui. Obviamente, queremos o nome da bebida ou do item do menu. Queremos uma pequena descrição. Precisamos do preço e acho que isso é tudo o que precisamos por enquanto. Poderíamos fazer como uma contagem de calorias também. Porque lembre-se de que estamos projetando isso para nossos clientes-alvo que estão meio conscientes de sua ingestão calórica Provavelmente. Portanto, esse não será um bom recurso ali. E então talvez possamos ter um botão mais menos para que eles possam adicionar esse item ao pedido ou movê-lo 90. Claro, como um aplicativo de pedidos de alimentos pode realmente ser muito mais complexo do que apenas essas páginas. Mas estamos mantendo isso simples aqui para o bem deste curso. Portanto, esta página de pedido pode incluir seu pedido. Então, ele mostrará o que você adicionou para que você possa ver cada item que você adicionou. Item número 1, item número 2, podemos ter um pouco menos aqui ou algo também. Remova esse item da lista. E então talvez no fundo aqui teremos um pequeno tipo de total mostrando quanto será seu total, talvez com impostos. E então um pequeno botão que diz ordem com o vermelho total aqui. E o botão pode ter algo assim para a página do pedido. E, obviamente, nessas páginas, podemos ter um pequeno botão Voltar para voltar para a página anterior, então vamos descobrir a navegação à medida que passamos. E, por fim, precisamos de uma pequena página de progresso. Então, nesta página incluirá o progresso. Assim, podemos mostrar um pouco, talvez um pequeno bar aqui que mostrará em qual estágio seu pedido é adicionado de onde entregá-lo para que possamos mostrar exatamente o que está acontecendo agora. Então, abaixo do aqui, podemos fazer entrega e incluir o endereço o qual ele está sendo entregue. Falando nisso, definitivamente podemos ter isso em algum lugar aqui também. Então, talvez um pequeno ícone de localização para eles se certificar de que esses pedidos sejam entregues no endereço certo. E isso poderia levá-los para a página de localização que desenhamos. Portanto, temos o endereço e, em seguida, detalhes do pedido. E aqui eles podem clicar para passar por isso, sua página de pedidos para ver qual é o pedido. Também podemos incluir uma pequena chamada, opção de restaurante ou talvez até mesmo uma ordem do conselho. Legal. Então lá vai você. Este é o nosso wireframe de baixa fidelidade para o nosso projeto. Eles serão incluídos nos recursos que você baixou. Assim, você pode ir em frente e usar esses designs em vez de ter que desenhar o seu próprio. E eu encorajo você a também desenhar essa página extra como um exercício, que tem a página de pedidos anterior ou a página do histórico de pedidos. Então, agora que temos nossos wireframes, o que voltamos na próxima palestra e começamos a criar nosso arquivo XD? 25. Como criar nosso arquivo XD: Então, se você desenhou os wireframes conosco nas últimas duas palestras, então você pode ir em frente e usar esses wireframes enquanto estiver projetando seu projeto. Mas, caso contrário, você pode ir em frente e abrir as mordidas saudáveis wireframes um PDF dos recursos também. E lá eu incluí o esboço que fizemos para nossos wireframes. Então, a partir daqui, você poderá ver o que devemos incluir em cada página. E, claro, se houver algo que deixamos de fora, vamos voltar e adicioná-lo às nossas maquetes. Mas isso lhe dá uma ideia geral de por onde começar. Então, para esta palestra, vamos seguir em frente e configurar nossos quadros de arte para cada página. Então aqui sabemos que precisamos de um total de 1, 2, 3, 4, 5, 6, 7, 8, 9 placas de arte, bem como uma extra para você fazer a lei do passado ou das páginas. Então, criaremos 10 pranchetas lá em nosso projeto. Mas antes de fazermos isso primeiro, precisamos realmente ir em frente e criar um novo projeto no XD. Vamos seguir em frente e minimizar isso e seguir em frente e abrir nosso XD. Então, estamos projetando um projeto iOS acordo com os resumos do cliente. Então, fiz uma pequena pesquisa no Google pelo modelo de iphone mais usado em 2021, e parece ser o iPhone 12. E a razão pela qual eu fiz isso é que projetando para um iOS ou até mesmo um aplicativo Android, você quer descobrir qual o dispositivo mais usado é o dispositivo mais usado com base nisso. E então vá em frente e crie algum tipo de design responsivo que seguiremos em frente e ainda trabalharemos em telas menores ou um pouco maiores. Então, vou te mostrar como fazer isso durante todo o projeto. Mas, por enquanto, vamos em frente e criar um projeto para o iPhone 12. Vai em frente e fechará isso. E aqui mesmo em nosso XD, vá para casa. Se você já está em um projeto, vá em frente e feche-o e vá para casa e, uh, vá em frente e clique nesta pequena seta ao lado do iPhone 12 Pro Max, ou qualquer iPhones exibidos no momento. E, em seguida, vá em frente e clique no iPhone 12. Agora, no momento em que você está assistindo este vídeo e o iPhone mais usado é diferente. Então, é claro que você pode ir em frente e usá-lo como opção. Vamos seguir em frente e clicar neste iPhone 12 vírgula 12 Pro para nossa prancheta. E o XD seguirá em frente e abrirá um novo projeto com esse tamanho do iPhone 12 como padrão. Então, sabemos que precisamos de 12 ou dez páginas para nossas maquetes. Então, vamos em frente e selecione esta pequena prancheta aqui, a primeira que já temos. E então vá em frente e aperte o Comando D nove vezes, embora duplicemos nossa placa de arte nove vezes. E ela vai acertar o Comando Zero para ver quantos eu tenho. Nove. Certo, perfeito. Farei isso mais uma vez para essa página extra para o nosso histórico de pedidos. Então agora devemos ter 10 pranchetas. E ao apertar o Comando 0, podemos encaixá-los todos em uma única visualização. E agora vamos continuar e renomear essas pranchetas de acordo, logo após renomear nosso arquivo real primeiro. Então, vamos seguir em frente e clicar neste nome de projeto sem título e queijos para mordidas saudáveis. Maquete móvel. V um. Aqueles pequenos V1 são apenas para indicar que esta é a nossa primeira versão. À medida que trabalhamos em nossos projetos, podemos querer criar várias versões. Especialmente se estivermos exportando esse arquivo XD e enviando-o para o nosso cliente. E isso se não estivermos usando o recurso de compartilhamento porque caso contrário, é um compartilhamento Fisher meio que tornará isso redundante. Ou você sempre pode ir em frente e depois ajustar seu arquivo para talvez 1.1 à medida que faz pequenas alterações, ou talvez V2 se fizer alterações maiores. Mas, por enquanto, vamos deixá-lo como V1. Vá em frente e clique em Salvar. Agora, a qualquer momento, se você estiver caindo nas palestras e estiver perdido depois de cada palestra, vou salvar esse arquivo de maquete, arquivo XD e inseri-lo em arquivos de maquete. Então, a partir desta palestra, você pode ir em frente e baixar esses arquivos de maquete. E se em algum momento você se perder, você pode seguir o modelo mais recente ou o mock-up que está disponível mais próximo da palestra em que você está assistindo. Então, digamos que você esteja assistindo a palestra 23. E você vê em uma pasta de maquete há uma palestra 22. Você pode ir em frente e usar essa palestra 22 para cair em uma. Caso contrário, eu encorajo você a seguir cada passo para que você vá em frente e aprenda o máximo que puder com o XD. Então, vamos prosseguir e renomear cada prancheta. Faça o primeiro como tela inicial. O segundo tem login. Agora estou apenas clicando duas vezes aqui para editar o nome. Você também pode fazer isso no painel de camadas aqui. Dê uma olhada rápida. O que mais temos? Temos verificação por telefone. Então, quando você faz a verificação do telefone, temos nosso perfil de página principal, pagamento , menu, pedido , progresso, ou podemos até mesmo fazê-lo com o progresso dela. E por último, mas não menos importante, ou chamaremos isso de histórico de pedidos. Para este perfil, na verdade, vou fazer o menu de barra de perfis. Portanto, este é o menu do aplicativo, não o menu do restaurante. Então agora temos todas as nossas pranchetas a qualquer momento, podemos organizá-las e movê-las. Mas, por enquanto, vou apenas ir em frente e deixá-lo como está. Agora estamos prontos para começar com nossa tela inicial e trabalhar nosso caminho através do nosso design. 26. Tela de Splash: Tudo bem, então as primeiras coisas primeiro vamos projetar nossa tela inicial. Portanto, é claro, as telas iniciais são uma das páginas mais fáceis de projetar. Então eu vou seguir em frente e apenas pressionar zed e ampliar para lá. Então, para a nossa tela inicial, provavelmente queremos colorir o fundo e, em seguida, um logotipo no meio aqui com o nome dessa empresa. Então, obviamente, ainda não temos nosso logotipo. Vamos projetar isso nas futuras palestras. Mas, por enquanto, podemos dar a esta página um preenchimento de cor verde, já que isso é como o esquema de cores estamos indo para este projeto. E depois vá em frente e adicione um pequeno texto. E então talvez um pequeno suporte de lugar para onde o logotipo irá quando o tivermos projetado. Então, primeiro, vá em frente e clique nesta página de tela inicial. Certifique-se de que o selecionou. A prancheta aqui. Em seguida, vá em frente e clique na aparência. E você pode realmente ir em frente e mudar o preenchimento deste quadro de arte para o que quiser. Então, para mim, vou seguir em frente e selecionar a pequena cor verde que acho que ficará boa para este aplicativo. Agora, é claro, estou meio que olhando aqui. Não tenho uma cor específica que vou buscar. E há muito boas chances de atualizarmos essa cor quando passarmos por nossa palestra sobre ativos de cores. Mas, por enquanto, vamos seguir em frente e seguir com uma cor semelhante a esta aqui. E posso obter exatamente essa cor inserindo esse pequeno código hexadecimal em seus seletores de cores. Então, se você quiser ir em frente e escrever isso exatamente lá, você deve obter exatamente essa cor. Agora, usando este pequeno ícone de mais, posso ir em frente e adicionar essa cor à amostra de cores para que você possa ir em frente e reutilizá-la em outros objetos também. Então, o real, temos um pouco de cor para o nosso fundo. Vamos adicionar um texto pressionando a tecla t. E, em seguida, bem no meio da página. Vamos seguir em frente e fazer bytes saudáveis, que é o nome da empresa, é claro. E eu clico em escapar várias vezes. E então, obviamente, o tamanho da fonte um pouco pequeno. Então, vou ir em frente e torná-lo um pouco maior. Então, é meio que ocupar uma parte decente do tamanho da tela, mas não muito grande. Eu provavelmente quero dar um preenchimento branco em vez disso. Então, por padrão, você deve obter essa nova fonte helvetica. Caso contrário, vá em frente e mude-o aqui procurando por esta fonte. Também estaremos analisando fontes nas futuras palestras. Então, por enquanto, vamos criar isso como um espaço reservado até usarmos nossas fontes personalizadas. E agora vamos em frente e meio que trazer isso mais baixo. Então, é meio que no meio, mas não exatamente. Então isso está bem no meio da página porque esses dois tipos de linhas me mostram que isso é aleatório no meio da página. Mas se eu trouxer um pouco mais baixo, então eu posso criar espaço para o meu logotipo aqui. Então eu posso fazer um pequeno retângulo pressionando a tecla Alt. E eu vou realmente fazer um quadrado segurando Shift e meio que deixei isso passar por cima de sua cabeça escapou de várias vezes para sair dessa ferramenta retangular. E então, para o preenchimento, vamos apenas ir em frente e removê-lo e apenas ter uma pequena borda para que saibamos exatamente para onde nosso logotipo vai. E vou trazer isso um pouco mais baixo. Então é aqui que nosso logotipo vai ir. Em vez desse pequeno retângulo, vamos voltar e adicioná-lo à medida que criarmos nosso logotipo. Mas, por enquanto, esta é a nossa tela de fatia. Vamos passar para uma tela de login na próxima palestra. 27. Adicionando e masque em imagens de máscara: Tudo bem, agora estamos prontos para projetar nossa tela de login. Eu prometo a você essas telas muito mais emocionantes do que a tela de exibição porque inclui muito mais conteúdo vai aprender muito. E vamos aprender a usar máscaras de imagem também, que é muito legal para suas imagens. Então, vá em frente e amplie essa área está aqui. E na nossa pasta de recursos, você deve encontrar uma pasta de imagens que inclua uma pasta de página de login. Então vá em frente e, sob as imagens, encontre a pasta da página de login e abra-a. E aqui vemos que temos duas imagens que vamos usar em nossa página de login. Então, o que eu tenho em mente é que aqui teremos nosso conteúdo principal como temos em nossos wireframes. Portanto, teremos nosso logotipo ou e-mail e senha e botão de login, bem como os termos de serviço e tudo aqui. Mas o que eu tenho em mente é que nos cantos aqui podemos ter algumas imagens de alguns alimentos saudáveis. Então, a economia também acompanha esse tema. E, claro, para o nosso botão de login, vamos usar a mesma cor verde e simplesmente ter um campo de e-mail e senha e deve ser bom ir a partir daí. Então, voltando ao nosso XD, primeira coisa que eles querem fazer é importar essas imagens para o nosso arquivo. A maneira mais fácil de importar imagens é seguir em frente e selecionar as imagens que você deseja. Assim, você pode seguir em frente e segurar Command e selecionar ambas as imagens aqui. Agora, tenho que dar crédito ao unsplash.com por fornecer essas imagens. Se você quiser usar imagens gratuitas em seus projetos, definitivamente confira Unsplash. Eles têm uma tonelada de imagens que você pode pesquisar e usar em todos os seus projetos. E então o que eu fiz foi simplesmente procurar alimentos saudáveis. E assim, posso ir em frente e filtrar por essas opções de alimentos saudáveis. Então, a partir daí, baixei essas duas imagens e, para importá-las para o meu XD, vou seguir em frente e simplesmente arrastá-las para minha página de login. Agora, como você pode ver, as imagens são enormes em comparação com nossa Prancheta. Então, vamos seguir em frente e simplesmente segurar Shift e redimensioná-los. E a razão pela qual estamos segurando o turno é garantir que não estraguemos as proporções. Então, temos essa imagem aqui. E eu acreditei que minha outra imagem entrava nessa página do histórico de pedidos por alguns motivos. Então, vamos ir em frente e redimensionar esse também. E vamos avançar e movê-lo para nossa página de login também. Opa. Certifique-se de que, quando você estiver arrastando, você não vai em cima desses pequenos botões. Caso contrário, você pode estar editando sua imagem em vez de arrastá-la. Portanto, certifique-se de estar no meio ou em algum lugar onde não haja nó. Então, o que eu quero fazer é ir em frente e realmente cortar essas imagens para que tenhamos as placas em vez do plano de fundo. E a maneira mais fácil de fazer isso, porque essas bolas são meio círculos, use o que é chamado de máscara de imagem. Então, para realmente mascarar ou imagens, podemos ir em frente e criar uma forma oval. Então, vamos seguir em frente e pressionar E e criar um círculo perfeito segurando Shift, arrastando e depois soltando. Vamos ir em frente e escapar de lá e apenas nos certificar de que isso está meio em cima dessa bola. E a qualquer momento eu posso reduzir a aparência para ter certeza de que ela está em cima da bola e parece que está. E agora podemos fazer é ir em frente e clicar no círculo, bem como na imagem. Então segure shift e certifique-se de que ambos selecionaram e em seguida, vá para Objeto, Máscara com forma. E aí você tem isso. Então, a imagem tem sido uma espécie de colheita apenas nessa área. Ainda posso ir em frente e clicar duas vezes nisso e editar a imagem e movê-la. Mas essa é essencialmente a maneira mais fácil de criar máscaras de imagem. Então, parece que eu não tenho máscaras totalmente tão corretamente. Então, se você perceber que ainda tem áreas como essa borda preta aqui, isso na verdade não faz parte da fronteira porque não temos fronteiras agora. Então, se tivermos a fronteira , isso ainda está lá, podemos ir em frente e clicar duas vezes e ler o círculo da Justiça para garantir que seja um pouco menor que a imagem. E assim, assim, quando cortarmos nele, iremos em frente e removeremos o que estiver do lado de fora. Legal. Então, lá temos isso. Vamos ir em frente e selecionar isso e apenas torná-lo um pouco maior e colocá-lo talvez aqui em baixo. E então vamos fazer a mesma coisa aqui. Criando uma elipse. Vá por cima do prato, é escapar de lá. E vamos seguir em frente e selecionar ambos. Vá para Máscara de objeto com forma. Você também pode conseguir isso pressionando o comando shift M. E isso fará a mesma coisa. Legal, e vamos continuar e fazer isso maior também. Então, agora essa camada inteira, como você pode ver, é chamada de grupo de máscaras. Mas, semelhante às nossas formas booleanas, ainda podemos acessar tanto o círculo que temos quanto a imagem abaixo como esperamos. Assim, podemos sempre ir lá e ajustar a imagem e torná-la maior ou menor e depois voltar. E vamos fazer isso um pouco maior e deixá-lo lá. Então, vamos voltar na próxima palestra para concluir nossa página de login. 28. Página de login: Centrismo certo, a página de login, eu quero deixá-la com um fundo branco como está. E depois vamos adicionar nossa senha de e-mail. E depois um logotipo aqui com o botão de login. Então, vamos em frente e adicionar esses elementos agora. Então, precisamos de um retângulo e um texto para nossa caixa de e-mail. Então, vamos em frente e faça isso pressionando R e depois arrastando um pequeno campo para cá. Vou fazer este cerca de 50 pixels em termos de altura. Posso ver isso aqui. E então eu vou sair de lá pressionando Escape duas vezes e depois tocando textos e adicionando alguns textos de e-mail aqui. E acho que isso é um pouco grande. Então, vamos fazer 16 pontos para o centro de e-mail que são um ano e talvez fazer 20 pixels tipo n para a caixa de texto do email do deserto. E vamos colocá-lo aqui. E, em seguida, usando o Comando G, vamos fazer disso um grupo e duplicar o grupo segurando Alt e arrastando uma cópia para longe. Portanto, essa é outra maneira de realmente duplicar objetos. Você pode segurar Alt e enquanto segura Alt, crie outra cópia desse objeto. Só vou excluir esse extra. E vamos seguir em frente e nomear o e-mail aqui para passar palavras. Este será o campo de senha. E então queremos um botão. Então, podemos realmente ir em frente e usar o mesmo retângulo. Vamos apenas trazê-lo aqui. E em vez desse texto ping aqui, vamos avançar e movê-lo para o meio. E vamos chamar isso de log n. E então uma coisa a observar é que, à medida que seu texto cresce ou encolhe, não está exatamente no meio. Então, o que você quer fazer é ajustado depois de inserir seu texto e ter essa opção de texto centralizado aqui para que, se você acabar digitando mais, os textos permanecerão no centro. Então, temos nosso botão lá agora. Então, queremos alterar o preenchimento ou o plano de fundo para essa cor verde, mas certifique-se de que você não faça isso nesse nível porque agora estamos editando o grupo em vez do retângulo em si. Então, se você adicionar um preenchimento nesse nível, você está realmente adicionando um preenchimento ao texto e ao retângulo, o que não é o que queremos. Então, o que queremos é um texto branco e um retângulo verde. Ao fazer isso, mantemos o comando, pressionamos o texto, alteramos este para esperar e seguramos o comando. Pressione o retângulo e altere isso para verde. Talvez eu faça do meu texto um parafuso para que seja mais credível. E também precisaremos disso aqui. Então, vamos em frente e selecione-os em nossa tela inicial. Segure Alt novamente e traga isso para esta página. Então, basta arrastar a cópia segurando Alt à frente e deixamos um pouco menor segurando Shift e trazemos aqui. E vamos seguir em frente e mudar o texto aqui do peso que temos dois pretos. Por fim, queremos ter nossos pequenos Termos de Serviço aqui. Então, vamos em frente e crie um novo texto, certo, termos de serviço e privacidade, política. E fuja de lá. E traga isso um pouco para o lado esquerdo. E como você percebe, estou mantendo minhas coisas alinhadas aqui. Portanto, é muito importante que você tenha certeza tudo é do mesmo tamanho e que tudo esteja alinhado. E isso é visualmente correto. Vamos em frente e altere esse tamanho de fonte 21 para 14. Não precisamos que esse texto seja super grande. E, de fato, podemos reduzir o preenchimento para uma espécie de cor cinza claro. E vamos em frente e derrubar tudo um pouco. Portanto, não está totalmente em cima um do outro. A coisa está se juntando lentamente. Vamos fazer algumas pequenas mudanças para que isso pareça muito melhor. Primeiro de tudo, recomendo fazer cantos arredondados quando se trata de caixas de texto e botões, um, e também remover as bordas duras ao redor dos botões pelo menos. E então, para as caixas de texto, você pode ir em frente e torná-lo um pouco mais sutil. Então, duas coisas aqui. Primeiro, vamos em frente e remova a borda do botão. Então esse botão não tem mais borda, o que é bom. Vamos seguir em frente e selecionar o retângulo aqui e trazer os cantos e ter um raio de canto de, vamos fazer 10 e depois aplicar a mesma coisa aqui. Então vou seguir em frente e selecionar apenas o retângulo aqui. Novamente, no painel Camadas, você pode certificar-se de selecionar apenas o retângulo em oposição ao grupo. E faça a mesma coisa aqui. Só estou segurando Command para selecionar as duas camadas. Então vou seguir em frente e digitar um raio de 10 pixels aqui. E em vez desse tipo de cor cinza dura e mais escura, vamos ir em frente e trazê-la um pouco até talvez ao redor dessa cor, talvez um pouco mais escura do que isso. Acho que isso parece bom. Então, estamos lentamente chegando lá. Obviamente, ainda há muito trabalho a ser feito. Outra coisa que você pode adicionar, por exemplo, aqui é duplicar esse pequeno texto aqui e talvez colocá-lo aqui. Assim, podemos ter uma pequena opção de senha esquecida e apenas ir em frente e alinhar isso à esquerda ou à direita, desculpe, impresso um pouco. Abaixe nosso botão um pouco. Acho que parece bom. Uma outra coisa pequena é que podemos ir em frente e tanto o texto aqui, a política de privacidade nos termos de serviço. Podemos até ir em frente e sublinhá-los pressionando o comando. O que temos essa parte do texto selecionada para que possamos mostrar que esses são links para o usuário. Vamos seguir em frente e apenas mover essa imagem um pouco perto demais deles. E acho que isso parece bom. Então lá você tem isso. Essa é a página de login. E na próxima lição, vamos voltar e trabalhar em nossa página de verificação por telefone. 29. Página de verificação de telefone: Tudo bem, reunimos a página da tela inicial, a página de login. Estamos avançando com nossa página de verificação por telefone. Deixe-me ir em frente e ampliar usando essa tecla e , em seguida, desenhar a visão Nossa é sair desse modo de zoom. Por enquanto, vou voltar rapidamente aos meus wireframes. Tudo bem, então eu tenho meu wireframe aberto aqui. Então, o que queremos aqui é talvez um texto para dizer que esta é a verificação do telefone com uma pequena descrição do que eles têm que fazer. Claro que coloque lá para verificação número 4, bem como um pequeno campo de texto e um próximo botão. Portanto, isso deve ser bem simples e direto. Só precisamos de duas linhas de texto. Uma caixa de texto aqui que podemos usar na página de login e em um próximo botão. Assim, também podemos usar o mesmo botão de login e vamos colocá-lo aqui para o próximo. Vamos seguir em frente e fazer isso em nossa prancheta para verificação estrangeira. Então, para começar, vou seguir em frente e selecionar meu campo de e-mail, bem como meu botão de login. Estou segurando o turno aqui para selecionar os dois. Assim, você pode ver os grupos de campo e os botões agora estão selecionados. Vamos seguir em frente e apertar o Comando C para cópia. Vá para a nossa página de verificação de telefone e pressione Command V. Duas coisas que quero dizer primeiro, quando você copiar algo e selecionar outra prancheta e vá em frente e cole esses itens nessa prancheta . Icsi colocará exatamente onde esses objetos estavam na outra prancheta na nova prancheta em que você está colando. Então é por isso que exatamente P definiu nossos itens exatamente onde eu os tive nesta página. Isso é muito útil se digamos que você esteja colando itens semelhantes que deseja na mesma posição, vez de ter que movê-lo e colocá-lo nessa nova posição. Mas porque, como você pode ver em nossos wireframes e nós os temos, sinta eles, mas no campo meio que na parte superior, o botão na parte inferior. Então vamos seguir em frente e apenas mover isso. Então, vamos trazer isso abastecido até que tenhamos cerca 140 pixels são, na verdade, 170 pixels. Temos algum espaço para nossos textos de verificação por telefone. E vamos seguir em frente e derrubar esse botão até que esteja por aí. Vamos fazer 35 pixels da parte inferior. E novamente, enquanto você estiver arrastando itens, XD mostrará aquela pequena linha rosa e azul com um número que mostra quantos pixels você está na parte inferior ou em relação a outros objetos. E assim como um lembrete, você também pode segurar Alt para verificar novamente todos os lados. Então agora eu o vejo no meio. Tenho 29 pixels à esquerda, 29 e na taxa, e 35 de baixo. Então, meio que no meio aqui. Se você tiver seu botão, vamos ver aqui. E você quer centralizá-lo novamente. Você pode usar esse centro de alinhamento horizontal. E depois de clicar nisso, ele irá em frente e centralizará esse botão em relação à prancheta aqui. A mesma coisa aqui com este campo. Posso ver que estou bem no meio, então é exatamente onde eu quero estar. Mas vamos seguir em frente e alterar esses textos de e-mail para número de telefone. E vamos seguir em frente e criar outro texto pressionando T no teclado. Escrevendo telefone. Verificação. Agora, porque o último texto que diz que foi criado era branco e preenchido, é aí que você não consegue ver que o texto ainda está lá. É só porque é branco e o fundo é branco. É meio que mesclar o fim. Então, vamos em frente e escolha o arquivo externo dois. Vamos fazer como uma cor verde aqui e vá em frente e salve isso em nossas amostras de cores também. Vou integrar isso pressionando o Command B. Então você pode usar um peso de fonte regular e, em seguida, ir frente e aumentar a fonte para 25. Perfeito. Vamos seguir em frente e trazer isso aqui. Então, temos nosso total para lá. E agora queremos uma pequena descrição de explicar por que eles precisam colocar seus números de telefone. Vamos fazer os outros textos desta vez vamos criar uma caixa de texto. Vamos seguir em frente e apresentar aqui no nosso teclado para criar essa descrição. Alimentado. Eu só vou soltar aqui e vamos em frente e gravar. Insira seu número de telefone para verificar sua conta. Então, uma coisa que eu quero dizer é que, já que estou editando o texto agora, se eu for em frente e alterar o texto ou o tamanho da fonte aqui, como você pode ver, nada está acontecendo. Nada está mudando. E isso porque estou atualmente no modo de edição. Então, o que eu tirei daqui em diante será uma fonte de 15 pontos, mas nada mais mudará. Então, o que você quer fazer é garantir que você selecione todos os seus textos em sua caixa de texto, Vá em frente e pressione escapar até que você esteja fora dessa ferramenta de tipo. E, em seguida, vá em frente e selecione toda a caixa de texto e, em seguida, vá em frente e defina um novo tamanho de fonte. Vou fazer 16 aqui. bandeja acha que funciona bem. E eu quero deixar isso aí mesmo. Isso parece bom. Talvez possamos derrubar isso um pouco, bem como a verificação do telefone aqui. E como você pode ver, as coisas estão meio que se encaixando no lugar medida que estão uniformemente espaçadas. Então, eu encorajo que você adicione muitos espaços em branco em seus designs em vez de tentar enfiar o máximo de coisas que puder, é apenas uma boa prática. E a última coisa que vamos fazer é ir em frente e mudar esse login para o próximo. Então, quando eles pressionarem Avançar, ele seguirá em frente e pedirá que eles insiram o código de verificação do número de telefone. Não estaremos projetando essa tela, mas ela está muito próxima desta, exceto que você está apenas pedindo que eles coloquem o código de verificação que eles obtêm no número de telefone. Sinta-se à vontade para fazer isso como um exercício, se você quiser. Mas vou ir em frente e pular isso por enquanto. Então, temos uma pequena página de notificações por telefone agora. Muito simples, muito simples. E na próxima palestra quando voltar e apenas organizar nossas pranchetas um pouco porque agora elas realmente não têm nenhuma ordem. Então, vamos voltar na próxima palestra e trabalhar nisso. 30. Organizando nossas pranchas: Então, quando começamos a criar nossos quadros de arte por toda parte, explicamos que vamos voltar e organizá-lo um pouco porque agora é uma espécie de ordem aleatória ou na ordem das páginas que anotamos em nosso documento de texto. Mas agora eu encorajo você a ir em frente e organizar suas pranchetas de uma forma que faça sentido para você, faça sentido para seus clientes e é apenas legível se alguém de fora abrir este projeto e está tentando entender o que vai para onde. Então, a melhor maneira de fazer isso, da maneira mais fácil, em primeiro lugar, pressione Command 0 para diminuir o zoom e ver todos os seus quadros de arte. O que vou fazer é ir em frente e separar pranchetas de grupo relevantes umas para as outras. Então essa é a melhor maneira de fazer as coisas funcionarem. Então, agora, a tela inicial e a página de login vão bem juntas porque geralmente, a partir da tela inicial, vamos para a página de login ou desta tela cinco, se o usuário estiver logado, geralmente vamos para a página principal e, em seguida, a página de login e a verificação do formulário também estão relacionadas porque, geralmente, após o usuário se inscrever, será solicitado a verificar seu número de telefone. Portanto, a colocação dessas três telas iniciais é boa. Na minha opinião. Acho que a página principal também é boa onde está. Mas o que eu quero fazer é separar o perfil e a página de pagamento, colocá-los em algum lugar juntos e, em seguida, o menu e o pedido de barra de ordem progridem juntos. E então o histórico de pedidos também deve ir com um perfil porque ele estará acessível a partir do perfil à medida que desenhamos nosso wireframe aqui. Então, vamos seguir em frente e fazer isso. Isso é mover o menu de perfil aqui para cima. Um pouco de espaçamento. E, em seguida, o pagamento também deve passar por aqui porque é acessível a partir da página de perfil barra da página do menu. Vamos seguir em frente e trazer histórico de pedidos aqui também. E então vamos seguir em frente e selecionar todos esses três e depois trazê-los aqui. Então, agora há uma relação entre eles onde você vai da página principal para a página de perfil. Você pode abrir a página de perfil. E a partir dessa página de perfil, você pode ir para a página de histórico de pagamentos e pedidos, se desejar. E então, da página principal, você costuma ir ao menu do restaurante. página do menu, você começa a fazer o pedido e, em seguida, na página do pedido você pode ver o progresso do pedido. Então esse tipo de fluxo faz mais sentido. Sinta-se à vontade para adicionar um texto, se quiser. Assim, podemos ir em frente e adicionar uma ferramenta de texto dentro da nossa área de trabalho, que é essencialmente essa área do lado de fora de nossas pranchetas. Podemos fazer opções de menu. Vou seguir em frente e dar um preenchimento preto com um tamanho de fonte de 100. Opções de menu. Arraste uma cópia usando alt aqui, faça login e arraste outra cópia aqui. Pedido de pedidos. Vamos em frente e derrubar isso um pouco. Um truque legal quando você está movendo coisas. Se você pressionar a seta para baixo, você seguirá em frente e moverá as coisas um pixel de cada vez, ou a seta para cima, a mesma coisa com a direita e a esquerda. Mas se você segurar Shift enquanto faz isso, seguirá em frente e, na verdade, fará esse processo em 10 pixels de cada vez. Portanto, é muito mais rápido mover objetos ao redor. Isso se aplica a quadros de arte, objetos, textos, qualquer coisa capturada. Então agora nós organizamos nossas pranchetas em diferentes seções. Temos as opções de menu, as telas de pedidos e as telas de login, muito mais limpas e muito mais organizadas. Então, em seguida, vamos voltar e criar uma pequena estrutura de navegação para nossa ordem de menu principal e páginas de progresso do pedido. 31. Como usar uma barra de navegação: Então, temos nossas páginas ou as pranchetas aqui todas organizadas. Agora, isso é ótimo. Agora acho que é hora de reunirmos a estrutura de navegação. Então, se você der uma olhada neste wireframe que reunimos entre essas páginas da média ou a localização ou o endereço, PJ, menu de pagamentos e pedido. Temos um pequeno tipo de estrutura de navegação aqui no topo. Agora, é claro que podemos ir em frente e colocá-los aqui. Mas, como mencionei para você, Apple tem aquele kit de interface do usuário do iOS que você pode usar para colar barras de navegação do iOS em seu projeto sem precisar redesenhá-lo ou recriado em seus projetos. E isso nos economiza muito tempo quando se trata de projetar e obter esse kit de interface do usuário. Se você seguir a última seção, passamos por ela, mas vamos passar por ela novamente. Simplesmente, você tem que ir para o arquivo, obter kits de interface do usuário. Quando essa página abrir, vá até o design da Apple. Deve ser o primeiro aqui. E se não, role para baixo e encontre-o? Como estamos projetando para um projeto iOS, vamos baixar o kit de design da Apple. Então clique em pegar o kit e , em seguida, vá até o XD. Vamos seguir em frente e fazer duas coisas. Então, clique em Baixar nesta opção X d aqui para o modelo de design do iOS e iPad OS XD. Então, vamos seguir em frente e fazer isso. Se você já o tiver das palestras anteriores, você pode usar a mesma. Caso contrário, vá em frente e dê algum tempo para fazer o download. E, enquanto isso, vá para as fontes. E se você não tiver os fãs da Apple também é um bom momento para ir em frente e baixar o SF Pro, que é uma fonte que a Apple usa por padrão em seus aplicativos. Então, vamos usar esses perfis SF também em nosso aplicativo. Então, vamos em frente e clique em. Ok, existem diferentes variações dessa fonte sf. Há um SF compostos e ácidos, mono e outros também, mas vamos ficar aderindo apenas ao SF Pro. Então, a primeira coisa para o modelo de design do iOS 15, vá em frente e passe pela instalação. partir de agora, você deve ter esses dois abertos. E essas páginas podem parecer diferentes no Windows, mas você ainda deve ser capaz de obter o modelo de design do iOS 15, bem como um pacote de perfis SF que você pode ir em frente e instalar. Então, primeiro vou ir em frente e instalar as fontes clicando duas vezes nesta ou aqui. Vou seguir em frente e levá-lo através de uma pequena instalação, pêssego, que é bem direto. E eu Watson deslumbrante. E vá em frente e feche este. Mova para o lixo. E vamos em frente e agora clique duas vezes em nosso modelo de design do iOS 15. Agora vamos abrir este aqui em cima. É chamado de modelos de design, além de componentes, além de guias Plus iPhone ou iPhone dot TXT. Abra esse. Agora pode levar um segundo para carregar porque é um arquivo grande. Mas uma vez que ele carregar, vamos em frente e encontrar uma barra de navegação para o nosso maquete. E aí você tem isso. Então, queremos pegar uma coisa daqui, que é a barra de navegação. Então, vamos em frente e amplie a área da barra aqui. E nós temos esses aqui, especificamente procurando por este aqui, que é o que estamos procurando. Temos um monte de tipos diferentes também. Então, temos uma pequena pesquisa, uma que podemos usar para nossa página principal. Como você se lembra, temos um pequeno surto aqui, mesmo para a nossa localização e podemos usar essa navegação no estilo de caixa de texto. Então, por que não vamos em frente e voltamos para o garoto da maçã aqui? E vamos em frente e selecione este aqui, assim como este aqui. Então eu quero esses dois, bem como daqui de cima, vamos selecionar este também. Só estou segurando Command and Shift selecione este também. Então, agora temos esses três selecionados. Vamos seguir em frente e copiar. Volte aqui. E só deste lado aqui, vou ir em frente e colar esses n. Vá em frente e arraste estes aqui. Só por enquanto isso. Tudo bem, então provavelmente vamos usar este aqui para nossa página principal. Então, vamos ir em frente e copiar e colar isso lá e arrastá-lo para o topo. E provavelmente queremos realmente o mesmo para nossa página de menu, caso você precise pesquisar classificar, fazer o Comando C, cole isso aqui no caso de você querer procurar determinados itens de comida do menu. No entanto, para nossa página de pedidos, podemos fazer isso aqui. Nós realmente não precisamos de uma barra de pesquisa para lá. E então, para o progresso do pedido, vou copiar este e também colá-lo aqui. Porque então essas páginas, realmente não precisamos pesquisar nada. Não precisamos dessa barra de pesquisa. E, em seguida, sob perfil, queremos uma navegação personalizada lá. Nós realmente não precisamos de uma barra de navegação. E aqui, o que podemos copiar este aqui para essas duas páginas, a página de pagamento e a página do histórico de pedidos. À medida que estamos passando por nossos designs, vamos seguir em frente e mudar esses títulos e tudo por todo o lado Não se preocupe com isso agora, se você está perguntando por que estamos deixando como está por enquanto, queremos apenas juntar toda a estrutura de navegação. Agora temos a estrutura de navegação em todas as páginas que eu quero, com exceção de algumas páginas que acho que não precisávamos, como uma verificação por telefone e a página de perfil, que terá um pequeno expoente aqui para fechar isso. E à medida que passamos pelo nosso design, vamos substituir cada botão acordo com o que deveria ser. Então, vamos em frente e volte na próxima palestra para continuar trabalhando em nossa página principal. 32. Como criar visualizações de cartões: Projetando visualizações de cartões. Esta é uma das minhas partes favoritas do design da interface do usuário. Então, o que é uma visualização de cartão? O que essencialmente visualização de cartão como qualquer um de vocês que geralmente tem uma imagem com um monte de textos, ícones e botões, como um conteúdo organizado que inclui um monte de informações que é útil ou relevante para essa página. Então, por exemplo, se aumentarmos isso, então volto ao design móvel. E se eu rolar para baixo até, uh, vamos ver esta página de pedido aqui. Você pode ver isso aqui é um cartão. Essencialmente. Pode não ter muito divisor entre os diferentes, mas você pode criar cartas totalmente onde ele tem um divisor completo e uma sombra e tudo com uma borda ou apenas algo assim onde você tem uma imagem, monte de informações aqui, bem como pode até ter um botão lá. Portanto, isso é essencialmente chamado de visualização de cartão. Então, nesta palestra, vamos projetar um para nossos restaurantes. Então, é aqui que poderemos navegar restaurantes que são exibidos nesse carrinho. Voltando ao meu wireframe, temos esse pH aqui em nossa página principal. Então, como você pode ver aqui, eu meio que tentei esboçar este cartão de amostra aqui. E lá, queremos um título ou cortar o nome do restaurante. Queremos uma pequena classificação para mostrar aos clientes qual é a leitura do restaurante. E então queremos um pouco de preço e o tipo de alimento que eles servem. Então, nesta palestra, vamos juntar isso em uma boa interface do usuário do cartão. Então, vamos em frente e volte para o XD e amplie nossa página principal aqui. E usando R, vou seguir em frente e criar um retângulo. Bem aqui. Vou fazer um que talvez tenha cerca de 200 pixels de altura. E vamos ir em frente e escapar de lá e apenas medir a distância e isso não está bem no meio. Então, vou usar a tecla de seta para centralizar isso e isso está bem centrado agora. Então esse é meu pequeno cartão. Vou seguir em frente e colocar um monte de textos aqui que queremos. Então, vou tomar algumas anotações do lado aqui. Queremos o tipo. Vamos em frente e alterá-lo para 14 tamanhos de fonte. Então, queríamos o tipo de comida. Queremos o nome. Vou apenas ir em frente e deixei alinhar isso aqui. Opa. Quero colocar isso em meus esportes, posso apenas escrever o que quero ler, bem como a faixa de preço. Então, essas são as quatro coisas que eu quero. Então, vou seguir em frente e criar uma caixa de texto para cada um deles. Então as primeiras coisas primeiro vamos fazer o nome do restaurante. Então, usando o t aqui, criei uma caixa de texto aqui. Eu vou ir em frente e sair de lá e colocar isso em algum lugar aqui, eu acho. E uma linha abaixo dela. E vamos fazer sinais de US $2 apenas para mostrar que tipo de faixa de preço o cliente pode esperar. Então essa é a nossa faixa de preço. Queremos algo para nossa leitura. Então, por que não vamos em frente e duplicamos este e fazemos exatamente como uma amostra, você pode fazer 4.5. E então, entre parênteses, podemos colocar o número de pessoas que deram a isso um restaurante, quantas leituras? Você pode trazer isso para o lado? E acho que podemos colocar um pequeno ícone de estrela aqui também. Então, quando estivermos analisando os ícones, voltaremos e adicionaremos isso também. Só vou em frente e espaçá-lo um pouco. E então esses textos, eu realmente queria ter 12 pixels. E o nome do restaurante, quero que tenha 16 pixels para o tamanho da fonte. Por fim, só precisamos do tipo de alimento. Então, por que não vamos em frente e colocamos isso à direita aqui. Então, podemos fazer apenas como exemplo, italiano pelo tipo de comida. E vou seguir em frente e apenas alinhar isso para que fiquem 14 pixels da direita. E estou pensando em segundo plano aqui podemos ter uma pequena imagem do restaurante. E então vamos seguir em frente e, na verdade, inserir alguns dados nesta página. Portanto, não é apenas um portador de lugar como este aqui. Então, vamos em frente e nos livrar disso agora. Então esse é o nosso pequeno cartão. Vamos voltar para a próxima palestra. Insira alguns dados reais e aperfeiçoe isso. 33. Como fazer o polimento nossa vista de cartão: Tudo bem, então estamos prontos para polir nossa visualização de cartões aqui. Então, vamos fazer algumas coisas. Vou passar por eles. Então sinta-se à vontade para passar pelos mesmos passos comigo aqui. E então vou explicar exatamente o que estamos fazendo. Então, a primeira coisa que vou criar um retângulo, e aqui vou usar isso para mostrar a imagem do nosso restaurante. Então eu vou em frente e apenas derrubar esses textos um pouco para que eles fiquem meio centrados ao longo daquela outra barra. E então vamos seguir em frente e apenas alinhar este com esses textos aqui. Perfeito. Eu quero pegar meu alinhamento, certifique-se de que estamos em torno do mesmo número de pixels de cada lado. E novamente, estou usando alt aqui. Então, vou arredondar nossa visualização de cartas aqui. Então, vamos seguir em frente e clicar neste pequeno retângulo que está segurando tudo aqui. E então vamos seguir em frente e arredondar as bordas para, vamos fazer 12 pixels. E então vamos fazer a mesma coisa mas com esse retângulo para as imagens. Mas, exceto que vamos fazer isso apenas para esses dois cantos superiores. Então, vamos em frente e segure alt. O que também ajustamos esses dois. Vamos fazer 12 e 12 aqui. Eu posso ver esses conjuntos aqui também, e posso ajustá-los daqui. Acho que parece bom. Então, agora o que queremos fazer é, em primeiro lugar, vou seguir em frente e garantir que minha fronteira seja muito leve, trazendo a opacidade para talvez algum lugar por aqui. E vamos continuar e salvar isso nossa amostra de cores também no caso de você querer usá-la mais tarde para esses textos. Vamos em frente e, antes de tudo, aperte-os pressionando Comando B. E só vamos negrito o texto menor aqui para que haja um pouco mais facilmente legível. E a partir dos recursos que você baixou, você deve conseguir encontrar uma pequena pasta de ícones. E dentro dessa pasta Icons deve haver uma pasta principal que você possa abrir. E então, a partir daí, este pequeno ícone aqui, estrela ponto PNG. Então, vamos ir em frente e importar o PNG de inicialização. E aqui está isso vá em frente e apenas arraste-o para dentro. Agora o tamanho é muito grande, então vamos em frente e, antes de tudo, vamos em frente e altere isso para 20 pixels. Na verdade, acho que podemos fazer 16 por 16. E vamos seguir em frente e trazer isso aqui e apenas reajustá-los. Então, tudo está alinhado aqui. Vou seguir em frente e agrupar esses dois juntos pressionando o Comando G enquanto os selecionarei. Vamos em frente e, na verdade, criar um grupo fora da coisa toda também. Ao pressionar Command G em tudo, certifique-se de ter tudo selecionado. Agora este aqui é apenas minha barra de navegação, então você não precisa selecionar essa. Lá vamos nós. E agora temos uma visualização de cartão polida pronta para ser usada e estamos prontos para adicionar alguns dados de amostra a ela. Mas antes disso, vamos seguir em frente e usar uma grade de repetição e arrastar esta grade de repetição vertical 3 vezes. Então, temos três cópias desse grupo. E agora podemos realmente ir em frente e inserir três restaurantes diferentes aqui. Então, vamos voltar na próxima palestra para inserir alguns dados de amostra aqui. 34. Introdução de amostras: Se você estiver pronto, vamos seguir em frente e inserir alguns dados de amostra para nosso restaurante Peach aqui ou a página principal. Então, antes disso, vou seguir em frente e mover esse grupo inteiro um pouco ou repetir a grade para cima. Acho que parece melhor. Então agora tenho 25 pixels da barra de navegação, que parece muito melhor. Então aqui está a coisa muito legal sobre Repeat Grid. Quando você o usa para repetir objetos e você pode ver o poder dele. Você pode realmente ir em frente e inserir dados com muita facilidade. Se você tiver um arquivo de texto os dados de amostra com os quais você está trabalhando. Portanto, se você abrir seus recursos para este projeto e descer para os dados de amostra da pasta. Nos dados de amostra da pasta, você poderá encontrar a pasta do restaurante. Vá em frente e abra isso. E em cada arquivo de texto, há um conjunto diferente de dados. Então, há um para os nomes dos restaurantes, há um para os preços, um para as leituras e outro para a fita do restaurante. E tudo isso está em ordem. E então o que vamos fazer é realmente usar facilmente esse arquivo de texto para gerar esses dados de amostra. Então, em vez de ter que abri-lo e copiar e colar cada texto, o que podemos fazer totalmente. Insira, vá e repita esse processo. Existe uma maneira muito mais rápida de fazer isso usando a grade de repetição. E isso é indo em frente e arrastando o arquivo de texto aqui. E vou te mostrar como fazer isso em apenas um segundo. Vamos em frente e primeiro, desfazer isso. Como teríamos apenas o nome do restaurante com um monte de nome de restaurante aqui. Então, o que você quer fazer é que esses arquivos de texto sejam abertos. Vou apenas ir em frente e colocá-lo deste lado aqui. E vou reafirmar meu XD aqui. E agora o que você pode fazer é simplesmente ir em frente e arrastar este restaurante nomes tracejados pontilham TXT para o seu primeiro nome de restaurante. E quando você quiser, vá, XD irá em frente e, na verdade, colará esses dados em cada restaurante. Então, se você olhar para esse arquivo de texto, ele é exatamente colado esses nomes. E isso porque nós os separamos usando a tecla Return ou Enter e colocamos o nome de cada restaurante em uma nova linha. Então, xc já descobriu como ir em frente e colá-los no lugar certo. E agora podemos repetir esse processo para o preço passando o mouse sobre o texto do cifrão. Lá vamos nós. A leitura. Lá vamos nós. E finalmente, por último, mas não menos importante, o tipo de restaurante. Então, agora tudo está colado conforme o esperado e temos um conjunto de dados de amostra indo em frente e redimensionará meu exterior. Só há uma coisa que notei é que nosso arquivo de texto aqui ou nossa caixa de texto para a fita não está alinhada à direita. Então, vamos seguir em frente e escrever uma linha que fique alinhada ao lado direito. Note no centro, é muito importante manter as coisas alinhadas para que você pareça visualmente correto. E, por fim, vou seguir em frente e inserir as imagens certas para cada restaurante. Sob as imagens, você poderá encontrar esta pasta de página principal. E agora podemos fazer a mesma coisa, mas agora com nossas imagens. Então, temos três imagens aqui, cada uma para os diferentes restaurantes. E eles também são uma ordem, 123. Então, vamos em frente e arrastá-los para este pequeno retângulo em nosso arquivo XD e não para todo o retângulo porque, caso contrário, ele o colará no lugar errado, mas apenas como parte superior. E agora, se eu voltar, isso parece muito melhor. Agora acho que estamos lentamente juntando nossa página principal. Então, vamos voltar e completar esta página principal e seguir em frente a partir daí. 35. Completando nossa página principal: Já estamos quase acabando com nossa página principal aqui. Acho que até agora fizemos um ótimo trabalho. Aprendemos a criar uma visualização de cartão e, em seguida, usar Repetir Grade para realmente fazer várias versões desse cartão ou várias repetições. E depois seguimos em frente e inserimos dados com muita facilidade usando o recurso de colar de grade repetida em nosso projeto. E espero que você tenha gostado desse recurso porque ele economiza muito tempo. Agora, é claro que aqui só temos três restaurantes. Mas se mantivéssemos essa página em andamento e continuarmos, e nós a esticarmos e usarmos, repito a grade, digamos dez ou mais vezes. Você pode ver quanto tempo isso economizaria em vez de ter que inserir cada dado manualmente. Então, espero que agora você veja o valor da grade de repetição. Então, vamos voltar a esta página e terminar algumas coisas e apenas adicionar algumas coisas e devemos ser bons para ir. Então, eu só quero verificar meu wireframe para ter certeza de que não estou perdendo nada. A única coisa é que vamos seguir em frente e mudar são as cartas ficarem boas? Então, só temos que fazer algumas edições nossa barra de menus para ter um pequeno ícone aqui para o menu, ou acessar um perfil e, em seguida, uma pequena barra de pesquisa que já temos. Então, vamos em frente e volte ao nosso projeto. E, na verdade, pensando nisso, acho que essa barra de navegação realmente a aplicaria melhor. Assim, podemos ter um título pequeno e, portanto, o pequeno. Então, vamos em frente e copiar esse. Em vez disso. Exclua este daqui e copie essa barra de navegação de título grande. E então podemos ir em frente e excluir essa ação. Deixará essa ação porque é aí que vamos colocar nosso ícone de menu. E vamos seguir em frente e apenas redimensionar. Vou apenas ir em frente e movê-los para cima. Na verdade, vamos deixar esse. Basta mover isso um pouco para cima e ir em frente e redimensionar isso. E, em vez disso, há um grande título desta tarifa restaurantes. E vamos mudar isso para baixo, apertando Shift e a seta para baixo. Então, temos um espaçamento de 25 pixels. Acho que isso parece bom. E em vez dessa ação, vá em frente e crie um ícone para o menu de hambúrguer. Então, para isso, só precisamos de três linhas para que possamos usar L para criar linha. E vamos seguir em frente e criar três linhas 30 pixels de largura. Vai sair de lá e, em seguida, usar o Comando D para duplicar essa linha. E então eu vou apertar Shift seta para baixo para espaçá-la em dez pixels. E então eu fiz isso mais uma vez. Então, temos três linhas. Vamos editar essas três linhas definindo uma borda de dois pixels. E vamos seguir em frente e clicar nesta pequena tampa redonda. E agora vamos seguir em frente e trazer isso aqui. E em vez da ação, ou ela pode ir em frente e simplesmente remover a ação. E só tenho essas linhas e estou apenas selecionando-as todas juntas e depois pressionando o comando G. E vou renomear esse ícone do menu berbere do grupo. E vamos mudar a cor da borda para a cor verde que temos para o tema do nosso aplicativo. E parece bom. Coisa se você for um pouco menos largo, vamos bater, vamos selecionar esse grupo de caras aqui. Na verdade, vamos usar o comando e as teclas de seta para diminuir a largura. Portanto, este é um pequeno atalho onde você pode realmente editar a largura. E segurando Comando e pressionando para a direita e para a esquerda. Então eu só estou pressionando menos para a esquerda para fazer 25 pixels. E então vamos em frente e altere esse tamanho, dois ou três pixels em vez disso. Esse é o tamanho da borda. E vou apenas ir em frente e escrever uma linha que garanta que esteja no local correto. Uma coisa que eu quero observar é que esse ícone aqui na verdade não está dentro da nossa barra de navegação aqui. Então nossa barra de navegação aqui é, na verdade uma instância de um componente sobre o qual falaremos em apenas um segundo. Mas como essa é uma instância de um componente, não podemos colocar diretamente um ícone aqui e ele não será incluído em parte dessa instância. Por isso, é separado. Então, se você mover isso, este, mova-se com ele. Então, poderíamos fazer algo como agrupá-los como uma correção temporária. E agora está relacionado um ao outro, mas de outras maneiras, é por isso que você não pode inserir novos itens dentro de uma instância. Você só pode inserir novos itens dentro de um componente mestre, o qual, novamente, falaremos sobre o qual, novamente, falaremos nas palestras que estão por vir. Como um RV, diminua o zoom. Eu tenho uma boa página de restaurante e agora estamos prontos para trabalhar em nossa página de menu para que, quando um usuário clica em um restaurante, ele vá em frente e abra o menu desse restaurante. Então, vamos voltar na próxima seção e fazer isso juntos. 36. Componentes: Então, o que são componentes? Então, temos falado sobre eles um pouco aqui e ali. Mas nunca exploramos o que eles fazem e como eles são úteis. Então, nesta palestra, vamos analisar como você pode realmente usar componentes para acelerar seu trabalho de design quando se trata reutilizar objetos ou grupos dentro de seus projetos. Assim, em um nível alto, os componentes são essencialmente objetos que você reutiliza em todo o design, onde eles têm algum tipo de elemento compartilhado entre eles. que, quando você precisa usar um objeto em várias pranchetas, há vários lugares. Em vez de ter que redesenhá-los em cada página. Digamos que, se você precisar fazer uma alteração, você pode realmente alterá-las em um só lugar, que geralmente é chamado de componente principal. E, em seguida, faça com que eles mudem em todas as suas instâncias, que são o filho desse componente mestre, que é chamado de instâncias em componentes. Portanto, se olharmos em todo o nosso design, coisas como campos de entrada, botões, barras de navegação como essas, normalmente são transformadas em componentes. E a razão é que nós o usamos em vários, nós os usamos em vários locais. Então, digamos que eu decida fazer uma alteração, uma pequena alteração no meu botão aqui e alterar a cor de fundo, a cor de fundo ou o tamanho da fonte ou o posicionamento dos textos. Claro, agora, vamos fingir que preciso mudar o plano de fundo desse botão. Eu teria que ir em dois lugares, definir uma nova cor e, em seguida, copiar esse código de cor, ir para o outro botão, e depois ir em frente e repetir esse processo para cada um dele que eu tenho no meu design. Vou apenas desfazer isso. Eu estava apenas dirigindo demonstrando como seria a vida sem componentes. Então, iremos em frente e transformaremos esses botões em componentes em apenas um segundo. Mas antes de fazermos isso, vamos em frente e ver quais componentes já temos em nossas pranchetas. E essas são, na verdade, as barras de navegação aqui. E, portanto, a razão pela qual você vê essa borda verde ao redor dessa barra de navegação é porque é um componente ou instância desse componente, podemos realmente ir em frente e navegar por componentes sob nossa biblioteca. Então, se você for para a biblioteca, o atalho pressionou Shift Command Y. Podemos ver todos os nossos componentes aqui. Agora, é claro que não criamos esses componentes, mas o que aconteceu é que, quando arrastamos essa barra de navegação para o nosso projeto, fomos em frente e realmente os copiamos como componentes disso Projeto de design iOS. Portanto, todos esses são componentes e, na verdade, estão contidos nesta área em que colocamos ou barras de navegação, não essas barras de navegação que colamos ou todas as instâncias. Agora, quando se trata de componentes, como você pode saber se um componente é o componente principal ou se é uma instância em que uma instância com substituição essencialmente, você pode olhar para o canto diamante na forma ao redor da borda verde. No canto superior esquerdo, você verá um pequeno gatilho de diamante como este. O que se sente assim é o principal componente. Portanto, todas as alterações feitas nesse componente continuarão em frente e se aplicarão às instâncias. E, por falar em casos, suas instâncias terão uma forma de diamante vazia ou não preenchida. E então, se você for em frente e fazer alterações em uma instância específica, substitua essas alterações e adicionar essas propriedades, como o texto dentro ou os objetos, então você verá essa pequena forma com um círculo no meio. Isso significa que você escreveu as propriedades dessa instância. Então, se voltarmos, podemos ver que temos este aqui que será sobrescrito porque houve algumas alterações feitas nele. Vemos este em que é apenas uma instância. E, portanto, na verdade, não temos o componente principal. E assim, a maneira de realmente acessar o componente principal para esses é seguir em frente e clicar com o botão direito do mouse e clicar em Editar componente médio. E agora esses são os principais componentes da minha barra de navegação. Portanto, todas as alterações que eu fizer nesse componente principal serão aplicadas a outras instâncias. Então, como exemplo, se eu pegar o título grande aqui e vamos ver, eu faço 25 pixels. Ele seguirá em frente e se aplicará a ambos. Cresça aqui. Se eu mover a barra de pesquisa, seguirei em frente e aplicarei a ambos. Para você, remova o título. Vamos em frente e aplicaremos a ambos. Agora, é claro, se eu entrar aqui porque esta é uma instância, se eu for em aqui porque esta é uma instância, frente e realmente excluir algo de uma instância, agora, ela não será excluída daqui porque esta é a nossa principal componente como você pode ver. Mas como agora substituímos essa instância, obtemos essa pequena forma e o canto, que significa que agora nós substituímos ou a instância. Então, se ele começar a editar coisas aqui, nada será efetuado aqui porque novamente, este é o nosso MainComponent e as mudanças só funcionam de uma maneira. Mas o que acontecerá é que a instância ainda compartilhará determinadas propriedades. Portanto, se ainda houver certas coisas presentes dentro desta instância, ela continuará em frente e fará esses ajustes, como o posicionamento desses itens. Mas é claro, se eu for em frente e mudar esse título grande, nada mudará aqui porque já substituímos o texto dentro desse campo de texto, mas não realmente sua posição. Agora, se editarmos a posição dele também, veremos que se movermos isso, nada acontecerá com a posição disso e texto aqui porque substituímos ambos os textos dentro e a posição agora. Mas ainda podemos mudar coisas como preenchimento, que ainda se aplicará a menos que novamente, vamos em nossa instância e mudamos essa cor também e a substituímos. Portanto, qualquer tipo de substituição em termos de posição Phil, efeitos, assim por diante e assim por diante que fizermos, iremos em frente e aplicaremos à nossa instância, a menos que vamos substituir essas propriedades. Mas se eu quiser ir em frente e realmente remover essas substituições, posso realmente ir em frente e clicar nesta instância e depois redefinir para o estado principal. E então o que isso fará é que ele irá em frente e mudará essas propriedades de volta para o que tínhamos aqui. E agora essas substituições desapareceram. Podemos ver na instância que a forma agora está de volta a apenas uma instância sem qualquer substituição, isso fará mais sentido à medida que começamos a transformar ou botões em componentes. E se você tiver alguma dúvida, por favor, pergunte ao longo do caminho. Então, espero que isso faça sentido. Vou desfazer isso várias vezes para voltar à nossa barra de navegação. Como tínhamos antes. Lá vamos nós. Esses são componentes e, ei, na verdade, podem criar instâncias deles e substituí-las. Vamos voltar na próxima palestra e transformar esses botões em componentes. 37. Convertendo nossos botões em componentes: Ok, então agora que sabemos quais componentes são e como eles são tão úteis, vamos prosseguir e converter nossos botões em componente para que possamos reutilizá-los em seu projeto. que mais tarde, se você decidir fazer alterações neles ou fazer uma variedade diferente de botões, podemos usá-los mais facilmente sem ter que alterá-los em vários lugares. Então, vou seguir em frente e apenas ampliar minha página de login aqui. Vá em frente e escape da minha ferramenta de zoom lá. E o que eu quero fazer é ir em frente e converter esse botão, que já está em grupo. Então, se você se lembra, quando estávamos projetando nossa página de login, convertemos ou retângulo aqui, que é o plano de fundo do botão e o texto em um grupo. Se você ainda não o fez, não precisa se preocupar com isso. Apenas certifique-se de ter o plano de fundo e o texto aqui para o login selecionados porque é isso que parte do componente do próprio botão. E para converter isso em um componente, basta seguir em frente e clicar com o botão direito sobre ele e pressionar Make Component. Como alternativa, basta pressionar Command K no teclado ou na tecla Control no Windows. Há várias maneiras de dizer que esse é um componente agora. Então, primeiro você pode ver que aqui temos um pequeno diamante preenchido, o que significa que este é o componente principal. E aqui, no painel Propriedades, também há o componente dito e na média de colchetes. E podemos ir em frente e criar, e esse é o estado padrão do botão. Podemos ir em frente e criar vários estados, que iremos nas futuras palestras e também em nosso painel de camadas você pode ver essa pequena forma de diamante. Então, esses são indicadores de que isso agora é um componente. E como é um diamante cheio novamente, podemos ver que esse é o componente principal. Então, o que queremos fazer é colocar nossos principais componentes em algum lugar separado dos nossos projetos. E a razão para isso é que, dessa forma, podemos saber exatamente quais são os principais componentes e quais são apenas instâncias desse componente. Então, mais tarde, se você quiser fazer alterações neste botão em vez de chegar à página de login e fazer alterações aqui, podemos fazer nossas alterações fora de onde temos nossos componentes e, em seguida, seguir em frente e simplesmente veja as mudanças acontecem em todo o seu design. Então, vamos em frente e agora arraste esse componente principal para fora da nossa página de login. E vou seguir em frente e colocar meus componentes no canto da minha placa de arte aqui. Então, em algum lugar aqui. E podemos ir em frente e até arrastar uma cópia usando todo esse texto aqui e título de nossos componentes. Opa, lá vamos nós. Só vou seguir em frente e alinhar isso aqui. Como manter as coisas em linha para que ela pareça visualmente melhor. Então, enquanto estivermos aqui, vou seguir em frente e fazer duas coisas. Uma é que vou seguir em frente e mudar esse texto de login para apenas botão. E a razão é que agora que fizemos isso um tipo genérico de botão, o texto aqui não deve ser nada específico. Portanto, pode ser algo tão geral quanto um botão para que, em cada instância, possamos ir em frente e editar esse texto. E então essa é a primeira coisa. E a segunda coisa que quero fazer é seguir em frente e clicar em nossas bibliotecas aqui. E agora você vê esse pequeno botão. Agora vejo que esse botão é chamado de componente 14 aqui. Você pode ver uma pequena miniatura dele. Então, sabemos que este é um botão e arraste esse componente 14 para nossa Prancheta. Veremos que criamos uma instância dela agora, mas não precisamos dessa renúncia. Vamos prosseguir e renomear isso clicando duas vezes neste título do componente 14 aqui e alterá-lo para apenas salvar o botão. Perfeito. E agora, se eu voltar para minha página de login, posso simplesmente ir em frente e arrastar instância desse botão para minha página de login. Vá em frente e alinhe-o aqui. Certifique-se de que está bom e alinhado. E então vamos em frente e agora mudar nossos textos clicando duas vezes nele e escrevendo login como tínhamos antes. Onde fazer a mesma coisa. Vou pressionar o comando C na minha instância aqui e vá em frente e vá para a verificação do telefone, clique em Command V. Vamos prosseguir e alterar o texto disso para, você adivinhou em seguida. Vamos seguir em frente e nos livrar desse grupo que temos para o botão, porque isso não é mais uma instância. Isso é apenas um grupo de retângulo e uma camada que temos. Vamos seguir em frente e arrastar isso para fora. Deixe-me apenas verificar o espaçamento para que pareça que estamos a 35 pixels da parte inferior. Agora vamos seguir em frente e excluir isso e mover isso sobre dois são a mesma posição para esse botão. Então, agora estamos usando instâncias desse componente. E como você pode ver, há um pequeno ponto dentro dessa forma de diamante, o que significa que este é um exemplo com algumas substituições. E essa substituição é que os textos que acabamos de mudar. Então, como exemplo, se eu voltar ao meu botão e, de repente, decidir que quero que meu botão tenha, digamos um fundo azul. Eu posso simplesmente ir em frente e mudar a cor de fundo aqui para, digamos que você explodiu meu botão. E se eu clicar fora e voltar aos meus designs, posso ver que essas instâncias também assumiram a propriedade dessa cor de fundo. E, portanto, é realmente por isso que é útil usar componentes para coisas que você faz. Repita seus designs, como esses botões, como os campos de texto aqui. E agora, com isso dito, quero fazer um exercício para transformar esses campos de texto em componentes e ir em frente e criar instâncias e arrastá-los para as mesmas posições aqui. E faremos isso juntos na próxima palestra também. 38. Solução de exercícios de componentes: Tudo bem, a primeira coisa que eu quero fazer é realmente ir em frente e refazer essa mudança de cor para nossos botões antes de saltarmos para nossa solução de exercícios. Então, vamos para o nosso componente. Clique duas vezes para selecionar o retângulo e alterar o preenchimento de volta para essa cor verde. Se você não fizer isso, se você não criou uma amostra para essa cor, vá em frente e insira esse ponto hexadecimal em seu seletor de cores e clique neste ícone de adição para adicionar essa cor à nossa amostra de cores. E assim, dessa forma, podemos acessá-lo facilmente. Perfeito. Então, o exercício era transformar esses campos de texto em componentes em vez de apenas grupos aqui. Então, vamos fazer isso muito rapidamente simplesmente duplicando esse campo de texto fora usando ALT. Só estou levando isso de volta para minha seção de componentes aqui. E vou seguir em frente e apertar Comando K para transformar isso em um componente. Vamos seguir em frente e garantir que suas bibliotecas sejam abertas aqui e renomeie isso para campo de texto para que saibamos sobre o que esse componente se refere. E enquanto estamos aqui, vamos seguir em frente e clicar neste campo de e-mail e vamos prosseguir e digitar, Por favor. Por favor, titular, lá vamos nós. Apenas uma única linha. Vamos prosseguir e criar instâncias na página de login e verificação do telefone e substituí-las por esses grupos que temos. E fazemos isso simplesmente indo para a página da biblioteca e arrastando um campo de texto para minha página de login. E há outra maneira de criar instâncias sem usar o painel da biblioteca. E isso é realmente ir para o componente, para seus componentes principais. Vá em frente e clique em Copy. Ao pressionar o Comando C ou Controle C no Windows. Vá para sua página de login e, em seguida, pressione Command V. E então o que isso foi feito é criar uma instância desse campo de texto em nossa página de login. Vou seguir em frente e mudar o texto aqui para e-mail. E vou seguir em frente e arrastar isso aqui e, em seguida, criar outra cópia dessa instância aqui e alterá-la para senha. Mas é claro que temos esse grupo, esses grupos dos campos de texto de e-mail e senha sob essas camadas. Então, vamos em frente e nos livrarmos deles também indo para nossas camadas. E acredito que deve ser esse grupo 2 e o grupo 1, que podemos ver porque cria esse destaque azul. Então, vamos seguir em frente e clicar em ambos pressionando Shift e pressionando Delete. Lá vamos nós. Então, agora temos exemplos desses combustíveis de textos. Poderíamos fazer a mesma coisa copiando uma instância em nossa educação anterior e mudando isso para quatro números. E fazendo a mesma coisa e excluindo esse grupo um. Perfeito. Então, agora temos instâncias desses campos de texto. E vamos ver a qualquer momento com o site para, por exemplo, tornar a cor desse texto de espaço reservado um pouco mais tarde. Assim como essa cor aqui, ela seguirá em frente e se aplicará a todos os meus campos de texto. Perfeito. Faremos uma pausa rápida aqui e depois voltaremos na próxima palestra para trabalhar em nossa página de menu. 39. Cartões de item no menu: Estamos prontos para trabalhar em nossa página de menu. Portanto, esta página de menu, não deve ser confundida com a página do menu de barra da página de perfil lá. Esta é a nossa página do menu do restaurante. Então, o que queremos aqui, se eu voltar rapidamente para meus wireframes, aqui está simplesmente menu que separa as categorias de itens, como os drenos e a média, cursos, sobremesa e tudo que em diferentes seções com cartões que exibem esses alimentos para o cliente para que eles possam ir em frente e navegar pelo que o restaurante tem. E assim eles sabem que podem escolher o que pedir a partir daí. À medida que estamos apresentando nossa página de menu, usaremos duas ferramentas importantes no XD. Um deles, que é o que já aprendemos, quais são os componentes. Vamos usar componentes para esses cartões aqui para os alimentos. Então, se você quiser reutilizá-los, vamos ver em nossa página de pedidos ou página Progresso ou em qualquer outro lugar, podemos simplesmente ir em frente e arrastar instâncias em vez de ter que refazer isso. Assim, também podemos criar estados diferentes para eles à medida que projetamos os componentes. A segunda coisa que vamos aprender é como usar pilhas no xy, o que é super útil. Então, em uma exibição de tabela como esta, onde temos itens após itens, também de forma semelhante à página do restaurante aqui, que é uma mesaVista de itens ou restaurantes. Nesse caso, as pilhas são uma ferramenta útil, semelhante à grade de repetição, mas diferente em alguns aspectos. E mostrarei como isso funciona para que você aprenda como usar ferramentas diferentes para criar esse tipo de uso. Então, sem mais delongas, vamos entrar e trabalhar em nossos cartões de comida do menu aqui. Uma vez que esta página é composta principalmente disso, bem como pelas diferentes categorias que também criarão essas seções. Então, primeiro, vamos trabalhar em nossos cartões de comida, e depois vamos em frente e projetaremos as diferentes seções. E então iremos em frente e encerraremos a página inteira, bem como usaremos pilhas para organizar nossos itens. Então, vamos voltar para o XD. A primeira coisa que quero fazer é ir em frente e criar um componente para esses alimentos com base no que precisamos. Antes de fazer isso, vamos em frente e anotar tudo o que precisamos na visualização do carrinho para que possamos ir em frente e criar facilmente esses campos de texto e imagens. Então, é claro que aqui, precisaremos de uma imagem da comida. Então, isso é uma coisa que está faltando nesta lista, mas é meio que implícito que haverá uma imagem da comida aqui, bem como a descrição do nome, preço, calorias e um plus a menos bi. Então, vamos seguir em frente e anotar isso simplesmente indo para nossa seção de componentes em nossos projetos. E vou pressionar T para criar um campo de texto. Arraste aqui, faça algumas anotações classificando a imagem. Um pouco escuro para meus textos aqui. Então, vou seguir em frente e torná-lo preto. Vamos prosseguir e escrever imagem. Comida, item de barra, nome, descrição, calorias, botões para adicionar barra, Remover item. É que eu acredito que isso é tudo e o preço, claro, sim. Vamos em frente e adicionar preço. Portanto, esses são os cinco dados ou conteúdos que eu preciso na visualização do meu carrinho. Então, primeiro vamos em frente e crie um retângulo para o plano de fundo da visualização do meu cartão. E vou fazer esse retângulo com cerca de 100 pixels de altura, em 325 pixels de largura. E você pode ver que do lado direito aqui, você pode ir em frente e ajustá-los também. Vou seguir em frente e ampliar aqui e apenas trazer esse texto aqui. Vamos ampliar e decidir o que colocar onde. Então, a primeira coisa que eu quero fazer é realmente dar a esse retângulo um estilo semelhante ao meu campo de texto aqui em termos de arredondamento ou bordas, bem como a cor da borda. Agora, se você se lembra de como fazemos isso, simplesmente seguimos em frente e clicamos em nosso retângulo aqui, certifique-se de ter o retângulo selecionado e não todo o componente alimentado por texto. Pressione Command C. E eu, vá em frente e clique em seu retângulo aqui e pressione Opção Command V. E, como você pode ver agora, temos o mesmo estilo. Perfeito. Então, o que estou pensando aqui em termos da imagem é seguir em frente e criar uma espécie de imagem aqui para o nosso item alimentar do lado esquerdo. E então, no lado direito, iremos em frente e listaremos esses textos. Então, vamos em frente e duplicar esse retângulo pressionando o Comando D. Então agora temos dois deles. E vou ir em frente e encolher este arrastando deste lado. Isso é tudo que eu tenho uma largura de cerca de um 35. Uma coisa que eu quero notar é que a maioria das imagens tem uma proporção de quatro para três. Então, normalmente, quando estamos criando imagens ou adicionando imagens ao nosso design, queríamos realmente ter essa proporção de quatro a três. Então, se você quiser ser preciso, você pode simplesmente procurar uma calculadora de proporção no Google. E então vou seguir em frente e clicar no primeiro link. Então, se você quiser uma proporção de 43, sabemos que nossa altura aqui é fixa, o que é de 100 pixels. Então, voltar aqui, ou a altura representa os três aqui. Então, queremos calcular para ver o que C deve ser. E, como podemos ver, deve ser 133 pixels. Então isso nos dará uma proporção de 4 a 3. E então, se voltarmos, tenho 135 aqui. Posso usar o comando e a tecla de seta para a esquerda duas vezes para encolher isso para 133. Então, agora temos praticamente uma proporção perfeita de quatro por três. E a razão pela qual isso é importante é que, à medida que arrastamos imagens para o nosso cartão aqui, quase como elas parecem descidas sem que elas sejam esticadas ou parecendo que é o tamanho impróprio. Uma das coisas que eu quero fazer aqui é ir frente e clicar no meu retângulo. Vá até esses dois cantos que eu tenho e use Alt para defini-los como 0. Portanto, certifique-se de estar velho para arrastar esses cantos de volta para 0 redondeza. Então, temos nossa imagem e depois vamos seguir em frente e escrever nosso outro texto. E aqui, por isso, vamos criar rapidamente um monte de campo de texto. Portanto, o primeiro será o nome do item. Eu quero que isso seja 10 pixels do topo. Agora, para a descrição, quero fazer uma caixa de texto pressionando T, arrastando para cá. Então, se você olhar aqui ficaria bem. Eu vou em frente e escrevo uma descrição. E vou mudar essa cor de preenchimento para uma cor cinza mais clara, algo assim. E vamos mudar o nome do nosso item para essa cor que temos aqui, que é uma espécie de cinza escuro. Se você não tiver essa cor, insira esse código hexadecimal e você obterá a mesma cor. Vamos trazer uma descrição um pouco para cima e garantir que ela tenha uma altura fixa até aqui. Então, se as descrições forem mais longas do que essa caixa de texto, iremos em frente e meio que seremos cortadas. Então, quem quer que eu esteja colocando os dados deve se certificar de que a descrição está muito longa. Vou ir em frente e copiar este outro campo de texto aqui. E vamos colocar as calorias. Vamos apenas fazer 0 calorias aqui. E vamos seguir em frente e fazer um tamanho de 10 pixels para isso também. E coloque-o aqui com o mesmo pixel da parte inferior, dez pixels. Então, obtivemos a imagem, nome do item, a descrição, as calorias e os dois últimos itens que precisamos são os botões para adicionar e remover este item ao nosso pedido, bem como pouco preço aqui para o item. Acho que podemos colocar o preço à direita das calorias aqui. Assim, podemos ir até aqui e colocar apenas como exemplo, dólar 000, já que este é apenas um campo de texto, que parece bom. E, por fim, só precisamos nossos botões para adicionar e remover este item. Então, faremos uma pausa rápida aqui, voltemos na próxima palestra para trabalhar nesses botões e transformar isso em um componente e concluir nossa página de menu. 40. Como criar um contraem de botões: Então, como este botão aqui para adicionar e remover itens como um pouco mais complicado do que um botão normal, queremos mostrar ao cliente quem está usando este aplicativo a capacidade de não apenas adicionar e remover itens, mas também ver quantas quantidades de itens eles adicionaram ao pedido. Então, queremos criar um design exclusivo que funcione bem e também seja funcional. Então estou abrindo meu bloco de notas aqui para fazer um pequeno esboço no meu telefone. Você pode acompanhar se quiser, ou você pode apenas ver o que estou fazendo aqui. Então eu vou seguir em frente e apenas pegar minha ferramenta de caneta aqui neste aplicativo de notas que eu não abri. Então, o que eu quero fazer é claro temos o lado direito do nosso cartão, que é meio que eu vou visualizar assim. Então, o que eu quero fazer é ir em frente e mostrar a eles o número de itens que eles têm aqui. Então, digamos que eles tenham dois desses itens com um pequeno ícone de mais e menos aqui, ou botões para liderá-los, remover ou adicionar itens ao pedido. Talvez você faça um pouco de forma arredondada aqui para permitir que eles adicionem e removam esses itens. Então, vamos prosseguir e trabalhar para projetar este conjunto de botões aqui nesta palestra. Então, vamos seguir em frente e criar esse design semelhante em nosso XD agora. Então eu tenho meu XD aberto. E o que eu quero fazer é criar um componente separado para que possamos ir frente e reutilizar esse tipo de botão de contador. Gosto de chamá-lo em outros lugares, caso precisemos. Então, vamos em frente e desça aqui em um separado, apenas na parte inferior desta visualização de cartão aqui, eu quero criar três retângulos batendo R. E eu quero criar três quadrados. E eu estou segurando o turno aqui para bloquear as proporções. E eu queria que isso fosse 28 pixels por 20 pixels. Perfeito. Então, agora vamos sair da ferramenta Retângulo e pressionar Duplicar ou Comando D duas vezes para criar duas cópias. E vou apenas ir em frente e usar Shift e a tecla de seta para baixo para derrubar essa cópia e a outra cópia também. E eu vou seguir em frente e apenas trazer esse retângulo para que eles fiquem meio em cima um do outro assim. A mesma coisa com a aqui. E estou usando as teclas de seta para movê-las. Primeiro, quero ir em frente e selecionar todos eles e mudar essa cor da borda para uma cor de borda mais clara que temos aqui. A segunda coisa para este retângulo aqui, vou seguir em frente e clicar neste botão para separar os raios da borda. Agora, para a taxa superior esquerda e superior, vamos fazer um raio de canto de seis pixels. Para este retângulo aqui, vamos fazer o contrário. Portanto, os seis pixels para a parte inferior esquerda e a parte inferior direita. E agora eu quero ir em frente e criar um pequeno ícone de menos e mais. E podemos fazer isso usando a ferramenta de linha. Então, vamos seguir em frente e clicar em L e desenhar um tipo de ícone menos aqui. Pressione Escape para sair na ferramenta de linha. E vou seguir em frente e dar um tamanho 2. Em termos de borda com tampa arredondada, certifique-se de que esteja alinhada no centro e não crie um ícone de mais. Vou seguir em frente e criar uma cópia desta linha segurando Alt e arrastando uma cópia para este lado aqui. Em seguida, pressione o Comando D para duplicá-lo e girado em 90 graus. Então agora temos duas linhas. Um girou 90 graus para criar esse ícone de mais. Vamos seguir em frente e dar a este retângulo um preenchimento de verde, o mesmo verde que temos. E este aqui, vou concordar com cores como cinza aqui. Você pode copiar esse código hexadecimal para recriar a mesma cor. E então, para meus ícones de mais e menos, quando eu segurar o shift, clique em todas essas linhas, certifique-se de ter toda a linha selecionada e, em seguida, altere-as para esperar. E, por fim, vamos adicionar um pequeno contador aqui pressionando T, entrando no centro dele aqui e escrevendo 0. E certifique-se de ter 16 pixels para o tamanho da fonte, linha ou para o centro. Para que, se você mudar esse número, digamos para dez, ele irá em frente e será centralizado. Mas é claro que não está centrado, então vou escapar. Vou clicar em Escape para deixar a ferramenta de texto e desligar isso até que ela esteja centralizada. partir de agora, temos um pequeno botão de contador que eu gosto de chamar esse R que podemos usar para nossos itens para que possamos adicionar ou remover itens ao nosso pedido. O que vamos em frente e clicamos em tudo aqui e apertamos a tecla de comando para transformar isso em componente principal. E agora vou arrastar uma instância desse componente principal segurando Alt e traga sua cópia aqui com nove pixels de cada lado. Vamos seguir em frente e arrastar tudo e garantir que selecionemos tudo e nosso painel de camadas. E, em seguida, pressione Command K para criar esse componente também. Vá até as bibliotecas e renomeie esse componente aqui mesmo para a visualização do cartão de itens. E então esse componente aqui também, vamos fazer. Mas no balcão. Perfeito. Uma coisa que eu quero fazer é voltar aqui, selecionar este texto e dar um preenchimento daquela cor cinza que temos em vez do preto. luz pode ser um pouco difícil às vezes para textos. Então, fazemos uma cor um pouco mais escura, um pouco mais fácil para os olhos. Perfeito. E isso também se aplicará automaticamente aqui, já que essa é uma instância desse componente. E aí você tem isso. Temos nossa visualização de carrinho. E agora vamos voltar na próxima palestra para usar pilhas para trabalhar em nossa página de menu. 41. Como usar pilhas: Então, o que são veados? Como o usamos para tornar nosso processo de design muito mais rápido e eficiente? Bem, vou mostrar como as pilhas funcionam enquanto criamos nossa página de menu. Então, vou diminuir o zoom aqui, livrar-me desse texto aqui e ir para a minha página de menu. E primeiro, primeiro, vou seguir em frente e escolher um título aqui para Menu. E, em seguida, altere esse botão de ação aqui para o carrinho, que também fará um pequeno ícone mais tarde, se você quiser. E então mude isso para restaurantes. E então isso agora é meio relevante. E então aqui embaixo, o que queremos fazer é separar nossos cartões por categoria. Então, queremos categorias de bebidas de locatários, bem como aperitivos, entradas e assim por diante. Vou seguir em frente e selecionar esta página de menu e arrastá-la para que seja mais longa do que a minha visualização aqui, podemos encaixar mais itens aqui, 1500 pixels de altura. Então, o que esse pequeno divisor aqui mostra, essa é a nossa visão principal aqui. Então, quando abrimos essa visualização da área de trabalho ou a pré-visualização e nosso dispositivo, é isso que o usuário verá. Qualquer coisa além disso será cortada, a menos que tornemos esse conteúdo rolável para que o usuário possa rolar para ver o restante do conteúdo aqui. E você verá isso à medida que começamos a prototipagem. Mas primeiro, vamos em frente e criar seções diferentes pressionando tecla T no nosso teclado e escrevendo aperitivos. E vou colocar isso aqui no topo, 30 pixels do topo aqui. Não o moveu até que esteja 25 pixels do topo. Agora, porque eu estava trabalhando nas fontes aqui ou nos textos aqui. Xy foi em frente e dado meu texto como estilo semelhante, que é o texto pro SF de 17 pixels aqui. Portanto, sinta-se à vontade para seguir em frente e aplicar essas alterações. Mas em palestras futuras também analisaremos textos. Mas por favor, certifique-se que é um tipo semelhante de tamanho de fonte. A fonte não importa muito neste momento. Vamos seguir em frente e mudá-los nas seções futuras. Agora, o que vamos fazer é seguir em frente e arrastar uma cópia da visualização do cartão de item aqui. E vá em frente e alinhe-o à esquerda também. E dê um espaçamento de 23 pixels da esquerda. Semelhante a este aperitivo aqui. Basta ir em frente e à esquerda alinhar este texto do aperitivo. E agora uma coisa que você percebe é que o cartão aqui não preenche totalmente a largura da vista que temos aqui. Então, vamos voltar e consertar isso em uma palestra futura. Mas, por enquanto, vamos continuar e saber como podemos usar tags para adicionar mais itens. Então, o que vou fazer para usar impostos, vá em frente e, na verdade, agrupe textos de aperitivos , bem como essa instância. Vá para o nosso painel de camadas ouve, podemos ver isso. E vamos ir em frente e agrupá-los pressionando o comando G. Para usar pilhas, precisamos agrupar itens para que o XD nos dê essa opção de usar esse recurso de pilha. Então, vamos seguir em frente e clicar em Ativar pilha. E agora o que acontece é que esse grupo se transformou em uma pilha. Podemos ver como isso funciona quando começamos a adicionar itens. Então, neste momento, nossos itens aqui, que são apenas textos ou aperitivos, bem como esta instância do cartão de item Vue que temos. O espaçamento é de 20 pixels. Então agora você verá se seguimos em frente e clicamos nesta instância e pressionamos Command D. Vamos fazer isso mais uma vez. Xd seguirá em frente e, na verdade, colocará essas instâncias 20 pixels de distância umas das outras com base nesse número que temos aqui. Então, se você clicar em todo o grupo com base nesse número, que é de 20 pixels, isso é o que todo o espaçamento será. Se editarmos isso e fizermos isso, vamos ver, 30 pixels. Agora as coisas terão um espaçamento maior ou podemos ir mais baixo e fazer 15. E acho que para o nosso propósito, 15 realmente parece bom. Então agora temos uma pequena seção de aperitivos. E mostrarei qual é essa opção de preenchimento aqui e por que ela é útil. Então, em nossas pilhas, se você for em frente e realmente clicar neste pequeno ícone, ele irá em frente e mudará nossas pilhas em uma opção horizontal. Então, como você pode ver, ele continuará e horizontalmente em vez de verticalmente, o que é legal. Se você tem algo que queremos um pergaminho horizontal para Brenna, queremos o vertical. Então, vamos seguir em frente e mudar isso para vertical. E porque fizemos isso, mudamos nossos textos de aperitivos para cá. Então, vamos seguir em frente e mover isso para o lado esquerdo do nosso grupo aqui. E agora se eu apertar o Comando D em todo este grupo para que possamos trabalhar estão em árvores. Posso arrastar isso aqui e posso configurá-lo exatamente na parte inferior desse outro grupo. Então, o problema de fazer isso, porém, é que agora, se formos em frente e criamos mais itens, minha pilha para os aperitivos, esta outra seção ou essa outra pilha não diminuiria. Então, o que eu posso fazer é realmente criar pilhas aninhadas, o que significa que posso ir em frente e segurar Shift para selecionar ambos os grupos e, em seguida, ir em frente e clicar Comando G e também transformar isso em uma pilha. E agora o que acontece é que temos um grupo que tem duas pilhas dentro dele. Um para aperitivos e este vamos mudar o texto para entradas. Lá vamos nós. E agora o que você pode fazer é ir em frente e adicionar um preenchimento a isso na pilha aqui. Então, se eu adicionar um preenchimento de 20, ele seguirá em frente e dará 20 pixels de espaçamento de todos os lados. Se eu quiser apenas o preenchimento superior, que é o caso principal aqui, podemos ir em frente e usar este pequeno botão para criar apenas o preenchimento superior de 20. Então, desta forma, só temos espaçamento de 20 pixels. E a direita, a parte inferior e a esquerda não são realmente afetadas. E agora temos um espaçamento. E neste caso, agora, se eu for em frente e adicionar mais aperitivos, as entradas serão empurradas para baixo. Porque esta é uma pilha aninhada. Agora você pode ver o valor das pilhas, especialmente se você tiver várias categorias de itens. Ao contrário da nossa página principal do restaurante aqui, onde costumávamos usar a grade de repetição. Isso é super legal. Você pode usar isso em seus projetos e em várias seções. E eu encorajo você a brincar com ele e ver o que a pilha tem a oferecer. Então, agora que temos a configuração, vamos seguir em frente e selecionar o grupo para as entradas e duplicá-lo pressionando Command D. E isso automaticamente criou outra pilha aqui para mim. E vou ir em frente e mudar isso para desertos. Lá vamos nós. Agora temos um monte de itens. Podemos ir em frente e excluir este terceiro aqui e apenas ter dois aperitivos. E podemos ir em frente e duplicar este duas vezes para ter mais duas entradas e fazer mais um deserto. Ou vá em frente e pressione Command Z para desfazer esse. E assim por diante e assim por diante. Tudo será redimensionado corretamente. Vou seguir em frente e apenas trazer esse grupo inteiro para os centros. Então, também parece visualmente meio centrado, o que eu acho que parece bom. E na próxima palestra, vamos voltar e preencher ou menu com alguns dados de amostra. 42. Completando nossa página de menu: Tudo bem, agora que temos nossas pilhas implementadas para os itens que são menu, agora estamos prontos para finalmente preencher nossa mini página com alguns dados de amostra. Portanto, não parece tão sem graça aqui e prepare-se para avançar para nossas outras páginas. Então, nas pastas dos recursos deste projeto, você encontrará duas pastas. Um para os dados de amostra, que é onde também acessamos nossos dados de amostra de restaurantes, bem como um para nossa página de menu imagens para que possamos acessar algumas imagens para nossos itens aqui. Mas irei em frente e vou ficar um pouco menor para que possamos ver ou pastas aqui. E o que vou fazer é primeiro ir em frente e preencher nosso menu aqui com as imagens e depois seguido pelo texto. Então eu vou fazer isso pelos anunciantes e, em seguida, pelas entradas e desertos, vou deixar com você. Então, para aperitivo, vamos até as imagens sob aperitivos e arraste esta bruschetta, que é a primeira aqui. Então o que você notará é que o corte para a imagem não é o melhor. Então, o que você pode fazer é clicar duas vezes na imagem aqui e realmente movê-la. Então, a parte principal da comida, que é o que queremos exibir, está centrada. Perfeito. Use a tecla Escape para sair desse item. Vamos seguir em frente e fazer o mesmo pela nossa imagem de pão recheesy aqui. E então, para o texto aqui, vou abrir nosso arquivo de texto chamado food dash aperitivos ou TXT. Há também os desertos e as entradas para você usar. E assim daqui vou em frente e copiarei o nome deste prato até o nome do item e depois a descrição aqui. E assim como, como mencionamos, se houver uma descrição muito longa, XD irá em frente e a cortará caixa de texto que temos. Mas uma coisa com a qual não estou super feliz aqui é o espaçamento entre a descrição e este botão de contador. Então, vou rapidamente ir em frente e ir para nossos componentes e garantir que o tamanho do texto da descrição, um pouco espaçado do botão Counter. Então, agora, se voltarmos, eu deveria parecer um pouco melhor. Para as calorias. Temos isso aqui também. É 540 para este. Então, vamos em frente e colocar aqui. E então o preço também é 999. E novamente, à medida que estamos colocando os dados de amostra, estamos vendo alguns dos problemas com o espaçamento. Então isso definitivamente poderia ser espaçado um pouco mais. Então, vou voltar ao nosso componente e fazer esses pequenos ajustes movendo um pouco o ícone do dólar. Talvez 25 pixels. Muito melhor. Vou fazer a mesma coisa para a amostra de pão recheesy. Insira os dados em. E, novamente, você ainda pode ver o mesmo tipo de problema com o texto aqui. Então, aqui, para o nome do item, vou alterá-lo para um tamanho fixo e, em seguida, arrastá-lo para aqui também. E à medida que mudamos isso para tamanho fixo, vou seguir em frente e também alterar o tamanho da fonte para 14. Acho que isso é melhor. Se eu voltar. Agora podemos ver que é um tamanho melhor. Vamos seguir em frente e alterar a descrição aqui. Perfeito no preço também. Para este, o que posso ver aqui é um 99. As calorias são três, 95. Perfeito. Então agora temos nossos aperitivos. Vou avançar rapidamente, rapidamente pelo resto desses. Mas à medida que você tiver a ideia agora e eu te vejo em apenas um segundo. Agora, apenas um aviso, você pode ficar com fome enquanto está trabalhando nesta parte do aplicativo. Não vou mentir. Aconteceu comigo algumas vezes também. Portanto, sinta-se à vontade para fazer algumas pausas aqui para a comida por gravidade, se você quiser. E aí você tem isso. Fui em frente, copiei e colou tudo aqui. Então eu sei que é um trabalho um pouco tedioso, mas nossa página definitivamente fica melhor com dados de amostra reais aqui. Perfeito. Então, agora concluímos nossa página de login ou página de verificação de telefone ou tela inicial e página de menu. E pronto para finalmente passar para nossas páginas de pedidos também. E o pagamento do perfil e o histórico de pedidos como o exercício para você. Então, vamos fazer uma pequena pausa aqui e voltar na próxima seção para continuar o design do nosso aplicativo móvel. 43. Recursos de UX: Então, quando se trata de design UX e UI, quais são as diferenças? Esta é uma das primeiras perguntas que muitos novos designers fizeram. Então eu acho que é um momento apropriado para fazer uma pausa para passar por algumas das dicas de experiência do usuário que tenho para você antes passar a concluir nosso design móvel. Quando se trata de design de interface do usuário, potencialmente UI significa interface do usuário. Portanto, este é o aplicativo ou site real ou qualquer interface que você esteja projetando para o usuário usar. Isso geralmente consiste no design visual, nas cores. Sou designer gráfico geralmente trabalha nessa interface. E consiste nos layouts dos objetos em toda a página, a tipografia, realmente qualquer coisa que você possa ver e interagir como usuário. Agora, a experiência do usuário é um pouco mais complicada, essencialmente significa experiência do usuário. É assim que o usuário realmente interage com o design. Portanto, não apenas o aspecto visual dele e o que parece, mas sim como eles interagem com ele. Por exemplo, wireframing e prototipagem têm que fazer mais com o design UX, pois você está reunindo a experiência para o usuário e o posicionamento de objetos causa diretamente um impacto sobre como o usuário usa o aplicativo e assim por diante e assim por diante. Portanto, essencialmente, a interface do usuário é a parte do design que você pode ver e UX é uma parte do design que o usuário pode sentir. Acho que um dos ótimos recursos disponíveis on-line que você pode ver para melhorar suas habilidades de design de UX, o que pode levar algum tempo. Normalmente, o design UX leva um pouco mais de tempo para aperfeiçoar e diminuir. Agora, se você for para essas leis de link do UX.com, você poderá acessar um conjunto de dicas e truques como um novo designer de UX que você pode usar. Vou deixar isso com você para passar em detalhes. Mas neste site você encontrará um conjunto de dicas e truques todos juntos e formas de leis do que você deve fazer em seu design. Então, vou te dar um exemplo. Essa lei de proximidade significa que os objetos próximos ou aproximados uns dos outros tendem a ser agrupados. Posso clicar para ler mais sobre isso. Mas, essencialmente, passa por que a proximidade é importante no design e que tipo de relacionamento ela estabelece com o objeto próximo e assim por diante. Depois de terminar, você pode seguir em frente e conferir ainda mais leis. Há muitas leis excelentes aqui para o design de UX. Claro, você pode ir mais detalhadamente e conferir todas essas leis aqui. Não vou passar por eles um por um. Nesta palestra. Eu encorajo você a fazer uma pausa, passar por isso e lembrar que isso não é exatamente algo que você quer memorizar, mas sim algo que você quer ter acesso como um recurso enquanto você está fazendo seu trabalho de design. Portanto, sinta-se à vontade para dar uma olhada neste site. E novamente, o link para ele como leis do Ux.com, muito útil. 44. Como criar um logotipo: Se você tem acompanhado até agora, reunimos nossas páginas iniciais. Reunimos as páginas de login, a verificação do telefone, a página principal mostrando todos os restaurantes disponíveis, bem como uma pequena página de menu ou para permitir que você solicite ou adicione itens ao seu pedido. Estamos prontos para passar para nossas páginas de pedidos, bem como nosso perfil de pagamento e histórico de pedidos. E uma coisa que eu quero observar é que acredito que perdi a página de localização também enquanto estávamos montando as placas de arte. Então eu vou seguir em frente e apenas mover isso um pouco. Vá em frente e duplique esta página. Então vou seguir em frente e classificar o local. Então, essencialmente, esta é a página onde você pode definir seu endereço. Se você se lembrar, se eu abrir nossos wireframes. Aqui vamos nós, são nossos wireframes abriram esta página de localização onde você pode definir seu endereço para onde a entrega deve ir. E então vamos projetar isso nesta página, página de localização aqui. Mais uma coisa enquanto estou aqui, só quero ter certeza de que tudo aqui com minhas placas de arte ou como espaçado corretamente. Acho que parece bom. Lá vamos nós. Perfeito. Então, sim, estamos prontos para avançar para projetar essas páginas. Antes de fazer isso, deveríamos projetar um logotipo para mordidas saudáveis. E agora, se você se lembrar ao passar pelo resumo, um dos principais resultados é o logotipo da empresa também. Então, vamos fazer isso juntos nesta palestra. Agora, para o logotipo, quero mantê-lo simples. Quero manter algo relevante para o nome, que geralmente é o que você quer fazer em um logotipo. Então, vou vir aqui, do lado de fora do meu quadro de arte e ampliar apenas para fazer um logotipo aqui antes de levá-lo para o meu, Ao longo do meu design. Então, o que eu quero fazer para mordidas saudáveis é essencialmente ter um pouco, talvez cada letra e talvez algum tipo de marcas de mordida retiradas dessa letra de idade para representar o nome. Acho que isso pode parecer bom. E então eu quero fazer isso com a ajuda de nossa ferramenta de linha e um monte de elipses. Portanto, sinta-se à vontade para acompanhar se você quiser também criar uma versão do logotipo você mesmo. Mas a versão final deste logotipo Walzer será incluída nos recursos deste projeto. Então você pode simplesmente usar isso se quiser. Perfeito. Então, para o nosso logotipo, vamos seguir em frente e criar uma idade usando a ferramenta de linha. Então, queremos uma linha aqui, e estou usando o Shift para mantê-la reta. Agora, para o tamanho da borda, vamos com 20. Vamos ir em frente e arredondar as tampas aqui também. E então vou usar tudo para duplicar esse lado dos dois anos de idade. Por aqui. Vou usar o Comando D para duplicar isso mais uma vez. E então vá em frente e gire-o. Usando esse pequeno nó. É reto. Desta forma. Vamos colocar isso em algum lugar no meio deste perfeito selecionado por completo. Vamos dar a ele um tamanho de borda de na verdade 25. E vamos mudar a cor da borda para nossa cor verde. Vou seguir em frente e, na verdade, agrupar essas linhas usando o Comando G ou o Controle G no Windows. E então vou seguir em frente e apenas ampliar esse lado da era. E vou criar algumas elipses usando E, vou representar esse tipo de marca de mordida como esta. Agora vou seguir em frente e agrupar essas elipses juntas, movê-las um pouco para baixo. Portanto, certifique-se de estar em um grupo. Sua forma H está em um grupo. E, na verdade, vou fazer isso um pouco maior também. Então, ocupa mais espaço aqui. Faça isso um pouco maior. Acho que parece bom. Lá vamos nós. Porque este é esse Hs criado dessas três linhas. Precisamos realmente usar o traçado do contorno para que transformemos isso em uma forma mais. Podemos fazer isso indo para o caminho do objeto. E se você se lembra do Outline Stroke, agora, os traços aqui meio que se transformaram em formas. Então, podemos realmente ir em frente e usar nossas ferramentas booleanas para criar essa marca de mordida fora dessa idade. Podemos fazer isso primeiro certificando-se de que todos eles estão agrupados como eu tenho aqui. E selecione-os juntos. E subtraia o Caminho do objeto. Parece bom. Novamente, se você quiser fazer alterações em sua forma, você sempre pode ir em frente, entrar aqui e reorganizar círculos para que pareça mais Smith Cole. Realmente faça o que quiser. Acho que parece bom. Vou seguir em frente e na verdade, ir em frente e duplicar este grupo e trazer esse grupo também aqui. Neste outro lado da idade também. Acho que parece bom. Mais uma vez, sinta-se à vontade para ajustar seus círculos se você não estiver totalmente satisfeito com o local onde você tem. Perfeito. Então, lá temos isso, Esse é o nosso pequeno logotipo para este projeto. Vou continuar e salvá-lo como uma função de recursos que você pode usar. A próxima palestra. Vamos voltar e colocar esse logotipo em todo o nosso design. 45. Colocando nosso logotipo: Ok, então agora que temos nosso logotipo pronto para ir, vamos em frente e colocá-lo em nossa tela inicial. E a página de login, acho que são praticamente todos os principais lugares que precisamos para colocá-la. Se você não tiver o logotipo ou não o projetou conosco na palestra anterior. Você pode acessá-lo acessando os recursos deste projeto. E sob a pasta do logotipo, você verá que há um logotipo verde ponto SVG e um logotipo branco que SVG. Outra razão pela qual os exportou como SVGs e não PNGs ou JPEGs, que geralmente é o que você usa para imagens, é que o SVG oferece essa capacidade de editar o logotipo e redimensioná-lo sem perder qualidade. Essa é uma das razões pelas quais usamos o SVG para alguns ícones, logotipos e coisas assim. Enquanto para imagens em que você tem uma foto, digamos que normalmente use o JPEG e o PNG. Vamos analisar isso com mais detalhes mais tarde também quando estamos exportando nossos arquivos. Por enquanto, você pode ir em frente e importar ambos para o seu projeto simplesmente arrastando-os para o seu projeto XD. Agora, vemos que temos dois aqui. Acho que o outro importou aqui. Então este branco que vamos usar em nossa tela inicial. Então, vamos colocá-lo bem no meio da tela assim, ou onde temos nosso espaço reservado. Para o espaço reservado, vamos em frente e agora excluí-lo. Basta mover esse texto um pouco para cima também para que fique perto do logotipo. Pelo tamanho que eu gosto, como está aqui, que é 91 por 126. Então, para este verde, vamos seguir em frente e arrastar isso. Você adivinhou. Uma página de login centrada em nosso espaço reservado aqui. Exclua este. Acho que podemos subir um pouco mais também, então temos algum espaçamento do nome da nossa empresa aqui. Falando no nome da empresa, parece que é um preenchimento preto, então vou mudar isso para esse cinza que temos. Você pode ir em frente e inserir este código hexadecimal e salvá-lo também, assim como eu para nossa amostra de cores, mas não é um problema se você não tiver feito isso porque nas palestras a seguir, estamos voltando e falamos sobre cores e como podemos acessar facilmente as cores em todos os nossos designs. Lá temos isso, Esse é o nosso logotipo, e estamos prontos para seguir em frente. 46. Como criar um esquema de cores: Ou esquemas de cores. Há muita diversão porque conseguimos brincar com um monte de cores e ver o que parece bom e o que se encaixa na nossa marca. Quando se trata de nosso design de aplicativo. Eu pessoalmente adoro a seção de seleção do esquema de cores do curso porque é onde podemos realmente ser criativos e configurar algum tipo de marca para a empresa que estava trabalhando. Nesse caso, porque eles só deram esses tipos de cor verde como parte de suas cuecas de design. Em termos do esquema de cores. Claro, ele acabou de mencionar, usar um esquema de cores verde para mostrar a saúde do produto, etc. Então é por isso que vamos usar essa pequena ferramenta on-line para criar um esquema de cores para com base na cor verde que temos. Se você ir para coolers.co, há três O's lá, então apenas certifique-se de digitá-lo corretamente. Coolers.com. Este é um ótimo recurso que você pode usar para gerar rapidamente esquemas de cores para seus projetos. Depois de ir para lá, ele é simplesmente atingido neste Gerador de Iniciação e, em seguida, ele irá em frente e o colocará neste pequeno gerador de esquema de cores. E a partir daqui você pode simplesmente clicar na barra de espaço do teclado para ir em frente e gerar novas paletas de cores que ficam bem juntas. Você também pode usar isso em todo o projeto. Ele fornece o código hexadecimal para cada cor nessa paleta. Como já temos uma das cores do nosso aplicativo, sabão vá para o XD. Gostei muito dessa cor verde que você está usando aqui. Então, se eu apenas clicar em cima para, uh, um dos, digamos que a tela inicial aqui, clique no preenchimento. Eu posso ir em frente e realmente copiar esse código hexadecimal daqui que volta para refrigeradores para uma das cores aqui. Vamos ver o primeiro aqui. Podemos ir em frente e apenas clicar duas vezes para editar essa cor também, colando nesse código. Pressionando Enter. Então o que eu quero fazer é ir em frente e clicar neste pequeno botão de bloqueio aqui é isso significa que essa cor permanecerá a mesma. Isso não vai mudar, pois apenas pressionamos a barra de espaço. E então o que o site que faremos é tentar usar essa cor para criar cores ou cores semelhantes que ficam bem em combinação com essa cor. Agora, se você for em frente e clicar em Espaço Depois de ter certeza de bloquear essa cor no mundo do site, gerar esquema para você. Então você pode ir em frente e escolher o que você gosta. Não quero nada que seja muito diferente. A qualquer momento, se você quiser uma determinada cor, você pode ir em frente e bloqueá-la. E então, com base nessa cor, você pode criar mais cores para sua paleta de cores. Mas vamos seguir em frente e continuar pressionando Space para ver o que recebemos. Eu meio que gosto desse esquema de cores aqui. Acho que parece muito bom. É monocromático, que é o que eu gostei desse tipo de paleta aqui. Então, por que não seguimos em frente e realmente usamos esse esquema de cores aqui. Podemos até mesmo ir em frente e salvar essa paleta fazendo login e clicando em Salvar. Ou podemos ir em frente e exportá-lo copiando o URL. E agora temos o URL dessa paleta. Então, se você quiser enviá-lo para qualquer outra pessoa, ou se você pesquisá-lo em nosso navegador, ele seguirá em frente e trará este site. Então, vou seguir em frente e dar-lhe um minuto aqui para escrever esses códigos hexadecimais se você quiser, se você quiser usar exatamente esse esquema de cores, sinta-se à vontade para usar o seu próprio, se quiser. Mas se você quiser acompanhar esse esquema de cores, você pode ir em frente e usar essa paleta de cores aqui. Vamos fazer uma pausa rápida e voltar na próxima palestra para aplicar nossa paleta de cores ao nosso projeto. 47. Aplicando nosso estilo de cores: Dói, agora que temos uma paleta de cores que geramos usando Coors ou Ko, eu fui em frente e, na verdade, coloquei um pequeno PDF desse esquema de cores nos ativos saudáveis do aplicativo móvel bites também. Você pode acessar como PDF e seguir em frente e usar esses códigos hexadecimais para gerar o mesmo esquema de cores para seu projeto. Mas, novamente, como mencionei, você pode se sentir livre para usar seu próprio esquema de cores também. Então, o que vamos fazer agora é ir em frente e voltar para o nosso XD. Só do lado aqui, aqui em cima. Vou seguir em frente e criar outra seção na minha área de trabalho aqui e chamar essa de meu esquema de cores. Assim. Vá em frente e alinhe a esquerda, alinhe isso com os componentes. Nós descemos um pouco e então o que eu quero fazer é ir em frente e criar, vamos ver, 12345. E vamos criar cinco elipses aqui para gerar esse esquema de cores para o nosso projeto. Vou apenas ir em frente e colocar isso aqui, a elipse. Vou remover a borda de lá. Vá em frente e crie apenas cinco desses. Perfeito. Um por um. Vou seguir em frente e apenas inserir esses códigos hexadecimais nas minhas reticências. Então, o primeiro é esse código hexadecimal para a cor um. Meio que vá em frente e altere o preenchimento para esse código. Nós conseguimos essa cor. A mesma coisa aqui. Obtenha essa cor. Continue lendo esse processo para todas as cores. Lá vamos nós. Lá vamos nós. Temos nosso esquema de cores em nosso projeto. Agora, é claro, podemos ir em frente e adicionar essas cores às nossas amostras aqui e usá-las em todo o nosso projeto. Mas uma coisa que o XD nos dá é a capacidade de usar estilos de cores em nossa biblioteca. Se você seguir para nossas bibliotecas, vemos daqui de cima que temos algumas cores em nosso painel de ativos. Dessa forma, se você adicionar nosso esquema de cores a esta seção de cores do XD em nossas bibliotecas. Podemos usá-los facilmente em todo o nosso projeto. E se precisarmos fazer uma alteração em nosso esquema de cores, simplesmente precisamos mudar nosso esquema de cores aqui e ele será aplicado em todo o nosso projeto. E você verá como isso é útil em apenas um segundo. Para aplicar esse esquema de cores, você pode simplesmente ir em frente e selecionar cada objeto onde você tem essa cor e, em seguida, vá em frente e adicioná-lo à nossa cor assim. Ou você pode ir em frente e selecionar todos eles assim. E clique em Mais. Ambos funcionam. E assim o XD iria em frente e geraria essas cores como uma paleta de cores aqui para nós, com um título sendo o código hexadecimal. Agora, se você quiser, podemos ir em frente e renomear essas cores. Vou fazer o primário para este aqui. Para o segundo aqui, que é essa cor, vamos fazer secundário. E este será o seu sotaque um. E este será seu acidente. Para fazer X e três para este. Agora nossas cores também têm um nome. Então agora que temos nosso esquema de cores configurado aqui com a beleza disso é que o XD irá frente e verá onde você usa essas cores. E eles já foram vinculados ao nosso esquema de cores ou aos nossos estilos de cores aqui no XD. Apenas para dar um exemplo, se você agora for em frente e editar essa cor primária clicando com o botão direito do mouse e clicando em Editar. Se decidirmos seguir em frente e digamos que mude essa cor primária para algum tipo de olhar, digamos, digamos roxo. Em seguida, ele seguirá em frente e se aplicará em todos os lugares em todo o nosso design, onde estamos usando essa cor. Agora, com isso, podemos facilmente alterar nosso esquema de cores sem a necessidade de percorrer nosso design e mudar cada cor, cada objeto usando essa cor. E você pode ver o quão útil isso pode ser. Agora, com isso dito, vou seguir em frente e apenas apertar o Command Z várias vezes até voltarmos para aquela cor que temos. É claro que, à medida que usamos essas outras cores em todo o nosso design, podemos seguir em frente e ver quão útil esse esquema de cores e conjuntos e nossas bibliotecas XD serão úteis. 48. Gradientes: Então, todas as cores sólidas são divertidas de trabalhar e se candidatar ao nosso esquema de cores. Ainda mais divertido do que isso são gradientes. Os gradientes permitirão essencialmente combinar várias cores para criar algum tipo de malha entre duas cores. E você verá como isso funciona em apenas um segundo. Se você for em frente e duplicar este pequeno círculo aqui usando o Comando D e arrastando uma cópia para baixo. Se você for para um preenchimento aqui, é claro que podemos ir em frente e mudar essa cor aqui para qualquer cor sólida como estamos fazendo ao longo do nosso projeto. Mas se você quiser criar um gradiente, podemos simplesmente ir até esta seta para baixo aqui. Temos várias opções. Podemos fazer um gradiente linear, que seguirá em frente e criará um gradiente entre duas cores. É claro que você pode adicionar mais cores ao longo do gradiente como você gostaria, mas ele será misturado ao longo de uma linha sólida. Você pode fazer um gradiente radial, que, como o nome sugere, é um gradiente que se desvanece ao longo de um raio. Você pode ir em frente e editar esse raio e torná-lo maior ou menor, e assim por diante. Podemos fazer um gradiente angular, que é menos usado, mas essencialmente é um gradiente angular como o nome sugere. Mas, mais comumente, queremos um gradiente linear. E com um gradiente linear, podemos até ir em frente e mover esses dois pontos em todo o nosso objeto para essas duas cores. Então, podemos fazer um tipo de ângulo como esse. Em seguida, podemos ir em frente e definir a cor para cada nó. Portanto, se selecionarmos um nó aqui, o que podemos fazer selecionando este nó ou este aqui em nosso seletor de cores, podemos ir em frente e editar esse lado do gradiente. E então, se formos para o outro lado ou para o outro nó, podemos ir em frente e editar esse também. E é assim que fazemos gradientes em todo o nosso design. Então, para o nosso primeiro gradiente, vamos seguir em frente e aplicar um gradiente à minha tela inicial. O que fazemos? A cor verde que temos aqui. Para um lado e para o outro lado, vamos fazer a cor secundária aqui, que eu selecionei como uma cor de amostra aqui. Caso contrário, você pode ir em frente e colocar esse código hexadecimal 52796 f lá. E iremos em frente e lhe daremos o mesmo gradiente aqui também. Vou deixá-lo neste ângulo de 45 graus que tenho aqui. Agora, com isso selecionado, você pode ir em frente e clicar no pequeno ícone de mais aqui para adicionar uma cor dessa seleção. Então agora o XD foi em frente e criou esse gradiente para nós. E podemos ir em frente e até renomear um gradiente em nossos estilos de cores. Agora, se descermos para nossa tela inicial e selecionarmos todo o quadro de arte. Como essa cor de fundo é gerada a partir do quadro de arte. Em vez de alterar o preenchimento aqui para corresponder a esse gradiente, podemos simplesmente clicar nesse gradiente em uma cor em nossas bibliotecas. E iremos em frente e aplicaremos esse mesmo gradiente à nossa tela inicial. É assim que você usa gradientes no XD. 49. Configurando um estilo de personagens: Semelhante a como configuramos esse estilo de cor em nosso XD. E agora podemos usá-lo em todo o nosso design. Podemos fazer a mesma coisa com tipografia. E se você se lembrar anteriormente, mencionei que vamos voltar e aplicar a fonte SF Pro em todo o nosso design. E vamos usar isso como nosso fundo principal. Normalmente, em um aplicativo iOS, usamos essa fonte, pois ela é a mais usada pela Apple ou por si mesmas. Se você quiser ser um pouco mais criativo e instalar uma fonte personalizada, você também pode fazer isso e aplicar essa fonte. Mas acho que vamos continuar usando o SF pro em todo este projeto de design do iOS. Se você ainda não fez isso, vá para developer.apple.com. Fontes de barra para frente. Vá em frente e insira esse URL e, em seguida, você deve ser levado para esta página, onde você pode ir em frente e baixar o SF pro gratuitamente. Agora, se você estiver no Windows, quero observar que pode ser um pouco mais difícil abrir esse arquivo porque ele é baixado como arquivo DNG, que é o arquivo do instalador para Mac. Mas se você for em frente e instalar e baixar sete zip indo para este URL aqui, você deve ser capaz de usar o 7-Zip para descompactar esta pasta, onde você acessará os arquivos de fonte De onde você pode ir em frente e abrir esses arquivos de fonte para instalá-los em sua máquina. Agora instalamos essas fontes, uma palestra anterior, então não vou passar pelo processo de instalação, mas vou dar-lhe um minuto aqui para fazer uma pausa e instalar essas fontes, se você não tiver feito isso. E então vá em frente e acompanhe o que o resto da palestra. Depois de ter essas fontes instaladas, estou usando esse recurso chamado type-scale.com para realmente escolher uma habilidade para nossos tamanhos de fonte. Agora, quando se trata de um aplicativo, seja móvel ou web, geralmente queremos configurar algum tipo de conjunto de tipos com diferentes tamanhos de fonte usando algum tipo de escala. que, se você quiser, digamos usar tags de cabeçalho, podemos usar uma dessas fontes maiores. E então, para nossos textos corporais e legendas, podemos usar algum tipo de fonte corporal menor. E agora, eu simplesmente fui em frente a este site. E nosso tamanho base é 16 pixels usando uma escala de terço maior. Então, ele irá em frente e multiplicará cada tamanho de fonte por 1,25 para gerar o próximo tamanho. Claro, você pode ir em frente e brincar com outros tipos de escalas para suas fontes, e ela ficará maior ou menor, dependendo de qual você selecionar. Mas acho que este terceiro maior, ou o quarto perfeito, funciona bem, para o propósito deste curso, vamos seguir em frente e usar o terceiro maior. Portanto, sinta-se à vontade para tirar um segundo para descobrir esses tamanhos de pixels. Então, uma vez que você os tenha, mantenha essa janela aberta, podemos usá-la enquanto configuramos nossos conjuntos de tipos no XD, vá para o próprio XD. Feche isso. No XD. Vamos seguir em frente e configurar esse tipográfico indo até aqui para onde temos nosso esquema de cores. Vamos seguir em frente e duplicar esse texto do esquema de cores aqui. E onde vamos montar um tipográfico? Perfeito. E agora vamos seguir em frente e apenas ampliar. E vamos seguir em frente e criar um texto e nomear este, corpo um. Para este, quero que a fonte seja ECIF pro, quero que ela tenha 16 pixels. Para o preenchimento. Queremos ir em frente e usar esse código hexadecimal 333 para a fonte do meu corpo. Então vou em frente e colocarei isso aqui embaixo, duplicá-lo mais uma vez. E então vamos fazer corpo para este usando minha habilidade. Deve ter um tamanho de 20 pixels. Subindo aqui, vamos fazer o cabeçalho três. Este deve ser 31,25. Duplique isso mais uma vez. Faça o cabeçalho dois, e este deve ser 39,6, desculpe, 0,06. Isso pode acontecer quando você estiver trabalhando nisso. Portanto, tenha cuidado. Por fim, vamos fazer o cabeçalho um. Este deve ser 48,83. À medida que avançamos por todo o nosso design, provavelmente não usaremos tanto o cabeçalho, mas é bom ter acesso a esses conjuntos de tipos em todo o nosso design. Agora vou colocá-los aqui. Vou selecionar todos esses aqui agora. Para o meu corpo, vou criar outra duplicata dele, mas este eu vou selecionar meio para meu peso da fonte e depois chamar esse corpo de um meio. Em seguida, vou selecionar todos eles juntos e, em seguida, clicar no ícone de mais aqui para traduzi-los em estilo de personagem aqui no XD. Vamos prosseguir e renomeá-los. Então este deve ser um corpo. Eu acredito que este deve ser o corpo um meio. Se eu não estiver confundindo em nenhum momento, você pode pressionar Editar aqui para ter certeza. Parece que consegui o contrário. O meio é este aqui. E então o 31.25 deve ser. Então temos o 20 como meu corpo para o 31 a cinco como nosso cabeçalho três, SF PRO 39 como cabeçalho para a maior fonte aqui como cabeçalho um. Você pode ir em frente e até mesmo reorganizar esses têxteis aqui ou até mesmo agrupá-los. Então, digamos que eu queira agrupar todos os meus cabeçalhos juntos. Posso ir em frente e selecionar todos eles e criar um novo grupo A partir da seleção. E essas serão todas as minhas fontes de cabeçalho. E, em seguida, agrupe esses outros e chame-os de fontes de meu corpo. Você pode ir em frente e reorganizá-los como quiser. Isso é apenas para manter as coisas organizadas em seu projeto. Enquanto eu estava fazendo isso, acho estraguei meu tipográfico aqui. Então, a qualquer momento, você pode ir para a fonte que deseja alterar. Este para defini-los para aqueles com os quais você está trabalhando. Então, vou selecionar o cabeçalho três, site que um cabeçalho três dois deve estar no ou dois cabeçalho um. Lá vamos nós. Ok, agora, esses são meus conjuntos de tipos que vamos usar um design mais amplo. Na próxima palestra, vamos voltar e aplicá-los ao longo de nossos projetos. 50. Aplicando nossos estilos de personagens: É outro que temos nossa configuração de estilo de personagem aqui. Vamos seguir em frente e aplicar isso em todos os nossos projetos. Vou começar no topo aqui. Para nossas barras de navegação, vamos deixá-las como estão, porque isso é normalmente o que o estilo de tipografia ou caractere é usado nas barras de navegação. Não vamos realmente mudar isso. Vamos manter isso como está. Mas para onde quer que tenhamos nossos próprios textos. Vamos seguir em frente e usar nossos próprios estilos de personagens. Então, com isso dito, a partir da tela inicial, vamos clicar em mordidas saudáveis aqui e usar nosso cabeçalho dois. claro que o que acontece é que, por padrão, os estilos de caracteres vêm com essa cor ou que Phil é adicionado a eles. Por padrão, o XD seguirá em frente e usará a mesma cor para os estilos que configuramos aqui. Mas podemos ir em frente e fazer alterações nosso preenchimento para os casos específicos aqui. Então, vamos seguir em frente e fazer isso aqui. Assim como passamos pela mudança de fonte. Lembra disso? Como fontes ou diferentes, seus alinhamentos podem mudar. Portanto, tome cuidado com isso e continue realinhando as coisas à medida que fazemos isso. Então, para o segundo, vamos fazer cabeçalho ou cabeçalho h3. Indo em frente e de novo, alinhe as coisas corretamente. Se necessário. Vamos seguir em frente e mover as coisas um pouco para baixo também. Claro, temos os botões aqui, então vamos mudar esses textos em nossos componentes reais em apenas um segundo. Mas para esses dois, vamos selecionar os dois e usar nosso corpo um meio para os dois aqui. Esqueci a senha. Vou seguir em frente e adicionar um pequeno ponto de interrogação ao final disso. Mova isso. Então eu quero realmente tornar esse corpo um meio mais sutil. Então, o que vamos em frente e clique em Editar neste corpo uma mídia clicando com o botão direito do mouse, clicando em Editar. E eu vou apenas ir em frente e, na verdade, mudar a cor da fonte para um pouco mais sutil, talvez algo em torno desse tipo de cor cinza claro. Você pode inserir esse código hexadecimal para gerar a mesma cor para o seu corpo, um estilo de caractere médio. Por aqui. Vou apenas ir em frente e mover isso para o lado para permitir espaço para este texto aqui. Vamos voltar aos nossos componentes e aplicar nosso novo tipográfico ao longo deste botão, vamos fazer o corpo um. Então vou em frente e mudarei o preenchimento para branco e também aplicarei um meio. Ou, na verdade, vamos fazer uma espessura semi-ousada aqui. Vou seguir em frente e salvar esse estilo e chamá-lo minha bunda no meu estilo de texto de botão. Para este espaço reservado, vamos seguir frente e usar o corpo um e apenas trazer a cor para uma cor mais sutil aqui. Para este, vamos fazer o corpo um. Não temos uma fonte para esse tamanho aqui. Então eu queria alterar o tamanho da fonte aqui para SF Pro e criar um novo estilo de personagem isso também pressionando mais aqui. Este aqui, vamos nomeá-lo. Estilo de legenda. Lembre-se, ao longo do seu design, você pode criar tantos estilos de personagens quanto precisar. Sempre que você acha que há algo único com seus estilos de personagem. Mesmo para as 0 calorias e os US$1,1 aqui, vamos seguir em frente e usar essa legenda têxtil. Com a diferença sendo que iríamos ir em frente e mudá-los para um semi ousado, na verdade, para este pequeno 0. E aqui vamos mudar esse também. O que você quer? Nossos componentes agora estão atualizados com nossa nova fonte. Em todo o nosso designer, os componentes devem estar usando esse novo conjunto de fontes e nossos têxteis também. Para a verificação do telefone, que é o título da página, vamos fazer o cabeçalho três. Para este, vamos fazer o corpo um. Parece bom. Claro, este aqui. Não fizemos disso um componente que podemos entrar aqui e definir esses dois para o título. Vamos fazer. Um para o dólar. Vamos fazer a legenda têxtil. É. Vamos ir em frente e mudá-lo para semi-ousado. A mesma coisa aqui. Para este, vamos fazer estilo de texto de legenda, semi negrito, e apenas movê-lo para cima. Para este italiano, vamos fazer também a mesma coisa. Legenda têxtil e vamos fazer públicos semi-ousados. Bom. Acho que são todas as fontes que temos. Então, configuramos tudo agora como a nova fonte SF Pro. E à medida que avançamos por todo o nosso design, vamos aplicar as mesmas fontes em nossos designs. 51. Página de ordem: Agora que passamos por alguns dos elementos essenciais de montar nosso projeto, incluindo configurar um esquema de cores, organizar nossos conjuntos de tipos e adicioná-los aos nossos estilos de personagens. No XD, acho que estamos prontos para avançar com o design do resto de nossos modelos. Seguindo em frente, temos a página do pedido em seguida, então vamos trabalhar nesta palestra. Então, essencialmente, se ele puxar nosso wireframe, em nosso wireframe para nossa página de pedido, temos algumas coisas, incluindo os itens que foram adicionados ou os usuários adicionados ao seu pedido, bem como uma pequena seção que podemos incluir para mostrar o endereço para o qual ele está sendo entregue, caso eles precisem fazer alterações em seu endereço. Em seguida, temos os itens aqui onde eles também podem adicioná-los ou removê-los do pedido, bem como pequena seção aqui para explicar qual o subtotal após impostos e tudo mais, talvez taxas de entrega e tudo o que é com um pequeno botão Pedido aqui para que eles concluam seu pedido usando. Então, voltando ao nosso XD, vamos seguir em frente e fazer algumas coisas. Primeiro, vamos em frente e comece alterando esse texto de título grande para o trimestre completo. Vamos em frente e nos livrar desse título aqui. Para o botão de ação aqui podemos voltar ao menu. E vamos ver o que mais temos aqui? Queremos nosso ícone de localização. Então, o que vamos fazer é ir em frente e nos livrar desse ícone mais aqui. Em seguida, vamos adicionar nossos cartões de pedidos aqui ou cartões de itens aqui. Então, por que não vamos em frente e arrastamos. Verei uma cópia desses dois. Vamos fazer. Vamos selecionar a instância de frango parmesão aqui. Então vou em frente e copiarei esse pressionando o Comando C, vá para a minha página de pedido e colando isso lá. Então vamos fazer uma das sobremesas. Talvez, talvez o bolo de lava pareça bom. E cole isso na página do pedido. Vou ir em frente e apenas reorganizar isso. Então eu trago isso para o topo. Queremos manter o espaçamento aqui bastante consistente. Então eu queria fazer 25 pixels da barra de navegação. E novamente, estou usando Alt para ver a diferença de espaçamento entre objetos manterá isso também o mesmo que temos aqui, que acredito que é 15. Temos 15 pixels de cada pedido. Vamos ter os itens aqui e depois vamos em frente e desenhar um pequeno retângulo aqui na parte inferior desta página. Para este retângulo, vou seguir em frente e selecionar meu sotaque para colorir. Isso parece bom. Vamos criar uma pequena caixa de texto aqui e escrever saída subtotal de lá. E vamos usar o, vamos fazer o corpo um. O corpo dois ficaria bem. Para isso. Vamos definir o preenchimento para o sotaque de três cores. Bem, vou seguir em frente e duplicar isso e colocar uma cópia aqui e alinhá-la também. Perfeito. E vamos apenas ir em frente e adicionar esses números. Então US$19,99 em 1999. Isso deve nos dar se eu não estiver confundindo 2998, então vamos seguir em frente e duplicar isso mais uma vez. Ambos. E vamos fazer impostos. Vou seguir em frente e, na verdade, deixei a linha isso também. A luz à esquerda para o imposto aqui. Vou apenas ir em frente e inventar isso. Colocar 499 é com o propósito de completar esta página. Então vou seguir em frente e duplicar isso mais uma vez. Desligue desta vez porque queremos colocar o total que vamos usar. Em vez do corpo dois, vamos fazer um cabeçalho três. Vamos ir em frente e mudar o preenchimento novamente para sotaque três. E em vez de tags no total certo, gritos. Então, adicioná-los deve nos dar 3497. Uma coisa que você pode fazer aqui é ir em frente e agrupar totalmente. Esses objetos são linhas de textos juntos usando o Comando G e, em seguida, ele pode usar pilhas. Desta forma. Primeiro, podemos ir em frente e definir um espaçamento igual de, digamos 20 pixels. Dessa forma, se você quiser dizer, duplique esse grupo e crie outra linha, podemos fazer isso facilmente. Pode criar tantas linhas quanto possível para que possamos adicionar, digamos taxas de entrega. Digamos que 299. Não fui em frente e atualizei isso. Como quisermos. Lá vamos nós. Isso mesmo. Em seguida, vamos concluir esta página adicionando um ou o local de entrega ou o endereço e uma opção para alterar isso, bem como um pequeno botão Pedido na parte inferior. Então, vamos começar com o botão Pedido, já que já temos nossa biblioteca aberta e podemos arrastar um botão aqui. Coloque nosso botão aqui. Deixe-me apenas ter certeza de que temos um espaçamento consistente. Então, queremos 35 pixels da parte inferior. Então vamos seguir em frente e mudar isso para pedir. Lá vamos nós. E então o que eu quero é outra versão desse botão com outra cor, potencialmente talvez nossa cor de destaque. Então, o que eu tenho em mente é que dentro desse botão podemos fazer com que eles vejam o endereço de entrega. Então vou fazer uma pausa rápida aqui e vamos voltar na próxima palestra. Vamos criar outra variação desse componente para esse botão com uma cor diferente. E eles usam esse para adicionar nosso local de entrega nesta página também. Vamos fazer isso juntos na próxima palestra. 52. Variação de componentes: Tudo bem, como prometido, vamos completar nossa página de pedidos e esta palestra. Mas antes de fazermos isso, vamos prosseguir e aprender sobre a criação diferentes estados de componentes como prometi nas palestras anteriores. Vamos para a nossa seção de componentes de nossos projetos. Aqui temos nosso botão, é claro, que criamos e o transformamos em um componente para que possamos reutilizá-lo facilmente em nossos projetos. Nesta palestra, quero fazer uma versão leve desse botão e usar essa cor de destaque para o meu botão aqui. Então, o que realmente não exploramos é esse pequeno ícone de mais aqui, onde podemos realmente criar estados diferentes para o nosso botão aqui. Se você clicar em Plus, ele realmente nos dá algumas opções, como novo estado, que é o que gostaríamos que nosso estado fosse chamado. O estado de focalização comum e o estado de alternância para botões , bem como nesse XD nos sugerem automaticamente. Mas não vamos criar esses por enquanto. Vamos fazer um novo estado. Vamos chamar essa versão state lite. Esta será a versão light do nosso botão. Para editar esse estado agora, precisamos ter certeza de que o selecionamos no lado direito do painel aqui. Se selecionarmos o estado padrão, agora estamos fazendo edições em nosso estado padrão. Mas se selecionarmos esta versão light, repente meu componente está sendo editado, mas apenas a versão light e não o estado padrão. Então, sob esta versão light, podemos ir em frente e clicar duas vezes em nosso botão, selecionar o retângulo novamente, certifique-se de ter o retângulo selecionado e não todo o componente do botão. E então vá em frente e clique em X e três para que nosso fundo de botão seja que atue em três cores. Então, para a cor do botão em si, quero ir em frente e fazer sotaque também. Lá vamos nós. Agora criamos uma versão leve do nosso botão, que tem essa cor. E a qualquer momento podemos comprar em direção ao estado padrão e terminar esse estado. É mais criativo e mais estados, como o estado de flutuação e alternância também. Mas, por enquanto, criamos duas versões ou estados diferentes desse componente, não queremos usar essa outra versão. Podemos ir para qualquer um dos nossos botões e ir em frente e alterná-lo para a versão light. E então vá em frente e faça essas alterações nesse botão. Aqui o que eu quero fazer é agora ir em frente e encontrar meu botão daqui. Arraste outro aqui para a minha página de pedido. Mas em vez do estado padrão, quero que seja a versão light. Na verdade, pensando bem, quero criar outra versão da minha versão de vida que tenha o texto alinhado ao lado esquerdo. Por que não mudamos de volta para aqui. Vá para nossa versão light e, a partir da nossa versão light, podemos criar outra versão ou outro estado. E vamos chamar este texto de versão leve à esquerda, assim como um. Agora, nesta versão, irei em frente e, na verdade alinhar ou trazer meu texto aqui para o lado esquerdo. Mas 25 pixels do lado esquerdo. Enquanto estamos aqui, vamos em frente e selecione Text Align Left e, em seguida, vá em frente e saia. Então, agora temos três versões. Estado padrão, uma versão light e, em seguida, uma versão light com o texto alinhado ao lado esquerdo. Assim. Perfeito. Então, agora, se eu voltar para aqui, nesta instância em nossa página de pedidos, eu queria fazer textos à esquerda e depois ir em frente e inserir algum tipo de endereço fictício, algo assim. Então eles sabem para onde a entrega vai e podem tocar nesse botão para alterar seu endereço, o que nos levará até a página de localização aqui que vamos projetar nas futuras palestras. Com isso, acho que isso completa nossa página de pedidos. Então, vamos voltar na próxima palestra para trabalhar em nossa página Progresso do pedido. 53. Página de progresso de pedidos: Tudo bem, então é hora de seguir em frente com nossa página Progresso do pedido. Portanto, não avalie o trabalho com as páginas que montamos. Para a página Progresso do meu pedido. Vou voltar rapidamente para o nosso wireframe. Basta ver o que temos em nossos esboços. Na página de progresso, temos um pouco, é claro, textos de progresso com um pequeno tipo de escala mostrando a partir do momento em que eles fazem o pedido Para entregues, uh, onde eles estão atualmente. Estou pensando talvez um pequeno texto para mostrar o status atual da ordem e a pequena marcação aqui que podemos criar com uma linha e um círculo. Então, aqui em baixo, queremos colocar o endereço de entrega mais uma vez e talvez dizer entregando dois. E então queremos dar-lhes a opção de alterar seu pedido chamado castelo do restaurante a ordem e tal. E acho que podemos colocá-los em uma pequena folha de ação que o iOS nos dá. E isso será dado como um exercício no final desta palestra. Mas antes de saltarmos para lá, vamos avançar e projetar as outras peças. Além disso, vou dar a esta página um pouco mais espaço em branco do que o que eu esboçei aqui, porque mais tarde eu quero voltar e enquanto estamos trabalhando na prototipagem, e talvez adicionemos uma pequena animação legal para mostrar que a ordem está sendo preparada ou algo assim. Já vi isso em outros aplicativos de entrega e acho que parece legal. Assim, podemos fazer uma pequena animação aqui para o usuário veja em que estado seus pedidos. Primeiro, vamos começar com a barra de navegação. Vamos seguir em frente e remover esse pequeno título daqui, o ícone de mais também, e mudar isso para o progresso do trimestre. Para este botão de ação, vamos seguir em frente e vamos fazer a ordem de visualização. Então o que queremos fazer é ir em frente e definir o plano de fundo desta página para acentuar também. Então, acabei de selecionar toda a prancheta e depois selecionei o acidente levou para dar a todo o fundo essa cor. Agora vamos seguir em frente e usar uma linha para criar uma linha reta aqui e dar-lhe uma borda de cinco pixels ao redor das maiúsculas. E vamos mudar essa cor de borda para nossa cor secundária, que tem esse código hexadecimal. Não podemos, porque esta é linha e linhas têm uma borda e esses estilos de cores são apenas preenchimentos. Não podemos usá-los, mas podemos ir em frente e contar o mouse sobre eles, pegar o código hexadecimal e usá-lo como nossa cor de borda. Agora, se isso fosse um retângulo e tivéssemos um preenchimento, poderíamos usar totalmente nossos atalhos de cores aqui. E é por isso que estou inserindo manualmente aqui. Mas, novamente, você também pode usar suas amostras de cores para esfriar. E então eu vou fazer uma pequena elipse com E sobre este grande. Vou usar meu trackpad para centralizar isso aqui para este porque ele tem um preenchimento, podemos fazer uma cor primária, que possamos mostrar onde estão os pedidos deles. Vamos seguir em frente e criar uma pequena caixa de texto aqui e escrever que seu pedido está sendo preparado pelo restaurante. Você quer ir em frente e dar a este corpo um meio e usar x e três para a cor. Substitua isso na parte superior da escala e na parte inferior. Vamos duplicar isso e escrever, por favor. E outra cópia aqui. Alinhe-o direito e alinhe-o aqui e a ordem correta ou realmente seco entregue. Então eles sabem onde estão. Vamos seguir em frente e copiar esse botão ou essa instância desse botão em nossa página Progresso do pedido. Vou deixá-lo como está, e então vou seguir em frente e fazer o T Heat e a ordem certa sendo entregue para sair de lá e apenas trazer isso aqui. Perfeito. Vamos ver o que mais temos. Vamos fazer um pequeno botão para que eles editem o pedido daqui. Quando seguimos em frente e copiamos este botão também para aqui. E em vez de fazer o pedido, vamos mudar isso para editar o pedido. Perfeito. Então, novamente, vamos deixar o meio vazio aqui para uma pequena animação que vamos montar mais tarde. Mas, por enquanto, vou te dar um pequeno exercício. Se você ainda tiver este documento aberto ou o tiver em seu XD, vá em frente e abra-o. Caso contrário, você pode acessá-lo a partir de recursos de barra de design de barra developer.apple.com e , em seguida, vá em frente e baixe a versão do XD. E, em seguida, abra isso no XD. E uma vez que você o abra, ele deve ficar assim novamente, onde arrastamos a barra de navegação. E assim, a partir disso, vou te dar um exercício para arrastar a barra de status para todos os seus quadros de arte. No topo, quero que você coloque isso no topo de suas pranchas de arte onde se aplica. E também, vamos em frente e encontrar a folha de ação. Lá vamos nós. Está em visualizações, uma exibição de componente de interface do usuário. Então, isso é um truque de ação. Você pode ir em frente e usar este. Então, uma vez que eles pressionam o pedido aqui em nosso design que poderia aparecer e mostrar a eles as diferentes opções que eles têm. que volta às nossas maquetes, pode incluir editar o pedido em si ou ligar para o restaurante ou cancelar esse pedido. Então, como um exercício, eu quero que você use esta folha de ação para policiar essas opções no design lá, você pode se sentir livre para ir em frente e duplicar esta prancheta e depois colocar essa folha de ação topo. Ou você pode apenas projetar separadamente a folha de ação ou trazer a folha de ação aqui no lado da nossa placa de arte e colocá-la ali. Se eu não acho que a segunda opção seja mais fácil porque você realmente não precisa duplicar esta página inteira. Vou deixar isso como um exercício, bem como colocar a barra de status em todas as placas de arte. E então, na próxima palestra, vamos voltar e fazer isso juntos. 54. Solução de exercícios: Espero que você tenha tido a chance de dar uma olhada nesses dois pequenos exercícios que lhe dei. Se não, não se preocupe com isso. Vamos fazer isso juntos nesta palestra, começando com a barra de status em todas as nossas placas de arte. E, em seguida, voltar aqui e usar uma planilha de ações que, uma vez que o usuário clica em Editar ordem, ela oferece algumas opções. Primeiras coisas primeiro, vamos voltar ao nosso kit de interface do usuário da Apple. Porque temos principalmente um fundo claro em nossas barras de navegação. Vamos usar a barra de status aqui em vez do ponto escuro aqui. Então, vamos em frente e simplesmente copie a barra de status daqui. Volte aqui, e vou apenas ir em frente e colá-lo com nossos outros ativos da Apple aqui para que tenhamos nossa instância aqui. Então vamos seguir em frente e apenas copiar isso para nossas, todas as nossas páginas. Não precisamos necessariamente dele em nossa tela inicial, mas queremos isso em nossa página de login. Vamos em frente e clique em Página de login. Cole isso lá dentro. Usando o Command V. Vou seguir em frente e usar o shift e as setas para cima várias vezes até que esteja totalmente no topo. Perfeito. Vamos voltar e adicionar um pouco de efeito de desfoque legal a isso em um pouco. É uma parede. Estamos em nossa página de login. O que vou fazer é ir em frente e selecionar a barra de status. Mas desta vez, certifique-se de selecionar apenas a barra de status aqui que este grupo aqui sem a camada BG aqui, que é o plano de fundo. Portanto, certifique-se de copiar apenas a barra de status. E, em seguida, vá em frente e selecione a verificação do telefone, segure Shift, selecione o menu principal enquanto mantém pressionado o turno, ordene um pouco e solicite páginas de progresso para seguir em frente e clique em Command V. Tudo é que eu vou vá em frente e cole nossa barra de status em nossas páginas, tudo no mesmo local que temos aqui. A única coisa que eu quero fazer aqui na verificação estrangeira é apenas trazer ou mudar tudo para baixo em 20 pixels. Há espaço suficiente. Podemos até fazer 30. Acho que isso parece melhor. Quanto mais espaço em branco você tiver entre as coisas melhor. Você não quer enfiar seu design em uma tela pequena, como uma tela do iPhone. Então, vamos fazer a mesma coisa. Vamos ir em frente e copiar a barra de status. Vamos fazer a mesma coisa. Vá em frente e faça isso mais uma vez copiando todo esse grupo de barras de status para nosso local de pagamento de perfil ou páginas de histórico também. Agora, todos os nossos quadros têm essa barra de status neles, que é o que estamos procurando. Agora estamos prontos para passar para nossa folha de ação aqui. E assim, para isso, vamos voltar aqui e ir para a nossa folha de ação, que deve estar aqui embaixo. Lá vamos nós. Vou copiar toda a folha de ação aqui. Certifique-se de selecionar esse grupo. Vá em frente e copie-o para o seu design aqui. Vou colá-lo aqui no quadro de pasteboard ao lado. E depois iremos em frente e editaremos o título para editar o pedido. Nesta pequena descrição, vamos escrever para fazer alterações ordem para esta primeira ação. Vamos fazer o pedido de edição. Para a segunda ação, vamos cancelar o pedido. E para este terceiro, vamos entrar em contato com o restaurante. Perfeito. Agora, se eles clicarem neste pedido Editar, ele abrirá este alerta ou folha de ação sobre o qual não precisamos nos preocupar agora. Mas quando estamos prototipando, você verá por que isso é útil. Esse é o exercício. Vamos fazer uma pausa rápida aqui antes de voltarmos e continuar com nossos projetos. 55. Como adicionar bude: Tudo bem, então fizemos um ótimo trabalho até agora. Estamos quase concluídos com nossa maquete aqui. Temos mais algumas páginas aqui para projetar. E então estamos prontos para ir em termos de nossos modelos móveis. Em seguida, avançamos com a exportação e o compartilhamento com nossos colegas e membros da equipe. Agora, antes de prosseguirmos para completar essas páginas, eu queria mostrar alguns dos efeitos que o XD tem a oferecer e como eles funcionam em objetos e imagens e assim por diante. Para fazer isso, na página de login, quero ir em frente e apenas ampliar. Só lá. Temos essa pequena barra de status aqui, é claro, que reunimos nas palestras anteriores. Esta barra de status nesta página vem com o plano de fundo aqui, que é o que queremos porque há essa imagem aqui. E se ele não tivesse esse fundo, isso meio que interferiria ou esse relógio aqui interferiria nessa imagem. Então, não queremos isso, e é por isso que queremos esse histórico aqui. Agora, um dos efeitos interessantes que você pode aplicar em uma página como esta ou uma barra de status como essa é aplicar o que é chamado de desfoque de fundo. Xc tem dois tipos diferentes de borrões que oferece. Um deles sendo borrão de fundo, o outro sendo borrão de objeto. E vamos explorar os dois nesta palestra aqui. O primeiro que eu queria explorar como um desfoque de fundo, que se aplica à barra de status. Então, vamos em frente e selecione a barra de status. E em vez de selecionar a coisa toda, vamos clicar duas vezes para selecionar apenas o BG ou a camada de fundo aqui. Certifique-se de que, no painel Camadas, você só tenha essa camada de fundo selecionada. Depois que você tiver essa camada BG selecionada, eu vou em frente e habilito o desfoque de fundo. Agora, se aqui for essa periferia de objeto, você vai em frente e alterá-lo para desfoque de fundo e, em seguida, vá em frente e habilite-o. Há três propriedades aqui que podemos editar. O primeiro é o quão forte ou desfocado é. Quanto maior o número que definimos aqui, mais desfoque será aplicado. No momento, não estamos vendo muito por causa do fato de que a transparência dessa camada de fundo está em 100%, pois a tornamos menos transparente, você verá que o desfoque será aplicado sobre o que parecerá. Então, para fazer isso, vou seguir em frente e reduzir a transparência disso. Então, agora, se você olhar para o topo, você pode ver o desfoque. Neste momento, meu plano de fundo nem tem mais uma cor, é apenas um borrão. E se eu selecioná-lo novamente e diminuir o desfoque, você pode ver que fica cada vez menos embaçado. E se eu aumentar, ficará cada vez mais embaçado. Então, o que isso está fazendo essencialmente é que está pegando essa camada de fundo e fazendo qualquer coisa embaixo dela e adicionando um borrão a qualquer coisa embaixo dela. E é isso que o desfoque de fundo faz. Agora esta opção aqui, se eu for em frente e derrubá-la e deixaremos essa camada de fundo mais escura e vice-versa. Se eu for para o outro lado, ele irá em frente e torná-lo cada vez mais leve. Mas é o que queremos neste caso, para que criemos contraste suficiente para o usuário possa ver a barra de status. Então, por que não colocamos isso em 25 com um borrão de fundo em si sendo aos 15, acho que ficaria bem. Agora, se você olhar para ele do pouco mais ampliado, verá que parece muito bom. Antes de seguirmos em frente, também quero mostrar como o desfoque de objetos funciona. Então, se eu selecionar esse logotipo aqui, se seguirmos em frente e, em vez de desfocar o fundo, selecione o desfoque do objeto e vá em frente e habilite isso aqui. O que acontecerá é que o XD irá em frente e desfocará apenas essa camada em si. Então, não estamos embaçando nada por baixo disso. Estamos desfocando o logotipo em si. Claro, com isso, você pode criar alguns efeitos legais se você realmente gosta. Assim como um exemplo, você poderia fazer algo assim onde você cria talvez um tipo de plano de fundo para o logotipo e talvez torná-lo um pouco maior. E então vá em frente e, por exemplo, duplicado e este, você pode remover o desfoque e torná-lo um pouco menor. Posso ser realmente criativo e criar coisas assim com um borrão de objeto. E você pode até ir em frente e torná-lo menos visível. Portanto, não é totalmente transparente. Algo como o pai pode parecer legal. Mas, novamente, isso depende de você e quão criativo você quer chegar com seus borrões. E vou apenas ir em frente e apenas comandar Z para desfazer isso. Muitas vezes eu realmente não quero isso. Eles só querem mostrar o que o borrão de objetos tem a oferecer. Esse efeito que criamos para o logotipo parece uma sombra. Então, o que vamos fazer na próxima palestra é voltar e aprender como podemos realmente criar sombras para objetos no XD. 56. Como adicionar sombras: Outro efeito realmente útil e prático que você pode adicionar aos seus designs para realmente polir as coisas é chamado de sombras. Agora, é claro, você pode aplicar sombras a qualquer objeto que quiser. E o objetivo da sombra é realmente separar seu primeiro plano, que são as partes principais da sua interface, como botões, texto , campos e assim por diante do resto da página, do plano de fundo. Mais alguma coisa por trás desses objetos? Agora, uma coisa que você quer fazer, especialmente se você é um designer iniciante, é ser mais sutil com sombras. Notei muitos designers para tornar as sombras um pouco fortes demais. Portanto, o objetivo da sombra não é criar um efeito realmente forte sobre o objeto. Na verdade, estamos tentando ser o mais sutis possível , garantindo que a sombra atenda seu propósito e também faz com que nosso design pareça mais polido. E você verá como isso parece em apenas um segundo. Vou seguir em frente e, como exemplo, aplicar uma sombra ao meu botão aqui. Agora, é claro , como nosso botão é uma instância aqui desses componentes, podemos realmente ir para o componente apenas clicando aqui e clicando em Editar componentes principais. Então, isso só nos leva até aquele componente em que o temos. Portanto, este é o nosso MainComponent. E a beleza dos componentes é que podemos ir em frente e adicionar sombras a eles e isso será aplicado em nossos projetos. Então, como exemplo, vou seguir em frente e adicionar sombras a este botão aqui clicando duas vezes e selecionando a camada de fundo ou essa camada retangular. Quando se trata das sombras, temos duas opções. Podemos fazer uma sombra interna, então isso será uma sombra dentro do botão. Agora isso geralmente é usado quando você está tentando criar um tipo de botão 3D ou você quer criar talvez um estado de toque. Então, quando um usuário toca no botão, ele irá em frente e mostrará essa sombra interna que normalmente vemos nas sombras, mais no design do jogo em vez do design da interface do usuário do aplicativo. Mas, claro, isso depende de você como designer. Mas, novamente, pode ter feito é ficar sutil com isso. Vamos passar pelo que as sombras têm a oferecer. Shadow essencialmente tem uma posição x e y. Portanto, a exposição é onde essa sombra cai em relação a esse retângulo. Se mudarmos isso para, digamos que 20 ou a sombra mova 20 pixels para a direita. E se o fizermos, vamos dizer a mesma coisa para o y. Você verá que nossa sombra move completamente 20 pixels para a direita e 20 pixels para baixo como efeito. E isso aqui, semelhante aos efeitos de desfoque, é como nossa sombra está borrada. Se mudarmos isso para 20 ou a sombra se tornar mais misturada a. Sim. E se ele tivesse dito isso para 0, será muito duro e apenas um tipo de coisa em linha reta. Mais uma vez, sombras internas, não tanto o que estamos procurando, mas estamos procurando por uma sombra, que é mais tipicamente usada no design da interface do usuário. Então, se a sombra solta ativada, ela irá em frente e criará uma sombra fora desse retângulo aqui, que é o que estamos procurando. Xd, por padrão, será definido como 0, x, três pixels para o y e seis pixels para o desfoque em si. Mas ele pode brincar com esses números. Então, só para ver como isso em si seria, você pode voltar aos seus projetos. Podemos ver agora como essa sombra será. Acho que o que eu gostaria de fazer é criar um desfoque maior em torno dessa sombra e talvez trazer mais alguns pixels para baixo. Só para aplicar esses efeitos, vamos seguir em frente e clicar duas vezes nele, selecionar o retângulo, alterar este branco e talvez um seis, e mudar esse desfoque para talvez aos 15. Vamos tentar isso e ver o que acontece. Isso parece um pouco melhor. Volte aqui. Uma coisa que eu quero observar é que você pode realmente ir em frente e mudar a cor da sombra clicando neste ícone seletor de cores aqui. Claro, você pode aplicar uma cor às suas sombras. Podemos fazer uma sombra vermelha ou podemos fazer essa sombra verde. Mas normalmente você gostaria de ir com uma sombra negra. Isso é mais usado. E você quer ir de novo, muito sutil com ele. Você não quer uma sombra forte onde o OPCD seja muito alto. Você quer algo onde a opacidade seja talvez em qualquer lugar entre cinco a, eu vou dizer talvez 20 a 30%. Mas isso, claro, varia com o que você está acontecendo no resto da sua página. Gosto de usar 10% aqui ou, na verdade, até lipídios mais baixos, talvez 8% porque quero que seja muito sutil. Mas, como você pode ver, ainda é um demonstra esse efeito. Ainda assim, você ainda pode ver o efeito dessa sombra aqui. Podemos fazer a mesma coisa com nosso TextField aqui. Assim, podemos selecionar o plano de fundo dos campos de texto para uma sombra solta e fazer os mesmos cinco pixels, 15 pixels e definir a opacidade para 8%. Agora, se eu for aqui, você verá que meus campos também têm uma sombra agora também. Mas como você pode ver, é um pouco forte roubado de mim. Então o que vou fazer é voltar aqui, selecionar isso e ajustar isso um pouco. Então eu quero realmente diminuir um pouco o desfoque e mudar a opacidade para baixo para, vamos fazer 4%. Acho que parece um pouco melhor, mais sutil. Não queremos que ele realmente saia da página demais. Queremos que seja sutil. E então eu acho que isso parece muito bom. Algumas outras coisas às quais podemos aplicar sombras em nosso design incluem esses cartões aqui. Então, normalmente vemos designs de cartões ou UIs de cartões ter alguma sombra sutil, apenas meio separados do resto da página. O que vou fazer é deixar isso como um exercício para você fazer. Vá em frente e adicione uma sombra ao nosso cartão aqui e ao tribunal aqui e certifique-se disso porque este é um componente para aplicá-lo ao componente principal. E novamente, mantenha-o sutil. Faça uma sombra com uma opacidade de 8%. E você pode deixar o XY como ele é 03, e então você pode ir em frente e aplicar um desfoque de dez pixels. Então vou deixar isso para você e depois faremos juntos na próxima palestra. 57. Exercício de sombra: Então, espero que você tenha sido capaz de aplicar essa sombra para nossas cartas aqui. Vamos fazer isso juntos na próxima palestra se você não tiver feito isso. Portanto, não se preocupe. Os efeitos que queremos adicionar quanto a essa interface do usuário do cartão estão aqui, este na página do restaurante e os da nossa página de menu. Agora, a beleza de ambos é que porque aqui estamos usando a grade de repetição, só precisamos aplicá-la a esta. E isso se aplicará a todas as outras UIs difíceis. E, da mesma forma, aqui, porque estamos usando instâncias de um componente, só precisamos aplicar de uma só vez e ele é aplicado em todo o resto de nossos projetos. E então esta é outra razão pela qual componentes e grades de repetição são tão úteis porque realmente reduz o trabalho de precisar continuar repetindo o mesmo padrão, responder a mesma sombra repetidamente e mais uma vez. Vamos começar com a página do restaurante. Amplie aqui, selecione nosso cartão. O que você quer fazer é selecionar a camada de fundo novamente e, em seguida, faremos uma sombra. Mantenha o x e y, a menos que seja. Vamos clicar na cidade policial, baixando-a para 8%. Acho que parece sutil e limpo. E depois faremos dez pelo borrão. Legal, acho que parece muito bom. Agora, é claro que você pode brincar. Não há certo ou errado em termos de quais números você senta aqui , desde que pareça bom. Se você quiser adicionar mais desfoque, você definitivamente pode ir em frente e fazer isso. Ou se você quiser torná-lo mais visível, sua sombra, ela faz isso totalmente desde que você a mantenha. Muito sutil. Então, indo para esta interface do cartão, vamos voltar à nossa página de componentes e apenas aplicá-la aqui. É mais fácil selecionar essa camada de fundo. E estou apenas clicando duas vezes para entrar nesse componente para esse MainComponent, selecione minha camada de retângulo aqui, aquela que está cobrindo todo o componente. E depois vamos fazer uma sombra. E a mesma coisa. Dez pixels para o desfoque e 8% para minha opacidade. Vejo que parece muito bom, também, muito limpo, muito bom. Agora você pode ver que estamos adicionando esses detalhes sutis que realmente fazem nosso design se destacar e ficar ótimo e profissionalmente feito. Isso é muito fundamental quando se trata de montar mock-ups que os clientes lago. Então, como você pode ver, realmente começando a aperfeiçoar nossos designs, começando a ficar muito bem agora, realmente como o que fizemos até agora. Então, quando voltarmos na próxima palestra e continuamos trabalhando em nossa página de menu de barra de perfil. 58. Página de perfil: Tudo bem, finalmente estamos prontos para começar com nosso próximo design, que é a nossa página de perfil. Para uma página de perfil, se eu apenas puxar nossos wireframes que montamos, vemos que queremos ter basicamente um plano de fundo simples e, essencialmente, ter uma foto do usuário aqui com o nome e sobrenome, pequeno X. Para fechar a janela aqui ou fechar o menu ou o perfil. Alguns botões para eles passarem por páginas diferentes. Da página Contagem ao histórico de pedidos de pagamento, atualizando o vestido e, finalmente, para a lei Yacc do aplicativo. Então, queremos ir em frente e montar uma foto de perfil, uma pequena caixa de texto aqui, pequeno ícone próximo aqui, e depois o resto dos botões aqui, vamos colocá-los. E eu sei que no meu wireframe aqui não colocamos nenhum ícone no lado esquerdo aqui para essas opções. Mas o que eu quero fazer é ir em frente e, na verdade, adicionar alguns ícones a eles enquanto estamos projetando esta página. Vamos voltar ao XD e configurá-lo aqui em nossa página de perfil. Já o tenha pronto para ir com nossa página de perfil selecionada ou com a prancha de arte em si. Vou seguir em frente e abrir nossas bibliotecas e depois seguir em frente e selecionar o axon uma cor para o plano de fundo. No momento, um pequeno problema que temos é que nossa barra de status agora é a versão escura. E então nós realmente queremos que a versão light seja uma pequena dica aqui. Claro, podemos voltar aos nossos arquivos apple e puxar essa versão branca ou a versão light dessa barra de status. Mas há uma maneira fácil de contornar isso. E isso é para selecionar nossa barra de status aqui. E vou apenas alternar pelo painel de duas camadas e garantir que o tenha selecionado. E então vá em frente e dê um preenchimento branco que fará a mesma coisa aqui. Isso parece muito melhor. Queremos um pequeno ícone X fechar aqui é vamos projetar isso criando duas linhas. Então, vou seguir em frente e ampliar esta área aqui. Basta criar duas linhas. Vou fazê-los 35 pixels de largura. E vou seguir em frente e mudar a cor da borda para quatro pixels e fazer uma tampa arredondada e uma cor branca. Vou seguir em frente e duplicar isso ao pressionar o comando D. Para um deles, vamos definir um ângulo de 45 graus. E para o outro, faremos um ângulo negativo de 45 graus. Isso irá em frente e criará um tipo de ícone de aparência x, eu acho, para o nosso botão fechar. E vou selecionar os dois juntos. E talvez mais tarde queremos usar isso em outro lugar. Vamos seguir em frente e criar um componente disso pressionando o Command K. Então este é o componente principal e vamos apenas ir em frente e arrastar este, já que é um componente médio aqui para os meus componentes . Coloque-o aqui por enquanto. Então vou em frente e voltarei para a nossa página de perfil e de nossas bibliotecas, vamos seguir em frente e arrastar esta aqui. Não temos um nome para isso. Vamos prosseguir e renomeá-lo. Botão Fechar. Só para que seja um pouco mais organizado aqui. Vou colocar isso em algum lugar aqui. Não queremos ser, não queremos que fique muito perto do topo e também não queremos ser muito baixos. É isso. Agora precisamos de uma pequena elipse. Então vamos fazer E no nosso teclado e arrastar uma pequena elipse aqui para nossa foto de perfil. E então vamos apertar a tecla T no nosso teclado e criar uma pequena caixa de texto aqui, primeiro e último aqui. Por enquanto vamos, não vamos colocar nenhum dado de amostra voltará mais tarde para fazer isso. Mas, por enquanto, estou apenas criando os campos que precisamos. E vou criar este, deixar um espaçamento de 20 pixels. Acho que meu ícone de perfil é um pouco grande demais, então vou seguir em frente e reduzi-lo para 80 pixels de largura e altura. Vá em frente e alinhe isso no meio disso. Lá vamos nós. Para minha fonte aqui vou seguir em frente e selecionar. Vamos voltar aos nossos conjuntos de tipos. Vamos selecionar o cabeçalho h3. Cabeçalho três, parece bom. E vou mudar o preenchimento para branco. Vamos seguir em frente e criar. Vamos ver quantos botões precisamos? 12345. Vamos seguir em frente e criar cinco botões ou incidências, nossos botões aqui e depois bem-vindos de volta na próxima palestra. Para completar esta página. Vamos selecionar nosso botão que temos aqui. Vamos seguir em frente e encontrar o botão realizado aqui. Vamos seguir em frente e centralizar isso ao longo da nossa página. E eu vou seguir em frente e realmente trazê-los para combinar com o mesmo tipo de pixels do lado esquerdo aqui. E vou seguir em frente e duplicar isso várias vezes e usar Shift e as teclas de seta para baixo para derrubá-los. Então precisamos de cinco botões aqui, 12345. E então eu vou seguir em frente e apenas selecionar todos eles e trazê-los um pouco para baixo. Vou agrupá-los para poder usar pilhas. Então, vamos seguir em frente e ativar pilhas apenas para que possamos definir facilmente o espaçamento entre elas. Então eu quero definir um espaçamento de, acho que 15 pixels pareciam bons. E, claro, queremos que seja vertical e não horizontal. Vamos seguir em frente e fazer isso e deixá-lo como está. Acho que isso parece bom por enquanto. Em seguida, vamos voltar na próxima palestra para atribuir esses botões, título e criar uma versão diferente que tenha um ícone também. 59. Como adicionar ícones: É hora de adicionar alguns ícones aos nossos botões e em seguida, ir em frente e encerrar ou uma página de perfil. Eu pessoalmente adoro usar este site chamado flat icon.com permite que você acesse milhões de ícones vetoriais e adesivos que você pode usar gratuitamente. Contanto que você dê a atribuição correta aos autores ou aos criadores desses ícones. E é ótimo porque você pode procurar coisas. Digamos que você esteja trabalhando em um ícone de perfil. Você pode pesquisar o perfil e você será atingido com toneladas de ícones de perfil e vetores e assim por diante. Eles podem baixar facilmente e usá-lo em seu projeto. Já fui em frente e baixei os ícones que precisamos para nossa página de perfil. E eu os coloquei na pasta Ícones para os recursos desta palestra ou deste projeto. Sob a página de perfil deve ser capaz de encontrar esses cinco ícones SVG que podemos usar para nossos botões de página de perfil. Mas as primeiras coisas primeiro, vamos avançar e configurar um novo estágio para nossos botões para que possamos usar esse estado ou quatro ícones. Desta forma, temos botões que permitem ícones. Então, vou seguir em frente e passar pelo meu componente aqui. Então vou em frente e selecionarei e criarei um novo estado. Assim. E vamos chamar essa versão lite porque vamos torná-la uma versão leve desta e chamá-la de Ícone à esquerda. Então, nesta versão, vou seguir em frente e primeiro selecionar nosso plano de fundo aqui enquanto mantendo o comando. Percorre nossa biblioteca e selecione essa cor de destaque para o nosso botão. E vamos selecionar o acento para cor. E vou ir em frente e trazê-lo para a orelha esquerda em algum lugar aqui por enquanto. Então vamos seguir em frente e arrastar um desses ícones. Vamos fazer a contagem de um aqui e trazê-lo, indo trazê-lo para fora daqui. Então vou seguir em frente e apenas mover este. Mova para dentro do botão aqui. Vamos seguir em frente e selecionar o retângulo e o ícone. Alinhe-o ao meio verticalmente. E eu farei a mesma coisa com os textos dos botões também, mas isso já deve estar centralizado. Então eu quero que este tenha 15 pixels da esquerda. E eu quero que meus textos de botão sejam 15 pixels do ícone. Parece bom. Agora, para o ícone, vamos seguir em frente e também mudar o preenchimento para esse sotaque também. Como este é um ícone SVG, podemos mudar a cor facilmente. Esse não é o caso do ícone PNG. Então, quando você está usando ícones, é melhor usar o SVG por esse motivo. Uma última coisa enquanto estamos aqui, vamos seguir em frente e garantir que nosso texto aqui esteja alinhado também. E então podemos voltar e vamos voltar para nossa página de perfil. Vou selecionar cada um e selecionar a versão light com um ícone à esquerda. A mesma coisa aqui. Até que todos eles tenham essa versão. E vou seguir em frente e alterar o botão deste botão textos aqui para contabilizar. Vamos mudar isso para pagamento, seguido de histórico de pedidos, endereço, seguido pelo último, mas não menos importante, advogado. Enquanto tivermos esse botão de pagamento selecionado, vou seguir em frente e selecionar o ícone da conta aqui. Enquanto você tiver selecionado, vamos seguir em frente e arrastar o cartão de crédito SVG e aqui. Então agora esse Deus secou no botão em si, que é o que queremos. E vou colocá-lo diretamente em cima do ícone do perfil, que é o que devemos tê-lo. E, em seguida, exclua o perfil ou o ícone da conta. Por fim, vamos ir em frente e atribuir esse sotaque à cor. Lá vamos nós. Agora, para o histórico de pedidos, a mesma coisa. Vá em frente e selecione o ícone da conta, verifique se ele está selecionado no painel de camadas. E então arraste desta vez o ponto SVG e aqui, mova-o para dentro. Estou muito feliz com o tamanho do ícone, então certifique-se de ter um tamanho semelhante para seus ícones. Este é 22 por 20 para ir em frente e excluir o outro. E, claro, selecionado, vá para Cores, selecione x e dois. Estamos quase acabando aqui, mais dois botões e estamos prontos para ir. Então, vamos em frente e selecione o ícone da conta aqui. Vá para nossa pasta e arraste o ponto da caneta SVG. Arraste para cima. Agora você pode ampliar para tornar um pouco mais fácil arrastar as coisas. Nós vamos este, selecionamos este e atribuímos um acidente à cor. E por último, mas não menos importante, gostei do ícone da sua conta aqui. Arraste o SVG de logout. O quê? Este tem, cole-o como um ícone enorme. Vamos prosseguir e bloquear as proporções aqui e alterar a largura para 22 pixels. E nós o movemos para cá. Isso parece bom. Agora altere as greves e vá para o painel Camadas, conta e exclua. Só vou garantir que este esteja centrado porque parece um pouco desligado agora. Um pouco, acho que é um centro ou o mais alinhado com o meio possível. Lá vamos nós, são nossos botões para a página de perfil. Acho que parece bom. ir em frente e derrubar um pouco mais. Acho que em algum lugar aqui ficará bem. Talvez na verdade pensando, eu possa adicionar mais espaçamento, talvez torná-lo 20 pixels entre eles. Acho que isso é muito bom. Agora, uma coisa a observar é que, como fizemos alterações nesses botões e havia instâncias de componentes, substituímos todos eles. Então, embora os ícones em si não mudem entre eles, se ainda voltarmos aos nossos estados para este ícone de versão light à esquerda, ainda podemos mudar as coisas. Por exemplo, podemos alterar a localização do botão. E ainda mudará nessa instância também. Se, em algum momento, digamos que decidimos mudar o fundo do botão aqui para que possamos sempre voltar ao nosso botão aqui e ainda fazer essa mudança, porque não substituímos a cor de cada instância. Ele ainda seguirá em frente e o aplicará à minha página aqui. Portanto, sinta-se à vontade para brincar e usar a cor que você gosta. Acho que gosto dessa cor aqui. Então, vou ficar com este em vez da versão light. Dessa forma, posso ir em frente e, na verdade até levar meus textos aqui para remover esta versão light e apenas dizer ícone à esquerda. Então esse é o meu tipo de botão padrão com um ícone à esquerda. Parece bom. Vamos voltar na próxima palestra e trabalhar em nossa página de pagamento. 60. Página de pagamento: É hora de trabalhar em nossa página de pagamento. E vou apenas ir em frente e trazer nossas maquetes para ou os wireframes para ver o que temos. Então, o que eu tinha em mente nesta página é permitir que o usuário veja suas opções de pagamento ou seus cartões premium que eles adicionaram com a capacidade escolher qual deles é o principal, como mostrado com esta pequena marca de seleção aqui. Você pode escolher entre as diferentes opções de pagamento ou elas podem seguir em frente e adicionar uma nova. E se você se lembrar, como exercício, uma tarefa para você, quero que você tenha projetado essa página de pagamento onde o usuário irá em frente e inserirá as informações do cartão de crédito nessa página. E agora vou te dar mais detalhes sobre o que você precisa para essa tarefa. Mas antes de chegarmos a isso, vamos criar essa página de pagamento juntos. O que queremos aqui é simplesmente um retângulo mostrando os últimos quatro dígitos desse cartão. E, em seguida, uma pequena marca de seleção para indicar que este é o cartão principal selecionado. Precisamos de uma vantagem aqui, ícone de volta e um botão Adicionar na parte inferior. Então, vamos continuar. Vamos abrir o XD. Temos nossa página de pagamento. Vamos seguir em frente e nos livrar desse título aqui e mudar nossa grande obra para pagamento. Para o botão Voltar aqui, vamos escrever de volta. Já temos um ícone de mais aqui, o que é ótimo. E agora vamos avançar e projetar um retângulo aqui. E vou fazer este com cerca de 65 pixels de altura. Se você não tiver exatamente 65 pixels, você pode ir em frente e soltar a qualquer momento e usar comando e as teclas de seta para encurtar ou tornar seu retângulo mais alto. Posso fazer a mesma coisa com uma tecla de seta para a direita para torná-la mais longa ou a tecla de seta para a esquerda para torná-la mais curta. Então, com isso dito, vamos seguir em frente e fazer este retângulo 29 pixels de cada lado. Então, vamos usar o novamente, as teclas de seta de comando para mover isso até que tenhamos a parte que queremos. Parece bom. Então vou em frente e arredondar as fronteiras e definir o raio do canto da fronteira para dez. Vou dar o fundo, o acidente uma cor. E então vou adicionar um texto aqui usando o Alt e o oitavo aqui. Vou gerar esses pontos, ícones e depois digitar 1234. E isso é meio que representando os últimos quatro dígitos do cartão. Normalmente, é assim que ele é mostrado em aplicativos. Assim, podemos ir em frente e também dar nosso texto lá. Vamos fazer o corpo em um meio e mudar a cor da fonte para o próximo. E três. Vou seguir em frente e colocar este no lado direito aqui e alinhá-lo como está. Vou seguir em frente e duplicar esse texto, colocá-lo à esquerda. E para este, vamos seguir em frente e deixá-lo alinhá-lo. E vamos escrever o que é esse cartão. Vamos fazer visto. E em vez de uma pequena marca de seleção, estou realmente pensando que podemos ir em frente e apenas escrever se este é o cartão principal aqui. Por que não movemos isso para cima, duplicamos esse texto, o derrubamos e usamos a legenda têxtil aqui. Vamos seguir em frente e mudar a cor para o axônio três. E aqui vamos escrever primário em todas as maiúsculas. Assim. Vou apenas ir em frente e alinhar isso ao meio e ter 25 pixels do lado esquerdo aqui. Acho que parece bom. Vamos ir em frente e agrupá-los , arrastando e selecionando o comando G. Vamos em frente e movê-lo um pouco para cá. Duplique isso. Traga isso aqui. Para este, iremos em frente e removeremos este primário e derrubar o visto. Dessa forma, o usuário sabe quais são os cartões primários. E se eles quiserem tornar este cartão principal ou outro cartão principal, eles podem ir em frente e selecionar esse cartão. E na página de detalhes do pavimento eles podem ir em frente e fazer que o alimento primário goste ou podemos até fazer algo onde eles podem selecionar o cartão e uma folha de ação como esta pode aparecer perguntando se eles querem substituir isso como suas opções padrão de pagamento. Existem realmente infinitos. Antes de agora. Temos nossa página de pagamento quase concluída aqui. Só precisamos de um botão na parte inferior para que eles adicionem um novo cartão. Então, vamos em frente e encontre o botão. Arraste um pelo meio e alinhe-o para baixo com 35 pixels da parte inferior e altere isso. Mas em texto para adicionar cartão. Cartão adicionado clicando nesse. Agora, vou dar-lhe essa tarefa montar a página de pagamento. Sugiro que você dê uma olhada em alguns exemplos ou inspirações diferentes para criar essa página de pagamento. Um que abrimos aqui desde entregue no celular. Então, aqui você pode ver que temos um número de cartão e, claro, você pode adicionar outros campos, como o nome do titular do cartão, a data de validade, o CVE e assim por diante. Então faça uma pausa aqui, Google, alguns pagamentos, página de pagamento móvel para obter inspiração. Com isso dito, deixarei essa página com você e se você quiser meu feedback e enviá-lo para hello clever em gmail.com. E também lhe fornecerei feedback e você pode ir em frente e fazer o upload do seu projeto. E eu adoraria dar uma olhada, mas sim, sinta-se à vontade para fazer uma pausa aqui, trabalhar nessa página. Você pode ir em frente e duplicar sua prancha de arte aqui e colocá-la talvez em outro lugar, talvez aqui em cima ou em outro lugar. Assim que você terminar isso, vamos seguir em frente e seguir em frente para nossa página de localização. 61. Página de localização: Estamos prontos para trabalhar em nossa página de localização. Vá em frente e abra nossos wireframes para ver o que temos aqui. Claro, temos a busca pelo endereço aqui. O que podemos fazer aqui é que podemos ir em frente e trocar essa barra de navegação por uma dessas pesquisas. E então iremos em frente e usaremos nossos plug-ins para criar um mapa nas palestras a seguir. E então precisamos de uma caneta para mostrar seu endereço no próprio mapa, bem como um pequeno tipo de retângulo para mostrar a eles o endereço exato que eles inseriram, bem como um pequeno botão para eles encontrarem sua localização atual no mapa. Um pequeno botão salvar aqui em baixo. Para o mapa em si, vamos seguir em frente e usar plugins e as seguintes palestras para gerar um mapa em segundo plano aqui. Mas, por enquanto, vamos em frente e colocar esses elementos na tela. E então iremos de lá. Então, primeiro, vamos em frente e trocar essa barra de navegação que temos. Quatro. Este aqui mesmo. Vamos seguir em frente e excluir esse e colocar este em vez disso. Você notará porque colocamos essa barra de navegação em nosso painel Camadas na parte superior da barra de status. Atualmente, ele está cobrindo a barra de status. Podemos ver isso em nosso painel Camadas também. Outra maneira de reorganizar outras camadas além de arrastá-las para cá. Você pode realmente ir em frente e clicar com o botão direito do mouse e clicar em Enviar para trás, que iremos em frente e enviaremos uma camada de volta ou enviaremos para trás. Vamos em frente e enviaremos esse objeto até a camada mais inferior dessa placa de arte. Então ele pode ir em frente e fazer o contrário trazendo as coisas para a frente e trazendo as coisas para a frente. Como um atalho, você pode fazer o comando abrir o colchete para derrubar camadas ou comando fechar o colchete para trazer camadas para cima. Vou seguir em frente e usar o suporte aberto de comando, levar essa camada todo o caminho para baixo. E então iremos em frente e mudaremos o título para endereço. Lá vamos nós. Vamos ver. Nós realmente não precisamos das costas aqui. Vamos seguir em frente e nos livrar disso e apenas alteramos esse botão de ação aqui para terminar. Lá vamos nós. Podemos pesquisar o endereço deles aqui. Eles podem clicar em Concluído quando terminarem. E então vamos seguir em frente e arrastar o botão das minhas bibliotecas aqui com 35 pixels para baixo e, em seguida, alterar o título para salvar o endereço. Muito vá. Em seguida, a partir de seus recursos, na pasta Ícones, você pode encontrar a pasta de localização onde você pode abri-la e arrastar esses dois ícones em nossa tela. Perfeito. Este aqui. Vamos em frente e colocá-lo em algum lugar aqui embaixo e dar-lhe um espaçamento generoso do botão. Este botão é para ajudar o usuário a se encontrar no mapa. E então vamos seguir em frente e dar esse botão ou ícone de localização cor secundária. Vamos tentar o acidente um. A mesma coisa para esta caneta aqui. Vamos usar este para mostrar ao usuário o vestido que ele está olhando no mapa. Então, vamos apenas colocar no centro e dar-lhe também os atos e uma cor. Vamos ver o que mais precisamos? Estamos quase acabando aqui. Só precisamos do nosso retângulo com nosso endereço aqui. Então, por que não vamos em frente e criamos um retângulo. E vou apenas ir em frente e alinhar isso com o meu botão lá embaixo. Lá vamos nós. Vou seguir em frente e sair de lá. Vou dar a isso um raio de canto de dez pixels. Junto com um preenchimento do meu acidente, uma cor substitui muito perto do pino aqui. E então vamos seguir em frente e criar uma caixa de texto. E aqui para este, vamos seguir em frente e arrastar um texto para cá, porque pode ser de várias linhas. Então vamos seguir em frente e digitar um endereço falso aleatório. Mas em um formato completo. Então, faremos correios da cidade. Isso deve ser bom. Vou para a esquerda alinhar isso aqui. E vamos definir isso como a legenda ilustrada. Nada que seja muito pequeno. Então, vamos fazer o corpo um. Talvez o corpo um médium funcionasse ainda. E então, para o preenchimento, vamos fazer o acidente três. Vamos ir em frente e centralizar isso aqui e esticá-lo no caso de haver uma segunda linha. Acho que isso parece bom por enquanto. Por que não voltamos na próxima palestra para criar um mapa usando plugins para esta página. 62. Como usar plugins: Ele mencionou brevemente os plugins e como eles podem nos ajudar em nossos projetos e tornar nosso processo de design muito mais rápido. Nesta palestra, vamos realmente ver o poder disso e usar os plug-ins disponíveis para gerar um mapa para nossa página de localização aqui. Para acessar os plugins , vá até a barra de menus aqui e clique em plug-ins e acesse uma vez que você instalou ou gerencie ou navegue. Claro, isso pode estar em um menu de hambúrguer se você estiver no Windows. Caso contrário, você também pode acessar o painel Plug-ins dele aqui ou pressionar Shift Command P. E iremos em frente e abriremos a mesma coisa. Em seguida, você pode ir em frente e clicar em Discover plugins para descobrir os plug-ins disponíveis no mercado. Disponibilizaram toneladas de desenvolvedores que reuniram todos esses plugins que você pode usar para gerar ícones para seus designs e apenas acessar uma tonelada de plug-ins que são úteis para diferentes casos de uso. Se você deseja automatizar algo ou se deseja encontrar plugins para publicar e pendurar seus projetos. Existem muitos plug-ins disponíveis que você pode navegar. Vá em frente e navegue por todos os plugins disponíveis daqui, e realmente passe por isso e veja o que cada um pode fazer. Por exemplo, este aqui. Você pode usá-lo para gerar avatares para um ícone de perfil, ou você pode ir em frente e obter plugins clicando em. Venha aqui assim que você abrir, assim. Depois de instalar, ele pode pedir sua senha. Então vá em frente e insira isso e ele seguirá em frente e começará a instalar esse plugin. Você pode acessar esse plugin esticando o perfil do usuário. Estou aqui em cima com plugins em destaque. E nesta barra de pesquisa, queremos instalar isso assim que pudermos usá-lo em nossa página de perfil. Mas, por enquanto, vamos em frente e procurar mapas. Acho que quero experimentar este mapa extravagante e ver pior para nós, vamos em frente e instalar este plug-in de mapa chique. E se você não conseguir encontrar este, vá em frente e pesquise mapas extravagantes e você pode até pesquisar o nome do autor e ele deve aparecer. Parece que também tem classificações decentes , o que é ótimo. Você pode ver as classificações de diferentes plugins deixados pelos usuários. Então, isso está instalado aqui. Agora, podemos voltar ao nosso XD. Estamos inserindo coisas aqui. E agora em plugins, você pode vê-lo, os plug-ins que não instalamos. Vamos seguir em frente e clicar nesse plugin de mapas extravagantes. Para que este plugin funcione, você só precisa ir em frente e criar uma conta Mapbox, que é gratuita. E então você seguirá em frente e inserirá seu token de acesso aqui. Este plug-in requer isso para gerar um mapa para você. Depois de fazer isso, ele carregará esta página. Vá em frente e preencha este formulário para se inscrever em uma conta. Depois de fazer isso em sua conta, você poderá encontrar tokens de acesso para ir em frente e copiar esse token público padrão no qual você pode usar para gerar mapas que estão usando esse plugin. Então, depois de copiar isso, vá em frente e cole-o aqui no XD. E depois de terminar, você pode ir em frente e navegar diferentes cidades daqui que você pode inserir. Você pode criar um destino surpresa, mas por enquanto vamos selecionar Nova York. Em seguida, ele seguirá em frente e gerará esse mapa para nós. Ele nos dirá qual nível de zoom queremos. Então, queremos o tipo de nível de zoom próximo em algum lugar aqui. Talvez possamos até ter um marcador gerador, mas já temos isso aqui. E podemos escolher um tipo de mapa de satélite, diferentes tipos de mapa com base no que estamos procurando. Vamos apenas usar um padrão aqui. E então ele precisará criar um retângulo para o mapa entrar. Então, vamos seguir em frente e criar um retângulo aqui a partir do topo até aqui. Retira-o de lá e , em seguida, clique em aplicar mapa. Lá vamos nós. Então, temos o mapa gerado. Agora, quero usar o Command Shift e o colchete aberto para enviá-lo até a parte de trás das camadas. Perfeito. Só precisamos de alguns toques finais e, em seguida, esta página deve ser boa. Por que não voltamos na próxima palestra para polir esta página e ir de lá. 63. Como terminar nossa página de localização: Estamos prontos para concluir nossa página de localização. Então, só precisamos adicionar algumas sombras aqui para separar o primeiro plano do plano de fundo aqui. E devemos ser bons em ir primeiro primeiro, vou seguir em frente e sair dos plugins lá e aumentar o zoom. Vá para o nosso painel Camadas aqui. Lá vamos nós. Vou começar com esta caneta e apenas clique duas vezes lá para que eu possa selecionar minhas duas formas aqui. E enquanto mantenho o turno, selecionei ambas as linhas aqui ou formas. Vou seguir em frente e habilitei a sombra solta. Para a sombra, vamos fazer um borrão de dez e um y de cinco. E talvez faça isso, é um pouco mais escuro. Então eu acho que algo como 20% deve funcionar. Vamos seguir em frente e aplicar a mesma coisa para o plano de fundo desta caixa de texto aqui. Faça uma sombra com y de cinco e um desfoque de 10, 20% de opacidade. Isso parece bom. Agora, notei que este retângulo tem uma borda, então vou em frente e remova isso . Nós realmente não precisamos disso. Então vamos seguir em frente e aplicar a mesma sombra a este ícone de cursor aqui. Então, vou clicar duas vezes para selecionar minha sombra solta habilitada com cinco sobre o porquê, dez como desfoque e 20% como opacidade. Acho que isso parece bom. Está ligeiramente separado dos objetos aqui estão ligeiramente separados agora do fundo, que é exatamente o que queremos. Agora, com esta página concluída, estamos prontos para passar para nossa página de histórico de pedidos, que se você se lembrar, durante os wireframes eu dei esta página como um exercício para você concluir. Então vá em frente e trabalhe nesta página. Então, para ter uma ideia do que você precisa nesta página, essencialmente queremos uma lista de pedidos que os usuários fizeram no passado. Então, o que você precisa fazer é criar um novo design de placa de interface do usuário. Neste, você seguirá em frente e incluirá algumas das informações do pedido. Você pode incluir coisas como o total, o restaurante que eles pediram e talvez quantos itens estavam nessa ordem. E, claro, a data e hora em que eles fizeram esse pedido. Portanto, se você colocar esses quatro conjuntos de dados em uma interface de usuário de cartão como esses aqui, você pode ir em frente e até mesmo duplicar essa interface do usuário do cartão e criar um componente a partir dela, e usá-lo em sua página de histórico de pedidos. Portanto, a ideia é que os usuários possam ver seus pedidos anteriores daqui com esses quatro conjuntos de dados importantes na interface do usuário do cartão. Então, novamente, os quatro conjuntos que você deseja é o nome do restaurante, o pedido do valor total em dólares para o pedido. Talvez quantos itens estivessem em seu pedido, e qual data e hora, o local que encomendou. Então vamos fazer uma pausa aqui e eu vou deixar você fazer isso sozinho. E então, na próxima palestra, também faremos isso juntos. 64. Página de pedidos anteriores: É hora de montar nossa página de histórico de pedidos. Espero que você tenha tido a chance juntar algo para isso também. Se não, não se preocupe, faremos isso juntos nesta palestra. E isso deve basicamente encerrar nossa maquete para este projeto de design móvel. E então estamos prontos para avançar lentamente com exportação, torcida e prototipagem. Mas antes de fazermos isso, vamos prosseguir e trabalhar em nossa página de histórico de pedidos. E o que eu quero fazer é me livrar desse pequeno título aqui e mudar o título grande para a história, ou podemos realmente fazer pedidos anteriores. Acho que isso soa melhor. Com isso, vou seguir em frente e alterar esse histórico de pedidos para também passar os pedidos. Acho que isso soa melhor. Vamos seguir em frente e alterar esse botão de ação para trás. Podemos remover este ícone de mais ou podemos permitir que eles criem uma nova ordem pressionando este ícone de mais. Então eu acho que vamos deixar isso lá, caso eles queiram, digamos que comece um novo pedido a partir desta página. Agora, vou ir em frente e copiar um dos cartões de restaurante aqui. Vou usar isso para criar um novo componente e inserir esses quatro pontos de dados sobre os quais falamos na palestra anterior. Vamos nos certificar de que selecionamos todas as camadas aqui no painel Camadas. E então vamos em frente e copie um aqui e vamos usar o Command K para transformar isso em componentes. Vamos renomear isso para encomendar o carrinho. Sabemos que esse é o cartão para pedidos. Em vez dessa imagem aqui, quero ir em frente e criar um retângulo em cima dela. E pegue a mesma largura e altura e depois dê segurando Alt, vou dar-lhe o mesmo raio de canto de, acredito que foram 12 pixels. Então, vamos seguir em frente e garantir que este ponto seja de 12 pixels, assim como este aqui. Perfeito. Vamos remover a borda e dar a isso um preenchimento dessa cor cinza. Você pode inserir esse código hexadecimal como um espaço reservado para nossas imagens. Com isso, podemos ir em frente e nos livrar dessa camada de imagem aqui. Agora temos um espaço reservado para a imagem do nosso restaurante. Isso não está totalmente necessariamente na página do histórico de pedidos, você pode removê-lo totalmente de lá. Mas acho que é bom para eles verem de qual restaurante eles pediram a comida. Então essa é realmente a sua chamada. Deixará isso onde está, o nome do restaurante. Vamos apenas clicar duas vezes e remover o grupo de classificação daqui e alterar esse cifrão para os valores totais. Então, vamos fazer $1. Em vez disso, o italiano queria que eu inserisse quantos itens eles pediram. Então, apenas como exemplo, vou escrever um item. Por fim, precisamos da data e da hora em que fizeram esse pedido. Então, por que não movemos esses dois para cá, certifique-se de que estão alinhados à esquerda e, em seguida, vamos em frente e duplicamos isso. E vamos seguir em frente e garantir que o espaçamento seja o mesmo, 14 pixels e este estará alinhado e vamos escrever o mês, o dia, o mês e o ano. Então, a hora aqui, apenas como um espaço reservado, para que o usuário possa ver quando ele fez esse pedido. Acho que parece muito bom. Ainda temos espaço se você quiser adicionar outra pessoa aqui, outro ponto de dados, mas acho que por enquanto isso é muito bom. Agora, para a imagem do restaurante, acho que podemos torná-la um pouco menor, já que não é tão importante aqui. E então podemos ir em frente e mover esses itens para cima. Só estou segurando Shift. Lá vamos nós. Vamos em frente e encolher todo o retângulo aqui também. Parece bom, muito limpo. Podemos usar isso agora em nossa página de histórico de pedidos. Vamos voltar à nossa página de histórico de pedidos. Clique no histórico de pedidos. E então vamos às nossas bibliotecas daqui e descobrir que parece que eu não nomeei ou componentes corretamente. Então, vamos em frente e nomeie este cartão de pedido. Lá vamos nós. Agora, em nosso histórico de pedidos, vou arrastar esse carrinho de pedidos aqui. Perfeito. Então podemos ir em frente e usar a grade de repetição aqui para repetir isso várias vezes. E vou remover esse espaçamento entre 0 porque acho que o espaçamento, já temos isso muito bom. Acho que podemos até adicionar um novo botão aqui, aqui em cima. E para este, vamos começar um novo trimestre. Lá vamos nós. Se eles quiserem iniciar um novo pedido, eles também podem fazer isso a partir daqui. Agora, se você usar essa grade de repetição para criar novos cartões, esse botão colidirá com a exibição. Então eu vou criar um pouco de fundo gradiente aqui para meio que desaparecer qualquer cartão. E podemos fazer isso criando um retângulo aqui na parte inferior da tela. Esse tipo de cobre o botão até aqui. E vamos tirar essa camada para baixo para que o botão fique em cima dela. Vamos seguir em frente e remover a borda primeiro e alterar o preenchimento para, em vez de uma cor sólida, seja um gradiente linear. Agora, para esta cor aqui, o nó inferior, vamos defini-la como branca. Para o outro nó, vamos configurá-lo para. Vamos deixá-lo em peso e vamos reduzir o OPCD até 0. Vou seguir em frente e tentar isso um pouco mais alto. Acho que isso é muito bom. Agora, como você pode ver, atrás desse botão, qualquer cartão que aparecer desaparecerá , que é o que queremos. Não queremos que esse botão colida com esse cartão. E então eu acho que isso parece muito bom. E agora, para nossos dados, vamos voltar na próxima palestra ou duas entradas, alguns dados de amostra aqui. Só uma coisa que vou fazer é voltar para o cartão aqui e substituir isso por um nome genérico de restaurante. Vamos apenas fazer o nome do restaurante porque é um componente. Nós realmente não queremos um nome de restaurante específico lá. E então eu acho que isso parece bom. Agora vamos voltar na próxima palestra para inserir alguns dados de amostra aqui. 65. Como adicionar dados de amostra com o Google Sheets: É hora de inserir alguns dados em nossa página de pedidos anteriores. Você pode entrar e preencher cada cartão com alguns dados de amostra executados e adicionar algumas imagens aleatórias para diferentes restaurantes. Mas nesta palestra eu quero mostrar algo muito legal que eles possam fazer com os plugins que o ECC fornece. E vamos usar um plugin específico chamado Planilhas Google, que permitirá que você realmente insira dados de uma planilha do Google em seu design. E você verá o quão legal e útil isso pode ser para inserir alguns dados de amostra em seus projetos. Aqui, reuni uma folha com cinco restaurantes e conjuntos de dados, incluindo o dia, o preço total de itens e até mesmo a imagem e o nome do restaurante aqui. Vamos usar esta planilha para inserir alguns dados de amostra em nosso projeto. E para usar esta planilha, você vai seguir em frente e eu vou frente e copiar este link aqui, que também é fornecido sob os recursos deste projeto. Se você passar por dados de amostra, poderá encontrar um histórico de pedidos, link Planilhas Google, dxdy. Se você abrir isso, você pode ir em frente e copiar este link. Devemos abrir esta planilha para você. E vamos usar isso para gerar os dados amostrados. Então, vamos continuar e minimizar isso e voltar para o XD. Agora, para que este plugin funcione, antes de avançarmos e instalá-lo, precisaríamos fazer uma pequena alteração, precisaremos realmente ir em frente e converter nosso componente de volta em um grupo em vez disso, este plugin realmente funcione e use Repeat Grid. Então, primeiro, eu tenho cinco dados amostrados lá. E aqui só temos três com um quarto atrás desta tela aqui. Então o que vou fazer é ir em frente e apenas trazer esta página um pouco e esticá-la. E então vamos avançar e trazê-los para a camada retangular com o gradiente e o botão até a parte inferior da página. E então vamos seguir em frente e usar a grade de repetição para garantir que temos cinco itens aqui. 12345, perfeito. Isso deve ser bom por enquanto. Perfeito. Então, a outra coisa que queremos fazer é ir ao nosso componente para este cartão de pedido, que está bem aqui. E o que vamos fazer é do mouse e desagrupar o componente que vamos seguir frente e, essencialmente, fazer o inverso de criar os mesmos componentes. Então agora isso não é mais um componente. E o que vamos fazer é ir em frente e arrastar isso para aqui em vez do que temos aqui. Então, vamos em frente e exclua este aqui. E vamos seguir em frente e arrastar este em vez disso. Mas primeiro vamos ir em frente e agrupar isso juntos e inserir isso aqui. Basta seguir em frente e manter o espaçamento 25 pixels a partir do topo e garantir que também estamos no centro. Perfeito. E agora vamos usar Repeat Grid e fazer isso mais uma vez. Mas desta vez vou apenas seguir em frente e garantir que também minimizemos seu espaço para 0 aqui. Perfeito. Agora podemos realmente usar esse plug-in. E para instalá-lo, vamos seguir em frente e abrir plugins. Aqui embaixo. Você vai seguir em frente e clicar no sinal de mais. E vamos procurar o Google Sheets. Pressione enter. E o primeiro aqui à prova de água, deve ser o que vamos usar para seguir frente e clicar no botão Obter ao longo de um ano para instalá-lo. Já o tenho instalado, então vou ir em frente e pular esta etapa. Mais uma coisa que eu quero fazer é ir em frente e clicar duas vezes para selecionar este retângulo e renomear essa camada de nosso restaurante de imagens. Por favor, segure-a só para sabermos para que serve isso. Agora, pronto para inserir esses dados de amostra. Então, vamos selecionar todo o grupo Repetir Grade aqui. Não sei onde são plug-ins do painel de plugins. Vamos seguir em frente e clicar no painel Planilhas Google. E então, aqui, ele nos pedirá uma fonte de arquivo para que você possa carregar um arquivo CSV ou entrar no Planilhas Google o que vamos fazer colar link de URL porque estamos trabalhando com um arquivo público sobre lá. Então vá em frente e copie esse link que está disponível nos recursos para os dados amostrados desta página parece que havia algo errado com minhas grades repetidas. Então eu só voltei e li essa parte novamente. Se você vir algo que está lá fora, tome um segundo para consertar isso por si mesmo. Mas, por algum motivo, minha grade de repetição estava usando o mesmo carrinho que aqui, o que não é o que queremos. Queremos este cartão para os pedidos anteriores. Portanto, certifique-se de que você está repetindo grades funcionando corretamente e, em seguida, vá em frente e clique nela. E sob os plug-ins novamente, você queria colar o link do URL e clicar em Importar. Isso pode levar um segundo, pois o plugin está importando todos esses campos. O que queremos fazer é seguir em frente e mapear cada conjunto de dados para o campo correto ou para os ângulos retos corretos. Então, o primeiro retângulo é 17. Nós realmente não precisamos de nada lá como pano de fundo para o nome do restaurante. Vamos seguir em frente e mapeá-lo para o nome do restaurante no Planilhas Google por US$0, queremos ir em frente e mapeá-lo para o preço total. Então, ele mostra o preço total para um item, que é aquele aqui. Vamos seguir em frente e mapear isso para nossos itens. E este campo de data aqui. Vamos seguir em frente e mapeá-lo para a data. E por último, mas não menos importante, para o espaço reservado do restaurante de imagem, que é este aqui como o renomeamos. Vamos seguir em frente e clicar na imagem do restaurante. Nós realmente não precisamos selecionar conteúdo aleatório, caso contrário, o colocaria em uma ordem aleatória. Vamos manter o mesmo pedido e apenas clicar em Aplicar e garantir que você tenha toda a sua grade de repetição selecionada enquanto estiver fazendo isso. Portanto, o plugin funcionará corretamente. Pode levar algum tempo, mas wallah, ele irá em frente e inserirá os dados como esperaríamos. E eu acho que isso parece ótimo. Muito mais rápido do que inserir dados manualmente. E, como você pode ver, as URLs da imagem acabaram funcionando muito bem também. Vou seguir em frente e apenas selecionar minhas camadas aqui e colocá-las usando o comando e os colchetes. E faça com que esta página seja um pouco menor. Em termos de altura. Nós realmente não precisamos que seja tão longo. Apenas certifique-se de que meu putin tenha 35 pixels da parte inferior e ele tem. Perfeito. Então, agora temos nossa página de histórico de pedidos pronta para funcionar também. Vou apenas ir em frente e reorganizar algumas coisas movendo esses quadros de arte aqui para baixo um pouco. Lá vamos nós. Eu incluo esses rótulos, esta folha de ação aqui apenas para manter nossos projetos organizados. E lá temos isso. É assim que você insere dados de amostra usando o Planilhas Google. E com isso dito, nossos projetos praticamente prontos para uso. Vamos voltar na próxima palestra e dar uma olhada em tudo e fazer um retoque final de pequenos detalhes que podemos ter esquecido. E então, a partir daí, iremos em frente e passaremos a exportar este projeto e compartilhá-lo com nossos membros da equipe, colegas ou clientes e assim por diante. Vamos voltar na próxima palestra para polir e encerrar esta maquete. 66. Como fazer o polimento dos projetos: No final de cada projeto, eu gosto de dar uma olhada em todo o projeto, organizou coisas se estiverem fora do lugar ou polir cada página um pouco de onde vejo que podem haver melhorias. E só essa é uma boa prática, mas também permite que você fique atento aos detalhes dos seus projetos. Vamos passar por isso e ver onde podemos fazer algumas pequenas melhorias. Esta palestra juntos. Em termos de organização, acho que fizemos um bom trabalho. Tudo é meio que onde queremos que ele esteja, apenas para manter as coisas organizadas. Vou seguir em frente e trazer esses ativos da Apple para o lado direito aqui junto com meus componentes. Só para manter esses juntos. Nosso esquema de cores, conjuntos de tipos, tudo parece ótimo. Aqui estão os componentes organizados aqui. Temos um logotipo extra aqui, então vamos seguir em frente e excluí-lo. Agora. Vamos trabalhar do nosso caminho da tela inicial para todo o caminho para a direita. E então, no topo, vamos para a página de perfil até a direita também. Então, começando com a tela inicial, acho que as coisas ficam ótimas aqui. página de login parece boa. Vamos apenas garantir que o espaçamento ou tudo esteja correto e parece que as coisas estão muito boas. Vou apenas ir em frente e espaço um pouco minha Senha Esqueci, talvez 15 pixels do campo e derrubar esse botão um pouco também. E faça isso 30 pixels da senha esquecida. Por aqui. Vamos apenas seguir em frente e definir a política de privacidade como semi-ousada, bem como nossos termos de serviço. Lá vamos nós. Nossa verificação por telefone parece muito boa. Apenas derrube isso. Tudo está alinhado corretamente. Podemos ir em frente e verificar isso também. Verifique novamente o alinhamento de tudo aqui. Uma coisa que eu queria fazer é ir em frente e copiar este botão Menu e colocá-lo em minhas outras barras de navegação também. A partir daqui, também poderá acessar o menu. O discurso parece bom para mim. Em termos de nossa página de menu, a única coisa que eu quero fazer é apenas espaciar as coisas um pouco mais. Então, vamos ir em frente e apenas espaciar as coisas também. 25 pixels. Por aqui. Vou seguir em frente e apenas selecionar a pilha inteira aqui e mudar esse espaçamento para 25 daqui. A mesma coisa para minha pilha de desertos. Faça 25 em vez de 15. A razão para isso é que queremos mais espaço para respirar. Queremos mais espaços em branco. Não queremos que as coisas fiquem muito amontoadas aqui. Vamos seguir em frente e esticar essa página de menu um pouco mais para que ela se encaixe bem em tudo. Vamos seguir em frente e alterar o número de pedidos deste item para um. E a mesma coisa aqui. Esquecemos de fazer isso na palestra anterior, então vamos fazer isso aqui e verificar novamente o espaçamento de tudo. E a mesma coisa aqui. Vou seguir em frente e derrubar isso um pouco. Portanto, são 25 pixels no espaçamento. Isso parece muito bom para mim. Ou a página Progress do pedido também parece boa. Talvez eu só derrube isso um pouco mais, um pouco mais espaçado. E tudo o resto parece bom. Vamos voltar e adicionar uma pequena animação aqui mais tarde. Vamos ficar bem. E no topo aqui, em vez de ter o primeiro e o ano passado, vamos apenas ir em frente e inserir um nome aleatório. Então, vamos primeiro à esquerda, alinhá-lo, certo. John Doe. Para o ícone de perfil aqui. Vou usar esse plugin que ele instalou anteriormente no perfil de usuário chamado. Se você não tiver o Ticket pause aqui para instalar esse plug-in, mas isso nos permite inserir alguma foto aleatória aqui e podemos ir em frente e até isolar o gênero. Agora podemos ir em frente e selecionar a elipse aqui e clicar em inserir foto aleatória. Se você não gosta da foto, você pode ir em frente e continuar pressionando até ter quatro. Você gosta de usar. O plugin aqui gerará quantas fotos você quiser. Vou deixá-lo assim. E então o botão R aqui parece bom. Tudo o resto parece bom nesta página é uma página de pagamento que parece boa. Ou a página de endereço também parece boa. E nossa página de Pedidos anteriores também parece boa. Ou então parece bom aqui. E acho que isso é muito bom para o nosso projeto aqui. É bem polido e muito bom. Acho que não há mais nada que precisemos acrescentar neste momento. Agora vamos voltar na próxima palestra para falar sobre redimensionamento responsivo, que permite que seu design seja responsivo a diferentes tamanhos de dispositivos. Vamos fazer isso juntos e depois a próxima palestra. 67. Resize responsivo: Enquanto estamos nos preparando para exportar nosso projeto e prototipagem. Também quero mostrar mais um recurso interessante que o adobe XD possui. Isso é realmente útil quando se trata de trabalhar com vários tamanhos de tela e tamanhos de dispositivos, e especialmente quando você está trabalhando em um projeto da web. Mas o que isso, o que esse recurso chamou de redimensionamento responsivo, permite que seus designs funcionem em vários tamanhos de tela, em vez de apenas aquele aqui. momento, configuramos esse tamanho de tela do iPhone aqui para nossas obras de arte, e elas são todas iguais em termos de largura. Particularmente sugira como exemplo, se nossos dispositivos funcionarem um pouco maiores, agora você vê nossos projetos, um certo tipo de desmoronar, realmente não preencheram toda a seção. Então, se você começar a esticar a largura de nossos dispositivos com base no dispositivo que você está vendo. Este design está ligado. O design pode não começar a funcionar. E é por isso que a adobe reuniu esse recurso chamado redimensionamento responsivo. E o que eu realmente gostei XD é que ele faz muito do trabalho para você usando o modo de redimensionamento responsivo automático. Portanto, essencialmente, com o redimensionamento responsivo, você pode permitir que seus elementos dentro da tela possam, como o nome sugere, redimensionar com base no tamanho da tela. Por exemplo, em sua página de menu de perfil, vamos seguir em frente e ativar o redimensionamento responsivo. E então o que acontecerá é que agora nossos objetos neste quadro de arte, iremos em frente e redimensionaremos como um encolhimento ou expandiremos o tamanho da minha tela. E como você pode ver, o modo automático faz um bom trabalho. Há certas coisas que podem ser melhoradas, mas, no geral, é muito bem feito em termos de como ele lida com a resposta de redimensionamento. Mas quando se trata de certos elementos, como esse nome aqui e o texto nesses botões. Podemos ir em frente e corrigi-los para que ele realmente funcione perfeitamente. A maneira de fazer isso é realmente seguir em frente e clicar em um determinado elemento nesse quadro de arte. E então, aqui, como podemos ver, para cada elemento, adicionamos uma opção automática em termos de redimensionamento responsivo qualquer opção manual ou podemos ir frente e, por completo, desligar isso. Mas, por padrão, todos os tamanhos responsivos estão no modo automático para cada objeto dentro do seu quadro de arte. Mas se você for em frente e clicar nesta opção manual, agora, de repente, você obtém algumas opções para o seu objeto aqui para ser redimensionado e manualmente por como você gostaria. E usando essas opções aqui, podemos ir em frente e corrigir esse objeto em determinados sites como uma tela. Então, essencialmente, se fizermos essa opção aqui, quando ela ficar azul, isso significa que agora esse objeto será fixado à esquerda. E, claro, podemos combinar várias correções, como a esquerda e a parte superior. Agora, o que acontecerá é que esta caixa de texto, independentemente da largura e da altura desta prancheta, sempre manterá esse determinado pixel do lado esquerdo neste determinado pixel do topo do design. Com essas opções ativadas. Agora, se formos em frente e expandirmos ou projetamos, você verá que a caixa de texto não se moverá porque está mantendo esse espaçamento do lado esquerdo e superior. Da mesma forma, se você diminuir o design, como você pode ver, a caixa de texto agora não se moverá mais para cima. Vamos seguir em frente e manter onde ele está em termos de espaçamento a partir do topo. Mas se você for em frente e desabilitar isso agora e apenas corrigir à esquerda. Agora, como você pode ver, a caixa de texto começará a se mover independentemente do espaçamento do topo. Por exemplo, para este botão aqui. Agora, novamente, a maioria das coisas que seremos feitas manualmente pelo XD, então você não precisa fazer muitos ajustes. Mas podemos seguir em frente e aplicar redimensionamentos responsivos manuais para determinados locais. E se você quiser manter os elementos juntos, como esses conjuntos de botões aqui. Quando você agrupa algo junto, ele seguirá em frente e manterá esse espaçamento ou a proporção entre esses botões. Então, nesse caso, se o fizermos, por exemplo, reduzir o tamanho do quadro de arte, o grupo ficará intocado e não estragará o espaçamento entre eles. Agora, o que aconteceria se selecionássemos essa imagem, por exemplo, fizermos um redimensionamento manual e, na verdade, seguirmos em frente e desligamos a largura fixa e uma altura fixa. O que acontecerá então? Bem, bem, você notará que agora é que, à medida que a placa de arte encolhe ou se expande, essa imagem irá em frente e, na verdade dimensionará em relação ao tamanho do dispositivo. Enquanto que se seguirmos em frente e desfizermos isso e realmente seguirmos em frente e fixar sua largura e altura. Não importa o quanto estiquemos este quadro de arte, o tamanho dessa imagem não mudará. Isso é o que a largura fixa e uma altura fixa dois. Então, novamente, podemos ir em frente e habilitar o redimensionamento responsivo e vários quadros de arte e ver como o treino em alguns quadros é quase impecável e você não precisa fazer nenhuma alteração . Enquanto em outros quadros de arte, você pode precisar fazer alguns ajustes, como este aqui para o endereço. Podemos ir em frente e agrupar esses dois juntos. Em seguida, defina a resposta manual, conjunto de redimensionamento manual e conserte a largura. Mas então um problema será que agora ele está alinhado ao lado esquerdo porque sempre será consertado no lado esquerdo porque, como você pode ver, temos a esquerda fixa. Então, vamos seguir em frente e desligar isso para que ele fique centralizado na tela, em toda a tela, que é o que queremos. Agora isso parece muito melhor. Como exercício, você pode percorrer totalmente o design. Vá em frente e ative o redimensionamento responsivo em qualquer prancheta que você quiser. E vá em frente e brinque com ele até que pareça certo. Eles obtêm páginas incertas em determinados designs que você pode precisar para fazer ajustes e alterá-los, enquanto em outros, funcionará exatamente como você esperaria. Por exemplo, poderíamos ver totalmente em uma tela do iPad que algo assim ficaria bem para a página Pedidos anteriores. Então essa é uma das razões pelas quais o redimensionamento responsivo é tão poderoso. Então vá em frente e aproveite esse tempo para pausar e explorar mais das Pranchetas e tente aplicar responsivo, redimensionar até que as coisas fiquem boas. Não tenha medo de entrar e fazer certos ajustes em seus objetos. Então, como exemplo nesta página de menu, você verá que as coisas começam a desmoronar com esses textos aqui. Claro, o que você gostaria de fazer é aplicar uma esquerda fixa manualmente a todas essas caixas de texto. Então, como um exercício, deixarei esta página nesta página de menu para você fazer. E lembre-se, você pode aplicar o componente inimigo de redimensionamento responsivo. Assim, você pode entrar aqui e alterar o redimensionamento responsivo de cada elemento em seu componente. E isso será aplicado exatamente como todo o resto com componentes para todas as instâncias desse componente. Como um exercício, faça uma pausa aqui, vá em frente e aplique redimensionamento responsivo à página do menu e aos carrinhos aqui especificamente. Então faremos isso juntos na próxima palestra. 68. Exercício de redefinição responsiva: Tudo bem, espero que você tenha conseguido aplicar esse redimensionamento responsivo para a página do menu. E vamos fazer isso juntos nesta palestra. Se você for em frente e habilitar esse redimensionamento responsivo para o quadro de arte, o que eu já fiz. Então vá em frente e expanda esse design e podemos ver quais elementos precisam ser corrigidos. E, em particular, são esses textos aqui. Então, o que queremos fazer é garantir que esses textos fiquem no lado esquerdo do cartão e eles não sejam redimensionados com o tamanho da tela. Ao fazer isso, precisamos ir para o componente principal desses cartões. Podemos ir em frente e ir Editar MainComponent, e isso nos levará ao próprio componente explicado por padrão, seus componentes terão redimensionamento responsivo. Mas se você quiser, assim como qualquer outro quadro de arte ou objetos dentro de nossos quadros de arte, você pode ir em frente e clicar em objetos dentro de um componente e ajustá-lo responsivo, redimensionar-se. Agora, o que queremos fazer é ir em frente e fixar este item no lado superior e esquerdo para que, à medida que o componente se estende, ele vá em frente e mantenha seu pixel, tantos pixels, 145 pixels do lado esquerdo da visualização do cartão. Queremos fazer a mesma coisa com essa descrição aqui. Como você pode ver por padrão, era taxa fixa, o que não está certo. E então vamos seguir em frente e selecionar esses dois segurando o turno como pudermos. Vá em frente e defina o mesmo para ambos, que é fixado à esquerda e no fundo fixo. Para isso aqui, ele já está corretamente definido para cima e inferior fixos , bem como taxa fixa o que estamos aqui, poderíamos fazer mais duas coisas por esses elementos aqui, podemos ir à frente e remova a largura fixa. Então, agora de volta à nossa página de menu, podemos ir em frente e expandir ou encolher. Este design funcionará, quase adormecendo, mas vou seguir em frente e apenas definir a largura de volta à minha largura original aqui, 390 e deixá-la assim. Esse é o nosso exercício para o redimensionamento responsivo. E isso praticamente encerra a parte de design do nosso aplicativo móvel. Então, vamos voltar em uma palestra a seguir é saber como podemos exportar nossos projetos e compartilhar com os membros da equipe no XD. 69. Selecione Exportar: Então, fizemos um ótimo trabalho projetando nossa maquete móvel aqui. As coisas realmente parecem boas e estou muito feliz com o que aconteceu. Esta é a parte em que perguntamos, Ok, então, o que vem a seguir? O que podemos fazer daqui? Quais são as opções em termos de exportar nossos ativos daqui, nossos quadros de arte ou compartilhá-los com outras pessoas e criar protótipos deles. Bem, isso é o que vamos explorar juntos nas seguintes palestras. Começando com a exportação de itens, bem como placas de arte do nosso XD. Xd oferece opções para exportar itens individuais ou elementos de seus projetos, além de exportar um lote de itens, além de permitir exportar quadros de arte inteiros. Então, vamos passar por esses três, um por um. O primeiro é um Export selecionado, que permite exportar um único objeto ou talvez um grupo de seus designs. Então, apenas como um exemplo, se eu ampliar e eu quiser exportar um determinado objeto aqui é se é o logotipo ou digamos essa imagem aqui para que os desenvolvedores possam usá-lo em seu desenvolvimento trabalho. Podemos exportar isso individualmente. Então, como exemplo, vamos em frente e exportar um desses cartões de menu do XD para nossos arquivos antes de fazê-lo, você pode ir em frente e selecionar o que deseja exportar. E eu me lembro do que quer que você exporte, essa coisa exata será exportada. Então, se eu selecionar o grupo inteiro aqui, todos eles serão exportados em um arquivo. Mas se você quiser exportar uma coisa específica, seja apenas um texto aqui ou toda a exibição do cartão de item aqui, que é o que queremos. Em seguida, vá em frente e certifique-se de ter o que deseja selecionado porque só isso, porque somente essa camada será explorada. Para exportar isso daqui, podemos ir em frente e ir para Arquivo, Exportar e selecionar, ou como atalho, você pode pressionar o Comando E ou Controle E no Windows. E o XD agora irá em frente e perguntará para onde você deseja que o arquivo seja exportado. E se você vir algo assim e um Mac, você pode ir em frente e clicar nesta pequena seta poder escolher exatamente onde deseja salvá-la e também pode renomeá-la, se quiser. Quando estiver pronto, você pode seguir em frente e clicar em Exportar por. Tire um segundo aqui, dependendo do que você está exportando. Mas depois de exportá-lo, se você abrir esse local ou pasta onde seu item está, poderá ver o marido da visualização do cartão exportado como você veria. Agora, uma coisa que quero observar é que XD irá em frente e exportará exatamente nessa resolução porque esse acorde era originalmente do tamanho. Se eu for em frente e esticar a imagem, ela perderá a qualidade. Então, uma coisa que você pode fazer é quando estiver exportando, você pode ir em frente e ajustar o tamanho da sua exportação para que ela tenha uma resolução mais alta. Se eu fizer um a3x agora e ir em frente e salvar a mesma coisa. Mas vou fazer no a3x no nome. Então o que acontecerá é que o XD irá em frente e exportará o mesmo item, mas agora em três vezes a resolução do que você vê aqui. Agora, se você olhar para a visualização original do cartão do item e a visualização do cartão do item em a3x, será uma resolução muito maior. Então, normalmente, você gostaria de compartilhar algo de alta resolução com os desenvolvedores para que eles não precisem olhar para esse tamanho. Obviamente, lembre-se de que o tamanho do arquivo também será maior se você definir uma resolução mais alta. Existem outras opções disponíveis também onde você pode exportar para Web, iOS e Android. É assim que você exporta itens únicos daqui, você pode fazer a mesma coisa. Então, digamos que você exporte um único objeto ou elemento ou grupo do XD. Agora lembre-se que você pode fazer isso com qualquer coisa novamente. Então, se eu selecionar apenas como exemplo, todo esse grupo de texto aqui e eu apenas exporto isso. Você verá que o XD apenas exportará essas camadas de texto com a mesma fonte, da mesma cor que um PNG aqui, e não há fundo aqui, pois meus textos aqui não têm realmente fundo de TI. É assim que você exporta itens únicos do XD. Voltaremos na palestra a seguir e aprender como podemos exportar vários objetos ao mesmo tempo usando a exportação em lote. 70. Exportação em conjuntos: Então, agora que sabemos como podemos exportar itens únicos do XD, se você quiser selecionar vários itens para exportação do XD? Agora, é claro, você pode ir em frente e selecionar um determinado elemento, digamos que este botão aqui e, em seguida, segure shift e selecione outro elemento. E então vá em frente e exporte esses juntos. Isso também funcionará conforme o esperado. Mas a outra opção aqui, que torna muito mais fácil, especialmente se você estiver fazendo esse processo repetidas vezes é chamada de exportação em lote. exportação em lote permite exportar várias coisas juntas marcando determinados objetos para exportação. Então, à medida que estamos passando por nossos designs, digamos que optemos por exportar um determinado objeto, essa imagem que diz, você pode seguir em frente e clicar neste pouco marcado para exportação no painel Propriedades para isso objeto. Agora, novamente, a mesma coisa que uma única Exportação. Certifique-se de ter o item correto selecionado. Podemos ir em frente e marcar isso para exportação e, em seguida, seguir em frente e selecionar outra coisa como marcada para exportação. E à medida que estamos crescendo através de nossos projetos, podemos selecionar várias coisas. Digamos que queremos exportar este botão de menu aqui. Podemos ir em frente e selecionar este ícone do menu de hambúrguer novamente para garantir que você tenha essa coisa selecionada e, em seguida, marque para exportação e assim por diante, assim por diante. Agora, uma vez que você tenha vários objetos selecionados, você pode simplesmente ir em frente e pressionar Shift Command E, ou você pode ir em frente e selecionar Arquivo, Exportar e exportar em lote. Exportação em lote. Você tem as mesmas opções. Vamos em frente e pediremos que você escolha PNG como formato, ou você pode ir em frente e, na verdade, alterá-los para SVG, PDF ou JPEG. Agora, normalmente, gosto de usar o SVG para que nosso ícone aqui possa ser redimensionado sem estragar sua qualidade. E vou seguir em frente e apenas criar outra pasta aqui chamada itens de exportação em lote, para aqui chamada itens de exportação em lote, que eu saiba exatamente onde estou salvando e, em seguida, vá em frente e clique em Exportar. E, como esperado, esses itens agora foram exportados como SVG agora. E é por isso que eles se parecem com isso na pré-visualização no Mac. Mas, assim como esperado, importante isso de volta ao XD e funciona perfeitamente. A qualidade não será massacrada com base no tamanho ou no redimensionamento aqui. É assim que você pode exportar vários objetos ao mesmo tempo usando o XD. Agora lembre-se , como selecionamos esses itens como marca para exportação, eles não foram realmente um desselecionado. Assim, à medida que continuamos adicionando itens à nossa exportação em lote, esses itens serão exportados repetidamente. Portanto, isso pode ser bom para algo que você deseja fazer ajustes uma exportação de versões diferentes e enviá-lo aos membros da sua equipe ou colegas para receber feedback. Mas se você quiser desfazer isso, você pode simplesmente desmarcar coisas para exportação. E agora apenas as coisas selecionadas para exportação serão exportadas para fora do seu XD. E é assim que você usa a exportação em lote no XD. Agora, e se você quiser exportar toda a prancheta aqui? Bem, vamos voltar na próxima palestra e explorar isso juntos. 71. Exportando nossas pranchas: Agora sabemos como exportar itens individuais do XD, como exportar vários itens usando a exportação em lote. Mas e se você quiser realmente ir em frente e compartilhar todo o nosso design de pranchas de arte para outra pessoa. Exportar pranchetas é tão simples quanto exportar objetos. Tudo o que você precisa fazer é simplesmente selecionar a Prancheta que eles querem exportar. E, claro, você pode seguir em frente e segurar Shift e selecionar vários quadros de arte. E vá em frente e clique em Comando E irá salvá-lo como PNG, que criará uma pasta chamada pranchetas. Aqui, você pode seguir em frente e clicar em Exportar. E agora o XD exportará seus quadros de arte para essa pasta. Eu escolhi a resolução a3x, e é por isso que ela é tão alta qualidade. É assim que você exporta vários ou se quiser pranchas de arte individuais e você pode ir em frente e simplesmente fazê-lo no nosso quadro. Agora, e se você quiser exportar todas as placas de arte em nossos projetos? Bem, o XD facilita para você porque você pode simplesmente ir até File Export e fazer todas as placas de arte aqui. Fazendo exportar todos os quadros de arte. Porque já temos essas três pranchas de arte lá. Xd nos perguntará: Você quer substituí-los? Tem certeza de que ele irá sobrescrever esses? Mas iremos em frente e clicaremos em Substituir. Então agora o XD foi em frente e exportou todos os quadros de arte aqui para a pasta que selecionamos, o que é perfeito, parece ótimo. E essas pranchetas não podem ser compartilhadas com ninguém. Você pode enviá-los para seus desenvolvedores ou colegas designers ou clientes ou para quem quer este projeto que você esteja trabalhando em preocupações. Mas, claro, há uma maneira muito mais fácil de compartilhar pranchetas. Você não precisa continuar enviando PNGs atualizados repetidamente, porque esse processo pode ficar realmente entediante. E você acabará com muitos nomes de versão, como VU em V1, T1, T2. Mas o software de design hoje em dia realmente torna mais fácil para nós poder compartilhar ou projetos com clientes ou outros membros da equipe sem precisar realmente exportar coisas do XD. Então, essencialmente, se você quiser exportar seus quadros de arte, especialmente se você souber que esta é a versão final de seus quadros de arte, você pode fazer isso assim no XD. Mas se você quiser realmente compartilhar seus quadros de arte dentro do próprio XD, vamos fazer isso juntos na próxima palestra. E eu acho que é um dos recursos realmente legais que o XD fornece que realmente não vemos e muitos outros softwares de design. Mas acho que o XD faz um bom trabalho ao permitir que você compartilhe quadros de arte ou compartilhe ativos com outros designers desenvolvedores ou clientes. E então vamos fazer isso juntos na próxima palestra. 72. Como compartilhar artes: Agora sabemos como exportar várias coisas, incluindo quadros de arte de nossos projetos e enviá-los para talvez membros da equipe ou clientes. Mas existe uma maneira mais fácil compartilhar nossos quadros de arte com outras pessoas e talvez obter seus comentários ou perguntar como podemos melhorar nossos projetos a partir deles. Seja seus clientes ou membros da equipe. Xd realmente nos dá essa habilidade usando a guia Compartilhar aqui. Então, se você está se perguntando todo esse tempo o que essa camisa faz, vamos explorar isso juntos nesta palestra. Seguindo para a guia Compartilhar aqui. Xd nos permitirá compartilhar nossas placas de arte com outras pessoas dentro do próprio XD. O que quero dizer com isso é que ele irá em frente e criará um link para você onde você pode compartilhar esse link com outras pessoas. Você pode obter o feedback deles sobre eles. Você pode pedir que eles deixem comentários dependendo da configuração de visualização que você tem. E vamos explorar essas configurações de visualizações em apenas um segundo. Antes de fazermos isso, vamos explorar o que temos aqui em nossa guia de cisalhamento. Dentro do painel de propriedades, XD fará ativos para escolher um fluxo ou um nome flutuante. A partir daqui, você pode ir em frente e renomear isso onde quiser. Então, digamos que façamos mockups de mordidas saudáveis. E agora esse link será chamado de mockups de mordidas saudáveis. E podemos seguir em frente e gerenciar nossos links clicando neste link gerenciado aqui. A partir daí, o XD nos levará ao site da Creative Cloud, onde podemos seguir em frente e excluir fluxos que não queremos mais e visualizar todos os arquivos ou links publicados que temos. É assim que você pode gerenciar seus links a partir daí. Mas o que estamos realmente interessados é explorar o que esse recurso realmente faz. Então esse é o nome do link. Podemos ir em frente e definir a configuração de visualização. Se você quisesse apenas receber feedback sobre nossos designs, podemos seguir em frente e seguir a opção padrão, que é a revisão de design. Se você quiser compartilhar esse design ou nosso protótipo com o desenvolvedor, podemos seguir em frente e selecionar essa opção, que vamos explorar na palestra a seguir. Se você quiser apenas apresentar nosso projeto e mantê-lo o mais simples possível. Isso é melhor para apresentação. O teste do usuário é ótimo para quando você estiver testando seu protótipo, no qual também estaremos trabalhando em futuras palestras. Também podemos definir uma experiência de visualização personalizada onde você pode ir em frente e escolher exatamente o que deseja. Se você deseja permitir comentários ou deseja que o arquivo abra em tela cheia, inclua especificações de design e assim por diante. Para simplificar, vamos em frente e escolher uma revisão de design e explorar o que isso faz. Você pode ir em frente e escolher quem tem acesso a este link. Assim, você pode convidar pessoas específicas para este projeto, ir em frente e escrever um endereço de e-mail e convidá-la a visualizar esse arquivo se eu quiser apenas compartilhá-lo com uma pessoa específica. Então, nesse caso, posso ir em frente e definir o acesso ao link apenas para pessoas convidadas. Mas se quisermos que alguém com esse link, o acesso possa ver meus quadros de arte e eu posso ir em frente e escolher qualquer pessoa com um link. Sempre que você fizer alterações aqui, você pode seguir em frente e clicar em Atualizar link, e o XD irá em frente e gerará um link para você que você possa compartilhar com seus colegas. E assim, uma vez feito isso, você pode seguir em frente e simplesmente clicar neste link Copiar, onde iremos em frente e copiaremos esse link para sua área de transferência. E agora, se eu for em frente e abrir uma janela do navegador e inserir esse URL lá. Vamos colocar nossos designs em seu site aqui, onde novamente, somente pessoas com este link podem acessá-lo. Se você selecionou alguém com uma opção de link. E agora eles podem passar por seus designs em todas as páginas e deixar comentários aqui, se quiserem. Obviamente, se eles quiserem fazer isso, eles podem continuar como convidado ou entrar com uma conta da Adobe. Você pode seguir em frente e simplesmente continuar como convidados e deixar comentários sobre esses designs. E vá em frente e realmente navegue por todos esses quadros de arte. A beleza disso é que, se você fizer alguma alteração de design e voltar ao seu compartilhamento, poderá ir em frente e atualizar esse link fazendo uma atualização simples. Agora que a atualização também foi aplicada em nossos ativos compartilhados, vou seguir em frente e simplesmente desfazer isso e deixarei o link aqui. Mas agora você pode realmente ver o poder de compartilhar quadros de arte em vez de exportá-los e enviá-los para outras pessoas para obter feedback. Agora, se eu estiver conectado, posso ir em frente e ver todos os meus comentários para meu projeto e ir em frente e deixar respostas para eles. Muito legal. Enquanto você estiver aqui, você também pode ir em frente e navegar por todos os ativos que são compartilhados com você. Somos esse link. Você pode ir para uma página específica, se quiser. E o que é legal é que ele pode até compartilhar protótipos. Assim que começarmos a prototipagem, essas páginas seguirão em frente e até se tornarão interativas para que possam realmente usá-las como um aplicativo. Mas vamos explorar isso nas futuras palestras. Por enquanto. Só queremos aprender a compartilhar nossos quadros de arte com outras pessoas. E se eu só quiser compartilhar pranchetas específicas e não todas as minhas pranchas de arte. Você também pode fazer isso simplesmente indo para a guia de design, selecionando os quadros de arte que deseja compartilhar. Então, digamos que eu só queira compartilhar minha página do restaurante e a página do menu e nada mais. Então você pode seguir em frente e segurar Shift, selecionar esses quadros de arte e, em seguida, seguir em frente e clicar neste pequeno ícone Compartilhar aqui. E XD novamente, iremos frente e levaremos você para essa camisa para cima. Mas agora, apenas deixando você com essas duas placas de arte, nada mais é selecionado, o que significa que nada mais será compartilhado por meio desse link. Agora, o único problema aqui é que como já criei um link, não consigo criar outro link. Como o XD, com uma conta básica, só permitirá que você compartilhe um link de cada vez. Se você quiser mais compartilhamento de links, precisará atualizar para o próximo nível. Você precisa atualizar sua conta. Mas vamos seguir em frente e simplesmente nos livrar disso. Vou seguir em frente e simplesmente excluir permanentemente este link aqui para poder criar novos links. Então agora eu posso voltar, selecionar essas duas páginas novamente. Agora, o XD me permitirá criar um link para essas páginas e renomeá-lo como gostaríamos. Se você criou um link de vez em quando, vá em frente e copie esse link e compartilhou com outras pessoas. Vá em frente e insira novamente esse URL, insira esse URL em. Agora, como você pode ver, só temos duas páginas aqui, as duas que exportamos. Então é assim que você pode compartilhar quadros de arte específicos. Em vez de todos os seus quadros de arte com outras pessoas. Vamos apenas ir em frente e excluir isso também. Nós realmente não precisamos disso. Vá em frente e desfaça isso também. É assim que você pode compartilhar seus quadros de arte usando o XD. Há mais uma coisa que eu quero mostrar a vocês sobre o compartilhamento de quadros de arte, e essa é a entrega do desenvolvedor sobre a qual falamos. Então, por que não voltamos na próxima palestra para explorar isso também. 73. Handoff de desenvolvedor: O que a entrega do desenvolvedor e como podemos facilitar a vida de um desenvolvedor como designer quando estamos compartilhando ativos com eles? Bem, vamos explorar isso juntos nesta palestra porque eu acho que este é um recurso super legal que o XD tem. Isso é realmente ótimo junto com seus outros recursos de compartilhamento. Então, para passar por isso, vamos em frente e voltar para nossa guia Compartilhar. Em seguida, em vez de Revisão de design na configuração de visualização, vamos seguir em frente e, na verdade, selecionar o desenvolvimento. Depois de fazer isso, o XD irá em frente e perguntará este é um projeto web, projeto iOS ou projeto Android? Para que, consequentemente, ele lhe dê o desenvolvedor ou os ativos certos ou o código certo para determinadas plataformas, e clique em ativos para download. Portanto, se houver algum ativo que você possa baixar, eles podem fazer isso a partir daí. Qualquer pessoa com o link. Vamos deixar isso como está e criar o link dele um segundo aqui. E uma vez que esses links gerados, vamos ir em frente e copiá-lo. Lá vamos nós. Agora, no meu navegador, vou seguir em frente e inserir isso. E agora vamos ver quais são as diferenças entre apenas compartilhá-lo como uma revisão de design versus uma revisão do desenvolvedor. Agora, o XD irá em frente e mostrará que você tem esse modo de especificações aqui, podemos ir frente e alternar e ver as coisas úteis como desenvolvedor quando você estiver trabalhando com um design. Eu posso, claro, ir em frente e deixar um comentário como de costume. E posso ir em frente e até colocar um alfinete em uma parte específica do design, onde posso deixar feedback sobre essa parte específica. Então, é claro que temos essa opção como fizemos antes. Mas agora temos essa pequena aba aqui e podemos ir em frente e ver as especificações desta página. Então, na verdade, iremos em frente e nos mostraremos detalhes da tela, como o tamanho, as cores disponíveis nesta página. E podemos ir em frente e clicar nisso para copiar essa cor para nossa área de transferência. Podemos ver quais tamanhos de fonte estão sendo usados e quais fontes. Podemos ir em frente e até mudar esses valores de hexadecimal para RGBA e assim por diante. E ainda mais legal, podemos ir em frente e selecionar itens individuais dentro do nosso design e realmente ver até mesmo o componente e esse botão ele se parece em diferentes estados. Podemos seguir em frente e ver mais informações sobre isso, mas ou este texto. Para esta imagem, podemos realmente ir em frente e selecionar qualquer coisa e isso nos dará essa propriedade. Podemos ir em frente e, claro, ir para páginas diferentes e ver propriedades diferentes com base nessa tela e em outra pessoa, isso é legal. Se eu voltar ao meu XD, digamos que estamos projetando isso para um projeto web. Então, vou mudar isso para a Web e atualizar o link. Algo legal. O que aconteceu? Como o XD tem recursos de CSS e para ir em frente e atualizar isso agora, ele continuará e realmente me dará um código CSS aqui. Se eu estiver trabalhando em um projeto da Web oposição a um projeto iOS, posso ir em frente e copiar o código CSS e usá-lo em meus projetos de desenvolvimento web como desenvolvedor. Isso aparecerá em todas as páginas. E você até obtém essa nova guia aqui quando estiver trabalhando com um projeto web chamado variáveis, que iremos em frente e permitiremos que você acesse essas variáveis que criamos em nossas bibliotecas, como as cores de destaque, as cores primárias e assim por diante. Os tamanhos da fonte. Posso ir em frente e baixá-lo daqui. Como um projeto CSS. Realmente, essa é a diferença entre revisão de design e revisão de desenvolvimento. No modo de desenvolvimento, temos acesso a muito mais. Podemos até ir em frente e acessar nossos ativos e baixar, por exemplo, imagens, o que é ótimo porque dessa forma você não precisa realmente enviar imagens e itens frente e para trás entre seus desenvolvedores. Isso é realmente o que torna os recursos de compartilhamento do XDS tão úteis. Com isso dito, vamos voltar nas próximas palestras e aprender como podemos realmente trabalhar em projetos do XD com um membro da equipe ou com vários membros da equipe trabalhando nisso conosco. Então diga uma pausa rápida aqui e aprenda juntos na próxima palestra. 74. Editores de convite: Então, se estivermos trabalhando em um projeto de design com outras pessoas, vamos ver colegas ou membros da equipe neste projeto. Como podemos compartilhar nosso projeto e colaborar com ele ao mesmo tempo? Bem, na verdade, tem um recurso de convite onde você pode ir em frente e compartilhar seu projeto, seu arquivo XD com outros designers. Eles podem realmente ir em frente e se juntar a você e coeditar este projeto com você. Como seus arquivos são salvos na nuvem, você pode ir em frente e simplesmente convidar pessoas para seus documentos para que eles possam ajudá-lo a editá-los também. Erro ao fazer isso, você pode simplesmente ir em frente e clicar neste pequeno botão Compartilhar aqui ou no botão Convidar aqui. Xd seguirá em frente e permitirá que você insira um endereço de e-mail aqui. Podemos ir em frente e convidar seus colegas ou membros da equipe para este projeto. Você pode ir em frente e escrever uma pequena mensagem, se quiser, ou simplesmente ir em frente e convidá-los a editar. Depois de fazer isso, a mutação será enviada para esse usuário. E eles receberão um e-mail sobre isso, onde irão em frente e abrirão esse projeto e terão a capacidade realmente coeditar esse projeto com você. Se, em algum momento, você quiser remover essa pessoa do seu documento, você pode seguir em frente e simplesmente clicar em Remover aqui. E será removido do projeto. E é assim que você pode convidar membros da equipe para trabalhar com você e coeditar projetos com você no XD. 75. Histórico do documento: À medida que você está trabalhando em seu projeto e está fazendo alterações em seus projetos. Xd seguirá em frente e acompanhará diferentes versões para seus designs. Então, digamos que se você quiser comparar duas versões diferentes que você tem ou voltar a um determinado estágio do seu design. Você pode fazer isso usando o recurso Histórico de documentos que ele possui. Se você subir aqui na barra, onde ele mostra seu nome de arquivo e passar o mouse sobre esta seta, você verá que tem acesso ao histórico do documento, onde você pode acessar automaticamente salvo e marcador versões do documento. Então, o equilíbrio que irá em frente e mostrará as diferentes versões em momentos diferentes para o seu projeto. Como seu projeto está sendo salvo automaticamente, XD irá em frente e salvará automaticamente seu projeto e fornecerá certos para os quais você pode voltar. Você pode até ir até os últimos dez dias. E se você quiser manter determinadas versões, você pode ir em frente e, na verdade, marcá-las, marcá-las e acessá-las a qualquer momento. Por exemplo, se eu apenas reverter para uma das minhas versões aqui, poder ir em frente e clicar nesses pequenos três pontos para abrir esta versão em uma nova janela, posso nomear esta versão do que quero. Posso ir em frente e marcá-lo usando este botão aqui. Vá em frente e abra-o em uma nova janela. Xd irá em frente e abrirá isso. Nesse momento, que agora está no nome do arquivo também. Você pode ver que esse é o ponto em que estávamos trabalhando em nossa página de histórico de pedidos. Então, nós meio que voltamos no tempo com este projeto agora. Esse é realmente o caso de uso desse recurso de histórico de documentos. Você pode ir ainda mais para trás. Se você não quiser ir em frente e renomear esta versão, você pode nomear isso trabalhando no histórico de pedidos como um exemplo. Eles podem até ir em frente e colocar a data aqui, se você quiser. Vá em frente e clique no botão OK aqui, e ele seguirá em frente e salvará essa versão para você. Ou se você quiser salvar qualquer versão sem renomeá-la, você pode fazer isso clicando no marcador aqui. Você também pode acessar suas versões marcadas daqui de cima para ter acesso mais fácil a elas. Esse é um dos benefícios de ter seu arquivo salvo na nuvem, ao invés de salvá-lo em algum lugar localmente em sua máquina. Xd lhe dará acesso a esse histórico de documentos, que foi muito útil, especialmente se, digamos que você cometa grandes erros em seu design que você quer voltar para uma determinada versão do passado, ou você deseja salvar versões diferentes para diferentes partes do processo de design. Digamos que você possa usar um histórico de documentos no XD. 76. Compartilhando bibliotecas: À medida que passamos pelo curso e começamos a juntar as coisas em nossas bibliotecas aqui. Podemos ver o quão útil este painel Bibliotecas B. E podemos realmente ir em frente e aproveitar essas bibliotecas e usá-las em vários projetos também. Uma coisa que você pode fazer é continuar e compartilhar suas bibliotecas ou publicar suas bibliotecas em um ativo de documento do Cloud. Podemos usá-los em vários projetos ou com várias pessoas. Se você montar um sistema de design que deseja compartilhar em todo o mar, vários projetos para sua empresa ou para projetos de seus clientes. Você pode ir em frente e publicar esta biblioteca indo aqui e clicando neste pequeno ícone aqui. E então iremos em frente e na verdade, iremos em frente e abriremos suas bibliotecas de onde você poderá publicar sua biblioteca. Agora, uma coisa é que esse é um recurso para o qual você precisa atualizar para usar. Xd pedirá que você atualize se quiser ter acesso à publicação de bibliotecas e usá-las entre projetos e com o Teams. Juntamente com alguns outros recursos, como ter editores ilimitados compartilhados documentos, destruir links e assim por diante. Se você tiver a conta atualizada clicando em publicar, poderá ir em frente e publicar essa biblioteca e até mesmo convidar pessoas para ela. Vá em frente e convide uma determinada pessoa para isso. Posso ir em frente e dar a eles permissões de visualização ou edição se eu quiser ter a capacidade de editar essa biblioteca. Caso contrário, convidando-os, eles terão acesso à biblioteca aqui em seus projetos. E eles receberão um e-mail de onde irão em frente e terão acesso a essa biblioteca. É assim que você pode publicar bibliotecas usando o XD e compartilhá-las com outros membros da equipe. 77. Como importar arquivos de esboço: Agora, se você já trabalhou com outro software de design como antes, você pode ir em frente e importá-los para o XD a qualquer momento. Se você estiver no seu navegador de arquivos como eu estou aqui, é claro que você pode ir em frente e criar novos arquivos, mas você pode realmente ir em frente e abrir outros arquivos, incluindo arquivos do Photoshop ou do Illustrator, arquivos esboço ou outros arquivos XD. Se você estiver trabalhando em um projeto de esboço onde você tem um projeto de esboço que você está trazendo para o XD. Você pode simplesmente ir em frente e clicar nesta opção de esboço. E então o XD pedirá que você localize esse arquivo. E depois de fazer isso, você pode seguir em frente e clicar em Abrir. Agora, a partir daí, dependendo do tamanho do tamanho do arquivo, pode levar um minuto aqui para o EC2, importá-lo, mas como você pode ver, vamos em frente e importaremos seu projeto para um projeto XD. Você pode ir em frente e usá-lo exatamente como esperado. Xd seguirá em frente e até se moverá sobre seus componentes do esboço para os componentes do XD também. E ele iria em frente e editava esses componentes exatamente como você esperaria. É assim que você pode importar arquivos de esboço para Adobe XD e usá-los como quiser. Agora você pode notar que as coisas estão em páginas diferentes. No Sketch. Eles podem aparecer como seções diferentes dentro do seu Canvas que você tem aqui. É por isso que as coisas são divididas em seções diferentes, mas todo o resto deve ser o mesmo. Uma coisa que eu quero notar que, se você não tiver as fontes certas instaladas, ela pode não funcionar corretamente. Portanto, você pode querer ir em frente e ter certeza de que você tem todas as fontes desse arquivo de esboço instaladas antes de importá-lo para o XD. Digamos que você possa importar arquivos de esboço para o XD. 78. O que é protótipo?: Mencionamos brevemente a prototipagem. E então as palestras anteriores que falamos sobre voltar aos nossos projetos e juntar seu protótipo que podemos realmente usar um, mas o que é um protótipo no software de design? O que ele faz? Para que serve isso? E por que devemos criar protótipos a partir de nossos modelos? Bem, como é simples dizer, um protótipo é essencialmente uma amostra ou um modelo de produto criado para testar como será o processo desse produto quando ele for realmente programado e construído. Colocamos esses projetos juntos, mas eles realmente não têm nenhuma relação entre si. Eles não são realmente um produto ainda. Usando um protótipo, podemos realmente ir em frente e criar ou imitar seria um produto real desenvolvido a partir desse design e pareceríamos qualquer coisa, desde a criação de conexões entre os botões para as diferentes páginas, até mostrar quais diferentes tipos de animações aparecem em nossos designs ou sobreposições de abertura no topo sobre o design e assim por diante é tudo parte da prototipagem. Mas ele usou protótipos para compartilhar nossa visão para este produto ou para esse design, que seria então transformado em um produto real com a ajuda de um desenvolvedor de software. A razão pela qual a prototipagem é tão importante é que custa muito menos montar um protótipo usando um software de design como o XD, oposição a seguir em frente e realmente desenvolver tal aplicativo ou produto, vez de realmente codificar esse produto. E então percebendo quais mudanças precisam ser feitas. E à medida que enviamos esse protótipo para feedback, podemos avançar e melhorá-lo antes de realmente entregarmos isso a um desenvolvedor em potencial para montar usando código. Então, vamos seguir em frente e conectar essas páginas juntas na próxima palestra e criar um protótipo de nossos projetos. 79. Criando uma transição: Então, como criamos um protótipo e criamos conexões entre nossas páginas no XD? Bem, você simplesmente vá em frente e vá para a guia Protótipo aqui. Agora, quando você estiver na guia Protótipo, como você pode notar, o painel de propriedades mudará completamente. E agora você pode ir em frente e criar interações entre páginas diferentes, botões diferentes e assim por diante. E vamos fazer isso juntos nesta palestra. E a maneira como vamos trabalhar com isso Para trabalhar do nosso caminho da esquerda para a direita, que é essencialmente a ordem das páginas que esperamos passar ou a esperamos que o usuário passe. O que estamos tentando fazer aqui é criar um fluxo que leve o usuário das páginas iniciais do aplicativo até as páginas finais, que neste caso visualizará o progresso de qualquer pedido, então, ter a capacidade de também abrir o menu e acessar essas outras várias páginas também. Então, vamos tomar nosso tempo, passar por cada página com cuidado e adicionar conexões adequadas entre os botões e as páginas. Eu quero ir em frente e apenas pressionar isso e ampliar esta seção aqui e trabalhar nosso caminho a partir daqui. Agora, em um protótipo, sempre há uma tela inicial que você pode escolher. Então o que isso significa é que quando você abre seu protótipo, esta é a primeira página em que o protótipo começará. No nosso caso, queremos fazer a tela inicial, a página inicial. Então, vamos seguir em frente e clicar na Prancheta para a tela inicial, e seguir em frente e clicar nesta página inicial. Agora criamos um fluxo. A primeira conexão que vamos fazer é desta página aqui, a tela inicial para nossa página de login simplesmente arrastando esse nó aqui da página e arrastando-o para a página que queremos o usuário para passar depois de ver essa tela inicial. Agora ou do lado direito aqui, temos várias opções sobre como queremos que essa transição aconteça. Então, um por um, vamos passar pelos tipos de ação que temos aqui. A primeira é a transição, que simplesmente como o nome sugere, levará o usuário de uma página para outra. Temos animação automática, que essencialmente tenta fazer a mesma coisa, mas animamos essa transição. Então, se houver algo semelhante entre as duas páginas, a animação automática para ir em frente e criar uma transição suave que parece que há alguma animação prateada entre essas páginas. E como essas páginas não estão relacionadas, na verdade, não tenho nenhum elemento compartilhado. Nós realmente não queremos animá-lo automaticamente. Podemos optar por abrir uma sobreposição, que essencialmente o que isso fará é abrir a página para a qual estamos apontando, que é esta aqui no topo desta página aqui em vez de, em oposição à transição do usuário de uma página para outra. Então, novamente, na página será aberta no topo desta página. E geralmente vemos sobreposições usadas em folhas de ação e Exibições de alertas e telas menores que estavam aparecendo temporariamente e desaparecendo. Exploraremos isso também quando colocarmos uma sobreposição para nossa folha de ação. prancheta anterior levará o usuário de volta à prancheta anterior dos protótipos ou onde quer que estivessem anteriormente. Vamos levá-los de volta, sua reprodução de áudio, como o nome sugere, reproduz um áudio. Claro, quando selecionamos isso, podemos ir em frente e escolher um arquivo de áudio e reprodução de fala. Vamos em frente e, na verdade, reproduziremos um discurso como o nome sugere. E você pode ir em frente e escrever esse discurso e aqui. Então isso é legal se você precisa reproduzir o discurso dele, mas nós realmente não precisamos disso agora. Só queremos fazer a transição de um aqui. Com cada uma dessas opções, você terá um conjunto diferente de opções logo abaixo dela ou propriedades logo abaixo dela. Para editar, vamos passar por isso com mais profundidade. Por enquanto. Nós só queremos ir em frente e criar uma conexão de símbolo da nossa tela inicial para uma página de login após um certo período. Então, vemos que nosso destino é a página de login, como já apontamos para dois. Agora, se em algum momento quisermos alterar essa conexão, podemos seguir em frente e arrastá-la para outra página que queremos nomear duas. Mas, por enquanto, vamos seguir em frente e criar essas duas conexões. Claro, você pode criar várias conexões, se quiser. Podemos criar uma conexão entre a tela inicial e página de login e uma entre uma tela inicial defende a seguinte replicação. Mas vou seguir em frente e excluir essa conexão simplesmente clicando em Excluir. Se em algum momento você não quiser se conectar e quiser remover essa conexão, basta selecionar a conexão e clicar em Excluir no teclado. Então, para essa transição, queríamos fazer login como destino. E para animação, queremos ter uma dissolução. Estas são as animações disponíveis para transição entre duas páginas. Agora, alguns deles serão aplicados em diferentes lugares da nossa Apple para esta página, dissolver é o apropriado, que essencialmente desaparece desta página para esta página. Agora aqui para facilitar, temos diferentes tipos de opções de flexibilização para escolher como queremos que nossa animação se pareça. Normalmente, vemos facilidade de entrada e saída dispensada. Mas é claro que você pode ir em frente e experimentar os diferentes tipos de animações, facilitando para ver quais são as diferenças. Então, vamos em frente e escolha facilidade de entrada e saída. Durante a duração, quero ir em frente e selecionar ponto zero quatro segundos. Então, essencialmente, é quanto tempo essa animação levará. Quanto mais tempo você defini-lo, 1 segundo ou mais, ele seguirá em frente e fará a transição entre essas duas páginas em mais tempo. Enquanto que se você disse que é mais curto, isso acontecerá mais rápido. Isso é essencialmente o que essa região faz. Então, vamos em frente e realmente visualize nossos protótipos até agora, porque nosso gatilho é uma guia, se eu for em frente e tocar nesta página, ele irá avançar e animar para esta outra página. Mas o que eu quero fazer é, em vez de tocar, queremos ir em frente e escolher o tempo. Queríamos ir em frente e fazê-la mudar para essa página automaticamente sem que o usuário tivesse que tocar nela após 0,6 segundos. Agora, se seguirmos em frente e abrirmos a visualização da área de trabalho mais uma vez, como você pode ver, sem que eu toque na transição aconteceu automaticamente. Isso é o que o gatilho aqui em cima ele faz. Então você tem outros gatilhos, como voz. Assim, você pode usar uma demanda por voz, se quiser. Você pode usar teclas e gamepads. usuário pressiona determinada tecla, então ela vai em frente e animará ou um arrastar e atacar. Então, normalmente, usamos uma guia. Que horas também são, é claro, úteis em um caso como esse, criamos nossa primeira conexão aqui, o que é incrível. Agora vamos voltar na próxima palestra é criar mais conexões entre o resto de nossas páginas. 80. Conectando nossas páginas: Parabéns por criar sua primeira conexão para o protótipo em nosso aplicativo móvel. Acho que parece muito bom, mas vá para a visualização da área de trabalho, aqui em cima, você pode ir em frente e visualizar a animação que criamos ou aquela transição. Acho que parece muito bom. Agora, a partir daqui, queremos ir em frente e percorrer cada página e ver quais conexões precisam ser feitas entre as diferentes páginas. Agora, é claro, você pode ficar mais detalhado com o tipo de repórter, se quiser. Por exemplo, se você quiser ir em frente e imitar o usuário colocando um endereço de e-mail ou senha e, em seguida, talvez um teclado aparecendo usando os ativos da Apple, você obtém mais páginas projetadas aqui, talvez logo abaixo desta página de login e tenha cada um desses tipos separados de desses tipos separados de designs e, em seguida, faça a transição entre eles. Se você quiser criar talvez um tipo de protótipo mais realista. Mas neste curso, vamos mantê-lo simples e criar conexões entre as páginas que já projetamos. A partir daqui, quero ir em frente e criar uma conexão a partir do botão de login para a próxima página do aplicativo, que será a verificação do telefone. Então, vamos supor que é a primeira vez que os usuários fazem login. Portanto, creditaremos a conexão da página de login para a página de verificação do telefone. Agora, uma coisa que é legal, mas protótipos é que você não precisa necessariamente criar conexões entre as páginas. Você pode realmente ir em frente e criar conexões entre qualquer elemento em seu design. Dessa forma, você pode realmente ir em frente e conectar este botão com esta página para que, quando um usuário tocar nesse botão, ele vá em frente e navegue o usuário até esta página. E é isso que vamos fazer. Vamos clicar em nosso botão de login. Certifique-se de que você está na guia protótipo aqui e não no design. Caso contrário, isso não funcionaria. Em seguida, vá em frente e arraste um nó para criar uma conexão entre esse botão, botão Login e nossa página de verificação do telefone. Agora vamos ver o gatilho. Queremos que seja um toque, neste caso. Então, quando um usuário toca , ele irá em frente e acionará essa transição. E queremos ir em frente e deixar isso como está. E para animação, em vez de nos dissolver, vamos seguir em frente e escolher o slide para a esquerda. E você verá como isso parecerá em apenas um segundo. Quero deixar o resto, pois é facilidade de entrada e saída em 0,4 segundos durante a duração. Agora, se formos em frente e visualizamos isso por Crick, clicando no login, vá em frente e faça a transição para a verificação. Mas, como você pode ver a partir daqui, podemos realmente clicar em qualquer outra coisa porque agora precisamos criar conexões dentro nossa página de verificação de telefone. Algo legal sobre a visualização da área de trabalho que abrimos aqui é que, à medida que clicamos em páginas diferentes, podemos ir em frente e visualizar o que será isso em nosso protótipo sem a necessidade na verdade, feche esta janela e abra um iene. Isso é muito bom porque você pode ir para páginas diferentes e realmente repetir esse protótipo, se quiser, ou repetir essas transições, se quiser. E isso é ótimo porque você não precisa continuar recarregando a visualização da área de trabalho. Vou apenas ir em frente e minimizar isso. Abençoe nossa prévia e seguindo em frente. E vamos seguir em frente e criar uma conexão entre a página de replicação do telefone em nossa página principal. Porque quando o usuário terminar de adicionar um número de telefone, ele seguirá em frente e abrirá a página principal do aplicativo. E vamos deixar isso da mesma forma que a transição anterior, que é leve à esquerda. Ele entra e sai e 0,4 segundos e na torneira. A partir daqui, porque só temos um menu, só podemos realmente criar uma conexão entre um desses restaurantes e o menu aqui. Agora, se você quiser novamente, ficar mais complicado com isso, você pode ir em frente e projetar menus diferentes para diferentes restaurantes, mas haverá um pouco redundante porque, novamente, qual o objetivo disso protótipo não é torná-lo perfeito e não fazer com que todas as conexões funcionem. O principal ponto do protótipo é ter nossa ideia, nosso ponto de vista com base no que temos. Neste caso, queremos ir em frente e selecionar o restaurante italiano aqui, Frank passou pela casa. A primeira opção e seção crítica desta página aqui. E vamos deixar todo o resto como está. qualquer momento, você também pode pressionar Command Enter para abrir a visualização da área de trabalho ou Control Enter no Windows. Login. Em seguida. Então, mais você perceberá é que, se você clicar nessas outras opções, Nada aparecerá. Mas se você passar o mouse sobre este porque criamos uma conexão para esta, meu cursor mudará para esse tipo de cursor de link. Então, sabemos que há uma conexão aqui. Assim, podemos ir em frente e clicar sobre isso. Abra o menu para nós, uma bela parte porque esta página é um pouco mais longa. Os eixos já foram em frente e criaram essa rolagem, rolagem vertical para nós, o que é incrível. Mas o único problema que você percebe é que a barra de navegação na barra de status também está rolando, enquanto eles devem estar aderindo à mesma parte da página. Independentemente de quanto rolamos para baixo ou para cima. Voltaremos na próxima palestra para saber como podemos realmente ir em frente e bloquear esses elementos na página. Eles não se movem enquanto rolamos para cima e para baixo. Assim que fizermos isso, vamos continuar criando conexões em nosso protótipo. 81. Pergaminho vertical: Então, como mencionei anteriormente, foram em frente e criaram uma rolagem vertical para nós. Devido ao fato de que esta página aqui, nossa página de menu é muito longa em termos de altura. Agora, usando essa opção aqui, quando eu selecionar nossa página de menu, você verá que esta é, na verdade, a linha de exibição. Ao ajustar isso, podemos realmente ir em frente e escolher quanto de nossa página é mostrada em nosso protótipo. Então, se o esticarmos, veremos cada vez mais em uma página. O que queremos fazer é ir em frente e definir que isso seja a mesma altura que os sites reais de dispositivos iPhone são o nosso case. Isso seria bem aqui onde estava antes. E é isso que esta linha aqui mostra. Agora, um problema com uma rolagem vertical, como mencionei, é o fato de que nossa barra de navegação e barra de status aqui não deveriam estar se movendo enquanto rolamos para cima e para baixo. Então, como consertamos isso? Bem, o XD oferece a opção de selecionar certos elementos na página, independentemente de você ter a guia Design selecionada ou o protótipo enquanto você tem a barra de navegação que somos selecionado, você obterá essa posição fixa ao rolar sob a parte de rolagem. Ou, se o seu InDesign, você verá essa posição fixa ao rolar. Ambos realmente fazem a mesma coisa. Então, se você for em frente e clicar nisso, o que acontecerá agora é que, se eu for frente e rolar em nosso protótipo, a barra de navegação ou lã permanecerá lá. Mas é claro que nossa barra de status ainda precisa ser consertada. Agora, a razão pela qual essas barras de navegação agora atrás todas as outras cartas aqui é porque estamos satisfeitos no início e em nosso painel Camadas, ele deve ser menor do que esses outros itens. E podemos confirmar isso acessando nosso painel Camadas aqui. E como eu mencionei aqui, como você pode ver, na parte mais baixa das camadas, enquanto nós queríamos realmente estar no topo. E como você pode ver, agora vamos em frente e abordaremos nosso protótipo, o que é incrível. Agora, uma coisa que queremos fazer é aumentar a barra de status porque isso deve estar no topo da barra de navegação. E faça a mesma coisa. Faça a posição fixa ao rolar. Novamente, você pode fazer a mesma coisa no modo protótipo e você pode ir em frente e clicar em posição fixa e ao rolar, e eu alcançarei o mesmo resultado para você. Perfeito, então é assim que você conserta objetos. Então, quando você está rolando e protótipo, agora que conexões precisamos daqui? Precisamos de uma conexão para nos levar volta à página do restaurante aqui. E precisamos de um para nos levar à página do carrinho ou a página do pedido talvez conecte um desses cartões para ir para essa página de pedido também. Agora que estou pensando que um botão aqui seria bom em nossa página de menu. Tão semelhante ao que temos em nossa página de histórico de pedidos. Então, em vez de iniciar um novo pedido, eles podem ir ao carrinho ou ir em frente e concluir os pedidos. Então, vamos voltar para a guia Design. E, novamente, a grande parte prototipagem é que, à medida que você está passando pelo protótipo, você começa a perceber certos elementos de experiência do usuário que você está perdendo. Dessa forma, você pode ir em frente e copiar esses elementos ou criar esses elementos em seus designs enquanto estiver passando por prototipagem. Então, vamos ir em frente e copiar essas duas camadas que retângulo, isso é um gradiente aqui e o botão usando o Comando C e volte para a página do menu e copie-as ou cole-as aqui. Porque isso está fora da nossa porta de visão aqui, não podemos realmente vê-lo. Então, queremos ir em frente e trazer isso acima desta linha para a direita quando tocar essa linha. E vamos seguir em frente e fazer uma posição fixa ao rolar para ambos para que assim eles não se movam. Acho que parece muito bom. Agora, em vez de começar, em vez de iniciar um novo pedido, isso deve dizer ir ao carrinho ou ir para o pedido. Lá vamos nós. Para que você possa ir em frente e pressionar isso do trimestre ou de um ano para ir para a mesma página. Vamos criar essas conexões com o botão aqui embaixo e uma das cartas aqui. Para fazer isso, vamos para a opção de restaurante aqui, alternar por dois prototipagem. Agora lembre-se, você pode criar outro tipo de interação em vez disso, que é criar essa interação. E no topo, em vez da transição, você pode fazer a Prancheta Anterior que fará a mesma coisa. Então isso levará o usuário de volta à prancheta anterior da qual ele veio. Nesse caso, se eles pressionarem esse botão e pressionarem o restaurante, ele os levará de volta a esta página. Então, em vez de criar uma conexão de volta a esta página, você também pode fazer isso. Isso é super legal. Crie também uma conexão entre nossos cartões com a página de pedido ou um tapete. E aqui e no botão “ Pedido” aqui, clique no botão do carrinho aqui, arraste a conexão. E vou deixar tudo como está aqui. Para a página do pedido. Vou fazer a mesma coisa. Agora nossas conexões para essa página devem ser concluídas agora. Veja, Perfeito. Isso é muito bom. Vamos voltar na próxima palestra para continuar criando mais conexões. 82. Como criar conexões de componentes: Portanto, com essas conexões criadas entre o menu e a página do pedido, agora incompleta ou página de pedido e as conexões no modo protótipo. Vamos seguir em frente e clicar nisso de volta ao Menu e seguir em frente e clicar neste botão aqui para criar uma conexão. E vamos seguir em frente e clicar na prancheta anterior. E enquanto estamos aqui, por que você não vai em frente e conecta nosso botão de menu aqui para esse perfil de barra de menu aqui. Vá em frente e minimize isso para que possamos ver aqui. E vamos fazer uma transição aqui. E vamos fazer, em vez de nos dissolver, vamos deslizar para cima. Então, ele desliza para cima da tela. Agora que criamos essa conexão, é claro que posso ir em frente e adicionar a mesma conexão entre nosso botão de menu nesta página e o menu aqui também. Mas uma coisa que podemos fazer porque estamos criando a mesma conexão entre esse botão e a mesma página é que, na verdade, vamos em frente e criamos um componente a partir desse ícone de menu. Desde que o usamos em vários lugares também. E então só crie a conexão uma vez e seja feito com ela e com todas as outras páginas. Então, para fazer isso, vamos voltar para a nossa guia Design. Vamos seguir em frente e copiar um dos botões de menu para nossos componentes aqui. Vamos seguir em frente e apertar o Command K para fazer disso um componente. E eu gostei do nome como é, ícone do menu de hambúrguer. E agora aqui, vamos em frente e agora vamos seguir em frente e arrastar este ícone do menu de hambúrguer aqui. E basta colocá-lo em cima daquele outro que temos. E eu vou primeiro copiar este, e depois voltar para as camadas e excluir este outro grupo embaixo dele para o outro, para aquele que não é uma instância. E vamos fazer a mesma coisa pela nossa página de pedidos. Vamos apenas ir em frente e excluir isso e clicar em toda a prancheta e apertar Command V. Mesma coisa para a ordem Progress page Command V, porque excluímos essa conexão agora que tínhamos agora se foi. Mas o que podemos fazer agora é ir em frente e ir ao nosso componente, voltar ao protótipo e conectar esse botão ou esse componente a esta página de perfil. Vamos deixar as opções que deslizam para cima, facilidade para entrar e sair e 0,4 segundos. E agora o que acontecerá é em todos os lugares que estamos usando esse botão terá essa conexão entre a parte inferior e a página do menu. Acabei de notar que não copiei corretamente a instância na minha página principal. Então, vou seguir em frente e apenas excluir esse aqui e copiar um daqui para a nossa página principal, então é a correta. Agora, se você realmente clicar em cada um desses botões de menu, verá que a conexão foi copiada da conexão de componente que criamos. Vá em frente e mova isso aqui com meu outro botão de fechar e , em seguida, clique na página principal e clique em visualização da área de trabalho. Posso ir ao menu a partir daqui. Se eu clicar na página do pedido, você pode ir para a conexão a partir daí. A mesma coisa da página Progresso do pedido , o que é incrível. É assim que você pode realmente usar componentes para criar uma conexão e fazer com que todas as suas instâncias copiem ou transportem essa interação em todos os projetos. Agora vamos prosseguir e concluir a página do pedido e as conexões aqui. Queremos ir em frente e conectar a ordem policial à página Progresso do pedido. Para a transição, vamos fazer um pouco à esquerda. Mantenha tudo o resto como está em nossa página Progresso do pedido. Vamos seguir em frente e clicar nesta nota e criar a ação anterior da prancheta. Então, essas são as conexões da nossa página de pedidos. Vamos voltar na próxima palestra para trabalhar em nossa página Progresso do pedido e saber como podemos abrir sobreposições usando protótipos. 83. Como criar sobreposições: Acho que é hora de tentarmos a sobreposição porque na nossa página Progresso do pedido aqui, como mencionei nas palestras anteriores, queremos ir em frente e criar uma conexão entre nossa ordem de edição sobre aqui e esta folha de ações da interface do usuário aqui. Para fazer isso. Em vez de ter isso aberto como uma página separada, o que não estaria correto. O que queríamos que fizéssemos é aparecer no topo desta página como uma sobreposição. Para fazer isso, podemos simplesmente criar uma conexão em nossa guia de protótipo entre nossa ordem de edição e nossa folha de ações aqui. Mas uma coisa que você pode notar é que, se você tentar criar uma conexão agora, ela não funcionará porque nossa folha de ação é na verdade, em vez de nossa área e não está em um quadro de arte. Então, sempre que você quiser criar uma conexão, você precisa ter um quadro de arte em torno desse objeto. Então, para corrigir isso, vamos voltar para a nossa guia Design e apertar. Vá em frente e desenhe um quadro de arte ao redor desta folha de ação. Vamos seguir em frente e remover o preenchimento porque não queremos sentir por isso. Vou sair dessa prancheta de arte e me certificar de que nossas folhas de ação centralizaram uma prancheta mais longa aqui. Acho que isso é muito bom aqui. Vamos prosseguir e renomear isso ou editar a folha de ações do pedido. E agora podemos ir em frente e criar essa conexão no modo de protótipo entre essa ordem de edição e nossa placa de arte de folha de ação. Mas em vez de fazer a transição, vamos seguir em frente e clicar em sobreposição. E assim como você pode ver a linha aqui, ela meio que mudou para uma linha tracejada para mostrar isso como uma sobreposição e não uma transição. As opções aqui são praticamente as mesmas. Está perguntando de onde você quer animar? E geralmente as folhas de ação são animadas a partir da parte inferior da página. E então o que acontecerá é que você terá esse pequeno pop-up aqui onde ele irá em frente e perguntará, onde você quer que essa sobreposição apareça para que eu possa realmente ir em frente e escolher. Estamos exatamente na minha página. Eu quero que isso apareça? Eu quero que ele esteja no centro, mas eu queria estar no topo ou quero que fique no fundo. Posso mover isso como eu gostaria. Normalmente, temos isso na parte inferior e, como você pode ver, ele criará esse tipo de efeito de sobreposição. Então, ele vai me mostrar o que isso realmente pareceria assim que aparecer na minha página, acho que aqui é perfeito. Agora, por padrão, você obterá essa conexão aqui, que, por cima, iremos em frente e o levaremos para a Prancheta Anterior. Portanto, se você clicar em qualquer lugar da folha de ação, ela seguirá em frente e, essencialmente levará para a prancheta anterior, que significa que iremos em frente e fecharemos essa sobreposição. Podemos testar essa sobreposição visualizando ainda aqui. E vá em frente e clique nesta página. Então, vamos diretamente para esta página clicando em Editar ordem, essa folha de ação aparecerá e clicando em qualquer lugar. Vamos em frente e descartaremos isso. Você clica em qualquer lugar lá fora. Ele também descartará essa folha de ação. Então, neste momento, se você for em frente e atribuir todas as conexões desejadas, então, se quiser criar, digamos que uma página para eles cancelarem o pedido ou entrar em contato com o restaurante. Você também pode fazer isso. Mas, essencialmente, é assim que você cria sobreposições em seus designs. Esta é uma maneira legal de pranchas pop art umas sobre as outras oposição à transição entre elas. Agora, está chegando na próxima palestra para explorar o auto animate na prototipagem. 84. Como usar o Animate: Com o objetivo de mostrar como o auto animate funciona no protótipo. Porque eu acho que é super legal e pode ser realmente útil em UIs mais complexas. O que eu quero fazer é seguir em frente e duplicar esta página Progresso do pedido e criar outro estado da página Progresso da ordem. Essencialmente, podemos ter outro estágio que o progresso deste pedido pode ser entregue ou talvez a caminho do cliente. Então, vamos seguir em frente e apenas fazer duas pequenas alterações e ver como o animate automático funciona. E para fazer isso, vou seguir em frente e mover esta folha de ação para cá. Vá em frente e clique na página Progresso do meu pedido, mude para a guia de design e pressione Command D. O que eu quero nesta página é ir em frente e mover o círculo para algum lugar aqui, mais próximo entregue usando Shift e as teclas de seta para a direita. E em vez de dizer que seu pedido sendo preparado pelo restaurante ou vamos ir frente e mudar isso para o seu pedido está sendo entregue a você pelo Sam. Vá em frente e saia de lá. Agora, o resto das coisas aqui, queremos seguir em frente e mantê-lo o mesmo na nossa água e na nossa página Progresso do pedido. Vamos prosseguir e criar uma conexão entre a ordem RVU. Vá em frente e clique no nó aqui e faça no topo. Vá em frente e vá para a prancheta anterior. O menu já está conectado porque é um componente. E duas conexões que queremos criar aqui é seguir em frente e criar uma conexão entre o endereço aqui para nossa página de localização aqui. E em vez de sobreposição queria fazer a transição, eu queria deslizar para cima. Mas a coisa legal com protótipos, se você tiver a mesma conexão entre os mesmos objetos em páginas diferentes, você pode ir em frente e pressionar o Comando C nessa conexão. Clique no outro quadro de arte onde você tem esse botão e cole essa conexão lá também. E vá em frente e cole a mesma conexão entre todas as suas páginas. Agora esse botão está conectado e tudo o que precisamos fazer é criar uma conexão entre esta página Progresso do pedido para o traço de progresso do pedido. Vamos ir em frente e realmente renomear isso para Dash sendo entregue. Agora, vamos em frente e criar uma conexão desta página para esta página aqui. Em vez de tocar, vamos seguir em frente e cumprir o tempo. E por atraso, vamos escolher cinco segundos aqui. Claro, é uma ótima velocidade de entrega se isso fosse realmente em tempo real. Vamos seguir em frente e escolher o tipo auto animate. Isso é o que acontecerá é que o XD tentará animar todos os itens e os objetos nessa página Para os itens desta página. Portanto, se os mesmos itens estiverem presentes, iremos em frente e tentaremos criar uma animação entre esses itens, posições ou texto e assim por diante e assim por diante. Como nós movemos, por exemplo, essa elipse para cá, XD seguirá em frente e entenderá que é a mesma elipse e iremos animá-la entre essas páginas. Então, vamos seguir em frente e fechar nosso protótipo aqui. Selecione a página Progresso do pedido e, em seguida, vá em frente e clique nesta nossa pré-visualização. E depois de cinco segundos, esta página deve animar automaticamente em direção a outra página, o que é incrível. Como você pode ver, a elipse se moveu para cá e os textos meio que desapareceram entre esses dois estados diferentes. Isso é muito legal. Você pode realmente brincar com isso e mover itens. Uma coisa que você quer observar é que você não quer ler as páginas de animação automática que não têm nada a ver umas com as outras. Porque ele irá em frente e criará animação estranha que não é realmente realista. Você deseja usar o recurso de animação automática entre páginas semelhantes, onde a maioria dos elementos é compartilhada. É por isso que essas duas páginas fazem sentido em termos de uso do auto animate. Mas deixe-me não tanto. As páginas entre o restaurante e a página do menu. Isso é essencialmente animação automática e como podemos criar algumas animações legais com a ajuda do XD fazendo a maior parte do trabalho no modo protótipo. Quando voltarmos nas próximas palestras e concluímos as conexões aqui. 85. Completando nosso protótipo: Fizemos um trabalho incrível. Então, para montar o protótipo para nossos modelos móveis de mordidas saudáveis. Deixe-me ir em frente e completar nossa maquete criando o resto das conexões em nossas outras páginas. Vamos até aqui para ver o que mais nos resta, partir do canto superior esquerdo ou da página do menu do perfil. Vamos seguir em frente e vincular cada botão ao lugar certo. Em primeiro lugar, notei que há um erro aqui, pois um botão de login de logout deve estar na parte inferior. Vamos seguir em frente e arrastar isso até o fundo. Uma coisa legal sobre pilhas é que você pode ir em frente e substituir facilmente seus botões. Ele se encaixará diretamente no lugar. Vamos seguir em frente e garantir que esteja no lugar certo. Então, agora vamos seguir em frente e vincular cada botão para onde eles devem ir. Não temos uma página de conta que vamos deixar esse botão sozinho para nosso pagamento. Queríamos ir para a página de pagamento E vamos seguir em frente e mudar o auto animate para transição. Vamos mostrar a animação para deslizar para a esquerda para nossos pedidos anteriores. Vamos seguir em frente e vinculá-lo à nossa página de Pedidos anteriores. E deixe tudo como está para o endereço. Vamos seguir em frente e criar um link para nossa página de localização. Deixe tudo como está, e nosso logout nos levará de volta à página de login aqui. Em vez de deslizar para a esquerda. E vamos seguir em frente e escolher dissolver para a animação em direção à página de logout para o x aqui, vamos seguir em frente e clicar. Eu iria em frente e selecionaria. Em vez de transição, vamos fazer a Prancheta Anterior. Então vamos em frente e fecharemos essa janela e voltamos para onde quer que ela viesse. Para nossa página de pagamento, vamos em frente e conecte o botão Voltar para seguir em frente e clicar e fazer. Digite a prancheta anterior também para adicionar uma página de pagamento. Se você juntou essa página de pagamento que foi dada como um exercício, você pode ir em frente e vinculá-la à sua página de detalhes de pagamento. Caso contrário, você pode deixar isso como é a mesma coisa com o cartão de adição. Vamos seguir em frente e avançar para nossa página de localização e vincular nosso botão Concluído para adicionar uma interação aqui e digitar Prancheta anterior. A mesma coisa com esse endereço aqui. Vamos adicionar uma interação e a Prancheta anterior. Tudo o resto parece limpo. E para nossa página Pedidos anteriores, a única conexão é que queremos fazer aqui é o botão Voltar aqui. Então, vamos tocar novamente e Prancheta Anterior para o nosso anúncio. Queríamos ir à pasta do restaurante eles podem navegar nos restaurantes e começar um novo pedido. Nós vamos nos dissolver para a animação e começar um novo pedido. Também faremos a mesma coisa. Volte para nossa página principal se dissolverá como a animação. Vamos avançar e visualizar nosso protótipo no modo desktop e ver se eles estão perdendo alguma coisa aqui. Então, aqui vamos seguir em frente e pressionar login. Clique em Avançar em nossa verificação por telefone. Agora, porque só temos três opções, não há rolagem aqui verticalmente. Podemos ir em frente e clicar no menu aqui para testar isso, fechar o menu. Vamos seguir em frente e clicar nesta primeira opção, ordem do navegador. E eu veria que já temos um problema aqui. Então, vamos seguir em frente e garantir que nosso botão ir para Pedido esteja aderindo à mesma posição verticalmente. Então, vamos selecionar o botão e fazer a posição fixa ao rolar. E isso deve consertar isso. Lá vamos nós. Podemos fazer o pedido ou cartões para ir para a página do pedido. A partir daqui, podemos clicar no endereço para alterar o endereço, se desejar, ou clicar em Concluído. Vamos ver. Sim, para salvar o endereço funciona muitas palavras daqui para estar no lugar. Nosso pedido, o progresso da ordem CR e, depois de alguns segundos, ele deve mudar para um estado diferente, o que é incrível. Usando o animate automático. Isso deve funcionar muito perfeito. Portanto, não vinculamos ou reordenamos botões. Vamos seguir em frente e selecioná-lo no tipo. Prancheta anterior. Isso também deve funcionar. Lá vamos nós. Faça o pedido funciona. Muitas palavras daqui também. Não temos uma página de conta. O pagamento funciona conforme o esperado. Pedidos de aprovação funcionam conforme o esperado. A única coisa que temos que fazer é apenas bloqueá-los, a barra de navegação e o botão aqui. Então, vamos seguir em frente e fazer isso aqui. Vamos selecionar o botão aqui, mantenha pressionada a tecla Shift e selecione o retângulo embaixo. Faça a posição fixa ao rolar. E a mesma coisa com nossa barra de navegação e barra de status aqui. E certifique-se de que trazemos esses dois até o painel de camadas. Se você notar, temos que trazer nosso novo pedido Iniciar todo o caminho até aqui para que ele esteja dentro do nosso quadro de viewport. Lá vamos nós. Agora isso deve se preocupar. Podemos iniciar um novo pedido e bater mordida na página do restaurante e repetir esse processo novamente. Por fim, se você fizer logout e nós vamos em frente e nos levaremos de volta para esta página de login aqui. Então, lá temos isso. Esse é o nosso fluxo para nosso protótipo. Nós montamos um protótipo muito bonito e vamos voltar nas seguintes palestras para testá-lo em nosso próprio dispositivo móvel. E então aprenda como podemos compartilhar esse protótipo com outras pessoas. 86. Pré-visualização de dispositivos móveis: Tudo bem, então reunimos nosso protótipo e o testamos em nossa pré-visualização de desktop, e ele ficou muito bom. Agora eu quero ir em frente e mostrar como você pode realmente visualizar seus protótipos em seu dispositivo móvel real. Se você for aqui e clicar na visualização do dispositivo, XD irá em frente e solicitará que você conecte seu dispositivo iOS ou Android ao XD usando um cabo USB para prosseguir e visualizar seus projetos em em tempo real. Agora, para fazer isso, você pode ir em frente e seguir para este link, ou na sua App Store ou Google Play Store, você pode ir em frente e procurar o Adobe XD. E vou mudar rapidamente para o meu telefone agora para mostrar como isso funciona. Quando você estiver na App Store ou na Google Play Store, vá em frente e pesquise no Adobe XD. Este deve ser o que você está procurando. É o Adobe XD. Podemos ir em frente e visualizar seus protótipos. Vá em frente e baixe isso. Quando terminar de instalar, vamos avançar e abri-la. Agora pode solicitar a você sobre notificações e tal. Só vou em frente e pular este passo por enquanto. Não, você será solicitado a fazer login dentro da conta. Portanto, quero continuar com a Adobe e fazer login com minha conta da Adobe. Quando você estiver logado, você será analisado pelo tutorial aqui, onde poderá prosseguir e aprender como usar este aplicativo. Uma coisa importante é notar que, a qualquer momento, você pode tocar duas vezes para acessar o menu enquanto estamos provando ou mock-ups. Enquanto estamos preparando nosso protótipo, você pode clicar três vezes para ir ao menu. Então, isso é uma coisa que vamos tomar nota. Então vamos seguir em frente e clicar em Ok, quando você estiver aqui, vamos seguir em frente e clicar nesta pequena aba aqui chamada Live Preview. E então vou seguir em frente e pegar meu cabo USB. Você faz o mesmo. Conecte isso ao laptop e, em seguida, conecte o telefone. Uma vez conectado, x é automaticamente aberto no aplicativo, como você pode ver, e está nos avisando aqui que eu não apontei. Podemos tocar duas vezes para acessar o menu. Vou seguir em frente e clicar longe. Então, agora, levou-nos diretamente para a página de login de mordidas saudáveis. É claro que, assim como antes, posso ir em frente e selecionar uma página diferente e ver essas páginas no meu dispositivo. Posso ir em frente e até fazer alterações. Por exemplo, posso ir em frente e mudar para a minha guia Design aqui no XD, mover as coisas e, ao mesmo tempo, ver essas mudanças ao vivo acontecerem em nosso aplicativo, o que é super legal porque você pode fazer pequenas alterações e ver como elas se parecem em um dispositivo real vez de apenas em uma área de trabalho. Como isso realmente lhe dá a representação visual do que o usuário verá e sentirá enquanto estiver usando este aplicativo móvel. Como é destinado a um dispositivo móvel. A partir daqui, você pode ir em frente e interagir com seu protótipo. Como você costuma fazer. Vá em frente para ir ao menu, navegue por páginas diferentes exatamente como você esperaria, duas coisas a observar é que, se você rolar para a esquerda e para a direita, ele seguirá em frente e mostrará páginas diferentes. Então você poderia fazer isso também ou passar pelo protótipo real como faria. Você pode notar alguns dos botões aqui e coisas assim podem não aparecer corretamente. Se você vir esse botão de ponto de interrogação, geralmente significa que o ícone não era importante corretamente ou exibido corretamente aqui, uma das outras coisas legais é que, se você clicar em qualquer lugar aleatoriamente, XD mostrará ou destacará exatamente onde você deve clicar para interagir com o protótipo aqui. Então, se eu clicar em qualquer lugar fora disso, ele irá em frente e me mostrará. Você só pode tocar nessas áreas para interagir com seu protótipo neste quadro de arte específico, o que é super legal. Então, se eu for em frente e tocar duas vezes no visor, seguirei em frente e me dará algumas opções. Podemos ir em frente e compartilhar esse verde como uma imagem de sua vida. Há algumas outras opções para ocultar esses pontos de acesso sobre os quais acabamos de falar ou desativar o site para navegar para que você possa deslizar para navegar neste protótipo, você precisa na verdade, interage com ele. Você pode ir em frente e brincar com essas opções ou adicionar qualquer ponto, basta ir em frente e sair do protótipo. É assim que você pode visualizar seu protótipo em um dispositivo real. Vamos voltar na próxima palestra para saber como podemos realmente compartilhar esse protótipo com outras pessoas. Então eles também podem visualizá-lo também. 87. Compartilhando protótipos: Criamos esse ótimo protótipo interativo e ele funciona muito bem com isso. Sente-se na visualização da nossa área de trabalho e também em nossos dispositivos móveis. Então, como compartilhamos esse protótipo com outra pessoa? Eles também podem explorar e ver como esse produto funciona, seja um cliente ou um membro da equipe. Como realmente compartilhamos esse protótipo com eles? Bem, na verdade, é super simples. Vá até a guia Compartilhar. E daqui, se você simplesmente criar um link para o seu andar aqui. Então, porque já temos esse fluxo que criamos pressionando create link, não só estamos carregando os desenhos e as placas de arte aqui, mas também essa interatividade entre todos as páginas que criamos. Assim que esse link for gerado, vou em frente e copiarei esse link para o seu navegador de onde você pode inserir esse URL. E agora, desta vez, como você pode ver, esse design agora funciona como um protótipo, semelhante à visualização da nossa área de trabalho. Se você tocar em qualquer lugar fora, ele nos mostrará exatamente onde esse ponto de acesso está, onde podemos tocar e interagir com nosso protótipo. Isso é super legal, é exatamente o que queremos para compartilhar com alguém. E eles ainda podem deixar comentários como fariam com apenas os próprios designers. Mas agora esse design é interativo e o protótipo também está disponível por meio desse link. Agora lembre-se, nós criamos um flúor agora. Portanto, esse é o fluxo para usuários que são novos no aplicativo. Mas também podemos criar outro fluxo, por exemplo, para um usuário que já está conectado ao aplicativo e não precisa passar pelas páginas de inscrição iniciais. Na próxima palestra, vamos explorar como podemos criar outro fluxo. Mas antes de fazermos isso, também quero mencionar que você pode compartilhar totalmente esse link com alguém que está usando um navegador em seu dispositivo móvel e eles podem realmente visualizar este aplicativo no seu dispositivo. Agora, a experiência deles pode não ser tão boa quanto tê-la no aplicativo Adobe XD em seu telefone ou no telefone do cliente. Mas será muito próximo disso em termos de interatividade e abertura dos diferentes links e outras coisas ao ver as diferentes conexões que fizemos e tal. Então é assim que você compartilha seu protótipo com outra pessoa. E vamos voltar a próxima palestra e criar um novo fluxo para o nosso protótipo. 88. Vários fluxos: Aprendemos a criar um fluxo no protótipo. Essencialmente, um fluxo nos permite escolher onde nossos protótipos começam e onde ele termina. Esse fluxo atual, que por padrão é nomeado para um. usuário passa pela tela inicial, vai para a página de login e assim por diante. Mas digamos que queremos criar outro fluxo para um usuário que já está conectado e queremos que ele vá diretamente para a página principal. Como fazemos isso? Bem, vamos voltar à nossa página de protótipo e vamos seguir em frente e clicar nesta página principal e clicar neste pequeno ícone Home ao lado da página principal. Então agora criamos outro fluxo que está acontecendo agora a partir daqui, podemos realmente ir em frente e escolher onde será nosso ponto de partida nesse novo fluxo. E se você quiser ir em frente e visualizar esse fluxo, podemos seguir em frente e clicar no fluxo. E podemos ir em frente e renomear o fluxo. Então, em vez de flutuar para, poderíamos fazer login com usuários. Podemos alterar esse fluxo para novos usuários. Agora, em nossos usuários de login, podemos ir em frente e visualizar como seria isso. Como você pode ver, fomos diretamente ao restaurante oposição ao novo fluxo de usuários. Se você clicar, o novo fluxo de usuário nos levará pelo fluxo de inscrição e todas essas páginas antes de chegar à página principal. Agora podemos até ir em frente e compartilhar esse fluxo específico com outra pessoa. Ao escolher os usuários de login, você pode criar um link e compartilhar esse link em vez do novo link de fluxo de usuário. Agora, uma coisa que eu quero observar é que, se você não tiver a conta atualizada, você pode estar limitado a apenas um fluxo. Assim, você pode ir em frente e ir para os links gerenciados aqui e ir em frente e excluir qualquer outro fluxo e certificar-se de que você tem apenas um andar para poder compartilhá-lo ou criá-lo link no Adobe XD para ele. É assim que você pode criar vários andares para seu protótipo, dependendo de qual estágio talvez os usuários adicionem ou que tipo de usuário eles são e assim por diante e assim por diante. Coisas muito legais que podemos criar esses múltiplos fluxos. Dessa forma, podemos fornecer aos nossos clientes que acessam certos fluxos diferentes. Qual a diferença entre cada estado poderia ser. Com nosso protótipo e marcações durante a conclusão do rush , estamos perdendo algumas coisas. Aqui estão alguns retoques que prometi que voltaremos e isso é uma pequena animação em nossas páginas de progresso de pedidos. Então, por que não voltamos na próxima palestra e usamos um plugin chamado Lottie para adicionar essas animações. 89. Animação Lottie: Nossos protótipos estão ótimos. Quero ir em frente e adicionar uma pequena animação à ordem da página Progress. Se você se lembra. Para a página Progresso do pedido, deixei um pouco de espaço aqui para mostrar ao usuário em que estágio eles são encomendados preparativos. Adicionar uma pequena animação ao seu design pode realmente melhorar a qualidade da experiência do usuário e todo o design. E um ótimo recurso para fazer isso é a ferramenta aqui chamada Lottie files. Você pode ir ao lobby files.com, escrito assim. Quando você estiver lá, iremos frente e nos inscreveremos para uma conta. Quando você estiver logado, iremos em frente e continuaremos aqui. Posso selecionar Designer. Vamos. Agora estamos logados aqui. E agora vamos em frente e vamos para a guia de plugins aqui. Vamos seguir em frente e adicionar um plugin e procurar por Lottie. Depois de pesquisar se o primeiro deve apresentar os arquivos Lori para a frente, nós XD, vamos em frente e instale-o. Pode demorar um segundo aqui. Depois de instalado, você pode ir em frente e clicar em Open XD e usá-lo daqui. Agora pediremos que você faça login através do seu navegador. Então vá em frente e clique em Login. E assim que você clicar nisso, ele pedirá que você conceda acesso aos seus arquivos. Para ir em frente e clicar em conceder acesso. Lá vamos nós. Estamos conectados ao nosso plug-in Adobe XD. O que estamos aqui, vamos seguir em frente e clicar em Pesquisar e procurar cozinhar. Pensando bem, vou usar este aqui ou a comida aqui. Então, vamos seguir em frente e clicar no progresso do pedido e clicar em uma pequena animação. Agora, algumas das animações têm um fundo branco. Então este eu achei que não o tem. Então, é o que eu gosto. Vamos prosseguir e inserir isso aqui. Queremos inseri-lo como latae, que iremos em frente e será jogável. Quer torná-lo menor para que ele se encaixe aqui. Agora podemos visualizar isso para ver o que parece em apenas um segundo. Agora, como esta é uma mídia interativa, você pode ir em frente e escolher a reprodução em loop, que é o que queremos. Já que queríamos continuar jogando repetidamente e queríamos jogar automaticamente. E então podemos ir em frente e até optar por editar a reprodução e adicionar qualquer atraso ou gatilho ou qualquer coisa assim. Mas nós realmente não queremos mudar isso. Então, vamos ir em frente e voltar ao nosso design e escolher jogar automaticamente, e então vá em frente e visualize essa página no nosso, vou continuar e voltar aqui e visualizar essa página em nosso desktop pré-visualização. Acho que isso parece muito legal. Fazemos com que pareça um pouco menor para que ele não interaja ou se sobreponha com as outras partes de nossos projetos aqui. Então eu acho que isso parece melhor, então sim, isso parece muito melhor. Perfeito. Então, deixarei a página do progresso do pedido sendo entregue para você como um exercício para fazê-lo, vá em frente e use a Lottie para encontrar uma animação para sua página de entrega e, em seguida, faremos isso juntos no próximo palestra. 90. Como adicionar uma animação de entrega: Vamos ver se podemos criar uma animação para usar em nossa página que está sendo entregue também. Vá em frente e minimize isso e retorne aos arquivos Lottie. E vou ir em frente e clicar de volta e vamos procurar a entrega. Vamos ver o que vem lá em cima. Aquele parece legal. Na verdade. Leia também a versão aqui. Então, vamos em frente e selecione este aqui e inseri-lo em nossa página que está sendo entregue como Lawdy, indo em frente e torná-lo um pouco menor. E coloque-o no meio da nossa tela aqui. Certifique-se de que ele esteja centrado. Perfeito. Agora. Agora vamos seguir em frente e fechar isso. E agora o problema aqui com a visualização da área de trabalho é que, se fizermos loop dessa animação, ela não nos levará a essa outra página depois cinco segundos como tínhamos antes. Então, uma coisa que vou fazer na guia Protótipo é que vou seguir em frente e mudar esse tempo para tocar em vez disso, para que, quando tocarmos na página, vamos em frente e nos levaremos para aquela outra página. Assim como acontece com as animações na época, o recurso na interação do protótipo não funciona tão bem. Vá em frente e teste isso. Agora, temos esta página e, se você clicar, temos a página para a entrega. Acho que isso parece muito bom. Como você pode ver, a animação é realmente apimentar nossos designs. E eu realmente gosto do que fizemos até agora. Uma coisa que notei é que nossa ordem de visualização aqui não funciona tão bem porque é suposto nos levar volta à página do pedido, mas não funciona. Então, em vez do toque para Prancheta anterior, nós vamos realmente enviá-lo para o quadro de arte da ordem. Em vez de nos dissolver, vamos fazer uma taxa leve. Vamos apenas testar isso. Certo, parece certo. Agora ele funciona exatamente como esperado. Sinta-se à vontade para percorrer seus designs e seus protótipos. E se houver pequenas alterações que você precisa fazer ao longo do caminho, faça-as e certifique-se de que seu design seja polido antes de enviá-lo para um cliente ou colega. Lá nós o temos. É assim que você pode usar animações Lottie para criar pequenas animações legais dentro de seus protótipos com bomba falsa. Outra coisa legal que você pode fazer é realmente importar vídeos e usar vídeos semelhantes a como usamos essas animações em seus designs. Coloquei um vídeo nos recursos deste projeto como um pequeno exercício, quero que você vá em frente e use esse vídeo como pano de fundo nesta página de login. E então vá em frente e também coloque uma sobreposição sobre ela para que ela não se misture com nosso primeiro plano aqui, que são os campos, os botões e o logotipo. Então vá em frente e demore um segundo para fazer isso. E, na próxima palestra, vamos inserir esse vídeo juntos também. 91. Como adicionar vídeos: Tudo bem, então vamos inserir um vídeo em nossa página de login. Portanto, nos recursos ou nos ativos do aplicativo para este projeto, você deve encontrar uma página de login, dash video dot mp4. Este vídeo foi baixado por cortesia de Pexels.com. Eles fornecem ótimos recursos. Agora, eu tenho que dar crédito à pixels.com por fornecer este vídeo. Eles têm muitos vídeos que você pode pesquisar para seus projetos e são totalmente gratuitos, o que é incrível. Então, vou deixar você explorar esse recurso. Enquanto isso, vamos aprender como inserir esse vídeo em nossa página de login. Assim como as imagens, importar vídeos é tão simples quanto arrastar um vídeo para o arquivo XD. Agora, uma coisa a observar é que seu vídeo deve ter no máximo 15 megabytes. Portanto, talvez seja necessário compactar seus vídeos se eles forem um pouco maiores. Este, como você pode ver, já é enorme, então talvez você precise ir em frente e, antes de tudo, vamos nos certificar de que estamos na nossa guia Design e vamos encolher nosso vídeo para caber em nosso quadro por aqui e depois vá em frente e centralize-o. Certifique-se de que está cobrindo totalmente a altura. Queremos seguir em frente e colocar esse vídeo na parte inferior da página. Provavelmente é um bom momento para trocar nosso logotipo do Healthy Bites. Vá até a biblioteca e defina-a como nossa cor de destaque. E a mesma coisa para nossa senha esquecida aqui. Não queremos que ele se misture e queremos criar esse contraste entre o plano de fundo e o primeiro plano. Agora, se você jogar isso, vamos ver como isso ficaria em nossa versão prévia para desktop. E mais uma coisa: queremos seguir em frente e configurar o play on top, que reproduziria este vídeo. Quando tocamos no vídeo, queríamos reproduzir automaticamente. Eu quero clicar aqui. E agora, a partir daqui, você pode realmente cortar o vídeo. Podemos encurtá-lo se você quiser. Escolha exatamente quanto tempo queremos que dure. E podemos optar por repeti-lo e se queremos que o áudio seja reproduzido ou não. Então, vamos silenciá-lo. também podemos escolher até mesmo a foto em miniatura Aqui também podemos escolher até mesmo a foto em miniatura para ela. Então, queremos repetir a reprodução e podemos até testar para ver como ela ficará a partir daqui. Ou podemos seguir em frente e simplesmente reproduzir nosso novo fluxo de usuários e ver como isso aconteceria. Linda. Eu acho que parece incrível. Agora está um pouco cheio aqui. Então, se você decidir usar o vídeo, eu recomendo tirar essas duas imagens das tigelas de comida para que possamos nos livrar delas e deixá-las um pouco mais limpas aqui. Lá vamos nós. Muito melhor e muito mais arrumado. E se você quiser adicionar uma sobreposição a esta página, ou podemos simplesmente criar uma camada retangular na parte superior para cobrir toda a prancheta. Clique nele e mude o preenchimento para preto. Remova a fronteira e defina o ritmo da cidade como desejamos. Mas queremos seguir em frente e garantir que colocamos essa camada retangular em cima do vídeo e abaixo de todo o resto. Assim, podemos controlar isso com base no quão escura queremos que a sobreposição fique em relação ao vídeo. Nesse caso, podemos até mesmo alterar sua barra de status para branca. Lá vamos nós. Acho que parece muito melhor. Então aí está. É assim que podemos adicionar vídeos e fundo com o Adobe XD. Agora, com isso, isso encerra nosso projeto de design móvel. Fizemos um trabalho incrível e voltaremos em futuras palestras para trabalhar no site ou na página de destino para refeições saudáveis. 92. Requisitos de página de destino: Ou é assim que fizemos um trabalho incrível com nosso aplicativo móvel e montando um protótipo e aprendendo como podemos compartilhá-lo com nossos membros da equipe, colegas e clientes e assim por diante. Nesta parte do curso, iremos em frente e aprenderemos como podemos realmente montar uma landing page usando o Adobe XD para o mesmo cliente, mordidas saudáveis. Nesta palestra, vamos passar rapidamente por alguns dos requisitos que temos para esta landing page, que essencialmente é um site para essa empresa que permite aos usuários saiba mais sobre o que essa empresa faz em uma espécie de design de site de uma página. Assim, eles podem aprender mais sobre mordidas saudáveis antes de optarem por baixar o aplicativo e se inscrever e usá-lo. Portanto, nossos clientes nos pediram para reunir quatro seções para esta landing page. Então, a parte superior e a primeira seção, que geralmente é o que você vê nos sites hoje em dia, é uma pequena seção de cabeçalho, que normalmente inclui algum tipo de imagem ou vídeo em segundo plano, ou algum tipo de design com um logotipo, com uma barra de navegação que nos permite ir entre diferentes partes da landing page e um pequeno slogan de empresas, que é tudo fornecido nos recursos para a palestra. Então vá em frente e tome um segundo para baixar esse recurso, que inclui todos os ativos que precisamos para o design da nossa landing page. Também queremos uma pequena seção Baixar aplicativos. Então, nesta seção, teremos uma pequena captura de tela do aplicativo com o crachá de download para a App Store. Você pode ir em frente e clicar nisso para baixar o aplicativo em seu dispositivo. E então eles também querem que incluímos alguns outros restaurantes populares como pequenos cartões. Em uma seção de restaurante. Ele terá uma pequena seção de restaurantes onde contaremos talvez três ou quatro de seus restaurantes e permitiremos que eles vejam quaisquer restaurantes ou bytes insalubres em uma pequena vista de cartão legal. E então teremos um pequeno formulário Fale Conosco no final com algum nome e campo de e-mail e uma pequena foto de sua equipe. Muito simples, bem simples para a página de destino da Seção. Então, quando começamos nosso projeto de design móvel, como você se lembra, baixamos os ativos de design do aplicativo. Agora, para este projeto web, vamos realmente seguir em frente e usar o modelo ou o kit de plataforma bootstrap para XD. Se você for até este link aqui, ou se você simplesmente Google Bootstrap, Adobe XD, poderá encontrar esta página onde poderá levar as crianças daqui. A partir daqui, vamos seguir em frente e clicar em pegar o kit. Vou seguir em frente e salvar esse arquivo. E isso deve baixar este kit de bootstrap XD aqui, dxdy. Assim, você pode seguir em frente e clicar duas vezes para abrir isso usando o Adobe XD. Depois de abrir, você poderá encontrar esses ativos da estrutura de bootstrap aqui. Eles já reuniram muitas das coisas que vamos usar em nossos sites, como carrosséis ou cabeçalhos, rodapés, cartões de imagem e assim por diante e assim por diante. Voltaremos nas futuras palestras para usar ativos dessa estrutura em nossa landing page para mordidas saudáveis. Bootstrap é uma estrutura muito popular que permite criar sites com muito mais facilidade porque muitos dos componentes já foram projetados e, portanto, você não precisa fazer um já foram projetados e, portanto, você trabalho redundante quando estiver projetando. É aí que estamos usando o Bootstrap neste projeto. Então, vamos voltar na próxima palestra para esboçar um pouco de pão em todo o tipo de wireframe, certo, com um XD em si. Antes de prosseguirmos e projetamos a coisa real. 93. : Agora que sabemos que são requisitos para este projeto, e seguimos em frente e baixamos esse arquivo Bootstrap XD. Vamos seguir em frente e montar um wireframe de baixa fidelidade para o nosso projeto, certo, com um XD em si. Claro, você pode ir em frente e esboçar o wireframe como fizemos para o design do aplicativo móvel. Mas você também pode fazer esse processo no próprio XD. Algumas pessoas podem achar isso um pouco mais fácil, ao invés de mudar de caneta e papel para digital. Vamos seguir em frente e tentar isso juntos nesta palestra. Primeiras coisas primeiro, vou em frente e vou para a página inicial aqui. E vamos seguir em frente e criar um novo arquivo da Web daqui. E vamos mantê-lo como 1920 por 1080, que normalmente é o tamanho padrão para um projeto web. Então, vamos em frente e abrimos isso e já estamos em um novo projeto. Perfeito. Primeiro, vamos seguir em frente e clicar neste sem título aqui para mudar o nome para saudável por seu site. Vá em frente e salve-o. Lá vamos nós. Então, agora renomeamos o arquivo. Temos nosso primeiro quadro de web art aqui, o que é perfeito. Então, com base na exigência do nosso projeto, sabemos que precisamos de quatro seções em nosso site aqui. Então, por que não seguimos em frente e fazemos essa placa de arte que temos tempo suficiente para caber em quatro seções. Queríamos essencialmente quatro deles se encaixarem nessa landing page. Então a altura aqui podemos ver que é 1080, algo que podemos fazer, o que é super legal. E o XD é que podemos ir em frente e adicionar a essa altura fazendo mais. Não sei, digamos que dez pixels, que agora vão em frente e tornarão esse 1090. Podemos ir em frente e realmente fazer multiplicação também. Então, o que multiplicamos isso por quatro? E irei em frente e nos darei exatamente a duração do projeto que precisamos. Então, isso representará nossa landing page com quatro seções. cérebro, é claro, é apenas uma longa página aqui. Vamos seguir em frente e criar um retângulo para representar cada seção. Então, por que não vamos em frente e criamos um retângulo aqui e depois vamos frente e redimensioná-lo para 1920 por 1080, que é o tamanho correto aqui. E vamos ir em frente e colocar para baixo ali mesmo. Vamos seguir em frente e duplicar esse. Traga um para baixo para representar nossa segunda seção. Mais uma vez. Uma última vez. Lá vamos nós. E agora podemos até ver as seções separadas pela fronteira aqui, que se livrarão de cerca de 0,1. Outra coisa que vou fazer é ir em frente e habilitar uma grade de layout. E vamos deixar isso como está para 12 colunas. E isso parece muito bom. E o Bootstrap tende a usar o tipo semelhante de layout para suas grades. A única coisa que eu quero fazer é ir em frente e trazer a opacidade dessa grade de layout meio baixa, então ela é pouco visível. Apenas o suficiente para que possamos fazê-lo funcionar sem interferir no nosso design. Então, agora que temos isso, vamos em frente e montar o wireframe. Vou usar retângulos aqui são várias vezes para montar diferentes partes do wireframe que eu quero. E então lembre-se, vamos ir em frente e realmente transformar isso em um mock-up um pouco mais tarde. Mas, por enquanto, vamos em frente e criar um pequeno retângulo sobre essa altura aqui e assumir toda a largura. Então essa será nossa barra de navegação. Vou puxar isso, colocar isso no topo. Queremos que essa barra de navegação tenha esse botão principal aqui, que a partir daí poderemos ir em frente e baixar o aplicativo talvez. E vamos seguir em frente e apenas trazer isso para cá. Vou usar minha grade de layout lá para espaçar tudo. E então queremos alguns outros botões aqui para as diferentes seções do aplicativo. Então, é claro, esses botões podem ser um pouco menores do que esses, mas isso estará na nossa barra de navegação e é para lá que ele irá. Vamos ter uma imagem em segundo plano aqui. E então, no lado direito aqui, estou pensando em colocar o nome da empresa aqui, mordidas saudáveis, junto com o slogan. Claro, você pode ir em frente e até adicionar um texto aqui para explicar o que queremos aqui. Então, o que vamos fazer o nome da empresa, sair de lá. Vou seguir em frente e duplicar isso e fazer o slogan das empresas. Lembre-se que isso não precisa ser perfeito. Estamos apenas juntando isso para sabermos o que vai para onde. E então vamos ter os diferentes botões aqui. Então, vamos ter um que vá para, deixe-me ir em frente e centralizar que vai para os diferentes restaurantes, depois um para eles entrarem em contato conosco, e depois um para eles poderem baixar o aplicativo. Assim, terá a imagem em segundo plano aqui. Estes ficariam bem aqui. E vamos seguir em frente e duplicar essas duas camadas aqui. Então, esta será a seção para onde nosso aplicativo irá. Então teremos, vamos seguir em frente e linha central isso e fazer texto para baixar. E então aqui embaixo vamos fazer um pequeno botão para que eles baixem o aplicativo, baixem algo ao longo dessas linhas. E então vamos em frente e criaremos um pequeno retângulo para mostrar onde nosso aplicativo móvel tipo de dispositivo. Pré-visualização. Vamos em frente e duplicaremos um desses textos aqui. Remova esse preenchimento de lá e faça a captura de tela. Saiba exatamente o que é isso. E então faremos nossa seção de restaurantes aqui embaixo. Nós faremos um pequeno título aqui que diz restaurantes populares com todos os cartões aqui. Para o nosso cartão aqui, vamos ter que esticar isso. Traga isso aqui e talvez faça o nome do restaurante. E faça outro, outro retângulo para a imagem do restaurante. Remova o preenchimento daqui e faça a imagem do restaurante. Lá vamos nós. Então, enquanto estamos fazendo isso, também quero mencionar que existem modelos que você pode usar para wireframing no XD. Se você fizer uma pequena pesquisa no Google por kits de wireframing ou modelos para o XD, você pode realmente encontrar alguns deles não utilizados também. Vamos seguir em frente e duplicar esse tipo de cartão quatro vezes. Vamos seguir em frente e selecionar tudo aqui. Agrupe-os junto com o Comando G, acredito. Parece que este aqui não foi adicionado ao grupo. Então, vamos seguir em frente e avançar no retângulo 19 para esse grupo. Remova qualquer preenchimento. Mais uma vez, vamos ir em frente e espaçar as coisas para que ela se encaixe dentro da nossa grade. Algo assim ficaria bom. E, por último, temos nossa seção Fale Conosco. Então vamos ir em frente e copiar isso para um pouco Fale Conosco. Texto aqui. Ao lado, talvez precisemos da imagem da equipe aqui. Então vamos fazer, quando fizermos uma imagem daqui. A equipe de imagens terá nosso formulário aqui no lado esquerdo. Entre em contato conosco. Faremos alguns tipos de campos de texto aqui. Remova o preenchimento aqui, fará nome, campo de texto aqui e e-mail. Pequeno botão aqui para enviar. Isso será um tipo de forma aqui. Juntamente com a imagem da equipe. Meu wireframe, vamos selecionar todos esses retângulos, camadas e simplesmente ir em frente e bloqueá-los assim para que eles não se movam. Isso. Posso ir em frente e , em seguida, selecionar todos esses e agrupá-los juntos e agrupá-los juntos e agrupá-los também. Acho que podemos trazer este um pouco desta forma e deixar esse e trazer este um pouco mais. Talvez pareça melhor. Então vamos em frente e apenas centralizaremos isso ao longo da página. Certifique-se de que todo o resto esteja meio centrado. Tipo de teste o espaçamento de tudo o que temos e veja como era isso. Então, agora, se seguirmos em frente e clicarmos em nosso quadro de arte e tirarmos nossa grade de layout, será capaz de ver como seria esse layout com um wireframe ou como seria esse site com base nisso wireframe. Novamente, isso é suposto ser algum tipo de modelo para o seu projeto. Isso é apenas para nos dar uma ideia do que deve ir, onde, não exatamente como as coisas devem ser ou qualquer um dos detalhes de qual a cor ou quais as fontes devem ser. Isso é simplesmente para nos dizer onde as coisas devem ir e o que deveria estar lá. Agora que temos alguma ideia de usar esse wireframe, vamos voltar na próxima palestra para começar com o design da nossa landing page. 94. Barra de navegação: Para projetar nossa landing page por que não seguimos em frente e duplicamos este quadro de arte aqui, pressionando o Comando D. E então vamos seguir em frente e nos livrar de tudo lá dentro. Então, vamos seguir em frente e apenas selecionar todas essas camadas até os retângulos de cada seção. Para uma seção que temos. Vamos em frente e clique em Excluir. Vamos usar isso e realmente colocar nossos projetos aqui. Vamos usar o wireframe desse lado para realmente gerar a marcação aqui. Vamos prosseguir e renomear este quadro de arte, nossa landing page. Lá vamos nós. E este, nosso wireframe, deixa como referência. Então a primeira coisa que eu queria montar é a barra de navegação aqui em cima. Uma coisa que eu percebo que estou perdendo é que, normalmente, em uma barra de navegação também temos um pequeno nome de barra local da empresa aqui que realmente traz o usuário volta ao topo da página ou de volta para a tela inicial. Isso é o que queremos em nossa barra de navegação. Então, vamos seguir em frente e mudar para o kit de interface do usuário do Bootstrap no XD. E se você não baixou isso, certifique-se de seguir em frente e seguir as palestras anteriores para saber como você pode baixar esta. Depois de fazer o download, você poderá encontrar uma barra de navegação aqui, como você pode vê-la como uma placa de arte chamada navbar, que é o que estamos procurando. Então, é claro, eles têm diferentes tipos de barras de navegação que podemos seguir em frente e usar. Este aqui seria suficiente. Vamos em frente e copiá-lo. A partir daqui. Volte para o nosso site de mordidas saudáveis e cole isso. Aqui. Fui colado aqui. Então, vamos seguir em frente e apenas trazer isso aqui. Agora, porque temos apenas uma página ou aqui, não precisamos realmente fazer disso um componente. Então, vamos seguir em frente e usar isso como está, esticá-lo por todo o nosso projeto. E em vez de 56 altura, vamos dar isso como 70 de altura. Então, um pouco maior. Vamos em frente e agora centralizar esses links e movê-los todo o caminho para o lado direito aqui. Vamos prosseguir e ativar nossa grade de layout aqui. O que eu quero fazer é ir em frente e alinhar esses quadrantes, largura ou grade de layout e esse texto da barra de navegação também, que na verdade queremos ir em frente e substituir por mordidas saudáveis. Lá vamos nós. Agora, os recursos para este projeto aqui temos o logotipo. Vamos arrastar um aqui. E vamos seguir em frente e apenas fazê-lo. Vamos fazer. Agora vamos em frente e bloquear as proporções e fazer a largura 45, atingir 35. Pense que isso ficará melhor. Aqui, vamos encaixar isso e arrastar ou saudável mordidas texto aqui. Isso parece bom. Agora lembre-se das fontes e das cores e coisas assim, vamos voltar e aplicá-las mais tarde. Por enquanto, vamos nos concentrar em ser as principais coisas juntos. Então, aqui vamos seguir em frente e aplicar os mesmos restaurantes entre em contato conosco e baixar o aplicativo. Vamos seguir em frente e excluir este aqui. Este, vamos fazer restaurantes. Portanto, não precisamos de tipo suspenso ou tipo desativado por enquanto. Vamos seguir em frente e duplicar isso duas vezes e entrar em contato conosco. E agora uma coisa é que isso é realmente empilhado, uma coisa legal é que você pode ir em frente e realmente mudar o espaçamento entre esses botões aqui. Então você pode ir em frente e fazer, é ir em frente e fazer 20 pixels entre eles. Lá vamos nós. Esse já tem 20. Perfeito. Então, em vez deste restaurante, vamos fazer download do aplicativo, mas eu vou em frente e realmente voltar aqui. E vamos seguir em frente e arrastar um desses botões, como o botão Pesquisar aqui desta barra de navegação. Porque eu só quero o botão em si nessa barra de navegação aqui. Vá em frente e tente isso. Vá em frente e desagrupe o componente aqui para a barra de navegação. E desta forma podemos entrar e colocar nosso botão de pesquisa na barra de navegação aqui. E vamos colocá-lo no fundo, o que o colocará no lado direito aqui. Obtenha um jogo, livre-se desses restaurantes extras e altere esse aumento para baixar o aplicativo. Perfeito. Daqui, nós realmente seguiríamos em frente e até ajustamos o espaçamento. Então, vamos em frente e aumentar o espaçamento aqui para 30. Na verdade. A mesma coisa aqui. Então. Agora, se você mover isso aqui, deve ficar melhor. Perfeito. Então, agora, desabilitando a grade de layout, podemos ver nossa barra de navegação parece muito boa aqui. Com isso concluído, vamos voltar na próxima palestra para trabalhar no resto da nossa seção de cabeçalho. 95. Seção de cabeçalho: Eles tendem a projetar o resto da nossa página de cabeçalho. Como mencionamos no wireframing, queremos uma imagem em segundo plano, mas com um nome de empresa e o slogan aqui. Então, vamos em frente e vá para as imagens nos recursos deste projeto. E vamos seguir em frente e arrastar essa foto de cabeçalho para nossa landing page. O tamanho é muito grande. Vamos seguir em frente e segurar Shift e diminuir isso , mantendo a proporção. Vamos colocar isso aqui. Expanda um pouco fora do nosso tipo de altura aqui. E o que vamos fazer é ir frente e realmente mascarar esta foto em nosso retângulo uma camada aqui. Uma vez que você tenha isso aqui, vamos seguir em frente e desbloquear esse retângulo uma camada. Vá em frente e selecione ambos e botão direito do mouse em Máscara com Forma. Agora essa imagem tem sido uma espécie de colheita para as dimensões desse retângulo e tudo mais. Vá em frente e traga essa camada todo o caminho para baixo. E esse grupo de massa. Agora temos a imagem. Vamos em frente e adicionar um pouco demais também. E podemos fazer isso adicionando um pequeno retângulo no topo. Por aqui. Traga isso logo acima do nosso grupo de massa, defina o campo para preto e nossa opacidade para baixo, vamos tentar 30%. Acho que isso deve ser bom o suficiente. Agora vamos em frente e adicione algumas camadas de textos aqui. Na verdade, pensando bem, vamos fazer um pouco mais escuro, talvez 38%. Então, vamos em frente e adicione alguns textos aqui. Vamos pressionar a tecla T no nosso teclado. Vá em frente e digite mordidas saudáveis, e mal conseguimos ver isso aqui. Então, vamos com um tamanho de fonte de 55. Vamos tentar 75. Pode ser um pouco maior lá. Vamos sair de lá. Altere o preenchimento para branco. Mova isso aqui. Vamos ativar nossa grade de layout mais uma vez. Podemos alinhar corretamente as coisas. Perfeito. Vamos seguir em frente e criar um texto para o slogan arrastando aqui para algum lugar aqui. Vamos fazer 45 pelo tamanho da fonte e ele fará comida saudável entregue diretamente à sua porta. E com um clique, é aí que o slogan para a empresa aqui. Agora, uma coisa que eu não gosto aqui é um espaço entre as duas linhas aqui. Então eu acho que podemos aumentar isso para o 54 que precisamos. Vamos tentar 85. Isso é demais. Vamos fazer 65. Melhor. Agora, se desativarmos a grade de layout, isso parece muito bom. A única coisa que quero fazer é derrubar um pouco mais. Por aqui. Acho que as coisas parecem boas. Acho que quero deixar minha sobreposição aqui um pouco mais escura, então vou com quarenta e cinco por cento, só para que não tenhamos muita mistura entre o primeiro plano e o fundo aqui. Acho que isso parece muito bom. Vamos voltar na próxima palestra para trabalhar em nossa próxima seção. 96. Seção de aplicativos em dispositivos móveis: Então, concluímos a primeira seção de cabeçalho do nosso site aqui, o que é ótimo. Acho que parece muito bom. E lembro que voltaremos em futuras palestras para aperfeiçoar nosso design e torná-lo ainda melhor e adicionar mais estilo a ele. Por enquanto, vamos seguir em frente e seguir em frente para nossa seção de aplicativos para dispositivos móveis. Esta é a segunda seção do nosso site onde queremos realmente ir em frente e colocar uma pequena captura de tela aqui do aplicativo, como você pode ver em nossos wireframes, bem como alguns textos para eles baixarem o aplicativo e um pequeno botão Download para o aplicativo. Vamos ir em frente e juntar isso nesta palestra aqui. Então, vamos seguir em frente e abrir nossos recursos para este projeto aqui. E você deve ser capaz de encontrar este aplicativo móvel dot PNG. Vamos ir em frente e copiar isso ou arrastar isso para o nosso site. Vamos seguir em frente e torná-lo um pouco menor e segurar Shift para manter suas proporções. E as coisas em algum lugar, talvez um pouco menores, por isso é totalmente adequado. De fato. Seção aqui. Um pouco maior do que esse tipo de centro que junto. Lá vamos nós. Acho que isso parece muito bom. E o ROS vá em frente e ative nossa grade de layout mais uma vez. E use isso a nosso favor quando estamos alinhando as coisas perfeitas. Então, vamos em frente e insira alguns textos do lado esquerdo aqui. Se você voltar para os recursos novamente, poderá encontrar o ponto de texto de amostra TXT. E lá você deve encontrar a seção de aplicativos de download. E para o texto aqui, vamos fazer o download do aplicativo para armazenar seu pedido hoje. Tipo de cópia isso acabou. Por que não vamos em frente e arrastamos uma das caixas de texto, esta aqui, aqui embaixo. E em vez de branco, iremos em frente e mudaremos o preenchimento para a cor cinza. Algo ao longo dessa linha funcionaria. Vamos seguir em frente e alinhar isso e trazê-lo para algum lugar aqui. E vou clicar duas vezes e alterar o texto para o que temos. Há nossos textos, ou queremos ir em frente e inserir um botão aqui também. Então, à medida que dirigimos esse botão até aqui, componentes internos, devemos ter um botão aqui. Há um sucesso padrão de botão, e podemos simplesmente entrar aqui. Isto é do modelo Bootstrap que, portanto, vamos apenas ir em frente e alterar o texto deste botão para baixar. O aplicativo. Nós compramos aqui é um pouco pequeno demais. Então, por que não vamos em frente e editamos o preenchimento aqui para adicionar mais espaço entre o texto e o retângulo. Então, em vez de nove e faça isso 120. A mesma coisa aqui para os 16, vamos mudar isso para 40. Aqui. Isso parece melhor. Podemos apenas alinhar isso aqui em cima. Isso é bom. Vamos seguir em frente e desligar nossa grade de layout apenas para ver como seria isso. Está se unindo lentamente. Então essa é a nossa seção de aplicativos móveis que volta na próxima palestra para trabalhar em nossa seção de restaurantes populares aqui. 97. Seção do restaurante: Queremos ir em frente e seguir em frente para nossa seção de restaurantes aqui. Então, para trabalhar nesta parte do aplicativo, vamos abrir nosso kit de interface do usuário do Bootstrap mais uma vez. Se você não tiver esse arquivo à mão, poderá encontrá-lo seus arquivos abertos recentemente, que estariam disponíveis em Arquivo e Abrir Recente. Então vá em frente e encontre o kit Bootstrap UI que você baixou. O que queremos agora é usar a interface do usuário do cartão que eles têm. Então, por que não seguimos em frente e encontramos uma interface do cartão que funcione para nossos cartões de restaurante. Se aumentarmos aqui, encontraremos um pequeno quadro de arte de cartas. Agora, eu gosto deste aqui. Quando seguirmos em frente e usamos este, clique duas vezes para selecioná-lo e vá em frente e copie-o. Mudando para o nosso projeto de landing page. E vá em frente e cole isso aqui. Vamos seguir em frente e fazer isso um pouco maior. Então, ele está se encaixando nessa parte da grade. Queremos fazer algumas pequenas alterações nisso. Traga o título e a descrição aqui para baixo. Para o botão aqui, quero ir em frente e centralizá-lo. E para a imagem. Vamos voltar ao nosso painel de camadas. Para nossa imagem aqui, quero ir em frente e torná-la um pouco maior. Bem aqui. Perfeito. Como aprendemos em nosso projeto de design móvel, podemos usar pilhas e fazer uma pilha horizontal ou podemos usar a grade de repetição. Isso é o que vou fazer aqui. Eu quero fazer Repetir Grid. E em vez de ficarmos na vertical, que era o que estávamos fazendo em nosso aplicativo móvel, vamos ficar horizontais desta vez com uma grade repetida até aqui. Então, temos quatro. Vamos seguir em frente e basta ajustar o tamanho aqui para que tudo corresponda à nossa grade de layout. E lá vamos nós. Agora isso está consertado. Vamos seguir em frente e copiar o texto. Mordidas saudáveis aqui ou aqui embaixo. Altere o preenchimento para essa cor cinza que tenho para o texto aqui. Vá em frente e selecione isso e as informações que assumem aqui e faça restaurantes de descanso populares. Lá vamos nós. Vamos desligar nossa grade de layout. Preciso mais disso. Agora, se você não estivesse, um problema que tivemos com Repeat Grids e componentes é que ele não funcionaria corretamente quando estivermos inserindo dados. Vamos clicar com o botão direito do mouse neste primeiro e desagrupar o componente. Agora, se formos aos nossos recursos, poderei encontrar este exemplo nomes tracejados de restaurante tracejados ponto TXT. Podemos ir em frente e arrastá-lo sobre o título do cartão para o nome do restaurante. E também temos um para a amostra de descrição que restaurante traço descrição ponto TXT. Vamos seguir em frente e arrastá-lo sobre o texto da descrição. Perfeito. Vamos clicar duas vezes na imagem aqui e também desagrupá-la como um componente. Então, desta forma, podemos ir em frente e selecionar todas as nossas imagens, uma a quatro aqui para os restaurantes. Vá em frente e copie isso . Eu deveria trabalhar. Nós realmente não precisamos dessa forma aqui. Então, se formos em frente e excluímos isso a partir daí, isso ficará muito melhor. Essa é a nossa seção de restaurantes. Acho que parece muito bom. E vamos voltar e aperfeiçoar isso nas futuras palestras. Então, agora, pode parecer um pouco plano. Mas a ideia é juntar os elementos que precisamos antes de voltarmos e consertarmos isso. Por fim, temos a seção Fale Conosco, então vamos voltar na próxima palestra para trabalhar nessa. 98. Entre em contato com a seção: Passando para a última seção da nossa landing page aqui, a seção Fale Conosco. Vamos ir em frente e juntar isso. E vamos precisar da imagem da equipe do lado direito aqui. E então, no lado esquerdo, um pequeno formulário onde podemos colocar um e-mail ou um nome e um campo de e-mail e botão ascender. E deve ser bem simples a partir daí. A primeira coisa é ir em frente e selecionar o quadro de arte aqui e habilitar nossa grade de layout. Para que voltamos? Kit de interface do usuário Bootstrap? Nesta seção de formulário do nosso kit de interface do usuário do Bootstrap, você deve ser capaz de encontrar grupos de entrada formados. Então, vamos avançar e ampliar isso para que possamos usar um formulário daqui. Não precisamos de nada complicado como suspensos ou coisas assim, mas o Bootstrap lhe dá acesso a eles. Você pode ir em frente e colocar coisas como diferentes tipos de campos que podem ser úteis para você. Portanto, sinta-se à vontade para explorar isso. Mas, por enquanto, queremos ir em frente e encontrar uma simples entrada de e-mail aqui. Vá em frente e copie esse botão e um botão pressionando Shift enquanto seleciona os dois. Vamos copiar isso para o nosso projeto, selecionar este retângulo aqui e colá-lo. Vamos colocar isso em algum lugar aqui. Vamos seguir em frente e esticar isso também, bem aqui. Deixe-me ir em frente e colocar este botão no lado esquerdo aqui. Vamos duplicar isso mais uma vez. E em vez de e-mail, vamos fazer o nome completo. Vou excluir este pequeno texto de rodapé aqui. Quero ir em frente e usar impostos para este formulário aqui, quero ir em frente e selecionar todos eles para usar pilhas e usar o Command G para agrupá-los primeiro e depois fazer uma pilha. Vamos seguir em frente e diminuir o espaçamento aqui entre o botão enviar e ir em frente e trocar o nome completo e o e-mail. Reduza esse espaçamento para 15 pixels. Mas vamos avançar e aumentar essa distância, 250. Lá vamos nós. Em vez da entrada padrão que é colocada em primeiro e último. E para o e-mail, vamos apenas fazer o exemplo em domain.com. Lá vamos nós. Esse é o nosso antebraço. E então vamos fazer uma pequena imagem no lado direito. Vamos em frente e voltar aos nossos recursos. Estava sob a pasta de imagens, você deve conseguir encontrar uma foto de equipe JPEG. E então podemos arrastar para aqui. Vamos nos certificar de que as proporções estejam bloqueadas e façam uma largura de 750. Fizemos isso um pouco menor, então ele se encaixa na nossa grade. Centrado ao longo. Vire os dois elementos e centralize-os ao longo da página também. Vamos segurar Alt e arrastar uma cópia deste texto, esse texto de cabeçalho, e alterá-lo para entrar em contato conosco. Acho que isso é praticamente o que queremos. Se você desativar nossa grade de layout, devemos ter uma ideia melhor de como isso será, ok? Nada mal. Então, uma coisa que poderíamos fazer é colocar este formulário em uma caixa ou cartão. Então, vamos prosseguir e reativar nossa grade de layout e trabalhar nessa caixa aqui. Então, vamos fazer retângulo, e vamos em frente e criá-lo por aqui. Vá em frente e encontre esse grupo de camadas por mais de um ano e traga-o para baixo do nosso grupo quatro. Então, por favor, isso aqui. Vamos seguir em frente e em nossa pilha e vamos adicionar um pouco de preenchimento de 20 pixels. Agora vamos encolher essa pilha para caber nosso retângulo e trazer esse botão para este canto aqui. E podemos reduzir a altura desta caixa para algum lugar aqui. Agora, se desativarmos nossa grade de layout, podemos ver que definitivamente parece mais limpo. Podemos até ir em frente e combinar a altura desse formulário com a altura dessa imagem. Para fazer as coisas parecerem um pouco mais limpas. Claro, ainda não terminamos. Vamos voltar e aperfeiçoar todas as nossas páginas e adicionar o texto do botão aqui e depois aplicar o esquema de cores adequado e até mesmo uma fonte personalizada. Então, vamos voltar na próxima palestra para começar a polir nossa landing page. 99. Aplicando nosso esquema de cores: Vamos seguir em frente e aplicar o esquema de cores que temos para o projeto à nossa landing page também. Então, dedique um segundo aqui para ir em frente e abrir seu projeto móvel que projetamos. E vá em frente e selecione a seção do esquema de cores aqui com todas as cores que temos. E vá em frente e copie-o usando o Command C. Switch aqui. E do lado aqui no quadro de pasteboard, vamos seguir em frente e colar isso. Vou seguir em frente e colocar isso aqui. E vamos selecionar todas essas cores aqui como você se lembra, e aperte o ícone de mais aqui para transformá-las em nosso esquema de cores para o projeto. Então, se você quiser, você pode ir em frente e renomeá-los. Por aqui. Primário, secundário. Eu disse 123. Faremos isso como nosso gradiente. Agora. De cima para baixo, vamos trabalhar em todo o design e aplicar alguma cor a ele. Primeiras coisas primeiro, nosso botão aqui, vamos seguir em frente e selecionar o preenchimento deste texto. E disse que o principal para o quadro de cores, precisamos ir em frente e copiar esse código hexadecimal daqui. E para a fronteira. Lá vamos nós. Então esse botão agora tem nossa cor. Isso parece bom. Vamos seguir em frente e selecionar o retângulo desta parte inferior aqui, apenas uma camada retangular em si e defini-la como primária. O que estamos aqui. Vamos seguir em frente e escolher o botão aqui para armazená-lo. Em ordem. É substituí-lo no meio. E vamos seguir em frente e clicar com o botão direito do mouse e desagrupar componente e fazer com que isso se aplique por toda parte. Pensando em segundo lugar, acho que fica melhor no lado esquerdo aqui em oposição ao lado direito. Talvez derrube esse botão inteiro um pouco melhor. Vamos olhar a camada de ângulo reto e alterá-la para o acidente dela uma cor junto com este texto aqui, x e um. Para este texto, também vamos fazer um acidente. Lá vamos nós, parecendo muito melhor agora para este botão Fale Conosco e vamos alterar a seleção do retângulo e mudar para primário. Para o Fale conosco, vamos fazer um acidente. Vamos aplicar alguma cor aos nossos fundos também. Vamos em frente e desbloquear esse retângulo aqui. Vamos tentar sotaque também para esse fundo aqui. E altere esse texto para um branco. Lá vamos nós. Vamos deixar os restaurantes populares são brancos para o fundo e, em seguida, para o Fale Conosco desbloqueará a camada e fará o acidente três. Depois de fazer isso, ele apertou Command elegant naquele retângulo para garantir que você o bloqueasse. A mesma coisa aqui. Perfeito. Isso está começando a parecer melhor. Agora, vamos voltar na próxima palestra para aplicar algumas fontes personalizadas ao projeto aqui. 100. 8: Eu realmente gosto da parte do projeto em qualquer projeto de design quando aplicamos uma fonte personalizada ao projeto e fazemos com que pareça muito melhor, mais nítida e ainda mais relevante para a marca. Eu pessoalmente adoro usar o Google Fonts porque é um recurso gratuito que você pode usar para encontrar e baixar fontes para seus projetos. Se você ir para fonts.google.com em seu navegador, você faria um secundário. Então você pode carregar isso. Você poderá acessar toneladas de fontes para usar em seus projetos. E enquanto eu estava passando por isso, a fonte Poppins aqui meio que chamou meus olhos. Se você não conseguir encontrar esta fonte, você pode ir em frente e voltar para esta página aqui e pesquisar Poppins aqui como assim, com um S no final. Vá em frente e clique nisso e clique em Baixar família. Vá em frente e salve esse arquivo. Depois de salvá-lo, você poderá abrir esta pasta aqui, onde poderá selecionar todas as fontes aqui e, em seguida, vá em frente e clique duas vezes para instalá-la no Mac. Esse processo pode ser diferente no Windows, mas em um Mac você apenas clica duas vezes para instalar a fonte. Uma vez feito isso, você pode ir em frente e simplesmente fechar essa pasta e este site aqui. Agora vamos em frente e clique nesses dois textos aqui. Copie-os. Aqui fora. Vamos defini-los para o acento para colorir. Vamos selecionar os dois e fazer Poppins aqui. Se você não vir essa fonte carregada, basta ir em frente e fechar seu XD e abri-lo novamente, e isso deve funcionar para o cabeçalho aqui, vamos seguir em frente e selecionar um peso de fonte médio. E vamos deixar este tão regular. Vamos usar este como minha fonte de cabeçalho e esta tem minhas fontes de corpo. Vamos selecionar os bytes saudáveis. Um, altere-o para cabeçalho, cabeçalho H1 assim. E use este como nosso corpo. Vou fazer apenas mais um aqui. Caso precisemos de um cabeçalho H2 em vez de 75, vamos fazer 60 para este. Vamos em frente e selecione-os e adicioná-los como um estilo de personagem. Aqui. Vamos fazer o body dash Poppins, H12, e renomear este para cada um. Lá vamos nós. Vamos selecionar esses bytes saudáveis agora configurá-lo para nosso H1 e alterar o preenchimento para branco. Este aqui, vamos fazer corpo mudar o preenchimento para branco. E apenas certifique-se de que nossos alinhamentos sejam adequados aqui. Parece que nós os temos não alinhados corretamente. Use essa grade de layout para sua vantagem lá. Vá em frente e desligue-o. E vamos fazer corpo para este aqui e mudá-lo para branco. Para os botões. Vamos selecionar os botões e depois seguir em frente e apenas alterar manualmente esse texto aqui para aparecer. Lá vamos nós. Antes de esquecermos aqui, queremos ir em frente e mudar nossas fontes aqui e aqui também. Então, vamos falar sobre os bytes aqui, alterá-lo para Poppins. E a mesma coisa aqui. Selecione este, altere-o para Poppins. Agora, lembre-se como um atalho, você pode simplesmente pressionar o comando C nos restaurantes e fazer o comando de opção V em seus outros textos. E isso aplicará a mesma fonte. Mas se você fizer isso aqui para este aplicativo de download, você só precisa alterá-lo por duas cores primárias porque ele também copia sobre esse Phil, para esses textos. Eu acho que esses ficariam melhores como um peso de fonte médio. Então, vamos em frente e alterá-los para fonte média. Nós ouvimos suposto médio. Lá vamos nós. Parece muito melhor. Vamos fazer a mesma coisa para fazer o download do aplicativo, configurá-lo para médio para que fique um pouco mais grosso. Podemos lê-lo com mais facilidade. Essa página, parece boa. Seguindo em frente aqui, vamos fazer um. Vamos selecionar o texto e apenas centralizá-lo horizontalmente. Aqui. Vamos seguir em frente e segurar Shift e alt-text leve aqui e alterá-los para Poppins porque você pode fazer isso. Você pode alterar várias fontes ao mesmo tempo pressionando Shift e selecionando-as. A única coisa que temos que consertar nosso botão, estendendo-o um pouco mais, certificando-se de que ele está centralizado. Lá vamos nós. À medida que você altera sua fonte, você pode notar que o espaçamento e alinhamento podem mudar entre seus elementos. Então, fique atento a isso e verifique novamente tudo que sempre nos atacou. Parece bom. Nosso formulário. Vamos um por um. Nome completo. Mude para aparecer. Primeiro último e-mail. Selecione este primeiro último Controle C. Opção Controle V. Altere este para Poppins também. Por fim, ou o botão de envio também deve ser Poppins. E em vez de peso normal, vamos fazer médio. Lá vamos nós. Isso deve ser fontes Oliver na página de aprendizado, o que eu acho que é assim, até agora tão bom. Então é assim que aplicamos fontes personalizadas que são projetos? Por que não voltamos na próxima palestra para aperfeiçoar o resto do nosso design e completar nossa landing page. 101. Como adicionar blobs e ilustrações: Sinto que podemos adicionar mais à nossa landing page. É um pouco de avião agora e acho que você poderia usar lipídios mais pop. E podemos ir em frente e usar alguns plug-ins legais para nos ajudar com isso. Então, tenho dois plug-ins realmente interessantes em mente que podemos usar. E você verá como eles podem nos ajudar a aprimorar nosso design e torná-lo ainda melhor. Sem mais delongas. Vamos voltar para nossa guia de plugins aqui. Depois de selecioná-lo, vá em frente e clique no ícone de adição. E vamos procurar por dois plugins. O primeiro, vamos procurar pessoas. Este primeiro aqui, esta ilustração humana. Vamos ir em frente e chegar, e vamos levar um segundo para instalar lá. Deixe que ele tome seu tempo. E vamos ir em frente e voltar para plugins de recursos também pesquisar blob, Há plug-in globular deve aparecer. Vá em frente e instale esse para voltar para o nosso XD e você verá o que tanto de cima quanto se mova para baixo. Então, vamos usar o popular plugin aqui, que nos ajuda a gerar esses blobs de aparência legal e ir em frente e redefinir. E continuará gerando blogueiros e lhe dará uma pequena prévia de como será. Vá em frente e aumente a complexidade disso. Ou vá em frente e torne-o mais único ou menos exclusivo como você gostaria. Você pode até ir em frente e definir a tonalidade daqui. Claro, vamos mudar isso em apenas um segundo. Vamos em frente e basta inserir esse blob. O seu pode parecer diferente, é claro, mas isso é totalmente bom. Realmente não, certo ou errado olhando blob aqui, se todos vocês com um blob inserido, vamos ir em frente e voltar para nossa biblioteca. E eu quero fazer o sotaque de três cores para este. E agora vamos voltar para nossa guia plugins e voltar e inserir a ilustração humana. A partir daqui, temos acesso a muitas ilustrações que são muito legais de usar em nossos projetos e o que for relevante pode ser aplicado. Você pode até ir em frente e ser muito criativo e adicionar partes diferentes juntas. Tipo de Lego para a ilustração aqui. Ou você pode simplesmente ir simples e selecionar o que quiser. Vamos mantê-lo simples e selecionar este aqui. Vamos mantê-lo simples e selecionar este aqui. Ele foi copiado para a área de transferência possamos pressionar Command V. Colar isso aqui, torná-lo um pouco maior ou segurando Shift. Vou voltar à ilustração humana mais uma vez. Vamos arrastar esta pequena mesa aqui. Mais uma vez. Desta vez vamos fazer a lâmpada. E só traga isso aqui. Para este último aqui, vou seguir em frente e clicar duas vezes nessa e apenas deixar este um pouco mais curto aqui. Então eu acho que isso parece muito legal. Podemos vir aqui e adicionar um por trás do nosso aplicativo, se você quiser. Plugins, lobulares. Quero redefini-lo até eu conseguir algo que eu gosto. Vá em frente e insira isso na parte de trás e use o comando e o suporte aberto até que eu tenha isso no aplicativo ou no dispositivo móvel. E agora temos dificuldade em selecioná-lo. Então, temos que voltar para as camadas e selecionar esse caminho e ir comprar para bibliotecas e definir o bloco como. Vamos tentar a cor do gradiente. Isso parece muito legal. Podemos fazer isso mais uma vez para foto da nossa equipe aqui também. E até insira a foto da equipe como um blob para que possamos mascarar isso. Então, vamos seguir em frente e selecionar os plugins, redefini-los mais vezes até termos alguém que parecia, que ficaria bem para a foto da nossa equipe. Quero algo que continue redefinindo até encontrar algo que eu gosto. Vamos reduzir a singularidade e ver o que obtemos. Estou sendo um pouco exigente demais aqui. Acho que qualquer um desses deve realmente funcionar tão bem. Vá em frente e crie, indo em frente e use este aqui. E vá em frente e amplie-o. Então, ele meio que assume mais da foto. E vamos seguir em frente e selecionar a camada de imagem por baixo e blob e fazer Máscara com forma. Precisamos fazer é tornar essa imagem um pouco maior, assim. E então seguimos em frente e nos certificamos que ele se encaixa bem. Agora, podemos fazer isso um pouco menor. Meio que se encaixa bem com o nosso formulário aqui. Mais uma vez. Vamos habilitar essa grade de layout e as coisas alinhadas corretamente aqui. E certifique-se de que usamos esse alinhamento aqui. Ou a forma parece boa também, então isso é muito bom. Desligue ou trate a grade e lá a temos. É assim que podemos usar alguns blobs para criar alguns efeitos de aparência legal. náusea pode ver lentamente nossas landing pages começando a ficar mais polidas e parecer mais interessantes quando voltamos na próxima palestra para fazer um polimento final. E logo depois disso, vamos exportar nossa landing page. 102. Como fazer o polimento de nossa página de desembarque: O que você acha que está feito com o projeto? Portanto, sempre é uma boa ideia passar rapidamente por todo o design de cima para baixo ou esquerda para a direita, dependendo de onde você está trabalhando e fazer um pouco de polimento de tudo lá dentro. Então, quando começamos a partir da barra de navegação superior, que eu acho que parece muito bom, podemos selecionar esses campos aqui para o restaurante e entrar em contato conosco e animar o acidente de uma cor. Tudo o resto aqui parece bom. Certificar-se de que eles estão meio centrados em nossa página, o que agora é. Quer ter certeza de que eles também são uma espécie de central aqui. Perfeito. Vamos seguir em frente e remover essa borda do retângulo aqui. A mesma coisa aqui com este outro retângulo. Você não quer comer fronteira entre eles. E a mesma coisa aqui com esses registros de alertas de retângulo, podemos desbloqueá-lo e remover a borda. E vou trancá-lo de volta. Vamos trancar este aqui. Comando L aqui, Comando L. Lá vamos nós. Aqui embaixo. Eu realmente gosto da forma como minhas cartas parecem muito afiadas. Então vamos seguir em frente e adicionar um pouco de raio de canto à imagem, mas apenas no canto superior direito e superior esquerdo. Então, vamos segurar Option enquanto a configuramos para um raio de canto de 15 pixels aqui. E você pode ver os pixels no lado esquerdo. 15, acho que parece bom. E podemos aplicar a mesma coisa aqui embaixo. Neste momento, já está definido para cinco, mas quero mudar isso para 15. Isso pode parecer melhor. Isso parece melhor. Vou selecionar o plano de fundo aqui. Também faça 15 para este, clique duas vezes e também faça 15 para este e, finalmente, 15 para este. E você pode perguntar, por que estamos repetindo esse processo de reutilização de uma grade de repetição? A resposta é simples. Quando você tem um componente porque é o plano de fundo do cartão como um componente. Se for um componente, precisamos fazer essa mudança toda vez em oposição a apenas uma vez e terminar com ela. Agora eu quero adicionar uma pequena sombra para nossos cartões aqui. Mas o problema com Repeat Grid é que não é muito eficiente adicionar sombras com ela. Então, vamos seguir em frente e desagrupar essa grade. Em outras palavras, feito com uma grade de repetição. E vamos em frente e selecione esta uma camada de fundo de barra de carrinho de fundo aqui e clique duas vezes para selecionar essa camada de retângulo e aplicar sombra solta. Vamos fazer um borrão de 20. Deixe todo o resto da mesma forma. Acho que isso parece muito melhor. Vamos seguir em frente e copiar isso e selecionar esse retângulo aqui. Clique duas vezes em todo o caminho. Pressione Command, Opção V. A mesma coisa aqui. A mesma coisa aqui. Parece muito melhor. Por aqui. Vamos seguir em frente e selecionar esse retângulo aqui. E eu quero remover a borda e usar o Comando de Opção V para colar essa borda aqui e um raio de canto que foi aplicado automaticamente. Então isso parece muito melhor. Acho que podemos torná-lo um pouco mais amplo aqui. Então eu vou segurar Alt para ampliá-lo. E parece um pouco de avião aqui em cima. Então, quando adicionamos um texto no meio para dizer entre em contato, não conseguimos ver isso porque é branco. Então, vamos sair por aí e aplicar um sotaque. Cor aqui. Acho que o corpo aqui é um pouco grande demais, então vamos em frente e mudar a fonte para 25. Bem aqui. Isso parece muito melhor. Selecione essa camada, esse plano de fundo para desbloquear e remover a borda novamente, bloquee-a novamente. Agora, acredito que nenhum deles deveria ter mais fronteiras. Acho que nosso projeto está bem polido e pronto para começar. Então, com isso dito, vou te dar um exercício para criar um protótipo a partir desta landing page. E vá em frente e conecte esses botões ao seu protótipo também. E faremos isso juntos na próxima palestra. 103. Como criar um protótipo: Tudo bem, vamos criar um protótipo para nossa página de alinhamento. Se você for em frente e clicar nele e visualizá-lo em nossa área de trabalho agora, pode ser um pouco grande demais, para que possamos seguir em frente e definitivamente torná-lo menor aqui. Vá em frente e conserte isso aqui. Então, definitivamente, parece legal. Claro, não há muito que possamos nos conectar aqui. A única coisa que eu realmente quero conectar é nossa barra de navegação aqui em cima. Então, vamos seguir em frente e corrigir essa barra de navegação para que eles possam navegar entre essas páginas. Então, vamos às nossas bibliotecas, selecione a barra de navegação aqui. E garanta que temos todas essas camadas. Mantendo a tecla Shift selecionada e faça o Command G. E vamos nomear esse grupo são suficientes para. E apenas certifique-se, escondendo que isso é que tem tudo o que precisamos. Sim, ele faz. E farei uma posição fixa ao rolar e trazer a camada, como você adivinhou até o topo do projeto. Então, desta forma, quando o visualizamos, ele deve ficar no topo, que é o que queremos. Queremos algumas conexões aqui. Queremos mordidas saudáveis. Quando você clica nele para nos levar de volta até esta página aqui. Quando você clica no restaurante, queremos ir até esta parte do aplicativo. Quando clicamos em Fale Conosco, esta parte da landing page, desculpe. E o aplicativo de download deve nos levar a esta seção aqui. Ou, alternativamente, o aplicativo de download também pode ir para o mesmo link que este aqui. Agora, porque estávamos usando o Bootstrap, os já têm algum tipo de estado de focalização para seus componentes aqui. Vamos ir em frente e nos livrar disso também a partir daí. Então, para protótipo adequado, vamos seguir em frente e agrupar cada seção juntos. Todos os elementos do grupo. Basta ir em frente e agrupar toda a seção aqui usando o Comando G. Então essa será nossa seção de cabeçalho porque a camada retangular foi registrada, ela não foi arrastada para esse grupo. Basta ir em frente e arrastá-lo para o grupo de cabeçalho. Apenas certifique-se de trazê-lo todo o caminho para baixo. Queremos ter certeza de que nossas placas de navegação no topo das camadas. Este retângulo lá, que eu desbloqueei , deve ir para o cabeçalho também. Logo abaixo aqui. Acredito que esse grupo de massa é para nossa imagem. Então, vamos também arrastar isso para o cabeçalho aqui. Para nossa página de aplicativo, vamos em frente e agrupar tudo, selecionar tudo e fazer incluindo o blob aqui segurando o comando e faça o Command G. Então essa deve ser a nossa seção de aplicativos. Não vou trazer isso logo abaixo do cabeçalho. Restaurantes populares estão em frente e basta selecionar todos esses. Acerte Command G. E, claro, temos que apenas trazer nossa camada retangular, retângulo três aqui, desbloqueá-lo e impulsivo trazê-lo para o grupo. Este grupo aqui, mas na parte inferior e renomeie o grupo para preencher. Russ, seção de transe. Traga isso aqui. E para o Fale Conosco, vamos fazer a mesma coisa. Selecione tudo comando G. Mova este retângulo para lá para agrupar a parte inferior dele e fazer a seção de contato e trazê-lo para o fundo. Então, agora está muito mais organizado. Podemos ir em frente e verificar cada grupo. Só uma coisa que eu quero fazer é ler bloquear essas camadas retangulares. Não interagimos acidentalmente com eles. Agora que temos isso, vamos seguir em frente e conectar nossa barra de navegação usando a guia Protótipo. Selecione as mordidas saudáveis e vamos clicar em adicionar uma infração e também vamos rolar. Vamos escolher o cabeçalho da camada. Não importa onde você esteja na landing page, seguiremos em frente e rolaremos de volta para a seção de cabeçalho. Vamos facilitar para entrar e sair. E em vez de 0,3, vamos fazer 0,6. Agora, para o restaurante, vamos fazer interação e vamos rolar para a seção de restaurantes. Deixe tudo o resto tem isso. Você adivinhou para o Fale conosco. Vamos rolar até a seção Fale Conosco para o aplicativo de download. Quando nós também rolamos, seção Aplicativos. Agora tudo está conectado. Como esperamos. Vamos seguir em frente e remover esse estado de paira daqui. E aqui, vamos fazer a mesma coisa aqui. Remova esse estado de focalização. Agora, taxa, vá em frente e visualize isso. A cada rolagem para baixo, a qualquer momento, podemos clicar em mordidas saudáveis para rolar este backup. Você pode conferir a seção de restaurantes, a seção Fale Conosco e a seção de aplicativos de download. Lindo. Acho que isso parece incrível, perfeito. Então, lá temos isso. 104. Registrando nosso protótipo: O que eu quero mostrar é que você também pode ir em frente e criar gravações do seu protótipo se você tiver tocado em gravar vídeo aqui e a pré-visualização da área de trabalho, se você estiver em um Mac, você pode obter para conceder permissão ao aplicativo. Então vá em frente e abra as preferências do sistema para conceder essas permissões. Agora você pode precisar adicionar esse ponto, sair e reabrir o XD. Então vá em frente e permita que o Mac faça isso. Mas depois de fazer isso, você pode ir em frente e abrir a visualização, selecionar a página de destino e, em seguida, seguir em frente e clicar no registro. Agora, como você pode ver , está gravando. Posso ir em frente e interagir com o site como eu gostaria, e mostrar às pessoas como ele funciona. qualquer momento eu posso ir em frente e parar a gravação e salvar esse arquivo em qualquer lugar que eu quiser. Faça demonstração do site de mordidas saudáveis. Deixe-me ir em frente e salvar isso. Agora aqui em meus recursos, posso ir em frente e abrir essa gravação e assisti-la para ver como fizemos. Isso é incrível. Legal. É assim que você também pode gravar seus protótipos no XD. Com isso, isso encerra nosso projeto de landing page. Espero que você tenha aprendido muito ao longo desse processo. E acho que aprendemos muitas ferramentas úteis, recursos, modelos e plugins, e como podemos usar o XD. Incrível. 105. CONCLUSÃO: Tudo bem, grandes parabéns. concluir este curso, fizemos um trabalho incrível ao começar a usar o Adobe XD, alertando o que ele tem a oferecer até o projeto ou dois projetos no aplicativo móvel para a entrega de alimentos serviço, bytes de ajuda e o site que reunimos para eles. E só o pai que criaria protótipos interativos para ambos os projetos que agora podemos compartilhar com seus amigos, colegas, clientes e mostrar a eles o que fizemos e como esse produto poderia funcionar. Isso é incrível, e isso é apenas o começo para você como designer. Daqui em diante, encorajo você a assumir projetos de design e continuar se inspirando em projetos e produtos que você tem acesso a todas essas bases, os aplicativos em seu telefone, para os sites que você navega. Eu continuo adoro manter uma pasta de todos os designs que me inspiraram para que eu possa usá-lo em meus futuros projetos de design também. Estou super feliz com todas as diferentes partes que abordamos ao longo deste curso, pois cobrimos uma tonelada de componentes, Repetir pilhas de grade, como adicionar animações aos nossos protótipos. E muitas das pequenas ferramentas e plug-ins bacanas usadas para aperfeiçoar seu design e torná-lo melhor. A partir daqui, gostaria de lhe desejar boa sorte e esperar vê-lo em cursos futuros.