Fundamentos do design da experiência do usuário - Design de UI/UX no Adobe XD

1. Introdução ao curso de treinamento do Adobe XD Essenciais: [MÚSICA] Olá a todos. Meu nome é Dan Scott e sou um instrutor certificado pela Adobe. Juntos, você e eu vamos aprender como se tornar um designer de UX usando o software Adobe XD. Agora, este curso é destinado a pessoas completamente novas no software Adobe XD. Além disso, é voltado para pessoas que são completamente novas no design UX em geral. Começaremos o curso logo no início e trabalharemos passo a passo. Primeiro, descreveremos o resumo e como vamos trabalhar com uma persona UX. Então você aprenderá a criar wireframes simples. A partir daí, aprenderemos como implementar cores e imagens corretamente em seus designs. Você aprenderá o que fazer e não escolher fontes para aplicativos web e móveis. Você aprenderá a criar seus próprios ícones, botões e todos os componentes da interface do usuário. Compartilharei com você todos os truques secretos dentro do Adobe XD que ajudarão a acelerar seu fluxo de trabalho, além de facilitar nossas vidas usando kits de interface do usuário gratuitos e modelos preexistentes no XD. Sairemos do computador e mostrarei como testar seus designs realmente em seu telefone. Construiremos um guia de estilo simples pronto para uma entrega do cliente. Vamos nos divertir fazendo essas micro indições, transições de página e animações. Antes do final deste curso, teremos um protótipo totalmente interativo todo o caminho para colaborar com outros membros da equipe e exportar os arquivos certos prontos para entrega para nosso desenvolvedor ou engenheiro de software. Ao longo do curso também, abordarei algumas das expectativas de você como um novo designer de UX. Agora, tenho tarefas ao longo do curso para ajudá-lo a praticar o que estamos aprendendo enquanto trabalhamos e também para criar algo único para o seu portfólio. Tudo bem, é hora de ir do Adobe XD zero para o herói UX, juntar-se a mim na sala de aula. Agora, opinião honesta, você está pensando: “Essa é uma luz legal que ele tem lá. Quão legal é isso?” Ou [RISOS] isso é todo o caminho através do curso, você está pensando: “Para que serve a luz rosa coxa?” 2. Como começar com seu projeto Adobe XD.: Olá a todos. Bem-vindo ao vídeo de introdução. A primeira coisa que você precisa fazer é baixar os arquivos de exercícios. Haverá um link nesta tela aqui, então clique, faça o download antes de seguirmos em frente. Além disso, posso falar muito rápido quando fico animado. Há uma engrenagem dessa forma. [RISOS] Há um pequeno ícone de engrenagem aqui em baixo. Você pode me acelerar ou me atrasar, se eu falar muito rápido, eu falo muito rápido. Certifique-se também de que você instalou o Adobe XD. Vamos usar a versão completa dele. Há uma versão gratuita, eles chamam, no momento, o plano inicial. É novo, pode desaparecer, eles podem mudar o nome dele. Você pode ter que descobrir isso. As diferenças no momento que é apenas para uso pessoal, aquela versão gratuita chamada plano inicial. Além disso, há algumas restrições sobre quantas pessoas você pode compartilhar o documento e colaborar com. Mas no momento, você pode fazer esse curso 100% com ele. Eles mudam isso o tempo todo. Vamos nos concentrar na versão principal. Você pode ter algumas pequenas mudanças se estiver usando essa versão inicial durante todo o curso, mas no momento, 100%, você pode fazer isso totalmente. Outra coisa a observar é que o Adobe XD é relativamente novo. Eles estão atualizando uma carga. Toda vez que faço um curso, eles entram e mudam o nome ou algo assim. Se for uma mudança fundamental, gravarei novamente um dos vídeos. Se for um ligeiro ajuste e mudar de forma ou movido um pouco, vou fazer uma anotação, ou um pequeno pop-up como este, [NOISE] ou verificar os comentários embaixo. Pode ser algo novo e outros alunos descobriram isso. Então, basta verificar embaixo. Vou tentar mantê-lo atualizado o máximo que puder, mas há poucas mudanças que elas fazem o tempo todo com o Adobe XD. Por fim, Mac versus PC, qual você precisa? Isso não importa. Você pode fazer esse curso inteiro com PC ou Mac. Todas as funções são as mesmas, a interface do usuário é um pouco diferente, mas não é uma grande mudança. Vou usar um Mac neste curso sem um bom motivo [RISOS] além de parecer legal. [RISOS] Eu sou vendido parecendo um designer, olhe para os óculos, peguei o MAC, está no estande. Peguei a luz, a luz está apagada. [RISOS] Olha isso. faz absolutamente nada com a qualidade do seu trabalho, exceto que meu ambiente parece legal. [RISOS] Mas Mac, BC, não importa. Vamos para o próximo vídeo. 3. O que é Adobe XD e faz o codificação: Olá, todos. Vamos falar sobre o que serve o Adobe XD. Você pode exportar o código e ter o aplicativo ou o site diretamente do Adobe XD? É uma pergunta que me fazem muito. Não, o Adobe XD é uma ferramenta de design, e depois que o design é feito, você o passa para a próxima fase que é codificá-lo, seja em Xcode ou PHP ou qualquer idioma que esteja sendo usado para desenvolva esse aplicativo ou esse site. Você pode pensar, bem, por que você não faz isso diretamente no código? Essa é uma forma de fazer isso. É como construir uma casa e projetá-la ao mesmo tempo, é muito difícil fazer mudanças. Como designer, posso mover as coisas, mudar as cores, adicionar uma página extra, e leva minutos ou horas dependendo de [RISOS] quantas mudanças precisam acontecer. Mas fazer essas mesmas mudanças quando estiver sendo codificado é um grande negócio e requer mais talento do que eu tenho na codificação. Posso fazer uma codificação básica de front-end , mas nada que construa um site complexo. Muitas vezes, vou trabalhar em equipe. Eu faço o lado do design e os testes e a UI e a UX, que discutiremos no próximo vídeo, depois entreguei um desenvolvedor ou um engenheiro ou um codificador ou o que você vai chamá-los, e eles o criarão com base nesse design. Você seria como, bem, parece que duas pessoas fazendo um trabalho. Essa é uma maneira que eu vejo isso, mas o que é realmente eficiente é minhas habilidades como designer é pegar o breve, entender o breve, criar algum tipo de hipóteses. Não é um bom dia. Você sabe a palavra que quero dizer. Venha com algumas coisas que você quer que você acha que resolverão esse problema e depois teste-as. Essa é a coisa realmente legal sobre o Adobe XD. Se você me deu uma ideia agora, disse, eu tenho uma nova ideia para uma página de inscrição para o nosso site, você pode criá-la? Eu poderia pegar esse breve e eu poderia fazê-lo muito rapidamente. Digamos que isso possa ser feito em poucas horas, eu poderia simular esse tipo diferente página de inscrição em seu site, levá-la a clientes em potencial e fazer com que eles testem isso. Ele realmente não funciona, não está totalmente integrado, mas para a pessoa que está testando, é bom o suficiente para receber feedback. Eu posso assisti-los fazendo isso ou gravar a tela com eles fazendo isso, e encontrar algum bug e ser como, pensei que iríamos lá, eles não são. Todo esse processo é feito por meio do Adobe XD. Você pode ver a rapidez com que isso pode ser feito, e eu posso fazer 20 versões diferentes antes que eu tenha sucesso, eles saibam como se inscrever, essa é a melhor maneira de se inscrever. Então eu posso ir para o desenvolvedor com uma coisa e dizer, vá fazer isso para mim. Eu entrego para o desenvolvedor, eles vão e construí-lo. Esse é um fluxo de trabalho eficiente. Codificá-lo e fazer a mesma coisa levaria muito tempo, e as habilidades que não tenho para fazer um processo complexo de inscrição, simplesmente não consigo fazer isso. [RISOS] Precisamos de algumas pessoas envolvidas no processo. Isso é o que o Adobe XD faz. Trata-se de prototipagem rapidamente, e você pode trabalhar com um cliente, eles podem se inscrever, eles podem dizer, eu amo este site, e então você o entrega para obter. Você tem que ficar claro com seu cliente que esse processo, mesmo que eles possam vê-lo, você ouvirá um link, que não é realmente o produto acabado. É algo que precisa sair e ser desenvolvido a seguir. Agora, você pode ser como, eu não tenho um desenvolvedor [RISOS], um engenheiro ou um programador. Você pode fazer essas coisas sozinho. Depende do trabalho, de quem é o cliente e do tamanho da empresa. Você criará no Adobe XD, acertará o design e, se você não estiver indo para um programador de desenvolvedor e quiser fazer tudo sozinho, não há opções de código, coisas como Webflow e Elementor e WordPress. Tenho cursos sobre muitas das coisas que estou falando, especialmente aquelas, seja agora ou saindo muito em breve para que você possa, como designer, fazer o pacote completo, entregar um site completamente. Mas haverá outras ocasiões em que você está trabalhando com um desenvolvimento dentro de uma empresa maior ou com um desenvolvedor construindo algumas coisas personalizadas. Sua função no XD entregará isso ao desenvolvedor. As coisas que você pode fazer para ajudá-los, você pode dar a eles muito do código de estilo, que faremos neste curso, você dá a elas todas as imagens e os elementos que eles precisam para continuar. Você pode codificar você mesmo. Se você está projetando um site simples, tenho uma aula no Dreamweaver e no VS Code. O VS Code 1 é provavelmente o melhor para aprender a fazer HTML e CSS você mesmo e criar suas próprias coisas, ou ir para as opções sem código. Há muito. Squarespace, Wix, Webflow, Elementor, os dois em que estou focando, WordPress, não há muitas opções de design de código. Você ainda o projeta no XD porque é rápido e ótimo, e depois o constrói depois assim que o cliente tiver aprovação, que demora um pouco mais. Ele não exporta código para um desenvolvedor, mas dará a eles elementos que eles precisam ou que você usará se você mesmo estiver codificando manualmente. Esse vídeo acabou. 4. Qual é a diferença entre UI e UX no Adobe XD: Olá. Neste vídeo, falaremos sobre UI versus UX. Se você já é muito claro sobre esses termos, você pode continuar avançando para o próximo vídeo. Para aqueles que precisam de uma explicação para deixar claro , vamos passar por isso agora. Começaremos com a UI, parte da UI/UX. É um termo. Esses dois termos são jogados bastante e, juntos, são semelhantes, mas diferentes no Adobe XD. Está tudo misturado lá. Design de interface do usuário ou design de experiência do usuário é um termo usado quando você está projetando a aparência de um site ou aplicativo ou o que quer que seja. Eu costumava trabalhar como designer de interface do usuário por um longo tempo. Antes que a UX se tornasse popular e me interessasse por isso, eu era puramente apenas um designer de UI. O que parecia era que eu recebo um breve dos clientes, pesquiso o que eles precisavam, havia muita minha própria experiência chegando lá, como o que deveria ir onde e o que eles os clientes adorariam. O cliente assinaria e nós o fazíamos por um desenvolvedor ou eu mesmo o faria. Fui eu como designer de interface do usuário. Onde a UX é diferente é que muitas vezes é o mesmo tipo de ferramentas. Eu usaria minha experiência para fazer o que penso, mas é muito mais humildade envolvida com o que eu acho que seria uma boa solução para o cliente. Preciso pensar que essa é minha hipótese, isso é o que eu acho que o cliente vai adorar, pelo menos seus clientes vão adorar, e depois colocá-lo à prova. É aí que começamos a passar para a UX. É um grande campo. Vou tentar cobrir o máximo de design UX possível neste curso. Mas está dizendo, isso é o que eu acho que encontrar os usuários certos para testar minha hipótese ou meu design, e então descobrir o que funcionou, o que não funcionou e depois iterar sobre isso. Não apenas uma vez, não apenas duas vezes, quantas vezes for necessário. Digamos que seja um processo de inscrição para um site que você foi solicitado a criar, ou um site inteiro ou um aplicativo para algo completamente novo. O cliente quer algo, você tem uma ideia sobre como entregar isso. É colocar essas ideias à prova é onde começamos a nos tornar um designer de UX. Trabalhar com clientes, testar, descobrir o que funciona e depois iterando. É por isso que o Adobe XD é muito bom. É muito rápido. Você pode iterar muito rapidamente, você pode voltar para essas mesmas pessoas para testar em tempo real ou fazer algumas alterações, enviá-lo para elas no dia seguinte, testá-lo novamente até chegar a um ponto onde você está realizando suas tarefas que você disse. Pode ser o momento mais rápido para se inscrever, ou pelo menos a maior quantidade de pessoas se inscreveram. Seja qual for o seu objetivo, você pode testar com o cliente para trabalhar nesse processo. Essa é a diferença entre UI e UX. O design da interface do usuário da interface do usuário é a aparência, mas, em seguida, adicionar esse nível de design de experiência do usuário é onde você realmente entra e testa isso. Existem várias formas de testar, mas essa é a versão simplista. aparência da interface do usuário e da experiência do usuário tem mais a ver com testes e iteração. Isso faz sentido? Vamos explicar um pouco mais à medida que passamos pelo curso, mas isso é UI/UX por lá. Não sei o porquê, mas são eles. Vamos para o próximo vídeo. 5. O que estamos fazendo neste curso Adobe XD: Olá a todos. Neste vídeo, quero mostrar para onde estamos indo. Este é o material que vamos fazer neste curso. Começaremos com a criação de um wireframe. Apenas uma estrutura de arame simples para obter o básico do XD sob nosso cinto. Haverá algumas transições, e faremos alguns testes em telefones, e construiremos algumas coisas básicas e algumas animações simples. Apenas para molhar nossos pés no Adobe XD, começaremos a criar nosso quadro de humor, como apresentá-lo aos clientes e, em seguida, começar nossa versão de alta fidelidade. Todos esses termos explicarei mais tarde no curso. Mas vamos dar uma olhada neles. Tenho várias opções para a capa. Vamos dar uma olhada. Como animações, você pode ver o que fazemos. Vamos dar uma olhada. Tem um equipamento de navegação, temos botões Comprar Agora, temos coisas funcionando, [RISOS] interruptores que ligam e desligam sem motivo aqui, [RISOS] mas eles parecem legais, com alguma animação também. Isso é o que estamos construindo neste curso. Quero te dar um pico no início para que saibamos para onde estamos indo. Você gosta do interruptor, parece legal, [RISOS] o que a van estava fazendo? Você também pode construir animações como a minha, com o caminhão fazendo pequeno wheelie. [RISOS] De qualquer forma, vamos entrar e começar. 6. O que é um persona e fluxo de tarefas no design UX: Olá a todos. Neste vídeo, vamos falar sobre o resumo, a persona e o fluxo de tarefas deste curso, e o que esses termos significam. O breve, agradável e simples, chá verde escocês. Eles são uma pequena empresa local em Limerick, na Irlanda, onde eu moro, e eles entregam chá verde à sua porta. Esse é o breve breve. Vamos falar sobre persona que é esse próximo pedaço. O que é persona? Persona é uma palavra usada para descrever o cliente-alvo. No nosso caso, vamos lê-lo juntos. Nosso cliente ideal é uma mulher chamada Zoe. Zoe está na casa dos 40 anos, é casada, tem doutorado, Dra. Zoe, e trabalha em uma equipe ocupada. Ela mora em Limerick e está um pouco familiarizada com o produto deles, mas gosta de passar tempo considerando a próxima compra. Por que isso é útil? Primeiro de tudo, quando vamos fazer nossos testes de UX, não adianta me fazer o teste porque sou Dan. Moro em Limerick, mas não tenho doutorado e não sou uma mulher de 40 anos casada. Isso nos permite encontrar as pessoas certas para testar isso, o que é super importante. O que também é importante é, como designer, o que eu tendi a fazer, especialmente no início da minha carreira, eu desenhei para mim, tentando me imaginar gostando de chá verde. Eu moro em Limerick, o que é bom, mas não sou de limerick, sou da Nova Zelândia. Houve essa desconexão em que eu projetei para o que eu acho que seria ótimo, e então eu estaria lutando com o que o cliente acha que eles deveriam querer. O cliente não está certo, não estou certo, Zoe está certa. Trata-se de colocar uma persona lá fora para que eu e o cliente possamos falar sobre Zoe, e isso se torna um pouco menos apaixonado. Não gosto de verde ou não gosto de roxo. Bem, o que Zoe gosta? Você pode ter discussões de terceiros sobre essa outra pessoa, e isso se torna um pouco menos. Você está um pouco menos ferido como designer porque está falando sobre essa outra pessoa que é útil. Mas também permite que você tome decisões sobre os tipos de fonte, tipos de cores, a forma como seu site ou aplicativo é construído porque ela está um pouco familiarizada com o produto, mas realmente gosta de gastar tempo considerando a próxima compra. Teremos que ter certeza de que há muitos detalhes sobre este produto. A ideia aqui não é ser o aplicativo de pedidos mais rápido em todo o mundo, porque não é isso que nossa persona quer. Nossa persona gosta de passar tempo considerando isso. Haverá talvez algum potencial isso versus aquilo, algumas comparações. Essas coisas realmente enquadraram o que vou projetar aqui, e são apenas algumas frases. Caso contrário, acabo projetando para o cliente, o que eles querem e eles não estão sendo usuários. Eles são o cliente para você, mas não o cliente deste aplicativo ou site que você está fazendo. Ou eu crio para mim mesmo. Ou você acaba, o pior lugar é projetar para todos, cada grupo de necessidades lá fora. Projetar para todos é projetar para ninguém. Você acaba com este site ou um aplicativo que realmente não faz nada por ninguém, [RISOS] muito menos um grupo. Isso é o que uma persona. Isso lhe dá empatia pelo cliente, por coisas que você, chá verde, eu nem gosto de chá verde. Nossa persona me permite entender, Zoe pode estar interessada em chá verde e permitir que eu desenvolva seu design, aparência, sensação e fluxo com base em seus desejos e necessidades. Essa é a versão curta da persona. Você pode entrar em muito mais profundidade. Isso é alguns conselhos. Vou dar-lhe o meu conselho ao longo deste curso é, se há coisas que você gosta, eu entendi isso, [RISOS] ele explicou isso. Faça uma pequena anotação em seu caderno e diga, vou pesquisar isso depois deste vídeo ou depois deste curso. Personas é uma daquelas coisas em que há muito mais do que o que tenho muito mais do que o que tenho experiência e sou capaz de me comunicar em um desses vídeos curtos, então vá aprender mais sobre personas. Mas essa é a versão curta. Em seguida, vamos falar sobre fluxos de tarefas. Essa é a tarefa que nos pediram para projetar. Como designer, você foi convidado a dar a uma empresa, para quem ela serve. Isso é o que precisamos produzir ou fazer simulação no Adobe XD, é que precisamos de uma página homepage/marketing. Precisamos da nossa página de detalhes do produto, sobre chá verde. Precisamos de uma página de checkout e alguma confirmação do pedido. Este é o fluxo de tarefas. Um fluxo de tarefas é bastante linear. Caso contrário, se você não concordou com uma coisa para a qual está projetando, seja indo para você do seu gerente de produto, ou seu chefe , ou do cliente, você acaba criando muito. Você pode acabar projetando a página de termos e condições, que para o que precisamos agora e fazer testes para pessoas do tipo Zoe ou Zoe, não é útil. Útil no final, mas não é útil para fazer isso testado nas mãos dos clientes. Temos um fluxo de tarefas acordado, e é isso para este curso. Agora, o fluxo de tarefas é um termo, se acostume para essa abordagem linear passo a passo. Vejamos outro termo, o fluxo do usuário. Fluxo de tarefas versus fluxo do usuário. Este é um artigo muito bom. Obrigado, Erika Harano. Confira. Haverá um link na tela aparecendo no canto inferior lá. Por que não estamos desenvolvendo um fluxo de usuários neste curso específico? É interessante. Bem, é útil saber a diferença entre fluxos tarefas e fluxos de usuário. Este tem um bom exemplo desse fluxo de tarefas. Encontrando uma receita de panqueca. Você vai para a página inicial que procura por panquecas. Nos resultados da pesquisa, eles encontram algo para uma página de receita de panqueca super banana. Esse é um fluxo de tarefas, podemos projetar para isso. Mas um fluxo de usuário é a mesma coisa. Mesmo começo, mesmo fim. Mas vamos dar uma olhada neste particular aqui. Este é um fluxo de usuário. Ele tem os mesmos elementos. Você começa na página inicial, eles vão para os resultados da pesquisa, eles encontram a receita super banana. Mas esse fluxo de tarefas original negligencia todos os outros caminhos que o usuário pode ir para chegar, digamos que eles precisam chegar ao fim aqui. Você pode ver esse fluxograma? Posso ampliá-lo? Eu posso. Homepage, e em nosso fluxo de tarefas, assumimos que eles usarão os resultados da pesquisa. Mas você pode ver aqui que há essa decisão. Você pode ver os pequenos ícones aqui. Esses são nós de decisão. Essas são interações com os sites. Estas são páginas diferentes que acabaram. Homepage, eles realmente usaram a barra de pesquisa? Você pode descobrir por meio de testes que poucas pessoas que realmente usam a barra de pesquisa. Eles acabam aqui em baixo. Não, se eles usarem essas categorias de navegação, você pode acabar gastando muito mais do seu tempo criando uma opção de navegação por categoria muito clara. Ou, alternativamente, pode ser o oposto. Você pode criar essa incrível extravagância suspensa de navegação de um menu suspenso. Ninguém o usa. Todos usam a pesquisa, ou é uma mistura de ambos. É para isso que esses fluxos de usuários estão aqui, para encontrar becos sem saída. Você pode estar assumindo isso, mas as pessoas estão tentando encontrar outra coisa que não esteja lá. É aí que algo como esse fluxo de usuário pode ser bom no início, quando você está esgotando um trabalho. Você ainda chega ao lugar certo e ainda não está projetando a página de termos e condições, que provavelmente não é importante para o aplicativo ou site que você está fazendo nesta fase. [RISOS] Você pode achar isso muito importante. Mas neste estágio inicial, é um trabalho maior fazer um fluxo de usuário em vez de apenas um fluxo de tarefas. Mas estamos mantendo esse curso conciso e fazendo uma pequena parte do fluxo. O fluxo de tarefas é bastante linear, passo a passo e um fluxo de usuário geralmente é árvore de decisão não linear e é uma opção de teste mais completa para sair para testes do usuário. Mais complexo. Mais simples. Vai depender do trabalho que você foi solicitado a fazer. No nosso caso, é esse trabalho. Nós começamos a projetar essas quatro páginas. Eu mantive isso bem simples para facilitar este curso. Mas você pode entrar em muito mais detalhes com o resumo, especialmente. Você pode receber empregos que não tenham breve. Ei, eu quero um site. Esse pode ser o seu breve. Você pode obter aqueles que são super detalhados. Eles podem vir através de uma empresa maior, onde houve uma equipe de pessoas, pesquisadores de UX. Você pode ter líderes de equipe e gerentes de produto, e, eu não sei, VPs e todos trabalhando em um projeto e você recebe um projeto bastante detalhado para fazer. Para mim, muitas vezes estou trabalhando com pequenos produtos, pequenos clientes e, muitas vezes, recebo a opção não breve, ou muito limitada. Eu não sei. Você está vendo isso aqui que, com uma persona, e um breve, e um fluxo de tarefas, eu sei o que preciso fazer agora. Muito do trabalho duro está feito. Mesmo que seja bem simples de olhar na tela, fica muito claro o que o cliente vai conseguir e o que eu preciso entregar. Se você não fizer e você é novo nisso, é difícil fazer quando você é novo, mas você precisa pensar voltar para o cliente ou seu chefe sobre, o que é, quem é a persona? Quais são as páginas reais que estou projetando? É um fluxo de usuário, fluxo tarefas? O que ele se parece? A outra última coisa que é negligenciada fora daqui são coisas como valores de marca e declarações de missão. Não sabemos muito sobre o chá verde escocês. Nós não sabemos, eles são todos sobre eficiência? O robô deles está servindo? Ou é tudo sobre voltar para o agricultor e o agricultor recebe os preços mais altos, mas o agricultor recebe um salário justo? Essa equipe é super importante. Descubra, se você estiver trabalhando para uma empresa maior, eles terão uma declaração de missão e valores, diretrizes e muita documentação para dar a você uma ideia do negócio. Para uma empresa menor, vai ser muito mais difícil. Provavelmente será apenas uma conversa com o proprietário sobre o que eles querem fazer, o que eles estão tentando fazer e entender um pouco dessa maneira. Para mim agora, como um designer de UX mais maduro, velho [RISOS], vou empurrar para trás todas essas coisas porque sei que minha vida é muito difícil, se eu não tenho certeza para quem está projetando. Se eu estiver realmente claro quem é o mercado-alvo, quem é a persona e o que eu deveria estar fazendo, posso derrubar isso claramente, posso entrar em testes muito rapidamente e entregar um incrível produto. Todos os meus problemas ao longo minha carreira, seja como designer gráfico , artista de animações , retocador de fotos ou web designer, todas essas coisas que eu fiz, maioria dos problemas vem de expectativas pouco claras, seja por meio de um breve. É principalmente porque eu gosto de ficar com medo. [RISOS] Fica bom empurrar para trás. Você é, você pode fazer esse trabalho? Você está, ok. Você sai e então percebe que não tem informações suficientes sobre isso. À medida que você se torna mais experiente em Design de UX, você estaria, há um grande buraco no meu entendimento e volte para o cliente cedo e rapidamente para que não seja o dia antes de ser entregue, mas iniciando as conversas com essas coisas, como cuecas, personas e fluxos de tarefas. Uau, isso foi um longo e um pouco longo. Comece a me mostrar : “[RISOS] É como clicar nos botões, Dan.” Faremos isso. Vamos fazer isso a seguir? Acho que podemos estar muito em breve, pelo menos. [RISOS] Próximo vídeo. 7. Projeto do curso 01 - Crie seu próprio breve: Olá a todos. É hora do projeto de classe. Não considere esse dever de casa. É como dever de casa, mas é uma maneira de você seguir este curso, não apenas seguir e assistir a vídeos cegamente fazendo você fazer coisas. O que eu fiz foi ter certeza que todos são um pouco únicos. Em seus arquivos de exercícios, você verá que não há muito lá agora porque estou construindo o curso, mas eles serão algo chamado projetos de classe. Abra isso e ficará algo parecido com isso. Ele lhe dirá o que você precisa fazer para esse projeto de classe em particular. Este é muito fácil. Está gerando seu próprio resumo e persona. Eu criei um site. Bem, a equipe do Bring Your Own Laptop criou um site para você. É chamado de randomprojectgenerator.com. Vá lá e gere seu resumo. Basicamente, quando você estiver aqui, quero que você vá para aquele que diz Adobe XD , insira seu nome. Use seu sobrenome, o nome do seu amigo, o nome do seu animal de estimação, algo para dar à sua empresa um nome único. Entrando no meu. Scott é meu sobrenome, é o que vou usar e, em seguida, insira sua localização. Estou morando em Limerick e depois clicamos em “Gerar Projeto”. Esse é o produto que você vai vender. Estamos no tema da entrega de alimentos. Neste caso, é o queijo de Scott. Você viu no último vídeo que eu fiz, eu já fiz isso e acabei com o chá verde do Scott. Foi isso. O seu será diferente. Será único, exceto o nome e o local onde a empresa está sendo mantida. Está na sua área porque você saberá como a área suportará e será. Mas aqui isso será tudo diferente. Agora, se você gosta, eu não estou fazendo queijo, você pode bater em “Retry”, mas apenas uma vez. Você pode decidir batatas fritas, essa é a que eu quero. Não mais. Você sabe que eu passo e continuo batendo em “Repetir” e encontrando um, use o primeiro ou o segundo. Não acerte na terceira vez. Haverá problemas. Depois de receber o seu resumo, é realmente útil quando você recebe algo sobre o qual você não tem certeza. Se você gosta, eu nunca comi batata frita na minha vida, isso é um ótimo produto para trabalhar, porque você vai ter que realmente entender Sebastian e como ele é em seus 20 e poucos anos e descobrir o que ele gosta como freelancer. Depois de receber seu resumo, faça uma captura ou clique neste “'Download como PNG”, e é com isso que você vai trabalhar junto com este curso. Nós vamos construir as mesmas coisas, mas o que eu não quero fazer é ter todos parecendo o mesmo que eu com chá verde. Vamos acompanhar todos. Você vai escolher imagens, fontes e cores diferentes das minhas porque eu quero que você construa algo ótimo para o seu portfólio no final disso. Isso é só para que, quando você está enviando o dever de casa, nem todos estamos fazendo exatamente a mesma coisa. É um pouco de criatividade lá. Diz fazer isso. Ele diz insira seu nome e localização, salve o resumo no seu computador e nas entregas. Haverá entregas em todos esses. Este é apenas carregar seu JPEG ou sua captura de tela PNG para as tarefas ou projetos ou a seção de comentários deste site. Isso é tudo o que você tem que fazer, nada mais. Vejo você no próximo vídeo. Obtenha seu resumo, fique animado com seu queijo ou seja lá o que for. Veremos você no próximo vídeo. 8. O que é Lo Fi Wireframe vs alta fidelidade no Adobe XD: Olá, todos. Neste vídeo, vamos falar sobre LoFi versus HiFi ou, também conhecido como wireframes versus alta fidelidade ou versões bonitas. Um wireframe é onde vamos começar neste curso e onde você deve começar como designer. Poderia levar alguns minutos para zombar disso. Algumas caixas simples e eu posso colocá-lo nas mãos de alguém para testar e iterar rapidamente o poder do design UX, um MVP, o Produto Mínimo Viável, e obtê-lo e testá-lo antes de você passar idades fazendo todas as coisas em que você acaba gastando meio dia usando [RISOS] ou liderando ou escolhendo imagens. Isso não me dará um teste mais experiente. Esta versão não me dará um resultado de teste melhor e mais rápido do meu usuário do que isso. Isso, super rápido e fácil, faz ajustes enquanto eles estão sentados lá. Também tira muito do quando você está fazendo seus conceitos iniciais, entregando algo assim para o cliente, eles podem usá-lo, eles podem testá-lo, mas eles não voltam com estranho coisas como, “Ei, essa é a fonte errada”, para, “Eu não sei onde está a cor”, porque no início do processo esse não é nosso objetivo é não escolher as cores, é garantir as funcionalidades certas. Vamos acertar o núcleo antes de começarmos a gastar tempo na liderança e no kerning. Cores, elas não gostam ou gostam, você pode ver que teria sido removido o texto. Esta é minha mensagem de marketing para que não estejamos mergulhando em “Oh, não podemos dizer isso”, ou “gostaríamos de chamá-la de outra coisa”. Estamos apenas obtendo a funcionalidade desse trabalho, que é um fluxo de tarefas e o fluxo de tarefas é muito simples. Estamos apenas fazendo essas quatro coisas. Assim que acertarmos a mecânica, poderemos passar o tempo. Ainda é importante, mas não é importante no início. Ignore o pedaço de wireframing do processo por sua conta e risco. Agora, esse é o wireframe que eu fiz. Olhe cantos arredondados extravagantes. [RISOS] Tente manter longe. Espuma chata, cores chatas. Mude para preto e branco, sem cantos arredondados. Este não é o único visual. Vamos dar uma olhada. Cabe a você descobrir o que o trabalho exige. Vai ser super simples, ou será um pouco mais avançado? Ainda mantendo o design fora. Mas você pode dizer a este que está gastando muito mais tempo fazendo com que essa coisa fique bonita. Nem todos os wireframes são criados iguais. Estou dentro para fazer isso rapidamente e sair, a menos que esteja indo no meu portfólio. Então eu vou fazer o wireframe parecer bonito, e comprar bonito Quero dizer algo mais parecido com isso, onde há um pouco mais de design inserido nele, muito mais tempo com liderança e kerning, mas é um peça de portfólio. Apenas tenha isso em mente. Wireframes ou baixa fidelidade, alta fidelidade, e aqui embaixo, esta é minha versão de alta fidelidade ou boa aparência ou visão HiFi. Isso é o que estamos fazendo na classe. Vai ser divertido. [RISOS] Aqui está um exercício divertido. De qualquer forma, é isso. LoFi, HiFi. Vamos para o próximo vídeo. 9. O pranchetas e quão amplo meu site ou aplicativo deve estar no Adobe XD: Ei, todos. Neste vídeo, vamos desenhar quatro retângulos brancos [RISOS], vai ser emocionante. Vamos explorar o que são pranchetas. Falaremos sobre o primeiro design de tablet ou desktop para dispositivos móveis e alguns atalhos básicos de navegação para você ir, mas vamos fazer algumas caixas. Para começar, abra o Adobe XD, e vamos começar com um novo arquivo que lhe dará apenas um arquivo inicial genérico ou você pode escolher uma das predefinições aqui. Só vou te mostrar. Eu clico em “Novo arquivo” e ele usa como padrão o que ele acha que você quer. Ele vai dizer: “Ei, você tem uma página que tem um tamanho de site ”, e você pode ser como, “Não é isso que eu quero”. arquivo feche-o e o que vamos fazer é escolher entre as predefinições. Material móvel, material da web, tamanhos de mídia social, muito design está sendo feito no Adobe XD em vez de talvez algo parecido Illustrator porque as pessoas estão se acostumando com isso. É bem rápido. Muitas vezes você já tem muitas de suas cores e ativos no Adobe XD, então as pessoas estão fazendo muitas coisas de mídia social, trabalho de design no XD. Não há nada de errado com isso, e obviamente você tem um tamanho personalizado que você pode digitar. Agora, vou começar com celular para esta armação de arame, e aqui até você. Vou começar com o iPhone 8; esse tamanho SE, porque é apenas um tamanho realmente genérico no momento. No futuro, alguns desses tamanhos altos ou mais finos, você pode estar assistindo a isso e pode haver um iPhone 50. Apenas faça o Google qual é o tamanho de telefone mais comum e comece a trabalhar com isso. Este aqui é bom para os tamanhos Apple e Android, então vou começar com o iPhone 8. Agora, o que podemos fazer aqui é que podemos clicar no nome na parte superior. Vamos clicar, clicar novamente em. Por aqui, você pode ver isso se ajustar? É contextualmente sensível, o que significa que ele muda dependendo do que você selecionou. Se você precisar alterar a placa de arte, clique nela. Você pode dizer aqui, na verdade, eu preciso que seja esse novo tamanho que tem 400 pixels, um pouco mais amplo. Vou desfazer isso, não é o que eu quero. Desfazer é Editar. Vou usar o Command Z em um Mac, Control Z em um PC para o resto deste curso, mas você provavelmente sabe Desfazer. A outra coisa que você pode fazer é desenhar seu próprio tamanho personalizado. Você entra aqui, é o errado. Você pode clicar nele; clique no nome, clique em “Excluir” no seu teclado e você vai para essa matriz branca genérica; nada de terra, e você pode ir até aqui. Esta é a sua ferramenta de prancha de arte. Sua ferramenta de quadro de arte; clique nela e obtemos todos esses padrões. Mais uma vez aqui eles estão todos dispostos dessa maneira. Há relógios em suas mídias sociais, mas digamos que queremos voltar para o iPhone 8 SE. Aqui vamos nós. Esses são os padrão, você pode simplesmente arrastá-los para fora. Você pode estar projetando algo que precisa ser arrastado para fora. Você pode simplesmente clicar e arrastar essas coisas como quiser. Clique nos nomes na parte superior e você pode excluí-los. Por algum motivo, o meu se abre não muito amplo o suficiente. Agora, apenas uma nota sobre escolher o tamanho, escolher genérico ou escolher o que seu cliente tem. Se seu cliente vai testar essa coisa e ele tiver um tamanho de telefone específico, você pode dizer que ele tem um iPhone 13. Projete esse tamanho porque eles serão capazes de usá-lo facilmente. Mais tarde, quando ele vai para codificação e seu desenvolvedor está construindo mais com sua ajuda com um design responsivo, ele realmente se ajustará a diferentes tamanhos de telefone. Você precisa escolher um tamanho para começar e, quando ele entrar em desenvolvimento, ele se ajustará a diferentes tamanhos de telefone. O que queremos fazer agora é que queremos renomeá-lo. O que podemos fazer é onde ele diz iPhone 8 ou o que quer que você tenha feito sobre ele, clique duas vezes nisso e vamos mudar para este. Esta será minha página homepage/marketing. Vou entrar no meu teclado para que possamos nomear nossas pranchetas. Pranchetas é apenas mais uma palavra de dizer nossa página. Agora você pode vê-los aqui. Se você não pode, você pode estar nessa coisa, ou aquela coisa, ou aquela coisa, então vamos estar nesta opção de camada aqui e isso está me mostrando minhas diferentes pranchetas. Agora vamos criar quatro páginas. Bem antes de seguirmos em frente, quero embaralhar minha página. Não vamos entrar em muitos atalhos no início, mas existem alguns essenciais. Manter pressionada a tecla Barra de espaço lhe dá essa pequena mão, e então você clica e segura e arrasta o mouse. Mantenha pressionada a “Barra de espaço”, clique, segure e arraste porque o que eu quero fazer é clicar na parte superior disso. Eu cliquei em toda a prancheta. Vou usar um Mac, Comando C, Comando V; copie e cole. Em um PC, é Control C, Control V. Clique duas vezes nele aqui, e eu vou preencher meu fluxo de tarefas diferente. Você pode verificar o fluxo de tarefas, está em nossos Arquivos de exercícios aqui. Estamos construindo este: Homepage, Detalhes do produto, Checkout e Confirmação. O próximo será chamado de Detalhes do produto. Copie a pasta. [RISOS] Se você clicar uma vez com sua ferramenta de prancheta ela apenas joga no lugar onde pareceu, então eu vou clicar em “Excluir” no meu teclado. Barra de espaço, [inaudível]. Clique duas vezes aqui. Isso é chamado, não me lembro. [RISOS] Deixe-me verificar, e depois o último. Entramos em muitos atalhos? Ou faça mais um pequeno atalho. Dois antes no modo de espera do curso. Com sua ferramenta de prancheta selecionada, posso arrastar isso como um objeto, como um quadrado. Vou desfazer para movê-lo de volta. Posso manter pressionada minha tecla Option em um Mac, tecla Alt em um PC e simplesmente arrastar outra versão dela. Você pode ver se eu chegar perto disso, há um pouco da magia do XD. Olhe para isso. Você o aproxima daqui. Ele diz: “Você gostaria de se alinhar e gostaria de estar no mesmo espaçamento?” Você é como, “Sim”, mesmo espaçamento. [RISOS] Acho excitante. Nosso último chama-se Confirmação. Eu soletri isso certo? Eu não tenho [RISOS]. Voltarei logo. Estou de volta, não consigo soletrar. [RISOS] Se você já fez algum dos meus outros cursos, você já sabe disso, mas é confirmação. Lá vai você. nossas quatro pranchetas. Eles não se encaixam. Minha técnica de barra de espaço; lembre-se de segurar “Barra de espaço”, clique e arraste. O zoom é outro atalho, o último que prometo. Mantenha pressionada a tecla Command em um Mac, tecla de controle em um PC e pressione menos no teclado para sair. Você provavelmente pode adivinhar como entrar, é mais. Mantenha pressionada “Command” no Mac, “Control” em um PC e pressione mais ou menos. Há placas inteligentes. Agora vamos nos concentrar em dispositivos móveis. Não há razão para você não conseguir pegar sua ferramenta de prancheta e dizer que realmente vou descobrir o tamanho do meu tablet e estou usando o iPad Pro. Vou começar a fazer isso, vou trabalhar no iPad. Você pode decidir , na verdade, eu vou mover isso para cá. Lembre-se de pegar o nome e arrastá-lo. Clique e mova a coisa , e eu poderia fazer a mesma coisa. Posso copiar e colar e criar uma página inicial, Detalhes do produto, Confirmação de checkout e começar a criar o tablet e, em seguida, a versão para desktop. Neste curso, faremos uma versão para desktop, e provavelmente será esperado que você faça uma versão de tablet e desktop para sua maquete, dependendo. Se for um aplicativo para um telefone, então não. Você não precisa de uma versão para desktop. O que estamos fazendo aqui é um site móvel, não um aplicativo. Terá que haver um tablet e uma versão desktop porque queremos que nossos clientes possam pedir nosso queijo ou chá verde do computador, telefone ou do tablet, mas, por enquanto, vamos ficar com o celular. Bem, apenas brevemente, estamos usando o primeiro design móvel. Nós o chamamos de celular primeiro porque vamos projetar e nos esforçar para projetar esse design móvel primeiro e depois adaptá-lo para tablet e desktop. Vamos fazer isso bom para eles, mas estamos projetando dispositivos móveis primeiro porque sabemos que, por meio da pesquisa de usuários, meio de um bom palpite que a maioria das pessoas vai fazer o pedido através do telefone . Estamos projetando primeiro para isso. Se você estiver projetando um aplicativo para desktop e sabe que as pessoas acessam seu site ou este produto via área de trabalho primeiro, faça um primeiro design de desktop. Estarei colocando isso na versão desktop. Quando digo desktop, quero dizer esses aqui; desktop web. Se você não sabe o que projetar, seria muito comum fazer isso aqui; 1366, mas também google. Qual é o tamanho de desktop mais comum no momento? O Google lhe dirá, você pode projetar para isso. A última coisa que vamos fazer é nomeá-lo, caso contrário, teremos sem título. Cara, você vai acabar com muitos untitles. Não se preocupe. Vamos nomeá-lo clicando duas vezes nele no topo aqui. Vamos dar um nome, vou chamar este. Não estou chamando de Checkout, estou chamando de Scott pelo nome do cliente. Scott Tea é o nome do nosso cliente. É assim que eu o nomeio. Você pode nomear tudo o que quiser , exceto chamá-lo de Final. [RISOS] Final V1, V2, completo. Você já fez isso antes [RISOS]. Dê algo agradável e iterativo. Em vez de chamá-lo assim, estou chamando isso de meu Fluxo de Tarefas de Checkout porque é isso que nos pediram para projetar e será V1, A1, ou o que você quiser usar. Quando fazemos mudanças significativas, podemos alterá-lo para V2 e continuar atualizando dessa forma. Não chame isso de Final. Vamos clicar em “Salvar” e estamos fora. Isso vai ser isso. Não vou definir o dever de casa adequado. Eu só quero que você desenhe quatro páginas. Não vou verificar, mas nomeie-o com o nome que você obteve do gerador de projetos aleatórios. Nomeie e tenha suas quatro páginas aqui prontas para o próximo vídeo. Não pule o dever de casa, é assim que você acabará se lembrando disso por mais tempo. Vejo você no próximo vídeo. 10. Trabalhando com tipo em seus wireframes XD: Olá meu amigo. Se você achava que quatro retângulos brancos eram excitantes, você espera por cinco pedaços de carrapatos. [RISOS] Vamos olhar para o básico do tipo. Não vamos entrar nas ervas daninhas. Tudo a ver com o tipo neste vídeo. Vamos conseguir o suficiente para nos levar a ir. Muitas coisas que nem vou explicar porque é como inicializar e sublinhar, clique no botão sublinhado. Isso dará coisas estranhas para o Adobe XD. Observe também que entraremos nas ervas daninhas com elas. Quando digo ervas daninhas, entre nos detalhes do tipo mais tarde no curso. Há outro vídeo chamado Fonte e Texto Nível 2 mais tarde no curso, onde entramos em um pouco mais de detalhes. Eu só quero nos fazer avançar rapidamente e sim, vamos entrar na introdução ao texto neste vídeo. A ferramenta de tipo, é esta aqui, parece um T. maiúsculo Você sabia disso. Atalhos neste curso, você pode ver se você passar o mouse acima de qualquer uma dessas ferramentas, essas e muitas vezes, você aprenderá o atalho. Esse T, você pode ver nos colchetes lá, é para a ferramenta de tipo. V é muito comum, faz você voltar para a ferramenta de seleção aqui. Porque o select começa com V. Mas alguns deles são um pouco mais retângulo alfa. Sabe, isso vai ser círculo, não, será elipse, E para elipse. T para a Ferramenta Type. Há duas maneiras de colocar caixas de texto. Clique uma vez e você receberá uma caixa que continua para sempre. Se você voltar para a Ferramenta Tipo e clicar e arrastar uma caixa para baixo aqui, e se você clicar e arrastar a caixa, ela tem o que é chamado de largura fixa e significa que quando eu digito, ela vai quebrar e desça para a próxima linha. Bom para texto de parágrafo. Muitas cópias, e isso é bom para coisas genéricas, botões e botões [RISOS]. Fazemos muitos botões. Você pode trocá-los. Você tem que selecionar a caixa primeiro então pegue sua ferramenta de seleção, clique na caixa uma vez e você pode ver, na verdade, agora você é largura automática. Agora, quando eu começar a digitar, ele continuará para sempre. O mesmo com este aqui. Selecione-o com sua ferramenta de seleção. Clique nesse cara e diga, na verdade, agora você é altura fixa automática ou altura automática, desculpe. Isso significa que chegará ao fim e depois se romperá. São esses dois. O que precisamos agora é que precisamos de algumas coisas. Vou clicar em excluí-los. Vou pegar meu T para minha ferramenta de tipo, depois clico uma vez. Vamos colocar o logotipo do nosso espaço reservado, então temos o Scott. Na verdade, vou fazer maiúsculas, chá verde Scott, então digite sua versão. O que vamos fazer é pegar minha ferramenta de seção, movê-la para cá. Quando você está projetando, especialmente se a empresa for nova, eles podem não ter um logotipo. Basta digitá-lo, ter apenas uma versão de texto. Não esteja meio tentando projetá-lo nesta fase. A outra coisa é que se a empresa já tiver um logotipo, basta tentar usar uma versão em preto e branco dele, para que você não esteja introduzindo cores nesta fase. wireframes precisam ser simples para testes, rápidos, sem cor e, falando disso, você também não tem permissão para escolher fontes. Sem fontes? Mas não estou pronto para mentir agora, quero fazer fontes. Você começa a fazer fontes mais tarde, quando fizermos nossa versão de alta fidelidade, sobre a qual falaremos mais tarde. Mas nesta fase você quer tirar qualquer design dele. Trata-se de funcionalidade para testes, portanto, mesmo que você realmente goste do script de pincel, você não tem permissão para usá-lo aqui, você tem que escolher algo simples. Em termos de simples, meu é padrão para Helvetica Neue porque estou em um Mac. Mas algo como se você não tem certeza sobre o que é genérico bonito porque Arial, eu nem gosto de Helvetica. Não conte a ninguém. Acho que cometi um pecado de designer, mas Helvetica é chata. Roboto, eu sei que não é tanto [RISOS]. Menos chato, mas é apenas uma fonte muito boa para usar para wireframes, para qualquer coisa, qualquer cópia corporal. É claro, é muito acessível, é gratuito se você não tiver no seu computador agora você pode baixá-lo. É o novo Arial, eu não sei, eu gosto mais. Outros bons são Open Sans é uma fonte genérica muito comum. Open Sans, Source Sans, Source Sans Pro. Tudo isso pode ser encontrado online. Tenho certeza que eles são todos gratuitos, você poderá baixá-los de algum lugar. O que você não quer fazer é quando você começa a fazer isso, testando seus wireframes, que vai fazer muito rapidamente no início, é que você não quer, especialmente quando você tem um cliente e eles são como , oh, não é a fonte corporativa ou hey, não podemos usar isso ou se você adicionou personagem às fontes nesta fase, você pode acabar em conversas com o cliente sobre quais tipos de fontes, este não é o caminho certo, e levará seu tempo para ser rápido. Mantenha isso simples. Escolha apenas uma fonte, você tem um limite de fonte. Você pode brincar com o branco. Isso tem a ver com aqui embaixo, tão negrito, preto negrito. É por isso que eu gosto do Roboto. Roboto. Vamos dar uma olhada. Roboto é realmente útil para, tem muitos desses e você pode realmente conseguir mais para Roboto também. Open Sans também é bastante decente. Em termos de itálico, dilui e escolha alguns médiuns. [RISOS] Eu estava dizendo para não escolher fontes aqui. Eu vou atrás de fontes diferentes e seus pesos diferentes. De qualquer forma. Coloque seu título no topo. Vou escolher Roboto para o meu. Você escolhe o que quiser. Cliquei uma vez e consegui este. Vou adicionar outro pedaço de texto aqui e vou torná-lo uma largura fixa porque esta será minha mensagem de marketing e quero que ela fique dentro desse espaço. Vou digitar, esse é o meu marketing. Ele se lembra da última fonte que você estava usando, então vou ter que mudar isso. Esta é minha mensagem de marketing. Vou selecionar todo o texto, arrastar uma caixa ao redor dele. Vou para Roboto e não vou ficar em negrito. Vou apenas ir para o meio. Continuo dizendo largura fixa. É chamado de altura automática. Este é o chamado tamanho fixo. A Adobe gosta de chamá-lo de diferente em programas diferentes. O segundo, a altura automática, não vou cobrir todas as coisas corretamente, como tamanhos de fonte aqui. Você sabe como escolher o tamanho da fonte, vou escolher 48. Isso é muito grande [RISOS]. Vou centralizá-lo, trabalhar seu caminho através dele. Pequenos ícones dão isso. Este aqui é o espaço entre as letras. Se eu abrir até 20, você pode ver o espaço entre as letras aberto, vou desfazer. Este é o seu espaçamento principal ou entre linhas. No momento, vou abri-la um pouco. Este é o espaço após os parágrafos. Falaremos sobre essas coisas mais tarde. Você pode clicar neles, é terrivelmente difícil. Sublinhado. [RISOS]. A única coisa que você está escolhendo fontes aqui é que você não está destinado a estilizá-las. Mesmo que eu tenha ido e feito um pouco, você está escolhendo tamanhos porque esta é minha principal mensagem de marketing. Este eu talvez queira ser um pouco menor. Vamos descer para 16. Vou torná-lo ousado. Estou tomando decisões agora sobre o quão grande isso deve ser. Isso se resume à legibilidade, como é fácil de ler, talvez problemas de acessibilidade. Vou dizer acessibilidade ao longo deste curso. Nós não o cobrimos em muitos detalhes, mas está garantindo que as pessoas possam realmente lê-lo. Outros botões são grandes o suficiente. Nesse caso, essa mensagem de marketing é grande o suficiente? Totalmente é, mas é grande o suficiente em termos de transmitir minha mensagem de marketing? Agora, você pode gastar muito tempo projetando isso, mas o que acontece quando eu diminuo o zoom? Se você estiver projetando dessa maneira, acabará escolhendo tamanhos de fonte nesse tamanho. Agora, o que você pode pensar está indo, eu vou clicar nisso, vou ir 100%. Perfeito. Isso dependerá de onde ele está sendo exibido. Se eu pegar meu telefone aqui, você não pode me ver, mas eu tenho meu telefone, vou pegá-lo, colocá-lo nos meus monitores agora e é aproximadamente o dobro do tamanho muito grande. Eu sei se eu continuar segurando meu telefone ao lado dele e eu vou comandar menos ou controlar menos. Isso é quase certo. Quando estou fazendo escolhas de design agora, isso é grande o suficiente? Se eu estiver em 75%, sei que estou perto. seu será diferente, o seu pode estar em 100%. Você pode ter que ser muito menor. Depende de suas configurações no monitor. O que é realmente verdade é que você deveria estar testando no dispositivo. Nós vamos fazer isso nesta aula também, não agora, mas vou mostrar como você pode publicar isso em seus telefones. Você pode realmente fazer boas escolhas. Vamos entrar no estádio aqui. Algumas outras coisas para nos levar a ir é se eu copiar e colar texto, então eu o seleciono com minha ferramenta de seleção em um comando Mac C, comando V ou controle C, controle V em um PC, você notará que ele realmente não fez nada. Há duas versões dele, há chá verde Scott lá, há chá verde Scott lá, mas eles estão em cima um do outro, só para você saber. Não os coloca para o lado. Este aqui será chamado de minha foto do produto. Vou ter uma foto aqui em cima. Estamos usando texto como espaço reservado para o momento. Movendo isso para baixo. Você notará também, a, isso está centrado porque fizemos isso antes. Alinhamento à esquerda centralizado. Você notará que no XD, sempre que eu arrasto qualquer coisa usando minha ferramenta de seleção , veja, olhe para isso, ele realmente quer estar no meio da página ou no meio duplo da página. Super útil. Vou colocar isso lá. Agora eu quero enviar mensagens aqui para obter botões, então, em vez de copiar e colar o mesmo truque que fizemos para lembrar de duplicar isso. Quem se lembra do que era? Isso mesmo. Mantenha pressionada a tecla Option em um Mac, tecla Alt em um PC, quando estiver arrastando algo. Você pode duplicá-lo na mesma instância que movê-lo. Este vai ser meu Buy Now. Vou duplicar isso. Este será meu botão Saiba mais. Tudo bem, será isso por enquanto. Outras coisas interessantes que são bastante específicas para o Adobe XD. Vou aumentar o zoom. Vamos dar uma olhada, digamos chá verde aqui em cima. Você tem esse pequeno ponto branco na parte inferior para um fixo, eu continuo chamando de largura fixa. É chamado de altura automática, não é? Caixa de altura automática. Lembre-se daquele que quebra para a próxima linha. Você não tem os mesmos controles, tipo de fazer. Isso tem quatro pontos brancos para que você possa expandi-lo. Este porque clicamos uma vez e é chamado largura automática, tem um ponto e você é como, Oh, o que ele faz? Faz algumas coisas, é um cara estranho. zoom. Posso arrastá-lo para baixo e para cima e ele o redimensiona. Interessante, em vez de usar isso, você pode simplesmente ir, lá vai você. A outra coisa que ele faz é, em vez de clicar nele, assistir a isso. Se eu me mudar para lá. Você vê o ícone mudar? Muito longe, à direita, o ponto mágico. Você pode realmente girá-lo. Você pode fazer todas essas coisas aqui. Você pode apenas dizer que eu preciso que ele seja 45 graus e digite-o. Ou você pode simplesmente estar pairando lá em cima. Isso é o que ele faz. Você pode fazer isso aqui em baixo, selecione neste. Se eu arrastar a parte inferior, ela não fará o tamanho, mas faz a rotação. Aqui vamos nós. Tudo bem. Prometi não entrar nas ervas daninhas desta e entrei um pouco nas ervas daninhas, mas aqui está você. Tudo bem, é isso para texto. Vamos entrar no próximo vídeo. 11. Retângulos e círculos, botões e cantos arredados no Adobe XD: Olá, bem-vindo de volta. Você ainda está aqui, o que é um bom sinal. Neste vídeo, vamos olhar para desenhar retângulos. Vamos adicionar cantos arredondados às bordas, vamos desenhar elipses e alguns dos atalhos serão lançados aqui para navegação também. Não pule se você acha que pode desenhar um retângulo com o melhor deles, e há alguns atalhos de navegação que mostrarei por toda parte. Vamos pular. Para desenhar um retângulo, não surpreendentemente, você aperta a ferramenta retângulo e, em seguida, arrasta-o para fora. Muitas vezes, quando você está fazendo um wireframe, você não coloca as imagens. Só estou colocando um espaço reservado para as imagens. Nesse caso, será uma caixa. Isso nos levará à ordem de camadas porque desenhei uma caixa e, por padrão, todas as caixas têm um preenchimento branco e essa borda cinza. Você pode desativar o preenchimento para ver o texto, mas o que queremos aprender é como jogar com a ordem da camada. Aqui, vou pegar minha ferramenta de seleção e quero movê-la para trás do texto. Há cerca de mil maneiras de fazer isso. Vou mostrar as formas comuns. Só saiba que ao longo deste curso, vou dar a você o mais apropriado em seu nível ou a maneira mais comum. Haverá quatro ou cinco [RISOS] outras formas de fazer as coisas nas divisões do software. Se você descobrir de outra forma e você diz “Por que Dan não me mostrou assim?” Meu mal. [RISOS] Vou tentar dar a você a melhor maneira e/ou a maneira que é apropriada neste nível do curso, e ficaremos mais avançados à medida que avançarmos. Quero mover isso para trás. Provavelmente, a maneira mais fácil é clicar com o botão direito do mouse e dizer, Enviar para trás, e está por trás desse texto. Vou te mostrar algumas outras maneiras. Apenas nos faça trabalhar e fazer coisas no XD, então vou desfazer. O que você pode fazer também é este o formato longo. Aqui em cima eu posso ir para o objeto, acho que é, e depois vá para Organizar e enviá-lo de volta. É a mesma coisa, faz o mesmo trabalho. A outra forma é que vou desfazer é aqui no meu painel de camadas. Você pode ver que há minha página inicial, e essa é a página em que estou trabalhando aqui. Você pode ver que há um retângulo, e ele está em cima da minha foto do produto. Se eu clicar em Manter e arrastar abaixo da minha foto do produto, você já está? Olhe para isso, é por baixo como o Photoshop funciona. A maneira que eu sempre uso é uma maneira de atalho. Vamos desfazer isso, é eu selecioná-lo e você pode dizer os atalhos. Se eu clicar com o botão direito do mouse, você verá que enviá-lo de volta. Lá está ele lá. Qualquer coisa que você esteja usando com bastante frequência, você conhecerá. Nunca uso o Hide o suficiente para saber que o atalho é. Preciso clicar com o botão direito do mouse. Mas eu uso Enviar para trás o tempo todo e Enviar para a frente. No meu caso, este hieróglifos aqui é Comando Shift e o colchete quadrado, e é o colchete para baixo pela sua tecla P. Em um PC, ele será o suporte quadrado Control Shift. Isso é o que [RUÍDO] eu faço. Vamos desfazer isso. Suporte quadrado Command Shift. Para frente para trás, para frente para trás, para frente para trás. Estou usando essa tecla quadrada. [RUÍDO] Muitas maneiras de fazer a mesma coisa. Vamos colocar isso lá. Vamos pegar isso. Você pode alinhar as coisas oficialmente, mas você pode ver que realmente quer estar no meio. É muito útil dessa forma. Mas você pode alinhá-los corretamente, então você seleciona os dois e diz aqui: Align Center, Align This Way. [RISOS] Não funciona se já estiver lá. Você pode ver que posso alinhar esses caras ao centro. Depende de você, mas você descobrirá que, na verdade, é muito doce no Adobe XD. Ele só quer encontrar o meio de tudo sem perguntar. Próximo passo, Cantos arredondados. Estou usando minha ferramenta de seleção, clicando nesta caixa. Talvez seja necessário ampliar porque não poderemos vê-los. Se você ampliar para longe, esses pequenos círculos, eles ainda estão lá. [RISOS] Eles ficam mais difíceis se for um objeto muito pequeno na página. Estou ampliando o suficiente para ver essas coisas. Estes, se eu clicar em “Manter” e arrastá-los cantos arredondados para a direita, veja isso. Você pode decidir. Você pode digitá-los manualmente, então vou desfazer isso. Onde está? [RISOS] Vê o que eu estava fazendo lá? Eu estava arrastando isso e vendo onde ele estava no painel Propriedades. Aí está. [RISOS] Se você precisar que seja exato, você está usando 15, você pode simplesmente digitá-lo, clicar em “Enter”, [RUÍDO] e será 15 para todos eles. É bom quando você quer combiná-los em documentos diferentes. Outra coisa que você pode fazer só porque é interessante, se você pressionar a tecla Option em um Mac, tecla Alt em um PC e clicar e arrastar um deles, e você pode clicar e arrastar um deles de cada vez. [RUÍDO] Posso decidir este e este. Olhe para isso. [RISOS] Vou redefinir todos eles de volta para zero. Você pode ver aqui, ele é dividido em diferente, modo que um está definido para 29. Vamos movê-lo para cá, para que possamos editá-lo bem. Assista isso. Se eu arrastar isso, [RUÍDO] está fazendo todos eles. Mantenha pressionada a tecla Option em um Mac, tecla Alt em um PC. Você pode ver que isso está afetando isso? Vai em torno superior esquerdo, superior direito, canto inferior direito, [RISOS] inferior esquerdo. Eu posso fazer isso. É isso. Redefina-o. Vou voltar a todos e dizer que vocês estão todos em zero. Muito obrigado. Quero cantos arredondados no palco? Eu quero um pouco. [RUÍDO] Só uma pequena dica lá. Eu quero dois desses para os botões, então, em vez de desenhar um retângulo e depois digitar cinco depois, vou usar que mantenha pressionada a tecla Option, a tecla Alt em um PC, só para que sejamos consistentes. Você vê, mesmo quando eu o redimensiono usando minha ferramenta de seleção e apenas arrastando um dos cantos, ele ainda adere a esses cinco. Ele não é dimensionado com ele. Estou fazendo muitas das minhas habilidades de duplicação. Agora, neste caso, eles estão no centro? Provavelmente. Vamos verificar. Talvez não. Lá vai você. [RISOS] Cantos arredondados. Vejamos o último, o círculo, que não é chamado de círculo. Chama-se elipse. Vou selecionar tudo isso usando minha ferramenta de seleção, e apenas movê-lo para baixo, então eu tenho um pouco de espaço. Vou pegar a ferramenta elipse, E para elipse. Tem que me trazer um ponto em que se eu clicar e arrastar, você obtém um oval ou uma elipse. Se você quiser que ele seja um círculo perfeito, mantenha pressionada a tecla Shift enquanto estiver arrastando, e ela bloqueará a altura e a largura. Isso é o mesmo para a ferramenta retângulo. Para a ferramenta retângulo, mantenha pressionada a tecla Shift, quadrado perfeito. [RUÍDO] Tenho um círculo perfeito. Preciso que ele se mude para lá. Eu quero que ele esteja por aí. Quero um símbolo mais nele. Não vamos desenhar uma vantagem. Vamos apenas digitar um plus, então Type Tool, plus. Isso é [RISOS] claramente um sinal de igual. Vou escolher um peso apropriado para isso. Lá vamos nós. Em termos de tamanho, talvez você possa arrastar a parte inferior dela. Parece estranho, mas você realmente usa aquela coisa mais pequena, o pequeno ponto branco, bastante, então, eu acho que isso é um bom peso, [RUÍDO] então vá lá. Outro ponto bom é porque é muito feliz, você diz : “Pare de se encaixar em tudo”. Você pode fechá-lo e usá-lo com sua ferramenta de seleção. Basta usar as teclas de seta. Para baixo no teclado, você tem o para cima para baixo, esquerda-direita, apenas para cima para baixo, esquerda-direita, e o aproxima o suficiente. Amplie todo o caminho. Eu não ia fazer atalhos. Vamos apenas apresentá-los. Eu vou fazer carregamentos para que você se lembre deles. Se você diz: “Cara, esse cara está me assustando com os atalhos”, não se preocupe. [RISOS] Vou continuar dizendo que eles são carregados. Eles vão, eventualmente, entrar em seu cérebro. Um muito útil para ir até o fim, há alguns atalhos. Comando 1, vai para 100%. O comando 2, eu nunca uso, vai para 200%. Comando 0, mantendo pressionado Command em um Mac, é Control em um PC, e pressione 0 mostra tudo, o que provavelmente é o mais útil. Comando 1 e Comando 0, eu uso muito porque isso te tira de um normal. Se você estiver realmente digitando aqui, trabalhando em algo, você pode ir Comando 0 ou Comando 1 para chegar a 100% ou Comando 0 para ver tudo. Vamos ter alguma organização relativa neste curso. Seria muito comum, porém, [RISOS] como designer ter todas as coisas acontecendo por todo o lado. Estou copiando e colando esses. Você acaba com lixo em todos os lugares. Se eu estiver aqui, [RUÍDO] assumindo que eles são a parte errada, se eu pressionar Command or Control em um PC 0, você pode ver que isso me mostra tudo, e é super útil. Adeus todas essas pranchetas e Comando 0 novamente. Lá vai você. Isso é útil. Um pouco mais de navegação para você. É isso. Nós desenhamos alguns retângulos. Nós desenhamos um círculo. Excitação acabou. Vamos para o próximo vídeo. 12. Como usar cores no Adobe XD: Olá a todos. Neste vídeo, veremos o uso de cores no Adobe XD. Vamos acabar com caixas verdes simples, mas falaremos um pouco sobre o que está acontecendo aqui e coisas diferentes para o Adobe XD em termos de cor, além de começaremos com um dos atalhos que eu totalmente esqueci de te mostrar no último vídeo. Começaremos com isso e depois mergulharemos na cor. Vamos começar com nada sobre cor. Vamos fazer um atalho que eu esqueci mais cedo. Lembramos que se você mantiver pressionado Command no Mac, Controlar em um PC e tocar em “1", ele vai para 100%. Você pode ver aqui em cima. Lembre-se da mesma chave em “2", 200%. Quem se lembra de como vemos a coisa toda? É um teste. Isso mesmo. Mantenha pressionada a tecla Command em um Mac, tecla Control em um PC e pressione “0". Mostra tudo. Há uma coisa que eu não compartilhei com você, que eu uso cargas. Vou fingir que deixei até agora, mas acabei de esquecer. Vou clicar no nome de um documento e, em seguida, clicar em “Comando” ou “Controle 3". Isso coloca essa coisa que você selecionou em exibição completa. Esse é apenas mais um pequeno atalho que vou acabar usando e você vai , como você faz isso? Aqui vamos nós, Comando ou Controle 3. Estamos dentro. Vamos adicionar alguma cor. Vou clicar nisso, por padrão, tudo é branco com uma borda cinza. Primeiro de tudo, vou convencê-lo a não usar nenhuma cor, mas você pode ver pela introdução que acabamos usando. Quando você está lidando com armações de arame, você também quer manter coisas como cores fora da conversa. O fio é como fontes. Se você escolher uma variedade de cores, você pode acabar com discussões não sobre a funcionalidade do nosso fluxo de tarefas e como ele funciona, mas pessoas escolhendo coisas como, ei, isso é o verde errado para sua empresa ou eu não gosto de vermelho. O vermelho está realmente se comunicando certo? Essa é uma discussão para mais tarde, depois dos quadros de arame. Mantenha as armações de arame super simples. Eu o selecionei aqui, vou clicar nisso. Agora, você provavelmente já usou um desses antes. Caso contrário, você tem seu controle deslizante de matiz aqui para colocar sua cor no intervalo. Digamos que você queira azul, você obtém esse pequeno ponto na faixa azulada. Então você clica aqui. Você pode clicar uma vez ou muitas vezes, basta clicar e arrastá-lo. Você pode vê-lo se ajustando aqui. Isso obtém sua tonalidade correta, e então, dentro dessa tonalidade, você pode escolher coisas como realmente saturadas, azuis super-duper ou dessaturadas, o que é todo o caminho aqui, branco e variações de luz, escuro, saturado, não saturado. Trabalhe aqui, obtenha algo para o seu particular. Meu conselho é que você deve usar cinza. cinzas estão por toda parte aqui. Pode estar em qualquer controle deslizante de matiz, não importa se você o arrastou todo o caminho, e você não precisa aperfeiçoá-lo. Você acabou de chegar lá, na verdade, ele tem um pouco de verde nele. Mas se você arrastá-lo para o passado e eu estou segurando tecla do mouse para baixo e bater para o lado lá, então eu solto, então está completamente dessaturado e é um cinza que eu posso usar aqui. Se você quiser branco completo, clique em “Manter” e arraste-o para o canto superior esquerdo até passar onde precisa estar. Isso é branco cheio o mesmo com preto lá embaixo. Na verdade, o preto tem dois pontos. Escolha uma cor, apenas uma. Tente não usar mais de um. Use cinza. Cinza é o oficial sem cor, mas seria comum adicionar apenas uma cor. Pode ser a cor da marca em que você está trabalhando, apenas uma. Vou escolher uma cor. Vou escolher laranja. [RISOS] Tem sido muito tempo colhendo laranja. Lá vai você. Essa é a cor que vou escolher. [RISOS] Não passe idades escolhendo cores. Temos nossa cor. A outra coisa é a transparência. É assim que é transparente, como é transparente. Se você quiser digitá-lo manualmente, você pode fazê-lo na parte inferior aqui. Agora, se você não estiver acostumado a usar matiz, saturação e brilho, esse é esse HSB, você pode usar o RGB. A cor real é exatamente a mesma. Não há nada de diferente nisso. Depende da última coisa que você tinha. Você poderia usar o número hexadecimal. Se você é um desenvolvedor web ou um web designer, você pode conhecer essas cores e ser capaz de trabalhar melhor com elas ou pode copiá-las e colá-las de um manual de especificações corporativas, o que quer que funcione aqui. Você pode digitar seus valores RGB. Acabei arrastando isso nesta fase. Se for uma cor que você vai reutilizar, você provavelmente aperta este pequeno botão de mais porque ele fica aqui embaixo e você pode reutilizá-lo mais tarde. O outro é o conta-gotas. Vamos usar a ferramenta conta-gotas corretamente. Clique desligado, clique nesse cara e você fica tipo, eu não quero que seja branco. Existem algumas maneiras de obter a ferramenta conta-gotas. Você pode entrar aqui, clicar nesta versão e, em seguida, você pode vê-la aumentar para que você possa obter bastante precisão? É muito fácil conseguir um grande quadrado aqui, mas você pode fazê-lo dessa maneira. Você pode fechá-lo e, na verdade, isso simplesmente vai direto. Corte na perseguição, dê-me a ferramenta conta-gotas. Boom. O que você pode encontrar ao longo do tempo porque eu vou desfazer isso, é o I no seu teclado, não o conta-gotas como um E-Y-E, a letra I. Se você clicar neste primeiro, eu tenho que selecioná-lo, clique no “I” e , em seguida, clique nisso, é uma maneira bastante comum de fazer as coisas. Muitas maneiras de fazer exatamente a mesma coisa. Agora, antes de irmos, não sei que o XD realmente quer isso. [RISOS] Para ficar um pouco escondido lá, continua inadimplente. Para o pensionista aqui, você pode clicar exatamente nos mesmos recursos. Mais uma vez, você pode ver que há minha coisa reutilizável, cor. Eu poderia torná-lo verde para que ele corresponda ou provavelmente poderia simplesmente desligá-lo. Como desligar a borda, você pode torná-la completamente invisível. Essa é uma maneira, provavelmente não a melhor maneira, é apenas reduzir o tamanho para zero. Não, isso também é uma má maneira, apenas desmarque lá. Ele não tem fronteira. Você, eu vou fazer o mesmo por este aqui. Agora, como faço para selecionar dois deles ao mesmo tempo? Mantenha pressionada a tecla Shift. Eu tenho minha ferramenta de seleção, selecionei você, mantenha pressionado “Shift”, clique nesta outra e ambos estão selecionados. Agora posso dizer que ambos não têm fronteiras. Bom. Entraremos em traços um pouco mais adiante e entraremos em coisas de cores mais extravagantes mais tarde, gradientes, e veremos estilos de cores e essas coisas mais tarde no curso. Mas, por enquanto, essas são as cores 101. Não use cores [RISOS] talvez apenas uma, mas não me deixe pegar você usando duas. Haverá problemas. É isso. Vejo você no próximo vídeo. 13. Os traçados e a aparência no Adobe XD: Olá, todos. Neste vídeo, vou mostrar como fazer linhas e todas as coisas diferentes que você precisa saber sobre o uso dessas bordas ou traços ou linhas, o que você quiser chamá-los. Além disso, também mostrarei como mudar tudo de uma vez porque, no momento, tudo é padrão para essa linha branca com a borda cinza. Vou mostrar como fazer alguns atalhos legais para copiar a aparência disso e combiná-lo aqui. Vamos pular. Adicionar um traço é fácil. Bem, basicamente tudo vem com um derrame. Desenhe um retângulo e olhe, você tem um golpe ao redor do lado de fora. Para ajustar o tamanho do traçado, vamos começar com algo simples, na verdade. Vamos voltar para este retângulo aqui, [NOISE] Comando 3. Amplie a coisa que você selecionou, talvez recue para apenas uma. Com ele selecionado, você pode ver que eu tenho uma borda. Ligue. A borda colorida aqui, normalmente é chamada de traço, mas vou chamá-la traço porque é por isso que eu conheço. Vamos escolher uma cor para ela que possamos ver. O tamanho está lá. Podemos mudá-lo para zero ou podemos aumentar. Agora, você pode simplesmente digitá-lo aqui. Se eu quiser 10 pontos, posso acertar 10 e clicar em Enter. Muitas vezes, é útil para qualquer um desses pequenos campos que tenham digitação, eu posso clicar aqui. Você vê que meu pequeno cursor está piscando, e então eu posso usar as setas para cima e para baixo, então para adicionar. Porque muitas vezes nesta fase de design, você não sabe o que precisa. Você sabe que se você sabe que precisa ser cinco mais tarde, ótimo. Digite-o, mas muitas vezes no início você está como lá. Lá vai você. Vou usar dois. Você pode como outro pouco interessante é se você segurar Shift e usar, ele vai em pedaços de 10. Veja se você segura Shift e usa a seta para cima, [NOISE] 32, [NOISE] 42 e [NOISE] que funciona em tudo. Se eu tenho isso e estou tipo, “Eu só quero que seja um pouco maior,16, escolha minha seta para cima, [RUÍDO] para cima, para cima , para cima, para cima, para cima, para cima, para cima, cima, para cima, para cima, para cima, para cima, para cima, para cima, cima, para cima, para cima, para cima, para cima, para cima, para cima, [RUÍDO] Isso está em qualquer um desses. Você quer movê-lo sobre um pixel? [RUÍDO] Para cima. [RUÍDO] Leva muito tempo. Segure Shift. [RUÍDO] Bam, se move através de cargas. Totalmente destruiu. Não faço ideia do que isso significa ser ou onde deveria estar, mas você tem a ideia. Nossa border/traçado, você pode obviamente fazer traços, então eu quero um espaço de cinco pixels [NOISE], e é padrão para cinco do traço, e depois uma lacuna de cinco, mas você pode ajustar isso. Você pode colocar isso como 15 ou apenas um, [RISOS] cinco. São traços. Vou para zero, [RUÍDO] e uma lacuna de zero. [RUÍDO] Lá vai você. Adicionando traços. Vamos adicionar uma linha ao meio. Agora, vamos usar isso, a ferramenta de linha. Vou clicar nisso, e vou clicar em segurar e arrastar deste lado. Quero, novamente, ficar preto, então vou clicar na cor. Vá assim. Lembre-se, basta arrastar por esse canto. Então, do tamanho, vou subir um, e essa será minha linha preta através dela. Agora, é muito comum talvez não escrever Product Shot. Vou excluir isso, e apenas desenhar uma linha através desta caixa aqui. Uma linha através de uma caixa é código secreto do designer para imagem de espaço reservado que a imagem vai passar. Estamos relutantes em colocar imagens neste modo wireframe. A razão pela qual não queremos usar cores e fontes é que acabamos em uma conversa sobre qual imagem devemos usar. São os portadores de imagem certos? Nós só queremos um wireframe muito difícil e rápido para ser assinado pelo cliente ou fazer alguns testes com apenas alguns testes rápidos básicos reais, então vamos colocar uma imagem de espaço reservado aqui. Agora, uma coisa pela qual você vai ficar louco é toda vez que você desenhar uma linha, no momento, você não pode alterar os padrões. Cara, isso me mata sobre o XD, mas ei, é o que temos. Você pode, no futuro, ver se há uma maneira de mudar os padrões, mas no momento, a maneira fácil de se arredondar é fazer uma de algumas coisas. Um é apenas duplicar. Basta ver esta linha aqui. Eu poderia pegá-lo, duplicá-lo, e posso girá-lo. Agora, veja esse pequeno ponto aqui. Onde ele está? Vamos lá. Ele não faz nada. Você pode arrastá-lo e tentar alinhá-lo ou pode ver aqui? É um reflexo. Há um reflexo horizontal e vertical, e você pode fazer isso para duplicá-lo. Outra boa maneira é algo chamado Copiar e Colar Propriedades. Vou excluir esse. Este aqui, esta linha aqui, [RUÍDO] tem o que eu preciso. Eu posso usar apenas meu atalho, Comando C em um Mac, Controle C em um PC, apenas cópia antiga normal. Em vez de apenas colar, [RUÍDO] e depois movê-lo e virá-lo, [RUÍDO] o que vamos fazer é excluir isso, é que copiamos. Ótimo clicar nessa outra coisa. Esse é esse que está errado, tamanho errado, cor errada, e há uma opção aqui, diz: Editar, Colar aparência. Você aprenderá esse atalho eventualmente, e isso significa que você pode copiar e colar aparência. [RUÍDO] Ainda o copiamos. Posso clicar em você. Como seleciono mais de um? Isso mesmo, segure Shift e clique em ambos. Em seguida, usando meu doce atalho em um Mac, é Command Option V, em um PC, é Control Alt V, ou você pode ir até o menu Editar, [NOISE] e ver isso. Não importa lembre-se que o traço era preto, e não importa se o traço estava nisso ou se está nos botões. Você pode selecionar um monte de coisas e aplicar essa aparência. Isso faz sentido? [RUÍDO] Estou recebendo muitos detalhes muito cedo no curso? Oh, bem. A outra coisa é que estamos aqui agora, então o que você pode fazer é dizer: “Na verdade, eu gostei disso, mas acabei pegando preto porque tenho permissão para usar uma cor.” Mas digamos que eu tenho algo aqui, digite ferramenta outra coisa, e é alguma outra fonte. É isso, e é 10 pontos, e é a cor errada. Você pode fazer a mesma coisa. Selecione-o, vá para copiar, [NOISE] apenas cópia antiga regular e, em seguida, selecione esta. Você pode ir para editar ou usar o atalho ou clicar com o botão direito do mouse nele. Lembre-se, muitas maneiras para o mesmo lugar. Olhe para isso. Ele faz isso para fontes, bem como retângulos, preenchimentos, bordas ao redor das fontes externas, copiar e colar aparência. Essas são minhas linhas lá. Tenho alguns traços lá. Vejamos alguns outros traços. Vamos colocar esse pequeno menu de hambúrguer no canto superior direito. Vou ampliar um pouco, [RUÍDO] para que possamos ver o que estou fazendo. [NOISE] Lembre-se que é Command Plus ou Control Plus em um PC. Vou pegar minha pequena ferramenta de linha, e eu desenho uma linha, coisa cinza sangrenta [RISOS] que é um pixel. Não importa. Vou voltar à minha ferramenta de seleção, e preciso de três delas. Uma coisa que acabei de passar por lá é, eu pego a ferramenta de linha. Se você clicar e arrastar para fora, provavelmente chegará perto de ser direto. Não é [RISO]. Como fizemos antes, lembre-se com a ferramenta retângulo ou a ferramenta elipse, se eu segurar Shift pressionado, ela a coloca em uma altura e largura perfeitas. [RUÍDO] E para a ferramenta elipse, mantenha pressionada a tecla Shift, altura e largura perfeitas. Essa mesma ferramenta [NOISE] ao desenhar uma linha a tornará reta. Vamos excluir todo esse lixo eletrônico, segure a ferramenta de linha, [NOISE] e, em seguida, clique em segurar e arraste. Se eu segurar Shift, assistir, encaixar, ele quer ir direto bem. Uma vez que ele se trava em graus diferentes como diferentes. São 90 graus? Quarenta e cinco graus. Lá, lá, ali, ali, lá. Estou segurando o turno o tempo todo. Não vou soltar meu mouse, e posso entender algo direito. Lá vai você. Vou colocá-los em posição. Vou dizer duplicado U. Estou usando meu Alt em um PC arrastar ou Option em um PC arrastar. Vou fazer outro. O que você notará é que você pode ver tudo o que diz: “Você quer que isso seja exatamente 11 pixels como o acima?” Eu sou tipo, “Sim, eu sei. Bom trabalho.” Este será meu pequeno menu de hambúrguer ou sanduíche de navegação ou eu não sei, ícone de navegação móvel. quer que você queira chamá-lo, essas pequenas linhas listradas. Isso vai me permitir fazer algumas coisas. Primeiro de tudo, vou usar meu tamanho. Para mim, era cerca de 75% era aproximadamente do tamanho certo no meu telefone em comparação com minha tela. A maioria das pessoas chama de menu hambúrguer. Eu chamo de sanduíche de navegação. Eu ouvi isso mais cedo e ficou comigo. Eu posso ser o único a chamá-lo de sanduíche de navegação, mas aqui está você. Você está olhando para esse tamanho, você diz : “Este traço, bem, é muito baixo. Posso ir aqui. Vou para o tamanho do traçado. Isso é certo? Sim. Combina com tudo o resto que estou fazendo. Talvez mais um. Isso é muito grande, mas novamente, lembre-se, você deve estar testando em seu telefone. Mas vou ampliar, Command ou Control 3 para estar na coisa que você selecionou. Amplie bem, mas muito perto. Vou retroceder um pouco porque quero mostrar algumas outras coisas. Vamos escolher preto e também selecionar esses caras e essas opções aqui. Isso acontece. Infelizmente, temos esse nome primeiro. Esse é o padrão. É aí que a linha termina e chega até o fim. A próxima é a tampa redonda. Olhe para isso. Sua linha é longa, mas circula no final. Você pode ver o que está acontecendo. [RISOS] Há a extremidade quadrada também. Há momentos em que você usa todos eles, principalmente basta usar os dois primeiros. Vou usar bonés arredondados porque parece bonito e combina com meus cantos arredondados. Estou começando a entrar no design de adição onde deveríamos estar apenas mantendo isso simples para nossa navegação. [RUÍDO] Mas ei, você não é o chefe de mim. Sou o chefe, e posso decidir colocar cantos arredondados se eu quiser. Você pode ver lá que parece muito grosso, mas vamos voltar para 75, e meu computador parece do tamanho certo. O seu pode ser 100%, então ainda parece um pouco grande. Agora, você pode ajustar todos eles. [RUÍDO] Posso selecionar todos eles, e simplesmente ir assim. [RUÍDO] Não há tamanho oficial, [RUÍDO], mas você pode ir verificar ícones de outra pessoa se você estiver [RISOS] achando muito difícil desenhar três linhas que se parecem com um menu de navegação normal real. Vá e verifique as outras pessoas online o que elas usaram. Outra coisa enquanto estamos aqui é que estou aderindo às linhas. As linhas são bastante comuns, mas na verdade, seria comum colocar um ícone aqui em vez dessas linhas. Faremos ícones mais tarde no curso, mas eu queria, enquanto estamos aqui falando sobre linhas e imagens de espaço reservado, pesquisei no Google, lá está lá. Seria comum colocar um ícone como este. Você não precisa desenhar. Mostrarei mais tarde como obter a maioria deles gratuitamente de lugares, [NOISE], mas você pode se livrar dessas linhas e despejar esse ícone lá dentro. Isso é tudo o que tenho que falar sobre traços. Sim, vou fazer com que esses textos correspondam. Vou selecionar todos eles segurando minha tecla Shift, e dizer: “Você, meu amigo, de novo, em preto.” Porque vou consertar isso. Na verdade, vou selecionar isso, voltar, copiar, U Command Option V em um Mac, Control Option V em um PC. O que eu realmente poderia fazer é trazê-lo para a frente. Há muitas maneiras, você usa da maneira que você gosta. Sou um nerd de atalho, então colchetes do Command Shift para a frente. Oh, não. [RISOS] O texto está por trás disso. Você para a frente. Você está lá atrás. Lá vamos nós. Esse é um ponto interessante. Digamos que eu queira mover este de volta, eu queria movê-lo para trás disso, mas não isso. Você pode ter visto lá dentro. Posso selecionar isso em vez de dizer com o botão direito do mouse, Enviar para trás, que fica por trás de tudo. Você diz: “Não, logo atrás deste círculo.” [RUÍDO] Você pode dizer enviá-lo para trás. Lá vai você. Vamos voltar apenas um nível. Você pode retroceder algumas vezes dependendo de [NOISE] onde você precisa de sua ordem de camada. Mais uma vez, preto, [RUÍDO] e em algum lugar assim. [RUÍDO] É isso. Vamos para o próximo vídeo. 14. Projeto do curso 02 - Wireframe: Olá a todos, é hora do projeto de aula, um pouco maior para fazer. Na verdade, antes de seguir em frente, se você é como se eu não estivesse fazendo o dever de casa, e eu estou pulando. Antes de fazer isso, antes de eu entrar no meu discurso sobre por que você deve fazer sua lição de casa, há realmente algumas coisas úteis no final do vídeo, então se você vai pular impertinente, mas você não pode pular para o fim porque falaremos sobre como vou deixar as páginas mais longas e triângulos e outras coisas. Mas para aqueles de vocês que estão pensando, eu farei a lição de casa mais tarde depois de assistir aos vídeos, ei, você não vai porque ninguém faz, e é ótimo praticar o que você aprendeu e isso realmente ajuda, ele fica com você por mais de um dia após este vídeo. Faça isso e o que eu adoraria ver é o seu projeto no final disso, o que você faz com isso porque estamos usando nosso próprio gerador de projetos aleatórios, ele será único para você, então esse é o meu discurso. Vamos continuar. Você deve ser capaz de fazer tudo aqui. Há alguns tipos, isso é apenas um retângulo com um preenchimento branco e olhar e nada extravagante acontecendo. Essas coisas, esses botões de opção, não são botões de opção, são apenas dois círculos. Não precisa se parecer exatamente com a minha, mas obter a estrutura áspera da mesma forma, porque ao longo deste curso eu quero poder levá-lo nessa jornada, mas eu gostaria que você construísse algo é exclusivo para o seu próprio portfólio. Então, em vez de fazer o Scott Green Tea, use o que estava no resumo que você obteve do randomprojectgenerator.com, caso o seu possa ser mel Smith, ou chá borbulhante, ou seja lá o que for era. Victoria me disse que o chá borbulhante era legal e moderno. É por isso que ele está lá como uma opção. Não sei o que é isso, mas estou tentando ser legal e moderno. Use seu próprio nome. Você pode escolher sua própria cor, escolher sua própria fonte, mas mantenha-a muito simples e veja se você pode construir essa coisa. Há quatro páginas. Esses são seus requisitos reais. Quero que você construa esse wireframe. Se você não consegue vê-lo, você pode pausar o vídeo por um segundo atrás, pausar isso aqui, ou em seus arquivos de exercícios, eu fiz um PDF dele lá dentro do qual você pode copiar se não puder veja a versão pequena. É chamado de exemplo wireframe, então quatro páginas. Essas são as quatro páginas, sua própria cor, sua própria fonte. Quando terminar, faça uma captura de tela do que você está fazendo e faça o upload aqui para os comentários ou para os exercícios nos projetos, ou para os exercícios nos projetos dependendo de onde você está nos observando. Se você nunca fez uma captura de tela antes, em um Mac, eu sei o que é. Pressionei Command Shift 4 e, em seguida, posso arrastar uma caixa ao redor disso, e na sua área de trabalho com captura de tela que você pode carregar. Se você estiver em um PC, não tenho certeza. Acho que você faz uma tela de impressão e depois a cola em algo, mas o Google como fazer uma captura de tela. Você pode tirar uma foto com o telefone da tela, tudo bem. Essas coisas, há duas coisas que podem lhe dar um pequeno soluço, é como você desenha uma flecha? Você não pode desenhar setas no XD. Tenho vergonha de dizer no momento. É só a, veja aqui, a ferramenta de polígono e eu desenhei um triângulo, eu o rodei ao redor. Como eu o rodei? Você pode usar essa coisa ou pode o mouse nos cantos e arrastá-la e é uma coisa muito boa que eu provavelmente deveria mencionar. Você pode simplesmente passar o mouse ao redor das bordas e girá-las ou digitá-las lá. A outra coisa, a coisa realmente importante, a razão pela qual você ouve todo esse vídeo, mesmo que você não esteja fazendo o dever de casa impertinente, é isso, há uma página extra longa aqui. Se você tem uma página que não se encaixa bem como a minha não, você pode clicar no nome da página e simplesmente arrastá-la para maior. Então você obtém essa linha pontilhada. Ignore isso por enquanto. Não o mova, você pode movê-lo, mas não o mova ainda. Falaremos sobre isso em um curso posterior, mas você pode simplesmente clicar no nome da página ou no quadro de arte e apenas torná-lo mais longo conforme você precisa, e mostraremos como fazer rolagem e coisas mais tarde. Você pode espremer tudo lá em cima. Não sei por que fiz isso. Olhe, há muito espaço. [RISOS] Mas é isso. Esse é o seu dever de casa. Não vamos chamá-lo de lição de casa, exercícios divertidos para ajudar a praticar e aprender coisas. Mas, de qualquer forma, é isso. Vejo você no próximo vídeo depois de você ter feito isso. 15. Ícones gratuitos para seus projetos de UX/UI do Adobe XD: Oi lá. Neste vídeo, vamos ver onde obter ícones gratuitos para sua maquete de wire-frame, como escolhê-los, alguma introdução a alguns dos licenciamentos em torno de alguns dos gratuitos e em termos de qual formato você deve encontrar seus ícones. Nesse caso, PNG versus SVGs. Tudo bem, vamos pular . Encontrando ícones gratuitos. Especialmente neste estágio wire-frame, não queremos estar sentados aqui projetando nossos próprios ícones que você pode fazer totalmente. O que queremos fazer é sair e obter menos espaços reservados. Há muitos lugares para encontrar ícones gratuitos online. Vou te mostrar iconfinder.com, eu realmente gosto disso. Mas se isso não estiver mais aqui ou a qualidade não estiver à altura dos seus padrões, você pode usar o que estamos aprendendo aqui sobre a descoberta gratuita de ícones para qualquer site. Nesse caso, vou procurar um ícone de conta. Eu quero aquela pequena coisa de pessoa em que você clica quando quiser entrar em seus detalhes. Nesta fase, estou procurando coisas grátis. Eles também têm coisas pagas incríveis , o que vale a pena. Mas no momento estou procurando de graça porque estou apenas dando esse mock-up para cima e para fora. O que também estou procurando como licenciamento. Essa é a parte importante. Há uso comercial, algo chamado licença Creative Commons. Você precisará verificar o que está usando. Nesse caso, quero usar não apenas o uso comercial porque esse uso comercial requer um back-link. Quero aquele que diz que não é necessário back-link. Você pode ver aqui, uso comercial e não requer nenhum tipo de back-link para o criador original. Disse, mas não é para o que estou pronto agora. Eu só preciso de algumas coisas rápidas para uma maquete ou pelo menos meu wire-frame. Mas isso reduz o que está disponível. Nesse caso, há muito para eu começar. Algo que parece uma coisa pessoal que vou buscar. Agora, [RISOS] só eu e a nota editada de que eu estava olhando a tela por cerca de dois minutos. Espero que o editor tenha cortado essa seção [RISOS]. Estou pegando rapidamente um, mas não escolhi. Passei idades escolhendo um. Obviamente, estamos tentando evitar coisas com estilo muito alto porque isso vai começar uma conversa sobre quais cores, isso é realmente o que queremos? Queremos algo genérico, mas eu queria que fosse legal. Isso nos leva a uma das grandes partes. Além do licenciamento, o que você precisa fazer é formatar. PNG é algo que as pessoas já conhecem e amam, e SVG você pode ou não saber já. Vamos olhar para os dois. Vou baixar este PNG de 48 pixels de tamanho adequado PNG de 48 pixels de tamanho e vou baixar esta versão SVG e mostrarei a diferença ali mesmo. Tudo bem, então eu baixei a versão PNG e a versão SVG. Como os colocamos? Esse é um bom ponto. No XD, há o longo caminho importação de arquivos ou o atalho lá. Você pode encontrá-los. Lá estão eles lá. Você pode trazer mais de um segurando “Shift” e clicando em dois deles. Vou trazer os dois . Lá estão eles. Aqui estão nossos dois garotinhos. O que queremos fazer agora é dar uma olhada neles. Comande três para ampliá-los. Então voltei a um pouco porque isso é um pouco próximo. Você pode ver a diferença. PNG ruim, SVG bom. PNGs não são necessariamente ruins, eu exagerei isso baixando um pequeno, mas é composto por esses pequenos cubos chamados pixels enquanto SVG significa Scalable Vector Graphic. Você pode conhecer a palavra vetor. O bom do vetor é quando tento escalá-lo, mantenha pressionado “Shift” para bloquear a proporção. Posso torná-lo agradável e grande e não perde qualidade. É realmente grande, pode ser tão grande quanto um ônibus, quanto uma montanha. No tamanho do arquivo ainda será relativamente pequeno e ainda terá ótimas bordas nítidas. Enquanto isso, mesmo se você baixar um maior, então vamos voltar para o site. Eu baixei o baixo. Vamos baixar o realmente grande. Vamos dar uma olhada nisso. Acabei baixar a versão grande. A diferença é que ficará ótimo e mostrarei a você a maneira como eu importo coisas para o XD. É a forma não oficial. O que eu faço é, eu não uso todos os atalhos. Sou preguiçoso, não sei. Eu o arrasto. Isso funciona [RISOS]. Uau, é grande. É isso. Eu baixei a versão realmente grande e você seria como, sim, isso é de boa qualidade. O problema é que o trade-off é o tamanho do arquivo. Posso verificar isso nos meus arquivos de exercícios e lá usamos isso. Estes são os dois PNGs, este é o pequeno e são dois kilobytes, do mesmo tamanho que o SVG. Enquanto a versão grande, veja o quão grande ela é, muito grande em termos de tamanhos da web. Múltiplos maiores que o PNG menor. PNG não está bem, não escalável. A outra grande coisa que você não pode fazer com PNG é que você não pode colorir. Vamos voltar para aqui. “Command” ou “Ctrl+3" [NOISE ] diminua um pouco. Parece estranho, é assim que eu faço de qualquer maneira. Você amplia o quanto você gosta. Essa coisa aqui não pode ser colorida. Você pode levá-lo para o Photoshop e colori-lo. Enquanto isso você pode clicar nele e dizer, eu quero que você seja a cor que eu gosto. SVGs são bons. Certifique-se de ter a licença para usá-los. Não tenha medo de pagar por eles. Eu não quero dizer que você não deve pagar por eles, mas nesta fase, para este wire-frame, eu não estou nessa fase, não estamos nos comprometendo com nenhum deles. Só precisamos deles aqui para alguns testes básicos e para aprovação do cliente, esse tipo de coisa. A última coisa enquanto estamos colocando em ícones SVG versus PNG é, isso é editável. Este aqui não pode ser alterado. Você não pode movê-lo. Faremos isso em nosso vídeo posterior em apenas um ou dois deles. Mas eu quero jogá-lo aqui também. Eu cliquei duas vezes nele e você pode movê-lo. Ei, essa é a outra vantagem para SVGs. Corte de salto. Voltando aqui porque há outra coisa importante encontrar para seus ícones que eu esqueci de mencionar quando estava aqui. Encontramos esse ícone como conta. Bem, muitas vezes, toda vez que você vai precisar de mais do que apenas um ícone. Se você está procurando ícones gratuitos, antes de se comprometer, dê uma olhada neles. Neste site específico, você pode clicar no ícone real e entrar nele. Você pode encontrar aqui embaixo, olhe, é parte de um pacote maior. O bom é que, então eu posso ir e encontrar porque vou precisar, não gosto do grande menu, mas do carrinho de compras que eu gosto. Existe uma alternativa para a conta. Há um plus e todos os outros tipos de ícones que eu provavelmente vou precisar no mesmo tipo. Isso é bastante útil quando você está fazendo uma escolha é encontrar um que não seja apenas um guarda solitário sozinho. Ele precisa fazer parte de um grupo maior para facilitar sua vida. Mas também esteja preparado para que haverá ícones que não fazem parte de cada pacote que você precisará fazer sozinho e às vezes acaba recriando todo o conjunto eventualmente porque você quer uma mudança de estilo e não há o suficiente nesse estilo ou é fora da marca. [RISOS] Comece com ícones gratuitos neste estágio de enquadramento de fio, mas esteja preparado para fazer o seu próprio mais tarde. Nós também faremos neste curso. Vou te mostrar como. É isso para ícones gratuitos. A última coisa que eu quero jogar lá é que eles não precisam ser livres. Você pode estar pagando por isso especialmente se estiver trabalhando em uma empresa, o dinheiro que você está pagando por ícones é bastante baixo e suporta as pessoas que o fazem. O que eu costumo fazer é ter uma assinatura de alguns sites de ações. estoque é o material pré-fabricado que é pago. Eu pago uma assinatura mensal para dois lugares, estranhamente, Adobe Stock e Envato Elements. Ambos os lugares têm sabores diferentes de coisas boas. Eu posso ir lá e verificar e em vez de ter que jogar porque você está olhando para coisas grátis e não obtém o ícone que você realmente quer. Tenho assinaturas desses sites. Eu pago mensalmente e isso significa que não me custa mais conseguir um ótimo conjunto de ícones que talvez esportes, os artistas/designers que os tornam [inaudíveis] Isso é isso para ícones gratuitos. Vejo você no próximo vídeo. 16. Como encontrar e usar kits de UI existentes no Adobe XD: Oi lá. Neste vídeo, vamos ver algo chamado kits de interface do usuário. Eles têm outros nomes e eu os descreverei em um segundo, mas basicamente em vez de procurar conjuntos de ícones individuais é olhar para XD de outras pessoas existentes arquivos XD de outras pessoas existentes que você pode abrir e emprestar ícones de. Tenho alguns aqui que vamos olhar, e mostrarei o que procurar, como obtê-los e podemos usá-los para o nosso projeto. Provavelmente, o termo mais fácil para o Google é kits de interface do XD. Kits é a palavra que queremos, o kit pré-fabricado e ele terá ícones nele. Mas também terá outros elementos que talvez precisemos. Vamos dar uma olhada rápida nos que baixei. Este aqui, você pode ver que ele tem botões prontos para uso. Há um pouco estilizado demais, mas poderíamos diminuir o estilo deles. Mas há um kit grande e este mais um download. Todos os tipos de coisas que você gosta. Sim, preciso de uma coisa de carregamento e preciso de um espaço reservado de imagem. Eu não gosto desse. Preciso de um coração. Lá vai você. Todas as caixas de seleção, tudo isso, onde você foi, meus botões de opção com os quais [RISOS] você pode precisar de ajuda. É difícil saber como deve ser exatamente. Kits de interface do usuário é uma palavra. Outra palavra que você pode estar procurando é a folha de adesivos. Isso é o que as pessoas às vezes chamam também, elas chamam isso de folha de adesivos. É assim. Esta é uma folha de adesivos. Todo tipo de coisas em todo o lugar para ajudá-lo a construir coisas. Outro é um sistema de design. Agora, o sistema de design é bastante grande. Falaremos sobre sistemas de design no final do curso. É o que uma empresa maior produzirá para ajudar a descrever o que está construindo quando é uma grande empresa. Mas também você pode usar esse termo para encontrar coisas, mesmo que você só queira roubar ícones dele. Roubar é a palavra errada, apropriada, emprestar. Como este aqui está o kit de interface do usuário do Google e o Google Android são específicos. Se você está tentando zombar de um telefone e usar todos os botões que estão naturalmente em um telefone, é bom usar isso porque parece que ele em vez de você tentar copiar como ele pode parecer em termos de interface do usuário, você pode usar esses diálogos e ele corresponderá às fontes e ao posicionamento e estilo corretos. Esqueça que eu disse a palavra roubar, apropriação é melhor. Kits de interface do usuário, folhas de adesivos , sistemas de design, é o que estamos procurando. O que acabamos recebendo é que fiz essa pesquisa aqui e acabei com esses resultados. Eles podem ser complicados. Por que eles são complicados? Encontrar coisas grátis online e muitas pessoas estão fazendo coisas boas e ruins. Às vezes você acaba indo e encontrando essa pepita. Ótimo, encontrei este site. Eu gosto do XD Guru, eles são muito bons e eles têm kits de interface do usuário gratuitos. Ótimo, este que estamos procurando e provavelmente será XD porque se chama XD Guru. Mas alguns dos links não funcionam mais. Aquele lá diz livre, mas acabei de perseguir esse [RISOS] e não é mais grátis, são $5. Eu não acho que essa pessoa deva vendê-lo de graça, diz grátis e então não é o que é decepcionante. Além disso, muitos deles se inscreveram para receber e-mails. São pessoas pagas por isso. Isso é o que eu quero que você diga é que às vezes é um pouco spam dessa forma onde você tem um download e login e inscreva gratuitamente algo ou melhor, é tudo gratuito, mas você vai para inserir [RISOS] muitos detalhes pessoais. Alguns desses funcionam, alguns deles não. O que eu costumo fazer é a Adobe. Eu tenho isso aqui. Isso mudará. Eles parecem mudar isso. Eles podem atualizá-lo. Adobe.com/products/XD/Features/UI-kits.html. Na verdade, vou postar esse link agora nos arquivos de exercícios. Vou chamá-lo de link do kit XD UI [RISOS]. Procure esse arquivo. Talvez você acabe aqui e seja legal porque ele tem o kit para a Apple. Eu mostrei o kit que temos para, eles chamam de Google Material. Google Material é o nome de todo o sistema de design para dispositivos Android. Sou uma pessoa Android, é por isso que temos este. Se você é uma pessoa da Apple, baixe o kit Apple, você acabará com um estilo semelhante aqui, as coisas serão bem definidas que você pode pegar. Também aqui abaixo, há um monte de outros, esses. Os kits são apenas link direto. Para assinar sua privacidade, basta fazer o download deles. Eu baixei um deles. Qual deles? Acho que baixei o kit de interface desenhado à mão em seus arquivos de exercícios para que você possa dar uma olhada nele. Onde está? Em nossos arquivos de exercícios. Eu tenho esses dois kits de interface apenas para economizar algum tempo se você quiser olhar para um. Mas este é o material do Google, lembre-se do Android, e há a interface desenhada à mão. Em um arquivo, basta clicar duas vezes neles e abri-los, eles abrem no Adobe XD. Vejamos o outro desenhado à mão. Isso é o que este é. Olha, é um monte de ícones. É apenas uma boa maneira de começar a encontrar os kits de interface do usuário de outras pessoas. Já é um XD. Não são apenas ícones, podem ser coisas como botões e você pode construir seu wireframe completo com tudo isso. Como você faz o zoom para ver? Alguém se lembra? Você se lembra. Comando ou controle zero. Olhe para isso, está bem completo e , em seguida, como você o usa? Você copia e cola. Às vezes, eles podem ser agrupados. Vamos olhar para o agrupamento e alguns outros bits em um segundo. Mas vamos dizer que você realmente quer essa coisa. Esse é o ícone no meio. Você pode ver que faz parte de tudo isso. Posso clicar com o botão direito do mouse e dizer, vamos desagrupar. Ainda agrupado. [RISOS] Desagrupe novamente. Agora está tudo em pedaços. Vou selecionar esses dois, manter pressionado o shift e clicar nestes dois. [RISOS] Deixo isso lá, porque é isso que acontece. Eles são agrupados e às vezes, para separá-los, você precisa desagrupá-los algumas vezes, clicar com a tecla Shift e juntá-los de volta. Vou selecionar ambos, agrupá-los novamente e copiá-lo. Mude para meu outro projeto e cole-o. Lá está lá. Você pode usar isso em vez da minha pequena cruz e eu vou dizer que você é preto e eu vou me livrar dessas linhas. Lá vamos nós. efeitos sonoros duradouros. Os kits de interface do usuário são úteis. Construa coisas rapidamente com um certo estilo, essas coisas esboçadas e desenhadas à mão, eu estaria relutante em usar o estilo desenhado à mão. Por quê? Porque é certo haver um ícone que eu não tenho, isso não está aqui que terá que fazer e eu vou ter que tentar fazer com que pareça todo desenhado à mão. Vou acabar gastando idades para algo que não ajudará meu processo de teste de experiência do usuário quando as pessoas estiverem verificando isso e garantindo que meu wireframe funcione. Eles não vão se importar que seja um wrigley esboçado à mão, mas isso vai me causar problemas realmente fazendo isso. Quando digo isso, provavelmente faria , já fiz isso antes, porque parece legal, esboçado. É isso. Você está procurando kits de interface do usuário, folhas de adesivos ou sistemas de design especialmente para o Adobe XD. Abra-os e comece a apropriar peças. É isso. Vejo você no próximo vídeo. 17. Os grupos e a edição de ícones no Adobe XD: Olá, todos. Este vídeo é sobre as coisas estranhas que acontecem no Adobe XD. O problema é que quando você autodidata ou esta parte do curso, é que há algumas coisas que farão sentido mais tarde no final quando somos incríveis e sabemos de tudo, mas que nos pegará muito cedo. Eu quero descrevê-los aqui agora e se você chegar ao final deste vídeo e você estiver tipo, eu entendi, mas não realmente, isso é de propósito, apresentá-lo cedo e vamos cobri-lo repetidas vezes durante todo o curso e será super fácil no final. As primeiras coisas primeiro, é este pequeno painel aqui. Temos 1, 2 e 3. Vamos cobrir os plugins em um pouco. Vamos ver como está um pouquinho aqui, porque isso nos mostrará alguns outros problemas e, em seguida, há esse painel de camadas no qual passaremos a maior parte do nosso tempo. Temos uma confirmação. Veja estas são pranchetas, páginas AKA. Há nosso marketing de página inicial que eu gosto no topo e detalhes do produto que eu gosto em ordem cronológica também. Não há drama real lá, então essas são as páginas. O que é esse pasteboard? É porque você pode não tê-lo. Assista isso. Se eu excluir isso, volto para minhas pranchetas. Bem, não tenho nada selecionado. Olha, sem pasteboard. Se eu desfazer isso, olha, nós temos esse quadro de pasteboard. É como sua própria página, tudo por aqui. Você sempre terá pasteboard. Ninguém nunca está tão arrumado. As coisas acabam tudo em uma página, mesmo com esses trabalhos loucos por todo o lado. Se você fizer isso, não se preocupe, eu faço isso também. Isso é essa coisa estranha de pasteboard. Nada muito estranho nisso. Fica estranho quando você faz isso, meio ligado, meio fora. Olhe para isso. Às vezes você pode ter algo que está nele. Vamos fazer isso aqui. Você pode ver isso? Para onde ele foi? Esse é o quadro de pasteboard. É só aquele cara. Dizem que não é pasteboard, essa coisa está lá embaixo. Ele está apenas segurando a pequena lista visível mais pequena um pouco nesta página aqui. Isso acontece. Às vezes você acaba indo, eu só estou trabalhando neste projeto e você entende isso. Esse é um dos problemas. Nem é um problema. É só agora que você sabe e é isso que é a coisa do pasteboard. A próxima coisa que quero mostrar é quando você está copiando e colando de um documento para o outro, na verdade, eu acabo fazendo isso bastante e você está tipo, como ele está pulando entre documentos? Em um Mac, é “Command” e a tecla do túmulo, ou “Control” e a tecla do túmulo. Você é como, o cabide é a chave “Grave”. É a chave “Tilde” e você é como, isso não é mais útil, é essa chave aqui. Acho que é este aqui, mas muitas vezes eles são combinados com isso. Acho que esse é o “Tilde” e essa é a chave “Grave”. Não tenho certeza, mas você está procurando isso no seu teclado. Se você pressionar “Command” e pressioná-lo em um Mac, ele mudará entre documentos abertos e pressionará “Control” e o pressionará em um PC e ele fará isso. É assim que alterno entre e copie e cole rapidamente. De qualquer forma, isso é um pouco desvio. Vamos voltar à esquisitice. Vou precisar trocar. Vamos dizer este aqui e digamos que você queira pegar isso e deseja copiá-lo e colá-lo e usá-lo em seu documento. Você é como, ótimo, eu só vou pegá-lo e você vai ignorar aquele pequeno diamante no canto superior esquerdo porque você está tipo, eu não sei o que é isso. Isso causará problemas. Vamos pular para o nosso documento. Vou colá-lo e olhar aqui, diz, bem, se você estiver colando links em documentos, você pode publicar biblioteca. Isso está bem acima do que precisamos agora. Muito hardcore, então vamos fechá-lo. Analisaremos bibliotecas e componentes mais tarde. O que você precisa fazer realmente é se você trazer coisas e esse aviso aparecer e/ou você for para essa pequena opção aqui, você pode ver isso diz bibliotecas? Se eu clicar nisso, você tem esses componentes aqui. Aprenderemos componentes mais tarde e será fácil, mas por enquanto precisamos desmontá-los para que possamos trabalhar com eles e não nos causar problemas. O problema é, se eu copiar e colar isso e tiver dois deles, se eu atualizar um, ambos são atualizados. O que é legal mais tarde quando estamos mais experientes , mas por enquanto isso nos causa apenas problemas. O que fazemos é trazer componentes que entram em nossa biblioteca de componentes ou em nossas camadas. Vamos dar uma olhada agora se eu selecioná-lo. Você vê que ele tem o ícone de diamante, está fazendo algumas coisas engraçadas. Tudo o que precisamos fazer é clicar com o botão direito do mouse e dizer desagrupar componente e, em seguida , você clica com o botão direito do mouse e diz que ainda há outro, há componentes dentro dos componentes aqui. O designer que fez o outro kit de interface do usuário fez isso. Às vezes, você precisa continuar até que não haja componentes de desagrupamento. Agora é apenas um círculo antigo regular com um retângulo e causará menos problemas. Se você ignorar que ele é um componente, provavelmente ainda funcionará, mas você acabará mudando um ícone e todos vão atualizar, além disso, há esse aviso na parte inferior lá, então eu acho que eu disse isso no início do curso porque pode ser preocupante. Porque eu vou fazer alguns ícones em um segundo, você vai encontrar esse problema. É por isso que eu fiz isso aqui. Se você não entender quais componentes ainda são, não se preocupe, vamos cobri-los mais tarde no curso. O que vou fazer agora é que eu tenho aqui embaixo, eu vou dizer, na verdade, apenas agrupá-los novamente. Agora é apenas um interruptor antigo burro. Não faz nada extravagante. Vou dar um nome a ele. Por aqui vou chamar este interruptor de alternância e a outra coisa é, isso depende do seu nível de TOC. Vou clicar no meu painel “Ativos” e isso vamos abordar mais tarde também, mas há esses pequenos componentes. Não precisamos deles. Nós transformamos isso em apenas seu próprio pequeno grupo, eles não estão conectados agora. Eu sei que eles não estão conectados porque não há nenhum pequeno diamante no canto e se eu clicar com o botão direito neles, não diz ungroup component, apenas ungroup antigo regular e você pode ver todas essas coisas, Eu selecionei todos eles com a tecla “Shift”, e vou me livrar de você. Super arrumado. Olha como estamos arrumados. Foi útil? Talvez não tenha sido. Se não fosse, continue. Continue com o curso, você aprenderá componentes mais tarde e provavelmente não muitos problemas, mas esse é o problema do componente que você pode ter. Você encontrará como este aqui, se eu copiar isso da interface do usuário dessa pessoa, é quem fez o kit de interface do usuário, eles transformaram todos em componentes? O pessoal do Google fez. Este se eu copiar e colar , antes de tudo, eu sei que não é porque não tem o pequeno diamante no canto e se eu colar aqui, onde está, lá está, coloque o meu pasteboard, você pode ver que ele não apareceu nos meus componentes e no meu painel de camadas. É só um grupo, não tem esse pequeno diamante. Sei que é um grupo. Você pode ver esse pequeno ícone de pasta? Esse é o sinal para ser um grupo. Você pode clicar duas vezes nele para olhar dentro do grupo. É um grupo em um grupo e , em seguida, há alguns caminhos que compõem isso. Isso mesmo. Mas sei que não é um componente. Isso não vai me dar nenhum problema. Vamos entrar em algumas edições. Vou ignorar aqueles lá. Vou trazer alguns ícones. Então, cabe a você como você os traz, importar arquivos ou usar o atalho. Farei o que faço e apenas vou, o que queremos? Em seus arquivos de exercícios, quero que você traga a conta 1 e talvez carregue 1, esses dois e apenas arraste-os antes de eu fazer. Quando você traz ícones de lugares diferentes, haverá tamanhos diferentes. Isso é uma coisa, são cores diferentes. O próximo passo é tentar fazer com que essas coisas correspondam, e alguns dos problemas que você pode encontrar porque vou pedir que você faça alguns ícones e faça um pequeno conjunto de correspondência. O que eu quero é, antes de tudo, obtê-los do tamanho certo. Agora, confie em mim quando digo que é mais fácil trabalhar neles quando eles são realmente grandes. Se eles são realmente pequenos, digamos que eles são muito pequenos assim. Vamos dar uma olhada neles. Eles ainda são vetoriais, então é ótimo, estou ampliando. Digamos que eu queira mover esse pequeno círculo aqui porque isso me irrita. Para entrar nisso, posso fazer uma de duas coisas. Posso clicar com o botão direito do mouse e dizer desagrupar, desagrupar e desagrupar, desagrupar, desagrupar até que esteja em lances, ou posso fazer a edição de objetos. Posso entrar nele clicando duas vezes nele. Posso clicar duas vezes nele, clicar duas vezes nele novamente. Lá vai você. É uma maneira de entrar em um grupo sem ter que desagrupá-lo porque posso movê-lo agora e depois clicar duas vezes no plano de fundo e sair. Cabe a você se você gosta de desagrupar coisas ou clicar duas vezes nelas para entrar. Você pode vê-lo aqui. Entrei nele clicando duas vezes nele, cliquei duas vezes nisso novamente, e tenho essa coisa aqui. Preencha 112, é esta roda, e temos que correr para o problema com ela ser muito pequena. Eu exagerei para ser muito pequeno para agravar o problema , acho que essa é a palavra que eu quero. Veja isso, se eu for me mover um pouco para cima [inaudível] entendê-lo? É tão pequeno que realmente está tentando se alinhar aos pixels, se você souber quais são esses. Não tem para onde ir. Ele precisa se alinhar com um dos pixels aqui em baixo. Você não pode vê-los, eles são pequenos quadrados com os quais está tentando se alinhar, então não é muito divertido de qualquer maneira. O que você pode fazer é pegar ambos porque eles são SVGs. Lembre-se do comando menos para diminuir o zoom ou controlar menos em um PC. Vou arrastá-los bonitos e grandes, segurando o turno, para que eles fiquem bons e grandes. Outro truque enquanto estamos aqui, segure o shift e a opção em um Mac ou shift e alt em um PC, em vez de ir do canto superior direito, ele irá do centro. Essa é a opção shift em um Mac e shift alt em um PC enquanto você o arrasta. Eu faço isso carrega e farei isso carrega mais no curso. Vamos torná-lo bom e grande. Vamos te dar bom e grande também. Obtenha aproximadamente o tamanho certo para tentar fazer com que essas coisas correspondam. Parece bom para mim. Agora, quando eu clico duas vezes nele para entrar, clique duas vezes nele novamente, assisto, posso ter muitos ajustes. Vamos entrar lá. Cargas de ajuste. Podemos movê-lo em pequenos pedaços pequenos e torná-lo cada vez maior e para obter esse ajuste que você precisa, você pode usar sua tecla de seta, tocar, tocar, tocar, tocar, tocar, tocar, tocar, mover um pixel de cada vez. Vou fazer os meus ícones um pouco maiores, gigantescos, ok, vamos torná-los menores em um segundo. Vamos começar a desenhar mais tarde no curso muito mais, mas no momento estamos fazendo o suficiente para fazer nossos wireframes utilizáveis e para o cliente e para o cliente para testes. Escale-os para cima. A outra coisa que vamos fazer é tentar e assim, isso está um pouco saindo agora. Para editá-lo, vou clicar duas vezes nele , clicar duas vezes nele novamente, nesse bit e vou clicar nele mais uma vez. Vou entrar na forma real. Neste caso, há um grupo, lá está ele lá. Este é meu carrinho. Se eu clicar duas vezes nele, entrarei nesse outro grupo. Eu não consegui, alguém conseguiu. Grupo dentro de um grupo. Então, dentro disso, está esta parte aqui, que é preenchimento 110. Se eu for o último pouquinho, posso começar a ver todos os pontos de ancoragem e posso fazer alguns ajustes. Isso é o que você pode fazer. Este tem dois pontos lá, o que é estranho. Mais uma vez, eu não consegui. Essas são as coisas que você vai encontrar. Este aqui. Olha, está escondido atrás, e é ótimo. É assim que você faz seus ajustes. Você pode decidir que, na verdade, este único turno de espera, eu posso clicar em todos estes e talvez, lá vai você. Mova isso um pouco para baixo. Mexa e mova e entenda como você quer tentar combinar esses dois. A outra coisa que você pode fazer é aumentar peso do traçado ou pelo menos corresponder. Você pode ver que este é um pouco mais grosso que este? Não é realmente, mas vou imaginar que seja. Vou te mostrar o que fazer. Algumas coisas que eu quero fazer é que essas cores combinem. Eu clico em “Novo”, uso meu pequeno conta-gotas. Sabemos como fazer isso. Excelente. Eles estão combinando com a mesma cor. Digamos que eu quero que isso seja um pouco mais grosso. É um pouco fino e spindly para o que eu preciso ou pelo menos este precisa ser mais grosso, vamos fazer isso por este. No momento, é esse preenchimento que eu posso ajustar, mas posso adicionar uma pequena linha ao redor do lado de fora. Assista isso. Cliquei em segundo plano, desselecionei, clique nele uma vez e digo, vamos adicionar uma grande borda. Precisa ser a cor certa, então vou clicar nele e dizer a você. No meu traçado ou na borda corresponde ao preenchimento, então eu realmente não consigo vê-lo, mas veja isso, posso clicar aqui e usar minha seta para cima. Você pode ver que eu torná-lo mais cheio ou mais leve. Posso decidir que é isso que eu preciso para o tamanho ou para a forma como ele está sendo visto. O mesmo com este, vou dizer, e adiciono uma borda. Eu vou, neste caso, copiar as propriedades porque é basicamente a mesma, editar, copiar, editar a aparência da pasta, e você pode decidir que, na verdade, este precisa ser um pequeno quadrado, esse é 11, e eu vou derrubar um para 10, e agora eles são perfeitos. É assim que obter a correspondência. Vejamos a última pequena estranheza que acontece no Adobe XD quando estou escalando. Eles são enormes agora. Vou ampliar todo o caminho, lembrar do comando zero ou controlar zero, tudo. Olhe para essas junções na escala. Eu quero reduzi-los, então vamos pegar dois deles. Eu os dupliquei, e vou fazer você agradável e pequeno. Assista isso. Coloque-o até o tamanho do ícone. Olha o que está acontecendo. Estou exagerando para mostrar o que está acontecendo. Muitas vezes, o que as pessoas fazem, elas simplesmente vão e não percebem que realmente fizeram o que eu vou explicar agora. Vamos muito pequenos. Porque o que acaba acontecendo é o traçado ou a borda ainda é 11. Esse cara tem 11 anos, e esse cara tem 11, então não cai proporcionalmente. Existe uma maneira de contornar isso. Vamos deixar aquele cara onde ele estava. Este cara aqui, vamos clicar com o botão direito e vamos dizer algo chamado traçado de contorno. Isso vai parar de ser esse ajuste, não podemos ajustar o tamanho novamente facilmente, você fará isso depois de terminar de combiná-los. Mas se eu delinear o traçado, nada parece acontecer de forma diferente, mas exceto que quando eu escalá-lo para baixo, você pode ver que ele diminui proporcionalmente, e esse é um tamanho mais apropriado. Difícil de clicar, mas essa é a diferença. traços não são dimensionados, eles ficam exatamente o que você os coloca. Isso é verdade para esses botões aqui também. Por padrão, isso é realmente útil porque significa que posso fazer um botão grande e não é proporcionalmente mais grosso do que esse botão, é do mesmo tamanho. Esse foi um vídeo que tinha que ser feito com algumas coisas estranhas que acontecem. O que eles eram? Quando você copia e cola, às vezes eles aparecem como componentes. Clique com o botão direito do mouse neles e desagrupe o componente até que eles desapareçam e, se você estiver realmente arrumado, exclua-os dos componentes. Você não precisa, só se quiser ser legal e arrumado. A outra coisa é a placa de arte. Essa é esta página aqui no nosso painel de camadas. É considerada uma página por conta própria, e é aí que esses caras vivem quando não estão em uma página e às vezes podem acidentalmente estar em uma página e você não está percebendo e desaparece, se foi. O que mais aprendemos? Aprendemos que podemos desagrupar ou simplesmente clicar duas vezes em um ícone para entrar nele para fazer ajustes e, se continuarmos clicando, eventualmente poderemos começar a editar formas. O último foi que os traços não são dimensionados, eles permanecem os mesmos e podemos clicar com o botão direito do mouse e delinear traçado se precisarmos que eles permaneçam fixos. Espero que tenha sido útil, se for um pouco obscuro e você estiver tipo, eu entendi? À medida que passamos por este curso, você vai ser como, e por que tivemos esse vídeo mais cedo? Vai ficar claro. Espero que, se eu fizer meu trabalho direito. É isso. Vejo você no próximo vídeo. 18. Projeto do curso 03 - Ícones: Olá, todos. É hora do projeto de classe. Este vem com algumas dicas e truques de bônus também, então não pule este. Vamos falar sobre o que você tem que fazer. Precisamos de quatro ícones ao longo da parte superior e três na parte inferior. Você provavelmente acabará usando esses em casa. Um usuário pode fazer login e alterar a senha e outras coisas. Um carrinho que os leva para a página de compra ou o que eles têm no carrinho e eu vou exibir o menu que já projetamos. O que eu quero que você faça é que eles combinem cada um, usando as técnicas que aprendemos até agora, acertando os traços. Você pode até pegá-los todos do mesmo lugar. Posso encontrar um bom conjunto. Estou bem com isso, o mesmo com os ícones das mídias sociais. Escolha os ícones de mídia social apropriados para seu público-alvo. Dê uma olhada no seu perfil de usuário e diga: eles são uma pessoa do Linkedln, pessoa do Twitter, ou eles vão compartilhar no Tiktok ou o que quer que seja? Adicione um pouco de texto para que eles compartilhem sua compra e, em seguida, adicione os ícones de mídia social apropriados. Então eu quero que você faça uma captura de tela e faça o upload para a seção de comentários ou para as atribuições nesta página ou na próxima seção, dependendo de onde você está fazendo isso, e isso é apenas um exemplo. Não precisa ser assim, mas algo assim. Eu prometi algumas coisas bonus-y atalho. Vamos dar uma olhada nisso. Enquanto você está trabalhando nisso, uma das coisas que você pode fazer é que eu precisava encontrar um ícone de casa. Não fazia parte daquele grupo que encontrei. Eu posso achar que é uma maneira de obtê-lo de um diferente. Eu tive que adicionar um golpe ao redor do lado de fora. Vou trazê-lo no Command Shift I é o atalho em um Mac e Control Shift I em um PC para importar ou você pode arrastar como se eu estivesse fazendo um pouco de lição de casa. A diferença entre este é que ele não era bastante grosso. Você pode ver que era bem fino? Você sabe como eu disse escalar e começar a trabalhar. Eu não queria me incomodar porque tudo o que eu tinha que fazer adicionar um pequeno golpe ao redor do lado de fora e eu queria compartilhar com você, eu estava tipo, oh, isso é realmente útil. É que quando você adiciona uma borda e escolhe a cor certa, é que uma não é o menor tamanho. Você pode descer para 0,5. É por isso que eu quero falar sobre, você pode descer para 0,1. Nesse caso, acho que escolhi 0,25 e tento escalá-lo e combinar esses são os ícones aqui. Esse é o ponto que eu queria fazer. Você pode usar pequenos tamanhos fracionários para o traço. Em seguida, minhas dicas e truques é que você provavelmente quer agrupar coisas. Especialmente se você quiser usar esses próximos truques de, você pode ver que eles não estão bem alinhados. É difícil colocá-los visualmente alinhados. Você seleciona todos eles e diz que, na verdade, quero que eles por aqui estão suas ferramentas de alinhamento alinhadas ao topo, alinhá-las para o meio. Você pode ver porque isso não está agrupado, está esmagando-os completamente. Vou dizer que a navegação é clicar com o botão direito do mouse e ir para o grupo. É uma dessas coisas. Você provavelmente o usará o suficiente para obter o atalho Command G em um Mac, Control G em um PC. Agora, quando eles estão agrupados, posso selecionar todos eles. Estou usando minha ferramenta de seleção e apenas arrastando uma caixa sobre todas elas. Vou dizer alinhe-os no meio, por favor. Agora isso nem sempre é visualmente verdadeiro. Às vezes você gosta que esteja funcionando, mas esse cara precisa subir um casal. Isso também é totalmente permitido. Não precisa ser matematicamente correto. Tem que estar perto o suficiente visualmente correto. O outro é que eles são distribuídos? Eles não são. Este é um pouco mais próximo do que este. Novamente, você pode fazer isso se todos estiverem agrupados individualmente, agrupados separadamente um do outro. Posso selecioná-los, e há essa opção aqui. Isso será a distribuição horizontal. Há um atalho que você nunca aprenderá. O que é isso? Opção Comando H. Nunca me lembrarei disso. Eu não uso o suficiente. Eu posso fazer isso e vamos tentar separá-los todos individualmente. Mas porque às vezes há esses espaços negativos aqui, às vezes você realmente esse cara só precisa ir um pouco assim. Isso é permitido. Eu lhe dou permissão para aumentar as coisas, mas isso precisa subir novamente. Esse é o alinhamento e a distribuição. Além disso, o que você pode fazer é selecionar todos e copiá-los. Porque o que preciso fazer é preciso ampliar todo o caminho. Quem se lembra do que é isso? Comando Z ou Control Z em um PC. Eu copiei todos eles. O que você pode fazer é dizer na verdade, eu quero me livrar de você, esse cara se foi. Você entra é que eu posso dizer que você pode clicar no nome dele e clicar em Colar. Ele colocará exatamente o lugar certo que precisa na página, desde que tenham as páginas do mesmo tamanho. Isso é útil para atualizar as páginas em vez de tentar alinhá-las. A outra coisa que você pode fazer é fazer mais de um. Vou desfazer isso. Posso dizer que você segure Shift no meu teclado e clique nos nomes desses três e, em seguida, pressione Colar. Esses são seus bônus. Agora, faça sua lição de casa e pegue esses ícones. Vejo você no próximo vídeo. 19. Como adicionar a interação ao seu protótipo no Adobe XD: Olá, todos. Neste vídeo, vamos analisar a prototipagem nosso pequeno site móvel e todos esses pequenos fios aqui quando todos estiverem conectados como estão. Posso passar e dizer, saber mais, voltar para a página inicial, ir para a página do carrinho. Adicionar um pouco de navegação ao protótipo de nosso design é o que vamos fazer. Vamos pular. Para adicionar a interação, vamos mudar do design, o que seria o momento para o protótipo. Nada realmente parece que ele muda, exceto esse pequeno painel muda um pouco. Agora, para ativar tudo, clique no nome de uma das pranchetas. Vamos fazer a primeira página, a página inicial. O que vamos fazer é quando esta página for clicada, vamos levá-la para esta prancheta aqui. Basta clicar em segurar e arrastar aquela pequena coisa azul e assim você pode ver que diz esta. Em seguida, vamos dar uma prévia, então vamos visualizá-lo aqui, apertando aquele pequeno botão “Reproduzir”, e clicar nele e sua prancheta será carregada. Legal. O que fazemos é, no momento, basta clicar em qualquer lugar e ele vai passar para a próxima prancheta. Lá para lá. Simples. Clique novamente e não vai a lugar nenhum porque nós apenas preparamos uma prancheta. O que podemos fazer é que você não precisa fechar isso. Isso pode ficar aberto. Para mim, muitas vezes mantê-lo na minha outra tela aqui que você não pode ver, ou podemos simplesmente mantê-lo aqui neste caso e ele simplesmente paira acima de tudo. Você pode fechá-lo novamente e abri-lo de volta, sem problema, mas é isso. A outra coisa a observar é que ele pode estar começando na página errada. Você pode ser como, essa não é a página inicial. Não presume que você queira começar na extrema esquerda porque você pode ter um aqui. Ele realmente não sabe com qual deles começar. O que você faz é iniciá-lo, se eu quiser começar na página Checkout para visualizar isso, basta ter essa página selecionada ou a prancheta selecionada. Você pode deixar isso aberto, você não precisa redefini-lo. Você pode simplesmente clicar aqui. [RISOS] Você vê isso se ajusta dependendo da prancheta que você selecionou, então essa coisa não precisa ser fechada. O que vamos fazer na página Detalhes do produto é que vamos dizer que você vai lá e, na página Checkout, você vai lá, então o equipamento básico real. Para começar no início, vou clicar nesta “Página inicial” e dizer clique. Olhe para isso. Fantástico. [RISOS] Mas no momento, embora isso esteja usando a coisa toda, clicando em qualquer lugar. O que queremos fazer é ter esses botões para ir a lugares. O que faremos é fechar isso para que não seja confuso. Para se livrar desses, existem algumas maneiras. A maneira como faço isso de qualquer maneira é clicar na página inicial. Para remover essa conexão, basta clicar em segurar e arrastá-la para lugar nenhum. Não lá, só por aqui. Você pode voltar para casa, em qualquer lugar aqui, e deixar ir, e ele quebra esse link. Essa é uma maneira de fazer isso. A maneira mais oficial é que eu selecionei o Checkout, e aqui ele adicionou um gatilho de toque. arrastando essa pequena coisa através dela é presumindo algumas coisas; que você vai clicar em algum lugar ou tocar, em um telefone obviamente é um toque, para clicar em uma área de trabalho. Ele adicionará uma transição à página Confirmação e usará o padrão para dissolução. Você pode dizer que não vá a lugar nenhum. Você pode ver simplesmente não vai a lugar nenhum agora. Lá vai você. Nós dividimos tudo isso porque o que queremos fazer é trabalhar em objetos reais. O que queremos fazer é, em vez de clicar na página inteira, chegar à página Detalhes do produto será meu botão Saiba mais, e o que vou fazer é não ter o texto selecionado, vamos ampliar. Vamos apertar o botão selecionado, apenas para que haja um pouco mais de uma área clicável e, em seguida, você pode arrastá-la para aqui. Vá em frente. Página inicial de marketing, vamos clicar em “Jogar” e nada pode ser clicado, exceto por esse cara. Esse é o básico da prototipagem. Agora, o que podemos fazer é eu querer voltar para aquela página inicial, eu vou ir para você meu amigo voltar aqui. Lá vai você. Estamos aceitando todos os padrões, falaremos sobre flexibilização e outras coisas em um vídeo futuro, mas no momento, isso é o que você acaba fazendo; homepage, Saiba mais. Homepage, e apenas manipulando essa coisa com todos os seus fios musicais, e eles estão conectados a páginas diferentes. Outra coisa que você pode fazer nessa pré-visualização é, em vez de tentar conectar tudo apenas para sua própria navegação, você pode usar as setas esquerda e direita para se mover através delas. Se você quiser apenas ver como a página Checkout se parece, você não quer usar todas as interações, basta usar a esquerda e a direita e ela simplesmente percorrerá todas elas. Agora, a coisa realmente legal sobre isso é porque está sempre aberto, veja isso, o design pode realmente mudar. Você vê, você pode protótipá-lo, estar trabalhando nisso e vendo como é nesse design sem ter que fechá-lo e reiniciá-lo ou atualizá-lo. Não há um botão de atualização real, eu gostaria que houvesse um retorno à página inicial [RISOS], mas não há. Você clica nisso para voltar ao início, usaremos essas teclas de seta. Enquanto eu estiver trabalhando, sempre terei essa tela aberta e vou tê-la aqui no meu outro monitor e estar funcionando. Só me mostra o que parece lá o tempo todo. Uma última dica para prototipagem é que fizemos a página inicial, onde fizemos isso? Bem, duas pequenas dicas agora que penso nisso, vou selecionar todas; então comande A em um mac, controle A em um PC, onde está? Selecione todos, se você estiver no modo de protótipo, ele selecionará todos e mostrará todos os fios que podem ser úteis apenas para saber o que você fez e não fez. Será como, eu fiz aquele em casa, mas você pode ver que este não se conectou. Isso acontece muito com a navegação. Digamos que não temos uma página de contas, então não vamos usar essa. Não faz parte do nosso fluxo de tarefas, mas este aqui faz. Vamos dizer, você vai para a página Checkout. Você poderia ir, ir para a Homepage e tudo bem com apenas quatro pranchetas. Mas o que você pode fazer é somente se você estiver no modo protótipo, se você selecionar todos esses quatro nossos e copiá-los. Excluímos essa faixa anteriormente, e nós os excluímos, clicamos no título e os colamos. Você pode ver que ele traz de volta os links, ele não traz de volta este porque já estamos na página inicial. Se eu for para este, exclua esses caras, cole-os, este não pagou porque estamos na página Checkout. Obviamente, não pode mostrar o fio entrar em si mesmo, mas a página inicial funciona. Este vai me mostrar muito. Entendeu o que quero dizer? Veja a página inicial e a página do carrinho está lá. Se você estiver fazendo muitas coisas repetitivas, certifique-se de que está copiando colando no protótipo. A razão pela qual eu mostro que é vamos fazer isso do outro jeito para que não o tenha. Se eu fizer isso na visualização de design e eu for aqui e ir, onde está um, este aqui, copie. Não trará todos esses fios. Se eu for aqui, exclua a pasta. Se eu tiver um modo de protótipo, você pode ver que ele não copiou e colou esses fios? Você precisa estar no modo protótipo para copiar e colar fios. Você será pego eventualmente e se perguntará por que a interação não está chegando, só precisa estar no modo protótipo quando você estiver copiando e colando. Neste caso, estamos zombando de um celular. Não importa se você está zombando de um celular ou um design de site ou um design de tablet, essa pequena coisa aparece da mesma forma. Acabamos de entrar em dispositivos móveis agora porque ele está se tornando o mais popular para muitas coisas especialmente desse comércio eletrônico. Eu acabo começando muito mais no celular, mas isso não quer dizer que uma versão para desktop ou versão horizontal retangular não seja onde você deveria começar e criar protótipos. As dicas e truques que estamos aprendendo aqui funcionam da mesma forma. Tudo bem, é isso, vamos para o próximo vídeo. 20. Animação de protótipo e flexionando no Adobe XD: Olá, todos. Neste vídeo, vamos levar a prototipagem um pouco mais longe. Vamos ver os diferentes tipos de animação, o que é a flexibilização, e faremos algo assim. Veja essas coisas avançar em vez se dissolver se eu voltar usando minhas flechas. Também vamos criar essa monstruosidade. Pronto? [RISOS] Ruim ruim. É legal, é ruim. Deixe-me mostrar como fazer isso no Adobe XD. Para criar essa animação incrível, vamos nos aprofundar um pouco mais na prototipagem. Agora, você notará que este é chamado Nível 1 de prototipagem deste vídeo porque há Nível 2 mais tarde no curso porque jogamos a pia da cozinha lá agora. Eu gostaria de levá-lo a um pouco de proficiência no início do curso, e então podemos mergulhar mais fundo em algumas dessas coisas, como prototipagem mais tarde. É um pouco mais agora. A primeira coisa é que esta é uma quantidade bastante pequena de pranchetas, mas digamos que agora a página pode ter 30 páginas ou 50 páginas. Em vez de tentar arrastá-los e chegar a todos os lugares diferentes, o que você pode fazer é clicar no botão e aqui, bem, vamos clicar nele e dizer, eu gostaria que o transição para ir para a prancheta chamada página muito bem nomeada Prancheta, também checkout e ela vai lá. Se você não nomear suas páginas, ela se chama Prancheta 1-52, o que acontecerá. Estou nomeando o meu aqui principalmente porque você está assistindo. Mas isso facilita. Se você os nomear, você pode realmente escolhê-los no destino. Isso é uma coisa. A outra coisa que eu quero explicar neste é que aqui, o padrão é uma transição de dissolução. Vamos mudar o nosso para Slide Left. Não vamos passar por todos eles, mas vamos dar uma olhada no Slide Left versus Push Left porque eles parecem muito semelhantes. Quero que o botão Comprar vá aqui. Você percebe que ele se lembra da última coisa que você fez. Se você mudar alguma coisa e continuar adicionando, ele continuará deslizando para a esquerda. Isso é bom, na verdade. Se você conseguir algo que você gosta, você pode continuar adicionando e ele se lembrará da última coisa que você aplicou. Vou mudar o meu para Push Left. Vamos dar uma olhada e ver porque eles parecem a mesma coisa. Você joga, vamos dar uma olhada em Buy Now, Slide à esquerda, onde você está? Deslize por cima e Comprar é um empurrão para a esquerda, não há sobreposição , apenas empurra a esquerda para que você decida o que deseja. Verifique também se você não está projetando algo que não pode ser feito pelo menos facilmente pelo seu desenvolvedor. Se você vendê-lo para o seu cliente saltar e você viu no início e os desenvolvedores são como se não podemos fazer isso, e o cliente está preocupado com ele saltando, você vai ter problemas. Fale com seu desenvolvedor. Tenha um bom diálogo no início sobre o que você pode ou não fazer. Vamos deixar isso aqui. Vamos deixá-lo lá. Vejamos a outra coisa chamada flexibilização. Vou deixar você brincar com as outras animações. Não é muito emocionante. Dissolver ou Nenhum, nenhum significa apenas que ele vai pular para ele como um salto e você pode brincar com esses diferentes. Vejamos a flexibilização porque, sem aliviar, é rígida. Vamos visualizá-lo. Assista a isso agora, não há delicadeza nisso. A flexibilização está diminuindo a velocidade neste caso, abrandar a flexibilização significa que, quando chegar perto do fim, vai diminuir um pouco porque gosta de uma sensação natural, mesmo embora seja digital. Podemos exagerá-lo, vamos até dois segundos, o que é muito longo, mas ajudará a entender a flexibilização um pouco melhor. Vamos jogar esse cara, vamos comprar agora. Você pode vê-lo mais lento à medida que se aproxima do fim? Como a gravidade real funciona [RISOS] se a gravidade pudesse deslizá-la para o lado. De qualquer forma, isso é flexibilização e você pode mexer com o que sente, parece bom. Uma coisa que você está proibido, porém, é que você pode experimentá-lo uma vez neste curso, e então você não tem permissão para usá-lo mais, é a rejeição. [RISOS] Bounce é o pior. O salto de dois segundos é ainda pior. Vamos dar uma olhada. as portas encadernadas se você fez meu curso de edição de vídeo Premier Pro ou quais portas encadernadas, outra transição ruim? Peeling de página. Isso é o equivalente para o Adobe XD. Pronto? [RISOS] É legal por cerca de três ou quatro cliques no botão e depois fica cansativo. Não estou julgando, você pode usar o Bounce. Outros lá dentro. Vou deixar você passar por todos eles. Só vou fazer mais um com você, os interessantes. Pronto? Isso tem, como eles chamam isso? Deixe-me pensar. Pensei nisso. [RISOS] Eu estava pensando nisso há séculos. Eu tive que antecipar regras de animação do Google. Se você não conhece as regras da animação, é uma coisa útil saber como designer, especialmente um designer de UX. Vá conferir Lucas Ridley, ele tem um ótimo curso sobre o básico da animação. antecipação é quando você se inclina para trás em seus calcanhares antes de avançar, você coloca seu peso para trás para seguir em frente. Está ajudando as pessoas a antecipar o que está prestes a acontecer porque ninguém acaba de lançar para a frente. Você coloca seu peso no pé de trás antes de se empurrar para a frente. Isso é o que está acontecendo aqui. Vamos dar uma olhada agora, acabe. Vamos fazer um segundo, e então isso já está pronto, avança antes que ele volte para trás ou vice-versa. Você vê isso? É bom. Isso vai ser isso para este, eu acho. Brinque com as diferentes animações, brinque com os diferentes tipos de flexibilização e quanto tempo eles levam, encontre uma coisa que você gosta. Faremos mais prototipagem mais tarde no curso, algumas coisas mais hardcore. Mas, no momento, acho que temos o suficiente para continuar. Vamos fazer isso. Vamos continuar. 21. Como ver seu design no XD App no iPhone e Android: Olá, todos. Sou eu na natureza. Este é um vídeo sobre como mostrar como obter uma estatística em uma árvore em seu dispositivo móvel. Porque, bem, precisamos ver o que parece no dispositivo para escolher coisas como fontes e realmente fazer o teste em vez de tentar usar a coisa na tela. Esta é a minha configuração, é assim que parece do outro lado. Normalmente, isso é parcialmente bagunçado, não muito bagunçado, mas piora. O que precisamos fazer, vou mostrar duas maneiras diferentes de fazer isso. Essa forma de atualização ao vivo com o cabo USB. Você sabe o que é o cabo USB? [RISOS] Fazemos assim e depois mostrarei uma maneira de fazer isso através da Nuvem. Ambos têm seus prós e contras. Este é o caminho mais emocionante. Vou mostrar para você. É fácil. Independentemente de qual maneira fazemos isso, você precisa baixar o aplicativo para o seu telefone. Se você estiver no Android ou na Apple, não importa, acesse sua loja de aplicativos ou à Play Store, dependendo do sabor do telefone, e faça o download do aplicativo Adobe XD. Para fazer o download, você precisará fazer login com sua Adobe ID e senha, que você sempre esqueceu e precisará de uma senha de redefinição. Depois de fazer isso, [RISOS] e você está realmente conectado a ele. É muito fácil. Você precisa encontrar um cabo USB. Você sabe o que são, então você o conecta. Na verdade, o que vou fazer é configurar isso, para que a câmera possa ver os dois, espero. Você espera lá. De volta para dentro do computador aqui por um segundo. Depois de conectar seu cabo USB ao telefone, suba o topo aqui, você pode ver esse pequeno dispositivo? Espero que você veja seu pequeno dispositivo aqui e clique nisso. Este é o meu Pixel 4, clique nele e depois vamos voltar para a outra câmera. Esta é minha pequena configuração aqui. [RISOS] Abri o aplicativo no meu telefone. Tenho meu Adobe XD aberto, cliquei no pequeno ícone que você acabou de ver no canto superior. Dependendo de, às vezes, ele apenas salta para ele, mas às vezes vê o fundo aqui há esse pequeno ícone. É um dispositivo conectado. Olhe para isso. Eles combinam. Eles fazem, eles combinam exatamente. O que é realmente bom nisso é assistir isso. É atualização ao vivo. Maneira legal. Você pode ter isso conectado e estar realmente trabalhando em coisas como tamanhos de fonte. Você pode dizer que isso não está funcionando bem. Talvez o tamanho da fonte seja muito grande aqui, então vou descer para 30. É muito mais fácil projetar ícones agora porque você pode realmente começar a tocá-los e ir embora, isso é grande o suficiente para tocar? Clique nele. Vamos clicar no “Carrinho de compras”. Oh, fui ao carrinho de compras. Quão legal é isso? Eu adoro isso. É como se eu fizesse algo e olhe, está funcionando, e está lá fora. Homepage, saiba mais. [RISOS] Até mesmo um efeito de salto. [RISOS] Isso é prototipagem ao vivo no seu dispositivo. Obviamente, você pode atualizá-lo e ele vai para as páginas em que você está trabalhando também. Você pode ver nos nomes das páginas aqui? Não sei por que fiz isso, mas é algo mágico sobre ele atualizar bem. A outra coisa a observar é que temos nosso rótulo bem. Você pode ter a versão do tablet sentada lá, horizontal, vertical. Você pode conectar mais de um dispositivo e conectar-se a todos eles. Incrível. Uma coisa é que há algumas coisas. Uma é se, digamos, porque o que estamos usando isso é para que você possa projetar com ele. Isso é como esta função aqui. Você poderia ter o cliente sentado com você e usá-lo no telefone deles também. Você pode fazer isso com testes de usuário, para que você possa usar seu pessoal e conectado ao computador. Vou te mostrar outra maneira em um segundo, provavelmente é melhor para isso. Mas há coisas como dicas. Qual é se eu clicar em algum lugar, você pode ver no topo lá? Vai ser um pouco difícil. Não tenho certeza se o editor pode aumentar o zoom. Mas tem alguns destaques lá. Vamos voltar para a página inicial, na verdade. É um pouco alto porque não estou segurando meu telefone. Não quero destruir o tiro. Mas você pode ver se eu clico sobre, ver essas coisas destacadas para dar um pouco de uma dica visual do que você pode clicar porque não vamos preparar tudo. Não quero criar uma página de conta. Não foram solicitados a fazer um. Isso vai ajudar as pessoas a saber onde elas podem ir dentro dessa maquete e como sair dela. Você está tipo, Meu telefone estava preso aqui. Você pode clicar triplo, pronto, um, dois, três. Isso lhe dá coisas. Você pode dizer essas dicas de hotspot, que acabei de te mostrar, você pode desligá-las. Navegação por deslizamento, ainda não obtivemos nenhuma navegação por deslizamento. Nós fazemos. Por padrão, você descobrirá que vai passar da próxima página para a próxima página sem precisar montar os fios. Isso é uma coisa. Mas os três cliques te colocam nisso. Ele lhe dá mais alguns controles, não vamos passar por todos eles. Eles são relativamente autoexplicativos, fazem uma captura de tela, o que é legal e um protótipo de saída. Essa é a maneira de sair daqui. O que é muito legal nisso é, na verdade eu posso desconectar isso agora. Estranhamente, mesmo que não estivéssemos atualizados ao vivo agora, não consigo atualizá-lo ao vivo. Você pode me ver movendo-o? Provavelmente não pode, mas não será atualizado ao vivo, mas posso retomar a visualização e ela irá armazená-la em cache e lembrar dela. Posso levar isso agora para minha reunião e ainda estará lá. Se for um documento muito grande, digamos que seja um monte de imagens e que tenha 100 páginas ou 100 uploads. Conecte-o e aguarde muito tempo e percorra as diferentes páginas, portanto, certifique-se de que tudo esteja carregado antes desconectá-lo, ele acabará sendo carregado. Por isso, porque é bem simples, ele carregou super rápido. Mas sim, tudo funciona mesmo com ele sendo desconectado. [RISOS] Essa é a única versão, de conectá-la. Deixe-me mostrar a outra versão. Estamos de volta. Deixe-me mostrar-lhe o outro lado. É bem parecido, mas você precisa fazer algumas coisas. A desvantagem é que não há atualização ao vivo. Isso significa que você não vai mexer as coisas e está totalmente atualizando, mas isso é útil quando você está projetando. Mas digamos que você o esteja levando para a reunião do cliente ou para um de seus usuários em potencial para fazer alguns testes. O que você precisa primeiro fazer é garantir que esses pequenos ícones aqui podem não estar atualizando como o meu, eles são pequenos ícones da nuvem. Eles podem remover isso. Mas estou salvo na nuvem agora. Esse é o padrão para o Adobe XD. Você pode ser uma das pessoas que estão lutando contra isso você é Arquivo Salvar como meu documento local. Essa atualização em particular não funcionará. Você precisa salvá-lo na nuvem porque isso o carregará para sua biblioteca da Creative Cloud ou no painel de ativos na Nuvem, magicamente, o aplicativo Adobe XD que acabamos de baixar. Você ainda precisa baixar esse aplicativo, terá acesso a ele onde quer que esteja. Só não atualizará ao vivo. Vamos dar uma olhada. Se você os tiver salvo em seu computador. Vamos dar uma olhada. Eu tenho uma versão para desktop que fiz. Olhe, sem nuvem. O que você precisa fazer para que isso funcione, você precisa salvá-lo na nuvem. Arquivo, Salvar como. Ao fazer isso, ele será padrão para a Creative Cloud e vai acompanhar todos os outros documentos. Ele fará isso. O mais legal sobre o salvamento na nuvem é que ele está sempre salvando automaticamente. Nunca salvo no XD. Ele só salva magicamente por conta própria sem ter que fazê-lo. Você pode fazer isso. Bem, se estiver acinzentado, significa que já fez isso por você. Mas veja isso, se eu mover isso, você notará que de vez em quando ele irá tentar se atualizar. Sempre há uma atualização ao vivo na Adobe Cloud. Você pode clicar em “Salvar manualmente”. Se você ainda tem o hábito disso, você pode vê-lo fazendo isso lá. Isso significa agora que vamos pular para o aplicativo e para a outra câmera. Estamos fora e porque isso não faz mais atualização ao vivo. É como uma desconexão. O que acontece é você salvá-lo como acabamos de fazer na nuvem e , em seguida, abrir seu aplicativo Adobe XD, o mesmo. Mas, em vez desse terceiro ícone você usa esse primeiro, que são seus documentos do Cloud. Aí está meu pequeno rapaz atualizado. Olha, ele está atualizado há dois minutos. Abra-o. Espero que, lá vamos nós. Temos nossa pequena animação em andamento. Temos nosso pequeno protótipo em andamento. Você ainda pode interagir com ele como o outro. Lá está ele lá. [RISOS] Ele ainda está lá. A única diferença é que ele não atualiza ao vivo, mas também significa que você não precisa de um cabo USB, você decide o que deseja fazer. Isso pode mudar no futuro. Ele pode usar tecnologia sem fio no momento em que usa conexão USB com fio para fazer essa atualização ao vivo. Mas ei, isso é totalmente bom. Muitas vezes eu só faço dessa maneira porque não estou projetando. Ao mesmo tempo, eu só quero dar uma olhada em um teste em etapas, em vez de ao vivo. A mesma coisa, clique triplo para sair. Vamos atualizá-lo. Porque ele não atualiza ao vivo, o que você faz? O que você pode fazer é mesmo se você estiver aqui, o que eu vou fazer é digamos que queremos mudar. Vou dizer até o óbvio, vou ler você vá ao meu computador aqui e vou mudar a cor disso. Você não pode me ver fazendo isso, mas eu vou escolher essa cor atraente. Lá vamos nós. Vou clicar em “Salvar” no meu computador, apenas para forçá-lo a atualizar para a nuvem. Já fiz isso agora. Eu o mudei na minha área de trabalho, clique triplo e depois saí e apenas carreguei novamente. Vai procurar o caminho certo. Ei, é rosa. Acho que é uma boa maneira de fazer isso. A outra coisa é que toda vez que ele começa, ele começa nesta página. Por quê? Deixe-me voltar para o computador agora e mostrarei como forçá-lo a começar em uma página específica. Para começar em uma página específica, o que precisamos fazer é que você precisa estar no modo protótipo. Então, se você clicar nessas páginas, o que acaba acontecendo é, você pode ver aqui? Veja este pequeno ícone aqui, que só indicará para o aplicativo, mas essa é a maneira de começar. Ignore o fluxo, falaremos sobre isso mais tarde. Mas o básico é aqui que o fluxo começa. Você pode ter vários fluxos clicando em dois deles. Então você pode decidir qual fluxo seguir. Faremos o mais tarde provavelmente. Mas, por enquanto, basta ter um fluxo. Você pode ligar e desligar. Basta tê-lo na página que você deseja exibir primeiro em seu protótipo. É assim que se certificar de que isso aconteça. right é testar em um dispositivo. Não precisa ser um celular, pode ser um tablet, pode ser um tablet, obviamente testando em um computador, você pode simplesmente fazê-lo no seu computador. Você está executando o Adobe XD em. É isso. Vejo você no próximo vídeo. 22. Projeto do curso 04 - Como testar no seu celular: Olá a todos, hora do projeto da aula. Vamos testar em seu telefone. Nós, você é. Acho que eu quero que você baixe o aplicativo e teste seu protótipo nele e quando terminar, quero que você tire uma foto do seu telefone com ele. Pode ser complicado porque você provavelmente a única câmera que você tem está no seu telefone, então pegue emprestado o telefone de outra pessoa ou veja se você pode fazer alguma mágica com a câmera do seu laptop. Se nada disso funcionar, você pode simplesmente tirar uma captura de tela, apenas uma captura de tela plana da tela também está bem. Quero que você teste no seu telefone. Faça seus próprios testes, certifique-se de que tudo clique e eu quero que você fique animado a coisa que você fez em um telefone funcionando. É tão legal quando sai do computador e, na verdade começa a ser, eu não sei de verdade. Eu fico animado de qualquer maneira. Agora, há algumas coisas que você pode encontrar quando estiver fazendo seus testes e nós vamos cobri-las agora. Vejamos o Adobe XD. Você deve ter notado no último vídeo que alguns dos botões em que eu estava clicando, eu tive que clicar algumas vezes, o que não é bom. [RISOS] Há algumas coisas que você pode fazer dependendo do seu ícone. Este aqui é relativamente fácil de clicar porque é uma grande coisa quadrada , mas há muito espaço desperdiçado por aqui. O que você pode fazer é, essa coisa aqui, é chamada de lar. Está em um grupo. O que há neste grupo? Nada, nem muito. O que vou fazer é a ferramenta retangular e vou desenhar uma área maior clicável. Há isso, eu posso remover a borda. Na verdade, vou remover o preenchimento também para que não haja preenchimento, nem borda. Ainda está aqui, simplesmente não consigo ver isso. Essa será minha área clicável. Vou selecionar ambos, vou agrupá-los pressionando Command G ou Control G em um PC ou você pode clicar com o botão direito do mouse nele. Vamos dar um nome porque por que não? Vamos ser chiques. Eu chamo o meu Icon-Home. Eu usei o nome genérico primeiro e depois as coisas mais identificadoras, então este aqui é meu Icon-Cart. Só que é uma maneira mais agradável de fazer isso. Você pode ver claramente onde estão os ícones e o mesmo que meu botão de visualização agora ou botão primário ou algo parecido. De qualquer forma, passe, adicione um pouco mais aos botões se você precisar testar no início, pode funcionar perfeitamente. Você também pode decidir que, eu não sei, eles estão muito próximos ou você tem dedos grandes e gordos. [RISOS] Você não pode deixar de clicar em dois deles. Faça alguns testes por conta própria em seu telefone. Agora, há um aplicativo envolvido e eu não tenho certeza se o telefone de todos pode fazê-lo, então você obtém uma parte inteira como se ele simplesmente não funcionasse, mas eu gostaria que você experimentasse. A outra coisa que eu quero que você fique atento é o tamanho da fonte porque eu vou ir Command 100%. Eu sei que para minha tela específica não é o tamanho certo. Eu o projetei neste tamanho, você pode olhar no seu telefone, muito grande, é muito fácil de ver e você é como “muito pequeno”. É muito comum ter 16 como tamanho de cópia corporal, mas você pode decidir, na verdade, ele precisa ser maior para essa coisa em particular ou menor. Dê uma olhada no seu telefone, faça alguns testes, ajuste o tamanho da fonte. Não estamos fazendo muito em termos de estilo, mas fazemos um teste. Certifique-se de que todos os botões funcionem. Eles vão para os pedaços? Muitas vezes você clica, você monta e começará a testar e percebe que pode ficar preso em uma página. Você esqueceu de montar o checkout, fez todas as outras páginas, mas não há como sair desta página. Faça um teste, faça uma captura de tela, faça o upload para os comentários ou as tarefas ou projetos dependendo de onde você estiver fazendo isso. A outra coisa que você pode fazer é que, eu fiz o tamanho do meu telefone, que é um telefone genérico de tamanho Android, você pode estar usando um tamanho plus ou eu não sei, os iPhones são muito mais longos, então você tem permissão para. Torne perfeito para o seu telefone. Você pode clicar nele e alterar a altura e a largura. Você pode pesquisar no Google qual é a largura e a altura do pixel para o seu telefone. Você pode ver o padrão. Com isso selecionado, você pode acessar a ferramenta Apple e, na verdade, ela não atualiza, mas você não pode ver aqui. Se você sabe que tem um iPhone 13, aqui está, você pode digitá-los. Bem, você não precisa se lembrar, você pode começar a digitá-los aqui. O que é isso? Dimensione um pouco mais largo, 390 e faça isso para cada um deles. Reajuste para que fique bem no seu telefone. A única coisa que você pode ter que fazer é dar uma olhada. Vamos fazê-lo corretamente mais tarde. Mas uma coisa que você pode ter um problema. Vamos dar uma olhada em quão alto é isso, 844 é muito mais longo. [RISOS] Uau, muito maior. Esse telefone. Nem sei qual escolhi. iPhone 13. Essa coisa aqui, esta é a sua viewport abaixo. Você pode ver aqui que sua janela de exibição corresponde a onde quer que a altura do seu telefone esteja. Se for 844, faça-o 844, caso contrário, ele o cortará um pouco. Basta fazer qualquer que seja a altura e vou explicar o viewport. Você pode simplesmente pular para a viewport se você estiver totalmente enganado por ela. Há um vídeo chegando, mas isso é uma coisa que você pode mudar. Teste em seu telefone. Fique animado com o seu design, esteja no mundo, teste-o, faça ajustes, faça uma captura e te verei no próximo vídeo. 23. Como começar com animações auto-: Oi pessoas. Você está pronto para sua primeira animação? Temos feito animação. Mais transições, estamos fazendo isso. A transição da página inteira acabou. Agora, o que queremos fazer; isso é animação de página inteira, são objetos individuais. Você está pronto? Como eu chego lá? [RISOS] Aqui vamos nós. Agora você está pronto? Bem, olhe para isso. Isso cai, a flecha se move para o outro lado, desaparece. Isso é animação no Adobe XD, e você e eu vamos fazer isso agora. Vamos pular. Vamos fazer essa animação. Então, vamos dar uma olhada nesta pequena seta aqui, então nossa página de Confirmação. A maneira como isso funciona é estranho, não é como uma animação normal se você dias do Adobe Flash ou do Adobe Animate ou do After Effects, ou qualquer coisa [RISOS] que tenha uma animação. Esta é uma animação sem linha do tempo, duplicamos pranchetas e as conectamos. Se parece estranho, é um pouco estranho; um pouco desajeitado, mas funciona. O que vamos fazer é nesta primeira página eu vou ter essa seta. O meu está em duas peças. Vou tê-lo por este lado, mantê-lo na prancheta por enquanto. Um dos conceitos básicos neste vídeo e, em seguida, no próximo vídeo, iremos um pouco mais extremos, ou principalmente mostraremos a si mesmo que pode te surpreender. Vamos ter essa seta ao lado e duplicamos esta prancheta. Você pode selecionar o nome, clicar com o botão direito do mouse nele e duplicá-lo , copiar, colar. Eu só uso o comando C ou Control Z em um PC e V. Copiar, colar. Então, os dois. Hífen 1, provavelmente deveríamos chamá-lo de algo melhor, mas hey hyphen been está funcionando para mim. O que precisamos fazer se isso funciona, há algumas coisas que precisam acontecer. Ei, você precisa mais de uma prancheta e a outra é a coisa que você quer animar precisa ser nomeada da mesma forma em ambos os lados. No nosso caso, quero o meu agrupado porque não quero animar a seta separadamente do bit de perseguição; isso depende de você, então vou selecionar ambos segurando “Shift”. Bem, acerte. Vou clicar em “Grupo” para que você possa clicar com o botão direito do mouse ou ir Comando G, Control G em um PC para agrupá-los. Aqui, este chama-se Grupo 13 e este é chamado Polígono 1, Caminho 1 e Caminho 2. Isso não vai funcionar. Ele procura os nomes, então é assim que ele faz sua magia quando você usa algo chamado auto animate e não funcionará sem ele. Então, novamente agrupe-os aqui. Um é chamado 13 e este chama-se 14, então isso não vai funcionar. Vamos chamá-los de 13. É útil se você nomeá-los antes de duplicar a prancheta, mas eu quero mostrar a você da maneira mais difícil [RISOS] para que você possa fazê-lo da maneira mais fácil mais tarde. Esses são os mesmos. Algo precisa ser diferente, estou movendo este. Se você segurar “Shift” enquanto estiver arrastando, ele o fará em linha reta. Agora nada vai acontecer, precisamos adicionar a animação. Vamos clicar na seta, vamos mudar para o modo Protótipo. Eu não quero ficar muito difícil para atalhos, mas você pode ver aqui se eu passar o mouse acima dele no meu Mac, é a opção 1, opção 2. Há muito quando você está fazendo coisas. Em um PC é Alt 1 e 2, então 1, 2, 1, 2, 1, 2, 1, 2. Alternando entre design e protótipo, ou basta clicar no botão. Protótipo, vou dizer que você vai até aqui. Por padrão, está em transição, e foi isso que fizemos nos últimos vídeos. Fizemos a transição da página inteira e dividimos e adicionamos a flexibilização. Nesse caso, vamos passar de tipo em ordem animate. Isso parece muito bem o mesmo nome e preenche todas as lacunas para nós. Foi no grupo 13 e procura o grupo 13, e apenas tente combinar os dois. Vamos apenas visualizá-lo. Vamos clicar no nome “Conformação” e vamos clicar em “Play”. Vamos fazer isso algumas vezes, então vou deixar isso aberto permanentemente aqui. Vamos dar um toque. Estamos lá, fizemos isso [RISOS]. Primeira parte da animação. Parabéns, você dá uma chance. Há animação, esse é o básico de qualquer maneira. Vou usar minhas teclas de seta para voltar. Você pode ir aqui e comprar. Clique em, [RUÍDO] ele se move. Está funcionando. Não é o que eu quero, quero que ele passe automaticamente. Vamos fazer essa coisa ao lado dela. No momento em que temos isso quando é grampeado, faça essa animação automática para esta outra página chamada Conformação também. Não é o que eu quero. O que vou fazer é quebrar esse link. Você se lembra de arrastá-lo de volta, e é por isso que eu faço. O que vamos fazer é toda a página em vez de apenas a seta, porque eu quero clicar nisso. Quero que a página inteira vá aqui. Deve lembrar a última coisa que você fez. Vai dizer a página inteira Auto- Animate quando for tocada, e funcionará. Vamos aqui, então vamos clicar neste aqui para finalizar a compra. Quando clico em qualquer lugar, ele se move. Ainda não está certo. O que eu quero fazer nesta página é que eu queria animar automaticamente, mas não quero que ela toque. Eu só quero configurá-lo depois de um certo período de tempo e, no meu caso, zero segundos. Desta página para esta página após zero segundos, anime automaticamente para esta outra página. Isso faz sentido, então checkout. Clique em. Ei, olhe para nós. Fizemos isso e animamos automaticamente. Para o usuário, se voltarmos algumas setas, ele só verá uma seta se movendo. Não é realmente um problema, é apenas a maneira que o XD decidiu fazê-lo; é que eles decidiram que cada quadro-chave é uma prancheta real e é assim que você a anima. animação complexa dentro do XD é problemática. Fiz animações onde elas podem ser 10 ou 20 dessas pranchetas, e isso não é ótimo. Existem outras ferramentas para fazer animação para a web. Coisas como o Adobe Animate são boas, mas você já ouviu esse protótipo? Além disso, devo observar que estamos fazendo animação aqui. Não deveríamos estar fazendo isso na armação de arame, mas este é um curso e é divertido. Eu não estaria fazendo animação nesta fase só porque não é hora de encantar os clientes. Esses tipos de animações, microinterações, ou coisas pouco bem-sucedidas devem acontecer mais tarde nos desenvolvimentos finais. É a cereja no bolo; não o wireframe, mas precisamos aprender essas coisas para este curso. Então a seta em movimento é. Nós fizemos movimentos, você pode fazer muitas coisas. Vou voltar para o modo Design, e vou diminuir isso. Bem, isso não funcionou porque está tentando manter o tamanho do nosso traçado e alinhar tudo e ser chique. Por padrão, veremos isso novamente mais tarde. Redimensionamento responsivo, que é extravagante. Está tentando fazer algumas coisas que não queremos fazer agora. Com este selecionado, vou dizer desligue essa coisa, então vou dizer você lá. Vai ter um tamanho maior aqui, vamos dar uma chance a isso. Vamos clicar nesta prancheta aqui. Clique em “Comprar”. Hurrah. Ele fica maior e se move. Você pode fazer outras coisas, você pode decidir sobre a rotação. Vou decidir fazer isso. Vai começar 180 de onde está, vai virar. Vamos dar uma pequena olhada. O que você veria lá? Eu perdi. Você clica em um, clique em mais um. Hurrah. [RISOS] Você tem a ideia assim. Lembre-se de girar as coisas. Eu tenho minha ferramenta de seleção. Passe o mouse do lado de fora daqui, você pode fazê-lo manualmente. Vou desligar o meu porque não parecia desejável. As outras coisas. Tamanho, você pode fazer. Você pode fazer rotação e fazer opacidade. O que não posso fazer é que não consigo excluí-lo daqui. Se eu excluí-lo do lado esperando que ele tenha ido daqui e ele apareça aqui e talvez desapareça magicamente, não vai. Vamos comprar, e ele simplesmente aparece. Não sabe o que fazer, porque não sei onde está o original. Só vou desaparecer como padrão. O que precisamos fazer; é desfazer isso, é que não o excluímos. Acabamos de virar a aparência; essa opacidade aqui, vire para a direita para baixo ou tanto quanto você quiser. Vai começar por aí e passar para este. Vamos dar uma chance agora, checkout. Pronto. Desaparece e se move. Agora não brincamos com flexibilização, então vamos dar uma olhada. A página de confirmação mudará para o protótipo e facilitará a entrada e saída. O que isso parece? Parece muito bom, você pode aliviar talvez. Alimentar é como imaginar adicionar alguma cola pegajosa para dentro ou para fora. A saída é deste lado; a parte final da animação e a facilidade de entrada é o outro lado. Se eu me acalmar se eu clicar neste e apenas ir aqui. Assista. Vai começar rápido e, em seguida, colado pegajoso. Pronto? Pode ser difícil ver sua flexibilização porque a duração é bem curta, então vamos até um segundo. Nós vimos, eles não ouviram. Você pode ver que ele começa rápido e vai mais devagar no final. Estou odiando minha animação, mas [RISOS] o tamanho das coisas está me matando. Vamos para Projetar e desfazer esse tamanho. É difícil vê-lo, só estou adivinhando o tamanho. Sim, parece menor. Tenha uma brincadeira com a flexibilização por conta própria. Vamos dar uma olhada no protótipo, então vamos aliviar. Brinque com eles. Você sabe o que um salto faz. Dê uma olhada no snap e acabe, na maioria das vezes, se você não tiver certeza apenas para entrar e sair. Coloca cola em ambas as extremidades, por isso é lento em ambas as extremidades e vai mais rápido no meio e muitas vezes parece muito bom. Isso geralmente é um bom movimento natural e, em seguida, digital [inaudível]. As regras para animação, você precisa de pelo menos duas pranchetas. Nessas pranchetas você precisa de algo que mude com o mesmo nome. Vamos apenas fazer um pequeno exemplo. Temos duas pranchetas. Essa coisa aqui é chamada. Aqui, este chama-se Icon-Twitter. Ótimo, então não precisei mudá-lo. Se você realmente nomeou as coisas manualmente, ele se lembra disso e diz : “Provavelmente ele quer manter esse nome”. Enquanto que se fosse um grupo aleatório ou linha aleatória, ele apenas duplica e você acaba com o grupo 10, 11, 12, essas coisas. Mesmo nome, essa é a seta; duas pranchetas. Algo entre os dois. No nosso caso, vamos fazer o salto aqui embaixo, então ele só vai se mover para baixo. Isso é apenas diferença. Você está pronto para isso? Nós vamos encantar você e trazer outro problema que eu sem querer, abordar. Equilíbrio, então você está pronto? Legal. Olhe para isso. Você vê, você diz “Oh, isso é bom para isso, mas a flecha é estranha.” Posso fazer isso separadamente? Não. É muito rudimentar como na animação ou toda a prancha de arte tem que fazer isso. Você não pode aplicar partes separadas de atenuação e animação a partes individuais principalmente. Vou te mostrar no próximo vídeo. Vamos dar um mergulho um pouco mais profundo, mas duas pranchetas precisam ser nomeadas da mesma forma, algo de tamanho diferente. Você pode usar cores, usar rotação, usar opacidade e eles precisam ser nomeados da mesma forma. Eu os vejo? De qualquer forma. É isso para este vídeo, vamos pular para o próximo. 24. O conhecimento sobre a animação no Adobe XD: Olá, todos. Vamos levar nossa animação para o próximo nível. Não fique muito animado. Mas vamos “Comprar” slides fora da tela e, em seguida, a verificação aparece. É para mostrar o próximo passo. Fizemos algo bem simples no último vídeo, e isso nos mostrará como fazer algum tempo extra diferente, como iniciá-lo da prancheta e alguns problemas que você vai encontrar. Talvez seja um pouco avançado para esta etapa do curso, mas precisamos cobrir essas coisas cedo o suficiente para que possamos repeti-las algumas vezes, e eu vou definir alguns projetos de classe e você provavelmente vai encontrar alguns dos problemas que vou esclarecer da melhor maneira possível neste vídeo. Se você estiver pronto, estou pronto. Vamos fazer isso. Para fazer essa animação e vamos dar uma olhada nela. Então, se você quer que as coisas aconteçam como no momento, tudo acontece ao mesmo tempo, que é como aquelas coisas que acontecem e todas acontecem ao mesmo tempo; mesmo flexibilização, mesmo tempo. O que eu quero fazer é, na verdade, eu quero que as coisas aconteçam. Eu quero que essa pequena marca de seleção venha somente depois que a flecha se foi. O que vou fazer é arrumar as coisas e mostrar como arrumar as coisas. Eu não quero que isso salte para o Twitter porque é um pouco distrativo para este tutorial. O que vou fazer é tirar isso, acabei de deletá-lo, então você vai notar que ele se foi agora. Vamos voltar um. Está lá e não sabe o que fazer com ele, então eu o excluí. Ele só desaparece. O que eu vou fazer é realmente pegá-lo, copiá-lo, colá-lo aqui, verificar se tem o mesmo nome, às vezes ele é adicionado um pequeno número depois. Mas não, não o mesmo. Vamos visualizá-lo novamente. Sim, vá. Apenas as setas funcionando, mas o que eu quero fazer é que a caixa de seleção apareça. O que vou fazer é de lado, vou voltar ao design. Vou fazer, enquanto minha pequena flecha? A flecha será o caminho oposto. Quero que comece e depois desapareça. Vamos testar isso. Sempre esteja testando. Sinto que sou super bom nessas coisas. Se eu tentar fazer cinco passos pensando que vai ser ótimo, vou visualizá-lo e perceber que algo deu errado. Então, basta testar depois de cada pequena alteração que você fez apenas para garantir que você não tenha corrigido tudo. Porque não é divertido desfazer 10 vezes para começar de novo para algo simples que você possa ter corrigido no início. Temos essa animação. Em seguida, queremos que a caixa de seleção apareça. O que acabamos fazendo é copiar colar e ter outro. Vai aqui, desaparece. Ele permanece desbotado e o que eu quero é que o carrapato apareça. O que eu preciso fazer é ter um carrapato neste e neste. Vamos trazê-lo em nossa importação de arquivos, Command Shift I. Acho que é o Command Shift I, e seus arquivos de exercícios, onde estão esses? Há um chamado ícone tick. Você pode obter o seu próprio. Carrapato ginormous. Segure Shift, diminua a escala, então ele vai começar aqui. Vou copiá-lo, colá-lo aqui, então está exatamente na mesma posição, e este, eu quero que a opacidade fique baixa. Olhe para isso. Vamos dar uma chance, então temos 1, 2, 3 desses. Até agora caixa de seleção e nada acontece. Você sabe por quê? [RISOS] Vou fingir que fiz isso de propósito para te ensinar uma lição. Mas não, eu esqueci. Existe esta página aqui. Se formos para o modo protótipo, ele diz ir lá depois de algum tempo, exatamente zero segundos vão lá. Este não sabia a mesma coisa, só chega aqui e vai, eu não sei o que fazer. [RISOS] Podemos realmente ir aqui depois de se lembrar da última coisa que fiz tempo zero segundos e não vou fazer com que ele salte. Vou fazer com que ele comece. Quando as coisas desaparecem, além de saltar, realmente não importa se você aliviar, facilitar ou nenhum. É tão difícil dizer uma flexibilização apenas com coisas que estão desaparecendo. Não se preocupe, então vamos começar nesta página. Vamos jogar. Vamos comprar essa coisa, deslizar e depois isso desaparece. Olhe para isso. Se você é como tudo o que aconteceu, eu queria que a flecha desaparecesse por um tempo antes do carrapato aparecer. Você pode fazer pequenas coisas assim. Então este aqui, dizemos, quando chegar a esta página, comece a seguir em frente imediatamente, você pode dizer, na verdade, apenas espere dois segundos, cara, relaxe. Você espera lá. Vamos. Até agora esta página reproduz os dois primeiros, espera um pouco, joga a segunda. Dois segundos é muito longo, parece. [RISOS] Você tem a sensação, eu não sei. Nós o levamos para outro nível. Adicionamos três. Você pode ter 15 se quiser tentar fazer com que XD faça sua animação, dobre à sua vontade. isso fica muito complicado, mas dê passo a passo. Tudo bem. A última coisa que quero mostrar , é razoavelmente complicado. Eu adoraria que fosse mais tarde no curso, mas sei que vou definir um projeto de aula e você vai sair e encontrar esse problema. Então, vamos identificá-lo e entrar lá agora. Novamente, se parecer um pouco difícil demais, é um pouco difícil demais no início deste curso. Faremos isso novamente mais tarde e ficará mais fácil e fácil. Estou fingindo que sou você, sou suas mãos e vou para Design, vou para a minha prancheta. Então eu disse que tenho que fazer animação, vou pegar este telefone. Vou mudar meu aqui sem uma boa razão apenas para mantê-lo separado. Sei que vou pegar um círculo, desenhá-lo. Vou escolher uma cor de preenchimento e ela será minha animação. Vou escolher, não sei. Uau, o que é essa cor? Essa é a cor. As regras eram que você precisa de duas delas. Vou copiar e colar dois deles e o que vou fazer é ter certeza de que é o mesmo nome, então este é chamado Elipse 6. Vamos chamar isso de Animação 1 e eu chamarei isso de Animação 2. Você não precisa nomeá-los, apenas para deixar claro neste curso. Na Animação 1, há algo chamado Elipse 6. Isso se chama Elipse 6, ótimo. Isso vai funcionar. O que vou fazer é começar você fora da tela e é aí que o grande problema acontece. É aqui que cometemos um erro porque você gosta, eu vou iniciá-los fora da tela e depois vou movê-los. Começa aqui, lembre-se Dan disse, quero mudar para protótipo. Quero conectar essas duas páginas. Eu quero que o gatilho seja logo depois de algum tempo, talvez após zero segundos para pedir animate aqui. Como o nome é o mesmo, vai funcionar. Quando eu clico em “Play”, está apenas desaparecendo em vez de entrar. O problema é que isso não está na verdade na Animação 1. Está ligado, lembra do pasteboard? Lembre-se que tenho todas as minhas páginas e, em seguida, há um Pasteboard 1 aleatório. Esse é o problema. Como você conserta isso? É tudo sobre tempo. Se eu desfazer isso, então volto para aqui. Não adicionei meu gatilho e não movi isso para fora da tela. Antes de fazer qualquer coisa, é toda essa animação. Se eu disser agora antes de movê-lo para fora da tela, se eu adicionar essa animação que diz tempo de gatilho, eu fiz tudo isso, e se eu movê-la agora, “Ei, ele vai tentar mover isso fora do pasteboard, mas vai quebrar minha animação automática. Então eu não vou deixá-lo, está fora da tela, mas não está mais no quadro de pasteboard. Ainda está ligado. Minha nomeação ficou [inaudível] demais, mas você entende a ideia. Lembre-se de Hífen 1, Hífen 2. Ainda está no hífen 1, mesmo que eu tenha empurrado isso aqui. Portanto, certifique-se de adicionar o auto animate antes de começar a se mover e ele tentará mantê-lo conectado a você. O único outro problema é como é isso, ele desapareceu na área de trabalho aqui. Você pode selecioná-lo. É um pouco complicado. Por aqui, como eu disse, existem algumas peculiaridades engraçadas para o XD e a animação, mas eu o selecionei. Vamos jogar agora. Ele segue em frente. Ele precisa de alguma flexibilização. Vamos aliviar o snap. Vamos olhar para esse. Pronto? Jogue. Tem essa facilidade de encaixe. Ele vai para frente um pouco e volta um pouco, voltando um pouco e um pouco, parece muito bom. É isso. Se você estiver fazendo animação, levá-lo às páginas e apenas adicionar animação automática logo no início, e isso significa que, se você acabar arrastando algo da borda para o quadro de trabalho, ele o manterá conectado. Você pode arrastá-lo para a página certa depois? Não consigo trabalhar de uma forma. Você pode trabalhar de uma maneira, mas você tem que separá-lo e começar de novo, adicionar a ordem animada cedo. Agora, esta versão aqui em cima funcionará principalmente porque eu adicionei o auto animate primeiro antes de arrastá-lo . Deixe-me mostrar a você. Vou adicionar um pouco de espaçamento aqui para poder movê-lo para fora da tela. Lembre-se de que ele começa aqui e veja, ainda faz parte desta página de confirmação porque animate automático já está aplicado antes de eu arrastá-lo. Isso é útil? Sinto que isso é muito complicado até agora no curso, mas estamos chegando lá. Onde você está de novo? Ei, ele começa fora da tela, faz um pequeno salto, desaparece e vamos esperar que nosso pequeno carrapato apareça. Isso leva muito tempo. Isso é animação de próximo nível. Temos uma prancheta extra para brincar com o tempo porque sabemos que temos que fazer a mesma flexibilização e o mesmo tipo de animação entre a prancheta inteira, não as individuais, mas podemos falsifique por ter mais de uma prancheta, e você pode ter problemas se estiver tentando tirar algo do lado e arrastá-lo se você não adicionar o auto animate primeiro. Acaba no pasteboard, o que é ruim. Isso se tornará cada vez mais útil quando fizermos coisas como navegação. Mais tarde, no curso, vamos clicar nisso, e toda a navegação vai deslizar, não apenas uma seta manca, e precisamos fazer esse truque, caso contrário, ela acabará no quadro de trabalho. É isso. Vejo você no próximo vídeo. 25. Projeto do curso 05 - Minha primeira animação: Certo, hora do projeto da aula. Você vai criar sua primeira animação. Se você é novo animação e está achando isso pouco complicado, recrie o que fizemos no vídeo e faça o upload disso. Se você está se sentindo corajoso e confiante e vai fazer algo, eu quero que você faça algo um pouco diferente. Fazer com que as setas deslizem e não há diversão. Pense no que você pode fazer. Você pode fazer com que ele venha de uma direção diferente. Pode ser uma forma diferente, talvez um ícone diferente. Pense um pouco sobre como você transmitiria a ideia do pedido recebido e eu gostaria de vê-la. Dependendo do seu computador, Mac e PC, o que você pode fazer é gravar sua animação e fazer o upload dela. Vou te mostrar como fazer isso. No XD, você pode visualizar sua animação, então eu vou te dar. O que você pode fazer. Você pode ver este pequeno botão de gravação em um PC, está sobre este lado esquerdo. Em um Mac é relativamente simples, você clica nele. Vai me pedir sobre minhas preferências do sistema. Deixe-o fazer a gravação, tudo bem. Você os acerta. Abra as configurações em meu único XD precisa de permissão, encerre e reabra mais tarde. Parece funcionar apenas quando você faz mais tarde. Agora, se eu bater na gravação, você pode definir um pequeno temporizador? Vou para isso e essa é minha animação. Vou parar com isso. Vai me perguntar onde salvá-lo. Deixe-me colocar o meu na minha área de trabalho no momento. Vamos ver o que temos. Então, desktop, você tem um pouco de MP4 me mostrando minha pequena animação e essa é a que eu quero que você carregue os dois para o seu [inaudível]. É um círculo agora porque é destinado a representar um dedo usando seu touchpad ou pelo menos tocar na tela. Então, em um Mac, isso é relativamente fácil. Em um PC, não é tão fácil. Acho que os botões de gravação à esquerda e podem pedir que você use o software de alguém. Acho que ele usa o software de registros Microsoft Xbox e vê até onde você chega. Se você gosta, preciso instalar coisas que são muito difíceis. Se todo mundo estiver na cesta muito difícil, eu adoro que você tente porque eu gostaria de ver sua animação. Mas o que você pode fazer é, na verdade capturar todas essas três animações ou duas se você já fez duas. Se você tiver tempo e quiser praticar, faça 10 tipos diferentes de coisas acontecendo. Mas se você quer apenas o básico, faça uma animação simples e faça uma captura de tela dela, faça o upload dela. Adoraria ver este. Então, até agora, você o fez upload nos comentários e em todos os recursos de atribuições no site. O que você pode fazer agora é que eu gostaria de começar a ver coisas nas redes sociais. Em seus arquivos de exercícios, há uma página de grupo chamada Bring Your Own Laptop Online. É um grupo no Facebook. Há um grupo do LinkedIn de nome semelhante. É chamado de grupo Traga seu próprio laptop LinkedIn. Todas essas são minhas alças para Instagram e Twitter, marca-me nelas e eu realmente gosto de vê-lo. Você também pode dar uma olhada e ver o que outras pessoas fizeram. Use a hashtag XD, ela ajuda você a procurar coisas e ver o trabalho de outras pessoas. Mas sim, faça isso, upload para o local normal, mas também procure enviá-lo para as mídias sociais, e quando você está fazendo upload para as mídias sociais, você coloca lá em cima como, ei, esta é minha primeira animação . Eu adoraria alguns comentários e somos um grupo muito amigável. Se você está um pouco preocupado com isso, não sabemos que você colocou para cima. Nós nos certificamos de moderar nosso grupo. Sei que definimos alguns ótimos valores que isso é para novas pessoas, se você for uma nova pessoa, faça o upload, receba algum feedback. Diga-nos quais problemas você teve, que coisas você gostaria de fazer. Como essa pessoa fez essa? Você pode me mostrar ou o que você pode me dizer? É esse tipo de grupo no Facebook. É menos do show de glamour do Instagram e mais, veja o que eu fiz. Estou animado, embora talvez no grande mundo da animação, talvez não seja o melhor do mundo, mas tudo bem. Estamos aqui para aprender, pedir críticas se você quiser, caso contrário, poste e diga que é isso que eu inventei polegares. Deixe-nos saber como você está encontrando o curso. Uma coisa é que quando você está enviando para os vários lugares, algumas mídias sociais permitem que você simplesmente jogue o vídeo diretamente neles e faça com que ele funcione. Mas alguns dos comentários e alguns dos envios de exercícios, você terá que enviá-lo para algo como YouTube, Behance ou Vimeo ou outra coisa primeiro e depois colar o link. Ele será visualizado através do link em vez do vídeo real em si. Se isso soa muito difícil para você, basta fazer capturas de tela. Tudo bem. Mas eu adoraria vê-lo lembrar e postá-lo na gratuita do YouTube ou na conta do Vimeo ou no Behance ou o que você puder fazer para hospedá-lo em algum lugar, seu vídeo e, em seguida, basta postar o link. Então é isso. Faça sua primeira animação, simples ou avançada, faça o upload, eu adoraria vê-la. É isso. Vá para sua lição e eu te vejo no próximo vídeo. 26. Compartilhando wireframes para receber comentários no Adobe XD: Olá a todos. Neste vídeo, compartilharemos nosso wireframe com nosso cliente neste caso. Vamos enviá-lo para eles. Eles vão poder expressar o nome dele, Neil e eles vão adicionar comentários e pinos diferentes. Este aqui, eles podem adicionar pinos para zombar de coisas específicas para me dizer, sim, para me dar feedback. Como designer, vou mostrar como criar o link, enviá-lo para eles e como você trabalha com esses comentários entre você e seu cliente. Vamos pular para começar. Vamos para esta terceira guia aqui. Revisões de design, revisões de protótipos, agora vamos dar uma olhada no compartilhamento. Compartilhar nos permite deste lado aqui enviar um link para, vamos chamá-lo de Neil. Neil é um personagem fictício. Ele é uma criatura simples. Eu o uso como exemplo porque quero manter isso simples para quem eu estou enviando. Porque eu não sei o nível de experiência deles em um computador, esse tipo de coisa, então isso é um Neil. A primeira coisa que precisamos fazer é definir estranha essa animação começa. De volta aqui no protótipo, clique em onde você quer que essa coisa vá. Se você tem dois como acabei de fazer, você desliga um, desliga e apenas tem um ligado. Você pode ter vários fluxos. Isso é demais para o que estamos agora, mas vamos ter apenas um fluxo, pelo menos em uma dessas páginas. É aqui que ele vai começar. Posso compartilhar, vou escolher o fluxo 1 e o mais comum é a revisão de design. Vai permitir comentários, o que é a grande coisa. Depende de você e quão seguro você precisa ser, se ele vai ser protegido por senha, você apenas dá uma senha ou pessoas que você enviou por e-mail, ainda não protegidas por senha, mas não qualquer pessoa com o link pode acessá-lo. Quero que qualquer pessoa com um link para acessar. Tudo o que você faz é clicar em “Criar link ”, ele pensa sobre isso por um segundo e você deve obter um pequeno URL. Essa é a coisa que você quer compartilhar. Você pode enviá-lo para Behance, você pode incorporá-lo em um site, se quiser. Vamos apenas enviar um link. Vamos copiar o link, e vou abri-lo e fingir ser Neil. Espere aí, vou colocar meu chapéu Neil. Sou Neil e tenho o link em um e-mail ou DM ou algo assim, você enviou para ele. Eu abro para ele e é isso que Neil vê. O bom disso é que Neil não precisa fazer login, o que provavelmente é uma das grandes vantagens aqui. Cai um pouco quando você precisa se inscrever uma Adobe ID apenas para revisar seu trabalho. Este aqui, eles podem fazer tudo como convidado. Eles podem começar a interagir com ele. Eu sou Neal, passando e estou indo assim, isso parece bom. [RISOS] Vamos voltar. Não tenho nenhum dos meus links resolvidos. Ruim, ruim, ruim. Eu não tenho meus links funcionando, o que é ruim, eu deveria consertá-los para Neil, mas há alguma navegação básica. Você pode ter que educar um pouco seu cliente sobre como isso funciona. Homepage, pedalando por ele. Eles podem usar as teclas de seta e onde fica bom é que digamos que eles decidam que isso é, vamos aprender mais, esse salto, e eu gosto do homem, eles querem adicionar um comentário. Eles podem adicionar dois tipos de comentários, apenas um genérico, clicar em “Enviar” e decidir se vão entrar com sua Adobe ID para ser um pouco mais oficial. É gratuito se inscrever em uma Adobe ID. Você não precisa ter uma licença da Creative Cloud, uma paga, você pode usar apenas um ID gratuito ou eles podem fazer isso. Faremos isso pelo Neil. O mais legal é que Neil começa a interagir, adicionar comentários sem descer o buraco do coelho de se inscrever , senhas e essas coisas. Isso é muito legal. Você pode fazer um genérico para esta página específica, mas também pode fazer uma mais específica. Veja esta página, coloque o pino, é aqui que a educação pode ter que estar com o cliente. Explique que você pode fazer pins e comentários genéricos. Dependendo aqui, você pode decidir sobre este aqui. Eles vão dizer algo assim não é o nosso logotipo, é? Enviar. Isso é um pouco mais específico com um alfinete. Na verdade, está apontando para algo, enquanto este está um pouco mais por todo o lado, como feedback genérico. Como você o acessa em seu site como designer? Não mais Neil, adeus Neil. Vou ser Dan, o designer. Não no momento. Continuamos falando sobre isso, mas eles vão potencialmente trazer os comentários dentro do aplicativo que você gostaria, por que isso está lá? Simplesmente não é no momento. O que você faz como designer é receber um e-mail explicando que alguém adicionou um comentário ao seu link. Você receberá um e-mail notificando-o. Ou você pode simplesmente ir para a versão baseada na web. Mesmo que este link aqui seja para Neil, você pode usá-lo para si mesmo. Vou copiar o link. Lá vai você. Sou o mesmo link do Neil , mas como estou conectado com minha Adobe ID, posso fazer algumas coisas extras. Eu vejo os comentários dos convidados do Neil, o que é legal. Vamos dar uma olhada. Isso está em nosso logotipo. Se eu clicar nele, você vê que ele me levou para a página e ele tem como um pequeno alfinete que se alinha. Mais de um pino você terá números diferentes. Legal. Posso voltar e dizer não. Envie-o, e isso será adicionado a esta história aqui. Agora, Neil pode voltar como convidado e continuar adicionando comentários também e verificá-lo também. Bem, eu poderia decidir que fiz tudo e vou realmente entrar aqui e resolver este, então ele saiu dessa lista. Se foi, está feito, verifiquei isso na minha lista. É assim que você faz comentários. Você pode decidir fazer isso como convidado ou fazer com que a pessoa faça login, um pouco mais detalhes extras para ela, porque eles serão notificados quando houver uma atualização ou se candidatar a você. Digamos que eu decida que o que quer que esteja saltando aqui, vou consertar isso. Voltando a ser Dan, o designer, vou entrar aqui e é esta página aqui. Vou voltar ao protótipo. Esta página aqui tem esse botão aqui, não é? Vamos aumentar o zoom. É esse botão aqui. Ele tem empurrar o salto esquerdo. Vamos apenas fazer uma facilidade, e vamos salvá-lo. Como atualizamos isso? Ele não é atualizado automaticamente. Você tem que dizer a ele para atualizar. Você vai compartilhar e vai para este. Você pode ver o link de atualização? Tudo o que ele faz é olhar para o seu documento e atualizar qualquer coisa. O link ainda é o mesmo. Você não precisa enviar um novo , e você pode dizer, “Ei, Neil, confira esse link novamente”, ou envie para ele novamente e diga, “Ei, confira. O que você acha disso?” Voltei a ser Neil, e fui para o link novamente. Ainda posso ver meu comentário porque o designer padrão não respondeu a ele, mas vamos dar uma olhada. Home page, vamos clicar nisso e mais um pouco à vontade. O que achamos disso? Eu digo, “Bom trabalho, Dan.” [RISOS] Isso é comentar ou o básico de comentar no Adobe XD. A única coisa a ficar de olho é que eles podem, em algum momento, trazê-lo para o aplicativo. Eu realmente quero que eles façam, eles não fazem no momento. Estou dentro do Adobe XD em vez de um navegador, quero poder vê-los aqui. Vamos lá, pessoal. Mas até isso, basta usar esse link para ver os comentários. Você será notificado por e-mail quando eles forem postados lá. Isso é compartilhar seus wireframes com Neil. Adeus, você. Adeus Neil, e adeus a mim. Vejo você no próximo vídeo. 27. Moodboards e recursos de design de UI de alta fidelidade no Adobe XD: Olá a todos. Neste vídeo, vamos falar sobre nos inspirar no seu trabalho de alta fidelidade. Até agora, temos procurado em baixa fidelidade. Falamos sobre isso antes. Lembre-se, wireframes de baixa fidelidade e palavra sofisticada de alta fidelidade para todas as imagens, cores e fontes, parecendo e se sentindo como um aplicativo acabado. Antes de começar e começar a projetar qualquer coisa, eu gosto de obter um pouco de um quadro de humor por alguns motivos. Um para ter minhas próprias idéias de como essas coisas vão parecer, o sentimento por isso, mas também para enviar para o cliente. Antes de começar a projetar, gosto de compartilhar um quadro de humor para ter certeza de que estou no caminho certo. Ambos nos alinhamos e estamos ambos remando na mesma direção. Compartilhando um quadro de humor no início da peça com seu cliente ou Gerente de Produto, seja lá quem for, para que eles possam dizer, sim, isso é o que estou sentindo. Enquanto você pode descer todo esse estilo de chá de marcas de skatistas indie rock. Porque é isso que você sente a Zoe Owl, persona gostaria, mas o cliente está completamente em desacordo com isso e pode não ser que você esteja certo e eles estão errados, é mais que você precisa, pelo menos, estar entendendo uns aos outros ou pelo menos entendendo a persona juntos. Obter um quadro de humor feito rapidamente e cedo para o cliente irá impedi-lo de passar para sempre fazendo 10 versões dele e enviá-las para o cliente e espero [RISOS] uma delas seja boa . Obtendo inspiração, todo esse quadro de humor, onde você o tira? Há muitos lugares. Toda vez que sugiro um em um desses vídeos, eles o fecham ou adicionam um paywall ou algo assim. Vou ficar com os dois principais grandes. Se você tem um que você gosta, para o qual você se inspira, especialmente em torno de UX ou UI, coloque um comentário abaixo com um URL para que outras pessoas possam dar uma olhada. Se for você, dê uma olhada agora e veja o que está lá embaixo. Aqui estão os dois principais grupos de alimentos são Dribbble e Behance e eu vou dar prêmios porque ele está lá há muito tempo. Dribbble, especialmente, tornou-se um estilo de interface do usuário, onde as pessoas compartilham seu trabalho. Você só dá uma olhada, encontra coisas que você gosta e gosta, oh, isso é legal. Gosto desse avatar, gosto de como isso se curva por aqui. Não estamos aqui para roubar ideias, estamos aqui para nos inspirar e mesmo se gostarmos dessa coisa, estamos tipo, essa pessoa não será o logotipo lá dentro. O logotipo significa uma cor diferente e você acaba usando-o como uma postagem inicial. Mas o que você pode fazer é entrar nele e dizer captura de tela. Lembre-se, no meu Mac, é Command, Shift 4 e beba o máximo de detalhes possível. Para mim, pessoalmente, porque você quer poder voltar para esse URL. Nesse caso, quero que meu quadro de humor seja muito bonito, então vou capturar esse pedaço aqui. Você acabou de reunir capturas de tela para o seu quadro de humor. Se você estiver em um PC, você terá que verificar como fazer uma captura de tela. Mas sim, é assim que você começa. Agora, todos são muito diferentes, mas semelhantes. Se você está sendo para ambos, eles têm um sabor diferente e então eu uso os dois. O que fica mais emocionante porém, é quando você fica um pouco mais específico. Digamos que aqui, estou procurando chá. Talvez chá mesmo na interface do usuário, então faça buscas especificamente sobre a coisa que você está fazendo e isso o reduz para coisas que você gosta. Oh, sim, eu adoro essa ideia dos grãos de café derramando sobre o tipo, mas talvez eu faça isso com folhas de chá. Esta é outra maneira de obter quadros de humor um pouco mais específicos, capturá-los na tela, no próximo vídeo, vamos despejá-los em uma página de aparência do quadro de humor. Exatamente o mesmo para Behance, faça pesquisas específicas. Fizemos isso no Dribbble quando olhamos para a categoria em termos de comida e chá. Este aqui você pode estar fazendo seu fluxo de tarefas é muito ao redor do checkout, então o que podemos ir e dizer UI do carrinho, só para ver um pouco mais específico. Carrinhos, provavelmente a palavra errada neste caso, há um pouco de carrinho acontecendo, mas provavelmente, vamos ver a IU de checkout ou a página de checkout. Você pode ter que encontrar o idioma certo para obter o caminho certo e, em seguida, começar a passar e ir, legal, está lá. Você pode apenas notar coisas que você esqueceu de adicionar, você é como, oh, sim, precisamos dessa recaptura ou do subtotal. Você pode ser bastante específico nestes e é por isso que eu incluo prêmios. prêmios são com três ws e o mais legal disso é que é muito engraçado navegar, mas uma vez que você entra nele, é realmente muito útil. No menu aqui, vou dar uma olhada em todos os indicados. Isso é uma coisa de prêmios. Nomeados, vamos dar uma olhada, e você pode ir categorias. Você pode dizer, eu quero ver coisas que tem, você pode ver, eu não consigo ver, comida e bebida. Isso vai fazer um loop, e está pregado. Trouxe para cá e o legal disso é que ele é muito curado, coisas tão bonitas. Além disso, você pode entrar mais longe e olhar as tags e ir, na verdade, eu quero encontrar coisas que tenham página de contato porque é nisso que estou trabalhando. Você pode ter algumas ideias sobre coisas específicas. Novamente, quando eu acertei uma cópia só para obter ideias, faça nossos sucos criativos fluírem. Muitas capturas de tela, despeje-as em uma pasta e, em seguida, veremos você no próximo vídeo. Oh, não, não vamos. Uma coisa que esqueci de mencionar é que procuramos coisas em um site e é muito importante estar procurando no seu telefone também, porque o que eu faço com frequência no meu telefone e tiro capturas de tela não está tanto procurando inspiração, mas realmente olhando para os concorrentes. Eu já fiz alguns. Deixe-me mostrar a você. Eu criei essa pasta chamada Mood Board, e eu estava ligando meu telefone e digitando comprar chá verde. Eu tirei capturas de tela de lugares que você poderia comprar chá verde. Agora, o problema e o mal. [RISOS] Alguns deles são bons, alguns deles são ruins. Só para dar uma olhada e se inspirar nisso. O que eu acho, porém, é que muitas vezes o que eu vou ter que fazer é se eu comprar chá verde on-line, ele vai me dar um resultado muito localizado e eu não moro na parte mais moderna e moderna do mundo. Eu moro em Limerick, Irlanda, que não é moderno e moderno, mas não sei. Alguns dos projetos podem ser, eu não sei. Vamos chamá-los de previsíveis, chatos, previsíveis, embora seja uma palavra melhor. Muitas vezes, o que vou fazer é, com essas outras capturas de tela, ver essas aqui, eu não sei. Você tem uma noção de que eles são um pouco mais emocionantes? Digitei comprar chá verde de Nova York online. Eu escolhi Nova York. Eu não sei. Para mim, [RISOS] Paris, Nova York, eu só escolho lugares que parecem chiques, e provavelmente vou ter a vibração certa que eu quero. Zoe, a pessoa para quem estou projetando da minha persona, ela está procurando esse estilo. Procure Paris e Los Angeles e se você estiver morando em algum lugar que talvez não seja o auge do design internacional, coloque-o em outros termos, tire capturas de tela, até se eles não são bons, apenas as coisas para evitar cores que você possa gostar porque talvez tenhamos que fazer esse logotipo como parte do nosso design. Talvez nós amemos esses rolos do Instagram encravados, coisa do Pinterest, então você tem a ideia. Olhando para os concorrentes também porque eles estão tendo que lidar com muitos dos mesmos problemas que você, as mesmas coisas. Vá até o carrinho, tire capturas de tela, veja o menu. Menu à esquerda, não tenho certeza. Isso vai ser isso. É isso? Não. Há uma última coisa. última vez que prometo, é o Instagram. Mesmo que você não seja pessoa do Instagram, você é como, ei, eu não faço o Instagram. Você pode tentar. Faça algumas pesquisas por algumas tags para UX, design de interface do usuário e é incrível. Começará a lhe entregar coisas muito legais assim. As coisas boas bolhas para o serviço, eu me vi tirando muitas capturas de tela para trabalhos que eu talvez nem estivesse fazendo isso. Só estou olhando para o Instagram, o homem é uma fonte legal, preciso descobrir o que é isso. Captura de tela, envie para mim mesmo. Basta passar algum tempo em um lugar como esse, mesmo que você já esteja lá, obviamente é perfeito. Mas é um lugar bastante visual. Bom lugar, encontre designs agradáveis, siga algumas hashtags como design de interface do usuário, design UX, inspiração diária de experiência do usuário, coisas assim, e você potencialmente se deparará com coisas que vão te inspirar. Tudo bem, é por isso que me inspiro antes de começar a fazer minhas maquetes de alta fidelidade, vou compartilhá-lo com o cliente para garantir que estamos no caminho certo juntos. Tudo bem, é isso. Vamos entrar e construir um quadro de humor. 28. Como criar um quadro de humor no Adobe XD: Olá a todos. Vamos fazer algumas pastas de humor no Adobe XD. Este primeiro aqui, realmente simples, basicamente apenas imagens despejadas em uma página para sua própria referência, e então mostraremos como e por que você pode fazer esse quadro de humor mais curado que vai para um cliente. Vamos pular. Como fazer um quadro de humor. Há duas versões que vou compartilhar com você. Haverá o homem das cavernas fazendo isso por mim mesmo, e então farei uma maneira um pouco mais pensativa que pode sair para nossos clientes ou partes interessadas. Já passei e fiz minhas capturas de tela. Eu os tenho sentados nos meus arquivos de exercícios. Eu os deixei lá para você também no caso de você querer. Confira meus, atribuídos a arquivos de exercícios. Há um que eles chamam de quadro de humor. Isso é exatamente o que eu entrei na Internet e tive uma olhada e coisas que eu tinha um bom pressentimento. Alguns concorrentes lá também. O que eu quero fazer, vou te mostrar o caminho do homem das cavernas. Selecione tudo, pegue, arraste-o para o XD, solte. [RISOS] É isso, o quadro de humor feito. Eu uso isso. Muitas vezes, vou reduzi-lo para baixo, então vou ampliar todo o caminho. Lembre-se do Comando 0 e pegue tudo isso, e então vou movê-lo e reduzi-lo. Isso é bom o suficiente para quando estou trabalhando apenas para o meu próprio quadro de humor pessoal. Quadro de humor feito. Command Plus ou Control Plus para ampliar, e é isso que uso quando começo a fazer meus projetos. Eu sou tipo, sim, mas nisso, mas como eu fiz isso. Não foi a lugar nenhum, o quadro de humor feito. Se você vai fazer isso dessa maneira, você traz todas essas imagens, há um pequeno problema. Por aqui, você notou naquela época que era todo o caminho até o limite? Na verdade, saiu da área de trabalho. O pasteboard não é infinito. Se você gosta, “Ei, há muitos, mas olhe para todos esses.” Eu selecionei todos eles. Você pode ver que eles estão no meu quadro de trabalho, eles não estão em nenhum quadro de arte, mas eles são um dos meus pasteboard. Mas há tudo isso como onde esses caras vão. Eles estavam fora da página, não sabiam o que fazer com eles. Você pode fazer uma de duas coisas. Se esse próximo bit for realmente difícil, basta arrastar alguns de cada vez, então eles não aparecerão fora da página e lá vai você. Sei que todos eles são selecionados, para que eu possa ver esses gabinetes. Eu clico nisso, mantenho pressionado Shift , clique nesta parte superior , e então eu deveria poder clicar em O. [RISOS] Como faço isso? [RISOS] U, U, U. Posso diminuir o zoom ainda mais? Não pode, como nós te transparamos? [RISOS] Espere lá. Não consigo pensar nisso. Eu tenho assim, segure Shift e use a seta para a esquerda. Isso funcionou muito bem. [RISOS] Como faço isso no passado, não me lembro. Tudo que eu fiz foi usar para desfazer é que eu apenas apertei a seta para a esquerda e ela simplesmente foi, estou até aqui e vou pular todo o caminho. Você faz da mesma maneira, então basta selecionar todos eles aqui. Use suas teclas de seta e elas se lançam de volta para o bloco aqui. Dimensione-os e adicione-os à minha mistura. Isso é o que eu faço quando estou fazendo meu próprio quadro de arte pessoal e é o suficiente para continuar. Quando estou escalando isso, um bom ponto é que eu selecionei muitos deles e se eu pegar a borda, eles fazem algumas coisas estranhas de redimensionamento. O que eu quero fazer é segurar Shift pressionado e pegar o canto e ele irá redimensioná-los todos juntos da maneira que quisermos. Isso é o quadro de humor do homem das cavernas. Digamos que agora eu quero enviar isso para o meu cliente porque é importante para obter minhas próprias ideias, um quadro de humor, mas também é muito importante transmitir onde você está indo em um direção para você como a palavra stakeholders se acostuma muito no design UX e as partes interessadas é qualquer um que seja o cliente, clientes, qualquer pessoa que tenha uma participação nisso. Pode ser seu chefe, seu gerente de produto, pode ser outros membros da equipe, eles terão uma participação neste projeto. Isso é stakeholder, uma palavra que eu odeio. Mas sim, então vamos dizer que estamos enviando para o cliente neste caso. Isso não vai fazer, A porque estamos cobrando. [RISOS] Eles querem ver melhor do que apenas coisas jogadas em nossa página. Também tem que ser mais considerado porque isso aqui é muito confuso para as partes interessadas ou clientes porque eles são como, eu não quero ficar assim. É difícil dizer que essa é a direção quando eles estão comparando esses dois. Vamos ter que passar e dizer, isso é realmente só para mim e não para o cliente. O que eu quero fazer é transmitir cliente a direção que estou indo, e no meu caso, são principalmente esses no topo aqui, além disso, vou sentá-los um pouco melhor. Vamos cobrir imagens e cortá-las mais tarde no curso. Estamos fazendo o quadro de humor, então vou te mostrar o que vou fazer. Vou adicionar uma página. Vou para minha nova ferramenta de página. Vou adicionar apenas este site desktop um, e vou chamá-lo de quadro de humor. O que vou fazer é criar alguns retângulos e você esperar lá. Só vou desenhar alguns retângulos com a ferramenta retângulo. Você os escreve. Para que serve esse lixo? Apenas alguns retângulos e o que podemos fazer é com ele, eu gosto de usar esse método de arrastar. Há mascaramento e outras coisas em um vídeo posterior, mas se você quiser fazer a maneira rápida e fácil, encontre aqueles que você realmente gosta e arraste-os do seu localizador no Mac ou PC e apenas arraste-os direto em uma caixa. Isso nos permite escolher os que realmente gostamos e os faz parecer um pouco mais bonitos. Vou arrastar alguns desses para dentro. O que estou fazendo aqui é que estou me certificando porque, para mim , gosto desta, gosto das cores aqui, mas será muito difícil comunicar ao cliente que essa é uma direção quando também isso é direção. Vou ser um pouco mais claro sobre o que coloquei aqui porque quero tentar títulos juntos para que pareça que estou batendo de uma certa maneira. O que você quer fazer é encontrar o que está mais próximo da direção e torná-lo o maior , alguns bits menores, equipe de apoio menor apenas para ter uma noção de tudo, tentar comunicar seu através de imagens da direção que você está atingindo. Para isso, essas pequenas coisas aqui você pode passar e usar a ferramenta conta-gotas e realmente ir. Quero tirar algumas cores dele. faremos cores novamente mais tarde, mas você pode tirar algumas cores de amostra disso apenas para ter uma noção de um sabor de cores que você pode estar usando nisso. Este documento o enviaria para o cliente. Você pode ter mais de um. Pode haver uma direção aqui que você sinta o cliente pediu e talvez outra que você faça, outro quadro de humor com algo que você pode ser mais apropriado para o usuário, e envie algumas opções diferentes de quadro de humor criativo. Agora, algumas das habilidades aqui em termos de fazer esse quadro de humor e com você ainda para cortar imagens e movê-las , trabalhando em cores. Faremos isso à medida que passarmos pelo curso. Mas eu queria mostrar a vocês nesta fase do meu processo, meu quadro de humor do homem das cavernas e o quadro de humor um pouco mais curado que vou compartilhar com o cliente que são formas aleatórias, mas [RISOS] bem alinhados . É isso para meus quadros de humor nesta fase. Vamos para o próximo vídeo. 29. Projeto do curso - Moodboard: Olá a todos, é hora do projeto de aula. Quero que você construa um quadro de humor. Você pode fazer um exemplo extravagante como esse exemplo de partes interessadas que fizemos no último vídeo, mas saiba que estamos faltando algumas das habilidades com recortar e escolher cores. Faremos isso mais tarde. Nesta fase, podemos apenas fazer os grandes e velhos empacotados todos eles lá dentro. Agora eu larguei o meu todo. Você pode simplesmente ir para a Importação de Arquivos e trazê-los de uma maneira mais sensata. Mas depois que você tiver todos eles, faça uma captura de tela e faça o upload para comentários ou para as tarefas dependendo de onde você está fazendo isso. É isso. Crie um quadro de humor. Uma coisa que eu não abordei é com todo esse fluxo de tarefas em todo esse projeto que estamos fazendo, estamos assumindo uma nova empresa que já não tem uma marca muito forte. Se houver uma marca existente, o que você pode fazer é não pular o quadro de humor, mas pode ser muito mais restritivo. Eles podem ser exemplos de talvez material impresso que eu tenho, seu site existente com o qual você tem um empate. O quadro de humor pode não ser tão emocionante ou tão diferente quanto isso. A outra coisa que você pode ter são fotos de produtos. Vou usar imagens de estoque para um chá verde, mas se este for um cliente real, eles já podem ter as fotografias. Eles podem ser filmados de uma maneira específica para ajudar a impulsionar o design. Eles podem já ter um logotipo que não temos. Puxar um logotipo para o seu quadro de humor e tirar cores disso também será útil. Mas, no momento, temos uma empresa nova. Ele não tem um logotipo para que possamos ir um pouco mais emocionante e amplo com nosso quadro de humor. Faça isso e te verei no próximo vídeo. 30. Como trabalhar com colunas e gritos no Adobe XD: Olá a todos. Neste vídeo, vamos falar sobre colunas, essas coisas tealy. Por que há 12 deles. Por que às vezes você usa seis. Por que você usa uma grade em vez de colunas. Tem tudo a ver com web design responsivo e coisas como pontos de interrupção. Agora, se isso for, se você quiser, eu sou um web designer, entendo que esse vídeo vai ser rápido e fácil. Se você é novo no design web e no design UX, e ainda não experimentou web design responsivo e essas colunas antes, vou tentar explicar tudo em um único vídeo. É por isso que este é um pouco mais longo do que os outros porque há um pouco de teoria que acontece aqui. Vou tentar o meu melhor para tentar explicar tudo. Espero fazer um bom trabalho. Vamos começar. Vá tomar uma xícara de chá, sente-se. Você pode ter que assistir este duas vezes. Espero que não. Vamos continuar. Vamos falar sobre colunas e é mais fácil começar. Estamos falando de colunas no desktop e, em seguida, trabalharemos no celular. Acho mais fácil entender de qualquer maneira. Vamos fazer ferramenta ascendente aqui. Vamos escolher o tamanho do nosso site. Esses são muito comuns em termos do tamanho de um site de desktop. tamanho mais comum do Google desktop ou navegador da Web, no ano em que você estiver, e ele surgirá, vou escolher 1920 aqui. Este também é outro comum. 1920 vai me dar espaço suficiente para fazer meu site. Vou arrastá-lo para cá, e vou chamar isso de minha página inicial. Vamos ter que desenvolver nosso site ou nossa versão para desktop do nosso site móvel também porque ele será visualizado em ambos. Provavelmente começaremos com dispositivos móveis primeiro e projetaremos para isso e depois procuraremos fazer uma versão para desktop depois. Mas em termos das colunas, vamos começar com isso. Eu peguei meu desktop. Vou clicar no nome aqui. Se você não tiver certeza de como estou movendo isso, estou clicando no nome e arrastando-os apenas com a ferramenta de seleção. Agora, para adicionar as colunas com ela selecionada aqui, há essa coisa chamada grade. Você pode ligar esse pequeno carrapato? Há quadrado ou layout. Layout é o que queremos e usa colunas. Ele deve ser usado como padrão 12 se não usar 12. Primeiro de tudo, por que estamos usando 12? O primeiro motivo é porque todos o usam e isso é bom o suficiente por um motivo como qualquer um. Se você decidiu que quer fazer colunas de, eu não sei, 13, você estaria com problemas com algumas pessoas, e principalmente com seu desenvolvedor, porque 13 é um número estranho para dividir as coisas. É difícil dividir ao meio conforme as colunas vão. Também não é divisível por muitos. É um número antigo engraçado. O outro motivo é que seu desenvolvedor ficará louco. Principalmente porque um desenvolvedor geralmente não codificará seu site ou seu aplicativo completamente do zero. Eles usarão alguns atalhos ou estruturas que já existem para acelerar o fluxo de trabalho. Muitas dessas estruturas usaremos coisas como um sistema de colunas pré-existente, e provavelmente será 12. Fale com seu desenvolvedor primeiro, verifique se você está no caminho certo. Diga, sou novo nisso. Se eu usar uma grade de 12 colunas, isso vai ficar bem? Provavelmente, sim. A outra razão pela qual é muito bom é a mesma razão é que quando você está fazendo, digamos, layout de revista. Ele lhe dá consistência em todas as páginas. Isso significa que as coisas colocadas nesta página quando eu pulei para, diga minha página de contato conosco, tudo está remodelando. Há um pouco de consistência de design, um pouco de fluxo. Outro motivo é que 12 é bom e divisível. Vou tornar esta página um pouco mais longa. Digamos que eu vou para a ferramenta retangular. Vou zombar de um site muito rudimentar. Tenho minha barra de navegação na parte superior. Tenho minha caixa de herói no topo. Temos espaço para trabalhar. Este é um grande call-to-action, venda agora em diante, confira nossa mais recente caixa de heróis de produtos aqui. Então, na parte inferior aqui, temos nossa caixa de recursos, e eu vou projetar uma que tenha. Agora, eles geralmente são chamados de cartões como pequenas unidades repetíveis que você pode usar para diferentes produtos, talvez serviços diferentes. O que vou fazer é duplicá-los, então tenho 1, 2, 3. Você pode ver como 12 é um tamanho útil porque significa que posso ir a toda a largura. Posso ter três no fundo aqui. Digamos que se eu precisar de quatro, o que eu posso fazer é realmente ir apenas dividir este 12, aqui vamos nós, e eu posso fazer um, selecionando ambos pressionando minha tecla Alt ou Option em um PC. Na verdade, isso é o oposto. Altere em um PC e opção no Mac. Você pode ver como 12 é útil para isso. Posso dizer aqui vamos nós. Você poderia fazer dois, você pode fazer um, você não pode fazer cinco. Essa é uma das desvantagens aqui. Como se eu quisesse cinco caixas, então você pode. É por isso que temos 12. Fica ainda melhor quando estamos fazendo o que é chamado de web design responsivo. Porque vamos ter que descobrir o que isso se parece em, digamos, mobile. Digamos que exponhamos isso no celular. Vamos apenas fazer um novo. Vamos fazer um novo. Vá em frente. Uma nova prancheta. Vamos torná-lo do tamanho para o qual você está projetando. Sobre este. Digamos que eu esteja usando 12 também porque ele usa a mesma estrutura, não importa se é tablet ou celular ou desktop. É o mesmo site que apenas responde ao tamanho do dispositivo, design responsivo. Vejamos 12. Vou me livrar das minhas margens. Isso é o material nas bordas aqui, zero e o mesmo design para isso. Eu criei este site. O que parece? Um celular, basicamente o mesmo. Tenho meu navbar no topo aqui. Eu tenho minha caixa de herói um pouco diferente porque temos muito espaço na versão desktop, eu tenho esse enorme grande preenchimento branco de coluna, enquanto este eu tenho que ficar cheio para as bordas porque simplesmente não temos o tamanho para brincar no celular. Quando chegamos a esses caras, no fundo aqui, não há como eu colocar quatro ao longo do fundo. Eu poderia. O problema é que eles vão ser muito pequenos, difíceis de ler. Lá vamos nós. Isso não vai funcionar. O que muitas vezes você vai fazer é ir realmente no celular, vamos pegar essa caixa apenas para fazer algo diferente em vez de esta caixa tentar atravessar as três colunas, dizemos em código para dizer: você não precisa se preocupar com isso, mas é uma visão para o desenvolvedor. Você já deve saber melhor codificação, então isso pode ser fácil para você, mas se não, seu desenvolvedor, ele vai para essa caixa, em vez de ser três colunas, na verdade, será, digamos que seis colunas. Você só precisa alterar isso no código no dispositivo chamado móvel B6 em vez de três. Isso significa que é super fácil implementar diferentes designs em diferentes tamanhos. Você decidiu que, em vez de quatro, você decidiu fazer isso como quatro caixas, mas empilhadas umas sobre as outras. Ou você pode decidir que, na verdade, você quer que o enorme em um dispositivo móvel é que você vai apenas empilhar todos eles um sobre o outro, quatro deles. O codificador pode passar e dizer, na verdade, que a primeira caixa, você é realmente a largura total de 12. O que acaba acontecendo, no entanto, onde você está projetando, se esta grade de 12 colunas mesmo sendo usada, é difícil projetar em cima porque essas colunas são muito pequenas e ela pode ser muito comum apenas dizer, vou fingir e escrever seis. Mesmo que 12 possam ser usados, ainda são seis vão para 12 duas vezes, ou às vezes podem ser quatro como o que é usado, novamente quatro é divisível por 12. Você pode apenas projetar para quatro apenas para fazer coisas porque você não precisa tantos detalhes quando chegar a isso. Muitas vezes faço isso a seis. É muito comum fazer isso para quatro também, até você. Não podemos nos aprofundar muito no que é design responsivo, mas deixe-me dar-lhe uma breve demonstração aqui. Este site aqui, HubSpot, eles têm alguns recursos realmente bons aqui para web design e design de UX. Mas esta é a grande versão do site deles. Você notará que aqui nas laterais, há essa grande área vazia, então o site na verdade só ocupa esse pedaço do meio. Quando estamos projetando em uma versão para desktop, muitas vezes você pode ver aqui por padrão, isso está me dando essas margens extras aqui. Você pode decidir que também tem essas margens, ou pode decidir que está projetando para uma tela realmente grande. Vou duplicar isso, e vou dizer que quero que a largura seja muito maior, então, em vez de 1.920, vou fazer isso 2.000. Isso não é muito maior. Trezentos. É um dia ruim. Vamos lá. Podemos fazer isso então. Vamos lá. Aqui vamos nós. Três mil. Você pode decidir projetar para essa tela realmente grande porque você tem uma tela muito grande e sabe que seu cliente tem. Mas dentro daqui, você terá algumas margens realmente grandes em ambos os lados. Você pode realmente criar este site aqui. Na verdade, ele permanece dentro desse pouco, e você faz tudo caber dentro de suas 12 colunas. Mas você pode realmente adicionar algumas coisas em segundo plano aqui. Nesse caso, eles não têm nada demais. Isso se estende, há cor, há caixa colorida, você pode adicionar alguns gráficos diferentes aqui, mas saiba que em alguns dispositivos, eles só verão esta versão. Você pode projetar para esta versão , mas mantenha esta versão aqui. É por isso que você tem essas margens nas bordas aqui. Essas margens aqui, você pode apenas criar um site realmente grande, projetar dentro de suas colunas aqui, mas esteja ciente de que algo tem que aparecer aqui em telas realmente grandes e isso pode apenas ser uma extensão provavelmente, ou cor de fundo ou algum padrão de repetição ou algo assim. Isso é uma coisa. Quando você estiver projetando, projete com um pouco de margem lá. Quando você está projetando para tablets, digamos que o designer desta página inicial do HubSpot aqui tenha que projetar no XD, a versão da página da web, a versão grande, a versão pequena e, seguida, veja o que acontece quando chegamos aqui. Olhe para isso. A versão de design onde nesta tela de tamanho, esse gráfico fica menor e é empurrado para a direita. Mais adiante, olhe para isso. Ele passou de ser um site para assumir que você está em algum tablet ou dispositivo móvel. Você pode ver a grande mudança? O cardápio foi uma grande mudança. Olhe para isso. Muito comum para projetar uma versão móvel, uma versão para tablet e uma versão para desktop. Se você estiver trabalhando em uma empresa maior, eles chamam pontos de interrupção. Eles podem estar projetando para cinco tamanhos diferentes: móvel pequeno, celular grande, tablet, tela pequena, tela grande. Você pode ter que falar com eles sobre isso, sobre o que o desenvolvedor quer de você. Basicamente, é apenas celular e desktop e deixar o tablet de fora e deixar que ele apenas suponha que será a versão do site, mas isso é para trabalhos menores. Mas se você estiver fazendo um cliente maior com um site mais exigente, talvez tenha que acabar fazendo cinco pontos de interrupção, sete. Espero que não em breve. Mas só para você saber, estamos projetando neste curso. Vamos apenas fazer desktop e dispositivos móveis, mas pode haver uma expectativa para tablet em bits intermediários também. Outras coisas que precisamos saber sobre essas colunas é o espaço entre elas. Este espaço entre aqui depende de você só para que você conheça um realmente comum. Estas são as calhas, essas são suas margens, e essas são suas colunas. largura da coluna no momento só se expande para se ajustar ao espaço fornecido. Você controla a calha e as margens, basta deixar a coluna preencher o espaço deixado para trás. Seria muito comum ter uma largura de calha de 18. Em um dispositivo móvel, pode ser algo mais como se eu tivesse uma largura de oito. Em uma área de trabalho, pode ser 16, pode ser 24. Você está trabalhando em incrementos de oito. Você só verá que muito no web design, há muitos incrementos de oito. Então 8, 16, 24, então acontece. Oito é outro número facilmente divisível. Quando entramos no design de aplicativos em vez de design de sites para dispositivos móveis, também é um tamanho de grade bastante comum. Vamos realmente falar sobre isso. Antes de falarmos sobre tamanhos de design de aplicativos vou apenas, não sei. Tenho uma página inicial, tem 12 colunas. Estou usando uma largura de calha de 16 ou 24 ou oito, o que quer que você queira usar, torná-lo divisível por oito para facilitar as coisas. Em termos de margem, você tem que se lembrar se você está usando 140 de ambos os lados, então isso é 280, você está tirando isso porque você está realmente projetando ou eu não posso fazer essas contas. 1.920 menos 280. Você pode realmente fazer contas nesses campos. Na verdade, você está projetando um site para 1.640. Vou desfazer. Esse é esse espaço lá, 1.640. Ele diz isso em qualquer lugar? Isso não acontece. Mas você tem menos a margem de ambos os lados, então esse é o tamanho no meio aqui. Mas não fique muito desligado sobre a largura exata porque todos sabemos que todos têm telas de computador de tamanho diferente, telas laptop, dispositivos móveis, você pode virá-los de lado, paisagem de retrato. Basta obtê-los genéricos e seu desenvolvedor ajudará com toda a capacidade de resposta ou você fará isso se entender o web design básico responsivo. Mas é CSS. Se você estiver interessado em fazer isso, talvez esteja interessado, e mesmo se você não vai se tornar um desenvolvedor web, entender algum web design front-end é realmente útil como designer de UX, especialmente ao projetar web e web móvel. Se você estiver interessado nisso, você pode querer conferir meus outros cursos sobre web design. Há um curso de web design responsivo. Provavelmente o melhor é o Visual Studio Code. Há um fundamento de web designer que o fará entender os conceitos básicos do web design à mão. O último sobre o qual eu quero falar é projetar um celular. Em vez de encontrar um design de site móvel que temos, que é um site que acabou de ser visto no desktop, tablet ou celular, estamos realmente projetando um aplicativo. O que queremos fazer aqui é, em vez de projetar colunas, porque não vai ser responsivo, será uma medida bastante fixa, seja Android ou iPhone, e eles usam algo diferentemente, em vez de as coisas tentarem responder, eles usam esse sistema quadrado muito rígido e usam oito pixels como tamanho quadrado. Use isso para espaciar as coisas. Espaço longe dos lados, mantenha as coisas separadas umas das outras. Isso será o que seu desenvolvedor usará quando você estiver usando as estruturas que eles usarão para o design do aplicativo móvel. Colunas para sites e este sistema de grade para aplicativos. Um pouco mais rígido e específico para o design de aplicativos. Fumaça sagrada, isso foi útil? Uma última coisinha é, digamos que eu faça uma nova. Tem esse garfo e você é tipo, eu quero este. O que você pode fazer é selecionar neste e dizer, na verdade, quero torná-lo o padrão e, em seguida, clicar neste e dizer, usar o padrão. Essa é uma maneira de colocá-lo em várias pranchetas diferentes para garantir que elas sejam todas iguais. É isso. Esse foi um longo e um dobrador de cérebro, eu sei. Espero que tenha sido útil. Vamos para o próximo vídeo. 31. O porto também de uma linha pontilhada na página no Adobe XD: Olá, todos. Neste vídeo, o que é essa linha pontilhada que aparece às vezes, mas depois nenhuma outra vez? O que ele faz? Eu posso movê-lo, não parece fazer nada. A versão curta é, há uma versão de vídeo mais longa [RISOS], mas a versão curta é, é como o que pré-visualizar quando eu aperto este pequeno botão de visualização, minha porta de visualização é o que é chamado. Essa é uma das minhas análises, e as pessoas podem rolar aqui para baixo. Mas se você movê-lo para cá, veja o que acontece. Posso dizer, saia do meu caminho. Isso significa que quando você está rebaixando, sua visualização é enorme e está tentando mostrar a você, o que é um pouco estranho. Isso é o que ele faz. Deixe-me entrar em um pouco mais de detalhes neste vídeo. Vejamos essas linhas pontilhadas. Primeiro de tudo, vamos desligar as colunas. Eles são ótimos quando você está obtendo layout, uma vez que você tem uma estrutura básica lá dentro, e você quer desativá-los. Existe isso [inaudível], clique no título e você pode simplesmente desligar esse tick. Isso os desliga de tudo. Havia uma visualização de atalho, é esta aqui, mostra a grade de layout e você verá em um PC que é diferente e será Control Shift'. Em um Mac, é Command Shift'. Legal. Nós os tiramos. Agora, o que é essa linha pontilhada estranha? Insinuamos anteriormente, é chamado de porta de visualização. Basicamente lembre-se que eu arrastei isso para baixo, estava aqui em cima e eu arrastei para baixo. Ele só aparece depois que você arrastou algo para baixo. Este aqui, não vai tê-lo . Onde está minha linha pontilhada? Lá está lá. Porque o que precisa acontecer é que ele precisa saber duas coisas. Quanto tempo dura sua página e o que você quer mostrar na sua pré-visualização? Vou te mostrar o que quero dizer. Se eu tiver isso aqui em cima e eu for Preview, recebi o nome dele, visualize esta página. Olhe para isso, isso me mostra meu design móvel. Mas se eu arrastar isso maior, e eu colocar algo aqui para baixo que possamos ver, vou fazer uma caixa vermelha. mesma coisa. Visualize isso. Vai funcionar bem, mas exceto que agora há alguma rolagem. Mas se eu estiver tipo, cara, essas linhas pontilhadas estão nos irritando, eu só vou movê-lo para baixo aqui. Livre-se disso. Lá vai você, se foi. O que vai acontecer? Assista isso. [RISOS] Efeito visual dos fios de cobertura. Você está dizendo que a porta de visualização é muito grande, então vou tentar mostrar tudo para você. Isso é o que isso é. Vou desfazer isso. Você pode alterá-lo aqui para digitá-lo. Você pode ver a altura da porta de visualização? Você pode decidir que está trabalhando em um tamanho maior e ele precisa ser 750 ou simplesmente arrastá-lo. Isso é o que ele faz. Deixe-me abrir a pré-visualização constantemente, então não vá embora, assista a isso. Isso é o que ele está fazendo. É estranho se você não sabe o que ele faz. O mesmo para desktop. Se eu clicar nisso, ele está me mostrando toda a minha área de trabalho nesta tela minúscula, então vou fechá-la, abri-la novamente. Versão grande. Aí está, lá. Você pode decidir que sua porta de visualização será um pouco maior. Ele não altera a saída do lado, é apenas a visualização. Quando você cria visualizações para seus clientes verificarem, ele terá o mesmo tamanho de porta de visualização. Apenas certifique-se de que, se você mexeu com ele, visualize, verifique se está realmente fazendo algumas coisas boas e não se exibindo. Seria complicado, como eu fiz isso antes de onde você obtém uma página muito longa, você projeta cargas porque há um monte de rolagem no site e você acabou de sair, tire o **** daqui. Você envia para o cliente e seu rosto com isso quando eles vão para a pré-visualização e eles são como, Dan, o que se passa com isso? [RISOS] Você tem que entrar e dizer, qual é o tamanho apropriado para minha porta de visualização? Nesse caso, será 1080. Verifique o tamanho padrão normal para altura dos sites mais comuns e o Google lhe dirá o que é, muda o tempo todo, mas é isso que essa pequena linha pontilhada faz. Eu não gosto porque está sempre ligado quando você está trabalhando. Quero me livrar disso. Atualmente, não há linha de porta show view. Pode haver quando você estiver mais tarde no futuro. Muitas vezes vou projetá-lo aqui e apenas movê-lo para cá porque eu acertei a pequena linha pontilhada no meu caminho. Tenho que estar atento que, quando envio para criar um link, tenho que arrastar a porta de visualização deles para cima, depois criar o link e compartilhá-lo. Isso faz sentido? Isso é o que a porta de exibição faz. É isso, verei você no próximo vídeo. 32. Como adicionar e excluir guias ao Adobe XD: Olá a todos. Se você é como, cara, essas colunas, eu não quero colunas apenas me dê alguns guias básicos antigos e simples. Como esses guias, apenas os simples que você pode arrastar e se movimentar e fazer o que quiser. Se você quiser não fazer colunas, tudo bem. Não há regras que você precisa fazer colunas, especialmente se você estiver fazendo um projeto autodirigido ou é um pouco mais artístico. Não há um site enorme e grande estruturado que precise todo esse controle rígido com colunas, você precisa de alguns guias, este é o meio pesado. Deixe-me mostrar-lhe como fazê-los. Na verdade, alerta de spoiler basta arrastá-los da borda aqui. Lá vai você. Por que esse vídeo é tão longo? Porque há algumas dicas e truques e outras coisas, mas é assim que você os obtém. Deixe-me mostrar-lhe como. Para fazer alguns guias, criei uma página em branco apenas para começar. É um iPhone 13, antes de tudo, você precisa estar na sua ferramenta Mover, não funcionará se você estiver em outras ferramentas, ou ferramenta Seleção, a pequena seta no topo além dessa, você pode já ter tropeçado através dele. Eles apareceram apenas um dia no XD. Veja isso, se você mouse do lado de fora da página, eles estão lá. Clique em Manter, arraste-o para dentro, você fez um guia. É isso. Você pode ir de cima, arrastar a partir do topo. Estou batendo em Enter para me livrar deles. Se eles ainda não aparecerem, você pode estar em Exibir, em Guias e você pode ter ido ao meu caso, posso vê-los para que eu possa ir até vamos realmente arrastar um. Então posso dizer a alguém que você pode ter usado acidentalmente o atalho para altura ou guias. Então eles não estão funcionando, nem guias. Você entra aqui e apenas verifique se ele diz o caminho certo. Mostrar esconder, você tem a ideia. Certifique-se de poder vê-los. Vamos ser um pouco mais específicos. Digamos que você queira se livrar deles. Como você se livra deles? Clique neles e pressione Excluir, ele não funciona. Você clica em Manter e apenas arrastá-los volta para esta área aqui. Olhe um pequeno ícone, lata de lixo, lá vai você, é como se livrar deles. Vamos ser um pouco mais precisos. Então, digamos que você queira colocar como uma borda de 24 pixels ao redor. Então eu vou clicar e arrastá-lo para fora, e você pode ver que posso ser muito preciso e tenho 24, perfeito. Eu posso fazer isso lá também. Se você tem um touchpad no qual está tentando fazer seu trabalho de design? Eu faço o tempo todo quando estou dirigindo. Você não pode ser tão preciso. Então, o que você pode fazer é ser, às vezes é fácil pegar a ferramenta quadrada, arrastar algo, digitá-la lá, 24 e se você guia, você pode descer da largura para a altura 24. Isso não é essencial, apenas um truque prático. Pegue a ferramenta Seleção, arraste para o canto e, em seguida, vá assistir a isso. Suponha que o zoom um pouco, ele se encaixe no meu quadrado. Você tem a ideia, arraste, estaca, top um, estaca, pega aquele cara, corte-os aqui, cola aquele cara, coloque-o no canto. É apenas uma maneira rápida agora você não pode arrastá-los de baixo ou de cima. Então, há um pouco de rolagem divertida acontecendo. Lembre-se, segure a Barra de espaço, clique e segure e arraste ou use qualquer método que você esteja usando [RISOS] até agora neste curso. Você chegou até aqui, você trabalhou em uma forma de se movimentar. Eu mantenho a barra de espaço para baixo. Isso é um pouco disso acontecendo, como movê-lo para baixo, arrastar um pouco para cima. Então aquele cara, desculpe amigo, você se foi. Não preciso mais de você. Comando 0 para disparar, selecione-o, Comando ou Controle 3 clica nessa placa de aplicativos. Com isso, temos guias. Se você não quiser usar as grades como fizemos na última ou nas colunas. Você só quer alguns pequenos guias, então aqui está, arraste-os para fora, exclua-os e arraste-os de volta. Você pode simplesmente desativá-los porque às vezes eles são úteis para começar e, em seguida, você quer desligá-los. Vá para Exibir Guias e você tem Ocultar guias. Você pode bloqueá-los também porque eles são móveis. Você pode clicar neles e arrastá-los. Você pode decidir que , por favor, pare de fazer isso. Vá para View e trance-os por enquanto. Se você tem outro projeto e precisa copiar os guias, provavelmente o viu lá. Vamos até você. Você pode ver meus guias não se depararam. Eles se deparam se você obviamente duplicar a prancheta, lembre-se de segurar a opção em um Mac Alt no PC. Eu só quero copiá-los para que você possa selecionar na prancheta, você deseja levá-los de ir para Exibir Guias, Copiar Guias, clicar neste, visualizar guias, colar guias. Guias, lá vai você. Você pode desligá-los só porque isso é uma dor na bunda. Você acidentalmente continua arrastando as coisas para fora de cima e de baixo e lá vai você. Isso é Guias no Adobe XD. 33. Inspiração de cores e o colector de cores no XD: Olá a todos. Neste vídeo, vamos ver a inspiração de cores. Vamos trabalhar em cores nesta próxima seção. Aqui, onde você começa? Como você escolhe cores que vão juntas? Sim, é disso que este se trata. Você pode ir a qualquer lugar na internet, colorir inspiração, digitá-la. Você encontrará cargas. Lugares que vou, Color Hunt. Gosto disso para amostras de cores que combinam. O que você pode fazer é dar uma olhada e dizer que isso é para mim. Você pode ver esse pequeno código aqui. É um número hexadecimal, um pequeno código hash para ele. Se eu clicar nele, ele diz que foi copiado. Bom. Se eu agora voltar para o XD e pegar um retângulo, desenhar e clicar aqui meu preenchimento. Você verá aqui embaixo, estamos usando o HSB para peças. Há esse número hexadecimal e eu posso colá-lo lá, clicar em “Enter” no meu teclado e eu o trouxe. Você pode simplesmente continuar copiando e colando e começará a adicioná-los ao seu documento e começar a usá-lo, com base em suas cores. Você pode acabar mudando eles, é claro, mas é um lugar para começar. Agora, outro lugar que eu uso bastante é a cor da Adobe ou color.adobe.com. É gratuito. Você não precisa de uma licença paga para esta. O que eu realmente gosto é de coisas como explorar, ao longo do topo, eles viajam este site, então você pode ter que descobrir para onde as explorações se mudam, mas você pode fazer pesquisas. Você pode decidir como, vamos dar uma olhada no chá e inspirar-se nas cores do chá que outras pessoas decidiram. Você pode decidir isso, aqui vamos nós. Aqui estão algumas cores de chá e cores de chá questionáveis. É para fazer com que os sucos criativos fluam. Estas são a cor do chá e, bem, sim, algumas coisas que faltam. Digamos que você decida que é isso, você é como, sim, acho muito difícil escolher diferentes Browns que vão juntos, olhe para isso, este [RISOS]. Este, eu gosto, eu gosto. Você pode ir “Enter” e copiar e colar os números hexadecimais como fizemos no último. Basta clicar nisso e copiá-lo e colá-lo. O que você pode fazer é usar a biblioteca da Adobe. Vou cancelar. Antes de dizer “Adicionar à biblioteca” precisamos apenas ter certeza de que você está conectado à sua conta da Adobe, adobe.com. Você pode ver minha cara no topo lá. Aí está ele. O que você precisa fazer é garantir que você tenha as bibliotecas certas selecionadas. Crie uma biblioteca, você pode adicionar uma. Eu tenho essa classe 1 do XD aqui, e isso significa que ele vai adicionar a essa biblioteca. Caso contrário, há um pouco de mistério saber a qual biblioteca será adicionada. Vamos “Adicionar à Biblioteca” e não há muita coisa que aconteça [RISOS]. É só a biblioteca. Como você acessa a biblioteca no XD? Dentro daqui, temos esses diferentes, estamos indo entre camadas e nosso painel de ativos, e ainda não usamos plug-ins. Mas este top aqui, que normalmente são ativos, você pode realmente voltar um dele. É um lugar estranho para isso. Se você está pensando que isso parece ser um lugar estranho para isso, é. Aqui estão os ativos do documento, de volta às bibliotecas. Documente ativos, de volta às bibliotecas , só para você saber, é fácil se perder aqui. Você pode ver todas as bibliotecas e se você é como eu, você tem um milhão de bibliotecas. Aqui está minha aula do XD e há essa cor, aquele chá que acabei de fazer. Como usá-lo? Vamos clicar em um retângulo. Você pode simplesmente passar o mouse acima e ir para esse. Você entra nesse. Você pode pegar um monte de diferentes e começar a experimentar o uso dessas cores. A única coisa que eu disse foi que você pode copiar e colar o número hexadecimal. Vamos escolher totalmente aleatório, nada de chá relacionado a este. Mas vamos copiá-lo e aqui, quando eu disse, basta colar como fizemos antes. Você tem que mudá-lo para, eu já te disse isso, não é? [RISOS] Meu cérebro está derretendo. Eu já mostrei a você como fazer hexadecimal. Vou te mostrar duas vezes. Lá vai você. Isso é escolher cinco amostras fora de contexto. O que eu gosto de fazer é usar nosso quadro de humor ou apenas um site como drible e você apenas procurando por cores em vez de estilo. Você pode ser como, eu realmente amo essas cores purply pretas, mesmo que seu conteúdo não esteja certo, você pode decidir que as cores são certas para você. Basta fazer uma captura de tela e fazer o que fizemos com o quadro de humor e trazer sua captura de tela para o XD. Já tenho algumas coisas. O que eu fiz pelo meu é que sabemos o que está no meu quadro de humor. Fiquei cativado por algumas cores. Gosto disso. Esta é uma cor de fumaça verde verde e há um pouco de cor de chá de café quente lá também, então essas são as cores que eu queria roubar, quero dizer, apropriadas, emprestadas. Você pode roubar uma cor? O que você pode fazer é pegar sua ferramenta retangular, desenhar algo. Então aqui, você pode ver, eu vou me livrar da minha fronteira. Veja o preenchimento, o conta-gotas clique na ferramenta “Conta-gotas” e então você pode simplesmente movê-lo e dizer, eu quero você [RISOS]. Parece enegrecido. Mas se você entrar aqui, você pode ver que é parte dessa tonalidade e você decide que eu realmente quero movê-lo para cá. Você pode ver que é essa cor, apenas mais saturada. O topo para a direita está mais saturado. mesma largura. Vamos fazer outro. Deixe-me pegar algumas cores daqui. Vou decidir a ferramenta conta-gotas. Vou pegar esse marrom aqui. Você pode pegá-lo pelo pixel, dois, um parece bom. Oh, me dê o pixel [RISOS]. Aqui vamos nós. Novamente, você pode decidir que eu gosto dessa cor, mas eu quero uma versão mais clara dela também. Para ser honesto, muitas vezes é assim que acabo com minhas ideias de cores. Não é sempre, mas muitas vezes eu recebo, eu sou tipo, cara, eu amo o que eles fizeram aqui e vou pegar as cores emprestadas e acabei indo, ok, eu gosto dessa cor, mas é muito quente. Quero movê-lo desta forma. Você pode ver que você pode dessaturá-lo movendo-o para a esquerda e simplesmente ir em um lá. Você pode acabar com essa paleta de cores totalmente fantasiada com a qual você pode começar. Você vai chegar a um ponto em que você está, eu preciso de uma versão mais escura, preciso de uma versão mais clara. porque você precisa de um botão ou o contraste não é suficiente para um botão em cima daqui ou o texto é muito claro ou muito escuro e você acaba ajustando-o à medida que avança, mas é um bom lugar para começar. Adobe Color, Color Hunt e muitas capturas de tela e cores apropriadas de outras pessoas. Agora, a outra coisa a considerar é que você pode ser impulsionado pela fotografia de produtos existentes, cores da marca existentes, para que a cor da sua marca ou sua jornada de inspiração de cores possam ser bastante atrofiadas. Talvez seja necessário escolher as cores que a empresa já usa aqui. Talvez você consiga esgueirar-se em uma cor complementar ou uma cor secundária à existente. Se eles estiverem usando vermelho, talvez você consiga entrar em outra coisa que suporte esse vermelho para lhe dar um pouco de contraste no site, especialmente se eles não tiverem feito muitas coisas webby antes. Há tantos elementos que precisam de cores diferentes para mostrar uma hierarquia de necessidades como o que é importante, o que não é importante, qual pode ser o próximo passo, botões, muitas vezes em cores diferentes de outros itens não clicáveis, modo que indica para as pessoas, as ajuda a navegar pelo site. Estou balbuciando agora, é isso. Vejo você no próximo vídeo. 34. Como criar uma paleta de cores no Adobe XD: Olá a todos. Neste vídeo, vamos construir esse sistema de amostras de cores, as cores primárias, secundárias e nossas cores de destaque, além de construir amostras de cinza. Você provavelmente pode dizer, talvez, que este é um conjunto mais frio de cinza que eu vou usar e brancos. Deixe-me mostrar por que os fazemos e como fazê-los. Vamos continuar. Para começar, tenho um monte de coisas que estamos usando nos últimos vídeos que são espaços reservados e apenas fazendo deste lugar uma bagunça, ainda mais confuso do que atualmente. Estou usando minha ferramenta de seleção, arraste uma caixa ao redor de todas elas, pressionando “Excluir” no meu teclado. O que vamos fazer é que eu estou gostando dessa cor, do último vídeo, roubei de lá, não neste marrom no momento, então eu gosto dessa cor bronzeada que está lá dentro. Deixe-me pegar isso. Você espera lá. Ele está agarrando a ferramenta conta-gotas e eu vou pegar algo lá dentro. Gosto dessa pequena combinação. Esse slide está lá também, mas eu estou cavando essa coisa, talvez. Quando estamos lidando com cores para o projeto UI/UX, muitas vezes você precisa de uma cor primária e secundária, que eu tenho aqui. Muitas vezes você precisará de uma cor de destaque também. Vamos dar uma olhada. Digamos que a cor primária seja essa ardósia escura no fundo aqui, preta, não bem e esta é a cor secundária. Há cinza, se acostuma lá, ele chega lá, e então a cor de destaque é amarela aqui. É assim que eles separam informações, coisas em massa, coisas importantes, coisas clicáveis ou pequenas coisas atualizáveis. Há outros, esse verde é cinza no fundo, primário, secundário. Eles têm uma cor de destaque para este azul? A cor do acento muitas vezes pode ser uma versão bastante forte uma cor bastante distinta e se acostuma bastante, usada apenas um pouco. Isso realmente ajuda coisas importantes, pouca cor de sotaque. Agora estou dando dicas de como fazer isso. Não há razão para você não usar um milhão de cores, duas cores, uma cor preto e branco. Não há policiais coloridos. Ninguém me prendeu ainda [RISOS] mesmo que eu tenha cometido muitos crimes contra a cor. Só estou te dando minha maneira de fazer isso. Se você quiser fazer a teoria das cores uma maneira um pouco mais científica e pensativa, confira Sarah Parkinson, ela tem um curso de teoria das cores, no Google onde você está assistindo agora e você vai encontrar o curso dela sobre isso. Ela é brilhante nisso e melhor nisso do que eu. Só estou dando minhas dicas e truques sobre como eu trabalho. Eu tenho essas duas cores, quero uma terceira cor de sotaque. Eu não sei o que é ainda. Eu brinquei com esse [RISO] amarelo fraco aqui, e você é como, sim, isso é bom. Eu gosto deste também. É amarelo que eu provavelmente não escolheria isso como cor canário amarelo limão. Gosto de criança. Ainda não tenho certeza. Não há razão para você ter que escolhê-lo e não alterá-lo. Só vai nos dar um ponto de partida. Eu não gosto disso já. [RISOS] São dois naquele verde. Só vou derrubá-lo apenas para os amarelos um pouco mais. Vou até arrastá-lo um pouco. Lá vai você. Só não tenho certeza. De qualquer forma. Muitas vezes, uma vez que você tiver suas cores, você vai precisar de uma mais escura e mais clara como vimos no início lá. O que vou fazer é fazer uma pequena grade de nove colunas. Este já é bastante leve, então provavelmente vou ficar mais escuro com ele. Eu provavelmente vou, lembre-se antes do HSB, eu gosto deste, brilho de saturação de matiz. Em termos de brilho, vou usar minha seta para cima e para baixo. Só posso usar minha seta para baixo, neste caso, para escurecê-la. Posso achar que na verdade não uso a cor do acento além explosão total porque isso parece um pouco minky. Mas vamos nos dar algumas opções. Novamente, use a ferramenta conta-gotas e , em seguida, vá disso e fique um pouco mais escuro também. O que eu poderia encontrar também quando fica escuro é que talvez eu tenha que aumentar a saturação arrastando-a dessa maneira ou usando minha pequena saturação, suba um pouco apenas para adicionar um pouco mais de volume para a cor. Eu não gosto disso. Vamos dar uma olhada neste aqui. Vamos. Você só vai saturar meu brilho para cima ou para baixo, assim. Este provavelmente é muito escuro para começar com o tom médio, e este aqui vai sempre dar o caminho errado. Gosto disso. Bom. O mesmo com este. Vamos ver o que parece quando é mais leve. Acho que todo esse grupo está próximo, mas é muito azul. Eu quero ir um pouco mais longe nos verdes, apenas arrastando isso um pouco para baixo. Aqui está você. Eu gostei daquela ardósia. Vou diluir [RISOS] do jeito errado com ele. Sua ideia, vou encontrar algo que eu gosto. Estou nessa escavação um pouco. É por isso que você está tipo, estou roubando cores e, dois segundos depois, você as personalizou para ser a coisa que você quer. Na verdade, por que diabos ele está fazendo amostras de cores diferentes sempre. Há apenas momentos em que você deseja usar essa cor e você não pode usá-la além disso pode ser porque o contraste não é suficiente. Você precisa realmente ir para uma versão mais escura, ou isso não funciona ou uma versão mais clara ou isso vai até aquela para um contraste muito bom, é uma maneira de fazer algumas combinações. Cor primária, cor secundária, cor de destaque, no meu caso. Mais uma vez, nenhuma polícia de fonte para prendê-lo. Basta fazer o que quiser. A outra coisa sobre a qual vamos falar é a ver com negros e brancos. Negros e brancos são relativamente fáceis. Eu acho que você vai aqui e se você quer um branco completo, basta arrastá-lo para o membro da esquina até a borda aqui. Mas o que acaba acontecendo aqui? Obviamente, um branco é, eu realmente não preciso de uma amostra de cores. Por quê? Porque é fácil de encontrar. Mas o que eu poderia fazer é que você possa ter brancos. É como aqui é muito longe, mas só um pouco. Eu tenho esse branco que é um pouco mais quente. Eu poderia fazer um branco frio. Vamos dar uma olhada neste. Em vez de um branco quente, que está em meus tons amarelos, vou para a cor azul-esverdeada. Estou exagerando um pouco para te mostrar, mas você pode ver como esse branco, eles têm o mesmo brilho, mas este é mais quente e este é mais frio. Ambos, porém, provavelmente são um pouco demais, então em termos de brilho, provavelmente 98. Cem é branco cheio de explosão, e isso é apenas pequenas dicas. Não sei exatamente o que quero fazer aqui para este. O outro motivo para ter um esbranquiçado é digamos que você tenha uma interface, digamos que você tenha seu iPhone e queira ter um pop-up. Vou trazê-lo para a frente. Lembre-se do botão direito do mouse, você pode enviá-lo de volta, trazer para a frente. Você pode dizer, tudo isso, e pelo menos agora se eu adicionar algo como uma sombra, nós não estamos fazendo sombra provavelmente neste vídeo, mas você pode ver que você tem esse pop-up, é um contraste suficiente para mantê-lo em frente e a sombra realmente ajuda a empurrá-la para fora. Você faz isso ao contrário. Isso pode ser isso e pode ser o pop-up da sua interface. Só para dar um pouco de contraste quando isso acontece aqui em cima. Você entende o que eu quero dizer? Vou descer a versão um pouco mais azul, e vou fazer o resto das cores. Vamos aqui, vá aqui. Eu tenho cinco deles. Vamos começar com os negros. O preto diz a mesma coisa. Você pode ficar completamente preto na parte inferior aqui, ou um preto rico. Digamos preto velho normal, e esses dois aqui. Este aqui, você pode adicionar um pouco mais de um personagem legal. A mesma coisa no blues e greens, ainda é preto, mas há apenas um pouco de algo acontecendo. Está lá? Só um pouco. mesmo com este, você pode fazer isso nos aquecimentos , vá, eu quero este um pouco mais quente. É difícil ver lá, mas quando eles começam a acender, digamos que vamos aqui, e vamos aqui, arrastamos a leveza para baixo ou para cima. Você pode ver que é mais uma cor cinza cobalto nato? Então, aqui, se eu alinhar este, o que você pode ver começa a aparecer aqui fora, especialmente neste marrom à medida que fica mais leve, provavelmente vou ter que remover não só torná-lo mais leve, mas também remova parte da saturação, por isso ainda está quente, mas de uma maneira menos óbvia. Você pode decidir para onde quer ir. Você pode ir apenas preto e branco velho normal. Ou, no meu caso, vou descer esse cinza azulado, de aço e tempestuoso da OTAN. Há tantos nomes de cinza. Se você já tentou escolher cinza de uma amostra de tinta ou papel de parede ou algo assim, você saberá que os cinzas são pintados de preto. Eu só vou trabalhar no meu caminho até versões mais baixas indo aqui e indo para cá e indo mais longe, por favor. Provavelmente, à medida que fica mais leve, removendo parte da saturação também. Isso é saturação lá dentro, nós apenas arrastamos para a mão esquerda. Vou mostrar por que adoro clicar no teclado [RISOS]. Lá vamos nós. Só vai ser meu esquema de cores. Isso só lhe dá um lugar para começar. Você pode ajustar isso depois, mas depois, quando você escolhe 40 tipos diferentes de cinza porque você não teve amostras de cores para escolher, isso será um problema para atualizar. Mas agora, se você tiver o suficiente para escolher com um pouco de variação, poderá atualizá-los mais tarde quando entrarmos em coisas como estilos de cores. Essas são minhas amostras de cores para começar. Não está em pedra, eu não gosto dessa ainda. Você provavelmente verá isso mudado no próximo vídeo. Mas é isso no momento, vou mexer com isso um pouco mais e te vejo no próximo vídeo. É isso, acabei de remover alguma saturação. Isso é o suficiente. Vamos realmente começar agora. 35. Como criar degradês no Adobe XD: Olá a todos, é tempo de gradiente. Vamos fazer alguns gradientes doces aqui no Adobe XD. Agora deixe-me mostrar como. Para fazer um gradiente, vamos começar aqui, selecionando-o Comando 3 ou Controle 3 em um PC para ampliar. Então eu tenho que recuar um pouco [RISOS] Vamos pegar qualquer praça velha. Pode ser um círculo, pode ser qualquer forma antiga que você desenhou. Com ele selecionado, você os altera aqui em Preencher. Clique em Preencher, e no topo aqui temos Solid e você pode escolher esses vários tipos de gradientes tão Gradiente Angular. Começaremos com esse porque você não tem permissão para usá-lo. Não sei [RISOS] Espere, todo gradiente é evadido. Linear é provavelmente o mais comum. Para alterar as cores das extremidades, basta clicar em qualquer uma delas. Você pode ver as atualizações aqui, então no topo, eu vou dizer, você é verde. Está cheio por mais tempo. Vamos para o, na minha opinião, o pior gradiente em todo o mundo. Clique na parte inferior, ajuste a tonalidade, fique azul. Não, vermelho, onde está? Isso é o pior. Esse pode ser o gradiente mais feio em todo o mundo. Você pode adorar. Tudo bem. Estou mudando a direção. Você apenas pega qualquer uma dessas pequenas alças aqui ou esses pequenos pontos no final e os arrasta para fora. Você pode decidir qual caminho eles querem ir. Você pode fazer com que ele passe na tela. Você pode tê-lo bem apertado no meio. Dependendo do que você quer fazer. Está ótimo. Agora, se você quiser uma terceira cor, você pode fazer isso facilmente clicando aqui no meio da linha. Você vê a flecha lá? Tem um pouco mais ao lado dele diz matiz. Vou adicionar gradientes ainda mais excepcionais. Oh, é ruim ou você pode fazer isso aqui em cima nesta linha aqui, não importa. Você pode clicar nisso para adicionar uma pequena amostra extra para a qual você pode ajustar a cor. Vamos ficar bem assim. Amarelo. É disso que precisamos. Você pode excluí-los clicando em um deles aqui. Digamos que queremos nos livrar do azul, basta clicar em Excluir no teclado. Isso é gradiente linear. gradiente radial funciona da mesma forma. Eles são muito fáceis de auto-ensinar. centro se move. Existem dois desses, o que é estranho. Este fora, é a extensão como grande e wofty fora das bordas. Eu uso isso bastante para esse gradiente que não é um gradiente. Você pode ver que é exatamente como está lá. Está dando um pouco de plenitude à cor sem que ela seja um gradiente muito forte em vermelho. Este aqui embaixo distorce. Depende do que você quer fazer. Novamente, você pode adicionar mais desses pequenos pontos aqui, ajustá-los ou clicar neles para excluí-los. Agora, para me inspirar em gradientes, há um site legal que eu uso. Eu sempre volto para aqui. Grabient, grabient.com e você encontrará apenas gradientes interessantes que você pode não ter explorado. Digamos que você queira este aqui. Você pode clicar neste pequeno ponto e ver que há um pequeno número hexadecimal. Clique nisso. Você pode copiar isso e para o Adobe XD, encontrar a amostra inicial. Em seguida, na parte inferior em vez de HSB, saturação de matiz e brilho, basta digitar o número hexadecimal. Retorne, copie, cole esta e encontre esta amostra final, substitua-a e vamos nos livrar da aleatória no meio aqui. Adeus. Lá você tem um gradiente. Claro, você pode fazer exatamente a mesma coisa com sua ferramenta conta-gotas de qualquer um dos seus Command 0 ou Control 0 para obter tudo, é escolher essas cores. Você pode decidir que eu quero isso. Eu quero que o interior, que é você ser essa outra cor. Você Comanda 3, Controla 3 em um PC e Gradiente. Uma última coisa que quero mostrar a vocês é que fizemos gradientes bastante deliberados, o que é legal e eu os usarei em meus projetos. Muitas vezes, eu não sei, você pode usar gradientes realmente sutis. Digamos que esta será minha maquete da minha forma de alta fidelidade. Vou lixar tudo o que está nele. Esta será minha página inicial e esta será minha Hi-Fi para alta fidelidade. Eu quero começar com um plano de fundo, gradiente muito leve, e você também pode fazê-lo para sua prancha de arte. Você pode selecionar seu quadro de arte clicando no nome na parte superior e basicamente tratá-lo como fizemos esse retângulo. Clique em Preencher e vá em Gradiente Linear. Nesse caso, o que eu quero fazer é talvez usar apenas um leve esbranquiçado. Na verdade, isso não é o que eu quero fazer. Quero ir até aqui e encontrar minhas pequenas amostras de cores. Clique em você, volte para isso, escolha esta primeira cor, use a ferramenta conta-gotas e vou procurar algo assim. Quão bom isso vai ser? [RISOS] Veremos em um segundo? Algo assim em segundo plano ou talvez algo parecido com isso [RISOS] Indecisos, mas você pode adicionar um gradiente na parte de trás do seu quadro de arte só para que você saiba. Pode ser apenas um pouco gradiente branco nessa coisa. Às vezes acho que, em vez de ser bastante deliberado, pois ao iniciar e parar de ambos os lados, é que estenderei esse passado onde preciso que eles sejam apenas porque quero a dica da cor. Eu quero que ele o amarre, mas sem que seja tão óbvio. Como à primeira vista, é apenas uma versão leitosa dessas duas cores. Mas de qualquer forma, isso é gradientes no Adobe XD. 36. Como salvar e reutilizar amostras de cores no Adobe XD: Olá a todos. Em vez de usar a ferramenta Eye Dropper repetidamente, tentando reutilizar cores, vou mostrar como adicioná-las na parte inferior aqui para amostras salvas. A versão simples é clicar e clicar em Plus. [RISOS] Há algumas pequenas coisas que vou mostrar para que você possa ser mestre das amostras de cores. Vamos. Em vez de usar essa ferramenta Eye Dropper, o que vamos fazer é adicioná-los em um lugar agradável e prático, vamos adicionar este primeiro às amostras salvas, essa é essa pequena lista aqui em baixo. Você já pode ter alguns por acidente. Se você não estiver bem, de qualquer forma, pressione Plus. Com isso selecionado, ele vai dizer adicione isso a esta lista, mesmo com esta aqui, e apenas trabalhe e adicione-os. Vamos adicionar esses três e, em seguida, darei algumas outras dicas, vamos adicionar todas elas. Se você os confundir o pedido. Como na verdade eu quero isso lá, é tudo. Você pode fazer isso e isso só significa agora em vez de, digamos, eu estou todo o caminho aqui embaixo, e eu preciso que esse carrapato agora não seja tão verde, eu preciso que seja o novo verde, olhe para isso oh, apenas útil para reutilize essas coisas. Se você tem algo lá dentro, você quer remover. Com o selecionado, na verdade, para remover coisas não importa o que você selecionou, você tem que arrastá-lo para a terra de nenhum homem. Lá vai você. Vou passar agora, usar minha técnica de edição de velocidade rápida e adicionar todas as minhas amostras só para que as tenhamos lá, então você espera lá. Foi doloroso assistir e foi doloroso de fazer. [RISOS] Clique, clique, clique, clique. Eu os adicionei e uma coisa a observar é que gradiente, alguns misturam estes entre um vídeo, k é que eles não aplicarão gradientes por algum motivo no momento. Experimente agora, você pode estar no futuro e pode funcionar, mas se você editar, basta jogar uma cor sólida e eu preciso me livrar dessa. [inaudível]. Deixe-me tentar de novo. Isso foi interessante, eu não percebi isso. O que é feito é, você pode ver o que está corando lá embaixo? Diz, ei, eu já tenho esse gradiente de cor. Você é como sim, você faz. Ele tentará editar como uma amostra completa e, se você já a tiver, não editará novamente, o que é legal. Você espera lá eu vou misturar outro gradiente. Meu favorito em todo o mundo, se você tentar adicionar um gradiente, ele escolherá uma das cores. Você pode vê-lo lá? Certo. Livrar-se disso? Bom. Tudo bem. Isso é útil, tenha suas cores prontas no início só para que você saiba, meu processo não é assim tão sistemático quando estou no scrappy, não sei realmente o que estou fazendo dias do design em que estou apenas trabalhando através das coisas. Eu não vou ser tão bom com isso porque eu realmente não sei de que cor eu preciso aqui, vou tentar todos os tipos, mas não demora muito para você entrar em seu processo. Temos uma cor comprometida ou você tem uma cor de cliente que não pode alterar, faz parte das diretrizes da marca. Está preso lá, você pode adicioná-los aqui para que você não esteja tentando misturá-lo toda vez ou ferramentas de conta-gotas. Essas são amostras salvas no Adobe XD, vamos para o próximo vídeo. Diga adeus pequeno rádio. 37. Projeto do curso 07 - Cores e colunas: Olá a todos, é hora de um projeto de classe criativo. Vamos fazer um pouco chato todas as páginas e colunas, depois misturaremos algumas cores. A primeira coisa é que eu quero que você crie suas páginas do Hifidelity. O que vamos fazer neste curso é, porque só temos algumas páginas para trabalhar, vamos deixar nossos wireframes aqui em cima. Muitas vezes eu os farei em um documento separado, mas para este, porque temos uma pequena quantidade nesse fluxo de tarefas, quatro páginas mais algum extra para animação, vamos manter o hi-fi ligado mesmo que o low-fi com wireframes. Basta criar quatro páginas, elas são exatamente o mesmo nome, exceto que eu adicionei hi-fi ao final delas. Homepage, produto, checkout e confirmação hi-fi. Agora, neste caso, escolha o telefone no qual você vai testar. Descubra qual telefone você tem e qual pixel, altura e largura ele é e você pode escolher isso quando fizer suas novas páginas. Tenha quatro deles na mesma coisa para a versão desktop. Não me importo com o tamanho que você está usando, você decide o que sente confortável e para a página de design de sites. Estou usando os pixels 1920, mas estou colocando na borda e coloco suas colunas. Novamente, você pode decidir que faça 12 para a área de trabalho para mim e para o telefone, seis ou quatro onde quer que você queira. O que você encontrará quando você está fazendo isso [ NOISE] é que XD, porque ele usa pixels, às vezes não consegue dividir tudo, como o tamanho do meu telefone aqui, que é 375 é [ RISOS] um número divisível que é bastante difícil porque são cinco pixels ou é um número ímpar, é o que é. Ele faz algumas coisas esquisitas ao redor das bordas que fazem tudo isso ser calhas consistentes porque isso é realmente importante para o XD. Ajuste as bordas para que tudo se encaixe. Se você achar que está perto , mas está um pouco fora, não se preocupe. Nesse caso, basta seguir o fluxo. É apenas parte de usar essa medida absoluta e projetar para algo que será responsivo mais tarde. Há um pouco de desconexão, então ignore a parte da borda lá. Se você conseguir. Espero que você acabe onde quer que o tamanho do telefone com o qual você está trabalhando seja um número facilmente divisível e o XD ficará ótimo depois de fazer isso; Quatro páginas, desktop, celular e o colunas, rascunhe sua paleta de cores. Há quatro partes que você precisa. [RUÍDO] Onde está. Vou diminuir o zoom. Esse é um atalho que não mostrei. Você pode usar isso ou você pode manter pressionada a tecla da barra de Comando e Espaço, apenas diga aleatoriamente que se você estiver fazendo alguma coisa, você pode manter pressionada a barra de Comando e Espaço e [NOISE] basta arrastar uma caixa ao redor. Você viu que há pop-up na minha tela? São câmeras de controle de missão de lançamento rápido chamadas. Em um PC que é a barra de espaço de controle e você pode simplesmente arrastar, aumentar o zoom. Esse atalho também pode ser usado no PC. De qualquer forma, digressão. Quero que você faça uma cor primária, secundária, uma cor de destaque, seus cinzas e pelo menos um gradiente. Não me importo com o que seja. Não se comprometa muito agora nós apenas, é parte do curso. Escolha algumas cores, olhe para essas inspirações de cores, escolhe-a em seus quadros de humor e você pode alterá-la mais tarde, não se preocupe. Faça uma captura de tela e carregue suas páginas, suas cores e, em seguida, quero que você salve todas elas em suas amostras salvas, [NOISE] que está na parte inferior de lá. Então, se você conseguir fazer isso em algum pedido, faça uma captura de tela para isso para sua lição de casa e faça isso. Vejo você no próximo vídeo. 38. Que fontes posso usar no meu design de aplicativos no Adobe XD: Olá a todos. Neste vídeo, veremos quais fontes você tem permissão para usar em seu design web ou design de aplicativo. Vou mostrar alguns lugares bons para obtê-los e como talvez emparelhá-los para que você tenha algumas boas fontes correspondentes. Vamos. Por que você não pode usar nenhuma fonte antiga que esteja na sua máquina? Porque precisa ser uma versão especial da web ou versão do aplicativo. Nem todos são construídos da mesma forma. Muitas vezes, há uma versão. Mesmo que você o encontre no seu disco rígido e você o ame, ou talvez o cliente o tenha e ele tenha uma fonte que ele usa, você pode encontrar uma versão web dele. Se não o fizerem, você terá conversar sobre algo próximo o suficiente do que eles estão usando e que está disponível online. Basta descobrir o que é e ver se há uma versão da Web disponível e se eles precisam licenciá-la ou se é gratuita. É uma coisa estranha que aconteceu nos web designers que há um monte de fontes gratuitas, quase gratuitas e baratas. Adobe Fonts é o lugar que vamos começar porque este é o gratuito. Você está pagando uma licença à Adobe para usar essas fontes em seus designs. Você não está pagando nada extra por eles, mas você está pagando por essa licença. Fonts.Adobe.com é um ótimo lugar para começar. É um ótimo site. Isso muda o tempo todo, então seus layouts não se parecerão com os meus. Mas descubra que todas as fontes ou navegue por todas as fontes, você acaba em algo assim. O que eu gosto de fazer é colar no material em que estou trabalhando, que é um lindo chá verde. Essa é a mensagem de marketing deles que estará no meio daqui. Esta é minha mensagem de marketing. O que eu estava procurando era eu realmente adoro essa combinação aqui. Este texto coloquial muito grande, estreito, grosso, ousado com este texto coloquial mais desenhado à mão ou um pouco mais amigável. Isso é o que eu estava procurando qualquer maneira. Foi o que eu fui e fiz. O mais legal disso é que você pode digitar sua mensagem de marketing. Você pode trabalhar com as letras reais, e então aqui você pode decidir que eu quero esteja limpo ou vou ver todas elas. Quero que meu não seja nenhum desses. Há duas partes. Existem essas tags e , em seguida, há classificações oficiais de fontes. Eu quero san serif, que é fonte que não tem esses pezinhos que cutucam as bordas. São serifas. San serif está sem essas serifas, então eu quero San Serif. Vai se livrar de todos esses. Ótimo. Vê esses aqui? Não quero isso. Quero apenas aqueles que, no meu caso, quero o peso muito grosso. Eu quero uma fonte que seja san serif que tenha um peso bom e grosso, tão ousado basicamente, e eu quero que ela seja estreita. Você pode decidir aqui, quero que seja uma fonte estreita ou compactada, ou há versões diferentes dela. Mas você pode ver aqui, eu pelo menos reduzi-lo rapidamente às coisas. Interessante, eu gosto desse. Então você apenas trabalha até aqui, decidimos qual deles você quer e, em seguida, clique em vamos dizer que queremos a Interstate. Tenho certeza que tenho isso na minha máquina. Não, não temos. Você vê a família. Eles são muito fáceis de instalar e, em seguida, você pressiona “Ativar fontes”. Há uma versão compactada e uma versão condensada. Existem apenas diferentes níveis de quão esmagados eles são. Você pode ver isso parcialmente esmagado, super esmagado e regular. Você pode ativar parte deles ou todos eles e começar a trabalhar em seu design. O que você precisa verificar quando você está baixando isso é que eles estão disponíveis para licenciamento da Web. No meu caso, eles podem ser usados em um site. Perfeito. Então, basta verificar novamente. Se você está recebendo de um site onde alguns desses sites gratuitos como 1001 Fontes Grátis ou DaFont ou um desses Esquilo de Fonte, verifique se eles podem ser usados em um site. Alguns deles não são. Uma coisa você pode fazer, eu acho que nisso é que eu posso voltar um e eu posso dizer, na verdade, eu pensei que havia uma maneira de escolher só me mostrar os web, mas você pode vê-lo aqui em baixo. me mostra que ele está disponível para ser usado em um site e costumava ser algo que você tinha que cuidar, mas muito dele está realmente disponível para uso on-line agora. Veja-os, ative-os, eles simplesmente param aqui, e no dia seguinte é apenas mágica. Eles usam a Adobe Creative Cloud e você pode começar a trabalhar com eles. Deixe-me mostrar outro site com o qual você pode trabalhar é o Google Fonts. Fonts.google.com é um site muito comum, ainda mais comum que o site do Adobe Fonts. Tudo isso é gratuito, você não precisa de nenhuma licença. Eles são limitados. O Adobe Fonts tem mais fontes, mas o Google Fonts também tem uma quantidade brilhante. Aqui, a mesma coisa. Vou digitar meu lindo chá verde e trabalhar da mesma maneira. Sua busca por categoria não é tão divertida. Eles acabaram de ter as categorias básicas aqui sem todas as tags. Um pouco de opções, você pode entrar nisso. Vou entrar nessa e procurar caligrafia e estava procurando algo não exatamente o que estava naquela maquete, mas algo parecido. Aqui é um pouco diferente do download. Digamos que você gosta do Pacifico. Você abre, você baixa a família. Todas essas fontes do Google estarão disponíveis para uso via web ou aplicativo. Verifique a licença, mas você descobrirá que eles funcionarão. Então você baixa a família, você acabará com esse arquivo zip que vem para baixo. Se você estiver no Mac e no PC, eles são muito fáceis, basta clicar duas vezes neles. Continue clicando duas vezes neles até que eles sejam instalados. Instalar fontes é muito fácil. Caso contrário, faça o Google e descubra como instalar fontes em sua máquina, mas você não deve ter um problema. Tipo de gratuito, totalmente gratuito e depois pagando por fontes. Não tenha medo de pagar por uma fonte. Existem apenas alguns trabalhos em que você não pode e não tem os recursos para e, em seguida, há empregos em que você tem um pouco mais de tempo e um pouco mais de pensamento. Não quero desencorajar as pessoas a comprar fontes. Eu faço o tempo todo para projetos. Vamos dar uma olhada nisso. Não importa qual é a fundição. Estou olhando para klim.co.nz. É uma fundição incrível. Eles criam suas próprias fontes. Eles estão baseados na Nova Zelândia de onde eu venho. Eu só gosto deles. Sinto uma boa conexão com a fonte quando estou baixando. Em vez de apenas dizer que escolhi uma fonte, sou capaz de discutir como a fonte foi inspirada, o que significa para mim pessoalmente, o que significa para o cliente. Mas você tem que pagar por eles. Portanto, não tenha medo de pagar por fontes. Eu comprei este outro dia. Quando se trata de comprar fontes, digamos que queremos comprar esta. Você tem que decidir para que precisa. O desktop é um design gráfico tradicional, e foi para isso que eu comprei. Sim, comprei esse lá. Vamos dar uma olhada na nossa versão web. Quando você compra uma versão da web, você tem que dizer a eles como se estivesse indo para um site. Quais são os visitantes únicos mensais? Do meu lado, tenho cerca de 10.000, então é o que vai custar dependendo de quantos visitantes únicos existem e você pode decidir sobre essa versão da Web. Isso te dá a todos eles ou apenas um deles? A versão web, se você quiser apenas uma, você só vai usar um fino e médio. Vai me custar US$100. Trabalhe isso em seu orçamento quando você estiver vendendo em conceitos. Se sua empresa para a qual você está trabalhando já tem uma fonte e existe uma versão web, você terá que sair e descobrir, é uma fonte gratuita que eles estão usando? Eles estão usando o Roboto, que é gratuito para usar, ou estão usando outra coisa que precisa ser licenciada? Basta verificar isso. Se eles não quiserem, eles terão que encontrar algo mais gratuito que seja semelhante. Como eu acabo escolhendo fontes é dizer aqui no Adobe Fonts, é realmente ótimo vê-las em texto de amostra. Você pode ficar bem perto e baixar um monte de coisas que você não vai usar. Você vai usar um deles e depois passo meu tempo no XD. Onde estamos? Aqui vamos nós. Eu acabo tendo cópia após cópia após cópia, tudo em fontes diferentes, brincando com diferentes e você está tipo, caramba, ele está meio dia fazendo isso. Se for você também, não se preocupe. Isso acontece com todos nós. A outra coisa boa e útil é o emparelhamento de fontes. Se você está em algo como o Adobe Fonts e você gosta, eu tenho que usar este para meus títulos, mas o que vou usar para minha cópia corporal? emparelhamento de fontes é uma palavra muito boa. Digitei isso aqui. Fiz emparelhamento fontes Adobe Fonts ou emparelhamento de fontes do Google Fonts. Abri um monte desses aleatoriamente para dar uma olhada e encontrei outras pessoas que fizeram o emparelhamento de fontes. Você pode dizer, eu gosto disso. Você pode decidir sobre eles e eles estão disponíveis no Adobe Fonts. Você pode dizer, eu sou vendido. Estou tentando pensar em um. Não gosto de nenhuma dessas combinações. [RISOS] A mesma coisa aqui, acabei de pesquisar no Google. Adobe Fonts apareceu no blog da Adobe e há alguns recursos interessantes sobre o que escolher. É bom vê-los no contexto, porque às vezes vê-los sozinhos aqui não é super útil. Alguns deles têm isso. Digamos que queremos olhar para a Interestadual. Se olharmos para essa família, às vezes nem todos eles, eles terão um caso de uso. Não há muita coisa acontecendo aqui, mas eles podem ter um monte dessas coisas aqui. Gostaria que a Adobe colocasse mais lá. Mas sim, dê uma olhada em volta, veja o que pode funcionar. Pode ser como, eu amo esses dois juntos. Emparelhamento de fontes, download de fontes. Acho que até mesmo a Adobe internamente Interstate tem recomendações para pares correspondentes. Alguém fez isso, mas está um pouco demais acontecendo. Vou retomar, mas gosto de vê-los em um pouco mais contextos do que em um site. Quais fontes eu escolhi? Deixe-me mostrar-lhe. Vou acelerar o download deles e instalá-los. Esses são os únicos. Esse é meu primeiro conceito de qualquer maneira. Gostei deste, desta Bernina Sans. Eu gosto porque funciona como um título porque tem como um ousado e estreiteza. O estreito também é muito útil em telefones. Veja isso, a versão não estreita. Olha, ficou mais amplo. É mais amplo. Isso significa que você pode encaixar mais coisas em um tamanho maior em um telefone, o que é bastante estreito. Então isso pode ser útil. Além disso, ele tem um tamanho de cópia corporal muito agradável, simples e facilmente legível, que eu possa chegar a algo como 16. É bom e legível. Vou me livrar da liderança, apenas um espaço entre as linhas, e isso também funcionará bem como cópia corporal. Posso usar essa versão e essa versão. Mesma fonte, cópia do corpo, cabeçalho, e essa será minha pequena fonte de sotaque. Meu único problema com este é, primeiro lugar, que era muito leve, mas felizmente há uma versão mais espessa e o outro problema é que são apenas bonés. Se você ficar preso nisso, o cliente vai dizer, podemos fazer isso de alguma outra forma? Podemos fazer uma minúscula? Você é como, não com essa fonte. Porque Ametic não tem minúsculas. Gosto bastante, vou fazer isso. Mas essas são minhas fontes. Na verdade, antes de irmos, eu queria jogar isso aqui. Eu não quero que você pense no dia seguinte como, cara, ele só entra e escolhe uma fonte, escolhe uma fonte de subtítulo, e então ele está fora. Não. Se você é como eu e está rindo porque seu documento do XD se parece mais com isso, este é o Illustrator, eu sei. Mas vou montar uma camiseta rápida e 100 revisões depois. Todas as variações da mesma coisa, muitas fontes diferentes. Se você é assim, não se preocupe, eu sou assim também. Meus arquivos XD ficam todos bagunçados antes de ficarem arrumados. Eu queria ter isso no caso você sentir como se estivesse fazendo errado. Sim, as coisas ficam confusas. Isso é seleção de fontes no Adobe XD. Vejo você no próximo vídeo. Olha isso, passei idades tentando dar esse olhar. aí que acabei, mas eu estava me esforçando tanto por isso como indie, japonesa, coisa de skateboardy. Eu amo o XD, você entende. É isso. Vejo você no próximo vídeo. 39. Verifique o que as pessoas de outras fontes usam: Olá, todos. Neste vídeo, quero mostrar maneiras de verificar quais são as fontes de outras pessoas. Digamos que este lado aqui, concorrente em potencial, você queira saber qual fonte eles estão usando. Eu gosto deste porque está claro e está ligeiramente condensado para que ele possa caber muito nessas categorias. Digamos que você queira saber o que é. Estou usando o Chrome, potencialmente o mais comum dos navegadores. Talvez você não esteja usando, então você terá que descobrir isso para o seu próprio ou instalar o Chrome. Digamos que este aqui, basta clicar com o botão direito do mouse nele e você pode ir para este chamado Inspecionar. Em um Mac, talvez seja necessário clicar nele com a opção. Essa coisa aparece e você pode ter que arrastá-la e movê-la um pouco. O que você está procurando está deste lado aqui é essa coisa chamada Computed. Calculado diria que, eventualmente, você pode rolar um pouco para baixo o que é a família de fontes e você pode ver neste caso que é Roboto Condensed e você é como, “Impressionante”, então eu sei qual fonte é. Então você pode ir a algo como o Adobe Fonts ou o Google Fonts ou pesquisar na Internet e simplesmente ir : “Quero encontrar o Roboto”. Fonte de cópia corporal super comum. Você pode ver que há um casal. Há uma laje de Roboto. Isso parece mais com isso. Aqui, há uma tonelada de pesos diferentes e o que é. Parece que há Roboto Condensed. Isso se parece com isso. Você já pode ativá-lo. Estou usando o Roboto para outro projeto, mas aqui está você. É uma fonte do Google, então você a encontrará lá também. Sim, então é assim que você pode fazer isso a partir de sites. Digamos que você tenha apenas uma captura ou PDF ou algo assim. O que você pode fazer é precisar de uma versão JPEG ou PNG dela. Estes são dos nossos quadros de humor e eu realmente gostei dessa fonte lá. Eu me pergunto o que é. O que você pode fazer é estranhamente na Adobe, não importa onde você está, parece que você pode simplesmente arrastar algo para dentro. Há uma maneira oficial e não se chama certeza [RISOS] espere que ele carregue. Pesquisa visual. Eu mencionei que está sob fontes e está lá em algum lugar. Você vai encontrá-lo. Acabei de despejá-lo lá dentro. Diz, esta é a fonte que você quer? Você pode mover isso para as coisas que você quer. Eu sou como, não, eu estava bem. Vou erguê-lo. Próximo passo, vai tentar adivinhar o texto. [RISOS] Eu o movi. Ele acha difícil com essas partes realmente finas dessas serifas. Vou digitar, TEA STORE. Aqui está você. Ele obtém normalmente. Então ele vai me dar algumas fontes. Olhe para isso. É bem próximo. Não é exato. Você pode ver essa pequena orelha aqui e aquele pequeno pokey fora um pouco? Isso é diferente. Posso ver algum deles que tenha esse ? Depende também. Você pode ser como, na verdade, eu gostei daquela orelha, eles são melhores. Isso tem a pequena extremidade plana ou você gosta daquele que tem esse pouquinho? Ele só te aproxima e, em seguida, você pode ativá-los e começar a trabalhar neles. Nem sempre vai fazer com que eles façam pode-fazer. Existem outros serviços. WhatTheFont! É legal que eu costumava usar, mas comecei a usar fontes adobe porque é bom encontrar algo próximo o suficiente e ativá-lo e começar a trabalhar nos meus conceitos de design. Isso é explorar fontes que já estão online ou em arremessos agarrá-las e usá-las em seu design. Uma pequena nota lateral, a Adobe tem um aplicativo chamado Adobe Capture. Está no Android e no iPhone. Você pode realmente fazer isso em tempo real enquanto você está se movendo. É legal. Se você está fora e está tipo, oh, isso é legal, você pode realmente tentar capturar a fonte ao vivo no seu telefone e ela irá baixá-la e instalá-la para você. É isso. Vamos para o próximo vídeo. 40. Quais os tamanhos de fontes comuns devo escolher no web design: Olá você. Neste vídeo, vamos explorar quais tamanhos de fonte você deve usar. A resposta curta é que você pode usar o que quiser. Mas existem algumas regras para usar fontes em dispositivos e em sites que vou explorar e dar-lhe alguns dos padrões para começar para que você possa quebrar as regras, mas você precisa saber o regras para quebrar as regras. [RISOS] Vamos começar. Então, tamanhos de fonte, você pode fazer qualquer coisa. Não há regras oficiais, há apenas alguns padrões que você deve estar ciente porque você os verá carregamentos, e muito desenvolvimento web é construído em frameworks, basicamente modelados coisas, e eles têm alguns tamanhos que são padrão e eles se acostumam muito, então quais são eles? Vejamos isso, vamos chamar, este Título. Para um título, o cabeçalho de maior tamanho que você provavelmente pode usar, bem, o maior normalmente é 72, 72 é um cabeçalho enorme. Eles vão lá para baixo, de lá, então 48 é o próximo. Vamos fazer isso à esquerda se alinhar, todos eles se alinham um pouco melhor e me deixam passar por eles. São eles 72, depois cai para 48, depois descemos para 32, depois há 24, e depois há 18, e esse é o seu título normal. Deixe-me realmente escrever isso aqui para que você possa vê-los melhor. Esses são os tamanhos normalmente para cabeçalhos. Eles também chamarão isso de Título 0 porque é enorme e este é o Título 1. No web design, essa é uma maneira padrão bastante comum de chamar coisas, e o tamanho padrão, você pode usá-las ou não usá-las, depende de você. A outra coisa é que você os chama de Título 0. Seu programador ou desenvolvedor provavelmente chamará de H0 e aqui, eles chamarão de H1 e assim por diante e assim por diante. Muitas vezes, quando estou falando com meu desenvolvedor ou faço um pouco de web design, vou trabalhar com H1s em vez do Título 1 igual a 48, o padrão será H1, e ele será padrão para 48 quando Estou codificando a menos que eu mude, e esse é um bom ponto, você pode mudá-lo. Isso significa apenas que o desenvolvedor tem passar e talvez torná-lo 1,5 do tamanho original, então esses são os padrões, pelo menos para títulos. O próximo é o parágrafo do texto da cópia do corpo. Isso é chamado de texto de parágrafo, ou texto P, e muitas vezes isso é 16 e muitas vezes não é negrito. É uma fonte normal e é isso que vou usar neste caso. Mas, novamente, dependerá do seu tipo de fonte porque algumas fontes parecem menores, mesmo que tenham 16 pontos. Eles podem ter sua linha de base no mesmo ponto e a altura x na mesma, mas pode ser muito fina, então precisa ser maior para ser vista. Então você pode quebrar essas regras, apenas um bom ponto de partida. A outra coisa a fazer é que quando você está escolhendo um texto de parágrafo, você é como 16 pontos, isso é grande o suficiente? Você tem que se certificar de que quando estamos fazendo algo como algum texto de corpo aleatório, é que quando você está fazendo isso, você está vendo um tamanho. Agora sabemos que meus 100 por cento na minha tela na verdade não são apropriados para o meu dispositivo. Eu posso fazer algumas coisas sorrateiras, 75 parece ser uma boa novamente, estou segurando meu telefone que é do tamanho certo da minha tela, o seu pode ser 100% perfeito. Experimente 100%, experimente mais baixo, é um bom indicador, mas não se esqueça de estar testando em seus dispositivos, especialmente se você estiver criando um celular primeiro ou um aplicativo, entre lá com esse aplicativo Adobe XD e estar visualizando lá para que você possa realmente gostar que isso seja realmente factível porque você tem problemas se quiser ser como, eu não seria super legal e reduziria para 12. Pode parecer interessante, mas coisas como mecanismos de busca, não são 100%, mas eles vão olhar para o seu site e dizer, ei, este site não está acessível para alguém em um celular telefone. Quando alguém pesquisa em um telefone celular, potencialmente seu site não estará completamente sinalizado em preto, mas ele será classificado abaixo um site de igual qualidade que usa fonte tamanhos considerados acessíveis ou do tamanho certo. Para dar uma olhada, é uma das suas tarefas depois que este curso é dar uma olhada no termo de acessibilidade e tamanhos de fonte. Então, para mim, são duas coisas que você precisa do tamanho certo, então 16 é perfeito, não pode realmente dar errado com ele e precisa ser um alto contraste. O Google também não vai gostar se você estiver tentando fazer isso, porque é spam, está adicionando muitas palavras-chave e as pessoas usam para tentar fazer isso para enganar o Google. Mas o Google descobre isso como um contraste muito baixo, então vamos prejudicar seus rankings porque não é tão útil para as pessoas assistindo , então por que mostrar isso às pessoas? O Google é inteligente dessa forma. Recebi o texto do meu parágrafo, é do tamanho certo? São 18, lá vamos nós. Teste em seu dispositivo, você pode começar com eles. Você não precisa, porque eu tenho outra fonte que vou pegar todos esses caras. Vou duplicá-los e vou alinhar bem e vou alinhá-los aqui em cima. Portanto, essas são suas ferramentas de alinhamento. Já fizemos isso? Eu não sei. Não tão quente. Vire a linha, linha vermelha. Vou para aquela outra fonte que tenho, qual não me lembro do nome. Chama-se, alguma coisa, e acho que é isso. Estas são minhas fontes, minha fonte de marketing mais divertida e coloquial. Não é tão fácil de ler, não é bom para cópia corporal porque parece muito pequeno, então eu vou me livrar disso, provavelmente esse também e provavelmente é o menor que preciso usar isso em um Heading também. Mas você pode ver a elegibilidade do Título 2 nesta fonte? Eu escolhi a Bernina. Bernina sans contra este aqui. Este tem que ser bem grande e não essencial para o uso de seus slides. Então, eu não usaria isso como navegação porque é muito difícil de ler. Mas para nossas pequenas coisas legais de mensagens de marketing por toda parte, desde que usemos isso bom e grande, acho que vai ficar tudo bem. Essa é a minha Fonte 101, você pode ignorá-la ou levá-la a bordo, até você, mas agora você sabe. Vamos entrar no próximo vídeo. 41. Como criar estilos de personagens no Adobe XD: Olá a todos. Este vídeo é sobre estilos de personagens, coisas reutilizáveis que podemos clicar em bits e ir, hey você é agora isso e isso, bem, isso é um branco. [RISOS] Vamos usar a versão preta. Você pode passar, ter alguns estilos predefinidos que você pode usar e reutilizar. Vou te mostrar como fazer isso. Também faremos algumas versões em branco do texto. Então, no final, faremos uma pequena parte de produção do vídeo em que não tanto aprendendo mais apenas tendo que fazer algumas coisas e mostrarei alguns dos problemas que me deparo enquanto estou trabalhando. É por isso que este vídeo é um pouco mais especial por muito tempo. Sim. Vamos entrar nisso, estilos de personagens. Para criar nossos estilos de personagens , deixarei isso lá. [RISOS] Eu fechei isso. Eu fecho isso com frequência para tirar capturas de tela para você para coisas diferentes para os cursos. Você pode simplesmente clicar neles. Você pode fechar acidentalmente, basta clicar nele novamente, abrir novamente. Nós olhamos para as camadas principalmente. Analisamos um pouco desse painel Ativos. Basicamente [RISOS] excluímos tudo disso. Mas você pode ver aqui alguns de nossos estilos predefinidos. Há nosso estilo de personagem. Digamos que decidimos que esses são nossos títulos e coisas podemos selecionar todos eles usando nossa ferramenta de seleção e simplesmente ir, boom. Significa apenas mais tarde quando estamos digitando, e eu estou digitando, você pode dizer que realmente eu quero que seja este, ou aquele, ou este. Esses são seus estilos de parágrafo. Você pode adicioná-los um de cada vez ou como um grande grupo como acabei de fazer. Talvez você queira adicionar a você. Você pode decidir que na verdade, em vez de chamá-lo assim, vamos chamá-lo talvez cabeçalho, qual era aquele, zero, hífen cabeçalho [RISOS] Título zero, você pode passar e nomeie todos esses. Vou deixar o meu como eles estavam. O mais legal sobre o uso de estilos é obviamente, podemos clicar e digitá-los, tocá-los aqui e escolher um tamanho diferente. Isso também significa que será ótimo mais tarde quando atualizarmos. O cliente volta e diz, de jeito nenhum, cara. Não gosto totalmente da Bernina. Preciso que seja outra coisa aqui. Eles enviam um e-mail para você e você vai, ok. Então, o que você faz é clicar com o botão direito do mouse e dizer Editar. Você pode dizer tudo bem que o cliente quer, nós vamos dar a eles. Aqui vamos nós. Piada clássica, piada do pai. O mais legal é que ele é atualizado aqui e atualizado todas as vezes que foi usado. Eu deveria ter feito isso um pouco mais excitante. Nós desfazemos. Se você tiver todo o caminho, todos os aplicativos diferentes, em todos os tipos de páginas diferentes, vá e atualize-o. piada [inaudível], ou pelo menos a parte excitante de tudo. Os estilos podem ser facilmente atualizados, facilmente adicionados e renomeados facilmente. Vou fazer o mesmo por esses caras e adicionar esses três. Cabe a você o quão confuso você quer entrar nisso. Você pode decidir que, na verdade, eu vou ter outro grupo separado desses e todos eles serão brancos. Porque haverá muitos desses aplicativos que realmente estarão na versão branca. A mesma coisa com isso. Haverá uma versão branca. Dependendo se você acha que vai ser poderoso ou simplesmente confuso aqui. Dependendo de quão novo você é e como você pode fechá-lo, entre na bagunça. Agora, o estranho disso é que, se você veio de outros produtos da Adobe, usamos estilos de caracteres e você precisa aplicá-los, não aplicá-los, isso não é aplicado InDesign, Illustrator, Photoshop. Não é assim neste. Digamos que este seja Amatic bold 48. Se eu apenas digitar aqui, eles não estão conectados ao estilo e eu digito [NOISE] e faço isso Amatic, e eu faço 48 e faço isso em negrito e provavelmente é menos para ser essa cor preta, mesmo que não esteja conectado a um estilo, não é como se fosse isso que eu estava fazendo. Eu estava tipo, como eu aplico o estilo agora que eu fiz? Só vai, se você quiser mudar qualquer coisa neste documento que seja a fonte certa, ou a cor certa, ou o tamanho certo, eu posso ir e apenas dizer editá-lo e você assiste, ele ajustará todos eles. Você vê apenas a cor deste e deste, não há reconectá-lo. Ele apenas olha no documento para qualquer coisa que seja o tamanho certo da fonte e a cor da fonte certa, etc. Você pode ver que ele não tocou naquele lá em cima porque é a cor errada. Não fazia sentido. Apenas para aquelas pessoas que usam estilos de personagem em outros aplicativos, você pode estar procurando alguns, eu não sei, mais detalhes onde não há nenhum. É inteligente. Agora, a outra coisa que não fizemos para a qual criamos um estilo é esse estilo de parágrafo aqui embaixo. Nós estivemos nesta caixa aqui, apenas expandindo a largura. Lembre-se de que olhamos para isso mais cedo na aula. Para um parágrafo, provavelmente o que eu quero é essa caixa aqui porque o que eu quero poder fazer é, vamos colar isso em algumas vezes, é a altura da linha. Olha, isso não é o que eu quero. Meu estilo no momento tem uma altura de linha de 45, gigantesco. O seu pode estar definido para algo mais apropriado. Acabei mexendo com o meu em algum momento. Você pode virar isso de volta. Agora, em termos de qual tamanho deveria ser, novamente não há tamanho exato, mas cerca de metade do tamanho da fonte, os tamanhos menores funcionam bem [RISOS] 1,5 depois digamos 20. Não é uma regra científica. [RISOS] Eu tomo de volta. [RISOS] Essa regra funciona bem quando você está trabalhando com tamanhos de 8, 9, 10 pontos. Não parece funcionar tão bom aos 16 anos. De qualquer forma, decida o tamanho de uma fonte. Lembre-se, estou usando minha seta para cima e para baixo, tenho algo como meu espaçamento entre linhas é perfeito. O que você também terá que decidir é que o parágrafo quebra. Nós realmente não olhamos para isso. Se eu colocar um retorno, no momento, há um retorno lá, eu apenas aperto Enter no meu teclado, mas não há espaço, nem espaçamento de parágrafos. O que vou fazer, selecione tudo e esta é a opção aqui. No momento, há zero espaços entre nossos parágrafos. Você teria que fazer isso, o velho truque de retorno duplo. Isso é muito grande. Então você está tentando destacar esse texto e você é como, se eu fizer isso até certo ponto, isso funcionará? Não. [RISOS] O que vamos fazer é selecionar tudo e usar isso para espaciar parágrafos. Vamos fazer isso metade do tamanho da fonte. Essa é minha pequena regra. É metade do tamanho [RISOS] da fonte é bom para o espaço entre parágrafos, não para o espaço entre as linhas. Vou fingir que é o que era de qualquer maneira, é. [RISOS] Agora o que precisamos fazer é, precisamos atualizar nosso estilo de parágrafo. Provavelmente teremos que excluí-lo e iniciá-lo novamente. Acho que não conseguimos limitar isso. Vamos verificar juntos. Você poderia apenas editá-lo e estar fazendo assim, mas o que vou fazer é apenas excluí-lo e adicioná-lo novamente. Isso traz um bom ponto. É editado novamente. Em vez disso, vou chamar isso de uma cópia corporal. Você pode movê-los em ordem, dependendo do nível de TOC de onde eles precisam estar. Fica muito confuso se eles estão todos misturados, dá uma pequena prévia que o aproxima. Você pode decidir, na verdade, é mais fácil em vez de tentar ler tudo isso, você pode chamar isso de H1. Falamos sobre isso antes. Na verdade, esse é o teorema de H. Você vai chamar isso de H2. Ele pode contar. [RISOS] Este aqui vai ser h. O que foi isso? Quatro é o mais baixo. Vou dividir o próximo. Você pode decidir isso [RISOS]. Não tenho certeza por que eu tinha encharcado todos eles para provar isso. Mas está feito. Novamente, sem regras exatas, mas isso é útil, especialmente quando você precisa atualizá-lo mais tarde, mesmo que você não coloque oficialmente tudo isso aqui e você só precisa atualizar um monte de fontes para salvar isso, é preciso ser atualizado. Você poderia simplesmente editar. Você adiciona apenas para entrar aqui para editá-lo. Você pode ver todas as coisas que você o usa são atualizadas. Você pode usá-lo para isso e que certamente você pode excluir suas coisas e não excluir a fonte real, excluir o estilo real. Agora, você só vai usá-lo para passar e alterar toda a cópia do seu corpo ao longo de um documento sem usar estilos. Tudo bem. Outra coisa que você pode fazer é adicionar uma cópia corporal para negrito também. Este aqui, vou adicionar uma versão. Esse cara aqui é cópia corporal. Vou criar outra versão que seja a versão em negrito da minha. Em vez de estreito, irregular, vou ficar estreito em negrito, e vou adicionar este, e vou dar a ele um nome de Body Copy Bold. É muito comum chamá-lo de parágrafo também. Esta cópia corporal, eu não sei. Body Copy Body, Negrito mesmo, sabe [RISOS]. Tudo bem. Eu tenho essas duas versões. Mais alguma coisa que eu queira compartilhar? Sim, há, verifiquei minhas anotações. Quero que você saiba que você não pode adicioná-lo duas vezes. Este já é esse Body Copy Bold [RISOS]. Se eu editar novamente, olhe, pouco aviso seria útil, mas isso significa que eu já estou lá não me adicionando novamente. Se eu passar e fazer deste um número estranho como 17 e eu posso editar agora assista [NOISE] lá ele está lá. Efeitos sonoros adoradores. Você pode arrastá-los para fora? Você não pode. Clique com o botão direito, exclua-os Eu vou desfazer isso, então volto ao meu normal. Outra coisa que eu queria compartilhar com você é, se você é de outros programas da Adobe, você faz parte da terra da Adobe, talvez tenha vindo algo do Illustrator ou do InDesign, Premiere Pro, qualquer um deles. O mais legal sobre a Adobe e o sistema de bibliotecas deles é que, digamos que você já tenha algumas fontes em outra, isso é o Adobe Illustrator. Pode ser qualquer coisa que tenha estilos de personagem, InDesign, Photoshop, esse tipo de coisa. O que você pode fazer é abrir suas bibliotecas em qualquer programa que você esteja usando. Selecione a coisa, clique no pequeno “Plus” na parte inferior aqui e diga, sim, vamos adicionar esse estilo de personagem à minha biblioteca. Estou adicionando-o a essa chamada classe XD, e não funciona com estilos de parágrafo no momento, XD, eu não sei, acho que há muita complexidade lá. Esse é meu palpite de qualquer maneira. Isso pode mudar no futuro, mas no momento, os estilos de personagem surgem. Há lá, é chamado de novo estilo de personagem. Se eu entrar no XD e quem se lembra do que é a biblioteca? Está em um lugar muito estranho. Usado para abrir em seu próprio painel pequeno. Agora, porém, você se lembra, você vai clicar nesta pequena seta de volta aqui e você acaba de volta em sua biblioteca. Há minhas bibliotecas, há meus ativos. Adicione ativos às minhas bibliotecas e vou encontrar minha classe XD1, XD. Estes são estilo de personagem, você, agora vamos ser qualquer estilo que fosse, que aconteceu de ser Museo Sans Tamanho arredondado 10, não um tamanho apropriado, mas pode economizar algum tempo se você já tem bibliotecas, você já tem algumas diretrizes de marca por meio algumas boas bibliotecas CC. Essas coisas podem ser acessíveis em vez de recriá-las. Agora, você pode estar se perguntando, ele faz isso toda vez que começa um novo emprego? Obtém as cores oficiais e todas as fontes e adiciona estilos? Não, não temos. Pode ser útil atualizar as coisas à medida que você avança. Você já pode ter algumas diretrizes de marca que você precisa seguir, então sim, por que não? Mas muitas vezes isso acontece depois que você tem uma ideia do design. Você cria isso retrospectivamente para que você esteja sendo consistente, mas o estágio de conceito puro quando tudo está uma bagunça, não, eu não estou usando muitos estilos de personagem, mas não demora muito antes você é como, oh, eu posso usar um estilo de personagem e isso vai acontecer com você eventualmente também. Este próximo pouquinho é mais, eu só preciso fazer algum trabalho para este curso para que possamos seguir em frente porque no momento tem sido muita teoria. Preciso passar por algumas coisas na página. Você tem permissão para ignorá-lo. Essas coisas podem ser úteis. Isso também, eu digo pule isso o tempo todo e sempre há algumas informações negativas se você quiser ficar. Vou começar a colocar o que é chamado de cartão. Você viu no início que eles são apenas um pouco razoável dos meus detalhes do produto. Vou colocar um pouco do que aprendi em prática. Isso é o que vou fazer. Quero ativar minhas colunas. Vou ativar minhas colunas clicando no nome dela na parte superior da tecla de seta. Vamos para a grade de layout. Agora, dependendo do que você começou, eu estava olhando para o meu design e quero um pouco de preenchimento do lado de fora. Decidi que não preciso encaixar muitas informações no meu design. Vou mudar para essa opção de quatro colunas. O que vou fazer é, acho que quero manter isso aqui e não apenas mostrar que você deve implorar. Que é fluido em termos de quão grande isso deve ser guardado, que margem você quer? Está se resumindo ao seu design. Eu queria essas colunas porque eu realmente as acho úteis para consistência em todas as páginas. Você pode decidir que, na verdade, eu vou colocá-lo em qualquer lugar que eu goste [RISOS]. Tudo bem. Vai ser um pouco complicado para o desenvolvedor. O que vou para a coluna quatro. Eu quero o quanto do lado. Quando comecei este curso ou esse design, eu ia empurrar tudo para as bordas. É por isso que posso adicionar preenchimento zero na margem nas bordas. Mas agora estou pensando que realmente quero alguma margem à esquerda e à direita. Vou usar isso. Eu não cobriu porque eu não fiz isso, mas você coloca margem ao longo do topo, ao longo da parte inferior, ou apenas a esquerda e a direita, depende de você ou você quer fazer. Há aquela informação negativa que você anda por aí. Novamente, múltiplos de oito são realmente úteis aqui, então 16 quanto eu realmente faço, 22 múltiplos de oito, 24 nas bordas e eu poderia abrir a largura, a calha também para dizer 16. Só estou olhando de novo. Podemos viver com 24? Vamos dar uma chance. Lembre-se que posso torná-lo meu padrão. Selecione todos esses caras e vá usar o padrão e provavelmente mude mais 20 vezes à medida que avançamos. Está tudo bem. O que eu quero é que eu quero um retângulo mostrando meu produto e até onde eu quero isso? Vou quebrar totalmente minhas regras a qualquer segundo agora. Eu sei disso [RISOS]. Vai ser um espaço reservado para a imagem. Vou pegar minha ferramenta de tipo. Vou digitar o produto batendo. Essas serão minhas diferentes características deste chá verde. Clique uma vez. Em que estou? Eu estava em uma ferramenta circular por algum motivo. Vamos pegar a ferramenta de tipo. Clique uma vez, e isso vai ser Tencha Mimoto [RISOS]. Algo a ver com chá verde. Lá vamos nós. Temos um tamanho doce lá. Mais uma vez, isso funciona para mim. Cópia corporal. Vou pegar minha ferramenta de tipo. Vou clicar e arrastar para fora uma caixa. Vou colocá-lo na cópia corporal. Posso repetir isso algumas vezes. Na verdade, eu posso fazer isso todo o caminho através disso, fazer isso se alinhar e fazer cópia do corpo onde você, tudo bem, estilos fazendo que você comece a usar nossas colunas. Estamos obtendo alguma consistência em todo o preenchimento. Isso está começando no espaço certo usando algumas de nossas amostras de cores. Deixe-me ir. Aqui vamos nós. Desligue as colunas agora. Lembre-se de que há atalhos para que as colunas estejam ligadas e desativadas. Eu chamo isso de colunas. É chamado de grade de layout. Fizemos os quadrados ou as colunas. Isso é aquele atalho maluco lá. seu será diferente em um PC. Turno, Comando, Apóstrofo. Lá vamos nós. O que eu quero fazer é ter múltiplos disso, lá vamos nós. Vamos olhar para o espaçamento. Só vou ajustar isso. Vamos fazê-lo no modo super rápido. Tudo bem, encontre meu primeiro problema. Ele se encaixa apenas, mas provavelmente vou encontrar algo mais longo. Vou ignorar esse problema no momento. Talvez eu tenha que, nesta fonte em particular, ir para outra coisa como 44 ou algo mais tarde, mas veremos o que nos deparamos então. No momento, estou feliz. Não me lembro por que começamos este vídeo. O que estávamos fazendo? Estávamos fazendo estilos de personagens. É por isso que [RISOS] levei um tempo. Acabamos fazendo um pouco de material de vídeo de produção em que realmente temos que fazer algumas coisas e esperamos mostrar alguns insights sobre, na verdade, enquanto você está trabalhando, coisas pode se adaptar e mudar à medida que você avança. Tudo bem, é isso para este vídeo muito longo, e eu te vejo no próximo. 42. Plugin - Como adicionar nosso primeiro Plugin Lorem Ipsum ao Adobe XD: Olá a todos. Neste vídeo, vamos instalar nosso primeiro plugin no Adobe XD. O que são plugins? Plugins são coisas que o Adobe XD não faz por conta própria, outra pessoa além da Adobe os criou, e eles fazem coisas como neste caso, trazendo ícones, trazendo UI Faces, texto de espaço reservado. Existem muitos plugins diferentes para estender o Adobe XD além do que está no sistema. Vou mostrar a você como instalá-los. Vamos trabalhar com este Lorem ipsum one, que é texto de espaço reservado. Para nós, neste caso, vamos definir uma cópia do corpo de escrita repetidamente. Vamos colocar algumas palavras latinas misturadas que parecem boas frases sem que elas realmente sejam frases reais. Vamos instalar nosso primeiro plugin. Para obter plugins no Adobe XD, aqui em baixo analisamos camadas, analisamos nossos ativos, painel com estilos de caracteres diferentes. Olhe para este último aqui, plugins. Nada realmente acontecendo. Aperte “Plus” ou clique em “Discover Plugins”. Vai abrir essa coisa. Este é o aplicativo Creative Cloud. Se você ainda não o instalou ou não está aberto, dê um segundo. Você pode pensar, está fazendo alguma coisa? Só está demorando um pouco para carregar. Essa coisa muda. Eles reorganizam isso um pouco. Então, acabei neste estoque mercado e plugins. Você pode fazer pesquisas por ele. No momento, ele tem destaque. Quero ver todos os plugins. Agora, se você não conseguir encontrar a tela da Creative Cloud, você não tem o aplicativo instalado, precisará do aplicativo Creative Cloud instalado, mas poderá acessar isso pelo navegador da Web. Vá para exchange.adobe.com e estamos lidando com a Creative Cloud. Aqui você pode encontrar coisas como, aqui em baixo, vamos encontrar coisas para o XD. Você pode encontrar extensões ou plugins diferentes para isso aqui. Vamos seguir o caminho correto por meio do aplicativo Creative Cloud. Está encomendando pelo mais popular, o que é útil. Aqueles que têm boas estrelas e depois são carregados baixados, muitas vezes são os melhores. Mas há centenas de diferentes para passar. Então, passe um pouco de tempo, dê uma olhada e você pode ser como, eu uso isso ou uso esse. Você pode conectar outros fluxos de trabalho talvez que você esteja fazendo ao que está fazendo aqui no XD para economizar algum tempo como se houvesse um espelho. Eu uso bastante as placas de espelho para o trabalho. O que vamos usar é esse Lorem ipsum. Lorem ipsum, se você não ouviu falar disso antes, é apenas texto de espaço reservado. Lá vai você. Clique em “Instalar”, concorde com seus termos e condições e, eventualmente, ele lhe dirá, veja isso. Isso agora está instalado. Se você voltar para o XD, há ele. Lá está ele. Para que funcione, você precisa realmente definir e enviar texto primeiro porque eu usei a cópia do corpo, a cópia do corpo. Isso não é divertido. Se você acertar isso e apenas acertar este aqui diz: “Quick Lorem ipsum”, e ele vai apenas jogar algumas coisas básicas. Você concorda com isso? Você concorda. Você não tem escolha [RISOS]. Então, ele é adicionado. Estas são palavras latinas, palavras reais apenas misturadas para que não façam sentido. É fácil quando você está projetando tê-los como espaços reservados em vez de texto real porque você pode não ter texto do cliente ou acaba em discussões com o cliente sobre, você não pode escrever isso aqui e você está tipo, não se preocupe com os textos, é apenas texto de espaço reservado apenas lá para lhe dar uma ideia de design. Você pode passar e ir até você, apenas se tornar isso. Você pode ver que ele está usando meu estilo. Nem precisa ser um estilo. Só está usando o que estava naquela caixa para funcionar. Se você não tiver nada selecionado, você receberá esse ou aquele. Sim, nenhum texto selecionado. Tenha algo selecionado primeiro. Não vou passar por tudo isso. Bem, vou passar por um pouquinho deste. Este “Rápido”, só vai despejar o que for e tentar combiná-lo. Há este primeiro aqui. Você pode fazer algumas coisas mais extravagantes como, você quer que seja Lorem ipsum? Há outros textos de espaço reservado diferentes e você pode decidir, eu quero terminá-lo com a pontuação de parada total. Você quer algumas quebras de linha lá também? Deseja cortar a área de texto para caber? Lembre-se que temos essa altura automática. Pode cortá-lo para se encaixar perfeitamente. Acabei de adicionar uma parada completa. Você conhecerá diferentes plugins como este aqui podem não estar lá quando você vier verificar, ou pode ser algum outro aplicativo de texto de espaço reservado incrível que você escolher, ou é o topo do popular? Há aqui, todos eles funcionam de forma um pouco diferente. Este ainda tem um atalho. Olhe para isso. É isso para este plugin em particular. Faremos mais alguns ao longo do curso. Se você precisar se livrar deles, você pode clicar com o botão direito do mouse neles e gerenciá-lo e ele abrirá sua Creative Cloud. No meu caso, está lá. Posso desativá-lo ou desinstalá-lo e/ou removê-lo. É assim que adicionar um e é assim que removê-lo. Mas eles são divertidos. Você encontrará coisas lá que têm alguma conexão com outros aplicativos, fazendo coisas que o próprio Adobe XD ainda não faz. Alguns desses que eu tive no início, havia muitos plugins que eu usei que eu simplesmente não preciso mais porque o Adobe XD, estou supondo, olha para alguns desses plugins e vai, cara, isso é sendo baixado um zilhão de vezes. Pessoas gostam disso, provavelmente deveríamos trazer isso para o aplicativo e isso acontece. Mas faremos mais alguns ao longo do curso. Mas, no momento, é isso. Isso está instalando nosso primeiro plug-in. Próximo vídeo. 43. Projeto do curso 08 - Texto: É hora do projeto. Vou fazer com que você chegue a esta fase. Em seus projetos de classe, você verá o Projeto Classe 8. Vou precisar criar um logotipo. Depende de você. Você pode fazer isso super simples como eu. Acabei de usar minha fonte e uso uma versão em negrito e uma versão leve. É o mais extravagante que vou. Mas se você quiser gastar um pouco mais de tempo fazendo um logotipo legal para sua marca, faça isso. Então eu quero que você crie em sua página inicial. Quero que sua página inicial tenha sua mensagem de marketing. Você vai ter que pensar sobre isso para sua empresa. Aquele que você recebeu anteriormente desse gerador de projetos aleatórios, dê uma mensagem de marketing. Você pode copiar de outra pessoa. É só um enchimento. No momento, você não vai acreditar nisso. Fiz o meu próprio em um lindo chá verde à sua porta. Único para mim, eu sei. Crie algo aqui. Tente usar algumas fontes diferentes porque o que eu quero que você faça é parte disso está me enviando essa pilha aqui. Mesmo que você não precise fazer essa etapa do projeto, o que eu quero fazer é apenas fazer com que você faça essas coisas e eu quero que vocês dois tenham certeza de que estão na sua biblioteca de ativos e seus estilos também. Pratique isso, adicione-os lá. Faça uma captura de tela disso e uma captura de tela dessas duas páginas. Esta página aqui é um pouco diferente. Vamos ver um pouco de lição de casa fora desta lição de casa, um projeto de pesquisa. Já falei sobre cartões antes. Quero que você pesquise o que é o cartão de interface do usuário? Dê uma olhada e sua lição de casa é de 10 minutos. Vá gastar e ler um pouco sobre isso. Haverá muitos termos que usei neste curso que você vai fazer que é novo para mim, novo x, e está fora deste curso passar por cada termo. Então saia e pesquise-o. Eu quero que você descubra o que é um cartão, para que ele é usado. A versão curta é que são essas pepitas de informação reutilizáveis. Tenho alguns exemplos em seus arquivos de exercícios. Eles estão lá. Os exemplos da placa de interface do usuário. Eu peguei alguns. Você tem uma noção do que eles são. Estes são repetíveis e você pode torná-los únicos. Apenas significa que eles se encaixam em um site. Eles podem ser estruturados e divididos forma responsável para diferentes dispositivos. Mas tenha uma pequena pesquisa sobre o que é um cartão de interface do usuário. Dê uma olhada em alguns dos meus exemplos. Eu quero que você venha com o seu próprio para sua marca. Eu fui por algo simples. Eu puxei o olhar, não seguindo meus guias, puxei isso das bordas de lá. Eu adicionei uma sombra. Eu não quero que você faça muito trabalho de design ainda. Mas a sombra é fácil de ligar e desligar. Vamos ver mais efeitos mais tarde no curso, mas temos algo, ter pelo menos três coisas diferentes para o seu produto. Você não precisa pensar nisso também. Peguei emprestado de um concorrente só para ter algo para usar. Essas serão imagens quando entrarmos nessa parte do curso. Você faz o mesmo em círculos ou quadrados de espaço reservado. Quero que você instale seu primeiro plug-in também. Há muito o que fazer por este. Homepage no espaço reservado da mensagem de marketing, crie seus próprios estilos de texto sobre os quais falamos , instale um plugin. O espaço reservado Loren Ipsum um. Não precisa ser o ganho que eu uso, mas algo que você pode usar para preencher essas lacunas. Até usou esses títulos de produtos como específicos, como encontrar alguns recursos que seu produto tem apenas para que você tenha algum conteúdo acontecendo e pesquise os cartões de interface do usuário, crie esses pequenos cartões de recursos e captura de tela disso, captura de tela disso. Isso é o que você realmente precisa fazer para enviar. Finalmente estamos nos deixando de ser como todas essas coisas até agora são apenas projetos de pesquisa e não muito estimulantes visualmente. Agora, estamos visualmente estimulantes e quero que você compartilhe agora através das mídias sociais. Há uma conta do Instagram, uma conta do Twitter, um grupo do Facebook e o LinkedIn. Depende de você como você quer fazer isso e me marcar no Instagram ou Twitter. O grupo do Facebook é incrível, assim como o grupo do LinkedIn sobre compartilhar seus designs e pediu feedback se você quiser dizer pagamento, esta é minha primeira coisa e já no UX ou no Adobe XD o que vocês acham? Esteja preparado para ser criticado confortavelmente como esses lugares aqui, eu sinto que temos um bom senso de como, sim, não é um estilo Ruthless Reddit, crueldade. É um bom grupo cheio de pessoas como você que estão começando. Além disso, enquanto você estiver lá, certifique-se de comentar sobre o de outra pessoa porque parte disso, tornando-se um bom designer, designer de UX está sendo capaz de identificar o trabalho de outras pessoas, coisas que você realmente gosta sobre isso, que você pode tirar por sua própria coisa ou ser capaz de entregar críticas de uma forma que não faça as pessoas chorarem. Isso é algo que você pode praticar lá também. Sobre alimentar de volta para outras pessoas como o que você ouviu. Se fosse eu, provavelmente olharia para fazer X, Y e Z. Essa é a vibração que temos nesses grupos. Então experimente fazer upload do seu trabalho e também entregue a outras pessoas, porque isso é uma grande parte de ser um designer. É ser capaz de entregar e aceitar críticas sem chorar demais. Eu choro ainda, não se preocupe. Vá fazer sua lição de casa, muito o que fazer. Vejo você no próximo vídeo. 44. Como desenhar e editar formas no Adobe XD: Olá a todos. Neste vídeo, vamos criar algumas formas simples usando as ferramentas de forma no Adobe XD. Vou mostrar alguns dos segredos dentro da ferramenta polígono e como entrar em algo chamado modo de edição de objetos para personalizar algumas dessas formas. Vamos pular. Vamos fazer algum desenho. Só estou trabalhando nesta prancheta vazia aqui. Começaremos com a ferramenta retângulo. Já fizemos um pouco com isso, então eu tenho esse retângulo. Quem se lembra do que eu mantenho pressionado no meu teclado para chegar direto ao que pelo menos o quadrado. Você tem que mantê-lo pressionado “Shift”, antes de eu começar a arrastar, arrastá-lo para fora e você obtém um quadrado perfeito. Eu não quero um quadrado [RISOS]. Eu quero algo parecido com isso, vai ser aquele pequeno ícone de preço taggy. Agora, uma das coisas legais sobre formas no Adobe XD é que você pode fazer coisas como os cantos arredondados, basta arrastá-los para fora. Mas se você acabar em algo chamado modo de edição de objetos, nem sei se ele tem um nome. É o que eu chamo de qualquer maneira. Se eu pegar minha ferramenta Seleção e clicar duas vezes nela, você pode estar aqui o tempo todo por acidente porque você é um clique duplo. Você adora clicar duas vezes em coisas, você é assim alterado, clicar de volta, sair do modo de edição de objetos, voltar a entrar. Enquanto estou fora. Eu tenho todo esse controle adorável porque é chamado de forma primitiva, ele sabe. O computador sabe disso, isso é um retângulo e, como tal, posso fazer coisas legais de canto arredondado para ele. Mas se você entrar aqui e editar isso, assista a isso. Quando estou neste modo de edição de objetos, que diz que essas coisas vão pontos de ancoragem e posso me movimentar. Ei, arraste essas alças pequenas para alterar o tipo de curva. Você pode entrar em qualquer forma, clicar duas vezes nele e começar a brincar aqui e contar totalmente. O problema é que, se eu sair apenas clicando no fundo e agora eu clico nele, aqueles cantos arredondados, você sabe que eu não perdi este. O XD diz, eu não sei mais o que você é. [RISOS] É isso? Eu sei, estamos chamando isso de saquinho de chá. Parece saquinho de chá, mas não tenho mais esse controle. Então essa é a única desvantagem de entrar no modo de edição de objetos e perder, mas precisamos criar nossos próprios ícones e formas personalizados, e vou desfazer isso até que ele volte. Sei que está de volta porque essas coisas aparecem novamente. Vou me livrar deles, porque o que eu quero fazer é clicar duas vezes nele e ir até aqui e adicionar um ponto. Estou nisso, posso editá-lo, editar pontos existentes, mas assista isso. Se eu passar o mouse acima desse pequeno ícone, é a ferramenta de caneta em que posso clicar uma vez, e está me dando um ponto, veja que eu posso arrastá-lo para cima. Aqui vamos nós. Minha pequena coisa de preço de corte de casa. Esse é o modo de edição de objetos, para sair dele, basta clicar em qualquer lugar em segundo plano e agora é apenas uma forma antiga regular que é mais difícil de destruir. Um pequeno círculo aqui, o que seguramos para torná-lo perfeitamente redondo? Isso mesmo, “Shift”. Vou para a ferramenta Seleção, que é a tecla V. Selecione “V”, selecione ambos, vou dizer, certifique-se de que você está alinhado verticalmente. Eu desenhei perfeito, legal. A outra coisa a saber sobre objetos como você pode girá-los. Eu selecionei os dois novamente, lembre-se, lá vai redimensioná-lo e logo fora daqui, lá está lá, é como a terra de nenhum homem, não lá, não lá, para isso como um pequeno redondo , você pode clicar e arraste-o. Vou reduzir o meu pressionando “Shift” e arrastando-o. Lembra do derrame? Tudo bem. Estou bem com esse tamanho. A próxima coisa que eu queria fazer é ver algumas dessas outras ferramentas. Então quadrado, círculo, este aqui tem algumas habilidades especiais. Nós desenhamos uma ponta de seta mais cedo no curso. A mesma coisa, segure “Shift” para obter um equilátero perfeito. Não sei como se chama. [RISOS] mesmos tamanhos. Você tem um triângulo, o triângulo, porém, tem algumas habilidades secretas. É isso como um pequeno grupo aqui. Ou se você passar o mouse acima dele, você pode ver esse, você vê pequeno ícone? É uma estrela. Vamos dar uma olhada, então lados sábios vamos 14, decágono. Eu nem vou adivinhar esses [RISOS] Eu sou tão ruim nisso. Gostei de matemática, não muito bom nisso, cinco é meu hexágono, pentágono. Vou parar de adivinhar. Mas você apenas toca dentro e você pode obter lados diferentes. A outra coisa que você pode fazer é esta estrela inserção aqui, esta aqui. Se você digitar isso, vamos completar 10 por cento estrela espetada. Eu vou, digamos que cinco, e eu vou 50 por cento te dá, cinco lados, 50 por cento estrela inserção lhe dá aquela estrela tradicional que vamos usar para aquela estrela tradicional que vamos usar para nossa pequena votação cinco- resenhas de estrelas, que você deve deixar por sinal neste curso. Vamos dar uma olhada. Uma das opções que ele tem é esse canto arredondado, então eu coloquei em seus pixels, provavelmente é um pouco demais, muitos desses controles realmente estão nele. Você pode ver se eu amplio? Há essa parte aqui que é a inserção da estrela, você vê e esta aqui, que é o quão pontuda é. Você vai, você, então você só quer um pouco de lá e começa a parecer assim. Vou lá. Aqui vamos nós. Então esses são os segredos do triângulo, ou acho que é chamado de ferramenta de polígono. É porque são todos polígonos. Últimas coisas com formas. Bem, eu acho que mais um com ele selecionado, você pode ir para o objeto e há sob Transform, você pode virar horizontalmente, verticalmente ou não faz nada por uma estrela porque é simétrico então, [RISOS] é como este, e não está agrupado, e por isso tem Object, Transform Flip Horizontalmente. Lá vamos nós. Há um flip verticalmente, mas você entende a ideia. É assim que fazer isso se você precisar. Isso é básico para criar formas. Você pode clicar duas vezes neles para entrar e ajustá-los. Mas você perde um pouco desse controle como temos com coisas assim com a estrela. Isso é criar coisas simples com algumas formas de desenho. Para o próximo vídeo. 45. Estranheza com formas no Adobe XD: Olá a todos. Este vídeo é algo estranho no Adobe XD. Vai ser basicamente em torno disso que se eu escalar isso, ele se transforma neste blob. No início do curso, Dan nos mostrou uma maneira de clicar com o botão direito do mouse em dizer Outline Stroke, que lhe dará resultados ainda mais estranhos. Vou mostrar a vocês como contorná-los, alternativas para o Outline Stroke, e fazer o meu melhor para explicar isso. É complicado, mas vamos começar . Pegue o número 5. [RISOS] Eu gravei isso tantas vezes. É complicado de explicar; acontece que, porque é coisa estranha, então é estranho explicar. Você não sabe que eu fiz cinco vezes, mas [RISOS] você provavelmente vai ter do meu comportamento maníaco que eu já fiz isso algumas vezes. Vamos focar isso, vamos entrar lá. Qual é o problema? Vamos esquecer você. As coisas me dão um problema, [RISOS] então vamos esperar que isso corrija isso. Eu tenho uma estrela, ela tem que preencher uma fronteira. Eu tenho cantos arredondados, você pode ver. Onde está meu pequeno canto arredondado? Está lá. Lá está lá. Tem cinco arestas, e tem um conjunto padrão 47% e tem cantos arredondados de dois. Quero torná-lo menor, então vou duplicá-lo , torná-lo menor. O que está acontecendo? Nós nos deparamos com isso no início do curso. Lembra quando tentamos escalar as coisas e o derrame não veio junto com isso? Usamos o método que não funcionará agora, mas esse padrão de dimensionamento é realmente útil quando estamos usando coisas como a ferramenta retângulo. Ferramenta Retângulo, adicionamos alguns cantos arredondados e, em seguida, usamos para nossos cartões, caixas ou botões e depois fazemos um tamanho diferente. Tamanho diferente; um realmente grande, e você pode ver que ele mantém os tamanhos de cantos arredondados. Está acontecendo com a nossa estrela também. Isso acontece com algumas formas diferentes no XD, e isso pode ser um pouco estranho. O que não passamos para trancá-lo e funciona agora, é que clicamos com o botão direito e dissemos descrever o traço, e então o que fizemos foi reduzi-lo. Isso foi ótimo desde que não tivesse preenchimento. O que está acontecendo? Isso é um pouco da estranheza. O que acontece é quando você descreve um traçado que tem um preenchimento, basicamente o separa, então eu tenho meu preenchimento separado do traçado ao redor do lado de fora ou da borda neste caso. Isso é uma coisa, você diz : “Eu posso me livrar disso.” Basta prendê-lo e reduzi-lo , e você diz: “Ótimo”. Agora vou preenchê-lo. Por que ele não está preenchendo? Ele foi convertido em um preenchimento. Todo esse processo de delinear o traço basicamente o que ele faz é transformar seu traço em duas partes; esse preenchimento e, em seguida, essa coisa, e isso também é um preenchimento. Se eu clicar duas vezes nele para entrar no modo de edição, é difícil descrever, mas isso agora parece um traçado, mas na verdade é um preenchimento. É apenas um bom preenchimento fino aqui. Não consigo adicionar um preenchimento, posso adicionar um pensionista a ele. Olhe para isso. Posso adicionar uma borda lateral estranha a ela. Vamos torná-lo ainda menor para que você possa ver. Posso adicionar uma borda do lado de fora ao meu preenchimento como posso com todas as outras formas mas não é o que eu queria aqui, então como você contornar isso? Vou mostrar uma maneira diferente de abordar isso. Se isso não funcionar e Outlines Stroke lhe der algum comportamento estranho, vou fazer a mesma coisa novamente. Em vez de clicar com o botão direito do mouse em “ Traçado de contorno ”, vamos usar de uma Com ele selecionado vá para Objeto e vá para Caminho. Há um lá chamado Convert to Path. Vamos clicar nisso. O que acaba acontecendo é que essa coisa aqui, basicamente quebrou toda a esquina arredondada. Se eu desfazer, [RUÍDO] Eu tenho toda aquela coisa adorável que diz que tenho cinco lados, tenho cantos arredondados, tenho conjunto padrão. Se eu for para Object, ir para Path, e disser Converter to Path, ele apenas quebra todas essas coisas como o que fizemos quando fizemos o modo de edição de objetos, quando fizemos a tag no último vídeo. Clique nisso, parece o mesmo. Ele ainda tem um tamanho de tabuleiro, mas significa que quando eu escalar os cantos arredondados, vou vir pelo caminho certo. Ainda tenho o problema com o tamanho dele, então vou ter que fazer uma borda apropriada, mas pelo menos meus cantos arredondados não serão afetados. Isso funciona da mesma forma se você tiver um quadrado que tenha um canto arredondado. Ainda tem esses cantos arredondados , você quer estourá-los. Vá para Objeto, e você vai para o Caminho, e você diz Converter em Caminho em vez dessa coisa adorável chamada primitiva que é ajustável. Agora, se eu ajustá-lo, olha, não é bem o que eu quero com um retângulo, mas espero que especialmente porque vamos desenhar mais e mais ícones, haverá momentos em que você está, “Oh, por que você não faz o que eu queria fazer?” Convertê-lo em um caminho primeiro pode ser bom. Às vezes, delinear o traçado pode ser bom quando você deseja separar o preenchimento do lado de fora, e então a borda ao redor do lado de fora é editável e você pode tratá-lo como um preenchimento. Vou parar por aí. Sinto que poderia ter feito este. Sinto que isso poderia ter explicado, não vou [RISOS] continuar falando. Vamos fazer isso de novo no curso, não se preocupe. Mas saiba que há mais do que apenas traçado de contorno, há Convert to Path também. Um ou dois deles funcionarão para você. Isso é uma tomada, é um pessoal de rap. Eu precisava de uma pausa. Esquisitice no Adobe XD, feito no momento. Isso poderia ser eu feito para o dia. Vejo você no próximo vídeo. 46. Aprenda a desenhar com a ferramenta caneta no Adobe XD: Segure seus chapéus a todos, vamos desenhar algumas formas incríveis usando a ferramenta Caneta. Ficaremos um pouco melhores com este aqui abaixo, mas acho que quero apresentar a ferramenta Caneta porque é uma das ferramentas e realmente útil no Adobe XD. Não será um tutorial completo sobre tudo o que a ferramenta Caneta puder ou de uma introdução para você começar. É uma ferramenta útil se você não souber como usá-la. Deixe-me mostrar-lhe como. Começaremos com a ferramenta Caneta. É como uma pequena coisa de caneta-tinteiro aqui. Você tem dois modos. Há um clique uma vez, lhe dará um ponto de vértice. Eventualmente, você quer terminá-lo completando-o e assistindo a isso. Você se aproxima da borda e ela vai pop [RISOS] Não tenho certeza de onde vem esse efeito sonoro, isso é novo para este curso. [RISOS] Mas você pode ver lá, ele se conecta e você clica uma vez e ele se juntará a tudo. Em seguida, você pode adicionar um preenchimento. Vou acariciar. Você pode clicar em todo o lugar. Agora, o problema com isso é que existem linhas retas, mas elas não são muito paralelas, então vamos mover isso aqui. Vamos pegar a ferramenta Caneta novamente. Se eu segurar “Shift” enquanto estou clicando, então segurando a tecla “Shift” para baixo, posso clicar uma vez e você pode vê-lo bloqueá-lo em ângulos de 45 graus, então significa que eu posso ir para você, você. Vou desenhar uma casinha, 45 graus. Esta é minha casinha. Lá vai você. Aí está minha casinha, escolha uma cor diferente. Algumas ótimas opções de cores aqui então. Clicar uma vez dá um canto. A outra coisa que ele faz é deixar você fazer curvas, então vou tentar desenhar um círculo. A coisa estranha sobre a ferramenta Caneta, lembre-se se você quer ir mais longe com esta ferramenta Caneta, isso é como uma introdução básica rápida, e a ferramenta é usada principalmente em algo como o Adobe Illustrator. Você pode querer conferir meu curso sobre isso, essencial do Adobe Illustrator ou o curso de outra pessoa ou aprender on-line como usar a ferramenta Caneta, mas esse é o básico. Vou desenhar um círculo. clicar, segurar e arrastar. Clicar uma vez dá um canto. Se você clicar em segurar e arrastar lhe dará essa coisa de curvas. Clique em segurar e arraste, círculo vacilante chegando. Clique em segurar e arraste, e você pode arrastá-lo acidentalmente da maneira errada e faz coisas estranhas. Às vezes você precisa arrastá-lo para fora e continuar a mexer. Lá vamos nós. Então, aqui, o que você realmente quer fazer é clicar nele uma vez. Mas o que acontece quando você clica uma vez? Você obtém esse ponto de canto e não é isso que queremos. Você pode ver que vai ser um canto feio. Novamente, mesmo com o finalizado, clique em segurar e arraste. Aqui vamos nós, um círculo instável. [RISOS] O que mais temos? Não o selecionei. Selecione tudo, preencha. Se você quiser editar qualquer um desses pontos, nada está funcionando. Por que você não tem um preenchimento? Preencha, por favor, agora você tem um preenchimento e lá vamos nós. Oh, está ali. Olha, tinha um preenchimento de branco. [RISOS]. Basta arrastá-lo para lá, então você provavelmente está gritando com a tela, ele está fazendo errado e lá vamos nós. Tudo está bem no mundo novamente. Se você quiser editar qualquer um desses, precisamos entrar neles e editá-los porque com a seta preta, se eu clicar em segundo plano, clicar neles uma vez, só podemos redimensionar essas coisas. Mantenha pressionado “Shift” para dimensionar a altura e a largura proporcionalmente para que ela seja dimensionada para cima e para baixo. Mas quem se lembra de como eu entro lá e começo a trabalhar nesses pontos de ancoragem? Fizemos isso mais cedo, então eu apenas clique duas vezes nele. Você pode entrar neste modo de edição de objetos? Você pode então entrar aqui e ir realmente isso. É um pouco assim e isso provavelmente precisa estar lá em baixo um pouco. Se você quer que ele seja curvo, mas curvo afiado, aproxime-os do ponto de ancoragem. Ainda curvo, clique fora, mas [RISOS] Eu não sou tão bom. Essas são três formas feias. Vamos fazer algo um pouco mais bonito. No meu caso, vai ser uma folha de chá. Quando você está desenhando seus próprios ícones, será relativo à sua empresa para a qual você está trabalhando. Mas vamos combinar os dois, mas ele curva um pouco de cantos finais. Ferramenta caneta novamente. Eu só vou fazer isso e depois faremos isso pela segunda vez. Vou clicar tudo uma vez para um canto porque eu queria ter uma folha de chá pontuda no topo. Então eu vou clicar em segurar e arrastar por um pouco arredondado. Então aqui embaixo, mesmo que não seja perfeito, eu sou como, isso não é perfeito. Vou clicar uma vez para um canto. Muitas vezes, você só recebe os pontos e edita-o mais tarde. Por aqui, quero que seja outra curva. Clique, segure e arraste e, em seguida, volte aqui, quero que seja um belo canto pontudo. Você clica e arrasta para um canto ou clica uma vez para um canto? Você conseguiu. Você clica uma vez. Lá vamos nós. Há uma folha de chá instável. Vou até minha ferramenta de seleção e já estou no modo de edição de objetos. Mas se você clicar e clicar novamente, você terá um duplo clique nele. Lá vamos nós. Então esse cara no fundo aqui, vamos aqui. Eu posso movê-lo para menor. Não tenha medo de mover o ponto de ancoragem real também aqui vai. Essa é minha coisa frondosa de chá. O que eu poderia fazer é ter uma duplicata deles para copiar e colar, então os dois. Este vai ser verde porque é uma folha de chá. Mas vou usar minha cor de folha de chá não muito. [RISOS] Mais chá frondoso. Ficando melhor. Este será preenchido com branco sem borda. Você não terá fronteira. Para onde esse cara foi? Lá está ele lá. Vamos torná-lo menor. Não estou segurando o turno neste caso porque quero distorcê-los, então só estou arrastando por aí. Eu não estou segurando membros de turno e rotação apenas do lado de fora, então essa é minha coisa frondosa de chá. Você poderia fazer isso de uma só vez? Você pode, quando você melhorar, só para saber, a ferramenta Caneta é provavelmente a coisa mais difícil de aprender na internet. É complicado para aqueles de vocês que sabem e podem usá-lo, vocês vão sentar lá presunçosamente indo. Eu sei como usá-lo [RISOS] , mas levei idades porque é claro. Se você é novo e está achando difícil. Isso é apenas parte da ferramenta Caneta. É preciso muita experiência. Fora desse escopo deste curso, faça muita prática, mas eu queria dar-lhe algumas noções básicas para que você possa, pelo menos, experimentá-lo. Eu ia fazer isso agora, clico uma vez para um canto, clique e arraste para fora, desci até aqui, clique uma vez. Vou fazer uma curva aqui, clicar uma vez, ir cortar aqui, então, em vez de ter duas formas separadas, você pode ver que posso começar a fazer isso agora. Não é perfeito. Não clique e arraste, clique uma vez. Se a linha não se conecta e você é como, como faço para te levar lá? Você seleciona neste, aquele que você quer começar a se juntar, e pega a ferramenta Caneta, lá está ele , e clique neste primeiro. Na verdade, você não precisa clicar nele primeiro. Basta pegar a ferramenta Caneta, clicar no ponto com o qual você deseja começar, e isso a conecta novamente. Lá está ele. O básico está lá. Vou até você, vou aqui. É uma folha de chá melhor. Existem outras formas de fazer isso. Eu não quero entrar nas ervas daninhas com isso só para que você saiba, existem maneiras extravagantes de usar a ferramenta Caneta. Isso é perto o suficiente para o que eu preciso. Essa é a cobertura breve da ferramenta Caneta. Clique uma vez para um canto, clique e arraste para uma curva e esteja preparado para ajustá-la depois, e também prepare-se para ficar um pouco frustrado. É uma coisa complicada de aprender. Isso era para ser o fim do vídeo. Foi o fim do vídeo. Voltei do futuro porque há algumas coisas que não mencionei até agora sobre a ferramenta Caneta. É útil e é sobre qualquer forma que você tenha criado no XD. Todos sabemos como entrar e editar essa coisa, então clique duas vezes nela. Se você quiser adicionar um ponto extra, apenas pairando na borda, lá vai você. Basta clicar uma vez e você pode obter um ponto extra, então você pode arrastá-lo. Você pode adicionar mais pontos de ancoragem se precisar deles. Da mesma forma, você pode removê-los e dizer que há muito neste. Clicando uma vez soar como, eu não quero mais esse. Eu não quero este ou apenas clique nele e clique em “Excluir” no seu teclado. É assim que adicionar e remover pontos de ancoragem. Outra coisa que eu queria mostrar a você era convertê-los. Digamos que este aqui começou a vida como um canto. Você pode gostar? Isso foi bom. Eu não quero que seja mais um canto. Eu quero que você seja curvilíneo. Tudo o que você precisa fazer é lembrar de clicar duas vezes para entrar no objeto e, em seguida clicar duas vezes nele e ele o converte de curva, canto, curva, canto. Esses vão ser um pouco, oh, basta clicar duas vezes nele, curva curva. Convertendo os pontos após o fato e, em seguida, não importa se você os desenhou com a ferramenta Caneta ou começou a destruir algumas dessas formas regulares que fizemos anteriormente no curso. Mas sim, esses são os extras que eu queria adicionar a este vídeo para lhe dar um entendimento um pouco mais completo de alguns desses caminhos e como eles funcionam. Isso é definitivamente para este vídeo, eu vou te ver no próximo. 47. Trabalhando com trações e linhas no Adobe XD: Olá, todos. Bem-vindo ao Border Extravaganza. Vamos olhar para linhas, bordas, traços, o que você quiser chamá-los. Vamos olhar para linhas pontilhadas, veremos esses caras que alguns têm pontas planas, extremidades arredondadas. Então vamos olhar para algumas formas e algumas da estranheza que faz onde algumas delas andam e algumas delas cortadas e algumas delas são apontadas. Vamos explorar tudo isso neste vídeo. Vamos entrar. Continuo chamando-os de traços. XD os chama de fronteiras. Só para você saber. Vamos criar essa linha no meio desses dois para separá-los um pouco. Não importa se você usa a ferramenta de linha ou a ferramenta caneta, neste caso, você acabará com o mesmo resultado final. Vou usar a ferramenta de linha e arrastá-la para fora. Como faço para que ele vá direto? Mantenha pressionado, “Shift”. Nesse caso, realmente quer, de qualquer maneira, eu não tenho que segurar nada, mas segure “Shift” apenas para ter certeza. Eu recebo meu traçado de barra de borda. Agora, eu poderia, vou excluir isso. Use a ferramenta Caneta. Clique uma vez, segure “Shift”, clique duas vezes. Eu acabo com a mesma coisa. Voltar à minha ferramenta Seleção. Não importa como você deseja criar essas coisas. Primeiro de tudo, o que eu quero fazer é que eu quero torná-lo meu esbranquiçado. Vamos ampliar um pouco. Barra de espaço, arraste-a para o outro lado. Tenho minhas pequenas linhas selecionadas. Vejamos o mais fácil. Vejamos aqui embaixo. Você tem que aplicar a borda. Caso contrário, não vai funcionar. Você não verá nenhuma dessas informações aqui e terá algo selecionado, no nosso caso, nossa linha. termos de tamanho, vou colocá-lo em dois para que você possa ver mais fácil, e a linha pontilhada ou linha tracejada é apenas esta aqui. Você decide o tamanho que quer os traços. Digitei cinco pixels, ele assumirá que você deseja que a lacuna seja do mesmo tamanho. Mas você pode ajustar isso, você pode querer uma lacuna de 10. Você pode decidir o tamanho dos traços versus o tamanho da lacuna no meio. Isso ilustra alguns desses outros pontos. Principalmente este aqui. Por padrão, você tem este primeiro chamado Butt Cap. Acho que faço uma piada em todos os cursos que faço [RISOS] sobre isso. Eu realmente quero, mas vou tentar não. Vamos passar para o nome mais apropriado, Tampão arredondado. Vamos dar uma olhada na diferença. É assim que você obtém traços que têm esse pequeno final arredondado. Não importa se você tem um tracejado ou não. Se eu virar o traço de volta para 0 e a lacuna para 0, você ainda pode ver? Tem as extremidades arredondadas lá. Não importa se é uma linha tracejada, mas você tem o Butt Cap, você tem o Round Cap. Vamos colocar nosso tracejado de volta para mostrar o próximo. Este aqui, você pode ver pelo pequeno ícone, o que eles fazem. O Butt Cap está bem contra a borda ali, arredondado, vai ao redor da extremidade desse ponto angular. Este aqui, chama-se Boné Projectante. Projetos fora do passado. Vamos da tampa de bunda para a tampa projetada. Este aqui, este. Você pode ver o que ele faz? Ainda é a mesma linha , mas sai por aí. Você pode descobrir que você tem dois ícones e tem o mesmo traço. Você é como, por que este parece diferente? Você pode tê-lo importado do documento XD de outra pessoa e você criou um, e eles simplesmente não correspondem. Talvez um esteja configurado para Butt Cap, e um esteja definido para Capa Projectante. Vou deixar isso lá, minha pequena linha pontilhada. Comando 0 não é realmente o que eu queria, mas [RISOS] nós ampliamos todo o caminho. Vou clicar neste e ir ao Comando 3. Você pode usar qualquer forma que você possa ter criado, ou você pode simplesmente desenhar um retângulo, não importa. Vou usar este porque é uma boa ilustração da próxima coisa que quero mostrar a vocês. Vou adicionar uma borda. Agora, vou adicionar uma borda de talvez quatro pixels apenas para ilustrar nosso problema aqui. Esses três aqui são muito importantes. Por padrão, nem consigo lembrar qual é o padrão. Não me lembro da última coisa que você faz, mas a primeira é a forma como o traço é aplicado a ele. Este aqui, vamos tentar apertar por dentro. Vamos ter duas versões disso, uma sem derrame. Você não terá um derrame. Este aqui, apesar do mesmo tamanho exato. Você pode ver? Vou trazê-lo para a frente. Ele tem exatamente o mesmo tamanho. O derrame está tentando estar no interior disso. Se você fizer esse outro, ele tenta ser do lado de fora. É um pouco mais amplo. Haverá momentos em que você precisa de ambos. Você pode ver que o interior está fazendo algumas coisas estranhas aqui com o derrame? Você pode achar que, quando você está tentando aplicar traços, ele não está fazendo o que você quer. Você pode ajustar esses fora ou esse padrão que tenta abranger o meio aqui. Você pode ver, há minha pequena linha azul lá, está um pouco dentro, um pouco fora. Outra coisa que vamos olhar é a forma como as bordas são tratadas. Este é o Miter Join, que é o padrão, que chega a um ponto. Se o ângulo não for muito afiado, ele tem essa borda pontuda. Você tem que, eu acho, olhar. Deixe-me tentar aproximá-lo para que possamos ampliar. Você pode ver, esses são os diferentes. Basta clicar nele e você terá uma ideia. Este é o principal que você pode querer fazer são os cantos arredondados. Se você quiser tentar combinar ícones, você está arredondando as bordas dessa borda. Este aqui, eu nunca uso. Ele corta os cantos. Pode ser útil quando você está fazendo coisas muito espetadas às vezes. É provavelmente este primeiro ou o segundo. Você pode ver aqui, o que está fazendo? Basicamente, o que está fazendo é que é um ângulo tão apertado lá, você não pode colocar o pequeno ponto nele porque o ponto acabaria sendo, você pode seguir minha flecha? Seria tão fora daqui, então o Miter Join tem um limite onde ele vai muito pontudo. [RISOS] Este está começando a ficar muito longo. Este aqui é muito longo, então ele o perde. Se você tem pedaços que foram cortados e você diz: “Ei, por que você está fazendo isso?” É porque é muito afiado, e é por isso que, você pode ver, isso acontece. Lá vai você. Esse é o download em traços. Pode ser útil quando você está tentando misturar alguns outros ícones que você pode ter obtido de outros lugares com seus próprios ícones personalizados, e tentando fazer com que eles sejam os mesmos, use o mesmo traçado estilo para que eles combinem. É isso para traçados e linhas, também chamados de bordas no XD. Vamos para o próximo vídeo. 48. Projeto do curso 09 - Ícones e botões: Olá a todos. Hora do projeto da classe. Você é como, boo, não há mais projetos de classe. Vamos lá, você está gostando. Eu posso ver, você é. Este aqui, você tem que fazer algumas coisas. O primeiro é fazer dois botões com textos, você é como, botões. Talvez estivéssemos fazendo botões. Vamos fazer uma fantasia como conectá-lo mais tarde. Mas no momento, tudo o que vamos fazer é basicamente o botão que é um retângulo. [RISOS] Você vai desenhar dois deles. Aprendi mais e agora usei minhas cores. Você não precisa usar cantos arredondados, apenas dois botões, tudo o que eles são é texto. Eu tenho um com texto verde, na minha cor de destaque. Este aqui acaba de receber um esboço que tem uma borda e nenhum preenchimento. Este aqui com texto em branco. Dois botões e dois retângulos com texto no meio, fácil. Este aqui, não é tão fácil. Este aqui será um bom desafio. A é, você precisa criar três ícones no mínimo. Você pode fazer todos eles se estiver pronto para o desafio. Há três essenciais que são necessários. O logotipo personalizado, quero que você passe algum tempo tentando desenhar algo relativamente conectado ao seu produto. Se for café, tente desenhar uma xícara de café. Se for mel, tente desenhar uma abelha ou um pote de mel ou o que quer que seja. Algum ícone aqui acima sua mensagem de marketing que eu quero que você veja se você poderia desenhar. O objetivo aqui não é fazer algo bonito, o objetivo aqui é apenas fazer algo na prática. É aqui que você está agora e compartilha. Eu adoraria ver o que vocês fazem, especialmente por meio de feedback nas redes sociais, se quiserem. É só que, sim, algumas pessoas vão ter muito bom. Você vai ver outras pessoas fora, então você é como se eu tivesse feito ótimas, eu não vou postar as minhas. Porque algumas pessoas vão ter experiência de outros programas com a ferramenta caneta em diferentes formas e fazer coisas incríveis, mas não se preocupe, traga seu laptop. O que estamos fazendo aqui é tudo sobre aprender e começar. Não tenha medo de compartilhar suas coisas. Mesmo se você achar que não é ótimo, será um grande marco daqui a dois anos, quando você voltar e olhar [RISOS] para o ícone que eu fiz, mas tirá-lo lá fora, é bom. Desenhe algum ícone. Pode ser simples. Você não precisa usar a ferramenta caneta. Você pode usar qualquer forma que quiser, assim desenhei este ícone aqui para o meu ícone de pesquisa. É um círculo, e então desenhei um retângulo. Então eu fui bloop. [RISOS] Havia meu pequeno pau. Você vai ser criativo de como você vai desenhar essas coisas. O mesmo com esse retângulo. Havia um triângulo e alguns retângulos. Eu realmente não gosto da minha casa, mas de qualquer forma sou criativo. O que eu tenho que fazer é esse ícone personalizado. Eu quero que você faça o menu de hambúrguer, se você ainda não o fez. Isso é linha. Apenas certifique-se de estar consciente do estilo de borda, que é quando você selecionou uma ferramenta de linha, são esses caras aqui em baixo. Como ele se senta no derrame? Que nivelamento ele tem? Eu quero que você fique consciente quando estiver fazendo isso. Eu fui para um lindo boné arredondado. Menu maior, relativamente fácil. Um ícone de casa porque vamos precisar dele para este curso. Tente desenhar uma casa melhor do que eu. [RISOS] Ícones da casa do Google, e encontre algo que, A, você acha que representa um bom ícone de casa, e é algo que você pode realmente desenhar. O resto deles é opcional. Eu os coloquei na ordem do que sinto pessoalmente como professor, qual é o mais fácil de desenhar? Bem, [RISOS] na verdade eu vou mover este para o fundo. Este potencialmente poderia ser o mais difícil. Não sei disso. O menu Bugger é apenas três linhas. Ícone da conta, você viu um ícone de conta lá está lá. Depende de qual você procura. Eles podem ser complicados. Eu os coloquei em ordem do que eu acho que é o mais difícil. Faça os três, faça cinco se você estiver se sentindo rei, tente fazer todos eles. Se você está sentindo que tem um pouco de tempo que você quer praticar. O que eu quero que você se lembre é que na verdade pode ser útil começar com um quadrado como guia. Quando comecei a desenhar o meu, coloquei-os em quadrados para que pelo menos eles fossem proporcionalmente os mesmos. Acabei mudando-os um pouco, mas pelo menos isso lhe dá algumas dimensões. Caso contrário, talvez você acabe fazendo todos eles tamanhos estranhos. Comecei com um tamanho de 48 por 48 pixels. É um tamanho bom o suficiente, é grande o suficiente para que você possa obter alguns detalhes lá sem ser muito grande e ficar um pouco louco porque vai ser um ícone. Deixe-me escrever. Apenas alguns retângulos que comecei a desenhar são, na verdade, quadrados que são 48 por 48. É um bom ponto de partida. Outras coisas, você pode usar a função de canto arredondado. Lembre-se se você está desenhando algo, e você é como a ferramenta de caneta está me matando. Você pode usar os cantos arredondados ou quem se lembra de como você pode apenas fazer um canto trabalhando com seu racking seu cérebro, você é como, Oh, eu me lembro. Você mantém pressionada a tecla de opção. Ou tecla Alt em um PC e você pode arrastar um deles. Este pode ser o início da forma que você precisa. Você pode ser como, tudo bem aqui está. Agora posso clicar duas vezes dentro dele e fazer meus ajustes. Porque isso é mais fácil do que usar a ferramenta de caneta, ou algumas das outras ferramentas. [RISOS] Você entende a ideia. Além disso, quando você estiver escalando para cima e para baixo, lembre-se de delinear o traçado. Eu tive que fazer isso com esses, porque lembre-se quando eles diminuem lá estão mantendo o tamanho da borda. Eu não queria isso quando ficasse menor. Você vê isso. Cliquei com o botão direito do mouse e fui delinear o traçado. Lembre-se no início do curso, às vezes isso não funciona para você, tente isso primeiro. Se isso não funcionar para você, existe a outra opção de caminho do objeto e converter em caminho. Você pode ter problemas com aqueles que você, talvez não. Além disso, você pode copiar e colar a aparência. Toda vez que você desenha algo no Adobe XD, é uma dor na bunda. Você é como uma linha cinza chata de um traço preenchimento branco. Lembre-se, você pode dizer que você acerta, copia, edita, cola aparência, pelo menos começar na zona certa. A outra coisa é que eu quero que você o teste em seu aplicativo XD no seu telefone porque quando você está colocando essas coisas, elas podem sentir o tamanho certo, mas quando você realmente as vê no seu telefone e tente clicar neles, e você não pode porque eles estão muito próximos ou são simplesmente enormes e você é como se fosse alguns botões grandes. Esteja sempre testando em seu telefone apenas para ver o que funciona. Sei que esse cara é um pouco menor. Estou olhando para o meu telefone aqui. Ele é um pouco pequeno para o que eu preciso. É isso. Depois de fazer isso, faça uma captura de tela dos ícones que você criou, coloque alguns deles aqui. Se você fizer apenas alguns, como 1, 2 e 3, basta tirar uma captura de tela da sua página. Provavelmente, a página inicial é a melhor, porque está junto com seus botões. Vou ver tudo isso. Se você fez mais, basta colocá-los em uma captura de tela de página e colocá-los. Eu adoraria ver todos os que você cria. Ansioso para ver o que você inventou para isso. Vai ser interessante. Compartilhe aqui e, em seguida faça o upload para as redes sociais também, adoro vê-lo. Instagram, Twitter, grupo do Facebook, LinkedIn, grupo, seja qual for o seu sabor, e eu adoraria vê-lo. É isso, no próximo vídeo. Na verdade, você vai fazer sua lição de casa. Vejo você no próximo vídeo assim que terminar. Vejo você então. 49. Preciso de conhecer o Illustrator com o Adobe XD: Como vou mostrar, ele começará com algumas coisas fáceis sobre as diferenças entre usar e desenhar no Adobe XD e no Adobe Illustrator. No final, vou mostrar alguns dos problemas que surgem quando você está indo de um para o outro. Se você não tem ideia do que é o Adobe Illustrator, é apenas outro programa que a Adobe faz. É especializado em desenho e ilustração e muito bom em tipografia. Vamos desenhar algumas formas como essa, trazê-las do Illustrator para o XD. Mas sim, vamos começar. Para responder à primeira pergunta, você precisa conhecer o Adobe Illustrator para ser um designer de UX? A resposta é não. É uma ferramenta útil e provavelmente uma próxima etapa para você após este curso, se você realmente gosta dessa parte do processo UX. Portanto, o design real da interface do usuário, as coisas reais de criação, botões de desenho e ícones, existem até agora que você possa obter com o Adobe XD. Tem o suficiente e você pode ficar bom nisso, mas haverá momentos em que você não pode fazer as coisas. XD é feito para prototipagem rápida, não para uma ilustração completa. É aí que o Illustrator pode ser útil para você. Eu uso isso o tempo todo no meu processo. Deixe-me dar-lhe um par de rápidos, por exemplo. Estou no Adobe Illustrator, você verá que ele tem algumas das ferramentas como a ferramenta caneta. Existe uma ferramenta retangular. Vou desenhar aquela xícara de café como você viu no início. Há muitas semelhanças, o que é bom. Eu tenho esse retângulo. Bem, olhe, os mesmos pequenos pontos. Muito disso é o mesmo. Vou projetar minha pequena xícara de café, arredondada na parte superior e turno, clicar nestas inferiores e arrastá-las para cima. Lá vai você. Há uma xícara de café. Onde fica diferente é, na verdade, onde é o mesmo, a ferramenta de caneta. Vou clicar e arrastar curvas para uma alça. [RISOS] Há uma alça. Quero que ele tenha um preenchimento e não um derrame. Posso pegar o golpe, movê-lo para cima. Este não é um curso do Illustrator. Se você quer um curso do Illustrator, sei que um cara tem um curso essencial e avançado. Mas onde ela difere é digamos que eu queira alterar esse traçado para ser uma largura variável, você não pode fazer isso no Adobe XD. Você pode pegar a ferramenta de largura aqui no Illustrator e ir [NOISE] novamente com os efeitos sonoros. Você pode ver que posso fazer uma largura variável agora. Podemos imaginar isso. Vou mostrar algumas das razões pelas quais você pode pular e aprender o Illustrator. Se você já tem habilidades nisso, você pode ser como, eu posso desenhar uma xícara de café. [RISOS] Você pode ficar por aí para este vídeo se você for Mestre do Illustrator. Há algumas pequenas conexões entre o XD e o Illustrator. Vou pegar minha ferramenta de caneta novamente. Vou desenhar minha pequena coisa curvilínea. É para ser vapor vindo do meu chá verde. Então, novamente, a ferramenta de largura, eu posso fazer isso um pouco minúsculo lá em baixo. Se você não usou a ferramenta de largura e é uma pessoa do Illustrator. Oh, tão legal. Eu adoro isso. Vou mudar meu golpe para não daquele primeiro, aquele segundo boné redondo. Portanto, a ferramenta de largura é uma das que eu gosto no Illustrator. Há muitos. Isso é apenas um pouco, por exemplo, onde fica muito legal é traços diferentes. Então, vou desenhar um waft, clicando e arrastando para uma curva. Provavelmente um pouco alto demais e novamente com os efeitos sonoros. Então, algo assim. O que podemos fazer é, em vez de apenas jogar em traços, há todo um subconjunto de coisas como pincéis. Vou usar apenas lápis de carvão de giz artístico. Bem, olhe para isso. Parece um lápis de carvão de giz. Portanto, esses são alguns dos benefícios de usar o Illustrator. Outro benefício é quando você está lidando com fontes. Então deixe-me dar-lhe um rápido, por exemplo, se eu clicar nisso, se eu digitar café, vou usar meu Amatic. Tenho uma fonte chamada, você já viu, Amatic. Eu tenho essa fonte. Mas eu quero aquele café que diz que tem um pouco, não me lembro como é chamado. A coisa fora do topo do E. Isso faz parecer chique e francês. Os glifos. Eles são chamados de glifos. Eles estão sob o tipo. Muitas fontes as têm, não todas elas. Este tem, mas não podemos acessar todos esses glifos no XD. Não foi construído para uma grande quantidade de tipografia. Illustrator adora topografia. Como você pode ver aqui, veja esses personagens extras que você está perdendo. No meu caso, se eu passar o mouse selecione E, aqui está lá. Na verdade, eu quero o outro E, o E com a parte. Vamos dar uma olhada. Onde está o E com o bit? Você espera lá. avistei. Clique duas vezes nele e eu peguei o E com um pequeno traço nele. Então os glifos são outra coisa útil, fica até chique eu amo glifos. glifos são incríveis. Eles ficam ainda mais extravagantes quando olhamos para fontes diferentes. Vejamos outra fonte. Vamos dar uma olhada neste aqui. Então Alicia, este aqui tem um monte de glifos, então vou fechá-lo. Você pode ver isso? Olhe para todos esses suculentos . Olhe para isso. Eu quero este e no final. Então, vamos destacar lá. Mas olha, eu posso mudar o final, como aquele cara. Olhe para todos os redemoinhos e pedaços e você pode decidir, oh, eu quero um diferente. Eu não gosto disso a. Eu vou para aquele ou assim ele se conecta com um C. Talvez aquele. Você pode fazer algumas coisas divertidas. Bem, essa é a razão pela qual o Illustrator pode fazer parte do seu conjunto de ferramentas quando você está projetando no Adobe XD porque você tem acesso a todas essas coisas extras. Agora, para trazê-los de um para o outro, eu vou, ok, não tão bonito quanto eu esperava. [RISOS] Minha xícara não parece tão delicada quanto eu pensava. Está um pouco esmagado. De qualquer forma, selecione-os todos e copie-os e quando você os levar para o XD, algumas coisas ainda serão editáveis e algumas coisas não são. Bem, vamos trazê-lo. Vou colá-lo e consegui isso. Vou preenchê-lo com uma das minhas cores. Sim, este aqui. O que você encontrará é que posso clicar duas vezes para entrar ainda. Estou dentro dessa coisa. Posso clicar duas vezes nele novamente e olhar, há parte do meu cara. Você ainda pode separá-los. Você ainda pode trabalhar neles. Mas vamos dizer que esse derrame aqui, veja o que aconteceu com isso. Está aqui e eu posso mexer com isso. É feito apenas de todas essas pequenas peças, enquanto no Illustrator, é essa pequena linha que eu posso usar, no meu caso, essa ferramenta de seleção direta, selecionar o final, ir [NOISE]. Assim, você pode fazer muita edição no Illustrator e , em seguida, basta copiar e colar o resultado final no XD. Você pode ajustá-lo e brincar com ele. Mas esse seria o processo, apenas copiando e colando. Você pode ser mais extravagante e aqui, ir para minhas bibliotecas, encontrar sua classe XD e ir [inaudível] Bem, eu vou apenas copiar e colar a fonte na verdade. Tudo isso entrou? Vamos dar uma olhada. Vamos entrar. Vamos realmente arrastá-lo para fora novamente. Tenho parte do meu cara lá. Então eu peguei tudo? Vou agrupá-lo, depois colocá-los. Isso é melhor. Agora no Adobe XD. Vou, lembre-se de quem sabe onde as bibliotecas estão naquele lugar estranho. Ativos, aqui. Eles podem se mover. Onde está minha aula do XD? Existe isso. Legal e posso dizer, lá vai você. Essa é a maneira oficial de trazê-lo. Olhe para isso. Perdeu meu pequeno golpe. [RISOS] Isso acontece com você, estamos indo um pouco fundo demais no Illustrator. Você pode se deparar com esse problema. Copie e cole-o, então está tudo bem. É a mesma solução que tínhamos no XD quando nos deparamos com problemas. Aqui, embora esteja sob objeto, caminho e há um lá chamado traçado de contorno. Ele corrige todos os problemas. Agora, pule lá. [RUÍDO] Agora, volte no XD, indo para uma tangente e Artwork 3, mas funciona. Ei, nos deparamos com problemas. Nós os consertamos. Vejamos uma última coisa. Está copiando e colando fontes. Não consigo lembrar o que ele faz. Traga isso, cole, acho que ele vai delineá-lo em uma forma. Ele tem. Clique duas vezes nele. É um texto? É um texto editável exceto que sabe o que fazer esse último? Isso não acontece. O que mais termina em E? Não consigo pensar em uma única palavra. [RISOS] Eu não sei, chá? [RISOS] Você me colocou no local, e você pode ver neste caso os pedaços que estavam bem, apenas textos antigos normais. Eles passaram muito bem. Essa coisa, que surgiu como uma forma. Olhe para isso. Ele lida com isso e funciona o mesmo com este que eu aposto. O E virá através? Não, este E é editável. Olhe para isso. Esse é um dos seus E's regulares. eu possa excluir isso e continuar. Então você encontrará problemas intermitentes. Este aqui é, lembre-se de que não consigo pensar em uma palavra. Vamos lá então. Tenho um. [RISOS] Então, separou os glifos do texto antigo normal, mas tudo bem. Posso trabalhar com isso. A coisa legal sobre eles, mesmo que seja uma forma, ainda é escalável e é adorável Victor. Bondade. Isso vai ser isso. Você não precisa conhecer o Adobe Illustrator para ser designer de UX e Adobe XD, mas é útil e conheço um cara que pode te ensinar. Se você for um usuário experiente do Illustrator, talvez queira conferir meu curso avançado do Illustrator. Se você está apenas começando, confira o essencial. Não precisa ser meu, mas é uma habilidade que você provavelmente quer nutrir ao longo do caminho em sua jornada. É isso. Vejo você no próximo vídeo. 50. Mascar e cortar imagens no Adobe XD: Olá você. Neste vídeo, vamos fazer mascaramento no Adobe XD. A versão curta é colocada em cima de uma imagem, selecione-as e vá máscara de objeto com forma. Há algumas outras coisas para editar a forma e a imagem que eu quero compartilhar com você, então continue assistindo. Mas se isso é tudo o que você veio, você está feito. Mas se todos os outros, vamos continuar. Vamos trazer uma imagem. Não importa importar arquivos ou arrastá-los do localizador para ele como eu normalmente faço. Vou trazer este primeiro. Com imagens muitas vezes isso acontece, eles comentaram esse tamanho gigantesco. Se você segurar o shift em um dos cantos e a opção em um Mac, em um PC você os dimensiona para adequação. Só para que você saiba, se você é um web designer ou desenvolvedor, não é importante obter essas imagens o tamanho correto e a resolução correta ou a qualidade crônica correta antes do XD, você faz isso exportando de XD, o que faremos mais tarde no curso. Ele está trazendo-os em seu pleno glorioso e você pode exportá-los para um tamanho de web design mais apropriado mais tarde. Entra no mascaramento então. A maneira oficial é ter uma imagem e depois desenhar uma forma dela, em cima dela. Pode ser qualquer forma desenhará um retângulo. Vou fazer algumas duplicatas sobre estas só para poder mostrar maneiras diferentes. Selecione os dois. A coisa em cima que você quer mascarar dentro dela precisa estar no topo. Você pode ter que clicar com o botão direito do mouse e dizer trazer para a frente. Selecione os dois e, em seguida, diga, o longo caminho é objeto e vá para fazer com forma. Não, isso é máscara com forma uniforme. Clique nisso e você vai, nosso primeiro passo. Qualquer forma funciona. Não importa desde que esteja no topo. O atalho é o comando shift m dependendo de quantas imagens você acaba fazendo. Atalho que eu me lembro de alguma forma e isso é o comando shift m em um mac e controle shift m em um PC. Eles podem ser de qualquer forma que você nem precisou desenhar, pode ser algo que outra pessoa desenhou que você importou. Vamos fazer algo louco ou chegamos lá não desenhamos. Eu não desenhei esse logotipo do twitter. Contanto que esteja no topo. Qual é a minha. Você pode selecioná-lo e dizer mudança de comando m. Você também pode fazer o seu próprio personalizado com a ferramenta caneta. Você pode decidir que vou selecionar tudo, pegar a ferramenta caneta. Vou clicar lá e lembrar de clicar e arrastar para uma curva, clicar uma vez para um canto, clicar e arrastar é a pior máscara do mundo. Selecione os dois e , em seguida, use o atalho. O meu não funcionou. Por que o meu não funcionou? Não achei que os dois foram selecionados. Bem, é isso. Certifique-se de que ambos estejam selecionados e a forma está no topo e você pode mascarar. Essa é uma forma de mascarar. Você tem duas formas separadas e as esmaga juntas. Muitas vezes, o que eu vou fazer é que você terá formas existentes que deseja preencher. Digamos aqui que eu tenho essas cores de espaço reservado e você pode simplesmente arrastar diretamente para elas. Requer que você consiga obter a janela do localizador, Mac ou PC e apenas tenha na parte superior da borda do XD, complicado para algumas pessoas. Você pode simplesmente arrastar diretamente aqui para o espaço e ele será e dimensionado adequadamente e na forma correta. Você pode atualizar imagens com muita facilidade apenas arrastando por cima delas. Digamos que você é como, isso é ótimo, mas eu preciso mudar isso por outra coisa. Basta clicar em segurar e arrastar por cima e ele irá alterná-lo. Ajuste de máscaras. Vamos fazer isso. [RISOS] Começando. Digamos que você queria ajustar o posicionamento disso. Você clica duas vezes nele para entrar e você acabará acessando essa imagem. Você pode, no meio aqui, basta clicar em segurar e arrastá-lo. Você pode decidir, na verdade, essa é a parte que eu quero e depois clicar quando terminar. O mesmo que nosso modo de edição de objetos quando estamos fazendo esses ícones e a próxima coisa que você pode querer fazer é ajustar a borda. Então clique duas vezes nele para entrar, você pode, se você pegar a borda dela, ajustar a borda ou esmagar ou clicar duas vezes nela e entrar no modo de edição de objetos e fazer algumas coisas estranhas. [inaudível] chá feliz, rosto sorridente [RISOS]. Não é tão sorridente. Isso é editar suas máscaras. É o mesmo com estes, onde está? Você rola. Esse cara aqui, clique duas vezes nele. Você pode decidir que é isso. Você quer escalá-lo, basta usar a tecla Shift, pegar um dos cantos, decidir se é isso que você quer fazer. Clique duas vezes e você vai, estamos mascarando e editando nossa máscara. Isso é fazer máscaras arrastá-las para as formas existentes ou selecionar ambas e entrar na máscara de objeto com forma. Vejo você no próximo vídeo. 51. Imagens gratuitas para usar em seus modelos do XD - Unsplash, Pexels, Freeimage: Olá a todos. Vamos falar sobre imagens gratuitas que podemos usar comercialmente dentro de nossos modelos do XD, além de discutir alguns dos sites pagos que uso. Vamos pular. Imagens gratuitas, você está procurando aquelas que podem ser usadas comercialmente, imagens comerciais gratuitas. Meus favoritos são unsplash.com, pixels.com, images.com grátis. Esses são os principais gratuitos que vou procurar imagens, talvez para meus modelos ou talvez eu tenha um cliente que não tenha dinheiro para comprar imagens. Não tenha medo de comprar imagens. Existem sites de biblioteca de ações por aí, os principais pelos quais eu uso e pago são stock.adobe.com. Este é cerca de £20 e eu recebo 10 imagens por mês. Ou eu também, além disso, tenho uma assinatura Envato Elements que tem uma imagem muito semelhante, provavelmente não uma profundidade de imagens, é por isso que eu tenho as duas, mas tem outras coisas também que eu use muitos modelos e efeitos sonoros na música. Acabei tendo os dois. Mas há muitas ocasiões em que o livre é bom. A única coisa que você tem que ter cuidado, não cuidadoso, mas quando você estiver, como se eu quisesse chá verde, você encontrará isso. Vê essa coisa aqui? Este primeiro bit é um anúncio, iStock. Esse é outro site da biblioteca de ações. Não é melhor ou pior do que aqueles que expliquei, mas é assim que eles ganham dinheiro com o Unsplash. Eles recebem comissões com base nessas. Você pode ser como, oh, esse é o que eu quero, e você não pode usá-lo porque é pago, então você acaba indo aqui e há alguns ótimos. Você pode ver aqueles que eu tenho aqui porque posso compartilhá-los no curso. Eles são legais, mas há muitos [RISOS]. A qualidade dos itens da biblioteca de ações profissional sabendo que eles serão usados em anúncios, sites e outras coisas, muitas vezes pode ser muito boa. Mas também há coisas grátis adoráveis por aí. Fique de olho nos anúncios. [SOBREPOSIÇÃO] Para aqueles, não há nada demais neles. Talvez você queira verificar novamente as licenças. Digamos que eu queira usar, eu realmente quero esse, mas estou usando chá verde. Isso não é chá verde. Isso é um, o que você chama isso? Chai latte. É isso que eu quero? Digamos que eu queira usar este. Basta verificar se você é livre para usar sob a licença Unsplash. uma pequena verificação, certifique-se que ele tem tudo o que você precisa, faça o que eu preciso fazer, mas também verifique novamente antes de vendê-lo para o cliente. Da mesma forma, se você começar a usar imagens stock, certifique-se de que o cliente saiba que há um custo extra que você vai construir sobre elas para imagens, o que não precisa ser muito. Como se eu estivesse pagando £20 pelas minhas 10 imagens, se eu usar cinco ou seis delas, não é um grande custo. Mas lá vai você, essas são minhas coisas gratuitas favoritas e minhas bibliotecas de imagens pagas favoritas. É isso. Continue. 52. Darkening imagens de fundo com opacidade no XD: Olá a todos, neste vídeo, vamos fazer com que essa imagem em segundo plano fique assim, escura e mal-humorada para que possamos ler o texto em segundo plano. Alerta de spoiler, é apenas um retângulo na parte superior que tem alguma opacidade aplicada a ele. Como sempre ficar por aí e eu mostrarei algumas outras dicas e truques à medida que avançamos. Vamos continuar. Tudo bem, para começar, vou duplicar esta página inicial. Algumas coisas são que você não pode simplesmente selecionar a página e adicionar imagem de fundo. Na verdade, é apenas uma imagem como estamos fazendo nos últimos vídeos que acaso estão na parte de trás, não há opção aqui no momento. A outra coisa interessante é que eu quero desenhar um retângulo e cobrir o fundo. Mas se você tiver a página selecionada e, em seguida, você tem a ferramenta retângulo e você vai como se eu fosse começar aqui e desenhar , isso vai fazer isso. Ele volta a ser uma ferramenta de adição de página. Às vezes você precisa fazer uma ou duas coisas. Clique desativado em segundo plano e, em seguida, desenhe um retângulo. Bom, ou muitas vezes, embora às vezes esteja nisso, vou para a ferramenta retângulo e vou desenhá-la um pouco menor. Vá para minha ferramenta de seleção e expanda isso . Isso vai acontecer com você. Vou deixá-lo lá dentro. Temos nosso retângulo, vamos adicionar nossa imagem. O que vamos usar? usar este, não. Tudo bem, vou usar esse. Nem tenho certeza se isso é chá verde. De qualquer forma, temos essa imagem e a enviamos para trás. Mas você não escurece a imagem real. Não há como fazer isso. Se você alterar o preenchimento para preto, a caixa real fica preta, não haverá mais imagem lá. O que queremos fazer é realmente ter dois retângulos. Vou desenhar um segundo. Mais uma vez, apenas menor, pegue minha ferramenta de seleção e apenas aumente. Tenho duas caixas, uma branca, uma com uma imagem e esta aqui no topo, vou dizer que você é preto e vou diminuir um pouco a opacidade. Então lá vai você, é assim que você faz. Eu tenho esses dois, vou mandar os dois para trás. Como faço isso? Vou pressionar “Command Shift quadrado colchete”, que enviará o preto para trás. Então, vou fazer isso para o segundo também e isso é “Control Shift quadrado colchete” em um PC. Ambos estão na parte de trás e eu posso selecioná-los assim. Você pode clicar neste top e depois decidir sobre a opacidade, quão escuro você precisa que seja para o contraste aqui. Você pode usar pequenos atalhos, apenas com o retângulo preto selecionado. Você pode pressionar todas as teclas numéricas logo acima de suas letras. Não as teclas numéricas do lado, apenas as acima das letras. Se eu acertar dois, são 20%. Você vê que está ali. Vamos chegar tão perto. Dois são 20%, se eu digitar cinco é 50%, se eu digitar sete duas vezes muito rapidamente, você assiste o que acontece, é 77%. Acabei fazendo muito disso, cerca de 60% deles parece bom para mim. É assim que você escurece um fundo, é apenas uma caixa preta na parte superior que é ligeiramente transparente. Você também pode matizar o fundo não ficando preto, mas posso usar vermelho ou meu verde ou meu verde escuro. Eu poderia selecioná-lo e realmente jogar com a opacidade dos meus atalhos e você seria como, isso é legal, mas eu quero que seja realmente mais escuro. Você pode matizá-lo dessa forma. De qualquer forma, são duas formas diferentes uma sobre a outra. A parte superior é apenas um pouco transparente ou a opacidade é menor. É isso, verei você no próximo vídeo. 53. Os fundos e objetos em Adobe XD: Olá, todos. Vamos pegar nosso documento e fundo e desfocar o plano de fundo e o documento. Mostraremos como realmente desfocar objetos também, e faremos algo extravagante onde essa interface do usuário no topo e ela está desfocando o fundo para se destacar, legal. Tudo bem, então borrando objetos de coisas e fundos neste vídeo, vamos continuar. Tudo bem, com qual começamos? Vamos começar com o mapa um porque é legal e é o mais simples na verdade. Vou acelerar isso. Vou importar uma imagem de fundo. Tudo bem, então vou colocá-lo em uma imagem, desenhar um retângulo branco e, em seguida, editar algum texto, e para deixar esse fundo embaçado, tudo o que você faz é selecionar o objeto na parte superior. Você diz que eu gostaria que o fundo fosse borrado. No momento, provavelmente está um pouco desfocado demais, eu quero que seja apenas insinuando o fundo, ainda tornando isso legível, você pode brincar com o quão claro ou escuro é dependendo do que você é fazendo. Vou ficar um pouco mais branco do que preciso. Este último aqui é como quanto da forma original você pode ver. Se sua forma fosse como no momento vermelha, você não pode ver nada, mas assista a este arquivo. Se eu levantar isso, você pode começar a ver esse retângulo vermelho. Talvez ocasiões em que você precise de ambos, ambos vendo um pouco do objeto original e talvez clareando e escurecendo. É assim que fazer isso. Vejamos fazer o desfoque de fundo. Fizemos essa coisa e vamos dizer que ainda é muito detalhe. Vou selecionar isso. Vejamos o glifo de objeto primeiro por conta própria, então você fica lá. Posso clicar em um objeto, digamos que já esteja escuro, não é, mas digamos que esteja escuro o suficiente e possamos ler tudo isso. Só queremos um desfocado, desfocado. Você pode dizer que você, meu amigo, em vez de desfocar o fundo, você diz que é borrão de objeto, lá vai você. O único problema com o desfoque de objetos é que você obtém essa borda difusa. Você pode gostar disso. Pode ser perfeito. Se você não gosta da borda difusa, você tem algumas coisas para fazer e você pode ter certeza de que o fundo não é de uma cor de alto contraste, então posso dizer que você está cheio de branco, modo que quando esse cara está aqui, não é tão perceptível. Mas você tem esse fantasma e realmente não gosta disso. O que eu faço é, você pode realmente mascará-lo novamente. Veja isso, eu tenho essa forma aqui. Vou trazê-lo para a frente só para ficar claro, vou pegar a ferramenta retângulo. Vou desenhar um retângulo dentro dele. Selecione a coisa borrada e este novo quadrado, e assim como fizemos antes, vamos usar a máscara de objeto com forma. Então esse objeto embaçado, você pode vê-lo lá dentro? Você como cortado fora do lado de fora. Essa é uma maneira de fazer isso e é assim que muitas vezes faço isso para me livrar da borda embaçada é mascará-la depois. Então você pode colocar isso de volta no topo e usá-lo para controlar o quão escuro está, se precisar. Porque você notará que o objeto desfoque no momento, se eu entrar nele para clicar nele porque clique na máscara, lembre-se, você pode ver que, mesmo que ele tenha um desfoque de objeto, não há nenhum daquelas coisas extras que o borrão de fundo tinha, poderíamos diminuir e escurecer. Talvez isso apareça. Temos esses dois e vou mandá-lo para trás, você para trás. Estou usando meus atalhos lembre-se, é este aqui. Envie para trás o suporte quadrado Shift Command ou o suporte quadrado Control Shift em um PC. É assim que desfocá-lo no fundo e brincar com a opacidade. A outra coisa que você poderia fazer é, o que fizemos aqui em cima, mas nem sempre funciona. Vou mostrar para você caso funcione melhor no futuro, ou pode funcionar perfeitamente para o que você precisa. O que vamos fazer? Vamos nos livrar desse cara. Na verdade, vamos nos livrar da coisa toda. Começaremos com este. A alternativa é, porque você pode ser por que não usamos apenas o desfoque de fundo como fizemos? Você pode. Assista isso. Se eu disser desfoque de fundo, o problema é que ele não fica embaçado o suficiente e faz um desfoque estranho. Eles parecem ser dois borrões diferentes. Olhe para isso, isso é um borrão total. Isso também está em desfoque total. Isso é tão diferente. É por isso que não uso muito esse. Isso pode mudar. Pode haver mais controle aqui. Porque seria perfeito porque você pode controlar a leveza e a escuridão dela. Mas eu não sei porque olhe para isso, como um brilho celestial angelical para tudo isso. Só não gosto de qualquer método que eles estejam usando para desfocar o fundo por trás dele. Eu uso esse método onde eu desfoque o objeto, talvez tenha que cortá-lo porque as bordas ficam um pouco confusas e depois coloco isso no topo. Sim, fácil e doloroso dependendo do que você quer fazer, você pode clicar em qualquer objeto antigo e apenas dizer, você está embaçado. Lá vai você. Isso pode ser o que você quer [RISOS] de todo esse vídeo. Acabei de começar com isso. Não sei. Eu queria o borrão de fundo , então foi o que fizemos. Sim. Tudo bem. Espero que você tenha gostado do vídeo. Vejo você no próximo. Mas não será por um tempo porque é sexta-feira. Hooray. Pode não ser sua sexta-feira, mas é minha sexta-feira e é o último vídeo do dia. Eu acertei meus alvos hoje, e te verei novamente no próximo vídeo e será segunda-feira. Eu me pergunto se você pode dizer a diferença na minha voz. Ficarei mais animado? [RISOS] Provavelmente menos animado, será segunda-feira [RISOS] manhã. Tudo bem, mas esse é o fim deste vídeo, desfocando. Fantástica. Vejo você depois do fim de semana. 54. Preciso de conhecer o Photoshop com o Adobe XD: Olá a todos. Neste vídeo, veremos se você precisa de habilidades do Photoshop como designer de UX. Também mostrarei a interação entre usar o Photoshop, há alguns prós e contras para isso, usando o Photoshop com o Adobe XD. Além disso, no final do curso, mostrarei como tirar essa imagem, que é, eu não sei, uma temporada média. Imagine se fosse inverno, [RUÍDO] olhe para que é inverno. E quanto a um pôr do sol? [RISOS] É uma conexão muito tênue com o curso, exceto que estou mostrando a conexão com o Photoshop, e porque sou o chefe deste vídeo e gosto de mostrar coisas legais. Isso será no final do vídeo. Mas, por enquanto, vamos construir o suspense, preciso que o Photoshop seja um designer de UX? Tambor tudo, por favor? Sim é a resposta curta. Você provavelmente precisa de algumas habilidades do Photoshop principalmente para o mascaramento. Você pode sobreviver sem o Adobe Illustrator, que se resume a esse desenho de formas, você pode fazer os fundamentos no XD, mas em termos de qualquer bom mascaramento, você não pode fazê-lo, no XD e você precisa do Photoshop. Agora, não vamos abordar como usar o Photoshop obviamente neste curso, mas se você tiver habilidades no Photoshop ou provavelmente acabará trabalhando com documentos do Photoshop em algum momento, Vou mostrar os prós e contras de trabalhar com PSDs e como, se você tiver algumas habilidades no Photoshop, melhor interaja com o XD. Primeiro, vamos fazer algumas promessas de importação de PSDs. Se outra pessoa fez isso, você pode ter conseguido. Existem alguns truques e alguma estranheza. Isso pode, no futuro, sair. XD é um produto relativamente novo e a interação com PSDs no momento não é 100%, só você sabe. Vamos trazer um PSD, vamos Importar arquivos e vamos trazer algo que funciona. Eu tenho em seus arquivos de exercícios, Photoshop 01, 02, 03, 04. Vamos trazer 01, trazê-lo e aqui está um PSD gigante. Você é como [NOISE] então ele traz documentos PSD. A coisa legal sobre isso, e um dos profissionais é que se você olhar para o meu PSD, aqui está no Photoshop, você pode ver que eu mascarei isso para você. Há essa camada aqui e o plano de fundo que a preenche. O que aconteceu no XD é que ele é trazido em ambas as camadas e eu posso ver as duas. Mas veja isso, eu posso entrar nele, lembrar, clicar duas vezes e olhar, eles são separados. Posso ir para essa camada de fundo e excluí-la porque ela a traz. Vamos dar uma olhada, vamos trazê-lo no nosso painel Camadas, você pode ver aqui que está o meu PSD, eu tenho o laptop, e eu posso clicar nesta camada aqui ou aqui e clicar em Delete, obter isso funciona. Eu tenho apenas meu laptop ou posso ir até aqui, você vê esses pequenos globos oculares, posso dizer que o fundo está oculto ou esconder. Essa é a coisa legal sobre o uso do PSD, é que você vai exibir um documento, ligar e desligar as coisas conforme precisar delas. Vamos movê-lo para cá ou para lá, ele é bem grande. Vamos trazer outro arquivo que tenha alguns problemas. Vou para o atalho Command Shift I em um Mac, Control Shift I no PC. Vamos trazer esse 02. Vamos dar uma olhada nisso no Photoshop. Vou abri-lo no Photoshop aqui. Aqui está no Photoshop, eu mascarei essa camada superior e acabei de ter essa caixa vermelha em segundo plano sem um bom motivo. [RISOS] Só para mostrar que está mascarado. Paredes neste fundo aqui e eu o mascarei muito rápido. O que acaba acontecendo no XD é que, atualmente, assista a isso. Se eu trouxê-lo e eu sair, aqui vai você. O que aconteceu? Não está mais mascarado. Por algum motivo, não sei por que ela ignora essa máscara de camada. Posso convertê-lo em um objeto inteligente se você souber onde isso está, isso não corrige. O que você pode fazer se você conseguir esse ponto, você é como se partes dele não estivessem mascaradas, mas claramente há uma máscara acontecendo aqui no Photoshop. O que você pode fazer é clicar com o botão direito do mouse na máscara e apenas dizer aplicá-la. Isso é ruim e muito destrutivo, mas vai consertá-lo. Vou salvá-lo agora, ele não é atualizado automaticamente. É uma rua de mão única, então vou importá-la novamente. Se você não conhece o Photoshop, essa é a única coisa que você pode ter que fazer. Entre e veja se você pode esmagar as camadas e se livrar de todas as máscaras não destrutivas extravagantes porque isso funciona. Novamente, eu posso ir para o fundo aqui e olhar para isso, ele realmente trouxe através do preenchimento disso. Onde está lá, posso ir [RUÍDO] ou [RUÍDO]. Algumas coisas são muito legais e, em seguida, alguma coisa está um pouco quebrada. Essas coisas serão atualizadas no futuro, para que algumas máscaras de camada não apareçam. Outra maneira de trabalhar com o Photoshop, é apenas copiar e colar antigos. Estou no Photoshop agora, posso fazer uma seleção. Vou usar minha Ferramenta Rectangle Marquee para o ângulo de seleção, copiar e estou usando editar, copiar sair como atalho, ir para XD e você pode colá-lo. Desde que não seja muito complexo, com pequenas máscaras e camadas de ajuste e outras coisas, ele só copia e cola. Essa é uma boa maneira fácil se pudermos entrar em coisas do Photoshop para o XD. Agora vamos fazer da maneira oficial, pelo menos o que eu acho que deveria ser a maneira oficial é usar bibliotecas. Vou fazer uma máscara rápida aqui. Novamente, eu não espero que você faça isso ou seja capaz de fazer isso, se você ficar animado com o que fazemos aqui. Checkout, seja o meu ou o curso Photoshop de outra pessoa, eu tenho um essencial e um curso avançado se ele veio, mas eu vou para Selecionar Assunto que é um recurso legal legal, e faça seleção em torno dele. Vou adicionar uma máscara de camada na parte inferior aqui. Lembre-se de que falamos sobre isso ser um problema, se formos para as bibliotecas que parecem corrigi-lo. As bibliotecas são uma forma de compartilhar entre aplicativos da Adobe, é como bibliotecas compartilhadas. Vou para Minhas Bibliotecas. Há minha biblioteca para a classe Adobe XD. Vou fechar isso para torná-lo um pouco maior para todos. O que vou fazer é pegar minha ferramenta de seleção e clicar em segurar e arrastá-la para qualquer lugar e terminar aqui. Lá vai ele, vamos dar-lhe um nome, telefone. Onde ele está, ele está lá. Agora, no XD, lembre-se de que nossas bibliotecas estão no painel Ativos no topo aqui. Isso está abaixo, você pode ter que se lembrar de um casal no topo até encontrar a classe XD. Aqui está meu telefone, aqui está amigo, vou colocá-los aqui, pode ser um pouco grande. [RUÍDO] Ele está aqui, do jeito oficial. Nós tocamos nas bibliotecas da CC um pouco, se você não as usou antes, elas são incríveis. Eles são uma maneira de se conectar porque eu posso usar o mesmo telefone e simplesmente despejá-lo no meu arquivo Premiere Pro Video para coisas de mídia social e colocá-lo no InDesign para um layout de revista, todos os ativos compartilhados dizendo com as cores. Essa é uma maneira fácil de fazer isso, e corrige o problema com nossa camada sendo assim. Agora, algumas vantagens de usá-lo dessa maneira é, você pode ver como vinculado, o que pode ser míope, está no Photoshop Eu posso entrar aqui e é uma rua unidirecional. Se você adicionar algo do seu Photoshop a isso, este é o próprio item separado. Se eu ajustar isso agora, ele não ajustará o item da biblioteca. Vou terminar com isso, acabei com você, não diga [RUÍDO] Não salve. Mas posso abrir essa coisa, é meu telefone, PSD, eles não estão conectados ao original e se eu fizer algo como, vou apenas invertê-lo, comando eu, é realmente fácil e Control I em um PC e pressione Salvar. Estava muito claro visualmente. Eu posso entrar neste. Quero ver este pequeno link aqui, posso clicar duas vezes nele, aqui no XD, demora um pouco, não fez nada. Um pouco lento na atualização, mas simplesmente foi e mudou. Essa é uma das vantagens e, obviamente, se você estiver usando um InDesign ou Illustrator ou outra coisa, Premiere Pro, ele também será atualizado. O último que eu quero mostrar a vocês, não tem muito [RISOS] a ver com o design de experiência do usuário. É apenas alguns dos, acho que quero martelar por que o Photoshop é, sou um pouco fã do Photoshop, então há alternativas para o Photoshop. GIMP é um chamado infelizmente, e qual é o outro? Não Canva [NOISE] não consegue se lembrar dos outros. Mas há apenas algumas coisas que Photoshop faz espetacularmente, é uma das novas. Você pode abrir isso se quiser fazer um teste por conta própria porque é muito legal. Photoshop 04. Vamos filtrar, e vamos para Filtros neurais, eles podem mudar o nome disso. Eles mudaram isso antes. Vou usar este chamado Landscape Mixer. Tem um nome coxo, ligue-o. Talvez seja necessário fazer o download, pode demorar um pouco para baixar esse recurso. Ele pode ter saído daqui, atualmente está em Beta. É incrível, mas pode acabar apenas no filtro em algum lugar, mas procure o mixer paisagístico. Aqui, vou dizer que você acabou de fazer este, porque eu preciso que agora seja inverno. Só vou arrastar o controle deslizante de inverno, propina, assistir isso, aqui vai, pronto. [RUÍDO] Vamos, vamos. Vale a pena esperar por mais paradas. Corte editado para que esteja sendo feito. Foi feito isso é imediatamente. Mas olhe para isso [RUÍDO]. Ele só fez o inverno. Nem sei se são folhas de chá, mas havia uma conexão vaga com o curso. Mas olhe para isso, não posso acreditar como essa coisa é legal. Vamos fazer mais um e depois deixarei você ir. Vamos fazer o pôr do sol. Vamos arrastar o pôr do sol para o máximo só quero ver algumas imagens de ajuste, como se você estivesse tentando conectá-las, é um pôr-do-sol. Olhe para ele e olho para esta árvore. Tornou-se verão e sol-setty. Olhei para ele, há mais folhagem nas árvores. Eu tenho um jogo com alguns desses, abro essa pasta, acesse as imagens, sites de imagens gratuitas que mostrei, Unsplash e pixels e dê uma olhada nela. É muito bom em paisagens, não é tão bom com coisas do mar como orgânicas, ou é muito bom com coisas orgânicas, não é bom para coisas feitas pelo homem, mas para homens. É por isso que provavelmente sempre você precisará Photoshop como uma opção se for um designer de UX, especialmente se você realmente quiser se envolver no design no lado da interface do usuário. Fiquei super animado e quero que você vá fazer o Photoshop. Lembre-se que tenho um curso essencial e avançado se você quiser conferir, mas isso será para este vídeo. Vejo você no próximo. 55. Banners de brinde na barra de lanches usando a imagem mascarada no Adobe XD: Olá a todos. Neste vídeo, quero apresentar-lhe essa coisa, que é uma lanchonete. Quero apresentar o termo para você e também mostrar quando você está trabalhando com imagens mascaradas, como você pode obter fundos nelas e coisas assim. Vamos começar a esse vídeo. Primeiro passo, lanchonete. Do que ele está falando? Lanchonetes são as pequenas mensagens que aparecem na parte inferior de um telefone para lhe dar um pouco de informação. Você já viu isso antes. Talvez este aqui, seja uma versão para Android apenas aparece na parte inferior e apenas explica o que está acontecendo, como um pequeno lanche. Eles também são chamados de torradas porque aparecem e voltam para baixo como torradas. Eles estão lá para lhe dar informações sem interromper o fluxo de como o seu, você sabe. A operação principal, o que quer que você esteja fazendo, a coisa que você está no meio deles, lhe dá pequenos lanches e pedaços extras. Vamos criar um desses, é o que estamos fazendo. Vou fazer o meu logo abaixo da página de detalhes do produto. Agora, vamos trazer o arquivo do Photoshop, o que fizemos anteriormente. Se você está pronto para isso, você pode passar e usar o Photoshop O3, mascará-lo, trazê-lo pela sua biblioteca ou se você quiser trapacear, quando você não tiver muitas habilidades no Photoshop, basta trazê-lo Photoshop O5, é um que eu já mascarei para nós. É muito grande. Estou relutante fazer tudo isso do tamanho certo porque, eu não sei, os que você traz serão do tamanho errado também. Vou trazê-lo, trazê-lo para um tamanho razoável que você viu no início , vou cortá-lo dentro da pequena lanchonete. Minha lanchonete será neste caso, como um suporte ao cliente. Vai ser sobre esses tamanhos um pouco mais. Agora, o que eu quero fazer é, na verdade, vamos pegar o texto deles primeiro, você está aí? Isso é o que vou fazer. dividi-lo um pouco. Algum texto de informação, não precisa ser clicável. O meu vai ser. Pequeno truque para tudo isso. Há um subjacente lá. Mas o Command U em um Mac ou Control U em um PC, fará sublinhado e Comando B, negrito Control B, há alguns conceitos básicos lá. Na verdade, esses funcionam em todos os programas já feitos. Vou fazer este, não quero cortar isso em segundo plano. Coisas estranhas que acontecem, eu tenho uma máscara. Primeiro de tudo, quero que fique no topo, então vou clicar com o botão direito do mouse , trazer para a frente. Vou conseguir o tamanho apropriado. Lembre-se, a rotação está apenas pairando fora, o lado de fora. Algo assim é o que eu quero e mude a cor de fundo. Estou gostando deste incolor menos do que isso. [RISOS] De qualquer forma, o que eu quero fazer é mascará-lo dentro disso. Preciso de duas caixas. Você poderia usar este e este, e usar a máscara make, e usar a máscara make, Command Shift M ou Control Shift M ou objeto, ou é fazer máscara com forma? O problema é que a caixa amarela desapareceu, está oca. Não consigo colorir agora, se eu tentar colorir, ele não fará nada, [RISOS] a colorir. O que precisamos é de apenas duas caixas. Vou desfazer e mostrarei o que fazer, vou copiar este Comando C, Controle C em um PC, depois faço minha máscara. Deixe-me usar meu atalho. Então eu vou colá-lo novamente. Se eu apenas clicar em “Command V, Control V” em um PC, vou parar os atalhos para coisas fáceis como editar e copiar colar, lidar. Eu tenho este, é só por cima. Se eu movê-lo para trás agora, é só para copiá-lo e porque ele o cola de volta onde conseguiu, você acaba com uma caixa sentada em cima da outra. Não é ideal, mas ei **, isso funciona. Vou desenhar rapidamente uma caixa fechada. Na verdade, eu ia acelerar. Não estou acelerando. Apenas algumas coisas. Vou adicionar isso. Lembre-se de desenhar um círculo, apenas um lembrete, mantenha pressionada a tecla Shift enquanto você o arrasta para fora lhe dá um completamente proporcional, acho que é a palavra, a altura e a largura são iguais. O que vou fazer uma cruz. Não tente desenhar com a ferramenta caneta, leva uma eternidade. Use a ferramenta de tipo. Acerte seu “Plus”. Vou usar um branco. Vou escolher o tamanho e o peso certos. O meu já tem o tamanho certo e o peso certo. Algo assim. O que eu gosto de fazer é convertê-lo de texto, é mais fácil quando é apenas uma forma. Lembre-se de como fizemos isso. Vamos para Object e vamos para Path, converter em caminho e fizemos isso. Não tenho certeza se temos. Lá vamos nós. É assim que você transforma o texto em uma forma. Vou pegar os dois, colocá-los bem no meio e depois vou atravessar. Eu vou para você, lembre-se se você segurar Shift ele vai se encaixar. Faça o meu um pouco maior. Se você achar que isso não é absolutamente perfeitamente no meio, isso é apenas um problema com tamanhos de pixels realmente pequenos no XD, isso será gerado de uma maneira diferente no código. Lá vai você, isso é bom. Vou agrupar o meu. Vamos procurar lá para que possamos fechá-lo. Provavelmente vou adicioná-lo aqui. Vou adicionar uma sombra de gota provavelmente. Lá vamos nós. Sombra solta. Um maior, 3 por 3 por 10, e torná-lo um pouco mais escuro, só vai. Aqui vamos nós, vai ser um pouco pop-up, um pequeno brinde que aparece e depois volta para baixo, mas você pode desligá-lo se precisar. Precisamos disso para mais tarde. Vamos fazer uma prototipagem um pouco mais extravagante e eu queria mostrar máscaras dentro de máscaras com o fundo. Lá vai você. É isso. Você está demitido. Vejo você no próximo vídeo. 56. Projeto do curso - Adicione imagens: É essa hora de novo. É hora do projeto de classe. Este tem a ver com imagens. Quero que você adicione imagens ao documento, ou pelo menos ao seu design móvel. Não estou preocupado exatamente onde e como e quantos, é mais sobre eu quero controlar seu design aqui. Mas quando você está procurando imagens, seja por meio de bibliotecas de ações pagas, se você tiver acesso a elas, ou algumas das coisas gratuitas, como em pixels especiais, mas tenha sua persona em mente quando você está escolhendo imagens. Isso é certo para essa pessoa, está cumprindo meu breve? Então eu quero que você adicione imagens como aqui é um bom lugar para as imagens. Eu quero que você experimente talvez com a imagem de fundo aqui também. Mesmo que você decida ter uma opção 1 e uma opção 2, quero que você brinque desfocando as imagens e também quero que você construa duas páginas para mim, a página de confirmação, que é apenas um mapa em segundo plano, você pode tirar sua própria captura de tela. Isso é perto de onde eu moro. Mas você pode decidir que pode pegar um mapa de onde você ou pelo menos seu resumo está definido e, em seguida, adicionar essa confirmação embaçada do topo. Exatamente como você faz isso, não é importante. É mais apenas praticar com ele. Também quero que você adicione esta lanchonete. Eu quero que você faça isso com as imagens que eu lhe dei ou se você preenchê-lo, encontrar sua própria imagem, mascará-la, colocá-la no fundo aqui. Não precisa ser feita uma pergunta, algo assim, alguns como notificação pop-up, talvez um que alguns como notificação pop-up, você soubesse, ou uma venda que está em, algo assim porque vamos levar a anime isso mais tarde. Adicione todas as imagens, crie a lanchonete e adicione o mapa e a caixa de diálogo à sua página de confirmação e, em seguida, faça o upload. Começando a chegar a um ponto em que mal posso esperar para ver o que você fez. Quero vê-lo no Instagram, Twitter e nosso grupo do Facebook ou em nosso grupo do LinkedIn. Também faça o upload para a seção de atribuições deste site também. Esse é o seu dever de casa. Faça isso para encontrar algumas imagens e deixe seu design ganhar vida. É isso. Vejo você no próximo vídeo. 57. Como criar e usar os componentes no Adobe XD: Olá a todos. Neste vídeo, veremos como criar componentes no Adobe XD. Deixe-me mostrar rapidamente o que eles fazem. Eu posso ajustar este chamado componente principal, e todos os seus amigos aqui assistem. Eles estão todos conectados, então você pode fazer uma coisa uma vez e todos eles vêm junto para o passeio. Isso significa que você pode trabalhar em muitas placas de arte diferentes, perfeitas para esta navegação superior, ajustar uma e todas elas fluem e se ajustam também. Isso é basicamente o que um componente faz. Deixe-me mostrar-lhe como fazer um. Vamos fazer um componente. Primeiro de tudo, vamos limpar todos os componentes que você tem. Vamos ao nosso painel Ativos e você pode ter os Estilos de Personagem girando para baixo. Eu quero que você clique na chevron para arrumar. Em Componentes, você já pode ter um monte de lixo eletrônico. Se você copiar e colar, fizemos isso anteriormente no curso. Lembre-se que eu disse que se você copiar e colar coisas, isso pode trazer esses componentes aqui. Acabamos de desagrupá-los e seguimos em frente. Agora, na verdade, vamos entender corretamente o que eles são, e se você já tem coisas lá, isso significa apenas que você as copiou e colou de outros documentos, então exclua esses para fora. Basta clicar com o botão direito neles e excluí-los todos. Selecione-os e pressione Excluir no teclado, limpe os componentes. Se a sua visão parece diferente da minha, estive na lista de exibição de todo esse curso. Você pode passar por alguns estilos de personagens. Você pode ter estado nessa visão e ela parecia muito diferente da minha. Gosto de estar na exibição de lista por algum motivo. Depende de você, mas vou estar na exibição de lista, torna mais fácil renomeá-los. Vamos entender os componentes criando um, selecione todo esse top nav. Estou fazendo isso nesta outra página. Não importa o que você se transforme em um componente. Vou selecionar todas essas pequenas coisas aqui, e você pode clicar com o botão direito do mouse nelas e dizer Make Component, use o atalho Command K ou Control K em um PC. É uma coisa muito comum, então tem um atalho muito comum. Sob Object, mesmo ditado, onde está? Lá está lá, componente Make. Como eu sei? Se eu desfazer isso, você pode ver que ela tem essa borda azul e se eu pressionar meu Comando K ou Control K em um PC, ela ficará verde? É por isso que sei que é um componente. Essa é uma das pistas visuais. Ele apareceu na minha biblioteca de componentes. Ele também aparece em suas camadas. Você pode vê-lo lá, componente, então parece de algumas maneiras diferentes. Vamos renomeá-lo. É muito mais fácil de fazer quando você está na exibição de lista, essa pequena opção aqui em cima, e você apenas clica duas vezes na palavra, e nós vamos chamar isso de Top Nav. Você pode deixá-lo como componente 1. Não há nada de errado com isso, exceto que você será julgado por outros designers que você é uma nomeação de camada desleixada. Mas se eu for honesto e somos todos honestos, todos têm o componente 57 em sua lista. Mas por hoje, somos adoráveis chamados Top Nav. O que é tão útil sobre os componentes? Deixe-me mostrar a você. Eu tenho este, vou copiá-lo e vou colá-lo neste e talvez colá-lo neste também. A diferença entre este primeiro, em primeiro lugar, é que você pode ver aqui é chamado de componente principal ou nosso primeiro, ou o pai ou o primário. A palavra técnica é o principal componente. Qual é a diferença entre ele e este? São as diferenças visuais. Você pode ver o diamante verde grosso? Você vê esse cara? Ele tem um diamante vazio, então este é o principal, isso é chamado de instância. Você é o chefe, acompanha o que o chefe diz, pai-filho. O que é legal nisso é que eu posso pegar este primeiro e vou diminuir o zoom para que possamos ver todos os três. Eu posso entrar nisso. Lembra como eu entro dessas coisas? Posso clicar duas vezes nele. Aqui vamos nós, e pegue isso e assista isso e vá embora. Você pode vê-los todos se movendo? Ei, vamos lá, essa é a razão pela qual os componentes são realmente bons, é que você pode fazer uma coisa, ele pode passar por 100 placas de arte diferentes, e você pode controlá-lo apenas atualizando o componente principal. Aqui está, o que muitas pessoas vão fazer é manter o principal aqui no quadro de trabalho ou em outro quadro de arte, apenas algo fora do fluxo real, e manter todos os seus principais componentes juntos e, em seguida, eles copiarão e colarão a instância. Se você copiar outra instância desses caras, ela continuará fazendo duplicatas dessa principal. Isso só significa que você não está tentando descobrir onde diabos o principal foi [RISOS] em qual placa de arte você criou. Você tem um lugar central. Significa aqui em cima, você pode dizer, na verdade, eu quero que isso se mova. Olhe para isso. É assim que você faz um componente. Pode ser um pouco doloroso às vezes se você quiser separá-lo. Você pode simplesmente clicar com o botão direito do mouse e dizer, você é Desagrupar o componente, e ele simplesmente o separará agora. Agora, quando eu ajusto isso, o cara é como se fosse seu próprio chefe de novo, ele é um guarda solitário. Ele pode fazer o que quiser. É assim que fazer um componente. Voltei do futuro. Mais tarde, no curso, eu estou tipo, ei, provavelmente deveria mencionar isso antes. Vou mostrar a vocês uma pequena coisa sobre componentes é que desenhamos um interruptor de alternância mais tarde no curso, e é aqui que eu estou tipo, ei, eu provavelmente deveria contar a eles. Fazemos este pequeno interruptor de alternância. É retângulo, cantos arredondados. Você clica nele e ele se move para cá. Vai ser divertido, fique atento. Mas o que acontece é digamos que eu tenho isso, estou recebendo minha cor na sua cor. Se eu selecionar os dois, e eu segurar Shift e dimensioná-lo, ele se dimensiona bem. Se eu fizer uma duplicata, e eu a agrupar, e eu escalá-la, ela funciona perfeitamente. Mas se eu fizer isso um componente e fizer exatamente a mesma coisa [RISOS] então o que acaba acontecendo é que ela aplica essa coisa chamada design responsivo, e tenta ser tudo muito inteligente. Porque é inteligente quando você faz isso, assista, isso é muito legal quando você está fazendo um botão, você quer torná-lo mais longo, mas quando você quer redimensionar algo, você é como se eu apenas quer torná-lo menor, pode, nem sempre, causar problemas. O que você pode fazer é simplesmente desativar o redimensionamento responsivo e depois fazer sua magia. Só não vou fazer essa coisa toda como fizemos antes. Apenas estendido por conta própria. Você pode ligá-lo e desligar, assistir a isso. Posso torná-lo muito pequeno. Ligue isso de volta e faça essa coisa extravagante. Essa é uma palavra do futuro Dan. Deixe-me mostrar o que fazemos, estava escondido aqui embaixo, eu estava tipo, vamos mostrar-lhe. Olhe para este interruptor de alternância. Veja até onde temos [RISOS] É mais tarde no curso, então fique por aqui. Olhe para este interruptor de alternância. Olhe para isso. Está no bit de microinterações no curso. Esse é o futuro Dan voltando para ajudá-lo com o redimensionamento responsivo. No momento, porém, retornaremos à criação do componente. Há mais para te mostrar no próximo vídeo, eu te vejo lá. PS, não diga à próxima versão do Dan no próximo vídeo que eu estava aqui. Negócio. Continue. 58. Diferença entre o principal e o componente da instância no Adobe XD: Olá, todos. Neste vídeo, vamos levar nossos componentes para o próximo nível. Claramente, o próximo nível é Pincel Script [RISOS] como fonte, mas também significa que posso ter essas instâncias exclusivas com o que é chamado de substituições. Isso significa que eles podem ter cores diferentes, tamanhos diferentes, ter texto diferente neles, e assistir a isso, posso entrar aqui e dizer que ainda quero controlar alguns deles usando meu componente principal. Você está pronto para apenas uma fonte deliciosa. Lá vamos nós. Todos eles são atualizados, mas você pode ver que o texto ainda é único. Este diz Buy Now, este ainda diz Saiba mais, mas eles são um pouco controlados por esse componente principal. Vamos pular para nossa extravagância Comic Sans. Vamos começar com este botão aqui. Vou apenas copiá-los e colá-los, e depois movê-los para cá só porque. Lá vai ele. Quero apenas fazer um botão básico, lá vamos nós. Vou começar com isso na verdade. [RISOS] É perfeito agora. Eu tenho esse botão. Seria um ótimo candidato para um componente. Sim, porque eu quero usar isso várias vezes. Vou selecionar o texto e o plano de fundo, bem, meu pequeno retângulo de botão. Estou selecionando os dois. Talvez um Comando K ou controle K, e agora é um componente. Agora eu deveria nomeá-lo. Quando você está nomeando coisas como botões, seria muito comum. Você não quer chamá-lo de botão Comprar agora [NOISE] porque nós realmente usaremos esse botão para muitas palavras diferentes. Seria o Comprar agora, será o Saiba mais, será o botão Excluir minha conta. O que eu faria é dizer que é botão, e este será meu médio porque planejo depois ter um botão pequeno e grande. É isso. Você verá isso muito. Será sublinhado do BTN MED sublinhado talvez Primário porque pode ser sua cor principal. Não há regra oficial. Não sei por quê. Gosto de botão, gosto de hífens, e gosto que ele seja chamado de médio. [RUÍDO] Mas você pode fazer tudo isso linguagem cody, se preferir assim, e você verá os dois. Vou mantê-lo bem vago no momento e falaremos sobre algumas das outras coisas que você pode fazer. Temos um nome, temos um botão. Vamos fazer dois deles. Lembre-se, o primeiro aqui é chamado de principal e esta é uma instância do principal. Vamos realmente fazer três deles. Todo mundo tem três para mim. Este aqui, sabemos que se eu ajustar este top clicando duas vezes nele, podemos ajustar todos eles. Se eu ajustar o texto no mestre, agora este é o meu botão Saiba mais. Eu provavelmente deveria deixar meu texto centralizado e movê-lo para o meio. Quando faço alterações de texto para meu Excluir, pelo menos ele se ajusta perfeitamente à esquerda e à direita. Essa é a opção central para o texto. O que podemos fazer é deixar isso como Comprar agora. Agora, vou deixá-lo como Learn More centralizado. O que podemos fazer são essas instâncias que queremos realmente mudar. Você diz: “Bem, eu não quero que todos eles sejam chamados Saiba mais porque você vai acabar com um botão chamado botão Saiba mais, botão Comprar agora, botão tudo, Ts & Cs.” O que você pode fazer é que essas instâncias podem ser ajustadas. O código substitui. Isso significa que posso dizer que este é o meu Buy Now. Este pode ser meu botão Limpar ou meu botão Excluir, ou outra coisa. O mais legal sobre isso é, veja isso, este mestre, ele pode controlar qualquer coisa que não tenha sido ajustada aqui em baixo. Assista isso. Vamos criar outro desses. Lá vamos nós. Isso vai fazer sentido? Espero que isso aconteça. Você pode ajustar os textos nessas instâncias para torná-los únicos. Você pode ver lá nossa pequena opção, ajustar, ver a pequena coisa? Ele tem algumas substituições. Qualquer coisa que você alterou é considerada uma substituição para o mestre. Coisas que você não mudou como a posição ou a cor de fundo, não mudamos isso em todas elas. Assista isso. Se eu mudar a cor de fundo clicando duas vezes nela para entrar, você pode dizer que realmente você é essa outra cor e todas elas mudam. Mas se eu desfazer, se eu disser que este botão Comprar agora é que eu vou dentro dele e eu o substituo e digo: “Ei, você não é o chefe de mim, eu vou ser essa cor. Sem essa cor, vou ser essa cor.” [RISOS] Esse cara, nosso pequeno guarda florestal solitário foi anulado. Se eu for a esse mestre agora e disser “Ei, quero que todos sejam verdes.” Há verde. Você vê? Tudo se ajusta. Ele não foi alterado. Nós não mudamos o plano de fundo sobre este ou este, mas esse cara, nós dissemos: “Ei, seja algo diferente”, não substituímos. São algumas das partes poderosas disso. Podemos ter vários botões que parecem diferentes, mas são controlados por este botão principal ou principal. Isso faz sentido? Este texto começou como Saiba mais, depois mudamos para Comprar agora, e mudamos isso para Limpar. Essas são substituições. Mas esse cara chamado Saiba mais, se eu mudar isso para botão? Você entende o que eu quero dizer? Qualquer coisa que não tenha sido alterada ainda será substituída. Qualquer coisa que você tenha mudado como esses dois caras tentará segurar para sempre e seu novo estilo. Você pode acabar substituindo tudo, mas é uma ótima maneira de ter um botão genérico que sai. Você pode arrastá-los para fora daqui em vez de apenas duplicar seu mestre e dizer: “Na verdade, eu quero que esse cara seja essa outra cor, e eu quero que o texto seja algo mais visível”. Mas tenha algum controle. Posso entrar nisso e dizer: “Agora você vai ter 10 pixels nos cantos.” Tudo o que não foi alterado em termos de volta das esquinas vem junto para o passeio. Essa é a diferença entre o principal e as instâncias. Eles podem ser ajustados ligeiramente para torná-los personalizados , mas têm algum controle principal geral. Isso funcionou? Se isso funcionasse, ok. [RISOS] Vamos fazer outro. No momento também, se eu for [RUÍDO], olhe para isso. Se eu manter pressionada Option no meu Mac ou em um PC, estou apenas pegando a borda disso, arrastando-a para fora, veja isso, podemos ajustar o tamanho. [RUÍDO] Mas e se eu for para esse cara? Este é o nosso rebelde. Este é o cara que quer fazer tudo por conta própria. Se eu disser: “Eu vou ser realmente esse botão gigante, você não é o chefe de mim.” Mas este mestre diz: “Ei, seja um tamanho diferente.” Olha? As substituições funcionam em todos os tipos de coisas. Qualquer coisa que você possa pensar, você pode substituir e ignorará as mudanças que acontecem com o mestre. Só para provar o ponto, vou para este e dizer, você é Comic Sans, vivendo a vida no limite. Este aqui, indo para este, e eu vou dizer: “De jeito nenhum, eu vou ser Impacto.” [RISOS] Duas das minhas fontes odiadas. Isso mudará, exceto o que recebeu a substituição, mas fica útil. Este é um grande exemplo de todos os bits diferentes. Onde fica muito útil é aqui em cima. Assista isso. Eu tenho essa navegação. Essa foi a navegação que eu fiz. Lembre-se, se eu desfazer ou diminuir o zoom, se eu mudar o mestre, que eu tenho aqui, você pode tê-lo em outro lugar. Lembre-se, se eu mudar o mestre, todos eles mudam. Mas este não está mudando. Você diz: “Bem, eu tenho que ter duas navegações?” Não, porque você está pensando : “Poderíamos fazer aquilo que você fez com o botão”, onde simplesmente ajustamos. Este aqui eu vou excluir, você vai embora. Vou usar uma instância. Não importa se você duplicar este, duplicar este ou arrastá-lo para fora daqui. Não esse, onde está? Top Nav, não importa. É uma instância e nada mudou sobre isso porque tem o diamante branco chato, velho, mas é a cor errada. O que eu posso fazer agora é cavar nele e realmente entrar neste e dizer: “Agora você é uma cor de fonte branca, e você vai ser uma cor de preenchimento de branco”. Você espera lá. Vou acelerar isso. Lá vai você. Aqui está uma instância disso. Isso só significa que ainda posso entrar no nosso mestre, lá, fazer ajustes e ter muitas versões diferentes disso, um modo claro e um modo escuro. É apenas uma mudança simples, mas você pode ver o poder exageradamente agora. Os componentes são incríveis. Algumas coisas, você pode ser como, esse cara aqui tem um pouco de poder demais. Ele acha que não pode ser controlado por ninguém e precisamos enrolá-lo de volta. Não sei onde [RISOS] vou com meu chefe e analogia subordinada aqui, mas ei, chegamos até aqui. O que você pode fazer é clicar com o botão direito do mouse neles e dizer: “Na verdade, vamos redefinir você de volta ao estado principal”. Agora olhe quem é o chefe? Você pode voltar se precisar. Pode estar fazendo algo estranho e você diz “Por que não está se ajustando em comparação com o principal?” Você pode fazer isso, reajustá-lo de volta. Você pode decidir o contrário e você diz: “Eu não quero”. Porque no momento em que o posicionamento disso continua mudando, você diz : “Não, eu não quero que isso seja mais uma instância. Eu não quero que ele esteja conectado.” Talvez seja o começo de um novo botão ou outra coisa. Você pode clicar com o botão direito do mouse aqui e dizer, ele não diz desconectar ou qualquer coisa, apenas diz Ungroup Component. Lembra mais cedo no curso que eu fiz você fazer isso quando copiamos e colamos dos kits de interface do usuário de outras pessoas? Acabamos de fazer isso. É por isso. Acabamos de quebrá-lo para que não esteja conectado ao documento de mais ninguém, ao botão de qualquer outra pessoa. Isso agora é apenas um botão de função regular por conta própria, fazendo suas próprias coisas. Ele agora poderia se tornar seu próprio componente. Podemos fazer dele um componente e ele pode ser [NOISE] Botão Grande e ele poderia ter suas próprias instâncias ou filhos. Lá vai você. Ele é o chefe agora de seu próprio clã pequeno. Outras coisas que são úteis, no momento, temos um pequeno grupo de componentes. Mais tarde, você pode ter centenas aqui, se for um grande projeto de interface do usuário no qual você está trabalhando. Mas haverá momentos em que estamos, na verdade, tipo, “Aquele botão, onde está isso?” Você pode passar o mouse acima dele. Você pode ver que há três instâncias disso? Há quatro instâncias desta? Há cinco deste ? Você diz “Onde esse botão está sendo usado?” Você nem tem certeza. Vamos para cá. Clique com o botão direito. Você pode dizer Destaque na tela. Isso não funciona [RISOS] a menos que você esteja ampliado todo o caminho. Ele o destacou. Quem se lembra do atalho para diminuir o zoom para ver todos os quadros de arte, tudo o que está acontecendo? Isso mesmo. Comando 0 em um Mac, Controle 0 em um PC. Lá vai você. Você pode vê-lo, ele está destacado lá embaixo. Não é super útil, mas optamos por fazer o botão grande e ficar de olho. Está ali. Vamos para Destaque na tela, ele está destacado ali. Mas você diz: “Isso não é útil.” Mas lembre-se de que você pode ampliar as coisas que você selecionou. Você diz: “Isso mesmo. Comando ou controle 3.” Não, dois, não, três. [RISOS] Isso não funciona se você tiver mais de um selecionado. Onde está isso? Lá vai você. Na verdade, não os seleciona dessa forma. Eu minto. Eu levo isso de volta. Você não pode Command 3 para aumentar o zoom. Você me fez parecer um tolo, XD. A próxima coisa que eu queria mostrar é esta aqui, Editar componente principal. Pode haver um momento em que você esteja tipo, “Eu fiz essa coisa aqui”, e você não tem ideia de onde o componente principal. Sei que está lá. Com o pequeno diamante, você diria: “Eu sei que está lá em cima.” Mas aqui embaixo, daqui a semanas trabalhando no projeto de outra pessoa, você diz: “É a instância. Mas onde está o principal?” Posso dizer que clique com o botão direito do mouse aqui e vá Editar componente principal ou aqui, mesma coisa, Editar componente principal e o que ele fará, ele deve pular para ele. Ei. O que acontece se eu excluí-lo? Uau, [RISOS] o que aconteceria se você excluí-lo? Isso parece irrecuperável. Mas o XD faz algo extravagante onde você clica com o botão direito do mouse, mesmo que ele tenha desaparecido e não esteja no seu documento. Essa é uma ótima maneira de manter as coisas arrumadas. Você ainda pode editar o componente. O que ele vai fazer é apenas abri-lo e despejá-lo na página para você. [RUÍDO] Não estava lá antes, só foi aqui o espaço e abriu e simplesmente jogou lá. Agora você tem um componente principal. Quando você está trabalhando com documentos de outras pessoas, você pode descobrir que não há nenhum componente principal. Este aqui é excluído. Você seria como, “Onde está essa coisa?” Vá para Editar componente principal e ele o jogará em algum lugar do documento e o levará até ele. Você seria como, “Sim, lá está ele.” Agora posso passar e fazer meus ajustes. Mas ele não precisa estar lá, só para você saber. Uma última coisa é que você pode ser como : “Qual deles é esse realmente no meu painel Componentes?” Vou fechá-lo , enquanto é muito fácil porque tem um visualmente bem diferente, mas você vai acabar com muitos botões que parecem iguais à distância e é difícil dizer ao tamanho deles nos componentes minúsculos para você. Você pode clicar com o botão direito em qualquer um desses caras. Às vezes, você clica em segundo plano com sua ferramenta Seleção. Selecione-o uma vez, clique com o botão direito. Há um que diz Revelar componente no painel Ativos. Vai revelá-lo, assista. Ele o abriu e destacou. Você sabe que é a pessoa que está controlando esta. Chegamos um pouco mais com os componentes, analisando os principais e as instâncias. A grande vantagem é que você pode fazer substituições ou fazer pequenas alterações nas instâncias mantendo muito controle do componente principal. É isso. Vejo você no próximo vídeo. 59. Como criar estados de hover, de componentes no XD: Olá meu amigo, assista isso. O botão tem um estado de passar o mouse. Olhe para isso. Não estou fazendo nada, só rola. É uma das outras vantagens para componentes. Deixe-me mostrar-lhe uma opção mais chata. Aqui vamos nós, olhe meus botões de opção. Veja isso, empolgando um continuum ligado e desligado em uma prévia. Eles são chamados de estados de componentes, e eu mostrarei como fazer isso agora no XD. Antes de começarmos, só para você saber, eu fui e limpei todos aqueles botões que eu tinha. Botões em todo lugar. O que eu fiz foi criar apenas um novo botão. Não é um componente, não é nada. É apenas um retângulo com algum texto no meio e vou escolher minha fonte corporativa, trazendo-os, mas também a polícia da fonte veio e foram palavras duras. Escolhemos um pouco de fonte. Primeiro de tudo, para tornar nosso estado, precisamos selecioná-lo e torná-lo um componente como antes. Um Comando K no Mac, Controle K em um PC. Vamos trabalhar em nosso mestre neste caso. Não funcionará se você estiver tentando fazer estados na instância. Lembre-se de que se você está trabalhando na instância, você precisa clicar com o botão direito do mouse e dizer: “Vamos editar o componente principal”, e ele deve levá-lo para esse componente principal. Vou excluir esse. Estou nos principais, tem o diamante. Por aqui, há essa coisa. Depois de criá-lo em um componente, existe este. Estou no componente principal. Esse é o estado padrão. O que podemos fazer é adicionar um estado e vamos adicionar esse foco para começar. Passe o mouse. Não vamos fazer mais nada e nada vai funcionar. Temos estado padrão, estado do mouse. Talvez você tenha que clicar em, clicar novamente. Isso só precisa ser diferente. Se eu clicar em “Hover State” para que ele esteja destacado, posso dizer clique duas vezes para entrar nele. Posso dizer que você vai ser minha versão mais escura disso. Clique de volta do lado de fora, clique de volta sobre ele. Agora assista isso. Tenho um estado padrão e um estado de focalização. Não preciso fazer mais nada. Vamos começar a estar em um estado padrão e depois vamos visualizá-lo. Na verdade, isso precisa estar em uma das minhas pranchetas. Vou colocá-los em qual deles? Vamos estar na minha página inicial. Vou movê-los para cá. Vou clicar no nome. Vamos visualizar este e lá está lá. Você está pronto? Eu escolhi uma cor que você não pode ver, funciona. Para acertá-lo como estado, basta clicar nele uma vez. Aqui você pode dizer: “Não escolha essa cor porque você não pode vê-la.” Vou dar um duplo clique nele para entrar nesse pequeno grupo e vou dizer: “Não escolha essa cor. Usaremos esse. Vamos para um super preto.” Agora vamos voltar à nossa pré-visualização. Lembre-se de que ele será padrão para qualquer que o superior esteja no meu fluxo, a menos que você clique no nome na parte superior aqui. Vamos jogar e ver isso. Nada acontece. Mais problemas. Este é um problema que você vai encontrar. Vou fechar isso. O que acontece é que se lembrará da última coisa que eu cliquei aqui. Você precisa estar no estado padrão. Qualquer que você tenha selecionado será aquele para o qual ele alterna ou visualizará. Vou estar no estado padrão, depois visualizá-lo e agora o mouse funcionará. Uau. Fiz isso mais difícil do que deveria ser. Mas é assim que fazer um estado de paira. É muito fácil. estado do mouse é um dos padrão. Basta lembrar que quando você terminar de trabalhar no estado do mouse, volte para o padrão e clique desligado e isso o manterá lembrando desse estado lá. O outro estado realmente comum é o estado de alternância. Vou fazer isso nesta página aqui, clique no nome Command ou Control 3 para ampliar. Serão esses pequenos botões de opção aqui. Vou aumentar o zoom. Se você não fez um desses, você só precisa desenhar dois círculos. Vou selecionar os dois e vou fazer o meu aqui. Este aqui é apenas um círculo com um preenchimento em um círculo com um traço ao redor do lado de fora. Vou selecionar os dois. Podemos usar nosso Comando K ou Controle K, ou às vezes aleatoriamente clico neste botão, faz a mesma coisa. Componente plus. Me deu a mesma coisa, tenho meu pequeno componente principal. O que eu quero fazer é que eu quero outro estado, e esse é o outro estado padrão chamado alternar. Em vez de chamá-lo de alternância, vou desligar porque alternar não faz muito sentido. O que eu quero é no estado padrão para que ele esteja e depois no interruptor desligado. Eu quero entrar aqui e você pode excluí-lo e isso funcionará neste caso mas na verdade também é um pouco de prática. Em vez de excluí-lo, basta desligar a opacidade sobre a coisa que você quer que tenha ido. Isso significa apenas mais tarde, se você entrar em estados mais complexos, excluí-lo causa problemas futuros, enquanto reduzir a opacidade significa posteriormente, você pode ativá-la novamente se precisar. Confie em mim, é mais fácil apenas diminuir a opacidade. Tenho dois estados. Eu consegui o padrão e o fora do estado. Você decide de que maneira você quer que ele comece, lembre-se escolhendo qual deles, como no estado do mouse do botão. Este é o estado que eu quero que ele seja padrão. Vou me livrar deste e substituí-lo. Vamos dar uma prévia. Está na página. Você precisa clicar na página para ter a página selecionada ou apenas um objeto na página e clicar “Reproduzir” e ela saberá qual página você quer dizer. Você pode ver isso. Olhe para isso. O padrão é isso. Lá vai você. Alterne por padrão, você pode ver esse desvanecimento? Não é realmente o que eu quero. Nós vamos ajustar isso também. Na verdade, antes de fazermos isso, você pode usar isso para, pode não ser para prototipagem ou animação, você acabou de pegar um botão e usá-lo. Pode ser uma marca de seleção como uma caixa de seleção. Você usa um monte deles. Então, em vez de animar ou qualquer coisa, você simplesmente vai, na verdade, eu quero que este esteja fora e este esteja fora e este estará ligado. Isso é tudo o que você usa para ter apenas uma unidade. Você pode copiar e colar e, em seguida, ligar e desligar e ligá-lo de volta. De volta à animação, não gostamos do pequeno desvanecimento. A razão pela qual quando adicionamos o estado de alternância, basicamente o que ele está fazendo é você mesmo configurá-lo para montar isso e foi um pouco doloroso no botão. Mas agora o que ele faz é realmente um monte de animações para você. Você pode ajustar isso depois, se quiser. Você pode entrar nisso e dizer que você protótipo. Foi editado essa coisa aqui. Não vai a lugar nenhum, mas diz esse estado padrão. Quando é grampeado, ele anima automaticamente usando uma flexibilização de 0,3 segundos e esse é o desvanecimento. Vai aliviar. O que eu quero fazer é dizer toque nele. Eu não quero que você anime automaticamente, eu quero que você faça uma transição e eu quero que a animação seja nenhuma e diga que você se livra dela. Agora vai fazer a transição, mas não vai fazer nenhuma animação. Vamos dar uma prévia agora, vá para selecionado, clique em “Play” e agora é apenas um botão de opção antigo e chato. Faz de uma maneira, mas veja isso, ele desaparece de volta. Você tem que fazer isso nos dois lados. Eu fiz isso para o estado padrão. Vamos fazer isso para o estado fora do estado. A mesma coisa, sem animação automática. Transição. Eu gostaria que o não dissolver agora fizesse isso em ambos os lados. Vamos dar uma peça. Animação chata, mas mais como nosso botão de opção funciona. Nesse caso, toda a animação, essas instâncias lembram os desvanecimentos. Todos eles atualizaram? Vamos dar uma olhada. Talvez eles tenham feito. Parece que eles não olharam para isso. Todos eles se atualizam. A animação, se você ajustar o mestre, todas elas são atualizadas. Mas não parece um botão de opção normal. Se você soubesse deles normalmente, você só pode escolher um. Você não pode fazer isso acontecer e está fora do lado do escopo do XD, mas você entende a ideia. Esse é o estado de alternância. Vai para frente e para trás. Hover é o hovery. Você sabe o que quero dizer. É aí que vou deixar este. Há um pouco mais que eu quero mostrar a vocês no próximo vídeo. Mas ei, precisamos de uma pausa. Preciso de uma pausa. Vá tomar uma xícara de chá. Você faz mal e eu o verei no próximo vídeo e abordaremos um pouco mais de alguns estados no Adobe XD. De volta em um segundo. 60. Projeto do curso 11 - Botões: Olá, todos. É hora do projeto de classe. Vamos fazer alguns botões, também conhecidos como componentes. Há dois para fazer. Só para definir as regras básicas, esta será a tarefa de classe mais quente que você fez. [RUÍDO] Vai ser difícil. Então esteja preparado. [RISOS] Não sei por que eu ampliei. [RISOS] Você vai fazer dois botões. Usar componentes e estados pode ser complicado, você chegará lá. Eu tenho esses dois exemplos. Você vai fazer um botão antigo normal como temos aqui, o botão Comprar agora e aprender mais, depois uma marca de seleção, que é basicamente a mesma o botão de opção que fizemos anteriormente. Então, o botão, vamos falar sobre este primeiro. O que eu gostaria que você fizesse é vamos visualizá-lo. Isso é o que eu quero. Quero que você possa passar o mouse e depois mudar. O meu só está mudando um pouco , então isso é uma coisa. Uma coisa que eu deveria apontar agora, você pode estar pensando que já talvez goste, ele sabe? Sei que você não pode passar o mouse em um celular. Você pode acenar o dedo acima dele, mas ele não muda. Acho que neste curso estamos aprendendo tanto os botões da área de trabalho quanto as coisas de dispositivos móveis, mas apenas focando na construção da versão móvel real. Faça os pairamentos , mesmo que seja um pouco estranho em um dispositivo móvel. O que eu gostaria que você fizesse, a regra é que esses dois precisam compartilhar o mesmo componente principal. Veja isso, todos eles estão compartilhando mesmo que sejam visualmente bem diferentes, eu quero que você veja se você consegue fazer isso. No meu painel de ativos. Vamos fechar isso. Aí está meu botão lá. Aqui está o meu principal, e é apenas um botão que eu estilizei de forma diferente. Isso é bastante complicado, mesmo que os vídeos que eu fiz, as pessoas paguem por truques. Se você quiser mantê-lo menos complicado, se você está achando esse curso difícil, não faça uma linha ao redor do lado de fora com preenchimentos e outras coisas diferentes, basta fazer uma pequena variação de cor sobre isso Botão Comprar agora para saber mais. Isso economizará tempo/para torná-lo mais interessante é que, quando você jogá-lo, eu quero que você o conecte. Então, quando eu clico sobre o mouse acima funciona, mas quando clico nele, ele pula para a página Checkout e faz isso. Há algo que não fizemos que fomos lotes de design, se quisermos protótipo página, ela é automaticamente adicionada essa animação e aprendemos antes que pudéssemos desativá-la. Vamos. Não queremos o desvanecimento, só queríamos pular. Você pode dizer ir para a transição e eu não quero uma dissolução, só queria pular direto. Isso é o que é essa coisa. Isso é dizer, não vai a lugar nenhum. Só vai para essa coisa elétrica. Isso apenas diz que a animação acontecendo aqui não vai para nada. Mas também quero que ele vá para outro lugar. Você pode ter duas ações em um componente. Então, neste caso, vou dizer que você vai a essa coisa. Você vê que você pode ter mais de um? Você pode ver agora quando eu toco neste vai para o padrão. Ele vai tocar, fazer a transição para esta página de animação, dissolver ou nenhum, deixe-me ir nenhum. Também acontecerá quando estiver pairando, faça uma transição de nenhum. Você pode ter mais de um, você pode ter três. Não sei por que você teria três? Vai surtar porque vai tentar ir para ambas as páginas. Não tenho certeza para qual deles ele realmente irá, mas saiba que você pode obter um botão para fazer mais do que uma coisa. No nosso caso, jogue nossa animação do mouse. N, vá para uma página, salve para saber mais. Há o botão Saiba mais. Eu queria ir para este, os detalhes do produto, saber mais sobre este produto. Vá para a visualização. Até agora, isso nos levará à nossa segunda parte do nosso projeto de classe e muito mais. Existe isso. É como o botão de opção. Quero ver se você consegue fazer isso. É como um interruptor de alternância. Esse é o pairar, este é o botão. Em termos de carrapato, acabei desenhar isso. Eu desenhei com uma ferramenta de pinos. Você também pode desenhar ou encontrar algo do Icon Finder ou de um SVG em algum lugar, kit de interface do usuário de outra pessoa. O que você encontrará quando você o desenhar, seu carrapato não parecerá nenhum outro carrapato. [RISOS] É muito difícil desenhar como o carrapato, sinto que cheguei lá eventualmente, mas redesenhei esse bilhete algumas vezes. Vamos verificar. Botão Comprar Agora, eles devem ser o mesmo componente principal e passar o mouse na segunda interação do protótipo. Quando você clica nele e vai para essa página, marca de seleção, igual a um botão de opção, ative e desative. Quando terminar, grave um vídeo seu interagindo com ele. Em um Mac lembre-se que está aqui em cima, PC, está ali. Lembre-se também de que alguns dos lugares em que você pode carregá-lo, especialmente as mídias sociais, você simplesmente despeja o vídeo lá em cima e ele o processa e está tudo bem. Muitas vezes, com as tarefas e seus comentários, talvez seja necessário fazer o upload deste vídeo que você faz para algo como YouTube, Vimeo ou Behance ou alguma outra hospedagem de vídeo e apenas compartilhar o link. Se você experimentá-lo no último vídeo anterior e simplesmente não conseguiu pela vida que gravou um vídeo, tudo bem. Basta fazer uma captura de tela e fazer o upload disso. Duas capturas de tela uma ligada, uma desligada. São meus amigos. Eu adoraria ver o que você faz, compartilhado nas redes sociais também. Estamos começando a chegar a algum lugar. Vejo você no próximo vídeo. 61. Como usar a grade repetido no Adobe XD: Ei, todos. Neste vídeo, vou mostrar provavelmente o recurso mais interessante do Adobe XD. Você pode clicar nas coisas e selecionar pouco COD. Eu preciso que você também saiba, imagine se você pudesse ir, olhar para isso, há muitos deles. Mas e se precisássemos de algumas imagens? Olha, eu posso arrastar algumas imagens para dentro e todas elas se atualizam. Posso brincar com o espaçamento e separá-los surpreendentemente na grade de repetição. Deixe-me mostrar como funciona no Adobe XD. Para começar, página de detalhes do produto, eu fiz isso mais longo e mudei para fora pequena lanchonete para lá. Estou construindo todo esse trabalho duro que fizemos e também posso me livrar da imagem e apenas trocá-la para um preenchimento como de volta para a estaca zero. Se eu estivesse fazendo isso e há múltiplos desses, é muito fácil usar a grade de repetição nisso. Vou selecionar tudo o que eu quero fazer parte disso. Eu dou uma manobra muitas vezes para ter certeza de que tenho tudo e não tenho nada que eu não deveria ter. Você vai ter que agrupá-lo, mas você pode clicar neste aqui, Repetir Grade [RISOS] Isso é um novo científico para este curso a propósito. Tudo o que você faz é arrastá-lo para baixo. Você é um mestre de grade repetido, veja isso. Coisas que você pode fazer, vamos pegar algumas delas. Aqui vamos nós. Ele seria como, eu preciso que isso apareça um pouco, a lacuna é muito grande. Assista a isso pairar, passar o mouse, e só não estou fazendo nada, estou apenas clicando, segurando e arrastando. Você pode fazer isso se sobrepor, você pode fazer isso [RISOS] Isso não é o que eu quero, mas eu vou fazer com que o meu fique bem apertado lá dentro, talvez até um pouco assim. Aqui vamos nós. Agora, eu vou para cima e para baixo porque nós temos isso, mas você definitivamente pode ir assim também, não importa. Se você estiver fazendo a versão para desktop, você pode ir para a esquerda, direita, você pode ir para cima e para baixo. Só vou descer neste caso. O que o torna legal é que ele é continuamente ajustável. Depois de terminar, basta clicar em voltar. Você pode dizer, você pode ver essas coisas ao redor do lado de fora e esses garotinhos? Estes não desaparecem. Eles ficam lá para que você possa adicionar mais e mais, se precisar. Agora, o que faz isso adorável é que você pode passar, e onde está minha cópia? Posso adicionar textos individuais para essas coisas. Vamos adicioná-los e vamos adicionar este. Só estou clicando duas vezes neles. Você pode editá-los e ainda tem essa adorável. Se eu clicar quando eu clicar duas vezes nele, entrar em membro e nosso modo de edição de objetos, eu clico desligar clicar novamente, e ainda tenho isso e isso significa que ainda posso jogar com todo o espaçamento, mesmo que eles sejam bastante individuais com essas caixas aqui para imagens. Agora, com as imagens, você pode simplesmente arrastar uma de cada vez. Vamos pegar nossos arquivos de exercícios, lá estão eles. Vamos pegar uma imagem e arrastá-la para dentro. Então você pode ir até você nisso. Eu quero que este seja esse. Ele pressupõe tudo o que você está fazendo os alternativos. Você é como, não. Eu só vou fazer cada indivíduo, vamos fazer isso. Você vai lá e continua adicionando-os à medida que passa por como você quer fazê-lo. Muitas vezes, o que você pode fazer é, vamos desfazer isso [RUÍDO] Você pode simplesmente pegar, eu tenho quatro deles lá. Posso pegar quatro desses, pegar até quatro. Basta arrastar um para dentro e ele assumirá que você vai fazer essa pequena e adorável grade de repetição. É ótimo para você. Você pode torná-los individuais, mas você pode controlá-los todos juntos. O espaçamento é uma coisa, o que acho útil é que aqui você decide que, na verdade, mais tarde não estamos usando essa fonte. Vamos usar, tenho Trajan Pro? Outra fonte adorável. Você pode ver que eu posso ajustar essas coisas ou talvez seja apenas o tamanho e, na verdade, isso precisa ser um pouco maior e eu posso movê-lo para lá, ou não é bem adequado, então eu preciso torná-lo menor. Você tem isso, eu digo, adorável muito na grade de repetição. É uma das grandes vantagens do XD sobre os concorrentes. Você pode alterar fontes, alterar cores, alterar o espaçamento todos juntos, mas alguns bits podem ser individuais, como o texto real nele e as imagens nele contidas. Também ao redor dos cantos você pode ir, eu vou ter cinco por favor e todos eles vão e mudam. Aqui está você. Haverá um ponto que você é como, na verdade, você poderia simplesmente parar com toda a atualização moles querem explodi-los porque eu vou fazer algo mais individual com eles. Quero embaralhá-los separadamente. O que você pode fazer é clicar nele uma vez, clicar e clicar nele uma vez. Aqui há uma grade desagrupada e você apenas clica nisso e ela simplesmente os esmaga em objetos individuais. Que indivíduo? Aqui está você. Eu posso entrar nessa e dizer que na verdade, você vai ser uma imagem alinhada à direita, como você vai lá, você vai lá, e você vai lá. Você quer mudar isso para uma fonte diferente específica, aqui está. Você pode separá-los. Você não pode juntá-los novamente quando eles estão quebrados, acabei de terminar lá. Você pode ouvir meu teclado alto tocando comando Z ou controle Z em um PC para juntá-los novamente. Ótimo para esses tipos de cartas , qualquer coisa que se repete. Pode ser um item de lista, veja estes aqui. Pode ser uma grande lista longa ou pontos de bala, qualquer coisa assim. Você o usa para navegação também. Faremos navegação mais tarde no vídeo, mas a barra de navegação abaixo do lado aqui de um dispositivo de navegação móvel onde diz casa e conta e isso. Você faz um e, em seguida, apenas duplica-os. Outro caso de uso para o qual eu uso é esses Moodboards, um grande moodboard feio. O que você pode fazer é simplesmente ir retângulo e ir para você algo representativamente sábio [RISOS] e não tão grande. Da última vez que os arrastamos e eles estavam batendo na distância à direita e eles eram bem grandes. O que você pode fazer é fazer um moodboard isso um pouco mais, eu não sei, menos assim. Eu posso fazer isso. Obtenha aproximadamente o número que eu preciso. Pegue meu moodboard onde estava aquele moodboard? Basta despejar tudo isso. Olha como vamos ser incríveis, você está pronto? Veja como somos incríveis e você pode controlar o espaçamento como antes. [RISOS] Espaçamento, você pode colocá-los sobrepostos. Isso não é bom [RISOS] apenas continue com isso, então esse é o fim do vídeo. Uma grade de repetição, super útil e útil para isso. Você pode achar que ele realmente se repete também. Se você puder ver que eu não tenho o suficiente só para você saber. Eu tenho isso e você pode ver esse cara repetindo duas vezes. Bem, há o primeiro e repete isso, então eu realmente não preciso, o que eu fiz? [RISOS] Clique com o botão direito aleatório e eu o bloqueei. Você pode bloquear coisas, sabia? Você pode bloqueá-lo para que ele não se mova. Lá vai você. Eu não fiz muito isso no XD de qualquer maneira, exceto por acidente. Eu vou, realmente não preciso deste. Aqui está você. Este é meu moodboard. É isso para este vídeo, verei você no próximo. 62. Projeto do curso 12 - Rede de repetição: Você pode dizer pelo título do vídeo, é outro projeto de classe. Este aqui é Repeat Grids. Vamos fazer esta página de revisão. Bem, nós não vamos fazer isso, você está. No documento de projetos de classe, este é o Projeto 12 aqui. A primeira coisa é, quero que você pesquise a aparência de um cartão de revisão. Aposto que você não fez um antes ou talvez tenha feito. Mas basta ir ao Google e digitar o Review Card.Ui, ou no Dribble ou em Behance, o que você gosta de se inspirar. Google, mudamos para imagens e adicionamos a palavra UI ao final para que o cartão de revisão possa ser muito amplo. Faça isso, obtenha alguns exemplos, tire algumas capturas de tela. Você pode ter um quadro de humor para seu cartão de avaliação. Tudo bem. Quero que você crie uma nova prancheta. Sei que está fora do escopo do nosso fluxo de tarefas, só nos pediram para fazer essas páginas inteiras, mas ei, este é um curso. Podemos quebrar as regras. [RUÍDO] Vamos fazer uma nova revisão de código de prancheta, e eu quero que você crie seu próprio cartão de revisão [NOISE] e depois repita [NOISE] usando a Grade de repetição. Faça um, repita, e então eu vou fazer você experimentar pelo menos dois plug-ins para preencher seu grupo. Não use os que estou usando, não é bom. Não vou mostrar como usá-los porque acho que quero que você explore como funcionam os plug-ins. Eles não são todos iguais e eu quero que você encontre a frustração e depois a supere, e então perceba, ok, plug-ins são todos feitos por várias pessoas e todos funcionam de forma diferente. Então, aqueles que acabei usando para este exemplo específico, você pode usar outros diferentes, acabei aprendendo alguns que instalamos anteriormente, Faker XD e UI Faces. Eu não sou como defensores desses dois, eles trabalharam, eles eram bons, mas há muitos lá dentro. Dê uma olhada nos plug-ins. Lembre-se de chegar aos plug-ins, está aqui esta última opção e você pode ter que clicar “Plus” e abrirá seu aplicativo da Creative Cloud. Se você precisar pesquisar, você pode procurar aqui e ter certeza XD está marcado e eu vou, eu não sei, encarar [RISOS] e você pode ver que há um monte de diferentes . Dê uma olhada. [NOISE] Neste caso, a interface do usuário enfrenta uma é muito legal. Você pode clicar nele e escolher a partir da fonte. Lembra-se de Unsplash e pixels? Lá vai você. Eles são muito comuns. Essa pessoa não existe. [RISOS] Interessante. É complicado , mas não muito complicado. O truque é que, com a maioria desses plug-ins, você precisa ter algo selecionado primeiro. Como se eu selecionar neste texto, ele diz que não é suportado, enquanto eu clico nisso e ele diz, ei, eu sei o que fazer, e você pode achar como neste caso, você clicar em “Selecionar fotos” e você pode escolher diferentes e há muito nisso. Só para explorá-lo um pouco, descobrir, ir com ele. Experimente um diferente do que este. Este é muito incrível. Tem muitos filtros diferentes e apenas pessoas felizes, e também recursos diferentes. Este em particular, ele reconhece que é Repeat Grid e percorre todo o caminho e preenche todos eles. Este outro, Faker, onde eu queria ter esse texto selecionado, este é estranho. Vou mostrar apenas uma demonstração rápida desta porque, se você é novo nos plug-ins, todos eles funcionam de forma tão diferente. Este aqui é um pouco engraçado. Deixe-o lá, eu tenho meu texto selecionado, você pode passar por tanta coisa. Você pode dizer, tudo bem, eu tenho que conseguir um encontro que eu preciso colocar e você pode colocar em datas e isso irá colocá-las aleatoriamente lá para você. Mas este aqui não é tão aleatório. Bem, deixe-me mostrar como funciona. Eu disse que queria que você os explorasse, [RISOS], mas então eu pensei que esse em particular funciona de uma maneira estranha. Encontrei isso. Vou dizer o nome. Há um que diz que todos geram nomes para mim e se eu clicar duas vezes nisso, você seria como, o que acontece? No topo aqui, você pode ver o que ele fez? Se eu clicar nisso, ele apenas adiciona outra string variável, não tenho certeza. Mas tem algum código no topo aqui. [RUÍDO] O que eu vou fazer é, eu quero que seja o primeiro nome e depois um sobrenome, e ele coloca na ordem errada, assista isso, se eu clicar em “Gerar”, agora ele é colocado lá Cara Little. Lá vai você. Ele colocou de forma errada, para que eu possa pegar isso, cortá-lo, [RUÍDO] colocá-lo acima, e porque eu coloco um retorno, o que acontece? O retorno entra. Aqui em cima, você pode tornar isso mais amplo só para que você saiba. Posso excluir isso. Eu quero um espaço lá dentro? um pouco de espaço, gerar. Você pode ver que é muito personalizável, o que é incrível. Montserrat. [RISOS] Oberbrunner. Aqui está você. Oberbrunner? Este, porém, não vai passar e fazer tudo. Você tem que ir, o que não é um grande drama, mas pelo menos lhe dá um material aleatório, enquanto o outro plug-in irá automaticamente passar e atualizá-los todos. Você poderia usar esses dois. Eu quero que você explore alguns dos seus próprios, só para pegar o jeito deles. Você pode ser como, cara, isso é [RISOS] não muito bom. É algo que você precisa explorar porque tudo isso não é feito pela Adobe. Eles nem todos funcionam muito bem, e seus comentários podem ser bons e é terrível de usar, mas vá e explore , descubra. Você pode fazer isso por Loren ipsum, pelos nomes. Para isso, você pode ter uma parte diferente de suas avaliações, você pode ter algo completamente diferente. Mas é divertido explorar esses plug-ins. A outra coisa que eu queria mencionar é que neste caso, eu cheguei ao fim aqui. Você pode ver? No meu protótipo, se eu tocar isso, você pode vê-lo? Bem, você não pode ver, mas eu não consigo rolar para baixo. O que vou fazer é, eu só quero reiterar, abordamos no início do curso mas acho que foi há muito tempo. Vou fazer isso mais longo do que preciso. Lembra dessa coisa? Contanto que não movamos isso, ele será cortado lá e rolará para baixo aqui. Vamos jogá-lo. Agora posso rolar e ter muitos desses diferentes. Lembre-se, se eu acabar movendo isso, ele tenta espremer tudo naquela página, ele não vai rolar mais e é um pouco estranho. Vou ir para você, vou desfazer isso. Você pode arrastá-lo ou ajustá-lo aqui. Onde eu estava? Acho que talvez eu tenha que clicar na página. Eu clico na página, lá vai você. Altura da janela de visualização, é isso aí. Você pode digitar o tamanho do telefone, o que significa quão alto ele é. [RUÍDO] As últimas coisas a fazer é que eu quero que você crie um botão Reviews na página inicial. [RUÍDO] Na página inicial, apenas o link para esta página, caso contrário, ele tem uma maneira de chegar até ela e na página inicial adicionei uma revisão falsa, mais Comentários botão que me permite e meu protótipo para pular para essa página e rolar para cima e para baixo. Devo acrescentar isso também. [RUÍDO] Você não precisa ter o código aqui. Você pode ter apenas um botão Reviews. Não precisa ser um botão, pode ser texto. Cabe a você, apenas alguma maneira de vincular a página inicial à página de comentários. Em seguida, vá e faça uma captura e faça o upload para as tarefas do curso e também compartilhe nas mídias sociais e marque-a com a hashtag XD nas mídias sociais, apenas para que você possa dar uma olhada você mesmo para ver o que outras pessoas fizeram pelos comentários. É interessante ver como é um cartão de avaliação de pessoas diferentes, culturas diferentes e sua indústria específica. É nerd, eu sei, mas você é um nerd agora; você é um nerd da interface do usuário, você está interessado nessas coisas, então é interessante ver o que outras pessoas fazem. Quem teria pensado que um cartão de avaliação seria tão interessante? É isso. Vejo você no próximo vídeo. 63. Atuação e problemas com grades repetidas da borda: Olá a todos. Neste vídeo, vou mostrar como adicionar à nossa grade de repetição depois de ter feito isso, e também alguns dos problemas que acontecem quando você gosta, ei, eu quero torná-la maior, mas é tudo de corte. Por que é cortado? Quero que fique maior. Isso é o que vou mostrar a você em seguida no Adobe XD. O primeiro é fácil. Digamos que eu queira adicionar esse pequeno número depois dessas estrelas. Atualmente, não está lá agora, então o que você pode fazer é entrar em posição. Não precisa estar na posição. [RISOS] Mas eu vou . Vou cortá-lo. Vai editar, cortar. Vou clicar duas vezes para entrar. Basta ter qualquer coisa selecionada aqui, não importa qual seja e, em seguida, basta clicar “Colar”. Em seguida, ele entra. Você pode ver, está em todos eles. É assim que adicionar outra coisa a ele. Vou usar minha tecla de seta apenas para tocar nela. Bem, o problema que você pode encontrar é que você quer estender isso, o fundo branco, torná-lo menor é mais fácil, mas eu quero torná-lo maior. Se você aumentar e você é como, eu só quero torná-lo um pouco maior. Quero movê-lo para lá. Você pode ver que ele foi cortado da borda aqui? Na verdade, torná-lo colorido não ajudará. Mas você entende a ideia. Você pode ver, ele é cortado desse lado, se eu aumentar nesse lado, está preso nesta placa de grade repetida aqui. Se eu estendê-lo, estou tipo, ok, vou clicar nele. Para onde vamos? Clique nele uma vez. Aqui está minha vantagem. Só vou arrastá-lo maior. Você é como, não é bem o que eu queria. O que você acaba fazendo e eu desfaço antes de destruí-lo. [RUÍDO] Não importa se você fizer isso antes ou depois. Estice-o antes ou depois. Vou fazer isso depois. Tudo o que você precisa fazer é fazer isso, o meu é longo, e você será capaz de ver esse identificador, onde está? Nele esteja fora, clique nele uma vez. Lá vai você. Aí está a alça. Se eu fizer essa alça maior, você só precisa esticar isso primeiro. Dê a si mesmo um pouco de espaço, faça isso maior e, em seguida, arraste isso de volta. Talvez clique em “Desligado”, clique de volta nele e você se livre disso novamente. Isso lhe dá um pouco mais de espaço. Acontece muito para mim quando vou do desktop para o celular. Copie isso e vou para a visualização da minha área de trabalho e tenho mais espaço, então eu consigo fazer as coisas de um tamanho diferente. Basta torná-lo maior. Dê a si mesmo uma lacuna. Em seguida, estenda isso. Então podemos estender isso para fora e depois voltar para cá e encolhê-lo de volta. Lá vai você. Atualizando e também algumas pequenas atualizações, bem, corrigindo a borda, se você precisar torná-la maior. Às vezes, porém, em vez de fazer isso, às vezes tentar ajustar essa coisa depois pode ser bastante complicado, dependendo do que você tem. Às vezes, selecione-o e vá, desagrupe a grade e vá embora, vocês se foram, e começam de novo, e apenas comece a repetir a grade com o novo tamanho e você está fora novamente. Você terá que atualizar essas coisas, mas às vezes apenas desagrupá-lo e começar de novo pode ser mais fácil. É isso para o vídeo, meu amigo, eu vou te ver no próximo. 64. Como usar pilhas no XD para criar um formulário: Segure suas pessoas de chapéus, é o segundo recurso mais emocionante Adobe XD chamado stacks. O que eles fazem? Assista isso. O nome no cartão precisa ir abaixo e nosso e-mail precisa ser o topo. Assista isso. Vou pegá-los embaralhados. Posso brincar com esse espaçamento de todos eles ou apenas um. Ele fica melhor. Olhe para isso. Tenho esses cartões, posso ir assim. Preciso embaralhá-los porque o cliente continua mudando de ideia. Olhe para isso, melhor ainda. Vamos fazer este menu no topo aqui. Você precisa estar aqui agora. Na verdade, a busca, vamos, Dan, precisa estar sobre esse lado direito. Olhe para todos eles embaralhados, todos automáticos. É uma dessas ferramentas métricas adoráveis no Adobe XD. Vamos entrar e mostrarei como eles funcionam. Primeiro, precisamos de algo para empilhar. Vocês esperam lá. Você voltou, eu fiz algumas coisas. Este é um formulário e você pode ter visto na versão de velocidade, eu fiz isso com o Repeat Grid porque é muito repetido. Para usar pilhas, neste caso, vamos desagrupá-las. grade de repetição foi ótima para criá-la, mas para pilhas, elas não podem ser assim ou não podem ser uma grade de repetição. Estas são todas unidades que exatamente o que Repeat Grid fez por mim. Mas se você não estiver, eles precisam estar em grupos. É isso que as pilhas sabem como ajustar. Você vê isso, não em grupos. Então, o que eu quero fazer é selecionar isso e agrupá-lo, e agrupar algo é Comando G ou Ctrl+G. Este aqui também é simples, então ele não precisa ser agrupado. Você pode ver que eu o reusei dos meus ativos. Tenho que usar meus estilos de personagens. Olhe para mim, tudo chique. Agora, o que precisamos fazer é selecionar todos eles. Por aqui, dizemos que você é uma pilha. Onde está isso? Não será assim. [RISOS] Então essas coisas precisam ser agrupadas, mas a coisa toda precisa ser um grupo também, como um grupo universal. Grupos individuais, ótimo. Vou agrupá-lo novamente. Usaremos um longo caminho. Use isso para agrupá-lo. Você pode ver no meu painel de camadas, lá está lá. Este meu grupo. Eu chamo de Formulário porque não sei, vamos ser chiques. Tenho meu formulário. Agora eu posso fazer uma pilha. Onde está isso? Aí está lá. Ligue. Ele deve ser o padrão para o caminho certo, seja pilha vertical ou se mantém em uma pilha. Pronto, vamos clicar dentro dele. Agora, assista, assista, assista, olhe para isso, o nome vai primeiro? Outro não vai primeiro? Isso vai primeiro? Tão bom. Você pode descansar e você pode fazê-los horizontalmente também, ou eu vou desfazer isso. Você pode segurar Shift enquanto o arrasta e ele o moverá para cima e para baixo. Olhe para isso, você pode decidir que isso vai primeiro ou isso vai primeiro. O que acontece primeiro? E-mail. Vamos fazer isso. Vamos fazer isso. Se você precisar adicionar outro, você precisa do, eu não sei, do mês. Você pode simplesmente selecionar um deles e copiar e colar, você tem outro. Você pode ver que ele derruba, que é a coisa realmente legal. Então você pode ir assim. Você pode dizer que a expiração. [RISOS] É o quão ruim sou um soletrador. Não sei, simplesmente não entra. De qualquer forma. Você também pode ver e ele chama tudo isso. Nossa, eles precisam ser os mesmos então , soletrá-lo corretamente. [RISOS] Você os copia e cola, adiciona-os e os empurra para fora. Você pode excluir um. Você pode decidir que na verdade você voltou e eu não preciso mais desse, então clique duas vezes nele para entrar. Clique nele, exclua-o e todos eles se movem para cima e para baixo. Você ainda pode trabalhar com eles individualmente porque elas não são mais Grades Repetir. Então eu posso pegar este e clicar duas vezes nele. Acabei clicando nele uma vez, basta clicar em toda a pilha. Clicando duas vezes nele para entrar neste grupo. Quero entrar no grupo novamente, clicar duas vezes novamente. Você pode fazer um pouco disso e isso acontece um pouco. Vou fazer isso e vou pegar essa unidade, clicar duas vezes nela para entrar, copiar e colar. Olhe para isso, e o que é isso? CVV. É CVV? É um desses. Não é que seja um CVC. [RISOS] Um desses. Sim. É assim que você faz uma pilha. Você agrupa as coisas que você quer ser embaralhável e , em seguida, todo o lote precisa estar em um grupo, então você só clica em “Stack” aqui. Você pode ajustar o espaçamento. Assista isso. Você pode clicar nele uma vez, tudo, clicar duas vezes nele e você passará o mouse entre seus grupos e olhará para isso, todos eles aparecem. Você pode fazê-los individualmente assim apenas pairando acima deles. Vou desfazer. Você pode desfazê-los completamente. Se você segurar algo, acho que Shift. Acho que certo, sim. Então mantenha pressionada a tecla Shift, e todos eles se moverão. Você pode decidir que isso é perfeito. Aquele lá, aquele lá. Como eu disse, as pilhas são super úteis. Outra coisa que você pode fazer é espremer as coisas. Então, copiamos e colamos, certo? Se eu quiser outro desses, basta selecioná-lo, copiar e colar. Mas digamos que você vá para a ferramenta retângulo e queira adicionar algo, não tenho certeza do que é. Digamos que ele precise ser uma coisa de upload de imagem. Você vai ver que estou usando minha ferramenta retangular. Se eu apenas arrastá-lo para cima, ele só faz um pequeno presente para si mesmo, fazendo um retângulo lá sem motivo. O mesmo com a ferramenta de tipo. Pegue a ferramenta de tipo e vá, na verdade, eu quero colocar o tipo lá, e agora posso digitar. Meu tipo é branco. [RISOS] Não é útil. Mas você entende a ideia, eles são bastante resilientes. Vou desfazer para me livrar desses. Mas há momentos em que, na verdade, você é como, na verdade, eu não quero mais que seja uma pilha. Eu quero movê-los para cá porque se eu tentar fazer isso, ele só vai [RUÍDO]. Vou desfazer isso. Você pode desempilhar apenas desligando esse pequeno carrapato. Então, eu o selecionei. Desligue isso. Ainda está em um grupo, o que é bom. Você pode clicar com o botão direito do mouse e desagrupá-lo em algum lugar, se precisar. Agora são pequenos pedaços. Mas o que vou fazer é mostrar uma coisa legal. Eu disse resiliente antes, é muito robusto é provavelmente a palavra que eu quero. É uma pilha, vou desempilhar . Não, isso é preenchimento. [RISOS] Eu já o desempilhei. Vou entrar no grupo. Estou dentro da forma e vou movê-lo para cá porque era isso que eu queria, e depois sair dela. Selecione-o novamente. Lembre-se, tem que ser um grupo. Posso simplesmente ligar a pilha novamente e algo mágico acontece onde ela agrupou essa linha. Você pode ver este no topo? Aquele, aquele, este. Agora eu posso passar por tudo isso. Só, eu não sei, é muito legal. De alguma forma, sabia que estava no mesmo plano horizontal e funcionou. Se eu segurar Shift, pegue-os todos da mesma forma. Você pode digitá-lo aqui. Se você clicar duas vezes até ver as coisas cor-de-rosa, você pode clicar naquela pequena lacuna rosa. Você pode ver aqui que você pode começar a brincar com ele na parte superior e inferior, se você quiser que seja tudo muito exato. Você está usando uma grade de oito pixels, ou 16 pixels superior e inferior, ou oito na parte superior e 16 na parte inferior, você pode ser muito específico e realmente dizer o que fazer. A última coisa é, está aqui, temos nosso grupo de formulários. Vamos citar todos esses. Este primeiro aqui você pode ver que é chamado de e-mail. Clique duas vezes no nome e chame-o de Email. Lembre-se, se você não puder, se eu voltar para fora disso, [RISOS] não é o que eu queria. Clique neste nome, vá Comando 3 para ver tudo, clique nisso. Eu tenho os nomes das camadas, e o que eu queria mostrar a você era digitar este, E-mail, então vamos digitar o próximo, e você pode clicar duas vezes naquele e digitar Nome. Um pequeno atalho, não é a palavra Nome, o atalho é guia. Então, ele ainda está piscando, guia para baixo para que eu não tenha que tirar as mãos do teclado. Isso é um atalho divertido? É para mim de qualquer maneira. Essa é a expiração e CVC ou CVV, seja lá o que for. Lá vai você. Você pode fazer uma guia para renomear as coisas úteis quando estiver prestes a entregar seu trabalho a alguém e você queria parecer que você não é uma pessoa louca com um zilhão de camadas sem nome como eu. Grupo 32, [RISOS] isso não é um bom sinal. Essas são as pilhas. Na verdade, quero mostrar alguns outros exemplos. Aqui está este site e ele tem uma navegação no topo. O que vou fazer é clicar em ambos. Só estou segurando Shift, clicando no primeiro e depois no segundo. Vou agrupá-los para que esses caras se movam juntos. Esses dois últimos já estão agrupados. O que posso fazer é dizer, quero mudar você, você, você, você, você, e você, você, você, você pode se tornar uma pilha. Por que não está aqui como uma pilha? Você sabe que tudo precisa ser agrupado, Comando G ou Ctrl+G. Você diz você. Você pode ver neste caso, alguma forma o XD é mágico e sabe se você quer uma pilha horizontal ou vertical. Legal. Então você pode dizer que você entra nele, clique duas vezes nele e dizer que você vai lá. Você pode ver como é útil para esses tipos de coisas, essas navegações. Você pode dizer que, na verdade, isso precisa ser o primeiro, informações do COVID vão lá. Mova a barra de pesquisa vai aqui. Vamos fazer o mesmo aqui. Eu tenho esta página de eventos móveis e vou ter certeza disso. Eles não precisam ser agrupados, esses dois bits. Você pode, para tornar as coisas um pouco fáceis, você não precisa ser. Essa coisa aqui eu vou. Bem, vamos ver o que as pilhas fazem. Vamos ver se quanto, quão inteligente é porque é bastante complexo. Vou pegar tudo isso, não preciso da navegação superior e diminuir o zoom ainda mais. Agarre tudo. Vamos fazer isso. Digamos que faça dele uma pilha. Não será uma pilha até que a agrupemos. Então dizemos que faça uma pilha e ela assumiu para cima e para baixo ou vertical, e vamos dar uma chance. Então clique duas vezes nele para entrar. Você vai dizer, eu posso Shift+Clique em ambos e dizer, na verdade, você vai lá. Olhe para isso. Se você segurar Shift enquanto estiver arrastando, ele irá direto para baixo. Olhe para isso, ele vai empilhar e acima dele. Lá vai você. Vamos tentar colocar este abaixo disso. Oh, é bom demais. Bom trabalho, XD. Este pedaço inferior é muito de uma unidade inteira. Então, está acabando por baixo disso. A única coisa que eu poderia ter que fazer é, este era um grande grupo de unidades de antemão, talvez eu tenha que separar antes de fazer minha pilha. Então, experimente. Jogue a pilha nela, veja se ela faz o que você quer e, em seguida, desfaça-a e talvez você tenha que fazer algum agrupamento extravagante de antemão. último, uma pilha de espingarda aqui pronta. Tenho todos esses bits individuais. O cliente vai me fazer movê-los. Vou agrupá-los, fazer uma pilha, clicar duas vezes nele e dizer que está lá, que está lá, e então é preciso ir lá. Segure Shift enquanto os arrastam, pessoal. [RISOS] Caso contrário, eles acabam em todos os tipos de lugares. Em seguida, olhe, saia , clique, empilhe, hands-off, pronto. Muito bem, XD. Isso é tão bom. Adoro pilhas. É isso. Vejo você no próximo vídeo. 65. Projeto do curso 13 - Página de festas e checkout: Olá, agora é hora do projeto de aula. Este, vou fazer com que você crie sua página de checkout. Quero que ambos pesquisem como é uma página de checkout e um formulário de cartão de crédito uma página de checkout e um formulário de cartão de crédito, as diferentes opções. Existem maneiras diferentes de fazer isso. Você decide pelo seu perfil de usuário, o que pode ser melhor. Vou colocar todos os meus em uma página que está assumindo algum nível de como é mais difícil de fazer e é tudo despejado em uma página. Você pode decidir separá-lo três páginas de checkout. Você pode ter decidido sobre a nova quantidade, escolher o envio nos detalhes do cartão de crédito e depois comprar. Você pode ter três páginas de checkout diferentes. Isso depende totalmente de você. Mas dê uma pequena olhada. Dê uma olhada nas páginas de checkout para exemplo móvel e apenas um pouco de exploração para decidir como você quer que o seu pareça. A outra razão é que eu quero que você explore pilhas. Mesmo que você tenha tudo definido brinque perfeitamente com pilhas apenas para que você tenha uma ideia do que elas fazem, o que as quebra, o que as faz funcionar. É ótimo para coisas como essas listas. É quando fica muito bom com isso. Vamos dar uma olhada rápida. Páginas de pesquisa, cartão de crédito e checkout. Basta passar cinco minutos dando uma olhada, uma ideia do que você quer a sua também e, em seguida, preencha seu formulário na sua página de checkout. Certifique-se de experimentar pilhas, criar um botão de compra e vinculá-lo à página de confirmação. Meu protótipo aqui, se você for lá e descer e comprar, ele vai para a página de confirmação. Faça isso e me envie uma captura de tela, faça o upload para os lugares habituais, e é isso. Vejo você no próximo vídeo. 66. A diferença entre animação e micro interações: Olá, todos. Neste vídeo vamos falar sobre a diferença entre animação e microinterações. Eles são bem parecidos. Eles são diferentes da mesma forma na forma como você os cria. É apenas por volta do propósito deles e do termo microinterações, eu não sei. Se você conhece UX, provavelmente conhece o termo. Para aqueles de vocês que são novos na UX, que provavelmente são muitas pessoas assistindo a este vídeo, provavelmente nunca ouviram falar do termo. Vamos descrever rapidamente as diferenças entre animação e microinterações. O que você está olhando para a tela agora, aqui estão basicamente todas as animações. Eles estão lá para encantar o visitante do seu site, talvez para comunicar uma ideia de forma mais completa. Pode ser uma pequena animação do tipo de diagrama de informações, algo que você não pode se comunicar com uma única imagem, você pode decidir animá-la. A diferença entre microinteração e animação é microinterações são, vamos ver um exemplo. Essas pequenas animações de estilo de notificação da interface do usuário. Esses [RISOS] na tela indo ao mesmo tempo, é um pouco distraindo outro. Uma microinteração geralmente é feita como resposta à entrada do usuário. Isso significa que quando você clica no pequeno coração, ele salta para cima e para baixo para você saiba que você fez alguma coisa. Você já clicou em algo e isso não faz o suficiente e você continua clicando nele? É como sua câmera digital em seu telefone, faz com que o ruído de clique estranho. Não precisa [RISOS] de um barulho estranho, mas nós, humanos tolos, precisamos desse pequeno clique para saber que algo aconteceu [RISOS] para que possamos continuar com o nosso dia. É a mesma coisa com a microinteração. Agora, as linhas ficam um pouco desfocadas entre animações e microinterações. Este aqui, eu diria que não é uma microinteração, mais apenas uma animação. Só está mostrando coisas. É legal lá, parece bom, mas não está comunicando nada. Algo assim é. É uma pequena animação. Mas se eu estivesse clicando nisso, clicando nele, é uma maneira de me mostrar que posso usar o mesmo imóvel na minha página. Em vez de ter dois botões, mais e menos, essa coisa pode fazer a transição e essa pequena animação me ajuda. Coisas que se movem, atraem os olhos, e isso ajuda a ir assim, isso e aquela coisa lá. É pequeno. É só um pouco extra. É uma microinterações. Vamos dar uma olhada em alguns outros. Animação. Esta é minha humilde opinião também. Não sou o chefe do que é uma microinteração [RISOS]. Você pode não concordar, mas estou apenas dando meu feedback. Este é um bom. Se você clicar no botão de pesquisa e ele abrir, poderá clicar nele para fechá-lo. É definitivamente delicioso, boa interação, mas na verdade ajuda a comunicar o que está acontecendo, que você realmente fez alguma coisa. Vamos dar uma olhada em alguns outros. Eu quero esses sites. Este é chamado lottiefiles.com. É útil para animações online. Não vamos cobrir muito mais informações sobre isso. mesmo com este, é chamado codemyui.com, e isso está sob a tag chamada microinterações. Agora, sempre que sugiro um site nos meus cursos, é como o caso da morte. [RISOS] Aposto isso, eu não estaria aqui quando você vier, então esses são apenas exemplos de sites. Se eu der uma olhada aqui, vê essa coisa aqui? Isso não é uma microinteração mesmo que seja rotulado como esta, é apenas animação. Na verdade, é um jogo. Vamos dar uma olhada, algumas boas microinterações. Este aqui é um bom. Se você já fez essa coisa no seu iPhone quando está tentando obter a impressão digital para fazer as coisas de segurança, essa pequena coisa de linha é suficiente para saber que você está fazendo algo. Porque, caso contrário, se ele apenas diz para fazer isso e se mexer, você não sabe se você está tipo, “Estou me aproximando ou está funcionando?” Essas pequenas linhas ao redor do polegar não fazem nada. O computador não está dizendo : “Oh olha, eu vejo uma linha.” É apenas uma pequena animação para nos ajudar pois os humanos sabem que você tirou uma foto, você pode ouvir o clique. Outros. Note que isso é divertido, mas uma animação. Não ajuda. Está lá para ser impressionante, não comunicar feedback. Geralmente, uma microinteração é o feedback da interface do usuário. Vamos dar uma olhada e essa é a transição de página. Este aqui, eu não sei. Eles ficam um pouco embaçados. Às vezes você está esperando, então isso é bom. Aquela pequena tela de carga e aquele pequeno confete [RISO] no final. Vou colocar isso nas microinterações, mas está um pouco na fronteira. Vejamos mais uma página. Os anúncios o seguirão em todos os lugares neste site. Você pode dizer o que venho comprando ultimamente. [RISOS] Designers/carro wirra precisando de bits. Vamos dar uma olhada. Animação. Um pouco dos dois. Eu tenho micro-interação. Vamos ver. Este é um bom. Olhe para isso. Cuidado com isso. Verde, tudo significa que você o completou. Vamos assistir o próximo. Tem um bom. Ele fica vermelho. Cuidado com isso. Você pode ver isso treme? Significa que não. Não está dizendo nada, é apenas comunicar visualmente o não para você. Você entende a ideia. Algum outro? Animação. Isso é legal. Aqui vamos nós, microinteração, útil. Isso vai ser isso, eu prometo. Algum último? [RISOS] Um último lugar é, basta ir a algo como Dribbble ou Behance e digitar microinteração e você encontrará, novamente, uma mistura de ambos. Mas este aqui é bom, desde que você esteja usando dólares americanos. Houve um. Não vou passar por todos eles. Você entende a ideia. Olhe. Baixando e algo está acontecendo. Aquela pequena linha, pequenas microinterações. último, prometo. Pouco carregamento, nuvens voando no lado da microinteração, na minha opinião. Isso, meus amigos, é uma breve introdução às microinterações. Vamos fazer um no próximo vídeo. 67. O desenho do Dan no Adobe XD: Olá a todos. Bem-vindo ao vídeo mais chato que já fiz. Eu pensei em fazer este vídeo quando eu estava reproduzindo, eu estava tipo, sim, eu vou fazer um vídeo onde vou desenhar essas coisas e ele tem que ser desenhado em vez de apenas pular para ele ser desenhado. Eu pensei em fazer isso e você poderia vir junto para o passeio e ser super interessante. Não foi, mas ainda está aqui [RISOS] então você pode pular porque nada realmente emocionante acontece, exceto coisa muito média, procurando caixa de ícone de caminhão. Adivinha o que é isso? Espero que você pense que é uma caixa porque enquanto isso, preciso que você decida sobre como fazer um pacote como ícone, mas de qualquer forma, vou desenhar isso, vou cobrir basicamente coisas que nós já cobriu no curso, foi há algum tempo desde que fizemos algum desenho, então vamos jogá-los todos aqui, você vai me ver fazer essas coisas feias e é isso, nada mais apenas indo para ser desembarcado na página. Mas sim, vamos animá-los no próximo vídeo. Lá vai você, aproveite ou pule em frente, eu não me importo. O desenho começa. Agora você pode ficar tentado a começar a desenhar aqui na área de trabalho. O problema de fazer isso aqui é que você vai escalar a referência e você acaba desenhando muito grande ou muito pequeno e depois tendo que escalá-lo, mas você acaba com casas de aparência errada [RISOS] porque você tem que redimensioná-lo e escolher novas fronteiras e alinhar as coisas. É melhor realmente apenas desenhar no seu quadro de arte real que está acontecendo, então você terá algumas comparações. Com este quadro de arte, há muito nele, e eu não quero movê-lo, porque é tudo apenas peças. Você pode selecionar tudo no quadro de arte, clicar com o botão direito do mouse e dizer bloqueá-lo, apenas para que ele não possa ser movido. Você pode selecionar a coisa toda, na verdade, selecioná-la, tudo, clicar com o botão direito do mouse e dizer desbloquear também , ou podemos simplesmente ocultá-la. Cabe a você. Vou desenhar isso. Começamos com uma ferramenta de retângulo, e eu vou desenhar algo, meu processo foi, só para você saber, eu fui e pesquisei o ícone do caminhão e o ícone do pacote e acabei olhando coisas que eu gosto e algumas delas estão próximas e algumas delas não eram e acabaram com um pouco de malha. Sim. Vou escolher uma cor de preenchimento, não vou ter traçado, ao redor dos cantos, alguns deles seguram opção ou Alt em um PC, pegue o canto inferior. Agora Pin to para a cabine. Só vou desenhar com linhas retas. Deixe-me fazer isso como um pequeno recorte para a janela. Se não se alinhar, sim, ele se alinhou bem. Vou pegar a ferramenta Seleção, que é a tecla V. Vamos clicar duas vezes nele primeiro. O que quer que tenhamos tentado ir ao Illustrator para fazer isso, provavelmente não dizer que você sabe algo como ícones e coisas que o Xd é perfeito para. Vamos dar um preenchimento a isso. Na verdade, não, não tenho certeza do que eu ia dizer lá. [RISOS] Se você vai fazer coisas como traços, pode ver coisas que se alinham? Você tem que lembrar que fizemos no início do curso, havia uma maneira de dizer B, deixe-me aumentar para que você possa ver. Meio tutorial, meio me veja fazer isso. Você pode ver que você pode colocá-lo por dentro, pode haver momentos em que isso é necessário, não precisa disso no meu caso. Tenho que desenhar algumas rodas. Achei que isso poderia ser interessante, mas [RISOS] não é, grato. Sim. [RISOS] Eu realmente não achei que isso seria difícil, não é bom para as pessoas. [RISOS] Definitivamente não é. Tudo bem, então esse será meu caminhão. Vamos desenhar a caixa. Vou fazer com que ele caia nessa coisa. A coisa é com isso, quando eu estava procurando ícones de caixas, elas são todas de três dimensões e não trabalham com meu pequeno caminhão unidimensional, então eu tive que tentar descobrir uma maneira de contornar isso. Primeiro de tudo, algum tipo de traço e eu quero bordas arredondadas, vamos fazer fronteira ao redor, três. Agora você pode ver as bordas arredondadas não estão funcionando, você é como, uh, por que não está fazendo cantos mais arredondados? Tem os cantos arredondados, três não é muito, mas também você pode ver que tudo está tentando enfiá-lo por dentro, então, quando chega ao interior, ele ganha sendo afiado. O que quero dizer com isso é, fora mais pronunciado no meio. Não sei o que estava procurando, algo assim. Temos que ter fita adesiva. Para a ferramenta retângulo, vamos dar um preenchimento disso, dois desses, por favor, isso parece fita? Dois desses, por favor, segure Shift, selecione todos esses, vá no meio, comece a falar Dan [inaudível]. Você [RISOS] pega uma pequena flecha essa é pois essa é a única coisa para fazer parecer uma caixa, é se você tiver um pouco assim para cima Arrow, eu não ia desenhar o vidro quebrado, coisa frágil, mas estou usando a ferramenta Pin, faço uma pequena seta no topo, vou atiçar na parte inferior. Vou brincar, ter certeza de obter a cor certa, certifique-se de ter o tamanho certo. Esta é minha seta para cima, algo apropriado. Eu quero que eles tenham o pequeno blobby termina e eu vou agrupá-lo e quero dois deles, então eu vou dizer que você vai lá. Isso parece uma caixa agora ou tipo de caixa? Selecione ambos, segure Shift caso contrário eles fazem coisas estranhas. Segure Shift, esguei-os, aqui está. Veja esses pequenos pontos no topo aqui, vou desagrupá-los, então eu tenho a borda selecionada e, em vez da pequena borda mitered, vou dar a volta com isso todo arredondamento. Tudo bem, vou selecionar tudo, vou agrupá-lo, vou dar um nome, vou chamar essa caixa. Este aqui será meu caminhão. Gosto do caminhão? [RISOS] Eu realmente não sei. Clique duas vezes nele para entrar. Vou excluir esse ponto de ancoragem, basta selecioná-lo e excluí-lo e vou fazer uma janela maior. Não quero mais o telhado inclinado, quero camião Mack. Lá vamos nós. Tudo bem. Isso é suficiente. Você não está caminhando, então eu vou selecionar tudo, agrupá-lo, controlar G e ir camião. Que meu amigo, aquele episódio emocionante [RISOS] era eu desenhando uma caixa e todo caminhão questionável. Tudo bem, vamos animá-lo no próximo vídeo. 68. Mais animação no Adobe XD: Olá a todos. É hora de fazer alguma animação. Já fizemos animação antes. Acabamos de fazer um realmente básico no início do curso. Eu queria apresentá-lo então, mas agora temos muitas habilidades de desenho e outras habilidades , habilidades de hacking de computador. Queremos agora pegar isso e pegar o que aprendemos na animação e apenas tornar algo um pouco mais complexo ou pelo menos mais bonito. Vou comprar agora botão, comprei pronto. Isso é o que vamos fazer. Olhe para eles entrarem, olhe para ele saltando. Ele faz um pouco de rodas e sai. Vamos construir isso juntos usando muitas das técnicas que já conhecemos. Eu sei, prometi que faremos microinterações em [RISOS] um dos vídeos anteriores. Não estamos, estamos apenas fazendo animação completa no momento para aumentar nossas habilidades. Então eu sinto que é melhor fazer isso e entrar nas microinterações nos próximos vídeos do prato. [RISOS] É isso. Vamos começar com nosso caminhão doce mais uma vez. Vamos continuar. Vamos começar a animar. Primeiro passo, vou selecionar tudo porque partes dele foram bloqueadas. Vou clicar com o botão direito do mouse nele. Estranhamente você não pode desbloqueá-lo. Você pode bloquear e, em seguida, clicar com o botão direito do mouse e desbloqueá-lo para que funcione. Ou se eu desfazer, você pode ver aqui, desfazer isso. Você pode ver que muitos deles estão bloqueados. [RUÍDO] Estou no meu painel de camadas, até você. O que eu quero fazer é me livrar disso. Não consigo viver com o mapa. Você pode manter o mapa. Você pode adorar o mapa, mas acho que ele é muito distrativo para este. Vou fazer algo assim. Estou no modo protótipo, deve estar no modo de design. Aqui vamos nós. Uma boa prática para animação é que vou ter espaço suficiente porque você viu no início começa fora da tela, então eu preciso de um pouco de espaço aqui. Estou segurando o turno para que este quadro de arte se mova. Vou duplicar esta placa de arte mantendo pressionada a tecla de opção e arrastando ou a tecla Alt em um PC, copie a pasta. Ele lhe dá outro. O grande problema com a animação, e eu meio esqueço toda vez que estou fazendo isso, é que eu estou tipo, aqui eu queria começar a tela e depois passar para cá. Mas não vai funcionar porque acabou neste enorme quadro de pasteboard. Não importa o que eu faço agora, não vai animar porque não sabe mais que está neste quadro de arte. O truque com a animação é, em primeiro lugar , grupo, tudo isso funcionará exatamente na mesma velocidade, não separado. Essas coisas são objetos separados. Eles vão animar este que estou tentando dizer. Eu os chamei de caminhão e caixa e os agrupei. Isso é uma boa prática e o nome é o mesmo aqui. O truque para fazer qualquer coisa é adicionar a animação primeiro ou pelo menos a transição. Se eu tiver um protótipo. Isso importa o que eu adiciono? Não se preocupe com o que está aqui. Isso só significa que agora, quando eu arrasto isso e modo de exibição de design ou protótipo, você ainda consegue ver? [RISOS] Isso não funcionou. Modo protótipo, ele está conectado aqui. Não precisa de dois deles. Por que você não trabalha? Dê-me um segundo. Estou de volta. Você pode ver o tempo lá em cima provavelmente. [RISOS] [inaudível]. Foi um bom minuto ou assim eu indo, lembro-me de como fazê-lo. Não me lembro. Vou desfazer. Acontece com o melhor de nós. Eu descobri. O que acontece é que você precisa adicionar sua animação, mas ela precisa ser animada automaticamente se estiver apenas em transição. Posso arrastá-lo para fora do relógio. Olha, ele vai para o rodapé. Mas se eu adicionar minha animação, então protótipo e minha animação. Mas essa animação é animada automaticamente , então ela bloqueia esses caras e você pode vê-los e arrastá-los. Ele não está na área de trabalho agora ele ainda está na confirmação HIFI. Todos aprendemos alguma coisa. Vou iniciá-los fora da tela. Ele vai acabar no meio ali. Vamos dar uma prévia. Clique no cabeçalho aqui. Pré-visualização. O seu pode não fazer exatamente a mesma coisa. Mentalidade para, pode ser toque. O seu está definido como. Quero o meu depois de algum tempo e quero que ele seja capaz zero tempo para então animar automaticamente para este outro destino. Você pode decidir que quer aliviar. facilidade é provavelmente a mais legal e esta. Vai ir mais rápido no início e ir lentamente para fora. Vou mexer com isso. Vou fazer um segundo. Vamos dar uma pequena olhada. Há muita brincadeira com a flexibilização e apenas indo. Lá vai você. Sinto que ele é, me sinto bem. [RISOS] Agora este vai cair no caminhão. Bem, vou te mostrar outro truque é que vou excluir este aqui. Vou para minha visualização de design. Eu quero que ele acabe aqui. Lá vamos nós, lá. Vou copiá-lo e depois passar por aqui. É chamado de caixa. Sobre este, vou colá-lo volta exatamente no mesmo local, o que é ótimo. Ainda está indo box que vai funcionar e eu vou movê-lo para cima segurando Shift. Isso é o que eu quero fazer. Na verdade, não é isso que eu quero fazer. O que eu quero fazer é tirá-lo deste primeiro. Eu queria ser uma progressão. O que eu não quero que aconteça é que tudo aconteça ao mesmo tempo porque assista isso, eles vão usar a mesma flexibilização que é, veja isso. Funciona. Mas vou acabar fazendo eles em uma progressão. O que eu quero fazer é dizer não sobre este. Não faça isso, apenas menos isso. Adquira o hábito disso. Vamos duplicar este. Certifique-se de que, sob o protótipo, ele tem alguma conexão lembrando o que, é o que eu animai. Não se esqueça disso. O que eu quero é neste, eu queria estar acordado. Então essa coisa aqui eu quero que seja, vamos dar uma olhada, saltar finalmente. É hora de rejeição, todos podem realmente trabalhar. Vamos dar uma chance. Volte aqui, clique em “Jogar”. Ele fez isso. Há uma pausa neste? O tempo de atraso é de 0 segundos. Bounce leva um pouco de tempo para entrar em seu jeito alegre. Mas foi muito bom. Estou feliz comigo mesmo. [RISOS] Agora vamos fazer com que o caminhão se mova. Duplique-o. Tenha o hábito de entrar em Protótipo Membro. Verifique se é animado automaticamente porque eu quero que ele saia da tela e meu está voltando ao modo de design. Vai fazer um pouco de rodas. Ambas as máscaras, vou pegar as duas [RISOS] e bater fora. Espero que não acabe na área de trabalho. Além da flexibilização, vamos dar uma olhada. Ele salta. [RISOS] Não parece bom. Parece que tem um pouco de acidente. Vamos dar uma chance. Cai dentro. [RISOS] Cabeças de todos. Só vou usar o protótipo. Este, eu vou ir em vez de saltar, windup é muito bom, como usa a antecipação de que todo o movimento para trás antes que ele vá para frente. Vamos dar uma prévia. Assistindo. Bom e um pouco de atraso entre esses dois. Você depois de zero segundos, eu vou ter talvez 1,5 segundos. Outra prévia. Muito longo. Talvez apenas uma pausa de meio segundo, 0,5 segundos. A outra coisa é essa caixa. Eu quero que ele inicie aqui no modo de design, eu gostaria que fosse opacidade zero, então ele aparece do nada. Talvez façamos com que ele caia por trás disso. Você está pronto? Você pode ver que isso se resume com muito mais força? Isso é interessante porque o que acaba acontecendo é entre este e este, é um protótipo de modo entre, estou dando um segundo para o salto. Quanto mais longe ele tiver que se mover, assista isso aqui em cima. Ainda tenho um segundo para chegar até aqui. Vai ir muito mais rápido, tem que chegar aqui em um segundo e fazer isso é saltar. Assista, é muito mais rápido. Esse é o momento com que você precisará brincar. A partir daqui, eu quero que provavelmente demore cerca de dois segundos. Apenas continue brincando com isso. Você pode ver que posso fazer algum design básico, pelo menos mover as coisas enquanto estou no modo protótipo. Você não precisa. Você pode alternar entre design e protótipo. Aposto que é a opção um ficar entre os dois. Em um PC, é Alt um e dois. Se não for Alt porque eu não tenho mais um PC na minha frente, basta passar o mouse acima dele e ele lhe dirá qual é. Eu me distraí com o atalho do PC. Vamos dar uma prévia. Último, prometo. Ele entra, salta no porquê demora muito e depois desliga. Olhe para nossa pequena animação, provavelmente precisa de um pequeno carrapato de confirmação agora. Ou o botão continuar comprando ou o botão voltar para casa ou talvez logo após um certo período de tempo. Ele vai depois, use um atalho. Depois de algum tempo, você pode simplesmente arrastá-lo, basta clicar nele. Diga que, na verdade, depois de algum tempo eu quero que ele vá para a página inicial. Agora veja como isso é bagunçado. Quero marketing na página inicial, HIFI. Eu acho. Nomeie suas páginas, pessoas. Não pule e não quero que ele anime automaticamente. Eu só queria fazer a transição para essa página. Dissolva. Não quero que ele salte. Mesmo com um salto, você não vai realmente vê-lo com uma transição, não importa o que usar você faz. Você realmente não pode dizer. Eu disse da última vez, esta é a última vez. Eu não quero mudar esse quarto. 2,5 pronto, estável. Estamos de volta à página inicial. Adorável. Meus amigos, isso é uma animação, uma recapitulação de algumas dessas coisas que conhecemos. Se você vai ter algo fora da tela a qualquer momento, lembre-se de adicionar a animação primeiro. O que você tem que fazer? Qual animação de protótipo você precisa adicionar a ela? Animação automática, caso contrário, ele vai para a área de trabalho. último. Compre agora. Botão de compra. Olhe para isso, esse é o caminho, nós fizemos. [RISOS] É definitivamente isso. Está terminado. 69. Projeto do curso - Minha segunda animação: Este projeto de classe é sua segunda animação. Lembre-se que fizemos um caminho de volta com a pequena flecha. Quero que você faça outra coisa e única para o seu projeto atual. Eu fiz essa coisa de van. Você pode fazer algo semelhante. Faça um pouco de pesquisa. Procure por página de confirmação ou animação de checkout. Procure esses tipos de coisas que você pode integrar seu produto real. Acabei de fazer essa caixa antiga normal. Dependendo do seu, podem ser folhas de chá ou o que você ficou preso neste curso. Seja criativo, seja simples. Cabe a você. Você pode ser elaborado. O mínimo é três. Algo, algo, algo, mas você pode enlouquecer. Eles podem ser 20 deles. Brinque com as diferentes atenuações de animação automática. Quando terminar, grave um vídeo dele. Lembre-se em um Mac que é fácil, está lá em cima. Em um PC, é mais difícil lá. Você pode estar usando algum outro software de gravação de tela. Tudo bem, desde que você possa gravar sua animação e carregar o vídeo ou o link para ela. Faça o upload para o YouTube, Vimeo ou Behance ou algo assim e envie-nos o link. Se você não conseguiu decifrar o código de vídeo, basta fazer uma captura de tela de todas essas páginas como esta para que possamos ver o que está acontecendo, todas essas e fazer o upload disso. Certifique-se de compartilhá-lo nas tarefas e também nas mídias sociais. É uma das coisas mais interessantes de se ver é as animações de todos. Por mais simples que sejam, não se preocupe, não precisa ser incrível. Suas habilidades de desenho podem ser horríveis. Estamos aprendendo, estamos começando, está tudo bem. Compartilhá-los de qualquer maneira. Acho que é isso. Desenhe seus próprios elementos, três quadros no mínimo, crie sua própria animação e é isso. Vejo vocês no próximo vídeo a todos. 70. Interruptor para alternância com interação micro no Adobe XD: Olá a todos. Bem-vindo aos interruptores de alternância. Vamos fazer uma pequena micro interação. Vamos combinar nossas habilidades de animação e algumas coisas como estados. Lembra do estado de alternância que fizemos para este? Vamos combinar a animação e fazer um pequeno interruptor de alternância legal. É um rito de passagem como designer de UX, então sente-se, relaxe e vamos ficar todos alternados. Agora estamos basicamente combinando duas coisas diferentes que fizemos. Fizemos a opção de alternância, como este pequeno botão aqui. Lembre-se de que fizemos um estado e ele tem uma opção de alternância e vamos adicionar algumas de nossas animações que aprendemos. A diferença entre essa animação e animação que vamos fazer é que isso acontece dentro do componente. Ele não vai de prancha de arte a prancha de arte. Você precisa disso porque precisamos do tempo, enquanto a microinteração é apenas uma pequena animação que acontece dentro de um componente. Vamos construí-lo. Vamos apenas construir algo muito rápido e não é bom para começar. Não vamos nos preocupar com os pontos de design. Vamos começar a mecânica e depois faremos com que pareça bonita no final. Ferramenta retângulo. Faça os cantos externos redondos. Alguma forma de pílula, ferramenta de círculo, segure Shift, dê uma cor de preenchimento. Isso é tudo o que precisamos. Vou selecionar ambos, convertê-los em um componente, Comando K ou clique nesse botão. O que precisamos aqui é que precisamos de um estado, precisamos de outro estado, assim como fizemos antes. Fizemos a alternância, como o pequeno botão de opção que acabamos de ver, e vamos ter no estado. Tudo o que fazemos é ir, garantir que estamos ativados, clique duas vezes nele para entrar e fazer algo diferente. O que vai acontecer é que ele será padrão para a animação de animação automática e vamos dar uma chance. Na verdade, vamos apenas visualizar primeiro. Não é possível visualizar porque não está em uma prancha de arte. Vamos colocá-los em alguma coisa. Vou tornar isso maior. Construímos sobre pessoas de pranchas de arte. Aqui vamos nós. Meu comutador gigante, meu gigante. Vamos visualizar. Está aqui, assista. Legal. É uma sensação tão legal fazer coisas assim. [RISOS] trabalho. Eram formas antigas muito chatas e olhe para o que fizemos. Então é assim que fazer o interruptor de alternância. Isso é um rito de passagem. Você precisa criar esse switch de alternância como um designer de UX. Você nem precisa disso. É muito raro do que eu preciso de um interruptor de alternância além de ensinar novos designers de UX a criar uma chave de alternância. Mas é uma micro-interação muito boa, é muito bom claro o que está acontecendo. Podemos deixar isso mais claro. Então, vamos torná-lo mais micro-interação. Vamos entrar e estilizá-lo. Agora, o que é mais fácil é que você o estilize antes de transformá-lo em um componente. Faremos algo agora enquanto ele é um componente, basta ajustá-lo e então eu vou mostrar a maneira normal de fazê-lo. Vamos entrar nele. Vamos decidir em qual estado queremos estar, queremos estar ajustando esse estado ou esse estado. Vamos fazer isso primeiro. O que vamos fazer é talvez torná-lo aborrecido. Vamos fazer isso e usar a cor desligada internacional, que será vermelha desativada, algo assim. Geralmente é cinza ou vermelho. Usaremos vermelho porque parece chique. Eu claramente não gosto de vermelho. Vou para algum tipo de não vermelho. Temos este primeiro e, em seguida, no estado aqui, lembre-se, será o mesmo em ambos os lados do nosso auto animate, a menos que o alteremos. No momento, atualizamos nosso estado padrão e ele não é diferente no on , então ele ficará vermelho por aqui. Nós vamos dizer, na verdade, agora você vai ser verde. Vamos para um verde brilhante, muito brilhante. Agora vamos visualizá-lo. Você vai, botão de jogar onde você está? Ligado, desligado, ligado, desligado. Por que começou verde? Você sabe? Você faz. Você se lembra, é porque nós o deixamos. Onde quer que você deixe isso ligado, lembre-se, esse é o ponto de partida. Vamos supor que está desligado e ligá-lo para ser verde. Legal. Vamos ficar ainda mais extravagantes com a animação. Ele adicionou algumas coisas padrão e você pode não gostar. Onde você ajusta a flexibilização? Você se lembra? Onde você iria? Tenha um pensamento. Onde você iria agora se fosse deixado para ele? Vou selecioná-lo. Você vai para o Protótipo. Você pode ver esse pouco, eu não vou a lugar nenhum. Ele tem o estado Padrão, tem um toque, que é o que eu quero. É uma animação automática, o que é perfeito. Destino, vai para o estado e que tipo de flexibilização? Está aliviando. Vou entrar e sair, e vamos visualizá-lo. Vamos dar uma olhada, entrar e sair. Parece melhor na minha opinião. Isso significa que começa devagar e termina devagar e vai rápido no meio. Agora, a única coisa é que é difícil notar nessa, vamos torná-lo o louco Bounce e visualizá-lo. O que acaba acontecendo é assistir isso, e depois a parte de trás, por que não está voltando para o outro lado? Você só precisa lembrar que você tem esses dois estados. No momento, temos o estado padrão e sua animação automática com saldo mas se eu clicar em, você pode ver? Está tudo mudando. Ele está usando a facilidade de saída. Se você quiser fazer isso em ambos, lá vai você. [RISOS] antigo interruptor mecânico, parece. Em termos de estilo, agora vou dar-lhe algumas noções básicas porque quero apresentar algo. Eu também quero mostrar a você a maneira normal que eu faço isso. O que eu geralmente faria é não fazer tudo isso no estado. Você pode excluir um estado. Basta voltar para este primeiro, eu deveria ir para o Design. Ainda tenho meu estado. Ainda é um componente e ainda é mal nomeado. Vamos ter um botão de alternância. Não importa se você está estilizando antes de criar um componente, mas pouco antes de adicionar todos os estados porque torna complicado ir e editá-los todos para fazê-los corresponder porque vou fazer muitas mudanças. Estou clicando duas vezes para entrar nele. Estou segurando Shift e ampliando-o. Eu vou, o que eu quero mostrar é que você ganha pontos de bônus se fizer uma sombra interior. Tenho minha sombra interna aqui e na verdade, vou dar a ela uma cor de preenchimento do que, depois da cor da interface, uma cor antiga do Windows que entra lá. Não há regras sobre o que você pode fazer por isso. Se você estiver projetando para, digamos, telefones Android ou Apple, você está usando o sistema operacional. Muitas vezes, você não pode alterar essas opções de alternância padrão, então você pode simplesmente copiar e colar de um dos kits de interface do usuário da Apple, iOS que eles chamam ou o Google chamá-lo de material do Google. Você só vai colá-los aqui. Mas queremos fazer nossos próprios botões personalizados porque somos incríveis. Estou fazendo uma sombra interior, você pode ver lá. Isso é X e Y é o quão distante do topo e como está da direita, e B é o azul. Esta pequena opção aqui é o quão escuro é. Então, vou usar o preto, esta é a transparência. Você pode ter uma sombra interna de vermelho. Eu não quero isso. Você pode decidir como essa coisa é escura. Vou pegar assim e depois vou desfocar. Use minhas teclas de seta para mover para cima e para baixo, algo assim e se livrar da borda. Eu meio que preciso da fronteira. Este aqui, vamos adicionar uma sombra de gota também porque, por quê? Só porque. Desfocado também, talvez dois e talvez isso só precise ser um e um. Talvez um pouco mais escuro. Você pode ver, você pode mexer por um longo tempo antes de fazer o próximo estágio para tentar torná-lo mais agradável. Eu poderia fazer o meu apenas um velho como esse. Agora posso adicionar meu estado extra. Isso é bonito? Nós vamos ter nosso próprio estado e este vai ter as microinterações de ir por aqui. Vai ficar verde. Na verdade, em vez de ficar verde, podemos fazer o fundo ficar verde. Então, a cor de fundo vai ficar como uma cor positiva. Encontre um bom verde e talvez façamos isso ficar branco. Aqui está você. Lembre-se, nosso estado inicial vai estar desligado. Vamos dar uma prévia. É bom? Parece legal. Você pode ver que a coisa da sombra interna funciona de forma diferente de muito atrás. É bom ter essa coisa aberta. Eu o tenho aberto em outra tela. Você não pode ver essa tela, mas só assim quando estou projetando muito perto. Veja isso, bem, você finge que está em outra tela. Posso entrar aqui e posso começar a mexer com a sombra e ver uma versão muito distante. Melhor ainda se você tiver em seu telefone , porque então você pode tocá-lo enquanto estiver indo. A outra coisa que eu quero compartilhar com você enquanto olhamos para isso muito cedo no curso, foi Redimensionamento Responsivo. Isso não acontece quando é uma forma irregular, mas quando é um componente como este, observe isso, se eu for, na verdade é muito grande e eu o torno menor, segurando Shift e diminua a escala. O que você está fazendo? Ele faz algumas coisas estranhas. É porque isso é ativado quando é um componente. Está tentando ser chique onde você pode fazer isso. Isso é ótimo, tipo, botão de reajuste. Nós amamos até agora , mas para isso queremos dimensionar tudo proporcionalmente. Está fazendo coisas estranhas. Você pode desligá-lo, depois segurar o shift e dimensioná-lo da maneira normal. Você notará que a sombra interior que você pode ver? É permanecer o mesmo, então você terá que ajustar isso, e você pode ativar o Redimensionamento Responsivo novamente quando for pequeno e fazer seus ajustes como você fez antes. Mas isso é apenas um lembrete quando você está fazendo componentes, eles ativam esse redimensionamento responsivo. Tudo bem, alternância Suite. Vá fazer você alternar, fazer parte da comunidade de design UX. Há verificações em conferências de design para garantir que você tenha feito o interruptor de alternância, eles o verificarão na porta então certifique-se de fazer as chaves de alternância. Vou fazer você fazer um interruptor de alternância em algumas lições para sua prática de aula. pratique agora e você estará fazendo um com certeza em um pouco. Tudo bem. É isso. interruptor de alternância acabou. 71. O menu de Micro Hambúrguer, de interação: Olá você. Você se sente como um designer de UX ainda? Somos muito estranhos para este curso. Você deve começar a se sentir muito útil. Se você não está se sentindo UXy, você entra depois disso. Assista isso. É outro rito de animação de passagem. É a cruz que se transforma no menu de hambúrgueres ou ao contrário. Como o interruptor de alternância, é um rito de passagem. O mesmo que aprender o flare da lente no photoshop. Lembra quando você aprendeu isso? De qualquer forma, deixe-me mostrar como fazer isso no Adobe XD. Vamos fazer este. Só precisa de três linhas, 1, 2, 3. Não vou gastar muito tempo projetando-os. Só vou fazê-los parecer bem o suficiente. Usando a seta de tamanho para cima e para baixo e faça pequenas pontas arredondadas. Isso parece apropriado. Legal. Vamos transformá-lo em um componente. Pressione a tecla “Command” tecla “Control” em um PC e basta clicar no botão. Vamos ter dois estados. O estado padrão será o grande menu e, em seguida, esse estado de alternância será a cruz, nós o chamaremos. O que vamos fazer é deixar o estado padrão como está e a cruz, vamos clicar duas vezes para entrar. Este meio, lembre-se, não o exclua. Basta baixar a opacidade, então ela desaparece e desaparece. Este top vai ser de 45 graus. Esta parte inferior aqui será menos 45 graus. Selecione os dois. Então, aqui em cima, vamos alinhar meio e apenas verificar. Vou clicar em desligar, clicar novamente. Só vou verificar se eles se alinham , e eles se alinham. Perfeito. Vamos começar no estado padrão. Vamos dar uma peça a isso. Vamos descer aqui. Você está pronto? [RISOS]. Eu adoro esse. Vamos. Já fiz isso um bazilhão de vezes, mas ainda é emocionante. Se você fizer isso, você vai ficar animado. Dê um clique. É difícil parar de clicar. Ele nem faz nada. Um pouco mais tarde, no curso, construiremos um menu que realmente aparece em pequeno equipamento de navegação lateral que aparece no dispositivo móvel. [RISOS]. Vou parar de clicar nele e passaremos para o próximo vídeo. Na verdade, vamos fazer uma pequena coisa, apenas para reiterar. Se você quiser alterar o tempo, lembre-se de ter seu estado selecionado, lembre-se de ter seu estado selecionado, menu de hambúrguer selecionado e, em seguida, vá para protótipo e você pode clicar nos diferentes estados. Estado padrão, se você quiser que seja ou faça facilidade de entrada e saída, esse é o meu favorito. Quão rápido? 0.5, não vou praticar, não tenho certeza, na verdade. Eu definitivamente gosto de entrar e sair da facilidade. Estou fazendo isso ambos, então ambos fazem a mesma coisa. Faremos 0,5. Vamos ver como ele vai. Pré-visualização. Não sei, talvez um pouco lento, talvez volte 2.3, mas lá vai você. Menu de alternância. Clique em todos eles. É isso. Vejo você no próximo vídeo. 72. Projeto do curso 15 - interação micro: É hora de fazer suas próprias micro interações. Haverá dois que já fizemos. Se você ainda não os fez, certifique-se de fazer esses. Esse é o interruptor de alternância e o menu de hambúrguer que se transforma em uma cruz. Então o seu próprio personalizado. interruptor de alternância pode ser real, simples e básico. Eles podem ser reais, simples e básicos. Você pode estar apenas tentando voar por esse curso para continuar com ele, mas se você tiver um pouco mais de tempo, uma pequena pesquisa. Há algumas coisas muito legais que você pode fazer com um interruptor de alternância. Agora, neste caso, porque este é um curso, você pode torná-lo tão chique quanto quiser. No mundo real, você provavelmente quer que seja realmente simples e claro e não uma animação completa, mas você tem permissão total para enlouquecer com ela se tiver tempo e desejo. Olhe para os interruptores de alternância, eles são coisas muito legais por aí. Menu hambúrguer Não há muito que você possa fazer com esse. [RISOS] Tende a desenhar uma cruz. Existem diferentes maneiras de transformá-lo em uma cruz. Lá vai você. O próprio personalizado. Novamente, se você tiver tempo, eu gostaria que você tivesse uma pequena exploração com algo como, Dribbble é um lugar melhor e tem essas miniaturas realmente fáceis de pré-visualizar. Basta dar uma olhada. Você pode optar por algo bastante extravagante. Isso é quase animação e não é tão útil como uma micro interação. Ou você pode ir algo simples, como isso parece um interruptor de alternância. Olhe para aquele blobby. Como você faria isso? Há algumas coisas incríveis. Depende do seu nível de habilidade e de sua animação e habilidade. Mas dê uma olhada, encontre um que você gosta e que você possa reproduzi-lo, personalizá-lo e tentar fazê-lo funcionar dentro do seu aplicativo. Olhe para o documento e vá, o que acontece aqui? Posso atualizar ou animar como uma pequena interação? Pode ser simples, pode ser bastante extravagante. Cabe a você. Três deles, entregáveis, gravar o vídeo, se puder, faça o upload para um site de hospedagem de vídeo, compartilhe-o conosco e compartilhe nas mídias sociais. Se você não pode fazer o vídeo, como antes, basta fazer uma captura de tela. É isso. Projeto de classe, micro interações. Divirta-se. É muito excitante. Bem, eu gosto de pensar que é. [RISOS] Gosto de fazer micro interações. Espero que você também. Vá, faça isso. Vejo você no próximo vídeo. 73. Como fixar a navegação para a parte superior no Adobe XD: Olá a todos. Como você fixa as coisas para que ela não role com o resto da página? Veja a navegação na parte superior que atingimos os pergaminhos por baixo, para que possamos sempre acessar minha navegação. Faremos o mesmo pelo nosso pequeno snack-bar no fundo aqui, e eu vou te mostrar no final como desligar isso também. Está parecendo bem completo. Deixe-me mostrar-lhe como. A primeira coisa é que você precisa de uma página que realmente rola. Este aqui não é longo o suficiente para rolar para que eu possa fazê-lo funcionar, mas não poderei testá-lo visualmente. Esta página é longa o suficiente. Se eu visualizá-lo, haverá rolagem envolvida. Enquanto esta primeira página, não consigo rolar para cima e para baixo. Estou usando minha roda de rolagem, ela não funciona, então você precisa deixar sua página mais longa. Já tenho um que é mais longo, mas vá para a visualização de design com o nome da página selecionado. Apenas certifique-se de que seja longo o suficiente. Você vê essa linha pontilhada e pelo menos há alguma rolagem acontecendo. Vou trabalhar nesta página e trabalhar nessa navegação. Tudo o que você precisava para fazer o que quiser fixado, selecioná-lo, mudar para protótipo e, em seguida, ir até aqui e dizer “Posição fixa ao rolar”, e você está pronto. Vamos jogar e ver isso. Está fixado no topo. Meu problema é que minha ordem de camada não está certa. Dependendo de quem foi feito último ou de quem está no topo da ordem da camada, talvez seja necessário trazer isso para a frente. Vamos fazer isso. Com ele selecionado, usarei o atalho Command Shift colchete o tempo todo. Os colchetes são aqueles acima da tecla P. É Control Shift e colchetes que devo trazê-lo para frente e para trás. Quando clicarmos com o botão direito do mouse, envie de volta Agora eu quero que ele clique com o botão direito do mouse e leve para a frente. Vamos visualizá-lo agora. Vamos mantê-lo aqui, assistir isso. Agora ele passa por cima de tudo. Mas não é muito utilizável. É muito comum adicionar um pouco de cor de fundo. Voltar para a visualização de design. Eu poderia entrar no meu componente e editar aqui e ele aparecerá em todos eles ou pode ser separado onde eu vou ter que copiar e colá-lo, não parte do componente apenas em segundo plano, mas eu tem que copiar e colá-lo em todas as páginas. Vamos tentar esmagá-lo sob os componentes. Isso vai tornar isso um pouco mais uma dor nas costas porque já entramos nesse problema antes. Lembre-se, se tentarmos adicionar coisas aqui, haverá dor nas costas, mas veremos. Dentro do meu componente Top Nav de mais cedo, se você estiver pulando para este vídeo e não passou pelo curso, ou você está apenas pulando de volta e ele não precisa estar no componente. Estamos apenas fazendo isso porque você provavelmente precisará em algum momento. Vou enviá-lo para trás. Vou me livrar da fronteira. No momento, é apenas branco, depende de você. Vamos visualizá-lo, então vou visualizar esta página. Ele está lá, e fica no topo. Há algumas coisas que as pessoas fazem é que você possa entrar nele, pegar esse retângulo branco no fundo e adicionar uma sombra. Vou deixá-lo como padrão. Vamos visualizar isso. Vamos visualizar isso. Aqui vamos nós, temos uma sombra acima ou abaixo dela. Ou, e assim, ou você pode selecioná-lo e realmente colocar o preenchimento, apenas diminuir um pouco a opacidade para que ela esteja lá, mas você pode ver através dela. Você sabe que quero dizer? Provavelmente começa a ser um pouco mais opaco, mas lá vai você. Prenda-o no topo. Agora você pode fixar qualquer coisa. Onde está essa pequena coisa aqui? É um pouco aqui. Lembra do nosso pequeno snack-bar , nossa pequena coisa quentinha? Pode mantê-lo na parte inferior aqui. Na verdade, com ele selecionado, quem se lembra de onde você vai para obtê-lo para consertá-lo ou fixá-lo? Você se lembra? Oh, você sabe. Isso está sob protótipo. Olha, protótipo. Eles são isso, super fácil. Vamos visualizar isso e ver que tudo fica. Posso fechá-lo no momento? Parece que eu posso ou você vai querer saber como fechá-lo, não é? Você é. Faremos isso também, mas vamos sublinhar a fixação. Fixamos a parte superior e a parte inferior porque mais funcionam para mim e para você. O que você precisa lembrar é que a página precisa ser longa suficiente para rolar e você pode ter que brincar com sua ordem de camada. Então você pode adicionar uma coisa de transparência de fundo de sombra para torná-lo um pouco mais legível quando estiver rolando. Essa é a metade do caminho. Agora vamos descobrir como fazer isso fechar. Vamos desligar isso. Vamos dar uma olhada. Eu planejei fazer isso mais tarde no curso. Bem, eu ia fazer uma maneira diferente. Mas estamos aqui, é interessante e vou mostrar meu processo. Vou diminuir o zoom, pegar todas essas coisas, está ficando confuso e, em seguida, selecioná-lo. O que você acaba fazendo é que você acaba tendo duas páginas. Na verdade, não, faremos dessa maneira. Desta forma, é ainda mais inteligente, eu acho. Vamos para a visualização de design, e clicamos nisso. Vamos ter uma alternância. tudo faz parte da mesma coisa? É. É um grupo. O que vamos fazer é usar alternar algumas vezes e diminuir a opacidade. Você consegue o que vamos fazer? Vou dizer que você é um componente com um estado de alternância. Uma vez que for alternado, ele vai ser desligado. Então o fora do estado aqui, podemos recusar a coisa toda? Está ligado. Não, você não pode fazer a coisa toda, eu pensei que sim, então você precisava fazer as partes individuais. Por algum motivo, se você fizer a aparência do componente, ele o fará nesse estado e nesse estado. Você está lá. O estado, se eu ligá-lo novamente, meus pais estão de volta. Você pode ver que isso afeta os dois? Precisamos entrar no estado fora do estado. Vá para dentro disso, selecione tudo. Agora, eu cliquei duas vezes para entrar no componente. Eu pressiono “Comando A” no meu teclado porque é o atalho que eu me lembro e você pode ir para “Selecionar tudo”. É o Controle A, em um PC ou simplesmente clique nele, “Selecione tudo”. Eu entrei no meu componente, selecionei tudo e vou diminuir a opacidade de tudo dentro dele. Estranho. Você não está diminuindo a opacidade do componente invólucro externo real. Você entrou dentro dela e diminui a opacidade. Estamos ficando um pouco, não sei como se chama, Inception. Conhece esse novo filme? Você faz. Lá vamos nós. Vamos dar uma chance. Vou selecionar essa coisa invisível agora e voltar ao estado padrão, e quando for protótipo, quando for tocado, ele vai animar automaticamente. Na verdade, vamos fazer com que ele seja animado automaticamente. Só vai desaparecer, não é? Destino. Vamos para o estado fora do estado e isso vai aliviar lentamente. Você poderia acelerar isso. Vamos dar um treino para ir na mosca. Eu não planejei fazer isso aqui, mas ei, estamos aqui. Olhe para isso, role para dentro. Como você conseguiu de volta? [RISOS] Não é absolutamente [RISO] infalível. Não, é isso. Xd não está fazendo uma versão real completa, há muita falsificação acontecendo, o que o torna rápido e fácil. Não é uma quantidade enorme de configurações, não extremamente complexas. Mas há algumas coisas que você só precisa sorrir e suportar em termos de maquetes onde você não pode torná-lo absolutamente como um aplicativo, mas perto o suficiente para testar e demoing. Isso é fixar, além de como desligar essa coisinha. Para o próximo vídeo. 74. Como adicionar um modal de sobreposição popup no Adobe XD: Olá a todos. Neste vídeo, vamos fazer isso. Vamos clicar neste “Botão”, e ele terá isso como uma pequena sobreposição pop-up. Podemos fechá-lo, abri-lo novamente, fechá-lo novamente. Deixe-me mostrar como fazer isso no Adobe XD. Para começar, fiz algumas coisas. Eu edito um botão na nossa página de detalhes do produto, eu movo essa coisa porque estava no caminho e criei isso. Este será o pop-up que você viu no início é apenas um monte de retângulos , círculos e texto. Pode ser qualquer coisa, e então você precisa de algo que vai aparecer e você precisa um botão que irá ativá-lo. Essas são as duas coisas para começar. A maneira como isso funciona é, este botão ou enviando mensagens de texto qualquer coisa que o ative, ele quer chamá-lo de prancheta e sobrepor, então essa coisa aqui não vai funcionar. É só no quadro de pasteboard, apenas saindo sozinho. O que precisamos fazer é convertê-lo em uma prancheta, e nós realmente não o convertemos em uma prancheta, basta clicar em segundo plano, se você não tiver nada selecionado, pegue a ferramenta de prancheta, como fizemos antes, estamos adicionando prancheta. Acabei de clicar uma vez. Na verdade, posso arrastar uma prancheta personalizada por cima porque ela se encaixa no tamanho certo. Transformamos nosso pequeno gráfico aqui em uma prancheta. Vou nomeá-lo, vou chamar esse carrinho modal, e agora posso conectá-los. A maneira como eles os conectam, clique no seu “Botão”. Isso não é um componente, não é nada, é apenas qualquer coisa pode acioná-lo. Vou selecionar ambos e dizer, na verdade, sob protótipo, quando essa coisa é clicada, o que estamos fazendo é que estivemos sob protótipo, é que estamos arrastando coisas. Você pode clicar nisso, na verdade, basta clicar em um deles ou agrupar esses dois, então vou clicar na “Caixa Verde”. Nós os arrastamos para se conectar às páginas. Você pode ou faz isso do outro lado. Com ele selecionado, vamos adicionar uma interação, será um toque e, por padrão, ele quer ir para animar automaticamente ou fazer a transição dependendo da última coisa que você fez. A magia acontece aqui embaixo, sob sobreposição. Quando esta é uma sobreposição tocada, que prancheta? O carrinho modal um, por favor, e essa é a grande mudança. Você pode ver que isso apareceu? Não houve um segundo atrás? Agora está lá. Vamos fazer um teste como está, e vamos ver o que ele faz. Eu role meu botão para baixo. Ei, olhe para isso, e eu posso clicar nele, feche-o, olhe para isso. O mais legal sobre isso é que você realmente não precisa agir o fechamento, ele só quer reverter de volta por padrão. Mesmo que haja uma cruz lá na minha maquete, é apenas um círculo com uma cruz nele. Eu não o manipulei, você pode realmente clicar em qualquer lugar e ele simplesmente vai embora. Só funciona, mas não tive que fazer nada. Esse é o básico disso. Vai haver algumas coisas que você gosta. Ei, você tem uma sombra? Você provavelmente nem viu a sombra. Passei anos criando minha sombra, mas ela se foi, e é muito difícil porque você realmente não consegue ver o fundo. Algumas pequenas coisas que acontecem é que está aqui. Vou voltar ao modo de design, opção um em um PC. Acho que é tudo um, desculpe, pessoal do PC. O que eu quero fazer é a prancheta e a caixa branca no fundo são, na verdade, várias coisas. Há prancheta, caixa branca. Para ter a ideia, caixa branca. Veja a caixa branca e a prancheta separadas. O problema com isso, você pode ver que há minha linda sombra pequena, mas porque está acima da borda da caixa branca está sendo cortada, então você pode fazer uma de duas coisas. Você pode deixar sua caixa branca pequena, para que você possa vê-la, ou você pode pegar sua prancheta e aumentar isso, para que você possa vê-la. Agora vamos dar uma prévia, vamos voltar para esse cara, vamos até você, aqui e tem uma sombra agora. Sim, funciona. Acho que minha caixa branca é um pouco grande demais para preencher a tela. Mas sim, provavelmente precisamos de um fundo mais aborrecido. Faremos isso também. Estamos recebendo um pouco adiantado, mas ei. Uma coisa é que você pode ver adicionando essa função de sobreposição a isso, o que ela fez com essa prancheta foi realmente desativar a aparência do plano de fundo. Você pode fazer isso manualmente, mas ele faz isso automaticamente para que você possa ver a sombra, mas veja o resto desta página embaixo, em vez de ser uma grande caixa branca. O que eu queria fazer é que você viu no começo lá eu tive isso como um desvanecimento escuro no fundo. Na verdade, antes de fazermos isso, há um pouco que muitas vezes deixa meus alunos confusos, então o que te deixa confuso? Deixe-me tentar e não confundi-lo. Com ele selecionado, vou voltar para o meu modo de protótipo, e eu dou um clique a isso, é onde isso aparece. Digamos que eu coloquei logo acima de rico. Isso chegaria lá. Está logo acima disso. Se eu tiver que jogar e eu descer aqui e eu disser, ele deve aparecer logo acima do Rich. Boom. Apareceu no meio da minha coisa. Isso é estranho. O que está acontecendo? Basicamente, essa coisa aqui, essa visão geral, eu continuo dizendo visão geral, sobreposição está referenciando o que é chamado de viewport. A janela de exibição é a parte superior do documento para esta pequena linha aqui. Lembre-se de que estamos falando sobre isso durante todo o curso, então ele está olhando para o fundo lá, não o que está por baixo no conteúdo. É um posicionamento fixo. Se eu movê-lo para cá, não acima do orgânico, mas muito perto da parte inferior da página, ela estará na parte inferior da página e provavelmente estará no caminho, basta clicar nela, e você vá. Isso é o que é essa referência. Você pode fazer com que ele se encaixe em coisas reais? Não que eu saiba agora. Você tenta usar o posicionamento fixo nele, ele acaba por posicionamento fixo, o botão, não a sobreposição. Vamos entrar na parte um pouco mais inicial, onde vamos aborrecer o plano de fundo. É um truque, atualmente não é uma opção aqui para desaparecer o plano de fundo. O que fazemos é colocar isso em uma prancheta de tamanho diferente que cobre a coisa toda. No momento, minha prancheta é desse tamanho. O que eu quero fazer é movê-lo para cá, quero torná-lo do mesmo tamanho que a viewport para isso. É o quão amplo, mas vá para a minha visão de design. Cliquei na minha prancheta. Eu sei que é 375, então eu digo que agora você é 375 pasta. Quão alto deveria ser? Clique nisso, para que minha viewport esteja à altura disso, então 667 ou todos são 667. Não importa qual deles eu tirei. Você me dá uma altura de 667, e então eu digo que você vai estar no meio. Você consegue o que estou fazendo? Use minhas teclas de seta apenas para colocá-lo por cima. Preciso torná-lo menor. É uma daquelas vezes em que somos responsivos, redimensionar é realmente brilhante. Na maioria das vezes é brilhante. Você viu algumas vezes que precisa desligá-lo, mas isso foi ótimo. O que eu fiz foi lá, então eu pego a borda, e se eu apenas agarrá-la, funciona, mas se eu segurar a “tecla de opção”, ela faz isso de ambos os lados ao mesmo tempo, isso é Alt em um PC. Eu tenho isso, quero que ele fique no meio, e agora o que eu quero fazer é apenas adicionar um fundo de preto sem borda. Quero diminuir a opacidade do preenchimento, e quero que ele esteja na parte de trás. Temos uma prancheta, temos um fundo preto desbotado agora que combina com a janela de exibição. Se você fosse como, você me teve na visão geral, mas agora você me perdeu. Está tudo bem. Isso é coisa avançada. Se você está recebendo alta cinco você. Você está pronto? Espero que isso funcione. [RISOS]. Falando de um bom jogo, então vamos não funcionou [RISOS]. Eu sei por que agora, mas estava bastante confiante que iria funcionar direito. O que há de errado? O posicionamento. Nós o posicionamos quando era apenas um pequeno retângulo, então se formos para a visualização do protótipo agora, quando clicamos nisso, ele está fazendo exatamente o que dissemos em relação à viewport. Você pode ver que está se sobrepondo na parte inferior. Quero dizer que você vem ao topo. Agora vamos fazer isso. Pronto? Mesmo que você não precise clicar no 'X', você deve clicar no 'X'. Isso é legal. Adoro pequenos pop-ups, e é assim que fazê-los no Adobe XD. Tudo bem, amigos, te vejo no próximo vídeo. 75. Desire no menu de navegação móvel sobreposição no Adobe XD: Olá a todos. Neste vídeo, vamos fazer esse pequeno equipamento de navegação móvel que aparece do lado, que podemos fechar. Funciona. Você pode clicar em coisas, ir para páginas diferentes, saltar para trás, então é isso que vamos fazer neste vídeo. Pronto, defina, vá. Você já conhece todas as habilidades para fazer isso funcionar. Há apenas uma pequena configuração que precisamos mudar para que isso aconteça. O que vou fazer é apenas fazer uma versão simples, muito grosseira, coisa feia. Então vamos deixar isso bonito no final porque você está aqui para ver como essa coisa desliza e desliza. O que fazemos é, precisamos criar um menu. Isso é até onde eu vou. Você decide o quanto quer que isso deslize. Vou continuar tão longe. Você pode atravessar todo o caminho. Eu desenho com um retângulo primeiro. Mas, como em um vídeo anterior em que tem que ser uma prancheta, tem que ser uma prancheta. Você poderia começar a desenhar um motor de popa em cima daqui, e eles ficam um pouco esmagados e as coisas saltam camadas. É uma dor na bunda, então apenas desenhe com um retângulo primeiro e depois desmarque em segundo plano, então nada selecionado. Em seguida, pegue a ferramenta prancheta e, em seguida, desenhe isso na parte superior, do tamanho certo. Agora que a caixa branca, você pode mantê-la lá, você pode excluí-la. Vou deixá-lo lá porque quero fazer essa coisa toda de sombra em um segundo. Eu disse que não ia projetá-lo. Não o projete então. Tudo o que precisamos fazer agora é encontrar algo que o ative. Vou usar isso, obviamente o menu maior, então vou clicar uma vez, clicar duas vezes para selecionar, ir para o meu protótipo. Essa coisa aqui, vou adicionar uma interação, ou vou arrastá-la aqui e dizer, quando essa coisa for tocada, vá para sobreposição. Pode estar em transição ou animação automática, dependendo da última coisa que você fez. É basicamente isso, e foi o que fizemos para o nosso pop-up no último e então ele irá pop-up modal. A única diferença é que, em vez de a animação se dissolver, vamos fazer com que ela simplesmente deslize. Você consegue se lembrar? Ele desliza da direita ou desliza para a direita? Pode experimentar um, experimentar o outro. Tenho certeza que está certo. Deslize para dentro e para fora, e isso parece bom para mim. Vamos dar uma prévia e ver isso, nós fizemos isso. Esse é o básico do seu menu. Vou estilizá-lo agora e adicionar coisas a ele. Mas é basicamente isso. Você pode sair agora, vou projetar meu menu e você pode ficar por aí se quiser. Modo de design, opção um ou qualquer que seja a necessidade de verificar. Provavelmente é antigo. Eu conheço todos eles de cor, mas tenho certeza de que um é diferente em um PC quero dizer. O que vou fazer? Vou ter outra versão do logotipo clique duas vezes em cópia. Vou pegar isso emprestado. isso emprestado e pegue os dois emprestados. Você pode ver minha pequena técnica de seleção? Como eu quero isso, é muito pequeno clicar e segurar “Shift” e tudo está no caminho. Muitas vezes, o que eu vou fazer é que não vou apenas nada selecionado. Acabei de receber minha ferramenta de seleção e arraste uma caixa ao redor disso. Ele selecionará tudo o que está embaixo daquela pequena caixa azul lá. Então eu mantenho “Shift” para desmarcar. Você pode fazer isso um por um segurando Shift e clicando nas coisas que você não quer. Ou o que eu faço é segurar “Shift” e arrastar uma caixa ao redor, todas essas coisas. Isso não significa nada segurando. Quero tudo isso e, em seguida, mantenha pressionado “Shift” para desmarcar isso. Você faz isso? Não, eu faço. Vou “Alt” arrastá-lo para aqui ou a opção arrastá-lo para um PC. Vou encerrar meu menu novos itens. Nesse caso, porque eu quero que eles sejam clicáveis, não quero usar como um menu grande e longo, retornar, retornar. O que eu quero fazer é tê-los todos como sua própria pequena unidade. Este primeiro será detalhes corretos. Vou aos meus estilos de personagens doces. Provavelmente a versão em negrito. Agora tenho certeza que você ainda não pode fazer marcadores no Adobe XD, não é? Bullet, não, e isso pode aparecer no futuro aqui. Pode ser o agora, não lá. Você pode fazer alguns tipos diferentes de coisas. O que costumo fazer é em um Mac, pelo menos é “Opção, 8". Não é o que há neste teclado? “Opção, Shift, 8" lhe dará um pequeno ponto de bala. Em um PC, você pode ter que o Google qual é o atalho para criar um ponto de bala e eu uso isso porque não há opção aqui. Acho que não. Eu tenho isso e vou usar minha grade de repetição apenas para algo simples como este. Quantas opções eu tenho? Provavelmente cerca de quatro. Faça-os grandes o suficiente para que eles sejam clicáveis e o bom disso é que eu posso clicar duas vezes neles e fazê-los ir para lugares diferentes, que parte dos detalhes possa ir para lá. Lembre-se, lembrará a última coisa que você decidiu. Eu não quero que ele faça uma sobreposição agora, quero que ela faça a transição para essa página usando o slide certo? Provavelmente não se dissolva ou nenhum, apenas faça com que ele salte para lá. Agora este, vou mudar o nome e este vai ser, na verdade, aquele primeiro precisa estar em casa, não é? Ótimo. Vou dizer a página de checkout? Estou ligando para a página de checkout. Provavelmente é mais provável que seja chamado de carrinho de compras . Eu tenho uma página de contas. Na verdade, não tenho essa página feita, mas você pode ver como é fácil usar o design sob, para usar o que é isso? Aquela coisa lá, a grade de repetição. Vou dizer para se livrar de você. Você não precisa quebrá-lo para começar a trabalhar com ele. Você pode deixá-lo aqui. Preciso de uma casa no topo lá. Se eu clicar neste top e eu for copiar e colar, não está funcionando, está copiando e colando esse item individual e estes são apenas uma cópia espelhada, então não está funcionando como queremos, então, como corrigimos isso? Vou desagrupá-lo e em que podemos transformá-lo? Bem, podemos começar a trocar o pedido e adicionar novos. Lembramos que é uma pilha. Como você se transforma em uma pilha? Certifique-se de que seu componente. Em seguida, diz pilha. Agora posso selecionar nesta parte superior e copiar e colar outro. Agora estamos em casa. O que isso fez com o protótipo? Eu não sei. Nós mantivemos o primeiro. Para reajustar isso, vou pegá-lo e quebrá-lo lá e dizer que você vai lá. Agora você, meu amigo, vai lá e porque se lembra da última coisa que você fez, deve ser tudo muito bom agora. Como não consigo ver este outro, em vez de arrastá-lo, vou apenas dizer adicionar interação. Lembra-se de tudo , exceto a prancheta. Vou dizer, vá para minha página de checkout. Qual deles? Eu tenho muitos. Eu verificaria Hi-Fi, acho que não quero ir. Agora, neste curso mantive os wireframes como parte deste documento apenas para dificultar a vida. Foi o que eu fiz. Eu teria mais chances de tê-los em outro documento agora só porque eles estão causando mais problemas do que valem a pena no momento. Ele ia começar porque é fácil copiar o layout. Mas agora, eu apenas Salvar como, Arquivo, Salvar Como, faço outra cópia, uma chamada wireframe e outra chamada de alta fidelidade. Você esperou por isso. Veja como é bonito. Às vezes sei que deixo isso porque às vezes é útil ver o funcionamento de outras pessoas. Então, novamente, como a grade de repetição, significa que a pilha, eu posso fazer algumas dessas coisas legais. Quem se lembra do que eu mantenho para mexer com esse espaçamento? Não foi isso. Alguém se lembra? Você tem que entrar e simplesmente pairar acima, mas eu queria fazer tudo ao mesmo tempo. O que você segura? Você se lembrou? Você está olhando para o teclado, é turno. Você conseguiu. Vamos dar a isso uma prévia. Você, meu amigo, vou jogar e vamos clicar nele e é muito mais bonito. Como faço para que ele vá em cada página? Esse é um ponto muito bom. O que vou fazer é dizer que vou colocá-lo nesta página. Vamos ignorar sobre mudar a cor no momento. Vou entrar neste aqui e torná-lo mais escuro. Vou aqui e excluirei esse. Bem, vamos apenas excluir esse. Vou mover este aqui porque ele contém dentro daqui meu protótipo, que entra nos links de volta a isso. Contanto que eu copie e cole essa navegação enquanto estiver no modo protótipo, ela trará esse link. Vou dizer que você copia, vá para este e cola. Você não precisa de uma prancheta diferente para todos. Vamos dar um nome certo para um. Eu preciso adicionar alguns como um retângulo no fundo aqui, então “R” para retângulo, tem que estar na visualização de design, caso contrário, R não sabe, eu não sei o que eles fizeram. Eu não fiz nada. Vamos arrastar isso para fora. Vamos colocar alguns novos, vamos escolher essa cor, essa cor é opacidade de cor. Envie-o para trás, então agora isso deve funcionar. Vamos dar uma chance. Detalhes do produto. Ótimo. Você aparece, eu posso fechá-lo. Bem, você aparece, eu quero ir para os detalhes do produto, mas ainda é o menu disponível. Nós temos isso. Agora eu posso ir você se conectar a casa vai para casa. Temos isso acontecendo hoje. Eu dei uma prévia. Você testaria, muitos testes. De volta para casa. Detalhes desse produto. Esse é um menu deslizante. É muito fácil ir andando. Apenas sua visão geral, apenas certifique-se de que ela esteja em sua própria prancheta corresponda ao mesmo tamanho da sua janela de exibição e você pode vincular várias coisas ou voltar a ela. Uma vez que você tenha montado seu componente no topo aqui em termos de eu digo rig up, mas eu quero dizer, como conectar o protótipo, todas essas pequenas linhas pontilhadas aqui são uma vez que você o tem, certifique-se de copiar e cole-o no modo de protótipo, não no modo de design, porque o modo de design removerá todas essas partes no topo. É isso, menu lateral deslizante. Vou diminuir um pouco a opacidade disso. Você pode lidar com seus negócios agora. Vamos dar uma olhada nisso. Lá está você guardando por aí. Espetacular, não realmente legível. Isso é suficiente para este vídeo. Vejo você no próximo. 76. Projeto do curso 16 - Popup e navegação: Olá a todos, hora do projeto da aula. Vou fazer com que você faça um pop-up e uma navegação. A navegação é fácil. É este. Não precisa ser exatamente como o meu. Tenho um pouco de uma pesquisa. Dê uma olhada no seu telefone, apenas sites que você frequenta muito e veja como eles fizeram navegação, coisas que você gosta, coisas que você não gosta e talvez olhe para coisas como Dribbble ou Behance ou até mesmo apenas Google e procure interface do usuário do Nav móvel apenas para ver estilos diferentes e a maneira como eles estão realmente interagindo e como eles realmente funcionam ou como eles entraram na página e estilizam isso pequeno painel também. Mais agradável que os meus, velhos pontos de bala chatos. A outra parte são pop-ups. Haverá dois. Eu quero que você faça um pop-up como nós fizemos. Fizemos este. Usamos esta confirmação “Adicionar ao carrinho”. Você pode fazer isso, tudo bem. Mas também fizemos isso. Você pode ter feito isso durante o curso, então dê uma olhada em talvez fazer outra coisa como pop-up. Dê uma olhada no seu design. O que mais poderia ser algo que aparece, mas retorna para a mesma página. Pode ser algo como uma dica de ferramenta. Há um I para informações ou um pequeno ponto de interrogação onde você pode clicar nele e ele lhe dá mais informações. Exatamente o mesmo princípio. Fizemos o clique no botão “Comprar” para mostrar a confirmação do carrinho, mas você também pode fazer isso para uma dica de ferramenta. Não clique nele. [RISOS] Clicável. Você também pode pensar totalmente em qualquer outra coisa, desde que haja um pop-up clicável. Ele vai nos fazer fazer nossa inscrição modal de boletim informativo. Modal se você ainda não soube, é a palavra deles usada para uma pequena unidade, especialmente que aparece. Algo que aparece é um modal. Não te leva para outra página para fazer alguma coisa. É essa pequena tela de informações onde você pode fazer alguma coisa e potencialmente retornar para onde você está. Não é uma página separada. Ele aparece no topo de uma página existente, então modal. Quero que você faça uma inscrição no boletim informativo. Eles aparecem nas páginas ou quando você tenta sair, eles são como, hey, você gostaria que fosse embora? Então, inscreva-se no modal de newsletter ou algo como, 10% de desconto se você se inscrever no nosso boletim informativo por e-mail. Agora, a diferença entre isso e diga a dica de ferramenta ou a “Adicionar ao carrinho” é que eu quero que seja um pop-up cronometrado e você é como, ele não nos mostrou como fazer isso de propósito. O que eu quero fazer é eu acho que, em vez de apenas me seguir através dessa coisa, eu sinto que neste ponto da nossa aula ou de nossas lições, você pode ou não ter a capacidade de ver se você pode fazer isso. O que quero dizer com isso, apenas no caso de você não ter certeza, é que eu não clico em nada. Não está na torneira. É apenas algum tempo depois de um certo período de tempo, um modal pop-up aparece e é a inscrição no boletim informativo, e então você pode clicar nele para fechá-lo. Em vez de tocar, você tentará fazer com que ele carregue em um temporizador. Isso vai ser complicado. Se você não puder fazer isso, verifique os comentários. Espero que alguém possa te dar uma mão, mas acho que quero ensiná-lo a pescar em vez de lhe dar peixe. Como isso vai? Você entende a ideia. Veja se você pode fazê-lo funcionar. Se você não puder, sem drama. Você tem que fazer algum googling. Pergunte nos comentários, pergunte nos grupos se você está achando difícil, mas dê uma chance você mesmo primeiro se você conseguir descobrir. Modal pop-up cronometrado. [RUÍDO] Se você puder gravá-los, se você não puder tirar uma captura de tela e compartilhá-los nos lugares comuns, eu gostaria de ver o que você faz. Amigos, navegação feliz e criação de pop-up. Boa sorte com o pop-up cronometrado. Para o próximo vídeo. 77. O que são fluxos no Adobe XD: Olá a todos. Neste vídeo, vamos ver essas coisas que são fluxos. Tivemos uma pequena olhada no início do curso. Tínhamos o fluxo 1, mas agora vamos ter vários fluxos diferentes que podemos compartilhar. Deixe-me mostrar-lhe como fazê-los. Para fazer um fluxo, seu primeiro, vamos ver esta é minha página inicial para a minha primeira, criei um fluxo anteriormente. Clicamos neste pequeno ícone Home e o fluxo 1 apareceu e anteriormente no curso, ignoramos. Isso significa que se você não tiver nada selecionado, absolutamente nada em sua peça, é por isso que estamos estudando aqui. [RISOS] Eu tenho lidado com essa parte ignorante até aqui porque isso é um pouco mais adiante no curso de que temos o espaço em branco para descobrir quais são os fluxos. Tenho um wireframe. Em vez de chamado fluxo 1, o que vou fazer é ter certeza de que mudamos para o modo protótipo, na verdade não para o modo de compartilhamento. Lembre-se de que é a opção de comando 1, 2 ou 3 para alternar entre eles, e você não está fazendo muito isso, 1, 2, 3 e lembre-se, é PC, é Alt 1, 2, 3 e verifique isso novamente. Este é o fluxo 1. Podemos renomeá-lo. Você pode realmente nomeá-lo aqui ou aqui, não importa. Este vai ser meu wireframe. Isso significa que posso ter o mesmo documento e posso criar um link para compartilhar com as pessoas. Estou vinculando para revisão. Fizemos isso de volta mais cedo no curso lembre-se, eu tenho um link esperando. Lá vai você. Ele tem seu próprio link exclusivo. O que podemos fazer é realmente criar um diferente para isso, podemos voltar ao protótipo. Podemos clicar nisso. Posso fazer esse outro ponto de partida clicando no pequeno botão Home e depois no modo protótipo e depois compartilhe. Acho que você pode clicar no botão Home e compartilhar também. Este pode ser minha alta fidelidade. Posso criar um segundo link. Vou criar outro ali mesmo. Magic, High Fidelity uma das imagens levou cerca de um quarto do tempo para fazer o link. Agora, podemos compartilhar esse link com alguém. Temos o mesmo documento para manter nossos cérebros todos no mesmo lugar que um designer. Mas para as pessoas que o revisam, podemos compartilhá-lo com links separados. No topo aqui, você pode decidir agora vamos dizer que mudamos isso, em vez de todos, vamos convidar apenas pessoas específicas. Podemos decidir se estamos fazendo isso para o wireframe ou a versão Hi-Fi que estamos enviando. Agora temos apenas dois aqui. Você poderia ter quantos quiser. Como nos separamos em wireframe, High Fidelity, você pode acabar tendo um que seja como conceito 1, conceito 2 ou colorway 1, colorway 2 cores diferentes. Ou, neste caso, você pode ter outro em compartilhamento, você não pode fazê-lo. Você tem que fazer isso no protótipo. Aqui vamos nós. Mesmo que você não possa vê-lo, eu sei que este pequeno ícone Home, você pode vê-lo lá, só que ele não tem espaço suficiente para ser visualizado. Faça isso. Quando você chega lá, ele está lá, quando você o zoom desaparece. Vamos mais um. É muito pequeno, mas você ainda pode clicar nele. Este pode ser a minha visualização de desktop. Posso compartilhar esse link com as pessoas. Mas como meus ativos estão na mesma coisa, todo o logotipo e todas as cores, bugs e outras coisas, é mais fácil mantê-los em um documento às vezes. Às vezes você precisa dividi-los em dois documentos diferentes porque eles estão escondidos porque há muita coisa acontecendo. Isso é fluxos no Adobe XD. 78. Como compartilhar seu documento com clientes e interessados e testadores de usuários: Olá a todos. Neste vídeo, veremos compartilhar nosso documento com nossos stakeholders, para nossos clientes ou para testadores de usuários. Basicamente, a guia Compartilhar aqui abordamos um pouco mais cedo no curso, mas vamos entrar em um mergulho um pouco mais profundo e vamos passar pelas diferentes opções que o XD pode produzir e para que eles são bons. Vamos pular para dentro. Fizemos um pouco de compartilhamento logo no início. Lembre-se, compartilhamos nosso design para comentar e , portanto, vamos recuperar algumas das coisas que precisamos lembrar. Primeiro de tudo, quando você está compartilhando um link, você precisa dizer ao XD qual é a sua página inicial, que é a primeira página que alguém vai ver. Você faz isso estando no modo protótipo e clicando nesta casinha. Às vezes você não consegue ver a casa. Veja isso, diminuindo o zoom. Está diminuindo o zoom. Às vezes, ele gira em apenas uma pequena aba. O que você pode fazer é dizer que esta é na verdade minha página inicial ou clicar no nome desta. Isso vai ser isso. Quando você clica nele, já fizemos isso antes, lembre-se de quando fizemos fluxos. Mas aqui, você pode dizer, na verdade, é isso. Vai dar a ele um nome de fluxo e essa talvez seja minha animação de confirmação. Este pode ser um bom ponto em que vou compartilhar apenas esse link porque é disso que estamos falando. Essa é a única coisa que resta a fazer, é como, ei, você fez essas alterações na animação de confirmação? O que podemos fazer é apenas compartilhar esse link e, para compartilhar esse link, você clica no que quiser. Para compartilhar, vá para a guia Compartilhar e decida quais dessas configurações de visualização você criará, crie um link e é isso que você compartilhará. Você pode decidir sobre o acesso ao link. Alguém pode com o link? Obviamente, isso é menos seguro, mas ninguém vai tropeçar nele. É um link louco que ninguém vai adivinhar. Mas se você quiser ser mais seguro, você pode convidar pessoas com e-mails. Se você souber o endereço de e-mail deles, você pode convidá-los especificamente. Ou a terceira opção é para qualquer pessoa que tenha a senha, não apenas as pessoas com o endereço de e-mail certo, qualquer pessoa que tenha o link e saiba a senha. Você pode decidir qual deles você precisa. Você cria o link e o compartilha. Outra coisa interessante é digamos que este Hi-Fi será o que eu quero compartilhar, e você notará que o Hi-Fi inclui isso mais a confirmação. É como uma adição ao, mas vai começar a partir desta página. Mesmo que esses caras sejam os primeiros na fila, quem quer que os use é apenas sobreposições, lembre-se. Então essa casa é muito importante. A outra coisa é que vai me mostrar o que não está incluído. Não há conexão entre nenhum desses até meus wireframes, então eles não farão parte desse link. mesmo com essas pequenas opções para a página inicial, diferentes versões que fizemos. Você só tem que estar atento. Dê uma olhada no que está incluído, o que não está. Então, nenhuma dessas coisas da área de trabalho, nada disso aqui. O que acontece é dizer protótipo, ele está procurando por uma dessas conexões. Você pode ver as avaliações só tem uma pequena conexão com elas? Se eu pegar esse pedaço e excluí-lo acidentalmente e depois voltar para Compartilhar e clicar em “Hi-Fi ”, você pode ver que está acinzentado? Isso significa apenas que isso não está incluído. Vou clicar em “Desfazer” no meu teclado, então ele está de volta ao jogo. Criamos um link anteriormente em. Fizemos muitas alterações desde então, então vamos clicar em “Atualizar link”. Posso copiar esse link e enviá-lo por e-mail. Está me dizendo quando foi atualizado pela última vez. Estou muito claro que este é o link atualizado e posso colocá-lo em um e-mail, enviá-lo. Agora, se eu quiser enviar meus wireframes, se eu clicar nisso, é um link completamente diferente. Mesmo que eles estejam no mesmo documento, não há como se conectar entre eles, então precisamos criar atualização. Você pode ver que este foi feito há algum tempo no dia 11 de fevereiro? Preciso atualizar este link e eles são executados separadamente para as pessoas que o visualizam do outro lado. Há uma versão wireframe e uma versão de alta fidelidade, e você pode usá-la para equipes diferentes, diferentes partes do fluxo. Você pode estar enviando uma parte dele para o legal. Alguns deles podem estar indo para direitos autorais, pode ser seu gerente de estúdio. Você pode criar fluxos diferentes e saber que eles são links diferentes. Vejamos as diferentes configurações de visualização. Nós fizemos a visualização de design mais cedo e eu vou te mostrar. Eu abri todos eles porque vou passar rapidamente o que todos esses diferentes fazem, mas basicamente a mesma coisa com diferentes maneiras de visualizá-lo. A revisão do design é quando estamos saindo para a revisão de design. Isso seria ótimo para seu cliente ou qualquer uma de suas partes interessadas que possam ser qualquer pessoa que tenha participação neste projeto. Pode ser sua equipe maior. Pode estar saindo para os clientes. Pode ser apenas ir a um amigo verificar, e é o que eu mais uso. Vamos dar uma olhada nisso. Esta primeira guia aqui, ela lhe dá quase tudo. Ele lhe dá navegação básica aqui em baixo. Então, seu cliente, se ele não é muito experiente e não souber como usá-lo e pode simplesmente trabalhar o caminho, ele pode usar as teclas de seta do teclado. É bem robusto. Além disso, ele tem os comentários. Lembre-se, você pode fixar esses comentários em lugares específicos. [RUÍDO] Posso enviá-lo. A outra coisa que a visualização de design lhe dá são essas dicas. Você poderia assistir isso. Se eu clicar em qualquer lugar, você pode ver os destaques como, ei, você quer clicar nessas coisas. Essas são algumas das diferenças entre as outras. Vamos dar uma revisão de design visual. Desenvolvimento que faremos em outro vídeo porque é bastante específico ir para seu desenvolvedor web, web designer. Se você está codificando, isso é bastante específico. Mas a única diferença real visualmente é que você pode ver comentando. Se eu não tivesse meu próprio comentário lá, a única diferença é, você pode ver essa opção aqui? Podemos entrar em algum código, então não é uma grande diferença. Se você der a um designer o desenvolvimento, tudo ficará bem. Eles ainda podem fazer tudo. Há um pouco mais, e talvez este seja apenas um bom all-around. Mesmo que ele diga desenvolvedor, ele não precisa ser um desenvolvedor que o receba. [RUÍDO] Vamos dar uma olhada em outro. Este aqui pode ser uma ótima apresentação. Basicamente, ele só vai colocá-lo no modo de tela cheia. Se você enviar o link para alguém, ele será tela cheia e terá a dica. Ele se livra de todo esse lixo. É muito claro. Mesmo que possa ser você apresentá-lo, você pode usar isso para enviar aos clientes que você sabe que eles só querem vê-lo. Eles não precisam comentar e ficar confusos com tudo. É uma versão legal e limpa. Mas ele tem a dica para ajudá-los. Certifique-se de vincular todos os seus botões. [RISOS] Acho que nos levei para uma página onde nada funciona, então teste você mesmo porque não há como escapar desta página. Todas essas dicas são apenas para botões de opção aqui. Agora eu estaria voltando para o XD e indo Hi-Fi. Posso chegar a esta página. Se eu olhar para o meu protótipo, o que notei é que não tenho nenhuma dessas ferramentas de navegação funcionando. A compra funcionou. Por que não clico na rolagem antiga? Lá vai você. Isso também traz um bom ponto. Esse modo de apresentação é como todos esses links que estou mostrando que estão na minha área de trabalho. Devemos estar, se você estiver indo para um dispositivo móvel, compartilhando-os, especialmente para testes de usuários, na verdade, em um telefone. Nós ignoraríamos esses links aqui. Lembre-se de quando fizemos testes em um telefone mais cedo, isso é o que você estaria fazendo. Você estaria compartilhando o link, abrindo no aplicativo XD e se reunindo com alguém para fazer testes de usuários e apenas ver como eles interagem com o aplicativo, alguém próximo ao seu usuário perfil. Mesmo que sejam apenas colegas, amigos ou familiares que estão fazendo alguns testes básicos de usuários, faça com que eles façam no telefone porque isso é estranho quando você está tentando decidir sobre o tamanho porque eu sei que é um pouco grande. Meu monitor só o torna um pouco grande, e estou usando meu mouse e não meu dedo mindinho. Esses podem ter que ser alvos grandes ou pequenos para acertar e sei que não tenho navegação aqui em cima , mas tenho um botão. Eu estaria me certificando de entrar aqui, encontrar um que tenha a navegação nele. Este tem isso. Ainda não preparei essas duas coisas, mas lembro que posso copiá-las enquanto estivermos no modo protótipo e vá. Você exclui. Na verdade, quero tudo isso feito. Eu copio e colo. A navegação vem junto. Agora que eu fiz isso, o que eu faço? Em Compartilhar, você precisa se certificar de atualizar o link. Mesmo que você tenha apenas nos fios, não há nada fisicamente diferente nisso, o meu era. Mas mesmo que você apenas altere a lista mínima de opções, você precisa atualizar o link e enviar uma nova. Quando eu digo enviar-lhes um novo, você não precisa enviar-lhes um novo. Você atualiza o link e ele será atualizado do lado deles. Um link não precisa ser. Você não precisa enviá-los e dizer, ei, aqui está um novo link. Eles só precisarão atualizar sua página ou abri-la novamente e ela começará a funcionar. Deixe-me mostrar a você. Se eu for ao Design e entrar aqui e decidir que esse botão aqui, decidimos por algum motivo que é a cor errada e mudamos para algo realmente óbvio. Eu salvo isso. Vou para Compartilhar e tudo o que preciso fazer é atualizar o link, certifique-se de que estou no caminho certo. Você vê o padrão para wireframe Hi-Fi? Atualize o link e, em seguida, nesses modelos aqui, espere que ele faça o que ele faça o que quiser. Foi feito isso. Aqui agora, se eu clicar em “Atualizar”, quando a pessoa abrir o link novamente, observe que este botão deve atualizar. Aqui está você. Esse mesmo link não precisa ser recompartilhado. Falamos sobre o desenvolvimento de revisão de design. Estamos fazendo uma pequena apresentação. teste do usuário é basicamente a mesma coisa, exceto que não há dicas. Esses dois são exatamente os mesmos, exceto que este não tem a dica. Você não quer guiar demais seus testadores de usuários porque você quer descobrir se eles podem fazer isso por conta própria. Apresentação, esta aqui, a mesma, mas as dicas estão desativadas. Enquanto este aqui, é a mesma coisa, mas eu tenho essas dicas adoráveis. Este, sem insinuação. Incrível. Outras opções são personalizadas. Basicamente, você pode decidir qual dessas coisas você gosta. Uma tela cheia é o que acontece quando você está fazendo testes e apresentações do usuário. Mostrar pontos de acesso. Lembre-se que foi a única diferença entre o teste e a apresentação do usuário, aquela coisa pouco carnuda para ajudar as pessoas a avançar. Você pode simplesmente decidir, mostrar controles de navegação. Vamos dar uma olhada. São essas coisas no fundo aqui. Eles podem se movimentar? Ele adiciona ou remove isso. Você pode decidir se isso é útil ou não, e permitir comentários é comentar. Agora, é útil atualizar os links, mas há momentos em que eu gosto apenas criar um novo link porque quero manter essa versão antiga, como uma versão 1, versão 2. Você deve ter notado através do curso que fiz a versão 1, 2, 3, 4. Mesmo que seja brilhantemente salvo, tenho versões diferentes para mim porque não consigo detê-lo. [RISOS] Você queria apenas manter o mesmo documento. O que eu gosto de fazer é dizer que eu mande isso comentando. O que eu gosto de fazer, especialmente se eu sou o revisor, adoro poder ver quais comentários eu fiz porque às vezes vou marcar algo e dizer, ei, você pode mudar isso e isso, e minha UX designer me enviará uma versão atualizada. Não me lembro com o que tive problemas da última vez, então é difícil de alterar. A maneira de se locomover isso é digamos que enviamos isso com comentários. Atualizamos nosso link e o enviamos e quero manter essa versão. O que posso fazer é salvar o documento. Então, se eu for “Arquivo”, “Salvar como”, e eu vou criar uma nova versão, ainda vou salvá-la na nuvem. Versão 5, você pode ver aqui? link de atualização desapareceu. Se eu abrir a versão antiga, versão 4, ainda estará na medida em que estávamos há apenas um minuto, você poderá ir para Compartilhar e seu link de atualização. Esses links ficam por perto e eu posso voltar e verificar esse link e ir, esses foram os comentários. Enquanto esta nova versão, você precisa gerar novas. Você ainda tem seus fluxos como todos mapeados, mas os links serão novos. Isso faz sentido? A última coisa a ter mente é a sua janela de exibição. Falamos sobre isso algumas vezes. Selecioná-lo, Comando 3, Controle 3 em um PC para selecionar tudo isso é aqui. Lembre-se, se você tem uma página curta, você não vai vê-la. Mas assim que você tiver uma página mais longa, essa coisa aparece. Apenas certifique-se de que esteja na posição certa. Ele corresponde a todo o resto, corresponde ao documento de teste, mesmo na visualização da área de trabalho. Se você estiver fazendo uma visualização de área de trabalho, se você arrastar isso para baixo, lá está. Isso deve ser que queremos que seja. Porque se você esquecer e você se mexer porque eu fico irritado com isso. [RISOS] Eu gostaria que houvesse uma janela de exibição sem visualização. Não há no momento. Só vou movê-lo de qualquer maneira. Se você removê-lo de qualquer maneira, como eu vou movê-lo para lá para que eu possa projetar isso. Então, se você exportar isso, você acabará com isso. [RISOS] Você vai ser como se fosse um pouco pequeno. Apenas certifique-se de que esteja no lugar certo. No meu caso, eu quero que ele esteja, onde está? 667 porque é nisso que estou testando. Estou testando no meu telefone que tenho. Esse é o tamanho certo. É isso. Faremos mais enviando para um desenvolvedor no próximo vídeo. Vamos pular para lá e aprender tudo sobre isso. 79. Conversando com seu desenvolvedor no início do processo de design XD: Ei, todos. Estou fora. Estamos encravados na tela do laptop muito tempo, então estou aberto. Eu queria falar com você sobre falar com seu desenvolvedor. Haverá momentos que alguns de vocês estarão sendo designer de UX e o construtor de aplicativos da web você mesmo. Haverá muitos desenvolvedores assistindo a este curso para obter habilidades do Adobe XD. Mas a maioria de vocês será designers ou criadores que querem fazer design de UX, e você terá que começar a trabalhar com o desenvolvedor. Alguns de vocês podem ser novos nisso. É como uma palestra pip, como fazer isso porque inicialmente, eu fiz isso quando comecei, é assustador trabalhar com um desenvolvedor ou um engenheiro, dependendo do que eles chamam a si mesmos, web designer, engenheiro de desenvolvedores web. Você fez seu design, testou e agora, eles vão construí-lo. O que você não quer fazer é não querer que esta seja a primeira vez que você conversa com eles. Você quer ter tido uma discussão durante todo o caminho. Pode ser intimidante e assustador, eu sei, porque eu estava intimidado e assustado trabalhando. Entregando isso ao desenvolvedor, você é como, você envia um e-mail, pela primeira vez que conversei com a Sally, você envia para eles e espera o melhor. Isto é, sem dúvida, todos os empregos que foram muito mal, são empregos que seguiram essa linha de processo. Os trabalhos que vão muito bem são aqueles que vou descobrir quem é o desenvolvedor, se for alguém com quem estou trabalhando constantemente, como desenvolvedores com quem trabalho o tempo todo, então eu tenho relacionamento muito bom com eles. Mas digamos que seja para outro cliente e o cliente está organizando o desenvolvedor, você nem tem certeza. É para descobrir essa pessoa no início e envolvê-la. Porque o que você não quer fazer é ser você versus desenvolvedor, o que pode acontecer. O designer me deu essa coisa e eu estou tentando construí-la, e eles não sabem de nada. Você, com medo do desenvolvedor. É apenas uma má maneira de entregar esse produto para o desenvolvedor porque ele se torna você contra eles, torna-se, por que eles fizeram isso? Onde, se for cedo, há tantas vezes em um projeto em que presumi que as coisas são muito difíceis e faremos isso mais tarde. Eu conversei com meu desenvolvedor, não precisa ser uma reunião oficial, é como, ei, este é o meu primeiro wireframes, ei, este é o breve, e apenas falando sobre o que você quer fazer. É ótimo porque você é tipo, aquela coisa que você achou muito difícil e você vai fazer mais tarde, talvez na fase dois, é realmente fácil e eles são como, de jeito nenhum, essa coisa é já acontecendo deste lado, basta chamar outra coisa, ou isso é algo diferente, ou está embutido na estrutura que estou usando. Você pode obter essas coisas no início do trabalho com o cliente. O caminho oposto é às vezes, você estaria pensando, isso seria muito bom. Incrível. Isso parece fácil. Então o desenvolvedor é como, isso não é fácil. Parece fácil para você, mas a maneira que talvez a lógica, a plataforma ou a base de código que eles estão usando já não seja capaz e é um grande trabalho obtê-la. Talvez seja necessário apenas dar mais tempo para o trabalho ou empurrá-lo para a fase dois. fase dois é uma boa maneira de dizer que será feita no futuro, mas provavelmente nunca. Você não quer dizer ao cliente, isso não pode acontecer nunca. Você faz isso na fase dois, o que nunca é, mas parece melhor. Pode ser formal, acho apenas conversacional, descobrir quem é, encontrar-se com eles, porque não há maneira oficial. Vou mostrar maneiras de dar coisas para o desenvolvedor, mas não há como x, y e z. dando a uma impressora, se você é um designer gráfico, há uma maneira específica, você pode descobrir. Sangramento, corte , resolução e essas coisas, com o desenvolvedor, isso vai depender deles, eles vão querer algumas coisas específicas, definitivas. Então, muitas delas são a maneira que eles querem trabalhar e como estão construindo. Se for uma atualização para um novo site ou criar um novo site, eles precisarão de muito mais de você. Se for uma atualização para um site existente, basicamente, eles usarão seus designs como um guia visual e apenas fazendo tudo separadamente de você. Tudo o que você precisa para fornecê-los provavelmente são imagens. Isso é o que eu queria dizer é que, se você tem medo dos desenvolvedores, não se preocupe, os desenvolvedores também têm medo dos designers de UX. É o mesmo, mas do outro lado. Conversar cedo faz com que o projeto funcione 10 vezes melhor, confie em mim sobre isso. Você conversou com seu desenvolvedor e agora, é hora de dar algumas coisas a eles. Vamos pular para o XD agora e dar-lhes coisas. 80. Exportar os formatos de arquivo de imagem certos do Adobe XD: Olá a todos. Neste vídeo, vamos exportar imagens do Adobe XD, prontas para entregar ao nosso desenvolvedor. Vamos olhar para a mecânica de realmente exportar alguns dos truques e também alguns dos formatos. É por isso que este é um pouco mais longo. Nós abordaremos quando você deve usar um JPEG versus PNG versus SVG. Vamos obter todas as imagens. A primeira coisa que você deve fazer provavelmente ao exportar imagens é apenas dar uma visão geral das imagens, um PDF com apenas duas páginas. Você pode simplesmente ir para Arquivo, Exportar, Todas as Pranchetas. O problema com isso é que ele exportará tudo o que é uma prancheta. Tendo apenas um documento de referência, vou usá-lo para qualquer coisa além colocar as imagens como em você envia 400 imagens e elas dizem : “Para onde elas vão?” Você pode criar um PDF apenas para que eles possam ver onde tudo vai. Eles obviamente poderiam usar o link também. Para fazer isso, você pode selecionar apenas as páginas desejadas. Clique no nome mantenha Shift, clique naqueles que você deseja sair. Vou exportar esses quatro e vou para Arquivo, Exportar, e depois vou para Exportar Selecionado, então faremos todo o quadro de arte. A partir do formato, o PDF é muito bom, várias páginas, boa resolução e podemos clicar em Exportar. Já fiz um porque esta é a segunda vez que gravei isso. Perdi meu caminho até lá. Aqui vamos nós. Temos um PDF e podemos simplesmente enviar isso, incluir isso em nossas coisas que saem. Isso é apenas para referência, coisas que eles realmente podem estar usando. Podemos usar a mesma técnica. Esta imagem aqui, eu preciso tirá-la para o desenvolvedor. Por que isso está recebendo exportação e não esse texto. Eles vão reconstruir o texto em HTML, ou depende de como eles estão fazendo, se for um aplicativo versus um site. Eles não vão querer apresentações do seu texto. Eles não vão querer nada que você desenhou, coisas como botões. Você não vai querer essa caixa para o seu formulário porque eles usarão o código para criá-lo. Com seus botões aqui, há um botão. Estranhamente, mesmo que você tenha se esforçado muito em sua sombra, eles a construirão novamente usando o código, até mesmo a sombra. As coisas que são exportadas que são consideradas imagens são coisas que se parecem com imagens claras. Temos um monte desses em todos os lugares. As coisas que você desenhou como esses ícones. Esses ícones aqui vamos ser exportados como “imagens”. Faremos isso. Esta imagem vai sair. Para obter uma imagem, você pode simplesmente ir Exportar arquivo selecionado. Quero mostrar-lhe desta forma só porque quero realmente passar por formatos brevemente. Você pode ter que pesquisar isso um pouco mais, mas você vai lidar com um desses quatro. PDF que você provavelmente já conhece. Esse foi apenas um bom formato de documento de visão geral. Não vamos mais usar isso. JPEG versus PNG versus SVG. Quando se trata de imagens como estamos explorando agora é PNG ou JPEG. A diferença é que um PNG permite alguma transparência. Deixe-me dar uma olhada neste. Vamos ver, este tem que ser um PNG. Prefiro que seja um JPEG. Por quê? Porque JPEGs ou menores. Você pode obter excelente qualidade em tamanhos de arquivo realmente pequenos. O tamanho do arquivo é muito importante quando se trata de carregar sites. Você pode ver por que este pode ter que ser um PNG em comparação com este? arredondados. Este aqui tem cantos arredondados. Tem que haver como alguns cantos transparentes. JPEGs não deixam passar nenhuma transparência. Vamos comparar esses dois. Vou exportá-lo duas vezes. Exportação de arquivo conforme selecionado. Faremos isso como JPEG. A qualidade, falaremos sobre isso em um segundo também, mas vamos exportar este, e depois vamos exportar mais uma vez como PNG. Nós o exportamos. Só vou trazê-lo volta para mostrar a diferença. Nós vamos fazer isso talvez acabou. Vamos criar uma prancha de arte aqui. Tenho um documento grande com contraste nisso. Vou usar a importação. Vou dizer que aqui estão esses dois. Importe dois de cada vez. Você vê a diferença nas bordas? Eu conheço a qualidade. Falaremos sobre isso em um segundo. Mas você pode ver que um PNG permite essa transparência, enquanto JPEGs, mesmo sendo ótimos para imagens, eles não são ótimos para imagens onde você precisa de transparência. Se você já fez alguma máscara engraçada, ela terá que ser um PNG. Se for apenas um quadrado ou retângulo cheio , onde estamos? Este aqui, porque ele tem belas arestas afiadas, nenhuma transparência é necessária, ele vai ser um JPEG. Vamos falar sobre o tamanho que ele deveria ser. Exportação de arquivo selecionada. Decidimos que este tem que ser um JPEG. Qualidade, agora, depende do quanto você sabe sobre isso. Uma boa zona segura é de 80%, 60% provavelmente vai ficar bem também. Qualquer coisa menor do que isso, tornará o tamanho do arquivo agradável e pequeno, mas isso tornará a qualidade não muito boa. 100% é muito alto para sair em nosso caso um site. Um desses dois. Depende de quão precioso é. nosso é o produto, é o que você está tentando vender, então a melhor qualidade que você pode fazer, 80 por cento provavelmente é importante para isso. Se for apenas coisas de fundo de apoio, diga esta imagem de fundo aqui. Este aqui não precisa ser lindo e é enorme. Aquele lá seria bom em 40 ou 60%, porque está desbotado em segundo plano. Ninguém vai notar a qualidade, enquanto o produto que você está tentando comprar provavelmente precisa ser o melhor possível. Vamos também dar uma olhada em JPEG versus PNG. Você consegue ver a diferença de tamanho? JPEG, ambos são a mesma versão finalizada, exceto pela transparência. Usamos JPEGs porque eles são menores. Você pode obter a mesma qualidade, mas no nosso caso, quase metade ou um pouco mais da metade do tamanho do arquivo e do tamanho do arquivo são importantes. PNGs são incríveis, mas grandes. JPEGs são pequenos, mas não têm transparência. Estamos ignorando SVGs no momento. Quando chego aqui e vou para a exportação selecionada. Vamos fazer nosso JPEG. Falamos sobre a qualidade e o tamanho da exportação. Isso é importante. O que acaba acontecendo é se você exportá-lo do tamanho que é, vamos fazer um do tamanho que é. Eu já fiz um que estava em dois. Vamos fazer outro em um. Vou acelerar isso. Eu exportei isso três vezes, no tamanho único, nos dois tamanhos e no tamanho real. Por que você precisa de tamanhos completos? Você não precisa de quatro tamanhos. Muitas vezes, dois são o que é necessário. A razão pela qual você tem um e um dois e um quatro ou quantos quiser, é que nesse tamanho a qualidade é boa, mas se você entrar em um telefone um pouco maior, lembre-se, temos que nos adaptar para diferentes telefones. Se eu fizer isso, para este telefone e, em seguida, ele vai para um telefone maior com uma tela diferente, não parecerá muito legal. O que as pessoas fazem é fazer às vezes dois tamanhos. Isso é isso em dois símbolos. Nós adicionamos isso apenas para identificar qual é qual, porque todos eles têm o mesmo nome de arquivo. Nós sacrificamos ser mais que o dobro do tamanho do que o primeiro, mas isso nos permite alguma flexibilidade quando ele sai para dispositivos diferentes em tamanhos diferentes. É muito comum fazer às vezes dois. Às vezes, quatro é mais no design de aplicativos. Eles vão querer tamanhos ainda maiores apenas porque as resoluções em telas versus dispositivos desktop e sites, podem ser excepcionais como você pode ser no futuro. Pode ser às vezes 20 porque a resolução em telefones mais tarde ou em realidade virtual ou coisas futuras pode precisar de tamanhos diferentes, mas é por isso que você acaba exportando algo isso é o dobro do tamanho. É porque tem algum esmagamento, há um pouco disso pode ser grande, ser menor e ainda tem qualidade suficiente. Quando você está exportando, especialmente para web, web móvel ou web desktop, a expectativa é de tamanho duplo, fale com o desenvolvedor, talvez como qual tamanho você quer? Eles vão ser como, eu não me importo. Sou um desenvolvedor que está neles às vezes também. Se você acabou de enviar um tipo, você não precisa adicionar. Eu sempre imagino adicionar dois ou 2x é outra maneira comum de escrevê-lo. Você não terá que escrever nada disso. Você acabou de ir, aqui estão todas as suas imagens. Eu comecei isso, não preciso disso. Lá vai você. Isso faz sentido? JPEGs: tamanho de arquivo baixo, ótima qualidade, sem transparência e, em geral, você apenas os exporta com o dobro do tamanho necessário. Você também notará que eles tomaram o nome do que está listado aqui. Você pode não ter notado, mas isso recebeu o nome da minha imagem que eu importei. Foi daí que ele recebeu o nome. Você pode ajustar o nome aqui, você pode decidir que não é um nome muito bom. Você pode ser uma pessoa ecológica e você pode estar dizendo : “Ok, ele precisa ser chamado de chá verde barato. Eco terrível, mas é daí que ele vai obter o nome. Se eu exportar isso agora, Arquivo, Exportar, Selecionado, ele usará esse nome. Lá vai você, chá verde barato. Você pode, obviamente, mudá-lo rapidamente agora à medida que você passa. É daí que ele recebe o nome, e isso acontece cada vez mais quando você começa a fazer coisas como o próximo passo. Digamos que eu queira exportar essa imagem. Você tem que decidir ou talvez conversar com seu desenvolvedor, eles só querem essa imagem e eles vão matizá-la porque eles podem fazer isso em código ou querem que você apenas a coloque juntos para que eles tenham tem uma unidade que eles podem usar? Descubra isso ou envie os dois. Vamos enviar-lhes um sabendo que eles podem voltar e pedir um tipo diferente. O que vamos fazer agora é que são duas partes. Se eu exportar duas partes: Arquivo, Exportar, Selecionado, ele irá exportá-las para arquivos separados. Se eu for, “Aqui está você”, e exportar este, eu já tenho um lá só porque eu estava brincando com isso. Para onde esse foi? Acabei com essa imagem separada do retângulo. O retângulo não é bom para ninguém e isso pode ser exatamente o que você precisa, mas se você quiser conectá-los , eles precisam ser agrupados. Uma caixa, uma imagem, vou selecioná-los e agrupá-los. Vou usar o Comando G ou o Controle G, e é aqui que entra a nomeação. Você pode chamar esse plano de fundo e chamá-lo de -homepage. Agora você pode usar hífens ou sublinhados. Seria muito comum no web design não usar espaços reais. Você pode se safar dos espaços agora, então não importa, mas você pode apenas manter o que todos sabem, e amam, e usar hifens ou sublinhados, ou novamente talvez uma conversa para o desenvolvedor. O que você prefere? Eu prefiro hífens. A maioria dos desenvolvedores gosta de sublinhados, mas lá vai você. Se você precisar exportar coisas que são duas partes separadas, agrupe-as primeiro. Estamos explorando imagens únicas neste vídeo e você pode exportar várias imagens únicas. Vamos fazer a exportação em lote em um SQL que é um pouco mais robusto para trabalhos maiores, mas digamos que você só precisa dessa imagem. O que mais temos? Esta senhora aqui. O que você pode fazer é selecionar isso, segurar “Shift”, clicar neste. Pode ser difícil selecionar todos eles, e posso ir Shift clicar naquele. Se eu pressionar meu “Command O”, “Control O”, eu realmente tenho três coisas selecionadas e posso exportá-las, e então ele exportará três imagens separadas. Você tem que clicar em Shift em algumas coisas e você terá as três imagens separadas. O último formato de arquivo sobre o qual eu quero falar com você é SVGs. Falamos sobre SVGs anteriormente. Lembre-se de gráficos vetoriais escaláveis. Se você é da velha escola, imprima arquivos EPS ou AI. Vamos dar uma olhada nisso. Vou clicar duas vezes nisso; tem um nome terrível, então vou chamá-lo de pesquisa de ícones. Farei a mesma coisa pela minha pequena casa. Lá vai você. Novamente, eu os nomeio dessa forma para trás para ajudar apenas a encomendá-los no seu menu de arquivos, tornar mais fácil para as pessoas encontrarem. Eu tenho esses dois. Vou selecionar ambos, segurar “Shift” porque sei que posso fazer Arquivo, Exportar e Selecionado, e eu obtenho essas duas coisas. Agora, vamos usar o SVG. SVG; Gráfico vetorial escalável. Isso significa que pode ser dimensionado para cima e para baixo. Todo aquele drama que tínhamos antes indo, quão grande deveria ser? Não deve ser 2x. Que qualidade deveria ser? Tudo isso desaparece com o SVG. Por que você não pode usar SVGs para dizer que essas folhas de chá aqui? Porque os SVGs só lidarão com esses pontos de ancoragem ou gráficos vetoriais. O que quero dizer com isso é que se eu clicar duas vezes nestes eventualmente, ele é composto por essas pequenas coordenadas. Aqui está o meu. Não é feito de nada. Onde estão minhas folhas de chá? Isso é um grande. Selecione-o, Comando 3. Se eu clicar duas vezes nele, ele é realmente composto por essas coordenadas. É matemática que faz isso, então faz as duas coisas incrivelmente bem. Isso significa que é escalável porque se eu escalar qualquer coisa, é um SVG ou vetor. Escala para sempre, seja do tamanho de um planeta. É um tamanho de arquivo muito pequeno porque essa é a outra metade. SVG é super pequeno. Você arquiva, exporta , selecionado e você será um SVG e deixará os padrões aqui. Se você não tem certeza, isso está ficando bastante difícil sobre o que você provavelmente precisará saber sobre SVGs. Não vou nessa aula, mas deixo tudo no padrão. Uma coisa que você pode fazer é esse traçado de esboço. Já fizemos isso antes, onde vamos dizer isso aqui se adicionarmos um derrame a ela, e você pode decidir o que quer que ela faça. Você pode forçá-lo a descrevê-lo. Você pode dizer Outline Stroke agora e, em seguida, não importa o que você marcar na próxima opção quando estiver exportando, porque ele já estará descrito. Mas lembre-se, se eu não fizer isso, significa que quando ele aumenta, ele tem um tamanho de quatro se eu escalá-lo agora. Mesmo que seja realmente grande , ainda são quatro, e talvez seja isso que você quer porque ele corresponde outros elementos na página ou se você quiser que ele seja dimensionado proporcionalmente como em você descreve o traçado e quando ele fica maior , assim como o traço ao redor do lado de fora. Você percebe que eles chamam de traçado na exportação, mas borda aqui é para testar você. Vou ir Arquivo, vou para Exportar, Exportar Selecionado e SVGs. Deixe tudo e clique em “Exportar”. Eu deveria ter nomeado minha camada primeiro, mas posso fazê-lo aqui na hora. Isso não é mais um ícone. Vai ser meu gráfico e vai ser folhas de chá. Espero que aqui tenhamos algo como um SVG. Lembre-se que recebemos esses como ícones anteriormente. Você vê que é pequeno, 900 bytes. Não é nem um kilobyte, e é enorme. Pode ser enorme, você pode escalar isso como quiser. Haverá alguns estranhos como este aqui. Fazemos alguns recortes extravagantes aqui. Vou clicar duas vezes nele. Você pode ver aqui que eu tenho esse Grupo de Máscaras, então vamos exportar isso. Vamos para Arquivo, Exportar, Selecionado. Sabemos que poderíamos fazer isso como JPEG versus PNG. Você espera lá. Aqui estão minhas opções mal nomeadas. Você pode ver aqui que eu tenho este que está mascarado. JPEG, bom e pequeno. PNG; muito grande, mas tem a transparência que eu preciso. Mas há tudo isso, e você diz: “Eu realmente não preciso dessas coisas.” Às vezes, há algumas coisas que você tem que ir, "Bem, eu estou dentro de um componente”, então eu vou copiá-lo, colocá-lo em segundo plano, sair de tudo e colar, clicar duas vezes nele, e encontre minha pequena máscara e edite isso apenas para que, quando eu exportar isso, não seja uma imagem tão grande. Pode ser muito menor. Vamos arquivar, exportá-lo. Aqui vamos nós. Há o PNG que é muito grande, e há aquele segundo que eu exportei. Você notará que o tamanho do arquivo é significativamente menor e você é como três kilobytes. Ei, tudo conta. Esse é o formato de arquivo tudo-em-um/como exportar imagens únicas do Adobe XD. Há um longo lá. Lá vai você. Vejo você no próximo vídeo. 81. As imagens de exportação em lote de uma vez usando a marca para exportação no XD: Olá a todos. Vamos examinar algo chamado exportação em lote ou marca para exportação. O que ele nos permite fazer é dar o poder ao desenvolvedor, à pessoa que está construindo o aplicativo ou o site. Eles podem usar o link que criamos antes, esse link de desenvolvimento compartilhável, e eles podem clicar em coisas e podem dizer, será um SVG ou PNG ou JPEG. Você pode deixá-los escolher. É super útil. Deixe-me mostrar como fazer isso agora no Adobe XD. A primeira coisa é que você precisa marcá-los para essa exportação em lote. Você faz isso selecionando a coisa que deseja ser exportada e dizendo que marque a exportação, há uma pequena caixa de seleção lá, ou eu vou desfazer isso. Você pode clicar com o botão direito do mouse e dizer marca para exportação ou no painel de camadas, esse pequeno ícone ao lado dessa camada irá exportá-lo. Certifique-se de que eles estejam agrupados da maneira que você quer e que eles sejam nomeados da maneira que você quer, porque lembre-se, eles manterão esse nome e apenas trabalharão no seu caminho. Digamos, esse logotipo aqui precisa ser exportado, então eu vou fazer esse. Eu deveria nomear isso muito bem. Vamos nos certificar dos grupos certos. Eu mergulhei nesse componente porque não quero exportar a coisa toda porque seria apenas uma grande unidade. Vou entrar, pegar isso e dizer que você é exportado. Vá para dentro, pegue, não apenas o telhado, a parte. Estou ignorando os nomes no momento. Você os ignora comigo. Depois de fazer isso, você pode ir para o lote de exportação de arquivos. Isso é o que essa coisa faz. Ele exportará tudo como um lote e tudo bem. Depende de como o desenvolvedor quer fazê-lo. Às vezes, eles só querem as imagens. O problema com isso é que tenho que decidir tudo isso, exportado como PNGs. Vamos fazer isso. Vou colocá-lo na minha área de trabalho, criar uma nova pasta. Eu tenho que exportar todos eles como PNGs, todos eles como SVGs, e todos eles como JPEGs, em três passos separados e excluir os que eu não quero nos formatos, então isso não é divertido. A verdadeira razão pela qual fazemos isso é que, quando vamos compartilhar agora e vamos a este, o desenvolvimento, que ignoramos anteriormente, você precisa decidir qual processo de desenvolvimento está acontecendo. Será um site, que abriga, site móvel ou vai para iPhone ou vai para o Google Android? Ele usará as convenções de nomenclatura corretas para você. Bem, isso está indo para a web e então isso deve ser clicável. Por que isso não é clicável, Dan? Porque eu tenho o fluxo errado. Vários fluxos são úteis , mas também problemáticos. Aqui, agora posso ir para o desenvolvimento e agora posso ir para a web. Olhe. Agora, há quatro ativos que eu realmente marquei. Agora posso clicar nisso. Isso é realmente útil agora porque uma vez que eles estejam marcados, mesmo que eu faça alterações nessas folhas, ainda será parte disso para que eu possa reexportá-lo. Vamos fazer isso. Vamos clicar em “Criar link”. O que esses ativos para download fazem é quando o desenvolvedor vai até ele, então deixe-me abri-lo, agora temos esses [inaudíveis] aqui, como visualização de design. O que eu posso fazer é que você tem essa opção aqui. O que isso vai me mostrar, estamos lidando com imagens, então ignore tudo o que não é essa pasta de ativos. Vamos olhar para esses outros em um minuto. Mas você pode ver todas essas imagens adoráveis. Há meu gráfico-tea1 que eu nomeei, há meu logotipo, e há meus ícones sem nome. O mais legal que eles podem fazer é selecioná-lo e, na parte inferior, aqui eles podem decidir SVG, PDF, JPEG. Eles podem surtar porque não sabem qual formato de arquivo eles devem estar usando. Há um trabalho [inaudível] que dependerá do desenvolvedor. Pode exigir alguma educação de você. Você deve estar bem com isso dependendo do histórico deles, do quão novos eles são, mas isso lhes dá a flexibilidade, mas exige que eles entrem aqui e cliquem neles e baixe-os. Eles podem estar esperando uma grande pasta de imagens antigas, então converse com eles. Mostre-lhes isso e diga oi, você pode clicar nas coisas e olhar, eu posso baixá-lo, ou posso clicar em nada e passar pelas pastas aqui. Este aqui, este aqui. Ele lhes dá informações sobre isso. Mas eu sequer os marquei para exportação? Eu não fiz. Qual deles eu marquei para exportação? Acabei de fazer uma nesta página. Não, acabei de fazer esses ícones. Certifique-se de marcar todos eles para exportação para que eles possam passar e clicar neles e baixá-los aqui. Se você não fizer isso, eles não podem. Factóide interessante para nos acabar, é que no XD, se você fizer isso primeiro porque está em uma grade de repetição, desculpe, de volta ao Design View, clique duas vezes nele. Se eu marcar este para exportação, todos eles serão marcados para exportação. Se você não quiser que isso aconteça, você terá desagrupar a grade de repetição e marcar todas elas individualmente como quiser. Mas é uma maneira muito legal trabalhar com um desenvolvedor como o que você quer da exportação. Certifique-se de testá-lo primeiro antes de enviá-lo. Pergunte-me como eu sei porque eu enviei coisas para o desenvolvedor o tempo todo que ele está, você não as marcou para exportação. Você vai verificar essas coisas. Sim, é isso. Isso é exportação em lote ou marcado para exportação e a melhor maneira de usá-lo como por meio do compartilhamento e por meio desse desenvolvimento. Certifique-se de escolher o fluxo certo. É isso. Vamos para o próximo vídeo. 82. Como exportar código no XD para engenheiros usando especificações de design: Olá a todos. Vou mostrar a você como tirar o código do Adobe XD pronto para seu desenvolvedor para que eles possam clicar nas coisas, descobrir o espaçamento, o preenchimento, o tamanho dele, os elementos CSS, o que cores estão sendo usadas, quais fontes, texto real que está dentro das coisas, na verdade é muito fácil de fazer, então vamos fazê-lo. Primeiro, porém, fazer isso funcionar não é muito, você pode fazê-lo mal rapidamente, vamos colocar dessa forma. Vou ao meu compartilhamento, só precisamos ter certeza de que clicamos no fluxo certo e vamos Desenvolvimento, então geramos o link ou no nosso caso, atualizamos o link. Você envia esse link para um desenvolvedor e é isso que eles recebem. A grande coisa, a educação que você pode ter que dar a eles é que a única coisa real é que eles precisam saber para clicar neste pequeno ícone de especificações de visualização que lhes dará tudo o que precisam, ele vai para comentários padrão, mas para um desenvolvedor, eles provavelmente querem tudo isso. A partir daí, eles devem ser capazes de confundir seu caminho e obter tudo o que precisam. Como ele apenas coloca automaticamente coisas assim com o tamanho do meu design, minha janela de exibição, há aquelas imagens que marcamos no último vídeo, todas as cores que elas precisam. Infelizmente, eles não vão copiar, colar, codificar e colocá-lo em seu editor de código e funcionará, eles vão reconstruí-lo usando bits e partes do que você fez. Como as cores, eles terão algum CSS que define as diferentes cores, e o que eles podem fazer agora é facilmente entrar aqui e dizer que precisam dessa cor, eles apenas clicam nela, e você pode ver lá embaixo, ele disse que foi copiado, e eles entram no editor de código e simplesmente vão colar, e eles vão apenas puxar pequenos pedaços assim, eles podem ver alguns dos seus estilos de personagem. Agora, quando você está nomeando seus estilos de personagem, nós o levantamos por padrão no Adobe XD. Lembre-se que fizemos essa coisa, era a visão de design, fizemos isso. Criamos esses, onde havia H0s, H1s, H2s, e depois fomos adicionar aos estilos de caracteres, talvez gostássemos disso e apenas clicamos nesse botão. Ele se foi e, por padrão, coloque o nome da fonte ou o tamanho da fonte, que é útil e legível, mas para o desenvolvedor, mas para o desenvolvedor, eles provavelmente estão mais acostumados a obter algo como, você pode veja seus H0, H1, 2, 3, 4. Isso geralmente é chamado apenas de tag P, então depende do seu nível de capacidade de codificação e do quão útil você deseja ser para eles, então você pode passar e renomeá-los antes de sair, o mesmo com a nomeação das imagens que você vai exportar. Aqui, ele tem um bom nome, eu acho, no meu painel Layers, é chamado de chá gráfico, então vá fazer sua nomeação junto com seus estilos de personagem e isso pode ajudar. Outras coisas que são úteis para eles. Eles podem ir, ótimo, na verdade, onde está o H1. Na verdade, só está me mostrando as coisas nesta página, não meus estilos de personagens inteiros. Você notará que, se eu passar pelas páginas, as cores mudarão e os estilos de caracteres usados serão alterados. Esta cópia corporal, e o que eles vão fazer é dizer ótimo, esta é a cópia corporal, e eles poderão reconstruir com base no seu estilo aqui. O que eles também podem fazer é, você pode ver os destaques aqui? Eles podem ficar um pouco mais profundos, e podem dizer que você olha para isso. Eles podem selecionar nele e isso lhes dá o CSS. Novamente, é improvável que eles apenas o copiem literalmente daqui porque provavelmente são detalhes demais para a maioria das pessoas, mas isso lhes dá uma série da sintaxe certa que eles podem usar, especialmente para coisas como a fonte. Eles também podem decidir, se eu clicar fora daqui, eles podem decidir se estão lidando com pixels ou se vão fazer com pontos ou dps, dependendo de como eles estão funcionando. Outras coisas realmente úteis é fazer com tamanho e layout. Mais uma vez, digamos que esta aqui é minha fonte, eles funcionaram, eles sabem qual é a fonte real. Este aqui, eles podem clicar nele, ele o copia, eles podem colá-lo na versão do código, mas também podem com ele selecionado para ver até onde está. Você pode vê-lo pairando por aí? Ele me diz que 22 pixels abaixo nesta caixa, então quando eles estão construindo e fazendo o preenchimento, eles dirão que o preenchimento é 22. Se eu clicar nesta caixa primeiro e eu passar o mouse lá, é uma margem de seis em ambos os lados. Olhe para essas coisas super úteis, oh e tem uma sombra, olhe para isso, e diz a eles exatamente que tipo de sombra, quão embaçada ela é, todas coisas super úteis, em vez de eles apenas tentando adivinhar. Lá está lá, essa é a sintaxe real, eu pegaria essa coisa toda e colocaria no meu arquivo CSS porque está tudo feito e está no formato certo, super útil. Outras coisas úteis para as quais o usamos é copiar seu texto. Você provavelmente passou muito tempo com o cliente e acertou o idioma, e eles vão fazer muita seleção e descrevendo isso, copiando o texto e colando-o em seu arquivo. Além disso, eles podem descobrir que é a interação, então vamos passar para outra página. Você verá aqui se eu fechar estilos de personagens, eles serão capazes, porque digamos que se você encontrar um que seja um pouco mais emocionante. Este aqui lembre-se, é uma interação, se eu clicar em “Desligado” em interações, eles poderão ver que eu adicionei, há um botão aqui e ele vai para algo, ele diz a eles quais a página vai, e se eles clicarem nela, [RISOS] isso os leva para a próxima página, não é isso que eu quero fazer. Vamos voltar para o meu pequeno, eu quero ver uma dessas duas coisas, é, você pode ver todos esses gatilhos diferentes aqui, e se você acima deles, você pode ver isso os destaca? O que ele faz é, se você clicar nele, você pode ver? Ele dá a ambos os estados para que eles possam alternar entre os diferentes estados e continuar. Na verdade, qual é a cor de fundo disso? Volte para o estado padrão, que é a cor de fundo disso. Embora você tenha gasto muito tempo construindo esses estados diferentes, mas eles não podem vê-los se você apenas lhes der um PDF ou um JPEG, eles não conseguem ver o que isso significou fazer, o o mesmo com este. Eles não verão a interação como animada aqui, mas quando estão pegando todo o código, eles poderão alternar entre o estado padrão e o estado ativo. Eles podem interagir com ele, eles só precisam sair desse modo de desenvolvimento e voltar ao modo de comentários, então eles podem ir e subir para cima. Isso é que funciona, entre nela, clique nele e decida as cores, olhe em volta, boné, traço central, todas essas coisas boas, então havia um pouco de educação para trabalhar o desenvolvedor que pode ou não ter trabalhado com alguém tão bom quanto você no Adobe XD. Você é bom, agora estamos passando por este curso e eu prometo que tantos designers são autodidata e eles sabem o suficiente do XD, eles farão um belo trabalho, mas eles não saberão alguns dos super recursos como esses, mas você faz, então converse com seu desenvolvedor, veja o quanto eles sabem e talvez passe um pouco de tempo trabalhando com essas diferentes opções. É isso, é assim que obter todos os bits codey para seu desenvolvedor, ou se você estiver criando você mesmo como extrair todos os dados prontos para codificação. É isso, te vejo no próximo vídeo. 83. O que é um guia de estilo no Adobe XD: Todos, neste vídeo, vamos ver o que é nosso guia de estilo de design versus talvez uma folha de adesivos e um sistema de design. Vamos criar algo simples para o trabalho que fizemos até agora e vou explicar os diferentes níveis que você pode atingir quando estiver fazendo alguns desses guias de estilo. Começaremos com um guia de estilo. Um guia de estilo geralmente é apenas uma simples diretrizes de marca se você veio de marca ou design. É apenas, no meu caso, apenas um pager que eu posso dar à empresa para mostrar algumas das decisões de design que tomei para deixar claro, digamos que você seja um empreiteiro trabalhando para um maior empresa. Seus designers também precisarão de algumas regras para funcionar. Dependendo do que você fez, você pode decidir o que acontece aqui. Fiz um verdadeiro básico. Tem algumas fontes, os pesos de fonte que usei. Eu ficaria tentado agora a ir e agora que eu vejo isso, para colocar meus H1s, H2s, H3s. Onde eles estão? Bem, esses. Talvez em uma versão mais bonita só para ver o que eu decidi para as várias hierarquia de títulos. As cores, os códigos de cores que usaram. Quando se trata de cores, você verá coisas como sotaque secundário primário, talvez apenas secundário primário, talvez acabe colorindo um, cor 20 dependendo da empresa e da marca, quantas cores que você usou. Mas você verá um pouco esse sotaque primário secundário. Eu os rotulei um dois três deste lado. Aqui você verá que eu rotuei 100, 300, 500, 700. Isso também é muito comum no design, vem da codificação um pouco. Mas isso só significa que eu tenho cinco deles, o mais alto é 1.000, que é meu preto sólido e cinza 100 é minha cor mais baixa que eu posso ir. Eu pulei os 200 e 400. Por quê? Porque escolhi não usar uma grande quantidade deles, mas isso me dá alguma flexibilidade. Se eu decidir que preciso de algo aqui. Preciso de algo que não seja exatamente isso, mas não é bem isso, tenho 800 que eu poderia usar. Você verá isso por aí. Não há nada de especial nisso além uma convenção de nomenclatura comum com, você pode ter visto isso em fontes, especialmente os brancos. Você pode ter Futura 100, que é a versão light, e a 900, que é a versão preta. Você verá os dois. Eu não os misturaria. Acabei de colocá-los aqui [RISOS] para ajudá-lo. Este pode ser 300, 500, 700, me dando espaço para algo mais leve e algo mais escuro potencialmente, mas 1,2,3 está bem também. Aqui você pode decidir como se estivéssemos encarregados do logotipo e quando digo logotipo, eles solicitam que acabamos de digitá-lo. Mas você pode estar decidindo coisas como largura mínima, o espaço livre ao redor dela. Quão perto esses outros botões podem chegar, decisões que você tomou? Em que cores ele será usado, o que parece contra branco versus escuro. Quando você tiver feito a versão light. O que parece contra o escuro? Tem que ser maior? Esses tipos de decisões de design. Também incluí o resumo e digitei meu fluxo de usuário para torná-lo chique. Coloque-o em caixas. [RISOS] Eu fiz laranja. Mas vamos dar uma olhada em alguns outros níveis. Não há regra sobre o quanto você tem que fazer. Vai depender do trabalho, do orçamento que eles têm, quanto trabalho você colocou nele e qual era sua função. Se sua função fosse apenas esse fluxo de tarefa aqui, talvez você não tenha feito nenhum design, portanto, nenhum guia de estilo é necessário. Você pode ter apenas um documento explicando seus pensamentos sobre o fluxo. Como vamos a esses lugares e se você tomou mais decisões de interface do usuário sobre cores semelhantes ou quando usar os negritos nesta configuração específica. Seu guia de estilo pode ser muito descritivo dos modelos que você criou ou da ordem em que eles são entregues ao usuário. Estou balbuciando. Vamos dar uma olhada em alguns dos outros. Acabei de me meter em problemas e digitei um guia de estilo. Você pode ver que há apenas alguns, viu isso? Isso é lindo, além do que eu tenho. Este fundo, gráficos, há um desbotado ainda mais sobre ele. É muito bonito, é um produto de design por si só. Se for um projeto grande e você também está fazendo muito do trabalho de design, algo assim pode ser super importante para entregar ao cliente. Isso mostra um compromisso com o design que você fez em vez disso, que é exatamente como aqui está. Aqui está um pouco em uma página. Você pode ver, vamos dar uma olhada em outros. Algumas delas são o que você chamaria de diretrizes de marca, mais para impressão. Este aqui. Estamos chegando perto, olhe para ele. Veja, este é o mesmo mas eles acabaram com a página. Parece legal. Aqui está em um laptop. Vou fazer com que você faça um desses porque não há nada técnico que você precise aprender sobre isso. É mais para obter todas as suas informações em uma página. Mas em termos deste curso, trata-se de construir algo para o seu portfólio. Faça isso, mas também simule em um laptop. Faça algo bom com ele. Você pode ver aqui, este aqui não é uma grande quantidade de conteúdo, mas veja como é bonito. Eu adoro isso. Você pode decidir em que nível você vai ir. Mas dê uma olhada e, assim como não há regra absoluta sobre o quanto deve entrar em seus guias de estilo. Onde você vai do guia de estilo? Desculpe, mais um olhar para ele juntos. Digamos, é interessante a maneira as cores ficam como eu fui para isso por cima, cegando coisas porque é isso que eu sempre faço, mas elas definiram suas cores de forma diferente. Eles foram para a escala de cinza completa no fundo aqui, eles os pegaram. Saiba que você não consegue lê-lo lá, mas é 100, 200, 300 usando todas as cores cinza. Caras loucos. Aqui, você pode ver que eles colocaram lá fora atingindo 1,2,3,4,5. Outra coisa que você pode fazer é dizer que essa fonte, você sabe onde ela está, mas você sabe que o cliente não vai e eles vão enviar um e-mail para você no momento. O que você pode fazer é vincular essas coisas. Esta é uma coisa técnica que não abordamos é, vamos aqui, vamos para o protótipo. Este é um protótipo estranho. Vamos adicionar interação quando ela for tocada. Não para transição, não ordem animada. Nós vamos ir, não sobrepor, fizemos isso também. Vamos para o hiperlink e, em seguida, você pode digitá-lo aqui e você pode ir para onde quer que tenha essa fonte. Recebemos as nossas fontes lembrem-se, Google Fonts e Adobe para que você possa vincular para onde quer que que as pessoas possam vinculá-las para que elas cliquem e baixem. Você pode ter que adicionar um pouco de notação lá para que eles possam baixá-lo, mas isso é uma coisa que você pode fazer para ajudar a conectar algumas dessas peças. Eles podem ser imagens que você usou ou talvez repositório para todos os diferentes tamanhos de logotipo que você criou. Você pode adicionar um link a ele. Existem diferentes níveis. Guia de estilo não há regras específicas, mas muitas vezes é informativo, enquanto uma folha de adesivos é outro termo você provavelmente deveria, bem, estou apresentando a você agora e é menos peça de design para mostrar a todos o que está acontecendo e está apenas colocando tudo em uma página. A folha de adesivos, é um bom exemplo de uma folha de adesivos. É tudo definido. Não há explicações. É só um grande e velho, muitas vezes uma folha de adesivos pode ser apenas um documento XD. Você pode simplesmente jogar tudo porque no momento muitos dos nossos botões estão escondidos em um componente que alguém que não conhece XD ou talvez esteja usando um sistema de design de interface do usuário diferente. Eu posso pegar isso e posso colocar todos os botões diferentes, todas as cores diferentes, rotulá-los e rotular isso. Isso é primário, é o secundário, que é meu botão Cancelar. Basta arrastar todas essas peças e começar a rotulá-las. Mesmo assim, você não precisa rotulá-los. É mais sobre expor todas as diferentes opções que alguém pode ver. Isso seria uma folha de adesivos. Um pouco como um guia de estilo, mas mais como jogar todos eles na página. Eles desfocam um pouco as linhas. Alguns deles que estou olhando aqui são um pouco pegajosos. Essa é definitivamente uma boa folha de adesivos na minha opinião. Este aqui começou a entrar em um pouco de ambos, um guia de estilo, muito bonito, de marca alta, mas tudo está lá fora também. Então, um pouco híbrido. Agora, onde você vai daqui? Depois de um guia de estilo e uma folha de adesivos, você acaba no que é chamado de sistema de design. O que eu mostrei agora não é um sistema de design. Um sistema de design é enorme. É uma maneira em que alguém, muitas pessoas podem todos. Vou ficar com este. Este tem animação. Esses são todos os sistemas de design que eu saí e retirei. Basicamente, o que eles são são como diretrizes de marca gigantescas que explicam não apenas coisas como o botão deve ser, mas também por que estamos fazendo as coisas. Está comunicando coisas como visão e missão. Ele terá informações sobre acessibilidade, terá coisas que você costumava fazer, e isso é o que não fazemos mais. É um projeto enorme. Nunca fiz um sistema de design completo antes. Eu trabalhei dentro deles e por que eles são bons é se eu comecei a fazer algum trabalho para a Shopify para uma tarefa quando eles disseram: “Ei, você pode fazer isso?” Eu poderia trabalhar meu caminho através disso, entender o que estamos fazendo, quais cores estão sendo usadas e encontrar todos os elementos que eu preciso para fazê-lo. Não haverá nada que eu realmente tenha que tomar ou tentar tomar uma decisão, porque haverá uma compreensão disso aqui. São projetos enormes e grandes para a Shopify construir. Shopify faça isso, eles me dão um nome como Polaris. Isso significa apenas que há dezenas de milhares de funcionários em todos os diferentes países podem compartilhar o mesmo sistema de design. [RISOS] Na verdade, tenho um botão para fazer e não tenho certeza de que tipo. Posso passar e dizer, aqui estão alguns exemplos de seus botões. Posso vê-los funcionando. Vamos dar uma olhada. Quais são os botões finos? Olha, há uma variante fina. Posso encontrá-lo. Eles até me mostraram isso é o que a versão web versus Android versus iOS. São grandes coisas grandes. Vamos dar uma olhada no que eles estão fazendo pelos formulários. Se eu tiver que projetar um formulário, não vou entrar no XD e apenas arrastá-lo para fora aleatoriamente indo onde talvez cantos arredondados, talvez não cantos arredondados. Haverá regras muito claras e específicas sobre as coisas reais, mas também havia muito a ver com a compreensão de quem é seu cliente, quais são seus valores, por que somos projetando essas coisas. Design de material é o que o Google usa para o sistema Android. É um pouco difícil de navegar, mas acho isso realmente útil ao projetar aplicativos. Você pode ter muitas coisas aqui. Eles não têm documentos do XD que você pode baixar, mas vamos dar uma olhada nos ícones deles. Só me perguntando por aí agora, mas eles explicarão como eles obtiveram muitas de suas escolhas de design. Olhe para isso. Você até consegue ver como eles chegaram a isso. Olhe para isso. Olhe para a navegação. Você entende a ideia. São projetos grandes, grandes e grandes. Estamos fazendo um guia de estilo. Saiba que você pode fazer guias de estilo, uma folha de adesivos, em algum lugar intermediário e você pode estar trabalhando a partir de um sistema de design se uma empresa tiver uma, ou você pode estar criando um, o que você pode fazer um dia, muito em breve. O outro que eu tirei foi a Salesforce. Não tenho certeza do porquê. Só se você quiser criar um gráfico no Salesforce, essas são as regras, essas são coisas para não fazer. Lá vai você. Espero que tenha sido interessante. Introduziu alguns pequenos termos, mas é isso. No próximo vídeo. 84. Projeto do curso 17 - Design final: Holy Moly, é o último projeto de classe. É chamado de design final, razoavelmente grande. É principalmente para finalizar seu design móvel, criar uma versão para desktop e um guia de estilo. Faça alguns testes com seu design móvel e descubra o que você deixou de fora. Este é um curso. Acabamos ignorar bits e deixamos alguns pedacinhos. Passe pelo ED, brinque com ele no seu telefone e veja se há alguma coisa que está faltando. Coisas que não funcionam, não temos uma barra de pesquisa. Talvez você desenhe algo que apareça, há uma pequena opção de pesquisa. Talvez se livre da pesquisa e você adicione outra coisa. Talvez defina o botão Conta, passe e adicione tudo o que está faltando veja se você pode traduzi-lo em uma versão para desktop. Eles deveriam usar muitos dos mesmos elementos de design, mas havia um formato diferente. É um projeto divertido e complicado. Acho mais fácil começar com desktop e passar para o celular depois. Mas em nosso projeto aqui, sabíamos pelo nosso cliente e nossa persona que ele seria usado principalmente em dispositivos móveis. Começamos a projetar com dispositivos móveis. Se você sabe que é o oposto e a maior parte do negócio para a empresa é feita através do site, e você projeta isso primeiro e depois o traduz para este aqui. Quero que você faça três páginas, a página inicial, a página do produto e a página de checkout. Eles podem ser relativamente simples. Não quero que você recrie todo o design, use os elementos da versão móvel e prepare-os para desktop. Você pode ter que voltar e assistir ao vídeo, lembre-se de quando fizemos coisas como o layout e fazer isso funcionar novamente para que você tenha alguma consistência aqui. Decida o quanto você quer fazer isso e você não pode se safar de torná-lo um site mais estreito, se você está achando difícil esticar o que é um design bastante simples? Limite o site caso ele não esteja tentando manchá-lo e parece um pouco solitário e perdido e, em seguida, quero que você faça um guia de estilo. Pode ser super simples, mais simples que o meu, se for possível, e desligá-los. Onde está o meu, Comando 0, Controle 0, algo assim. Pode ser algo como uma folha de adesivos também. Puxe alguns dos botões. Estou feliz por ser uma folha de adesivos ou um guia de estilo ou algo intermediário. Porque lembre-se agora que isso é algo que pode ser realmente ótimo para o seu portfólio. Você tem sua própria empresa, tem suas próprias cores e temas, tem seu próprio usuário exclusivo. Pode ser a primeira peça seu projeto UX, se você for novo. Então, quando você fizer isso, eu gosto de ver capturas de tela do seu celular acabado, seu desktop finalizado e seu guia de estilo. Faça-os em instantâneos separados para que possamos vê-los bem, enviá-los para as tarefas, mas também compartilhá-los nas mídias sociais. Adoro ver onde você terminou. Peça feedback se você quiser, do grupo, especialmente esses grupos aqui são mais úteis para esse feedback. Isso é um pouco mais uma maneira de postar, gostar, compartilhar coisas do tipo. Esse é o seu projeto de aula final para o curso. Acomode-se, faça isso e vamos pular para a próxima seção, a última seção. 85. O que acontece depois do Adobe XD Essentials: Whoa, onde, onde está o fim? Quer dizer que você estava aqui, você conseguiu. Espero que você esteja sentado lá muito orgulhoso de si mesmo, bastante presunçoso. Todo mundo está assistindo Netflix e você acabou terminar o curso longo ômega, conteúdo emocionante. Então, sim, você deveria estar muito orgulhoso de si mesmo. Não permita que as pessoas iniciem os cursos e menos ainda os concluam tão bem que você tem o que fazer a seguir. E o que fazer a seguir seria potencialmente se juntar a mim em outro curso. O que seria útil para você depois do XD Essentials, o que você está fazendo? Agora. O próximo passo pode ser se você quiser entender o código um pouco mais. Mesmo que você queira criar seus próprios sites ou talvez apenas entender o papel do desenvolvedor. Isso realmente vai te ajudar, ok? essencial da Web responsivo pode ser um bom próximo passo para isso. E vamos sair desse curso depois, assim como depois. Fundamentos do Xd, é se você quiser realmente começar a colocá-lo em prática sem usar código. Portanto, não codifique, faça algo como Webflow ou Elementor, que é como um construtor de sites WordPress. Estou fazendo cursos sobre os dois caracol em breve. O que estou fazendo depois desse layout agora, eu não sei, talvez seja uma garota, mas de outra forma, maneira responsável do essencial. E Webflow ou Elemental, que é como um curso sem código. E eu estarei fazendo no XD Advanced eventualmente também. Ok, eu vou seguir em frente para fazer o fluxo de vento no Elementor em seguida, e eu vou voltar para XD para fazer o avançado. Portanto, fique de olho nos outros cursos que você poderia fazer. E eu tenho um curso de Photoshop, Photoshop, fundamentos do Illustrator e avançado. Não tenho certeza de onde eu disse que há muito tempo porque acho que disse o essencial do Photoshop Illustrator. Não é o que eu quero dizer. Há um Photoshop, Illustrator, InDesign, After Effects, Premier Pro. E eu tenho muitos cursos e muitas vezes há um essencial e avançado em todos eles. Portanto, há outros cursos que podem estar prontos para sua visualização. Prazer. Gostaria de agradecer aos meus editores, apenas animais e Taylor Coleman. Eles fazem muito trabalho, tipo de pós-MI gravando-os. Então, obrigado por esses caras. E muito obrigado a Stephen Butler e seus assistentes de ensino. Você pode ter esbarrado com ele ou alguém e sua equipe ao longo deste curso pode ajudá-lo com respostas e perguntas. E muito obrigado por esses caras, pela ajuda. Além disso, se você gostou deste curso, deixe um comentário. E também se você puder pensar uma maneira de se referir a outras pessoas, contando a elas como foi ótimo. De qualquer forma que você saiba, eu agradeceria isso também. Quanto mais pessoas puderem ver meus cursos, mais cursos eu posso fazer. Além disso, certifique-se de me seguir nas redes sociais. Já passou por todo o curso, mas aqui estão eles de novo, certifique-se de se juntar a mim e a todos esses. E por último, vamos falar sobre nosso designer de UX de interface do usuário ainda, porque isso pode ser bastante assustador porque isso pode ser bastante assustador pendurar essa telha, pendurar essa saída para dizer, sim, eu sou um designer de UX, estou disponível para o trabalho. Não há papelada oficial. Eu ainda me preocupo que alguém bata na minha porta e diga, Ei, você se chama um designer de UX. Mostre-me, mostre-me o certificado. Você tem todo o grau que você tem todo o selo oficial de aprovação. Não há nenhum. É mais uma mudança de mentalidade dizer que sim, agora estou me chamando de designer de UX e pode ser difícil. Mas saiba que existem níveis. Você pode ser um designer júnior de experiência do usuário. Você pode ser um designer de UX terrível, ruim, apenas começando, o que quer que o ajude na sua cabeça, meio que abraçá-lo. É tudo uma questão de realmente curtir, querer saber mais. E agora é o começo da nossa jornada. Você já deve se chamar designer de experiência do usuário, isso é legal. Mas muitos de nós sofrem da síndrome do impostor. Quando está tudo bem? Muitas pessoas esperam até conseguirem seu primeiro show e depois se chamam de designer de UX. Mas eu lhe dou permissão para começar a se chamar de designer de UX a partir de agora, porque é uma atitude é que você não sabe tudo ainda, mas tudo bem. Você está partindo em sua jornada como designer de experiência do usuário. Que meus amigos vão ser isso. Espero que tenham gostado do curso. Eu realmente amo e estou fazendo isso. Ok, eu vou fazer uma longa pausa agora. Você deveria realmente trabalhar em seus diferentes projetos, se ainda não os enviou. Sim, esse é o fim do curso. Como você acabou acenando? E então nós desbotamos para preto. Então, o que vamos fazer neste de qualquer maneira, porque não consigo pensar em mais nada para fazer. É o fim do curso. Não, voltando, espero vê-lo em outro curso. Tudo bem, acenando para preto, banco de dados. Eles se foram?