Como Criar Protótipos Android

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:

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:
  • A importância dos protótipos para o desenvolvimento de aplicativos;
  • A importância dos protótipos para o recrutamento de profissionais e até mesmo investidores;
  • Funcionalidades Marvel software;
  • Softwares complementares;
  • Limitações Marvel;
  • Outros softwares para a criação de protótipos;
  • Wireframes em papel.
• Projeto Android WordPress:
  • Protótipo não navegável;
  • Protótipo navegável.
• Vídeo com o passo a passo da construção do protótipo;
• Conclusão.

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:

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

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

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:

• Lunapic para cortar a imagem;
• ImageResize para redimensionamento de imagem;
• QuickPicturesTools para arredondar as bordas da imagem;
• Material.io para a obtenção de ícones;
• Material Design Icons também para a obtenção de ícones;
• Google imagens para a obtenção de imagens como a de gradiente, por exemplo.

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:

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

• Zeplin.io;
• Android Patterns;
• InVision App;
• ProttApp;
• Proto.io;
• Concept.ly.

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.

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":

• Android Wireframes Templates - Glider Gun;
• Interface Sketch - Android Phone (Material Design);
• Android Ui UX - Phone;
• Android Ui UX - Tablet.

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:

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.

Relacionado

Kotlin Android, Entendendo e Primeiro ProjetoAndroid

Colocando Telas de Introdução em Seu Aplicativo AndroidAndroid

PDF no AndroidAndroid

Android WordPress, Apresentação do ProjetoAndroid

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.

Enviar

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

Lazaro Melo (1) (0)

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

Lazaro Melo (1) (0)

03/01/2018

Obrigado pelo feedback.

Responder

paulo jorge (1) (0)

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

paulo jorge (1) (0)

25/12/2017

Não thiengo, não usei nenhum software e realmente ficou confuso, agradeço demais o feedback... Obrigado

Responder