Fundamentos de design de interface do usuário com o Figma

1. Introdução ao curso: Olá e bem-vindo ao curso fundamental de design de interface do usuário. Neste curso, vou ensinar-lhe tudo o que você precisa saber em nossa deficiência eficaz, utilizável em frases que abordaremos princípios de design, iconografia, tipografia, cor, Siri, heurísticas de usabilidade até prototipagem e muito mais. Também falaremos colaboração eficaz entre designers e desenvolvedores. No final, você poderá trabalhar em um projeto final que o ajudará a colocar em prática todas essas habilidades adquiridas durante este curso. Meu nome é Jackson de uma pessoa, e eu estive no campo nos últimos 11 anos. Tenho trabalhado em diferentes setores, como cripto, fintech, B2B e muito, muito mais. Estou muito animado para tê-lo a bordo e aprender. posso esperar para vê-lo em breve. 2. Vamos começar - Bem-vindo: Olá e bem-vindo ao curso fundamental de design de interface do usuário. Aqui vamos de 0 para herói. Onde vamos abranger desde princípios de design até prototipagem e um projeto final. Basicamente, vamos dividir isso em partes menores. Onde vamos falar sobre os princípios de design e como isso afeta nossos projetos? Introdução à teoria das cores para você aprender a construir sistemas de cores com sabedoria dentro de uma tipografia de guia de estilo para que você entenda como a tipografia afeta o design geral. Sombras, ícones e outras partes menores serão essenciais para os blocos de construção para que você crie guia de estilo visual antes de iniciar o design da interface do usuário. Também falaremos sobre as dez heurísticas de usabilidade, que são diretrizes essenciais que ajudarão você a projetar interfaces utilizáveis eficazes. Não só isso, vamos construir um guia de estilo e projetar a interface do usuário de uma web, o aplicativo móvel, vamos cobrir a interface do usuário e, no final da prototipagem, e prepare-o para entrega. Outro tópico importante que discutiremos é sobre a colaboração entre designers e desenvolvedores, que é uma das principais partes de todo o nosso processo de trabalho. Como projeto final, você poderá construir um você poderá construir projeto onde poderá compartilhar dentro da comunidade, receber feedback e colocá-lo para praticar tudo o que aprendeu durante este curso. Mal posso esperar para começar e vamos aprender. 3. Introdução aos princípios de design: Vamos falar sobre princípios de design. Princípios de design, existem conjuntos de regras e diretrizes que ajudarão você a projetar melhores produtos e experiências. E por que é importante que você aprenda sobre eles? Uma vez que um designer entenda os princípios de design em um nível básico e os compreenda muito bem, você poderá combinar intencionalmente esses princípios de design e criar interfaces que ajudará o cliente a atingir seu objetivo final. Então, entendendo o básico dos princípios de design, também ajudará você a reduzir a quantidade de retrocesso, corrigindo pequenos erros e evitando esses erros comuns cometidos por alguns dos iniciantes. E por que é importante saber disso? É porque isso reduzirá a quantidade de atrito durante seu processo de trabalho e ajudará você a se concentrar em coisas que realmente importam, que são as metas de negócios e as experiências do cliente. 4. Princípio de design de unidade: Então, vamos falar sobre o princípio da unidade. unidade acontece quando você conseguiu combinar todos os princípios e gerar design visual e conceitualmente harmonioso. E é isso que gera a unidade. Por exemplo, uma vez compondo e projetando a interface que está construindo basicamente, você pode combinar reputação, proximidade, alinhamento e contraste. Por exemplo, se eles se complementarem ou completarem, eles podem gerar unidade. Você será capaz de projetar interfaces que são realmente fáceis de entender e claras que têm elementos claros nos quais você precisa se concentrar e outros elementos nos quais você precisa se concentrar menos. Em palavras melhores, a unidade, facilita a geração designs que são comidas parece melhor e é mais fácil de entender. E, a propósito, você se lembra dos sites dos anos noventa? O site dos anos 900 é como eram para o tempo. No entanto, eles eram muito coloridos, muitas topografias, muitas fontes, tamanhos e tudo estava misturado. E isso força muitos usuários a tentar pesquisar elementos individualmente. Se você olhar neste site, por exemplo, eu prometo a você, se você quer entender onde, digamos onde estão os anjos. Você precisará ir individualmente dentro desses elementos para tentar encontrar o que está procurando neste site se quiser comprar um drone. E não se surpreenda porque este site ainda existe. Deixe-me mostrar como é agora. Este é o site ainda vivo. Você ainda pode fazer compras online lá. E eu não sei, como se fosse realmente confuso porque tudo é importante e não há hierarquia, nenhum alinhamento lá, como uma quantidade de cores de concessão de fadas. Portanto, este site é da Noruega, do site chamado Art green dotnet. Verde. Não sei se o pronunciei pelos líderes. Mas, como eu disse, é muito difícil para você olhar ou arquitetar. Há tanta informação que torna muito difícil para você encontrar algo que você está procurando. É por isso que quando estamos falando de um site, quando estamos falando sobre o design de interfaces, queremos ter certeza de que estamos considerando o princípio da unidade. Porque você será capaz de criar interfaces que são realmente harmoniosas e evitará esse tipo de erro. Então, vou aprofundar um pouco mais nos outros vídeos e falar sobre esses princípios individualmente para que você possa construir harmonia e unidade dentro de seus projetos. Vejo você no próximo. 5. Princípios de design de alinhamento: Vamos falar sobre alinhamento. O alinhamento é um desses princípios que é responsável por organizar os elementos alocados na interface. Depois de conseguir cobrir esse princípio muito bem, você será capaz de projetar interfaces que estão realmente bem estruturadas dentro do layout, os projetos do produto que você está fazendo e construindo. Então, qual é o nosso alinhamento no design da interface do usuário? O alinhamento é uma daquelas coisas que realmente garantiram que o usuário terá uma boa experiência ao usar a interface e ter o senso de organização dentro dos elementos. Uma vez que não haja alinhamento, qualquer coisa que esteja dentro da interface pode gerar confusão e dificultar a compreensão do que é prioridade, quais são as informações que são realmente necessárias e realmente exibido aqui na interface. Então, se você olhar para a tela agora, verá que há duas funções do ícone de mídia social. Pode parecer muito mínimo. Ou talvez se você já tiver um pouco de olho treinado, você vai notar que algo está em sim, algo está realmente desligado. Na primeira linha, tudo está muito bem alinhado, muito bem estruturado. Mas na segunda linha você pode ver que há um desalinhamento nos dois últimos elementos. E parece muito menor. E talvez você possa considerar isso não importante, mas na verdade em maior escala. Se você projetar interfaces desalinhadas, terá problemas para entregar aos desenvolvedores e também ter problemas com o usuário tentar encontrar informações como um tipo de interface de alinhamento que também está presente é o, digamos, por exemplo, o alinhamento do texto. Eu acho que isso é algo que você talvez seja usado em softwares anteriores como antes, digamos que cães ou até mesmo eles usem esquerda, centro e direita. Então, esses são como tipos de alinhamento realmente básicos que existem. Você pode falar sobre justificar, mas uma vez aplicado em texto, não é o mais recomendado. Mas usando o alinhamento esquerdo, central e direito bem aplicado. Isso pode ajudá-lo a aumentar a legibilidade das informações exibidas no layout. Como você pode ver nesta interface do site stripe, pode parecer que tudo é harmonioso e por que é assim, uma vez que este site foi lançado, muitas pessoas realmente gostaram. Mas há algum raciocínio por trás disso porque eles têm harmonia visual e unidade realmente bem intencionadas dentro disso. Um dos principais componentes aqui é, por exemplo, o alinhamento. O alinhamento aqui, por exemplo, em um menu. O conteúdo aqui, o imposto, a mensagem Euro, botões de scription, os logotipos das empresas. Tudo está dentro da vida deles. Eles estão usando uma grade, tipo específico de grade aqui, vamos falar sobre grades nos próximos vídeos. Mas eles projetaram isso de forma realmente intencional com elementos bem distribuídos dentro da interface, têm componentes e elementos muito bem alinhados dentro da interface desta landing page. Este é um dos exemplos de alinhamento muito bem aplicado no design da interface do usuário. Vamos dar uma olhada nisso, outro exemplo. Se você olhar para isso agora, você vai ver que tudo parece bem, ótimo, certo? Problema no momento. Mas então você pode ter outros tipos de arranjos se a interface do usuário para tornar o alinhamento parecer mais significativa e compreensível. Por que é assim, basicamente, na primeira opção que vemos anteriormente, deste lado, você recebe um aviso de que uma vez usando o ícone e o título aqui, você vai ler, mas há uma pausa dentro da descrição, a segunda parte das tags do corpo aqui. Isso pode gerar, mesmo sendo muito menor, pode gerar algum tipo de pode quebrar a sequência de leitura. Portanto, uma recomendação é usar, por exemplo, esse ícone como seu próprio alinhamento. Tenha o título e o corpo do texto alinhados ou altere seu arranjo onde você coloca o ícone antes do título e, em seguida, a tag body. Então, sim, uma vez que você tenha o alinhamento coberto, tenho certeza de que você será capaz projetar interfaces melhores. Seus olhos começarão a se tornar mais treinados para identificar qualquer coisa que seja paga dentro de alinhamentos. Então, vejo você no próximo vídeo. 6. Princípios de design de proximidade: Então, vamos falar sobre proximidade. Eu acho que este é um dos tipos de princípio mais simples , mas ainda subestimados. Mas, uma vez bem aplicado, isso ajudará você a projetar interfaces que realmente são relevantes. Portanto, a proximidade é um desses princípios que você pode basicamente mostrar a interface ou onde quer que esteja projetando. Elementos semelhantes ou relacionados entre si. Aqui, como você pode ver, a proximidade já é aplicada aqui porque agrupamos elementos de uma forma que eles estão mostrando que os elementos-chave estão juntos, informações semelhantes ou juntos, eles podem esteja se perguntando como isso é aplicado na interface do usuário. É simples. Se você olhar para esse campo, por exemplo, tem as informações do usuário, o carimbo de data/hora a ser postado do que os botões de ação aqui. Pode parecer que é como, ok, qual é o grande problema lá? Se você entrar em um pouco mais detalhes, poderá ver, por exemplo, o alinhamento e a proximidade ou estruturação dos elementos e as informações dentro dessa interface. De uma forma de informações semelhantes ou relacionadas, elas precisam ser combinadas e estruturadas uma forma que sejam realmente fáceis de entender. Portanto, é intencional aqui que você tenha as informações do usuário, como o perfil, a foto, o avatar. Você precisa digitar o nome de usuário deles. Ele tem o cargo de usuário, por exemplo, o carimbo de data/hora está na mesma linha, mas é separado porque essa é a única informação relacionada ao carimbo de data/hora. O conteúdo aqui, como as informações da publicação, está lá, e os botões de ação são agrupados. Então, basicamente, da maneira como eles são separados aqui, por exemplo, nos botões de ação, o botão de ação tem seu próprio agrupamento porque são tipos semelhantes de elementos. Dentro dessa interface. As informações do usuário, o conteúdo e os botões de ação são estruturados de forma que eles estão fornecendo ao usuário que, oh, as informações estão relacionadas ou semelhantes. E eles são agrupados de maneiras que é mais fácil de entender. 7. Princípios de design de equilíbrio: Vamos falar sobre equilíbrio. Equilíbrio e design. É basicamente quando você consegue distribuir os elementos dentro de uma interface para alcançar o equilíbrio, você pode se concentrar nessas duas partes principais onde você fala sobre design assimétrico ou projetos simétricos para o design assimétrico é quando você faz a distribuição de peso dos elementos, enfatiza um elemento acima do outro. Relacionado à ciência, ou é maior ênfase na cor, tipografia ou imagens. O título e o conteúdo têm ênfase muito alta em contraste com o outro elemento que é o mesmo, mas tem menor ênfase. Nesse caso, o designer se concentrou em enfatizar a parte principal, que é a rotação sobre esse snowboard aqui. Por outro lado, podemos falar sobre o design simétrico. Design simétrico, é mais simples porque basicamente, quando você consegue distribuir elementos simetricamente e a interface de uma maneira muito equilibrada. Aqui você pode ver na página de registro do Pinterest, eu não sei qual versão é essa parte nesta página de configuração acho que do Tony one-on-one ou algo assim, uma das variações, eles tem, como realmente bem equilibrado. Você tem a marca, o título, os botões, todos centrados e equilibrados nesta interface. Neste outro exemplo aqui podemos ver que a distribuição dos elementos dentro da interface é igualmente equilibrada. Eles têm o mesmo peso e a mesma importância em termos de como distribuem informações. Porque você está falando como a seção de heróis, onde eles têm essa ênfase maior no conteúdo e na mídia avançada. Então essa mídia rica em geral, tinha a ilustração e essa contagem regressiva. Além disso, você tem o botão de título ou o call to action em geral. Então, basicamente, é quando falamos de equilíbrio, nos certificamos de que o cobrimos onde é formato assimétrico ou um formato simétrico. Então é isso. Vejo você na próxima aula. 8. Princípio de design de contraste: Contraste. O contraste é um estado de ser diferente de outra coisa ou comparado a outra coisa. O que você quer dizer com esse contraste pode ser criado em dois fatores principais. Um deles, o contraste de cores pode ser uma dessa maneira, ou a outra forma é gerando contraste de tamanho. O nome de ambas as formas de gerar contraste diz tudo. Vamos procurar esta peça gráfica, por exemplo, esta peça gráfica tem três tipos de topografias. Cada um deles tem tamanho de fonte diferente e gerar algum contraste mais forte é um tipo de letra que está em laranja. E a razão pela qual isso é assim é porque a maior ênfase e a coisa que gera mais contraste é o que chama nossa atenção para este ponto. Portanto, gerar contraste de cores é uma maneira realmente fundamental diferenciar um elemento para outro. Mesmo que haja do mesmo tamanho, como este, por exemplo. Outro exemplo é que você pode até ter, digamos nesta seção de heróis, por exemplo, você tem um cartão para gerenciar seu dinheiro longe de conseguir os usuários. Compreender que há uma diferença é que o gerenciar é a parte que tem o contraste, ou seja. A maneira como você quer diferenciar seu elemento em comparação com as outras partes das mesmas coisas. Quando falamos de contraste de tamanho, o contraste de tamanho já é gerado aqui nesta tela inteira. O contraste de tamanho pode ser alcançado quando você deseja colocar grande ênfase em alguma coisa. E então você pode criar outra ênfase nos outros elementos e, em seguida, no terceiro elemento. Então aqui você tem o título, subtítulo e os textos corporais. Isso é um contraste de tamanho em poucas palavras. 9. Princípio de design de ênfase: Vamos falar sobre ênfase. Ao contrário do contraste, a ênfase tem o objetivo principal levar a atenção do espectador para um elemento específico. E vamos ver isso na prática. Para que você obtenha ênfase, você precisa responder a si mesmo essa pergunta, o que mais precisa de atenção do usuário? Você já pensou nisso? Antes de desenvolver qualquer interface de usuário, é muito importante que você pense sobre qual é o elemento-chave que realmente precisa de uma atenção do usuário para que eles atinjam seu objetivo. Vamos dar uma olhada nessa IU de checkout, por exemplo. Aqui temos a interface de checkout que contém muitos elementos. Este cartão tem dois itens, por exemplo, os AirPods e o MacBook Pro. Você também tem aqui um subtotal de TextField e o total. Mas dentro de toda essa interface lá, a única coisa que mais chama a atenção, e eu quero enfatizar mais, foi completar o botão de compra. E a razão pela qual você quer fazer isso é poder gerar o foco principal de como ajudar o usuário, o cliente, a concluir sua compra o mais rápido possível. E a maneira mais fácil, então eles não precisam olhar para cima e para baixo para trás e para frente para descobrir como fazer isso. Então você apenas enfatiza, qual é a meta pretendida para o negócio e para o cliente no final do dia. Mas lembre-se, ele precisa ser ético. Precisamos aplicar esses princípios de design e maneira ética para evitar padrões de design maliciosos. Pense nisso quando você está projetando uma interface, quando quiser enfatizar, enfatize em algo que realmente importou para o cliente e para o negócio de uma forma que você não persuade o usuário para fazer algo que ele não tem a intenção de fazer. 10. Princípio de design de hierarquia: Vamos cobrir aqui, hierarquia. hierarquia é basicamente a maneira de orientar o usuário para o design e fazer as coisas que são muito importantes na ordem de importância. O que quero dizer com isso? hierarquia pode ser alcançada através do número de outros princípios de design , incluindo movimento e contraste. Hierarquia, por exemplo, pode ser aplicada a partir do, digamos que aplicamos o princípio de contraste onde ele começa do menor para o maior é aplicado em tipografia. Então, digamos, por exemplo, aqui neste tipo de biografia, você tem a legenda que é 12, que tem uma ênfase muito baixa, muito baixo contraste. E aumenta até atingir o título um, que é de seis a quatro pixels. Uma vez aplicado a uma interface de usuário, você pode combinar para gerar hierarquia usando ênfase em contraste, por exemplo, nesta interface do usuário aqui, neste exemplo, você pode ver que o título tem a ênfase principal aqui, o que significa que ele tem a maior hierarquia nesta página. Você quer enfatizar isso. Então você tem os cartões individuais que têm uma foto, um subtítulo, um título, um corpo de textos e alteram informações. E cada um desses cartões, a forma como eles foram criados, eles criaram para criar consistência. A hierarquia está se aplicando aqui para gerar as principais coisas importantes que primeiro, você precisa saber onde você está, que está na página de tendências. E, em segundo lugar, os elementos que você está vendo, tudo o que está em tendência. E também outra parte muito interessante é que temos aqui o princípio de design de repetição também aplicado nesta interface. Então, isso é uma hierarquia em poucas palavras. 11. Princípio de design de movimento: Ok, então vamos cobrir o movimento. O movimento é mais um princípio que eu acho que é realmente um dos mais interessantes porque você pode realmente gerar o senso de movimento e a perspectiva do olho dos espectadores. Porque basicamente ajuda o usuário a rastrear seu caminho dentro de uma composição de design que cria interesses e dinamismo. E quando digo que o dinamismo é como o movimento dentro, dentro de uma interface. Então, vamos dar uma olhada nisso, por exemplo. Quando você salta uma bola, ela sobe, desce , sobe e desce novamente. Esse é um exemplo de movimento. Dentro de uma interface. Você pode aplicá-lo, por exemplo, usando um dançarino, alguém que está ao vivo, alguém que está se movendo. Então você se move, você vive, você sente. Dentro dessa interface, ele chamou explicitamente a atenção para o dançarino, mas também para a seção de heróis aqui. Portanto, toda essa seção de heróis está focada no movimento. Para essas aulas de dança, capaz de se expressar, você poderá dançar. Portanto, esse é o objetivo dessa interface de usuário de uma escola de dança. Vamos ver um exemplo de algo que realmente existe. A vida é muito sutil, mas muito proeminente ao mesmo tempo forma de mostrar movimento. Portanto, o movimento aqui é aplicado nessa interface que a página de destino da faixa tem, que é que os gradientes dentro desta seção de herói estão todos em constante movimento. E esse movimento, parece gerar algum fluido, algum fluxo fácil, algum movimento natural. Então as cores estão trocando, elas estão se movendo. Portanto, há algum tipo de gerar a mensagem de constante mudança de evolução desse movimento. Princípio de design. 12. Princípio de design de repetição: Vamos falar sobre repetição. A repetição é quando os elementos são usados no mesmo período, em seguida, na interface. Então, o que quero dizer com isso é basicamente você gerar consistência dentro de uma interface do usuário. Portanto, a repetição é basicamente quando você repete um único elemento dentro do experimento. Vamos examinar, por exemplo, esta interface de documentos. Aqui você tem um emoji de capa ou um Avatar. Você tem os títulos, você tem os documentos. Basicamente, você criou um componente que contém um ícone, que contém um título, carimbo de data/hora , botão de ação, um status e a quantidade de idiomas. Então, basicamente, você criou um elemento, mas ao aplicar o princípio da repetição, você repetiu o mesmo elemento várias vezes porque eles estão todos relacionados e são todos do mesmo tipo. Então, basicamente, digite documento , mas os elementos, o conteúdo de cada um desses documentos são diferentes. Essa é a única diferença. Portanto, para criar consistência é realmente importante quando você se concentra em aplicar esses princípios, por exemplo, repetição para gerar consistência. 13. Princípio de design de espaço em branco: Tudo bem, então vamos falar sobre espaço negativo. Espaço negativo. Para ser honesto, é como literalmente um dos meus princípios de design favoritos e favoritos. Porque com espaço negativo, você pode resolver tantos problemas de design. E, embora combinado com outros princípios de design, ele pode gerar uma interface de usuário realmente harmoniosa, como isso pode acontecer. O espaço negativo também é considerado como um espaço de respiração para o seu design. Primeiro, você precisa se lembrar da proximidade. Regra de proximidade. Isso sugere o seguinte. Elementos relacionados devem ser espaçados juntos. Não relacionado deve ser espaçado. Dois elementos são do mesmo tipo, devem conter o mesmo espaçamento uniforme. Depois de seguir essas regras básicas, você poderá ajudar os usuários a ler e entender uma maneira lógica montada de entender as informações dentro da interface. Então, vamos dar uma olhada aqui, por exemplo. Uma interface muito, muito simples. Temos os benefícios de tudo o que você está comprando. Os preços desses benefícios são separados aqui, preços separados assim. Então você tem um pequeno espaço em branco aplicado aqui. E o espaço em branco aqui é basicamente seis a quatro pixels de distância dentro desse grupo de elementos relacionados. E esse conjunto de elementos também está relacionado. Uma maneira de não fazer espaços em branco ou espaço negativo que não temos fazendo espaços negativos quando você tem tudo preso junto com o mesmo espaçamento ou realmente semelhante, que não diferenciar os elementos não são mostrar onde está o espaço dentro da interface. Uma maneira de realmente fazê-lo é aplicá-lo, como mencionei anteriormente, dentro dos elementos relacionados. Portanto, os campos de texto relacionados aos botões de ação também estão relacionados. O espaço apropriado entre os elementos relacionados, por exemplo, a entrada versus os CTAs, o espaço em branco, o espaço em branco está sendo aplicado corretamente? Então, se você pode olhar aqui, é uma mudança muito sutil, mas realmente significativa ao mesmo tempo, porque com o espaço em branco mais simples, você pode gerar mais espaço para respirar seus projetos. Na prática, esse espaço em branco aplicado foi seis a quatro pixels no preenchimento superior, o espaçamento entre esses elementos tem 24. O outro espaçamento dentro desses outros elementos tem 161616 pixels, respectivamente. 14. Introdução à teoria das cores: Ei, se você chegou até aqui, isso significa que você concluiu o módulo de princípios de design. Agora, vamos começar com a teoria das cores. Teoria das cores. Você aprenderá com o básico, as habilidades mais essenciais para criar sistemas de cores, guias de estilo, como aplicá-los em sua interface. E muito, muito mais. Mal posso esperar para começar e vamos aprender. 15. Disco de cores: Quando falamos sobre cores, elas podem basicamente refletir a personalidade da sua marca. Eles também podem atrair clientes e usuários para se comunicarem melhor com sua mensagem. De acordo com Laavnkov, uma cor pode definir o modo básico, o tom, o conceito, a conotação de Quando mergulhamos um pouco mais fundo, você pode observar algo chamado roda de cores. O rolo de cores é tudo o que você precisa para entender e dá sentido a toda essa relação de cores Pelo mesmo motivo, é fácil de ver porque está dividido em 12 formas básicas. Há três cores primárias. Vermelho, azul e amarelo. E também existem três cores secundárias, que são laranja, verde e violeta. E é muito interessante observar que essas três cores secundárias são basicamente a combinação das cores primárias. Então, se você olhar aqui, o azul e o amarelo criam o verde, o vermelho e o amarelo são o que criam o laranja e o azul e o vermelho é o que cria o esquerdo. Há também seis cores de amido, laranja, vermelho, laranja, amarelo, amarelo, verde, verde, azul, azul, roxo, vermelho roxo Então, sim, foi quando você falou sobre a forma básica 12. Quando olharmos para a roda de cores, uma vez que você visualize isso, quando você começar a entender como essa roda de cores funciona, você será capaz de criar esquemas de cores 16. Esquemas de cores: Quando falamos sobre esquema de cores, a primeira que aparece diretamente na sua cara é cor monocromática Monocromática porque mono porque Basicamente, você pode criar esquemas de cores com uma cor e apenas uma cor. Neste exemplo, por exemplo, aqui em uma escola de árvores W, eles têm esses interessantes construtores de esquemas de cores monocromáticos que, por exemplo, aqui, você pode ver com o verde, você pode realmente ter um esquema de cores construído Se você for a qualquer lugar dentro da roda de cores, ela mostrará como os esquemas de cores podem ser criados usando uma cor monocromática E é muito fácil porque esse esquema de cores pode ser construído porque usa apenas uma cor. Quando olhamos para os análogos, as cores analógicas, elas são basicamente cores análogas Portanto, os esquemas de cores análogos são criados usando cores semelhantes umas às outras Então, se você ver o exemplo aqui, esse esquema de cores aqui é baseado porque você tem o verde e também tem as cores que estão próximas da roda de cores. Se você movê-lo um pouco para cá, ele gerará um esquema de cores diferente para você com base na forma análoga de realmente definir as cores O esquema de cores triádico é basicamente composto por tons que estão igualmente dentro do Então, basicamente, significa que eles criaram esse espaço igual dentro da roda de cores. Então, como você pode observar, nas escolas W Tre, você tem um esquema de cores criado usando a formatação trítica Então, à medida que você o move para dentro, acho que vou desligar o modo escuro aqui. Sim. Então você pode ver melhor, eu acho. No esquema de cores tratado, você basicamente o alterna dentro da roda de cores e ele gerará essas combinações de cores com base na sua escolha. Obviamente, existem muitas maneiras de combinar esses esquemas de cores, eles fazem com que pareçam melhores e harmoniosos Mas falaremos sobre isso daqui a pouco. E mais uma que eu acho muito interessante são as cores complementares porque se você olhar para esta quinta, basicamente as cores são complementares dentro das rodas de cores. Então, o que quero dizer com isso, basicamente, você olha nos lados opostos e dentro da roda de cores, é isso que pode gerar cores complementares. Se você mudar um pouco aqui, verá uma composição de cores diferente para esse esquema de cores e, na verdade, poderá ver as cores hexodcmais Se você ainda não sabe o que é hexodmal, vou detalhá-lo um pouco Mas sim, isso é basicamente para esquemas de cores em geral. Veja na próxima. 17. Significado de cores: Que você esteja um pouco mais familiarizado com as cores e a roda de cores. Vamos falar sobre o significado da cor. Cada cor pode representar um tipo diferente de significado. Digamos, por exemplo, o vermelho. O vermelho, pode representar calor, outono, sucesso, criatividade. Enquanto o roxo pode representar poder, fortuna, ambição, realeza e azul pode representar oceano, confiança, tranquilidade e calma. Por outro lado, o laranja pode representar, digamos, calor, felicidade, sucesso, outono, verde pode representar natureza, dinheiro, crescimento, segurança, e o amarelo pode representar energia, sol, clareza, alegria e felicidade Se você olhar muito bem para eles, acho que provavelmente está familiarizado com eles. A Apple, por exemplo , usa o cinza, que, nesse contexto, representa palans Neutro, calmo, McDonald's ou Ikea. Eles usam o amarelo para representar o otimismo, a clareza e o calor, enquanto a Amazon usa essa laranja porque querem que ela seja mais amigável, profissional, alegre Coca Cole está usando vermelho, como ego, virgem, Nintendo, todos usam essa cor vermelha para representar algo que é muito mais ousado, mais empolgante, mais jovem, Yahoo, essas outras marcas, elas usam isso para representar criatividade Sabedoria ou ser sábio. A cor azul geralmente é representada por marcas como Facebook, Intel, pois elas tentam enviar uma mensagem de confiança, tentar avaliar a confiança seus usuários ou clientes E, finalmente, temos a paz, o crescimento, a natureza, que é usada pelas marcas Starbucks, land rover, P Então, basicamente, os significados das cores podem refletir muitas coisas. Eles podem enviar a mensagem subconscientemente porque nosso cérebro está conectado e temos essa conexão natural com cores que podem representar muitas coisas Mas também é importante entender que o significado das cores, dependendo do contexto, não se aplica a tudo, a cada local. Em países diferentes, em culturas diferentes, cores diferentes podem representar coisas diferentes. Portanto, é muito importante manter isso em mente Então, é isso que significa, e vejo você na próxima. 18. Cor usando RGB: Então, agora que você está mais familiarizado com o significado das cores. Agora você vai abordar uma parte realmente mais interessante da cor, como entender o formato da cor. Então, o que quero dizer é que existem diferentes tipos de formatação de cores Eles podem ser RGB, podem ser hexadecimais, podem ser HSB e podem ser HS L. Vou dividir isso em alguns. Então, vamos começar com o RGB. RGB é aquela formatação de cor específica, que representa pela abreviatura de vermelho, verde e azul, e seu valor é o que criou essa cor real que você viu na tela, essa cor real que você viu na Então, vamos mergulhar no Figma e dar uma olhada na roda de cores aqui, por exemplo Ao usar esse valor 1208, 159 e 255, você gerará essa cor específica Mas vamos colocar isso em zero, zero e também zero. Lembre-se de que, ao entrar no Figma, provavelmente ele será selecionado como hexadecimal e você poderá movê-lo e fazer qualquer coisa hexadecimal e você poderá movê-lo e movê-lo Mas eu recomendo fortemente começar com o RGB aqui. Vamos voltar a zero, zero e zero. Se você colocar, por exemplo, 1208, como mostrado neste slide, você terá um tom específico de vermelho Dependendo de quão próximo de 2505, que é o número máximo para o vermelho, ele realmente o tornará mais brilhante, esse é o tom de vermelho que você tem Quanto mais perto você chegar do zero, ele ficará preto. Agora que temos preto, vamos explorar a cor verde. Então, se você colocar 159, esse é um tom específico de verde e, como você acabou de mencionar, você sobe, é mais claro, você desce, é E a última parte, se você usar 255, que é o número máximo, então esse é o azul absoluto Você pode simplesmente brincar com os diferentes tons de azul que ele cria. Sim, isso é RGB em poucas palavras. Enquanto você o mantiver alto e baixo, ele manterá apenas o azul. Mas assim que você o mover um pouco mais dentro da roda de cores , ele treinará a alteração do valor do vermelho, do verde. Isso vai gerar esse tom de azul. Lembre-se, se você olhar para isso aqui, o RGB aqui, como 1208, 159 e 255, você realmente terá essa cor específica Basta aplicá-los simultaneamente. Então 1208, 159 e 255. Aí está. Aí está a nossa cor. Na verdade, essa é a cor que usaremos ao longo do curso para criar o projeto final ou simplesmente para continuar dentro do curso. Então, novamente, isso é tudo para g. 19. Cores usando Hex (Hexadecimals): Tudo bem Agora que entendemos um pouco mais sobre RGB, vamos entrar em hexdcmol hexadecimal basicamente usa essa tag de hash e, em seguida, você tem essa Isso, por exemplo, é o hexidecimal para nossa cor primária nesse caso E a forma como isso funciona basicamente é que, em vez de usar RGB, use o hexidecimal aqui, o hexadecimal E de acordo com onde quer que você se mova dentro de uma roda de cores, isso gerará uma diferença. Mas lembre-se, se você descer, então vai para zero, zero, que é o mais baixo, e então, basicamente, você vai criar um preto. É assim que você cria preto. Então, se você vier até aqui na borda, você vai criar branco com FFF Portanto, dependendo de como você formata sedimal, você obterá um resultado diferente Então, se você colocar digamos, por exemplo, se você colocar, digamos, por exemplo, 00f f22, então você tem um verde E assim por diante e assim por diante. Assim, você pode basicamente explorar sua roda de cores e gerar diferentes tipos de cores. E, na verdade, entre os desenvolvedores, é uma das formatações mais usadas porque é mais fácil simplesmente curtir uma instância no código ou simplesmente no código, essa é a cor que escolhemos No nosso caso, nossa cor estava usando 809 FFF. Você volta aqui, 809 FFF. Então, aqui você tem nossa cor primária. Então, quando você vai até os desenvolvedores, por exemplo, será mais fácil para eles simplesmente olharem para isso e, oh, essa é na verdade a cor que vamos usar. Assim, eles podem copiá-lo e aplicar a eles qualquer contexto que tenham, qual é a cor do botão ou algo parecido. É por isso que acho que usar o HexDMO é a maneira mais fácil de entregar seus projetos ao desenvolvedor 20. Cores usando HSB: Tudo bem. Então, agora que temos RGB e odesmal cobertos, vamos entrar no HSB, que significa saturação Então, como isso funciona no design? Você basicamente vai entrar no preenchimento. Você vai mudar o formato para R HSB, na verdade. E então você tem o mesmo tipo de princípio semelhante ao RGB, mas é mais fácil de lidar porque você basicamente vai se mover com a tonalidade e qual é a tonalidade O matiz e a roda de cores significam apenas em qual posição da roda de cores você está usando a cor Então, se você se mover para este lado, você terá o vermelho. Se você for para este lado, você vai ter o verde, se você chegar mais perto deste e você tiver o azul, e assim por diante. E a saturação basicamente é, tipo, quanto mais você a aumenta, quanto mais forte ela fica e quanto mais baixa , mais perto de 100, é tipo, quanto mais forte , mais forte ela pode ficar Então, se você se aproximar zero aqui no S da saturação , isso gerará, na verdade, o branco E digamos, por exemplo, que você queira saber qual é o brilho. Então, vamos escolher o verde aqui. E você vai navegar pelo brilho disso. Então, como você move isso? Vamos aqui para o verde, e então você só quer escolher o brilho disso, então você vai descer para baixo, modo que quanto mais baixo você vai, mais escuro fica E a última parte do HSP é que você basicamente vai se mover entre zero e 100 Então, o zero significa que é como se o brilho existisse, não estivesse presente Então isso significa que é como se estivesse escuro. Então, se estivermos no verde, basta subir. Então, quanto mais perto de 100 você chegar, você realmente obterá a versão mais brilhante do verde Sim. Então, dependendo de onde sua roda de cores está, ela ficará mais brilhante Se você descer, vai ficar mais escuro. É isso para HSB ou brilho de saturação de matiz. OK. 21. Cores usando HSL: Já temos uma ideia dos hexadecimais RGB e do HSB, vamos analisar e do HSB, vamos a luminosidade da saturação de matiz. Qual é a diferença entre isso? Um trabalha com brilho e o outro funciona com leveza. Se você observar o interior da figma agora, a saturação e a luminosidade da tonalidade, elas podem basicamente navegar nesse formato simples, digamos que temos Portanto, a tonalidade é, como mencionei anteriormente, que é basicamente a posição do indicador dentro da roda de cores Então, em qual posição você está na roda de cores. Digamos que voltemos à cor aqui e queremos ter certeza de que essa saturação seja forte, mais perto você estiver de 200, ela ficará mais saturada e quanto mais você descer, quanto mais perto de zero, ela ficará menos saturada E agora, se você quiser ajustar basicamente a luminosidade das cores, é assim que basicamente você pode criar diferentes tonalidades dessa cor Acho que é literalmente uma das maneiras mais fáceis de criar. Então, digamos, por exemplo, que essa é nossa cor primária e queremos a versão mais clara da mesma cor. Então você pode simplesmente duplicar isso e realmente mudar isso, digamos que em vez de 67, então vamos para 77, então você tem uma cor mais brilhante Você vai duplicar isso mais uma vez, então você pode criar um tom diferente da mesma cor Se você entrar na roda de cores novamente e apenas alterar a luminosidade, digamos 87, terá uma cor ainda mais brilhante Você quer ir para o outro espectro da versão mais escura, então basicamente duplica isso e entra na bobina colorida novamente e Essa é basicamente minha preferência pessoal de fazer isso , porque as operações realmente exageraram aqui Vamos voltar. Digamos que basta colocar 57. Isso vai dar o tom mais escuro do azul. Então, toda vez que você quiser obter um diferencial novamente, como um mais escuro, um pouco mais Então, basicamente, você só precisa ir até o brilho, ajustá-lo para 47 e assim por diante. É por isso que usar o HSL, como o matiz, a saturação e a luminosidade, é definitivamente um dos meus favoritos pessoais, porque basicamente você já escolheu a cor da sua marca Se você quiser gerar diferentes tonalidades da mesma cor, você pode basicamente construir todo o seu sistema de cores usando essa técnica muito simples que usa a formatação HSL e apenas ajustada Basicamente, essa é a formatação de cores para você agora. S na próxima. 22. Tempo de prática Crie uma paleta de cores: Então, nas aulas anteriores, falamos sobre RGB, hexadecimos HSB e HSL Agora, o que vamos seguir em frente com o método preferido que eu geralmente recomendo é o HSL Como expliquei no vídeo anterior, basicamente, quando você usa a saturação de matiz para a geração da paleta de cores , por que você precisa saber essas coisas? Você pode estar se perguntando: Oh, meu Deus, existem tantas ferramentas que você pode usar, que podem gerar essa conexão automática Isso é legal e tudo mais. Na verdade, acelera seu trabalho. Mas você sabe o que é melhor do que isso: ser capaz de entender o que você está realmente fazendo, se algo der errado com seu sistema de cores, se você estiver construindo um sistema de design , se estiver trabalhando em um projeto muito complexo precisar fazer algumas mudanças e precisar fazer algumas mudanças e não conhecer esses princípios básicos, será muito difícil se adaptar ao trabalho, à acessibilidade e a esses outros itens. É muito importante quando você sabe como realmente usar essa formatação de cores em seus projetos existentes ou em seus novos projetos Porque, dependendo da situação em que você se encontra, se você está em uma grande organização ou em uma pequena startup, é muito importante que você aprenda e entenda como isso realmente funciona. OK. Lembre-se de que falamos sobre o HSL, então você tem o valor do HSL Então, o que geralmente faríamos. Basicamente, nomeamos a cor. O nome da cor com, digamos, estamos na classe, nós a chamamos de cor primária. O nome da cor, como o tom da cor aqui, como roxo, 500, que geralmente é a base, e então você tem o formato em HSL e também em hexodcmal Mencionei anteriormente que, em geral, quando você está entregando para os desenvolvedores, é importante entregá-lo em hexodemol, pois torna mais fácil para eles adicioná-lo ao código, gerar o que quer que seja e fazer o trabalho que você Quando é hexodemol para essa interface de usuário aqui neste exemplo de interface, você vê os Se você tivesse que manipular tudo em código hexadecimal, seria um Mas em HSL, é mais fácil porque você pode literalmente alterar e ver a diferença ao aplicar na interface do usuário Por exemplo, o primeiro usa a luminosidade 80, que é mais próxima de 100, o que significa que é mais brilhante O 70 é um pouco mais escuro. E a turfa, que está mais próxima de zero, a torna mais escura É assim que você manipula a tonalidade com a mesma fonte de cor, como a mesma cor primária Se você começar com roxo, 500, então essa é a tonalidade. Sim, é basicamente assim que você manipularia a cor e a variação da cor Você ainda mantém a tonalidade. O tempo todo. Você ainda mantém a saturação o tempo todo e apenas ajusta a luminosidade, e é basicamente isso Se por algum motivo, digamos, por exemplo, por motivos de acessibilidade, você precisar ajustar , ajuste a saturação, mantendo a tonalidade Ou até mesmo ajustando o tom, mas desde que não se desvie muito da Seria mais interessante se, ao construir a marca, a marca já considerasse a acessibilidade. Depois, você só precisará gerenciar todos os outros aspectos usando a saturação e a luminosidade Toda essa paleta de cores que você está vendo agora foi construída manualmente Eu fiz isso sozinho manualmente. Não era tão complexo porque, depois que aprendi a gerenciar a formatação de cores escolhendo minhas cores primárias, ficou muito mais fácil criar toda essa paleta Basicamente, as classes são como se as cores fossem roxo, cinza , verde, azul, amarelo e vermelho, que seria a cor primária. Essas serão as cores usadas no texto ou no cinza. Isso é cor de sucesso, informação, alerta e perigo. Se você descer um pouco mais, verá os tons aqui, como 500. 500 geralmente é a base, aquela que você usará mais ativamente. Entre na figma e comece a usar essas cores aqui A próxima etapa dessa prática será o primeiro exercício prático: você precisará usar essa cor de referência para criar sua própria paleta de cores E isso é intencional. Você não entra no Figma e tenta ajustá-lo ou copiar as cores do HSL, mas sim fazer você mesmo Será muito importante porque, depois de obter a cor base, tente ajustá-la com base no exemplo que compartilhei anteriormente E é assim que você vai chegar a esses diferentes tons da mesma cor, dos mesmos tons. Sim, é basicamente isso. Espero que você tenha conseguido fazer o exercício, confira o link abaixo. Eu tenho o link para o Figma para o arquivo de exercícios, o arquivo de prática Então, boa sorte com o exercício e veja no próximo. OK. 23. Introdução à tipografia: Comece com a tipografia. Como mencionei, falaremos sobre sistema de tipos versus web f, muitas outras partes da tipografia Basicamente, a tipografia, de acordo com Robin Bringhurst, tipografia é a arte da linguagem humana com a forma da linguagem traduzida a tipografia é a arte da linguagem humana com a forma da linguagem traduzida. É basicamente tudo o que você vê na web. E também pesquisas mostram que 95% da web é composta por tipografia No final do dia, quando você olha essas interfaces no blog, no aplicativo de mensagens, tudo o que você usa diariamente para refazer sua tarefa mínima. Eles são baseados na tipografia. Se você olhar a imagem dele, sim, tem um carimbo de data aqui, título, você tem um botão, mas a maioria é tipografia Começamos pelo peso da fonte. Podemos digitar o tipo de letra. Tipo de letra. É Ariel, é roboto ou outro tipo de fase Mas antes mesmo de entrarmos nisso, quero que você concentre que o peso da fonte é basicamente uma escala 100 a 900, onde basicamente você pode diferenciar o peso da Começando com 100, é possível uma linha de tênis, ultraleve. Mas, geralmente, chamamos isso de 100. E quando você vai para 200, é uma luz, 300, muito comum, mas está lá, chamamos de livro, e depois 400, que é um tamanho normal ou normal ou simples ou padrão, que é basicamente a linha de base do seu tipo de letra Também podemos ter o meio com 500, 600 é demi bold Eu sei o nome dito, mas está lá, então estou compartilhando. 700 é o ousado. Se você quiser pesar mais do que 800, isso bastará, basicamente, cem do que você chama, e o mais pesado de todos eles é basicamente o 900, que é extra preto ou qualquer tipo de rosto Se falamos sobre tipo, eu posso enlouquecer com isso, mas vamos simplificar e o mais pesado de todos eles é basicamente o 900, que é extra preto ou qualquer tipo de rosto. Se falamos sobre tipo, eu posso enlouquecer com isso, mas vamos simplificar Um tipo de letra é basicamente o que você escolhe aqui dentro. O que representa a composição, o estilo, o design, o que é. Podemos dizer que é aéreo. Se você diz que isso é roboto, então é. Você pode dizer que este é um script de linha e, em seguida, isso realmente depende do que você está procurando enquanto define seu guia de estilo e provar que esse tipo de letra é basicamente a aparência de sua tipografia É basicamente a aparência da sua tipografia. Como mencionei, ao escolher uma tipografia, é importante usar uma tipografia que tenha uma faixa interessante Vamos continuar. Acabamos de falar sobre o peso da fonte em itens que são as linhas de base. Você tem o normal com o código que pode ser 400, leve, 300, extra leve e você tem 900. Nem todas as faces de texto têm essa variedade de espessuras de fonte. Nesse caso, temos o roboto ativado e o Roboto é um dos mais populares Isso é criado pelo Google e mantido pelo Google. Porque tem um alcance extremamente grande no navegador. Tem um jeito muito divertido. Você pode simplesmente enlouquecer com isso, pois pode ter muitas coisas a ver com isso. Portanto, também é importante considerar ao escolher seu tipo de letra Significa o estilo e a aparência da sua tipografia. Certifique-se de escolher um tipo de letra que corresponda compatibilidade do navegador, que tenha uma boa quantidade de peso de fonte e seja capaz de suportar diferentes tamanhos de fonte que você precisará em seus designs Em poucas palavras, isso é tipografia. Em outro vídeo, vamos detalhar isso de uma forma mais prática para que você possa ver como criar seu próprio guia de estilo usando essas dicas e esses insights que acabei de compartilhar com você. Veja na próxima. 24. Tipografia: vídeo anterior, falamos muito sobre o tamanho da fonte e o peso da fonte, mas agora vamos detalhar isso um pouco mais em exemplos práticos. Aqui, em primeiro lugar, quando você está estruturando sua escala de tipos, aplicando sua escala de tipos aqui, você escolherá o nome dela. Em HTML bruto, você tem H um, H dois, H três, até H seis. H seis, o que significa que é o menor tamanho e H um é o maior. E o tamanho você pode definir de acordo com suas necessidades, mas vou compartilhar como você pode fazer isso de uma forma que siga algumas regras simples que podem ajudá-lo a fazer as coisas mais rapidamente. Até agora, quando você está escolhendo seu tipo de letra, digamos aqui, esse é o tipo de letra que você está Eu sou, eu já o tenho aqui. Meu tipo de letra favorito no momento é poppings. Você vai, digita poppings, você os instala dentro do seu E vai funcionar para o Figma, provavelmente se você estiver usando o Figma web, então ele já será nativo, se não me engano Mas, em geral, depois de escolher a face do tipo de fonte, você pode alterar o peso da fonte. Em geral, em geral, por razões práticas, especialmente se você trabalha em uma startup, você não vai ficar louco com o peso da fonte. Basta escolher o tipo de rosto, deixá-lo como normal e começar do maior para o menor. Nesse caso, escolho a fase de digitação, que está aparecendo, o salário da fonte, que é regular e o tamanho da fonte O tamanho da fonte aqui é 64. Vou começar com 64. Eu disse que isso é 64. A altura da linha pode ser igual a, o que é automático. Figma vai definir isso por si só. Mas, como você pode ver aqui, é interessante colocar, digamos, 96. Ok. E a razão pela qual estou fazendo isso é porque ele segue algumas regras específicas que , quando você está criando sua escala de tipos fica mais fácil entregá-la aos desenvolvedores. Mas também não há problema em tê-lo como automático, pois ele gerará automaticamente o número que corresponde à altura da linha. E eu não falei sobre altura da linha ou algo parecido, mas basicamente a altura da linha, como o nome já diz, é a altura da linha. Basicamente, se você entrar no figma e ver isso aqui está a altura básica da linha dessa tipografia desse tipo de letra Essa é a altura da linha e também se aplica a todas as outras. A altura da linha aqui pode ser definida nesta pequena caixa onde você vê que a altura da linha está aqui. E o espaçamento entre letras. Vamos falar sobre espaçamento entre letras para tudo o que é precioso. Por favor, não toque nisso. A menos que você escolha uma fonte muito específica ou inicie um projeto que já tenha uma fonte escolhida e ache que ela precisa de um pouquinho de espaço , você pode ajustá-la um pouco Mas, de preferência, não toque nisso, deixe-o em 0%, deixe-o no padrão padrão, para que seja menos estressante manter isso. E sim, vamos continuar. Como você pode ver aqui, você tem a cabeça um, que é 64 e você a diminui em oito. Como você diz 64, 56 , 48, 40 e assim por diante. Dessa forma, você já criará até o título do título um ao título seis, toda a sua estrutura de cabeçalhos. Não vou mostrar a outra parte de como você vai se estruturar dessa forma, mas isso é apenas o começo para que você entenda a fase de tipos. O tamanho da fonte é a aparência da fonte. Qual é o peso da fonte? Qual é a altura da linha e qual é o espaçamento entre letras Em outra aula, abordaremos outras partes, a parte mais prática, fique 25. Exercício de tipografia: aula anterior, falamos sobre como a tipografia funciona, um pouco mais sobre escala de tipos, como escolher a diversão, como escolher o tamanho, escolher o peso, a altura da linha e o espaçamento entre letras Agora, o que vamos fazer. O que você vai fazer é fazer um pequeno exercício aqui. Você criará sua própria pequena estrutura de sua tipografia e a transformará em sua pequena mesa aqui em sua pequena mesa Então, você escolherá uma fonte diferente e começará a brincar e ver como criá-la do cabeçalho um ao título seis. Então você vai logo depois encontrar seus rótulos. Parágrafo e sua legenda. Basicamente, é o seu momento de experimentar brincar e ver como você vai construir isso de uma maneira fácil. Se você tiver alguma dúvida, sinta-se à vontade para entrar em contato, comentar e interagiremos um pouco mais Oh, só mais um pequeno detalhe. Basicamente, você pode no arquivo de exercícios. Você pode simplesmente mover isso. layout já está incorporado, e você pode simplesmente duplicá-lo como um D comum e simplesmente duplicá-lo em D comum, movê-lo para que sua tabela possa ser organizada e parecer mais clara e fácil de ler. Veja na próxima aula. 26. Estilos de texto: Agora que você já construiu toda a sua estrutura. O que você vai fazer é transformar isso no estilo. Você vai começar a construir uma pequena base do seu guia de estilo. Então, o que você vai fazer aqui basicamente é o seguinte. Agora que você já sabe qual é o tamanho, o peso, a altura da linha e o espaçamento entre letras Você vai vir aqui em vez de Figma e esse cantinho aqui, você viu aqueles quatro pontos, esse pequeno ícone aqui. Você vai clicar nele. Então, o que você vai fazer é dizer cabeçalho um e criar. Você vê que seu título já está aqui. Então você fará o mesmo com os outros como clicar duas vezes aqui. Basta clicar. Esse é o título dois, e você cria sua estatística. Se quiser fazer mais algumas alterações nas propriedades, você pode continuar fazendo isso, como ajustar altura da linha ou algo parecido , fique à vontade para fazer isso Mas, em geral, como você já definiu tudo aqui, muito mais claro o que precisa fazer e tudo mais. Tudo o que você precisa fazer é clicar no botão para criar a etapa. Se você precisar e se quiser. É muito útil adicionar alguma descrição adicional, sei lá, porque essa descrição pode ajudar você ou os desenvolvedores ou, se digamos que você tenha uma equipe maior de designers e eles usarão o guia de estilo que você criou, eles saberão, por exemplo, títulos duplos são usados para seção da página, coisas assim Vou me aprofundar mais nisso no design da página de destino. Mas, basicamente, você só precisa entender que isso vai ajudá-lo a se comunicar melhor como usar os dois títulos aqui. Isso cria que o que acaba acontecendo é que ele cria uma seção inteira aqui para você em seus tecidos e torna muito mais fácil reutilizar equipamentos Digamos, por exemplo, que você queira dizer que esse é um H, então basta ligar e aplicar o H nele. Se você quiser dizer que isso é um H dois, você vem aqui, aplica o H dois, então a árvore H, se você já tem uma árvore aqui, H três, não mudou muito porque estou aplicando o estilo. Digamos que H quatro. Agora você vai aqui e ajusta, tem seu H quatro aqui e assim por diante e assim por diante. Basicamente, você verá que isso já ajuda você a ser consistente e manter o estilo sem afetar seus designs. Quando você começa a projetar algo e usa a mesma técnica de criar seu próprio guia de primeiro estilo têxtil, será muito mais fácil trabalhar Digamos, por exemplo, que você precise excluir alguma coisa. Se por algum motivo você criou isso e está duplicado, como neste caso, você pode basicamente vir aqui, clicar no botão direito e excluir a etapa mesmo que você vai fazer com este aqui também. Exclua a etapa. Então, dessa forma, você pode mudar, você pode editar aqui a qualquer hora, a qualquer momento que quiser Isso é tudo para a turma. Aplique no pequeno sistema que você construiu e certifique-se que tudo tenha seu tecido aplicado. Nos vemos na próxima. 27. Como entender as sombras e o exercício: Nesta aula, vamos falar sobre sombras. O que são sombras Digamos, por exemplo, que em um dia ensolarado, você vê um gato, ele está perto da parede, a projeção da sombra está na parede Da mesma forma que o gato tem uma sombra aqui. As interfaces também têm sombra. A sombra serve para dar forma e profundidade aos elementos e aumentar a legibilidade e aumentar a capacidade de identificar algo que é interativo muito rapidamente Neste caso, aqui agora, sombras no início dos tempos do mural da Internet, parece que foi há muito tempo Na verdade, foi há muito tempo, no início dos anos 90, no início dos anos 2000, quando essas interfaces que estão sendo projetadas, posso dizer design, estavam sendo projetadas por engenheiros, encontraram sua própria maneira de criar elementos de interação física O que significa que eles estão tentando trazer profundidade. Eles estão tentando dar estrutura e você pode ver aqui tem um botão muito sólido. Eles estão tentando, de alguma forma, fazer parecer que você pode realmente interagir com isso. Hoje, as mesmas sombras são usadas para criar interfaces mais modernas e gerar mais interação Se você quiser criar a interface, primeira coisa que você precisa saber é que ela tem a visão frontal e a visão de perfil na interface. Os ônibus espaciais costumam ser efeitos visuais extras e, se você os usar corretamente, eles podem manipular o eixo z e criar uma O que é o eixo z? Eixo Z, basicamente a distância do elemento em relação à sua superfície. Esta é a vista frontal e esta é a vista do perfil. Se você tiver um elemento, digamos que seja um cartão. Basicamente, a sombra vai fazer com que ela se eleve mais, mais perto ou mais perto da superfície Então, quanto mais próximo da superfície, parece que é menos interativo. Mais distância da superfície ou do índice z, isso indicará ao usuário que isso é algo com o qual você pode interagir. Usar as sombras padrão básicas é meio complicado porque as sombras padrão não consideram muitos é meio complicado porque as sombras padrão não consideram muitos elementos comuns. Portanto, eu recomendo fortemente que não o use. Basicamente, você pode simplesmente ajustar o eixo, o eixo yx. Então, você só precisa ajustar os eixos x e y para criar mais profundidade. Então, depois de aplicá-lo, por exemplo, aqui, você vê que, quando não há elevação, parece que tudo está plano na interface. E parece um pequeno pop aqui e para o cardápio. Não tem nenhuma profundidade. Então, na verdade, parece que é assim. É por padrão. É plano, mas na verdade é um menu pop-over. Mas é difícil distinguir um quando você não tem uma sombra indicando que não, na verdade, isso é algo desaparece e volta com base na interação do usuário. Portanto, para que tenha mais profundidade e pareça mais interativo, basta gerar profundidade no menu suspenso e fazer com que indique que a alteração é uma mudança de estado com base em um evento ao passar o mouse Se você passar o mouse aqui, poderá ver que algo está acontecendo Você vê que a sombra da caixa aplicada aqui deixa claro que, oh, isso não faz parte da interface de usuário explicitamente É um menu suspenso. Dessa forma, você ajudará o usuário a olhar para isso e dizer: Ah, na verdade, isso é mais, é algo com o qual você pode interagir. Então, o exercício das sombras. Você precisa entender um pouco mais sobre o eixo y x e o x x. Então, o que você vai fazer é pegar este exemplo nesta página de exercícios Figma e aplicar as sombras Então, como você faz isso? Você é, você tem esse elemento aqui. No menu suspenso, e o que você vai fazer no Figma, tudo o que você precisa fazer é clicar aqui Depois de clicar aqui, você vê que ela já criou automaticamente a sombra, mas essa é a sombra de outono Eu disse que Ty recomendou que você fizesse um pouco mais de ajustes para que ela se tornasse mais interessante Em vez disso, caímos uma sombra aqui. Para ajustá-lo, basta alterar o eixo x, você vê que a sombra aqui se move um pouco. Se você vai brincar com o eixo y, ele se moverá assim. Esse é o eixo x e y. O borrão é o quão embaçada essa sombra está. Você pode basicamente aumentar o desfoque para torná-lo mais frio e também alterar a opacidade da Você pode alterá-lo e fazer com que pareça menos visível. Há uma sombra e há 100%, é muito densa. Neste exercício, o que você precisa fazer é basicamente corrigir, aplicar uma sombra e criar uma profundidade para os usuários entendam que existe um menu suspenso. Se você tiver alguma dúvida, basta deixá-la nos comentários e analisaremos isso juntos. Eu vou estar lá para te responder. 28. Compreensão e criação de ícones: Vamos falar sobre ícones. Os ícones aprimoram a experiência do usuário e, na verdade, tornam os produtos mais utilizáveis Usamos ícones em todo lugar o tempo todo. E isso torna sua vida muito mais simples. Existem diferentes tipos de ícones, como penhascos, contornos, ícones universais, ícones conflitantes e Podemos usar os ícones preenchidos, o que dá uma sensação de algo mais sólido. Podemos usar ícones coloridos, que podem ter cores sólidas ou até gradientes. Mas observe, digamos, por exemplo, que, para os ícones coloridos, quando você tem seu telefone , você está recebendo uma ligação, se você vê um ícone verde e sabe que deve aceitar uma ligação. Se o ícone vermelho, você sabe que é a chamada telefônica recusada. É assim que a simplicidade pode afetar suas decisões diárias . Faça como ícones, eu não sou muito fã disso, mas acho que fica bem em certas circunstâncias em certas interfaces de usuário. Mas sim, é de cor dourada e branca. Isso cria alguma singularidade interior. Mas eu, pessoalmente, não sou muito fã disso, seja o que for, faço o que o projeto precisar. Ícones delineados Acho que, de longe, esses são meus tipos favoritos de ícones porque não são tão sólidos. Eu acho que esse ícone sólido, por exemplo, eles criam muito. É um pouco duro demais, mas na minha perspectiva. Ícones Oli, eles são mais criados por traçado vetorial, estão vazios por dentro e são mais leves de usar. Às vezes, uso esses ícones delineados que correspondem a determinadas tipografias e Ao criar um ícone de nivelamento, ele já tem um contêiner, e você deve respeitar a área do contêiner , pois se você torná-lo completo e já tocar no contêiner, poderá ter um pequeno problema com o tamanho e coisas assim, além de não dar espaço nem espaço É muito bom usar o contêiner de ícones. O preenchimento do ícone, como você viu no contêiner ao redor, tem a grade que cria um pouco mais de estrutura, depois o preenchimento que fornece o espaçamento entre o ícone em relação ao raio do ícone é igual aos cantos, pode ser muito nítido ou um pouco mais arredondado Dependendo do tipo de emoção ou da seriedade do produto, certifique-se de transmiti-la se for algo mais amigável São mais acolhedores, então usarão bordas mais arredondadas. Se for algo um pouco mais parecido, digamos, com produtos mais sérios, mais corporativos e mais corporativos , você tentará criar algo um pouco mais nítido do que isso As linhas-chave do ícone são basicamente assim. Eles são algumas pessoas que definitivamente se tornam muito profissionais, muito loucas por ícones, mas não vamos fazer isso agora. Mas é muito importante entendermos um pouco mais sobre a taxa de ouro nos ícones Então, quando você cria um ícone como você viu anteriormente, esses são os contêineres. Essa é a grade e , geralmente, era para IOS, por exemplo. É aqui que eles têm a área recomendada. Portanto, a área recomendada é onde eles esboçam , esboçam e desenham tudo e se certificam de que cabe nessa área aqui e não exceda o espaço seguro, a Assim como mantém bem o preenchimento, ele o mantém muito limpo, e é assim que eu acho que a Apple conseguiu manter a consistência dentro do ícone deles nas lojas de aplicativos, por exemplo Portanto, todos os aplicativos têm as mesmas especificações e o mesmo tamanho Como se eles tivessem essa diretriz específica que precisam seguir para criar seus ícones de aplicativos E anteriormente, eu nem tenho certeza hoje se esse ainda é o caso, mas no Android, é um pouco mais difícil criar ícones de aplicativos porque sim, eles têm algumas diretrizes, mas todo mundo os cria à sua maneira. Talvez tenham mudado um pouco, mas, pelo que me lembro, há alguns anos, ainda eram praticamente qualquer pessoa capaz de criar seu ícone e parafusar a grade, esquecê-la e fazer o que quiser, que é bastante complicado porque eles não têm o contêiner que mantém a base e lhes dá a sensação de exclusividade Essas linhas-chave de ícones, digamos, esses são os ícones do aplicativo, eles sempre usam a mesma área segura, como mencionei. É como o máximo onde eles saem. mesmo acontece com todos os outros ícones Nas linhas principais do Android, eles podem ser circulares, quadrados, formatos diferentes Como mencionei anteriormente, é um pouco desafiador manter a consistência em todas as plataformas. Os ícones universais são basicamente aqueles que são imediatamente fáceis de reconhecer. Geralmente, para o ícone de pesquisa, as pessoas geralmente o usam para as informações relacionadas à conta ou ao usuário. As pessoas usam esse tipo de ícone, tela inicial ou qualquer coisa relacionada à casa. Eles usam o ícone inicial. Portanto, é muito fácil reconhecê-los. Esses ícones conflitantes são imediatamente reconhecíveis porque são reconhecíveis, mas também podem significar a Às vezes, um favorito em um aplicativo e use o coração e um favorito em outro aplicativo pode usar uma estrela. Realmente depende de um air Bin B que eles estão usando, não sei, talvez uma estrela para salvar um favorito no outro aplicativo que está usando o coração. Esses são os ícones conflitantes que acontecem quando você cria algo em grande escala Isso se torna uma convenção, mas então alguém quebra a convenção. Portanto, você tem dois tipos de convenções e isso pode criar confusão para o usuário, mas às vezes, na maioria das vezes, elas significam a mesma coisa O exercício que você precisa fazer aqui é basicamente usar a diretriz para criar esse pequeno ícone Você já tem a grade aqui. O que você vai fazer é tentar esboçar esse ícone aqui e criar o componente a partir dele e criar três tamanhos diferentes para ele Você vai para o tamanho dos ícones 24, 36 e 48. É muito fácil redigi-lo. Basta colocar isso aqui, passar por cima, e você pode dobrá-lo aqui OK. Então você tem um lado. Então você faz o mesmo, puxa para cá e ajusta, tenta ajustá-la da melhor maneira possível. É muito fácil de usar e, claro, você pode criar. Definitivamente, você pode ajustá-lo e torná-lo nítido, torná-lo mais interessante. Você não quer manter as partes muito nítidas, então você vai ajustar o raio, venha aqui, ajuste a leitura por uma, você pode abaixar um pouco mais Definitivamente, posso deixá-lo assim, e então basta usar o círculo, colocar um olho para colocá-lo no centro. Um pouco maior. Lembro que ao usar o dimensionamento é tentar usar números mais arredondados , pois facilita a medição e a manutenção do mesmo tamanho pois às vezes pode ser um pouco estranho Você acabou de transformar esse preto em zero. Você pode fazer com que fique assim, ou você pode ampliá-lo um pouco mais. Escale até seis. Então você coloca um traço, remove a cor de fundo, a cor de preenchimento, aumenta um pouco mais. Veja a parte inferior, você quer torná-la mais extensa. Pronto, você já tem uma base e também pode torná-la um pouco mais arredondada. Então, parece ainda mais legal. É isso mesmo. Desenhar ícones não é tão fácil quanto eu estou fazendo um som, mas não é tão desafiador nem tão complicado, mas existem muitas diretrizes, tantas referências para criar um ícone. Para este exercício, basta usar a página de exercícios no Figma e começar a criar diferentes tipos de ícones na pesquisa, na página inicial, criar seu próprio pequeno conjunto de ícones e depois compartilhá-lo na comunidade, para que possamos olhar para trás e ver quais são os experimentos e coisas legais que você faz Você pode criar, digamos, de cinco a dez ícones e compartilhá-los na comunidade. Ficarei feliz em analisá-lo e em outros cliques, além de dar alguns comentários Nos vemos na próxima. 29. Introdução às heurísticas de usabilidade: Neste módulo, falaremos sobre as dez heurísticas de usabilidade As heurísticas de usabilidade são princípios gerais Em palavras simples, existem algumas diretrizes, estruturas e princípios que podem realmente ajudá-lo a projetar interfaces melhores Mas lembre-se, eles são como uma regra prática. Você pode usá-los se quiser. Às vezes ou na maioria das vezes, isso ajuda, especialmente quando você deseja lidar com casos extremos ou talvez evitar erros. Resumindo, eles foram definidos por Jacob Nielsen e, basicamente, o design e definiram esses dez princípios que podem ajudar os designers a se moverem mais rapidamente enquanto projetam E o que é importante é que, em poucas palavras, vai te ajudar muito, evitar erros, como dar feedback instantâneo ao usuário, como aprender quando e como entender a visibilidade dos sistemas ou quando as coisas dão certo ou quando as coisas dão errado ou quando algo está em andamento Em poucas palavras, isso é basicamente o que é um truque de usabilidade 30. Heurística de usabilidade  introdução: Dez heurísticas de usabilidade. As heurísticas de usabilidade são basicamente alguns princípios gerais Em palavras simples, elas não são diretrizes específicas, mas são uma estrutura que ajuda você a criar interfaces melhores e também ajuda os usuários a ter uma melhor experiência ao usar o aplicativo que você pode criar. Portanto, a heurística de usabilidade foi definida por Jacob Nelson, que Esse cara já existe há muito tempo e criou um conjunto de estruturas que são as dez heurísticas de usabilidade que vou mencionar no próximo vídeo e por que isso é importante e Como designer, é importante entender todos os fundamentos, como iconografia, tipografia, espaço em branco e tudo o que você aprendeu nos módulos anteriores, mas isso o ajudará a realmente antecipar os problemas antes que eles antecipar Eles vêm com expectativas, lidando com coisas que dão errado, como você faria isso e todos os outros itens Vamos começar com uma das opções de usabilidade aqui. Vamos falar, por exemplo, sobre visibilidade de status ou visibilidade, um, dois, três, túmulo. Vamos falar, por exemplo, sobre a visibilidade do status do sistema. O que isso realmente significa? Digamos, por exemplo, quando um usuário está passando o mouse sobre um botão Digamos, por exemplo, que um usuário esteja passando mouse sobre um botão nesse plano Se ele passar o mouse sobre o botão, mas nada acontecer, o usuário não terá certeza se há mesmo um evento acontecendo se esse botão estiver realmente sendo Mas quando, por exemplo, você faz um pouco sobre o evento de passar o mouse, parece que algo está acontecendo e, quando você remove o mouse, ele mostra algo. Isso é 31. Visibilidade do status do sistema: Agora que você entende um pouco do porquê da heurística de visibilidade, como ela funciona, o que é e como ela vai ajudar você como designer de interface do usuário, vamos começar com um dos Por exemplo, vamos falar sobre a visibilidade do status do sistema. Em palavras simples, me diga o que está acontecendo agora nessa interface. Digamos, por exemplo, que você acesse um site, veja esta pequena seção de preços, passe o mouse sobre o botão e olhe para ele. Se nada acontecer, você pensará que algo está errado ou não é realmente um botão ou exclicável. Mas se você passar o mouse sobre o botão e ele mudar a cor do plano de fundo, parece que é Essa é a razão pela qual isso acontece porque as pessoas estão prontas para usar quando realizam uma ação, há um feedback instantâneo, especialmente em aplicativos. Outro exemplo aqui é: se você estiver fazendo o upload de algo, você precisa me mostrar qual é o status atual Aqui, por exemplo, você tem um ícone de exclusão, que realmente não corresponde ao que você está tentando fazer. Nesse caso, aqui, isso seria ainda mais preciso quando você está carregando um arquivo, por exemplo, esse vídeo de 3 gigabytes Você precisa mostrar qual é o estado atual, o que está acontecendo, quanto já foi enviado e a possibilidade de cancelamento no momento Dessa forma, você permitirá que o usuário faça mais, entenda o que realmente está acontecendo e até mesmo evite possíveis erros ou problemas. Outra forma de usar heurística de status do sistema é basicamente aplicá-la para mostrar feedback instantâneo Digamos, por exemplo, neste formulário. Outra forma de usar essa heurística de usabilidade é aplicá-la ao feedback instantâneo Digamos, por exemplo, que você queira participar, o usuário deseja participar de um boletim informativo. Há um boletim informativo sobre IA aqui. Você pode colocar o nome e o formulário. Se você clicar no botão e nada acontecer, vai parecer que algo está errado, ou que o usuário cometeu um erro ou que algo está errado. Há algo incorreto. Uma forma de lidar com isso seria quando o usuário clicar neste boletim informativo, ele deveria mostrar se leva algum tempo para carregar, o que acho que não há razão para demorar para carregar. Mas digamos que, se levar algum tempo para carregar , significa que você mostra um botão de carregamento e, se o formulário foi inscrito com sucesso , você pode mostrar que a cópia mostra um ícone de sucesso também mostra uma mensagem que realmente confirma que o usuário se inscreveu no boletim informativo Essa é a visibilidade do status do sistema para você. 32. Combinação entre os sistemas e o real: Essa heurística de usabilidade é muito simples. Como o nome diz, a combinação entre o sistema e o mundo real é basicamente o que você precisa fazer. Na interface que você está projetando, você precisa garantir que a cópia , os ícones ou qualquer coisa que você esteja fazendo correspondam ao máximo à realidade. A cópia, por exemplo, neste caso aqui, se você quiser atualizar o que está realmente atualizando , você está atualizando o plano, atualizando o Uma boa maneira de fazer isso é como dizer um plano de atualização. É uma coisa pequena muito sutil, mas melhora a experiência e gera clareza. Nesta outra cópia aqui, você pode ver que está falando sobre, tem certeza de que deseja excluir o relatório porque pode realmente colocar, digamos, por exemplo, que você queira colocar tem certeza de que deseja excluir isso, isso, o quê? Se for um relatório, se for um documento, se for um formulário, o que você deseja excluir? Nesse caso, você melhora a cópia certificando-se de que tem certeza de que deseja excluir este relatório? Informe a eles o que vai acontecer. Se nos próximos 30 dias eles não o recuperarem , ele será excluído permanentemente. E aqui está o botão excluir, a cópia que também diz, excluir relatório e um ícone de exclusão aqui. Na verdade, representam uma lata de lixo, que é conhecida por ser algo útil quando você vai excluir algo É isso para combinar sistemas com o mundo real. Nos vemos na próxima. 33. Controle e liberdade do usuário: Controle e liberdade do usuário. Para mim, essa é uma das minhas heurísticas de usabilidade favoritas até o momento , porque na verdade está tão presente no dia a dia que às vezes você nem percebe, mas, como designer, você perceberá ainda mais Você vai sentir muitas emoções. É possível cancelar o envio desse botão. A única razão pela qual esse botão, por exemplo, é algo que realmente pode reduzir qualquer tipo de atrito ou problema com sua família se você enviar algo impróprio em um grupo É um ótimo exemplo de liberdade e possibilidade de controle. O botão Voltar também é um exemplo de liberdade de controle, porque imagine que você está indo para um bate-papo e não consegue sair. Isso é controle restrito. Outro exemplo aqui é desfazer ou refazer. Se você está projetando algo e está muito avançado, mas precisa realmente refazer algo ou fazer alguma coisa. Dessa forma, você pode fazer isso, resolver o problema e seguir em frente. Isso é tudo para o controle e a liberdade do usuário . Nos vemos na próxima. 34. Prevenção de erros: Desfazer. Uma prevenção de erros. A prevenção é muito importante, na verdade, porque quando você está projetando, você quer ajudar o usuário a executar a tarefa com sucesso em situações delicadas que podem afetar um negócio Você quer ter certeza de que está equipado com uma prevenção que ajudará o usuário a evitar qualquer tipo de erro possível. Vamos dar uma olhada nesse exemplo. Aqui você pode ver que lançará uma campanha de marketing para os assinantes do seu boletim informativo. Você pode ver aqui nesta cópia que diz que você está prestes a enviar a campanha para o grupo do boletim informativo e essa quantidade de assinantes. Esse é o momento de glória. Você vê a pequena ilustração aqui, simbolizando que, se você vai enviar este boletim informativo, pronto Você vai realmente fazer alguma coisa. Você tem certeza sobre isso? Tem certeza de que esse é o grupo? Esse é o número de assinantes? Se sim, então você vai enviá-lo agora. Outra maneira pela qual você vê isso provavelmente diariamente. Outra prevenção é se você, por exemplo, digitar criando aplicativos e, em vez de colocar o tipo S, o Google vai oferecer sugestões de que essa é uma palavra incorreta. Talvez você queira dizer isso, você verá conjuntos de sugestões possíveis com a possível resposta correta do que você escreveu em vez do Z, você vai mostrar a palavra com aplicativos com S em vez disso. Outra forma de prevenção do cabelo é quando você está projetando algo e quer ter certeza de antecipar o usuário O que quero dizer com isso é que, por exemplo, você está neste aplicativo chamado liner e está procurando por documentos específicos Você pode deixar o usuário sem nada pelo que esperar. Estamos apenas digitando como traduzir o documento. Se você fizer isso, também é, mas eu realmente não ajudo o usuário a ter a possibilidade de procurar outras opções. Uma forma de ajudar o usuário a evitar esses erros é mostrar uma lista de, digamos, até cinco itens na pesquisa que realmente correspondam à palavra-chave que o usuário está procurando. Mais uma que eu gostaria de mostrar aqui é muito boa e está no topo com a mesma frequência, porque, como você tem, as quatro coisas que você faz principalmente no desenvolvimento e design de software são as mais básicas, que são criar, ler, atualizar e excluir Quando você está excluindo coisas e projetando software ou aplicativos, se quiser excluir algo, pode ser que os dados sejam confidenciais Se você não avisar um usuário, basta ter um botão x ou um botão de exclusão, e o usuário clica nele e ele desaparece imediatamente ou o usuário clica acidentalmente, isso pode causar problemas para o usuário. Para evitar isso, se o usuário clicar no botão e excluir algo, você precisará verificar. Tem certeza de que quer fazer isso? Apenas expresse que, depois de excluir este item, será esse resultado. Se tiverem certeza disso, poderão executar a ação de clicar em excluir. Dessa forma, você ajudará o usuário a superar qualquer obstáculo que possa enfrentar e também evitar que ele enfrente qualquer tipo de erro que possa causar problemas nas tarefas diárias trabalho clientes ou algo parecido Sempre tenha isso em mente. prevenção de erros é um dos principais princípios de design e usabilidade que ajudarão você a mitigar tantos problemas Isso é tudo para este vídeo e eu vejo no próximo. 35. Reconhecer em vez de recordar: Tudo bem. Este é muito simples e direto Mas às vezes pode ser difícil para o designer entender quando realmente fazer isso. E esse princípio de reconhecimento, em vez de recordação, é muito simples . Deixe-me te mostrar como. Isso significa basicamente que você deve sempre minimizar a sobrecarga do usuário, porque todos nós temos uma capacidade de memória muito nítida e nos lembramos das coisas com muita nitidez E nossos cérebros, devido a preconceitos cognitivos, tendem a otimizar e garantir que salvemos informações que são realmente importantes e relevantes para É por isso que é inteligente sobre como faz a alocação de memória Muito simples, muito direto, mas nós, como humanos, reutilizamos muito armazenamento de memória e não podemos É muito importante ajudar o usuário a minimizar o que ele precisa lembrar ou memorizar. Neste exemplo aqui, você pode ver que, se eu entrar em uma ideia, quero pesquisar algo, já me mostrar, por exemplo, as páginas recentes que eu pesquisei. Dessa forma, se eu estiver procurando por algo novamente, ele terá minhas pesquisas mais recentes e diminui minha carga de ter que pensar em Oh, meu Deus, qual foi a última coisa que pesquisei ou qual é o nome do documento que estou procurando? Essa é uma forma de ajudar os usuários a diminuir a carga de memória. Outra forma de diminuir a carga de memória é ver quando os sistemas fornecem ao usuário ajuda extra ou lembretes extras com informações que eles promovem Dessa forma, se você olhar aqui, por exemplo, neste formulário do Google aqui, e neste Google Doc, geralmente, não é um texto de suporte de texto, mas se você entrar nele ou passar o mouse sobre ele, ele mostra uma fita de ferramentas. Essa fita de ferramentas realmente vai ajudar você a lembrar que esse é, na verdade, o tamanho da fonte. E apenas todos os outros ícones, eles têm uma dica de ferramenta ou um pop-up que mostra um texto de suporte que lembrará ao usuário o que realmente significa esse ícone ou esse número. Dessa forma, você reduzirá a carga cognitiva do usuário e o ajudará a se concentrar apenas no que é realmente importante e no que realmente importa para ele. Nos vemos na próxima. 36. Consistência e padrões: Outra coisa muito importante a ter em mente é a consistência e os padrões. É muito importante manter a consistência das coisas que você está fazendo. Vamos ver esse primeiro exemplo aqui. Se você está projetando, você já pode se identificar. Vou te dar alguns 5 segundos para identificar o que é inconsistente aqui. Você está contente? Sim. Tudo bem. Vamos embora. Se você já se identificou, parabéns, mas se não o fez, a primeira coisa que você veria aqui é que esse botão de cancelamento já está incorreto no sentido de tudo tem bordas arredondadas aqui, você pode ver que aqui tem bordas quadradas, mas neste canto, tem bordas arredondadas Há uma clara falta de consistência. Esse botão é arredondado, esse botão é quadrado, esses cantos são totalmente. Talvez se for intencional, talvez esteja tudo bem, mas ainda assim é muito importante manter a consistência e os padrões em cada design que você está fazendo Então, como você pode ver, como mencionei, o raio da borda é praticamente inconsistente em todas essas coisas que você está vendo aqui Mas se você observar isso agora, se mantiver um raio de borda consistente nesse design, ele parecerá mais uniforme e limpo para o usuário É muito importante manter a consistência e um alto padrão ao projetar coisas, para não gerar nenhum tipo de atrito ou ceticismo no usuário . Nos vemos na próxima. 37. Ajuda e documentação: Essa é a heurística final de usabilidade, e acho que muitas delas se combinam, elas são um delas se combinam, elas Mas se você analisar isso, esses são dois tipos de interface que ajudam. Uma delas é a saúde proativa, que visa familiarizar o usuário com a interface Mas é mais comum incorporar fluxos e ajudar o usuário a entender um novo produto ou software no qual ele está se inscrevendo e ajuda reativa reativa, ajuda na fome e na solução de problemas Então, vamos começar com a saúde proativa. Ajuda proativa, por exemplo, em Mo, quando você embarca, você tem muitas opções para ajudá-lo a começar Pode ter sido apenas uma tela em branco e não há nada a fazer, ou eles podem fornecer a opção de começar, como com minmps, CBIframework, fluxograma e muito apenas uma tela em branco e não há nada a fazer, ou eles podem fornecer a opção começar, como com minmps, CBIframework, fluxograma Além disso, eles têm uma interface muito sucinta e limpa aqui. No fluxo de integração, você também pode ver que há dicas de ferramentas que ajudam a orientar o usuário a entender partes da interface de uma forma mais clara e concisa Saúde reativa. A saúde reativa é muito simples. Está relacionado principalmente à documentação e às informações quando os usuários estão presos contextos ou conteúdos específicos, eles podem acessar uma base de conhecimento, pesquisar e encontrar mais informações sobre o tópico ou as tarefas que precisam ser concluídas E isso é tudo para a heurística de usabilidade. Muito obrigado e até o próximo módulo. 38. Flexibilidade e eficiência de uso: Flexibilidade e eficiência de uso. Na maioria das vezes, quando estamos projetando, existem ferramentas que têm muitas tarefas repetitivas a serem realizadas, por exemplo, ferramentas de design ou algo que usa edição de vídeo, ou qualquer tipo de ferramenta que você precise usar para criar outras coisas ou projetar, editar ou modificar que contenha muitas tarefas repetitivas é muito importante se você ajudar o usuário uma facilidade em usar esse tipo de ferramenta. Ao projetar esses produtos, existem maneiras de torná-los mais eficientes, e o maior exemplo que posso mostrar são os atalhos Os atalhos aqui no Figma, por exemplo, são muito, muito eficientes Isso acelera o fluxo de trabalho. Por exemplo, se você usa F no teclado para criar um quadro ou S para criar uma fatia Aqui também estão outros exemplos de atalhos que você pode usar É muito importante não apenas fornecer aos usuários o atalho, mas dar a eles a capacidade de encontrar o atalho com e. Dessa forma, você acelerará o fluxo de trabalho do usuário O Notion é outra ferramenta que usa atalhos de forma muito eficaz Em suma, são realmente visíveis os atalhos, por exemplo, se você usar a barra invertida, há um conjunto de ações e muitos itens que você pode fazer para criar um novo texto, adicionar uma nova página, fazer o cabeçalho da lista e muito, muito mais Dessa forma, você torna muito mais flexível para os designers ou para quem está usando esse produto ou ferramenta executar suas tarefas com facilidade e os designers ou para quem está usando esse produto ou ferramenta executar suas tarefas com facilidade e flexibilidade. Nos vemos na próxima. 39. Design estético e minimalista: Design estético e minimalista. Como já disse, é muito importante, ao projetar para qualquer tipo de produto, manter o design mais minimalista possível Obviamente, existem diferentes tipos de contextos e coisas que provavelmente precisam de um design mais complexo e carregado de informações No entanto, em geral, você deseja fornecer o máximo de design estético e minimalista possível Com isso dito, qualquer informação relevante é um sinal, e qualquer informação irrelevante, é ruído plataformas como o meio Ra Linked in, Facebook, Instagram, mostraremos as informações mais relevantes acordo com seus tópicos, pessoas, grupos e tags que você escolheu ou selecionou. Por exemplo, você quer saber quantos tópicos o Medium, por exemplo, tem. Somente o Medium tem 104 tópicos. Se você não sabe, o mediu medium é apenas uma plataforma na qual as pessoas podem postar artigos e outras coisas E na plataforma tem mais de 104 tópicos. Imagine se você entrasse no meio e não conseguisse selecionar tópicos. Você praticamente receberá muitos tópicos que são bastante irrelevantes para você e, em vez de ajudá-lo a encontrar o que precisa, isso gerará muito ruído Então, é muito importante dar ao usuário a flexibilidade de escolha, reduzir a sobrecarga de informações, permitindo que ele escolha o que é relevante para ele ou não e o que não fazer? Eu sei que é realmente uma base de contexto. Então, digamos, por exemplo, que se você estiver no mundo ocidental, é claro, o design será diferente dos designs da Ásia. No entanto, é um ditado global que diz que você não terá sucesso se tiver algo assim. Você coloca todas essas informações de uma vez. É muito difícil entender quais são as informações relevantes. Quais são as informações que eu tento transmitir? Torna-se tão complexo e tão barulhento que você realmente não consegue ver claramente o que precisa Mesmo que esse seja um exemplo muito claro do que não fazer. Mesmo que eu veja aqui que há algum tipo de estrutura a mais. Existem sites que são muito piores com a sobrecarga de informações, mas isso ainda é muito barulhento Não há hierarquia visual. Não há clareza clara sobre qual é o item principal a ser focado, qual é o item secundário e assim por diante. Portanto, é muito importante que você entenda o seguinte. Se tudo é importante, nada é importante. Balance, por exemplo, é um daqueles designs que eu realmente admiro por causa de sua simplicidade, design estático e minimalista Eles têm uma indicação muito clara de quais são as atividades que você está tentando realizar na tela inicial, onde você apenas vê a marca da empresa do produto À meditação que você está tentando alcançar onde há uma base diária. Mostra se é um favorito, mostra ao jogador a repetição, o retorno ao anterior ou um pouco de avanço. E isso é tudo para um design sótico e minimalista. Nos vemos na próxima. 40. Design estético e minimalista pt 2: Aqui está outro exemplo do que não fazer. O Photoshop é um produto da Adobe. Se você é designer criativo, provavelmente conhece toda a suíte Adobe, e há dois produtos que são muito, muito distintos. Por exemplo, mesmo sendo um usuário pesado do Photoshop, maioria das vezes, você não precisa de todo esse menu de opções para executar suas tarefas Por alguma razão, a equipe do photoshop, apesar de ser uma ferramenta muito, muito antiga, tem muitas atualizações de design Eles ainda mantêm a sobrecarga de informações. Há tantos menus, tantas coisas acontecendo ao mesmo tempo. Acaba ficando muito difícil se concentrar no que você precisa fazer. Por outro lado, eles têm outra ferramenta, chamada AdoBXD, que já foi descontinuada Ah, a propósito, a ferramenta foi descontinuada quando deveria ser uma fusão entre a Adobe e a Figma, e a fusão não teve nada além de um De qualquer forma, a questão é que, como você pode ver aqui, eles têm muito menos opções visíveis para o usuário Você tem a ferramenta de design, o protótipo e as coisas essenciais para que o designer possa trabalhar e projetar a interface do usuário Esses são dois exemplos, como do Photoshop versus um DBCC, que é da mesma empresa No entanto, eles fornecem diferentes tipos de contextos, mas um tem sobrecarga de informações e o outro tem um design mais minimalista e oferece as informações essenciais para que você possa realizar seu Isso é para estética e minimalismo e até a próxima 41. Ajudar os usuários a reconhecer e restaurar erros do froddm: Tudo bem. Este é realmente muito simples Ajude os usuários a reconhecer e se recuperar de erros. sistemas devem alertar os usuários em uma linguagem concisa e simples, indicar claramente o problema e fornecer algumas soluções É muito, muito comum. Você vê isso como um pouco de sistemas mais antigos, onde eles foram completamente implementados e projetados por desenvolvedores, onde às vezes eles erros de sistema e mostram coisas assim que você vê na tela. Há apenas uma indicação, nenhum erro ocorreu, ok. E então esse outro mostra aquele erro crítico e tudo bem. E este é, eu acho que é uma exceção de erro de Java aqui, erro ao executar a ação de evento de script executada . Me diga uma coisa. Existe algum contexto do que realmente está acontecendo, a menos que você seja um desenvolvedor e, às vezes, mesmo como desenvolvedor, você não entenderá claramente o que esse problema neste software está enfrentando, não entenderá o que fazer e como resolver isso. É por isso que, embora se você experimentar os designs, possa mostrar este exemplo, você pode ver que essa é uma maneira de não fazer isso além de ter pelo menos oito caracteres, um número, maiúsculas e minúsculas. Você dá a eles algum tipo de contexto, mas ainda não é suficiente. Neste exemplo, é um pouco mais útil porque, se o usuário não atingir a força de senha necessária, você poderá indicar ao usuário onde o erro está acontecendo. Se houver um erro relacionado à falta de um caractere especial, essa é uma boa maneira de fazer isso. E também há outras etapas que você pode mostrar aos usuários, como tamanho mínimo de caracteres, quantidade de números, letras minúsculas, maiúsculas e caracteres especiais. Dessa forma, você ajuda os usuários a se concentrarem realmente no que precisam fazer e, se não o fizerem, não conseguirão inserir ou fornecer as informações necessárias para concluir uma tarefa e cometem um erro. Você mostra a eles, fornece contexto e os ajuda a corrigi-lo. Isso serve para ajudar os usuários e evitar erros. Nos vemos na próxima. 42. Guia de introdução ao estilo: Portanto, este é um novo módulo chamado guia de estilo. Já está quase no final do curso, mas ainda há coisas que você pode montar com base em tudo o que você aprendeu nos módulos anteriores. Nos módulos anteriores, abordamos coisas que são realmente essenciais para um designer realmente entender. Eu sei que é tentador querer pular o básico e começar as coisas legais imediatamente. Mas você notará que se começar a fazer as coisas dessa maneira, ficará complexo quando você quiser tentar, por exemplo, projetar um sistema de design, construir um sistema de design, criar coisas um pouco mais complexas, porque você conseguiu pular para obter as coisas mais fáceis de serem feitas e, na verdade, conseguiu pular o básico e o caminhos tóricos para interfaces de usuário que você copiou e driblou ou algo parecido É legal, mas você realmente precisa saber o que está fazendo, desde os fundamentos da tipografia de cores, entendê-los de uma forma que, quando precisar explicar por que precisa criar um sistema de design, como a base de um sistema de design funciona, por exemplo, você seja capaz não apenas ter confiança para falar sobre quais são as e o que você pode realmente oferecer, mas na verdade ajudar as organizações para as quais você trabalha a se moverem com rapidez real para considerar coisas como acessibilidade. Considere coisas como a velocidade de entrega. Considere coisas como garantir que você seja capaz de agir rapidamente, porque, no final das contas, as empresas têm apenas uma coisa ganhar dinheiro e reduzir custos. Se você está ajudando a empresa a ganhar dinheiro, como você pode fazer isso com o design da interface do usuário? Como você está fazendo isso com sistemas de design? Praticamente a maneira de ajudar as empresas a ganhar dinheiro com sistemas de design e coisas assim é reduzindo a inconsistência entre os produtos, aumentando a velocidade de entrega ao mercado e sendo capaz de encontrar coisas com facilidade em um só lugar Como designer de interface de usuário, você se envolverá cada vez mais em aprender coisas que são essenciais para torná-lo capaz e confiante o suficiente para criar o que for necessário para acelerar o desenvolvimento e o design do produto. Ok. Portanto, neste módulo, abordaremos o passo a passo de como começar com um guia de estilo de design simples para que você possa começar e supervisionar as coisas Obrigado por assistir a este vídeo e até o próximo. 43. Por que precisar de um guia de estilo: Agora você pode estar se perguntando. O que precisamos no guia de estilo? A resposta é muito simples. O que você precisa no guia de estilo é simplicidade. O que quero dizer com simplicidade? É muito fácil cair na armadilha de tentar criar um guia de estilo super complexo Mas, na verdade, o guia de estilo é nada mais, nada menos do que o mínimo, o superbásico de que você precisa para começar a criar seu design Então, eu começaria com paleta de cores, esquema tipográfico, esquema tipográfico Essa é a base da fundação. Então você teria um material adicional , como botões, iconografia E elementos do formulário. Com todos esses componentes e todos esses elementos dentro do seu guia de estilo, esqueça os componentes que os compõem. Vou explicar um pouco mais sobre isso. Mas com todos esses elementos, é tudo o que você precisa para começar a criar um guia lateral simples. Vamos começar com as cores. No módulo anterior, falamos sobre cores e mais sobre os sinais e os detalhes de como obter os sinais, como saturação e brilho, ou, você entendeu isso como saturação e brilho, ou, Espero que tenha feito isso. Mas neste caso, agora, vamos falar sobre como usar como criar esse esquema de cores de uma forma e como realmente usá-lo. Então, neste exemplo aqui, você pode ver que há a oportunidade de usar essas cores neutras ou os cinzas ou o violão para texto, legendas, campos de entrada Sempre que necessário, você tem aquelas cores que são mais claras em um tom de cinza que podem ser usadas para textos secundários, então você tem um cinza ainda mais claro, que pode ser usado para estados inativos rótulos, divisórias e planos de fundo padrão E então você tem as cores principais da marca, como cores primárias, que podem ser usadas para botões de ação e links. Todas as outras cores, como perigo, aviso, informações. Eles são essenciais. Eles são basicamente o mínimo básico para informar o usuário sobre casos específicos, como aviso quando algo está prestes a dar errado, perigo quando algo já esquentou, sucesso em informar que algo deu certo e informações quando você só precisa informar um usuário sem nenhuma das outras coisas mencionadas anteriormente Há um outro princípio de cores que você deve ter em mente. É o princípio 603010. Quase dizem que você precisa ter uma cor que seja a cor principal. A segunda cor será 30% é uma cor secundária e a cor de destaque, que cobre apenas 10% Se você aplicar isso na interface do usuário, verá que 60 cores nessa interface, 60% dessa cor aqui são 60% dessa cor neutra escura, 10%, que são os acentos ou os botões principais Então, por exemplo, aqui estamos usando o acento aqui, e os 30% são como, por exemplo, essa lista de transações nesta interface de usuário. A mesma coisa pode ser aplicada. Você pode inverter o script e invertê-lo um pouco mais. Você tem aqui 30, então você faz os 60% e até agora e assim por diante. Você provavelmente já viu esse esquema de cores antes, que detalhamos como ir de 500, que são os telefones, então você vai para o mais escuro, que 500-900 e para o mais brilhante 500-100 Mas existem maneiras de hackear isso para torná-lo mais rápido, e vou mostrar como fazemos isso Vamos sujar nossas mãos. 44. Guia de estilo: cores: Para começar a usar os plug-ins, precisamos entrar na comunidade e pesquisar, por exemplo, geradores de cores, gerar Aí está. E então você apenas pesquisa, você tem aqui no lado da navegação a navegação aqui, você tem todos os modelos de arquivo, mas você vai usar plug-ins. Então, isso ajuda você a filtrar melhor. Quando estiver na guia de plug-in, você verá todas as opções disponíveis Há tantas opções legais. Mas o que eu analisaria são dois fatores. Você precisa garantir que a comunidade seja grande o suficiente, pois há muitas pessoas usando ela. E a segunda coisa é que quando foi atualizado pela última vez, às vezes pode levar dois, três anos. Depende de quando o produto ou o plug-in foi implementado. Então esse é um fator importante. Então veja, este aqui não foi atualizado há quatro anos. Então essa foi a última vez que fui atualizado, o que é bastante preocupante, embora ainda tenha um comitê B, mas vamos usar o gerador de cores básicas. Nós o abrimos, escolhemos o arquivo que queremos usar neste caso, eu quero usar os fundamentos do design da interface E então você ouve que você fugiu. Então, basta executá-lo. E aí está. Talvez você já tenha visto um tipo diferente de nomenclatura Você pode ver que esse nome em vez de usar números, está usando, na verdade, uma nomenclatura de texto Podemos fazer isso, mas na verdade não é tão comum. Isso é do sistema de design orbital. Podemos usar outros, como o Alason, que mostram uma formatação diferente , ou podemos usar design ou design de materiais Seja qual for a sua escolha, certifique-se que está tudo bem com os desenvolvedores Eles entendem quais são esses nomes? É mais fácil. Quando você quiser gerar tokens com isso, será fácil de entender. Pessoalmente, gosto de usar o design de materiais porque é um dos mais usados e tem uma equipe muito grande dedicada a trabalhar e garantir que o sistema de design seja o melhor possível. Então, neste caso, vamos abrir aqui. Já temos o design do material. Temos o nome, a cor, então podemos praticamente mudá-la. Neste, você vai colocar primário, e então vamos escolher a cor. Pode ser tão roxo. Você lembra que conversamos nos módulos anteriores sobre cores, RGB, HSB ou HSL Vamos mudá-lo para HSL, que é matiz, saturação O que queremos fazer aqui é mudar a tonalidade da cor da nossa marca Se você já tem a bobina hexocimal, pode usá-la Caso contrário, basta adotá-la e, se você não escolheu a cor, pode simplesmente ajustá-la e adequá-la a qualquer que seja a intenção ou o objetivo do seu negócio. Você também mudará a saturação. Você vai simplesmente puxá-lo até aqui e poderá melhorá-lo , mudar um pouco a tonalidade E digamos que vamos escolher, digamos que vamos usar descolorir aqui, é um pouco de CN É basicamente isso. Você já tem tudo o que precisa para gerar a cor primária. Você pode examinar os tokens, e os tokens têm suas três versões, como hexadecimal, RGB e o token aqui Mas não precisamos nos preocupar com isso. Isso é principalmente para os desenvolvedores. Eles podem copiá-lo e usá-lo, o que na verdade o torna bastante interessante. Quando você clica em criar estilos, ele automaticamente já cria os estilos para você. Portanto, certifique-se de concluir o exercício para os outros itens, como neutros, que são tudo relacionado a textos e texto secundário secundário, legendas e coisas assim Em seguida, você falará sobre a cor do sucesso, as informações, o alerta e o perigo. Assim, você pode gerá-lo usando o plug-in Se quiser voltar e encontrá-lo, basta entrar nos plug-ins e clicar no botão direito e abrir o design do material de base e, em seguida, já alterar a cor. Então, se você quiser enfrentar o sucesso, aqui está. É assim que você pode ajustá-lo, ajustado via HSL. E sim, acho que é basicamente isso. Isso gerará os tokens, a paleta e o estilo Se você tiver alguma dúvida, sinta-se à vontade para comentar e eu responderei em qualquer pergunta que você possa ter. Então, obrigado por isso e até a próxima. 45. Guia de estilo Tipografia: Tudo bem. Agora vamos criar o guia de estilo tipográfico ou a escala de tipos Em palavras simples, você pode examinar o uso e a possibilidade de uso aqui. Você tem a legenda Esses são os tamanhos, parágrafo, etiqueta grande, etiqueta pequena, etiqueta padrão, título, H H seis a H um. Como você lembra no módulo anterior, falamos sobre tipografia O que vamos fazer agora é ver como podemos aplicá-las. É muito importante entender sua escala de tipos para que você possa configurar as coisas de uma forma que possa ser aplicada. Se você ver aqui, não temos estilos aplicados. E aqui temos o estilo aplicado. Então você pode ver que tem uma grande diferença. Ele aplica e muda tudo no aspecto de como as coisas são visualizadas e como é hierarquia das informações exibidas Aqui você pode ver a mesma coisa há duas famílias de fontes diferentes, mas devido à escala e à hierarquia de fontes, você pode ver que há uma diferença clara e provavelmente essa é uma interface de usuário de blog Além disso, uma coisa a ter em mente ao usar a tipografia é garantir que a largura do parágrafo em qualquer tipo de design que você faça seja entre 45 e não mais que 75 caracteres por linha Apenas certifique-se de que pareça dividido e dividido, pois isso ajuda na legibilidade e ajuda os usuários a ler e digitalizar informações com facilidade OK. Então, como você pode ver aqui mais uma vez, há outro problema com falta de estilo, com a falta de diversão Portanto, se você não usar nenhuma cor diferente, mesmo que tente aplicar outra cor. OK. Você tenta aplicar outra cor, você pode ver que sim, isso gera uma hierarquia, mas ainda não está lá Mesmo que você mude algumas cores, isso não vai ajudar muito. Se você aplicar essa escala de tipos usando o estilo , terá uma interface de usuário mais rica Dessa forma, você usa cores, formas e tamanhos de fonte diferentes, que torna a leitura mais harmoniosa e organizada Vamos começar com isso como pesquisar referências na Internet de um site que você realmente admira. Você pode ver aqui que tem uma urze, autora da descrição do título da imagem, e sim Agora, o que vamos fazer é pular isso e colocar as mãos na massa Obviamente, também existem plugues que você pode usar. Vamos tentar ver a conexão para isso. Nós tínhamos gerador de cores. Agora vamos usar o tipo de oração para o russo. Por que isso está em russo. Tipografia. Se você está se perguntando, eu não sou russo, como você obviamente pode ver ou talvez eu possa ser um russo negro. Mas esse não é o caso. Podemos usar esse arquivo Figma com sua base de tipografia existente Podemos usar isso, mas ainda acho que podemos gerar nossos próprios usando um plug-in. Vamos tentar encontrar a tipografia. Vamos entrar aqui para conectar o Typography. Então você tem isso. Você tem um guia estilo de tipografia. Vamos abrir esse. Esse parece bem legal. Eu não usaria este lado porque parece uma razão pela qual tudo foi desenvolvido e projetado em russo, então acho que a maioria de vocês terá dificuldade em entender isso. Vou abri-lo mais uma vez dentro do Figma e dos fundamentos do design da interface do usuário e vamos executá-lo Agora que o estamos executando, tudo o que ele faz é gerar um novo arquivo para você. Esse novo quadro contém todos os elementos que mencionei anteriormente. Vai da legenda ao título um. É assim que você configura seu guia de estilo. Lembre-se de entrar no Figma e você precisa ter certeza de que criou os estilos de texto A maneira mais fácil de fazer isso é, por exemplo, entrar aqui, selecionar a amostra que deseja escolher e a nomenclatura que você vai usar neste caso, vamos criá-la como título. Este é o título um. Tudo o que precisamos fazer é clicar neste ícone aqui no canto superior direito. Então, aqui vamos dar o nome do título um. Você vai dar uma breve descrição, se quiser dizer alguma coisa, mas se não, então continue . Agora, clique e crie. O que isso vai fazer é entrar nesse estilo de lista aqui na esquina e eu vou mostrar todas as opções possíveis que você pode usar. Pois o exercício desta aula é entrar no Figma, pegar aquele plug-in. Depois de ter esse plug-in, execute-o dentro do seu projeto e veja o que ele gera Depois de gerar isso, você precisa criar um tecido para cada uma dessas escalas e escalas de tipos e garantir que funcione Se você tiver alguma dúvida, sinta-se à vontade para perguntar nos comentários , até a próxima, Cho 46. Guia de estilo: ícones parte 1: Tudo bem. Então, agora chegamos até aqui. Vamos falar sobre ícones. Já tínhamos um módulo inteiro abordando ícones, mas agora vou mostrar uma maneira fácil de inserir ícones em seu projeto. Em primeiro lugar, você entrará aqui na comunidade mais uma vez, e nós vamos sim, é claro, vamos usar o plug-in. Essa é uma maneira inteligente e eficaz de fazer isso. Desde que você tenha as habilidades essenciais para saber o que escolher e como escolher com um propósito , uma razão e uma base profunda do motivo pelo qual está fazendo as coisas, não há problema em usar. Não é crime usar plugues. Vamos usar o ícone de pena. O ícone Feder Ficons é um dos mais usados depois dos ícones de materiais A diferença é que ele tem um estilo realmente único. Você pode usá-lo em praticamente diferentes tipos de aplicativos. Claro, existem casos e casos. Mas, como você pode ver, há uma comunidade muito grande de pessoas usando os ícones federais e eles têm uma variação de estilo que é muito boa, e o design e a venda são bons. Se você abrir aqui novamente no arquivo Figma, você vem e executa o plug-in Depois de escrever o plug-in, veja o que vai acontecer. Ele mostrará uma lista de ícones que você pode obter. Então você só tem seu playground aqui. Digamos que você tenha seu playground aqui e queira adicionar todos os seus ícones, use o cabeçalho do exercício anterior. Por exemplo, esse aqui. OK. Coloque-o aqui. Aí está. Você já tem seu playground e pode simplesmente adicionar todas as informações necessárias ou escolher os ícones que você vai usar. Há duas maneiras de fazer isso. Você pode obter muitos ícones que eles têm da comunidade Figma no arquivo Figma Vem algo assim, nomeado, redirecionado, seja o que for, é legal usá-lo Mas se você está trabalhando em um projeto que não é tão grande e ainda não tem o sistema de design, acredito que é mais inteligente fazer o seguinte: usar apenas o plug-in para obter os ícones reais que você está usando, porque uma coisa com a qual muitos desenvolvedores ou designers às vezes cometem um erro é importar essas enormes bibliotecas de desenvolvedores ou designers às vezes cometem um erro com a qual muitos desenvolvedores ou designers às vezes cometem um erro é importar ícones ou bibliotecas CSS que são realmente pesadas e afetam o desempenho do aplicativo que você está criando e acabam resultando em uma experiência ruim para os usuários. Você quer evitar isso. Se você puder evitá-lo, evite-o a todo custo. 47. Guia de estilo: ícones parte 2: E um fator importante para a convenção de nomenclatura é que é essencial fazer isso É como se fosse muito fácil quando um designer simplesmente cria coisas e as deixa sem nenhum nome apropriado E então eles lançam isso e os desenvolvedores o implementam com o nome que escolherem E acabou se tornando uma bagunça. Portanto, você quer ter certeza de que tem um sistema de convenção de nomenclatura o mais simples possível Mas também é útil entregá-lo aos desenvolvedores. Então, o que você vai fazer aqui primeiro é basicamente como verificar se o que é, é um ícone. É um botão. Então você vai verificar qual é o estilo. E também, dependendo do que é, se for algo que tenha diferentes tipos de estados, você adicionará mais um item aqui chamado estado e, em seguida, o nome do que quer que esteja construindo Nesse caso, pode ser tão longo quanto o que é, qual é o estilo? Qual é o estado e qual é o nome? Nesse caso, para o ícone, não vamos usar tudo isso. Vamos simplesmente remover o estado porque, nesse caso, queremos ter certeza de que damos a ele pelo menos uma quantia decente. Então, o que é. É um ícone. Corte. É um ícone de contorno Portanto, é um esboço. Esse é o estilo. O nome do ícone está seguro. Dessa forma, quando você cria outros ícones, diz que está delineado e tudo Ele vai agrupar tudo para você e organizar as coisas. Você pode ir tão fundo quanto algumas pessoas da comunidade, como agrupá-las em camadas mais profundas de pastas para fins organizacionais, como, por exemplo, ter uma categoria como parte dela e depois dizer um pouco mais Mas isso é desnecessário. Eu acredito fortemente que está apenas tornando as coisas desnecessariamente mais complicadas. Você não quer fazer isso. Você quer apenas manter as coisas simples. Qual é o nome? Qual é o estilo? Se tiver um estado, você adiciona um estado e o que vem a seguir. Isso é basicamente tudo para ícones. O exercício que você terá que fazer é apenas criar aquele guia de estilo, o que você realmente precisa, certo? Portanto, certifique-se de ter o básico do que você precisará para o seu guia de estilo de ícones, e nos vemos na próxima Vamos sujar nossas mãos. 48. Guia de estilo: layout de grade: OK. Vamos falar sobre o layout da grade. camada de grade é uma das partes mais importantes do design de interface do usuário, porque quando você deseja ter designs consistentes e garantir que os desenvolvedores possam desenvolver o que você projeta, é necessário garantir que o layout da grade seja consistente Ele se encaixa para desktop, tablet e celular. Então, vamos começar primeiro com o desktop. A área de trabalho tem a coluna 12, o que é bem simples Você tem 12 colunas dentro da moldura. E você também pode tê-lo como oito e quatro colunas, seis e seis colunas, quatro, três vezes quatro e quatro vezes três colunas. Muito simples. E quando você entra no Figma, tudo o que você precisa fazer é, como neste canto direito, começar a criar uma grade Você só precisa fazer o seguinte. Defina uma grade. Você vai alterá-lo para o seguinte. Comece aqui, você terá uma grade. Você clica aqui, muda de grade para colunas. Em vez de cinco, que é a falha, você vai mudar para 12. Você mudará o tipo de alongamento para centro. Como você vê, tem uma largura de coluna muito pequena, você vai alterá-la para 68, é como minha largura preferida da coluna. Então, você praticamente fará com que a sarjeta seja t em vez de 20. Aí está. Você já construiu sua grade de força. Você vai até aqui e clica nesse estilo. Esse é o estilo da grade. Você clica e adiciona. Crie um estilo, e você chamará isso de, digamos, grid grid desktop. E então você coloca 12 e pronto. Você já tem seu layout de grade para o desktop. Você aplicará praticamente o mesmo para o tablet e o celular. Mas uma coisa interessante sobre o celular é que você precisa garantir que o layout da grade seja quatro em vez de oito, porque em algum guia de estilo, você usa oito grades e oito colunas, mas não quer fazer isso. Você quer ter certeza de que é uma coluna de quatro ou duas colunas de quatro. Na verdade, apenas corrigir isso são duas colunas de duas. OK. Se você entrar no Figma, é muito importante observar que a maioria das pessoas não tem os iPhones grandes como nós Portanto, se você puder projetar no menor dispositivo possível, será muito bom pois dessa forma você garantirá que seu design se adapte ao menor dispositivo, mas também será possível escalar para dispositivos maiores. Nesse caso, você começará às 3:20, que é o iPhone SE Em seguida, você entrará na grade de layout no canto aqui. Altere-o nas colunas da grade. Lá dentro, você vai mudar para quatro. Então você tem quatro colunas. O trecho, margem de 20 calhas. Aí está. É assim que você constrói seu layout de grade. No próximo vídeo, vamos finalizar com a organização de nossa grade e guia de estilo. Nos vemos na próxima. OK. 49. Guia de estilo: Buttons parte 1: Tudo bem Agora que já falamos sobre os outros fundamentos da criação de um guia de estilo, vamos entrar nos elementos de construção Os primeiros elementos que abordaremos são os botões. Então você pode entrar aqui Figma e se concentrar no seguinte elemento. A anatomia do botão A anatomia dos botões é basicamente composta pela mesma convenção de nomenclatura mencionada anteriormente, o que é importante para você organizar e estruturar seus elementos em seu guia de estilo Então, na anatomia do botão, eu geralmente o simplifico como tendo o que é Qual é o tipo e qual é o estado? O que é. É um botão. Qual é o tipo? Pode ser um botão de ícone, pode ser um botão somente de texto. Pode ser um contorno ou um botão preenchido. Ele pode ter um estado padrão pairado ou desativado. Ele pode ter outros mais complexos, que geralmente já vêm por padrão pelo HTML. Acho que é mais ou menos isso. Mas vamos entrar nisso. Se você ver aqui, eu já criei alguns componentes que contêm variantes diferentes, e vamos apertar esse botão aqui. Como você pode ver, ele tem seis variações diferentes, e esse botão tem o seguinte tipo, como mencionei, pode ser padrão ou contorno Vou mantê-lo como padrão. O estado pode ser o padrão de passar o mouse ou desativado. O texto do botão pode ser esse. Deixe-me colocá-lo de volta ao padrão. O texto pode ser o que você quiser, criar conta, por exemplo. Ok. E como você pode ver aqui, temos Bolons que podem definir se há texto visível, se há um ícone à direita ou à esquerda Você pode remover isso apenas desligando-o. Você também pode remover o texto, visibilidade, e eu vou te mostrar como fazer isso. Mas isso é basicamente o que você pode fazer com os botões. Então, se você já sabe um pouco mais sobre o figma, ele está se atualizando bastante Então, há muitas coisas que estão mudando. Eles estão adicionando muitos recursos novos que facilitam o design de componentes mais complexos. Eu vou te mostrar como começar. Em primeiro lugar, você criará o seguinte. Vamos começar colocando um tex tex e vamos apertar o botão. Você vai colocar o turno A, que é o layout externo. A próxima coisa que você fará é definir uma cor de fundo colorida, pois será mais fácil visualizar o que realmente está acontecendo Nesse caso, quero adicionar, pois quero criar uma cor de sucesso ou um botão de sucesso. Isso é o que vai parecer. E você pode mudar a fronteira. Nesse caso, não quero delimitar bordas. Eu quero que seja um pouco mais arredondado, então eu tenho assim. Eu posso mudar o preenchimento horizontal e o acolchoamento vertical Você pode modificar os preenchimentos individualmente, mas é mais fácil manter a simplicidade e seguir os padrões horizontal e vertical Nesse caso, adicionarei 16 para o horizontal e 16 para o preenchimento vertical Dessa forma, ele terá uma altura, uma altura natural de 54. Esse é o botão. Você vê com facilidade, inscreva-se ou pode fazer o que quiser aqui e já pode encerrar o dia se quiser. Mas queremos ter certeza de que ele tenha ícones. Você adicionará ícones, digamos, conta. Você adiciona, digamos, usuário, por exemplo, você vai arrastar o usuário aqui, ícone do usuário, e você pode adicionar Não sei, vamos ver Chevron Lembre-se de que, se você já importou o pacote de ícones dentro do seu projeto, será mais fácil fazer isso. Sim. Agora que você já tem tudo configurado aqui, essa é a próxima etapa que você precisa fazer. A convenção de nomenclatura é importante, então você vai clicar no botão Iniciar e alterá-lo Mude todo esse nome aqui. Em seguida, a próxima coisa que você fará é clicar nesse botão e transformá-lo em um componente ou opção de comando k no teclado. Você vai clicar em transformá-lo em um componente e pronto, você já tem a base do botão. A próxima coisa que você fará é adicionar propriedades. Essas propriedades podem ser variantes ou bools. Mas, neste caso, vamos começar com um Bolin Será a primeira coisa que chamaremos de ícone esquerdo E começa com o valor de verdadeiro ou falso. Boles significa verdadeiro ou falso. Praticamente é isso. Em seguida, você cria uma propriedade. Agora você vai criar outra propriedade chamada outra propriedade que também é Bolin, e será o ícone certo Mantenha-o tão valioso quanto verdadeiro. Em seguida, você criará mais uma propriedade, que é o texto Bolin visível E crie isso como verdade. Essas são as propriedades do tipo Bolen Por último, mas não menos importante, você precisa criar uma propriedade chamada texto. E esse será o texto do botão, e o valor é o que virá por padrão dentro desse botão. Você só vai colocar aqui, vamos ver. Não sei o botão de texto. Aí está. Essa já é a base, mas você precisa conectar as coisas. Vamos começar com o ícone à esquerda. Vamos conectá-lo aqui usando a camada. Vamos clicar aqui na camada, aplicar o ícone esquerdo e, em seguida, conectar aquele agressor que criamos inicialmente a esse ícone Em seguida, você fará o mesmo com a camada de ícone certa, com o ícone certo e ela estará conectada. Como você pode ver aqui, ele já está conectado. A próxima coisa que você vai fazer é adicionar uma camada para o texto visível. Você também virá aqui e conectará isso, aplicará essa propriedade de texto ao texto do botão. Agora você tem um componente de botão. Se você já quiser começar a usá-lo, você já está livre para começar. Como você duplicou na instância, ou você procura por ela aqui , por exemplo Você verá principalmente esse botão que acabei de criar e apenas instanciá-lo. E ele já está pronto para uso. Aqui você vê todas as propriedades que ele tem, como o ícone esquerdo Se você desativá-lo, ele não ficará mais visível. Se você fizer o mesmo com o ícone certo, ele também não estará mais visível. E o mesmo se aplica à visibilidade do texto. Se você quiser apenas o botão do ícone, é possível criar a instância desse botão e tornar o texto visível , além de criar outras variações que o tornarão ainda mais fácil. Agora, o que vamos fazer é criar variantes. 50. Guia de estilo: Buttons parte 3: Agora, a próxima etapa será apenas adicionar mais propriedades. Portanto, lembre-se da convenção de nomenclatura aqui de ter estados digitados Já brincamos um pouco com o estado. Agora, queremos apenas adicionar um tipo diferente de botão. Para fazer isso, tudo que você precisa é vir aqui no lado direito do painel. Vou ver propriedades e essas propriedades que você simplesmente adicionará em outra variante como uma propriedade e, em seguida, chamará esse tipo ou estilo. Mas vamos simplificar o tipo. E então chamamos isso, eu não sei. Vamos mantê-lo como nome padrão. E o que vamos fazer agora é adicionar mais uma variante. Essa variante será chamada de contorno porque queremos criar um botão de contorno. Deixe-o de lado aqui. Ok, e então comece a alterar as propriedades do lado da camada e do traçado. Nesse caso, queremos remover o plano de fundo e adicionar um traçado. Altere a cor do traçado. Usando o 500. Você pode aplicar o mesmo para as cores dos textos e ícones 500 aqui para os ícones, faça o mesmo. OK. É bem simples, nada muito complexo, mas a única coisa que você precisa garantir é que o nome desse botão corresponda ao que você está tentando explicar para Portanto, neste caso, você tem esses tipos preenchidos. Então isso está preenchido. E você deve se certificar de que todo o tipo aqui deve ser preenchido, e este também é um botão preenchido. Vai agrupar coisas assim. Este é o botão de contorno no estado padrão. Tudo o que vem depois é basicamente adicionar diferentes variações do mesmo elemento. Isso será colocado com o mouse, altere o bit de propriedade, talvez coloque uma cor de preenchimento Digamos branco. Eu não sei. Digamos verde, 500 ou 600. 700 e depois podemos mudar a cor de tudo o que está dentro, como as cores dos ícones. Aí está. Você já tem o estado rígido desse botão. E o último que você deseja adicionar está desativado. Praticamente deficiente. Você acabou de mudar o nome, certifique-se de alterá-lo aqui. Como você pode ver, essas propriedades, valores e variantes são conflitantes, a alteração deve ser aplicada essa variante seja resolvida O que está dizendo é que o estado, por exemplo, precisa ser diferente. E esse portão está desativado. Aí está. Você teria que resolver o problema. Portanto, mude a cor do preenchimento. Na verdade, você deseja remover a cor de preenchimento. Pegue isso e você mudará a cor do ícone e do texto para algo um pouco mais parecido com isso. Aí está. Ao chegar a essa instância do botão, você pode praticamente alterá-la para o tipo de botão. É um esboço. O que é o estado? Está pairando. Está desativado. OK. Ative o ícone esquerdo ou único ícone e remova a visibilidade. Aí está. Você tem um guia de estilo totalmente funcional de um botão que tem diferentes tipos de variações, diferentes tipos de estados e diferentes tipos de comportamento. Dessa forma, você já pode começar a construir até mesmo o sistema de design com esse princípio. Todo esse princípio que você aprendeu sobre variância e propriedades é o que será aplicado ao seu design Portanto, seu exercício agora é praticar isso e compartilhar seu próprio botão que tem os tipos de botão padrão, botão de contorno, perigo, sucesso e aviso Coloque tudo isso nos comentários e compartilhe na comunidade, para que possamos compartilhar alguns comentários e nos vemos na próxima. Pique. 51. Guia de estilo: TextFields: Agora vamos começar com os campos de texto. Como dissemos anteriormente, queremos lidar com tudo relacionado ao esquema tipográfico da paleta de cores, layouts responsivos, botões, iconografia layouts responsivos, botões, queremos lidar com tudo relacionado ao esquema tipográfico da paleta de cores, layouts responsivos, botões, iconografia e elementos do formulário. Os elementos do formulário são compostos basicamente pelos botões e campos de texto. Nos campos de texto, em geral, em geral, você já pode encontrar alguns padrões. Mas caso você precise criar algo mais adaptado ao produto ou ao projeto em que está trabalhando. É muito importante entender a aparência da anatomia dos campos de texto e como você pode projetá-la para ser criada e adicionada ao seu guia de estilo Primeiro, você precisa ver se a parte da floresta tem um rótulo, o segundo rótulo e o conteúdo subjacente. Então você tem um ícone. É mais ou menos isso. Muito simples. Aqui, geralmente, é o rótulo principal. A etiqueta secundária é substituída pelos suportes e a partir de quando o usuário já insere algo. O sublinhado é para o texto auxiliar. Você quer ter certeza de que o texto auxiliar está lá, caso o campo de texto se torne algo que manipule a senha, por exemplo A mesma coisa se aplica a esse ícone. Geralmente é usado para uma senha, ou você deseja criar um formulário que contenha outros tipos de ícones para ajudar o usuário a identificar melhor os campos do formulário. Esse é o componente aqui que vamos construir. Vamos começar a duplicar isso, limpar isso. Acho que o mesmo princípio do que fizemos com o botão é o que vamos fazer aqui. Deixe-me tirar tudo do caminho. Primeiro de tudo. Vamos começar com um texto, texto de espaço reservado Ok. Você mudará a cor para uma cor mais neutra. Aí está, você tem algo mais neutro. Você vai alterar o tamanho do texto. Lembre-se de usar todo o esquema tipográfico que você criou inicialmente para criar os outros elementos do formulário ou os outros elementos do seu design ou os outros elementos do seu Caso contrário, você terá um problema em criar coisas que não sejam nem um pouco consistentes, e será um desafio consertar isso Nesse caso, vou usar um rótulo, rótulo padrão. Etiqueta padrão, só isso. E vamos adicionar um layout externo. Vamos aplicar o preenchimento vertical e o preenchimento vertical será 16 porque você deseja combinar com o botão A mesma coisa acontecerá, na verdade, neste caso, queremos que seja um pouco diferente porque queremos ter um acolchoamento mais personalizado Nesse caso, serão apenas 16 para cada lado. O que você vai fazer agora é apenas trazer o ícone, você vai trazer o ícone e vai colocá-lo aqui dentro Você já tem a base do campo do formulário aqui, mas não é suficiente. Porque digamos, por exemplo, que você queira esticar isso manualmente. Você não quer que isso aconteça assim, torne-se o centro. O que você vai fazer é simplesmente entrar aqui na propriedade de layout, vez de colocar um número fixo específico para a lacuna, tudo o que você precisa de e dois é colocar dois. Isso significa que ele criará automaticamente uma lacuna intermediária, e tudo o que você precisa fazer é apenas esticá-lo e ele será flexível o suficiente para ser manuseado Dessa forma, você vai defini-la como uma largura fixa. Você vai colocar um abraço. Agora, mais uma parte que vem, você quer dar um golpe. Você pode colocar o traço em todo o campo da fazenda. Nesse caso, vai ficar assim. Você também pode adicionar uma borda. Digamos que vamos colocar oito como borda. Aí está. Você já tem a base do Okay. O que está acontecendo aqui? Vamos mudar de volta para. Aí está. Você vai ter isso como uma solução. Se você colocar isso como um elemento de abraço ou conteúdo de abraço , não será mais . Aí está. Agora, você quer colocar um rótulo. Esse rótulo geralmente é menor, então você só vai dizer rótulo pequeno. Coloque-o aqui. Certifique-se de usar as cores apropriadas que já estão as cores apropriadas que em seu esquema de cores. Nesse caso, quero usar algo mais. Você já pode aplicar o layout out to além disso. Você vai vir aqui. Shift A e o teclado. E lembre-se de ver como tudo se parece. Você vai dizer que isso é uma entrada de campo. O elemento inteiro é chamado de campo de texto. O campo de texto é composto por entradas, rótulos e auxiliares. Tudo é como uma pequena composição de coisas. Também vamos adicionar o texto auxiliar aqui, vamos chamá-lo de texto. É ainda menor, então, dessa forma, podemos usar, na verdade uma legenda E queremos ter certeza de que o espaço, a lacuna entre tudo isso é digamos, oito. E aí está. Você muda a cor disso porque o protetor do inferno é um pouco mais neutro. Acho que o local onde fica a fronteira também pode ser um pouco mais neutro aqui. É um pouco forte demais. Praticamente tendo uma cor padrão. Aí está. Você já tem esse espaço reservado Como você pode notar, há uma pequena diferença entre esse campo de texto e esse campo de texto no sentido da borda que está sendo usada. Está tudo bem. Se você quiser ter certeza de que o traçado é diferente e tem essa aparência, tudo o que você precisa fazer é inserir o traçado manualmente. Então, se você quiser dizer se é um traço inferior, aí está. Você acabou de remover a borda desse campo de texto. Basta colocá-lo em zero e você terá o similar. Como é um fundo branco, na verdade, não há cor de campo, então você só quer adicionar aqui uma cor de fundo neutra. Isso lhe dá um pouco mais de vida. Pronto, você já tem a base do seu campo de texto. Vamos renomeá-lo como campo de texto. Você acabou de transformá-lo em componente. Aí está. V. Isso é tudo o que você precisa para criar um campo de texto simples. Você pode adicionar variância e a variação pode ser responsável basicamente apenas pelo Digamos que você queira saber qual é o estado de erro desse campo de texto? É o usuário que insere as informações que estão incorretas. Essa é uma forma de criar uma variante. Você pode adicionar mais uma variante aqui, alterar a cor e ver como ela ficará quando algo estiver errado. Aqui, mude a cor para vermelho, coloque um vermelho 700 se quiser O rótulo também pode ser vermelho 600. Você também pode adicionar um tom mais escuro de vermelho aqui. Então, em vez de 600, você pode adicionar 800 ou 900 para que o usuário veja que algo está realmente errado aqui. E acho que é mais ou menos isso. Se você tiver alguma dúvida, fique à vontade para criar, sinta-se à vontade para deixar algumas perguntas nos comentários abaixo e eu vejo na próxima. Ok. 52. Guia de estilo: sombras: Nos módulos anteriores, falamos sobre sombras, de onde entendemos a anatomia de uma sombra, como usá-la, como não usá-la, como não usá-la e diferentes maneiras de aplicá-la em nossos designs Mas agora o que vamos fazer é praticamente aplicá-lo em nosso guia de estilo. Para simplificar, é muito fácil começar a tentar incluir muitas sombras dentro de seus sistemas em seu guia de estilo, mas isso não é realmente necessário Você pode praticamente criar uma sombra no guia de estilo com três níveis de sombras Então, praticamente podemos usar os quatro, oito e 16. Basicamente, se você olhar aqui, verá que o nível da sombra é O nível da sombra da sombra quatro. Eu vou desconectá-lo. A maneira como você o cria praticamente está chegando aqui nos efeitos. Você vem, digamos que queremos criar um cartão. Você vai dar a ele uma borda de 24, e você quer torná-lo branco e fazer com que ele se destaque Se você deixar assim, pode ser compreensível, mas se for algo clicável, você quer dar ao usuário a sensação de que algo é você quer dar ao usuário a sensação de que algo O que você vai fazer aqui agora é vir aqui para clicar nos efeitos e soltar uma sombra. O que você vai começar a fazer é ajustar a posição das sombras Você vai se sentar aqui às quatro. Defina o desfoque de quatro e diminua a opacidade para, digamos Aqui, já temos uma sombra base para nossos designs. Este foi projetado de forma que tenha zero no eixo x e, na verdade, está bem. Você tem zero no eixo x, o eixo y tem quatro e o desfoque de 24 Você pode aumentá-lo e brincar com ele o quanto precisar. Depois de brincar com o desfoque, ele fornecerá um pouco mais de distribuição da dispersão e você tornará a sombra ainda mais suave Da mesma forma que você vai aplicá-lo para a sombra oito. Eu vou ver você na sombra por oito. Nesse caso, você não interferirá no eixo x, na verdade interferirá eixo y e definirá o eixo y como oito. Então, você também manterá o desfoque da sombra por 24. Você quer deixar a opacidade como oitava porque quanto maior o desfoque e maior o eixo y, ele pode gerar uma sombra muito forte e feia, e isso é ele pode gerar uma sombra muito forte e feia, e algo que Finalmente, temos a sombra 16. Você quer, mais uma vez, eixo y de 16, desfoque de 24 e opacidade de Dessa forma, quando você começar a projetar, vamos voltar neste caso aqui, por exemplo. Depois de começar a desenhar e quiser dar sensação de profundidade aos seus designs, você aplicará o efeito de sombra aqui e selecionará a sombra que deseja usar. Neste caso, eu posso usar a base ou posso usar a sombra para. Preciso voltar aqui e salvá-lo. Você não se esqueça de salvar sua sombra, digamos, venha aqui. Neste pequeno ícone de estilo aqui, você clica nele. Clique em criar estilo e você o chamará de sombra. Quatro para a frente. Em seguida, venha aqui até o estilo de efeitos de efeitos. Venha novamente. Você vai entrar em vigor. Clique no botão de adição e, em seguida, aqui você tem sombra para frente, barra oito e fará o mesmo com 16 Quando você vier aqui para usá-lo e aplicá-lo em seu design, ficará um pouco mais fácil de usar porque, dessa forma, você manterá um nível de sombra consistente. Aqui você tem a sombra quatro, você aplica aqui. Combina ou é o que você precisa em termos de design sem sombras? Se a resposta for sim, vá em frente. Caso contrário, você pode optar por algo um pouco mais forte. Então, neste caso, você pode usar a sombra oito Ok. E na sombra oito, dê-lhe uma espécie de elevação , como você pode ver. Se eu decidir fazer um pequeno protótipo e quiser criar um efeito de foco, posso usar uma sombra quatro como geradores de ventilação. Vamos ver aqui. Vou colocar um componente rápido aqui e, em seguida, vou criar uma variante e, com essa variante aqui, vou remover esse componente fora dessa caixa fora desse quadro e reutilizá-lo aqui como padrão E digamos que eu queira criar um efeito de foco. É assim que vai ficar e se a sombra pode afetar o comportamento disso. Nós vamos vir aqui em protótipo. Clique em Protótipo. Com um clique, o protótipo muda da variante um para a variante dois, e vamos mudar a variante para a sombra Volte ao design, role para baixo, na sombra oito e vamos colocá-la na sombra quatro. Como queremos dar ao usuário a sensação de que esse pequeno contêiner está caindo, uma vez que o mouse entra, uma vez que o mouse sai, ele dá o efeito de flutuar novamente. Então, vamos ver como vai ser. Na verdade, como é um protótipo , queremos ter certeza de que não está ao clicar, mas ao passar o mouse Ao passar o mouse neste lado, o mesmo acontece ao contrário, não ao clicar, mas Dessa forma, você gerará o efeito de passar o mouse. Vamos brincar um pouco por aqui e, quando você passar o mouse, você o verá pairando e mudando Vamos fazer isso de novo. Uma coisa que também pode ajudar é mudar a cor, queremos torná-la mais escura, então vamos mudar o. Dessa forma sabemos que algo está realmente acontecendo Isso é muito instantâneo. Também podemos ajustar o protótipo. Vamos fazer isso. Porque, como é instantâneo, acho que a animação inteligente torna tudo mais suave Da mesma forma para o caminho de volta, o mouse para fora. OK. E isso está pairando. OK. Aí está. Vamos pressionar mais uma vez, executar mais uma vez porque parece. E sim, durante o design , não será um cenário perfeito que tudo funcione imediatamente. Mas à medida que você vai aqui, você pode ver o passar o mouse dentro do mouse OK. Às vezes, o ICMA tem algumas pequenas falhas Mas você entendeu a ideia. Talvez tenha a sensação de que nem estou pairando Você pode ver que está piscando sozinho. De qualquer forma, todo esse conceito de usar sombras é dar profundidade ao design Nos próximos vídeos, na verdade, teremos o design de um site e um aplicativo móvel e usaremos todos esses princípios para o guia de estilo. Mas antes de fazermos isso, vamos juntar tudo e seguir em frente e começar a projetar nas mãos de uma forma muito prática. Vamos embora. 53. Guia de estilo: encerrando: Vamos finalizar o guia de estilo. Temos falado muito sobre cores, tipografia e tudo o que você precisa para criar um guia de estilo Mas uma coisa que é uma parte realmente importante do processo de design é a apresentação, quão bem você apresentará seu guia de estilo de design para o mundo. É muito importante que você o tenha organizado e bem documentado de forma que qualquer pessoa possa embarcar e visualizar seu guia de estilo Nesse caso, escolhi ter esse cabeçalho aqui. Neste cabeçalho, você pode ver que eu tenho um título, um pequeno design aqui no canto e, em seguida, você tem todas as outras cores que vou usar no meu guia de estilo. Isso aqui é do design do material. Ele tem, como você pode ver, o RGB hexadecimal e também tem um pouco do contraste de cores, o verificador de contraste de cores Uma coisa a acrescentar é a acessibilidade. Certifique-se de que as cores sejam acessíveis para pessoas deficiência visual ou outras. Sim, aqui você tem as cores do outro lado, você tem a tipografia bem Basta montá-los e certificar-se de que você também pode agrupá-los ou tê-los como nome do ícone ou categoria de barra do ícone e, em seguida, o nome do ícone Essa é uma maneira de fazer isso. Então, por outro lado, você tem as sombras. Portanto, é bom ter as sombras, mesmo que não seja algo que você verá com frequência aqui, mas você só queira definir alguns valores para os três tipos de sombras que você tem Ok. E então, obviamente, você pode fazer o mesmo com os layouts da grade Por fim, os pequenos elementos que você tem aqui como guia de estilo, como os botões e suas variações e sua variação, você terá tudo o que precisa aqui É mais fácil visualizar nesse caso do campo de texto Você também o tornará mais visual com alguns rótulos que mostram cada parte da anatomia desse campo de texto É assim que eu o apresentaria pessoalmente caso você precise escrever o estudo de caso no futuro Você tem tudo o que precisa para montar as coisas e apresentá-lo imediatamente. Estudos de caso podem levar muito tempo para serem escritos. Quando você está projetando, é bom ter o hábito de juntar as coisas e torná-las visualmente atraentes para que você possa apresentá-las em um estudo de caso mais adiante Isso é para guias de estilo. No próximo módulo, vamos começar a criar um site e um aplicativo móvel com fluxos simples e usar tudo o que aprendemos até agora. Muito obrigado por assistir isso e até o próximo. 54. Mãos na UI: introdução: Tudo bem, certo? Se você chegou até aqui, isso significa que você leva muito a sério o design de interface do usuário, leva muito a sério o aprimoramento de suas habilidades para levar seus designs ao próximo nível Neste módulo, abordaremos tudo o que você precisa para colocar em prática o que você aprendeu até agora. Esse módulo com menos design é nada mais, nada menos do que garantir que você suje as mãos e vamos direto ao assunto agora mesmo. Primeira coisa, o que vamos projetar? Quais são as ferramentas que vamos usar? Qual é o escopo, onde vamos obter alguma inspiração e, na verdade , começar. Primeira coisa, o que? O que vamos projetar? Como já estamos em um estágio em que há muitos desenvolvimentos relacionados à IA, inteligência artificial e ferramentas em nosso dia a dia. Achei que seria legal fazer um experimento, como podemos redesenhar, melhorar ou criar nosso próprio pequeno aplicativo, que fará bots de bate-papo, comunicações por bate-papo Bot de bate-papo com IA que pode, na verdade, fazer algo semelhante ao CPT , mas com uma pequena diferença. Não só a interface será um pouco ajustada, mas vamos nos concentrar em pequenas coisas que podemos fazer para tornar a vida do usuário um pouco mais fácil. Ok. Então, quando se trata de ferramentas, existem muitas ferramentas que você pode usar, mas eu prefiro manter as coisas simples. Então, dessa forma, é muito suave. Ferramentas para começar, vamos começar com o Figma, que é tudo o que usamos até agora Mas f jump, que também é um dos Figmas, praticamente um furo branco que precisaremos usar para fazer alguns wireframes e outras Portanto, tenha isso em mente, fj para wireframing e brainstorming para criação de ideias, cocriação, fluxos cocriação É praticamente um quadro branco. FIGMA é onde, na verdade, vamos pegar tudo o que fazemos no FIC jam e colocá-lo dentro das interfaces de usuário Ok. A próxima ferramenta que vamos usar também, obviamente, é o CTPT É muito importante ter em mente que queremos tornar nosso fluxo de trabalho mais rápido, e os designers que serão à prova de IA são os designers capazes de usar ferramentas de IA para melhorar o fluxo de trabalho, a velocidade de entrega e tudo relacionado a obter o melhor resultado possível para os negócios e para as empresas para as quais capazes de usar ferramentas de IA para melhorar o fluxo de trabalho, a velocidade de entrega e tudo relacionado a o melhor resultado possível para os negócios trabalham. C é uma ferramenta de escolha. Nós vamos usá-lo. Talvez você possa brincar um pouco com o Bart. Acho que o Bart também é uma alternativa muito boa se você não quiser ter a versão paga do CTPT Ok. entender o escopo e juntar as coisas, queremos ter certeza de que estamos usando aplicativos como click up ou motion. Eles são muito parecidos com ferramentas realmente incríveis para gerenciamento de tarefas, e queremos poder acompanhar o progresso de cada tarefa em que estamos trabalhando. Não vamos simplesmente colocar algumas interfaces de usuário e simplesmente fazer isso, mas queremos que você também aprenda como realmente documentar dentro do gerenciamento de tarefas. Além disso, se você for freelancer ou trabalhar em uma organização, poderá acompanhar o progresso e também compartilhar o progresso com suas partes interessadas Ferramentas como Notion e click up são perfeitas para isso. E, por fim, mas não menos importante, vamos usar esses três plugues principais. O primeiro está no Splash, onde vamos usar para imagens e coisas assim Outro plugin que foi muito legal é o perfil do usuário e, finalmente, o Figma to Framer No próximo vídeo, falaremos sobre como começar e vamos começar. Nos vemos na próxima. 55. Mãos na UI: como entender o escopo: Aqui estamos entendendo o design. Antes de começar a pressionar pixels e se tornar um pixel ja, é muito importante contextualizar e entender qual é o problema que você está tentando resolver Qual é o escopo do projeto? O que realmente vamos projetar? Depois de esclarecer isso, ficará mais fácil buscar inspiração para definir o cronograma e estimativa de quanto tempo isso levará para criar e coisas assim O escopo é a parte essencial. Às vezes, surge problema existente de que o produto em que você está trabalhando existe ou é um novo produto que você deseja projetar e não está muito claro, mas fornece um pouco de largura de banda e um caminho para começar a criar No nosso caso, faremos o design desse chat pot de IA. Portanto, precisamos cobrir a tela inicial, a interface de bate-papo e os perfis de usuário. Configurações e coisas assim. Acho que uma maneira legal de fazer isso é basicamente entrar, digamos que , clicando em cima, vou abrir uma nova janela. Aí está. Para quem está curioso, o navegador que estou usando é o arc, o que é bem legal. Isso me ajuda a organizar minhas pastas. Eu só vou fechar isso um pouco. Como eu disse, queremos garantir que nosso escopo seja claro. A primeira coisa que faremos é quando configurarmos o clique. Como eu disse, você pode usar a noção ou qualquer outra ferramenta. Se você estiver fazendo isso dentro do click up , recomendo fazer assim. Primeiro, você vai começar criando um espaço. Eu só vou bloquear isso um pouco. Mas primeiro, você vai criar um espaço. Vamos chamar isso de Júpiter AI, e esse será o nome do nosso espaço, e vamos usar um robô aqui como robô avatar, então está tudo bem Em seguida, basta criar esse próximo espaço de trabalho pessoal. Essa é a estrutura. Quero adicionar progresso. Então você pode adicionar progresso aqui, progresso. Em andamento e outro concluído. Eu acho que isso é basicamente o que você precisa. Você também pode personalizar a cor aqui , alterá-la um pouco. Bombeie amarelo, então fica verde. Você vai completar aqui. Você terá prioridade, tags, multipins, campos personalizados, controle de tempo Isso é muito bom. Acho que isso vai nos ajudar. Em seguida, você deseja ter a visualização do quadro e a visualização da lista. Acho que é muito bom assim, mas você também pode adicionar a visualização do calendário. Uma coisa legal sobre o click up é que ele é gratuito. E você pode obter seus diferentes tipos de visualizações. Se você quiser fazer coisas mais avançadas, obviamente, elas serão pagas. Mas, para o básico, tudo o que você precisar, como ter a visualização em lista, visualização quadro e visualização em calendário Quando você já tiver os campos de que precisa, vou apenas revisar o espaço. Você vê que tudo está aqui e cria espaço. Dessa forma, você terá todo o seu novo espaço e poderá ver diferentes tipos de visão. Visualização do calendário aqui em cima, vista do quadro. Acho que vamos começar com a visualização em quadro. Você se lembra das tarefas que tínhamos antes. Dentro do Figma, tínhamos esses tipos de elementos como parte do escopo O que vamos fazer aqui agora é o seguinte. Vá em vez do design, obtenha a cópia da tela inicial. Venha aqui, nova tarefa, tela inicial. Uma coisa que o ajuda a se manter um pouco mais organizado é adicionar subtarefas Mas subtarefa, isso o torna um pouco mais organizado e não tão confuso O que você vai adicionar como subtarefa são coisas como área de boas-vindas ou todos esses outros elementos aqui Vamos ver se vai entrar em uma única vez. Faça isso, adicione isso aqui. Sim. Você pode, se copiar a lista inteira, criar outros cinco subdk Você adiciona aqui e aí está. Vo, como mágica, você já tem um conjunto de subtarefas disso Você pode fazer coisas diferentes aqui, como monitorar o tempo, para poder acompanhar o tempo. Você pode adicionar uma pequena descrição do que é essa tarefa. Você pode ter alguns detalhes sobre campos personalizados e coisas assim, mas isso não é algo que você queira fazer e também é importante definir uma data. No nosso caso, quero definir a data de vencimento para 13. A tela inicial estará pronta nesta data e pronto, você já tem sua tarefa criada. Isso faz parte do seu escopo. E você fará a mesma coisa os próximos itens, como a interface de bate-papo. Venha aqui novamente, adicione bate-papo. E também podemos adicionar outros itens, como esses outros itens. Você vem aqui, submete tudo. Isso é bom. Esse é o nosso escopo. É disso que precisaremos para projetar nossa interface de usuário. Obviamente, podemos nos aprofundar mais. Mas, por enquanto, podemos fazer isso. Acho que outras coisas relacionadas a nós podem criar tags, e essa é a interface do usuário, a interface do usuário. Podemos adicionar outra tag relacionada à UX. Mas como esse curso é focado no lado da experiência do usuário, ainda podemos abordar um pouco disso. Então, vamos vir aqui e fazer a jornada do usuário ou o fluxo do usuário. Fluxo de usuários, e podemos ter, digamos, arquitetura da informação. Acho que basta apenas um fluxo de usuário, e então também podemos procurar inspiração de referência. Sim, acho que é mais ou menos isso. Por enquanto, já temos um escopo de tudo o que vamos fazer e, no próximo vídeo, abordaremos como pesquisar referências e as ferramentas que precisamos usar . Nos vemos na próxima. 56. Mãos na UI: HTML para o Figma: Tudo bem Então, você lembra que, no vídeo anterior, falei sobre o uso de algumas extensões ou plug-ins que podem ajudá-lo a passar do HTML para o Figma Isso é possível. No entanto, acho que você já usou todos os meus créditos gratuitos e pagou para fazer isso. Então, se você quiser usar, por exemplo, Figma para HTML, que é esse plugin aqui, você pode usá-lo Você receberá dez créditos grátis. Mas no meu caso, já usei. Então, eu quero dizer HTML para Figma. Você pesquisa isso no Google? Ok. E você pode conseguir isso, converter qualquer site em editável Então você já tem o plugin instalado. Você vem aqui. E você abre dois e depois escolhe qual arquivo Figma deseja abrir no site O que você vai fazer agora, vai carregar. Então, o site está carregado O Figma está carregado. O que você vai fazer agora é correr. Vamos falar sobre isso. Você quer entrar nesta seção. Não tenho créditos gratuitos, mas, em geral, depois de instalar os créditos, isso permitirá automaticamente que você faça, digamos, por exemplo, a importação via URL. Você vai importar a Apple que é o site do qual eu quero obter referência, aí está, ela está começando a importar. Está vindo com tudo e tudo bem. Agradável. Aqui você já tem um totalmente editável Eu nem sei se consegui fazer isso, obtendo a versão gratuita, mas aqui está, você tem todos os elementos editáveis do site da Apple Você pode entrar aqui e editá-lo. Você vai colocar o iPhone 17 P. Max. Isso é loucura. Acho que essa é uma das ferramentas mais úteis, porque se você encontrar alguma inspiração para a página de destino de que realmente goste, basta usá-la e fazer com que seus designs um pouco mais rápidos, mas fique atento Você não quer copiar, usar a mesma cópia de UX ou design de conteúdo de outros sites ou ativos de usuários. Você pode ter problemas com isso. Se você quiser obter o Figma editável, você pode obtê-lo. Não há nada de errado com isso. Apenas certifique-se de que você não tenha problemas de direitos autorais. Use seus próprios ativos. Use-o por sua conta e risco, e sim, é isso. Mas ainda é uma ferramenta muito boa. Como você pode ver aqui, ele corta tudo, todos os elementos. Você pode ir aqui e brincar. Isso é muito bom para ser honesto. Eu acho que você definitivamente deveria testar isso. É o plug-in, se você entrar no Figma ou no Google, basta usar o Google, HTML para criar, e você já tem algum site totalmente editável na versão Figma Então, se você gosta desse, é isso para esta seção de inspiração. Vamos passar para a próxima. 57. Mãos na UI: quadro de esposa de autenticação: Agora que já temos nosso wireframe inicial, esse é o primeiro passo que precisamos para projetar nossa interface Então, quando o usuário abre o aplicativo, usuário insere o texto, mas o que acontece quando o usuário não está logado, como isso vai acontecer? Acho importante que, pelo menos, esboçemos um pouco de como seria essa interface. Tudo bem Podemos usar as formas existentes. Isso torna ainda melhor o design dos wireframes. Podemos usar essa forma aqui, puxá-la um pouco para baixo. A questão é: o que acontece quando o usuário abre o aplicativo. Em geral, podemos realmente dar ao usuário a possibilidade de inserir algo. Mas, para dar mais privacidade às informações que estão sendo fornecidas, precisamos autenticar o usuário ou, em linguagem simples, precisamos fornecer ao usuário algum tipo de autenticação ou login Vamos criar uma tela de login aqui, vamos ter essa intrasecção aqui para mudar a cor para Você quer ter dois outros botões. Você tem um lindo botãozinho vindo aqui e isso dirá “inscreva-se, inscreva-se”. Ou faça login ou faça login. O que acontece a seguir? Se o usuário quiser criar uma conta, você pode clicar em cadastrar-se, e isso o levará para essa outra tela. Nós apenas duplicamos aqui, venha aqui. É muito importante considerar essas etapas porque, para projetar a interface, você precisa saber o que precisa projetar. Nesse caso, vamos fazer isso. Se o usuário clicar em se inscrever, navegue aqui mesmo Vamos colocar isso aqui. O usuário virá aqui. Eu coloquei o campo de entrada. Vou criar um campo de entrada. Vamos ver se há alguma coisa pré-fabricada. Não, não há nada aqui. Nós vamos fazer isso sozinhos. Essa forma básica. Aqui vamos nós. Você pode criar o campo de texto. Ok. Então você vai colocar aqui a senha do e-mail. E então você pode ter uma pequena caixa de seleção aqui. Concordou com os termos e condições. Isso já dá uma pequena visão de como o aplicativo vai se comportar. Essa é a tela de criação de conta e, em seguida, o que será exibido na tela de login. Então, vamos criar outro. Nesse caso, vamos colocar o botão que o realinha para se inscrever e fazer login Basta alterar isso, fazer login e pronto. Nós apenas removemos isso porque não precisamos dele. Só precisamos do e-mail e da senha. Mais uma coisinha que seria legal se o usuário esquecesse uma senha depois esquecesse O esquecimento da senha é outro componente importante desse design. Aqui está, você já tem a tela de autenticação. Outra coisa que pode acontecer é se, por exemplo, você quiser se inscrever, fazer com que o usuário possa se inscrever com e-mail e senha ou se inscrever no Google. Podemos adicionar um pouco de espaçamento aqui. Crie um botão menor e adicione ou permita que o usuário se inscreva no Google. Aí está. E acho que podemos fazer o mesmo para fazer login com o Google. Se nosso processo de autenticação nos permitir a autenticação, ou seja, como acessamos o aplicativo e damos identidade, também podemos fazer login com o Google. Essas coisas estão diretamente correlacionadas. Tudo o que você pode criar, você precisa associá-lo. Nesse caso, as telas de login e inscrição ou login estão prontas. Também podemos criar a senha esquecida e outras coisas, mas não vamos entrar em muitos detalhes Só queremos ter certeza de que, quando o usuário abre o aplicativo, o que acontece a seguir. Quando o usuário abre o aplicativo, a primeira coisa que ele verá se não estiver logado tela de inscrição, a criação da conta em nosso login Se, por algum motivo, esse usuário estiver desconectado, ele poderá entrar, ver a senha do e-mail e seguir em frente Depois que esse processo for concluído, podemos mostrar o aplicativo ao usuário, o que cobrirá toda essa base. No próximo vídeo, vamos realmente projetar . Começaremos projetando o fluxo de inscrição e, em seguida, a tela inicial. Nos vemos na próxima. 58. Mãos na UI: como criar o moodboard: Tudo bem. Vamos criar e criar um quadro de humor. A maneira como eu faço isso geralmente é entrando no Figma e clicando aqui na barra lateral das páginas e adicionando aqui Geralmente gosto de usar ícones, só para me ajudar a torná-lo mais atraente Clique aqui, coloque um pouco, e eles colocarão um quadro de humor. Aí está. Esse é o primeiro passo. A segunda etapa é separar por seções ou categorias Nesse caso, vou usar meu quadro de humor preexistente e começar a organizá-lo por categorias. Por exemplo, aqui, vou dizer aplicativo móvel. Essa é a categoria um. Vou aumentá-lo para 300. E esta é a categoria um, a categoria dois serão sites. Então, vou colocar sites. Você também pode criar aplicativos da web. Temos aplicativos. E, no momento, acho que é isso por enquanto. Então, da maneira que você deseja criar e organizar isso, posso criar uma fatia, por exemplo, dividi-la e torná-la um pouco mais atraente visualmente, você possa simplesmente entrar aqui e arrastar tudo relacionado aos Vamos garantir que a fatia não seja só a fatia. Coloque suas coisas dentro dela. Aqui está, e então esta é sua categoria relacionada a aplicativos móveis. Isso é móvel Este é um aplicativo da web, então vou colocá-lo na categoria de aplicativos da web. Todo o resto, como você pode ver, está relacionado a aplicativos móveis. Recebi referências do Chat GPT, recebi algumas capturas de tela do aplicativo móvel Cat GPT. Eu vou colocá-lo aqui. Você tem outras telas. Apenas mantenha isso lá, junte isso e pronto. Você tem um pouco de organização em seu quadro de humor. O que você fará a seguir é usar as referências que mencionei antes, como assédio moral e drible Como você pode conferir aqui, vamos ver, queremos encontrar aplicativos relacionados à inteligência artificial. Vamos dar uma olhada no copiloto. Podemos conferir o fluxo de integração. Na verdade, podemos obter essa tela aqui, acho que de graça, se não me engano, quero baixá-la como PNG Você vai baixar esse PNG aqui. Independentemente do navegador que você estiver usando, você o arrastará para dentro do arquivo Figma Aqui está e você simplesmente deixa cair. Aí está. Você já tem uma pequena referência para o lado do bate-papo. Então você pode criar subcategorias e você vai ligar para esse chat E você pode organizá-lo em qualquer lugar e garantir que esteja o mais claro possível. Então, quando você precisar voltar para obter referências, você tem tudo na ponta dos dedos Tudo o que está relacionado ao chat, vamos reposicioná-lo aqui Você selecionará essas telas e as colocará dentro desta seção aqui. Você pode aumentar o tamanho pressionando k no teclado. Aumente um pouco o tamanho. Aí está. Você já tem tudo pronto para você. Isso é tudo o que está relacionado ao chat. Também podemos criar uma seção para demonstração de como você demonstrará o aplicativo. Isso também é um aplicativo da web, então você vai colocá-lo dentro do lado dos aplicativos da web. Venha aqui, você tem mais demonstrações. Acho que essa será basicamente uma versão de demonstração, como você deseja demonstrar seu aplicativo. Isso também está sendo demonstrado, ou você pode deixá-lo aqui. Basta colocá-lo aqui de lado e redimensioná-lo. OK. Aí está. Você tem um bate-papo, uma demonstração e, em seguida, pode, digamos, fazer uma integração Se você quiser obter tudo relacionado à integração, você também pode vir aqui e fazer isso Organize o volume, e isso também, e você terá seu quadro de humor ganhando um pouco de forma e organização Agora, você voltará para o navegador e tentará pesquisar mais referências. Navegue entre as telas. Se você estiver usando o MacBook, é muito possível navegar entre as telas da mesma navegar entre as telas forma que rolar, para que seja mais fácil e rápido Vamos obter mais informações sobre a integração. Vamos clicar aqui no fluxo de integração. Você tem essas cinco etapas para a integração. Você tem o logotipo. Provavelmente tem uma animação. E você deseja capturar, por exemplo, qualquer coisa relacionada à obtenção do consentimento do usuário. Você vai usar isso como referência. Você vai começar a tela, você vai entender isso. E assim por diante e assim por diante. Agora já temos a bordo. Vamos ver como será a aparência da tela inicial. Acho que vamos começar a funcionar na tela inicial, para que possamos copiar, baixar isso e baixar esse PNG aqui. Aí está. Vamos buscar mais inspiração. Queremos verificar, por exemplo, clicar aqui e pronto, você tem mais alternativas para obter referências. Aqui clicamos. Este é um bate-papo contínuo. Você pode baixar o PNG. OK. OK. Mais, baixe isso. Bem, essa é interessante. Você também pode baixá-lo. A razão pela qual você quer fazer isso é colocar o máximo de referência em seu quadro de humor, para que você não precise fazer isso repetidamente. Obviamente, ao projetar e escalar seus designs, você precisará de mais referências Mas, para começar, você quer ter o máximo de organização possível em seu arquivo Figma Você vai mostrar isso na pasta, essas são todas as telas que você obteve do Min. Você seleciona todos eles e os arrasta para dentro do seu arquivo figma Aí está. Relacionado ao bate-papo. Tudo vai aqui. Queremos organizar isso também. Acho que isso é suficiente do mobbin. Podemos obter mais interfaces de outras fontes , como dribble Vamos verificar o dribble com. Gosto muito da maneira eles têm o layout deste aplicativo. Você virá aqui copiar a imagem e colá-la dentro do seu Okay. 1 segundo. Você cola dentro do seu quadro de humor. Isso é, eu consideraria apenas uma demonstração, assim como, para referência, referência visual. Vamos organizar isso aqui. Mais uma referência, acho que você pode obter de, digamos, IA de pesquisa. OK. Então, estou tentando não tornar essa aula tão extensa. Eles não vão demorar mais do que 15 minutos, mas ainda querem que seja o mais conciso possível Isso é para a página de destino. Eu realmente gostaria dessa interface de usuário que ele fez aqui. Também podemos copiar isso e adicioná-lo dentro da seção de páginas de destino. Este será o site e as páginas de destino. Opa, vamos voltar, chegue aqui. Aqui vamos nós. Você acabou de acompanhar isso na seção. Crie uma fatia, que é S no teclado, e você pode adicionar uma fatia aqui para a seção do seu site Lembre-se de bloquear sua fatia de lado para que você possa manter uma organização um pouco maior e ela não se mova tanto Aí está. Vamos desbloquear a fatia porque quero ajustá-la um pouco Ajuste aqui, bom V. Você já tem mais referências aqui. Você também pode obter referências usando seu aplicativo móvel, navegar neste site, fazer uma captura e adicioná-la ao seu arquivo Figma Eu vou fazer o mesmo com a centesia. Você pode obter a captura de tela inteira aqui ou dividi-la em partes. Vamos ver, eu uso esse plug-in chamado Eu uso a captura de plug-in do navegador, para que possamos capturar toda a extensão deste site. Vamos. Você pode capturar seções específicas e salvá-las na biblioteca. Você pode organizar, eu posso criar digamos, arquivos e, em seguida, capturas Você também pode começar a salvar partes específicas que você mais gosta e adicioná-las ao seu arquivo Figma Outra coisa interessante é que você pode realmente ir do site para o Figma Isso é um plug-in. Deixe-me ver se me lembro do nome. Figma em HTML em Figma. Sim, HTML para design. Você pode obter o site completo, página inteira, pular esta parte por enquanto Mas, na verdade, existem plug-ins nos quais você pode usar chromintenons para obter o design do site e importá-lo dentro do arquivo Figma e torná-lo Vou tentar adicioná-lo ao novo vídeo, então não quero torná-lo muito extenso, mas você entendeu. Depois de organizar suas coisas, você quer ter certeza de que todos os seus designs são. Seu quadro de humor está organizado de uma forma que você possa simplesmente examinar as subcategorias da categoria e começar a obter referências a partir daí No próximo vídeo, vou tentar obter o plug-in que obtém o arquivo Figma do site que está ativo C no próximo. 59. Mãos na UI: do Wireframe ao Chat TextField UI: Agora que temos todos os nossos principais wireframes, queremos organizá-los um pouco. Nesse caso, isso está relacionado à autenticação e está relacionado à casa. Se o usuário não estiver bloqueado , ele precisará passar por esse fluxo. Se o usuário não tiver uma conta, ele precisará seguir esse fluxo e, em seguida, ter acesso à tela inicial. A próxima etapa será simplesmente vir aqui em vez de Figma, dentro de suas camadas, e você criará uma nova seção aqui chamada barra de aplicativos, nova página, design de aplicativo, criará uma nova seção chamada design de aplicativo Aí está. Então, depois de fazer isso, basta colocar um pequeno ícone apenas para indicar que, sei lá, torne-o um pouco mais bonito Lá vamos nós. Você tem o design do seu aplicativo pronto para uso. Então você vai copiar esta pequena seção aqui. Você pode copiar o C comum dentro do seu e do comando V. Dentro do seu arquivo Figma Vamos pegar isso, colocar F. Na Figma, você só precisa colocar uma vez e ela já gerou a cor, consequentemente, decimal hexadecimal Esse caso, vai ser assim. F e vai criar branco. Isso é estranho. Vamos remover isso. Pronto, você já tem seu wireframe visível para você dentro do arquivo Figma O que vamos fazer agora é entrar aqui dentro do Figma e clicar em F no teclado Escolha, digamos, o iPhone 15 Px Aí está. E o que você fará a seguir é que você pode realmente aumentar o tamanho um pouco mais para que corresponda à sua moldura. Agora está tudo pronto. O que você vai fazer agora é começar pela parte inferior. Lembre-se de que, no início, pensamos que seria legal ter uma barra de navegação inferior com esse ícone para facilitar a navegação. Mesmo achando isso muito legal, acredito que seria por algum bom motivo manter a convenção. Portanto, o padrão de interface do usuário que está sendo usado atualmente por outros aplicativos, como copilot e Microsoft Todos estão usando isso assim. Eles têm um campo de entrada e todas as outras coisas aqui, como navegação na parte superior e criação de um novo bate-papo na parte superior. Então eu acho que isso faz mais sentido. Acho que seria interessante mantermos a convenção porque não temos tantos recursos, tempo e esforço para fazer a grande pesquisa que essas equipes fazem. Não estou dizendo que o que as grandes empresas fazem é verdade, mas na maioria dos casos, elas têm mais recursos e fazem essas coisas por um motivo. Vamos tentar fazer o seguinte. Vamos começar removendo a barra de navegação inferior da equação, para que não façamos mais isso. Começaremos com o campo de entrada do chat. Podemos usar nosso campo de texto existente, digamos. Então, se você se lembra, no módulo anterior, falamos sobre campos de texto, podemos usar este e fazer com que ele use a versão arredondada, padrão e todos os seus estados, ou podemos criar um novo do zero Como esse é um bot de bate-papo muito específico para IA, acho que será melhor criarmos o nosso próprio. Então, vamos ter, por exemplo, digitar algo, que é um rótulo, digitar algo, vamos precisar de um ícone. Por exemplo, este ícone como um microfone, arrastamos o microfone aqui, V, você o tem aqui. Então, o que mais precisaremos? Precisaremos de um botão. Esse vai ser o botão, um pequeno botão aqui. O que mais precisamos? Talvez precisemos, acho que, por enquanto, isso será suficiente. Nós apenas comandamos A para criar um layout de saída. Vamos centralizar tudo. E então o que vamos fazer agora é começar com o botão. Então, queremos ver como eles fazem isso, em vez de, nesses casos, eles não terem nenhum botão Enviar. Eles só precisam adicionar algo de voz e áudio. Vamos ver como o Microsoft copilot faz isso. Eles têm um botão de áudio, botão imagem e criam um novo bate-papo. Neste outro aplicativo aqui, eles têm um botão de envio. Eles têm um botão de envio, que eu acho mais intuitivo. Vou manter o botão aqui e vamos remover o texto porque não precisamos dele. Então, se você criou o botão de uma forma muito flexível, você pode remover um ícone esquerdo. Você pode remover o texto. Você não quer torná-lo visível e pode alterar o ícone aqui para enviar. Esse será o ícone da areia. Aí está. E você muda um pouco. Você pode torná-lo zero neutro, que é branco, e pronto, você já tem esse pequeno campo de entrada. Você vai rastreá-lo aqui dentro. Nada está visível. Em vez de fazer isso no fundo branco, também podemos fazer com que seja um fundo escuro. Vamos ficar neutros, nove, que é o fundo mais escuro possível E queremos tornar nosso design um pouco mais sofisticado. Vamos para o bate-papo em campo de texto. Aí está. E sim, acho que chat de campo de texto. Agora você pode adicionar uma cor de preenchimento. Então você tem uma cor de preenchimento aqui no fundo. Então, podemos adicionar talvez um neutro. OK. Sete, o que é muito bom por enquanto. Podemos adicionar 16 para os dois lados e oito para o topo. Aqui vamos nós. Você já tem alguma mágica acontecendo aqui. O que vamos fazer é adicionar uma borda de 16 porque queremos que nosso aplicativo tenha um formato um pouco mais arredondado. Não queremos que seja muito sério, não se esqueça de que você deseja ativar sua grade, virá aqui, grid mobile e terá toda a sua nota visível aqui. Você pode esticá-lo. Uma coisa interessante a fazer é que talvez, como esse texto está sozinho, possamos, em vez de tê-lo como um abraço, vamos nos saciar Encha o recipiente. Aí está. Já está compartilhando esse espaço com esses outros dois elementos aqui. Podemos transformar isso em uma cor diferente. Podemos usar dois neutros. E essa. Acho que vamos mantê-la da mesma cor. Queremos tornar possível simplesmente não saber. Faça upload de uma imagem, para que também possamos adicionar o upload de uma imagem. Ícone da imagem aqui. Aí está. Há tantas coisas diferentes que você pode fazer aqui. Queremos possibilitar o bate-papo, o upload da imagem ou o envio do texto. Essa é a aparência do seu campo de entrada. Vamos apenas remover a grade de um buraco. Você pode simplesmente vir aqui e clicar aqui para esconder, fechar os olhos. Já começou a ganhar forma. Mas, por algum motivo, acho que o espaçamento está um pouco errado. Portanto, seria bom agrupá-los aqui em um layout externo Mude a posição A, reduza o espaço entre eles e coloque talvez 16. Para espaçamento para que sejam alocados juntos. E vamos renomear esse pequeno out-to-frame aqui, nosso layout para, vamos chamá-lo de botões de ação Então veja se você já tem sua etiqueta aqui e tudo mais. Acho que isso será suficiente para o estado inicial do campo de texto. Como eu disse, o campo de texto pode permitir que você faça muitas outras coisas. Ele terá outros estados diferentes. Ele terá o estado padrão, então eu chamaria esse estado padrão. Mas ele terá esse estado quando você estiver digitando, como ficará quando você estiver digitando Vamos acessar os outros aplicativos e ver como eles fazem isso. Quando você está digitando, é assim que parece. Quando você tem um bate-papo aberto, é assim que vai ficar. Eles têm arquivos de áudio para carregar tudo aqui. Quando você começa a digitar, ele muda seu comportamento. O campo de entrada de texto, varia. Então, você quer ter certeza de que ele tem estados diferentes. Como já temos a entrada, a etiqueta aqui, vai mudar a cor para neutra de dois. Aí está. É assim que vamos ter o nosso. Você tem isso, isso e isso, queremos que todas as ações estejam na área do alcance da mão ou na área do alcance Na verdade, existem pesquisas ou muitos artigos falando sobre eles. Área em dispositivo móvel e mostra que você pode ter as zonas naturais de onde seu telefone celular funciona melhor, por exemplo, queremos garantir que o usuário tenha facilidade de uso do aplicativo. Nesse caso, vamos mostrar como queremos garantir que ele cubra a faixa natural. Isso simplificará a capacidade do usuário de executar tarefas no nosso caso, um bate-papo Se essa for a área de uso, como ela nos procurará em nosso aplicativo. Portanto, é natural que tenhamos essa área aqui porque queremos que a área natural se sobreponha Portanto, tudo o que projetamos deve corresponder essa área de fácil acesso. No nosso caso, nosso campo de entrada está muito bem localizado aqui. Eu acredito fortemente nisso. É por isso que é bom ter o upload e o upload da imagem e outras coisas aqui, para facilitar as coisas. Vamos ver o que mais podemos fazer. Sim. Acho que isso nos diz muito. Se você quiser criar um novo chat, como faremos isso? Como podemos fazer isso? Vamos esconder isso por um minuto. Vamos continuar aqui. Você simplesmente colocará isso, criará um componente e criará outras variações disso, se necessário. Mas, por enquanto, vamos manter as simples e colocá-las aqui. Então aí está. Já temos nosso campo de entrada pronto. Podemos colocar uma boa área de contêiner para que ela se destaque um pouco mais. Podemos adicionar preenchimento personalizado, centralizá-lo , colocar o preenchimento como 20 e alinhá-lo na E o preenchimento superior será, digamos, 16. Essa é a área em que esse pequeno componente será. Ok, então este é o contêiner, e o que mais vamos fazer. Vamos ter um exemplo de bate-papo. Quando o usuário entrar aqui, o que você vai fazer? Vamos usar essa fábrica? Vamos mostrar a eles exemplos rápidos? Acho que seria legal ter exemplos rápidos, então vamos projetá-los. Vamos ver como os outros aplicativos estão fazendo isso. Eles têm exemplos rápidos muito interessantes. Acho que esses exemplos rápidos são interessantes porque já oferecem ao usuário a possibilidade de fazer alguma coisa. Oh, esse é outro fato interessante. OK. Você vê como no Cat PT eles exigem que você esteja logado no Microsoft copilot, esse não é o caso Microsoft copilot, esse não é o Eles permitem que você converse antes de fazer login e também já oferecem alguns tipos de instruções. Então, no próximo vídeo, falaremos sobre criar exemplos de prompts para o usuário. Nos vemos na próxima. 60. Mãos na UI: interface de usuário de componente de exemplo de prompt: OK. Tudo bem. Vamos voltar ao assunto. Já começamos a dar uma forma à entrada de bate-papo, onde há imagem, upload de voz e não upload de voz, mas gravação de áudio e botão Enviar, e ele digita algo ou uma mensagem. Esse é o primeiro passo. O segundo passo é fazer um pequeno experimento com os bailes de formatura pré-fabricados A forma como vamos fazer isso é criando alguns adereços pré-fabricados, vamos criar um layout Então, vamos começar, digamos, por exemplo, que queremos ter um título. Esse rótulo aqui será o exemplo, e então queremos ter um ícone “ vamos trazer”. Vamos ver. Como temos essas quatro categorias de quatro categorias, que são texto texto, texto a imagem, texto o vídeo, queremos tornar esses três tipos de bailes visíveis Vamos voltar aqui e vamos colocar um ícone, por exemplo, código. Temos um ícone de código? Sim, nós temos. Vamos rastrear esse ícone de código aqui. Nós vamos mudar a cor. Vamos colocar neutro. Coloque a cor do ícone para, digamos assim. Vamos preenchê-lo ou, na verdade, vamos fazer nosso layout, esse layout externo vai cobri-lo. Vamos colocar um preenchimento e queremos torná-lo um pouco assim e com a cor neutra, a cor do ícone, que talvez seja roxa. OK. Vamos embora. Vamos verificar. Podemos mudar a visão para torná-la assim. Temos uma liderança. A maneira como podemos chamar isso é liderar. Esse é o rótulo. O que mais podemos fazer, acho que é isso por enquanto. Nós podemos ter isso assim. Queremos dar a esse apoiador de 16 mais uma vez. Então, podemos colocar o layout, colocar um pouco de preenchimento ao redor dele Na verdade, queremos fazer uma diferença de 16. Queremos colocar o layout de 24 saídas, mas um preenchimento nos dois lados de 24 e um preenchimento de parte superior e inferior de Acho que é grande, mas acho que pode fazer seu trabalho. Na verdade, vamos reduzir o tamanho para 16 do preenchimento esquerdo e direito E a parte superior e inferior para a esquerda e para a direita também. A outra coisa que queremos fazer é dar a esse pequeno elemento aqui um plano de fundo neutro. Queremos dar uma cor de fundo. Vamos colocar aqui sete sete neutros. É assim que vai ficar. Vamos colocar aqui, por exemplo, uma borda de 24 16. OK. Essa borda é 16, então queremos que toda a nossa forma , nossa forma principal seja 16. Lá vamos nós. Você já tem um pouco de flexibilidade aqui, então podemos começar, por exemplo, codificar quatro jogos de cobra Temos um pequeno aviso. Esse exemplo de alerta, vamos chamar esse exemplo de alerta. OK. Portanto, esse componente de exemplo imediato será o que vamos reutilizar para dar ao usuário uma pequena vantagem inicial durante a criação Então, vamos chamar isso de líder. Vamos chamar esse rótulo, renomeá-lo e chamá-lo de rótulo. Aí está. Isso já parece um pouco como um botão, então acho que queremos torná-lo um pouco diferente. Não, acho que é isso. Não precisamos complicar demais as Talvez haja uma maneira de definir uma largura máxima. A largura máxima para isso será a largura atual de 300, então queremos dar uma largura máxima de 250, talvez. Essa é a largura máxima. É possível definir uma largura máxima de 250 porque não queremos que seja muito longa de uma forma que você não possa tornar visível depois de criarmos outros itens aqui, para não ficar visível. Queremos dar um pouco de espaçamento e um pouco de peso que permitam ao usuário ver mais opções aqui Esse é um recurso muito legal do Figma, que permite definir o peso máximo Se o texto, em algum caso, ficar muito longo e não definirmos a largura máxima, é isso que vai acontecer. Você remove a largura máxima, remove a largura máxima. E se você colocar isso, por exemplo, um texto longo, vamos copiar e colar. O que vai acontecer é que ele pode se estender pelo tempo que quiser, e não há limitação. É por isso que você deseja definir uma largura máxima para esse pequeno componente. Aí está. Você tem esse exemplo de prompt número um, crie um componente para ele e pronto, aí está. Você tem um pequeno componente para um exemplo rápido. Acho que você deseja criar outras variações ou talvez possa criar um ícone principal com diferentes tipos com diferentes tipos de, digamos, vamos remover isso, e queremos chamar isso de liderança. E então criamos um componente disso. Veja um exemplo disso. Então, ao duplicá-lo e arrastá-lo para dentro dele, você remove o que não é um componente Dessa forma, você pode criar variações desse pequeno componente. Aí está. Podemos dizer que este é texto. Você pode alterar o ícone para documento. Nosso artigo, vamos pesquisar a conduta e fica bem com isso. OK. OK. Vamos ver todas as bibliotecas que têm documentos. Não, não é bom. Arquivo, vamos chamá-lo de arquivo. Quais desses ícones de arquivo. Digamos que uma mensagem de texto. Isso indicará. Isso indicará o código. Isso pode indicar vídeo. Então, podemos colocar o vídeo aqui. Um ícone de vídeo. O último, qual foi o único? Temos texto a texto. Usamos o documento. Envie uma mensagem de texto com a imagem e envie o vídeo. Eu não coloquei código por algum motivo, mas acho que seria importante ter alguma possibilidade de enviar o código por texto, que ainda é texto no final do dia, mas só queremos torná-lo um pouco mais elaborado Aqui vamos apenas para a imagem de texto, então queremos colocar a imagem aqui na foto. Também podemos reutilizar isso porque, no final das contas , é uma imagem Ele será gerado. Neste caso, lembre-se de que queremos ter o ícone principal que tenha os conjuntos de variantes. Queremos dar um nome a essa, por exemplo, vamos chamá-la de imagem. OK. E, na verdade, podemos renomear a propriedade para gerar e ela será gerar imagem, gerar vídeo A convenção de nomenclatura C pode ser muito útil. Gere vídeo, gere código, gere texto. Aí está. Já temos esse ícone principal que gera diferentes tipos de código, imagem de vídeo. Mas se todos parecem iguais , queremos diferenciá-los um pouco Com o texto, podemos usar essa cor para o código. Podemos mudar a cor para, digamos, isso, podemos mudar o vídeo para quando você estiver usando, por exemplo, cores de informação, você queira usar uma ou duas como cor de fundo e usar a cor mais escura em vez de neutra, podemos usar, digamos, cor infra, e vamos usar a Ainda vai parecer interessante, mas está tudo combinando. As cores serão contrastantes e igualmente equilibradas Chegamos à seção de vídeos, vamos mudar isso para talvez a cor do sucesso e usar o sucesso dois, mudar a cor do ícone para a qual está usando neutros. Vamos dizer que o sucesso é nove. OK. Você não sabe, talvez você possa ver isso agora, mas está começando a dar alguma forma de sucesso nove. E então, o último, podemos escolher, digamos que, como é geração de imagem, podemos usar talvez amarelo ou alerta. No nosso caso, vamos usar o alerta ou esse tom mais claro do alerta dois. Dessa forma, você tem diferentes tipos de ícones principais que podem ser para isso. O que você vai fazer agora é criar na verdade, você vai criar instâncias. Você vai criar algumas variantes. E crie mais variantes para e então você vai mudar isso para código, esta para vídeo e esta para imagem. Em seguida, você tem os corpos de exemplo de prompt para cada um deles e seu ícone principal, respectivamente. Você vê como as coisas começam a tomar forma e parece um pouco mais organizado e estruturado porque você quer dar ao ícone principal, você quer dar ao rótulo também um pouco de contexto. Para fazer isso, você só precisa criar algumas variações. Mais uma coisa que vamos fazer aqui é adicionar propriedades. Não se preocupe Isso pode parecer um pouco complexo, mas não é tão complexo quanto você imagina. Provavelmente porque você o viu pela primeira vez. Mas vamos voltar mais uma vez às propriedades. Se você criar variantes ou tiver um componente específico, poderá adicionar propriedades a isso Você fará o seguinte. Crie uma propriedade. Essa propriedade é chamada tex e queríamos dizer label. E então o valor disso será um exemplo imediato, texto. Esse é o valor. A próxima coisa que queremos fazer é adicionar outra propriedade, talvez para mostrar visibilidade. Se quisermos que esse prompt fique visível, o início mostra o ícone principal. Quem sabe por que razão queremos fazer isso, mas se for verdade, deixaremos assim. Agora vamos entrar em cada uma dessas variantes e anexar uma propriedade específica específica a ela. Então, essa camada, podemos fazer com que ela mostre o ícone principal, mas isso não é verdade. Queremos relacioná-lo ao texto. Então, vamos aplicar uma propriedade de texto aos rótulos aqui. Aí está. A mágica aconteceu. Vá novamente. E então você tem o ícone principal aqui. O que você pode fazer, não vamos fazer isso. Você virá aqui para colocar camadas, camada é qualquer coisa relacionada à visibilidade. Camada, mostre o ícone principal. O que isso fará é que você praticamente venha aqui e defina praticamente venha aqui e se deseja mostrar o ícone principal ou não, e você pode simplesmente editar o texto. Como isso é, ajude-me a escrever um p Aí está. Você já tem um componente que pode variar. Você deseja alterar isso do padrão ou, na verdade, também deseja se lembrar de alterar a nomenclatura aqui Você vai mudar isso para o tipo de prompt. Você alterou o nome da propriedade e vai mudar a segunda para código. Essa vai ser uma mensagem de texto. Esse vai ser um vídeo. Esse tipo de prompt será uma imagem. Dessa forma, você pode alternar entre tipo de prompt desejado. Pronto, você acabou de criar seus componentes para a lista de exemplos imediatos. Agora o que você vai fazer é fazer a mesma coisa que você fez o que eu fiz antes. Venha aqui. Link para o rótulo. Vincule a visibilidade do ícone aqui na camada, mostre o ícone principal e repita o processo. Acho que talvez houvesse a possibilidade de fazer isso de outra maneira: criamos o componente, vinculamos as propriedades e depois criamos a variância. Essa seria, na verdade, uma maneira mais inteligente de fazer isso. Mas é o que é. Nós já fizemos dessa maneira. Mais uma etapa aqui é coletá-los no rótulo. Novamente, e este último na geração de e-mails. Queremos vincular a camada, mostrar o ícone principal e, mais uma vez, vincular a camada, vincular a propriedade do texto ao rótulo. Aí está. Você tem diferentes tipos de variações desse componente, por exemplo, com ícones iniciais. Essas principais variações de ícones servem especificamente para criar o componente de exemplo imediato. Agora, o que você vai fazer aqui é pegar esse pequeno componente. E você vai duplicá-lo. Depois de duplicá-lo, você está no teclado, desloca A e cria uma linha Aí está. Dessa forma, você pode adicionar mais exemplos de solicitações, se desejar Essa é minha única maneira de fazer isso. Então, como você já tem esse exemplo de prompt, você pode alterá-lo para que o primeiro seja texto. OK. O segundo é uma imagem e o terceiro é um código e o quarto é um vídeo. Essa é a estrutura que você pode realmente colocar para criar esses prompts. Para torná-lo mais realista, você quer, por exemplo, me ajudar a escrever o poema Sobre natureza e beleza. Digamos que a natureza é aliada. É aqui que a Emirate está filmando agora. Alley, por exemplo, crie uma imagem nesta parte da imagem, queremos dizer ao usuário, crie uma imagem Do cyberpunk CT. Para o código, um código para um jogo de cobra em Python A última é criar um vídeo de um pirata dançando. Agora que você tem a linha de exemplo do prompt, você vai colocá-la aqui No próximo vídeo, vamos prototipar essa pequena seção aqui de uma forma que possibilite que você veja quais são as outras opções aqui Vamos apertar o play para o protótipo. Vai carregar um pouco. OK. Aí está. Você não pode fazer nada aqui ainda. Mas quando você começar a prototipá-lo um pouco, poderá ver as outras opções de exemplos imediatos Está tirando vidas. Vamos embora. Estou muito empolgado com isso. Nos vemos na próxima. 61. Mãos na UI: avatar de perfil e primeiro estado vazio: OK. Tudo bem. Então , para continuar, vamos verificar as tarefas que temos. Aqui temos algumas tarefas fechadas. Campo de entrada, área de boas-vindas, botões giratórios. Agora queremos continuar trabalhando na tarefa, então queremos trabalhar no avatar da tela do perfil, histórico de conversas e nos bate-papos recentes. É isso mesmo. O que vamos fazer agora é entrar aqui dentro do Figma e eles vão criar lábios de tamanho 50 Cinco zero. Agora, se você ainda não o instalou, pode instalar esse plug-in chamado perfil de usuário. Clique nele. Você vai gerar uma imagem de perfil de usuário aleatória. Isso parece bom. O que você vai fazer agora é adicionar uma pequena borda, traçar , usar a cor primária ou talvez esse gradiente Isso parece bom. Confira aqui no modo de pré-visualização. Você tem esse evento de rolagem aqui. Tudo parece bem. O que vamos fazer agora é apenas fazer alguns ajustes porque você quer ter certeza do que acontece quando o usuário tem um histórico de conversas. Você quer cortar o bate-papo recente. OK. Então você coloca aqui os bate-papos recentes e os coloca como não um parágrafo, mas vai alterá-los para um rótulo grande Então, você terá bate-papos recentes. Você pode colocar o ícone aqui para ligar para a Chevron e deseja usar a direção certa Você vai mudar a cor para neutra? Diga um ponto neutro. Ajuste aqui, coloque-os alinhados aqui. Agora, o que você já tem nesses bate-papos recentes. Se há alguma coisa que você precisa saber quando está projetando, é importante projetá-la em dois estados. Você não deve criar o cenário perfeito, mas também fará coisas de design quando ainda não houver nada, nenhuma informação adicionada à interface. Nesse caso, teremos um estado vazio aqui, vamos apenas colocar uma cópia aqui dizendo que não há bate-papo recente no momento. Aí está. Isso é o que será exibido. Sim. Agora você tem isso no lugar. O que você vai fazer agora, se não há nada acontecendo aqui. É assim que podemos parecer. Só quero ter certeza de que está muito bem alinhado. Não aqui. Então você também quer colocar a marca do aplicativo. Este aplicativo é chamado Jupiter Jupiter AI. Crie algo simples, elipse, eu adoro elipse, como Vamos colocar um pouco. Vamos disponibilizá-lo para que você também possa usá-lo . Basta criar uma máscara. Agora basta mover isso, juntar isso, ver que esse será o logotipo do aplicativo. E etiqueta grande. Você pode realmente reduzir o tamanho desse bit, reduzi-lo um pouco mais, você já tem o logotipo disso. Na verdade, você quer ter isso em uma fonte diferente. Você pode colocar, por exemplo, monumento. Se você não tiver esse monumento estendido, poderá baixá-lo gratuitamente. Aqui está, basta continuar ajustando um pouco mais para certeza de que tem a marca do aplicativo Então você tem os bate-papos recentes aqui. Não está muito bem alinhado. Você está lidando com isso aqui agora, e agora está começando a tomar alguma Acima, essa é a marca. É assim que vai parecer. Talvez você possa mudar isso um pouco, só para gerar algum contraste. O que é o W é o outro elemento aqui? Pode fazer com que seja um pouco como esse código, você tem um pequeno logotipo. Você tem essa mudança de cor aqui. Como você pode ver, esse é o estado vazio. O que acontece quando o usuário, não se esqueça. Lembre-se de que, se toda vez que você coloca algo no quadro e ele ainda está visível do lado de fora, isso significa que o conteúdo do clipe não está ativado. Coloque-o aqui. Agora você tem, não há bate-papo no momento. Não há nenhuma conversa recente no momento aqui, que na verdade acontece aqui. E esse é o avatar do momento, e o que vamos criar a seguir é a aparência da prévia de seus bate-papos recentes e a aparência da lista de todos os bate-papos Fique por aqui e nos vemos na próxima. 62. Mãos na UI: como lidar com teclado e chat recente: OK. Então, uma coisa que eu estava pensando sobre esse layout. Parece limpo em tudo isso, mas queremos ter certeza de que o espaçamento está correto, ele precisa ser 20 nos dois lados A outra coisa é que queremos ter certeza de que o motivo pelo qual os bate-papos também estão alinhados Na verdade, queremos colocar isso um pouco aqui. Vou explicar o porquê e queremos colocar as sugestões de bate-papo, como as sugestões imediatas, aqui. Vamos alinhá-lo aqui. E tenha um pequeno espaço de, sei lá, 64. E isso com uma solução salina espacial. OK. E você vai ter um espaço entre, eu não sei, vamos colocar 32 bate-papos recentes. No momento em que o usuário insere algo, o teclado o levanta, mas o prompt fica mais próximo do dedo. Mas algo que acabei de verificar também nos outros aplicativos é que o mesmo acontece se ele estiver fixado na parte superior do campo de entrada e o teclado já ocupar espaço. Deixe-me mostrar o que estou tentando explicar. Você virá aqui na comunidade e deseja encontrar a comunidade de exploração aqui, para alterar o layout em que deseja colocar o teclado IOS. OK. Isso é o que você vai pesquisar. Veja aqui que este é um teclado que tem muitas pessoas da comunidade, você vai abrir o site do Figma E a razão pela qual você quer fazer isso é como usar os teclados é porque, quando você cria uma interface de usuário estática, as coisas parecem perfeitas Mas quando os teclados entram na conversa e o áudio ou outros elementos entram na conversa, você quer ter certeza de que a interface do usuário tenha isso em consideração Aqui, queremos que os limites padrão estejam desativados. Basta fazer com que este teclado o copie em um projeto e vamos duplicá-lo aqui Outra coisa que talvez queiramos fazer é começar a fazer o layout para isso e colar o teclado aqui, espalhá-lo um pouco. Venha aqui, arrume isso por dentro do próprio layout externo. Como você pode ver, você tem esse pequeno recipiente. O que você vai fazer é colocar o teclado aqui dentro. Mas você vê que o bate-papo do campo de entrada desapareceu, então você quer ter certeza de que é um layout vertical. Aí está. Você o tem aqui. Venha aqui um pouco porque você quer que seja em tela cheia, então você quer ter certeza de que está em tela cheia. Desça até aqui, coloque-o bem no fundo. Remova o espaço entre zero e pronto. É assim que vai se comportar quando você tem bate-papos recentes, por exemplo Podemos configurá-lo como aqui, à distância de 1208. Ajuste isso aqui, o layout, ele chama, e então você vai puxá-lo de volta aqui. Espero que você esteja acompanhando, se não estiver deixando os comentários se a base for muito rápida. Mas quero ter certeza de que existem maneiras de realmente projetar e considerar outros fatores, como o teclado, por exemplo, a aparência do comportamento da interface do usuário. Agora que já temos o teclado aqui. Lou parece muito bem. Mas o que vai acontecer quando houver um bate-papo recente? Vamos criar outro der aqui, o que vamos fazer aqui é adicionar exemplo de um bate-papo recente. O componente de bate-papo recente. Na verdade, eu posso ser parecido com isso, talvez. Eu posso simplesmente usá-lo aqui. Vamos ver como vai ficar. Estenda isso ou tenha uma largura máxima. Não queremos fazer isso. Na verdade, podemos remover desta caixa aqui, mas, na verdade, apenas removê-la. Remova a largura máxima, estenda-a um pouco aqui. Aí está. Isso tem um ícone à direita? Nesse caso, ele não tem um final, então você pode simplesmente remover a alteração do ícone para digamos, mensagem de bate-papo Bom. Você quer remover essa cor em vez de ser roxa, você quer torná-la um pouco mais neutra, neutra. Tem isso e o título da conversa. Aí está. Você quer mudar isso. Não será o ícone de bate-papo, mas sim o relógio. OK. Coloque-o aqui, puxe-o para baixo aqui. Aí está. Você cria uma pequena lista aqui com os bate-papos recentes Essa é a aparência disso. Eu quero colocar isso no layout. Bate-papo recente. E eles começam a ter algum tipo de forma. A razão pela qual queremos fazer isso assim é garantir que ele contenha um pouco mais de recursos Você quer que o usuário veja que há algo que já foi feito antes. Aí está. Você tem o layout com o Avatar, o prompt e o bate-papo recente. Esse ícone é o que levará o usuário à lista de bate-papos anteriores Então nos vemos na próxima. 63. Mãos na UI: lista de bate-papos: OK. Tudo bem. Tudo bem. O que vamos fazer agora é criar a lista de bate-papo. Você vai duplicar usando o mesmo quadro. Você vai reutilizar isso e vai remover isso Você também começará a remover a marca, mas antes disso, adicione uma seta para trás da Chevron Chevron Você vai colocar isso aqui dentro. V. Isso é Space Teen, como você coloca e remove o logotipo. Deixe-me mostrar como o Space Teen realmente funciona. Você vai colocar o branco ou o neutro, mudar a cor local para aquela neutra. Então, quando você remover esse logotipo, o que vai acontecer será distribuído automaticamente para o espaço de acordo. Essa é a verdadeira importância de ser capaz de entender como a camada externa funciona. O que você vai fazer agora é colocar seu chat de bate-papo. Certifique-se de alterar isso para colocar, digamos, rótulo padrão, OK. E então você coloca aqui e já está lá. Vamos remover isso. Acredito que você remova os prompts porque não precisa deles. Você também não precisará de nada relacionado a esse ícone aqui E acho que é isso por enquanto. Na verdade, basta colocar aqui hoje. O que você vai fazer aqui agora é separar a estrutura por rótulo. Você quer mostrar às pessoas o que aconteceu hoje e o que aconteceu no passado, sei lá, 15, dez dias, você vai separá-las de uma forma estruturada e mais fácil de combater. O que você vai fazer agora é apenas organizá-lo e ter os três bate-papos mais recentes. Mas isso é hoje, tenha um espaço de 16 no meio. Você também quer ter certeza de que esse é um ícone de bate-papo. Então você quer dizer mensagem. OK. Aí está. Basta escolher este ícone de mensagem, selecionar esses dois, excluí-los e duplicá-los Você quer ter três, então você coloca o turno a , aí está. Você já tem uma seção. Em seguida, você duplica isso e o remove de forma que possa criar outra seção Mais, remova-o. Isso você pode colocar 30 dias atrás. Como você acabou de ajustar isso e dizer o anterior, isso é para o anterior, digamos que 30 dias, e tudo isso está relacionado aos bate-papos que você teve hoje Uma coisa muito importante é que cada bate-papo tenha uma ação. Todo bate-papo tem uma ação, se você pode excluir a mensagem, editar o título da mensagem ou simplesmente denunciá-la, por exemplo, essas são as opções. Como você pode ver aqui, não temos isso aqui. Então, como você usa o exemplo do prompt com bastante frequência, esse componente que podemos fazer é o seguinte. Veja que há mais opções para executar aqui. Você rastreará esse ícone aqui. Digamos que menu. Você pode realmente duplicar isso, movê-lo, remover o fundo, manter o ícone, tamanho 24, você vai movê-lo para o menu Pesquise, veja se você consegue encontrar. Vamos tentar encontrá-lo. Não há nada como o menu. Vamos continuar pesquisando, todas as bibliotecas. Vamos colocar na vertical. Vertical. O nome desse ícone aqui é mais vertical. Você o colocou lá? V você já o tem. O que você vai fazer são neutros. Aqui está de novo. OK. Sim. Seja neutro para todos eles e neutro para dois. Então, o que você vai fazer aqui é adicionar uma propriedade. Digamos, por exemplo, que você possa clicar exatamente nessa propriedade e colocar aqui. Por exemplo, basta desanexar isso e criar uma propriedade específica para isso Você quer ir aqui e colocar camadas. Você clicará neste botão aqui e criará uma trilha de exibição de propriedades. OK. Ícone. O ícone final é basicamente o ícone que sai na borda e o ícone principal, que começa logo no início Esse é basicamente o conceito e você vai colocar falso porque não quer que ele se torne visível. Caso contrário, isso afetará todos os exemplos de solicitações. Então, você clica aqui, volta para a instância, o que você vai fazer agora é selecionar todos esses itens aqui, selecioná-los. Três, então você vai colocar o ícone final. Como mágica, você torna todo o ícone final visível. Dessa forma, as opções da árvore podem ser. Digamos, por exemplo, que você queira fixar a conversa porque quer ter certeza de que essa conversa é importante para mim e que o usuário quer vê-la o tempo todo, para o usuário possa fixá-la, renomear o bate-papo ou renomear o título do bate-papo ou excluir É basicamente isso. No próximo vídeo, falaremos sobre como criar esse menu. Nos vemos na próxima. 64. Mãos na UI: como criar um menu suspenso: OK. Tudo bem. O que vamos fazer agora é criar os itens. Queremos três itens em nossas opções de menu. Queremos ser capazes de fixar a conversa. Então, também queremos poder renomear o tipo do bate-papo e, finalmente, excluir esse Como você lembra, criamos esse componente, como podemos reutilizá-lo Vamos arrastá-lo até aqui, basta selecioná-lo e arrastá-lo. O que você vai fazer é que você já tenha a liderança e a direita. Tudo o que você precisa fazer é desativar o cabo e colocar aqui, por exemplo, o pino OK. E então você vai procurar o ícone do alfinete e depois colocar o alfinete. Esse vai ser um ícone interessante de encontrar. Mas vamos um por um. Na verdade, podemos ir até isso e rastrear. Vamos ver se encontramos o ícone do alfinete aqui. Acho que se não tivermos o ícone do alfinete, provavelmente teremos que projetá-lo você mesmo, o que não é um problema. Aparentemente, não o temos, então teremos que projetá-lo você mesmo. Deixe-me ver se encontro alguma referência. Vamos criar o ícone. Isso é inesperado, mas é assim que trabalho de design acontece. Você sempre tem alguns encontros interessantes. Você nunca sabe o que esperar. O que vai acontecer agora é que você praticamente virá aqui em seu ícone. Você pode simplesmente duplicar o existente, um, por exemplo, que não está muito bem projetado Você acabou de duplicar essa instância de desanexação. Na verdade, você pode obtê-lo na internet, mas vamos tentar projetá-lo. Então você quer dizer o ícone do alfinete. Esse é o famoso ícone de alfinete, mas também temos esse ícone de alfinete. OK. Vou apenas mostrar o que lembro do ícone de alfinete, um retângulo, colocar um pouco de cor de fundo Tem um retângulo. Você vem aqui. Você coloca mais um retângulo. Então você coloca um retângulo muito fino aqui. Já está ganhando forma. Selecionado aqui, organize-o aqui, você obterá alguma forma, mas não se parece muito com os outros estilos de ícone. O que você vai começar a fazer é apenas limpar. Você vai começar aqui simplesmente adicionando isso desta forma, tornando-o como uma altura da largura de 16. Você o alinha. Então você quer ter a largura de, digamos, quatro quatro a dez, para que você possa deixá-la como oito. Então, o que você vai fazer é garantir que tudo esteja centralizado O que você vai fazer aqui com a fronteira. Você diz que a borda de Eu não dois do outro lado dois, e você vai colocar a borda geral da borda geral aqui é dois, e aqui você pode deixá-la . Então você a junta aqui e pode realmente mesclá-la Para ser justo, você pode realmente fazer isso aqui em vez de oito. Você pode fazer isso com uma largura de seis, alinhá-lo até o centro e ver se fica. Não é tão ruim. Na verdade, essa borda não parece muito boa, então você reduzirá a borda de cada uma delas. Você coloca 0,50 0,5, 0,5 e 0,5. Você tem um ritmo mais ou menos melhor. Você vai adicionar um traçado, você vai remover o preenchimento. Você vai colocar uma cor neutra. OK. Basta colocar uma cor neutra aqui. Você pode realmente aplicar isso e o mesmo aos outros. Então você vai colocar uma cor neutra. Neutro. Talvez coloque uma árvore neutra também. O tipo parece o mesmo, mas não realmente. Então, você quer ter certeza de que esse é o número dois. Parece que sim. Você puxa um pouco para o lado aqui, puxa um pouco para o lado também. Sim. Você entendeu a ideia. Então você quer transformar isso em bate-papo? Então, basta tocar no ícone e depois no alfinete. Ou um alfinete de papel, converta-o em remover o fundo, coloque o neutro em, e então você já tem o ícone do alfinete. O que você vai fazer agora é pegar o mesmo ícone e voltar ao seu parquinho. Venha aqui, e este item de mensagem será chamado Digamos que alfinete de papel. Você pode mudar a cor aqui para essa cor neutra. Você vê que há um pequeno problema. O que você vai fazer agora é garantir que tudo isso seja realmente em escala. Você quer que ele seja capaz de escalar. Clique aqui, retorne instância a instância e pronto. É muito grande. Você quer consertar isso um pouco. Talvez você possa voltar aqui, garantir que não se estique, deixe-o no centro por enquanto. Aí está. Então você já tem os itens do menu. O máximo que você pode duplicar, pode duplicá-lo uma vez, duas vezes. Outra coisa interessante é que você deseja selecionar todas elas, remover todas as bordas porque ainda não quer que elas tenham nenhuma borda. Você colocará todos eles e selecionará todos eles. Você vai colocá-los dentro do layout, selecionar todos eles, deslocar A para o layout. Então o que você vai fazer agora é colocar aqui. A primeira opção é pino, o ícone está correto. A segunda opção é renomear, você pode usar um lápis ou livro ou algo parecido com esse ícone Ele vai escolher o ícone. Venha aqui. Alfinete ou livro. OK. Editar. Você pode usar a edição aqui. Use o ícone de edição. Por alguma razão, isso é escalar e não escalar muito bem Vamos voltar ao componente principal e visualizar o ícone principal aqui Esse ícone principal não precisa mais existir. Deve ser como 24, como 24, 24, 24. Sim. É assim que você deseja deixar os ícones à direita, à esquerda, se quiser chamar isso de rastreamento OK. E o ícone em vez do final, deve estar alinhado e centralizado Oh, não, eu entendo o problema aqui. Você deseja desanexar esse ícone final porque se lembra que duplicamos no início, ele já estava relacionado ao O ícone principal é um componente aqui. Então, não queremos que isso aconteça. Então você só precisa desconectá-lo. E então está no final, mas ainda é uma instância, então você quer desanexar a instância e agora pode modificá-la de acordo com suas necessidades Quero dizer, venha aqui, siga o ícone, alinhe tudo Aqui vamos nós. Você só quer fazer isso um pouco mais. Você volta. Esses não parecem muito bons. Mais uma vez, você precisa experimentar e tentar tornar isso o mais suave possível e considerar que isso pode ser mais de um caso Toda vez que você projeta algum componente, você precisa garantir que esses componentes tenham mais de um caso de uso para torná-los um componente e considerar todas as possibilidades e variações que podem ser apenas um ícone inicial, um ícone final, apenas um final, início com e todas essas OK. Então, neste caso, aqui agora, queremos apenas ajustar o ícone. Volte aqui, volte para a instância. Esses são os itens. Este é um parágrafo, então você deseja alterar esses itens aqui para rótulos. Aí está. Isso aqui vai ser fixado. Novamente, neutro? Isso vai ser, vai ser editado. É um pequeno lápis e, em seguida, o último é deletar, então você vai fixar. Ou lixo. Excluir. Você vê que a convenção de nomenclatura pode variar e gerar tanta confusão, por isso é que eu sempre recomendo escolher a convenção de nomenclatura mais simples Então você evitará ter essa dor de cabeça de tentar encontrar coisas. Mantenha sua convenção de nomenclatura o mais simples possível e você economizará tempo Evite muitos problemas. Nesse caso, você quer resolver isso um pouco aqui. Certifique-se de que todos sejam recipientes de enchimento. Phil, eles estão lá, então você pode simplesmente chamar isso de drop domino OK. E você vai colocar uma borda que cobre tudo. Então, às 18:16 pixels. Aí está. I 16. A razão pela qual isso não está funcionando é que você precisa garantir que os elementos individuais tenham oito no canto superior direito e no canto superior esquerdo. OK. Vamos voltar. Aí está. Agora ele se torna um micro mais visível. Vamos mudar isso um pouco. Está chegando lá e vamos chegar a esse elemento individual. Clique aqui. Selecione oito, altere oito. Lá vamos nós. Quando o usuário toca em um desses menus suspensos, os ícones aqui, o que vai aparecer é esse menu suspenso É isso mesmo. Por enquanto, e veja na próxima. 65. Mãos na UI: tela de bate-papo: Agora vamos abordar uma parte muito importante desse processo de criação de um assistente de IA e um parceiro de IA O que você vai fazer agora é praticamente duplicar essa tela aqui Como você pode ver, essa é a tela inicial normal. Acho que queremos fazer pequenos ajustes aqui porque queremos ter certeza de que está coberto e alinhado, alinhamos e garantimos que seja como, digamos, 30, 40. Sim, isso já parece muito bom Para ajustes menores aqui. Quero ter certeza de que o espaçamento não é demais. Reduzimos o espaço em branco dessa tela, ficando com 24. Ter isso aqui um pouco mais acima. Vamos ver. Bom. Parece que 64 será mais do que suficiente. Quando os teclados se levantam , você sabe o que fazer. Isso também precisa ser só isso. Na verdade, podemos juntar tudo aqui. Então, ele será alinhado com o resto. Você tem isso aqui. Talvez você também possa clicar nele e alinhá-lo na parte superior Bom. Agora você tem uma pequena modificação. Então, o que vai acontecer agora é tentar resolver o que acontece quando o usuário insere informações, uma solicitação, uma pergunta e o que o assistente fornecerá como resposta, como essa interface deve ser. Isso é o que precisamos considerar. A primeira coisa que vamos fazer é pegar o usuário, digamos que o prompt será esse, queremos alterar o estado do prompt e colocá-lo assim. Digamos como escrever um poema, como escrever um poema Essa é uma pergunta muito simples. Isso é um aviso e , uma vez enviado, é enviado. Isso vai ser esse vai ser o aviso. Na verdade, queremos que aqui fique como está, isso é escrever e digitar alguma coisa. Então, essa será a mensagem a ser solicitada, pois ela já está no estado de enviada, que também queremos fazer Acho que podemos realmente removê-la, então vamos removê-la e mantê-la assim. Queremos ter os detalhes desta barra aqui, queremos usar o PR, vamos usar o PR como um título, por exemplo, como escrever o poema Portanto, queremos garantir que, quando o usuário entrar no estado, ele esteja iniciando um bate-papo e, se você entrar em qualquer conversa, em qualquer bate-papo no momento, clique em um item ou na conversa iniciada, ela entre em uma tela de bate-papo A tela de bate-papo tem 2%, como mencionei anteriormente, é o assistente e o usuário. Então, usuário versus assistente. Temos que manter esses dois em mente. A primeira coisa que vamos fazer é pegar a imagem, o avatar do usuário. Basta colocá-lo de lado aqui, e já podemos tê-lo mais ou menos assim. Talvez eu não saiba, vamos apenas testá-lo com o comando A, shift A, que é no layout que podemos colocar um pouco de, digamos, uma cor de preenchimento ou, na verdade, não. Sim, devemos manter isso assim. Em seguida, vamos chamar esse balão de bate-papo do usuário. OK. E então podemos realmente transformar isso, remover isso, reduzir o espaço, transformá-lo em 12. Queremos vir aqui. Aqui onde estão o texto e a string, podemos realmente convertê-los no pequeno balão de bate-papo Antes disso, podemos realmente reduzir o tamanho desse avatar aqui. Pressione k no teclado, reduza para, digamos, 32 , ocupa menos espaço. Se você está tendo dificuldades para entender o layout, lembre-se de ativar a grade e pronto. Para mim, é um pouco mais visual. Eu posso ver isso mais facilmente. Então, como eu disse, queremos transformar esse piso em uma pequena bolha de bate-papo Você clica nisso. Chamamos isso de bolha de bate-papo E então vamos começar a aplicar o preenchimento, então queremos adicionar oito na parte superior e inferior e oito na esquerda e na direita Em seguida, também queremos aplicar as cores de fundo. A forma como vamos fazer isso é adicionando um neutro. Queremos adicionar, digamos, este. É um pouco claro demais, então queremos mudar isso um pouco mais escuro. Isso parece bom. Então, o que vai acontecer é que queremos aplicar alguma fronteira. A borda que geralmente usamos é 24. Vamos verificar novamente. Agora são 16 neste caso. Vamos usar 16 apenas para manter a consistência das bordas. Na verdade, é muito importante que possamos criar algumas aráveis, mas não vamos entrar em variáveis agora Mas podemos usar variáveis para criar números, algumas cores e coisas assim, para que não precisemos lembrar o tempo todo qual é a borda usada ou qual é o espaçamento Podemos criar diferentes tipos de coisas usando as variáveis, mas não vamos entrar nisso agora Aqui está seu balão de bate-papo. Essa é a aparência real de uma pergunta . O que vamos fazer também é adicionar aqui outro preenchimento, puxá-lo para baixo e puxá-lo Então você vai mudar essa cor aqui para, digamos, vamos mudar para This change color to this. Você vai entender em pouco tempo. Você vai mudar um pouco mais aqui. Vamos dar uma olhada um pouco. Bom. Aí está. Acho que é uma forma de fazermos isso. Agora que temos o pequeno balão de bate-papo, queremos ter também o avatar da IA de Júpiter Júpiter é a IA que usaremos para responder Então, o que seria uma resposta? Qual é a aparência de uma resposta. Como temos o pequeno avatar, vamos criar um componente dele. Basta arrastá-lo um pouco para fora. Agora você vê o aqui e a bolha ch. Converta também em um componente. Todo esse balão de bate-papo se tornará um balão de bate-papo do usuário Aí está. Outra coisa que podemos fazer é, assim como já criamos um componente para o Avatar e para o balão de bate-papo individualmente, transmitindo isso para o Avatar, podemos criar uma variante Essa variante não conterá uma foto porque será da imagem do assistente. Vamos removê-lo. Vamos colocar 100% de acordo. E então podemos chamar isso de Júpiter ou simplesmente , vamos colocar um logotipo aqui Você pode usar o mesmo logotipo para ficar um pouco mais consistente. Junte isso aqui. Vou reduzir o tamanho do bit, K no teclado. Coloque assim. Talvez aumente um pouco mais. Agora temos essa cor. Na verdade, em vez de ter um gradiente, podemos simplesmente colocar um fundo mais sólido Isso estará aqui no meio e isso será como se você clicasse em Avatar e você verá duas propriedades. Você vai clicar aqui e renomear essa propriedade para digitar Vai ser o usuário. Queremos apenas renomeá-lo para usuário neste assistente. O assistente de IA. Aí está. Agora você tem algumas opções. Se for o caso de troca, você pode realmente fazer uma troca ou apenas alterar o componente. Você tem isso. Você pode clicar neste pequeno bot aqui e você pode alterá-lo neste pequeno avatar e você pode trocá-lo por assistente. Aí está. Você pode ter uma pequena variação de ambos. Agora, o que você vai fazer agora é duplicar esse comando e arrastá-lo até aqui Isso já é uma pequena conversa acontecendo aqui. Você pode voltar aqui na interface e simplesmente colocá-la aqui. Vamos ver se ferramentas existentes, como Gemini, são usadas, para que eles possam ir aqui e dizer como escrever poemas Em seguida, você envia enter. Vamos ver o que vai criar para nós. Lembre-se de que há alguns estados da escrita Quando se gera conteúdo, leva algum tempo para carregar para criar algo. Como você pode ver aqui, esta é uma pergunta muito longa, e precisamos estar cientes de que às vezes ela pode ser extremamente longa Como vamos resolver isso? Acho que podemos simplesmente copiar, torná-lo um pouco mais conciso. Versão concisa Então você o atualiza. Mas você escreve a mensagem, você escreve o aviso. Você o envia depois de enviado, está sendo processado, está sendo criado, então precisamos também abordar essas coisas na interface do usuário. Vamos chegar a isso em breve. Mas, no momento, você pode ver aqui está o avatar e aqui está o avatar do usuário e aqui está o avatar do assistente. Precisamos considerar a edição e a resposta. Então, geralmente, começa com Absolutamente e depois diz o que fazer. Nesse caso, vamos copiá-lo apenas por uma questão de tempo. Não queremos gastar muito tempo com isso, como criar. Então você simplesmente viria aqui e colaria isso. Mas há um pequeno problema aqui, pois esse texto, em vez de aqui, não está embrulhado, é um abraço Talvez se você colocá-lo como recipiente de enchimento e depois ele venha aqui e se reajuste com os layouts Você vem aqui, copie isso. Pronto, você já tem uma pequena resposta e uma pequena conversa acontecendo aqui entre o assistente de IA e o redator do prompt ou o usuário, como você pode chamá-lo. Basta ajustá-lo um pouco mais aqui. Uma coisa, se você notou, houve um momento, na verdade, veja isso. Há um pequeno problema aqui. Este não é um plano de fundo preenchido. Você deseja preencher o plano de fundo aqui. Certifique-se de cobri-lo para que o texto não fique visível sob o campo de entrada de texto, coloque neutro. Eu preciso ser um pouco menos rígido, então não é melhor colocar um pouco de 20 aqui ou nem tanto Podemos colocar isso como 12. Lá vamos nós. Você leu que ela pode realmente adicionar uma borda aqui de 16, a coisa toda, mas apenas na parte superior, então você adiciona 16 lado 16. 16. Na parte inferior, você vê que aqui está um pequeno espaçamento, então basta removê-lo, colocar zero O topo será 16, vamos colocar 16, só para manter a consistência. Agora, quando o usuário precisar visualizar o protótipo, revise o conteúdo Está chegando aqui, protótipo. Então você deseja adicionar aqui Mostrar configurações do protótipo, e é o iPhone P max. Clique aqui, aperte play. Você vê que há um pequeno problema aqui. Isso é rolar inteiramente e não é isso que você quer que aconteça Na sessão de prototipagem, vamos nos aprofundar mais. Mas para que tenhamos um pouco de aderência, você quer fazer o protótipo aqui, este ser consertado, você quer ficar pegajoso em um só lugar. Aí está. Quando você voltar aqui, vai estar lá. Ele ficará pegajoso, a menos que o usuário o remova. Como você pode ver, o topo também está se movendo, não queremos que isso aconteça. Então, vamos vir aqui para o bar, e então vamos praticamente ter uma posição fixa e fixa, e então aqui está Então você tem o bate-papo. Como você também pode ver que há um fundo transparente, não queremos que isso aconteça. O que também vamos fazer é adicionar uma cor de fundo, uma cor de preenchimento. Venha aqui. Em seguida, você adicionará um neutro. Então, você tem um seis neutro, sete neutro. Na verdade, oito neutros. Você quer fazer isso colocando o fundo como o preenchimento superior esquerdo e direito de 20 Apenas certifique-se de que está até o fim. Até aqui. Lembre-se de que não criamos uma APR. Esse problema de não fazer componentes é como se às vezes você tivesse que repetir todo o processo. O legal do Figma é que eles realmente criaram esse novo recurso chamado seleção múltipla Selecione as camadas correspondentes. Selecionar camadas correspondentes é praticamente uma seleção múltipla, as mesmas camadas que são semelhantes. Se você não criou um componente, ele praticamente selecionará tudo o que é semelhante, tem o mesmo nome e coisas assim Você quer vir aqui. Então aí está, você já tem um pouco de Putting acontecendo aqui, vamos reduzir isso para 16, eu acho. Vai ficar ainda melhor, e então você vai alinhá-lo ao topo A) Alinhe tudo isso até o topo. Alinhe isso primeiro com o topo. Isso é demais para verificar ao projetar aplicativos móveis. O que será coberto por esse pequeno empurrão aqui. Está ocupando muito espaço. Se quiser colocar um pouco mais de 24, confira. Ainda estou coberto por um pequeno empurrão. E digamos que, do início, você queira fazer com que , eu não sei, a barra ascendente seja 32. E não está sendo coberto, mas ainda assim você pode aumentar o espaçamento em 40 O que será realmente muito bom fazer é encontrar, provavelmente, nas comunidades, uma área segura. A área segura é a área que as diretrizes da Apple permitem que você mostre o que é a pequena coisa que vai cobrir, então você não precisa projetar além disso. Vamos falar sobre isso no próximo vídeo. Mas para esse contexto específico aqui, quero mostrar como esse bate-papo está começando a tomar forma. Então você tem o lado do usuário, você tem o lado do Avatar, vejo que aqui está um pouco difícil com o texto. Você quer ter certeza de que isso é um ph, não um rótulo padrão. Mude o parágrafo, C já cria um pouco de espaço e fica cada vez melhor de ler, como você pode ver. Aí está. Você tem um pequeno pergaminho acontecendo aqui. O usuário é capaz de ler. No próximo vídeo, faremos o seguinte. Vamos abordar qual é o estado do campo de entrada de texto? Essa pequena coisa aqui, como vai ficar e como vai se comportar quando o usuário estiver digitando alguma coisa Vai ser assim, o estado padrão. O estado de processamento, o estado concluído. Isso é o que vamos abordar no próximo vídeo. Obrigada. É um pouco demorado, mas prometo que, como essas pequenas dicas, são coisas que acontecem com bastante frequência O design perfeito não existe , mas há muitas mudanças que você precisa fazer em qualquer lugar. Vamos encerrar este e nos vemos no próximo. 66. Mãos na UI: melhoria no campo de texto: Tudo bem. Agora que já abordamos isso, notamos que isso tem um pequeno problema aqui no layout em si, porque eles não têm preenchimento na parte inferior Na verdade, isso é tirado de todo o plano de fundo. O que queremos fazer agora é trabalhar nesse e em todo o estado seguinte. Voltaremos aqui nos fundamentos do design da interface do usuário no arquivo Temos os componentes, temos os elementos aqui. Mas observe que ele não contém apenas um estado. Vamos removê-lo desta seção chamada elementos. Nós viemos até aqui. E então criamos uma seção. Arraste-o aqui e, em seguida, vamos colocá-lo dentro da seção do campo de texto. Esta será uma seção específica apenas para abordá-la. O que você vai fazer agora é chamado de campo de texto. Componente de campo de texto porque simplesmente não é um elemento simples, é mais um componente porque contém vários estados. Você pode ver que ele tem o estado padrão. Você tem o estado, como ficará quando você fizer o upload da imagem. Não vamos cobrir isso nem o áudio, mas vamos cobrir pelo menos quando você pressiona enviar. Aqui vamos criar uma variante. Então, o que podemos fazer aqui é primeiro mudar o nome da variante. Entre aqui, clique aqui. Clique aqui. Queremos renomear essa propriedade para estado Você tem o estado padrão, você tem o estado de processamento. Vamos chamar isso de apenas pensar porque o assistente está pensando. O que queremos fazer aqui é garantir que esse ícone aqui seja alterado quando o usuário pressionar. O que vamos fazer aqui é colocar o ícone de parada. OK. Então, queremos alterá-lo para o ícone de parada. Talvez também possamos mudar um pouco aqui no que diz respeito à cor. Portanto, não queremos usá-la como a cor primária, nada disso. Queremos usar talvez um azul. Porque se usarmos vermelho, seria um pouco difícil parar. Isso é um pouco duro demais. OK. Talvez isso seja menos pior, mas acho que talvez usar apenas um azul seja um pouco menos severo para o usuário. Você pode alterá-la para uma secundária como essa cor aqui, cor que usamos. Usamos o azul 400. Talvez experimente o blue 500 e ele esteja combinando um pouco mais com o primário. Uma coisa que eu notei é que, como eu disse, não estamos usando bordas consistentes , isso começa a gerar alguns problemas na interface. Você vê que parece um pouco desajeitado. O que vamos fazer agora é ir da raiz desse botão de componente até esse botão, e vamos mudar a borda de todos eles. Podemos alterá-los manualmente, todos eles para 16, e é assim que vai ficar. No entanto, podemos usá-lo de uma forma mais inteligente. Vamos contornar as variáveis. Variáveis que armazenam valor. Há uma variável, há um valor. A variável é basicamente algo que armazena valor. Pode estar dentro do Figma. É o caso de serem cores, números e coisas diferentes. Vamos ver como as variáveis funcionam. Voltamos aqui para projetar e você tem variáveis locais. Você clica neste pequeno ícone aqui, abra as variáveis. E então você vai começar a editar isso. Você vai criar uma primeira variável. Então você vai colocá-lo como um número. Qual será o número. Você vai chamá-lo de raio. Raio, e você pode atribuir tipos diferentes. Você vai dizer SM primeiro pequeno. Então você vai colocar aqui, o número Vamos ver, oito, você quer usar outro modo, W quer criar uma nova variável aqui para um número também. Eles chamam isso de raio. Na verdade, podemos colocar a LG em grande escala. Você pode até mesmo criar um para raio médio. O que você pode fazer é simplesmente mover isso para cima. Agora você tem o médio e o grande. Na verdade, o pequeno podemos colocar aqui um valor de quatro, o valor médio de oito e o grande o valor de 16 Essa é a maior rádio que teremos dentro do nosso projeto. É isso mesmo. Também podemos começar a adicionar variáveis, criar uma nova coleção. Chamamos essa coleção de dimensionamento. Chamamos essa coleção de dimensionamento. Aí está. O que você vai fazer agora é voltar aqui. Remova isso e coloque em zero. É assim que vai ficar. Agora, a parte interessante é usar o viável. Aqui você está aprendendo muitas coisas diferentes relacionadas a viarables e ao Figma como ferramenta Essas atualizações recentes tornaram nossa vida muito mais fácil. Como eu disse, você já tem todos esses vários itens selecionados, você vai aqui em vez de colocar o número manualmente, você pode usar as variáveis locais criadas. É assim que você faz. Entre aqui e você já tem esses tipos de variáveis Você pode ter pequenos, depois pode ter médios, pois vê que cada coisa começa a mudar. E então você pode dizer que isso é grande. Podemos usá-lo como um grande. Se você decidir que precisa alterar essa variável e quiser torná-la um pouco mais arredondada Isso vai acontecer instantaneamente. Se você disser que essa é uma arável que em vez disso terá 40, isso afetará todo o botão que você está usando aráveis Isso é uma coisa muito legal que o FGMA implementou e você está aprendendo agora Lembre-se de que, se você começar a criar seus componentes, certifique-se de que eles estejam usando essas variáveis Isso vai te levar muito longe. Isso permitirá que você faça um guia de estilo muito escalável e, se você estiver trabalhando em sistemas de design, ainda mais essencial saber como isso funciona Agora, o que vamos fazer é reajustar isso de volta para 16 e aplicar o mesmo aos outros. Você definitivamente deveria fazer isso. Mas agora volte para os componentes e pronto. Você tem um pouco mais, parece mais com nossa interface. O que você vai fazer agora é duplicar essa tela aqui, que são os detalhes do bate-papo, chame-o de bate-papo Em seguida, você o duplica porque se lembra do estado padrão Olha como parece. Você tem isso e nada está acontecendo. Você deseja remover esses dois aqui, convertê-los em componentes posteriormente. Mas você deseja remover o histórico de bate-papo e recentes porque esses são estados diferentes. Esse bate-papo está mais próximo da tela inicial do que é possível. O motivo é que o usuário está no estado padrão, não há nada acontecendo quando o usuário tem um prompt inserido, é isso que vai acontecer. Antes mesmo de eu ir lá, vamos voltar a esse componente, corrigir isso e depois porque falta mais uma coisa. O que vamos fazer agora é ser um pouco mais inteligentes com isso. Queremos ter uma versão apenas do campo de texto porque talvez possamos querer mudar alguma coisa. Então, o que faremos agora é usar isso e ter outro estado em que você aplicará o layout. Qual é o nosso layout, você vai aplicar cerca de 20 aqui. Em seguida, na parte superior e inferior, você deseja se inscrever aqui. 16. Aí está. Em seguida, você aplica uma cor de fundo neutra. Então você escolhe o mais escuro. Aqui, de uma barra, não de um derrame. Neutro. Desça aqui, é a mais escura Aí está, você já tem. Esse não é apenas o campo de texto. Na verdade, essa é a gaveta de aplicativos. A gaveta do aplicativo é essa folha inferior que aparece e pode ser interagida sozinha Nós podemos tê-lo sozinho. Parece ainda um pouco mais elegante. Você pode colocar, você quer aplicar aqui um raio grande, mas você não quer aplicar a tudo Na verdade, vamos remover isso. Nós vamos vir aqui individualmente. Como você pode ver, você pode remover isso, tornar isso zero. Ou, na verdade, você pode até mesmo criar um viável para isso, mas não vamos fazer isso agora Você vê aqui a gaveta do aplicativo ou a planilha inferior, a plataforma a chama Então você tem essa gaveta de aplicativos, planilha de aplicativo ou folha inferior Em seguida, você o converte no campo da folha inferior do componente. Aí está. Então você quer criar uma variação disso. Esse é o padrão e esse é o pensamento. Estado de pensamento. Isso apenas mudará a parte interna do padrão. Você quer mudar isso para isso. Poderíamos realmente ter tido isso , assim como poderíamos já ter tido isso aqui. Mas acho que, por exemplo, estou trabalhando em um projeto de IA agora, chamado ultimate. Nesse caso, o cenário aqui do aplicativo é que você vê como estamos usando e, na verdade, reutilizou o componente que estou ensinando você a criar. Estou literalmente reutilizando isso. Se eu adicionasse a gaveta ou a folha de baixo aqui, ficaria um pouco complicado usá-la Eu apenas escolhi separá-los como individuais, o bate-papo, o campo de texto e o campo inferior da planilha. Dessa forma, quando você voltar aqui para o seu design, que você fará é simplesmente remover o fundo da farsa Você removerá o layout externo. Você não quer usar isso, deixe em zero, remova esse preenchimento aqui, você realmente vai mudar isso e, em vez do campo de texto, você quer usar o componente textual , e aqui está a folha inferior Aí está. Você já tem um layout super sólido. Quando for o caso, você só quer reutilizá-lo novamente. Venha aqui, selecione-o. Você não quer ter nenhum espaçamento entre eles. Você só quer sim. Basta copiar isso. Então você pega esse contêiner, copia, vem aqui, cola, A alinha para baixo, troca um protótipo, conserta, diz que conserta Então você continua constantemente fazendo essa alteração aqui para ter certeza de que está tudo coberto, então basta copiar a folha de baixo, colocá-la aqui, moldura S T, colar, colocar na parte inferior. E você repete esse processo até que todas as telas que estão usando a folha inferior de entrada estejam cobertas. Aí está. Dessa forma, você está limpando toda a interface, fazendo com que pareça o mais limpa possível e também garantindo que ela permaneça o mais consistente possível Quando você vem aqui e faz qualquer alteração relacionada, digamos que, por exemplo, você queira colocar mais um componente aqui. Você quer colocar outro ícone. Esse ícone é , digamos, um gerador de código, então você quer escrever código. Basta colocar o código. Se você quiser que isso seja especificamente para fazer o upload do código existente ou algo parecido, você o fará com facilidade, pois não precisa se preocupar com a escala Então você volta aqui, volta para a instância e ela já está adicionada. Dessa forma, todo lugar que estiver usando um componente poderá usá-lo. Basta voltar aqui, remover esse ícone, você não vai adicionar mais um ícone agora. Aí está. Acho que isso já tem tudo coberto. Você tem esse estado, você tem esse estado. Se quiser duplicar isso, certifique-se de que eles tenham um estado em que o usuário digita como escrever um poema Coloque aqui como escrever um poema. Se isso estiver presente, o que vai acontecer? Na verdade, podemos simplesmente remover isso. Não. Remova isso. Você não quer esse verde aqui. Somos ativos, queremos tê-lo aqui. Isso é duplicado. Este é o chat no estado ting. Converse pensando. Essa resposta aqui ainda não está aqui. Chamaríamos isso de “ venha aqui”, “Avatar Bubble”. Esse é o lado do assistente. Então, podemos fazer aqui se o usuário enviar algo, queremos esconder isso. Nós simplesmente o tornamos invisível. Basta fazer isso aqui. Ou na verdade. Você pode até ter isso visível, mas podemos simplesmente ter isso. Isso é pensar. É pensar, e então vamos mudar essa pequena folha de baixo aqui. Em vez do padrão, você quer pensar nisso. Dessa forma, quando o usuário digita algo , ele entra nesse estado de pensamento. Você vê, está processando. Se o usuário precisar pará-lo, clique nele, ele retornará ao estado padrão. E interrompa o processo de pensar. É isso mesmo. No próximo vídeo, vamos apenas limpar essa interface, montá-la e começar a trabalhar na página de destino. Nos vemos na próxima. OK.