Curso 5 - Criar designs e protótipos de alta fidelidade no figma

Prévia do material em texto

Curso 5 – Criar designs e protótipos de alta fidelidade no figma
Introdução ao Curso 5
Introdução ao curso 5: Criar designs e protótipos de alta fidelidade no figma
Olá novamente! Você já conquistou muitas coisas até aqui. Vamos analisar rapidamente onde estamos no processo de design de UX. Primeiro, aprendemos a ter empatia com os usuários, definir as necessidades deles, elaborar declarações de problemas e desenvolver ideias para soluções de design. Depois, você criou um wireframe e iniciou a fase de protótipo. Depois disso, você aprendeu a realizar uma pesquisa para testar seu protótipo de baixa fidelidade e modificar esse protótipo com base nos insights de pesquisa. Mesmo que tenhamos passado por uma rodada de testes, é importante lembrar que o processo de design é iterativo. Neste curso, vamos repetir as fases de protótipo e teste, agora focando em designs de alta fidelidade. Prepare-se para elevar seus designs para o próximo nível.
No final deste curso, você será capaz de criar um design estático e de alta fidelidade que é usado como uma representação de um produto final chamado mockup; refinar o design dos seus mockups adicionando ênfase, hierarquia, escala e proporção; entender como usar um sistema de design; participar de uma sessão de crítica em que designers de UX pedem feedbacks sobre o trabalho para os integrantes da equipe e iterar designs com base nesse feedback; criar um protótipo de alta fidelidade; iterar o protótipo de alta fidelidade com base no feedback de um estudo de usabilidade; e, com seus designs finais em mãos, você vai criar estudos de caso para mostrar seus projetos no portfólio. Antes de começar, gostaria de me apresentar. Meu nome é Kunal e serei seu instrutor neste curso. Como designer de interação na equipe de Material Design do Google, eu me concentro no design de sistemas e práticas de design acessível. Quando entrei no Google, meu cargo era focado no design da estrutura da Pesquisa Google e do recurso de descoberta do app do Google para Android. Embora meu trabalho atual seja voltado ao design de UX, na verdade, comecei minha carreira na arquitetura. Passar da arquitetura para o design de UX foi uma decisão importante para mim. Se você está no meio de uma mudança de carreira ou só quer aprender algo novo, estou animado para ajudar você a alcançar seus objetivos. Se estiver tudo pronto, vamos começar.
Boas-vindas ao Curso 5
Boas-vindas a Criar designs e protótipos de alta fidelidade no Figma, o quinto dos sete cursos do Certificado de Design de UX do Google. Neste curso, você vai terminar de projetar o aplicativo móvel em que vem trabalhando nos últimos cursos. Você vai começar a aprender a criar mockups no Figma, uma ferramenta de design muito conhecida. Você vai aplicar elementos e princípios de design visual à medida que projeta mockups para seu aplicativo móvel. Depois, vai transformar esses designs em um protótipo de alta fidelidade que funciona como um produto final. Você realizará pesquisas para coletar feedback sobre seus designs e fazer melhorias. Por fim, você vai aprender a compartilhar seus designs com equipes de desenvolvimento. Até o final deste curso, seus designs de aplicativos móveis estarão completos e será possível esse projeto ao seu portfólio profissional de UX!
O conteúdo e os projetos de cada curso deste programa de certificação se baseiam em informações praticadas em cursos anteriores. Para ir bem neste curso, você precisa concluir os quatro cursos anteriores do programa de certificação, se ainda não tiver feito isso.
· Fundamentos do design de experiência do usuário (UX)
· Início do processo de design de UX: empatia, definição e ideação
· Construir wireframes e protótipos de baixa fidelidade
· Conduzir pesquisas de UX e testar os primeiros conceitos
· Criar designs e protótipos de alta fidelidade no Figma - este curso
· Web design responsivo em Adobe XD
· Projetar uma experiência do usuário para o bem social e preparação para o mercado
Cada curso do Certificado de Design de UX do Google é dividido em semanas. É possível concluir os cursos em seu próprio ritmo, mas os intervalos semanais foram projetados para ajudar você a terminar o programa em cerca de seis meses no total.
Então, quais habilidades de design você pode esperar desenvolver durante este curso? Esta é uma prévia das atividades práticas que você realizará.
Semana 1: Fundamentos da criação de mockups. Concentre-se no design visual, que é a aparência de um produto ou tecnologia para os usuários. Você vai começar a criar mockups usando elementos de design visual, como tipografia, cor e iconografia. Esses elementos costumam ser organizados em layouts usando métodos como grades, contenção e espaço negativo. Todos esses elementos de design visual serão considerados ao projetar o aplicativo móvel em que você tem trabalhado durante todo o programa de certificação.
Semana 2: Como aplicar princípios de design visual a mockups. Nesta parte do curso, você vai usar princípios de design visual para refinar seus mockups. Primeiro, você vai usar ênfase para direcionar os usuários às partes mais importantes de uma página. Em seguida, vai aplicar hierarquia, escala e proporção para organizar os elementos em cada página do aplicativo. Em seguida, vai considerar unidade e variedade para destacar ou ajudar elementos do aplicativo a funcionarem em conjunto. Por fim, você vai rever os Princípios de Gestalt, como similaridade, proximidade e região comum, para ajudar os usuários a interpretar seus designs facilmente.
Semana 3: Como explorar sistemas de design. Venha explorar o mundo dos sistemas de design! Nesta parte do curso, você vai conhecer as partes de um sistema de design e os benefícios de usá-lo. Você vai examinar os sistemas de design de várias empresas e ter a oportunidade de usá-los em seus próprios mockups. Você também vai aprender a usar e criar folhas de adesivos no Figma.
Semana 4: Como participar de sessões de crítica de design. Dar, receber e implementar feedback é uma parte necessária do processo de design de UX. Nesta parte do curso, você vai explorar métodos eficazes para dar e receber feedback. Você também vai aprender sobre sessões de crítica de design, uma parte importante do seu primeiro trabalho como designer de UX. Por fim, você vai aprender a transformar o feedback em ações para reformular designs.
Semana 5: Como criar protótipos de alta fidelidade. Já está tudo pronto para você começar a criar protótipos de alta fidelidade no Figma! Seguindo seis etapas, você vai transformar seus mockups em um protótipo pronto para testes. Além disso, você vai explorar dois novos conceitos, gestos e movimento, que podem ajudar a enriquecer a experiência do usuário e aumentar a usabilidade dos protótipos.
Semana 6: Como testar e iterar designs Agora que você tem um protótipo de alta fidelidade, é hora de testar seus projetos de aplicativos móveis realizando um estudo de usabilidade. Você vai analisar o feedback recebido para ter insights que podem ser transformados em ações e iterar seus designs. Quando os designs estiverem na versão final, você vai aprender a repassá-los à engenharia para produção. Por fim, você vai mostrar todos os artefatos que criou durante este programa de certificação em um estudo de caso para seu portfólio profissional de UX.
Projeto do portfólio
Ao longo deste programa de certificação, você vai criar projetos para seu portfólio profissional que podem ser mostrados a possíveis empregadores. Neste curso, você vai terminar de projetar o aplicativo móvel em que vem trabalhando desde o início do programa. Por exemplo, se no segundo curso do programa você selecionou uma instrução relacionada a um app para a hamburgueria local, você vai continuar o processo de design com esse mesmo projeto.
· No Curso 2, você aprendeu a ter empatia com usuários em potencial e definir as necessidades dos usuários. 
· Durante o Curso 3, você desenvolveu ideias de soluções para atender às necessidades dos usuários. Você também criou wireframes e um protótipo de baixa fidelidade do seu app paradispositivos móveis. 
· No Curso 4, você planejou e conduziu pesquisas para testar os designs e receber feedback dos usuários. Você iterou os designs com base nos insights da pesquisa.
· Agora, no Curso 5, você vai criar mockups e um protótipo de alta fidelidade do app. Seus designs vão começar a ficar com cara de um produto de verdade! Você também vai testar seus designs realizando um segundo estudo de usabilidade e iterar os designs até chegar à versão final.
Tudo que você criou no programa de certificação até o momento será incluído no seu portfólio profissional de UX. Faça os cursos deste programa de certificação para seguir as etapas do processo de design e concluir todos os componentes que você precisa incluir no portfólio.
Você está quase terminando seu primeiro projeto. Continue o ótimo trabalho até terminar de projetar um aplicativo móvel neste curso!
Kunal – Minha jornada até a UX
Oi, sou Kunal, sou designer de interação no Google. Design é uma área que eu adoro. Eu não entrei aqui com experiência nisso, então simpatizo com muitos desenvolvedores e pessoas ao redor do mundo que querem criar apps realmente bonitos e de alta qualidade, mas não sabem por onde começar. Eu não sabia o que queria fazer quando crescesse. Meus pais queriam que eu fizesse medicina ou engenharia ou direito, mas sempre gostei de arte. Quando era mais jovem, nunca tive tempo de me concentrar nessas aulas no meio dos meus outros estudos.
Mas desenvolvi essa paixão pelo desenho técnico, tinha aula disso no ensino médio. Foi assim que me interessei pelo design e por resolver problemas pelo design. E isso é algo que realmente me marcou. Então, decidi estudar arquitetura e durante o curso eu comecei a fazer bicos de web design, então descobri que eu me interessava mais por isso do que pelo trabalho de arquitetura que eu tinha durante o dia. O design me ajudou a encontrar meu caminho na vida. Ir para o curso de arquitetura é um grande compromisso. Decidir deixar esse campo para trás depois de tanto tempo estudando e do tempo que passei trabalhando nele foi, bem, deveria ter sido uma decisão difícil. Mas, acho que percebi que o trabalho que estava fazendo como bico, o trabalho de web design e de design digital, sem um entendimento aprofundado mas com mais paixão por isso, me interessava muito mais. Eu nunca tive a intenção de mudar de carreira, mas tinha várias oportunidades individuais que começaram a se acumular. Quando eu estava me candidatando a vagas de UX, um professor sugeriu que eu deveria mencionar meu trabalho de web design, até quando eu me candidatasse a trabalhos de arquitetura. E eu não tinha pensado nisso. Eu pensava: “Por que uma empresa de arquitetura se importaria com minhas habilidades de web design?” Mas foi um ótimo conselho porque a empresa que me contratou estava muito interessada em reformular o site dela. Então eles acharam ótimo, eu poderia fazer o trabalho de arquitetura e também o web design. Assim, você pode usar as habilidades e trabalhar nas duas paixões.
Participar deste programa é muito importante para mim porque sou alguém que não tinha um caminho muito claro em UX. E eu sou alguém que se beneficiou de muitas outras pessoas que me guiaram ao longo desse caminho, desde professores, colegas e outras pessoas que me deram chances, porque uma pessoa com uma origem pouco tradicional como eu não teria tido essas chances no passado. Então, estou muito feliz pelas oportunidades que recebi e o trabalho que eu tive que fazer por conta própria para ser capaz de chegar a este ponto. Quero poder repassar a boa vontade que tiveram comigo para a comunidade e ajudar a garantir que futuras gerações de pessoas interessadas em UX não precisem passar pelo mesmo caminho sinuoso. Essas pessoas têm um pouco mais de estrutura e mais lugares que podem consultar para entrar no campo e aproveitar todos os pontos positivos dele.
Começar a criar um mockup
Boas vindas à semana 1
Olá! Nesta parte do curso, vamos nos concentrar no design visual, que é como um produto ou tecnologia são exibidos para os usuários. Vamos começar a criar um mockup, que é um design de alta fidelidade que representa seu produto final. Para criar mockups, vamos usar elementos e layouts de design visual. Elementos como tipografia, cor e iconografia são as bases do design visual. Os elementos geralmente são organizados em layouts usando métodos como grades, contenção e espaço. O design visual é um mundo enorme e às vezes pode parecer amplo demais. Por enquanto, só vamos abordar alguns elementos. Vamos explorar layouts mais tarde no curso. Não é possível aprender sobre design visual da noite para o dia. Profissionais de várias áreas passam anos aprendendo a aplicar o que aprenderam em projetos. Eu acumulei meu conhecimento sobre design visual de muitos lugares, como meu trabalho em arquitetura, aulas de design gráfico que eu fiz para me divertir e até mesmo meu trabalho como designer de UX. Este programa de certificação é apenas o começo da sua jornada pelo design visual. Depois de assistir aos próximos vídeos, você vai entender bem alguns elementos essenciais. Outra coisa para ter em mente ao longo desta parte do curso, quando começamos a discutir elementos de design visual como tipografia e cor: estamos entrando na área da interface do usuário ou design de IU. As áreas de UX e design da IU estão muito relacionadas e costumam ser confundidas uma com a outra. Tomara que você esteja com vontade de começar. Vamos lá.
Introdução a mockups
Olá. Vamos lembrar onde paramos.
Na última vez em que trabalhamos no app de passeadores de cães, atualizamos o protótipo de baixa fidelidade com base no feedback dos participantes de um estudo de usabilidade. Até agora, temos focado na função do app e no fluxo básico do usuário. Agora, vamos começar a focar no visual e na sensação do design. Como lembrete, um design pode ter diferentes níveis de fidelidade.
Em UX, fidelidade significa quanto um design corresponde ao visual e à sensação do produto final. Se um design é de baixa fidelidade, isso significa que ele é menos complexo e menos refinado. Chamamos designs de baixa fidelidade de “lo-fi” para abreviar. Designers de UX usam designs de baixa fidelidade para ter ideias rapidamente e deixar espaço para explorar.
Se um design é de alta fidelidade, ele corresponde muito ao visual e à sensação do produto final e é mais refinado no geral.
Chamamos designs de alta fidelidade de “hi-fi” para abreviar. Designers de UX usam designs de alta fidelidade para testar um design que parece um produto real e receber feedback mais específico dos usuários.
Neste curso, vamos nos concentrar em designs de alta fidelidade. Então, vamos passar para um tipo de design de alta fidelidade, os mockups. Um mockup é um design estático de alta fidelidade que é usado como uma representação de um produto final. Mockups indicam a designers de UX como será o visual do produto. Vamos ver exemplos de mockups criados por designers de UX iniciantes de verdade. Primeiro, temos Pocket, uma mídia social interativa imaginária e um mecanismo de busca criado por Dane, que agora é designer no Google. Observe como este mockup é diferente dos wireframes e protótipos de baixa fidelidade você fez até agora.
Em um mockup, há fotos reais, cor, sombras, fontes diferentes e botões estilizados. Ele parece muito mais com um aplicativo real que você poderia usar. Vamos ver outro conjunto de mockups. Eles são para um aplicativo chamado Lucere, um restaurante takeaway fictício de saladas e sanduíches. Lisa, designer do Google, criou os mockups quando estava apenas começando na área. Observe como os mockups usam cor, gradientes, diferentes tamanhos de texto, ícones e até mesmo um mapa. Os mockups ajudam você a realmente ter uma sensação de como o produto seria se virasse realidade. Espero que esteja com vontade de criar seus próprios mockups.
Ao projetar seus mockups, você precisa ter algumas coisas em mente. Pense nos elementos visuais que você quer usar em cada tela do seu design, como tipografia, cor e iconografia. Atéagora, o único conteúdo dos nossos designs eram os espaços vazios ou reservados.
Mockups têm palavras, imagens reais e ícones que vão aparecer no seu design.
Agora é o momento perfeito para materializar o conteúdo que será colocado aqui. Tenha em mente que passar de um wireframe para um mockup não deve ser um exercício de pintar os números. Por exemplo, não há problema em colocar uma imagem em uma parte diferente do mockup daquela planejada para seu wireframe.
Além disso, considere como posicionar os elementos na tela usando grades, contenção e espaço. A maneira de organizar elementos em uma tela pode fazer seu design ficar esteticamente agradável, ajudar os usuários a interagir com seu produto e tornar seus designs mais acessíveis.
Para começar, vamos discutir alguns elementos fundamentais do design visual em mais detalhes. Tudo pronto? Vamos lá.
Chikezie – Transição de designs de baixa fidelidade para alta fidelidade
Olá, eu sou Chikezie, sou chefe de UX para experiências de RA no Google. Projetamos experiências de RA para a Pesquisa Google, Shopping e outras marcas de terceiros. Se você está usando uma ferramenta de design pela primeira vez, como Figma, Sketch ou Adobe XD, talvez você esteja se perguntando: como uso essa ferramenta? Como faço para criar este fluxo? Como a IU precisa ser? Este design está bom mesmo? Minha recomendação quando você estiver se preparando para projetar algo é começar pelos esboços. Agora que você tem os esboços, é bom levar esses esboços para sua ferramenta de design. Agora você já pode começar a fazer modelos de alta fidelidade. Quando você estava desenhando com caneta e papel, a fidelidade era baixa. Agora que você está passando para a alta fidelidade, é aqui que você dá vida a esses esboços.
Quando você está projetando algo, deve pensar sobre a jornada. Quais são os principais momentos da jornada que ajudam a pessoa a ir de A a B. Quando você está projetando em uma ferramenta como Figma ou Sketch, você terá muitas coisas disponíveis para você que não existiam com caneta e papel. Você terá cores de texto, uma grande paleta de cores. Você terá tamanho de texto, você terá imagens, um conjunto totalmente diferente de coisas disponíveis para você trabalhar. Quando você pensa em trazer algo para essas ferramentas, você está entrando em uma fase chamada alta fidelidade. Ao fazer isso, não é somente o design que a equipe de engenharia vai olhar e dizer: “É isso que estão me pedindo que faça.” A equipe de produto também está olhando para isso e pensando: “É assim que o app vai ficar. É assim que será a experiência e agora vou avaliar isso pensando será que é isso que estou procurando? Essa é a solução para o problema que nós queremos resolver?” Portanto, o design de alta fidelidade não é apenas um design visual muito bonito para a solução, mas também saber comunicar para o resto da equipe o que eles vão criar e como eles ajudam esse plano a avançar.
Habilidades fundamentais para criar mockups no Figma
Está quase tudo pronto para você criar seu primeiro mockup no Figma. Antes de começar, vamos explorar algumas das habilidades básicas para criar mockups com confiança no Figma. 
· Criar uma nova página.
· Criar frames no canvas.
· Mudar de guias de projetos no Figma.
Nomes para saber
· Antes de começar a criar um mockup, é importante entender os nomes usados no Figma.
· Cada documento é chamado de arquivo (no inglês, “file”). 
· Um arquivo contém o canvas, em que você vai criar camadas e objetos para seus designs. 
· Um arquivo também contém páginas (no inglês, “pages”), suas telas serão projetadas. 
· Cada página tem um canvas próprio. Esse canvas é cinza (#E5E5E5) por padrão e é onde você pode adicionar, remover e atualizar seus designs. 
Criar uma nova página
Criar uma nova página no Figma é fácil, basta seguir estes passos simples:
· Faça login no Figma.
· Crie um novo Arquivo clicando no ícone + no canto superior direito.
· À esquerda, clique em Page 1. Isso lista todas as páginas atualmente no seu arquivo.
· Clique no ícone + para adicionar uma nova página ao seu arquivo, como mostrado na imagem abaixo. 
· Quando você criar uma nova página, será possível renomeá-la imediatamente. Ou, é possível renomeá-la a qualquer momento clicando duas vezes no título da página. Quando você começar a nomear uma página, o texto do nome será destacado em azul e a linha será delineada em azul.
Para continuar explorando, veja este tutorial do Figma que detalha as etapas para criar e duplicar uma página, visualizar todas as páginas e muito mais.
Criar frames
O canvas do Figma é onde você vai criar frames. Pensar no canvas como uma parede em branco com uma moldura. Os frames são como molduras que você vai projetar.
Para criar um novo frame: Selecione a ferramenta de frame. O ícone tem quatro linhas cruzando em um padrão de grade. Ele é o terceiro ícone da esquerda para a direita na barra de ferramentas. 
Existem algumas maneiras de escolher o tamanho do frame:
Clique no canvas para criar um frame padrão. As dimensões de frames padrão são 100x100 pixels. 
Clique e arraste no canvas para criar um frame com as dimensões que você prefere. Quando você clica e arrasta, a largura e a altura são atualizadas automaticamente com base no quanto você arrasta. Se você quiser escolher uma largura e altura específicas, use a seção Frame no painel Design, no lado direito da tela.
Selecione um tamanho predeterminado para um frame, como um modelo específico de tablet ou celular, no painel Design, no lado direito da tela. Como mostrado na imagem abaixo, há uma lista de diferentes contêineres ou frames para vários dispositivos ou formatos. Basta selecionar um tamanho para adicionar o frame ao seu canvas.
No Figma, o botão de frame fica em destaque na esquerda. Os tamanhos de modelo ficam à direita e incluem celulares, tablets, computadores, apresentações e smartwatches.
Veja este tutorial do Figma para saber mais sobre como criar e usar frames.
Você tem as ferramentas!
No seu trabalho como designer de UX, você vai usar o Figma ou uma ferramenta de design semelhante. Quanto mais familiaridade você tiver com o Figma e os recursos dele, mais rápido você será capaz de criar seus próprios mockups digitais em qualquer ferramenta. Lembre-se: o conhecimento que você está adquirindo não se limita ao Figma. As habilidades que você está aprendendo no Figma vão ser úteis quando você trabalhar com outras ferramentas digitais.
Antes de começar, aqui vai uma dica de profissional: vale a pena abrir várias janelas para visualizar seus arquivos. Com várias janelas abertas, é possível visualizar um arquivo diferente daquele em que você está trabalhando sem fechar seu arquivo atual. Para criar uma nova janela, clique com o botão direito do mouse em “Files” nas pastas “Rascunho e Recente” e selecione “Open in new tab”.
Recursos adicionais
Atalhos de teclado aceleram o processo de design e ajudam a começar a projetar como um profissional. O site Shortcuts.design compilou uma lista de atalhos úteis do Figma.
O Figma vem com alguns tamanhos de dispositivos pré-carregados na plataforma. Além disso, o Figma tem uma biblioteca de tamanhos de dispositivos para download.
Atividade: Usar designs de baixa fidelidade para iniciar os mockups do seu projeto de portfólio
Introdução da atividade
Esta atividade vai ajudar você a entender como usar wireframes de baixa fidelidade para começar a construir mockups. Você vai fazer isso traduzindo seus wireframes de projetos de portfólio em mockups do Figma.
Depois de concluir esta atividade, será possível comparar seu trabalho com um exemplar completo no próximo item do curso.
Instruções passo a passo
Se concluiu os cursos anteriores do programa, você vai usar os wireframes de baixa fidelidade criados no Figma para seu projeto de portfólio. Eles são os wireframes que você usou no seu protótipo de baixa fidelidade para o projeto do Sharpen.
Nos cursos anteriores, você começou a criar wireframes de baixa fidelidade. Depois disso, você transformou os wireframes em um protótipo de baixa fidelidade. Emseguida, você realizou pesquisas e testou seus designs para ter insights valiosos sobre a experiência do usuário. Por fim, você aprimorou seus wireframes e seu protótipo com base nesses novos insights.
Agora, você vai usar esse trabalho para começar a criar mockups no Figma. Se você ainda não criou um protótipo de baixa fidelidade, realizou um estudo de usabilidade para o protótipo e atualizou o protótipo com base nas descobertas do estudo, sugerimos que você volte e complete o Curso 3 e o Curso 4 antes de iniciar esta atividade.
Se você acabou de entrar no programa, precisa criar um conjunto completo de wireframes no Figma com base na instrução selecionada no gerador Sharpen antes de iniciar esta atividade. 
Etapa 1: Revisar os materiais de instruções no Figma
Neste curso, você recebeu o texto Como criar um novo canvas no Figma. Leia esse texto para encontrar detalhes sobre as funções do Figma necessárias para esta atividade.
Consulte os materiais do Figma diretamente para saber as informações mais atuais sobre novos recursos.
Etapa 2: Criar uma nova página para mockups
As páginas são uma ótima maneira de organizar arquivos no Figma, porque cada página tem seu próprio canvas para o trabalho de design. Diferentes recursos ou versões de design podem ter uma página própria em um arquivo. Assim, fica mais fácil se concentrar em uma parte do design por vez e localizar itens importantes rapidamente. 
No arquivo do Figma para seu projeto de portfólio, siga as instruções abaixo para criar uma segunda página para os mockups:
Clique em Page 1 na barra lateral esquerda para ativar o menu suspenso Pages.
Em seguida, clique no ícone de Mais para adicionar uma nova página ao arquivo.
Nomeie a nova página “Mockups”.
Clique duas vezes em Page 1 e renomeie-a como "Wireframes", caso ainda não tenha feito isso. Isso vai ajudar você a saber qual conteúdo está em cada página.
Etapa 3: Criar frames no seu arquivo
Para começar a criar mockups, você precisa criar frames na nova página de mockups. Frames são contêineres para elementos de design e representam as telas do app ou site que você está projetando. Você precisa de um frame para cada tela do seu projeto de wireframes. Crie um novo frame no Figma em apenas alguns passos:
· Use os atalhos de teclado F ou A ou selecione a ferramenta Frame na barra de ferramentas.
· Serão exibidas várias opções na barra lateral à direita. Clique em Phone e selecione o tipo de celular para o qual seu app será projetado primeiro.
· Nomeie o novo frame com base na tela que ele representa. Por exemplo, se você estiver criando o frame para sua tela inicial, use “Tela inicial”. É possível renomeá-la a qualquer momento clicando duas vezes no título do frame.
Repita as três etapas acima até que o número de frames corresponda ao número de telas na sua página de wireframes. Se tiver algum problema, veja este tutorial do Figma para saber mais sobre como criar e usar frames.
Agora que seu arquivo do Figma está organizado e contém seus wireframes para serem usados como referência, você já pode começar a projetar seus mockups.
Aqui está um exemplar completo dos frames em branco criados para mockups do app da Zia's Pizza. O app da Zia's Pizza é um aplicativo fictício para pedir pizza que será usado como exemplo ao longo deste curso para demonstrar o conceito que você está praticando em cada atividade. Abaixo, você encontra frames do mockup em branco para o app da Zia's Pizza, organizados por número e ordem de telas que aparecem no app.
Exemplo
No exemplar, há duas páginas no arquivo do Figma: uma chamada “Wireframes” e outra chamada “Mockups”. Assim, além de manter a organização, você sabe o tipo de conteúdo encontrado em cada página. Na página “Mockups”, um frame em branco foi criado para cada tela dos mockups. O número de frames criados foi baseado no número de wireframes de baixa fidelidade.
Compare este exemplar com os mockups que você vai começar a criar na atividade. O que você fez bem? Em que você pode melhorar? Tenha esse feedback em mente conforme avança no curso.
Usar tipografia em mockups
Introdução a elementos fundamentais do design visual
Olá. Este é um momento muito empolgante porque você está prestes a criar seu primeiro mockup.
Vou começar apresentando alguns elementos fundamentais de qualquer mockup.
Os elementos são as bases dos mockups que você vai criar durante o programa de certificação e no mundo real. Em um nível básico, o termo design visual em UX refere-se a como um produto ou tecnologia aparece para o usuário.
Nos próximos vídeos, vamos mergulhar nos três elementos fundamentais do design visual: tipografia, cor e iconografia. O primeiro elemento fundamental, a tipografia, é o uso de texto e fontes. A tipografia pode ajudar a adicionar uma hierarquia aos seus designs, facilitar a leitura do texto e adicionar um estilo visual. Pense nas letras escritas na capa do filme O Mágico de Oz.
O tamanho de fonte maior no título indica que a informação é a mais importante. A própria fonte faz alusão a como o filme é divertido. O segundo elemento fundamental é a cor. Pense nas mensagens que certas cores comunicam, como as pessoas entendem as cores e como as cores se misturam, combinam ou contrastam umas com as outras.
Você já aprendeu sobre a roda de cores na aula de artes? Ela também é muito útil para designers de UX, porque nos ajuda a encontrar cores harmoniosas ou complementares. O terceiro elemento fundamental, a iconografia, refere-se às imagens ou símbolos associados a um tema ou ideia.
Pense no ícone de liga/desliga do seu computador.
É só um círculo com uma linha, mas a maioria das pessoas sabe que este ícone significa liga/desliga em um dispositivo tecnológico. Existem muitos outros elementos fundamentais, como tamanho, forma e direção. Não vamos abordar isso a fundo neste momento, mas é possível aprender mais sobre eles nos textos e investigando por si. Tenho certeza que você já quer começar. E talvez você pense que o design visual é o aspecto mais importante do produto. Mas a aparência não é tudo. O trabalho de um designer de UX é garantir que todas as decisões sobre o design visual de um produto priorizam a usabilidade.
No próximo vídeo, vamos nos aprofundar no primeiro desses elementos, a tipografia. Vejo você em breve!
Tipografia no design de UX
Boas-vindas de volta.
Hora de começar com o primeiro elemento fundamental do design visual: tipografia. Tipografia refere-se ao uso de texto e fonte. Existem três etapas para encontrar a tipografia perfeita para seu design:
selecionar uma classificação de tipografia, escolher uma família tipográfica e selecionar uma fonte. Vamos definir cada um deles e explorá-los com mais detalhes.
O primeiro é a classificação de tipografia.
A classificação de tipografia é um sistema geral para descrever estilos tipográficos.
Duas das classificações de tipografia mais famosas são com serifa e sem serifa.
Estilos de tipografia com serifa podem ser reconhecidos pelas pequenas linhas chamadas serifas que seguem as letras como traços e bordas. Olhe atentamente para a letra T no lado esquerdo da tela. As pequenas linhas ao lado de ambas as extremidades da linha horizontal no topo do T ajudam a identificar a classificação de tipografia do texto como com serifa. Por outro lado, os estilos de tipografia sem serifa não têm essas linhas pequenas.
Observe que, no lado direito da tela, não há linhas pequenas ao lado do T.
Esse T é apenas uma linha horizontal e vertical. Isso é uma indicação clara de que esse T tem uma classificação de tipografia sem serifa. Certo. Depois de selecionar uma classificação de tipografia, é hora de escolher uma família tipográfica. Uma família tipográfica é o estilo geral de uma letra.
As famílias tipográficas são diferenciadas pela espessura do traço, forma, tipo de serifa e comprimentos de linha.
Cada família tipográfica é conhecida por um nome. Alguns exemplos de família tipográfica com serifa são Times New Roman, Georgia e Cambria.
Alguns exemplos de família tipográfica sem serifa incluem Arial, Helvetica e Verdana. Historicamente,designers de UX preferem famílias tipográficas sem serifa para apps e sites, porque elas são mais legíveis na tela. Mas, à medida que a tecnologia foi aprimorada, a resolução da tela também melhorou, então não é mais difícil ler famílias tipográficas com serifa digitalmente. Nos últimos anos, famílias tipográficas com serifa voltaram a ser populares entre designers de UX e foram digitalizadas para uso em telas modernas.
Tudo bem. Depois de escolher uma classificação de tipografia e uma família tipográfica, é hora de selecionar uma fonte. A fonte é o tamanho, a espessura e a ênfase das letras. A diferença entre família tipográfica e fonte pode ser um pouco confusa. Então, vamos ver este exemplo. Neste caso, a família tipográfica é Roboto.
A fonte pode ser mais clara ou em negrito, em itálico ou regular, entre outras variações. A fonte do lado direito da tela é uma coleção de todos os caracteres de uma família tipográfica em um tamanho e estilo.
Por exemplo, Roboto Bold em tamanho 12 é uma fonte, e Roboto Light em tamanho 18 também é uma fonte.
E pronto, você começou a explorar o vasto mundo da tipografia. Aperte os cintos, porque estamos apenas começando.
A seguir, vamos descrever a importância da tipografia. Vejo você lá.
A importância da tipografia
Olá de novo. No último vídeo, examinamos as três etapas para encontrar a tipografia perfeita para seu design: selecionar uma classificação de tipografia, escolher uma família tipográfica e selecionar uma fonte. Mas por que a tipografia é tão importante no design de UX?
Se todo o texto de uma página tiver o mesmo tamanho e estilo visual, é difícil os usuários entenderem rapidamente as partes da página e encontrar as informações específicas que estão procurando.
Para ajudar os leitores a navegar melhor pela página, precisamos criar uma hierarquia.
Uma hierarquia tipográfica é um método de ordenar fontes e fontes em um layout para criar divisões que mostram aos usuários onde se concentrar e como encontrar informações.
Lembre que frequentemente as interfaces de produto são compostas por muitas palavras na tela. Criar indicações visuais pode ajudar a distinguir algumas palavras e frases como mais importantes do que outras.
Duas formas comuns de criar uma hierarquia tipográfica são alterando o tamanho e o peso da família tipográfica.
Pense em quando você abre um jornal. O texto que você nota primeiro é grande e em negrito. Essa é a manchete do jornal.
A manchete contextualiza o que está por vir no artigo.
Da mesma forma, quando você abre seu livro favorito, o título do capítulo tem destaque por causa da fonte. A fonte do título costuma ter um tamanho maior e mais negrito do que as outras palavras da página. Tanto a manchete quanto o título desses exemplos são considerados estilos de cabeçalho. Ambos têm letras maiores e mais grossas do que as palavras subsequentes.
O mesmo vale para o design de um produto digital. A maioria das interfaces de produto tem pelo menos dois tamanhos de texto: um menor que é usado para passagens de texto mais longas e um maior usado para títulos e cabeçalhos.
Os produtos digitais também podem usar peso, que é a espessura das letras da família tipográfica para criar uma hierarquia.
Por exemplo, uma família tipográfica em negrito dá mais ênfase ou importância para o texto. Tudo bem, então agora você sabe um pouco mais sobre como as famílias tipográficas e as fontes são usadas para adicionar uma hierarquia. Uma segunda razão por que a tipografia é tão importante para designers de UX é a legibilidade, ou como tornar o texto fácil de ler.
Como designer de UX, um dos seus trabalhos é tornar o produto mais fácil de ler e navegar.
O produto precisa ser legível para todos os usuários, incluindo pessoas com baixa visão. Pense sobre rótulos com informações nutricionais em alimentos que são vendidos em um mercado.
Esses rótulos geralmente são impressos em texto preto em negrito sobre um fundo branco. Os designers garantem que o rótulo seja fácil de ler, independente do design ao redor, na embalagem dos alimentos. Isso ajuda todos os compradores de supermercado, incluindo aqueles com baixa visão, a facilmente identificar e ler informações sobre o alimento, como as calorias, vitaminas e ingredientes.
Da mesma forma, designers de UX usam tipografia fácil de ler para plataformas digitais. Por exemplo, para a seção de check-out de um site de comércio eletrônico, designers escolhem uma tipografia em negrito e fácil de ler para que o usuário tenha certeza de que está pagando corretamente. Por fim, confirme se a tipografia usada no seu design corresponde às diretrizes da marca.
As diretrizes da marca são escolhas de estilo visual usadas para comunicar a identidade, o valor e a missão de uma marca.
As diretrizes da marca têm regras de tipografia e outros elementos de design visual que já foram pesquisadas, testadas e aprovadas pela equipe de design da empresa.
A tipografia contribui para esse estilo visual e exibe a identidade de uma empresa. Por exemplo, o Google usa uma família tipográfica sem serifa chamada Google Sans. Essa família tipográfica foi criada pela nossa equipe de design e é vista em todos os nossos materiais de marketing.
Ela é usada até mesmo no logotipo do Google.
Essa família tipográfica reforça a marca do Google. Se você está projetando para uma empresa específica, certifique-se de pedir as diretrizes de marca antes de começar.
Agora é hora de pegar tudo isso que você aprendeu sobre tipografia e aplicar no seu projeto. Vamos abrir o Figma. Vou começar meu mockup da página inicial do app de passeadores de cães. Uma coisa importante a notar é que vou criar esses mockups abaixo dos wireframes que criei anteriormente no Figma. Vou começar adicionando uma tela de celular como você aprendeu a fazer mais cedo com minha colega, Karen.
Em seguida, vou desenhar uma caixa de texto dentro da tela do celular. Quando você desenha uma caixa de texto, o painel “Design” no lado direito da tela muda, o que permite definir a família tipográfica, tamanho, peso e muito mais.
Na caixa de texto, vou digitar “Tarde agitada?” depois pressiono Enter para iniciar uma nova linha e digito: “Podemos levá-los para passear.”
Agora, eu posso brincar com a família tipográfica, tamanho e peso desse texto. Para a página inicial do nosso app de passeadores de cães, vou selecionar a fonte chamada SF Pro Display. Depois vou selecionar um tamanho 24.
Isso é apenas o começo. Para instruções detalhadas sobre como trabalhar com tipografia no Figma, veja o texto. Divirta-se e boa sorte adicionando tipografia nos seus próprios designs.
Trabalhar com tipografia em mockups
Você começou a aprender sobre como adicionar tipografia aos seus designs, incluindo como escolher um tipo de família tipográfica e fonte. Agora, você sabe que essa escolha é importante para o design. Quando a tipografia complementa a personalidade e o estilo de um design, ela ajuda a transmitir a identidade, os valores e a missão da marca. Ela também pode adicionar ênfase a partes do design, ajudando os usuários a encontrar e interpretar as informações de que precisam.
Neste texto, você vai aprender o básico sobre como trabalhar com tipografia no Figma. Você vai criar e selecionar campos de texto, ajustar fontes e tamanhos de fontes, reorganizar o texto e definir e salvar fontes configuradas. Há muitas características legais para explorar quando falamos sobre como adicionar tipografia aos seus designs no Figma, então vamos lá! 
Criar campos de texto 
Antes de fazer escolhas sobre tipografia, você precisa criar um campo de texto no Figma:
1. Abra o arquivo no Figma.
2. Selecione o ícone de texto na barra de ferramentas, que é uma letra T (destacada em azul na imagem abaixo).
3. Clique em qualquer lugar no canvas e comece a digitar para inserir texto. 
Para saber mais sobre como usar a ferramenta de texto nos seus designs, veja este tutorial em vídeo sobre como usar a ferramenta de texto e fontes no Figma.
Selecionar e editar campos de texto
Para editar ou ajustar seu texto, primeiro você deve selecionar a caixade texto. Quando há apenas uma caixa de texto no seu canvas, ela pode ser selecionada com um clique. Mas, quando há várias caixas, você precisa selecionar a camada correta. Para selecionar uma caixa de texto:
1. Clique no texto que você quer editar no painel Layers (no lado esquerdo da tela). A camada de texto selecionada será destacada em azul no painel “Layers”, como mostrado na imagem abaixo.
2. Clique duas vezes no texto da caixa selecionada no canvas. Ou, para selecionar todo o texto de uma caixa, pressione Enter (ou Return).
3. Altere o texto conforme necessário
Para selecionar mais de uma caixa de texto, primeiro selecione a ferramenta Move (destacada na barra de ferramentas superior da imagem abaixo). Em seguida, encontre um espaço vazio no canvas e clique e arraste uma caixa de seleção sobre as caixas de texto que você quer editar. Todo o texto da caixa de seleção será destacado em azul no painel Layers.
Para mais informações sobre como usar texto, veja este artigo do Figma: Editar camadas de texto.
Ajustar fontes e tamanhos de fontes
Depois de selecionar uma caixa de texto, é hora de fazer escolhas de design! Ajuste as propriedades de texto, como tamanho e peso (a espessura) da fonte. Para ajustar sua fonte:
1. Primeiro, selecione uma caixa de texto usando as etapas da seção anterior.
2. Em seguida, encontre a seção Text do painel Design (no lado direito da tela).
3. Para encontrar uma família tipográfica ou fontes, clique no menu suspenso Font. Aqui, é possível navegar por uma lista de fontes locais, compartilhadas e da Web.
4. O peso pode ser escolhido no menu suspenso Weight.
5. O tamanho do texto pode ser selecionado no menu suspenso Size ou digitando um tamanho manualmente no campo “Size”. 
No menu Text, também é possível alterar propriedades como espaçamento de parágrafo, altura da linha, alinhamento e muito mais. Para saber mais sobre como usar texto para tornar seus designs únicos, veja este artigo do Figma Help Center: Explore Text Properties.
Reorganizar texto
É possível ajustar o alinhamento, tamanho, localização ou restrições do seu texto no painel Design. Vamos dividir as seções deste painel:
Alinhamento
As opções de alinhamento estão na parte superior do painel Design. O alinhamento determina como o texto e outros elementos de design são distribuídos dentro da caixa de limite. Depois de selecionar uma caixa de texto, é possível escolher entre as seguintes opções de alinhamento na barra de menu:
· Alinhar à esquerda
· Alinhar centro horizontal
· Alinhar à direita
· Alinhar acima 
· Alinhar centro vertical
· Alinhar abaixo 
· Distribuir
Se você selecionar várias caixas de texto, clique no menu suspenso para escolher entre mais três opções de alinhamento:
· Arrumar: distribua os elementos selecionados uniformemente em todas as direções
· Distribuir espaçamento vertical: espaçar elementos selecionados uniformemente de acordo com a altura do frame
· Distribuir espaçamento horizontal: espaçar elementos selecionados uniformemente de acordo com a largura do frame
Ferramentas de alinhamento do Figma
Para saber mais, veja este artigo do Figma sobre seleção inteligente.
Localização e tamanho
Os números abaixo das opções de alinhamento correspondem à posição de um elemento selecionado no canvas. Quando esses números são alterados, você move um elemento ao longo do eixo X (esquerda e direita) e do eixo Y (cima e baixo). (Quem disse que álgebra não é útil na vida real?) 
Use os valores W e H para ajustar a largura e a altura de um elemento. Tenha em mente que esses valores só alteram o tamanho da caixa de texto selecionada, não da fonte. Alterar os valores W e H pode ser útil quando você redimensionar o texto e quiser alterar o tamanho da caixa para combinar.
Restrições
Restrições limitam onde um elemento pode ser colocado dentro de um frame. Elas são úteis quando você precisa manter uma distância específica em relação à borda do canvas e para projetar em diferentes dispositivos.
Cada elemento tem restrições horizontais e verticais. As restrições horizontais definem até onde o elemento pode chegar em relação à borda esquerda ou direita do frame. As restrições verticais determinam até onde ele pode chegar em relação à borda superior ou inferior. Você também decide como centralizar o elemento no eixo X ou Y. Se você precisar redimensionar o frame, pode definir a escala de um elemento para que ele continue proporcional ao frame redimensionado.
Veja este vídeo do Figma sobre Restrições para saber mais.
Definir e salvar fontes pré-configuradas
À medida que você fica mais confortável com o Figma, pode economizar tempo salvando um estilo de texto e reutilizando em diferentes designs:
1. No painel Layers, selecione o texto com as propriedades que você quer salvar e reutilizar.
2. Abra o cabeçalho Text no painel Design. Depois, clique no ícone de estilo (representado por quatro pontos na forma de um quadrado).
3. Será mostrado o menu Text Styles. Clique no ícone de Mais (+) do canto superior direito do menu para nomear seu estilo.
4. Depois de escolher um nome, clique em Create Style.
5. E é isso! Você salvou um estilo de texto para reutilizar em seus designs. Para usar um estilo de texto que você salvou, selecione o texto que você quer editar no painel Layers. Em seguida, volte ao menu Text Styles para selecionar o estilo que você criou na lista:
Para saber mais sobre como salvar e editar estilos de texto, descubra como criar e aplicar estilos no Figma Help Center. 
Continue aprendendo sobre tipografia
Se você não sabe como escolher a melhor fonte para o seu design, veja estas sete coisas para lembrar ao selecionar fontes para seu design da UX Planet. Depois, descubra como a tipografia pode afetar a legibilidade, facilidade de leitura e compreensão dos seus designs segundo o Nielsen Norman Group.
Adicionar copy do produto a mockups
Assim como em qualquer área, a comunidade de design de UX tem algumas coisas que nem sempre são consensos! Uma delas é relacionada a copy, ou texto escrito, que é usado em designs. 
Você já aprendeu que o texto de espaço reservado, como lorem ipsum, pode ser usado para preencher designs. No entanto, alguns designers preferem usar copy real durante o design, até mesmo para os wireframes. Vamos ver como usar o texto de espaço reservado e copy real nos seus mockups.
Texto de espaço reservado
Um dos tipos mais populares de texto de espaço reservado é o lorem ipsum. Como você deve se lembrar, o lorem ipsum é usado como texto de espaço reservado há mais de 500 anos! Como designers de UX, usamos lorem ipsum até hoje por algumas razões muito boas: 
· O texto de espaço reservado permite compartilhar designs com as partes interessadas cedo, no início do desenvolvimento, antes que seus designs sejam concluídos. Isso é especialmente importante quando você precisa receber feedback ou alinhar o direcionamento de um produto ou design, antes de passar muito tempo desenvolvendo os detalhes.
· O texto de espaço reservado, como lorem ipsum, é ótimo para a fase de idealização e para criar seus primeiros wireframes, quando o foco é o layout dos designs, não na copy.
· Usando o texto de espaço reservado, você ganha mais tempo para desenvolver a copy. Se você está trabalhando com escritores de UX dedicados ou precisa desenvolver sua própria copy, formular as palavras a serem incluídas nos designs leva tempo. Com o lorem ipsum, é possível continuar projetando enquanto a copy ainda está sendo definida.
Essas são razões bastante convincentes para usar texto de espaços reservado nos seus designs! Mas usar texto de espaço reservado também pode ser desvantajoso para designers, por exemplo:
· O texto de espaço reservado pode confundir as partes interessadas ou até mesmo distraí-las do design.
· Se o seu design for dimensionado e ajustado para caber o texto de espaço reservado, alterar esse texto em versões posteriores do design pode afetar o layout geral.
Uma boa regra prática: o texto de espaço reservado é frequentemente usado em designs de baixa fidelidade, como wireframes. Se você precisa gerartexto de espaço reservado para seus próprios designs, use geradores on-line, como este gerador de Lorem Ipsum ou este da loremipsum.io.
O texto de espaço reservado pode ser um ótimo ponto de partida para seus designs, mas como a copy real pode ajudar no processo de design?
Copy real
À medida que você projeta, começa a imaginar como o aplicativo será e como ele vai se comunicar com os usuários. Alguns designers têm plena convicção de que a copy real deve ser usada desde o início do processo de design para ajudar na comunicação. Aqui estão algumas razões para usar a copy real em vez de texto de espaço reservado durante a elaboração do design:
· Ao usar a copy real desde o início do processo de design, pode ser que haja menos ajustes nos designs posteriormente. Por exemplo, você não terá que redimensionar elementos de design para se encaixar na copy real.
· Ao pensar na copy real no início do processo de design, você tem mais tempo para receber feedback sobre escolhas de design relacionadas à copy. O design e a copy trabalham juntos para formar a experiência de usuário. Criar elementos de design e copy juntos, desde o início, pode torná-los mais coesos.
Usar uma copy real nos seus designs parece ser uma ótima ideia! Mas há também algumas desvantagens que precisam ser consideradas, como:
· Usar copy real no início do processo de design não evita que a copy precise ser editada posteriormente. Como você já percebeu, o design de UX é um processo altamente iterativo! Pode ser necessário alterar a copy dos seus designs várias vezes, tanto quanto os próprios designs.
· Seres humanos são atraídos por palavras. A copy real em um protótipo pode fazer com que as partes interessadas não comentem sobre escolhas de design. Se você enviar um protótipo de baixa fidelidade para sua equipe com copy real, provavelmente vai receber comentários sobre as palavras que escolheu, em vez do design visual e da funcionalidade do protótipo, que são mais importantes nessa fase de desenvolvimento do produto.
Como orientação geral: a copy real costuma ser usada em designs de alta fidelidade, como mockups. Então, neste ponto do processo de design, provavelmente é melhor começar a adicionar copy real aos seus designs de aplicativos.
Texto de espaço reservado e copy real em ação
Vamos ver um mockup de um app que mostra a diferença entre texto de espaço reservado e copy real. Estes mockups são para uma receita em um app de culinária. O design à esquerda usa texto de espaço reservado e o design à direita usa copy real. O que você notou?
Two mockups. One on the left with real text for recipes on the app and the to the right the same app with lorem ipsum text
No design com texto de espaço reservado, à esquerda, talvez sua atenção seja voltada mais à aparência dos ícones, no espaçamento entre elementos ou nas cores usadas. Esse mockup fornece aos usuários uma ideia geral do visual do conteúdo no design.
No design com copy real, à direita, você leu os títulos das receitas listadas? A vantagem de usar texto real é que você entende melhor as informações que serão incluídas no design e como elas serão organizadas. Mas, talvez você se concentre menos nos elementos de design.
Escolher entre texto de espaço reservado e copy real
Você já deve ter percebido que ambas as opções são viáveis. E tudo bem! Como muitas áreas do design de UX, essa é uma questão que você decide por conta própria. 
Outra opção? Talvez você queira usar uma combinação de texto de espaço reservado e copy real. No exemplo do aplicativo de receitas acima, os ícones na barra de navegação podem ser rotulados com texto real, como “favoritos”, “explorar”, “perfil” e “pesquisar”. Mas também é possível descrever receitas usando lorem ipsum. Esse tipo de combinação é bastante normal, então sinta-se livre para explorar com seus próprios designs.
Tenha em mente que usar texto de espaço reservado ou copy real nos seus designs pode depender do produto que você está projetando, das preferências das partes interessadas ou clientes e até mesmo do feedback dos seus colegas de equipe. Em alguns casos, pode ser melhor projetar usando uma copy que já foi criada. Em outros, talvez você nem precise se preocupar com a copy. A parte mais importante de adicionar copy aos seus mockups é ser flexível e usar o que é melhor para o produto que você está projetando.
Adicionar tipografia aos mockups do seu projeto de portfólio
Introdução da atividade
Nesta atividade, você vai criar e preencher campos de texto nos seus mockups do projeto de portfólio no Figma. Você também vai criar e definir fontes para seus mockups. Como você aprendeu no vídeo, a tipografia é importante porque, se todo o texto de uma página tiver o mesmo tamanho e estilo visual, é difícil para os usuários entenderem rapidamente as diferentes seções da página e encontrarem informações específicas. Boas escolhas tipográficas podem tornar seu aplicativo intuitivo e fácil de navegar.
Depois de concluir esta atividade, será possível comparar seu trabalho com um exemplar completo no próximo item do curso.
Instruções passo a passo
Etapa 1: Abrir seu projeto no Figma
Depois de abrir o Figma, encontre seu projeto em Recent. Clique no projeto para abri-lo.
Etapa 2: Identificar quais espaços do aplicativo precisam de texto
No canvas, escolha uma tela específica e navegue pelas caixas de texto. Se necessário, identifique mais campos de texto ou itens que possam precisar de texto, como botões, menus ou texto de ajuda.
Etapa 3: Preencher as caixas de texto
Em seguida, preencha seus designs com texto de amostra (usando um gerador lorem ipsum da Lipsum ou loremipsum.io) ou conteúdo real que reflita a copy que você quer que os usuários vejam.
Etapa 4: Escolher a classificação, família tipográfica e a fonte
Modifique e refine seu texto definindo fontes e famílias tipográficas a serem usadas para elementos específicos da interface do usuário. Por exemplo, defina um tipo específico de fonte para os títulos e subtítulos, uma fonte para o conteúdo do parágrafo do corpo, uma fonte para os botões e a navegação de menu e uma fonte para o texto de ajuda. Ao fazer suas seleções, lembre-se: a classificação da tipografia é um sistema geral para descrever estilos tipográficos. Duas das classificações de tipografia mais famosas são com serifa e sem serifa. Uma família tipográfica é o estilo geral de uma letra. As fontes são diferenciadas pela espessura do traço, forma, tipo de serifa e comprimentos de linha. Alguns exemplos de famílias tipográficas incluem: Times New Roman, Helvetica e Cambria. Depois de escolher uma classificação de tipografia e uma família tipográfica, é hora de selecionar uma fonte. Lembre-se de que a fonte é o tamanho, a espessura e a ênfase das letras.
A diferença entre família tipográfica e fonte pode ser um pouco confusa, então vamos ver este exemplo.
Nesse caso, a família tipográfica é Roboto. A fonte pode ser mais leve ou em negrito, em itálico ou regular, entre outras variações.
A fonte, no lado direito da tela, é uma coleção de todos os caracteres de uma família tipográfica em um tamanho e um estilo. Por exemplo, Roboto Bold em tamanho 12pt é uma fonte, e Roboto Light em tamanho 18pt também é uma fonte.
Nesta etapa, você deve selecionar a classificação de tipografia, a família tipográfica e a fonte. Certifique-se de mantê-las consistentes em todo o projeto. Se você escolher uma fonte para os botões, todos os botões precisam ser consistentes. O mesmo serve para cabeçalhos e subcabeçalhos. Abaixo, você vai encontrar um exemplo do seletor de fontes no painel “Design”.
Etapa 5: Examinar a hierarquia tipográfica
Agora que você escolheu a classificação da tipografia, a família tipográfica e a fonte, deve examinar a hierarquia tipográfica. Esse método serve para ordenar famílias tipográficas em um layout para criar divisões que mostrem aos usuários onde se concentrar e como encontrar informações. Certifique-se de ter pelo menos dois tamanhos de texto: um tamanho menor para passagens de texto mais longas e um tamanho maior para títulos e cabeçalhos.Abaixo há duas fontes diferentes, ambas da mesma família tipográfica, usadas aqui para um cabeçalho, subcabeçalho e conteúdo do corpo.
Você também deve considerar a legibilidade, a facilidade de leitura e as diretrizes da marca. Elas são escolhas de estilo visual usadas para comunicar a identidade, os valores e a missão da marca. No sentido mais básico, a legibilidade está relacionada ao design da fonte (peso, tamanho, espaçamento etc.), a facilidade de leitura define se a família tipográfica é fácil de ler na tela (contraste, cor etc.) e as diretrizes da marca garantem que as escolhas estão alinhadas com o que o cliente espera.
Etapa 6: Preencher seu app com as novas fontes
Em seguida, estenda essas seleções de fonte para todas as outras telas do app. Lembre-se de que isso é apenas um ponto de partida. Estas instruções são uma orientação. No entanto, você sempre pode ajustar e alterar suas escolhas à medida que trabalha nos designs.
Etapa 7: Refletir sobre a conclusão da atividade
Certifique-se de que a entrega final cumpra os seguintes critérios. Você:
· Criou e preencheu os campos de texto do mockup no Figma?
· Definiu e ajustou o tipo e o tamanho da fonte do mockup no Figma?
· Você tem classificações de tipografia, famílias tipográficas e fontes consistentes?
· Seu trabalho tem uma hierarquia tipográfica clara?
· Seu trabalho é legível?
· Seu trabalho segue as diretrizes de marca aplicáveis?
Etapa 8: Salvar o trabalho
Ao realizar essas atividades, lembre-se de: 
Depois de adicionar as fontes conforme indicado nesta atividade, faça capturas de tela do mockup para mostrar seu progresso.
Salvar todo o seu trabalho no computador, em um disco rígido ou na nuvem, como em uma pasta do Google Drive, para garantir que você terá todos os recursos necessários do curso para seu portfólio posteriormente.
Aqui temos um exemplar completo da Zia's Pizza com uma explicação sobre por que ele atende às expectativas da atividade anterior.
Avaliação do exemplar
Use os critérios abaixo para avaliar a tipografia que você adicionou aos seus mockups na atividade.
No exemplar acima, são usados diferentes pesos e tamanhos de várias famílias tipográficas para estabelecer a hierarquia visual das informações da página. As opções específicas de fonte são estabelecidas e identificadas para que possam ser replicadas em todo o app.
Geralmente, fontes maiores e mais pesadas chamam mais atenção do que fontes menores e mais leves. Fontes maiores são reservadas para o logotipo e cabeçalhos. A família tipográfica de caneta permanente segue um estilo de escrita corrida e é a mais difícil de ler, por isso é a menos usada. O resto do conteúdo escrito usa vários tamanhos e pesos das famílias tipográficas Oswald e Roboto. Essa escolha mantém a consistência, mas permite uma ampla gama de níveis hierárquicos.
A arquitetura da informação também afeta a escolha da tipografia, porque a posição das fontes pode mudar o foco. Certifique-se de que suas escolhas de fonte estão chamando a atenção para onde você quer que o usuário se concentre. 
Compare o exemplar acima com a sua entrega. O que você fez bem? Em que você pode melhorar? Tenha esse feedback em mente conforme avança no curso.
Usar a cor em mockups
Colorir um design de UX
Olá. Já discutimos como escolher a tipografia com cuidado aprimora o produto. Agora, vamos discutir outro elemento do design visual: a cor. Você sabia que a cor pode afetar seu comportamento, humor e pensamentos? As cores podem transmitir emoções, sinalizar ações e adicionar variedade. O vermelho, por exemplo, chama muita atenção. É por isso que coisas como sinais de saída, botões de emergência e placas de “pare” são vermelhos. Objetos com essa cor sempre são notados. Por outro lado, o azul pode comunicar serenidade e sentimentos de calma ou paz. Por isso o azul é considerado muito atraente. Tenha em mente que certas cores podem significar uma coisa em uma região do mundo e algo totalmente diferente em outro lugar. Com o tempo, você vai aprender as cores que são mais comumente associados com diferentes emoções e como essas escolhas afetam suas decisões de design. Por enquanto, vou explicar como escolhas e combinações de cores são usadas no design de UX para dar ênfase, comunicar a marca e afetar a acessibilidade.
Em seguida, vamos falar como cores podem dar ênfase ao seu design. Uma mudança de cor pode chamar a atenção de usuários a um ponto focal no seu design. Esse ponto focal é muitas vezes uma ação importante que você quer que os usuários executem, como um link de inscrição ou um botão de compra. Pense na página inicial do nosso app de passeadores de cães. Queremos dar ênfase ao botão de agendamento. Então provavelmente vamos usar uma cor brilhante para esse botão. Uma regra comum que designers de UX usam é a regra 60-30-10. Uma cor neutra compõe 60% da paleta de cores do design. Uma segunda cor complementar compõe 30% da paleta. Uma terceira cor de destaque compõe 10% da paleta para dar ênfase. No app de passeadores de cães, podemos usar branco como 60% das cores no design, cinza como 30% e laranja como 10%. Cores de destaque, como laranja, no nosso caso, podem ser usadas para enfatizar ou destacar informações, enquanto cores neutras desempenham um papel auxiliar em planos de fundo, linhas e texto. Vamos abrir nosso app de passeadores de cães no Figma e aplicar a regra 60-30-10 na página inicial. Na última vez em que trabalhamos na página inicial, adicionamos uma linha de texto que dizia: “Tarde agitada? Podemos levá-los para passear”. Vamos dar mais destaque para esse texto colocando um retângulo cinza ao redor do texto.
Vou para a barra de ferramentas no canto superior esquerdo da página e clico no ícone que parece um quadrado chamado “Rectangle”. No menu suspenso, vou selecionar o retângulo e desenhar um retângulo no meu design. Agora vou mudar a cor do retângulo para um cinza claro. Neste caso, vou escolher este cinza claro com código hexadecimal d4d4d4. Vou clicar com o botão direito do mouse no retângulo e selecione “Send to back” para que o texto apareça em cima do retângulo cinza claro. Aqui está. Em seguida, vamos criar um botão. Vou desenhar um novo retângulo seguindo as mesmas etapas. Este retângulo será quase tão largo quanto a tela do celular, deixando um pouco de espaço em branco nos lados esquerdo e direito.
Vou usar o alinhamento horizontal no botão para centralizar o retângulo no meio da tela do celular. Agora, vou mudar a cor do retângulo para um laranja brilhante para dar ênfase. Usando o código hexadecimal fa7b17, quero fazer esse botão se destacar porque clicar nesse botão é a ação mais importante que nós queremos que usuários façam na tela. Agora preciso adicionar um texto para descrever esse botão. Vou voltar ao painel no canto superior esquerdo e clicar no T de “texto”. Vou desenhar uma caixa de texto dentro do meu retângulo alaranjado. Vou digitar, escolher um horário. Depois vou mudar a cor do texto para branco, que tem código hexadecimal ffffff.
Parece que a fonte é muito grande. Vou mudar o tamanho da fonte para 18 para encaixar melhor neste botão retangular alaranjado. E aí está. Começamos a adicionar cor à nossa página inicial do app de passeadores de cães para dar ênfase. Outra razão por que a cor é tão importante no design de UX é que as cores podem comunicar a marca, que é o visual e a voz de uma empresa. As cores desempenham um papel importante nas diretrizes de marca de uma empresa, assim como a tipografia. A cor ajuda a definir a identidade visual de um produto, fazendo com que ele se destaque entre os concorrentes. Pense em algumas das marcas mais reconhecidas mundialmente e as cores que elas usam em produtos e logotipos. Será que o amarelo dos arcos do McDonald's fazem você se sentir alegre? O vermelho ousado da Coca-Cola faz você se sentir com energia? Algumas empresas ainda usam grupos de cores consistentemente para se destacar. Por exemplo, você notou que o Google usa quatro cores específicas em toda a marca? Azul, vermelho, amarelo e verde. Muitas das imagens e animaçõesdeste programa de certificação usam as quatro cores do Google. Isso não é um acidente. Essas cores são consistentes em todos os produtos, o que faz os designs do Google serem identificados instantaneamente.
Quando você está trabalhando para uma empresa como designer iniciante, você precisa estar ciente de como usa as cores da marca da empresa nos seus designs. Mantenha as associações de cores consistentes, independente de estar criando um aplicativo, site ou logotipo. Terceiro, a escolha da cor pode afetar a acessibilidade dos designs. É importante verificar o contraste entre as cores que você escolher. Por exemplo, a imagem à esquerda usa um texto preto em um fundo branco, o que tem uma alta razão de contraste, mas a imagem à direita usa vários tons de verde, azul e amarelo sobre um fundo verde camuflado, tornando o texto muito difícil de lido e, portanto, inacessível. Como designer, você deve seguir as Diretrizes de Acessibilidade para Conteúdo da Web, ou WCAG, em relação aos padrões de contraste de cores para garantir que seus designs sejam acessíveis. Para informações mais detalhadas, veja os textos desta seção do curso. Outra coisa para ter em mente ao escolher as cores do seu design: teste suas opções de cores em vários dispositivos e em diferentes ambientes. As cores podem parecer diferentes no computador desktop e no celular. As cores também podem parecer diferentes dependendo de você estar usando o dispositivo à luz do dia ou no escuro.
Outro exemplo disso é uma foto viral da Internet de 2015 de um vestido que alguns internautas descreveram como branco e dourado e outros descreveram como preto e azul. Muitas pessoas ficaram confusas sobre como o mesmo vestido pode ser interpretado como tendo cores completamente diferentes, mas a explicação era simples. A cor do vestido mudava dependendo da cor da luz em que o usuário estava. O vestido parecia preto e azul sob luz amarela e branco e dourado sob luz azul. Esse é apenas um exemplo de por que testar suas escolhas de cores em diferentes ambientes é crucial. Poderíamos ter uma discussão interminável sobre cores, mas o principal argumento é que usar a cor de forma eficaz nos seus designs deve ajudar os usuários a navegarem melhor pelo produto. A seguir, vamos discutir um terceiro elemento do design visual: a iconografia. Vamos continuar.
Trabalhar com cores em mockups
Você já olhou para uma cor e sentiu uma conexão emocional? A cor é uma das maneiras pelas quais os humanos se relacionam com objetos. Desde as mudanças de estação até um pôr do sol verdadeiramente incrível, a cor evoca sentimentos. Como designer de UX, é importante aprender a aproveitar essa conexão emocional à medida que você adiciona cor aos designs. 
O Figma tem um sistema dinâmico para que designers melhorem os mockups com cores. Vamos examinar as funções básicas.
Criar e aplicar cores usando o recurso de preenchimento
1. Abra um arquivo no Figma. 
2. Vamos selecionar a ferramenta de retângulos. Ela é o quarto ícone da esquerda para a direita na barra de ferramentas, à direita da ferramenta de frame.
3. Desenhe uma forma retangular no frame.
4. Selecione a forma.
5. No painel Propriedades, no lado direito da tela do Figma, há uma seção na parte inferior chamada Fill.
6. Nela, encontre a caixa com a cor padrão, cinza (código hexadecimal: C4C4C4). Clique na caixa de cores para ver a paleta, conforme mostrada na imagem abaixo. Escolha qualquer cor no espectro. Por exemplo, é possível arrastar o seletor de cores até o canto superior esquerdo para ter um branco forte ou para o canto inferior esquerdo para ter um preto profundo. 
7. Abaixo da caixa de cores está o seletor de cores, que também é conhecido como conta-gotas. Usando o seletor de cores, é possível pegar uma “gota” de cor para um design, imagem ou texto no canvas e aplicá-la a outro elemento de design. Teste isso no seu próprio design!
Ajustar os valores de cor
Agora que você sabe como mudar a cor de um elemento de design, o que mais pode fazer?
Gradiente
No canto superior esquerdo da seção de preenchimento, você vai notar a palavra Solid. Se você clicar na palavra “Solid”, vai aparecer um menu suspenso com algumas coisas interessantes que podem ser feitas com gradientes. Pense no gradiente como a opacidade, mas com direções específicas. Os tipos de gradientes que podem ser aplicados são: 
· Linear: cor completa em um lado da forma que se esvai
· Radial: cor completa no centro da forma que se esvai em um círculo
· Angular: cor completa em uma área da forma que se esvai no sentido horário
· Diamante: cor completa horizontal e verticalmente na forma de um sinal de mais, que se esvai em direção às bordas na forma de um diamante
· Imagem: coloca uma imagem dentro do elemento que você criou. Não é realmente um gradiente, mas é aqui que fica a opção de imagem no Figma.
Cada um desses tipos de gradiente permite ajustar a direção e a cor. Para saber mais sobre o uso de gradientes no Figma, veja este artigo do Figma Help: Paints in Figma.
Matiz
Abaixo da caixa de cores, há uma barra de controle deslizante arco-íris para ajustar a matiz e encontrar o tom perfeito de uma cor para seu design. Por exemplo, para escolher um verde-oliva, mova o controle deslizante de matiz para verde e, em seguida, ajuste o seletor de cores.
Opacidade
Abaixo do controle deslizante de matiz fica o controle deslizante de opacidade. Opacidade é o grau em que uma cor é opaca ou transparente. Em outras palavras, ajustar o controle deslizante de opacidade muda a intensidade da cor. A opacidade 100% representa uma cor rica, cheia, que também é conhecida como opaca. A opacidade de 50% representa uma cor transparente, clara o suficiente para ser reconhecida, mas também conseguimos ver o que está além dela. A opacidade de 0% significa que a cor não é mais visível.
Uma maneira de pensar sobre a opacidade de cores é como camadas de tinta. Aplicar várias camadas de tinta vermelha faz com que você se aproxime de uma opacidade de 100%. Se você aplicar apenas uma camada de tinta vermelha em uma parede branca, ela ainda será um pouco transparente. E uma parede completamente em branco é 0% opaca!
Criar e aplicar cores usando o recurso de traço
Bom trabalho até aqui! Você aprendeu a alterar a cor de preenchimento de um objeto. Agora vamos aplicar os mesmos princípios para mudar o desenho da forma. O traço de uma forma é o limite ou contorno desse objeto. Veja como modificar o traço:
· Selecione uma forma que você criou.
· No painel Propriedades, no lado direito da tela do Figma, navegue até o cabeçalho Fill e a seção Stroke.
· Clique duas vezes na palavra Stroke. Ou pressione o botão de Mais (+) no lado direito.
· Observe a cor padrão, preto (código hexadecimal: 000000) e a espessura da linha padrão (1). O traço, ou espessura da linha, pode variar de 1 a 1000. Tente ajustar o número da espessura da linha e veja o que acontece no seu design!
· Há também um menu suspenso com a palavra Center visível. Esse menu suspenso muda onde o traço é colocado. Por padrão, o traço é colocado em torno da forma, como uma borda. O traço pode ser alterado para dentro ou fora da forma.
· Clique nos três pontos à direita para abrir o menu Advanced Stroke. Aqui, é possível alterar a forma do contorno, incluindo o ângulo. 
Aplicar um traço nos seus designs pode ajudar a destacar as cores e criar formas dinâmicas nos protótipos. Aqui está um artigo do Design Code para você aprender a alterar trações nos seus designs: Figma Handbook: Fill, Stroke, and Advanced Stroke.
Definir e salvar estilos de cores 
Encontrar as melhores cores para seus designs pode levar tempo e muitas iterações! Quando define as cores e salva a paleta no Figma, você poupa tempo no futuro.
1. No painel “Layers”, no lado esquerdo da tela do Figma, selecione a forma que tem a cor que você quer salvar e reutilizar.
2. No painel “Design”, no lado direito da tela do Figma, navegue até o cabeçalho Fill. Clique no ícone de estilo que é representado por quatro pontos em forma de quadrado.
3. Aparecerá um menu chamado Color Styles.Clique no ícone de Mais (+) no canto superior direito do menu “Color Styles”.
4. Nomeie o estilo.
5. Clique em Create Style.
E é isso! Agora você salvou uma cor para reutilizar em diferentes partes dos seus designs. Para usar uma cor que você salvou: 
1. No painel “Layers”, no lado esquerdo da tela do Figma, selecione uma forma que você quer combinar com uma cor salva.
2. No painel “Design”, no lado direito da tela do Figma, navegue até o cabeçalho Fill. Clique no ícone de estilo que é representado por quatro pontos em forma de quadrado.
3. Aparecerá um menu chamado Color Styles. Selecione um estilo de cor da lista.
Se você precisar de ajuda ou quiser saber mais, acesse o Figma Help Center para explorar a criação de estilos para cores, textos, efeitos e grades de layout.
Como escolher cores
Agora você sabe como adicionar cores aos seus designs no Figma! Mas como escolher a cor “certa”?
Há uma área inteira do design que investiga como a cor afeta inconscientemente a forma como percebemos objetos. Para saber mais sobre a aplicação da teoria das cores nos seus designs e como usá-las de maneira eficiente, veja estes recursos: 
· Algumas cores têm significados universais. Use esses significados para afetar o trabalho que você cria. A Toptal tem um artigo interessante que examina o papel da cor em UX.
· Quer saber mais sobre teoria das cores e não sabe por onde começar? Aqui está um guia breve e completo sobre teoria das cores da CareerFoundry: The Color Guide: An Introduction To Color Theory And Color Palettes.
· Aprenda a usar a cor para criar designs modernos com este artigo do design de materiais do Google.
· Não sabe por onde começar com suas cores? O Coolors é a solução! O site Coolors gera cores complementares com um clique da barra de espaço. É provável que, depois de passar por algumas paletas, você terá uma ideia melhor de quais cores você quer usar no seu design.
Considerações de acessibilidade em relação a cores
A cor é uma das maneiras que você, como designer, pode se conectar com as emoções dos usuários e chamar a atenção para determinadas partes de um design. Mas, ao projetar, é importante pensar em como a cor é interpretada por todos os usuários do produto. Alguns usuários terão dificuldade em perceber determinadas cores ou combinações de cores, então é possível que as informações que as cores do seu design transmitem sejam perdidas. É fundamental que seus designs sejam inclusivos e reflitam as diversas necessidades dos usuários do produto. Além disso, ao projetar pensando na acessibilidade, você torna seus designs mais fáceis de interagir para todos os usuários.
Há muitos recursos para ajudar designers a usarem a cor de maneira acessível para uma ampla gama de pessoas. Por exemplo, a W3C reconheceu a necessidade de melhorar a acessibilidade das pessoas com deficiência, incluindo deficiência visual, auditiva, física, de fala, cognitiva, linguística, aprendizagem e deficiências neurológicas. Assim, eles desenvolveram as Diretrizes de Acessibilidade para Conteúdo da Web (WCAG, do inglês “Web Content Accessibility Guidelines”), que são uma série de diretrizes para melhorar a acessibilidade na Web.
Como você pode usar essas diretrizes nos seus próprios designs? Vamos investigar.
Daltonismo
O daltonismo causa dificuldade em distinguir entre certas cores. Existem três categorias comuns de daltonismo: vermelho-verde, azul-amarelo e daltonismo total. Para entender como o daltonismo pode afetar a forma como os usuários veem corem, acesse o Colblindor, um simulador de daltonismo em que é possível fazer upload de imagens e verificá-las com base em vários filtros que simulam daltonismo. 
Existem algumas maneiras de pensar na acessibilidade relacionada a cores enquanto você projeta: 
1. Use ícones em designs, além de cores. Por exemplo, veja a imagem abaixo: se você está projetando um formulário e quer indicar que um campo está sem texto ou com o formato incorreto, não basta colocar o texto incorreto na cor vermelha. Você também deve usar um ícone de ponto de exclamação vermelho. O ícone do ponto de exclamação chama a atenção dos usuários para o campo de formulário com a cor e o ícone, de modo que seus designs serão mais claros para mais usuários.
À direita está o mesmo formulário com um ponto de exclamação vermelho ao lado do campo de endereço, porque o endereço está incorreto/incompleto e há uma mensagem de aviso “Formato de endereço inválido”
Graphic comparison of two phone screens; on the left is an address entry form and the address appears to be mistyped.On the right is the same form, and there is an exclamation mark red alert next to the address field, where the address is incorrect/incomplete and there is a warning message "Invalid address format"
2. Use padrões e texturas para criar contraste. Contraste é a diferença entre dois ou mais elementos de um design. É comum criar contraste usando imagens em preto e branco ou um tamanho de texto grande para o cabeçalho e um tamanho menor para o corpo do texto. Imagine que você está criando um gráfico de barras sobre pesquisa de usuário usando as cores da marca de um cliente. Para criar contraste sem depender apenas da cor, é possível adicionar listras sutis a uma coluna e pontos a outra, como mostrado na imagem abaixo. Com padrões contrastantes, além da cor, as barras no gráfico serão claramente diferenciadas para todos os usuários.
graphic comparing two phone apps. On the left, a bar graph that distinguishes bars based on color.On the right, the bars on the graph are distinguished by color and texture (e.g. dots vs. lines)
À direita, as barras no gráfico são diferenciadas por cor e textura (por exemplo, pontos versus linhas)
3. Evite combinações de cores que podem ser difíceis de diferenciar umas das outras. Aqui estão algumas combinações de cores que muitas vezes são difíceis para usuários daltônicos diferenciarem: 
· Verde e vermelho
· Verde e marrom
· Azul e roxo
· Verde e azul
· Verde claro e amarelo
· Azul e cinza
· Verde e cinza
· Verde e preto
Lembre-se: se você usar verde nos seus designs, isso não significa que você precisa evitar totalmente vermelho, marrom, azul e cinza. Mas, como essas cores podem ser difíceis de distinguir, é melhor não colocar essas cores diretamente ao lado umas das outras, especialmente para informações críticas. Além disso, você deve criar outras formas de contraste, como adicionar rótulos escritos para diferenciar fatos importantes. 
À direita está uma versão mais contrastante que usa gráficos azuis e vermelhos e um fundo claro
Esta é a principal lição: seus designs devem transmitir informações de várias maneiras além de apenas uma cor, como usar ícones, padrões, texturas e combinações de cores facilmente distinguíveis.
Baixa sensibilidade ao contraste
Pessoas que têm baixa sensibilidade ao contraste enxergam os objetos como escuros ou pouco nítidos, o que torna esses objetos mais difíceis de identificar. Muitas pessoas têm baixa sensibilidade ao contraste diariamente. Por exemplo, pessoas que com alta acuidade visual têm baixa sensibilidade ao contraste quando está escuro e a tela digital é muito brilhante, ou quando está claro e a tela digital está muito escura. Além disso, à medida que os olhos das pessoas envelhecem, a sensibilidade ao contraste fica naturalmente mais fraca.
Para projetar considerando a baixa sensibilidade ao contraste, use a razão entre contraste e luminosidade, que é uma medição do contraste entre o plano de fundo e a cor do texto usado em cima desse plano. Como padrão, as diretrizes WCAG recomendam que a razão entre contraste e luminosidade de imagens e texto satisfaçam uma razão de contraste de pelo menos 4,5 : 1.
O que isso significa exatamente para seus designs? Veja estes quatro exemplos de razões de contraste em ação:
Quatro diferentes razões de contraste, da mais baixa para a mais alta. O baixo contraste tem uma razão de 2 : 1. Para ter contraste mínimo, a razão precisa ser 4,5 : 1. O alto contraste tem uma razão de 16 : 1. Para contraste máximo a razão é de 21: 1. O texto que é