Semana da Programação

R$128 de desconto!
Oferta acaba em:

0

dias

00

hrs

00

min

00

seg

Primeiras aulas do curso Prototipagem e UX parte 2: linkando telas no Adobe XD

Prototipagem e UX parte 2: linkando telas no Adobe XD

Contexto e cores - Introdução

Olá! Sou Natan e dou as boas-vindas à segunda parte do curso de prototipação, no Adobe XD. Na primeira parte, paramos no fluxo de login, na tela de início de pagamento de conta.

Nessa segunda parte, estudaremos:

Exploraremos esses conteúdos e muito mais! Vamos começar?

Contexto e cores - Cores Padrão

Vamos começar os estudos da segunda parte do curso de prototipação?

Abriremos o projeto que iniciamos anteriormente no Adobe XD. Neste curso, note que estou usando o Mac, justamente para mostrar que o arquivo XD que criamos pode ser utilizado tanto no Mac, quanto no Windows (a mesma forma que os arquivos produzidos no Photoshop ou no Illustrator).

Com o Adobe XD, não temos problemas de cross-platform, ou seja, de criar o arquivo em um sistema operacional e não conseguir manipulá-lo em um sistema diferente.

Antes de iniciarmos a produção de mais telas — referentes ao escaneamento de boleto bancário, entre outras funções —, repare que fizemos um rodapé à parte. Caso precisemos alterar algo, poderemos alterar somente o original, e todas as suas cópias serão alteradas, automatica e simultaneamente.

O que aconteceria, por exemplo, se o branding designer (a pessoa que desenvolveu a identidade visual do Bytebank) nos falasse que a cor da marca agora é roxa, em vez de verde?

Nesse caso, poderíamos selecionar o maior retângulo da layer de paleta de cores, clicar no retângulo verde à esquerda de "Fill", no menu direito, e então selecionar a cor roxa.

à direita, paleta de cores mostrando a cor roxa e quatro diferentes tons de verde, do mais escuro para o mais claro

No entanto, com esse processo, a cor não é aplicada automaticamente às outras telas. Por quê? Vamos acessar o painel de "Assets", por meio do atalho "Ctrl + Shift + Y" ou "Command + Shift + Y".

No menu esquerdo que abrimos, em "Colors", note que é possível definir cores padrão. Sendo assim, vamos selecionar todas as layers de cor, com os tons de verde que havíamos definido, e clicaremos no sinal de soma (+), à direita de "Color".

parte da tela do adobe xd. à direita, paleta de cores com cinco diferentes tons de verde, listados do mais escuro para o mais claro. à esquerda, menus "assets", "colors" e "character styles"

Outra forma de iniciarmos a edição é clicando com o botão direito do mouse no retângulo verde e selecionando "Add Color to Assets", ou acionando o atalho "Shift + Command + C" em Mac, e "Shift + Ctrl + C" no Windows.

cursor selecionando a opção "add color to assets"

Feito isso, as cores selecionadas serão adicionadas ao painel, em "Colors":

menu "colors" contendo uma paleta com cinco tons de verde, listados do mais claro para o mais escuro, com exceção do último, que seria o terceiro na gradação

Na sequência, clicaremos com o botão direito do mouse no tom de verde do canto direito, selecionarmos "Edit" e alteraremos a cor para roxo. As telas em que aquele tom de verde era utilizado, serão alteradas, automaticamente.

à esquerda, paleta de cores com um dos tons de verde alterado para roxo. à direita, telas da aplicação com tonalidade roxa

Simples, não? Porém, a alteração não foi aplicada nas telas "Ag e Conta" e "Atalhos"! Vamos fazer um teste para verificar o que aconteceu. Para isso, iremos desfazer a aplicação da cor roxa.

Desbloquearemos a tela "Ag e Conta", acionando o atalho "Command + L" ou "Ctrl + L", dependendo do sistema operacional. Em seguida, aplicaremos novamente a cor roxa, seguindo o mesmo caminho utilizado anteriormente. Após desbloquearmos a tela, a alteração de cor será aplicada a ela também. Ou seja, algumas telas não foram alteradas porque estavam bloqueadas.

Sendo assim, desbloquearemos as telas que não foram alteradas ("Atalhos", "Digital", "Carregando" e "Menu aberto"). Clicaremos com o botão direito do mouse no último tom de verde da paleta e selecionaremos "Edit" para conferir se todas as telas acompanharam a troca de cor.

Analisando a sincronização, perceberemos que a cor do texto dos ícones de atalho não foram alteradas, permanecendo verdes.

captura do adobe XD mostrando que, nas telas da aplicação, a cor do texto continua verde

Para que também sejam alterados, clicaremos nos textos para selecioná-los. No painel à direita, clicaremos no retângulo de "Fill" e, com a ferramenta de conta-gotas, clicaremos no verde que estamos manipulando, em "Assets > Colors", à esquerda da tela.

captura do adobe XD mostrando a seleção da cor verde

Após aplicarmos o mesmo tom de verde aos três textos, se clicarmos novamente no último tom de verde da paleta para editá-lo, perceberemos que essa ação é possível - ao navegarmos pela seleção de cores, todos os itens coloridos com esse tom de verde serão alterados simultaneamente.

Esse recurso proporciona muita flexibilidade, principalmente em estágios iniciais de um projeto, quando ainda não há certeza e faltam estudos acerca do design.

No rodapé da tela "Home", utilizamos a cor branca para os ícones e seus respectivos atalhos. Será se existe a necessidade de criar uma cor padrão para o branco, que possui hexadecimal decorável (#FFFFFF)?

É comum precisarmos trocar as cores de um projeto, mas de repente, se for necessário trocar o tom do verde escuro para um mais claro, dependendo da claridade, o branco pode se tornar uma má esscolha.

Portanto, pensando na possibilidade de trocarmos a cor de todos os ícones e seus respectivos textos, é interessante definirmos o branco como uma cor padrão. Sendo assim, selecionaremos o texto "Poupança" e seu respectivo ícone, e clicaremos no sinal de soma (+), à direita de "Colors", no painel à esquerda. Assim, o branco será adicionado à paleta de cores padrão.

à esquerda, paleta de cores do menu "colors" contendo alguns tons de verde a cor branca. à direita, barra inferior da nossa aplicação, colorida de verde e com os textos em branco

Feito isso, se for necessário trocar a cor branca, bastará clicarmos nela em "Assets > Colors" e então escolhermos outra cor. A substituição será feita automaticamente.

Mas, atenção! As telas que tinham fundo branco também trocarão de cor. O que fazer caso precisemos trocar somente a cor dos ícones e textos, mantendo o branco que é utilizado como fundo de tela? A resposta é: depende. Para alterar somente a cor dos ícones e seus respectivos textos, podemos criar símbolos específicos.

Para isso, deletaremos o branco de "Colors", clicando nele com o botão direito no mouse e selecionando "Delete".Na sequência, logo acima do rodapé, encontraremos os ícones isolados. Clicaremos com o botão direito do mouse no desenho do cofre em forma de porquinho e selecionaremos "Make Symbol". Também podemos acionar o atalho "Command + K" ou "Ctrl + K".

cursor selecionando a opção "make symbol" do menu de contexto

Repetiremos esse processo para os outros ícones (cartão, à lupa e menu). Em seguida, deletaremos os ícones que estavam no rodapé e inseriremos os símbolos nos respectivos locais.

Feito isso, caso seja necessário alterar os ícones, basta selecionarmos os originais, localizados acima do rodapé, e clicarmos no retângulo de "Fill" e de "Border", no painel à direita, colorindo-os com as cores desejadas.

à esquerda, ícones da nossa aplicação realçados em um retângulo. à direita, opções "fill" e "border" do adobe XD indicadas com setas

É possível aplicar diversas alterações por meio de "Assets", no painel à esquerda, como criar símbolos e adicionar cores padrão. O mais bacana é a possibilidade de modificar as cores de forma fácil e rápida.

Adiante, exploraremo o que mais podemos alterar nos ícones e nos botões que temos na cor preta.

Contexto e cores - Mais algumas cores

Neessa etapa, vamos trabalhar com os float action buttons, ou seja, os botões de navegação de abas. Anteriormente, na primeira parte desse curs (quando criamos o projeto), selecionamos um tom de verde aleatório para o botão com o sinal de soma (+).

tela do adobe XD evidenciando o botão "+" da nossa aplicação

O tom selecionado para ele não está na paleta de "Colors", tanto que, se o colorirmos com um dos tons contidos nela, obteremos um resultado insatisfatório.

Como queremos que o rodapé da nossa aplicação dê a sensação de algo sólido, como se fosse o "chão" da tela, vamos dar preferência a cores mais escuras. Perceba que esse tipo de percepção é muito subjetiva, mas que deve ser levada em consideração.

Adicinaremos o tom de verde do icone + a dois locais:

menu "Fill" com um tom de verde selecionado

menu de contexto com a opção "assets > colors" selecionada

No entanto, ao adicionarmos a cor a "Assets > Colors", repare que foram adicionadas as duas cores utilizadas no botão: verde e branco. Não é o que queremos, pois se adicionarmos a cor branca às cores padrão, ao editá-la, todos os locais que contêm esse hexadecimal também serão editados.

Como podemos evitar que isso aconteça? Estudaremos duas maneiras. A primeira é bloquear os símbolos ou as camadas que queremos manter brancas, o que pode ser feito com "Command + L" ou "Ctrl + L". A segunda é uma improvisação: substituir o branco do botão que estamos editando por outra cor muito semelhante. Trocaremos a última letra "F" do hexadecimal por "E" (#FFFFFE).

tela de seleção de cor, evidenciando o código hexadecimal #FFFFFE

A diferença é praticamente imperceptível, mas, como o hexadecimal é diferente, ao adicioná-lo a "Assets > Colors", poderemos editá-lo sem comprometer os ícones e camadas que desejamos manter brancos. Somente o que está colorido com o hexadecimal #FFFFFE será alterado.

Ainda podemos modificar o tom do preto dos botões de login, considerando que, provavelmente, utilizaremos essa cor para os call to actions da aplicação. Sendo assim, clicaremos sobre o tom de preto do botão de "Entrar na minha conta", abriremos o quadro "Solid Color" do menu "Fill", e trocaremos o último número do hexadecimal, substituindo #232323 por #232324. Ficou um pouco mais azulado, mas é uma mudança bem sutil.

Com o hexadecimal alterado, adicionaremos esta cor à paleta de "Assets > Colors", selecionando o preto do botão e clicando no sinal de soma (+) à direita de "Colors".

paleta de cores do adobe xd, agora com o preto adicionado

Como criamos um símbolo para esse botão, suas cópias já foram alteradas automaticamente.

Assim, adicionamos mais algumas cores padrão, que facilitam o nosso trabalho. Falta igualar o tom de verde dos float action buttons das telas "Home" e "Menu aberto".

comparativo entre as telas "home" e "menu aberto"

Faremos isso selecionando cada um dos float action buttons da tela "Menu aberto", com a tecla "Ctrl" ou "Command" pressionada, e captando a cor padrão utilizada no botão de "Home", com a ferramenta de conta-gotas de "Fill".

à esquerda, uma seta realça o tom de verde que iremos utilizar. à direita, o botõa "conta-gotas" é explicitado, também com uma seta

Repetiremos o processo para as partes brancas desses botões, substituindo o hexadecimal #FFFFFF por #FFFFFE, que adicionamos às cores padrão.

à esquerda, uma seta realça o tom de brancoque iremos utilizar. à direita, o botõa "conta-gotas" é explicitado, também com uma seta

Lembrando que mantivemos a tecla "Ctrl" pressionada para acessar e editar especificamente o elemento que desejamos, dentro do grupo em que está. Não podemos esquecer de aplicar o verde padrão também aos textos dos botões.

Estamos refazendo esse processo de colorir os elementos, mas se tivéssemos utilizado esses recursos desde o começo, isso não seria necessário. Aprendemos dessa forma para valorizarmos essa funcionalidade. Criar um padrão de cores na prototipagem é algo que facilita e agiliza muito o desenvolvimento de projetos.

Talvez você pense que nunca será necessário alterar a identidade visual, e tudo bem. No entanto, e se algo acontecer e você mudar de ideia? É muito mais seguro prevenir, do que remediar, certo?

Feitas as alterações, se tentarmos editar a cor padrão dos float action buttons, constataremos que funcionou. Se precisarmos trocar a cor deles, futuramente, teremos mais facilidade.

Importante: Lembre-se de salvar o projeto!

Adiante, começaremos a desenvolver a tela do boleto.

Sobre o curso Prototipagem e UX parte 2: linkando telas no Adobe XD

O curso Prototipagem e UX parte 2: linkando telas no Adobe XD possui 211 minutos de vídeos, em um total de 50 atividades. Gostou? Conheça nossos outros cursos de UI - User Interface em Design & UX, ou leia nossos artigos de Design & UX.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI - User Interface acessando integralmente esse e outros cursos, comece hoje!

  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

  • Desconto

Premium

Desconto
  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$75 R$64,33
à vista R$900 R$772
Matricule-se

Premium Plus

Desconto
  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$100 R$89,33
à vista R$1.200 R$1.072
Matricule-se

Max

Desconto
  • 1206 cursos

    Cursos de programação, UX, agilidade, data science, transformação digital, mobile, front-end, marketing e infra.

  • Certificado de participação

    Certificado de que assistiu o curso e finalizou as atividades

  • App para Android e iPhone/iPad

    Estude até mesmo offline através das nossas apps Android e iOS em smartphones e tablets

  • Projeto avaliado pelos instrutores

    Projeto práticos para entrega e avaliação dos professores da Alura com certificado de aprovação diferenciado

  • Acesso à Alura Start

    Cursos de introdução a tecnologia através de games, apps e ciência

  • Acesso à Alura Língua

    Reforço online de inglês e espanhol para aprimorar seu conhecimento

12X
R$120 R$109,33
à vista R$1.440 R$1.312
Matricule-se
Procurando planos para empresas?

Acesso completo por 1 ano

Estude 24h/dia onde e quando quiser

Novos cursos todas as semanas