Para que os aplicativos e demais softwares cheguem aos usuários, uma longa jornada de design é percorrida. Os profissionais precisam investigar as dores e problemas dos usuários, propor hipóteses, desenvolvê-las, testá-las e, ainda por cima, documentar todos esses processos para que não se percam informações. Por isso, as ferramentas para design de aplicativos são tão variadas e imprescindíveis.
Para te ajudar nessa jornada, deixarei uma lista de ferramentas de design de aplicativos, segmentando-os por objetivos. Importante ressaltar que existem ferramentas que servem para mais de uma função, mas, para evitar repetições, as colocarei apenas no foco principal.
Outra informação importante é que também trarei ferramentas que te possibilitam a criação de layouts para aplicativos web e desktop. Afinal, aplicativo não é somente mobile!
Bora lá?
Ferramentas para UX Research
A primeira etapa importantíssima antes de iniciar a criação de layouts é a pesquisa. Por isso, inicio este conteúdo com as ferramentas para UX research.
Maze
O Maze se posiciona como uma ferramenta de product discovery, uma importante etapa a qual a UX Research também se apoia.
Com a ferramenta é possível criar protótipos e permitir que os usuários o explorem livremente. Isso é positivo para compreender se a experiência está positiva e os usuários estejam realizando as atividades esperadas para as telas.
A partir das interações, a ferramenta oferece dados estatísticos pré-configurados pelo time de pesquisa para que possam ter uma base de dados a se trabalhar. Podemos dizer, portanto, que o Maze também é uma importante ferramenta para a validação de protótipos.
Miro
O Miro é bastante conhecido no meio do marketing, servindo como uma ferramenta de mapa mental, anotações, fluxogramas e organogramas, dentre outras utilidades.
Embora tenha utilidade para os marketeiros, designers e pesquisadores também podem usufruir da mesma excelência. Afinal, as funcionalidades mencionadas também atendem às necessidades de ambas as partes.
Para além disso, é possível também criar boards kanban para a gestão das atividades, o que enriquece bastante. Podemos dizer, portanto, que o Miro é um faz tudo.
Google forms
Como a parte de pesquisa requer entrevistas, há o desafio de encontrar pessoas pessoalmente. Por este motivo, o Google Forms é excelente para otimizar este processo. Seja para as pesquisas quantitativas ou qualitativas, a ferramenta possibilita perguntas abertas e fechadas para que os usuários possam interagir.
Para além disso, a ferramenta da big tech ainda oferece dados estatísticos à medida que forem preenchidos os formulários, o que ajuda bastante na apuração de dados.
Ferramentas para wireframe e mockup
Após levantadas as informações prévias da etapa de UX research, chega o momento de rascunhar as ideias levantadas. Para isso, ferramentas de wireframe servem para isso, pois é exatamente a etapa de rabiscos.
Algumas ferramentas para te auxiliar nessa etapa são:
Sketch
Exclusivamente para usuários de MacOS, o Sketch se propõe a ser a ferramenta de wireframing e mockups colaborativa. Isto é, outras pessoas podem trabalhar num mesmo arquivo para evoluir o projeto — solução excelente para os trabalhos remotos.
Outra vantagem do aplicativo é ele poder ser usado tanto na sua versão web quanto a desktop.
Dentre as funcionalidades, ele é uma ótima opção para edição de vetores, oferecendo uma precisão que agrada aos designers. A exportação dos conteúdos diretamente para CSS é um outro fator que brilha os olhos, facilitando o trabalho para os desenvolvedores que eventualmente utilizarão o material para o aplicativo final.
Um outro fator benéfico é a comunidade do Sketch ser grande e possuir bastante apoio de tutoriais e guias da própria plataforma. Essa é uma forma interessante de escalar as habilidades com o aplicativo.
MockFlow
O MockFlow se propõe ser uma ferramenta voltada para wireframing, tanto que ela possui uma inteligência artificial para auxiliar os designers nesse processo. Ela promete maior organização e centralização de informações também, visando a clareza das informações.
Com isso, a ferramenta também oferece outras soluções, como o design spaces que serve para criar uma área de trabalho para organizar arquivos do projeto, sejam eles de Photoshop, Figma, ou qualquer outra ferramenta complementar para o design de aplicativos.
Dessa forma, o MockFlow é colaborativo, o que significa que várias pessoas podem ter acesso às informações.
Dentre as funcionalidades que se destacam, a criação de style guide também atrai os olhos de designers uma vez que este será o arquivo que norteará toda a construção do projeto.
Ferramentas para prototipação
São com os protótipos que ganhamos uma melhor noção de como funcionará o aplicativo, pois a partir deles teremos os fluxos conectados e podemos interagir como se fossem o aplicativo pronto.
A prototipação é importante para a etapa de validação e pode ser realizado com as ferramentas:
Marvel
Com a finalidade de criar mockups interativos, o Marvel é mais uma ferramenta para a prototipação. Ele oferece a opção de criar protótipos para websites e televisões, modelos específicos de iPhone, iPads, celulares Android e, inclusive, para Apple Watches.
No site, a empresa deixa exemplos de protótipos de diversas áreas de produtos, como saúde, chats, hotel, viagem, finanças e dentre outros.
Com o Marvel, você só precisa arrastar e soltar elementos e pode adicionar gestos e transições.
Uma grande vantagem é que os especialistas da Marvel concentraram grande parte de seus esforços na criação do ambiente ideal para colaboração em equipe. Um outro ponto de vantagem da ferramenta são suas integrações com ferramentas como Sketch, Youtube, Jira, Microsoft Teams e outros.
Proto.io
Também com a lógica de drag and drop, o Proto.io oferece esse suporte como recurso para tornar a ferramenta intuitiva.
O Proto.io permite a exportação do arquivo nos formatos PDF, PNG ou HTML para visualização offline. Esse recurso é ótimo para trabalhos e pesquisas assíncronas, característica comum nos trabalhos remotos.
Ademais, ele possui recursos para integrar layouts de ferramentas como o Figma, Sketch, Adobe XD e Photoshop. Com isso, ele se torna a ferramenta auxiliar exclusivamente para prototipação.
Freehand e Invision Studio
Com a premissa de ser tudo num único lugar, o Freehan, antigo InVision, oferece um workspace capaz de apoiar equipes de design em processos de UX research uma vez que possui áreas designadas para as etapas de planejamento, construção, brainstorm, ideação, apresentação e revisão do projeto de design.
Aqueles que possuem familiaridade com o Miro irão reconhecer bastante da ferramenta no Freehand para a prototipação.
Ferramentas para layout
Esse já é o momento de colocar a mão na massa no produto final. Enquanto ainda estamos pesquisando e criando mockups e wireframes, temos apenas os esboços. Ainda que exista uma emoção nessa etapa, a parte que mais ansiamos são os layouts em alta fidelidade.
Para isso, as ferramentas devem ser impecáveis para oferecer aos designers e desenvolvedores as melhores experiências para que os processos sejam mais agradáveis e com o mínimo de impedimentos possível.
Por isso, destaco as seguintes ferramentas, sobretudo o Figma:
Figma
O Figma conquistou o mercado de UI/UX design uma vez que trouxe uma série de funcionalidades interessantes ao público-alvo. Os designers se satisfazem pelo fator de ser uma ferramenta de design de aplicativos totalmente web e colaborativa com uma alta performance.
Isso significa que ele não trava em comparação com soluções anteriormente disponíveis no mercado. A ferramenta se destacou tanto a ponto da Adobe tentar comprar, processo que rendeu longos meses.
A facilidade de uso, integração fácil com plugins, componentes e bibliotecas reutilizáveis são motivos que destacam o Figma entre os ux designers. Ainda ainda o que mencionar a respeito da prototipação que é interativa, sendo possível reproduzir o protótipo no aplicativo de celular do Figma para demonstrações. Essa é uma funcionalidade que encanta clientes e gestores de produtos.
Além disso, o Figma também conta com uma comunidade altamente participativa, o que eleva o nível de produtividade dos profissionais que utilizam da ferramenta.
Para encerrar, há quase 1 ano que a ferramenta liberou o seu modo de desenvolvedor, servindo para apoiar ainda mais os profissionais de TI na hora de construir os layouts na etapa de front-end.
Adobe XD
Em função do Figma, este produto da Adobe deixou de ser um queridinho dos designers, mas não podemos negar a importância que o XD teve na criação de telas para aplicativos.
A Adobe sempre se destacou no quesito softwares para criação e, por este motivo, o XD foi uma das principais ferramentas para design de aplicativos. Ainda que a performance e bugs pudessem trazer uma má experiência para os designers, ela não deixou de entregar inovação em sua época de auge.
Atualmente, a Adobe pontua que a ferramenta está em fase de manutenção. Tendo em vista que o Figma passou um tempo no guarda-chuva da empresa, podemos esperar que alguns aprendizados tiveram ao longo desse processo que possam agregar no XD.
Ferramentas para documentação
São muitas discussões e entrevistas até entendermos quais serão os caminhos tomados para o produto que estamos desenvolvendo ou evoluindo. Se temos dificuldade muitas das vezes para nos recordar o que almoçamos no dia anterior, quiçá nos recordar do que foi debatido ao longo de meses de planejamento e desenvolvimento.
Por isso, as ferramentas de documentação são fundamentais para que possamos consultar os processos decisivos, as atas das reuniões, os objetivos, links importantes, dentre outras informações relevantes de se guardar.
Assim, recomendo ambas as ferramentas abaixo para te ajudar nesse processo:
Notion
Para quem gosta de construir sua própria organização do zero, o Notion é excelente para isso. A partir dos blocos, você consegue criar dashboards, central de arquivos, guias e documentações, calendários para gestão de atividades, dentre outras possibilidades que a criatividade permite criar junto das possibilidades da ferramenta.
As diversas integrações que o Notion possui também aumenta seu poder, se integrando ao Slack, Google Agenda, Figma, GitLab, GitHub, Google Drive, Dropbox, Loom, LottiesFiles, IFTTT, Zendesk, Zoom, Clickup, etc. Ao todo, são 89 integrações possíveis até a data de publicação deste artigo.
Com isso, podemos afirmar com certeza que o Notion oferece muita autonomia e possibilidades.
Clickup
Para aqueles que se sentem um pouco mais perdidos em organizar tudo do zero, o Clickup oferece essa flexibilidade de ter um pouco dos dois mundos. Ao passo que é possível criar um workspace totalmente a sua cara, também é possível utilizar modelos já prontos.
Ele também conta com mapas mentais, lousas mágicas, gráficos de gantt, escrita de documentos e organização de itens em pastas — além de ter a organização de tarefas que podem ser vistas em forma de listas ou então por calendário.
Se você gostou do que leu por aqui, que tal me contar nos comentários?
Uma resposta
Óptimo artigo.
Pude encontrar o Marvel. Obrigado.