Design de apresentação com o Adobe Xd

1. Introdução ao design de apresentação: Você ainda faz apresentações no PowerPoint ou no Keynote? Você já pensou em usar a etapa do Adobe XD? Sou Martin. Tenho mais de 20 anos de experiência como designer gráfico, ilustrador e instrutor certificado pela Adobe. Eu trabalhei com empresas como a BBC. Eles precisam do Google, da ikea e não posso esperar para compartilhar minhas melhores práticas com você. Este é um curso prático simplificado com foco em um projeto de design da vida real. Eu vou guiá-lo por tudo passo a passo e você receberá todos os arquivos de exercícios para que você possa acompanhar , caso prefira não me copiar. Você também pode seguir meu fluxo de trabalho usando ativos alternativos fornecidos. Crie algo completamente único que você pode mostrar em seu portfólio criativo. Tenho certeza que este curso irá inspirá-lo a criar algo incrível. Vou orientá-lo no meu processo de criação de uma apresentação interativa, o Adobe XD. Começaremos o projeto criando a navegação principal, alguns componentes interativos e atribuímos gatilhos de atalho de teclado a eles. Também adicionaremos o menu fixo usando os links de estado e âncora do componente. Além de todas as coisas técnicas, também abordaremos algumas importantes teorias de design gráfico que você poderá aplicar em qualquer um de seus futuros projetos criativos. Você pode participar deste curso sem nenhum conhecimento prévio em design gráfico, ilustração ou aplicativos da Adobe. Mas, para concluir o projeto, você precisará acessar a Adobe Creative Cloud e a um computador desktop ou laptop, mas agora é hora de começar a criar. Então, verei você na próxima lição. 2. Principais interações: Então, aqui estamos no Adobe XD e, como você pode ver, já tenho alguns slides preparados. Temos nosso slide inicial principal aqui no topo. E então temos esses três slides adicionais abaixo. Mas primeiro, vamos apenas construir as principais interações. Então, a partir desta primeira tipografia de componentes, eu gostaria de passar para esta próxima prancha de arte. Então, estou usando o pequeno sinal de mais e arraste a linha para fora. A propósito, estou no modo protótipo. Então, é quando você pode configurar essas interações. E vou simplesmente usar o gatilho para ser grampeado e a transição que posso mudar para outra coisa mais tarde. Mas, por enquanto, estou feliz com a forma como ela é configurada por padrão. Agora vou fazer o mesmo com a teoria das cores. Vou arrastar isso aqui e , em seguida, a composição deve ir para lá. Agora, observe que a composição é um pouco menor que essas outras. E isso é porque ainda não configurei isso exatamente da mesma maneira. Então deixe-me mostrar-lhe antes de tudo como isso parece quando estamos testando. Então, para reproduzir a animação ou vê-la funcionando protótipo em ação, vou pressionar Command ou Control Enter. Então isso abre essa visualização de apresentação. E aqui posso mostrar que esses dois elementos eu já construí como componentes com efeitos de foco. E, como você pode ver, já existe uma animação automática aplicada. Não se preocupe, porque vou mostrar exatamente como fazer isso neste terceiro botão. Mas agora, como adicionamos as interações, também posso simplesmente clicar nela já. E como você pode ver, passamos para o próximo slide. E, a propósito, esse slide é mais longo, então ele automaticamente tem a função de rolagem embutida nele também, o que eu adoro. Agora, ainda não temos os botões traseiros conectados ao slide principal original. Então, vamos fazer isso antes de esquecermos, vou me mudar para cá, selecionar aquela pequena seta e arrastá-la de volta para cá. E o bom é que porque eu tenho essa seta como um componente e uso o mesmo componente nessas outras páginas. Quando eu os seleciono, observe que eles já têm essa interação adicionada. Então, não precisei repetir essas etapas. Então, vamos testar isso novamente. Volto aqui, vou à tipografia, rolo um pouco, e depois vamos voltar, depois entrar na teoria das cores. Também posso me movimentar e funciona perfeitamente. 3. Criação do efeito hover: Agora é hora de criar esse efeito de passar o mouse neste terceiro botão aqui. Então, antes de tudo, voltarei para o modo de design e aproximarei desta página Comando ou Controle três, é a maneira como você pode ampliar em uma placa de arte específica. E mostrarei que esses dois aqui são criados como componentes, incluindo o texto na parte inferior. Também edito dois guias na parte inferior, o que me ajudará a criar a animação. Porque observe quando eu mudo para o estado do mouse, não só o ícone muda de cor e ligeiramente em tamanho e até orientação, mas também o texto aparece um pouco. Então, antes e depois. Então, há o estado normal e como nosso estado, e a melhor coisa se x é e, para ser honesto, é que tudo é animado automaticamente. Então você só precisa configurar os dois estados e a animação intermediária será gerada com o recurso de animação automática. A propósito, levei algum tempo para perceber onde os guias estão no XD quando os uso pela primeira vez, porque não há réguas como no Illustrator ou no Photoshop ou no InDesign. Em vez disso, tudo o que você precisa fazer é chegar à borda do seu quadro de arte e arrastar o guia para fora de lá. A mesma coisa que você pode fazer do lado esquerdo. Você não encontrará esses recursos na parte inferior ou no lado direito. Então, é apenas à esquerda e no topo. E quando você não precisar mais de um guia, basta arrastá-lo para fora do quadro de arte para removê-lo. Então, vamos dar uma olhada neste ícone aqui à direita, o ícone da composição. Isso já está a um componente de distância, posso dizer é porque ele tem um contorno verde. Objetos normais teriam contorno azul. Qualquer coisa verde significará que ele já está configurado como um componente. A propósito, aqui no lado esquerdo na parte inferior, você tem o painel de ativos onde você pode acompanhar todos os seus componentes para que ele lhe dê uma lista deles. E, claro, você também pode nomeá-los. Não me incomodei nomeá-los, então eles são apenas os nomes padrão que entraram com os ícones. A propósito, esses ícones são do Noun Project. O link está na descrição abaixo. Confira. É um site de recursos gratuito com muitos ícones realmente de qualidade. E eu realmente adoro trabalhar com eles no XD porque posso adicionar as animações simples que você já viu nos outros dois ícones. Mas vamos ver o que podemos fazer aqui. Então, antes de tudo, esse componente ainda não tem um estado de focalização, então ele só tem o estado padrão. Então, primeiro, o que precisamos fazer é adicionar o estado de focalização, mas talvez mesmo antes disso, eu vou combinar as mensagens de texto para esse componente. Tudo o que tenho que fazer é cortá-lo. Então Command ou Control X, seguida, selecione o componente, clique duas vezes nele, que significa que entramos na origem deste componente e, em seguida, pressionamos Command ou Control V para colar no táxi lembrará onde estava. Então, a posição um muda. Mas se eu clicar fora e clicar novamente, agora você pode ver que o texto e o ícone estão em um único componente. Os componentes funcionam como grupos no Illustrator e, quando você clica duas vezes, é quase como usar o modo de isolamento. Então, agora vamos adicionar o estado do mouse. Então, basta clicar neste pequeno sinal de mais aqui e escolher o estado do mouse. E você pode até renomeá-lo se quiser o estado em si, porque você pode criar quantos estados quiser, mas eu vou mantê-lo como está. E, em vez disso, vou clicar duas vezes dentro desse componente e arrastar o texto até este guia. E então também vou mudar sua cor e usar a ferramenta conta-gotas e escolher essa cor aqui no texto. Agora eu deveria ter salvo isso já como uma amostra, mas sempre posso fazer referência a partir daí. E se agora selecionarmos isso e voltarmos ao estado padrão e, em seguida, pressione Command ou Control Enter. Já podemos ver esse efeito funcionando. E você já pode ver o quão legal é esse recurso de animação automática. Então, só temos que configurar os dois pontos finais e isso cria esse efeito. E até usa a flexibilização entre os dois estados. Então, agora é hora de adicionar um pouco mais de interesses e animar o ícone como eu fiz nesses outros também. Então, vamos voltar aqui, selecionar o componente, ir para o estado do mouse e, em seguida, clique duas vezes para poder selecionar o ícone em si. Então, lá estamos nós, e eu vou redimensioná-lo. Então, mantendo pressionada as teclas Alt e Shift juntas, posso redimensioná-la, mas você pode ver que ela muda a proporção dos itens dentro dela. Agora isso está acontecendo porque, por padrão, há um recurso no XD chamado redimensionamento responsivo. Então, se você quiser apenas um redimensionamento simples, o que você precisa fazer é voltar ao estado padrão, e é aí que você pode desativar esse recurso. Só vou fazer isso. Em seguida, volte para o estado do mouse. Clique duas vezes novamente, selecione todos esses elementos e, em seguida, mantendo pressionado Alt e Shift, vou redimensionar o ícone para algo assim. Talvez seja um pouco grande demais. E também talvez possamos movê-lo ligeiramente para baixo. E então, mais uma vez, a cor que vou escolher daqui. Tudo bem, então agora, se voltarmos ao estado padrão, podemos verificar antes, depois. Isso parece bom, mas também podemos testá-lo assim. Muito boa animação simples lá. Mas eu também gostaria ter um pouco mais de interesse sobre isso. Então, mais uma vez, no estado de paira, acabei de entrar nele. Mas desta vez só vou selecionar esses detalhes aqui no meio. E eu vou simplesmente girá-los ao redor, talvez para algum lugar lá. E talvez também possamos movê-lo um pouco para fora. Tudo bem, agora, mais uma vez, não vamos esquecer de voltar ao estado padrão e depois verificar isso e entramos no modo de visualização. E lá você tem a bela animação do redimensionamento de rotação, mudança de cor e o texto movendo-se para cima e para baixo. Acredite, se você fizer apresentações como essa, todos ficarão surpresos e realmente se sentirá muito mais profissional que apenas slides simples um após o outro. 4. Atalhos de teclado personalizados: Então, como agora temos a animação, vamos voltar ao modo de protótipo e selecionar esse componente, diminuir o zoom para lance e arrastar a interação para ir para esse slide de composição. A propósito, eu queria mencionar que essas outras pequenas linhas aqui estão realmente representando aqueles efeitos de paira que acabamos de construir com o pequeno raio. Isso significa que há um efeito de focalização nesse componente, mas isso não o tirará desse slide. Tem que ser um toque real que vai passar para o próximo slide. E como estamos construindo as interações, deixe-me mostrar como você pode usar até atalhos de teclado personalizados para se mover entre os slides. Então, vamos apenas dizer que adicionamos no slide de domínio e gostaríamos de ir para o slide Tipo muito rapidamente. Se eu usar essa pequena seta, posso arrastá-la aqui para o slide tipo ou topografia. E então, em vez de tocar desta vez, vou dizer chaves e gamepad. E então podemos apenas usar uma chave, neste caso pode ser t, Isso vai passar para esse slide. Então vamos fazer a mesma coisa novamente. Então, mais uma vez, outra interação para a qual usaremos outra chave, neste caso, C para cor. E então, mais uma vez, outro para composição. Bem, talvez al, desta vez para layout, já que ambos são a mesma primeira letra. Então, vamos testar isso. Vou entrar no modo de visualização e se eu pressionar T, ele vai lá. Vamos voltar ao slide principal. C vai para a teoria das cores, e quando pressiono L, ela vai para a composição. Brilhante. Agora, se você quiser ser ainda mais avançado, você pode até usar comandos de voz para se mover entre os slides. Mais uma vez, isso pode tornar sua apresentação tão divertida e legal. Então, se eu adicionar outra interação novamente, digamos que vá pai, em vez das teclas e do gamepad, agora vou escolher a voz, e posso simplesmente digitar o comando de voz e ver a cor quando pressiono Entre. Agora isso também é adicionado. E observe que aqui no topo ele me diz que há duas interações atribuídas entre este slide, o slide principal e a teoria das cores. Um deles é o atalho de teclado que atribuímos e agora esse comando de voz. Então, vamos testar isso. Vou entrar em pré-visualização mais do que o Gan. E há uma pequena nota na parte inferior dizendo que você tem que manter pressionada a barra se quiser ativar comandos de voz. Então, vamos experimentar isso. Cor. Legal, XD. Entendi o que eu quis dizer. Tudo bem, isso é brilhante. Então isso é tudo o que eu queria mostrar a você sobre a navegação. Assim, você pode usar atalhos de teclado, você pode usar seus comandos de voz. E, claro, você também pode usar interações com tabulação como vimos antes. Agora, se isso não for legal o suficiente e você quiser ser ainda mais avançado, você pode realmente criar um menu fixo. Você pode ver isso aqui no lado direito. Então, vou configurar isso. Este é apenas o gráfico padrão neste momento, mas vou alinhá-lo em algum lugar aqui do lado direito. Sim, acho que isso vai funcionar e vamos provavelmente melhor se ficarmos no modo de design divertido agora que temos todos os elementos que precisamos para isso, e vou transformar isso em um componente. Portanto, há um atalho para essa tecla de comando ou controle. E observe como os contornos verdes aparecem agora. Então, agora podemos adicionar um estado de focalização para isso. Vamos apenas adicionar isso lá e , em seguida, simplesmente movê-lo para baixo. Quando entro na área do componente aqui e alterno entre os dois estados, observe que nada está acontecendo. Agora. Isso ocorre porque, simplesmente movendo o componente em dois estados, ele não está registrando sua posição. Então, o que você precisa fazer é configurar sua posição de estado padrão primeiro. Vamos subir aqui onde queríamos originalmente. Em seguida, selecione o estado do mouse e, nesse estado, clique duas vezes no componente, selecione tudo o que é Comando ou Controle J e, em seguida, selecionará apenas coisas dentro dele. Mais uma vez, lembre-se que é como o modo de isolamento no Illustrator. E, em seguida, mantendo pressionada a tecla Shift, vou arrastá-la um pouco para baixo em algum lugar por lá. Agora, quando eu clicar fora, voltar para ele, agora ele vai se lembrar desses dois estados. Então a culpa é quando está lá fora, e quando eu passar o mouse sobre, a pequena flecha vai descer. Agora, há outro recurso brilhante que vou usar para este menu fixo. E essa é a posição fixa ao rolar. Se eu ligar isso e pressionar Command ou Control Enter para testar isso, poderemos ver que ele realmente fica lá no topo. Portanto, não importa onde eu esteja dentro deste slide, neste caso, ele sempre vai ficar lá. Mas o que temos que ter certeza é que também voltamos aqui e o configuramos de volta para o estado padrão. Isso é algo que você sempre precisa se lembrar ao configurar componentes com animação ou vários estados, é que, se você quiser que ele funcione corretamente, você precisa ter certeza de que o configura de volta para estado padrão antes de testar seu protótipo. Então, vamos testá-lo novamente. Agora você pode ver que é apenas uma simples seta lá no topo. E quando eu passar o mouse sobre ele, o menu desce. 5. Como conectar os slides: Agora só temos que configurar as interações. Então, vamos mudar para o modo protótipo. Selecione isso e já estamos no estado de focalização, o que é perfeito. Então, vou clicar duas vezes dentro dele. Há o pequeno ícone e só temos que arrastá-lo para este outro slide. Agora, certifique-se de que ele esteja configurado para tocar e não voz e sempre se lembrará da última interação usada. Vou mantê-lo no toque e todas as configurações adicionais estão boas. Então vamos fazer a mesma coisa com esse outro ícone. Isso precisa ir aqui. Então, porque já estamos na teoria das cores, talvez isso possa ser um ótimo alfabeto para isso. Vou voltar ao Design e talvez apenas reduzir a intensidade disso para 50%, talvez até menos 25. Ok, então agora podemos testar isso. Se eu voltar ao estado padrão e voltar à visualização, quando eu passar o mouse sobre, ele aparece e esses dois estão funcionando. Vamos apenas ir para a tipografia. Isso é ótimo. Mais uma vez, vou voltar à teoria das cores, testar o outro ícone que funciona perfeitamente também. Então, agora o que precisamos fazer é copiar essa coisa toda. Então eu seleciono o menu fixo que criamos, Comando ou Controle C e, em seguida, Comando ou Controle V neste lado. E eu farei o mesmo com este slide também. Lá vai você. E ele se lembrará de todas as configurações. Então, o que precisamos fazer agora é entrar no modo protótipo, mudar para o estado do mouse. E aqui nós só temos que garantir que ele tenha a conexão com o slide da teoria das cores também. Então, vou clicar duas vezes e atribuir uma introdução a esse slide. Mas também voltando ao modo de design, eu gostaria que isso ficasse triste. Dois 100% de opacidade. E, em vez disso, vou mudar este à direita e reduzi-lo para 25% como antes. Agora podemos definir isso de volta para o estado padrão e testar as coisas. Então, quando eu passar o mouse sobre ele, ele aparece e podemos ir para a teoria das cores, onde quando ela aparece, ela se lembra das configurações específicas deste slide. Então, agora podemos alternar entre esses dois, o que funciona muito bem. E então ainda temos que configurar a versão para tipografia. Então, vamos apenas para esse slide. Vou repetir os mesmos passos. Então eu seleciono esse componente e entrarei no estado do mouse. E nesse estado, vou me certificar de que esse ícone aqui, então clique duas vezes nele, será reduzido em opacidade para vinte e cinco por cento. E então esses outros devem ser ajustados para 100%. E então eu só tenho que fazer o protótipo agora. Então, para a cor, precisamos ir lá e a composição já está lá graças ao fato de ser um componente. Então parece um pouco complicado, mas acredite em mim, uma vez que você começar a fazer isso, será uma segunda natureza e você pode configurar as coisas de forma muito rápida e fácil. Então, mais uma vez, vamos testar as coisas. Se eu voltar ao slide principal, podemos chegar ao que quisermos. Vamos à tipografia. E oh sim, esqueci de redefinir isso para o estado padrão. Então isso é importante. Voltamos, vamos para o estado padrão, e é assim que é. Então, agora, se começarmos aqui, posso passar o mouse sobre. Sim, parece bom. Podemos ir para a cor, podemos ir para Composição, e podemos voltar ao tipo e assim por diante e assim por diante. Então, agora construímos várias formas diferentes de navegação. Obviamente, temos as setas para trás. Temos nosso menu pegajoso. Também temos comandos de voz e até atalhos de teclado. 6. Componentes: Mas se isso ainda não for suficiente, se você tiver duas telas disponíveis quando estiver apresentando, você também pode usar o design real do plano de fundo para navegação. Então, vou deixar essa janela um pouco menor. E mostrarei que, se eu clicar aqui em segundo plano em slides específicos, digamos que clique no slide principal. Observe com que rapidez na minha apresentação muda para isso. Portanto, isso também pode ser usado para se mover rapidamente entre slides. E, claro, em segundo plano, ainda posso aumentar e diminuir o zoom e encontrar o slide relevante para o qual quero pular. Então isso é quase como o seu sumário. E isso realmente só funciona bem se você tiver duas telas separadas. Se você puder usar o projetor como uma segunda tela e ele não estiver espelhado no seu laptop, então eu recomendaria também usar essa funcionalidade. Como vimos como trabalhar com componentes, eu realmente tenho um exemplo legal aqui neste slide. Se eu simplesmente rolar mais para baixo que construí com componentes, você pode fazer muito mais do que simplesmente ter animações simples para botões e coisas assim. Você pode realmente criar jogos interativos ou até mesmo questionários, se quiser. Então, para kerning, por exemplo, aqui, criei um efeito de focalização que pode mostrar antes e depois textos sem kerning e depois com kerning, a mesma coisa aqui no lado direito também. Então, tudo isso é, é outro componente com quatro caracteres separados juntos em um grupo. E então, simplesmente, temos novamente para esse componente um estado padrão e o estado de focalização, e a cor também muda entre os dois estados. Da mesma forma que isso no slide de composição, se eu mostrar isso rapidamente, teremos outro efeito de focalização que pode mostrar como a hierarquia pode melhorar um design. Isso é antes. E então, quando passamos o mouse sobre ele, isso é depois. Então, esta é novamente, outra ótima maneira de apresentar coisas. Então, em vez de alternar entre slides, você pode usar o cursor, mouse sobre ele ou até mesmo usar coisas como comando de voz, Sheryl antes de mostrar lá. E dessa forma você pode interagir com seus componentes. Como eu disse, usando esses métodos, você pode realmente criar testes e jogos interativos muito legais. E se você quiser que eu gravasse outro vídeo sobre isso, me avise na seção de comentários abaixo e eu vou certificar de que o abordarei em um próximo vídeo. 7. Links de ancoragem: Mas antes de terminarmos, deixe-me mostrar uma coisa adicional. É outro recurso brilhante chamado links âncora no XD com o qual você pode criar a seguinte coisa. Então aqui na teoria das cores, que temos um slide longo e silencioso. E o que eu fiz aqui é que temos esses pequenos ícones na parte superior ou imagens. E se eu clicar em complementar, fica perto dessa parte dentro do slide. Se eu clicar em analógico, vamos para isso e assim por diante e assim por diante. Isso é novamente, uma coisa muito simples que você pode construir. Então, vamos apenas dizer que se quisermos usar isso como um link âncora, ou temos que fazer é ir ao protótipo e, em seguida, simplesmente clicar na pequena seta, não clicar e arrastar neste caso, basta clicar e em seguida, mantenha o gatilho no toque, mas altere o tipo para rolar também. Há muitos tipos diferentes, mas esse é o que precisamos neste caso. E você só precisa definir o destino, que neste caso será a tríade, que eu acho que é esta, embora não seja a cor mais fácil. Sim, são as cores triádicas. E podemos verificar isso como isso funciona. Então, se eu entrar no modo de visualização e clicar na tríade, role uma dívida direta. Agora, o único problema é que não há espaço no topo, então ele vai completamente para a primeira linha disso, então não dá espaço acima dele. Então, para evitar esse problema, vou voltar ao modo de design, selecionei este parágrafo. E observe que estou usando o formato do quadro ou o formato de texto da área e não o texto do ponto. Eu prefiro trabalhar sempre com textos de área. E com isso, posso simplesmente adicionar alguns espaços vazios antes dessas linhas, posicioná-lo onde eu queria. E agora, quando testamos novamente e vamos experimentá-lo, você pode ver esse espaço vazio acima dele. É quase como uma margem superior que você constrói em seu link âncora. E isso é tudo o que eu queria mostrar a vocês neste vídeo. Mas acredite em mim, estamos literalmente apenas arranhando a superfície do que você pode fazer com o XD quando se trata de apresentações. E nunca fui um grande fã do PowerPoint. No entanto, também é uma boa ferramenta. Sinto que o XD está muito mais perto do meu coração porque posso trabalhar exatamente da mesma forma que eu trabalharia para protótipos móveis e usaria as mesmas ferramentas e configurações, mas para apresentar as coisas em um de forma muito mais envolvente e interativa. 8. Conclusão: Parabéns por terminar este curso. Espero que você tenha se divertido tanto assistindo isso quanto eu me diverti gravando. E, claro, não se esqueça do projeto da turma. Porque lembre-se, a prática leva à perfeição. Mal posso esperar para ver seu trabalho, então não deixe de enviá-lo. E caso você goste deste curso e queira aprender mais comigo , há muitos outros cursos que você pode encontrar aqui. Vá e dê uma olhada neles agora. Mal posso esperar para te conhecer na próxima.