Dicas para aprender como usar guias e grids no Adobe XD

Descubra como usar guias e grids para criar protótipos bem sucedidos ao projetar interfaces UX com Adobe XD

O UX desempenha um papel cada vez mais importante na forma que designers, desenvolvedores e empresas atendem as necessidades dos seus usuários, a capacidade de repetir facilmente e experimentar novas soluções que se tornaram valiosíssimas.

O principal software de design para interfaces UX, Adobe XD, torna fácil e rápido criar protótipos e experimentar diferentes designs UX. Além de dominar suas funções básicas, compreender como usar as guias e grids do software é crucial para criar protótipos que sejam eficazes, esteticamente agradáveis e consistentes em toda a experiência do usuário.

Ethan Parry (@ethanparry), designer de serviços e consultor de pesquisa em UX, utiliza com frequência o programa no seu trabalho. A seguir, ele explica as diferentes funções das guias e dos grides (guides e grids) e como usá-las para aproveitar ao máximo o seu trabalho.

Guias no Adobe XD

As guias ou guides são linhas que podem se sobrepor na mesa de trabalho e que ajudam a dar forma ao seu design e planificar onde serão colocados os elementos. Ao definir certos designs de guias em seu projeto, você pode atingir a consistência entre diferentes telas.

1. Para criar uma guia vertical, desloque o cursor sobre a borda esquerda da mesa de trabalho até que se transforme em duas flechas. Depois, clique e segure, arraste até a posição desejada e solte. Você pode acrescentar tantas quanto quiser.

2. Para criar uma guia horizontal, repita os mesmos passos, mas comece colocando o cursor sobre a borda superior, clicando, mantendo pressionado e arrastando para baixo.

3. Se você já acrescentou elementos à sua mesa de trabalho, podes ajustar sua posição com a ferramenta Selecionar. Ao passo que arrasta elementos do projeto para a borda das linhas, por exemplo, quadros de texto, você vai ver que se ajustam à guia.

4. Existem algumas maneiras de transferir guias para outra mesa de trabalho. Se você copiar e depois colar a sua mesa de trabalho, além de copiar todas as formas e textos, também copiará todas as guias. Se tiver uma segunda mesa de trabalho em branco e só deseja copiar as guias, selecione a mesa de trabalho com as guias e, no menu superior, vá em Visualização > Guias > Copiar Guias. Depois selecione a mesa de trabalho em branco e vá em Visualização > Guias > Colar Guias.

5. Para bloquear as guias para que não se mexam, selecione a mesa de trabalho e vá em Visualização > Guias > Bloquear todas as guias. Se quiser mudá-las, mais tarde, pode desbloqueá-las com Visualização > Guias > Desbloquear todas as guias.

6. Para eliminar guias, desloque o cursor sobre uma guia até que apareçam duas flechas. Se for uma guia horizontal, arraste-a para a parte superior da mesa de trabalho, até ver um ícone de papel junto ao cursor. Para guias verticais, arraste até a esquerda.

Grids no Adobe XD

Para garantir que seus trabalhos estejam bem projetados, o Adobe XD oferece duas opções de grids: quadrados e de design. Parry recomenda o uso de grids de design quando você deseja definir a estrutura subjacente do projeto e ver como cada componente responde a diferentes pontos de interrupção, o que é muito importante ao elaborar um trabalho responsive.

1. Para ver esses grids, selecione sua mesa de trabalho e vá ao inspetor de propriedades. Na parte inferior, você verá a seção de Grids, com uma lista destacável com Layout e Square (quadrado). Se selecionar o quadro à esquerda do menu destacável, fará que o tipo de grid selecionado fique visível. É possível ativar ambos ao mesmo tempo e alternar entre cada um, se quiser. Além do menu destacável, outra forma de controlar qual grid é visível é ir em Visualização na navegação do menu superior.

2. Depois que o grid está visível, suas propriedades vão aparecer nas Propriedades. Para o layout, consiste em informação como o número de colunas, largura do canal, largura da coluna e margens, e tudo isso é ajustável. Para o quadrado, será o tamanho do quadrado.

Se quiser ter mais informações sobre como usar Adobe XD para projetar e elaborar protótipos de UX, faça o curso online de Ethan Parry, "Introdução a Adobe XD".

Você também pode se interessar por:

- 5 livros perfeitos para se iniciar em UX
- Como e porque integrar o Instagram ao seu portfólio digital
- Dos e Don'ts do UX Design