Áreas de trabalho no Adobe XD: Criação e Ajuste

A criação de artboards no Adobe XD é o primeiro passo no desenvolvimento dos seus designs. Seja para sites responsivos, aplicativos ou protótipos – uma organização inteligente dos artboards é crucial para o fluxo de trabalho. Neste guia, você aprenderá como criar e otimizar artboards para diferentes resoluções e dispositivos. Assim, você mantém sempre uma visão geral dos seus projetos.

Principais descobertas

• Desenhe artboards para diferentes dispositivos e resoluções.
• Nomeie seus artboards e objetos cuidadosamente para manter a organização.
• Considere a densidade de pixels para displays Retina, a fim de maximizar a qualidade da imagem.
• Use atalhos para uma forma de trabalho mais rápida e produtiva.

Guia passo a passo

Começo: Criar um novo artboard

Para começar a trabalhar no Adobe XD, você deve criar seu primeiro artboard. Você encontrará o painel de artboards acessível por um pequeno ícone na barra inferior. Lá, você pode gerenciar todos os artboards que possui em seu projeto. Use um clique duplo para renomear seu primeiro artboard, por exemplo, para "Home". Isso ajuda você a manter a organização.

Criação de um novo artboard

Você quer adicionar um novo artboard? Use o atalho "A" para a ferramenta de Artboard. Ao clicar, um novo Artboard será criado. Com um novo clique no artboard, você pode nomeá-lo também, por exemplo, para "Features". Certifique-se de usar tamanhos diferentes para seus artboards, a fim de alcançar flexibilidade em seu design.

Ajustes do artboard

Os artboards oferecem muitas opções de personalização. Clique no respectivo artboard e vá para as configurações no painel. Você pode facilmente mudar a orientação de horizontal para vertical. Isso permite que você simule rapidamente em diferentes dispositivos, como tablets ou smartphones, como seu design ficará. No design web, é importante criar designs responsivos.

Aumentar e ajustar o tamanho

Agora você pode mudar o tamanho do seu artboard. Arrastando simplesmente o puxador para baixo, você verá imediatamente a nova área que se ajustará proporcionalmente. Através da linha tracejada, você pode ver quais partes da sua página estão visíveis na viewport atual. Partes que excedem isso precisarão ser roladas.

Ajustes de cor e grade

Agora vá para as configurações de cor e defina as cores que você precisa. Você pode inserir códigos de cores ou trabalhar com o controle deslizante. Além disso, há a opção de ativar uma grade para seu design, o que ajuda você a definir layouts com precisão. Essas ferramentas são extremamente úteis para estruturar seus designs e torná-los visualmente atraentes.

Configuração para diferentes dispositivos

Crie pelo menos três artboards diferentes para os formatos de tela comuns: Desktop, Tablet e Smartphone. Você deve garantir que seus designs funcionem bem em todos os dispositivos. A resolução de desktop mais comum é de 1366 pixels, mas você também pode usar 1920 pixels (Full HD). Para o tablet, você pode usar o iPad ou Surface como modelo e depois passar para a dimensão do smartphone, como o iPhone 10.

Consideração da densidade de pixels

Um dos detalhes a serem considerados no design são os displays de alta resolução, que são utilizados em muitos dispositivos modernos. Esses displays têm uma alta densidade de pixels, o que significa que a qualidade da imagem é muito importante. Portanto, quando você inserir gráficos ou imagens do Photoshop em seu projeto, preste atenção à resolução dessas imagens. Para displays Retina, você deve dobrar o tamanho da imagem no mínimo para alcançar uma qualidade ideal.

Organização dos artboards

Com o Adobe XD, você tem a capacidade de reorganizar seus artboards facilmente. Isso é útil quando você quer uma visão melhor. Usando a tecla de retrocesso ou a tecla Delete, você pode excluir artboards indesejados. Alternativamente, você pode usar o atalho "Command + D" para criar uma duplicata de um artboard, a fim de desenvolver novos designs a partir dele.

Otimização do espaço de trabalho

Use a barra de espaço para ativar a ferramenta mão e se mover livremente em seu espaço de trabalho. Isso é especialmente útil quando você tem múltiplos elementos em seu artboard. Dê um duplo clique em objetos para acessar a visualização detalhada e editá-los mais. Certifique-se de que todos os seus objetos estejam claramente nomeados e organizados dentro dos artboards para facilitar o trabalho posterior.

Resumo – Artboards no Adobe XD: Passo a passo para um design eficaz

Neste guia, você aprendeu como criar e ajustar artboards no Adobe XD. Você sabe o quão importante é nomeá-los e ajustá-los corretamente para manter a organização do seu projeto.