Crie aplicativos para celular no Adobe XD

1. Programa de design de aplicativos para o curso de skillshare intermed: Vamos criar um aplicativo móvel incrível no Adobe XD. Olá, sou Chris Barren, certifico o instrutor da Adobe e, além disso, o CEO da Dean Junkie, uma empresa de design de aplicativos móveis que fundei e administrei em 2013-2018 em apenas 3 horas. Vou ensinar alguns dos princípios de design mais importantes para o design do aplicativo, todos baseados no Material Design 2.3. E isso vem da diretriz oficial do Google. Vamos criar um aplicativo móvel. Mas, mais do que isso, vou te ensinar como abordar esse projeto do wireframe ao brief, até o produto final. Lembre-se de que não vamos codificar nada. Tudo acontecerá no programa de design Adobe XD, que tem um teste gratuito de sete dias, depois são dez dólares por mês. Na primeira parte deste curso, abordaremos todos os componentes de um aplicativo. Então vamos começar a trabalhar e aplicar todo esse conhecimento. A principal diferença que faz meu núcleo se destacar é o processo de pensamento. Eu não apenas lhe digo como criar certas coisas, vou compartilhar todas as minhas ideias, toda a minha experiência, e você pode aplicar imediatamente todas essas coisas em seus próprios fluxos de trabalho. Com isso, vamos começar a trabalhar e começar. 2. Introdução ao design de materiais: Bem vindo de volta. Nos próximos minutos, quero que exploremos o design do material, se é, o que não é e por que você deve se preocupar com isso. O design de materiais é uma linguagem de design criada pelo Google em 2014 com o único propósito de criar lacunas não apenas bonitas, mas também utilizáveis, previsíveis e significativas. Agora, a linguagem de design parece pretensiosa, mas você pode pensar no design de materiais como um conjunto de regras. Se você seguir essas regras, provavelmente acabará com um aplicativo que pareça e pareça natural nas mãos do usuário. Agora, essa diretriz está disponível publicamente para todos. No momento, a terceira versão está disponível. E isso porque, como em tudo, ele desenvolveu o protetor labial, ficou cada vez melhor. Bem, pelo menos esperamos que sim. Agora, o que você precisa saber neste momento é que a maioria dessas regras do guia, nossa tarifa, produzem resultados. Eles falam sobre simplificar layouts usando cores fortes, usar movimento para dar significado e assim por diante. Basta ver o Gmail geral e o novo em que as regras são seguidas. Então, é noite e dia que o Material Design ajuda. Agora, todas essas diretrizes devem ser consideradas ao criar um aplicativo ou até mesmo um site. Agora, pense em como suas roupas são feitas e por que elas são feitas de uma certa maneira, certo? Essa é a razão pela qual os fãs têm duas pernas, mas por que uma camiseta tem um certo comprimento? Bem, por que um buraco aqui, certo? Os políticos precisam ficar dentro de certos parâmetros, certo? Se você não seguir as regras mais básicas, acabará com designs malucos. Então, é isso que o design de materiais está tentando evitar. O único problema é a embalagem. O guia em si é um pouco difícil de seguir. É um pouco avassalador. Agora, você pode ter visitado o site. Meu Deus, isso é demais e você não está sozinho. Agora, novamente, esta é a terceira versão. O Google o reformulou várias vezes e ainda está sendo atualizado. Mesmo assim, ainda é um pouco difícil de seguir, especialmente em certas seções. Às vezes, o texto é um pouco complexo demais. E, no geral, isso dificulta a leitura e o acompanhamento. Por exemplo, coisas como densidade de pixels, telas independentes de densidade, pixels escaláveis e outros enfeites. Isso pode intimidar qualquer pessoa. Em seguida, você passa para outras partes e encontra exemplos em que diz que você deve usar 72 dB entre o título e a borda da tela, DP. Achei que íamos usar pixels. Como convertemos pixels em dp? Precisamos da fórmula? Precisamos de uma calculadora toda vez que você adiciona um retângulo? Então, esses são os tipos de coisas que deixam você coçando a cabeça. E, novamente, esse é apenas um exemplo. Agora, o que faremos neste curso é ter uma abordagem prática que produzirá grandes lacunas. Então, isso nos leva ao que o design de materiais não é. Não é um presente dos deuses. Não é o fim de tudo, tudo dos aplicativos. Embora isso nos forneça muitos recursos, eu pessoalmente não acredito em segui-lo até 100 por cento. Como se fosse a Constituição, como se fosse a lei. Agora, encontrei situações em que tive que me desviar, mas com muitos motivos. É por isso que, neste curso, vou ensinar alguns dos melhores princípios de design que achei infalíveis, práticos e fáceis de usar. Agora, a maioria deles também pode ser encontrada neste guia, enquanto outros foram descobertos por experiência própria trabalhando no Adobe XD e criando lacunas. Agora, o que eu quero que vocês entendam é que nunca há uma discussão sobre se isso ou aquilo faz parte do design de material. E isso porque isso realmente não importa. O que eu gosto de focar são os resultados. O aplicativo parece bom? Ele pode ser codificado sem nenhuma solução alternativa? Isso nos dá o resultado pretendido? Essas são algumas das perguntas que passam pela minha cabeça e orientam minha tomada de decisão. Então, há alguém em uma frase, vamos usar design de material e outros aplicativos, mas também vamos nos desviar disso de tempos em tempos. Vamos nos referir a isso, mas não vamos adorar em, com isso dito, vamos pular para a próxima palestra. 3. Visão geral de componentes de interface para Android: Bem vindo de volta. Precisamos saber quais são os elementos básicos que podemos usar para criar aplicativos, especificamente os para Android. Nesta palestra, darei uma visão geral dos elementos mais importantes. Isso vai ser bem rápido, mas você não precisa memorizá-los no banco, você tem uma folha de dicas anexada. A ideia é que qualquer receita de bolo precise de farinha, ovos, manteiga e assim por diante. A maioria deles precisa das mesmas coisas. Então, é o mesmo com os anúncios. Vamos extrair da largura superior, a barra de status. Esta é a pequena banda na parte superior de qualquer aplicativo que mostra o tempo, o nível de batalha, sua operadora e outras notificações. Pode ser preto, transparente ou de cor sólida. Essa é a barra de status. A barra de status, a barra de status, o que quer que você tenha a ideia em termos de design, provavelmente a tornarão uma cor sólida porque fica melhor. Imediatamente abaixo da barra de status, vem a barra do aplicativo. Esse é o nome oficial, mas também foi chamado de barra de ação há algum tempo. Alguns desenvolvedores ainda o chamam por esse nome, e eu estou nesse barco. Acho que descreve melhor essa área. Agora, a barra de ação é muito importante porque ela várias funções e falaremos sobre isso em uma palestra dedicada. Agora, vamos aprender a reconhecer que você pode vê-la ocupar uma única linha imaginária, assim. Mas também pode ocupar muito mais espaço, geralmente para abrir espaço para abas. E casos raros. Pode ser transparente, mas mesmo assim, sempre há um elemento obrigatório presente. E essa é essa seta, que é o sinal universal do Android. Para voltar. Na verdade, é chamada de seta para cima na documentação oficial. Mas, novamente, costumamos dizer que é a seta para trás. Como eu já mencionei isso, vamos nos concentrar no próximo bloco de construção, as guias. Agora, eles podem ser usados para dividir seu conteúdo. Os usuários do Android estão muito familiarizados com o gesto de deslizar que muda isso, pois eles não estão em todos os lugares em quase todos os aplicativos. Agora, existem dois tipos de pinceladas, fixas e roláveis. Eu prefiro o primeiro porque é mais esteticamente agradável, já que dividimos a largura da prancha de arte pelo número de camas, podemos usar um pouco menos ou até 45 abas fica muito cheio caso você precise de mais guias, é melhor usar o recurso de rolagem. A distância da borda esquerda também é bastante significativa. É bem grande. Mas, no geral, isso é algo em poucas palavras. Outro componente é o menu à esquerda, mas não porque ele nos permite aprimorá-lo em termos do lado do design. Não há muito que possamos fazer. Na verdade, isso é muito útil porque bagunça o aplicativo o torna mais simples. E então os usuários de drogas são os mais acostumados com esse menu. E isso nos permite esconder uma grande quantidade de conteúdo dentro dele. Então, em vez de encher a barra de ação com muitos ícones ou muitas guias, basta mover tudo isso aqui. Esse layout é muito padrão, então os desenvolvedores podem criar rapidamente a aparência padrão, que é o que você vê aqui. Podemos personalizar os ícones e adicionar um pouco de cor. Mas isso é tudo em termos de personalização. Novamente, os desenvolvedores sempre desempenham um grande papel nessa compensação, porque se você criar um layout um pouco diferente, eles terão que trabalhar muito do lado deles, o que é muito difícil e novamente, mais caro. Agora, geralmente não vale a pena o esforço, então vamos continuar assim. Então, por esse motivo, o painel de navegação não terá uma palestra separada, pelo menos não por enquanto. Continuando, os cartões são uma ótima maneira de apresentar conteúdo. Você pode identificá-los pela base branca levemente arredondada, que geralmente fica em cima de um fundo cinza claro. É muito fácil confundir cartas com listas. Eles são mais usados para mostrar conteúdo de natureza semelhante. Por exemplo, um cartão de índice de receitas, por outro lado, pode exibir vários tipos de conteúdo, como texto, fotos e, geralmente, diferentes. Um painel é um bom exemplo de cartões sendo usados corretamente. Cada item é uma parte diferente do aplicativo. Ok, agora vamos continuar com isso. Meu próximo componente está presente em quase todas as telas, e essa é a tela pop-up. Isso é oficialmente chamado de diálogo e pode ser visto em dois formatos. O normal, que é muito fácil de identificar, e depois o de tela cheia. Vamos discutir esses dois em uma palestra separada. Mas você pode identificar rapidamente um diálogo na tela do telefone observando a barra de ação. Se você ver esse ícone de fechar junto com uma palavra de ação no lado direito, então é um diálogo, ok, com quase o fim. Mas eu amo esses caras, então eu realmente queria dar uma mensagem para eles. Lanchonetes. E aqueles. Agora, embora pareçam fazer parte de um café da manhã balanceado, esses caras estão acostumados a informar o usuário sobre várias coisas que acabaram de acontecer. Agora, conceitualmente, eles podem ser confundidos com diálogos, mas abordaremos as diferenças em breve por enquanto, e vamos garantir que possamos identificá-las se as virmos em um design. Infelizmente, não podemos fazer muito em termos de trabalho de design. Mas ainda assim você precisa saber sobre eles. Eles realmente melhoram a experiência do usuário. Em seguida, na nossa lista estão os botões. Eles são divididos em duas grandes categorias. Botões regulares e botões de ação flutuantes , também chamados de FAB, são. Agora, os botões regulares são previsíveis. Eles são grandes, certo? Eles têm um estado prensado e podem ser colocados em praticamente qualquer lugar da tela em uma quantidade razoável de poros. Agora, os botões de ação flutuantes geralmente estão posicionados no lado inferior direito. Efeitos. Então, enquanto você rola, o botão permanece pressionado porque essa ação geralmente é o principal recurso do aplicativo. Agora, por exemplo , no WhatsApp, o FAB abre uma nova compensação nos nós. bebê deles cria uma nova entrada. Então essa é a principal diferença entre essas duas categorias, botões clássicos e seus bebês. Mas vamos falar sobre eles mais profundidade em uma palestra separada. Por fim, vamos falar sobre os campos de Beck no Android. Portanto, eles são extremamente versáteis e você pode vê-los em praticamente qualquer aplicativo disponível. Eles podem ter um rótulo ou algum texto embaixo deles. Eles podem ter uma seta suspensa ou o ícone do calendário ao lado deles. O rótulo com às vezes é exibido em linha. E quando você ativa o campo, ele se move acima dele e encolhe. Esses outros são muito divertidos. E eles podem mudar drasticamente a aparência do seu aplicativo. Vamos usá-los bastante. Mas com isso, concluímos essa visão geral sobre os principais componentes do Android. Agora, eu sei que é muito bacon, mas confira a folha de dicas em anexo e você pode até imprimi-la. Você não precisa memorizar nada, pois discutiremos todos os detalhes em profundidade na hora certa. Agora, antes de ir, você deve saber que existem outros componentes do Android, como chips, controles deslizantes, dicas de ferramentas e outros enfeites. Mas no meu livro, eles não são tão importantes. E eu realmente queria fazer isso passo a passo, por esse motivo, não vamos falar sobre eles. Em vez disso, vamos nos concentrar no que discutimos aqui porque isso estará em 90% de todos os projetos. Ok, nos vemos na próxima palestra. 4. Veja o melhor tamanho de prancheta para seus aplicativos: Bem vindo de volta. Vamos falar sobre o tamanho da prancha de arte, que pode ficar bem complicada se você não tiver o parto certo lá atrás. Agora, vimos que o Google mede tudo em dB e Sb. Agora, se você é o programador, provavelmente está familiarizado com esses termos. Mas e quanto ao resto de nós pelo design, é isso que devemos fazer? Bem, aqui está a versão curta. Agora, primeiro, para aplicativos Android, usaremos 720 como largura. A altura realmente não importa, porque na maioria das vezes teremos aplicativos mais longos. Então, por que 720, embora tenhamos 360 ou a quarta no painel de predefinições. E então alguns kits de interface do usuário que você deve ter visto 375. Aqui está a situação. 360 é o padrão em design de materiais. Número dois. Você pode ver um exemplo aqui em que a altura da barra de ação é de 56 dB, e isso se traduz em 56 pixels na prancheta 360. Agora, você pode ver todas essas outras medidas que são muito úteis para iniciantes. Agora, o problema com três sextos é que ele é bem pequeno. Então, quando você exporta isso, tudo o que você quer é mostrá-lo para seus amigos ou até mesmo para seus clientes. Não vai parecer tão bom. Não vai ser tão nítido, certo? É por isso que eu prefiro simplesmente dobrar, dobrar a coisa toda. As proporções são as mesmas , mas com apenas o dobro, certo? É por isso que vamos usar 720. Novamente, estamos basicamente dobrando o tamanho da tela, mas tudo é proporcional. Portanto, você sempre pode ver esses valores do cara e dobrá-los. E você estará pronto para ir. Por exemplo, 56 dB se torna 112 pixels, 16 se torna 32 e assim por diante. As proporções permanecem as mesmas. Mas dá a um banco a dizer que o padrão muda de três décimos sextos para qualquer outra coisa. Seja como for. Bem, apenas como um exemplo aproximado, digamos que temos uma lacuna de 16 pixels aqui, aqui e depois aqui na tela da TV. Legal. Em seguida, no total de cento e 12 pixels, ele pode aumentar para 24 pixels. Mas, novamente, serão 24 em todos os lugares. Então, a ideia é, novamente, que tudo é proporcional. Tudo aumenta ou diminui. E como estamos usando vetores, está tudo bem. Resumindo, o tamanho da tela não é muito importante porque seus elementos sempre aumentarão ou diminuirão. É assim que os aplicativos funcionam. Alguns telefones têm resoluções super altas. Os mais baratos têm resoluções mais baixas. Então, você vai criar versões adicionais de cada aplicativo? Não, isso seria uma loucura. Em vez disso, você cria um como um cara e, em seguida, a coda vai aumentá-lo ou diminuí-lo, dependendo de várias coisas. E como estamos usando formas e ícones baseados em vetores, isso significa que você pode fazer isso sem problemas de qualidade. Você não vai ficar com bordas confusas ou ensanguentadas. E, novamente, eu recomendo sete 20º para a largura. E isso nos leva à próxima edição de dimensionamento. Qual é o melhor tamanho para todos os nossos componentes? Para os botões, para a ação Bode para as cartas e assim por diante. Vamos falar sobre isso no próximo clipe. 5. Tamanho em pixels: veja por que as pessoas discutem: Bem vindo de volta. Na palestra anterior, falamos sobre o uso do Material Design Guide. Legal. Agora, da forma como você pode obter rapidamente todos os tamanhos certos para os outros componentes, basta procurar as especificações, que são a abreviação de especificações. E você não obteve respostas rápidas em termos de tamanho. Exemplo para a barra superior, que deve ter 112 pixels de altura. A lacuna à esquerda, haverá dois pixels. Agora, como estou obtendo esses números? Estou apenas dobrando para que caibam na prancha de arte 720. Agora, vamos para Botões, por exemplo, a largura mínima é 128 pixels, a altura mínima 72 pixels. Agora vamos dar mais um exemplo. Vamos dar uma olhada nas fábricas, por exemplo, procurar as especificações e desenvolver vários tipos de dabs. Resumindo, esses têm 96 pixels de altura, e esse é o padrão. E aqui está outro. Tem 144 pixels de altura, caso você queira um ícone e o rótulo, um rótulo de texto. Mas sim, no geral, essa é a maneira mais rápida de se familiarizar com o design de materiais. Gostaria de lembrar que esta é a segunda versão do guia. Se você quiser usar o material três, o que eu realmente não recomendo. Apenas uma atualização minuciosa, no que me diz respeito, você ainda pode dobrar esses valores, mas precisará usar 824 como tamanho da prancheta. Então, em vez de montar 28, 24, não é grande coisa. Mas, novamente, você faz você. Agora, vamos dar um passo atrás e dar uma olhada no panorama geral. Agora, desenvolvedores programadores, eles se importam se você usa design de material dois ou três ou se você usa 36412, o que significa 72824? Não, absolutamente não. Eu repito. A maioria dos programadores não se importa com o tamanho de tela que você cria. E isso está fora da porta. Mas isso traz a pergunta: por que tantas pessoas discutem on-line sobre o tamanho da prancheta? Bem, vamos pensar em todo o objetivo. Como designer. No começo, só queremos uma coisa, mas não os caminhos mudam de aparência. Por exemplo, criar um botão enorme que ocupa um terço da tela, certo? Isso seria ruim. Ou um ícone tão pequeno que só as pontas podem ser usadas. É isso que estamos tentando evitar como designers iniciantes, certo? E é aí que o cara entra. É um bom conjunto de regras que evitam esses tipos de erros. Então, novamente, você quer criar alguns ventiladores, certo? Você precisa de duas pernas, certo? Você quer projetar o carro. Você vai precisar de algumas rodas. Os padrões existem por um motivo. Eles fornecem uma base sólida para o nosso design. Agora, para esse fim, aqui está o que eu sugiro. Abra alguns aplicativos bonitos no seu telefone e faça capturas de tela. Procure os aplicativos que milhões de pessoas usam. Em seguida, arraste-os para dentro Adobe XD e ajuste o tamanho, se necessário, para que caibam na sua prancheta. Provavelmente, você fará uma captura de tela de que será muito maior. Mas, novamente, tudo bem. Diminua a escala proporcionalmente. Agora a pergunta é: seu tamanho é quase o mesmo? Veja, não é uma tragédia. Se, em vez de 96 pixels, você usar 100, a polícia do Material Design não virá até sua porta. Agora, a principal preocupação é que você não tenha 400 pixels de altura. Isso seria um problema, ou 20 pixels. Então, pessoas muito mais inteligentes decidiram que 96 pixels funcionam melhor para a maioria das pessoas. É por isso que estamos falando tanto sobre o tamanho, para que possamos começar com o pé direito. Mas caso você não goste das diretrizes de design de material, continue fazendo capturas de tela e comparando seu design com os principais aplicativos. Veja se o Yahoo Mail decidiu que botão 96 por 96 funciona melhor, então você realmente não deve usar 20 por 20. Ou se você perceber que 90% dos aplicativos usam guias com 96 pixels de queda. Novamente, não use 50 pixels, certo? Esses são apenas exemplos aleatórios do topo da minha cabeça, mas espero que você esteja entendendo meu ponto de vista. Esses tamanhos do guia não são leis estabelecidas pela divindade. Não, essa é apenas uma maneira rápida de montar uma fundação. Então, se você ver algumas pessoas debatendo mais de 363.754,12, quatro AT, com qualquer outra coisa. Por favor, não se envolva em nenhuma discussão. Focado nos princípios de design. Em vez disso, um esquema de cor cinza, simetria equilibrada, incrível biografia de tubos e assim por diante. É isso que realmente fará com que seu aplicativo tenha uma ótima aparência. E, claro, não se desvie muito do padrão. Alguns pixels aqui e ali, tudo bem. Mas não altere os tamanhos em mais de 20 dólares. E muito obrigado e nos vemos na próxima palestra. 6. Aprenda a projetar a barra de ação (barra superior): Bem vindo de volta. Vamos falar sobre a barra de ação ou a barra de aplicativos e ver o que ela pode fazer por nós como designers. Agora, antes disso, vamos ver rapidamente o que está acontecendo com a vizinha do andar de cima, a barra de status. Isso não atrai nenhum amor e fica muito envergonhado quando os desenvolvedores o deixam em seu estado padrão. No entanto, uma barra cinza escura não é realmente uma boa sorte. Você pode torná-lo transparente ou preto. Os designers tendem a usar uma cor sólida que combina com a barra de ação e é mais esteticamente agradável dessa forma. Isso também oferece melhores contrastes com todos os seus ícones, que são em sua maioria brancos. Agora, mais recentemente, com a árvore de design de material, a barra de status tem a mesma cor da ActionBar por padrão, mas isso é tudo sobre a barra de status. Então, vamos até a barra de ação. Agora, a ActionBar pode assumir várias formas e tamanhos que são formados no total, mas você provavelmente usará apenas um ou talvez dois. Agora, esse é o clássico com um ícone de menu à esquerda e o logotipo no meio. Este é o centro, a barra de ação. E é bastante popular na tela inicial, ou seja, na tela, à qual você sempre volta. Agora, esse ícone de menu é normalmente chamado de menu de hambúrguer porque, bem, linhas uma sobre a outra. Então eu acho que é um pouco parecido com um hambúrguer de qualquer maneira, isso é muito popular. Mas esteja ciente de que essas guias são um componente separado. Sim, eles são da mesma cor, mas não fazem parte da barra de ação, por exemplo, ok, seguindo em frente. No lado direito, muitas vezes você verá alguns ícones que o ajudam a realizar ações bastante importantes. Nesse caso, temos um recurso de pesquisa que é bastante útil em um site de notícias e outro menu. Vamos passar para outra barra de ação muito popular. Quando você entra em um item, normalmente obtém esse layout. Essa seta ajuda você a voltar para o nível superior, dependendo de como você a vê. Então você tem um título que ajuda você a navegar no aplicativo, além de outro ícone no lado direito. Essa é uma barra de ação típica que deixou a linha em que a primeira barra de ação, tivemos que centralizá-la, o logotipo. Aqui, o título está à esquerda. Então, para resumir isso até agora, vimos dois tipos de barras de ação, centralizada e linha esquerda. Novamente, normalmente o centralizado mostra o logotipo da empresa e você geralmente o vê na tela principal do aplicativo. O título alinhado à esquerda geralmente é exibido quando você está dentro de algum tipo de conteúdo. Então, são duas das quatro barras de ação. E os outros dois? Bem, crianças e exemplos do Gmail. Como você pode ver, o título é muito longo e bem grande, então não caberia ao lado da seta. Na verdade, você não deveria tornar o título muito pequeno para torná-lo melhor. É por isso que o Material Design sugere essas duas opções. Basicamente, o título segue meu conselho, tente evitá-lo porque isso não parece muito bom na minha opinião. Agora, deixe-me dizer a verdade. Os aplicativos são atualizados o tempo todo. Portanto, você pode conferir esses mesmos aplicativos deste curso e ver del completamente diferente. É assim que as coisas são. Mas o ponto essencial sempre permanece o mesmo. Um menu de hambúrguer, um título, alguns ícones no lado direito. Nunca use mais de três ícones no lado direito. E se o título não se encaixa no menu de hambúrguer, qual é a seta para trás? Basta movê-lo para baixo. Não o encolha. Agora a pergunta é: você poderia fazer pequenas variações? Claro. Por exemplo, aqui está o Google Calendar. Aqui, na tela principal, você esperaria que o título estivesse centralizado. Mas isso é, na verdade, um menu suspenso, então saiu da linha. E como os cerca de três ícones estão no lado direito, na verdade faz sentido colocar o mês e o ano à esquerda. E ainda dentro do Gmail, obtemos essa barra de ação na economia. Agora, essa flecha é muito comum. Novamente, mostra que você está dentro algo e que pode voltar ou, como diz o guia oficial, você pode subir de nível. Agora, a ActionBar é um ícone de alinhamento à esquerda, título no lado esquerdo e, em seguida, um ícone de menu no lado direito. Mas sim, no geral, é assim que a maioria das barras de ação se parece. Agora, vamos falar sobre o tamanho em pixels. Você tem um guia tracejado para não precisar memorizá-lo no banco. Estamos falando sobre o tamanho da tela V6, desde o design do material até o dobro. Portanto, 720 pixels para a largura. Então, na barra de status, queremos 48 pixels. E para a barra de ação 112, isso nos dá um total de 160 pixels. Mas o espaço vazio em ambos os lados, 32 pixels, é a norma. Ao usar esse tamanho de quadro de arte, você sempre pode consultar o Guia oficial de design de materiais e dobrar os valores mostrados aqui no VB. Então, se dermos uma olhada, veremos que a barra de ação é 56 db vezes 2.10,12. É o mesmo para as margens. Eles dizem 16, nós vamos dobrar, então são 32. Portanto, este é um resultado ou inseriu o dobro do número do guia oficial quando você usa meus lados de guerra recomendados . Isso é tudo para a barra de status e a barra de ação. Você tem os tamanhos e pixels, além dos layouts mais comuns. Veja as folhas de dicas para refrescar sua memória. Muito obrigado. 7. Tudo o que você precisa saber sobre separadores: Bem vindo de volta. Nesta palestra, falaremos sobre dabs e outros componentes essenciais do Android. Seu objetivo principal é separar o conteúdo em telas diferentes. Agora, há apenas uma regra importante que você deve ter em mente. O conteúdo em cada guia precisa estar no mesmo nível de hierarquia. O que isso significa? Na prática, isso significa que suas guias devem mostrar coisas que fazem sentido juntas. Se for um aplicativo de música, apenas um exemplo aleatório, você pode ver pop, rock, hip hop e assim por diante, certo? Se for uma loja, você pode ver eletrodomésticos, telefones celulares, câmeras. Portanto, é muito intuitivo quando você considera todos esses exemplos. Mas aqui está o que você não deve fazer, que é ainda mais claro. Então, digamos que seja um aplicativo de entrega de comida e mostre configurações em italiano, indiano e depois. Obviamente, isso não funciona porque economia pertence um lugar completamente diferente no aplicativo. Então é isso que isso significa, o mesmo nível de hierarquia. Agora, em geral, o motivo pelo qual tudo provavelmente mostrará a estrutura de informações do aplicativo. Então, na verdade, há poucas chances de você estragar tudo. Agora vamos falar sobre o lado do design. As guias podem ser divididas de várias maneiras , dependendo do que lhe interessa. Agora, do ponto de vista da navegação, eles podem ser fixos ou roláveis. Agora com abdômen fixo, eu os amei. Eles parecem ótimos. Mas você está limitado a quatro. As entradas com largura em pixels são determinadas pelo número. E aqui está a matemática. Abas significam uma aba três sextos mais profunda, porque a largura total é de 723 abas 240. E se você quiser 1AD é tudo o que você vai conseguir. A maneira fácil de organizar esses itens no Adobe XD é criar o retângulo que mostra a guia ativa. Isso sempre tem quatro pixels de altura. Insira aqui a largura, digamos até 40, e agora à esquerda da linha e depois centralize o texto ou o ícone com as guias significa que você precisará ter camadas de texto individuais. E apenas mova essa barra. Certo. Agora, caso estejamos falando de guias roláveis, a distância do lado esquerdo precisa ser 104 pixels, 104, o Paxos. Então você tem inícios de retângulos ativos. Obviamente, a palavra em si precisa estar centralizada, portanto, certifique-se de não se confundir com essa distância. Então, novamente, deixe 100 e despeje os pixels vazios do lado esquerdo. E então será isso. Ok, Nice. Agora, em relação à largura mínima, isso é novamente 180. Isso significa que você terá duas pinceladas e meia em uma tela. Mas isso não deve ser um problema , considerando que você deseja mostrar ao usuário essas são muitas outras guias. Agora, quando você a vê em ação, você verá que realmente faz sentido à medida a guia ativa se torna aparente por meio de uma boa animação. Ok, continuando, outra forma de ver a Bell Labs é baseada em seu rótulo. Pode ser ícone de texto ou ícone de adição de texto. Mas, como você provavelmente já presume, nunca deve misturá-los e combiná-los. Se você tiver dois rótulos de texto, não adicione o terceiro. Isso é apenas um ícone que não faz sentido. Escolha uma direção e permaneça nela. Essa é uma regra muito simples que se aplica a praticamente todos os lugares. Agora, essas opções têm tamanhos muito específicos. Então, vamos ver o que é, qual opção uma com rótulos de texto. Esta é, de longe, a escolha mais popular. Seu tamanho, seu fundo tem 96 pixels de altura. 96. Obviamente, isso está ligado à sua barra de ação e à barra de status. O bloco inteiro, quase 720 pranchetas padrão, tem 256 pixels de altura, e são 48, 112 e depois 96. Se você escolher a rota do ícone que usa a mesma altura para o plano de fundo 96, os ícones em si devem ser mantidos no tamanho de oito por 48 pixels. Caso seu ícone tenha uma forma irregular, você pode usar um retângulo para guiá-lo. Agora, eu não sou fã apenas de pinceladas com ícones, pois é muito difícil entender o que está por trás delas. Portanto, eu pessoalmente ficaria longe dessa opção, a menos que os ícones sejam extremamente intuitivos e conhecidos. Esse grupo é reservado para coisas como pesquisa, GPS, osso, Wi-Fi e muito poucos outros. Agora, a terceira opção e a última são rótulos e ícones. Então, o ícone tx plus , do qual, novamente, não sou muito fã por causa da altura. Isso precisa de 144 pixels versus 96 para a linha única. Então, essa é uma grande diferença. Você está ocupando muito espaço. Agora, de fato, parece bom, mas com a perda de espaço de pressão, há algo a ser dito sobre um recurso de rolagem que a barra de ação desaparece quando você rola para baixo. Mas não vamos nos concentrar no movimento porque isso é muito difícil de adicionar em todos os projetos no Adobe XD. Mas observe que não é o fim do mundo. se você colocar um pouco de espaço na parte superior, entanto, se você colocar um pouco de espaço na parte superior, a maioria dos aplicativos mostrará um rótulo, exatamente por esse motivo, para mantê-lo simples. Mas, no final das contas, depende muito de você. Agora, voltando ao assunto, cole duas camadas de texto e tente evitar nomes muito longos. Isso pode ser evitado. Eles usam ponto, ponto no final da palavra, mesmo que o Google diga que isso pode confundir o usuário. Agora, o que eles propõem é que você aumente a altura do componente. Mas no meu livro, isso vai parecer pior. Então, isso nos leva ao estado de pancadas. Há dois deles ativos com aquele retângulo de pixels inteiro embaixo dele. Agora, isso geralmente tem uma cor que realmente se destaca pelo contraste máximo. E então temos inativo, onde a camada de texto tem uma aparência lavada e nenhuma decoração adicional, nada em termos do lado do design. Agora, pela minha experiência, a maioria dos meus cabeçalhos são coloridos. Portanto, meu rótulo de texto ativo e o retângulo embaixo podem ser brancos puros. Agora, às vezes eu me desvio e uso amarelo, mas somente quando a combinação não é chocante quando não incomoda os olhos. Agora, observe que camada de texto das guias ativas nunca deve ter outra cor além do branco. Assim, você pode brincar com o retângulo, a barra abaixo, mas não a camada de texto é branca, geralmente é a melhor. Agora, aqui está outra coisa. Whitehead são muito comuns. Portanto, pode parecer limpo, mas na maioria das vezes não usamos um fundo branco puro. Agora, quero deixar vocês com essa ideia em mente. Às vezes, as regras podem ser quebradas desde que você siga os princípios de design descritos em todo o curso, você possa sair da caixa e criar algo bonito, algo que seja utilizável independentemente de você seguir as diretrizes de design de material ou não. Mas, por enquanto, é hora do próximo tamanho de célula. Eles criam seus próprios cinco cabeçalhos. Por cabeçalho, quero dizer barra de status, barra de ação em um sistema de guias, tudo combinado. Agora, o objetivo é que você se familiarize com o processo de configuração no Adobe XD e experimente com várias cores e layouts. Em geral, não trabalhamos em condições isoladas. Não criaremos apenas o cabeçalho. Vamos criar a coisa toda. Mas eu realmente quero que você experimente isso e veja como você se sai. Então, são cinco cabeçalhos diferentes em qualquer estilo que você quiser, em qualquer layout. Para os ícones, você pode usar black icon.com ou simplesmente pegar alguns da Internet. Realmente não importa. Isso é apenas para fins práticos. Não vamos usá-lo em nenhum outro lugar. Publique seu trabalho na seção de comentários. E, idealmente, todos esses designs devem estar um embaixo do outro em uma única placa de arte. Divirta-se com isso, e nos vemos na próxima palestra. 8. Como trabalhar com cartões: Bem vindo de volta. Os cartões são um dos elementos mais importantes em qualquer Android, e isso porque são uma das melhores formas de exibir conteúdo. Os cartões vêm em todas as formas, tamanhos e looks. E é surpreendente ver quantas variedades se enquadram nesse rótulo aqui, alguns exemplos. Este mostra um vídeo na seção superior e o título e a descrição abaixo. Este tem o título acima e, em seguida, uma foto, uma descrição e o apelo à ação. Você pode exibir presentes musicalmente e adicionar elementos relacionados ao clima. Você pode ter todos os tipos de coisas, como ícones, interruptores, muitas coisas, botões, por exemplo, ou absolutamente nada. Resumindo, eles são extremamente versáteis. Só existe uma regra importante. As cartas devem ficar sozinhas de 2 pés. Independentes, eles não dependem ou seja, eles não dependem dos elementos circundantes, dos componentes ou de um contexto específico. Então, vamos analisar alguns casos para que você possa entender melhor por que os cartões são tão flexíveis. Agora, se dermos uma olhada no aplicativo de memorandos nos nós, podemos ver os cartões em ação. É por isso que eu disse que você pode se surpreender ao ver quantas variedades existem. Nesta versão. Não temos títulos, botões, mídia de qualquer tipo, miniaturas, descrições, nada, apenas o contêiner e a pré-visualização do conteúdo real. Uma prévia, só isso. são os cartões em que você agora, considerando tudo isso, não tenho um tamanho específico ou o modelo que você deve seguir. Pense sobre qual conteúdo precisa ser incluído e aplique os princípios de design deste curso, especificamente aqueles que discutiremos um pouco mais adiante no curso por exemplo, usando a opção certa proporção, espaçamento consistente, ótima tipografia e os membros anteriores de legibilidade, altura e tamanho adequados da linha são basicamente muito importantes quando se trata de texto. Então, essas são as coisas que vão fazer ou quebrar isso. Agora, vamos mudar para a I Herb, uma loja de suplementos muito popular que apresenta vários cartões. Primeiro, na tela inicial, aqui está uma linha de várias marcas. Portanto, uma abordagem muito mínima em relação ao conteúdo. Diretamente abaixo dessa linha, temos algo completamente diferente. Uma foto do produto. Eu senti o preço da classificação por estrelas, mas também um menu que contém as opções. Agora, isso é bastante. Seguindo para baixo, vemos outra proteção para a postagem do blog. Novamente, as características do podo idle e a descrição na base de cada carta estão o recipiente, que é um retângulo branco, ligeiramente arredondado ou quadrado, que pode ter uma sombra projetada muito sutil. Normalmente, você pode encontrá-los colocados em cima de um fundo claro ao virar isso, a ideia de que o cartão é um elemento distinto que é independente de qualquer outra coisa. Aqui está outro exemplo, aplicativo de entrega global que basicamente está conquistando a Europa pela entrega de alimentos. Aqui podemos ver outro exemplo de cartões sendo usados. No entanto, não é nada especial, mas é interessante ver quantos estilos podem ser buscados. Agora, continuando, quando você toca em um cartão, ele pode se expandir para o modo de tela cheia. Mas há casos em que há um ícone suspenso que mostra a capacidade dos cartões de revelar ainda mais conteúdo. Este exemplo de material dot io foi comprado em. O importante é que você não precisa rolar as barras e seu aplicativo. Portanto, se o cartão revelar muito conteúdo além do talão, você terá que rolar muito molhado, mas não receberá uma rolagem secundária apenas para essa ação. Continuando, cartas podem ser empilhadas umas sobre as outras. Mas há muitos casos em que você pode colocá-los em uma linha com uma rolagem horizontal. Portanto, essa é uma abordagem muito popular pois oferece muito conteúdo, mas está sob o controle do usuário. Isso torna menos provável que o usuário se sinta sobrecarregado pela grande quantidade de inflamação. Agora, novamente, tenha cuidado ao misturar pinceladas com cartões de rolagem. Por padrão, o usuário sabe que pode deslizar e trocar de guia. Mas se ele tocar em uma região que apresenta o cartão de rolagem, uma rolagem horizontal para a da Guarda. Em vez disso, ele vai acabar passando por eles. Então, esse é o tipo de coisa que realmente incomoda os usuários. Isso é algo que parece pequeno, como se fosse um pequeno inconveniente, mas na verdade as pessoas odeiam isso. Agora, voltando aos nossos cartões, espero que você tire uma coisa em particular desta palestra. Um cartão não tem uma aparência ou tamanho específico. Pode incluir muitos elementos. Ou pode assumir a forma de um retângulo com um pouco de texto em cima. E é isso. O essencial é que você defina as coisas de forma que a meta do aplicativo, o objetivo, seja cumprida sem sobrecarregar o usuário com muita e muita inflamação. No momento, falaremos sobre essa segunda parte em uma palestra dedicada. Mas, por enquanto, quero ver alguns outros cartões que você identificou e outros laboratórios. Publique uma captura de tela para que outras pessoas possam ver mais exemplos de cartões. Porém, como eu disse, eles podem ter todas as formas e tamanhos. Depois de fazer isso, crie pelo menos duas cartas de sua preferência. Por favor, faça todos eles dentro da prancheta 720. Pode ser qualquer tipo de cartão com qualquer tipo de conteúdo. Eu realmente quero que você pratique mais do que qualquer outra coisa. Molhe-se e eu realmente espero ver outros trabalhos na seção de comentários. Obrigada 9. Crie botões bonitos e eficazes: Bem vindo de volta. Vamos falar sobre os botões e como eles funcionam e sobre um ambiente Android. Temos duas categorias diferentes. Temos botões regulares e botões de ação flutuantes , chamados FAB. Agora, vamos falar sobre esse sofisticado, FEB, sempre que você iniciar um novo projeto de aplicativo, provavelmente perguntará qual é o propósito do aplicativo ou o que o usuário deve fazer dentro do aplicativo. Se estivermos falando sobre o Gmail, por exemplo, a ação principal seria escrever uma nova mensagem. Ou, se for o aplicativo de calendário, precisamos de um FAB para criar uma nova entrada. Se for o Google Maps, o usuário precisa começar sua jornada bem rápido. Se for um aplicativo de relógio, o usuário precisa criar o novo alarme e assim por diante. Você entendeu a ideia. Essa ação específica é um recurso essencial do aplicativo que o usuário geralmente precisa. Então, tem que estar na ponta dos dedos dele. Ele deve ser exibido em todos os momentos. É aí que entra o botão de ação flutuante. Ele verifica todas as caixas. Sua principal propriedade é que ele flutua acima do conteúdo em uma posição fixa, então está sempre lá, está sempre acessível. Portanto, o FAB, botão de ação flutuante, certos aplicativos quando você rola para baixo, ele fica alto , mas quando você para, ele sempre aparece novamente. Agora, o FAB pode assumir duas formas, regular e estendida. Agora, o botão flutuante normal é sempre colocado no lado inferior direito da tela. E eu gosto de colocá-lo 32 pixels da parte inferior e direita. Agora, o tamanho do botão é um duodécimo por um duodécimo, e o ícone dentro dele é 48 por 48. E como eu disse, o botão flutua. É por isso que geralmente tem uma sombra projetada. Também é colorido e o ícone geralmente é branco puro, por isso é muito fácil de obter. O ícone mais comum é o símbolo de adição, que geralmente significa criar, criar o novo e-mail, criar a nova reserva e uma nova entrada e assim por diante. Agora, há apenas um único botão de ação flutuante, apenas um único FAB. E isso porque geralmente isso é a coisa mais importante dentro do aplicativo. Então, por favor, não tenha mais de um FAB. Agora, aqui está outra coisa que eu desencorajo o uso de várias ações escondidas dentro de um FAB. Agora, essa animação, com certeza, é linda. Isso causa um impacto. Mas quando eu o uso, eu vi menos cliques. E isso porque as pessoas não estão acostumadas com tudo isso. Então, por favor, novamente, evite isso. Agora, o próximo tipo de botão de ação flutuante é o estendido, onde o normal era limitado a um único ícone e era bem pequeno. O FAB estendido também pode ter um rótulo de texto ou texto e um ícone. E você pode deixá-lo tão largo quanto quiser, mas a altura recomendada é de 96 pixels. Agora estendido. Os bebês são ótimos para as ações que exigem um rótulo de texto. Às vezes, uma Nikon simplesmente não a corta, não está clara o suficiente. Agora, eles também são usados para chamar a atenção do usuário pelo tamanho. E isso porque eles podem ser bem grossos e, como os normais, os estendidos flutuam acima do conteúdo. Portanto, está bem claro que o usuário deve clicar nele. Agora, um bom exemplo é o botão Checkout. Claro, você pode ter um ícone para o carrinho e o lado superior direito, mas isso pode se perder quando você vê um botão de ação flutuante estendido, você não vai perder. Então, obviamente, quando você quer finalizar, não só isso, mas essa é uma experiência muito melhor. Vamos passar para a próxima categoria, botões regulares. Agora, eles vêm em vários formatos e tamanhos, mas são fixados em uma determinada posição dentro do aplicativo, como você verá daqui a pouco. Então essa é a principal diferença entre eles e seus bebês. Fab é flutuar o vout, e eles normalmente estão no lado inferior direito. Os botões clássicos podem estar absolutamente em qualquer lugar. Agora, existem cinco tipos de botões irregulares, mas você provavelmente usará apenas cerca de três. Então, está preenchido, delineado e com texto. Esta captura de tela mostra exatamente o que você precisa saber. Basicamente, você escolhe o tipo de botão com base em sua importância. Agora, nesse caso, o que a empresa quer do usuário? Qual é a ação mais valiosa? É uma consideração adicional. É por isso que o botão Preencher está aqui porque é o que mais se destaca. Isso chama sua atenção. Agora. Você pode dizer: Ei, você sabe o que, agora pode fazer a empresa ganhar mais dinheiro. Mas normalmente as pessoas adicionam vários produtos a um carrinho antes de verificar a gota. É por isso que o foco está em Adicionar consideração. Isso é o que a maioria das pessoas espera ver. Portanto, está bem claro que essas são as principais ações. É por isso que ele recebe o botão de campo. E a reação secundária agora entra no botão de contorno. Isso também é chamado de botão fantasma, porque ele não tem um corpo. Ninguém usa coisas divertidas. Agora, o terceiro tipo de botão é texto puro. Nesse caso, ele também apresenta um ícone. Faça uma pergunta. Novamente, essa ação é muito menos importante do que as outras duas. Portanto, precisa ser menos gritado , não precisa se destacar tanto. Então é assim que você pensa sobre os botões. Isso é chamado de princípio hierárquico. E, na verdade, não é nada tão complicado. Você pensa sobre o nível de importância e depois desce. Então, é um esboço preenchido e depois o texto. Agora, voltando ao guia de materiais em sua terceira forma, eu realmente não gosto dos botões Donald. Acho que é usado para os casos periféricos. Então, eu realmente não quero incomodá-lo com eles. E o último, o botão elevado, costuma ser confundido por iniciantes com um FAB estendido. Portanto, meu conselho não se concentre nesses outros para se concentrar nos três que mencionei, e você estará pronto para ir. Agora, quando desenharmos coisas, você verá que não vamos parar e nos perguntar: oh, isso está na FAB, o que é esse botão elevado? Sabe no que vamos nos concentrar? É lindo de se ver? É fácil de usar e assim por diante. Agora, no geral, esses são botões em poucas palavras. A segunda parte da equação aqui, sempre há uma classificação a ser considerada em qualquer tela. Portanto, há a ação mais provável, como adicionar ao carrinho, mas pode haver outras coisas, como mais informações ou comparar itens menos importantes, mas eles ainda estão lá. Portanto, com base nesse processo de pensamento, você pode decidir impacto que seus botões devem causar. Isso requer um pouco de análise sobre isso e a tela e as circunstâncias atuais. Mas vamos falar sobre tudo isso neste curso agora. É isso mesmo. Vamos tomar um momento e eu vou te ver em 1 s. Muito obrigado. 10. Trabalhe com texto como um profissional: Bem vindo de volta. Nos próximos minutos, discutiremos os vários aspectos dos campos em um aplicativo Android. Desde o início, devo dizer que não estou apaixonada pelos designs sugeridos no guia oficial. Acho que esses campos parecem um pouco antiquados na época, desajeitados, o suficiente. Eles atualizaram os estilos desde que gravei esta palestra, mas ainda assim a nova versão parece um pouco decepcionante na minha opinião. Agora, dito isso, vamos estudar os componentes de uma habilidade técnica. E vamos falar sobre estilo no final. Agora, qualquer campo deve ter um rótulo, um local onde o usuário possa digitar e, em seguida, um indicador que signifique seu estado ativo. Às vezes, podemos adicionar a dica ou um ícone que descreve o campo que geralmente é colocado à esquerda. Agora, outra coisa: você pode colocar um ícone no lado direito para as várias ações, como um microfone, por exemplo, para a entrada de voz ou um menu suspenso no homossexual. Agora, tudo isso requer uma altura de pelo menos 100 pixels, mas isso varia de acordo com seu estilo. O retângulo é chamado de indicador de ativação e tem dois estados, inativo com altura de dois pixels, geralmente cinza escuro e ativo. Qual é a altura dos pixels com uma cor brilhante e vívida. Agora, o rótulo em geral é exibido no local onde o usuário deve digitar. Quando o campo é tabulação, quando você clica nele, quando está ativo, o rótulo se move para cima e diminui. Então, abre espaço para o usuário digitar algumas coisas. Agora, caso haja outra, há três coisas que iluminam o rótulo, a área de dicas e o ícone de aviso no lado direito. Sempre que não há nenhum produto saudável exibido, o erro sempre é mostrado abaixo do campo. Mais do que isso, o que eles usam, os tipos nunca são destacados em vermelho com nenhuma outra cor de aviso. Agora, vamos seguir em direção ao estilo. Suas cores são essenciais porque transmitem significado. Por exemplo, se seu campo de ativação for exibido em um cinza desbotado, o usuário pode pensar que esse é um campo desativado. O mesmo se aplica ao rótulo. Portanto, você realmente precisa considerar cuidadosamente o quão leve você deseja que sua nota seja. Você pode não considerar isso um problema. Mas a maioria das galerias de design está cheia aplicativos que realmente têm muitos e muitos tons de cinza muito claro. E eu enfatizo o fato de que esses são os conceitos porque a recaída na verdade não se parece com isso. Novamente, você pode parecer legal no Dribbble ou no Behance. Você pode receber curtidas. Mas esse grau muito leve não significa que ele siga todos os padrões que temos para esse design. Agora, continuando nesse caminho, o campo de texto nunca deve parecer um botão ou banner. O pessoal do Google tenta configurar as coisas encapsulando esses campos em um retângulo, certo? Mas, novamente, eu não estou apaixonado por isso. Posso dizer honestamente que esta é provavelmente uma escolha terrível, considerando todas as coisas. É funcional, é claro, mas não é agradável de se ver. O que eu proponho é que você pesquise todas as coordenadas da web e encontre membros dianteiros bonitos que o inspirem. Por exemplo, no meu aplicativo mais recente, optei por um ângulo direto esbranquiçado que apresenta um traço um pouco mais escuro, uma mão desbotada e a etiqueta acima dela. Agora eu ainda estou brincando com isso porque esse perigo sempre presente está aqui, que pode parecer desativado. No geral. Vou brincar um pouco mais com ele, mas, novamente, não use o guia oficial se você não estiver apaixonado por ele nesse caso específico. Aqui está outro que se destacou pelos aplicativos iOS, mas eu realmente não me importo com isso. Isso parece interessante. É intuitivo. Então, por que não usá-lo, certo? Esse é o tipo de abordagem que eu quero que você tenha. Se estiver bonito, use-o. Aqui está outro, desta vez, da web. Como você pode ver, está tudo no slide, esses menores detalhes. Isso requer um olhar atento e pacientes, você projeta , você verifica em seu telefone os valores dos níveis de brilho. Você se desgasta, trabalha nisso até ficar feliz. Não há código mágico de cores que eu possa compartilhar com você. É uma questão de DNS, bom espaçamento e excelentes opções de cores. Mas o que faz a maior diferença são os contextos. Você vê que os exemplos do Google não têm alma porque não têm nenhuma identidade. Eles não fazem parte de uma imagem maior, de um aplicativo maior. Assim como nenhuma alma. Não há paixão. Você não vê nada ligado. O que vemos nas Galerias de Design são trechos de aplicativos em potencial que têm uma personalidade enorme. Quando você o decompõe. É apenas uma linha com algumas camadas de texto anexadas a ela. O que o torna especial é a atenção dos designers aos detalhes e seu respeito pela vibração geral do aplicativo, depois por essa personalidade, por toda a atmosfera, você quiser chamá-lo. Então, o que vamos fazer é criar alguns fóruns neste curso, onde abordarei neste curso, onde abordarei esse ponto em profundidade. Mas a principal lição dessa palestra é se inspirar em absolutamente todos os lugares da web. Como os formulários são o ponto de conversão e não existem sem nenhum texto, os rendimentos, o registro, a finalização da compra e outros pontos essenciais em qualquer aplicativo dependem muito dos campos de texto. Muito satisfeito, reserve um tempo com eles e torne-os parte integrante do seu aplicativo. Então, vamos praticar. Reserve um momento e crie três telas diferentes com um tipo diferente de design de campo de texto. Novamente, não há contexto aqui. Você tem que fazer isso. Eu gostaria de ver pelo menos três campos por tela. O importante é que você experimente diferentes tamanhos, arranjos, layouts e cores. Se você já assistiu meus cursos, sabe que sou fã de certos códigos de cores. Mas para este exercício eu não vou te dar nada. Experimente tudo sozinho. Quando terminar, publique seu trabalho na seção de comentários e eu vou analisá-los. Muito obrigado e estou ansioso por isso. 11. Introdução ao Projeto: Olá e bem-vindo. Na próxima seção, vamos criar um aplicativo de entrega de comida que silenciará o projeto. O objetivo é se familiarizar com todos os componentes de um aplicativo, usar o Adobe XD de forma eficaz e criar algo que tenha uma ótima aparência. Assista a cada vídeo duas vezes. Uma vez para entender o que está acontecendo , uma segunda vez para trabalhar junto pausando quantas vezes você precisar. Ok, à medida que examinaremos cada tela, mostrarei meu processo de pensamento e como tomo decisões de design rapidamente. Eles estão cientes de que os princípios que eu aplico exigem uma análise aprofundada. Mas decidi falar sobre os princípios um pouco mais tarde. No momento, quero que você trabalhe o máximo possível e deixe a maior parte da teoria para depois. Você pode perguntar se há muitas coisas que eu preciso aprender. Por que estamos entrando em um projeto completo de design de aplicativos? E isso porque eu quero que você tenha experiência realmente trabalhando no Adobe XD e projetando. É por isso que, ao pular direto, uma coisa é ler sobre as coisas. Outra coisa é realmente praticar. Continuando, eu também quero que você crie layouts padrão porque é isso que você vai encontrar em seus projetos do dia a dia. Agora, se você olhar para as mãos do drible, verá layouts e animações extremamente criativos e todos os tipos de efeitos. Mas a maioria dos clientes não gasta uma fortuna no desenvolvimento de aplicativos. Assim, o que vamos criar é baseado na minha experiência trabalhar com clientes reais e programadores reais 24 horas por dia. Isso significa aplicar as melhores práticas e usar layouts razoavelmente padronizados. Você precisa estar ciente de que cada decisão de design pode aumentar ou diminuir os custos de desenvolvimento. Portanto, embora algo pareça incrível no Dribble, há uma boa chance de que os desenvolvedores tenham trabalhar muito para que isso aconteça. Obviamente, nem todo mundo tem centenas de milhares de dólares para gastar em animações sofisticadas. Novamente, já percorri esse caminho muitas vezes. Também estive na sede do cliente, onde tive que aprovar pagamentos adicionais porque a versão final exige mais trabalho do que o previsto inicialmente. Então, eu estive em ambos os lados como designer e como cliente. Vou trazer todo esse conhecimento para o curso e vou ensinar você a escolher suas batalhas com cuidado. Por enquanto, fique curioso e faça o possível para terminar o capítulo inteiro. Antes de irmos, tenho que pedir sua compreensão sobre certas partes que serão aceleradas ou ignoradas. Qualquer projeto decente de design de aplicativo levará algumas semanas, quando eu estiver tentando reduzi-lo à sua essência. Assim, você obtém uma ótima experiência de aprendizado em tempo hábil. Isso significa que eu tenho que editar certas coisas. Coisas como encontrar ícones, pesquisar no Google outras coisas que consomem tempo. Isso sairia do caminho? Vamos nos divertir com nosso primeiro projeto sério. Vamos fazer isso. 12. Compreender os resumos e os desejos do cliente: Bem vindo de volta. Este é nosso primeiro projeto de aplicativo sério. 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 de cerca de oito em dez. Não é incrível, mas certamente não são alguns esboços em um guardanapo. É o dobro do que deveria ser. Em uma parte, temos o wireframe, que 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 esses 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, outros $1.000. Ok. Em anexo ao curso, você encontra o link para o wireframe, o logotipo e a documentação. Agora, esse negócio é chamado de abreviação Live para 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 cuida da entrega real. Agora, essa área do resumo é muito comum. É a essência do projeto e é um bom lugar para começar 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 que são ativas com renda disponível. Ambos os sexos, provavelmente solteiros, não casados, trabalho de escritório, improvável, alta gerência. Temos dois 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 de 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, obteremos 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 a mesma coisa 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 que é bom. 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 ou o gerente de projeto ou o proprietário da empresa, quem está dirigindo o programa, pensou em coisas a 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 sinceros e desafiar certas decisões? Bem, depende de quão bem pensado seja 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. Seguindo em frente caso o usuário esteja logado e o local não esteja preenchido, apenas 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 pelos cérebros da operação. Os sistemas de classificação usam a abordagem padrão de cinco estrelas, mas algumas das maiores empresas do planeta mudaram para um sistema de aversão a gosto. Isso inclui YouTube, Netflix e, em algumas partes do mundo, o 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, prazo de entrega do tipo de comida. 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 sabemos o que precisa ser incluído e o que é opcional. Temos alguns outros pedaços aqui e ali, mas vamos passar para os wireframes. Devemos estar cientes de que o número de telas mostradas 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 vai encontrá-los se os tiver. Ótimas notícias, mas nesse caso, acho que não as temos. Agora, voltando a isso. As coisas estão muito bem definidas. Então, acho que vamos nos divertir com isso. Simplificado de nomes. Eles sã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 sobre algo, inclua o número. Essa é a melhor abordagem. Agora, voltando a isso. Vejo que precisamos incluir o menu esquerdo e o 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 de design, 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 ponto da fase de prototipagem, Em suma, podemos iniciar o processo de design verificando a concorrência nesse nicho, temos para procurar inspiração. Temos que ver o que as outras pessoas estão fazendo. Então, vamos continuar no próximo clipe. 13. Analise os concorrentes do aplicativo – Parte 1: Bem vindo de volta. Neste ponto, o resumo não deveria ser um mistério. Se você não atingiu a largura, pause o vídeo e analise-o pois 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, entrega de alimentos que são aplicativos mais do que suficientes para analisarmos. Outro, faça com que entenda melhor os requisitos do projeto e obtenha alguma inspiração sobre o estilo geral. Observe que esses aplicativos são baseados na 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 programação inclui o fígado, Food Panda, the Live, que é um aplicativo que tem exatamente o mesmo nome, mas é pura coincidência. Para levar 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 transmissão para que possamos tirá-la do caminho. Agora, a tela inicial está uma grande bagunça. Temos amarelo bancário, 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. Ao pesquisar, mesmo que não entenda meu idioma, o 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 textos, oficialmente chamadas de sequências por códons. Em vez disso, essa é uma imagem que está sendo estendida. Isso é uma prática ruim e nem um pouco boa. Ok, agora vamos mudar para a página do anúncio. 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á errado. A topografia é modesta, as fontes são chatas. Não há diversidade nessa região. Não há nenhuma hierarquia específica que seja facilmente identificada. No total, quatro em dez. E estou sendo generoso. Quando entramos no restaurante, podemos ver que as guias têm esses divisores 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, seja ela qual for. 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 mudar rapidamente as pinceladas. 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 do Windows XP Times. Agora, 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, adivinhe 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, nada acontece. Não tem um interior do estado, então não tenho certeza se realmente funciona. Mas, seguindo em frente, o checkout também é ridículo. Tudo é reunido aleatoriamente. Acho que eles queriam centralizar essas camadas de textos, 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 continuar com a takeaway.com, que é uma empresa que compra aplicativos de entrega à torto e à direita, não faz nada nos bloqueando. Como no caso de vidas em que você não conseguia ver nada a menos que colocasse um endereço com um S para a localização, para a permissão do GPS. Então, o aplicativo basicamente quer nossa localização e imediatamente uma lista de restaurantes aparecerá. Agora, eu pessoalmente pedi muitos alimentos, então, na verdade, sou um usuário bastante frequente desses aplicativos. Takeaway não é uma delas. Eu não gosto e deixe-me dizer o porquê. Tudo é 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 feliz trem para. Você pode me dizer qual desses dois restaurantes tem uma classificação mais alta? Porque se você já usou o booking.com, acho que sabe, há uma grande diferença na qualidade. Entre um hotel de 8,0 e um hotel de 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 no momento. Eu amei a laranja. Ele realmente brilha e tem um bom zinco para adicionar. É 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 modo de captação. 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 optaram por esse tom estranho para a cor do call to action. Isso é muito estranho. Agora, há um sistema de guias 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 está realmente sem brilho. Muitas divisórias, muito cinza, pouca atenção aos detalhes em relação à tipografia. Mas então vamos fazer uma pausa no lado do design. Isso seria um 6/7 de dez no meu livro, o problema, como eu disse no começo, é 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ão de ação flutuante, então ele simplesmente passa o mouse. Isso é bem 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 importavam nem um pouco. E parece que, no geral, o aplicativo em minhas mãos, parece desajeitado. É difícil colocar em palavras, mas simplesmente não parece certo. No geral, esse é um design AB muito melhor do que o anterior ao vivo. Mas eu não acho que eu classificaria isso como mais do que cinco em dez, talvez seis se eu fosse super generoso. Agora, vamos ao menu de ajuda, que tem uma abordagem totalmente diferente. Primeiro, adorei o processo de integração, ou seja, as primeiras telas 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 listagem é muito fácil de ver. Mas há um problema com relação à funcionalidade. Você não tem como classificar esses restaurantes. Você tem que inserir 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. Em resumo, muitos cliques, em que alguns aplicativos querem que você chegue à fase de checkout e 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, design adorável. Este é um oito e meu livro 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 estar 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 muita certeza do que está acontecendo com esse botão. Depois de alguma investigação, acredito que isso me permite fazer um grupo pelo 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. Ele se destaca demais. O sistema dapp parece bom o suficiente e os ícones da ActionBar também são interessantes. É difícil classificar em algumas partes, é sete, talvez até mesmo 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 14. 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 que é 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 no topo dessa linha diagonal. Também aprecio 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 uma questão de identidade visual e de 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. Acho que está muito bem executado. Temos o título em negrito, várias etiquetas em uma cor menor e desbotada. O tempo 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 listagem é essa. Sabe, se for o caso, 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 tenha quase a mesma quantidade de elementos. Agora, voltando ao fígado, porém, esse aplicativo parece não 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, chegamos aos 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 caber cerca de 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 são definitivamente a melhor lacuna 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 interessante é o esquema de cores, branco e Thiel, nada mais. O conteúdo deixou o brilho, provavelmente porque as fotos são bastante pesadas em 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 boas 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 lisonjeiras. Novamente, você pode ver ao vivo isso. A diferença é noite e dia. Voltando à tela inicial, temos um botão de ação flutuante estendido que ajuda você a preenchê-lo. Isso é bem executado, mas depois de tocar 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. Recebemos lindos ícones que estão em sintonia com os aplicativos do Vibe. Belas imagens por baixo com ótimo contraste para o texto. Botão claro de apelo à ação. 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á 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 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 pesadas com esse golpe, mas ainda assim funcionam bem. No geral, o aplicativo está lindo e isso porque seus elementos estão bem espaçados. Suas fontes são legais e interessantes e o conteúdo é deixado para brilhar. Um forte nove de dez. Vamos passar para o Food Panda para ver outra protuberância sobre o mesmo assunto. Aqui, reconheço imediatamente o mesmo estilo colorido, e isso é usado para chamar a atenção do usuário. Se você puder tocá-lo, então é uma barra rosa vermelha. Gosto desse estilo porque guia o usuário sem fazê-lo pensar. A primeira impressão é que este é o aplicativo mais bem projetado do lote, 9,5 em 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, vamos nos concentrar no anúncio. Há mais coisas acontecendo embaixo da foto. Então, isso parece um pouco mais ocupado do que o fígado para as fontes usadas, ok, mas elas não tinham aquele nó especial que as diferenciava. Vamos voltar rapidamente ao fígado e verificar o prazo de entrega. Observe como esses números se destacam, especialmente aqueles. Idealmente, esse é o tipo de personalidade que procuro nos meus tipos de letra. 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 é um elemento básico de como isso deve ser feito. É bem definido, tem uma hierarquia adequada, bem espaçado. Se há uma coisa que eu acrescentaria é o fato de que eu não gostaria que o ícone de pesquisa estivesse alinhado à esquerda com o menu de hambúrguer. Isso o teria tornado 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 guias colocadas embaixo 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 vai ser um problema para a maioria dos restaurantes. Quando as outras antenas aparecem em miniatura. Outra coisa, porém, pode-se argumentar que isso é básico para o segundo plano. 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 outros 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 fato é que eu poderia continuar facilmente, mas quero que você explore alguns desses aplicativos sozinho 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 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 de restaurantes. 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 muitas capturas de tela e coloque-as lado a lado para que você possa ir e voltar facilmente. Ok, vamos continuar. 15. Defina o layout para as duas primeiras telas: 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 iniciar o Adobe XD. tamanho personalizado é bom. As configurações que vou usar são baseadas no material design 2.3. Agora, para manter as coisas simples, escolha 720 para a largura e 15, 24 para a altura. Agora, como estou conseguindo esses números? Estou dobrando os valores do antigo Samsung Galaxy S. Então. Agora, por que estou dobrando? Então, ficará melhor quando analisarmos o design. Assim, podemos ver tudo de forma bonita e nítida sem usar óculos. Essa é a única razão pela qual estamos dobrando para que pareça bonita. Isso não importa para o código de lá. Ele não se importa. O processo de codificação não é afetado de forma alguma. Ok, vamos ativar uma rolagem vertical. E a janela de visualização significa simplesmente o ponto de corte, o ponto em que você precisa rolar para baixo para ver mais conteúdo. Inicialmente, você obterá 15, 20 pixels e, em seguida, o que estiver embaixo exigirá o pergaminho. Ok, ótimo. Em seguida, tenho dois monitores para exibir e vou examinar constantemente o wireframe e a documentação do outro. Eu não vou mencionar isso toda vez. Se você não tiver uma segunda tela, arraste o wireframe para dentro do programa e diminua-o um pouco. Ok, agora qual é o objetivo? Bem, queremos definir nosso layout, a base do projeto sem considerações de design. Então, sem cores, sem fontes, nada apenas de coisas básicas. Queremos retângulos e camadas de texto em sua forma mais pura. Depois de termos uma base de fundação. Depois disso, temos algumas telas. Em seguida, começaremos a experimentar várias cores, fontes e outros enfeites. Ok, agora vamos começar com a primeira prancheta, se precisarmos do logotipo do aplicativo, está anexada ao curso. Agora, o ícone em si não está estilizado de forma alguma, nem tem nenhum texto. Isso nos ajudará a mantê-lo alinhado com o restante do design. Isso é ideal. Ok, vou centralizá-lo e colocá-lo em nenhuma posição específica na parte superior da tela. Algo sobre o deles. Em seguida, adicionarei o campo de localização a um retângulo. Isso deve ter cerca de 600 pixels largura e cerca de 80 pixels de altura. Eu gosto de usar o painel de propriedades para isso. Lembre-se de w para a largura, h para a altura. Esses não são valores precisos porque isso ocorre mais tarde na fase de estilização. São apenas números aproximados. Por favor, esteja ciente de algo. Sempre vou centralizar tudo no quadro de arte, nessas ferramentas. Agora, eu não quero soar como um disco quebrado, então não vou mencioná-lo absolutamente. Toda vez. Além disso, não vou te dizer quando renomear ou quando um grupo camadas que recebe isso é uma necessidade absoluta. Você tem que ser organizado. Faça do retângulo um cinza muito claro. E isso porque vamos adicionar alguns textos e queremos um ótimo contraste. Vamos escrever algo como uma entrevista ou um local, algo parecido. Agora, não adicionaremos um ícone neste estágio, mas podemos escrever GPS para nos lembrar de que precisaremos de um aqui. Também podemos duplicar essas camadas e criar um botão Enviar. Você pode fazer uma cópia da maneira que quiser. Gosto de manter pressionada a tecla Alt, pressiona a tecla Option no Mac e, em seguida, arrastar uma cópia dessa forma. Se você não gosta de fazer isso, você também pode usar control the gays, nice. Vamos mudar o texto. Reduza o botão para cerca de 250 pixels. E, claro, centralize todo o texto dentro do botão. E então todo o elemento com a tela, com nosso quadro. Lembre-se de continuar sua segunda visualização fazendo uma pausa quantas vezes for necessário. Agora temos mais duas coisas a acrescentar. Pule esta etapa e crie um login com barra de conta. A primeira pode ser uma camada de texto porque não é importante o suficiente. Nós realmente não queremos que as pessoas o usem. O outro deveria ser um botão. Então, vamos adicioná-lo em qualquer lugar próximo à parte inferior. Digamos que crie uma conta slash login agora. Ok, bom. Lembre-se de clicar Escape quando quiser terminar a edição. Ok, vamos redimensioná-lo para cerca de 500 pixels, então dobre o tamanho do botão Enviar. Novamente, esses não são valores finais, mas são um bom ponto de partida. Do resumo. Eu entendo que a criação da conta realmente acontece em uma tela diferente. Então, na verdade, isso é tudo aqui. Mas o que isso significa é que isso nos dá muita liberdade em nosso design. O que temos que deixar claro sobre consistência. Essa é uma boa chance de falar sobre isso. Por exemplo, podemos criar os botões e os campos de texto. Digamos que bem acima dos 100 pixels de altura, digamos um terço do dia, certo? E podemos explicar essa decisão com bastante facilidade. É por uma questão de usabilidade, certo? Quanto maior a carga, menores são as chances das pernas de Minsk ou das abas acidentais. Faz sentido, certo? Tenha botões grandes. Dê uma olhada nesse verde aqui. Neste, temos quatro textos, rendimentos mais um botão. Portanto, o tamanho que dissemos anteriormente de um e trinta cria um grande problema de espaçamento. E, obviamente, não é bom usar tamanhos diferentes em telas diferentes. Porque, novamente, consistência, precisamos tomar nossas decisões de design com base em todo o aplicativo como um todo, não como elementos individuais. É por isso que estamos criando telas em lotes. E pensando no tamanho de todo o design, de todo o aplicativo. Então, um terço D não funcionaria. 16. Crie a tela mais importante no aplicativo: Bem vindo de volta. Vamos passar para a próxima, fazendo uma cópia e removendo tudo. Agora, novamente, vamos voltar ao básico. Essa é uma boa chance de lembrar nossas proporções. A barra de status deve ser de 720 por 48. Vamos deixá-lo em branco, retangular qualquer cor aleatória e posicioná-lo corretamente. O que eu gosto de fazer é alinhá-lo por cima. Em seguida, use a esquerda para alinhar nosso portão. Vamos arrastar uma cópia para a barra de ação. E isso precisa ser redimensionado para 112 pixels. 112 pixels. É aqui que o painel de propriedades compensa, muda de cor para algo muito diferente. Talvez um cinza muito claro. Caso você não goste dos dois termos. A propósito, você pode selecionar vários retângulos de uma vez, assim, e simplesmente desativá-los assim. Agora, vamos adicionar algumas camadas de texto. Precisamos filtrar e pesquisar por cidades. O primeiro é para o lado esquerdo, enquanto os outros dois para o lado direito, sugiro que você use shift ao criar cópias pois isso ajuda a manter as camadas de texto na mesma linha. Basicamente, Alt e Shift ao arrastar. Incrível. Ok, agora o triângulo suspenso pode ser criado usando a ferramenta de polígono. Mantenha pressionada a tecla Shift ao arrastar, para obter um triângulo perfeito. Verifique o lado direito e defina o número de coordenadas para TV. Esses são os valores padrão. Então, estou pronto para ir aqui. Coloque o ponto para baixo. Talvez seja necessário girar para mudar cor para absolutamente qualquer coisa que você quiser, provavelmente preto. Uma coisa a observar é que algumas pessoas preferem usar a ferramenta de caneta para algo assim. Outras pessoas gostam de baixar ícones. A palavra-chave no momento é velocidade. Então faça o que quiser, apenas faça rápido. 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 que terá 600 por 400 pixels, pois isso cobrirá a maior parte da largura da tela. Além disso, teremos uma proporção decente para começar. O tamanho real será dito mais tarde, mas esse é um bom ponto de partida. Então, um pouco largo e bastante curto. Mude para a ferramenta de movimentação e posicione-a logo abaixo da barra de ação. Mesmo que estejamos correndo, vou roubar o centro. Está tudo bem. Prática. Agora gate, vamos adicionar um texto fictício. O título, vamos usar o paraíso das sobremesas, bem ao lado. Vamos escrever algo como tempo de entrega de 30 minutos. Eu sou, a categoria é dupla. Um para o tipo de alimento e outro para o tipo de cosseno. Agora, tudo bem. Seja o que for isso, o resumo Isso está me dizendo isso deveria ser o deserto e a vida internacional. Obrigado novamente, realmente não importa o que colocamos. Só queremos fornecer algumas informações. Então, temos algo para analisar, algo com que trabalhar. A classificação. Vamos com 92 por cento dos 24 votos. Isso abrange todos os elementos acordo com o wireframe e o resumo. Ok, agora vamos selecionar absolutamente tudo assim e ver se podemos encaixar duas delas. Lembre-se de que esse é um requisito importante. Sim, isso funciona. Mas podemos acomodar dois restaurantes inteiros. Novamente, isso é apenas um rascunho. Nada sobre isso, há algo preciso. Então, temos que tomá-lo com um grão de sal. Mas vamos resumir. Até agora, recriamos as duas telas do wireframe com o objetivo de ter algo com que trabalhar. Nas próximas palestras, falamos sobre estar cientes do impacto de nossas decisões. Especificamente, como criar um campo de texto ou o botão da criança afetará todo o aplicativo e poderá causar problemas. Nós paramos com isso com força. Te vejo em um segundo após o intervalo. Obrigada. 17. Crie a tela de detalhes do restaurante: Bem vindo de volta. Vamos passar para a tela de detalhes do restaurante onde todos os pratos estão listados. Então, sem mais delongas, vamos começar a trabalhar. Vamos copiá-los, mas faça isso, e vamos começar com uma abordagem de cima para baixo, substituindo a cidade por qualquer nome de restaurante aleatório. Digamos que a entrega de pizza seja madura . Isso soa italiano o suficiente, certo? O menu suspenso e o filtro devem ser removidos. Mas vamos manter o último e renomeá-lo. Isso deve dizer Informações. E esse será um ícone que nos mostrará o endereço do restaurante, a tela 15 e depois a tela de visualizações 16. Se olharmos para o wireframe, podemos ver algumas guias, mas não está claro se elas são fixas ou roláveis. Vamos começar com a versão fixa. Acho que é mais provável. Primeiro, copie a barra de ação e reduza seu tamanho para 96 pixels. Claro, mude a cor para que você possa ver o que está acontecendo. De momento, volte ao tamanho. 96 é grande o suficiente do ponto de vista da usabilidade, você pode realmente usá-lo, mas pequeno o suficiente para não ocupar muito espaço. Esse também é o valor recomendado no guia oficial do Google. Remova os dois grupos de anúncios caso ainda não tenha feito isso. No texto, vou usar café da manhã, almoço e jantar como meus itens principais. Isso significa que um design de três abas, portanto, um retângulo de 40 de largura será necessário para o ato do item. Então, vamos pegar a ferramenta de retângulo, clicar e arrastar qualquer forma alterar seu tamanho para 40 por quatro pixels. Isso pode ficar em branco por enquanto, mas remova o traçado. Isso é algo que eu absolutamente não gosto no Adobe XD. O preenchimento é sempre branco e há um quadro aplicado por padrão. Isso não é o ideal. De qualquer forma, certifique-se de colocá-lo corretamente na borda inferior do plano de fundo da guia. Essa é uma etapa opcional, mas qualquer designer experiente fará o café da manhã centralizado com essa linha para garantir que essa seja claramente a guia ativa. Obviamente, também centralizou os textos na vertical. E depois faça o mesmo no almoço. Apenas certifique-se de entender esse princípio. Você seleciona duas camadas, o texto e o retângulo e, em seguida, usa as ferramentas de alinhamento. Mas e o jantar? Verticalmente, isso não é um problema. Desenhe uma caixa para selecionar os dois e use o comando adequado. Ok, ótimo, mas e horizontalmente? Bem, aqui está a faixa. Selecione a linha preta e escreva a linha em. Se apenas uma camada for selecionada, os mundos de alinhamento considerarão a tela, o quadro de arte, como o segundo elemento. Então, uma linha à direita faz com que a linha toque no lado direito. Agora, mantenha pressionada a tecla Shift e clique em jantar para selecionar isso. Centralize-o horizontalmente e pronto. Bem, na verdade, há mais uma etapa. Temos que colocar uma linha preta no lado esquerdo, desmarcar clicando em qualquer lugar. Em seguida, selecione isso e deixe a linha em. Incrível. Agora, meu conselho é que você trabalhe com o zoom para poder capturar facilmente as camadas corretas. E assim, o sistema de guias é, então, vamos dar uma olhada no wireframe mais uma vez, lembre-se esse não é o fim de tudo para o nosso design. Podemos experimentar vários looks se tivermos alguma ideia. Mas, por enquanto, acho que vamos manter simples e seguir o wireframe, ou seja, um layout de um cartão. se não estivermos satisfeitos com um layout de um cartão, No entanto, se não estivermos satisfeitos com um layout de um cartão, podemos tentar uma abordagem diferente. Eu realmente não gostei do design de duas colunas que vimos no vídeo anterior. Temos que criar um suporte de imagem para cada prato, uma miniatura. Acho que isso precisa ter uma forma um pouco quadrada, provavelmente um pouco mais larga. Então, vamos começar com um retângulo com um tamanho de, digamos, dois a cinco por um AD. Como eu disse, não é exatamente quadrado, mas não muito alto porque vimos que não funciona muito bem. Coloque-o a 30 pixels das pinceladas. Lembre-se de manter pressionada a tecla Alt, que é a tecla Option no Mac. Em seguida, use as teclas de seta com ou sem shift would shift does, isso ajuda você a mover a camada e incrementos de dez pixels. Isso está parecendo bom. Ok, por enquanto, vamos voltar para o título e a descrição. Eu tenho algo preparado em um ODE bad, o título do nosso GU, tudo por enquanto. Agora, é o seguinte. Eu poderia ter usado, Lorem Ipsum, mas acho que um título real ajuda muito. A descrição deve ser uma camada de texto de parágrafo caso você queira alterar rapidamente seu conteúdo. Então, isso significa que você precisa clicar e arrastar. Agora, localizar as linhas deve ser suficiente, embora possamos descartá-la para fazer isso apenas no caso de não conseguirmos exibir produtos suficientes na tela sem rolar. Isso é. Ok. Agora, a propósito, caso você queira um texto fictício rápido, eu recomendo lipson.com. Este é um ótimo site para texto falso, conteúdo falso em suma. se apresse e certifique-se não apressar essas partes essenciais. Essa é a base do nosso design. Então, se você tiver uma ideia fixa e continuar com ela, você pode se colocar em um canto. Então, novamente, seja flexível, por exemplo, o tamanho das miniaturas. Não tenho ideia se isso é bom o suficiente. Esse foi um ponto em que a competição falhou ou, ao contrário, eles brilharam. Voltando ao nosso anúncio, temos que adicionar o preço, digamos, 14 dólares. Essa será a terceira linha. E na próxima molhada, vamos colocar o peso do produto, o que, pelo que entendi, é muito importante. Tudo isso é do resumo, aliás, aqui, Vamos escrever 350 g. Finalmente, precisaremos de um texto de Adicionar ao carrinho. Embora eu tenha certeza de que isso será um ícone. Mas, por enquanto, em vez de me dar um momento para resolver tudo isso, eu gosto de alinhar tudo, mesmo que eles se movam quando começarmos a brincar com o tamanho e a fonte. Mas, novamente, isso é algo que eu absolutamente quero fazer porque me faz sentir melhor. Idealmente, queremos um caminho imaginário para o usuário ver a miniatura, o título, o preço, o peso do produto e, em seguida, o botão Adicionar ao carrinho. Tudo tem que fluir. Então, mais tarde, temos que fazer com que isso aconteça com o tamanho e a cor para basicamente ajudar a avançar. Agora, mesmo que as coisas estejam bem agrupadas, vamos encerrar isso com uma divisória. Use a linha para todas as teclas de atalho L e defina-a para talvez dois pixels, para que seja mais fácil selecionar um pixel. As linhas são incrivelmente difíceis de entender. Agora, por que estamos usando um divisor? Porque em um espaço apertado, isso nos ajuda a separar nosso conteúdo. Sem isso, teríamos que usar muito mais espaço vazio. E queremos evitar isso. Aliás, ele deve ser colocado a cerca de 30 pixels da foto, só para que tenhamos aquela linda simetria. Agora, para finalizar, agrupe tudo porque queremos fazer algumas cópias. Vamos preencher a tela inteira com clones. E vamos ver onde estamos. O que eu adoro é essa excelente opção chamada Repeat Grid, que pode realmente acelerar as coisas, mas não vamos usá-la. Eu quero que você ganhe velocidade à moda antiga. Eu quero que você faça algum trabalho manual. Depois que o último for colocado, vamos selecionar todos eles e usar este comando, distribuir agora que tudo está bem alinhado e essa é a forma do esboço. Vamos fazer uma pausa por um momento. Obrigada. 18. Como fazer ótimas opções de design: Bem vindo de volta. Eu gostaria de fazer uma pausa para que possamos discutir um ponto importante. Como devemos tomar decisões importantes de design neste projeto específico? Optamos pela imagem de fundo em tela cheia na primeira prancheta? Ou mantemos isso simples? E se mantivermos as coisas simples, ficaremos brancos ou usaremos um padrão sutil relacionado à comida? Se vamos usar um fundo branco, como isso afetará a próxima tela? Vamos usar branco na barra de ação? Isso significa que também precisaremos usar branco na barra de status. Então, como você pode ver, quando a decisão afeta todo o resto. E isso porque um aplicativo precisa ser coeso, tudo precisa funcionar em conjunto. Então a questão permanece: como devemos decidir? O esquema de cores também não está definido. Então, esse é outro fator. Escolhemos o verde para sugerir frescor? Azul porque é calmante e seguro. Vermelho ou laranja porque está quente. Há muitas perguntas como essa, e acredito que é por isso que muitos designers passaram horas sem fazer nenhum progresso. Aqui está minha resposta. Você faz todos eles. Sim. Você ouviu isso, certo? Você cria todas as suas ideias. Você os coloca lado a lado. E é assim que você não só melhora, mas também escolhe um estilo para todo o aplicativo. Isso é chamado de processo iterativo, em que você tem uma ideia que pode ter, arrasta uma nova tela e experimenta outra ideia, outra ideia e outra. Deixe-me mostrar um exemplo. Tive que criar uma tela de agendamento onde tínhamos alguns compromissos, bem como uma nova que precisava ser mostrada para aprovação agora. Ok. O novo tinha dois períodos indisponíveis ajustáveis , que eram de cerca de 15 minutos cada. Ok. Agora, isso é muito difícil de lidar. A programação variava das 6h às 12h , então seriam muitas horas. Naturalmente, eu queria colocar o máximo possível em uma única tela para minimizar a rolagem. Esse era o meu objetivo. Mas eu também precisava ter espaço suficiente para tornar a tela utilizável por pessoas comuns, não apenas por franco-atiradores de elite ou pontas. Precisávamos ter botões grandes. Então, isso foi um desafio. Então, o que eu fiz? Comecei exatamente como mostrei na palestra anterior. Eu adicionei todos os elementos lá, a forma mais simples. E então eu comecei a trabalhar, comecei a experimentar. Entrei jogando com várias distâncias entre cada linha. Eu constantemente, eles visualizavam cada versão no meu telefone e eu progredia constantemente com cada versão. Próximo rei, a essência do design, as verdadeiras bolhas de compromissos. E eu quero te mostrar como é essa palavra aqui. Eu tentei mostrar a hora dentro do retângulo , bem como algum texto que descreve que estava lá. Então eu ensinei que o vermelho é um pouco demais, então tentei limpá-lo um pouco. Assim, deixei uma única linha vermelha e adicionei o padrão sutil que marca essa área. Agora, isso era um pouco melhor, mas não muito. Em seguida, criei outra versão, outra variação, em que não há áreas sobrepostas apenas para ter uma ideia melhor de como esse design se aplica em várias circunstâncias. Em seguida, identifico o problema. O verde que usei para um novo compromisso é o mesmo verde do botão de apelo à ação. Então eu decidi mudar isso. Isso ficou roxo. Em seguida, adicionei um botão Editar para garantir que seja claramente editável. Ok, mas então eu disse, Legal, vamos tentar outros estilos. Isso é o que eu pensei. Então o que eu fiz foi arredondar o retângulo completamente e depois mantive a única linha vermelha. Em seguida, eu o acertei e o deixei correr de ponta a ponta. Eu também deixei cair a linha vermelha e eles a substituíram por esse símbolo. As cores estavam um pouco contraditórias, então fiz outra cópia e mudei para roxo. Também fiz com que tocasse no retângulo, um detalhe bem pequeno, mas estava tudo sobre a mesa. Ok. Isolado. Isso parece muito bom. Mas e quando for próximo a outro compromisso? Essa foi a próxima coisa em minha mente. Então eu criei uma nova tela para esse propósito específico. E assim por diante, você pode ver vários outros estojos, cores, esquemas, símbolos e outros enfeites. Agora, o intestino é curto. No final, decidi usar esse design. Um grande salto de onde eu comecei. Isso é o que quero dizer com iteração iterativa do processo. Iterativo. Você tem uma ideia, a cria o mais rápido possível e depois passa para o próximo conceito. Você cria essa nova versão ao lado da original e as compara. Você distribui várias ideias até ficar vazio. Você tenta melhorar cada versão, mas também pode misturar e combinar elementos de ideias diferentes. Basicamente, repita até ficar feliz. Às vezes, talvez demore meia hora para aparecer na tela. Às vezes, você pode levar dias. Você precisa fazer pausas constantes , sem olhar para seus designs. Então você volta e verifica novamente. Cada variação aproxima você da melhor versão que você é capaz de desenhar. Então, se você chama essas iterações de variações, versões ou qualquer outra coisa, a ideia permanece, você tem que tirar as ideias da sua mente e colocá-las no Canvas. Essa é a minha mentalidade em qualquer projeto. 19. Crie versões diferentes para a primeira tela: Bem vindo de volta. É hora de começar a trabalhar sem o aplicativo de entrega de comida mais uma vez, agora temos algumas telas que aguardam atenção. Vamos começar com a tela de localização. E a primeira ideia que quero experimentar é a imagem de fundo em tela cheia, que é uma escolha muito popular nesse nicho. Para encontrar fotos excelentes e totalmente gratuitas. Use unsplash.com. Se o projeto tiver um orçamento decente, você também pode usar o Adobe Stock, mas vamos começar de graça. Aqui. Você provavelmente vai procurar a comida e vamos baixar tudo o que são faíscas e entanto, confiar em não mais do que dez imagens. Idealmente, uma imagem de vista superior provavelmente terá a melhor aparência. Mas vamos manter a mente aberta sobre isso. Quando eu ver algo interessante, vou clicar no botão Download. Agora, o processo é bem simples. Escolha várias fotos e arraste-as para o Adobe XD. Eu já selecionei alguns, mas prometo que os escolhi exatamente como eu disse. Eu os renomeei de 1 a 6 para que você possa acompanhar facilmente. Aqui está a coisa. Antes de adicioná-los, vamos adicionar um retângulo do tamanho da prancheta. Dessa forma, a foto será redimensionada automaticamente. Isso é muito útil. Então, arraste um retângulo e foque no painel de propriedades. Aqui. Vamos mudar seu tamanho para 720 por 15, 20. Ok, agora, o principal é mudar o preenchimento para algo escuro e desativar a borda. Agora k. Finalmente, o retângulo não deve estar acima de todas as outras camadas. Então vá até o painel de camadas, clique e arraste-o para baixo desse jeito. Ok, incrível. Agora estamos prontos para arrastar nossas fotos. É aqui que a mágica começa a acontecer. Agora estamos procurando uma imagem interessante que ofereça um bom contraste para o logotipo e todas as outras ações que estão disponíveis nesta tela. O número um mostra vários pratos de espaguete e algumas taças de vinho. Portanto, está alinhado com o aplicativo. Faz sentido. Agora, a primeira pergunta é: o logotipo seria branco ou de cor sólida? Se escolhermos a primeira opção, teremos que tornar a imagem um pouco mais escura. Se a colocarmos na cor sólida, o fundo precisa ser o mais simples possível. Então, vamos ver o que é o quê. Primeiro, vamos adicionar outro retângulo que seja preto puro, exatamente do mesmo tamanho. Ok, agora, para a opacidade, 50 por cento também deve nos dar um ótimo contraste. Muito bom, muito bom. Agora lembre-se de que o objetivo é testar as coisas. Não é uma decisão final. Ok, agora, vamos deixar o logotipo branco. A propósito, isso não é um PNG, é um SVG. Resumindo, isso significa que podemos redimensioná-lo sem perder a qualidade. Além disso, podemos mudar sua cor usando o preenchimento. Incrível. Se fosse um PNG, podemos desfazer tudo isso. Mas isso está parecendo muito bom. E uma coisa sobre logotipos que eles não precisam bater na sua cara, como um saco de Brex. Não o torne enorme. Pense no que o liberal fez. Embora na tela inicial do anúncio, eles usam a versão mini do logotipo. Ok, voltando a esse design, um fundo escuro faz sentido, especialmente porque o campo de texto provavelmente será branco. Então, vamos fazer isso acontecer. Vamos aumentar o raio coordenado dos retângulos para cinco pixels. Cantos quadrados. Não pareça tão bom assim. Agora, para os botões, vamos fazer o mesmo. Mas vamos mudar a cor. Vamos transformá-los em verde brilhante apenas para ver como seria uma chamada à ação normal. se apresse e tente cortar alguns cantos amostrando cores ou usando o painel de propriedades em várias camadas ao mesmo tempo. Agora, OK, coisas boas. Por favor, torne todas essas camadas de texto brancas. E não se esqueça de pular essa etapa. Está lá, mas você pode não vê-lo muito bem. Não, eu mude sua cor, sua posição, ou talvez ambas. Acho que na parte inferior da tela vai ficar um pouco melhor, certo? Não podemos julgar esse look logo de cara porque temos que compará-lo com outra coisa. Sem falar que esses são os traços gerais. Ainda não estamos operando em um bom nível. Atualmente, estamos procurando a direção geral. E uma vez que experimentamos essas duas telas, podemos voltar e refinar isso, fazer a perfeição. Por enquanto, vamos tentar outra abordagem. Vamos duplicar isso e tentar uma alternativa em que talvez o logotipo seja de qualquer tipo de cor sólida, talvez azul escuro, por exemplo, uma escolha bastante segura. Agora, talvez seja necessário levantar um pouco o logotipo e a foto cair. Agora K. E enquanto estamos aqui, pegue a ferramenta de digitação, a tecla de atalho D, e vamos escrever a transmissão ao vivo logo abaixo do ícone para que possamos ter uma noção melhor das coisas. Agora, para a formatação, mantenha a fonte padrão, mas deixe-a em negrito e talvez 60 pixels ou algo parecido. Certifique-se de usar o mesmo código de cor. Não queremos o arco-íris em nossas mãos. Repito, apenas jogando neste momento, essa não é a fonte final. Esse não é o look final. Agora portão. Agora, no passado, eu poderia ter sugerido um gradiente de desvanecimento para a foto. Poderíamos fazer isso no Photoshop, mas não acho que seja a aparência certa. A maioria dos aplicativos parou de usar reflexos ou o desaparecimento foi há algum tempo. Então, acho que a versão em tela cheia pode ser a melhor. Ok, isso pode funcionar, mas vamos experimentar algumas imagens de modelos nesta versão. Aqui, o processo é este oculte a camada preta de 50% usando este ícone aqui. Ótimo. Em seguida, arraste outra imagem, Image Tool, acima da original. Finalmente, revele o retângulo preto. Agora, eu não posso dizer que eu amo isso. Deixe-me analisar rapidamente todas as opções. Precisamos de algo rico, extravagante e interessante para ver. A lacuna no canto inferior esquerdo não vai voar. Então isso não é bom. Vamos tentar que o número da foto seja. Agora, isso mostra amigos comendo juntos, um ótimo conceito, mas a proporção está muito baixa , então perdemos a maior parte do brilho. Em seguida, foto número cinco. Isso também funciona, mas acho que o anterior é mais adequado. O principal problema é a comida mostrada. Esta é uma salada à base de ovo. Agora, o público-alvo espera comida de boa qualidade, mas embora não estejamos falando sobre a alta administração, não estamos falando de restaurantes finos. Uma salada de ovo, não é o look certo, acho que não vai ser algo que pareça apetitoso. Acho que hambúrgueres, rápidos, coisas assim, funcionarão para o público-alvo. Finalmente, número seis, este tem aquela aparência rica e abundante. Mas eu não estou amando a comida em si. É muito focado em sobremesas. Nós vemos alguns ovos ao fundo. Mas, novamente, é mais voltado para desertos. A opção para isso funciona e acho que marca todas as caixas certas. Uma boa escolha se destaca imediatamente, e essa é uma delas. Tem uma vista de cima. Possui comida multicolorida interessante. A mesa de madeira tem um campo agradável, aconchegante e familiar. Então, sim, ótima opção para a melhor aparência. Agora, deixe-me trazê-lo de volta. Agora, isso levanta a questão: o que mais podemos fazer aqui? A única ideia que vem à mente é um fundo branco puro ou talvez um padrão sutil que talvez seja uma cor esbranquiçada. Agora, eu não vou fazer isso acontecer porque aplicativos que são absolutamente brancos e nadadores geralmente são sofisticados. E esse não é o caso. Pense no restaurante com estrela Michelin ou na grande moda chamada produtos como, por exemplo essas são marcas que podem usar um design minimalista com talvez um toque de cor, mas a maioria é pura branco. Esse não é o caso aqui, então eu nem vou tentar. Concluindo, neste momento, continuaremos com todo o conceito inicial de 50% de preto e a foto número quatro. Essa nossa prancha pode ser jogada fora. Foi uma ideia decente, mas não vai funcionar. Ok, eu vou te ver em um segundo. 20. Explore ideias diferentes para a página do restaurante: Bem vindo de volta. Vamos continuar com a tela de listagem de restaurantes, que é a segunda coisa que o usuário verá. Essa é uma das telas mais importantes do aplicativo. Então, precisamos experimentar diferentes defasagens. Desde o início. Eu sei que quero ver uma versão sem fundo, tão branco puro. E talvez seja um cinza claro que forneça um bom contraste para nossas listagens, que deveriam ter cartões brancos. Agora, tive essas ideias pesquisando a concorrência. E esses são dois estilos muito comuns, muito populares. Ok, vamos começar com o conteúdo real. Eu preparei essa imagem de uma panqueca para a capa do restaurante, então vou arrastá-la, mas vamos falar de números. Agora, as diretrizes oficiais de design de material dizem que precisamos de 16 dB em cada lado, o que se traduz em 32 pixels em nosso caso. Agora, vamos fazer algumas contas, 720 -64, dizendo que os dois em cada lado significam 656 pixels, 656. Então essa é a largura do retângulo. Isso também é o que precisamos usar para os divisores na tela de edição. Agora, novamente, centralize-o depois de redimensioná-lo, nem é preciso dizer agora, provavelmente ficará melhor com cantos ligeiramente arredondados. Então, vamos usar cinco pixels para o raio do canto. E enquanto estamos aqui no painel de propriedades, desative a borda, caso ainda não tenha feito isso. Como eu disse, o XD os adiciona por padrão. Também vou retirar alguns guias porque temos que garantir que tudo esteja em alta e em alta. Você pode obter guias movendo-se para o lado esquerdo da tela. E você vai pegar esse cursor, clicar em arrastar e, portanto, você tem um guia. Isso só funciona do lado esquerdo e da borda superior. Ok, já que estamos nisso, vamos deletar a segunda entrada. Fomos até lá apenas para ver se cabíamos dois deles sem rolar. E, de fato, está tudo bem. Agora vamos falar de hierarquia. Temos alguns itens aqui. E a pergunta é: qual é a mais importante? Eu teria que dizer o título, certo? Mas muito perto disso está a classificação, pois esse é o principal valor do aplicativo. De qualquer forma, é o que o resumo diz. Em seguida, vem o prazo de entrega, que certamente é um fator decisivo. E, finalmente, em quarto lugar, provavelmente haverá as etiquetas relacionadas ao tipo de alimento. Eles podem ser usados para filtrar rapidamente tipos de alimentos ou cozinhas similares. O usuário pode tocar neles. E, obviamente, a lista será recarregada com esse filtro específico aplicado. Estamos falando sobre a importância porque isso nos diz como esses itens devem ser colocados e estilizados. Então, esses andam de mãos dadas. Você não olha para o que é lindo. Você pensa na importância deles para a primeira versão. E quero enfatizar primeiro vou colocar o título e a classificação na mesma linha. Por causa do que falamos, as tags podem ocupar a segunda linha. E eu gostaria de colocar o prazo de entrega em algum lugar acima da foto, semelhante ao que vimos no food Panda Zap. Vamos mover todo esse elemento 32 pixels da barra de ação. Ok? Sempre que possível, busque a simetria. Isso apenas faz com que o design pareça muito mais polido. Clientes, eu nunca vou dizer a distância nas laterais. Existe D2, mas no topo é 38? Não, eles nunca vão te dizer isso, mas confie em mim , eles vão notar, eles vão sentir isso em seu instinto. Não é intelectual, não é algo que eles possam articular, mas eles sentem isso. Ok. Agora, o título tem 40 pixels e vamos colocá-lo em negrito. A fonte padrão é totalmente boa. O que estamos procurando, nossas ideias aproximadas, também o tornam preto puro. O cinza padrão não é ótimo. Eu queria repetir. Esse não será o tipo de letra que vamos usar. Estou apenas testando coisas para ver se a importância que demos a elas faz sentido. 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, vou colocar um retângulo preto no canto superior esquerdo da imagem da capa. E acho que posso adicionar o relógio ao lado dele. Vamos fazer tudo isso mais tarde. Mas, por enquanto, vamos garantir que isso esteja bem posicionado. Em seguida, classifique o texto e o painel de camadas para que você possa realmente vê-lo e depois lê-lo. Ok, agora vamos diminuir a opacidade dos retângulos para, digamos, 30 por cento de. Então, isso vai nos dar um ótimo contraste, mas você ainda pode ver o portão fotográfico. Isso também nos dará mais espaço para todos os outros elementos, mais espaço. Mas a questão é: isso deve ser mantido em branco com texto em preto em cima ou vice-versa? Agora, acho que um retângulo preto funciona um pouco melhor. Vamos experimentá-lo. Então, vamos mudar de branco para preto. Desative a borda e, em seguida, alterne para a camada de texto. Ele precisa ser branco, mas mude seu peso para semi-negrito. Por isso, ele se destaca um pouco mais para que você possa lê-lo facilmente. Quando terminar, selecione essas duas camadas e centralize horizontalmente e depois verticalmente. Este item, novamente, deve ser colocado no lado superior esquerdo. Agora a questão é por que lá e não em outro lugar? Bem, já vi inúmeros aplicativos usarem esse local específico. Então eu vou fazer o mesmo. Ok, vamos manter as tags exatamente como estão, mas vamos alinhá-las à esquerda com o título. Isso é fácil porque temos que guiar a distância. Vamos deixar cerca de 20 pixels entre eles. Na verdade, vamos fazer deles um cinza médio , algo como 777. Agora, um código hexadecimal geralmente tem seis caracteres. Mas no Adobe XD, se você colocar os três primeiros, os outros serão copiados e colados automaticamente. Ok, vamos falar sobre a classificação. Eu quero algo parecido com a regra do fígado. Então, um rosto sorridente é muito bom que o melhor lugar na web para ícones seja o slab icon.com. Mas esteja ciente de que a maioria dos ícones precisa da assinatura. Eu não vou te mostrar como eu procurei o rosto sorridente porque não há nada de especial nisso. Só sei que eu sempre faço o download do SVG não em PNGs, e isso é muito importante. Isso é o que eu recomendo que você use também. Então, aqui está o resultado final. Talvez você queira saber como encontrar ícones de aparência incrível. Mas abordaremos isso mais tarde no curso. Pois o tamanho 40 por 40 é um bom caminho a percorrer. Normalmente, eu ficaria menor, mas esse é um ícone fantástico, é muito feliz. Então, por que não mostrar isso? Coloque-o em seguida, a pixels do texto. A propósito, acho melhor deixar a porcentagem em negrito e verde, porque essa é a parte que realmente se destaca na lista. Eles entram nela e na fila, tudo bem. Mantendo esses dois na mesma linha da Bíblia, mas faça com que o elemento toque no guia certo, ok, para fazer um bom progresso. Mas não há nada para gritar ainda. Lembre-se de que esta é apenas a primeira versão. Vamos lidar com a parte de cima porque na verdade está me confundindo. Eu queria julgar esse design sem nenhuma distração e esses retângulos cinza, bem, eles não estão fazendo isso por mim. Então, vamos lidar com isso no próximo clipe. Obrigada 21. Configure a barra de status e a barra de ações: Bem vindo de volta. Quando eu analiso o design, eu gostaria de fazer isso no contexto. Agora, podemos isolar tudo e focar neste cartão? Claro que poderíamos, mas por que faríamos? É por isso que temos que lidar com a barra de ação e a barra de status. A primeira opção é uma aparência muito limpa. Ambas as formas devem ser brancas, mas teremos uma sombra projetada para a barra de ação para que ela não se perca. Temos que separá-los de alguma forma. Agora, isso é muito melhor do que usar um traço, uma sombra projetada. Então, por favor, nem considere adicionar um derrame. Uma borda que é traçada está no Photoshop, borda está no Adobe XD. Desculpe por isso. OK. Para as configurações, sexo e sexo. E é isso. Pronto para ir. Nada especial. Temos uma boa sombra projetada. Seguindo em frente. Estamos perdendo elementos importantes na barra de status. Então, aqui está um arquivo que não é saudável. Este recurso está anexado e espero que você o use em todos os seus projetos. Agora, novamente, use o Shift se necessário. A ideia é essa. Não há nada realmente tão especial aqui. A barra de status é básica e super simples, então não devemos perder tempo com ela. Basta copiar e colar e pronto. Ok, vamos substituir a camada de textos da cidade por São Francisco, escrita em negrito, 40 pixels, preto puro, sem folhas de uva. É exatamente o mesmo que o nome do restaurante. Centralize-o com a barra de ação. Lembre-se de que, mesmo que pareça um grande bloco contínuo, na verdade há um retângulo separado para essa área específica. Esquerda. Alinhe-o com nosso guia e poderemos continuar. À medida que você se familiariza cada vez mais com o XD, sugiro que você aprenda os comandos para alinhar horizontal e verticalmente. Isso realmente ajuda, então você não precisará mover mouse até o canto superior direito. Mova o ícone suspenso para, caso ainda não tenha feito isso. Finalmente, por uma questão de tempo, vou pular em frente e mostrar os ícones que selecionei para essa área certa. Você os tem anexados. Eles também devem ter 40 pixels. Centralizou-os dentro do retângulo. Esteja ciente de que, ao colocá-los dentro do projeto, não os solte diretamente acima do retângulo porque você não vai se divertir. Você não quer isso. Na verdade, você tem que colocá-los um pouco mais abaixo. Ok, agora escreva a linha, o ícone de busca entre eles deixa 40 pixels, então dedos gordos não serão um problema. Esquecemos o menu de hambúrguer à esquerda. Isso é um dado adquirido, isso é obrigatório. Por favor, me dê um segundo para fazer a mágica de tudo. Aqui está um ícone adorável. Novamente, o que você quer evitar isso, isso, veja o destaque. Se eu vou deixar aqui, você não vai se divertir. Então, vamos desfazer o controle Z. Isso é o que realmente queremos. Vou usar minhas guias para posicioná-lo corretamente. Vou deixar 30 pixels entre ele e São Francisco. Mais uma vez, certifique-se de usar alinhar centros verticais, portão. Você pode perguntar por que eu não usei 40 pixels entre esses dois itens. Dois no meio, o espaço à direita. E isso porque esse lugar também mostrará o endereço do usuário quando ele estiver logado. Então, precisaremos 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 pixels por dez. E eu acho que deveria ser colocado o mais próximo possível da cidade. Embora 30 pixels tenham uma aparência melhor. Eu vou ficar com dez agora, ok? Sim, estou mais do que feliz com isso. Depois de tudo dito e feito, selecione todos esses itens e centralize-os dentro da barra de ação. Assim. Ótimo. Se tudo estiver em ordem, nada deve se mover. Bem, talvez um pixel de dois. Observe que a fonte parece deslocada para a parte inferior. Isso realmente me irrita, mas lembre-se, esse não é o tipo de letra final. Assim, podemos levar as coisas adiante. Não se preocupe com isso. Ok, este é o nosso primeiro design. Vamos selecionar a entrada e finalmente usaremos essa opção. Repita a grade. Como eu disse, quero julgar isso no contexto. Então, eu gostaria de ver toda a altura ocupada pelas entradas. No geral. É um rascunho. É só uma ideia, mas tem todos os elementos necessários e podemos começar a brincar com eles e criar pelo menos duas das outras opções. É assim que funciona e é isso que eu recomendo que você faça também em seus próprios projetos. Ok, vamos continuar depois de uma pausa rápida. 22. Crie outra versão com rapidez - da maneira mais fácil: Bem vindo de volta. Neste vídeo, vamos explorar várias versões desse cartão. Vamos duplicá-lo, então vamos manter as coisas bem e limpas. Isso também vai nos ajudar a comparar todas as versões, todas as iterações. Ok, a primeira coisa que devemos experimentar é um fundo cinza claro. Na verdade, eu experimentei a cor bonita do Dribble que tem um bom toque de azul. Porém, o código de cor exato é f z, F11, F8. E é muito sutil. Esteja ciente de que não há retângulos definidos como plano de fundo. Essa é a cor de toda a prancheta, então você precisa selecioná-la para alterar o preenchimento. Ok, agora o texto não fica ótimo nesse fundo cinza. Então, vamos criar o retângulo base para o cartão. Aqui está o processo rápido. Selecione a imagem clicando nela. Agora crie uma cópia com o Control D, D como em duplicado. Vá para o painel Layers e selecione o painel inferior. Ok, agora vamos aumentar a altura para 500. No momento, não faz sentido, mas é o seguinte. Clique no preenchimento para abrir a cor Beggar e mova-a. E agora você vai ver o retângulo aparecer, torná-lo branco puro, é claro. E é isso. Agora temos um cartão. Ok, claro. O texto não se encaixa e, em seguida, adicione algumas coisas para corrigir. Mas esse é o processo. Então, novamente, duplique, selecione a camada inferior no painel de camadas, aumente a altura e, em seguida, brinque com a cor de preenchimento. De volta ao trabalho. Vamos selecionar a imagem e alterar o raio das coordenadas na parte inferior. Esteja ciente de que temos uma grade de repetição aqui. Por um lado, isso é ótimo porque estamos afetando todas as cópias que estão por baixo. Mas a desvantagem é que agora temos que manter controle e clicar na imagem para realmente selecioná-la. Se você não fizer isso, aqui está o que vai acontecer. Deixe-me desmarcar, verificar o painel de camadas, certo? Nada está selecionado. Ok? Agora, se eu simplesmente clicar acima da imagem, vou selecionar a grade, não a foto em si. Portanto, a conclusão é que você precisa manter pressionado controle e clicar para selecionar um item. Ok, de volta ao raio da esquina. Já usamos esse campo aqui anteriormente, certo? Mas se quisermos mudar as coordenadas individuais, temos que clicar aqui. Meu conselho é que você clique no primeiro e verifique o ícone. Isso mostra qual canto você está realmente afetando. Use a guia para mudar rapidamente para uma nova. O que realmente queremos é z , porém, você pensa nos dois últimos, assim mesmo. Agora, OK, incrível. Agora podemos começar a organizar nossas camadas de texto. Selecione esses dois itens e mova-os 30 pixels para dentro. Quanto à distância no eixo vertical, isso realmente não importa muito no momento, mas tentei colocar esses dois em algum lugar no meio, no lado direito, exatamente a mesma coisa ali, os pixels. Mas mantenha isso alinhado com o título. Nunca enviei por escrito essa situação. Pense nelas como duas linhas individuais. A propósito, esse é um método para saber como usar o Control e o Shift. Deixe-me esclarecer as coisas. Então segure o controle e clique no dipolo. Agora, selecione isso. Supondo que também queiramos o deserto capturado, temos que segurar o Shift. Agora, verifique o painel de camadas para isso. Portanto, lembre-se de que clicar com o botão de controle ajuda você a selecionar uma única camada. Se você quiser pegar várias outras camadas, você terá que segurar o Shift desse jeito. Então, novamente, usando o Shift para selecionar várias camadas, tenha em mente que vamos refazer todos esses ajustes finais, essas edições finas quando chegarmos à aula de tipografia, quando realmente vamos escolha uma fonte e assim por diante. Depois de alguns ajustes, esta é a primeira cicatriz. Mova o mouse entre as cartas para que também possamos ajustar esse espaço. Veja esse retângulo rosa, clique em Manter e isso permitirá que você altere o espaço. Ali. D está absolutamente bem. É isso que estamos procurando. Ok? Essa é nossa primeira opção. Olhando para eles lado a lado. Acho que é uma melhoria, mas, no geral, não estou muito feliz com esse tamanho. Vamos duplicar todo esse quadro de arte para que possamos tentar outra coisa. Certifique-se de que você tenha espaço suficiente. Temos muito espaço e Adobe XD. Agora, digamos que reduzimos o cartão em 40 pixels, por exemplo, isso significa que o retângulo base deve ser reduzido para 460 e o final de um precisa ser apenas 60. Em seguida, precisamos lidar com essas camadas de texto. E é aqui que sua velocidade realmente aumenta a destreza. Esse é o arquivo rápido de palavras-chave. Selecione-os e mova-os para cima para os Pexels. E você sabe o que? Enquanto estivermos aqui, vamos também adicionar um toque de cor a essas etiquetas. Eles parecem chatos como são. Além disso, ele não saberia que essas são ações. Na verdade, você pode tocá-los e filtrar os resultados da pesquisa. Então, qualquer cor serve. Mas eu prefiro não usar o verde da classificação. Eu gostaria de evitar qualquer confusão e realmente separar esses dois o máximo possível. barra vermelha laranja seria completamente o oposto. Então, vamos com algo assim. Novamente, o código colorido realmente não importa muito neste momento , porque vamos definir o esquema de cores um pouco mais tarde. Lembre-se de que ainda estamos trabalhando no cabeçalho ainda trabalhando nas cartas em si. Ok, estou muito feliz com este. No geral, a proporção é muito boa. Não é tão alto quanto eu gostaria que fosse, mas ainda é bem grande. E isso se traduz em um forte impacto visual. Quando você abrir o aplicativo, ele ficará lindo. As fotos realmente vão te impressionar. Agora, vamos pensar no que mais podemos fazer? Faça outra cópia, por favor, controle D ou Alt, arraste. E vamos pensar que poderíamos ter essas tags e a cor de fundo sólida para mostrar os botões tocáveis, há uma ação por trás deles, certo? Mas como eu quero que a avaliação também tenha muita atenção, acho que vou colocá-la acima da foto. Então, vamos ao que interessa. Mova a classificação na coordenada inferior direita da foto. Algo ao redor dessa área. Obviamente, podemos ver isso, mas podemos adicionar um retângulo que fornecerá uma boa quantidade de contraste. O tamanho após o bit de ida e volta para 50 por 60 pixels. Isso vai funcionar bem e, claro, tem que ser branco puro. Agora, é o seguinte. Você pode ter problemas ao mover o retângulo abaixo dos textos e dos emojis. Agora, isso é porque temos uma grade de repetição. Então, qual é a solução? Bem, é bem simples. Você precisa usar uma tecla de atalho para controlar a tecla de colchete esquerdo. Isso moverá a camada selecionada para baixo. Assim mesmo. Se você quiser aumentá-lo, é Controle, certo? Chave de colchete. Essa é uma das maneiras mais fáceis de obter uma ótima legibilidade sem fazer concessões. Basta adicionar o retângulo. Deixe 30 pixels nas bordas inferior e direita. Como você pode ver, depois de definir o valor, neste caso 30, eu o mantenho. Em seguida, vamos aumentar a redondeza até o valor máximo e isso corresponderá ao formato dos rostos sorridentes. A propósito, você pode colocar qualquer valor ridículo aqui, como 90 ou qualquer outra coisa vai ao máximo, e pronto. Ok, vamos desativar a fronteira. Se você ainda não fez isso. Isso não nos ajuda de forma alguma. Mas acho que é hora de mover o emoji e os textos bem no centro dessa forma, algo assim. Basta movê-lo. Sempre procure as duas linhas bancárias. Agora que estamos aqui, selecione bem a base e crie um grupo com o Controle G. Agora, por que precisamos do grupo? São apenas três camadas, certo? Bem, provavelmente vamos mudar isso , então é melhor nos mantermos organizados. Chame isso de classificação e essa coisa. É isso. Vamos fazer uma pausa rápida e continuaremos em um momento. 23. Mais variações para o cartão: Bem vindo de volta. Vamos cuidar das malas. Aqui. Vou criar outro retângulo arredondado, cerca de 40 pixels de altura. A largura vai variar dependendo do comprimento da palavra, mas queremos cerca de 20 pixels em cada lado. Então, por favor, seja generoso com isso. Lembre-se de que eles usam a tecla de controle tecla de colchete esquerdo), a posição correta no painel de camadas que a move para baixo. Ok, isso deve ser laranja, barra vermelha. Mas não se preocupe muito com a sombra. Apenas certifique-se de que o texto branco puro fique visível. Movendo-se muito rápido porque isso é coisa padrão. Portanto, você deve ser capaz de acompanhar. Mas é claro que você precisa pausar o vídeo com frequência e, obviamente, continuar na segunda visualização. As coordenadas devem ser arredondadas para o máximo para coincidir com a classificação. É claro que tudo tem que estar centrado. Agora, aqui está a questão. A altura do cartão não é boa. Simplesmente não podemos fazer isso funcionar, mesmo que aumentemos um pouco o título. Eu sugiro que mudemos isso para 470. E depois de tudo dito e feito, é assim que deveria ser. O fato é que nem todas as suas ideias serão ótimas e tudo bem. É essencial que você os crie o mais rápido possível e , em seguida, julgue todos eles olhando para eles lado a lado. Vamos finalizar esta versão movendo essa entrega para baixo a partir da coordenada superior esquerda. Na verdade, isso deve ser colocado na mesma linha do título do restaurante. Vamos escrever na entrega em 30 min. Essa fonte básica está boa por enquanto. O que estamos procurando é equilíbrio. O cartão parece bom? Agora, não posso dizer que adoro com uma classificação no lado direito. Agora gate, no final desta sessão, podemos copiar esse design e diminuir o zoom para ver todas as opções que dão a ele a chance do Fed. Certifique-se de que tudo esteja abotoado. Se você dedicar muito tempo ao seu design, naturalmente estará mais inclinado a gostar mais dele. Então, todos esses ajustes finais, eles importam, eles influenciam você. Ok. Começamos aqui sem plano de fundo e com cartões grandes. Essas são claramente as palavras quando a segunda versão parece boa, mas a terceira é definitivamente melhor devido ao tamanho menor do cartão. Também gostei da pitada de cor que o laranja realmente ajuda muito. Mas quando eu comparo essas duas, acho que tags sólidas foram um erro. Isso está um pouco ocupado e desequilibrado. Valeu a pena tentar, mas não vou dizer que gostei da classificação flutuante, mas teremos que trabalhar um pouco mais nela. Ok, vamos fazer uma pausa e vamos continuar em apenas um momento. Obrigada 24. Explore um layout final: Bem vindo de volta. Espero que você esteja se divertindo e trabalhando comigo. Mas é claro que, em sua segunda exibição, neste momento, discutimos várias opções e sabemos com certeza que queremos continuar com esta versão, mas sem tags. Então, vamos fazer isso. Crie outra cópia da prancheta mais recente e exclua os retângulos laranja. Eu gosto das cores, então acho que vamos aplicá-las a esses textos. As camadas as dividirão com um hífen e limparão isso. Essa divisória pode ser preta ou algo parecido. Quanto à distância entre eles, eu diria em qualquer lugar de 15 a 20 pixels. A questão é: devemos manter essa posição? Acho que podemos brincar com isso um pouco mais. Aqui está minha ideia. Vamos colocar o tempo de entrega abaixo do título, pois o resumo diz que esse é um fator muito importante para os usuários do aplicativo. Isso significa que os ovos ficarão do lado direito, como antes, 30 pixels da borda. Em breve, começaremos a escolher as fontes e isso ficará muito melhor. Durante nosso intervalo, dediquei um tempo para encontrar o ícone do relógio que combinava com todo o resto. Aqui está. E você pode escolher 30 por 30 ou 40 por 40, o que você achar que funciona melhor. O menor tamanho é bom porque não é uma ação. 40 pixels é o que usamos na barra de ação. Então isso teria sido apropriado, mas no geral, vou usar o valor mais baixo, 30 por 30. Ok, por favor, reserve um momento para organizar tudo entre o relógio e a hora. Acho que dez pixels estão bem. E, obviamente, tudo precisa ser centralizado verticalmente. O ícone do relógio, o prazo de entrega e, finalmente, as categorias. Assim mesmo. Como uma etapa opcional, podemos encurtar esse texto para fornecer 30 minutos. Eu acho que isso está claro o suficiente. Poderíamos até mesmo remover a entrega porque temos o ícone do relógio. Mas acho que vou deixá-lo nesta versão. Finalmente, embora eu tenha adorado o design da classificação está cobrindo uma parte significativa da foto. Então, aqui está o que eu proponho. Eu me inspirei no azul do fígado. Então, eu quero que a classificação fique nesse limite. Isso também deve equilibrar o design. O problema é que precisamos da sombra projetada, então, por favor, clique no retângulo e ative-o. A propósito, isso é chamado de fatura de botão, fatura. Bill estava na medicina, porque é bastante redondo. Eles poderiam cronometrar e posicioná-lo a 30 pixels da direita. Mas aqui está a questão. Mesmo que essa não seja a fonte final, acho que há muito espaço vazio em cada lado dela. Então, selecione o retângulo base, não o Grupo A propósito, você faria qualquer outra coisa e redimensione-o. E aqui está um ótimo truque quando você deseja redimensionar uma camada, mas quer manter a posição pressionada Alt enquanto arrasta. Essa é a tecla Alt ou Option no Mac. Como você pode ver, você está afetando os dois lados. Isso significa que o conteúdo interno permanece centralizado. Então essa é a tecla Alt e a versão ideal. Essa forma é tão larga quanto essas duas etiquetas. Mas é claro que isso mudará o tempo todo com base nas palavras reais mostradas. Aqui, o internacional é bem longo, mas obviamente outras categorias podem ser curtas, então não perca seu tempo com isso. Mas sim, essa seria a situação ideal. Dito isso, acho que é uma grande melhoria em relação à versão anterior. A sombra é muito forte. Depois de diminuirmos um pouco o tom. Isso vai ficar muito bonito. Seis por cento de opacidade está bem. Esteja ciente de que a opacidade é controlada a partir desse campo. Você também pode usar essa área vertical, mas eu gosto de usar o campo em vez disso, é mais fácil. Acredito firmemente que esta é, de longe, a melhor versão. Essa é a minha opinião, mas o que você acha? Deixe-me saber na seção de comentários e certifique-se de trabalhar em sua própria versão ao terminar esta. Ok, vamos fazer uma pausa. 25. Variações de Creatie para a barra de ações: Bem vindo de volta. Vamos nos concentrar na região superior no momento, criamos algo muito limpo, até mesmo como o iOS, mas esse é o caminho certo a seguir? Lembre-se de que fomos para a largura bem rápido porque queríamos analisar as cartas sem sermos jogadas fora. Mas é hora de criar algumas opções de modelo. Vamos criar uma cópia para que possamos explorar algumas opções. Abra espaço e vamos começar. A primeira que vem à mente é muito criativa e é o uso da foto para toda essa área. Essa pode ser uma foto da cidade e essa seria São Francisco, já que essa é a atual. Vamos excluir a barra de status e expandir a barra de ação e essa área. Agora, por que queremos removê-lo? Porque é muito mais fácil adicionar uma foto dentro de um único retângulo. Se gostarmos, podemos conversar com um programador e ver quanto esforço seria realmente necessário para que isso acontecesse. Porque, novamente, isso muda a estrutura de custos. O fato é que eu sei que isso é possível, mas não tenho certeza de quão caro é, quão difícil é. Mas vamos ter essa discussão se a amarmos. Vamos ver. Eu pausei o vídeo e fui ao unsplash.com para selecionar várias fotos dessa ponte icônica. Aqui estão eles, e vamos experimentar isso. Então, aqui está o primeiro. Temos alguns elementos que não funcionam em um fundo colorido. Então, neste caso, vou rapidamente torná-los brancos. Nada mais, por favor, não se deixe seduzir pelo amarelo, laranja ou verde limão. Esses são os piores spreads do diabo. Somente o branco funcionará. Ok, isso não é tão ruim assim. E podemos realmente adicionar o retângulo preto com baixa opacidade para melhorar a legibilidade desse texto. Mas, por enquanto, vamos continuar com as fotos. Lembre-se de que você sempre pode clicar duas vezes na imagem e reposicioná-la ou até mesmo redimensioná-la. O Adobe XD faz o possível para colocar a foto dentro do retângulo, mas nem sempre faz um bom trabalho. Portanto, não tenha medo de entrar lá e mudar isso. Por exemplo, para a última imagem, número seis, ela deve ser colocada bem abaixo. Mas temos que pensar nessa estratégia. Queremos realmente chamar muita atenção para a barra de ação C? Mas adoramos a simplicidade do fígado, mas isso nos afasta disso. E eu realmente não acho que valha a pena. Algumas dessas fotos parecem boas. Mas dito isso, não é incrível, não é fantástico, está tudo bem. Então, não vamos complicar as coisas. Então, vamos descartar essa ideia. Em vez disso. Vamos experimentar uma Heather sólida, algo simples, uma nova cópia. E vamos experimentar algumas cores fortes e brilhantes, algo bastante saturado. No topo da minha lista, tenho verde, laranja, roxo e azul. As opções básicas e seguras que a maioria das pessoas gosta. Então, o que vou fazer é empilhá-los lado a lado para que possamos dar a eles uma chance justa. Portanto, fazer cópias é muito importante. Dê-me um momento enquanto eu leio todas essas versões. Vou ter que acelerar bastante o vídeo. Mas não há nada de especial acontecendo. É só brincar com o seletor de cores. Ok, aqui estão eles. Agora, você tem um favorito? Você acha que alguma opção colorida é melhor do que a branca pura? Porque a coisa é de onde eu estou, eu acho que a branca é melhor. As fotos são ricas em cores, então acho que estamos procurando problemas aqui. O branco é muito mais elegante. Minha conclusão, vamos levar com ela e refiná-la. Se você pensar o contrário, continue com sua escolha e me mostre seu resultado final. Esse é um método de sabor, mas também como você interpreta o resumo, como vê o que o cliente quer. Ok. Vamos fazer uma pausa e te vejo em um segundo. 26. Design de conceitos para detalhes do restaurante (3): Bem vindo de volta. Estamos prontos para passar a exibi-los, mas o design de detalhes do restaurante, vamos ver quais variações podemos criar para esse verde. Mas primeiro, vamos atualizar isso. Esses retângulos devem ser brancos. E a das guias precisa ter uma sombra projetada ativada. Lembre-se de que tínhamos configurações específicas para isso, não as configurações padrão. Foi sexo e sexo. Isso é muito importante ao lidar com sombras, porque não queremos que a sombra apareça na parte superior do retângulo. Portanto, alterar as configurações é fundamental. Agora, para a barra de status que precisa ser preta pura, exceto pelo próprio retângulo. No passado, eu usava PNGs, fotos reais, mas para a barra de status, é melhor usar um item que seja ajustável. E o formato que você está procurando é SVG. Mas, melhor ainda, você pode simplesmente copiar e colar de qualquer brinde, de qualquer recurso da web. Basta dar uma olhada em qualquer brinde do Adobe XD e é provável que você encontre isso. Ok, descendo, precisamos adicionar ícones. Levei um tempo para encontrar a seta traseira correspondente e o ícone de inflamação. Eles precisam ser colocados exatamente como uma tela, mas todos na mesma linha. Espaço com largura suficiente. Acho que podemos ter ignorado a adição dos guias a essa tela específica. Então, vamos adicionar isso aqui. Tem uma faixa. Adicione qualquer retângulo com 656 pixels de largura. Como sempre, o painel de propriedades é a melhor opção quando você está procurando um tamanho específico. Então, quando você o tiver e enviar o vermelho, poderá arrastar a guia e excluir a camada extra. É tão fácil quanto isso. Esse é um daqueles truques que eu absolutamente amo. Essa técnica surgiu por necessidade. E somente um freelancer que realmente valoriza seu tempo tem essa abordagem. Se você vê alguém movendo manualmente uma guia pixel por pixel , sabe que ele está muito relaxado. Em negócios, remova os textos informativos, caso ainda não tenha feito isso, e coloque o ícone de informações ao lado do guia. Repita para o outro lado. Por favor, dedique seu tempo e certifique-se de fazer isso da maneira certa. Obviamente, a maneira mais fácil de organizá-los é secar a caixa grande que agarra todos eles e, em seguida, pressionar o comando Alinhamento e você dará um grande passo. Incrível. Deixe 30 pixels entre a seta e o título. Então, é agradável e arejado. Essa fonte não é muito boa, mas em breve começaremos a dar alguns retoques finais. Isso vai ser um pouco mais tarde. Agora k, Agora, para combinar a tela número dois, vamos alterar o título da tela para 40 pixels em negrito. Novamente, mantenha esse tipo de letra. , por favor, faça com que seja preto puro. Agora, isso pode ser um pouco arriscado. criação fica muito grande, mas resolveremos tudo em breve e poderemos fazer várias edições. A ideia principal aqui é manter a consistência. Não gosto de usar valores diferentes em telas aleatórias. Depois de deixar de lado, você tem que continuar com isso. E, a propósito, quando você muda de tamanho, é melhor alinhar tudo mais uma vez. Para as guias. Vamos fazer isso. Selecione todos de uma vez porque essa é a maneira mais inteligente de trabalhar e, em seguida, mude a orientação para o centro. Isso fará com que fiquem parados porque meu plano é aumentar o tamanho para cerca de 24 pixels. Isso é verdade para torná-los ousados e, obviamente, negros. Se eles ainda não são pretos, esse cinza realmente me surpreende. Eu não gosto disso. Passamos muito tempo organizando-os com a ajuda dessa linha que mostra a guia ativa. E o fato é que eu não quero que todo esse esforço seja em vão. É por isso que mudamos essa orientação. Ok, vamos seguir em frente. Selecione a primeira entrada e você deve agrupá-la se estiver acompanhando. Caso contrário, agrupe agora com o Controle G. Agora, novamente, vamos ativar uma grade de repetição a partir da direita. Excelente. Arraste isso para baixo para que possamos obter algumas cópias. Obviamente, o espaçamento não parece correto, mas isso é um fato rápido. Estamos procurando por 30 ou 32 pixels. Essa é uma das mudanças de ganho em relação grade de repetição do Photoshop que nos mostra à grade de repetição do Photoshop que nos mostra como ficará nosso design quando tivermos muitas entradas e isso com o mínimo esforço. Veja essa linha como exemplo. Não é do tamanho certo. Ele precisa ter 656 pixels de largura. Selecionará um deles e usará a área de transformação no painel de propriedades, digitará 656 e o moverá para o lugar certo. A propósito, vamos aproveitar essa chance para usar também o campo x. X é para 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 eixo horizontal, e ele começa do lado esquerdo. E y eixo vertical, ele começa do topo. Ok, agora, para as fotos, precisamos usar o unsplash.com. Mais uma vez, eu já tenho algo preparado, então vou arrastá-los todos de uma vez acima do primeiro retângulo. E como essa é uma grade de repetição, XD sabe que eu quero uma foto diferente em cada entrada. A propósito, se você não desativou a fronteira, por favor, faça isso. Não há necessidade disso. E enquanto estamos aqui, deixe-me mostrar outro recurso da grade de repetição. Eu tenho esse simples nó ruim. Este é apenas um arquivo TXT de pontos padrão com vários deles. Se eu arrastar isso com uma das camadas de texto, digamos o título do prato, veja o que acontece. Magia. Vou repetir essa etapa pelo preço da descrição e, finalmente, pelo peso, o nome do bloco de notas não é importante. Acabei de renomeá-los para que você possa acompanhá-los facilmente. A única coisa que você precisa saber é deixar um espaço vazio entre suas entradas. É assim que se parece o arquivo de descrição dot TXT. Embora a válvula tenha várias linhas, XD sabe quando o próximo século começa com base nesse espaço vazio. E caso haja muito texto, basta reduzir a altura da camada de texto e pronto. O excesso vai ficar escondido. Legal. Quando isso estiver pronto e você estiver pronto para seguir em frente, vamos nos concentrar em Adicionar ao carrinho, a ação principal neste verde. Aqui está a coisa. Eu olhei muito e decidi usar esse símbolo positivo. Pelo que entendi, quando você toca em toda a região, o produto é adicionado automaticamente ao carrinho. Não há outra página, não há outra tela. Bem, sem adicionar a fase de estilo ainda, ilumine a divisória para que não distraia. Essa cor simplesmente não funciona para mim. Um cinza muito claro. Coisas como ddd devem funcionar bem como uma solução temporária. E sim, você pode adicionar letras no código de cores. O código hexadecimal não contém apenas números, ele também pode conter letras. Para continuar nossa cadeia de comando a partir da ferramenta de tela, vou deixar o título, o preço e o peso em negrito. Vamos defini-los em cerca de 30 pixels. Embora isso possa ser um pouco demais, pode ser um pouco complicado. Uma vez que começamos a rodar, podemos ter uma melhor noção do nosso espaçamento. Ah, a propósito, você move o título um pouco para baixo, se necessário. Porém, essa é uma etapa opcional, lembrou. breve, vamos escolher uma fonte diferente. Idealmente, o título deve estar alinhado com a miniatura. O preço espera, um ícone deve estar alinhado na parte inferior com a miniatura, mas como uma unidade inteira. Agora, ok, enquanto isso, quero lembrá-lo de que quero ver dois designs de Você. Quer uma réplica perfeita do que estou fazendo aqui com exatamente os mesmos ícones, fontes, tamanhos e cores que você vê no curso. E outra que é sua própria foto nova, novas fontes, novos ícones, novo layout, obras. Eu também quero ver um conteúdo diferente. Por favor, não publique seu trabalho sem usar uma grade de repetição. Escolha diferentes nomes de restaurantes, etiquetas, preços, etc. Não tenha preguiça. Agora, antes de continuarmos, faça esses dois itens de menu, cinza 777, por favor. Acho que é isso que usamos até agora. E isso porque queremos mostrar que eles não estão ativos. Ok. Vamos ver o que podemos fazer aqui. Eu tenho que implorar instruções. Uma delas é usar uma foto em vez da barra de ação, que pode funcionar melhor aqui do que na tela número dois. E a terceira é fornecer ao cliente um desvio rolável em vez dos três designs fixos do Deb. Vamos fazer tudo isso no próximo vídeo após o intervalo rápido. Obrigada 27. 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, o retângulo da barra de status do líder e levantar a barra de ação. Queremos adicionar uma imagem nessa região. Mas aqui está a questão. Poderíamos tornar essa área ainda maior, embora não seja tão comum. Nós temos essa opção. Dos meus testes e da minha pesquisa. Uma altura de cerca de 270 vai funcionar muito bem. E, novamente, embora não seja padrão, é muito factível. As abas, é claro, terão que ser movidas para baixo junto com todos os outros pratos. Lembre-se de trabalhar de forma inteligente, por exemplo, 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. tenha pressa, pois existem muitas camadas. Eu recomendo que você aumente e diminua o zoom para ter mais controle. Com essa mudança, provavelmente terá que remover um dos pratos da parte inferior. Mas eu acho que está tudo bem. Temos mais do que o suficiente. Ok, agora podemos começar a construir sobre essa camada. Vamos adicionar a foto do armário do restaurante. Nesse caso, é a imagem de uma pizza. Eu já tenho algo preparado. Obviamente, podemos ver o texto, mas vamos praticar a técnica anterior. controlador de largura duplicada brincará com o preenchimento, então a imagem será substituída por uma cor. Opte pelo preto puro. Agora, diminuiu a opacidade para dizer talvez 40 por cento de. Então, talvez precisemos de mais, mas veremos que tudo nessa área precisa ser deixado em branco, incluindo os ícones da barra de status. Isso vai levar um minuto, mas deixe-me mostrar como eu gosto de trabalhar, especialmente se eu não estivesse gravando isso. Vejo que a barra de status está agrupada. Isso não é bom. Vamos desagrupá-lo assim. Em seguida, vou arrastar uma caixa para selecionar todas essas camadas. Verifique o painel de camadas para confirmação. O problema é que tenho duas feridas extras, a foto e o retângulo preto, embora tenham o mesmo nome, eu sei qual é qual. Ok, segure o controle e clique neles no painel de camadas para desmarcar. Agora isso está feito. Eu posso mudar todos esses caras de uma só vez, desse jeito. Incrível. Lembre-se de que temos no modo de iteração com desvios bancários de gauss, embora a barra de ação não esteja presente por si só. Ainda vou manter essas duas camadas posicionadas nesse local, a seta para trás e o título. vamos deixar cair o ícone de informações entanto, vamos deixar cair o ícone de informações porque ele se perde na mistura. E vamos adicionar os elementos de classificação em algum lugar no meio dessa área. Embora não seja obrigatório, é um toque agradável. Pegue-o em qualquer uma das pranchas de arte anteriores que criamos. A sombra projetada pode precisar se intensificar, mas, no final, isso não fará muita diferença porque é o seguinte. Mesmo com 50% de opacidade, é pouco visível. Em um telefone. Você provavelmente não notará a sombra quando tudo estiver dito. E então é assim que a variação se parece. Pessoalmente, gosto mais do que da versão limpa, mas é tudo uma questão de gosto. E nessas situações em que você tem duas opções muito sólidas, você pode deixar o cliente decidir. Vou manter os dois e, em seguida, podemos passar para a opção de guia rolável. Vamos usar o conceito inicial para isso, onde a barra de ação é padrão. Então, vamos fazer outra cópia. E, aliás, devem estar todos lado a lado, para que possamos julgá-los facilmente. Aqui, a principal diferença é que os itens do menu são todos colocados em uma única camada de texto e são empurrados para a direita. Então exclua esses dois e crie cinco ou seis categorias de alimentos. Eu tenho algo preparado em um bloco de notas, mas você pode criar o seu próprio. O fato é que tudo isso vem da diretriz oficial de design de materiais. São as guias fixas ou as que podem ser roladas. Então, é aqui que estou obtendo todas essas opções agora em relação a pinceladas roláveis. Novamente, usando as medidas faciais, você pode potencialmente improvisar e simplesmente alinhar as coisas como achar melhor. Apenas olhe para ele. Ou você pode usar a medição oficial. Eu vou escolher essa opção e você pode vê-la em ação. Então você pode ver o que é, o que. Primeiro de tudo, o retângulo, que deve ser alterado para 180 pixels, que é o mínimo de acordo com o guia. Em seguida, você deve colocá-lo a 140 pixels de distância da borda. Isso é 52 dp do guia oficial. Agora, lembrei como você pode fazer isso facilmente. Você pode usar o campo x do painel de propriedades x para o eixo horizontal e ele sempre começa da esquerda. Excelente. Agora, depois do meu primeiro passo, isso precisa ser alinhado horizontalmente com o retângulo. Mas é claro que isso é um problema porque essa camada contém muitos itens de menu. Agora, nesse caso, vou aproximar que poderíamos adicionar um retângulo em cada lado e fazer algumas idas e vindas manuais. Mas vou apenas aproximar isso. Quando terminar, altere a cor de todas as outras abas para um cinza desbotado. A cor do código que definimos como tripla sete, então 777. Há uma coisa que eu gostaria de abordar. Você pode estar curioso sobre o fundo e por que eu o deixei branco, porque poderíamos experimentar uma cor esbranquiçada. Mas aqui eu decidi não fazer isso. Eu experimentei fora da câmera e simplesmente não parecia certo. Mas só para desenvolver nenhum segredo que as crianças tenham que pareça e, na minha opinião, esse é enlameado, sujo , ocupado, longe do ar, o look que queremos criar. Agora, é o seguinte. Outra opção seria criar retângulos, retângulos brancos, que são chamados de cartões para cada prato. Mas isso é outra coisa que eu decidi não fazer. E o raciocínio é a amostra número um, ou seria espaço de pressão porque cada um deles exigiria mais preenchimento e espaçamento. Então isso não é uma boa ideia. E a segunda coisa, isso é uma lista, então os cartões não pertencem realmente a este lugar. De acordo com as diretrizes oficiais de design de material, todos os itens pertencem um ao outro. E se você se lembra da palestra sobre guardas, na verdade ela costumava mostrar itens individuais que não necessariamente combinam. Lembre-se do exemplo do painel ou do aplicativo Notes. É por isso que, no final do dia, decidi não usar o plano de fundo. Mas sim, aí está. Estas são as opções, número de v. Em tela cheia, é claro que precisamos escolher uma fonte ou esquema de cores e aplicar alguns retoques finais. Podemos passar para essa parte porque não tenho nenhuma outra ideia sobre a tela. Então, vamos em frente. Vamos ajustar as coisas. vejo em um momento. 28. Como escolher o melhor tipo: Bem vindo de volta. É hora de falar sobre topografia e usaremos o mesmo processo iterativo nessas poucas telas. Selecione as melhores versões e você será a visualização e coloque-as lado a lado para que possamos ir e voltar rapidamente entre elas. Se você está indeciso, tudo bem. Mas as folhas escolhem três pranchas de arte diferentes para que possamos explorar cada tipo de letra em várias situações. Eu já tenho o meu separado da parte de trás e vamos trabalhar em cópias. Portanto, vamos simplificar com um único tipo de letra que tenha pelo menos dois pesos, regular e negrito. Tem mais, isso é ótimo. Mas outro fator é seu tamanho. Aqui está a coisa. Queremos que seja o menor possível em termos de kilobytes. Então, se estivermos indecisos sobre duas fontes semelhantes, optaremos pela menor. Estamos procurando as fontes sans serif porque queremos aquele visual limpo, nítido e moderno. E os tipos de letra serifados são os mais complicados. Eles também não funcionam. Finalmente, o ponto de busca essencial é a personalidade. Queremos algo semelhante para entregar, fazer arredondado, 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 isso significa, personalidade? Bem, vamos colocar desta forma. Se usarmos Arial, por exemplo você não ganhará nenhum design. As palavras do meu livro dedicaram muitos tipos de letra que não têm personalidade. Eles são simples, não atraem a atenção de forma alguma, a mistura, e isso é porque significa que são versáteis e podem ser usados em muitas circunstâncias. No contexto de um design AB, queremos que nosso texto se destaque, então nossa escolha pode fazer ou quebrar o design é muito importante. Agora, eu já mencionei Ariel, mas ultimamente, certos pesos do Open Sans robo, embora Source Sans Pro, e muitos outros se enquadram nessa categoria sem brilho. Essas são as fontes que você deve evitar. Ok, vamos começar com o Google Fonts. Vou desativar a serifa e a escrita à mão. E eu vou para a cidade procurando pelo menos quatro ou cinco tipos de letra. A primeira que chama minha atenção é Montserrat, que é uma das minhas favoritas. Vou examiná-los rapidamente porque a pesquisa real leva pelo menos 20 minutos. Ok? Agora o ubuntu tem muitas camadas. Então, são dois, mas não tenho certeza se é assim que você pronuncia. Acho que é o Ubunto. De qualquer forma. Continuando, Nieto, isso está lindo, então eu vou adicioná-lo também, diz que é um pouco leve demais, mas talvez tenha outros pesos. E podemos ver que tem muitos estilos. Finalmente, areia movediça, isso também é muito bonito. Agora, para manter as coisas curtas e concisas, vou parar por aqui. Mas quando você estiver fazendo isso sozinho, acesse mais tipos de letra. Quanto mais, melhor. E à medida que pratica, você começará a desenvolver um banco de dados mental de fontes com aparência básica. Você terá um comerciante com listas, o que você tem no próximo projeto. É por isso que não vou perder tempo percorrendo. Eu já sei o que estou procurando e você também fará se passar por este exercício, baixar o arquivo, extrair. E vou mostrar como eu os classifico rapidamente por tamanho, especialmente se você selecionou muitos tipos de letra. Agora, dentro dessa pasta, você vai pesquisar por TDF escuro. E isso vai revelar todos eles. Se você viu obter os arquivos no modo de detalhes, deve obter o tamanho e a coluna separada. E imediatamente podemos ver que o Ubunto é quatro vezes mais pesado que areia movediça, 400 kb versus 10. Por enquanto, ainda não vou riscá-lo da minha lista. Mas tem que parecer absolutamente fantástico para mantê-lo como uma opção. E isso porque todo mundo no espaço da abside é muito sensível ao tamanho do aplicativo. Na minha empresa, procurando constantemente cortar qualquer gordura. E isso estaria no topo da minha lista. A velocidade de carregamento é extremamente importante, portanto, tornar o aplicativo menor é essencial. Vamos acessar o Adobe XD e ver o que é o quê. Eu já os tenho instalados na pasta de fontes do meu sistema. Você só precisa copiá-los e colá-los. Vamos dar uma olhada na areia movediça. E não há mágica aqui. É apenas a magia da edição. Você precisa selecionar todas as camadas de texto e alterá-las. Vou acelerar o processo para que você possa ver o resultado final. Este é um processo muito demorado, mas eu quero que você pratique e que você acesse a web. Poderíamos usar vários recursos do Adobe XD para ir rapidamente até lá. Mas neste momento eu realmente quero que você faça isso da maneira manual. Ok. Agora, qual é a sua primeira impressão? Dê uma olhada, amplie e diminua o zoom. Isso é um vencedor? Não tenho certeza. Então, vamos continuar com os outros. Esteja ciente de que essas mudanças obviamente vão arruinar seu alinhamento. Portanto, talvez seja necessário fazer algumas mudanças aqui e ali. Agora, novamente, isso parece bastante sólido, considerando que, ao passar por isso muito rápido, poderíamos trabalhar com um maior grau de precisão, mas no momento não é necessário isso nesta etapa do processo. Ok, vamos para o próximo tipo de letra. Vamos limpar as coisas em algumas palestras no futuro. Por enquanto. Vamos continuar com as coisas. Tão legal, porém, isso é um pouco mais leve, mas vamos ver isso em ação. Esteja ciente de que existe outra versão chamada Nieto sands. Não queremos isso, só o normal. Então, minha impressão é que isso é semelhante à areia movediça, mas é um pouco mais arredondado. Você pode ver que, especialmente no prazo de entrega, a TV é muito mais nítida do que esta. Mas é uma disputa acirrada. Realmente depende do seu rosto. Agora vou ampliar enquanto tento todos os outros tipos de letra. Agradeço a Deus pelo poder de tudo. Lembre-se de que você precisa fazer isso sozinho e desenvolver muitas opções disponíveis nas fontes do Google. Não há alternativa ao trabalho árduo. Tente ser o mais eficiente possível. Você pode selecionar as camadas de texto em negrito e alterar o tipo de letra diretamente para esse peso. Isso significa que você precisa ser muito rápido com a técnica de clique do console. 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 isso, basta adicionar a tela de localização, a primeira. Não seria relevante. É como perguntar às pessoas na rua em quem elas estão votando. Eles dizem candidato X. E então você relatará que o estudo mostra 100% das pessoas querem votar no candidato X. Não funciona dessa forma. Não se engane. Para votar, isso não é suficiente. É o mesmo aqui. Apenas duas ou três camadas de texto, isso não é suficiente. Você tem que ver isso e os contextos em muitas e muitas situações. Portanto, use vários tipos de textos, camadas, títulos, descrições, subtítulos, números, fundo branco, fundo misto e assim por diante. Mas esteja ciente de que quanto mais pranchetas você incluir, a dificuldade aumenta. É por isso que não criamos todas as telas e deixamos essa etapa no final. Bem, isso também é possível. É muito melhor decidir o estilo de um aplicativo. No estágio inicial. Isso torna muito mais fácil mudar as coisas. Aqui estão todos os tipos de letra que eu seleciono para que você tenha esse arquivo anexado e sugiro que você explore cada opção. Xd pode emitir alguns avisos se você não tiver essas fontes instaladas. Primeiro, visite o Google Fonts para evitar interrupções. Cada tipo de letra tem seus próprios pontos fortes. Mas o que eu posso ver claramente desde o início é que o Ubunto não vale a pena. Parece bom, mas não é quatro vezes mais bom que os outros. Montserrat também é adorável. Mas, apesar de tudo, acho que o mais bonito não precisa. Tem muitos pesos. É bem pequeno, então não vai aumentar o tamanho do aplicativo. E tem esse zinco especial que o destaca, principalmente em sua variante preta. É bastante robusto e redondo. Considerando o público-alvo, acho que essa é uma ótima primeira escolha. Caso algo apareça posteriormente, podemos facilmente mudar o tipo de letra para qualquer uma dessas alternativas, bem como explorar outras. Mas isso encerra esta palestra. Fizemos um grande progresso e eu gostaria parabenizá-lo por continuar com o projeto. Eu vou te ver em um momento. Obrigada 29. Defina e refine o estilo do nosso aplicativo: Bem vindo de volta. É hora de reservar alguns minutos para que possamos definir o estilo AP. Estamos procurando cores, tamanhos de fonte, alturas de linha e assim por diante. Então, vamos aplicar tudo isso ao resto das telas. Eu sei que isso pode ser chato, mas temos uma técnica que salva vidas e esse é o painel de ativos. Vamos começar com o esquema de cores. Uma vez que esse painel esteja ativo, a partir daqui, o processo é assim. Digamos que escolhemos um cachimbo l, digamos São Francisco. Abrimos o seletor de cores e experimentamos vários tons, certo? O que é ótimo é que podemos ver a mudança em tempo real. Agora, para resumir, decidi usar esse um a um. Faça f49, que é um tom de azul muito escuro. Estou dizendo os códigos de cores exatos para que você possa acompanhar. Mas, honestamente, eu só brinquei com o seletor de cores até ficar feliz. É quase preto, mas é ideal para muitas camadas de texto. Agora, como aplicamos isso? Primeiro, adicionamos no painel Ativos. Vá até a cor e clique neste símbolo de adição. E assim, temos a amostra aqui para mostrar poder do painel de ativos. Um exemplo rápido, como esse título, paraíso do deserto, que está preto no momento. Agora, vá até o painel Ativos e deixe-o azul. Isso é mais rápido do que usar a área de preenchimento no painel de propriedades. Mas, na verdade, essa é a verdadeira razão pela qual esse painel é incrivelmente importante. Então, digamos que o cliente não goste dessa cor. Em vez disso, ele quer ler. Ok, aqui está. Você clica com o botão direito do mouse na amostra e escolhe Editar. Agora, vamos fazer qualquer alteração. E é tão fácil quanto isso. Ambas as camadas são atualizadas automaticamente. Duas camadas não são um grande problema. Mas imagine que temos 200 telas e quase 1.000 camadas de texto. É aí que o painel de ativos é absolutamente necessário. Então, vamos pressionar Control Z para desfazer. Para continuar, selecione três quadros de arte e mova-os separadamente, caso ainda não tenha feito isso. Temos que limpar um pouco as coisas. Quero a tela de localização, a tela principal do anúncio, na qual a classificação está flutuando na borda, no lado direito. E, finalmente, a Virgem, onde temos guias roláveis. Então, três telas no total e podemos construir nosso painel de ativos. Ok, vamos nos concentrar no segundo. O título é azul, mostrado em preto novo Nieto para o tamanho que poderíamos usar para D. Mas acho que um menor talvez melhor, acho que antes é uma boa escolha. O estilo também deve ser aplicado ao título do restaurante. Bem, no painel de ativos, você também pode fazer isso. Vá até Character Styles e clique neste Plus. E assim, você vai ver o novo Nieto 34. Meu conselho é renomeá-lo clicando com o botão direito do mouse, obter, chamá-lo de título ou algo parecido. Em seguida, vamos aplicá-lo. Clique na sobremesa com a tecla Control pressionada para selecioná-la e , em seguida, clique na entrada para testá-la. Vamos fazer uma mudança dramática. Então, clique com o botão direito nele e no painel Ativos, clique em editar e faça, por exemplo 50 pixels ou algo maluco parecido. E sim, funciona. Pressione Escape e, em seguida, Control Z para desfazer. Então, vamos começar do início. O título está pronto, certo? Mas e 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, F, F, E, C, z, z, entanto, que é um lindo laranja intenso. Em seguida, adicione-o ao painel Ativos. Então, meu plano é aplicá-lo a todos esses outros ícones. O menu suspenso, o filtro e a pesquisa. Use Control para selecionar o primeiro. Em seguida, adicione shift à seleção múltipla e elas ficarão laranjas. Adorável. Aplique a mesma cor nas etiquetas no canto inferior direito. Como você pode ver, com o mínimo de esforço para alterar o design e sem tempo algum. Basicamente, o que estamos fazendo agora é marcar cada item. Então, as tags já estavam em laranja, mas queríamos dizer ao Adobe XD que ele deveria aplicar esse estilo específico do painel de ativos. Basicamente, estamos conectando os pontos com a conexão da camada com o painel Ativos. E quanto ao prazo de entrega? Bem, isso precisa ser mostrado no novo Nieto regular 24, os pixels em um cinza bastante escuro. Vamos com 777. Podemos adicionar essa cor e também o estilo do personagem. Acho muito provável que usemos isso como corpo de texto principal, ou seja, a descrição de cada prato. Então, vamos renomeá-lo para body. Quero deixar claro que não tenho 100% de certeza. Talvez eu mude de ideia. Veremos à medida que avançamos, mas como temos o painel de ativos, podemos mudar rapidamente de ideia sobre a classificação. Vamos usar o novo Nieto 20. Tão bem pequeno. Podemos torná-lo cinza Esse é o código de cores 777, assim. Em seguida, selecione a peça de 92 por cento e torne-a preta. A propósito, preto em termos de peso, porque para a cor, vamos realmente ficar em verde, você pode experimentar o emoji porque mudamos a fonte, o alinhamento não faz nenhum sentido. Mas isso é uma solução rápida. Uma pergunta que você pode fazer, é esse Chris, como você escolheu o 34º preto para os títulos? Por que não 30, não 40? E a resposta é bem simples. Eu os experimentei. Fiz o upload do design no meu telefone e os comparo primeiro entre eles e depois com outros aplicativos que analisamos anteriormente e que pareciam ser a melhor escolha. O mesmo vale para todos os outros tamanhos. Ok, avance rápido, e esse é o nosso resultado. É assim que seu projeto deve ser nesta fase do jogo. Vamos fazer uma pausa rápida. Obrigada. 30. Pratique sua velocidade: Bem vindo de volta. Estamos na tela número dois e quero substituir todo esse conteúdo fictício aqui de todos os recursos que preparei para essa grade. Primeiro, as fotos, pegue-as e arraste-as sobre a primeira entrada. Se você achar que algum deles não está configurado corretamente, clique duas vezes neles e você pode reposicioná-los ou até mesmo redimensioná-los manualmente. Em seguida, vou arrastar os títulos. Lembre-se de que isso é apenas um arquivo de texto padrão. Não há nada de especial nisso. Ok? A posição não está boa. Mas o ponto principal é esse. Primeiro, precisamos mudar o texto para escrever uma linha. E só agora podemos posicioná-lo corretamente a 30 pixels da borda. E isso porque o comprimento muda. Incrível. Finalmente, os votos. Quando você arrasta o conteúdo, o estilo mudará e não há nada que você possa fazer para evitá-lo além de ter duas camadas separadas. Eu não quero fazer isso, então vou manter como está. Caso eu tenha tempo, posso alterar manualmente cada entrada, mas não conte com isso. Você pode perguntar, Chris, por que você está fazendo todas essas coisas? E é bem simples. Por um lado, é uma ótima prática. Você tem que se exercitar dia após dia e estar preparado. Em segundo lugar, é importante mostrarmos ao cliente e ao desenvolvedor algo que nos orgulha de ter conteúdo repetitivo falso, muito Lorem Ipsum, que simplesmente quebra a mágica. Então é por isso que eu tenho que fazer isso. E só para levar para casa, vamos diminuir o tamanho da foto em 40 pixels. Eu acho que isso é necessário. Então, clique com o botão direito do mouse e vamos dar uma olhada neles. Três sextos, vamos para 320. E para o cartão para eles de 70, vamos para 430. claro que nada está mais alinhado, mas sabemos que a mudança nos ajuda a mover as coisas e depois a incrementar pixels. Então, precisamos de quatro guias. A questão é: temos que redimensioná-lo? Não, mas como eu disse, não quero trabalhar duro e ver se consigo melhorar o design, se consigo torná-lo ainda melhor. E eu acho que isso parece melhor. Ok, quando você estiver pronto para ir, vamos passar para a tela para começar com o título, selecionar e aplicar o estilo de personagem chamado exatamente esse de Bell. Para a seta para trás e o ícone de informações, eles precisam estar na cor laranja. Excelente. Finalmente, vamos selecionar todos esses elementos e alinhá-los corretamente. Linda. Movendo para baixo, a guia ativa também precisa estar laranja, você saiba o que fazer com ela. Ok. O retângulo agora é laranja. Legal. Para as guias. Bem, para ser honesto, não tenho certeza. Vamos começar com o estilo do título. Agora. Obviamente, isso é muito grande, mas podemos reduzi-lo para talvez 26 pixels, como antes, as guias inativas recebem o tratamento azul. Então, vamos ter que consertar isso. Aqui está o que eu proponho. Vamos selecionar todos os outros itens e colocá-los em um arquivo de texto separado. Este precisa ser definido e Nieto 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 apenas o peso e a cor. Quanto ao ativo, isso deve ser feito de laranja. Agora, aqui está a questão. Talvez você não saiba quanto espaço deve deixar entre macarrão e pizza. Afinal, queremos o meio, o espaço entre pizza e risoto, certo? Mas como essa é uma camada única, você não consegue descobrir qual é a distância real. Bem, aqui está o truque. Adicione o retângulo entre esses dois e veja a largura. Depois de ter esse valor, é muito fácil com a camada selecionada, mantenha pressionada a tecla Alt e verifique a medição existente. Em seguida, ajuste-o com as teclas de seta. Talvez mude e você esteja pronto para ir. Ok, vamos reduzir os nomes dos pratos. Bem, acho que devem ser iguais à guia. Então essa agulha é preta, 26 pixels, mas desta vez e azul, o que eu adoro é o fato de ser uma grade, uma grade de repetição. Então, tudo muda. Portanto, é muito fácil avaliar o tamanho. Você pode facilmente brincar com ele. Mas, na verdade, estou feliz com isso. Para a descrição, vamos usar o estilo corporal. Nieto é uma fonte maior do que a padrão, mas eu quero manter apenas três linhas de texto. Então, redimensione se necessário. Para saber o preço e aguarde, vamos aplicar o estilo de 26 títulos e verificar a posição desejada na parte inferior alinhada com a miniatura. Mas aqui está a questão. Talvez você tenha que olhar para ele. Talvez você precise aproximá-lo. E isso porque essa fonte específica tem muito espaço extra na parte superior e na parte inferior. E não há nada que você possa fazer sobre isso. Portanto, o alinhamento de dois mundos não funcionará bem. Mas acho que o preço deve ser mostrado em laranja. Sim, eu acho que isso é muito melhor. Finalmente, adicionar ao carrinho também deve ser laranja. Afinal, é uma ação e precisa se destacar. E acredite ou não, acho que realmente terminamos com essa tela. Se houver mais alguma coisa que você queira editar, agora é a hora. Por exemplo, o peso do produto. Não tenho certeza se isso merece ser tão robusto. Não é tão importante. Então, vamos realmente torná-lo ousado em vez de preto. O fato é que o painel de ativos é absolutamente fabuloso. E você poderia fazer uma inscrição para cada pequena coisa. Como você deve ter notado. Mas eu não fiz isso. Eu não adicionei todos os estilos ao painel Ativos e isso é intencional. Não quero acrescentar muitas coisas e me confundir com isso. É hora de uma pausa rápida. Obrigada. 31. Conclua a primeira tela: Bem vindo de volta. Vamos lidar com a primeira tela, a de localização. Vamos começar do início e garantir que estamos na mesma página. O ícone precisa ser 18180, branco puro. Posicione-o a 80 pixels da borda superior. Essa é uma ótima chance de usar o campo y. Lembre-se de que esse é o eixo vertical e começa do topo. O nome do aplicativo, o live, deve ser escrito. Vamos discá-lo da seguinte maneira. Estou pensando em uma unidade totalmente preta, 70 pixels em branco puro. Ah, a propósito, acho que é melhor adicionarmos branco e também o painel de ativos. É só uma coisa rápida. Se movermos constantemente o mouse nessa área, é melhor ter o branco aqui também. Ok, agora centralizei na tela. E vamos colocá-lo a cerca de dez pixels do ícone, dar e receber. Isso é então o próximo. Acho que é seguro dizer que o laranja será a cor principal da ação. Vamos aplicá-la a esses dois botões. E quanto ao texto? Bem, primeiro de tudo, vamos mudar isso para mostrar aos restaurantes o que é mais do que significativo. Vamos começar com 26 títulos e ver o que é, qual é o tamanho em si, mas é um pouco grosso demais para esse tamanho pequeno. Então, vamos colocá-lo em negrito. E, na verdade, isso faz uma grande diferença. Não tenho certeza se você pode ver isso através da gravação, mas confie em mim, é bastante substancial. Verifique no seu telefone e o que você vai concordar comigo, ok. Centralizou o texto e depois centralizou o botão. Se você ainda não fez isso. O problema que estou tendo aqui é que a hierarquia não está clara. Então, vamos pensar sobre isso. Temos três ações disponíveis, certo? Você pode inserir o local e, em seguida, um botão de envio, pular esta etapa e passar para a próxima tela ou, finalmente, o número três, criar uma conta ou fazer login. Em geral, essas podem ser consideradas duas direções separadas, fazer login e registrar-se, mas vou combiná-las para facilitar. Então, como devemos fazer isso? Embora seja normal ter dois botões com o mesmo nível de importância, acho melhor aplicarmos estilo diferente para criar uma conta. Pelo que entendi do resumo, o processo de registro não é tão importante. Você pode ver os restaurantes sem se registrar. Então, isso significa que restaurantes esportivos são a prioridade. Essa é a primeira coisa e essa tela. Como tal, vamos torná-lo super largo, 656. Ok, também devemos aumentar sua altura para 90 pixels, só para que ela se destaque ainda mais. A propósito, centralizou os textos mais uma vez. No momento, o campo precisa corresponder aos botões que temos. Então, 656 também, as coisas estão mudando rapidamente, mas lembre-se das barras sempre que precisar. Para o texto. Isso é oficialmente chamado de dica. Por favor, aplique o estilo do corpo do texto. Quando o usuário toca no campo, a mão vai embora, centralizá-la e deixar cerca de 30 pixels à esquerda. Isso deve parecer bom, e eu acho que é muito bom. Nosso progresso é decente, mas vamos manter o ritmo. Eu pausei a gravação e procurei o belo ícone do GPS. Aqui está, você o tem anexado. O tamanho é 28 por 40 pixels. Ao criar sua própria versão, certifique-se de encontrar seus próprios ícones. Deixe-o laranja porque você pode tocá-lo para que o aplicativo obtenha seu endereço automaticamente, coloque-o no lado direito do campo e deixe 30 pixels à direita. Falando em 30, isso é o que eu quero deixar entre esses dois itens. Então selecione o campo, dê uma dica à Nikon e agrupe-os. Isso facilitará o reposicionamento, se necessário. Como eu disse, deixe 30 pixels entre os dois e coloque-os em algum lugar próximo ao centro da tela. se apresse com isso, mova-os e deixe X d ajudá-lo. Ok, vamos pensar que essa é a parte mais importante na tela. Mas então o que vem a seguir? Acho que criar uma conta vem em segundo lugar. Agora também poderíamos dar um botão laranja, mas acho que isso vai competir com restaurantes de show. Como tal. Acho melhor colocá-lo na parte inferior da tela. Mas primeiro, vamos seguir em frente, pule essa etapa do estilo. Vamos fazer isso. Aumente a altura para 100 pixels para que você não perca. Isso não é exatamente enorme, mas é um pouco maior do que o principal apelo à ação. Faça com que o preto puro coloque sua opacidade em até 60 por cento. Não há fronteira para isso, apenas no caso de você ainda tê-la ligada. A ideia é dar a ele muito espaço, mas sem fazer com que se destaque demais. É por isso que escolhi o preto e a baixa opacidade faz que ele abranja toda a largura da tela. Então, isso significa 720 pixels. Alinhe-o corretamente e agora você deve ver aonde estou indo com ele. Quando terminar, altere o texto para criar uma conta ou faça login com C maiúsculo Todos esses detalhes realmente importam no final do dia. Finalmente, vamos enviar o desvio vermelho M, onde M significa meio, e Shift C com C significa Center. Mas, obviamente, você precisa que as duas camadas selecionem isso. Coisas boas. No geral, esse é um bom design para a reação do segundo ano. Vamos dar uma boa olhada em nosso design durante uma pausa rápida. Obrigada 32. Um novo estilo de botão para ter um excelente fluxo: Bem vindo de volta. Ainda temos um item principal. Ignore esta etapa. Vou usar algo novo. Comece com um retângulo de 300 por 90 pixels. Mantenha o raio equivalente ao anterior, cinco pixels. Isso é sem dúvida. Nunca misture esses valores. Você escolhe um e continua com ele. Se você não gostar, mude para dez, mas precisa mudar em todos os lugares. Agora centrado no quadro de arte. E aqui está o problema, por favor, desative o preenchimento. O que vamos fazer é criar um botão chamado botão fantasma. Fantasma porque não tem corpo. É por isso que desativamos o preenchimento. Em vez disso, vamos usar uma borda grossa, três pixels, branco puro. A propósito, certifique-se de que a ortografia está correta e que todas as letras, a primeira letra da palavra, ou seja, centralizem a primeira letra da palavra, ou seja tudo corretamente. Mas aqui está a questão. Talvez você não tenha contraste suficiente em relação à imagem de fundo, especialmente se você usar outra foto. Agora, com certeza poderíamos aumentar a opacidade, mas mesmo isso pode não ser suficiente. Além disso, o mais importante é que, quando você não tem preenchimento, esses botões são incrivelmente difíceis de selecionar. Isso. Aqui está o que eu proponho. Ative o campo novamente e torne-o preto puro, depois diminua sua opacidade para cerca de 30 por cento do. Então. Talvez seja necessário ativar o painel de camadas e alterar a ordem dessas camadas. Mas isso não é um problema ou a tecla Control Square Bracket. A propósito, eu odeio o fato de poder ver meu painel Layers e meu painel de ativos ao mesmo tempo. Já se passaram anos e acho que não haverá painéis flutuantes em breve. É uma pena. De volta ao design. Vamos analisar isso. Portanto, o logotipo está na parte superior. Você olha para ele e depois desce bem no meio, você tem a área principal onde você deve colocar em sua localização. incríveis e legais. É grande, é brilhante, se destaca. Agora, a questão é: podemos adicionar mais detalhes extras para torná-lo ainda mais bonito? Bem, uma ideia é incluir um ícone dentro do botão laranja. Mas, em vez disso, vamos fazer algo um pouco mais interessante, um efeito de sangramento. Portanto, selecione o retângulo laranja e ative uma sombra projetada caso você tenha uma borda, desative-a. Não precisamos disso para a cor. Não queremos que a sombra seja preta. Então use o conta-gotas e selecione essa laranja. Lembre-se de que você não pode usar o painel de ativos nesse caso. Para as configurações. Já fiz isso 1 milhão de vezes. Então, aqui está o que funciona melhor, cinco para o campo y e 15 para o B. Finalmente, defina a opacidade para cerca de 60 por cento. Depois de desmarcar, você verá o que quero dizer, um efeito de sangramento. Basicamente, é um efeito semelhante ao neon. Ele se destaca bastante. E é apenas um detalhe extra que alguns clientes podem adorar ou podem dizer isso. Mas, de qualquer forma, eu vou deixar isso porque eu fico quieto. Apreciado. Ok. O que mais? Bem, eu não gosto da posição de pular essa etapa. Está apenas flutuando. Poderíamos aproximá-lo, mas eu prefiro não ouvir toques acidentais nele. Então, em vez disso, vamos fazer isso. Obtenha a ferramenta de digitação, tecla de atalho D e escreva ou agulha, negrito, 26 pexels, divórcio branco puro. Então, ou como alternativa, centralize-o horizontalmente e mova-o 50 pixels do botão laranja. Agora, aqui está o que queremos simetria em todos os casos, é algo que você deve sempre buscar. Então, se tivermos 50 no topo, precisamos de 50 entre pular esta etapa e este item aqui. Segure Alt e meça as coisas. Em seguida, use as setas no teclado. Ok, isso está chamando a atenção, mas não é o fim. Entenda bem a linha, tecla de atalho L. Vamos fazer algumas contas. Sabemos que esses caras têm 656 pixels de largura. Então, eu quero o divisor aqui, mas sem passar por essa palavra, acho que 50 pixels já são suficientes. Então, vamos fazer isso. 656 -50 é 606/2, ou seja, 30 a B. Ok, então vamos arrastar uma linha e redimensionar esses 303 pixels. Mantenha a tecla Shift pressionada ao adicionar qualquer linha para obter uma reta de 1303, branca pura. As linhas não têm preenchimentos, então não tente usar o painel de ativos nelas. Não vai funcionar. Deixe-o branco no painel de propriedades, é claro. E para a espessura, vou usar dois pixels. Um é um pouco pequeno demais para ser demais. Agora, duplique-o, arraste Control D ou Alt e posicione-o do outro lado. Deve ser bem fácil de alinhar. Você tem aquele botão laranja na parte superior, então, por favor, use-o. Quando estiver pronto, centralize e agrupe tudo junto com o Controle G. E eu acho que esse realmente é o bolo. Parece interessante e ajuda o usuário a navegar por suas opções. Ok, vamos fazer uma pausa e depois faremos uma análise completa. Obrigada 33. VISÃO GERAL: Bem-vindo de volta e parabéns. Você acabou de terminar a primeira parte do nosso aplicativo de entrega de comida. Sei que foi uma jornada e tanto, mas espero que você tenha chegado a este ponto com o mínimo de roer as unhas, palavrões e arranhões na cabeça. O processo é um pouco difícil no começo. Muito semelhante ao quebra-cabeça de 1.000 AEC. Mas à medida que você avança peça por peça, toda a imagem fica mais clara e você pode ganhar velocidade. Não posso enfatizar 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 na agência de design ou em qualquer plataforma de freelancer. Não sou eu me gabando, mas a maioria dos tutoriais projetados não mostra uma recaída. São apenas fotos bonitas e pronto. Não há nenhuma ideia ou funcionalidade por trás deles. E isso é como aprender a andar de bicicleta quando o mundo está cheio de monster trucks. Então, enquanto o processo de aprendizado é difícil, acredito firmemente que quanto mais difícil o treinamento, mais fácil é a luta. Ou seja, quando você consegue o emprego, você pode realmente brilhar porque passou por esse treinamento. Ainda temos um longo caminho a percorrer. Mas veja onde começamos um wireframe, o layout, depois alguns experimentos de design, escolhemos um tipo de letra ou esquema de cores, e resolvemos os problemas reais tentando caber tantos restaurantes e quanto tantos pratos quanto possível sem fazer com que a tela pareça ocupada. Falamos sobre ter a proporção certa para as fotos, a cadeia de comando, também conhecida como hierarquia. Usamos cartões, ícones, várias técnicas de topografia e aprendemos a usar o painel de ativos. Mais uma vez, do fundo do meu coração, parabéns por ter chegado até aqui. Fique comigo e você se sairá ainda melhor. Porém, a primeira tela é provavelmente a mais complicada. Isso porque você pode digitar sua localização nesse campo, mas também pode usar o GPS do seu telefone. Você também pode pular essa etapa. E o aplicativo mostrará os restaurantes do laboratório, apenas da cidade. Tudo isso está no resumo e espero que você o leia. Finalmente, você pode se registrar ou fazer login. Saber estruturar todas essas ações não é brincadeira. Não é pouca coisa. Nós os classificamos por sua importância e , em seguida, tomamos as decisões de design de acordo. É por isso que usamos o botão fantasma, por exemplo, é por isso que diminuímos a opacidade desse retângulo. Em suma, novamente, parabéns, trabalho fantástico por chegar aqui. vejo em um segundo.