As melhores ferramentas de wireframe para seu aplicativo
Publicados: 2018-03-23Fizemos uma lista de ferramentas de wireframes que podem ajudar a tornar a criação do seu aplicativo ou site menos intimidante. Se você está procurando uma ótima ferramenta de protótipo , também incluímos algumas sugestões para ela.
Criar um novo aplicativo ou site é um feito respeitável que muitos não realizarão em sua vida. Isso não significa que você deve desistir de fazê-lo, mas sim que você deve pesquisar e entender tudo antes de mergulhar de cabeça. Muitos novatos têm dificuldade em descobrir a diferença entre um wireframe, um protótipo e maquetes, então este post está aqui para ajudá-lo a entender cada um.
ÍNDICE
O QUE É UM FRAME?
MELHORES FERRAMENTAS DE FRAME DE 2018
O QUE É UM PROTÓTIPO?
MELHORES FERRAMENTAS DE PROTOTIPAGEM DE 2018
CRIE MOCKUPS DO SEU PRODUTO
O QUE É UM FRAME?
Você tem uma ideia genial para um novo aplicativo ou site, mas como começar a transformar isso em um produto real? Com arame! Este é o primeiro passo no processo de planejamento, por isso é importante que você não o pule.
Noções básicas de wireframe
Antes de tomar qualquer decisão importante de design, seu aplicativo ou site precisará primeiro de um layout funcional que faça sentido. É aí que entra o wireframe. A maioria das pessoas começa fazendo um esboço desenhado à mão de como eles querem que seu aplicativo ou site se pareça. O próximo passo é transformar este esboço em um layout ou esboço digital que pareça mais organizado e profissional.
Seu wireframe precisará comunicar a estrutura básica da página sem incluir nenhum elemento de design ou conteúdo real.
Trabalhar através do wireframe antes de começar a embelezar qualquer coisa permitirá que você detecte quaisquer erros de usabilidade que seriam difíceis de lidar mais tarde. Nesta fase, é mais importante garantir que os elementos incluídos façam sentido e sejam funcionais, especialmente para o seu público-alvo. Se você está tentando atrair a atenção dos investidores, um wireframe também os ajudará a entender seu produto com muito mais facilidade. Na verdade, não ter pelo menos um wireframe pronto pode fazer com que os investidores percam o interesse muito rapidamente. Os elementos incluídos em um wireframe tendem a ser caixas para títulos, botões, caixas de texto e caixas de imagem.
Estrutura de arame vs. maquete
É fácil confundir um wireframe com um mockup porque eles contêm elementos muito semelhantes. No entanto, ao trabalhar com uma equipe de desenvolvedores, designers e investidores, você precisará entender o que os diferencia.
Para começar, um wireframe é usado para organizar o conteúdo e os recursos do seu aplicativo , mas de uma maneira muito básica. Pense nisso como um esboço que mostra a estrutura básica do que será incluído em seu aplicativo. Assim que você começar a adicionar outros elementos, como cores, ícones, imagens, fontes e fotos, ele começará a se transformar em uma maquete.
Um mockup fornece uma representação de média fidelidade do seu aplicativo ou site em desenvolvimento. É uma representação muito mais realista do que seu aplicativo está sendo moldado. Pense nesta etapa do processo como adicionar um pouco de substância ao seu wireframe básico ou dar um pouco mais de vida.
MELHORES FERRAMENTAS DE FRAME
BÁLSAMO
MOCKPLUS
MOQUPS
WIREFRAME.CC
MOCKFLOW
BÁLSAMO
Disponível para todos os sistemas operacionais porque é baseado na web.
Principais recursos: Balsamiq é uma ferramenta de wireframe altamente recomendada que permite aos usuários criar wireframes para aplicativos de desktop, aplicativos móveis, sites, janelas de diálogo, aplicativos da web, aplicativos de tablet e muito mais . Criar seu wireframe por meio do Balsamiq é semelhante a desenhar em um quadro branco, e o programa também permite arrastar e soltar elementos da interface do usuário, obter feedback sobre esboços de sua equipe, revisar designs e refinar seu trabalho em tempo real.
Preços: O preço desta ferramenta irá variar dependendo de várias situações. Você pode começar com uma avaliação gratuita de 30 dias, mas depois disso terá que pagar taxas mensais ou anuais, dependendo da plataforma escolhida. Por exemplo, a versão em nuvem custará US$ 9 por mês ou US$ 90 por ano para até dois projetos. A versão para desktop custará US $ 89 para uma licença de usuário único.
Bônus: Balsamiq oferece cursos gratuitos disponíveis através da Udemy e Skillshare para ajudá-lo a aprender como usar o produto e obter os melhores resultados.
MOCKPLUS
Disponível para Mac OS, Windows, Android e iOS.
Principais recursos: Como os projetos podem ser vinculados ao armazenamento em nuvem, o MockPlus permite que uma equipe inteira colabore facilmente em um único projeto. Os usuários podem comentar diretamente no projeto e marcá-lo para que outros o vejam. Você também pode enviar e-mails de notificação para sua equipe para manter contato sobre as alterações. A melhor parte é que você pode fazer tudo isso sem codificação ou programação, então é mais fácil se concentrar no trabalho à sua frente.
Preço : Existe uma opção gratuita disponível para usuários individuais que inclui produtos ilimitados, embora seja limitada em outros aspectos. Depois disso, o preço varia de US$ 199 por ano para um indivíduo a US$ 2.999 por ano para uma empresa. Você também pode comprar uma licença, que varia de US$ 399 para um único usuário a US$ 5.999 para uma empresa (30 usuários).
Bônus: o maior atrativo do MockPlus é que ele permite que os desenvolvedores criem wireframes em uma velocidade mais rápida, graças às ferramentas que eles projetaram para acelerar o processo.
MOQUPS
Disponível para todos os sistemas operacionais, pois é baseado na web.
Principais recursos: Moqups é uma plataforma baseada na web que pode ser usada para criar wireframes para aplicativos da web e aplicativos móveis para iOS, Android e Bootstrap. Como a plataforma é baseada na web, você pode se conectar e trabalhar de qualquer lugar. A plataforma não é apenas para wireframes, você também pode fazer diagramas e protótipos. Você pode facilmente arrastar e soltar elementos, usar seus kits de estêncil, escolher diferentes fontes, selecionar objetos e arrastar e soltar suas próprias imagens no que estiver trabalhando.
Preços : Como a maioria das ferramentas de wireframing, o Moqups oferece um teste gratuito. Depois disso, o preço dependerá de vários fatores. Por exemplo, uma assinatura anual que inclui projetos, objetos, armazenamento e comentários ilimitados custará US$ 13 por mês para um único usuário e US$ 19 por mês para uma equipe criativa (3 pessoas). Você terá que entrar em contato diretamente com a Moqups para obter uma cotação para uma conta Enterprise.
Bônus: Se você pertence a uma ONG, escola ou organização sem fins lucrativos, a Moqups lhe dará uma Conta Premium sem nenhum custo.
WIREFRAME.CC
Disponível em todos os sistemas operacionais, pois é baseado na web.
Características principais: O Wireframe.CC é considerado uma das ferramentas de wireframe mais básicas disponíveis. Isso não é necessariamente uma coisa ruim, especialmente se você é um iniciante. Na verdade, devido ao seu design simples, os desenvolvedores podem achar mais fácil se concentrar em seu trabalho em mãos. Este programa baseado na web pode ser usado para janelas de navegador de wireframe, aplicativos móveis ou aplicativos de tablet.
Preço : Wireframe.CC oferece uma avaliação gratuita de 7 dias e uma conta básica gratuita. Depois disso, custará $ 16 por mês ou $ 144 por ano para uso único, $ 439 por mês ou $ 390 por ano para três usuários, ou $ 99 por mês ou $ 990 por ano para uma empresa (usuários ilimitados).
Bônus: A simplicidade deste programa torna difícil se distrair e procrastinar. Na verdade, os elementos da interface do usuário só aparecerão como opções quando necessário.
MOCKFLOW
Disponível como um aplicativo de desktop para Mac OS e Windows ou como um aplicativo da web.
Principais recursos: Este programa pode ser usado para projetar aplicativos da web, aplicativos móveis, interfaces e software, entre outras opções. Eles oferecem pacotes de componentes para a interface de sua escolha para facilitar seu trabalho. O MockFlow também oferece recursos de colaboração que permitem que todos os membros de sua equipe vejam as alterações em tempo real, além de permitir que você faça comentários anotados para que todos vejam. Você pode exportar seus arquivos em um grande número de formatos, incluindo DOC, PDF e HTML.
Preço : Uma conta básica, que inclui um usuário e um projeto máximo em cada ferramenta, é gratuita. Uma conta premium para um usuário custa US$ 14 por mês. Sua única desvantagem são as restrições de compartilhamento. Um pacote de equipe para três usuários custa US$ 29 por mês, mas você pode adicionar usuários a essa conta por uma taxa adicional. Uma conta corporativa não tem limite de usuários e custa US$ 160 por mês.
Bônus: Uma das vantagens de usar o MockFlow é o MockStore, que vende modelos de interface do usuário para todos os tipos de interfaces. Se não estiver inspirado, você pode procurar ideias na loja deles ou até comprar um modelo.
O QUE É UM PROTÓTIPO?
Um protótipo ainda não é o produto acabado, mas deve ser muito semelhante a ele em termos de aparência e funcionalidade geral. Esse protótipo de alta fidelidade do seu aplicativo ou site deve ser usado para testar seu produto e obter alguns comentários do usuário para ajudá-lo a melhorar quaisquer problemas que possam surgir.
Princípios básicos do protótipo
Um protótipo geralmente vem no final do processo de design e atua como uma ponte para o produto final. Nesta fase, os designers poderão mostrar seu trabalho e usá-lo para obter feedback útil. O protótipo não deve apenas incluir elementos de design, mas também demonstrar como o projeto funcionará quando estiver concluído.
Um protótipo pode não incluir todas as animações e interações do projeto final, mas deve ser capaz de demonstrar como o aplicativo fluirá. Permitindo que você teste seu desempenho.
Você pode fazer com que os usuários testem e forneçam feedback para melhorar a experiência do usuário. Você pode sentir que está usando um aplicativo real, mas um protótipo é apenas uma coleção de imagens conectadas umas às outras. Esses tipos de protótipos, protótipos interativos, são ideais porque você pode ver o design finalizado enquanto também interage com ele. Criar um bom protótipo interativo pode levar tempo e custar algum dinheiro, mas definitivamente vale a pena o investimento.
MELHORES FERRAMENTAS DE PROTOTIPAGEM
PROTO.IO
MARVELAPP
PROTT
AXURE RP
INVISÃO
PROTO.IO
Disponível para Mac OS e Windows.
Principais recursos: O slogan do Proto.io é “ Protótipos que parecem reais” e com razão. Seu produto permite que os designers criem protótipos de alta fidelidade que são o mais próximo possível da realidade. Ele pode ser usado para criar protótipos para aplicativos móveis, bem como aplicativos da web. Sua ferramenta de gravação de tela permite que sua equipe veja exatamente como seu público interage com o protótipo, e o modo offline permite que você interaja com o protótipo sem conexão com a internet, tudo isso sem precisar escrever uma única linha de código.
Preço : Você pode iniciar sua experiência no Proto.io com uma avaliação gratuita de 15 dias e, em seguida, ter a opção de obter uma conta gratuita, embora seja bastante limitada. As contas pagas variam de US$ 24 por mês (assinatura anual para um usuário que inclui 5 projetos) a US$ 160 por mês (assinatura anual, 10 usuários e inclui 30 projetos ativos).
Bônus: Algumas de suas ferramentas mais recentes incluem animações vetoriais que você mesmo pode importar ou escolher na biblioteca de animações vetoriais. Eles também introduziram recentemente uma biblioteca de componentes VR que permite integrar facilmente imagens 360.
MARVELAPP
Disponível como um aplicativo da web para Mac OS, iOS, Android e Windows.
Principais Características: MarvelApp é um ótima ferramenta de protótipo para designers com experiência mínima. Sua interface simples pode parecer bastante básica, mas isso é parte de seu apelo. Não só é um bom ponto de partida para novos designers, mas também oferece os resultados profissionais que os designers mais experientes procuram. A Marvel facilita o acompanhamento de mudanças, novos comentários e progresso graças à opção de importar sua equipe do Slack ou da Asana. Embora seja um aplicativo, você pode usá-lo para criar protótipos para web ou mobile.
Preço : MarvelApp está disponível gratuitamente para um único usuário e inclui dois projetos. Suas assinaturas pagas começam em $ 12 por mês para um único usuário, projetos ilimitados, protótipos protegidos por senha e a opção de baixar seus protótipos.
Bônus: o MarvelApp funciona em todos os dispositivos iOS, o que significa que você pode visualizar seu trabalho de maneira rápida e fácil no iPhone, iPad, Apple Watch e até na Apple TV.
PROTT
Disponível como um aplicativo iOS e Android.
Principais recursos: Trabalhar em um aplicativo móvel para criar um protótipo pode parecer um pouco limitante, mas Prott prova que não precisa ser. Na verdade, esta plataforma está repleta de recursos e ferramentas que podem ser usadas para criar maquetes de interface do usuário, protótipos de software de desktop, layouts de sites, wireframes interativos e protótipos. Se você estiver trabalhando com uma equipe extensa, o Prott facilita o compartilhamento de alterações com eles e a obtenção de feedback em tempo real.
Preço : Prott oferece uma avaliação gratuita que se transforma em uma assinatura gratuita após o término do período de 30 dias. Esta opção é para um único usuário e um único projeto. Seus planos pagos começam em US$ 19 por mês para um único usuário, três projetos, telas ilimitadas e revisores ilimitados.
Bônus: A plataforma Prott permite que você deixe comentários em qualquer lugar do projeto, ajudando você a se comunicar com sua equipe com muito mais facilidade e clareza. Os membros da sua equipe podem responder diretamente aos seus comentários, garantindo que nada se perca ao longo do caminho.
AXURE RP
Disponível para Mac e Windows.
Principais recursos: O Axure RP é considerado uma das ferramentas mais abrangentes para prototipagem , portanto, não é surpresa quantos usuários eles têm. Embora seja uma interface muito completa, é uma opção melhor para quem tem uma boa experiência. Outra razão pela qual é tão conhecido na indústria é porque existe há muito tempo e é a ferramenta em que a maioria dos designers aprendeu suas habilidades no início dos anos 2000. Vale a pena mencionar que você precisará de algum conhecimento de codificação para obter o que precisa dessa ferramenta.
Preço : Você pode começar com um teste gratuito de 30 dias. Depois disso, as assinaturas começam no nível Pro por US $ 29 por mês por usuário e chegam a US $ 99 por mês por usuário no nível Enterprise. As licenças perpétuas começam em US$ 49 por mês por usuário, mas não estão disponíveis no nível Enterprise.
Bônus: o Axure RP oferece aos designers mais opções quando comparado a outras ferramentas de prototipagem. Embora sua interface forneça mais funcionalidades, ela tem o preço de um sistema mais complicado. Uma vez dominado, o Axure RP lhe dará ótimos resultados.
INVISÃO
Disponível em todos os sistemas operacionais, pois é baseado na web.
Principais recursos: InVision é uma ferramenta bem conhecida e altamente conceituada na indústria que permite aos designers fazer protótipos para web, iOS e Android. Essa plataforma foi projetada com grandes equipes em mente, portanto, a colaboração é muito fácil. É muito fácil de usar, você só precisa carregar seus arquivos de design e adicionar elementos como animações, gestos e transições a eles. O resultado final é um protótipo confiável e de alta fidelidade.
Preço : InVision oferece um plano gratuito que inclui um protótipo ativo, depois os planos pagos começam em $ 15 por mês para três protótipos para um único usuário. Uma assinatura de equipe para cinco usuários e que inclui protótipos ilimitados custará US$ 100 por mês.
Bônus: a InVision lançou recentemente seu muito aguardado Studio, que afirma ser “a ferramenta de design de tela mais poderosa do mundo”. Esta nova ferramenta espera simplificar o processo entre o design e a criação de protótipos funcionais. A melhor parte é que é grátis!
CRIE MOCKUPS DO SEU PRODUTO
Depois que seu protótipo estiver pronto e você tiver voltado para corrigir quaisquer problemas encontrados durante o processo de teste, provavelmente estará mais perto de uma data de lançamento. Mas, antes de entrar no ar, certifique-se de ter as ferramentas certas para comercializar seu aplicativo ou site corretamente. O uso de maquetes que mostram a aparência do seu novo aplicativo ou site em dispositivos reais pode ajudar a atrair mais atenção para ele.
O que é uma maquete?
Discutimos anteriormente a diferença entre um wireframe e um mockup , mas o tipo de mockup que estamos falando aqui é algo completamente diferente. Esse tipo de maquete vem no final, quando seu aplicativo ou site estiver pronto para ser lançado. São basicamente fotos que você pode personalizar com imagens ou capturas de tela do seu produto final. Por exemplo, você pode fazer uma captura de tela do seu aplicativo e soltá-la na tela de um iPhone X.
Mockups são importantes porque podem ser usados para comercializar e promover seu aplicativo ou site. Eles também podem ser usados ao criar capturas de tela do seu aplicativo para a App Store ou Play Store. As maquetes do Placeit são fáceis de usar e vêm em uma grande variedade. Você pode encontrar todos os tipos de maquetes, incluindo maquetes de iPhone, maquetes de iPad, maquetes de MacBook, maquetes de navegador e maquetes de Android.
Mostre seu trabalho em uma maquete
Você provavelmente está animado para finalmente terminar o projeto em que trabalhou tanto por tanto tempo. Sabemos que você provavelmente não tem muito dinheiro sobrando para publicidade, e é aí que as maquetes da Placeit entram em cena. Eles são fáceis de usar, produzem ótimas imagens do seu produto e são muito acessíveis! Não importa o que você está promovendo, um aplicativo para iPhone, um aplicativo para iPad ou um novo site, o Placeit tem os modelos de gadgets mais recentes para você!
Se você gostou deste post, experimente esta lista de 10 ferramentas de otimização de loja de aplicativos ou dê uma olhada em 7 dicas para promover seu aplicativo.