Aqui está a situação: você é um desenvolvedor e tem todas as ferramentas necessárias para codificar um aplicativo incrível. Mas você está um pouco preso até onde o design está. Sem o domínio das ferramentas de design padrão da indústria como o Adobe Photoshop, como você projeta um aplicativo móvel que reflete seu gênio interior? Como você cria um aplicativo que é visualmente impressionante e fácil de navegar?

Não se preocupe, há boas notícias. Você pode não ter muita (ou nenhuma) experiência com UX/design, mas você não precisa necessariamente dele para criar um projeto final visualmente impressionante. Estas soluções irão ajudá-lo no processo de como desenhar um aplicativo móvel – cada um cumprindo esta promessa sem que você precise pagar um centavo.

Como desenhar um aplicativo móvel

Wireframing envolve a criação de um produto mínimo nu que representa essencialmente o esqueleto para o design do seu aplicativo. Se você fosse comparar seu aplicativo com uma inicialização, você poderia se referir a esta etapa de design como o produto mínimo viável (um conceito popularizado pelo livro, The Lean Startup).

Wireframing é uma etapa essencial ao passar pelo processo de como projetar um aplicativo móvel, pois permite que você pense na estrutura como separada dos elementos finais do design. Ele também possibilita que você transmita efetivamente seu conceito a qualquer parte relevante – colaboradores, designers ou investidores – sem que você precise pessoalmente de qualquer experiência em design para expressar com precisão essas idéias.

As seguintes ferramentas podem ser úteis durante este importante passo fundamental de como desenhar um aplicativo móvel.

Pena e Papel

Para aqueles que realmente não querem gastar um centavo, a boa e velha caneta e papel confiável é o caminho para esboçar suas idéias iniciais de aplicativo como um rascunho para o seu design. Enquanto alguns preferem ir diretamente para o Photoshop ou uma ferramenta de prototipagem, este método pode ser ideal para capturar idéias rapidamente à medida que elas acontecem. Como um bônus adicional, você não precisa de nenhum treinamento especial ou domínio de ferramentas para obter o máximo deste método de wireframing.

Android e/ou iOS sketch paper

Para aqueles que estão descobrindo como desenhar um aplicativo móvel, existe uma ferramenta especial de wireframing com você especificamente em mente. Pelo preço razoável de grátis, você pode fazer o download de papéis dot-grid que têm iPhones e iPads impressos neles. Esta é a solução de design ideal para desenvolvedores que precisam de um visual melhor do que caneta e papel podem fornecer. Este papel de esboço iOS também é ideal para storyboarding ou para mostrar os vários estados de como seu aplicativo ficará em uso.

Este papel de esboço iOS inclui linhas de grade para todos os elementos de UI padrão nos dispositivos iOS acima mencionados. Para a versão do Android deste papel de esboço, o papel tem 8 modelos de telefone impressos nele. No entanto, ao contrário do papel iOS (que tem uma grelha de pontos), este não tem linhas.

MockFlow

Se você está procurando uma ferramenta um pouco mais técnica para fazer o wireframing da sua aplicação móvel, considere algo como o MockFlow. O Mockflow é uma solução de wireframing online, com a flexibilidade para lidar com qualquer tipo de projeto de design – seja um aplicativo móvel ou web (ou algo completamente diferente). Há uma versão básica gratuita disponível que lhe permite trabalhar num projecto de cada vez, até 1 GB de armazenamento e dois membros da equipa. Você pode desbloquear funcionalidades adicionais (mais projetos, armazenamento e membros da equipe) ao atualizar para um plano pago, que começa em $14/mês.

WireframeApp é outra opção de wireframing baseada em web-app semelhante ao MockFlow. Todos os planos são pagos, mas você pode frequentemente encontrar um negócio acessível para toda a vida (abaixo de $49 total) assinando o boletim de email ou AppSumo.

Prototyping

Prototyping é o próximo passo para como projetar um aplicativo móvel uma vez terminado o wireframing. O objetivo desta próxima etapa é criar uma versão funcional do design, semelhante ao que você quer que o projeto final tenha.

As seguintes ferramentas se encaixam na conta de como desenhar um aplicativo móvel sem pagar um centavo, já que todas são 100% grátis para usar!

Marvel

Marvel é um aplicativo web que também está disponível para iOS e Android. Além da capacidade de projetar em qualquer dispositivo com o qual você esteja mais confortável, esta ferramenta facilita a transformação dos seus esboços em protótipos viáveis. Além da capacidade de adicionar elementos básicos de design, você também pode unir os designs para criar um fluxo. Marvel permite criar hotspots interativos e transições realistas, e você pode escolher ações como flutuar, clicar, deslizar, beliscar e muito mais. Com toneladas de integrações de terceiros, a Marvel joga bem com muitas das outras ferramentas que você já usa, e os colaboradores da sua equipe.

InVision

InVision é similar à Marvel, pois é uma ferramenta gratuita de protótipos para web e celular. É uma ferramenta de prototipagem perfeita para equipes, graças à funcionalidade que permite comentários simples e colaboração. O que a diferencia de muitos tipos de ferramentas semelhantes é a sua funcionalidade de controlo de versões, que lhe permite reverter as suas alterações para uma versão anterior se necessário.

InVision é utilizada por empresas inovadoras como Adobe, Zappos, AT&T, Dell e Sony, bem como por empresas de crescimento rápido como Prezi, Soundcloud e Evernote. Usar o InVision não lhe garante o sucesso deles, mas você não pode negar os benefícios da associação!

Axure

Para completar suas opções de como projetar um aplicativo móvel sem pagar um centavo, aqui está uma opção que é paga se usada a longo prazo, mas completamente grátis para usar durante um teste de 30 dias. O Axure permite a prototipagem fácil de aplicativos graças aos designs altamente funcionais (semelhantes às transições na Marvel). Como as outras opções deste artigo, esta ferramenta fornece funcionalidade para uma fácil colaboração entre equipes.

Proto.io

Proto.io fatura em si como uma ferramenta que pode ajudá-lo a criar “Protótipos que parecem reais”. Para um desenvolvedor de aplicativos móveis que procura criar um protótipo realista e funcional, isso pode ser música para os seus ouvidos. Eles fornecem aos usuários várias bibliotecas de IU, integrações de terceiros (com parceiros como Dropbox), e até mesmo testes de usuários para garantir que a experiência do usuário seja perfeita no lançamento. Um teste gratuito lhe permite 15 dias de acesso com acesso vitalício a recursos limitados, ou a opção de atualizar para uma conta totalmente funcional com vários projetos e recursos, a partir de $24/mês.

Se você ainda não tiver encontrado a ferramenta perfeita de wireframing ou protótipo, o Developer Drive compartilha algumas opções genéricas adicionais a serem consideradas.

Obviamente, se esta é a extensão do seu interesse e capacidade quando se trata de design de aplicativos, você terá que pagar alguém para levar a sua wireframing ou protótipo de bare-bones para o próximo nível. Mas entrar com um plano básico pode ser uma boa maneira de poupar tempo e dinheiro adiantado. Quanto melhor você for capaz de comunicar sua visão a um designer, mais fácil será torná-la realidade, e menos dinheiro você vai gastar em versões de design que não se alinham com sua visão.

Design Visual

Se você estiver procurando orientação sobre como projetar um aplicativo para iPhone, ou como projetar um aplicativo para Android, essas ferramentas gratuitas podem ajudá-lo a envolver sua cabeça no design perfeito para qualquer sistema operacional móvel.

Por vezes, um pouco de inspiração pode ajudar a remover um bloco criativo, e se perder em um tutorial de design pode ajudá-lo a descobrir como terminar o projeto completamente por conta própria.

Aplicações Saudáveis

Aplicações Saudáveis é abare-boness website/ galeria de aplicativos que se concentra especificamente em mostrar os belos designs do iOS 7. Não há texto ou outras distrações, apenas desenhos apresentados sem comentários.

Embora você esteja pensando especificamente em iOS, você também pode querer ter tempo para rever as rígidas diretrizes de submissão da Apple App Store. Como eles têm uma atitude “sem exceções”, manter essas diretrizes em mente enquanto determina como criar um aplicativo móvel pode ajudá-lo a acertar as coisas da primeira vez, economizando tempo e dinheiro a longo prazo.

Android Patterns

Se você estiver criando exclusivamente para um dispositivo Android, ou estiver criando duas versões do seu aplicativo móvel (com uma para a Apple App Store), você vai querer se familiarizar com as entradas e saídas de design para um dispositivo Android. Pode surpreendê-lo saber que isso é decididamente diferente (e significativamente menos rígido) do que os padrões de design de aplicativos iOS. Pode ser útil ler os materiais de submissão da loja Google Play, como esta lista de verificação de lançamento.

Você também pode usar o Android Patterns como seu curso de crash no design do Android. Este site é uma biblioteca de padrões de interação Android que você pode usar ao criar o seu design. Os padrões de interação são organizados por tipo de aplicativo e incluem ações como navegação, notificações e interações de tela. Embora estes padrões possam ser úteis para um novo designer de aplicativos móveis, eles devem ser tomados como um guia, mas não regras absolutas.

Icons

Adicionar alguma dimensão aos seus elementos visuais pode ajudar o seu protótipo a olhar o mais próximo possível da saída final. Icons8 fornece uma biblioteca de mais de 53.800 ícones que são completamente livres para usar. Além deste gigantesco recurso gratuito, você também deve verificar estas ferramentas de design de interface de usuário para diferentes maneiras de pesquisar e usar ícones quando você estiver determinando como projetar um aplicativo móvel.

Adobe Kuler

Adobe tem muitos recursos para aqueles que procuram projetar um aplicativo móvel, desde um nível iniciante até um nível avançado de design, mas um dos mais simples e úteis é a sua ferramenta de esquema de cores. A Kuler ajuda tanto designers como não designers a escolher esquemas de cores baseados na roda de cores, e diferentes regras de cores: monocromático, complementar, tríade, etc. Você pode criar um esquema de cores a partir de uma imagem, ou navegar pelas submissões de esquemas de cores de outros para inspiração.

Mobile Design Inspiration

De acordo com CSSWinner, Mobile Design Inspiration é a galeria de inspiração mais densa para design de aplicativos móveis, com inspirações de design de aplicativos disponíveis e organizadas especificamente pelo iPhone, Android, Apple Watch e iPad. Novos designs são adicionados semanalmente, e sua seção “Campos Criativos” pode fornecer inspiração adicional se você também estiver trabalhando no design de um logo aplicativo.

Tuts+

Se você realmente quer saber como projetar um aplicativo móvel sem pagar um centavo, você deve considerar investir seu tempo na aquisição de novas habilidades. Aprender a desenhar o seu próprio aplicativo em vez de contratar alguém para fazê-lo pode poupar-lhe dinheiro E também ganhar habilidades valiosas que você pode rentabilizar mais tarde.

Existem vários sites que oferecem excelentes cursos on-line de design (Treehouse é um recurso pago incrível), mas Tuts+ oferece muito conhecimento profundo, completamente de graça, sem sacrificar a qualidade. Além de artigos úteis, eles também possuem recursos adicionais de design, como ebooks.

Como desenhar um aplicativo móvel sem pagar um centavo

Você realmente não precisa contratar um designer para desenhar seu aplicativo móvel, especialmente nos estágios iniciais de wireframing e prototipagem. Leve algum tempo para colocar seu aplicativo onde você quer que ele esteja em um nível básico, então mesmo que você acabe contratando um designer, o projeto não será tão profundo (e caro).

Com essas ferramentas de design de aplicativo móvel, você pode descobrir como projetar um aplicativo móvel por conta própria, e pegar algumas novas habilidades ao longo do caminho. Imagine as oportunidades de contratação para um indivíduo que pode provar sua habilidade tanto no design quanto no desenvolvimento de um aplicativo!

Que dicas ou ferramentas você adicionaria a esta lista sobre como projetar um aplicativo móvel sem pagar um centavo? Nós adoraríamos ouvir seus pensamentos! Tweet suas idéias em @icons8, e nós vamos compartilhar nossos favoritos.

Sobre o Autor
Maddy Osman adora WordPress e escrever. Quando ela não está ocupada ajudando a organizar o WordCamp Denver, ela compartilha suas melhores dicas de marketing/SEO no seu blog, www.the-blogsmith.com. Acompanhe os seus últimos artigos na web no Twitter: MaddyOsman.