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 émostrado diz: “O contraste de cores é importante para os usuários distinguirem vários elementos de texto e não texto. Quanto maior o contraste, mais fácil é ver as imagens.”
· O baixo contraste tem uma razão de 2 : 1. Como você vê aqui, a cor do plano de fundo e o texto são difíceis de ler.
· O baixo contraste tem uma razão de 4,5 : 1. Essas combinações de plano de fundo e texto são mais fáceis de ler, mesmo que usem cores claras.
· O alto contraste tem uma razão de 16 : 1. Esses designs são fáceis de ler e usam cores mais ousadas para textos que se destacam nos planos de fundo. 
· O contraste máximo tem uma razão de 21 : 1. Para ter mais contraste nos seus designs, como aqui, use apenas preto e branco.
O vídeo Colors with Good Contrast da W3 mostra como a razão de contraste de luminosidade afeta os usuários diariamente, desde na leitura das placas de rua até na hora de conversar com um ente querido.
Para verificar a razão de contraste dos seus designs, a WebAIM fornece uma ferramenta de verificação de contraste em que é possível inserir os códigos hexadecimais das cores dos seus designs. Se sua razão de contraste não atender aos padrões descritos acima, use o controle deslizante de matiz da ferramenta para ajustar e encontrar novas cores que atendam às diretrizes WCAG para designs acessíveis. 
Sensibilidade à luz
Alguns usuários são tão sensíveis à luz e cores brilhantes quanto ao baixo contraste. A sensibilidade à luz é a incapacidade de tolerar a luz. Pode ser que usuários com sensibilidade à luz interajam com seus designs em uma tela com baixa luminosidade. Ou eles podem usar o sistema operacional do dispositivo para escolher entre modo claro, modo escuro e modo de alto contraste, como mostrado na imagem abaixo. É melhor permitir que os usuários façam essas escolhas de configuração, então tente criar modos claros e escuros para seus próprios projetos.
Graphic of display settings showing Light Mode, Dark Mode, and High Contrast Mode
Considerações de cor 
Como sempre, o objetivo de projetar uma boa experiência de usuário é simplificar e melhorar a vida das pessoas. Para criar produtos úteis e totalmente acessíveis, siga algumas diretrizes e projete pensando na acessibilidade.
Se você quiser saber mais sobre design com cores acessíveis, veja este vídeo da W3C, os criadores das diretrizes WCAG, que demonstra como analisar designs para que tenham acessibilidade na Web: Easy Checks: A First Review of Website Accessibility.
Não sabe como aplicar as diretrizes WCAG na paleta de cores do seu design? Aqui está um gerador de paleta de cores da Color Safe que mostra as diretrizes WCAG em ação. 
Faça download do plug-in Stark para executar verificações de contraste nos seus designs diretamente no Figma, poupando tempo e melhorando seu fluxo de trabalho. Veja a página na Comunidade do Figma: Stark - Figma.
Adicione cores ao seus mockups do projeto do portfólio
Introdução da atividade
Esta atividade vai ajudar você a aplicar mais habilidades de mockup. Nesta atividade, você vai criar uma paleta de cores para o projeto do Sharpen. Neste ponto, você deve ter mockups no Figma. Esses mockups são de uma atividade anterior do curso, Adicione tipografia aos seus mockups, onde você definiu as fontes do texto para seu projeto do Sharpen. Agora você vai adicionar um pouco de cor aos seus designs!
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 site ou iniciar o aplicativo desktop do Figma, encontre seu projeto em “Recent”. Clique no projeto para abri-lo.
Etapa 2: Criar uma paleta de cores no Figma
Crie um conjunto de formas no canvas do Figma e use a ferramenta de seletor de cores para definir um conjunto de cores para seus mockups do projeto do Sharpen. Você vai aplicar essas cores a elementos representativos no seu design, por exemplo, em botões, bordas, menus, planos de fundo e outros preenchimentos.
Comece definindo pelo menos três cores distintas que você quer usar no design. Ao escolher as cores, tenha em mente estas considerações importantes:
Suas escolhas de cor devem ajudar os usuários a navegar melhor pelo design.
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.
Esteja ciente de como a escolha de cores pode afetar a acessibilidade dos designs. Seu design deve estar sempre alinhado com as Diretrizes de Acessibilidade para Conteúdo da Web (WCAG).
Para adicionar variedade aos seus designs, tente expandir sua paleta de cores para incluir tons, matizes ou cores complementares baseadas nas três cores que você escolheu originalmente.
Para criar a paleta de cores no Figma, comece com uma forma básica, como um retângulo:
Coloque a mesma quantidade de formas e cores na sua paleta. Para este exemplo, vamos usar quatro cores:
Depois, altere as cores de preenchimento no painel de design à direita:
Com cores adicionadas às formas, rotule as formas abaixo com o código hexadecimal da cor escolhida:
Etapa 3: Salvar sua paleta de cores para uso futuro
No Figma, é possível salvar paletas de cores para não precisar recriá-las sempre que for trabalhar nos seus designs. Para fazer isso:
· Selecione uma cor no canvas para o qual você quer criar um estilo de cor.
· Clique no ícone de estilos (os quatro pontos) na seção Fill do painel Design.
· Para criar um novo estilo, clique no ícone de Mais do menu Color Styles.
· Nomeie o estilo e clique em Create Style.
· Crie um estilo de cor com base em cada uma das cores definidas na Etapa 1 acima.
· Para aplicar os estilos de cores salvos a um novo objeto:
· Selecione uma camada em que você quer aplicar o estilo de cor.
· Clique no ícone de estilo (quatro pontos) da seção Fill.
· Escolha o estilo de cor que você quer aplicar.
Etapa 4: Determinar como você quer aplicar as cores
Agora que você definiu uma paleta de cores para seu design, aplique os estilos de cores salvos a um canvas dos mockups para seu projeto de portfólio. Determine a melhor forma de aplicar as cores a itens representativos na sua interface do usuário. Decida quais cores funcionam melhor para textos, botões, bordas, menus, planos de fundo e outros preenchimentos.
Etapa 5: Preencher seu aplicativo com cores
Em seguida, estenda essas seleções de paleta de cores para as outras telas do seu app. Lembre-se, este é apenas um ponto de partida. Estamos fornecendo estas instruções como orientação. No entanto, você sempre pode ajustar e alterar suas escolhas à medida que trabalha nos designs. Ao colocar camadas nas suas seleções de cores, preste atenção nas suas decisões anteriores e, se necessário, volte e revise. Lembre-se também de que esta não é a decisão final das cores. Você terá oportunidades de atualizá-las e alterá-las à medida que recebe feedback externo.
Etapa 6: Refletir sobre a conclusão da atividade
Sua entrega final precisa abordar as seguintes questões.
· Sua paleta de cores oferece variedade suficiente ao design?
· Suas escolhas de cor ajudam os usuários a navegar melhor pelo design?
· Suas opções de cores estão alinhadas com as Diretrizes de Acessibilidade para Conteúdo da Web (WCAG)?
· Você salvou sua paleta de cores como uma coleção de estilos de cores?
· Você aplica as cores de forma consistente em todo o design?
Etapa 7: Salvar o trabalho
Ao realizar essas atividades, lembre-se de: 
· Depois de aplicar a cor 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 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 as cores que você adicionou aos seus mockups na atividade.
Este exemplousa um vermelho brilhante para os botões para que eles se destaquem, facilitando a navegação. O mesmo vermelho chamativo é usado para enfatizar textos importantes e agrupar elementos. Preenchimentos complementares em verde e rosa claro adicionam variedade e tornam o design mais agradável. Essas cores pastel também servem como um bom plano de fundo para o texto cinza escuro, o que condiz com os padrões de acessibilidade das diretrizes WCAG. O resto é branco sólido para oferecer ao menos um pouco de plano de fundo para permitir que outros elementos se destaquem.
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 iconografia em mockups
Iconografia no design de UX
Olá! Agora que exploramos dois elementos do design visual, a tipografia e a cor, vamos discutir um terceiro: a iconografia.
A iconografia é um sistema de imagens gráficas ou símbolos que estão associados a um assunto ou uma ideia. Chamamos essas imagens e símbolos de ícones. Na superfície, os ícones podem parecer criações divertidas, mas, quando feitos de forma eficaz, eles evitam o desperdício de espaço, chamam a atenção do usuário e são uma maneira fácil de fazer a transição para outra página ou local. Contamos com ícones o tempo todo para encontrar informações em ambientes digitais e físicos.
Por exemplo, um ícone de seta em um botão indica que um elevador vai subir ou descer. Ou o ícone de sol na tela do computador permite ajustar os níveis de brilho da tela.
Às vezes, os ícones indicam ações específicas, como a flecha ou o sol nesses exemplos.
Outras vezes, os ícones fornecem informações complementares, como um ícone de bateria que avisa a hora de recarregar um dispositivo.
Alguns ícones são comumente conhecidos porque têm um uso generalizado. Por exemplo, você já viu este ícone de casa? Esse ícone de casa, no menu de navegação, indica um caminho de volta para a tela inicial do aplicativo.
Como esse ícone é universalmente compreendido pela maioria dos usuários, basta usar o mesmo ícone de casa nos seus próprios designs de aplicativos.
No entanto, outros ícones têm associações culturais específicas.
Por exemplo, talvez um ícone com uma bola de futebol americano não é ideal para representar esportes em um aplicativo global.
Isso porque o futebol americano não é tão popular em todo o mundo quanto nos Estados Unidos. Usar um ícone mais universal, como uma bola de futebol, pode ser mais apropriado para um público global. Ao usar ícones nos seus designs, adicione um rótulo de texto para descrever o que o ícone significa.
Se você adicionar um ícone de uma casa, também deve adicionar um rótulo de texto que diz “Tela inicial” abaixo desse ícone. O rótulo de texto também torna o app mais acessível, porque os ícones não podem ser lidos por um leitor de tela. Por fim, a iconografia também é crucial para a marca de uma empresa. Pense nos ícones do Google Workspace, por exemplo. Por causa da cor e estilo, não há dúvida de que esses ícones pertencem a produtos do Google. Quando você inicia sua carreira de design de UX, é provável que a empresa para que você vai trabalhar tenha um conjunto próprio de diretrizes para a iconografia interna, o que ajuda você a tomar decisões de design com mais facilidade.
Vamos continuar criando a página inicial do nosso app de passeadores de cães e adicionar um ícone.
Aqui é onde deixamos o design no último vídeo.
Para começar, vou adicionar um ícone de casa. Vou navegar até a página do Material Design do Google, que tem uma lista de ícones gratuitos disponíveis para qualquer pessoa usar. Vou clicar em “Resources”. Que prático! Na parte superior da página, os ícones estão listados nos recursos mais usados.
Os ícones estão listados em ordem alfabética, então vou rolar para baixo até H de ”home” e selecionar o ícone de casa. Vou clicar no botão azul de download no canto inferior esquerdo da minha tela para salvar esse ícone no meu computador. Depois, vou navegar de volta para o Figma. Vou clicar no retângulo no canto superior esquerdo e selecionar “Place Image”. Quando faço isso, aparece uma janela perguntando o arquivo que eu quero selecionar.
Preciso encontrar o ícone de casa que salvei e clicar em “Open”.
Agora, vou desenhar no meu app o local onde eu quero colocar o ícone da casa. Aqui está. Posso mudar a cor do ícone para laranja usando o mesmo código hexadecimal que o botão que adicionamos anteriormente, que é fa7b17.
Por fim, preciso adicionar uma caixa de texto abaixo do ícone usando as mesmas etapas que já descrevemos antes. Vou escrever “Tela inicial” na caixa de texto.
Centralizo o texto abaixo do ícone. Depois, mudo a cor do texto para usar o mesmo laranja que estamos usando em todo o aplicativo e mudo o tamanho do texto para 12.
É isso, agora temos um ícone para a página inicial do nosso app de passeadores de cães. Agora terminamos de discutir três elementos fundamentais do design visual: tipografia, cor e iconografia. A seguir, vamos explicar como organizar esses elementos dentro do seu design. Vamos continuar.
Trabalhar com ícones em mockups
Ícones são imagens ou símbolos que representam ações ou ferramentas específicas em um app ou site. O uso de ícones nos designs pode comunicar rapidamente conceitos, em vez de explicar o significado de um conceito com palavras.
Os ícones têm estilos e significados variados, como mostrado nas imagens acima de um ícone de perfil, um ícone de localização, um ícone de favorito e um ícone de zoom. Existem dois ícones universais que são usados no design de apps móveis e sites: página inicial e pesquisa. O ícone de página inicial é representado por uma casa, e a pesquisa é representada por uma lupa. É provável que você inclua esses dois ícones nos designs que está criando neste curso!
Uma ferramenta de design como o Figma pode ser usada para importar, criar, ajustar e salvar ícones. Veja a seguir.
Importar e criar ícones
Existem muitos recursos para ajudar você a importar e criar ícones para o seu próprio projeto de design. Por padrão, o Figma é compatível com o Font Awesome, um conjunto gigante de ícones personalizáveis com uma fonte fácil de ler. Com o Font Awesome, é possível:
· Manter os ícones como estão (regulares) ou torná-los sólidos, para que sejam mais fáceis de ver. 
· Visualizar e copiar itens da folha de dicas do Font Awesome.
· Clique com o botão direito do mouse em um ícone para copiá-lo para a área de transferência e colá-lo no canvas do Figma.
Saiba mais sobre ícones e o Font Awesome no Figma Help Center.
Outra opção é importar ícones de um sistema de design atual, como o Material Design do Google ou as diretrizes para interfaces humanas da Apple. Por exemplo, é possível adicionar ícones de Material Design do Google diretamente ao seu espaço de trabalho no Figma.
Ajuste os ícones
Para redimensionar um ícone no Figma:
1. Clique para selecionar o ícone que você quer ajustar.
2. Ajuste o tamanho e as proporções segurando a tecla Shift enquanto arrasta o canto do ícone. 
Considere os usuários
Cada vez que você criar ou adicionar um ícone aos designs, pense nos usuários para quem você está projetando. Os ícones que você escolher devem ser inclusivos, acessíveis e facilmente compreensíveis para todos os usuários que seu produto vai alcançar. Quando pensar nos ícones dos seus designs, tenha em mente estas três práticas recomendadas:
· Torne os ícones universais. Considere se um ícone é cultural ou geograficamente específico antes de adicioná-lo aos seus designs. O ícone fará sentido para um público global ou apenas para usuários da região onde você mora? Onde estão os usuários do produto que você está projetando? Seu objetivo deve ser incluir ícones que todos reconhecem e entendem, independentemente das suas origens. Por exemplo, a maioria dos usuários está familiarizada com a ideia de que o ícone da casa significa “página inicial”, o que pode ajudar todos a navegar pelo seu app.
· Considere incluir um rótulo de texto. Normalmente, os rótulos de texto têm uma fonte pequenalogo abaixo de um ícone. Incluir um rótulo de texto garante que os usuários que utilizam um leitor de tela ou que estão começando a usar a tecnologia sejam capazes de identificar o ícone. Além disso, um rótulo de texto pode descrever claramente (em uma palavra!) o que o ícone significa, basta escrever, por exemplo “Pesquisar” sob um ícone de lupa.
· Evidencie o branding. Tudo, incluindo seus ícones, deve refletir a imagem que você criou para sua marca. Isso significa que tudo do seu app precisa ter o mesmo esquema de cores, a mesma fonte e o mesmo estilo. Por exemplo, veja o conjunto de ícones para o site do Material Design e você vai notar que a cor e o design fluem bem entre cada conjunto de ícones, e nenhum dos ícones parece fora do lugar.
Saiba mais sobre ícones
Para saber mais sobre como adicionar ícones aos seus designs, veja este post no blog da Icon Finder sobre como usar ícones no Figma. Ou, se você quiser levar seu trabalho de design um passo adiante, veja este vídeo de Robert Bradford sobre como criar ícones no Figma.
Além disso, este artigo da Intechnic apresenta dicas e truques sobre a usabilidade de ícones.
Adicione ícones aos seus mockupsdo projeto de portfólio
Introdução da atividade
Essa atividade vai ajudar você a definir e usar a iconografia nos seus mockups. Nesta atividade, você vai adicionar ícones ao primeiro projeto de portfólio que você criou a partir da instrução do Sharpen que você escolheu. Os mockups das atividades anteriores do curso devem estar salvos no Figma, no lugar em que você definiu fontes e cores para o seu design. Agora você vai adicionar ícones!
Ícones são imagens ou símbolos que representam ações ou ferramentas específicas em um app ou site. Quando usados efetivamente, os ícones limitam o espaço desperdiçado, chamam a atenção do usuário e facilitam a transição para outra página ou local. Na melhor das hipóteses, eles também melhoram a acessibilidade, ajudando a superar barreiras linguísticas.
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
Adicione ícones aos mockups do seu projeto. Se você fizer isso de forma eficaz, vai melhorar a navegação, poupar espaço, chamar atenção e tornar seu design mais acessível!
Etapa 1: Abrir seu projeto no Figma
Acesse o site do Figma ou abra o app para computador. Faça login, clique em Recent na barra de navegação superior esquerda e depois clique no seu projeto para abri-lo. 
Etapa 2: Determinar onde incluir ícones 
Avalie o design do projeto focando no fluxo do usuário e identifique pontos onde os ícones possam orientar e apoiar seus usuários. Comece identificando duas a três áreas em que é possível incluir ícones. 
Dependendo das necessidades do seu design específico, isso pode incluir 
· Ícones do menu inicial
· Ícones de contato
· Ícones de configurações
· Pense em como os ícones podem auxiliar seu design:
· Poupando espaço
· Chamando a atenção do usuário
· Facilitando a transição para outra página ou local
Etapa 3: Projetar ou importar ícones eficazes para seu projeto
Depois de determinar onde os ícones podem efetivamente orientar e auxiliar seus usuários, é hora de colocar esses ícones no design. A boa notícia é a possibilidade de importar, criar, ajustar e salvar ícones com o Figma. Por exemplo, é possível importar ícones de código aberto usando este plug-in gratuito do Material Design para Figma. Se você está com inspiração ou precisa de ícones personalizados, pode projetá-los do zero. Se quiser projetar seus ícones do zero, considere os princípios de design discutidos no site do Material Design.
Independente da maneira escolhida para implantar os ícones no seu design, você precisa considerar estas diretrizes essenciais:
· Pense na inclusão e na acessibilidade ao criar e selecionar ícones.
· Pense se um ícone ou imagem é cultural ou geograficamente muito específico.
· Adicione um rótulo de texto para descrever o que significa o ícone. O rótulo de texto torna o aplicativo mais acessível porque um leitor de tela não pode ler ícones.
· Pense em como a iconografia é crucial para a marca de uma empresa e esteja ciente das diretrizes da marca.
Etapa 4: Adicionar ícones ao seu design
Depois de salvar a imagem ou fazer download de um ícone de código aberto, coloque-o nos seus mockups:
De volta ao canvas do Figma, clique no retângulo no canto superior esquerdo e selecione Place image.
2. Quando solicitado, encontre o arquivo do ícone que você quer inserir e clique em Open.
3. No mockup do aplicativo, clique no local em que você quer colocar o ícone.
4. Ajuste o tamanho do ícone: selecione o ícone que você quer ajustar e segure a tecla Shift enquanto arrasta o canto. Ao segurar a tecla Shift, você fixa as proporções do ícone, mantendo a altura e largura consistentes.
Para ajustar a altura ou largura com o teclado, clique em Properties Inspector e faça os ajustes.
5. Ajuste a cor do ícone para manter a consistência com a paleta de cores que você criou para o design.
6. Se aplicável, adicione uma caixa de texto sob o ícone e um rótulo que descreva o que o ícone significa. Defina o formato dos rótulos dos ícones para manter a consistência com suas escolhas tipográficas anteriores.
Etapa 5: Definir e salvar os tipos de ícones na sua biblioteca
No Figma, é possível reutilizar componentes em arquivos e projetos e publicá-los na biblioteca da equipe.
Selecione um ícone e crie um componente usando o botão Create a Component no centro superior da barra de ferramentas.
Se você não tem colegas, esse componente será salvo e poderá ser acessado pela seção Local Components do painel Assets. 
Eventualmente, quando estiver trabalhando em uma equipe, você vai publicar os ícones na biblioteca da equipe para que possam ser acessados pelo painel Assets da equipe sempre que necessário. Isso permite manter uma marca e estilo consistentes em escala. 
Etapa 6: Preencher o resto do app com seus ícones
Implemente os ícones em todas as outras páginas do app. Lembre-se, este é 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. Ao colocar camadas nas suas seleções de cores, preste atenção nas suas decisões anteriores e volte e revise conforme achar necessário.
Etapa 7: Refletir sobre a conclusão da atividade
Sua entrega final precisa abordar as seguintes questões:
Os ícones direcionam e auxiliam os usuários poupando espaço, chamando a atenção e facilitando a transição para outra página ou local?
· Você adicionou rótulos de texto para descrever o que os ícones significam?
· Você se certificou de que os ícones não são muito restritos a uma cultura ou localização geográfica específica?
· Os ícones e rótulos são consistentes com a paleta de cores e a tipografia que você estabeleceu nas atividades anteriores?
· A iconografia é consistente com as diretrizes de marca e estilo?
Etapa 8: Salvar o trabalho
Ao realizar essas atividades, lembre-se de: 
Depois de adicionar os ícones 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 com uma explicação sobre por que ele atende às expectativas da atividade anterior.
Exemplo
Avaliação do exemplar
Use os critérios abaixo para avaliar os ícones que você adicionou aos seus mockups na atividade.
No exemplo acima, o painel de navegação foi atualizado com ícones. Há uma mistura de ícones padrão da indústria, comumente reconhecidos (como o ícone de página inicial), bem como ícones mais específicos para esse app (como o ícone da pizza). Se não houver um padrão no setor ou um ícone específico, é necessário validar com testes. Neste exemplar, o sinal + (mais) para Build Your Own é uma escolha que funciona por enquanto, mas talvezseja melhor investigar se o ícone é intuitivo durante os testes de usabilidade. Independentemente disso, no contexto todos esses ícones identificam de maneira clara o que fazem e facilitam a navegação do usuário pelo produto.
Todos esses ícones estão disponíveis gratuitamente no conjunto de ícones do Material Design. Para um protótipo, vale a pena verificar o que está disponível antes de passar tempo criando algo novo.
Agora, 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. 
Tenha esse feedback em mente conforme avança no curso.
Saiba mais sobre elementos de design visual
Até agora, você aprendeu sobre a importância da tipografia, cor e iconografia em mockups. À medida que você continua projetando seus próprios mockups, também é importante entender os elementos de design visual mais básicos, como linhas, tamanho, forma e imagens. Aqui está uma boa notícia: você não precisa ter um dom artístico para usar esses elementos enquanto projeta. Vamos conhecer cada um deles!
quatro elementos fundamentais: linhas, tamanho, forma e imagem
Linhas: três linhas verticais em azul, vermelho e verde. Tamanho: quatro colunas, cada uma menor que a última. Forma: um círculo verde com um sinal de mais e um círculo vermelho com um “x”
Imagem: uma imagem de um hambúrguer com batatas fritas
· Linhas: uma linha é uma figura reta que conecta dois pontos no espaço. No mundo do design de UX, as linhas podem ser usadas para diferenciar as seções de um app, conectar duas ideias relacionadas ou adicionar ênfase a determinadas partes do design. Por exemplo, é possível colocar uma linha abaixo do texto do cabeçalho para dar mais ênfase aos títulos.
· Tamanho: o tamanho de um elemento em relação a outros elementos e fatores que afetam o design. É especialmente importante considerar o tamanho quando você projetar um app para uma tela de celular, que é bem pequena. O tamanho dos elementos pode determinar como os usuários interagem com seu design, para o bem ou para o mal. Por exemplo, um botão muito pequeno pode frustrar os usuários ou fazê-los tocar na parte errada do design.
· Forma: a forma é definida como linhas em torno de um espaço independente que inclui comprimento e largura. As formas estão presentes em quase todos os design de apps, podendo ser retângulos, quadrados, círculos ou outra forma. Por exemplo, para ver mais informações dentro de um app, muitas vezes há um círculo com um sinal de mais (+) dentro, o que indica que os usuários podem clicar na forma para expandir um menu e aprender mais. Alternativamente, para indicar o botão para fechar uma janela em um app, os designs geralmente usam um círculo com um X dentro.
· Imagem: no design de UX, as imagens são usadas para contar histórias, causar um impacto sem palavras e adicionar ênfase visual. As imagens podem ser estáticas, como imagens e ilustrações, ou animadas, como animações e GIFs. De qualquer forma, é necessário incluir imagens relevantes para a história que você quer contar com seu design e que também tenham significado para os seus usuários. Por exemplo, se o seu app para serviços de reparo doméstico está resolvendo um problema específico que muitos usuários enfrentam, como uma calha entupida, pode ser eficaz incluir uma imagem de uma calha entupida nos seus designs para causar impacto emocional. 
Reunião de todos os elementos
À medida que você continua a projetar seus próprios mockups usando elementos de design visual, tenha em mente essas duas coisas:
Apelo visual: considere como os usuários vão ver o conteúdo dos seus designs no mundo real. Suas linhas estão conectando ou dividindo os elementos certos do design? Há formas se sobrepondo acidentalmente? O upload da imagem no Figma foi feito corretamente? Analise seu trabalho com atenção redobrada aos detalhes, especificamente procurando elementos de design menos atraentes visualmente.
Acessibilidade: à medida que você projeta mockups, pense em como usuários com várias necessidades de acessibilidade podem reagir aos elementos incluídos. Por exemplo, são usadas linhas ou outro elemento de design visual para destacar as informações abaixo do cabeçalho? E todas as imagens têm texto alternativo? É fundamental garantir que os designs sejam acessíveis a todos para que seu trabalho seja um sucesso!
À medida que você continua aplicando elementos de design visual nos mockups e além, consulte este breve guia da Usability.gov sobre fundamentos do design visual. Ele aborda os elementos que você aprendeu nesta parte do curso e muito mais!
Adicionar imagens aos seus mockups
Boas-vindas de volta. Você acabou de aprender sobre três elementos fundamentais de design visual: tipografia, cor e iconografia. Neste vídeo, você vai aprender várias maneiras de incluir imagens nos seus designs. Por que você deve incluir imagens nos seus mockups? Primeiro, as imagens podem ajudar a comunicar uma mensagem sem usar palavras. Ler rapidamente e rolar é uma forma comum de os usuários interagirem com apps e sites, mas imagens ajudam a contar a história de uma forma diferente. Pense em quando você está tentando reservar um quarto de hotel. As fotos do quarto são importantes para decidir se você quer reservar o quarto ou não. Você considera coisas como a vista, o tamanho do banheiro ou o layout das camas. As imagens podem mostrar esse tipo de informação de uma maneira que palavras não conseguem. As imagens também causam uma resposta emocional nos usuários. Quando os usuários acessam um aplicativo ou site, ter um bom conjunto de imagens em todo o aplicativo ou site pode gerar uma conexão com o produto de uma forma que complementa o conteúdo. Para gerar essa resposta emocional, é importante que a imagem se encaixe na IU, ou interface do usuário, que se preocupa com o visual e as funções da interface de um produto digital. Pense sobre a famosa plataforma de rede social, o Twitter. Uma imagem que foi usada de 2008 até 2013 foi uma ilustração da artista Yiying Lu, “Lifting a Dreamer”. Ela mostra uma baleia sendo levantada por pássaros e foi usada para sinalizar interrupções de serviço. A imagem dava um pouco de leveza e personalidade para um problema de confiabilidade do produto e foi bem aceita pelos usuários. A baleia de falha é um ótimo exemplo de como as imagens podem ajudar a adicionar interesse visual em equilíbrio com as páginas de IU que têm poucos recursos ou problemas de serviço. Embora já tenha sido substituída por outras imagens, eu ainda me lembro da baleia de falha com carinho hoje. As imagens também podem diferenciar um produto da concorrência. O texto do seu aplicativo ou site descreve os recursos e benefícios do produto. Na próxima vez em que você acessar um aplicativo ou site, preste atenção nas imagens usadas e como essas imagens afetam a experiência de navegação. Para revisar, as imagens ajudam a aprimorar designs, criar conexões entre o produto e os usuários e estabelecer uma boa presença de marca. Considerar a mensagem que você quer comunicar e as imagens que você já usou em outros lugares no aplicativo ajuda a orientar sua decisão sobre qual formato é o melhor. Não importa qual tipo de imagem você usa, você precisa ter um motivo claro para usá-la. Seu aplicativo ou site geralmente tem ícones que comunicam mensagens curtas para o usuário. No entanto, fotos e ilustrações devem ser usadas em lugares onde possam melhorar o design contextualizando o texto que aparece na página. Em seguida, vamos explorar técnicas para organizar elementos na página. Nos encontramos lá.
Encontrar imagens de estoque para mockups
Conforme você trabalha nos mockups, pode ser necessário incluir uma imagem para ilustrar um conceito ou reservar um espaço. Existem muitos sites em que é possível fazer download de imagens gratuitamente, incluindo: 
· Unsplash: pesquise e faça download de imagens gratuitas de alta resolução.
· Blush: crie e personalize ilustrações gratuitas de artistas de todo o mundo. Instale o plug-in ou crie seu próprio rascunho.
Veja e favoriteesses dois ótimos recursos para usá-los enquanto você projeta!
Outras considerações de design
Além dos princípios de design visual de tipografia, iconografia e cor, você precisa conhecer outros recursos de design enquanto começa a criar mockups. Neste texto, você vai aprender sobre elementos como hiperlinks, botões e entradas, para ajudar você a projetar produtos fáceis de usar.
Texto com hiperlink
Um hiperlink conecta uma página ou arquivo a outro e geralmente é ativado clicando em uma palavra ou imagem azul e sublinhada. Os hiperlinks permitem que as pessoas naveguem facilmente em produtos digitais, e a estilização padrão com o texto azul e sublinhado faz com que esses links sejam reconhecidos instantaneamente.
Aqui estão algumas coisas para considerar quando você for adicionar hiperlinks aos mockups:
1. É mais fácil ler uma página sem excesso de informações. Os hiperlinks podem servir para organizar os designs e facilitar a navegação dos usuários no seu produto. No entanto, adicionar muitos hiperlinks reduz a facilidade de leitura e afeta a usabilidade. Escolha hiperlinks com cuidado, para que você não sobrecarregue e distraia os usuários com muito texto azul.
2. Atenda às expectativas dos usuários. Se o texto for sublinhado e azul, ele sempre deve ser um link! Se você ignorar convenções comuns, os usuários vão ficar confusos.
3. Nem todos os links são iguais. Assim como o design de UX, a forma de representar links em produtos digitais também evoluiu. Às vezes, os links não são azuis devido aos padrões da marca de uma empresa. As imagens também podem ser hiperlinks. Por exemplo, muitos usuários esperam que o logotipo do site de uma empresa tenha um link para a página inicial. Mesmo sem texto sublinhado, os usuários esperam que o logotipo funcione como um link.
4. Use links descritivos. O texto com hiperlink deve dar aos usuários uma ideia de aonde esse link vai levá-los. Evite colocar um hiperlink na palavra “aqui”. Em vez disso, use uma frase descritiva, como “Confirmar da reserva no bairro francês”. A linguagem descritiva permite que os usuários façam escolhas informadas.
Botões
Os botões permitem que os usuários realizem ações específicas, como “Cancelar” ou “Salvar”. Aqui estão algumas práticas recomendadas ao usar botões em mockups.
1. Os botões devem parecer botões. Os botões devem ser facilmente reconhecidos como botões pela forma, tamanho e cor. A maioria dos botões são retângulos ou círculos, então um botão em forma de estrela ou coração pode confundir os usuários. Aqui estão quatro estilos comuns de botão:
· Botão preenchido com cantos quadrados
· Botão preenchido com cantos arredondados
· Botão preenchido (quadrado ou arredondado) com sombra
· Botão não preenchido com um contorno sólido (também conhecido como botão fantasma)
2. Seja consistente. Use o mesmo tipo de botão consistentemente em todo o produto. Por exemplo, se você usar um botão fantasma na página inicial do app, use esse mesmo estilo em todas as telas. A consistência ajuda os usuários a reconhecer quais elementos são botões.
3. Inclua espaço negativo. Deixe espaço negativo (ou em branco) em torno dos botões para que os usuários possam facilmente tocar ou clicar neles. Designers de UX geralmente aumentam os botões para ter mais espaço negativo dentro deles. Assim, você evita o excesso de informações na tela. Isso também ajuda a evitar que os usuários toquem acidentalmente em um botão vizinho. 
Para saber mais sobre como adicionar botões aos seus mockups, veja o guia abrangente sobre botões do Material Design ou as sete regras básicas do design de botões da UX Planet.
Entradas
As entradas são campos de texto em que os usuários inserem informações. Deve ficar claro qual informação deve ser inserida em cada entrada. Ela também precisa ser grande o suficiente para encaixar as informações a serem adicionadas. Ao adicionar entradas aos seus mockups, considere as seguintes práticas recomendadas:
1. Use indicações visuais. A maioria das entradas é aberta, o que significa que os usuários podem digitar qualquer coisa no campo. Mas elas também exigem informações específicas dos usuários, como um número de celular ou um endereço de e-mail. Para ajudar os usuários a inserir as informações certas (e evitar mensagens de erro), inclua indicações visuais.
Por exemplo, use texto fantasma (também chamado de texto de dica) para simular as informações que devem ser inseridas na entrada. O texto fantasma costuma ser mais claro do que outras palavras da tela e desaparece quando os usuários digitam as informações. 
2. Agrupe as entradas em subcategorias. Quando uma página tiver mais de seis entradas, é melhor agrupá-las em categorias. Por exemplo, crie uma categoria “Informações pessoais” para entradas como nome, sobrenome, data de nascimento, gênero e assim por diante. Da mesma forma, uma categoria “Informações de contato” pode incluir entradas para um endereço de e-mail, número de celular, endereço, cidade e assim por diante. Com o agrupamento de entradas, fica mais fácil visualizar o progresso e saber quais informações são necessárias.
Para saber mais sobre como adicionar entradas aos seus designs, veja o guia sobre campos de texto do Material Design ou a anatomia do campo de entrada da UX Planet.
Layout de páginas – grades e contenção
Introdução a layouts
Olá. Você já aprendeu sobre alguns dos elementos de design importantes usados para criar mockups. No entanto, você vai precisar de mais do que apenas tipografia, cor e iconografia para criar um design. Você também precisa aprender sobre layouts, que são maneiras de organizar elementos em uma página.
Os layouts geralmente se referem ao posicionamento específico de texto, estilo, ícones e imagens. O objetivo dos layouts é apresentar informações de forma lógica, destacando os elementos importantes. Sem um layout inteligente, os usuários vão achar difícil interagir com seus designs.
Os layouts podem ser facilmente emprestados ou reutilizados de outros projetos com páginas semelhantes. Por exemplo, existem layouts populares para telas iniciais, telas de login e até mesmo telas de checkout. Existem muitas maneiras de fazer o layout de uma página no mundo do design de UX. Nos próximos vídeos, vamos abordar algumas coisas que pode amarrar seus designs: grades, contenção e espaço. Tudo pronto para começar? Vamos lá.
Usar grades para orientar layouts
Olá. Vamos começar nossa discussão sobre layouts focando nas grades. Quando você projeta um mockup, o posicionamento correto dos elementos na página pode melhorar o fluxo do usuário e facilitar a navegação. Mas, pode ser complicado adivinhar onde colocar os elementos no seu mockup, especialmente como designer iniciante. Felizmente, temos ferramentas para facilitar o trabalho de encontrar o posicionamento ou o layout correto.
Primeiro, há grades básicas. Essas linhas se intersectam e dividem as páginas em quadrados pequenos que permitem facilmente posicionar os elementos de um design. As linhas na grade têm um espaçamento uniforme para ajudar você a projetar de maneira consistente e gerenciar o espaçamento dos elementos. Esta é uma grade básica no Figma. Se você desenhou wireframes em um papel quadriculado em um curso anterior, essas grades podem parecer familiares. Embora grades básicas sejam úteis para projetar de maneira consistente, designers de UX costumam usar uma grade de layout. Uma grade de layout é uma série de colunas e becos que permitem organizar os elementos de um design. Colunas são os blocos coloridos e os becos são os espaços entre as colunas. Esta é uma grade de layout no Figma. Observe que as colunas estão em vermelho claro e têm a mesma largura. Os becos são brancos e também têm a mesma largura. O número de colunas em uma grade de layout depende do tipo de dispositivo para que você está projetando. Se você estiver projetando para uma tela maior, como um site em um laptop ou computador desktop, a grade de layout pode ter 12 colunas. Quando você projeta para telas menores, sua grade de layout terá menos colunas.
Por exemplo, a gradede layout para um tablet ou app tem de quatro a oito colunas, e a grade de layout para um smartwatch tem apenas uma coluna. Lembre-se de que, independente do dispositivo para que você está projetando, o número de colunas na grade de layout depende de como você quer organizar e dividir seu conteúdo. Você deve estar se perguntando: “Será que devo usar uma grade básica ou uma grade de layout para o meu design?” Isso varia para cada designer, então a escolha é sua. Alguns designers usam tanto grades básicas quanto de layout, enquanto outros usam apenas uma. Alguns designers nem usam grades. Quando está apenas no começo da carreira de designer de UX, talvez seja melhor usar uma grade por algumas razões. Primeiro, as grades geram clareza e consistência. Uma grade eficaz guia o olhar, tornando mais fácil e agradável a visualização dos elementos na tela. Segundo, as grades aceleram o processo de design, agilizando o processo de colocar elementos na tela. Terceiro, as grades facilitam a colaboração em designs. Com uma grade, os designers geralmente sabem onde posicionar as coisas.
Vamos ver um mockup de um designer iniciante que agora trabalha no Google. Aqui, Dane criou um app chamado Peacock. Nesta página, os usuários são solicitados a procurar amigos ou locais próximos a eles. A página tem uma barra de pesquisa acima de imagens de cidades, como Nova York, São Francisco e Chicago. Observe como os quadrados de cada imagem têm exatamente o mesmo tamanho e a barra de pesquisa está centralizada diretamente no meio da tela, acima das imagens. Dá para notar que Dane usou uma grade para planejar o design, o que facilitou o posicionamento dos elementos. Graças ao uso da grade, o mockup completo de Dane tem um layout visualmente atraente. Esse layout poderia até mesmo ser reutilizado para outro propósito. Por exemplo, consigo imaginar o mesmo layout sendo usado em um app de pedidos de comida, onde cada caixa da imagem é um restaurante diferente. Você está começando a entender como fazer o layout de uma página. A seguir, vamos discutir outra coisa para ter em mente ao fazer o layout de uma página: contenção.
Criar grades em mockups
As grades são uma ferramenta útil e prática para criar designs. As grades dão consistência e estrutura ao design e ajudam a garantir que ele se encaixe nos limites da tela.
Lembre-se, uma grade básica tem linhas cruzadas que dividem páginas em pequenos quadrados, que permitem facilmente posicionar os elementos de um design. Se você usou papel quadriculado para desenhar os wireframes, a grade básica será bem familiar! Na imagem acima, a grade básica está à esquerda.
Grades básicas são úteis para projetar de forma consistente, mas designers de UX geralmente usam grades de layout. Uma grade de layout é uma série de colunas e espaços que permitem organizar os elementos de um design. Colunas são os blocos coloridos e os espaços são as partes em branco entre as colunas. Na imagem acima, a grade de layout é mostrada à direita. Também é possível usar mais de uma grade em um frame e editá-las separadamente. Então, vamos ver como usar grades no Figma!
Criar e aplicar grades
Para aplicar uma grade de layout aos seus designs no Figma:
1. Selecione o frame no painel Layers ou no canvas. Se você está trabalhando em um arquivo que já começou a projetar, certifique-se de que está selecionando o frame e não a camada de outro elemento por acidente. 
2. No lado direito da tela fica o painel Properties. Na seção Layout grid, clique no ícone +.
3. Por padrão, será aplicada ao frame uma grade básica, que o Figma chama de Uniform Grid. A grade uniforme recebe esse nome porque todos os quadrados da grade têm um tamanho uniforme.
4. É possível atualizar as propriedades clicando no ícone com nove quadrados na forma de um quadrado, à esquerda da grade, para abrir as configurações de layout.
Consulte o Figma Help Center para ver algumas dicas para usar grades e explorar tipos de grades (uniforme, coluna, linha), incluindo um esquema visual com um exemplo de cada tipo de grade.
Alinhe os elementos a uma grade
Um controle é um recurso que ajuda a alinhar elementos de design. No Figma, os controles ficam na parte superior do painel “Properties”. Alinhe os elementos do frame a uma grade para seu layout ficar uniforme, organizado e “arrumado”, como o Figma descreve.
Aqui estão os controles do Figma, na ordem listada:
· Alinhar à esquerda
· Alinhar centros horizontais
· Alinhar à direita
· Alinhar acima
· Alinhar centros verticais
· Distribuir horizontalmente
· Distribuir verticalmente
· Arrumar
Saiba mais sobre o alinhamento de objetos neste artigo do Figma Help Center.
Layout automático
Outro recurso do Figma que ajuda a criar mockups é o layout automático. Com o layout automático, seus designs podem encolher ou aumentar de acordo com uma alteração. Por exemplo, é possível criar botões que encolhem ou aumentam à medida que você edita o texto do rótulo.
Existem algumas maneiras de adicionar layout automático, tais como:
1. Selecionar um frame e clicar no ícone de mais (+) ao lado de “Auto Layout”, na barra lateral direita.
2. Clicar com o botão direito do mouse no frame ou objeto e selecionar Add Auto Layout.
3. Usar o atalho do teclado, Shift + A.
Saiba mais sobre o layout automático no Figma Help Center.
Fique dentro das linhas
As grades podem ajudar a melhorar a consistência e o apelo visual dos seus mockups, por isso não deixe de usá-las! Para saber mais, veja este tutorial em vídeo do Figma sobre alinhamento e distribuição, que mostra as etapas para realizar essas ações diretamente no Figma. Ou, leia este artigo do blog do Figma que explica tudo que você precisa saber sobre grades de layout. 
Se quiser outra perspectiva, veja como criar designs melhores com grades de layout neste artigo da Smashing Magazine.
Criar grades nos seus mockups do projeto de porfólio
Introdução da atividade
Essa atividade vai ajudar você a entender como usar grades para alinhar e organizar os componentes de IU no design do seu projeto de portfólio. Pode ser complicado adivinhar onde colocar elementos no seu mockup, mas as grades podem ajudar. Existem alguns motivos para usar grades. Elas:
· Criam clareza e consistência, facilitando a visualização dos elementos na tela.
· Aceleram o processo de design, acelerando a colocação de elementos na tela.
· Facilitam a colaboração em designs, já que designers geralmente sabem onde colocar as coisas usando as grades dos designs.
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: Revisar os materiais de instruções no Figma
No início deste curso, você leu o recurso: Criar grades em mockups. Use esse texto para encontrar detalhes sobre as funções do Figma necessárias para esta atividade.
Consulte o fórum de ajuda do Figma diretamente para saber as informações mais atuais sobre novos recursos.
Etapa 2: Criar uma grade no seu mockup de alta fidelidade no Figma
· Navegue até seu mockup no Figma. Siga estas etapas para criar uma grade:
· Selecione um frame no painel Layers à esquerda ou clique no painel no canvas.
· Clique no ícone de Mais (+) ao lado de Layoutgrid no painel Design à direita. Por padrão, uma grade uniforme será aplicada ao frame. 
Etapa 3: Editar sua grade
As grades podem ser personalizadas para atender às suas necessidades de design. Para atualizar as propriedades de uma grade, clique no ícone Grid no painel “Design” à direita para abrir as configurações em Layout grid.
Como você está trabalhando em um aplicativo móvel, siga as etapas abaixo para aplicar as configurações de grade recomendadas:
· Clique no ícone Grid para abrir as configurações Layout grid.
· Clique no menu suspenso Grid e selecione Columns.
· Faça as alterações necessárias para corresponder às seguintes configurações de grade:
· Contagem: 5
· Cor: FF0000 10%
· Tipo: Stretch
· Largura: Auto
· Margem: 0
Essa grade fornece estrutura para organizar os elementos do design para caber dentro dos limites da tela de umsmartphone sem sobrecarregar o frame.
Etapa 4: Alinhar os componentes de IU à grade
Agora que seu mockup tem uma grade, mova os componentes de IU do app para alinhá-los à estrutura da grade. É possível alinhar as bordas dos componentes ao longo das bordas das colunas da grade, alinhar os componentes para que se ajustem ao centro das colunas da grade ou usar uma combinação desses dois métodos de alinhamento. Você decide como usar a grade. Ela existe para dar a estrutura que você precisa para testar o posicionamento dos seus elementos de design.
Clique e arraste cada componente de IU no canvas para ajustar a posição.
Em seguida, use os recursos de alinhamento do Figma para ajustar um componente ou vários componentes. Leia o artigo de ajuda e o vídeo do Figma sobre como alinhar objetos para saber mais sobre esses recursos.
O recurso de layout automático também pode ser útil. O layout automático permite redimensionar ou redistribuir os componentes de IU para ajustá-los automaticamente ao frame em que estão. Esse recurso permite fazer muitas coisas. Veja o artigo de ajuda do Figma sobre layout automático para conhecer cada uma das funções.
Ao projetar com grades no futuro, edite as configurações de acordo com as suas necessidades e preferências de design. Para reabrir as configurações de grade para um frame, selecionar o frame e clique no ícone de grade. Veja este artigo do Figma sobre noções básicas de grade e este artigo do Figmasobre os tipos de grades que incluem exemplos de cada tipo para ver como editar grades no futuro de acordo com as suas necessidades.
Aqui está um exemplar completo que mostra como as grades foram usadas no app da Zia's Pizza, além de uma explicação de como o exemplar cumpre as expectativas da atividade anterior.
Avaliação do exemplar
Use os critérios abaixo para avaliar as grades de mockup criadas na atividade.
No exemplar, uma grade foi adicionada a cada frame usando as configurações recomendadas de layout de grade. Os itens de interface do usuário foram adicionados aos frames e alinhados à grade. Por exemplo, os botões abrangem a largura da grade e estão alinhados à borda das colunas. As bordas dos ícones no cabeçalho e na imagem “Today's Top Pizza” também foram alinhadas à grade.
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 contenção em layouts
Olá de novo. Já começamos a explorar como posicionar elementos em uma página de forma eficaz usando grades. Agora, é hora de discutir outra coisa a ser considerada ao organizar elementos em uma página: a contenção.
A contenção usa barreiras visuais para manter os designs claros e organizados. Barreiras, como linhas ou cores, ajudam a limitar o conteúdo a uma seção específica de um design.
Existem quatro métodos de contenção: divisores, bordas, preenchimento e sombra. Vamos discutir cada método usando um exemplo da página inicial do app de passeadores de cães.
Gostou do que eu fiz enquanto você trabalhava no seu próprio projeto? Eu até adicionei uma pequena imagem fofa de um cachorro no botão para escolher um horário.
No texto você aprende mais sobre como encontrar imagens gratuitas como essa. Eu vou me divertir um pouco com este mockup para dar vida a cada um desses quatro métodos.
Primeiro, vamos falar sobre divisores. Divisores são linhas que separam seções. Eles podem ser ferramentas simples, mas eficazes para separar rapidamente conteúdos que não devem ficar juntos. No app de passeadores de cães, você nota que usamos um divisor cinza entre cada passeador de cães disponível.
Designers usam bordas para separar as seções de uma página.
Bordas são linhas contínuas que costumam criar formas, como quadrados ou retângulos.
Quando criei o botão para escolher um horário, eu só tinha texto e a imagem de um cachorro. Como não tinha uma borda, os usuários tiveram dificuldade para saber que era um botão. Então, decidi adicionar uma borda retangular para deixar claro que é um botão.
Em terceiro lugar, temos o preenchimento. O preenchimento atribui cores às bordas e formas, assim como a cor preenche o objeto.
Isso faz com que o conteúdo se destaque, criando um novo ponto focal no mockup.
O botão para escolher um horário ainda não está tão claro como os botões de outros app que eu já usei. Então, estou aplicando um preenchimento alaranjado para dar mais ênfase.
Por fim, é possível adicionar sombras ao seus designs para criar dimensão. Designers costumam usar sombras em combinação com bordas ou preenchimento.
Sombras ajudam a dividir os elementos ainda mais.
Veja a sombra que eu apliquei ao botão para escolher uma horário. Agora ele é quase tridimensional.
Você sente que ele está saindo da página. Seus mockups já devem estar começando a ficar prontos. Agora você tem duas ferramentas para posicionar elementos em uma página: grades e contenção. A seguir, vamos apresentar mais uma ferramenta, o espaçamento, que pode ajudar a tornar seus mockups ainda mais atraentes visualmente. Vejo você lá.
Crie contenção nos seus mockups do projeto de portfólio
Ao determinar o layout dos elementos nas páginas dos seus mockups, não deixe de considerar a contenção. Como lembrete, a contenção usa barreiras visuais para manter os designs claros e organizados. Em outras palavras, barreiras como linhas ou cores ajudam a limitar o conteúdo a uma seção específica de um design.
Você conheceu quatro métodos de contenção no vídeo anterior: divisores, bordas, preenchimento e sombra. Neste texto, você vai entender melhor como usar cada um desses métodos de contenção no Figma.
Criar divisores
Divisores são linhas únicas que separam seções de conteúdo em um design. Os divisores podem ser ferramentas simples, mas eficazes, para separar rapidamente conteúdos que não devem ficar juntos. Adicionar um divisor no Figma é muito simples, mas você precisa saber como as seções do mockup estão relacionadas para determinar onde colocar os divisores.
Para criar um divisor no Figma:
1. Identifique seções de conteúdo do mockup que precisam ser separadas.
2. Na barra de ferramentas no canto superior esquerdo da tela, selecione a ferramenta de Retângulo, representada por um ícone que parece um quadrado.
3. Selecione Line no menu suspenso.
4. Escolha a área do mockup onde quer desenhar o divisor. Clique e arraste o mouse para puxar uma linha reta ao longo do frame.
5. Clique na nova linha adicionada ao mockup para selecioná-la. No painel “Design” no lado direito da tela, vá para a seção Stroke para controlar o visual da linha que você criou. Selecione uma cor e um tamanho para a linha.
Adicionar bordas
Bordas são linhas contínuas que determinam formas, como retângulos, que dividem as seções de uma página. As bordas geralmente se formam em torno de um elemento de design específico ou texto importante. As bordas podem diferenciar partes do conteúdo do seu design.
Para adicionar uma borda no Figma:
1. Identifique o conteúdo que você quer destacar no mockup.
2. Na barra de ferramentas no canto superior esquerdo da tela, selecione a ferramenta de Retângulo, representada por um ícone que parece um quadrado.
3. Desenhe um retângulo no frame. Redimensione o retângulo para caber ao redor do elemento que você quer destacar. 
4. No painel “Design” no lado direito da tela, vá para a seção Fill. Remova o preenchimento do retângulo que você criou.
5. Vá para a seção Stroke do painel “Design”. Adicione um traço ao retângulo usando o ícone de mais (+) no lado direito. O traço vai delinear o retângulo.
6. Use o campo Weight para selecionar o peso ou espessura do traço em pixels. Digite um valor no campo fornecido ou role pelos valores usando seu mouse/trackpad enquanto o campo estiver em foco.
Para saber mais, veja este artigo do Figma sobre como aplicar e ajustar as propriedades de traços.
Selecionar o preenchimento
O preenchimento atribui cores a objetos do seu design. A cor escolhida será usada para preencher o elemento do design, destacando o conteúdo na página.
Para selecionar o preenchimento no Figma:1. Clique para selecionar uma camada do design em que você quer adicionar o preenchimento.
2. No painel “Design” no lado direito da tela, vá para a seção Fill. Clique no ícone de mais (+) para adicionar um preenchimento à camada.
3. O Figma adiciona um preenchimento sólido padrão com um valor hexadecimal de C4C4C4. Clique no pequeno retângulo colorido ou paleta de preenchimento para abrir o seletor de cores. Use o seletor de cores para selecionar qualquer cor para preencher a forma.
Saiba mais sobre como preencher os elementos no Figma Help Center.
Aplicar sombra
Sombras criam dimensões, especialmente quando usadas em combinação com bordas ou preenchimento. Existem dois tipos diferentes de sombras: sombras de profundidade e sombras internas. 
· Sombras de profundidade saem diretamente do elemento e podem ir em qualquer direção. Sombras de profundidade são perfeitas para passar a sensação de que os botões estão saindo da página. 
· Sombras internas se movem para dentro do elemento. Sombras internas são uma ótima maneira de mostrar que um botão está sendo pressionado. 
Para aplicar uma sombra de profundidade no Figma:
1. Clique para selecionar uma camada do design em que você quer adicionar a sombra.
2. No painel “Design” no lado direito da tela, vá para a seção Effects. O efeito de sombra de profundidade é aplicado por padrão, como mostrado na imagem abaixo.
3. Ajuste a sombra de profundidade usando o ícone de configurações de efeito, que tem o formato de um sol. Explore algumas opções de sombra diferentes para encontrar a que você quer usar nos seus mockups!
Para aplicar uma sombra interna no Figma:
1. No painel “Design” no lado direito da tela, vá para a seção Effects. Por padrão, a sombra de profundidade está selecionada no menu suspenso. Clique na seta para ver o resto do menu suspenso e selecione “Inner shadow”.
2. Ajuste a sombra de profundidade usando o ícone de configurações de efeito, que tem o formato de um sol. O efeito é sutil, mas você deve notar uma sombra dentro das formas selecionadas. 
Para saber mais sobre como usar sombras nos seus designs, veja este artigo sobre como adicionar efeitos de sombra ou desfoque na seção “Help” do Figma.
Crie contenção nos seus mockups do projeto de portfólio
Introdução da atividade
Esta atividade vai ajudar você a aplicar elementos de contenção aos seus mockups do projeto de portfólio criando e aplicando divisores ou bordas nos elementos de IU. Divisores e bordas são formas de contenção. A contenção usa barreiras visuais para manter os designs claros e organizados. Barreiras, como linhas ou cores ajudam a limitar o conteúdo a uma seção específica de um design. Outra observação sobre a cor: à medida que você adiciona esses elementos ao seu projeto, é aconselhável escolher cores dentro da paleta que você desenvolveu na lição anterior para manter seu design coeso.
Existem quatro métodos de contenção: 
· Divisores: linhas que separam as seções
· Bordas: linhas contínuas que dividem as seções de uma página e geralmente delineiam formas, como quadrados ou retângulos
· Preenchimento: um recurso de cor dentro de bordas e formas
· Sombra: um efeito que cria dimensão, muitas vezes usado com bordas ou preenchimento
Implemente divisores e bordas nos seus mockups de projeto seguindo as instruções abaixo. Depois de concluir esta atividade, você terá a oportunidade de comparar seu trabalho com um exemplar completo.
Instruções passo a passo
Etapa 1: Abrir seu projeto no Figma
Depois de abrir o site ou iniciar o aplicativo desktop do Figma, encontre seu projeto em “Recent”. Clique no projeto para abri-lo.
Etapa 2: Avaliar o projeto e identificar onde os divisores podem melhorar o protótipo do app
Divisores são linhas que separam seções. São ferramentas simples, mas eficazes, para separar rapidamente conteúdos que não devem ficar juntos. Para saber como adicionar divisores, veja estes tutoriais do Figma: Apply and adjust stroke properties e Using shape tools.
Procure áreas onde possa ser útil separar seções ou onde conteúdo e elementos são executados juntos. Lembre-se de que um divisor pode ser usado para separar seções inteiras:
Ou para diferenciar vários elementos semelhantes, como entradas em uma lista.
Adicione divisores a uma tela do seu fluxo de usuário principal.
Etapa 3: Identificar onde adicionar bordas no seu mockup de projeto e aplicá-las em uma tela
Designers usam bordas para separar as seções de uma página. Bordas são linhas contínuas que costumam criar formas como quadrados ou retângulos. Para saber como adicionar bordas e usar traços, veja este tutorial do Figma: Apply and adjust stroke properties.
É possível adicionar traços a qualquer forma no Figma. Pode ser até demais! Defina algumas regras básicas com antecedência e siga-as. Por exemplo, escolha uma determinada espessura de linha para suas bordas e use-a sempre que adicionar traços a uma forma.
Os botões são um excelente lugar para começar a adicionar bordas nos seus mockups do projeto. Se não houver bordas, pode ser difícil os usuários identificarem os botões. Observe como o exemplo abaixo do app da Zia's Pizza usa uma borda para identificar claramente o componente como um botão.
Em uma tela do app criado com base na instrução de design do Sharpen, você deve identificar um botão que precise de borda e adicioná-la.
Etapa 4: Expandir os divisores para as outras telas do seu app
Agora que você sabe como e onde adicionar divisores em uma tela do seu app do Sharpen, também deve adicionar divisores em todas as outras telas do aplicativo.
Você pode usar divisores para:
Separar conteúdo diferente de outros itens (como seções Sobre em descrições de produtos) ou elementos distintos (como e-mails diferentes em uma lista).
Agrupar conteúdos relacionados, como por ordem alfabética ou grupo de interesse.
Etapa 5: Expandir as bordas para as outras telas do seu app
Agora que você sabe como e onde adicionar bordas em uma tela do seu app do Sharpen, também deve adicionar bordas em todas as outras telas do aplicativo.
As bordas podem ser usadas para:
Separar o conteúdo em seções lógicas. 
Identificar botões e outros objetos importantes. 
Etapa 6: Refletir sobre a conclusão da atividade
Pegue um pedaço de papel e algo para escrever ou abra um documento digital para responder às perguntas abaixo: 
· Por que você decidiu adicionar divisores nos locais escolhidos? Anote pelo menos duas razões.
· Por que você decidiu adicionar bordas nos locais escolhidos? Anote pelo menos duas razões.
Lembre que é possível ajustar e refinar suas escolhas de design (cor, ícones etc.) enquanto continua trabalhando nos seus mockups. Há algo que você gostaria de mudar? Anote pelo menos uma ou duas coisas que você gostaria de refinar à medida que avança.
Etapa 7: Salvar o trabalho
Ao realizar essas atividades, lembre-se de: 
Depois de implantar divisores e bordas conforme indicado nesta atividade, faça capturas de tela do mockup para mostrar seu progresso.
Salve todo o seu trabalho no computador, em um disco rígido ou em uma pasta do Google Drive, para garantir que mais tarde terá acesso a todos os recursos necessários do curso para criar seu portfólio.
Aqui está um exemplar completo baseado no exemplo da Zia's Pizza que você vem seguindo, além de uma explicação de como o exemplar atende às expectativas da atividade anterior.
Exemplo
Avaliação do exemplar
Na versão à esquerda, é difícil dizer onde uma seção termina e a próxima começa. Na versão à direita, um divisor é usado entre a barra de navegação superior e o conteúdo abaixo dele. Outro divisor é colocado entre o tempo de espera atual e o número de pizzas na fila para separar as seções de conteúdo. Além disso, o plano de fundo foi preenchido. O preenchimento serve para mostrar a separação mais permanente. O divisor interno está separando conteúdos diferentes da mesma seção. 
Adicionar um preenchimento à seção “Today’s Top Pizza” ajuda a distingui-la das outras seções de conteúdo. A sombra da seção “Pizzas You Might Like” faz com que ela funcione como um cartão, separada do restodo conteúdo e facilitando a repetição ao longo do design.
Agora, compare o exemplar acima com a sua entrega. Avalie seu trabalho com base em cada um dos critérios usados aqui para analisar o exemplar. 
Pense nestes critérios enquanto avalia seu trabalho:
· Os divisores precisam ser colocados nos locais adequados dos mockups
· As bordas precisam ser colocadas nos locais adequados dos mockups
O que você fez bem? Em que você pode melhorar? Tenha esse feedback em mente conforme avança no curso.
Layouts de página – espaço negativo
Usar espaço negativo (em branco) em layouts
Olá. Acabamos de ver como grades e a contenção podem ajudar a criar uma página. Agora, vamos apresentar mais uma ferramenta: o espaçamento.
O que queremos dizer com a palavra “espaço”? O espaço é algo que todos nós conhecemos. Quando escrevemos, deixamos um espaço entre cada palavra da frase. Ou, quando olhamos para o tela inicial dos nossos celulares, há espaço entre os ícones de cada app.
No design de UX, isso é chamado de espaço em branco. O espaço em branco são as lacunas entre os elementos de um design. Lembre que o espaço em branco costuma ser chamado de espaço negativo. Então, por que o espaço em branco é importante?
Primeiro, o uso do espaço em branco pode dar ênfase a um ponto focal dentro do design.
Isso pode ajudar a direcionar o usuário a uma ação que ele precisa realizar. Por exemplo, pense na página inicial da Pesquisa Google. A barra de pesquisa e o logotipo do Google estão cercados por espaços em branco. O uso do espaço em branco claramente comunica a ação que os usuários devem realizar: pesquisar. Em segundo lugar, o uso do espaço em branco pode ajudar a agrupar itens, o que também é conhecido como proximidade.
Quando elementos como botões ou texto são colocados próximos uns dos outros em uma página, os usuários agrupam naturalmente esses elementos e esperam que eles estejam relacionados. Por outro lado, quando os elementos são colocados distantes uns dos outros, os usuários não acham que eles tenham relação. Lembra-se dos Princípios de Gestalt que vimos anteriormente neste programa de certificação? A proximidade é um dos Princípios de Gestalt.
Vamos ver esta representação gráfica da proximidade. A imagem à esquerda tem 16 círculos do mesmo tamanho em uma grade 4x4 com espaçamento semelhante.
A suposição é que todos os círculos estão agrupados e seriam relacionados.
A imagem à direita também contém 16 círculos do mesmo tamanho em uma grade 4x4. No entanto, foi colocado mais espaço entre a segunda e a terceira coluna de círculos.
Esse espaço extra faz parecer que os círculos estão divididos em dois grupos de oito, e esses dois grupos não estariam relacionados. Em terceiro lugar, o espaço em branco auxilia na legibilidade. Deixando mais espaço em branco entre elementos, fica mais fácil focar em cada elemento. Veja este exemplo. O site à esquerda tem pouco espaço em branco porque usa uma fonte e uma imagem grandes que estão agrupadas próximas umas das outras.
Esse site é muito difícil de ler, porque nossos olhos ficam pulando entre elementos. No site à direita, o conteúdo é o mesmo, mas há mais espaço em branco. Esse design usa uma fonte e uma imagem menores. Isso permite que o olho veja cada elemento e torna o site mais fácil de ler.
Outra coisa para ter em mente quando falamos de espaço em branco:
ter muito pouco espaço em branco aumenta a chance de erro. Por exemplo, alguns usuários podem acabar pressionando por engano o botão errado se não houver espaço suficiente entre os botões.
Quando você conseguir seu primeiro trabalho como designer de UX, talvez tenha que ajudar a educar seus clientes ou colegas de equipe multifuncionais sobre a importância do espaço em branco. As empresas costumam achar que apresentar mais conteúdo é melhor. É importante ajudar essas partes interessadas a entender que o uso do espaço em branco no design faz com que os produto sejam mais fáceis de usar e gerem resultados comerciais melhores.
Por exemplo, se o botão de inscrição for enfatizado claramente pelo uso de espaço em branco, é provável que mais usuários cliquem nele, o que é uma vitória para a empresa. Agora você tem todas as ferramentas de que precisa para adicionar elementos ao seu mockup e posicionar esses elementos em uma página. Boa sorte quando for colocar o que você aprendeu aqui em prática no seu próprio projeto de design.
Usar espaço negativo em mockups
Aproveitar o espaço, além de cores, linhas e texto, é importante para tornar seus designs visualmente atraentes e fáceis de ler. O espaço negativo é a área ao redor de um objeto em uma imagem. Em outras palavras, o espaço negativo são as lacunas entre elementos de um design ou o espaço que não está sendo ocupado. 
O espaço negativo também é frequentemente chamado de espaço em branco ou espaço vazio. Muitos designers de UX preferem o termo espaço negativo porque os fundos dos designs nem sempre são brancos, e o espaço que está vazio no design reflete a cor do plano de fundo.
Veja como a página inicial da Pesquisa Google usa espaço negativo na imagem abaixo. Os maiores elementos da página são o Google Doodle, que apresenta o logotipo do Google, e a barra de pesquisa. Existem alguns links pequenos na parte superior da página, mas a maior parte da página é espaço negativo. Esse design claro torna a página visualmente atraente e chama a atenção para a parte da página com que o usuário precisa interagir para atender às necessidades dele, que é a barra de pesquisa.
A importância do espaço negativo
Por que é tão importante considerar o espaço negativo quando você cria mockups? Veja estas três razões.
1. Use espaço negativo para indicar que os elementos estão relacionados. Se dois objetos estiverem juntos em uma página sem espaço negativo entre eles, eles são percebidos como relacionados. Esse conceito é baseado no Princípio de Gestalt de proximidade, que você estudou anteriormente neste programa. Lembre-se: a proximidade significa que elementos próximos parecem mais relacionados do que elementos mais espaçados. Nos seus mockups, use o espaço negativo com cuidado para indicar quais elementos dos designs estão relacionados ou não.
2. O espaço negativo chama a atenção para elementos importantes. Os usuários geralmente têm pouca atenção! Se as informações de uma página ou tela não forem fáceis de entender, você perderá a atenção do usuário rapidamente. Usar espaço negativo é uma maneira de ajudar os usuários a se concentrarem na razão pela qual eles abriram a página ou app. Por exemplo, usar espaço negativo em torno de um botão do app móvel ajuda os usuários a se concentrarem na ação mais importante, clicar no botão.
3. O espaço negativo dá aos usuários uma pausa visual. O espaço negativo ajuda a evitar que os usuários fiquem sobrecarregados ou distraídos. O espaço negativo ou em branco dos designs pode fornecer aos usuários uma pausa visual à medida que visualizam o conteúdo.
4. O espaço negativo aumenta a facilidade de leitura. Você provavelmente já viu anúncios de vendas online com uma página inteira cheia de itens. A página costuma ser muito colorida, com muitas informações para absorver, incluindo preços e descrições. Anúncios como esses tendem a não incluir muito espaço negativo, o que pode fazer com que as informações pareçam sobrecarregadas e difíceis de ler. Em vez disso, o espaço negativo pode ser usados nos mockups para facilitar a leitura rápida do texto.
Usar espaço negativo nos seus designs
Há muitas maneiras de criar espaço negativo nos seus mockups. Espaçamento entre linha, espaçamento interno e margens são métodos comuns de usar o espaço em branco de maneira eficaz, então vamos conhecer cada um deles.
· O espaçamento entre linhas é o espaço vertical entre duas partes do texto. Pense que você está lendo livro: o espaço negativo entre as frases de um parágrafo impede que as letras se sobreponham e facilita a leitura do conteúdo. O mesmo vale para seus designs!
· O espaçamento interno é o espaço negativo em torno do conteúdo, ou entre a borda e os elementos de design. Oespaçamento interno separa os objetos para que a visão do usuário passe de um elemento do design para outro. Na imagem acima, o espaçamento interno do app para passeadores de cães fornece simetria ao design e evita que os elementos fiquem juntos demais.
· As margens são o espaço fora da borda do design. Pense nas margens como uma maneira de manter as cores dentro das linhas do design. Na imagem acima, você vai notar que a margem fica ao redor das bordas do design.
Aplique o que você aprendeu
Usar o espaço negativo entre elementos de design ajuda a criar uma melhor experiência do usuário e pode resultar em um design claro e elegante que prende a atenção dos usuários. Se você tem curiosidade para saber mais sobre como usar o espaço negativo, assista a este vídeo de um designer mostrando como usar o espaço negativo para aumentar a facilidade de leitura de objetos.
Revise os mockups do seu projeto de portfólio adicionando espaço negativo
Introdução da atividade
Nesta atividade, você vai avaliar e atualizar o espaço negativo nos mockups do seu app. Você vai complementar o trabalho que você já fez nos mockups e usar espaço negativo para adicionar ênfase, facilidade de leitura e agrupamentos claros ao design.
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 site ou iniciar o aplicativo desktop do Figma, encontre seu projeto em Recent. Clique no projeto para abri-lo.
Etapa 2: Identificar espaço negativo no seu app
Ao contrário de alguns dos trabalhos anteriores que você fez neste curso e módulo, seu aplicativo já tem espaçamento. Qualquer espaço sem um elemento é espaço negativo no momento. Para iniciar esta atividade, identifique esses espaços negativos.
Etapa 3: Determinar onde o espaçamento do design pode ser melhorado
Como você aprendeu recentemente, o espaço negativo é uma parte essencial do seu design. Quando você identificar o espaço negativo atual no seu layout, lembre que o espaço negativo é mais útil para:
· Ênfase: um espaço mais negativo em torno de um elemento pode enfatizar uma ação que um usuário precisa realizar.
· Agrupamento: o espaço negativo em torno de um grupo de objetos reforça o Princípio de Gestalt da proximidade.
· Facilidade de leitura: deixar espaço negativo entre elementos pode facilitar o foco dos usuários.
Etapa 4: Refinar o espaço negativo do seu design
Pensando nos três principais benefícios do espaço negativo listados acima, experimente com seu layout. Você está tentando tornar o design mais fácil de usar, e a quantidade de espaço entre e ao redor dos elementos tem um papel importante nessa usabilidade.
Mesmo que este seja a quinta etapa do processo de criação de mockups de alta fidelidade, lembre que suas decisões anteriores não são irreversíveis. Caso você precise ajustar suas decisões anteriores relacionadas a cor, texto etc., tudo bem.
Repita este processo para todas as telas do seu mockup.
Etapa 5: Refletir sobre a conclusão da atividade
Sua entrega final precisa abordar as seguintes questões:
· Seu produto aproveita o espaço negativo para enfatizar elementos importantes?
· O espaço negativo do seu app ajuda a destacar grupos de elementos?
· O espaço negativo dos seus mockups melhora a legibilidade?
Etapa 6: Salvar o trabalho
Ao realizar essas atividades, lembre-se de:
Depois de aplicar o espaço negativo conforme indicado nesta atividade, faça capturas de tela do mockup para mostrar seu progresso.
Salve todo o seu trabalho no computador, em um disco rígido ou em uma pasta do Google Drive, para garantir que mais tarde terá acesso a todos os recursos necessários do curso para criar seu portfólio.
Aqui temos um exemplar completo com uma explicação sobre por que ele atende às expectativas da atividade anterior. 
Avaliação do exemplar
Na versão à esquerda, os elementos do conteúdo estão muito próximos. É sobrecarregado e difícil de ler. As seções de conteúdo estão muito próximas, as opções de personalização estão bem apertadas e há muitas seções na página, dificultando o uso. 
Na versão atualizada à direita, é mais fácil definir quais elementos estão agrupados e quais não estão, por causa do maior uso de espaço negativo. Tudo é claramente separado e definido adequadamente usando o espaço entre seções e elementos. O espaçamento entre os diferentes tipos de pizza é claro, e as seções de ingredientes são separadas o suficiente para serem distintas e fáceis de interagir. Antes, os cartões estavam muito próximos, dificultando o uso. Aumentando o espaço, fica mais fácil interagir com os botões de personalização, ler o texto e entender a hierarquia dos cartões. 
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. 
Tenha esse feedback em mente conforme avança no curso.
Padrões comuns de designs em aplicativos
Nesta parte do curso, você tem aprendido sobre layouts de página. À medida que você começa a fazer o layout das páginas do app que está projetando, pode ser útil conhecer layouts e padrões comuns usados em outros apps. Conhecer esses layouts pode ajudar a iniciar seu processo de design visual, poupar tempo e melhorar seu trabalho de design.
Telas comuns em aplicativos móveis
Você deve ter notado que aplicativos móveis tendem a ter certos tipos de telas em comum. O layout e a aparência podem mudar de um app para outro, mas todas elas compartilham o mesmo propósito e considerações de design. Abaixo estão alguns dos tipos de telas mais comuns de aplicativos móveis. Pense neles quando começar a criar wireframes para seu projeto de aplicativo móvel para o portfólio.
Tela inicial
A tela inicial é a primeira tela que os usuários encontram quando abrem um app. As telas iniciais exibem o conteúdo e os principais recursos do aplicativo e servem como ponto de partida para os usuários explorarem mais. 
Como a tela inicial mostra aos usuários o que um aplicativo tem a oferecer, o conteúdo precisa ser fácil de entender, usar e navegar. Se o app tiver elementos de navegação comuns que muitos usuários conhecem, como um menu de navegação na parte inferior e um ícone de pesquisa, ele fica mais fácil de usar.
Pode ser tentador encher uma tela inicial com muito conteúdo, mas isso pode criar uma experiência desordenada e sobrecarregar os usuários. Focar no conteúdo essencial e fazer bom uso do espaço negativo torna a página inicial mais intuitiva.
Telas de boas-vindas
As telas de boas-vindas introduzem usuários iniciantes aos principais componentes e funções de um aplicativo. Elas podem ajudar os usuários a começar rapidamente, em especial se um aplicativo tiver recursos únicos ou desconhecidos. As telas de boas-vindas também podem coletar informações para criar uma experiência mais personalizada para o usuário. Designers têm muitas opções para essas telas, por isso elas devem ser adaptadas de acordo com a experiência de um determinado app.
Um bom fluxo de boas-vindas pode aumentar o engajamento e a retenção de usuários. Mas, como ele costuma envolver várias telas, elas precisam ser fáceis de navegar. Designers podem minimizar o abandono usando uma copy clara e concisa e imagens envolventes para criar uma experiência perfeita e memorável.
Tela de perfil/conta
Uma tela de perfil ou conta contém os dados pessoais de um usuário (como nome e e-mail) e preferências no aplicativo (como histórico de pedidos e configurações de acessibilidade). Como uma tela de perfil contém muitas informações importantes, ela deve ser bem organizada e fácil de navegar. Por isso, uma prática recomendada é torná-la o mais clara e simples possível.
Tela de checkout
A tela de checkout é onde os usuários completam as compras. O checkout pode ser mais complexo do que outras partes de um app, porque geralmente envolve alguns formulários com informações de pagamento e envio. Essa etapa pode ser estressante, por isso é importante que os usuários sintam o máximo de segurança. Designerspodem ajudar deixando claro quais informações precisam ser inseridas em cada campo do formulário e adicionando indicações visuais para mostrar que um campo foi preenchido corretamente. Eles também podem informar que os usuários sabem que seus dados pessoais estão seguros e incluir uma mensagem de confirmação quando um usuário completa uma compra com sucesso. 
Principais conclusões
Quanto mais você incorporar as práticas recomendadas de design aos seus wireframes, mais fácil será o resto do processo de design. Assim, você economiza tempo e esforço, abrindo espaço para testar suas ideias de design. Mostramos alguns exemplos comuns de layouts de aplicativos móveis, mas existem muitas opções disponíveis. Veja este artigo da UX Collective sobre os 13 padrões básicos de IU para dispositivos móveis que você precisa conhecer, como telas de splash, telas de login e telas de estatísticas (talvez seja necessário ter uma assinatura para acessar o artigo).
Para mais informações sobre layouts para dispositivos móveis com diferentes conteúdos, veja alguns estudos de caso: 
· Basil (receitas)
· Owl e Fortnightly (conteúdo jornalístico)
· Crane e Rally (análise de dados) 
· Shrine (comércio digital)
· Reply (mídias sociais)
Para mais informações gerais sobre como adaptar componentes de um app móvel a diferentes contextos, consulte a página sobre Material Studies.
Revisão semana 1
Finalização: Fundamentos da criação de mockups
Olá! Você acabou de começar a criar designs de alta fidelidade, parabéns. Agora você tem um gostinho de como é criar um trabalho de design refinado. Depois, você conheceu o design visual, que é como um produto ou tecnologia são exibidos para os usuários. Em seguida, você começou a criar seus primeiros mockups. Para criar esses mockups, você usou elementos de design visual como tipografia, cor e iconografia. Na próxima parte deste curso, você vai aprender sobre alguns princípios de design visual que ajudam a melhorar e refinar seus mockups. Como mencionei antes, o design visual é um mundo enorme. Tudo pronto para explorar mais? Vamos começar.
Aplicar princípios de design visual a mockups (parte 1)
Boas vindas à semana 2
Boas-vindas de volta. Até agora neste curso, você começou seus mockups e aprendeu sobre elementos de design visual como tipografia, cor e iconografia. No entanto, entender esses elementos por si só não ajuda a criar um bom mockup. Você tem que saber como organizá-los. Pense nisso como a criação de um móvel, como uma mesa ou cadeira. Você tem um conjunto básico de peças que se unem para criar um produto. Designers de móveis já têm todos os elementos de que precisam, como pregos e cola. Eles usam técnicas de design e um plano estratégico para combinar esses itens para criar um produto útil e agradável. É aí que entram os layouts. No design de UX, layout refere-se ao posicionamento específico de estilo de texto, ícones e imagens. Nos próximos vídeos, vou falar mais sobre layouts, em seguida, vamos explorar vários métodos de layout. Estou animado para começar. Eu espero que você também esteja.
Ênfase no design de UX
Olá de novo. Existem alguns conceitos fundamentais de design que você precisa entender para começar a ajudar os mockups. Neste vídeo, vamos abordar a importância da ênfase e explicar como decidir o que enfatizar nos seus designs. Vamos começar. Em um nível básico, a ênfase significa algo que chama atenção. A ênfase está ao nosso redor e dependemos dela para traduzir informações na vida cotidiana. Por exemplo, imagine um orador que faz um discurso sem colocar ênfase em qualquer uma das palavras. Ou um pianista que toca uma música sem enfatizar uma nota mais que as outras. Se não houver ênfase, você perde a atenção do público e fica difícil de acompanhar. A mesma ideia se aplica ao design visual. Usamos ênfase para orientar um usuário intencionalmente para o que queremos que ele preste atenção. Em nossos mockups, queremos usar ênfase para dar dicas que indicam ao usuário o que é mais ou menos importante em cada página ou tela. Então, como damos ênfase no design visual?
Para enfatizar uma parte do seu design em detrimento de outra, dê mais peso visual. O peso visual é uma medida da força com que um elemento chama atenção. Usando variáveis como tamanho, cor ou contraste, é possível dar mais peso visual a um elemento. Não importa o item, tudo tem um peso visual. Para entender o que eu quero dizer, veja este mockup criado por Josh, designer de UX do Google. É para um app chamado Zest que ajuda usuários a controlar especiarias, ervas e temperos.
O design do mockup é bastante simples, mas usa elementos e princípios de design para criar ênfase de uma maneira excepcional. Ao usar espaço em branco e uma família tipográfica simples, os usuários são naturalmente atraídos pelo conteúdo principal do aplicativo: as imagens de especiarias como açafrão e harissa. As imagens são grandes e coloridas. Elas têm um peso visual muito grande em comparação com o texto e o plano de fundo ao redor. Então, talvez você esteja se perguntando como decidir o que enfatizar ou como adicionar peso visual aos seus próprios designs. As principais questões a serem consideradas ao decidir o que destacar são para onde quero chamar a atenção do usuário? E quais são os objetivos do usuário? Se a ênfase for feita estrategicamente, fica mais fácil para os usuários concluir tarefas, resultando em uma ótima experiência de usuário. Então, vamos examinar o papel que a ênfase desempenha para incentivar os usuários a agir. Os usuários precisam facilmente encontrar qualquer ação ou informações importantes que precisam para concluir uma tarefa.
Ao examinar a jornada do usuário, pergunte: como faço para que os usuários facilmente concluam as tarefas que precisam fazer?
Isso pode envolver ajustar a navegação do design com base nos resultados dos estudos de usabilidade que você conduzir neste momento. Basicamente, se alguém tiver dificuldade para encontrar um recurso importante durante o estudo, ele precisa ter mais ênfase. Veja este mockup da tela de agendamento de um app para passeadores de cães. O que está chamando mais atenção e por quê?
Usamos a cor laranja para destacar o botão “Agendar Sarah”.
A reserva de um passeador de cães é uma das etapas mais importantes na jornada do usuário. Por isso, enfatizamos mais do que a seção ”Sobre” e as avaliações dos clientes. Não é que essas outras seções não sejam importantes, nós realmente queríamos destacar a ação principal que nós queremos que os usuários realizem nesta tela.
A cor alaranjada é ousada e chama a atenção para esse recurso fundamental. E o tamanho do botão é maior que o conteúdo ao redor.
Essas decisões de design visual fazem parte da ênfase nesse botão e orientam o usuário a agir. Conforme seguimos em frente, haverá uma prática para você decidir exatamente o que enfatizar nos seus designs. Ótimo. Agora nós vimos como usar a ênfase nos seus designs. A seguir, vamos explorar outro princípio do design visual: hierarquia.
Usar ênfase em mockups
Ênfase
O objetivo do design de UX é sempre oferecer um design que atenda às necessidades dos usuários. Uma maneira de garantir que os usuários entendam e encontrem as áreas importantes do seu design é usando a ênfase. Ênfase significa que um objeto ou elemento está chamando atenção. Quando parte de um design tem ênfase, o olhar do usuário é atraído para lá ao enxergar uma tela de aplicativo ou página da Web. Existem várias maneiras de usar a ênfase nos seus designs.
Tamanho 
Alterar o tamanho dos elementos dos seus designs é uma maneira fácil de dar ênfase, chamando a atenção dos usuários para objetos maiores e, ao mesmo tempo, transmitindo que um objeto é mais importante que outro. 
Um ótimo exemplo de tamanho é o texto visível no design de um aplicativo. Usar um tamanho maior para o título da página, como “watermelon” na imagem abaixo, ajuda a orientar o usuário. Esse título deve ser maior ou mais em negrito do que o restante do texto da página para mostrar a importância desse texto específico. 
Contraste
Contraste é a criaçãode elementos visuais opostos para transmitir ênfase ou comparação. O contraste é uma ótima maneira de enfatizar os elementos de um design que são diferentes ou importantes. Na imagem abaixo, o carrinho de compras e os botões “order” estão em vermelho e roxo, contrastando com o aplicativo branco e cinza.
Alterar a aparência do texto também é uma forma de criar contraste. Existem algumas maneiras de criar contraste no texto, como negrito, cor, sublinhado, itálico e destaque de informações importantes que o usuário deve observar. 
Textura
Textura são os elementos dentro de um objeto que adicionam profundidade ou um padrão gráfico. A textura pode fazer um objeto se destacar de outros dentro do design e deve ser usada com moderação para atrair o olhar do usuário.
Uma maneira de criar ênfase usando textura é colocar linhas ou formas sobre uma imagem usada repetidamente. Adicionar uma textura é uma forma de quebrar o padrão da imagem e oferece aos usuários algo para interagir. Por exemplo, se você está criando uma página para mostrar aos usuários informações sobre sua marca, como na imagem do aplicativo abaixo, adicionar textura é uma ótima maneira de dar ênfase e atrair os olhos do usuário para uma parte do design. Na imagem, “80% dos nossos compradores” está representada pela seção de bolinhas do gráfico de pizza. Em outras palavras, a seção mais importante do gráfico é enfatizada pela textura.
“80% dos nossos compradores preferem as marcas da nossa loja em vez dos concorrentes.”
Ênfase no mundo real
Veja este exemplo de design da página “Sobre” do Google, que demonstra o uso eficaz da ênfase. A declaração de missão do Google usa um contraste de cores para chamar a atenção do usuário e enfatizar rapidamente os principais pontos da missão da empresa.
O design da página ajuda o usuário a identificar duas coisas importantes simultaneamente:
· A importância da declaração de missão do Google, enfatizada pela fonte preta de fácil leitura em um fundo branco que não distrai o leitor enquanto interage com a página.
· O contraste de cores que destaca os pilares da marca Google, as partes mais importantes da declaração de missão.
Essas opções de design dão ênfase e ajudam a direcionar a atenção do usuário para uma área específica da página. 
Ao projetar, considere por que um usuário acessaria seu site ou usaria seu aplicativo. Ao adicionar ênfase a um determinado local na página ou na tela, o usuário não precisa se esforçar tanto para encontrar o que precisa. E isso ajuda os usuários a ter uma melhor experiência de interação com seu design. 
Recursos adicionais
A ênfase ajuda a tornar seus designs visualmente atraentes e mais funcionais para os usuários. Assim, todos saem ganhando! Veja os recursos abaixo para saber mais sobre como incorporar a ênfase nos seus projetos.
· Para saber mais maneiras de dar ênfase aos seus designs, leia Emphasis: Setting up the focal point of your design, da Interaction Design Foundation. Esse texto analisa a mecânica de criar pontos focais visuais nos seus designs.
· Os princípios do design são a caixa de ferramentas que você vai usar ao longo da sua carreira como designer de UX. O artigo Breaking Down the Principles of Design, da Toptal, menciona muitos tipos diferentes de princípios de design relevantes.
Hierarquia no design de UX
Boas-vindas de volta. A esta altura, você já pode estar começando a notar que o bom design visual vem da compreensão dos princípios de design visual. Esses princípios são como ferramentas que um designer usa para criar mockups e protótipos visualmente atraentes. Para começar, vamos definir o que é hierarquia. Hierarquia é um princípio de design visual que ordena elementos em uma página e os destaca por ordem de importância. O objetivo da hierarquia é orientar o usuário. Ajustar o tamanho e a cor é uma maneira comum de distinguir a hierarquia nos design visual. No design de UX, a hierarquia pode ajudar o usuário a entender a importância relativa de diferentes elementos.
Você deve estar se perguntando se a hierarquia é diferente da ênfase. Embora sejam definitivamente conceitos relacionados, a hierarquia refere-se a um grupo de elementos que são organizados por ordem de importância. Por outro lado, a ênfase é sobre fazer um elemento se destacar dos outros elementos ao redor. Pense em quando você navega pela página inicial do site de um meio de comunicação para ficar por dentro das notícias. Você costuma olhar primeiro para as manchetes, certo? A maioria das pessoas faz isso para ter uma ideia rápida de cada matéria. As manchetes são os elementos que se destacam na página porque elas são mais importantes. Abaixo da manchete fica um resumo da matéria, que geralmente tem uma fonte menor e com menos negrito. Nesse caso, a tipografia definiu a hierarquia da página inicial. Por que precisamos de hierarquia? No design de UX, sempre queremos esclarecer para o usuário onde se concentrar primeiro e que ação realizar. A hierarquia ajuda a apontar os usuários para o primeiro passo que eles deveriam dar na jornada de usuário. Com a hierarquia, quanto mais importante a informação é, mais visualmente proeminente ela deve ser. Aplicamos a hierarquia quando criamos mockups para ajudar os usuários a navegar por um app sem problemas. A hierarquia os ajuda a encontrar as informações mais relevantes e os botões principais primeiro. A hierarquia também orienta o usuário para os lugares mais importantes da página.
Vamos rever o app para passeadores de cães e entender como isso se aplica. Esta página faz parte da segunda etapa do agendamento. Abaixo dos três ícones que indicam as etapas para fazer um agendamento há o texto “Selecione o passeador de cães”. Colocar esse texto na parte superior da página indica que a maior parte do conteúdo abaixo dele contém informações sobre esse processo. Ampliar o texto é uma forma de deixar isso ainda mais claro. À medida que avançamos na página, há a próxima linha de texto, “Disponibilidade com base na data e hora”. Esse texto é menor que ”Selecione o passeador de cães”, mas maior do que os detalhes sobre cada passeador de cães. É importante que o usuário reconheça que todos os passeadores de cães listados estejam disponíveis na data e hora selecionadas. Além disso, observe que o nome de cada passeador de cães está em uma cor cinza mais escura do que o resto do texto associado àquele passeador de cães.
Lembre-se, a hierarquia destaca os elementos da página de acordo com a importância deles. Essa escolha de design sutil indica para o usuário que ele deveria focar no nome do passeador de cães primeiro e depois ver os outros detalhes. Isso é semelhante à técnica usada na manchete de exemplo que discutimos antes. A hierarquia também afeta a acessibilidade para os usuários. Anteriormente, você aprendeu sobre tecnologias assistivas que podem ajudar usuários a se concentrarem na informação mais importante da página, como leitores de tela. Usando anotações de acessibilidade nos seus wireframes ou, nesse caso, mockups, os usuários conseguem ler elementos em uma ordem hierárquica. Anotações de acessibilidade criam uma hierarquia visual indicando a ordem em que elementos de uma tela devem ser lidos. Além disso, essas anotações podem ajudar os usuários a entender a ordem em que devem interagir com cada elemento. Excelente. Agora você conhece a hierarquia e sabe como aplicá-la nos seus mockups. Você já explorou dois princípios de design visual, então vamos para os próximos: escala e proporção. Nos encontramos lá.
Usar hierarquia em mockups
Como lembrete, o principal objetivo de criar uma hierarquia nos seus designs é orientar o usuário. A hierarquia ajuda o usuário a saber onde focar e que ação realizar.
Para entender visualmente como a hierarquia funciona, temos aqui uma imagem que mostra como as informações podem ser agrupadas. Se você pensar nas informações que precisam ser compartilhadas como um retângulo gigante, a hierarquia pega esse bloco de informações e o separa em partes, da mais para a menos importante.
A hierarquia é diferente da ênfaseporque envolve guiar a atenção do usuário pelo agrupamento de elementos em vez de focar na importância de um elemento específico. 
A hierarquia é importante para organizar informações em agrupamentos lógicos, o que ajuda os usuários a encontrarem as informações de que precisam e enfatiza os elementos em ordem de importância. A hierarquia também evita que o usuário fique confuso e sobrecarregado pelas informações. 
Implementar uma hierarquia nos seus designs
Quando você cria um design, as informações mais importantes para um usuário devem vir primeiro. Concentre-se na ordem de importância e dê aos usuários exatamente o que eles precisam. Assim, eles não ficam frustrados com a experiência de usar seu produto. 
Para aproveitar ao máximo a hierarquia no seu design, concentre-se no objetivo principal que você quer que os usuários atinjam ao interagir com seu produto. Por exemplo, se o objetivo principal é fazer com que eles façam login no seu site e interajam com ele, sua hierarquia deve começar com um link claro para a página de login ou registro. 
A hierarquia do seu design deve ser organizada de acordo com os objetivos primários e secundários. Veja estes dois designs do Google Opinion Rewards em um celular:
An example of great UX and bad Ux using the Google Rewards app
O design à direita mostra uma versão do aplicativo Google Rewards sem ênfase nas áreas importantes que incluem informações para o usuário. A fonte é pequena e não há um caminho claro para o olho do usuário seguir. Em outras palavras, o usuário não sabe onde focar primeiro ou qual ação realizar nessa tela, o que torna a experiência do usuário ruim.
O design à esquerda mostra a versão atual do aplicativo, que é mais fácil de ler e navegar. A hierarquia criou ênfase no design do aplicativo. O uso de texto maior, cores e negrito chama a atenção para as recompensas que o usuário recebeu e deixa claro quais informações o usuário precisa saber quando fechar o app.
Ajudar as pessoas que usam tecnologia assistiva
A hierarquia também é necessária para usuários que dependem de tecnologia assistiva, como leitores de tela. À medida que você preenche seu design com conteúdo, imagens e elementos, cada tela do seu app fica mais complexa. 
Essa complexidade faz com que o software de leitura de tela tenha dificuldade para seguir o fluxo correto e, portanto, os usuários acabam tendo dificuldade para entender o layout da sua interface. A hierarquia ajuda a orientar o leitor de tela a coletar as informações do design na ordem em que você quer que elas sejam lidas. 
Na caixa do leitor de tela, é possível ver como cada título lido corresponde a uma área na página da Pesquisa Google. Se esses títulos estivessem fora de ordem, o usuário que precisa de um leitor de tela ficaria confuso sobre onde está na página. É fundamental que você comunique o nível do título do seu conteúdo, preparando o terreno para as informações seguintes. Isso auxilia na arquitetura de informações do design e facilita a navegação e compreensão do usuário.
Um layout com design claro, página por página, comunica aos engenheiros o objetivo do layout e mostra a todos os usuários como interagir com seus designs. Assim, eles ficam felizes e engajados.
Organização é fundamental
Organizar seus designs usando uma hierarquia melhora a experiência do usuário do seu produto. Além disso, pensar na acessibilidade enquanto você trabalha na hierarquia de cada página melhora a jornada do usuário para todos. Enquanto trabalha nos seus mockups, pense na importância de cada área do seu design em uma escala da mais importante para a menos. Coloque as informações mais importantes primeiro! 
Lembre que, à medida que você projeta, a hierarquia da página pode mudar dependendo do feedback dos usuários e das partes interessadas.
Criar sua hierarquia
Para saber mais sobre a importância de adicionar hierarquia aos seus designs, veja estes recursos extras.
· Comece sua jornada para criar hierarquias visuais eficazes com o artigo da Mockplus Golden Tips and Examples to Create Visual Hierarchy in Website Design.
· Se você quiser ver uma representação visual de como a hierarquia pode funcionar, leia este artigo da Interaction Design Foundation para entender o que é hierarquia visual: What is visual hierarchy?
· A hierarquia é fundamental para criar um design de produto acessível a todos os seus usuários. Para saber mais sobre o design inclusivo, aqui está um artigo do UX Collective: A is for Accessibility — 12 top tips for designing an inclusive user experience.
Aplicar princípios de design visual a mockups (parte 2)
Escala e proporção no design de UX
Olá, outra vez. Agora você está começando a entender os diferentes princípios de design visual que podem melhorar seus mockups. Anteriormente, exploramos os conceitos de ênfase e hierarquia. Neste vídeo, vou começar a explicar os conceitos básicos de escala e proporção, que são duas ideias diferentes, mas relacionadas. Em seguida, veremos como aplicar a escala de maneira proporcional nos seus mockups. Por fim, vamos ver como levar a acessibilidade em consideração quando falamos de escala e proporção.
Vamos começar. Primeiro, vamos definir o que é escala. A escala é um conceito usado para explicar a relação de tamanho entre um elemento específico e outros elementos do design. Os elementos mais importantes de um design são maiores do que os menos importantes. Então, por que a escala é importante para o design de UX? Existem algumas razões para isso. Primeiro, alterar o tamanho ou a escala de um único elemento, como um botão, é uma ótima técnica para dar ênfase. Para enfatizar um elemento, é possível use a escala para tornar esse elemento maior que outros elementos ao redor. Pense em como usar uma lupa pode instantaneamente ampliar sua visão de um objeto. Da mesma forma, variar o tamanho de certos elementos do design pode ajudar você a destacar áreas específicas. Além disso, a escala pode criar similaridade e contraste entre elementos. Se dois elementos forem do mesmo tamanho, eles são percebidos como iguais ou semelhantes. No entanto, se dois elementos tiverem um contraste grande de tamanho, eles são percebidos como diferentes um do outro. Por fim, a escala pode ser usada para comunicar a hierarquia visual. Anteriormente, você aprendeu como a hierarquia é usada para comunicar a ordem de importância das informações de uma página. A escala ajuda a criar hierarquia visual. Por exemplo, a tipografia pode ser facilmente alterada usando a escala para enfatizar o conteúdo de uma página de diversas maneiras.
Esta imagem mostra como diferentes tipos de escala podem ser usados para criar títulos. O título mais importante, Título 1 ou H1, tem a maior escala e aparece na parte superior da tabela de escala. Os cabeçalhos H1 geralmente são usados para comunicar o conteúdo mais importante. Existem até sites em que é possível inserir o tamanho da fonte e o site informa o tipo de escala, sugerindo tamanhos de fonte para informações mais e menos importantes. Agora que você conheceu a escala, vamos discutir o conceito de proporção. Para designers de UX, escala e proporção são ideias muito relacionadas, mas elas não são exatamente a mesma coisa. A Proporção é sobre o equilíbrio ou harmonia entre os elementos dimensionados. Em outras palavras, a proporção ajuda designers de UX a garantirem que a relação de tamanho entre os elementos faz sentido. Isso significa que os elementos parecem estar em equilíbrio entre si. Se um elemento de um design proporcional aumenta, os outros elementos também devem aumentar de tamanho na mesma razão, para manter a proporção. Veja esta linha de ícones do nosso app de passeadores de cães. Esses três ícones têm as mesmas proporções, mas imagine que aumentamos a escala do primeiro ícone. Vê como agora eles estão desproporcionados?
Então, como garantimos que as proporções dos nossos designs estão equilibradas? Uma maneira é revisar a página depois de alterar a escala de um determinado elemento para garantir que o equilíbrio geral do design ainda está correto. Outraforma de manter as proporções de escala consistentes é incluindo determinadas especificações de tamanho para um design em um sistema de design. Vamos falar sobre sistemas de design em muito mais detalhes posteriormente. Ótimo, você está aprendendo o básico sobre escala e proporção, mas como aplicamos esses princípios em nossos mockups? Pense no exemplo do app de passeadores de cães. Nesta página do app, o usuário já selecionou o dia e a hora em que o cachorro precisa ser levado para passear. Agora, ele precisa selecionar o passeador de cães. Vê como as imagens dos quatro passeadores de cães estão na mesma escala? Como aprendemos anteriormente, quando elementos, como essas imagens, têm o mesmo tamanho, eles são percebidos como iguais ou semelhantes. Além disso, há equilíbrio e harmonia entre esses elementos, o que significa que são proporcionais. No entanto, se mudarmos a escala das imagens dos passeadores de cães, elas rapidamente ficam desproporcionais. Se você é como eu, olhar para esses imagens com tamanhos diferentes é horrível. Além disso, os diferentes tamanhos enfatizam os perfis de Michael e Melissa porque as imagens deles são maiores que as outras.
Lembre-se, se um elemento do design aumenta, os outros elementos também devem aumentar na mesma razão, para manter a proporção. Ótimo, você aprendeu sobre mais dois princípios de design visual, de escala e proporção. A seguir, vamos ver os princípios de unidade e variedade. Vamos continuar.
Escala e proporção em mockups
Imagens de escala e proporção. Escala: mostra dois círculos amarelos, um grande à esquerda e um menor à direita. Proporção: três círculos verdes, um grande, um médio e um pequeno, que diminuem na mesma proporção.
Escala e proporção são conceitos de design que podem ser incorporados estrategicamente nos seus mockups para ajudar a tornar um design mais visualmente agradável e chamar a atenção do usuário.
Escala é um conceito usado para explicar a relação de tamanho entre um elemento específico e os outros elementos do design. Proporção é sobre o equilíbrio ou harmonia entre os elementos dimensionados. 
Designers de UX costumam usar a escala para aumentar os elementos mais importantes de um design em comparação aos elementos menos importantes, o que ajuda a gerar ênfase e contraste. A proporção ajuda designers de UX a garantir que a relação de tamanho entre os elementos faça sentido e que os elementos da tela estejam equilibrados entre si.
Implementar escala nos seus designs
A escala serve para chamar atenção aos elementos e ajudar os usuários a encontrar esses elementos mais rapidamente. Ela também ajuda os usuários a entender o tamanho relativo. Imagine que você está encomendando um novo par de brincos de uma artista local, mas não consegue dizer o tamanho dos brincos com base na foto. Se a artista postar uma foto dos brincos ao lado de um objeto comum, como uma moeda, você terá uma ideia da escala.
Ou ainda, veja o princípio de escala em ação no app Google TV, na imagem abaixo. No topo da imagem, “Love and Monsters” está maior do que a linha de filmes abaixo, na seção “Top picks for you”. O uso de escala neste design chama a atenção dos usuários para o filme em destaque (no topo) primeiro.
Usar proporção nos seus designs
A proporção é como os objetos se relacionam uns com os outros. Por exemplo, as pessoas acham engraçado o tamanho dos sapatos de palhaços. Os sapatos deles são desproporcionalmente grandes para o tamanho do corpo. Você já ouviu uma piada sobre um tiranossauro? Elas geralmente são sobre como os braços desses dinossauros eram pequenos em comparação ao corpo gigante, dificultando a realização de tarefas (humanas) básicas. Os braços do tiranossauro são desproporcionais em comparação com o tamanho do corpo.
Mas como designers de UX podem usar a proporção no mundo real, além de para fazer piadas? Na imagem abaixo há um exemplo de proporção em uma tela diferente do app Google TV. Nas categorias chamadas “Romance TV shows” e “Mystery TV shows”, as imagens são quadrados arredondados do mesmo tamanho. No entanto, na categoria chamada “Popular family films”, as imagens são retângulos verticais em vez de quadrados! Essa mudança sutil na proporção destaca a diferença entre as categorias: filmes “para toda a família” ou não. Nos seus próprios designs, essas diferenças sutis de proporção são facilmente identificadas pelos usuários e deixam o design claro.
Como criar um equilíbrio para seus usuários
Agora você sabe como aplicar os fundamentos de escala e proporção para aprimorar seus designs. À medida que você continua criando seus designs e montando mockups, lembre que essas mudanças sutis, quando bem-feitas, podem facilmente informar o usuário sobre o design do seu app. Esses princípios são úteis para criar mockups bem equilibrados e fáceis de usar. 
Veja este artigo da UX Planet para aprender sobre a proporção áurea e como usar a proporção a seu favor nos seus designs: Golden ratio: Bring Balance in UI Design
Unidade e variedade no design de UX
Olá. Neste vídeo, vamos falar sobre outros dois princípios de design visual: unidade e variedade. Vamos lá. A unidade mede como elementos do seu design funcionam juntos para comunicar uma ideia. Um design com unidade é agradável de olhar, claro para o usuário e fácil de entender. A unidade pode ser criada usando um esquema de cores consistente, fontes complementares e espaçamento adequado. Na outra ponta do espectro está a variedade, que é sobre variar os elementos do design para quebrar a monotonia. O uso de diversos elementos pode dar energia e um toque especial ao design. Há inúmeras maneiras de incorporar variedade nos seus designs, como usar diferentes formas, cores, texturas e padrões. Você tem alguma parede em casa pintada com uma cor de destaque? Ou você já combinou sapatos bem coloridos com uma roupa simples? Se sim, você provavelmente entende como a variedade pode ajudar a quebrar padrões previsíveis.
Durante as etapas iniciais dos seus wireframes de baixa fidelidade, criar unidade ou variedade não é o foco. Ao criar wireframes lo-fi, seus botões e imagens são apenas espaços reservados em preto e branco. Nessa etapa, sua maior preocupação é a forma como os recursos funcionam juntos e não tanto a aparência. Quando você eventualmente começa a projetar mockups, pode se concentrar em todo o contexto. Faça perguntas como: será que estou usando cores de forma consistente e intencional? Será que as famílias tipográficas usadas funcionam bem juntas? E há variedade suficiente para manter meu design interessante? Tenha em mente que nem a unidade nem a variedade é boa ou ruim. Há partes do seu design que exigem uma ou outra, ou até mesmo ambas. A variedade pode ser usada estrategicamente para adicionar peso visual e criar ênfase.
Pense em um app para uma agência de notícias. Os apps mais eficazes de agências de notícias têm designs unificados. A maioria das matérias tem um texto escuro em um fundo branco. Agora imagine se houvesse uma notícia de última hora sobre o tempo. O plano de fundo dessa notícia de última hora poderia ter uma cor chamativa como vermelho ou amarelo. Adicionar essa variedade à notificação ajuda a quebrar a consistência e dá mais urgência à matéria. Esses elementos de variedade ajudam a destacar a matéria, mas só funcionam porque os estilos das outras matérias são uniformes. Mas a variedade não precisa prejudicar a unidade. Na verdade, variedade e unidade podem funcionar juntas e em harmonia. Como discutimos em um vídeo anterior, se houver muita uniformidade, pode ser difícil para os usuários saberem onde se concentrar. Com tipografia ou iconografia semelhantes demais, pode ser difícil para os usuários identificar textos e informações importantes em um mar de elementos de design idênticos. Uma combinação equilibrada de unidade e variedade pode dar indicações visuais para os usuários, prendendo a atenção deles. Você precisa garantir que usar o produto também seja uma experiência visualmente gratificante. A variedade de textura, cor, tipografia e forma pode fazertoda a diferença. Essa variedade pode dar ênfase para orientar os usuários a pressionar um botão ou desviar a atenção deles para uma seção da página. Mas, cuidado: variedade demais pode prejudicar a harmonia e dificultar a leitura de informações importantes. A chave é o equilíbrio. Vamos pensar rapidamente sobre como a unidade e a variedade funcionam em nosso app de passeadores de cães.
Veja o mockup da nossa página inicial. Há um esquema consistente de cor laranja e até espaçamento entre elementos. Essa unidade torna a página inicial visualmente agradável e fácil de entender. A variedade também tem um papel importante aqui. A maior parte do design é branca ou cinza clara, mas o botão “escolha um horário” é alaranjado. Essa variedade em cores dá ênfase e guia o usuário a pressionar esse botão. Certo, você aprendeu sobre vários princípios de design visual como ênfase, hierarquia, escala, proporção, unidade e variedade. Há muito mais sobre princípios de design visual que você pode aprender por si conforme continua sua jornada para se tornar designer de UX. Incentivo você a manter a curiosidade e continuar aprendendo.
Unidade e variedade em mockups
Unidade: vários pequenos círculos organizados no formato de uma estrela de quatro pontas. Variedade: várias formas diferentes do mesmo tamanho e cor.
No vídeo do curso, você aprendeu como os conceitos de unidade e variedade podem ser incorporados aos designs para prender a atenção dos usuários e melhorar a interação deles com seu produto.
A unidade mede se os elementos de design funcionam bem para criar uma ideia de design consolidada.
A variedade envolve diversificar os elementos do design para quebrar a monotonia e criar interesse visual.
Aplicando um princípio de design como a unidade, designers de UX podem comunicar uma única ideia usando a unidade entre os diferentes elementos de um design. Muitas vezes, isso pode ser a diferença entre um design de IU bom e incrível! A variedade permite que os designers usem elementos diferentes, mas semelhantes, para manter a atenção dos usuários. A repetição é uma ótima ferramenta para designers de UX, mas se usada em excesso pode cansar o usuário e fazê-lo parar de interagir com o produto. 
Vamos explorar alguns exemplos de unidade e variedade do mundo real em ação.
Unidade
Seu design é muito mais do que elementos em um frame. A unidade é como todos esses elementos se juntam para ajudar os usuários a atingirem o objetivo que você estabeleceu para o design do produto. Pense nisso como todos os elementos se juntando para pintar o design que você está imaginando ao criar o mockup. 
Conforme você começa a pensar em como usar a unidade nos seus produtos, investigue:
· Como os elementos estão alinhados
· A forma dos elementos 
· A continuidade dos elementos textuais
Esses itens estão destacados nos elementos do app YouTube Music abaixo:
Como os elementos estão alinhados
A maneira como os elementos ocupam espaço em um app é tão importante quanto os próprios designs. No exemplo destacado à esquerda, o app YouTube Music mostra os vídeos do app e os artistas favoritos. Os vídeos são retângulos que ocupam toda a largura da tela e os favoritos são círculos com larguras diferentes. Essas duas formas vermelhas sobrepostas no app têm o mesmo tamanho. As caixas vermelhas mostram que esses elementos não se alinham pela forma, mas sim pela unidade de quanto espaço eles ocupam na tela. 
A forma dos elementos 
Você já aprendeu que a forma do elemento e a proporção podem ser usadas para melhorar a maneira como os usuários interagem com seus designs. Agora você vai ver como a forma dos elementos pode melhorar a unidade dos designs no app YouTube Music. Na segunda tela, as caixas das listas de reprodução têm a mesma escala, proporção e tamanho. Esses quadrados vermelhos são todos do mesmo tamanho. Essa tela do app apresenta muitos princípios diferentes, mas não há dúvida de que o design das caixas deixa esse design claro, organizado e fácil de navegar. 
Continuidade dos elementos textuais
Anteriormente neste curso, falamos sobre a importância de escolher uma fonte e sua respectiva cor e tamanho. Veja como os textos do YouTube Music se encaixam e aumentam a unidade dos designs. Na terceira e última imagem acima, há dois tipos de elementos textuais em destaque: os títulos e as descrições de seção. Os títulos das seções têm a mesma cor, a mesma fonte e o mesmo alinhamento. As descrições também compartilham a mesma cor, a mesma fonte e o mesmo alinhamento, até quando as descrições são maiores do que o espaço permitido. Todas essas escolhas contribuem para manter o fluxo do aplicativo unificado. Cada elemento, inclusive o texto, tem um lugar e nunca sai do espaço.
Como aplicar unidade aos seus mockups
Ao pensar na unidade do design do seu produto, pense na declaração de meta que você elaborou. Agora, pense em todos os elementos que você quer adicionar ao seu design. Como cada elemento que você está criando ajuda a atingir essa meta? Se você não conseguir responder, talvez seja hora de repensar a finalidade desse elemento no design.
Variedade
Para que os usuários tenham interesse nos seus designs, os elementos precisam ser bem apresentados. Como designer de UX, você provavelmente vai trabalhar em alguns projetos muito interessantes, mas também em produtos comuns (alguns até diriam tediosos!). Em situações como essa, é importante entender como a variedade melhora a interação dos usuários com seu produto. 
O app Google Fotos tem uma solução para deixar o seu design mais variado.
Note que a variedade está no tamanho das imagens acima. Os designers do Google Fotos poderiam ter escolhido manter a típica grade quadrada que representa as imagens em toda a coleção de fotos. Em vez disso, escolheram fazer com que algumas imagens mantivessem as dimensões originais, no formato de retângulos. Esses retângulos são intercalados com as imagens quadradas de uma forma esteticamente agradável. Essa variedade de imagens mantém os usuários engajados com o app. 
Como aplicar variedade aos seus mockups
Designer de UX bem-sucedidos precisam encontrar maneiras de manter os usuários animados com o produto. Até mesmo quando esse produto não é tão empolgante! Aplicar um pouco de variedade aos elementos pode ajudar bastante a prender o interesse dos usuários no design que você criou. Existem áreas dos seus mockups que você acha muito repetitivas? Pense no que você aprendeu sobre variedade e tente algo um pouco diferente. 
Pense no design geral do seu produto 
É recomendado considerar princípios como unidade e variedade no início do processo de design. A incorporação desses conceitos à medida que você trabalha pode ajudar a criar produtos realmente envolventes que garantem que os usuários continuem interagindo com o design do seu produto.
Para entender como o princípio da unidade funciona no design gráfico e como aplicá-lo aos seus designs, veja este vídeo da DesignMantic: What is Unity? Depois, leia um artigo do UX Collective para entende como um designer de UX percebeu que a variedade poderia melhorar o design de um produto: Variety: the salt of design.
Aplique princípios de design visual aos seus mockups do projeto do portfólio
Introdução da atividade
Nesta atividade, você vai aplicar os princípios do design visual de ênfase, hierarquia, escala, proporção, unidade e variedade aos seus mockups do projeto de portfólio.
Depois de concluir esta atividade, você poderá comparar seu trabalho com um exemplar completo no próximo item do curso.
Instruções passo a passo
Etapa 1: Abra seu projeto no Figma
Acesse o site do Figma ou inicie o app para computador. Faça login, clique em Recentes, na barra de navegação superior esquerda, e depois clique em seu projeto para abri-lo. 
Etapa 2: Avalie seu design e determine que pontos do design visual podem ser melhorados
Conforme você progrediu nas lições anteriores, você aplicou vários ajustes ao seu design e recebeu a tarefa de priorizar as necessidades do usuário nas suas decisões de design. Nesta fase, você vai se concentrar emencontrar oportunidades para melhorar a usabilidade do seu design. Encontre instâncias em que é possível melhorar:
· Ênfase: destaque alguns elementos do seu design em relação aos demais. Aplique maior peso visual ao que você quer que o usuário perceba primeiro para ajudá-lo a concluir a tarefa.
· Hierarquia: destaque elementos com informações importantes. O dimensionamento dos elementos é um ótimo ponto de partida para refinar a hierarquia visual.
· Escala e proporção: use o tamanho dos elementos para mostrar onde eles são relativamente semelhantes ou diferentes.
· Unidade e variedade: confirme se o seu design está unificado como um todo, mas inclua variedade suficiente para quebrar a monotonia.
Para aumentar a usabilidade do seu produto, esclareça as ações mais importantes que um usuário pode realizar e tenha em mente a intenção geral do usuário.
Etapa 3: Ajuste seu design visual
Aplique os quatro princípios de design visual listados acima ao seu design para melhorar e refinar ainda mais seu design. Em uma tela que você identificou como precisando de ajustes, encontre dois pontos para aplicar os princípios de design visual e coloque-os em prática. Repita esse processo para todas as telas de mockup, lembrando os princípios específicos que você já aplicou. Não se esqueça de aplicar os quatro princípios que você aprendeu pelo menos uma vez. Essas decisões e ajustes não são finais. Talvez você encontre mais pontos para alterar quando receber o feedback.
Se você está procurando inspiração, navegue por alguns dos seus aplicativos favoritos para entender como eles aplicam esses quatro princípios de design visual. O design visual é uma habilidade difícil de dominar, mas você está no caminho certo!
Etapa 4: Refletir sobre a conclusão da atividade
Seu design visual:
· Enfatiza elementos que são importantes para o usuário?
· Coloca elementos em uma relação hierárquica?
· Utiliza escala e proporção para destacar semelhanças e diferenças?
· Usa unidade e variedade para criar consistência, evitando a monotonia?
Etapa 5: Salvar o trabalho
Ao realizar essas atividades, lembre-se de:
· Depois de aplicar os princípios de design visual conforme indicado nesta atividade, faça capturas de tela do mockup para mostrar seu progresso.
· Salve todo o seu trabalho no computador, em um disco rígido ou em uma pasta do Google Drive, para garantir que mais tarde terá acesso a todos os recursos necessários do curso para criar seu portfólio.
Aqui temos um exemplar completo com uma explicação sobre por que ele atende às expectativas da atividade anterior. 
Exemplo
Zia's Pizza prototype with buttons and scale appliedAssessment of exemplar with a magnifying glass icon
Avaliação do exemplar
No exemplar acima, havia lugares para aplicar os quatro princípios de design visual. 
O designer usou ênfase na seção “Pizzas You Might Like” colocando o item em uma caixa elevada. Essa ênfase ajuda a esclarecer a informação que pertence a essa pizza específica. A hierarquia da tela também foi reformulada para dar destaque a elementos importantes, como tempo de espera e número de pizzas na fila. A escala dos botões em relação a outros elementos da tela direciona a atenção imediatamente para os principais itens de ação. Por fim, a variedade de cores de preenchimento ajuda a orientar a arquitetura das informações, enquanto a paleta de cores consistente unifica a aparência geral.
Agora, compare o exemplar acima com sua entrega concluída. Avalie seu trabalho com base em cada um dos critérios usados aqui para analisar o exemplar. 
O que você fez bem? Em que você pode melhorar? Tenha esse feedback em mente conforme avança no curso.
Refinar designs de mockups
Aplicar os princípios de Gestalt a mockups
Olá, outra vez. Até esta parte do curso, temos discutido princípios de design visual. Agora, estamos prontos para explorar alguns conceitos mais complexos. Neste vídeo, vamos conhecer um princípio psicológico chamado Gestalt. Você deve se lembrar de aprender sobre Gestalt em um curso anterior, mas agora é hora de aprender mais a fundo. Para refrescar sua memória, os princípios de Gestalt descrevem como humanos agrupam elementos semelhantes, reconhecem padrões e simplificam imagens complexas quando percebem objetos. Em outras palavras, o cérebro humano tenta simplificar e organizar imagens complexas subconscientemente organizando as partes em um todo coeso. Basicamente, seu cérebro foi treinado para ver estrutura, lógica e padrões. Os princípios de Gestalt ajudam a entender melhor como todas as escolhas de design que temos feito funcionam juntas e como elas podem ser interpretadas pelos usuários. Os princípios de Gestalt também oferecem a designers uma maneira de dar um passo atrás e analisar o trabalho de uma perspectiva diferente. Os designers facilmente se prendem aos detalhes e acabam perdendo a visão geral do projeto. Aplicar os princípios de Gestalt aos nossos projetos é uma forma de realmente notar como nossos elementos de design funcionam juntos. Da mesma forma que podemos usar vários princípios de design visual para criar ênfase, vários princípios de Gestalt podem ser aplicados a um mockup ao mesmo tempo para fazer conexões visuais. Neste vídeo, vamos falar sobre três princípios de Gestalt: similaridade, proximidade e região comum. é importante notar que há vários princípios de Gestalt, incluindo fechamento, continuação e simetria. Vamos falar apenas sobre similaridade, proximidade e região comum neste vídeo, porque eles dão a visão geral mais ampla sobre como a teoria de Gestalt é usada no design de UX.
Reproduza o vídeo começando em :1:48 e siga a transcrição1:48
Certo! Vamos definir esses princípios e explorar como eles se aplicam ao design. Vamos começar pela similaridade. O princípio da similaridade afirma que elementos parecidos são percebidos como tendo a mesma função. Em outras palavras, a similaridade foca em coisas que parecem ou se comportam da mesma maneira e como o usuário vai relacionar esses itens. Vamos examinar como nosso app de passeadores de cães usa o princípio da similaridade. Aqui, você nota que usamos a cor laranja para simbolizar ações. A guia de passeadores de cães na parte superior da tela, a marca de confirmação do passeador de cães e o botão “Próximo” são todas as ações que o usuário pode selecionar, e todos têm a mesma cor. Mesmo se formos para uma nova página do aplicativo, a cor laranja ainda continua direcionando os usuários para a ação que eles precisam realizar. Este é um exemplo de como a cor é usada para agrupar o que vemos. Seu cérebro automaticamente agrupa esses elementos laranjas. Como são da mesma cor, eles são percebidos como tendo a mesma função. Outro exemplo do princípio de similaridade em ação é como cada círculo nesta página representa um perfil de usuário. Todos os círculos têm o mesmo peso visual na página. Mesmo que o usuário tenha uma foto de perfil como Sarah M. ou usa uma inicial como Alice ou Sal, seu cérebro automaticamente faz a conexão de que essas formas semelhantes representam a mesma ideia: um perfil de usuário. Você vai instantaneamente fazer essa conexão quando encontrar outros círculos desse tamanho no app. Em seguida, vamos explorar o princípio da proximidade, que afirma que elementos próximos parecem ser mais relacionados do que elementos mais espaçados. Em outras palavras, humanos percebem objetos próximos como conectados. A maneira como pessoas com visão e leitores de tela leem é um exemplo do princípio da proximidade em ação. A falta de espaço entre letras ou caracteres diz que essas letras ou caracteres formam uma palavra. O espaço entre e após desses grupos de letras ou caracteres informa que uma nova palavra começou. O princípio da proximidade também é usado no app de passeadores de cães. Quando um usuário está agendando um horário com um passeador de cães, o app oferece uma lista horizontal dos nomes dos animais de estimação do usuário: Charlie, Broccoli e Rover. O usuário seleciona quais cães precisam passear. A proximidade desses botões informa que eles são relacionados.A proximidade entre a lista de cães e a pergunta “Quem vai dar uma volta?” informa que a pergunta está relacionada à lista de cães. Por outro lado, essa pergunta e a lista de cães estão longe da caixa de agendamento recorrente. O espaço entre esses elementos indica que eles não estão relacionados. Certo! Temos mais um princípio de Gestalt para abordar.
Por fim, há o princípio da região comum, que define que elementos dentro da mesma área são percebidos como agrupados. Embora esteja conectado ao princípio da proximidade, o princípio da região comum é diferente porque tem menos a ver com o espaço entre os elementos e é mais relacionado ao uso de elementos visuais para formar seções. Aqui temos um mockup de um app criado por um designer de UX do Google chamado Kaiwei. O app se chama Rostery. Ele foi criado para ajudar professores universitários a se lembrarem do rosto e dos nomes dos alunos de uma maneira divertida e simples. Nesta tela, o app é dividido em três seções: a barra de navegação no topo, a imagem do progresso da memorização e os nomes dos alunos que o professor quer lembrar. Cada uma dessas seções tem vários elementos, como imagens, fotos e texto. Usando o princípio da região comum, seu olho automaticamente agrupa conteúdos que estão juntos na mesma área. Nesse exemplo, Kaiwei adicionou uma borda em torno de cada grupo de elementos, que é uma maneira fácil de criar uma região comum. Também vamos ver o princípio da região comum no app de passeadores de cães. Eu usei um plano de fundo azul atrás do nosso conteúdo selecionado para criar uma região comum. O usuário é capaz de identificar rapidamente os itens em um fundo azul como o passeador de cães selecionado, e o conteúdo sobre o fundo branco como itens não selecionados. A principal lição sobre os princípios de Gestalt é que devemos ter certeza que nossos designs funcionam da maneira como nossas mentes organizam elementos naturalmente. Quando usados de maneira bem pensada, os princípios de Gestalt podem ajudar a gerar equilíbrio visual. Equilíbrio visual é a sensação de que um design está igualmente ponderado em ambos os lados em relação a um centro em destaque. O equilíbrio visual passa a sensação de o design está completo. Você pode aprender mais sobre equilíbrio visual no texto. Por enquanto, é isso. Você está começando a pensar como designer de UX e já pode aplicar esses princípios de Gestalt nos seus próprios mockups. Boa sorte!
Saiba mais sobre outros princípios de Gestalt
Os princípios de Gestalt descrevem como humanos agrupam elementos semelhantes, reconhecem padrões e simplificam imagens complexas quando veem objetos. Em outras palavras, o cérebro humano tenta organizar as informações organizando subconscientemente as partes em um todo coeso. A aplicação dos princípios de Gestalt nos seus mockups ajuda a criar designs fáceis de usar e embasados na psicologia e no comportamento humano.
Até agora, neste programa de certificação você aprendeu sobre três princípios de Gestalt:
· Similaridade: as pessoas consideram que elementos parecidos têm a mesma função.
· Proximidade: elementos próximos parecem mais relacionados do que elementos que estão mais distantes entre si. 
· Região comum: elementos dentro da mesma área são considerados agrupados.
Agora, você vai explorar mais três princípios de Gestalt: fechamento, continuidade e simetria.
Fechamento
O princípio de Gestalt do fechamento descreve que, quando um ser humano olha para um objeto incompleto, ele subconscientemente completa a imagem para ver um objeto inteiro e completo. Veja a imagem acima, por exemplo. Tecnicamente, a imagem mostra várias linhas coloridas diferentes, mas seu cérebro percebe essas linhas como um quadrado vermelho, um círculo azul e um triângulo amarelo por causa da vontade de fechamento. O uso do princípio de Gestalt do fechamento pode manter os usuários engajados com seus designs, melhorando a atenção deles aos objetos.
Fedex
E quanto ao fechamento no mundo real? No logotipo da FedEx, mostrado acima, há um exemplo sutil de fechamento. Você consegue ver? Entre o E e o x, o espaço em branco forma uma seta apontando para a direita. Não há contorno ou distinção na seta, mas os usuários podem vê-la porque a forma do E e do x se unem para dar a ilusão da seta. Para a FedEx, essa seta é mais do que o princípio do fechamento. Ela também se encaixa no propósito da marca de enviar itens para usuários, porque a seta implica avanço.
Para ler mais sobre fechamento no design, aqui está um artigo do UX Collective: Improve Your Designs With The Principles Of Closure And Figure-Ground.
Continuidade 
O princípio de Gestalt da continuidade afirma que os elementos dispostos em uma linha ou curva parecem estar mais relacionados do que elementos que não estão na linha ou curva. Em outras palavras, a continuidade guia o olhar do usuário de objeto a objeto, seguindo uma linha, e foca a atenção em partes específicas da tela.
Por exemplo, na imagem acima, seus olhos são conduzidos do primeiro círculo, passando pelo segundo e até o terceiro, porque seguem a linha branca enquanto ela se move pela imagem.
No mundo real, o princípio de Gestalt da continuidade é frequentemente usado ao mostrar processos passo a passo e ao exibir uma lista de itens relacionados. 
Imagine que você está procurando informações sobre como enviar um pacote. Primeiro, você clicaria em “Send” no menu de navegação. Em seguida, seu olhar se move para o cabeçalho “Learn About” porque você quer aprender a enviar um pacote. Em seguida, seu olhar se move para o subtítulo “Sending”, onde encontra o link para aprender sobre o envio de pacotes. Por quê? O princípio da continuidade é usado para conduzir seus olhos em uma linha vertical pelo menu de navegação. Você segue a linha tão rapidamente que nem percebe que passou por três níveis de menus para encontrar o link que estava procurando!
Simetria
Outra maneira de fazer os usuários perceberem os elementos de um design é com base em semelhanças ou se eles são simétricos ou assimétricos. 
O princípio de Gestalt da simetria descreve que os elementos são visualmente mais agradáveis quando as partes de um objeto são equilibradas ou imagens espelhadas uma da outra. Além de serem bonitos, objetos simétricos também são percebidos como relacionados. Na imagem acima, a forma verde escura à esquerda é duplicada na forma verde clara à direita. A única diferença entre essas duas formas simétricas é o tom de verde.
Por outro lado, a assimetria, que é a falta de equilíbrio e igualdade, pode enfatizar a importância de um elemento e criar interesse visual. Usar assimetria nos seus designs pode ajudar a chamar a atenção para um item ou agrupamento de itens específico. Na imagem acima, a forma verde à esquerda usa linhas retas e a forma amarela à direita usa linhas curvas, o que as torna assimétricas.
A imagem abaixo mostra o site do the Alan Turing Institute, que coloca a assimetria em ação. Aqui, diferentes tamanhos de fonte e o posicionamento das caixas de texto orientam os usuários para as informações mais importantes da página.
Enquanto você pensa em como usar simetria e assimetria nos seus designs, veja este vídeo do Skillshare sobre simetria vs. assimetria para saber mais.
Com os princípios de Gestalt em mente, você está no caminho certo para criar designs inteligentes, visualmente atraentes e fáceis de usar. Pense nas necessidades dos usuários enquanto projeta e não tenha medo de voltar à prancheta para dar vida a alguns desses princípios nos seus designs!
Aplique os princípios de Gestalt aos seus mockups do projetos do portfólio
Introdução da atividade
Esta atividade vai ajudar você a aplicar seu conhecimento sobre os princípios de Gestalt. Você vai usar seu conhecimento dos princípios de Gestalt e aplicar essa percepção para refinar ainda mais o design visual do seu projeto do portfólio.
Depois de concluir esta atividade, você poderá comparar seu trabalho com um exemplar completo no próximo item do curso.
Instruções passo a passo
Etapa 1: Abra seu projeto no Figma
Depois de abriro site do Figma ou iniciar o aplicativo desktop do Figma, encontre seu projeto em Recent. Clique no projeto para abri-lo.
Etapa 2: Avalie seu design e determine onde o layout pode melhorar
Você acabou de concluir uma rodada de ajustes em que aplicou os princípios de design visual aos seus mockups. Agora, você deve revisar seus designs novamente e considerar o que pode melhorar com base no seu conhecimento sobre os princípios de Gestalt. Como lembrete, os princípios de Gestalt em que você deve se concentrar são:
· Similaridade: elementos semelhantes (em forma, tamanho ou cor, por exemplo) são percebidos como tendo a mesma função.
· Proximidade: elementos próximos parecem mais relacionados do que elementos que estão mais distantes entre si.
· Região comum: elementos na mesma área fechada são percebidos como agrupados.
Encontre instâncias em que você possa aplicar esses princípios para simplificar ainda mais o fluxo principal do usuário e criar um produto mais fácil de usar.
Etapa 3: Ajuste seu design
Aplique os princípios de Gestalt listados acima ao seu design e refine as decisões que você já tomou para aprimorar ainda mais seu design. Em uma tela que você identificou como precisando de ajustes, encontre dois pontos para aplicar os princípios de Gestalt e coloque-os em prática. 
Repita esse processo para todas as telas de mockup, lembrando os princípios específicos que você já aplicou. Os princípios de Gestalt não poderão ser aplicados em todas as telas, mas não deve ser difícil aplicar os três princípios pelo menos uma vez ao longo do fluxo principal do usuário.
Para se inspirar, pense nos momentos em que você, consciente ou inconscientemente, viu os princípios de Gestalt em ação, como na maneira que um mercado organiza os produtos. Os exemplos estão ao seu redor!
Essas decisões e ajustes não são finais, mas podem mudar à medida que o projeto avança. Você vai receber comentários sobre seu design e encontrar outros pontos que podem ser alterados posteriormente.
Repita esse processo para todas as telas do seu mockup. Aproveitar os princípios de Gestalt é uma ótima maneira de facilitar o processo de um usuário, levando em consideração como o usuário pensa!
Etapa 4: Refletir sobre a conclusão da atividade
Seu design:
· Usa a similaridade para mostrar elementos com a mesma funcionalidade?
· Usa a proximidade para reforçar quais elementos estão relacionados?
· Usa regiões comuns para agrupar elementos semelhantes em áreas definidas?
Etapa 5: Salvar o trabalho
Ao realizar essas atividades, lembre-se de:
· Depois de aplicar os princípios de Gestalt conforme indicado nesta atividade, faça capturas de tela do mockup para mostrar seu progresso.
· Salve todo o seu trabalho no computador, em um disco rígido ou em uma pasta do Google Drive, para garantir que mais tarde terá acesso a todos os recursos necessários do curso para criar seu portfólio.
Aqui temos um exemplar completo com uma explicação sobre por que ele atende às expectativas da atividade anterior.
Exemplo
Zia's Pizza build your own pizza page mockupAssessment of exemplar with a magnifying glass icon
Avaliação do exemplar
No exemplo acima, o designer aplicou o design visual e os princípios de Gestalt ao design do app da Zia's Pizza. 
Concentrando-se no processo específico de personalização de uma pizza, o designer aproveitou os princípios de Gestalt em todo lugar. O princípio da similaridade foi aplicado aos elementos de recheio, que são todos muito semelhantes. Foi tomada a decisão de alterar os elementos de borda e molho para um design de carrossel, para diferenciá-los da seção de recheios. Essa escolha reflete como a borda e o molho são elementos de escolha única, enquanto o usuário pode selecionar várias coberturas. A região comum foi aplicada para separar as seções semelhantes, mas distintas, do processo de personalização da pizza: borda, molho e recheios. Por fim, a proximidade foi usada para reforçar itens semelhantes, como coberturas, e mais espaço foi dado aos itens diferentes, como molho e crosta.
Agora, compare o exemplar acima com sua entrega concluída. Avalie seu trabalho com base em cada um dos critérios usados aqui para analisar o exemplar. 
O que você fez bem? Em que você pode melhorar? Tenha esse feedback em mente conforme avança no curso.
Reflita sobre seu progresso
Olá! A essa altura, seus mockups já evoluíram muito desde o início do curso. Você adicionou elementos aos seus mockups, aplicou princípios de design visual e se certificou de que seu design comunica uma ideia clara e coesa. Agora é hora de fazer uma pausa. Até designers experientes param e analisam o progresso em vários pontos. Muitas vezes, é mais fácil ver como você chegou longe e quanto você ainda tem para fazer quando tem uma lista, mas o que você deveria incluir nessa lista? Vou dar para você algumas coisas para pensar.
Sua lista deve ter quatro categorias principais: visão detalhada, visão por página, visão por função e visão do app. É útil começar com pequenos detalhes e passar progressivamente até o quadro geral, então a primeira categoria da nossa lista é a visão detalhada. Ao focar nas pequenas coisas primeiro, você consegue identificar em que há erros nos elementos. Vale a pena analisar elementos individuais como tipografia, cor e iconografia para verificar se eles estão consistentes em todos os mockups ou se estão fora de ordem. Por exemplo, no app de passeadores de cães, ao verificar meu trabalho, encontrei um ícone em que acidentalmente use laranja f18530, embora eu tenha usado laranja fa7b17 no restante do design.
Em segundo lugar, use uma visão por página se todos os elementos de cada página estão equilibrados e unificados. Dê uma olhada geral na página para ver se há alguma coisa fora do lugar. Essa também é uma boa hora para considerar a escala e proporção dos elementos da página. Por exemplo, quando eu criei a página de agendamento do app de passeadores de cães, eu recuei a biografia de cada passeador de cães para tentar destacar o nome deles. No entanto, depois de dar uma olhada geral na página, senti que as biografias estavam fora de equilíbrio em relação ao resto da página e decidi alinhar tudo à esquerda. Além disso, na primeira versão, os ícones de marca de verificação estavam separados. Para ajudar a melhorar o equilíbrio da página, eu adicionei um círculo cinza ao redor do ícone da marca de verificação.
Em seguida, analise seus designs usando uma visão por função. Em outras palavras, você precisa garantir que seus designs são funcionais. Mais especificamente, verifique se você incluiu todos os elementos de navegação nos seus designs para que eles estejam prontos para a prototipagem. Faça perguntas como: cada página tem uma maneira de avançar e voltar? Existe um botão para executar a ação principal da página? Preciso de um botão para permitir que os usuários desfaçam uma ação? Por exemplo, quando eu analiso as páginas do app de passeadores de cães por função, estou verificando se há elementos como a seta para voltar no canto superior esquerdo e o X no canto superior direito. Também estou verificando se incluí um botão para que os usuários realizem a ação principal da página, que neste caso é agendar a Sarah, a passeadora de cães.
Por fim, dê um passo para trás e analise seu design como um todo. Isso é chamado de visão do app, porque você analisa todo o aplicativo. Pensar nos seus designs no contexto geral ajuda a garantir que seu produto como um todo tem a aparência e funções que você quer. Para fazer isso, eu recomendo diminuir o zoom no Figma para que você possa analisar várias páginas do seu design ao mesmo tempo. Por exemplo, aqui está uma visão do aplicativo para o app de passeadores de cães em que eu estava trabalhando. Você já viu muitas dessas páginas como exemplos em diversos vídeos, mas aqui está o design do app como um todo. Estive iterando esses mockups enquanto você estava trabalhando no seu, mas ainda tenho um longo caminho pela frente. Como parte da visão do app, vou verificar se há coisas como consistência na aparência geral doproduto. Por exemplo, os três ícones na parte superior das páginas do meu app devem ficar na mesma posição, independente da página em que eu estou. Aí está, você terminou a lista das quatro etapas para revisar seu design. Este é mais um momento para você iterar e aprimorar seus designs. Seus mockups devem estar ficando cada vez melhores a cada ajuste que você faz. Continue o ótimo trabalho.
Outros elementos e princípios de design visual
Agora que você aprendeu sobre os princípios de design padrão, como ênfase, hierarquia e proporção, é hora de considerar alguns outros elementos de design. À medida que você continua desenvolvendo designs de alta fidelidade, você se concentrará mais no visual, na estética e na funcionalidade. Neste texto, vamos ver como usar elementos visuais como valor, saturação e orientação para aprimorar a experiência do usuário.
Valor
Enquanto matiz se refere a famílias de cores (como vermelho, verde ou azul), o valor é a claridade ou escuridão de uma cor. O valor mais claro de qualquer cor é o branco e o mais escuro é o preto (como na imagem acima). Muitos programas têm configurações de valor, como uma escala deslizante que permite adicionar branco ou preto a uma cor selecionada. O valor é a chave para criar contraste nos seus designs. Por exemplo, uma cor com um valor mais claro se destaca em um fundo escuro, o que pode facilitar a visualização de um design.
Saturação
A saturação refere-se à intensidade e riqueza da cor. Pense na saturação mais alta como a forma mais pura de uma cor. Por exemplo, o vermelho na forma mais saturada é ousado e brilhante. É possível suavizar o vermelho puro diminuindo a saturação e fazendo com que ele pareça mais suave. Se você baixar totalmente a saturação, ficaria com tons de cinza, como um filme preto e branco.
A saturação depende do nível de ousadia que você quer para as cores do seu design. Cores altamente saturadas são ótimas para chamar a atenção do usuário. Pense em letreiros de néon, marca-textos e sirenes: todos eles usam saturação intensa para enfatizar sua importância.
Orientação
A orientação refere-se ao layout do design. A orientação geralmente corresponde à plataforma ou dispositivo para que você está projetando. Por exemplo, os computadores desktop tendem a ter orientações horizontais (ou paisagem), enquanto celulares e tablets permitem que os usuários alternem entre as orientações vertical (ou retrato) e horizontal. 
Alguns dispositivos não são orientados horizontalmente ou verticalmente. Smartwatches, por exemplo, geralmente são quadrados, então designers de apps para smartwatch precisam levar isso em consideração. Pense na orientação como uma grade que ajuda a planejar seus designs para se adequarem a diferentes formas. 
Interesse intrínseco
O interesse intrínseco significa quanto um elemento visual é chamativo para os usuários. Certos elementos de design, como logotipos ou animações, têm o intuito de chamar a atenção do usuário. Por exemplo, na imagem acima, o título do capítulo é grande e em negrito, o que chama a atenção do leitor. O texto do capítulo, por outro lado, é menor e mais legível. 
A ilustração do lado esquerdo da imagem utiliza variações de cor, escala e composição, ganhando ainda mais destaque do que o título do capítulo. A imagem do funil também ajuda a chamar a atenção do usuário, porque imagens geralmente chamam mais atenção do que textos.
Use o interesse intrínseco nos seus designs, certificando-se de que os elementos mais importantes se destaquem e os menos importantes se misturem. Por exemplo, muitas revistas usam fontes com serifa para títulos de artigos e fontes sem serifa para o corpo do texto. As serifas dão um toque especial aos títulos e os distinguem do restante do conteúdo.
Peso físico percebido
O peso físico percebido é a ilusão de peso e volume que cada elemento visual transmite. Ao criar elementos que simulam objetos com peso físico, as dimensões de cada elemento precisam se relacionar com as outras de maneira proporcional. 
Na imagem acima, cada recipiente parece conter um volume diferente de líquido, desde o copo medidor até o galão de leite. Os tamanhos relativos dos recipientes variam de pequenos e leves a grandes e pesados. É a diferença entre uma porção única e o suficiente para um batalhão!
Enriquecer a jornada do usuário
Escolhendo diferentes elementos visuais, você é capaz de criar designs mais interessantes, atraentes e funcionais. À medida que você segue na sua jornada de design, lembre-se de que cada elemento pode enriquecer a experiência do usuário e as interações com seus produtos. Aproveite o tempo para mapear suas escolhas visuais e o motivo por trás delas. No design de UX, não há coincidências!
· Para saber mais sobre esses elementos e outras opções de design, veja este artigo sobre princípios de design da Interaction Design Foundation.
· Este artigo da Springboard explora 16 princípios de design importantes para iniciantes.
· Para conhecer os fundamentos de designs de sucesso, descubra as quatro regras de ouro do design de IU da Adobe.
· O usability.gov tem uma ótima lista de conceitos básicos do design de interface do usuário para ter em mente ao projetar.
Saiba mais sobre os princípios de design de interface
Agora que você aprendeu mais sobre como usar princípios de design visual como ênfase, hierarquia, escala e proporção, unidade e variedade, e os princípios de Gestalt, pode começar a pensar em como implementá-los no design do seu produto.
Ao projetar a interface do usuário do seu produto, lembre-se de que o objetivo final do seu design é criar experiências funcionais para seus usuários. Uma interface de usuário bem projetada melhora a navegação do usuário, podendo aprimorar o fluxo de um usuário pelo produto que você está projetando. Pergunte se os elementos de interface do usuário que você está pensando em usar ajudam a aproximar seus usuários do objetivo deles.
Para ajudar você a manter a usabilidade da sua interface do usuário em mente ao projetar, aqui estão alguns recursos para melhorar seu processo de design e a experiência do usuário.
Saiba mais sobre os princípios fundamentais do designs de interface do usuário de sucesso neste artigo da Adobe: The 4 Golden Rules of UI Design.
O usability.gov tem uma ótima lista dos conceitos básicos de design de interface do usuário, além de uma lista de práticas recomendadas que você deve ter em mente ao projetar: User Interface Design Basics.
Como incluir a navegação em mockups
Nesta parte do curso, você vai refinar seus mockups com base em princípios de design. Há mais uma coisa a considerar ao criar mockups: a navegação que ajudará os usuários a se mover pelo aplicativo.
Projetar seu produto com um sistema de navegação simples e intuitivo é essencial para proporcionar uma boa experiência ao usuário. Pense em um momento em que você tentou usar um aplicativo ou site com navegação confusa ou difícil de seguir. Provavelmente foi uma experiência bem frustrante, certo?
Neste texto, você vai aprender diferentes tipos de navegação e explorar maneiras de criar designs com navegação consistente e eficaz. Então, vamos começar.
Tipos de navegação
Existem alguns tipos comuns de navegação que podem ser usados nos seus próprios designs: barras de navegação, barras de guias, menus de navegação e hubs de navegação. Vamos conhecer cada um deles.
Barra de navegação
As barras de navegação exibem os links de navegação para as páginas mais importantes do produto em uma única barra ao longo de uma área da tela. Dependendo do design, essa barra pode ser horizontal ou vertical. As barras de navegação são fáceis de encontrar e dão aos usuários uma visão clara de todas as áreas do site com que eles podem interagir. Isso ajuda os usuários a chegar exatamente onde querem. Para sites básicos, como um portfólio, é melhor ter uma barra de navegação simples com que os possíveis empregadores possam interagir. No exemplo do design do app Lucere da Googler Lisa, a barra de navegação ocupa a parte superior da tela para facilitar a navegação e deixa claroquais páginas o usuário pode escolher na barra de navegação. Para ver o processo de design da Lisa, acesse o site do portfólio dela.
Este artigo do The Creative Momentum detalha todas as informações importantes que você precisa saber para criar uma barra de navegação mais eficaz: Designing the Ideal Navigation Bar
Barra de guias
As barras de guias são muito semelhantes às barras de navegação, mas exibem os links de página como guias que podem ser ativadas e desativadas. As barras de guias podem ser ícones, texto ou ambos. Quando pensar nos seus próprios designs, saiba que as barras de guias são uma ótima maneira de classificar seu conteúdo e manter o usuário engajado com o conteúdo do site. No exemplo, do design do app Google Clock do Googler Kartik, a barra de guias ocupa a parte superior da tela. Cada opção muda dentro dessa área do aplicativo, mas não altera a tela principal do app. O usuário pode saber em qual guia está com base no realce e sublinhado abaixo do nome e do ícone. Para ver como Kartik criou esse design, acesse o site do portfólio dele.
Menu de navegação
Um menu de navegação é um menu que aparece quando o usuário clica no ícone de três linhas na borda da tela. Às vezes, eles são chamados de menus “ocultos” (porque podem ser escondidos novamente) ou menus de “hambúrguer” (por causa do formato). Esses menus geralmente ficam no canto superior esquerdo ou direito da tela e são fáceis de localizar. Eles também tornam a tela visualmente mais atraente porque “esconder” os detalhes do menu até que o usuário toque para abri-lo. Um menu de navegação é uma ótima maneira de mostrar todos os links que você quer incluir sem precisar ajustá-los aos seus parâmetros de design. Por exemplo, no design do site do portfólio do Googler Andrew, Halo, o menu de navegação fornece links para todas as áreas importantes do site sem ter que se preocupar em encaixar esses nove links no próprio design. Para ver como Andrew criou esse design, acesse o site do portfólio dele.
Aqui está um material da Enginess que explica as vantagens e desvantagens dos menus de navegação e como e quando incluí-los no seu produto: Hidden menus in Mobile and Web Design.
Hub de navegação
Por fim, um hub de navegação exibe uma coleção de links na página inicial do site. Com um hub de navegação, o usuário geralmente precisa voltar à página inicial para mudar de página. Esse formato ajuda a reduzir a quantidade de conteúdo na tela que é exibido de uma só vez. Muitas vezes, há um botão para voltar visível em cada página que leva de volta à página inicial, onde ficam todos os links de navegação. Um hub de navegação pode ser ideal para você caso seus designs não tenham muitas páginas. No entanto, se os seus usuários precisarem realizar várias tarefas e passar de uma página para outra, um hub de navegação pode não ser a melhor opção. No site do portfólio do Googler Tongfang, cada página tem apenas algumas opções de visualização antes que os usuários precisem voltar à página inicial para mudar de página.
Elementos do design de navegação
A navegação organiza as informações para que os usuários possam interagir com outras partes de um produto. O design de navegação é composto por elementos, como botões e ícones, que criam um caminho claro e fácil para os usuários alcançarem um objetivo. Como botões e ícones podem ser usados na navegação?
· Botões: podem ser botões totalmente projetados ou elementos clicáveis, como texto ou ícones. Os botões podem ser animados para parecerem clicáveis ou ter um sublinhado para mostrar que são interativos. 
· Ícones: são como atalhos visuais para o cérebro. Ícones comuns incluem um ícone de envelope que representa uma caixa de entrada de e-mail, um ícone de casa que leva o usuário à página inicial ou o logotipo de um site de mídia social que leva os usuários a uma página dessa mídia social. 
Esses elementos de navegação são considerados affordances. Uma affordance é uma indicação visual do propósito de um objeto dentro de uma interface. Elas “proporcionam” (do inglês “afford”) a você a oportunidade de realizar uma ação, dando dicas sobre o contexto. Affordances são uma parte importante da criação de uma navegação eficaz. Por exemplo, se o seu botão é apenas um texto na página, um usuário precisa de algum tipo de affordance para saber que esse texto é interativo. 
Para mais informações sobre affordances, leia How to use affordances in user interfaces, da UX Planet. 
Agora você sabe um pouco sobre navegação e tem algumas diretrizes para começar a projetar suas interfaces de usuário. Aqui estão mais alguns recursos sobre navegação com informações para ajudar você a decidir qual opção de navegação funciona melhor para seu produto: 
· Para um guia abrangente e aprofundado do mundo da navegação, aqui está um artigo da JustinMind: Navigation design: Almost everything you need to know.
Pode ser difícil decifrar qual design de navegação é ideal para seu produto. Aqui está um artigo da UX Booth que apresenta ótimas diretrizes: The rules for modern navigation.
Revisão semana 2
Finalização: Como aplicar princípios de design visual a mockups
Olá de novo. Você está progredindo muito. Nos vídeos anteriores, você aprendeu mais sobre design visual, que é como um produto ou tecnologia são exibidos para os usuários. Você continuou trabalhando nos seus mockups e aprendeu que os elementos costumam ser organizados em layouts usando métodos como grades, contenção e espaço. Nos próximos vídeos, você vai aprender sobre princípios de design visual que ajudam a melhorar e refinar seus mockups, então prepare-se para continuar iterando seu mockup.
Semana 3 – Compreender os sistemas de design
Boas vindas à semana 3
Olá mais uma vez. Você vem explorando a importância dos elementos e princípios de design visual e como organizar uma página. Você até fez seus próprios modelos e tem feito iterações para melhorá-los.
Nesta parte do curso, você vai explorar o mundo dos sistemas de design e das folhas de adesivos. Primeiro, vou apresentar as partes de um sistema de design, além dos benefícios de usar um sistema de design. Em seguida, vamos ver os sistemas de design de duas empresas que não têm custo para você utilizar em seu próprio trabalho.
Depois, vamos usar uma biblioteca de sistema de design no Figma, e você terá a oportunidade de usar uma em seus modelos. Por fim, vamos aprender como usar as folhas de adesivos e como é possível configurar uma folha de adesivos no Figma.
Na minha opinião, esta será a parte mais empolgante do curso. Eu trabalho no Material Design, que é o sistema de design do Google, então estou ansioso para fazer um tour com você pelos bastidores do meu mundo. Vamos lá.
Introdução aos sistemas de design
Olá, novamente. Neste vídeo, vamos falar sobre os sistemas de design e por que são importantes.
Vamos começar com uma definição.
Um sistema de design é uma série de elementos e diretrizes reutilizáveis ​​que permitem que equipes projetem e desenvolvam um produto seguindo padrões predeterminados.
Você já trabalhou em uma empresa que tinha uma série de diretrizes para diferentes processos? Ficou difícil observar todas as regras? Bem, os sistemas de design ajudam as equipes a combinar todas essas diretrizes diferentes em um só lugar, incluindo informações importantes como diretrizes da marca, componentes, paletas de cores e muito mais.
Por exemplo, um sistema de design descreve regras sobre como usar as cores da marca de sua empresa em seus designs e quais cores vão ser usadas para ícones e tipografia.
Alguns dos elementos visuais incluídos com frequência no sistema de design são cor, iconografia, layout, cópia, animação, elevação, tipografia e ilustração. Como os sistemas de design são configurados?
A maioria dos sistemas de design inclui estilos visuais, diretrizes sobre como aplicá-los, padrões de IU e código de suporte para desenvolvedores. Vamos passar por cada um deles com mais detalhes. Primeiro, estilos visuais. Definir os estilos dos principais elementos de design visual, como tipografia, paletas de cores e iconografia,ajuda as empresas a expressar a marca dela de maneira mais consistente.
Isso também ajuda os designers de UX a melhorar a experiência do usuário.
Em seguida vêm as diretrizes.
É aqui que são definidos os princípios de design, as orientações editoriais e as diretrizes de implementação. Regras claras sobre como certos componentes ou estilos vão ser usados ​​em um produto ajudam os designers a continuarem consistentes. Depois, há padrões de IU. Os padrões de IU incluem elementos como texto, cor ou ícones, componentes, que são compostos de elementos, como um botão ou identificador de formulário, módulos, que são grupos de componentes, como um cabeçalho com um logotipo ou uma barra de navegação no topo da página, e modelos, que são grupos de módulos reunidos para formar páginas.
Além disso, cada uma dessas seções de um sistema de design geralmente inclui notas detalhadas sobre quais elementos, componentes, módulos e modelos são os mais importantes e com que frequência usar cada um.
E, por fim, os sistemas de design ajudam desenvolvedores com o código. Para ajudar desenvolvedores a criar designs corretamente, os sistemas de design incluem o código para criar cada um dos elementos ou componentes fornecidos.
A compilação de todas essas informações em um sistema de design abrangente garante que todos os diferentes elementos em seus designs cheguem ao produto final. Muito bem, agora que você está começando a conhecer os sistemas de design, vamos ver os benefícios dos sistemas de design no próximo vídeo. Vamos continuar.
Benefícios dos sistemas de design
Vamos continuar aprendendo sobre sistemas de design. Dependendo de onde você trabalha, os sistemas de design podem ser muito importantes em seu primeiro emprego como designer de UX. Por quê? Bem, há muitos benefícios dos sistemas de design. Por um lado, eles criam consistência para designers e usuários. Quando os designers estão limitados a um determinado conjunto de elementos, há menos chance de que eles incluam inconsistências no produto ou na marca da empresa.
Por exemplo, imagine que o sistema de design do nosso app para passear com cães instrua os designers a sempre usar botões laranja com bordas arredondadas nos designs. Há dezenas de tons de laranja para escolher, mas decidimos usar a cor FA7B17 em nosso sistema de design. Também decidimos que o texto nesses botões sempre vai usar o tipo de letra SF Pro Display. Ao decidir sobre esses estilos visuais de maneira antecipada e incluí-los no sistema de design, fica mais fácil para os designers criarem os botões e para os usuários notá-los no produto.
Outro benefício dos sistemas de design é que eles ajudam a reforçar a identidade da marca de uma empresa. Os sistemas de design mantêm os elementos de design visual consistentes em um produto e entre produtos. Por exemplo, o sistema de design do Google, chamado Google Material, tem quatro cores primárias: azul, vermelho, amarelo e verde. Se você abrir qualquer app do Google em seu telefone, como o Google Maps ou o Google Drive, notará essas quatro cores nos designs. Também é possível notar que todos os produtos do Google usam a mesma fonte, que chamamos de Google Sans, e costumam ter cantos arredondados em vez de retos. Outro benefício dos sistemas de design é que eles são escalonáveis. O termo escalonável descreve um sistema capaz de manter os níveis de desempenho quando a carga de trabalho aumenta. Isso pode ser bem útil em uma empresa em rápido crescimento, como uma startup. Por exemplo, se houver um sistema de design que já esteja configurado com uma paleta de cores e uma tipografia específicas, pode ser mais fácil iterar no design à medida que o produto evolui. Também é mais fácil integrar novos designers à equipe.
Um quarto benefício dos sistemas de design é que eles economizam tempo e dinheiro aumentando a eficiência de indivíduos e equipes. Quando há um sistema que pode ser aplicado de modo uniforme aos designs, os integrantes de uma equipe têm menos perguntas sobre as especificações do design, então o trabalho pode ser concluído mais rapidamente. Por fim, os sistemas de design ajudam designers e desenvolvedores a trabalharem juntos de maneira mais eficaz. Antes da introdução dos sistemas de design, os projetos geralmente encontravam obstáculos quando os designers entregavam os designs aos desenvolvedores. Esses desafios surgiam porque as equipes de design e desenvolvimento tendiam a operar de maneira independente e cada equipe tinha requisitos diferentes. Ao criar um sistema de design em conjunto, as equipes de design e desenvolvimento estão alinhadas desde o início. Isso permite que um desenvolvedor receba um design e saiba imediatamente qual código precisa ser escrito para dar vida ao design.
É importante saber que nem todas as equipes de design têm um sistema de design totalmente desenvolvido, mas as que têm geralmente acham que isso eleva a qualidade das interações e dos produtos. Além disso, a maneira como você interage com os sistemas de design como um novo designer de UX vai depender do tamanho da empresa para a qual trabalha. Em empresas maiores, você provavelmente vai usar um sistema de design que já foi definido. Mas, se você começar em uma empresa menor, talvez você precise ajudar a criar um novo sistema de design, o que é um grande desafio, mas também uma grande oportunidade de aprendizado. Seja qual for o tamanho da empresa em que você trabalha, é preciso estar sempre pronto para seguir um sistema de design ou contribuir com ideias para melhorar um sistema atual. Isso pode significar tudo, desde atualizar as cores ou a tipografia no guia de estilo até definir componentes e criar modelos. A seguir, vamos ver o sistema de design público do Google, o Material Design, que é usado como modelo para muitas outras organizações. A equipe da qual faço parte trabalha com Material Design, então estou bem ansioso para fazer um tour com você pelo meu mundo.
Sistema de design do Google: Material Design
Olá! É importante que os designers de UX entendam como usar um sistema de design da maneira mais eficiente.
Neste vídeo, vamos explicar as bibliotecas do sistema de design e como elas ajudam designers e desenvolvedores. Também vamos ver o próprio sistema de design do Google, chamado Material Design, para entender como isso funciona em ação. O Material Design é um sistema de design público criado pelo Google e é usado por designers e desenvolvedores do mundo todo para criar diferentes apps e sites para dispositivos móveis. Também temos uma versão privada desse sistema de design que é usada internamente por várias equipes de produto que se chama Google Material.
Atualmente, sou designer de interação da equipe do Material Design aqui no Google. E, como alguém que não estudou UX na faculdade, achei os sistemas de design uma maneira bem útil de aprender sobre o básico do bom design. As diretrizes do sistema me ajudaram a entender os princípios do design da interface de usuário. Algumas empresas não compartilham os sistemas de design com o público, mas o Google decidiu tornar esses recursos públicos para designers, desenvolvedores e engenheiros interagirem e aprenderem com eles. Então você precisa aproveitar a oportunidade.
Tudo pronto para explorar o Material Design comigo e ter uma noção melhor de como tudo isso funciona? Vamos lá. Vou começar acessando o site material.io. Esse site tem várias páginas que podem ser vistas. A página de design tem muitas orientações básicas para designers sobre como usar navegação, cores, sistemas de tipos e muito mais. Recomendo que você leia estes artigos em detalhes para aprimorar suas habilidades de design.
É possível fazer o download de elementos básicos na página de componentes e usá-los em seus próprios designs, como botões e seletores de data. Como dá para notar, há muitos componentes que podem ser utilizados aqui.
Vamos dar uma olhada no componente de botões. Há muitas informações aqui para você ver por conta própria. O site do Material não oferece apenas um botão, ele também mostra como usá-lo de modo efetivo em seuspróprios designs.
A página de desenvolvimento é a próxima. Não vou passar muito tempo nesta página porque ela é destinada a desenvolvedores e contém códigos que eles podem usar. Por fim, vou mostrar a página de recursos. É a minha favorita, porque há muitas informações úteis para novos designers como você. Ela contém links para download de ícones, fontes, um gerador de escala de tipo e muito mais, tudo sem custo. Há até kits de design de referência para o Figma e Adobe XD que permitem usar a biblioteca de componentes e os layouts do Material conforme você cria os próprios designs. Legal. Agora vamos nos aprofundar um pouco mais. Vou mostrar alguns recursos para ajudar você a começar.
Vou acessar a página de design e clicar em “Tema do Material”. Um dos principais motivos pelos quais os designers usam o sistema Material Design é porque é possível personalizá-lo para refletir melhor a marca da sua empresa. Há um tema básico que pode ser usado do jeito que ele é, ou é possível personalizá-lo o quanto você quiser, para que o sistema de design funcione para seu produto ou sua empresa.
Por exemplo, veja como este botão simples foi personalizado.
Lembra no início deste curso, quando você aprendeu sobre iconografia, e eu fiz o download do ícone inicial do Material? Eu fiz o download da biblioteca de ícones do Material, outro ótimo recurso para aproveitar que você não paga nada. Há mais de mil ícones em cinco estilos diferentes para você usar em seus apps.
Certo, mais uma dica. Uma das ações mais legais para fazer no site do Material Design é testar a ferramenta de cores. Para encontrá-la, acesse a guia de recursos, role para baixo até a seção de ferramentas e a ferramenta de cores está aqui, no canto superior direito.
Certo, aqui vamos nós.
Vou começar com um design de página básico que inclui uma barra de apps e um botão de ação flutuante com nossa cor primária aplicada. Posso visualizar tons mais escuros ou claros dessa cor ou testar outras cores. A ferramenta ajustará as cores do texto automaticamente para ter o contraste ideal.
Com nossas diretrizes de acessibilidade em mente, podemos escolher entre texto branco e preto, dependendo do tom da cor de fundo. Há até mesmo um detalhamento da legibilidade do texto com base em texto de tamanho grande em comparação a texto de tamanho normal. Fique à vontade para testar esta ferramenta de cores por conta própria. Ela é bastante útil ao criar modelos.
Como designer de UX iniciante, talvez você trabalhe para uma empresa como o Google, que tem um sistema de design estabelecido, como o Material.
Por outro lado, talvez trabalhe para uma empresa menor ou uma startup, em que precisará ajudar a criar um. Agora que você sabe o que são sistemas de design e já viu uma seção da biblioteca do Material Design do Google, você precisa ter uma ideia clara dos diferentes elementos que os sistemas de design podem incluir. A seguir, vamos ver um sistema de design de outra empresa conhecida: a Shopify. Vejo você em breve!
Sistema de design da Shopify: Polaris
Olá, outra vez. Você acabou de conhecer alguns dos elementos visuais, como cor e texto, no Material Design, o sistema de design público oferecido pelo Google. Neste vídeo, vamos ver o Polaris, o sistema de design oferecido pela empresa de comércio eletrônico Shopify. A Shopify oferece serviços de negócios on-line, como marketing, envio e pagamentos. Este sistema de design foi criado para ajudar designers e desenvolvedores a criar produtos ideais para vendedores que usam a plataforma Shopify. Começarei acessando polaris.shopify.com e vou até a página inicial.
Primeiro, quando começar a rolar para baixo, vou encontrar a seção “Guias”, que oferece conselhos práticos para projetar experiências amigáveis ​​para os clientes. Isso inclui diretrizes para internacionalização, que é como fazer seu produto funcionar em outros idiomas e países e como criar um app para funcionar com a plataforma Shopify. Em seguida, continuo rolando para baixo, e a Shopify destaca quatro partes diferentes desse sistema de design. Vamos ver cada uma rapidamente agora, e vamos entrar em mais detalhes depois no vídeo. A seção de conteúdo oferece ótimas diretrizes sobre como escolher a melhor linguagem para o design. Depois, há a seção de design, em que é possível encontrar todos os elementos visuais, como cor, tipo e ícones, que ajudarão a aprimorar os designs de seus modelos. Depois disso, temos a seção de componentes, que está cheia de componentes de IU para designers e desenvolvedores. Por fim, há a seção de experiências. Ela inclui informações sobre layouts de página, padrões móveis, mensagens de erro comuns e muito mais para atender às diretrizes da Shopify. Continuo rolando a página inicial para baixo e encontro a seção “Novidades”, que é um ótimo lugar para descobrir as atualizações do Polaris.
Por fim, temos a seção de recursos. Aqui, é possível encontrar kits de IU que podem ser usados ​​para seus designs no Figma ou no Sketch. Vamos abordar os kits de IU com mais detalhes mais tarde. Agora que você tem uma ideia de onde tudo está situado no sistema de design, vamos voltar ao topo da página e acessar a página “Princípios básicos” do Polaris. Há uma barra lateral dividida em categorias com base nos principais elementos a serem considerados em seus designs: acessibilidade, internacionalização, arquitetura da informação e mobilidade. Vamos passar um tempo na seção de arquitetura da informação. Como você aprendeu anteriormente no curso, a arquitetura da informação trata da estruturação do conteúdo no design para a melhor interação dos usuários. As diretrizes para a arquitetura da informação incluem uma definição da arquitetura da informação, por que a Shopify valoriza essa arquitetura, os princípios dela e muito mais. Vamos rolar para cima e conferir a seção “Conteúdo” a seguir. Nesta seção, temos as práticas recomendadas para voz e tom, gramática e mecânica e nomenclatura. Há muitas dicas úteis sobre conteúdo e redação, não importa para qual plataforma você está projetando. Em seguida, na seção de linguagem acionável, há informações sobre as palavras que precisamos usar para orientar os usuários a agirem da maneira mais eficiente quando usarem um produto.
Vamos voltar ao topo da página e clicar na seção “Design”. Muitos dos elementos de design visual que abordamos anteriormente estão aqui, como cor, tipografia e sons. Também é possível explorar alguns dos elementos mais técnicos, como estados de interação e espaçamento. Esse é um tour rápido pelo sistema de design da Shopify, o Polaris. Agora você tem dois sistemas de design aos quais pode fazer referência enquanto continua a criar seus próprios designs. Há muitos outros sistemas de design conhecidos por aí, então continue explorando. A seguir, vamos abordar as folhas de adesivos, que são uma coleção de diferentes elementos e componentes que entram no seu sistema de design. Vejo você lá!
Teste sistemas de design conhecidos
Você aprendeu que os sistemas de design são uma série de elementos e diretrizes reutilizáveis ​​que permitem que as equipes projetem e desenvolvam um produto seguindo padrões predeterminados. Como designer de UX, você utilizará sistemas de design o tempo todo para melhorar a velocidade e a consistência do seu trabalho. Especialmente quando você é iniciante no campo, os sistemas de design podem ajudar a entender melhor as práticas recomendadas de design e podem melhorar muito a qualidade do seu próprio trabalho de design. 
Uma maneira de testar os sistemas de design é verificar alguns exemplos conhecidos que você provavelmente já viu ao usar um app ou site, como:
· Material Design do Google
· Sistema de design Polaris da Shopify
· Diretrizes para interface humana da Apple
· Sistema de design fluente da Microsoft
· Sistema de design do AirBnb
· U.S. Web Design System, um sistema de design para o governo federal dos EUA
Analise os detalhes desses sistemas de design e anote os componentes que quiser aproveitar em seus próprios designs!
Criar uma folha de adesivos
Criar uma folha de adesivosno Figma
Olá, outra vez. Até agora, você aprendeu sobre os conceitos básicos dos sistemas de design. Você também explorou os sistemas de design do Google e da Shopify que podem ser utilizados em seu próprio trabalho. Neste vídeo, vamos ver as folhas de adesivos, também conhecidas como kits de design. As folhas de adesivos são uma coleção de elementos e componentes que fazem parte do sistema de design.
O que exatamente isso significa? Veja aqui um exemplo de uma folha de adesivos para o app para passear com cães.
Observe que estou incluindo cores, botões, ícones e barras de navegação que uso com frequência em meus designs. Documentar cuidadosamente os elementos e componentes evita que eu cometa erros ou tenha inconsistências em meus designs.
Por que essas folhas de adesivos têm nomes? Porque é possível “descolar” metaforicamente cada elemento para colar em seu design com um simples comando de copiar e colar. Legal, né?
Pense em quando você projetou o primeiro rascunho do modelo. Talvez você tenha reutilizado certos elementos, como texto, cores ou ícones, e componentes, como botões. Esses são os tipos de itens que alguém colocaria em uma folha de adesivos.
Como você aprendeu anteriormente, um componente é composto por elementos. Por exemplo, um botão é um componente composto por elementos como texto, cor e forma. Você já agrupou itens no Figma ou no PowerPoint para poder copiar e colar todo o grupo de itens? Isso é basicamente um componente. No Figma, os componentes são reutilizáveis. O Figma permite identificar o primeiro componente criado como o componente e referir-se a todas as cópias desse componente como instâncias dele.
Para facilitar o acompanhamento de onde estão meus componentes, optei por colocá-los na minha folha de adesivos.
Agora, sempre que eu fizer uma alteração no componente, as instâncias também refletirão a alteração. Por exemplo, se eu alterar a cor do botão principal de laranja para azul na folha de adesivos, as instâncias vinculadas ao meu componente principal também serão atualizadas.
Isso me poupa de ter que atualizar vários botões sempre que faço uma pequena alteração no design.
Além disso, aumenta a consistência sobre a qual tanto falamos.
Como designer de UX iniciante, talvez você queira fazer sua própria folha de adesivos.
A boa notícia é que fazer uma é bem fácil. Para fazer uma folha de adesivos, crie um quadro em branco e copie e cole os elementos e componentes usados ​​com frequência em design na folha de adesivos.
Por exemplo, no app para passear com cães, eu peguei botões, menus suspensos, ícones e um perfil para os passeadores. Também preciso mostrar os diferentes estados de cada elemento ou componente.
Lembre-se, os estados são representações visuais que comunicam o status de um componente ou elemento interativo.
Observe como há uma versão branca e uma laranja do ícone de comentários?
Essa diferença de cor representa os estados inativo e ativo. As folhas de adesivos serão úteis para outros designers de UX que trabalham nos designs e para engenheiros que precisam criar cada um dos componentes usando código.
Por exemplo, se você começar a trabalhar com outro designer em seu projeto, ter uma folha de adesivos como um guia de estilo simples para consultar pode facilitar muito a comunicação entre vocês dois. E à medida que sua equipe de design aumenta, as folhas de adesivos serão úteis para manter os designs consistentes em toda a empresa. Dessa forma, você não vai criar sem querer um botão retangular com cantos retos quando um colega de equipe usar cantos arredondados. Além disso, se um designer se juntar à equipe quando você estiver no meio do processo de design, ele poderá começar imediatamente com os elementos de design que você já atribuiu ao projeto. A lição aqui é que os designers usam folhas de adesivos para ajudar a acelerar o trabalho e evitar retrabalho. E é isso! Agora você sabe por que as folhas de adesivos são tão úteis para designers de UX e como fazer uma folha de adesivos para seu próprio design.
Atividade: Crie uma folha de adesivos para os designs de projetos de porfólio
Introdução da atividade
Esta atividade ajudará você a criar uma folha de adesivos de trabalho, também conhecida como kit de design, para o seu projeto de portfólio no Figma. Sua folha de adesivos precisa listar todos os componentes e elementos mais usados ​​em seu design até agora. Por exemplo, sua folha de adesivos precisa incluir todos os itens de interface do usuário a seguir:
· Componentes: Componentes de interface do usuário reutilizáveis, como botões, menus e cartões.
· Tipografia: Elementos tipográficos, incluindo fontes e famílias de fontes.
· Cor: Opções de cores, incluindo uma paleta geral e cores de componentes específicos.
· Iconografia: Ícones que representam ações recorrentes ou opções de navegação com as quais um usuário pode interagir.
Para fazer isso, você vai identificar elementos relevantes e desenvolver componentes para usar em seu design. Componentes são elementos de IU que podem ser usados ​​em projetos. Os componentes são feitos de vários tipos de elementos, como botões, texto, formas e cores. Depois de criar seus componentes e identificar outros elementos, eles serão organizados e adicionados à folha de adesivos.
Depois de concluir esta atividade, você poderá comparar seu trabalho com um exemplo completo no próximo item do curso.
Instruções passo a passo
Etapa 1: Abrir seu projeto no Figma
Acesse o site do Figma ou inicie o app para computador Figma. Faça login, clique em Recentes, na barra de navegação superior esquerda, e depois clique em seu projeto para abri-lo.
Etapa 2: Criar uma página nova no arquivo do Figma
Para ajudar a manter tudo organizado no arquivo de projeto, separe diferentes partes do projeto em diferentes páginas Para criar uma página nova, acesse a seção Páginas no Figma, no canto superior esquerdo da tela. Clique no botão +. Digite o nome Folha de adesivos nesta página nova e pressione Enter ou clique fora do campo de entrada de texto.
Etapa 3: Criar um quadro novo
Crie um quadro novo para atuar como uma tela para a folha de adesivos. Para criar um quadro novo, selecione Quadro no menu Ferramentas de região no canto superior esquerdo da tela no Figma. Também é possível usar o atalho de teclado cmd+A (no Mac) ou ctrl+A no PC). Selecione o quadro com o identificador Desktop. Isso dará a você muito espaço para criar a folha de adesivos.
Etapa 4: Selecionar os elementos de IU da folha de adesivos
Antes de criar uma folha de adesivos, é preciso saber o que vai colocar nela. Há alguns elementos básicos para começar a criar agora e usar em seu app.
Tipografia
Selecione uma fonte que se alinhe com o tom e o estilo da marca do seu produto. Por exemplo, se você estiver criando um app para crianças, fontes arredondadas podem ser muito atraentes e divertidas. Se você quiser que a fonte fique mais séria ou profissional, escolha algo mais simples.
Veja aqui um exemplo de um app que criamos voltado para pais que querem envolver seus pré-adolescentes e adolescentes na arte. O nome do app é GeoShapes. Para o app, nosso designer de UX escolheu a fonte Yaldevi Colombo. Veja aqui um exemplo de como essa fonte seria implementada no app:
Acima, você notará os diferentes pesos de fonte, com as informações mais essenciais em negrito e as menos importantes representadas como um peso mais leve. Teste fontes diferentes no Figma e decida o que cada uma delas comunica. Você olha para fontes a vida inteira, então já é especialista nisso! Ao navegar pelas fontes no Figma, também é possível personalizar suas escolhas alterando a cor, o espaçamento, a opacidade e muito mais.
Cor
A cor é parte integrante da sua marca e pode evocar emoção nos usuários. A cor, como a tipografia, é algo que você já observa a vida inteira. É uma ferramenta que pode ser usada para inspirar emoção nos usuários. Para saber mais sobre a teoria das cores e como a psicologia das cores pode afetar os usuários, consulte este artigo do Medium: O guia definitivo de UX para design de cores.
Veja aquio esquema de cores que escolhemos para o app GeoShapes:
As cores principais ou primárias do app são vermelho, roxo e verde. As cores muitas vezes têm significados implícitos. Por exemplo, vermelho representa paixão, roxo representa criatividade e originalidade e verde representa crescimento e equilíbrio. Todas essas características são importantes para cultivar o amor pela arte. Escolhemos um conjunto forte de cores primárias, cores secundárias menos vibrantes que as primárias e uma escala de cinza com um toque dessas cores infundido nelas.
Pense na teoria por trás das cores que você escolhe e como elas representarão o app que você está projetando. Depois de selecionar as cores, crie formas e as preencha com essas cores para criar amostras que você acha que combinam com o que projetou até agora. Mantenha essas formas na página como referência enquanto você projeta.
Botões
Os estilos dos botões precisam refletir o estilo da sua marca tanto quanto a escolha da fonte e das cores. Ao começar a definir o estilo que o app vai usar, é possível alternar entre os tipos de botão para ver qual você prefere.
Ao projetar seus botões, lembre-se de que botões, como hiperlinks, têm uma aparência instantaneamente reconhecível. Eles geralmente são uma forma de contorno em um fundo branco ou uma forma com um preenchimento sólido.
Para criar um botão no Figma:
· No seu quadro, desenhe um retângulo usando a ferramenta Retângulo no menu do canto superior esquerdo (a tecla “R” é um atalho para isso). Arraste o retângulo até chegar às dimensões pretendidas para o botão.
· Usando o botão Texto no canto superior esquerdo, adicione uma caixa de texto na parte superior do botão.
· Centralize o texto e altere o tamanho usando o painel Design à direita de Tela.
· Clique de volta na camada da forma do seu botão no painel Camada.
· Suavize a forma do botão na seção Propriedades do painel Design alterando o raio de cada canto. Quanto maior o número, mais arredondados serão os cantos.
Veja como projetamos os botões do app GeoShapes.
Os botões estão nas cores secundárias da marca, e os cantos dos botões são mais arredondados do que pontiagudos. Cada um desses cantos é definido em 5. Os botões em tons de cinza têm sombras definidas em 25% com um desfoque de 4.
Como salvar componentes
Agora que você criou a tipografia, a cor e os botões do seu app, é possível começar a salvar os recursos como componentes. 
À medida que os usuários interagem com os produtos que você cria, cada elemento em seu design precisa corresponder aos outros que você criou. Uma maneira fácil de garantir que seus elementos tenham a mesma aparência é tornar componentes todos os elementos que você criar.
Ao documentar seus elementos de design como componentes, você melhora a consistência dos designs e economiza um tempo valioso enquanto continua projetando o produto.
Primeiro, verifique se você nomeou cada recurso no painel Camada. Isso é bem importante para recursos com poucas peças, como botões ou amostras de cores.
Em seguida, selecione seu recurso no painel Camada ou em Tela.
Em seguida, clique com o botão direito do mouse nesse recurso e clique em Criar componente ou selecione o ícone com quatro diamantes (mostrado abaixo) na barra superior.
Depois de salvar os recursos como componentes, todas as atualizações do componente serão alteradas automaticamente em todos os arquivos em que o recurso for usado, chamado de instância. Em outras palavras, o componente representa a aparência original, enquanto a instância segue todas as alterações feitas no componente.
Estados e variantes
Algo a ter em mente ao projetar é que alguns dos componentes nem sempre terão a mesma aparência. Os botões usados ​​na navegação GeoShape têm duas versões diferentes na imagem acima. Isso é conhecido como o “estado” do componente. Estados são representações visuais do status de um componente específico ou elemento interativo em seus designs. Por exemplo, é possível incluir uma versão ativa e uma inativa de cada botão em nosso app. Estes são estados.
É importante também incluir esses vários estados em suas folhas de adesivos. Felizmente, o Figma já incluiu esse processo na plataforma. Chamam-se “variantes”. Variantes permitem agrupar e organizar componentes semelhantes em um único contêiner. Um exemplo disso é o estado marcado e desmarcado da caixa de seleção na folha de adesivos GeoShapes acima. 
Fazer variantes ajuda a organizar os componentes e melhorar a experiência de design do produto para você e seus colegas designers. Você quer entrar no âmago da questão da criação de variantes para seus botões interativos? O Figma tem um guia que mostra a melhor maneira de criar variantes para os estados do seu botão e a melhor maneira de usá-los. O nome do artigo é Criar e usar variantes.
Etapa 5: Organizar elementos da IU na folha de adesivos
Agora que você selecionou os elementos da IU que incluirá em sua folha de adesivos, é hora de começar a organizá-los.
Comece escolhendo uma fonte para usar como cabeçalho para os itens na folha de adesivos.
Use uma fonte diferente das que você está usando em seu design para evitar confusão. Um tipo de letra padrão como Helvetica, Roboto ou Arial funcionará bem, por exemplo. O uso de um desses tipos de letra torna mais fácil para quem visualiza diferenciar entre um identificador de categoria em sua folha de adesivos em oposição a um elemento de IU do seu projeto.
Comece a organizar os itens em sua folha de adesivos por categoria. Mantenha todos os botões juntos, todos os ícones juntos etc. Fique de olho no espaçamento entre os elementos na folha de adesivos. Sinta-se à vontade para usar uma grade, se isso ajudar a manter tudo alinhado. Sem manter o espaçamento alinhado, tudo pode começar a ficar confuso rapidamente.
Etapa 6: (Opcional) Fazer referência a uma folha de adesivos preenchida
Pode ser útil revisar o kit de design de referência de materiais do Figma, caso ainda não tenha feito isso. Trata-se de um exemplo de um kit de design completo e uma referência útil para formatar a folha de adesivos. Por exemplo, na página Tema do Material, você tem um excelente exemplo de como mostrar a tipografia em um design:
Etapa 7: Salvar o trabalho
Ao realizar essas atividades, lembre-se de:
· Tirar fotos de seu progresso e salvá-las. Podem ser fotos dos esboços, de diferentes etapas da atividade, de sessões de discussão de ideias e até fotos de você trabalhando.
· Salvar todo o seu trabalho no computador, em um disco rígido ou em uma pasta do Google Drive, para garantir que mais tarde terá acesso a todos os recursos necessários do curso para criar seu portfólio.
Benefícios a longo prazo das folhas de adesivos
As folhas de adesivos ajudam os designers de UX a trabalhar de maneira mais rápida e inteligente. De fontes a botões, logotipos a animações e muito mais, é possível coletar todos os principais elementos e componentes dos seus designs e disponibilizá-los para uso a qualquer momento.
As folhas de adesivos também facilitam o processo de colaboração se você estiver trabalhando como parte de uma equipe grande. Quando você compartilha seus designs com os desenvolvedores, uma folha de adesivos esclarece o processo de codificação à medida que eles funcionam em cada componente. A folha de adesivos também servirá como um guia de estilo para colegas designers e também os ajudará a continuar consistentes. Por exemplo, se os botões de um produto tiverem bordas arredondadas, a equipe saberá que não precisa criar botões retangulares.
Descubra mais
Se você tem curiosidade sobre como os componentes podem ser usados ​​e quais são as práticas recomendadas, veja aqui um artigo da Figma para iniciar sua pesquisa: Quando começar a criar componentes para sistemas de design.
Há muitos tipos diferentes de botões que podem ser usados em seus designs. Nesta demonstração do Medium , guiamos você passo a passo pelos estilos de botão e a lógica por trás da escolha de um tipo de botão específico: Como criar botões no Figma.
Veja aqui outro artigo do Medium com algumas dicas de especialistassobre como criar e usar componentes em sua folha de adesivos: Dez dicas sobre como usar componentes no Figma.
Tem curiosidade sobre folhas de adesivos e componentes reais feitos por Googlers? Confira alguns aqui:
Pocket de Dane, no cabeçalho “Sistema de design” (role para baixo até a página 08, “ITERAÇÃO DO PROCESSO”)
Thrive de Lisa, em “Ícones” e “Sistema de design”
Aqui temos um exemplar completo com uma explicação sobre por que ele atende às expectativas da atividade anterior. 
Exemplo
Avaliação do exemplar
No exemplar, identificamos tipos semelhantes de elementos de IU que são categorizados e agrupados: cores, tipografia, botões etc. Quando houver muitas variantes de um item (como um botão ativo ou inativo), todas as versões serão incluídas. Por fim, o exemplar identifica todos os elementos individuais que têm um uso específico, como a fonte do cabeçalho 1 em oposição à fonte dos botões. 
Agora, compare o exemplar acima com sua entrega concluída. Avalie seu trabalho com base em cada um dos critérios usados aqui para analisar o exemplar. 
O que você fez bem? Em que você pode melhorar? Tenha esse feedback em mente conforme avança no curso.
Usar sistemas de design
Usar uma biblioteca de sistema de design no Figma
Olá, outra vez. Você aprendeu o que é um sistema de design e viu alguns exemplos de sistemas de design do Google e Shopify. Agora vou ensinar a usar elementos e componentes de sistemas de design atuais em seus próprios modelos. Em seu primeiro trabalho como designer de UX, você provavelmente vai usar um sistema de design para criar seu produto mais rapidamente. É possível usar um sistema de design criado internamente em sua empresa ou um sistema de design público como os usados ​​no Google, na Microsoft ou na Apple. De qualquer forma, você precisa saber como usar as especificações e diretrizes de um sistema de design atual para criar partes de seus próprios modelos. A incorporação de um sistema de design em seu trabalho pode assumir várias formas. É possível incluir componentes de um sistema de design atual e apenas ajustar elementos como cores ou tipo para combinar com a marca do seu design. Ou é possível misturar alguns de seus próprios componentes com alguns componentes extraídos de um sistema de design. Você já viu uma visão geral de como é o Material, mas vamos nos aprofundar nisso.
Vamos usar o sistema do Material Design no Figma para escolher alguns elementos para uma versão alternativa de um app para passear com cães. Lembre-se de que há muito o que explorar quando se trata do Material Design. Poderíamos passar um curso inteiro sobre este tema. Mas, neste vídeo, falaremos apenas sobre alguns assuntos selecionados para ajudar você a começar. Vou começar com o kit de IU do sistema do Material Design no Figma e iniciar um novo arquivo usando o kit. Haverá um link para este kit nos textos do curso.
Aqui vamos nós. Cheguei na capa e vou acessar a página de temas do Material. Há muitos estilos predefinidos úteis aqui que posso personalizar para itens como tipografia, cor, elevação e estados. Já falamos sobre tipografia e cor antes, e agora vou explicar brevemente elevação e estados. Elevação é um sistema do Material Design para adicionar camadas ou profundidade à sua interface. O plano de fundo da tela geralmente está na elevação zero, enquanto um botão pode estar na elevação quatro. Ele parece estar decolando da tela. Recursos importantes, como navegação e alertas, têm maior elevação para que sejam visíveis para os usuários. Esta é um dos meus recursos favoritos do Material Design. Eu recomendo que você leia essas diretrizes. Em seguida, temos os estados. Os estados são representações visuais que informam o status de um componente ou elemento interativo. Por exemplo, em nosso app para passear com cães, imagine como seria um botão quando um usuário tocasse ou pressionasse nele. Vamos precisar incluir estados para comunicar o status do botão ao usuário. Os componentes do Material usam uma sobreposição de ondulação para fornecer aos usuários feedback de que eles pressionaram algo interativo. Há muitas abordagens para os estados de interação, e o Material Design pode ser uma referência útil quando você toma suas próprias decisões.
Isso é tudo para a página de temas do Material. Você também notará uma página de folha de adesivos e uma de componentes, sobre as quais falaremos com mais detalhes em breve. Agora, tudo está prestes a ficar interessante. Vou escolher alguns elementos e componentes do Material Design para criar rapidamente uma versão alternativa da página inicial do app para passear com cães.
Para começar, vou criar uma página nova e desenhar um quadro para um telefone. Para fazer isso, vou clicar na ferramenta de moldura no canto superior esquerdo. O painel “Design” no lado direito vai mostrar as opções de quadro predefinidas. Vou selecionar esta. Excelente. Agora que meu telefone está alinhado, preciso adicionar uma barra de navegação na parte superior da tela. Vamos para a página da folha de adesivos. Vou para o quadro de barras de apps e seleciono esta barra de apps. Vou copiá-la pressionando "Control" e "C" ou "Command" e "C". Em seguida, voltarei ao Material Design para a página do app novo na barra lateral esquerda. Vou pressionar "Control" e "V" ou "Command" e "V" para colá-la em nosso quadro móvel novo. Ótimo, parece que foi colado automaticamente no meio do meu quadro. Vou usar o botão de alinhamento superior no painel do lado direito para mover para o topo da tela.
Em seguida, vamos adicionar uma barra de navegação inferior. Em vez de voltar para a folha de adesivos, também posso adicionar isso pelo painel de recursos no lado esquerdo da tela, já que um componente do Figma foi feito. Se eu expandir o item de navegação inferior, vou ver que há algumas opções disponíveis. Acho que esta com três itens vai funcionar. Vou arrastá-la do painel para a moldura do nosso telefone. Ela foi colada de novo no meio do quadro móvel. Posso pressionar o botão "Alinhar ao fundo" ou simplesmente arrastar esse componente para a parte inferior da tela. Esses itens de espaço reservado para favoritos, pesquisa e informações precisam ser atualizados para corresponder ao meu app para passear com cães. Posso manter o ícone de favoritos e usá-lo para uma lista nova de passeadores de cães confiáveis. Mas tenho que substituir as seções de pesquisa e informações por ícones e identificadores que correspondam ao meu próprio design. Como um ícone “Página Inicial” para a página inicial e um ícone “Agenda” para agendar um passeador de cães. A ideia por trás desses ícones padrão do Material Design é oferecer um layout que possa ser ajustado como você quiser. É possível trocar facilmente os ícones e o texto para atender às necessidades do produto que você está projetando.
Para trocar os ícones, vou separar a navegação inferior que adicionamos ao nosso quadro do componente principal do Material. Para fazer isso, vou clicar com o botão direito do mouse na navegação inferior e selecionar a opção “Desanexar instância” no menu. Em seguida, vou selecionar o ícone “Pesquisar” e repetir o processo para desanexá-lo. Agora é hora de adicionar os ícones novos. Felizmente, tenho os três ícones que precisamos para o app para passear com cães já baixados no meu computador para o Material Design. Aqui posso adicionar rapidamente o ícone “Página Inicial”, por exemplo, para representar a página inicial. Também vou querer trocar a descrição do texto abaixo do ícone. Antes era “pesquisa” e agora, com meu novo ícone, quero dizer “página inicial”. Para esta demonstração, vou adicionar o ícone “Página Inicial”, mas é possível imaginar como isso funcionaria para atualizar os outros dois ícones para também atender às minhas necessidades de design.
Mais uma coisa: talvez não dê para saber, mas este ícone novo é um verdadeiro preto e é mais escuro que os dois ícones originais. Vamos verificar de que cor são os outros dois ícones, para que possamos fazer com que este combine. Se eu clicar duas vezes em um dos ícones originais,vejo a seleção de cores no painel do lado direito. Parece que o ícone original é O3 colorido em ênfase primária/média. Talvez você esteja se perguntando por que a cor tem um nome em vez de um código hexadecimal. Isso ocorre porque estou usando um estilo de cor salvo da biblioteca de cores do Material Design. Agora vou voltar ao meu novo ícone “Página Inicial”, quando clico nele, vejo no painel do lado direito que a cor do meu ícone novo é 000000. Preciso atualizá-la para 03 na ênfase primária/média. Bom, assim é melhor. Outro item que vou precisar para este design é um grande botão de call-to-action. Este é o botão no qual quero que os usuários cliquem para começar a agendar um passeio para cães. Vou voltar à página “Componentes” e procurar um botão.
Vamos experimentar um componente exclusivo do Material Design, o botão de ação flutuante, ou FAB. Esses botões ficam em uma posição fixa na tela para que fiquem sempre visíveis e facilmente acessíveis em um telefone. Este botão chamado “2-extended” pode funcionar. Vamos testar na nossa página.
Vamos alterar o texto deste espaço reservado de "criar" para "agendar", para corresponder ao nosso app. O texto é maior do que o contêiner agora, vou deixar este botão mais longo para corresponder ao nosso identificador. Vou alterar a largura aqui de 125 para 146.
Vamos colocar nosso FAB estendido mais perto da parte inferior da tela para que os usuários possam alcançá-lo facilmente com o polegar. Vou arrastar o botão para baixo até que a parte inferior esteja a 96 pixels da parte de baixo do quadro. O que mais? Como dá possível imaginar, vou adicionar muito mais a este design. Ainda preciso incluir muitos itens, como meu logotipo, a imagem de um cachorro e uma lista de passeadores de cães disponíveis. Também vou precisar alterar a cor de cada um desses elementos e componentes que você aprendeu antes. Por enquanto é isso. Não é um modelo bonito, mas é um começo. Lembre-se de que o kit do Material do Google é apenas um dos muitos. Dá para testar kits de todos os tipos de empresas e encontrar um que funcione melhor para utilizar em seus próprios modelos. Ao praticar o uso de componentes de um sistema de design em seus próprios modelos, você ganhará velocidade e seus designs vão sempre ficar cada vez melhores. Boa sorte e divirta-se.
Inspire-se nos sistemas de design
Como designer de UX, criar visuais impressionantes é crucial para atrair usuários, manter a consistência entre os produtos e estabelecer uma marca. Por exemplo, pense no frasco de xampu ou sabão em pó que você usa. Certos elementos visuais tornam a marca desse produto instantaneamente reconhecível e podem até ter feito você comprá-lo. O design da garrafa pode ter uma fonte exclusiva, uma paleta de cores distinta ou um ícone inteligente. As empresas trabalham duro para criar designs inteligentes e um sistema de design completo que possa ser aplicado a todos os produtos!
Lembre-se, um sistema de design é uma série de elementos reutilizáveis ​​que permitem que as equipes projetem e desenvolvam um produto seguindo padrões predeterminados. Um sistema de design é a base visual dos produtos de uma empresa e é fundamental para atrair usuários. Para designers de UX, os sistemas de design são uma ótima maneira de manter a consistência em um design e entre produtos.
Veja abaixo a imagem de um sistema de design básico para uma revista de artes fictícia, a Artniche. O sistema de design descreve os elementos de design usados ​​pela Artniche, como tipografia, cores e botões. Em outras palavras, essa tipografia e essa paleta de cores são usadas no app e no site da revista para garantir consistência e facilitar o design.
O número de elementos incluídos em seu sistema de design depende de você e da meta do seu produto. O importante a lembrar é que criar um sistema para descrever os elementos de design que você usa é a melhor maneira de criar consistência entre marca e produto e economiza muito tempo dos designers. O sistema de design molda o mundo por trás do produto!
Exemplos reais de sistemas de design
O sistema de design do Google, chamado Material Design, é aplicado a todos os produtos, da Pesquisa Google ao Gmail e ao Android. O material está disponível a todos e sem custo para você usar em seus designs. Na verdade, é possível fazer o download do kit de IU de referência para usar em seus próprios designs no Figma.
Para encontrar e importar sistemas de design no Figma, acesse a seção “Comunidade” e veja as opções. Ou procure um sistema de design de uma marca que você goste. Quando encontrar um que goste, clique em Duplicar para salvar uma cópia na pasta “Rascunhos”. É possível utilizar elementos e componentes desse sistema de design rapidamente! Na seção “Comunidade”, é possível conferir ou fazer o download de alguns kits de IU:
· Google Material Design
· Shopify Polaris
· Microsoft Fluent
· Salesforce Lightning
· Atlassian Design System
· Uber Base Web
É possível usar esses sistemas de design como inspiração para seu próprio trabalho. Portanto, anote os elementos que se destacam em cada um deles.
Apresentar um sistema de design em seu portfólio
Depois de criar um sistema de design para o produto que você está projetando neste curso, convém incluí-lo em seu portfólio. Por exemplo, Dane, designer de UX do Google, ajudou a criar um app chamado Pocket para um projeto de classe. No estudo de caso do portfólio de Dane, ele incluiu detalhes sobre o sistema de design do produto, como tipografia, iconografia e botões.
Para seu próprio portfólio, é preciso documentar suas escolhas de design em cada estudo de caso. Incluir um sistema de design é uma ótima maneira de destacar suas escolhas criativas e enriquecer seu portfólio, quer você crie um sistema de design abrangente com vários elementos, quer simplesmente descreva os ícones e as cores que usa com frequência.
Se você quiser saber ainda mais, confira este recurso do DesignerUp sobre Os dez melhores sistemas de design e como aprender com eles (e roubá-los).
Aprenda com o Figma – Use uma biblioteca de sistema de design
É hora de aprender a criar seu próprio sistema de design do zero. Isso pode parecer uma tarefa desgastante, mas não tenha medo, porque os especialistas do Figma estão aqui para ajudar! 
Esta série de vídeos com cinco partes ajudará você a entender como configurar um sistema de design no Figma: 
· Vídeo 1 – Princípios básicos (55 minutos), que vai ajudar você a começar a projetar um sistema de design do zero, incluindo tipografia e cores. 
· Vídeo 2 – Componentes (55 minutos), em que você fará inclusões em seu sistema de design criando componentes básicos e organizando-os com páginas, quadros, nomes e descrições.
· Vídeo 3 – Continuação sobre componentes (55 minutos), que vai apresentar componentes mais complexos, como cartões, objetos de mídia, diálogos, navegações e formulários, para incluir em seu sistema de design.
· Vídeo 4 - Testes (57 minutos), em que você vai verificar se sua biblioteca de componentes é robusta o suficiente em cenários reais.
· Vídeo 5 – Documentação (61 minutos), que mostra as práticas recomendadas para documentar seu sistema de design usando o Figma e outras ferramentas.
Esses vídeos são longos, mas o que você aprende vale o investimento de tempo!
Shabi – Considere tecnologias assistivas ao trabalhar em sistemas de design
Olá, meu nome é Shabi. Sou designer de interação no Google. Eu projeto experiências digitais para pessoas como você, entendendo suas necessidades e as de pessoas com deficiência. Como eu trabalho em sistemas de design, trabalho no nível de componentes, então preciso mesmo entender como as pessoas com deficiência interagem com botões e outros recursos em sua interface. Para fazer isso, você precisa mesmo entender as tecnologias assistivas que eles estão usando e realmente se envolver com pessoas com deficiência. A tecnologia assistiva ajuda mesmo a aumentar a capacidade de uma pessoa criando uma interação entre sua interface e a tecnologia que ela está usando. Então, para fundamentar um pouco isso, há algo chamadoleitor de tela, que normalmente ajuda alguém com visão limitada, e o que ele faz é ler em voz alta o conteúdo na tela, e também pode ser ler em voz alta os diferentes tipos de elementos interativos. Quando alguém está usando um leitor de tela, pode ouvir: "botão 'Cancelar'", e isso ajudará a pessoa a entender a finalidade ou a função desse elemento interativo. O conselho que eu daria para quem tem interesse em projetar para acessibilidade é entrar em contato com suas comunidades locais. Há vários lares de apoio independentes por aí. Você tem amigos e familiares que podem ou não ter uma deficiência, e trata-se de iniciar a conversa e mostrar que você se importa se colocando à disposição. Foi exatamente isso que fiz quando ainda estava aprendendo e tentando criar meus próprios projetos para pessoas com deficiência.
Acho que algumas das frustrações que eu tenho ao projetar para acessibilidade, especialmente quando isso é um esforço colaborativo, é que muitas vezes a acessibilidade é uma solução de retalhos. É possível pensar nisso no final porque seu produto precisa ser lançado e, portanto, você quer atender a determinadas diretrizes esperadas. No entanto, não precisa ser assim. É preciso considerar as pessoas com deficiência desde o início porque, muitas vezes quando você projeta com elas em mente primeiro, estende essa solução para muito mais pessoas. A acessibilidade é importante porque cria uma experiência equitativa para quem normalmente não teria uma.
Revisão da semana 3
Finalização: Como explorar sistemas de design
Você conseguiu. Você concluiu outra parte do curso. Como foi para você? Vamos recapitular rapidamente tudo o que você acabou de aprender. Você deu seu primeiro passo no mundo dos sistemas de design. Você também aprendeu sobre os benefícios de usar um sistema de design, como criar consistência para designers e usuários, reforçar a identidade da marca de uma empresa e economizar tempo e dinheiro. Depois, você explorou os sistemas de design de duas empresas, Google e Shopify. Você viu a grande variedade de elementos, componentes, temas e guias que esses sistemas oferecem sem custo. Em seguida, usou uma biblioteca de sistema de design no Figma. Por fim, aprendeu a usar e configurar uma folha de adesivos. A seguir, vamos falar sobre feedback. Como designer de UX, é importante saber dar e receber críticas. Esse feedback é uma parte fundamental para melhorar seus designs. Nos encontramos lá.
Dar e Receber Feedbacks de design
Boas vindas à Semana 4
Olá! Até agora, você aprendeu como criar e refinar modelos e como os sistemas de design podem ajudar você a tomar decisões de design mais consistentes. Nesta parte do curso, vamos testar o ato de dar e receber feedbacks. Como designer de UX, espera-se que você dê e receba muito feedback, por isso é importante dominar essa habilidade. Em seguida, você aprenderá sobre as sessões de crítica de design, nas quais os designers de UX pedem feedbacks sobre o próprio trabalho para os integrantes da equipe. Você também terá a chance de assistir parte de uma sessão de crítica de design simulada em ação. Por fim, você terá uma ideia de como pode transformar o feedback da sessão de crítica de design em ações concretas. Você vai usar essas ações para melhorar seus designs. Vou até mostrar como fiz iterações no app para passear com cães com base no feedback que recebi. Vamos começar.
Dar e receber feedbacks como designer de UX
Olá mais uma vez. Neste vídeo, você aprenderá a dar e receber feedbacks sobre seus designs. Sempre que mostrar um trabalho, você precisa estar pronto para receber feedback dos integrantes da equipe. Feedback significa pedir ou receber ideias sobre o que está funcionando ou não. Um bom feedback ajuda a criar novas perguntas ou ideias sobre as quais você talvez não tenha pensado antes. Isso pode ajudar você a encontrar maneiras de melhorar o trabalho. No início do programa de certificação, você aprendeu sobre autorreflexão. É importante que os designers de UX entendam os valores pessoais que têm e todos os vieses que possam ter devido à influência que isso pode ter nos designs. Da mesma forma, é uma boa ideia refletir sobre quanto feedback você está dando e recebendo em cada etapa de um projeto. Você pode se perguntar: "Estou à vontade para compartilhar minhas opiniões sobre o projeto de outro designer? Entro em contato regularmente com os integrantes da equipe para receber feedback sobre meus designs?". Se a resposta for sim para essas duas perguntas, já temos um ótimo começo. Há muitas vantagens em pedir feedback de design regularmente.
Primeiro, o feedback ajuda você a melhorar seus designs e se tornar um designer melhor. Os colegas de equipe podem oferecer ideias ou sugestões que talvez você não tenha considerado antes. Em segundo lugar, o feedback pode aumentar sua confiança e suas habilidades. Receber feedback contínuo ajuda a aumentar sua confiança porque você reconhecerá como melhorou ao longo do tempo. Quanto mais feedback você receber, mais vai melhorar suas habilidades. Por fim, o feedback ajuda a ampliar sua perspectiva como designer. O ideal é que você trabalhe com pessoas com diferentes conjuntos de habilidades e origens. Elas serão capazes de identificar oportunidades para melhorar seu design que talvez você tenha deixado passar. Receber feedback de um público diversificado é a meta porque nossos vieses pessoais informam o que criamos. Perspectivas novas podem ajudar a reduzir o viés em seu design e oferecer outras maneiras de resolver desafios. Também pode ajudar você a considerar experiências exclusivas para usuários diferentes daquelas que você imaginou inicialmente. Gosto de pensar no feedback como um presente, porque me ajuda a pensar de maneira mais profunda e ampla sobre meus designs. Receber feedback sobre seu trabalho às vezes pode ser difícil, mas é uma parte essencial do processo de iteração do design.
Lembre-se de que nem sempre você será a única pessoa a receber feedback. Às vezes você dá o feedback. Dar feedback também pode ser difícil. Vou mostrar algumas dicas sobre como dar um ótimo feedback como designer de UX. Primeiro, ao dar feedback, ele precisa ser ajustado para cada situação. Pense no papel da pessoa para quem você está dando feedback, seja ela um engenheiro, gerente de projeto ou colega designer. Você também precisa pensar no nível de experiência da pessoa para quem você está dando o feedback, seja ela uma novata como você ou alguém mais experiente. Em segundo lugar, você precisa ter um motivo para auxiliar seu feedback. Por exemplo, se você der um feedback sobre uma parte específica de um projeto que acha que não está funcionando, precisará estar pronto para explicar por que acha que isso não está funcionando. Feedbacks gerais, como "Não gostei da cor que você escolheu", não são úteis. Por outro lado, se você disser: "Não gostei da cor que você escolheu porque ela não é acessível", estará explicando seu raciocínio e proporcionando ao designer uma melhoria acionável.
Terceiro, você precisa descrever problemas com o design, não oferecer soluções. Como designer, pode ser tentador dar conselhos sobre como você acha que o design precisa ser, mas se coloque no lugar da outra pessoa. Você gostaria que outro designer dissesse como consertar algo? Ou gostaria de ter a oportunidade de receber o feedback dele, processá-lo e apresentar suas próprias soluções para os problemas? Essas três sugestões são apenas o começo. Você pode aprender muitas outras dicas para dar feedback nos textos do curso. Mais um item, antes de você ir para o mundo real e ter que dar e receber feedback.
Deixe-me contar um pouco sobre minha própria jornada com feedbacks em minha carreira. A primeira vez que recebi críticas de design foi na escola de arquitetura. Muitas vezes, ficava na defensiva e desconfortável quando tinha que apresentar meu trabalho a professores ou colegas. Também me sentia frustrado quando incorporava o feedback deles, apenas para ter minhas decisões questionadas novamente na próxima rodada de feedback. Com prática,tempo e reflexão, passei a valorizar as críticas deles e a entender que nem sempre precisava seguir todos os feedbacks ou conselhos. Mais importante, fiquei mais confiante em minhas próprias decisões de design. Em minha função atual como designer de interação, peço feedback no início do processo e com a maior frequência possível. O feedback me ajudou a aprender com os colegas e melhorar meu trabalho com o tempo. Espero que o feedback faça o mesmo por você. Talvez você tenha notado que, no papel de designer de UX, damos muito feedback. A seguir, vamos falar sobre um método de dar feedback usado com frequência no design de UX, chamado críticas de design.
Explorar as Sessões de crítica de design
Noções básicas das sessões de crítica de design
Olá. Da última vez, exploramos como o feedback oferece perspectivas novas que podem ajudar você a melhorar seus designs. Agora, vamos ver um tipo comum de atividade de feedback para designers de UX: é chamado de sessão de crítica de design. Uma sessão de crítica de design é um período planejado em que os designers de UX apresentam um trabalho aos integrantes da equipe e ouvem o feedback. As críticas de design também são uma ótima oportunidade para você praticar o ato de dar feedback a outros integrantes da equipe. Essas sessões são uma oportunidade para muitas pessoas se reunirem para trocar ideias e fazer uma escolha coletiva sobre uma direção de design, de maneira pessoal ou remota. Ao ouvir o termo “sessão de crítica de design”, talvez você se imagine aparecendo na frente de um grupo de pessoas e esperando para receber comentários sobre seu desempenho. Dá até para imaginar alguém se defendendo de um exército de integrantes da equipe. Felizmente, não é o caso. Se as sessões de crítica de design forem planejadas com objetivos claros e boa preparação, poderão ser muito úteis. Além disso, elas podem até melhorar a maneira como você e sua equipe trabalham juntos no futuro. Como é uma sessão de crítica de verdade? Vamos começar com os participantes.
Em uma crítica de design, os participantes podem desempenhar um dos três papéis principais: facilitador, apresentador ou espectador. Primeiro, há o facilitador. O trabalho dele é realizar a sessão de crítica e orientar o processo. Ele também pode monitorar o tempo e verificar se os objetivos estão sendo seguidos. Além disso, ele garante que a voz de todos seja incluída e que haja tempo suficiente para que todas as ideias sejam compartilhadas. Tenha em mente que nem toda crítica de design precisa ser realizada por um facilitador. O segundo papel é o apresentador. Este é o designer que vai mostrar um trabalho a outras pessoas na sessão. Se você é o apresentador, precisa se preparar com antecedência. Envolva-se ativamente e se prepare para fazer perguntas para esclarecimentos após o feedback ser dado. O papel final é o revisor ou crítico. O revisor dá feedback sobre o design e oferece ações claras a serem tomadas. Geralmente há mais de um revisor em uma crítica de design. Em algum momento de sua carreira no design de UX, você terá a oportunidade de estar em cada um desses papéis. Por isso, é importante saber como os três papéis funcionam juntos durante uma crítica de design.
Mais uma coisa: às vezes pode haver um quarto papel, o anotador. Essa pessoa pode coletar todas as ideias e feedbacks dos revisores para que o apresentador possa ficar totalmente presente e focado. Como esses papéis funcionam juntos em uma sessão de crítica? Não existe um caminho certo, e uma sessão de crítica de design pode seguir muitas estruturas diferentes. Para dar uma ideia, veja aqui uma estrutura que uma sessão de crítica de design pode seguir. Primeiro, o facilitador oferece uma visão geral da sessão de crítica de design e define os objetivos. Os objetivos informam aos participantes as metas da crítica de design. O ideal é que os objetivos sejam específicos e tenham prazo determinado. Por exemplo, o objetivo de uma sessão de crítica de design pode ser receber feedback inicial sobre os modelos do processo de reserva em nosso app para passear com cães. Em seguida, o apresentador mostra o trabalho de design. À medida que os designs são apresentados, os revisores começam a anotar os feedbacks na forma de perguntas, ideias, gostos ou desafios. Depois disso, o facilitador permite que os revisores se revezem na explicação dos feedbacks. Neste momento, o apresentador pode fazer perguntas para esclarecer e responder ao feedback depois de alguma reflexão. Por fim, o facilitador encerra a sessão de crítica. Parte do encerramento inclui o facilitador fazer perguntas relacionadas aos objetivos que ainda não foram abordados. Agora você conhece os diferentes papéis que pode haver em uma sessão de crítica e como uma sessão de crítica de design precisa ser estruturada. A seguir, vamos falar sobre como aproveitar ao máximo uma sessão de crítica quando você estiver apresentando os próprios designs.
Práticas recomendadas para sessões de crítica de design
Uma sessão de crítica de design não pode acontecer sem um apresentador para mostrar o trabalho. Neste vídeo, vamos nos concentrar em aproveitar ao máximo uma sessão de crítica quando você apresentar. Como apresentador, a preparação é fundamental. Você é responsável por criar uma breve apresentação para compartilhar com todos os participantes da sessão de crítica. A parte mais importante desta apresentação é o design em si. Ao preparar sua apresentação para a sessão de crítica de design, você precisa se preparar para discutir o pensamento por trás de qualquer uma de suas decisões de design.
Pode ser útil se concentrar nestas cinco perguntas: Para quem você está projetando? Que problema você está tentando resolver? Como seus designs vão resolver ou não esses problemas? Em que ponto do processo de design você está? Sobre quais aspectos de seus designs você busca feedback? Pensar de maneira crítica sobre essas questões ajudará você a lembrar dos aspectos mais importantes do seu design para se concentrar durante a apresentação. Essas perguntas também ajudarão os revisores a manter o foco nas áreas sobre as quais você precisa de feedback. Mais um item que você precisa ter em mente ao se preparar para apresentar. Você precisa oferecer aos revisores informações suficientes para receber feedback. Você também precisa ter em mente quanto tempo a sessão terá e se os revisores terão tempo suficiente para compreender seus designs. Se você tiver um protótipo complexo, talvez seja bom enviá-lo aos revisores antes da sessão.
Certo, então você se preparou totalmente para a apresentação. Agora, é hora da sessão de crítica propriamente dita. Vamos ver algumas práticas recomendadas para apresentadores durante uma sessão de crítica. Primeiro, receba o feedback e decida se quer pedir esclarecimentos ou responder. Você também terá tempo após a sessão para pensar em como e quando agir com base no feedback recebido. Em segundo lugar, é importante se concentrar na escuta ativa. Não é fácil ouvir comentários sobre algo que não estamos fazendo certo. Podemos até ficar na defensiva ou querer dar uma explicação. Em vez disso, você precisa se concentrar em ouvir e fazer perguntas para ajudar a entender melhor o ponto de vista do revisor. Por fim, você precisa se preparar para agir sobre o feedback após a sessão. Na maioria das sessões de crítica de design, pode haver vários revisores e várias partes do seu design que eles estão criticando, então esteja preparado para receber muitos comentários. Depois de ter a chance de pensar em todos os feedbacks que recebeu, é possível decidir se o seu design permanecerá nesse caminho ou mudará de direção. Pense no seu trabalho como um barco, e você é o capitão. Em uma sessão de crítica de design, o feedback ajuda você a entender se o barco está se movendo na direção certa ou se você precisa mudar de direção de pequenas ou grandes maneiras.
Como designer iniciante, as sessões de crítica me ajudaram a identificar diferentes perspectivas para considerar os problemas de design. Elas também me ajudam a aprendernovas habilidades e desenvolver meu próprio olhar crítico para o design. O feedback regular é uma parte fundamental do processo de cada designer. O feedback me ajudou a melhorar meu trabalho, bem como minhas habilidades pessoais. Agora você entende como funciona uma sessão de crítica de design e o papel que o apresentador desempenha. Vamos continuar aprendendo sobre as sessões de crítica.
Saiba mais sobre as sessões de crítica de design
Agora que você aprendeu sobre dar e receber feedback como designer de UX, é hora de aprender sobre as sessões de crítica de design. Uma sessão de crítica de design é um período planejado em que os designers de UX apresentam o trabalho aos integrantes da equipe e ouvem feedbacks. As críticas são uma ótima oportunidade para praticar o ato de dar e receber feedback de e para outros integrantes da equipe.
Durante uma crítica, sua equipe se reúne para testar novas ideias e possíveis direções para um design. Elas são planejadas com antecedência e com uma agenda e objetivos definidos, para que você tenha tempo de se preparar e apresentar ideias novas. Reunir-se, pessoal ou virtualmente, estabelece relacionamentos e incentiva a colaboração entre as equipes.
Papéis das críticas de design
Uma sessão de crítica de design é composta por três grupos de participantes:
· Facilitador
· Apresentador
· Revisor
Vamos ver cada função em detalhes.
Facilitador
O facilitador de uma crítica de design é responsável por realizar a sessão de crítica e orientar o processo de feedback. Ele pode acompanhar o tempo e criar a agenda e as metas para a reunião. 
O facilitador também é responsável por garantir que todos na reunião sejam incluídos e compartilhem ideias. Seja por um traço de personalidade de um indivíduo ou por um viés do grupo, algumas pessoas serão deixadas de fora do processo se não forem diretamente envolvidas. O facilitador garante que cada pessoa tenha uma oportunidade para compartilhar. Nem todas as críticas de design incluem um facilitador. Mas, em muitos casos, especialmente quando se trabalha com uma equipe grande, ele pode ser muito útil.
Apresentador
O apresentador é o designer que compartilha o trabalho com a equipe durante toda a sessão. Também poderia ser um grupo de designers que trabalharam juntos. Eles podem compartilhar os designs diretamente pelo Figma ou Adobe XD, como um compartilhamento de tela, ou podem criar uma apresentação no Google Slides ou Microsoft PowerPoint com as imagens dos designs. Como designer, geralmente você assume o papel de apresentador. Interaja com outras pessoas na reunião e se prepare para fazer perguntas e oferecer feedback. 
Revisores
Os revisores oferecem feedback sobre os designs apresentados e quais etapas são necessárias para melhorar os designs. Muitas vezes, há vários revisores e várias sessões de crítica para analisar o design de diferentes perspectivas. 
Anotador
Além disso, pode haver uma quarta função, a de anotador, que documenta as ideias e acompanha todo o feedback para que as conversas possam fluir sem interrupções. O anotador provavelmente fará anotações em um documento digital para que elas possam ser compartilhadas com todo o grupo mais tarde.
Todos esses papéis trabalham juntos para criar soluções eficazes para fortalecer seus designs. Ao longo de sua carreira no design de UX, você terá a chance de facilitar, apresentar e revisar em uma sessão de crítica.
O processo da crítica de design
As críticas de design podem assumir muitas formas, dependendo do trabalho que está sendo revisado e do número de participantes. Como não existe uma maneira “certa” de realizar uma crítica, é importante preparar e planejar a sessão com antecedência.
Normalmente, o facilitador abre a sessão repassando os objetivos e as metas da reunião. Esses objetivos precisam ser claros e ter um prazo. Por exemplo, “Precisamos atualizar todos os modelos atuais antes da semana que vem”. Em seguida, o apresentador compartilha os designs, durante os quais os revisores começam a preparar o feedback e a coletar ideias ou perguntas. Os revisores precisam anotar o que gostaram e o que gostariam de melhorar nos designs. 
Os revisores também precisam de tempo para explicar esse feedback. O apresentador então esclarece o feedback e orienta todos ao longo do processo dos designs. Por fim, o facilitador encerra a sessão abordando questões ou tópicos remanescentes que não foram abordados.
Práticas recomendadas para uma sessão de crítica
Quando se trata de se apresentar em sessões de crítica de design, a preparação é fundamental. Essa é a sua chance de mostrar seu trabalho para os colegas. Verifique se é possível contar a história de seus designs. É bom orientar os revisores pelo seu pensamento por trás dos designs e explicar como eles se alinham com as metas do produto. 
Para ajudar você com isso, concentre-se em responder a estas cinco perguntas: 
1. Para quem você está projetando? 
2. Que problema você está tentando resolver?
3. Como seus designs estão resolvendo ou não esses problemas?
4. Em que ponto do processo de design você está?
5. Sobre quais aspectos de seus designs você busca feedback?
Essas perguntas ajudam você a resumir os aspectos principais dos designs para que você possa explicá-los melhor. A preparação de respostas também ajudará os revisores a oferecer um feedback melhor. Fique atento à duração da sessão. Você precisará de tempo suficiente para não apenas apresentar, mas discutir suas ideias com os revisores e permitir perguntas de acompanhamento. Uma maneira de otimizar esse processo é compartilhar seus designs com todos antes da sessão, para que eles possam chegar prontos para discutir os feedbacks com você.
Como receber feedbacks
Processar feedbacks na hora pode ser desgastante. Portanto, sempre peça aos revisores que esclareçam os pensamentos que tiverem. Também é possível reservar um tempo após a sessão para planejar como você vai aplicar o feedback recebido.
Ouça ativamente todos os comentários que receber. Não interrompa os revisores ou ofereça explicações, a menos que peçam isso a você. Em vez disso, concentre-se em fazer perguntas sobre o feedback deles para entender o ponto de vista que eles usaram. Planeje ter um anotador para coletar todos os feedbacks, especialmente se você souber que será uma sessão mais longa. Saber que você terá anotações para revisar mais tarde permitirá que você se concentre na discussão.
Quando estiver pronto para refinar seus designs com base nos feedbacks da sessão, revise todas as anotações e indicações para não perder nenhuma. Você é responsável por seus designs. Portanto, não precisa incorporar todas as sugestões recebidas. Apenas se prepare para explicar suas escolhas quando compartilhar seus designs novamente com a equipe. Reflita se você está rejeitando o feedback de outras pessoas porque se apegou à versão atual do design ou porque sua ideia é realmente mais adequada para os usuários.
O valor de uma sessão de crítica
As sessões de crítica são uma ótima maneira de aprimorar suas habilidades de design e criar relacionamentos com seus colegas de equipe. Como designer iniciante, você terá a chance de se sentir mais confortável com o processo e ampliar sua perspectiva na hora de resolver problemas de design. Para ver mais dicas, confira este guia prático para realizar críticas de design eficazes no Medium.
Kunal – Minha experiência com sessões de crítica de design
Oi, meu nome é Kunal. Sou designer de interação de equipe do Google. Trabalho na equipe do Material Design do Google. O Material Design é um sistema de design público de código aberto que muitas empresas em todo o mundo usam para criar apps de alta qualidade para Android, Web e outras plataformas. Já desempenhei vários papéis na equipe. Comecei trabalhando em nossas principais diretrizes de design e no sistema, ajudando a definir e oferecer orientação para os componentes que as pessoas usam todos os dias para projetar e criar apps de alta qualidade. No momento, lidero o design do nosso site público, Material.io, em que é possível encontrar todasas informações e recursos sobre nosso sistema de design de que você precisa para começar.
Uma sessão de crítica é basicamente apenas você apresentar seu trabalho aos colegas para receber feedback. Pense em como quando você vai fazer compras e quer mostrar uma roupa para os amigos, se estiver pensando em comprá-la. Eles podem ter algum feedback para você, como: "Não, realmente não está muito bom" ou "Ah, sim, ficou muito bom em você". É exatamente a mesma ideia, mas com seu trabalho de design. Você vai apresentar, explicar do que você gosta, do que não gosta, sobre o que é possível ter dúvidas e, em seguida, vai receber feedback dos colegas sobre o que eles pensam e sobre o que está ou não está funcionando. As críticas são importantes porque dão a você a chance de melhorar o trabalho. É fácil se perder na tarefa específica que você recebeu e talvez perder o foco em quais metas você está tentando alcançar, e talvez como seu trabalho se encaixa em uma jornada mais ampla, seja trabalhando em um recurso que faça parte de um produto maior, ou você não está considerando como será o restante do dia ou da tarefa dos usuários. Outras pessoas chegando podem ajudar a levar essa nova perspectiva para você e garantir que você não se prenda muito nos detalhes do seu próprio trabalho. Em uma sessão de crítica, não há muita distinção entre ser iniciante ou sênior. Em algum momento, todo mundo vai ter um trabalho que vai querer colocar na frente dos colegas para receber feedback, então espera-se que você desempenhe os mesmos papéis de um apresentador ou revisor, apenas reflita sobre como você está apresentando e como está dando feedback. Como apresentador, uma das ações mais difíceis de realizar em uma crítica é manter as pessoas focadas nos itens específicos sobre os quais você quer dar feedback. Muitas vezes, as pessoas vão querer começar a analisar outras partes dos designs, outras partes do produto. As conversas podem sair dos trilhos facilmente. Tanto quanto possível, tento manter a discussão focada na tarefa em mãos. Quando reviso, antes de dar feedback a alguém, sempre quero ter certeza de que tenho uma maneira de conectar a pessoa a algum ponto mais amplo.
Quero oferecer a estrutura certa para o meu feedback, por isso sempre quero ter certeza de que não estou deixando alguém apenas com minha opinião subjetiva. Mas mesmo que eu tenha uma opinião subjetiva, vou ligá-la a algo que a pessoa possa achar útil para fundamentar. Quando você fala sobre o que deixa o trabalho melhor, parte do que você faz também está falando sobre o que pode tornar você melhor como designer. É possível aprender com os tipos de feedback que recebe sobre o que talvez melhorar no futuro, ações que você pode começar a procurar por conta própria. Todos esses detalhes que surgiram em uma sessão de crítica, eu internalizei e pensei em como aplicar no meu próprio processo. Críticas têm sido responsáveis, em grande parte, de como eu cresci como designer.
Observar uma sessão de crítica simulada
Introdução a uma sessão de crítica simulada
Olá mais uma vez. Vamos conferir um exemplo de uma sessão de crítica em ação.
Uma sessão de crítica de design padrão dura pelo menos 30 minutos, e o designer geralmente passa de cinco a dez desses minutos apresentando.
Lembre-se de que a duração da sessão depende da quantidade de feedback solicitado e do número de revisores envolvidos. Não temos tempo para mostrar uma sessão de crítica completa para você. Portanto, o próximo vídeo é apenas um instantâneo do que geralmente acontece. Na sessão de crítica de modelo, farei o papel do apresentador, mostrando alguns dos modelos do app para passear com cães para dois colegas que foram os revisores. Haverá também um facilitador guiando o fluxo da interação. Enquanto você trabalhava nos modelos ao longo deste curso, eu também trabalhei. Os modelos que vou apresentar na sessão de crítica de design são minha iteração atual do app para passear com cães. Como apresentador, vou pedir feedback sobre duas partes desse design, o fluxo de agendamento e os botões de call-to-action. Lembre-se, botões de call to action são elementos no design que pedem que o usuário faça uma ação. No app para passear com cães, os botões de call-to-action são identificados como "marcar consulta" e "próximo". Você terá a chance de ver como o fluxo de ideias e a comunicação acontece enquanto eu apresento meu trabalho e recebo feedback. Enquanto assiste, observe como eu, como apresentador, respondo aos feedbacks que recebo. Pergunte a si mesmo: “o apresentador está ouvindo ativamente?”, “O apresentador está fazendo anotações?”,
“Que tipos de perguntas de acompanhamento o apresentador está fazendo?”. Também é preciso focar na maneira como os revisores compartilham feedbacks e opiniões.
Pergunte a si mesmo: “os revisores mostraram o raciocínio por trás do feedback?”, “Os revisores se concentram em problemas com o design em vez de oferecer soluções?”, “Os revisores conectaram os feedbacks aos objetivos da sessão de crítica de design?”. Com essas perguntas em mente, vamos participar da sessão de crítica. Nos encontramos lá.
Observar uma sessão de crítica simulada
Oi pessoal. Obrigado por participar da crítica de design hoje. Meu nome é Michael. Hoje Kunal vai apresentar os designs dele para o app para passear com cães, e ele tem algumas perguntas sobre o fluxo principal. Para os revisores, sintam-se à vontade para fazer anotações enquanto Kunal apresenta e guarde suas perguntas até o fim da apresentação. Vá em frente, Kunal. Obrigado, Miguel. Eu gostaria de apresentar o estado atual a todos e receber seus feedbacks, especialmente sobre os botões de call-to-action e o fluxo de agendamento. Vamos começar a passar pelo fluxo de agendamento. Aqui na tela inicial, o principal call-to-action é marcar um passeio. Pensei em colocá-lo dentro do hero, mas gosto da ideia de fazer com que o botão divida esse espaço dos passeadores de cães próximos. Tocar no botão abre o fluxo de agendamento.
Para deixar claro para os usuários que há uma sequência de etapas a serem seguidas, adicionei o stepper, ou rastreador de progresso, com três ícones, na parte superior da tela. Além disso, eu queria botões de call-to-action grandes e arredondados em todas as páginas do app. Tentei manter esse estilo consistente para todos os botões. De volta ao fluxo de agendamento. O primeiro passo é configurar os detalhes do passeio. Há vários itens a serem inseridos aqui, como data, hora e duração, além de selecionar quais cães serão levados para o passeio.
Com o design da IU, escolhi um menu de carrossel que o usuário pode percorrer para decidir a data, a hora e a duração do passeio com o cachorro.
Também incluí uma opção para tornar esse passeio recorrente, mas ainda estou trabalhando no design das telas dessa etapa. Você provavelmente pode dizer que eu escolhi os mesmos botões arredondados com a mesma cor laranja para agendar passeios, avançar para a próxima tela durante a reserva e, por fim, marcar o passeio. Também optei por ter os ícones de data, passeador de cães e confirmação na mesma cor. Conforme cada uma dessas etapas é concluída, esse ícone fica laranja em um círculo. Essas são as etapas da jornada do usuário dentro do app até o momento. Obrigado. Obrigado, Kunal, por apresentar seus designs. Shabi e Salvador, vocês têm alguma dúvida?
Obrigada, Kunal. Meu primeiro pensamento é que gosto do fluxo das páginas, e notei que há uma opção de escolha de sessões recorrentes. Mas, no segundo painel, estamos usando uma linguagem que atrai a maioria dos usuários? Que tal algo como "Qual cachorro vai passear?" em vez de "Quem vai passear?" Eu concordo. E se o usuário tiver mais de um cachorro, mas esses cachorros tiverem horários de passeio separados? Eu sei que meu cão Ranger não é muito sociável, então eu gostaria que ele saísse para passear sozinho em vez de com outros cães. É um recurso que podemos criar no app? Parece que, neste momento, o app atende apenas a um tipo de usuário. Obrigado. São ótimas perguntas e sugestões. Vou testar algumasopções de cópia diferentes e verificar com a equipe sobre a solicitação de passeios para cães sozinhos. Como você disse, não tenho certeza se o app aceita esse recurso no momento. Mais um item. Percebi que essa etapa de agendamento lista vários cães, e parte da linguagem parece implicar isso também, por exemplo, a página inicial usa a frase "Podemos levá-los para passear". Queria saber como uma visão de um único cão pode ser incorporada ao design do app. Também me pergunto se vamos mesmo precisar da lista de nomes de cães para selecionar para usuários com apenas um cão.
Essa é uma ótima pergunta, Salvador. Vou voltar ao modelo mais tarde e descobrir se consigo fazer alguma alteração na interface para ajudar os usuários que têm um cachorro. Essa parece ser uma situação bastante comum para muitos de nossos usuários em potencial. Excelente. Obrigado, Kunal, por apresentar esses pontos. Ouvimos muito sobre o fluxo de agendamento. Vamos passar para os botões de call-to-action, ou talvez você tenha alguma pergunta para os revisores, Kunal? Obrigado. Não tenho perguntas por enquanto. Como expliquei antes, decidimos usar a cor laranja para os botões de call to action. Gostaria de saber a impressão de vocês sobre os estilos gerais dos botões. Eu gosto da escolha dos botões arredondados. Mas qual foi o seu raciocínio por trás da decisão de usar laranja para os botões de call to action, e esse tom de laranja afeta a acessibilidade do usuário? Há também muito laranja em algumas das páginas. Também estou pensando, já que laranja é a cor dos principais botões de call to action, será que não temos que simplificar os ícones de data, passeador de cães e confirmação na parte superior das páginas? Talvez você possa mudar a cor deles para cinza ou algo mais neutro em vez de laranja.
Boas perguntas. Escolhi o tom médio de laranja com base na definição do guia de cores em um sistema de design. Em termos de acessibilidade, terei que investigar o contraste de cores. Farei as alterações necessárias na paleta de cores para deixá-la acessível a todos os usuários. Obrigada, Kunal. Alguma outra pergunta antes de continuarmos? Eu tenho mais uma pergunta. O posicionamento na largura dos botões de call-to-action principais parece mudar nas páginas ao longo do fluxo de agendamento. Mudar a posição e o tamanho dos botões cria distrações para o usuário? Dimensionamos os botões para enfatizá-los e, em seguida, alteramos o tamanho dos botões em cada painel para que fiquem em proporção com os outros botões da página, para que essas alterações não interrompam o fluxo. Obrigado por isso, Kunal. Algum de vocês gostaria de acrescentar algo mais antes de continuarmos? Eu gosto da escolha do branco para o texto e os botões de call-to-action. Mas talvez fosse bom considerar…
Implementar o feedback da sessão de crítica
Transformar o feedback da sessão crítica em ações
Olá mais uma vez. Você acabou de assistir parte de uma sessão de crítica de design. O que achou? Espero que você tenha aprendido como designers de UX como eu apresentam trabalhos e recebem feedback. Você também teve a chance de observar como os revisores oferecem feedback neste formato de sessão de crítica. Neste vídeo, vamos falar sobre o que acontece após uma sessão de crítica de design. Se você é o apresentador, como eu, é hora de processar todos os feedbacks dos revisores. O objetivo é decidir quais sugestões incorporar ou não e trabalhar na geração de itens de ação. Comece revisando as anotações que você ou um anotador fizeram durante a sessão de crítica. Ao revisar as anotações, também é útil dedicar um tempo para pensar sobre o feedback que você recebeu. Pergunte a si mesmo: “Como posso sintetizar o feedback da sessão de crítica de design?”, “Em qual feedback eu quero agir para melhorar meus designs ou a experiência do usuário?”. Vamos avaliar o feedback que recebi e identificar algumas ações que eu gostaria de tomar para melhorar meu trabalho. Conforme avançamos, também posso pensar em algumas perguntas de acompanhamento para os revisores esclarecerem o feedback que ofereceram. Vou abrir os designs que apresentei para Shabi e Salvador no fluxo de usuários de passeadores de cães. Também vou revisar minhas anotações para me lembrar do feedback que eles deram. Algo a ter em mente, já que havia apenas dois revisores nesta sessão de crítica, não preciso resumir tanto. Lembra quando você resumiu o feedback dos participantes do estudo de usabilidade em um curso anterior com Jason? Da mesma forma, se você tiver vários revisores em uma grande sessão de crítica de design, provavelmente vai precisar resumir esse feedback e identificar temas. Neste caso, como tenho apenas dois revisores, vou começar com a primeira anotação que fiz. Ah sim, me lembro dessa. Shabi recomendou a alteração do texto da pergunta que o usuário faz ao escolher qual cachorro será levado para passear. Este feedback da Shabi não teve nenhum princípio de design específico por trás. Shabi também não explicou como alterar essa pergunta afetaria a experiência do usuário ou a funcionalidade do app. Com isso em mente, vou interpretar este feedback como uma sugestão que é boa ter, mas não algo que eu precise corrigir. Portanto, para este feedback, direi que não há necessidade de fazer nada. Agora, vamos passar para o próximo feedback em minhas anotações. Este é de Salvador, mais ou menos na mesma parte do design. Salvador mostrou uma perspectiva útil sobre os usuários que têm cães com diferentes horários de passeio ou que precisam passear sozinhos. Para descobrir se preciso implementar a sugestão, vou precisar conversar com o gerente de produto e com meu colega da equipe de operações. Os insights deles sobre se essa opção é prática ou não vai ajudar a orientar as iterações do design. Tenha em mente que isso acontece muito durante as sessões de crítica. É possível receber um feedback que afeta mais do que apenas o design. Portanto, o item de ação aqui é enviar um e-mail ao gerente de produto com quem trabalho para marcar uma reunião e determinar se essa é uma mudança que queremos implementar. Vamos para a próxima. Salvador perguntou como seria a experiência se o usuário tivesse apenas um cachorro. A pergunta de Salvador é útil porque é centrada no usuário e pretende criar opções para uma possível solução. Queremos que o app aceite usuários com um ou mais cães, então provavelmente preciso criar mais telas para compreender o fluxo de usuários para donos de apenas um cão. Vou usar um item de ação para criar mais telas para a parte de seleção de cães do fluxo do usuário. Vamos para o próximo ponto que anotei durante a sessão de crítica. Salvador perguntou sobre os diferentes tamanhos dos botões de call to action. Vou usar isso como uma oportunidade para verificar as especificações de tamanho dos meus modelos no Figma. Nesse caso, há duas ações que preciso realizar. Primeiro, quero verificar todos os meus modelos para garantir que os botões tenham a mesma altura e largura. Em segundo lugar, vou revisar o posicionamento dos botões em todas as telas que criei. Vamos para a próxima parte do feedback. Shabi fez dois comentários. Para abordar esse feedback, vou precisar passar um tempo iterando o design do ícone e os identificadores de texto que são exibidos na parte superior da tela. Este também é um lugar em que tenho uma pergunta de acompanhamento para Shabi para esclarecer o feedback que ela ofereceu. Eu quero perguntar se ela quis dizer simplificar as cores dos ícones ou dos identificadores de texto abaixo dos ícones ou ambos. O próximo feedback que escrevi também é da Shabi. Era sobre o tom de laranja que usei nos botões de call to action. Ela perguntou se a cor é acessível ou não. Este é um feedback muito importante. Preciso garantir que meus designs funcionem para todos os usuários com várias habilidades. Com base nesse feedback, preciso verificar se o contraste de cores atende aos padrões de acessibilidade. Se laranja no fundo branco não for algo que ajude na acessibilidade, vou precisar alterar a cor dos botões e dosícones que usei em todo o fluxo de reservas. Por exemplo, talvez eu precise mudar para um tom mais escuro de laranja. Tudo bem, essas foram todas as anotações que fiz durante a sessão de crítica de design. Estes são apenas alguns exemplos dos muitos tipos de interações que podem acontecer entre os revisores e o designer que estava apresentando. Com o tempo, você ganhará cada vez mais confiança no processo de receber ou dar feedback. Você também vai desenvolver mais estratégias sobre como receber feedback útil e gerar itens de ação para continuar melhorando seu design. A seguir,vamos abordar algumas das etapas envolvidas na integração desses itens de ação em seus modelos no Figma. Nos encontramos lá.
Iterar em modelos com base no feedback das sessões críticas
Olá mais uma vez. Antes, você viu um exemplo de sessão de crítica de design. Em seguida, falamos sobre algumas estratégias sobre como receber feedback e usá-lo para gerar itens de ação para melhorar seus designs. Neste vídeo, vou usar o feedback da crítica de design para fazer algumas atualizações nos meus modelos. Como lembrete, veja aqui os cinco itens sobre os quais decidi agir: Criar mais telas para a parte de seleção de cães do fluxo do usuário. Verificar se os botões têm a mesma altura e largura. Revisar o posicionamento dos botões. Iterar nos designs de ícones na parte superior da tela. E verificar se o contraste de cores atende aos padrões de acessibilidade. Vamos começar com o primeiro item de ação, que é criar mais telas para a parte de seleção de cães do fluxo do usuário. Como você se lembra, Salvador perguntou o que a experiência do usuário implicaria se o usuário tivesse apenas um cachorro. Para resolver isso, vou iterar meus designs imediatamente. Criei versões alternativas de algumas telas que mostram o fluxo de usuários para donos que têm um cão. Vou mostrar um deles a você. Antes, na tela de agendamento de horários, havia três nomes de cães listados e o usuário tinha que selecionar pelo menos um. Agora, minhas telas novas, como esta, mostram apenas um nome de cachorro e são selecionadas automaticamente. Isso vai economizar o tempo do usuário. Agora, vamos para o segundo item de ação: Verificar se os botões têm a mesma altura e largura. Fiz uma verificação detalhada de todos os botões da agenda de um fluxo de usuário passeador de cães no Figma. Quase todos os botões tinham a mesma altura e largura, exceto um. Então fiz um ajuste rápido. O terceiro item de ação foi revisar o posicionamento dos botões. A boa notícia é que todos os meus botões relacionados, como o botão "Próximo", já estavam no mesmo eixo x e y da grade. Talvez você se pergunte como eu verifico isso. Para verificar o posicionamento no Figma, clico em um botão como "Próximo" e verifico o painel do lado direito para ver onde ele está posicionado na tela. O botão "Próximo" precisa ter um valor x de 16 e um valor y de 8 para indicar que o botão está no mesmo lugar entre as telas. O quarto item de ação foi iterar nos três designs de ícones na parte superior da tela. Shabi sugeriu que eu revisasse esses ícones porque parecia muita informação. Fiz algumas rodadas de iteração nesta parte do meu modelo para descobrir como abordar esse feedback. Lembre-se de que alguns dos feedbacks que você receber podem levar tempo para serem implementados em seus designs, mas isso é parte do processo. Na versão anterior do meu design, os três ícones na parte superior da tela ficavam cercados por um círculo e tinham identificadores de texto abaixo deles. Agora, o ícone fica sozinho, sem círculos e sem identificadores de texto. Essa nova iteração do meu design parece mais limpa e sem tanta informação. Por fim, o quinto item de ação foi verificar o tom de laranja usado em todo o meu design para ver se o contraste de cores atende aos padrões de acessibilidade. WebAIM, que significa “Acessibilidade da Web em mente”, permite verificar o contraste entre duas cores e compará-las com os padrões WCAG, ou Diretrizes de acessibilidade de conteúdo da Web. Depois de verificar o contraste de cores com a WebAIM, decidi usar um tom mais escuro de laranja para a paleta de cores do meu app. Esse tom mais escuro tem acessibilidade AAA, por isso é uma opção mais inclusiva para os usuários do app. O valor hexadecimal sugerido para o laranja atualizado é D53E0B. Farei essa alteração nos botões em todas as telas do meu modelo. Por exemplo, é possível ver a mudança na cor de um tom mais claro de laranja para um tom mais escuro nos botões aqui. Também mudarei a cor para este tom mais escuro de laranja na minha folha de adesivos, para economizar tempo no futuro. Vou atualizar a cor dos botões, ícones, estrelas de avaliação e texto. Veja aqui uma dica. Você não precisa alterar a cor de cada botão individualmente. Se você segurar e arrastar o cursor para selecionar todos os botões e ícones na folha de adesivos, basta alterar a cor no painel do lado direito. Procure o cabeçalho chamado "Cores de seleção" e edite a cor do seu estilo. Certo, vimos os cinco itens de ação do feedback da sessão de crítica de design. Com isso, você aprendeu a receber o feedback de uma sessão de crítica de design e usá-lo para fazer alterações práticas em seus designs no Figma. Agora é sua vez de iterar em seus próprios modelos com base no feedback.
Revisão semana 4
Finalização – como participar de sessões de crítica de design
Olá de novo. Você acabou de aprender tudo sobre sessões de crítica de design. Agora você já entende como o feedback é uma ferramenta poderosa para receber insights sobre seus designs em diferentes estágios de um projeto e como o feedback pode ajudar você a continuar iterando seus designs. Como designer de UX, uma maneira comum de dar e receber feedback é por meio de uma sessão de crítica de design. Você assistiu a uma em ação, quando me viu receber feedback sobre meus designs para o app para passear com cães. Quanto mais prática você tiver com críticas de design, mais confortável ficará com o processo de receber críticas sobre seus próprios designs e oferecer sua opinião sobre os designs de outra pessoa. Por fim, você aprendeu como transformar o feedback de uma sessão de crítica de design em ações concretas. Você até recebeu feedback sobre seus próprios designs e realizou ações para fazer melhorias. A seguir, vamos ver as etapas para criar protótipos de alta fidelidade e adicionar elementos como gestos e movimentos aos seus designs. Vamos continuar iterando em nossos designs juntos.
Compreender protótipos de alta fidelidade
Boas vindas à semana 5
Olá a todos e bem-vindos de volta. Até aqui, você aprendeu sobre elementos e princípios do design visual, explorou sistemas de design e iterado seus mockups. Você tem trabalhado muito em cada etapa do processo de design até aqui, e agora é hora de chegar ainda mais perto dos seus designs finais. Nesta parte do curso, o foco são protótipos de alta fidelidade. Vou começar definindo o que são protótipos de alta fidelidade, e vamos criar um protótipo de alta fidelidade no Figma. Seguindo seis passos, nós vamos transformar os mockups em que você tem trabalhado em protótipos prontos para testes. Além disso, vamos explorar dois novos conceitos, gestos e movimentos, que podem ajudar a enriquecer a experiência do usuário e aumentar a usabilidade. Por fim, Shabi vai compartilhar algumas coisas que você deve ter em mente para garantir que seus designs sejam acessíveis quando falamos de gestos e movimentos. Espero que você esteja com energia, porque todo o seu trabalho está se encaixando e você está se aproximando do produto final. Vamos começar.
Introdução aos protótipos de alta fidelidade
Olá! Você passou a maior parte deste curso criando mockups, mas agora é hora de transformá-los em um protótipo de alta fidelidade. Como você aprendeu anteriormente no programa de certificação, um protótipo é um modelo inicial que demonstra a funcionalidade de um produto. Qual é a diferença entre protótipos de baixa e alta fidelidade?
Protótipos de baixa fidelidade são versões interativas de designsque usam espaços reservados para conteúdo. Por outro lado, protótipos de alta fidelidade são versões detalhadas e interativas dos designs que se assemelham muito da aparência e função geral do produto final. Essencialmente, um protótipo de alta fidelidade usa o trabalho de design que você fez nos mockups e o torna interativo. Lembre que o foco dos mockups é o design visual, mas o foco dos protótipos é a funcionalidade. Um protótipo de alta fidelidade precisa ter estas três partes: elementos visuais, como cor, imagens, ícones e tipografia; navegação para ajudar os usuários a se moverem entre telas; e interação, como gestos e movimentos, que fazem o protótipo funcionar. Primeiro, você vai precisar finalizar todos os elementos visuais do protótipo. Basicamente, isso significa confirmar qualquer conteúdo escrito, ilustrações, imagens e links externos que serão parte do produto final. Em um mundo ideal, você vai coordenar com outros membros da equipe para ter certeza de que você tem partes realistas do conteúdo para incluir no seu protótipo de alta fidelidade. Mas, no mundo real, talvez você precise projetar com espaços reservados se algo não estiver pronto.
Pense nesta tela do app de passeadores de cães. À esquerda, o protótipo de baixa fidelidade usou linhas espaços reservados para nomes. Você também pode usar texto reservado, como “Nome, Sobrenome” ou “Passeador de cães A”, em um protótipo de baixa fidelidade. À direita, o protótipo de alta fidelidade inclui nomes e descrições reais em vez de espaços reservados. O objetivo é ter nomes realistas e fotos de perfil para simular a experiência real do aplicativo. A segunda parte dos protótipos de alta fidelidade que você vai precisar finalizar é a navegação do fluxo do usuário você quer testar. Seus protótipos de baixa fidelidade já deveriam ter levado em conta a jornada principal do usuário, também conhecido como o fluxo de usuário principal. A navegação é importante porque ajuda os usuários a explorar e aproveitar seu produto. Sem um bom sistema de navegação, os usuários vão ter dificuldade ou até parar de usar seu produto. Confirme se você tem os botões ou ícones certos em cada tela, como setas para voltar e X, para que a navegação funcione. Ao verificar a navegação de um protótipo de alta fidelidade, faça estas perguntas: como um usuário passa de uma tela para a próxima? É fácil localizar ícones relacionados à navegação, como setas para voltar? Em que ponto a jornada do usuário termina? Por fim, um protótipo de alta fidelidade precisa de interatividade. Lembra-se de como você conectou cada tela do protótipo de baixa fidelidade? Agora, você precisa adicionar a interação entre cada tela novamente usando seus novos designs de alta fidelidade. Como lembrete, a interatividade faz o protótipo funcionar.
Vamos rever como tornar algo interativo no Figma, o que também chamamos de ”fazer uma conexão”. Para criar uma conexão, primeiro selecione o item que você quer que seja o ponto de acesso. É aqui que vai acontecer a interação do usuário. É possível criar um ponto de acesso em qualquer coisa, como um botão, ícone ou cabeçalho. Segundo, faça a conexão. Essa é a seta ou linha que conecta o ponto de acesso ao destino. É possível fazer uma conexão clicando no sinal de mais azul dentro do círculo. Por fim, indique o destino. É aqui que termina uma conexão. Lembre-se, o destino precisa ser um frame ou tela. Ele não pode ser um item do frame. Quando você tiver essas conexões, pode adicionar a interação e a animação. A interação e a animação incluem coisas como gestos e movimentos. Vamos nos concentrar em gestos e movimentos nesta parte do curso, então fique de olho para saber mais. Você está começando a entender tudo que faz compõe um protótipo de alta fidelidade, então é hora de aprender como criar um. A seguir, vamos começar a trabalhar em um protótipo de alta fidelidade no Figma. Vamos começar.
Criar um protótipo de alta fidelidade no Figma
Boas-vindas de volta. Existem seis etapas para criar um protótipo de alta fidelidade no Figma. Essas seis etapas são: posicionar os mockups, conectar as telas, adicionar detalhes de interação, ajustar a animação, completar todas as telas e compartilhar o trabalho. Neste vídeo, vamos nos concentrar nas duas primeiras. Vamos ver as outras quatro mais tarde. Antes de começarmos, vou abrir o Figma para você poder acompanhar cada passo. Uma dica rápida: é possível criar seu protótipo de alta fidelidade dentro do mesmo arquivo que tem os seus designs atuais, como wireframes e mockups. Vou criar uma nova página.
Tudo pronto para começar a primeira etapa: posicionar os mockups. Primeiro, vou copiar e colar meus mockups na página do protótipo de alta fidelidade.
Talvez você tenha notado que estamos projetando as telas do app de passeadores de cães na ordem em que o usuário navegaria pelo aplicativo. Começamos pela tela inicial e depois projetamos as telas para escolher data e hora.
Em seguida, criamos as telas de para selecionar o passeador de cães e, por fim, adicionamos a tela de confirmação do agendamento. Neste ponto do processo de design, você já deve ter considerado o fluxo do usuário ao longo do seu próprio aplicativo. Se você ainda não ordenou as telas com base no fluxo do usuário, reserve um tempo para fazer isso agora. Agora está tudo pronto para a segunda etapa, que é conectar as telas. Lembre-se do último vídeo, Para criar uma conexão, primeiro você precisa selecionar o item que você quer que seja o ponto de acesso para depois fazer a conexão usando a seta e, por fim, indicar o destino, onde a conexão termina. Vou mostrar para você. Vou conectar o botão “Book Appointment” na página inicial à primeira tela “Book Appointment”. Para isso, vou selecionar o botão “Book Appointment” na página inicial para ser o ponto de acesso. Preciso verificar se estou no modo de protótipo no painel do lado direito. Parece que ainda estou no modo de design. Vou clicar em “Prototype” na parte superior direita do painel para alternar. Você notou como este novo círculo azul apareceu no botão ”Book Appointment” quando mudei para o modo de protótipo? É assim que vou fazer a conexão. Quando eu passo o mouse sobre o círculo azul, eu vejo esse sinal de mais no meio do lado direito do botão. Chamamos o círculo azul com um sinal de mais de um nó de protótipo, ou só de nó para abreviar. Quando clico no nó e arrasto, aparece uma seta. Eu arrasto a seta do botão “Book Appointment” na página inicial para o frame ao qual quero conectar, que é a primeira tela “Book Appointment”. Esse será o destino.
Tenha em mente que a primeira conexão que você fizer será o frame inicial do seu protótipo. Por isso é importante as telas estarem posicionadas na ordem do fluxo do usuário e que a primeira conexão que você faça seja a primeira ação que você quer que o usuário faça no protótipo. A partir daqui, vou continuar trabalhando no resto das telas do meu aplicativo, fazendo mais conexões. Acabamos de ver as duas primeiras etapas para criar um protótipo de alta fidelidade no Figma: posicionar os mockups e conectar as telas. Agora é a sua vez de experimentar essas etapas nos seus próprios designs. Vamos ver as outras quatro etapas em breve. Boa sorte!
Gestos e movimentos
Gestos e movimentos no design de UX
Boas-vindas de volta.
Antes de aprender sobre as etapas extras para criar um protótipo de alta fidelidade no Figma, quero apresentar você a dois conceitos: gestos e movimentos.
Vamos começar com algumas definições rápidas.
Um gesto é qualquer método de interação entre um usuário e as informações do dispositivo pelo toque. Os gestos mais comuns são tocar, rolar, deslizar e ampliar.
Movimentos são uma maneira de animar elementos de design estáticos para focar a atenção do usuário e contar histórias. Outra maneira de pensar é que o movimento ajuda o usuário a entender mudanças sutis que ocorrem na tela adicionando uma animação. Por exemplo, quando você faz uma compra online em um dispositivo móvel, você geralmente toca um botão para adicionar o item ao carrinho. Se o íconedo carrinho mudar de estado, sem qualquer animação, talvez você não note a mudança. Mas, se o ícone do carrinho for animado à medida que muda de estado, sua atenção é atraída para o carrinho. Você automaticamente recebe feedback de ocorreu uma ação. Neste exemplo, o toque é o gesto. O movimento é a animação que ocorre após tocar o botão “Adicionar ao carrinho”. Vamos dar uma olhada em um segundo gesto comum: deslizar.
Você já leu um e-book e passou o dedo pela tela para passar para a próxima página do livro? Nesse caso, o gesto é deslizar. O movimento é a animação que acontece depois que você desliza.
Reproduza o vídeo começando em :1:24 e siga a transcrição1:24
A lição principal é que os gestos e movimentos ajudam a enriquecer a experiência do usuário e aumentam a usabilidade. Até agora o protótipo que criamos é bastante estático porque conectamos as telas sem adicionar animações. A seguir, vou mostrar como enriquecer a experiência do usuário usando movimentos e gestos. Vamos lá.
Tipos de gestos e movimentos
No vídeo anterior, você conheceu gestos e movimentos. Neste texto, vamos no aprofundar um pouco e aprender mais sobre tipos de gestos e movimentos!
Gestos
Gestos são qualquer método de interação que um usuário tenha com as informações no seu dispositivo usando toque. Em outras palavras, os gestos descrevem como você interage com uma tela usando o dedo ou uma caneta. Gestos comuns incluem:
· Deslizar. Deslizar é um movimento breve com a ponta do dedo ou caneta na tela, horizontal ou verticalmente. Por exemplo, os usuários geralmente deslizam do lado direito da tela do celular para a esquerda com o intuito de navegar pelas telas de um aplicativo. O gesto de deslizar também é muito usado para interagir com um carrossel de conteúdo.
· Tocar. Tocar significa um breve toque na tela com a ponta do dedo ou caneta. Os toques podem ser personalizados para englobar o uso de um a quatro dedos. O toque com um único dedo costuma ser usado para selecionar um item na tela. O toque com dois dedos pode ser usado como um atalho para fazer o menu de contexto (também conhecido como menu do botão direito) aparecer.
· Arrastar. Arrastar é tocar e continuar pressionando a tela enquanto move a ponta do dedo ou da caneta. Por exemplo, os usuários podem arrastar um item para movê-lo para dentro e para fora da tela. O recurso de arrastar é frequentemente usado para o menu principal de notificações de celulares.
· Pinçar. Pinçar é mover dois dedos se fechando ou se afastando um do outro. Pinçar é uma maneira de os usuários dimensionarem itens na tela, por exemplo, aumentando ou diminuindo o zoom de um site, mapa ou foto.
Para saber mais sobre gestos, veja este guia com animações de gestos do Material Design do Google.
Gestos e sistemas operacionais
Você já pegou emprestado o celular de um amigo e achou difícil de usar? A simples tarefa de tirar uma foto pode ser complicada quando você não sabe qual gesto abre o menu de um celular! À medida que os celulares evoluíram, os sistemas operacionais ficaram mais relacionados aos fabricantes.
Isso porque há uma diferença na filosofia do design de gestos entre o iOS da Apple e o Android do Google. Mais especificamente, o iOS é baseado nas Diretrizes de Interface Humana (ou HIG, da sigla em inglês), enquanto o Android é baseado no Material Design. O HIG e o Material Design fornecem aos designers e desenvolvedores diretrizes para os gestos usados em cada sistema operacional. Como designers, nosso trabalho é entender essas diretrizes para criar designs fáceis de usar e que atendam às expectativas do usuário.
Por exemplo, pense em como você apaga o texto no seu celular. Para apagar texto em um dispositivo Apple iOS, você desliza três dedos do lado direito da tela para a esquerda. Para apagar texto em um dispositivo Android, você toca e segura o texto para selecioná-lo e, depois, pressiona a tecla para excluir. Essas são diferenças importantes que devem ser consideradas ao criar designs!
Conforme você avança no curso e no mundo real, certifique-se de testar seus designs em vários dispositivos para entender como os gestos funcionam para usuários de todos os sistemas operacionais.
Movimentos
Movimentos são uma maneira de animar elementos de design estáticos para focar a atenção do usuário e contar histórias. Os movimentos podem tornar aplicativos e sites mais envolventes e fáceis de usar, por exemplo, quando um ponto focal de um site chama a sua atenção ou quando um menu desaparece após você arrastar para fechá-lo. 
Na imagem acima, veja um exemplo de movimento que você deve conhecer se tiver um smartphone. Se você usa um dispositivo Apple iOS, pressionar e segurar um ícone de aplicativo com que todos os aplicativos da tela inicial entrem no “modo jiggle”, em que os ícones do aplicativo tremem e um símbolo de menos aparece no canto esquerdo de cada um. Esse movimento permite que os usuários saibam que podem editar os aplicativos. 
Se você usa um dispositivo Android, esse movimento é muito mais sutil. Ao pressionar e segurar um ícone de aplicativo na tela inicial, aparece um menu de opções específico para esse aplicativo. O ícone do aplicativo salta ligeiramente para cima e para baixo, indicando o aplicativo que está sendo editado. Esses são exemplos de como o movimento pode ajudar os usuários a interagir e entender o produto que estão utilizando!
Para saber mais sobre como usar os movimentos nos seus designs, veja The Role of Animation and Motion in UX do Nielsen Norman Group ou o Motion Manifesto no Medium.
Adicionar gestos e movimentos no Figma
Olá, novamente. Tudo pronto para conhecer as próximas quatro etapas para criar um protótipo de alta fidelidade no Figma? Para relembrar, as seis etapas para criar um protótipo de alta fidelidade são: posicionar os mockups, conectar as telas, adicionar detalhes de interação, ajustar a animação, completar todas as telas e compartilhar o trabalho. Já aprendemos a posicionar os mockups e conectar as telas. Agora vamos para a terceira etapa, adicionar os detalhes de interação. Depois de conectar duas telas, é hora de personalizar os detalhes da interação. Antes de começarmos, vou abrir o Figma para você poder acompanhar cada passo.
Existem três partes da interação para explorarmos. A primeira é o gatilho. O gatilho define que tipo de interação faz o protótipo avançar. O gatilho poderia ser um clique do mouse, um gesto de toque ou o tempo decorrido no frame atual. No Figma, o gatilho é o primeiro menu suspenso listado no painel “Interaction details”. Para o botão “Book Appointment” da página inicial, vou selecionar o gatilho chamado “On click/on tap”, que significa que o protótipo vai avançar quando um usuário clicar ou tocar no botão. A segunda parte de uma interação é a ação. A ação define o que acontece quando o usuário interage com o ponto de acesso. Isso pode significar mudar para outro frame ou abrir um link. Existem seis ações disponíveis no Figma. Para este exemplo, vou selecionar “Navigate to” no menu suspenso. Essa ação leva os usuários de um frame em um protótipo para o próximo. “Navegate to” é o tipo mais comum de ação a ser usada para se mover entre telas inteiras.
A última parte de uma interação é o destino. O destino poderia ser outra tela no protótipo ou uma sobreposição que aparece acima da tela atual. Nesse exemplo, depois que um usuário clica no botão ”Book Appointment”, eu quero que o destino seja a primeira tela “Book Appointment”. Tudo bem, terminamos a terceira etapa da criação de um protótipo de alta fidelidade no Figma, que foi adicionar os detalhes de interação. Agora é hora da quarta etapa, que é ajustar a animação. As configurações de animação determinam como o protótipo se move de uma tela para outra. É assim que adiciono movimentos ao protótipo. O Figma tem oito animações disponíveis. Por exemplo, se eu selecionar a animação instantânea, o usuário vai de uma tela para a próxima sem nenhum movimento ou transição. Vamos parar um momento e ver como isso funciona no protótipo. Primeiro, vou clicar no ícone “Present” ao ladodo botão de compartilhamento no canto superior direito da Figma. Isso abrirá uma nova guia. Se eu clicar no botão ”Book Appointment” na página inicial do protótipo, nosso aplicativo vai instantaneamente se mover para a primeira tela “Book Appointment”. Agora que eu vi essa animação em ação, não sei se gosto da animação instantânea, porque parece muito direto. Vou tentar mudar para a animação de deslizamento. Para essa animação, eu também preciso selecionar de onde a página vai deslizar. Vou selecionar a seta para cima porque eu quero que a página deslize da parte inferior da tela para a parte superior da tela. A seta aponta para a direção em que a tela vai deslizar. Então vou testar novamente. Vou clicar no botão “Present” mais uma vez e veja como fica a animação de deslizamento. Excelente. Eu gosto da animação de deslizamento porque é mais suave e natural.
Mais uma coisa. Gestos e movimentos podem ajudar usuários a encontrar o caminho. Acabei de mostrar a você como fazer a tela “Book Appointment” abrir. Agora preciso adicionar o movimento que vai acontecer quando um usuário fechar a tela para retornar para a página inicial. Quero que esses dois movimentos sejam semelhantes para facilitar a navegação dos usuários pelo aplicativo. Para voltar para a tela inicial, os usuários vão tocar no X no canto superior direito da tela “Book Appointment”. Vou começar conectando o X à página inicial. Vou clicar no X, selecionar o nó e arrastar a seta para a esquerda para conectá-la à página inicial. Excelente. Apareceu o painel de detalhes da interação. Vou manter o gatilho como “On Click/On Tap”. Em vez disso, vou me concentrar na animação. Quando o usuário fecha tela “Book Appointment”, quero que a animação seja o oposto de quando o usuário abre a tela. Então, vou selecionar “Slide out” em vez de “Slide in” e a seta para baixo em vez da seta para cima. Vou testar meu protótipo mais uma vez usando o botão “Present”. Vou clicar no botão “Book Appointment” e a segunda tela vai deslizar para cima. Depois, se eu clicar no X para voltar para a página inicial, a tela desliza para baixo. Você provavelmente vai testar muito o protótipo no Figma desse jeito. Você vai testar muitas opções de interações e animações até chegar a uma com o visual e a sensação certa para você. Isso faz parte da diversão do processo de prototipagem.
E com isso, eu adicionei o gesto e o movimento ao protótipo de alta fidelidade. Vou continuar adicionando gestos e movimentos para cada tela do protótipo, assim como fiz para esta tela, para finalizar o fluxo do usuário. Assim que eu terminar de criar todas as interações e meu protótipo estiver pronto, posso compartilhar meu trabalho com outras pessoas. Vou mostrar para você. Se eu clicar no botão “Share” no canto superior direito da tela, posso selecionar pessoas para ver ou editar meu arquivo no Figma. Tudo bem, é isso. Agora você sabe as etapas básicas para criar um protótipo de alta fidelidade no Figma. É sua vez de transformar seus mockups em um protótipo de alta fidelidade para seu próprio projeto.
Saiba mais sobre protótipos no Figma
Agora que você aprendeu os fundamentos da incorporação de gestos e movimentos nos seus designs, é hora de se aprofundar. Quando falamos de prototipagem, existem muitos gatilhos, animações e interações que podem aprimorar seus designs. A maneira como você usa cada uma dessas técnicas depende dos objetivos do seu produto. 
Veja estes recursos do Figma para explorar os recursos que podem ser usados para tornar as interações do usuário mais envolventes:
· Interações e animações de protótipos
· Nove gatilhos de protótipos
· Ações de protótipos
Questões de acessibilidade para gestos e movimentos
Olá de novo, sou eu, Shabi. Estou de volta para compartilhar mais algumas dicas sobre como tornar seus designs acessíveis. Adicionar movimentos aos designs traz à tona novas questões para garantir que seus produtos são acessíveis a todos os usuários. Neste vídeo, vamos explorar algumas coisas que você deve ter em mente para garantir que seus designs sejam acessíveis quando falamos de gestos e movimentos.
Primeiro, você deve sempre fornecer alternativas ao uso de gestos. Os gestos são uma ação específica que vários grupos de pessoas podem não ser capazes de usar. Por exemplo, talvez alguns usuários não tenham controle total das mãos ou não consigam ver a tela, o que pode dificultar alguns gestos. O melhor princípio de acessibilidade a seguir é garantir que um gesto não seja a única maneira de concluir uma tarefa. Um gesto deve ser apenas uma opção. Por exemplo, no Gmail, é possível deslizar para a esquerda para arquivar um e-mail. Mas essa não é a única maneira de se livrar de um e-mail. Você também pode selecionar o botão “Arquivar”.
Em segundo lugar, pense criticamente sobre a velocidade e a duração do movimento nos seus designs. Movimentos muito rápidos pode ser perturbadores e alarmantes para as pessoas. Além disso, movimentos que perduram por muito tempo podem ser uma distração e gerar confusão. O World Wide Web Consortium, também chamado de W3C, recomenda que as animações tenham menos de cinco segundos para serem acessíveis. No Figma, o movimento é cronometrado em milissegundos. Isso significa que suas transições e outros movimentos devem ter entre 150 e 500 milissegundos.
Por fim, ofereça aos usuários a capacidade de desativar um movimento. Ao entrar no mundo do design de UX, é importante projetar pensando nos usuários e garantindo que os movimentos dos designs sejam acessíveis. Por exemplo, o movimento de loop ficou mais popular recentemente, especialmente com GIFs ou reprodução automática. Mas o movimento de loop pode ser uma distração. Portanto, você deve fornecer aos usuários a opção de fazer o movimento de loop ou não. O YouTube segue essa prática permitindo que os usuários ativem ou desativem a reprodução automática. Você deve trabalhar com as áreas de produto e engenharia para garantir que essa opção seja incluída. Com essas três considerações em mente, você estará no caminho certo para garantir que seus designs sejam inclusivos para todos os usuários.
Jen – Projetar pensando na acessibilidade
Meu nome é Jen e eu sou chefe de acessibilidade em experiência do usuário no Google. Eu e minha equipe ajudamos outras equipes do Google a criar produtos mais acessíveis e funcionais. Também trabalhamos para criar produtos que são baseados diretamente nas necessidades de pessoas com deficiência. Em acessibilidade, falamos muito sobre tecnologias assistivas. Na base, elas são ferramentas para ajudar pessoas com deficiência interagirem e usarem dispositivos para ter uma participação igualitária. Então, pensando no seu celular, sempre que você faz o movimento de pinça para ampliar uma tela, sempre que você depende de legendas ocultas para ver um vídeo, esses são apenas alguns exemplos de tecnologias que todos nós usamos e também consideramos como dadas. Projetar pensando na acessibilidade significa que, durante todo o processo de desenvolvimento de produtos, estamos continuamente tentando entender e resolver as necessidades de pessoas com deficiência. E se você pegar apenas o processo padrão de desenvolvimento de produtos, há muitas oportunidades para fazer isso.
Vamos pegar a parte inicial, antes do trabalho de design. Provavelmente você está tentando entender as necessidades dos usuários. Isso pode ser feito com entrevistas, algumas pesquisas de base, talvez uma análise de mercado. Tudo que você fizer para entender melhor as necessidades do usuário é uma oportunidade para garantir que você está incluindo pessoas com deficiência nessa pesquisa. E isso obviamente define uma base clara para encontrar novos insights e necessidades em que a equipe pode trabalhar. À medida que você avança pelo processo de desenvolvimento de produto e se esforça para entender o que o usuário precisa, você está na fase de design, certo? Aqui, novamente você tem a oportunidade de aplicar apenas as diretrizes básicas de acessibilidade e design inclusivo, o que pode ser um grande diferencial. Algunsexemplos incluiriam garantir que há um bom contraste entre seu texto e as imagens.
Se você usar imagens de pessoas, garanta que elas sejam diversas e representativas. E para coisas como texto ou conteúdo na tela, é importante garantir que o nível de leitura seja básico para que todos possam compreender. Depois disso, quando você estiver iterando seus designs, idealmente, estamos todos tentando receber feedback do usuário à medida que avançamos e isso poderia acontecer por meio de estudos de usuários, sessões informais para receber feedback. Essa é uma ótima oportunidade para garantir que, entre as pessoas que estão dando feedback, sejam incluídas pessoas com deficiência. Mesmo após o lançamento, você ainda pode receber um feedback incrível. Há duas coisas que descobri ao longo dos anos que são realmente gratificantes no meu trabalho. A primeira é, obviamente, ver o resultado final e o impacto positivo que um produto acessível pode ter na vida das pessoas. Ele permite que as pessoas participem da sociedade.
Ele permite que as pessoas tenham um emprego e conquistem uma formação.
Isso pode ter um impacto enorme e significativo na vida de uma pessoa. Ultimamente, temos tentado nos concentrar ainda mais sobre como fazer co-design e trazer pessoas com deficiências e diferentes perspectivas para o processo de desenvolvimento de produtos sempre que possível. E essa oportunidade de aprender diretamente com os usuários, ouvir as ideias deles e trabalhar com eles tem sido outro impacto significativo na minha própria vida e na forma como eu vejo as coisas. Cada coisa, cada diretriz de design relacionada à acessibilidade realmente melhora o resultado final geral.
Então, na minha mente, percebi que focar na acessibilidade e praticar um design mais inclusivo significa fazer um bom design. Para mim e para as pessoas com quem conversei, eu realmente tento comunicar a noção de que isso não é algo adicional, não é um obstáculo ou um fardo. Isso está melhorando o resultado final. Está tornando você um designer melhor.
Aprenda do Figma – Interações e feedback do protótipo
No último vídeo da nossa série do Figma para iniciantes, criamos uma única tela do nosso aplicativo. Para economizar tempo, criamos as outras telas do nosso aplicativo, incluindo um menu, perfil e uma interface de pesquisa para o aplicativo. Vamos criar um protótipo interativo para juntar tudo isso. Os protótipos são uma ótima maneira de visualizarmos como será nosso aplicativo final. Eles permitem definir caminhos, explorar interações e testar ideias antes de investirmos na construção do aplicativo de verdade. Podemos criar vários protótipos dentro de um arquivo e organizá-los em diferentes páginas. Vamos duplicar a página dos nossos designs atuais para começar. Clique na guia “Prototype” na barra lateral direita para passar para o modo de protótipo. Aqui, vamos criar conexões entre os frames para que os usuários possam navegar pelo protótipo como em um aplicativo de verdade. As conexões do protótipo são compostas por três partes: um ponto de acesso onde a conexão começa, a conexão em si, que armazena os detalhes da interação e o destino.
Queremos criar uma interação entre o ícone do menu e a página do menu. Como o ícone do menu está aninhado, precisamos clicar duas vezes para selecioná-lo. Quando o nó de conexão aparecer, clique no ícone de conexão para criar uma seta e arraste até o frame de destino. Solte para completar a conexão. Vamos criar uma interação do menu de volta para a página inicial. Selecione a camada de texto “home”, clique no ícone para adicionar a conexão e arraste a seta de volta para a página inicial. Atualmente, nossa conexão usa as configurações de interação instantânea padrão. Vamos ver os detalhes dessas interações um pouco mais tarde.
Vamos ver como está nosso protótipo até aqui. Clique no ícone “Present” para abrir o modo de apresentação. Na parte inferior da página, podemos ver que só temos dois frames em nosso protótipo, em vez de todos os quatro. Depois que você adicionar pelo menos uma conexão ao protótipo, o Figma vai incluir apenas frames com conexões no modo de apresentação. Se clicarmos no ícone “Menu”, o Figma muda para o frame do menu. Se clicarmos na opção “Home” no menu, ele muda de volta para a página inicial. Excelente. Agora que a mecânica básica está funcionando, podemos personalizar a interação. De volta ao editor, podemos ver outros aspectos da conexão no menu “Interaction details”. Aqui, podemos selecionar um gatilho para a transição, como tocar, clicar ou passar o mouse, além de uma ação e destino. Queremos que os usuários possam acessar o menu saindo de alguns lugares no aplicativo, então, essa interação precisa parecer acessível. Com a animação instantânea padrão, perdemos o contexto de onde estávamos no aplicativo e como chegamos lá. As animações guiam os usuários pelos fluxos e comunicam as relações entre diferentes partes do nosso aplicativo.
Temos algumas maneiras de resolver esse problema no Figma. Poderíamos criar uma sobreposição que faz o menu aparecer acima das nossas outras telas ou usar uma animação inteligente para revelar o menu quando você arrasta a tela atual para a direita. Ambas as abordagens fazem nosso menu parecer facilmente acessível e estabelecem uma hierarquia que posiciona o menu em um nível diferente das outras telas. Isso também nos permite explorar alguns dos recursos de prototipagem incríveis do Figma. Mas isso nos levaria além do caminho para iniciantes. Para explorar mais, pesquise sobreposições ou animações inteligentes no Figma Help Center para encontrar mais informações. “Move in” anima os menus para que apareçam na parte superior da nossa tela existente. Estamos vendo mais informações, mas não parece que passamos para um novo local. Acho que assim está bom. Existem outros tipos de animação para explorar, então experimente. O ícone do menu está na lateral esquerda da tela, então nosso menu deve se mover pela esquerda. Clique na seta para a direita no painel “Interaction details” para definir a direção. Também podemos definir a duração para controlar a velocidade da transição usar a suavização para a animação parecer menos robótica. Não vamos explorar essas configurações agora, mas você pode aprender mais pesquisando sobre suavização no Figma Help Center.
Quando voltarmos para o frame da página inicial, a animação deve ser o inverso. Vamos selecionar “Move out” e escolher a seta apontando para a esquerda para mover o menu de volta para fora. Agora temos nosso primeiro conjunto de interações. Podemos acessar o menu das telas de pesquisa e perfil, então vamos criar essas interações a seguir. O menu “Interaction details” mostra nossas últimas configurações de animação. Vamos atualizar para corresponder à interação. Vamos repetir esse processo para a tela do perfil. Não precisamos atualizar a animação porque o Figma aplicou a mais recente de novo. Precisamos criar as interações voltando do menu para a página de perfil, atualizando a animação correspondente. Só podemos acessar a pesquisa da tela inicial, então vamos criar uma conexão a partir do ícone de pesquisa para abrir a página de pesquisa. Vamos usar a animação “push” para fazer parecer que estamos nos movendo lateralmente entre essas duas telas. Tocar em “Cancel” deve nos levar de volta para a página inicial. Vamos criar uma conexão com a animação “push” se movendo nessa direção. Agora que temos um protótipo funcional, já podemos receber feedback de outros membros da equipe. Podemos convidá-los para o protótipo em si. Podemos compartilhar nosso protótipo com nossa equipe enviando um link. Clique no botão “Share” na barra de ferramentas. Vamos atualizar as configurações de compartilhamento de links de somente pessoas convidadas para o arquivo para qualquer pessoa com o link e definir que elas podem visualizá-lo. Perfeito. Agora podemos clicar em “copy link” e compartilhar isso com nossa equipe. Os avatares da nossa equipe aparecem na barra de ferramentas à medida que eles entram. Podemos clicar no avatar de alguém paraobservar as ações enquanto a pessoa navega pelo protótipo.
O modo de observação é ótimo quando você está executando um teste de usabilidade. Qualquer pessoa pode adicionar feedback, sugestões ou perguntas aos protótipos usando os comentários. Clique no ícone de comentário para acessar a ferramenta de comentários. Agora podemos clicar em um ponto do protótipo para compartilhar nossos pensamentos. Parece que Jenny adicionou algumas perguntas nas outras páginas listadas no menu. Ela também apontou que não há como interagir com as postagens no feed. Ryhan fez uma ótima observação de que está faltando um ícone para voltar na página do menu, assim fica mais fácil para os usuários dispensarem o menu. Stella adora esta foto de Yuna. Se voltarmos para o editor e pressionarmos C para selecionar a ferramenta de comentários, podemos ver os comentários que nossa equipe fez sobre o protótipo em nossos frames. Isso nos permite juntar o feedback em um só lugar, incorporar conselhos e resolver comentários pendentes. Como Jenny mencionou, queremos uma maneira de nossos usuários interagirem com nossas postagens. Vamos adicionar alguns ícones para permitir que os usuários curtam, comentem e marquem postagens. Vamos para a página de componentes. Aqui estão alguns componentes que criamos anteriormente. Eles foram colocados em um frame horizontal de layout automático e transformados em um componente. Em seguida, podemos colocar uma instância desse componente dentro do nosso componente de postagem. Quando voltamos ao protótipo, podemos ver que as mudanças que fizemos no componente principal foram refletidas nas instâncias, e como criamos algumas coisas usando o layout automático, nossa postagem foi ajustada de maneira correspondente. Vamos terminar incorporando o feedback do Ryan. Vamos arrastar um ícone para voltar de do painel de recursos para nosso frame de menu. Depois, vamos mudar para a guia “Prototype” e adicionar uma interação nesse ícone. Também podemos atualizar a ação de voltar. Os usuários podem acessar o menu de qualquer página. A ação de voltar permite que os usuários retornem automaticamente para a página anterior sem precisarmos criar conexões separadas.
Conseguimos! Nós construímos um protótipo interativo dos nossos designs, exploramos as animações e incorporamos feedback da nossa equipe no design. Em nosso próximo vídeo, vamos preparar nosso arquivo para compartilhar recursos com nossos escritores e desenvolvedores, vamos ver como criar miniaturas, navegar pelos arquivos do visualizador, copiar código do painel de inspeção, e exportar recursos para produção.
Outras maneiras de aprimorar protótipos de alta fidelidade
Tudo pronto para melhorar ainda mais seus protótipos de alta fidelidade? Vamos discutir como o som e o vídeo podem melhorar a navegação, o engajamento do usuário e o fluxo do seu protótipo. 
Som
O som melhora a usabilidade porque dá um feedback aos usuários sobre as ações realizadas. Ele indica o status de um usuário dentro do aplicativo e ajuda a saber o que ele pode fazer a seguir. Por exemplo, os usuários do Google Chat ouvem um ping que notifica sobre uma nova mensagem quando a janela de bate-papo está minimizada ou em segundo plano.
Incorporar som nos designs de alta fidelidade torna a experiência do usuário melhor porque os humanos têm uma resposta emocional aos sons. Os sons humanizam as interações do usuário, como se o som fosse a reação do aplicativo a uma ação. No entanto, esses sons devem aumentar ou aprimorar a compreensão dos usuários sobre onde eles estão no fluxo ou confirmar uma ação, como um som de clique depois que um usuário toca em um botão. Um som pode notificar os usuários quando uma ação for concluída ou malsucedida, como quando um upload falha ou um download foi concluído. 
Por outro lado, se forem mal utilizados, os sons também podem distrair ou prejudicar. É possível que os usuários não queiram sons quando interagem com o design porque acham irritante ou estão em um local onde o som precisa estar desligado. Você deve simplificar o desligamento do som caso o usuário prefira desativá-lo. 
Vídeo
O vídeo aumenta a imersão e gera interesse para os usuários à medida que eles interagem com seu protótipo. A experiência do usuário da Netflix é um ótimo exemplo de vídeo que complementa o design. Quando você abre o Netflix, um programa de TV ou filme em destaque começa a ser reproduzido. Essa escolha geralmente é personalizada de acordo com seu histórico de visualização e incentiva você a assistir um conteúdo que você talvez não conhecesse ou tivesse interesse.
Usar vídeos no seu protótipo de alta fidelidade é uma maneira de chamar imediatamente a atenção do usuário e concentrá-la em uma área específica do aplicativo. O vídeo adiciona outra dimensão ao seu protótipo e ajuda a conquistar o interesse dos usuários. Também é mais provável que os usuários usem um aplicativo ou permaneçam em um site por mais tempo quando há vídeo incorporados. 
Ao usar vídeos nos seus próprios designs, verifique se os usuários conseguem ajustar o volume, reproduzir o vídeo e interromper o vídeo. Além disso, é necessário que os usuários possam silenciar os vídeos automaticamente ou impedir a reprodução automática, caso não tenham interesse no conteúdo.
O uso de vídeo e som também auxilia usuários que enfrentam questões de acessibilidade. Todos os vídeos e sons que você usa devem incluir transcrições e legendas ou notificações alternativas para serem acessíveis a todos os usuários. 
Como criar uma melhor experiência do usuário
Ao projetar seu protótipo de alta fidelidade, reserve um tempo para pensar nos diferentes tipos de usuários que vão interagir com o design do seu produto. Pense nas possíveis vantagens e desvantagens de usar sons e vídeos. Você está no caminho certo para criar uma experiência de usuário agradável e envolvente! 
· Para saber mais, veja este material do Toptal.com para ter mais ideias sobre como usar sons nos seus designs de IU: Sound Advice: A Quick Guide to Designing UX Sounds.
· Para saber mais sobre alguns princípios relacionados ao som e como usá-lo aumenta a confiança da marca da empresa, veja o artigo 10 Usability Heuristics For User Interface Design da NNG.
· E aqui está uma lista das práticas recomendadas de vídeo do UX Planet que mostra como adicionar vídeos a aplicativos de maneira inclusiva para todos os usuários, incluindo aqueles com demandas de acessibilidade.
Revisão semana 5
Finalização: Como criar protótipos de alta fidelidade
Pronto, você conseguiu! Vamos recapitular rapidamente o que você aprendeu nesta parte do curso, que tratava da criação de protótipos de alta fidelidade no Figma. Primeiro, você aprendeu que protótipos de alta fidelidade devem ter elementos visuais, navegação e interação.
Você também aprendeu a tornar algo interativo no Figma, o que também chamamos de “fazer uma conexão”. No Figma, demonstrei as seis etapas da criação de um protótipo de alta fidelidade:
posicionar os mockups, conectar as telas, adicione detalhes de interação, ajustar a animação, completar todas as telas e compartilhar o trabalho. Você também explorou dois novos conceitos: gestos e movimentos. Lembre que um gesto é qualquer método de interação entre um usuário e as informações do dispositivo pelo toque.
Movimentos são uma maneira de animar elementos de design estáticos para chamar a atenção do usuário e contar histórias. Por fim, Shabi compartilhou algumas coisas a serem lembradas para garantir que seus designs sejam acessíveis quando falamos de gestos e movimentos.
Então, parabéns! Você está no caminho certo para criar um protótipo de alta fidelidade. Isso é uma grande conquista. Encontro você na parte final deste curso, que é sobre testar e iterar o protótipo de alta fidelidade. Continue o ótimo trabalho.
Planejar um estudo de usabilidade
Bem vindo à semana ¨
Bem-vindo de volta. Agora que você tem um protótipo sólido de alta fidelidade, é hora de testar seus designs novamente. Para começar, você aplicará seu conhecimento de pesquisa para testar seu protótipo de alta fidelidade.Os designers de UX tendem a seguir etapas semelhantes não importa o nível de fidelidade do design que estão testando. Então, se você já concluiu o curso sobre realizar pesquisas e testar conceitos iniciais, há menos para você aprender sobre o processo desta vez. Depois de testar seus designs, você incorporará feedbacks para iterar em seu protótipo atual. Pode levar algumas tentativas para chegar ao seu design final, mas ajudaremos você a descobrir quando eles estiverem bons o suficiente para passar adiante a uma equipe de engenharia para criação. Depois, você aprenderá como transferir designs a engenheiros para produção.
Por fim, você transformará tudo o que aprendeu sobre pesquisa de usuários, ideação, wireframes, designs e protótipos em um estudo de caso para seu portfólio. Se você fez o curso sobre pesquisa e teste com meu colega Jason, possivelmente já assistiu nossos vídeos sobre como criar um plano de pesquisa, realizar estudos de usabilidade e evitar vieses. Se quiser um lembrete, darei a você um resumo nos próximos vídeos. Se não, é possível seguir diretamente às atividades. Vamos começar.
Planejar um estudo de pesquisa de UX
Olá. Se estiver fazendo os cursos deste programa em ordem, você se lembrará de explorar pesquisas e estudos de usabilidade em um curso anterior.
Como já faz um tempo, achei que poderia ser útil revisar um breve resumo de como escrever um plano de pesquisa de UX antes de iniciar seu próximo estudo de usabilidade.
Se este for o primeiro curso do programa que você está fazendo, convém voltar e rever os vídeos e concluir as atividades sobre a realização de um estudo de usabilidade antes de seguir em frente.
Ou mesmo se você quiser apenas um breve lembrete, há links dos vídeos mais úteis para você no texto do curso.
Vamos lá. Estamos prontos para analisar a primeira etapa de um estudo de pesquisa de UX: planejar o estudo. Como lembrete, um plano de pesquisa é um exame por etapas de um grupo de usuários e das necessidades deles. Um plano de pesquisa de UX é composto por sete elementos: o histórico do projeto, as metas da pesquisa, as perguntas de pesquisa detalhadas, os indicadores principais de desempenho (ou KPIs), a metodologia, os participantes, e o roteiro para as perguntas que você fará aos participantes do estudo. Vamos ver os detalhes de cada um. O histórico do projeto resume a situação que levou à necessidade de fazer essa pesquisa. É basicamente uma breve explicação sobre por que você está fazendo a pesquisa, que pode ser dada a qualquer pessoa que perguntar.
Sua meta ao criar o histórico do projeto é tentar responder o que levou você a realizar esta pesquisa. Em seguida, as metas da pesquisa definem o que você está tentando resolver com esse design, ou que resultados de pesquisa você gostaria de ter.
As metas de sua pesquisa serão diferentes de projeto para projeto. Elas se encaixam em uma das três categorias, dependendo de quando durante o ciclo de vida do produto você conduz a pesquisa.
Suas metas de pesquisa precisam responder à pergunta: como os resultados da pesquisa afetam nossas decisões de design? Depois disso, você escreverá perguntas de pesquisa detalhadas para o seu projeto. Estas são as perguntas que você planeja responder durante o estudo.
As questões de pesquisa precisam ser acionáveis e específicas, e é necessário evitar perguntas de indução. Mas tenha em mente que essas não podem ser as perguntas literais que você planeja fazer aos participantes do estudo. Em vez disso, a meta é descobrir quais perguntas você precisa que o estudo responda.
Em seguida, determine seus indicadores principais de desempenho, ou KPIs, que são as medidas críticas de progresso em direção a uma meta final.
Em um estudo de pesquisa de UX é possível considerar KPIs como a quantidade de tempo que um usuário gasta em uma tarefa, a utilização do usuário da funcionalidade de navegação em comparação com a funcionalidade de pesquisa, as taxas de erro do usuário, as taxas de desistência, e as taxas de conversão, e a escala de usabilidade do sistema. Esse é um questionário para medir a usabilidade de seus designs.
Ao determinar os KPIs do seu estudo de pesquisa, considere a pergunta: o que indica que estamos progredindo em direção à nossa meta final?
O próximo passo é a metodologia, quando você vai descrever as etapas que planeja seguir para realizar sua pesquisa, incluindo como você coletará e analisará os dados. Em seguida, determine quem serão os participantes do estudo. Quem você precisa que se envolva na pesquisa para garantir que você esteja estudando as métricas certas? Por fim, você precisará escrever um roteiro para o seu estudo. Isso também é conhecido como guia de discussão. Você precisará determinar quais perguntas quer fazer aos participantes durante sua pesquisa. Estes são os sete elementos de um plano de pesquisa de UX. Espero que essa breve visão geral tenha refrescado sua memória sobre como planejar um estudo de pesquisa de UX. Se precisar de mais orientações, confira os textos do curso e revisite os vídeos do curso anterior. Vamos continuar.
Saiba mais sobre como planejar um estudo de pesquisa de UX
É hora de você planejar um estudo de pesquisa de UX focado em seu protótipo de alta fidelidade. Se você está fazendo os cursos deste programa de certificação em ordem, já realizou estudos de usabilidade para receber feedback sobre protótipos antes. Você certamente se lembra de como planejar um estudo de pesquisa de UX e provavelmente já consegue começar.
Se você é iniciante no programa de certificação ou gostaria de uma rápida atualização, é possível revisar esses recursos de um curso anterior sobre o planejamento de um estudo de pesquisa de UX.
Primeiro, assista a este vídeo para conhecer os sete elementos de um plano de pesquisa em alto nível.
Em seguida, confira os vídeos e textos a seguir, que se aprofundam em cada um dos sete elementos de um plano de pesquisa e crie seu próprio plano de pesquisa à medida que avança.
· Histórico do projeto, metas de pesquisa, perguntas da pesquisa. Determine por que você está realizando o estudo, as metas que espera alcançar e os tipos de perguntas que você fará para testar seu produto com usuários reais.
· Indicadores principais de desempenho (KPIs). Aprofunde-se nos diferentes tipos de KPIs que podem ser testados ao longo de seu estudo. Se quiser saber mais sobre KPIs, confira também este texto sobre como usar indicadores principais de desempenho (KPIs).
· Metodologia. Analise as etapas que você seguirá ao realizar seu estudo de usabilidade.
· Participantes. Saiba como e onde recrutar participantes para seu estudo. Se quiser saber mais sobre os participantes, confira também este texto sobre como recrutar um grupo diversificado de participantes.
· Roteiro. Entenda como organizar, preparar e formular adequadamente as perguntas da entrevista.
Junto com esses recursos, é possível usar o modelo para um plano de pesquisa de UX. Para usar o modelo, clique no link abaixo e selecione "Usar modelo". 
Link do modelo: Estudo de pesquisa de UX – Plano [Modelo].
Este modelo detalhado inclui perguntas a serem feitas aos participantes em cada estágio do seu estudo. Imprima o modelo e adicione suas observações a cada seção enquanto assiste aos vídeos.
Atividade: Planejar um estudo de pesquisa de UX para seu projeto de portfólio
Introdução da atividade
Nesta atividade, você aprenderá a criar um plano de pesquisa para testar o protótipo que fez para o seu projeto de portfólio. Um plano de pesquisa é um processo usado como modelo para descobrir quem, o quê, quando, onde, por que e como, em relação à pesquisa de UX. Um plano de pesquisa bem feito prepara você para o sucesso porque permite criar um plano para testar seu design e comparar os resultados com as metas de pesquisa.
Um plano de pesquisa eficaz contém sete elementos:
· Histórico do projeto: uma breve explicação de por que você está fazendo a pesquisa e o que quer aprender com ela.
· Perguntas da pesquisa: perguntas que você planeja responder como resultado do estudo de usabilidade
· Indicadoresprincipais de desempenho, ou KPIs (na sigla em inglês): indicadores que avaliam o progresso em direção às suas metas de pesquisa
· Metodologia: a maneira como você realizará sua pesquisa
· Participantes: as pessoas que vão participar da sua pesquisa
· Roteiro: um roteiro de entrevista com tarefas e perguntas para os participantes
Depois de concluir esta atividade, será possível comparar seu trabalho com um exemplo completo no próximo item do curso.
Instruções passo a passo
Esta atividade se baseia em outras neste curso. Se você não tentou realizar as atividades anteriores, volte e complete-as antes de iniciar este exercício.
Etapa 1: Acessar seu modelo de plano de estudo de pesquisa de UX
Para usar o modelo deste item do curso, clique no link abaixo e selecione “Usar modelo”.
Link para o modelo: Estudo de pesquisa de UX – Plano [Modelo].
Etapa 2: Adicionar detalhes do projeto e descrever o histórico
Adicione o título do seu projeto, seu nome, as partes interessadas relevantes e a data na seção Introdução do modelo.
Em seguida, escreva um parágrafo que descreva o histórico do projeto. Ele precisa explicar brevemente o objetivo de sua pesquisa e responder à pergunta: "o que me levou a realizar esta pesquisa em primeiro lugar?"
Etapa 3: Identificar as metas da pesquisa
Adicione uma ou duas metas de pesquisa específicas do seu projeto à Introdução. Verifique se essas metas abordam o problema que seu design está tentando resolver. Ao identificar metas, pergunte a si mesmo: "como os resultados da pesquisa podem afetar minhas decisões de design?"
Etapa 4: Escolher as perguntas da pesquisa
Em seguida, discuta ideias para duas a três perguntas de pesquisa para o seu projeto e as insira ao lado de Perguntas de pesquisa (em um estudo real, você precisa incluir pelo menos cinco perguntas). Ao elaborar perguntas, considere quais informações você precisa conseguir com o estudo.
Suas perguntas de pesquisa precisam ser:
· Acionáveis: é necessário ficar claro como você conseguirá as respostas para as perguntas, e você precisa saber quando encontrou as respostas de que precisa
· Específicas: as perguntas precisam ter um foco claro e levar a dados úteis
· Neutras: as perguntas precisam ser formuladas objetivamente, para que não haja suposições
· Qualitativas ou quantitativas: as perguntas precisam ser projetadas para coletar dados qualitativos ou quantitativos
Lembre-se de que as perguntas de pesquisa não são perguntas de inspeção. Portanto, você não as fará durante as entrevistas. Em vez disso, elas representam as questões maiores que você quer que seu estudo responda.
Etapa 5: Decidir quais KPIs usar
Agora é hora de escolher os KPIs para medir seu progresso em direção às suas metas de pesquisa. Escolha pelo menos um KPI da lista abaixo e adicione-o à seção Indicadores principais de desempenho (KPIs). Os KPIs selecionados ajudarão você a avaliar até que ponto seu design atual atende às metas originais definidas para o projeto.
Eles fornecem feedback sobre o que está funcionando, o que não está e o que precisa ser corrigido. Os KPIs podem medir parâmetros diferentes, então pense no que você precisa saber e como medir essas informações.
É possível escolher entre os seguintes KPIs comuns na pesquisa de UX:
· Tempo da tarefa: quanto tempo um usuário leva para concluir uma tarefa. Considere todos os fatores que podem afetar seus dados, como participantes com necessidades de acessibilidade.
· Uso de navegação versus pesquisa: o número de usuários que encontram coisas por meio da navegação, em comparação com aqueles que usam a função de pesquisa para encontrar o que precisam
· Taxas de erro do usuário: com que frequência os usuários cometem erros ao concluir uma tarefa
· Taxas de desistência: o número de usuários que desistem antes de atingir a meta
· Taxas de conversão: o número de usuários que atingem a meta com sucesso
· Escala de usabilidade do sistema, ou SUS: dez perguntas que avaliam a facilidade ou dificuldade de usar seu produto
Etapa 6: Descrever a metodologia
Em seguida, descreva sua metodologia na seção Metodologia. Sua metodologia é o plano que você seguirá ao realizar a pesquisa, incluindo como coletará e analisará os dados.
Tornar sua metodologia parte do plano de pesquisa documenta sua abordagem para as partes interessadas e permite que outros pesquisadores repitam seu estudo.
A seção de metodologia precisa incluir:
· Os procedimentos que você usará para coletar informações para responder às perguntas de pesquisa
· A hora e o local dos testes e das entrevistas de usabilidade
· Quem vai realizar os testes
· Como os testes serão realizados
Etapa 7: Escolher participantes
Em seguida, selecione quatro ou cinco possíveis participantes para o seu estudo. Tente incluir pessoas com diversas origens e experiências, incluindo grupos marginalizados, para evitar enviesar os resultados. Lembre-se de que nem todos são adequados para sua pesquisa. Portanto, considere quem pode fornecer os dados mais úteis. Para este exercício, os participantes podem ser pessoas que você conhece, como familiares, amigos, vizinhos ou colegas de trabalho.
Registre os participantes escolhidos na seção Participantes. Em seguida, resuma as características básicas deles, incluindo experiência, idade, gênero e necessidades de acessibilidade. Também é possível incluir maneiras de persuadir os participantes em potencial a se inscreverem (por exemplo, pagamento, cartões-presente, almoço etc.)
Etapa 8: Escrever um roteiro
Por fim, escreva um roteiro para seu estudo de usabilidade. Também conhecido como guia de discussão, um roteiro apresenta o estudo e lista as tarefas e perguntas que um pesquisador faz aos participantes em uma entrevista. Um bom roteiro ajudará você a conseguir informações sobre as metas, os pensamentos e os problemas dos usuários.
Reflita sobre as etapas do seu plano de pesquisa enquanto escreve seu roteiro. Suas perguntas precisam abordar as metas, as perguntas de pesquisa e os KPIs. Seu roteiro precisa ter quatro seções:
· Introdução: comece se apresentando e cumprimentando os participantes. Informe-os sobre o que esperar e descreva o papel da entrevista em seu projeto maior. Por fim, não se esqueça de pedir permissão se planeja gravar a sessão.
· Aquecimento: para iniciar a conversa, faça aos participantes algumas perguntas básicas sobre eles mesmos e as opiniões gerais deles sobre produtos como o seu.
· Tarefas e perguntas: defina as tarefas que você quer que os participantes realizem e três a cinco perguntas para saber mais sobre a experiência deles ao concluir essas tarefas.
· Conclusão e considerações finais: este é o momento de fazer as perguntas finais e agradecer aos participantes pela participação.
Seu roteiro também precisa ser:
· Consistente: as perguntas e tarefas são redigidas da mesma maneira para cada participante
· Aberto: as perguntas incentivam a discussão e a reflexão em vez de respostas "sim ou não"
· Objetivo: as perguntas e tarefas não levam os participantes a uma resposta específica ou transmitem o viés pessoal do pesquisador
· Voltado à meta: as perguntas e tarefas se relacionam diretamente com a meta da pesquisa
Exemplo
Aqui está um exemplo completo de um app de entrega de pizza chamado Zia's Pizza, que tem um plano de pesquisa completo para utilizar em um estudo de usabilidade. Também é possível visualizá-lo seguindo o link abaixo.
Para ver o exemplo completo deste item do curso, clique no link abaixo e selecione "Usar modelo". 
Link para o exemplar: Plano de pesquisa de UX – Zia's Pizza.
Avaliação do exemplo
Veja como criamos o plano de pesquisa para o app Zia’s Pizza:
· Histórico do projeto: Nosso histórico de projeto explica os motivos do estudo, incluindo a compreensão da jornada do usuário e a identificação de pontos problemáticos.
· Metas: Identificamos duas metas claras do projeto para entender por que os clientes estão usando o app e o grau de facilidade do uso dele. 
· Perguntas da pesquisa: Desenvolvemos três perguntas de pesquisa sobre a eficácia do fluxo do usuário e os elementos visuaisdo app.
· KPIs: Identificamos três KPIs, ou indicadores principais de desempenho, para medir a experiência do usuário: taxa de erro do usuário, pesquisa em comparação à navegação e SUS (escala de usabilidade do sistema).
· Metodologia: Decidimos realizar um estudo de usabilidade moderado para satisfazer nossas metas de pesquisa e responder às nossas perguntas.
· Participantes: Listamos as informações básicas para os cinco participantes, incluindo históricos, gêneros e idades deles. Também anotamos as necessidades de acessibilidade.
· Roteiro: Criamos um roteiro para os participantes que é dividido em quatro partes principais:
· Uma Introdução
· Uma preparação de aquecimento 
· Tarefas e perguntas para cada participante concluir
· Uma conclusão e considerações finais
Realizar um estudo de usabilidade
Realizar um estudo de usabilidade
Estou de volta para mais um resumo rápido. Anteriormente, exploramos como planejar um estudo, que é a primeiro de quatro etapas no no processo de estudo de pesquisa de UX. Agora é hora de analisar a segunda etapa: realizar pesquisas. Como lembrete, se você quiser uma introdução mais aprofundada a esses conceitos, confira os textos do curso para encontrar os vídeos originais sobre a realização de um estudo de usabilidade. Certo. Vamos começar.
Um estudo de usabilidade é um método de pesquisa que avalia a facilidade dos participantes em completar as tarefas principais de um produto. Durante um estudo de usabilidade, os pesquisadores observam os participantes para entender como eles interagem com o protótipo do produto e concluem as tarefas. Em seguida, os designers de UX usam os insights do estudo para fazer melhorias nos designs deles. Há dois tipos de estudos de usabilidade: moderados e não moderados. Em estudos de usabilidade moderados, uma pessoa orienta os participantes pelo estudo em tempo real. A pessoa que orienta os participantes pelo estudo é conhecida como moderador. A meta do moderador é atribuir aos participantes diferentes tarefas a serem concluídas dentro do produto e observar os participantes interagirem ele. Além disso, eles coletam feedbacks ao longo do caminho. Estudos moderados permitem que o moderador faça perguntas específicas, acompanhe em tempo real e crie relacionamento com os participantes.
Por outro lado, em estudos de usabilidade não moderados os participantes testam os protótipos sem a presença de um moderador. Normalmente, o estudo é gravado em vídeo e a equipe de UX analisa a gravação após o estudo. Como os participantes completam tarefas no próprio tempo e espaço, pode ser mais fácil receber feedback preciso. Além disso, eles podem se sentir mais confortáveis para serem sinceros quando não há um moderador na sala. Neste programa, já realizamos um estudo de usabilidade em nossos protótipos de baixa fidelidade.
A seguir, faremos outro estudo de usabilidade em nossos protótipos de alta fidelidade. Por que realizar vários estudos de usabilidade? Como seu produto se parece e funciona de modo diferente em cada fase, é possível realizar quantos estudos de usabilidade precisar para fazer alterações no seu design e melhorar a experiência do usuário. É possível realizar estudos de usabilidade em qualquer ponto do processo de design. Tenha em mente que quanto mais tarde no processo você realizar um estudo de usabilidade, mais caro será para fazer mudanças, porque seu design estará mais adiantado no processo de design e mais complexo. Mais uma coisa. Determinar o tamanho do seu estudo depende do projeto, mas cerca de cinco participantes é um bom começo. É um tamanho de amostra grande o suficiente para coletar dados reais, mas não é tão grande que o estudo custe muito dinheiro ou leve muito tempo. Se você quiser assistir a um estudo de usabilidade em ação, confira os vídeos do curso anterior contidos nos links do texto desta lição. Isso é tudo para a segunda etapa de um estudo de pesquisa de UX, realizar a pesquisa. É hora de analisar a próxima etapa: sintetizar os resultados da pesquisa. Vamos lá.
Saber mais sobre como realizar um estudo de usabilidade
Agora que seu estudo de usabilidade foi planejado detalhadamente, você está pronto para conduzi-lo. Se você é novo no programa de certificação e este é seu primeiro estudo de usabilidade ou se quiser apenas relembrar itens, é possível revisitar o Curso 4 do Certificado de Design de UX do Google, chamado Conduzir pesquisa de UX e testar conceitos iniciais, e se aprofundar na Semana 2, que trata da realização de pesquisas com estudos de usabilidade. 
Em particular, convém analisar esses recursos daquela semana do programa: 
· Neste vídeo exploramos as práticas recomendadas para iniciar um estudo de usabilidade. Se você está planejando realizar um estudo de usabilidade moderado, este vídeo ajudará a aprender como criar um relacionamento com os participantes e preparar o estudo para o sucesso antes de se aprofundar nas perguntas.
· Neste vídeo exploramos as práticas recomendadas de comunicação durante o estudo, como fazer perguntas abertas, fazer perguntas de acompanhamento e resumir as respostas dos participantes para confirmação.
· Neste texto, vamos ajudar você a aprender mais sobre as práticas recomendadas de estudo de usabilidade, incluindo ajudar os participantes a se sentirem confortáveis, colocar as pessoas em primeiro lugar, preencher a papelada necessária, comunicar-se claramente e fazer as perguntas certas como pesquisador.
· Fazer boas anotações durante os estudos de usabilidade é fundamental. Confira este vídeo em que apresentamos métodos de anotações que são comumente usados durante os estudos de usabilidade, e este vídeo em que nos aprofundamos em como usar uma planilha para fazer anotações. Também convém utilizar o modelo para fazer anotações na planilha, que contém uma guia vazia que pode ser copiada para seu próprio estudo e uma guia preenchida para servir de exemplo, que é baseada no app para passear com cães de um curso anterior do programa. 
Para usar esse modelo, clique no link abaixo e selecione "Usar modelo". 
Link para o modelo: modelo de planilha de anotações
É possível assistir a um estudo de usabilidade simulado e não moderado, começando com este vídeo introdutório. Há cinco participantes no estudo simulado: Participante A, Participante B, Participante C, Participante D, e Participante E. Este exemplo se desenvolve ao longo da semana 2 do quarto curso, se você quiser saber mais.
Tudo o que você precisa saber para realizar com sucesso um estudo de usabilidade está incluído nesta semana de uma parte anterior do programa, então aprofunde-se o quanto for necessário. Boa sorte com seu estudo de usabilidade.
Atividade: Realizar um estudo de usabilidade para o seu projeto portfólio
Introdução da atividade
Nesta atividade, ajudaremos você a aprender como realizar seu próprio estudo de usabilidade para um projeto de design de UX. Um estudo de usabilidade é um método de pesquisa que avalia a facilidade dos participantes em concluir tarefas em um design. Um estudo de usabilidade eficaz fornece feedback acionável sobre seu design, o que ajuda você a decidir o que fazer em seguida. Nesta atividade, você realizará um estudo de usabilidade para seu projeto de portfólio usando o plano de pesquisa que você já criou, bem como o protótipo em que está trabalhando.
Depois de concluir esta atividade, será possível comparar seu trabalho com um exemplo completo no próximo item do curso.
Instruções passo a passo
A esta altura, você precisa ter um plano de pesquisa de UX concluído e um protótipo de trabalho para o seu projeto de portfólio. Você usará esses recursos para realizar seu estudo de usabilidade. Portanto, precisará voltar e concluir as autoavaliações anteriores, se ainda não fez isso.
Vamos começar analisando como iniciar uma entrevista. Uma entrevista é a parte de um estudo de usabilidade em que você dá aos participantes suas tarefas de usabilidade e faz perguntas de acompanhamento. Fazer com que os participantes se sintam à vontade antes de uma entrevista pode parecer algo casual, mas é extremamente