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:
SVG
, para que o time de desenvolvimento trabalhe em cima do que criamos.Exploraremos esses conteúdos e muito mais! Vamos começar?
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.
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:
+
) no canto inferior esquerdo de "Solid Color";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.
O curso Prototipagem e UX parte 2: linkando telas no Adobe XD possui 211 minutos de vídeos, em um total de 51 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.
Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.
Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.
Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.
Emitimos certificados para atestar que você finalizou nossos cursos e formações.
Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.
Acesso completo
durante 1 ano
Estude 24h/dia
onde e quando quiser
Novos cursos
todas as semanas