Aprenda o design de aplicativos para celular no Figma: use o projeto

1. Boas-vindas ao curso!: Olá, eu sou Chris. E neste curso, vou ensinar tudo o que você precisa saber sobre como criar lacunas no Figma. Figma é um programa de design gratuito e vou ensinar tudo o que você precisa saber sobre ele do zero sem qualquer experiência ou conhecimento prévio. Então, o que vou fazer é mostrar a você como criar belos aplicativos para Android e iOS. Número dois, vou mostrar como criar um protótipo deles, o que significa que vamos torná-los interativos. Parecerão que já foram codificados. E três, os princípios que fazem com que qualquer design de aplicativo tenha uma ótima aparência. Agora, essas três partes são absolutamente enormes, mas vou dividi-las em conceitos fáceis de entender. Você pode usar imediatamente, o que você precisa é do Figma e de qualquer desktop ou laptop. É isso mesmo. Nada mais. Deixe-me contar algumas coisas sobre mim. Sou instrutor certificado pela Adobe. Isso significa que sou um ótimo professor, mas um diploma não é nada sem experiência prática, sem habilidades práticas. Para esse fim, fui o fundador de uma empresa de design AB de muito sucesso 2013-2018. Eu tinha uma equipe de cerca de 25 pessoas. O design deste Coders Desk faz os gerentes de produto sejam igualmente incríveis. E conseguimos obter mais de 200 milhões de downloads em nosso portfólio. Então isso significa que tenho experiência prática e tudo o que você está prestes a ouvir com os pés no chão. São técnicas e princípios que você pode usar imediatamente. Não nos concentramos na teoria do embarque apenas em coisas que você pode aplicar em seus próprios projetos e ganhar dinheiro. E confie em mim, os projetos de design da AB pagam muito bem. Pela minha experiência, um designer de aplicativos ganha pelo menos três vezes mais do que um web designer. E isso porque as empresas que precisam de aplicativos geralmente têm um orçamento muito grande. O mínimo absoluto de $20.000 por projeto. Agora que há muito mais a dizer. Mas, em resumo, esse é um campo muito lucrativo. E você não precisa saber programar. Essa é a melhor coisa sobre isso. Você pode depositar e depois passar para o próximo projeto. Agora, crianças, o que eu quero de vocês, eu quero que vocês se comprometam, certo? Quero que você trabalhe comigo, pense comigo, faça perguntas, faça os exercícios e se envolva com a comunidade de estudantes que são como você. Por favor, não duvide de si mesmo. Perdoe quando você errar , porque você vai errar. Às vezes vai ser difícil, mas continue. Dê o seu melhor e não desista das poucas vezes em que você será derrubado. Se você continuar, acabará por chegar lá. Eu tenho um ditado que diz: trabalhe duro, trabalhe forma inteligente, trabalhe por tempo suficiente e os resultados virão. Essa é minha única promessa para você. E com isso, vamos começar. Espero que você possa ficar comigo até o fim e que possamos construir algo incrível. Por enquanto, abra o Google, pesquise Figma, crie uma conta gratuita, totalmente gratuita e faça o download. Não vou abordar essas etapas porque é como se inscrever no Gmail fosse muito simples. Acabamos de inserir seu e-mail, sua senha e pronto. Então baixe o Figma, instale-o e pronto. Te vejo na próxima aula. Muito obrigada. 2. Crie sua primeira tela de aplicativos: Bem-vindo de volta. Vamos começar. Abra o Figma. Você deveria tê-lo instalado. Mas se você não pausar o vídeo, acesse a pesquisa do Google ou Figma e instale-o no seu computador. Quando estiver pronto, inicie o aplicativo para desktop. Assim, não vamos funcionar em nosso navegador, mesmo que ele funcione em outro navegador, vamos continuar com o programa. Ok, é assim que parece. E vamos procurar o arquivo de importação. Isso é o que estamos procurando. Você tem esse projeto anexado ao curso. Agora, o problema é o seguinte. Nosso trabalho é criar esse verde para um dos meus aplicativos. E podemos nos inspirar nessa captura de tela. Este é realmente um projeto real. Então, mesmo que pareça simples, vai te ensinar muito. Por favor, assista a este vídeo duas vezes. Uma vez só para entender o que está acontecendo. E então, na segunda vez, você pode trabalhar comigo fazendo pausa sempre que precisar. Repita. Por favor, não tente concordar em sua primeira visualização. Isso se aplica a todo o curso. Ok, vamos entender. Isso é chamado de quadro e tudo dentro do quadro forma uma tela, uma única tela. No momento, só temos uma coisa logotipo do aplicativo, o atlas do teclado. A primeira coisa que vamos fazer é enviar o vermelho, clique nele para selecioná-lo. Ou a segunda coisa que você pode fazer é clicar e arrastar uma caixa e tudo dentro dessa caixa será selecionado. Agora, novamente, agora podemos usar esse comando para alinhá-lo no centro da tela, desse jeito. Coisas incríveis. Em seguida, preciso de algo que funcione como pano de fundo. Então, vamos pegar essa ferramenta, a ferramenta de elipse, a tecla de atalho é 0. 0 para os lábios não faz muito sentido, mas tudo bem. É o ícone do círculo no canto superior esquerdo da tela. Normalmente, você verá a ferramenta de retângulo, mas pode pressionar 0 e obtê-la diretamente. Ou você pode usar essa seta aqui para mostrar todas as ferramentas. Precisamos diminuir um pouco o zoom. Então, vamos fazer isso. Segure a tecla de controle, que é a tecla Command no Mac, e depois use a rolagem do mouse. É assim que você aumenta ou diminui o zoom. Reserve um momento para se familiarizar com esse conceito. Então, novamente, segure Control e, em seguida, role. A propósito, quando você aumenta o zoom, o Figma vai focar você no mouse. Então, se você movê-lo para o lado direito, é aí que você vai ampliar. Basicamente, vai seguir o mouse, movê-lo para a esquerda. A mesma coisa. Agora, com a Ferramenta Ellipse selecionada, vamos desenhar uma forma parecida com esta. Agora, novamente, agora observe que o logotipo desapareceu e é porque estamos nos escondendo, pegue o fixador, vá para o painel Camadas no lado esquerdo e você encontrará a camada que é chamada de elipse. Um. Clique e arraste-o abaixo do logotipo. Se seus lábios forem muito grandes, mãe pode colocá-los atrás da tela. O fixo que simplesmente o move para frente e para trás sobre a moldura. Se você não conseguir gerenciar, basta fazer uma elipse menor. Ok, de volta ao Atlas. Mude a cor de cinza para praticamente qualquer outra coisa. Para isso, teremos que clicar nesta caixa ao lado de Phil, abriremos esse pop-up e você poderá escolher praticamente qualquer cor. Estou procurando algo brilhante, saturado, uma cor muito moderna, talvez um roxo de algum tipo, algo assim. Agora, novamente, estou feliz com isso. Agora, novamente, teremos que centralizá-lo. Então, vamos usar exatamente o mesmo comando aqui. Se você mantiver o mouse sobre ele, verá que diz Align Horizontal Center. Incrível. Ok, agora vamos segurar o controle e ampliar um pouco mais para que possamos ver melhor no que estamos trabalhando. O logotipo preto realmente não funciona muito bem. Então, vamos mudar para a ferramenta de movimentação. A tecla de atalho é V, mas você pode clicar aqui e mover V. Novamente, isso realmente não faz muito sentido, mas certifique-se de selecioná-la. Ok, agora, pegue o logotipo clicando nele e, em seguida, vamos torná-lo branco. Acredite ou não, isso é um bom progresso. Para alguns. Pode ser difícil para alguns , pode parecer super simples, mas vamos continuar. Próximo. Eu queria adicionar algum tipo de gráfico, mas vamos levantar o logotipo, só a cama. Enquanto estiver na ferramenta de movimentação, clique nela para selecioná-la e arraste-a cima, desde que você não solte o clique do mouse, você verá que uma mãe falsa ajudará a mantê-la centrada. Isso é o que essa linha vermelha mostra para você. Figma está realmente nos ajudando. Ok, agora eu quero adicionar a captura de tela, mas primeiro, vamos adicionar um retângulo que nos ajudará bastante. A ferramenta retangular, e você pode pressionar R. Onde estão? Finalmente significa retângulo. Clique e arraste um para fora. Não há um tamanho certo em mente, apenas algo bastante amplo e relativamente curto. Ok, sempre podemos ajustar isso, se necessário. Como sempre, por favor, centre-se exatamente no mesmo comando. Essa é uma etapa importante em praticamente qualquer projeto de design. Em seguida, dentro da sua pasta de recursos, você terá alguns designs para escolher. Tudo isso é feito pela minha equipe. A propósito, vamos colocar um deles dentro desse retângulo. Então, aqui está como isso vai acontecer. Clique aqui ao lado da ferramenta de retângulo para que possamos ver todas as ferramentas. Estamos procurando uma imagem de lugar e até mesmo o atalho. Control Shift K. Isso abrirá uma janela do navegador e você poderá encontrar pasta que tem todas essas capturas de tela. Ok, incrível. Vou escolher um aleatoriamente. Depois que a imagem for carregada, você verá uma mini versão ao lado do cursor. Isso significa que ele está pronto para ser colocado dentro do projeto. Então, o que vamos fazer é passar por cima do retângulo e clicar nele. E isso é um trabalho, bem feito. Uma coisa que eu não gosto dessas bordas quadradas com o retângulo ainda está selecionada. Você vai ver esse campo aqui. Então é aqui que vamos alterá-lo de 0 a 30 pixels. Isso vai nos dar uma sorte muito melhor. E estou muito feliz com isso. Agora, para que a imagem se destaque um pouco mais, vamos clicar nesse sinal de adição ao lado de fx. Isso vai nos dar uma boa sombra. Para ajustar as sombras, veja, vamos examinar este ícone onde você verá que diz configurações de efeitos. Então, vou usar valores altos para que você possa realmente ver isso na gravação. É 15 para o campo y e 15 para desfoque. Isso é 15. Falaremos sobre tudo em detalhes um pouco mais tarde. Por enquanto, basta seguir meus passos e a parte superior está pronta. Agora vamos adicionar nosso primeiro botão. Obtenha a tecla de atalho da ferramenta de digitação t. A primeira mensagem será escolher menos teclado. Escolha o teclado. Agora, quando você terminar de escrevê-lo, basta pressionar a tecla Escape para finalizar as coisas. Em seguida, vamos mudar a fonte do lado direito. Portanto, essa fonte não parece muito boa. Então, vamos mudar de raiz essa área aqui que é chamada de texto. Vamos mudar a fonte para algo muito básico. Digamos que Arial Bold 24. Não se apresse com isso. Você não precisa se apressar. Como eu disse, pause o vídeo sempre que precisar quando estiver pronto, centralize-o no Canvas, desse jeito. A etapa importante é esta, mova o mouse acima dela e clique com o botão direito do mouse em obter desta lista. Escolha adicionar, layout automático. Está em algum lugar perto do centro. Se você não conseguir gerenciar, basta usar essa tecla de atalho, mudar a. Então isso faz a mesma coisa. Parece que nada aconteceu, mas agora temos essa área aqui no lado direito que se chama caiu. Clique no ícone de adição. E, novamente, nada parece ter mudado. Mas observe que temos o branco aqui. Adoramos o branco e a maioria dos projetos de design da AB, mas agora temos que mudá-lo para outra coisa. Então, vamos clicar aqui para obter o seletor de cores. Agora podemos selecionar praticamente qualquer cor, mas vamos usar a anterior. E então vamos, agora também é verbal. Fuja para fechá-lo. Agora, preto e roxo realmente não funcionam. Mas observe essa área chamada cores de seleção. Então, isso nos ajuda a mudar esse preto para branco puro. Basta tocar no quadrado preto e você sabe o que fazer, deixá-lo branco. Lembre-se de usar a tecla Escape para fechar a janela. E isso está ganhando forma. O botão é um pouco pequeno demais, então vamos fazer algumas mudanças. Deste lado superior direito. Vamos trocar o raio coordenado dois para o, que é esse campo aqui. Em seguida, desça um e encontre esses dois campos dentro de 80,20, e isso é tudo o que há. Agora, 80 significa que teremos 80 pixels em cada lado desse texto. E essas são as bordas dos botões basicamente horizontalmente. E essa parte é para o outro lado. Agora, aperte o botão mais uma vez, e nós temos quase eles. Faça uma cópia dele. Use o controle agora, novamente, parece que nada aconteceu. Mas quando você continuar , com o mouse, clicar e arrastar, você verá que fizemos uma cópia. Então, Controle D ou Comando D, D como em duplicado. Coisas incríveis. Vamos mudar os textos e depois seguir em frente. Doubleclick quer entrar no botão. Agora clique duas vezes novamente para editar esta mensagem. Altere-o para ativar o teclado. Então, ative o teclado. Depois de terminar, vá para o próximo vídeo, onde explicarei por que trabalhamos da maneira que trabalhamos. Por enquanto. Esta é sua primeira tela de design de aplicativo, parabéns, e eu vou te ver em um segundo. Obrigada. 3. O mais importante sobre como projetar aplicativos: Bem-vindo de volta. Vamos ver se podemos melhorar um pouco o design. Talvez altere o tamanho dos botões, talvez adicione mais alguns detalhes como adicionar o site na parte inferior. Agora, a vida selvagem funciona em segundo plano. É a mesma coisa que fizemos no vídeo anterior, as mesmas técnicas. Deixe-me contar algumas coisas sobre a criação de aplicativos. Agora, em meus mais de cinco anos nesse campo, descobri que a simplicidade é fundamental. O que você vê aqui não é difícil de fazer do ponto de vista técnico. Não é muito avançado. Como você viu, estamos usando algumas formas. Centralizamos as poucas coisas, escolhemos alguns efeitos muito básicos, como uma sombra projetada. Isso é um projeto de laboratório real. Este é um projeto real e maioria é exatamente como o que você vê aqui. Multiplicado por 100, certo? Agora, simples não é um palavrão aqui. O simples é essencial em qualquer design AB devido à sua própria natureza. Os aplicativos móveis, os melhores, pelo menos têm apenas uma ou duas funcionalidades básicas. Por exemplo, o clássico Uber chama você de carro e pronto. A interface não tem muitas decorações nem botões. Você não verá nenhuma criatividade. Você não verá muitas coisas que o façam se destacar incrivelmente. Então esse não é o ponto. O aplicativo precisa ser intuitivo, certo? A ideia é fazer com que o aplicativo tenha uma aparência que permita que uma criança de quatro anos com um tablet possa gerenciar o usuário. Então, novamente, essa é uma tela real de um aplicativo real. Não é complicado, não é chique, não é impressionante. Isso não trará muitas curtidas nas mídias sociais, mas é disso que as empresas precisam. limpos, modernos Projetos limpos, modernos e precisos que ajudam o usuário a atingir seus objetivos. Foto, mas isso é dar um carro para esse verde, trata-se de garantir que o usuário ative o teclado. O fato é que, se você olhar galerias de design como drible , mãos ou qualquer outra coisa, encontrará designs lindos e incríveis. Mas a maioria deles é falsa. Esses são feitos para designers e o parceiro para curtidas e comentários. A verdade é que isso é realmente o que as empresas precisam. Agora, não pense que isso é fácil de fazer. Há uma diferença entre fácil e simples. Fácil como quando você pega uma garrafa de água, por exemplo, simples é quando você sabe que, se quiser ter braços grandes na academia, precisará usar halteres cada vez mais pesados. Ou se você quiser um pacote de seis para fazer dieta. O processo é simples de entender. Adicione mais peso com o passar do tempo, coma menos, certo? Mas levantar esses halteres pesados está longe de ser fácil. Então essa é a diferença entre fácil e címbalo. Outra forma de ver isso é como se você estivesse vendo um chef experiente quando ele cozinha, ele faz isso com graça. Parece tão simples, tão fácil. Mas por trás de tudo isso, há muita complexidade envolvida. Há muita experiência. Portanto, é a mesma coisa aqui no design AB. Chegando a esse ponto em que você pode fazer com que alguns elementos pareçam lindos. É muito difícil, mas é isso que você aprenderá neste curso. Vou explicar todos os princípios de design que ajudarão você a criar aplicativos modernos e bonitos. Vou te ensinar sobre contraste, simetria, espaçamento, hierarquia e muito, muito mais. Você não os vê, mas esses são os princípios de qualquer aplicativo bem-sucedido. Uma última coisa: por que a maioria das empresas não tem aplicativos lindos como os que você vê no Behance e duráveis, porque eles são incrivelmente caros. Os EPS básicos, muito simples, exigem um orçamento de pelo menos $10.000. E isso soou muito, muito discreto. A maioria dos aplicativos precisa de um orçamento de pelo menos $50.000. Mas vamos dizer de outra forma. Digamos que 1 hora de criação de um aplicativo no total custe 200 dólares, $200. Você gastaria mais tempo para garantir que o aplicativo funcionasse corretamente? Ou a escolha de cores, efeitos, animações sofisticadas e a lei. Então, como você pode imaginar, a maioria das empresas quer que o aplicativo funcione corretamente. Funcionalidade em primeiro lugar, certo? O design é sempre uma prioridade baixa. É por isso que você não verá nenhuma dessas animações incríveis, transições incríveis e que afetam todos os Bois, custando um braço e uma perna. O custo é muito alto e depois não vale o dinheiro. Então, qual é a conclusão? Bem, você precisa aprender a projetar assim. Simples e moderno, eficaz, que você vê nas Galerias de Design, é muito semelhante ao que você vê no Instagram. Na maioria das vezes, é falso. As pessoas realmente não têm essa aparência. E a recaída também não tem essa aparência. A simplicidade exige muito conhecimento, prática e, em resumo, muita experiência. Eu vou te ajudar com tudo isso. Continue com o curso e você aprenderá tudo o que precisa saber sobre esse campo. Agora, especificamente sobre esse design, escolhi destacar o primeiro botão adicionando uma sombra projetada. Eu deixei o segundo botão cinza para mostrar que não está pronto para ser clicado. Também não é tão largo. Agora, esse é o princípio da hierarquia. Você sente que precisa clicar nesse botão, no roxo, e não nesse outro. Por fim, adicionei a camada de texto na parte inferior para equilibrar o design. Agora, depois de passar por este curso, você ainda poderá fazer muito mais dessas coisas com muita confiança. Mas agora vamos continuar. 4. Duas habilidades fundamentais a ter na Figma: Vamos criar um novo arquivo para controlar a terra, seja qual for o método que você preferir. E vamos começar a trabalhar. Inicialmente, eu sei que tudo parece tão vazio. Qualquer projeto começa com uma moldura. Essa é a primeira coisa que você precisa lembrar. Uma moldura é como um quadro de arte ou uma tela, mas é um pouco diferente de Figma ser um lugar onde você adiciona todos os seus textos, imagens, basicamente seu conteúdo Tudo isso está dentro da moldura. Não se preocupe com a definição. Enquanto trabalhamos, você logo o entenderá. Para adicionar a moldura. Pressione F para ativar a ferramenta de moldura ou simplesmente clique aqui. A propósito, ele faz outra ferramenta aqui chamada ferramenta Slice, mas não queremos isso. Ok. Selecionamos a ferramenta Frame e o painel direito acabou de ser alterado. Você tem muitas opções muito bem organizadas. Telefone, tablet ou desktop e assim por diante. Você pode clicar nos nomes para abri-los ou fechá-los. E se você clicar em qualquer um deles, por exemplo, iPad Mini, o quadro será adicionado automaticamente. Você também pode ver isso no painel de camadas. Veja esse símbolo aqui que parece uma hashtag. Isso é um quadro para excluí-lo. Basta tocar na tecla Delete e pronto. Ok, vamos para a seção da área de trabalho e escolher o primeiro item dessa lista, que também é chamado de área de trabalho. Podemos ver o tamanho aqui. São 14, 40 por 1024. Aí está. Agora, o problema é maioria dos projetos de web design deve começar com que a maioria dos projetos de web design deve começar com um quadro de 1920 por 1080. Isso é o que eu recomendo fortemente. A melhor maneira de redimensioná-lo é usar essa parte aqui. W representa a largura e H representa a altura em vez de 14, 40. Clique aqui. E agora você pode digitar em 1920. mesmo vale para a altura que procuramos na época AD. Agora o quadro se expandiu e podemos vê-lo muito bem. Veja o que você precisa fazer para aumentar ou diminuir o zoom. Por favor, segure a tecla Control e use a roda do mouse. Se você rolar para trás, diminuirá o zoom. Se você rolar para frente, aumentará o zoom depois de fazer isso algumas vezes, parecerá natural. Por favor, use sua mão esquerda. O ideal é usar o mindinho para segurar a tecla de controle esquerda no teclado. Agora use seu pergaminho. Por favor, faça o seguinte. Mova o mouse na coordenada do quadro e amplie. Como você pode ver, isso realmente ajuda você a se concentrar nessa área. Agora, diminua o zoom e vá para outro canto. Eu sei que isso parece algo muito básico, mas confie em mim, é essencial que você pratique. Você não pode seguir em frente até dominar essas coisas. Há mais uma coisa que você precisa saber como usar, que é a tecla da barra de espaço. Digamos que estamos ampliados em um canto e estamos muito satisfeitos com o nível de zoom. Mas agora queremos passar para o outro canto. Isso é chamado de panning. Olhando por aí. Segure a tecla da barra de espaço e o cursor do mouse se transformará em uma mão. Se você soltar a tecla da barra de espaço, ela voltará aos dados padrão, a ferramenta de movimentação. Novamente, segure a barra de espaço, clique em segurar e vá de coordenada para coordenada de um lado para o outro, para cima e para baixo. Ao conseguir dominar essas duas técnicas simples, você está criando uma base muito sólida. Esse é o seu alfabeto. Essa é sua matemática básica e básica. Por favor, aprenda isso. Não há como contornar isso. Para recapitular, segure a tecla Control e use a rolagem do mouse para ampliar ou e segure a tecla da barra de espaço, clique e segure para se mover de lado para o outro para girar e girar. 5. Figma vs Adobe XD vs Sketch vs Photoshop: Bem-vindo de volta. Nesta palestra, quero fazer uma comparação rápida entre esses programas de design da AB. Primeiro, a conclusão, Figma, parece ser o padrão da indústria e o melhor programa de design para o futuro. Com isso em mente, você pode pular para a próxima palestra se não estiver interessado em todos os detalhes, ok, supondo que você ainda esteja aqui, eu olho para o mercado ou para o mercado de design e vejo quatro grandes colunas é Photoshop, Adobe XD, sketch e Figma. Primeiro, vamos falar sobre o Sketch. É um programa decente de design de aplicativos bastante conhecido. Custa $9 por mês, mas não estou interessado nele por um motivo simples. Ele não está disponível no Windows, então eu não posso usá-lo. Pelo que entendi, a equipe por trás disso não planeja fazê-lo funcionar no Windows. Então, por esse motivo , está fora de questão para mim. Mais do que isso, não tem uma grande comunidade. Então, com isso em mente, sketch está perdendo terreno muito rápido. Já existe há muitos anos, mas está perdendo terreno. Agora, vamos falar sobre o Photoshop versus o Adobe XD. Agora, isso é como comparar maçãs com árvores. São programas totalmente diferentes que têm propósitos diferentes. O Adobe XD foi criado do zero para projetos de web design, também em projetos de design. Então, essa é uma das principais vantagens do Adobe XD. Funciona com vetores. É muito leve, super rápido e tem recursos incríveis que podem acelerar seriamente seu processo de design. Basta dar uma olhada neste exemplo em que posso preencher uma lista apenas alguns cliques que realmente faz você trabalhar de forma mais rápida e inteligente. Não é só um truque. Eu o uso o tempo todo em todos os meus projetos. Velocidade é a palavra-chave aqui. Agora, a desvantagem é que Adobe XD ainda está em forte desenvolvimento. A Adobe está constantemente trabalhando nisso e está ficando cada vez melhor. Mas algumas pessoas dizem que as atualizações estão chegando com rapidez suficiente. Coisas básicas, como uma interface escura ou a possibilidade de alterar seu layout, por exemplo, não estão disponíveis. Bem, não no momento desta gravação, de qualquer maneira. Outra desvantagem. Anteriormente, o Adobe XD era um programa gratuito. Agora são dez dólares por mês. Então, no geral, há uma sensação de frustração com o Adobe XD, especialmente quando você o compara com o Figma. Agora, falaremos mais sobre isso em um segundo. Por enquanto, vamos falar sobre o Photoshop. O Photoshop é ótimo. Ele tem muitos recursos. É previsível, confortável e você pode criar aplicativos bonitos com ele. É um dos programas de design mais conhecidos do mundo. Agora eu poderia continuar falando sobre isso, em seus lados positivos. Mas aqui está o elefante na sala. O maior problema do Photoshop para o trabalho de design da AB é o desempenho. Ao trabalhar em um projeto de médio a grande porte, o photoshop fica drasticamente mais lento. Na maioria dos projetos de design da AB, mesmo com o melhor computador, ainda tenho problemas para me movimentar. É instável, não responde e é muito irritante. E esta é uma máquina de 7.000 dólares, não é a melhor do mundo, mas ainda custa $7.000. Agora, quando tentei adicionar a nova camada de texto photoshop, isso é o anel? É lento quanto ****, e pensa que por alguns segundos Com a adição de uma simples camada de texto, isso é frustrante e é de longe a maior desvantagem que outras, também. Mas isso é o que realmente me afeta todos os dias. E é simples. O Photoshop não foi criado para esse tipo de coisa. Se o projeto tiver apenas algumas telas no total, tudo bem. Você pode usar o Photoshop sem problemas. Mas depois de dez ou 20 telas , fica muito lento. Então, para resumir isso entre o Adobe XD e o Photoshop, que não tem contexto para nenhum projeto de design de aplicativo decente. Um é incrivelmente rápido, enquanto o outro é o gigante do mundo do design. Mas também é dolorosamente lento. Jet ski, Adobe XD versus navio de cruzeiro. Agora, voltando à Figma, começou em 2012 e também em 2018 realmente começou a ganhar velocidade. Nos próximos anos. Ele se espalha incrivelmente rápido na comunidade de design. Tanto que a Adobe, a grande empresa por trás de programas como Photoshop, Illustrator, Premiere Pro e, claro, Adobe XD, do lado da Figma por 20 bilhões de dólares. Sim, bilhão. Então isso aconteceu no final de 2022 e pegou todo mundo de surpresa. A soma é incrível, mas é por isso que você deve se preocupar com ela. Então, o Adobe XD era um concorrente direto do Figma, um iniciante, eles poderiam até parecer semelhantes. O Adobe XD foi criado para projetos de web e design de aplicativos exatamente como o Figma. Mas uma vantagem clara da minha cabeça era o preço. Era totalmente gratuito. O Adobe XD começou de graça, mas depois ganhava dez dólares por mês. E isso pode não parecer muito, mas a maioria das empresas odeia o envio de um novo sistema de cobrança. Se eles são designers pudessem se inscrever rapidamente sem problemas, esse seria o caso ideal. Então, Figma, uma ótima opção para maioria das empresas e designers de todos os tipos, como trabalhar no Figma e não porque era gratuito, mas também porque funcionava no seu navegador. Sim, um programa de design completo que funciona no seu navegador. Então, apesar de tudo, o Figma se tornou programa de design que todo mundo estava pedindo. Adobe tentou melhorar o Adobe XD, mas, no geral, o Figma parecia imparável. Então eu acho que é por isso que eles decidiram comprá-lo por uma quantia tão grande. Eles tinham que fazer alguma coisa. A Figma estava ficando cada vez mais forte e comprá-los era a solução mais fácil. Agora, a questão principal depois que o Figma foi comprado pela Adobe era ele permanecerá gratuito? E a resposta é sim. Mas a pergunta mais importante é essa. O que a Adobe fará? Tanto o XD quanto o Figma fazem exatamente a mesma coisa. Não faz nenhum sentido. Os dois principais programas de design são simplesmente muito caros. Então, a maioria das pessoas acha que a Adobe vai matar diretamente a Figma, já que já foi uma concorrente. Mas acho que o Adobe XD tem muito mais chances de ser encerrado. O tempo vai nos dizer. Mas, por enquanto, é melhor que você aprenda o Figma e veja por que muitos designers começaram a usá-lo. E eles nunca voltaram para o Adobe XD ou qualquer outro programa de design. Antes de terminarmos, gostaria de mencionar uma coisa. É muito provável que a Adobe atualize o Figma várias vezes. Isso significa que você pode ver pequenas mudanças na interface aqui e ali. Mas o melhor desse curso é que os princípios, os princípios de design que abordamos, são universais. Portanto, mesmo que você veja uma pequena mudança de fase, não se preocupe, você ainda pode seguir em frente sem problemas. E se você ficar preso, por favor, peça ajuda e eu estarei lá para entrar por enquanto. Vamos continuar e eu vou te ver em um segundo. Obrigada 6. Vamos melhorar nossa velocidade: Bem-vindo de volta. Eu sei que há muito o que discutir sobre interface do Figma e o básico do programa, que é o que proponho, vamos melhorar nossa velocidade. velocidade é um dos maiores fatores que determinam seu sucesso ao longo dos anos Achei que o volume é extremamente importante. Simplificando, uma coisa é desenhar, depois botões, outra coisa. Se você projetar 1.000, a simples repetição o tornará melhor. Não se trata apenas de ser mais rápido, mas de ter confiança na execução do básico. É por isso que estamos começando com mais um exercício. Mesmo que você não esteja familiarizado com o programa, você não tem certeza sobre sua interface e outros enfeites. Não se preocupe. Leve comigo, inicie o Sigma e vamos criar um novo projeto clicando aqui. Inicialmente, você terá uma tela totalmente em branco e isso é normal. Pegue a ferramenta de moldura, tecla de atalho F. Você pode usar uma dessas predefinições, mas é mais fácil clicar e arrastar uma caixa. Isso é uma moldura, também conhecida como tela. Obviamente, o tamanho está totalmente errado. Então, vamos corrigir isso trabalhando com esse painel de propriedades aqui no lado direito. Resumindo, W representa a teia e h significa altura. Queremos 720 por 12, 80, um ótimo ponto de partida para a maioria dos aplicativos. Insira esses valores e pressione Enter. Depois disso, talvez você queira segurar o controle e diminuir o zoom da cama usando a roda de rolagem do mouse. Agora, aqui está todo o objetivo. Quero que você crie rapidamente uma grade de seis fotos com seis dipolos. Isso significa que duas colunas serão essas. O objetivo é fazer isso o mais rápido possível. E para esse fim, vou pedir que você faça isso três vezes. Toda vez que você fizer isso, registre a hora. Use um cronômetro no seu telefone. Eu queria ver como você melhora cada vez que passa por essas etapas. Veja como isso acontece. Pegue a ferramenta retangular, as teclas de atalho e desenhe uma forma como esta. Não há um tamanho específico em mente, mas ele deve ter menos de cento e 30 pixels. No entanto, isso é facilmente excluído. Então você tem espaço para dois deles lado a lado. Coloque-o no canto superior esquerdo e pronto. Em seguida, pegue a ferramenta de digitação, tecla de atalho d, d Para o tipo de texto. E vamos escrever alguma coisa. Isso pode ser qualquer coisa neste momento. Vou usar o nome da foto 1, apenas algo aleatório. Clique em Escape quando terminar. Agora, a diversão começa. Selecione o retângulo e a camada de texto desenhando uma caixa assim. Agora que você adivinhou, teremos que centralizá-los. Agora. Está tudo bem, mas a camada de texto é bem básica. Bem, vamos clicar nele e ir para o lado direito da tela e mudar sua orientação. Em primeiro lugar, vamos do à esquerda para o alinhamento central. E por quê? Porque vamos aumentar o tamanho. Vamos fazer muitas coisas, mas isso vai ficar. Mas, por exemplo , aqui, como você pode ver, ele permanece centrado, embora eu tenha alterado o tamanho. Além disso, também podemos alterar o tipo de letra usando esse campo aqui. Eu tenho muitos deles instalados. Então eu vou escolher um deles, por exemplo, Poppins, negrito 24, certo? E como mudamos a orientação da esquerda para o centro, o texto permanece centralizado com um retângulo. Eu vou te ensinar como instalar fontes mais tarde, mas agora vamos continuar. Por enquanto, você pode usar qualquer outra fonte que pareça interessante. Basta ler esta lista aqui. Ok, em seguida, selecione as duas camadas e faça com que largura da cópia controle a mesa Command D em um Mac, D como em duplicado. E, como sempre, nada parece ter acontecido. Mas o painel de camadas nos mostra a cópia de volta para a tela, clique e arraste-a para o lado. É importante que você o alinhe melhor, certo? Então, isso é o que significa. Imagine uma linha horizontal indo direto aqui. Na verdade, você não precisa imaginar isso porque Figma ajuda você. Está bem? Então, coloque uma linha correta e deixe um pouco de espaço em ambos os lados. Se necessário, selecione tudo e mova-o. Ok, isso é uma coisa boa. Agora vamos fazer isso. Vamos selecionar as duas entradas arrastando para fora caixa ainda maior que engloba tudo, certo? Agora, duplique novamente com o Controle D e arraste as cópias para baixo. Por favor, deixe espaço suficiente entre as fileiras. Então, algo assim. O que eu quero evitar é algo que pareça lotado como este aqui. Isso não é uma grande sorte. Então, novamente, certifique-se de deixar espaço suficiente para respirar, 0. Lembre-se de aumentar e diminuir o zoom quando necessário, isso é controlado e de rolar o mouse. Ok, agora, faça isso de novo, se necessário, até obter seis fotos. E apesar de serem incríveis falando sobre fotos, vamos ao unsplash.com. E aqui você encontrará uma enorme biblioteca de imagens gratuitas. Agora meu conselho é que você me mostre algo interessante sobre o seu país. Você pode mostrar diferentes cidades, diferentes partes da sua natureza. Apenas certifique-se de que as fotos combinem bem e que os nomes estejam claramente marcados. Então, depois de baixar seis imagens do Unsplash, é hora de trazê-las para dentro do projeto. Para fazer isso, vamos usar o Control Shift K para colocar as imagens. Ou se você não gostar da tecla de atalho, vá até a ferramenta de retângulo e clique aqui nesta seta para baixo, encontre, coloque imagens e selecione esses seis arquivos. Esteja ciente de que unsplash.com oferece imagens enormes. Então, quando você os carrega, a Figma vai agradecer por um tempo, apenas alguns segundos, então você tem que ser paciente com isso. Ok, ótimo. Agora clique rapidamente em todos os retângulos para inserir essas imagens dentro deles. Quando terminar, quero que você renomeie todas essas camadas de texto para algo mais apropriado. Novamente, podem ser nomes de cidades e seu país ou qualquer outra coisa. Você não precisa de uma descrição longa, apenas mantenha-a curta e agradável. Obviamente, você pode reduzir esse texto para um tamanho diferente. Você está no controle total da aparência. Aumente-o, mude a fonte, o que você quiser fazer quando terminar, selecione o quadro inteiro. Em seguida, vá para Exportar e clique nesse ícone de adição. E você verá algumas opções e as padrão estão totalmente corretas. Png no tamanho que você configurou. Clique nesse botão e você verá uma janela de navegação, salvará na área de trabalho e fará salvará na área de trabalho o upload para a plataforma. Eu quero ver ainda, este é o seu design. Agora, o que eu quero que você faça é VP. Eles se exercitam mais algumas vezes, três vezes no total. Então, isso significa criar um retângulo no centavo do título de duas maneiras. Uma vez com um retângulo e , na segunda vez, altere a orientação do lado esquerdo para o centro. Em seguida, procure os títulos, talvez cópias, adicione fotos e explore. Veja como você pode melhorar seu tempo. Mas uma coisa, porém, não considere o tempo que você gasta no Unsplash procurando as fotos. Então isso está excluído, certo? Pause o cronômetro. O que você está procurando, a velocidade no Figma, você deve ser capaz de adicionar retângulos e camadas de texto com os olhos fechados. Insira as fotos, verifique se tudo está centralizado. Mova-os, aumente e diminua o zoom. É isso que eu quero de você. Boa sorte e me avise seus horários. Deixe-me saber como você melhora a cada vez. 7. Corrigir este design de aplicativos móveis: Bem-vindo de volta. Por favor, inicie o Figma e vá para o arquivo a seguir. Corrija essa coisa do aplicativo dot FIG. Isso está anexado ao curso. Agora, o objetivo é simples. Temos que melhorar esse design. E isso vai nos ajudar muito a aprender sobre como precisamos criar um aplicativo. Agora, aqui está o primeiro erro. Você viu que centralizamos bastante nossos itens. Observe esse lado esquerdo. Agora, você deve imaginar imediatamente a linha vertical passando por todos esses itens. Se você selecionar todos eles, notará que eles estão em todo lugar. Eles não estão alinhados. Então, isso faz com que o aplicativo pareça confuso. É um pressentimento que indica que algo não está certo. Então, com todos esses itens selecionados, usaremos essa linha de comando de alinhamento à esquerda. E isso é muito mais parecido. Para ser justo, a diferença à direita é maior, um contra um contra 82 à esquerda. Isso não está correto. Bem, em primeiro lugar, se você tentar usar esse ícone de linha central, figma não nos dará o que estamos procurando agora. É justo, isso não parece tão ruim, mas vamos continuar no caminho certo. Agora queremos igualar a lacuna do lado esquerdo com a do lado direito, certo? Queremos a mesma lacuna. Podemos clicar, arrastar e mover tudo até vermos essa linha. Essa é a maneira manual de fazer isso e não é a maneira mais rápida de realizar o trabalho. Então, deixe-me desfazer o controle Z, que é o Comando Z em um Mac. Agora, com todos os elementos, selecione que você pode usar o Controle G, G como no grupo. Isso é o Command G em um Mac. Agora foque no painel de camadas. Temos algo aqui chamado grupo ou pasta. Resumindo, a Figma agora está tratando todos esses elementos como um só. E por causa disso, podemos usar o comando central desse jeito, e obtemos a mesma lacuna em ambos os lados. Então você entendeu tudo isso? Agrupamos todas as camadas. Então Figma veria todos eles como um único objeto. Em seguida, podemos usar o comando central agora para desagrupar, basta clicar com o botão direito aqui ou no painel de camadas. E estamos procurando o Ungroup. Ou ainda mais rápido que você possa usar as teclas de atalho Control Shift G, mas eu gosto de clicar com o botão direito do mouse. Então, novamente, esse é o primeiro erro, não alinhar as coisas corretamente. Isso foi em dois casos, alinhando as coisas à esquerda e depois movendo-as para o centro. Agora, o segundo erro está aqui com essa interrupção, esse cinza é muito claro, está muito desbotado, então é muito difícil de ler. Imagine que você está no telefone e seu brilho está em 20 por cento. Para economizar a vida útil da bateria, você não conseguirá ler isso. Então clique nele para selecionar isso e, em seguida, altere o preenchimento para algo um pouco mais escuro. legibilidade é fundamental. Elegibilidade é o que você precisa para ler facilmente as camadas de texto. Portanto, uma cor muito desbotada é proibida. O próximo erro é a ação principal nesta tela de login. É um elemento tão pequeno e fácil de perder. Por que não ter um botão grande com uma área de superfície generosa para forçar o usuário a ser muito preciso com as etapas. Não faz nenhum sentido. Portanto, selecione o texto e use Shift a. Essa é a maneira padrão de criar um botão no Figma. Mais do que isso, mas o último ponto, agora, vamos adicionar um preenchimento clicando nesse ícone de adição. Quando se trata de cores de ação, use algo brilhante e saturado. Então, por exemplo, digamos que queremos usar um verde. Você nunca deve optar por algo assim, por exemplo, tão monótono, chato e desbotado. Isso precisa se destacar. Por outro lado, você não quer usar cores neon, certo? Portanto, ir até o lado superior direito geralmente é um erro. Em vez disso, você quer ficar nesta área aqui. Essa é uma cor moderna com a qual a maioria dos clientes ficará feliz. Claro, preto não funciona. Agora, você poderia potencialmente lê-lo? Sim, claro, mas parece ótimo? Não. Então, lembre-se, podemos controlar o texto a partir daqui, selecionar as cores. Agora, meu conselho, sempre, sempre opte pelo branco puro. Nada mais, nem amarelo, nem azul-petróleo, nem cinza, NAB, dourado. Nada supera o branco puro. Ok, para os nervos centrais, os quadrados parecem um pouco desatualizados. Não é um erro, mas não é legal. É um pouco 2010. Então, esse bico. Então, vamos usar um valor alto, algo como 60. Você pode inserir qualquer valor super alto aqui, Figma usará apenas o valor máximo possível para a largura e a altura do botão, vamos usar 160,20. Agora, meu conselho é que você faça o botão da mesma forma que os campos, ou o torne consideravelmente menor. Como sempre , centralize-o horizontalmente. Quais devem ser evitados são os valores que parecem ser quase os mesmos, mas diferentes. 200 é um excelente exemplo. É quase tão largo quanto os campos, mas não exatamente. Isso é menos esteticamente agradável. Então, meu conselho: evite isso. Ou você é o exato ou não tem nada. Agora, voltando ao espírito do exercício, podemos fazer muito mais, certo? Vamos mover a senha esquecida para um local diferente, ativar o botão de login e assim por diante. Agora, esses são detalhes de ajuste fino e você pode segui-los ou deixá-los como etapas opcionais, certo? É mais sobre preferências pessoais do que corrigir quais erros O que está claro é que o problema é esse, o último deste exercício? A senha de Deus não está estilizada corretamente. Veja, o login é claramente uma ação, certo? Inscreva-se na parte inferior. Novamente, é claramente uma ação. Você pode ver que está em uma cor diferente e está até mesmo em negrito. Portanto, ela se destaca um pouco mais porque a senha divina não parece especial de forma alguma e isso é obviamente um erro. Então, selecione-o e altere-o, deixe-o em negrito e mude sua cor para uma existente, por exemplo, esse azul. Agora, por que azul? Porque é uma reação secundária semelhante à inscrição. Agora, a ação principal ou a reação primária é fazer o login, que é verde. O secundário é azul. Agora, esses são os tipos de coisas que você aprenderá neste curso. Por enquanto, vamos resumir isso. Então, deixamos tudo em ordem, porque a precisão é essencial em qualquer projeto de design de aplicativo, mudamos a cor da descrição para melhorar a legibilidade, a capacidade de lê-la facilmente. Adicionamos o retângulo para a ação de login para facilitar o uso. E, finalmente, criamos a senha de Deus, em negrito e azul. Portanto, ele se destaca como uma ação, como algo que você pode tocar. E com isso, pronto, corrigimos esse aplicativo. Obrigada. 8. Introdução ao Projeto: Bem-vindo de volta. Na próxima seção, criaremos um aplicativo de entrega de comida que será um projeto e tanto. O objetivo é se familiarizar com todos os componentes de um aplicativo móvel e criar algo que tenha uma ótima aparência. Assista a cada vídeo duas vezes. Uma vez para entender o que está acontecendo. Não concorde, apenas observe e veja o que está acontecendo. E depois uma segunda vez. pausa sempre que precisar para continuar trabalhando. Ok, agora, enquanto examinamos cada tela, vou te dar minha visão. Vou te dar meu processo de pensamento sobre como eu tomo decisões de design rapidamente. Dito isso, você deve estar ciente de que certos princípios que se aplicam aqui exigem uma análise aprofundada. Falaremos sobre todas essas coisas um pouco mais tarde. Agora, quero que você trabalhe o máximo possível e deixe a maior parte da teoria para mais tarde. Agora, você pode perguntar Chris outras coisas que precisamos aprender. Por que estamos entrando em um projeto completo de design de aplicativo, um projeto do mundo real? E isso porque nada supera a experiência. É por isso que, ao pular e seguir em frente, também quero que você crie layouts padrão porque é isso que você encontrará em seus projetos diários. Claro. Há muitos designs super criativos prontos para uso nas mãos com dribles. Mas o fato é que a maioria dos seus clientes não tem a sorte de gastar no desenvolvimento de aplicativos, em códons. Assim, vamos criar algo que, na verdade, é um projeto do mundo real. Algo baseado na minha experiência de mais de cinco anos trabalhando com codelabs, com desenvolvedores 24 horas por dia. Isso significa aplicar as melhores práticas e usar layouts bastante padronizados Você precisa estar ciente de que cada decisão de design que você toma pode aumentar ou diminuir os custos de desenvolvimento e os custos de codificação. Portanto, embora algo possa parecer impressionante, há uma boa chance de o desenvolvedor se esforçar muito o desenvolvedor se esforçar para fazer isso acontecer e o cliente ter que pagar muito mais. Já passei por esse caminho muitas vezes. Mas o problema é o seguinte. Também estive na cadeira do cliente, onde tive que aprovar pagamentos adicionais porque a versão final exige mais trabalho do que o previsto inicialmente. Agora, novamente, vou trazer todo esse conhecimento para este curso e vou te ensinar como escolher suas batalhas com cuidado, criando algo incrível que não quebre o banco. Por enquanto. Quero que você fique curioso e faça o possível para assistir às citações completas até o final. Antes de irmos, tenho que pedir sua compreensão sobre certas partes que serão aceleradas. Qualquer projeto decente de design de aplicativo levará dias, se não semanas. Estou tentando condensá-lo até sua essência, reduzi-lo para que você possa ter uma ótima experiência de aprendizado no metal das horas. Então isso significa que eu tenho que editar certas coisas. Ações repetitivas que você me viu fazer 100 vezes ou coisas como pesquisar algo no Google, você sabe, encontrar um conjunto de ícones, encontrar uma fonte, coisas dessa natureza, coisas que são tempo- consomem, mas não há nada de especial neles. Se você tiver alguma dúvida, pergunte à vontade. Estou aqui para ajudar. Se houver algo que você não entenda, basta postar uma mensagem e eu responderei o mais rápido possível. Ok, vamos nos divertir com nosso primeiro projeto sério. Por favor, seja paciente consigo mesmo, caso tenha dificuldades às vezes e fique comigo até o fim. Vamos fazer isso em. 9. Explorando o resumo: Bem-vindo de volta. Este é nosso primeiro projeto sério de aplicativo. Este será um aplicativo de entrega de comida. E vamos usar essa chance para passar por várias telas e cenários diferentes. Este projeto tem um resumo que é cerca de oito em dez. Não é incrível, mas certamente não são alguns esboços em um guardanapo. É o dobro que deveria ser. um lado, temos o wireframe, que nos mostra as telas mais importantes e qual conteúdo precisa ser incluído. Por outro lado, temos um documento que descreve o que está acontecendo dentro do aplicativo, caso não esteja claro no wireframe. Idealmente, você deve sempre ter os dois ao iniciar um novo projeto. Não é seu trabalho inventá-los. Mas se o cliente quiser isso, você deve aumentar sua cotação de uma forma muito significativa, basicamente cobrando mais, eu diria que pelo menos no mínimo, mais $1.000. Ok. Anexado ao curso, você pode encontrar o link para o wireframe, o logotipo e a documentação. Agora, esse negócio é chamado de Live, abreviação de entrega, e é basicamente um aplicativo que entrega comida. E em algumas cidades, precisamos listar todos os restaurantes que oferecem comida para viagem, mas apenas aqueles que têm sua própria equipe de entrega. Ok, é bom saber. Agora, a empresa à esquerda não lida com a entrega real. Agora, essa área do resumo é muito comum. É a essência do projeto e é um bom ponto de partida pois você tem uma ideia geral sobre o que está prestes a projetar. A próxima fase é crítica, o público-alvo. E isso determinará a aparência do aplicativo. E é bom ter pelo menos alguma inflamação. Agora, este aplicativo é para pessoas ativas com renda disponível. Ambos os sexos, provavelmente solteiros, não casados, com emprego de escritório, improvável, gerência superior. Temos os pontos de pagamento, a qualidade da comida e o prazo de entrega. Agora, esses são pontos úteis porque podem nos ajudar a determinar a aparência do aplicativo. Como devemos estilizar o LEP. O contexto é tudo. Agora eu gostaria de ter mais alguns detalhes, mas como eu disse, este é um oito fora da banda. Outra coisa que você deve encontrar nesses resumos é o valor do aplicativo. Agora temos os principais pontos problemáticos, então sabemos o que precisa ser corrigido, mas como o aplicativo faz isso? Como o aplicativo deixa as pessoas felizes? Aqui, o aplicativo tem alguns pontos fortes. São as vistas, o ótimo prazo de entrega e as fotos reais dos produtos. Ok, muito bom, razoável. Nos próximos parágrafos, com os principais detalhes que moldarão todo o fluxo do aplicativo. Agora, vou pular esta parte, mas por favor, leia tudo sozinho depois desta palestra , pelo que vejo, acho que o usuário pode pular o processo de registro e o mesmo vale para o endereço, ele pode simplesmente pular isso. Agora, normalmente, o registro é o primeiro passo. Mas aqui o cliente, também conhecido como proprietário da empresa, fez a escolha inteligente. Ele não quer que o usuário fique preso ao preenchimento de formulários sem ver o valor do aplicativo. É por isso que estamos dando ao usuário a possibilidade de interagir com o aplicativo, de realmente usar o bem. E que ele está convencido de que pode se inscrever durante o processo de pagamento. Isso é um ótimo sinal. Isso mostra que o proprietário, o gerente de projeto ou o proprietário da empresa, quem está dirigindo o programa, pensou em coisas para fazer. Temos que analisar essas coisas porque isso nos diz nossa posição no projeto. Devemos compartilhar nossas próprias ideias? Nós nos permitimos ser vocais e desafiar certas decisões? Bem, depende de quão bem pensado é o projeto e, claro, do seu papel, do seu trabalho, neste caso, isso é um ótimo sinal. As coisas estão sob controle e não precisamos duvidar do resumo. Às vezes, os clientes não têm ideia. Esse não é um desses casos. Seguir em frente, caso o usuário esteja logado e a localização não esteja preenchida, só mostrará a cidade com a maior quantidade de restaurantes. Mas ele pode usar um menu suspenso para mudar isso rapidamente. Novamente, parece bom, bastante razoável. Agora, caso o usuário esteja registrado, o menu suspenso obviamente mostrará sua cidade. Agora, o sistema de classificação é baseado em porcentagens, 1 a 100%, em vez da classificação de cinco estrelas, que para nós é um bom lugar para adicionar um pouco de personalidade. Vemos que nossas quatro categorias de classificações. Então, teremos que criar algo que seja um pouco criativo e interessante. Agora, vamos fazer uma pausa novamente. Esse é outro grande sinal de que as coisas foram analisadas detalhadamente pelo cérebro da operação. Os sistemas de classificação usam a abordagem padrão de cinco estrelas, mas algumas das maiores empresas do planeta migraram para um sistema de aversão ao contrário. Isso inclui YouTube, Netflix e, em algumas partes do mundo, Facebook. Agora, a listagem é a tela fundamental dentro do aplicativo. Portanto, precisamos de uma compreensão clara do que precisa ser incluído e do que pode ser exibido em outro lugar. Agora, aqui vemos que precisamos da foto, um título, classificação, tipo de culinária, tipo de comida, tempo de entrega. Sem essa inflamação, podemos seguir em frente. O problema é que poderíamos incluir, por exemplo, um pedido mínimo, certo? Ou a taxa de entrega. Poderíamos incluir a distância em milhas ou quilômetros do restaurante até o usuário. Tudo isso mudaria completamente a estrutura do design. Então, novamente, estou muito feliz por termos todas essas informações e sabermos o que precisa ser incluído e o que é opcional. Temos algumas outras partes aqui e ali, mas vamos passar para os wireframes. Precisamos estar cientes de que o número de telas mostrado aqui não é realmente preciso. O wireframe normalmente mostra as telas mais importantes e precisamos preencher os espaços em branco usando a documentação, por exemplo, pop-ups, telas intermediárias e outros enfeites. Obviamente, eles não estão incluídos na maioria das situações. Você não os encontrará se os tiver. Ótimas notícias, mas neste caso, acho que não as temos. Agora, de volta ao assunto. As coisas estão muito bem organizadas. Então, acho que vamos nos divertir com isso. Nomes simplificados. Eles estão numerados, o que é incrível. Então, podemos falar sobre a tela de localização, por exemplo, mas pode ser mais rápido chamá-la de tela um. Se você quiser comentar algo, inclua o número. Essa é a melhor abordagem. Agora, de volta ao assunto. Vejo que precisamos incluir o menu esquerdo e direito, o que não é algo que o Google recomenda. Mas acho que isso é necessário por causa desses filtros que ajudarão o usuário a encontrar um restaurante específico. Por fim, precisamos ter cuidado com os diferentes fluxos do aplicativo. Temos vários caminhos. R, quando o usuário está registrado, isso é importante. Seja quando ele não tem uma conta e ignora a localização, então não temos um endereço e vemos quando ele não está registrado, mas ele fornece um endereço. Isso não nos afetará muito nos estágios iniciais do projeto, mas na fase de prototipagem, teremos que resolver todos esses cenários. Teremos que criar o aplicativo e a diretiva. Então, vai ser bem complicado, mas veremos nesse momento da fase de prototipagem: Em suma, podemos iniciar o processo de design verificando a concorrência nesse nicho, temos para buscar inspiração. Temos que ver o que as outras pessoas estão fazendo. Então, vamos continuar no próximo clipe. 10. Analise os concorrentes do aplicativo — Parte 1: Bem-vindo de volta. Nesse ponto, o resumo não deve ser um mistério. Se você ainda não escolheu a largura, pause o vídeo e analise A próxima etapa é conferir a concorrência do aplicativo para ver o que está acontecendo nesse setor específico. Aqui temos um nicho bastante bem estabelecido, a entrega de comida, que são aplicativos mais do que suficientes para que possamos analisar. Outra coisa é entender melhor os requisitos do projeto e obter alguma inspiração sobre o estilo geral. Observe que esses aplicativos são baseados em localização. O que estou prestes a mostrar pode não estar disponível em seu país, mas você tem várias capturas de tela de cada aplicativo anexado ao curso. No entanto, a linha inclui o fígado, Food Panda, the Live, que é um aplicativo que tem exatamente o mesmo nome, mas é pura coincidência. Takeaway e, em seguida, clique em Menu. Agora, todos os laboratórios são atualizados constantemente, então as versões ao vivo podem ser diferentes. Na verdade, tenho certeza que é diferente. Ainda assim, as capturas de tela serão o ponto de referência. Ok, vamos começar com a live para que possamos tirá-la do caminho. Agora, a tela inicial está uma grande bagunça. Temos amarelo branco, azul marinho e, curiosamente, o botão principal também é amarelo. O fundo parece ser uma imagem da cidade, mas está bloqueado por esse retângulo sólido, o que não faz sentido. Quando você pesquisa, mesmo que não entenda meu idioma, romeno, você pode ver que esse texto é de baixa qualidade, muito pixelizado e um pouco distorcido. E isso porque elas não têm, na verdade, camadas de texto, chamadas oficialmente de cadeias por códons. Em vez disso, essa é uma imagem que está sendo ampliada. Essa é uma prática ruim e não é nada boa. Ok, agora vamos mudar para a página de listagem. Aqui, vemos imediatamente a pouca atenção aos detalhes. Não há espaço vazio em nenhum dos lados. Então, se arrastarmos algumas linhas, você pode ver que o alinhamento está fora de sintonia. A topografia é modesta, as fontes são chatas. Não há diversidade nesta região. Não existe uma hierarquia específica que seja facilmente identificada. No geral, quatro em cada dez. E estou sendo generoso. Quando entramos no restaurante, podemos ver que as abas têm essas divisórias verticais, o que eu não vejo com frequência em aplicativos Android. Além disso, não há elevação em nenhum lugar. Você pode identificar qualquer sombra projetada. Agora, isso não é exatamente uma coisa ruim, mas isso é insuficiente no departamento de design. Pior do que isso, o gesto de deslizar que costuma ser usado para trocar rapidamente os dabs. Bem, na verdade não funciona. Isso é um grande choque. Em vez disso, você precisa tocar manualmente nesses itens, ou podemos usar essas setas, que são dos tempos do Windows XP. Agora, eu sinceramente não tenho ideia do que esses caras estavam pensando. Este é um excelente exemplo de um aplicativo criado por desenvolvedores e empresários que desenvolvedores e empresários conhecem designers envolvidos. Prometo que, no canto superior direito, gostaria adivinhar o que esse ícone faz. São informações adicionais sobre o restaurante, talvez uma função de compartilhamento, Adicionar aos favoritos? E a resposta é: eu não sei. Quando eu toco nele, nada acontece. Não tem um interior do estado, então não tenho certeza se realmente funciona. Mas, continuando, o checkout também é ridículo. Tudo é reunido aleatoriamente. Acho que eles queriam centralizar essas camadas de texto, mas está tudo errado. Por mais que tente, você não encontrará muitas linhas imaginárias. Nada está alinhado. Ah, e isso entrega o ícone, pega o bolo. Eu mudei de ideia. São dois em dez, outros quatro. Ok. Vamos seguir em frente com a takeaway.com, que é uma empresa que compra aplicativos de entrega a torto e a direito, não faz nada que nos bloqueie. Como no caso de vidas em que você não podia ver nada a menos que colocasse um endereço com um S para a localização, para obter a permissão do GPS. Então, o aplicativo basicamente quer nossa localização e imediatamente uma lista de restaurantes vai aparecer. Agora, eu pessoalmente pedi muitos alimentos, então, na verdade, sou um usuário frequente desses aplicativos. Takeaway não é uma delas. Eu não gosto disso e deixe-me dizer o porquê. Tudo está confuso. Nada está onde eu esperaria que estivesse. Claro. A lista de restaurantes é adorável. Logotipos bonitos e limpos à esquerda. Limpe os títulos em negrito à direita. Ícones interessantes por baixo. Mas é aí que o trem feliz para. Você pode me dizer qual desses dois restaurantes tem uma classificação mais alta? Porque se você já usou booking.com, acho que sabe, há uma grande diferença na qualidade. Entre um hotel 8,0 e um hotel 8,9. Ou que tal o IMDB? Se você gosta de filmes, 6,1 filme versus 6,91, noite e dia. O que estou tentando dizer é que 4,5 estrelas para dois restaurantes não me dizem nada. Preciso de mais informações para tomar uma decisão. Lembre-se de que tenho mais de 50 restaurantes na minha área. Portanto, esse sistema estelar, sem qualquer outra informação, não é bom o suficiente. Mas vamos voltar ao design por enquanto. Eu amei a laranja. Ele realmente brilha e tem um bom zinco para adicionar. Está fresco. É pegar os ícones de novamente, agradável e adorável. E temos um switch interessante que muda a forma como o aplicativo funciona, seja no modo Liberty ou no pickup. Isso é bem executado. As fontes usadas não são de outro mundo. E o mesmo pode ser dito sobre seus ícones, decentes, mas não ótimos. Dentro do restaurante, tudo está bem espaçado. Mas, curiosamente, eles escolheram esse tom estranho para a cor de call to action. Isso é muito estranho. Agora, há um sistema de abas que permite que você deslize entre as categorias conforme o esperado por qualquer usuário móvel. Alguns pratos têm descrições, mas outros não. Em relação às fotos do prato. Mesma história. Agora, o checkout é realmente sem brilho. Muitas divisórias, muito cinza, pouca atenção aos detalhes em relação à tipografia. Mas então vamos pausar o lado do design. Isso seria 6/7 em cada dez no meu livro, o problema, como eu disse no início, é a funcionalidade. Basta dar uma olhada no sistema de cartões. Está em algum lugar no canto superior direito, mas não na barra de ação. Não, na verdade é um FAB de botões de ação flutuantes, então ele simplesmente paira sobre ele. Isso é bastante incomum. O sistema Deb tem fontes muito grandes, e isso torna difícil para mim saber o que está disponível no restaurante. O menu à esquerda está, na verdade, no lado direito. Também é totalmente personalizado. Agora, eu não estou dizendo que isso é uma coisa ruim, mas é outra coisa com a qual eu tenho que me acostumar. Esses quatro ícones acima da lista de restaurantes. Novamente, muito estranho. Este é um aplicativo que nem sequer considerou as diretrizes oficiais de design de materiais. Eles não se importaram nem um pouco. E parece que, no geral, o aplicativo em minhas mãos parece desajeitado. É difícil de expressar em palavras, mas simplesmente não parece certo. No geral, esse é um design AB muito melhor do que o atual. Mas eu não acho que eu o classificaria mais do que cinco em dez, talvez seis se eu fosse super generoso. Agora, vamos continuar com o menu de ajuda, que tem uma abordagem totalmente diferente. Primeiro, adorei o processo de integração, ou seja, as primeiras telas iniciais que falam sobre o aplicativo. Design bonito e limpo. E quando você entra no aplicativo, ele me mostra uma lista de restaurantes com base no endereço que eu coloquei. Agora, a lista é muito fácil de ver. Mas há um problema com relação à funcionalidade. Você não tem como classificar esses restaurantes. Você tem que entrar em cada um e ver o que é o quê. E essa é a vibração em todo o aplicativo. Você precisa tocar muito para chegar à linha de chegada. Resumindo, muitos cliques, em que alguns aplicativos querem que você chegue à fase de checkout com quatro guias ou menos. Aqui, esse número é facilmente dobrado. Você tem que trabalhar muito. Quando você toca em uma entrada, isso é o que você obtém. Mais uma vez, um design adorável. Este é um livro meu e oito do ponto de vista do design. Aqui está o menu do restaurante. Temos uma abordagem de duas colunas, mas não tenho certeza se essa é a melhor escolha. Devemos ver mais itens? Mas a sorte não é tão boa por causa dessa altura. Parece muito pequeno. Parece antinatural. Parece que algo está errado. E as fontes, elas não estão prontas lá. Tudo parece misturado. Agora, quando os pratos têm fotos, é um pouco de experiência, mas, no geral, isso é uma mistura. O botão de ação flutuante também é confuso. Não tenho certeza do que está acontecendo com esse botão. Depois de algumas investigações, acredito que isso me permite formar um grupo de acordo com o que quer que seja. Basicamente, é algo sobre fazer pedidos com seus amigos. Mas por que colocá-lo tão na frente e no centro? De qualquer forma, o fundo é um pouco forte demais, o cinza um pouco escuro demais para o meu gosto. Isso se destaca demais. O sistema dapp parece bom o suficiente e os ícones da ActionBar também são interessantes. É difícil avaliar que em algumas partes é um sete, talvez até uma ajuda. Enquanto estiver em outros títulos, são os outros quatro pés? Agora, vamos dar 6,5 e passar para o fígado. Mas vamos fazer isso no próximo clipe. Obrigada. 11. Analise os concorrentes do aplicativo — Parte 2: Bem-vindo de volta. Agora estamos no fígado. Então, vamos analisar e ver se isso é uma fonte de inspiração. A primeira impressão é ótima. A topografia é perfeita, tem personalidade, agrega valor ao design. É fácil de ler. A próxima coisa que noto é o sistema de cartões horizontais usado para mostrar os restaurantes. A sombra é bem forte, considerando que o fundo parece ser branco puro, mas eu gosto. Lá em cima. Temos algum tipo de anúncio, mas observe como ele fica bem em cima dessa linha diagonal. Também agradeço como eles usaram esse pequeno ícone na área da barra de ação. Claro, é espaço desperdiçado, mas mostra que eles se importam. Tudo se resume a criar uma marca e garantir que você saiba que está no aplicativo deles. Mas você é o fígado. Quanto ao anúncio em si, adoro como o prazo de entrega é gravado na foto. Agradeço a hierarquia na lista. Eu acho que isso é muito bem executado. Temos o título em negrito, várias etiquetas em uma cor menor e desbotada. O prazo de entrega é reservado e recebeu muitos imóveis devido à sua importância. E, finalmente, temos o sistema de classificação e as porcentagens. Mas o que eu realmente amo é esse toque de cor para fazer o emoji. Agora, outra forma de traduzir o princípio da hierarquia dentro da lista é essa. Você sabe, onde está a sorte, você pode facilmente escanear várias áreas e saber o que é importante e o que não é. Esse é o princípio da hierarquia. O conteúdo é facilmente diferenciado e isso proporciona uma ótima experiência. Parece fácil. Agora, se voltarmos para a transmissão ao vivo, podemos ver que tudo está basicamente agrupado. Isso parece lotado e basicamente sem graça, chato sem nenhum sabor, embora apresente quase a mesma quantidade de elementos. Agora, voltando ao fígado, porém, esse aplicativo não parece seguir as diretrizes de design de materiais. Na parte superior, não há sistema de abas, nem a barra de ação é irregular. Em vez disso, acessamos os menus suspensos, que são muito incomuns. Na atualização mais recente. Eles se livraram deles e estou feliz que tenham feito essa mudança. O tamanho dos cartões é bastante generoso. Bem, isso melhora o impacto do aplicativo. Você só pode colocar cerca de dois restaurantes dentro de uma tela. E o segundo está um pouco isolado. Agora, para a cidade pequena, isso faz sentido, certo? Mas para os maiores com muitos restaurantes, vai ser bem difícil. Basicamente, depois das seis ou sete listagens, você vai ficar entediado. Agora, as fotos causam uma grande impressão e é definitivamente a lacuna mais bonita do grupo. Mas eu adoraria ver um pouco de uso desse espaço. Veremos o que é possível quando começarmos a projetar. Também vemos uma barra inferior, que inclui o recurso de pesquisa. Agora, tudo bem, muito bom. O que é interessante é o esquema de cores, branco e Thiel, nada mais. O conteúdo ficou famoso, provavelmente porque as fotos são bastante cheias de detalhes. Isso é muito inteligente. E provavelmente faremos o mesmo em nosso próprio design. Ainda mais considerando o fato de que maioria dos restaurantes não tem ótimas fotos da comida. Na maioria dos casos, as fotos são escuras, as placas estão ocupadas e as cores geralmente não são atraentes. Novamente, você pode ver isso ao vivo. A diferença está na noite e no dia. De volta à tela inicial, temos um botão de ação flutuante estendido que ajuda você a preenchê-lo. Isso é bem executado, mas quando você toca nele, você verá outro sinal que leva este aplicativo a nove em cada dez, se não mais, ícones excelentes que estão em sintonia com a vibração abdominal. Temos lindos ícones que estão em sintonia com os aplicativos do Vibe. Belas imagens por baixo com ótimo contraste de texto. Botão de apelo à ação claro. Há pouco a dizer sobre o lado negativo. Entrando na lista, vemos a foto do restaurante na parte superior e todos os itens do menu estão na lista rolável. Não há nenhum sistema de abas para falar. As fontes usadas são fáceis de ver, então você pode facilmente dizer o que é o quê. Eu não gosto. O fato de não haver miniaturas para os pratos, especialmente porque há espaço suficiente no lado esquerdo. Por outro lado, isso o torna bastante arejado. Parece que tem espaço de leitura suficiente. Ok, agora vamos adicionar algo ao nosso carrinho e ver como funciona. Ok, temos uma barra adesiva na parte inferior que nos mostra a cesta atual e é separada por uma sombra na parte superior. É curioso que o botão também tenha uma sombra. Não tenho certeza se concordo com isso. De qualquer forma, o checkout é outro ponto forte. Tudo é fácil de seguir e eles usaram essas cartas de forma inteligente, um pouco pesada com esse golpe, mas ainda assim um bom trabalho. No geral, o aplicativo parece lindo e isso porque seus elementos estão bem espaçados. Suas fontes são bonitas e interessantes e o conteúdo é deixado para brilhar. Um forte nove em dez. Vamos passar para o Food Panda para ver outra protuberância sobre o mesmo assunto. Aqui, reconheço imediatamente o mesmo estilo de uma cor, e isso é usado para chamar a atenção do usuário. Se você puder tocá-lo, então é rosa com barra vermelha. Eu gosto desse estilo porque isso guia o usuário sem fazê-lo pensar. A primeira impressão é que esse é o aplicativo mais bem projetado do mercado, 9,5 em cada dez. A principal diferença entre ele e o nível é a atmosfera. Isso é um pouco mais amigável, embora seja um pouco mais profissional, mas vamos nos concentrar na lista. Há mais coisas acontecendo por baixo da foto. Então, isso parece um pouco mais ocupado do que o fígado, pois as fontes usadas são, ok, mas elas não tinham aquele nó especial que as diferencia. Vamos voltar rapidamente ao fígado fazer e verificar o prazo de entrega. Observe como esses números se destacam, especialmente aqueles. Idealmente, esse é o tipo de personalidade que procuro em minhas fontes. Food Panda também tem um botão de ação flutuante, provavelmente para ajudá-lo a finalizar a compra. Está claro o suficiente. O ActionBar é a base de como isso deve ser feito. É bem definido, tem uma hierarquia adequada, bem espaçada. Se há uma coisa que eu acrescentaria é o fato de que eu não gostaria que o ícone de pesquisa ficasse alinhado com o menu de hambúrguer. Isso teria feito com que fosse perfeito. Ainda assim, no geral, esse é um dos melhores que eu já vi até agora. Vamos passar para a página de listagem de restaurantes. Aqui temos abas colocadas abaixo da foto principal do restaurante. Isso parece bom. É funcional, mas eu não estou apaixonado pelo sistema estelar, como é mostrado aqui. Acho que se perde. Quanto aos itens reais, essa taxa de especificação é um pouco estranha. As fotos são muito altas e isso será um problema para a maioria dos restaurantes. Quando as outras antenas são miniaturas. Outra coisa, porém, pode-se argumentar que isso é o plano dois básico. Teremos que encontrar uma boa solução em nosso design quando se trata disso, nenhuma dessas opções funciona para mim. Entregar isso foi simplesmente abandonar a ideia de mostrar uma foto do prato. Mas em outro Wireframe, vemos isso como um requisito. No geral. No entanto, está amarrado ou talvez um pouco atrás do fígado. Vamos chamá-lo de nove, talvez 8,5. Agora, o problema é que eu poderia facilmente continuar, mas quero que você mesmo explore alguns desses aplicativos ou encontre outros semelhantes. O objetivo é entender como eles tentaram resolver vários problemas. Eu quero que você me diga o que você gosta e o que você não gosta neles. Resumindo, as conclusões desta palestra são as seguintes. Devemos usar uma única cor bonita em nosso aplicativo e deixar o conteúdo brilhar. Precisamos ter cuidado com a proporção das fotos na lista do restaurante. Precisamos de uma fonte bonita que acrescente algo ao design, algo com personalidade. Por fim, devemos fazer o possível para incluir pelo menos dois restaurantes completos na tela inicial do anúncio. Como dica, quanto mais aplicativos você vê, mais inflamação você terá. Esse processo deve levar pelo menos 2 horas mas por questões de tempo, tive que encurtá-lo. Por favor. Não tenha medo de ser implacável em seus comentários. Seu objetivo é separar cada componente e ver se é algo que você deve evitar. Ou, pelo contrário, talvez use isso como inspiração. Faça várias capturas de tela e coloque-as lado a lado para que você possa ir e voltar facilmente. Ok, vamos continuar. 12. Crie o layout para a primeira tela: Bem-vindo de volta. Você explorou a competição por si mesmo? Espero que você tenha passado por vários laboratórios em seu próprio telefone, ou pelo menos tenha visto as capturas de tela que anexei à palestra anterior. Agora, é hora de começar o Figma e criar um novo projeto clicando aqui, vamos esclarecer isso, mas se você ainda achar difícil, eu tenho um curso mais adequado para iniciantes sobre Figma. Se você não conseguir acompanhar sua segunda exibição, talvez seja melhor assistir ao curso. Ok, vamos clicar aqui onde diz Sem título e renomeá-lo para adicionar entrega. Agora, pegue a Frame Tool, tecla de atalho f, para que possamos configurar a primeira tela. Agora, as configurações são baseadas no design do material até a entrada, para manter as coisas super simples, use 720 por 12, 80, sejam esses valores de, bem, basicamente, eu estou dobrando os valores dos antigos Samsung Galaxy S então. Agora, por que gibão? Portanto, ficará melhor quando você o revisar, quando você o enviar para seu cliente, seu cliente e outro código lá. Assim, você pode ver tudo bem e nítido sem comprar óculos dourados. Então essa é a única razão pela qual estamos dobrando a aposta. Realmente não importa para o programador ou para o cliente. É só uma coisa visual, certo? O processo de codificação não é afetado de forma alguma. Mais sobre isso mais tarde, mas confie em mim, isso não afeta nada. É apenas uma preferência visual para 2020, 320-20-4720 por 12 80 está totalmente bem. Em seguida, encontre uma moldura mais larga anexada ao curso e arraste-a para dentro, importe esse controle Shift K ou o que você quiser fazer. Coloque-o na lateral da primeira tela. O ideal é que você sempre mostre isso na segunda tela, mas vou mantê-lo aqui durante nosso processo passo a passo. Ok, então qual é o objetivo? Bem, queremos configurar nosso layout, a base do nosso projeto sem detalhes. Não repito nenhum detalhe. Queremos retângulos e camadas de texto em sua forma mais simples após as primeiras telas, depois começaremos a experimentar várias cores, fontes e vários detalhes. Então, vamos começar com o primeiro em que precisaremos do logotipo do aplicativo. E, claro, está ligado ao Gore. O ícone não está estilizado de forma alguma, nem tem nenhum texto. Então, isso vai nos ajudar a mantê-lo alinhado com o resto do design. Então, isso é uma coisa boa. Vou centralizá-lo e colocá-lo em nenhuma posição específica na parte superior da tela. Em seguida, vamos adicionar o campo de localização para fazer um retângulo. Tecla de atalho, clique e arraste. Quando estivermos procurando por tamanhos específicos, use o painel de propriedades no lado direito. Para este, digamos 600 para a largura, algo assim. Esse é o W aqui. E para a altura, vamos usar 80 pixels, algo assim, estimativas aproximadas. Portanto, esse não é o tamanho final, porque isso vem na fase de estilização mais tarde. Ok, eu sempre vou centralizar tudo no quadro no comando alinhar centros horizontais. É isso mesmo aqui. Por favor, se acostume com isso. E esses outros aqui, esses caras são seus novos melhores amigos. Vamos usá-los muito quase toda vez que fizermos algo dentro do quadro. Portanto, lembre-se de usá-los. Faça com que o retângulo fique cinza bem claro usando a área de preenchimento no painel de propriedades. Queremos um ótimo contraste para a camada de texto. Se você estiver usando um laptop ou um laptop de baixa resolução, lembre-se de que esse painel é rolável. Ok, pegue a tecla de atalho D da ferramenta de digitação e escreva digite sua localização. Então, isso é inserir sua localização. Agora, poderíamos usar recursos mais avançados que o figma tem a oferecer? Claro, totalmente. Mas, novamente, esse não é o palco certo para essas coisas sofisticadas. Vamos manter a fonte básica, o tamanho. Vamos configurá-lo para 20 e centralizá-lo dentro desse campo. Basicamente, a ideia é que estamos realmente criando o wireframe, mas podemos realmente editar todos esses campos. No lado direito. Vamos adicionar outro texto que diz GPS. Use o Controle D para criar uma duplicata. Coloque-o no lado direito. Agora, por que não um ícone? Porque não queremos interromper esse fluxo. Um ícone é um pequeno detalhe de design. E não é nisso que estamos trabalhando agora. Ok, precisamos de um botão de envio, então vamos digitar apenas esse envio. Vamos usar o Shift a para adicionar um layout automático, desta vez com pelo menos um recurso sofisticado, certo? Vou habilitar qualquer preenchimento cinza. Agora, você pode perguntar: poderíamos ter usado o quadro para o campo de localização no layout automático? Sim, claro. Mas há um pouco mais para descompactar lá. Eu prefiro mantê-lo como um retângulo padrão para que possamos nos concentrar no tamanho geral do botão. Vamos mudar esse campo para 90. Isso o tornará muito mais amplo. E para a altura 20, quando terminar, centralize-a dentro da tela. Vejo que pular esta etapa é a próxima, mas podemos ter uma camada de texto simples para isso. Lembre-se de pressionar Escape para terminar de editar sua camada de texto Este item não receberá um botão, não receberá um retângulo porque temos um laptop e precisamos de outro para a conta Creighton. Vá acima do botão enviar, mantenha pressionada a tecla Alt e arraste a cópia. Uma coisa, porém, procure esse símbolo no cursor, não este. Isso não vai ajudar. Então é isso que você está procurando. Agora, arraste-o para baixo e altere o texto para criar um login com barra de conta. Então, isso é criar um login de barra de conta. E, como sempre, você terá que selecionar a moldura e centralizá-la, não os textos. A propósito, o texto faz parte da moldura e já está centralizado. Não. Em vez disso, você quer esse quadro centralizado dentro do quadro grande, que normalmente chamo de tela. Agora, se você não conseguir 100%, não se preocupe, tudo bem. A coisa é bem simples. Se você clicar com o controle na camada, não poderá usar essas ferramentas de alinhamento. Então, isso é um sinal claro de que você não selecionou a moldura. Mas agora, quando eu faço isso, eles estão iluminados. Nós podemos usá-los. Incrível. Então, no geral, esta é nossa primeira tela tratada. Vamos continuar depois de uma pausa rápida. 13. Configure a base para a tela inicial: Bem-vindo de volta. Você pode chamar a segunda tela, a tela inicial, porque é o que você normalmente obtém quando abre o aplicativo, supondo que seu registro diminua o zoom mantendo pressionada a tecla Control e usando a rolagem do mouse, em seguida, abra espaço e duplique toda a tela. Se houver espaço, Figma o colocará automaticamente no lado direito quando você usar control the awesome. Agora exclua tudo dentro disso, exceto o campo de localização. Essa é uma boa chance de lembrar nossas proporções. Portanto, a barra de status, acordo com o Google Material Design, deve ser 720 por 48. Então pegue a ferramenta de retângulo e adicione-a. Novamente, 720 é a largura padrão dobrada e 48 vem do guia oficial. É 24 dB, mas, novamente, dobramos, então é aí que temos o quê? Vamos deixá-lo em branco, retangular qualquer cor aleatória e posicioná-lo corretamente na parte superior. Para o campo de localização, podemos usar este para criar a barra de ação, arrastá-la para cima junto com essas camadas de texto e redimensioná-la para 720, é claro, em 112. Então, são 112 pixels. Certifique-se de alterar a cor, se necessário. Queremos vê-los como duas coisas distintas. Mesmo que no final possamos tê-los da mesma cor, queremos que sejam dois separados neste momento. Ok, agora vamos lidar com as camadas de texto. Então, precisaremos do filtro e da pesquisa da cidade. Então, filtre e pesquise cidades. O primeiro é para o lado esquerdo, enquanto os outros dois para o lado direito. Esta é uma situação em que você está, a velocidade é muito importante. Veja, não há nada muito difícil acontecendo aqui, mas isso leva tempo. É por isso que você precisa praticar e levar essas etapas a sério. Você não pode fazer coisas avançadas se não dominar o básico, como esses aqui. Para o menu suspenso, vamos usar a ferramenta de polígono. Um dos poucos casos em que você pode realmente colocá-lo em funcionamento, segure a tecla shift e comece a arrastar. Agora, isso vai te dar um retângulo perfeito mantendo pressionada a tecla Shift. Em seguida, mova o cursor para o lado para girá-lo. Basicamente, queremos o ponto para baixo. Não tenho nenhum tamanho específico em mente, apenas bem pequeno. Agora tudo bem, está tudo bem. Agora fica interessante. Lembre-se de que queremos exibir o maior número possível de restaurantes sem espremer e bagunçar todos os elementos. Então, vamos começar com um retângulo de 600 por 400 pixels. Pois isso cobrirá a maior parte da largura da tela. E também teremos uma proporção decente para começar. Agora, o tamanho real será configurado posteriormente. Ok, coloque-o logo abaixo da barra de ação. Para o conteúdo. Vamos usar um falso, mas não o Lorem Ipsum. Então esse é o texto em latim. Lorem ipsum é apenas um preenchimento de textos latinos. Então, vou criar algo sozinho para o título, vamos escolher qualquer sobremesa que tenha ao lado. Vamos jogar algo assim. Tempo de entrega, qualquer que seja, 30 min. Certo? Quanto à categoria, o resumo diz que é dupla. Então, é um para o tipo de comida e outro para o tipo de culinária. Não tenho certeza se isso faz sentido para mim, mas é o que é. Então, o primeiro deveria ser Desert e o segundo internacional, eu acho. Novamente, isso realmente não importa. Só queremos apresentar algumas informações. Portanto, temos algo com que trabalhar para a classificação. Vamos com qualquer coisa, 92 por cento dos 24 votos. Então, isso cobrirá todos os elementos de acordo com o wireframe e o resumo. Então, selecione tudo assim e veja se podemos encaixar pelo menos dois deles em uma única tela. Lembre-se de que esse é um requisito importante. E, de fato, neste caso, podemos acomodar dois restaurantes inteiros, embora isso seja apenas um rascunho. Nada sobre isso, é preciso. Então, temos que tomá-lo com um grão de sal. Agora, vamos resumir. Até agora, recriamos as duas primeiras telas do wireframe com o objetivo de ter algo com que trabalhar. Nas próximas palestras, falamos sobre estar ciente do impacto de nossas decisões. Especificamente sobre como será a aparência de todo o aplicativo quando tivermos caixas de telas com uma tela forte desde o início. Te vejo em um segundo. 14. Esboço a tela de detalhes do restaurante: Bem-vindo de volta. Precisamos passar para a tela de detalhes do restaurante chamada número três, onde todos os pratos estão listados. Então, sem mais delongas, vamos começar a trabalhar. Então, copie-os, mas faça. E vamos começar com uma abordagem de cima para baixo, substituindo o título por qualquer nome aleatório de restaurante. Vamos chamar isso principalmente de entrega de pizza. Isso soa italiano o suficiente, certo? A maioria das entregas de pizza, o menu suspenso e o filtro precisam ser removidos, mas manteremos o último e o renomearemos. Isso deveria dizer inflamação. Isso também será um ícone, mas isso será mais tarde. Ao clicar nele, você verá endereço do restaurante tela de endereço do restaurante 15 e as visualizações dessa tela 16. Então é isso que vai acontecer quando você clica na inflamação. Como eu disse, não precisamos de um ícone no momento porque ainda estamos nos estágios iniciais. Ok, se dermos uma olhada no wireframe, podemos ver que temos algumas guias, mas não está claro se elas são fixas ou roláveis. Vamos começar com uma versão fixa e vou usar algo como café da manhã, almoço e jantar como meus itens principais. Agora, isso significa que o design da aba, então, um retângulo de 240 de largura será necessário para o item ativo, porque, novamente, dois para t vezes 3720. Ok, vamos copiar a barra de ação e reduzi-la para 96 pixels. Obviamente, altere sua cor para que possamos ver o que está acontecendo agora de volta ao tamanho do momento. Portanto, 96 é grande o suficiente do ponto de vista da usabilidade, mas pequeno o suficiente para não ocupar muito espaço. Esse também é o valor recomendado e o guia oficial, 48 dB. Vamos remover as listagens abaixo porque não precisamos delas. Criaremos a primeira camada de texto depois de definir nosso retângulo que nos mostra o item de menu ativo. Então pegue a ferramenta de retângulo e clique em uma entrada de 40 por quatro pixels. Use o painel de propriedades para isso. Portanto, isso pode ficar em branco por enquanto, totalmente preto, mas certifique-se de colocá-lo corretamente na borda inferior do fundo das abas, no lado esquerdo, é claro. Agora, como essa é uma guia fixa, teremos que ter camadas de textos visuais. Portanto, nem um único com três, mas sim os individuais, e o primeiro será o café da manhã. Ele deve ser escrito na fonte padrão. Realmente não importa a aparência. Mas, se necessário, você pode mudar a cor para ver o que está acontecendo. Agora podemos alinhá-lo rapidamente selecionando-o ao lado dessa camada abaixo dela. Então, isso lida com o alinhamento horizontal. Simplesmente assim. A vertical desmarca e, em seguida, captura a camada de texto com o plano de fundo principal e, em seguida, usa o comando de alinhamento vertical, desse jeito. Então, isso nos dará um resultado perfeito em pixels, mesmo que você não consiga realmente vê-lo. Agora, o fato é que eu nunca desloco a camada de texto por causa dessa quarta camada de pixel aqui, que bagunçaria muito as coisas, então, por favor, nunca faça isso. Ok, agora, os outros itens serão fáceis, duplicados com Alt e Shift e, em seguida, renomeados como centro de almoço dentro da tela com centros horizontais alinhados. Incrível. Finalmente, para o jantar, temos que repetir o processo, mas aqui está o que vamos fazer. Agora vamos mover temporariamente a guia ativa para a direita. Vamos alinhá-lo assim. Então é aqui que a moldura realmente se torna útil. Podemos mover esse cara rapidamente sem problemas, sem precisar selecionar mais nada. Ok, agora podemos obviamente movê-lo e depois alinhar aquele liso sedoso. Até agora. Obviamente, lembre-se de continuar em sua segunda visualização para obter a melhor experiência de aprendizado. Há muito o que fazer. E se não mantivermos uma base decente, serão medidores. Ok, coloque-o de volta no lado esquerdo e então podemos continuar. Vamos dar uma olhada no wireframe mais uma vez. Lembre-se de que esse não é o fim de tudo, mas de tudo, do nosso design. Podemos experimentar vários registros se tivermos alguma ideia. Mas, por enquanto, vamos manter as simples na primeira tentativa. Nessa tela específica, isso significa um layout de um cartão. Se não estivermos satisfeitos com isso, podemos tentar uma abordagem diferente. Apesar disso. Eu realmente não gostei do design de duas colunas que vimos no vídeo anterior. Agora temos que criar uma pasta de imagens. Vamos começar com isso. Um suporte de imagem ou uma miniatura para cada item. Acho que isso precisa ter uma forma um pouco quadrada, provavelmente um pouco larga. Então, vamos começar com um retângulo regular com o tamanho de, digamos, 225 por 1AD. Como eu disse, não é quadrado, mas não é muito alto porque vimos, não parece muito bom. Coloque-o a 30 pixels dos pincéis. A principal coisa com essa imagem é a proporção. Não use algo extremo que obrigue restaurantes a fornecerem fotos super amplas ou super altas. Isso vai ser um problema. Lembre-se de que o fígado e o food panda não tinham um bom sistema instalado. Aguarde o título e a descrição. Eu tenho algo preparado em um bloco de notas. O título pode ser um airbag. Bem, por enquanto, novamente, isso realmente não importa, mas usar algo autêntico faz um pouco mais de sentido. A descrição deve ser uma camada de texto de parágrafo. Então clique e arraste. Porque talvez queiramos mudar o conteúdo rapidamente. As linhas devem ser suficientes , embora possamos reutilizá-las apenas para fazer isso. Veremos se você quer usar texto fictício. Eu recomendo lipson.com. Este é o melhor lugar para isso. São textos falsos em latim que apenas preenchem essa área. Ok. Voltando ao anúncio, precisamos ter um preço, digamos 14 dólares. Essa será a terceira linha nesta lista. Portanto, temos a descrição do título e, em seguida, o preço. Ao lado do preço, vamos colocar o peso do produto , mencionado no resumo. Então, vamos escrever os 150 g, ok, e logo ao lado, precisaremos de um texto para adicionar ao carrinho. Embora provavelmente isso seja um botão, talvez um ícone. Ok, me dê um segundo para resolver tudo. Gosto de alinhar tudo com precisão, mesmo que não seja absolutamente necessário neste momento. Idealmente, queremos um caminho imaginário claro. O que o usuário fará é olhar a miniatura , depois o preço, depois o título, o peso do produto clicar em Adicionar ao carrinho. Provavelmente algo nesse sentido. Então, vamos tentar fazer com que isso aconteça com o tamanho e a cor. Mesmo que as coisas estejam praticamente agrupadas. Vamos embrulhar as coisas com uma divisória. Podemos usar a tecla de atalho da ferramenta de linha L. A largura precisa ser 656. Você vai ouvir muito esse valor. E vou explicar por que esse é o caso um pouco mais tarde. A altura em pixels. Isso deve ser colocado a 30 pixels da foto, da miniatura. Ok, isso está feito. Então, vamos agrupá-lo e fazer muitas cópias. A ideia é preencher a tela inteira com clones para ver onde estamos. Temos uma noção melhor das coisas apenas olhando para ver quantas cabem. Idealmente, queremos seus subprodutos, mas com cerca de quatro e um pouco, agora eu posso viver com isso. Além disso, talvez consigamos ganhar mais espaço quando começarmos a refinar o layout. Enquanto isso, vamos fazer uma pausa rápida. Obrigada. 15. Conceitos de design para a tela de localização (1): Bem-vindo de volta. É hora de começar sem o design de um aplicativo de entrega de comida . Temos algumas telas sólidas que aguardam atenção. Então, vamos começar com a tela de localização rotulada como número um no wireframe. E a primeira ideia que quero experimentar como imagem de fundo completa, que é uma escolha popular nesse nicho. Para encontrar ótimas fotos, totalmente gratuitas, use unsplash.com. Se o projeto tiver um orçamento decente, você também pode usar o Adobe Stock, o que é absolutamente fantástico. Mas vamos ficar com o gratuito. Aqui. Estamos procurando a comida e vamos baixar tudo o que desperta ou interesse. Idealmente, uma imagem de cima provavelmente ficará melhor, mas vou manter a mente aberta sobre isso. Quando eu ver algo interessante, vou clicar no botão Download. Portanto, o processo é simples. Escolha várias fotos e salve-as no seu computador. Já tenho alguns selecionados, então não vou perder seu tempo, mas prometo que os escolhi exatamente como eu disse. eu os rotulei de 1 a 6, para que possamos facilmente trabalhar entanto, eu os rotulei de 1 a 6, para que possamos facilmente trabalhar juntos novamente em sua segunda visualização. Agora você pode arrastá-los para o Figma, mas serão enormes, isso não é uma boa maneira de trabalhar. Então é isso que eu proponho. Pegue a ferramenta de retângulo e adicione uma à moldura, tamanho aleatório, nada em particular. Em seguida, no painel de propriedades, torne-o tão grande quanto a moldura, 720 por 12 80, alinhe-o à esquerda e à parte superior para que cubra tudo. Agora, isso é porque ele fica em cima de todas as outras camadas. Os efeitos vão para o painel Camadas e descobrem que ele está destacado, que ajuda a clicar, arrastá-lo e movê-lo para baixo na última posição. Vamos usar esse retângulo para colocar nossas imagens dentro dele. Para fazer isso, vamos usar o Control Shift K. Mas se você não gosta dessa tecla de atalho, basta clicar aqui. Aqui está, controle Place Image mudará o portão. Isso abrirá uma janela do navegador e você poderá procurar as fotos baixadas. Eu sempre os salvo no meu desktop para que eu possa encontrá-los rapidamente. Ok, vamos tentar a imagem numerada um. É aqui que a mágica começa a acontecer ao procurar uma imagem interessante que ofereça um bom contraste para o logotipo e todas as outras ações que estão disponíveis na tela. Portanto, lembre-se de que a palavra mostra vários pratos de espaguete e algumas taças de vinho. Portanto, está alinhado com o aplicativo, com a vibração. Agora, a primeira pergunta é: o logotipo seria branco ou uma cor sólida? Se optarmos pelo branco, precisaremos escurecer essa imagem. Se quisermos torná-lo com uma cor mais sólida que o plano de fundo, precisa ser o mais simples possível. Então, vamos ver o que é o quê. Primeiro, vamos fazer uma sobreposição de cores, assim dizer, para a opacidade, acho que cerca de 50%, isso deve nos dar um contraste decente. Lembre-se de que a ideia é testar as coisas, não ter a sorte perfeita. Agora vamos deixar o logotipo branco. Este é outro PNG, mas sim um SVG. Resumindo, isso significa que podemos redimensioná-lo sem perder a qualidade. Além disso, podemos alterar o preenchimento diretamente no painel Propriedades. Se fosse um PNG, não poderíamos fazer isso. Então, isso é bom. Ok, isso é muito bom. Agora, o que a maioria dos iniciantes não entende é que os logotipos não precisam bater na sua cara como um saco de tijolos. Basta pensar no que o fígado que fizemos, embora na tela inicial da listagem, eles usem a versão mini de seu logotipo. Ok, então voltando ao nosso design. Um fundo escuro faz sentido, especialmente porque o campo de texto provavelmente será branco. Isso faz sentido. Então, vamos fazer isso acontecer. Vamos aumentar o raio das coordenadas dos retângulos para cinco pixels para que pareça um pouco melhor, um quadrado um pouco mais moderno, as coordenadas são muito parecidas com 2005. Agora, para os botões, vamos fazer os mesmos cinco pixels, mas vamos torná-los talvez de um verde brilhante, algo assim. Só para ver como seria uma chamada à ação irregular. apresse e tente cortar algumas coordenadas amostrando cores aqui e ali, tudo usando o painel de propriedades em várias camadas. A ideia é ser o mais rápido possível, ok, com as novas cores, temos que mudar as camadas do texto para branco. E, por favor, não se esqueça de pular esta etapa. Está lá, mas você pode não ver muito bem. Então, muda de cor também, talvez sua posição ou ambas. E que na parte inferior da tela, pode parecer um pouco melhor. Então, vamos tentar isso. Então, a ideia é não podemos julgar essa sorte porque temos que compará-la com outra coisa. Sem falar que esses são apenas traços amplos, sem fazer detalhes finos ainda, apenas movimentos rápidos. Então, estamos procurando a direção geral. E uma vez que tenhamos algo em mente, depois do, vemos que isso parece muito bom, podemos voltar e refiná-lo com perfeição. Portanto, o logotipo pode precisar ser levantado um pouco, mas não muito para tocar a borda superior. Pegue a Ferramenta de Texto e vamos escrever a live logo abaixo do Fed que possamos ter uma ideia melhor do para que possamos ter uma ideia melhor do que é a formatação. Mantenha a fonte padrão, mas deixe-a em negrito. Vamos ver, 60. Então, bastante mochila. Ok, isso pode funcionar, mas vamos centralizá-lo e tentar algumas outras imagens nesta versão. Lembre-se de que a tecla de atalho é Control Shift homossexual. Mas primeiro talvez você queira selecionar o retângulo inferior, manter o controle pressionado e clicar nele. Simplesmente assim. Agora podemos usar tecla Control Shift para selecionar a segunda imagem. Ok, vamos colocar a segunda foto e você notará que a sobreposição preta vai desaparecer. Não se preocupe. Ainda podemos ter uma ideia do que está acontecendo. Podemos colocá-lo de volta mais tarde. Então, a foto número dois , está um pouco vazia demais para funcionar. Precisamos de algo rico, extravagante e interessante para ver. Essa lacuna no canto inferior esquerdo não vai aumentar, não é boa. Então, vamos passar para a foto número três. Ok, vamos dar uma olhada. Isso é o que alguns amigos comem juntos. Então, esse é um conceito muito bom. Mas a proporção não é tão boa. Então, perdemos boa parte da foto. Não está muito claro o que está acontecendo. Pode funcionar, mas não tenho certeza. Vamos tentar a imagem número quatro. Então, vamos ver o que é o quê. Isso definitivamente funciona. E acho que ele preenche todas as caixas certas. Acho que é uma boa escolha e imediatamente se destaca. Tem uma vista de cima. Oferece comida multicolorida interessante. A mesa de madeira tem um toque agradável e aconchegante. Muito bom, muito bom. Mas não vamos parar ainda. Vamos continuar. Então, foto número cinco. Ok. Isso funciona bem. Novamente, é muito bom, mas acho que o anterior é um pouco melhor. O principal problema aqui é a comida mostrada. É uma salada de ovos, onde um grande público espera comida de boa qualidade. Não estamos falando sobre lidar com a gerência, não falaria de bons restaurantes. Então, essa salada de ovo não é o look certo para isso. hambúrgueres além de coisas Acho que hambúrgueres além de coisas assim se encaixam um pouco melhor. Em seguida, imagem número seis. Tem uma aparência rica e abundante, mas eu não sou apaixonada pela comida em si. É muito focado em sobremesas. Vemos alguns ovos na parte superior, mas parece estar mais inclinado para desertos, mais para doces. Podemos mantê-lo como backup, mas a opção parece melhor até agora. Então, vamos trazê-lo de volta. Ok, quando estiver pronto, adicione a sobreposição preta pressionando o símbolo de mais. Novamente, 50 por cento. Eu acho que é muito bom. Temos um contraste muito bom aqui. Agora, isso levanta a questão: o que mais poderíamos fazer aqui? Bem, a única ideia que vem à mente é um fundo branco puro ou talvez um padrão sutil. Talvez seja uma cor esbranquiçada, talvez um cinza claro. Agora, eu não vou fazer isso porque aplicativos que são abundantes e brancos, geralmente são sofisticados. Pense no restaurante com estrela Michelin com um grande nome de moda, como um produto. Essas são as marcas que podem usar um design minimalista com muito branco e apenas um toque de cor. Em conclusão, agora vamos ficar com essa foto conceitual número quatro e depois com a sobreposição de 50 por cento Com base no que vai acontecer nas próximas telas, podemos voltar e refiná-la design. Eu vou te ver em um segundo. 16. Conceitos de design para a listagem de restaurantes (2): Bem-vindo de volta. Vamos continuar com a tela de listagem de restaurantes, que é a segunda coisa que eles a usam Veremos que essa é uma das telas mais importantes do aplicativo. Portanto, precisamos experimentar looks diferentes. Desde o início. Eu quero ver uma versão sem fundo, branco puro e outra com um cinza claro que proporcione um bom contraste com o nosso anúncio. Eu tive essas ideias pesquisando a concorrência. E esses são dois estilos muito comuns. Então, basicamente branco e cinza claro. Vamos começar com o conteúdo real. Eu preparei esta imagem de ovos de banco para a imagem da capa do restaurante. Vou colocá-lo dentro desse retângulo usando o Control Shift K, mas precisamos falar de números aqui. As diretrizes oficiais de design de material dizem que precisamos de 16 dB em cada lado, o que significa 32 Pexels em nosso caso. Vamos fazer as contas. 720, a largura do quadro -64, os dois em cada lado, isso significa 656 pixels. Então, esses são nossos retângulos com os mesmos de nossas divisórias depois da UE. Os tamanhos do painel de propriedades, Os tamanhos do painel de propriedades por favor, centralizem mais uma vez, essa é sempre uma etapa muito necessária. Provavelmente ficará melhor com coordenadas ligeiramente arredondadas. Então, vamos usar cinco pixels para o raio da coordenada. Vamos pressionar Shift R, para que possamos adicionar alguns guias. Não são absolutamente necessários, mas acho que podem ajudar. Agora podemos arrastar as guias do lado esquerdo da tela. Assim mesmo. Enquanto estamos nisso, vamos excluir a segunda entrada. Não precisamos disso. Ok, então vamos falar de hierarquia. Temos alguns itens aqui. E a pergunta é: qual é a mais importante? Agora, vou ter que dizer o título, mas muito perto disso vem a classificação, pois esse é o principal valor do aplicativo. Em seguida, vem o prazo de entrega, que certamente é um fator decisivo. E, finalmente, em quarto lugar, provavelmente teremos as etiquetas relacionadas ao tipo de alimento. Portanto, eles podem ser usados rapidamente para filtrar tipos de alimentos e cozinhas semelhantes. O usuário pode tocar neles em qualquer um deles, e a lista provavelmente seria recarregada com esse filtro específico aplicado ao falar sobre a importância, porque é assim que esses itens devem ser estilizados e colocado, isso realmente o afeta. Então isso é hierarquia. Então, para a primeira versão, e eu queria enfatizar a primeira versão, vou colocar o título e a classificação na mesma linha por causa do que acabamos de discutir, por causa de sua importância. As tags podem ocupar a segunda linha. E eu gostaria de tentar colocar o prazo de entrega em algum lugar acima da foto, semelhante ao que vimos no aplicativo Food Bandar. Vamos também mover todo esse elemento 32 pixels da barra de ação. Isso se você ainda não tiver feito isso. Agora, sempre que o possível objetivo de simetria, isso apenas faz com que o design pareça muito mais polido. Clientes, eu nunca vou te dizer, Ei, você sabe, a distância em ambos os lados é que os dois, mas do topo, são 44. Mas confie em mim, o cliente saberá disso. Ok, agora para o título, vamos fazer com quatro pixels d e, em negrito, o tipo de letra padrão é totalmente o tipo de letra padrão é totalmente adequado apenas procurando a ideia aproximada. Esse não será o tipo de letra principal. Posso garantir que estou apenas testando coisas para ver se essa importância faz sentido. Então, alinhe o título com a guia esquerda e deixe cerca de 20 pixels entre ele e a imagem da capa. Para o prazo de entrega, acho que vou colocar um retângulo preto no lado superior esquerdo da imagem da capa. Seu tamanho? Bem, algo como 140 por 50 porque não pretendo manter essa camada de texto como está. É muito largo, muito longo. Então, este é um lugar onde podemos mudar as coisas para tornar nossas vidas um pouco melhores. Vou encurtá-lo para 30 minutos a partir de minutos. E eu poderia até adicionar o ícone do relógio ao lado dele em um estágio posterior. Agora podemos garantir que isso esteja bem posicionado e organizado. Precisamos mudar as coisas no painel de camadas para que possamos ter a ordem correta. Mas isso é muito fácil de fazer. Depois de se acostumar um pouco mais com o Figma, você pode começar a jogar com teclas de atalho. E isso vai te ajudar muito. Por enquanto. Fazer isso manualmente é totalmente bom. Em seguida, vamos diminuir a opacidade dos retângulos para, digamos, 30%. Isso realmente vai nos ajudar. Mas a questão é: se isso deve ser mantido em branco com um texto preto em cima ou vice-versa. Agora, eu acho que um retângulo preto onde é um pouco melhor, vamos experimentá-lo. Então, vamos mudá-lo de branco para preto, obviamente sem borda. E então vamos mudar para a camada de texto. Isso precisa ser branco, mas mude para talvez meio ousado, para que se destaque um pouco mais. Quando terminar, selecione os dois, incentive-os . Se você ainda não tiver feito isso na horizontal e na vertical, esse item deve ser colocado no canto superior esquerdo, à direita, mas por que lá e não em outro lugar? Bem, já vi inúmeros aplicativos usarem esse local, então vou seguir essa linha. Fácil, não há nada de sofisticado nisso. Se a maioria das etapas de fazer isso dessa maneira, vamos fazer o mesmo. Agora, as tags podem permanecer como estão, mas vamos alinhá-las à esquerda com o título. Isso é muito fácil porque temos esse guia para a distância, novamente, de 20 pixels entre eles. Acho que está tudo bem. Na verdade, vamos torná-los em cinza médio , algo como 777. Agora, um código hexadecimal tem seis caracteres, mas se você preencher os três primeiros, o programa inserirá os três automaticamente. Quanto à classificação, quero algo semelhante para entregar Drew. Um rosto sorridente está em ordem. Agora, o melhor lugar para os ícones é o Lab icon.com. Mas esteja ciente de que a maioria dos ícones precisa de uma assinatura. Não vou te mostrar como procuro o rosto sorridente porque não há nada de especial, mas você o tem anexado ao portão. Aqui está o resultado final. Talvez você queira saber como escolher ícones de aparência incrível, mas falaremos disso mais tarde. Para o tamanho, 40 por 40 é uma boa opção. Normalmente eu escolheria o tamanho menor, mas é um Eigen muito feliz. Eu gosto muito disso. Então, por que não exibi-lo? Eles disseram que estavam a dez pixels do texto. A propósito, acho melhor deixar a porcentagem em negrito e verde, porque essa é a parte mais importante e a listagem aparece nela do que na linha, tudo bem. Mantenha esses dois na mesma linha do título, mas faça com que o elemento toque no lado direito. Ok, estamos fazendo um grande progresso. Mas não há nada para gritar ainda. Lembre-se, esta é apenas a primeira versão. Mas vamos lidar com a parte superior, porque na verdade ela está me confundindo. Quero avaliar o design do cartão sem distrações. E esses retângulos cinza não são muito bonitos. Então, vamos lidar com isso no próximo vídeo. 17. Configure a barra de status e a barra de ação: Bem-vindo de volta. Gostei do juiz de design no contexto. Agora, poderíamos isolar tudo e focar apenas neste cartão, no empréstimo desta listagem? Claro. Poderíamos, mas por que faríamos? É por isso que eu quero lidar com a barra de ação e a barra de status eu possa ver tudo no contexto e julgar o design em sua totalidade. A primeira opção é uma aparência bem limpa. Ambos os retângulos devem ser brancos, mas teremos que adicionar a sombra projetada à barra de ação para que ela não se perca. Isso é muito melhor do que usar o derrame, então nem considere isso. Agora, para ativar uma sombra projetada, vá para a área de efeitos e clique nesse símbolo de adição. Em seguida, use esse ícone para mudar a aparência. Agora, para as configurações 2.4, mas acho que a opacidade padrão de 25 é um pouco demais. Vamos deixar para dizer 15% e pronto. Pronto para ir. Nada de especial. Agora, continuando, estamos perdendo elementos importantes da barra de status. Então, aqui está um arquivo que pode nos ajudar. Este recurso está anexado e espero que você o use em todos os seus projetos. A ideia é essa não há nada de especial na barra de status. É básico e super simples. Não devemos perder tempo em que eles simplesmente copiam e colam e acabam com isso. Ok, vamos substituir a camada de textos da cidade por São Francisco, escrita em negrito, 40 pixels, preto puro. Esse é o mito do nome do restaurante. Deve ter a mesma aparência. Centralize-o com a barra de ação. Esquerda. Alinhe isso com nosso guia e poderemos continuar. À medida que você se familiariza cada vez mais com o Figma, sugiro que aprenda os comandos para alinhar horizontal e verticalmente. Eles realmente ajudam. Ah, mova o ícone suspenso para se você ainda não tiver feito isso. Finalmente, por uma questão de tempo, vou pular em frente e mostrar os ícones que selecionei para esse lado direito. Eles também devem ter 40 pixels. Centralizou-os dentro do retângulo. Como espero que você veja, usar essas ferramentas de alinhamento é como beber água. Você tem que fazer isso com bastante frequência se quiser se sentir bem. Então, tanto os ícones dos pixels quanto os centralizados, mas e entre eles? Bem, vamos usar 40 mais uma vez, então dedos gordos não serão um problema. Cliques acidentais são muito irritantes. Ah, a propósito, esquecemos o menu de hambúrguer no lado esquerdo. Me dê um segundo enquanto eu lido com isso. Por que é chamado de menu de hambúrguer? São três linhas uma em cima da outra. Então eu acho que parece um hambúrguer. Não faço ideia. Agora, para fazer a mágica da edição, ele adiciona um lindo ícone. Tudo foi retirado do flap icon.com e você os anexou, mas não os use para seus projetos reais. Eu os anexo para fins educacionais para que você possa acompanhar. Você precisará de uma assinatura para usar o ícone do laboratório para seus clientes. Agora, vou usar meu guia para posicioná-lo corretamente e vou deixar 30 pixels entre ele e São Francisco. Novamente, certifique-se de usar centros verticais alinhados nele. Você pode perguntar: por que eu não usei quais são os pixels entre esses dois itens para espelhar o espaço à direita. E isso porque o resumo me diz que isso mostrará o endereço do usuário quando ele estiver logado. Então, vou precisar do máximo de espaço possível. Temos uma última coisa que precisa ser classificada. A seta suspensa deve ser redimensionada para algo como 20 por dez. E acho que devemos colocá-lo mais próximo possível da cidade. Agora, 30 pixels ficariam melhores, mas vou ficar com dez pixels. Sim, estou muito feliz com isso. Agora, depois de tudo dito e feito, selecione todos esses itens e centralize-os dentro da barra de ação. Se tudo estiver em ordem, nada deve se mover. Bem, talvez um ou dois pixels. Certo? Agora, esse é nosso primeiro design. Vamos selecionar o carro, depois faremos algumas cópias. Como eu disse, eu queria julgar isso no contexto. Então, eu gostaria de ver toda a altura ocupada pelos restaurantes. No geral. É um rascunho, mas tem todos os elementos necessários e podemos começar a brincar com eles e criar pelo menos duas das variações. Te vejo na próxima palestra onde faremos exatamente isso. 18. Alternativas de listagem de restaurantes (2): Bem-vindo de volta. Neste vídeo, vamos explorar várias opções para esse cartão. Vamos duplicar a tela inteira, então vamos manter as coisas limpas e arrumadas. Isso também nos ajudará a comparar todas as versões. Agora, antes de começarmos, há muitas coisas avançadas que podemos fazer no Figma. Coisas como componentes, variação e layout automático que podem nos dar flexibilidade e potência incríveis. O problema com eles é confuso para iniciantes. Embora pudéssemos passar algumas horas falando sobre eles e fazendo vários pequenos exercícios que atrasariam seriamente o projeto do aplicativo. Então, meu conselho é esse. Vamos nos concentrar nos princípios essenciais de design. Mais adiante no curso, falaremos sobre esses recursos mais avançados. Parece bom. Vamos em frente. Ok, a primeira coisa que devemos experimentar é um fundo cinza bem claro. E eu realmente experimentei a cor do Dribble que tem um tom de azul. E o código de cores é f, z, porém, F1, F oito. E é muito sutil. Esteja ciente de que não há retângulo definido como plano de fundo. Essa é a cor de todo o quadro. O texto não fica muito bem nesse fundo cinza. Então, vamos criar o retângulo base para este cartão. Aqui está o processo, selecione a imagem clicando nela. Em seguida, amplie a cópia usando o controle D, D como em duplicado. Vá para o painel Camadas e selecione a parte inferior. Ok, agora vamos aumentar a altura para 500. No momento, isso não faz muito sentido. Mas o problema é o seguinte. Remova a imagem de fundo como a que falhou usando o símbolo de menos. Feito isso, podemos adicionar a cor normal, a cor de preenchimento, torná-la branca pura, é claro. E, basicamente, é isso. Agora temos um cartão e o contraste é muito melhor. Agora, claro que o texto não se encaixa e fez outras coisas para corrigir, mas esse é o processo. Então, novamente, duplique, selecione a camada inferior, aumente a altura e depois brinque com a cor de preenchimento. Ok, de volta ao trabalho. Vamos selecionar a imagem e alterar o raio da coordenada na parte inferior. Já usamos esse campo aqui, mas para controlar cantos individuais, precisamos clicar aqui. Meu conselho é que você clique no primeiro e verifique o ícone. Isso lhe contará a história do que é sua logística. Resumindo, queremos 5500. Agora podemos reposicionar as camadas de texto, selecionar esses dois itens e movê-los 30 pixels para dentro. Quanto à distância no eixo vertical, isso não importa muito no momento. Mas tente colocá-los em algum lugar próximo ao meio dessa guarda. O lado direito, a mesma coisa, 30 pixels, mas mantenha isso alinhado com o título nunca enviado. Nessa situação, é uma questão de saber como usar o Control and Shift. Deixe-me esclarecer as coisas. Então, mantenha o controle e clique no título. Agora, obviamente, isso está selecionado, supondo que também quiséssemos pegar a sobremesa, temos que segurar Control e Shift, verificar se há isso no painel de camadas. Portanto, lembre-se de que clicar com o botão de controle ajuda você a selecionar uma única camada. Se você quiser então pegar várias camadas, use o botão Control Shift. Simplesmente assim. Lembre-se de que vamos refazer todos esses ajustes finais quando chegarmos à aula de tipografia, quando realmente escolheremos as fontes. Ok, depois de alguns ajustes, esta é nossa primeira cicatriz, essa é a primeira alternativa. Agora, olhando para eles lado a lado, acho que é uma melhoria, mas, no geral, não estou feliz com esse tamanho. Então, vamos duplicar a tela mais uma vez e tentar outra coisa. Verifique se você tem espaço suficiente. O céu é o limite em Figma. Agora, digamos que encolhemos o carro , digamos, para os Pexels. Isso significa que o retângulo base deve ser de 60 e o interno precisa ser de apenas 360. Dê-me um momento para usar o painel de propriedades. Sou rápido, mas não sou tão rápido. Ok, estamos prontos para ir. Próximo. Precisamos lidar com essas camadas de texto. E é aqui que a destreza realmente entra em ação. Então, rápido, selecione-os e mova-os para cima de 40 pixels. Então, esses são quatro tipos de aqui, a tecla de seta para cima, se você também mantiver pressionado shift. Agora, enquanto estamos aqui, vamos adicionar um toque de cor a essas etiquetas. Eles parecem chatos do jeito que são, além disso, você não saberia, você pode realmente clicar neles. Então, vamos ver o que podemos fazer. Qualquer cor seria boa, mas eu prefiro não usar o mesmo verde da classificação. Eu gostaria de evitar qualquer confusão e fazer com que eles se destaquem um pouco mais. Vermelho ou laranja é o oposto completo do verde. Então, vamos usar algo assim. Agora, o código de cores exato realmente não importa porque vamos configurar o esquema de cores da cama mais tarde. Ainda temos a primeira opção em relação ao cabeçalho. Está bem? Certo. Estou feliz com o novo cartão. E devo dizer que estou muito feliz com a nova proporção da foto. Não é tão alto quanto era antes, mas ainda é generoso e parece muito bonito. Lembre-se do nível em que tivemos a melhor vibração. E acho que muito disso foi uma sensação estranha. Tudo parecia ter espaço mais do que suficiente. Nada estava confuso, nada estava ocupado. Então eu acho que vamos deixar as coisas assim. Agora, vamos pensar no que mais podemos fazer? Vamos fazer uma cópia e menos coisa. Agora, podemos dar às tags cor de fundo sólida para mostrar que você pode realmente tocá-las. Você pode clicar neles. O que significa que uma ação está disponível para o usuário. Mas como eles querem que a classificação tenha sua parcela de atenção, acho que vou colocar isso acima da foto. Então, vamos ao que interessa. Mova a classificação e a coordenada inferior direita da foto. Algo parecido com isso. Obviamente, não podemos ver isso, mas podemos adicionar um preenchimento usando a mudança automática de layout. Eles escrevem o texto e o emoji e selecionam o certo. Use shift a para criar um layout automático. Então, como antes, habilite um preenchimento. Branco puro, é claro, quadrado, não parece ótimo, mas podemos mudar isso colocando um grande valor aqui. Em seguida, vamos adicionar o preenchimento de, digamos, tanto horizontal quanto verticalmente. Isso deve fazer o trabalho. Layout automático agradável e fácil. Tudo para fazer. E no caso de você alterar o texto, torná-lo mais curto ou mais longo, o campo também muda. Essa é uma técnica e Figma que realmente vale a pena aqui. E, a propósito, com um fundo branco, essa é uma das maneiras mais fáceis de obter ótima legibilidade sem fazer concessões. Deixe 30 pixels nas bordas inferior e direita. Como você pode ver, uma vez que eu configurei um valor em minha mente, 30, neste caso, eu o mantenho. Ok. Chame isso de classificação no painel de camadas, caso queira se manter organizado. Isso é um pouco difícil de fazer durante as filmagens. Então eu peço desculpas por isso. Eu estava realmente me concentrando em realmente ensinar coisas para você e meu painel de camadas não é tão bom. Vamos fazer uma pausa rápida e continuaremos em um momento. Obrigada 19. Mais variações para o cartão: Bem-vindo de volta. Vamos lidar com as etiquetas. Vamos usar o layout automático. Mais uma vez, a largura vai variar dependendo do comprimento da palavra. Mas queremos pelo menos 20 pixels em cada lado. Então, sejamos generosos. Essa é uma tecla de atalho que eu adoro. Portanto, certifique-se de se lembrar disso. Ok, isso deve ser laranja com barra vermelha. Mas não se preocupe muito com a sombra. Apenas certifique-se de que o texto branco puro realmente apareça. Realmente vai se destacar. Agora, vou agir bem rápido porque isso é algo padrão. Você deve ser capaz de acompanhar. Mas é claro que você precisa pausar o vídeo com frequência. As coordenadas devem ser arredondadas ao máximo para corresponder à classificação. Estou começando a acelerar, mas espero que você possa acompanhar sem problemas. Agora, o problema é o seguinte. A altura do cartão não é boa o suficiente. Nós simplesmente não podemos fazer isso funcionar. Mesmo que aumentemos um pouco o título, sugiro que mudemos isso. Agora, falando sobre dimensionar as coisas, acho que vou deixar 20 pixels entre as etiquetas. E depois de tudo dito e feito, acho que é assim que deveria parecer. O fato é que nem todas as suas ideias vão ser ótimas e está tudo bem. O essencial é criá-los o mais rápido possível e depois julgá-los olhando para eles lado a lado. Vamos remover o prazo de entrega do canto superior esquerdo. Isso deve ser colocado na mesma linha do título do restaurante para essa variação. Vamos escrever o fígado, no final 30 minutos. A fonte padrão está ótima por enquanto, o que estamos procurando é equilíbrio. Esse cartão está ótimo. Agora, posso dizer que o diamante adora com ele. Posso dizer que essa classificação do lado direito é perfeita. No final do dia, vamos diminuir o zoom e ver todas as opções. Agora, para dar a quinta chance, certifique-se de que tudo esteja bem abotoado. Se você dedicar muito mais tempo ao nosso design, obviamente estará mais inclinado a gostar mais dele. Mas começamos aqui sem fundo e com cartões muito grandes. Essa é claramente a pior. A segunda versão parece boa, mas a terceira é definitivamente melhor devido ao tamanho menor do cartão. Também gostei dessa pitada de laranja. Mas quando comparo essas duas, acho que etiquetas sólidas são um erro, são muito ocupadas e desequilibradas. Ainda assim, valeu a pena fazer isso, mas agora não vou prosseguir. Estou bastante confiante de que não está bem. Gosto da classificação flutuante, mas teremos que trabalhar mais nela. Então, vamos fazer uma pausa e continuaremos com nossas variações e apenas alguns momentos. 20. Variações de listagem de restaurantes finais (2): Bem-vindo de volta. Espero que você esteja se divertindo e trabalhando comigo. Mas é claro que, em sua segunda visualização, neste momento, brincamos com várias opções e sabemos com certeza que queremos continuar com esta versão, mas sem as tags. Então, vamos fazer isso. Crie outra cópia da prancheta mais recente e remova os retângulos laranja. A maneira mais fácil é clicar com o botão direito do mouse e escolher remover layout automático. Ou você pode simplesmente refazer o que quiser. Mas essa é uma boa chance para você saber que sempre é possível remover tudo ou layout. Mas eu gosto dessa cor, então vamos aplicá-la a essas camadas de texto. Removemos o layout automático, mas ainda temos um quadro extra no painel de camadas para removê-lo, clique com o botão direito do mouse e escolha Desagrupar. Isso vale para os dois. Agora vamos dividi-los com um hífen e limpar as coisas. Essa divisória pode ser preta ou algo parecido. Quanto à distância entre eles, bem, eu digo em qualquer lugar de 15 a 20 pixels. A questão é: devemos manter essa posição? Acho que podemos jogar um pouco mais com isso. Então, aqui está minha ideia. Vamos colocar o prazo de entrega abaixo do título, porque o resumo diz que esse é um fator muito importante para os aplicativos dos usuários. Agora, isso significa que os ovos ficarão do lado direito como antes, 30 pixels da borda. Em breve começarei a escolher fontes e isso ficará muito melhor. Agora, durante o intervalo, dediquei um tempo para encontrar o ícone do relógio que combinava com todo o resto. Aqui estão os deles e você pode escolher 30 por 30 ou 40 por 40, o que achar que funciona melhor. O tamanho menor é bom porque não é uma ação, você não pode realmente tocá-lo. 40 pixels é o que usamos na barra de ação. Mas isso é mais apropriado porque você pode realmente clicar neles. Você pode tocá-los. No geral, vou escolher o valor mais baixo por causa disso. Então, reserve um momento e organize tudo entre o relógio e o tempo de dez pixels, por favor. Tudo precisa estar centralizado verticalmente. O ícone do relógio, o diamante de entrega , finalmente, as categorias. E como uma etapa opcional, podemos encurtar os textos para entrega em 30 minutos, se você ainda não tiver feito isso. Acho que está claro que hoje é uma ótima opção. É muito mais curto, é muito melhor. E poderíamos até remover entrega porque temos esse ícone de relógio. Acho que isso ainda faz sentido. Ícone de relógio único e 30 minutos, acho que ele transmite o ponto, mas vamos deixá-lo nesta versão. Finalmente, o design da classificação é muito bom, mas cobre uma parte significativa da foto. Então, aqui está o que eu proponho. Eu me inspirei no fígado devido. Então, eu quero que a classificação fique nessa borda. Isso também deve equilibrar as coisas. O fato é que precisaremos da sombra projetada porque ela é branca sobre branca. A propósito, isso é chamado de botão da pílula, aliás, PEL, como na medicina, porque é bastante redondo. um bom momento para colocá-lo a 30 pixels da borda direita. Mas o problema é o seguinte. Mesmo que essa não seja a fonte final, acho que precisamos brincar com o preenchimento. Não tenho nada específico em mente. É um método de experimentar coisas provavelmente um pouco mais amplo, provavelmente um pouco mais curto. Veja o que você gosta, brinque com isso e veja o que fica melhor. Acho que há muito espaço vazio em ambos os lados. Então, vamos redimensioná-lo, torná-lo o lance, nem eles se divertiram com isso. Na versão ideal, esse formato é tão largo quanto essas duas etiquetas. Mas, é claro, as tags serão alteradas com base nas palavras reais mostradas aqui. O internacional é bastante longo, mas outras categorias podem ser curtas lá. Mas sim, essa seria a situação ideal com a mesma largura. Agora, no geral, acho que essa é uma melhoria maravilhosa em relação ao design anterior. É muito melhor. A sombra, porém, pode ser um pouco forte demais, mas quando não nos sentarmos, ela ficará muito bonita. Acho que seis por cento de opacidade é ótima. Esteja ciente de que a opacidade é controlada a partir deste local. Você também pode usar essa área, mas eu prefiro esse campo. É mais fácil. Ok, agora olhando as coisas, diminuindo o zoom, acredito que essa é longe, a melhor versão. O que você acha? Deixe-me saber na seção de comentários. E, claro, você sempre pode criar sua própria versão. Agora pense que, uma vez que isso seja polido, será um forte 8,5 em dez, e isso é mais do que suficiente. Vamos fazer uma pausa. 21. Criando opções para a barra de ação: Bem-vindo de volta. Vamos voltar para a área superior. No momento, criamos algo muito limpo. Mas esse é o caminho certo a seguir? Aumentamos a largura muito rápido porque queríamos analisar as cartas por baixo sem sermos jogadas fora. Mas acho que podemos explorar algumas opções. Vamos fazer uma cópia, abrir espaço e começar. Então, a primeira coisa que vem à mente, e isso é muito criativo, é usar uma foto para tudo isso, a ideia deles para a barra de ação. E pode ser uma foto de São Francisco, já que esta é a cidade atual. Então, vamos remover a barra de status caiu e expandir a barra de ação e essa região. Agora, por que temos que removê-lo? Porque é muito mais fácil adicionar uma foto dentro de um único retângulo. E se gostarmos, podemos conversar com um programador e ver quanto esforço seria necessário para que isso acontecesse. Sei que é possível que eu tenha feito isso antes, mas não tenho certeza de quão difícil será. Agora, teremos essa discussão, se a amarmos por enquanto, vamos vê-la em ação. Então eu pausei a gravação e fui até o Unsplash para tirar várias fotos da ponte. Aqui estão eles, e vamos repetir o processo na primeira tela. Lembre-se da tecla de atalho da tecla Shift para inserir a foto dentro do retângulo. Então, aqui está o primeiro. Temos alguns elementos que não funcionam em um fundo colorido. Então, neste caso, teremos que torná-los todos brancos, por favor. Nada mais. Apenas oito por perto o amarelo, laranja, o verde-limão, nada disso. Essas são as piores camas do diabo. Agora, estou apenas brincando, mas levo esse conselho a sério. Use somente branco. Agora, isso não parece tão ruim. Obviamente, podemos adicionar outro preenchimento com baixa opacidade para melhorar a legibilidade desse texto e obter um ótimo contraste. Mas, por enquanto, vamos continuar examinando as fotos. A propósito, caso você queira fazer algumas edições rápidas, você pode realmente fazer isso a partir deste lugar. Basta clicar na miniatura e você terá muitas opções ou clicar duas vezes na foto. Esse não é o objetivo desta palestra, então não vou me debruçar sobre isso, mas não, é uma opção. Então, novamente, para editar a foto, você pode desmarcar tudo, depois selecionar a foto e verificar o preenchimento. Clique na imagem. E então você obterá todas essas configurações. Basicamente, você tem muita liberdade. Isso não é Photoshop. Ainda temos algumas opções. Ok, vamos encurtar isso. Em essência, vou usar a imagem número seis, mas você pode conferir as outras por si só. Mas você tem que pensar na estratégia. Queremos realmente chamar muita atenção para o ActionBar? Mas a verdade é que adoramos a simplicidade do fígado, certo? Isso nos afasta disso. Eu não acho que valha a pena. Algumas dessas fotos parecem boas. Mas é isso mesmo. Eles não são incríveis, não são fantásticos. Então eu acho que não devemos complicar as coisas. Vamos descartar essa ideia. Vamos removê-lo porque queremos que o foco seja mantido por baixo, certo? Não no topo, mas por baixo. Mas ainda assim, vamos experimentar. Outra opção pode ser com uma Heather sólida, escrever algo diferente, não branco. Então, em uma nova cópia, vou começar a experimentar algumas cores fortes e brilhantes, algo vívido. Logo no topo da minha lista, tenho verde, laranja, roxo e azul. Agora, vou empilhá-los lado a lado para que possamos dar a cada um deles uma chance justa. Agora, me dê um momento enquanto eu ampliava todas essas versões. Eu vou acelerar bastante. Mas, em essência, não há nada de especial acontecendo aqui. Além disso, não tenho nenhum código de cores específico em mente. O que eu tenho é um lugar no seletor de cores, um pouco mais abaixo, no canto superior direito. Portanto, não está totalmente no coordenador porque esse é o território do néon. Portanto, não há cores de néon, mas apenas um pouco mais abaixo. Aqui estão eles. Agora a pergunta é: você tem um favorito? Você acha que a adoção de qualquer cor é melhor do que a do branco puro? Porque de onde estou, acho melhor mantê-lo branco. As fotos são ricas em cores. E, basicamente, ao pedir problemas aqui, não é que eu não goste deles, mas acho que por que fazer uma opção muito melhor? Acho que é um pouco mais refinado e mais do que sintonizado com o espírito do aplicativo. Agora, se você pensa o contrário, continue com sua escolha e me mostre seu resultado final. Esse é um método de sabor, mas também como interpretamos o resumo. Isso conclui a palestra. Respire fundo e te vejo em um minuto. 22. Conceitos de design para os detalhes do restaurante (3): Bem-vindo de volta. Estamos prontos para passar para o design de detalhes do restaurante. Vamos ver qual variação podemos criar para esse verde. Mas primeiro, vamos atualizar isso. Esses retângulos devem ser brancos. E aquele que segura nossas abas, joelhos que soltam sombra. , lembre-se de que temos No entanto, lembre-se de que temos configurações específicas para o compartilhamento, que é 2.4. Quanto à opacidade, algo que era de 15%, mas talvez você queira brincar com ela. Isso é muito importante ao lidar com sombras, pois pode aparecer na parte superior do retângulo se você não estiver tomando cuidado. Portanto, certifique-se de verificar as configurações. Ok, vamos passar para a barra de status. No passado, eu usava PNGs, então fotos reais para a barra de status, mas é melhor usar um item ajustável. O formato que você espera como SVG. Ou você pode simplesmente copiar e colar este item de qualquer brinde da web. Ok, agora, continuando , precisaremos adicionar alguns ícones. Demorei um pouco para encontrar a seta para trás correspondente e uma informação ALL, e elas precisam ser colocadas exatamente como na tela número dois, todas na mesma linha com uma quantidade apropriada de margem. Acho que podemos ter deixado de adicionar o guia a este quadro de arte. Então, vamos corrigir isso. Adicione qualquer retângulo com 656 pixels de largura. Como de costume, o painel de propriedades é a melhor opção quando você procura o tamanho específico. Em seguida, arraste suas guias. Se você não vê essa parte, habilite seu Lula a usar essa tecla de atalho. Ok, agora remova essa camada extra. É tão fácil quanto isso. Esse é um daqueles truques que eu absolutamente amo. É bem simples, mas funciona. Essa técnica surgiu por necessidade e somente um freelancer que realmente valoriza seu tempo tem esse tipo de abordagem. Se você ver alguém movendo uma guia pixel por pixel com este mouse, esquerda, direita, esquerda, direita. Então você sabe, ele está muito relaxado. Onde está o negócio. Coloque esse ícone de informações ao lado do guia. Ok, quando terminar, repita para o outro lado, mas não se apresse e certifique-se de fazer isso da maneira certa. Obviamente, a maneira mais fácil de organizá-los é secar a caixa grande que envolve todos eles. Em seguida, pressione o comando Alinhamento e você terá dado um grande passo. Deixe 30 pixels entre a seta e o título. Portanto, é agradável e arejado. A fonte padrão não ganhará nenhum prêmio. Faremos os retoques finais na próxima palestra. Isso é um pouco arriscado, torna tão grande, mas resolveremos tudo em breve. Agora, a ideia principal aqui é permanecer consistente. Não gosto de usar valores diferentes em telas diferentes. Finalmente, para as guias, vamos fazer isso. Selecione todos eles de uma vez pois essa é a maneira mais inteligente de trabalhar. Em seguida, altere a orientação para o centro. Isso faz com que eles fiquem parados porque meu plano é aumentar esse tamanho para 24 pixels. Além disso, vamos mudar o peso de normal para ousado. Para a cor, no momento, preto é totalmente bom. Passamos muito tempo organizando-os com a ajuda dessa linha que mostra a guia ativa. Não quero que esse esforço seja em vão. É por isso que mudamos a orientação. Ok, vamos seguir em frente. Selecione o primeiro guarda e faça algumas cópias. Então, isso parece um pouco mais realista. Veja a linha como exemplo. Se não for do tamanho certo, ou seja, 656 de largura, podemos editá-lo rapidamente com precisão. Selecione isso e use o tipo de painel de propriedades em 656 e mova-o para o lugar certo. A propósito, essa também é uma ótima chance de usar o campo x. Então x é o acesso horizontal. Então, se digitarmos 32 pixels aqui, isso significa que a camada será colocada 32 pixels da borda esquerda da tela. Então x começa do lado esquerdo, y começa do topo. Agora, novamente, é aqui que precisamos fazer algumas edições manuais. No momento, o Figma não tem um ótimo recurso que o Adobe XD tem. E isso é Repeat Grid. Bem, não no momento desta gravação. Então, para mudar rapidamente todo esse conteúdo, teremos que fazer isso manualmente. Me dê um segundo enquanto eu lido com isso. Essa é uma ótima chance de praticar sua velocidade. Por favor, nunca mostre um design com o mesmo conteúdo repetidamente. Nem para mim, nem para seu cliente, nem para ninguém. Isso mostra que você é preguiçoso e confie em mim, você não quer esse rótulo. Isso não é difícil de fazer. É uma questão de seguir em frente. Portanto, reserve um tempo e substitua quase tudo. E com isso resolvido, podemos continuar. Por exemplo, podemos nos concentrar em Adicionar ao carrinho, que é a principal ação neste verde. Procurei muito e decidi usar esse símbolo positivo. Isso também é do ícone plano. Pelo que entendi, quando você toca em toda essa região , em toda essa área, o produto é automaticamente adicionado ao carrinho. Embora ainda não estejamos na fase de estilização, altere a cor da divisória para que não distraia tanto . Um cinza muito claro, como o ddd deve funcionar muito bem como uma solução temporária . E sim, a propósito, você pode adicionar couros nessa área, um HEXACO, o código de cores pode conter não apenas números, mas também letras. Portanto, o DDD é um código de cores real. Agora, a hierarquia da triagem, mas sim , também deve ser mostrada aqui. Então, vou deixar o título, o preço e o peso em negrito. Podemos configurá-los para 30 pixels. Embora isso possa ser um pouco complicado. Assim que começarmos a rodar, podemos ter uma noção melhor de todo o espaçamento. A propósito, mova o título para baixo , se necessário, essa é uma etapa opcional. O ideal é que o título esteja alinhado na parte superior da foto, com a miniatura à esquerda. O preço espera, um ícone deve estar alinhado na parte inferior com a miniatura, mas como uma unidade inteira, para que tudo fique na mesma linha. Enquanto isso, queria lembrá-lo de que quero ver dois designs seus. Um, uma réplica perfeita com exatamente os mesmos ícones, tamanhos de fonte e cores que você vê no curso. E outro que é só você. Isso significa novas fotos, novas fontes, novos ícones, novo layout, as obras. Também quero ver conteúdos diferentes. Não publique seu trabalho exatamente como você vê aqui. Escolha diferentes nomes de restaurantes, seus ovos, preços, receitas, etc. Agora, antes de continuarmos, faça esses dois itens de menu. grau 777 é o que usamos até agora. Isso porque queríamos mostrar que eles não estão ativos, não são clicáveis. Ok, agora vamos ver o que podemos fazer aqui. Eu tenho duas grandes direções. Então, uma é usar uma foto em vez da barra de ação, que pode funcionar melhor do que na tela número dois com a Ponte de São Francisco. E a segunda coisa é fornecer ao cliente uma versão de tag rolável em vez do design fixo de três abas. Então, vamos fazer isso no próximo vídeo. Depois de uma pausa rápida. 23. Variação para os detalhes do restaurante: Bem-vindo de volta. Vamos criar uma cópia e começar a trabalhar na primeira variação dessa tela. Vamos remover o retângulo da barra de status e elevar a barra de ação. E isso porque queremos adicionar uma imagem nessa região. Mas o problema é o seguinte. Podemos tornar essa área ainda maior, embora não seja tão comum. Nós temos essa opção. Do meu teste. Uma altura de 270 pixels funcionará muito bem. Então, isso é 270. Obviamente, as abas precisarão ser movidas para baixo junto com todos os nossos pratos. Lembre-se de trabalhar de forma inteligente para ver melhor no que estamos trabalhando. Mude a cor de fundo para algo como cinza. Dessa forma, saberemos por onde as guias precisam começar. A ideia é criar algo parecido com o Food Panda. Eles poderiam cronometrar porque há muitas camadas. Eu sempre recomendo que você aumente e diminua o zoom para ter uma ideia melhor do que está fazendo. Com essa mudança não poderemos mais caber cinco pratos completos, mas acho que quatro é bom o suficiente. Agora podemos começar a construir em cima dessa camada na barra de ação, vamos adicionar os restaurantes na capa da foto. Nesse caso, é uma imagem de um Beta. Eu já tenho algo preparado. A tecla de atalho controla Shift K ou use o comando Inserir imagem abaixo da ferramenta de retângulo. Tudo nessa área precisa ficar branco, incluindo os ícones da barra de status. Isso vai levar um minuto, mas eu tenho a magia da edição do meu lado. Ok, agora, obviamente não podemos ler o texto, mas vamos adicionar outro preenchimento. preto puro, é claro, brinca com a opacidade, talvez 40 por cento, mais ou menos, 50 por cento. Veja o que você gosta. E aí está. Incrível. Isso parece muito bom. Lembre-se de que agora, no modo de iteração, com apenas versões lançadas, criando versão após versão. Embora a barra de ação não esteja presente em si, ainda precisamos de duas camadas, que são a seta para trás e o dipolo. Agora vamos descartar o ícone de informações porque ele se perde na mistura. E vamos mover os elementos de classificação algum lugar no meio desta parte. Isso não é 100% obrigatório. Mas acho que é um toque agradável, certo? Porque essa é a foto do armário do restaurante. Então, acho que ter a classificação aqui faz sentido. Pegue a classificação de qualquer uma das telas anteriores que criamos. A sombra projetada pode precisar ser intensificada, mas não fará muita diferença. Mesmo se você atingir 50 por cento, a opacidade da sombra, ela dificilmente será visível. E lembre-se, estamos usando nosso computador, podemos ampliar um telefone. Você não vai notar isso. Confie em mim, quando tudo estiver dito e feito. É assim que a variação vai parecer. Agora, pessoalmente, gosto mais da versão limpa do que da versão limpa, mas é tudo uma questão de gosto. Gosto de deixar o cliente decidir que é realmente um jogo de azar. Então, vou manter as duas versões no meu bolso e podemos passar para a opção de toque rolável. Vamos usar o conceito inicial para isso. Portanto, a guia rolável é algo do Google Material Design. É basicamente uma das duas opções, fixas, que já temos. Então, agora vamos fazer o segundo. Quando você faz cópias, todas elas devem estar lado a lado. Aqui, a principal diferença é que os itens do menu são colocados em uma única camada de texto e, em seguida, empurrados para a direita. Remova esses dois e crie cinco ou seis categorias de alimentos. Eu tenho algo mal preparado no nodo, mas você pode inventar algo sozinho. Eu só vou colar. Então, aqui estão, agora existem duas opções em relação aos dabs roláveis. Potencialmente, você poderia simplesmente aproximar isso, improvisar e simplesmente alinhar tudo como achar melhor. Ou você pode fazer isso usando as medidas oficiais, que é o que vou fazer. Primeiro, vou reduzir a largura do retângulo para um AD, que é o mínimo de acordo com o guia. Então foi 240. Agora será 1AD. Em seguida, isso deve ser colocado em 140 pixels de distância da borda esquerda, 10. Para lembrar como fazer isso, você pode usar o campo x no painel de propriedades. Novamente, por que E104? Isso é das diretrizes de design de materiais. Excelente. Agora, em relação a isso, minha primeira guia, ela precisa estar alinhada horizontalmente com o retângulo. Mas é claro que isso é um problema porque a camada contém muitos itens de menu. Então, nesse caso, vamos ter que aproximar isso. Agora, poderíamos ser precisos adicionando um retângulo em cada lado e fazendo algumas idas e vindas manualmente. Mas é bom olhar para isso. Eu tenho muita experiência, então vou me sair bem. Agora, quando terminar, mude a cor, o Volga, as abas para um cinza desbotado. Precisamos mostrar que está inativo. O código de cores que escolhemos é 777. Agora, há uma coisa que eu gostaria de abordar. Você pode estar curioso sobre o fundo e por que eu o deixei branco. Poderíamos experimentar uma cor esbranquiçada. Já temos uma cor, o código, mas no final, decidi não incluí-lo. Experimentei fora da câmera quando não estava gravando e não parecia certo. Só para que não haja segredos. Veja como isso seria. Está enlameado, sujo, ocupado, longe da aparência AV que queremos criar. Agora poderíamos potencialmente adicionar um fundo, o fundo branco, um cartão para cada prato. Mas isso é outra coisa que eu decidi não fazer. O raciocínio é simples. Então, número um, seria espaço de pressão. Mas, mais importante ainda, esta é uma lista, então as cartas não pertencem aqui. De acordo com o Guia oficial de Design de Material, todos esses itens pertencem um ao outro. Então é por isso que não vamos dividi-los em cartas separadas. No final do dia, essas são as opções relacionadas à tela número três. Precisamos escolher uma fonte ou um esquema de cores e aplicar alguns toques finais. Não tenho outras ideias, variações para esse verde. Acho que é hora de seguir em frente. vejo em um momento. 24. Escolhendo o melhor tipo de rosto: Bem-vindo de volta. É hora de falar sobre topografia e usaremos o mesmo processo iterativo nessas poucas telas. Portanto, selecione as melhores versões e coloque-as lado a lado para que possamos alternar rapidamente entre elas. Se você estiver indeciso no final, tudo bem, mas escolha três telas diferentes para que possamos explorar cada vínculo em várias situações. Eu já separei o meu aqui e vamos trabalhar nas cópias. Vamos simplificar com um único tipo de letra que tenha pelo menos dois pesos. Então, isso é normal e ousado. Se tiver mais, ótimo. Mas outro fator é o tamanho. Então, o que queremos é a fonte seja a menor possível. E eu estou falando de kilobytes aqui. Então, se estivermos indecisos sobre duas fontes semelhantes, optaremos pela menor. Então, 600 kb versus 200, claramente 200. O que estamos procurando é uma fonte sans serif porque queremos uma boa sorte. Finalmente, o ponto de busca mais importante é a personalidade. Então, queremos algo parecido com o que entregue, que tenha uma personalidade arredondada, interessante e com um pouco de personalidade que agregue valor ao design. Agora, você pode estar coçando a cabeça sobre isso. O que significa personalidade? Bem, vamos colocar desta forma. Se usarmos Arial, não ganharemos nenhum prêmio. Em meu livro, desenvolvi um amor por tipos de letra que passam despercebidos. Eles são muito simples, não chamam a atenção de forma alguma. Aí está, o insípido, chato. E é por isso que significa que eles são versáteis. Eles podem ser usados em qualquer circunstância. No contexto de um design AB. Queremos que nosso texto se destaque um pouco. Portanto, as escolhas que fazemos em termos de topografia podem fazer ou quebrar o design. Então, eu já mencionei Ariel, Leto, certos pesos do robô Open Sans, embora o Source Sans Pro e muitos outros se enquadrem nessa categoria chata. Então, vamos abrir as fontes do Google. Vou desativar o xarope e o manuscrito. E podemos ir para baixo. Agora, estamos procurando pelo menos quatro ou cinco opções. A primeira que chama minha atenção é Montserrat, que é uma das minhas favoritas. Então esse é um. O segundo é o Ubunto. Tem muita camada. Então, são dois. novo Nieto está lindo e eu também vou adicioná-lo, mas diz que é uma luz ruim, mas tem muito peso. Então, isso é muito bom. Eu vou ficar com ele. Agora. A areia movediça é outra que é bastante interessante e eu adoro. Agora, para manter as coisas curtas, vou parar por aqui. Mas quando você estiver fazendo isso sozinho, acesse mais fontes. Eu não iria até lá, mas pelo menos cinco. Ao praticar, você começará a desenvolver um banco de dados mental de fontes de ótima aparência. E você terá uma lista de palavras muito mais restrita para seu próximo projeto. É por isso que eu não perdi tempo navegando. Eu já sabia o que estava procurando. Ok. Baixe o arquivo extraído. Vou mostrar como eu os classifico rapidamente por tamanho, especialmente se você selecionou muitos deles. Então, dentro dessa pasta, pesquise esse TDF e você obterá vários deles. E então você pode alterar o modo de visualização para detalhes. E você obterá o tamanho em uma coluna separada. Então você pode ver imediatamente que o Ubuntu é muito mais pesado do que a areia movediça, por exemplo, então eu não vou riscá-lo da minha lista ainda. Eu quero removê-lo, mas tem que parecer absolutamente fantástico para mantê-lo como uma opção. Todo mundo que desenvolve aplicativos quer um tamanho de aplicativo muito baixo. O tamanho do arquivo deve ser o mais baixo possível. Isso te dá mais do que barracas e é ótimo. Na minha empresa, isso era muito importante. Cortaríamos absolutamente tudo, mesmo que fosse 20 kb. Agora vamos voltar para Figma e ver o que é o quê. Então, eu os copiei. As fontes estão instaladas. Então, vamos dar uma olhada na areia movediça. Agora, não há mágica aqui, só a magia da edição. Você precisa selecionar todas as camadas de texto e alterá-las. Agora poderíamos usar um recurso mais avançado, mas isso é de propósito. Estou fazendo isso manualmente porque quero que você faça isso manualmente também. Então, na segunda parte do curso, mostrarei como você pode fazer isso automaticamente. Bem, o mais próximo possível do automático. Esse é um processo muito demorado, mas você precisará ser paciente ao trocar tantas camadas. Agora, qual é a sua primeira impressão? Dê uma olhada e pense sobre isso. Agora, uma coisa: quando você muda qualquer tipo de letra, você vai arruinar seu alinhamento anterior. Portanto, você pode ter alguma ação de transbordamento. Algumas cápsulas vão sair dos limites não é um problema. Teremos que alinhar tudo mais uma vez. Mas, sim, isso parece bastante sólido considerando passar por isso muito rápido. Agora, poderíamos trabalhar com um maior grau de precisão, mas, novamente, esse não é o objetivo desta etapa. Agora, vamos continuar com a próxima fonte criando mais cópias. Agora Nieto, vamos ver, certo? Esteja ciente de que também existe outra versão chamada Nieto sands. Agora, é assim que parece. E minha primeira impressão é que ela é bem parecida com areia movediça, mas é um pouco mais redonda. Você pode ver isso, especialmente no prazo de entrega, mas há uma disputa acirrada. Realmente depende do seu gosto. Ok, agora vou dar um zoom para ver tudo certo. Lembre-se de que você precisa fazer isso sozinho e outro nível, usando faces disponíveis nas fontes do Google, não há alternativa ao trabalho árduo. Tente ser o mais eficiente possível. Você pode selecionar camadas de texto em negrito e alterar o tipo de letra diretamente para esse peso. Isso significa que você precisará ser muito rápido com sua técnica de clique de controle. Agora, não importa como você faça isso, é importante que você faça isso. Além disso, você precisa ter um bom número de camadas de texto. Se tivéssemos feito essa etapa talvez na tela de localização, quando começamos, ela não seria relevante. É como perguntar às pessoas na rua em quem elas estão votando. Eles dizem candidato X, certo? E então você diz, ei, você sabe, um estudo mostra que 100 por cento das pessoas que queriam votar no candidato X são apenas duas pessoas. Não se engane. Use vários tipos de textos, camadas, títulos incorporados x subtítulos, números, fundo branco, saco misto, redondo e assim por diante. Mas é claro que, se você incluir dez telas , a dificuldade aumenta. É por isso que não criamos todas as telas e deixamos essa etapa no final. Embora isso seja possível, é muito melhor decidir o estilo de um aplicativo nos estágios iniciais. E três telas são ideais no meu livro. Ok, aqui estão eles. Todas as fontes que eu seleciono indicam que você tem esse arquivo anexado e sugiro que você o abra. Mas Figma pode lhe dar alguns avisos. Se você não tiver essas fontes, isso pode lhe dar alguns avisos. Não se preocupe. Ok, cada tipo de letra tem seus próprios pontos fortes. Mas o que posso dizer claramente desde o início é que o Ubunto não vale isso. Claro, parece bom, mas não 34 vezes mais bonito que os outros. Lembre-se de que era muito mais volumoso em termos de tamanho. Monster AB também é lindo, mas apesar de tudo, acho que o mais bonito é o novo Nieto. Tem muitos pesos. É relativamente pequeno, então não vai aumentar o tamanho do aplicativo. E tem esse toque especial que o destaca, especialmente quando você o usa na variante preta. Então, preto simplesmente significa tempos ousados para algo dessa natureza. Agora, considerando o público-alvo, acho que essa é uma ótima primeira escolha. Caso algo apareça em um momento posterior no design da AB, podemos facilmente alterar o tipo de letra para qualquer uma dessas alternativas, bem como explorar algumas outras. Mas sim, isso encerra esta palestra. Fizemos um grande progresso e quero parabenizá-lo por ficar comigo até agora. Te vejo em um momento. 25. Definir e refinar o visual do nosso aplicativo com estilos: Bem-vindo de volta. É hora de reservar alguns minutos para que possamos definir o estilo AP. Estamos procurando cores, tamanhos de fonte, altura da linha e assim por diante. E vamos aplicar tudo isso no resto das telas. Sei que pode ser assustador, mas temos uma técnica que salva vidas usando estilos. Então, vamos começar com o mais fácil deles, o esquema de cores, certo? O processo é assim. Escolhemos um título, digamos San Francisco, certo? Abrimos o seletor de cores e brincamos com várias nuances. Foi ótimo poder ver a mudança em tempo real, certo? Então, brincamos com isso. E no final, decidi usar o 212f. O que nove, que é um tom escuro de azul. Então faça 12 f49. Estou lhe dando os códigos de cores exatos para que você possa acompanhar, mas, honestamente, apenas brinque com o seletor de cores até ficar satisfeito. Agora, isso é quase preto, mas é ideal para várias camadas de texto. Agora, como aplicamos isso a várias camadas de texto? Primeiro, precisamos configurá-lo como um estilo colorido. Clique aqui nesses quatro pontos, ao lado para preencher à esquerda do sinal de mais. Diz estilos coloridos, mas não temos nenhum, o que é totalmente bom. Clique neste plus e receberemos um pop-up solicitando o nome. Chame do que quiser, como título, cor, cor principal, cor primária, qualquer coisa. A cabeça cria estilo. Para mostrar a paleta de estilos de cores. Aqui está um exemplo rápido. Então selecione o título paraíso do deserto, que atualmente é preto. Agora clique nesses quatro pontos ao lado Phil e você encontrará o azul que acabamos de adicionar. Aqui está, um clique e pronto. Agora, você pode dizer, Ok Chris, então o que acontecerá, aqui está o problema. Vamos desmarcar tudo, certo? Observe algo no canto superior direito, temos cores e estilos ali com uma única entrada. Podemos clicar com o botão direito do mouse e, é claro, podemos excluí-lo, mas também podemos editá-lo. Então, a partir desse novo painel, queremos mudar a cor das Propriedades. Clique aqui para abrir o seletor de cores e podemos ir para a cidade. Vou torná-lo vermelho ou verde ou algo louco. E observe como os dois títulos mudam. Esse é o poder dos estilos. É assim que você altera rapidamente um design inteiro com apenas alguns cliques. Os clientes sempre querem ver mais opções ou talvez tenham mudado de ideia com esse recurso. Você não tem nada com que se preocupar. Vou pressionar o Controle Z porque gosto desse tom azul. Agora, quando você quiser dividir uma cor e um estilo, basta selecionar a camada de texto e usar esse ícone de corrente quebrada que mantém a mesma cor azul, mas não está mais vinculado ao estilo de cor. Novamente, vou desfazer esse Controle Z porque quero que duas camadas não sejam um grande problema. Mas imagine se tivermos 100 telas e quase 1.000 camadas de texto, aí que o estilo de cor é absolutamente necessário. Agora, para continuar, selecione as telas V e mova-as separadamente. Temos que limpar as coisas um pouco. Minhas escolhas são a tela de localização, a tela principal do anúncio em que a classificação está flutuando na borda, no canto superior direito. E, finalmente, a Virgin, onde temos guias roláveis, três telas no total e podemos criar nossos estilos. Vamos nos concentrar no segundo. Então, o título é azul, mostrado em preto novo Nieto para o tamanho que poderíamos para D. Mas acho que 34 é a melhor escolha. Portanto, três, pois essa discagem também deve ser aplicada ao dipolo do restaurante. Mas o problema é o seguinte. Também temos estilos de texto. Então, em vez de falhar, você verá que temos os mesmos quatro pontos ao lado do texto. Clique e você verá estilos de texto nesse processo, exatamente o mesmo. Clique no símbolo de adição para adicioná-lo, nomeá-lo, como quiser. Apenas certifique-se de que isso faça sentido, como uma grande maré. Então, podemos aplicá-lo. Clique no paraíso do deserto e clique nessa entrada para testá-la. Vamos fazer uma mudança dramática. Então, vamos desmarcar e clicar em Editar. E então vamos fazer com que tenha 50 pixels de altura ou algo louco assim. E sim, funciona conforme o esperado. Ele escapa e depois controla Z. Agora vamos começar do topo. O título está pronto. E quanto a todos esses ícones? Eu gosto dessa laranja, então vamos experimentá-la. Pegue o menu de hambúrguer e vamos configurá-lo para a seguinte cor dourada. Mas o problema é o seguinte. Esse ícone está dentro da moldura. Os detalhes realmente não importam. Mas aqui está o sentido. Se você alterar o preenchimento de cima para cima, que atualmente é branco, não ficará bem. Em vez disso, teremos que mudar as cores da seleção. Atualmente, é preto. É isso que precisamos mudar. Fdd também vê zeros, que é uma linda laranja intensa, e depois adicione-os como um estilo. Meu plano é aplicá-lo a todos esses outros ícones. No menu suspenso, filtre e pesquise. Use Control para selecionar o primeiro e, em seguida, adicione shift à seleção múltipla. E é isso aí, a laranja, coisa linda. Aplique a mesma mudança de cor nas etiquetas do lado inferior direito. Como você pode ver, com o mínimo de esforço para alterar o design em pouco tempo. E o relógio? Acho que o mesmo azul está bom. Veja, aqui eu errei. Eu selecionei a moldura e mudei o preenchimento por engano. Há muito o que falar, mas vamos discutir os detalhes na segunda parte do curso. Por enquanto, concentre-se na essência, nas cores de seleção alteradas. Se você tem um ícone dentro da moldura, essa é a melhor maneira de fazer isso por enquanto. Apenas como uma pequena nota lateral, poderíamos ter feito isso anteriormente quando testamos diferentes tipos de letra. Eu sei, mas eu queria que você trabalhasse manualmente. Ganhar velocidade é a coisa mais importante como designer nesta fase do jogo. Ok, voltando ao assunto, quanto ao prazo de entrega? Bem, isso precisa ser mostrado nos novos 24º pixels regulares de Nieto em um cinza bastante escuro. Vamos com 777. Podemos adicionar a cor e o estilo do personagem. Acho muito provável que o usemos como corpo principal do texto, ou seja, a descrição de cada prato. Então, vamos chamá-lo de corpo. Quero enfatizar que não tenho 100% de certeza. Talvez eu mude de ideia. Vamos ver à medida que avançamos. Mas como temos estilos, podemos fazer isso rapidamente. Podemos mudar de ideia rapidamente. Para a leitura. Vamos usar a nova necessidade de TO 20, tão pequena. Podemos torná-lo cinza, isso é código de 777 cores. Em seguida, selecione a parte de 92 por cento e deixe-a preta. Preto em termos de peso. Quanto à cor, podemos experimentar o emoji porque mudamos a fonte, o alinhamento pode não ser perfeito, mas isso é um fato rápido. Agora, você pode ter uma pergunta, Chris Como você decidiu o 34º atraso para os títulos? Por que não 30? Por que não 36? Por que não é digno? A resposta é simples. Eu os experimentei. Eu fiz o upload do design para o meu telefone. Examinei o design do meu telefone e os comparei primeiro entre eles e depois muitos aplicativos que analisei anteriormente. Isso antes parecia ser a melhor escolha. O mesmo vale para todos os outros. Não é algo que o Google Material Design tenha configurado, é algo que eu decidi. Ok, avance mais rápido, então esse é o nosso resultado. É assim que seu projeto deve ficar nesta fase do jogo. Vamos fazer uma pausa rápida. 26. Pratique sua velocidade: Bem-vindo de volta. Nós os examinamos, mas o fazemos e eu quero substituir esse conteúdo fictício. Aqui estão todos os recursos que eu preparei para essa tela. Primeiro, as fotos, bem simples, do console mudam de estilo. Eu sei que em alguns outros programas você pode simplesmente arrastar e soltar imagens dentro de retângulos, mas não no Figma. Eles se divertem com isso. E então, quando você estiver usando fotos enormes, seja um pouco mais paciente. Figma pode levar alguns segundos para processá-los. Ok, a seguir vamos fazer os títulos um por um, de forma agradável e fácil. Os votos são os próximos. Agora, você pode perguntar, Chris, por que você está fazendo todas essas coisas? Por que você está mostrando isso? É simples, por um lado, é uma ótima prática. Você tem que se exercitar. Eles acabam e estão preparados. Preguiça não é algo que possa me descrever. Em segundo lugar, é importante mostrarmos ao cliente e ao desenvolvedor algo de que nos orgulhamos, algo que pareça real. O esforço necessário para tornar um aeródromo real é mínimo, mas melhora drasticamente o impacto do aplicativo. Parece muito, muito melhor. Agora, imagine isso. Você convida alguns convidados, alguns amigos, certo? E então você tem meias sujas no meio da sala. Todo o resto é bonito e limpo, tudo configurado. Mas essas meias sujas, cara, a ruína, tudo. Embora haja uma parte tão pequena da sala geral, eles concentram toda a sua atenção neles. Então, não é uma coisa boa, é a mesma coisa aqui no design. Ter conteúdo repetitivo falso, muito Lorem Ipsum, isso simplesmente quebra a mágica. Então é por isso que temos que fazer isso. E só para trazer isso para casa, vamos diminuir o tamanho da foto em 40 pixels. Então, clique em Control e vamos dar uma olhada neles. 360, vamos avançar para o 20. E para a carta de 470, vamos movê-la para 430. claro que nada está mais alinhado, mas sabemos que a mudança nos ajuda a mover as coisas em incrementos de dez pixels. Portanto, dentro da necessidade de profundidades, selecione todos esses caras, então lembre-se de clicar no primeiro e, em seguida, segure a tecla Shift para seleção múltipla. E agora podemos usar a seta para cima quatro vezes enquanto pressionamos a tecla Shift. Agora, esse redimensionamento é absolutamente necessário? Não. Mas, como eu disse, quero trabalhar duro e ver se consigo melhorar o design. E acho que está funcionando. Anteriormente. Eu estava um pouco hesitante, mas agora acho que está tudo bem. Agora, quando você estiver pronto para começar, vamos para a tela número três. Comece com o título, selecione-o e aplique o estilo de caractere chamado exatamente desse título. Para a seta para trás e o ícone de informações, eles precisam ser laranja. Mover-se para baixo, as guias ativas precisa estar laranja. Então você sabe o que precisa fazer com esse retângulo. Agora, para os dabs? Bem, para ser honesto, não tenho certeza. Vamos começar com o estilo do título. Obviamente, é muito grande, mas podemos alterá-lo para 26 pixels, por exemplo, como antes, as guias inativas precisam de um tratamento diferente. Então, vamos corrigir isso. Agora. Selecione todos os outros itens e defina-os em uma camada de texto separada. Eu acho que é melhor. Então, basta usar o Control X para recortar e colar. Ok. Portanto, esta precisa ser definida em neonatal 26 como antes, mas na forma normal, você nunca deve alterar o tamanho da fonte mesmo que ela esteja inativa, não é uma boa prática. Quanto ao ativo, ele deve ser feito de laranja. Agora, novamente, aqui está uma dica. Talvez você não saiba quanto espaço deve deixar entre as pizzas do passado. Afinal, queremos emitir o espaço entre a pizza e o resultado. Tudo bem? Mas como essa é uma camada única, você não consegue descobrir a distância real. Bem, aqui está a dica no retângulo entre esses dois e dê uma olhada na largura. Uma vez que tenhamos esse valor em mente, é muito fácil com essa camada selecionada, segure Alt e verifique a medida existente. Em seguida, ajuste com as teclas de seta e pronto. Ok, vamos seguir os nomes dos pratos. Bem, acho que deveriam ser iguais às abas. Então, Nieto preto, 26 pixels, mas desta vez em azul, precisamos aplicar isso a todas as entradas. Então, faça o que você precisa fazer para que isso aconteça. Agora, obviamente, o estilo químico é a melhor maneira de fazer isso. Portanto, certifique-se de usá-lo bem. Estou tentando ir o mais rápido possível, mas quero que você entenda o que está acontecendo. Para a descrição. Teremos que usar o estilo corporal. Nieto é uma fonte maior, mas eu quero manter as linhas do texto, então redimensione-a se necessário. Mas imagine que depois aplicamos estilos a absolutamente tudo, caso queiramos mudar algo, não importa o que seja, tamanho, fonte, altura da linha, qualquer cor. Vamos nos divertir facilmente em que esse preço e peso apliquem o estilo de 26 títulos e verifiquem a posição. Você quer que a parte inferior fique alinhada com a miniatura, embora talvez seja necessário olhar para ela. Essa fonte tem muito espaço extra na parte superior e inferior. E não há nada que você possa fazer sobre isso. Ao clicar nele, você pode ver o destaque. É bem grande. Agora, acho que o preço deve ser mostrado em laranja. Sim, de fato, isso é muito melhor. Por fim, o Adicionar ao carrinho também deve ser laranja. Agora, acredite ou não, acho que acabamos com esse verde. Se há alguma coisa que você queira colocar no botão, agora é a hora. Não tenho certeza se isso tem que ser tão pesado. Não é tão importante. Então, vamos reduzi-lo para negrito em vez de preto. O problema são estilos absolutamente fabulosos e você pode fazer uma inscrição para quase todas as pequenas coisas. Como você deve ter notado, eu não adicionei todos os estilos , e isso é intencional. Não quero adicionar muitos e depois me confundir com isso. É hora do intervalo. 27. Termine a primeira tela: Bem-vindo de volta. Ok, vamos para a tela de localização. Vamos começar do início e garantir que estamos na mesma página. O ícone precisa ser 18180 e branco puro. Isso deve ser colocado em pixels AT a partir da borda superior. Essa é uma boa chance de usar o campo y. Lembre-se de que y é o eixo vertical e começa do topo. X é o horizontal e começa pela esquerda. Agora, o nome do aplicativo, o live está aí. Então, se você não tiver , vamos estilizá-lo. Acho que você precisa totalmente preto. 70, branco puro. Oh, acho que não adicionei branco como estilo. O fato é que, se movermos constantemente o mouse sobre essa região, é melhor ter o branco aqui também. Agora, centralize-o na tela e posicione-o a cerca dez pixels do eigon, mais ou menos. Ok, agora está feito. Próximo. Acho que é seguro dizer que o laranja será a principal cor de ação. Então, vamos aplicá-lo a esses dois botões. Lembre-se de que, ao lidar com botões, é melhor usar no layout automático e não no retângulo e na camada de texto Essa é a melhor prática no Figma. E quanto ao texto? Bem, vamos mudar isso para mostrar restaurantes. Vamos começar com 26 títulos e ver o que vale. Agora, o tamanho em si é bom, mas é um pouco pesado demais, então vamos deixá-lo em negrito. Isso faz uma grande diferença. Se você não vê isso no vídeo, confie em mim. Verifique no seu telefone e acho que você concordará comigo. O problema que estou tendo aqui é a hierarquia. Não está claro. Então, vamos pensar sobre isso. Temos três ações disponíveis. Entramos em um local com um botão de envio, pulamos esta etapa e passamos para a próxima tela ou criamos uma conta com login n. Em geral, criar uma conta ou login podem ser considerados duas coisas distintas . Mas vou combiná-los para facilitar as coisas. Então, como devemos fazer isso? Embora seja bom ter dois botões com o mesmo nível de importância, acho melhor aplicarmos estilos diferentes para criar uma conta. Pelo que entendi do resumo, o processo de registro não é tão importante. Isso significa que mostrar restaurantes é o botão mais importante nessa tela. Assim sendo, vamos ampliá-lo para 656 pixels. Também devemos alterar a altura para 90 pixels, só para que ela se destaque um pouco mais. Agora, isso é muita roupa de cama, mas não é grande coisa. Apenas se concentre no que é importante e não se preocupe com muitas técnicas disponíveis no momento. Os campos precisam coincidir com os botões, Os campos precisam coincidir com os botões onde estão 656 pixels, então as coisas estão mudando rapidamente, mas lembre-se de fazer uma pausa sempre que precisar para colocar o texto. Isso é oficialmente chamado de mão. Por favor, aplique o estilo corporal. Quando o usuário toca no campo, a mão desaparece. Agora, aqui está a técnica para criar um campo para fazer o layout automático. Antes de tudo, selecione o texto e use Shift a, de forma agradável e fácil. Em seguida, adicione o preenchimento branco. Agradável e simples. Altere o raio da coordenada para cinco pixels, para que fique um pouco melhor. Eu poderia mudar isso para dez pixels mais tarde, mas, por enquanto, está tudo bem. Ah, a propósito, precisamos do ícone de GPS e você tem algo anexado ao curso. Vou simplesmente arrastá-lo para dentro dessa moldura. Ao fazer isso, você notará que o layout padrão não está correto porque o texto não está centralizado. Mas esse não é o problema. Desmarque o ícone e clique na moldura. Mova seu olhar para o lado direito. Esse é o problema. Precisamos mudar o alinhamento e pronto. Ok, queremos que isso tenha 656 pixels de largura, para que corresponda a tudo. Mas observe que a largura e a altura estão acinzentadas. E isso é por causa dessas configurações, essas dificuldades em abraçar o conteúdo. E isso significa que a forma crescerá com base no que está dentro dela. Porque sabemos que precisamos de um determinado tamanho. Vamos mudar isso de abraço para largura fixa. Agora podemos digitar 656 e isso é ótimo. A altura ainda não está disponível, mas agora você sabe como alterá-la novamente para onde precisamos mover o ícone de pesquisa para a direita. Arrastá-lo não funcionará. E isso porque temos que mudar uma configuração. Clique nesses três pontos e você receberá um novo painel. Aqui. Queremos mudar o modo de espaçamento do pacto, o que significa próximos. Queremos construir um espaço de opções entre. E assim, eles se desfazem. Caso você não goste do acolchoamento em nenhum dos lados, você pode trocá-lo neste local. 20. Acho que é uma ótima escolha. A propósito, se você não entende o que acabei de fazer com o conteúdo do abraço, tudo bem. Você não precisa usar o layout automático. Você não precisa complicar as coisas. Mas, nesta fase, achei que seria bom ter uma ideia de como isso funciona. Ah, a propósito, por favor, deixe o ícone do GPS laranja porque você pode tocar nele, você pode clicar nele para obter seu endereço IP automaticamente. Ok, agora vamos pensar que essa é a parte mais importante dessa tela. O que vem a seguir? E essa coisa, criar uma conta vem em segundo lugar. Agora também poderíamos usar um botão laranja, mas ele competiria com restaurantes de shows. Acho que é melhor movê-lo para a parte inferior da tela. Mas primeiro, vamos pular essa etapa do estilo. Vamos fazer isso. Aumente a altura para 100 pixels para que ela não passe despercebida. Isso não é exatamente enorme, mas é um pouco maior do que o call to action principal. Faça com que seja preto puro, mas reduza sua opacidade para 60 por cento. Sem limites para isso, a ideia é dar a ele uma quantidade generosa de espaço, mas sem fazer com que ele se destaque demais. Então é por isso que eu escolhi o preto. Faça com que ele abranja toda a largura da tela. Então isso significa 720 pixels. Alinhe-o corretamente. E agora você deve ver o que estou tentando fazer. Quando terminar, altere o texto para criar uma conta ou fazer login com C maiúsculo. As pequenas coisas realmente importam no final do dia. No geral, esse é um bom design para a ação do segundo ano. Podemos usar o layout automático aqui também? Claro, é claro que você pode fazer isso sozinho. Agora, vamos dar uma boa olhada em nosso design durante um rápido Greg. Obrigada 28. Um novo estilo de botão para ter um grande fluxo: Bem-vindo de volta. Ainda temos um item principal. Ignore esta etapa. Vou usar algo novo, algo chamado botão fantasma. Então comece com uma mudança automática de layout, mas em vez de adicionar um preenchimento, como sempre fizemos, vamos adicionar a borda para não preencher apenas o quadro, o branco bem grosso. Estou pensando em três pixels. Você deve sempre ficar longe de traços de um pixel. Eles parecem super felpudos e de baixa qualidade. Então, este é um botão fantasma e é chamado assim porque não tem corpo, não tem preenchimento, não tem corpo. É por isso que é um fantasma, certo? Agora. A propósito, certifique-se de que a ortografia esteja correta e coloque a primeira letra em maiúscula. Obviamente, certifique-se de que tudo esteja centrado. Mas o problema é o seguinte. Você pode não ter contraste suficiente em relação à imagem de fundo, dependendo do que você selecionou. Devemos ter uma sobreposição de cores, mas isso pode não ser suficiente. Além disso, quando você não tem preenchimento, é muito difícil selecionar esses botões. Então, aqui está o que eu proponho habilite o preenchimento e torne-o preto puro, mas depois reduza a opacidade para cerca de 30% ou mais. Acho que isso vai nos ajudar bastante, tanto com o contraste quanto com a largura de selecionar esse botão. Agora, vamos analisar as coisas. O logotipo está na parte superior. Você olha para ele e desce bem no meio, você tem essa área principal onde você tem que colocar seu endereço, sua localização. Incrível. É grande, é brilhante, se destaca. Agora, a pergunta é: podemos adicionar mais detalhes? E acho que poderíamos adicionar um ícone dentro do botão laranja. Mas aqui está o que eu proponho, em vez disso, um efeito de sangramento. Portanto, selecione o retângulo laranja e ative uma sombra projetada caso você tenha uma borda desativada. Para a cor. Não queremos preto. Em vez disso, vamos escolher a laranja. Para as configurações. Eu usei esse efeito várias vezes. E aqui está o que funciona melhor. Cinco para o campo y, cinco para B. E, finalmente, uma opacidade definida para 30%. Você poderia usar mais. Lembre-se de aumentar e diminuir o zoom. Dentro. Depois de desmarcar o botão, você verá o que quero dizer com efeito de sangramento. Isso se destaca bastante. É como se estivesse brilhando e fosse detalhe extra que alguns clientes podem adorar. Agora, vamos ver o que mais. Ah, no raio da coordenada, é claro, cinco pixels como antes, você pode tentar um valor maior como dez ou 15, até você. O fato é que eu não gosto da posição de pular esta etapa. Está apenas flutuando. Poderíamos aproximá-lo, mas prefiro não receber nenhum clique acidental nele. Então, vamos fazer isso. Pegue a ferramenta de digitação e acerte, ou no novo Nieto negrito de 26 pixels, branco puro, é claro. Agora centralizado horizontalmente e mova-o talvez 50 pixels do botão laranja. Agora, aqui está o que queremos que simetria seja algo que você sempre deve buscar. Então, se tivermos 50 pixels no topo, precisamos de 50 pixels entre eles. Ignore esta etapa e este item aqui. Segure Alt e meça as coisas. Em seguida, se necessário, use as teclas de seta do teclado. Ok, incrível, mas isso não é o fim de tudo. Coloque a linha em todas as teclas de atalho L e vamos fazer algumas contas. Sabemos que esses caras têm 656 pixels de largura. E queremos dividir aí, mas sem passar pela palavra, isso não faz nenhum sentido. Então eu acho que 50 pixels são suficientes para isso. Então, vamos fazer isso. 656 -50, isso é 606/2, isso é 303. Ok. Vamos arrastar uma linha e redimensioná-la. Use o painel de propriedades para obter profundidade e ao adicionar a linha, mantenha pressionada a tecla Shift, para que fique perfeitamente reta no branco puro. Linhas. Não tem nenhum preenchimento, então não o procure. Em vez disso, mude a espessura daqui para escaras. Ok, agora vamos duplicá-lo e colocá-lo do outro lado. Deve ser muito fácil de alinhar. Você tem aquele botão laranja na parte superior, então, por favor, use-o. Quando estiver pronto, centralize a palavra em vermelho e talvez agrupe-a, embora seja opcional o Controle G. E eu realmente acho que isso parece incrível. É interessante e , na verdade, ajuda o usuário a navegar por suas opções. Vamos fazer uma pausa e faremos um resumo completo depois disso. Muito obrigada. 29. Visão geral do projeto até este ponto: Bem-vindo de volta e parabéns, você acabou de terminar a primeira parte sobre o aplicativo de entrega de comida. Eu sei que foi uma jornada e tanto, mas espero que você tenha chegado a este ponto com o mínimo de roer as unhas, xingar e arranhar a cabeça, o processo é um pouco difícil no começo, muito semelhante a um quebra-cabeça de 1.000 peças. Mas à medida que você se esforçou para progredir peça por peça, toda a imagem se torna mãe e você pode acelerar. Não consigo enfatizar o suficiente o valor dos pacientes e da dedicação. Este aplicativo de entrega é um projeto do mundo real, algo que você pode encontrar em seu trabalho. Seja em uma agência de design ou em qualquer plataforma de freelancer. Não estou me gabando, mas a maioria dos tutoriais elaborados não mostra uma recaída. São apenas fotos bonitas e pronto. Não há ideia de funcionalidade por trás deles. E isso é como aprender a andar de bicicleta quando o mundo está cheio de monster trucks. Então, embora você esteja aprendendo possa ser difícil, acredito firmemente que quanto mais difícil for o treinamento, mais fácil será a luta. Ou seja, quando você consegue o emprego, você pode realmente brilhar. E é por isso que esse curso é do jeito que está. Agora ainda temos um longo caminho a percorrer. Mas veja por onde começar com um wireframe simples do que com o layout? Em seguida, em alguns experimentos de design, escolhemos um tipo de letra em vez de um esquema de cores. E resolvemos os problemas reais tentando colocar o maior número possível de restaurantes e pratos em uma única tela sem fazer com que pareça ocupada sem precisar rolar demais. Falamos sobre a proporção de aspecto, ter a proporção certa para essas fotos, a cadeia de comando, também conhecida como tela Kino de alto nível. Usamos cartões, ícones, várias técnicas de topografia e aprendemos a usar o painel de ativos. Então, novamente, do fundo do meu coração, parabéns por chegar até aqui. Fique comigo e você se sairá ainda melhor. No entanto, o primeiro Green foi provavelmente o mais complicado. E isso porque você pode digitar sua localização no campo, mas também pode usar o GPS do seu telefone e seu endereço será preenchido automaticamente. Você também pode pular essa etapa. E então o aplicativo vai te mostrar um restaurante da maior cidade. Agora, todas essas informações estão resumidas, e espero que você as leia. Finalmente, você pode se registrar ou fazer login. Então, a coisa toda é essa, saber como estruturar essas quatro ações diferentes não é brincadeira. Nós os classificamos por sua importância e tomamos as decisões de design de acordo. É por isso que, por exemplo, usamos o botão fantasma. É por isso que reduzimos a opacidade desse retângulo. Ok, no geral, trabalho fantástico. E mais uma vez, parabéns por chegar aqui. Se você quiser terminar a coisa toda, você vai ter que continuar assistindo. Muito obrigada. Aqui é Chris saindo no momento. Obrigada 30. Crie as telas de login e registre: Bem-vindo de volta. Vamos começar com uma cópia da tela inicial, manter pressionada a tecla Alt e arrastar uma cópia para baixo dela. Isso é o que vamos usar para mostrar os campos de login e registro. Basicamente, vamos mostrar o que vai acontecer quando você clicar nesse botão na parte inferior da tela. Agora vamos excluir algumas coisas ou pular essa etapa e, em seguida, criar uma conta, desmarcar e dar uma olhada no lado direito para ver todos os estilos até agora. Então, isso é o que você também deve ter do seu lado. Embora os tecidos não estejam gravados em pedra. Você poderia ter mais, você poderia ter menos. Ok, agora, arraste o campo e o botão um pouco mais abaixo para fazer com que um pouco de login e registro da sala possam ser exibidos usando guias. Então pegue a tecla de atalho L da ferramenta de linha e arraste uma para fora. Ao procurar o sexto, cinco e seis em termos de web, use o lado superior direito para isso. Então isso é 656, branco puro com uma espessura de dois. Lembre-se de manter pressionada a tecla shift ao arrastar a linha para baixo , se quiser que ela fique perfeitamente reta. Agora, acima desta linha, vamos escrever o registro. Temos vários estilos, mas vamos fazer essa parte manualmente. Isso deve ser mostrado no novo Nieto em negrito e em seu dia. Isso é algo que aparece em nosso projeto com bastante frequência. Ok, clique nesses três pontos para obter muitas outras opções. Agora, eu quero que todas as minhas letras estejam em maiúsculas, e essa é essa opção aqui. A razão por trás dessa escolha é bastante simples, e isso se deve à hierarquia. Agora, isso ajuda os usuários a navegar até a tela mais sobre isso um pouco mais tarde. Isso deve ser colocado a 20 pixels da linha, mais ou menos. É claro que precisaremos de outra guia que será chamada de login. Então, por favor, escreva isso como antes, faça uma cópia e substitua as coisas. Para manter as coisas intuitivas, vamos reduzir o peso de ousado para normal. Agora poderíamos usar um cinza muito claro, como o ddd, para mostrar que essa não é a guia ativa, mas na verdade eu tenho uma solução melhor. Então pegue a linha existente nesta tela e depois duplique-a, Control D. Em seguida, vamos fazer dela um deck de quatro pixels, que é o padrão acordo com o Google Material Design. Agora, para a cor, vou usar o seguinte. Isso é f, d, d, z, esses sete, que é um tom de amarelo, na verdade dourado, do qual eu gosto. Agora, isso se destaca, mas na quantidade certa não é neon, mas está perfeitamente bem. Ok, finalmente, podemos redimensioná-lo usando um pouco de matemática no campo W. Basta adicionar a barra devida no final e pressionar Enter. E isso vai nos dar 328 pixels, são 328. E com esse elemento, agora podemos alinhar os dipolos. Lembra como isso é feito? Selecione registrar com a barra amarela e a linha horizontal, esta aqui. Em seguida, mova o login para algum lugar no meio da barra branca restante , algo assim. Talvez você queira ampliar para a próxima parte. Ok, pegue a barra ativa com a branca, então selecione duas coisas e alinhe-as com a direita novamente. Agora podemos selecionar o login junto com a barra amarela. Então, basicamente, estamos constantemente pegando dois itens por vez e os alinhando. Enxágue e repita o envio para esses caras também. E, finalmente, selecione as duas barras e coloque-as de volta no lugar. Mova o dourado para a esquerda em seu lugar original. E, basicamente, esse é o sistema DAB precisamos de muito espaço embaixo para os outros campos. Então, coloque isso a cerca de 60 a 70 pixels do logotipo. Teremos e-mail, senha, número de telefone, cidade e assim por diante. Então, precisaremos do máximo de espaço possível. E é aqui que precisaremos de componentes. Qualquer conteúdo repetitivo, como um campo, deve ser transformado em um componente por um motivo simples. Agora, imagine que teremos 50 ou 100 campos dentro desse projeto. E então decidimos: Ei, quer saber, talvez precisemos de outra aparência, talvez um raio de coordenadas diferente, um estilo diferente. O que então são 100 campos. Imagine isso. Agora, como eu disse, poderíamos potencialmente atualizá-los manualmente tela por tela, mas estou usando um componente que é muito, muito mais inteligente. Agora, em geral, você encontrará componentes no canto superior esquerdo ao clicar em ativos. Agora não temos nenhum no momento, mas chegaremos em um minuto. Ainda aqui podemos ver o número da nossa página, que é o número um. Agora, em geral, os componentes são mantidos em uma página diferente. E por que isso acontece? Porque é melhor ver todos os seus ativos separadamente. Mas como eu quero que você siga isso da forma mais fácil possível, o que vamos fazer é pegar a ferramenta de moldura, hóquei F, e arrastar uma aqui no lado esquerdo. Nenhum tamanho específico em mente, apenas um tamanho aleatório. Em seguida, muda, preencha de branco puro para talvez um cinza muito claro. Isso porque os campos provavelmente serão brancos. E vamos ter branco sobre branco, então precisamos de um contraste decente. Por isso, o fundo cinza claro. Agora, você pode renomear esse quadro e, para descansar ou recursos, os recursos enquadram o que quiser, só para que ele se destaque um pouco e possamos identificá-lo. Finalmente, podemos adicionar o primeiro item aqui, o logotipo. Selecione as duas camadas e mova-as dentro desse novo quadro, o quadro Recursos. Em seguida, veja o topo do estigma no meio dessa barra. Este é o ícone com a busca por Criar componente. E você pode ver que é um componente examinando o painel de camadas. Esse é o símbolo do componente principal. Um componente massivo significa simplesmente o original. E como queremos manter o original bonito e seguro, nós o transferimos para cá no quadro de Recursos. Claro, precisaremos do logotipo nessas telas. Então, arraste uma cópia com tudo para arrastar assim. Agora, esse clone, essa cópia é chamada de instância. E, novamente, você pode pensar nisso como uma cópia do componente original. Observe esse ícone no painel de camadas. Isso é um pouco diferente. Este aqui é um mar vazio. Mas se clicarmos no componente original, a massa do componente que está preenchido, esse é um ícone diferente. Agora, caso esse quadro de Recursos esteja muito distante, você sempre pode fazer isso. Mude para a guia de ativos. A partir daqui, você terá componentes locais. E, abaixo do nome do quadro, recursos no meu caso. Agora, a partir daqui, você pode simplesmente arrastar uma cópia. Nenhuma outra tecla de atalho, basta clicar e arrastar. Lembre-se sempre de enviar o logotipo para eles. Em seguida, podemos usar o campo y, o local a 80 pixels da parte superior da tela. Então, isso é certo z. E, basicamente, agora estamos usando componentes. Agora você pode perguntar por que, Chris, por que devemos fazer isso? Porque podemos mudar de ideia e fazer o logotipo, por exemplo , amarelo, certo? Ah, na verdade, acho que não adicionamos essa cor aos estilos de cores. Então, vamos lidar com isso. Não é grande coisa. Selecione a guia ativa, use-as para portas para abrir a cor do menu de estilos e, em seguida, adicione essa entrada, chame-a de destaque ou o que quiser , dourado, amarelo, onde quiser. E então podemos voltar para Adicionar componente. Então, como eu disse, é muito útil porque podemos mudar muitas e muitas instâncias, também conhecidas como cópias, jogando com o componente principal original. Assim, muda de cor e tudo se atualiza. Mas, obviamente, precisávamos de uma ampla. Então, vamos desfazer com o Control Z. Agora você pode, é claro, brincar com o texto abaixo, talvez alterar o peso, o alinhamento, a distância e até mesmo o próprio tipo de letra. Então esse é o poder dos componentes. Vamos usá-los bastante. Portanto, não se preocupe se você não quiser 100%, compre. Por enquanto, vamos continuar. 31. Usando componentes — guia passo a passo: Bem-vindo de volta. Temos que adicionar muitos campos para este formulário de registro. Agora comece movendo o existente para o quadro Recursos. Vamos também mudar para o painel de camadas para que possamos ver no que estamos trabalhando. Portanto, esse é um layout automático. Temos 20 pixels em cada lado em termos de preenchimento e 15 na parte superior e inferior É uma largura fixa e a altura está configurada para abraçar o conteúdo. Ok, esse é o nosso ponto de partida. Em primeiro lugar, precisaremos do rótulo da maioria dos campos, nem dos rótulos, para que você saiba quais são. Inserir sua localização é uma dica. É algo para ajudar você com o formato, mas não é o rótulo real. Então pegue a ferramenta de digitação, tecla de atalho D, e vamos adicionar esse rótulo. Agora, para o estilo, isso será colocado em um fundo escuro. Então, vamos fazer isso. Novo Nieto, mas 30 em branco puro. E a maioria desses campos será obrigatória. Então, eu digo que adicionamos esse símbolo que foi deslocado oito em seu teclado. Isso é uma estrela ou um asterisco , como é oficialmente chamado. E isso informa ao usuário que esse campo é obrigatório. Ele tem que preenchê-lo. Agora, para destacá-la, usaremos nossa cor de destaque, também conhecida como cor de destaque, que é o amarelo neste caso. Agora, esteja ciente de que eu selecionei apenas a estrela, não a camada inteira. Então é assim que vou aplicar esse material de grau de cor. Agora, o rótulo deve ficar alinhado à esquerda com o campo. Mas para manter as coisas, vamos selecionar tudo e pressionar Shift a. Então, adicionamos outro, o layout automático. Isso nos ajudará a manter o rótulo alinhado à esquerda, mas também podemos alterar rapidamente o espaçamento entre o rótulo e o campo usando essa parte aqui. Incrível. Agora vamos com eles por enquanto. Será um salva-vidas se algum dia mudarmos de ideia, lembre-se de 2050, 100 campos, isso realmente vai nos ajudar. Agora, vamos continuar. Esse ícone de GPS pode ser trocado por outra coisa, certo? Então, aqui está o que eu proponho. Primeiro, temos que selecionar essas duas formas. O mais rápido é segurar o controle, mover-se acima dele e clicar nele. Verifique o painel de camadas para ver isso. Desenhamos o mais baixo possível ou menos, basta desmarcar e fazer isso. Clique duas vezes uma vez e, em seguida, clique duas vezes novamente. E agora temos nosso GPS, dragão de Saigon, longe dessa VL porque há uma boa chance de usá-la várias vezes. E podemos alterá-lo com um ícone preenchido ou outra coisa, um ícone multicolorido. Agora que está separado, vamos transformá-lo em um componente, como de costume, clicando aqui. Ótimo material. Agora vou arrastar uma instância dentro desse layout automático dentro do campo. E por quê? Porque, em seguida, vamos transformar tudo, todo o campo, em um componente. Simplesmente assim. Não se preocupe se você não entender agora, confie em mim, vamos continuar. Então, por enquanto, temos três componentes no total. Temos o logotipo, o GPS e esse campo. Agora é hora de arrastar uma instância para dentro dessa primeira tela acima de mostrar restaurantes, mas não precisamos do rótulo lá. O que vamos fazer? Então, no formulário de inscrição? Claro. Precisamos de um rótulo, mas não acima. Então é isso que fazemos. Vamos controlar. Clique no rótulo. Concentre-se aqui no lado direito da tela no meio , onde diz camada. Observe que temos um símbolo aqui. Diz criar propriedade booleana. Agora, booleano simplesmente significa que é uma opção sim ou não, verdadeira ou falsa, mas binária de um ou z. Clique nela e você verá essa nova janela. O valor padrão deve ser verdadeiro. E é isso que o nome do programa rotulado soa quase certo. Crie uma propriedade e bem, nada parece ter acontecido. Nós vemos esse destaque roxo aqui. E se desmarcarmos, clique no componente dentro da semente, nessa região de propriedades e mostre novamente o rótulo. Mas o que isso faz? Bem, deixe-me te mostrar. Agora você deve ver essa opção aqui, mostre com o rótulo. E, claro, podemos ativá-lo e ele desaparece ou volta. Essa é uma propriedade booleana. Dissemos à Figma que queremos controlar o rótulo se ele aparecer ou não. Mas observe que se você clicar no componente original, você não tem essa opção. E isso é normal. O botão só aparece em instâncias em colônias, em cópias. O componente massivo não o tem. Esse aqui. Por fim, você pode se decepcionar com o fato de esse campo aparecer quando o rótulo está oculto. Afinal, queremos 20 pixels entre o campo e o botão, certo? Bem, vamos fazer isso. Selecione Copiar e, em seguida, mova para cá, duas restrições. Aqui, o padrão é definido para a esquerda e para cima. Queremos que seja configurado para a esquerda e para baixo. Para mudar isso, basta clicar aqui. É tão fácil quanto isso. E agora você pode esconder que o rótulo vai ficar, mas por favor, assista a esta palestra novamente. E quando você estiver pronto, podemos continuar com o ícone e os campos de registro. Muito obrigada. E lembre-se, o botão só aparece na cópia, não no componente principal original. Ok. Boa sorte com isso. 32. Use o swap de instância para mudar rapidamente de ícones: Bem-vindo de volta. Espero que você consiga chegar aqui. Agora, precisamos de muitos campos para esse formulário, mas temos esse ícone aqui do qual , na verdade, não precisamos. Obviamente, vimos a propriedade de texto booleano para os textos, mas vamos aplicá-la aqui também. Dentro do componente principal, selecione o ícone GPS. Observe que isso é uma cópia. O original está acima dele. Não vamos tocar nesse. Ok, concentre-se na camada mais uma vez. Isso é o que estamos procurando. Aplique a propriedade booleana. Por que não diz Criar? Porque já temos um para a gravadora, mas não se preocupe. Vamos clicar aqui para criar um novo. Chame-o de ícone de show, embora o nome realmente não importe. Quanto ao padrão, vamos alterá-lo para falso. E isso porque a maioria dos campos não terá um ícone. Vamos voltar a examiná-los com um e dar uma olhada. Aí, nenhum é o ícone. E com muito bom aviso, há um pequeno problema e eu não quero perder tempo com isso. Agora, no componente principal, a dica agora está centralizada e isso não é bom. Então, aqui está o que é o quê. Agora temos que mudar a seguinte coisa. Selecione o cérebro de Layout automático para o campo, este aqui, e altere sua configuração para empacotar. Obviamente, isso afetará a tela deles, mas aquele que copiar da tela número um, o ícone do GPS estará muito próximo da mão. Então, isso não é bom. Aqui. Fui rápido demais e selecionei o campo da instância. Observe o painel de camadas, isso é um erro. Eu ainda posso mudá-lo para o espaço entre eles, mas não é o que queremos. Portanto, use o Controle Z e selecione o layout automático de dentro da instância. É isso que queremos. Ok, agora é hora de adicionar muitos campos. Então, arraste a primeira e centralize-a horizontalmente, posicionada a cerca de 40 pixels da barra amarela, mais ou menos. Claro que sim. O primeiro campo deve ser chamado FullName. Substitua esse rótulo. E acho que precisamos fazer a mesma coisa com a mão. Isso pode dizer John Doe ou Christian. Sempre que quiser, você tem um nome, qualquer que seja, clique em Escape e com eles , teremos muitos campos, e este não precisa ser tão amplo. Então, aqui está o que eu proponho. Como a instância, esta aqui, isso deve ser configurado para corrigir aqui. Então, vamos dar acesso à web, dividir isso por dois adicionando barra do neste campo, e esse é o 28. Agora, o problema é que também precisamos de um espaço vazio entre os campos. Então, vamos remover 20. Então esse é o, OH, agora você pode adicionar -20 no campo ou simplesmente digitar 308. Agora, você pode se surpreender ao ver que esse campo não está mudando. E isso porque temos o layout automático dentro dessa instância. Portanto, a instância em si não é onde você pode ver o destaque roxo aqui. Agora, temos que selecionar o Layout automático, este aqui. Em vez de consertado, precisaremos alterá-lo para encher o recipiente. Agora você pode perguntar a Chris, por que Phil container? Bem, a instância é o contêiner, o destaque azul. Lembra? Então, estamos dizendo: Ei, esse campo precisa ser tão amplo quanto a instância. Se a instância do clone for 308, o campo também deveria estar correto. Agora, se a instância ficar mais ampla, siga esse valor. A única outra opção é o conteúdo dela. E isso significa simplesmente, ei, Figma, faça do campo o porquê do conteúdo em si. E o conteúdo neste caso é cristão estéril. Isso não faria sentido nessa situação específica. Então, obviamente, não vamos usá-lo. Vamos fazer outra cópia e colocá-la à direita. O rótulo também deveria dizer cidade, a dica, vamos usar algo básico, como selecionar cidade. Em Selecione uma cidade. Acho que é uma cidade selecionada. Agora, isso significa que precisaremos do menu suspenso. Já temos um na tela deles, mas temos ao lado de São Francisco. Então, selecione-o e mova-o para a chuva de recursos. Então, vamos transformá-lo em um componente. Por favor, dedique seu tempo com isso. Quando estiver pronto, arraste uma cópia de volta para São Francisco. Agora, como é muito pequeno, talvez você queira usar o painel de ativos para isso, o que for melhor para você. Quando você estiver pronto, vamos pensar sobre isso. Volte para o campo da cidade e habilite um ícone com a moldura selecionada, você terá que alterar o espaçamento de embalado e escolher o espaço entre. Mas, no momento, temos apenas uma opção de ativar ou desativar o ícone. E, basicamente, isso não é bom o suficiente. Portanto, precisamos ser capazes de trocar esses ícones para trocá-los. Bem, felizmente, podemos fazer isso na Figma. Então, volte para o componente principal. A maneira mais fácil de trabalhar é usar o painel de camadas e encontrar o GPS Saigon. Aqui, está um pouco acinzentado. Ok, agora, mova seu foco aqui no lado direito. Aqui temos outro símbolo, bem nesta posição ao lado de onde diz GPS. Clique nele e teremos uma troca de instâncias. Uma troca de instância significa simplesmente que podemos mudar o ícone. Se desmarcarmos isso e depois selecionarmos o componente mestre, você deverá ter três propriedades no total. Então, isso é mostrar ou ocultar o rótulo. Troque o ícone, este aqui e, finalmente, mostre o que é um ícone de alto di. Vamos voltar para selecionar a cidade. Os dois botões estão aqui e, entre eles, resolvemos esse trabalho. Portanto, temos apenas dois componentes de ícone neste projeto. Então clique aqui e você verá que os dados serão bem rápidos. É tão fácil quanto isso. Mas o problema é o seguinte. A diferença de tamanho quebra o ícone e isso não é bom. Mas temos uma solução fácil. Então, volte para o componente principal, a seta, e então vamos usar uma mudança automática de layout a. Agora o tamanho está totalmente bom. Agora, não quero aborrecê-lo com várias explicações, mas lembre-se disso, se você é, os ícones têm um tamanho diferente e você quer poder trocá-los. Basta usar o dia do turno no quadro Recursos na massa do componente. Vamos recapitular. Então, no componente de campo, selecionamos o ícone GPS e usamos o recurso chamado propriedade de troca de instância. Depois de aplicado, podemos ir para um clone. Então, por exemplo, podemos mudar os ícones com base nos componentes que temos disponíveis neste projeto. No nosso caso, há apenas dois ícones, então, obviamente, isso é muito fácil. Agora, caso o ícone não caiba, precisamos usar Shift a no ícone original, também conhecido como componente principal ou principal. Ok, vamos continuar. 33. Concentre-se na sua velocidade: Bem-vindo de volta. De tempos em tempos, você terá essas sessões intensas em que a única coisa que importa é sua velocidade, por exemplo , aqui, onde precisamos de muitos campos. Vamos começar a trabalhar fazendo uma cópia do campo de nome e arrastando-o para baixo, alterando a largura para 656 e o campo deve crescer sem nenhuma outra configuração. Abaixe a chamada à ação principal abra espaço e faça , abra espaço e faça o possível para seguir essas etapas enquanto trabalho em segundo plano Deixe-me contar algumas coisas sobre meu processo de pensamento. Então, isso faz parte do jogo. Agora, não importa quantos truques sofisticados você use no Figma, isso faz parte disso. Agora garantido, o objetivo é trabalhar da forma inteligente e eficiente possível. Mas, no final do dia, você terá tarefas repetitivas, tediosas, tarefas chatas, e essa é uma delas. Então, em vez de reclamar disso, eles veem como um exercício, como uma chance de melhorar suas habilidades, C não faz nada difícil do que está acontecendo aqui, mas precisa ser feito. Então, do jeito que eu vejo, gosto de me desafiar a fazer isso o mais rápido possível. Durante meu tempo como CEO da minha empresa de design de aplicativos, cinco anos no total, entrevistei centenas de designers e sempre lhes dei habilidades. Claro, eu queria que eles conhecessem as teclas de atalho e tivessem um bom conhecimento sobre o design do programa. Mas eu sempre busquei velocidade. A velocidade me mostra que você valoriza seu tempo. A velocidade me diz que, mesmo que você não saiba alguma coisa, uma vez que você aprenda que, quando se envolver, você fará um ótimo trabalho. É um dos poucos indicadores que os empregadores costumam procurar. Agora, embora seu currículo possa ser lindo, não é suficiente para conseguir um bom emprego. Normalmente, isso tem que ser algum tipo de teste de habilidades. E é fácil ver o porquê. Como alguns designers podem levar 20 minutos para fazer esse trabalho repetitivo, podem fazer isso e talvez tenham ainda menos dívidas, certo? Isso por si só já diz muito sobre esse designer específico. Então, focado na sua velocidade, é assim que você vai causar uma ótima primeira impressão. Senha web e esses campos estão prontos. Mas aqui está algo que você deve ter notado. Selecionar esses campos de texto não foi muito bom para ter mais facilidade com Você poderia fazer isso. Então, vamos voltar ao componente principal e selecionar o rótulo. No lado direito. Você encontrará essa parte que diz conteúdo. E você pode ver que esse é um campo em que ele nos mostra o texto atual. E, obviamente, isso é rótulo. Logo acima dela. Temos esse ícone e diz criar propriedade de texto. Clique nele e você verá uma nova janela, pois o texto do nome está totalmente e o valor também está bom. Agora, o que isso faz? Bem, selecione qualquer campo. E no lado direito, além de mostrar rótulo, mostrar ícone, você também vai querer ter essa opção de alterar o texto diretamente deste lugar. Agora, isso te poupa muito tempo? Bem, está em discussão. Eu mostrei intencionalmente esse recurso depois de renomearmos manualmente todos esses campos. Porque a velocidade exige prática. Uma coisa é entender isso, mas outra coisa é realmente fazer isso de volta ao componente principal. Se pudermos editar o rótulo, certamente podemos fazer a mesma coisa com a mão. Então, basta clicar em Control para selecioná-lo e procurar o conteúdo no lado direito. Clique no mesmo ícone e crie uma nova propriedade. Desta vez, isso deve ser chamado, portanto, o nome é importante porque temos que nos manter organizados. Agora temos a alça, o botão, mas vamos precisar do componente. Agora, arraste-o da tela registrada. Precisamos colocá-lo no quadro de Recursos. A partir daqui, vamos transformá-lo em um componente como esse. Em seguida, selecione o texto e faremos a mesma coisa. Vamos tornar o texto editável. Não precisa de mais nada. Ok. Agora, arraste uma cópia e mantenha o texto como está. Crie uma conta. Mas observe a ortografia. A distância do último campo deve ser a mesma do primeiro campo, a barra amarela. Eu recomendo 40 pixels. Mas isso é para o z, dê aceitação, é claro. Quando estiver pronto para seguir em frente, faça uma cópia desse verde e seja o mais eficiente possível com suas ações. Agora, vou começar de baixo. Portanto, o texto deve dizer: entre na sua conta. Novamente, por favor, observe sua ortografia. Isso é muito importante. Remova os campos de nome, CD e número de telefone. Aumente os campos de e-mail e senha e verifique se eles correspondem à distância da tela anterior. Eu disse que inverteu os pixels, então vamos usar isso aqui também. Em seguida, levante o botão laranja também. Vamos trabalhar no DAB. Mova a barra amarela para a direita para alterar o peso dessas camadas. Portanto, registre que isso deve ser mostrado regularmente. E então faça o login. Obviamente, isso precisa ser ousado. Para finalizar, precisamos de uma nova camada chamada esqueci a senha. Portanto, faça uma cópia da etiqueta e coloque-a no lado direito, se quiser Você também pode alterar o alinhamento do texto da esquerda e do alinhamento à direita, caso possamos editá-la posteriormente. Agora, você pode notar que essa nova camada estará acima da instância e isso é totalmente normal, então não se preocupe, tudo bem. Ok. Faça com que fique amarelo. E, basicamente, acho que quase pronto, não só temos duas telas bonitas, mas também aprendemos muito sobre o uso de componentes e várias propriedades, como Boolean, troca de ícones ou o x propriedade. Ok, veja se há mais alguma coisa. E se não, vamos continuar. Muito obrigada. 34. Use propriedades de componentes — como um profissional!: Bem-vindo de volta. Agora sabemos como usar os componentes muito bem. Então, eu gostaria de continuar desenvolvendo esse conhecimento. Então, vamos nos concentrar na barra de ação. Isso também deve ser transformado em um componente. Então, aqui está o que eu proponho. Selecione todos os elementos , agora use Control C, Control V para colá-los dentro do quadro Recursos. Ou você pode simplesmente arrastar uma cópia, o que for melhor para você. Agora remova o retângulo porque não precisamos dele. Agora vamos fazer isso. Selecione esses três ícones, o menu de hambúrguer, o filtro e a pesquisa. Tudo isso precisa ser transformado em componentes. E temos uma opção aqui em que podemos fazer vários componentes. Olá, um único clique. Assim mesmo. Incrível. Agora, por que não usar o menu suspenso? Porque já o temos aqui, caso você não queira lidar com isso. Ok, vamos aumentá-los para que possamos ver todos os componentes originais no topo. Ok, agora arraste algumas cópias. Primeiro, o menu de hambúrguer do que os outros dois. Ok, é hora de alguns layouts automáticos. Então, desloque a direita para ficar no lado esquerdo, desloque e, em seguida, dois ícones no lado direito, novamente, desloque a. Falando nisso, lembre-se de usar Shift a na massa original dos componentes nos ícones eles mesmos. Isso é muito importante. Agora vamos manter as coisas simples. Então, precisamos de 40 entre os ícones à direita e depois 20 para os da esquerda. Agora, podemos configurar margens diferentes, por exemplo, dez pixels entre o menu suspenso e a margem das aspas do nome da cidade. Esses tipos de detalhes tornam as coisas um pouco mais complicadas do que deveriam ser. Então, eu sempre vou escolher a simplicidade sempre que possível. Tenha um bom plano de fundo, teremos que selecionar os dois layouts automáticos e depois usar shift. Eles, mais uma vez, basicamente, agora esse é um único elemento. E por causa disso, é claro que podemos adicionar o preenchimento p Caso contrário, por favor, precisaremos alterar o preenchimento. No entanto, as configurações são bastante simples. 32 pixels em cada lado. Quanto à altura, você pode mantê-la definida como z. E aqui está o porquê. Suba para cima. Agora, aqui, esses dois menus suspensos devem ser definidos como corrigidos. Agora, por que corrigido? Porque não precisamos de nenhuma flexibilidade. Queremos 720 para a largura e 112 para a altura. Agora, podemos torná-lo flexível, responsivo e curto? Nós poderíamos, mas como eu disse, vamos manter as coisas simples, porque isso não é necessário. Finalmente, precisamos mudar a posição do conteúdo para centralizar. Isso é feito clicando aqui, de forma bastante simples. E mais uma coisa, precisamos mudar o arranjo de espaço entre os fatos que realmente não nos ajuda a mudá-lo. Em essência, isso é feito e podemos transformá-lo em um componente. Ok, coisas ótimas. Agora, vamos torná-lo editável, como acabamos de aprender. Então comece com o controle de texto. Clique para selecionar isso ao lado do conteúdo. Clique nesta seta para ver o texto do nome. E para o valor padrão que pode continuar sendo São Francisco. Em seguida, o menu suspenso. É aqui que eu quero que você faça uma pausa, veja se você controla o clique. Você pode obter essa camada, o vetor real. E você pode ficar com raiva porque não há nenhuma configuração aqui. A única coisa que você vê é esse ícone que diz Selecionar instância. E essa é uma maneira famosa de dizer: Ei, você realmente escolheu a coisa errada. Eu não acho que você precise estar aqui. Você não pode fazer nada com o vetor real. Você precisa trabalhar na instância. Então, você pode clicar aqui ou simplesmente usar o painel de camadas para realmente selecionar a instância. Você pode reconhecê-lo por este ícone de diamante vazio. Ok, coisas boas. Agora vamos aplicar um booleano porque talvez queiramos desativá-lo. Isso é feito usando esse ícone aqui na seção da camada. Vamos mudar o nome para mostrar o menu suspenso. Agora, precisamos aplicar uma propriedade de instância de troca? Acho que não, neste caso, provavelmente manteremos esse ícone. Mas e o resto? 100 por cento, nós queremos isso. Então comece com o menu de hambúrguer. Clique aqui para criar uma troca de instâncias. E quando desta vez, por favor, nomeie-o para, digamos, ICAM-1. Em seguida, selecione o filtro, não o layout automático, mas a instância do filtro, crie o novo e vamos chamá-lo Ícone para finalmente o ícone de pesquisa, uma nova propriedade chamada Ícone três. E terminamos, mas temos que experimentar. Então, vamos fazer uma cópia dessa barra de ação e tentar substituir um ícone. Vamos com o menu de hambúrguer. Então, por exemplo, digamos que queremos substituí-lo pelo ícone do GPS. Então, isso funciona? E sim, funciona. Agora, o problema é o seguinte. Caso o ícone do GPS esteja distorcido, encontre a massa do componente e use shift. Eles, eu já fiz isso. Agora, brinque com isso e veja se tudo funciona bem. Ao trocar um ícone, você pode notar uma lista suspensa aqui. Você tem componentes locais e prefere. Este segundo é útil caso você queira importar a enorme biblioteca de ícones, centenas de ícones, talvez até milhares. Então, o que você não quer fazer é rolar como um louco. Então, o que você faz é escolher alguns ícones maior probabilidade de serem usados para alterar a lista preferida. Faça isso, selecione o componente principal, clique aqui e clique nesse símbolo para editá-lo. A partir daqui, você obterá valores preferenciais. E agora você pode clicar neste ícone Plus. Basicamente, você pode verificar os componentes que você pode precisar com mais frequência do que não. Caso você não consiga gerenciar, basta usar esse botão para alterar o modo de visualização. E porque temos aqui, vamos mudar alguma coisa porque eu conto 123, isso não faz nenhum sentido. Portanto, você pode clicar duas vezes aqui para renomeá-los. Por exemplo, o ícone esquerdo faz muito mais sentido do que o ícone à direita um e depois o ícone à direita dois. E isso é muito melhor quando está quase pronto. Acho que esquecemos algo muito importante. E se não houver título? Então, selecione-o no componente principal e vamos aplicar uma propriedade booleana para isso também, porque isso pode acontecer. Então, desta vez, chame-o de show title, por exemplo porque os textos reais podem mudar. Mas e os dois ícones do lado direito? Sempre precisaremos deles? Acho que não. Então, vamos fazer a mesma coisa. Mostrar ícone, à direita, um. E então também teremos a opção de mostrar o ícone certo. Portanto, eles podem ser definidos como verdadeiros por padrão. E quando terminar, volte para o clone, para a instância. E aí se destacou, não vamos aplicar um booleano no menu de hambúrguer, porque na maioria dos aplicativos, o ícone de trás está sempre presente. Ok, você pode remover o título, você pode remover os ícones certos. Agora, para ser honesto, estou muito orgulhoso de você por chegar até aqui. Confie em mim, quando comecei a aprender sobre essas propriedades, esses componentes e outros enfeites, tive dificuldades com isso. Eu aprendi isso passo a passo. Foi frustrante no começo. Eu não estava encontrando as propriedades certas, mas estou muito feliz em dizer que com pacientes e consultórios, acabei conseguindo. E você também. Vamos fazer uma pausa para que você possa se atualizar. Obrigada. 35. É assim que você usa variantes: Bem-vindo de volta. Vamos falar sobre variância de componentes. Então, vamos pegar a barra de status. Temos que reutilizá-lo repetidamente. Mas e se tivermos 200 telas e o cliente disser, ei, eu não a quero em branco. Então, devemos nos preparar para isso. Então, arraste-o da segunda tela para o quadro Recursos e vamos fazer isso. Portanto, não vou brincar com layout automático do lado direito. Vou mantê-lo como está. Em vez disso, vou transformá-lo em um componente diretamente. Agora, quero que você observe algo no topo, onde geralmente temos o componente de criação antigo. Não é diferente. Diz criar variante. Então, vamos usá-lo. Agora podemos chamá-lo de muito escuro ou colorido ou algo parecido. Mude para o outro e chame-o de claro ou branco ou qualquer outra coisa. Isso vai nos ajudar a reconhecê-los. Observe que há uma linha pontilhada em torno desses dois caras. Então, isso nos mostra que estamos lidando com a variação. Quais variações? Agora, para a segunda, vamos usar as cores de seleção e deixar todos os ícones brancos. Então, para o fundo, vamos torná-lo laranja com qualquer outra cor. Veja o que isso está acontecendo. Basicamente, estamos criando opções, também conhecidas como variância, para a mesma coisa, para o mesmo elemento. Então, se o cliente mudar de ideia, podemos apertar um botão e terminar com isso. Vamos voltar para a segunda tela e mudar para o painel Ativos. Eu vou fazer isso para que você possa ver como isso normalmente acontece. Você pode arrastar a barra de status para fora como qualquer outro componente, nem a tecla de atalho simplesmente clicar e arrastar. É claro que você precisa alinhá-lo, mas depois olhe para o lado direito e escolha claro ou escuro. E isso é totalmente incrível. Arraste outro para a tela número três. E agora aqui está outra situação para a variação. Digamos que você não inseriu uma senha na tela de login. Poderíamos mostrar que o botão está desativado, certo? Então, vamos selecionar o MainComponent e criar a variante. Vamos chamá-lo de desativado, que é um termo muito comum. Então, vamos mudar o estilo. Então, vamos remover completamente a sombra e, em seguida, mudar a cor do laranja brilhante para qualquer nota que você configurou no painel Estilos. Ok, agora vá para essa instância e vamos mudá-la do estado padrão. Agora, a nomenclatura do estado padrão não faz muito sentido. Então, vamos renomeá-lo. Vamos alterá-lo para ativo, por exemplo e agora você sabe qual propriedade também não parece tão boa. Então, vamos renomeá-lo para state. Então, o estado do botão, ativo ou desativado. Então você vai se familiarizar com todos esses termos com o passar do tempo. Desenvolvedores e programadores também estão muito familiarizados com eles. E, assim, ao fazer grandes progressos com a variação. Agora, antes de terminarmos, vamos lidar com a terceira tela. Aqui está minha abordagem. Selecione esses dois ícones, a seta para trás e a de informações e, em seguida, mova-os para o quadro Recursos. propósito, você pode redimensioná-lo a qualquer momento, caso queira que seja maior do que usar layouts automáticos para cada um deles apenas para uma boa medida. Incrível. Transforme-os em um componente. Agora, volte para a tela número três aqui e, algo que você deve conhecer, você pode realmente arrastar uma cópia dessa outra barra de ação. Você não precisa usar o painel de ativos ou o quadro Recursos. É exatamente a mesma coisa, não importa em que você escolha confiar. Passo a passo, desativamos a seta suspensa, não precisamos disso. Substituiu a largura do título e amadureceu a entrega de pizza. Coisas incríveis. Para o ícone à esquerda, queremos a seta para trás. se apresse com isso. Talvez você não o tenha em sua lista preferida, mas podemos adicioná-lo em um segundo. Apenas tome seu tempo, então você deve estar pronto para ir. Olá, o ícone, certo, número um, porque só precisamos do ícone de informações. Configure isso e acho que terminamos. Sim, no geral, esse é um excelente progresso e estou muito empolgado com isso. Claro que você precisa praticar. Claro. Isso pode ser totalmente novo e talvez um pouco confuso, mas depois de fazer isso algumas vezes, você vai entender. Confie em mim, eu prometo, você vai conseguir. Apenas continue com isso. Como eu disse, vá para o componente principal e edite o ícone esquerdo no back-end até a lista de preferidos, porque é muito provável que o usemos bastante. E com isso, vamos fazer uma pausa. Muito obrigado. 36. Ganhe velocidade: Bem-vindo de volta. Vamos dar uma olhada e ver como podemos melhorar o design. Em primeiro lugar, vamos lidar com a tela do sistema de classificação. Arraste-o para dentro do quadro Recursos e mova o ícone ao lado dos outros. Ok, isso é perfeito. Agora, transforme-o em um componente. E quando isso for feito, Lee arrastará uma cópia. Agora, colocar de volta o emoji dentro da moldura do layout automático pode ser um pouco complicado na própria tela. Mas se você não conseguir gerenciar, basta usar o painel de camadas. Arraste e solte. Agora, ok, lembre-se, nunca coloque um componente principal dentro de outro, isso não funciona. Ok, vamos transformar isso em um componente e depois adicionaremos o final. Agora, poderíamos potencialmente fazer três delas. É o que diz o resumo, mas vou mantê-lo um pouco mais simples. Então, arraste outro MOG, um irritado, e você tem um anexado e é chamado exatamente assim de irritado. Isso precisa ser de 40 por 40 e a cor é claramente ruim. Agora, eu não tenho uma cor específica. Mente dourada, escolha algo que pareça diferente o suficiente da nossa laranja. Algumas pessoas podem confundir nosso laranja ou vermelho, então certifique-se de usar algo que seja diferente o suficiente. Ok, vamos criar também o emoji ou componente de raiva. Então, obviamente, arraste uma cópia. A propósito, eu sempre defendo uma coisa. Sempre que você transformar um ícone em um componente, certifique-se de definir o layout automático. Então essa é a mudança, eles, cada ícone aqui, precisam dessa mudança, de um tratamento. Caso contrário, não vai ficar bonito. Agora, vamos ver o que é o quê. Agora, isso pode ser um pouco difícil, mas eu realmente quero que você faça dessa maneira. Então, depois de ter uma variante da carta original, remova o emoji verde e vamos trocá-lo manualmente por um irritado. Agora, novamente, você deve usar o painel Layers para isso. Essa é a maneira mais difícil de fazer isso, mas eu realmente acho que é uma cama molhada. Lembre-se de sempre trabalhar com colônias, não com componentes originais. Vou dizer isso repetidamente porque é muito importante. Está bem? Você também pode substituir as porcentagens e o número de votos, se ainda não tiver feito isso, apenas faça com que pareça real. E quando tudo estiver dito e feito, você pode arrastar uma cópia do painel de ativos ou de qualquer outro lugar e testá-la. Você pode nomear a propriedade, estado ou o status, ou algo parecido. Quanto à variação em si, boa ou ruim, positiva ou negativa, verde ou vermelha, seja qual for a palavra , melhor para você. Repito, ninguém realmente se importa. É só para você. O que mais importa é manter as coisas simples e intuitivas. Não tenha pressa e adicione clones à tela número dois. Depois disso, acho que estamos quase acabando com isso. Agora, poderíamos ter usado o Auto Layout e várias outras coisas para a entrada do restaurante? 100% de certeza de que poderíamos transformar tudo em um componente, talvez criar algumas variantes para os casos em que o restaurante está fechado durante o dia, por exemplo, mas agora estamos falando sobre coisas de ajuste fino isso geralmente é feito no final de um projeto caro. Basicamente, são mais das mesmas técnicas. Então, vou pular isso e chamar isso de um. Então. Em vez disso, vamos fazer isso para praticar minha velocidade. Vou refazer o login e me registrar para verbos, mas com um fundo branco, um limpo. Então, vamos fazer isso. Vamos começar com uma cópia da tela número três. Agora, vamos ver o quão rápido podemos lidar com as coisas. Para a troca do título. Altere-o com, faça login ou registre-se e, em seguida, nenhum ícone de informação no lado direito. Não precisamos disso. E, basicamente, isso é feito para a parte superior. Agora, para as guias, vamos redimensionar a barra para o sexto ano. É metade de 720 porque só precisamos botar ovos. Isso é registro. E então faça o login. Substitua o texto, mas podemos manter o estilo como está, laranja e negrito, e depois regular e cinza para o outro, para o inativo. O que vou fazer, porém, é habilitar a transformação em maiúsculas. Isso está um pouco escondido no Figma, mas tudo bem. Ok, isso vai acontecer, lembre-se de enviar a barra ativa V como antes, mas antes de fazer isso, você pode querer alterar o texto para o texto central em vez de para a esquerda. Isso vai nos ajudar com todo o alinhamento. Ok. Agora, as abas em si demoram apenas um minuto, mas bem, eu lidei com isso. Pense nos campos. Eles são brancos e isso é um fundo branco e vai ser um problema. Então, vamos pensar. Agora poderíamos ativar uma sombra projetada. Mas eu realmente não quero uma feia. Eu prefiro sombras suaves que não se destacam. realmente visíveis são muito feios. Então, por causa disso, acho que vamos usar um fundo colorido. Nós vamos mudar isso. Então, até lá, remova todas as entradas. Esta é a maneira mais rápida de trabalhar. Pegue todos os campos da outra versão deste verde e arraste uma cópia aqui. Agora coloque tudo a 30 pixels da parte superior e você deve estar pronto para começar. Espero que você esteja vendo o problema com branco sobre branco. Não vai funcionar. Agora, no conjunto fixo, selecione a prancheta e, em seguida, vamos provar a cor a partir da tela com du. Agora, o código colorido, caso você esteja acompanhando é f z, porém, F11, F8. Mas é mais simples e rápido amostrá-lo. Então é isso que a ferramenta conta-gotas é quatro. Então, vamos fazer bom uso dele, certo? Mas mesmo com o plano de fundo, os campos ainda não se destacam. Além disso, o rótulo também é branco. Então, o que devemos fazer? Bem, isso exige o fim. Vamos voltar ao quadro de Recursos e ver o que podemos fazer. Sempre reserve um tempo para organizar todos esses caras corretamente. Em geral, você os teria em uma página separada com espaço infinito, mas eu queria mantê-los próximos para que você os visse constantemente. Ok, vamos criar a variante e chamá-la de BG simples, para fundo simples ou algo parecido, que faça sentido para você. Agora, o rótulo tem que ser azul, mesmo peso, mas com cores diferentes. Deve ficar bonito. Agora, quanto ao asterisco, que vai aparecer muito bem em laranja, acredito que vai se destacar. Agora. Veremos em um minuto se realmente parece bom. Agora, para o campo em si, vamos usar uma sombra básica. Na verdade, vou manter as configurações padrão. Agora, o problema é o seguinte. Na verdade, poderíamos usar uma prancha que também. Bem, o teste, várias outras coisas. Mas apesar de tudo, estou muito feliz até agora. Agora, vamos experimentar. Então. Você vai ver alguma coisa. Quando você altera todos esses campos sem a variante para o novo, somente a sombra se aplica. Na verdade, a cor do rótulo não muda. Aqui está o porquê. Volte até o fim. Se você quiser editar seu nível de galinhas e alterar a variante para outro estado, especificamente para mudar a cor, você terá que usar uma falha. Aqui temos duas cores. Mas para tornar isso mais fácil, vamos fazer isso. Vou remover o asterisco para que o preenchimento não seja mais misturado. É isso que está causando os problemas. Agora, deve ser azul, a cor principal. Então, agora, se experimentarmos, você verá que isso funciona muito bem. Podemos até mesmo alterar o conteúdo do rótulo e depois alternar entre os estados. Então, estamos mudando os textos reais. E então, com a aplicação do novo estado e ele funciona, está tudo bem, esse era o problema que estávamos resolvendo em preenchimento e que estava estragando as coisas para o Figma. Mas e os homens que consideram o símbolo que é o risco? Bem, o asterisco precisa ser definido como outra camada de texto. Vamos fazer isso acontecer. Então, depois de obtê-lo, verifique se ele está organizado corretamente e, em seguida, configure o preenchimento. Agora, para o primeiro, isso tem que ser amarelo, é claro, porque é para um fundo colorido. Selecione isso com o rótulo e, em seguida, use shift. Eles, por padrão, serão empilhados. Mas você pode mudar a orientação daqui, de vertical para horizontal. E, basicamente, estamos prontos para ir. Repita a mesma coisa na variante. Adicione a estrela, mude de cor para laranja e use um layout automático junto com o rótulo. Ok, agora eu mudei a orientação. E, basicamente, estamos prontos para ir. Deixe-me recapitular, como tínhamos duas cores diferentes no rótulo quando trocamos a variância, quando trocamos de estado, o rótulo permaneceu branco. Figma estava ficando confusa. Os figos que separamos do asterisco e aplicamos uma cor para o rótulo e outra para a estrela. Além disso, uma coisa que você pode fazer é montar um tecido, chamá-lo de etiqueta ou qualquer coisa rotulada que eu acho muito boa. Caso você receba uma estrela dupla nas telas anteriores. Isso é só porque eu digitei manualmente, você provavelmente fez a mesma coisa. Então, o que você vai ter que fazer é removê-lo um por um. Uma coisa a observar é que eu não transformei o asterisco em um componente. Não há necessidade disso, pelo menos não agora. Ok. Acho que somos muito bons. Certifique-se de assistir a esta palestra pelo menos duas vezes. Eu realmente queria incluir isso no curso porque é um erro que eu mesmo cometi quando comecei com a variação. E acho que é melhor que você saiba disso, pois trabalho em segundo plano, deixe-me contar a lição. Quando você está lidando com botões ou campos. Sempre pense nos Estados Unidos desde o início e crie-os o mais rápido possível. Você sabe, a maioria dos botões precisará de um estado desativado. Você sabe, a maioria dos campos exigirá uma etiqueta ativada ou desativada. Então, isso é experiência para você. Então, no próximo projeto, você pode criá-los imediatamente. E é claro que você pode ir ainda mais longe. Você pode pensar em estados flutuantes. Se for um site ou estados ativos para o campo, talvez validação, talvez um traço vermelho ao inserir o formato errado para a senha. Talvez a senha seja muito curta, coisas assim. Talvez um traço verde no campo se tudo estiver bem. Agora, é melhor lidar com todas essas coisas no início. Caso contrário, você pode ter problemas como o que acabamos de encontrar. Agora, antes de terminarmos, eu gostaria de mudar a posição dos botões na parte inferior, 32 pixels da borda. Já fiz isso antes de outros projetos e acho que realmente faz sentido para o usuário. Basicamente, você se acostuma com essa posição e é mais fácil para o usuário. Você sabe que está sempre lá na parte inferior. São gays. Com isso. Vamos continuar. 37. Usando campos da maneira certa: Bem-vindo de volta. Vamos trabalhar para adicionar um novo endereço e minha inflamação, que são duas telas baseadas em campos. E isso é tudo. Então comece com uma cópia da última tela e vamos começar do topo. Vamos substituir a largura da Bíblia e adicionar o novo endereço. Você pode remover as guias porque não precisamos delas. Mas isso nos mostra que não temos uma separação clara aqui. Então, precisamos fazer alguma coisa. Basicamente, vamos adicionar a sombra de Effects. Essa é a maneira mais simples de lidar com isso. Agora, as configurações devem ser para o desfoque. E dois para o y. Essa é uma sombra muito, muito suave, mas é assim que você geralmente deve abordá-las. Se você consegue ver claramente uma sombra, provavelmente está exagerada. Ok, agora vamos arrastar alguns novos campos que precisamos para anedótica. Adorei o fato de que depois que a copiadora do Figma percebe que você quer um pouco mais. Então, quando você pressiona o Controle D, ele coloca automaticamente a próxima cópia corretamente. Isso é uma coisa adorável. Bom trabalho. Figma. Quando estiver pronto, comece a trabalhar e substitua todas essas etiquetas. E, portanto, eu tenho meu wireframe na outra tela para que eu possa lê-los com bastante facilidade. É por isso que realmente vale a pena ter dois monitores, sua cidade. E então a mão é, selecione a cidade. Em seguida, temos o nome da rua e eles escolheram uma dica que diz Market Street. Pelo que eu sei, essa é uma rua real em San Francisco. Se o cliente for de lá, isso fará com que pareça mais real. Agora, o número da rua, digamos 548 com algo para dar uma dica. Então, finalmente, o código postal que pesquisei no Google é o jogo 94104 dash 5401. Eles se contentam com isso e nunca os deixam em seus padrões. Conteúdo repetitivo é provavelmente a pior coisa que você pode fazer como designer. Bem, um deles, pelo menos. Agora, para a cidade, precisaremos do ícone suspenso. Então, ative-o a partir dessa opção e use o menu suspenso para selecionar o triângulo. O espaçamento deve ser alterado do espaço ocupado entre eles, mas já fizemos isso dez vezes. Então eu acho que você pode gerenciar. Agora, para o botão, ele deve dizer Criar endereço. E acho que é só isso. Agora vou ampliar para a outra tela, minhas informações, porque são basicamente exatamente a mesma coisa, as mesmas técnicas. Enquanto isso, acho que o próximo recurso mais empolgante é a grade de conteúdo. Esse é um recurso do Adobe XD que permite inserir muito conteúdo com facilidade. Então, por exemplo digamos que você tenha 20 miniaturas e queira 20 imagens diferentes. Bem, em vez de inseri-los um de cada vez, basta arrastá-los. E é isso que o programa faz isso. Além disso, é a mesma coisa com camadas de texto. É uma das coisas mais impressionantes sobre o Adobe XD. E agora que a Adobe comprou a Figma, espero que seja apenas uma questão de tempo até obtermos esse recurso. Agora, conhecendo a Adobe, pode levar semanas ou anos, seja, haverá para você em poucas palavras. É uma empresa enorme e poderosa, mas algumas coisas são incrivelmente lentas, especialmente alguns recursos. De qualquer forma, esses são todos os campos bem abotoados. Certifique-se de cuidar tudo do seu lado e, em seguida, continue com a próxima palestra somente depois de concluir essa etapa. Muito obrigado e te vejo em um segundo. 38. Crie o menu esquerdo: Bem-vindo de volta. Vamos criar um lindo menu à esquerda acordo com as diretrizes de design de material, começando com uma cópia da tela anterior, embora você precise excluir quase tudo. Somente a barra de status é útil. Então, vamos criar esse menu do zero. Se você não está familiarizado com o menu à esquerda, o que você obtém ao clicar no menu de hambúrguer é como acessar suas configurações, métodos de pagamento e assim por diante. Vamos começar com um retângulo para a área superior. Isso precisa ser 720 por 288y 288 pixels. Esse é o padrão de 144 dp dobrado. Agora vamos deixá-lo laranja, embora isso possa ser um gradiente ou até mesmo uma foto. É por isso que eu realmente gosto desse layout, embora seja do Google Material Design para colocá-lo corretamente. E depois disso, vamos colocar o logotipo acima dele. Agora, o logotipo pode ser substituído por um avatar. E, novamente, esse é um bom recurso do menu à esquerda. Isso o torna mais interessante. Mas aqui está o problema do logotipo. Não queremos o texto, apenas o ícone. Agora, poderíamos potencialmente criar uma propriedade booleana, mas vamos mantê-la simples. No quadro Recursos, basta arrastar o ícone para fora. Como você pode ver isso como um vetor independente, sem componente, nada. Isso é totalmente bom. Leve-o para uma nova tela e vamos redimensioná-lo. Acho que um a cinco por um a cinco é o ideal para esse retângulo específico. E isso porque isso nos deixará espaço suficiente para adicionar alguns detalhes, como o nome do usuário e seu endereço de e-mail. Agora, você pode perguntar, Chris, podemos usar um layout automático aqui? 100 por cento? Claro que sim. Agora, precisamos adicionar um layout automático? Não, na verdade não. É por isso que vou manter as coisas simples. Reproduz o logotipo a 32 pixels do lado esquerdo. E você pode usar o campo x para isso. Ou você pode simplesmente segurar a tecla Alt e medir as coisas, depois tocar nas teclas de atalho e tudo bem. Agora, a distância do topo não importa nesse momento específico. Abaixo, vamos escrever meu nome, Christian Baron quest Barron. Em termos de estilo, título menor deve ser bom. Alinhe-o à esquerda com o ícone e deixe cerca de dez pixels dele, mais ou menos. Claro que sim. Finalmente, o endereço de e-mail, Chris baron@yahoo.com. Esse não é meu e-mail verdadeiro, então, por favor, não o use. Na verdade, não me mande e-mails em geral, use a plataforma para se comunicar rapidamente ou, claro, o servidor de discursos. Estou sempre lá. Está bem? Isso deve ser mostrado no estilo corporal, mas em branco puro. E com todos esses três itens selecionados, agora podemos movê-los para cima ou para baixo para colocá-los no centro do retângulo laranja. Agora, novamente, poderíamos usar um layout automático? Claro, é claro, mas estou bem com as coisas do jeito que estão. Seguindo para baixo, precisaremos de alguns ícones e camadas de texto. Agora, o fundo em si precisa ser branco puro. Selecione a moldura e altere o preenchimento novamente para branco puro. Uma coisa que eu não mencionei é o fato de que o menu à esquerda tem, na verdade dois terços da largura da tela. Mas optamos por toda a largura porque não tem nenhum impacto no momento. Assim, podemos continuar como está. Agora. É hora de alguns ícones. Eu já tenho algo preparado. Eles são do flat icon.com. Passei muito tempo procurando por eles. Você os anexou e , em seguida, também numerou de cima para baixo para que você possa ter mais facilidade com eles. Por favor. No entanto, não os use para fins comerciais. Você os tem apenas para poder trabalhar , se quiser usá-los em seus próprios projetos, temos que pagar por eles. Está bem? Agora, quando você arrasta vários ícones para dentro, você pode ter alguns problemas com eles. Por exemplo, se eu tentasse selecionar os cinco primeiros , veja o que acontece. O quinto ícone não está sendo selecionado no momento. Eu tenho que fazer uma caixa muito maior para pegá-la. Portanto, pode ser um pouco frustrante ter mais facilidade com eles. Eu sugiro que você faça isso. Então, quando você conseguir selecionar todos os cinco para fazer uma seleção de caixa, use Shift altere o modo de layout de horizontal, o padrão neste caso dois verticais. Agora, uma coisa que resta é definir a distância. Eu vou dizer cerca de 60 ou algo parecido. E isso porque queremos evitar cliques acidentais. Portanto, temos que ser generosos sem espaçamento. Obviamente, sempre centralizou os ícones. Isso é uma necessidade absoluta. Você pode ficar tentado a alinhá-los à esquerda, mas, por favor, vá com o centro. Você pode fazer isso clicando aqui. Ok, em termos de espaço vazio lá, d2 pixels como antes, vamos permanecer consistentes. Sinta-se à vontade para usar o campo x enquanto configuramos o layout automático. O melhor de tudo é que você sempre pode remover o layout automático. Basta clicar aqui na extremidade negativa, basicamente e depois com ela. Agora, por padrão, eles serão agrupados, mas não se preocupe, basta clicar com o botão direito do mouse e escolher Desagrupar. Agora, por que você quer fazer isso? Porque queremos adicionar algumas camadas de texto e talvez tenhamos dificuldade em alinhá-las corretamente se o grupo estiver unido. Ok. Agora, deixe-me adicionar o primeiro item ou o esquadrão apenas ordena em geral. Quero que isso seja mostrado no estilo do rótulo. Então isso significa novo Nieto 30, ousado. Se você não tiver, configure-o como um tecido. Isso é o que a cor azul é totalmente boa. Por favor, alinhe-o verticalmente e o Figma deve ajudá-lo com essas linhas vermelhas. Mas aqui está o problema. Os ícones não estão dentro dessa tela. A tela é chamada de quadro para o, mas os ícones em si estão muito mais acima. Basicamente, eu os arrasto para dentro do Figma, mas provavelmente não tinha moldura para desmarcar. Então Figma não os colocou dentro dela. Não se preocupe. Selecione todos eles e arraste-os para o quadro 40. Isso vai resolver isso. Ok. Isso é muito bom. Incrível. Vou falar rapidamente enquanto faço todas as outras em ordem, teremos o seguinte. Então, a primeira, minhas ordens, depois a inflamação, aborda qual endereço? Formas de pagamento e entre em contato conosco. Esses ícones são bonitos e elegantes, mas são bastante sérios. Você pode procurar aqueles que são um pouco mais interessantes, talvez um pouco mais divertidos. Agora, as coloridas podem ser tentadoras, mas você precisa garantir que elas não façam com que o aplicativo pareça infantil, porque a fonte já está do lado lúdico. Portanto, você precisa se certificar de ficar longe disso. Ir para um território adequado para crianças pode ser perigoso. Você quer se manter semiprofissional. Ok, isso parece bom. Vamos fazer na parte inferior que teremos um botão de sair. Então, vamos fazer isso acontecer. Então, adicione outra camada de texto. E vamos fazer algo assim. O texto em si não é nada de especial. Vamos ter um ícone separado para isso. Agora, apenas como nota lateral, poderíamos ter usado alguns layouts automáticos aqui e ali. Assim, poderíamos ajustar o espaçamento entre os ícones e o texto, bem como entre cada linha. Mas você sabe o que, na verdade, vou deixar você lidar com isso porque deve ser bastante fácil de fazer. Agora, para finalizar o design, vamos separar a área de logout adicionando um divisor. Então pegue a tecla de atalho L da ferramenta de linha e desenhe uma, 720 com um único pixel para a espessura. Agora, escolha a cor cinza do corpo. Você deve ter um estilo salvo como colorido. E a coisa com tudo que está por vir. O problema é o seguinte. Este é um menu esquerdo moderno, limpo e profissional. Poderíamos fazer algo um pouco mais interessante. Mas, novamente, vou deixar você fazer isso porque quero ver você virgem e queria lhe dar muitas opções. Então, novamente, você vai ter que inventar algo um pouco mais interessante. Por enquanto, podemos continuar. 39. Crie caixas de seleção interativas: Bem-vindo de volta. Precisamos lidar com o menu certo. Comece com uma cópia da esquerda. Remova o ícone de logout e o texto, bem como todos os outros ícones. Agora podemos manter o divisor e as camadas de texto. Este será um sistema de filtro que permitirá ao usuário alterar a lista de resultados. É o que você obtém quando clica nesse ícone no canto superior direito da tela, mas sim. Agora, para o primeiro lote de opções, digitaremos essas categorias. Então, vamos ter espanhol, americano, internacional, indiano. E, finalmente, Valiant, sem portão, não tenha pressa. Você pode adicionar mais alguns ou remover alguns deles, apenas verifique se eles se encaixam. Agora vamos usar a ferramenta de retângulo para criar uma caixa de seleção. 48 por 48 folhas para o raio da coordenada do que pixels são suficientes. Ok, vamos dar uma olhada nas configurações. Vamos desativar o preenchimento. Não precisamos disso. E vamos ativar o golpe ou o tabuleiro do portão. Agora, a cor da borda é muito importante. A espessura, três pixels, por favor. Agora, quanto à cor, o problema é que, se estiver muito claro, pode parecer desativado ou inativo. escuridão também pode ser vista em seu rosto. Então eu decidi por esse código de cores, C3, C3, C3. Agora fique à vontade para salvá-lo. Em seguida, você colorirá estilos como cinza claro ou algo parecido com essa cor da caixa de seleção. Agora acho que o cinza funciona um pouco melhor. Agora, isso realmente será um componente. Então, vamos converter isso clicando aqui. Quando estiver pronto, mova-o para o quadro Recursos. Eles se divertem com isso. Você vai ter que dar uma olhada um pouco. Lembre-se de diminuir o zoom, pressionar Control, usar a rolagem do mouse, usar a tecla de caminhada espacial para se deslocar. Aqui, queremos criar a variante. Você já deve estar familiarizado com o processo . O problema é o seguinte. Vamos remover a borda e deixar todo o retângulo laranja. Mais uma vez, não se apresse. Não se apresse. Ok. Quando você estiver pronto, precisaremos adicionar a marca de seleção. E, como sempre, eu preparei algo. Você tem esse ícone, o lote, arraste-o para dentro, mas aqui está o problema. Quando você quiser alinhá-lo dentro desse quadrado, certifique-se de dar uma olhada no painel de camadas. Isso porque é muito fácil ficar desorientado. E talvez você não saiba por que as ferramentas de alinhamento não funcionam conforme o esperado. Isso é o que você quer. Está bem? A propósito, certifique-se de renomear a propriedade. E, na verdade, as duas variantes também. Chame-os de marcados e desmarcados, assim como a propriedade em si. Esse é o estado, provavelmente eu acho que está bem. Status estadual, o que funciona melhor para você. Então, novamente, isso está marcado e não verificado. Ok, vamos voltar para a tela. Precisamos arrastar essa caixa de seleção do painel de ativos e fazer alguns movimentos para alinhá-los corretamente. Agora, como estou trabalhando em segundo plano, quero dizer que realmente gosto de ensinar design AB. Esse processo em si se baseia em alguns princípios e técnicas. Depois de dominá-los, você pode realmente se concentrar no que é importante. E é assim que o aplicativo se parece, se sente e funciona. Como eu disse, milhões de vezes, ninguém se importa com a forma como você criou o aplicativo. Não é da conta deles fazer componentes, variações e layouts automáticos. O resultado final é o que importa, sua aparência, como funciona. Isso é o que importa. Não importa se você fez isso no Photoshop, Figma e Adobe XD. Agora, obviamente, você quer usar as melhores ferramentas para o trabalho e as técnicas mais avançadas. Mas, novamente, o foco no que é importante. Ok, voltando ao assunto. Caso você precise de alguma flexibilidade aqui, marque cada caixa de seleção e maré juntos e , em seguida, use Shift a. Você faz isso para cada opção. Vamos selecionar todos eles. E então você adivinhou, vamos fazer outro, o layout automático. E o problema é o seguinte. Precisamos tê-los porque o primeiro controla a distância entre a caixa e o texto, a caixa de seleção no texto. Então, digamos que queremos 20, bem, basta selecionar todos esses quadros e você pode alterar rapidamente esse espaçamento de forma bem simples. E então o grande nos ajuda a mudar a distância vertical. Queremos 40, por exemplo, certo? Novamente, basta digitar isso. Incrível. Agora, para contextualizar o usuário, vamos adicionar um texto que diz Mostrar somente. Isso muda um pouco o layout, mas acho que está tudo bem. Ele precisa do estilo do corpo do texto e cinza para o código colorido. Não queremos que ele se destaque muito. Lembre-se de que essa é apenas uma pequena parte do menu. Na verdade, temos dois tipos de filtros. Então, temos o tipo de cozinha e depois o tipo de comida. Quando estiver tudo pronto, suba a divisória do andar de baixo. Queremos cerca de 30 pixels da última caixa de seleção até o divisor da linha. Incrível. Agora, a ideia é mostrar ao cliente e ao desenvolvedor como esse painel deve ser. Portanto, certifique-se de alterar o estado de duas ou três caixas de seleção. Deixe-os em laranja e, em seguida, faça o mesmo com o texto associado. Basta fazê-los alaranjados. Quando estiver pronto para seguir em frente, basta pegar tudo aqui e fazer uma cópia lá embaixo. Agora, deixe-me acelerar as coisas à medida que eu mudo o tipo de comida. Então, isso vai ser pizza, tacos, hambúrgueres, café, e tudo mais. Alguns itens podem não caber na tela, mas isso não é grande coisa. Na verdade. É ótimo porque temos que mostrar que isso é rolável. Ok, agora é o seguinte. Temos a área superior inalterada e isso não é legal. Agora, em geral, quando você está lidando com filtros, você deve ter uma maneira de limpá-los. Então, por exemplo, se tivermos quatro caixas de seleção, seria muito irritante desmarcá-las manualmente. Então, vamos fazer isso. Vamos remover o logotipo e o endereço de e-mail. Com a camada de texto restante, vamos alterá-la para quatro filtros ativos. E no lado direito, eu gostaria de usar um ícone. Mas acho que essa camada de texto pode funcionar um pouco melhor. Ser mais amplo será um pouco mais útil. Então, digite claro em maiúsculas, mesma fonte, é claro. Mas uma coisa, por favor, deixe 32 pixels no lado direito também. À esquerda. Isso é muito fácil de fazer porque temos o campo x que nos ajuda bastante. Agora poderíamos ter usado guias, mas no geral está tudo bem. Ok, vamos redimensionar o retângulo. 2112 pixels, 112 pixels, a altura padrão. Ok, quando estiver pronto, você pode centralizar o texto e acho que terminamos com isso. Bem, não 100% com a tela Intel, mas vamos finalizá-la depois de uma pausa rápida. Certifique-se de acompanhar este ponto. Muito obrigado. 40. Criar switches de alternância: Bem-vindo de volta. O menu certo parece bom, mas temos algumas opções para criar. Tudo isso é baseado no resumo. Não estou mostrando isso durante a gravação porque isso retarda todo o progresso. Mas certifique-se de que eu esteja constantemente verificando e você deve fazer o mesmo. Ok. Deixe-me fazer uma cópia do programa na TV, bem como três entradas. Faça isso. Faça uma cópia desse layout automático, o maior. E então você vai ter que removê-lo. Lembre-se, use o símbolo de menos no lado direito, este. Quando isso for feito, você terá um quadro por padrão. Posso dizer que adoro isso na figma, mas é o que é. Teremos que clicar com o botão direito do mouse e escolher Desagrupar. Agora, você está livre para fazer essas cópias. Agora, poderíamos ter digitado manualmente algumas novas camadas de texto? Sim, claro. Mas eu sinto que precisamos nos sentir confortáveis em sujar nossas mãos. A mesma coisa aqui com a organização das coisas. Você vai ver, você vai ter que mover um monte de camadas. Este é um projeto real que exige que você pense com calma. Se você não se sentir confortável em mover as coisas assim, você terá um grande problema. A maioria dos projetos não é bonita e organizada. Então, quanto à bagunça, eles são desajeitados. Na maioria das vezes, o que você vê em um curso é uma versão muito organizada que foi preparada do que ensaiada. Agora, neste caso específico, eu já construí esse projeto antes no Photoshop e no Adobe XD. Portanto, estou bastante familiarizado com isso, mas ainda tento o meu melhor para proporcionar uma experiência autêntica , incluindo alguns erros e camas bagunçadas. Ok, aqui estamos. Eu removi as caixas de seleção e toda a camada de texto deve estar azul e alinhada à esquerda com todo o resto, bonita e limpa. Agora vamos criar uma chave seletora. No entanto, comece com um retângulo de 72 por 33 z. Agora, por que esse tamanho específico, 72 por 30? Bem, eu medi os outros boggles e isso parece estar no dinheiro. Faça com que seja bem arredondado. Gosto de usar valores super altos. Agora, para a cor, vamos usar C3. C3, C3. Você deve tê-lo, então você vai usar o painel Estilos. Ok, agora, por favor, alinhe-o no lado direito. Você pode usar a camada de texto claro para isso. Em seguida, na lista, teremos que pegar a ferramenta de elipse e fazer um círculo perfeito. A tecla de atalho é 0, 0 do círculo. Acho que isso faz sentido. Você pode segurar a tecla Shift ou usar o painel de propriedades. Estou procurando o 48 por 48, do mesmo tamanho das caixas de seleção. Isso tem que ser branco, mas é claro que podemos ver o que está acontecendo com o fundo branco. Então, para isso, vamos habilitar uma sombra projetada. Agora, as configurações que descobri que funcionam melhor são as seguintes. São seis para o desfoque e depois dois para o campo y, 25% de opacidade. Agora, o círculo deve ser colocado no lado esquerdo para mostrar que está desligado. É claro que garante que esteja centrado verticalmente. Quando estiver pronto, mova-o para o quadro Recursos. Lembre-se de que ter tudo bem estruturado funciona muito bem. A ideia com páginas é que você possa fazer uma apresentação muito boa para que qualquer pessoa possa explorar seu projeto com facilidade. Nesse caso específico, estou fazendo isso para fins de aprendizado. Então, eu não vou dividi-lo em páginas porque isso não é o ideal. o fim. Na verdade, é muito simples. Vamos fazer isso. Agora. Mova o círculo para a direita e mude o retângulo de baixo para laranja. Agora, a nomenclatura deve ser simples de ativar ou desativar. E você pode renomear a propriedade se quiser. Novamente, estado de status, algo assim. Agora, os toques finais voltaram para a tela e vamos adicionar três deles à parte superior da tela. Então, vamos escrever a linha com clareza. Mas o problema é o seguinte. Vai ser complicado organizá-los corretamente. Quando você tenta alinhá-los verticalmente com o texto, o texto pode se mover por motivos diferentes. Não vou entrar nisso. Então, basicamente, você não está fazendo nenhum favor a si mesmo dessa maneira. Então, por esse motivo, vamos aplicar o layout automático para cada linha. Em seguida, vamos fazer um grande layout automático, desse jeito. E vamos medir o espaçamento por baixo. Acho que definimos para 40. Sim. Isso parece quase certo. Por favor, ative a opção Definir e essa é a opção desativada. Acho que parece mais interessante assim. Mas os rótulos em si, bem, uma coisa, o resumo dizia algo sobre a pré-entrega. Aceite cartões de crédito e 60 min ou menos. Ah, a propósito, esse é um ótimo momento de ensino. Quando você altera o texto, o layout automático pode causar algumas dores de cabeça. Não se preocupe. Aqui estão os fatos. Altere a largura para fixa. Isso abrirá o campo de largura. E aqui você pode colocar 656. Você pode lembrar esse valor do divisor. Esse é o tamanho da tela inteira -32 em cada lado, então isso é 64. Então, total. Finalmente, alterou o layout automático de compactado para espaço entre eles. E, na verdade, esse é um trabalho, bem feito. Essa tela inteira deve estar toda configurada. Embora não parecesse tão complicado. Esses dois menus nos levaram a um bom trabalho. Se você conseguir chegar aqui, meus sinceros parabéns, não foi fácil. Mas agora vamos fazer uma pausa rápida e continuaremos em um segundo. Obrigada. 41. Desenhar cartões com componentes: Bem-vindo de volta. É hora de criar minhas formas de pagamento e acho que devemos usar um cartão para isso. E como eu sei que há outra tela que usará o mesmo design de cartão, esses são meus endereços. Então, devemos transformá-lo em um componente. Ok, vamos começar com uma cópia da minha inflamação. Vamos remover todos os campos, mas vamos manter o botão. Agora, isso deveria dizer adicionar um novo cartão. No passado, eu usava um botão de ação flutuante e o FAB, mas quero que o usuário se sinta muito confortável com a posição desse botão. Então, basicamente, deve estar sempre na parte inferior. Então, vamos manter essa posição. Agora, para a barra de ação, vamos mudar o título para formas de pagamento. A propósito, você pode até ter um ícone de adição aqui na barra de ação para adicionar um novo cartão de crédito. Depende muito de você. Essas decisões devem ser baseadas no que é melhor para o usuário. Uma vantagem na barra de ação provavelmente não é ideal. Mas, considerando que você não o usará com muita frequência, você sabe, você poderia potencialmente usar tudo. Estou feliz com o botão laranja aqui. Agora, antes de fazermos qualquer coisa sofisticada, vamos simplesmente adicionar as camadas de texto, a base. Portanto, a primeira será a placa primária, que ajuda o usuário a saber qual é a placa padrão, se houver. Agora, para ser honesto, devemos incluir a tela quando não houver nenhum método de pagamento selecionado. Mas falaremos sobre isso mais tarde. Resumindo, vamos pular algumas telas básicas nas telas de mídia porque não há nada de especial nelas. Poderíamos adicionar pelo menos mais dez telas. Mas, novamente, nem todo esse nodo empolgante será útil. Ok, a seguir, vamos adicionar a edição Isso é grosso. Agora, para o número das cartas, vou usar um escuro criado usando alt Z, aquele B9. Então, novamente, isso é usando alt e as teclas numéricas do teclado, 0139. E quando você tiver um ponto, basta copiá-lo e colá-lo várias vezes. Lembre-se de quatro personagens por grupo, que são quatro no total. Se você não consegue lidar com um ponto, basta usar uma estrela. Esse é o turno oito. Ok, para o último grupo, isso deve estar visível para que você possa identificar o cartão. Incrível. Agora, nenhuma discussão sobre o estilo no momento. Vamos terminar com a data de validade zero para a barra 28, por exemplo, e agora podemos falar sobre transformar isso em um cartão reutilizável. Ok, então vamos fazer isso para a primeira linha. Vamos usar o estilo de título menor caso você não o tenha. Isso significa nova agulha preta, 26 pixels. Mas a segunda linha, vamos usar o estilo corporal. Novo Nieto, irregular de 24 pixels. Agora, em termos de cor, edição precisa ser laranja, pois é uma ação, ela tem que mostrar que você pode clicar em. Para o resto. Nós só vamos usar azul. É super básico. Poderíamos potencialmente usar cinza para a segunda linha? Sim, acho que isso também funciona. Depende muito de você. Mas vou ficar com o azul. Agora, para o cartão em si, precisaremos de vários layouts automáticos para facilitar isso. Vou adicionar outra ação, tornar primária. Isso não é útil aqui, mas vamos precisar dele para as cartas secundárias. Certo? Agora vamos fazer um de cada vez. Selecione essas duas ações e configure a mudança automática de layout. Porque queremos ser capazes de controlar a distância entre eles. Digamos que, neste caso, provavelmente 50. Ok, então todas as três camadas de texto precisam formar uma linha. Então, novamente, pegue-os e use Shift a. Agora podemos mudar o modo de espaçamento do pacote, que é o espaço padrão entre eles, porque obviamente eles precisam ser divididos. Agora nada aconteceu, mas tudo bem. Agora, para a segunda linha, pegue as duas camadas e pressione Shift. Da mesma forma, queremos colocá-los no espaço entre eles em vez de para trás. Espero que tudo faça sentido até agora. Finalmente, para poder adicionar um único campo para todos esses caras, vamos selecionar tudo assim e usar shift uma última vez. Isso não apenas nos dá a opção de criar rapidamente um fundo branco, mas também podemos controlar a distância vertical entre eles. Nesse caso, digamos, por exemplo que estamos procurando 32 em cada lado e 16 na parte superior e inferior. Esse é o nosso acolchoamento. É claro que não manteremos bordas quadradas. Esses não foram, mude para dez pixels, por exemplo, e acho que isso deveria ser bom. Ok, centralize-o dentro da tela, caso ainda não tenha feito isso. Agora poderíamos tornar isso o mais flexível possível, mas eu sempre tento manter as coisas o mais simples possível. Então, selecione a maior moldura, aquela que tem o preenchimento branco e altere-a para uma largura fixa. E isso abrirá o campo W. Coloque 656. 656 pixels, e deveria ser isso. Mas, você sabe o que tenho a dizer, 40 pixels entre essas duas linhas não fazem muito sentido, considerando que temos uma roupa de cama tão pequena. Então, na verdade, vamos reduzi-lo para 20, mas aumentamos o preenchimento para 32 nas bordas superior e inferior. Caso você ache que é demais , você pode recusá-lo. Mas, no geral, estou feliz com isso. Ok, vamos transformar isso em um componente. Eu não gosto da tecla de atalho. Eu sempre tenho meu mouse no centro da tela. Então, clicar no ícone de cima para cima é mais fácil para mim. Ok, agora vamos arrastar uma cópia e centralizá-la horizontalmente. Eu não mencionei isso. Mas mantenha 32, 32 pixels da ActionBar. Você realmente precisa se manter consistente porque isso realmente ajuda. Ok, agora, para o cartão selecionado, make primário deve ser removido porque obviamente já é o principal. E para mostrar que está atualmente selecionado, vamos fazer isso. Podemos adicionar a placa de uma placa grossa. Os pixels da cor laranja seriam um pouco demais. Então, vamos usar azul e amarelo. Não acho que teria contraste suficiente e poderia ser um pouco chato nessa situação. Ok, agora vamos arrastar a segunda carta dos ativos. Este deveria ter feito com que o primário fosse mantido como está. E para que pareça real, altere os últimos quatro dígitos do cartão de crédito, bem como a data de validade. Adorei o fato desse estigma e sei que estou no modo de edição de texto. Então, eu só preciso clicar uma vez para alterar essas camadas de texto. Ótimo material. Ok, quando estiver pronto, por favor, vá para meus endereços. Vou ampliar para o molhado bem rápido. E enquanto trabalho em segundo plano, deixe-me contar um pouco sobre Figma. Quais outros programas de design estavam no mercado há alguns anos, por exemplo, affinity ou Sketch, figma, o mundo do design por tempestade. Eles produzem um ótimo conteúdo e realmente conseguiram construir uma comunidade e todas as pequenas coisas que as pessoas estavam pedindo. Bem, a Figma entregou, embora Figma fosse uma empresa super pequena e nova, eles fizeram isso em comparação com a Adobe, que basicamente tem dinheiro ilimitado, lucros ilimitados, pessoas ilimitadas, talento. Bem, na verdade, eles se moviam bem devagar. É por isso que algumas pessoas me incluíram. Estamos um pouco decepcionados com o estado do Adobe XD. As atualizações simplesmente não estavam chegando rápido o suficiente. Não tenho 100% de certeza, mas se bem me lembro, Adobe XD esteve em Beta por pelo menos dois anos, pelo menos mais do que isso, a versão Windows, a primeira foi lançada, acredito que foi depois de um ano, talvez um ano e meio depois da versão para Mac, eu estava furioso. Eu estava com tanta raiva. Veja, eu sempre fui um cara do Windows, mas considero seriamente comprar um Mac só para usar o Adobe XD. E então, quando vi que a Adobe simplesmente não estava apresentando atualizações com rapidez suficiente, a frustração aumentou. E, novamente, acho que não sou o único que se sente assim. É por isso que Figma basicamente chama como fogo. E com isso, estamos prontos para seguir em frente. Terminamos essas duas telas em tempo recorde. Além disso, sempre podemos voltar e fazer ajustes no uso dos componentes. Obrigada. Te vejo em um segundo. 42. Veja como você pode fazer uma tela de cartão de crédito bonita: Bem-vindo de volta. Mencionei que não projetaremos todas as telas intermediárias, como quando você não tem um endereço ou um cartão de crédito não foi colocado no sistema. Mas devemos aproveitar ao máximo essas poucas telas, pois um usuário pode mudar de um usuário pode mudar ideia se ele pode deixar, por exemplo, a tela do cartão de crédito ao adicionar uma ao aplicativo. Vamos começar fazendo uma cópia da última tela. Remova esses dois cartões porque não precisaremos deles. Algumas tarefas extras de limpeza. Vamos mudar o apelo à ação para economizar que cartão de crédito faça a provável ação principal. Quanto à barra de ação em si, isso deve significar adicionar forma de pagamento. A propósito, caso você queira ser inteligente com isso, você pode adicionar títulos mais sofisticados, por exemplo, como você vai pagar? mais jovens realmente apreciam isso. Agora, se o cliente lhe der um resumo voltado para o público mais jovem, não tenha medo de apimentar sua cópia. pior das hipóteses, o cliente não gosta e você volta às coisas chatas. Mas caso ele goste, você pode ganhar um bônus ou pelo menos causar uma impressão muito boa. Então, apimente as coisas sempre que puder. Ok, vamos lidar com os campos. A propósito, você sabia que pode alterar o modo de visualização no painel de ativos? Então, eu prefiro a versão em miniatura, mas também há uma lista que me mostra como estou confusa com meus nomes. Então, eu leria o interruptor para esconder esse constrangimento. Ok, vamos adicionar os campos em, embora eles se lembrem de centralizá-los no Canvas. O primeiro precisa transformar isso em pixels de distância da barra de ação. Altere o estado para a versão simples do BG. Não se esqueça de adicionar um título e uma mão apropriados. Agora, isso leva algum tempo, mas está totalmente bem. Agora, nos dois primeiros campos, vou ser o número do cartão de crédito e, em seguida, o nome no carro. Agora, para o número do cartão de crédito, achei melhor usar 12345678 e assim por diante. Quebrar a tecla Z TO não parece muito bom, para ser honesto. Agora, os outros dois campos precisam ser uma data de validade e o v. V. Agora, o problema do CVD é o número curto no verso do cartão. Como esses dois campos não precisam ter largura total porque são muito pequenos. Esta é uma boa chance de nos lembrarmos de como os fabricamos nem o foram. E isso usando uma largura fixa na instância. Em seguida, desça um nível e configure o próprio campo para encher o recipiente. Ok, espero que isso esteja começando a fazer sentido. O campo está dentro de alguma coisa. Se isso for maior e o campo estiver definido como preenchimento , obviamente o campo crescerá adequadamente e vice-versa. Mas a configuração padrão em nosso caso é que o campo esteja definido como fixo. Agora, não importa o quanto alteremos a largura do contêiner principal, o campo em si, ele está fazendo suas próprias coisas. Nós não queremos isso. É por isso que estamos trocando para encher o recipiente. Incrível. Agora está tudo bem com esses quatro campos. Mas não há nada de novo ou especial aqui neste verde. É por isso que vamos dedicar um tempo para projetar algo acima de todos esses campos. Então pegue todos eles e mova-os para baixo. Comece com um retângulo de 656 x, digamos 350 ou algo parecido. Centralize-o e torne-o branco puro. A ideia é criar um design de cartão de crédito que mostre o que você coloca dentro desses campos do andar de baixo. Então, ao digitar o texto, você vê o carro mudar. Isso é muito bom. Já fiz isso no passado e é um toque agradável. Agora, isso é necessário? Não, não é. Mas isso torna a tela mais interessante e não é difícil de codificar, então é bastante barata. Agora, arredonde o raio da coordenada colocando dez pixels e, em seguida, vamos adicionar o padrão, a sombra. Então essa será a base da nossa guarda. Vamos pegar a ferramenta de digitação e escrever o cartão de crédito. Configure isso como um dipolo grande e depois mude para laranja. Agora, poderíamos potencialmente escrever Visa ou MasterCard, mas vamos mantê-los genéricos. Em seguida, use este ícone que você anexou. Isso é chamado de chip. Já é amarelo dourado e tem um tamanho bastante bom. Tudo o que você precisa fazer é posicionar a 32 pixels de ambas as bordas. O lado esquerdo e o topo. Segure a tecla Alt para isso e toque nas teclas de seta. Tenho certeza de que está se tornando natural agora, à medida que você está trabalhando. Agora, para o número, vamos usar exatamente o mesmo formato. Então, basta arrastar uma cópia. Agora, o problema é o seguinte. Precisamos medir a mão do campo. Mas esse é um ótimo momento de ensino. Agora você pode querer copiar e colar, certo? Mas se você fizer isso, obterá esse estilo específico e Figma. E, obviamente , não queremos isso. É por isso que fizemos a cópia. Queremos a formatação anterior, certo? Portanto, a melhor maneira de se livrar de qualquer formatação, mesmo quando você está enfrentando algo no Microsoft Word de outro site, é essa. Use um programa de bloco de notas padrão. Então cole-o lá , copie-o novamente e cole no Word ou no modo grande, seja o que for. E se você fizer isso, manterá a formatação anterior, neste caso, esse formato volumoso. Novamente, eu sempre vou ao Bloco de Notas quando estou copiando e colando coisas em e-mails ou em qualquer editor de texto. E agora você sabe que isso também se aplica à Figma. De volta para onde precisamos deixar bastante espaço vazio entre cada grupo. Então, a maneira mais fácil, a maneira manual de fazer isso, quebrou a tecla da barra de espaço e depois use copiar e colar entre cada grupo. Agora, a pergunta é: poderíamos usar um layout automático? Claro que é 100%, mas era assim que fazíamos na época do Photoshop. Agora, o que vou fazer nesta versão manual, vou usar Alt para verificar a distância no lado direito. E desde que você não tenha uma grande diferença, eu vou ficar bem com isso. Novamente, poderíamos fazer esse cartão inteiro com layout automático, mas sei que algumas pessoas odeiam o layout automático. É por isso que, de tempos em tempos, vou simplificar as coisas. Em termos dessa densidade, 20 pixels devem estar bem entre o chip e essa camada. Mas a cor laranja não funciona. Em vez disso, vamos usar o azul. amarelo também pode funcionar, mas teríamos que mudar o retângulo branco para algo um pouco mais escuro. E então eu acho que seria muito trabalhoso, especialmente porque temos um fundo principal colorido. Então, isso seria um pouco difícil. Ok, agora para a data de expiração, vamos adicionar a camada de texto. Isso deve ser mostrado no estilo do corpo. E então, para a cor, vamos usar cinza. Quanto ao nome, estou sinceramente indeciso. Acho que provavelmente o rótulo é a melhor coisa para isso. Agora, a parte complicada é que temos muitas e muitas camadas de texto. Portanto, precisamos garantir que eles não entrem em conflito entre eles. Mas sim, acho que é só isso. Oh, algo que eu quase esqueci. Temos outro ícone no lado direito. Dê uma olhada nas coisas ruins antes de terminarmos. E, claro, levante os campos abaixo. Mas sim, esse é o tipo de coisa que os clientes apreciam quando você vai além. Isso não estava no resumo, não estava nos wireframes. Acabei de inventar isso. Às vezes, o cliente pode rejeitar a ideia. Ele pode não gostar. Mas isso foi o que, 10 minutos de trabalho, talvez 20 minutos se você não tiver nenhum ícone. Mas foi criado para aqueles clientes que realmente querem algo especial que querem algo com um pouco de zinco Acho que sim, a propósito, sozinhos, por favor, refaça este cartão com layout automático e transforme-o em um componente e compartilhe-o comigo. Eu gostaria de ver como você gerencia, mas não deve ser tão difícil ser honesto. Deixe-me saber na seção de comentários. Mas sim, com isso, podemos continuar. Muito obrigada. 43. Crie uma página de comentários bonita: Bem-vindo de volta. Precisamos criar uma página bonita para resenhas. Então, vamos começar a trabalhar. A estrutura de arame me mostra que isso deve ser dividido com o endereço do restaurante. Então, vamos fazer uma cópia da tela de login. Remova os campos porque não precisamos deles. E eles não acham que deveríamos ter um botão aqui para que haja uma pergunta sobre como as avaliações devem ser escritas. Se não houver botão. Por exemplo, no meu próprio negócio, envio e-mails personalizados com um tamanho específico para cada cliente. Talvez faça o mesmo processo aqui. De qualquer forma, de volta ao molhado. Vamos renomear o título para amadurecer a entrega de pizza, o nome do restaurante, as abas. Bem, para o texto, certifique-se de que, configurado no centro , para não tenhamos que reposicioná-lo, clicar nele com controle é a maneira mais rápida. Está tudo bem, tudo configurado. Portanto, a primeira deve ser uma crítica e, em seguida, a segunda, obviamente, abordar. Agora, o último é útil caso você queira ver a que distância fica o restaurante ou talvez queira pegar o pedido sozinho. Então, faz sentido. Agora, vamos deixar esses dois guias. Então, é preto e laranja. E então, para o inativo, esse deve ser regular e o cinza. Isso soa como uma música de hip hop que eu acredito que era preta e amarela. De qualquer forma, voltando ao assunto. Então, vamos adicionar o design do chip que contém o número de avaliações e a porcentagem, embora tenha um preenchimento, sempre podemos removê-lo. Além disso, podemos nos livrar desse acolchoamento. Para ser honesto, nós realmente não precisamos fazer isso, mas eu queria te mostrar o máximo de situações possível, então foi por isso que fiz isso. Ok, agora, vamos nos certificar de que está alinhado corretamente. Falando sobre coisas desnecessárias, esse verde é na verdade um pop-up. Não me pergunte por quê. Confie em mim, como tal, precisamos de um ícone X, não da seta para trás. Então, vamos aproveitar essa chance para trocá-lo. Se você selecionar a barra de ação, temos uma lista suspensa aqui, uma troca de ícones, mas não há x em nossa lista. Não se preocupe. Como sempre, eu tenho algo preparado. É chamado de x e está anexado. Agora, arraste esse cara para o quadro de Recursos e transforme-o em um componente. Não se esqueça de adicionar um layout automático, para que fique bonito. Quando você terminar, podemos voltar para a barra de ação. Por padrão, ele nos mostrará os ícones preferidos, mas podemos alterá-los. Mas observe como isso faz sentido. Estamos começando a ter alguns componentes aqui e precisamos rolar um pouco. É por isso que o preferido é muito útil. Ok, voltando ao assunto. Precisamos de mais algumas coisas. Primeiro, algum texto digita oito, positivo e depois negativo. Eles devem estar em camadas de texto individuais. E como temos 8,2, vamos mudar o texto lá em cima para 80 por cento e depois votar. E isso é porque eu quero tornar isso o mais real possível . Para o estilo. Vamos com o corpo. Vamos provar o verde do emoji para o positivo, para os votos positivos. Em seguida, para os votos negativos. Bem, podemos amostrar cores no painel de ativos. Então, acho que vamos ter que arrastar um emoji de raiva. Então podemos amostrá-lo, e agora eu posso remover isso. Uma coisa que eu amei no Photoshop foi o fato de você poder extrair amostras de cores de forma absoluta. Em qualquer lugar, mesmo fora do programa, desde que você tenha a ferramenta conta-gotas, selecione aqui, pelo menos nesta versão do Figma, após abrir o Seletor de cores, você deve clicar manualmente no ferramenta de conta-gotas e , em seguida, escolha uma cor proveniente de outro programa de design. Esse clique extra parece um pouco estranho. Além disso, você pode fazer amostras de qualquer outro lugar , por exemplo, na interface. De qualquer forma, vamos voltar ao assunto. Vamos adicionar outro retângulo com cerca de 400 pixels de largura para a altura, vamos usar 20 pixels, por exemplo, então essa será a barra que nos mostra visualmente o número de bons votos. Faça com que seja super arredondado. E para a cor verde, é claro, você pode querer adicionar essa cor aos seus estilos. Seja meu convidado. Agora, vamos continuar. Portanto, certifique-se de enviar um pouco com a camada de texto. E quando terminar, faça o mesmo com os votos negativos. Mas desta vez a partir de 400. Vamos dividir isso por quatro e isso é 100. Agora, por que o dividimos? Porque eu tenho um voto positivo e dois negativos. Então, dê uma proporção para a coisa de cento e 101 que está me incomodando. E é assim que isso fica nesse fundo colorido. Então, vamos mudar de volta para branco, especialmente porque temos muitos textos lá embaixo. Ah, a propósito, entre o emoji e os votos positivos, vamos deixar cerca de 20 pixels. Este é basicamente um resumo de todos os votos que serão mostrados abaixo. Falando sobre isso, vamos separar essa área com um divisor, obter a ferramenta de alinhamento e adicionar 720 pixels. Centralize em, se necessário, e torne-o cinza claro. Na verdade, acho que temos que pastar em nosso painel de estilos através da divisória, deve ser a mais leve. Mas o problema é o seguinte. Se decidirmos que é assim que uma divisória deve ficar, precisamos voltar e consertar as outras de todas as telas anteriores. Agora, o problema é o seguinte. Eu não vou gastar muito tempo com isso. Eu só vou fazer alguns. Mas lembre-se de que temos uma tela de louça onde há muitas divisórias. É aqui que um componente teria sido muito bom. Mas esse é um bom momento de ensino quando você aprende da maneira mais difícil, você tende a se lembrar disso. Portanto, certifique-se de consertar todos esses divisores. Para finalizar, vou adicionar algumas camadas de texto, que serão os alicerces das avaliações reais. E na próxima palestra, vamos estilizar tudo. Em primeiro lugar, intitulei algo que diz, sei lá, comida excelente ou algo parecido. Em seguida, a data, 14 de outubro de 2023. Em seguida, o nome do autor de Chris Barron neste caso. Então, talvez algumas palavras. A essência da crítica, algo como, adorei tudo sobre esse restaurante e o processo de entrega. Agradável e fácil, muito profissional. E isso soa muito bem. Ok, vamos fazer uma pausa. E no próximo vídeo, vamos terminar isso. 44. Como estilo um cartão de avaliação: Bem-vindo de volta. Vamos começar a estilizar esta resenha. Agora, a principal coisa em que precisamos pensar é como o usuário fará a avaliação. Agora, eu digo que o título é a parte mais importante. Então, vamos usar o menor por LDL em termos de formatação da fonte. Quanto à cor, o azul é a única opção porque o laranja implicaria algum tipo de ação que está disponível aqui e esse não é o caso. Em seguida, a data e o nome da filha, esses não são tão importantes. Então, acho que podemos escolher o corpo em termos do estilo da fonte e da cor cinza. A propósito, alinhe-os na parte inferior, se ainda não o fez. Agora, a essência, a revisão em si. Agora eu digo que isso também pode ser estilizado como corpo, mas vamos torná-lo azul porque as pessoas podem realmente querer lê-lo vez da data e do nome da filha, que são basicamente para decoração propósitos. Bem, não é exatamente decorativo, mas as pessoas realmente não se importam com essas coisas. Eles existem apenas para aumentar a credibilidade , certo? Então você pode ver que essa é uma pessoa real. Precisamos de algo visual aqui porque é muito texto. E eu digo um polegar para cima ou algo dessa natureza. Agora poderíamos usar o mesmo emoji, o sorridente. Mas acho que isso é um pouco repetitivo demais. Então, vamos arriscar. Aqui está o que eu preparei. Mas você sabe o que? Em vez de arrastá-la e esta tela, gire para a esquerda. Vamos realmente fazer isso. Agora. Na verdade, vamos nos concentrar no quadro Recursos e arrastar o ícone diretamente para lá, porque faz muito mais sentido aqui, como de costume, transformá-lo em um componente e depois adicionar um layout automático. Como sempre. No entanto, você deve saber que, se houver um ícone positivo, ele sempre deve ser negativo. E, de fato, você tem um anexo. Agora eu repito, isso é um pouco arriscado. Poderíamos usar as mesmas carinhas sorridentes, mas você usa. Aqui, estou tentando me desviar, torna algo um pouco mais interessante. Ok, quando você terminar de usar esses recursos, vamos voltar para a tela de revisão. Arraste um voto positivo para dentro. E vamos pensar sobre isso. Em primeiro lugar, acho que precisamos de vários layouts automáticos e você sabe quantos? Caso contrário, vamos analisar isso juntos , passo a passo, linha por linha. Então esse é o primeiro, certo? E então esse é o segundo. Agora, precisamos do terceiro para esse corpo de texto? Não, não necessariamente. Então, agora vamos pegar tudo assim. E então Shift a e pronto. Portanto, temos três no total para os primeiros 21 de cada linha. Obviamente, precisaremos agora das configurações principais, espaço entre elas e depois configurá-las para encher o recipiente. Agora. Ok, incrível. Agradeça seu tempo com isso. A propósito, não se apresse. Obviamente, estou indo mais rápido, mas você sempre pode fazer uma pausa. Agora, queremos muita flexibilidade, então isso faz muito sentido ir para o recipiente de enchimento, ótima aparência até agora. Agora vamos selecionar o quadro grande, o mainframe, e alterar sua largura para fixá-lo que possamos configurá-lo em até 656 pixels. 656 pixels. E, basicamente, sim, esse é um trabalho bem feito. Para ser justo, precisamos de um pouco mais de trabalho para terminar. Principalmente, precisamos preencher a tela com outras entradas. Então, vamos fazer uma cópia dessa divisória de cima para baixo. Não há um espaçamento específico em mente, porque também vamos criar um layout automático aqui. E isso nos permitirá digitar um valor específico. Então, vamos com 20 por enquanto. Isso também nos ajuda a adicionar ou remover as linhas extras, mantendo a divisória exatamente na mesma distância. E com isso, vamos transformar isso em um componente. Como sempre, teremos que usar o quadro de Recursos separado. propósito, talvez você queira redimensioná-lo ou movê-lo para mais perto da tela. Agora, depende de você como configurá-lo, mas garante que você se divirta indo e voltando. O principal é que você tenha espaço suficiente dentro disso. Porque depois de transformarmos isso em um componente, podemos fazer uma variante apenas para **** dele. A única coisa que estou disposto a mudar agora é substituir o ícone, mas há muito mais potencial aqui. Portanto, certifique-se de tentar explorar as outras opções de design. Talvez uma cor diferente para o título, talvez uma cor de fundo diferente. Várias outras coisas que você pode fazer aqui. Mas, por enquanto, vamos voltar para nossa tela e, na verdade, vamos arrastar algumas cópias. Acho que podemos nos encaixar na Ford e no total, embora a última possa estar um pouco errada, mas tudo bem. Você pode mudar uma delas para a variante negativa, só para que tenhamos alguma variedade. Mas antes de alterarmos o conteúdo real do texto, lembre-se de que o divisor muda de posição com base no texto acima, certo? Então, se for maior ou menor, isso dividiu os movimentos, mas não se move de acordo com a próxima análise. Como você pode ver, isso não funciona. E isso porque não demos nenhuma instrução sobre isso. Mas o problema é o seguinte. Se você selecionar todas essas entradas e adicioná-las em um layout automático. Esse é um trabalho, bem feito. Agora, sinta-se à vontade para adicionar ou remover linhas de texto e você verá que funciona bem. E, de fato, isso está correto. Agora, o problema é o seguinte. Poderíamos fazer um booleano para o título. Podemos fazer uma variante em que não haja comentários, opções, opções, opções. Mas neste momento, com esta gravação, estou muito feliz com essa flexibilidade. Você pode fazer muito mais, mas sim, vai levar um pouco mais de tempo. Então, por enquanto, acho que devemos continuar. Muito obrigada. 45. Minha visão de ir a milha extra: Bem-vindo de volta. Deixe-me lidar rapidamente com a guia de endereço enquanto trabalho em segundo plano Acho essencial que eu diga o que considero o cordão, a milha extra, ir mais longe. Alguns clientes podem dizer que, na guia Exibir, poderíamos ter passado um pouco mais de tempo criando várias propriedades para esse componente. Transformar a Bíblia no roll-off, adicionar um booleano, adicionar uma variante para aqueles casos há apenas um título, mas nenhum corpo de texto, coisas dessa natureza. Agora, não acho que isso seja necessariamente ir mais longe, não no sentido de que os clientes gostariam disso. Veja, uma coisa é você trabalhar duro. E a recompensa é que, no futuro, você não precisará trabalhar tanto. Seu treinamento é difícil, mas a batalha real não é tão difícil. Então isso é o que poderíamos ter feito para sustentar esses invariantes e outros enfeites. Mas outra coisa é criar esse design de cartão de crédito, por exemplo, ou criar uma cópia bonita, um texto adorável dentro do projeto. Agora, essas são as coisas que o cliente apreciaria. Portanto, certifique-se de não misturar essas duas coisas. Então, eu sou a favor de fazer tudo, não ser chamado de preguiçoso, mas você sempre deve ter em mente isso. Quem isso ajuda? Isso ajuda meu ego? Isso me ajuda a praticar minhas habilidades? Isso ajuda o desenvolvedor ou ajuda o cliente? Porque se você é o ponto de aprendizado em que sente que precisa de toda a prática possível para obter ao segurado, crie todas as variantes, torne-as flexíveis, torne-as responsivas, seja o que for. Faça tudo. Mas a decepção surge quando você espera que o cliente aprecie todas essas variantes, a capacidade de resposta e outros enfeites, quando na verdade ele não tem ideia. Mesmo que você explique em detalhes, não vou me importar. Provavelmente, é assim que as coisas são. Você sabe, o cliente tem outras coisas para cuidar enquanto você está fazendo este curso. Espero que você perceba, espero que pelo menos comece a perceber por que eu estava te contando essas coisas no começo, certo? Ninguém se importa com o quanto você trabalhou dentro do Figma, você poderia ter criado seu próprio tipo de letra do zero, letra por letra, caractere por caractere. Ninguém realmente se importa. O que importa para eles é a apresentação geral e pronto. Seu esforço não justifica seu valor. Você é a palavra, o verdadeiro valor que você pode agregar como designer vem para eles muitas outras coisas. Agora, começando com os básicos, sendo capaz de se comunicar de forma eficaz com o cliente e com a equipe de desenvolvimento. Ser pontual, entregar tudo a tempo. E depois de todo o básico, você tem um verdadeiro valor como designer, pois um designer de aplicativos vem de sua experiência em ser capaz de simplificar o aplicativo, torná-lo mais eficiente. Coisas como hierarquia na primeira tela, onde há muitas ações. Portanto, você precisa ter experiência e saber como fechar sua TI. Agora, para simplificar, se você, movendo um botão e estilizando outro de forma diferente, fazendo com que ele corra mal. E se isso aumentar as taxas de conversão em dez por cento, isso é absolutamente enorme, enorme. Dez por cento dia após dia, semanas e meses a fio. Isso é o que realmente vai ajudar a empresa a crescer. Mas a habilidade em si, mover um botão ou fazer um botão fantasma, mover um botão na parte inferior da tela. Isso não é nada. A habilidade não é uma coisa valiosa. Então, espero que você perceba que o maior valor que você pode agregar ao cliente não gira necessariamente em torno de coisas sofisticadas em Figma, propriedades e componentes de variância e outros enfeites. Em minha experiência, consegui expandir minha própria loja de comércio eletrônico de $20.000 por mês para $50.000 por mês. Apenas o design básico muda, coisas como mover o título para cima, reduzir as lacunas, alterar o tamanho das miniaturas. Eles são extremamente básicos. Você poderia assistir a esse curso no Photoshop e provavelmente ainda poderia conseguir essas coisas. Então, do ponto de vista mais técnico, eles não são difíceis. As técnicas em si não valem a experiência que você tem para sugerir essas mudanças. É você e saber que, ei, se sempre tivermos um botão na parte inferior da tela, isso ajuda o usuário e o estagiário a gerar mais receita, mais do que vendas, dizendo: Ei, deixando o botão cinza e desativado e acendido quando todos os campos tiverem sido preenchidos. Isso melhora a experiência de checkout e gera mais vendas. Então é isso que você deve trazer para a mesa. Protótipos não muito loucos são layouts super flexíveis. Esses podem ajudar. estou dizendo que não, mas, na maioria das vezes, eles ajudarão você, não o cliente. Então você pode perguntar, Chris, Como faço para obter essa experiência? Você consegue isso trabalhando, fazendo o maior número possível de projetos. Existem alguns sites como este aqui que você pode realmente usar. Mas, hum, se você realmente deseja obter projetos de 20, 30.000 dólares para você, você precisa começar com projetos de $501.000 e depois verificar as estatísticas e verificar suas análises. Veja, depois de entregar este projeto, mantenha contato com o cliente, peça ele veja suas análises, sugira mudanças, projete-as, faça que seus desenvolvedores as implementem e, em seguida, verifique o design. Em algumas semanas. Por exemplo, na tela inicial, temos uma foto de 360 pixels de altura. Apenas como um exemplo aleatório, experimente 300 pixels um, certo? Então, torne-o menor. Em seguida, verifique as taxas de conversão. Se for de 2% a 2,4%. Isso é incrível, certo? E então você enxagua e repete até que o negócio cresça. E todas essas pequenas coisas que você testou, você tem que se lembrar delas. E então, quando você começar seu próximo projeto, todas essas faixas podem ajudá-lo a ganhar muito mais. Então esse é o valor que você pode agregar. Não se trata de técnicas avançadas e Figma, é sobre o que você sabe. Obrigado e boa sorte. 46. 18 checkout p1Crie a tela de checkout – etapa 1: Bem-vindo de volta. Vamos lidar com a tela de pagamento, começar com a cópia da tela da forma de pagamento e remover quase tudo que está dentro dela. Bem, exceto pelo botão na parte inferior. Agora, para o título na barra de ação, vamos simplificar e finalizar a compra. Seja simples e simples, pois esta versão realmente tornará nossas vidas muito mais complicadas para ajudar o cliente. Agora, nesta fase, vamos fazer uma tela de checkout em que o usuário não está logado. Se você se lembra, o Screen1 tem a opção de pular o registro. Mas se você quiser fazer um pedido, obviamente precisará de uma conta. Vamos fazer isso. Faça uma cópia desse botão e levante-o até 32 pixels da barra de ação para os textos, vamos escrever algo como, por favor faça login ou registre-se para continuar. Agora, isso vai contra a gente ter um botão na parte inferior, mas aqui está o que eu proponho. Vamos manter o que está na parte inferior, mas alterá-lo para o estado desativado. Então, torne-o cinza. Em seguida, vamos mudar o texto com renda ou com a palavra dinheiro fino. Agora a ideia é essa, o botão principal permanece na parte inferior. Nada mudou nesse sentido. Agora, o usuário ainda espera vê-lo lá, mas como você não está logado, aparece um novo botão na parte superior. Então, essa é apenas outra maneira de fazer isso. Agora, poderíamos usar um único botão na parte inferior que diz login? Claro, é claro. Mas acho que ver este botão Fazer pedido ajuda a estimular o uso de um longo. Basicamente diz, oh, você está tão perto, vá lá, apenas faça isso. Mostrar isso incentiva o usuário a continuar. Então esse é o meu processo de pensamento. Agora, também precisamos mostrar os itens no carrinho. Então, vamos fazer isso. Pegue a tecla de atalho D da ferramenta de digitação e escreva meu queixo na entrega de pizza, porque você precisa saber qual restaurante você selecionou. Escolha a di Belle menor no painel Estilos. Agora, em termos de cor, azul é totalmente bom, embora possamos potencialmente torná-lo laranja para significar que você poderia voltar e pedir mais alguns pratos. Acho que, na verdade, isso faz muito mais sentido. Ok, vamos, vamos realmente fazer isso. Ok, a seguir, vamos adicionar alguns pratos. Então, eu tenho algo mal preparado no nodo. Então, vou simplesmente colá-los. No total, o que queremos , três camadas, as camadas de textos, então a quantidade, o nome do prato e, finalmente, o preço. Agora você pode potencialmente ocultar a quantidade e usar os botões clássicos de mais e menos para ajustar quantas peças quiser. Mas, infelizmente, isso ocupa muito espaço. Isso é o que eu estou pensando. Você pode tocar na entrada e o pop-up permitirá que você adicione ou remova pratos. E isso porque acho muito improvável que você o use com tanta frequência. Agora, para o estilo em si, vamos usar o corpo para os três. Porém, o preço deve se destacar um pouco mais. Essa é a abordagem clássica. Então, quebre a corrente e vamos alterá-la para provavelmente em negrito em vez de normal. Agora, o problema é o seguinte. Eu nunca gosto de misturar tamanhos. Portanto, se os da esquerda tiverem 26 pixels, o da direita deve ser o mesmo. Você pode alterar o peso ou a cor, mas não o tamanho. Por qualquer motivo, parece estranho quando você faz isso. Ok, parece bom. Agora vamos precisar do divisor. Você pode roubar um da tela de visualização, que é bastante brilhante. Ou você pode fazer um novo, o que quiser. Agora, para dizer a verdade, eu não o transformei em um componente, mas você definitivamente pode fazer isso. Isso pode ser útil. Ok, seis por seis pixels para a largura das folhas. E agora é hora de adicionar layouts automáticos para que possamos ter um pouco de flexibilidade. Então, primeiro de tudo, a quantidade e o nome do prato mudam de dia para ambos. Agora, ok, agora, mude a distância para 20 pixels. Em seguida, no layout automático com o preço, ok, altere o layout para um espaço entre o momento certo com ele. Obviamente, estou indo muito rápido, mas você não precisa se lembrar. Você tem a barra de espaço na ponta dos dedos, então use-a sempre que necessário. Em seguida, outro com o desvio do divisor, eles, vou dizer que vou querer cerca de 30 pixels aqui. Mas é muito fácil. Agora, a ideia é que você tenha espaço suficiente para clicar individualmente nesses pratos. Ok, nós só temos um, mas isso vai mudar em um segundo. É por isso que estamos usando o layout automático porque não temos certeza sobre o tamanho. Portanto, é melhor prepararmos com muita flexibilidade agora. Agora, o divisor pode forçar o conteúdo a entrar no centro porque é mais largo. Agora, se isso acontecer, use esta parte para alinhar as coisas à esquerda. Então esse é o primeiro passo de dois. A segunda é selecionar o layout automático com os dois elementos. Este aqui, e agora configure-o para encher o recipiente. Isso deve lhe dar um bom resultado. Esta é nossa primeira entrada, mas queremos três e fazer algumas cópias. Basta arrastá-los para fora com Alt e Shift ou usar o Controle D. Não há nenhuma lacuna específica em mente. Basta colocá-los onde quiser. Agora pegue tudo, todas as três camadas e o título e use um último turno de tempo. Eles ganharam menos Auto Layout. E agora podemos controlar quase tudo. Por exemplo, vamos usar para D, para a distância vertical entre esses caras. Agora, a pergunta é: adicionamos um preenchimento branco? Acho que sim. Acho que sim, mas isso significa que teremos que mudar algumas coisas. Mas não estou com medo, então vamos em frente. Então, adicione esse preenchimento, o preenchimento branco e, para o preenchimento, vamos com 32 para cada lado e depois 16 para a parte superior e inferior. Ah, a propósito, por favor, arredonde as coordenadas para dez pixels. Isso é um dado adquirido, certo? Obviamente, isso vai de um lado para o outro, em toda a largura. Mas isso é algo que queremos manter como está? Acho que poderíamos, mas acho que um clássico difícil talvez seja um pouco melhor. Além disso, são ótimos momentos de ensino. Então, vamos analisar esse cenário. Como podemos consertar isso? Então, primeiro de tudo, vamos selecionar o quadro grande e alterá-lo para fixo. Com isso, agora podemos alterá-lo para 656. Novamente, essa é a maneira mais fácil de fazer isso. Isso não garante a máxima flexibilidade, mas tudo bem no meu livro, os preços e as divisórias variam. E se você quiser repará-los, basta selecionar os três divisores com o Control Shift. Basicamente, esses são os culpados. Eles estão forçando o carro a ser mais largo. Então, se mudarmos o tamanho 2592, que eu sei de cor porque já estive nessa posição antes, agora devemos ter uma carta balanceada. Então, cinco nono para, e de fato funciona. A propósito, não temos um componente aqui, mas talvez precisemos do componente para mais tarde. Vamos ver, por enquanto, vamos fazer isso passo a passo. Agora, o problema é que eu gosto do carro do jeito que está agora. Mas acho que para 40 é um pouco demais. Então, vamos mudar para 30 para o espaço vertical, quero dizer, mas você sabe o que, o último divisor, isso não está fazendo isso por mim. Não faz muito sentido. Então, vamos Controlar , clicar nele e removê-lo. Mas isso também não parece bom. Não há preenchimento suficiente. Então, tínhamos 16 antes, mas precisaremos aumentá-las. Portanto, haverá altura suficiente para que o usuário possa clicar facilmente na última entrada. Alguns acham que 32 deveria funcionar bem, e acredito que estamos quase terminando com isso. Coloque-o bem próximo ao botão superior para que os dois pixels sejam precisos. E acho que terminamos. Agora. Podemos jogar com isso um pouco mais? Deveríamos torná-lo 20 por cento mais do que interessante. Mas você sabe o que, vamos fazer uma última coisa. Vamos adicionar uma sombra projetada apenas para o **** dela. Mas prometo que é isso por enquanto. Mas neste caso específico, passaremos para os outros casos em que você estiver logado, em apenas um momento. Por enquanto, é isso. Te vejo em um segundo. Obrigada. 47. Crie a tela de checkout – etapa 2: Bem-vindo de volta. Essa é a segunda etapa do processo. Digamos que você acabou de se registrar, certo? Você criou uma conta. O que é o carro do que muito parecido? Bem, primeiro de tudo, vamos fazer uma cópia. O botão da parte superior desaparece. Mas digamos que você não inseriu todas as suas informações, como endereço, cartão de crédito e assim por diante, certo? Então, ainda teremos algumas flechas, alguns avisos. Vamos começar do início, porque você fez login, você terá seu total e a capacidade de adicionar o voucher. Portanto, selecione a maré, amadureça a entrega de pizza e faça uma cópia com controle para selecionar o texto e não a moldura grande, a propósito, porque esse é um layout automático, a cópia é colocada por baixo. O melhor é que você pode tocar nas teclas de seta, na tecla de seta para baixo e o layout mudará desse jeito. Isso é totalmente incrível. Ok, agora eu tenho algo preparado no meu Bloco de Notas, então deixe-me copiar e colar isso. Resumindo, é o subtotal da taxa de entrega. Você tem um voucher e o total geral? Então, tudo isso é bastante comum na maioria dos aplicativos de entrega. Obviamente, o estilo está errado, então vamos corrigi-lo. Remova a cor e a formatação. Aqui está minha opinião. Podemos começar com o novo Nieto normal de 26 pixels, por favor. Quanto ao total geral, em negrito e azul. Então, basicamente, três em cada quatro coisas são azuis. O voucher deve ser laranja porque você pode clicar nele localmente. Você pode fazer isso no Figma, você pode escolher estilos de cores diferentes. Agora, não tenha pressa. O que mais importa é guiar o usuário em todas essas configurações e analisá-las pouco a pouco. uma etapa, você poderia tornar o preto total em termos de peso, torná-lo mais robusto. Ok, quando terminar, faça uma cópia com o Controle D. Novamente, isso será colocado abaixo, mas selecione os dois e use Shift a para um layout automático, você poderá mude a orientação. Está bem? não é fácil navegar porque Ainda não é fácil navegar porque precisamos alterá-lo para um espaço entre o texto. O alinhamento precisa ser configurado para escrever uma linha. Parece um pouco mais atraente visualmente. Navegue pelo espaço entre o texto alinhado à direita. E, se necessário, talvez seja necessário alterar essa configuração do conteúdo do abraço, o recipiente de preenchimento, caso ainda não tenha certeza de como isso funciona. Simplesmente experimente tudo e veja como você está, ou simplesmente siga esse acorde e peça ajuda. Mas, por favor, sempre publique capturas de tela para que eu possa ver o que está acontecendo. Mas sim, isso é para a barra superior, 0, apenas como uma etapa opcional, selecione o último produto. Esse quadro específico aqui. Isso é muito importante. Agora, arraste outro divisor com a ajuda da ferramenta de linha. Faça com 59 a 592 pixels de largura e altere a cor para aquele cinza claro específico. Eu sei que isso pode ser um pouco complicado de fazer. Então, se você não conseguir seguir essa etapa específica, apenas se manteve incorreta, ou você pode remover a última entrada e duplicar a do meio que tem uma divisória, nunca nivele algo pequeno, impeça você, que é sempre opções. Ok, vamos fazer a carta inferior, bonita e simples. Comece com uma camada de texto simples, informações de contato. No próximo molhado, vamos escrever um aviso. Por favor, adicione suas informações nas Informações. Tudo isso é escrito regularmente em Nieto. A propósito, o esquerdo deve ser azul e o direito, já que é um aviso, deve ser lido para garantir que esteja claro como o dia. Vamos adicionar a divisa. Você também pode chamá-lo de adulto, mas não deve confundi-lo com a seta para trás. Isso é outra coisa. Está bem? Agora, imediatamente você deve perceber que precisamos torná-lo um componente, certo? Então, deixe-me seguir em frente enquanto eu o movo para o quadro de Recursos e sigo as etapas. Lembre-se de que isso precisa ser lido e deve ser um layout automático. Ok, vamos voltar para a tela. Mas o lado direito usa Shift a em ambos os caras. Deixe 20 pixels entre eles. Embora sempre possamos mudar de ideia. Em seguida, adicione outro, o layout automático para a linha inteira. Mude-o para um espaço entre eles. Em seguida, vamos adicionar um preenchimento de fundo branco. Tudo isso deve ocorrer em ritmo acelerado. Ok, branco puro. Em seguida, adicione seu preenchimento. 32.16. Coisas incríveis. Espero que você esteja se divertindo. Centralize-o e altere a largura para 656. E acredite ou não, esse é o nosso componente. Agora, obviamente, ainda precisamos fazer algumas coisas, mas não se preocupe, vamos nos molhar. Ok. Para a parte inferior, vamos ver o que é, o quê. Agora ainda temos algumas coisas a fazer aqui, mas vamos mudar uma configuração importante na parte superior. Então, vamos compactar esse cartão alterando esse valor para 20. E isso porque precisamos de mais espaço lá embaixo. Ainda tem uma ampla sala de leitura, mas agora realmente sentimos o amor pelo espaço aqui. Para nossa melhor sorte, aumente a altura da linha dessas duas últimas camadas de texto. Precisamos de algo um pouco mais generoso. Agora, para finalizar esta palestra, adicione um traço cinza bem claro à nova entrada que acabamos de configurar. Você deveria ter aquela capa cinza. Ok, temos mais alguns minutos e vamos terminar com esse design. Vamos fazer uma pausa rápida e terminaremos em um instante. Obrigado e parabéns por chegar até aqui. Muito obrigada. 48. Usando variantes na tela de checkout: Bem-vindo de volta. Foi aqui que deixamos as coisas de fora. Vamos criar a propriedade de texto. Primeiro. Para o texto à esquerda, esse é o ícone que você está procurando. Chame isso exatamente da esquerda. E no lado direito, você adivinhou a mesma coisa, certo? Texto. Agora podemos criar uma variante em que simplesmente mudamos a cor do texto. Agora, para ser justo, isso não é absolutamente necessário, mas a variante abre muitas possibilidades. Você pode adicionar uma cor de fundo para o lado direito, talvez um ponto de exclamação ou um ícone. Há muitas coisas que você poderia fazer, mas vou manter as coisas simples por considerações de tempo. Chamei isso de normal, depois o outro provavelmente nunca. Agora, isso deve ser muito fácil de seguir neste momento. Vamos voltar ao nosso design e ver Wordsworth. Em primeiro lugar, no painel de ativos, vamos arrastar quatro entradas no total. Navegue. Agora, vou dedicar um tempo para substituir o conteúdo conforme necessário. Vou precisar de alguns segundos para lidar com isso, então, por favor, seja paciente com isso. O problema é o seguinte. Acho que esqueci de mudar o peso dos textos do lado direito porque é o seguinte, isso precisa ser ousado, então se destaca. é para onde vai a atenção do usuário Por padrão, é para onde vai a atenção do usuário. Portanto, a ideia aqui é que tenhamos o tempo de entrega definido por padrão. Novamente, isso é muito importante, definido por padrão como SAP, que significa o mais rápido possível o mais rápido possível. E com a menção 60 minutos novamente, isso é bastante útil. Mais abaixo, temos o endereço de entrega e, em seguida, as informações de contato , porque obviamente precisamos do número de telefone e, finalmente, do número do cartão de crédito, do pagamento. Então a ideia é o usuário cadastrado, certo? Mas lembre-se dos campos dessa etapa. Não se tratava de seu número de telefone , endereço ou inflamação no pagamento. Então é por isso que estamos mostrando isso aqui. Agora. Poderíamos ter adicionado tudo isso no processo de registro? Sim, claro, mas isso não é uma boa prática. Então, um cliente em potencial quer primeiro ver o aplicativo, ver todos os restaurantes. E uma vez que tenhamos sua atenção, temos seus interesses, então podemos pedir mais informações. Mas se você dormisse 12 campos na frente dele sem nem mesmo mostrar a ele o aplicativo, os restaurantes, os pratos. Bem, isso é frustrante e a maioria das pessoas deixará a essência de um aplicativo. É para orientar o usuário com o mínimo de atrito possível. As pessoas não são forçadas a comprar nada. Eles têm dezenas de motivos para desistir. E isso não é necessariamente por causa do seu design. Pode estar atrasado para o trabalho. Talvez eles tenham algo no fogão, o que a criança está chorando ou alguém na porta e assim por diante. Então, quando você entende que as pessoas que usam esses aplicativos são pessoas reais com problemas reais , tudo começa a fazer sentido. É por isso que tornar tudo tão intuitivo, tão simples. Portanto, você pode usar este aplicativo mesmo se estiver meio dormindo porque ninguém precisa de nenhuma fração extra em sua vida. É por isso que estamos pedindo apenas que o Ocidente 100% necessário no momento certo. Aquele, o registrador, sem problemas. Não tenha seu cartão em mãos. Não tem problema. Mas sim, no geral, esse é o design. Caso você queira adicionar a sombra, sugiro que primeiro envolva todos esses caras, todos os quatro, em um layout automático. E aqui está o que evitará a borda dupla. Você pode usar um valor negativo aqui menos um. Isso é totalmente incrível, certo? E se você realmente quiser ser Becky, depois de ativar uma sombra projetada, você pode selecionar a primeira e a última entrada e alterar o raio da coordenada manualmente. Lembre-se de que você pode configurá-los individualmente. Observe que eu não defini o raio da coordenada no meu componente principal ou na minha variante. Isso teria sido um problema para as entradas intermediárias. Então, em vez disso, decidi controlar isso, controlar o raio de coordenadas individuais a partir desse lugar. Ok, vamos fazer uma pausa rápida. 49. Pense com antecedência para o protótipo: Bem-vindo de volta. Vou voltar direto e criar algumas cópias dessa tela. E vou mudar o estado da variante passo a passo. Também vou mudar o texto do lado direito para algo que pareça um pouco mais razoável. Agora, a ideia aqui é pensar no protótipo. Podemos tornar isso interativo para que tanto o cliente quanto o desenvolvedor possam ter mais facilidade com isso. A ideia é clicar em um desses avisos e, em seguida ser direcionado para aquela tela específica, o pagamento, um endereço e assim por diante, que também revelará quaisquer falhas ou lacunas. Então, por exemplo, telas que não incluímos, simplesmente esquecemos de incluí-las. Pop-ups ou vários estados que não foram incluídos no resumo ou no wireframe. Agora, caso queira fazer um protótipo completo, você precisará usar essa abordagem passo a passo que estamos adotando aqui, guiando você por todos os estados. Agora, aqui está o problema, protótipos complicados e superavançados. Faça. Eu os recomendo? Eu digo que depende do quê? Com base no orçamento, na verdade, se você está recebendo algo como 500 dólares, não, eu provavelmente não faria um protótipo interativo completo, certo? Em vez disso, eu faria as interações mais básicas apenas para mostrar o fluxo padrão do aplicativo. Mas se isso custar 423, $5.000 e você quiser impressionar o cliente, eles garantem que você vá em frente. Mas há outro caso que você pode querer considerar. Talvez seja para o seu portfólio, certo? Então, sim, totalmente. Você poderia fazer algo especial C, é tudo uma questão de pensar a longo prazo, certo? Se esse é um projeto de 500 dólares, com certeza, não vale a pena fazer algo impressionante, fazer um protótipo impressionante para o cliente. Não vale a pena. Mas se essa é uma das poucas entradas em seu portfólio , aproveite a chance de criar algo que possa mostrar suas habilidades, certo? O cliente ganha algo extra. Claro. Ele pode não gostar disso. Ele pode não pagar você por aquela coisa extra. Mas o que mais importa aqui é que você tenha uma estratégia. Quando alguém visita seu portfólio, o que você quer que eles vejam? Você deveria querer receber o pagamento? Quais são as palavras, é claro, mas no início de sua carreira, isso é sempre uma coisa. Portanto, você deve se sentir à vontade sabendo que entregou uma milha a um protótipo muito bom para entrar em todas essas telas, todas essas etapas extras. Mas o problema é o seguinte. Quando você tem grandes expectativas, é quando as coisas desmoronam. Por exemplo, quando você concordou com $500, mas depois trabalhava muito mais do que o wireframe sugerido. E você pensa, Ei, eu fiz muitas outras telas. Tenho certeza que ele vai me pagar mais. Ou, ei, você sabe, esse protótipo exigiu mais do que palavras. Mas a verdade é que esse não é o caso. O cliente não vai se importar. O cliente não pagará mais. Talvez ele possa te dar um pequeno bônus, mas sim, basicamente você concordou com 500 dólares. E quando você tem expectativas, quando fica chateado, é aí que isso vai se tornar um pesadelo. Agora, se você inverter, se entender que fará todas essas partes extras como um investimento em seu portfólio no futuro. Eles garantem que isso faça sentido. Agora, para nós, neste caso específico, este é um curso sobre design da AB e Figma, não sobre como gerenciar sua carreira como designer, mas ainda sinto que deveria compartilhar essas informações com você. Agora, mais do que tudo, quero que você seja feliz e isso pode acontecer se você não estiver entrando nessa carreira com os olhos abertos. Então, novamente, certifique-se de pensar em seu portfólio. Você pensa no longo prazo, certo? Ok, deixe-me terminar a outra tela, meus pedidos enquanto conversamos sobre isso e aquilo. O problema é o seguinte. Depois de fazer um pedido, você precisará da tela que confirma isso, certo. Mas você também pode querer refazer o pedido no dia seguinte ou algo parecido. Então, o que vou fazer, vou lidar com essas duas situações aqui. Espero que você se surpreenda ao ver a rapidez com que podemos construir uma tela em questão de segundos reutilizando tudo o que construímos até agora. Se houver um último conselho para você sobre esses projetos, eu digo que é este certifique-se de alocar tempo suficiente para eles. Veja esta parte em que trabalhamos sozinhos com boa música tocando ao fundo com uma boa xícara de café. Essa não é a parte difícil. Se você precisar aprender a usar a variação de componentes, apesar de layouts, isso e aquilo. Mas essa não é a parte difícil. Essa é a parte boa. Eu provavelmente poderia terminar todo esse projeto em menos de um dia, talvez até meio dia. Quem sabe? Mas a parte complicada é lidar com o cliente ou com o gerente de projeto. São eles que não fornecem informações suficientes para continuar. Foi então que ficou indeciso sobre isso e aquilo, e isso transformou a Figma no que é hoje. É por isso que os designers preferem tanta flexibilidade em seus designs, porque estão fartos de clientes mudarem de ideia. A principal coisa que você quer como designer é passar para o próximo projeto. Você tem as habilidades para concluir qualquer projeto em pouco tempo. Se você ficou sozinho com um wireframe abrangente, breve e/ou bom. Mas não é assim no mundo real. Imagine se o cliente dissesse: ei, queremos mais espaço entre cada linha ou campos maiores ou botões arredondados, um tipo de letra diferente, esse esquema de cores diferente. Bem, é por isso que estamos usando todos esses recursos avançados no Figma para basicamente nos proteger contra isso. Agora, claro, nesse caso específico, mudar o tipo de letra ainda seria um pouco chato aqui e ali, porque não configuramos tudo como um estilo. Mas à medida que você ganha mais experiência, você pode se proteger contra tudo. Esse é o problema, é disso que você tem que cuidar. Ok. Vamos fazer uma pausa rápida. 50. Pensamentos finais sobre o projeto: Bem-vindo de volta. Ainda tenho a página Fale conosco para criar, mas essa é uma cópia muito básica do meu pedido. Então, vou dedicar alguns minutos para analisar os movimentos. Agora, enquanto trabalho em segundo plano, deixe-me dizer o quanto estou feliz por você ter chegado aqui. Eu queria incluir o projeto sério neste curso, não um projeto simples baseado em algumas telas, por exemplo, poderíamos ter parado na primeira metade do curso com as três primeiras telas. O que eu realmente queria que isso fosse real, para preparar você para o mundo real. Agora, a verdade é que é muito trabalho repetitivo. É muita preparação. Mas depois de configurar seus componentes, depois de saber quais fontes deseja usar, quais cores e assim por diante, as coisas se encaixam e ouvem algumas das minhas escolhas. Não estou 100% satisfeito com o tamanho dos campos. Há algum espaçamento aqui e ali, mas sempre podemos aproveitar o tempo para brincar com ele. A partir desse ponto, o céu é o limite. Você pode fazer com que este projeto pareça 20%, talvez 50% melhor em cerca de 30 minutos. Basta fazer um trabalho sólido. Você leva, por exemplo, 10 h para construir a base. Mas depois disso, em poucos minutos, você pode transformar o design em algo muito melhor. Reserve um tempo para criar sua própria versão com base no que você vê aqui Gostaria de ver novos layouts, novas fontes, ícones melhores de diferentes estilos de ícones que criaram uma vibração diferente do líder um esquema de cores diferente. Talvez torne-o mais profissional, mais divertido, o que quer que você possa inventar, vá em frente. Agora, supondo que você tenha concluído totalmente o projeto e queira compartilhá-lo, por favor, não exporte nenhuma tela como PNGs. Em vez disso, clique no botão de compartilhamento neste local. A visualização, os detalhes aqui, qualquer pessoa com o link pode ver, esse é o padrão e eu recomendo que você continue assim. Você poderia potencialmente convidar alguém inserindo esse e-mail. Mas eu gosto de usar esse recurso Copiar link e depois enviá-lo para quem você quiser. Quando você quiser me mostrar sua versão, use este botão e me envie seu link. Para finalizar esta parte, você pode perguntar: se isso é 100%, então saiba que sempre há coisas que você pode fazer. Mas, por enquanto, podemos finalizar o design com um sorriso no rosto deles. Espero que você esteja orgulhoso de si mesmo. Isso é totalmente incrível e agradeço por ficar comigo até o fim. Estou ansioso para ver sua própria versão. Obrigado e continue assistindo. Há mais por vir.