Tutorial de Adobe XD: funções básicas de design

Aprenda com Ethan Parry como desenhar formas, editar cores e adicionar texto usando o software de design UX Adobe XD

A experiência do usuário tornou-se uma parte cada vez mais importante do design — reunindo designers, desenvolvedores e muitas outras partes interessadas na criação de sites e produtos digitais nos quais os usuários podem navegar de maneira fácil e intuitiva. Implementar um design UX bem-sucedido pode resultar em mais vendas, aprimorar o branding e melhorar as conversões, o que o torna um princípio de design extremamente necessário, independentemente do setor ou público-alvo.

Por isso o Adobe XD é uma ferramenta tão importante. Líder entre os softwares de design UX baseados em vetores para web e apps, ele pode ser usado para projetar e desenvolver protótipos de wireframes e layouts que então podem ser implementados e testados.

Ethan Parry (@ethanparry) é um designer de serviço e consultor de pesquisa de UX que usa regularmente o Adobe XD em seu trabalho. Neste tutorial, explica as funções básicas de design do software, quais são os alicerces necessários para começar a criar seu próprio aplicativo.

Funções de Design do Adobe XD

1. Para se manter organizado, é importante dar um nome para sua prancheta antes de começar o trabalho. Para isso, clique no nome que aparece acima do canto superior esquerdo da prancheta e digite o nome desejado.

2. Certifique-se de que você esteja no Modo Design. Para verificar, confira o canto superior esquerdo da tela. Se vir o modo Protótipo ou Compartilhar selecionado, simplesmente clique em Design para trocar de modo.

3. As ferramentas do Adobe XD estão visíveis em uma coluna vertical no lado esquerdo da tela. Cada uma pode ser selecionada ao clicar no ícone ou no atalho do teclado correspondente. Eles aparecem na seguinte ordem: Selecionar (V), Retângulo (R), Elipse (E), Polígono (Y), Linha (L), Caneta (P), Texto (T), Prancheta (A) e Zoom (Z).

4. Para criar uma forma simples na sua prancheta, selecione a ferramenta Retângulo ou Elipse. Clique na prancheta e mantenha o botão pressionado, então arraste o cursor para controlar o tamanho e a forma. Se deseja criar um círculo ou quadrado perfeito, mantenha pressionada a tecla Shift enquanto arrasta o cursor e o software automaticamente será bloqueado na proporção correta.

5. Para centralizar uma forma, use a ferramenta Selecionar para movê-la. Uma linha vai aparecer no centro da prancheta e assumirá a forma quando ela estiver corretamente posicionada.

6. No lado direito da tela fica o inspetor de propriedades, onde você controla e pode fazer alterações nos elementos da prancheta. Exemplos incluem formas de preenchimento de cores, ajustes da largura da linha e arredondamento das bordas dos quadrados e retângulos.

7. Se quiser preencher uma forma com cor, por exemplo, selecione o retângulo ao lado de "Preencher" no inspetor de propriedades e depois escolha uma cor. Para salvar essa cor para uso posterior em outras partes do seu projeto, clique no + que aparece na parte inferior da caixa pop-up para salvar a amostra de cor.

8. Para criar linhas, use a ferramenta Linha. Basta clicar e arrastar.

9. O uso da Caneta pode oferecer maior controle sobre as formas que você projeta e na criação de ícones. Parry, por exemplo, não a utiliza, pois prefere um plug-in para todas as tarefas relacionadas a ícones.

10. Ao adicionar texto, são possíveis duas opções de formatação. Selecione a ferramenta Texto, clique em qualquer lugar da prancheta e digite para criar uma única linha de texto. No inspetor de propriedades, à direita dos ícones de alinhamento de texto, você verá que o ícone Texto de ponto está selecionado. Essa é a configuração que você usará se precisar adicionar apenas algumas palavras ao seu projeto.

11. Se quiser adicionar mais texto, para criar um parágrafo, por exemplo, clique no ícone Texto de área (fica ao lado do ícone Texto de ponto). Para criar a área de texto maior, clique na prancheta e mantenha o botão pressionado, em seguida arraste o cursor para definir a área. Quando você digitar o texto, ele fará uma quebra automática.

Se quer aprender mais a respeito do uso do Adobe XD para projetar e desenvolver protótipos de design UX, confira o curso online de Ethan Parry: "Introdução ao Adobe XD".

Você também pode se interessar por:

- Adobe Photoshop para web design, um curso de Arturo Servín.
- Introdução ao Adobe XD para aplicativos móveis, um curso de Arturo Servín.
- Princípios fundamentais de UX, um curso de Strike Heredia.