UI/UX e web design usando Adobe XD 2018 — design de experiência do usuário

1. Introdução ao Adobe XD: Oi lá. Meu nome é Dan e sou um instrutor certificado pela Adobe. Juntos, eu e você aprenderemos a usar o Adobe XD. Agora esta ferramenta de design UX UX vai nos ajudar a criar belas interfaces de usuário, além de simplificar nossa experiência de usuário. Durante este curso, vamos usar um projeto freelance real em que estou trabalhando. O projeto precisa tanto de uma interface web quanto de um aplicativo móvel. Ele vai lhe dar uma boa compreensão de como executar seu próprio projeto de UX potencial. Meu curso aqui é destinado a pessoas novas para design e experiência do usuário. Vamos começar do início e seguir o nosso caminho apenas passo a passo. Primeiro passo, vou mostrar-lhe como construir um bom resumo e UX [inaudível], então você aprenderá a criar alguns wireframes simples. A partir daí, você aprende a implementar e cores e imagens corretamente em seus projetos. Você aprenderá o que fazer e não fazer para escolher fontes para sites e aplicativos móveis. Nós também trapacearemos um pouco com kits de interface do usuário pré-fabricados [inaudíveis] para acelerar nosso fluxo de trabalho. Construiremos um protótipo, tanto o design do nosso site quanto o design do aplicativo móvel, conectando as páginas e adicionando interatividade completa pronta para uso e teste. Vou compartilhar com vocês todos os truques secretos dentro do Adobe XD que realmente ajudarão você a acelerar todas essas tarefas repetitivas, até exportar os arquivos certos e criar seu próprio espaço de design. No final, eu tenho um projeto para você, para ajudá-lo a desenvolver suas habilidades e assim você tem algo pronto para o seu portfólio. Espero que você esteja pronto para se atualizar e se juntar a mim para o Adobe XD. Sim, essa é uma planta falsa de [inaudível] Você vai entrar na loja e eles ficam ótimos e vai ficar bem no escritório e então você leva para casa, e é uma planta falsa. 2. Primeiros passos em seu projeto no Adobe XD: Ei aí. Para começar, você precisa baixar os arquivos de exercícios. Há um link nos comentários ou descrição abaixo. Às vezes, há um botão. Você está olhando para fora para os arquivos de exercícios de download. A outra coisa que você pode fazer é durante este curso, o que eu faço é no final de cada vídeo que eu salvo o que eu estou fazendo, e o mesmo para algo chamado o arquivo concluído. Ok, então cada vídeo terá um link ou um botão onde você pode baixar onde eu estou até no XD e se o seu não estiver parecendo o mesmo, você pode baixar o meu e comparar os dois. A última coisa é que, durante este curso, você vai ser solicitado para uma revisão. Revisão é o sangue da vida de mim como treinador e por que eu começar a fazer isso em tempo integral. Se você está gostando do curso e você conseguir pedir um comentário, por favor deixe cair um lá, ok uma crítica honesta, isso me ajudaria muito. Tudo bem, vamos continuar com o curso. 3. Diferenças entre a interface de usuário UI e UX e a experiência do usuário: Antes de começarmos, vamos cobrir rapidamente o que UX verses UI é. Se você é novo no campo, eles se juntam. UX é mais um termo guarda-chuva. Ele cobre um monte de componentes, incluindo UI. UI, design de interface de usuário é o que vamos abordar neste curso. Vamos fazer muito no Adobe Extreme, onde desenvolvemos a interface de usuário para uma web e um aplicativo. Esse é o componente de interface do usuário, mas geralmente faz parte de um projeto de UX maior. UX pode ser dividido em três partes principais. Um deles é o lado da pesquisa, então você faz sua pesquisa de experiência de usuário. Isso é apenas terminar e descobrir quem são as personas, quem são seus clientes, quais são os requisitos do cliente. Está construindo um breve, todos os recursos que precisam estar em seu produto. Esse é o lado da pesquisa das coisas. Depois, há o design real, o design da interface do usuário que vamos abordar neste curso. Em seguida, você move para o usuário o teste de usabilidade, depois, você pega seu projeto XD e você começa a testá-lo. Vamos nos concentrar neste bit intermediário, vamos mostrar um pouco de como obtive o resumo e como me preparar para testes de usuários. Mas eu tenho outro curso chamado Como Ser um designer de UX, confira isso. Isso é mais uma visão geral do design de UX. Isso lhe dará estratégias para construir resumos corretamente, persona's corretamente, e também o teste do usuário, maneira de fazer isso um pouco mais irá cobrir brevemente aqui. Mas vamos nos concentrar nos recursos reais de design de UX. Você como designer de UX, só para você saber, depende de onde você está trabalhando. Se você estiver trabalhando em uma empresa menor, média empresa, provavelmente será esperado que você faça todos os três potes; pesquisa, a interface do usuário e os testes. Se você estiver trabalhando em uma grande empresa, você poderia apenas ser o designer de interface do usuário como parte desse projeto de UX maior. Você pode ter pesquisadores especializados, você pode ter um testadores de usuários especializados, por isso vai depender de onde você está. Mas o XD fica no meio para as ferramentas de design. Sim, é isso. Vamos passar agora e começar a construir nossas coisas no XD. 4. A apresentação e a persona de nosso projeto da vida real: Antes de começarmos, eu quero delinear rapidamente o breve para este projeto porque este é um projeto real de um de meus clientes, e eu pensei que seria uma boa maneira de explorar o XD através de um projeto real. O que nós tivemos que fazer este lado de pesquisa UX das coisas e nós tivemos que construir é o resumo do cliente, que eu vou mostrar a vocês aqui e nós tivemos que construir a persona, assim como quem o público-alvo vai ser. Vamos dar uma olhadinha aqui na tela. Tanto o que o cliente me enviou como um resumo inicial e, em seguida, o que tivemos que realmente movê-lo para então tivemos um projeto real para trabalhar através. Vamos verificar aqui agora. Em primeiro lugar, como qualquer bom trabalho criativo, e você tem que obter o breve certo especialmente para UX porque muitas vezes o cliente, especialmente os clientes que eu lido, com realmente não executado através de um monte de projetos de UX antes. Eu acho [inaudível] o que está coberto, o que não está coberto, essas coisas, então um resumo é sempre essencial para qualquer projeto. Pensei em mostrar-te o que temos. Este é o relatório que recebemos do cliente. Então, basicamente, era muito magro. Eles têm um site, bringyouronlylaptop.com e eles construíram isso de volta para ele, para o trem é para usar, e eles querem apenas liberá-lo para outros treinadores para potencialmente usá-lo como um produto. Então eles querem um site, eles querem um aplicativo, eles são muito básicos. Então o que eu fiz foi dar uma olhada em seus detalhes, através da análise de seu site. Eu sei um pouco sobre eles porque eu já lidei com ele antes sobre basicamente eu fui através do projeto de pesquisa UX, descobrindo quem eram seus concorrentes, o que o produto faz, seus USPs, quem os potenciais usuários ser e construiu um breve. Então essa é a coisa que eu enviei por e-mail e basicamente cobre o básico da maioria dos resumos. Deixe-me apenas verificar rapidamente. Se você não estiver interessado, você pode simplesmente pular e vamos começar a fazer coisas XD, mas neste caso, descrição do nome do projeto. Basicamente, foi o que eu disse. Então apenas delinear a descrição, para quem é ele é é muito importante. Então construímos uma persona. Vou te mostrar isso em um segundo sobre como a persona realmente se parece. Mas foi isso que combinamos com o cliente quem é a pessoa em potencial. Agora, a grande coisa com pessoas é que você pode adivinhar e você pode ter um melhor palpite, mas você precisa revisar potencialmente quem sua personalidade pode ser, porque você pode dizer, “Sim, é definitivamente essa pessoa”, mas você precisa permitir Sala de manobra e ortografia beta e gramática. Nós construímos para quem pensamos que o cliente é, nós construímos uma lista de recursos. Só para ter certeza de que sabemos o que realmente está acontecendo nos wireframes no início, quais são as partes importantes. Deixamos de fora coisas como um rodapé ou outros recursos que são apenas normais. A página de contato precisa estar lá, todas essas coisas. Então este é o material único para este projeto. Concorrentes e inspiração de produto. Isso só nos ajuda a saber e o cliente sabe que estamos alinhados em termos disso é o tipo de coisa que estamos construindo. Entregáveis, isso é super importante. Então nós passamos por duas partes, há Wireframing e então há alta fidelidade: wireframes são realmente simples, alta fidelidade tem todas as fontes, cores e imagens. Então nós construímos wireframes puramente apenas para aprovação do cliente. Eu não saio e testo wireframes. Vamos falar sobre a carta. Em seguida, construímos um protótipo de alta fidelidade e, em seguida, vamos para alguns testes de usuário. Com base na degustação do usuário, faremos um relatório de usabilidade que pode ser grande ou pequeno. Basicamente apenas alimenta de volta o que você descobriu quando você está testando usuários. Então, uma vez que tudo está terminado e nós arrumamos qualquer um dos problemas com o teste do usuário, vamos pegar todos os ativos da interface do usuário para os desenvolvedores. Isso significa apenas dar-lhes imagens e código, e ícones e símbolos para que eles possam construir o aplicativo ou um site. Então é aí que o nosso trabalho vai terminar. Então eu sempre tenho um Não Incluído, apenas para ter certeza de que os limites são definidos agradável e clara. Então o primeiro é protótipo do back-end, que é o instrut além deste site. Havia também um lado estudantil que eles já desenvolveram, eles não querem que nós redesenhemos isso. Então eu só estou me certificando de que está claro. Disseram-me que está claro, não estamos cobrindo isso porque eles esperam usar seus sistemas atuais, o lado instrutor que vamos testar. Custos, então isso é o que eu cobro por este trabalho. Os empregos variam, muitas vezes eles começam em cerca dois mil e meio dólares e recebem até cerca de 10 mil para projetos maiores. Este aqui basicamente eu treino qual é a minha taxa diária e é cerca de US $800 e então eu quantos dias eu preciso trabalhar com algo como uma linha do tempo, adicionar um pouco de um buffer, em seguida, dar-lhes uma taxa horária Depois disso. Então, se eles começarem a pedir coisas que não estão cobertas nos resultados, você pode dizer, “Claro, eu posso fazer isso, mas provavelmente vai demorar mais meio dia.” Então eles sabem a sua taxa horária, então eles sabem que vai custar X, Y e Z. E eu acho que é uma boa maneira de parar o trabalho para se assustar. Então, o creep do trabalho acontece com todos os trabalhos. Eles dizem: “Você pode adicionar rapidamente essa coisinha extra?” Você adiciona e decide mais tarde se os constrói para isso ou não, e então o trabalho ultrapassa e você ou os surpreende com uma conta gigante ou você simplesmente chupa os custos que são ruins. Então eu me certifico de que o começo eu lhe dê [inaudível] custos porque é isso que todo mundo quer. Ninguém quer uma taxa horária. Mas dando-lhes uma taxa horária, bem, para que quando você está conversando e eles dizem, “Ei, você também pode fazer isso?” Você é tipo, “Claro, provavelmente vai me levar três horas.” Eles sabem qual é a taxa horária e você pode adicioná-lo sua conta e todo mundo é claro desde o início, Eu sempre peço 50 por cento de pagamento adiantado para começar o trabalho. Há tantos trabalhos que acabo por começar que nunca acabam. Então eu gosto de ter certeza que eu recebo 50% adiantado para que eu possa cobrir meus custos para a parte inicial. É a parte mais importante que fazer a pesquisa UX e trabalhar os recursos. Essa é a parte super importante do trabalho, eu acho. Então eu sempre peço uma porcentagem inicial, você pode ter perguntado algo menor do que isso, mas 50% é bastante comum. Em seguida, 50% na conclusão. Prazos, cada trabalho um pouco diferente, mas sim, isso é o que fizemos. Então há uma fina e eu. Então eu vou fazer a pesquisa do usuário para começar, os wireframes são entregues para deixar seu único laptop fino, então eles me dão feedback até essa determinada data e eu dou a eles a alta fidelidade. Então eles me dão feedback sobre essa alta fidelidade e então eu realmente vou para testes de usuários. Em seguida, permitimos um par de semanas para testes de usuários. Isso pode ser diferente, depende de como para este projeto, nós vamos fazer um monte de o que é chamado de teste corredor ou testes sobre o ombro. Vamos tentar encontrar-nos com pessoas para fazer coisas de vida física. Encontre pessoas que correspondam à sua personalidade e realmente trabalhem com elas. Agora, novamente, não vamos ter um teste completo aqui. Tenho outro curso para isso. Confira como ser um designer de UX para algumas das técnicas de teste. Mas sim, nós vamos fazer coisas sobre o ombro possível, provavelmente fazer algum teste sem moderação onde vamos para você dizer userstesting.com, eu acho que é realmente útil, e você pode simplesmente enviá-lo para eles e as pessoas gravar-se formas rápidas e é algo que você não tem que organizar reuniões e você tem gravação para que você possa cortar fora, mas assim você pode mostrar ao cliente alguns dos resultados. Em seguida, haverá um teste de usuário e relatórios concluídos. Basicamente apenas feedback sobre isso é o que acontece no teste do usuário. Estas são as mudanças que vamos fazer e você faz essas mudanças. Uma vez que as mudanças finais foram feitas, vamos entregar os ativos para o desenvolvedor para ser construído, que neste caso seria, eu provavelmente vou acabar fazendo o lado web das coisas, pelo menos o web design front-end coisas, mas o aplicativo no desenvolvimento back-end terá que ser feito por um desenvolvedor, que é totalmente fora da minha zona. Eu sou mais desse lado criativo, o lado front-end. Sim, esse é o tipo de resumo que vemos para o cliente. Eu aposto que você um 100 por cento prometeu que isso não vai chegar no 4 de dezembro, principalmente por causa do feedback. Então seu cliente verá essa data e dirá que fará isso, mas as coisas acabarão atrasadas. Basta chegar um ou dois dias de atraso e eu apenas me certifico que assim que for um par de dias de atraso, eu revisto a próxima linha do tempo, para que eles saibam que foram eles que a empurraram para fora. Então, quando está dois meses atrasado, não é por minha causa, é por causa do feedback ruim deles. Então, ser realmente meio rígido no início dizendo que, ele precisa estar aqui até esta data e assim que tarde, adicionar isso ao tempo e apenas empurrar isso para fora porque isso vai parecer longo se ele empurrar para o próximo ano, porque vai adicionar mais algumas semanas no meio de um Natal. Deveríamos ter entregado isso em meados de dezembro e antes que perceba é fevereiro. Então eles tiveram em meados de dezembro. Portanto, seja muito claro sobre cronogramas e prazos. Mais uma vez, este é o meu processo. Você pode estar trabalhando em uma agência em que $4000 só não cobriria o alcance. Então você pode estar começando nos $5000 e terminando na marca de $50.000, dependendo do tamanho do projeto. Você pode estar apenas começando e você pode estar levando o trabalho em casa muito mais barato do que o Reino Unido. Você pode estar fazendo projetos por US $1500 ou até US $500 para conseguir seu primeiro emprego. Mas pensei em mostrar-lhe onde estou como designers de UX freelance. Então você tem alguma idéia de preços, cronogramas e resumos. Vamos dar uma olhada rápida na personalidade que eu fiz. Então esta é a persona que construímos para este projeto agora, e os resumos iniciais tinham um esboço áspero. O que temos feito desde então é uma pesquisa de UX sobre quem essa pessoa é mais provável de ser. A coisa boa sobre este cliente em particular é que ele tem muito Google Analytics e tem um canal forte no YouTube. Portanto, é fácil entrar lá e ver dados reais sobre quem está usando o canal, quem está usando seu produto, e depois falar com o cliente sobre quem essa pessoa em potencial pode ser. Então, o que entra nisso realmente dependerá do seu projeto. Demos um nome a esse cara, Peter, que é uma imagem falsa da biblioteca, mas sinto que representa a pessoa. Damos a ele uma idade, seu cargo, e um lugar onde mora. Agora, o que você realmente quer fazer é ser capaz de se comunicar. Bem, depois de ler isso conheça a pessoa. Você precisa anotar a pasta de dente que ele usa ou o carro que ele dirige potencialmente, mas potencialmente não. Se for um Prius ou uma Ferrari, é uma indicação potencialmente do tipo de pessoa que ele é. Eu vi algumas pessoas que apenas entrar em é o meu novo pequeno detalhe, eu acho que o que você quer lá é apenas para que você possa ter o suficiente e ele teve que ir embora e ir, eu entendo de onde Peter está vindo em relação ao meu produto. Então poderia ser mais curto do que isso, provavelmente não muito mais curto, mas eu também não faria muito mais tempo. Leia isso só para entender quem é Peter, por que estamos fazendo esse projeto. O que eu fiz por você está nos arquivos de exercícios há pasta chamada persona template. Você pode usar isso se quiser. Há um arquivo do Illustrator que você pode trocar as imagens e fontes e outras coisas e usá-lo se quiser, você tem permissão total para usá-lo, mas sim, ler e ver como Peter faz as coisas. Então, leia e entenda Peter e suas posições que quando estamos construindo um XD, podemos tomar algumas decisões com base no que Peter gostaria, não no que o cliente quer, e não no que eu quero pessoalmente. Então esse é o breve e as personas. Vamos para o próximo vídeo. 5. Criação de wireframe de baixa fidelidade no Adobe XD: Vamos começar o enquadramento de fio em XD, agora o enquadramento de fio ou baixa fidelidade, é o termo usado com freqüência. Alta-fidelidade significa apenas a visão com as fontes, as cores e as imagens. Parece exatamente como o produto final, o enquadramento do fio ou a baixa fidelidade apenas tem uma fonte, uma cor, layout básico real. Para mim, o enquadramento do fio é provavelmente a parte mais importante. É aí que meu valor vem do meu palpite é, trabalhar o fluxo de usuários, como eles vão de A para B, quanto tempo leva? Quantos passos? Quão fácil é? Esse tipo de arame é de onde a maior parte do valor vem para mim como designer. Mesmo que eu ame o material de alta fidelidade, o enquadramento de arame que eu acho é muito importante. Agora, você testa as armações de arame? Eu uso arame frames para enviar para o cliente para que eles possam verificar para ter certeza de que tudo está no lugar certo, mas eu não usá-lo para testes reais para usuários finais reais ou as personas, você pode. Eu acho, eu sou rápido o suficiente para obter as versões de alta fidelidade pronto para testes e eu prefiro testar com aqueles com todo o material de marketing certo, imagens certas, fontes e todas essas coisas lá dentro. A outra coisa é em termos de arame, eu vou fazê-los à mão primeiro como se eu fosse algo assim, e no meu livro muito rápido isso não vai para ninguém além de mim, então eu vou segurá-lo. O microfone desaparece e você não pode me ouvir. Espero que consigas ver isso. Talvez você possa até me entregar, mas sim, são apenas contornos básicos reais. Há páginas e páginas destes e eu só passo ereformulo as ideias onde tudo precisa ir reformulo as ideias onde tudo precisa ir e, em seguida, começar a construir a próxima coisa. Mais rápido desta forma, você pode preferir ir direto para o computador. Isso é bom também. Vamos realmente começar no XD agora e olhar para alguns dos kits de interface do usuário. Finalmente, na hora XD, ele continua prometendo. Prometo, próximo vídeo. 6. Trabalhando com os kits UI existentes no Adobe XD: Oi lá. Neste tutorial, vamos começar a nossa página aqui. Nós vamos conseguir uma página, nós vamos obtê-la para ter uma navegação. Vamos retirá-lo de alguns dos modelos que são construídos a partir do XD, e torná-lo parecido com isso. Vamos entrar e começar no XD. Finalmente temos o XD aberto. Agora, a primeira coisa que vamos fazer é baixar um dos modelos que o XD fez de forma útil para nós. Nós só vamos retirar peças disso enquanto trabalhamos porque eles são feitos apenas alguns wireframes pré-fabricados que podemos roubar peças para ajudar a acelerar nosso processo. Você pode fazer isso baixando aqui onde diz “UI Kits”, há uma opção, isto é Wireframes ou você pode ir até o arquivo “UI Kits” e clicar neles aqui e isso vai simplesmente abrir Behance. Vamos dar uma olhada nisso. Aqui você pode clicar em “Baixar Kits”. Agora, eu já baixei para você e os coloquei nos arquivos de exercícios, então se você baixar os arquivos de exercícios, eles estarão lá prontos para ir. Vamos voltar para o XD. Aqui no XD, permite abrir que wireframe tem um “Arquivo” ir para “Abrir” e os arquivos de exercício que baixamos este em um código UI modelos. Eu baixei este wireframes aqui e vamos começar com a web. Agora, por que estamos começando com web e não. Nosso resumo é bem específico. Os principais alvos serão o uso da web, a interface web. Mas se você soubesse que seu projeto foi baseado principalmente para uso móvel, web ou talvez um aplicativo, você começaria com celular, mas vamos começar com a web e simplesmente abri-lo. coisas primeiro é navegar e zoom em torno e a maneira mais fácil é manter pressionado o comando em um Mac ou controle em um PC e tocar na tecla de mais para ampliar e a tecla de menos para diminuir o zoom, agradável e fácil. Um par de outras técnicas de navegação está segurando barra de espaço. Me dá minha mão e eu posso me mover. Se eu ampliar um pouco, mantenha pressionada a barra de espaço, clique em segurar e arrastar, com o mouse, e isso me permite mover pelos documentos. Agora, dois outros pequenos atalhos de navegação úteis, antes de começarmos, é manter pressionado o comando em um Mac ou controle em um PC e tocar na única tecla, que irá ampliar para um 100% e é aqui que devemos estar fazendo a maior parte do nosso trabalho, sendo muito ampliado e muito ampliado e tomar decisões sobre escolha de fonte e tamanho não é tão útil porque eu usuários só vão vê-lo em um 100 por cento, então é ótimo estar neste tamanho, um ou controle um se você estiver em um PC. último, eu prometo é o meu favorito é se eu selecionar este elemento aqui e ir comando três ou controle três em um PC, ele amplia em, ele apenas destaca que uma área. Acho isso muito útil. Você pode fazer isso com todo o up-board também. Você quer ver isso up-board. Você pode clicar no nome ao longo do comando superior três e ele irá centrá-lo em sua visão. Essa é a navegação básica. O que vamos fazer é criar um documento de execução agora. Nós vamos para “File”, nós vamos para “New”. Há alguns padrões aqui. Você pode clicar neste pequeno menu suspenso para encontrar outras opções. Depende do que você quer fazer. Eu gosto de começar sites com este 920 através de 1080 alta. Você pode digitar um tamanho personalizado aqui ou se você obviamente trabalha com iPhones ou iPads, você pode usá-los por padrão. Vou usar esse cara, clique nele. Nós vamos salvar este aqui. Vá para “File” “Save” e vamos colocar todos os nossos arquivos para esta classe em nossa área de trabalho. Eu vou fazer uma nova pasta e esta vai ser chamada de HQ instrutor e vamos chamar este arquivo de instrutor HQ, vamos chamá-lo de protótipo, e vamos chamar este um V1. A primeira coisa que precisamos fazer é nomear up-board. Basta clicar duas vezes nas palavras aqui. Vamos chamar esta página inicial. Agora, se você é uma pessoa como eu que nunca nomeia suas camadas no Photoshop ou no Illustrator. Você tem uma camada tipo 57. Não tem nome, nomear seu up-board aqui no XD, torna-se super útil quando paramos de prototipar isso mais tarde. Eu tenho o hábito. A outra coisa que eu vou fazer é eu vou diminuir o zoom, e eu vou fazer o meu up-board bastante longo. Agora porque eu não tenho nada na minha página e nada selecionado. Eu apenas padrão para o up-board. Há um up-board 2 que você poderia usar se você quiser ser oficial, mas porque eu não tenho mais nada na minha página, Eu posso simplesmente atualizar o up-board. Você vai notar que aqui há uma linha pontilhada. Este é apenas um pequeno guia visual agradável aqui para mostrar-lhe o que o ponto de vista inicial é ou dizer acima da dobra. Isso só significa que tudo acima aqui é o material que as pessoas vão ver primeiro em sua página web. Tudo aqui embaixo vai ser coisas que eles têm que procurar. Aqui é onde a magia precisa acontecer. Você precisa fazer suas vendas, seu principal convincente, seu apelo à ação. Tudo acima desta linha pontilhada aqui. Você pode ajustar este ponto de vista inicial se você acha que é muito alto ou muito pequeno. Primeiro de tudo, vamos roubar algumas partes do modelo, vamos saltar para ele. Você pode obter uma janela e alternar entre eles aqui, então isso é saltar entre este e este, é com você. Eu uso tilde comando no Mac. Tilde é a chave ampla acima da tecla tab. Em um PC, eu acho que é guia de controle apenas alterna entre eles. Eu faço um monte de saltos entre esse caminho. O que eu quero agora é um desses elementos de navegação. Eu só vou escolher o que mais se assemelha ao meu maquete desenhado à mão, e provavelmente é este aqui. Vou clicar uma vez, tenho uma cópia, Editar cópia. Eu vou pular para o meu projeto, e eu vou para colar. O que eu quero fazer é eu vou usar minha seta preta e a coisa boa sobre isso, eu vou tentar entrar no centro, mas você assiste XD, é inteligente, sabe o centro que você pode ver esses pixels. Coloque-o no topo. Agora, quando estamos projetando isso, eu escolhi um tamanho. Se eu clicar na borda aqui, clicamos nos nomes da maneira mais fácil. Ele me dá minhas sessões de documentos, meu up-board faria sessões, e nós escolhemos 1920 através. Eu nunca quis projetar um site tão grande, especialmente para meus wireframes. Eu escolho este tamanho porque eu gosto de usar o dizer tamanho aqui, 1400 de comprimento para fazer o meu site. Mas eu gosto de ter essas bordas extras aqui, só para que eu não esteja tentando projetar dentro de uma pequena caixa. Isto é aqui apenas como área de buffer para que eu possa ver o que parece em uma tela potencialmente maior. O que eu também gosto de fazer é estender o meu nav porque vai ser do outro lado do topo. O que eu vou fazer é desagrupar isso, clique com o botão direito do mouse. Você vê os atalhos aqui. Vamos passar por mais e mais atalhos à medida que avançamos. Mas desagrupe, esse atalho é o mesmo que muitos outros produtos IW. Eu tenho isso, eu vou copiá-lo e colá-lo. Por quê? Eu vou diminuir o zoom, eu estou usando isso como um guia aqui para me mostrar onde eu deveria estar projetando dentro de. O que eu vou fazer com ele, eu vou pegar o preenchimento e eu vou apenas baixar a opacidade deste preenchimento direito para baixo. É apenas uma dica no fundo para me mostrar quando meus limites são. O que eu também vou fazer com ele é que eu vou trancá-lo para que eu não possa movê-lo. Com ele selecionado, você pode clicar com o botão direito do mouse e bloqueá-lo. Há algumas maneiras de conseguir trancar. Eu uso os atalhos Command L em um Mac ou Control L em um PC, e você só obtém esse ícone de bloqueio. Você pode desbloqueá-lo facilmente clicando nele. Isso está me dando minha largura e significa que não posso movê-la agora. Posso selecioná-lo, mas não posso movê-lo. Uma das coisas que quero fazer é que está acima de tudo aqui nas minhas camadas. Quando tento clicar na minha navegação, está no caminho. Vou clicar em segurar e arrastá-lo, para que ele esteja na parte inferior e você possa ver lá no painel de camadas que ele está bloqueado. Se você não consegue ver suas camadas, clique neste pequeno ícone aqui. Vou clicar nisto e vou segurar um atalho. Mantenha pressionada a tecla Alt em um PC ou a tecla Option no Mac e arraste um lado, você verá que ela sai em ambos os sentidos. Não importa como se arrasta, mas é isso que quero começar. Eu tenho um guia aqui para saber onde é o centro do nosso site e minha navegação vai todo o caminho ao longo do topo porque é assim que eu planejo tê-lo no meu resultado final e ele apenas fica bom no meu wireframe. Uma última coisa antes de irmos é que aqui no meu wireframe, o modelo que você deve ter notado e já corrigido isso, você pode ter fontes faltando. Clique no botão e você pode sincronizar as fontes usando kits de tipo, agradável e fácil. Não ignore e se você não pode corrigi-lo, não se estresse, ele vai funcionar muito bem com este tutorial. Se você não consegue encontrar as fontes, nada de grande drama, mas se você pode corrigi-los, então vamos para o próximo vídeo. 7. Trabalhando com tipo em seus wireframes XD: Olá, neste vídeo, vamos olhar para Type in XD. Vamos atualizar alguns dos equipamentos de navegação aqui. Vamos falar sobre quais fontes podemos usar e não podemos usar. Vamos fazer um pouco de alinhamento e distribuição e vamos atualizar o logotipo aqui no canto superior esquerdo, muito emocionante, não realmente, mas algumas coisas essenciais. Vamos entrar e fazer isso. Trabalhar com Type in XD é muito fácil, vamos cobrir fontes web mais específicas e outras coisas mais tarde quando entrarmos em nossa versão final de alta fidelidade. Mas o básico para o momento é que eu quero substituir este XD pelo nosso logotipo comercial. Então eu vou selecionar nele e excluí-lo, selecionar meu título. Agora, você pode estar inclinado a começar a usar o logotipo da marca para a empresa, não é prático e arame frames, você só tem que mantê-lo realmente simples em quadros de arame e, em seguida, deixar sua criatividade correr livre nas versões de alta fidelidade do versões finais. Eu sei que eu sou muito preso em como colocar um logotipo em e você gosta, “Eu só vou usar a cor da marca para a navegação”, então você começa a escolher fontes e, em seguida, antes que você perceba “Eu só vou usar a cor da marca para a , você vai totalmente projetar um quadro de arame deve ser um processo bastante fácil. Então eu vou colocar o QG do INSTRUTOR para que o nome da empresa, e eu não vou me preocupar com nada exceto a cor, aqui preencher, apenas que ele pode ser visto. Então, o básico está aqui. Você tem o tamanho da fonte e você tem sua fonte obviamente, e os diferentes tamanhos ou os pesos, e você só tem algum tipo básico. Você tem os espaços entre letras, então eu posso abrir talvez 200 e eu tenho um pouco mais de espaçamento entre os personagens. Eu não quero estar fazendo isso neste processo e isso é excluir o espaço entre as linhas. Agora, um dos truques úteis quando você está trabalhando com fontes é esta coisa aqui não é como um drop-down, você tem realmente digitá-lo e por isso é fácil como às vezes apenas clicar em “Hold”, e ver este pequeno ponto aqui, pegue que seta preta, veja este pequeno ponto branco, ele faz algumas coisas, se eu arrastá-lo para baixo, ele faz o tamanho da fonte para cima e para baixo, o que é legal, e você também vai notar se você um pouco abaixo dele, você pode começar girando. Meu conselho, porém, é que não gira qualquer texto em um site ou design de aplicativo, é apenas bastante difícil tecnicamente obter “Type” para girar, parece uma coisa fácil de fazer, mas se você já lidou com sites antes, na verdade, girar “Type” é impossível, então temos que transformá-lo em uma imagem e é um grande drama, então tente não fazer isso. A outra coisa é que quando você está escolhendo tamanhos, você gostaria de estar em 100 por cento, você pode ver que eu estou em 75 por cento. Então eu estou começando a tomar algumas decisões sobre, “Oh, isso é grande o suficiente?” Mas quando você não está 100%, você pode tomar algumas decisões ruins. Então, se eu entrar e, em seguida, comandar um em um Mac, controlar um em um PC, então você pode ter uma noção de que estes são os tamanhos reais que os usuários vão ver, então eu sinto que eles são muito pequenos e isso é bem grande. Eu vou encolher isso um pouco, o que é isso em 20? Então eu posso arrastá-lo aqui, obviamente digitá-lo ali. Eu vou manter um tamanho de fonte realmente consistente, 16 é um padrão básico, a maior fonte que você quer estar usando. Vou clicar nesses caras também. Na verdade, eu vou estar ajustando alguns desses, então eu não quero, eu tenho três deles que eu quero. Vou selecionar os três. Na verdade, não, vamos apenas fazer um e depois duplicá-lo. Eu só vou usar minha seta preta, apenas excluí-los, e eu vou clicar neste primeiro. Este vai ser um exemplo, e eu vou fazer o tamanho da fonte até 16 para coincidir com a outra coisa e eu quero um par deles agora. Um pequeno truque é que você pode selecioná-lo e ir para editar, copiar e colar ou Control D em um PC ou Command D em um Mac e isso lhe dá dois deles. Mas acho que a maneira mais fácil é, com a seta preta, com esta opção selecionada, mantenha pressionada a tecla “Opção” no Mac, a “tecla Alt” em um PC e arraste-a para o outro lado, e você notará que, assim que arrastá-la segurando a tecla para baixo, você recebe uma duplicata. Preços, login. Lembre-se, estou tirando isso dos meus recursos. Estas são as principais coisas que precisam entrar e, neste caso, o último é se inscrever. O que eu quero fazer é que eu provavelmente quero esse cara no limite aqui, talvez um pouco dentro, e eu vou segurar Shift e selecioná-los todos. Eu tenho minha seta preta segurando Shift e apenas clicando em cada um deles, e na verdade eu poderia arrastar este um pouco mais longe. Você pode arrastá-los e você assiste, você pode ver os espaços entre eles começar a forrar, você vê aquele ponto rosa ali? Então você pode fazer isso, então eles serão iguais, Cabe a você, ou se você selecioná-los todos segurando turno e usar esta opção aqui em cima que diz, veja esta quarta opção aqui diz, distribua horizontalmente, apenas espalha todos eles para fora. Agora, a outra coisa que você precisa fazer é como eu, brigando com você mesmo para não passar e escolher uma fonte melhor, apenas uma melhor, e talvez usando superiores e baixos e você só quer manter isso fora do momento. Você quer que ele seja realmente desajeitado, estrutura de arame funcional, sem estilo. Enquanto eu passo e os alinho bem, não há muita coisa que você pode ignorar. Tudo bem. Então vamos ser nós para o próximo vídeo. 8. Como criar formulários, caixas de seleção e botões no Adobe XD: Ei aí. Neste vídeo vamos fazer algumas caixas de entrada e algumas caixas de seleção e um botão. Também analisaremos a criação do nosso primeiro estilo de personagem. Então vamos começar a criar agora. A primeira coisa que eu quero fazer é pegar a ferramenta de retângulo e apenas dividir um pouco de espaço. Esta vai ser a minha caixa de bordo. Está acima da dobra, é a minha mais importante. É pedir às pessoas para se tornarem membros ou pelo menos provarem o curso. O que eu gostaria de fazer é, eu sou pesado com um preenchimento branco, a fronteira aqui, eu vou mudar um pouco para ser escuro. Sabe como eu digo para não girar muito escolhendo fontes e cores. Às vezes, não consigo evitar. Mas eu acabei de escolher um cinza um pouco mais escuro e eu vou reutilizar este cinza ao longo do curso. Então veja este pequeno botão mais aqui, eu apertei mais, e isso significa que é facilmente acessível. Vou fazer a mesma coisa por aqui. Vou clicar na navegação. Eu vou clicar no azul, e eu vou adicionar isso para que seja agradável e fácil de reutilizar. O que eu também vou fazer é acertar este pequeno ponto aqui. Ele pode ser arrastado por suas cores. Vou arrastá-los para o canto superior esquerdo para que ele fique totalmente branco. Não se preocupe com esta navegação no momento. Então eu tenho uma cor branca pelo menos lá e um preto completo. Então eu estou arrastando todo o caminho até o canto inferior esquerdo, clicando e arrastando por aquele canto. Então eu tenho pelo menos algumas cores básicas para começar a trabalhar. Então eu vou sentá-lo, minha navegação de volta para o azul. Agora, por que estou usando azul? Aconteceu de ser o único que está no modelo e eu estou relutante em ir escolher a cor da marca para usar, talvez o verde da cor que eu poderia começar a usar. - Não. Você poderia usar preto e branco. Isso é bom. Esta vai ser a minha caixa de bordo. O que eu vou fazer é apenas bloqueá-lo, lembrar Command L, ou Control L em um PC, na verdade um pouco do tipo no topo aqui primeiro. Isso vai ser quando minha mensagem de embarque for. Vou fazer com que isto seja apenas uma fonte maior. mensagem de bordo vai aqui. Eu tento não adicionar nenhum diálogo real ou material de marketing real aqui. Novamente, apenas para mantê-lo simples, dado a idéia do que o título vai ser útil. Então, agora, quando eu quero um campo de texto ou uma caixa de entrada, então eu vou ir e obter do meu modelo. Aqui, meu grampo, eu estava olhando em volta e eu descobri que há uma seção de formulário. Então acho que é escolher o estilo que você mais gosta. Vou pegar este aqui. Vou copiá-lo, colocá-lo de volta para a minha opção aqui. Isso funciona para mim. Em vez de entrar, vou colocar o nome do seu curso. Eu estava apenas revendo minha coisa que não tinha mensagens de marketing ou nenhum tipo real, mas não conseguia pensar em uma maneira melhor de descrevê-lo sem realmente escrever o texto neste caso. Em termos do texto, eu vou manter tudo cinza, apenas mantê-lo chato consistência através do acelerador, e eu vou adicionar um pequeno sinal de mais aqui apenas clicando uma vez, apertando mais, selecionando, Eu poderia torná-lo um pouco mais grosso para que ele possa ser visto, ousado, tamanho sábio provavelmente precisa ser para cima, 30 mesmo, Black Arrow, mover para a posição. A próxima coisa que quero é uma caixa de seleção. Você pode arrastar essa coisa por aí se você realmente quiser se encaixar nas coisas. Normalmente é muito legal. O que você pode fazer é se você está achando isso um pouco difícil, é deixar isso para trás e apenas usar seu teclado. Estou usando minhas teclas de seta no teclado só para movê-lo. Você pode segurar Shift, e usar as teclas de seta e ele se move em pedaços grandes, e sem ele apenas se move em pequenos pedaços. Agora quero uma caixa de seleção. Então eu vou saltar de volta para a minha armação de arame. Tem um bem ali. Isso vai fazer. Eu tenho ele e eu copio, mova-o para o outro lado. Vai estar em algum lugar lá. Vou clicar duas vezes nele, e vou dizer, “Use um vídeo de amostra.” Eu vou usar a minha cor que eu estou usando durante todo o tempo. Em seguida, eu quero colocar um igual e agora eu vou colocar em um botão aqui. Então, eu vou encontrar um bom botão simples, espero. Há um botão lá para mim. Vou desagrupar estes. É uma unidade única. Eu vou copiá-lo, movê-lo através, colá-lo, e é isso que eu vou usar. Este vai ser o mesmo, e este diz “preview”. O que posso fazer é selecioná-lo, torná-lo santificado. Agora você vai notar que na verdade é um grupo com a caixa externa, mas não está conectado. Eu vou desagrupá-lo, para que eu possa arrastá-lo para o meio aqui. Agora, em termos do tamanho da fonte, eu decidi ir para um maior, o que temos aqui? Catorze. Eu tenho 16 e 14, então eu poderia realmente fazer isso um pouco mais consistente. Você, você, e você, e você, todos serão 14 também. Eu sinto que é um tamanho de fonte melhor. Há algo estranho, vou me livrar dele. Uma das coisas que acontece comigo quando estou projetando aqui é que você pode ver, eu acho difícil ver as duas bordas. Quero ficar a 100 por cento. Estou desenhando o tamanho certo, mas é difícil ver os dois lados. Você vai ter que ligar e desligar isso se você estiver trabalhando como esta tela aqui é um MacBook Pro. Acho que é 15 polegadas. Então a tela não é grande o suficiente. Se você está no 13, você está em um monte de problemas. Mas espero que você esteja trabalhando em um monitor externo. É o que normalmente faço quando não estou gravando. Eu só tenho um monitor extra maior, monitor 4K que eu conectei para trabalhar. Eu vou pelo menos fazer isso centrado, lá dentro. Isso parece legal. Bem, a última coisa que eu esqueci de fazer é, você pode pular agora nós não estamos ficando mais emocionante, eu vou adicionar uma pequena opção aqui que vai dizer, “Escolha seu arquivo e um plus.” Eu vou usar a mesma fonte e outras coisas que isso, então o que eu queria fazer é que eu realmente vou mergulhar em um pouco de estilos. Nós não vamos usar estilos muito neste nível. Então, com este selecionado, eu vou desagrupá-lo para que eu possa selecionar em apenas este tipo. Vou abrir o que é chamado de painel de ativos. Então aqui em ativos, eu posso ter algo chamado estilo de personagem. Então, é como estilos de caracteres de outros produtos como Illustrator ou InDesign, se eu clicar nele, é como um tamanho pré-fabricado que eu posso reutilizar facilmente. Se eu clicar nele, e clicar nele agora, todos combinam. Se eu atualizar este clicando com o botão direito do mouse nele, vou editar e dizer mais tarde e decidir: “Na verdade, não. Acho que 16 precisa ser usado.” Você pode ver tudo vai e fica atualizado. Você pode ver que este não era parte desse estilo, mas excedeu alguma magia hoo-do onde ele alcança o documento e encontrar os que são exatamente os mesmos e atualiza aqueles também. É super útil. Na verdade, vou voltar para 14. Uma coisa que posso fazer para que pareça um link que pode ser clicado é fazer um sublinhado. Estranhamente, você não pode fazer sublinhados ainda no XD, é a visão um, então nós vamos cortar um pouco de folga, mas ele tem um dos importantes, então eu vou pegar a linha dois e fingir um sublinhado. Para indicar um pouco de hierarquia entre isso ser o mais importante e este ser o bit nicks, eu poderia realmente usar um tamanho ligeiramente diferente, 14 e ajustar isso em. Eles podem ir por baixo. Você pode usar nosso vídeo de amostra ou escolher seu próprio arquivo. Quando chegarmos a uma versão de alta fidelidade, vou ser capaz de mostrar isso muito mais e limpar. Estou brigando com eles. Eu realmente quero passar algum tempo fazendo isso parecer uma segunda opção, mas vamos deixá-la lá por enquanto. Vamos para o próximo vídeo. 9. Ícones gratuitos para seus projetos do Adobe XD e UX/UI: Ei, nesse vídeo nós vamos encontrar ícones. Você pode ver o vídeo aqui é um ícone mural lá, há uma imagem um. Então nós vamos mostrar os principais lugares para ir e reunir ícones consistentes e esses três lugares principais, e então vamos colocar isso bem rápido. Só o resto da página e vamos verificar no rodapé. Então vamos fazer isso agora. Então eu quero alguns ícones. Eu estou olhando para o meu wireframe aqui e eu tenho uma grande caixa embaixo que vai ter este vídeo de reprodução automática, este vídeo de “como”. Debaixo disso há um grande infográfico. Então eu preciso de alguns ícones, eu preciso de um vídeo, eu preciso de um botão de mudo e eu preciso de um ícone que mostre uma imagem porque eu obviamente não quero usar imagens reais específicas e vídeos específicos. Uma pequena nota lateral, você pode realmente colocar vídeos, vídeos reproduzíveis dentro do XD no momento. Então, queremos alguns ícones. Há alguns lugares para obtê-los. Um dos lugares fáceis é fornecido pela Adobe. Então, você clica no logotipo da Creative Cloud e ele fica aqui em um Mac, e fica no canto inferior direito em um PC. Você quer ir para Ativos e, em seguida, Mercado, clique neste pequeno ícone de Pesquisa e digite o ícone que você está procurando. Em vez de fazer o vídeo primeiro, fazemos imagem porque eu não consegui encontrar um bom vídeo aqui, mas você pode encontrar uma boa versão de imagem. Então isso é razoável, consistente, como o que eu esperaria como um espaço reservado para uma imagem. Você pode clicar sobre eles. Verifique se este é um SVG de gráficos vetoriais escaláveis. Se você não está acostumado com SVGs, eles são incríveis e eles são conhecidos. Eles são como EPSs dos velhos tempos. Eles são intercambiáveis, mas são vetoriais, o que é adorável. Clique em Download. Para onde vou baixá-lo? Vou fazer uma nova biblioteca para este projeto. Vou chamar esse instrutor. Vamos escrever o QG, o nome da empresa. Espero que seja baixado para lá. Você pode ver que está sincronizando aqui. Vai levar um pouco de segundo. Se eu voltar para o XD. Agora, se eu for para Arquivo, abra minhas Bibliotecas CC, é onde eu salvei t, e você pode ver aqui eu tenho um elemento não suportado. Isso é um pequeno problema, eu acho. XD é novo e ainda não suporta SVGs. Se você baixou um JPEG ou PNG, ele funcionará, mas não SVGs no momento. Há uma solução fácil e tenho certeza que eles estão trabalhando duro para atualizar isso. Vamos fechar isso. Acho que é fácil entrar em algo como o Illustrator. Abra suas Bibliotecas da CC a partir daqui, encontre a biblioteca em que estamos trabalhando, Instrutor, HQ, lá está, clique duas vezes neles e selecione-os. Copie-os. Eu acabei de ir em Editar, Copiar e, em seguida, em XD Colá-lo. Sem grande drama. Uma coisa que eu quero fazer é eu quero mudar a cor, e você pode ver porque ele está agrupado você não pode ver as cores. Então você pode desagrupá-lo. Acabei de usar o atalho Command, Shift G em um Mac, e seu Control, Shift G em um PC ou aqui em cima sob desagrupar. Legal. Então eu tenho isso selecionado, eu vou escolher uma das cores. Este é um dos ícones que eu quero, eu vou encolher agora. Se você segurar Shift enquanto arrasta em ambos os cantos, ele fará isso proporcionalmente. Agora, sem o turno pressionado, você pode ver que é um pouco rodo. Outra coisa legal se você estiver segurando Shift, mantenha pressionada a tecla Alt também em um PC ou Option em um Mac. Então, mude e opte juntos enquanto você está arrastando um canto e ele vai do centro. Está levando o meu a um tamanho mais proporcional. Esse é um dos ícones que eu quero. Preciso de mais dois, mostrar-lhe outros dois lugares. Então, um dos mais úteis está em um site aqui, é material.io, então isso é executado pelo Google. Se você vai para /icon, há um monte de ícones legais aqui, e a coisa legal sobre eles é que eles são muito bem considerados e usados muito através, digamos, do navegador Chrome, como estamos olhando agora, bem como através de todos os telefones Android. Então use este ícone de pesquisa aqui e eu vou colocar em vídeo. Você pode ver que não é o que eu quero. Esse é o tipo de coisa que eu acho que vai funcionar para isso ou dizer parte daquilo. Cabe a você o que você acha que pode funcionar, eu vou clicar neste aqui. O que você pode fazer é escolher a cor que deseja baixar e o tamanho. Realmente não importa o tamanho porque ele vai ser um formato SVG. Lembre-se daquela coisa do Vector, isso é incrível. Então você clica sobre isso e ele vai baixar um SVG para você. Se você quer um PNG, você pode pegá-lo a partir daqui. Já baixei para nós e estão nos seus arquivos de exercícios. Então o que você pode fazer é voltar para o XD. Você pode ir para o arquivo e você pode ir para a importação. Lá, encontre seus arquivos de exercícios, encontre ícones, e há alguns aqui que vamos usar. Vou usar este aqui, diz IC Webcam. Vou clicar em Importar e tenho uma pequena webcam. Mais uma vez, talvez eu tenha que desagrupá-lo. Apenas vem para baixo como um pequeno grupo agradável, com ele selecionado, agora eu vou escolher o azul. Eu provavelmente vou conseguir o tamanho maior, e agora eu vou encontrar o último no meu último lugar, que é o meu ícone Mudo. Vamos ver de onde podemos conseguir isso. Então este é o último lugar, há milhões de lugares para encontrar ícones. Eu sei sobre iconfinder.com é um lugar muito bom aqui se eu quiser procurar um botão mudo. Você pode ver que há algumas opções pagas, mas você também pode dizer Vector, Eu quero Free, e eu quero que haja No Link Back para uso comercial. Muitas vezes vou a esses e você vai encontrar muitas opções aqui. A coisa boa sobre este site é que muitas vezes você pode encontrar um grupo consistente agradável. Digamos que você decida que gosta deste estilo, mas se eu clicar nele, você vai notar que é parte de um grupo maior que pode ser super útil. Mas no meu caso eu quero algo bem simples, então eu vou usar este aqui. Sim. Quero a opção SVG e vou baixá-la. Já baixei um e podemos ir buscá-lo agora, mas esses são os três lugares. Você pode obtê-lo no mercado da Adobe. Você pode obtê-los a partir de material.io/icons, ou você pode obtê-los no Iconfinder. Acho que você tem que usar esses três lugares para encontrar tudo o que eu preciso. Não há nenhum lugar ainda que tenha tudo o que eu quero. Então vamos trazer o último, então eu vou para o arquivo. Eu estou indo para importar e há uma opção aqui chamada volume off, eu vejo volume off. Na verdade, um pouco diferente do que quando olhei antes. Vou desagrupá-lo. Clique nesta coisa, eu vou escolher o ícone azul. Agora vou começar a usar isto no meu grande aperto aqui. Então vamos fazer isso. Vou diminuir o zoom e quero que você, meu amigo, desbloqueei e quero essa parte também. Então mantive a tecla Shift pressionada e clique em ambos. Agora, se eu segurar o Alt enquanto os arrasto, nós trazemos estes dois grandões aqui. Então há 1, 2, e depois há outro aqui em baixo na minha pequena maquete ali. Ótima. Este de cima é o de vídeo, e este aqui é a imagem. Agrupe estes juntos. Está indo muito bem, Dan. O que você pode fazer agora é realmente apenas avançar para o final e ir para o próximo vídeo, porque agora eu vou apenas passar e realmente montar essas coisas. Então, não é super excitante. Cabe a você. Vai ser Auto Playing. Como vídeo. Coloque isso no meio aqui e vai ser assim, mas vai ser silenciado para começar. É por isso que eu queria este ícone. Na verdade, vou enchê-lo de branco e ver se consigo agarrá-lo de novo. Mantenha pressionada a tecla Shift usar minhas setas para movê-lo, essa é a minha solução para tentar mostrar isso. Vamos colocar isso nesse silencioso, esse é o cara e colocá-lo no meio. Estou fazendo assintota, ótimo. Agora este aqui é algo semelhante esta é a linha acima. Este vai ser o meu Infográfico para o ecossistema. Agora, porque isso não é realmente tem que sair para usar o teste. Não precisávamos ser explícitos com o que quer que seja. Eu amo wireframes, obter as idéias para baixo, mas não todo o teste do usuário que deve ser feito com uma versão completa de alta resolução. Vão ser pessoas que discutem comigo sobre isso, está tudo bem. Você está na mensagem de embarque. Esta aqui é duas pequenas listas, o que eu vou fazer é seccionado para mostrar duas peças. O slide aqui, vai ser lista passo a passo para o marketing você mesmo. Este aqui vai ser o mesmo, mas este é marketing do seu curso, eu alinhei, separá-los no meio, você pode ir lá, você precisa estar realmente no meio e eu vou usar dois estas imagens mantendo a tecla Alt pressionada enquanto estou arrastando ou Option em um Mac. Este aqui vai ser para o meu painel. Haverá um exemplo de painel de instrutores. Este é um pouco especial como em, eu realmente quero saltar para o meu wireframe e descobrir que há chamada para ações. Havia um pouco aqui com gráficos e outras coisas, é aqui embaixo, preços e seleção de tabela. Eu quero começar a pegar alguns desses gráficos de pizza e outras coisas, mas eu ainda sinto que provavelmente há muito detalhe nisso para o que eu preciso no momento. Só vou manter as coisas simples. Vou manter isso longe do meu exemplo de painéis de usuários. Vai ser outra imagem e aqui vai ser o meu download do aplicativo. Aqui você vai selecioná-los todos e baixar. Basta colocar um aplicativo para iPhone. Isso foi solicitado pelo cliente, vamos garantir que isso seja incluído. A última coisa aqui em baixo seria uma lista. Eu só estou acordando este item também, este aqui e este vai ser minha lista de recursos. Agora, neste caso eu preciso de um pouco de texto corporal, eu vou pegar um pouco de Loren ipsum. Ainda não havia nada embutido no XD. Você pode usar o InDesign ou fazer o que muitas pessoas fazem e acessar lipsum.com. A coisa boa sobre o site é feio, mas você pode dizer quantas palavras você quer. Eu quero que eu realmente apenas um parágrafo, por favor. Ele gera como um parágrafo muito grande. Eu só vou pegar esta pequena frase do punho. Vou usar isso como texto do titular do lugar. É muito comum usar comprimento misturado para fazê-lo. Vou usar a minha Arial. Vou certificar-me de que estou a 100 por cento e, na verdade, esta coisa aqui, 14 é muito pequena. Não há marcadores no XD no momento. Você pode copiar e colar um de outro programa ou manter pressionada a Opção oito. Mantenha pressionada a opção em um Mac ou O um PC, basta clicar no Oito, a tecla número oito lhe dá esse padrão. Eu vou usar isso repetidamente, na verdade, o que eu faço é copiá-lo e colocar em um monte deles e, em seguida, espaçamento com o espaçamento de linha aqui. Quanto? Certifique-se de voltar ao Comando 1 e, em seguida, o espaçamento entre linhas será 32, digite eles caem. Vai ser isso por enquanto. Basta colocar suporte para isso no momento, duas colunas talvez. Tudo bem, ótimo, então é a maior parte. Uma das últimas coisas que eu quero fazer é pegar um lugar titular rodapé a partir daqui. No topo havia esses elementos de interface do usuário. Eu vou pegar qual deles, eu não estou super preocupado no momento, deixe-me pegar esse cara aqui, eu vou apenas Copiá-lo, tocar através Colá-lo e encaixá-lo, desagrupá-lo, segurar Alt como o que que fizemos para o cara de topo ou Option em um Mac. O que eu estou fazendo é dobrando isso agora então eu vou pegar minha ferramenta Apple na verdade, eu nunca uso a ferramenta Apple, eu realmente simplesmente não clique na borda aqui e você é capaz de redimensioná-lo. Eu vou ter que ir e mudar isso porque se você deixar isso como XD e algumas outras coisas, cliente apenas volta e diz, “hey, este não é o nosso endereço” e você tem problemas desse jeito. Eu só vou colocar em e eu vou colocar em estrada amostra, amostra na Califórnia está bem. Nosso número vai ser 0, 0, 0 e isso vai ser amostra. Podemos muito bem colocar o QG do instrutor. Qualquer outra coisa, que eu quero mudar rapidamente, endereço de e-mail que está bem. Subscrever a nossa newsletter soa como algo que vamos fazer. Só uma armação e isto vai combinar com as coisas lá em cima. Temos exemplo e temos preços, temos inscrição. Eu acho que há um login também, login. Haveria que direitos autorais InstructorHQ 2018. Isso está chegando perto da nossa página inicial. Demoramos um pouco para fazer esse pedaço funcionar, mas você vai ver como depois de um tempo você tem elementos espalhados que você pode reutilizar. Uma vez que você tem o seu próprio estilo para um wireframe do que eu quero dizer com estilo como você pode ver que este aqui é, eu acho altamente projetado e parece bonito e é bom. Mas acho que tem sido muito tempo tentando fazer com que pareça realmente agradável, enquanto, isso você pode ver que é feio, mas é funcional. Não vai usar um teste. Ele foi para o cliente apenas para explicar todas as partes diferentes e ter certeza de que não há nada faltando antes de ir e passar horas fazendo o design, e passar tempo com as fontes e as imagens. Tudo bem, isso vai ser tudo para este tutorial. Vamos saltar para o próximo, é um longo. Tudo bem, vamos. 10. Criação de protótipo e adição de interatividade ao Adobe XD: Oi lá. Bem-vindo a este tutorial onde vamos começar a prototipagem e adicionar um pouco de interação. Você pode ver esses fios pendurados por aqui. O que acontece é que quando eu aperto “Play”, eu posso apertar “Preview” e, em seguida, fechá-lo e voltar para que isso vai adicionar um pouco de interação para que possamos parar de se mover em torno dessas balas e começar a fazer alguns testes enquanto Estamos trabalhando. Vamos começar. Para começar a prototipagem e conectar nossos wire-frames para que tenhamos alguma interação precisamos ter mais de uma página. Temos uma página de popa chamada homepage. Você é um par de maneiras de fazer um novo. Você pode clicar sobre isso e, bem, truque que temos usado até agora neste curso, manter pressionada a tecla “Opção” no Mac ou tecla O em um PC e, em seguida, clique na palavra “Página inicial”. Você pode simplesmente arrastá-lo e obter um novo. Eu não quero todos esses elementos, então não é isso que eu vou fazer. Vou desfazer. Podes ir ao teu último painel e clicar neste tipo, clicar com o botão direito do rato nele e dizer duplicado, e terás dois deles. Quero uma nova página. Para fazer isso, você pode pegar o popa também e apenas clicar uma vez aqui. Você pode ir e redimensioná-lo, se quiser. Se você precisa de um tipo diferente de documento, você pode ver aqui embaixo, há os da Apple, há o Google, há a Web da Microsoft. Então você pode clicar em qualquer. Digamos que eu precisava de um iPhone, e isso vai adicioná-los a ele. Isso é fácil, adicionar páginas. Antes de conectá-los, só precisamos adicionar algo a esta página para que haja algo para se conectar. Vamos renomear o onboard e esta será a nossa página de opções de pré-visualização. Quando as pessoas clicarem neste pequeno ícone aqui, eu vou ampliar. Quando eles clicam sobre isso, eles decidem sobre que tipo de pré-visualização com que eles vêem o lado do aluno, ou o lado do professor. Primeiro vou pegar alguns pedaços emprestados. Eu vou te pegar. Eu vou te pegar também. Mais alguma coisa que eu queira? Mas uma mensagem, eu vou ser você. Copie-os, clique nesta página, cole-os, eles vêm junto para o passeio. Essas são as partes que eu quero. Vou redimensionar isto para ser algo como isto e o meio. Vou usar esses dois, estou segurando o turno, para pegar os dois. Olhando para o meu arame, um desenhado à mão, eu tenho dois desses. Quero que este diga: “Mostre-me”. Na verdade, quero que os dois digam “mostre-me”. É este texto aqui. Vou usar todos os 16 pontos para o texto um pouco maior. Aqui eu quero dizer, e o que seu aluno vê. Aquele cara vai lá, eu vou escrever alinhá-los para que quando eu duplicá-los e ficar na mão, diga assistir. Você vê como o instrutor, eu vou estar interessado em dizer, eu estou apenas usando esta linguagem para começar. Vai ser o teste que me permite trabalhar fora com o fato realmente me faz desde então. Sinto que pode não ser. Tenho certeza que a degustação do usuário vai voltar e ir. Ficamos confusos aqui. Mas tudo bem, é estrela alfa. A outra coisa que quero é uma cruz. Eu poderia usar o X no meu teclado, mas isso geralmente não parece tão bom. Então eu vou passar por aqui e encontrar uma cruz. Tem um ali. É um documento prático, esse cara, não é? Vou clicar nele e agrupá-lo. Eu quero você por favor. Vou colá-lo aqui. Ele vai para cá e pode ficar azul. Agora vamos dividir essa coisa como um protótipo. Eu tenho duas páginas e eu quero ser capaz de protótipo e conectá-la. Por que estamos fazendo isso agora e não terminamos um arame, acho que é uma maneira muito estranha de fazê-lo. O que eu preciso fazer enquanto estou desenvolvendo isso, é que eu preciso projetá-lo e testá-lo em uma largura e um telefone como eu estou trabalhando em vez de esperar até o final. Você trabalha um pouco entre projetar e prototipar. Estamos no modo de design. Você pode ver que temos nossas opções de design. Se você tem um protótipo, é assim que podemos adicionar interatividade. O que eu gostaria de fazer é, antes de mais, essa é a minha página inicial. Não estou claro. Isso é um tipo de casa e será qualquer que seja a estatística anterior. Em seguida, protótipo, e você notará que nenhuma das opções muda, estamos faltando um pequeno painel de propriedades aqui. Mas o que podemos fazer é o que eu queria fazer é quando este botão de visualização é clicado, não o texto, este texto é por si só ou a caixa. Na verdade, vou selecionar os dois. Veja isso, se eu clicar fora em segundo plano e, em seguida, clique em Shift, clique em ambos, eu posso agrupá-los. Estou usando o atalho, mas o caminho mais longo é lá. Com ambos selecionados, esta é uma pequena opção que sai, é assim que nos conectamos para cima. Vou diminuir um pouco. Vou clicar em “Segurar” e arrastá-lo. Isso significa que quando esse botão é clicado, ele vai para esta página aqui. Agora você obtém algumas opções, por padrão ele vai se dissolver. Isso vai ser como um desvanecimento acontecendo e há um pouco de uma facilidade que apenas faz com que pareça agradável em termos de movimento. Este é o tempo que leva. A coisa legal sobre isso é que quem fez isso no XD, eles são todos muito doces para começar, e eu realmente não preciso mudá-los. Vamos testar essa coisa e descobrir o que precisamos fazer a seguir. Para testá-lo, usamos este pequeno botão de reprodução aqui, é visualização da área de trabalho, porque estamos visualizando uma página da web, é melhor visualizar na verdade no seu laptop. Se você estivesse projetando um aplicativo, você iria direto para dispositivos móveis para testar. Falaremos sobre testes móveis um pouco mais tarde quando começarmos a criar a versão do aplicativo, mas vamos clicar em “Play” agora. Aqui, isso é como uma pequena janela que se abre e nos permite fazer nossos testes. Tudo bem, então agora vamos clicar na pré-visualização e você vê que fez aquela pequena cruz dissolver a fé. Você pode não gostar disso, você pode alterá-lo e desligá-lo. Agora posso clicar em qualquer coisa. Estamos presos. Vou fechar a pré-visualização. Aqui eu preciso fazer algumas outras partes, então isso funciona. Você pode ver que está conectado. Outra maneira de chegar a esta coisa aqui diz exemplo, eu vou usar isso como meu botão para atravessar. Mas um dos problemas é que, que carrapatos é muito pequeno, então seria muito comum aqui no XD também. Se você tem um botão aqui, eu vou fazer uns botões falsos. Vou voltar ao Design. Eu só vou fazer uma grande área para isso bater. Vou desligar a borda, dar a mesma cor azul para que pareça o mesmo que o fundo. O que eu quero fazer é ter certeza de que isso envie o texto. Vou trazer para a frente. Pegue meu retângulo e é um pouco difícil de ver, eu acho, mas eu mudo clique para ambos e eu vou agrupá-los. Isso significa que apenas a área clicável é mais. em vez de apenas alguns carrapatos que podem ser difíceis de clicar. Vou torná-lo agradável e grande, especialmente quando chegarmos a versões móveis de protótipos. De volta ao protótipo. Apague um pouco. Quero que esse cara vá para o mesmo. Realmente não importa onde você clica nele e ele vai saltar para o ponto certo. Nós queremos dissolver. Vamos testar e mostrar-lhe alguns dos outros. Podemos fazer deslizar direito. Você pode decidir o que deseja usar. O que eu também queria fazer é este pequeno botão cruzado, Eu quero que ele colete para voltar a esta página aqui. O que eu vou fazer o mesmo truque. Então, de volta ao design, pegue essa ferramenta, desenhe algo que seja mais fácil de acertar, desligue a borda. É mais fácil mover isso para a frente do que é o outro para o lado de trás. Vá atrás desta caixa, traga-o para a frente, encontre os meus discos. Um pouco difícil. Estou usando minha tecla de seta só para tocá-la. Segundo ambos segurando o turno para clicar, ambos, agrupá-los. Agora tenho um protótipo. O que você pode achar é que arrastar e soltar é porque você pode diminuir o zoom e depois arrastá-lo aqui e isso funciona bem. Mas às vezes é mais fácil na verdade. Ou quero desfazer isso. Desfazer não está funcionando. O normal e típico desfazer quando você está no modo protótipo. O que você pode fazer, dizer que você quer quebrar isso, basta clicar e arrastá-lo para a terra de ninguém e isso vai desligá-lo. Eu acho que muitas vezes quando eu estou neste perto, Eu não quero ter que diminuir o zoom para tentar encontrar a placa do aplicativo, é você apenas clicar sobre isso, neste caso, fora de borda anterior iria funcionar ou homepage. Eu vou começar a escolher de volta para a página inicial e você vai ver que ele salta para fora assim já. De qualquer forma, você quer fazer isso. Vamos ver isso agora. Vamos brincar. Por enquanto, podemos clicar sobre isso. Risque isso para fora. Veio um pequeno slide à esquerda, o que é um exemplo estranho. Não gosto desse deslizamento. Funciona, mas fico confuso. Há uma hora especial e um lugar principalmente através de telefones onde o slide funciona, não através de sites porque nenhum site faz a coisa do slide. É apenas estranho. Vamos desligá-lo. A outra coisa é que esta é uma janela separada. Agora estou trabalhando no meu laptop no momento para este curso de treinamento. Mas o que eu faço quando eu estou trabalhando normalmente é que eu tenho um grande completo veio em que eu trabalho e eu tenho meu laptop no lado dele. Gosto de trabalhar a partir de dois monitores. O que normalmente faço é que tenho dois monitores. Tenho este portátil e tenho um grande monitor para o qual trabalhei principalmente. Eu vou ter ambos abertos um ao lado do outro e eu vou ter este painel em um deles, normalmente no meu laptop e eu vou estar trabalhando neste pote no meu grande monitor principal. A coisa legal sobre isso, é uma atualização ao vivo. Como você move as coisas aqui, essa coisa se atualiza. Eu tenho isso aberto 100 por cento do tempo. Eu poderia estar fazendo ajustes, vendo o que parece em 100% e estar brincando com as interações do protótipo para não ter que continuar cortando o botão “Play”. De qualquer forma, eu tenho que fechá-lo e abri-lo novo no momento porque eu estou apenas esperando no laptop. O que eu gostaria de fazer é um exemplo aqui. Não gosto do escorregador. Eu só vou me dissolver. Provavelmente só precisa de um salto por dissolver parece bom. Clique neste pontinho aqui. Você pode clicar em ambos os lados e eu vou para dissolver também. Esse é o básico para prototipagem. Nós vamos percorrer e construir mais páginas e protótipos à medida que avançamos, mas isso é uma introdução a ele. 11. Vídeo de produção: visão do estudante: Oi, aí. Este é um vídeo de produção. O que é um vídeo de produção? É onde eu preciso fazer algumas coisas para este tutorial para continuar. Você pode me seguir ou pular porque nós não vamos aprender nada particularmente novo. Você vê alguns do fluxo de trabalho que eu passo por isso pode ser interessante ou você pode simplesmente pular para o seguinte vídeo onde aprendemos algumas coisas novas. Neste vídeo em particular, o que estamos fazendo é criar esta página e conectar esse botão para que salta para isso, criar um botão cruzado para voltar a isso. Não há nada realmente acontecendo aqui, porque o cliente em seu resumo nos pede para não trabalhar na visão estudantil. Eles já têm visão estudantil. Querem que façamos o protótipo da visão de instrutor ou instrutor. Tudo bem, vamos entrar no vídeo e começar a fazê-lo, ou você pode pular e eu vou ficar um pouquinho ofendido. Vá então. Primeiro, começar precisamos de outra página, Acho que isso é fácil de segurar Alt e basta arrastar isso para que você obtenha uma duplicata. Adoro todas as caixas cor-de-rosa, o espaçamento automático. Eu posso renomear isso e isso vai ser Student View. Eu vou manter apenas um pedaço de polícia fora daqui. Eu vou selecionar tudo isso em você se foi. Não quero o botão, só quero os tiques e o fechamento. Aqui eu tenho alguns tiques. Isto é o que o aluno vê no front-end da plataforma. Lembre-se que o cliente nos pediu para não projetar isso, então nós apenas deixá-lo aqui para que o botão tenha algum lugar para ir. O que eu posso fazer é, porque 16 é bom, sim, esse é o tamanho final e eu vou colocar uma cruz aqui. O que posso fazer é transformar isto num botão maior. Estou desagrupando e selecionando nele. Desagrupar não está funcionando. Está totalmente funcionando. Vou colocar a borda de volta nela e tentar torná-la num círculo perfeito. A maneira mais fácil é não vinculá-los, é apenas para ter certeza de que eles são a mesma altura e largura. Selecione ambos estão alinhados horizontalmente, alinhados verticalmente, agrupá-los. Legal. Isso vai estar nesta página, não há muita coisa acontecendo e eu vou ter certeza que está no centro. Agora vamos trazê-lo para cima. Vamos para o protótipo. Vou fazer algumas coisas. É que quando este botão é clicado, o Mostre-me, eu vou agrupá-lo com a caixa azul e você pode agrupar enquanto você está no protótipo, ou design, o que é meio legal. Quando você clicar nisso, você vai para esta página aqui. O que vamos fazer é dissolver e vamos continuar com isso. Quando eles clicam neste botão cruzado aqui, eu vou levá-los de volta para a página inicial ou essa opção de pré-visualização, provavelmente homepage. Vou testar isto para ter a certeza. Vamos fazer aquele teste rápido para ver onde estamos. Você teria um clique na pré-visualização e você pode ver o que o aluno vê. Isso é o que o aluno vê, feche isso de volta para a página inicial. Acho que essa é provavelmente a melhor maneira de fazer isso. É por isso que eu gosto de ter um protótipo aberto e trabalhar enquanto você está desenvolvendo, não esperar até o fim. Esse vai ser o fim para este. Vamos fechar este, vamos para Full View Command 0 ou Control 0 em um PC. Vamos guardá-lo e entrar no próximo vídeo. 12. Como fazer e usar símbolos no Adobe XD: Oi lá. Neste vídeo, vamos olhar para os símbolos no XD. Então por que eles são bons é porque quando eu tenho um símbolo, você pode ver aqui, eu tenho a navegação usada em mais de uma página, e quando eu atualizá-lo, ambos atualizam e mudam o que é super útil para coisas que são reutilizados em vários documentos, como rodapés e cabeçalhos. Vamos ver como criá-los agora. Para criar um símbolo, vamos reutilizar isso tanto como cabeçalho como rodapé. Eu vou criar uma nova página, e há muitas maneiras, eu continuo mostrando maneiras diferentes. Eu vou voltar para a ferramenta de página, e clicar sobre isso, que é o meu padrão que eu usei no início, eu vou arrastá-lo arrastando o nome abaixo, e dar-lhe um nome, e eu chamo este de o “Instrutor Painel de controle”. Quero estender só um pouco, legal. Então lembre-se que o benefício de usar um símbolo é que eu posso conectá-los todos juntos e quando eu fizer atualizações para a navegação, digamos, nesta página inicial aqui, ele será atualizado para todas as instâncias dele. Então eu vou fazer zoom aqui, o que eu quero é que eu quero tudo isso. Começando aqui, na área cinzenta com minha seta preta, estou apenas clicando, segurando e arrastando, apenas acertando cursos como um pouco de topo. O que eu quero fazer é, você pode ver que eu selecionei lotes, mas também selecionei esta coisa azul claro que eu estou usando para me dar minhas larguras. Então vou segurar “Shift” e clicar em Início para me livrar deles. Eu tenho tudo no topo aqui. Como é que eu sei, eu arrasto para fora para verificar. Todos vieram para o passeio. Então o que eu vou fazer é você pode estar no seu painel “Camadas”, você quer ir para este aqui de cima. O painel “Ativos”. Dentro aqui, algo que eu vou “Símbolos” clique mais, e é isso. Esse é agora o símbolo que eu posso reutilizar. Deixe-me clicar em segurar e arrastá-lo e isso é útil eu acho, Eu tenho uma coisinha agradável que eu começar a reutilizar, mas eu poderia copiado e colado que eu acho. O que é realmente útil, é que agora, se eu voltar e disser, na verdade algumas pessoas usam “LOGIN” como uma palavra, deve ser duas palavras. Cabe a você. Mas digamos que estivemos convencidos de que deveria ser espaço de registro. Então nós fizemos isso, mas por padrão, ele realmente se torna um símbolo único. Então este aqui em cima não mudou ainda. O que precisamos fazer é clicar com o botão direito do mouse nesse sujeito e dizer “Atualizar todos os símbolos”. Ele atualiza símbolo na biblioteca. Eu vou ter que diminuir o zoom, este aqui. Vamos lá três para ampliar, zoom em um pouco mais. Você pode ver que é o login. Então essa é a pegada para símbolos. Você começa a ligá-los a esta coisa, modo que facilmente arrastar para fora e reutilizável, mas foi realmente super útil como você atualizaria um e atualizá-los todos, então obviamente bom para navegação. Qualquer coisa aqui em cima está em todas as páginas, então eu vou fazer o mesmo aqui em baixo. Vou buscar o meu amigo. Eu vou mudar clique nesse cara, então só tenho isso selecionado, basta verificar se eu tenho tudo e eu vou conseguir um símbolo. Você não pode nomeá-los ainda, os ícones são um pouco pequenos para este. Está tudo bem. Esta é a página certa? - É. Arraste-o, vindo aqui, e lá vai você. Se eu atualizar um agora, ambos atualizarão. Algumas coisas que eu quero fazer para terminar isso é que eu quero colocar aquela grande faixa azul no fundo para que eu saiba onde estão as bordas, então você copia e aqui, cola, errado. Eu quero você e vá destrancá-lo. Copie-o, bloquee-o novamente e, em seguida, venha até aqui, clique neste painel. Se você bater colar, a coisa legal sobre isso, ele vai perfeitamente onde deveria. O único problema é que provavelmente está em cima de tudo o resto. Então eu vou apenas clicar com o botão direito do mouse e dizer, “Enviar para o Voltar”, e então eu posso usar o Comando L, ou Control L ou eu posso clicar com o botão direito do mouse e ir bloquear. Legal. Isso me dá meus limites. O que eu preciso agora é de um menu à esquerda. Estou a olhar para a minha armação desenhada à mão. Então eu quero aquele navegador esquerdo e eu vou saltar para esta coisa aqui e eu vou encontrar, um navegador da mão esquerda, onde eu posso ver um? Há uma navegação aqui que parece boa. Vai ser o meu começo de qualquer maneira. Eu vou pegar você, também copiá-lo, arrastá-lo através, colá-lo, e esse será o meu começo para este. Vou desagrupar tudo, porque são algumas coisas que preciso fazer. Preciso limpar o fundo e deixar arrumar isso daqui a pouco. Não preciso de uma maneira de ficar lá. Vir aqui requer um clique duro. Eu quero o painel de palavras, então eu provavelmente vou excluir você, mover aqui para o topo. Eu vou fazer este painel de madeira, mas eu vou usar meus 14, cerca de 75 por cento, é um mau hábito. Você tem que estar em 100 para que você possa fazer tamanhos de fonte, eu acho que este vai ser painel de controle. Painel de controle. Vou fazer isso ousado. Legal. Aqui embaixo. Na verdade, eu vou fazer este 16 usando 12 e 16 para diferenciar alturas. Agora, o que eu vou fazer também é pegar minha ferramenta superior, clique aqui. Estes são os carrapatos que vamos usar com o meu murmúrio agora, porque estou apenas preenchendo fontes. Para ser honesto, se vai haver mais genialidade nesta turma que você queira ficar por perto, eu penso em genialidade. Então, eu só estou colocando isso. O que eu poderia fazer, é colocar os pequenos pontos na frente para fazê-los parecer um submenu. Lembre-se lá eu estou colocando, ele está segurando Alt e atingindo 8, ou opção A em um PC, porque isso não tem marcadores para começar, porque um painel você para as diferentes coisas que você pode escolher. Incrível. Uma última coisa que está no meu pequeno arame desenhado à mão aqui é, e eu tenho aquele pequeno anúncio da página inicial. Agora não é uma maneira muito fácil de saltar entre páginas, você pode usar o painel de camadas, voltar para aqui e voltar para a página inicial. Não é assim tão bom, eu não acho. Esperemos que uma das atualizações nos dê um recurso como esse. Então aqui, eu não sou por que voltar para isso, mas em tomadas, mas eu fiz. Então nós vamos usá-lo, e vamos entrar aqui comando 3, um pouco mais de colar, e ele vai para esta pequena área aqui. Agora, eu acho que isso precisa ser maior, porque eu vou ter mais moedas do que eles definitivamente vão baixar a coisa do aplicativo, talvez até menor. Na verdade, não há gênio vindo. A última coisa que vamos fazer é porque vamos usar este curso, todo o instrutor e páginas. Nós vamos transformá-lo em um símbolo em si. Então vamos arrastar uma caixa por aí. Tudo isso, desmarque a cor azul mais clara e diga, seu “Símbolo”. Isso vai ser tudo para este vídeo. Se você esperou até o fim, você é incrível. Isso ficou um pouco doloroso lá no final, eu sei, mas o próximo vídeo vai ser incrível. Começamos a fazer grades repetidas. Meu Deus, é incrível. Vamos fazer isso. Agora, no próximo vídeo, soma-o. 13. Usando a grade de repetição no Adobe XD: Oi lá. Bem-vindo ao melhor vídeo de todo este curso. É sobre o Repeat Grid. Adoro o Repeat Grid. Tem um nome chato. Deveria ter um nome super excitante, mas não tem. O que ele faz é que você desenha certas linhas e ele se repete para sempre. Olhe para isso. Alguns com estes nós vamos fazer esta lista de cursos e ele encolhe e contrai e apenas continua adicionando mais e mais para sempre. Tão bom que adorei. Vamos aprender como fazê-lo agora neste vídeo. Vamos usar a Grade de Repetição no nosso painel aqui. Vou tirar uma caixa de flecha e para onde vamos? Vamos para a ferramenta de retângulo e desenhar uma caixa aproximadamente sobre esse tamanho. Vou cortar uns três passos. Vou adicionar um pouco de texto fictício e digitar estatísticas e vou usar meu estilo de personagem. Eu poderia realmente usar este 16 para este. Vai ter estatísticas e vai haver um número no meio, qual número. Eu não tenho certeza ainda então provavelmente sinal de dólar para começar. Vou colocar 4 mil dólares. Isso vai ter coisas como a receita mensal recorrente, quantos visitantes no lado, quantas vendas este mês versus mês passado também as estatísticas do painel. Estou só a colocar isto, a tentar não o desenhar. Tentando não fazer isso. Apenas algumas noções básicas. Então precisa ser um pouco de dicas de explicação no fundo. Vou pensar que vou roubá-lo da página inicial. Isto irá apenas descrever o que está acontecendo neste bloco em particular. Lá vamos nós. Pasta, sim, isso parece lindo. Vai ficar no meio. Eles vão todos para o meio, vamos fazer isso. Vamos até selecioná-los todos e fazer corretamente novamente. Temos o nosso azulejo. Na verdade, tem de haver um botão para ver mais. Eu vou adicionar um pouco mais provavelmente neste canto superior aqui para que você possa clicar. Não sei se eu deveria ser os três pontinhos, ou o sanduíche de navegação agora provavelmente não tenho certeza. Decidirá e usará um teste. Tenho o meu azulejo. Vou selecionar todos esses potes. Este é o botão mágico aqui. Repetir Grade deve ser legal. Eu não sei algo mais incrível, o botão incrível ou algo assim. Eu clico nisso e olha o que acontece. Magia assim como duplica, o que é legal, mas é ainda mais incrível olhar para isso. Eu não tenho certeza de quantos desses nós vamos realmente ter. Eu vou fazer isso muitos. As coisas que você pode fazer para fazer ajustes é que você pode obviamente ver essas coisas cor-de-rosa aparecendo entre as linhas. Posso arrastá-los para expandi-los ou contratá-los. Você pode ser negativo. Na verdade, eles estão bem do jeito que estavam antes. Vou deixá-los assim. A Grade de Repetição irá obviamente duplicá-los. Mas o que fica legal é que eu posso pegar a ferramenta de tipo que eu posso realmente fazer estes bastante únicos. Este pode ser 50 mil. Pode ter a ver com os números. Agora, veja se eu poderia ajustar os números. Eu vou realmente fazer isso centrado. Eu vou pegar isso e torná-los todos centrados. Mas se eu parar de movê-los fisicamente, eles estão todos conectados. É o melhor de ambos os mundos que eu começar a passar e realmente colocar em dados diferentes, porque eu sou apenas um representar as coisas diferentes, portanto, eu tenho controle total sobre se eu quiser realmente excluir o botão mais, eu apenas excluí-lo de um e todos eles excluídos. Se eu adicionar um. Se eu decidir que quero acrescentar algo a esse cara, você vai notar que todos eles entendem. Repetir Grid é incrível. Vamos deixar isso aí. Quero mostrar um último recurso incrível para o Repeat Grid é que você pode trabalhar com imagens também. O que eu vou fazer é eu vou construir a página de cursos, que é a próxima página desta lista. Na verdade, o que eu vou fazer é que eu vou acelerar porque não é nada de novo. Vou fazer uma nova página e construir o primeiro elemento. Vamos acelerar por isso. Tyler, leve-o embora, acelere e vejo-te quando acabarmos. Aqui estamos na nossa página do curso. Vou selecionar tudo. Vou ao Repeat Grid. Assim como fizemos com o treinador, ainda estou espantado com isso. Toda vez que eu uso isso é incrível. Digamos que temos esses mini cursos. A imagem a que me referia agora é provavelmente a minha coisa mais excitante para mostrar a alguém. Na verdade, estou em nossos arquivos de exercícios. Estou em Imagens e encontrei todas as nossas Imagens de Curso. Selecionei todos eles. A maneira mais fácil é poder ver a janela do Finder ou, se você estiver em um PC, abrir a janela e arrastá-la de lá para qualquer um desses quadrados azuis. Pronto para a magia. Meu Deus, isso é magia. Estou super entusiasmado com isso. Passa e apenas os replica todo o caminho. Sim, eu adoro isso. Repetir Grid , estende a arma mágica. Significa que ainda posso ter um pouco de controle. Lembre-se, eu posso selecionar aqui e eu posso encontrar minhas grades aqui e eu posso abrir e fechar estas. Diga que quero todos juntos ou talvez um pouco separados. Eu tenho um pouco de ajuste e dizer que esta lista de verificação aqui, eu preciso ir e mudar isso para o preto ou o cinza. Fácil de ir e atualizar. Agora, você pode fazer isso com texto? Sim, você pode. No seu arquivo de exemplo, você só precisa de um arquivo de texto. Como este aqui ele tem um monte de nomes lá e eu só vou ter certeza que não é um ou um arquivo TXT ou RTF ponto, apenas algo realmente básico, nada que tem qualquer formatação como Word, ou PDF. Apenas um documento de texto antigo simples e, em seguida, basta clicar em segurar e arrastar o próprio documento real através de um dos títulos e bingo. Quão legal é isso? Eu amo o Repeat Grid e eu não poderia deixá-lo mais tarde no curso especialmente essas imagens porque é simplesmente muito especial. Mas para este grampo real, estamos ficando muito detalhados e bem. Eu vou ter que passar e desfazer para me livrar de todas essas imagens e voltar para onde era só Jane simples. Eu provavelmente deveria ir mover esta largura aqui e apenas colocar em curso de amostra. Isso é tudo para Repeat Grids. Eu os amo, mas você deve estar cansado de eu falar sobre eles. Vamos para mais da maravilha no XD e outro vídeo. 14. Fazendo o modelo de um aplicativo no Adobe XD: Neste vídeo vamos olhar para a construção da versão para iPhone apenas na versão dos produtos OWL. Em seguida, vamos ligar sobreposição, para que ele deslize um ao lado do outro. Vamos construir isso agora. Temos trabalhado com os wireframes para os modelos de wireframes do UCSD para a web. Queremos ir e abrir aqueles para celular. Em seus arquivos de exercícios e os modelos de interface do usuário sob wireframes é um dos dispositivos móveis legais. Eu estava acordada e dizendo algo assim. Mas, obviamente, para telas móveis. Para começar, estou procurando colecionar o tipo de integração. Eles têm alguma coisa de integração? Eles fazem, legal. É esse tipo de coisa quando você abre a tela e tem o salto do Nick. Só para lhe dar um pouco de uma visão geral do produto. Então meus wireframes, meus desenhados à mão aqui, passamos por alguns onboarding que é login e então você começa a ver o painel. Eu vou escolher um todos estes e o que eu faço é pegar este porque o que eu realmente quero, eu não quero muito disso. Eu levo-te e aceito esta parte. Quero isto e quero isto. Sim, essas são as partes que eu quero. Eu vou copiar isso e eu vou pular para menor fechar o sábio para web não precisa tê-los no momento. Só o meu projeto e a versão do aplicativo. Vou trabalhar na versão do telemóvel. Vou clicar na “Ferramenta Ad Board”, e vou escolher o iPhone 6S. Agarrei a linha pontilhada. Quando você zoom para fora o suficiente para ver você não pode ver o nome apenas se torna um três pequenos pontos. Você pode arrastá-los por aí e onde eu vou começar? Vou começá-los como uma nova linha ao longo do fundo aqui. Vou ampliar o comando 3. Zoom, zoom em um lugar específico, o que você tiver selecionado. Vou tocar “Colar aqui” e “Jackpot”. O que eu poderia fazer tão bem quanto na verdade eu vou fazer algumas edições e então eu vou e vou colocá-lo em um símbolo. Este vai ser chamado de instrutor e estrutura de QG. Sim, está tudo bem. Eu vou pegar todos eles na verdade e simplesmente jogá-los em um símbolo. Símbolo deles. Incrível, e eu só vou colocar um texto falso no meio aqui. Esta vai ser uma mensagem empolgante de integração. Eu só vou ser o número 1, ok, e você vai entrar, eu vou usar essa versão grande tem e eu vou fazer o menor pedaço de trabalho de design, e não, eu não deveria, mas eu gosto do círculo que eu vi em O último. Linhas do reitor, portanto. Bem, você está feito, você fez isso super excitante. Não sei por que fiz isso. Mas essa vai ser a minha super empolgante mensagem a bordo 1, vai haver, na verdade, vamos apenas fazer três deles. Vou clicar duas vezes neste duplo clique novamente. Você pode entrar lá muito fácil clicando duas vezes, selecionar todos os três destes, colocá-los no meio, e então lembre-se, eu posso clicar sobre eles e dizer clique direito, atualizar todos os símbolos. Mesmo que eu não tenha usado isso novamente, eu só estou atualizando o aqui, minha biblioteca. Ótimo. Quero quantos destes? Quero três. Vou segurar isso. Vou nomeá-los primeiro. Este vai ser o meu aplicativo, e este é o número de integração 1, deixar as pessoas entusiasmadas antes de se inscreverem ou terem que fazer login porque essa é a pior coisa é como, “Ei, comprometer-se com um login, enquanto o que queremos fazer é dizer, hey antes de você entrar, e é uma boa lista, coisas legais que você pode fazer.” Este é o número 1, este vai ser o número 2, e só para que o usuário saiba quando esse aplicativo prototipagem, ou pelo menos o cliente sabe que vamos apenas mudar as cores para que saibamos o que estamos fazendo. Vá, e mais uma linha para o aplicativo, e você vai ser a mensagem número 3. Número 3, você pode ser azul. Estamos ficando sem cores, nós só temos duas cores realmente. Vamos voltar ao azul. Incrível. Temos três disto e isso vai ser a minha integração. O que podemos fazer a seguir é fazer nossa prototipagem porque queremos realmente verificar a co maneira que você pode ver isso em um aplicativo, então antes de fazer isso, precisamos tornar esses botões um pouco mais fáceis de clicar, então como fizemos anteriormente . Vou selecionar sobre isso, vou clicar duas vezes nele. É por isso que não, estou lá dentro. Parece bar verde do lado de fora. Sei que estou dentro do meu símbolo. Eu vou pegar a “Ferramenta Retangular” e eu vou ter um cheio de branco. O que significa dizer: “Eu fiz isso?” Desfazer. Vamos entrar, eu posso ver a barra verde e eu agarro você, desenhar uma caixa grande e legal. Você pode ver que eu ainda estou nisso porque olha o que é quando eu arrasto para que a barra verde do lado de fora fique maior. Desligue isso. Vou copiá-lo e enviá-lo para trás. Agora, clique com o botão direito, envie para trás. Estou usando um atalho e você pode ver isso, vamos chegar lá, é Command Shift e os colchetes, que fica ao lado do pico. Eu uso isso o tempo todo porque é o mesmo no InDesign Illustrator e no Photoshop, o que é legal. Aí está minha grande caixa branca, então vai ser fácil clicar e eu copiá-la. Aqui, vou clicar duas vezes. Agora estou dentro da coisa verde e colá-lo e movê-lo para trás. Pegue esse cara, clique duas vezes nele, algum fenômeno, então a coisa verde, cole, mova e mande para trás, talvez faça com que este não toque menor. Ganhou bastante grande. Copie-o e entregue-o ali. Legal, então eu vou clicar no “Fundo”, clique nele uma vez que eu tenha selecionado. Eu tenho todo esse grupo que eu fiz e lembre-se, atualizar todos os símbolos e espero que agora aqui quando eu clicar duas vezes nele e há aquela caixa também. Símbolos são ótimos porque é significa que quando vamos e agora fazer prototipagem, eu tenho grandes caixas para clicar. Há uma plataforma para cima, nós vamos pegar a próxima caixa, e eu vou dizer quando você é clicado indo para lá, e por padrão ele está indo para se dissolver. Agora que estamos mais como o mundo móvel centrado, e vamos olhar para o slide para a esquerda. Vamos dar uma olhada nisso quando estamos pré-visualizar e o que podemos fazer apenas para mostrar a diferença é que vamos para esta versão e vamos olhar para a outra que é push lift, ok, e apenas ver as diferenças entre eles. A seguir e esta não tem como ir. O que eu poderia fazer é realmente apenas pegar outra placa e vai fazer este o aplicativo. Haverá a tela de login. Nós queremos realmente construir este momento, e então vamos apenas excluir tudo nesta página. Adeus. Isto não tem para onde ir agora, cultivar a caixa branca, você vai para lá. Vai ser o mesmo para esses botões de pular. Eu vou dizer que você vai lá. Quero que vá lá. Ignorando, vamos até o login. Isso não se conectou e pular aqui é o mesmo. Não consigo vê-lo, é por isso que tão fácil apenas para ir aqui e ir login, nome gêmeo e é bastante útil, Eu disse na parte inicial, de modo que é então feito. O que eu posso fazer é eu quero mudar esses pontos para passar, mas eu não vou me incomodar porque eu quero, mas porque é um wireframe, nós vamos apenas ir rápido, e os botões de trás precisam funcionar. Eu vou pegar esse cara, tenho um protótipo e você, meu amigo, volta para você, e você volta para você. pouco de uma falha na minha tomada de símbolos, Isso significa que esses dois funcionam, mas há um erro que não acontece de qualquer maneira aqui. Eu provavelmente vou apenas ignorá-lo ou eu posso selecionar em bom meu design. Clique nesta coisa, que é C verde em torno do lado de fora aqui, Eu posso desagrupar o símbolo, que não é grande, mas eu preciso neste caso. Então, adeus. Eu potencialmente tenho o mesmo problema com esses pontos se eu quisesse atualizá-los. Um pouco empolgado com meus símbolos. Fiquei impressionado quando o defini. O que queremos fazer agora é alguma degustação no celular. Vamos saltar para o próximo vídeo porque é um pequeno aplicativo legal que você pode baixar mais, olhe para isso agora. 15. Como usar o modelo do XD em um iPhone e um Android: É hora de baixar o aplicativo. Há uma versão para Android e iPhone que é incrível. Vá fazer o download para o seu celular. Agora, há duas maneiras de realmente colocá-lo lá, dependendo se você tem um computador Mac como um MacBook Pro ou um iMac ou se você tem um PC. Eu vou iniciar o aplicativo, clique em XD e agora se você estava usando o membro do Mac versão fest, não importa se você tem um Android ou um telefone Apple, mas é a ver com um computador. Você pode ver aqui eu conectei com um cabo USB, nada extravagante e o que podemos fazer é usar Live View. A coisa legal do Live View é que tudo o que você tem aberto em sua tela aparecerá aqui no seu celular. Agora, está a mostrar-te o que quer que tenha a casa ao lado. Se eu fizer zoom aqui, esta é a minha página inicial, você pode ver que há uma casinha aqui. Aqui estamos saltando entre telas e tudo aqui, mas você pode ver esta casinha aqui, está me mostrando isso no meu telefone. Eu quero mudar uma casinha para isso para que eu possa visualizar aqui. Então clique nesse cara, clique na casinha e você pode ver lá ele está em toda a sua glória. O que é realmente bom sobre a visualização ao vivo é que, veja isso enquanto eu começo a mover essa coisa ao redor, ele atualiza automaticamente. É muito bom ter isso configurado em uma pequena tela agradável aqui então quando você está editando, minha mesa está toda limpa. Nunca é tão limpo, só para filmar. Tenha tudo configurado, um iPad e tudo para que você possa vê-lo enquanto está trabalhando nele e fazer ajustes. A coisa legal sobre isso, bem como porque nós temos tipo de wireframe esta coisa, nós devemos ser capazes de clicar sobre isso e ir em seguida. Foi para o escorregador deixado para a terra de ninguém. Para onde vai essa coisa? Alguma razão para eu ter ligado isso a todo o caminho até aqui, isso foi muito bom. Vou ampliar, esqueci o que fiz aqui. Você vai lá, mas acho que cliquei na palavra “Próximo”. Como atravessamos todo o caminho até lá, eu nem tenho certeza. Em seguida, agora ele funciona, seguida, em seguida, em seguida, a tela em branco. Quando você está trabalhando neste aplicativo, há algumas coisas que você pode fazer para navegar nele. Você pode clicar e mantê-lo pressionado por um tempo e você tem algumas opções aqui. Um deles é navegar nas placas de aplicativos e você pode apenas ver como a grande versão de tudo o que está no meu arquivo XD, que é uma ótima maneira de voltar para aqui. Outras coisas que você pode fazer enquanto você está aqui é segurá-lo para baixo e ver este aqui, este é hotspot, daí você pode ligar isso porque se você clicar em algum lugar, você pode ver que é para as pessoas que eu quero dizer como meus pais, que precisam de um pouco um pouco de encorajamento para ser capaz de usar esta coisa distinta. Isso deve ser bom porque é o próximo eu pulei, mas se você tem algo um pouco complicado e você precisa adicionar, portanto, é provavelmente um sinal de uma má experiência de usuário mas às vezes você só precisa ter essas coisas que mostram. Só ativei alguns botões, não todos. O que mais? Então, isso é ver ao vivo se você tem um Mac conectado a um iPhone ou este velho telefone android com Paul patrulha adesivos nele para o meu filho, mas correto na tela. Você pode fazê-lo de outra maneira e a maneira é você entrar aqui e você terá a opção de, Eu vou clicar e segurar, Eu quero voltar para o meu documento, documentos XD. Documentos XD são coisas que são salvas em sua Creative Cloud. O que você precisa fazer aqui na tela é que você precisa ir para Arquivo e você precisa ir salvar como e em seu computador, não importa se é um Mac ou PC, isso vai fazer isso funcionar. Você precisa encontrar sua pasta da Creative Cloud. Sei onde está no meu Mac. Você terá que verificar novamente com a Creative Cloud que mantém suas pastas em seu PC. Eu sei que no meu Mac está em, onde estamos? Eu sei que é por aqui, está sob todo esse lixo quando você chegar à sua palavra, seu nome como meu, Daniel Scott. Aqui é com um Mac mantém-los. Em um PC você terá que dar uma olhada rápida para ver o que eles têm. O que eu posso fazer é clicar nele e eu posso colocá-lo em sua própria pasta especial ou eu posso simplesmente jogar essa coisa aqui. Este é o meu iPhone no teste e clique em Salvar. O que acontecerá é quando tudo estiver sincronizado, você verá esse pequeno ícone na parte superior aqui começa a se afundar e acabará na sua biblioteca da Creative Cloud e isso é tudo com a Creative Cloud. Magicamente, esta coisa vai ver. Vou atualizar e verificar se está lá dentro. Ainda não está lá. Eu guardei no lugar certo? Eu acho que fez. Arquivos da Creative Cloud, sim. Bem, eu vou abrir. Às vezes, você pode dar essa coisa, você pode ver que está afundando aqui e eu vou mostrar o porquê, não sei o quão grande é, mas vamos fazer uma pausa e esperar que ela afunde e eu vou pular de volta. Se isso não funcionar, o que o meu não é por alguma razão, meu pára de afundar todos os dias, não é o momento, boa desculpa para te mostrar outra maneira. Fiz login na minha conta da Adobe, portanto assets.adobe.com/files e você pode simplesmente arrastá-lo para aqui. Você pode ver que ele está carregando bem e doce aqui agora e espero que agora meu telefone, se eu for atualizar, ele vai procurar em todos os meus arquivos da Creative Cloud e ver se há algum documento do XD. Lá está ele. Esta é uma maneira que eu posso fazer isso. Eu não tenho que estar conectado ao meu telefone, então eu não tenho que usar este cabo. Eu posso tê-lo aqui agora e fazer a mesma coisa para testes. Em seguida, posso pular e o interessante é que, quando você entra em seus arquivos da Creative Cloud, é ótimo para testes de usuários, pois a visualização ao vivo é somente quando você está conectada. O que você pode fazer é ter essa coisa em campo para mostrar as pessoas, ir e ver um cliente lançá-lo ou apenas mostrar pessoas e colegas em reuniões e é o mesmo de antes. Eu posso clicar e segurá-lo e eu posso compartilhar como uma imagem. Eu posso tirar screenshots e as mesmas coisas que eu tinha antes. Isso é tudo para usar o aplicativo. A visualização ao vivo funcionará no Android e no iPhone, mas somente se estiver conectada a um Mac. Se você quiser usá-lo em um sistema Windows ou não quiser realmente conectá-lo e usar o Live View em um Mac, você pode usar ambos os sistemas. Você precisa salvá-lo em seus arquivos da Creative Cloud, seja através da versão web ou normalmente você pode simplesmente despejá-lo nesta pasta aqui, que não está funcionando no momento. É isso. Vejo-te no próximo vídeo. Tchau agora. 16. Vídeo de produção: tela de inscrição e painel: Ei aí. Bem-vindo a este vídeo de produção. Antes de pular, há uma coisa que você deve verificar neste vídeo, e é logo depois da minha pequena introdução, e é basicamente adicionar essa coisa deslizante que você precisa saber. O resto do que nós vamos construir essas páginas aqui para o nosso aplicativo. Nada super excitante, então você pode pular depois de aprender a fazer isso. Vamos entrar e fazer isso. Quero passar e criar minha página de login. Eu vou roubar a maior parte dele de um desses modelos, há a inscrição aqui, e eu vou escolher um desses e ir para o Comando 3 para ampliar diretamente. Vamos chegar perto. Qual deles eu quero? Vou usar este aqui. Ele vai roubar toda a página real porque é um tamanho de iPhone, isso é o que todos os modelos são. Vou clicar na palavra “Cadastre-se”, vou clicar em “Copiar. Vou voltar para o principal, vou colá-lo, e na verdade vou deletá-los. Vou pegar o nome, e depois você, adeus, e eu vou usar este aqui. Essa é uma das coisas boas sobre continuar usando as cores azuis, em vez de sair e escolher cores personalizadas, você tem que ir e atualizar todas as cores e outras coisas. Lá vamos nós. Para a coisa que você andou por perto, é que, quando eu visualizar isso, eu tenho esse cara aqui, eu vou para o protótipo e eu vou apenas garantir que isso é salvo em casa. Não é por padrão, então você pode ver qualquer um desses para a casa. Quando você aperta “Preview”, ele vai direto para este. Vou tocar “Play”. Estou tentando rolar para cima e para baixo, mas não me deixa. Isso é um pouco de um problema. Se eu clicar nele, você pode ver que há realmente muita coisa extra aqui. Para classificar tudo isso, vou clicar no nome, vou para Design, vou mudar a rolagem para vertical. Essa é a primeira parte. A porta de visualização está definida para 667, que é a altura exata deste iPhone aqui, e clique nele, ele é 667 também. O que eu também preciso fazer é pegar o aplicativo, eu quero torná-lo um pouco mais. Salve a porta de exibição e, em seguida, faça isso o tempo necessário. Isso pode durar o tempo que você quiser, e você pode ver que é a porta de visualização ali, aquela linha pontilhada. Tínhamos automaticamente na nossa versão web. Agora temos isso na nossa visão móvel. Só significa que se eu visualizar, ele vai pré-visualizar para isso, mas eu posso rolar para baixo agora. Permita a rolagem vertical, escolha a altura certa e certifique-se de que o seu ascendente é longo o suficiente para ver tudo. Provavelmente o que você quer fazer é apenas continuar usando este para duplicar quando você está fazendo outro slide a partir de agora, porque se você duplicar este novamente, você voltar a ter que fazê-lo repetidamente. Agora você pode pular, porque eu não vou fazer nada particularmente excitante. Vou passar e mudar isso para instrutor. Posso soletrar, não posso. Isso leva, eu realmente não quero mais. Eu vou me render, parece bom. A página de inscrição, isso é tudo bom, perfeito, página de inscrição. Eu tenho uma página de inscrição e uma página de login. Só vou duplicar isto. Esta vai ser a minha inscrição, e então aqui eu vou passar e mudar essa opção aqui. Esse pequeno corpo é usado para mostrar onde você está, então você pode alternar entre os dois, e este, tudo que eu vou precisar para login é endereço de e-mail e senha. A pessoa que fez isso ainda é feita de usar nosso KO Repeat Grid, mas eu vou desagrupá-lo para que eu possa clicar em partes dele. Vou desagrupar, e dizer que não quero, quero você. Não preciso de nenhuma informação pessoal. Tão desaparecido. Mas preciso desta caixinha aqui, e vou pôr isso no fundo. Na verdade, o que eu vou fazer é clicar na borda e eu sei que precisa ser 77, o que foi? Eu sei. Sete, desculpe, 667, está lá. Vou clicar nesse cara e sua altura agora será 667. Perfeito. Alinhar-te ao fundo. Legal. Tenho a minha tela de login e a minha tela de inscrição. Eu vou ter que montar estes juntos agora. Vamos fazer esse protótipo. Se você selecionar tudo, ele seleciona tudo no documento e mostra todos os fios, então funciona no que você ainda não fez. O que eu vou fazer é este próximo botão aqui em baixo. Você vai para a minha tela de inscrição, e eu vou fazer direitos de empurrar. Tenho que checar duas vezes esses para lembrar qual empurrar para a esquerda ou para a direita, o que parece. Chega até aqui, e então eu quero que você seja capaz de clicar no botão de login. Eu deveria fazer isso maior. Eu tenho que ir para a tela aqui. Este aqui, ia voltar por aqui. Este vai empurrar para a esquerda, tenho certeza, vamos ter que testá-lo. Vamos fazer um teste. Estou começando na tela de login, clique em “Login”, empurra dessa maneira, empurra o outro lado. Parece ao contrário, não é? Na verdade, o que eu vou fazer é este agora é para ser empurrado para a esquerda, e agora que um precisa ser empurrado para a direita. Vamos fazer um teste. Isso se sente melhor. Incrível. É por isso que você testa enquanto você está zombando todo o caminho. Temos rolagem acontecendo. Aquele não precisa de rolagem. Vamos para a última parte, e essa será a minha tela. O que eu vou fazer é eu vou pré-pegar este aqui. Por quê? Porque é longo, porque eu sei que meu próximo precisa ser longo, e ele tem todas as portas de visualização resolvidas. Basicamente você quer selecionar tudo isso, e dizer adeus. Sim, legal. Não limpa de volta ao design. Agora vamos criar o painel de ensino e a versão do aplicativo. É o painel de instrutor. Selecionei um desses casacos, e eu vou tirar e pegar meu casaco do painel, e vou usá-lo aqui embaixo. Core-os. É um pouco grande. A coisa boa sobre isso repetir tudo, eu posso você e apenas o cara da polícia está fora, e sim, eu tenho meu painel de instrutor pronto para ir, uma conversão. Eu quero muito ficar bonito. A última coisa que eu posso fazer é que eu vou fazer uma página de configurações, que você possa passar para dar-lhes uma indicação do que o aplicativo vai fazer. Estou a tentar encontrar linhas de alças. Você vê no canto superior esquerdo é onde todos os universais estão, ele vai agarrar vocês. Copie, pule. Vou pôr-te aqui. Eles são difíceis de clicar. Eu não discordo. Quando isso é clicado, ele vai saltar para instractor. Na verdade, isso vai ser apenas configurações. Nada excitante. Quero que as pessoas sejam capazes de fazer algumas coisas. Vamos apenas fazer, o que você pode fazer na página de configurações? Por que estou desenhando um botão? Eu mesmo não deveria. Aqui, eu vou fazer um texto central, e este vai ser, e você pode ser capaz de reordenar essas coisas, e repetir a grade. Tenho algumas configurações. Você pode reordená-los. Você pode ter um favorito. Eu acho que isso pode estar quebrando a regra em termos de adição de muitos detalhes. De onde estamos tirando isso? Sim, pensei nisso mais cedo. É isso que minha página de configurações precisa ter. Vou pegar você, clique duas vezes na borda. Na verdade, minhas portas de visualização não precisam ser tão grandes. O que eu vou fazer é, eu vou clicar em você, e eu vou fazer a altura 667, e nada de rolagem. Vou precisar de um botão de volta. Esse cara. Clique no botão Voltar, copiar, e aqui colar. Escolhendo o lugar certo, apenas a cor errada, e aquele cara lá também tem um pouco de cor fraca. Arrume o resto. Legal. Como manipulado. Eu vou dizer quando este botão é clicado, você vai para aqui, o mesmo com este botão, e isso é apertar direito, e isso está tudo correto. Você vai pular todo o caminho até aqui também. Quando você se inscreve ou faz login, você acaba nesta página. Quando você clica nas configurações aqui, você pode clicar neles, você vai para esta página. Então, quando quiser voltar, volte para esta página. Incrível. Vamos fazer um teste. Eu tenho um teste no meu telefone, mas você não pode ver isso, eu não quero colocar toda a câmera de novo. Você se inscreve. Ótimo, você é bem-vindo ao painel. Está empurrando para o lado errado, e então você vai para este. Vamos ter que brincar com esse empurrão para a esquerda, para a direita. Na verdade, quero testar isso de novo. Este aqui, eu clico neste, e aquele está errado. O erro deve empurrar para o outro lado. Pode deixar isso aí em cima. Eu vou dizer, você meu amigo, você vai empurrar para a esquerda, e o mesmo com você, empurre para a esquerda. Vamos dar uma chance. Por aqui, isso é melhor. Dashboard embora, que aparece, isso é bom, e embora este precisa ir para o outro lado. É só um pouco estranho, eu não posso fazer isso. Eu preciso vê-lo sendo realmente ativado para saber qual é empurrar para a esquerda e para a direita, eu não sei por quê. Agora, de volta por ali, por ali. Pois o erro está feito. Incrível. Adorável, que vai ser isso para este vídeo de produção. É uma longa corrida. O que aprendemos? Fluxo de trabalho, chamamos de fluxo de trabalho. Isso é tudo para o vídeo. Vamos pular para o próximo, vamos enviar para comentários. Vamos enviá-lo ao nosso cliente para verificar. Vejo você no próximo vídeo. 17. Compartilhando wireframes para receber comentários no Adobe XD: Oi lá. Neste vídeo vamos olhar para enviar nossos wireframes para obter alguns comentários de volta. Nós vamos usar esta pequena opção aqui e mostrar-lhe como trabalhar isso para que você possa ver isso para os colegas, ou para o cliente, ou para testes de usuários. Vamos fazer isso agora neste vídeo. A primeira coisa a ficar claro é que este não vai ser o nosso teste de usuário. O que estamos usando nossos wireframes é antes de tudo para apenas um ou dois dos meus colegas. Para você pode ser qualquer um, um amigo que eu acho que tem o vocabulário ou a compreensão para ser capaz de testar um wireframe, e dar-lhe algum feedback construtivo, ver se isso é uma parte disso. A outra opção é uma vez que eu fui ter com meu colega e eu voltei com alguns restos e tipo, hey, eu pensei que isso iria acontecer. Eu sei que é um pouco estranho, só para acordar os insetos que eu possa configurá-lo para o cliente para aprovação do cliente. A aprovação do cliente é diferente do teste do usuário, pois o cliente está esperando um wireframe. O que eu quero fazer é que eu não quero gastar meu tempo fazendo a alta fidelidade ou a versão de alta resolução deste aplicativo, eu preciso descobrir que não é o que eles queriam. É fácil enviar os wireframes. Wireframes que são fáceis de fazer, são fáceis de atualizar. É só resolver isso com o cliente, e uma vez que eles aprovam isso, então eu saio e faço a alta fidelidade e maquetes. São aquelas maquetes que mando para testes de usuários. Isso é quando eu recebo as pessoas em que um potencial usos para a minha persona e real testar o aplicativo. Algumas pessoas provam wireframes, isso é totalmente bom. Eu não os acho tão valiosos dando gostos por wireframes. Só não tenho certeza. É só que eu não encontrar valor no feedback de meus colegas, sim do cliente, sim, mas eu acho que ele precisa olhar todo canto e dança velha para que ele obtenha um feedback de usuário adequado. A outra razão é que eu sou muito bom em fazer alta resolução. Demoro muito tempo, mas não tanto, se é que me entendes. Eu posso bater para fora um belo modelo com todas as imagens e coisas muito rapidamente. Não é algo que eu tenha que terceirizar para outra pessoa. Digamos que se você é mais do pesquisador UX, ok, então totalmente você pode obter muito valor de wireframes porque o próximo passo para obter versões de alta resolução é um trabalho longo. Mas para mim não é. Discutimos que não estavam fazendo testes particularmente de usuários, mas algumas das regras se aplicam como se eu tivesse a chance, eu prefiro fazer pessoalmente sobre o caso de teste de ombro. Prefiro ter um amigo para almoçar comigo e passar por isso para poder ver as interações deles. São todos esses maneirismos que eles realmente não sabem que fazer isso é muito útil para mim. Pessoalmente é incrível mesmo com um cliente, mas eu acho que para os meus projetos menores que eu trabalho como freelancer, há sempre que eu estou normalmente apenas terminando esses links sobre. Vejamos como criar esses links e, em seguida, recebemos comentários de nossos colegas e nosso cliente. Então, para compartilhar um link, você clica no pequeno ícone, e basta digitar alguns tiings como o título, isso é bom e começar a QG e vai ser a versão 1. Você pode arrastar uma imagem aqui, apenas faz com que pareça bonita quando você está enviando links para pessoas de feito em seus arquivos de exercícios aqui e imagens, Eu fiz uma versão empilhada deste logotipo HQ. Agora você vai ver que eu fiz isso quadrado. Originalmente eu tinha retangular, mas acaba cortando mal. Se você está encontrando o seu sendo cortado realmente na praça, apenas certifique-se de que o motor de popa real dentro e Illustrator ou Photoshop é realmente quadrado, e basta ter seu logotipo dentro de lá ir. Há um arquivo IRF. Parece levar qualquer coisa boa. Outra coisa permitir comentários exatamente o que eu quero. Esta coisa aqui é muito importante. Este pouco acinzentado, mas isto, começar. Talvez seja o ícone da casa. Se eu recebi um protótipo mais cedo quando eu estava trabalhando, você pode ver aqui em baixo, eu disse isso para estar em casa quando eu estava vendo no celular. Essa é a visão inicial que as pessoas que estou enviando esta ferramenta de link recebem, que não é o que eu quero porque eu quero que eles vão direto para a página inicial. Eu protótipo vista, clique no pequeno ícone home, voltar para aqui e deve dizer começar na homepage. - Legal. Clique em criar link e magia. Isso faz com que ele se conecte eventualmente. Agora, as duas maneiras que você pode simplesmente enviar o link, é o que eu costumo fazer. Não clique nele. Posso copiar esse link e enviá-lo por e-mail para as pessoas, ou você pode clicar no botão “incorporar”. Se você sabe como trabalhar com um iframe, você quer incorporá-lo em seu próprio site por algum motivo, e você pode fazer isso. Que se você quiser, apenas um link antigo normal, você pode enviar e-mail. Essa é a única para ir de novo, então você copia. É o que parece quando estou conectado, quero mostrar como é quando digo que o envio a um colega que não tem uma Adobe ID. Eles pegam isso. Como você pode ver um pequeno ícone é a nomeação. O que eles podem fazer são algumas maneiras de trabalhar com ele. Eles podem simplesmente alternar através disso, e eles podem apenas ver tudo como isso. Mas uma boa maneira de fazer isso é ir em tela cheia. Bem, isso não é realmente tela cheia, apenas se livra do lixo ou do lado de fora e então eles podem começar a interagir com ele em vez de. Talvez eu tenha que voltar acertar Escape para sair. O que vou fazer é voltar para casa e parar de ver daqui. Você pode ter que educar seu amigo sobre a melhor maneira de usar o wireframe. Eu acho que começar do início e apenas clicar na tela cheia dá-lhes a experiência básica porque, em seguida, ele permite que eles para passar e começar a clicar em coisas. Se eu clicar sobre isso, eu vou para esta próxima vista. Agora, uma das coisas é que é bastante útil. Se você clicar em qualquer outro lugar você pode ver tudo apenas destaques, obtém-se caixa azul em torno dele. Ele só ajuda as pessoas a navegar em um site, especialmente um wireframe que você pode não ter manipulado todos os botões. Eu amarrei para clicar em algo e não está funcionando. Isso lhes dá uma dica visual sobre o que clicar. Volte para a página inicial, entre de novo. Já vimos antes, mas é o que parece. Escapar para sair. Agora, em termos de comentários, você pode clicar sobre isso. No momento, eles não estão conectados. Então eles podem clicar no botão de login aqui ou entrar aqui, ou eles podem entrar como um convidado, o que é lindo. Isso faz com que as pessoas saibam como passar por todo o drama de se inscrever. Se o fizerem, há uma boa maneira que a Adobe fez. Você pode fazer login com sua Adobe ID, mas dizer que seu colega não se lembra ou não sabe o que é, pode fazer login com logins sociais aqui com Facebook ou Google. De qualquer forma que vai permitir-lhes adicionar comentários ou você pode fazê-lo por adivinhar que eu amo. Você recebe alguns comentários iniciais e precisa atualizar esse link, há duas coisas que você pode fazer. Você pode melhorar um feedback deles e dizer, hey, isso não está funcionando ou o que pensamos sobre fazer isso ou não imaginamos que isso funcionaria dessa maneira? O que você pode fazer é dizer que você faz uma mudança e você gosta, este botão agora vai ser, você muda os tiques aqui. Vá para a visualização de design. Não tenho certeza do que estou atualizando, mas isso apenas exclui algum texto. Decidi que essa é a minha atualização e fiz uma atualização, posso fazer duas coisas aqui. Posso clicar em compartilhar novamente. Há duas maneiras que eu posso atualizar o link original, para que nada realmente muda o mesmo link que tinha sido e-mail iria funcionar, mas ele vai ter esses textos atualizados ou você pode criar um novo link, e dar-lhe um novo título. Diga que é um novo link e você é como na verdade eu quero fazer este novo link porque é como se você tivesse feito muitas mudanças e você quer chamá-lo como versão 2 algo completamente diferente. Você compartilha um link separado. Você atualiza o link que tinha ou compartilha um novo e, em seguida, você pode clicar em Gerenciar links se estiver se perdendo. Ele será carregado com sua Adobe ID. Farei isso em outro lugar. Vamos fazer isso. Feche esses dois e clique em gerenciar links. Ele abre aqui e você pode ver que há o meu QG instrutor. Estas as duas versões que eu fiz, eu provavelmente deveria ter renomeado antes de criar um novo link, como duas versões 1, vai confundir todo mundo. Mas essas são as duas versões que você pode excluir a antiga, dizer que você terminou com essa. Você não quer que as pessoas trabalhem mais nisso, você pode clicar e letras muito grandes. Diz “Excluir Permanentemente”. Vou deixá-los lá por enquanto. Você quer que eles testem em dispositivos móveis, digamos que você está construindo um aplicativo em vez de um site, vamos voltar para a extinção. Então, para pré-visualizar em um celular, não é como um fluido 100%. Você tem duas opções. Se eu tiver sido extinto realmente fácil, você apenas sombra no arquivo e eles podem visualizar como nós mostramos anteriormente em um dispositivo com o aplicativo ou o que eu tendem a fazer é eu apenas dar a eles este link, copiá-lo, e enviar-lhes um e-mail e dizer, e cole-o e diga, hey, abra este link através do seu telefone. A maioria das pessoas tem acesso ao e-mail no telefone. Eles apenas clicam no link e clicam em tela cheia e funciona perfeitamente ou eles podem copiá-lo e colá-lo em seu navegador móvel. Eles também podem digitar, mas essa coisa é muito longa. Você pode usar um encurtador de URL como Bitly ou goo.gl. Esse é um bom para encurtá-los para baixo, então é fácil de digitar. Agora outra maneira de compartilhar é realmente não compartilhá-lo de qualquer maneira, basta levar seu laptop com você e, em seguida, basta pressionar o botão play e fazê-los trabalhar nele aqui dentro. O legal sobre isso é que você pode gravar o que acontece. Posso ver aqui. Na verdade, isso é só para um Mac. Você pode clicar neste pequeno botão de gravação e na verdade, ele vai começar a gravar o que o usuário faz. Você pode me ver clicando aqui. O que eles fazem aqui. Vai gravar a minha voz também. Quando você terminar, pressione escape, e isso permitirá que você salve este arquivo como um mp4, ok, e eu vou colocá-lo em nossos arquivos de exercícios, e eu vou colocá-lo no Excel é apenas para ir para a minha área de trabalho porque eu estou indo para Bennett. Então, teste de instrutor do QG por Dan. Vamos dar uma olhadinha. Ele é o meu gosto. Eu gravei e isso é tudo o que eles têm feito. Isso pode ser uma maneira agradável e fácil de ir e obter seus amigos para ajudar ou enviá-lo para o cliente para que eles façam alguns testes e você pode gravar o que eles fazem. Mas lembre-se que a pequena opção de gravação só está disponível no Mac. A diferença entre PC e Mac é apenas ligeira. Bem, esse é um dos bons que Mac tem e mesmo, a conexão direta no dispositivo. Se você estiver seguindo junto com um PC, você percebe que o sistema de menus está construindo um pouco diferente na parte superior para corresponder a mais de um sistema Windows. A última coisa que quero mostrar é como são os comentários do outro lado. Este é um projeto de trabalho real. Eu projetei esses wireframes e envio-os para colegas e clientes para feedback. Vou mostrar-lhe um pequeno exemplo do que acontece quando eles fazem comentários. Esta é a página inicial e você pode ver, eu tenho alguns comentários e você pode ver que há duas maneiras de adicionar comentários. Estes pinos, o que é bom porque a sua realmente se conecta ao que o apontando para porque há um monte de coisas nesta página inicial. Aqui o que posso fazer, posso responder e explicar algo ou fazer perguntas ou resolver isso e dizer, na verdade, que está feito. Eu conserto qualquer que fosse esse problema e agora está tudo bem. Outras coisas que podemos fazer isso é dar uma olhada em mais alguns comentários, mais comentários, mais comentários. Vamos dar uma olhada em alguns dos gerais. Este aqui é um comentário geral para toda a página. Eles não têm pingente. Agora eu quero mostrar a vocês o que você pode fazer e o que eles podem fazer quando eles anexam, quando eles adicionam um comentário. Digamos que eu quero fazer um comentário, eles podem decidir sobre por que temos sombras de queda. Eu fui um pouco exagerado com este wireframe. Eu editei muito detalhe para ele. Eu o despojei de volta como aquele em que estamos trabalhando agora. Você pode simplesmente deixar isso lá, pressione return e ele se torna um genérico para todo o documento ou você poderia ter adicionado uma caneta. Outro ali. Eu nem sei o que isso significa, mas você pode arrastá-lo e deixá-lo lá. A coisa legal sobre isso é que ele está preso a esse ponto. Sei o feedback para onde vai, então esse será um sistema muito perverso que [inaudível] criou e a Adobe criou. Eu realmente amei que eles podem entrar adivinhando, não forçando as pessoas a entrar. Porque senão eles acabam me enviando comentários de volta e e-mails e eles são como estanho na página. O canto inferior direito tem uma coisa verde e você é como o que eles estão falando? Este comentário é super legal. Você já sabia disso porque acabou de assistir. Eu vou continuar. Vamos para o próximo vídeo onde começamos a ter alta fidelidade antiga. 18. Painel semântico e recursos de design UI de alta fidelidade no Adobe UX: Ei, ali. Neste vídeo vamos dar uma olhada em começar com nossa maquete de alta fidelidade. Também vamos analisar os recursos para ajudá-lo a começar. Como este aqui é uma interface do usuário do Windows, há alguns da Apple legal que vamos encontrar. Há um ótimo material do Google, e vamos ver onde obter nosso tipo de idéias para quadros de humor. Vamos construir uma espécie de prancha de humor rápido. Onde está, lá está ele, para nossas idéias de design, e vamos colocá-las todas juntas em nosso documento XD. Tudo bem. Então recursos e quadros de humor, vamos entrar nisso. Então é tempo de alta fidelidade, o que significa, lembre-se, vamos fazer aqueles com imagens, cores e fontes que gostamos. A primeira coisa é, vamos criar um novo documento. Nós não vamos, é com você. Algumas pessoas gostam de trabalhar e apenas atualizar o wireframe. Muitas vezes gosto de começar de novo, acho que o wireframe fica no meu caminho. Eu uso isso, eu vou me referir a ele, e eu pulo de volta nele o tempo todo para ver que tipo de idéias nós temos, mas muitas vezes eu acho que é fácil começar de novo. Então é isso que vamos fazer neste curso. Então eu vou começar com nosso tipo de site padronizado. Vou guardá-lo e dar-lhe um nome. Estou a dar nomes estranhos aos meus porque ajuda a encontrares isto mais tarde. Você pode ir ao vídeo 19 e encontrar o arquivo em que estou trabalhando. Independentemente disso, este vai ser o meu instrutor, como fizemos antes, o QG do Instrutor. Esta vai ser a página inicial. Na verdade, só precisa ser página inicial. Ótima. Há algumas coisas que vamos fazer pouco antes de começarmos, e é apenas sobre quadros de humor e recursos. Em termos de recursos, estamos meio que colocá-los antes. Eles estão em um arquivo, há esses kits aqui, vamos usar apenas wireframes. Se você baixar esses três, se você clicar em qualquer um deles, eles realmente o levam para o site da Apple, e ele mostra onde baixar. Você verá aqui que há uma opção para XD. Então você pode baixar isso. Eu baixei para vocês dois para Apple, Windows e Google. Eles estão em seus arquivos de exercícios em Modelos de interface do usuário. Temos usado wireframes, esses são esses caras aqui. Você pode simplesmente abri-los no XD, e você pode começar a extrair deles porque o bom sobre eles é, digamos que usamos material do Google, é enorme, mas é realmente como nossos wireframes, mas eles são uma fidelidade mais alta. Eles são bonitos. Eles têm todos os guarnições adicionados a eles e muitas vezes, trabalhando com alguns deles, especialmente se você está lidando com aplicativos, há apenas regras que você precisa, se ele vai para o Google, e você está usando um monte de seus ícones pré-fabricados, e símbolos, e outras coisas. Então você pode muito bem usá-los em sua maquete. Agora só para você saber, provavelmente é mais comum zombar da Apple, mesmo que você esteja indo atrás de ambos, as pessoas gostam de ver as versões da Apple. Então baixe a folha de adesivos do iOS e use essa para ela. Então essa é uma maneira de começar. Outra maneira de obter ideias e recursos está em seu mercado novamente. Em Ativos, em Mercado aqui, se você digitar UI, muitas vezes você pode obter muitos exemplos que são bastante agradáveis. Digamos que você gosta deste aqui para começar, você pode baixá-lo. Este é um PSD então não é, eu não encontrei nenhuma opção XD aqui ainda, mas fique de olho nele. Mas você pode usar isso como um guia visual e extrair coisas do Photoshop. Sem problema. Então, Market é um bom lugar também. Então você passa para quadros de humor e idéias. Então vai depender de como você está trabalhando com seu cliente. Então, digamos, meu cliente que estou trabalhando para este projeto, o QG dos instrutores, eles são exatamente como você sai e faz com que pareça legal. Eles não têm uma opinião particularmente forte sobre isso, mas eu trabalhei com clientes que precisarão ver um quadro de humor primeiro porque eles querem ou eles vão me enviar um quadro de humor. Um quadro de humor é apenas um grupo de imagens para dar uma sensação de onde estão indo. Então, apesar de tudo, eu faço um quadro de humor para mim. É a parte divertida, é sentar e dizer: “Como é que esta coisa vai ficar?” “Como eu quero que ele se sinta?” Há alguns lugares que eu vou. Vou mostrar-te rapidamente só para te ajudar. Ok. Então Behance é um dos primeiros, Behance dot net, é propriedade da Adobe, o que é legal. Acabei de procurar uma aplicação web. Você pode ver que são coisas muito boas aqui. Agora eu normalmente apenas encontrar coisas que eu gosto e, em seguida, tirar uma captura de tela. Eu vou apenas fazer uma captura de tela disso e ter um monte de screenshots para construir meu quadro de humor. O mesmo com Dribbble. Eu escrevo na web app o tempo todo. Só porque há uma busca aqui, dá-me o tipo de coisas que procuro. Você pode digitar na interface do usuário ou design do aplicativo e apenas obter algumas idéias. Abra-os, faça capturas de tela. Então Dribbble com três B's. Niice é outra com dois I's. Aqui está outro que eu fiz para o aplicativo web. O legal sobre isso é que isso é realmente um criador de humor. Eu uso isso o tempo todo. Eu não vou passar por tudo isso, mas vá para Niice Dot Co e eles vão resolver você lá fora. Há uma opção livre. Awwwards é um bom lugar. Um www no meio ali. Este é outro ótimo lugar. Muitas vezes isso é, eu acho, um pouco mais estruturado. Há coisas incríveis aqui. Os prêmios são ganhos para diferentes categorias. Então você pode estar olhando em blogs que é muito bom, e ele apenas lhe dá uma espécie de versão reduzida e dá-lhe razões para que ele é tão grande. Outro tipo de lugar de premiação são os Webbies. Então Webby Awards é uma premiação online. Acho que começaram com sites. Parece haver tudo aqui agora, mas eu entro, eu procurei por este ano, e eu passei, e eu escolhi, eu olhei para a web e então eu olhei para a Melhor Experiência de Usuário ou Interface de Usuário, e você apenas tem idéias legais e legais e você pode percorrer por elas, abri-las, tirar screenshots das coisas que você gosta. Último, não há último, isto é. Voltar ao nosso aplicativo. Então, uma vez que você tem todos eles, eu tiro um monte de screenshots no meu Mac. No Mac é Command Shift 3. Você pode desenhar uma pequena caixa, na verdade Command Shift três é a tela inteira, Command Shift Four quatro vai desenhar uma pequena caixa e você vai acabar em sua área de trabalho. O que eu fiz apenas para mostrar a vocês, é que eu criei em seus arquivos de exercícios, aqui está um monte de screenshots que eu tirei. Há apenas um monte deles. Eu só peguei um monte de coisas. O que eu faço é usar essa niice para fazer um quadro de humor. Ele cria pequenos PDFs legais como este. Ok, gera para você, o que é ótimo, ou eu simplesmente despejo na página e no XD a maior parte do tempo. Então eu só seleciono um pedaço deles. Quantos eu tenho, seis, eu vou fazer cinco de cada vez e no XD, eu vou saltar para o nosso novo projeto. Vou diminuir o zoom para ver a área de trabalho e vou arrastá-los para dentro. Tenho esses e começo a arrastar cinco de cada vez ou seis de cada vez. Se você fizer tudo de uma só vez eles acabam em uma grande linha que vai para a terra de ninguém. Então, se a sua foto final está no usuário, você poderia usar [inaudível] que poderia funcionar, Photoshop. Há uma pilha em camadas opção sob arquivo e qualquer coisa que você trabalha. Mas eu gosto de construir uma bolha de humor incrível, meu Deus. Ok. É um pouco grande por padrão, as capturas de tela neste Mac. Por isso, vou torná-lo muito mais pequeno. Vou enfiá-lo aqui em cima. Vou agrupá-lo. O que eu faço quando estou trabalhando e estou procurando, eu estou apenas procurando, eu puxo minhas cores daqui, eu começo a procurar fontes. Eu tenho idéias de layout. Essas capturas de tela, como esta, são razoavelmente grandes, mas muitas vezes isso pode ser enorme. Adoro essa parte do trabalho ter ideias. Você também vai começar a notar que mesmo que eles são todos sites diferentes você pode começar a ver o mesmo tipo de cores vindo através muito comum no momento, eu acho que aqueles, Eu quero dizer pastéis tropicais, mas É onde estamos no momento. Vamos passar para o próximo vídeo onde começamos a olhar para colunas e grades, ficando sério. 19. Por que você precisa de uma grade de 12 colunas no Adobe XD: Ei, ali. Neste vídeo, vamos falar sobre por que vamos criar uma grade de 12 colunas. Se você já sabe por que precisa de uma grade de 12 colunas, você pode pular para o próximo vídeo. Para aqueles que não o fazem, vamos começar. Primeiro, por que estamos usando as grades de 12 colunas? Se você não sabe e quando você está codificando o site do outro lado, então quando você pensa que o lado do design front-end agora, quando ele realmente tem que ser transformado em um site? O que muitas vezes será usado como uma estrutura que usa as 12 colunas como estrutura? Por que estão usando 12 colunas? É apenas um número útil porque, para design responsivo, digamos que este site aqui, eu estou usando, tem cerca de 1200 pixels de diâmetro, e eu tenho 12 colunas como a estrutura subjacente. Esta imagem aqui, este controle deslizante aqui, está na verdade abrangendo todos os 12. Mas esses caras aqui estão gastando três cada. Então 3 mais 3 mais 3 mais 3 é igual a 12, eu acho. Essa é a frequência com que os sites não tinham feito todos eles. Então verifique com seu desenvolvedor, mas na maioria das vezes é. A razão pela qual é útil, é que quando eu estou neste tamanho de desktop, eu tenho esta estrutura um e estes quatro ao longo. Quando eu chegar ao tablet, você verá que eu decidi que essas caixas agora abrangem, seis das colunas. Então, 12 é apenas dividível com bastante facilidade. Quando trabalhamos com esses tamanhos diferentes, como [inaudível] para baixo móvel, estes realmente gastaram 12 agora, e codificação é realmente fácil de trabalhar essa lógica. Além disso, muitas das estruturas que as pessoas começam com os locais de construção são baseadas nessas 12 colunas. É por isso que precisamos de 12 colunas. Você precisa deles em seu projeto XD? - Não. Vamos fazer isso para facilitar porque, principalmente, eu faço o web design do outro lado. Então, as coisas mais HTML, CSS site. Eu quero fazer isso porque ele vai me ajudar. Você pode ser irritante para o seu designer e desenvolvedor, e apenas projetar em qualquer lugar, e para eles ter que tentar e fazê-lo caber dentro de 12 colunas, o que seria uma dor. Espero que isso ajude você a entender por que estamos fazendo 12 colunas. Vamos pular para o próximo vídeo onde realmente fazemos isso. 20. Como criar uma grade de 12 colunas no Adobe XD 2018: Oi lá. Neste tutorial, vou mostrar-lhe como fazer uma grade de 12 colunas basicamente com um pequeno clique. Ligá-lo, desligá-lo, ele tem recurso automático que torna o layout da coluna super fácil, super rápido. Vamos fazer isso agora. Primeiro, na verdade, sou Dan do Futuro. Eu voltei no tempo para este vídeo para atualizá-lo porque o vídeo original que eu fiz, você realmente tinha que pegar a ferramenta retangular, você tinha que fazer uma coluna, você teve que dividi-lo por 12, a largura e calhas de treino, e todo tipo de drama. Eu voltei aqui para atualizá-lo porque é um novo recurso que faz isso praticamente automaticamente. Quando você está passando pelo resto deste curso, no entanto, eu não passei e reformulei o curso inteiro porque nós usamos colunas apenas algumas vezes. Quando você vê-lo e eu estou usando um grande caixas retangulares desajeitados, e bloqueio, e desbloqueio colunas, você pode sorrir sabendo que há uma nova maneira doce de fazê-lo. A nova maneira doce é seta preta, clicando nos fundos, você não tem nada selecionado. Na verdade, clique no nome do seu quadro de aplicativos, e aqui onde ele diz grade, marque isso, certifique-se de que você está no layout, não quadrado. Tivemos quadrado por um tempo, queremos layout. Queremos quantas colunas? Doze colunas. A largura da calha que eu usei um muito tutoriais é 15. A largura da coluna fica automática. Queremos automaticamente fazer com que as colunas se encaixem com dentro do limite é o meu site. Usamos uma navegação de 1.400 ao longo do topo e essa será a minha largura máxima, 1.400 é o que eu quero usar para a minha largura máxima do site. Você pode escolher algo diferente, os comuns são 1.024, 1.200, mas vamos usar nossos 1.400 para minha navegação. Precisamos descobrir o que são as colunas e tudo o que realmente precisamos fazer é clicar no nome e precisamos trabalhar fora a largura para as bordas aqui. Eu tenho um site que é 1920, eu tenho uma navegação, que é 1.400, então eu preciso fazer algumas contas básicas. Meu 1.920 menos minha navegação me deixa isso para ambos os lados dividido por dois. Essa é a lacuna que eu preciso, então 260 pixels. Eu clico no nome aqui e eu digo, Eu quero a largura para as bordas para 200 e apenas 16 pixels. Isso agora vai caber perfeitamente deixando um pouco de corte em ambos os lados da minha navegação final saudável. Você pode ir em frente e começar a trabalhar neste projeto que é muito mais fácil. Você pode ativá-lo e desativá-lo, você pode configurá-lo como um padrão. Sempre que você fizer um novo, ele vai passar e usar suas sessões pré-fabricadas. Você pode escolher usar o padrão, depende de você, mas eu gosto de um site de 1.400 pixels de largura. É isso, vá em frente e construa um site incrível. Eu já terminei este curso porque eu sou o Dan do Futuro e é um bom curso. Eu amo [inaudível]. Tchau agora. 21. Trabalhando com cores dentro do Adobe XD CC: Olá, bem-vindo a este vídeo tudo sobre cor. Nós vamos descobrir como roubar cores de, digamos, um logotipo ou marca existente e usá-los , então nós vamos convertê-los em nosso painel Essence. Nós também vamos transformá-los nesta opção útil reutilizável no fundo aqui. Nós também vamos saltar e dar uma olhada em algo assim com esta inspiração para a cor e como usá-los. Vamos entrar lá agora e começar a fazer cores. Existem algumas maneiras de trabalhar com cores em XD. Primeiro de tudo eu estava indo para puxá-lo de um logotipo, então nós vamos ir para arquivo, importação, e nós vamos tentar trazê-lo em nossos arquivos de exercícios sob imagens. Você pode ver o arquivo AI. Atualmente, nesta versão, você não pode simplesmente trazer arquivos de AI, o que é um pouco chato, então o que eu faço é simplesmente abri-los no Illustrator, copiá-los e colá-los. Você pode colar muito facilmente, realmente. Vou usar este logótipo aqui. O que eu quero fazer é que você pode clicar duas vezes nele ou desagrupá-lo. Vou dar um duplo clique, eventualmente, vou pegar o H e você pode ver que há a cor de preenchimento. O que eu gostaria de fazer é apertar o botão mais lá. Isso vai adicioná-lo apenas para cores facilmente acessíveis. Também em seu painel de ativos, quais desses dois pequenos blobs aqui podemos ir para Cores, e como ele está selecionado, ele irá adicioná-lo aqui também. É bom tê-lo em ambos os lugares onde estamos trabalhando. Agora, para obter outras cores, para obter talvez inspiração de cores, um lugar agradável é Adobe Color. Começa em Criar. Eu gosto de pular para este que diz Explorar, e ele apenas dá idéias de grupos de cores. Você só pode usar um desses para começar com uma gama deles, como conceitos. Tudo o que você precisa fazer é clicar em Salvar. Você precisa fazer login em sua Adobe ID e escolher a Biblioteca RCC para que ela seja acessada. Em seguida, dentro do XD você pode ir para Arquivo, Abrir sua biblioteca CC, e no nosso caso seria Instructor HQ, e eles serão as cores esperando lá. É outro método que quero usar no momento. Se você não quiser usar essa opção de biblioteca CC ou estiver trabalhando em um lugar onde você simplesmente não pode usá-la, você pode simplesmente usar este site. Clique neles e diga Editar, e você verá na parte inferior, veja que é mais fácil copiar esses números hexadecimais. Você pode copiá-los para o XD. Desenhe um retângulo. Aqui, clique no ícone e basta colar isso aí e você terá suas cores. É uma forma de transferi-los sem bibliotecas CC. Outra maneira de obter cores é olhar para nossos quadros de humor. Eu vou diminuir um pouco e eu quero uma cor vermelha pêssego que eu quero usar. Talvez algo assim, talvez não. Agora só estou procurando por uma cor. Talvez algo como a Índia seja o que eu quero. O que eu posso fazer é desenhar um retângulo, apenas um retângulo aleatório, e eu vou usar a ferramenta conta-gotas aqui. Este, ferramenta conta-gotas de olho me permite sair e apenas escolher uma cor a partir daqui, e você pode ver seguir com uma amostra. Isso é perto do que eu quero. O que você também pode fazer, porém, é um pequeno truque agradável é, você pode mover isso e ver as coisas por baixo, ferramenta conta-gotas olho eu realmente ir para baixo e escolher as coisas por baixo também, então você não tem realmente que escolhê-lo apenas de o painel XD, como você faz em muitos outros produtos da Adobe. Eu tenho esta cor aqui, e é isso. Vou clicar duas vezes aqui, e provavelmente vou passar e arrastar isso um pouco para baixo. Agora só estou perdendo. É onde eu quero estar. Com isso, vou copiá-lo e, em seguida, excluí-lo, vir até aqui. O que eu gosto de fazer aqui na área de trabalho, é eu gosto de construir minhas amostras. Vou desenhar um pequeno turno quadrado vai me dar uma altura e largura perfeitas. Vou começar com o meu verde, e o que vou fazer é não ter fronteira, e vou ter dois deles. Um deles vai ser essa cor, e eu gosto de ter uma cor secundária que é apenas um pouco mais escura, então vamos arrastar isso aqui para baixo. É como uma versão mais escura. Então vou começar com essa cor de pêssego. Eu vou usar você, usar ferramenta conta-gotas, roubar isso. Você está pronto e espanado. Agora eu tenho outra amostra aqui e você vai ficar um pouco mais escuro de novo. Eu provavelmente quero um silêncio escuro, provavelmente em algum