Noções básicas do Adobe Xd 2021: curso de design de UI e UX

1. Introdução do curso: Ei designer e meu nome é Alex e bem-vindo à aula de compartilhamento de habilidades no Adobe XD 2021. Nesta classe, vamos cobrir as ferramentas básicas do Adobe XD. E vou guiá-lo pelo meu processo de design e mostrar-lhe todas as principais ferramentas e recursos que o Adobe XD tem para oferecer para que você possa ser um designer de UX melhor da interface do usuário. Eu sou um criador de produtos de design e até agora eu tenho mais de 500 produtos que eu criei. Eu também sou um criador de cursos e até agora eu tenho mais de 20 cursos e eu tenho mais de 30 mil alunos matriculados em meus cursos. E neste curso gratuito do Adobe XD, você vai aprender o que é o Adobe XD, como você pode baixá-lo e como as atualizações funcionam, Mac versus Windows. E qual é a diferença? Como funciona a interface e todas as principais características da interface como formas, mental, dex, ferramenta, barra Edwards, Bibliotecas, camadas e plug-ins. Vamos explorar uma grade de repetição e o que ela pode fazer pelo seu design. Como você pode usar máscaras, que são funções 3D no Adobe XD. Como você pode usar modelos, quais são os atalhos para melhorar sua velocidade trabalhando com diferentes arquivos e como você pode abrir arquivos diferentes e trabalhar com eles no Adobe XD? Como você pode trabalhar com recursos gratuitos e qual é a diferença entre recursos gratuitos e premium e por que um é melhor do que o outro. Usando kits de interface do usuário para melhorar seu fluxo de trabalho, criando projetos de design e passando da criação de design, prototipagem de seu projeto, compartilhando seu design com clientes e desenvolvedores, exportando seu projeto, criando um sistema de design, criando tokens de design, criando guia de estilo, como criar grandes apresentações. E, finalmente, o futuro das ferramentas de design. Vamos cobrir muito nesta aula livre. Então, se em algum momento você quiser acessar os links, PDF será fornecido. Então você pode baixar esse PDF e você pode simplesmente clicar nos links e visitar o que eu estou falando neste curso gratuito que você possa seguir ao longo de seu projeto de classe para esta classe é usar as dicas e técnicas que você aprende com este curso para aplicá-los ao seu processo de design. E eu realmente gostaria que você criasse site de uma página ou uma única tela para o aplicativo usando as dicas e técnicas que você aprenderá este curso e para enviá-los para os projetos de classe. Adobe XD é uma das melhores ferramentas lá fora para designers UX UX são realmente acreditados que porque eu estou usando isso todos os dias. No meu canal do YouTube, criei vários desses diferentes vídeos explicando tudo sobre o Adobe XD, diferentes ferramentas e técnicas. Então, se você quiser, você também pode verificar isso por enquanto sem mais delongas. Vamos começar com o curso. 2. O que é Adobe XD: O Adobe XD é uma ferramenta de design UX da interface do usuário criada pela Adobe. Você pode criar, criar protótipos, compartilhar e colaborar em um único aplicativo. Você não precisa alterar os aplicativos. Você não precisa instalar itens separados em seu computador. Você pode fazer tudo dentro de um aplicativo. É ótimo porque é grátis para começar. E você pode começar simplesmente baixando e instalando o Adobe XD em seu computador. Vou mostrar isso na próxima seção. Mas basicamente o que você pode fazer nesta ferramenta, se você verificar aqui e começar a rolar para baixo, você pode ver que são quatro design. Assim, você pode criar design de aplicativo móvel. Você pode criar um design de painel projetado pelo site qualquer tipo de design UX UX que você quiser, você pode até mesmo criar caras de estilo. Você pode ver que você pode criar protótipos, incluir diferentes interações, incluir diferentes animações que você pode compartilhar com clientes, com desenvolvedores, com seus colegas de equipe, tudo com o Adobe XD. E você pode clicar em Iniciar aqui gratuitamente para baixar e instalar o Adobe XD. E é disso que vamos falar a seguir. 3. Mac VS: Então, como eu disse, o Adobe XD funciona bem em Mac e PC. E a diferença crucial entre esses dois sistemas operacionais é como eles se parecem. Então basicamente nas janelas você tem um menu de hambúrguer no canto superior esquerdo. E porque estou trabalhando no Windows, vou mostrar isso em um segundo. Mas em um Mac, você tem várias dessas opções simplesmente espalhadas na parte superior da tela. E essa é realmente a diferença crucial entre Mac e PC. E mais uma diferença é Gravação de protótipos, porque o Adobe XD tem essa função onde você pode gravar seus protótipos e compartilhá-los como um vídeo, seja para seus clientes ou você pode compartilhá-los em mídias sociais apenas para criar uma influência maior em torno de si mesmo. Basicamente, a diferença crucial entre Mac e PC é que você, no Mac, você tem essa opção nativa onde você pode simplesmente clicar em Gravar e vai exigir isso e você pode clicar em parar e isso é basicamente o fim dela. Enquanto nas janelas, você tem que usar sua função de gravação de jogo e você pode acessá-lo pressionando a tecla Windows e a tecla G, e então você pode iniciar sua gravação dessa forma. Eu também vou mostrar isso um pouco mais tarde neste curso. E, finalmente, o que eu queria mencionar rapidamente é se você tiver Windows sete, oito Windows waster, Adobe XD não funcionará em seu computador. Você precisa ter o Adobe XD instalado em sua máquina de janela Stan. De preferência, se você pode instalá-lo na atualização do Creator do seu computador Windows , ele funcionará perfeitamente, mas não é suportado por versões mais antigas do Windows, como 78 ou mesmo sabedoria. Então é isso que você precisa saber. 4. Tela de boas-vindas: Quando você abre seu Adobe XD, você é levado para a tela de boas-vindas e eu vou mostrar o que é o creme de boas-vindas e como ele muda com o tempo. Então aqui está a tela de boas-vindas e você pode ver que você está na tela inicial aqui. Você pode clicar em aprender e acessar alguns tutoriais da equipe do Adobe XD. Você também pode clicar aqui para saber mais sobre seus novos recursos e aprender sobre algumas técnicas de sua equipe. Lançamentos de habilidades Harbin, geralmente a cada semana, novos tutoriais sobre o Adobe XD e é ótimo se você quiser, você pode segui-lo no Behance também para essas transmissões ao vivo sobre o Adobe XD. Basicamente, isso é o que Aprender guia é, documentos em nuvem porque XD é baseado em nuvem geralmente, mas você também pode salvar documentos locais em sua máquina se você quiser chamar documentos, são todos os seus documentos que estão dentro da nuvem. Então você pode simplesmente clicar aqui para acessá-los. Compartilhados com você são os documentos que são compartilhados com você pelos clientes ou por seus companheiros de equipe. Excluídos, são todos os arquivos que você excluiu anteriormente porque lembre-se que você tem espaço limitado na versão gratuita do Adobe XD e você tem apenas um único protótipo que você pode compartilhar com seus clientes ou partes interessadas. Para ter vários protótipos ao mesmo tempo disponíveis para você, você precisa atualizar para planta paga. E é por isso que estou mostrando isso para você em um plano grátis. Você pode ver que eu estou em um plano gratuito porque ele diz para cima upgrade e ele diz para começar um plano. Mas eu queria mostrar que você pode fazer todas essas coisas dentro da terra inicial, especialmente se você começar. Assim, você não precisa pagar por versões premium desde o início. Você pode testar essa ferramenta. Você pode ver se é certo para você, se a UX da interface do usuário é ideal para você e, em seguida, se for, você pode continuar e pagar por essa ferramenta. Então, movendo-se para baixo, nós gerenciamos links. Então, basicamente, estes são os links que você tem um compartilhado com seus clientes ou partes interessadas. E no seu computador você pode localizar os arquivos no seu computador. Aqui você pode ver que os protótipos de design compartilham porque é isso que o Adobe XD faz e é isso que ele é. E abaixo que temos alguns aeroportos que você pode criar a partir daqui. Estes são pré-criados nossas placas, e você pode ver para celular, temos tamanhos de iPhone, esperamos Google Pixel, iPad, Nexus e assim por diante. Então, para a Web, você pode ver que temos 1920 por 1080. E se eu clicar aqui, você pode ver que eles estão lhe dando essas opções recompostas. Se você quiser usá-los, então temos tamanhos de mídia social. Então você pode ver que temos postagens de história do Instagram, cabeçalho de postagens do Twitter, Facebook, capa do Facebook e, finalmente, vídeo do YouTube. E finalmente temos tamanho personalizado. Então você pode usar esse tamanho personalizado para qualquer tamanho que você quiser. Você pode inserir valor de pixel aqui, e você pode simplesmente clicar nele e, em seguida, ele será aberto como um novo documento. E com isso, nosso tamanho do porto dentro. Então, como eu disse, você pode usar qualquer um destes ou você pode simplesmente inserir um valor personalizado aqui. E finalmente aqui temos documentos recentes. Então estes são apenas os documentos que você abriu. E você pode clicar aqui para acessar alguns dos artigos mais recentes de seu blog e ajudar a postar e assim por diante. Como eu expliquei, Uma coisa a notar é que esta tela de boas-vindas vai mudar ao longo do tempo. Então, certifique-se de entender que, se você estiver assistindo a este vídeo ou discurso no futuro e estiver verificando isso e ele não for o mesmo que o seu, certifique-se de que ele está atualizando o tempo todo. Mas estes são apenas os recursos básicos e ferramentas que você pode esperar aqui na tela de boas-vindas. Então, para começar, eu vou apenas escolher um, rpart psi iso, talvez 1920 por 1080. E eu vou entrar aqui só para mostrar a vocês como isso parece. Então é um 80. Você pode clicar em Enter ou você pode clicar aqui para abri-lo e descartar. Parece que uma vez aberto, deixe-me ampliá-lo um pouco. E agora vamos passar para o Adobe XD são ferramentas e recursos e o que você pode esperar. 5. Interface: A beleza do Adobe XD é que ele tem interface muito simples de usar. Então eu estou em uma versão do Windows, como eu disse, e esta é a principal diferença entre Windows e Mac, porque no Windows você tem este menu de hambúrguer e você pode acessar todas as suas ferramentas a partir daqui. você também pode clicar com o botão direito do mouse em qualquer parte do documento para acessar alguns recursos adicionais como esses. Você pode clicar com o botão direito aqui. E então você tem sub-menus que você pode inserir e usar alguns dos recursos. Enquanto estiver no Mac, você terá todas essas opções aqui na parte superior e abaixo disso. Então essa é realmente a diferença crucial entre o XD em um Mac e em um PC. Então, quando se trata de interface, você pode ver que está dividido em três partes. Aqui você tem suas ferramentas, então você tem sua ferramenta de seleção para selecionar várias coisas. Você tem suas formas bem aqui. Então você tem um lápis, textual, nossa ferramenta de placas, e finalmente ferramenta de zoom. E abaixo aqui temos bibliotecas, temos camadas, temos plugins bem aqui no topo. Nós projetamos protótipos compartilhar, porque essas são as coisas pelas quais XD é famoso. E você pode simplesmente alternar entre essas três guias para acessar diferentes funcionalidades do Adobe XD. Finalmente, temos este painel aqui à direita. E dependendo do que você está fazendo em nosso quadro, dependendo do que é selecionado, este painel direito está sempre mudando. Ele sempre tem alguns recursos dentro para todas as coisas que você está fazendo, por exemplo, posicionamento e assim por diante. Mas continua mudando dependendo do que você selecionou. Se isso é compartilhamento de protótipos de design, se você está trabalhando algo bem aqui na sua porta R. Então vamos agora passar para formas e eu vou explicar que tipo de formas você tem no Adobe XD e o que você pode fazer com elas. 6. Formas: Vamos começar com as formas e formas estão localizados aqui. E você pode ver como retângulo você tem lábios, você tem polígono, e finalmente você tem sua ferramenta de linha. E, finalmente, você pode criar formas personalizadas usando mental. Mas vou dedicar um pouco mais de tempo para o próprio manto. Então, para usar qualquer forma a partir daqui, tudo o que você precisa fazer é simplesmente clicar nele para selecioná-lo, e então simplesmente desenhar em suas placas. E assim que você fizer isso você tem alguns valores bem aqui. Então vamos um por um e eu vou mostrar o que todos esses valores são para cada uma dessas formas. Primeiro, vamos desenhar rapidamente essas formas para que eu possa mostrar como todas elas são nuclídeos assim. E eu estou simplesmente usando o teclado v omega para usar a ferramenta Select, a fim de posicioná-lo. E finalmente, vamos em frente e criar uma forma com a nossa mente. E deixe-me mostrar rapidamente as diferenças. Assim, você pode ver aqui no seu painel Camadas que você pode ocultar simplesmente clicando aqui. Temos retângulo, que é este, linha de polígono elipse. E finalmente parte, porque usamos a ferramenta caneta para criar essa parte personalizada. Agora, o que você pode fazer com todas as suas formas é, se você selecionar uma forma, você pode ver todas essas ferramentas disponíveis para você aqui. Então aqui temos ferramentas de posicionamento para que você possa posicioná-lo em qualquer parte do aeroporto que você quiser. Temos uma grade de repetição e eu vou explicar a repetição Grade um pouco mais tarde com mais detalhes e o que você pode fazer com ele. E então temos ferramentas de fusão e operações booleanas. Então basicamente você pode selecionar duas ou mais dessas portas e você pode adicionar, subtrair, cruzar, e finalmente excluir, sobrepor. E eu realmente encorajo você, se você não sabe o que todas essas coisas são, para selecionar duas ou mais formas e brincar com elas e ver o que você pode fazer. Mas, basicamente, você pode combiná-los em uma única forma ou você pode adicionar algumas propriedades múltiplas a ele, como por exemplo, contorno excluído e muito mais. Se avançarmos para baixo, então nos transformaremos. Você pode mudar sua largura, você pode mudar sua altura. Posicionamento no eixo x e y, você tem sua rotação. Então, se eu inserir 45 graus, por exemplo, você pode vê-lo girado, mas você também pode passar o mouse aqui, mantenha pressionada a tecla Shift, por exemplo, e ela girará em incrementos. Ou você pode apertar o controle z para voltar. Em seguida, temos flipping, então virar horizontal, virar vertical. Abaixo disso, temos um rolagem horizontal. E explicarei isso um pouco mais tarde. O que é. Temos rolagem vertical e temos rolagem em todas as posições. Finalmente, temos posição fixa ao rolar. Então, ao criar designers de sites ou designs de aplicativos, você deseja que alguns elementos sejam corrigidos no lugar quando o usuário começar a rastrear. Então é para isso que é usado e vou mostrar-lhe isso em exemplos posteriores também. Abaixo disso, como eu disse, temos redimensionamento responsivo. E eu vou mostrar a vocês um pouco mais sobre redimensionar responsivo mais tarde também. Abaixo disso, temos obesidade. Assim, você pode alterar a obesidade fora do seu objeto simplesmente usando este controle deslizante ou você pode usar atalhos de teclado. Então um é para 10%, para, é para os 40%, por exemplo, oito é 4800% é para 100%. Abaixo disso, você tem modos de mesclagem e tem vários modos de mesclagem, basicamente os mesmos que no Photoshop, Illustrator. Então, se você já usou para comprar, eu realmente encorajo você a testar esses modos de mesclagem porque eles funcionam quase da mesma forma que no Photoshop, mas eles não têm quase tantas funções como no arbusto florestal, obviamente porque em xsd, ele é apenas simplificado para o trabalho UI e UX. Abaixo disso. Temos um raio de canto. Então, no momento, é 0, mas se você quiser arredondar os cantos, você pode usar esses pontos e simplesmente clicar e arrastar. E vai arredondar as esquinas. E vocês podem ver, enquanto estou fazendo isso, os valores aqui estão mudando. Ou você pode simplesmente inserir manualmente, por exemplo, 24, o raio do canto e ele executará seus cantos para esse valor. Você também pode ao redor dos cantos de cada um dos seus cantos. Então, por exemplo, eu vou bater 0 e você pode ver o canto superior esquerdo é 0, bem aqui. E você pode fazer isso por todo o Oregon. Simplesmente coef aqui anti 20 e ele vai arredondar em todos os cantos. Em seguida, vem a cor de preenchimento. Você pode clicar aqui e você pode alterar a cor de preenchimento. Você pode inserir o código hexadecimal aqui. Então, por exemplo, três 0s, C6, FF para um azul agradável. E você tem seus valores de fronteira brancos aqui. Mas antes de passarmos para as fronteiras, você pode mudar do espectro de cores. Por que aqui você pode mudar o quão clara ou escura sua cor vai ser. Você pode alterar a opacidade da sua cor. Você pode adicionar código hexadecimal ou você pode simplesmente clicar aqui para salvar a cor como uma amostra para que você possa usá-lo mais tarde, mas simplesmente clicando nele. E aplicar-se-á a qualquer objeto selecionado ou no seu aeroporto. Em seguida, se você clicar aqui, vai abrir um gradiente linear ou gradiente radial. E basicamente você tem essas três opções. Então, no momento, é a cor sólida. Se eu clicar aqui, você pode ver que temos gradiente linear e você pode adicionar quantas paradas quiser. Você pode simplesmente clicar aqui, então você pode girar seu gradiente para ir de um lado para outro. E, finalmente, para cada uma dessas paradas, você pode adicionar uma cor diferente ou você pode adicionar uma tonalidade diferente da sua cor. Você também pode clicar e reduzir sua obesidade assim para cada cor individual. Mas os gradientes radiais basicamente parecem exatamente os mesmos, mas é InCircle. Mas eu vou usar Carlos sólido para este exemplo para manter as coisas agradáveis e simples. Abaixo disso temos fronteira. E se eu clicar aqui, você pode ver que a fronteira está desaparecendo. E se eu aumentar o tamanho, então, por exemplo, dez, você pode ver agora que aumentou. Você também pode clicar aqui para alterar a cor da sua borda. Mesma história, código hexadecimal da obesidade. Você também pode adicioná-lo como amostra ou você pode clicar aqui para provar uma cor para onde quiser. E deixe-me rapidamente provar esta cor azul como minha borda. Mas vamos voltar para aqui e me deixar explicar tudo isso. Então nós temos largura de traço, que é basicamente o que você está vendo aqui. Então temos o traço. E se eu dissesse, eu não sei, 50 por exemplo, você pode ver que ele está dividido nesses traços e lacuna também é 50. Mas se eu aumentar a diferença para 100, você pode ver agora que a diferença é muito maior entre esses traços. Você sempre pode descer para 0 e descer para 0. Veja como isso parece. E aqui temos algumas opções diferentes de acidente vascular cerebral. Então Inner Stroke, nosso AVC centra AVC E eu realmente encorajo você a testá-lo e tentar por si mesmo todas essas opções diferentes e ver o que eles estão fazendo. Próximo. Temos bootcamp, tampa redonda e espaço de projecção. E isso é realmente útil se você quiser ter bordas arredondadas em suas linhas, por exemplo. Em seguida, temos o Sr. unido em torno de uma articulação e Bevel junta. E isso é basicamente como os cantos vão se parecer. Finalmente, temos a sombra. Então esta é a sombra de fundo da sua própria forma. Sólidos entram, por exemplo, algo realmente enorme. Então 202020, então este é o eixo x, este é o eixo y, e isso é o quanto de desfoque você deseja usar para sua sombra. Então, se eu, por exemplo, aumentar isso, você pode ver que ele vai para baixo no eixo y. Se eu aumentá-lo para aqui, você pode ver que ele vai para a direita no eixo x. E se eu aumentar até aqui, você pode ver que o valor do borrão está aumentando massivamente à medida que eles aumentam de tamanho e você só pode ir para 100. Então é basicamente assim que a sombra se parece. E você também pode economizar para a cor e a borda. Você pode mudar sua cor. Você pode ir do espectro de carbono, você pode interagir escopo, você pode usar amostras de cores e você sempre pode baixá-lo na obesidade a partir daqui. Finalmente, temos a opção de desfoque de fundo e desfoque de fundo é realmente útil, mas você precisa ter dois ou mais elementos para que isso funcione. Então deixe-me mudar isso um pouco. Então eu movi o retângulo acima da elipse apenas para que eu possa mostrar como isso se parece. Então, se eu menor que a minha quantidade, menor que o meu brilho, você pode apenas começar a ver o círculo atrás do nosso retângulo e você pode ver como isso se parece. Para que eu possa diminuir a minha quantia ou aumentá-la. Eu posso aumentar ou diminuir meu brilho e eu posso aumentar ou diminuir minha obesidade dependendo do que eu quero fazer. Então basicamente é assim que isso funciona e é assim que isso parece. Se quiser, você pode usar o desfoque de fundo para todos os tipos de coisas dentro do Adobe XD, especialmente útil para imagens se quiser fundos desfocados. Se você quiser usar algo como morfismo de vidro em seu design, então você pode usar essa opção com o desfoque de fundo. Finalmente, temos Mark para exportação bem aqui. E isso é realmente útil se você quiser exportar rapidamente todos os seus arquivos que estão marcados para exportação, você pode simplesmente clicar aqui para verificar. Ou você sempre pode ir aqui e diz Mark para exportação. E então você pode exportar rapidamente todos os seus arquivos que são marcados para exportação posteriormente para designers, desenvolvedores ou clientes. Então, se movermos um para baixo, basicamente você pode ver que para todos esses, nós temos algumas dessas opções. Alguns deles são iguais, alguns deles são um pouco diferentes. E finalmente, para este, eu queria mostrar porque esta é a ferramenta polígono, que é esta ferramenta bem aqui. E você pode compartilhar um quantos cantos você quer. Então, atualmente ele disse livre, por isso é um triângulo. Mas se eu mudar para cinco, você pode ver como isso se parece. Se eu mudar para oito, parece que sim. Você também pode aumentar ou diminuir o tamanho de suas formas simplesmente segurando sua tecla Shift e clicando em um dos cantos para aumentar ou diminuir o tamanho de sua forma. Como explicamos, você pode mudar o tamanho da fronteira. E finalmente, temos um raio de canto aqui como este. Então vamos com 20. E vocês podem ver que todos os cantos de cada um desses trimestres serão arredondados, não importa o valor que eu tenha inserido aqui. Finalmente, temos a proporção estelar e eu não sei, digamos, por exemplo, 50. E você pode ver que ele cria essas estrelas diferentes. Então, se entrar, digamos dez, você pode ver uma espécie de engrenagem ou 70. Então ele cria esse tipo diferente de formas bem aqui. Mas se eu for para 100, vai voltar para a nossa forma original. Você também pode fazer aqui é segurar assim e, em seguida, como este. Então, maior do que e, em seguida, número três, pressione Enter e ele vai criar um coração, que é um habitat simples Adobe XD teen criado apenas para tornar sua vida mais fácil quando você começar a criar esses ícones. Então, basicamente, temos as mesmas opções que sempre tivemos. Então, agora você pode criar, você pode adicioná-lo a cor de preenchimento, você pode adicioná-lo à cor da borda. E você sempre pode voltar para onde estava antes. Assim, você pode criar todas essas opções diferentes. Então, por exemplo, eu já fiz três anos. Eu posso ir para a minha cor de preenchimento para algo assim. Você pode adicionar seu plano de fundo, sombra, desfoque de fundo e todas essas opções que explicamos. Finalmente, deixe-os cobrir rapidamente estas peças de lápis e eu vou voltar a ele em apenas um segundo e explicar um lápis. Então o que você pode fazer com ele é exatamente o mesmo para todas as formas, mas esta é apenas uma forma personalizada que você criou usando mental. E vamos seguir em frente e eu vou explicar o que ferramenta de caneta é agora. Então eu vou mostrar a vocês como você pode editar formas complexas e como podemos criar formas complexas usando lápis. 7. Ferramenta Caneta: Então, como eu disse, você pode usar lápis para criar todos os tipos de formas, mas geralmente você está usando lápis para criar essas formas mais complexas como esta é qualquer que seja criado por. Vamos mais uma vez. Então você pode clicar em seu lápis e você pode clicar onde quiser, e você tem esses pontos de ancoragem. E uma vez que você terminar de completar sua forma, você pode deslizar um clique no aeroporto e você pode movê-lo para onde quiser. Então vamos dizer que eu quero mover este aqui. E se você clicar duas vezes sobre ele, ele se tornará este arco. E então você pode mudar como você deseja que este arco seja posicionado. E você também pode manter a tecla shift para descer nesses incrementos, se quiser. Assim, ele manterá o ângulo dos seus pontos de ancoragem para o ângulo que você quiser. Então, por exemplo, 4517918 e assim por diante. Então você pode fazer isso para todos estes, Basta clicar duas vezes ou se você mudar de idéia e qualquer ponto, você pode simplesmente clicar duas vezes para trás e ele irá reverter de volta para reta. Mas o que você também pode fazer, explicamos isso em seções anteriores. Você pode alterar a cor de preenchimento, a cor da borda, mas vamos voltar e eu mostrarei como eles se parecem. Então eu vou ampliar realmente de perto e eu vou clicar em Minhas ovelhas assim. Então vamos para a tampa redonda. E você não vê isso no momento. Mas, por exemplo, se eu clicar aqui, aqui e aqui, em seguida, pressione Escape Just para criar esta linha. Deixe-me selecioná-lo mais uma vez. Se eu ampliar de perto. Agora você pode ver que é assim que a tampa do botão se parece. Parece que sim. Então, basicamente, é realmente plana. É assim que a tampa de projeção parece. Então é realmente plana, mas meio que se estende onde o ponto é na tampa do botão, é bem no centro, mas aqui na tampa projetada, está bem aqui. Então essa é a diferença onde está o seu ponto final. Enquanto com uma tampa redonda, você pode vê-lo arredondar seu boné e ele corre sua linha em sua forma. Então você pode realmente brincar com isso dessa forma. Basicamente, se você clicar aqui e clicar em torno da lacuna, você pode ter certeza de que cada um desses pontos de ancoragem contém essas tampas redondas. Ou se você, por exemplo, quiser excluir um desses, eu poderia ter colocado este. Você pode ver que ele contém aquela tampa redonda e ainda está dentro dessa forma. Então, como eu disse, você pode brincar com todas essas configurações diferentes e você pode clicar e você pode mover todos esses pontos de ancoragem. E vamos com a cor de preenchimento e vamos adicionar uma cor de preenchimento. Vamos adicionar uma borda diferente. Vamos dar dez. Então você pode ver o que está acontecendo. E você também pode clicar onde quiser para adicionar novos pontos de ancoragem. Você pode estendê-los, clicar duas vezes e alterar e criar formas basicamente diferentes. Se você quiser desenhar usando o Adobe XD, você pode colocar seu esboço dentro do Adobe XD. Então vamos imaginar que esta é a forma que você está criando. Você pode posicioná-lo oreo esboço como este, por exemplo. Então você pode diminuir a obesidade e, em seguida, você pode simplesmente clicar em sua forma e você pode, em seguida, ajustar todos estes mais tarde, que é extremamente útil se você está trabalhando como um designer UX UX UX. Se você estiver criando ícones, por exemplo, e estiver usando caneta e papel para esboçar esses ícones diferentes. Em seguida, você pode usar o Adobe XD para ajustar todos eles e você pode ajustar a espessura da borda, 2222 ou o que quiser. E basicamente, é assim que a ferramenta de caneta funciona e como ela se parece no Adobe XD. 8. Ferramenta de texto: Quando se trata de inserir seus ataques do que usar textos no Adobe XD, você tem alguns recursos excelentes, mas não é tão avançado quanto algo como Illustrator ou InDesign, que é usado para impressão. Então vamos dar uma olhada. Você tem opções de texto aqui. Você também pode pressionar t em sua palavra-chave. Então deixe-me digitar alguns textos aleatórios até idéias apenas para que nós temos algum texto na página. E para que eu possa explicar o que é. Então, digamos que tenhamos completado isso. E se eu selecionei, você pode ver que temos essas opções aqui. Então, mais uma vez, o mesmo para as formas. Temos essas opções posicionadas na parte superior, temos essas opções de transformação, invertendo, girando e viu, redimensionando sem resposta. E aqui temos o painel de texto, que é parte importante deste imposto. Você pode aumentar o tamanho do seu texto simplesmente passando o mouse sobre este ponto, clicando nele e simplesmente arrastando. E é muito útil fazer se você quiser posicionar seu texto, você pode usá-los como um conjunto. E, finalmente, vamos agora passar para o texto para que você possa escolher sua família de fontes aqui. Então vamos com quatro pinos, por exemplo, que é uma fonte de regra livre. E eu vou simplesmente posicionar e no centro, assim. Então o que você pode fazer é usar o tamanho. Então, atualmente está em 47. Você pode usar Shift e seta para cima para saltar entre dez incrementos diferentes no tamanho 5767 e assim por diante. Em seguida, temos como o peso da fonte vai se parecer. Portanto, dependendo da fonte que você selecionou aqui, você pode ter pesos diferentes. Soma, alguns deles têm um ou dois em algum lugar eles têm 1020, então dependendo de qual você selecionou. Então vamos, por exemplo, com luz extra, ver como isso se parece com luz. E você também pode usar a tecla shift aqui também. Basta ir para cima ou para baixo e ver como tudo isso se parece. Em seguida, o que temos é espaçamento de caracteres, e isso é basicamente o espaçamento entre cada caractere. Então, se eu usar minha tecla Shift e incrementos, você pode ver como isso se parece. Então, é muito útil se você quiser fazer isso. Aqui temos espaçamento entre linhas. Então espaçamento entre cada uma dessas linhas de texto. E finalmente, o que temos aqui é espaçamento de parágrafos, mas eu tenho que criar um parágrafo para fazer isso. Mas basicamente faz quase a mesma coisa que o espaçamento entre linhas. Aqui temos um alinhamento à esquerda para que quando você estiver digitando ele vá da esquerda para a direita. Aqui temos o centro alinhado. Então você pode ver como isso se parece. E basicamente vai ir do centro para fora. E aqui temos uma aliança de escrita. Então basicamente a mesma coisa que alinhado à esquerda. Aqui temos largura automática, então não importa o que você está digitando, Vamos com a linha esquerda para mostrar que não importa o que você está digitando. E quando você sai, você pode ver que é a largura automática. Aqui temos altura automática. Então, digamos, por exemplo, que eu queira digitar algo mais. Você pode ver que ele vai automaticamente em altura também. E finalmente, temos tamanho fixo, que é o parágrafo que eu estava falando. Então, se eu clicar aqui e baixá-lo, você pode ver que esta é uma ótima opção se você tem um monte de textos. E, por exemplo, se eu fiz algo assim, e eu sei que há mais texto abaixo, eu sempre posso clicar aqui. E ele vai me mostrar o texto que está lá embaixo. O que temos aqui é maiúscula. Temos minúsculas, maiúsculas e minúsculas. Então, cada primeira letra do mundo será intitulada. Então temos sobrescrito. Então deixe-me adicionar um número para, por exemplo. E quando eu clico em super script, você pode ver o que ele faz bem ali. Temos subscrito. Então, basicamente a mesma coisa, mas abaixo, temos sublinhado. Então todo o texto vai ser sublinhado e nós temos tachado, então ele vai passar pelo texto em si. Você sempre pode clicar aqui para alterá-lo e adicionar o que quiser. Mas basicamente maiúsculas, minúsculas, maiúsculas e minúsculas. E vamos deixar assim. Por agora. Abaixo que temos uma aparência básica tão o mesmo que as formas que temos obesidade. Então, se uma criança para uma palavra Mickey vai para 20 no modo de mistura de obesidade, cor de preenchimento, cores de borda, sombra, fundo, borrão, e Mark para exportação. Então basicamente todas as mesmas coisas que tínhamos dentro de nossas formas. Em seguida, vamos passar para nossas placas e eu vou explicar rapidamente o são aeroportos e quais são alguns benefícios de usar aeroportos versus não. 9. Pranchas: Como explicamos em um vídeo de boas-vindas anterior, onde eu disse sobre nossas placas e onde você pode criá-las e como podemos criar todos esses tamanhos diferentes dentro do Adobe XD, há também mais uma opção para o rpart também. Então, quando você clicar aqui à sua esquerda, você vai ser apresentado com todos esses diferentes tamanhos de nossas placas, que é basicamente exatamente o mesmo que aqui na página inicial. Então todos esses tamanhos estão localizados aqui também. Mas por que nossas tábuas são tão úteis? E o que você pode fazer com seus quadros de arte, basicamente, você pode clicar aqui. Você pode mudar o tamanho. Então, digamos que esta é a nossa tela principal. E você pode escolher o tamanho do seu quadro de arte diretamente a partir daqui. Você pode girá-lo. Então você pode clicar assim ou assim. E vamos dizer que eu quero mudar o tamanho para eu não sei. Digamos algo como 2453 por qualquer razão que se estenda até aqui. Você também pode clicar em redimensionar responsivo. Então, quando você começa a redimensionar, você pode ver como o texto vai agir. E isso é realmente útil. Obviamente, quando você está fazendo design responsivo, que você vai falar toque em um pouco mais tarde. Então você também tem um manual que você pode clicar e decidir onde quiser, redimensionar responsivo e como você quer que ele funcione. Em seguida, quando eu clicar aqui, você pode ver que temos uma rolagem vertical e não temos nenhuma. Mas você também pode usar essas opções, que mencionei anteriormente, sobre rolagem horizontal, vertical e rolagem em todas as direções. E eu vou tocar nisso um pouco mais tarde. Em seguida, temos aparência. Então, se clicarmos aqui, você pode ver que esta é a cor do seu aeroporto em si. Tão feio com o branco. Ou você pode alterá-lo para a cor que você quiser. E, finalmente, abaixo disso, temos layout. Então, se eu clicar aqui, você pode ver que nós temos layout ou nós temos quadrado. Se você tem seu tamanho quadrado, você pode alterá-lo para aqui, tamanho de grade quadrada de oito. Eu posso mudar para domingo, enorme como 80. E você pode ver como isso se é mais fácil para você alinhar itens na grade como este. Ou você pode selecioná-lo a partir daqui. E então você pode alterá-lo de quadrado para layout. E então você pode brincar com essas colunas. Então as colunas são normalmente usadas para, para o design UX da interface porque você pode alinhar as coisas duas colunas diferentes, e você pode simplesmente contar colunas, que é realmente facilmente traduzido em código porque os desenvolvedores podem facilmente entender em termos de colunas, quão grande é algo, quão alto é algo, e assim por diante. Então aqui temos 12 colunas e temos este belo 1920 por 1080, nosso tamanho de tabuleiro, que pode ser muito útil para web design, por exemplo. Então, se eu escolher, eu posso usar algo como oito colunas. Posso até mudar para quatro, mas vamos voltar para 12. E eu posso mudar a largura da calha para 60, por exemplo, na largura da calha é basicamente o espaçamento entre essas colunas e colunas são esses bits azuis no nosso caso. Assim, você pode alterar a largura da coluna, 260, por exemplo, para tornar suas colunas ainda mais estreitas. E você pode alterar margens diferentes. Portanto, as margens são o espaçamento entre essas colunas. Então, aqui à esquerda e à direita, você pode alterá-los automaticamente. Então, por exemplo, se eu digitar 200 e você pode ver que as margens agora são realmente enormes, mas você também pode ir aqui e mudar margens diferentes. Então, se eu passar o mouse, você pode ver que temos margem, topo, margem, direita, inferior e esquerda. Você também pode usar o padrão. Então, se clicarmos aqui, esta é a opção padrão, ou você pode fazer padrão. Então, se nós, por exemplo, fizermos essas alterações, 6060, e vamos usar isso como um 60, por exemplo. E queremos fazer isso como nosso padrão. Você pode simplesmente clicar em Tornar padrão. Você também pode dar-lhe um nome e ele vai fazer uma opção padrão para isso. Finalmente, se você acha que essas colunas são muito distraentes, você pode clicar aqui e você pode baixar a obesidade dessas colunas para que elas não são muito distraentes para olhar e você pode sempre olhar para o seu conteúdo à vontade. 10. Bibliotecas: As bibliotecas são um ótimo recurso para ter no Adobe XD, pois você pode organizar rapidamente todos os seus arquivos, todas as suas cores, todos os seus estilos de personagem e muito mais em um único espaço onde você pode facilmente navegar ao redor e você pode acessar todos esses arquivos de uma só vez. Então está localizado bem aqui. E se clicarmos nele, você pode ver que você pode adicionar cores, você pode adicionar estilos de caractere e você pode adicionar componentes. Então deixe-me mostrar rapidamente como isso funciona. Então vamos duplicar. Estes estavam atingindo o Controle D e quando o cloro caiu para 40, por exemplo. E vamos mudá-lo de médio para luz. Vamos também mudar a cor para este preto realmente escuro. E vamos mudar isso para uma cor mais clara ou ainda melhor, vamos usar algo completamente diferente. Solidões, divulgação, por exemplo, e deixá-los cozinhar aqui e depois aqui mesmo para esconder meus guias. Então o que você pode fazer a partir daqui é para as cores que eu posso clicar aqui, e eu posso adicionar a cor do meu texto como uma amostra de cores. E eu também posso fazer o mesmo para decimal. Para os estilos de personagem, eu posso fazer o mesmo. Então clique aqui e adicione-o a aqui. Então, porque temos isto e deixa-me apagá-lo. Assim, vamos agora ir em frente e mudar estes. Então, vamos clicar com o botão direito do mouse neste. Acertar, apagar, assim. Então agora só temos este 157 e eu também vou fazer o mesmo a partir daqui. Então, não temos mais esse “subscrito”. Então eu posso clicar aqui e que acrescentou, mas também acrescentou. Então eu sempre posso clicar em um desses e clicar em excluir aqui. E rebanho leiteiro, basicamente. Então é assim que você adiciona cores. Este Hj você tinha chamado estilos de personagem, e você pode fazer isso para cada forma única. Então vamos usar isso por exemplo, e vamos usar isso. E vamos remover a borda, por exemplo. E você pode simplesmente clicar aqui para adicionar essa cor. Você também pode clicar duas vezes aqui e chamá-lo, por exemplo, rota principal, chamado este azul principal, por exemplo. Como assim. E vamos chamar isso de cor do texto ou texto principal ou o que quer que seja. E isso é realmente útil para fazer se você estiver lidando com desenvolvedores mais tarde, porque Dan, você pode criar esses tokens e será facilmente acessível para eles. Agora, em termos de componentes, digamos que, por exemplo, eu queria duplicar isso, pressione o controle D den Shift Alt e clique com o botão esquerdo do mouse. E eu vou me trocar. E, por exemplo, vamos usar esses dois. E em vez disso, vamos criar algo assim. E também se eu clicar nele, por exemplo, talvez eu possa mudá-lo para 20. E digamos que este é o nosso ícone ou o nosso logotipo ou o que quer que seja. E eu posso ir para minha paleta de camadas, clicar duas vezes aqui e chamá-la de logotipo, apenas por exemplo. E o que você pode fazer é clicar aqui para adicioná-lo como um componente. Você também pode clicar aqui para adicioná-lo como um componente. Mas você pode pressionar a tecla Control ou Command no teclado e adicioná-lo como um componente. Então, por exemplo, se você quiser criar um novo aeroporto, e digamos que queremos criar este. Você pode clicar quando seu logotipo, arrastá-lo e soltá-lo aqui. E você pode ver que é uma instância de um componente porque ele lhe dá este diamante oco que você pode ver aqui. E como este é o nosso componente principal, você pode ver que ele está preenchido. Então, se os pegarmos e os trouxermos aqui lado a lado, você pode ver claramente a diferença. Vamos apagar este. Pressione Control 0 para encaixar novamente no lugar e no espaço e clique com o botão esquerdo do mouse para navegar. Então, se clicarmos aqui, você pode ver que está cheio e isso está vazio. Então o que isso basicamente significa é que quando você é diamante é preenchido, seu trabalho com componente principal e quando seu diamante é oco, trabalhando como uma instância desse componente principal, o que isso basicamente significa em inglês simples, quaisquer alterações que você está criando e fazendo o componente principal, eles serão automaticamente traduzidos para o componente filho ou este diamante oco neste caso. Então, por exemplo, se você não tocou nos componentes filho, então qualquer alteração que você fizer no componente principal será traduzida para o componente filho automaticamente. Mas, por exemplo, se você substituiu essas alterações, se no nosso caso, por exemplo, vamos dizer que talvez se eu clicar duas vezes aqui, assim, e mudá-lo para dez ou mesmo 0. Então eu pulo aqui, clique duas vezes dentro para entrar na minha forma e muda para 50. Você pode vê-lo atualizado aqui, mas não aqui. Ele foi atualizado no componente principal, não no componente filho, porque nós alteramos manualmente esse valor em componentes filho antes de fazê-lo no componente principal. Então, você pode imaginar que você pode fazer isso em todo o seu trabalho no Adobe XD. Então vamos imaginar que você, por exemplo, criou uma navegação para o seu site. E como um componente principal você tem como tal. Mas, como componentes filho, digamos que você tenha itens selecionados em sua navegação. Então não vai mudar no componente principal, mas vai mudar em um componente filho. Mas, no componente filho, você não alterou a cor do plano de fundo, por exemplo. Então você pode rapidamente saltar para o componente principal, alterar a cor de fundo vai atualizar todos os seus componentes filho. E você pode ter quantos componentes filho quiser. Neste caso, só tenho um para demonstrar como isto se parece. E digamos que, por exemplo, no componente principal de navegação da dívida, você deseja alterar o estilo do caractere. Por exemplo, você deseja atualizar a família de fontes. Você deseja atualizar o tamanho da fonte. Talvez você queira atualizar a cor da fonte. Você pode fazer isso no componente principal e ele será atualizado em todos os componentes filho. Não importa quantos componentes filhos você tem, apenas imaginou, as alterações que você faz em seus componentes filhos não vão se traduzir para seus componentes principais, mas eles vão traduzir o contrário. Então, do componente principal para componentes filho. Então vamos voltar rapidamente para aqui e deixe-me explicar isso um pouco mais. Então você pode ver neste componente principal, temos esta cor vermelha selecionada. Mas se eu selecionar essa cor, por exemplo, ela será atualizada. Componente filho também. E vamos tornar isto um pouco mais interessante. Vamos segurar nosso cubo antigo ou MAC opcional. Cara, eu posso fazer outro componente infantil. Então você pode ver que esses diamantes vazios não estão mudando. Então basicamente você preencheu ou você tem segurar e é basicamente isso. Então vamos dizer que neste, eu posso saltar para dentro, clicar duas vezes e eu posso mudá-lo para azul. Então vamos atualizar este para ler. Mas este azul não vai mudar porque é substituído dentro deste componente filho em vez de neste componente principal. Então, basicamente, você pode ver como esses componentes se parecem, como eles funcionam, e eles são realmente úteis, especialmente se você estiver trabalhando com, digamos ícones. Se você estiver trabalhando com elementos complexos, como navegação. Porque, por exemplo, você pode criar diferentes estilos de componentes e criar elementos diferentes. Nós somos componentes, e então você pode seguir em frente a partir daí. Você também pode criar algo que é chamado de estados componentes. E isso basicamente significa que quando você se move para prototipagem mais tarde, como esse componente vai mudar. Então deixe-me mostrar-lhe isso em um exemplo real. Então aqui temos este componente e vamos dizer que eu quero criar um estado diferente, por exemplo, para o estado de foco. Então eu posso simplesmente clicar aqui e adicionar um novo estado ou um estado de foco. No nosso caso, eu só quero criar um cavalo dados e eu vou explicar todos os estados um pouco mais tarde no curso, um pouco mais detalhes. Mas, por enquanto, vamos explorar rapidamente os estados Horace, apenas para que você possa entender como tudo funciona. Então aqui temos estados de pairar. Mais uma vez, você pode clicar aqui em um estado de clicker e editar. Você também pode alterá-lo. Então, por exemplo, passe o mouse. E dentro do estado de horror, vamos adicionar uma borda, ou vamos adicionar sombra de fundo, vamos adicionar alguns elementos. Então clique na sombra. Vamos trazer algum tamanho ridículo ou 202020. Então, algo realmente enorme assim. E se eu levar você de volta ao meu painel de camadas, você pode ver quando você clica aqui, você pode mudar entre seus estados de componentes. Mas se você clicar aqui, você pode ver que você também tem esses estados de componente. E aqui também. Como não incluímos nenhum estado de componente antes, alteramos isso e incluímos em nosso componente principal, não o incluímos em nossos componentes filho. Então, mais uma vez, qualquer mudança que você fizer no seu Mink e vai se traduzir para componentes filhos. Então aqui estamos no estado padrão. E se eu clicar aqui, e apenas para visualizar essas alterações, e se passar o mouse sobre ele rapidamente, você pode ver que ele muda e que ele atualiza em tempo real. Mas também, você pode pairar bem aqui. E você pode ver que isso muda porque nós fizemos essa mudança aqui. E também atualiza o mesmo que com o componente principal. Mas porque temos este raio de canto aqui, não o temos aqui nestes dois componentes. Quando eu passar o mouse, você pode ver que ele atualiza e nos dá essa mudança porque nós fizemos isso no componente principal. Então é basicamente isso para os componentes. Você pode brincar com eles. Você pode adicionar estados diferentes. Eu vou explicar que um pouco mais tarde neste curso, o que você pode fazer com esses componentes, e estes são os procurados pela biblioteca mais uma vez, se eu levá-lo de volta para aqui, você pode ver que temos cores. Você pode ter quantas cores quiser. Estilos de caracteres Você pode ter quantos deles quiser também. Você também pode clicar aqui para mudar entre o analista GridView você, o que for mais fácil para você. Talvez esta vista seja muito mais adequada se você tiver vários ícones, vários valores baixos, e assim por diante. E você também pode expandir este painel para dar a si mesmo um pouco mais de espaço. E você sempre pode escondê-lo simplesmente clicando aqui. Então não está no seu caminho. E você pode fazer isso para bibliotecas, camadas e plug-ins também. Você também pode pesquisar item de documento. Então, por exemplo, o logotipo. Aqui está. Portanto, é muito mais fácil de encontrar, especialmente se você tiver centenas de ícones diferentes. Digamos que, por exemplo, eu tenho 50 ícones de pesquisa diferentes. Eu posso digitar em busca, e então eu posso classificar entre esses ícones de pesquisa aqui nesta lista, em vez de rolar para baixo e pesquisar entre todos os ícones mart. Finalmente, você pode ter ativos de documentos aqui. Por isso, se eu voltar, vai levar-te às bibliotecas. E estes são os ácidos do documento. Então, todos os recursos do nosso documento, que você pode ver aqui. Ou você também pode criar uma Minha Biblioteca, que o levará para a nuvem. E você pode criar sua biblioteca, por exemplo, com imagens personalizadas, cores personalizadas, fontes personalizadas, ícones personalizados e muito mais na nuvem. E você pode simplesmente clicar lá com minha biblioteca vai puxar para cima sua biblioteca a partir da nuvem. E você pode simplesmente arrastar e soltar os elementos da nuvem diretamente em seu documento. Então, esse é um ótimo recurso e benefício ter lido essas bibliotecas online. Basicamente, se você está em um plano gratuito, você tem esse acesso a bibliotecas on-line, mas seu espaço é limitado. Se você tem o plano premium, você tem espaço ilimitado. Assim, você pode ter quantos arquivos quiser na nuvem. 11. CAMADAS: Quando você está trabalhando como um designer de UX da interface do usuário, as chances são de que você vai ter um monte de camadas diferentes nele. A gestão de camadas é realmente importante ter como uma habilidade, mas como uma espécie de hábito, hábitos Guth para ter. Porque à medida que seus projetos crescem, à medida que crescem, a quantidade de camadas será enorme. Portanto, a organização de camadas é realmente uma grande habilidade para ter como designer de UX da interface do usuário. Então deixe-me mostrar-lhe em um WASD, camadas estão localizadas bem aqui. Aqui eu tenho apenas um projeto para o meu canal do YouTube e você pode conferir. Vou deixar o link para que você possa ir e verificar lá fora e ver como eu criei isso se você quiser criá-lo para si mesmo. Mas as camadas estão localizadas logo abaixo nas bibliotecas. E a mesma história para as bibliotecas que você pode clicar para mostrar e clicar para ocultá-las. Não é possível ver nenhuma camada antes de selecionar o aeroporto. Então, se eu selecionar isso são mais, por exemplo, você pode ver todas essas camadas aqui. Então deixe-me aproximar um pouco mais e explicar o que está acontecendo, por exemplo, neste texto. Então aqui eu tenho o título, eu tenho o Air Max, que é este texto bem aqui, e eu tenho essa máscara, e nós vamos retocar as máscaras um pouco mais tarde. Você pode selecionar todos esses itens, por exemplo. Então, se eu for daqui até aqui, segurando a tecla Shift e, em seguida, pressionando Controle ou Comando G, para que eu possa agrupá-los em um grupo. Posso clicar duas vezes aqui e mudar o nome deste grupo para site, por exemplo. E então você pode organizar suas camadas de peso morto. Organizá-los em grupos é muito útil porque se eu assumir um pouco, você pode ver que eu tenho um grupo para minha navegação. Dentro desse grupo, eu tenho três itens e eu sempre gosto de ir da esquerda para a direita porque maioria da população mundial está lendo da esquerda para a direita. Então, portanto, um tem esta organização. Então eu vou do logotipo, que está à esquerda, pesquisa no canto superior esquerdo, e depois Menu. Você não precisa ter uma organização como esta é apenas como eu faço as coisas. Tudo depende de você e como você deseja estruturar suas camadas. Mas adoro fazê-las assim. Então você pode ver que eu os coloquei em um grupo porque é muito mais fácil esconder esse grupo. Você pode simplesmente fazer isso clicando aqui. Se você quiser, por exemplo, reposicionar alguns desses elementos e você não quer que essa navegação seja intrusiva e esteja no lugar. Você também pode bloqueá-lo para que você não possa movê-lo. Então, se eu clicar aqui, você pode ver que ele permanece no lugar e você também pode marcá-lo para exportação. Então você pode clicar aqui e você pode exportá-lo mais tarde, se você quiser. Você também pode deixar alguns itens fora dos grupos, como eu fiz aqui. Mas você pode colocá-los, Por exemplo, Eu tenho um grupo e nosso item, Eu posso bater o controle z e colocá-los em um grupo separado. Então, é realmente tudo até você como você quer estruturar seus elementos. Você pode, por exemplo, também dividir a página dois. Parte de cima, parte do meio, parte de baixo. Você pode combinar seus elementos dessa maneira. Então, é realmente tudo até você e como você deseja estruturar seus elementos dentro do painel de camadas. Você também pode reorganizar alguns deles para que você possa selecionar um grupo, por exemplo, arrastá-lo e soltá-lo abaixo de determinados elementos. E você também pode fazer isso para os elementos. Você pode colocá-lo todo o caminho aqui e você pode apertar o controle z quantas vezes quiser para organizar todas as suas camadas. Isso é basicamente para as camadas. Mas eles são muito importantes. E eu não posso enfatizar o quanto é importante, especialmente se você está começando, aprenda a nomear suas camadas porque você vai ser rapidamente pego neste momento em que você não sabe o que é qualquer coisa porque você fez isso, chamado corretamente. E agora você tem que enviar o arquivo para o seu cliente em vez de desperdiçar horas a fio, apenas para renomear suas camadas, renomeá-lo à medida que você se move, ou pelo menos tentar colocá-los em um grupo e renomear um grupo. Então, quando você envia um arquivo para o desenvolvedor, o desenvolvedor vai ser facilmente capaz de entender o que tudo é e onde tudo está localizado na página. 12. Plug-ins: Plugins são coisa realmente útil para ter no Adobe XD porque ele expande ovos essas funcionalidades e vai para trás e longe do básico. E você pode realmente fazer algumas coisas realmente avançadas no Adobe XD usando plug-ins. Então plugins estão localizados aqui. À esquerda, você pode clicar ali. E ele vai mostrar a lista de plug-ins atualmente instalados. Agora estes são apenas plug-ins mentais. Se você está apenas instalando o Adobe XD, esta lista ficará vazia. Então você tem que começar a instalar plugins em seu computador. E para fazer isso, você pode simplesmente clicar neste ícone mais aqui. Ele vai levá-lo aqui e aqui você pode descobrir, navegar e gerenciar. Se você clicar em Gerenciar, obviamente você pode ver todos os seus plugins existentes e você pode atualizar kit. Tudo. No meu caso, eu tenho esses dois que precisam ser atualizados para que você possa navegar. E digamos que eu queira, não sei, incluir um texto. E você pode apertar Enter. E você pode ver todos esses plugins de texto diferentes que você pode usar para aumentar e melhorar a sua velocidade ou como lorem ipsum no meu caso, que eu vou mostrar-lhe. Mas isso é basicamente como funciona o recurso de navegação. E descobrir é realmente ótimo porque você tem a escolha do editor, você tem que começar o seu design. Então coleção futura, que namoro que todos os designers devem ter localizado ali. Então você pode conferir ou você pode formar suas próprias listas. Isso realmente depende do que você está fazendo porque plugins que eu estou usando para mim mesmo talvez não vai ser morto útil para você. Aqui temos plugins essenciais. Então documento bate-papo, mapas extravagantes, listas, plug-in e falhas. Eu realmente recomendo usar mapas extravagantes porque você pode, por exemplo, instalar um mapa rápido ali. E ele vai extrair informações do Google Maps e vai integrar isso realmente facilmente. Você pode conectar o XD ao seu aplicativo favorito. Então, se você estiver usando medos de escória para mudar o Dropbox e assim por diante, você pode conectá-lo. Temos coleções, plug-ins de esboço tão populares se você estiver fazendo alguma wireframing, por exemplo, copywriting e testes de localização e usabilidade. Então, para todos esses recursos diferentes e você também pode navegar através de categorias. Assim, ferramentas de colaboração e automação, usabilidade e teste, editora manipulou e projetou ativos. Então vamos dizer que eu quero clicar no design como ele vai me mostrar diferentes plugins que estão na categoria de ativos Design. Ou eu posso simplesmente clicar aqui e pesquisar entre essas categorias diferentes ou pesquisar diretamente a partir daqui. Basicamente, quando você instala um plugin. Então vamos dizer que eu quero usar essas faces de interface do usuário e eu posso clicar nele para instalá-lo. Você pode ler a revisão ou você pode clicar no plugin, você pode ver o que ele faz. Você pode ver todos esses exemplos diferentes. E você pode ver as tags, o que há de novo, atualizações SO, classificação. Você pode ver quem fez isso e muito mais. Então é basicamente isso. Como você pode usar um plug-ins de atualização onde eles estão localizados? E vamos agora explorar alguns plug-ins. Então aqui eu tenho esse texto. E digamos que eu queira editar esse texto. Mas digamos que acabei de criá-lo e não sei o que incluir. Atreva-se, O que eu posso usar é usar um plugin chamado Lorem Ipsum, por exemplo. Você pode simplesmente selecionar seu texto. Clique aqui. Sinta o texto do espaço reservado. Você pode escolher o que quiser daqui. E vamos ver. E com a marca de pontuação, digamos ponto, Incluir quebras de linha que você pode desmarcar que estão marcadas no que você quiser. Altura da área de texto cortada para caber no texto inserido. E eu tenho duas linhas de texto, então pressione Inserir, e ele vai inserir este texto. Você pode tentar de novo. Você pode sentir o texto de espaço reservado últimas configurações, ipsum lorem rápido, lorem rápido, ipsum, altura de corte, e muito mais. Então vamos dizer que eu quero ter o meu tamanho fixo. Digamos que eu queira aumentar para aqui. E, por exemplo, para ouvir, talvez sentir com texto de espaço reservado. Agora ele se enche de texto. Você também pode cortá-lo muito alto também. Você também pode fazer um tamanho fixo. Você pode fazer assim. E por exemplo, eu preciso de mais texto, então eu posso rápido lorem ipsum vai preenchê-lo. Talvez eu possa estender um pouco mais para baixo para algo como este lorem ipsum rápido vai se sentir dentro. Então é basicamente assim que o lorem ipsum funciona e como este plug-in concreto funciona. Mas digamos que você queira, eu não sei mais nada. Então, por exemplo, temos essas faces de interface do usuário. Agora vamos desfazer isso rapidamente algumas vezes. Então desfaça isso para a minha primeira e original configuração, que era esta. Então vamos dizer que um, eu preciso de uma interface aqui, talvez ícone de interface do usuário, talvez algum, nosso pneu ou outra coisa. Vamos sair rapidamente desta informação. Então, em algum lugar por aqui, digamos que eu queira incluir um rosto de uma pessoa dentro. Posso ir a algo como rostos de IU. E eu posso pegar minha fonte de EUA, abençoado por exemplo, você pode ir para Filters entertainer. Eu quero incluir uma fêmea de, vamos ver, eu não sei, 30 a 40 anos e emoção é feliz. E isso é tudo uma ajuda. Você também pode ir para Avançado e digamos aplicar aleatoriamente são fotos selecionadas. Vou escolher aplicar aleatoriamente. Está funcionando em um fundo. E depois que ele escaneia o site para minhas tarefas específicas porque eu confiei para encontrar uma fêmea neste determinado grupo demográfico. Você pode ver que ele encontrou esta imagem livre de altruísta. E você também pode fazer isso para imagens adicionais. Digamos que eu queira criar, sei lá, dois ou mais. Então, digamos que eu queira excluir rapidamente este. Vamos rapidamente para aqui. Você também pode usar a grade de repetição, mas vou explicar um pouco, criar um pouco mais tarde. E digamos, eu quero preenchê-lo, nestes três de nós filtros blush. Digamos 230, não sei, macho e fêmea e aplicar aleatoriamente fazendo para fazer sua magia. E, obviamente, quanto mais imagens você tiver para preencher, levará mais tempo. Obviamente, sua velocidade de conexão com a Internet vem em conta aqui. E o que já foi feito, você pode ver o que ele faz aqui. Então aqui temos três fêmeas, e eu também selecionei um macho. Então vamos dizer que eu quero que este seja um homem e que possa clicar lá fora. Em seguida, desmarque Feminino, clique em Aplicar aleatoriamente. N vai aplicar um rosto masculino aleatório aqui a esta imagem assim que for encontrada, os critérios coincidem bem ali. Então, aí está. Esses são os plugins. E você pode, obviamente, brincar com esses plug-ins diferentes. Você pode instalar Quantos deles como você deseja. Você pode ver que eu tenho apenas alguns aqui, mas você pode imaginar que você poderia ter uma lista de plugins bem aqui. E você pode rolar para cima e para baixo e basicamente procurar por esses plug-ins diferentes e aplicá-los. E, finalmente, descubra plugins. Posso ir para Gerenciar plugins. E digamos que eu queira excluir esse oleiro, por exemplo, porque como você pode ver, ele continua aparecendo bem aqui. Posso acertar uma instalação de 100. Vai desinstalá-lo. E você pode ver automaticamente, nós não podemos vê-los mais aqui. Então basicamente portas são implantações e é realmente tudo até você, o designer, como você vai usar esses plugins. Você pode, por exemplo, apenas usar lorem, ipsum e mapas. Você pode usar isso, o que usamos faces de interface do usuário para essas fases para gerar esses avatares aleatórios, você pode usar algo como uma borda branca, o que é realmente incrível. Você também pode usar diferentes plugins que vão ser capazes de fornecer diferentes layouts já pré-criados. Então você pode simplesmente arrastar e soltar esses layouts dentro de suas pastas e começar a criar designs dessa forma. É realmente tudo até você como você está indo para usar esses plug-ins e plug-ins soltos está sempre se expandindo. Qualquer pessoa pode criar um plug-in para o Adobe XD. Por isso, certifique-se de verificar sempre. Certifique-se de seguir o Steam do Adobe XD no Twitter, por exemplo, quando eles estiverem lançando novos plug-ins, que são muito legais e eles acham que mais e mais pessoas devem saber sobre eles. Eles sempre publicarão no Twitter, por exemplo, e em sua página do Facebook. Portanto, certifique-se de cair lá para todos os plugins mais recentes e notícias sobre plug-ins. 13. Repetição: Repetir grade é esta ferramenta incrível no Adobe XD, que é capaz de cortar curto todas essas tarefas chatas de um elementos de repetição. Então, em vez de copiar e colar elementos diferentes, então posicioná-los um abaixo do outro, você pode simplesmente usar uma grade de repetição para fazer essas tarefas tediosas. Então aqui temos este design e eu estou começando com um wireframe. E digamos que eu queira criar uma lista desses hotéis populares. Então, primeiro, vamos rapidamente nos livrar de alguns desses elementos e eu vou movê-los em um grupo. Então controle G. E então eu sou capaz de simplesmente movê-los para baixo. E vamos nos livrar disso. Então vamos dizer que eu preciso preencher este espaço e eu preciso incluir mais algumas informações. O que eu posso fazer é simplesmente selecionar isso e apertar a grade de repetição. O que é isso que vai ser, permita-me expandir a quantidade de todos estes elementos diferentes. Então vamos dizer que eu quero criar dois deles. E quero alinhá-los à esquerda com estes aqui na parte inferior. E vamos dizer que eu quero criar um todos os três ou quatro mais, por exemplo, algo assim. E basicamente é assim que é fácil repetir uma grade. E, em seguida, se você tiver seus arquivos de texto, que você, então você pode facilmente arrastar e soltar um texto dentro e você pode facilmente alterá-lo. Então deixe-me mostrar rapidamente como isso funciona. Digamos que eu queira criar um arquivo de texto. Então deixe-me criar rapidamente um no meu computador e chamá-lo, por exemplo, cidades. E é assim que parece. Estou simplesmente usando o Bloco de Notas no Windows. Você pode usar a opção padrão no Mac. E você pode ver que temos Honolulu nós, digamos que eu quero usar esse. Mas eu também quero usar uma Londres, Reino Unido, Paris, França, Itália. E vamos dar mais dois, por exemplo, em Belgrado, Sérvia, e digamos Montreal, Canadá. Digamos que isso é tudo o que criamos. E agora como você pode realmente usar este arquivo em outro BSD muito rapidamente. Então o que eu vou fazer é fechá-lo, apertar salvar. E eu vou simplesmente arrastá-lo da minha área de trabalho. Como você pode ver, eu o chamei de Cidades e simplesmente coloquei no primeiro porque eu não quero que ele coloque aqui. Eu queria colocá-lo no primeiro porque nós criamos grade de repetição a partir deste primeiro. Então você pode basicamente aqui e você pode vê-lo automaticamente atualizado ao longo de todos estes. Assim, você pode ter quantos desses documentos quiser. Você pode ter feito, por exemplo, para nomes masculinos, nomes femininos, cidades, países, diferentes refs alimentares, receitas onde quer que você esteja fazendo no Adobe XD, você pode ter arquivos diferentes para dívidas, diferentes decks. Você também pode gerar isso na web. Você pode usar sites aleatórios e você pode gerar essa informação que vai ser realmente útil porque, em seguida, você pode criar um sites de aparência real, aplicativos de aparência real, estamos olhando painéis muito rapidamente porque você tem todos esses arquivos já preparados. Então vamos dizer que eu quero em vez de chamar esta vista para o oceano e o que quer que seja, digamos que eu quero criar uma diferente para, vejamos, eu não conheço as pessoas. E eu vou chamar as pessoas. E você pode ver se eu clicar duas vezes, eu chamei de pessoas. Digamos que eu queira dar nomes a eles. Então Jack, Mary não importa, Mark. Stephanie, Jude, analistas dizem Graeme. E agora que eu completei todos esses nomes, o que eu posso fazer é apertar de perto e eu posso localizar as imagens no meu computador, que eu quero incluir dentro. Ou você pode usar uma ferramenta aleatória. Digamos que eu queira incluí-los aqui e ir para faces de interface do usuário, vá para pixels desta vez. E vamos com filtros masculinos e femininos. E vamos dizer que eles estão todos felizes e clique em Aplicar aleatoriamente. Este plugin vai trabalhar a sua magia, mas você também pode fazer a mesma coisa a partir do seu computador. Então eu vou te mostrar isso também. Então você pode ver que ele preencheu com todas essas imagens diferentes. Mas como eu disse, você pode fazer isso por, digamos, homem. E aqui estão apenas algumas dessas imagens pré-preparadas. E eu posso simplesmente arrastar e soltar Quantas dessas imagens eu quero. Então, digamos que eu tenha seis deles. Posso selecionar seis imagens diferentes, e posso simplesmente arrastá-las e soltá-las do meu computador. Deixe-me ampliar isso só um segundo. Então, seis deles, eu posso simplesmente clicar, arrastar e soltá-los no primeiro. E vai preencher com estas seis imagens. Então, como você pode ver, repetição grade é realmente extremamente útil. E quando você está trabalhando com diferentes componentes, você pode ver que eu descolori selecionei, talvez eu queira editar este estudioso. Posso clicar com o botão direito do mouse e simplesmente ir para Editar. E digamos que eu queira usar uma versão azulada disso. Você pode ver onde quer que essa cor esteja selecionada, ela vai mudar para essa cor e atualizar em tempo real. Então você pode ver que é realmente útil trabalhar com grade de repetição. É realmente extremamente simples. Tudo o que você precisa fazer é simplesmente criar uma instância de qualquer layout de design que você quiser. Acerte grade rápida, crie quantas variantes você deseja. E você também pode usar arquivos como eu mostrei com os arquivos de texto, número ilimitado de arquivos. Então, como eu disse, você pode fazer um para os nomes, nomes dos nomes da cidade dos países e muito mais. Ou você pode simplesmente usar plugins para aplicar diferentes layouts, diferentes elementos aos seus designs de grade de repetição. 14. Máscaras: Se você quer ter partes de seus elementos ou de seus projetos escondidas de você, você sempre pode usar mesquitas no Adobe XD para conseguir isso. Então deixe-me mostrar-lhe no meu exemplo como eu usei máscaras e como você pode fazer. Então aqui eu tenho um exemplo da animação do meu botão. Então, se um hit aqui, basta pré-visualizar e clicar bem aqui, você pode ver muito do que está acontecendo. E você pode ver todo esse tutorial no meu canal do youtube. Mas basicamente muitas dessas coisas diferentes estão acontecendo e tudo por causa das máscaras. Então, se eu pular aqui e mostrar a vocês no meu painel Camadas o que está acontecendo. Então, obviamente, eu tenho um componente diferente e estados diferentes com animações diferentes. Mais uma vez, se quiser conferir, Harvard acabou, confira meu canal no YouTube. Esse vídeo vai estar lá para que você possa aprender como eu fiz isso. Mas basicamente aqui temos este botão e a coisa que estamos interessados é Musk. Então basicamente como as máscaras funcionam é você pode ver que temos todos esses diferentes elementos dentro. Então nós temos o ícone do caminhão de entrega, que é este aqui, entregas enviadas, que é o texto que você não pode ver no momento. Burgess agora, que é este texto aqui e obviamente botão. Então, como eu criei essa máscara, por exemplo, deixe-me copiar rapidamente tudo. Então ele tinha o controle C. E vamos dizer que eu quero apertar o controle D bem aqui. E vamos apagar todas essas coisas. E vou clicar com o botão direito do mouse em Ungroup componente. Um clique com o botão direito na mesquita grupo, excluir aqui mesmo. Então, mais uma vez, o que temos aqui é este caminhão de entregas. Digamos que eu queira posicioná-lo aqui. Podemos mandar a entrega e quero tirá-la do caminho para algum lugar por aqui. E nós compramos agora com o qual eu quero me mudar bem aqui no centro. Então, como pode uma mesquita tudo para que as pessoas não vejam esta entrega enviada? E vamos até mudar sua cor porque realmente não importa qual cor é. Então, como você pode fazer isso é simplesmente duplicar isso, que é o original Watson hit Control D. E basicamente no nosso caso, porque eu quero ver o que está acontecendo, eu quero expandi-lo um pouco. Então Shift Alt e clique com o botão esquerdo. Posso expandi-lo até aqui. Eu posso incluir a borda, remover a cor, só para que possamos ver o que está acontecendo no nosso caso, posições bem aqui. E tudo que você precisa fazer é simplesmente posicioná-lo no topo. Clique nele. Mantenha a tecla Shift pressionada, clique aqui para selecionar todos os seus itens. Em seguida, pressione Shift Control M ou Shift comando em uma máscara. E ele vai em um maxilar e vai criar uma máscara de todos esses componentes. Então, basicamente, o que aconteceu aqui é máscara tem componentes escondidos e elementos que estão fora do seu. Então, basicamente, sua visão é sua máscara. E porque a nossa mesquita é deste tamanho, tudo o que está localizado fora da nossa mesquita não pode ser visto. Tudo o que está localizado em, pode ser visto. Basicamente, você pode ver que eu posso mudar isso para aqui, talvez. E você não vai ser capaz de ver o caminhão inteiro quando eu clicar lá fora porque é máscara daqui, você pode obviamente mover sua máscara um pouco para baixo, se você quiser, você pode movê-la para cima. Você pode brincar com ele e você pode criar máscaras usando mental, por exemplo. Então, se você tem formas complexas que você precisa selecionar, você pode obviamente usar lápis para isso. E então você pode colocar em forma de dívida, você criou usando lápis no topo ou pilha de camada de comida como eu fiz com a cópia do meu botão aqui. Em seguida, basta selecioná-lo, selecionar tudo abaixo disso, pressione Shift Control, Shift comando-os para criar uma máscara e então você pode brincar com ele. Obviamente, você pode criar um estado diferente como eu mostrei aqui. E deixe-me mostrar mais uma vez no nosso exemplo o que está acontecendo aqui. Então, no primeiro estado, quando os usuários clicam ou tocam Burgess agora vai desaparecer, caminhão vai cair. Desapareça, botão vai aparecer mais uma vez e temos esta entrega enviada. Então, como você pode ver, tudo é feito com uma máscara. Tudo é feito com os estados componentes. Então as máscaras são realmente importantes, uma ferramenta muito poderosa para ter no Adobe USD. Então eu realmente encorajo você a testá-lo e experimentá-lo por si mesmo e ver o que você pode criar usando máscaras. 15. Funções 3D: O Adobe XD tem alguma funcionalidade 3D e, embora seja realmente limitado, é ótimo ter uma opção de atualização para ter apenas para apimentar seus projetos aqui e ali apenas um pouco. Mas é importante notar que o Adobe XD não é uma ferramenta 3D de forma alguma. Se você quiser aprender 3D, eu realmente encorajo você a testar ferramentas gratuitas, como liquidificador, por exemplo, apenas para entender o que 3D real é eo que você pode fazer com ele. Mas no Adobe XD, você pode realmente fazer algumas coisas divertidas. Então, deixe-me mostrar rapidamente um exemplo. Este é o vídeo que criei recentemente no meu canal do YouTube e você pode conferi-lo lá fora como um tutorial para ver como ele é feito. Mas, basicamente, se eu ampliar, eu tenho todos esses cartões. E vamos dizer que eu quero criar este cartão para ser 3D. Tudo o que preciso fazer é clicar aqui. Esta coisa aparece e você pode clicar e girar e você pode ver que é realmente básico. Então, como eu disse, é 3D, mas ao mesmo tempo, não é realmente tão avançado, mas você pode fazer algumas coisas muito legais com esta ferramenta. Então, se eu mostrar rapidamente o que eu criei para esse tutorial, se eu clicar aqui, em seguida, clique aqui na visualização, e clique aqui. Você pode ver que ele vai de estoque, que é este 12 3D com apenas um único toque. Então você pode ver que suas opções são realmente limitadas com esta função 3D. Então vamos explorar um pouco mais fundo. Então, mais uma vez, se eu clicar aqui para entrar na minha opção 3D, o que eu tenho aqui, nossa largura e altura. Então basicamente a mesma coisa, x e y dizem pintura, mas aqui temos esses três. Então este é o eixo de rotação, esta é a rotação y. E, finalmente, esta é a rotação z ou rotação desejada como queremos, e esta é a posição do deserto. Então, em vez de x e y agora temos a posição Z também. Então, o que você pode fazer é explorar um pouco e ver quais são todas essas rotações clicando aqui e, em seguida, segurando a tecla shift e, em seguida, setas para cima ou para baixo. Então, se eu pegar dez incrementos de cada vez, você pode ver o que eixo x é. Se eu fizer o mesmo, você pode ver o que é o eixo y e você pode ir para o outro lado, muito negativo, e isso vai mudar para essa maneira também. E você também pode clicar aqui e ver o porquê, o que isso está fazendo? Então você pode ir, por exemplo, 30 assim. E então você pode brincar com 30 assim. E talvez, não sei, 30 assim. E você pode ter essas formas loucas em 3D, ou você pode simplesmente bater 0, Tab 0, Tab 0. E, em seguida, enter vai voltar para a opção padrão. E é muito importante se você quiser sair do 3d, você realmente precisa acertar isso aqui, que é as transformações 3D. Ou você pode usar o Controle ou o Comando T para entrar, então ele vai sair do 3D. O que é realmente ótimo é que você pode usar diferentes estados de componentes com 3D. Então, por exemplo, este é o meu estado padrão, mas você pode imaginar isso. Digamos que eu queira usar diferentes, digamos fundo, sombra ou cores diferentes ou qualquer outra coisa. No meu próximo estado, alma, digamos que eu quero, não conheço este primeiro estado a ser assim. Mas quando eles clicam em Fundo vai mudar a cor, isso vai mudar a cor e muito mais. Então vamos dizer que esse estado vai ser chamado estado clicado. Agora você não pode fazer isso aqui e vai se traduzir em 3D, o que é realmente uma grande adição. Mas, basicamente, é muito limitado. Mas você pode fazer coisas muito legais. O que você não pode fazer no momento de fazer deste vídeo é passar o mouse em 3D. É por isso que eu te mostrei como tocar, mas você ainda não pode fazer um pairar. Mas enquanto isso, quando você está assistindo a este vídeo, talvez a equipe de saída tenha lançado essa atualização ou eles vão atualizá-la no futuro e lançou uma atualização. Então, certifique-se, como eu disse no início deste curso, de verificar suas atualizações, de verificar a equipe do Adobe XD e de ver o que eles estão trabalhando atualmente e as atualizações que estão iniciando. Mas basicamente, esse é todo o 3D que você vai ter no momento no Adobe XD. Mas talvez você esteja indo para assistir este vídeo em um ano a partir de agora e talvez o atualizado. Portanto, certifique-se de verificar sua atualização e verificar as opções que você pode ter para 3D. 16. Modelos: Usar maquetes no Adobe XD é realmente muito simples, mas o problema é que, no momento, você não tem uma grande escolha de maquetes. Então eu realmente recomendo tanto uma ferramenta online gratuita ou se você tem Photoshop, suas opções são basicamente infinitas porque existem milhares e milhares de modelos diferentes on-line que você pode baixar gratuitamente ou até mesmo comprar pacotes diferentes e usar diretamente no Photoshop. Assim, você pode exportar arquivos do XD, salvá-los como um PNG, por exemplo, ou JPEG e, em seguida, simplesmente abri-los em modelos do Photoshop, colocá-los em modelos e, em seguida, criar apresentações diferentes. Mas se você quiser criar tudo dentro do Adobe XD, a única ótima opção que encontrei é o ângulo. Funciona muito bem para mim, mas eu encontrei algumas pessoas online e realmente não entendo. Eles recebem a versão gratuita, eles não conseguiram a versão B. Então pegue com um grão de sal. Funciona para mim e vou te mostrar que funciona para mim, mas pode não funcionar para você. Então aqui eu tenho o meu UiKit tagarela e você pode obter este kit UI no meu site, se você quiser. Posso apertar o controle C para copiar este, por exemplo. E então eu posso voltar ao ângulo, ou melhor ainda, eu posso pegar esta maquete por exemplo, e você pode ver que eu tenho uma bagagem angular premium. Esta é uma versão um pouco mais antiga. Eles têm uma versão mais recente e agora, mas digamos, por exemplo, que eu quero usar este de um telefone, aperte Control-C para copiá-lo. E você pode ver que eu tenho vários desses e eles nem sequer são todos eles listados aqui porque eles estão faltando iMac, por exemplo. Então, se eu te levar de volta para o meu chador UIkit, digamos que eu quero colar nesse maquete aqui e eu quero posicioná-lo assim por aqui. E digamos que você está criando nossos sólidos apresentação clique aqui. E talvez sua apresentação seja 1920 por 1080. Vamos chamar de apresentação. Assim. Vamos mover essa maquete para dentro e vamos dar algumas cores. Então, se eu for aqui, ir com o balão principal pode ser. E então vamos deixar assim, por exemplo. Então você precisa posicionar sua maquete desta tela em seu telefone. Então, como vai fazer isso? Basta clicar em Controlar e clicar em ir para um painel Camadas. Você precisa estar na camada de tela, que eu tenho no momento. E então vamos ver, isso é chamado de tela inicial. Então você precisa ir para plugins. Você precisa encontrar o plug-in ângulo, aplicar Mockup. Então você precisa selecionar uma tela inicial e clicar em aplicar. Vai fazer a sua magia. E em alguns casos vai levar muito tempo. Mas no meu caso, porque é realmente muito simples, aplicou a maquete e você pode ver como isso se parece. Então, se você quiser, por exemplo, usar este feed número cinco, processo é exatamente o mesmo. Então eu vou para a camada de tela, ir para os plugins, aplicar maquete e alimentar número cinco. Vamos localizado bem aqui. Então, alimente o número cinco aqui está. E você pode brincar com a orientação da qualidade da densidade de pixels. Então você tem o melhor e você tem um pouco melhor, você tem média e assim por diante. Mas eu escolho ser na melhor das hipóteses atingido, aplicar. E você pode ver que funcionou sua magia. E dependendo do tamanho da tela ou da altura, quantos elementos diferentes estão dentro, você levará mais tempo ou menos tempo. Mas como você pode ver, leva apenas alguns segundos no meu caso. Então, como eu disse, isso é realmente uma grande coisa para se ter. E vamos voltar a isto. E digamos que agora eu quero usar esta maquete ou melhor ainda, vamos usar, eu não sei, esta. Aperte o Controle C, e então posso voltar ao meu arquivo principal de apresentação, estender meu aeroporto. Você controlaria V para colá-lo lá dentro. Talvez esteja localizado aqui. E agora eu posso clicar dentro, localizar minha camada de tela, que é isso aqui. E vamos dizer que eu quero incluir isso na tela branca aceita. Então vamos voltar para aqui, aplicar maquete localizado. Então, em branco, aceito. Vamos ver onde está localizado. Para pode até mesmo encontrá-lo aqui na lista. Aqui é em branco aceito, bater aplicar. Vai fazer a sua magia. E talvez demore um pouco mais por causa de todos esses elementos diferentes, mas aqui estão eles. Então, se eu selecionar a maquete inteira, traga-a para baixo. Você pode ver que a qualidade é bastante decente, mas obviamente vai comprimir um pouco. Então não vai ser tão de alta qualidade como esta, mas isso é realmente ótimo e bom o suficiente para apresentação. Então, basicamente, esse é o ângulo. E você pode ir ao seu site, você pode simplesmente digitar ângulo para ovos D, por exemplo, vai levá-lo lá. Como você pode ver, funciona no meu caso, mas eu encontrei online algumas pessoas dizem que não funciona. Então o que você pode fazer é instalado lá, plug-in, como você pode ver aqui está, bem aqui. Você pode simplesmente ir para a lista de plug-ins. Você pode ir para o ângulo de direção de busca. E você pode ver que está bem aqui. Eu instalei. E depois de instalá-lo, vá para o site deles e confira a versão gratuita das maquetes. Eles têm. C Se você for assim, você verá se eles trabalham para você. Se eles fizerem, ótimo, então você pode realmente decidir se você quer comprar o pacote premium completo. E você pode ver no meu caso, se eu mostrar isso mais uma vez, quantas dessas maquetes existem. Isso também não é história padrão porque você também pode obter todos esses papéis vol. Então é assim que parece. Então você pode obter esses papéis de parede e você pode usá-los em seus projetos e eles são extremamente grandes. Então digamos que este borrão número um, e vamos voltar ao nosso ângulo, e vamos voltar ao nosso design. Então vamos dizer que eu queria incluir imagem aqui. E vamos entrar nesse fundo. Por exemplo, eu queria incluir este embaçado. Eu posso simplesmente arrastá-lo e soltá-lo dentro e você pode ver como isso é grande se eu clicar duas vezes. Então você pode realmente aumentar a escala. E se eu verificar mais uma vez, Eu acho que há alguns que gostam de 4K e 5K quando sim, phi 1202880 em tamanho. Então você também obtém esses papéis evoluídos e você obtém todos esses modelos de ângulo diferente. E você pode ver que temos relógio, temos pixel nexus galáxia iMac e viu muito mais. Então, se você quiser, você pode conferir, mas certifique-se de testá-lo por si mesmo. Porque eu vi online algumas pessoas reclamando que eles não podem instalar o plugin ou as maquetes não funcionam ou eles não funcionam em seu caso, mas eles trabalham no caso da França. Portanto, certifique-se de testar isso por si mesmo, mas é basicamente isso para as maquetes do Adobe XD. Se você tem Photoshop, se você tem diferentes opções on-line, eu realmente recomendo essas. E porque as portas são muito melhores em qualidade na faixa, você também pode escolher diferentes dispositivos. Você pode escolher, por exemplo, colocar seu caminhão de impressão de designer ou colocá-lo em uma casa ou em uma placa ou qualquer outra coisa. Mas você ainda não tem essa opção no Adobe XD. Você também pode saltar entre o Photoshop e o XD e salvar os designs do salvador de imagens como imagens. Xsd, em seguida, salte para o Photoshop, posicione-os em mockups lá e, em seguida, pressione controle ou comando, pois eles serão aplicados automaticamente aos arquivos XD. Mas isso é realmente uma solução alternativa. Então suas opções são ângulos ou se, no momento em que você está assistindo a este vídeo, talvez algumas opções diferentes apareçam. Mas no meu caso, por enquanto, é ângulo ou Photoshop ou alguma ferramenta online diferente. Então, mais uma vez, em rural até devido a decidir o que você quer, o que você está mais confortável em usar. E se você quiser, você pode pagar por ângulo ou você não precisa, você pode usar a versão gratuita, que é realmente limitada. 17. Atalhos: Saber como usar atalhos de teclado é extremamente importante porque ele vai acelerar seu processo vai acelerar seu fluxo de trabalho. E ele vai tornar sua vida como designer de UX muito mais fácil se você souber como usar certos atalhos para começar, certifique-se de aprender os mais importantes. Mas mais tarde, quando você passar a linha e melhorar seu conhecimento de UX UX ou Adobe XD como uma ferramenta, então eu realmente recomendo aprender alguns atalhos um pouco mais avançados. Então, para mostrar o que quero dizer, meio que tenho um design que eu criei no meu canal do YouTube. Então, se você quiser ver como eu criei, vá até o canal do YouTube e confira. Na verdade, é uma série de desenhos. Estamos passando do esboço em papel para o wireframe no XD, depois para projetar e finalmente criar protótipos. Então, se você quiser, você pode verificar lá fora. E para mostrar o que quero dizer, aqui temos um monte de elementos diferentes, sólidos. Diga que eu quero clicar aqui e, em seguida, clique com o botão direito do mouse. Você pode ver ao lado de todos esses, você pode ver esses atalhos. Obviamente, o mais importante e comumente usado é desfazer, que é Controle ou Comando Z. Mas você também tem controle V, controle C. Você tem um comando, nós somos Comando C é claro, mas você tem vários estes. Então, se eu clicar com o botão direito aqui, você pode ver a cópia. Você pode ver com base, aparência baseada, duplicar, excluir, mover para frente, mover para trás, agrupar, desagrupar. Portanto, há muitos desses atalhos diferentes e eu realmente recomendo que você aprenda quantos quiser e como você precisa, especialmente quando você desenvolve seu fluxo de trabalho e quando você vê que você está usando as mesmas tarefas várias vezes novamente, é realmente importante salvar essas tarefas como atalhos porque isso vai melhorar sua velocidade maciçamente. Para aprender esses atalhos, você pode obviamente fazer o que estou fazendo aqui. Então você pode clicar com o botão direito e você pode ver o que tudo é. Ou você pode acessar sites como este. Você pode simplesmente atalhos do Google Adobe XD no. Vai precisar de sua Ajuda oficial da Adobe. E você pode ver atalhos de teclado aqui. Se desejar, clique para baixar a versão PDF desses atalhos. E você pode ver que ele está mostrando as opções do Mac e do Windows. Assim, você pode ver um atalhos gerais para o menu de edição, para o menu Arquivo para peça ou ferramenta de caneta para camadas, objetos, grupos e assim por diante. Assim, você pode baixar os atalhos aprendidos em PDF ou explorá-los por meio do Adobe ASD. Basta saber qual é a melhor maneira de economizar tempo quando você está trabalhando como um designer de ioiô no Adobe XD é usando atalhos porque você verá assim que eles entrarem em sua rotina diária, você está vai ser capaz de ser muito mais rápido, muito mais produtivo, e você vai estar desfrutando muito mais do XD porque você não vai pensar em exagerar o que você está fazendo porque sua capacidade mental aumentou com todos esses atalhos ASD. 18. Trabalhando com arquivos: Você pode trabalhar com vários arquivos e tipos de arquivo no Adobe XD viu a partir de tipos básicos de arquivos de imagem como JPEG, PNG, você pode abrir e salvar arquivos PDF. Você pode trabalhar com ícones SVG e muito mais. Além disso, tipos de arquivo são realmente importantes quando se trata de arquivos de documento. Então, por exemplo, porque o Adobe XD é obviamente criado pela Adobe, você pode facilmente abrir e trabalhar com arquivos do Photoshop. Você também pode trabalhar com arquivos do Illustrator. E você também pode trabalhar com esboço por horas porque eles estão tentando pegar o número possível de usuários de esboço e trazê-los para o Adobe XD e fazê-los permanecer lá. Então, se eu mostrar aqui em nossa tela inicial, o que temos está em seu computador, você pode clicar lá e você pode ver claramente começa com o design existente. Então é disso que eu estava falando se você tiver um arquivo. Então, por exemplo, nossa equipe de desenvolvedores cliente fez alguém enviar o tipo de arquivo e você precisa abri-lo no Adobe XD. Você pode fazer isso daqui. Então aqui temos b é d ou AI, então Photoshop ou Adobe Illustrator arquivo, temos XD obviamente, e isso é o que, como ele abre o melhor e mais fácil. Mas também temos arquivos de esboços e isso é o que eu queria mostrar a vocês. Então eu tenho um arquivo de esboço da visão e eu vou abri-lo. E uma grande coisa sobre os arquivos do Adobe XD é que eles são realmente pequenos. Mas aqui com esse arquivo de esboço, com todos esses diferentes componentes, estilos de camada e muito mais, temos um arquivo grande. Então é por isso que se você der uma olhada aqui, está demorando muito para abrir. Mas o que o Adobe XD está tentando fazer é abrir esse arquivo de esboço e convertê-lo em arquivos Adobe XD. Então, como você pode ver, ele começa a se encher com esses componentes e vai mostrar um pouco mais. Agora, como você pode ver. E o que está fazendo é tentar pegar componentes do esboço e trazê-los aqui. Então, como você pode ver, ainda estamos faltando cores, ainda estamos faltando estilos de caractere. Mas se você atualizar para essas fontes que estão faltando neste caso, elas aparecerão aqui no painel de estilo de caractere. Mas basicamente é assim que isso vai parecer. Então temos tela de boas-vindas, temos versão móvel. Se eu rolar para baixo, temos a versão tablet. E, finalmente, temos a versão web aqui também. Temos cor da interface do usuário. Então isso é basicamente, eles são uma espécie de guia de estilo. Nós temos esses componentes principais e você pode obviamente criar componentes a partir desses elementos e você pode ver que eles são bugs às vezes como uma semana, este texto por exemplo, mas nós temos como um componente aqui. Nós também temos símbolos que são esboçados uma maneira de dizer componentes. Então, costumava ser chamado de símbolos em XD também. Agora estão sob componentes. Então, basicamente, é assim que parece. Então você pode ver que ele parece um pouco confuso, mas você ainda pode trabalhar com esses arquivos. Você pode abri-los, salvá-los como componentes nativos no Adobe XD e, em seguida, salvar o arquivo mais tarde e compartilhar esse arquivo com clientes, desenvolvedores e colegas de equipe. Então, finalmente, deixe-me mostrar-lhe a estrutura. Então, se tomarmos, por exemplo, este símbolo aqui, e se eu mudar para a minha paleta de camadas aqui, você pode ver o que temos. Então temos este formulário. Então podemos adicionar todos esses elementos. Digamos que eu queira mudá-los. No entanto, você pode vê-lo atualiza muito facilmente. Temos este ícone no centro, para que você possa adicioná-lo facilmente. A aparência deste ícone, por exemplo, temos este texto e digamos que eu quero atualizar isso. Então vamos dizer que eu quero estender a base e o botão. Então vamos trazê-lo até aqui. Vamos trazer este texto só um pouco agora. Então, são 60 entre a ICANN e esse texto e esse texto. Então basicamente agora este componente é atualizado e eu posso fazer o mesmo para todos esses outros componentes. Então, o que podemos localizá-lo, é chamado de formulário. E eu posso pular aqui. Posso fazer o que te disse. Então clique aqui, digite o fórum porque, como eu disse, temos vários desses. Então você pode passar o mouse, você formou duas instâncias. E finalmente, nós nos formamos de duas instâncias deste. Então talvez seja uma ideia melhor, e eles não fizeram isso no primeiro caso. Porque estes são componentes médios e símbolos móveis, vou chamar este formulário móvel. Então vamos testá-lo. Formulário móvel, que é mais uma vez por que é importante para desktop ou de seus elementos. Então temos fórum, forma e forma. Mas se nós o criamos como um formulário móvel desde o início, então talvez se nós pudéssemos encontrá-lo, celular ainda não existe. Então você tem que talvez fechar na saída, em seguida, abri-lo novamente, e então ele irá atualizar lá e mostrar lá. Mas é basicamente isso. É assim que é fácil trabalhar com arquivos de esboço. Como você pode ver, há claramente alguns bugs e você precisa encontrar o seu caminho para contornar esses insetos. Por exemplo, você pode excluir esses componentes deste arquivo e, em seguida, começar de novo. Ou você pode fazer o que eu fiz aqui e depois editar os componentes. Feche o arquivo dxdy, abra-o novamente e ele irá mostrar como um auxílio para componente lá. Então você pode salvá-lo como um arquivo x D e você pode compartilhar com o qual estamos desenvolvendo um desenvolvedores de vídeo, clientes ou companheiros de equipe. 19. Trabalhando com recursos gratuitos: Quando você está trabalhando como designer de UX, obviamente em cada projeto que você faz, você precisa de recursos. Agora, se essas são imagens, mas esses são ícones, maquetes, qualquer outro recurso que você deseja usar, você tem duas opções. Você pode trabalhar com recursos gratuitos ou pode trabalhar com recursos pagos. Especialmente iniciantes e designers que estão apenas começando neste negócio tendem a usar recursos gratuitos. É por isso que a maioria dos designs on-line parecem exatamente iguais. Porque todos esses desejos estão usando basicamente exatamente os mesmos recursos que todos os outros. E esse é o único problema chave. E o outro problema chave é apenas a seleção que você tem on-line. Então, se eu mostrar-lhe com o exemplo de imagens, mas isso também pode ser traduzido dois ícones. Aqui eu tenho aberto sem emendas, que é basicamente o padrão dourado dessas imagens livres. E você pode ver que você pode rolar para baixo e encontrar algumas imagens incríveis. Então, digamos que, por exemplo, para o meu projeto, eu quero usar essa imagem. Eu posso abrir. Posso ver quem é o fotógrafo e posso baixá-lo aqui. Eu também vou ter que deixar o link para o perfil deste fotógrafo porque eu vou ter que creditá-lo. Você não tem que fazer isso necessariamente. Mas como o blush diz, vai ser muito bom para aquele fotógrafo em particular e para nós blushes negócio também. Deixar o link de onde você encontrou sua imagem para que você não precise, mas é muito legal a fazer. Paxos faz isso, bem como todos esses outros sites também. Então, se voltarmos à imagem, digamos que eu use essa imagem, mas por exemplo, eu quero usar uma foto dessa garota em outras posições. Ou digamos que eu queira usar a foto onde você possa ver essa garota como um todo. Talvez ela esteja sentada em algum lugar, ela está de pé solar. Então vamos ver se conseguimos encontrar uma foto. Então você pode ver que nós temos esta imagem e este é o crescimento, mas não deveria, ele não tem essas flores. Então vamos ver se conseguimos encontrar outra coisa. E como podem ver, estamos presos agora. Então não podemos usar essa imagem em uma série de outras imagens. Sim, é a mesma garota, mas são roupas indiferentes. Não tem isso, aquelas flores no rosto dela. Não tem a mesma exposição. As cores não são exatamente as mesmas. A roupa não é a mesma coisa. Então, imediatamente, temos um problema. Então, como os designers estão trabalhando em torno desse problema? Há simplesmente encontrar outros modelos que estão olhando semelhante com a exposição semelhante nessas imagens com cores semelhantes, estilos, com temperaturas e muito mais. Mas basicamente essa é a sua solução alternativa. Seus projetos não vão ser coerentes porque você está indo para tirar imagem deste fotógrafo com esta exposição, faz fotógrafo com esta exposição. E a mesma história vale para as maquetes. Então, por exemplo, se você está usando maquetes que não são da coleção como eu mostrei a você, coleção angular é então um maquete é um maquete vai ter, por exemplo, eu não sei, iPhone dez. O outro vai ter o iPhone 11 e depois o MacBook vai ser a versão mais antiga. E muito mais se você estiver usando ícones, mesma história, digamos que você está usando ícones de contorno no seu caso. E talvez você realmente goste do ícone de pesquisa do contorno de volta. Mas, por exemplo, você também precisa de um ícone de casa e você não pode encontrar o mesmo estilo de ícones na parte de trás. Então o que você precisa fazer é usar as costas completamente diferentes de alguém que fez isso. Isso vai ser uma tarefa para os desenvolvedores, porque os ícones não são feitos da mesma maneira. Talvez este ícone esteja disponível como um SVG, este ícone está disponível como um PNG. E, em seguida, quando você enviar esses arquivos para o cliente, você também tem que dizer para o cliente se você deseja usar esses itens. Então, por exemplo, esta imagem, este ícone, esta maquete, você tem que creditar todos esses designers porque eles a criaram. E sob certas licenças, você precisa fazer certas coisas. Caso contrário, você está arriscando um processo. E esse é realmente o principal problema com esses recursos livres porque nossos, meus quase 20 anos nesta indústria, eu encontrei muitos, muitos, muitos designers lá fora reclamando de alguém vir atrás deles. Ido fotógrafo ou um designer colega ou um site porque eles usam um recurso, especialmente do Google Images. Porque quando você está usando recursos de imagens do Google, você realmente não tem idéia de quem criou. Branco e eles criaram, deixe menos com sites como formigas promessa, por exemplo, ou ícones sites como ícone plana, por exemplo, você pelo menos sabe quem criou o item original, onde você baixá-lo e quem você pode creditar. Mas se você estiver usando imagens do Google, por exemplo, ou arquivos do Google, então você está com problemas reais porque na maioria das vezes você realmente não tem idéia de quem criou o design original ou o ícone ou o que quer que seja. E então, uma vez que seu cliente o usa, eles estão arriscando ou o potencial irá classificar. Então, mantenha essas coisas em mente. Número um, coleções, então seus projetos não vão parecer coerentes porque você pode tirar uma imagem da dispersão, uma imagem dessa pessoa. Portanto, o design vai parecer bastante confuso, especialmente em telas com menor latência. E especialmente hoje em dia temos 120 telas hertz. Então, se você estiver usando o ícone PNG e o ícone SVG, os usuários podem realmente dizer, e especialmente com esses processos judiciais. Então, lembre-se de todas essas coisas quando estiver começando, quando estiver usando esses itens gratuitos da Web. Então, certifique-se de entender. Eu não estou dizendo que você não usa esses itens gratuitos, mas certifique-se quando você usá-los, para usá-los de forma responsável, simplesmente salvar todas essas licenças, seawall desses recursos, muito, você os encontrou. Você pode abrir o documento do Google, por exemplo. E então você pode listar imagens em uma lista onde você as encontrou para um determinado projeto ou ícones ou qualquer outro recurso que você está usando. E então você pode enviar pelo menos para o seu cliente e dizer, se você quiser usar esses recursos. Tão sãos que fiz no meu design, certifica-se de seguir estes passos, para agradecer a essas pessoas, para colocar os links em seus sites e assim por diante. Portanto, você como designer são cobertos e, em seguida, você está assumindo a responsabilidade de si mesmo para seus clientes e fazê-los ter uma escolha. Então, se eles querem usar esses itens, eles podem, mas agora eles sabem os riscos. Por exemplo, vamos chamá-lo assim. Ou se eles querem usar alguns outros itens, então você está limpo também porque você está se salvando de potenciais processos judiciais e de potenciais problemas no futuro. 20. Trabalhando com recursos premium: Mas o que acontece depois de certo tempo quando você ganha alguma tração, quando você recebe alguns clientes mais valiosos, quando você economiza algum dinheiro do que um realmente, realmente recomendar que você evite todos esses recursos gratuitos, exceto por exemplo, para fontes, porque você pode usar formulários do Google que são gratuitos e de código aberto e realmente ótimos. Mas, mais uma vez, a maioria dos designers estão lá usando esses fundos. Portanto, certifique-se de entender se o seu design está parecendo bastante semelhante ou mesmo exatamente o mesmo que alguns desses outros designers. Há uma grande chance potencial de que você escolheu a fonte que outros designers escolheram também, ícones, imagens e muito mais. Então, mais uma vez, se você quiser usar recursos premium, há muitas opções diferentes estão lá, mas o que eu realmente recomendo é e elementos vitais. Então é assim que parece. N, você está recebendo todos esses itens que você vê aqui sob um único preço. Então você está recebendo mais 50 milhões de fotos. Você tem as fotos deles aqui também. Você tem vídeo de estoque, modelos de vídeo, música, efeitos sonoros, sangue gráfico Dan. Então imprima modelos, sites, infográficos dos seus filhos. Temos gráficos, portanto, planos de fundo, texturas, padrões, ícones, apresentações, fotos, fontes, complementos, modelos web como modelos de site. Você também tem temas WordPress. Temos 3D aqui temos WordPress, CMS, três arquivos. Temos eBooks e cursos sobre pontos Watteau e você está recebendo todos esses diferentes elementos sob um único preço. Você está pagando o preço por um ano. E então nesse ano você tem o uso ilimitado desses arquivos. Porque em alguns outros sites como usaid, por exemplo, quando você paga, você tem um limite de download diário. Então você tem um limite para quantos itens você pode baixar em uma única sessão, por exemplo, ou para um único projeto. Enquanto Whitt e elementos vitais, você não precisa disso e você pode usar o que quiser com elementos Eduardo e você está sempre coberto com sua licença. Então vamos tirar fotos, por exemplo, vamos pular aqui e ver fotos. Então, mais uma vez, você pode ir para essas 120 fotos e elas são 50 milhões de fotos adicionais lá fora. Então vamos dizer que eu quero usar esta foto. Posso clicar nele. E quando ele abre, você pode ver claramente uma enorme diferença entre fotos premium e fotos gratuitas. É o tamanho. Então você pode usar essas fotos, por exemplo, em uma campanha. Digamos que seu cliente tenha uma campanha. Eles estão usando essa pegada fotográfica exata em pequenas superfícies. Então, digamos em um cartão de visita ou em um panfleto em grandes superfícies. Então, digamos em um lado de um prédio, em um site. Então páginas da Web, e digamos, por exemplo, design móvel também. Talvez estejam usando em uma impressão digital, talvez estejam usando na televisão. Então você está realmente coberto. Número um pela licença e número dois com o tamanho do arquivo, porque o tamanho do arquivo é enorme e você pode trabalhar com ele muito facilmente. Agora, quando chega a hora de baixá-lo, você pode simplesmente clicar aqui para baixar, você pode criar um novo projeto e vamos chamá-lo imagem r, ou uma imagem de projeto ou o que quer que seja. E você pode simplesmente clicar em Criar, Projeto, nossa imagem, anúncio e diálogo. E ele vai começar a baixar imediatamente. Você pode baixar sem uma licença, mas assim você vai ter marca d'água em toda a imagem, como você vê aqui. Então você pode usá-lo e enviá-lo para os clientes dessa forma, mas eles ainda terão que comprar essa imagem. Então é realmente uma chatice. Você pode ver que tem 70 megabytes de tamanho, então é realmente muito grande e deixe que eles cancelem rapidamente. Então você não se incomoda com isso porque eu quero te mostrar ainda mais. É por esta pessoa para 74 imagens. Então, estamos olhando para essa garota. Então você pode abrir o perfil dessa pessoa. Você também pode rolar para baixo e ver imediatamente. Então aqui está, e você pode ver como isso se parece. Então imediatamente você pode ver que é desta série porque a iluminação é a mesma, os modelos são os mesmos. Então você pode começar a rolar e ver onde essa imagem está. Então, digamos, por exemplo, que você precisa dessas imagens dessas pessoas. Você pode ver que todos eles estão neste escritório. Iluminação é exatamente a mesma. Os tamanhos são enormes e você também pode obter todas essas imagens adicionais para usar a partir desta mesma série. Então, digamos que você tem sobre nós seção em um site, por exemplo. E você quer mostrar aos seus companheiros de equipe, você pode usar essas pessoas. Se você quiser mostrar seu ambiente de trabalho, você pode usar essas pessoas. E vai parecer coerente porque é do mesmo conjunto criado no mesmo dia, sob a mesma iluminação pelo mesmo fotógrafo, carregado em um mesmo lugar. Então, neste caso, em elementos VO2, e você pode usá-los todos sob o mesmo licenciado. Então você não precisa baixar cinco imagens, ter cinco licenças diferentes para enviar ao seu cliente, e eles têm que creditar cada autor dessas cinco imagens diferentes. Eles podem simplesmente usar esta licença. Eles não precisam dar crédito a ninguém. Eles só têm essa licença para o caso de este fotógrafo se aproximar deles. E eles podem simplesmente mostrar-lhe a licença para dizer, dê uma olhada no meu designer e obteve isso de um VO2 elementos são ter a licença e eles estão cobertos. Portanto, esta é realmente a principal e chave diferença entre recursos gratuitos e pagos. Mais uma vez, você pode começar com recursos gratuitos. Apenas certifique-se de entender quando você está usando-os. Há alguns riscos envolvidos e há alguns níveis profissionais envolvidos, como eu expliquei. Mas quando você está usando licenças profissionais e você está pagando por esses serviços, então você realmente não tem limitação. E a escolha é realmente enorme como você viu aqui. Deixe-me mostrar-lhe mais uma coisa com os ícones, por exemplo. Então, se eu levá-lo de volta aqui e digamos, eu não sei, iniciar ícones, por exemplo. E você pode ver aqui ele abre em diferentes categorias. Então vamos dizer que eu preciso de gráficos porque eu preciso desses ícones de inicialização, você pode separá-los claramente assim. Você também pode escolher o formato de arquivo desejado. E você também tem um pouco mais desses formatos de arquivo suportados, mas eles não são mostrados aqui no momento. Então vamos dizer que eu realmente gosto desses e eu gosto de como eles se parecem. Então eu posso simplesmente visitar a pessoa que os fez. É só um ícone. E você pode ver claramente como esses ícones se parecem. E eu posso entrar aqui e localizar os ícones que você pode ver exatamente no mesmo estilo. Você tem, todos esses ícones diferentes para que você possa usá-los em seu projeto. E seu projeto vai ser muito mais coerente. Além disso, você pode ver claramente que eles são feitos realmente precisamente e realmente profissionalmente. Mas você também está recebendo é ícones coloridos, bem como os ícones outlier sem qualquer cor. Assim, você pode ajustá-los como você precisa e como quiser. Você também obtém essas ilustrações de aparência premium, que é uma grande tendência que estou vendo recentemente, especialmente nos últimos um ou dois anos, as pessoas estão usando esse plug-in no Adobe XD para gerar essas ilustrações. E cada design lá fora parece exatamente o mesmo porque todos esses designers estão usando exatamente as mesmas ilustrações. E eles estão indo tão longe para ser tão preguiçoso, não para mudar a cor dessas ilustrações e talvez mudar a pose, talvez mudar o tamanho, composição, ou qualquer outra coisa. Eles só estão usando esses ícones e ilustrações de graça. Portanto, usando elementos Watteau, por exemplo, em serviços como ele lhe dá essa vantagem competitiva. Porque você não só está coberto por essas licenças, seus designs vão parecer novos porque você tem todos esses exemplos para escolher. E eles vão parecer muito mais profissionais porque você vai tirá-los de designers que os criaram no lado das coleções. Então, se essas são imagens como eu mostrei a você ou ícones como eu mostrei neste caso, seus projetos vão parecer muito mais polidos e muito mais profissionais se você estiver usando serviços premium como elementos de inversor, por exemplo. 21. Como usar Kits de UI: Se você não quiser começar do zero todas as vezes, a ótima maneira de melhorar seu fluxo de trabalho e aumentar sua velocidade é usar kits de interface do usuário. E você pode usar kits de interface do usuário que são gratuitos e muito pequenos, ou que são pagos e realmente grandes. Então deixe-me mostrar-lhe uma comparação rápida aqui. Então Cura tem um kit de interface de usuário conversador, que é o UIKit que eu e minha equipe criamos há muito tempo. Então você tem todos esses elementos, você tem todos esses componentes, você tem todo esse estilo de personagem aqui, então você pode começar imediatamente. Então, se eu clicar aqui e pegar alguns desses. Então, por exemplo, vamos usar isso. E vamos dizer que eu quero usar, por exemplo, em uma cópia de BAR de área de trabalho antiga e colado aqui. Eu quero usar esta imagem, copiar e colar aqui. E digamos que eu queira usar este botão, por exemplo, copiar e colar aqui. Então você tem a idéia de como isso é rápido. Você só precisa copiar e colar elementos e você também pode usar componentes. Então, se eu levá-lo de volta mais uma vez, por exemplo, eu posso ir aqui e nós temos nav bar chat, por exemplo. Posso arrastar e largar aqui. E eu posso simplesmente posicioná-lo para ser bem aqui. Então você pode ver que você pode começar a construir esses elementos muito rapidamente. Você pode alterar esses itens. Você pode alterar as cores, você pode alterar imagens, ícones e muito mais. Então é por isso que você, por que as crianças são extremamente úteis. Você não precisa criar esses elementos do zero. Você pode simplesmente usá-los. Este era o meu kit de interface do usuário, mas você não precisa comprar nada que criamos. O que você pode fazer é simplesmente usar o UiKit gratuito que estão online. Mas, mais uma vez, você está correndo para esta mesma questão que eu mencionei anteriormente sobre itens gratuitos e premium. Seus projetos podem acabar parecendo exatamente os mesmos, mas não em todos os casos. Deixa-me mostrar-te. Então, se você entrar aqui, que são produtos de barra do Adobe.com, interface do usuário futuros do XD ou simplesmente digitando kits de interface do usuário do Adobe XD online e acesse o site da Adobe. Você pode ir aqui e ver o Reino Unido ter o design da Apple, que é o design certificado pela Apple. E isso é realmente extremamente útil se você estiver criando aplicativos iOS. Então eu realmente, realmente realmente recomendo que você obtenha este design de material do Google, mesma história, mas para componentes AGM Android. Então você pode fazer isso. Microsoft UWB, se você estiver trabalhando para Microsoft, plataformas, para Amazon, Amazon, Alexa, se você estiver trabalhando com voz, que é o futuro, o Adobe XD também oferece suporte. Você tem o IBM Design e você também tem o Bootstrap. Então, se você está trabalhando com bootstrap, você não pode começar por aí. Além disso, você pode rolar todo o caminho para baixo e você pode ver que você tem tela de inscrição Notas, aplicativo, wireframes desenhados à mão. Então você tem esta data componentes de apresentação do sistema de design. Então você pode entrar aqui e baixar qualquer um desses UIKit para iniciar seu processo criativo. Então, mais uma vez, pense nisso. Sempre comece com os gratuitos que, não importa o que você esteja fazendo, especialmente se você começar. Apenas água de mesa, veja o que funciona para você, o que não funciona. E, mais tarde, você pode comprar alguns desses kits e elementos de interface do usuário, se quiser. Mas como você viu, a escolha livre é extremamente enorme e isso é apenas neste site oficial da Adobe. Eles são sites de terceiros lá fora e designers criando todo tipo de coisas incríveis. Então eu realmente peço que vocês vejam isso e vejam porque vocês são crianças podem realmente economizar um monte de tempo e um monte de energia trabalhando em qualquer projeto, grande ou pequeno. 22. Como criar um projeto de design: Quando você está criando projetos de design, há poucas coisas que você deve considerar, como o tamanho do projeto, quanto tempo vai demorar? Mas também, quanto tempo você pode ir com a estrutura que você tem no lugar? Ou seja, se o cliente, por qualquer motivo, decide expandir esses projetos no futuro. Então, se você está fazendo um design de site, talvez eles queiram adicionar mais algumas páginas. Se eles estão fazendo design de aplicativos, talvez eles queiram adicionar mais telas. Eles estão fazendo design de painel. Talvez queira adicionar mais algumas seções que você não contou antes. Então, como tudo isso vai olhar para o seu processo de design e seus arquivos são escaláveis o suficiente? Sua estrutura é escalável o suficiente para suportar carga de dívida de requisitos adicionais de projeto e feedback de design. Então eu vou mostrar a vocês um arquivo que é do meu curso, Adobe XD masterclass, que tem mais de 20 horas de duração masterclass. E você pode obtê-lo com um enorme desconto. Ou, se você estiver assistindo a este curso em uma das plataformas, você pode simplesmente ir e se inscrever agora. E se você já está inscrito na classe e, em seguida, você está indo para obter este arquivo incluído em um arquivos de classe. Então aqui está como ele se parece. E eu geralmente estou começando com o resumo de design. Nós não temos um resumo de design aqui neste arquivo singular porque é um arquivo externo. E mais uma vez, se você está em um curso, você vai ter aquele resumo de design. Você pode então replicar esse arquivo para seus próprios projetos, não importa se eles são grandes ou pequenos, você pode usar esse arquivo de projeto para os resumos de design para seus projetos pessoais e comerciais. Então, mais uma vez, você vai obter esse arquivo quando estiver inscrito em um curso. Mas aqui temos essa estrutura de arquivos. E como eu disse, geralmente estamos começando com um resumo de design. E dentro do resumo de design, precisamos obter todas essas informações importantes, como quem é o cliente, quem é o público-alvo, quantos anos eles têm, onde vivem, o que fazem, como eles vão interagir com o painel do nosso site do aplicativo, o que quer que estejamos fazendo. E então vamos fazer ao cliente todas essas perguntas adicionais que estão listadas e explicadas no vídeo de design breve. Então, mais uma vez, você pode conferir no curso e verificar o arquivo também. Depois de reunir todas essas informações, o que estamos fazendo é começar, neste caso, a arquitetura do site. Então aqui temos a arquitetura do site por aí. E eu não vou ampliar todo o caminho para não incomodá-lo, mas este é apenas um nível de todas as páginas atualmente em nosso site, como eles estão interagindo umas com as outras. E isso é apenas no nível muito básico sobre como as páginas estão interagindo umas com as outras. Se o usuário clicar em uma página, onde ele está levando? Se eles estão clicando em outra página, onde está levando eles tipo ir de página em página? Será que eles precisam ir para páginas separadas, páginas externas, e muito mais. Mais uma vez, se você se inscrever no curso, Tudo é explicado nesse vídeo. Abaixo disso, temos wireframes de papel. E como eu disse muitas vezes, eu realmente gosto de começar com wireframes de papel porque é apenas o processo tão fácil que você, tudo que você precisa fazer é simplesmente usar qualquer tipo de Ben, qualquer tipo de papel. E você pode simplesmente jogar suas idéias que você tem em sua cabeça em um pedaço de papel. E assim que você começa a fazer isso, você começa a perceber que nossas idéias SOM vão funcionar. Talvez algumas ideias não funcionem com este projeto. Então você vai ser capaz de entender isso rapidamente porque você pode fazer isso muito mais rápido do que nós começamos com qualquer software incluindo o Adobe XD, porque tudo o que você precisa mais uma vez é apenas uma caneta e papel. Em seguida, uma vez que você decidir sobre o estilo geral do projeto, sobre a estrutura geral do projeto. Em seguida, você pode passar de wireframes de papel para o Adobe XD. E aqui temos wireframes de papel bem aqui. Eu digitalizei-os, arrastei-os e deixei-os dentro do Adobe XD. Mas se você não tiver um scanner, você pode tirar uma foto com seu telefone e, em seguida, você pode trazer essa foto no Adobe XD. E a partir daí podemos passar para wireframes. E vocês podem ver que temos apenas essas cores básicas. Então temos alguns tons de cinza, como realmente cinza claro, talvez um pouco mais escuro. E então este cinza escuro, Temos um logotipo porque neste caso os clientes centraliza o logotipo e temos alguns elementos estruturais como o rodapé aqui. E você pode ver que nós apenas fizemos esta linha nos links de rodapé porque nós ainda não percebemos neste ponto a estrutura de rodapé vai conter, portanto, nós apenas mantê-lo muito mínimo, mas ao mesmo tempo ainda funciona como um rodapé e você ainda vai ser capaz de entender o que tudo é. Dan, aqui temos um login e páginas de inscrição, e aqui temos a página principal do painel, que é a página inicial do painel. Porque quando os usuários passam por todas essas páginas, eles vão para login e se inscrever de qualquer dessas páginas porque temos um botão de chamada à ação aqui na parte superior. Eles podem então ir para lá. E a partir daí, eles podem fazer login em seu painel e acessar todas essas informações importantes, como informações de conta, transações, cartões de crédito e assim por diante. Porque este é um estudo de caso do site do banco. Então basicamente dívidas, como wireframes vão olhar e wireframes estão lá. Mais uma vez, nesta fase, você pode começar a compartilhar com seu cliente. O cliente pode começar a deixar seu feedback. Eles podem fazer isso no estágio de grampos de papel também. Mas é muito mais elegante e muito mais simples aqui porque você fez isso no Adobe XD. Você pode compartilhar o link único com eles e, em seguida, eles podem deixar o feedback. Talvez eles possam começar a entender a estrutura do site, do aplicativo ou do painel, o que quer que você esteja fazendo, e, em seguida, deixá-lo feedback concreto sobre a estrutura da dívida ou em uma única página de uma estrutura. E você pode facilmente mudá-lo porque mais uma vez, dê uma olhada nele é apenas um wireframe. Eles não têm nenhuma imagem com que se preocupar. Eles não têm nenhuma cor com que se preocupar. Talvez mesmo não ícone para se preocupar, porque você pode ver, neste caso, temos apenas usado estrela apenas para indicar que este é o lugar onde o ícone está indo para ir. Uma vez que começamos com o design, usamos essa cor para todas as imagens como você não pode ver. E você tem que explicar isso ao seu cliente uma vez que você está fazendo isso porque às vezes eles não entendem e eles vão perguntar a você, especialmente clientes que não lidaram com designers antes, o que é isso enquanto a imagem e você tem que explicar a eles e guiá-los através de toda a estrutura e todo o processo de design. Ok, esta é apenas a parte da ideação. Esta é apenas a ideia. Isto vai representar a imagem, isto vai representar o seu logotipo, isto vai representar o ícone e assim por diante e assim por diante. Então, uma vez que eles são definidos na estrutura, ou pelo menos parcialmente definidos, então você pode passar para o próprio design. E aqui temos o design. E como podem ver, incluímos muitas imagens diferentes, muitas cores diferentes. Desta vez, também incluímos transições diferentes, que vou mostrar em apenas um segundo. Como você pode ver, rodapé é agora como um todo porque nós realmente sabemos a estrutura geral da nossa página onde tudo está indo classificação mais alta é definido para que possamos incluir esse rodapé. E mais uma vez, por causa das propriedades de vinculação, eu posso simplesmente incluir isso como um componente. E você pode ver. E isso como um componente filho. E todos estes são componentes filhos deste componente mestre. E qualquer mudança que você faça aqui mesmo na foto, por exemplo, cliente muda de idéia e eles não querem cartões, cartões de débito, por exemplo, talvez você não queira mudá-lo para outra coisa, ou você precisa fazer é simplesmente ir aqui para um componente mestre. E mais uma vez, você sabe, é um componente enorme por causa deste campo em diamante, enquanto os componentes filhos são, têm este diamante vazio e retém. Então, mais uma vez, se eles quiserem mudar, por exemplo, esses cartões de débito, você pode alterá-los aqui e ele será atualizado automaticamente em tempo real em todos os seus quadros de arte. Mas você também pode ver aqui é que incluímos animações aqui. E também criamos telas diferentes para o design do painel. Porque agora com os wireframes, acabamos de ter um. Mas é só para determinar que temos esse estilo auditivo. Sabemos o que o painel vai conter. E como saberemos isso? Porque nós perguntamos ao nosso cliente um monte dessas perguntas diferentes que mais uma vez não listado em breve design. E quando você começa a criar sua vontade de se comunicar com seu cliente, seja para verdadeira folga através de e-mail, chats, whatsapp, y-bar, realmente não importa onde você está levando esta comunicação dois, você está vai fazer-lhes um monte de perguntas diferentes. E então a partir desta única página você condena ramificação para todas essas páginas diferentes porque agora você sabe, qual é o mestre e a informação necessária? Qual é a informação chave que eles vão manter nesta página? E então você pode se ramificar de lá como fizemos neste caso. Então você pode ver que temos contas de painel, transações longas, e temos todas essas páginas porque mais uma vez, perguntamos ao nosso cliente quais são os principais serviços. Nós incluímos esses serviços e filial mais simples a partir daí. E mais uma vez, eu expliquei tudo isso no curso para que você possa conferir para ver por si mesmo. Em seguida, o que fizemos após o processo de design é concluído. Porque você pode ver que este é o design branco porque ele é feito para os dispositivos desktop, como essas telas grandes e assim por diante. Então, passamos para o design responsivo do site. E aqui temos apenas alguns exemplos de diferentes grades. E é assim que uma dessas bases se parece. Então esta é apenas a página inicial e eu mostrei no curso como você pode ir desde este layout largo até este layout pequeno e adaptar seu layout a todas essas páginas diferentes. Agora nós não queríamos todas essas outras páginas porque então o curso levaria algo como, eu não sei, 100 horas ou algo assim. Então eu só expliquei a estrutura oral, como tudo funciona. Eu guiei cada aluno por todo esse processo, expliquei como todos esses diferentes elementos estão se adaptando a essas diferentes larguras e alturas. E então passamos para o design de site responsivo para nossa tela de painel. Agora também fizemos a mesma coisa aqui que fizemos aqui. Então, basta usar a tela inicial do painel e a mesma coisa para esta página. Então Dashboard, a tela inicial e a tela inicial do site aqui também. E nós os adaptamos através de todos esses tamanhos diferentes. Então, basicamente, você tem cinco tamanhos diferentes. E você pode saber quantos tamanhos seu cliente vai suportar simplesmente perguntando se o cliente não sabe, se ele não entende, que, eles podem simplesmente perguntar, existem desenvolvedores sobre todos esses largura diferente. Isso é especialmente importante no web design, no design de aplicativos também. Porque imagine que você está criando um design para o iPhone 12, por exemplo. E o cliente quer suportar o iPhone 8. Eles também querem descer para o iPhone sete, mas esses telefones mais antigos não têm um entalhe no topo. Portanto, você tem que adaptar seu design para atender às necessidades da tela menor. Além disso, a densidade da tela é diferente. Portanto, você tem que se preparar fazendo a seus clientes todas essas perguntas porque é uma coisa diferente. Se eles têm apenas uma página em um tamanho e é isso. Ou se eles têm como nós temos aqui. Então vamos dar uma olhada. 246810121415, páginas diferentes, como você pode ver, em cinco tamanhos diferentes. E nós também estamos fazendo wireframes como este. E wireframes em um pedaço de papel e arquitetura de site, muito mais. Então você pode imaginar que um projeto como este vai levar um mês ou dois para ser concluído, dependendo de quão ativo o cliente é e quantas vezes eles respondem ao seu feedback. Então você pode imaginar que vai levar muito tempo para concluir um projeto como este, em vez de apenas fazer uma única página. Mas isso realmente não importa. O processo fala por si e está de pé. Você tem que fazer todas essas coisas se você quiser manter o controle do que você está fazendo. Se você quiser manter o cliente em loop, se você quiser mantê-los em suas notas para que você possa fazer todas essas coisas ou não. Mas, mais uma vez, eu disse no início, que eles querem fazer mais páginas. Você não tinha nenhuma estrutura no lugar. Então essas páginas vão parecer diferentes da página original. Então você tem que mudar a página original também. E agora você está nessa volta mais uma vez. Então, ter uma estrutura sólida no lugar, logo desde o início. Então, assim que você começar a ir e começar a projetar vai ajudá-lo maciçamente mais tarde e vai ajudar seu cliente a escalar e crescer este projeto à medida que eles crescem seus negócios. Então, após o design responsivo, como você pode ver, temos guia de estilo do projeto. E o guia de estilo do projeto contém tudo, desde chamadores a tipografia e diferentes tamanhos de fonte e pesos de fonte, até iconografia também. Componentes diferentes são muito mais. E você pode ver aqui quantos estilos de personagem temos, quantas cores temos. E, finalmente, quantos componentes temos. Você pode ver que há um monte deles. E, finalmente, depois que isso é concluído, estamos então passando para a apresentação do projeto. E eu estou simplesmente explicando 3D como ele funciona no espaço. E você pode ver aqui como esses três componentes se parecem. Então este é apenas um único componente. Este é o estado de componentes Horace, mas estamos conseguindo criá-lo em 3D para dar este tipo de olhar. Depois que eu expliquei a apresentação, vamos passar para Q e a. E você vai obter todas essas informações adicionais, que é parte do curso, e isso é basicamente o curso em si. Uma coisa importante que quero mencionar são estes componentes. E eu quero finalmente mostrar a vocês como tudo isso parece. Portanto, os componentes são extremamente importantes porque você pode dimensioná-los à medida que você se move. Então deixe-me mostrar-lhe um exemplo rápido. Se ampliarmos bem aqui para o design responsivo do meu site. Você pode ver que estes são componentes porque se eu clicar duas vezes aqui, nós temos o estado hover e nós temos o estado padrão, e nós temos a mesma coisa para todos eles. Você pode ver como nosso estado e estado padrão. Então, se seguirmos em frente a partir daí, você pode ver que temos a mesma coisa para aqui. Então, se eu clicar duas vezes aqui, você pode ver que nós temos estado horror e nós temos estado padrão. Estes são dispositivos grandes. Então, mais uma vez, passe o estado e o estado padrão. Mas como estes são dispositivos e tablets médios, nós só temos Horst, desculpe, estado padrão porque isso é tudo o que precisamos. Porque no tablet você não pode pairar e a mesma coisa vale para as espumas. Não é possível passar o mouse na tela do telefone. Então você tem que pensar sobre todas essas coisas. Uma vez que você começa a desenhar, você tem que adaptar todas as suas páginas. E você pode ver claramente que este componente está se adaptando bem. Você pode ver como o texto é realmente muito bem embrulhado ao redor. alta classificação está se estendendo para preencher o espaço necessário. Tudo parece em ordem e como deveria. Então, basicamente, isso é tudo sobre componentes. E, finalmente, deixe-me clicar em pré-visualização. Então eu vou clicar neste fluxo. Clique aqui para iniciar a minha pré-visualização. E eu vou mostrar a vocês como tudo isso vai parecer se você se inscrever em um curso e você vai ter todas essas animações diferentes. Então aqui temos um simples efeito de pairar. E você vai ver quando eu começar a rolar, nós temos esse efeito de morfismo de vidro no fundo e tudo fica parado e fixo. Assim que começarmos a rolar. Em seguida, temos esses efeitos de pairar com esses ícones animados em segundo plano. Nós temos isso também. Temos efeito de pairar para todos esses botões diferentes. Você pode ver uma vez que você paira, essas setas estão se movendo. E eu posso ir para a página de contas, por exemplo, de onde quer que eu esteja. E aqui temos estes. Então temos efeito de pairar aqui e também temos estes. Então, quando você clica em alguns deles, eles estão mudando dependendo do serviço que o cliente está oferecendo nesta fase. E sinto muito que meu computador fique um pouco irritado em C lá. Portanto, uma vez que você começa a se mover através de todos esses, você vai obter todas essas animações. Finalmente, temos algo como cartas e incluímos algumas animações mais profundas aqui com o pairar, você pode ver que o coração está expandindo algo como um batimento cardíaco. Temos esta animação, bem como com a sombra de fundo aqui adicionado também. O mesmo para estes, nós temos este, então o cartão gira. Temos efeitos sobre todos esses botões diferentes. E uma vez que você passar por todas essas páginas diferentes, você pode acessar o login. Você pode clicar em “esqueci a senha” ou não tem uma conta. Você pode ver que ele é animado após o login, você vai para o painel e todas essas páginas diferentes estão contendo informações diferentes. Então você pode clicar em todos estes. Por exemplo, você pode ir para sua conta, digamos, e você pode alternar entre elas aqui. E é por isso que os componentes são tão importantes como um manter explicando, você pode animar estes, você pode obter o efeito mais alto aqui. Você tem esses grupos roláveis, assim. E você pode passar por tudo isso. E basicamente esse é o design e como ele é feito. Mas você pode alternar entre eles. Você pode mudar cartões diferentes, você pode depositar fundos para descartar e muito mais. Então esse é o design do curso. Você pode se inscrever em um curso. E se você estiver assistindo isso no YouTube, grande desconto será vinculado abaixo. Então certifique-se de verificar e certifique-se de inserir esse código de cupom para obter esse desconto enorme porque esta oferta é limitada, então certifique-se de usá-lo e é basicamente isso para todo este projeto. Eu só queria mostrar como você pode estruturar seus projetos de design, como você pode criá-los, e então você pode dimensioná-los em uma escala maior. Não importa quantas telas você tem, não importa quantos tamanhos você tem. Uma vez que você tenha a boa base no lugar, então você pode escalar infinitamente. 23. Como criar design: Quando você começa a criar design, como expliquei no exemplo anterior, você pode fazer muitas dessas coisas diferentes no Adobe XD. Então, só quero elaborar rapidamente sobre algumas dessas dicas e truques diferentes. E você sempre pode assistir meus cursos. Você sempre pode conferir o meu canal do YouTube com muitos desses tutoriais diferentes se você quiser ir em profundidade, este é apenas um curso básico e eu só quero mantê-lo agradável e curto para fornecer-lhe com o maior número de informações possível. Então, se nós vamos e dar uma olhada nele a partir do exemplo anterior aqui nós temos este design de site. Só quero mostrar rapidamente como se faz. Então o que temos aqui é esta navegação. E você pode ver o que eu mencionei sobre os estados componentes. Você pode ter quantos estados de componentes quiser. Você pode incluir diferentes estados de foco. Você pode fazer o que quiser com eles. Então, neste exemplo, como você pode ver, temos contas padrão de estado, cartões de empréstimos, investir digital. Então, todos esses itens de menu diferentes e mais nós incluímos componente dentro do componente, que é para este botão, que tem dois estados. Então, basicamente, isso pode ficar extremamente complicado ou pode ser extremamente fácil e simples quando você está apenas começando, certifique-se de manter as coisas agradáveis e simples para não confundir a si mesmo. Mas uma vez que você obter alguma exposição, uma vez que você tenha algum entendimento de tudo isso, certifique-se de tentar e incluir os diferentes dias componentes porque isso vai tornar sua vida muito mais fácil e muito mais simples do que com apenas um único então você pode copiar e colar em todos os outros lugares em seu design. Agora, seguindo em frente, você pode ver que ele é corrigido ao rolar. Então, quando eu clicar aqui para abrir esta pré-visualização, você pode ver quando eu começar a rolar que isso é corrigido porque ele está dizendo ao Adobe XD, certifique-se de ficar onde eu colocá-lo quando ele começa a rastejar , certifique-se de estar lá. Você pode ver que não temos nenhum efeito de pairar aqui. E isso é de propósito, porque eu não queria, enquanto meus alunos demais. Mas eu expliquei que você pode incluir diferentes efeitos de horror. Mas neste caso, eu não acho que funcione tão bem por causa deste efeito de vidro, de morfismo de vidro que temos no fundo. Eu queria incluir esse efeito de fundo apenas para manter as coisas agradáveis e simples e torná-lo um pouco mais legal, porque esse é o objetivo deste projeto. Se você for ao vídeo de design breve no curso, você entenderá o porquê, porque esse é o público-alvo, público-alvo específico para esse projeto exato. Então, portanto, um fundo branco não vai fazer apenas morto. Mas se você estiver fazendo um plano de fundo de uma cor como branco, cinza, cinza escuro, preto, qualquer que seja a cor que você incluir, então você pode incluir um efeito maior para cada um desses itens de menu, como fazemos aqui para o botão de login, por exemplo. Então este é apenas o estado padrão. Este é um estado de foco e você pode ver que ele funciona independentemente de onde você está localizado. Mas com este efeito de morfismo de vidro, não parece muito bem ter esse efeito de pairar. Então é assim que isso é completado. E a próxima coisa que eu quero mostrar a vocês nossos grupos roláveis. Agora, vocês podem ver aqui que temos quatro bandeiras diferentes. Temos quatro aqui, mas temos três aqui, temos dois aqui. E isso é feito com grupos roláveis. Então, se eu te levar aqui para a página original, você pode ver como isso se parece. Então temos 246 bandeiras diferentes com seis taxas de câmbio diferentes. Mas aqui em uma versão móvel, por exemplo, temos apenas que, então deixe-me levá-lo rapidamente para o, este. Então são 40 tablets e pode clicar em ampliá-lo. E vamos descer onde eles estão. Aqui estão eles. Então, o que os usuários podem fazer é simplesmente tocar. E rolar entre todos estes e, em seguida, ir para a esquerda e para a direita. Então o que isso está fazendo é que você está preparando seu design para diferentes dispositivos em diferentes tamanhos de dispositivo e tamanhos de tela diferentes. E você está fazendo isso, neste caso com algo que é chamado de pergaminho. E quando você clica bem ali, você pode ver que esta rolagem horizontal está incluída. Você também pode incluir rolagem vertical. E eu posso até mostrar isso neste exemplo, que é para o nosso design responsivo do painel. Ou podemos até subir aqui. Se eu clicar aqui e, em seguida, clicar aqui, visualizar, você pode ver que temos rolagem vertical incluída aqui, que é ótimo porque você pode definir esses pontos de corte e você não precisa estender seu design todo o caminho para baixo. Você pode simplesmente usar o espaço que você tem. E então você pode simplesmente incluir esses grupos roláveis no lugar. Assim, você pode mostrar todos esses dados e informações diferentes e adicionais em vez de simplesmente estender seu design fazer com que os usuários percorram seu design como um todo. E finalmente, você pode fazer muito mais com isso. Não temos um mapa neste exemplo concreto. Mas o que você também pode fazer é essas animações. Então, se eu clicar duas vezes dentro, você pode ver que temos o estado padrão. Temos estado pairando. É realmente bastante simples, mas também há algumas sombras incluídas. Há algum círculo incluído aqui. Então, há muita coisa acontecendo, mas parece bastante simples e parece muito agradável. E também com este exemplo aqui, por exemplo, temos a mesma carta que abaixo, mas agora seu efeito de pairar é muito maior. E você pode ver que esta sombra de fundo fica muito mais escura uma vez que você está no estado de horror. Assim, você pode fazer todas essas coisas adicionais diferentes com seus componentes. E finalmente, vamos dar um mundo a este, por exemplo. Então, como você pode ver, toda esta seção é, Vamos verificar no painel de camadas também. Precisamos de um empréstimo é, como podem ver, um componente. E você pode ir para o estado padrão que é fechado, então todos os ícones não são assim. Você pode ir para este primeiro estado, ele é selecionado, outros não são. E você pode ver quando os usuários começam a clicar entre todas essas datas, eles estão mudando dependendo do que eles clicaram ou eles podem ir para o estado padrão. E toda essa informação lá embaixo vai entrar em colapso até aqui. E então, quando eles clicarem aqui, por exemplo, ele vai se expandir e ir até o fim. Como você pode ver, você pode fazer muitas coisas diferentes no Adobe ASD em termos de design. Torná-lo o mais simples possível ou você pode torná-lo o mais complexo possível dependendo do seu conjunto de habilidades e dependendo do projeto em questão. Alguns projetos realmente não exigem qualquer animação complexa e em transições complexas, quaisquer projetos complexos, enquanto outros exigem que você faça isso. Portanto, certifique-se quando você começar a aprender, quando você começar a crescer, quando você começou a ganhar alguma exposição e alguma tração nesta função de design UX da interface do usuário. Certifique-se de tentar se concentrar em expandir suas habilidades o máximo possível. Certifique-se de aprender atalhos o máximo possível , porque é extremamente importante, mais tarde , conhecer o maior número possível desses atalhos , porque eles vão ajudá-lo maciçamente. 24. Como criar prototipagem: A próxima parte do Adobe XD, que eu quero abordar é prototipagem. É realmente importante porque no passado, por exemplo, se você criou seus designs no Photoshop, você precisa usar recursos externos, algo como a visão para criar protótipos. Portanto, você tem que exportar todos os seus arquivos do Photoshop ou LinkedIn com visão e, em seguida, criar seus protótipos lá. Então você tem que enviar uma visão ligada ao seu cliente. O cliente tem que responder. Lá você tem notificação por e-mail, que é muito complicado para hoje mundo em desenvolvimento rápido. Então, o Adobe XD tem esses excelentes recursos incluídos dentro, que é prototipagem. Assim, você pode criar, protótipo e compartilhar ou colaborar com seus clientes ou colegas de equipe tudo dentro de um aplicativo dentro, sem qualquer necessidade de alterar esses aplicativos sem qualquer necessidade de pagar por recursos externos, você tem tudo dentro um aplicativo e você pode começar gratuitamente. Então deixe-me mostrar-lhe neste exemplo, nós protótipos aqui. Então eu mostrei um projeto. Quando você clica no protótipo, você pode ver que instantaneamente todos esses pinos azuis começaram a aparecer. E estes são para esses fluxos. Então você pode ver que neste fluxo, nós não temos nenhuma conexão com este fluxo. Temos muitas dessas conexões diferentes com essa falha. Nós não temos nenhum. E com este fluxo não temos nenhum. Mas quando eu clicar aqui, você pode ver que ainda fazemos. E também quando eu clico neste nosso quadro, você pode ver que ainda fazemos e ele ainda está conectado com algumas dessas telas principais. Então, o que tudo isso significa na tradução para o inglês basicamente, é que você pode conectar todos os seus relatórios entre si. Você pode conectá-los com um único tamanho, como eu mostrei para o tamanho do site. Mas você também pode conectá-los com o tamanho responsivo. E você pode mostrar aos seus clientes diretamente como tudo isso vai se parecer. Então, quando você começar a compartilhar e nós vamos chegar ao compartilhamento em um especialista, então você pode compartilhar qualquer um fluxo, que é apenas por exemplo, design de site para desktops, ou você pode simplesmente compartilhar todos os fluxos, que é todos os projetos de sites em todos os tamanhos. Então, se eu mostrar a vocês como esses protótipos se parecem, deixe-me ir para o design do site. Você pode ver quantas interações temos aqui. Então, se ampliarmos realmente agradável e fechar e clicar neste rpart e você pode ver que é o design da página inicial. Isto é contabilizado design de empréstimos de designer e assim por diante e assim por diante. Cada um destes. E mais uma vez, você pode ir no curso, você pode dar uma olhada e porque é mais de 20 horas de duração. E mais uma vez, este é apenas um curso básico para explicar todos os conceitos básicos da Adobe D. Se você se inscrever no curso, vamos passar por todas essas páginas diferentes e eu vou explicar a relação sexual. Cada uma dessas interações, brancos conectados assim. Branco é completado assim. E o que você deveria ter feito melhor para seus próprios projetos pessoais. Então o que você vê aqui com essas linhas azuis é basicamente, você pode clicar de uma parte do seu estão entediados, arrastar esta linha azul para outra. Uma vez que você está em um modo de prototipagem. Então aqui no painel de interação, que aparece e eu já expliquei a vocês que este painel à direita continua mudando o que você está selecionando. Então, no modo de design, parece diferente. Em um modo protótipo, parece diferente. E no modo de compartilhamento vai olhar diferentes novamente. E vou mostrar isso a seguir. Aqui o que temos é interação. Então primeiro temos o gatilho. Então, o que os usuários estão fazendo no nosso caso, eles precisam tocar para ir para esta página. Mas você também pode escolher arrastar, pairar, teclas e joypad e solo de voz. Ele pode rapidamente elaborar sobre alguns destes porque eles podem obter tempo de aura extremamente complexo. Então, mais uma vez, guia, você pode usá-lo para desktops ou você pode usá-los para dispositivos móveis. Então toque pode basicamente significa o toque de um mouse ou o toque de dedo. Portanto, não importa qual dispositivo você usa, você pode usar a guia. Arrastar é basicamente o que eu mostrei antes no vídeo anterior com essas bandeiras, por exemplo. Então, quando eles estão em um dispositivo móvel, eles podem clicar para arrastar para a esquerda ou para a direita, ou eles podem até mesmo fazer isso no design do site se você precisar cortar em algum lugar para que eles possam arrastar da esquerda para a direita. Por exemplo, passar o mouse é o que explicamos várias vezes. Assim, por exemplo, com esses botões, você pode incluir diferentes efeitos de focagem. Chaves, camas de jogo final é basicamente, se você estiver criando algum experiente para um jogo, você pode incluir algo como controle PlayStation ou controle Xbox. E então você pode programar o que cada chave faz. E então uma vez que você começa a compartilhar seu protótipo com seu cliente, se eles têm o mesmo controlador, eles podem basicamente tipo de jogar este jogo com você dentro do Adobe XD, o que é extremamente legal. E finalmente, temos a voz. Então você pode fazer algo como Google Assistant, Amazon, Alexa ou Siri. Você pode integrar todos esses controladores diferentes se estiver projetando para voz. Em seguida, temos ação. Então, o que acontece quando um usuário toca em qual ação vai ser executada? Re pode ir transição. Podemos fazer auto animar oralmente, percorrer a reprodução de áudio integrada anterior ou reprodução de fala. Transição é basicamente, ele, transições de uma página para outra. A animação automática é esse futuro mágico do Adobe XD, que usa IA para saber o que você precisa fazer. E você pode assistir meus cursos ou meus vídeos do YouTube porque eu uso auto animar o tempo todo. Eu realmente amo isso. Basicamente, ele sabe o que você precisa fazer entre dois estados e inimigos perfeitamente para que você não precise criar algo como quadros-chave no Adobe After Effects, por exemplo, ou algo assim. Já o fizemos, o que é ótimo se você estiver projetando para dispositivos móveis. Então você tem esse menu ao lado, por exemplo, e você precisa tocar no ícone de menu e, em seguida, essa sobreposição de menu aparece. Então dívidas porque isso é útil para, mas você também pode usá-lo para itens de menu no design do site se você precisar que oralmente funcionar no lugar, temos rolagem também, para que você possa criar links âncora. Por exemplo, se esta é apenas uma página singular e todas estas são seções diferentes, então os usuários podem percorrer todos esses designs diferentes. E então, por exemplo, quando eles clicam nesta página, vai rolar para ouvir. Quando eles clicarem neste item de menu, ele vai rolar por aqui. E muito mais. Placas de arte anteriores falam por si. A reprodução de áudio é, Se você precisar, por exemplo, para criar um estado estreito. Quando eles tocam lá, ele vai tocar que a reprodução de áudio e fala é ótimo. Mais uma vez, para a voz, se você está projetando para estes assistência, posição de rolagem preservada basicamente faz o que diz sobre os dez. Se você clicar lá, e por exemplo, ele vai para aqui, vai preservar a posição de rolagem. Neste caso, vai estar no topo. Mas se você fizer isso aqui, por exemplo, vai estar na mesma posição quando o carvão ousar destino. Então você pode escolher qualquer uma dessas portas que você deseja animação, você tem um monte dessas animações diferentes no lugar. E, finalmente, temos atenuação viu como a animação vai se parecer. Será que vai em duro, não vai para a guerra em suave é você vai sair duro ou suave vai saltar. Vai ficar em posição? Então você pode escolher entre todos esses. E se você clicar aqui, você pode ir de non é fácil um fácil agora para encaixar, windup e saltar. Você tem todas essas opções diferentes. E finalmente, temos duração. Então, duração, quanto tempo essa ação vai demorar? Então, no nosso caso, quando eles tocam, ele vai fazer a transição para o design de contas usando a animação de dissolver com facilidade de atenuação de notas. E vai durar 0.4. segundos. Agora você pode adicionar ações adicionais aqui, então animação adicional, mas eu não vou incomodá-lo nesta fase. Então, basicamente, como tudo isso parece estar no lugar. Vou clicar aqui, vou clicar na pré-visualização. Vou clicar nas contas. E vai fazer a transição para essa página em particular. Uma vez que eles clicam logo, por exemplo, vai levá-los para a página inicial. E você pode ver uma vez que eles clicam em contas, isso vai aparecer. Mas uma vez que você clicar empréstimo vai transição lá e estreitar em tamanho. Assim, você pode fazer todas essas coisas e muito, muito mais no Adobe XD com esses recursos de prototipagem sem necessidade de ir para ferramentas externas, como a visão, por exemplo, no passado. Ou você não precisa pagar por serviços adicionais. Você tem tudo isso incluído no Adobe XD para começar imediatamente. 25. Compartilhando seu design: Outra ferramenta incrível que o Adobe XD tem é o compartilhamento. Então, como eu disse, você pode projetar protótipo e compartilhar tudo dentro de um aplicativo, e ele está localizado bem aqui no topo. Então, uma vez que você tenha feito o design, Uma vez que você tenha feito prototipagem e conectando todas as suas placas de arte em diferentes estados, todas as telas diferentes. Então é hora de compartilhar com seus clientes. E é importante observar que você pode compartilhar em qualquer ponto do processo de design. Então, por exemplo, se você está em fase de wireframing, você pode compartilhar de ousar obter feedback e, em seguida, passar para esse feedback e criar design são atualizados que protótipo, atualizar esse link e compartilhá-lo com o cliente mais uma vez, eles podem então fornecer feedback sobre o design do site ou design responsivo e viu muito mais, mesmo em guias de estilo e apresentação do projeto. Então, em qualquer ponto da fase do projeto, eles podem fornecer-lhe o feedback. Então, como você pode realmente compartilhá-lo? Bem, como eu disse no início, estou usando uma versão gratuita apenas para ilustrar que você pode fazer isso não importa onde você está em um mundo, você pode começar gratuitamente com isso. Então, basicamente, com a versão gratuita, você só tem uma opção de compartilhamento de links. Portanto, se você estiver trabalhando em vários projetos ao mesmo tempo, você terá que pagar pelo Adobe XD. Mas no site deles diz que são apenas nove dólares por mês. Ou se você tiver o pacote premium da Adobe, se você tiver a Creative Cloud paga e também tiver o Adobe XD incluído nessa assinatura da Creative Cloud. Assim, quando você quiser compartilhar, você pode simplesmente selecionar o que deseja compartilhar. No nosso caso, queremos compartilhar este design do site. Você também pode compartilhá-lo desvio e design do painel, mas eu quero compartilhar isso. E você pode escolher configurações diferentes. Assim, para uma revisão de design e obter feedback sobre o seu design ou protótipo, esse feedback pode ser fornecido tanto pelos companheiros de equipe, suas partes interessadas do cliente, até mesmo desenvolvedores, desenvolvimento. Você pode compartilhar seu design ou protótipo com desenvolvedores. E o que isso faz é fornecer trechos de código para seus desenvolvedores. Assim, eles podem facilmente ver, por exemplo, dentro do CSS quais chamadas você usou, espaçamento uso pesado, que margens uso pesado. Então, por exemplo, com a tipografia, quais tamanhos você usou para que eles possam começar a integrar isso imediatamente. E se você estiver usando fontes baseadas na web, por exemplo, essas fontes do Google que estamos usando neste curso. Em seguida, eles podem facilmente integrar o link para essas fontes e, em seguida, começar com o código imediatamente. Em seguida, temos apresentação otimizada para apresentar seus projetos, o que é ótimo. Se você estiver, por exemplo, vá ao escritório do seu cliente e quiser apresentar isso em uma tela grande, e então ele entra no modo de tela cheia sem distrações. E você pode apresentar alma de uma espécie de apresentação em PowerPoint, por exemplo. Em seguida, mantivemos o teste do usuário, o que é ideal para testar seu protótipo. Você pode ocultar neste modo de teste de usuário, por exemplo, você pode ocultar todos esses elementos diferentes, como navegação. Portanto, você não está permitindo que seus usuários vejam onde eles precisam clicar. Eles têm que descobrir isso por si mesmos. Assim, eles podem fornecer o feedback e você pode saber onde você precisa seguir em frente. E, finalmente, você tem personalizado e você pode criar experiência personalizada a partir de todos esses acessos de link combinados. Então, qualquer um com o link só convidou pessoas. Você pode convidá-los por e-mail e qualquer pessoa com a senha para pode proteger seus links com senha. Finalmente, tudo o que você precisa fazer é clicar em criar link. E antes de eu fazer isso, você pode simplesmente renomear isso. Vamos com o novo redesenho do site do banco para combinar um pouco. O que temos aqui bate criar link. E dependendo da velocidade da sua internet, dependendo do tamanho do seu protótipo, dependendo da quantidade de conteúdo que o Adobe XD tem para carregar na nuvem. Isso pode levar mais tempo ou mais curto. Então, o que quer que você esteja criando, apenas certifique-se de manter isso em mente. Se você está em um cronograma apertado, se você está em um orçamento apertado, certifica-se de projetar isso em que. Porque às vezes pode levar muito tempo para carregar e, em seguida, às vezes, pode levar muito tempo para os seus clientes para abri-los se eles têm uma conexão lenta com a Internet também. Assim que o compartilhamento estiver concluído, você receberá um link como este. E o que você pode fazer é copiar esse link. Você pode incorporar esse link em uma apresentação do Behance, por exemplo, você pode colocá-lo em seu próprio site e, mais uma vez, você pode acessar as permissões aqui. E qualquer um com o link, você pode mudar isso. Você pode dar acesso a eles ou não. E basicamente uma vez que você copiar e colar este link em seu navegador ou enviá-lo para o cliente. Essa é a aparência da experiência geral, dependendo do que você selecionou aqui no Adobe XD. Então é para revisão de design, é para prototipagem, é para desenvolvedores? E muito mais. Então, mais uma vez, o que eles podem fazer aqui é rolar como se fosse uma página real. Eles podem clicar em qualquer um desses links. Você pode ver que os efeitos do cursor do mouse ainda funcionam. Eles podem fazer um comentário, eles podem arrastar uma caneta, por exemplo, aqui. E eles podem dizer, por exemplo, exclui esse círculo. E uma vez que eles enviam, você pode ver que excluir este círculo está nesta página. Então design da página inicial, e você pode navegar seu caminho para o design da página inicial. Você também pode clicar aqui, e ele vai mostrar todas as suas páginas diferentes deste fluxo que você compartilhou. Porque mais uma vez, nós apenas compartilhamos esse fluxo dentro de uma parte, qualquer um desses outros fluxos. É por isso que só está mostrando isso. E basicamente você pode ir para o seu trabalho e continuar de onde parou, e você pode clicar lá para acessar o protótipo mais uma vez. Então, basicamente, é assim que tudo isso funciona. E o que você também pode fazer é navegar entre essas páginas diferentes para mostrar aos seus clientes como as páginas serão parecidas. O que você pode fazer é mostrar ou ocultar comentários. Você pode ir para a página inicial, que é esta página neste caso, como eu disse, eles podem clicar através de páginas diferentes. Então vamos para os pulmões, por exemplo. Eles podem ir lá e você pode ver que há um comentário sobre o design da página inicial. Eles podem clicar lá e acessá-lo e você pode ver que está rotulado número um. Se fizermos outro comentário, será rotulado como número dois. E muito mais. O que eles também podem fazer é voltar para aqui. Você pode mencionar qualquer outro usuário ou companheiro de equipe. Você pode convidar as pessoas para ouvir. Você pode expandir isso para ser tela cheia. Você pode ocultar comentários e muito mais. Basicamente, quando você começa com o compartilhamento do desenvolvedor, como eu disse, você vai obter alguns trechos de código. Você está indo para obter alguns CSS, você vai ter alguns estados componentes. Você vai obter todas as informações adicionais que não são relevantes para o seu cliente. E exceto se eles não estão citando a si mesmos ou se eles não entendem código. Então eles só querem verificar rapidamente algumas coisas aqui e ali. Mas basicamente você pode compartilhar isso com os desenvolvedores. Quanto ao teste do usuário, você pode basicamente testar isso em uma tela cheia sem tudo isso. Porque como você pode ver, se eu clicar em algum lugar do lado de fora, ele mostra onde eles podem clicar. Então, se eles clicarem aqui, ele vai levá-los para esta página digital. Mas no método de teste do usuário, ele não vai mostrá-los, seus usuários têm que descobrir isso por si mesmos e você tem que decidir através de testes se é fácil para eles acessar todas essas páginas ou não, e o que você deve mudá-lo, o que você deve manter. Finalmente, a última e crucial parte deste processo de design é compartilhar seus arquivos depois que eles são concluídos. Depois que o design é concluído, prototipagem, depois que tudo estiver terminado, você precisa compartilhar esses arquivos com seus clientes e desenvolvedores e é isso que vem a seguir. 26. Como exportar seus arquivos: Finalmente, a última parte da agitação do projeto de design é compartilhar seu design com clientes e desenvolvedores. Assim, uma vez que tudo está concluído, você tem que exportá-lo e você tem que empacotá-lo de forma a ser fácil de entender tanto para seus clientes quanto para seus desenvolvedores. Então, no nosso caso, o que temos aqui é que temos uma área de trabalho grande, temos design responsivo. Então imagine que nós criamos isso para todas essas outras páginas. Agora chega a hora de exportar e compartilhá-lo com nossos clientes e desenvolvedores. Então, antes de fazer isso, eu sempre recomendo às pessoas e aos meus alunos criar algum tipo de estrutura de pastas, padrão organizacional para poder compartilhar isso com seus clientes e desenvolvedores para que eles possam facilmente compreendê-lo como assim que eles obtê-lo para que eles possam começar a trabalhar e não atolados com algumas perguntas e comentários adicionais. Então o que eu gosto de fazer é eu gosto de criar uma estrutura de pastas. Dentro dessa estrutura de pastas, eu gosto de ter meu arquivo principal, que é o arquivo Adobe XD. Eu também gosto de criar uma pasta como esta, que é chamada Assets. São todos os bens ou o que quiser. E você pode incluir ícones, você pode incluir imagens, você pode incluir arquivos PDF, e você também pode fazer isso simplesmente colocando-os dentro de uma pasta. Então imagens, por exemplo. E vamos copiar e colar, e vamos chamar isso, por exemplo, ícones. E dentro da dose, por exemplo, se você estiver usando ícones SVG e PNG, você pode incluí-los. Se você estiver usando imagens PNG e JPEG, poderá incluí-las. Se você estiver usando, por exemplo, PDFs diferentes, poderá separá-los. Portanto, não importa o tamanho do seu projeto e o tamanho da quantidade de arquivos vai ficar. Você pode simplesmente dividi-los em pastas e vai ser muito mais simples para seus clientes e desenvolvedores para navegar para essa estrutura de pastas do que apenas para enviar-lhes tudo em um arquivo zip. Então eles têm que descobrir por si mesmos. Quanto aos tamanhos em si, você pode ver que temos todas essas páginas diferentes localizadas aqui. E para cada uma dessas pastas, criei mais uma vez, uma estrutura de pastas. Grandes áreas de trabalho, desktop, dispositivos grandes, dispositivos médios e pequenos dispositivos. Este é apenas o meu caso e o caso para este projecto em particular. Então, se eu levá-lo de volta ao arquivo Adobe XD, você pode ver como isso se parece, mas seu projeto pode acabar parecendo diferente. Basta perguntar aos seus desenvolvedores quais tipos de dispositivo e quais tamanhos eles vão suportar. Portanto, você será capaz de entender melhor como você pode estruturar sua estrutura de pastas quando você começar a compartilhar esses arquivos com seus clientes e desenvolvedores, viu mais uma vez, com a estrutura de pastas, dependendo de quais tamanhos você está indo para criar, você vai ter um número maior ou menor dessas pastas na mesma coisa para os ácidos. Então talvez você esteja usando apenas um ícone, talvez dez, você pode colocá-los aqui. Ou se você estiver usando um grande número de ícones como estamos fazendo aqui. Então, se eu levar você para meus recursos de documento e rolar para baixo, você pode ver quantos ícones diferentes estamos usando. Portanto, temos que exportar todos esses ácidos diferentes e em tamanhos de ativos. Então, apenas certifique-se de perguntar aos seus desenvolvedores antecipadamente, eles precisam ter esses ícones em tamanhos diferentes? Ou pode simplesmente enviar-lhes um ícone SVG, por exemplo. E então eles podem caber dentro de todos esses tamanhos. Então realmente fale com seus desenvolvedores, fale com seus clientes sobre o que eles precisam. Antes de começar a enviá-los. Portanto, você vai reduzir muito sua carga de trabalho. Então, quando chega a hora de realmente exportar bem essas coisas diferentes. Então o que temos aqui é, por exemplo, grandes áreas de trabalho e eu quero exportar esta imagem. Sei que é uma imagem PNG. Então o que eu posso fazer é simplesmente selecionado, eu posso pressionar Control ou Command E ou pode teclado e eu posso exportá-lo como um PNG porque ele não tem nenhum elemento de fundo. Aqui está apenas uma imagem PNG. Se fosse apenas uma imagem plana como esta, esta, esta, e esta, por exemplo, então eu escolherei esta para ser JPEG. Se você está lidando com ícones, é sempre recomendado se eles são SVG para exportá-los como SVG, eles são PNG para exportá-lo como PNG. Mas uma dica rápida, certifique-se de usar ícones SVG, tanto quanto possível, porque eles são infinitamente escaláveis e eles não perderão qualidade uma vez que eles são reduzidos em tamanho. Então o que temos finalmente aqui é PDF. E o que posso mostrar para o PDF. Por exemplo, você deseja exportar este guia de estilo de projeto. O que você pode fazer é simplesmente clicar em Control E, escolher pdf a partir daqui, e então você pode simplesmente exportá-lo como um PDF. Ou PDF pode ter vários arquivos PDF ou páginas. Assim, seus clientes são desenvolvedores, podem simplesmente percorrer todas essas páginas diferentes para ver onde eles estão. Mas vamos voltar rapidamente para aqui. Então eu vou mais uma vez, você pode, uma vez que você selecionar o seu item, você pode pressionar Control E. Como dissemos, este é um PNG que você pode escolher para o design vai exportar em 1X. Se você projetar isso para a web, o que fizemos, ele pode exportar isso como um x e 2x. Mas, mais uma vez, certifique-se de falar com seus desenvolvedores para a necessidade desse tamanho extra, porque temos design responsivo no lugar e apenas certifique-se de perguntar-lhes o que eles precisam exportado? Porque isso vai economizar muito tempo, porque em alguns casos, você só precisa exportar a imagem uma vez e então eles vão adaptá-la através de código. Mas às vezes você tem que exportar essa imagem ou aquele ícone, talvez ilustração, todos esses tamanhos diferentes porque eles não podem adaptá-lo em código muito bem e você tem que fazer isso no design. Então, mais uma vez, a comunicação é fundamental aqui, e é crucial que você, seus clientes e desenvolvedores se divirtam nesse projeto. Então, o que temos aqui é iOS, então você pode selecionar 123 x um x é o tamanho original. Dois eixos duplicam o tamanho, e isso é triplicou o tamanho. E finalmente, para onde você quer exportar isso. Então, se o levarmos de volta para aqui, por exemplo, temos a página inicial e temos uma área de trabalho grande. Então este vai ser o nosso padrão de navegação. Então, não importa o que você está escolhendo aqui, ele vai levá-lo lá para aquele lugar. Finalmente, temos Android N vai exportar com todos esses tamanhos diferentes. E há apenas Android e como ele é organizado. Para SVG é que você pode ter todos esses atributos diferentes e você pode escolher, Queremos usar CSS interno ou eles podem usar otimização externa minified assim vai reduzir o tamanho do arquivo ainda mais PDF como explicado. E finalmente, o que temos aqui é JPEG. Então, é design ou Web? Mais uma vez, se você escolher web, ele vai exportar aquele 1X e 2X. E, finalmente, é aqui que você deseja exportar seus arquivos também. Isso é basicamente para exportar, como você pode ver, pode ser bastante simples. O que você pode fazer. E deixe-me mostrar rapidamente que também, é que você pode selecionar vários destes. Então, por exemplo, temos essas bandeiras. Posso ir à minha paleta de camadas e ver onde elas estão. Então o que você pode fazer é simplesmente abrir tudo isso. Você pode segurar seu antigo Kim ou opção no Mac. Você pode rolar para baixo, selecionar todos eles. E uma vez que você acertar o Controle E, eu sei que isso vai ser PNG. Eu posso usá-los para design porque eu não preciso deles para estar em um x 2x e 3x. E eu posso simplesmente clicar em exportar uma vez que eu tenha selecionado minha pasta designada para onde eu quero que eles sejam exportados, basta clicar em Exportar e ele vai exportar em todos esses tamanhos diferentes, nesses diferentes formatos de arquivo que você tem selecionado. E cada um deles vai ser nomeado como o seu nome eles aqui. Então, mais uma vez, nomear suas camadas é crucial aqui porque, como você pode ver, ele vai alcançá-lo mais cedo ou mais tarde. Então aqui você está enviando esses arquivos para desenvolvedores. Você precisa nomear seus arquivos para que os desenvolvedores possam entender quais são esses arquivos. Então eles podem realmente usá-los em código. Não importa se você está criando um design de aplicativo de design de painel de design de site não importa. Você sempre tem que nomear suas camadas. Então, por que não começar mais cedo ou mais tarde e parar de perder seu tempo aqui depois de terminar com o projeto e você só quer que isso fique em órbita. Então é basicamente isso. É assim que seus arquivos exportam no Adobe XD. E esses são os diferentes formatos que são suportados pela opção de exportação nativa do Adobe XD. 27. Como criar um sistema de design: Sistemas de design são ótima maneira de organizar grandes projetos porque assim que você começar a escalar seu projeto é logo que você começar a adicionar novas páginas, novos tamanhos responsivos, talvez até mesmo um aplicativo móvel, tudo tem que parecer coeso, tudo parecia coerente, e tudo tem que olhar como ele pertence ao mesmo projeto, que acredite ou não, pode ser extremamente difícil quando você começa a escalar. Isso é enquanto pequenas e maiores empresas, especialmente grandes empresas, têm todos esses sistemas de design no lugar. Então, o que é um sistema de design é ajustar para design, ou é muito mais? Vamos verificar isso. Então aqui eu abri sistema de design de carbono e você pode realmente ir em frente e baixar isso de seu site. Então, o que é o sistema de design de carbono, é para o sistema de design open source da IBM para seus produtos e experiências digitais. Então você pode ver que não pode ser apenas para produtos. Também pode ser para uma experiência digital. Pode ser para experiências analógicas. Assim sistema de design pode abranger todos esses grupos e recursos adicionais. Então, o que temos aqui, você pode ler tudo sobre carbono, mas quando se trata de projetar, você tem filhos de design, você tem outros recursos, tutoriais. Quando se trata de desenvolver, você pode começar. Framework tem muito mais. O que é interessante aqui é e diretrizes. Então, se eu clicar aqui, você pode ver que eles discutiram saudação criado para si mesmos. Eles têm regras de acessibilidade. Eles têm funções de conteúdo, regras de cores, regras de ícones, pictogramas, espaçamento de movimento, equipes , topografia e viram muito mais. Então você pode fazer todas essas coisas diferentes. Fornecendo dívida, você pode criar este projeto. Então não sei por que está demorando tanto para abrir. Então vamos abri-lo nesta aba enquanto ele carrega. Deixa-me mostrar-te isto rapidamente. Então é assim que estes sistemas de design. Então você pode ver se eu começar a rolar, que todas essas experiências parecem exatamente as mesmas não importa em quais dispositivos você está, se você está neste grande dispositivo como iMac ou em um laptop, celular, relógio, não importa. Parece exatamente o mesmo. Mas o que é mais importante porque a Audi é uma empresa de automóveis, parece exatamente o mesmo no carro também. Assim, os usuários têm exatamente a mesma experiência não importa se estão usando o app Audi, por exemplo, se visitaram seu site ou se estão sentados no produto Audi real, que é o carro, eles estão usando o Infotainment sistema, por exemplo. Então, usando a navegação, tudo parece exatamente o mesmo, incoerente e como se pertencesse a toda esta experiência. Então, se eu te levar aqui, certo? Temos interface responsiva, temos componentes de ferramentas estrangeiras. Então, se eu clicar aqui, nós temos botões, por exemplo. E você pode ver como seus botões se parecem. Então eles têm pequeno, médio, grande. Você pode ver como isso parece que temos secundário, você pode clicar nele. Você tem todas essas animações diferentes. Então você pode ver como isso se parece. Botão de texto com esta seta, você pode ver este efeito de pairar funcionando. Você vê todos esses ícones diferentes, C sólido ou cartão. Cartão pode ser algo realmente, basicamente esta guerra é algo como isso. Assim, você pode ver esse efeito pop-up ao passar o mouse. Você pode ver este cartões maiores, então ação, você pode clicar sobre eles. Você pode ver como eles se parecem. Você pode ir para arrastar e soltar, o que também é importante, por exemplo, para sua interface de usuário em um carro, talvez você queira arrastar e soltar nossa música bem ali. Você pode ver como isso se parece com campo de entrada, que também é importante. Quando você clica bem ali, você pode ver este texto está indo no topo. Pesquise como ele se parece com várias entradas de texto e muito mais. Se formos para o jogador, por exemplo, você pode ver como seu jogador se parece, como isso parece. Ícones invertem e muito mais. Se formos para interface responsiva, você pode ver que há grade configurada e é por isso que isso é importante. Você pode definir essas grades para acompanhar todo o projeto. Porque, por exemplo, se você estiver criando esse projeto, digamos em 2021. E, em seguida, o cliente decide em cinco anos voltar para você e, em seguida, permitir que você continue e adicione todas essas páginas adicionais, telas adicionais, você está preso porque ou você coloca este processo de design no lugar e talvez até mesmo criar este sistema de design em uma escala menor. Então você pode simplesmente continuar de onde parou e continuar a partir daí. Eles querem de repente mudar as cores, mudar os estilos. Você pode facilmente fazer isso porque tudo está no lugar. Você tem este sistema de design no lugar. Você tem todos esses componentes no lugar. Você tem o guia de estilo no lugar. Então, mais uma vez, se você quiser aprender tudo sobre este projeto, certifique-se de verificar o meu curso é tudo 20 horas de duração e eu cobrir todas essas coisas com muito mais detalhes do que eu posso neste curso gratuito. Mas basicamente, o que você pode é facilmente dimensionar isso. Então, não importa se você voltar para o projeto em um ano ou cinco anos, você pode simplesmente continuar de onde parou, pegá-lo, e simplesmente continuar projetando se eles quiserem mudar, você pode facilmente mudar as cores e estilos, as fontes, as cores, o logotipo, sempre que você quiser, até mesmo as imagens, apenas alguns cliques, vez de apenas começar por todo o lugar mais uma vez. Então, se dermos uma olhada aqui, você pode ver como esses cartões estão escalando. Por exemplo, você pode ver essas linhas de grade, como eu expliquei a você. Então, você pode ver que você pode usar o Adobe XD para isso. Você pode ver como eles diminuíram, o que é, quais são boas práticas, quais são más práticas, e por quê? Você pode ver todo esse conteúdo espaçamento linhas, ritmo, ritmo vertical ou horizontal. Então, tudo permanece igual. Espaçando como todas essas colunas e conteúdo se parecem, que tudo pareça como deveria. E finalmente, uma vez que isso carregue no sistema de design de carbono, e eu realmente encorajo você a verificar isso. Se clicarmos em uma grade 2x e você pode ver como isso se parece e como ele escala. Então, se eu baixar isso, clique em Reproduzir. Você pode ver lá dois x grade, que é mais uma vez a grade que eles desenvolveram para si mesmos. Você não precisa usar essa grade em seus projetos. Ele funciona em seu projeto, mas talvez para o seu projeto, você terá que criar outra coisa. É basicamente uma grade 8 e você pode facilmente criar isso no Adobe ASD. E eu já mostrei isso na seção anterior deste curso. Então, basicamente, você pode ver como ele escala para cima e para baixo. Podemos passar para a topografia. Você pode ver o estilo de escala, recursos de cor. Você pode ver lá um tipo de letra e o que é, como ele se parece no código. Você também tem essas famílias de fontes e como ele se parece. Os desenvolvedores podem então facilmente escolher isso a partir daqui e simplesmente seguir em frente. Se formos para ícones, por exemplo, você pode ver quais ícones eles estão usando e o estilo geral desses ícones. E você pode simplesmente copiar o nome desse ícone, por exemplo. E então eles podem usá-lo em código mais tarde. Você pode ver como eles se parecem e eles são divididos obviamente em categorias. Então comércio alfanumérico e isso é relevante para você se você estiver usando algo como os ícones de Design de Material do Google, porque você pode dar-lhes nomes ou usar nomes que o Google já está usando se você estiver usando algo mais, como premium por exemplo, a partir de elementos vitais finais ou qualquer outro lugar que é realmente importante para dar esses ícones vai nomes para que os desenvolvedores podem facilmente usá-los mais tarde. Então você pode ver que é chamado de construção bem aqui, mas aqui é chamado de Edifício 32. Então este é o nome real que eles vão usar em código. E se você simplesmente baixar como VG a partir daqui, o que mais uma vez é uma boa prática. Então eu realmente encorajo você a explorar esses sistemas de design porque há muitos deles. Comprar para a Shopify tem um, adobe tem um, microsoft tem um, Apple tem um. Então, apenas certifique-se de verificá-los e entender o que essas grandes empresas estão fazendo. Então você pode fazer isso por si mesmo, não em grande escala, obviamente, especialmente se você está trabalhando sozinho porque você vai levar anos para criar todas essas coisas. Mas alguns significam em fatores importantes como cor, tipografia, iconografia, espaçamento ou grades de radônio e muito mais que você pode criar para seus clientes e seus projetos menores. Então certifique-se de verificar se você está assistindo isso no YouTube, eu vou deixar o link para baixo na descrição para alguns desses sistema de design, que eu acho que eles são legais e que eu acho que você pode pegar mais algumas informações. 28. Como criar tokens de design: Ótima maneira de organizar seus projetos e tornar mais fácil para você, seus companheiros de equipe, seus clientes e, finalmente, desenvolvedores é usar algo que é chamado de tokens de design. Então, em vez de simplesmente nomear sua cor Road, por exemplo, você pode vender para seus desenvolvedores o que o vermelho é projetado para fazer. Então, se eu mostrar a vocês no meu exemplo aqui, nós temos perigo vermelho, que é algo como quando eles, quando os usuários cometeram um erro, então ele vai mostrar essa cor vermelha para eles em um formulário, por exemplo, em um e um botão. Mas perigo vermelho é basicamente descolorido falando que os desenvolvedores podem então usar para integrar no código. E se eu copiar este código hexadecimal, em vez de nomeá-lo assim ou simplesmente ler, eles podem simplesmente nomeá-lo perigo vermelho, que é obviamente útil se você tiver várias versões desta cor. Os desenvolvedores precisam entender a necessidade de saber em que instância você está usando qual cor. Portanto, dar a ele esses tokens de design é realmente útil porque como eu mostrei no exemplo anterior com sistemas de design, é extremamente importante, especialmente com ícones, quando você tem várias versões do mesmo ícone. Então você pode se lembrar da seção anterior do curso, quando eu falo com vocês sobre sistemas de design, você pode ver que a IBM tem o número de construção 32 porque eles têm 32 ícones de construção diferentes que eles estão usando em seu sistema de design. Então você pode fazer exatamente o mesmo. Você pode nomear suas camadas assim, e você pode ajudar os desenvolvedores a entender e desenvolver facilmente rapidamente, dando nomes aos seus tokens de design. Então, mais uma vez, você pode ver em vez de branco que temos branco liso porque, por exemplo, em algum momento, talvez queiramos incluir branco mais escuro pode ser que queremos incluir, eu não sei, sobreposição branca ou qualquer outra coisa. Temos cinza escuro, cinza claro, verde principal, verde secundário, que também é importante porque este verde principal é a cor principal do nosso projeto ou marca ou site. Verde secundário é a cor do nosso efeito de pairar, por exemplo, pode ser que você pode nomeá-lo verde pairado. Talvez você possa chamá-lo de cinza escuro, verde em pairar. Talvez você possa fazer algo assim. Mas, mais uma vez, é sempre melhor falar com os desenvolvedores sobre isso e simplesmente perguntar-lhes como você prefere que suas cores sejam nomeadas e todos esses Dawkins sejam nomeados, para que eles possam facilmente compreendê-los mais tarde em código. Você também pode fazer isso com estilos de caractere. Então aqui eu tenho Poppins 16, mas em alguns casos talvez eu queira nomear este H1 Bob em 16. Talvez eu só quero nomeá-lo H Maio 1 ser principal, H1, H2, H3, H4, H5. Então, por exemplo, se talvez texto de parágrafo, então você pode chamá-lo de tamanho de parágrafo, pode ser que você tem alguns Dexter diferentes de lugares diferentes. Como, por exemplo, nas telas do painel, talvez você tenha tamanhos de texto diferentes lá. Talvez você possa até incluir algo como texto promocional. Talvez você queira incluí-lo no banner. Então pense em todas essas coisas diferentes enquanto você está projetando. Portanto, você pode incluí-los como tokens de design. E, finalmente, para os ícones e componentes, você pode ver que temos móvel top nav, principal, superior nav, ícone de menu principal, e temos ícone de menu secundário e muito mais. Mas aqui está a principal diferença entre esses dois. Quando você está nomeando componentes, Mobile top nav é importante porque ele vai no celular, enquanto principal nav vai bem aqui em um design de site que é instantaneamente fácil de entender para os desenvolvedores, porque eles podem entender, Ok, então isso é para um celular, isso é para a web e eles podem começar rápido. Então, esses são os tokens de design e eu realmente encorajo você a mais uma vez nomear suas camadas, falar com seus desenvolvedores e seus clientes. Como eles querem que você nomeie suas camadas para que eles possam facilmente entender e puxar isso dentro do código para que ele possa reduzir sua carga de trabalho mais tarde quando você realmente terminou o projeto. 29. Como criar estilo: Guias de estilo são extremamente úteis porque podem ajudar seus clientes e especialmente desenvolvedores a entender quais ativos você tem usado em seus designs. E eles podem seguir o estilo antigo, eles podem seguir a cor, eles podem copiar e colar cores do seu guia de estilo. Então, se eu levar de volta ao nosso exemplo aqui que estamos reutilizando, nós temos um guia de estilo de projeto bem aqui. Então, se aproximarmos de perto, você pode ver que temos todas essas cores diferentes. Então eles podem ver branco liso, que mais uma vez, se eu levá-lo aqui, aqui é cinza claro para que eles possam rapidamente olhar e ver qual código hexadecimal você está usando. Então eles podem copiar este código hexadecimal colado diretamente no código, conectados todos juntos, codificar, e eles vão ter essas cores integradas. A outra opção é porque ele vai ser SDS livre e sempre recomendo isso para os desenvolvedores, com o qual estou trabalhando ao longo dos anos, é simplesmente instalar o XD, abrir este arquivo e simplesmente copiar e colar isso diretamente no código, se eles quiserem. Porque assim, eles podem simplesmente percorrer e entender onde essas cores estão sendo usadas. A mesma coisa para a tipografia. Assim, você pode ver cores diferentes para diferentes tamanhos, diferentes espaçamentos e diferentes alturas de linha são diferentes. Tudo é diferente aqui. Então os desenvolvedores podem facilmente entender, OK, isso é isso, eu posso usar isso aqui. Eu posso usar isso lá, isso é usado para isso. Também querendo observar, se você estiver compartilhando para desenvolvedores será muito mais fácil para eles fornecerem esse link porque eles podem facilmente copiar e colar esses estilos diretamente desse link compartilhado no código. Mas, mais uma vez, este guia de estilo de projeto é realmente útil para manter as coisas com bom aspecto em um piscar de olhos, iconografia. Então, mais uma vez, eles podem olhar para t2, quais ícones você tem usado? E neste caso temos este cartão. Então, se você usou 50 cartões diferentes, você pode colocar o texto abaixo e chamar isso, por exemplo, design do site e página do cartão, rolar três ou o que for. Então eles podem saber que você tem usado este elemento concreto em seu projeto. Então é aí que os guias de estilo vêm a calhar. E os clientes também podem ver esses guias de estilo. E esta é realmente simplificada versão que você pode criar tão complexo o guia de estilo como você quer. Você pode incluir imagens diferentes em seu guia de estilo. Você pode criar diferentes placas de humor para inspiração. Você pode incluí-los em um guia de estilo. Você pode elaborar mais sobre os parágrafos, por exemplo. Então você pode criar parágrafos maiores, parágrafos menores. Você pode mostrar como o parágrafo parece, linha central alinhada à esquerda e escrever a linha para que você possa colocar tanta informação neste guia de estilo quanto quiser. Ou alguns projetos não exigem guia de estilo. Então, mais uma vez, você tem que falar com seus clientes e desenvolvedores. Eles realmente precisam do guia de estilo porque se não o fizerem, este é apenas um exercício de design para si mesmo. Ou se você apenas tem muito tempo livre em sua mão, você pode criar isso. Mas, mais uma vez, guia de estilo requer um monte de tempo e um monte de esforço e pensamento colocado nele. Então, se você não tem que criar o Guia de Estilo por todos os meios, não crie-o, mas pergunte aos seus clientes e desenvolvedores, você realmente precisa criá-los? Porque quando você começa a compartilhar, você pode compartilhar para clientes e compartilhar para desenvolvedores. E ambos podem obter a imagem lá em vez de você criar adicionalmente este guia de estilo. Mas, mais uma vez, é parte importante do próprio processo de design. 30. Como criar grandes apresentar: Finalmente, a última parte ou o processo de design, nossas apresentações, você tem que ter boas habilidades de apresentação pessoalmente, através da chamada de zoom, chamada Skype, ou na própria apresentação. Então você tem que explicar qual é o problema. Como você acessa esse problema? Como você vai sobre isso? Como você vai encontrar a solução? E então como você resolveu esse problema? Você tem que mostrar tudo dentro de sua apresentação. E isso geralmente é chamado de estudo de caso. E cada projeto é o estudo de caso para si. Mas como você sabe o que você precisa apresentar? É realmente fácil. Basta ir para o Google. Antes de ir para o Google, certifique-se de entender é esta apresentação do projeto antes de começar a trabalhar ou depois de começar a trabalhar. E você tem que usá-lo para o seu portfólio. Porque antes de começar a trabalhar, você tem que explicar ao seu potencial cliente porque eles ainda não são seus clientes, mas você está lançando para eles. Você tem que explicar quais são suas capacidades como designer. Então você tem que se vender a eles basicamente para trabalhar para eles em seu projeto. Então você tem que explicar suas habilidades de resolução de problemas e como você é capaz de ajudá-los neste projeto específico? Se, no entanto, por outro lado, você terminou este projeto e você só quer mostrar suas habilidades de design, todo o seu processo ao projetar este site, então você tem que ir sobre ele de outra maneira. Então, no primeiro método, certifique-se de usar algo como uma apresentação do PowerPoint. Você quer mostrar tantos problemas que você pode resolver quanto possível nesse nicho particular. Para que o cliente possa entendê-lo facilmente. Se um dar-lhe um exemplo, se você está se aproximando, porque usamos Dao De No exemplo anterior, digamos que você vai para o seu concessionário Audi local e você quer redesenhar seu site. Mas o que você fez anteriormente é um redesenhado um monte desses sites de jogos. Não é relevante para o nosso D. Eles não vão contratar você não importa o quão bom designer você é, porque você não entende os problemas que eles estão enfrentando dentro dessa indústria. Portanto, certifique-se de que quando você está lançando, pode ter certeza de lançar o tom certo para o cliente certo que vai entender os problemas e vai entender as soluções que você está oferecendo, portanto, vai ser um melhor ajuste para Você. E vai ser um projeto maior oral do outro lado quando você terminar o projeto e você quer mostrá-lo fora em seu portfólio, em sua página do Behance ou até mesmo futuros clientes, que também é importante. Você quer mostrar-lhes como você resolveu os problemas em seus projetos anteriores no mesmo nicho em que eles estão, e lá você tem uma combinação vencedora. Então deixe-me ir rapidamente para porque, e eu vou mostrar-lhe alguns bons exemplos que eu rapidamente encontrei. Mas você também pode explorar e encontrar diferentes exemplos que funcionam melhor para você. Então, o que temos aqui? É este projeto móvel. Lá, chame-o de colorido, e aqui você pode ver o que é. Você tem essa bela animação de fundo. Então procedimento de salva-vidas digitalizado para que você possa ver o que o aplicativo faz. Nossa visão. Então, qual é a nossa visão? Os problemas? Você pode ver, o que o aplicativo pode fazer imediatamente. Um clique pode salvar a vida de alguém. Então essa é a solução. O que fizemos, nossa abordagem, alguma marca, design de UX, design interface do usuário, e para cada um deles o que eles fizeram, fluxo de usuário. Então, mais uma vez, onde eles encontraram seus usuários, como o usuário viaja para este aplicativo. Então jornada do usuário basicamente base de conhecimento. Então o que eles incorporaram, compraram e lançaram o que criaram. Assim, você pode ver todas essas informações adicionais diferentes que eles estão usando dentro do aplicativo. Você pode ver alguns pontos de chamada aqui. Fluxo rápido, presença virtual. Então, basicamente, indo ainda mais longe como fluxo de smartwatch através do aplicativo. E basicamente é assim que parece. Então você pode ver que este é realmente complexo exemplo da apresentação do projeto é feito extremamente bem. Então você pode dividir o seu tempo adicional para as apresentações porque boa apresentação é metade da venda. Certifique-se de saber isso, certifique-se de lembrar disso. Porque se você tem uma boa apresentação, que se comunica muito bem e parece muito bem, você já está meio caminho se atreve a emprestar projeto morto ou mesmo esse projeto futuro. Mais um exemplo que quero mostrar a vocês é este redesenho do site de vistos. Você pode ver que é de Ekaterina, minha auréola. E basicamente ela fez o contrário. Este é o design do site em vez deste design do aplicativo. Então você pode fazer isso para qualquer coisa que você está projetando basicamente no que ela está fazendo aqui é mostrar que esta página se parece com isso no celular. Imediatamente. Ela pegou, ela pega a marca, ela espalha isso ainda mais. Ela tem essas animações agradáveis entre as cartas. Ela está mostrando como a rolagem parece na página. Talvez até alguns efeitos de horror e muito mais. Esta página, como se parece na web e móvel. Aqui temos a grade. Então você pode ver que ela está separando páginas reais e todos esses detalhes adicionais como tamanhos de fonte entre tudo isso enquanto esses caras separaram tudo em seções. Então, cabe a você como você deseja estruturar suas apresentações para seus clientes e basicamente dizer o que você pode fazer por eles em um caso particular. Então é isso para as apresentações são realmente encorajá-lo a conferir. Ir para B tem um C em sua indústria, em seu nicho, como as apresentações se parecem, certifique-se de lembrar o exemplo Audi, mas você pode aplicar isso a qualquer exemplo. E em cada um, qualquer setor em que você está, certifique-se de se comunicar, para escrever idéias, problemas certos e escrever soluções com os clientes certos. E Dan, você vai estar em uma série de vitórias. 31. Futuro de ferramentas de design: Então você pode estar apenas começando neste negócio e você pode estar apenas se perguntando qual é o futuro dessas ferramentas de design só deve valer meu tempo para o Adobe XD. Devo até ir para Sigma quatro sketch, talvez Photoshop ou Illustrator? O que devo procurar nessas ferramentas e onde devo dedicar meu tempo também? Então eu posso dizer a vocês, pelos meus anos e anos de experiência, quase duas décadas neste negócio, que realmente não há resposta certa. Todas essas ferramentas estão evoluindo ao longo do tempo. Eu realmente gosto do Adobe XD porque ele faz parte da família Adobe e realmente não tem dívidas. Se eu tiver minha assinatura premium para o pacote Adobe, Ele vai ser suportado e eu posso usá-lo em conjunto com, por exemplo, Photoshop Illustrator. Se eu tiver que corrigir algumas de minhas imagens, vejamos, talvez eu possa realmente usar o Lightroom. Então eu tenho tudo isso em Creative chamado assinatura. Então eu realmente gosto do Adobe XD para esse assunto, também versatilidade porque, como eles disseram neste curso, você pode ir de protótipos de design e compartilhar seus recursos de colaboração. E a coisa mais crucial de tudo é que as atualizações estão chegando todos os meses. E grandes atualizações estão chegando uma ou duas vezes, talvez três vezes por ano, dependendo do atraso da equipe e do que eles criaram até agora. Portanto, apenas certifique-se de entender quando você está escolhendo essas ferramentas de design. Certifique-se de escolher o que é certo para você. Talvez você realmente goste de usar o esboço, mas os esboços não são suportados no Windows. Então, se você é um usuário do Windows, então isso não é uma opção. Talvez você goste de usar para sigma, então você pode ir em frente e usar para sigma na nuvem. Mas se sua conexão com a internet é muito lenta, Dan, essa experiência não vai ser ótima com outra experiência que tem, por exemplo, um designer Sumatra que tem melhores velocidades de conexão à internet. Se você for, por outro lado, como o Adobe XD, como eu, e gostaria de usar alguns dos outros produtos da Adobe, então vá em frente. Não há opção certa ou errada aqui. Posso te dizer por experiência, vivemos em grandes momentos para ser um designer de UI e UX porque temos todas essas ferramentas à nossa disposição, única coisa que temos que fazer é simplesmente trabalhar. Você pode trabalhar em si mesmo, você pode trabalhar em melhorar a si mesmo. E uma coisa chave para pegar neste curso e a partir disso, uma parte do curso especialmente é quando você sabe como usar algumas dessas ferramentas, como neste caso, será x D. Será muito mais fácil para você entender essas ferramentas UDL como FISMA ou esboço ou mesmo Photoshop. Porque todas essas ferramentas são basicamente as mesmas. É apenas até você eo que se encaixa melhor se você ganhar versões gratuitas do XD e sigma são ótima opção se você estiver em um Mac no esboço da vida real ou você é uma equipe está forçando você a usar esboço ou você realmente quer usar esboço, então você tem que pagar pelo Scatchard. Então certifique-se de ver o que é melhor para você. No meu caso, como eu disse, um verdadeiro como o Adobe XD. E porque é leve, ele me fornece essas ótimas opções. E se você quiser, por exemplo, fazer algumas emissões mais avançadas e mostrar dados ou clientes ou desenvolvedores, você pode escolher esse arquivo Adobe XD, ir direto para Premier, por exemplo, ou mesmo após efeitos. E no After Effects, você pode adicionar todos esses detalhes incríveis e todas essas animações incríveis. Você nem precisa porque há muitos plugins dentro do Adobe XD. E então você pode usar plugins para, por exemplo, testes de usuários. Há algo chamado anima. Recentemente, você pode exportar código diretamente do Adobe XD. Você pode trabalhar em tantas opções diferentes e tantos níveis diferentes. Apenas dentro dele será sem nunca mudar nenhuma dessas ferramentas. Porque eu me lembro de quando eu comecei e nós costumávamos criar sites no Photoshop e no Illustrator. Então temos que usar ferramentas como a visão, mas foi muito mais tarde. Antes da visão, temos que explicar aos nossos clientes que não são web designers, que não são desenvolvedores o que o design vai acabar parecendo uma vez que é desenvolvido. Então é realmente difícil comunicar uma ideia como essa com seu cliente, especialmente se ele não sabe e não entende do que você está falando. Mas com ferramentas como o Adobe XD e todas essas ferramentas, extensões, plugins e os recursos que temos agora à nossa disposição, é muito mais fácil para os clientes entenderem porque, como você viu no discurso, é muito mais fácil para eles fornecer e para guiá-lo através deste projeto para que você possa começar com o projeto mais rapidamente. É muito mais fácil se comunicar com o desenvolvedor porque no passado, essa era a agitação também. Você tem que instalar plugins diferentes para polir e foi realmente uma bagunça. Mas aqui você tem soluções integradas para exportar seus arquivos. Por isso, é muito mais fácil trabalhar com desenvolvedores, com clientes, quais partes interessadas, com seus companheiros de equipe em um piscar de olhos, tudo em um aplicativo. E você pode começar de graça. 32. Projeto do curso: Seu projeto de classe para esta classe é usar as dicas e técnicas que você aprende com este curso para aplicá-las ao seu processo de design. E eu realmente gostaria que você criasse site de uma página ou uma única tela para o aplicativo usando as dicas e técnicas que você aprenderá este curso e para enviá-los para os projetos de classe, certifique-se de salvá-los fora como simples JPEG, você não precisa incluir nada extravagante como uma emissão, qualquer coisa extravagante como Geoff simplesmente incluí-los como imagens JPEG, enviá-los para a seção de arquivos de classe e eu e outros alunos serão capazes de fornecer-lhe com o feedback. Ninguém está aqui para te julgar. Estamos todos aqui como amigos para nos ajudarmos uns aos outros e ajudarmos uns aos outros a crescer e a expandirmos neste campo. Então, mais uma vez, eu realmente encorajo você a criar o que você quer que você aprenda esta classe e simplesmente enviar isso para os arquivos do projeto de classe. 33. Conclusão do curso: Obrigado por assistir a este curso. Eu realmente espero que você tenha encontrado valor nisso. Se você quiser, você pode verificar meu curso de masterclass do Adobe XD aqui. Você pode se inscrever nele. E então você pode encontrar todas as ferramentas e recursos que falamos neste curso gratuito. Além disso, se você quiser acessar os links e recursos que mencionei neste curso, haverá link em um PDF. Certifique-se de baixar PDF aberto e você pode simplesmente clicar em qualquer link que lhe interessa e você pode facilmente acessá-lo até a próxima vez. Obrigado mais uma vez por assistir e desejo-lhe sorte em todos os seus esforços. Você escolheu o campo certo porque o Design de UX da interface do usuário é o campo InDesign, que se expande mais rapidamente e há muitas oportunidades diferentes para você. Então desejo-lhe toda a sorte em sua busca de emprego ou em seus esforços de melhoria de carreira. Obrigado. E até a próxima vez, cuide-se.