Explorando o design Neumorphic com a Figma: adicionando volume às interfaces

1. Curso e introdução de professores: Olá, sou Kate Liebich e sou designer de experiência do usuário de Frankfurt, Alemanha Hoje, vamos mergulhar no mundo do neumorfismo e descobrir como adicionar vida e morte às Ao longo da minha carreira, desenvolvi todos os tipos de projetos, dos simples aos supercomplexos. Mas acredite em mim, os designs neumórficos podem ser um quebra-cabeça para designers três empolgantes são brincar com a ideia de profundidade em seus designs é como adicionar uma dimensão totalmente nova. Neste curso, estou entusiasmado em mostrar meus truques especiais sobre como criar esse tipo de interface. Vou falar sobre sombras e luz, a dupla dinâmica que faz com que seus designs se destaquem como aquele 3D Também sujaremos nossas mãos. criação de elementos que pareciam artesanais é esculpida usando vários métodos interessantes Além disso, vou compartilhar com vocês uma técnica super legal e única de como escolher uma cor vermelha para os elementos neumórficos e designs neumórficos Eu diria que essa técnica você pode realmente usar no futuro Vamos criar nosso clima criativo e montar algumas telas que mostrarão suas novas habilidades. Ao final deste curso, prometi que você terá a confiança de criar o Neumorphic. Você é E não se esqueça de que o projeto que faremos no final deste curso será a cereja no topo do seu portfólio de design. Estou ansioso para ver você neste curso. neumórficos prontos para usar. Nos vemos lá. 2. Diferentes estilos de UI: Você provavelmente não se lembra da aparência ou da aparência das interfaces Alt. Os elementos que você vê aqui são o primeiro passo em direção ao skeumorfismo Esse corante foi impulsionado por coisas do mundo real como uma explicação de funções novas e desconhecidas, usando uma analogia ou metáfora que metáfora Assim, qualquer um poderia descobrir como um computador funciona. Lembre-se de que o ícone da lixeira no antigo Mac OS ou no ícone do Safari em 2003 era assim É um puro skeumorfismo. Mas o tempo passa rápido. Os usuários têm muito tempo para distinguir um botão de um ícone sem sombras e realces desnecessários E as imagens tridimensionais em particular, desapareceram das interfaces Os smartphones se tornaram a norma e as interfaces sobrecarregadas só incomodam skeumorfismo como estilo fica desatualizado, mas muitas coisas diferentes design plano se tornou popular após o lançamento do iOS 7 e ainda é usado por todos desde estúdios de design até Apple, Google e Microsoft. É considerado o sucessor do skeumorfismo gráfico. Mas a ideia principal do Leginon é oposta. Como hoje em dia, a interface não deve distrair o usuário com textura e volume extras Mas nos anos 2000 e 20, tudo se transformou em algo novo E alternativa. Neomorfismo. Uma combinação de volume e elementos planos. Mas é impossível usá-lo em sua forma pura. Porque então será difícil para o usuário entender o estado dos elementos da interface. As cores têm um tom muito próximo umas das outras. Ele exige muitos espaços em branco nos quais todos os botões permaneçam distinguíveis e compreensíveis Portanto, ele teve um bom desempenho em um aplicativo móvel com um pequeno número de funções. Agora você tem uma compreensão dos estilos de morfismo de interface do usuário. Neste curso, aprenderemos como podemos criar e projetar facilmente esses elementos usando apenas luzes e sombras e como combinar esses elementos com outras partes importantes para usá-los na interface Vamos mergulhar no software Figma e não nas principais ferramentas que usaremos neste 3. Visão geral curta da Figma: Neste vídeo, apresentarei a primeira visão geral do software Figma e da software Figma e da poderosa ferramenta de design usada por profissionais de todo o mundo Pessoalmente, prefiro usar o Figma, pois você pode criar sua conta gratuita e usá-la para suas próprias necessidades E, ao mesmo tempo, você terá todas as ferramentas necessárias para criar interfaces de usuário permanentes. Se você se acostumar com outra ferramenta, pode pular esta lição e ir para a próxima, onde aprenderemos como você pode estruturar aprenderemos como você pode e como construir pedais e luz. Então, basicamente, não importa qual ferramenta você vai usar. O básico é o mesmo. Vamos começar com a visão geral do software. Ao iniciar o Figma, você será recebido com um documento em lata em branco Em seguida, crie um novo documento. Basta clicar no botão de adição no canto superior esquerdo ou usar o atalho de teclado para Windows Control mais M para Mac, comum mais N. Depois de abrir o documento, talvez você queira organizar seu trabalho em seções diferentes O Figma permite que você adicione várias páginas ao seu documento. Para adicionar uma nova página, vá para o painel direito e clique no ícone da página. Você também pode usá-lo. O atalho de teclado para Windows Control plus, mais N para nenhum comum mais N. Agora, vamos mergulhar na criação do seu primeiro quadro Uma moldura representa uma tela ou seção específica do seu design. Para criar um quadro, clique no ícone do quadro na barra de ferramentas esquerda ou use o atalho de teclado F. Basta clicar na área principal e desenhar seu primeiro No lado direito, você pode alterar o tamanho da moldura, se necessário. A Figma oferece uma variedade de ferramentas para ajudá-lo a projetar e criar sua visão Aqui estão alguns desejos essenciais para você começar. Ferramenta de movimentação. Essa ferramenta permite selecionar e mover objetos em sua ferramenta de forma de design. Use essa ferramenta para desenhar formas como retângulos, círculos e polígonos. A ferramenta da caneta. A ferramenta Caneta permite criar formas de trajes e passadas colocando pontos de ancoragem e ajustando suas curvas. Ferramenta de textos. Com uma ferramenta de texto, você pode adicionar um EditText em seus designs Por fim, vamos explorar o painel certo, onde você encontra uma variedade de controles para ajustar seus designs Vamos primeiro desenhar um retângulo. Você pode usar os atalhos de teclado e vamos mudar o tamanho do retângulo no lado direito apenas para experimentar como isso funciona Vamos explorar mais o painel direito. Aqui, sinto as principais características de estar ciente dos alinhamentos. Esses controles ajudam você a alinhar objetos na horizontal e na vertical As restrições permitem definir como os objetos se comportam e respondem quando o design é redimensionado O Figma fornece quatro tipos de restrições. esquerda, direita, superior e inferior Restrição de escala esquerda, direita, superior e inferior e restrição fixa Você pode brincar com eles e ver como funciona. Configurações da camada. Essa seleção permite ajustar as propriedades da camada, como Opacidade, Modos de Mesclagem e Efeitos A Figma fornece uma ferramenta de seleção de cores para escolher e aplicar cores aos elementos do seu design Pode ser um preenchimento ou um traçado, mas veremos isso em detalhes a seguir. E isso é tudo para esta rápida visão geral da Figma. Lembre-se de que isso é apenas a ponta do iceberg. Figma oferece vários recursos poderosos para explorar e permitir que você dê vida às suas ideias de design Na próxima lição, vamos destacar o Painel de Efeitos E confie em mim, isso vai acompanhar Fn. Vamos mergulhar nas configurações de sombra e explorar diferentes configurações. Prepare-se para testemunhar o poder mágico das sombras em suas interfaces, testaremos configurações diferentes e você verá como é mais fácil adicionar um volume aos elementos e às suas interfaces com a sombra elementos e às suas interfaces com a Então, vamos começar. 4. Figma: painel de efeitos das sombras: Nesta lição, vamos nos aprofundar em uma das figmas. Efeitos de sombra. Prepare-se para trazê-lo para seus designs. Usando apenas efeitos de sombra, você pode adicionar um toque de realismo em profundidade aos elementos do seu design Vamos começar e descobrir como aplicar sombras no software Figma Para essa demonstração, vamos usar uma forma de círculo simples como exemplo Podemos encontrá-lo no canto superior esquerdo. Ok, vamos desenhar um pequeno círculo. Para aplicar uma sombra, selecione a forma e navegue até o painel direito. Basta clicar no botão de adição e você encontrará a mágica que estamos procurando na sombra. Agora, vamos explorar as diferentes configurações disponíveis para criar sombras e Figma Ao ajustar essas configurações, você pode liberar sua criatividade e personalizar as sombras para obter o Primeiro, vamos ver as posições X e Y. Essas configurações controlam o posicionamento horizontal e vertical da sombra projetada Você pode criar efeitos exclusivos ajustando os valores de cada eixo Além disso, você pode tentar números negativos, e isso também funcionará na direção oposta. Veja como você pode mover a sombra para direções diferentes ajustando os valores Ele permite que você experimente e crie efeitos dinâmicos. Desfoque. A configuração de desfoque determina a suavidade ou nitidez da sombra. Valores de desfoque mais altos criam uma sombra mais suave e difusa, enquanto salários mais baixos resultam em uma sombra nítida Observe como a sombra fica mais suave ou mais nítida à medida que ajustamos o valor do desfoque Brinque com essa configuração para atingir o nível de efeito desejado. Vamos continuar com a configuração de propagação, que controla o tamanho ou expansão da sombra ao redor da forma. Aumentar o valor de dispersão faz com que a sombra se estenda mais longe das bordas da forma. Veja como a sombra se expande ou contrasta à medida que modificamos esse valor pred. Essa configuração permite que você controle o alcance da Sombra, criando efeitos visuais interessantes, que definitivamente usaremos em nossas próximas aulas. Definitivamente, você pode alterar a cor da sombra, a configuração de cor que lembra a tonalidade da Você pode escolher qualquer cor que complemente seu design ou combine com o ambiente do deserto Explore diferentes cores de sombra para melhorar o clima do seu design. Jogue com vários americanos até encontrar a combinação perfeita. A configuração de opacidade controla a transparência da sombra Valores de opacidade mais altos resultam em uma sombra mais pronunciada e sólida Enquanto valores mais baixos tornam a sombra mais sutil. Ajustar a opacidade pode alterar drasticamente Experimente diferentes níveis para encontrar o equilíbrio perfeito entre permanência e súbita Figma também oferece sombras internas, o que cria um efeito de sombra dentro da forma e não Ele pode ser usado para adicionar um surdo ou simular efeitos de embaixada. Definitivamente vamos usá-lo. A configuração de sombra interna abre uma nova gama de deficiências. Experimente para adicionar o toque e criar profundidade. Mais uma dimensão de recurso existente é que o Figma permite aplicar várias sombras em uma única forma Isso significa que você pode usar e combinar diferentes efeitos de sombra, oferecendo ainda mais controle sobre seus designs. impacto visual, apenas com a sombra, pode trazer diferentes etapas aos elementos da interface do usuário e adicionar algum tipo de animação estática. Por exemplo, para o estado de foco, o botão tem uma sombra menor do que a padrão e dá a sensação de que ele se move e o usuário fisicamente Na próxima lição, mostrarei como aplicar vários sombra e efeitos de luz em um elemento. Este é nosso objetivo criar elementos neumórficos e, em seguida, colocá-los em suas interfaces por meio de seus projetos 5. Sombras e arquitetura leve: Antes de mergulharmos na criação de elementos para a futura interface do usuário, vamos dar uma olhada rápida na arquitetura de luz e sombra em termos simples. Se quisermos fazer com que as coisas pareçam 3D em uma superfície plana, precisamos entender como a luz funciona e para onde as sombras devem ir para que pareçam reais Ao mover o planador, podemos fazer com que as sombras sigam em direções diferentes e fiquem mais escuras Isso nos ajuda a moldar nossos elementos de design e fazer com que pareçam ter volume e forma. Então, vamos imaginar que temos uma fonte de luz. Vou colocar no canto superior esquerdo. Obviamente, quando criaremos a própria interface do usuário, a interface do usuário, não precisamos reproduzir algum tipo de luz, mas pelo menos precisamos imaginar onde ela está para colocar nossas sombras da maneira correta Então, novamente, vou desenhar um círculo. E como você já pode ver aqui, eu adicionei uma sombra. E a sombra desse exemplo em particular deve estar no lado oposto da fonte de luz. E a luz reflete ou o lado luminoso desse elemento está realmente voltado para a luz. Outra dica é que se você colocar alguns objetos mais próximos da luz, poderá ver que a sombra tem uma cor um pouco mais forte. É muito mais forte. E para os elementos que estão um pouco distantes da luz, o prazer se torna menos forte e mais sobrecarregado, como Outra coisa que você também pode ver entre esses dois círculos diferentes. Parece que este é um pouco mais alto. E esse círculo grande tem uma forma mais plana. Também faz parte da Arquitetura da Luz e da Arquitetura das Sombras. Então, como você pode ver aqui, a sombra é muito pequena e sutil. E então sentimos que esse é elemento muito plano e essa sombra é um pouco mais longa e esse círculo se torna mais alto Você também pode encontrá-lo em seu espaço ao redor. Você. Agora, olhe para sua mesa ou para o seu quarto e você verá, e descobrirá que quanto mais altos eles têm, é claro, uma sombra mais longa Outra dica que devemos lembrar quando voltarmos a desenhar interfaces é que todas as nossas sombras devem ser colocadas no mesmo lado para todos os elementos em uma interface O que quero dizer com isso, então imagine se colocarmos essa luz do outro lado, do lado direito. Então, isso significa que todas as nossas sombras aqui também não conheciam esse termo Então, vamos tentar isso. A mesma lógica está aqui. A luz é colocada no canto superior direito. Todos os elementos têm suas sombras no lado oposto. Certifique-se de que todos os elementos tenham sombras no mesmo lado. Caso contrário, você obterá o resultado P38. Quando vamos projetar a interface do usuário e usar nosso normal de elementos que criaremos. Devemos usá-los com cuidado e delicadeza, em toda a interface e também no usuário Então, vamos começar a próxima lição e, finalmente, criar nossos Elementos para as interfaces 6. Criando vários elementos Neumorphic: Nesta lição, começaremos com uma configuração muito simples. Lembre-se de que nosso objetivo é obter algum tipo de efeito de volume. Mas na superfície plana. A primeira coisa que eu gostaria de mostrar é apenas adicionar sombras simples a um elemento Então, vamos voltar para Figma. Mas primeiro vamos criar um círculo. Usaremos a tecla de atalho 0 ou simplesmente encontraremos nosso elemento no canto superior esquerdo Eu aconselharia você a não ter um Shadow muito grande, caso contrário nossas especificações podem funcionar e serão muito pequenas. Vamos escolher um tamanho de 160. E outra coisa importante, você precisa garantir que seu plano de fundo também use uma versão beta de, digamos, cores quentes. Este é o hexadecimal correto e o círculo em si também deve ter a mesma cor que deveria Você verá que parecerá mais realista para alterar a cor de fundo e escolher a prancheta em si. E aqui, altere o campo para o hexadecimal necessário para alterar a cor do círculo também no painel direito Quando o círculo é selecionado, você pode alterar a cor aqui ou simplesmente colocar. Você pode simplesmente selecioná-lo da superfície clicando “Estou no teclado”. Ok, então vamos tentar atingir nosso objetivo e criar o primeiro elemento neumórfico clicando nesse sinal de adição no lado Então, adicionamos a primeira sombra projetada. Você sabe, já parece muito bom. Mas vamos tentar obter um efeito mais realista. Então, vou seguir as especificações já preparadas para esse círculo em particular Vamos dar uma olhada aqui. Existe 20. Por que é quase 20? O parâmetro de sinopse é 14. E espalhe eu não vou usar neste exemplo a cor hexadecimal. Vamos colorir antes de um E 916 Bom. Portanto, nosso elemento já parece muito realista. E como você se lembra do holofote no lado esquerdo, eu ainda o tenho aqui apenas para mostrar e seguir a estrutura que discutimos Agora, vamos adicionar outro efeito que será nossa luz, também o efeito de sombra projetada. Então, clicaremos em Mais no painel direito novamente. E agora vamos usar o colarinho branco para construir. Isso se reflete no lado esquerdo. Ok, então vamos escolher a cor branca, assim como aqui. E a opacidade será de oito por cento. E toda a nossa posição será oposta à posição da própria sombra. Então é menos -20 e -20 novamente, e o ventilador é 16. Bom. Vamos dar uma olhada na aparência. Portanto, este é o nosso primeiro elemento neumórfico que, na verdade, já pode ser usado Mas vamos tentar outras especificações. Isso é um pouco mais sutil. Vamos criar elementos um pouco mais planos. Elementos. Vou copiar o mesmo círculo porque algumas especificações parecem semelhantes e é mais fácil para nós Novamente. Vamos para a seção Efeitos. Mude a sombra projetada para esta parte traseira. Então X é seis por seis sinopse 16. E a cor, como você pode ver, é a mesma. E vamos mudar a opacidade para 17. Vamos dar uma olhada. A luz, o lado da luz, também tem especificações um pouco diferentes. Então, usaremos menos dez ou X menos também, menos dez. Por que mais azul? Ele tem 30 anos. O resto está correto. Cor e opacidade. Nós já mudamos Ok, vamos dar uma olhada. Se você comparar isso com Elementos, você pode ver que isso parece um pouco mais plano e esse círculo um pouco mais fatorial Então, vamos tentar outro exemplo que será um pouco mais complexo em termos de nossas especificações, e precisamos adicionar quatro sombras com configurações diferentes A primeira sombra projetada, com esses parâmetros, é 66160 A cor é a mesma, 70% de sua capacidade. Ok, então precisamos adicionar outra sombra projetada. Você verá a diferença entre esses dois elementos. Que esse círculo seja mais natural, mais complexo, pois teremos mais efeitos no topo. Então, adicionaremos outra sombra com esses parâmetros para quatro a quatro espalhadores usando e as cores Considerando côncavo para cima. Portanto, é 55550 e a opacidade é dez. Ok? E nós o colocaremos, você pode movê-los. Sombras ao redor. Vamos colocá-lo na parte inferior. O efeito da luz é menos dez, menos 1034 desfoque. E o colarinho branco, é claro. E eu vou opacidade, transparência é um T. Vamos adicionar outra luz, reflete E é bem parecido, mas direto. Então é menos menos dez. Menos dez. Então, o desfoque é dez. A cor branca. E eles são passivos. Sim Ok, então temos quatro configurações diferentes para esse elemento. E vamos ver qual é a diferença entre isso e sua diferença muito sutil Mas na interface, você verá que esse elemento parece um pouco mais natural. O neumorfismo consiste em obter um efeito 3D usando sombra Então, os elementos aparecerão ou se inserirão na superfície Vamos começar a próxima lição e aprender sobre elementos convexos e côncavos 7. Elementos côncavos e convexos: Vamos começar com a criação de elementos convexos. As formas contextuais aparecem do plano de fundo quando elas convidam você a tocá-las. Os elementos côncavos têm uma aparência instantânea , como se estivessem curvados na superfície Obviamente, sombras e luz são os principais ingredientes para alcançar esses efeitos Aqui eu criei vários elementos e estilos. E B vai criá-los juntos. Eu já decidi ter um nome para cada estilo desse elemento. E veremos outra opção no Figma, onde você também pode economizar para o futuro para usá-la em qualquer outro elemento Vamos começar com nossos primeiros elementos côncavos e convexos. Um será convexo, alto e afiado, e outro côncavo, profundamente Vou colocá-lo, bater na parte superior e escolheremos outra ferramenta de forma, que será um retângulo Os seios estão no teclado ou simplesmente vão para o lado esquerdo, canto superior E retângulo de pico. O tamanho. Vamos digitar 150 pixels por um quinto. E um ponto importante. Vamos também escolher sua cor de fundo como esta, y1, y1, y1 É uma cor muito clara em quase branco, mas ainda tem uma pequena diferença em relação ao branco. Posso te mostrar, se quiser, coloque um retângulo e deixe-o branco Como você pode ver, é bem diferente. Tem uma cor acinzentada, quente e acinzentada. Ok, então temos nosso retângulo. Vamos também deixar os cantos um pouco mais suaves. Vou colocar aqui umas 32, provavelmente. Sim, isso é bom para criar esses bons elementos suaves. E vamos mergulhar em nossas configurações de FX. E precisaríamos criar duas sombras projetadas e duas sombras internas para obter esse efeito E não se esqueça de escolher a mesma cor do retângulo do nosso plano de fundo Vamos fazer isso juntos. Eu vou fazer isso com eles com esse tom aqui. Ok. Então, vamos criar a primeira sombra projetada. Mais uma vez, clique em mais e no painel de efeitos. E usaremos essas primeiras configurações para obter o efeito de sombra e será nossa sombra externa. Então X é 15. Por que é 15? O desfoque é 35. A opacidade da transparência é 35. E vamos escolher essa cor. Nós o usaremos muito nesta lição. 806-80-6806. Ok, isso já parece bom. Ok, então vamos criar outra sombra projetada, que será nossa luz refletida do lado de fora. Então, em algum lugar no canto superior esquerdo. Então é menos dez. Menos dez é 40 cores, pois esse é o branco mais claro. Apenas fique feliz, ou seis vezes. Leather F. E sua opacidade, como você pode ver, é 70. Bom. Então eu também te aconselho, isso já parece bom. Também aconselho que você dê mais profundidade e selecione nossa forma e adicione efeito, temos que escolher sombra interna em vez de sombra suspensa Tenha cuidado com isso. E vamos colocar cinco porquês. Cinco, desfoque é 40. E a cor, como mencionei, vamos usá-la muito dessa vez. E Duane T é nossa opacidade. Ok, agora tem como se fosse um elemento convexo, mas agora tem um pouco de côncavo Então é como empurrar um pouco no meio. E vamos adicionar também um isqueiro ou efluxo no interior, que também estará Sombra interna com cor branca como nosso efeito de luz. E vamos ver, é menos dez -10,44 de efeito de desfoque e 17%. Ok, agora nós temos isso. Agora. Vamos usar um recurso interessante que a Figma oferece Vamos salvar isso Vamos salvar esse Fx em um único estilo. Vou chamar esse estilo de convexo, alto e afiado, mas você pode chamá-lo como quiser. Então, como fazer isso? Neste painel de efeitos, você pode ver esses quatro pontos. Clicamos aqui e clicamos novamente no sinal positivo, criamos um estilo. Esse é o alcance do nosso estilo. E vou colocar o nome Convex tall sharp e criar esse estilo Veja agora que está aparecendo aqui. E se eu desenhar qualquer outro retângulo, ou vamos desenhar uma elipse em forma de círculo E agora eu vou para o painel de efeitos e vejo meu estilo aqui, aqui, Convex talk sharp, e eu clico nele E já tem todas essas configurações. E, na verdade, isso é muito conveniente. É muito rápido criar mais elementos para suas interfaces, se você quiser salvá-los agora. E hoje vamos criar seis estilos diferentes. Você já pode, nas próximas aulas, usá-las para criar algumas interfaces. Ok, vamos continuar. E temos esse estilo côncavo, profundo e mais nítido que chamamos esse estilo E vamos tentar novamente obter o mesmo efeito que vemos aqui. Novamente, estou desenhando um retângulo que terá um por 150 pixels E teremos novamente cantos arredondados e lisos. Além disso, não se esqueça de escolher a mesma cor do plano de fundo e ir diretamente para os Efeitos. Então, primeiro, Shadow Outside é a nossa cor, que vou usar novamente. E X é 15. Por que é 15? Mais baixo? É 40. Como você pode ver, os parâmetros são muito semelhantes entre si o tempo todo ou apenas em posições diferentes, diferentes, principalmente desfoque e opacidade E então temos realmente um efeito completamente diferente. Ok, então a primeira sombra projetada está pronta. Então, vamos criar reflexos de luz externos. Para isso, precisaríamos novamente de uma sombra suspensa. E para a luz sempre usará a cor certa. X é menos dez. Y é menos dez é 40. E em. Ok, a seguir, usaremos uma sombra interna, sombra interna e oito para a cor X, Y. Para T para Boston Tea and blur é 15. Bom. E a última Sombra Interna vai selecionar a forma deles. A última sombra interna será menos oito. Menos oito. A cor é branca, o nervo é 15 e a opacidade é 60. Ok, Nice. E podemos criar um estilo novamente, mais uma vez, quatro pontos a mais, e eu vou chamá-lo de côncavo, profundamente Novamente, você pode usar sua nomenclatura que seja conveniente para você Crie um estilo. Ok, agora, vamos continuar. E vamos criar esses estilos um pouco mais planos. E eu mergulho diretamente na criação desse elemento. Mais uma vez, vamos novamente desenhar o reto. Não se esqueça de usar shift para criar um quadrado, na verdade não o retângulo E o tamanho é o mesmo, 150, o canto é 30 a essa maioria dos cantos, canto, raio E a cor, você escolhe novamente, a cor de fundo. Na próxima lição, vou falar sobre cores e como criar cores muito legais e bonitas para o seu neomorfismo E eles são mais elementos. Vou te mostrar alguns dos meus segredos como costumo criá-los. Então, vamos mergulhar em nossos estilos. Primeiro. Mais uma vez, Effects. Drop Shadow por 4 h oito. Vou colorir às 6h40 é nossa equipe de política. Ok. Em seguida, diretamente, estamos criando a próxima sombra projetada, que será o fluxo mais claro do lado de fora E o meu de colarinho branco. Dan, dez ou 40,74, Opacidade. O próximo efeito é a sombra interna. Novamente, nossa cor escura e quente é cinco. Por que 5 h 40? 20%. E o último reflexo de luz sombria, é meu e depois menos dez, nem 40 E sim, é claro que a cor é branca e 70% de opacidade. E temos nosso elemento com todos os estilos necessários. Agora, vamos salvá-lo em nossa biblioteca. Novamente, quatro pontos no novo estilo. Álcool em Convex low, Sharpe, e coloque-o em sua biblioteca. Vamos mergulhar diretamente no próximo componente. Ok, criaremos o elemento côncavo 15030 para formar, coordenar, reduzir a cor de fundo e mergulhar nos efeitos Primeira sombra projetada. Este 18. Siga as configurações aqui. Cor. O desfoque é de 30,15% pois eles o passarão para outra sombra projetada O efeito da luz lá fora. Novamente, a cor é branca para nossas luzes, menos dez, -1.030,30% Em seguida, vem a sombra interna. Sombra e a cor para Y é quatro, desfoque é oito e positivo 60 E a última, a luz reflete por dentro. Novamente, é sombra interna, é menos quatro Menos quatro. Cor. Branco. Blur é bebida, chá e opacidade Vamos salvá-lo. Biblioteca de estilos. Então, um comentário: quando você salva isso, os elementos devem ser, é claro, selecionados, precisam ser selecionados. E você estiliza um código côncavo e pouco nítido. E os próximos dois elementos, são um pouco mais suaves Também é bom para algumas interfaces de usuário e você também pode usá-las para suas ideias. Vamos criar o primeiro elemento suave convexo. Novamente, o mesmo tango. Acho que depois de repetir todos esses seis elementos, você aprenderá. E você entenderá o que realmente e como todos esses diferentes parâmetros funcionam juntos para obter um efeito côncavo ou efeito convexo Então, como você pode ver quando você tem sombras mais antigas no lado direito e, como neste exemplo, do lado de fora E são mais fortes do que parece que o elemento é convexo Mas se você colocar uma sombra mais forte no interior, parecerá que esse elemento é côncavo Vamos continuar com nosso próximo estilo. Novamente, um quinto para eles, tamanho 30 a quatro, raio de canto A cor de fundo, e mergulhe primeiro nas configurações do efeito, é nossa sombra projetada, e as configurações serão configurações diferentes de zero bits. Mas acho que o que queremos alcançar é como elementos convexos lisos com algum tipo de formato suave Então zero é zero, Y é quatro, desfoque é 30 e a cor é um pouco diferente É a nossa cor de fundo. Mais uma vez, vamos colocar isso. Próximo elemento. A luz reflete do lado de fora. Novamente. Nós os adicionamos. Editamos a sombra projetada, dez por 54. Por quê? Então? Cor escura e quente, porcentagem barata é positiva. E aprenda 40. Vamos adicionar sombra interna. Se dez ou 15. Por quê? A cor é branca? Laura? 14. E a opacidade na aparência, torne-se na verdade isso também um pouco de vermelho que você pode usar Mas vamos terminar com isso. Vamos adicionar também uma sombra interna para eles. A sombra em si, não a luz e a cor. E a cor deve ser diferente do resto, se for muito profunda o que fizemos menos o desfoque de 2010 é de 20,40% Ok? E como antes, vamos criar um estilo convexo sem problemas Eu ligo e salvo em nossa biblioteca. Ok, então, o último elemento desta lição, novamente, vamos criar o retângulo Mesmo tamanho e mesmo canto, raio 32, mesma cor para eles. Para os Elementos, escolha do plano de fundo e adicione a sombra projetada. Primeiro, 188-30-4806 para a cor e 15 para a e 15 Sombra é menos quatro, X menos Y. Blurb e 34 Pasiphae, a cor é branca em nossa Blurb e 34 Pasiphae, sombra. 88 é cor suja. E 40 formas de Bassett. E a última sombra interior. Então é menos quatro X menos Y. Quatro tuplas de desfoque, 60, E terminamos com o último elemento desta lição. Agora vamos salvá-lo em nossos estilos. Vou chamá-lo de côncavo liso para usá-lo nas próximas lições Então, agora aprendemos como manipular com todos os seus efeitos para criar estilos diferentes para elementos côncavos e convexos com profundidades diferentes e também como efeitos suaves e também como efeitos suaves E na próxima lição, vou falar sobre cores. Isso é muito importante. Nos vemos na próxima lição. 8. Escolhendo a cor certa: Escolher a cor certa para seus elementos e formas é crucial para obter uma interface neumórfica impressionante Seguindo algumas regras simples, você pode criar uma experiência visual que pareça quente, fria ou algo intermediário Nesta lição, eu queria compartilhar com vocês uma técnica única, como você pode realmente criar a cor do zero. Eu sei que para alguns designers, às vezes pode ser muito difícil encontrar a cor certa. Então, vamos começar imediatamente. Mas primeiro vamos falar sobre carros quentes e frios. Entender a diferença entre eles ajudará você a criar o Modo Deserto em seus designs neumórficos. As cores quentes evocam uma sensação de aspereza, As cores quentes evocam uma sensação de energia e vibração Enquanto as cores frias trazem uma sensação de calma e arrogância Lembre-se de que, quando se trata de identificar carros quentes e frios, pense no verde azulado como um resfriado E vermelhos, laranjas e vermelhos, amarelos tão quentes. Vamos continuar na interface Figma. E eu já preparei duas pranchetas para nossa próxima aula, a exploração de cores Se quiser fazer o mesmo, vá para o lado esquerdo da Interface, encontre o menu Selecionar quadro e desenhe qualquer tamanho de moldura de sua preferência. Agora, vamos começar escolhendo a paleta de cores. Escolher a cor certa é crucial para qualquer interface de usuário. Precisamos considerar a superfície, o elemento em si e a sombra. Para a iluminação, geralmente é melhor usar apenas uma gola branca, que é seis vezes F em hexadecimal Para evitar dificultar, mostrarei uma técnica para selecionar a cor certa para sua interface. Primeiro, vou desenhar um retângulo. Você pode usar a tecla R para criar uma. O tamanho não importa para esta lição, pois estamos nos concentrando apenas nas cores. A cor do retângulo não importa, seja vermelho, verde ou azul Você pode escolher qualquer pessoa no seletor de cores, colocar a mancha em algum lugar na proporção áurea O que isso significa? O lado direito, mas cerca de um terço do comprimento da linha a partir da direita. Não é necessariamente, mas funciona melhor para cores mais suaves e calmas, eu diria E você verá o porquê. Além disso, vamos definir a transparência da cor. Para fazer isso, diminua um pouco e defina para cinco por cento. Pressione Enter para aplicar a cor. Agora, desenhe outro retângulo que cubra o anterior um pouco desse jeito A cor desse retângulo deve ser simples, cinza escuro com transparência também definida como 5% Então, estamos misturando duas cores para encontrar a cor que estamos procurando, que será nossa cor principal. Fornecendo a interface. Chame isso, ou caloroso, nesse caso, de mais frio, eu diria humor A cor acinzentada ajuda a aprofundar muito o tom. Agora, para descobrir o valor hexadecimal dessa cor, desenhe outro retângulo, em algum lugar E pressione I no teclado, ou use o seletor de cores e selecione a cor vermelha, as bolas das cores se sobrepõem ao retângulo anterior Essa será a nossa cor principal para os futuros Elementos Neumórficos E eu vou te mostrar o que fazer para visitar mais tarde. Agora, vamos criar mais algumas cores. Coloque outro retângulo em algum lugar aqui. Selecione nosso primeiro. Crie esse retângulo e mova essa seleção para qualquer cor de sua preferência Você notará que a cor do primeiro retângulo muda de tom um pouco mais quente ou mais frio Vamos usar uma cor mais quente desta vez. Novamente. Use o icky no teclado para selecionar o hexadecimal das cores sobrepostas Vamos fazer novamente o mesmo exercício e criar outro retângulo para copiar rapidamente o retângulo Pressione Alt enquanto o seleciona e move. Agora temos três cores que podemos usar em nossa interface neumórfica Em seguida, vamos selecionar a cor certa para sombras. E eu vou te mostrar uma técnica chamada para isso. Crie uma moldura onde trabalharemos com sombras e estilos Use o seletor de cores. Novamente, pressione I no teclado e selecione a primeira cor que criamos. Agora, recentemente , vamos usar os efeitos da lição anterior e adicionar cores a eles. Para fazer isso, acesse o painel de efeitos no lado direito. E você deve ver todos os seus estilos aqui. Se você não os vê, verifique se está trabalhando no mesmo arquivo Figma, que estávamos trabalhando na lição anterior Como você pode usar esses estilos que criamos e, eventualmente, no futuro, transformá-los no sistema de design. Criamos outro retângulo e escolhemos um estilo que você usava anteriormente Para este retângulo é selecionado Convexo, baixo Sharpe se for o nome, se você seguir a convenção de nomes da lição anterior No entanto, as cores do plano de fundo e do elemento não combinam bem. Para corrigir isso, vamos primeiro tornar o retângulo um pouco mais suave com 32 pixels do raio do canto Separará esse estilo para alterar as cores da sombra e da superfície Clique no pequeno botão atrás dos estilos nomeados para fazer isso. Agora, podemos ver todo o nosso criador eliminando sombras e sombras internas da lição anterior para esse estilo específico Forre todos os elementos com o plano de fundo selecionando seu elemento e usando o seletor de cores e escolhendo uma cor da superfície do fundo Já parece muito melhor. No entanto, do meu ponto de vista, as tonalidades e outras cores não combinam muito umas com as outras. Então, vamos fazer com que se destaque um pouco mais. Como podemos conseguir isso? Bem, essa é a cor que criamos na prancheta anterior Vamos criar outro retângulo. Basta escolher o carro certo, selecione a cor de fundo e abra o seletor de cores. Agora, vamos localizar onde essa cor está situada na paleta de cores Parece ser de cor magenta azulada. Para escolher uma sombra para isso. Preferimos algo semelhante no tom, mas mais em um tom acinzentado, sujo e mais escuro. É claro. Vamos colocá-lo em algum lugar no meio desse espaço, dividido em três partes e ajustar a opacidade para cerca de 80% Ótimo. Agora precisamos escolher a cor em si, como fizemos na prancheta anterior Crie outro retângulo, selecione essa cor e podemos remover a anterior Vê que não tem nenhuma opacidade. Clique na cor hexadecimal para copiá-la. Selecione sua forma e vá até o painel Efeitos. Vamos dar uma olhada na sombra do fundo. Precisamos mudá-la para a cor que acabamos de criar. Basta colar o valor hexadecimal aqui. A parte da luz permanece enquanto, então não precisamos tocá-la. Agora, a sombra interna, novamente, substituímos pela cor que acabamos de criar. Basta copiar e colar o hexadecimal. Agora, vamos eliminar nosso elemento. Parece muito bom, perfeito. Você pode usar as estrelas criadas e simplesmente mudar a cor dos elementos e sua sombra. É claro. Você também pode brincar com as cores no seletor de cores, se preferir, uma abordagem mais intuitiva Costumo fazer isso sem técnicas específicas, mas às vezes ajuda usar o método. Eu só te mostro quando algo não parece certo. Ok, vamos recapitular. Pode ter parecido várias etapas, mas depois de entender o processo, ele se torna fácil e rápido. Então, vamos repetir algumas vezes e você se acostumará e se familiarizará com isso. Vamos criar outra prancheta. Selecione a moldura e desenhe outra forma. Vou escolher uma cor que criamos anteriormente. O segundo, um pouco mais quente, eu diria. Novamente, vamos encontrar a sombra para isso. Primeiro. Torne a forma um pouco mais lisa com sódio para escolher o raio dos cantos do molho, como o anterior Selecione um dos estilos. Vou escolher um Convexo Elements. Você pode ver que não parece bom. Os carros acinzentados parecem estar sujos. Vamos repetir o processo. Primeiro, selecione a cor do elemento no plano de fundo, pressione I e clique em qualquer lugar no plano de fundo. Agora, vamos tentar criar a cor da sombra. Selecione o retângulo, escolha um ponto na paleta de cores onde a cor está situada e mova-o para algum lugar no meio desse Mas agora aumente a cor da sombra. Lembre-se de que isso ficará muito claro, então precisamos ajustá-lo um pouco, criar outro retângulo e selecionar a cor que criamos sem transparência E escolhê-lo é nosso próprio Hex. Selecione isso, pressione Comando C ou Controle C no Windows para copiar o hexadecimal Agora, volte para nossa paleta de estilos ou menu de estilo e altere as sombras Existem quatro estilos. A primeira sombra, então passamos a cor selecionada aqui. Então, a luz branca permanece inalterada. E precisamos mudar a sombra interna também para a cor criada. Vamos dar uma olhada em nosso elemento. Parece muito legal. É assim que você pode usar cores diferentes para a interface. Como prometi, vamos tentar uma sombra mais brilhante. Novamente. Selecione uma cor que criamos na prancheta anterior. O último, o terceiro, é um pouco esverdeado. Prepare o raio do canto para obter uma forma mais suave E vá para o painel de efeitos. Selecione outro estilo, separe-o e não se esqueça de selecionar a cor do elemento no plano de fundo Vulcanizado, mas ainda um pouco sujo. Vamos criar a cor certa da sombra. Selecione um retângulo e amplie a cor do plano de fundo para encontrar seu grupo de cores Como fizemos nas duas anteriores, pranchetas. Mova-o para o fundo. E como eu disse, vamos torná-lo um pouco mais claro. Para fazer isso, empurre nosso ponto um pouco para a direita e talvez em algum lugar no meio ou até um pouco mais alto. Vamos ver como fica. Além disso, usar transparência pode ter uma cor mais profunda. Você se lembra disso? Ok. Agora selecione essa cor sem transparência, como fizemos anteriormente. Duas vezes. Use a ferramenta conta-gotas Essa é a nossa cor alvo. Copie o hexadecimal desse elemento e cole a cor na sombra interna e na sombra projetada de nossos elementos Parece muito legal. Agora, você pode criar suas próprias cores e elementos para a interface. Como você pode ver, isso dá um efeito super agradável e dá a sensação elegante e única da interface. Estamos quase no final do nosso curso. Mas vamos ao lado negro do número de elementos. Sim, você está certo. Na próxima flexão, vamos fazer um modo escuro. Vamos começar. 9. Modo escuro: Decidi acrescentar esta lição porque acho que o estado atual do mundo é muito importante. Como neste vídeo, converteremos todas as estatísticas e elementos que criamos nas lições anteriores no modo escuro ou em equipes. A maioria das implementações atuais dos aplicativos móveis ou da web exigia uma simples alternância entre o modo claro e escuro e, claro, também para interfaces neumórficas Então, vamos tentar criar elementos para o modo escuro. Posso dizer desde o início que não será difícil porque vamos usar os mesmos estilos que já criamos e que já usamos nas lições anteriores. Nós apenas ajustamos a cor de fundo, ajustamos a cor do elemento. E, na verdade, isso é tudo. Claro, as equipes sombrias. Eles são um pouco específicos, especialmente no campo e no design de skeuomorfismo, porque é mais difícil tornar todos esses elementos mais volumosos, pois tudo é silencioso, escuro e quase invisível e o texto contrasta muito com os fundos Portanto, mesmo que usemos o Design Neumórfico para as equipes escuras, devemos ter muito cuidado Em primeiro lugar, porque a sombra em si, só podemos escolher uma cor preta para isso. Caso contrário, não será visível, pois não será capaz de fornecer esse efeito de volume ou criar o efeito de volume para os elementos. Como você pode ver nesses exemplos, toda a cor de fundo e a cor principal. É meio escuro, mas não é preto nem preto puro. Assim, você pode ver as sombras e o elemento realmente surgirem delas. Superfície. Ok, então vamos voltar aos nossos estilos criados anteriormente e mudá-los rapidamente para o modo escuro. Antes de tudo, selecionarei o primeiro elemento. É um quadrado de 150 por 150 pixels com esse raio coordenado de 32 pixels E todos eles são iguais. Então, selecione o primeiro elemento, o toque, o estilo a partir disso. E agora vamos trabalhar com todas essas sombras projetadas e sombras internas Vamos selecionar nosso para alterar a cor de fundo. Como vamos fazer o tema sombrio. Selecione nossa prancheta, vá para o painel direito. Veja esses componentes de combustível selecionados e escolha uma cor da paleta em algum lugar na parte inferior, no escuro, na área escura Mas é claro que nem os muito pretos, como já expliquei de outra forma, estão todos de pé, não serão visíveis. Vamos fazer algumas cores bem frias, algo assim. Então, como você pode ver , está meio na parte inferior e está bem escuro Mas ainda podemos distinguir a tonalidade da cor. Então. Efeito peixinho dourado. E é claro que precisamos copiar a cor selecionada, pois a usaremos também para o próprio elemento Como você lembra das lições anteriores, a cor do elemento e a cor da superfície devem ser as mesmas. Ou podemos fazer isso também apenas selecionando o elemento. E pressionando, abri Color, Color Picker e escolhi a cor da superfície. Ok? Agora, como você pode ver, todo o nosso estilo das lições anteriores continua o mesmo e não é o que queremos, não está nos ajudando a fazer com que esse elemento pareça Volume Nós, parece com Volume. Ok, vá para o painel direito do efeito. Vamos ver qual é a primeira sombra de Schulz. Então, vamos tornar isso super simples. A sombra projetada deve estar super escura para que possamos vê-la. Então, podemos selecionar uma cor muito preta, que é basicamente seis vezes zero. E a opacidade deve ser de 100%. Então, basicamente, não há, não há positivo e a cor é pura. O próximo é o colarinho branco. Lembre-se das lições anteriores, era nosso efeito de luz ou era basicamente o reflexo da luz. Aqui. Não precisamos disso tão forte. E eu aconselho você a reduzi-lo para adicionar 10% de opacidade Em seguida, sombra interna. Novamente, essa é a nossa sombra, mas dentro do elemento, novamente, vamos escolher cores sempre escuras e 100% de opacidade E a próxima sombra interna, novamente, era branca. Vamos fazer com que seja apenas dez por cento de Boston. Veja nossos elementos. Eu diria que está concluído e podemos usá-lo na interface. E vamos fazer o mesmo com todos os outros elementos. A primeira sombra é 100% preta pura. A próxima é branca. Então, são apenas dez por cento. A sombra interna, novamente, deve estar muito escura e 100% sem transparência. E a cor branca, novamente, é bronzeada. E é claro que esquecemos de escolher uma cor da superfície. Eu farei o mesmo com outros elementos. E o último, estilo. Escolha uma cor preta. 100%, colarinho branco, 10%, novamente, gola preta e branca pura Eu tinha dez por cento. Gostaria de chamar isso de 10%. Escolha uma superfície. Então, agora temos nossos elementos e vamos tentar mudar. E então Dark Team, a cor dessa equipe. Como aqui, como você pode ver, existem vários carros e parece ser diferente. Vamos usar algumas cores quentes para o fundo. Novamente, selecione Prancheta. E vamos escolher uma cor como essa. Você pode usar minha seleção. Basta copiar o hexadecimal daqui. E o que vamos fazer? Você me diz que selecionamos todos os nossos elementos e escolhemos uma cor da superfície. E isso é tudo. E em um segundo, vamos mergulhar em nossa última lição sobre este curso. Parabéns. Vamos usar todos os estilos e elementos do create a para finalmente criar uma interface de usuário 10. Criando interface móvel Neumorphic: Esta é nossa última lição neste curso, e estou muito empolgada em finalmente criar uma interface. Junto com você, aprendemos a usar o software Figma para criar formas simples e adicionar luzes e sombras a elas, criar estilos reutilizáveis e encontrar cores complexas para as Nesta lição, criaremos duas telas simples para o aplicativo móvel. Como você provavelmente se lembra, eu aconselho o uso de normas muito sutis de elementos para não sobrecarregar a interface Se você der uma olhada no triple ou Pinterest e pesquisar por Neumorphic do is, provavelmente notará que a maioria dos bons exemplos usaremos apenas uma pequena quantidade O resto serão componentes funcionais e planos que proporcionam ao usuário uma sensação de equilíbrio. Esse é um exemplo que vamos criar nesta lição. Eu preparei esse design com antecedência e três alcançarão o mesmo resultado, mas juntos Siga-me na Figma. Vamos criar uma moldura, mas vamos fazer isso de forma um pouco diferente. Selecione os dois quadros. E no lado direito você verá todos os tamanhos diferentes. Você gosta de sua interface móvel ou interface web. Vou escolher o tamanho do iPhone. E, claro, não se esqueça todos os elementos que você criou antes e de todos os estilos. Definitivamente, vamos usá-los agora. Ok, então podemos começar do início com o pequeno menu na parte superior do canto deles. Interface. Não é um. Para fazer isso, vou escolher um retângulo e desenhar linhas de árvore simples Sim, podemos atribuir cores para eles. Vamos escolher um mais escuro. E vamos fazer o título da página, pois nossa interface tratará de agendar um evento para o usuário Vamos fazer um aviso amigável e uma interface amigável. Se você quiser criar um texto e uma interface, basta escolher os dutos no canto superior esquerdo da caneta. E podemos selecionar o estilo da fonte. Eu recomendaria que essa interface selecionasse um novo estilo de xerife Ou apenas me siga. Escolha essa fonte. Eu gosto muito disso. Vamos adicionar algum espaço entre as linhas. Eu também quero adicionar uma pequena linha. A parte inferior geralmente pode encontrá-la nos iPhones chamados informalmente de barra inicial Mas isso dá uma visão mais realista e próxima deles. Interface real e real. O próximo elemento em nossa interface será o calendário. Isso é muito mais fácil de criar. Basta colocar uma ferramenta de texto novamente, colocar algum número, eu seleciono a fonte Roboto para fazer um pouco de contraste. Eles. Cabeçalho principal. Mude o tamanho para ficar menor. E o que fazer, precisamos colocar basicamente 77 números em uma linha e depois copiá-los em funções semelhantes e jogá-los juntos. Eu aconselho você a ter um número e colocá-lo em algum tipo de quadrado para que seja mais fácil ajustá-lo e uniformizar todo o calendário. Eu senti que minha adaptação não estava certa para mim. Tão rápido, sim. Reorganize um pouco o espaçamento entre os números e basta copiar colar basicamente todas as linhas juntas Agora podemos selecionar todos os números juntos, movê-los e ajustá-los um pouco ao tamanho que realmente precisamos. Quase pronto. Vamos remover alguns números desde o início, porque geralmente não é o monstro, nem o de um dia. E coloque todos os novos números dos meses. Seria um trabalho árduo e repetitivo, mas eu não sabia dessa forma como você pode fazer isso de forma diferente E precisamos que, nos finais de semana, mude a cor para um pouco mais clara para mostrar isso ao usuário E alguns pequenos ajustes. Veja como ficam juntos. Outros elementos. Também quero colocar a barra superior do iPhone para criar mais elementos para a interface. Ferramenta. Vazio. Um pouco, ajuste a composição. E, finalmente, podemos usar nossos elementos que preparamos antes e aprenderemos como criar. Obviamente, você pode criar seus estilos para esse design. Mas eu aconselharia usar o que já ajustamos um pouco o canto do raio para 16 e o tamanho também do botão Com um dispositivo móvel, geralmente, é melhor ter botões mais de 50 pixels de altura. Caso contrário, é Hopi muito pequeno para o dedo deles. Basta usar texto para adicionar um ícone ao botão. E vamos criar rapidamente outro ícone, que será uma lupa mais Pesquisa Parece bom. Eu também acrescentaria mais atenção e elementos a esses eventos já criados ou selecionaram o dia do calendário para hoje, por exemplo. Um pouco mais de excelência. E para fornecer cores. Parece que terminamos com a primeira tela, mas você quer criar outra para ajudar no evento Então, basicamente, quando o usuário ajusta o botão de adição, o feixe haverá outra queda de tela para o usuário Agora, olhem juntos para as telas da tigela. Acho que os botões poderiam ser um pouco maiores. Nossos elementos, e vamos alterá-los para 65 pixels. Para a segunda tela, vamos remover a dobra da maneira que for necessária. E como vai aparecer um pouco, o fundo deve estar escuro E então o pop-up em si aparece de cima E para esse pop-up, usaremos o mesmo seletor de calendário porque você cria o novo evento no Flow e precisa selecionar uma data Para qual data você vai estar. Até mesmo. Mude o título. E, claro, vamos usar outro elemento que você cria, um depósito e alcança, é apresentar o TextField Mas primeiro vamos ajustar alguns itens no seletor de cores rapidamente. Eu aconselharia selecionar um deles. Elemento côncavo. Esse elemento representará um campo de texto, ou melhor ainda, uma área de texto, onde o usuário adicionará sua descrição para o evento. Mude a cor, é claro, do elemento, escolha a cor do fundo. E vejo, do meu ponto de vista, algumas de suas sombras podem ser um pouco É claro que precisamos ajustar também o raio do canto. E vou anexar o estilo e os pequenos detalhes à opacidade de suas formas. Então, não será tão forte. Como nossa interface. Muito leve e simples. Obviamente, o usuário precisa fechar esse pop-up de alguma forma , então precisamos colocar mais alguns botões. Provavelmente cancele e então ele pode escolher ou rosnar o pop-up ou realmente adicionar este evento Não contabilize. Outro pequeno e último elemento que eu gostaria de adicionar a essa interface é o pequeno texto de ajuda dentro da área de texto. Assim, o usuário entenderá que ele pode realmente digitar dentro dessa forma dentro do quadrado. E terminamos a última lição. Mostrei um exemplo da interface usando um braço de elementos. Provavelmente foi um pouco rápido, mas meu principal objetivo era mostrar a você e lhe dar algum tipo de orientação em vez de simplesmente desistir, se encontrar. Para criar exatamente a mesma interface, você pode usar essas ideias ou a sensação da composição do equilíbrio para alcançar suas ideias, você pode tentar isso sozinho e simplesmente criar uma interface semelhante ou mesmo completamente diferente. Na última parte deste curso, vou explicar a tarefa que você pode realizar sozinho. E então, fico feliz em revisar seus resultados e dar uma sugestão em todas as direções sobre como melhorar 11. Projeto do curso: Parabéns, terminamos nosso curso. Sua tarefa é criar uma ou duas telas para uma calculadora básica usando estilos neumórficos Obviamente, você pode usar elementos que fizemos juntos ou criar seus próprios usando todas as técnicas aprendemos durante este curso Eu encorajo você a usar todos os princípios do neomorfismo para criar Lembre-se de que, no final, essas interfaces serão usadas por pessoas. Depois de concluir seus projetos, você pode compartilhá-los comigo no fórum do curso. E estou mais do que feliz em comentar ou ajudar você a melhorar. Mal posso esperar para ver o que você vai descobrir. Não tenha medo de ser criativo e financiá-lo. Sinta-se à vontade para experimentar e lembrar que a prática leva à perfeição. Obrigado por fazer parte dessa incrível experiência de aprendizado. E estou feliz em ver você nos meus próximos cursos. Por favor, verifique meu perfil. Eu também tenho outro curso chamado composição. Se você quiser praticar mais e encontrar mais inspiração no mundo ao seu redor para desenvolver suas habilidades em termos de layout e composição. Então dê uma olhada e até mais tarde. Te vejo. Tchau tchau.