O Adobe XD irá matar o Sketch e o InVision?

Shane Williams Blocked Unblock Seguir Seguindo 10 de janeiro

A resposta da Adobe ao Sketch e ao InVision é o Adobe XD. Sketch tem sido a principal ferramenta para designers de UX / UI há alguns anos, aprimorada ainda mais por sua comunidade, plugins e integração com InVision.

Se você não pode se importar menos com o Adobe XD, ou não quer saber o que o XD tem a oferecer, faça um favor e role a tela para baixo e leia a seção Por que o Adobe XD dominará, independentemente dos recursos antes de cruzar o XD fora de sua lista.

Existem muitas outras ferramentas de design UX / UI fora do Sketch e do InVision. Figma, Framer e Protopie, para citar alguns, mas Sketch e InVision parecem estar dominando o campo. A pergunta que precisamos fazer é se o reinado está prestes a terminar.

Eu não sou de forma alguma afiliado à Adobe e as opiniões expressas neste artigo são minhas.

Uma breve história até hoje

Tradicionalmente, os designers usavam o Photoshop para criar aplicativos e sites, mas o Photoshop como uma ferramenta nunca foi criado com o objetivo de projetar websites e aplicativos. O Photoshop, sendo uma ferramenta profissional muito pesada, começou seus dias com foco na fotografia e, mais tarde, foi escolhido por designers gráficos que lhes permitiram trazer suas criações para o próximo nível.

O grande problema com o Photoshop é que a ferramenta é desajeitada, seu formato nativo de PSD deixa os designers gerenciando arquivos grandes e a maioria das ferramentas dentro do software é inútil para a maioria dos designers digitais.

Sketch veio em socorro e abordou essas questões e agora evoluiu para o líder de mercado. O Sketch permitia símbolos reutilizáveis e fluxos de trabalho muito mais rápidos, permitindo que os designers trabalhassem de maneira mais inteligente e eficiente. O poder real do Sketch vem à tona com a adição de plugins, permitindo que funcionalidades específicas muito específicas sejam adicionadas ao software, não disponíveis através do aplicativo nativo.

Esboço – https://www.sketchapp.com

A capacidade de criar protótipos foi ativada pela primeira vez através da integração da InVision. O InVision permitiu que você carregasse arquivos PSD e Sketch nativos em suas plataformas e transformasse projetos em protótipos viáveis. Recentemente, o Sketch permitiu a criação de protótipos por meio de seu serviço de nuvem, mas isso ainda é muito básico e limitado.

“Se uma imagem vale mais que mil palavras, um protótipo deixará você sem palavras.” – Shane Williams

Entre no InVision Studio

Quando se tratava de animações complexas, os designers muitas vezes ainda confiavam na criação de modelos em softwares como o After Effects da Adobe. Esse fluxo de trabalho foi desafiado quando a InVision anunciou o Studio, um novo software que permitia aos designers criar animações e microinterações mais avançadas. O Studio também se integrou ao link da InVision para o Sketch através de seu plugin Craft. Como o Photoshop, o After Effects é um aplicativo muito pesado para o trabalho de animação da interface do usuário.

InVision Studio – https://www.invisionapp.com/studio

Adobe vem para a festa

Os designers da Adobe perceberam a necessidade de uma nova ferramenta de design e responderam com um novo software apelidado de "Project Comet" em outubro de 2015. Isso foi desenvolvido com lançamentos mensais, impulsionados pelo feedback da comunidade de design da Adobe. A ferramenta assumiu uma nova filosofia de design e prometeu ao projetista a capacidade de “projetar na velocidade do pensamento”. O Comet foi lançado com um novo conceito e ferramenta surpreendentes chamado repeat-grid, que chamou a atenção de muitos designers.

Isso permitiu que os designers criassem um elemento e, em seguida, usassem a ferramenta de repetição de grade para arrastar uma grade de instâncias do mesmo elemento em uma forma de grade. O texto e as imagens podem mudar dentro da grade, mas os elementos permanecem ligados, permitindo redesenhar em cascata ao ajustar um elemento, economizando horas de designers com a capacidade de experimentar layouts mais rapidamente do que nunca.

Dentro do aplicativo Comet

Quando o Comet saiu da versão beta, ele foi renomeado para Adobe XD (o XD significa Experience Design). Apesar de ser uma ferramenta muito poderosa, ainda não poderia competir com o Sketch e seu ecossistema de plugins. A prototipagem era básica, na melhor das hipóteses, mas a prototipagem via InVision era melhor.

Tudo isso mudou quando a Adobe lançou sua última atualização para o XD em 15 de outubro no Adobe MAX 2018.

Adobe XD no Adobe Max 2018

Plugins

Entre a lista de novos recursos, os plugins agora estavam disponíveis no Adobe XD, e muitos plugins do Sketch já foram portados para o XD. Essa foi a maior vantagem do Sketch, e agora a Adobe nivelou o campo de jogo.

Inovação em ferramentas de design através de plugins. Imagem pela Adobe

Os plug-ins estendem a funcionalidade do Adobe XD para fluxos de trabalho e integrações. A abordagem da Adobe é permitir que uma comunidade muito mais ampla crie seus próprios plugins, através de linguagens já em uso e amplamente conhecidas, como javascript, HTML e CSS.

Gatilhos de voz e fala

O Adobe XD também permitiu que os usuários interajam com seus protótipos como nunca antes. Os acionadores de voz e a reprodução da fala permitem levar os usuários além da tela, permitindo a capacidade de criar protótipos com voz. Algo que nenhum outro software de prototipagem permite fazer.

Comandos de voz e reprodução de voz. Imagem pela Adobe

Animar automaticamente

O Adobe XD eliminou o InVision Studio com esse recurso. Embora ainda não ofereça os excelentes controles que o InVision Studio permite, a velocidade do Adobe XD e a facilidade de configuração é algo que o InVision Studio precisa trabalhar duro para permanecer relevante.

Auto-Animate no trabalho. Imagem pela Adobe

Recentemente, testei o recurso de animação automática do Adobe XD , você pode ler mais sobre ele e fazer o download dos arquivos do projeto aqui :

Adobe XD: colocando o auto-animação em teste
A Adobe anunciou recentemente sua versão atualizada do Adobe XD no Adobe Max em outubro e introduziu um novo recurso chamado… uxdesign.cc

Símbolos ligados

O Adobe XD evoluiu seu ecossistema de símbolos. É mais fácil ficar por dentro das alterações quando os símbolos copiados de um documento e colados em protótipos permanecem vinculados. Agora, quando as alterações ocorrerem no arquivo de origem, você terá a opção de aceitar atualizações em outro arquivo.

A criação de sistemas de design no Sketch sempre foi muito poderosa, mas com símbolos vinculados no XD, a Adobe abriu um novo mundo quando se trata de gerenciar sistemas de design no XD. Esse novo recurso é simples de entender e muito mais fácil de configurar, ao contrário do Sketch.

Compartilhamento de ativos em documentos cruzados com símbolos vinculados. Imagem pela Adobe

Prototype drag gestures

Este foi um grande elemento ausente no arsenal do XD, esta atualização é enorme para os usuários do XD.

Outros recursos do XD que não podem ser ignorados…

  1. Os usuários do Adobe XD podem abrir arquivos do Photoshop e do Illustrator no XD – designers tradicionais que usam esses pacotes de software agora podem abrir seus arquivos no XD e continuar com o protótipo. Não há necessidade de fazer upload de arquivos no InVision mais.
  2. Arquivos de esboço podem ser abertos no XD – dando aos usuários do Sketch nenhuma desculpa para não dar uma chance ao XD.
  3. Abra arquivos XD no After Effects – animações complexas ainda podem ser criadas no After Effects, exportando um projeto XD para AE e adicionando controle preciso a animações (se o Adobe XD não atender às suas necessidades).
  4. Handoffs para desenvolvedores – isso concorre com o novo foco da InVision em colaboração. 'Compartilhar para o desenvolvimento' permite que os desenvolvedores inspecionem arquivos de projeto através de um link da web e baixem ativos marcados para exportação sem nunca abrir ou possuir uma cópia do Adobe XD. Os desenvolvedores também podem deixar comentários e perguntas.
  5. Comentários – os comentários de 'Compartilhar para revisão' podem ser vinculados a designs, para uma colaboração mais rápida com as partes interessadas, competindo com algumas das ofertas da InVisions.
  6. Integrações de aplicativos – O Adobe XD agora se integra a mais de seus aplicativos favoritos de colaboração e produtividade, incluindo o Slack, o JIRA e o Microsoft Teams. O InVision parece muito menos relevante quando se olha para esse recurso de colaboração.

Adobe XD – visualização do dispositivo ao vivo. Image by AdobeAdobe XD – Transferência de ativos contínua com o Illustrator e o After Effects. Imagens da Adobe

Por que o Adobe XD dominará, independentemente dos recursos

Embora os recursos evoluam no Sketch, no InVision, no Studio e no Adobe XD, a Adobe tem uma enorme vantagem, e isso está relacionado ao fluxo de trabalho. Se você não for um usuário do Adobe XD, precisará de vários softwares para se comunicar e gerenciar seus projetos. Muitos fluxos de trabalho de design acabam parecendo assim:

  1. Design no Sketch
  2. Publicar no InVision
  3. Protótipo no InVision ou criação de animações no InVision Studio
  4. Compartilhe e colete feedback via InVision
  5. Voltar ao passo 1 ou 2

Isso geralmente divide o processo de design em diferentes etapas, o que significa que os designs planos geralmente acontecem primeiro e a prototipagem e a animação acontecem mais tarde.

O round-trip entre esses passos não é tão fácil quanto parece, e é por isso que esses passos geralmente acontecem de forma isolada.

A prototipagem, o design e a animação acontecem em um único espaço ao usar o Adobe XD, o que significa que testes e iterações no design acontecem com mais facilidade e rapidez. O processo de design é fácil, as interações e animações acontecem no contexto de cada uma, permitindo que essas disciplinas se tornem parte do processo de design, e não independentemente umas das outras. Isso é muito poderoso e permite que o design aconteça na velocidade do pensamento .

A capacidade de passar de um wireframe para uma prototipação de alta fidelidade, para um handoff de desenvolvedor em um software mostra o quanto a Adobe foca em fluxos de trabalho. Ao tornar os fluxos de trabalho simples e fáceis, eles estão lidando com alguns dos principais pontos problemáticos dos designers – algo que somente a Adobe está realmente equipada para fazer por meio de seu ecossistema de software.

Fluxo de trabalho do Adobe XD. Imagem pela Adobe

A Adobe também tem um enorme domínio no setor de design por meio de seu conjunto de aplicativos Creative Cloud. A maioria dos designers usa um ou mais dos aplicativos da Adobe e tem uma licença da Creative Cloud. Ao ter que desembolsar dinheiro por uma licença do Sketch e do InVision junto com uma licença da Creative Cloud, não faz sentido manter as licenças do Sketch e do InVision quando esses benefícios já estiverem cobertos no conjunto da Creative Cloud. A InVision tem uma versão gratuita, mas equipes maiores precisam de licenças. O Adobe XD também é gratuito, com o limite sendo o número de projetos que você pode publicar para comentar e compartilhar na versão gratuita. A barreira para entrada no Adobe XD é definida como muito baixa.

Lista de aplicativos da Adobe Creative Cloud

A força da InVision também é a maior ameaça

Embora o Sketch e o InVision pareçam inseparáveis para a maioria dos designers, essa também é a maior ameaça da InVision. A InVision é tão integrada ao Sketch, um software mantido e de propriedade de terceiros. Quando o Sketch é atualizado, o InVision precisa executar o catchup. Talvez seja por isso que a InVision mudou seu foco para colaboração, com menos foco no Sketch. Com o Sketch Cloud agora disponível, a existência do InVisions pode estar sob ameaça. Muitas das vantagens do InVisions estão sendo abordadas pelo Sketch Cloud, e não há como saber até onde o Sketch vai avançar nessa área. Somente o tempo dirá se o InVision Studio conseguirá preencher a lacuna que o Sketch poderá deixar, caso os usuários abandonem a plataforma em favor do Sketch Cloud.

Apresentando a Sketch Cloud

Pivô da InVision

A InVision está pressionando a colaboração como foco, juntamente com o slogan “DESIGN BETTER. MAIS RÁPIDO. JUNTOS. ”A plataforma está evoluindo e girando seu foco.

InVision – https://www.invisionapp.com

O novo produto da InVision, DSM (Design Systems Manager), pode ser como a InVision se mantém relevante no futuro. O InVision não mostra sinais de integração com o Adobe XD e ainda parece estar colado no Sketch. Se essas plataformas se abrirem para o Adobe XD, elas poderão garantir um futuro muito mais sustentável.

Design System Manager da InVision

O foco da Adobe no fluxo de trabalho e colaboração

A versão de dezembro do Adobe XD trouxe uma nova maneira de trabalhar com o que eles chamam de 'Document Cloud'. Isso permite que os documentos sejam salvos, compartilhados e trabalhados pela nuvem, da mesma forma que o DropBox, mas com uma integração mais profunda dentro do Adobe XD. Esta é também uma ligeira partida ou o que parece ser uma evolução da sincronização da nuvem de pastas da Creative Cloud da Adobe.

Isso pode representar uma ameaça às soluções da InVision, pois a Adobe fortalece sua abordagem à colaboração e aos fluxos de trabalho. De acordo com a Adobe, as futuras atualizações em 2019 incluirão colaboração ao vivo e controle de versão. Você não precisará mais salvar manualmente as versões de documentos. Com os documentos na nuvem, você terá maneiras fáceis de criar uma versão de marco que pode ser acessada rapidamente no XD.

Os planos futuros da Adobe também fazem referência aos Sistemas de Design – você terá tudo o que precisa para criar e gerenciar sistemas de design robustos para uso com sua equipe ou organização com documentos em nuvem e Bibliotecas da Creative Cloud.

Adobe XD 2018 em revisão: grandes atualizações e o caminho à frente
Produtos da Adobe em destaque À medida que 2018 chega ao fim, levamos um momento para refletir sobre o ano passado e estamos ansiosos para… theblog.adobe.com

A história se repetirá?

Naquela época, quando a impressão era a plataforma dominante, o QuarkXPress dominava o poleiro. Este era um pacote de software de editoração eletrônica que permitia layouts para impressão. Na época, era incomparável por seus concorrentes; Freehand da Macromedia, Adobe Illustrator e Photoshop.

Quando a Adobe apresentou o InDesign, ele concorreu diretamente com o QuarkXPress e forneceu uma alternativa, abrindo um novo mundo de possibilidades na área de editoração eletrônica.

Muitos acreditavam que o InDesign nunca poderia substituir o QuarkXPress, mas o poder absoluto da Adobe, o domínio do mercado e a integração com seus outros pacotes de software logo deixaram o QuarkXPress em pó. Enquanto o Quark ainda está vivo e funcionando, muitos designers nunca ouviram falar do QuarkXPress.

Telas de lançamento do InDesign e do Quark

A história está prestes a se repetir com o advento do Adobe XD no espaço UX / UI?

Em conclusão

O futuro do Adobe XD é muito brilhante e vai conquistar muitos usuários do Sketch. A mudança de foco da InVision pode garantir sua sobrevivência, mas uma coisa é certa: o Adobe XD está aqui para ficar. A usina da Adobe é forte e empresas menores, como InVision e Sketch, terão que se esforçar para permanecer relevantes no futuro.