13/04/2018 App design: como fazer um protótipo de app

RECEBER ORÇAMENTO…
(https://pt.yeeply.com/)

Página inicial (https://pt.yeeply.com/blog/) » Entrevistas (https://pt.yeeply.com/blog/entrevistas/) » App design:

como fazer um protótipo de app

Evelyn Neka em Entrevistas (https://pt.yeeply.com/blog/entrevistas/)

   8 dezembro, 2015

App design: como fazer um protótipo de app

Dando continuidade ao ultimo artigo sobre a importância do protótipo no
desenvolvimento de app móveis (https://pt.yeeply.com/blog/a-importancia-do-
prototipo-no-desenvolvimento-de-app-moveis/), sabemos que de nir um projeto de
app móvel é muito importante para que os desenvolvedores possam fazer um
orçamento e enviar suas propostas na plataforma Yeeply. Mas por outro lado,
também é muito importante para os desenvolvedores saberem como vão
apresentar uma boa proposta ao cliente e como apresentar o app design do futura
app.

Uma das técnicas mais simples para pré-visualizar como será o aplicativo por
desenvolver, em questão de app design e sem ter que começar a programar é fazer
um protótipo do app. Fazer um protótipo do app vai poupar muito o seu tempo e
trabalho e também permitirá ver facilmente como o aplicativo vai car   e se
necessário, otimizar o design, aparência e usabilidade do app. Esses ramos são
muito importantes no desenvolvimento do aplicativo como foi falado no ultimo
artigo.

Desta forma, no caso em que o cliente quiser fazer alterações no design, será muito
mais fácil de fazê-los com as ferramenta de prototipagem de apps. Podemos
mesmo fazer diversos protótipos para o cliente escolher o que melhor se encaixa
com o que deseja.

Há uma grande variedade de ferramentas para fazer protótipos que estão

disponíveis no mercado. Mas neste artigo vamos fazer um resumo daqueles que
consideramos ser muito úteis para a tarefa de de nir um bom app design e
construir um protótipo para o cliente.

Ferramentas de App Design para fazer um protótipo do app

1. Prototyper (http://www.justinmind.com/) de Justinmind

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 1/13
13/04/2018 App design: como fazer um protótipo de app

RECEBER ORÇAMENTO…
(https://pt.yeeply.com/)

É uma das mais poderosas ferramentas para criar protótipos interativos sem
escrever códigos. Tem uma versão grátis e paga e está disponível para Mac e
Windows. Nele, podemos ver como será um webapp,  mas também para protótipo
apps iOS ou Android.

É uma ferramenta muito fácil de usar e intuitiva. Importando imagens feitas com
Photoshop ou Fireworks, em seguida pode ser feito um protótipo válido. Basta ir
adicionando interatividade para as imagens já importadas.

Para um protótipo simples, se você é um freelance ou simplesmente não quer

desenvolver, usando a versão gratuita será mais que su ciente. Mas se você quer
aperfeiçoar e causar boa impressão com seu protótipo não hesite em entrar no Pro
Prototyper.

2. Concept Inbox (http://conceptinbox.com/)

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 2/13
13/04/2018 App design: como fazer um protótipo de app

RECEBER ORÇAMENTO…
(https://pt.yeeply.com/)

É uma ferramenta para fazer protótipos de aplicativo que embora não tão antiga no
mercado como a Prototyper, é uma ótima ferramenta para a equipe de
desenvolvimento, ou mesmo para um único desenvolvedor. Dizemos-lhe como
funciona exatamente e é certamente uma escolha muito boa para fazer um
protótipo.

Permite uxo de comunicação rápido e fácil entre as partes. É uma ferramenta

tudo-em-um de colaboração visual entre designers, equipe e clientes. Além de
testar o app depois.

3. Fluid UI (https://www. uidui.com/)

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 3/13
13/04/2018 App design: como fazer um protótipo de app

A ferramenta Fluid UI é umas das que não é muito mencionada embora sendo
RECEBER ORÇAMENTO…
também útil para fazer um protótipo de app. O mais importante, á saber que é uma
(https://pt.yeeply.com/)
ferramenta online que qualquer um pode usar e pode projetar um protótipo para
dispositivos móveis de uma forma muito simples e intuitiva. A ferramenta permite
ao usuário compreender facilmente o ambiente e dá muitas opções para criar o app
design (https://pt.yeeply.com/blog/app-design-o-que-e-ux-ui-e-ixd/). Embora seja
bastante simples, também em seu editor você pode usar wireframes diferentes
para diferentes plataformas, Android ou qualquer versão do IOS.

A versão gratuita permite que você crie até dez telas para seu protótipo, o que pode
ser pouco, se você tiver um aplicativo complexo, embora para um protótipo simples,
ele funciona bem. Para ir mais longe, temos que contratar um dos planos mensais,
disponíveis a partir de US $ 12 por mês. Outra das suas qualidades é que você pode
escanear o código QR  para seu protótipo e testá-lo em dispositivos Android e iOS.

4. Antetype (http://www.antetype.com/)

Neste caso, a ferramenta de protótipos de apps Antetype é para quem esta

procurando um nível superior de design. Com uma qualidade ligeiramente superior
ao Fluid. É necessário sublinhar que só podemos experimentar esta ferramenta
grátis por 30 dias. A partir daí, passa a ser uma ferramenta paga.

Embora as comparações são odiosas, ela tem um estilo parecido com o Keynote.
Muito simples e intuitiva, você pode encontrar esta ferramenta exclusivamente para
Mac, e você pode comprá-lo no site da ferramenta ou na Apple Store. Enquanto o
preço pode parecer excessivo, é €149, vale a pena lembrar que não só permite criar
apps mas também você pode projetar todos os tipos de Webs. Uma completíssima

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 4/13
13/04/2018 App design: como fazer um protótipo de app

ferramenta que, se você você tiver como pagar, você deve tentar. A possibilidade
RECEBER ORÇAMENTO…
para baixar extras se torna uma opção muito interessante para desenvolvedores de
(https://pt.yeeply.com/)
app iOS, Android ou Windows Phone, mas também para web.

5. NinjaMock (https://ninjamock.com/)

Embora possa parecer que não, NinjaMock é uma ferramenta que tem bastante
fama para criar protótipos para apps. É uma oferta de ferramenta on-line em que os
itens que incorporamos oferecem um acabamento de desenho à mão livre. Em
termos de design, este não é o mais adequado criar qualquer tipo de aplicativo,
especialmente se levarmos em conta as mais recentes tendências e o gosto dos
desenvolvedores de apps para o “ at design”.

Mas a principal vantagem do NinjaMock é que é totalmente gratuito. Embora um

dos principais problemas que podemos encontrar, por exemplo, que a interação do
seu protótipo não se estende para além de ligações entre telas e telas. Como uma
ferramenta para realizar um primeiro esboço, um rascunho, NinjaMock é mais que
su ciente.

6. Invision (http://www.invisionapp.com/)

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 5/13
13/04/2018 App design: como fazer um protótipo de app

RECEBER ORÇAMENTO…
(https://pt.yeeply.com/)

Esta é sem dúvida uma das mais poderosas ferramentas que você pode encontrar
de graça. Além de permitir protótipos completos, Invision ultrapassa a criação de
design simples de NinjaMock e muitos outros. A maior vantagem que podemos
encontrar na Invision é que várias pessoas podem trabalhar em equipe em um
mesmo protótipo.

Em um plano, gratuito só permite realizar um único protótipo ao mesmo tempo,

embora as versões de pagamento podemos ter 5, 10, 15 e até 100 projetos ativos e
para uma equipe de mais pessoas. Os preços são relativamente acessíveis, com um
custo de US $ 15 por mês até $ 100. Preços mais acessível do que, por exemplo, o
Antetype. Por exemplo é altamente recomendável para pequenas agências e
equipes de desenvolvimento formado por poucos membros e trabalhando em
alguns projetos ao mesmo tempo. É um ambiente ideal para a colaboração quando
fazemos um protótipo do app. Há também a versão para Mac, com o qual você
pode sincronizar os arquivos que você precisa.

Lembre-se que as opções são muito mais amplas e existem muitas outras
ferramentas para criação de protótipos, que você pode descobrir. No entanto, antes
de começar a programação, (https://pt.yeeply.com/blog/desenvolvimento-de-apps-
bases-tecnicas-para-criar-um-app/) um protótipo é sempre uma boa opção porque

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 6/13
13/04/2018 App design: como fazer um protótipo de app

ajuda a economizar tempo e mostra ao cliente como será o app que você vai
RECEBER ORÇAMENTO…
desenvolver. Uma maneira de ter uma ideia do resultado nal e com possibilidade
(https://pt.yeeply.com/)
de fazer diferentes alterações, antes de começar com a maior parte do trabalho de
desenvolvimento do app.

 E você, qual prefere? Deixe no comentário!

MENU
(https://pt.yeeply.com/publicar-projeto)

Segue-me:

Facebook: Yeeply Brasil (https://www.facebook.com/Yeeply.Brasil/?ref=bookmarks)

Twitter: @Yeeply_pt (https://twitter.com/Yeeply_pt)

a Facebook (https://www.facebook.com/sharer/sharer.php?
u=https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/&t=App
design: como fazer um protótipo de app&redirect_uri=https://pt.yeeply.com/blog?
sharing-thankyou=yes)
d Twitter
f Google+
(https://plus.google.com/share?url=https://pt.yeeply.com/blog/app-
design-como-fazer-um-prototipo-de-app/)
k LinkedIn
(http://www.linkedin.com/shareArticle?
mini=true&ro=true&trk=EasySocialShareButtons&title=App design: como fazer um
protótipo de app&url=https://pt.yeeply.com/blog/app-design-como-fazer-um-
prototipo-de-app/)

ESCRITO POR

Evelyn Neka
Desenvolvedora de negócio internacional
Economista por vocação, amante de tecnologia e viciada em
informações.
Responsável pelos negócios da Yeeply para mercado brasileiro e português.

Contato: +55 11 4950 5980

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 7/13
13/04/2018 App design: como fazer um protótipo de app

Siga-me no: Google Plus (https://plus.google.com/u/0/105297818794735154840) e Twitter

RECEBER ORÇAMENTO…
(https://twitter.com/yeeply_pt). (https://pt.yeeply.com/)

TAGS

criar aplicativos (https://pt.yeeply.com/blog/tag/criar-aplicativos/)

desenvolver aplicativos (https://pt.yeeply.com/blog/tag/desenvolver-aplicativos/)

plataforma de programação (https://pt.yeeply.com/blog/tag/plataforma-de-programacao/)

COMENTÁRIOS

Comentários estão desabilitados para este post

HISTÓRIAS RELACIONADAS

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 8/13
13/04/2018 App design: como fazer um protótipo de app

Artigos semelhantes RECEBER ORÇAMENTO…

(https://pt.yeeply.com/)

(https://pt.yeeply.com/blog/subcontratar-
(https://pt.yeeply.com/blog/programacao-
(https://pt.yeeply.com/blog/seguranca-
(https://pt.yeeply.com/blog/quanto-
(https://pt.yeeply.com/blog/opcoes-
aplicativo-para- de-aplicativos- mobile-no- custa-criar-um- de-um-
smartphone/) diversi cando- desenvolvimento- app-como- desenvolvedor-
Subcontratar o se/) de-apps/) pokemon-go/) android/)
desenvolvimento Programação de Segurança Mobile Quanto custa Quais são as
de um aplicativo aplicativos: Ser no criar um app opções de um
para smartphone especialista no desenvolvimento como Pokemon desenvolvedor
(https://pt.yeeply.com/blog/subcontratar-
desenvolvimento de apps: Go? Android?
aplicativo-para- é su ciente? Permissões de (https://pt.yeeply.com/blog/quanto-
(https://pt.yeeply.com/blog/opcoes-
smartphone/) (https://pt.yeeply.com/blog/programacao-
acesso custa-criar-um- de-um-
de-aplicativos- (https://pt.yeeply.com/blog/seguranca-
app-como- desenvolvedor-
diversi cando- mobile-no- pokemon-go/) android/)
se/) desenvolvimento-
de-apps/)

(https://pt.yeeply.com/blog/dicas-
(https://pt.yeeply.com/blog/tendencias-
(https://pt.yeeply.com/blog/10-
(https://pt.yeeply.com/blog/dicas-
(https://pt.yeeply.com/blog/boas-
desenvolvedor- de-app-design- formas-de- programador- e-mas-praticas-
android/) para-2016/) desenvolver- freelancer/) de-app-store-
6 Dicas para um Tendencias de apps-para- 6 Dicas para optimization-
desenvolvedor app design para android-sem- qualquer aso/)
Android 2016 java/) programador Boas e más
principiante (https://pt.yeeply.com/blog/tendencias-
10 formas de freelancer práticas de App
(https://pt.yeeply.com/blog/dicas-
de-app-design- desenvolver apps (https://pt.yeeply.com/blog/dicas-
Store
desenvolvedor- para-2016/) para Android programador- Optimization
android/) sem Java freelancer/) (ASO)
(https://pt.yeeply.com/blog/10- (https://pt.yeeply.com/blog/boas-
formas-de- e-mas-praticas-
desenvolver- de-app-store-
apps-para- optimization-
android-sem- aso/)
java/)

POPULAR POSTS

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 9/13
13/04/2018 App design: como fazer um protótipo de app

App design: como fazer um protótipo de app

7.663 views RECEBER ORÇAMENTO…
(https://pt.yeeply.com/)
Como escrever um bom projeto de aplicativo móvel
(https://pt.yeeply.com/blog/como-escrever-um-bom-projeto-de-aplicativo-movel/)
5.874 views
10 formas de desenvolver apps para Android sem Java
(https://pt.yeeply.com/blog/10-formas-de-desenvolver-apps-para-android-sem-java/)
4.075 views
Desenvolvimento de aplicativos: Qual é a vantagem econômica dos apps?
(https://pt.yeeply.com/blog/desenvolvimento-de-aplicativos-qual-e-a-vantagem-
economica-dos-apps/)
3.237 views
Dicas e ferramentas para criar aplicativos de realidade aumentada
(https://pt.yeeply.com/blog/dicas-e-ferramentas-para-criar-aplicativos-de-realidade-
aumentada/)
3.211 views
Desenvolver app com HTML5 (https://pt.yeeply.com/blog/desenvolver-app-com-
html5/)
2.167 views
6 Diferentes tipos de desenvolvimento de aplicativos web
(https://pt.yeeply.com/blog/tipos-desenvolvimento-de-aplicativos-web/)
2.023 views
Desenvolver app Android: Como registrar no Google Play
(https://pt.yeeply.com/blog/desenvolver-app-android-como-registrar-no-google-play/)
1.746 views
Estou procurando por desenvolvedor de aplicativos móveis: Onde e como posso
encontrá-lo? (https://pt.yeeply.com/blog/estou-procurando-por-desenvolvedor-de-
aplicativos-moveis-onde-e-como-posso-encontra-lo/)
1.424 views
Sabe quanto custa o desenvolvimento de app? (https://pt.yeeply.com/blog/quanto-
custa-o-desenvolvimento-de-app/)
1.321 views

CATEGORIAS

Desenvolvimento de aplicativos móveis 

Entrevistas 

Marketing mobile 

Trabalhe como desenvolvedor freelance 

TAGS

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 10/13
13/04/2018 App design: como fazer um protótipo de app

Android (https://pt.yeeply.com/blog/tag/android/) RECEBER ORÇAMENTO…

(https://pt.yeeply.com/)
aplicativo móvel (https://pt.yeeply.com/blog/tag/aplicativo-movel/)

Aplicativos Android (https://pt.yeeply.com/blog/tag/aplicativos-android/)

Aplicativos iOS (https://pt.yeeply.com/blog/tag/aplicativos-ios/)

Aplicativos móveis (https://pt.yeeply.com/blog/tag/aplicativos-moveis/)

aplicativos web (https://pt.yeeply.com/blog/tag/aplicativos-web/)

app Android (https://pt.yeeply.com/blog/tag/app-android/)

apps (https://pt.yeeply.com/blog/tag/apps/) ASO (https://pt.yeeply.com/blog/tag/aso/)

baixar aplicativos (https://pt.yeeply.com/blog/tag/baixar-aplicativos/)

criar aplicativos (https://pt.yeeply.com/blog/tag/criar-aplicativos/)

Criar aplicativos android (https://pt.yeeply.com/blog/tag/criar-aplicativos-android/)

desenvolvedor de aplicativos (https://pt.yeeply.com/blog/tag/desenvolvedor-de-

aplicativos/)

desenvolvedores de aplicativos (https://pt.yeeply.com/blog/tag/desenvolvedores-de-

aplicativos/)

desenvolver aplicativos (https://pt.yeeply.com/blog/tag/desenvolver-aplicativos/)

Desenvolvimento de aplicativos (https://pt.yeeply.com/blog/tag/desenvolvimento-de-

aplicativos/)

desenvolvimento de app (https://pt.yeeply.com/blog/tag/desenvolvimento-de-app-

para-celular/)

desenvolvimento de jogos (https://pt.yeeply.com/blog/tag/desenvolvimento-de-jogos/)

desenvolvimento mobile (https://pt.yeeply.com/blog/tag/desenvolvimento-mobile/)

download de aplicativos (https://pt.yeeply.com/blog/tag/download-de-aplicativos/)

Escrow (https://pt.yeeply.com/blog/tag/escrow/)

Estratégia de Marketing (https://pt.yeeply.com/blog/tag/estrategia-de-marketing/)

geolocalização (https://pt.yeeply.com/blog/tag/geolocalizacao/)

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 11/13
13/04/2018 App design: como fazer um protótipo de app

Google (https://pt.yeeply.com/blog/tag/google/) GPS (https://pt.yeeply.com/blog/tag/gps/)

RECEBER ORÇAMENTO…
(https://pt.yeeply.com/)
HTML5 (https://pt.yeeply.com/blog/tag/html5/) iOS (https://pt.yeeply.com/blog/tag/ios/)

Jogos e aplicativos (https://pt.yeeply.com/blog/tag/jogos-e-aplicativos/)

jogos para celular (https://pt.yeeply.com/blog/tag/jogos-para-celular/)

Linguagem de programação (https://pt.yeeply.com/blog/tag/linguagem-de-programacao/)

mercado de aplicativos (https://pt.yeeply.com/blog/tag/mercado-de-aplicativos/)

mercado de apps (https://pt.yeeply.com/blog/tag/mercado-de-apps/)

mercado mobile (https://pt.yeeply.com/blog/tag/mercado-mobile/)

mobile design (https://pt.yeeply.com/blog/tag/mobile-design/)

Mobile Marketing (https://pt.yeeply.com/blog/tag/estrategia-mobile-marketing/)

plataforma de programação (https://pt.yeeply.com/blog/tag/plataforma-de-programacao/)

programador freelancer (https://pt.yeeply.com/blog/tag/programador-freelancer/)

projeto de aplicativo (https://pt.yeeply.com/blog/tag/projeto-de-aplicativo/)

publicidade digital (https://pt.yeeply.com/blog/tag/publicidade-digital/)

publicidade mobile (https://pt.yeeply.com/blog/tag/publicidade-mobile/)

Realidade Aumentada (https://pt.yeeply.com/blog/tag/realidade-aumentada/)

Tablets (https://pt.yeeply.com/blog/tag/tablets/) Unity 3D (https://pt.yeeply.com/blog/tag/unity-3d/)

Webmovel (https://pt.yeeply.com/blog/tag/webmovel/)

Website (https://pt.yeeply.com/blog/tag/website/)

(https://pt.yeeply.com)

Get your project done!

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 12/13
13/04/2018 App design: como fazer um protótipo de app

(https://www.linkedin.com/company/yeeply)
(https://twitter.com/Yeeply_PT)
(https://www.facebook.com/YeeplyMobile/)
(https://plus.google.com/+Yeeply)
RECEBER ORÇAMENTO…
(https://pt.yeeply.com/)

Plataforma
Preços (https://pt.yeeply.com/precos)
Diferença (https://pt.yeeply.com/diferenciacao)
Inteligência (https://pt.yeeply.com/inteligencia)
Talento (https://pt.yeeply.com/talento)
Blog (https://pt.yeeply.com/blog/)

Sobre nós
Clientes (https://pt.yeeply.com/clientes)
Quem somos (https://pt.yeeply.com/quem-somos)
Trabalhe Conosco (https://pt.yeeply.com/emprego)
FAQ (https://pt.yeeply.com/faq)
Contato (https://pt.yeeply.com/quem-somos#contacto)

Termos gerais (https://pt.yeeply.com/termos-e-condicoes)

Política privada (https://pt.yeeply.com/politica-de-privacidade) © Yeeply 2018

https://pt.yeeply.com/blog/app-design-como-fazer-um-prototipo-de-app/ 13/13