Aprenda UX: criação de wireframes e prototipagem para aplicativo móvel

1. Introdução: Olá. Meu nome é Gene Guy. Sou designer e desenvolvedor de produtos. Faço design e desenvolvimento de produtos há mais de 15 anos. Nesta aula, vou ensinar-lhe como fazer wireframe e protótipo com Balsamiq e Adobe XD. Vamos wireframe e protótipo de um aplicativo móvel exemplo baseado em alguns documentos UX exemplo como personas, fluxos de usuário que eu preparei para a classe. Mostrarei algumas dicas sobre como usar Balsamiq e Adobe XD e meu processo de criação de wireframing e prototipagem de um aplicativo móvel. Esta classe é para designers de UX iniciantes e intermediários que gostariam aprender ou querem aumentar o nível de suas habilidades de wireframe e prototipagem. No final da aula, cada aluno terá um projeto concluído que poderá apresentar em seu portfólio. Mal posso esperar para te ver na aula, começarmos a teclar e a prototipagem juntos. 2. O que é um wireframe: O que é um wireframe? Wireframe é a parte essencial do fluxo de trabalho de um designer. É um dos aspectos importantes do fluxo de trabalho de um designer porque ajuda a garantir que um site ou aplicativo móvel tenha consistência e clareza, a fim de proporcionar uma experiência positiva ao usuário. Um wireframe é uma representação simples e de baixa fidelidade do seu aplicativo ou site. Pense nisso como um blueprint para seu site ou aplicativo. É onde os estágios iniciais do processo de pensamento começam sobre a compreensão de quais elementos serão colocados na tela. Pense em um wireframe como sendo semelhante a um projeto ou plantas de uma casa. Antes de começar a projetar uma casa, você tem que ter um projeto ou uma planta para identificar onde a cozinha vai, onde os quartos vão, etc Wireframes para um aplicativo móvel ou um site servem o mesmo propósito. Você tem que mapear o que vai acontecer em cada tela, e você vai colocar caixas na tela para agir como titulares de lugar para elementos do design real vai. Para onde vai a navegação? Haverá uma imagem de herói na tela, etc. Wireframes nos permitem iterar rapidamente através nossas idéias para que possamos mostrar e obter feedback das partes interessadas. wireframes fornecem a estrutura geral da página e como a navegação fluirá. Ao criar wireframes, cada aspecto do site ou aplicativo é representado por uma forma ou gráfico simples. Caixas com essas linhas diagonais representam imagens, linhas horizontais são usadas para representar texto, e um círculo com um L dentro dele é mais comumente usado como seu logotipo. Um bom wireframe pode ajudar a criar a visão para todo o seu site ou aplicativo móvel. Wireframe servem como o primeiro estágio de design. Depois que os wireframes forem finalizados, você criará modelos e protótipos, mas os wireframes ajudam a garantir que você esteja no caminho certo com seu produto antes de começar a perder tempo com um design que, no final, não parece funcionar como você esperava. 3. Por que você deve fazer o fio e o protótipo: Por que você deveria grampear? O wireframe rápido e a prototipagem são etapas importantes em seu processo de design. Ele permite que designers, desenvolvedores e empreendedores divulguem ideias rapidamente. Ao fazer wireframes rápidos, você pode jogar fora as más ideias e descobrir as melhores soluções para seu aplicativo web ou aplicativo móvel. Usando Balsamic ou Adobe XD, por exemplo, você pode criar wireframes e protótipos que permitem ao usuário focar o conteúdo de conversação nas interações e não detalhes como esquema de cores, um determinado uso de imagem em vez de outro imagem, ou tamanho de botões e coisas assim. Tudo isso vem mais tarde no processo. A principal razão para wireframes e eventualmente, o protótipo de baixa fidelidade desses wireframes é garantir que todos os elementos necessários para cada tela ou página estejam lá e como esses elementos interagem uns com os outros. baixa fidelidade mantém a conversa centrada em descobrir o problema e comunicar a solução funcional. wireframing ajuda você a visualizar o layout do seu conteúdo, economizar tempo no processo geral de design ao ser capaz eliminar rapidamente projetos de wireframe de telas, testar facilmente problemas de usabilidade, testar e refinar sua navegação, execute prototipagem rápida com usuários e partes interessadas e avalie se seus wireframes aderem às melhores práticas de UX. Wireframes ajudam a trazer clareza para como os elementos serão organizados na tela. 4. Sobre Balsamiq: Eu tenho usado Balsamiq por alguns anos agora. É uma das melhores ferramentas lá fora para wireframing rápido e prototipagem. É muito fácil de aprender, então você será capaz de saltar direto e começar a criar. O que torna o Balsamiq tão bom de usar para wireframes de baixa fidelidade é o fato que ele reproduz a experiência de esboçar em um bloco de notas ou quadro branco, mas você está usando um computador, então você arrasta e solta componentes do Balsamiq para sua tela e rapidamente testar idéias rapidamente para que assim você pode se livrar das más idéias e não perder tempo. Como você pode ver, há um monte de grandes empresas que usam Balsamiq, então você estará em boa companhia. Quando você olha para as descrições de trabalhos para um monte de trabalhos de designer de UX, você vai descobrir que Balsamiq é geralmente uma das ferramentas que as empresas vão gostar que você saiba como usar. Você vê aqui Balsamiq vem em três versões: Balsamiq Cloud que é o aplicativo web, Balsamiq para Desktop que é executado em Mac e Windows, e então há Balsamiq Google Drive que se integra com o Google Drive. Cada versão vem com uma avaliação de 30 dias, para que você possa baixar uma dessas versões e usá-la para este curso. 5. Painel e tela no Balsamiq no Balsamiq: Agora você já deve ter baixado e instalado uma das versões de avaliação gratuita do Balsamiq, se você ainda não tem. Agora podemos abrir Balsamiq e vamos ver o painel, que consiste em várias áreas diferentes. À nossa esquerda, temos o painel do navegador. Na área superior, temos a barra de ferramentas. Logo abaixo disso, temos a biblioteca de interface do usuário, que tem todos os controles de interface do usuário que podemos usar para nossos projetos. Esta grande área principal no meio é a tela, é aqui que colocamos todos os nossos controles. À direita está o Painel de propriedades. Nesta lição, vamos passar pelo Painel do Navegador na tela. O Painel do Navegador é onde todos os nossos wireframes, ácidos ou símbolos viverão. Quando você faz um novo modelo de wireframe, ele aparecerá nesta área, e os itens são arrastados para a área de tela aqui. Vamos fazer uma maquete rápida e ver como esta área funciona. Vamos rever os controles da biblioteca de interface do usuário no próximo vídeo, mas vamos pegar alguns controles agora para que possamos obter uma maquete para aparecer na Área de navegação. Temos nosso primeiro modelo básico de wireframe e, como você pode ver, ele aparece no Painel do Navegador. Se você selecionar uma maquete de arame clicando nela, você verá uma seta no canto inferior direito aparecerá. Se você clicar nessa seta, algumas opções serão exibidas que são Renomear, Duplicar, Mover para o Lixo e Criar Versão Alternativa. Para renomear sua maquete de wireframe, selecione Renomear e, em seguida, uma janela modal aparecerá, que tem um campo de entrada ao lado do novo rótulo de nome. Aqui é onde você deve digitar o novo nome da maquete e, em seguida, clicar em “Renomear”. A próxima opção é Duplicar, se você clicar nisso, ele criará uma versão duplicada dessa maquete e, no final do nome, adicionará a cópia de texto, para que você saiba que era uma versão duplicada. Você também pode usar o atalho de teclado Comando D para criar uma versão duplicada. Em seguida, você tem o Mover to Lixo. Selecione qual modelo wireframe você deseja excluir e selecione Mover para o Lixo, e essa maquete será excluída. O último item no menu é Criar uma Versão Alternativa. Se você selecionar essa opção, será criada uma versão alternativa que será exibida no canto inferior direito do painel na seção Versão alternativa do Painel de propriedades. Estas versões serão nomeadas Versão Oficial, que é a Versão Original, e a Versão Alternativa que você pode renomear para algo um pouco mais memorável, em vez do nome de espaço reservado que eles oferecem. Se clicar com o botão direito do mouse na Versão Oficial, você verá uma opção para Descartar todas as alternativas. Se clicar com o botão direito do mouse ou clicar na “Versão Alternativa” e clicar na seta que aparece, você verá opções para Renomear, Duplicar como Novo Mockup, Promover para Oficial, Mesclar com Oficial e Descartar. Selecionar e Renomear é a mesma coisa que vimos antes, Selecionar e Duplicar, duplica essa versão alternativa. Ele criará uma versão duplicada com um novo nome, mas não criará um novo wireframe. Se você deseja criar um novo modelo de wireframe, você precisará selecionar a próxima opção que é Duplicar como Novo Wireframe. Isso exibe um novo wireframe. Se você clicar em “Promover para Oficial”, isso fará com que o wireframe se torne a Versão Oficial e faça a Versão Oficial anterior, agora a Versão Oficial Antiga. Se você selecionar Mesclar com Oficial. Ele irá adicionar essa alternativa ao lado da sua Versão Oficial na tela, e então você pode adicionar ou arrastar ou o que estiver na Versão Alternativa para a Versão Oficial para atualizar a Versão Oficial. Por último, você pode selecionar este descarte para cada Versão Alternativa para excluí-los ou você pode clicar na seta na Versão Oficial e excluir todas as Versões Alternativas de uma só vez. 6. Painel de Propriedades de biblioteca de de UI no Balsamiq no Balsamiq: Agora vamos falar sobre a biblioteca de interface do usuário no painel Propriedades. A biblioteca de interface do usuário é uma lista de todos os tipos de controle de interface incluídos, bem como ativos, ícones e símbolos. A biblioteca categoriza os controles, para que você possa clicar em um dos botões de categoria como “Todos” e ver todos os controles de interface do usuário na biblioteca. Ou você pode clicar em “Contêineres” e ver todos os controles de interface do usuário do contêiner, como um iPhone , uma janela do navegador, um iPad etc Para adicionar um controle de interface do usuário à tela, você pode arrastá-lo para a tela ou clicar duas vezes nele. A Biblioteca de IU também inclui os ativos que você importou para o projeto, bem como os símbolos que você criou para o projeto. Ao selecionar qualquer um dos controles de interface do usuário, ele me permite mostrar como o painel Propriedades funciona também. Vamos pegar um controle de botão. Se eu adicioná-lo à tela de desenho, ele permanecerá selecionado e, à direita, no painel, você verá as propriedades desse controle de botão no painel Propriedades. Você pode ver os campos de entrada de posição e tamanho que me permite inserir um novo conjunto de números, e quando eu clicar em “Enter” o botão será atualizado. Há uma seção de camadas onde posso trazer o botão para a frente, trazê-lo para a frente, enviar para trás ou enviá-lo de volta. Há uma seção Autosize e uma seção Cor que me permite alterar a cor de fundo do botão clicando neste ícone “Cor de fundo” e selecionando uma nova cor. Também posso adicionar um ícone ao botão. Posso procurar um ícone digitando o que estou procurando na caixa de pesquisa ou clique no ícone “Abrir biblioteca de ícones” para ver todos os ícones disponíveis. Estes são o conjunto de ícones Font Awesome que vem pré-instalado. Se eu procurar o logotipo da Apple, eu o verei aparecer e, em seguida, posso clicar duas vezes nele para que ele possa ser adicionado ao meu botão. Então eu posso clicar no ícone “Girar 90 graus” para girar o ícone dentro do botão, ou posso clicar no botão “Remover ícone” para excluí-lo completamente do botão. Por baixo da caixa de pesquisa de ícones há um controle deslizante que me permite dimensionar o ícone de extra pequeno para duplo extra grande. Há também uma seção de link onde eu posso fazer o botão clicável para que ele vai me levar para outro marcador, este recurso é o que permite que você defina seus wireframes para se tornar um protótipo clicável. Depois, há uma seção Menu, que quando eu clicar na seta para baixo, ela se torna adicionada ao botão. Há também uma seção Estado para que eu possa selecionar o estado do botão. Eu posso torná-lo normal, eu posso torná-lo selecionado que vai torná-lo azul Eu posso fazê-lo em foco que coloca uma fina linha azul em torno do botão, ou eu posso fazê-lo desativar, isso dá o efeito que o botão está sendo acinzentado. Em seguida, na parte inferior há uma seção Texto onde posso negrito, itálico, sublinhar ou alterar o tamanho da fonte ou o alinhamento do texto. Se você tiver vários controles selecionados, as opções para alinhar e distribuir esses controles serão exibidas. Eu sugiro passar por alguns desses controles e brincar com suas propriedades para ver o que cada um deles faz. Vou passar por muitos desses controles na próxima seção, e vou mostrar a vocês como eu crio wireframe. Quando não há controles selecionados, o Inspetor de propriedades mostra notas para o wireframe selecionado. Ao clicar no botão “Informações do projeto” na barra de ferramentas, o painel Informações do projeto é exibido e permite que você defina as configurações de todo o projeto para a capa, a fonte, o link e a cor da seleção do projeto. Essas configurações serão aplicadas a todos os seus wireframes no projeto. A seção Skin oferece duas skins, o que permite que você trabalhe em suas ideias iniciais usando um visual áspero. Mais tarde, clicando em “Wireframe”, atualize-os para um visual mais nítido e polido quando estiverem prontos para apresentação. 7. Barra de ferramentas de Balsamiq: Agora vamos falar sobre a barra de ferramentas na parte superior do painel. No canto superior esquerdo, há um ícone realçado em azul que permite ocultar e mostrar o painel do navegador. disso, você tem um ícone que permite visualizar seus wireframes em um formato de grade de miniaturas e o sinal de adição que permite adicionar um novo wireframe. Na seção central superior, você tem botões para desfazer e refazer suas ações, lupa, ícones para ampliar, reduzir o zoom e ajustar o zoom, etc. Se você selecionar um item na tela, você tem ícones que se tornam ativos, onde você pode agrupar os itens selecionados. Você tem um ícone que altera a posição de um elemento, trazendo-o para a frente, enviando-o para trás, etc. Em seguida, também, um ícone para bloquear um item para que ele não possa ser movido enquanto você está trabalhando. À direita desse grupo de ícones, você tem uma caixa de pesquisa onde você pode procurar rapidamente o controle de interface do usuário. Ao lado disso, há um botão para ocultar e mostrar a biblioteca de interface do usuário e depois disso, há um ícone para adicionar um comentário. Se você clicar na caixa Adicionar comentários, ele solicitará inicialmente seu e-mail e um nome, e então você poderá adicionar comentários, excluir comentários e editar comentários. A próxima ferramenta permite ocultar e mostrar o inspetor. Depois disso, um ícone que oculta e mostra as informações do projeto, e o último ícone é o ícone de reprodução, no qual você clicaria para visualizar um protótipo do seu conjunto de wireframes. 8. Vamos começar a dar um fio no Balsamiq: Baseado em tudo o que fizemos até agora em lições anteriores, vamos começar a fazer alguns wireframes. Essencialmente o que eu faço quando eu começo, eu gosto de ter algum processo antes de começar a esboçar um wireframe. O que eu fiz aqui foram alguns modelos, apenas para dar uma idéia do meu processo de pensamento enquanto eu começo a criar wireframes. O aplicativo que eu vou estar fazendo nesta série de wireframes rápidos, Eu provavelmente vou fazer cerca de cinco deles, é um aplicativo de treino. O que eu fiz foi rapidamente fazer um par de personas, personas sendo pessoas que usariam o aplicativo. Por que eles usariam o aplicativo, qual é seu objetivo para usar o aplicativo? Eu poderia ter o usuário em mente enquanto eu estou esboçando idéias. O nome da primeira pessoa é Jennifer. Seu objetivo é, ela precisa de um plano de treino em casa porque ela não tem tempo para ir ao ginásio. Ela gosta de fazer exercícios de peso corporal e cardio, e ela prefere não usar pesos quando ela treina. Esta é a primeira pessoa. A segunda pessoa criada foi David. Aqui estão os detalhes dele. Ele é gerente de vendas, 44 anos, tem um MBA, viaja muito para trabalhar. Ele precisa de um plano de treino em casa porque não tem tempo para ir ao ginásio. Ele gosta de fazer exercícios de peso corporal, pesos e cardio. Ele precisa que seus exercícios sejam curtos, mas de alto impacto porque ele não tem muito tempo para malhar. Estas são as minhas duas primeiras personas que vou usar para este exercício de wireframing este aplicativo de treino. Você também pode ter acesso a este modelo. Vou colocá-lo nas notas como um link para download e você pode usar este arquivo como um ponto de partida para o seu aplicativo de projeto. Depois disso, eu rapidamente apenas criei o que eu acho que deveria estar na tela ou o que a tela deve ser sobre, as cinco telas que eu estou indo para wireframe. Isso deve ser criar a tela da conta, depois de criar sua conta, você leva sua tela para onde você adiciona suas informações e metas para seu perfil e seleciona suas preferências de treino. Depois disso, a próxima tela será você escolher um treino de uma lista de exercícios. Uma vez que você tem essas listas de exercícios, você será levado para uma tela. Depois de selecionar um treino, você será direcionado para uma tela de detalhes do treino explicando o treino. Em seguida, quando você clicar no vídeo, ele começará a reproduzir o vídeo do treino e, em seguida, você começa a malhar junto com o vídeo. Só quero um pouco anotar algumas notas o que cada tela deve ter, apenas me permita como eu esboçar. Eu também fiz um fluxo rápido. Quando você acessar o aplicativo pela primeira vez, você tem uma conta? Se sim, você faz login, eu não criarei nenhuma tela de login. Isto vai ser estritamente para pessoas que não têm uma conta que eu vou fazer o fluxo dos wireframes para esse fluxo. Você tem uma conta? - Não. Você cria uma conta. Depois de criar uma conta, configure um perfil. Escolha a partir de uma lista de exercícios. Você tem aquela tela de detalhes do treino. Depois de selecionar um treino, você visualiza o treino, e esse é o fim do fluxo. 9. Recriar uma tela de conta: Vamos começar a criar nosso Wireframe. Uma das primeiras coisas que eu faço ao criar Wireframes móveis em Balsamiq, é certificar-se de que a tela para a qual estou criando o Wireframe é do mesmo tamanho de tela que o telefone celular para o qual vou projetar. Vamos criar um novo Wireframe, vamos clicar no sinal de adição, ele adiciona nosso novo Wireframe, e vamos para iOS já que vamos criar um aplicativo móvel iOS. Vá para iOS, clique duas vezes no iPhone para adicioná-lo à tela. Agora, se você selecionar esse controle de interface do usuário, você pode ver à direita no painel de propriedades, é o iPhone 10. O que eu quero fazer é criar esses conjuntos de Wireframes para o iPhone 8. Vamos clicar no iPhone 8. Agora, vamos nos certificar de que nosso tamanho de tela é o mesmo tamanho de um iPhone 8 real. O tamanho real do iPhone 8 é 375 por 667. Vamos pegar um retângulo, adicioná-lo à tela, e vamos dar-lhe um tamanho de 375 por 667. Agora, a moldura do iPhone atrás dele deve ser 429 por 848. Como você pode ver, estou apenas digitando essas dimensões na seção de tamanho aqui no painel de propriedades. Vamos alinhá-lo para ter certeza de que nosso retângulo está lá, no centro ali. Agora que criamos o tamanho da tela do iPhone para ser exatamente o mesmo tamanho de tela de um iPhone 8, vamos criar um símbolo para que possamos usar o mesmo controle Wireframe UI em todas as nossas marcações. Vamos pegar a moldura do iPhone na parte de trás, vamos pegar o retângulo que acabamos de criar também e vamos agrupá-los. Antes de criarmos um símbolo, precisamos agrupá-los. Você pode fazer o Comando G para agrupá-los ou com ambos selecionados, você pode clicar neste botão aqui, o botão Grupo. Uma vez que você o agrupa, você vê que ele vira cor púrpura. Agora à direita, você verá que tem a capacidade de convertê-lo em um símbolo. Vamos primeiro nomear nosso novo símbolo, vamos chamá-lo de iPhone 8, e vamos convertê-lo em símbolo. Agora temos isso como um símbolo que podemos usar em todas as nossas marcações para este projeto. Como é que sabemos isso? Se formos para Símbolos veremos nosso iPhone 8 agora como um dos controles de interface do usuário. Vamos começar a criar uma tela de conta. O que queremos na tela é uma imagem para um logotipo, você quer um título, e você quer alguns campos de entrada, termos de serviço caixa de seleção que as pessoas podem selecionar para concordar com os termos de serviço. Vamos querer um criar um botão conta e esse tipo de coisa. Vamos começar com o logotipo, vamos apenas pegar uma imagem para isso. Vamos para Adicionar rápido aqui no canto superior direito, vamos clicar nesse campo de entrada e vamos digitar imagem, e você vê imagem aparece aqui. Vamos clicar duas vezes nisso e isso adicioná-lo, e vamos adicioná-lo à nossa tela. Você vê que há uma linha azul, que permite que você saiba que ela está sendo centrada. Agora vamos criar um título para a nossa tela. Podemos ir para o canto superior direito aqui e digitar texto ou rótulo para encontrar o que queremos, ou podemos ir para o texto, clique no botão Texto aqui e vemos nossos controles de interface do usuário em relação ao texto. O que queremos é um rótulo, então vamos arrastá-lo para a tela para a tela. Vamos nomear o título, criar uma conta, e vamos torná-la um pouco maior. Aqui à direita no painel de propriedades, vamos fazer 28. Vamos centralizar isso também. Agora, vamos criar alguns campos de entrada para que os usuários digitem seu primeiro nome, e-mail e senha para criar sua conta. Voltar aqui para adicionar rápido é o que eu gosto de fazer. Vamos procurar uma entrada, Entrada de Texto aqui. Basta pegar isso e vamos puxá-lo junto para que ele seja em torno da mesma largura que o título. Vamos colocar outro rótulo em cima dos campos de entrada. Clique duas vezes neste texto aqui, há um rótulo e vamos chamá-lo primeiro nome. Agora este rótulo vai com este campo de entrada aqui. O que queremos fazer é agrupá-los para que possamos facilmente duplicá-los e, em seguida, criar mais campos de entrada. Torna as coisas muito mais fáceis. Vamos selecionar o primeiro nome, selecionar o campo de entrada, e vamos agrupá-los, e agora temos nosso controle de interface do usuário de grupo aqui. Agora vamos duplicar isso. Podemos fazer o Comando D ou podemos vir aqui até este botão aqui e clicar em “Duplicar” e isso irá duplicar o campo de entrada. Vamos chamar este e-mail. Cabe ao usuário inserir seu e-mail aqui. Vamos fazer mais uma, vamos chamar essa senha para configurar sua senha. Clique duas vezes lá e, em seguida, digite a senha e, para sair, clicamos neste pequeno ícone Início aqui que a tira de volta da tela. Temos nossos campos de entrada para o usuário criar sua conta. Agora, vamos adicionar termos de serviço. O que queremos é uma caixa de seleção, então vamos até essa caixa de seleção Adicionar rápido, vamos digitar. Aqui, nós temos isso aqui, vamos clicar duas vezes nele, ele irá adicioná-lo, e vamos alterar este texto aqui para dizer termos de serviço. Lá vai você. Agora, precisamos de um botão para que uma vez que o usuário preencha todas essas informações eles possam clicar em um botão que os levará para a próxima tela. Vamos para Botões, e aqui temos este primeiro botão e podemos apenas clicar duas vezes nele para adicioná-lo, e vamos torná-lo um pouco maior. Vamos alterar esse texto para criar uma conta. Vamos fazer nosso botão um pouco maior e centralizá-lo. Isso está parecendo uma boa baixa fidelidade criar uma tela de conta. Só mais uma coisa, digamos que temos alguém que já tenha uma conta, que não precise de uma conta, então só queira fazer login. Então vamos criar uma opção para isso. Vamos subir e dar a volta, vamos encontrar algum texto, clicar duas vezes nisso, derrubar isso. Vamos ver, o que queremos que diga? Bem, digamos que eu já tenho uma conta, e queremos que a ação eles tomem é clicar em um botão de login. Vamos duplicar esse texto, e então vamos alterá-lo, colocá-lo ao lado dele, e vamos chamar esse login. Vamos agrupar estes para que possamos movê-los facilmente. Vamos clicar duas vezes nesse login e mudar sua cor para que saibamos que é um link sublinhado. Crie um link de usuário sublinhado e altere a cor para dizer azul. Clique no botão “Início” para voltar para fora, e assim você tem. Essa é a nossa criação de uma tela de conta, onde temos nosso logotipo no topo, o título da tela criando a conta. Temos nossos três campos de entrada para o usuário digitar seu primeiro nome, seu e-mail e senha. Temos termos de serviço. Eles clicariam nessa caixa de seleção e, em seguida, criariam uma conta. Se eles já têm uma conta, eles clicariam em um login, e eles irão para a tela de login em vez de estar aqui na tela de criação de uma conta. Vamos dar um nome a isto. Vamos nomear nosso Wireframe aqui que acabamos de criar. Clique em “Renomear” e chame isso criar uma conta, e lá vai você. Vamos começar a criar nossa próxima tela que é a tela de configuração do perfil, e vamos fazer isso no próximo vídeo. 10. Redefinição do perfil: Agora vamos criar nossa tela de configuração de perfil. No vídeo anterior, criamos nossa tela Criar uma conta, então agora vamos passar para o que acontece com o usuário quando ele clicar no botão Criar uma conta. Vamos fazer um novo wireframe. Vamos duplicar este wireframe, e vamos renomeá-lo e chamá-lo de Configuração de Perfil. Vamos apagar tudo o que temos nesta tela para que possamos começar de novo. Para a configuração do nosso perfil, o usuário digita seu primeiro nome aqui na tela Criar Conta. Isso aparecerá na tela Configuração do perfil. Vamos procurar um rótulo, clique duas vezes. Vamos trazê-lo para a tela. Digamos que, na tela Criar Conta, o nome dele era Joe. Vamos fazer isso um pouco maior. Vamos fazer isso 28. Isso está centrado? Sim. O que queremos que o usuário faça é preencher informações em diferentes seções, então teremos uma seção de gênero, que altura eles têm, seu nível de fitness e que tipo de exercícios eles gostam. Dessa forma, você pode obter todas as informações deles, e isso preencherá isso no perfil deles e permitirá o aplicativo exiba uma lista de treinos com base nas preferências de treino. Vamos criar a tela de gênero. Queremos outra gravadora. Na verdade, podemos apenas duplicar este. Vamos torná-lo um pouco menor. Vamos recuar. Vamos chamá-lo de Gênero. Vamos fazer isso um pouco menor. Ainda é muito grande. Gênero. Vamos procurar alguns botões de rádio. Vamos digitar rádio. Aqui vamos nós, clique duas vezes. Vamos adicionar isso e vamos mudar isso para dizer Masculino, essa opção, então vamos duplicar isso e chamar a próxima Fêmea. Essa é a nossa seção de gênero. Vamos agrupar isso para que possamos movê-los facilmente e depois centralizá-lo. Bem, não, vamos alinhar à esquerda estes. A próxima seção que queremos é a altura. Vamos entrar aqui. Vamos copiar isto. Bem, não, vamos ver. Foi às 20. Vamos voltar para fora. Vamos pegar um rótulo, clicar duas vezes, e vamos chamar essa seção Altura. Vamos torná-lo 20 semelhante ao mesmo tamanho do gênero, e vamos pegar alguns campos de entrada de texto para que eles possam inserir sua altura em pés e em polegadas. Vamos digitar entrada, entrada de texto, clique duas vezes nele. Vamos trazê-lo para a tela. Vamos dimensioná-lo para baixo, e depois vamos pegar algumas mensagens. Acho que podemos fazer um rótulo também para isso. Clique duas vezes nisso. Digamos que este primeiro é pés. Vamos adicionar alguns dois pontos aqui. Vamos agrupar estes. O campo de entrada e o texto de pés, Comando G. Vamos duplicar isso, Comando D, ou você também pode ir até o topo como fizemos anteriormente. Vamos citar esta polegada. Vamos voltar para fora. Essa é a nossa seção de altura. Vamos pegar tudo isso. Vamos agrupá-los para que possamos movê-los facilmente. Essa é a altura. Agora vamos criar a seção de nível de fitness. Vamos pegar uma etiqueta de novo. Acho que temos que incluir o rótulo do botão de texto. Clique duas vezes nisso e vamos digitar. Faça este texto para o Nível de Fitness. Mais uma vez, vamos fazer isto 20. Vamos achar alguns botões de rádio. Além disso, adicione o cólon novamente. Botão de rádio. O que queremos saber é se eles têm os níveis iniciantes, experientes ou avançados. Este primeiro será o Principiante. Vamos duplicar isso. Próximo, diremos Avançado. Duplicar isso de novo. Isto vai dizer Experiente. Novamente, vamos agrupar estes. Agora vamos criar uma seção para que eles selecionem o tipo de exercícios que eles gostam. Mais uma vez, vamos pegar uma etiqueta. Vamos digitar rótulo, clique duas vezes. Eu diria que você gosta de treinos. Mais uma vez, vamos fazer isto 20. Vamos ter o que seriam imagens desses treinos. Ele terá uma imagem de cardio que eles podem selecionar, pesos que eles podem selecionar, bater treinamento que eles podem selecionar, ou treinamento de peso corporal. Vamos procurar uma imagem. Clique duas vezes nisso. Vamos ver bem rápido. Isso é muito grande. Sim, um pouco grande demais. Vamos mover isto para dentro. Vamos adicionar um rótulo a isso, e vamos chamá-lo de Cardio. Vamos agrupar estes para que possamos facilmente duplicá-los. Vamos mover isso para cima. Clique em voltar para fora. Agora vamos duplicar isto. Vamos chamar isso de Pesos. Vamos centralizar isso. Vamos duplicar este novamente para criar outra linha. Parece que vamos ficar sem espaço. Vamos tentar mover tudo para cima porque precisamos de um espaço para o nosso botão na parte inferior. Vamos mover isso para cima. Mova este um pouco para baixo. Vamos chamar esse texto aqui Hit. Você pode clicar no botão inicial ou clicar duas vezes em Canvas para sair novamente. Vamos duplicar isto. Vamos chamar isso de Bodyweight, então eles gostam de fazer treinamento de peso corporal. Isso parece bom. Vamos procurar o nosso botão. Clique duas vezes nele. Digamos que o botão deve dizer Continuar. Vamos fazer o botão um pouco maior e vamos centrá-lo. Essa é a nossa tela de configuração de perfil. No filme anterior, criamos a tela Criar uma Conta. usuário preenche isso, digite seu primeiro nome, seu primeiro nome aparecerá na configuração do perfil e, em seguida, selecionará suas opções para continuar configurando seu perfil, que será selecionar seu gênero, adicionar sua altura, que nível de fitness eles são, eo tipo de exercícios que eles gostam, e então eles clicam em “Continuar”. A partir daí, quando eles clicarem em “Continuar”, eles serão levados para a próxima tela que faremos no próximo vídeo, que será uma tela de Lista de Exercícios. Vamos começar a criar essa tela no próximo vídeo. 11. Reenquadramento da lista de a tela de exercícios: Vamos começar a criar uma lista de tela de treino. Esta tela será onde os usuários podem ver uma lista de treinos por categoria. Eles podem procurar exercícios específicos ou exercícios que desejam completar, como burpees ou talvez alguns exercícios de perna. Haverá uma barra de guias de navegação Bodman que permitirá aos usuários navegar até a tela inicial, a tela de treino, que é o que estamos criando agora, e uma tela de perfil. Vamos começar a criar uma adição de elementos para esta nova tela. A primeira coisa que vamos fazer é adicionar um novo wireframe. Vamos chamá-lo de lista de exercícios. Vamos pegar nosso símbolo do iPhone 8, então clique no botão “Símbolos” e podemos clicar duas vezes no símbolo “iPhone 8" para adicionar isso à nossa tela. Agora vamos começar a adicionar alguns elementos. Inicialmente, a primeira coisa que queremos é a barra de pesquisa. Digamos que procuramos uma caixa de pesquisa, aqui está, clique duas vezes. Vamos adicionar isso na parte superior da tela e vamos movê-lo em toda a largura. O próximo item que queremos é uma barra de botões, onde os usuários podem usar isso para navegar para diferentes categorias. Barra de botões, vamos trazer isso para esta tela, e também vamos espalhar isso pela tela. Vamos dar algumas categorias, então digamos peso corporal, HIIT, cardio e pesos. Se você separar cada uma dessas palavras aqui com uma vírgula, quando você clicar fora, ele irá adicionar uma barra de botões, então lá temos nossa barra de botões. Agora vamos criar uma lista de imagens que mostrarão uma lista de treinos com base na categoria que o usuário clicou na parte superior. Se eles clicarem no peso corporal, ele mostrará uma lista de exercícios de peso corporal, HIIT, ele mostrará uma lista de exercícios HIIT, e assim por diante. Vamos criar uma imagem. Digamos que estamos na categoria de peso corporal já que está selecionado. Vamos criá-lo, encontrar uma imagem. Vamos derrubar isso, e vamos fazer um 130 por 80. Em vez de tentar descobrir o que cada treino deve dizer, vamos apenas adicionar uma linha de texto. Vamos procurar texto. Vamos fazer um bloco de texto. Então podemos facilmente mudar isso aqui, assim, vamos centralizar e agrupá-lo. Agora você tem a imagem e o nome desse treino ou exercício. Vamos agrupar isso. Agora duplicamos isso. Aqui está outro exercício. Eu vou dizer que isso é talvez burpees e isso é pull ups, por exemplo. Vamos pegar esses e duplicar, comando D, segurar o botão em cima que estamos usando, e vamos espaçamento para fora. Vamos fazer isso mais uma vez, Comando D. Vamos mover isso um pouco para cima. Essa é a nossa lista de imagens centradas. Quando o usuário clica em HIIT, a idéia é que essas imagens para preencher com todos os exercícios ou exercícios que são marcados com HIIT, mesmo com cardio, e pesos. Eles serão preenchidos com base nas categorias que estão sendo clicadas. Por último, vamos criar uma navegação de guias. Navegação de tabulação, vamos pegar um retângulo como plano de fundo para nossa navegação de guias. Vamos pegar alguns ícones. Queremos ícone com rótulo, nós digitamos ícone, permite obter ícone com rótulo. Vamos adicionar isso e vamos procurar, então no painel de propriedades aqui e na seção de ícones, se você procurar um ícone e dizer home, ele irá adicionar o ícone home. Queremos que seja pequeno. Digamos que casa para este ícone, vamos duplicar isso. Vamos mudar isso para dizer, exercícios. Para isso, vamos mudar o ícone, talvez um ícone de estrela. Vamos duplicar isso de novo. Vamos chamar esse perfil, ou vamos chamá-lo de meu perfil. Talvez seja uma pessoa para isso. Lá vai você. Temos a nossa barra de abas com as nossas diferentes secções. Temos nossas imagens, que serão preenchidas com base na categoria selecionada, e temos nossa barra de botões, que os usuários podem clicar em diferentes categorias, e temos nossa barra de pesquisa no topo. Na próxima tela, o que faremos é criar a tela de detalhes do treino. Digamos que um usuário está no peso corporal, clica nesta imagem, diz que é um exercício de burpee, clica nisso e ele vai levá-los para os detalhes de burpees, aquele exercício específico ou tela de detalhes do treino. Vamos criar essa tela no próximo vídeo. 12. Reduza a tela de detalhes de treino: Vamos começar a criar nossa tela de detalhes do treino. Esta página exibirá os detalhes do exercício ou treino selecionado que você escolheu. Por exemplo, se você selecionou burpees na lista anterior de tela de treino, ele mostrará esse treino e detalhes sobre esse treino, como a descrição do treino, etc. Vamos começar a criar e adicionar elementos para esta tela. Vamos primeiro duplicar nossa lista de tela de treino para que já tenhamos nossa barra de guias na parte inferior, que precisaremos para esta tela de detalhes do treino. Vamos selecionar isso e vamos clicar no botão “Duplicar” na parte superior, que criará nossa nova tela. Vamos renomeá-lo e chamá-lo de detalhes do treino. Temos a nossa barra de abas. Vamos excluir todos os outros elementos. O que precisaremos para esta tela inicialmente será o botão de seta para trás. Vamos procurar ícones. Vamos para adicionar rapidamente e vamos clicar em “Ícone”. Nós não precisamos de um ícone com um rótulo, nós só queremos o ícone então vamos clicar duas vezes nele. Vamos adicioná-lo ao Canvas. Vamos procurar a seta. Queremos uma seta para trás, vamos usar essa flecha. Temos uma flecha aqui. Agora vamos procurar um título para a nossa tela. Vamos chamar isso de detalhes da aula. É muito grande, então vamos torná-lo muito menor. Vamos torná-lo como 16 pixels, e vamos centralizá-lo. Vamos duplicar isso e vamos ter um título para o nosso treino ou exercício. Vamos chamar este título de treino. Vamos fazer isso um pouco maior. Vamos dobrar de tamanho, fazer 32 pixels e centralizar isso. Então vamos ter uma imagem, a imagem principal para o treino. Vamos voltar aqui de novo. Aqui, caixa de imagem, estique isso. Agora queremos uma descrição para que as pessoas saibam do que se trata este treino. Vamos duplicar este. Vamos dimensionar isto para 18. Vamos chamar essa descrição e vamos centralizar isso. Vamos mandar uma mensagem. Não sabemos o que queremos que diga. Vamos apenas obter um bloco de texto apenas para que os usuários e as partes interessadas saibam que é aqui que a nossa descrição do treino irá seguir. Nós não sabemos o que o texto final vai dizer apenas faça o pedido por enquanto. Vamos centralizar isso. Sob isso, queremos um botão. Basta clicar em “Botões” aqui e vamos arrastar isso para dentro. Queremos que este botão diga “começar”. Ao clicar neste botão, isso iniciará o vídeo. Vai levá-lo para a tela de vídeo de treino, que é onde você pode começar a reproduzir o vídeo, começar a jogar o treino real. Aí está você. Uma vez que você vai para a lista de exercícios, você clica em um treino, levá-lo para os detalhes do treino. Você tem uma seta para voltar, você tem detalhes da classe para que você saiba onde você está no aplicativo, o título do treino, uma imagem, você tem uma descrição, título da descrição. Na verdade, só para ter certeza que alinhamos isso, vamos alinhar à esquerda. Nós temos um título de descrição e nós teremos sob que a descrição real do treino ou exercício, e então nós temos o nosso botão Iniciar. No próximo vídeo, vamos trabalhar na tela de vídeo de treino, que é onde você realmente vai reproduzir o vídeo, você pode terminar o vídeo. Ele mostrará a duração do vídeo, quanto tempo resta nesse treino. Vamos começar a trabalhar nessa tela. 13. Incorporar a tela de vídeo do treino: Vamos começar a criar uma tela de vídeo de treino. Esta tela exibirá um vídeo do treino ou exercício que você escolheu. Ele exibirá o tempo de duração do vídeo, e temos um botão para você terminar o treino. Vamos começar a criar e adicionar elementos para esta tela. Vamos criar um novo wireframe, e vamos chamá-lo de tela de vídeo de treino, e vamos procurar um símbolo iOS, iPhone 8 que criamos anteriormente. Vamos começar a adicionar nossos elementos a esta tela. Esta é uma tela de vídeo de treino na tela anterior. A tela de detalhes do treino é onde você pode iniciar o vídeo. Então, quando você clicar no botão “Iniciar”, ele irá levá-lo para esta tela aqui que irá reproduzir o vídeo real. Vamos procurar um player de vídeo, adicione isso. Vamos torná-lo um pouco maior. Centralize-o e vamos adicionar um título, e isso exibirá a duração, quero dizer quanto tempo resta no vídeo enquanto você está malhando. Vamos dizer oito minutos e 34 segundos. Vamos fazer isso um pouco maior. Vamos fazer 72, e vamos mover o vídeo um pouco para cima. Vamos fazer este 14. Vamos criar um botão que nos dará a capacidade de terminar o treino. Vamos procurar um botão. Vamos clicar duas vezes nisso, e vamos chamar isso de End Workout. Vamos torná-lo um pouco maior, e vamos centrá-lo, e aí está. Temos que adicionar uma imagem. Vamos adicionar uma imagem neste vídeo. Isto irá mostrar a nossa imagem. Digamos que você queira adicionar uma imagem real nesta caixa de imagem. Você pode fazer isso clicando no sinal de adição e, no computador, encontrar um vídeo. Eu tenho isto. Tenho alguns vídeos aqui. Vamos adicionar este. Eu devo ter carregado isso antes, então vamos dizer que existe, ou vamos usar um nome. Aqui vamos nós com nossa imagem, e queremos manter essa baixa fidelidade. Então o que podemos fazer é clicar no “Sketch it” e ele vai dar o campo esboçado, e agora temos nosso vídeo lá. Se você quiser cortar esta imagem, basta clicar neste botão “Cortar”, e você pode cortá-la assim. Você quer torná-lo menor, você quer maior, esse tipo de coisa. É assim que você pode adicionar algumas imagens e ainda manter uma baixa fidelidade. Clicamos no vídeo do botão “Play” para jogar, o tempo de duração aqui na parte inferior, e se tivermos que terminar o treino mais cedo, terminamos o treino. Termine o treino, ele o levará de volta à tela de detalhes do treino. Essa é a nossa tela de vídeo de treino. O que faremos a seguir é criar um protótipo de baixa fidelidade usando todas essas telas para que possamos entregá-lo às partes interessadas ou usuários para testar e ver se eles gostam do fluxo dele. Vamos trabalhar nisso no próximo vídeo. 14. Como conectar e apresentação no Balsamiq: Aqui estamos nós. Depois de criar nossa série de wireframes ou maquetes, agora estamos prontos para conectá-los para criar um protótipo. Neste vídeo, falaremos sobre vincular nossos wireframes e depois de vinculá-los, criar um protótipo e apresentá-los aos membros da equipe de design, aos usuários de testes ou às partes interessadas do projeto. Vamos começar. Nos vídeos anteriores, criamos um wireframe Criar uma Conta, Configuração de Perfil, wireframe Lista de Exercícios, um wireframe de Detalhes do Treino e um wireframe de Vídeo de Treino. Vamos começar a conectá-los para que possamos criar nosso protótipo de baixa fidelidade. Na tela Criar uma Conta, temos o título, o primeiro nome, e-mail, as entradas de texto de senha, termos de serviço que o usuário clicará e então eles clicarão no botão “Criar uma Conta”, que os levará para a tela de configuração do perfil. Para vincular isso à tela Configuração do perfil, vamos para a seção Link no painel Propriedades. Depois que o botão é selecionado e você verá que temos uma lista de maquetes de wireframe que criamos, com seus nomes que você também vê aqui à esquerda, também nesta área. Clicamos em Configuração de perfil. Agora, ele será vinculado à tela de configuração do perfil. Você também tem essas outras opções abaixo, Link para um endereço da Web, Link para um novo wireframe, Link para um duplicado deste wireframe. Voltar (em tela cheia), Sem link. Não vamos nos preocupar com essas opções de fundo aqui. Só vamos usar as melhores opções aqui. Agora vamos para a tela de configuração do perfil. Aqui temos o nosso nome que colocamos na tela Criar uma Conta, a seção de gênero, a altura, que você vai preencher, seu nível de fitness e os treinos que você pode gostar. Eles selecionariam o tipo de exercícios que normalmente gostam e, em seguida, clicarão no botão Continuar. Vamos selecionar o botão Continuar, voltar para a seção Link no painel Propriedades e vinculá-lo à Lista de exercícios. Vamos encontrar isso, Lista de tela de treino. Ok, agora, vamos para a tela Lista de Exercício. Você tem que procurar opção. Você tem suas categorias de exercícios que o usuário pode clicar para ver uma lista de exercícios com base nessa categoria e temos a Barra de guias na parte inferior. Quando o usuário seleciona um treino que gosta, ele será direcionado para a tela Detalhes do treino desse treino. Selecionamos um treino, voltamos ao painel Propriedades e o vinculamos à tela Detalhes do treino e você verá que esse pequeno ícone aparece para nos informar que ele está vinculado a outra tela. Agora vamos para a nossa tela de detalhes do treino. Assim que o usuário clicar no treino que selecionou, você acessará uma tela de Detalhes do Treino, que contém o título do treino, uma imagem do treino, uma descrição do treino e eles clicarão em “Iniciar”, para começar a ver o vídeo e começar o treino. Mais uma vez, vamos para o painel Propriedades e encontrar esse wireframe para vinculá-lo, que será chamado de tela de Vídeo de Treino e agora, por último, vamos também usar o botão “Voltar” e vamos vinculá-lo de volta à tela Lista de Treino. Enquanto estamos nisso, vamos fazer nossas Tabs também. Nossa guia pode ir para Lista de Exercícios. Vamos fazer a mesma coisa na tela Detalhes do Treino, com a guia, que voltará para Lista de Treinos e nossa última tela é o Vídeo do Treino. Quando o usuário clicar em Iniciar, ele irá para a tela de vídeo de treino, mostrará o vídeo, a duração do vídeo e sua capacidade de terminar o treino. Aqui, vamos apenas criar um link para Terminar o Treino, que o levará de volta aos Detalhes do Treino. Ok, vamos ligar isso, ele vai levá-lo de volta para os detalhes do treino, e aí está. Nós ligamos todas as nossas telas. Agora que temos todos os nossos wireframes ligados, eles agora se tornarão um protótipo clicável, uma vez que os exportamos. Agora, queremos exportá-los como um PDF e para fazer isso, você quer ir para o topo e clique em “Arquivo” e selecione “Exportar para PDF”. Clique nisso e você verá as opções de como deseja exportar seus wireframes. Deseja selecionar Todos os Wireframes? Deseja apenas exportar o Wireframe atual? Ou você deseja apenas selecionar um conjunto específico de wireframes? Agora não queremos exportar todos os wireframes, porque isso exportaria o Persona, o Storyboard e o User Flow. Nós só queremos selecionar a opção, “Um conjunto de wireframes”. Nós clicamos nisso e agora vamos selecionar os wireframes que queremos exportar. Queremos criar uma conta, configuração de perfil, lista de treinos, detalhes do treino e vídeo de treino. Depois disso, normalmente seleciono Otimizar para visualização na tela. Depois disso, seleciono Mostrar dicas de vinculação e Adicionar nomes de wireframe. Ok, agora estamos prontos para exportar para PDF. Basta clicar nesse botão. Outra opção que temos, é não apenas exportar esses wireframes para um PDF, mas apresentar esses modelos, resolução insolúvel em tela cheia. Se você não queria que as partes interessadas, os membros da equipe de design, ou usuários de teste, realmente testassem por conta própria, mas em vez disso, você deseja demonstrar o protótipo para eles, você clicará no botão “Apresentação em tela cheia” aqui no canto superior direito e que irá mostrar a sua maquete no modo de tela cheia. Como você vê, à medida que você rola sobre áreas clicáveis, ele nos mostrará uma dica, girando este tom de vermelho e que o botão é clicável. Clique nos botões ativos para clicar no modo de demonstração e apresentação. Para sair do modo de tela cheia, você clicará no botão “Escape” e isso o levará de volta ao seu conjunto de wireframes. Essas são as duas maneiras de apresentar seus wireframes, como uma apresentação em tela cheia ou exportá-los como um PDF clicável. Na próxima lição, vamos rever o protótipo PDF que criamos. 15. Apresentação de protótipo em PDF no Balsamiq: Criamos nosso arquivo PDF protótipo na lição anterior. Vamos dar uma olhada nesse arquivo. Este é o protótipo de baixa fidelidade em formato PDF que você enviará um teste de usuários, seus membros da equipe de design ou partes interessadas do seu projeto. Olhando para este arquivo, estamos na tela de criar uma conta. Herr os usuários digitariam seu nome, e-mail e senha. Em seguida, eles clicariam no botão “Criar uma conta”. Agora estamos na tela de configuração do perfil. Os usuários entrarão se eles são homens ou mulheres, sua altura, seu nível de fitness e o tipo de exercícios que eles gostam e, em seguida, eles clicarão em “Continuar”. Aqui estamos na lista de tela de treino. Esta tela divide os treinos no aplicativo em categorias com essas categorias: peso corporal, HIIT, cardio e pesos. Qualquer que seja a categoria selecionada, uma lista de treinos pertencentes a essa categoria é exibida na área de conteúdo principal. Digamos que você selecione um treino e, em seguida, você será levado para a tela inicial desse treino, onde você verá o título desse treino, uma imagem desse treino, uma descrição do treino e um botão “Iniciar” onde se você clicar nele, ele começará a reproduzir o vídeo do treino. Na parte inferior da tela, temos a barra de abas onde os usuários podem navegar para a tela inicial, tela de treino e visualizar seu perfil. Na parte superior, há um botão de seta onde os usuários podem voltar para a tela anterior. Vamos clicar em “Iniciar”, e agora você será levado para a tela de vídeo do treino. Agora você está na tela de vídeo do trabalho fora, que exibe um player de vídeo, o tempo decorrido do vídeo que contará regressivo à medida que o vídeo é reproduzido para mostrar ao usuário quanto tempo resta no treino, e um fim do para os usuários clicarem apenas no caso de eles não conseguirem terminar o treino por algum motivo. Este é o protótipo PDF. Isso é o que o protótipo seria parecido em formato PDF se você fosse enviá-lo para usuários de teste, membros da equipe de design ou partes interessadas do projeto para obter feedback deles. 16. Sobre o projeto no Adobe XD: Para este projeto, vamos criar um conjunto de wireframes em torno de cinco. Então pegue esses wireframes e faça um protótipo de baixa fidelidade com eles. O projeto pode ser um aplicativo móvel de sua escolha. Eu tenho um projeto de exemplo que eu criei para o curso. Durante o curso, vou repassar os passos que dei para criar esses wireframes e protótipos para que você possa ver como eu faço isso. Você pode usar isso como um modelo para o seu projeto. Você não precisa de nenhuma experiência prévia com o software Adobe XD, pois fornecerei rapidamente uma visão geral sobre como usá-lo ao longo do curso. O projeto final é algo que você pode usar em seu portfólio para mostrar aos clientes, membros da equipe de design ou até mesmo potenciais empregadores. Quando você olha para descrições de trabalho de designer de UX, ser capaz de criar wireframe e protótipo é muitas vezes nessas descrições. Esta é uma habilidade que realmente vai ajudá-lo em seu trabalho atual ou se você está procurando o próximo UX Job. Adobe XD é uma ferramenta muito popular que muito do departamento de UX para usar hoje em dia. 17. Personas e fluxo do usuário no Adobe XD: Antes de começarmos a criar nossos wireframes, criei um usuário experiente e um fluxo de usuário para mostrar um pouco sobre os documentos que geralmente fazem parte do processo de design. Fiz duas personas, uma macho e uma fêmea. Ambas as personas foram desenvolvidas para que quando você está passando pelo processo de wireframe, você esteja fazendo isso com usuários específicos em mente. Essas personas são chamadas Jennifer e Chris. Essas personas estarão disponíveis para download para que você possa usá-las como modelo quando começar a trabalhar em seu projeto wireframing. Abaixo das personas, temos um exemplo de fluxo de usuário. Isso nos ajuda a entender a jornada que o usuário percorrerá quando criarmos nosso conjunto de wireframes. Nesta jornada, o usuário criará uma conta, configurará um perfil de usuário, escolherá uma lista de treinos; haverá uma tela de detalhes do treino e, em seguida, o usuário verá um vídeo do treino. Este é o nosso fluxo de usuários e vamos criar cinco telas com base nesse fluxo. Em seguida, vamos ligá-los juntos para criar um protótipo de baixa fidelidade que pode ser testado pelos usuários. 18. Visão do Adobe XD: Neste vídeo, vamos analisar rapidamente as ferramentas do Adobe XD. A configuração é semelhante a outras ferramentas de design, como Sketch e Figma. À esquerda, você tem as ferramentas de design. Temos a ferramenta de seleção, a ferramenta de retângulo, a ferramenta de elipse e a ferramenta de polígono onde você pode criar formas na tela de desenho. Temos a ferramenta de linha abaixo disso, juntamente com a ferramenta de caneta. Sob isso temos a ferramenta de texto, que nos permite adicionar texto aos nossos projetos. Sob isso, temos a ferramenta de prancheta. Quando selecionada, vemos à direita todas as pranchetas diferentes que podemos usar para nossos designs. Há pranchetas para designs móveis, tablets, desktop da Web e pranchetas de mídia social para criar designs para o Instagram e Facebook e, em seguida, pranchetas também para criar designs para o Apple Watch. Sob isso, temos a ferramenta de zoom. No canto inferior esquerdo temos ícones que representam bibliotecas, camadas e plug-ins. As bibliotecas são onde vivem as cores, estilos de caracteres e componentes do seu projeto. Camadas mostram as diferentes camadas de nossos projetos e plugins é onde adicionamos novos plugins ao nosso projeto ou visualizamos plugins que temos atualmente em nosso projeto. No centro superior, você tem um menu suspenso onde você pode renomear seu projeto. No canto superior esquerdo há seções para design, protótipo e compartilhamento. A seção de design exibe nossas ferramentas para criar nossos projetos. A seção de protótipos nos permite criar um protótipo de nossos projetos. Então, se você selecionar uma prancheta, você verá que ela é destacada em azul e uma seta aparecerá. Esta seta nos dá a capacidade de clicar e arrastá-la para outra prancheta. Depois de clicar e arrastar a seta para vinculá-la a outra prancheta, o painel de propriedades à direita ficará ativo. Bem, agora temos opções sobre como a ligação a essa outra tela será acionada. Será um toque, um arrasto, tempo, teclas e joypad, ou voz? Sob isso, você pode selecionar o tipo de transição que deseja. Você tem animação automática, sobreposição, prancheta anterior, reprodução de áudio e reprodução de voz. Sob isso, você tinha a seção de destino, que é onde você decide qual prancheta é a prancheta de destino. Você pode alterar qual prancheta será vinculada a partir daqui. Sob isso temos os vários tipos de animações que podemos selecionar, como dissolver, deslizar ou empurrar. A seção de compartilhamento nos permite criar um link para que seu protótipo seja compartilhado com outras pessoas. Você pode selecionar as configurações de exibição, como revisão de design, desenvolvimento, apresentação, teste de usuário ou personalizado. Sob isso, você pode conceder acesso a qualquer pessoa com o link apenas convidados pessoas ou qualquer pessoa com uma senha, e depois de fazer essas seleções, você clicará no botão criar link, que irá então criar um link que pode ser compartilhados. No canto superior direito, você tem ícones para convidar colaboradores para acessar e editar seu documento. Visualização do dispositivo, onde você pode visualizar designs em um dispositivo conectado USB. Em seguida, você tem o botão de apresentação da área de trabalho onde você pode visualizar e interagir com seu design. À direita temos o painel de propriedades. Portanto, quando você seleciona um elemento ou adiciona um elemento à tela, o painel de propriedades à direita se torna ativo. Como você pode ver, você pode alinhar seus itens na seção superior aqui. Sob que você tem a opção de repetir grade e criar formas usando ferramentas booleanas à direita disso. Sob isso, você tem uma seção onde você pode criar componentes para o seu projeto. Em seguida, você tem uma seção onde você pode transformar seus elementos de design. Você tem uma seção de layout onde você pode tornar os elementos em seu design responsivo. Você tem uma seção para o seu texto onde você pode alterar a fonte, a cor da fonte, o tamanho da fonte, etc. Essa é a minha visão geral rápida para o Adobe XD. É realmente uma ótima ferramenta para usar para design de UX e UI. 19. Crie uma tela de conta no Adobe XD: Vamos começar a criar nossos wireframes. Antes de começar, XD juntamente com outras ferramentas de design oferecem a opção de criar um wireframe ativos ou elementos você mesmo, ou você pode baixar um kit de interface do usuário wireframe com elementos pré-fabricados e apenas personalizá-los a partir daí. Nós vamos fazer o download de uma rota de kit wireframe UI neste curso. Isso torna a tarefa de fazer wireframes muito mais rápido e muito mais fácil. Para baixar um kit de wireframe no XD, você iria ao menu Arquivo e, em seguida, vá para Obter kits de interface do usuário e selecione “Wireframes”. A partir daí, você será levado para uma página da Web onde você pode baixar o kit wireframe. Clique no link de kits de download, que fará o download das versões web e móveis do kit wireframe. Depois de baixá-los, encontre esses downloads em seu computador e clique duas vezes no arquivo XD da versão móvel. Uma vez aberto, você verá uma grande variedade de elementos wireframe que podem ser usados a partir de formulários de inscrição de amostra, telas de perfil, filtro e pesquisa, e muito mais. Antes de começarmos a usar isto, gostaria de manter os meus elementos de arame tão baixa fidelidade quanto possível. Ou seja, em vez de ter essas cores azuis eu gosto de manter tudo em tons de cinza para que cor não seja uma distração ao projetar os wireframes, ou não é uma distração também para os usuários quando eles estão testando nosso eventual protótipo. Vamos mudar o esquema de cores deste kit wireframe para escala de cinza. No canto inferior esquerdo, você verá um conjunto de ícones para bibliotecas, camadas e plugins. Clique no ícone da biblioteca e um novo painel será exibido. Este painel irá exibir os estilos de caracteres do kit de interface do usuário, estilos de cores, etc. Vamos até as cores e, se ele estiver fechado, você pode abri-lo clicando na seta e você verá os estilos de cores para o kit. Quando mudamos as cores aqui, ele fará todas as alterações de cor necessárias em todo o documento. Vamos mudar a primeira cor. Se você clicar com o botão direito do mouse na cor, um menu aparecerá com a opção editar cor. Vamos selecionar isso. Agora, nós apenas puxamos nossa cor que você vê atualmente está em azul. Nós puxamos isso para o equivalente em tons de cinza, que será bem aqui. Agora temos nossa cor cinza mais escura aqui, e ela começará a fazer as mudanças de cor em todo o nosso documento. Vamos diminuir um pouco para que essas cores sejam atualizadas, possamos vê-las. Agora, vamos pegar nossa segunda cor azul, vamos clicar com o botão direito do mouse, clicar em “Editar”, vamos puxar esta aqui para a direita. Como você vê, nossas cores estão trocando e mudando. Vamos pegar nossa cor azul claro aqui e vamos puxar isso até aqui. Novamente, você vê que nossos wireframes estão mudando a escala de cinza com cada mudança nesta última cor azul claro, nós podemos mudar e apenas adicionar isso aqui. Temos o paladar em tons de cinza. Algumas dessas cores terão que atualizar manualmente e podemos fazer isso mais tarde se realmente usar qualquer coisa nesta seção de menu ou nesta seção de mensagens ou até mesmo esses popovers. Vamos começar a criar nossa tela de criação de uma conta. Essa será a primeira tela que criaremos em nosso conjunto de wireframes. Vamos clicar em, vamos voltar ao nosso documento wireframing, e vamos adicionar uma prancheta. Se você pressionar “A” no seu teclado, você verá o painel à direita, mostrará uma variedade de pranchetas que você pode criar a partir de dispositivos móveis, tablets, web desktop, redes sociais, etc. Vamos fazer o iPhone X para nossos wireframes e vamos arrastar isso para baixo aqui abaixo do nosso fluxo de usuários. Vamos ampliar um pouco. Esta será a nossa tela criar uma conta que vamos começar com, vamos realmente chamar esta prancheta, criar uma conta. Vamos começar a pegar alguns elementos do nosso kit de wireframe móvel que baixamos. Vamos voltar para fios móveis e vamos pegar uma seção onde nosso logotipo seria alojado. Temos uma seção de inscrição que é o que queremos, nossa tela de criar uma conta será sobre ter o usuário se inscrever. Podemos pegar esta seção aqui, vamos apenas copiá-la. Volte para nossos wireframes e podemos simplesmente colá-lo. Digamos que este é o lugar onde o nosso logotipo vai ficar. Vamos voltar aos fios, e vamos procurar criar uma seção de conta. Vamos ampliar. Isto parece muito bom. Vamos pegar isso criar uma conta e vamos selecionar essas caixas de entrada também. Vamos voltar aos nossos fios, kit wireframe e vamos procurar uma seção de inscrição onde podemos criar uma conta, campos de entrada e criar um cabeçalho de conta. Vamos pegar este cabeçalho aqui, bem, nós podemos apenas pegar este cabeçalho aqui. Vamos voltar aos nossos wireframes e adicionar o centro. Vamos voltar aos fios e encontrar alguns campos de entrada. Acho que isto é bom aqui. Na verdade, poderíamos pegar isso e criar uma conta. Vamos voltar para wireframes e vamos colar esses campos de entrada aqui, e queremos nome completo, e-mail e senha, e confirmar senha. Isso é perfeito. Vamos voltar e procurar os termos de serviço e temos um aqui. Vamos voltar e colar isso. Vamos adicionar isso abaixo e vamos ter certeza de que está centrado ok, e vamos procurar um botão onde podemos ter um botão Criar uma conta que o usuário irá clicar uma vez que eles preencheram o formulário. Deixe-me pegar esse botão Continuar aqui e vamos adicionar isso. Vamos mudar isso para criar uma conta, e vamos dizer que queremos um botão para um usuário se ele já tem uma conta que pode apenas fazer login. Vamos com isso, já temos um login de conta, e vamos pegar esses elementos e colá-los em nosso documento. Vamos trazer algumas coisas para cá. Vamos mover estes para cima. Termos de serviço, criar uma conta. Aqui vamos nós. Veja como isso foi rápido. Com elementos pré-fabricados no kit de interface de usuário wireframe já feito, tornou a criação da nossa primeira tela wireframe muito fácil. Apenas uma questão de mudar as cores para baixa fidelidade se você quiser que, voltando para o kit wireframe UI e copie e cole os elementos que você precisa colá-los em seu wireframe Canvas. Esta é a nossa tela de criação de uma conta. Temos o logotipo, criar um cabeçalho de conta. O usuário inserirá seu nome completo, seu e-mail, uma senha e confirmará sua senha e, em seguida, criará uma conta. Se eles já têm uma conta, vamos mover isso para baixo. Se eles já têm uma conta, então eles vão clicar em login e eles serão levados para uma tela de login. Não vamos usar esse fluxo. O fluxo que vamos fazer agora é apenas criar uma conta que é aqui onde dizemos que começamos, você tem uma conta? - Não. Crie uma conta, configure seu perfil, escolha a partir de uma lista de treinos, detalhes do treino , etc Este é o fluxo que estamos indo com aqui e a primeira tela desse fluxo é criar uma conta, que temos aqui. Nossa próxima tela que criaremos é configurar sua tela de perfil. Faremos isso no próximo vídeo. 20. Tela de configuração de perfil no Adobe XD: Vamos criar nossa próxima tela, que será a tela de configuração do perfil. Vamos criar uma nova tela, vamos apenas duplicar nossa tela Criar uma conta pressionando Comando D, e vamos renomear isso para Configuração de Perfil, e vamos nos livrar de alguns dos elementos que estão aqui para que possamos começar de novo. Vamos ficar com estes por enquanto porque podemos acabar precisando deles. Assim, o usuário criará uma conta preenchendo seu nome, e-mail e senha e, em seguida, criará uma conta. Digamos que eles criaram uma conta, sua própria configuração de perfil e seu nome aparecerão na parte superior. Digamos que o nome é John Doe. Vamos centralizar isso. Nas propriedades aqui, você verá que pode alinhar à esquerda, centralizar ou alinhar à direita, e vamos ao centro alinhar John Doe, em seguida, colocá-lo aqui. Como você pode ver, ao clicar em um elemento, aqui você tem o painel de propriedades para esse elemento à direita. Nós temos isso aqui. Vamos ver qual é o tamanho da fonte. Vamos mantê-lo em 20, isso deve ser bom. Aqui na tela de configuração do perfil, queremos uma seção para que os usuários possam selecionar seu gênero, sua altura, seu nível de fitness, e eles podem selecionar o tipo de exercícios que gostam, e então eles clicarão,” Continuar”. Temos o nome da pessoa aqui. Vamos adicionar uma seção onde eles podem selecionar seu gênero. Vamos voltar para os fios, wireframes móveis e vamos rolar para fora. Vamos ver se conseguimos encontrar alguma coisa com [inaudível] Basta pegar este botão de rádio aqui e vamos colar isso. Digamos que isso diz, macho e então vamos duplicar isso, Comando D e digamos que isso diz, fêmea. Certo, vamos pegar os dois. Vamos movê-los um pouco e vamos duplicar este desconhecido para que possamos dar um título a esta seção. Vamos chamar esse gênero e vamos torná-lo um pouco menor. Vamos fazer 18 pontos. Vamos mover estes de volta. Vamos dar um cólon aqui no final, e vamos mudar a cor disso porque eu não quero que essas duas cores sejam iguais. Vamos deixar isto um pouco mais leve. Vamos voltar aos fios e veremos que temos todas as nossas cores aqui. Vamos pegar uma cor. Podemos copiar esta cor hexadecimal aqui. Vamos voltar e adicionar essa cor na seção de preenchimento. Lá vamos nós. Agora, se formos para as cores da biblioteca, não temos nada em nossa seção de cores. Vamos começar a adicioná-los em nossas cores de documento. Vamos clicar duas vezes nisso e vamos adicionar essa cor, então agora temos essa cor adicionada. Vamos aqui, e vamos adicionar esta cor. Agora podemos apenas clicar nessas cores à medida que passamos para adicioná-las quando precisarmos delas. Certo, então temos nossa seção de gênero. Vamos agrupar estes, Comando G. Nós agruparemos. Isso não é o centro, queremos que eles fiquem alinhados, mas essa é a nossa seção de gênero. Vamos duplicar isso. Mova isso para baixo, e esta próxima seção será a seção de altura. Digite altura, e queremos que fique alinhado à esquerda, e o que queremos aqui são campos de entrada de texto, não botões de opção. Então vamos nos livrar dos botões de rádio. Queremos que isso realmente seja pés, e queremos que isso seja polegadas e então vamos pegar um campo de texto. Podemos pegar este aqui na tela “Criar Conta” e vamos colar isso aqui e então vamos dimensioná-lo para baixo e torná-lo menor. Talvez algo assim aqui. Podemos adicionar isso ao pé. Então agora o usuário vai digitar lá a quantidade de pés que eles são, cinco pés, seis pés lá e vamos duplicar isso e dar-lhe um para polegadas também. Vamos ver onde estão todas as nossas camadas. Vamos adicionar esses campos de entrada a este grupo. Agora que podemos mover isso, então temos nossa seção de altura. Vamos espaçar isso um pouco. Tudo bem, então agora vamos adicionar um nível de fitness. Vamos duplicar o gênero novamente, e vamos chamar isso de nível de fitness. Tenho que lembrar de deixar essas coisas alinhadas. O que queremos é, queremos que o usuário seja capaz de selecionar se ele é um iniciante, experiente. Vamos duplicar isso novamente, Comando D e dizer, “Esta opção é avançada”. Então, esses estão todos alinhados. Vamos mover isso um pouco para baixo. Tudo bem, então nós temos o nome, nós temos o sexo que eles escolheriam, eles iriam adicionar sua altura, seis pés, dois centímetros, por exemplo. Nível de fitness, selecione se você é iniciante, experiente ou avançado. Agora queremos ter uma seção onde descobrimos o tipo de exercícios que eles gostam. Vamos apenas copiar isso e vamos colá-lo e vamos dizer que este cabeçalho será exercícios que você gosta. Precisamos de algumas imagens. Vamos mover isso para baixo. Precisaremos de algumas imagens que atuem como detentores de lugares para os treinos tipo. Por exemplo, talvez tenhamos uma seção de cardio, uma seção de peso, uma seção HIIT e uma seção de peso corporal, e eles escolheriam quais desses exercícios gostam. Vamos voltar para os fios, kit de arame e vamos encontrar alguns cartões, talvez. Vamos ver se há algum cartão aqui que possamos pegar. Vamos diminuir o zoom. Vamos ter uma visão melhor. Vamos passar por aqui para esta seção e vamos apenas pegar alguns cartões de nossa seção de elementos de interface aqui e vamos copiar isso. Vamos voltar para o nosso wireframe e vamos apenas colar isso. Vamos nos livrar desse texto de baixo aqui, e vamos chamar isso de cardio. Vamos mudar a cor disto. Vamos centralizar o nome, cardio e duplicar isto. Mova isso, e esta será uma seleção de pesos. Vamos pegar os dois e no centro. Vamos movê-lo um pouco para cima. Vamos mover nosso botão criar uma conta para baixo, e vamos duplicar esta linha. Trazê-lo aqui, parece que temos que mover um monte de coisas para cima. Vamos mover algumas coisas para que possamos ter algum espaço. Certo, vamos chamar isso de HIIT, e isso será exercícios de peso corporal. Se eles gostarem deles, eles podem selecionar isso. Podemos fazer esta tela um pouco mais para termos mais espaço. Se você selecionar um quadro e, em seguida, agarrar a parte inferior, você pode alterar a altura do quadro de arte. A mesma coisa com a largura. Você pode mudar a largura, mas nós não queremos fazer isso. Então vamos fazer isso um pouco mais. Desta forma, podemos mover o botão para baixo e as coisas não são tão esmagadas juntas, dar-lhe algum espaço. Selecione esta seção e mova-a para baixo, selecione isso e mova-a para baixo. Arranja um pouco de espaço aqui. Aqui só queremos que nosso botão diga: “Continue”. Então essa é a nossa tela de configuração de perfil. Agora temos duas telas. Temos a tela de criar uma conta. Se eles criarem uma conta, ela os levará para a configuração do perfil, onde seu nome será preenchido a partir do campo de entrada de nome completo aqui. Em seguida, eles selecionavam seu gênero, adicionavam suas informações de altura, que nível de fitness eles são e o tipo de exercícios que eles gostam. Em seguida, eles vão clicar em “Continuar” e eles vão para a próxima tela, que será a nossa lista de telas de exercícios. Então, vamos criar a lista de tela de treino em nosso próximo vídeo. Mas estas são as duas primeiras telas que temos atualmente em nosso conjunto wireframe de maquetes. Então temos Criar uma conta e configurar o seu perfil. Novamente, criaremos a lista de telas de treino no próximo vídeo. 21. Lista de tela de exercícios no Adobe XD: Agora, vamos criar nossa tela Lista de exercícios. Temos nossas duas telas que criamos em vídeos anteriores, Criar uma Conta e Configuração de Perfil. Agora vamos criar nossa terceira tela, a tela Lista de exercícios. Vamos duplicar Criar uma Conta. Vamos renomeá-lo para Lista de Exercícios. Vamos nos livrar de alguns dos elementos para que possamos começar do zero. Nesta tela, temos a tela Lista de Treino. Queremos uma barra de pesquisa, lista de tipos de exercícios onde os usuários clicarão em um dos botões de categoria, e agora exibirá uma lista de exercícios com base nessa categoria. Por exemplo, se você clicar em “HIIT”, a categoria HIIT exibirá uma lista de exercícios HIIT. Se você selecionar “Pesos”, ele selecionará um conjunto de exercícios exibindo seus exercícios com pesos. Se você selecionar “Cardio”, por exemplo, essa categoria exibirá uma lista de trabalhos cardio. Sob isso, você também clicará em “Continuar” novamente, e teremos uma barra de abas na parte inferior, que todos os usuários podem voltar para a tela inicial, eles podem ir para a tela de perfil e podem ir para a Lista de exercícios tela. Vamos apenas criar esta tela Lista de exercícios agora. O primeiro elemento que precisamos é de um campo de pesquisa no topo, o usuário possa procurar, se quiser um treino específico, digamos burpees, eles podem procurar burpee. Coloque burpee na caixa de pesquisa, e isso irá preencher uma lista de exercícios que inclui exercícios de burpee. Vamos voltar para a tela do wireframe. Vamos até filtros e procurar. Vamos procurar um campo de busca. Podemos pegar este. Isto parece bom. Volte para nossos wireframes, e vamos adicionar isso ao topo. Em seguida, nossa próxima seção, vamos procurar um título para a nossa barra de categoria. Vamos para elementos de interface do usuário e ver se há algo lá. Provavelmente podemos usar isto. Vamos adicionar isto. Vamos procurar cabeçalho de algum tipo que poderíamos usar. Eu poderia copiar isso, duplicá-lo, e apenas dimensioná-lo para baixo. Faça 14. Vamos fazer 16. Vamos chamá-lo de tipo de treino. Vamos fazer o tipo de treino, e então teremos uma lista de botões. Vamos voltar ao nosso kit de arame. Vamos para elementos de interface do usuário. Vamos pegar alguns botões. Vamos pegar esse botão normal aqui. Vamos copiar isso. Cole isso em nosso wireframe. Vamos dimensioná-lo para baixo. Então queremos três deles, então faça a largura, digamos, 100. Digamos que este primeiro botão dirá HIIT. Vamos duplicar isso, e este segundo treino vai dizer Pesos. Vamos duplicar isso de novo, e este vai dizer Cardio. Sob isso, vamos exibir uma lista de exercícios com base na categoria. Você seleciona HIIT, ele mostrará uma lista de treinos HIIT. Vamos pegar um cartão aqui e vamos adicionar isso como um suporte de lugar. Mostre exercícios, vamos mostrar isso como Burpees. Vamos centralizar isso. Vamos duplicar isto. Digamos Cardio. Vamos duplicar essa fila para baixo. Digamos que este é o Core Cardio. Este vai dizer Treinamento de Força. Vamos mudar as cores. Digamos que o tipo de treino HIIT é o padrão. Selecionado por padrão, então vamos [inaudível] cor desta. Esta é a cor ativa. Sob tudo isso, queremos ter um botão que diga Continuar. Você procura treino, se você tem um treino específico em mente, digamos flexões. Exiba as flexões aqui ou você pode ir por tipo de categoria. HIIT irá mostrar, você os treinos HIIT. Isso mostrará o mesmo aqui. Se Pesos, ele mudará para essa cor, e mostrará uma lista de exercícios com pesos, e assim por diante com Cardio. Vê? Agora queremos uma barra de abas na parte inferior. Vamos voltar para a tela dos fios e ver se temos uma barra. Um bar aqui. O que mais? Use esse bar aqui. Essa será a nossa barra de abas, e nos preocuparemos com quais seções estarão lá mais tarde. Esta será a nossa barra de abas que podemos clicar para trás e para frente com base no link nas guias. Podemos navegar em direção a diferentes telas em nosso fluxo. Nós não vamos necessariamente fazer todas essas telas, então nós realmente não precisamos de todos esses botões agora, mas nós podemos corrigir isso mais tarde. Mas esta é a nossa lista de exercícios. Então temos Criar e Treino, Configuração de Perfil e Lista de Exercícios, barra de pesquisa, botões de categoria de tipo de treino. Então, a partir daí, temos nossa exibição de exercícios com base nessa categoria, barra de continuação e nossa barra de guias. Na próxima tela, criaremos nossa tela de detalhes do treino. Digamos que este treino HIIT, você seleciona burpees, e você será levado para uma tela de detalhes do treino, que mostra esse exercício de burpee. 22. Tela de detalhes de treino no Adobe XD: Neste vídeo, vamos criar a tela de detalhes do treino. Esta tela terá os detalhes sobre o treino que o usuário selecionou na tela anterior. Então teremos um título de treino, teremos uma imagem de suporte para o vídeo, uma descrição sobre o vídeo e um botão de início. Vamos continuar e criar esta tela. Vamos duplicar a tela de criação de uma conta, então vamos nos livrar dos itens que não precisamos. Vamos começar a criar esta tela. Primeiro precisamos de um botão Voltar para voltar à lista de tela de treino. Antes de fazermos isso, vamos nomear esta prancheta aqui, detalhes do treino. Ok, então vamos precisar de um botão de volta. Apenas no caso de você usuário, ele quer obter de volta a lista de tela de exercícios. Vamos pegar uma flecha. Vamos para os fios móveis e vamos olhar sob elementos da interface do usuário, vamos procurar uma seta, seta para trás. Podemos usar qualquer flecha, mas vamos usar isso. Vamos ampliar e agarrar esta flecha. Vamos voltar para a nossa tela. Vamos adicionar isso e vamos ter um título para esta tela. Vamos duplicar isso, vamos movê-lo para cima e vamos chamar essa tela de detalhes da classe e vamos dimensionar isso para baixo. Vamos fazer com que diga 14 e vamos centrar e ter um título. Portanto, o texto de espaço reservado para agora, vamos chamá-lo de título de treino. Centralize esse texto. Agora centralizado alinhado e centralizá-lo na tela e agora precisamos de uma imagem de espaço reservado bem aqui. Então vamos voltar aos fios e ver se conseguimos encontrar uma imagem do suporte do lugar. Vamos rolar para fora e ir para elementos de interface do usuário e aqui está uma imagem que podemos usar como espaço reservado. Vamos colocar isso em nossa tela e vamos centralizar isso. Vamos nos livrar desses elementos de log in, não precisamos deles. Vamos mover isso para baixo. Vamos mudar a cor disso e vamos adicionar essa cor. Se você clicar duas vezes e vir a cor de preenchimento aqui, você pode adicionar isso, modo que irá adicionar uma nova cor na sua paleta de cores. Agora podemos simplesmente clicar nele, clique na cor da mudança, as cores que precisamos delas. Tudo bem, então agora vamos encontrar uma descrição. Vamos adicionar uma descrição aqui. Vamos voltar aos fios e encontrar uma descrição. Parece que temos algo aqui. Vamos apenas selecionar isso, vamos copiá-lo, vamos voltar aos nossos quadros de arame e vamos colar isso. Vamos nos livrar desse corpo pequeno e pegar essas alças. Você pode alterar a largura do texto. Vamos centralizar isso. Agora vamos usar este botão, vamos mudá-lo para dizer “começar”. Assim, o usuário clicaria nisso para levá-los para a tela de vídeo real, onde eles podem começar a reproduzir o vídeo e começar a fazer seu treino. Vamos adicionar bem essas barras de guias a esta tela. Por isso, temos a nossa tela de detalhes do treino. Então, aqui na lista de treinos, um usuário clicará em uma categoria, digamos HIIT, eles terão uma exibição dos treinos de sucesso nessa categoria. Por exemplo, digamos que estes são burpees, treino HIIT. Você clica nisso, você vai para a tela de detalhes do treino, que acabamos de criar. Que terá um lugar titular dessa imagem de vídeo, que terá uma imagem de espaço reservado do vídeo que será exibido, que terá uma descrição e vamos mudar isso para dizer título da descrição e vamos ousar isso. Então, temos um título de descrição, algum texto de espaço reservado que descreveremos o que esse treino será sobre, e um botão de início. Você clica no botão Iniciar, ele vai levá-lo para a próxima tela, que será a tela de vídeo de treino e vamos criar isso no próximo vídeo. 23. Tela de vídeo no Adobe XD: Vamos criar nossa última tela, a tela de vídeo de treino. Nesta tela teremos o vídeo onde você pode clicar no botão “Reproduzir”, ele começará a reproduzir o vídeo e teremos um botão Fim do Treino, que permite que um usuário termine o treino se tiver que terminar rapidamente por qualquer motivo. Vamos começar a criar a tela. Vamos duplicar prancheta ou podemos apenas criar outra prancheta clicando neste ícone aqui. Vamos fazer outro iPhone 10. Vamos chamar este vídeo de treino da prancheta e vamos procurar um espaço reservado para vídeo. Vamos voltar para o Wires-Mobile. Vamos diminuir o zoom e rolar para baixo até fotos e vídeos. Vamos encontrar um vídeo, vamos copiar isto. Esta é uma boa. Volte para os nossos Wireframes. Vamos colar isso e isso é bom. Vamos pegar um botão, copiar isso da tela de detalhes do treino, colá-lo aqui e mudar o nome para End Workout. Se o usuário tiver que terminar o treino mais cedo, ele pode simplesmente clicar em um botão para fazê-lo. Vamos descobrir como um tempo de vídeo duração. Podemos encontrar isso. Ele permite que o usuário saiba quanto tempo resta no vídeo, quanto tempo passou, etc Vamos descer aqui e copiá-lo e vamos adicionar isso à nossa tela. Vamos mover isso para cima. Vamos agrupá-lo. Se quisermos agrupar, nós Comando G. Agora, vamos chamar de duração do tempo ou algo assim e agora podemos mover esses elementos facilmente. Acho que, na maior parte, foi por isso que fomos para a tela. Você começa a esta tela pelo usuário em estar nos detalhes do treino. Eles têm a descrição do título do treino e clicam em “Iniciar”. Em seguida, isso os levará para a tela de vídeo de treino aqui, onde eles podem reproduzir o vídeo. O vídeo será reproduzido e, em seguida, eles verão quanto tempo passou, quanto tempo resta. Em seguida, eles podem terminar o treino se eles precisarem terminar cedo primeiro por qualquer motivo. Se eles terminarem o treino mais cedo, eles clicam no botão e isso os levará de volta à tela Detalhes do treino. Estas são as nossas cinco telas, criamos todas as cinco; Criar uma Conta, Configuração de Perfil, Lista de Exercícios, Detalhes do Treino e Vídeo de Treino. Em nosso próximo vídeo, começaremos a protótipo, onde criaremos um protótipo de baixa fidelidade, ligando todas essas telas juntas para que quando você clicar em um botão ou qualquer ação em cada tela, ele o levará para a próxima tela. Isso permitirá que nossos membros da equipe de design ou nossos usuários de teste ou as partes interessadas do projeto sejam capazes testar rapidamente nosso protótipo para ver se ele está indo na direção certa. O que você não quer que aconteça é, você desenha todas essas telas, começa a construir o aplicativo e percebe, “Oh, nós esquecemos essa tela. Oh, nós esquecemos este elemento na tela.” Você tem que voltar e fazer todas essas mudanças na fase de desenvolvimento. Enquanto que se você acabou de criar um protótipo no início, você pode obter um bom identificador se o fluxo for bom para o usuário, se houver algum problema que você precisa corrigir antes de chegar ao estágio de Desenvolvimento, o estágio de codificação do aplicativo. No próximo vídeo, criaremos nosso protótipo de baixa fidelidade. 24. Links e apresentação no Adobe XD: Agora vamos começar a vincular nossas telas wireframe para que possamos produzir um protótipo para os usuários testarem. No canto superior esquerdo do XD, clique na guia “Protótipo”. Agora vamos selecionar nosso primeiro quadro de arte para que possamos começar a torná-lo interativo. Vamos ampliar um pouco. O que queremos fazer, não queremos vincular a tela inteira, queremos vincular apenas o botão “Criar uma conta”. Então o que vamos fazer é selecionar esse botão. Quando você seleciona um elemento, você notará que ele ficará azul e, no lado direito, uma seta aparecerá. Clique nessa seta e arraste-a para o quadro de arte ou tela à qual você deseja vinculá-la. Então, neste caso, queremos clicar e arrastar para a tela de configuração do perfil. Você solta o mouse depois de ver uma borda azul ao redor da placa de arte à qual deseja vinculá-la. Uma vez vinculado, você verá aqui na coluna da direita, opções para personalizar a interação. Você tem o que irá acionar a interação, um toque, um arrastar, o teclado ou gatilho de voz, que tipo de transição, animação automática, sobreposição, rolagem para, quadro de arte anterior, reprodução de áudio ou fala reprodução. Neste caso, só queremos uma transição. A tela de destino que você deseja ir para, selecionamos um perfil configurado. Então vamos manter isso como a mesma configuração do perfil. Que tipo de animação, dissolver ou você tem opções de deslizamento, ou opções de push. Vamos com deslize para a esquerda. Então temos flexibilização e duração, e vamos mantê-los como padrão. Então queríamos continuar esse mesmo processo para o resto de nossas telas. Queremos clicar no elemento que será clicável nesse quadro de arte, e queremos vinculá-lo à tela que queremos levar o usuário para. Então eu vou continuar a vincular todos esses botões. Clique em “Continuar” na tela de configurações de perfil, conecte-o à lista de exercícios. Clique em “Continuar” na lista de telas de treino. Vamos vincular isso aos detalhes do treino. Clique no botão “Iniciar” e vamos vinculá-lo à tela de vídeo do treino. Para esta transição, vamos tentar algo um pouco diferente, vamos deslizar para cima. Então agora estamos prontos para pré-visualizar nosso protótipo. O que temos que fazer é clicar no nosso quadro de arte inicial, que será como a tela inicial, que será onde a apresentação do protótipo começará. Então, onde queremos que a apresentação comece, vamos começar com este primeiro quadro de arte aqui. Então, clicamos nisso e depois clicamos em “Pré-visualização”. Agora podemos começar a clicar no nosso protótipo. Os usuários virão para a tela “Criar uma conta”, eles preenchem seu nome, e-mail, senha e senha, clicam em “Criar uma conta” e, em seguida, eles têm sua tela de configuração de perfil com seu nome John Doe, dizem que foi inserido na tela anterior. Selecione o sexo ou a altura, o nível de fitness e os treinos que eles gostam. Clique em “Continuar”. Agora você está na lista de tela de treino. Você tem os tipos de treino, o usuário seleciona “Hit”, você vê um monte de exercícios de sucesso, e eles clicam em “Continuar”. Agora você tem o título do treino. Digamos que você selecionou “Barbies” na tela anterior. Então agora este será o título do treino dizer Barbies, uma imagem desse treino e a descrição. Você pode clicar em “Iniciar” e, como você vê, ele empurra para cima, e você pode começar a reproduzir seu vídeo para iniciar seu treino. Então aqui temos nosso protótipo acabado em XD. Agora, digamos que você queira compartilhar esse protótipo. Para compartilhar, você vai para a guia Compartilhar no canto superior esquerdo do XD e verá as opções no lado direito novamente dando opções para personalizar como deseja compartilhar esse link. O que você quer vincular? Bem, nós queremos vincular a introdução UX ao wireframe que é o nome do nosso projeto, a configuração de visão, revisão de design. Você deseja compartilhá-lo com os desenvolvedores. Modo de apresentação, teste de usuário ou personalizado, vamos deixá-lo como revisão de design, e quem tem acesso ao link: qualquer pessoa com o link, apenas pessoas convidadas, ou qualquer pessoa com a senha. Iremos com qualquer pessoa com o link, e então clicaríamos em “Criar Link” e XD processará e em breve nos dará um link no qual podemos clicar e podemos compartilhar esse link com nossos usuários, partes interessadas, outros designers, equipe de desenvolvimento para que eles possam visualizar o protótipo e nos dar feedback. Vamos clicar no link. Vamos apenas percorrer essas telas de persona iniciais, fluxo do usuário e vamos ao nosso primeiro quadro de arte. Então, os usuários, quem você quiser testar a tela, agora clicarão nesse link e verão isso no navegador e então eles podem clicar no protótipo. Então eles podem adicionar feedback, eles podem fazer um comentário, digitar algum texto, enviar, esse tipo de coisa. Então lá temos nosso protótipo no XD, e tivemos a capacidade de mostrá-lo aos nossos stakeholders, colegas designers, desenvolvedores, outros membros da equipe. Portanto, não é tão difícil criar um protótipo no XD ou compartilhar com os membros da sua equipe. Então, espero que você construa algumas telas no XD, pratique vincular essas telas e comece a criar protótipos por conta própria também. 25. Considerações finais: É o fim da aula. Neste curso, falamos sobre Balsamiq e Adobe XD e sua importância em wireframing e prototipagem. Revisamos as ferramentas no Balsamiq e no Adobe XD, e criamos um exemplo de aplicativo móvel para que você possa ver meu processo. Isso é tudo para a turma. Espero que tenham aprendido algo sobre wireframing de baixa fidelidade e prototipagem e estou ansioso para ver o que vocês inventaram no projeto da turma. Lembre-se, este é um passo muito importante no processo de design, tão feliz prototipagem.