Sketch, uma ferramenta de design bem estabelecida, teve um crescimento fenomenal desde seu lançamento em 2010. Em 2016, a Adobe apresentou o XD como um competidor formidável. Após quase três anos de desenvolvimento, o Adobe XD oferece desafio suficiente para os designers considerarem uma mudança?

O processo de design UX é complexo e requer o uso de ferramentas, metodologias e estruturas específicas. Pesquisa de usuário, análise, wireframing, mockups, iteração, teste de usabilidade e prototipagem de IU são apenas alguns dos artefatos e processos com os quais os designers trabalham enquanto se comunicam com desenvolvedores, interessados ​​e outros membros da equipe.

Duas ferramentas de design amplamente reconhecidas nas quais os designers de UX confiam são Adobe XD e Esboço .

O Sketch se tornou o padrão de fato para a grande maioria dos designers digitais devido à sua interface simples, grande número de plug-ins, funcionalidade completa do kit de ferramentas e atualizações frequentes.

Enquanto Sketch se tornou a ferramenta de escolha para Designers de UX , A Adobe, há muito conhecida por seu software de design premiado e laços profundos com a comunidade de design, não tinha uma opção semelhante. Eles tinham Photoshop, Illustrator e Fireworks, mas os designers não tinham vontade de usar três ferramentas para realizar tarefas que o Sketch poderia fornecer em um aplicativo.

Em 2016, a Adobe lançou o XD (Experience Design). Um sério candidato ao Sketch, eles ainda tinham muito que se atualizar. Na época, o Sketch tinha seis anos, tinha uma ampla base de usuários e todo um ecossistema de plug-ins, o que o tornava uma ferramenta de design poderosa. A rivalidade aumentou nos dois anos seguintes e o Adobe XD deixou de ser um competidor ágil para se tornar uma ferramenta de design altamente considerada que conquistou muitos designers profissionais.

The ApeeScape Design Blog publicou um artigo sobre Sketch vs Adobe XD em 2017, quando ainda estava em beta. Agora, dois anos depois, Adobe XD passou por várias revisões com um objetivo claro: oferecer tudo que um designer UX precisa nativamente e com excelente desempenho.

É hora dos designers UX mudarem do Sketch para o Adobe XD?

Adobe XD vs Sketch

Vamos explorar como o Adobe XD se compara ao Sketch. Iremos comparar os seguintes recursos:

• Interface de usuário
• Grade de repetição
• Símbolos e painéis de ativos
• Ferramentas de Design Responsivo
• Add-Ons e Plugins
• Prototipagem com Auto-Animate
• Compartilhamento e comentários
• Trabalhando com Desenvolvedores
• Controle de versão e colaboração em tempo real

Interface de usuário

Designers que estão familiarizados com ferramentas como o Photoshop não devem ter problemas para aprender Adobe XD ou Sketch, já que todos compartilham uma IU semelhante.

Uma diferença notável da interface do usuário é a ausência de um Barra de ferramentas no Adobe XD. A barra de ferramentas, localizada na parte superior da IU, é um recurso útil no Sketch com atalhos personalizáveis ​​para funções e ferramentas comumente usadas, como agrupar objetos. A Adobe oferece um recurso semelhante, reduzido, chamado de Caixa de ferramentas , localizado no lado direito do software.

Sketch vs XD : Sketch tem a vantagem de sua barra de ferramentas útil.

Grade de repetição

Um recurso notável no Adobe XD é a grade de repetição. Esta é uma ferramenta útil que permite a criação fácil de listas ajustáveis ​​e telas baseadas em grade. Embora o Sketch não tenha esse recurso, ele pode mais ou menos ser replicado com plug-ins.

Sketch vs XD : Adobe XD tem a vantagem com a grade de repetição, que é nativa do software.

Símbolos e painéis de ativos

Os símbolos foram um dos primeiros recursos que contribuíram significativamente para o sucesso do Sketch. Os símbolos estão para o Sketch como CSS (Cascading Style Sheets) para o design do site. Eles permitem que os designers reutilizem e editem em massa os ativos com facilidade, o que economiza muito tempo, ajuda a criar um sistema de design pronto e fornece consistência em todas as telas.

A Adobe começou com símbolos básicos e, em seguida, introduziu o painel de ativos que combinava símbolos, fontes e cores em um único local. A edição de qualquer um desses elementos mostra as atualizações resultantes em tempo real. O Sketch tem esses recursos, mas o Adobe XD oferece uma experiência de usuário mais coesa e aprimorada.

Sketch vs XD : Adobe XD tem uma ligeira vantagem devido aos elementos da interface do usuário combinados dentro do painel de ativos.

Ferramentas de Design Responsivo

O Adobe XD oferece um conjunto robusto de ferramentas de design responsivas. Um recurso de destaque, responsivo moda automotiva , adivinha como a tela deve responder aos vários tamanhos de dispositivo.

Este é um recurso incrivelmente útil que pode ser ligado e desligado usando um simples botão deslizante. Se o modo automático ficar aquém do comportamento esperado, um designer pode alterar as propriedades responsivas manualmente.

Sketch não tem esse recurso integrado, mas tem muitos plug-ins como o Anima Toolkit que fazem bem o trabalho.

Sketch vs XD: Adobe XD tem a vantagem aqui. Eles oferecem uma maneira integrada de ver os efeitos responsivos nos elementos da IU.

Add-Ons e Plugins

o ecossistema de plugins dentro do Sketch é indiscutivelmente um de seus maiores recursos. Existem centenas de plug-ins que estendem a funcionalidade do Sketch e permitem que os designers usem recursos aprimorados enquanto permanecem no ecossistema do Sketch.

Os complementos são o equivalente Adobe XD aos plug-ins. A Adobe iniciou seu ecossistema de complementos em 2018, portanto, não é tão robusto quanto o Sketch. Isso não é uma preocupação para a Adobe, já que seu objetivo é tentar reduzir a necessidade de complementos e se concentrar em fazer recursos que são integrados ao software.

Sketch vs XD: O Sketch tem a vantagem de sua extensa biblioteca de plug-ins.

Prototipagem com Auto-Animate

A Adobe atualizou recentemente o XD com um recurso incrivelmente útil para designers UX: carros animados . Ele funciona fazendo transições suaves e inteligentes entre elementos de telas diferentes. Os resultados são impressionantes, tornando a prototipagem uma experiência agradável para envolver clientes em potencial. Sketch não oferece essa funcionalidade, mesmo com um plugin.

Outro ótimo recurso de prototipagem introduzido pela Adobe é o suporte para microinterações, por exemplo, puxar um painel da borda da tela ou fazer um teclado aparecer. O Adobe XD também oferece suporte à prototipagem de interfaces de usuário baseadas em voz (como Alexa ou Google Home).

Sketch vs XD: Adobe XD tem a vantagem aqui com recursos de auto-animação que economizam tempo e suporte para micro-interações que falta no Sketch.

Compartilhando e comentando

Os designers frequentemente se envolvem com outros membros da equipe, desenvolvedores e partes interessadas - a capacidade de compartilhar designs e receber feedback é uma parte crucial do processo de design. Como tal, Adobe XD inclui funcionalidade integrada para maquetes e protótipos a serem compartilhados online para que qualquer pessoa possa adicionar comentários gerais ou apontar para locais específicos em um layout e deixar comentários.

Esses recursos, combinados com o modo de prototipagem dinâmica do Adobe XD, também podem ser testados em telefones celulares com o aplicativo nativo Adobe XD ou mesmo gravados para demonstrações não interativas.

O Sketch pode compartilhar e comentar, usando ferramentas de colaboração como Zeplin ou integrações com ferramentas de terceiros, como Invision.

Sketch vs XD: A Adobe tem uma pequena vantagem aqui com o compartilhamento e comentários online integrados.

Especificações de design

Ao longo de um projeto de design, os designers de UX geralmente precisam compartilhar especificações de design com os desenvolvedores. A Adobe incluiu esta funcionalidade no XD, enquanto os usuários do Sketch precisarão usar integrações como Zeplin ou InVision .

Sketch vs XD: A Adobe tem uma vantagem sobre o Sketch porque as especificações de design são integradas e não exigem integração de terceiros.

Controle de versão e colaboração em tempo real

Dois recursos importantes nos quais os designers e desenvolvedores contam são o controle de versão e a colaboração em tempo real. Grandes equipes de design que trabalham juntas no mesmo projeto precisam ser capazes de ver quando as mudanças foram feitas e acessar um histórico dessas mudanças.

A Adobe abordou a colaboração com a introdução de documentos na nuvem . Isso dá a todos na equipe, incluindo desenvolvedores, um local central para trabalhar. De acordo com a Adobe, a próxima etapa para o recurso de documentos em nuvem será o controle de versão.

O Sketch oferece controle de versão e colaboração em tempo real com plug-ins, mas esses recursos não estão integrados ao produto.

Sketch vs XD: Sketch ganha este. Eles têm controle de versão, embora com plug-ins; isso não é oferecido atualmente no XD.

Resumo do recurso: Adobe XD vs. Sketch

Existem semelhanças e diferenças entre a versão atual do Adobe XD e do Sketch. Aqui está uma comparação de cada produto:

Recursos	Adobe XD	Esboço
Gráficos vetoriais	Sim (e inclui Adobe Illustrator na assinatura CC)	sim
Edição de imagem	Não (mas inclui Adobe Photoshop na assinatura CC)	Sim, edição básica
Leve	sim	Não
Prototipagem	Sim, incluindo animação automática e prototipagem de voz	sim
Exportação de ativos	sim	sim
Transferência com inspetor online	sim	Não (mas disponível com plug-ins de terceiros)
Símbolos e estilos	sim	sim
Grade de repetição	sim	Não (mas disponível com plug-ins de terceiros)
Recursos	Adobe XD	Esboço
Grade de layout	sim	sim
Ferramentas de design responsivo	sim	Não (mas disponível com plug-ins de terceiros)
Colaboração em tempo real	Não (anunciado como um recurso futuro)	Não (disponível com plug-ins de terceiros)
Controle de versão	Não (anunciado como um recurso futuro)	Não (disponível com plug-ins de terceiros)
Plugins / Complementos	sim	Sim, com diversidade superior
Versão MacOS	sim	sim
Versão Windows	Sim (Windows 10)	Não
Preço e licenciamento	O plano inicial é gratuito com todos os recursos e um protótipo compartilhado ativo. A versão premium custa US $ 9,99 / mês com protótipos compartilhados ilimitados. A assinatura da CC com todos os outros aplicativos da Adobe custa US $ 52,99 / mês.	US $ 99 por um ano de atualizações, mas você pode continuar usando depois disso sem atualizações.

É hora de mudar as ferramentas de design UX?

Comparando recursos, Sketch e XD estão próximos. O Sketch carece de alguns recursos como animação automática, design responsivo automático e grade de repetição, todos nativos do XD.

A única coisa importante que ainda falta no Adobe XD é o controle de versão, que o Sketch possui graças aos plugins. Espere que isso chegue no XD assim que a Adobe continuar desenvolvendo o conjunto de recursos de documentos em nuvem.

É mais fácil fazer a transição do Sketch (e Photoshop ou Illustrator) para o XD do que o contrário, pois o XD pode abrir arquivos Sketch com excelente fidelidade. Você pode enfrentar alguns problemas se depender de plug-ins somente do Sketch, como Abstract ou InVision Craft.

Em alguns cenários, a escolha é óbvia: para usuários do Windows, Sketch não está disponível, e para assinantes da Adobe Creative Cloud, XD está incluído gratuitamente com protótipos compartilhados ilimitados. Isso não aconteceu por acaso.

Mas Sketch está resistindo. o empresa fechou recentemente US $ 20 milhões em financiamento e promete recursos importantes, como colaboração em equipe, transferência nativa e uma versão da web do aplicativo em 2019.

Se o controle de versão não for um problema crítico, então nunca foi um momento melhor para considerar o uso do Adobe XD. O compromisso da Adobe com a comunidade de design de experiência do usuário é evidente com recursos como modo de resposta automática, grade de repetição e prototipagem integrada. Apesar do início tardio, a Adobe provou que pode oferecer um desafio formidável ao Sketch.

• • •

Leituras adicionais no Blog de design do ApeeScape:

• Adobe XD vs. Sketch - Qual ferramenta de experiência do usuário é a certa para você?
• Atomic Design and Sketch - um guia para melhorar o fluxo de trabalho
• Design com precisão - uma revisão do Adobe XD
• Coisas que você talvez não saiba sobre tipografia no Sketch
• Familiarizando-se com o desenvolvimento do plugin Sketch

Compreender o básico

Quais ferramentas os designers de UX usam?

Dependendo dos objetivos e da fase do processo de design, um designer UX usará ferramentas para pesquisa de usuário, wireframing, maquetes e prototipagem e para trabalhar com desenvolvedores. As ferramentas populares são Sketch, Adobe XD, InVision, Zeplin e Figma.

O que é software de design UX?

O software de design de UX dá aos designers de UX a capacidade de se comunicar, wireframe, protótipo e modelos de design. Cada vez mais, o software de design UX facilita a criação de sistemas de design.

O que é Sketch?

Sketch, lançado em 2010, é um kit de ferramentas de design gráfico vetorial para designers de UX e UI. Sketch é um aplicativo exclusivo para Mac e permite que os designers criem wireframes, maquetes e protótipos. Ele também possui uma extensa biblioteca de plug-ins que estendem a funcionalidade do aplicativo.

O que é Adobe XD?

Adobe XD, lançado em 2017, é um kit de ferramentas de design gráfico vetorial mais recente para designers de UX e UI. XD funciona em Mac, Windows e na plataforma Android. É usado para wireframes, maquetes e prototipagem de clique simples. O XD também tem uma biblioteca crescente de complementos para recursos estendidos.