Atividade extensionista

Prévia do material em texto

ADOBE XD 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
Prof. Tiago de Lima Oliveira 
 
 
2 
 
INTRODUÇÃO 
Neste módulo vamos falar de User Experience (UX), User Interface (UI) e 
estudar como o software Adobe XD (eXperience Design) está inserido no 
processo de design de um produto digital. 
CONTEÚDOS 
• Apresentação. 
• Introdução e Instalação. 
• Artboard. 
• Formas. 
• Tipografia. 
• Cor. 
• Componentes. 
• Repetição de Grid. 
• Importando Elementos Externos pt1. 
• Importando Elementos Externos pt2. 
• Plugins + Apresentação do Projeto. 
• Wireframe pt1. 
• Wireframe pt2 – Prototipação Básica. 
• Protótipo pt1 – UI Kit (Símbolos). 
• Protótipo pt2 – Animações e Preview. 
• Protótipo pt3 – Compartilhando Link e Biblioteca. 
• Exportando Assets. 
• Conclusão. 
 
 
3 
INTRODUZINDO O XD 
O XD é um software criado pela Adobe para que designers possam criar 
desde protótipos navegáveis até links para compartilhar assets com 
desenvolvedores. Estes protótipos são parte importante no desenvolvimento de 
produtos digitais como websites e aplicativos móveis. 
 
Fonte: Oliveira, 2021. 
O XD é um dentre vários softwares para criação de protótipos navegáveis. 
Na mesma linha temos o InVision, Sketch, Figma etc. A interface e 
funcionalidades são muito semelhantes entre eles. 
Cada software tem sua particularidade em relação a serviços e 
funcionalidades, é interessante analisar qual se adequa melhor à sua realidade. 
PRÉ-REQUISITOS 
É importante ter uma boa noção de UX e UI, conhecer os métodos, 
processos e técnicas de criação relacionados. A bibliografia básica usada aqui é 
a de J. J. Garrett, o livro: The Elements of User Experience. 
 
 
 
 
4 
 
Basicamente, o autor defende que um projeto de design, o processo de 
criação principalmente, parte-se de algo mais abstrato, um conceito, uma ideia, 
e com o seu amadurecimento isso vai ficando cada vez mais concreto, palpável 
e visível. 
 A ilustração a seguir apresenta as camadas propostas pelo autor. 
 
 
5 
 
Fonte: Oliveira, 2021. 
Não é essencial, mas conhecer outros softwares da Adobe, 
especialmente o Illustrator e Photoshop, vai ajudar a otimizar a ambientação com 
o novo software. 
ADOBE XD 
De modo geral, o XD é um software para criação de protótipos de alta, média 
e baixa fidelidade, indo de acordo com a etapa do projeto. Além dos protótipos, 
é possível compartilhar estes protótipos com diferentes stakeholders (pessoas 
chave no projeto) através de um link. 
 
 
6 
 
Fonte: Oliveira, 2021. 
INSTALAÇÃO 
A instalação é feita a partir do site da Adobe, sendo necessário criar uma 
conta. O direcionamento do download, instalação e gerenciamento do software 
é feito todo pelo site da Adobe e depois no seu computador. Possui período de 
teste grátis. 
 No site da Adobe também é possível conferir os requisitos de sistema, 
mas, de modo geral, não é um software pesado, se comparado ao Photoshop, 
por exemplo. 
 Caso deseje, o site também disponibiliza a lista dos atalhos de teclado. 
TELA INICIAL 
No primeiro uso do aplicativo, a primeira tela apresenta alguns templates 
de tamanho de arquivo, podendo ainda criar um documento com tamanho 
customizado. 
Depois de um tempo de uso, esta tela também dará acesso aos projetos 
em que trabalhou recentemente e também projetos que foram compartilhados 
com você (lembrando que isso é feito a partir da sua conta Adobe). 
É possível salvar os documentos direto no seu computador ou mantê-los 
na nuvem, o chamado Creative Cloud. 
 
 
7 
 
Fonte: Oliveira, 2021. 
Uma vez dentro de um arquivo temos os Artboards (telas) ao centro, à 
direita o painel de Propriedades e à esquerda as ferramentas de criação e 
manipulação de objetos e ainda à esquerda, na parte inferior temos as Layers 
(camadas), Plugins e Biblioteca de Componentes. 
 
Fonte: Oliveira, 2021. 
Para manipular o Artboard temos os atalhos: 
• Hand (mão) – segura “Barra de espaço” + “clica e arrasta”; 
• Ctrl + “+” – zoom in; 
• Ctrl + “-” – zoom out; 
• Ctrl + “0” – mostra tudo; e 
• Ctrl + “1” – tela 100%. 
 
 
8 
Vamos ver na prática os seguintes pontos: 
• Artboards (telas); 
• Duplicar e Renomear Artboards; 
• Painel de Propriedades; 
• Criando Grid / Visualização (ctrl + shift+” ’ ”); 
• Layers (Camadas); e 
• Salvando Arquivo (ctrl+”s”). 
FORMAS 
O XD é bastante minimalista quando à quantidade de recursos para 
criação de formas. São basicamente o retângulo, círculo, triângulo e linhas. É 
possível criar elementos ou ilustrações vetoriais no XD, mas recomenda-se usar 
o Illustrator para manipular esse tipo de arquivo, usando o XD com foco na 
prototipação das telas. 
 
Fonte: Oliveira, 2021. 
No mesmo painel, temos a possibilidade de criar textos, títulos ou blocos, 
criar um Artboard (tela) e ferramenta de zoom. Lembrando que temos mais de 
um atalho para zoom. 
Com uma forma selecionada (atalho “V” para ferramenta de seleção), à 
esquerda temos o painel de propriedades. Cor, preenchimento com imagem, 
borda, arredondamento de borda, opacidade e sombra são as principais 
propriedades alteradas nas formas. 
 
 
9 
Dica: Ao invés de usar linhas crie um retângulo com o mesmo tamanho, 
facilita a criação de interfaces “pixel perfect”, respeitando ao máximo o grid e 
espaçamentos bem definidos. O Google Material Design recomenda usar 
múltiplos de 4 para espaçamentos e até tamanho de fontes e grids. 
 
Fonte: Oliveira, 2021. 
No mesmo painel, selecionando mais de um objeto é possível alinhar e 
distribuir em um click bem como composição de formas (união, subtração, etc). 
Veremos com mais detalhes a parte de Repetir Grid e Componentes (Biblioteca). 
TIPOGRAFIA 
Para criar textos basta apertar o atalho “T”. 
 
 
10 
 
Fonte: Oliveira, 2021. 
Uma vez criado o texto, no painel de Propriedades podemos alterar: 
• tamanho da caixa de texto se for um bloco; 
• kern e altura de linha; 
• Ctrl + “8” para transformar um texto em forma (perde possibilidade 
de edição do texto); e 
• fonte ou família tipográfica. 
Dicas: 1) Google Fonts (fonts.google.com/); 2) Não usar bordas. 
 
Fonte: Oliveira, 2021. 
COR 
Independente do objeto, as propriedades são essencialmente as 
mesmas. Temos a possibilidade de escolher a cor dentro do espectro 
cromático ou digitar o código da cor (Hex, RGB ou HSB) e opacidade. 
 
 
11 
 
Fonte: Oliveira, 2021. 
Além das cores sólidas (no topo como Solid Color v), é possível criar 
gradientes lineares e radial. 
O XD tem um recurso que consegue copiar a cor de uma imagem, o 
conta-gotas, atalho “i”. 
 
Fonte: Oliveira, 2021. 
Podemos colocar sombra em um objeto também, bastante recomendado 
pelo Material Design, para criar a sensação de camadas de informação. 
No XD é possível selecionar um objeto, copiar (ctrl + c), e colar os atributos 
de cor e sombra de um objeto para outro com o atalho (ctrl + alt + v). 
 
 
12 
COMPONENTES 
Dentro de uma interface, é bastante comum o reaproveitamento de 
elementos de uma interface. Além de eficiente, garante o padrão gráfico e 
identidade visual do projeto e da marca. 
Para criar um componente, basta selecionar o(s) objeto(s) que vai(ão) 
compor o Componente e usar o atalho (ctrl + k). Ou no painel da imagem a 
seguir. 
 
Fonte: Oliveira, 2021. 
Uma vez criado um Componente, caso altere alguma coisa nele isso irá 
repetir para todos os objetos criados a partir de um Componente. Dentro de um 
Componente, é possível alterar os dados e fotos sem que ele deixe de ser um 
Componente. Caso você desagrupe (ctr l+ shit + g) um objeto, ele perde o link 
com o Componente que o originou. 
O Componente ficará disponível na Biblioteca de Componentes, e pode 
ser compartilhada com outras pessoas. É a base para criar um Design System 
ou Guia de Estilos. 
 
 
13 
 
Fonte: Oliveira, 2021. 
Dica: para criar um botão que possibilite redimensionar, centralize o 
texto com oretângulo, lembre-se de deixar o texto alinhado pelo centro e não 
pela esquerda, que é o padrão. 
Para reaproveitar um componente, basta arrastá-lo da Biblioteca para a 
interface. 
REPETIÇÃO DE GRID 
Aliando a Repetição de Grid com Componentes é a chave para interfaces 
extremamente rápidas e com qualidade gráfica impecável. Esta função permite 
duplicar elementos de interface, repetindo eles em um grid definido por você. 
Pode ser tanto na horizontal quando na vertical, podendo ajustar o 
espaçamento (gutter) e também alterar textos e imagens dos Componentes. 
Caso desagrupe (ctrl+shit+g) um grid repetido, ele perde essa característica 
e vira uma série de objetos. 
 
 
14 
 
Fonte: Oliveira, 2021. 
Depois de criada a repetição, as duas “alças” verdes permitem expandir 
para onde desejar. Com o cursor posicionado no espaçamento entre os 
elementos repetidos podemos ajustá-la. 
 
Fonte: Oliveira, 2021. 
 
 
 
15 
IMPORTANDO ELEMENTOS EXTERNOS (PT1) 
Existem duas formas de importar elementos para o XD, ou através do 
menu ou arrastando diretamente para a interface. A segunda é mais 
recomendada. 
 
Fonte: Oliveira, 2021. 
Sobre importar imagens em .JPG/.PNG 
É preciso estar atendo à densidade de pixels (resolução) do seu monitor. 
Alguns Macs, por exemplo, têm densidade @2x, ou seja, o dobro de um 
monitor comum, e isso impacta na visualização do arquivo. 
É possível redimensionar imagens, colocar borda e sombra, ou ainda 
inserir dentro de uma máscara (por um objeto). Só devemos ficar atentos pois 
as imagens deixam o arquivo cada vez mais pesado. 
É possível arrastar uma imagem para dentro de um objeto, que acaba 
funcionando como uma máscara, mas a diagramação é feita automaticamente. 
 
Fonte: Oliveira, 2021. 
 
 
16 
Algumas dicas: 
• redimensiona no Photoshop (tamanho de arquivo); 
• importar no tamanho certo (ou mais próximo possível); e 
• foto como "fill” arrastando para objeto. 
 
IMPORTANDO ELEMENTOS EXTERNOS (PT2) 
Além de imagens (.jpg e .png), é possível importar elementos vetoriais, 
mantendo sua característica e possibilidade de edição. O mais indicado é o 
arquivo de extensão .svg. 
Dica: material.io/icons. É uma biblioteca de ícones disponibilizada pelo 
Google e é gratuita. O XD possibilita a instalação de plugins com ícones 
também, o que veremos isso mais adiante. Outra dica é, quando exportar do 
Illustrator ou outro software vetorial, converta os traços em preenchimento. Isso 
vai garantir a proporção do desenho. 
É possível inserir um elemento vetorial dentro de um objeto. 
Recomenda-se fazer isso apenas quando os ícones todos já estiverem na 
proporção entre si. 
 
Fonte: Oliveira, 2021. 
 
 
17 
 
Fonte: Oliveira, 2021. 
Além das imagens, podemos importar arquivos de texto (.txt). Inserido 
em um Componente que tenha texto, ele preenche automaticamente os outros 
Componentes do Grid Repetido. Agiliza muito a inserção de dados e a dar uma 
sensação mais realista da interface com dados mais “reais”. 
 
Fonte: Oliveira, 2021. 
 
 
18 
 
Fonte: Oliveira, 2021. 
PLUGINS + PROJETO 
Partindo então de um contexto em que temos uma Metodologia de Design 
Centrado no Usuário e que esse contexto nunca é um processo fixo, mas sim 
aberto a mudanças de acordo com a realidade do projeto (prazos, limitações 
técnicas, questão de produto, etc). 
Dentro do processo de criação do nosso protótipo será feito um 
Wireframe, um protótipo de média fidelidade visual, mas já navegável. O intuito 
de um wireframe é mais focado em ver com as informações das telas estão 
interagindo entre si dentro do sistema todo que é o aplicativo no nosso caso. A 
navegação. 
Para instalar um Plugin basta ir no painel de Plugins e buscar. O que 
vamos usar é o Quick Mockup. 
O Plugin disponibiliza uma biblioteca de elementos gráficos editáveis que 
basta clicar para aparecer na interface. Isso agiliza bastante a criação. 
 
 
19 
 
Fonte: Oliveira, 2021. 
 
Fonte: Oliveira, 2021. 
 
 
20 
PROJETO 
O projeto consiste na criação de um aplicativo de compartilhamento de 
fotos chamado InstaPhotos, que será um concorrente direto do Instagram. 
Vamos trabalhar com o conceito de MVP (Minimum Viable Product), ou seja, a 
versão mais simples possível de um produto, quais funcionalidades podem ficar 
para depois? Pense em que tudo envolve implementação, e isso nem sempre é 
tão ágil. É necessário focar no essencial por isso. 
Vamos iniciar o projeto entendendo a relação entre telas e 
funcionalidades através de um wireframe. Mas antes ressalta-se a importância 
do protótipo de baixa fidelidade no processo criativo do design. O uso do lápis 
e papel, além de divertido, já é um “treino” para criação das telas no XD, já 
prepara sua mente e durante o processo é comum perceber pequenas 
inconsistências de navegação que, ao passar para o XD já vamos corrigindo 
isso. 
 
Fonte: Oliveira, 2021. 
WIREFRAME (PT1) 
Para entender como vai ser a Navegação e Organização de Informação nas 
telas, é importante ter um desenho básico da Arquitetura da Informação. Ajuda 
a entender a relação entre as telas. Nosso projeto vai seguir inicialmente a a 
seguir. 
 
 
 
21 
 
Fonte: Oliveira, 2021. 
Com base na Arquitetura, definimos e nomeamos as telas principais: 
• Splash Screen; 
• Login; 
• Empty State; 
• Feed; 
• Busca; 
• Tirando Foto; 
• Likes; 
• Meu Perfil; e 
• Meu Perfil / Edição. 
splash screen
login
novo usuário?
sim
feed (nome)
não
feed (nome)
BUSCA TIRANDO FOTO LIKES MEU PERFIL EDIÇÃO 
 
 
22 
WIREFRAME (PT2) 
Uma vez desenhadas todas as telas, partimos para etapa de 
Prototipação. 
 
Fonte: Oliveira, 2021. 
Vamos iniciar sem transições de telas, nem informações ou fotos reais. 
Essa etapa é para entender se as telas estão se relacionando entre si, se a 
Navegação está clara e o usuário não vai se “perder”. 
Para criar um link entre telas, basta selecionar o objeto que vai atuar 
como botão e arrastar a seta para a tela que quer lincar. 
 
Fonte: Oliveira, 2021. 
Para ter um Preview (visualização) do protótipo clicável e navegável, 
utilize o atalho (ctrl + Enter). A partir desse momento, já é possível criar um link 
para compartilhamento. Para acessar o link e navegar pelo protótipo, não é 
necessário que a pessoa tenha conta Adobe, que é feito diretamente no 
navegador. Na sequência, veremos como criar estes links. 
PROTÓTIPO (PT1) 
Agora, com base no wireframe, e até aproveitando alguma coisa dele, 
vamos criar um protótipo de alta fidelidade visual, ou seja, o mais próximo 
possível do que vai ser apresentado para o usuário final. 
 
 
23 
Agora começamos também a definir e criar os Componentes que serão 
usados em diversos momentos do projeto, e, dependendo do caso, até com 
outras pessoas/equipes. 
Não é obrigatório criar tudo “do zero”, muitos sites disponibilizam as 
Bibliotecas de Componentes gratuitamente, como o Google Material Design 
(material.io/resources). Importante lembrar do conceito do Material Design, da 
superfície “mágica” que possui camadas de informação em “papéis mágicos”. 
 
 
Fonte: Google Material Design, [S.d.]. 
Esta etapa do projeto preocupa-se então com a Experiência Sensorial do 
usuário, com o “look n feel”, de como as cores, fontes, espaçamentos afetam a 
execução da tarefa pelo usuário. 
Algumas dicas para esta etapa inicial de projeto: 
• prepare e nomeio os Artboards (telas); 
• confira se o Grid inicial está ok; 
• lembrar de ir salvando (ctrl+s); 
• ter em mente quais imagens, ícones, etc, que terá que exportar, os 
Assets; 
• ficar atento e fazer manutenção da Biblioteca de Componentes; e 
• adiantar o máximo possível para Implementação; 
 
 
 
 
24 
PROTÓTIPO (PT2) 
Nesta etapa, vamos desenhar as telas com componentes de alta 
fidelidade afim de gerar um link para compartilhar com stakeholders. É 
importante lembrar de fazer uso das animações entretelas (transitions) e de 
elementos (auto-animate) com função/sentido. Que tenha um intuito, como 
promover contraste, chamar atenção, guiar o olhar etc. 
Vamos desenhar as telas listadas: 
• Splash Screen; 
• Login; 
• Empty State; 
• Feed; 
• Busca; 
• Tirando Foto; 
• Likes; 
• Meu Perfil; e 
• Meu Perfil / Edição. 
 
Fonte: Google Material Design [S.d.]. 
 
 
25 
Estamos prontos para fazer Testes de Usabilidade, apresentar para 
Stakeholders ou outras técnicas como o Design Critique (compartilhar com 
colegas designers para que opinem de um ponto de vista técnico os pontos 
positivos e de melhorias). 
PROTÓTIPO (PT3) 
Uma vez realizados os testes de usabilidade, design critique etc., 
normalmente são feitas algumas correções na interface, nesse momento é que 
ter feito tudo com Componentes vai otimizar o trabalho de maneira decisiva. 
Dependendo da necessidade da equipe o XD possibilita um tipo 
diferente de link de compartilhamento. 
 
Fonte: Google Material Design [S.d.]. 
O primeiro link, Design Review, permite que outras pessoas comentem 
sobre as telas, os comentários ficam disponíveis para todos. 
O segundo, Development, é para enviar para desenvolvedores, assim 
eles podem facilmente pegar os Assets necessários ou parâmetros de 
espaçamento, cor, tamanho de fonte,etc. 
O terceiro é para apresentações 
O quarto para testes de usabilidade, mas nada impede de usar o 
primeiro link para isso também. 
E é possível ainda customizar o link. 
 
 
 
26 
EXPORTANDO ASSETS 
Tão importante quanto uma interface componentizada e organizada é 
preparar os elementos Assets para o desenvolvimento. Recomenda-se 
conversar com o dev front-end ou outro responsável para entender a 
particularidade e necessidades específicas. 
Além dos Assets, podemos exportar uma tela inteira, ou até um .PDF 
com todas as telas em páginas. Podemos exportar elementos selecionados no 
Artboard (ctrl+e) e exportar todos de uma vez (ctrl+shift+e). 
O XD não exporta automaticamente todos os elementos de um Artboard, 
é preciso informar nas camadas quais devem ser exportados. Importante notar 
que para que o desenvolvedor consiga importar os Assets do link específico é 
preciso marcar as camadas ou grupos que serão exportados ou 
disponibilizados no link de dev. 
 
Fonte: Google Material Design [S.d.]. 
Ao exportar apenas um elemento, o XD permite exportar em várias 
extensões. 
 
 
27 
 
Fonte: Google Material Design [S.d.]. 
Algumas dicas e boas práticas ao exportar elementos: 
• Caso seja um .jpg exportando com 80% de qualidade já fica com 
uma imagem com tamanho reduzido e não perde qualidade. Se você fez o 
design na tela @1x (recomendado) exporte em @2x. 
• Usar .png caso precise manter fundo transparente; e 
• Usar .svg para vetores, ícones etc. 
FINALIZANDO 
Percebemos que o Adobe XD é um software que não possui muitas 
funcionalidades e é bastante simples e intuitivo de usar. Como já comentamos, 
a sua interface é bastante semelhante às dos principais concorrentes (Figma, 
Sketch, etc.), bem como as funcionalidades básicas. 
Reforçamos que é apenas mais um software, mais uma ferramenta de 
trabalho, que está inserida em uma Metodologia de Design Centrado no usuário 
que esteja de acordo com as necessidades de cada projeto. 
É importante ficar atento às Boas Práticas de Design, já que é cada vez 
mais comum o trabalho removo e compartilhado. 
Tenha sempre em mente também o conceito de MVP para criar novos 
projetos, é bastante comum “se emocionar” e tentar fazer um produto com mais 
funcionalidades que ele precisaria para um primeiro momento. 
Tente sempre realizar pelo menos um Teste de Usabilidade. Como vimos, 
o XD possibilita exportar o projeto de várias formas, podendo o designer se 
utilizar disso para refinar cada vez mais a solução. 
 
 
 
28 
 
Trabalhe em conjunto com o Illustrator e Photoshop. O primeiro para 
desenhar ícones e ilustrações vetoriais e o segundo para editar e manipular 
imagens, lembrando de exportar no tamanho mais próximo possível do que vai 
ser usado no projeto. E faça sempre atualizações.