As principais ferramentas para Design Digital em 2017

Todo início de ano é recheado com listas de filmes, séries, quantos quilos devemos perder e não podia ser diferente com nossas ferramentas de trabalho né? Como UI Designer sempre me perco no meio de tantas opções no mercado, por isso, no início de 2016 criei uma resolução de testar e conhecer mais ferramentas de criação de wireframes, interface e prototipação. O objetivo era sair do básico de Photoshop, Sketch e InVision.

Nesse processo, conversei com alguns amigos, conferi algumas comunidades, li muitos textos de highlights e testei todas essas ferramentas durante 2016 ou na última semana para montar essa lista.

As Clássicas

Uma lista sobre as principais ferramentas para design digital precisa ter as quase unânimes, então, vale a menção dessas ferramentas com algumas dicas:

Sketh (Plugins para todo o lado)

Se você não conhece o Sketch, ele tem que ser o primeiro aplicativo da sua lista*. Com foco na criação de interfaces (web, mobile e apps), ele facilita o dia-a-dia e traz leveza e agilidade no processo. Aconselho a pesquisar sobre atalhos de teclado e sobre a parte de símbolos.

* Se você não possui um Mac, aconselho a usar o Adobe XD.

Se fosse só isso o Sketch já seria incrível, mas ele vai além da criação da interface através de plugins. Segue uma lista com algumas dicas:

  • Craft: (Plugin do Invision) várias funções: Envio das telas, permite sincronizar com o celular, Inserir informações reais para usar no seu protótipo, usar as bibliotecas colaborativas e facilita o processo de duplicar elementos.
  • CSSketch: Permite que você edite rapidamente seus projetos via CSS, anexando uma folha de estilo
  • Blade Plugin: Gera automaticamente um HTML a partir de seu projeto.
  • Day Player: Permite que você adicione imagens de placeholder em qualquer documento do Sketch.
  • Lorem Ipsum: Precisa explicar?
  • Icon Stamper: Facilita o processo de criação de ícones.
  • Rename iT: Renomeia com facilidade um grupo de layers.
  • Symbol Organizer: Organiza a sua lista de símbolos, que conforme o tempo tende a ficar bem desorganizada.
  • User Flows: Permite a criação fácil de um fluxograma baseado nos seus artboards
  • Auto-Layout: Plugin para Sketch que ajuda a criar layout fluídos para diversas telas automaticamente (dica do Neviton Santana)

InVision (novas atualizações)

O InVision é uma ferramenta com desenvolvimento de produto bem completa que, além de sempre melhorar sua principal funcionalidade, está constantemente buscando novas ideias para melhorar o workflow de prototipação, aprovação e validação.

Sua essência é ser uma ferramenta de prototipação rápida, porém o seu diferencial é o foco na colaboração para validar o projeto de maneira descentralizada. Possui uma área de gerenciamento de projetos bem intuitiva que traz visões para facilitar e dar visibilidade no fluxo de aprovação. Além disso, é possível criar desde apresentações até visitas guiadas na interface.

Mas a cereja do bolo fica para a nova funcionalidade (ainda em beta) de exportação de styleguides, recursos e material visual para o desenvolvimento. Virando também um concorrente do Zeplin.

Zeplin

Falando no Zeplin, enquanto o InVision ainda estiver desenvolvendo a funcionalidade de exportação, o Zeplin é essencial. Conheci o app em 2016 e não sei como enviava projetos para desenvolvimento antes.

O Zeplin, para quem não conhece, extrai com exatidão todas as informações relevantes do seu arquivo de Sketch ou Photoshop: cores, fontes, medidas, sombra, etc. Com isso o desenvolvedor não precisa mais abrir o programa, ou o designer não precisa gerar um documento com tudo, apenas envia um link com tudo necessário para o desenvolvimento .

As apostas

Agora entramos na área com as principais apostas para 2017, vamos lá:

Adobe XD

2016 foi o ano de lançamento da nova ferramenta de UX da Adobe. Com foco em criação e prototipação de interfaces, o XD vem como principal concorrente do Sketch, trazendo como diferenciais: ter uma versão para Windows 10 e ir além da etapa de design, agregando a parte de prototipação, preview da interface e até a exportação de styleguides.

O XD ainda ajuda na criação através de repetição de Grids, biblioteca compartilhável entre softwares da Adobe (Se você mudar uma cor na paleta, ele automaticamente vai mudar o fundo do Background dentro do PSD do destaque, mágico!) e interface bem intuitiva para quem conhece a Adobe.

A ferramenta atualmente está em Beta gratuito e é sempre atualizado. Na última Adobe MAX foram lançadas várias funcionalidade, como o painel de layers e uma área de gerenciamento de símbolos bem completa.

O destaque dessa última atualização foi para edição simultânea do mesmo arquivo por dois membros do time, bem no estilo do Figma. No fim, o Adobe XD quer ser o Sketch + Figma + InVision + Zeplin . Será que vai conseguir?

Flinto for mac

O Flinto for mac é o meu aplicativo preferido de 2016. Com uma curva de aprendizado bem rápida, é possível ir além da prototipação simples, integrando interações impressionantes. O ponto chave é que você não precisa saber programar e nem usar timelines, o que facilita bastante para designers como eu.

Como a tendência de focar cada vez mais em micro-interações para melhorar usabilidade está se tornando mais importante, o Flinto faz essa ponte através de uma biblioteca bem completa que vai ajudar até na comunicação com os outros times.

É possível ter uma validação mais fluída através de gestos, rolagens suaves e animações simples. E até mesmo propor interações fora do básico. Outros pontos importantes são: a possibilidade de exportar diretamente do Sketch e visualizar na hora ao fazer uma alteração. Seu único contra é a falta de animações/interações mais complexas.

Form

Form é uma ferramenta de protótipos para interações/animações mais elaboradas criada pela RelativeWave. A empresa foi comprada pelo Google e o software agora é gratuito.

O ponto mais legal do Form é que todo o processo de animação é feito de maneira visual, onde você não precisa conhecer nada de Javascript para programar as animações. Ao contrário de alguns concorrentes, como o Framer.

A área de Aprendizagem do site é bem completa e possuem uma comunidade sempre disposta a ajudar. Além disso, ganha pontos por ser bem simples copiar e colar elementos do Sketch para testar na mesma hora.

PS: Talvez seja substituída pela nova ferramenta do Google: Stage / Gallery

Principle

Você se lembra do Flash? Sente falta da timeline? O Principle é um aplicativo de prototipação com foco de animações em timeline. Pura nostalgia. São duas timelines: a inferior para criar interações entre páginas e a segunda (superior) para animações simples dentro da própria página.

O seu principal “problema” é que cada animação mais complexa vai precisar criar uma nova “página” dentro do Principle, o que pode virar um pequeno monstro.

Figma

Primeira ferramenta de design com colaboração simultânea, o Figma é voltado para manter o foco e diminuir os ruídos no processo criativo. Porém não consegui testar o real uso por falta de um projeto com essas características.

Atualização: Ferramentas para Chatbot

Um dos leitores do artigo, Afonso Melo, comentou que sentiu falta de indicações de ferramentas de prototipagem para Chatbots e indicou uma ferramenta bem interessante:

  • Botsociety: ferramenta bem agradável para prototipar chatbots, foi lançado ano passado, algumas semanas após o Facebook liberar as funcionalidades no Messenger. Pelo que pesquisei a equipe recebe muito bem feedback e a ferramenta tem evoluído bastante.

Outros aplicativos que valem uma menção:

  • Proto.io: Web app de prototipação com animações simples, possui uma boa biblioteca de elementos de interface mas tende a ficar lento ao adicionar muitas interações.
  • Framer: App voltado para prototipação usando Javascript, uma boa opção se você tiver um bom conhecimento na área.
  • Marvel: Uma boa alternativa para o InVision.
  • P.O.P.: App comprado pelo Marvel com foco em prototipação de rascunhos de papel, caneta e post-its.
  • Hype: Outro App de prototipação (?) focado em timeline, porém o seu melhor uso é em criação de animações HTML5.
  • ProtoPie: Outro App de prototipação com foco em micro-interações sem programação.
  • Stage / Gallery by Google: Após a aquisição da Pixate e da Form by Google, as duas equipes estão trabalhando juntos em uma nova ferramenta de design. Devemos ter boas novidades em 2017.
  • Indicações do Neviton Santana: Webflow, Blocs App, Bootstrap Studio: 3 Ferramentas voltadas para design e desenvolvimento de sites.

Outros aplicativos testados ou mencionados para essa lista:
Avocode, Atomic.io, Quant-ux, Pixate, Origami, Affiinity, Fluid, Briefs, Notism, Axure, Balsamiq…


Novas ferramentas devem nascer em 2017, outras desaparecem e até mesmo aquisições estratégicas podem acontecer. Quem ganha com isso somos nós, que não precisamos apenas usar apenas o Photoshop no nosso dia-a-dia.

Nosso processo de prototipação e validação pode ficar cada vez mais rico, diminuindo ruídos com outras áreas e sendo mais assertivo na comunicação. Depende apenas da gente escolher as ferramentas e processos corretos.


Qual a sua opinião sobre o assunto?

Opa, seria muito legal saber o que você pensa a respeito dessa conversa. Sugestões, indicações, críticas… deixe um comentário aqui no Medium ou me procure no Linkedin para continuarmos esse papo.

Posso te pedir um favor?

Se você gostou desse conteúdo, curta e compartilhe o post nas suas redes sociais. Isso ajuda esse conteúdo a atingir mais interessados e me motiva a continuar escrevendo e publicando por aqui. Obrigado! Grande abraço e até o próximo post.