Vantagens e desvantagens do Adobe XD na criação de layouts de email marketing

Nos últimos meses, venho testando novos software para criar o design de templates de email marketing.

Minha preferência sempre foi o Adobe Illustrator por ser um software vetorial e com a capacidade de ter múltiplas artboards no mesmo arquivo. Isso me permite criar ícones e ilustrações facilmente no mesmo ambiente em que estou criando a diagramação do template.

Além disso, é comum que alguns clientes nos solicitem a arte original de seus templates de email marketing porque querem aproveitá-la na impressão de um flyer ou folder. Tendo tudo diagramado em vetor, no Illustrator, é muito mais fácil fazer a conversão do material de uso online para impresso, uma vez que a resolução do arquivo não é um problema nesse caso.

Mas como um template de email marketing é algo muito similar a uma pequena e resumida landing page, muito raramente eu uso os recursos avançados do Illustrator, como malha de ilustração, pinceis, perspectiva em 3D e outros.

O que eu sempre achei útil é a facilidade de criar ícones e ilustrações simples para ajudar a compor o layout do template, e para isso, eu preciso apenas da ferramenta bézier e dos controles de cores. O restante eu sempre construí utilizando grid, linhas guia, formas geométricas básicas e textos.

Até há algumas semanas, eu estava trabalhando com o Adobe Creative Cloud, que por uma mensalidade de R$ 175, me dava acesso a todos os aplicativos da Adobe, incluindo o XD. Um dia, decidi experimentá-lo e vi que não precisava mais do Illustrator.

O XD, em relação ao Illustrator, tem seus prós e contras, mas achei que eu poderia conviver bem com esses contras porque os prós são, realmente, muito prós. O que mais me fez considerar substituir o Illustrator pelo Adobe XD foram os seus recursos pensados exclusivamente para layouts digitais, como a repetição de grade e os componentes.

Repetição de grade

A repetição de grade (repeat grid) permite selecionar um conjunto de elementos que desejamos repetir no layout, vertical ou horizontalmente.

Isso evita que tenhamos que ficar selecionando, copiando e colando um elemento ou conjunto de elementos diversas vezes para preencher um espaço, simulando a repetição de, por exemplo, posts em um blog, produtos em um e-commerce, itens em um app mobile etc.

Componentes

É possível criar elementos únicos que se repetem (chamados de componentes) entre um layout e outro, dentro do mesmo arquivo. Assim, pode-se criar o design de um botão, transformá-lo em componente e repetir esse objeto inúmeras vezes pelos layouts.

Se for preciso alterar alguma de suas propriedades, como a cor de fundo, por exemplo, fazemos isso no componente original e todas as suas cópias usadas nos layouts são, automaticamente, atualizadas.

Isso é o que eu mais sentia falta no Illustrator, que apesar de ter um painel de símbolos, similar aos componentes do XD, não funciona da mesma maneira.

Outras vantagens

• Abre arquivos do Sketch (que, por sua vez, não abre arquivos do XD).
• Interface muito simples, com excelente curva de aprendizagem.
• O recurso de exportar vários elementos fazendo uma única operação é mais simples e rápido do que o do Illustrator.
• O controle de tamanhos e distâncias entre os elementos é muito mais visual e prático do que no Illustrator. Isso permite manter um padrão consistente de espaçamentos, que depois reproduziremos com padding no HTML.
• Por ter funções básicas de desenho, como a criação de formas geométricas com atribuição de cor em gradiente, bordas arredondadas configuradas em grupo ou individualmente e até máscaras, é ótimo para a criação de layouts web cujos elementos gráficos complexos – como fotos e ilustrações – já tenham sido previamente criados e precisem apenas ser posicionados nos layouts.
• A grade de layout simula bem as colunas e espaços de frameworks como Bootstrap e Foundation, então dá pra criar diagramações muito próximas do resultado final implementado em HTML que usa esses sistemas.
• Abre arquivos do Illustrator corretamente, dependendo de sua complexidade gráfica. Basicamente, o Adobe XD só não “entenderá” recursos gráficos de que não dispõe em sua interface.
• Por enquanto, é gratuito. Isso me possibilitou alterar o plano de serviços da Adobe, reduzindo os R$ 175/mês a R$ 43/mês. É que além de desistir do Illustrator, eu aproveitei a onda de mudanças e abandonei também o Dreamweaver, trocando-o pelo Visual Studio Code (gratuito). Da Adobe, mantive apenas o Photoshop, no plano Fotografia (R$ 43/mês).

Desvantagens

• Não abre arquivos SVG. Por enquanto, achei isso pouco relevante, porque é possível importar normalmente um arquivo SVG dentro de um arquivo do XD. Mas como o XD permite exportar arquivos em SVG, imaginei que também poderia abrir esse formato, em vez de apenas importá-lo.
• Diferentemente do Sketch, o Adobe XD não trabalha com o conceito de área de trabalho infinita. Isso permitiria criar apenas um arquivo que comporta todas as interfaces de um site, app ou modelos de emails, não importando quantas e de quais tamanhos. No XD, a área de trabalho total tem em torno de 50.000 x 50.000 pixels. Apesar de não ser infinita, é bem generosa e tem vantagem sobre o Illustrator, que oferece um espaço de até 16290 x 16290 pixels.
• Se a proposta do XD for como a do Sketch (oferecer recursos gráficos que poderão ser reproduzidos com HTML e CSS), ainda faltam alguns, como permitir maior controle de bordas, filtros de preenchimento e formatação de textos.
• Não tem réguas para arrastar linhas guia. Pelo que entendi, a ideia é que as guias sejam as grades de layout ou de quadrados (estes, equivalentes ao grid do Illustrator).
• Apesar de ser da Adobe, os atalhos de teclado para funções similares são diferentes dos atalhos que funcionam no Photoshop e Illustrator.
• Senti falta de uma janela de símbolos especiais e emojis (glyphs).
• Às vezes o comando de colar pode ser ruim, porque ao copiar toda uma caixa de texto e colar dentro de outra, em vez do XD colar apenas o texto que existia na caixa copiada, ele colará um código SVG que representa todas as características do elemento copiado (largura e altura da caixa, cor etc).
• Entendo que a Adobe ofereça o XD considerando as novas profissões no mercado, como designers de interfaces e user experience, que não precisam de recursos avançadíssimos de ilustração e tratamento de imagens, como existem no Illustrator e no Photoshop. Porém, a comparação entre XD e Sketch é inevitável (até porque suas interfaces são praticamente iguais), e há um ponto em que o Sketch sai na frente: ele suporta artboards voltadas para materiais impressos, ou seja, com unidades em centímetros e milímetros e com os formatos de papeis mais conhecidos disponíveis como atalhos para criar novas artboards. Isso quer dizer que o Skecth é útil também para criar materiais impressos de layout simples, algo que o XD (ainda) não tem.

Sei que o Adobe XD tem outros recursos, incluindo o de protótipo – talvez o mais importante -, que eu usei apenas no projeto dos novos sites da Templateria e do Zenmail para simular a navegabilidade entre as páginas. Mas meu trabalho mais essencial de design de interfaces é com templates de email marketing, que (ainda) não têm navegação interna ou elementos interativos que precisem ser avaliados com o recurso de protótipo.

Não explorei seus plugins, não uso a biblioteca da Creative Cloud para assets (o que deixa o trabalho com o Adobe XD mais dinâmico) e sei que ele deve ter outros recursos que eu ainda não descobri.

Apesar disso, e pelos trabalhos que já fiz, não sinto falta do Illustrator.