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:
- o desenvolvimento de mais algumas telas, questionando o que devemos e o que não devemos fazer;
- como pensar em quem utiliza o protótipo e a aplicação que será disponibilizada na loja;
- a aba de "Prototype", à direita de "Design", na produção do protótipo e no estabelecimento do link entre as telas;
- como publicar um protótipo, enviando-o à respectiva liderança;
- como comentar um protótipo;
- como exportar hexadecimais de cores, tipografia, ícones e
SVG, para que o time de desenvolvimento trabalhe em cima do que criamos.
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.
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".
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.
Feito isso, as cores selecionadas serão adicionadas ao painel, em "Colors":
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.
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.
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.
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.
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".
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.
É 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 (+).
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:
- à paleta de "Fill", clicando no respectivo retângulo e pressionando o sinal de soma (
+) no canto inferior esquerdo de "Solid Color";
- à paleta de "Assets > Colors", clicando com o botão direito do mouse sobre o tom verde do botão e selecionando "Add Color to Assets".
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).
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".
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".
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".
Repetiremos o processo para as partes brancas desses botões, substituindo o hexadecimal #FFFFFF por #FFFFFE, que adicionamos às cores padrão.
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:
- Definindo mais padrões
- Usabilidade
- Mais contexto
- Fechando as telas
- Terminando o protótipo