Como Criar Protótipos Android

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes! Você receberá um email de confirmação. Somente depois de confirma-lo é que eu poderei lhe enviar os conteúdos semanais exclusivos. Os artigos em PDF são entregues somente para os inscritos na lista.

Email inválido.
Blog /Android /Como Criar Protótipos Android

Como Criar Protótipos Android

Vinícius Thiengo
(25131) (9)
Go-ahead
"O método consciente de tentativa e erro é mais bem-sucedido que o planejamento de um gênio isolado."
Peter Skillman
Prototipagem Android
Capa do curso Prototipagem Profissional de Aplicativos
TítuloAndroid: Prototipagem Profissional de Aplicativos
CategoriasAndroid, Design, Protótipo
AutorVinícius Thiengo
Vídeo aulas186
Tempo15 horas
ExercíciosSim
CertificadoSim
Acessar Curso
Quer aprender a programar para Android? Acesse abaixo o curso gratuito no Blog.
Lendo
TítuloManual de DevOps: como obter agilidade, confiabilidade e segurança em organizações tecnológicas
CategoriaEngenharia de Software
Autor(es)Gene Kim, Jez Humble, John Willis, Patrick Debois
EditoraAlta Books
Edição1ª
Ano2018
Páginas464
Conteúdo Exclusivo
Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba gratuitamente conteúdos Android sem precedentes!
Email inválido

Tudo bem?

Neste artigo trabalharemos a criação de protótipos Android utilizando uma ferramenta profissional que além de ser bem completa tem também versão gratuita.

Estaremos, especificamente, criando o protótipo do aplicativo de Blog da série Android WordPress que iniciamos com o artigo Android WordPress, Apresentação do Projeto:

Protótipo estático app Android Arte em Dois

Com o software que utilizaremos será possível criar um projeto com protótipo navegável e um outro não navegável.

Apesar da apresentação da ferramenta no conteúdo em texto do artigo, é importante que você veja o vídeo para o aprender como trabalhar com o site Marvel para a construção de protótipos.

Antes de prosseguir, não esqueça de se inscrever 📩 na lista de e-mails do Blog para ter acesso aos conteúdos exclusivos liberados aqui.

A seguir os tópicos que estaremos abordando:

Marvel para a construção de protótipos

Sim, Marvel, este é o nome do aplicativo Web que estaremos utilizando para a construção do protótipo do projeto Android.

Lembra a empresa de desenhos de super-heróis, mas na verdade não tem a mínima relação:

Home page MarvelApp

A empresa está sediada em Londres e, a princípio, o software de criação de protótipos foi feito para sistemas Apple (iPhone, iPad, iWatch) e sistemas Web e somente por agora é que se iniciou também os trabalhos com o Android.

De qualquer forma, em relação ao Android, a ferramenta não deixa nada a desejar, ainda mais sabendo que nós usuários podemos carregar nossas próprias imagens para facilitar ainda mais a construção dos protótipos.

Algo interessante a se notar, não somente sobre a Marvel, mas também sobre várias outras plataformas de criação de protótipos, é que nós não precisamos ser designers ou programadores para conseguir bons resultados, isso devido a simplicidade da interface dessas ferramentas.

Com o Marvel, caso você esteja com uma conta paga, é possível gerar um APK para então navegar pelo protótipo como se fosse um aplicativo. De qualquer forma, isso é apenas algo extra, que não precisaremos aqui no projeto de Blog.

Para cadastro no site, entre no link a seguir: https://marvelapp.com/.

A importância dos protótipos para o desenvolvimento de aplicativos

Protótipo vs Diagramas de classe

Primeiro é importante saber que protótipos não substituem os conhecidos diagramas e documento de análise e de documento de projeto de sistemas.

Mas é prudente dizer que esse primeiro também não é dependente dos dois últimos, análise e projeto, e que é possível ter somente ele, o protótipo, para poder prosseguir, com segurança, a construção de seu aplicativo Android.

Com o protótipo definido, sendo ele navegável ou não, nós conseguimos aliviar em muito a carga de programação, isso, pois com as telas em mãos o programador não terá dúvidas sobre o que fazer. As telas, mesmo que de forma implícita em alguns pontos, já dizem ao desenvolvedor:

  • Quais as classes, inicialmente, estarão no domínio do problema;
  • Como será o fluxo de navegação dentro do aplicativo;
  • Como será o design;
  • Como serão as regras de negócio (terá de ter login ou não para acessar o ponto XYZ do app?...).

Hoje, como desenvolvedor Android, caso eu tenha de escolher entre diagramas e protótipo de telas, seguramente escolheria o protótipo.

Mas é aquilo, eu programando sozinho ou com mais um ou dois developers.

Com uma equipe de desenvolvedores pode ser que sim, os diagramas de projeto e análise, incluindo a definição de requisitos, sejam uma melhor escolha.

A importância dos protótipos para o recrutamento de profissionais e até mesmo de investidores

Importância dos protótipos para o recrutamento de profissionais

Frequentemente chegam até mim pessoas com ideias de aplicativos Android e provavelmente, caso você seja ao menos um desenvolvedor Android, isso deve acontecer contigo também.

Neste caso, o que mais faço é indicar outros profissionais Android, pois hoje trabalho somente em meus projetos. De qualquer forma, depois de ter dado as indicações, quase sempre, ou sempre, nenhum entra em algum dos projetos / ideias.

Isso também, pois as ideias ainda estão no campo de "somente texto" ou somente "um call no Skype".

Com softwares de protótipo como o Marvel é possível, mesmo sem ser um designer ou um programador, construir ao menos as telas não navegáveis.

Eu mesmo já participei de uma startup onde fui abordado por um dos responsáveis pelo projeto, que não era nem designer e nem programador, e aceitei participar.

Fiquei aproximadamente oito meses na construção do software, responsável pela parte Web e Android, ambos finalizados.

E hoje, com mais experiência, digo seguramente que um dos principais motivos de eu ter entrado no projeto foi a abordagem correta, já com algumas telas do aplicativo em slides, deixando ainda mais tangível a ideia do software.

Na época as telas foram desenvolvidas por um designer e não em um software como o Marvel, este último que facilita ainda mais.

Então, em minha opinião e experiência, caso você tenha a ideia, mas não tenha a habilidade para desenvolve-la ou até mesmo o dinheiro para a contração de profissionais, o que precisa, ao menos, é de um protótipo muito bem feito para o recrutamento de sócios desenvolvedores ou até mesmo de investidores anjo.

Funcionalidades Marvel software

Com a versão gratuita do Marvel, o que não podemos fazer é trabalhar com mais de um usuário nos mesmos projetos, digo, outros usuários com poder de edição nos protótipos, e também não é possível realizar o download dos protótipos para apresenta-los também offline.

Ou seja, não há limitação na principal parte do software, na construção dos protótipos. Mesmo na versão gratuita o Design tool têm todas as funcionalidades liberadas. Com isso é possível:

  • Criar protótipos não navegáveis, sem limite de telas;
  • Criar protótipos navegáveis, também sem limite de telas;
  • Fornecer nossas próprias imagens para a construção de protótipos navegáveis ou não;
  • Trabalho online de apresentação de protótipo;
  • Embed code para colocarmos os protótipos em outros domínios que não o do Marvel;
  • Compartilhamento de protótipo;
  • Recebimento de comentários / feedbacks de qualquer internauta, mesmo os não cadastrados no Marvel;
  • Vinculo com vídeos, áudios, mapas e outros sites, isso dentro do próprio protótipo.

Até a construção deste artigo e vídeo, as funcionalidades acima eram as principais.

Softwares complementares

Algo que ainda não é possível no Marvel é a edição de nossas imagens fornecidas, digo, edição completa de maneira trivial, por exemplo, o corte (crop) de imagem.

Para isso há softwares, gratuitos, que online nos permitem isso. A seguir listo alguns que utilizei para a construção dos protótipos do projeto de aplicativo de blog WordPress Arte em Dois:

Em alguns pontos eu utilizei o Adobe Fireworks e o Adobe Photoshop. Isso, pois eu já tinha esses programas de edição em minha máquina e assim conseguiria o resultado desejado de maneira rápida, ambos são pagos. Mas tudo que fiz com eles é possível nos softwares gratuitos que listei acima.

Há também o GIMP que é gratuito e permite edição completa de suas imagens.

Limitações Marvel

Em alguns pontos, na criação das telas, é possível que o layout de alguma, ou de muitas, fique desconfigurado. A correção é você somente entrar em "Edit Design" na tela desconfigurada e logo depois clicar em "Update and Close". Assim o layout tende a voltar ao normal.

Veja um exemplo de uma tela desconfigurada e logo ao lado a correção dela depois de termos seguido o procedimento descrito acima:

Layout desconfigurado vs layout corrigido - MarvelApp

Outra limitação está na questão do arquivamento de imagens. Nós podemos utilizar o DropBox, o Google Drive ou o Box como online servers para fornecimento de imagens, mas nem mesmo na versão paga há a possibilidade de termos as imagens fornecidas de nossas máquina em um folder online do Marvel.

Uma outra limitação vem com o trabalho com layers. Apesar de ser possível abrir uma outra imagem acima de uma tela atual, não é possível utilizar o "timer" para cancelar um layer, algo que fez muita falta na simulação de envio de comentário no protótipo de nosso aplicativo de Blog.

Nessa simulação era preciso que um layer de "Dialog de novo comentário" desse lugar a outro, um "Snackbar de comentário enviado" onde esse Snackbar, depois de alguns segundos, sairia sozinho da tela.

Note que quando utilizando o Design tool é possível que em alguns momentos a edição de alguns componentes trave. Apenas clique em "Update and Close" e logo depois volte a tela para continuar com as edições.

Uma outra limitação que também fez falta foi a de download de telas. Digo, como imagem. Temos de dar um print na tela e depois cortar as parte que necessitamos.

Mesmo com as limitações citadas, o software não perde no custo / benefício. A versão gratuita ainda é muito útil e mais produtiva do que trabalhar com o protótipos feitos a mão.

Outros softwares para a criação de protótipos

Wireframes em papel

Antes de conhecer softwares de prototipagem, por muito tempo eu criei os protótipos de meus projetos, Android e Web, no papel.

Wireframes em papel

Esses, apesar de não terem o nível de qualidade dos softwares, ao menos lhe dão um norte no que deve ser desenvolvido, e acredite, é ainda muito melhor do que seguir o desenvolvimento somente com a ideia em escrito, sem um mínimo "rabisco" das telas.

A seguir deixo os links de alguns wireframes em PDF que você poderá imprimir e então desenhar suas telas caso prefira o trabalho manual, como um "artista":

Projeto Android WordPress

Para o projeto Android WordPress Arte em Dois construí dois protótipos, um navegável e outro não.

Ainda neste conteúdo não temos códigos, e dessa vez é preciso que você veja o vídeo logo ao final do artigo para que saiba como criar protótipos utilizando o software Marvel.

Nossa meta com os protótipos é saber quais as telas que terão de ser desenvolvidas e também como se dará o fluxo de navegação no aplicativo, ao menos a navegação nas partes principais do app.

De forma implícita saberemos também quais as classes de nosso domínio do problema.

Protótipo não navegável

A seguir temos as telas criadas no Marvel para um protótipo não navegável. Este tipo de protótipo é importante principalmente para o desenvolvedor, para ele não ter dúvida do que é esperado no aplicativo que ele construirá.

Note que é possível utilizar o visualizador de protótipo do Marvel com um projeto não navegável, apenas colocando um timer de invocação de tela em cada screen do projeto, no caso sempre invocando a próxima imagem.

Seguem screens:

Abertura aplicativo

Abertura aplicativo

Carregamento de lista de artigos

Carregamento de lista de artigos

Lista de artigos

Lista de artigos

Lista de artigos por artista

Lista de artigos por artista

Menu gaveta (usuário não logado)

Menu gaveta (usuário não logado)

Login - Account Kit

Login - Account Kit

Menu gaveta (usuário logado)

Menu gaveta (usuário logado)

Opções de menu para usuário logado

Opções de menu para usuário logado

Configurações usuário - atualização ainda não realizada

Configurações usuário - atualização ainda não realizada

Tela da API de escolha de imagem de perfil

Tela da API de escolha de imagem de perfil

Configurações usuário - imagem de perfil atualizada

Configurações usuário - imagem de perfil atualizada

Artigo com AppBarLayout expandido

Artigo com AppBarLayout expandido

Artigo com AppBarLayout encolhido

Artigo com AppBarLayout encolhido 

Artigo - área da vídeo aula

Artigo - área da vídeo aula

Tela de vídeo acionado

Tela de vídeo acionado

Artigo - área de conteúdo somente em texto simples

Artigo - área de conteúdo somente em texto simples

Artigo - área de conteúdo em texto simples e imagem

Artigo - área de conteúdo em texto simples e imagem

Artigo - área de conteúdo com lista de itens e imagem

Artigo - área de conteúdo com lista de itens e imagem

Artigo - área de conteúdo com lista de itens e imagem - ferramentas

Artigo - área de conteúdo com lista de itens e imagem - ferramentas 

Artigo - área de conteúdo somente em texto simples - preços de custo e venda

Artigo - área de conteúdo somente em texto simples - preços de custo e venda

Artigo - área de conteúdo em texto simples e com lista de itens

Artigo - área de conteúdo em texto simples e com lista de itens 

Artigo - formulário de inscrição de email, área de conteúdo em texto simples, download molde e compartilhamento de conteúdo

Artigo - formulário de inscrição de email, área de conteúdo em texto simples, download molde e compartilhamento de conteúdo

Artigo - área de conteúdo em texto simples, download molde, compartilhamento de conteúdo e lista de tags

Artigo - área de conteúdo em texto simples, download molde, compartilhamento de conteúdo e lista de tags

Artigo - download molde, compartilhamento de conteúdo, lista de tags e artigos recomendados

Artigo - download molde, compartilhamento de conteúdo, lista de tags e artigos recomendados

Artigo - área de comentários (todos encolhidos)

Artigo - área de comentários (todos encolhidos)

Artigo - área de comentários (todos expandidos)

Artigo - área de comentários (todos expandidos)

Artigo - respondendo a comentário

Artigo - respondendo a comentário

Artigo - comentário respondido

Artigo - comentário respondido

Contato

Contato 

Contato enviado

Contato enviado

Sobre

Sobre 

 

Note que durante o desenvolvimento do projeto é possível que mais telas entrem (ou sejam removidas) incluindo que algumas podem passar por atualizações.

Protótipo navegável

A seguir o protótipo navegável, direto do embed code do Marvel. Esta versão de protótipo é muito útil para apresentações onde é importante a visualização do fluxo de navegação.

Segue:

Assim terminamos com a apresentação dos protótipos Android do projeto Android WordPress.

Para que você veja o passo a passo da construção de um protótipo no Marvel é importante que assista ao vídeo na seção a seguir.

Lembrando que mesmo você não sendo um desenvolvedor e nem mesmo um designer é possível construir um protótipo profissional com as ferramentas gratuitas disponíveis hoje em dia.

Antes de prosseguir com o vídeo, não esqueça de se cadastrar na ðŸ“© lista de e-mails do Blog (logo ao lado, ou ao final do artigo). Assim você receberá em primeira mão todos os conteúdos sobre dev Android.

Se inscreva também em meu canal no YouTube: Thiengo Calopsita YouTube.

Vídeo com o passo a passo da construção do protótipo

A seguir o vídeo com a construção passo a passo de um protótipo, utilizando o Marvel:

Conclusão

Com softwares de criação de protótipos você conseguirá ter o desenvolvimento de seu app Android com mais evidência, sabendo que não será cobrado de você a habilidade de um designer e nem mesmo de um desenvolvedor.

Porém mesmo que o software escolhido seja simples, você terá, inevitavelmente, um tempo necessário na curva de aprendizado, mesmo que seja de um ou dois dias. E, em meu ponto de vista, vale a pena o tempo investido no conhecimento da ferramenta.

Principalmente quando sabendo que o usuário do software de prototipagem é um cara fora da TI e que quer muito recrutar programadores e designers como sócios ou até mesmo conseguir investimentos de uma venture capital para assim prosseguir com a construção do que inicialmente era apenas uma ideia no papel.

Algo que recomendo quando construindo seus protótipos, ao menos naqueles sem navegação, é escolher pecar pelo excesso, faça todas as telas possíveis para que não haja o mínimo de dúvida e atraso no momento do desenvolvimento.

Porém para os protótipos navegáveis, crie um limite, pois caso contrário você terá lógicas longas de links de telas e poderá até mesmo ter mais trabalho do que no momento de programar.

Caso conheça algum software de criação de protótipos que não tenha sido apresentado aqui, não deixe de compartilhar nos comentários, incluindo suas dúvidas, caso tenha.

Não se esqueça de se inscrever na lista de e-mails ðŸ“© do Blog para receber o conteúdo exclusivo sobre o dev Android, em primeira mão.

Abraço.

Investir em Você é Barra de Ouro a R$ 2,00. Cadastre-se e receba grátis conteúdos Android sem precedentes!
Email inválido

Relacionado

Kotlin Android, Entendendo e Primeiro ProjetoKotlin Android, Entendendo e Primeiro ProjetoAndroid
Colocando Telas de Introdução em Seu Aplicativo AndroidColocando Telas de Introdução em Seu Aplicativo AndroidAndroid
PDF no AndroidPDF no AndroidAndroid
Android WordPress, Apresentação do ProjetoAndroid WordPress, Apresentação do ProjetoAndroid

Compartilhar

Comentários Facebook

Comentários Blog (9)

Para código / script, coloque entre [code] e [/code] para receber marcação especifica.
Forneça seu nome válido.
Forneça seu email válido.
Forneça o comentário.
Enviando, aguarde...
Rene Bentes (1) (0)
05/01/2018
Fala, Thiengo, beleza?

Tenho acompanhado suas publicações, todas muito bem explicadas e pontuais. Parabéns...

Minha dúvida, durante os vídeos que vi, incluindo este, você diz que muito raramente utiliza UML e outras metodologias de desenvolvimento. Como consegue manter o desenvolvimento apenas com as funcionalidades definidas apenas no protótipo? Digo, depois de tudo definido, você faz um contrato, um documento de visão ou uma proposta amarrando todo o desenvolvimento com o cliente?

Tenho muita dificuldade nesse sentido, tenho tudo definido aí no meio do processo enxergo uma funcionalidade que poderia ter sido definida antes, e acabou passando...
Responder
Vinícius Thiengo (1) (0)
07/01/2018
Rene, tudo bem aqui.

Porque raramente eu preciso de diagramas UML?

Principalmente porque a alguns anos eu trabalho por conta própria, com meus próprios produtos de educação e de desenvolvimento.

UML e documentação são principalmente úteis quando se programa em time. São comuns em empresas que não querem cometer o erro de dependerem de programadores "diferenciados", aqueles muito bons, mas que têm o próprio estilo de programar.

Essas empresas precisam de diagramas e de documentações para que caso haja rotatividade de desenvolvedores, os mais atuais no time consigam rapidamente entender o projeto e entrar no ritmo dos mais antigos.

Ok, mas então documentação e UML ajudam somente se eu estiver programando em time?

Não. Ao menos os diagramas UML podem lhe dar uma visão mais precisa sobre o que será necessário em: classes de domínio e classes utilitárias. Alguns profissionais ainda buscam também trabalhar diagramas mais específicos, como o de atividades. Para este eu prefiro um caminho mais simples e de mesmo impacto: "fluxograma".

Um outro caso onde documentação, junto a diagramas UML, é importante é quando a empresa quer tirar o ISO. Um avaliador ISO solicitará este tipo de recurso da área de desenvolvimento de software.

Ok, mas e quando o cliente solicita diagramas UML, mesmo sabendo que eu serei o único developer?

Neste caso se você souber trabalhar com UML: faça. Mas tenha em mente que é provável que funcionalidades mudem ao longo do desenvolvimento.

Mas e os protótipos de tela, devo sempre utilizar?

Hoje eu sempre utilizo, mesmo se houver a necessidade de também trabalhar diagramas UML.

Prefiro protótipos de tela também porque não corro o risco de ter de tomar decisões extra desenvolvimento enquanto estou desenvolvendo. Além de diminuir o risco de não desenvolver funcionalidades necessárias que não foram colocadas em código (uso também um mapa mental para isto).

Apesar de parecer um pouco "utópico", protótipos de tela, aqueles construídos com qualidade, tendem a ser a maior motivação para irmos até o final do projeto, pois com eles é possível saber exatamente o que deve ser desenvolvido. Algo que, devido a abstração, diagramas não passam com facilidade.

Rene, quero deixar claro que essa é a minha concepção sobre diagramas UML e protótipos de tela.

Sou developer de faculdade. Por quatro anos tive de desenvolver todos os tipos de diagramas UML possíveis, isso para: provas, trabalhos e outras exigências acadêmicas.

No mercado, quando trabalhei em empresas (governo e privada), devido a dinâmica e velocidade, nunca vi UML sendo utilizado, nem mesmo quando em time. Obviamente que isso de forma alguma tira a necessidade e utilidade deste.

Mas quando "sobre pressão" é necessário saber, principalmente, o que não utilizar.

Mesmo tendo estudado, em sala de aula, diagramas UML, pretendo ir mais a fundo neste assunto e, com certeza, estarei compartilhando algo aqui.

Martin Fowler tem um renomado livro somente sobre diagramas: "Uml Essencial".

Abraço.
Responder
Rene Bentes (1) (0)
08/01/2018
Thiengo, obrigado por responder... Seus testemunhos são de grande valia... Abraço.
Responder
02/01/2018
Ví que ficava aparecendo algumas vezes o ícone do "Sketch" como fazer a integração dele com o Marvel? e parabéns pelo artigo, muito bom.
Responder
Vinícius Thiengo (0) (0)
03/01/2018
Lazaro, tudo bem?

Se me lembro bem a integração somente é possível se você estiver utilizando a versão paga do Marvel, não deixe de confirmar, isso, pois eu não trabalho com o Sketch.

A seguir os links que lhe ajudarão com o download, a instalação e o uso do plugin MarvelApp-Sketch:

-> https://marvelapp.com/sketch/
-> https://blog.marvelapp.com/prototype-with-marvel-and-sketch/

Abraço.
Responder
03/01/2018
Obrigado pelo feedback.
Responder
08/12/2017
E ai thiengo da uma  olhada na minha ideia, gostaria de ouvir sua opnião:
https://youtu.be/k1StQpddGyg
Responder
Vinícius Thiengo (1) (0)
25/12/2017
Paulo, tudo bem?

Desculpe a demora.

Ficou show de bola o aplicativo e a ideia. A apresentação achei um pouco confusa, pois você apresenta os serviços de "Chaveiro" e "Mecânico" e depois vai direto aos detalhes do atendimento médico sem explicar, passo a passo, o que seria o aplicativo.

O que não curti foi o "Enviando dados... aguarde", provavelmente o "conectando..." já seria o suficiente para o usuário, mais simples de entender para qualquer nível de usuário.

É isso, mas gostei principalmente do layout do aplicativo mobile e Web.

Chegou a utilizar um software somente de protótipo para isso?

Abraço.
Responder
25/12/2017
Não thiengo, não usei nenhum software e realmente ficou confuso, agradeço demais o feedback... Obrigado
Responder