Dicas de design rápidas e abrangentes

1. Introdução: Ei, o que se passa, pessoal? Sou designer e empreendedor e tenho desenhado há cinco ou dez anos. Trabalhei com todos os tipos de negócios, desde pequenas empresas locais até empresas multibilionárias. Neste curso, eu vou estar compartilhando algumas dicas de design rápidas que eu aprendi ao longo dos anos estão projetando. Espero que você possa aplicá-los aos seus próprios projetos. Então vamos entrar nisso. 2. Escolha sua personalidade: Quando se trata de projetar qualquer coisa, o que quer que você tenha um treino, a personalidade que você quer dar ao seu site ou o que quer que seja que você está trabalhando aplicativo, site, o que quer que seja. Então eu queria olhar para dois sites que têm muito diferentes e têm personalidades muito distintas. Então, este site de chegada, você pode ver que é muito inteligente em corpora, muito moderno. Você pode ver que todos os botões são muito quadrados. Você pode ver as fontes também muito quadrado, paleta de cores muito minimalista, bem, apenas pretos, brancos pastar. E sim, muito inteligente e sofisticado design e personalidade. Denis dando, mesmo com as fontes, tendo fontes maiúsculas como esta, onde o espaçamento entre as letras também, apenas uma abordagem muito moderna. No entanto, quando olhamos para o hunk, que é um aplicativo de mensagens, você pode ver muito, muito diferente. Ele usa cores muito mais claras. Tem cantos arredondados, cantos muito, muito arredondados. Mesmo a fonte em si que eles usam tem cantos arredondados no final, o botão é muito arredondado. Você pode ver essas pequenas animações peculiares. Há muitas cores diferentes acontecendo. Os ícones, você sabe, saltam ao redor, se movem. Um olhar muito diferente e muito mais amigável resolver olhar. Parece muito bom. Este site e o site de chegada parecem fantásticos. Eles têm personalidades muito diferentes. Então, sempre que você está projetando algo funcionou o que sua personalidade é, quais as personalidades que você está tentando atravessar para essa marca, para aquele site, e ir a partir daí. É bom olhar para outros exemplos, é bom olhar para outros sites e ver o que eles fazem quando se trata de entregar sua personalidade. Então, como um exemplo rápido, eu vou zombar de dois diferentes viu um site não é sites completos, mas apenas para dar uma idéia de como é adicionar personalidade a um site. Então vamos adicionar um quadro em FISMA. Vamos fazer este 1200 largura na verdade, vamos torná-lo um pouco mais largo. Podemos torná-lo mais largo e ajustá-lo? Sim, podemos. Ok. Ótima. Então, sim, acho que vou fazer um site bancário. Então agora ela colocou o banco no topo aqui. E nós vamos para uma paleta de cores minimalista pi por enquanto. E vamos também colocar alguns títulos. Então, faça login, inscreva-se. Vou ser muito rápido com a Alice. Vamos adicionar um retângulo. Navbar. Por exemplo. Vamos derrubar isso. Queremos pegar tudo isso e alinhá-los. E quando se trata da fonte, o que vamos fazer é usar, porque eu acho que é um telefone muito bom, inteligente e sofisticado. Ele também tem bordas muito afiadas. Vamos fazer o logotipo um pouco maior. Eu acho que fazer fontes negrito também pode ajudar a dar-lhe um olhar mais nervoso para ele. Vamos fazer isto branco também. Vamos para e splash e novamente, imagem para incluir em nosso design. Então vamos colocar essa imagem. Vamos fazê-lo caber dentro, é claro, trazendo debaixo de tudo. E então nós realmente queremos isso na área do quadro. O que vamos fazer é também adicionar um Sim, vamos adicionar um preenchimento no topo dele. Faça um preenchimento sólido. E obedecendo a opacidade para baixo. Talvez dois em torno de 70% também tornarão essa cor escura. Colocou em torno de seus olhos, fazer estes brancos. Vamos fazer isso um pouco maior. T 14, acho que é bom. E o espaçamento entre eles semi inclinou as cores sobre eles. E o que eu realmente vou fazer é eu vou remover este cabeçalho. E eu acho que realmente olhar bom, olhar melhor sem o cabeçalho. E estes para cima novamente para virar lá. E então vamos adicionar uma cópia agora porque é preta. Mas vamos torná-lo um pouco maior. Como dizer, um espaço extra lá. Traga para o meio. Vamos também adicionar algum texto por baixo. Vamos fazer isso como dizer portão. E vamos fazer isso, obviamente, muito menor. Talvez 16 bits D muito ontem nós melhoramos Alex. Talvez consigamos esta camiseta de cor. Vamos adicionar um botão. O botão, a gola dourada. Agora nós tivemos como dizer, bem na verdade eu acho que vai precisar ser vamos torná-lo um pouco mais escuro na cor. A coisa parece muito boa. Para torná-lo semi-curvado. Também faz esse botão um pouco maior. Então eu mudei a cor do botão porque eu acho que o azul realmente parece um pouco melhor. Mas sim, lá estamos nós. Acabamos de fazer um tipo muito rápido de cabeçalho do site bancário. E escolhi uma imagem muito simples. A imagem corporativa usa fontes muito modernas com bordas afiadas, botões sem nenhum tipo de raio neles. E de como ele só parece muito corporativo e muito comercial, muito bancário, como nós vamos dar-lhe um nome de banco. E o que faremos é fazer outro. E este, digamos que está mais relacionado à moda, porque vai haver uma aparência muito, muito diferente. Então vamos dar o nome apenas moda. Muito fácil. Então, para esta, vamos usar uma fonte chamada Made Mirage, a minha favorita. E mudamos todas as fontes. Eu deveria usar t fontes vai usar feito miragem e vamos usar termini porque nós estamos indo para mais de um olhar de moda. Usamos alguns fundos diferentes para este. Então terminar novamente é uma das minhas fontes favoritas. Acho que parece fantástico. Fazer todos vocês suíte maiúscula. E talvez façamos isso como um blog. Contacto. Cu também vai fazer a perna um pouco maior e é um pouco menor. Eles são como o lado. O que vamos fazer é remover a imagem de fundo e, em seguida, vamos para e splash. E vamos procurar uma imagem relacionada à moda. Então vamos usar esta imagem aqui. Vamos remover este texto onde fizemos o botão também. Quando tivermos tudo, usaremos esta imagem aqui. Torná-lo, obviamente, muito menor do que isso. Talvez façamos isso por aqui. Também traga isso para baixo um pouco mais, traga o quadro para baixo um pouco. Nós manteríamos fora 1400 área úmida. E vamos colocar algo como um grande título na nossa fonte favorita. Faça-o branco. E vamos torná-lo enorme também. Algo assim. Isso torna menos, certifique-se de que tudo está centrado também. E nós somos, o que vamos fazer isso também, vamos realmente cortar esta imagem. Então faça um retângulo daqui até aqui e pegue a imagem. E usamos mesquita. E mais uma vez, acho que é melhor. Poderíamos até tornar este título ainda maior. Sim, vamos fazer ainda maior assim. E vamos torná-lo um pouco magro no T, cara da Marinha. E o que vamos fazer é adicionar algum texto abaixo. Eu, talvez apenas uma mensagem falsa. Como dizer, acho que isso pode ser um pouco demais de texto falso. Mostre-me um pouco. E também torná-lo um pouco menor. Pode adicionar uma data. E faremos desta data um termo e uma fonte. Vamos aumentar a altura da linha em que t. E então podemos adicionar um botão para dizer, leia mais. Novamente. Vamos fazer com que seja a nossa outra fonte. E sim, lá estamos nós. Nós só temos um tipo muito rápido de blogs de moda ou coisa que eu preparei. E parece obviamente muito diferente nosso site bancário corporativo que fizemos anteriormente. E essa é apenas uma maneira muito rápida e fácil de adicionar alguma personalidade em um site. Descubra a personalidade que você pode usar. Fontes diferentes são formas de botão diferentes. Seja o que for, olhe para a inspiração e aplique sua própria personalidade aos próprios sites. 3. Não use greys: Quando você começa a projetar, é realmente muito fácil apenas usar pretos, cinza e branco quando se trata de seu design. Mas o que eu gosto de fazer é, é diferente dos de raspão que têm um toque de cor neles. Seja uma dica azulada, uma dica verdejante ou uma dica amarelada para eles. Ou talvez até mesmo como uma dica vermelha para dar um olhar mais quente. E em uma pitada de cor para seus cinzentos pode realmente viver e design superior e transformar a forma como ele parece. Então eu vou rapidamente mostrar a vocês como é apenas fazer um pouco de graça normal e, em seguida, adicionar alguns cinza com algumas cores aqui. E o sigma fará uma paleta de cores rápida. Dê botões acima ao virar do canto. Eu adoro meus botões ter cantos arredondados. E vejo-te quando começarmos com preto. Fará uma cor preta. Cor cinza. Fez outro cinza em algum lugar por lá. Vamos nos certificar que na verdade estes são o ACGME vai me matar. Então aqui temos um monte de negros, cinza e brancos. Parece bem. Você pode usar isso em seu design. E eu às vezes usei cores completamente pretas e completamente cinza no meu design. Não há nada de errado com isso. No entanto, se o seu site tem uma cor de acento, por exemplo, azul, não vejo por que você pode adicionar um pouco de azul à sua graça. Então vamos fazer isso. Então fizemos este IVR e vamos trazer isso para cima, mas vamos trazê-lo para o azul por aqui. E o que vamos fazer é trazê-lo aqui, algures por aqui. Agora, é muito, muito sutil. E então se você começar a ver em sua tela, mas você pode ver que isso é muito um breu preto, mas isso é mais uma espécie de azul em preto chave de certa forma. E o que faremos é fazer tons diferentes daquele cinza. Então, à medida que passamos pela faixa de cores, podemos apenas usar o seletor de cores. E nós gostaríamos de fazer é que eu gostaria de ir nesse tipo de ângulo, você poderia dizer. Então. Não apenas como em linha reta, eu gosto de tipo de ir em um ângulo, dizer assim basicamente. Mas vamos voltar ao que você está fazendo. Vá por aqui, talvez. Sim, acho que parece muito bom. Por aqui, eu acho. Sim. Na verdade, vamos torná-lo um pouco mais escuro. E aí, que cor a mesa dele, o deserto B. Então vamos fazer isso em torno de um. B, eu acho. Por ali. Sim. O que é isto? Isso é um D. Então traga sua atitude D por aí. E, finalmente, B1, última cor. Agora estamos. Como podem ver, há uma pitada de azul nesses cinzentos. E eu acho que ele só adiciona um pouco mais de cor e característica a qualquer design em que você trabalha. E essa é uma maneira muito rápida de fazer uma paleta de cores de cinza com um toque de cor neles. Então, aqui eu rapidamente mocked um aplicativo apenas usando pretos, cinza, e brancos, e imediatamente parece bem. Mas carece de personalidade. Eu digo isso porque isso me faz rir com depois sorte eu iria projetar fora que se parece com isso de qualquer maneira. E, mas, de qualquer maneira, queríamos adicionar um pouco de cor a este aplicativo. Então vamos mudar a nossa Graça e dar-lhes um pouco de cor. Então vamos começar primeiro com o fundo. Então vamos escolher um azul que gostamos. Traga-o. E já podemos ver que há uma pequena mudança entre este e aquele. Vamos mudar o ícone do hambúrguer. Vamos escolher Audivelmente chão Pat. E vamos trazer isso à tona. Talvez dois por lá. Sim, eu gosto de lá. Eu acho. Faça o mesmo com o ícone do sino de notificação. E nós vamos passar lentamente e mudar a cor do nosso pasto também um pouco mais azul. Vamos torná-lo um pouco mais leve. Na verdade. Lá vai você. Opa. Essa é a cor errada. Então você já pode ver que isso está fazendo uma grande diferença. Você já pode ver que há um pouco de cor dentro do próprio aplicativo real. Então vamos continuar. Mude isso. Sim. E então também adicionaremos uma cor ao nosso botão porque o nosso botão está atualmente apenas cinza. Digamos, vamos dar uma área de cor. Isso parece muito bom. Vamos dar às nossas cartas um pouco de cor também. Talvez até tenha mudado um pouco aqui. Guy. Mudou a barra de progresso , é bom, que um pouco de cor assim. Estamos muito bem em ângulo de novo, estamos chegando lá, estamos chegando lá. Chegando lá muito, muito rápido. Vamos ampliar um pouco para que possamos mudar essas cores também. Então, quando se trata de algo assim, este botão, muitas pessoas, o que eles geralmente fazem é que eles fazem Y, e então eles provavelmente dão uma capacidade de 50, por exemplo. Mas acho que é um erro que muitas pessoas cometem. E, e eu acho que parece certo. A melhor coisa que eu achei que você deveria fazer é que você realmente deve dar ao botão uma cor que é mais uma espécie de azul mais claro ou cor mais clara assim. Eu só acho que isso parece muito melhor do que apenas usar um branco e, em seguida, mudá-lo para dar-lhe alguma capacidade faria isso para estes para realmente nós usamos o fundo meio como dizer entre trazer estes virar para lá. Sim, acho que vai funcionar. E novamente, com este texto aqui, o, eu acho que a maioria das pessoas iria torná-lo branco e, em seguida, dar-lhe uma opacidade. Mas não queremos fazer isso. Queremos dar-lhe um tom azulado, mas de uma cor azul para ele assim. E então podemos fazer o mesmo com os outros. Sabes que mais, vou copiar e colar este só para tornar isto um pouco mais fácil para mim. E lá estamos nós. Você pode ver que tomamos um ótimo aplicativo, aplicativo cinza muito escuro, e temos dado um pouco de cor e parece muito diferente. Dá à Apple um pouco mais de personalidade, dá-lhe um pouco mais de cor, e apenas faz parecer que há algum tipo de marca por trás dela. Então, sim, é ótimo usar cinza. Você não pode usar negros e cinza se é esse o olhar que você quer. Mas se a sua marca tem uma cor de acento como uma cor azul como aqui, então eu acho que é sempre uma boa idéia adicionar um pouco de azul à sua graça, seus pretos e brancos. 4. Espaçamento entre letras: Algo que eu gosto de fazer quando se trata de meus designs é que eu gosto de aumentar ou diminuir o espaçamento das letras dependendo do texto e do contexto. Então, por exemplo, aqui temos uma imagem, temos uma categoria, temos um título, e temos algum texto. Alguém manda mensagens. E eu vou e faço é eu vou copiar tudo isso para que eu possa te mostrar um antes e um depois. Então vamos copiá-lo ali. Sim. E então o que faremos é fazer isso em maiúsculas. E então aumentaremos o espaçamento das letras como se 50%. Isso é um pouco demais. Vamos fazer 10%. Lá estamos nós. Acho que parece muito bom. E eu acho que isso funciona muito bem quando se trata de pequenos pedaços de texto como esse, etiquetas de luz interna e coisas assim. Ter letras maiúsculas com algum espaçamento parece muito melhor do que o que você vê aqui. Mas quando se trata de títulos, o que eu realmente gosto de fazer é diminuir o espaçamento das letras. Então vamos diminuir para talvez menos 5%, algo assim. E lá estamos nós. Faz com que as letras sejam muito mais próximas e parece mais um título. E você pode realmente ver a diferença. Decida onde não há espaçamento de chumbo e este lado onde há maior espaçamento a laser e menor espaçamento entre letras. 5. Altura de linha de texto: Tanta programação desenhada. E geralmente quando você desenvolve um site ou site de código e coloca texto, o texto pode parecer um pouco compacto demais, muito próximo. Torna a leitura do texto muito mais difícil do que deveria ser. E um muito fácil de, o que muitas pessoas eu acho que perdem. É só para aumentar a altura da linha. Então, se formos para aumentar a altura da linha onde ela apenas aqui, está atualmente em 17 como seu padrão. Mas se aumentarmos para 22, por exemplo, instantaneamente podemos ver que é muito mais fácil de ler. Há muito mais espaçamento entre cada linha. Nossos olhos acham muito mais fácil ler cada linha também. E isso ajuda muito quando se trata de legibilidade. Agora, a única coisa com isso é que você não quer ter a mesma linha alta. Se você tem um título, digamos, por exemplo, se eu, ou mesmo apenas uma fonte maior em geral. Então, se eu fizer este um pouco maior, porque é meio que tem 14. E então colocamos a altura da linha também. Como este. Ainda é bastante legível, mesmo com uma fonte maior. Mas quando realmente aumentar a altura da linha para fontes maiores, você não quer aumentá-la tanto quanto faria com um parágrafo. Então, atualmente está em 29 como o padrão, a menos que apenas aumente para 32. E sim, você pode ver instantaneamente que é muito mais fácil de ler. O que eu vou fazer é realmente fazer estes um pouco menores apenas para mostrar a vocês os diferentes lado a lado, quanto de uma diferença de leitarias. Então, se copiarmos e colarmos dias, traga-os aqui. E então colocamos auto como uma altura de linha. Podemos ver que este lado aqui está com a altura da linha aumentada. E este lado aqui é apenas uma altura de linha e alterá-lo. E é muito mais fácil ler o lado que tem a altura da linha aumentada. Então você tem uma dica muito rápida e simples para qualquer um que está fazendo site, qualquer um que está lidando com qualquer tipo de grandes corpos de texto. 6. Largura de parágrafos: Projetando qualquer site, ou talvez você esteja projetando um blog ou algo assim. Temos perda de texto. É muito fácil ter imagens grandes e grandes corpos de texto. No entanto, eu confundir Garcia fabricantes lóbulos em um trecho do texto todo o caminho através do site, todo o caminho através, apenas para fazer parecer que ele se encaixa na imagem. Mas isso é completamente errado e nem sempre você deve fazer as coisas porque torna a leitura do texto bastante difícil. Seus olhos realmente têm que ir e voltar para ler cada frase. E na verdade é bastante cansativo e bastante irritante para o leitor. Então, uma coisa muito simples a fazer é apenas diminuir a largura do seu texto. E uma boa regra geral é mantê-lo entre 40 a 80 caracteres por linha. Agora, obviamente, não é realmente tão fácil contar cada caractere que você tem em cada linha. Mas à medida que você continua fazendo isso, medida que você resolve, mexe com o design, como atrevido, mexendo com a largura do texto, você tem uma boa idéia do que é mais fácil ler e o que funciona com a fonte que você está usando. Então, sim, outra dica muito rápida para tornar seu texto mais fácil de ler. 7. Tornar seus formulários melhores: Então, quando se trata de formulários, vejo que sites de log têm formulários que se parecem com isso, onde você tem todos esses campos de entrada e eles parecem ser muito largos. E não há separação. Apenas um monte de campos de entrada. E não é muito fácil de usar, só não parece muito arrumado e arrumado. E algo que você queira preencher. Agora é realmente muito fácil corrigir isso e é realmente fácil separar cada parte do formulário e apenas torná-lo mais tipo de digerível para o usuário que está preenchendo o formulário. Então o que vamos fazer é copiar isto e vamos começar primeiro no topo do formulário. Então vamos começar a separar as coisas. Vamos adicionar uma fronteira aqui. Torná-lo t pixels. Dê um cinza muito claro. Na verdade, podemos fazer um pixel. E vamos mover todos esses formulários para baixo. Então vamos fazer a nossa forma de pouco, um pouco maior como o seno. Então vamos mover tudo um pouco para baixo. Lá estamos nós. Só para nos dar espaço. O que vamos fazer é separar os campos de entrada. Então temos os campos de entrada à direita e depois à esquerda e temos uma descrição dessa seção. Então, por exemplo, aqui podemos nomear informações do usuário, por exemplo. Faça com que seja semi osso como costura. E então podemos colocar uma descrição para essa seção, que eu acho que pode ser muito útil, especialmente para as pessoas que estão se inscrevendo. Pode-se também ajudar aqui está trabalhando em um sistema de grade. Assim, podemos ver que o campo de entrada em si é 880 de largura. E podemos dividir isso em três e colocar 20 pixels de movimento panorâmico entre cada um. Isso nos dá uma coluna de 280. Então podemos fazer este 280 por exemplo, assim. E então nós trazemos isso aqui, dar 20 pixels de preenchimento. Então mova-o por 20 pixels, 12, e então faça nosso campo de entrada para 80. Como dizer, no entanto, quando se trata do InputField real, não sinto que você tem que manter o 280. O que eu gosto de fazer é eu gosto de projetar o campo de entrada enquanto a largura do campo de entrada, dependendo de quanto tempo a entrada eu acho que será. Assim, por exemplo, com um endereço de rua que pode variar muito, pode ser muito longo ou muito curto. Então você tem que pensar sobre o comprimento do campo de entrada e o que você espera entrar lá. Então, nome e sobrenome, geralmente não são loucos, então podemos trazê-los aqui. E podemos fazer aqueles 280. E acho que haverá muito problema. Então lá vamos nós. Temos nossa primeira seção e já podemos ver que é uma enorme diferença em comparação com o que vemos aqui, vai abordar na próxima seção, que é a seção de endereço. Então, nesta seção, vamos chamá-lo de endereço de cobrança. Porque, obviamente, este é um formulário de registro de pagamento suave. Então chame de endereço de cobrança, assim. Vamos copiar isto. E como eu disse, eu não sinto que você tem que fazer o campo de entrada para 80. E com um endereço único , pode variar muito. Então eu acho que é realmente uma boa idéia ter isso como um campo de imput de largura total. Eu acho que o campo da cidade poderia realmente ficar como um 2-SAT com o mesmo com o Estado e campo County pode apenas fazê-lo para 80 aqui rapidamente, assim. mesmo com o campo país e, em seguida, o mesmo com o CEP. E então temos nossa seção final, que é a informação do cartão. Então vamos copiar isto. E podemos colocar algo como apenas para tranquilizar o usuário. Fazer algo agora vai aumentar a altura da linha. Traga o nome do titular do cartão. Sim, eu acho que na verdade seria uma boa idéia fazer este tipo de número de cartão de comprimento, eu acho que poderia realmente ser 2-SAT. E o que vamos fazer é manter o número do cartão na sua própria linha. Porque acho que faz muito mais sentido. Ter entrado assim. Assim, vamos trazer o botão de registo lá em cima. E então também tornaremos nossa forma compacta. E lá vamos nós. Já podemos ver que há uma enorme diferença em comparação com o que temos aqui. Nós realmente pegamos todos esses campos, imput campo, e tornamos o formulário em si mais compacto e também tornou-o muito mais legível para o usuário. Eles podem ver o que precisam preencher. Eles podem ver separações claras entre cada parte do formulário apenas torna muito mais digerível para o usuário. E essa é uma maneira muito rápida e fácil de tornar seus formulários muito mais fáceis de ler. 8. Botões de rádio: Normalmente, quando você desenha um formulário, às vezes você tem botões de rádio como este e eles funcionam, eles pareciam bem, mas eu acho que podemos fazer um trabalho muito melhor aqui e fazer esses botões de rádio parecerem melhores. Então vamos copiar tudo isso, trazê-lo para baixo assim. Vamos remover os raios. E então o que vamos fazer é colocar em um retângulo, como dizer, talvez dar alguns cantos arredondados. Faça-o branco. Dê-lhe uma sombra. Traga isso aqui. O que eu vou fazer é realmente para torná-lo mais fácil, eu vou apenas puxar tudo isso para uma pasta, separar isso para uma nova camada de texto. E então vamos fazer isso um pouco maior. Talvez 18 na verdade, vamos fazer 1618, talvez um pouco grande demais. Nós ficamos semi curvados. E qual é o preço? Um pouco maior para trazê-lo. E, em seguida, por baixo aqui, podemos colocar um texto falso. Grande T, grande. Na verdade, deletar uma linha. E acho que isso já está muito melhor. Então vamos copiá-lo para os outros também. Então vamos transformar isso em um grupo. E então nós também podemos talvez fazer um projeto para este selecionado. Podemos mudar a cor disto. Para ser bastante provável. Talvez. Vamos adicionar um strike a ele. E B fará sua greve para nomear novamente. Na verdade, vamos torná-lo mais brilhante também. Acho que devemos definitivamente morder. Talvez assim. Talvez anti cor um pouco mais leve para qualquer cara. E agora estamos, é tão simples quanto isso. Você pode ver que nós pegamos seus botões de rádio padrão e apenas os fizemos parecer muito mais bonitos e uma descrição. E apenas tornou mais fácil de lê-los e adicionou um toque de design bastante agradável para eles. 9. Cores de ícones: Então, um erro comum que eu vejo quando as pessoas projetam interfaces de usuário é quando eles fazem os ícones da mesma cor que sua fonte de texto. Então aqui podemos ver que temos o ícone, temos o texto, mas ele simplesmente não parece certo. E o ícone parece que eles estão um pouco para você esperou. Eu sinto como se eles estão tirando um pouco de atenção demais do texto em si e eles simplesmente não ponderaram corretamente. Então, uma boa maneira e uma maneira muito fácil de corrigir isso é copiá-lo e colá-lo. O circo mostra a diferença. Nós literalmente simplesmente tornamos o ícone uma cor mais clara do que o próprio texto. Então pode haver alguma coisa por lá. - Sim. Acho que isso parece muito bom. E então faremos isso por cada um deles. Então, agora que fizemos, se cada um dos ícones, você pode ver uma enorme diferença entre este lado aqui e decidir aqui. Parece um pouco mais neutro, um pouco mais igual quando se trata de cores e pesos, mesmo que o texto em si seja realmente uma cor escura do que os próprios ícones. Então isso é apenas uma dica rápida sobre fazer ou painel de controle. Ícones e rótulos parecem um pouco mais iguais. 10. Não aumentar ícones: Então, quando você coloca ícones em um de seus projetos, geralmente os ícones que você coloca em estranho assinado por um designer americano que já projetou seus ícones para uma largura e altura definidas. Então, um monte de ícones de diácono de tamanhos variados. Mas, por exemplo, esses ícones estão atualmente em 64 por 64, mas o tamanho original desses ícones, ou na verdade 32 por 32. Então eu os ampliei aqui para se encaixar no cartão e parecer que eles estão ocupando mais espaço. No entanto, isso é realmente um erro. Isso não é algo que você deveria fazer. E é algo que vejo muitos designers juniores fazerem. Quando você quiser ter ícones maiores. Normalmente, os ícones devem ter mais detalhes à medida que ficam maiores e maiores. Se você ampliar um ícone menor, você apenas ampliando algo que já foi projetado para estar em um espaço muito pequeno e ampliando que simplesmente não parece certo. Ele realmente não flui com o design. E claramente o ícone em si não foi projetado para ser ampliado. Então o que vamos fazer é pegar isso e vamos mudar esses ícones para seu tamanho original. Mas também queremos que eles ocupem o espaço, ocupem um, uma boa quantidade de espaço no próprio cartão. E há uma maneira muito rápida e fácil de fazer isso. Então vamos copiar este aqui para baixo. Por exemplo, fará com que o ícone é o tamanho original de 32. E então o que vamos fazer é adicionar um círculo atrás do ícone. Então vamos fazer 80 por 80. Como dizer, eu coloco atrás do ícone. Vamos centrar isso. E então vamos centralizar o ícone dentro dele. Ordens também. Faremos a praga de Ikhwan. E então faremos disso a cor azul que tínhamos. Na verdade, vamos fazer um pouco mais. Acho que posso ser um pouco grande demais. Vamos fazer 70 por 70. A área. E já podemos ver que isso fez uma grande diferença porque este ícone foi projetado para ser 32 por 32, não 64 por 64. Então vamos fazer isso com os outros também. E lá estamos nós. É uma pequena diferença, mas acho que faz uma grande mudança, um grande impacto no design. Porque a maioria dos ícones não são realmente projetados para serem menores ou ampliados. Eles são projetados para ter o tamanho que foram projetados, e esse é o objetivo deles. E uma boa maneira de fazê-los ocupar mais espaço é adicionar formas atrás deles como eu fiz aqui, não tem que ser um círculo. Você pode torná-lo um quadrado, você pode torná-lo um diamante, um hexágono, qualquer forma que você gosta, onde quer que o formato se encaixe na sua marca. E ele tinha apenas uma maneira rápida de tornar seus ícones melhores em seus projetos. 11. Faça um modo escuro correto: Então adotamos o modo sendo tão popular quanto ele é. A maioria das pessoas, o que eles fazem é que eles vão projetar ou ver sua versão light do aplicativo, como você pode ver aqui. E então eles vão apenas inverter seu design. E parece bem. É definitivamente funcional. Não parece certo. Novamente, ele simplesmente não parece certo, tê-lo invertido. E a razão para isso é quando você desenha uma interface leve, o que você costuma fazer é que você tem as cores mais escuras no fundo e então ele tinha as cores mais claras em primeiro plano. Isso é o que cria profundidade. Isso é o que faz parecer que as coisas estão saindo do design. E quando você faz isso com um designer invertido e luz invertida feita, os fundos reais são mais leves do que as ações que estão na sua frente. Então, vamos corrigir isso. Então vamos copiar isto. E então nós só precisamos fazer alguns ajustes e realmente não são muitos. Então vamos começar com o fundo vai fazer isso consideravelmente mais escuro. E lá eu acho que parece muito bom. Vai fazer isso também darpa e precisa ser mais escuro do que os próprios botões reais. Como dizer, você sabe o que já, eu acho que parece significativamente melhor. E vocês podem ver o que fizemos é que fizemos as cores mais escuras no fundo onde deveriam estar. E fizemos as cores mais claras em primeiro plano onde deveriam estar. E isso só faz o escuro pode parecer muito melhor e apenas muito mais agradável para os olhos do que ter as próprias cores reais invertidas.