Crie um painel SaaS no Figma: uma masterclass completa de projeto de design de UI

1. Sejam bem-vindos ao masterclass de painel de SaaS do Figma!: Bem-vindo ao curso Figma Project SAS Dashboard. Se você já aprendeu algumas noções básicas do Figma e quer ver como designers profissionais de UI abordam projetos do mundo real, então este é o curso para Oi Meu nome é Ahmal Hasan e sou designer de UIUX com mais de quatro anos de experiência na criação de experiências e produtos digitais, aplicativos web e aplicativos web E nesta aula, mostrarei exatamente o mesmo processo de criação de um painel SAS moderno do zero. Como os cursos baseados em teoria, esta aula é inteiramente baseada em projetos. Vamos pegar um resumo do design e transformá-lo em uma interface de usuário totalmente profissional painel do ASAS usando um fluxo de trabalho muito profissional Começaremos planejando o projeto, entendendo as necessidades do usuário, criando alguns layouts e esboços básicos, bem como estabelecendo uma direção de design Em seguida, projetaremos o painel peça por peça, desde a navegação e os cabeçalhos até os cartões e painéis de atividades, bem como diferentes botões e visualização de dados Ao longo do caminho, você aprenderá como criar componentes reutilizáveis, estabelecer consistência visual organizar seu trabalho Também exploraremos prototipagem, microinterações e Coisas que realmente dão vida ao seu design, tornam mais realista e interativo. Ao final desta aula, você terá projetado uma interface de painel SAS completa que pode se tornar uma parte valiosa do seu portfólio e, ao mesmo tempo, oferecer experiência prática em um projeto de design comum. Então, vamos começar a construir. 2. Como entender o resumo do painel de SaaS.: Olá, bem-vindo a uma das primeiras lições deste curso, na qual projetaremos um painel SaaS ou um painel de software como serviço Então, nesta primeira lição introdutória, discutiremos o que vamos construir neste curso de projeto E isso é exatamente o que é. Estamos fazendo um curso em que estamos construindo um projeto juntos, e estou mostrando passo a passo como podemos fazer isso. É muito importante entender o que estamos construindo ou projetando. Nós o estamos projetando e quais são as funcionalidades necessárias Vamos examiná-los muito rapidamente. Este é basicamente o resumo do nosso projeto. Isso é algo que poderia ser muito mais abrangente, mas estou mantendo o mínimo possível para os propósitos deste curso Uma pergunta muito simples é: o que estamos projetando? Este é um projeto fictício, mas estamos basicamente projetando um software de gerenciamento de projetos como um painel de serviço chamado flow desk para pequenas equipes criativas É um painel que estamos oferecendo às pessoas de diferentes equipes e empresas, onde os gerentes de projeto podem acessá-los e gerenciar seus projetos, suas equipes e assim por diante. Isso nos leva à próxima pergunta: para quem é exatamente? Quem é nosso público-alvo e quem é nossa base de usuários? A resposta é que o usuário principal é um gerente de projetos que precisa ver rapidamente o progresso do projeto, os tíquetes atrasados Prazos e atividades da equipe. Então, eles precisam manter tudo sob controle. Isso não é para membros específicos da equipe. Isso não é para a alta gerência, chefe do seu chefe. Isso é estritamente para o gerente de projeto. Portanto, eles precisam ter dados específicos em mente, e agora chegamos às funcionalidades necessárias O que precisa ser incluído nesse protótipo para ser suficiente Isso está de acordo com nosso pensamento e não precisa ser tudo, mas apenas algumas coisas, funcionalidades que podem ser necessárias Portanto, o gerente de projeto deve ser capaz de verificar o status dos projetos ativos. Portanto, não projetos anteriores, mas aqueles que estão ativos no momento. E depois de ver números ou estatísticas importantes rapidamente, eles precisam entender: quanto tempo cada membro da equipe leva por tíquete? Quanto tempo cada projeto leva até ser encerrado? Quantos projetos estão abertos, quantos estão fechados? Qual é a eficiência? Eles precisam entender essas coisas. Então, eles devem ser capazes de encontrar tarefas atrasadas e urgentes Eles devem ser destacados. O que é devido hoje ou amanhã? Eles devem ser capazes de revisar trabalho em equipe e reorganizar carga de trabalho da equipe para que nenhum membro da equipe tenha muito ou pouco a fazer Em seguida, é claro, navegue até projetos, tarefas, relatórios e configurações. Esses são apenas alguns blocos de construção básicos que eles deveriam poder ter. Só para dar uma ideia muito rápida do que realmente quero dizer é algo semelhante a esses. Esses são os painéis São configurações muito complexas. Eles não são realmente fáceis, isso vai ser um desafio e eles são feitos de muitos elementos. Há muitas estatísticas, incluindo gráficos, que informam que o projeto está parado em andamento e a revisão foi concluída e, em seguida, fornecem a carga de trabalho semanal de tarefas mostrando quantas tarefas em andamento existem e, em seguida, há alguns números, total de tarefas concluídas, total de tarefas por cliente e assim por diante Além disso, você tem alguns botões extras, como atividade. Você tem notificações, bate-papos, histórico e esse menu lateral muitas opções e páginas diferentes Ele mostra aqui, eu acho, as estatísticas de crescimento, mas isso também pode ser um painel. Então você tem projetos, planilhas de horários, automação, integração automação Teremos que prototipar todas essas opções diferentes Não precisa ser tão complicado quanto isso. Mas o ponto principal é que ele deve fornecer uma visão geral muito boa do que está acontecendo, e não vamos fazer cada página. Vamos apenas fazer o painel em si. Aqui está outro exemplo com melhor qualidade. Mas é o mesmo princípio. Você tem esse menu lateral. Você tem suas configurações, tarefas de desconexão, projetos e assim por diante. Então aqui você tem uma visão geral um pouco mais simples. Este painel informa: OK, aqui estão as tarefas que você tem no momento ou as tarefas principais. Aqui está a meta mensal. Aqui estão as estatísticas do projeto. Você pode ver por 12 meses, 30 dias, etc., e um resumo do projeto, uma visão geral do projeto. Realmente depende do que você acha importante que o usuário veja. Isso é algo que faremos nas próximas aulas, onde desenharemos, prototiparemos e criaremos Isso significa entender e determinar qual é o problema e como nossa solução deve ser da melhor maneira. Quais dados devemos mostrar aos nossos usuários, basicamente? Isso é algo que discutiremos na próxima lição. Obrigado por ouvir. Te vejo na próxima aula. 3. Sketching the Dashboard Layout: Então, agora temos uma ideia ampla do que queremos construir, e agora temos que restringi-la um pouco esboçando Agora, vou usar o Fig Jam, que estou usando agora para este resumo, e é muito simples Podemos usar a ferramenta Caneta e tentar criar algo com ela, ou também podemos usar algumas dessas formas. Vou usar algumas formas aqui e ali só para facilitar e depois brincar um pouco com as canetas. Aqui temos nossa moldura. Essa será nossa primeira tela. E, para ser sincero com você, acho que não podemos ir tão longe para criar algo completamente diferente do painel normal. É completamente normal e não há problema em copiar o layout geral. Com isso dito, acho que podemos basicamente criar com segurança uma área aqui para nosso login. Podemos ter alguns círculos aqui, para que você possa ter sua conta ou algo parecido. Você pode ter suas notificações e histórico, algumas configurações como essa. Eu também colocaria uma pesquisa talvez aqui. Eu colocaria uma função de pesquisa aqui e seguida, aqui teríamos nosso menu lateral, mas ele seria fechado Quero criar uma versão em que ela seja reduzida e, quando você passar o mouse sobre ela, ela vá para a direita Aqui temos alguns ícones. Então, vou desenhar alguns quadrados aqui. Este é o seu menu lateral e talvez você tenha suas configurações aqui. E sim, apenas passando o mouse sobre ele, ele se expandiria. Então teríamos nosso painel. Isso nos permitiria ter muito mais espaço aqui no painel. Eu estava pensando, para ser sincero, que seria legal e estou pensando talvez no Spotify O Spotify tem um design de janela muito bom, é janela. Há seções e outras coisas diferentes. Estou tentando criar algo parecido. Acho que o que poderíamos fazer é ter uma seção aqui e essa seção basicamente teria vários ingressos. Então, basicamente mostraria os ingressos mais urgentes ou mais recentes, os mais novos ou algo parecido. A propósito, podemos anotar isso Seria ótimo se disséssemos ingressos urgentes e, talvez abaixo, e, talvez abaixo disséssemos ingressos mais novos Então, só para que eles possam ter uma visão geral muito clara do que está por vir, do que é urgente, do que precisa ser feito hoje. E então, como mencionamos aqui, teríamos um perfil ou vamos escrevê-lo assim: histórico, notificações , perfil e, primeiro, temos a pesquisa correta aqui. E então aqui, lado dobrável. Agora temos o layout geral, e essas são como as coisas periféricas laterais, mas agora precisamos falar sobre a verdadeira manteiga e o pão de toda essa operação, que são esses pequenos bilhetes, essas pequenas seções E eles quase sempre têm a mesma configuração. Você sabe, você tem essas seções que são delineadas ou coloridas, preenchidas e, em seguida, você tem algumas informações E sempre há o uso de ícones de cores para indicar, você sabe, aqui você tem urgência ou talvez atualizado, você sabe, o tempo, e aqui você tem sinais de, tipo, descendo, subindo, diminuindo, aumentando, etc Então, ainda não vamos chegar a isso, mas estou pensando que o que poderíamos ter seria uma janela ou uma seção muito grande, e essa seção nos daria uma compreensão gráfica de certas coisas Então, para mostrar as tarefas concluídas e quaisquer tarefas. Aqui, vou anotar isso e dizer estatísticas de tarefas concluídas, tarefas atrasadas e E então eu estou pensando que aqui poderíamos ter alguns números, então poderíamos ter um número Oops, e então alguma explicação, número, alguma explicação, semelhante a esta aqui Mas em vez de fazer seis coisas diferentes, eu quero fazer três ou poderíamos fazer um círculo, um gráfico circular, você sabe, um gráfico circular ou algo para mostrar o que está acontecendo. Mas essa é a primeira seção, e então eu basicamente gostaria de fazer um corte ou diferenciar isso Então, eu gostaria de ter várias seções que mostrassem as coisas com mais detalhes. Então poderíamos adicionar um gráfico, algo assim, possivelmente e OK, então temos um gráfico e gostaríamos de ter mais informações sobre talvez os membros da equipe. Acho que seria muito bom. E talvez algo como esse gráfico de barras também seja muito bom porque oferece uma visão geral mais ampla. Então, isso pode mostrar a você pessoas diferentes e o que elas estão fazendo e assim por diante. E sim, vamos ver. Então, isso é apenas uma ideia, mas acho que gostaria de ter mais algumas seções. Então, eu não tenho certeza do que eles seriam, mas eles serão cortados aqui. E sim. Ainda não tenho certeza com que tipo de grade quero trabalhar , mas acho que gostaria de mantê-la flexível com essas caixas de bento Então, como você pode ver aqui, é muito simples. Tipo, você tem essa grade assim e aquela. Mas aqui é diferente. É cortado de maneiras diferentes. Então aqui você tem essa carta ocupando dois espaços e aqui cada uma está ocupando um espaço, e aqui você tem quatro cartas diferentes. É uma coisa diferente, mas vamos brincar com isso e ver o que sai disso. Mas, como eu disse, como mencionei, não estamos reinventando Não estamos reinventando a roda. Isso é praticamente o mesmo, mas estamos apenas tentando entender como queremos torná-lo diferente. Às vezes, pequenos detalhes são importantes: onde você deseja colocar a pesquisa, onde deseja colocar o perfil ou o fato de sermos urgentes na bilheteria. Talvez eu queira até mesmo colocar algo na parte inferior que ofereça uma tarefa de foco ou talvez, na verdade, deixe-me ver o que posso fazer aqui. Tente excluí-los. Então, talvez aqui, assim como no Spotify, eu esteja saindo disso Poderíamos ter uma coisa de foco aqui e talvez tivéssemos uma espécie de situação do tipo Pomodoro , contra Pomodoro Então você basicamente diria: Ok, eu sou gerente de projeto. Estou gerenciando tudo ao mesmo tempo, e é muito, mas quero ter algo em que me concentrar em uma tarefa por vez. Porque é muito fácil se perder no molho, especialmente quando você tem tantas coisas diferentes acontecendo. Então, manter algo aqui embaixo talvez possa mantê-lo, você sabe, focado. Então, sim, esse é o nosso esboço. É muito básico e primitivo, mas é exatamente isso que queremos Ainda não estamos inventando nada. Só estamos tentando ter uma ideia disso. Então, nos vemos na próxima lição. 4. Configurando quadros, grades e direção do design: Então, nesta lição, vamos tentar determinar rapidamente a direção do nosso design e criar o primeiro quadro, bem como talvez configurar algumas diretrizes, algumas grades, qualquer coisa que realmente nos ajude a criar uma base para o layout Então, primeiro de tudo, eu já fiz pequenos preparativos. Um deles é apenas um logotipo muito simplista e pouco polido mostra um F e um D. É muito simples, mas é basicamente como uma mesa de fluxo E sim, está escrito basicamente assim. Então, esse será mais ou menos nosso locum. Podemos retocá-lo, sem problemas. E então temos nossas cores aqui. Então, temos nosso primário, que é esse tipo de azul escuro misturado com esse cinza escuro. Então temos essas outras cores, acentos que podemos usar Temos esse amarelo alaranjado e esse rosa. Essas são apenas algumas cores básicas que eu gostaria de usar por enquanto, mas podemos trabalhar com elas à medida que avançamos, mas apenas para ter um pouco de base. Como você pode ver, gostaria de informar que, como esse é um projeto fictício que vamos acelerar mais ou menos nas próximas 2 horas, a configuração aqui é muito básica Mas se você realmente estivesse criando esse site, programa ou painel, precisaria de muito mais do que isso. Isso é muito básico, só fazer isso assim porque vamos expandi-lo e , por enquanto, será um projeto muito pequeno. Para tipografia, assim como para a fonte, temos Geist como fonte, uma fonte muito simples que pode ser usada Essa é a nossa direção de design em geral, então essa é uma folha de estilo muito simplista para usarmos ao longo do caminho Agora, vamos criar nossos quadros. Você usará sua ferramenta de moldura , escolheremos o desktop e o Mac Pro de 16 polegadas. Então, desse jeito, criamos esse quadro, e esse é o quadro no qual trabalharemos principalmente. Então, agora vamos configurar algumas grades. Agora, pessoalmente, não sou muito fã deles, mas eles podem ser muito úteis no começo para ter um pequeno guia agradável. Então, aqui vamos ao guia de layout e adicionamos colunas. Eu gosto de ter algumas colunas. E o que vamos fazer é dizer, vamos ter quatro. Eu não quero mais do que quatro cartas, e vou adicionar uma margem por enquanto, e então a sarjeta está bem agora e então a sarjeta está bem agora Esse é o nosso layout muito geral. Agora, lembre-se de que, à esquerda, aqui , teremos, eu vou apenas colorir. Vamos ter nossa barra lateral em algum lugar aqui. OK. E, ao mesmo tempo, teremos a esquerda à direita, teremos, você sabe, ingressos, então ingressos urgentes e outros enfeites Portanto, tenha isso em mente. Mas, para ser sincero, quero criar nosso design assim e depois adicionar a seção de adicionar este comentário um pouco mais tarde. Então, sim, dessa forma, podemos nos concentrar no conteúdo intermediário e, em seguida, adicionar nosso pequeno recurso de comentários ou tarefas à direita um pouco mais tarde. Está bem? Então, vou excluí-los por enquanto. Então, é assim que a configuração geral se parece agora, e vamos começar a desenvolvê-la nas próximas lições. Nos vemos nas próximas aulas. 5. Criando a navegação na barra lateral: Agora, vamos criar nossa área de cabeçalho aqui, todos os itens que tínhamos em nosso esboço, que consistem nas notificações do histórico de pesquisa e no perfil Então, não vamos complicar muito isso, mas vamos criá-lo de forma muito simples Agora, para criar as notificações do histórico, vou começar com elas. E para fazer isso, eu quero criar alguns botões. Então, vou criar apenas um componente e vou escrever A aqui. Eu vou fazer disso uma fonte incrível. Ok, fonte incrível sete. Você não sabe que essa é uma fonte que cria ícones. Por exemplo, aqui temos ícones de notificações. Isso é um sino. Nós apenas digitamos a campainha e a temos ali mesmo. Vamos fazer com que esse tamanho seja talvez 20, pressionaremos Shift e A para torná-lo um layout automático, garantiremos que a largura e a altura sejam iguais e, em seguida, bloquearemos a proporção. Então, aqui está. Essa é a fonte. Vou centralizá-lo e vou chamar isso de botão. Ou botão de ícone. Então, vamos basicamente transformá-lo em um componente. Lá vamos nós, e vamos dar uma olhada. Vamos dar uma cor a isso. Vamos fazer com que seja normal assim. E vamos dar alguns cantos dourados. Então, talvez oito sejam suficientes. Então, aqui temos nosso botão de ícone. Então eu vou adicioná-lo e colá-lo aqui, e aqui temos esse sino. Está bem? E então podemos copiar isso, e então podemos criar os botões de histórico para ver se podemos obter o histórico ou repetir ou algo parecido. Então, acessamos o site Font Awesome e podemos encontrar o específico que queremos, que é girar o relógio para a esquerda Então, vamos apenas colá-lo aqui. E vemos que não está disponível no Solid. Então, podemos fazer, vamos voltar. Vamos fazer de tudo isso um sólido. Agora temos esses dois e podemos aumentar o tamanho, podemos mudar algumas coisas, podemos fazer com que sejam 24 em vez disso. Agora temos esses botões aqui, e então o que precisamos é de uma busca. Vou criar uma moldura aqui, dar a ela um raio e criá-la assim Então eu vou colocar um texto dentro dele e dizer pesquisar. Na verdade, vou colocar um ícone aqui muito útil e, em seguida, adicionar texto Eu vou escolher os dois. E lá vamos nós. Só vou me certificar de que está escuro o suficiente para ser legível Então eu posso transformar tudo isso em um layout automático e estendê-lo um pouco, é claro, no final, temos a foto. Para a foto, podemos simplesmente ir em frente e pesquisar em pexels por qualquer foto do homem Cara, a mulher realmente não importa. Vamos seguir em frente e escolher qualquer pessoa aqui. Só preciso de uma boa foto do rosto deles. Copie, cole, e eu vou criar um círculo e vou copiar o preenchimento, colar aqui, depois vou recortá-lo para que eu possa centralizar o rosto dele aqui um pouco. Eu acho que isso é bom o suficiente. Podemos definir algumas fronteiras, se você quiser, apenas para garantir que seja notado ou algo parecido. Agora, o que vamos fazer é manter tudo isso e colocá-lo em um layout automático. Vamos ver como isso se parece agora. Acho que o tamanho está bom. Podemos seguir em frente e até mesmo torná-lo um pouco menor. Deixe-me ver como isso ficaria em um MacBook. OK. Agora, olhando para ele, na verdade, em um MacBook, não é nem um pouco grande. Está muito bem. Então, sim, podemos continuar com isso. Agora, o que também precisamos incluir são nossos logotipos. Eu só vou copiar isso. Vou colar aqui. Eu só vou voltar. Certifique-se de que tudo aqui esteja incluído. Copie, cole aqui. E então, com K, vou redimensioná-lo. K redimensiona tudo de uma maneira agradável para que nada fique fora de proporção. Então, isso é muito bom. E então eu vou adicioná-lo aqui. E o que vou fazer é incluir tudo isso em um quadro. Então, um layout automático, novamente, usando shift e A, e agora está tudo acabado. O que vou fazer é estender isso até o fim e dar 36 ou talvez 24. Também vou preenchê-lo só para poder dizer para onde está indo. E vou dar um pouco acolchoamento da direita e da esquerda Aqui está o que é bom. Vou escolhê-los novamente. Vou destacá-los. Vou criar um layout automático dentro de um layout automático, mas vou dar o máximo, se quisermos. Se quiser, você pode dar um máximo e centralizá-lo. E dessa forma, ficaria aqui no meio. Portanto, mesmo que a tela seja muito ampla , ela ainda permanecerá até aqui. Não vai muito além. Mas, na verdade, não precisamos disso em si, na minha opinião. Então, vamos manter assim, pegar o preenchimento e torná-lo branco. E sim, sem mais nem menos, temos um lindo cabeçalho. Claro, podemos expandi-lo. Podemos acrescentar mais coisas a ele. Mas, por enquanto, parece muito bom. É claro que podemos editar pequenas coisas como o espaçamento em vez de 22, pode ser 24, e é mais ou menos isso Na próxima lição, tentaremos criar a barra lateral ou o menu lateral. 6. Projetando o cabeçalho e a área de pesquisa?: Então, desde a última aula, adicionei essa coisinha de um kit de interface de usuário apenas para dar uma aparência mais realista. Então, só para isso, você sabe, especialmente com esse entalhe. Agora, parece que estamos realmente em um site. Dessa forma, podemos dizer melhor onde nossos cabeçalhos estarão e quanto espaço eles ocuparão Em vez de estar aqui em cima, você pode dizer, oh, não tenho muito espaço sobrando agora. Então, ou você redimensiona o cabeçalho ou o mantém o mesmo e vive com ele, depende de você Mas, dessa forma, temos uma melhor compreensão do tamanho das coisas ou dos elementos de design que temos Mas acho que, por enquanto, está tudo bem. Nesta lição, vamos criar o menu lateral, que não será uma tarefa fácil. Ok, então tenha isso em mente, por favor. Para fazer isso, eu gostaria criar outro componente. Então, vamos começar criando esses botões específicos. É claro que podemos desenvolver esse componente em si, mas acho que seria bom se pudéssemos criar componentes completamente diferentes. Acabei de copiar isso, colei aqui e vou desanexar a instância Em vez de ser um botão de ícone, vou dizer botão de menu, e vamos transformá-lo em seu próprio componente. Agora, essencialmente, o que queremos é ter um botão que tenha um ícone, mas também tenha algum texto. Este texto, deixe-me adicioná-lo aqui. Eu copiei ou cortei, colei. Vamos torná-lo horizontal. E não vamos bloquear a proporção. Vamos fazer com que seja um abraço. Em seguida, vamos clicar olho a olho nessa cor. Então, agora temos um item. Este item pode ser, quero dizer, neste momento , diz SFP, que é a fonte da Apple, mas não é isso que queremos Queremos dizer que isso é, por exemplo, painel, esse é o botão do nosso painel. Então, uma coisa que poderíamos fazer é, quero dizer, vamos ver como fica aqui, parece muito bom, mas talvez pudéssemos torná-lo ainda maior, para ser honesto. Poderíamos tornar o ícone um pouco maior. Isso é um pouco grande demais. E aumentamos a fonte. Pode ser pelo menos 20. Ou vamos fazer isso, vamos voltar para 24 e esse 24 também. E então daremos a isso 616. E sim, vamos ver como isso ficaria aqui. Vou apenas colá-lo aqui e vou criar versões diferentes. Vou colocar todos eles em um layout automático, vamos voltar ao nosso site e ver o que podemos adicionar ao painel. Você pode filtrá-lo e torná-lo apenas gratuito, e podemos ver o que é melhor para nós. Por exemplo, isso pode ser melhor para o painel, para ser honesto, certo? E então temos alguns outros pontos que estão aqui: projetos, temos tarefas, calendário e, em seguida, temos relatórios e configurações da equipe. Relatórios da equipe. Agora vamos ter que alinhar isso à esquerda, e vamos fazer a mesma coisa aqui. Lá vamos nós. Então, agora está alinhado à esquerda para todos eles. E vamos ter que descobrir os ícones de cada um. Mas vamos ver como está agora. Quero dizer, para ser honesto, não parece muito ruim. Talvez precisemos de um pouco mais de espaçamento entre eles. Mas, além disso, acho que essa é uma boa maneira de listá-los. Assim, podemos verificar, é claro, os outros designs nos quais estamos baseando isso, para que possamos vir aqui e ver como eles fizeram isso Talvez o deles seja um pouco menor. Eu diria que sim. Então, isso é algo que podemos tentar fazer, mas o problema é que não temos muitos itens por aqui. Então, vamos voltar e ver como está. Então, talvez possamos tornar a fonte um pouco menor, talvez, não. Então, vamos fazer com que seja um 20 para que possamos reduzir o espaçamento um pouco Tudo bem Então, vamos ver se podemos tornar isso normal. O problema com o normal é que as fontes nem sempre têm a opção normal quando você está no plano gratuito com esse ícone. Então, com essa solução de ícones vamos mantê-la assim. Acho que está tudo bem, e só precisamos preencher os ícones. E uma coisa importante é que, quando você tem isso, precisa criar outra variante. Essa variante precisa ter o texto oculto, basta torná-lo invisível, ocultá-lo e, em seguida, você terá duas versões diferentes, poderá manter todas elas. E aí você pode ter a versão com ou sem ícones, ok? Como mencionamos, queremos criar duas versões diferentes, uma que seja normal e outra que seja interrompida. Então, isso é muito essencial para ser feito. Está bem? Então, a maneira de fazer isso é seguir em frente e criar duas versões diferentes a partir desse menu. Eu ainda não o configurei totalmente. Ainda precisamos de um botão aqui, então vamos adicionar um botão de configurações. Mas com o botão de configurações, queremos que fique bem mais baixo, vou escrever o equipamento e depois as configurações. Então, queremos que seja aqui embaixo. Apenas separe. Então, vamos fazer dele um layout automático e a distância deve ser automática. Então, agora nós o temos assim e garantimos que esteja espalhado por todo o caminho. E então o que vamos fazer é garantir que o espaçamento seja adequado, então temos talvez 24 daqui e ali, e então o preenchimento de cima para baixo e para a esquerda e para a direita deve ser 24, e agora parece mais normal Agora vamos tirar isso e dar a ele talvez um plano de fundo, e depois transformá-lo em um componente e vamos dizer menu lateral ou barra lateral O que é chamado de barra lateral. Essa barra lateral terá duas versões que só têm ícones, sem texto Vamos fazer isso escolhendo todos os elementos aqui. Agora só precisamos escolher cada um desses itens aqui e vamos colocar a variante dois. Podemos mudar o nome disso. Então, o que vamos fazer é vir aqui e simplesmente derrubar essa coisa toda. Nós vamos destruí-lo. Dessa forma, com nossos ícones, ele será configurado de forma a ocupar muito menos espaço. Então, vamos ver e testar. Vou colar isso aqui e colocá-lo onde deveria estar. Vamos ver como está agora. Bam. Você vê? Agora, ele ocupa muito menos espaço. Poderíamos dar um passo adiante e até diminuir o preenchimento, para ser sincero, da direita e da esquerda, sem mais Mas só precisamos ter certeza de que aqui está tudo certo. Apenas faça um abraço e pronto. É assim que nossa barra lateral se parece agora. Claro, eu tenho que preencher os ícones e mudar algumas coisas, mas é assim que funciona, e vamos desenvolver isso um pouco mais tarde. Vamos criar o mecanismo que você clica no botão. Ainda não fizemos isso, mas vamos criá-lo mais tarde. Tudo bem Nos vemos na próxima aula. 7. Criando cartões de painel e blocos de estatísticas: A seção de cartas. Esta é a seção em que veremos os cartões e o painel real. Então, o conteúdo real. À medida que avançamos e começamos a criar isso, eu gostaria de dar uma olhada no Spotify Eu te disse antes que é isso que estou tentando fazer agora neste design, porque eu realmente gosto de como eles fazem isso. Você sabe, o Spotify é uma empresa que tem recebido muitas críticas sobre seu layout, talvez porque seja muito complexo ou algo parecido Mas eu realmente gosto disso. Você tem seu cabeçalho aqui, sua pesquisa com seu perfil e outras coisas. E é muito parecido, você sabe. E então, à esquerda, você tem aqui sua playlist. Você tem coisas diferentes, como acesso rápido. E esse é o painel deles. Você tem várias opções diferentes para escolher. Você tem controles deslizantes e assim por diante. E aqui embaixo, você tem seu jogador que sempre vai com você. E à direita, você tem uma seção aqui que mostra mais a música que você está ouvindo, os créditos do artista e assim por diante. Então, o que é muito legal nisso, porém, é que, se você der uma olhada, essa não é uma seção diferente. Parece que é uma janela, certo? Tipo, isso é uma janela e você está espiando pelo painel O que as empresas normalmente fazem é fazer com que o cabeçalho pareça estar no topo. Então você tem esse menu e ele também está no topo. São muitas coisas em cima umas das outras. Mas, em vez disso, o que eles fazem aqui é fazer parecer o cabeçalho está conectado a essa parte, que também está conectada ao player e você tem apenas duas janelas. O legal é que você pode redimensionar essas janelas. Você pode levá-los para a direita ou esquerda. E a mesma coisa aqui. Você pode redimensioná-lo e depois ver os nomes completos ou retirá-lo e assim por diante Isso é exatamente o que eu estou procurando aqui. Eu quero um visual que pareça tão simples, limpo e moderno que não pareça que todos sejam elementos em cima uns dos outros, mas sim que há aqui uma janela, e essa janela mostra as opções, certo? Vou continuar ocultando o guia de layout por enquanto, para que possamos ver com mais clareza. Na verdade, vou pegar o layout aqui, o guia de layout, e adicioná-lo a esse quadro. Eu vou consertá-lo um pouco. Então, só para dar uma ideia do que queremos fazer. Então, a razão para fazer isso é porque eu quero que o guia, você sabe, esteja aqui porque queremos fazer o layout do bento aqui, ok? Mas vamos esconder isso novamente por enquanto. Então, agora, como você pode ver, é exatamente disso que estou falando. Então, basicamente temos essa janela aqui que nos mostra as cartas, essa área e tudo o mais aqui parece bem normal. Parece conectado, você sabe, o que é muito bom. E, mais tarde, basicamente também adicionaremos a seção de comentários ou a seção de tarefas aqui. Então, da mesma forma que o layout com o Spotify, ok? E então aqui teríamos o controlador ou a tarefa atual que estamos realizando atualmente, e vamos abordar isso mais tarde. Mas, por enquanto, vamos nos concentrar. Então, agora temos um layout bem legal acontecendo aqui. Vamos ver o que podemos fazer aqui em termos de cartas. Então, como mencionei, teremos layouts diferentes para cartões diferentes Mas o que podemos fazer, no entanto, é tentar criar um layout bem básico. Então, brinque com os tamanhos e assim por diante. Então, agora, é assim que parece. Nós podemos mexer com isso. Acho que é muito espaçamento. Talvez possamos 24 e também possamos fazer a sarjeta 24. Também podemos adicionar algumas linhas. Então, agora, como você pode ver, parece mais claro de onde as cartas podem vir. Então, vamos trazer isso aqui. Então, quando trazemos esse elemento aqui, você pode ver que isso poderia ser uma carta, certo? Mas também podemos adicionar outro cartão que pode ocupar muito mais espaço. Eu posso ocupar o espaço de duas cartas, ou talvez ambas possam ocupar todo esse espaço. Portanto, é muito flexível às nossas necessidades e ao que precisamos mostrar. Depende totalmente de nós, e essa coisa toda com eles é divertida. É assim que ficaria, certifique-se de desligar isso com frequência, vez em quando, para que de vez em quando, para que não mexa na forma como você vê as coisas e como elas se parecem, e diga: Ok, isso não é tão ruim Mas uma coisa, é claro, que eu recomendaria é também brincar com as sombras Isso é algo que eles costumam fazer. certa forma, podem ser sombras muito simplistas, como essa, ou podem ser ainda menores Como você pode ver, é como uma simples sombra próxima que faz com que pareçam ingressos Ou poderíamos trabalhar com algo um pouco mais forte, então poderíamos diminuir a opacidade e torná-la mais embaçada e depois obter algo um pouco mais suave nos Então, isso é uma coisa a ter em mente. Acho que quero usar esse estilo por enquanto, mas podemos mudá-lo mais tarde. Depende totalmente de nós. Ok, então vamos. Vou pegar uma dessas cartas, a menor versão aqui, e vou jogar, então aqui temos o layout. Agora, podemos fazer isso de várias maneiras diferentes, mas uma maneira que eu gostaria de fazer isso é adicionar um título. Portanto, esse título pode estar em alta ou em baixa. Depende totalmente de nós. Vamos ver como outros fizeram isso. Eles geralmente fazem isso. É preto, muito grande e legível e a mesma coisa aqui, diz tarefas contínuas Então você pode ver um gráfico. Você pode ver uma opção para filtrá-lo semanalmente, diariamente, seja o que for. Então, sim, é isso que estamos procurando. Aqui, você o tem como botões ou menu suspenso. Então, isso é algo que podemos escolher. Então, podemos adicionar isso no topo e dizer que podemos voltar aqui e ver o que colocamos. Então, estatísticas. Então, esta é a nossa mensagem aqui, e não precisamos pedir uma tarefa para você. Você pode simplesmente dizer título. Certifique-se de que esteja alinhado à esquerda. Tem a fonte correta, a fonte certa, e aqui diz que está alinhada à esquerda e à parte superior, o que é bom o suficiente para nós Está bem? E então podemos adicionar algumas outras opções. Pode ser uma imagem, pode ser qualquer coisa. Mas esse é um bom layout geral. Vamos ver quais outras informações podemos adicionar. Quero dizer, para ser honesto, não temos um layout simples. Temos muitos layouts diferentes por aqui. É difícil dizer que vamos fazer exatamente o mesmo layout porque cada vez você tem um tipo diferente de gráfico. Acho que isso é bom o suficiente para ter um layout muito simplista Então você pode adicionar seu gráfico, você pode adicionar seus números, seja o que for. E sim, ok, então o que mais podemos fazer aqui? Bem, podemos adicionar uma área de opções. Assim, você pode ter um botão que diz: aqui estão suas opções. Vamos apenas criar alguns círculos aqui, um ao lado do outro. Vamos transformá-los em um layout automático. Também vamos fazer com que seja 13 de altura. E vamos mudar a cor, torná-la um pouco mais escura E vamos alinhá-lo aqui. Mas para este, vamos alinhá-lo à direita. Está bem? Então, quando redimensionamos isso, como você pode ver, o título ficará no canto superior esquerdo e essa coisa ficará no canto superior direito Está bem? Então, aqui está seu botão de opções extras, e aqui está seu título, e aqui você teria seu gráfico, seja ele qual for. Vou manter isso como uma coisinha principal, mais ou menos como a original, e depois vou brincar com outras. Agora, falamos sobre ter essa visão geral da tarefa para mostrar tarefas concluídas em atraso e assim por diante Vamos fazer isso muito rapidamente. Vamos dizer uma visão geral da tarefa. Em seguida, criaremos esses retângulos e os tornaremos arredondados cantos arredondados e daremos a eles Está bem? Então, vamos escrever aqui os números. Vamos adicionar esse texto e, em seguida, vamos adicionar esses retângulos e, em seguida, vamos adicionar um pouco de texto a eles, e vamos torná-lo pequeno 12 é o menor que podemos usar normalmente quando se trata de aplicativos da web, então vou torná-lo normal e vou dizer 42 ou algo parecido. Então eu vou transformar isso em um quadro ou podemos fazer isso em um layout automático. OK. Então eu vou copiar isso. Então, como você pode ver, eu posso redimensioná-lo e mudar as coisas. Eu posso fazer isso e posso dizer 24. Mas 24, o que 42, o que? Vou adicionar mais texto. Eu vou dizer concluído. A mesma coisa aqui. Podemos adicionar texto aqui, para fazer, e assim por diante. Então, quando tivermos alguns, podemos colocá-los em um layout automático e, claro, faz muito sentido mudar as cores. Uma das cores que escolhemos é esse rosa e depois uma delas é esse laranja. Agora faz mais sentido também classificá-los . Qual cor diz urgente? É mais para o vermelho. Então você tem essa cor que diz, sim, pendente ou podemos dizer urgente e então podemos dizer, sim, podemos dizer fazer aqui, e aqui está concluído. Ou podemos dizer, quero dizer, por concluído ou podemos dizer preso por um deles. Então, isso pode ser feito. Isso pode estar preso. E então isso seria concluído, mas precisaríamos de uma cor verde para isso. Sim, então já está escrito. Essa é uma boa maneira demonstrar, mas talvez você tenha uma pergunta. Ok, bem, os números, ainda não os corrigimos, mas você está dizendo que há 24 urgentes e 42 a serem resolvidos. Então, esses urgentes, eles também são contados no que fazer ou não? Essa é uma boa pergunta. Temos que nos fazer perguntas lógicas. Vamos incluir 42 tarefas e 24 delas são urgentes e 24 delas estão paradas. Ou essa é uma categoria completamente diferente? Ou isso é 42 para fazer sem urgência? Você sabe? Então, é como se tivéssemos 42 tarefas que não são urgentes e, em seguida, 24 tarefas que são urgentes. Então, no total, temos muitas tarefas. Essa seria uma boa pergunta. Certo? Então, temos que descobrir essas coisas. Caso contrário, não faria sentido mostrá-los como coisas diferentes, ok? Vamos tentar mexer com isso e ver aonde isso nos leva Agora, é claro, outra coisa que podemos fazer é pegar tudo isso e mudá-lo para a direita. Dessa forma, ou talvez não dessa forma, exatamente, ou podemos mudá-los para a direita e descobrir uma maneira de fazer com que todos comecem do mesmo lugar porque agora, tudo começa aqui. A maneira de fazer isso é criar um comprimento ou largura específicos. Então, temos uma largura de 65 e eu darei a todos eles uma largura de 65 e , em seguida, todos eles poderiam começar do mesmo lugar. Isso é um pouco mais agradável, eu diria, aos olhos porque é um pouco mais organizado Claro, você também pode alterar esses números, faz mais sentido colocá-los aqui, aí está. Agora parece muito melhor. Temos coisas à esquerda, coisas à direita, e é mais compreensível Agora, uma coisa que eu gosto de fazer sempre que estou criando qualquer tipo de painel, se possível, se é algo que pode ser programado, é adicionar um símbolo de status de certa forma, por assim dizer, isso é bom, isso é ruim porque muitas vezes é muito difícil de analisar e entender Temos tantas tarefas urgentes, e muitas outras tarefas bloqueadas, e vamos mudar os números. Então o que isso me diz? Essa é a questão. O que isso me diz a longo prazo? O que estou me beneficiando desse gráfico? Eu gostaria de adicionar um texto que diz que você está no caminho certo. Isso é bom, isso é positivo ou há um aumento, há uma diminuição. Essa é uma boa carga de trabalho Isso é uma coisa que poderíamos fazer e adicioná-la como um emblema Podemos criar isso como um componente, mas só precisamos entender qual é a melhor maneira de adicioná-lo. Eu apenas digo aqui categoria ou status, e vou fazer um layout automático, dar um pouco de cor, um pouco de verde. Os 10% verdes e vou fazer com que sejam quatro por quatro, talvez ou oito por oito. Agora, isso é um componente e diz status. Podemos adicioná-lo aqui em algum lugar. Para o texto, vou torná-lo um pouco verde escuro. E talvez pudéssemos adicionar algum tipo de símbolo ou algo parecido. Então, eu adicionaria esse círculo aqui e também o tornaria verde escuro. Talvez dê um pouco, como uma sombra ou um brilho, se possível. Não parece muito bom. Não parece muito bom, mas acho que podemos tentar descobrir isso de alguma forma Basicamente, queremos dizer que existem diferentes tipos de estáticos e aqui está no caminho certo Você pode dizer no caminho certo como exemplo. Podemos diminuir o espaçamento aqui e depois adicionar outro onde diz recuar Assim. Podemos fazer com que essa fique mais amarelada. Eu posso cuidar disso e então podemos fazer um terceiro que diz que você precisa fazer seu trabalho. Sim, basicamente, basta adicionar alguns tipos diferentes de status. Mas o texto , as cores e essas coisas são algo que podemos resolver mais tarde Mas isso é apenas um começo, um cartão muito bom para a visão geral da tarefa. Podemos transformar algumas coisas em layout automático, como essas, por exemplo, e depois garantir que essa face seja igual. Então eu vou seguir em frente e copiar isso aqui. Vamos colocar de volta nossas linhas e colunas. Vou excluí-los e vou adicioná-los aqui. OK. Então, se acharmos que ele precisa de muito mais espaço, podemos dar mais ou redimensioná-lo Depende totalmente de nós. Acho que esse é um cartão importante. Então, isso é algo para o qual podemos dar muito mais espaço . Então, vamos ver. Só temos que redimensionar isso de verdade. Então, podemos simplesmente redimensionar isso para este aqui ou podemos expandi-lo totalmente para você Mas sim, vamos tentar expandi-lo um pouco. Isso parece melhor. Mostra muito mais o comprimento, as diferenças drásticas E é mais ou menos assim que ficaria. Agora que estou vendo isso daqui, acho que isso pode ser um pouco pequeno demais, mas essas são as coisas que temos que continuar fazendo repetidamente, verificando novamente e vendo, oh, o texto aqui é muito pequeno. Precisamos torná-lo maior, fazer com que o cartão inteiro talvez seja maior. Mas, como eu disse, isso é mais, parte do aperfeiçoamento de seu design ao longo do caminho, e isso é algo que vamos fazer Tudo bem. Estou vendo a próxima lição. 8. Criando um menu suspenso de filtro: Bem-vindo de volta. Então, desde a última aula, adicionei algumas coisas sozinho apenas para preencher algumas lacunas, preencher alguns detalhes, alguns trabalhos de jardinagem que seriam muito chatos para você Mas basicamente, acabei de preencher esses cartões, certo? Então você entendeu o conceito. Você apenas faz alguns gráficos, anota os meses e, você sabe, eu apenas preenchi algumas lacunas como eu disse Então, agora temos uma visão geral das tarefas, KPIs da equipe, horas extras de desempenho, você sabe, ao longo de meses ou anos ou o que quer que seja E então temos a carga de trabalho. Então, o que é realmente interessante, desculpe, exclua isso. Uma coisa que eu também fiz foi realmente redimensionar os elementos das coisas Você provavelmente percebeu que isso tornava o texto mais legível porque temos muito espaço, então por que não usá-lo Ao mesmo tempo, não queremos sobrecarregar as pessoas com muita informação, muito texto Então, por que não tornar o texto um pouco maior. Então, como você pode ver agora, algumas coisas também são cinza enquanto outras são pretas para chamar mais atenção. Aqui você quer saber quantas tarefas você tem, então aqui, elas ainda estão visíveis, mas recebem um pouco menos de importância. Mas no final do dia, quando alguém vai ler 24, vai ler urgente depois disso e entender: Ok, 24 tarefas urgentes e assim por diante. Mas o uso excessivo do preto pode fazer com que as pessoas tenham tantas informações para absorver psicologicamente que atrapalham sua percepção, tente não fazer Mas nesta lição, o que vamos fazer como adição é adicionar um botão ou talvez vários botões que nos ajudem a filtrar de acordo com o tempo. Porque, no momento, não está claro. É neste mês, nesta semana? Este ano, quero dizer, do que estamos falando sobre a visão geral da tarefa? Do que estamos falando em termos de KPIs de equipe? Precisamos ter um quadro de referência para poder comparar. Estamos comparando isso com o mês passado ou com o ano passado? Isso vai ser muito diferente. A resposta será algo completamente diferente com base na pergunta que estamos fazendo. Vamos criar um botão muito simples que nos permita filtrar o tempo. O que vamos criar é essencialmente uma lista suspensa. Então, assim como criar qualquer botão, começaremos adicionando um elemento de texto e escreveremos aqui semanalmente ou talvez, digamos, esta semana. Está bem? Agora vamos manter a tecla shift em A, e isso nos permitirá criá-la como A. Isso fará com que seja um layout automático e, em seguida, escolheremos aqui a mesma cor de texto aqui. Vamos dar a mesma cor. E o que vamos fazer é pegar a ferramenta Caneta e criar essa pequena seta. Vamos dar a ele um círculo zero como raio de canto e dar-lhe a mesma cor. Lá vamos nós. Agora vamos dar ao botão inteiro um pouco do raio do milho. Qual é o raio de milho que temos aqui. Isso é 24, então esse 16. Vamos ver que não precisa ser a mesma coisa. Também podem ser oito. Então, agora temos uma decisão a tomar. Vamos colar aqui, primeiro de tudo. Vou colar aqui. Então, agora, é apenas branco e, como você pode ver, não parece tão branco. Parece um pouco cinza. E a razão é porque não tem a mesma sombra. Então, agora temos várias opções. Ou vamos adicionar essa sombra aqui, e então você pode ver que agora ela tem uma dimensão de três D, e então ela tem a mesma aparência, mas então temos um risco aqui. E o risco é que não saibamos realmente se isso porque esses cartões não são clicáveis por si Você não pode clicar no cartão em si, mas precisa clicar nesses três pontos ou em outra coisa. Se houver um botão dentro, você pode clicar nele. Mas isso deve ser clicável e um pouco mais Eu diria que, pessoalmente, é sempre melhor usar um estilo um pouco diferente. Isso pode estar dando uma sombra mais forte. Certo? Mas então você meio que perde o visual. O que eu diria pessoalmente é que talvez adicionar um pequeno contorno como este, um traçado, talvez até mesmo remover completamente o preenchimento, depende totalmente de você Isso nos permite dar uma aparência diferente, e essa aparência diferente pode nos ajudar a torná-la identificável Então, vamos ver o que podemos fazer com o botão. Não queremos que o traçado seja muito grosso e também não queremos que fique muito em segundo plano. Então, do jeito que está agora, eu acho que isso é bom o suficiente, eu diria. Mas agora o que está acontecendo, porém, é que estamos tendo uma área muito vazia aqui. Está muito vazio. E eu acho que devemos preenchê-lo. Então, a maneira de fazer isso talvez seja adicionar um título. Quero dizer, é uma questão de em que página estamos? Ok, estamos no flodesk.com. quais desses itens, projetos de painel, em qual página estamos? É por isso que é importante copiar e colar esse título e adicionar um título aqui e dizer às pessoas: “Ei, neste momento, estamos nesta página e é importante torná-la um título maior do que os outros. Temos que ter alguma hierarquia. Então, aqui eu diria painel, certo? Então, simples agora, estamos mantendo as coisas muito simples e colocando isso. Agora, temos esse botão agora. Está dizendo que esta semana, isso é ótimo. Eu continuaria dizendo que seria ainda melhor se adicionássemos mais opções de filtro. Então, estamos filtrando o tempo. O que também poderíamos filtrar? Talvez uma equipe de design específica? Talvez. Talvez eu não certeza se poderíamos filtrar porque, quero dizer, talvez você tenha várias equipes ou várias seções em sua equipe Então você tem a equipe de design ou a seção de design, a seção de programação e outros enfeites Tudo isso poderia ser integrado, mas isso é algo que vou deixar para mais tarde. Agora minha pergunta é: Ok, então temos esse botão que filtra as coisas acordo com semanas ou meses e outros enfeites Devemos fazer um especificamente para cada cartão? Porque isso é algo que outras pessoas fizeram. Aqui você tem semanalmente. Portanto, tarefa contínua, você pode filtrá-las semanalmente. E aqui você tem as estatísticas do projeto. Você pode filtrá-lo sozinho ou filtrar as tarefas diárias sozinho. E o que estou percebendo é que muitos deles confiam em fazer as coisas separadamente para cada cartão Mas, para ser sincero, acho que a maneira como fizemos isso faz mais sentido, porque então você tem um botão que muda tudo, em vez de ter que trocar cada um. Tipo, e se eu quiser ver nossas estatísticas do ano inteiro? Eu tenho que trocar cada um deles? Isso não faz sentido. Mas vou trocá-lo agora e dizer este ano, ok? Vou alinhá-lo à direita. O motivo é porque temos este aqui e mostra vários meses desde o início do ano. Eu diria que este ano faz muito mais sentido nesse contexto. Então, vamos continuar assim. Se quisermos, podemos até um pouco mais, ver se funciona. Para ser sincero, eu não prefiro isso. Tudo bem. Agora, é claro, precisamos garantir que nossas cartas também estejam alinhadas. Vejo que um deles aqui foi movido de alguma forma, e muitas vezes acontece que, enquanto você está projetando atualmente, você move as coisas sem prestar atenção, então certifique-se de não estragar tudo ou, na melhor das hipóteses, talvez use o layout automático Isso realmente torna sua vida muito mais fácil. Então aí está, acabamos de criar um botão parecido com um filtro, e isso nos ajudou a tornar o design mais fácil entender e também ajustável Tudo bem, agora criamos esse botão, mas precisamos que a funcionalidade suspensa realmente funcione, para podermos ver e entender do que se trata. E a maneira de fazer isso é colocá-los em um layout automático por enquanto e, em seguida, criaremos outra variante. E essa variante deve incluir opções diferentes. Vou esconder isso agora. Vou me esconder, vou esconder esse erro de vez em quando vou trazer essa cópia e colar, mas vou tornar a direção vertical, copiar colar, copiar e colar. Agora temos esta semana e depois será este mês. Opa. Vamos garantir que tudo esteja alinhado no canto superior esquerdo e, em seguida, vamos dizer isso aqui E isso, eu não sei, ou no ano passado. Ok, então vamos ter todas essas opções. E o que vamos fazer é criar um protótipo para que, quando você clicar nele, ele mude para o outro usando animação inteligente E quando você clica em qualquer coisa aqui, ela volta. Agora, normalmente, ele deve escolher um, certo? Deveria ser escolhido esta semana, este mês, e isso mudaria. Mas, no momento, estamos apenas simplificando , então isso não deve mudar. Então, vamos ver como isso se parece agora. Você vê? Ela se estende. Mas o problema é que é transparente. Então, o que vamos fazer é torná-lo colorido quando você clicar nele e ver como fica. Ok, isso não é nada ruim. Você clica nele e mostra, este ano, este mês, sim. Ok, agora temos esse menu suspenso. Você pode editá-lo um pouco. Eu fiz a fonte um pouco maior para que ela possa ser lida com mais facilidade, e vou vir aqui e também dar a elas um pouco mais de espaço entre si e ver como fica Sim, isso é um pouco melhor. E você pode trabalhar com algo assim. É assim que você basicamente cria um botão de filtro suspenso Obrigado por assistir. Na próxima lição, criaremos os cartões de tarefas e trabalharemos nesse painel aqui. 9. Criando os cartões de tarefa: Então, vamos criar alguns cartões de tarefas. Está bem? Então, será principalmente nesta seção. Podemos seguir em frente, copiar esse texto, trazê-lo para esse quadro e tarefas. Então, agora temos as tarefas aqui. Acho que seria muito bom basicamente, se criássemos categorias diferentes. Então, podemos dizer tarefas urgentes ou algo parecido. E então poderíamos ter tarefas mais recentes, algo desse tipo. Ou isso ou poderíamos ter tarefas e você poderia resolvê-las. Na verdade, essa pode ser uma ideia melhor. Eu não sei Decidiremos isso daqui a pouco. Mas agora, vamos criar as cartas gerais. Então, vamos criar alguns cartões e vamos tentar garantir que esses cartões sejam mais ou menos compactos. Queremos adicionar algumas informações a eles, mas não exagerar Então, eu estou copiando o estilo daqui para lá e você sabe, vamos tentar descobrir de alguma forma, para criar um layout muito bom sem exagerar, ok? Então, agora, toda a ideia é que devemos ter um título, e, você sabe, o título é o que a tarefa realmente é. E nesse caso, a tarefa pode ser algo muito simples. Podem ser pacotes de design. O interessante é que, você sabe, a tarefa poderia dizer tudo. Eu poderia dizer que o design está pronto para a Feira de Chicago, certo? Vamos fazer uma feira em Chicago. É chamada de Feira de Chicago ou talvez haja uma feira em Chicago e vamos criar os pacotes para ela. Mas em vez de criar um título como esse, poderíamos permitir que eles basicamente removessem essa moldura. Eu vou dizer pacotes de design. E então, como uma espécie de comentário, vai dizer uma informação extra , vai dizer Feira de Chicago. OK. E então também vai dar uma data. Isso é o que é bom. Estamos dividindo isso em vez de ter apenas uma informação , basta dividi-la em várias camadas diferentes, digamos. Vou copiar isso e acrescentar que vou adicionar um ícone aqui e será um relógio. Então, vamos juntá-los e, em seguida, vamos copiar isso. Essa será a hora ou a data. E poderíamos dizer que 21 de abril, na verdade é tarde demais. Digamos que 21 de julho e, em seguida, teremos informações extras aqui. O que é essa informação, eu não sei. Podem ser acessórios para que pudéssemos encadear. Não tenho certeza. Vamos ver. Sim, o Link deve funcionar. Sim. Lá vamos nós. Vamos fazer com que isso também seja sólido. Vamos dizer que há dois anexos ou algo parecido, e essa é a tarefa Vamos tentar detalhá-lo um pouco. Então, também podemos mostrar quem é adicionado a essa tarefa. Poderíamos fazer isso da seguinte maneira. E só para lembrar que isso também se baseia no que eu vi outras plataformas fazerem. Não somos nós reinventando a roda . Portanto, tenha isso em mente. Não estamos fazendo tudo completamente novo do zero, mas sim fazendo uso das experiências que outras pessoas criaram. Acho que essa é uma configuração muito boa que temos aqui. Poderíamos mudar um pouco, mas acho isso muito bom. Poderíamos tentar fazer com que talvez as cartas tenham um raio de canto um pouco menor porque parecem exageradas Mas também é importante para a consistência, então não tenho certeza. Vamos voltar um pouco, ver como fica. Porque quanto mais raio de canto você tiver, menos informações você poderá colocar sobre essas coisas Mas eu acho que está tudo bem. Agora temos essa configuração assim, e eu acho isso muito bom. Vou transformar isso em um componente e vou dizer ticket. Este é nosso tíquete ou nossa tarefa, e eu vou adicioná-lo aqui e vou copiá-lo e, em seguida, vou colocá-los no layout automático. Poderíamos fazer isso dessa forma, onde temos essas tarefas urgentes e elas são organizadas assim, e então poderíamos ter outras tarefas aqui. Organizado assim. Então, poderíamos adicionar mais algumas tarefas ou fazer isso como um filtro. Existe uma opção de filtro, mas acho que é melhor e vamos aproximá-la um pouco mais Lá vamos nós. Está muito cheio. Eu não vou mentir. Tenho a sensação de que está muito cheio e talvez não esteja centrado Sim, isso é verdade. Não está centralizado Mas ainda é importante. Ele oferece uma boa visão geral do que está acontecendo. O que é muito importante é que também possamos fechar esse menu. Isso também é algo que você deve ter em mente. Agora, o que devemos ser capazes de fazer também é preencher os detalhes, e isso é algo que vou fazer apenas para que você não precise me ver fazendo esse trabalho braçal Mas este é agora o nosso sistema de ingressos. Parece muito bom. É limpo e fornece informações suficientes sobre o que você está fazendo a tarefa, onde ela será ou qual projeto, digamos, para qual projeto exatamente, talvez possamos até sublinhá-lo para mostrar qual projeto é, e então você pode clicar nele Ou podemos trocá-los. Na verdade, talvez façamos isso. Então, temos uma hierarquia um pouco melhor aqui. Você vê? Então, sim, você tem uma Feira de Chicago, pacotes de design e assim por diante. E então fica claro para qual projeto é esse, qual é a tarefa real? Quando é devido e quantos anexos, você tem informações sobre isso, comentários, qualquer E então, quem é realmente designado para essa tarefa? Então, eu diria que essa é uma versão resumida muito boa de um ticket, e definitivamente deveríamos ter uma versão mais expandida dela Mas, por enquanto, isso é suficiente. Nas próximas lições, também trabalharemos em como reduzir esse menu ou esse painel de seção lateral, bem como este. Definitivamente, isso é algo que faremos nas próximas aulas, além de adicionar mais prototipagem, adicionar um pouco de interação e microinterações a esse design Muito obrigado por assistir, e nos vemos na próxima lição. 10. Creating Tables, Charts, Graphs: Tudo bem, então temos um layout muito bom até agora, mas eu gostaria de tirar um momento para mostrar a vocês como eu criei esses gráficos e como vocês podem recriá-los Então, nesta lição, teremos uma espécie de exercício de recriar esses gráficos. Vamos começar. Agora, o primeiro que fizemos juntos, então você já tem uma ideia de como fizemos isso. Agora, os outros vamos levar para o lado e vamos tentar recriá-los um por um Então, aqui temos alguns KVIs. Vou apenas copiá-lo e colá-lo e , em seguida, vou deletar essa parte. Como isso funciona é muito, muito fácil, e você deve tentar pensar nisso nos termos que vou lhe dizer agora, certo? Há muitas maneiras diferentes de recriá-los Mas a maneira como eu faço isso ou a maneira como vou mostrar como fazer é, na minha opinião, a mais limpa, porque muitas pessoas projetam coisas, especialmente quando se trata de design gráfico, especialmente com outros aplicativos que não são o Figma, nos quais há pequenos pixels que estão errados O ícone está indo um pouco para a direita para a esquerda, o espaçamento está um pouco errado Tudo isso são coisas que vamos evitar, vamos tentar evitar tudo isso fazendo dessa maneira. Então, a primeira coisa que você vai fazer começar com os ícones, ok? Então, vou colocar um elemento de texto aqui. Eu vou copiá-lo. Esse será nosso texto, os minutos, e esse será nosso ícone. Vou digitar aqui, incrível. Incrível, fonte incrível sete grátis. Então eu vou escrever o nome desse ícone, que é cronômetro Vamos torná-lo sólido porque alguns dos ícones só estão disponíveis em formato sólido na versão gratuita. Então, vamos fazer isso e, desse jeito, entendemos isso imediatamente, certo? Então, em vez de colocar um círculo atrás dele, o que vamos fazer é criar um layout automático Até agora, você deve ter adivinhado que eu realmente adoro layouts automáticos porque eles tornam as coisas muito Em vez de se preocupar com dois elementos, você só tem uma moldura, certo? Uma moldura e inclui a coisa, você sabe, inclui o ícone bem no meio dela, ok? Agora vamos preenchê-lo. Agora, o preenchimento agora não importa. Só precisa ser uma cor que possamos ver e identificar. Vamos dar a ele um raio de 50 ou 100 cantos arredondados, só para garantir que seja totalmente redondo Outra coisa é garantir que a largura e a altura sejam iguais. Aqui, você pode ver que não é um círculo adequado, então vamos fazer com que os dois sejam 36. Tudo bem. E agora está perfeito e certifique-se que esse ícone também esteja centralizado, não à esquerda Agora está perfeitamente centralizado e agora você pode determinar a quantidade de preenchimento que deseja Então, agora, você pode fazer isso com o preenchimento ou pode fazer isso sozinho, certifique-se de bloquear a proporção Então, aqui, em vez de trabalhar com o preenchimento, você pode simplesmente escrever em 40 e depois ter mais espaço Podemos verificar o tamanho da fonte aqui. É 24, então vamos fazer 24 aqui, e podemos fazer isso 45 e olhar de perto o suficiente. Vou clicar em I para tirar a cor daqui. Vou escolher o ícone e vou pegar a cor desse ícone. Agora eu tenho o texto. Aqui eu vou escrever apenas 50 minutos, e então temos esse elemento aqui. Agora, será o mesmo princípio. Estou copiando isso e estou escrevendo 25%. Vou fazer com que a fonte seja 12. Acho que é o quão grande é. Então eu vou fazer um layout automático e vamos fazer a mesma coisa. Preencha, não importa. Faça 50, 100 e faça o preenchimento, mude-o , mude para o que funcionar para você Então você tem isso como um ícone. Eu vou copiar isso. duplicá-lo, incrível Então você vai escrever a seta cima e novamente, torná-la sólida. Agora temos isso aqui. Vou diminuí-lo, dez, e depois vou diminuir o espaçamento entre eles e o preenchimento também da direita e da esquerda Então parece mais assim. Agora vou descartar a cor. Vou escolher esses dois e vou tirar daqui ou posso simplesmente copiá-los daqui porque é muito pequeno. Tudo bem. Então, agora parece muito parecido. Agora só nos resta esse título, então vamos copiá-lo. A propósito, estou segurando a tecla Alt enquanto a movo, mantenha-a pressionada e mova-a enquanto segura a tecla Alt e você simplesmente a duplica, então vou escrever o tempo médio por tarefa Faça 16 e depois roube a cor daqui. Bam. Agora, esse é um passo muito importante. Agora temos um layout automático aqui, layout automático aqui. Vamos escolher todos na mesma linha e torná-los um layout automático para si mesmos, para si mesmos. Agora essa fileira inteira está junta. Agora podemos fazer o espaçamento de quatro ou oito ou o que quisermos Você também pode optar por torná-los mais próximos um do outro. Só como uma opção, porque, você sabe, a ideia aqui está mais próxima. Isso é texto. Então, os 52 minutos estão tendo um aumento de 25%, e tudo isso está relacionado ao cronômetro, que está relacionado ao tempo médio Então, você os conecta logicamente. Não faz muita diferença porque o espaçamento não é supervisível a olho nu, mas para um designer, é bem visível Então vamos fazer deles um layout automático, certo? Então, aos sete, eu não gosto desses números desiguais, você sabe, então faça com que seja um oito. Por que não? Então, agora nós o temos e tudo que você precisa fazer é simplesmente duplicá-lo, duplicá-lo Mude o ícone aqui, lista da prancheta. Lá vamos nós. Então, com esse ícone, é uma estrela, e então você pega as informações, copia, cola, copia e cola. O bom é que você não precisa mover muito as coisas porque há um layout automático, então você não precisa mover as coisas para isso, e vamos fazer isso. Temos que pegar essa cor daqui, pressionar I, pegar essa cor e depois mudar isso para aquela. Bam, aí está. E certifique-se de que aqui temos esse texto. Podemos estendê-lo um pouco. Podemos, basta clicar aqui e, em seguida, ele será estendido. Então, agora vamos escolher todos eles e colocá-los em um layout automático. Em vez de 19, vou fazer com que seja 16. Você percebe que aqui há uma pequena diferença. Então você pode clicar duas vezes e então vai ser Hug, agora você tem muito mais espaço Vou fazer 24, fazer 36, ver o que funciona para você, e então você pode colocá-lo no meio e pronto, acabamos de copiar isso muito rapidamente, com muita facilidade É tudo uma questão de entender por onde começar. Em vez de fazer todos os ícones de uma vez e depois todos os números, basta criar uma aparência sólida. Quando estiver satisfeito com ele, continue duplicando-o e alterando-o. Agora vamos para o segundo. Vou copiar e colar como antes e vou deletar isso para que a maneira de fazer isso seja bem fácil. Você pressionará O ou escolherá a ferramenta oval e pressionará a tecla Shift para garantir que ela esteja reta e tenha a mesma proporção. Não é como se fosse estendido ou algo parecido. Então vamos pegar essa cor. Agora, copiar e colar, nós copiamos e colamos. Agora vou segurar esse ponto e pegar um pedaço da torta. Em seguida, vou clicar em Eu escolho este. Agora, enxágue e repita copiar e colar. Eu vou fazer isso. Não precisa ser tão exato. Então a mesma coisa, copiar e colar. Vou dar a ele mais espaço. Em seguida, pressione a ferramenta oval O novamente, deixe-a reta, segurando a tecla Shift, e então você terá isso. Então você pega essa foto de algum lugar, você pode simplesmente copiar o preenchimento, copiar a foto aqui, copiar a foto lá e, em seguida, fazer os preenchimentos e aqui você tem um círculo com um.nele. O que vamos fazer é preencher em branco e adicionar um ponto de interrogação. Agora você deve ter notado que isso não é perfeitamente o mesmo. Estou fazendo isso muito rápido. Não precisa ter exatamente o mesmo tamanho, apenas a mesma ideia. Agora temos esses textos e, como você pode ver aqui, estamos trabalhando com layouts automáticos novamente. A maneira de fazer isso é escrever John 20%, e então você obtém um oval muito pequeno e obtém a cor, os dois segurando Shift e depois pressiona Shift e A e agora eles estão em um layout automático, e o espaçamento é quatro Agora segure a tecla Alt enquanto estiver copiando. Agora, coloque todos eles em um layout automático e dê a eles também quatro ou talvez oito e, em seguida, alterne os valores. Basta copiar e colar. Parece que temos dois Johns. Nós temos, não tenho certeza. John, Mary e Lawrence e depois colocaremos Lawrence lá e atribuiremos lá, e pegaremos Laurence está aqui e Mary está aqui. Bam. Assim mesmo , nós o copiamos. E é assim que você pode criar um gráfico muito rápido. Agora, é claro, você pode usar gráficos de outros programas, outros lugares onde você pode importá-los. Depende totalmente de você, mas é assim que você pode criá-lo com o Figma de forma rápida e fácil Acho mais fácil fazer isso na própria Figma, para ser honesto. Agora, chegando ao último, este pode ser um pouco complicado ou pode parecer opressor, mas na verdade não é Então, agora estou copiando e colocando aqui e, como sempre, apenas excluindo A maneira de fazer isso pessoalmente é pegar a ferramenta caneta e segurar a tecla Shift para deixá-la reta. Eu o derrubo. Para onde eu quiser, por aqui, e então eu a estendo. Eu tento ter certeza de que o espaçamento aqui é semelhante ao daqui Nem sempre consigo ser perfeito. Certifique-se de que o traçado seja muito leve porque essa informação não é tão importante, esses eixos. Então temos essa linha legal. Isso pode ser um pouco complicado. Você vai clicar aqui e depois segurar a tecla Shift Just para obter um ângulo de inclinação muito bom e , em seguida, segurar e garantir uma boa curva Então você pode ir para onde quiser. Por exemplo, aqui, você não precisa segurar a tecla shift e depois estender até obter uma boa curva igual, suba onde quiser. Você o traz aqui. E, novamente, obtenha essa curva. É basicamente a mesma ideia, clique duas vezes fora dela apenas para garantir que ela seja salva assim. Você pode voltar a essa primeira e depois fazer uma pequena curva desde o início. E agora você tem uma bela cor. Agora, vou tentar fazer isso com uma cor diferente só para mostrar o que fiz aqui. Agora estou tornando isso verde, certo? Agora, como faço para obter esse pequeno gradiente? Essa é uma boa pergunta. Esse é um estilo de design muito comum, aliás, é por isso que eu faço isso. A maneira de fazer isso é copiar e colar essa linha. Está bem? Então, só para você saber, essa não é uma linha perfeita. As curvas podem ser melhoradas, mas estão totalmente bem. Você deixará um deles como está e, no segundo , clicará duas vezes nele e verá os pontos. Então você vai voltar para o penol. Você vai se conectar aqui. Segure a tecla Shift para ir direto para baixo. Parece que erramos o alvo. Então você vai fechá-lo. Você vai trazê-lo aqui, fechá-lo , e aí está. Então, agora está fechado. Agora você removerá o traçado e adicionará um preenchimento. Mas em vez de um preenchimento normal, você escolherá um gradiente e esse gradiente será linear E deveria ter mais ou menos a mesma cor. Mas, de baixo para baixo, você vai dar 0% de opacidade e você vai dar a tudo isso talvez Então, desse jeito, agora, você tem esse pequeno gradiente. Agora você pode ajustá-lo. Você pode fazer com que seja 25%. Acho que mais leve é melhor. Você pode fazer até 10%, depende de você, ou você pode até mesmo fazer a linha em si. Na linha acima, você pode torná-la mais clara ou mais escura ou depende totalmente de Mas acho que algo no meio é sempre bom. Vou dar 25% aqui e não parece muito ruim. Agora, o mais importante é que essa parte esteja no topo e essa parte na parte inferior. claro que você pode ajustá-lo , mas qual é o objetivo de fazer com que pareça assim? Supõe-se que retrate o aumento real ou a proximidade Você pode ver o quão perto está. Aqui não está tão perto porque não é tão verde. Aqui ele chega perto do pico, mas não tão perto. Aqui fica o mais próximo, por exemplo. Então temos essa linha, essa linha mostra onde está o pico ou o máximo. Você só vai pegar a ferramenta de linha, pressionar L ou escolher a ferramenta de linha aqui, segurar a tecla Shift e seguir em frente. Agora, abaixe um pouco para chegar perto ou chegar até ele, e você terá essas opções Vá para as opções de traçado e em vez de sólido, você terá um traço Então você pode ajustar aqui os traços, que você possa torná-los dez, por exemplo, e então você tem esses pequenos traços bonitos e depois os torna acinzentados para que não fiquem tão claros porque não são a atração principal Então, podemos adicionar os meses agora. Começamos em janeiro e o que você vai fazer é trazê-lo aqui, segurar Alt e organizá-lo, não precisa ser perfeito. Só saiba quantos meses você precisa. Então você tem um, dois, três, quatro, cinco, seis, sete, um, dois, três, quatro, cinco, seis, sete. Em seguida, vou escolher todos eles e colocá-los em um layout automático segurando Shift e A, seguida, vou estendê-lo até o final. Então eu vou escolher Auto. Auto garante que o espaçamento Automático seja automático para que tudo chegue ao final da moldura e o espaçamento seja Eu me estendo até aqui. Vou apenas estender essa pequena linha cinza. Desculpe por isso. Vou apenas estendê-lo um pouco até aqui. Claro. Tudo bem. Agora vamos mudar isso e podemos escrever fb e depois vamos para janeiro, fevereiro, março, abril, maio, junho e julho Não me julgue, mas às vezes preciso cantar a música para realmente lembrar a ordem do mês é apenas um mau hábito que tenho ou não, apenas algo que aprendi e difícil de abandonar. Agora, estamos nos certificando de que seja legível, então está abaixo dessa linha Portanto, essa é a linha de acessibilidade, certificando-se de que haja contraste suficiente. Assim, copiamos o estilo e agora podemos retratar diferentes análises, diferentes relatórios e gráficos e tabelas no Figma sem precisar É um pouco difícil. É rápido e útil? Sim, definitivamente porque eu me lembro disso. Quero dizer, você pode obter outro design, você pode ter outra aparência. Mas se você está realmente projetando um painel, é muito importante definir o design. Você está fazendo o design. Não pegue nada do PowerPoint ou do Excel ou de qualquer outro programa que talvez esteja desatualizado Faça seu próprio design, e essa deve ser a base. Então, trabalhe , tempo para realmente criar algo bonito e que se adapte ao seu estilo e ao estilo do design em que você está trabalhando. Muito obrigado por ouvir. vejo na próxima aula. 11. Ajustamento e limpeza final da UI e: Bem vindo de volta. Nesta lição, vamos dar uma olhada melhor no design que fizemos até agora, embora estejamos muito orgulhosos dele, mas vamos tentar aprimorá-lo um pouco. Uma coisa que me impressiona é que, de alguma forma, não há muitas cores, o que eu vejo como algo positivo Não queremos sobrecarregar as pessoas com muitas cores. Temos muito branco, cinza, sombras e assim por diante Nós fazemos um ótimo uso desses elementos. No entanto, ao mesmo tempo, estamos usando muitas cores muito brilhantes, como roxo, azul, amarelo e verde. E mesmo que sejam úteis em alguns aspectos, por exemplo, você tem o verde aqui indicando um aumento, você tem o vermelho indicando uma diminuição e, em seguida, temos esse sistema de cores com cuidado e recuo. Todos esses rótulos são úteis. No entanto, em outros lugares como aqui, por exemplo, eles só nos ajudam no sentido de que nos mostram que esses são valores diferentes, por exemplo, urgente é diferente de fazer, preso, concluído e assim por diante. No entanto, há uma pergunta: eles precisam ser tão brilhantes? Eles precisam assumir tanta carga cognitiva? Porque agora, você sabe, eles estão chamando minha atenção e eu estou olhando diretamente aqui e aqui Essas são apenas algumas das coisas que eu gostaria de melhorar em nosso design. Então, vamos começar com isso, na verdade. Parece ótimo, mas o que podemos fazer sobre isso? Há diferentes possibilidades do que poderíamos fazer. Agora, uma coisa que podemos fazer sobre isso é tentar usar um sistema mais lógico, digamos. Então, em vez de usar apenas as cores aleatórias ou não realmente aleatórias, elas são as cores da marca. Em vez disso, poderíamos tentar usá-los em um sentido mais leve. Então, usando esse roxo, talvez pudéssemos usar uma versão mais leve dele. Então, de alguma forma, não o remova completamente, mas apenas para torná-lo mais leve. Estou falando de algo mais parecido com isso. Você ainda pode diferenciá-los, mas eles não são tão brilhantes Eles não são tão brilhantes no seu rosto. Acho que isso é muito melhor. Pode não ser tão interessante em termos de design, mas ocupa menos da carga de trabalho cognitiva Em seu cérebro, você não está vendo isso diretamente Portanto, a carga cognitiva é menor. Também não está forçando seus olhos porque você está passando do branco para o roxo muito brilhante, azul brilhante, verde e amarelo, mas agora está um pouco mais macio para os olhos, eu diria Essa é uma maneira de fazermos isso. Outra forma é usar um sistema lógico, porque temos urgentemente que concluir. Agora, concluído faz sentido porque é verde, mas também temos urgência que seja mais roxo. Podemos fazer com que fique vermelho. Isso é um pouco mais lógico. Faz mais sentido que urgente seja vermelho porque usamos isso por aqui, por exemplo. Quando se trata de fazer, fixas e completas, essas cores nem sempre têm um significado. Pode ser isso ou pode ser apenas cinza, para ser honesto, usando cinza, estamos deixando de lado uma cor que temos aqui, mas isso nos ajuda um pouco, e agora ficamos com o sistema de semáforos que usamos antes com essas etiquetas, que faz muito mais sentido porque você tem urgência, que é vermelho, fazer é mais ou menos neutro. Quero dizer, é algo que você precisa fazer, mas não tem uma indicação. Você não está recorrendo a isso e não está se saindo muito bem com isso, é só fazer. Então você ficou preso. Isso é amarelo, o que significa que você está na metade do caminho, precisa chegar a algum Você não o completou e não falhou, e também não é só fazer, está em algum lugar no meio, à esquerda no meio. Então você pode tentar descobrir isso a partir daí. O amarelo faz sentido porque o amarelo é sempre, você sabe, indeciso no meio em algum lugar Sabe, assim como nos semáforos, o amarelo diz: Ei, quase vai ficar vermelho. Mas ainda não está. Então, talvez aproveite sua chance, talvez dirija rápido, talvez diminua a velocidade. Então, aqui você precisa dizer, basicamente , eu preciso de sua atenção. Você precisa fazer algo sobre mim. E então concluído é apenas dizer verde. Isso é verde, é positivo. Não há necessidade de pensar nisso, não há necessidade de adivinhar. Agora, outra ideia é completar também algumas cores neutras. Mas como já temos o cinza, isso seria um pouco confuso pois não haveria muita diferença, ou poderíamos torná-lo mais para azul porque essa é mais ou menos a cor que temos aqui Mas acho que o verde é muito bom. Dependendo dos propósitos, você pode até pensar removê-la como concluída em vez de tê-la. A ideia por trás disso é que você sabe, você não precisa saber o quanto foi concluído. Você precisa saber o quanto ainda precisa ser feito. Mas isso realmente se aprofunda na UX. Eu, pessoalmente, não acredito nisso. Acho bom saber o que você concluiu, em que fez um ótimo trabalho e o que esclareceu Se deveria ser um verde brilhante, isso está em debate, porque acho que está tirando um pouco de energia de você agora. E não é exatamente o que você quer fazer. Mas acho que, por enquanto, otimizamos isso e parece muito melhor. Tudo bem. Então, o que mais podemos fazer aqui? Então eu acho que as cores e as fontes estão bem. Eles não são ruins. Eles não são nada. Mas quando se trata aqui, acho que o esquema de tons de cinza é neutro demais para mim. Estou pensando que talvez haja uma maneira de mudar isso. Não tenho certeza. Vamos experimentar as coisas. Então, estou apenas tentando escolher as cores aqui e dar um pouco mais de identidade Não sei se podemos fazer isso porque também não queremos estragar as coisas ao mesmo tempo Também acho que não há muito contraste aqui Vamos tentar obter um pouco mais de contraste. O círculo aqui não é tão importante, mas o ícone seria ótimo se pudéssemos distingui-lo se fosse mais compreensível Eu acho que isso é melhor. Acho que isso lhe dá um pouco mais de identidade. E sim, é uma mudança muito pequena, nada muito grande. Então, sim, acho que isso é bom e temos um bom espaçamento. As coisas estão funcionando nessa área. Agora, chegando aqui, essa é uma bagunça que precisa ser resolvida. Em vez de clicar em cada elemento, vou filmar as cores selecionadas aqui e vou mudar as coisas ou tentar, pelo menos. Seguindo o mesmo princípio, uma coisa que poderíamos fazer com muita facilidade é simplesmente escolher cores mais claras, mais cores pastel Então temos esse azul aqui, muito claro. Eu escolheria deixar isso agora cinza, e então vamos usar isso aqui como azul claro, talvez. Tudo bem. Agora vou deixar isso um pouco mais leve. E quando se trata do amarelo, vamos ver o que podemos fazer. Vamos voltar às cores de seleção. Acho que disse a vocês que vou fazer isso e depois estraguei tudo e não fiz direito, então vou consertá-lo agora OK. Agora, volte. Com esse roxo, vamos escolher algo mais claro , mas não muito claro. E então temos o amarelo. Parece que temos dois amarelos diferentes. Então, isso parece, quero dizer, é mais suave para os olhos, mas, para ser sincero, não estou muito feliz com isso Não parece muito bom. Vamos ver o que podemos fazer sobre isso. Então, talvez em vez de preencher, talvez possamos ter uma espécie de traço quando se trata dessa área vazia. Poderia fazer a mesma coisa aqui e apenas dar um golpe. E quando se trata dessas cores de volta? Devemos trazê-lo de volta? Não deveríamos? Podemos cometê-los. Eu cometi o erro novamente. Você precisa fazer isso a partir das cores de seleção para poder alterar o círculo correspondente com a fatia, em vez de fazer isso duas vezes Estou tentando garantir que essas cores também sejam reconhecíveis aqui e também sejam diferentes umas das outras Agora, eles estavam muito perto. Então, vamos ver. Agora, idealmente, você sabe, o que estamos fazendo agora é meio que estimar e ver o que funciona melhor, mas o ideal é que você não faça isso aleatoriamente, mas sim configurando um bom sistema de design com um guia de estilo Mas não temos isso, então estamos fazendo coisas, você sabe, rápidas e sujas e, você sabe, tentando descobrir as coisas de forma alternativa, o que eu gosto de fazer às vezes é adicionar cores semelhantes para que você tenha algo assim Eu acho que é bom porque, embora tenhamos duas cores agora , isso lhe dá mais identidade ou mais personalidade. Mas o que você percebe é que pode ser problemático , porque John e Mary têm cores muito semelhantes Então, pode ser complicado. O que poderíamos fazer é trocar John e Mary. Então, a maneira de fazer isso é copiar isso e colar aqui, depois escolher isso e abrir minha área de transferência Então, agora há uma espécie de amortecedor no meio deles amortecedor no meio deles Esse rosa está no meio. Então agora você pode diferenciá-los um pouco. Eles não são claramente diferentes. Mas acho que é uma paleta mais harmoniosa aqui. Eu não sei. Sinto que gosto mais. Não está usando os amarelos, não está usando outras cores, mas acho que está tudo bem Não precisamos usá-los por toda parte. E lembre-se de que tenho apenas três, mas o ideal é que você tenha um quarto, um quinto, um sexto, dependendo do tamanho da sua equipe, e então você usaria mais amarelo. Talvez você introduza laranja, vermelho, qualquer coisa. Apenas certifique-se de ter algumas cores no início e, em seguida, continue expandindo-as para outras cores diferentes. Mas acho que podemos viver com isso ou talvez possamos fazer algo assim. Vamos ver. Eu acho que isso é melhor. Agora estamos usando esse cinza acinzentado ou azulado, que é cinza escuro ou cinza arroxeado Agora isso está funcionando, há uma conexão entre essa área, essa área e essa cor, e agora um pouco mais aqui. Isso é mais sombrio. Agora, quando se trata disso, eu realmente gosto disso, mas há alguns pequenos ajustes que podemos fazer. Eu pude ver que essa linha está chegando aqui, então poderíamos jogá-la para trás. Veja. Basta jogá-lo de volta aqui e ele ainda está transparente, então podemos simplesmente levantá-lo. Lá vamos nós. Isso é muito melhor e podemos ver a mesma coisa aqui. Há uma pequena sobreposição, vamos remover isso e vamos ver Também vamos derrubá-lo. Outra coisa que podemos fazer é também abrir essa moldura. Também podemos adicionar um círculo para indicar apenas o ponto alto. Círculos são sempre bons com gráficos para indicar certos pontos ou períodos de tempo importantes , ou talvez você possa usar o mouse e ele mostre pontos diferentes e seus valores Aqui temos o ponto mais alto. Talvez devêssemos destacar o ponto mais baixo, algo assim. Mesmo que seja bom indicar que esse é o ponto mais baixo. Não tenho certeza se poderíamos fazer isso com a cor. Ok, então eu acho que devemos colocar essas linhas em cima disso e então tudo bem. Ou podemos ter certeza de que isso não é transparente, pois há um traço aqui Está bem? Removeremos esse preenchimento e garantiremos que esteja em 100%, e teremos que descobrir, vamos escolher a cor de si mesma e torná-la 100%. Lá vamos nós. Agora não temos nenhum problema de transparência e é da mesma cor que temos. Tudo bem. Agora está um pouco melhor, embora eu ache que o vermelho é demais , vamos redefinir OK. Acho que vou trazer isso de volta aqui. Em vez de cinza, acho que vou optar por usar a mesma cor para escolher a cor daqui. Agora temos o ponto mais baixo e o ponto mais alto. Você pode indicar qual é esse número. Não tenho certeza do que o desempenho aqui deve indicar ou como seria medido, mas digamos que temos 89% aqui Essa é uma alta, 89%, e essa é uma baixa de 74 74% Assim como jogar alguns números lá fora. Mas agora você pode ver que as coisas estão se encaixando melhor porque agora você tem alguns números, algumas indicações, você entende que esse é o ponto mais baixo, esse é o ponto mais alto, isso é quanto custava e algumas indicações aqui e ali para nos informar que esses gráficos estão realmente fazendo algum sentido Eu diria que também seria ótimo aqui se adicionássemos um eixo Y. Então, basicamente faríamos isso adicionando alguns números. Então, vamos pegar a cor a partir daqui. Então, alinhe isso à direita e diremos que isso é 90% Vou pegar todo esse gráfico para a direita. Escolheremos todos esses. Vamos colocá-los no layout automático e depois eles se espalharão. Então vamos ver que isso é 74%, isso deve estar em algum lugar 80% Talvez tenhamos exagerado com os números. Vamos ver o que podemos fazer sobre isso. Estique isso aqui. Agora podemos ver se isso foi 70%, talvez excluamos isso também. Isso seria em torno de 74%. E então isso seria basicamente 79. Agora temos o eixo Y, e ele nos diz que, preferencialmente, eles também devem ser rotulados Então, isso deve dizer, esse é o desempenho, esse é o momento. Mas aqui, nesse caso, faz sentido, esses são os meses, então está claro e aqui você tem a porcentagem. Mas devemos, quando você clica nele, ele deve dizer, ok, é assim que medimos a porcentagem. Mas aqui não somos matemáticos, não somos estatísticos somos estatísticos Nosso trabalho não é descobrir qual é a melhor maneira de medir o desempenho ao longo do tempo ou o que quer que seja ou a produtividade, mas estamos apenas tentando representá-lo graficamente. Normalmente, você deve ter um número adequado em algum lugar. Acabei de perceber que eles não estão dentro desse grupo, então vou inseri-los no grupo, colocá-los corretamente. OK. Lá vamos nós. Eu acho que isso é bom o suficiente. Tudo bem, então agora vamos mudar isso. Agora, passando para outros aspectos. Então, temos esses botões aqui, temos as notificações. Eu não quero mudar muito. Não quero polir muito porque isso também pode sair pela culatra Outras coisas que poderíamos fazer, poderíamos brincar com o espaçamento aqui com o preenchimento Acho que talvez tenhamos colocado muito acolchoamento. Mas isso é claro, depende do seu design. Então eu acho que podemos, talvez, nós possamos apenas torná-los menores. Mantenha o controle e então você pode meio que cortá-lo. Ok, agora temos mais espaço. Economizamos alguns pixels, o que economiza muito mais espaço para nós. E quando se trata disso aqui, uma coisa que está me incomodando é que você não sabe onde termina. Você sabe, é só branco. Então, estou pensando que talvez pudéssemos dar um pouco de sombra. Então, vamos ver como podemos fazer isso porque isso pode ser um pouco complicado Então, se dermos 24 pontos de desfoque e depois vamos dar uma olhada. E o principal problema que acontece Whoops. OK. É que você pode ver a sombra de cima, o que é algo que você definitivamente não quer. Então, para neutralizar isso, vou dizer, vou fazer o Y 24 e, em seguida, fazer com que tudo isso seja talvez 15% Então, vamos ver como está agora. Ok, isso é realmente ótimo. Você pode ver agora porque a sombra está diminuindo muito, está misturada, então não parece que está separada daqui, mas há sombra suficiente para mostrar que esse é um menu lateral e isso diferencia esse menu do conteúdo à direita Então, isso é realmente ótimo. Mas uma coisa que ainda me incomoda sobre isso é o espaçamento, talvez Deixe-me segurar a tecla Control Alt A para editar todas as instâncias, diferentes versões delas. Estou editando aqui e ali ao mesmo tempo. Vou diminuir isso e ver como fica. O que me incomoda é que, quando você destaca, há muita diferença aqui Talvez o que possamos fazer seja controlar novamente a Alt A, então eu escolho todas elas. Talvez eu possa basicamente adicionar mais preenchimento. C. Antes de ir, eu vou voltar. Vou me certificar de que isso vai ser difícil. Tudo bem. Eu reconheço que vai ser difícil. Vou fazer com que seja 16 por 16. Agora vou escrever 53 e vou torná-lo com proporção bloqueada. Ok, ou na verdade, vou remover o registro e vou fazer a mesma coisa aqui, vou fazer isso. Quanto foi isso? 53. Tudo bem. Então, agora vamos ver como eles se parecem. Agora, eles deveriam ser muito mais grossos, mas vejo que não mudaram Isso significa que confundimos demais as instâncias Às vezes, isso acontece se você alterar manualmente as instâncias. Então, agora vou alterá-los manualmente aqui. 53. Agora vamos ver. Portanto, os botões são muito maiores, o que nos permite escolhê-los com muito mais facilidade especialmente porque não temos muitos itens, funciona bem. Agora podemos voltar e fazer o espaçamento talvez até menos quatro, certo? Então, agora eles estão mais próximos um do outro. Então, quando você passa o mouse sobre um deles, há muito pouco espaço entre eles, e há muito pouco espaço entre eles, acho que é assim que deveria ser Esse é o meu próprio gosto ou os princípios de design, o estilo em que fui treinado É assim que parece principalmente. Então, sim, isso parece muito bom. Sabe, é um pequeno detalhe, mas faz toda a diferença para mim. Pode ser que o painel seja um pouco curto demais, então podemos ampliá-lo um pouco. Especialmente, você deve ter em mente que quando você localiza para idiomas diferentes, isso significa que quando você tem um produto, você tem um design e, em seguida, você terá idiomas diferentes aqui Especialmente quando se trata idiomas específicos, como o alemão, eles têm textos muito, muito longos. Então, em vez de painel, você teria uma palavra muito longa. Então você tem duas opções. Ou você criará espaço suficiente para que as pessoas possam escrever sua versão no idioma localizado, qualquer que seja, ou você terá que recortar a palavra, não realmente recortá-la , mas recortá-la Vai ser B, ponto ponto ponto. A ideia é que sim, a palavra é muito longa, então você tem que adivinhar o que é. Mas isso é muito ruim para os usuários. Você deve tentar evitar fazer isso porque , em vez de mostrar o painel, digamos que sejam palavras muito mais longas como controle do painel. Mas em vez de dizer controle do painel, basta dizer painel, con, ponto ponto ponto. Então não é compreensível o controle do painel, o quê? O que exatamente está sendo descrito aqui? É o que acontece com ser honesto com idiomas como o alemão, porque eles têm palavras longas. Traduzir o painel para o alemão pode resultar em uma palavra muito longa e, se o menu não for longo o suficiente, se não for amplo o suficiente, ele será reduzido e os usuários não entenderão o que é Isso é tudo que estou tentando explicar para você. A ideia é garantir que você tenha espaço suficiente. Mesmo que você pense, ei, minhas palavras são curtas o suficiente. Eles vão caber aqui. Mas pense de uma forma sustentável, de longo prazo, que seja pensando no futuro e no que está por vir. E quando você fizer isso, as coisas farão sentido. Tudo bem. Então, agora que temos isso, acho que é bom o suficiente para polir Há muito mais que poderíamos fazer para ser honestos, mas não temos tempo para isso. Acho que devemos parar com isso. Agora que nos concentramos nos elementos mais importantes que poderiam estar atrapalhando as experiências dos usuários, acho que isso é suficiente e podemos seguir em frente e passar para coisas mais importantes Muito obrigado por ouvir, e nos vemos na próxima lição. 12. Criando interações: estados hover e pressurados: Uma parte essencial de qualquer design são as microinterações que os usuários têm ao interagir com seu design Eles precisam sentir que está vivo, que é responsivo, que está respondendo aos seus cliques, ao passar o mouse e assim por diante É por isso que usamos o recurso de interação no Figma. Espero que você esteja familiarizado com isso. Nós o usamos um pouco até agora, mas vamos usá-lo um pouco mais intensamente agora Vamos começar a fazer isso de forma muito simples. Não vamos exagerar, mas acabamos de fazer esses ingressos O que vamos fazer agora é criar outra instância. Ok, é assim que vamos fazer. Eu deixei todos os textos acinzentados, e o que vamos fazer agora é tornar pelo menos esse texto mais escuro Isso é o mais simples possível. Nada muito louco. O que também podemos fazer possivelmente é tornar as sombras mais fortes, opcional Agora vou fazer um protótipo disso. Vou até o painel do protótipo, pegar essa seta e colocá-la aqui, em vez de clicar, vou dizer, enquanto estou passando o mouse, animação inteligente A animação é animada de forma inteligente e vamos ver como fica OK. Gosto muito do texto e tudo mais, mas acho que a sombra está sumindo demais. É muito exagerado O que você pode fazer é chegar a dez e talvez possamos aumentar a posição, fazer Y e oito. Agora a sombra está passando por baixo dela. Eu acho que isso não é nada ruim. O que também poderíamos fazer ajustar isso para que isso aconteça muito mais rápido. Em vez de 300 milissegundos, 100, então isso é menos de um terço O bom é que parece que o site é mais rápido. Dá essa impressão porque está respondendo aos seus movimentos muito mais rápido do que antes. Isso é uma coisa que podemos fazer. Podemos prosseguir com os outros elementos agora, um por um. Nós criamos esse filtro. Eu só vou escrever um filtro. A maneira de fazer isso é copiar e colar este aqui e tentar torná-lo mais interativo. A maneira de fazer isso talvez seja torná-lo um pouco mais escuro Torne o texto um pouco mais escuro, talvez. Vamos ver. Então, temos que prototipá-lo agora Então, sem pressionar, mas pairar, lá vamos nós. Não é muito fácil de ver, para ser honesto. Eu só tenho que remover esse modo um pouco. OK. Lá vamos nós. Às vezes, com um derrame, é difícil ver na figma porque o traço é um pouco fino demais para ele, mas isso também parece bom Talvez tenhamos ficado um pouco escuros demais. E também podemos fazer isso de uma forma que leve um pouco mais de tempo, 200, 200 milissegundos, acho que parece muito bom, muito bom E podemos torná-los também um pouco mais escuros, o texto aqui Lá vamos nós. Você passa o mouse sobre ele, você pressiona sobre ele. Perfeito. Lá vamos nós. OK. Agora, a seguir, também temos esses botões de menu e esses botões de ícones. Esses botões de ícones estão aqui. Mesmo que sejam todos botões de ícones, tecnicamente, isso é diferente Poderíamos chamá-lo de botões de cabeçalho ou algo parecido. Tudo bem, então como isso funciona? Basicamente, vamos clicar nela da mesma forma, criar uma nova instância e tornar o preenchimento um pouco mais escuro, um pouquinho E a mesma coisa com o ícone em si. Agora vamos ver como fica. Então, enquanto paira, lá vamos nós. Simples assim. Você vê isso? Potencialmente, também poderíamos aumentar o tamanho dele Para ser honesto, podemos torná-lo 50 por 50. Então, temos muito mais espaço entre eles ao redor deles e, dessa forma, temos mais espaço para clicar no botão, na verdade, certo? Então isso está feito. O que também poderíamos fazer é que esse é o nível profissional. Poderíamos adicionar uma versão que seja clicada ou pressionada Quando seguramos os dois, clicamos no sinal de adição, arrastamos aqui e diremos enquanto pressionamos. Então você vê esses? Nós os pressionamos e depois eles ficam descoloridos Isso é enquanto pressiona. Hum, agora, acho que está ficando cheio de bugs Mas sim, isso deve acontecer apenas pressionando ou, poderíamos dizer, uma vez que você clica neles. Então, uma vez que você clica nele, esse é o estado escolhido. Mas não é isso que queremos, mas na verdade poderíamos removê-lo talvez daqui. Lá vamos nós. E poderíamos ligá-lo novamente enquanto pressionamos. Quando você passa o mouse sobre ele e pressiona , ele deve virar para isso Mas lembre-se de que aqui há um flutuador. É isso que está estragando tudo. O mouse o leva de volta ao estado e depois volta aqui e assim por diante Vamos testá-lo agora novamente. Agora, enquanto pressiono, eu termino minha prensa e pronto. Desapareceu. Obviamente, o objetivo não é que alguém clique por um longo tempo, mas sim que clique uma vez e, em seguida, fique assim e depois apareça Mas também não precisa ser dessa cor. Essa é apenas uma cor muito forte relacionada à identidade, mas não precisa ser. Mas isso é apenas para demonstrar para você como poderia ser. Agora vamos aos botões do menu. Tudo bem. Então, quando eu tenho múltiplos, o que eu gosto de fazer é copiá-los e colá-los aqui, os dois, e então eu começo a prototipagem Então fazemos enquanto pairamos e eu posso fazer a mesma coisa aqui, enquanto Então, poderíamos ajustá-los com os mesmos valores que temos aqui. Essa cor, pegue aqui, cole e essa cor também. Agora, para eles, não vou criar uma versão prensada. Deixe-me ajustá-lo. Eu não vou criar uma versão prensada, mas sim, eu gostaria de criar uma versão que seja escolhida, que seja selecionada. Quando você está em uma página específica e ela é selecionada, ela deve mostrar isso. Eu vou escolher a mesma coisa aqui, talvez, ou na verdade, deixe-me fazer isso. Eu vou escolhê-los e vou fazê-los coloridos. Sim. Vou pegar isso e torná-lo super leve Obviamente, é sempre bom dar nomes às suas variantes. Aqui eu vou dizer tipo, e isso é padrão, e vou dizer aqui ao passar o mouse e depois ao pressionar A mesma coisa aqui, vou apenas escrever o tipo. Vou escolher esses padrões ao passar o mouse e pressionar. Também podemos acrescentar algo aqui e dizer: colapso, não. Esses são, como dissemos, eles são padrão. Mas esses são o colapso, você entra em colapso sim e aqui, não. Isso torna mais fácil entender o que você tem, porque agora, quando chegarmos a essa parte ou eu for editá-la aqui, vou escolher essas e vou dizer na imprensa. Dissemos que não queremos isso na imprensa, mas sim selecionado. Exatamente. Agora, quando vamos ao nosso design, ele nos mostra em qual página estamos, o que é muito legal, e veja o efeito de foco É muito bom. É muito legal. Então, agora temos uma coisa que resta, que é fazer um protótipo desse painel saindo, além de este também ser dobrável Podemos fazer a mesma coisa com os dois. Só temos que descobrir como. E isso não é muito difícil, então vamos fazer isso na próxima lição. Muito obrigado por ouvir. Te vejo na próxima. 13. Criando um recurso de colisão de painel: Acho que já provoquei você o suficiente sobre fazer essa pequena interação de derrubar esses painéis, o da direita, e expandir o da esquerda Agora, esse não será um truque tão fácil, então você tem que prestar atenção porque eu mesmo não sei exatamente como vou fazer isso. Há muitas maneiras diferentes de fazer isso, e vamos experimentar uma delas e ver o que resulta dela. Eu gostaria de me concentrar primeiro em criar uma interação para esta, apenas para reduzi-la e colocá-la novamente. E a maneira de fazer isso é, quero dizer, há maneiras diferentes de fazer isso, certo? Mas uma maneira de fazer isso é uma espécie de ícone que muitas pessoas criam. Eu só vou te mostrar como é, só vou criá-lo muito rapidamente. Geralmente tem uma linha como essa no meio, não bem no meio, mas na lateral. E tem uma flecha. Ok. Então, parece um pouco assim. Acho que poderíamos fazer uso disso. Mas não está exatamente indo para onde queremos que vá. É um pouco difícil de controlar. Mas acho que vamos descobrir isso. Isso é bom o suficiente. Vou pegar isso aqui mesmo. Opa. Vou colocar esse aí dentro. Vou transformar isso em Oops. Ok. Vou cortá-lo e adicioná-lo aqui. Ok. Então eu vou mudar as cores. Vou deixá-lo bem escuro, não muito escuro. Vamos ver como fica se estiver visível. Ok. Não é tão visível, para ser honesto. E queremos que seja visto para ser entendido pelas pessoas. Então, talvez vamos torná-lo um pouco maior. A ideia é mostrar um painel lateral aqui. Também podemos tentar torná-lo um pouco mais grosso. Isso não funcionou muito bem. Então, vamos voltar ao que era e tentar fazer com que funcione. Agora temos isso e o que vamos fazer é pegar isso, vamos colar aqui e vamos transformar tudo isso em um componente e vamos chamá-lo de painel de tarefas. Em seguida, vamos adicionar essa instância disso. Nesse caso, vamos basicamente fechá-lo desse jeito. Ok, e ao fazer isso, o que estamos basicamente fazendo é encerrar tudo isso e, em seguida, vamos pegar todo o conteúdo que temos, exceto o ícone que acabamos de criar Vamos pegar todo o conteúdo até aqui e levá-lo para a direita para que ele basicamente desapareça Então, possivelmente, poderíamos até mesmo fazer isso menor. Agora vamos ver como isso se parece. Talvez retomemos o assunto. E então vamos fazer dele um pequeno botão elegante Vamos transformar isso em algo, mas não clicando no painel, mas clicando nesse botão, vai se transformar nisso e talvez leve 300 milissegundos Então, quando clicarmos nesse botão, ele voltará. Sim. Então talvez devêssemos inverter esse botão. Ele remete esse rosário para que se entenda que, quando você clica, ele se inverte Agora vamos tirar isso, mantê-lo de lado e adicionar esse painel. Vamos alinhá-lo aqui e ver como funcionaria agora Bem, isso é muito legal. Você pode ver que funcionou muito bem, tem uma pequena animação agradável. Mas há um problema. Não queremos que desmorone aqui, queremos que vá para a direita e queremos que tudo isso se expanda. O que também vai ser um pouco complicado. A maneira de fazer isso é manter todos esses três e torná-los um layout automático. E então o que vamos fazer é levá-los para o lado aqui e chegaremos a esse pequeno painel. E quando ampliarmos esse painel, você perceberá que as coisas saem do controle. Nós não queremos isso. Queremos que, quando movemos as coisas, elas permaneçam as mesmas. Eu vou escolher todos os elementos e vou enquadrá-los, e depois vou centralizá-los de cima para baixo Agora, quando movermos isso, eles permanecerão centralizados. Ok. Agora, o que vamos fazer é chegar a esse layout automático e dizer que, para esse quadro, ele preencherá o contêiner o máximo possível , exceto que vamos adicionar um pouco de preenchimento à direita, porque não queremos que o espaço à direita seja bloqueado dessa forma Você vê? Então, vamos contar isso à direita. Vamos clicar aqui e dizer à direita, queremos 24, agora parece saudável. Agora vamos voltar e ver que algo está errado. Vamos atualizar isso. Tudo bem, então é assim que parece. E quando clicamos no botão de recolher, ele vai fechá-lo, como você pode ver, e vai manter esse botão aqui. Agora, esse espaço ainda está um pouco desperdiçado, para ser sincero, o que não me deixa feliz Mas o objetivo aqui é dar mais foco ao que você tem aqui. Portanto, tenha isso em mente, não se distraia com outras coisas Esse é um recurso muito legal que você pode criar, mas queremos criar algo semelhante para a esquerda, mas não necessariamente com esse botão, mas com outra coisa. E só para fazer isso até o fim, quero ter certeza de que também temos uma versão disso. Vamos copiar e colar. Quero uma versão disso que seja destacada. Este tem essa cor, mas na verdade deveria ser branco. Quando você realça, fica um pouco mais escuro. Então, vamos adicionar uma interação flutuante. É 200 e veja como fica. Lá vamos nós. Mas está um pouco escuro demais. Deixe-me trapacear a partir daqui, pegue essa cor. Tudo bem Está aqui, e podemos tornar a cor aqui um pouco mais escura, talvez Ok. Não consigo ver muito bem porque é muito fino. Mas sim, aí está. Agora você tem alguma interação acontecendo aqui, que eu realmente amo. É um recurso muito legal. Tudo bem, agora aprendemos como criar um menu dobrável no painel lateral ou como você quiser chamá-lo E na próxima lição, aprenderemos como criar uma função de foco aqui Agora, como mencionei, vamos fazer isso de forma um pouco diferente. Em vez de ter esse botão aqui, o que muitas pessoas têm, eu quero que ele funcione com a função de passar o mouse Então, quando você passa o mouse sobre ele, ele mostra os itens Quando você não passa o mouse sobre ele, ele permanece em colapso, porque você simplesmente não precisa dele Ok, então eu vou te ver na próxima lição. 14. Criando uma interação hover para barra lateral.: Agora, quanto ao meu próximo truque de mágica, vou adicionar uma função de passar o mouse aqui que mostra a versão não reduzida do menu lateral, completamente aberta com todos os títulos e textos e Está bem? Então, estamos quase lá na verdade, porque já temos essas duas instâncias, então realmente tornamos isso um pouco mais fácil para nós mesmos. Podemos nomeá-lo aqui. Poderíamos dizer, você sabe, colapso. E então poderíamos dizer aqui, não, e aqui podemos dizer sim, parcialmente desmoronado Tudo bem, como fazemos isso? Bem, não é tão difícil. Você simplesmente acessará a página do protótipo aqui e virá aqui e clicará enquanto passa o mouse O gatilho é que, enquanto você passa o mouse sobre ele, ele mudará para a versão não dobrada, e isso acontecerá com a animação Smart Anim e isso acontecerá com a animação Smart Anim Ease out 500. Agora vamos ver como fica. Aí está. Parece muito legal. É muito bom, mas talvez você possa torná-lo um pouco mais rápido. Então, 300 talvez. E você pode examinar cada item da lista, e é basicamente isso. Mas não é tão fácil porque agora estamos tendo um problema. Quando se desenrola, quando se expande, cobre uma parte do painel de uma forma muito pouco elogiosa . E a maneira de se livrar disso é possivelmente ir em frente e acessar todo esse quadro e fazê-lo abranger o conteúdo Então, quando isso acontece, quando fazemos isso, o painel vai para a direita junto com as tarefas. Mas vamos garantir que isso não atrapalhe nosso efeito aqui E aconteceu, infelizmente. O motivo é que, ao fazer isso, você conta ao quadro, abraça o conteúdo, não expande, não vai mais longe Se esse conteúdo ficar menor , você deverá diminuir com o conteúdo. Se ficar maior, você fica maior com isso. Mas esses dois efeitos agora estão indo um contra o outro. Agora temos que descobrir uma maneira fazê-los concordar um com o outro. Eu vou fazer isso fazendo este recipiente de preenchimento de moldura. Mas o problema é que, assim que você faz isso, essa largura de toda a moldura muda de conteúdo enorme para fixa Quando você fizer o oposto, ele transformará isso de preenchido em fixo. Como você pode ver, eles são totalmente opostos. Eles estão se desligando. Existe uma solução alternativa. Não vai ser exatamente o que queremos fazer. Mas a maneira de fazer isso é colocá-lo em um layout automático por si só, mas em vez de torná-lo abraçado, você o tornará com largura fixa Isso significa que quando o menu se expande, a moldura que o contém não se expande com ele O efeito resultante é o que você vê agora. Então, ele se expande, mas não com a moldura, nada mais se move Mas, basicamente, o que queremos é que todo esse menu esteja no topo do painel, não atrás dele. Veja como resolver isso. Você clicará na moldura e fará esses ajustes quando se trata de empilhamento de telas Em vez de último na parte superior, você dirá primeiro na parte superior A primeira camada aqui vai ficar em cima da outra e aí está. Obviamente, ele não mantém o efeito que desejamos ter, onde basicamente aparece como se fossem janelas. Mas acho que está tudo bem. Podemos viver com isso e podemos voltar aqui e configurar isso para encher o recipiente para que esse truque funcione. Então, agora veja como funciona. Então, desse lado, funciona e, desse lado, é expansível e parece bem legal Temos nossos projetos, tarefas, calendário, equipe, tudo o que precisamos, e isso tem um pequeno efeito interessante. Agora, uma coisa que, para ser sincera, me irrita um pouco é que às vezes, você sabe, não é isso Há uma camada adicional, uma camada extra nela. Porque e se eu quiser clicar no ícone, mas assim que eu chegar até ele, você estiver apenas movendo as coisas. E há uma solução para isso. Então, em vez de trabalhar com o mouse enquanto passa o mouse como gatilho, você deve trabalhar com enter do mouse porque o Enter do mouse diz: Quando o mouse entra nesse objeto, ele se expandirá ou fará essa ação, mas você pode adicionar Então, por exemplo, 500 milissegundos. Então, o que acontece quando você passa o mouse não se expande imediatamente Você tem que passar o mouse e, 500 milissegundos depois, ele se abrirá Na verdade, vou fazer 1.500. No entanto, há um problema. Depois de passar o mouse sobre ele, ele não volta. Para resolver isso, você precisa voltar a esse quadro e interagir com ele, e o gatilho deve ser a saída do mouse. Depois que o mouse sair, após 1.500 milissegundos, você também terá uma opção Você tem um atraso e, em seguida, ele entrará em colapso. Vamos ver como fica. Você passa o mouse sobre ele e, um pouco depois, ele se abre. Você o remove. E depois fecha. O que é realmente legal nisso é que pode parecer uma pequena diferença, mas é exatamente disso que trata a UX. É sobre essas pequenas microinterações. O interessante é que ele oferece ao usuário, em primeiro lugar, a opção de alternar muito rapidamente, porque existem usuários avançados que desejam alternar rapidamente entre as guias. Eles querem clicar aqui e ali. Então você expandi-lo não ajuda a pessoa. Isso atrapalha eles fazerem as coisas, certo? E é como uma animação extra que não precisa acontecer. Se eles já clicaram na página que desejam acessar, você realmente não precisa dela. É por isso que isso é legal, pois adiciona um atraso caso alguém não esteja realmente familiarizado ou seja um novo usuário e diga: Ei, o que era essa página? E então leva esses três segundos extras e depois abre para eles. E diz a eles, ok, aqui está uma explicação de tudo. Parece que você não sabe se virar, então aqui está tudo explicado. Então, uma vez que você se move e ainda quer voltar, você ainda tem tempo. É por isso que também há um atraso no colapso. Mas uma vez que você diz, Ei, eu terminei, eu preciso verificar essas coisas e então tudo cai. Mas eu vou fazer isso em vez de ser 1.500, eu poderia fazer 1.000 milissegundos Atraso, acho que isso é mais do que suficiente. Agora vamos ver como isso se parece, e então eu escolho onde eu quero, e então eu termino. Bam. É tão fácil quanto isso. Não há nada mais fácil. E sim, eu acho isso muito legal. Agora temos um layout muito bom e interativo, e ele parece vivo, certo? Parece que é personalizável. Você pode dizer: Ei, eu quero ver as tarefas. Não quero ver a tarefa. Quero ver se quero filtrar o ano. Não, na verdade, eu quero abrir o menu aqui e conferir outras coisas. Totalmente bem, totalmente factível. Isso é realmente incrível. E isso continua aprimorando a experiência do usuário. Então, agora que fizemos isso, nas próximas lições, faremos algumas outras coisas. Uma delas é que vamos aperfeiçoar um pouco nossa interface. Começamos com muito entusiasmo e fizemos muitas coisas Mas talvez seja hora de voltarmos e repensarmos alguns deles. Só de olhar para isso muito rapidamente, eu poderia dizer: Ei, as cores são um pouco brilhantes demais. Não estou falando em mudar as cores, todas as cores imediatamente, mas talvez brincar com elas, torná-las um pouco mais claras, expandi-las porque queremos ter certeza de que a atenção do usuário seja direcionada para as coisas em que ele realmente deveria se concentrar. OK. Além disso, vamos adicionar algumas outras funcionalidades Então, uma dessas funcionalidades são as notificações. Também podemos fazer algo com histórico, perfil, pesquisa. Todas essas são possibilidades do que poderíamos estar fazendo. Além disso, eu também gostaria de criar a possibilidade de irmos para outra página. Agora, só para avisá-lo, acho que não temos tempo para preencher essas páginas com conteúdo significativo, mas acho que devemos prototipar o processo de passar de uma página para outra Tudo bem. Muito obrigado por assistir, e eu vou ver a próxima lição. 15. Scrolling: Tudo bem, agora temos um layout muito bom em andamento. Mas há uma coisa que ainda está faltando ou talvez possa ser um pequeno complemento, e essa é, na verdade, essa parte aqui. Nós temos as tarefas, mas você pode ver que uma delas foi interrompida, e isso não é por engano. Se você sabe, você sabe. Esse é basicamente um pequeno recurso interessante, um pequeno truque que designers e engenheiros usam muito e é feito basicamente para mostrar que há mais conteúdo. É chamado de teaser, ou pelo menos eu o chamo assim. Eu mostra o conteúdo e mostra que existe a possibilidade de rolar para baixo e ver mais e mais Veja se tivéssemos moldado tudo isso, se o dimensionássemos de uma forma em que a última carta viesse aqui, você não teria ideia de que há mais cartas. Agora, vamos dar uma olhada no nosso design aqui. Temos esses recursos interessantes. Nós os construímos. Mas agora eu quero rolar para baixo, mas eu posso. Seria muito legal se eu pudesse rolar para baixo neste painel. Como podemos fazer isso? Em vez de editar aqui, certifique-se de acessar o componente em si. Você não quer editar usando uma instância. Você quer ter certeza de que suas alterações foram salvas no componente principal, venha aqui e aqui está o que você vai fazer. Você vai e vai até o painel de protótipos aqui e está mudando para a guia de protótipos E você vai transbordar. Estouro significa que tudo o que está fluindo sobre o quadro e, em vez de não rolar, você o configurará Agora, é claro, isso depende. É rolagem vertical ou é direita e para a esquerda, como na horizontal Ou são as duas direções? Bem, para nós, é vertical. Agora vamos verificar isso. Aí está. Assim, você pode rolar para cima e para baixo e ver as coisas. Quero dizer, fica um pouco cortado. Fica um pouco cortado daqui de baixo. Não é perfeito, mas funciona. Então, isso é muito bom e temos algo bom acontecendo. Agora, uma maneira de corrigir isso seria fazer tudo isso em um layout automático. Mas agora, é um pouco tarde demais para fazer isso , porque isso vai bagunçar muitas coisas Mas quero dizer, podemos tentar. Então, vamos ver. Bem, então vamos fazer isso. Ok. E vamos trazer esse bad boy. Nós vamos trazê-lo aqui. E então vamos configurar os valores. Ok. Tudo bem Por isso, queremos ter certeza de que o tamanho é exatamente o que tínhamos antes, que era 839 Em vez de ser um abraço, deveria ser 839, e então podemos alterar o Eu recomendaria que você os juntasse e juntasse em um layout automático. Dessa forma, eles ficam mais próximos um do outro. Eles têm, por exemplo, 16 de espaçamento, e então você pode dar 24 a todo o resto Agora vamos dar uma olhada. Eu só vou me refrescar Agora, quando você rola para baixo, vamos ver. Tudo bem Há mais uma coisa a fazer, que é colocar tudo em um layout automático e seguida, ir para o quadro principal e remover a rolagem Faça com que não seja necessário rolar. Agora temos um layout como um quadro dentro de um quadro e vamos adicionar um pouco de espaçamento aqui Só um pouco mais. Estamos apenas tentando garantir que o painel e as tarefas aqui estejam alinhados Vou dar apenas quatro. Agora vamos verificar como é. Bem, há mais uma coisa a fazer. Agora você vê isso, está transbordando. O que você vai fazer é derrubá-lo. Você vai trazê-lo aqui. Ou o que você vai fazer é fazê-lo encher recipiente e, desse jeito, nós consertamos. Você pode rolar para cima, para ter espaço suficiente, e quando rolar para baixo, verá aqui que tem espaço suficiente. Desce, e sim, é mais ou menos isso. A razão pela qual fizemos tudo isso é que é mais limpo. Funciona melhor porque agora você tem layouts automáticos. O espaçamento é perfeito entre eles e, dessa forma, podemos ter um espaçamento muito bom em vez É bom, faz sentido e funciona. Então, sim, é basicamente assim que você pode criar a rolagem. E só para esclarecer a questão, vou copiar uma dessas cartas várias vezes para mostrar até onde podemos rolar para baixo. Então, se você tivesse muitas tarefas, seria assim. Basta rolar para cima e para baixo e você pode ver muitas coisas. Agora, eu não recomendaria isso. Eu recomendaria que, em algum momento, você dissesse ver todas as tarefas. Isso faria muito mais sentido. Mas sim, esse era o propósito desta lição: aprender a rolar e você aprende a fazer isso, parabéns Te vejo na próxima aula. 16. Criar um painel de notificação pop-up.: Tudo bem. Então, uma coisa que está faltando nesse design agora , depois de tudo o que fizemos , talvez seja alguma interatividade nessa área Agora, já incorporamos alguns efeitos de foco, o que é muito legal, devo dizer Mas talvez possamos clicar neles, certo? E se clicarmos neles? Também temos esses estados de imprensa, o que também é legal. Mas que tal ver um painel real que mostra as notificações? Vamos começar a projetar isso muito rapidamente. Portanto, existem diferentes maneiras pelas quais você pode fazer isso. Você pode criar uma tela inteira para notificações. Alguns sites, você sabe, quando você clica nas notificações, isso leva você a uma página completamente diferente, mas eu realmente não gosto disso. O que eu pessoalmente gosto é quando você tem um painel que não ocupa a tela inteira, está ocupando uma parte da tela e mostrando as notificações uma por uma, e então você pode, se quiser ver todas as notificações, ir para outra página porque é mais rápido. Você não precisa trocar de página e pode verificar rapidamente. Então, vamos em frente e projetamos isso. Então, a primeira coisa que vamos fazer é criar uma moldura, pegar a ferramenta de moldura e criar algo . Estou vendo pegar a ferramenta de moldura e criar algo isso agora, mas podemos trocá-la Vou torná-lo um pouco mais largo e seguida, dar a ele um raio de canto, certificando-se de que seja o mesmo Então, também podemos dar a ele uma sombra projetada semelhante. Agora temos isso. A primeira coisa que vamos fazer é dar a ele um título, dentro dele, vamos escrever algo e vamos fazer disso um layout automático e dar 24. E eu sei o que você está pensando, Oh, nós apenas observamos o tamanho e depois, você sabe, o arruinamos completamente Bem, você está certo. Então, vamos ligar para esse centro de notificação. Tudo bem. Ou, digamos, notificações. Apenas mantenha as coisas simples. E então vamos criar esses cartões de notificação. Então, eles serão semelhantes aos cartões de ingressos. Não vai ser algo completamente diferente. Então, vamos pegar isso como base, colar, clicar com o botão direito do mouse, desanexar a Instância e, sim, dar olhada e ver como podemos alterá-la Uma coisa que podemos achar útil é ter hora, data e hora, não anexos, nem pessoas Sim, dedicar um tempo para isso é muito legal, e não precisamos necessariamente ter um ícone com ele, para ser honesto, então podemos simplesmente removê-lo e depois remover essa moldura, e talvez possamos colocar a data lá. OK. E agora temos esses dois. E então o que eu gostaria de fazer além disso é criar um círculo aqui. Na verdade, vou fazer dela uma moldura, dar uma cor e um raio de 50 cantos Agora, este é um lugar onde podemos adicionar um ícone a ele. Vamos criar um ícone, colocar a letra A e escrever de forma incrível. E então vamos escrever uma exclamação. Opa, exclamação. Marca ou ponto, ponto exclamação. Isso não funcionou. Vamos apenas fazer um ponto de interrogação ou você pode realmente colocar um ponto de interrogação, talvez, espero Não temos um sólido. Então, vamos ver a exclamação. É isso mesmo. Isso é tudo o que precisávamos. Vamos colocá-lo aqui dentro e, em seguida, vamos fazer disso um layout automático e vamos garantir que ele tenha uma proporção de bloqueio, e vamos roubar a cor daqui, colocá-la lá e tudo bem É de cor muito clara. Ok, é muito claro, mas podemos trocá-lo e torná-lo um pouco mais escuro. Não se preocupe. Tudo bem, então agora temos essa aparência. Ainda não estou muito feliz com isso. Você pode simplesmente excluir isso completamente e ter apenas um título para as notificações. É sempre bom tentar pensar que tipo de notificação eu poderia receber? Então, vou adicioná-los em um layout automático e vamos colocá-los em um layout automático também. Vamos fazer com que sejam oito e depois colocá-los em um layout automático. E então vamos transformar tudo isso em um layout automático. Sim, isso funciona. Isso funciona de alguma forma. OK. Talvez possamos diminuir o raio do canto aqui e a mesma coisa com o preenchimento Tudo bem. Agora vamos transformar isso em um componente e testá-lo. Vamos dizer notificação. Agora temos isso como uma notificação, vamos copiá-lo, colá-lo aqui, e então vamos torná-lo vertical, e vamos dar 36 e depois vamos copiar, colar, copiar e colar. Coloque tudo isso junto no layout automático. 16 ou oito, e então nós os temos juntos, juntos. Então, o que vamos fazer é dar a isso um recipiente de enchimento. Vamos fazer com que ela encha o recipiente e, em seguida, vamos fazer com que todos eles encham o recipiente também. Aqui já notamos um problema. Isso faz parte totalmente do processo. Você percebe que tem um valor de espaçamento específico aqui. Mas, na realidade, deveria estar no carro. Isso permite que esses três pontos sejam lançados até o fim Aqui não parece diferente, mas agora você pode ver que acabou de ser corrigido. Agora que temos essas notificações e elas acabaram de ser enviadas, então podemos ter várias e, como antes, também podemos adicionar mais notificações que a pessoa tenha que rolar. Não há absolutamente nenhum problema com isso. Agora só precisamos voltar e torná-los um pouco neutros, então vamos dizer apenas a data e o título da notificação. Agora estamos percebendo outro problema: não há preenchimento aqui. Então, talvez queiramos fazê-lo encher o recipiente. A mesma coisa com este, então encha o recipiente. Você pode fazer isso segurando a tecla Alt e clicando duas vezes. A mesma coisa aqui , já está feito, aqui está bem, aqui está bem Bam. Ok, então o título da notificação, e então você pode ver, você pode dizer aqui, descrição, descrição muito rápida ou resumo. Então, aqui você pode dizer que uma tarefa urgente requer atenção. Você perdeu o prazo de uma tarefa marcada como urgente. Por favor, tome cuidado, por favor , cuide de da da da, e então a mensagem continua. Tudo bem. Então, podemos fazer a mesma coisa com os outros, mas a ideia principal é que também podemos trocar o ícone para que possamos escrever aqui a pergunta. OK. E agora estou percebendo outro problema. O texto está alinhado à esquerda. Voltamos aqui, alinhamos com o centro. Agora está centralizado Perfeito. E se você notar, quero dizer, essa é uma tarefa urgente, mas não parece uma tarefa urgente. Só se mistura com os outros. Bem, isso é por causa das cores. Agora, quando escolhermos um esquema de cores mais urgente como este, eu vou roubar essa cor aqui Então parece muito mais urgente. Isso é o que eu gosto em ter esses círculos, imagens ou ícones ou o que quer que você possa usar é que eles dão uma ideia usando cores, usando formas, e dizem Ei, algo está acontecendo. Aqui você pode ver o ponto de interrogação e perceber que há algum problema. Aqui você pode dizer que foram detectadas atividades suspeitas. Você registrou sua conta em outro dispositivo? Por favor, verifique a aba. OK. E então podemos dar 14 de janeiro, 7 de janeiro a 16 e, ou deveríamos dizer, julho a julho? Tudo bem. E então você pode ter muitos outros ícones. Os ícones também podem ser muito interessantes, sei lá. Quero dizer, podemos voltar a este e fazer com que seja cronometrado. Relógio, algo parecido, e então podemos ter outros tipos de notificações. Mas o mais importante, vamos ver como podemos vincular esse painel de notificação aqui a esse botão. Então, como vamos vinculá-lo? Vamos fazer o protótipo e agora já vemos que temos um efeito de foco, sem problemas, sem problemas Vamos arrastar isso até aqui. Agora que temos isso, vamos dizer: Ok, você vai clicar quando clicar nele, correto? Então esse é o gatilho. A ação será de sobreposição aberta. A sobreposição é o quadro 67. Podemos dar um nome a ele. Podemos dizer notificações, pop-up ou janela ou como você quiser chamá-la. E então você verifica, certo? Essa é a correta. Em vez de ser centralizado, você escolherá o manual e, em seguida, o colocará onde achar melhor, para ser honesto Então, aqui está muito bem colocado. Você também pode deixar o fundo um pouco mais escuro. Realisticamente, a maioria dos aplicativos não faz isso e, sim, você não precisa de uma animação, Agora, vamos verificar como é. Agora vamos clicar nele. Aí está. Há um problema é que ele se mistura demais com o plano de fundo. Você pode resolver isso de duas maneiras. Ou você vai fazer o plano de fundo, então você vai dar uma cor ao fundo. Isso é um truque para fazer isso. É muito bom porque dá você todo o foco nisso. Ele remove o foco de todo o resto, sinta-se à vontade para usá-lo se funcionar para você. Mas, além disso, outra coisa que você pode fazer é simplesmente tentar fazer com que esse painel pareça mais interessante. Isso pode ser com cores. Pode ser com sombras. Temos 5%. Nós podemos fazer isso 50%. E parece realmente horrível agora, mas isso é apenas uma ideia do que você poderia estar fazendo Vamos colocar a cor de volta. Talvez vamos tentar trabalhar apenas com as sombras Mas sim, com as sombras, está muito melhor agora com isso Mas eu ainda diria, você sabe, talvez tente fazer uma mistura. Então, vamos tentar fazer isso agora. Então, vamos dar um histórico, mas será de apenas 10%. E sim, parece muito melhor. Tudo bem, então, repetindo, abrindo-o. Aí está. Essas são notificações. Apenas lembre-se de ter uma saída , pois quando os usuários clicarem nela, receberão as notificações. Eles precisam clicar para sair dela. Então, clique fora dela, que é uma configuração que eu subconscientemente coloquei aqui Se isso não estivesse ativado, você clicaria aqui e ali e qualquer outra coisa, e não conseguiria sair. Então, se fosse esse o caso, você precisa ter um botão X aqui. Só para que as pessoas possam cancelar o pop-up, fechá-lo e passar para outra coisa. Apenas certifique-se de que você tenha isso marcado e faça sentido. Muitos aplicativos fazem isso. Parece uma janela. Quando você clica fora dela, ela desaparece. Eu só queria voltar aqui e dizer que, a propósito, você não precisa fazer essa configuração exata. Por exemplo, se removermos as sombras aqui. Agora, você vê as notificações, elas ainda funcionam sem sombras, completamente bem Como alternativa, o que você pode fazer é pegar uma linha. Vou colar a linha aqui e encher o recipiente, e vou torná-la um pouco ótima. Aí está. Uma linha como essa. Vou torná-lo mais leve e depois copiar e colar, copiar e colar, copiar e colar, e então você tem esses divisores entre cada notificação, e então você tem uma ideia de quais notificações você tem Vou devolver isso. No meu estilo. Eu gosto disso sem a sombra, então vou manter isso porque às vezes, se você quiser ter certeza de que cada elemento e cada canto estão visíveis, você coloca muito peso, muita pressão sobre o usuário para perceber tudo isso. Essas cartas fazem sentido porque você precisa saber que cada uma é uma carta separada que você pode mover, trocar , seja o que for. Mas aqui, esse não é o caso. Agora, uma coisa que podemos fazer é adicionar o efeito de foco. Já fizemos isso antes. Nós podemos fazer isso de novo. Eu posso simplesmente adicionar essa sombra de 10%, e então eu poderia torná-la um pouco mais escura E isso é ainda mais sombrio. Então eu vou transformar isso em um efeito Haber. Vamos ver como fica. É muito rápido. Então, vamos fazer o Smart animate 200 e vamos nos acalmar com isso Nós vamos dar 5%. Agora veja como está. Com essa mudança de cor, é um pouco demais, então vou colocá-la de volta onde estava ou tentar, pelo menos. Bem, não está mais visível. Um pouco mais escuro Ok, isso parece mais natural, e agora está melhor. Parece mais interativo agora que podemos escolher essas coisas, mouse sobre elas, pelo menos, e depois outra coisa Está bem? Outra coisa que podemos fazer é rolar Eu venho tentando rolar há muito tempo. Não sei se você percebeu, mas esse seria um ótimo recurso para adicionar. Está bem? Então, a maneira de fazer isso é exatamente como aprendemos antes, vamos fazer isso encher o recipiente. Então, assim como ele será cortado e você poderá ver que há mais conteúdo. Vá para o protótipo e clique em Vertical desta vez. Quero dizer, da última vez também fizemos a vertical, e então você pode rolar para baixo. Tudo bem, é tão simples quanto isso. Só há uma coisa que está me incomodando. Visualmente falando, você pode ver que as notificações não estão alinhadas com os cartões Quando você passa o mouse sobre eles, faz sentido, mas talvez queiramos mudar isso Se você quisesse fazer isso, o que você faz é diminuir isso talvez para 12 e dar apenas notificações. Você o colocaria em sua própria moldura e lhe daria 12 acolchoamentos. Dessa forma, eles estariam alinhados. Agora, não tenho certeza se pessoas diferentes têm preferências diferentes, então você precisa verificar. Mas isso é, eu não sei, isso funciona para mim. Gosto da aparência. Eu só vou diminuir o espaçamento aqui. E agora parece muito melhor, eu diria que não tenho certeza Definitivamente precisa de algum trabalho, mas sim, isso é ótimo. Estamos a caminho de fazer alguma coisa. Agora, é claro, como mencionei antes, você também pode torná-lo muito menor, mas então você teria que ajustar o posicionamento. Sim, acho que isso parece mais natural. Parece mais um aplicativo e você pode ver todas as suas notificações, clicar nelas, escolhê-las, o que quer que você queira fazer. E é assim que, basicamente, você pode usar um pop-up ou uma sobreposição Isso é o que chamamos de apigma e como você pode criá-lo, usá-lo, vinculá-lo ao recurso de prototipagem Muito obrigado por ouvir, e até a próxima aula. 17. Conectando telas do painel: Tudo bem. Então, nesta lição, gostaríamos de seguir em frente e tentar algo um pouco diferente. Vamos criar uma tela completamente diferente. Então, uma segunda tela e, em outros casos, talvez terceira, quarta, quinta. Mas para esta lição, vamos fazer apenas uma segunda tela. Quero mostrar rapidamente como isso vai acontecer, como vamos fazer isso acontecer e como podemos uni-los de uma forma muito agradável e suave. Tudo bem, então a primeira coisa que vamos fazer é limpar essa área Nós vamos levá-lo para o lado. Só para que possamos ter um fluxo adequado aqui. Gosto de ir da esquerda para a direita e de cima para baixo, então temos esse espaço livre. Agora vou copiar isso e colar. Agora temos uma segunda tela. Podemos chamar o primeiro de painel e o segundo, de tarefas. Essa será uma tela em que expandiremos apenas o painel para ver todas as diferentes tarefas. Então, a primeira coisa que vou fazer é excluir o painel no segundo. Não há painel, mas há tarefas. No entanto, será um tipo diferente de tarefa. Não vai ter esse painel que faz aquela animação onde ela fica oculta ou minimizada Vamos desanexar a instância, clicar em Desanexar instância e, em seguida, vamos pegar esse pequeno pedaço, retirá-lo e, sim, vamos trabalhar com Em vez de ter tarefas urgentes e depois tarefas mais recentes, estou pensando em moldar isso de forma diferente, porque temos uma equipe e diferentes membros da equipe têm tarefas diferentes Vamos criar algo semelhante a outros programas e um exemplo de programas de gerenciamento de tarefas ou gerenciamento de projetos é o Trello Se você conhece, existem muitos outros tipos de soluções Vamos fazer isso de novo, não vamos reinventar a roda, vamos criar algo semelhante Estou admitindo isso para que você tenha isso em mente em vez de pensar, uau Ele vai criar algo completamente diferente. Não, eu não vou fazer isso. Vou me ater ao que é comprovado, testado e comprovado e tudo mais. Tudo bem. Então, agora vou remover esses títulos porque acho que eles não estão realmente nos ajudando aqui. No entanto, estou pensando em incluir tudo isso em um quadro, então vou colocar um layout automático. Vou adicionar um pouco de cor a ele. Estou pensando que talvez pudéssemos adicionar um pouco mais de cor. Talvez possa ser muito vibrante desta vez. Talvez não seja tão vibrante. Mas vamos ver o que podemos fazer. Ok, isso não parece certo. Vamos apenas remover isso. Veja o que podemos fazer. Então, queremos uma cor que não seja demais. Então, talvez eu esteja pensando nisso. Talvez por que não? Algo para ficar em segundo plano. E a razão para fazer isso é que estou pensando em mudá-la. Também podemos escolher a mesma cor aqui ou escolher uma cor mais escura, então poderia ser cinza em vez de um pouco mais escura Mas acho que poderíamos incluir um pouco mais de cor aqui porque queremos que as tarefas se destaquem. Queremos que eles pareçam bem claros. Então, como as tarefas são brancas, queremos que o plano de fundo tenha uma cor diferente, nem tudo seja tão claro. Sim. Então, vamos ver o que aconteceria se chamássemos esses peixes transparentes? Isso é algo que também podemos fazer. E, dessa forma, temos muito mais foco nas tarefas em si. Então, chegando a este texto, estou pensando: podemos pintá-lo de branco? Talvez. Então teríamos que deixar isso um pouco mais escuro para facilitar a leitura Mas agora temos que voltar a essa cor e trabalhar a partir daí porque eu quero deixar claro que é uma cor semelhante. Ok, isso não é tão ruim. É algo com o qual você pode trabalhar. Está certo. OK. Não está funcionando perfeitamente com esse azul, mas está certo. Agora temos tarefas, mas vamos dar a elas nomes diferentes. Então, quem são os membros da equipe que tínhamos? Então, vou considerar que sou o gerente do projeto, então tenho um nome diferente, que talvez seja Alan. E então teremos John e Mary. E então temos outro John, aparentemente. Não, nós mudamos isso. O que foi isso? Laurence. Então, temos Laurence Tudo bem, então copie essa colagem aqui. Então temos Alan John, Mary Lawrence. Assim, podemos mudar as coisas. Podemos fazer esse recipiente cheio, então temos muito que ocupa espaço. Mas, para ser sincero, não parece muito bom. Então, vamos voltar atrás. Também podemos centralizá-lo, mas não parece ótimo, então vou mantê-lo aqui e ele oferece a possibilidade de adicionar outra coisa Talvez possamos mostrar isso, na verdade criando algo assim e colocando um sinal de adição nele. Então corte isso e cole aqui, e pronto. Nós temos isso aqui. Podemos torná-lo um pouco menor. Tudo bem. Deixe-me colocá-lo aqui. Perfeito. Então, nós temos isso. Parece muito bom. O que podemos fazer é trocar os itens aqui. Não queremos que tudo seja o mesmo. E outra coisa que acabei de notar é que esses são dois quadros diferentes, o que não queremos. Então, na verdade, vou deletar alguns deles. Eles não precisam ter muitas tarefas para serem honestos. Então, isso é algo para se ter em mente. Então, vou copiar e colar a base. E então, como dissemos, Mary tem muito mais tarefas do que as outras, e John não tem muita coisa acontecendo. Certo? E uma coisa a prestar atenção é ver também quais nomes estão aqui, quais rostos ou quais fotos temos aqui. Então Mary deveria ter os cartões com o nome dela e assim por diante. Mas isso é algo que podemos resolver mais tarde. Quero dizer, não há necessidade agora de se concentrar muito nessas coisas. Mas sim, agora temos essa pequena configuração. Lembre-se, esta lição não é sobre como criar a segunda tela, mas sobre como conectá-la. Para conectá-lo ao menu principal ou quaisquer elementos que você tenha aqui, para que você possa fazer a transição desta tela para aquela. Agora que o configuramos , a primeira coisa que você quer fazer é criar um protótipo A primeira tela tem o fluxo um. Agora, apenas para facilitar o uso, você pode fazer esse fluxo dois acessando protótipo e tornando-o um ponto de partida do fluxo O que isso permite que você faça essencialmente é visitar as duas páginas. Ok, ambas telas. Você pode ver este e aquele, e você pode julgar: Ok, parece ótimo, não parece muito bom, seja o que for. E então você pode vir aqui e fazer suas coisas sem ser interrompido. Assim, você pode verificar os dois sem precisar clicar no menu porque é isso que estamos fazendo agora. Então, para fazer isso, vamos até as tarefas e pressionamos as teclas Control Alt e A para escolher os dois ícones ou o mesmo elemento entre instâncias, e então você pressionará o sinal de mais e o levará até lá. Então, agora temos onclick. Ele vai navegar até as tarefas. Eu recomendaria que você fizesse isso instantaneamente porque quando você está criando especialmente sites, é muito difícil fazer animações e transições muito legais Então, dependendo do que sua equipe está disposta a fazer, na maioria das vezes, você clica em uma página e ela simplesmente carrega. Não vai ter uma animação muito legal a menos que você esteja trabalhando em um aplicativo web, essa é uma história diferente. Mas geralmente será dissolvido ou instantâneo, para ser honesto. Isso só vai carregar a página. Então, agora vamos testá-lo. Nós viemos aqui. Vamos para a tarefa, vamos clicar nela. Bam, estamos lá, ok? Assim mesmo. Diz facilmente que, mas não se esqueça, volte para onde você estava. Vamos fazer isso agora mesmo. Vamos manter o painel em ambas as instâncias e vamos colocá-lo aqui, mesma coisa, agora vamos verificar. Assim, podemos nos mover entre as páginas. Mas espere um minuto, há um problema, há um pequeno detalhe. É sobre o destaque. Aqui, ainda temos o painel destacado e isso não é algo que queremos. Eu vou voltar aqui. Vou escolher os dois mantendo o controle Al em A e vou torná-lo padrão. Agora elas são todas padrão e eu vou chegar até esta instância nesta página e vou selecioná-la, vou vir aqui e vou escolher essa tarefa, e vou selecioná-la também. Agora vamos testá-lo. OK. Agora temos um problema. Espere, vamos recarregar isso. Temos painel, o painel é escolhido, selecionado, ótimo. Agora vamos para a tarefa, a tarefa é selecionada, nós a abrimos. Espere um minuto, diz painel. OK. Agora temos um problema porque a versão selecionada diz apenas painel, o que claramente não é o que você deseja ver. Aqui temos um problema, ao que parece. Esse problema geralmente surge da nomenclatura ou da forma como você configura essas versões Você tem que verificar isso. Agora vamos verificar. Isso é padrão e não, sem colapso. Isso é unhover sem colapso, e isso é selecionado como sem Agora, voltando a isso, padrão, mouse, sim, selecionado, sim Ok, então não há problema aqui. Agora vamos conferir aqui. Qual pode ser o problema? Vamos ver. Está bem? Isso é normal. Diz padrão, sem colapso, padrão, sem colapso, padrão, sem colapso. OK. Então, o que eu acho que pode ser o problema é o fato da nomenclatura. Então, às vezes, os nomes aqui têm um problema. Então, só por segurança, vou chamar esse botão de tarefas. Está bem? E então você precisa nomear cada instância. Então, voltando a essa instância, vou chamá-la de botão de tarefas. Tem que ser exatamente a mesma escrita, ok? Então, agora vamos verificar isso. OK. Ainda está me causando o mesmo problema. Tudo bem, então acabei recarregar a página e não temos mais o bug Então, quando você abre isso, não mostra nada destacado, ok? Então você vê esta página, nós estamos nesta página, e quando você a abre, você vê todas as opções que você pode abrir. Assim, você pode acessar o painel. Não há problemas com os ícones. Está bem? Agora, é assim que você pode basicamente vincular facilmente duas telas diferentes. E dessa forma também é realista. Não estamos fazendo nada louco. Há algumas coisas que você pode corrigir, como esse raio de canto, por exemplo, horrível Isso é muito melhor, não é perfeito, mas muito melhor. Mas sim, é basicamente assim que você pode conectar duas telas diferentes usando um menu. Tudo gira em torno de prototipagem, diferentes tipos de gatilhos, diferentes tipos de ações, mas no final, chegamos lá e terminamos, e isso é o que importa Muito obrigado por ouvir e nos vemos na próxima aula. 18. Visualizar e testar o protótipo.: Tudo bem, agora chegamos à parte mais importante, que é compartilhar seu trabalho. Afinal, você trabalhou muito e agora precisa compartilhá-lo com o mundo, compartilhá-lo com seus colegas, com seus clientes, quem quer que seja, você precisa divulgar seu trabalho Existem diferentes maneiras de fazer isso. Uma maneira muito simples é clicar no grande botão azul. Eu sei que é bastante óbvio, então é fácil, mas eu só tenho que fazer uma anotação. Há dois tipos diferentes de compartilhamento. Você pode compartilhar o arquivo como neste arquivo de design ou pode compartilhar o protótipo e ele diz que você compartilha o protótipo Eles parecem muito parecidos, mas na verdade são coisas diferentes. Preste atenção quando estiver fazendo isso. A maneira de fazer isso nos dois casos é clicar em Copyink assim, você tem um link Você também pode convidar alguém escrevendo seu e-mail, mas o mais importante é que, antes de fazer isso, clique em Somente pessoas convidadas e mude para qualquer pessoa. Ao fazer isso, você também pode adicionar uma senha obrigatória. Mas quando você precisa uma conta profissional para isso, só para avisar. Mas ao fazer isso, você poderá compartilhá-lo com qualquer pessoa usando o link. Se você tiver várias pessoas em um projeto, especialmente se compartilhar o arquivo, o arquivo de design, também poderá decidir quem é o proprietário, quem é editor, comentarista etc. Você tem algumas opções de compartilhamento diferentes Você pode copiar o link DevMDE para entregá-lo a um desenvolvedor. Você pode copiar o link do protótipo, que é o que estávamos fazendo aqui, e você pode publicá-lo na comunidade ou obter um código incorporado Tudo bem. E há mais uma forma de compartilhar seu protótipo, que é exportando-o Você pode fazer isso clicando diretamente em qualquer quadro ou em vários quadros, exportando e adicionando uma exportação. Você pode decidir se quer ser PNG, JPEG, SVG ou PDF E há mais configurações para você explorar, ou você pode exportá-las diretamente daqui, acessando o arquivo , a guia, a opção de arquivo e, em seguida, exportando ou exportando quadros para PDF. É tão simples quanto isso. Não é tão complicado, mas você só precisa se perguntar: qual é a melhor maneira de compartilhar o arquivo com seus clientes com seus colegas ou com quem você o está compartilhando? Você tem que se fazer essa pergunta e obter uma boa resposta. Muito obrigado por ouvir, e nos vemos na próxima. 19. Projeto do curso: crie seu próprio painel SaaS: E agora é sua vez de criar seu próprio painel. Para este projeto de classe, você criará sua própria variação de um painel SAS usando técnicas e os fluxos de trabalho que abordamos ao longo deste curso Você pode optar por criar o painel que já criamos, otimizá-lo e torná-lo ainda melhor, ou pode optar por criar seu próprio painel com um setor completamente diferente ou casos de uso completamente diferentes. Por exemplo, você pode criar um painel para finanças de gerenciamento de projetos, para um aplicativo de fitness ou qualquer outro painel SAS que você gostaria de criar. Comece definindo a finalidade do seu painel e depois identificando os diferentes tipos de informações que os usuários precisam ver. Depois disso, vá em frente e faça um layout geral de como será o design. Comece a criar seus componentes reutilizáveis, seções diferentes e entenda como as informações serão mostradas E, claro, não se esqueça de aplicar um estilo consistente ao seu design. Agora, quando seu painel estiver concluído, adicione algumas interações, possivelmente alguma animação para demonstrar como os usuários usariam seu painel. E, claro, certifique-se de que seja uma experiência agradável, algo que as pessoas adorariam ver e interagir, desde as grandes animações e funções até as Quando terminar, faça o upload uma captura de tela do seu painel ou compartilhe um link do protótipo do Figma e coloque-o na seção da galeria do projeto Obviamente, sinta-se à vontade para incluir uma breve explicação de suas decisões de design ou qualquer comentário explicando que tipo de painel você estava tentando criar. Este projeto é sua oportunidade seguir em frente e pegar tudo o que aprendemos, praticá-lo e aplicá-lo de uma forma que mostre suas próprias ideias e criatividade. Então, vamos começar a projetar. 20. Parabéns! E depois?: Parabéns por terminar o curso. Agora você concluiu um projeto completo do painel SAS do conceito ao protótipo Durante a aula, você praticou planejamento, design de layout, criação de componentes, hierarquia visual, design de interface e muitas outras habilidades que se traduzem e são transferidas diretamente para projetos e habilidades reais de IX. À medida que você continua aprendendo, eu recomendo fortemente que você crie mais conceitos de painel, redesenhe os produtos existentes e explore diferentes setores e casos de uso Cada projeto que você pratica agora não apenas aumentará seu portfólio, mas também fortalecerá suas habilidades de design. Se ainda não o fez, certifique-se de ter enviado seu projeto como uma captura de tela ou como um link para a galeria do projeto Eu realmente adoraria ver o que vocês criaram e como personalizam seus próprios projetos Como sempre, se você gostou desta aula, considere deixar um comentário. Isso realmente nos ajuda a melhorar as aulas futuras e também ajuda outros alunos a descobrir esse curso. Muito obrigado por se juntar a mim e nos vemos no próximo projeto.