Introdução a UI/UX para designers gráficos: Adobe XD

1. Trailer: Muitos designers querem fazer a transição para UI/UX, mas pode ser muito difícil saber por onde começar e é exatamente por isso que eu criei essa classe. Sou Maddy Beard e sou um designer estratégico baseado em Denver, Colorado. Primeiro comecei em design gráfico no Programa de Design da Penn State, onde aprendi principalmente branding, impressão e design de embalagens. Depois de me formar, trabalhei em uma empresa de tecnologia como Designer Digital, projetando sites de comércio eletrônico para alguns dos principais varejistas do mundo. Então eu decidi que queria trabalhar para mim mesmo para que eu pudesse assumir mais controle sobre os projetos em que eu trabalhei e também ter mais flexibilidade na minha vida e carreira. Desde que saí sozinha. Eu fiz branding, web design e UI/UX design para pequenas e médias empresas, incluindo Commune, uma plataforma digital para bem-estar pessoal e social, Yoga com Adrian, uma plataforma de yoga online com mais de nove milhões de assinantes no YouTube, WeFinance, uma empresa de fintech local para Denver e muito mais. Atualmente, estou trabalhando como residente criativo para a Adobe, focando principalmente no design UI/UX no espaço wellness. Eu também ensino conceitos de UI/UX no YouTube e Instagram, que é onde eu ouvi falar de muitos designers que estão interessados em entrar em UI/UX, mas não sabem bem por onde começar. Os alunos acham que precisam afundar milhares de dólares e meses de tempo em extensos campos de inicialização e cursos de UX, e isso não é o caso. É por isso que estou muito entusiasmada por partilhar esta aula contigo. Eu realmente acredito que você não precisa estudar UI/UX para se tornar bem sucedido, você precisa praticá-lo. Isso é exatamente o que eu vou ajudar você a fazer nas próximas lições. Vamos rever o básico, o que é UI/UX e quais habilidades vão para ele. Em seguida, entraremos em todo o processo de UX do início ao fim. Mal posso esperar que ganhe mais confiança em suas habilidades enquanto passamos por essas lições. Vamos começar. 2. Visão geral do projeto: O projeto para essa classe é projetar um recurso exclusivo de aplicativo móvel usando o Adobe XD. Não se deixe enganar em pensar que você precisa redesenhar totalmente uma experiência completamente nova a partir do zero, a fim de mostrar suas habilidades em seu portfólio. Na verdade, eu acho que como iniciante, é mais eficaz aprimorar e se concentrar intencionalmente em um recurso ou fluxo. Este projeto permitirá que você complete todo o processo de UX do início ao fim. Primeiro, você estará definindo o problema. Em seguida, você passará para exercícios, como mapeamento de afinidade e esboços, configurará seu arquivo do Adobe XD, transformará esses esboços em wireframes digitais e, em seguida, projetará e protótipo de suas soluções. Por último, vamos pegar esses protótipos finais e transformá-los em um vídeo visualmente agradável que você pode usar em seus portfólios. Se isso soa super esmagador, não se preocupe. Vou levar vocês cada passo do caminho e compartilhar meu próprio projeto pessoal com vocês, bem como dicas que aprendi ao longo dos anos. Minha dica número um para o sucesso é levar este processo passo a passo e compartilhar seu trabalho abaixo para que possamos apoiar e encorajar uns aos outros ao longo desta jornada. Com tudo isso fora do caminho, vamos pular para a 1ª lição. 3. O que é UX?: Antes de mergulharmos em todo esse processo, eu quero tomar algum tempo para definir exatamente o que é o design UI/UX e alguns outros termos relevantes. Vamos começar com o tópico abrangente do design da experiência do usuário. Quando alguém diz que é um designer de UX, eles podem lidar com coisas como design de interface de usuário, usabilidade, acessibilidade, arquitetura de informação e interação homem-computador. Um designer de UX reúne todas essas peças para projetar um sistema que ajuda a facilitar uma experiência útil para um usuário. Uma interface de usuário ou designer de interface de usuário é um pouco mais de um termo específico; que é alguém que projeta a interface real e como ela se parece para o usuário. Para ficar ainda mais granular, vamos definir o que uma interface realmente é porque muitas pessoas pensam que uma interface é apenas uma tela. Pode ir muito mais além disso. Uma interface é o meio pelo qual nós, como humanos, nos comunicamos ou interagimos com a máquina. Exemplos de interfaces são um computador e teclado, uma tela sensível ao toque, um ATM, bem como interfaces de usuário baseadas em voz, como assistentes virtuais. Outro termo que você deve ter ouvido falar é design de produto. O design do produto se enquadra na mesma categoria de design de experiência do usuário, mas é específico para um produto, seja digital ou físico. Usabilidade e design visual são muito importantes, quer você esteja projetando algo digital ou físico. Os designers de produtos geralmente têm que equilibrar as metas e os objetivos de uma perspectiva de negócios, bem como a perspectiva de um usuário, e eles geralmente estão trabalhando em estreita colaboração com um gerente de produto e um engenheiro. Outro termo comum que você deve ter ouvido falar é design de interação. Isto é ainda mais específico. É importante para designers de UX, designers de IU e designers de produtos. Honestamente, é exatamente o que parece. É tudo sobre projetar a interação entre o produto e a pessoa que usa o produto. Os designers de interação precisam pensar nas palavras que estão usando, nas representações visuais que estão usando, nos objetos físicos que fazem parte de uma interação, como um mouse ou um trackpad. Eles têm que considerar o tempo, que entra em jogo com animação, vídeo e sons, e eles têm que pensar sobre psicologia comportamental, significa como o ser humano pode realmente aprender e entender como interagir com o interface. A experiência do cliente é outra coisa realmente importante a considerar, e é algo em que alguns designers de UX se concentram e outros não. Ele começa sempre que o cliente tem uma necessidade, e termina sempre que a necessidade do cliente é realmente atendida. Airbnb é um ótimo exemplo. Alguém decide que quer sair de férias. Toda a experiência do início ao fim é realmente importante. Pegando as chaves, interagindo com o anfitrião, o que eles têm que fazer para limpar e verificar fora do lugar no final das férias. Todas essas coisas estão em torno da experiência do cliente, e eles são realmente importantes para considerar e realmente projetar sempre que você está criando um produto que existe na tela e no mundo real, o que a maioria dos produtos faz. Último termo importante que eu pensei que eu iria mencionar é design thinking. Design thinking é basicamente apenas um processo circular que todos os designers devem estar pensando e fazendo em uma base contínua. Começa com empatia, então você vai para a definição, em seguida, você vai idear, em seguida, protótipo e teste, e você geralmente vai voltar entre prototipagem, teste, prototipagem e teste, e você pode até pular para trás e para a frente para alguns dos passos anteriores também. É uma ótima estrutura para pensar e é definitivamente irrelevante no processo que estamos prestes a enfrentar nesta classe. Não há nenhuma etapa de ação para esta lição, mas se você está apenas aprendendo sobre UX como uma oportunidade de carreira, então sinta-se livre para passar algum tempo olhando para anúncios de emprego. Acho que se você quiser eventualmente conseguir um emprego na UX, é importante saber o que os empregadores estão procurando em termos de habilidades e experiências. Basta pesquisar designer de UX ou designer de produto em um site de publicação de emprego e verificar o que os empregadores estão procurando por empregos que você possa estar interessado no futuro. Não deixes que isto te intimide. Você provavelmente está apenas no início de sua jornada, então tente dar um passo de cada vez. O primeiro passo é criar seu primeiro projeto. Vamos começar com isso na próxima lição. 4. Defina um problema: O primeiro e, sem dúvida, o mais importante passo em qualquer bom projeto de design é definir o problema. Sempre que você recebe uma tarefa no trabalho ou por um cliente, normalmente, você vai definir o problema usando uma extensa pesquisa fundamental, que significa que você vai conversar com partes interessadas e usuários, e descobrir quais são os objetivos e objetivos, e priorizá-los. Mas quando se trata de criar projetos de prática como estamos fazendo nesta classe, o processo para definir o problema é simples. Você percebe um problema em sua vida cotidiana ou através de conversar com seus colegas e, em seguida, você investigá-lo mais a fim de escrever uma declaração de problema sucinta. Para me ajudar a ter o hábito de perceber potenciais problemas e oportunidades ao meu redor, eu realmente gostei de manter um caderno onde eu apenas anoto essas coisas sempre que eles vêm até mim. Às vezes, é quando estou usando um programa. Às vezes, é quando estou tentando fazer algo para o trabalho. Às vezes, é quando estou apenas vivendo minha vida diária e outras vezes, é quando estou conversando com meus amigos e família. Esses problemas não precisam ser grandes ou mudar a vida. Eles podem ser qualquer coisa. Se você não tem uma lista de problemas em um caderno como eu tenho, então para vir acima com o problema, o que você pode fazer é pensar em categorias específicas áreas ou indústrias que realmente lhe interessam. Você pode pensar em problemas específicos que podem ter a ver com ser criativo ou ser um estudante ou estar envolvido em esportes. Talvez haja problemas relacionados ao bem-estar, alimentação, transporte ou produtividade. Uma dica para esta aula é tentar ficar longe de experiências de compras ou problemas dentro desse espaço. redesigns de sites de comércio eletrônico são extremamente comuns e, na minha opinião, eles são realmente chatos porque eles não exercem seu músculo de resolução de problemas. Na maioria dos casos, o objetivo é o mesmo, apenas para vender mais produtos. Para o seu problema, tente pensar em algo fora desse mundo e pontos de bônus, se você quiser validar seu problema ou provar que vale a pena resolver através de um pouco de pesquisa de fundo. Para fazer isso, você basicamente quer apenas reunir evidências de que este é um problema que muitas pessoas estão experimentando, que valeria a pena tentar resolver. Você pode fazer isso olhando para fóruns do Reddit, grupos do Facebook, evidências anedóticas, conversando com amigos e familiares. Você também pode fazer pesquisa de mercado para descobrir se alguém já tentou resolver esse problema. Se sim, isso não significa necessariamente que você não deve enfrentá-lo. Isso realmente valida o seu problema porque é algo que alguém considerou importante o suficiente para trabalhar. O que você pode fazer é explorar a solução deles e ver o que você pode aprender com ela. Agora vamos entrar em como realmente escrever sua declaração de problema. Há algumas coisas que toda boa declaração de problema tem. O primeiro é um pouco de contexto, definindo a cena para o motivo pelo qual o problema é importante agora. Segue-se o quem, quem está a ter este problema e, portanto, quem se beneficiaria de uma solução. Em seguida, é o desejo ou necessidade que essa pessoa tem. O que eles querem ou precisam que eles não têm atualmente? Por último, o que impede que essa pessoa atinja esse desejo ou objetivo? Vejamos a afirmação do problema que vou enfrentar para esta aula. As pessoas estão comendo em casa mais frequentemente agora do que nunca. milênios que trabalham querem cozinhar e comer refeições saudáveis, mas estão ocupados e o planejamento de refeições pode ser tedioso. Eles precisam de uma maneira de agilizar o processo e tirar parte do tempo e esforço necessários. Observe que esta declaração de problema não tem nada a ver com a solução. Não faz a hipótese de que forma a solução pode assumir. Afirma simplesmente o problema e responde às quatro áreas-chave de que falámos anteriormente. Dizendo que as pessoas comem em casa com mais frequência agora do que nunca, isso define o contexto e explica por que razão este problema é importante para resolver agora. Ele menciona os millennials trabalhando e, em seguida, ele também descreve mais tarde que essas pessoas estão ocupadas, que é uma maneira de afirmar o quem na declaração. Fala sobre o que eles querem. Diz que querem cozinhar e comer refeições mais saudáveis em casa. Ele fala sobre o que está atualmente em seu caminho. Planejamento de refeições é muito tedioso para pessoas que não têm toneladas de tempo livre. Agora, eu vou convidá-lo a pensar sobre o problema que você vai resolver para o resto desta classe. Minhas dicas para este passo são, manter a declaração do problema realmente específica, mas apenas ser específico sobre o problema. Não apresente a solução ainda. Não fale nada sobre um aplicativo móvel. Concentre-se na necessidade ou oportunidade. Para a prática, eu realmente recomendo anotar cinco ou 10 declarações de problema e, em seguida escolher uma que é mais interessante para você seguir em frente. Depois de ter sua declaração de problema, copie e cole-a e compartilhe com a classe para que possamos fornecer feedback para você. Se estás a ter problemas em arranjar um problema teu, está tudo bem. Agora, vou compartilhar mais algumas para o meu caderno que você pode roubar ou mudar um pouco e usar para este projeto. A primeira afirmação do problema é que, hoje em dia, é incrível como é fácil conhecer pessoas que você nunca teria conhecido sem a Internet. Dois estudantes universitários vão se encontrar para tomar café, mas não falam a mesma língua. Eles querem conhecer uns aos outros, mas eles estão nervosos por não serem capazes de se conectar por causa da barreira linguística. Outro afirma que, quando você se muda para uma nova cidade, é fácil se locomover por causa de aplicativos de mapas, mas isso torna mais difícil aprender sobre um novo ambiente. Como jovens profissionais que se mudam para uma nova cidade aprender o seu caminho enquanto chegam onde querem ir? A última afirmação do problema é que, nos dias de hoje, as pessoas estão aprendendo o quão importante é comprar em segunda mão e parar de contribuir para a moda rápida e práticas trabalhistas prejudiciais, mas pode ser difícil fazer isso na prática. Como poderia uma mulher de 20 e poucos anos decorar seu novo apartamento em Nova York com móveis de segunda mão e decoração sem ter que fazer horas de pesquisa na caça de brechó? Como eu disse, sinta-se livre para roubar um desses ou apenas usá-lo como inspiração para escrever o seu próprio. Em seguida, vamos aprender tudo sobre mapeamento de afinidade e fazer um dos meus exercícios favoritos, mas você realmente não precisa de uma equipe para completar. 5. Mapeamento de empatia: Normalmente, o mapeamento de afinidade é feito com grupos de pessoas colaborando em um projeto. Normalmente, todos eles reuniram notas e descobertas e estão se unindo e usando esse exercício de mapa de afinidade para organizar tudo o que encontraram. Mas isto sendo dito, como freelancer e como alguém que normalmente é o único designer ou uma pessoa de produto em uma equipe, eu costumo fazer esses exercícios de diagramação sozinho e ainda encontro um imenso valor neles. Vou mostrar-lhe o meu método favorito para fazer este solo para que você possa fazê-lo para o seu produto também. Chama-se mapeamento de empatia. É uma ótima maneira de se colocar no lugar de seu usuário e reunir mais insights sobre o espaço problemático e o usuário. Primeiro, você precisa determinar quem é seu usuário. Se você escreveu sua declaração de problema e seguiu as diretrizes na lição anterior, então isso deve ser realmente fácil. Para mim, está trabalhando na geração do milênio. Sinta-se livre para dar a essa pessoa um nome, idade, ocupação, talvez uma descrição de uma linha, a fim de trazer a persona à vida. Vou dar o nome de Phoebe à minha persona. Digamos que ela tem 29 anos e trabalha em casa como gerente de produtos para uma empresa de tecnologia. Pontos de bônus se você for realmente capaz de entrevistar algumas pessoas diferentes que se encaixam no seu grupo de usuários alvo. Desta forma, você poderá aprender um pouco mais sobre eles, o que eles fazem diariamente, e especialmente como eles lidam com esse problema atualmente. Se não, tudo bem, é só um projeto de prática. Mas você pode ter que fazer um pouco de alcance quando se trata deste próximo exercício, especialmente se você mesmo não cair no grupo de usuários alvo. Em seguida, é hora de configurar as diferentes categorias do nosso mapa de empatia. Vá em frente e tire oito notas adesivas ou oito pedaços de papel se você não tem notas adesivas à mão e escreva os seguintes títulos; metas e restrições, digamos, pense e sinta, veja, ouça, tarefas e ações, distrações, motivações e frustrações. Agora é hora de brilhar. Eu geralmente acho mais fácil começar com metas e restrições. Mas depois disso, gosto de me mover e escrever o que vem até mim e depois categorizar isso como eu vou. Vou tentar me colocar no lugar do usuário e realmente fingir que estou tentando alcançar esse objetivo. Eu só vejo o que aparece e anoto e coloco na categoria que faz mais sentido. Depois de um tempo, terei cada uma dessas categorias preenchida com pelo menos cinco post-its ou marcadores se estiver usando um pedaço de papel. Ok, vamos dar uma olhada no meu mapa de empatia para que você possa ver como isso funciona. Primeiro, vamos olhar para metas e restrições. Eu escrevi que os objetivos podem ser comer mais refeições caseiras, viver um estilo de vida mais saudável para se sentir bem, fazer as refeições que ela economiza no Pinterest ou no Instagram, pedir menos Uber Eats. Então as restrições são que ela está ocupada trabalhando em casa e ela só tem tempo para fazer compras uma vez por semana, geralmente nos fins de semana. Agora vamos seguir em frente para dizer, pensar e sentir. Essas podem ser coisas que ela está dizendo em voz alta para as pessoas ao seu redor, coisas que ela está pensando para si mesma, ou maneiras que ela está sentindo sobre esse problema. Talvez ela diga ou pense “O que vou fazer para os jantares esta semana? Onde eu vi aquela receita de chili novamente? Acho que esqueci de fazer uma captura de tela. O que eu preciso comprar para fazer todas essas refeições?” Escrevi que ela pode estar com fome e sobrecarregada. Agora vamos seguir em frente para ver. O que seu usuário pode estar vendo ao seu redor? Eu escrevi muitos produtos no supermercado, ingredientes no balcão, uma geladeira vazia, e receitas no Instagram, Pinterest e outros blogs. Isso realmente ajuda a definir a cena e pode inspirar uma solução realmente criativa mais tarde. Basta tentar colocar-se no lugar do seu usuário e pensar sobre o que ele pode estar vendo em cada passo do caminho. Vamos seguir em frente para ouvir. Eu disse que Phoebe pode estar ouvindo escaldante na panela com que ela está cozinhando. Ela pode estar ouvindo um podcast que ela está ouvindo enquanto cozinha. Ela pode ouvir o temporizador da cozinha disparando. O parceiro perguntou-lhe o que há para o jantar. Talvez amigos na sala de estar. Em seguida, são tarefas e ações. Estas são coisas que ela pode precisar para tomar medidas em todo o processo de cozinhar. Eu escrevi encontrar receitas, salvar receitas, escolher receitas para a semana seguinte, fazer uma lista de compras com base nessas receitas, comprar alimentos e, em seguida, cozinhar a comida. Estes são bastante auto-explicativos, mas eles realmente vão vir a calhar sempre que você vai criar seu fluxo de usuário. Em seguida, vamos falar sobre distrações. Isto é quando é realmente importante pensar sobre o seu usuário específico. Para mim, Phoebe pode se distrair com opções de comida fáceis, como refeições congeladas ou Uber Eats. Ela pode estar distraída com seu parceiro trabalhando em casa. Ela pode estar distraída com seu próprio trabalho e e-mails e pela TV, YouTube ou mídia social. Em seguida, vamos pensar sobre quais são as motivações dela. Por que isso é tão importante para ela? Escrevi que a nutrição é importante para ela, sentir-se e parecer saudável, ter energia, cultivar habilidades e rotinas culinárias, usar o ato de cozinhar como uma forma de relaxar do seu dia de trabalho, e talvez influenciadores online estão motivando para ela. Por último, temos frustrações. Esta também é uma das categorias mais importantes porque ele vai dizer que tipos de coisas evitar e que tipos de coisas para dar ao seu usuário as habilidades para contornar. Eu escrevi que Phoebe está realmente frustrada quando todas as suas receitas estão em lugares totalmente diferentes. Ela fica frustrada quando tem que fazer compras com muita frequência. Ela não gosta de comer as mesmas refeições várias vezes. Ela fica frustrada quando sente vontade de desistir porque cozinhar e comer saudável em casa requer muito esforço. Ela fica frustrada sempre que a comida estraga, e ela odeia aqueles anúncios pop-up irritantes que sempre aparecem em blogs de alimentos quando ela está procurando receitas. Muito bem, agora é a tua vez. Vá em frente e preencha seu mapa de empatia com tantas coisas quanto você puder. Tente não se filtrar ou se julgar, porque algumas das coisas que você acha que não são importantes podem realmente desencadear algo mais tarde no processo. Quando terminar, tire uma foto e compartilhe-a abaixo. Na próxima lição, vamos entrar em uma das minhas fases favoritas, que é esboçar. Spoiler alerta, você não precisa ser bom em desenhar, a fim de fazer isso. 6. Jornada do usuário e esboço: Esboçar é a minha parte favorita de quase qualquer projeto porque é quando nossas idéias podem ser as mais fluidas e iterativas. O objetivo não é encontrar a solução perfeita ou criar a interface mais única, ou desenhar as formas mais perfeitas, é realmente apenas para ser experimental. Mas você pode estar pensando, como eu vou saber o que desenhar? Bem, antes de começarmos a esboçar, vamos voltar e examinar nosso mapa de empatia para tentar chegar a um recurso ou fluxo de usuário que irá resolver o nosso problema de forma mais eficaz. Em outras palavras, se seu aplicativo pudesse fazer apenas uma coisa, o que seria. Para o problema em que estou trabalhando, eu acho que esse recurso seria gerar uma lista de compras de uma semana para alguém que reuniu receitas de toda a web. Eu cheguei a esta conclusão passando pelo meu mapa de empatia e vendo que muitas das notas que eu tomei e coloquei em várias categorias, tudo voltou e teve a ver com este tópico de geração de uma lista de compras baseada em receitas encontradas todas sobre. Esta é a minha hipótese. Se os milenares de trabalho tivessem uma maneira de gerar uma lista de compras com base no valor de uma semana de receitas de várias fontes. Eles cozinhavam e comiam refeições saudáveis em casa com mais frequência. Se nos lembrarmos de volta à primeira lição sempre que falamos sobre design thinking, podemos pensar neste projeto avançando como uma forma de testar esta hipótese. Podemos protótipo deste recurso e colocá-lo na frente dos usuários para ver se ele realmente os ajuda a cozinhar e comer refeições mais saudáveis em casa. Ou podemos usá-lo como um projeto de prática. Agora que sei em que recurso estou me concentrando, posso seguir em frente e mapear minha jornada do usuário. Onde começa, onde termina? Quais são os pontos médios importantes que realmente ajudaram a colmatar a lacuna? Vamos começar com o começo e o fim. Eu acho que o processo para mim iria começar sempre que um usuário encontrar uma receita on-line que eles podem querer fazer na próxima semana, e eles iriam querer que ele terminasse com uma lista de compras gerada. Os passos do meio podem ser primeiro salvando uma receita. Talvez o usuário queira categorizá-lo como jantar ou almoço ou deserto, e então realmente planejar suas refeições, navegar por todas as receitas salvas e escolher as que eles querem fazer na próxima semana. Eu também notei na etapa final onde a lista é gerada que você pode querer categorizar a lista de maneiras diferentes com base em como você pode estar comprando, e também você pode querer ser capaz de verificar as coisas que você já tem em casa. Agora, este mapa que você criar será o seu guia para seus esboços. Como tenho quatro passos principais na minha jornada, provavelmente terei cerca de quatro telas principais, talvez mais dependendo dos detalhes. Agora vamos entrar no processo de esboço. Sempre que começo a esboçar, gosto de começar com qualquer tela que se sinta o mais importante. Às vezes, essa é a primeira tela porque você quer saber onde seu usuário está começando. Às vezes essa é a última tela porque geralmente esse é o objetivo que você está tentando realizar para o seu usuário no final, eu faço isso dessa maneira porque a relação entre as telas é muito mais importante do que o indivíduo telas si mesmos. É por isso que estamos falando sobre isso como uma jornada. Se não é intuitivo para o usuário passar, então ele não vai ajudá-los com sucesso a alcançar seu objetivo. Enquanto eu esboço, vou explicar algumas das minhas principais dicas para esboçar, e então eu vou orientá-lo através de meus esboços para que você possa ver como um verdadeiro exemplo ganha vida. Dica número 1 é usar um modelo imprimível do iPhone se você estiver procurando economizar algum tempo. Como você pode ver, é isso que eu estou fazendo aqui e eu vou ligar esse recurso se você quiser usá-lo para o seu produto. Dica número 2 é focar mais no conteúdo do que no design nesta fase. O que precisa estar na tela? Geralmente, onde deve estar e como o usuário passará do ponto A para o ponto B? Dica número 3, não tenha medo de ser bagunçado e fazer anotações nas margens. Esses esboços não precisam ser bonitos. Eles são apenas uma ferramenta para você usar sempre que entrar no Adobe XD. Dica número 4, esboçar cada tela várias vezes. Mantenha-se iterativo e não fique preso na sua primeira tentativa. É preciso prática, e eu não me refiro apenas a prática como designer, mas especificamente a prática de trabalhar nesse exato problema de design. Dica número 5, divida suas sessões de esboço para que você tenha pelo menos uma pausa no meio. Você pode voltar com uma cabeça limpa e uma nova perspectiva para avaliar e continuar iterando, e dica número 6, se você se sentir perdido, apenas volte para sua declaração de problema. Você pode ver que esses esboços estão por todo o lado e eles não parecem bonitos em tudo. Eu tenho numerado estes para que basicamente sempre que eu tentar uma tela novamente, Eu vou numerá-lo como número 2. Se eu então desistir e tentar novamente eu vou numerá-lo como número 3, e assim quando eu estou voltando, eu sei qual eu fiz primeiro e qual eu fiz por último porque geralmente o último que eu esboço é o mais bem sucedido. Estes vão fazer muito mais sentido sempre que eu colocá-los em XD para wireframe. Mas, por enquanto, vou apenas apontar todos os diferentes tipos de telas que eu tenho. Eu tenho a tela inicial que é receitas salvas. As receitas são categorizadas por jantar, almoço, desertos. Você poderia categorizá-los por qualquer coisa. Eu tenho algumas notas no lado que dizem copiar link do Instagram, Pinterest, blog, etc Em seguida, que me inspirou a fazer uma tela onde você está realmente colando no link, e isso é o que isso é aqui mesmo. Uma vez que você fez uma receita, ela geraria uma visualização de como essa receita será exibida. Você pode escolher entre imagens da própria página web da receita. Para qualquer miniatura que você queira usar, ele chamaria os ingredientes e você poderia editar o título da receita, você poderia editar os ingredientes, e ele iria então mostrar as instruções. Isso é salvar a receita para você para que quando você vai cozinhar, você também pode abrir este backup e usá-lo. Uma vez que tudo isso parece bom, então você pode clicar em “Salvar”. Então, uma vez que você clicar em “Salvar”, você será solicitado a escolher uma categoria em que essa refeição irá entrar. Jantares, almoços, desertos e, claro, você pode criar qualquer categoria que você quiser tocando em “Novo”, que iria então trazer o teclado para você criar um novo. Isso, eu fui inspirado pelo Pinterest porque sempre que você está salvando um pin, você salvá-lo em qualquer pasta que você quiser, e você sempre pode criar um novo. Essa é uma interação realmente semelhante. Você pode ver as ações que você pode tomar nesta tela de receitas salvas são adicionar uma nova receita, que irá então trazer esse modal, que permitirá que você cole um URL de uma receita que você copiou da web. Aqui você também pode gerar uma lista. Se você clicou nisso, então você seria levado para esta próxima tela onde você pode selecionar receitas de sua lista salva e gerar uma lista com base nelas. Essencialmente, o aplicativo iria olhar para o que a receita tinha como a lista de ingredientes, e seria inteligente o suficiente para ser capaz de gerar uma lista de compras com base nesses dados. Uma vez que você clicar em “Gerar”, em seguida, ele irá gerar esta lista para você. Como eu mencionei antes, eu percebi que os usuários podem querer classificar por qualquer receita que eles estão comprando ou pela categoria. Talvez eles estão indo às compras e eles querem abordar o produto primeiro e, em seguida, os alimentos enlatados, etc Aqui eu tenho uma nota que miniaturas receita pode estar aqui no canto para que quando você tocar em que, você pode selecionar e desmarcar as receitas que deseja incluir na sua lista. Talvez você gere esta lista, mas então você muda de idéia e você quer desmarcar uma das receitas. Ele vai se abrir assim e é isso que você será capaz de fazer nesse cenário. Agora é a sua vez. O passo vai realmente definir a base para o resto do seu projeto. Vá em frente e obtenha mapeamento e esboços e certifique-se de compartilhar instantâneos do seu trabalho abaixo na seção da comunidade de turmas. Depois disso, vamos finalmente entrar no Adobe XD. Vou mostrar-lhe como configurar o seu arquivo, e então, na lição seguinte, estaremos passando pelo processo de wireframing. Essa lição será muito menos esmagadora se você tiver algo para trabalhar. Vá em frente e faça esboços e te vejo na próxima aula. 7. Configuração do Adobe XD: Antes de mergulharmos em wireframing, quero fazer um tour rápido do Adobe XD e mostrar-lhe como configurar seu arquivo caso você seja novo no programa. Assim que abrirmos o XD, seremos solicitados com alguns tamanhos de prancheta diferentes para experimentar. Acho que vou usar o iPhone 12 para o meu projeto. Como você pode ver, isso nos deixa muito bem. Nós só temos esta prancheta aqui que nós vamos começar com. Para te mostrar um pouco, temos aqui a barra de ferramentas. Este é o nosso cursor onde podemos selecionar objetos e movê-los ao redor. Nós temos nossas ferramentas de forma aqui para que você possa criar uma forma e você pode dar-lhe um preenchimento e uma borda. Você também pode se livrar da fronteira. Você pode dar-lhe uma sombra e você pode manipular essa sombra usando esses controles aqui. Também podemos criar linhas e dar a essas linhas larguras diferentes. Nós também podemos dar as linhas diferentes tipos de tampas. Uma tampa arredondada e uma tampa saliente, coisas assim. Podemos usar a ferramenta caneta, que para ser honesto, eu muito raramente usei a ferramenta caneta no XD. Eu gosto de trabalhar apenas com formas e texto, e geralmente eu posso obter a maior parte do que eu preciso feito usando essas ferramentas. Claro, temos a ferramenta de texto para que possamos começar a digitar aqui e podemos, claro, manipular esse texto usando todos esses controles aqui. Podemos escolher diferentes fontes e podemos escolher diferentes variações dessas fontes, tamanhos. Podemos rastrear o texto um pouco. Podemos usar esses controles para nossos textos também. Suponho que muitos de vocês, se já são designers, já sabem sobre esses controles. Dentro do XD, eles são realmente intuitivos e você vai pegá-los rapidamente. Esta é a ferramenta de prancheta onde você pode criar uma nova prancheta. Mas o que eu realmente gosto de fazer é o atalho, que é apenas pressionar A no seu teclado e então você pode criar uma prancheta a partir daí. Outro atalho que eu realmente gosto é o R, que é retângulo, e o T, que é texto. Isso torna a minha vida muito mais fácil, e eu uso isso o tempo todo. Em seguida, vamos passar pela seção Ativos do Documento. Isso é muito bom porque podemos definir cores, estilos de personagem e componentes, que vamos entrar em uma lição posterior. Podemos configurá-los em nossos recursos de documentos para que possamos sempre usá-los. Não precisamos copiar e colar da prancheta para prancheta. Podemos simplesmente tê-los na ponta dos dedos, o que torna o design muito mais rápido. Por exemplo, digamos que quiséssemos obter alguma inspiração de cores desta foto, que acabei de baixar do Unsplash. Podemos começar a criar uma paleta de cores a partir desta foto ou realmente qualquer coisa. Em seguida, para salvar essas cores, basta selecionar todas essas formas e clicar no ícone de adição ao lado das cores. Em seguida, temos estes disponíveis para nós para usar em todo o nosso aplicativo e o mesmo vale para estilos de personagem. Este não é um estilo de personagem muito agradável, mas podemos adicioná-lo à nossa lista de estilos de personagem e voltar e usá-lo mais tarde. Vamos falar sobre esses controles aqui. Temos nossos controles de alinhamento. Como você pode ver, eu tenho este retângulo selecionado e se nós alinhá-lo ao centro, este é o centro vertical, e assim ele irá alinhá-lo verticalmente ao centro. Vamos alinhá-lo horizontalmente ao centro também. Podemos alinhá-lo à esquerda, à direita. Podemos criar vários retângulos e distribuí-los uniformemente usando esta ferramenta e, finalmente, temos nossas ferramentas Shape Builder. Você pode usá-los para mesclar formas e excluir em todas essas coisas que você pode estar familiarizado se você usou o Adobe Illustrator. Como eu disse, eu não uso muito essas coisas, mas será útil se você continuar a usar o XD para seus projetos e ficar um pouco mais chique com o que você cria. Por fim, vamos rever todos os modos no XD. Atualmente, estamos no modo de design. Somos capazes de adicionar elementos e projetar nossa página. Você também pode entrar no modo protótipo, que é o que usaremos para animar transições e criar um protótipo pelo qual um usuário pode realmente passar. Se você estivesse trabalhando em um projeto real que você queria compartilhar com alguém com quem você está colaborando, você iria para a guia Compartilhar e criar uma experiência de compartilhamento diferente se você quiser fazer uma revisão de design versus compartilhando com seu desenvolvedor, talvez você queira criar uma apresentação, talvez esteja compartilhando especificamente para testes de usuários ou crie configurações personalizadas. Então, esses são todos os modos no XD que muitas vezes você estará alternando entre a maioria do design e do protótipo, e nós estaremos entrando neles com mais detalhes nas próximas lições. O passo de ação para esta lição é simples. Basta abrir um arquivo no Adobe XD e criar uma prancheta com tamanho móvel. Você verá que há muitas opções. Eu escolhi o iPhone 12, mas você pode escolher o que você gostaria de usar para o seu projeto. Agora que você está um pouco mais familiarizado com o XD, vamos direto para o wireframe. Vejo-te na próxima lição. 8. Criar wireframes: O objetivo do wireframing é trabalhar o posicionamento do conteúdo e resolver problemas de navegação e funcionais em um formato que é realmente facilmente ajustável. Nesta fase, ainda não estamos preocupados com o estilo visual das telas. Como a funcionalidade é o principal objetivo aqui, eu pessoalmente gosto de tomar as interações importantes em meus wireframes e protótipos aqueles. Isso me dá a chance de realmente testar o produto eu mesmo e descobrir quais são os problemas e quais são os pontos de aderência. Esta lição tem duas partes. Primeiro, vamos transformar nossos esboços em wireframes digitais. Em seguida, vamos protótipo-los para ter uma sensação para a experiência no nível do esqueleto e, em seguida, ajustar conforme necessário. O primeiro passo é realmente muito simples. Eu só coloco meus esboços na minha frente e os transfiro para o Adobe XD usando principalmente texto e retângulos. Isto não tem de ser bonito. Espaçamento e alinhamento não precisam ser perfeitos. É apenas para ter uma idéia de onde os elementos irão e como um usuário se moverá através das telas. Muito parecido com esboçar, este é um processo muito iterativo, mas pelo menos para mim a melhor maneira de iterar é realmente interagir com minhas telas. Vamos começar a falar mais sobre o modo protótipo no XD. Nós tocamos no modo protótipo na lição anterior, mas agora eu quero mostrar a vocês como eu realmente protótipo esses wireframes que eu criei. Nós não vamos entrar em nenhuma transição chique ainda, mas eu quero mostrar a vocês como eu teria um usuário, que neste momento será apenas eu mesmo, mover de tela para tela. Olhando para a minha jornada de usuário, a primeira coisa que eu quero fazer é que um usuário salve uma nova receita. Como você pode ver, eu tenho este ícone de mais aqui em cima, e como estamos no modo protótipo, sempre que eu tocar neste ícone de mais, ele vai me dar esta pequena seta. Você pode ver quando eu clicar e arrastar nesta seta, ele me permite enviar essa interação para qualquer um dos outros quadros de arte que eu tenho. Eu tenho estes praticamente em ordem, então eu vou enviá-lo para esta próxima prancheta, que é o add receita pop-up modal, se você quiser. Claramente não foi projetado, mas há um pouco que vai para ele aqui o suficiente para protótipo desta interação. Então, podemos vir aqui e ver que tipo de interações temos. Temos um gatilho de toque, que é o que queremos, porque queremos que o usuário toque nesse ícone. Nós temos transição selecionada, que é o que queremos e em vez de dissolver, eu realmente quero que esta prancheta deslize para cima, então eu vou selecionar isso e aliviar 0,30 segundos. Isso é bom. Novamente, não vamos nos concentrar muito na animação real destes ainda. Então, uma vez que chegamos a este slide de adição de receita, nós realmente só queremos que eles colem seu URL. Depois que eles fizerem isso, essa tela será preenchida com todas essas informações diferentes com base na página da Web que eles colaram. Em um design real, podemos querer animar algo como uma tela de carregamento porque isso não vai carregar imediatamente, mas para este wireframe, vamos apenas mantê-lo muito simples, então eu estou vai fazer a mesma coisa. Colar URL, e queremos que ele vá para esta próxima tela de detalhes. Em vez de deslizar para cima, eu vou fazer dissolver, e nós vamos fazer isso durar, talvez um segundo. Se for um segundo inteiro, isso provavelmente ajudará a parecer que está carregando. Vamos ver o que isso parece daqui a pouco. Vamos fazer mais um pouco. Assim que terminarmos de editar todas essas informações, queremos que o usuário aperte “Salvar” e, quando clicar em “Salvar”, ele poderá escolher em quais categorias deseja que a nova receita entre. Mais uma vez, vamos ter este slide para cima. Acho que isso faz mais sentido, pelo menos por enquanto. Então, o que eles querem fazer é marcar uma dessas caixas. Digamos que eles marcam essa caixa, então queremos que ela vá quase imediatamente para esta tela porque não deve haver nenhum atraso ou transição entre ter a caixa marcada e não marcada. Ele deve verificar imediatamente quando você tocar nele. Vamos Tap, Transition, e em vez de ter uma animação, não faremos nada e isso tornará a transição imediata. Depois, quando clicarem em “Confirmar”, queríamos voltar para a tela de receitas salvas. Isso é aqui atrás. O que vamos fazer é arrastar este fio até aqui, e para isso, eu acho que eu quero que essa transição seja deslizada para baixo porque nós queremos que esse modal para, ele deslize para cima como ele estava entrando e nós queremos que ele deslize de volta para baixo para que ele se sinta consistente . Ok, vamos dar uma olhada em como isso realmente se parece. O que eu quero fazer é selecionar nesta primeira tela e eu vou defini-la como a tela inicial, o que indicará que esta é a primeira prancheta neste fluxo. Então, mesmo que eu não tenha essa prancheta selecionada, quando eu vou jogar o protótipo que começará na primeira prancheta. Certo, vamos dar uma olhada. Temos o protótipo aqui. Primeiro queremos sair uma receita, vamos colar o URL e, em seguida, esta informação será carregada. Uma vez que escolhemos qual imagem em miniatura queremos, e também podemos editar o título, bem como alguns dos ingredientes. Então vamos clicar em “Salvar”. Depois perguntar-nos-á para onde queremos guardá-lo. Vamos guardá-lo para jantares. Ótima. Então isso vai aparecer, o que vai nos perguntar se queremos confirmar. Nós confirmamos e ele vai direto para nossas receitas salvas. Esperemos que você tenha uma melhor compreensão de como o modo protótipo funciona. Vou continuar com isso no caso de você estar curioso como faço o resto do protótipo. A outra interação que temos começando nesta tela inicial ou tela de receita salva é gerar uma lista. Quando geramos uma lista, o que queremos acontecer é que queremos ser capazes de selecionar a partir destas refeições quais queremos gerar a lista. Vamos voltar para cá. Foi aqui que criei a tela que mostra as receitas selecionadas. Vou trazer isto aqui para que seja mais fácil de ver. Como está agora, tudo o que tenho são estas duas telas. Eu tenho uma tela onde nenhuma receita é selecionada e eu tenho uma tela onde quatro receitas são selecionadas. A fim de fazer este protótipo parecer real e realmente ser capaz de testar como isso se sentiria como um usuário, eu vou ter que corrigir isso. O que queremos é que sempre que alguém toca em “Criar lista”, queremos que ele possa selecionar suas receitas. Vamos para a tela, mas precisamos consertar a tela um pouco, então vamos voltar ao modo de design. Neste momento, temos esses quatro retângulos no estado selecionado. O que isso significa é que eles têm uma borda mais grossa ao redor deles. Foi assim que lidei com isso nos wireframes. Quando eu chegar aos meus projetos reais, o estado selecionado versus não selecionado pode ser completamente diferente, mas para a fase de wireframe, isso certamente fará o truque. Vamos colocar tudo isso de volta para uma borda de um pixel, porque é assim que ele vai parecer quando você chegar pela primeira vez na tela de receitas selecionadas. Neste momento, não há receitas selecionadas, então queremos fazer isso também. Este botão “Gerar” provavelmente não deve estar ativo ainda. Vamos dar uma opacidade leve de talvez 40% para mostrar que você não selecionou nada para que você ainda não possa gerar uma lista. Ok, novamente, vamos subir para termos um pouco mais de espaço. Então vamos pegar esta prancheta e duplicá-la ao lado dela. Isto, vamos chamar um selecionado. O que vamos fazer é transformar um desses em um estado selecionado, então vamos dar-lhe uma borda de cinco pixels e vamos para o modo protótipo, e sempre que isso for aproveitado, queremos que ele faça a transição imediatamente para o próximo, então não faremos nenhuma animação porque queremos que seja imediata. De volta ao modo de design, queremos fazer este porque uma receita está agora selecionada e queremos tornar este botão “Gerar” completamente visível porque ele deve ser tocado neste momento, uma vez que há uma receita selecionada. Mas digamos que queremos selecionar duas receitas antes de gerar esta lista. Vamos entrar e fazer esse processo novamente. Dois selecionados. Agora vamos ter o número dois aqui para indicar que há dois selecionados. Digamos que eles estão selecionando este na categoria de almoço. Perfeito. Então vamos voltar para o modo protótipo. Nesta tela, vamos querer que eles cliquem sobre isso, e ele deve fazer a transição imediatamente para essa tela. Então eu vou fazer isso mais duas vezes para que tenhamos quatro receitas selecionadas. Ok, Agora que quatro estão selecionados, queremos que o usuário gere uma lista. Se tocar no botão “Gerar”, então queremos que sua lista de compras deslize para cima no quadro. Vamos fazer deslizar para cima, e uma vez um segundo está bem, por enquanto. Então isso nos levará à lista de compras deles. Quando entrarmos na fase de design real, também abordaremos essas interações menores, como mudar a classificação por refeição versus categoria, e abrir este pequeno botão que mostrará como selecionar e desmarque as receitas que deseja incluir na lista. Mas, por enquanto, acho que esse é praticamente o protótipo. Vamos jogar de novo para que possamos testar esta próxima fase de interações. Eu quero fazer uma lista, então agora ele vai me permitir selecionar receitas. Apenas uma coisa que eu notei, é exatamente por isso que eu testo meu próprio protótipo, é que essa interação foi estranha. Ele deslizou para cima ou para baixo quando eu realmente queria que ele desaparecesse naquela tela, então isso é uma nota mental que eu vou fazer para mudar os tipos de transições. Mas de qualquer forma, queremos selecionar isso. Isso é ótimo. Ele moveu o número de zero para um, e também tornou este botão “Gerar” realmente disponível. Então eu tenho que lembrar exatamente quais eu montei, já que este é apenas um protótipo forçado e isso não é algo onde cada opção é realmente prototipada fora. Mas, de qualquer forma, lembro-me que escolhi este a seguir. Está subindo para dois, o que é perfeito. Depois sobremesas, e depois mais um jantar, e está subindo de 1, 2, 3 e 4, o que é ótimo. Então vamos gerar essa lista. Isto é perfeito. Isso veio com a lista classificada por categoria, então temos produtos, todas essas coisas, alimentos enlatados, todas essas coisas. Como eu disse, vamos entrar em algumas das interações menores mais tarde quando realmente estamos projetando, então coloque seus esboços no XD e coloque-os em um lugar onde você possa interagir facilmente com eles no modo protótipo. Pode não parecer bonito ainda, mas deve ser uma experiência perfeita. Uma vez que você tem isso, faça uma captura de tela de seus wireframes ou ainda melhor, grave um vídeo do seu protótipo e compartilhe conosco abaixo. Nas próximas aulas, vamos chegar à parte realmente divertida, transformando esses wireframes em designs de alta fidelidade usando têxteis, paletas de cores e componentes. Um dos blocos de construção mais poderosos do Adobe XD. 9. Design de UI: Chegamos a mais uma das minhas etapas favoritas no processo, a fase de design. Nessas próximas lições, você realmente verá seu recurso de aplicativo ganhar vida visualmente, então não desista agora. A fim de decidir o que eu quero que este aplicativo se pareça visualmente, eu geralmente gosto de realmente fazer uma prancheta fora para o lado no meu arquivo de design, e começar a reunir algumas imagens de inspiração, cores e fases de texto. Gosto de pensar no espaço em que o produto existe, ou seja, quem vai usá-lo, em que indústria ele existe, e fazer uma pequena pesquisa sobre que tipo de cores e estilos podem se emprestar a esse tipo do espaço. Tenho a sensação de que muitos de vocês já são designers visuais de alguma forma. Não vou gastar muito tempo neste degrau. Mas, basicamente, depois que eu tenho algumas idéias do que eu poderia querer minha paleta de cores para ser como e qual fonte ou ferramenta que eu poderia gostar de usar em todo o aplicativo, eu vou em frente e testá-lo em apenas uma tela. Eu geralmente tenho que fazer um pouco de ajuste, especialmente porque eu quero ter certeza de que o contraste de cor é grande o suficiente para que o texto em qualquer cor que eu estou usando como cores de fundo ou botões vai ser legível. Para fazer isso, eu sempre uso o plug-in Stark, que você pode ver aqui. Como você pode ver, eu brinquei com isso algumas vezes antes de eu realmente levá-lo para um lugar onde eu gostei. Primeiro, eu tive essa variação onde nós temos o ícone mais com um pouco de sombra aqui. Eu simplesmente não estava apaixonada por isso, então nas próximas versões, eu apenas mantive muito simples. Então eu também brinquei com o estilo de botão. Primeiro, eu estava usando esse fundo azul brilhante com um golpe grosso. Eu sabia que queria ficar com este estilo retro geral com as cores brilhantes e as linhas retas realmente grossas, mas também há algumas maneiras de fazer isso. Esta foi a minha primeira variação, e então eu decidi que queria fazer esses cartões de receita parecer um pouco melhor. Veja aqui, eles realmente são apenas planos, e é um pouco difícil para eles se destacarem porque o pequeno texto aqui se mistura muito com o fundo. Aqui, eu agrupei a imagem e a foto com esta forma de fundo, que é branca, e depois adicionei uma sombra no fundo para realmente ajudar a se destacar. O botão aqui parece parecido, mas decidi ir com aquele amarelo. Eu definitivamente gostei mais disso, mas então eu realmente queria experimentar algo diferente com o botão que eu normalmente não faço, e eu dei-lhe esta sombra dura, que eu acho que é realmente único. Decidi ir com isso. Esta última tentativa foi definitivamente a minha favorita. Acabei ajustando minha página de estilos para refletir isso. Então, quando você estiver satisfeito com isso, esse é um ótimo momento para selecionar suas cores e fontes e adicioná-las aos ativos do documento. Estou apenas selecionando estes e clicando no botão Plus, e agora temos todas essas cores ao nosso alcance. Eu vou fazer o mesmo com esses estilos de texto. Estou usando Roc Grotesk, e estou mantendo muito simples. Estou usando isso todo o caminho. Estou me dando duas opções diferentes para títulos usando um que é super negrito, e temos caso título usado neste. Então este, que ainda é ousado, mas um pouco menor, rastreou um pouco mais com algum espaçamento de letras maior, e também temos tudo em maiúsculas. Então é isso que estou usando para todo o corpo do texto. Como você verá quando entrarmos em alguns dos projetos, eu costumo usá-lo em 16 pontos, mas às vezes eu fico um pouco maior ou menor dependendo do que as necessidades são da página. Vamos adicioná-los à seção de ativos do documento também. Eu só vou entrar e dar um rótulo para que seja realmente fácil para mim. Chame aquele corpo de subposição e indo para lá. Agora, enquanto eu passo e desenho o resto do meu aplicativo, eu posso puxar a partir daqui a qualquer momento, e isso apenas torna muito mais rápido. Como você está construindo esta página de teste, pode haver coisas que precisam de um pouco de ajustes que não são necessariamente a ver com seus estilos principais de realmente apenas cores de texto e estilos de botões. Algumas outras coisas podem entrar em cena. Por exemplo, para o meu, este componente aqui ele veio, que definitivamente vai ser algo que eu uso dentro do resto do aplicativo. Quando se trata de projetar esses tipos de coisas, se você não tem toneladas de fundo de design visual, você pode ir e procurar inspiração em outro lugar. Você pode olhar no Behance, ou Pinterest, ou Instagram, ou especialmente pensar nos aplicativos que você usa todos os dias e obter alguma inspiração daqueles sobre como estilizar diferentes elementos como este. Também poderá ter de adicionar ícones às suas telas. Se você não quer projetar todos aqueles você mesmo, ou se você só quer economizar um pouco de tempo, então eu recomendo baixar o plugin chamado Icons 4 Design. Isto é o que eu uso o tempo todo, e tem toneladas de ícones comuns. Eu usei o ícone mais aqui, e claro, eu poderia ter feito isso sozinho. Provavelmente não levaria tanto tempo, mas ter essas opções para mostrar que tipos de ícones estilos você poderia usar é um recurso realmente ótimo para ter. Novamente, o estilo de um aplicativo vem com prática. Não se culpe se não parecer perfeitamente como você quer no início. Podes continuar a melhorá-lo à medida que avançares. Quando estiver satisfeito com a aparência desta tela de teste, faça uma captura de tela ou exporte-a como PNG e compartilhe conosco na seção Comunidade de classes. Em seguida, aprenderemos sobre o poder dos componentes e a animação automática no Adobe XD. Vá em frente e passe por este processo de estilos de design para o seu próprio projeto, e eu vou vê-lo na próxima lição. 10. Componentes e muito mais: Nesta lição, quero apresentá-lo aos componentes porque esta é uma ferramenta que realmente vai economizar algum tempo quando você está projetando o resto das telas em seu aplicativo. Criar componentes no Adobe XD é uma ótima maneira de agrupar elementos e criar diferentes estados ou variações de um elemento. Você também pode configurar transições entre vários estados de um único componente. Sem usar toneladas de quadros de arte, você pode criar coisas como micro animações. Se isso parecer confuso, acho que ver isso vai ajudar muito. Deixem-me mostrar-vos alguns exemplos. Na última lição, você viu que eu coloquei a tela apenas copiando colando e alternando alguns textos e imagens dentro desses elementos, mas há uma maneira mais fácil de fazer isso, que estou prestes a mostrar agora usando componentes. Queremos criar um componente a partir disso porque então podemos reutilizar isso. Mais tarde no aplicativo, vamos querer vários estados deste componente de cartão de receita. Vamos querer um selecionado em um estado desmarcado. Este é obviamente o estado padrão que está desmarcado, mas mais tarde, sempre que queremos que os usuários sejam capazes de selecionar quais receitas eles querem usar para gerar uma lista de compras vamos precisar desse estado selecionado. Este é um candidato perfeito para criar um componente fora de. Vou fazer do zero só para você ver o que quero dizer. Tudo bem, vamos configurar nossa tela com tudo menos os cartões de receita, e vamos recriar isso usando componentes em vez disso. Eu vou criar isso do zero para que você possa ver exatamente como eu fiz isso. Primeiro, vamos começar com este retângulo de fundo. O que temos é um retângulo branco. Vou apenas clicar na tecla R como atalho para um retângulo. Vamos tirar isso. Isso parece bom. Claro, que você pode obter realmente específico com o tamanho dependendo de quanto espaço você quer entre os elementos e esse tipo de coisa. Não queremos uma fronteira nisto, por isso vou desligar a fronteira. Então queremos espaço para uma foto e um texto. O que eu vou fazer é fazer uma máscara na qual possamos desenhar nossa foto. Podemos criar uma máscara usando um retângulo. Vou apertar R novamente e criar um retângulo aqui. Novamente, eu vou desligar a borda, e vamos fazer este retângulo cinza para que possamos realmente vê-lo. Muito bem, então é aqui que a nossa imagem vai chegar. Então, novamente, queremos algumas cópias. Vou escrever macarrão de camarão. Vamos voltar para o painel de ativos porque queremos usar a cópia do corpo para isso. Perfeito. Incrível. Agora o que eu quero fazer é ter certeza que isso está alinhado à esquerda. Isso é ótimo. Vou sempre querer que comece, digamos oito pixels do lado. Em vez de ser este tipo de texto onde é basicamente largura ilimitada, se eu continuasse digitando, ele vai ficar completamente fora disso. Não é isso que queremos. Em vez disso, queremos que isso seja de largura fixa. Vou fixar a largura para este tamanho. Queremos que seja oito pixels da extremidade direita também, perfeito. Então parece que a altura da linha e aqui é muito grande, então eu vou fazer este 18 em vez disso. Incrível. Agora podemos estender isso para ter certeza de que ele se alinha perfeitamente lá. Agora vamos criar algum preenchimento para que não importa quanto tempo o título da receita seja, este componente será flexível para isso. Para nos dar preenchimento, temos que agrupar esses elementos. Eu vou fazer o comando G para o grupo, e vamos enviá-lo para trás para que ainda possamos ver nossa máscara em cima. Então vamos selecionar este grupo e ver quais são as nossas opções. Vamos verificar o preenchimento aqui. Como você pode ver, temos 91 pixels de preenchimento no topo, o que é ótimo porque nos dá espaço para nossa imagem. Temos oito pixels à esquerda e à direita e seis na parte inferior. Acho que isso é visualmente centrado, então é perfeito. Agora podemos realmente transformar isso em um componente. Vamos selecionar este grupo e a máscara no topo e pressione o comando K para componente. Agora que este é um componente, podemos ir até a seção de componentes e podemos realmente arrastá-lo para fora para criar outra instância desse componente. Também podemos simplesmente copiar e colar ou clicar e arrastar e segurar Option Shift para criar mais destes. Agora, as coisas incríveis desde que adicionamos esse preenchimento e este é um componente, mesmo se formos para apenas outra instância do componente, podemos realmente mudar o título. Talvez seja apenas Camarão Pasta e agora, como você pode ver, todo o componente é realmente flexível para isso. Talvez este tenha um título muito longo. Vegano e sem glúten, chili com feijão preto. Lá vamos nós. Você pode fazer o tempo que quiser. Essa é a coisa incrível sobre os componentes. Eu só tive que fazer isso uma vez e agora vai ser flexível para todas as diferentes instâncias que precisamos criar. O que é incrível é que agora podemos jogar as imagens que queremos. Você verá que quando eu lançar uma imagem para este primeiro componente, já que esse é o componente principal, ele vai levar esse estilo para o resto deles, mas tudo bem, porque podemos facilmente substituir isso. Vamos pegar este e deixar bem ali. Como você pode ver eu estou apenas largando na parte destacada sempre que eu venho aqui e essa é a máscara. Lá vamos nós. Isso é muito mais fácil do que o que fizemos aqui, onde tivemos que copiar e colar e constantemente redimensionar essa forma de fundo. Agora, criamos componentes que são flexíveis. Agora que estou percebendo, ainda não adicionamos a sombra. Isso é ótimo. Podemos voltar ao componente principal. Se você esquecer qual é o componente principal, se você notar que este diamante não está preenchido em verde, este diamante é preenchido em verde. É assim que você sabe, este é o componente principal. O que você também pode fazer, como, digamos que você tem este componente principal em uma tela que é como o caminho do outro lado da sua janela e você realmente não se lembra onde ele está, o que você pode fazer é tocar em qualquer uma das instâncias, clique pressionando a tecla Control e Editar componente principal. Isso o levará direto para o componente principal. O que queremos fazer é dar uma sombra a isto. Vamos selecionar nesta forma de fundo. Vamos descer e dar uma sombra a ela. Para as minhas sombras, gosto de mantê-las sutis. Vamos fazer oito por cento de opacidade com uma sombra negra. Vamos fazer 20 borrões. Isso geralmente parece legal. Perfeito. Agora, como você pode ver, que é realmente sutil, mas isso aplicou-o ao resto das instâncias. Nós temos este componente, mas como você pode ver, eles estão saindo da tela. Se queremos que isso seja horizontalmente rolável, temos que dizer ao XD para fazer isso. O que vou fazer é fazer mais alguns destes. Vamos agrupá-los juntos. Então, uma vez que eles são agrupados, você pode ver que temos essas opções aqui, e esta é a opção Grupos de rolagem. Este ícone é um ícone de grupo de rolagem horizontal. Nós vamos acertar isso e como você pode ver, é automaticamente definir o parâmetro como a largura total da tela, o que é perfeito. Se entrarmos no modo de visualização, e tudo o que estou fazendo é rolar horizontalmente, e agora temos um grupo de rolagem horizontal. A última coisa que precisamos fazer com este componente é criar alguns estados diferentes. Como eu disse, queremos um estado selecionado e um estado desselecionado. Este estado padrão é o estado desselecionado e se você realmente tocar neste componente principal, porque nós o agrupamos algumas vezes, então você provavelmente terá que continuar clicando em. Então você pode ver que há apenas um estado e é o estado padrão. Mas vamos adicionar outro e chamaremos isso de “Selecionado”. Agora, o que eu quero que o estado selecionado pareça é que eu realmente quero que essa forma de fundo tenha uma borda. Agora podemos ver se ampliamos, já que esta forma está no fundo da imagem, a borda está sendo cortada. Então, a fim de corrigir isso, em vez de ter uma borda que é um traço interno, vamos dar-lhe um traço externo. Dessa forma, ele continuará a sair dos limites deste retângulo. Para torná-lo realmente visível, vamos torná-lo três pixels, e vamos dar-lhe uma cor que está em uma de nossas paletas. Ótima. Então, aqui está o estado selecionado. Era tão simples assim. Desde que sejamos selecionados em qualquer estado que queremos editar, podemos editar isso e, em seguida, sempre voltar para o estado padrão. No estado padrão, vamos configurar uma interação onde sempre que este componente for tocado, ele deve fazer a transição para o estado selecionado. Se fizermos isso neste componente principal, ele será aplicado ao resto dos componentes também. Mais uma vez, poupando tanto tempo lá. Estamos neste componente atual e vamos para o modo Protótipo. Se apenas tocar neste fio em vez de arrastá-lo, basta tocar nele, então podemos ter a opção de escolher um destino que é apenas outro estado. Nós vamos escolher o estado selecionado e o que queremos que ele faça, nós realmente não precisamos dele para animar. Nós só queremos que a transição sem animação porque queremos que seja imediata. Vamos passar para o estado selecionado e apenas fazer a mesma coisa para que um usuário possa desmarcá-lo facilmente se cometeu um erro. Mais uma vez, vamos apenas tocar nisso. Vamos escolher “Estado Padrão”, e ele vai se lembrar de todas as configurações que queríamos. Agora, podemos visualizar isso. Voltamos ao modo Design, apertamos a pré-visualização. Se nós apenas tocar nisso, como você pode ver, cada vez que eu estou tocando, ele está sendo selecionado e desselecionado. Essa é uma razão pela qual você faria um componente se você quiser que ele tenha vários estados e você quer ser capaz de fazer a transição entre eles. Mas outra razão para criar um componente seria apenas para que você tenha uma fonte de verdade para um determinado elemento. Vamos pegar um botão, por exemplo. Eu tenho este botão e vamos dizer que eu não torná-lo um componente e eu apenas copiá-lo e colá-lo em um monte de pranchetas diferentes, e então mais tarde eu decidir que eu quero fazer uma alteração. Talvez eu queira que esta cor seja este rosa em vez disso, então eu teria que passar por selecionar todos os botões e fazer essa mudança. Mas se eu fizer isso um componente simplesmente certificando-se de que ele está agrupado e, em seguida, pressionando o comando K, então, se eu tiver esse componente aparecer várias vezes, então tudo o que eu tenho que fazer é mudar o um. Eu só vou entrar aqui e fazer essa cor, então todos mudam. Mas isso não significa que você não precisa ter apenas um estilo de botão. Se você alterá-lo em apenas uma instância, então, como você pode ver, ele só se aplica a essa instância. É uma ferramenta realmente flexível para usar enquanto você está projetando toda a sua interface. Para o meu botão, em particular, eu realmente quero que ele tenha um par de estados diferentes. Eu queria ter esse estado padrão, mas eu também queria ter um estado inativo. Eu quero que ele esteja lá, mas eu queria ter uma opacidade muito menor para que fique claro que o usuário precisa tomar uma ação adicional antes que esse botão se torne ativo. Tudo o que vou fazer é selecionar este componente principal. Eu sei que é o principal porque este diamante verde está preenchido no canto, e eu vou para “New State”, e nós vamos fazer Inactive. Na verdade, vou clicar neste componente para que eu seja selecionado em todo o grupo. Vou fazer com que a opacidade seja 50 por cento. Agora você pode ver que esse é o estado inativo, nós temos o estado padrão, e podemos nos mover entre eles. Se você vier aqui também, você pode ver que isso funcionará em qualquer instância do componente. Em seguida, vamos falar sobre auto-animar. Você pode usar a animação automática para fazer a transição entre duas telas diferentes ou dois estados diferentes de um único componente. Deixe-me mostrar-lhe um exemplo disso apenas no caso de você querer experimentar com ele no design do seu aplicativo. Você já viu esta tela antes e esta é a tela de receita salva que realmente estávamos falando. Agora o que eu estou fazendo é criar um modal que eu quero flutuar até o quadro sempre que você apertar o botão de adição, a fim de adicionar uma nova receita. Eu criei este modal e eu agrupei tudo como você pode ver. Esta prancheta é apenas uma cópia da prancheta anterior com este modal na parte superior. O que eu quero fazer para animar entre essas duas telas é realmente ter este elemento em ambas as telas. Você pode ver que eu realmente tenho isso. Aqui em baixo está este elemento, mas olha, é todo o caminho para baixo, e a opacidade está em zero. Como ele é chamado o mesmo, Grupo 64, Grupo 64, e é em ambas as pranchetas, auto-animar no XD vai realmente ser capaz de animar a diferença entre os dois posicionamentos e tipo de como eles aparecer. Nesta prancheta, ela está completamente em zero por cento de opacidade e está na parte inferior. Nesta prancheta, ela está em 100% de opacidade e está cobrindo quase toda a tela. Se eu ligar isso, eu posso clicar duas vezes até eu entrar neste ícone de mais. Eu posso arrastar este fio sobre e se selecionarmos “Animar automaticamente”, e nós vamos fazer, talvez fazer facilidade dentro e fora e vamos torná-lo muito rápido, 0.3 segundos, então ver se você pode ver como isso acontece. Clique no ícone de adição e ele flutua no quadro. Era exatamente o que queríamos que parecesse. Ele realmente só torna a animação muito mais fácil, porque tudo que você precisa fazer é ter um elemento aparecendo em duas telas diferentes e tê-lo nomeado o mesmo no painel de camadas, e ele irá animar automaticamente a diferença. Agora que você entende esses dois recursos críticos no XD, você pode ir em frente e terminar seu próprio protótipo. Lembretes rápidos antes que eu termine esta lição. Crie um componente sempre que você tiver um elemento que aparecerá de uma forma ou de outra em vários lugares para economizar tempo e confusão. Ao projetar, continue pulando no modo Protótipo para protótipo seus projetos e reproduza-os para testá-los e ver onde você precisa fazer ajustes. Se você quiser praticar um projeto de UX real, você pode até fazer com que outros testem seus protótipos. Funciona melhor se você realmente tem alguém em casa que você pode obter o protótipo na frente, dessa forma você pode realmente observá-los e ver onde eles tropeçam. Se você quiser ver ainda mais demos e nos bastidores de como eu projetei meu recurso de aplicativo, então você pode conferir o próximo vídeo, que é realmente um vídeo bônus. Vou orientá-los por ainda mais desses elementos de design e interações que criei, e também mostrarei um lapso de tempo do meu processo de três horas projetando isso. Se você já estiver realmente confiante no Adobe XD, à vontade para ignorar isso completamente ou apenas assistir o quanto quiser. 11. BÔNUS! Mais designs e timelapse: Como eu mencionei neste vídeo bônus, eu vou estar mostrando todo o meu recurso aplicativo do início ao fim, algumas mais pequenas interações, e elementos de design que eu criei. Então, no final, você será capaz de ver um lapso de tempo de todo o processo que levou cerca de três horas no total. Vamos entrar e não se esqueça, se você já está familiarizado com o XD ou está ansioso para chegar à próxima etapa de criação do seu vídeo final. Sinta-se livre para pular para a próxima lição. Para criar isso, eu tenho 19 telas, mas realmente apenas quatro designs de tela diferentes. Temos esta tela “Receitas Salvas”, que você já viu várias vezes. Temos isso, adicionar receita, tela, onde temos diferentes variações dele; onde ele não é preenchido, e onde ele é completamente preenchido. Temos essa tela “Salvar em” como qual categoria, e então, exatamente a mesma coisa, temos essa tela “Receitas Salvas”, mas é um pouco diferente sempre que o usuário selecionar receitas para gerar um lista de compras, e então, por último, temos a página de lista de compras real. Você pode ver que fomos capazes de criar toda essa animação apenas copiando e colando, e ajustando algumas coisas ao redor e animando entre elas. Deixe-me mostrar-lhe exatamente como fiz isso. Já vimos essa interação. Temos o botão “+” tocado e, em seguida, este novo cartão de receita, ele aparece. O que eu queria acontecer em seguida foi, e nós queríamos que o usuário tivesse a capacidade de colar uma URL de sua área de transferência. Então, talvez eles estejam olhando para o Instagram ou Pinterest, ou em um de seus blogs de comida favoritos, e eles querem importar uma receita de lá. Eles apenas pressionam para copiar o link, voltar para este aplicativo, em seguida, ele irá pedir-lhes para colar qualquer URL que eles têm em sua área de transferência. Depois de fazerem isso, eu queria que ficasse claro que a receita estava carregando. Você nunca quer ter um usuário apenas ser deixado pendurado. Você quer mostrar a eles que, o que você fez funcionou, a ação que você tomou foi bem-sucedida, mas estamos apenas carregando os dados. Isso é o que eu queria aqui. Então, uma vez que temos que o usuário toque neste elemento, colar da área de transferência, o que eu queria era realmente ter a próxima tela ser esta tela de carregamento. Eu queria que a transição para a direita para aquela tela com um dissolver, e então o que eu fiz foi adicionado um gatilho de tempo. Então, em vez de ter que tocar em qualquer coisa nesta tela, tudo o que acontece é que esta barra, ao longo do tempo, vai se mover todo o caminho para cima para encher a barra de carregamento. Eu defini essa duração para acontecer ao longo de dois segundos completos. Vamos ver como isso se parece. Temos esta tela “Adicionar Receita”. Tocamos nisso para colar a partir do URL e, em seguida, ele o carrega. Então, assim que esses dois segundos acabarem, temos outro gatilho de tempo que nos leva a esta tela, onde temos toda essa informação realmente carregando. Se eu clicar aqui, este grupo, grupo 87 é onde eu tenho o botão e todos esses ingredientes, e todas essas coisas. Isso vai desaparecer de baixo. Se você se lembra, de um dos vídeos anteriores, você pode ver como eu fiz isso aqui. Se clicarmos aqui, é o mesmo grupo, grupo 87 e a opacidade está toda abaixo, mas se aumentarmos, veríamos que é tudo da mesma informação. Isso permite que o auto animate faça sua coisa porque, uma vez que tenhamos ligado, que, em seguida, ele irá apenas animar a diferença, a diferença entre zero por cento de opacidade para 100, a diferença entre este posicionamento no fundo e a colocação na parte superior. Foi assim que criei essa transição. Então o que eu queria era que o usuário fosse capaz de salvar isso. Então, se clicarmos neste botão “Salvar”, podemos ver que isso irá simplesmente recolher este novo cartão de receita porque queremos que ele pareça o mesmo processo, mas a última etapa do processo, então estamos mantendo o exatamente o mesmo, é o mesmo modelo, mas apenas um pouco menor para que você possa ver que é o último passo. Para fazer isso, nós apenas tivemos que ter certeza de que este elemento, este retângulo com os cantos arredondados no topo, é nomeado o mesmo em ambas as pranchetas. É chamado retângulo 789, e aqui, se nós comandarmos clique para tocar, todo o caminho para a camada inferior, ele é nomeado a mesma coisa. Se você é mais organizado do que eu, você poderia nomear todas as suas camadas algo que realmente faz sentido. Mas para mim, quando eu estou projetando, ele tende a ser rápido, e eu só vou voltar e fazer isso se eu tiver uma interação realmente confusa acontecendo. Então o que queremos é que esta informação desapareça da tela, e esta informação se desvaneça. Podemos ver que isso acontece muito facilmente sempre que temos essa animação acontecer. Então o que queremos é lidar com essa situação de caixa de seleção. Como você pode ver, eu realmente fiz esta caixa de seleção um componente. Então, se eu continuar batendo duas vezes até chegarmos aqui, nós temos este componente. Temos um estado padrão, que está desmarcado, e temos um estado verificado. Basicamente, o que você poderia fazer se você quisesse, foi configurar uma interação no componente principal para ser capaz de tocar, desativar e ativar o estado verificado. No entanto, eu também queria que esse botão “Confirmar” mudasse de estado também. Acabei usando duas pranchetas diferentes para essa interação por esse motivo. O que acontece aqui é, assim que essa caixa de seleção for tocada, ela simplesmente fará a transição para a próxima prancheta onde temos isso marcado, e também temos o botão “Confirmar” com 100% de opacidade. Vamos verificar sobre isso, nós batemos em jantares e é tão simples quanto isso. Em seguida, a partir daqui, queremos que o usuário clique em “Confirmar”, e então isso simplesmente vai sair do quadro, e queremos ser capazes de ver a nova receita entrar no quadro. Nós não queremos apenas que ele apareça automaticamente porque queremos dar o feedback e chamar a atenção para o fato de que, “Sim. Esta receita foi adicionada ao início da categoria de jantares.” Primeiro, deixa-me mostrar-te o que quero dizer. Apertamos “Confirmar”. Você viu isso? Isso é exatamente o que eu queria que acontecesse e eu vou te mostrar como eu fiz isso. É muito simples fazer este modal desaparecer. É exatamente o mesmo processo que temos feito. Nesta prancheta, temos o modal totalmente in-frame. Chama-se grupo 92 nesta prancheta. Se passarmos o mouse para baixo aqui, temos a mesma prancheta chamada a mesma coisa, grupo 92, mas a opacidade é todo o caminho para baixo e é também na parte inferior. A mesma coisa repetidamente com este modal entrando e saindo. Mas, a parte mais divertida aqui é essa interação. Se entrarmos aqui para o estado em que queremos acabar, então podemos ver que temos essas quatro receitas, eu vou pegar todo esse grupo de rolagem, copiar e colar aqui. Então tudo o que vou fazer é pegar esses elementos, selecionar cada um deles, e arrastá-los para que tenhamos a massa de camarão como a primeira. Então, como você pode ver como nós tivemos isso antes, eu tenho este novo que é apenas um pouco no quadro, nós vamos virar a opacidade todo o caminho para baixo, e como nós copiamos e colamos os grupos de rolagem vão ter o mesmo nome em ambos, o que é perfeito. Se entrarmos no modo protótipo, agora podemos ver que eu configurou um gatilho de tempo, depois de apenas 0,3 segundos, ele será auto-animado sobre esta próxima prancheta e eu realmente usei flexibilização neste, e eu usei snap, o que o torna muito rápido. Eu realmente gosto de como essa interação parece. Vamos pré-visualizar. Vamos pré-visualizar daqui porque é muito rápido, nós apertamos confirmar, e lá vai você. É assim que se faz esse tipo de interação. A seguir, estamos a chegar às coisas boas. Agora, nós temos essa tela de receitas salvas, mas a próxima coisa que queremos que as pessoas sejam capazes fazer é realmente fazer sua lista de compras. Nós temos esse botão lá embaixo, quando isso é pressionado, o que queremos que as pessoas sejam capazes de fazer, é selecionar as receitas que eles querem incluir em sua lista de compras. fim de dar feedback de que as seleções estão trabalhando para manter o controle de quantas receitas eles selecionaram, eu também quero ter um contador no canto superior direito. Como você pode ver, temos 0,1,2,3, e 4, com cada prancheta, uma nova receita é selecionada. Por essa razão, nós realmente não acabamos aproveitando tanto os componentes neste cenário. Porque o que poderíamos ter feito é simplesmente ter aquela interação onde qualquer um deles é tocado, ele muda para o estado selecionado e isso teria funcionado muito bem. Mas então, ainda precisamos de uma nova prancheta, a fim de ter este contador intensificando. Essa foi a maneira mais fácil de fazer isso. Tudo o que eu realmente fiz foi começar com zero receitas selecionadas, e como você pode ver, para isso, eu tinha este botão gerar lista no estado inativo. Eu simplesmente movo a opacidade para 50 porque se o usuário não selecionou nenhuma receita, eles não devem ser capazes de gerar a lista ainda. A lista não teria nada nela. Isso só dá mais feedback que eles têm selecionar uma receita para poder seguir este processo. Para o bem desta maquete, vamos fingir que esta pessoa vai tocar na sopa de tomate cremosa como a primeira delas. Vamos configurar a interação para que quando isso é tocado, ele irá automaticamente nos levar direto para a próxima prancheta, e nessa próxima prancheta terá o contador mover até um e o botão gerar lista todo o caminho para cima em opacidade. É tudo o que fazemos aqui quatro vezes diferentes. Estamos movendo o estado de não selecionado para selecioná-lo, estamos movendo o contador para cima 1,2,3 e 4. Finalmente, quando eles tiverem todos os quatro selecionados, eles vão decidir gerar a lista. Se nós vemos no modo protótipo o que isso vai fazer, é basicamente vai animar automaticamente nesta lista e como isso parece provavelmente familiar para você, este é um modal e então eu usei o mesmo processo exato. Nós temos tudo isso agrupados, grupo 113 e se você olhar para baixo aqui na prancheta anterior, é chamado 113, a opacidade é todo o caminho para baixo, o que vai nos permitir gerar a lista e vai deslizar para cima como Isso. Vamos passar por isso mais uma vez para que você possa ver como isso funciona. Alguém decide que deseja fazer uma lista de compras, isso muda para selecionar receitas para dizer ao usuário o que fazer. Eles são capazes de selecioná-los um por um. Também estamos demonstrando o grupo de pergaminho aqui, o que parece muito legal. Sopa de curry, vamos fazer salada carregada e biscoitos de chocolate e você pode ver que o balcão subiu até quatro. Vamos gerar a lista e agora você pode ver que a lista gerada pode ser classificada por categoria ou receita. Isso é algo que eu não protótipo porque não era super importante para o meu último recurso. Mas eu queria mostrar essas categorias desmontáveis. Uma vez que é classificado por categoria, eu queria que você fosse capaz de, pelo menos para uma das seções que eu escolhi, produzir, abrir e fechar isso. Nós temos essa interação, que agora eu vou mostrar a vocês como fazer isso. É mais fácil projetar os resultados do que a primeira prancheta se isso faz sentido. Este é o resultado final. Isto é o que eu desenhei primeiro, fiz toda esta lista, agrupei tudo para facilitar as coisas. É chamado de grupo 109, e se você vir aqui, você também pode ver que o grupo 109 está aqui mesmo grupo 109. Se aumentarmos isso, o vocês verão é que eu simplesmente peguei cada um desses elementos e os empilhei um em cima do outro para derrubá-los porque é exatamente isso que isso é. Eles estão recolhendo esta lista para expandi-la ou recolhê-la. O que podemos fazer agora é entrar no modo protótipo e se tivermos esse produto tocado, então o que queremos que ele faça é animar para este e se ele for tocado novamente, então você quer que ele colapse novamente, ele vai voltar para esta tela . Isso é muito fácil. Isso é o que fizemos aqui, produzir. Você pode apenas trazê-lo para cima e para baixo. Como você pode ver, eu também tive que tomar esta seção de cozimento e movê-lo para o fundo nesta prancheta para que ele seria scooched fora do caminho para que você possa ver toda a lista. Eu queria que os usuários pudessem abrir e fechar esta lista de receitas. É apenas uma lista de todas as receitas que estão incluídas, então, se você quiser desmarcar qualquer uma delas, você pode. Acabei de criar este componente onde um dos estados é recolhido e o estado padrão é com todos estes fora assim. Fiz o mesmo processo com o estado em colapso. Você provavelmente pode ver se nós entrarmos aqui, nós temos todos esses grupos que estão atualmente em zero por cento de opacidade, mas se eu aumentá-los, você pode ver que todos eles estão apenas escondidos atrás lá e eles estão empilhados em cima um do outro. Foi assim que eu fiz isso. O que eu queria era, mesmo que você estivesse nesta página onde todos eles estão fora, se você tocar nisso, eu também queria que eles desmoronassem, porque eu queria que houvesse espaço para você ver essas receitas. Então veja isso. Lá vai você. A fim de fazer isso, eu criei esta terceira prancheta onde nós realmente temos todos estes fora e expandido. É praticamente uma cópia disto, mas com todos estes expandidos, de modo que, se você estiver nesta prancheta e você tocar nisso, ele irá levá-lo a esta prancheta. Mas se você estiver nesta prancheta e tocar nela, ela ainda o levará a essa prancheta. Então, não importa o que, se você tocar nisso para expandi-lo, não só ele se expandirá em si, mas também irá recolher todas essas listas. A última interação que eu queria mostrar foi salvar sua lista. Digamos que um usuário tem sua lista, mas ele não está indo fazer compras direito ou eles só querem salvá-la para mais tarde, eles são capazes de salvar a lista e realmente ser capaz de acessá-la a partir de sua tela inicial. Se passarmos para a nova tela inicial, uma vez que uma lista foi salva, você pode ver que temos este elemento adicionado. Eu apenas projetei um pequeno ícone de lista rápida e dei-lhe um pequeno crachá com o número 1 para que você saiba quantas listas você salvou. Para ter essa animação, vou mostrar exatamente o que fiz. Digamos que estamos começando aqui, você toca em “Salvar lista”. Você pode ver que é a mesma interação que tivemos aqui quando tivemos a sopa de tomate entrar na categoria de jantares. Vou te mostrar isso de novo, mas é praticamente a mesma coisa. O que fazemos é, nós temos este protótipo de modo que se você clicar em Salvar Lista, então você vai vir aqui, e primeiro você vai pousar apenas nesta tela inicial normal sem a lista. Como você pode ver, se eu passar o mouse sobre, eu realmente tenho este ícone de lista todo o caminho para a esquerda com a opacidade todo o caminho para baixo. É como sempre tão ligeiramente na prancheta. Então eu configurou um gatilho de tempo onde ele vai parar naquela tela, mas depois de meio segundo, ele será auto-animado para esta tela onde está realmente no lugar e a flexibilização será um piscar de olhos, e ele vai apenas levar 0,2 segundos, então será muito rápido assim como a interação anterior. Essa é apenas outra maneira de chamar a atenção para algo que entra na tela. Você poderia facilmente animá-lo para que você toque em “Salvar” e você é trazido para esta tela. Mas adicionar essa interação de entrar na tela realmente leva o ponto inicial para o usuário que, sim, eles salvaram e o aplicativo está mostrando a eles, sim, ele foi salvo com sucesso e agora vive bem aqui. Acho que essa é uma interação muito importante. Vamos verificar a coisa toda e então eu vou te mostrar todo o lapso de tempo de eu criar isso se você está curioso sobre como isso se parecia. 12. Crie seu vídeo: Pessoal, vocês chegaram ao último passo. Aqui vamos colocar um arco em seu recurso exclusivo do aplicativo para que você possa compartilhá-lo em seu portfólio, Behance ou mídias sociais. Tentei tornar esta última lição muito simples para você. Eu montei uma pequena pasta de recursos que eu vou te guiar agora. Dentro desta pasta, temos duas coisas. Nós temos algumas imagens de fundo, e eu acabei de baixá-las do Unsplash, então é completamente livre e livre de royalties. Você pode baixar alguns dos seus a partir daí, se você quiser, ou você pode criar o seu próprio. Então a próxima coisa que eu tenho são essas molduras de iPhone. Acabei de criar um em preto e é como um tipo de argila 3D de sobreposição. Nós também temos um mais plano em preto e um mais plano em branco. Mais uma vez, você pode baixar estes de vários lugares gratuitamente, então sinta-se livre para encontrar o seu próprio. Mas eu só pensei que seria útil incluir isso lá. O que vamos fazer é sobrepor esse quadro do iPhone por cima do seu protótipo de vídeo para que ele adicione um pouco de contexto e pareça realmente realista. Agora é hora de gravar seu protótipo no XD. Isto é muito fácil. Tudo o que você vai fazer é selecionar no primeiro quadro de arte do seu protótipo e tocar no ícone “Play” e então você verá aqui em cima, você pode começar a gravar. Vá em frente, aperte “Record”. Eu sempre gosto de ter certeza de que eu vê-lo começar a contar por alguns segundos para me dar algum espaço de manobra e então eu vou começar a interagir com ele. Eu só vou passar por esse processo aqui. Eu gosto de ir devagar o suficiente para que você possa ver exatamente o que estou fazendo, mas não tão lento que fique chato. Leva o teu tempo. Não se apresse por isso. Certifica-te de que consegues ver tudo o que estás a fazer. Certifique-se de interagir com tudo o que você queria mostrar. Incrível. Assim que terminar, vá em frente e pare de gravar. Então você só vai dar um nome exclusivo e salvá-lo em sua área de trabalho. Vou chamá-lo de protótipo de aplicativo. Ótima. Agora o que podemos fazer é clicar duas vezes para abrir isso no QuickTime e cortá-lo. Como eu disse, gosto de deixar um pouco de espaço no início e no fim, então é hora de apará-lo, ter certeza que é bom e apertado. Para fazer isso, certifique-se de que você está no QuickTime e basta usar os controles Command T. Vamos ver onde isso realmente começa. É aí que entra o meu cursor. Vou parar com isso um pouco antes disso. Então eu vou trazê-lo para o início e jogar através tudo isso e pará-lo sempre que eu achar que é uma boa hora. Perfeito, bem ali, aparar. Também uma dica quando se trata de realmente gravar seu protótipo, você pode ter que fazê-lo um par de vezes para ficar realmente suave nele e praticar todas as interações, isso é totalmente bom. Certifique-se de obter um bom antes de seguir em frente. Eu vou salvar isso, e eu vou apenas salvá-lo sobre essa versão. Incrível. Agora temos este protótipo de aplicativo, e eu vou jogar isso diretamente na minha pasta de ativos de vídeo, junto com os fundos e os quadros do iPhone que temos. Primeiro vou mostrar como fazer isso no Premiere Pro. Assim que criarmos um novo projeto, teremos este compartimento do projeto aqui embaixo. Eu só vou importar tudo o que eu vou precisar e então nós vamos colocar na linha do tempo. Primeiro, é claro que vou arrastar meu protótipo de vídeo que acabamos de cortar. Então eu vou encontrar um fundo que eu goste. Eu vou fazer este. Então eu vou encontrar uma moldura para iPhone. Eu vou fazer isso mais 3D olhando um. Incrível. Como eu disse, podemos colocá-los na linha do tempo. Primeiro, eu vou arrastar este vídeo protótipo principal para dentro e, como você pode ver, o projeto assumiu as mesmas dimensões que este primeiro vídeo que nós lançamos. O que vamos fazer é ir até as configurações de sequência. Na verdade, vamos mudar isto para 1920 por 1080. Então vamos precisar fazer as faixas de vídeo menores. Podemos ir para a escala sob os controles de efeito e apenas derrubá-lo. Talvez precisemos ajustar isso mais tarde dependendo do tamanho do quadro que trouxermos. Mas isso é bom por enquanto e como eu disse, nós vamos apenas colocar essas camadas. Claro que queremos a textura na parte inferior, depois queremos o protótipo, e em cima disso, queremos a moldura do iPhone. Parece muito bom, mas precisamos diminuir o tamanho do vídeo um pouco mais para que ele se encaixe perfeitamente neste quadro. Então eu estou realmente indo para mover a posição em torno apenas um pouco para que ele está perfeitamente centrado lá. Isso parece bom. Mas eu quero mover o fundo um pouco. Quero que este vinco fique para o lado. Acho que isso parece bom. Uma vez que você está feliz com ele, então você pode ir para exportá-lo. Tudo o que você vai fazer é ir para arquivo, exportação, mídia. O atalho é Command M e, em seguida, onde quer que ele diga nome de saída, você pode escolher o que você deseja nomeá-lo e onde você deseja salvá-lo. Apenas faça isso. Você pode ver aqui todas as configurações parecem boas, 1920 por 1080. Você pode desmarcar o áudio se quiser, só porque não há áudio. Em seguida, você pode clicar em “Exportar”. Agora vou mostrar a vocês como fazer isso no iMovie, e é realmente semelhante. Mas, infelizmente, no iMovie, não é possível colocar mais de duas faixas de vídeo em camadas. Vamos apenas para a camada dois, exportá-la e, em seguida, trazê-la de volta e colocar a terceira camada no topo. Vou mostrar exatamente como isso é, caso você não tenha acesso ao Premiere Pro. Primeiro eu vou cair em nosso fundo, já que é isso que queremos no fundo e então eu vou cair em nosso protótipo. Vamos jogar o protótipo em cima assim. Então vamos esticar isso até chegar ao final do nosso vídeo. Há um estranho efeito Ken Burns na camada de fundo que é apenas um padrão no iMovie sempre que você importa uma foto. Só vamos desligar isso. Vamos fazer colheita para preencher e então isso parece bom. Clique duas vezes no vídeo. Então, se você vir aqui em cima, há uma opção que diz cortar fora e você pode mudar isso para imagem e imagem, que é o que nós queremos, porque isso nos permitirá manipular o tamanho aqui. Vamos fazer isso, apenas fazê-lo deste tamanho. Então, novamente, eu quero mudar a colocação do fundo. Vamos aqui mexer no tamanho. Perfeito. Então o vinco aparecerá um pouco mais à direita. Acho que isso parece muito bom. Então nós vamos exportar isso e nós realmente vamos trazê-lo de volta para que possamos fazer a mesma coisa, mas apenas colocar o quadro em cima. Vou fazer um arquivo, compartilhar, arquivo. Perfeito. Agora podemos usar o mesmo arquivo, então vamos nos livrar deles. Vamos procurar o nosso filme na área de trabalho e vamos deixá-lo cair. Podemos ver se nós esfregamos através, ele está bom e agora nós só temos que colocar a moldura do iPhone em cima, então vamos cagar isso e vamos arrastá-lo para dentro Mais uma vez, vamos aumentar o comprimento e ir para imagem e imagem em vez disso. Nós vamos precisar primeiro, ir para a colheita e encaixar para que você possa ver a coisa toda. Isso parece bom e clique duas vezes novamente imagem e imagem, e eu vou apenas fazer isso para que ele se encaixa perfeitamente. Agora vamos tocá-lo e ver como ele se parece. Isso parece ótimo. Como você pode ver, ele se parece exatamente com o que criamos no Premiere ele só deu um passo extra. Aqui está como o meu vídeo final se parece. Mal posso esperar para ver o seu, por favor, compartilhe abaixo. Além disso, se você decidir compartilhá-lo nas mídias sociais, sinta-se à vontade para me marcar no MaddieBeard.ux no Instagram, e sublinhar MaddieBeard no Twitter. Nada me faria mais feliz do que ver seus projetos e ter você compartilhá-los com o mundo. 13. Dicas finais: Antes de encerrarmos essa aula, eu queria tirar alguns minutos só para falar sobre alguns equívocos comuns, perguntas e coisas assim, que poderiam te ajudar se você estiver apenas no início de sua carreira na UX. Minha primeira dica aqui é sempre ter um porquê por trás de suas decisões. Como designer de UX, você não é necessariamente um artista, você é um comunicador e está ajudando alguém a usar um produto e tirar o máximo proveito dele. Deve haver sempre uma razão por trás da qual você toma certas decisões de design. Esses tipos de razões são realmente importantes para ser capaz de articular e mostrar e contar, não só para seus chefes, clientes e coisas assim, mas também para você mesmo entender por que você está fazendo as coisas que você está fazendo e tem alguma tranquilidade de que há pesquisas , dados e testes que vão para suas decisões porque é isso que faz um produto bem-sucedido. Minha segunda dica é sempre mostrar seu trabalho de processo em seus estudos de caso de UX e peças de portfólio. Os empregadores querem saber como é o seu processo, e eles querem saber o que vai para o seu trabalho. Eles não querem apenas ver que você pode produzir alguma interface bonita, eles querem ver o que entra nela. Se isso seria pesquisa ou 10 iterações ou o que quer que seja. Você deve mostrar tudo o que entra em seu projeto de forma extremamente digerível para seus espectadores. Não apenas jogue tudo o que você fez na página, mas tente contar uma história sobre como você passou de um problema para uma solução. Minha terceira dica é um pouco técnica, mas eu acho que é importante e é tudo sobre consistência. Como designer de UX, você precisa praticar ser orientado a detalhes. Quando se trata de tamanhos de texto, consistência de cores e consistência de espaçamento, essas coisas são cruciais. Quando um potencial empregador ou cliente está passando por seus projetos, eles realmente não devem ver nenhum erro nesses aspectos. Eles não devem ver que você decidiu usar um tipo de letra na tela, mas você alternou aleatoriamente para outro tipo de letra em outra tela. Eles não devem ver que você está usando 10 pixels de preenchimento nesse cenário e 25 nesse cenário sem motivo bom. Você deve sempre verificar novamente o seu trabalho em termos de consistência e ser orientado para os detalhes, porque isso é algo que os empregadores vão procurar. Minha última dica é testar cedo e muitas vezes. Isso é algo que as pessoas no campo UX podem concordar em toda a linha. É muito importante colocar suas soluções nas mãos de usuários reais o mais cedo possível. Isso porque, como designer, você tem toneladas de preconceito e você não necessariamente sabe o que as pessoas vão realmente fazer. Você pode pensar que sabe o que eles vão fazer, eles podem dizer o que eles vão fazer, mas isso nem sempre combina com o que eles realmente fazem e como eles realmente se comportam com um produto na frente deles. Mesmo com projetos de prática ou projetos que são apenas estudos de caso para o seu portfólio, eu recomendo fortemente tentar obter alguém para testá-los. Ele só vai ajudar seus projetos a ficarem melhores e melhores a cada vez que você testar. 14. Conclusão: Você chegou ao fim desta aula. Aparecer e agir é a melhor coisa que você pode fazer para melhorar suas habilidades e, eventualmente, fazer uma transição para uma carreira na UX. Nem sempre é fácil aparecer e tentar algo novo e realmente colocar tudo de você nisso, mas sempre vale a pena. Eu realmente espero que você tenha gostado dos processos criativos e estratégicos que entram em um projeto como este. Não se esqueça de fazer o upload do seu projeto abaixo e sinta-se à vontade para voltar a esta aula sempre que quiser ter mais prática, experiência e projetos sob seu cinto. Se você deseja criar mais recursos do aplicativo para a mesma idéia ou fazer algumas soluções completamente diferentes, eu encorajaria você a apenas continuar com ele. Adorei compartilhar essa aula com você, e mal posso esperar para ver como você a usou para criar algo que você nunca projetou antes. Muito obrigado por assistir. Boa sorte em sua carreira criativa.