Introdução ao Adobe Xd: crie protótipos interativos de sites

1. Introdução do curso: Olá, criativos. Adobe XD é uma ferramenta muito útil para designers de sites que desejam criar protótipos interativos onde possam colaborar com outros criativos, obter feedback de seus clientes e, finalmente, preparar a arte para que um desenvolvedor web Isso significa que todos envolvidos podem imaginar a aparência e o funcionamento do site aparência e o funcionamento antes de você realmente começar a criar Isso economiza muito dinheiro, ajuda a evitar qualquer confusão entre você, o cliente e os desenvolvedores e até mesmo permite que você baixe ativos diretamente do próprio protótipo Olá, meu nome é Malin e trabalho como marca e web designer desde 2015 Dirijo um estúdio de design junto com meu marido Jeremy, e nos concentramos em ajudar empresas sustentáveis com sua comunicação Trabalhei com uma variedade de marcas e setores diferentes, desde instituições de caridade até universidades e empresas privadas Neste teste, mostrarei como aproveitar ao máximo o Adobe XD como designer e mostrarei como trabalhar com mais eficiência e criar designs mais envolventes que seus clientes vão adorar Começaremos abordando os conceitos básicos do Adobe XD, como configurar quadros de arte e usar os diferentes painéis e usar os diferentes Em seguida, passamos para tópicos mais detalhados , como estilos, estados e componentes, que ajudam você a criar protótipos melhores e mais rápidos Por fim, abordaremos a colaboração e como compartilhar seus projetos com parceiros, clientes e desenvolvedores para comentários de cocriação sobre desenvolvimento Também abordaremos plug-ins úteis e outras dicas profissionais que ajudarão você a levar Adobe XD ainda mais longe Esta aula é para qualquer pessoa que queira começar a usar o Adobe XD ou apenas aprender algumas dicas e truques que talvez você tenha perdido até agora. Espero que essa aula ajude você a se sentir mais confiante trabalhando no Adobe XD e que ajude a criar um processo criativo eficiente e agradável Mal posso esperar para ver o que você cria. Vamos entrar na aula 2. Por que criar protótipos?: Antes de começarmos Com todos os excelentes recursos do Adobe XD, eu só queria compartilhar um pouco por que eu acho que é uma ferramenta tão boa e por que é realmente importante ter uma ferramenta de prototipagem ao criar sites Se você está criando sites e criando designs apenas criando imagens que você está compartilhando com seus clientes. Isso pode se tornar muito difícil quando se trata de iterações de feedback E nós realmente queremos um processo em que o cliente se sinta realmente empolgado e engajado e faça parte do seu projeto. É aí que entram essas diferentes ferramentas. A primeira razão pela qual eu gosto do Adobe XD é porque ele faz parte do pacote da Adobe. Se você já tiver uma licença para a Adobe, poderá usar o Adobe XD sem nenhum custo adicional. Também funciona com todos os diferentes atalhos e integrações E você se sentirá muito familiarizado com a interface, que eu acho que pode ajudar na curva de aprendizado no início. A segunda razão pela qual eu gosto muito do Adobe XD é que nossos clientes e colaboradores não precisam realmente de uma conta para fazer coisas como comentar e baixar arquivos Isso é muito fácil porque você não tem barreira extra de tentar explicar por que eles precisariam criar uma conta para algo. O Adobe XD também permite que você receba feedback diretamente sobre seu protótipo E pode ser uma ótima maneira de você obter feedback direcionado a áreas específicas Portanto, é muito mais fácil tentar decifrar o que você precisa fazer em áreas específicas do que ter um e-mail longo com muitas informações Criar um protótipo interativo também é uma ótima maneira de garantir que você esteja minimizando qualquer atrito entre a ideia do cliente, seu design e a implementação real de seus desenvolvedores Porque todo mundo pode realmente ver como isso funcionaria na prática, em vez de colocar imagens ou textos e dizer, bem, isso se moveria ou funcionaria dessa maneira. Portanto, essa é uma maneira de preencher essa lacuna muito bem. Por fim, o Adobe XD é um padrão do setor. Não é o único, mas é um dos grandes. E isso significa que se, digamos, outro criativo quiser continuar trabalhando em seu projeto, seria muito fácil para ele se integrar a ele, porque provavelmente já está familiarizado com ele. Agora que sabemos por que o Adobe XD é uma ferramenta útil, vamos ver como ele realmente funciona. 3. Tour do Adobe Xd: Se é a primeira vez que você usa o Adobe XD, pode ser muito útil começar a se familiarizar com o que são todos os diferentes painéis e como configurar seus documentos A primeira coisa que você precisa fazer ao criar um novo documento é criar uma prancheta As pranchetas podem ter a largura de um dispositivo específico, como um desktop padrão ou um modelo de telefone específico Ou você pode criar um tamanho personalizado. Qualquer projeto pode ter várias pranchetas ou tamanhos diferentes Então, eu geralmente começo com um formato, desktop ou telefone. E depois que o design estiver pronto para esse formato, adiciono um segundo tamanho para cada página para mostrar como o design funciona em um formato responsivo Agora, vamos usar um formato de desktop e salvá-lo na nuvem pois isso possibilita convidar colaboradores mais tarde Agora que estamos no documento, você verá que pode se mover pela prancheta segurando os três pequenos pontos Se quisermos expandir ou diminuir a altura da prancheta, basta clicar duas vezes na própria prancheta e mover a linha aqui na E também podemos alterar o nome da prancheta. Isso nos ajuda a ficar um pouco mais organizados e o projeto, quando começarmos a ter muitas páginas diferentes, você deve ter notado essa linha. Essa linha é muito útil porque nos mostra onde está o ponto de interrupção, o que significa que tudo o que estiver acima desse ponto ficará visível sem uma Isso é muito útil porque queremos ter certeza de que estamos sempre adicionando informações importantes acima da dobra, mas também mostrando que há mais para ver forma clara para incentivar as pessoas a rolar Se você quiser adicionar outra prancheta, basta clicar nesse pequeno ícone que parece um quadrado à esquerda E então você receberá sugestões com diferentes tamanhos de prancheta Você deve ter notado que temos três guias na parte superior dizendo design, prototipagem e compartilhamento Quando criamos nossos designs, sempre estaremos na guia Design. Mas quando queremos tornar o design interativo, queremos estar na guia de protótipos Aqui você pode vincular botões e outros elementos para levá-lo para outra página ao clicar. Outros elementos interativos, como trabalhar com a alteração do estado de foco, por exemplo, fazem parte da guia Design Portanto, a guia do protótipo será onde você tornará os itens clicáveis Analisaremos isso com muito mais profundidade posteriormente na aula. A guia Compartilhar permite que você compartilhe seu design com clientes, desenvolvedores e outras pessoas que você deseja revisar o design ou implementá-lo. Mas também há uma maneira de compartilhar o arquivo de design para colaboração. Para isso, você tem um botão no canto superior direito. Você verá uma pequena pessoa com um ícone de adição. Aqui. Você pode convidar alguém por e-mail depois editar o documento com você. Isso é muito útil se você tem uma equipe com várias pessoas e pode até mesmo trabalhar no design ao mesmo tempo Em seguida, está o ícone de compartilhamento. Na verdade, temos mais duas opções úteis. A primeira é essa pequena pasta. Aqui. Esse é um tipo de pré-visualização em que você pode conectar seu telefone e ver o protótipo de design por meio um dispositivo para pré-visualizações Também temos esse pequeno botão Play que permite que você visualize o design diretamente no seu desktop Vamos voltar à guia Design e dar uma olhada no que podemos encontrar no painel do lado esquerdo Essa é uma parte realmente esquecida do Adobe XD, mas tem muitas ferramentas úteis. Na parte superior, você tem formas básicas, a opção de adicionar textos e a ferramenta de caneta que funciona de forma muito semelhante à que temos no Adobe Illustrator Para as opções de quadrado e círculo. Eles são bastante limitados pelo triângulo na verdade, que permite definir o número de pontos. Se você quiser ter bordas arredondadas. Outras opções muito boas para facilitar a criação de planos de fundo e outros elementos de design Se você olhar para a parte superior aqui, você também pode ver a ferramenta pathfinder no Adobe XD, onde você pode unir formas Mas no Adobe XD isso realmente me ajudou melhor. É porque você pode mover as formas forma independente se clicar duas vezes nas formas Portanto, não é destrutivo do jeito que é em algumas outras ferramentas da Adobe Também há uma ótima opção que pode ser muito útil se você estiver criando um design com elementos repetidos, como uma grade de imagem, por exemplo Tudo o que você precisa fazer é selecionar a forma que deseja repetir. Clique na grade e, em seguida, retire as bordas para criar mais itens. Um pouco mais abaixo, temos três ícones. E eu vou falar sobre o do meio agora, porque vamos abordar os outros dois em outros capítulos Mas a do meio é essencialmente sua guia de camadas. Aqui você pode ver todas as suas pranchetas. E se você usar uma prancheta, você a verá destacada na área de trabalho Isso pode ser muito útil se você tiver um projeto muito grande com muitas páginas diferentes. Agora que sabemos como esperar um pouco mais, vamos entrar na guia Design novamente e dar uma olhada na adição de alguns textos e imagens 4. Imagens e texto: Ótimo, então vamos começar a trabalhar com o texto e as imagens no Adobe XD Você pode adicionar texto clicando no pequeno ícone de texto e no painel esquerdo E então você pode simplesmente clicar e arrastar para obter o tamanho do livro didático que você deseja quando se trata de texto . Muitas de nossas opções estarão aqui no painel direito A primeira coisa que quero mostrar são apenas as coisas básicas para começar, que é onde você muda sua fonte. Por exemplo, seus tamanhos de fonte, seu espaçamento, kerning e o espaço entre as frases, por exemplo, as diferentes Mas você também tem muitas outras opções excelentes, como mudar para maiúsculas e estilizar seus textos e Quero realmente chamar sua atenção para essas três caixinhas aqui. Porque eles podem realmente determinar como você trabalha com texto no Adobe XD. Se olharmos aqui agora, ela está configurada para essa caixa de texto normal, que significa que o texto está confinado a essa caixa aqui Então, se eu fosse, digamos, copiar todo esse texto e continuaria adicionando mais. Você verá que está lá, mas quando eu clico, ele fica oculto. Então, seriam textos que não seriam visíveis em seu design, a menos que você realmente estenda a caixa. E isso pode causar alguns problemas quando realmente o projetamos e o entregamos a um desenvolvedor, porque ele pode não perceber que o texto está lá Portanto, eles não acabam aparecendo no site final do desenvolvedor. Em vez disso, o que podemos fazer é acessar essa opção aqui, o que significa que ela responde à altura dos seus textos Então, se você continuar adicionando texto, a caixa de texto continuará ficando maior em sua opção aqui, você tem a mesma coisa, mas ela responde à largura Então, antes, se continuássemos adicionando coisas e as tivéssemos dessa forma, na verdade não seria mais amplo. Mas se mudarmos para horizontal , também poderemos adicionar coisas à largura. Ótimo. A próxima coisa sobre a qual você falará são essas coisas básicas sobre cores para que você possa definir o preenchimento. Você pode fazer uma borda se quiser. E você também pode trabalhar com a opacidade do seu texto . Se você quiser. Você também pode fazer coisas como sombras internas, sombras projetadas ou desfoques de fundo Uma coisa que também pode ser bom saber é que você pode realmente vincular coisas diretamente em seu texto, em seu protótipo Digamos, por exemplo, que você tenha textos que serão vinculados ao site. Em vez de enviar seu desenvolvedor e vincular essas coisas diferentes, você pode simplesmente vinculá-lo aqui e ele saberá exatamente onde colocá-lo. Então, agora vamos passar para as imagens. Quando adicionamos imagens, há algumas maneiras diferentes de fazer isso. Uma maneira é simplesmente arrastar a imagem para sua prancheta E aparecerá como o tamanho que realmente tem. E se você estiver realmente redimensionando, ele manterá as proporções que tem Mas, como você pode ver, é um pouco complicado realmente começar a copiá-lo ou alterá-lo muito Então, o que eu prefiro fazer é criar um contêiner real para essa imagem. Então, você pode fazer isso usando as formas. Então, digamos, por exemplo, uma caixa. E então pegamos a imagem e a arrastamos diretamente para a caixa, e então herdamos essas propriedades Você pode usar exatamente o mesmo nome se quiser usar uma forma diferente. Por exemplo, se fizéssemos essa forma de triângulo, bem, nós a mudaríamos para cinco cantos. E então fazemos exatamente a mesma coisa ao arrastar uma imagem para dentro dela Uma coisa a observar aqui é que o Adobe XD normalmente tem um contorno ou uma borda Então, isso é algo que você pode querer dar uma olhada e desmarcar se não quiser usá-lo. Se você clicar na imagem, também verá esse pequeno círculo nos cantos e isso o verá esse pequeno círculo nos cantos e isso ajudará a percorrer os cantos da imagem, se você preferir Se você quiser criar algo com uma forma muito diferente, sugiro usar a ferramenta caneta e usá-la apenas para traçar a área que você gostaria que o contêiner de imagem tivesse. Em seguida, basta fazer exatamente o mesmo nome ao arrastar a imagem para essa forma Existem algumas funções realmente interessantes que você pode realmente usar com imagens que podem tornar seu protótipo muito mais interativo A primeira coisa é rolar. Então, digamos que esta seção aqui é que realmente gostaríamos que alguém pudesse navegar para ver a imagem completa Mas podemos selecionar as imagens e depois ir até essa pequena área aqui. É aqui que podemos realmente criar essas diferentes opções de rolagem Então você pode fazer uma rolagem horizontal, uma rolagem vertical ou ambas Então, digamos que queremos fazer a rolagem horizontal. Clique aqui e podemos ver que ele marcará essas seções. Agora, se clicarmos no botão Reproduzir, podemos rolar para baixo e ver que realmente podemos rolar para revelar a imagem que estava anteriormente fora da Outra ótima função pode ser alinhar texto e imagens entre si Então, digamos que essa seção, por exemplo, digamos que essa imagem estivesse um pouco errada e eu queria ter certeza de que todas as imagens da mesma altura pudessem ir até as ferramentas de alinhamento na parte superior E, nesse caso, escolheríamos alinhar na parte superior. Clique neste e ele os alinhará automaticamente um ao outro Se você tem uma imagem quase perfeita, mas na verdade gostaria de invertê-la Então, digamos na vertical ou na horizontal. Você pode simplesmente acessar esses pequenos ícones aqui e clicar neles para virar vertical ou A última coisa que você quer compartilhar com você neste capítulo é como realmente consertar algo para que ele permaneça na posição do assento quando você rola E isso pode ser útil para coisas como, digamos, uma navegação. Digamos que, nesse caso, gostaríamos que a navegação fosse fixa. Nesse caso, talvez queiramos criar esse plano de fundo para garantir que ele esteja visível em fundos diferentes E então selecionamos o menu em si. Podemos agrupar todos eles. E então escolhemos uma posição fixa ao rolar. Agora que clicamos no botão Reproduzir, podemos ver que, rolando a álgebra, o menu será fixado na E isso é algo que você pode fazer de muitas maneiras diferentes para brincar com imagens e texto, digamos, recursos de blog ou outros itens que você gostaria de destacar 5. Estilos: Quando criamos sites, queremos que todos os diferentes elementos sejam consistentes em páginas diferentes. exemplo, você pode ter um tamanho de fonte para cada título e um para títulos H2 e um para o corpo da cópia, por exemplo Você pode até ter uma fonte diferente para depoimentos. Então, como podemos garantir que seja realmente consistente sem que precisemos mudar todos os diferentes ativos individuais? Se algo mudar, é aí que entram os estilos. Essencialmente, os estilos ajudam você a criar regras para que saibamos que tudo o que tem esse estilo será formatado da mesma maneira Digamos, por exemplo, que seu cliente volte e queira atualizar a cor dos botões, então você não precisa atualizar manualmente cada botão. Você pode simplesmente atualizar os estilos. Então, para criar seus estilos, tudo o que você precisa fazer é selecionar o texto ou a cor que você está interessado em criar estilo. Em seguida, você vai até a guia da sua biblioteca aqui no lado esquerdo E então tudo o que precisamos fazer é clicar no pequeno Plus para criar um estilo de personagem. Isso nomeará automaticamente o nome e o tamanho da fonte. Mas você também pode renomear isso clicando duas vezes e dizendo, por exemplo, Títulos, idade Dessa forma, você pode acompanhar tudo, caso tenha, digamos, diferentes da mesma fonte, mas tamanhos diferentes. Se você quiser fazer o mesmo com as cores, tudo o que você precisa fazer é selecionar o bloco de cores, ir até as cores e clicar no sinal de mais E vamos fazer exatamente a mesma coisa aqui. Podemos chamar isso de rodapé e plano de fundo, por exemplo. Agora, se eu fosse até esse bloco de cores e clicasse nas minhas cores nos meus estilos. Você pode ver que ele o muda para essa cor. Exatamente a mesma coisa para texto. Se escolhermos um texto que não seja o título e clicarmos no título aqui. Você verá que isso o mudará automaticamente. Isso vem junto com todos os estilos diferentes que você tem aqui. Mas se você mudar de ideia, você sempre pode mudar isso sem realmente atualizar os estilos aqui. Vamos ver como isso funciona na prática. Então, digamos, por exemplo, que criamos todos esses títulos diferentes, dessa era. Agora, se eu quiser mudar isso, terei que fazer como mercado, terei que fazer como mercado, clicar com o botão direito do mouse e editar Agora, eu posso mudar isso para um tamanho maior, digamos que para que possamos ver e você verá que todas essas diferentes instâncias foram atualizadas. Você também pode fazer coisas como atualizar a cor e outras propriedades dela. Você também pode ver que, se clicar com o botão direito do mouse, poderá destacá-lo no Canvas Isso mostrará todos os diferentes lugares em que esse estilo é aplicado. 6. Componentes: Assim como acontece com os estilos, os componentes ajudam a definir regras para que o design possa ser repetido sem que você precise alterar as coisas manualmente. Mas com os componentes, estamos tirando muito mais do que apenas fontes e cores. Aqui você pode criar um conjunto completo de elementos diferentes que se tornam um único componente. Com componentes, seções inteiras podem ser elementos recorrentes Mas com essa coisa realmente inteligente chamada substituições, ainda podemos personalizar ativos individuais sem precisar editar o mestre para criar novos componentes Ou você precisa selecionar os diferentes elementos dos quais gostaria que fizessem parte. Então, neste caso, teremos esse gráfico de tipos de abertura. E vou agrupá-los para simplificar. Então, o que vamos fazer agora é clicar no pequeno componente mais aqui. Você também pode clicar com o botão direito do mouse e clicar em criar componentes. Ou você pode jogar hóquei com K. Vamos fazer esse componente Agora você verá que tem uma pequena borda verde ao redor com esse pequeno diamante. Agora significa que são os componentes principais. E se você ver aqui ao lado , dirá componente e principal. E isso significa que esse é o mestre. Então, essa é uma maneira super fácil de fazer isso. Agora, todas as mudanças que fizermos nesta irão preencher todas as outras. Digamos, por exemplo, que queremos ter esses componentes exatos em outro lugar. Digamos no rodapé, por exemplo. Então, vamos nos livrar desse e adicioná-lo. Então, podemos simplesmente clicar aqui. Podemos renomear essa abertura, horário de abertura. E podemos simplesmente clicar e arrastar isso aqui para colocá-lo neste local. Agora, todas as mudanças que fizermos no mestre também serão preenchidas com base nisso Às vezes, pode ser um pouco complicado, quando você tem muitas pranchetas em funcionamento, saber onde está o mestre O que você pode fazer é clicar com o botão direito do mouse aqui e apenas destacar no Canvas que mostrará onde está Então, neste caso, ele o destacará aqui. Mas se você clicar neste aqui embaixo, basta clicar em Editar componentes principais. E isso o levará ao MainComponent. Então, essa é uma ótima maneira de navegar se você tiver um pouco mais de complexidade. Digamos aqui que vamos realmente mudar a cor desse título. Por exemplo, eu clico duas vezes aqui. Vou mudar isso para uma cor diferente para que possamos deixar bem claro o que estamos fazendo. Vamos torná-lo realmente verde brilhante para que possamos ver o que está acontecendo. Agora, se você rolar para baixo até nossas outras instâncias, veremos que a cor também mudou aqui Se clicarmos neste , você verá que antes dizia principal. E aqui diz instância, porque esse não é o componente principal, isso significa que podemos realmente fazer substituições O que isso significa? Então, basicamente, se você estiver fazendo alterações em instâncias reais, você pode realmente fazer isso independentemente do mestre, e isso só se aplicará a essa instância. Isso é para coisas estilísticas. Digamos que queremos tornar isso um pouco mais alto. Podemos ver os dados, algo que não foi afetado aqui A mesma coisa vale se estivermos mudando de cor ou fazendo outras coisas. Então, digamos que, para esta, eu realmente gostaria de mudar isso para uma fonte diferente. Podemos fazer isso e podemos ver que isso não mudou. Aquele que é o mestre. Isso é chamado de substituições, e isso ajuda a tornar tudo muito fácil se quisermos mudar O melhor é que ele ainda herdará todos os personagens que não estamos ajustando Então, digamos, por exemplo, que neste caso estamos mudando o título aqui. Então, mudamos a fonte e a altura das caixas, mas não alteramos a cor do plano de fundo. Então, vamos mudar a cor do mestre. Você pode ver como os elementos que na verdade não alteramos ainda estarão vinculados ao próprio mestre. Agora você pode ver que ainda criamos esse cinza porque esse estilo específico não foi sobrescrito neste caso 7. Trabalhando com estados: Para fazer com que seu design pareça muito mais real, podemos realmente adicionar estados de foco diretamente em seu protótipo Essa pode ser uma mudança muito simples, como, por exemplo, mudar a cor de um botão ao passar o mouse sobre ele Ou mudanças mais complexas. Portanto, há dois estados diferentes com os quais podemos trabalhar. Temos o estado de flutuação e o estado de alternância. E o primeiro que eu quero mostrar a vocês é o estado de flutuação. Portanto, queremos garantir que esse botão se transforme em um contorno em vez de ter o preenchimento sólido Então, vamos dar uma olhada em que isso não foi o primeiro. Como você pode ver, esse botão é um componente, portanto, qualquer coisa que você queira adicionar a um estado T2 deve primeiro ser um componente Então, o que você pode ver é que adere tem um estado padrão e um estado de foco Então, vamos começar de novo para que eu possa mostrar como funciona. Portanto, é um componente. O que vamos fazer é clicar nessa pequena vantagem e escolher o estado do mouse Tudo o que fizermos com o estado de foco ficará visível quando você passar o mouse sobre o botão E qualquer coisa no estado padrão é o que você verá antes de passar o mouse Queremos ter certeza de que estamos no estado de flutuação. E então eu vou descer e vou me certificar de clicar duas vezes no preenchimento Quero ter certeza de desmarcar isso e escolher a borda Vou escolher essa cor verde escura. Vou aumentar em cerca de mais dois. Em seguida, vou clicar duas vezes no texto, rolar até o preenchimento, usar o conta-gotas novamente e escolher a Agora podemos ver que o botão tem aparência que queremos exibir quando você passa o mouse E se clicarmos em todo o componente agora e clicarmos no estado padrão, podemos ver o sinal que queremos que ele tenha. Antes de passar o mouse. Você pode alternar entre esses dois para garantir que seu design apareça como você deseja Vamos fazer uma prévia e ver se obtemos esse efeito. Sim, então está funcionando perfeitamente. Então, agora eu quero mostrar a vocês o estado de alternância. Portanto, o estado de alternância é ótimo para quando você quer que uma ação aconteça, quando você clica, por exemplo, quando tem uma alternância típica e gostaria que ela se movesse da esquerda para a direita Mas, neste caso, gostaria que as pessoas pudessem votar em qual evento deveriam ter em agosto, clicando no pequeno coração dos diferentes cursos que gostariam de ver. O que eu quero que aconteça é que quando alguém clica nesse coração, ele mude de um contorno preto para um preenchimento vermelho Então, vou clicar em um novo estado de alternância. Vou me certificar de que estou em Toggle states. Ao pegar a borda, clique no preenchimento e escolha uma bela cor vermelha. Agora, se você clicar nesse pequeno coração, verá que ele fica vermelho. Portanto, também funciona exatamente da maneira que gostaríamos. Como os componentes funcionam da mesma forma. Agora, digamos que você queira mudar isso de um coração vermelho para um coração verde porque não é um jardim urbano. Verifique novamente se você está nos estados de alternância. Mude de cor e escolha uma bela cor verde. Agora, se formos verificar novamente, podemos ver aquela aspirina clicando nas outras que também ficam verdes. E também tem o efeito inverso, o que é ótimo. Assim, você pode ir e voltar entre seus diferentes estados. 8. Adicionando vídeo: Adicionar vídeo diretamente ao seu protótipo fará com que ele se sinta muito mais interativo e vivo. Isso é algo que você não costumava fazer no Adobe XD. Portanto, é muito empolgante que você seja capaz de fazer isso. Agora, digamos, por exemplo, que gostaríamos de adicionar um plano de fundo de vídeo a esta seção para criar um pouco mais de engajamento no site O que você precisa fazer é criar algum tipo de caixa delimitadora Então, acabei de criar um quadrado aqui. Na verdade, podemos acessar nossa guia Camadas possamos ver o que estamos fazendo. Vamos apenas nos certificar de que nossas guias de camada estão abertas e , em seguida, podemos clicar nesse quadrado aqui para que possamos ver o que estamos fazendo Então, tudo o que você vai fazer é clicar e arrastar seu vídeo para essa caixa delimitadora. E, inicialmente, nada acontece quando você o visualiza porque ele só começa a ser reproduzido quando você clica nele. E não é isso que queremos. Gostaríamos que fosse reproduzido automaticamente. Bem, pelo menos neste caso, o que vamos fazer é voltar e ver as configurações desse vídeo. Outra coisa que é bom lembrar é que, no momento, seu vídeo deve ter no máximo 25 MB. Portanto, se for maior do que isso, talvez seja necessário exportá-lo em uma resolução menor. Então, se clicarmos duas vezes nele e clicarmos duas vezes novamente, você pode ver agora que, na verdade, entramos no retângulo do grupo de massa um, onde nossa caixa delimitadora passa o mouse, e então temos o Então, agora temos todas essas opções diferentes. Então, se clicarmos aqui, podemos ver que agora é jogar no topo. Mas você também pode jogar automaticamente, que é o que eu gostaria. Em seguida, também podemos clicar nesse pequeno ícone aqui, onde realmente temos a personalização A primeira coisa que você pode fazer é assistir ao seu vídeo clicando neste pequeno botão Reproduzir. E você também pode silenciá-lo. Se houver algum áudio. Nesse caso, não existe, mas você ainda pode fazer isso se quiser ter certeza de que também pode cortá-lo Então, se você quiser reduzi-lo, digamos que seja um pouco mais curto. Tudo bem. Você pode simplesmente aprová-lo. Então você também pode fazer algo que eu sempre gosto de fazer, que é a reprodução em loop Vamos ver qual é o resultado agora. Agora dissemos que é reprodução automática e loop. Vamos ver uma prévia do nosso design. Podemos ver que ele é reproduzido automaticamente. E se esperarmos um pouco, também veremos que vai se repetir. Perfeito. Então, isso é tudo o que precisamos saber para simplesmente adicionar um vídeo simples ao nosso arquivo XD 9. Plug-ins: O Adobe XD tem muita flexibilidade, mas às vezes há coisas que você pode fazer com o próprio aplicativo. É aqui que entram os plug-ins. Mesmo que o Adobe XD possa fazer muitas coisas diferentes. Existem vários plugins que tornam nossa vida muito mais fácil no dia a dia Então, eu queria te mostrar alguns dos meus favoritos. Então, primeiro vamos ver como podemos realmente instalar plug-ins. Portanto, os plug-ins são a guia lenta na parte inferior. Mas se não tivermos instalado nenhum plug-in antes, basta clicar nesse botão. Uma vez aqui, você poderá pesquisar por plug-ins diferentes, ou você pode simplesmente navegar para ver se encontra algo que se encaixa exatamente no que você gostaria Você pode simplesmente clicar no botão Obter e isso o baixará automaticamente para o Adobe XD assim que estiver instalado Só quero mostrar esses que são meus favoritos. Então, o primeiro que vou mostrar a vocês se chama Colour In SPO. E a razão pela qual eu gosto disso não é só porque você tem coisas como paletas de cores nas quais você pode realmente explorar diferentes paletas de cores, que é muito útil quando você está Mas meu recurso favorito é o verificador de contraste. Então, se você acompanhou algum dos meus outros trabalhos ou meu canal no YouTube, sabe que estou muito empolgada em garantir que os designs sejam acessíveis. Então, digamos, por exemplo, que gostaríamos de verificar se esse texto aqui que temos nesse fundo colorido será visível e acessível. Bem, podemos simplesmente copiar o código de cores aqui. Eu só vou fazer isso. Então eu vou escolher meu texto, vou selecioná-lo aqui. E vou colar isso na cor de fundo e ele aparecerá aqui para que possamos ver como é. Então, também veremos a proporção e veremos se ela passa. Digamos, por exemplo, que mudaríamos isso para uma cor diferente. Digamos que o mudaríamos para algo muito mais escuro Veja, talvez isso e depois aumentemos um pouco a opacidade para nos aproximarmos muito dessa cor verde escura Então, vamos copiar esse preenchimento agora e colá-lo. Em vez disso. Escolha nossa capa. Então, escolhemos nossa cor lá. Agora vamos colar isso. Agora você verá que todas essas verificações diferentes falharão porque o contraste é muito baixo. Então fica muito difícil para alguém ler. Isso é muito importante para todos os sites porque queremos garantir que tudo seja inclusivo Mas, é claro, é muito importante se você estiver trabalhando com, por exemplo, um site para idosos ou pessoas com diferentes formas de deficiência visual O próximo plugin que quero mostrar a vocês é um chamado Lorem Ipsum, que é super fácil porque eu não sei sobre você, mas quando estou criando algo, demoro muito tempo apenas para ir a um site da Laura, ou digitar meu próprio texto Então, se quisermos um pouco de Lorem, que podemos fazer é criar uma forma onde gostaríamos que ela fosse preenchida E então podemos preencher com texto de espaço reservado. Há muitas opções diferentes, mas essa primeira realmente permite que você escolha, por exemplo, se você gostaria de um idioma diferente. Então, vou usar a versão em inglês. Você pode escolher se gostaria que fosse um ponto, ponto, ponto ou período no final ou simplesmente nada. Vou escolher o período porque gostaria de ter um ponto final. E então vamos simplesmente inserir texto. Isso é realmente pequeno? Então, tudo o que vou fazer aqui agora é realmente poder personalizar isso. Na verdade, posso alterá-lo para minha formatação real, o que é ótimo Então, podemos simplesmente ir aqui e ir assim. E, de repente, somos realmente capazes de ter um loema muito bom em nosso design O próximo plugin, que é super útil, é chamado de maquete rápida E este tem tantas coisas diferentes em um. O primeiro que eu queria mostrar é que, se começarmos com a guia de elementos, é aqui que você tem todos os seus ótimos ícones pequenos, todos os seus pequenos rótulos. E gostei que este não tenha apenas os ícones, mas também tenha coisas como um botão, por Digamos que gostaríamos de usar este. Na verdade, depois de colocá-lo em uso, podemos personalizá-lo no XD. Então, digamos que gostaríamos de mudar a cor. Tudo o que precisamos fazer é clicar duas vezes e todas as propriedades serão editáveis aqui. Na verdade, podemos mudar isso para, digamos, uma cor verde Então, tudo isso está realmente visível no XD, o que torna as coisas muito mais fáceis. Outra coisa que adoro é quando você está fazendo wireframes e simplesmente coloca como um espaço reservado para uma Então, em vez de tentar fazer com que algo pareça uma imagem, o cliente entenderá que vai superar uma imagem. Você pode simplesmente usar um gráfico como esse, por exemplo. Você também tem ativos. Então isso é um pouco mais complexo. Ilustrações para exemplos, fotografias ou até mesmo gráficos e Então, eles são realmente úteis quando você está criando um design um pouco mais complexo. Tudo o que precisamos fazer é poder ir e realmente ver figuras, por exemplo, ou em ação. E isso está vinculado aos sites de humanos que você já deve ter visto antes. E eu realmente gostei disso. Eles também têm muitas ilustrações mais inclusivas que podemos usar Muitas opções diferentes. E você também pode simplesmente fazer mais cenas parecidas e outras opções. Quando você entrar em uma maquete rápida pela primeira vez, poderá escolher um tema Isso é muito útil se, digamos que você esteja criando um tema sombrio e realmente queira trabalhemos para esse tema em particular, sempre puder voltar e escolher um tema diferente E você vai obter todos os seus diferentes ácidos aqui. O próximo que quero mostrar a vocês se chama globular, na verdade se encaixa perfeitamente porque recentemente fiz um projeto em que tínhamos muitas formas orgânicas E então eu pensei sobre isso neste tutorial. Basicamente, sempre que você quiser, como uma forma de fundo ou qualquer outra coisa que você gostaria de ter uma forma orgânica. Você pode acessar este plugin e ajustá-lo para que , à medida que você possa mudar, a complexidade ficará mais arredondada, com menos bordas diferentes. E à medida que você avança nisso, terá mais lados diferentes. Você também pode fazer exclusividade. Então, novamente, ficará mais borbulhado no lado esquerdo. E se você subir, ficará muito mais angular e terá formas diferentes. Você pode brincar com isso e criar bolhas exclusivas. E quando você se sentir feliz com isso, tudo o que você precisa fazer é clicar nessas pequenas bolhas Você pode criar, clicar no blob e, em seguida, tudo o que você precisa fazer é encontrá-lo, o que geralmente é reproduzido na parte externa da prancheta Então, às vezes você só precisa diminuir um pouco o zoom. Novamente, assim como com os outros. Este é totalmente editável aqui. Então você pode ir e digamos que eu elimine as cores. Então, digamos que gostaríamos de usar essa cor de fundo que temos. Isso é muito bom. Agora, na verdade, podemos colocar isso aqui e colocá-lo trás e ter um pequeno elemento de design acontecendo aqui. Então eu acho que isso é muito útil quando você quer criar um pouco mais de camadas em seu design. O último que eu quero mostrar se chama anima. E esse é muito útil quando você está fazendo certas animações e quando também deseja exportá-las para código para prototipagem como Então, o que você pode fazer é criar coisas diferentes que não era possível fazer anteriormente no Adobe XD, mas recentemente com o que resolvemos, por exemplo, com estados e componentes, realmente capazes de fazer agora. Portanto, alguns deles não são tão úteis quanto costumavam ser. O que é realmente útil é a função get code. Na verdade, você pode baixar o HTML completo do design que você criou para poder enviá-lo a um desenvolvedor ou usá-lo você mesmo. Esse é um recurso muito útil se você quiser algo que seja super rápido e torne a vida um pouco mais fácil para seu desenvolvedor Eu recomendo fortemente que você vá até a seção de plugins e navegue um pouco porque você provavelmente encontrará algo que seja realmente útil para seus projetos. Então vá e dê uma olhada 10. Usando o protótipo: Agora que temos um design com algumas pranchetas diferentes, estamos satisfeitos com as diferentes ferramentas básicas Queremos começar a conectar essas diferentes pranchetas usando a ferramenta de prototipagem Então, vamos até a guia Prototipagem. Então, agora vamos ajudar na guia Protótipo e vamos dar uma olhada em algumas coisas diferentes que são possíveis com a capacidade de prototipagem E isso é realmente muito empolgante. Então, basicamente, a guia Prototipagem terá uma aparência muito semelhante à guia Design E se você selecionar uma prancheta ou, digamos, um elemento diferente, você poderá criar um link entre ela e outra prancheta. É assim que criamos traduções diferentes e alternamos entre pranchetas quando digamos, você clica em um botão Então, digamos, por exemplo, que eu gostaria que esse botão de contato nos levasse à nossa página de contato. Tudo o que preciso fazer é selecionar o botão e, em seguida, puxar essa pequena seta azul até o gráfico da prancheta que gostaria que ela fosse. Agora podemos ver que, no lado direito, temos algumas opções diferentes com as quais podemos brincar A primeira coisa que podemos fazer é dar uma olhada no gatilho. Nesse caso, gostaria que fosse um toque porque gostaria que alguém clicasse no botão e depois acessasse a página de contato. Podemos então ver como gostaríamos que isso acontecesse. Então, mais tarde, veremos a animação automática. Mas, por enquanto, vamos apenas fazer a transição porque gostaríamos de ir de uma posição para outra. Queremos ter certeza de que o destino está correto. E podemos ver se gostaríamos de ter alguma animação. Então, vamos conferir como fica quando o visualizamos. Agora, se clicarmos no botão Contato, vamos direto para a página de contato, que é exatamente o que gostaríamos. Então, essa é muito simples. Mas, por exemplo, se quisermos criar algumas animações. Então, o que vou fazer é mostrar a vocês que se duplicarmos esse quadro de arte, voltaremos ao design Eu gostaria que algumas coisas acontecessem quando você acessar a página de contato. A primeira coisa que eu gostaria de fazer é que esta pequena caixa fosse revelada. Então, eu vou escolhê-lo e depois arrastá-lo diretamente para fora para que possamos ver um pouco dele assim. Então eu vou mudar isso. Então, eu gostaria que essa imagem realmente se movesse para baixo. Então, eu gostaria que pudéssemos ver muito mais pessoas na foto. E então eu gostaria que o texto fosse muito menor para que pudéssemos realmente ver as pessoas muito melhor quando tivermos esse layout diferente. Vamos colocar 63, por exemplo, alterar um pouco o texto para que os layouts tenham uma aparência um pouco melhor Agora podemos comparar esses dois e gostaríamos de fazer a transição desse verde para esse verde. Tudo o que você precisa fazer é voltar ao protótipo. Clicamos em todo o quadro de arte, então o nome está aqui. E então vamos passar para o próximo, que é o destino final. Agora, vamos escolher o tempo, que é uma opção que temos quando temos um quadro de arte inteiro. Vou colocar isso com um tempo externo muito curto de 0,4 s. Então vamos escolher a animação automática porque gostaríamos que fosse animada Podemos ter algo como Ease Out, que é uma opção muito boa e suave. Também podemos ter alguns diferentes, como o snap. Mas eu vou ficar com este. Vou colocá-lo em 3 s apenas para que tenha um pouco de duração. Então, tornamos isso muito rápido. Podemos colocar 1 s se quisermos ser muito longos, para que possamos experimentar lá. Agora vamos ver o que acontece quando vamos jogar. É incrível que a animação aconteça. Então, os textos ficaram maiores, a imagem se moveu para baixo e saiu um pequeno horário de abertura. Então, agora, a última coisa que quero mostrar a vocês é uma sobreposição. Isso é super prático para coisas que você quer que apareçam. Por exemplo, como um boletim informativo ou, digamos, um teclado. Então, neste caso, eu gostaria de criar um boletim informativo. E o que vamos fazer é criar um novo quadro de arte. Na verdade, pode ser de qualquer tamanho, desde que caiba em nosso pop-up, vou renomear este Ótimo Então, o que vou fazer agora é criar o design real para esse pop-up Vou escolher uma cor de fundo para isso só ver no que estou realmente trabalhando. Eu gostaria que esse design tivesse uma borda só porque não sei em qual plano de fundo isso vai aparecer em todas as instâncias. Então, vou escolher essa borda como essa cor verde e adicionar alguns tamanhos maiores para o contorno Ótimo, então agora vou agrupar todos esses. A próxima coisa que queremos fazer é realmente garantir que nossa prancheta tenha basicamente o tamanho da coisa real que gostaríamos que fosse sobreposta Portanto, não precisa ser exato, mas eu quero chegar bem perto. Ótimo Agora temos um boletim informativo aparecendo aqui e podemos reutilizá-lo em qualquer caso em que quisermos que ele apareça E então eu vou passar para o protótipo. Então, eu gostaria que, aqui no link do boletim informativo , esse pop-up realmente aparecesse Então, vou clicar e arrastar até aqui. Vamos fazer com que o Trigger seja um toque. E vamos escolher Overlay. Vamos garantir que o destino esteja correto. E acho que não gostaria de nenhuma animação para isso. Então, agora vamos ver o que acontece. Vamos escolher esse e depois vamos jogar. Então, se formos até aqui, clicaremos em boletim informativo. Agora podemos ver que esse pop-up aparece na tela. Gostei muito do fato de ser transparente como plano de fundo. Mostra apenas as coisas que gostaríamos que mostrasse. Se clicarmos em algum lugar fora dele, ele desaparecerá. Então, essas são algumas interações realmente úteis que você pode usar para sua prototipagem 11. Obtendo feedback: Incrível. Então, agora seu design está pronto e você deseja compartilhá-lo com seus clientes por meio de feedback É aqui que vamos para a guia Compartilhar. Para compartilhar seu design. Tudo o que você precisa fazer é clicar na guia Compartilhar. E então vamos dar uma olhada nessas diferentes opções aqui. Portanto, temos algumas opções diferentes para a forma como estamos realmente compartilhando nosso design. Nesse caso, quando quisermos obter feedback de nossos clientes, continuaremos com esse chamado Design Review. E podemos escolher aqui. Então, ou apenas convidou pessoas, o que significa que precisamos adicionar seus e-mails. Qualquer pessoa com uma senha, o que significa brocar uma senha, ou qualquer pessoa com o link Então, qual deles você escolher realmente depende da configuração do projeto. Se, digamos que você esteja trabalhando individualmente com uma pessoa e só queira que essa pessoa tenha acesso E você quer ter certeza de que outras pessoas da equipe não possam acessá-lo Você pode escolher o único convidado ou o eixo com uma senha. Mas vamos ver o que acontece quando muitos dos nossos projetos têm uma equipe com a qual estamos trabalhando. Então, podemos enviar isso para um cliente e depois ele compartilhar com o redator para verificar tudo, talvez com o profissional de marketing para garantir que tudo E então eles querem poder encaminhar isso para outra pessoa. Então, eu costumo escolher qualquer pessoa com um link, a menos que haja um alto risco de algo que precisa ser muito privado sair. Então, vou continuar com isso e clicar em Criar link. Depois que esse link for criado, tudo o que precisamos fazer é clicar nesse pequeno ícone aqui e copiar o link. E é exatamente isso que o cliente verá ao clicar no link que você envia em um e-mail, por exemplo. O que vamos ver aqui é a prancheta no lado esquerdo E então veremos um campo comum à direita. Se tivermos pranchetas diferentes, como neste caso, você também verá uma das seis E se, digamos que você tenha vinculado essas coisas diferentes no menu ou itens diferentes, elas serão clicáveis Como você pode ver aqui, se clicarmos nesse botão de contato, ele nos levará ao site aqui, que é a página de contato. Você também pode usar essas setas para navegar pelas diferentes páginas É muito fácil para seu cliente ver todas as páginas diferentes que você criou. O melhor aqui é que eles podem comentar diretamente sobre o design. Porque muitas vezes, quando recebemos feedback de clientes, eles podem escrever um longo e-mail com vários nós diferentes e você está tentando decifrar quais comentários se aplicam a diferentes seções de um site, até mesmo Então, quando você tem grandes projetos, isso é extremamente útil. Então, o que podemos fazer é que nosso cliente possa ter essa função de pino e colocá-la em qualquer seção para a qual esse comentário seja relevante. Digamos, por exemplo, que a coloquemos nesta foto. E eles comentariam. Por exemplo, poderíamos ter uma foto de um termicamente Eles enviaram e, em seguida, você pode realmente entrar e responder diretamente, então você pode clicar em Responder aqui. E isso torna muito fácil ter discussões sobre os diferentes comentários e feedback sem precisar atender a uma ligação ou tentar fazer isso por e-mail Então, eu realmente gostei desse recurso. Então, se voltarmos ao nosso arquivo XD real, digamos que agora estamos começando a implementar alguns desses comentários. Na verdade, podemos não querer que nosso cliente veja ao vivo o que estamos fazendo. E é aí que entra esse recurso do Update Link. O Adobe XD só mostrará coisas novas que aconteceram com o Design se você clicar em Atualizar link. Assim, você nunca precisa se preocupar com o fato seu cliente acessar o link e ver metade do progresso, pois ele só será atualizado se você clicar em Atualizar link. A seguir, vamos dar uma olhada em como trabalhar com um desenvolvedor 12. Compartilhando com um desenvolvedor: Ok, ótimo. Então, seu cliente aprovou seu design e é hora de você compartilhá-lo com seu desenvolvedor. É aqui que voltamos para a guia de compartilhamento, mas, em vez disso, vamos para o desenvolvimento. Essas opções tornam muito fácil para nosso desenvolvedor acessar e pegar todos os códigos de cores, tamanhos de fonte e estilos que você configurou. Mas eles também podem baixar todos os diferentes ativos que você criou diretamente do protótipo Então, estamos de volta na guia de compartilhamento. E agora queremos compartilhar isso com nosso desenvolvedor porque nosso cliente aprovou tudo e estamos prontos para começar a criar. O que vamos fazer é mudar isso da revisão de design para o desenvolvimento. E aqui também podemos escolher exportar para a web. E isso é muito importante porque queremos garantir que todos os ativos que marcamos para exportação possam ser baixados diretamente pelo nosso desenvolvedor. Mas para fazer isso, nós realmente temos que configurá-los como prontos para exportação. Então, vamos fazer isso voltando para a guia Design e clicando em qualquer um dos ativos. Então, digamos que essa imagem, por exemplo, tudo o que você precisa fazer é rolar até esta pequena seção aqui e clicar em marcar para exportar Agora, deixe-me voltar para nossa guia de compartilhamento. Veremos que isso já está disponível e indicará um ativo. Então, se tomarmos isso, dirá ativos para download. Isso habilita essa função para que alguém possa baixar os ativos diretamente. Então, o que vamos fazer agora é clicar no link Atualizar para que tenhamos esses ativos e todas as nossas novas configurações lá. Podemos ver que, embora tenhamos atualizado o link, os comentários que tínhamos anteriormente ainda estão lá, o que é muito útil Mas agora, na verdade, há outra função. Então, se formos para essa pequena guia de desenvolvimento à direita, veremos que temos uma lista dos ativos disponíveis, das diferentes cores, incluindo os códigos de cores, o que é muito útil. Também temos os diferentes estilos de caracteres definidos que estamos usando nesta página. E também temos interações diferentes. Então, gatilhos diferentes, destinos diferentes. Então, todo o Xd é muito útil para alguém que está desenvolvendo o site. Se voltarmos aos ativos aqui em cima, o que alguém poderia fazer agora é clicar nessa imagem aqui, e podemos realmente baixá-la. Isso baixará esse ativo diretamente. Se você tiver muitos deles, eles podem marcar todos eles e baixá-los todos de uma vez. Depois de abrirmos isso, veremos que embora seja um ativo criado e o XD, ele criará dois arquivos que foram baixados. Ele sempre cria um de cada vez o tamanho e um a duas vezes o tamanho. E isso é para que seu desenvolvedor tenha opções porque obviamente deseja um arquivo que seja de alta qualidade o suficiente. Mas você não quer que ele diminua a velocidade do seu site ou consuma muita energia para carregar. Se você quiser que diferentes ativos que estejam realmente separados em seu design, mantenham o layout exato. E você gostaria que eles realmente exportassem como uma única imagem. Tudo o que você precisa fazer é clicar neles, agrupá-los e depois marcar para exportar juntos. Dessa forma, se voltarmos a compartilhar, atualize nosso link. E agora podemos ver que temos esse ativo aqui , que é um grupo. Então, à medida que baixamos, ele realmente baixará esses dois ativos agrupados como uma imagem E isso é muito útil quando você está tentando ter uma maneira de controlar como o design é composto Se você tem uma situação em que não quer que eles estejam, digamos, animando de forma independente ou fazendo qualquer outra coisa. Às vezes, só precisamos que as coisas estejam em uma posição fixa. E esse é um recurso realmente ótimo 13. Sites sustentáveis e inclusivos: Um tópico que me preocupa muito é sustentabilidade e acessibilidade para sites Como os sites são puramente digitais, muitos de nós não pensam pegada ambiental, mas na verdade há muito que podemos fazer para ter um impacto muito bom ao que podemos fazer para ter um impacto muito bom integrar coisas como conteúdo de vídeo, animações Muitas dessas coisas consomem muito mais energia do que se tivéssemos uma única página estática. Por exemplo, sempre que criamos um site, sempre queremos começar com um básico e só adicionar coisas se elas estiverem adicionando algo à experiência real do usuário E isso parece muito importante para a jornada do usuário. Onde pudermos, podemos garantir que nossos tamanhos de arquivo sejam os menores possíveis. Em vez de enviar um vídeo, podemos usar um link do YouTube, por exemplo Portanto, existem várias maneiras de pensar sobre isso, nas quais podemos minimizar a energia real necessária para carregar essa página quando se trata de acessibilidade . É claro que também queremos pensar em coisas como todas as tags, contraste de cores, quais fontes e tamanhos usamos para que pessoas com habilidades diferentes e experiências diferentes na web tenham Mesmo coisas pequenas, como colocar a descrição quando você está fazendo um formulário fora do campo, em vez de como um espaço reservado, significam que uma conversão de texto em fala pode realmente lê-la para alguém para que essa pessoa entenda o que Há muitas coisas diferentes que podemos aprender. Então, eu realmente encorajo você a investigar isso. E acho que também existem ótimos cursos sobre o Skillshare que você pode explorar Também vou me certificar de vincular algumas ferramentas e aplicativos realmente excelentes na descrição. Assim, você pode começar sua jornada para aprender mais sobre sites sustentáveis e inclusivos 14. Dicas de bônus: Então, antes de mergulharmos no projeto da aula, eu só queria compartilhar algumas dicas e truques diferentes que me ajudaram ao longo do caminho. Coisas que aprendi como web designer. A primeira é definir expectativas muito claras em todos os seus projetos. Sempre que você estiver trabalhando em um site ou em várias partes móveis. Se pensarmos bem, qualquer projeto precisa primeiro ter as metas que precisamos definir. Precisamos ter certeza de que temos todos os ativos diferentes que podem ser fornecidos por pessoas diferentes. Digamos que o site copie as imagens, as fotos da página sobre. Portanto, eles podem ser todos esses ativos diferentes que precisamos considerar. E precisamos garantir que todos os envolvidos, que precisam fornecer ativos, que precisam fornecer ativos, saibam exatamente quando isso precisa acontecer, saibam exatamente como fornecer esses ativos, o que eles deveriam ser. Por isso, precisamos ter certeza de que isso está muito claro. É por isso que eu sempre gosto ter um cronograma muito claro e, em seguida, configurar um portal do cliente onde isso sempre seja exibido Você pode configurar seu portal de clientes de várias maneiras diferentes, incluindo lugares como Trello, Asana, base camp Há tantos lugares diferentes que você pode conferir. Assim, você também pode escolher uma ferramenta com a qual já trabalhou e com a qual esteja muito feliz e familiarizado. Uma forma de garantir que o projeto executado sem problemas é lembrar a todos durante todo o projeto a próxima etapa Digamos, por exemplo, que tivemos reunião sobre as metas do site e estamos pouco antes de entrarmos em wireframes Sabemos que, depois dos wireframes precisaremos de todos os diferentes ativos como imagens e textos , para passarmos do wireframe ao passarmos do wireframe Portanto, não queremos acabar em uma situação em os wireframes estejam concluídos e estejamos esperando por todos os ativos Podemos dizer aos nossos clientes ou às pessoas envolvidas dizendo: Ei, estamos no estágio agora, estamos prestes a entrar em wireframes Quer que esses wireframes sejam feitos em, digamos que daqui a duas semanas, precisamos ter todos os outros ativos prontos para começarmos a implementar o design Aqui está como você pode fazer isso. Talvez você compartilhe um link para que eles o enviem, ou qualquer outra forma que você ache que seria a maneira mais fácil para todos os envolvidos. Outra ótima coisa a se pensar é em quem tem poder de decisão neste projeto e quem é capaz comentar e contribuir com ideias Então, o que queremos ter certeza é que não estamos acabando em uma situação em que haja, digamos, 5 a 10 pessoas diferentes que acompanham comentando e tendo Mas quem talvez nem sempre tenha participado de todas as reuniões. Digamos que alguém entre em um estágio em que não fez parte da estratégia, mas agora está vendo o site finalizado. Neste momento. Na verdade, não estamos procurando comentários sobre a estrutura do site. Talvez estejamos apenas procurando pequenos comentários sobre coisas que estamos corrigindo ao longo do caminho. Queremos ter certeza de que sabemos quem tem o poder certo e garantir que eles estejam fazendo o tipo certo de feedback em todas as etapas do processo. Tudo isso se resume novamente à pergunta de comunicar isso. Portanto, um dos nossos maiores trabalhos como web designers é garantir que sejamos realmente claros em nossa comunicação e expectativas em relação a nós e às outras pessoas. A colaboração é uma parte muito divertida de qualquer projeto e eu recomendo fortemente parceria com outros profissionais em sua área que complementem E acho que isso apenas fortalece todo o processo de design do site Outros criativos podem incluir redatores, estrategistas de desenvolvimento web, marketing e qualquer pessoa que você ache que será um ponto forte para o projeto e Também acho que é uma ideia muito boa trazer pessoas em estágios muito críticos. Mesmo antes de mostrar algo ao cliente, você pode colaborar com essas pessoas nos bastidores Então, digamos, por exemplo, que você esteja criando wireframes e queira criar esse recurso muito bom Mas você não tem certeza se vai ser difícil de construir. Você pode discutir com seu desenvolvedor e ver qual é a melhor maneira de fazer isso para que tenhamos essa ideia antes de apresentarmos algo ao nosso cliente que poderia ser muito difícil de construir. Agora vamos passar para os projetos de classe 15. Projeto do curso: Agora é a sua vez. Quero ver que tipo de site você está criando. Se você também quiser criar um site para um jardim urbano, assim como eu fiz aqui. Eu adicionei o resumo na seção de projetos de classe. Se você preferir trabalhar em um projeto de cliente ou em um projeto pessoal, seria incrível , e eu adoraria ver seu trabalho na guia Projetos. Se você ficar preso em algum momento, é só me avisar nos comentários e eu adorarei ajudá-lo. Não se esqueça de compartilhar seus projetos e comentar sobre projetos de outras pessoas para que possamos ajudar uns aos outros nessa comunidade criativa. Muito obrigado por trabalhar comigo neste projeto de design de site e por perdoar o apoio mútuo Espero que você se sinta mais confiante e empolgado com o uso Adobe XD e que ele possa ajudá-lo com seu trabalho diário Muito obrigado e nos vemos nas discussões.