Da idéia ao protótipo: Quanta saudade!
Originalmente publicado em 2016-04-15 10:00 no blog Patinete a vela.
Tenho um grande amigo que mora e trabalha na Nova Zelândia.
Um dia ele estava visitando a família aqui no Brasil e saí para tomar uma cerveja com ele e outros amigos. Ele então comentou:
– Cara, quando estou fora do Brasil eu morro de saudades do pão francês!
Começamos uma conversa sobre comidas gostosas e eu mesmo pensei em como acabo sentindo saudades do arroz e feijão e do guaraná quando estou viajando. Então veio a idéia: E se eu fizesse um aplicativo que permitisse ao brasileiro que está viajando lembrar das coisas gostosas que têm no Brasil?
Ok é uma idéia estúpida. Por isso que ela é perfeita para exemplificar o processo de transformar a idéia em um protótipo. Todos nós temos idéias boas e estúpidas de aplicativos. E sim, idéias estúpidas fazem sucesso. Só que idéias estúpidas também dão trabalho. Se você consegue seguir um processo que te permite transformar mesmo as idéias estúpidas em um protótipo rapidamente, então você estará melhor preparado quando quiser desenvolver suas idéias não tão estúpidas assim.
Da idéia ao protótipo
O primeiro passo essencial é tirar a idéia da cabeça e transformar em algo que você possa enxergar. Comecei listando o que eu queria que o app fizesse.
Essencialmente ele apresentaria uma lista de produtos gostosos do Brasil. Você poderia clicar em um produto para ver uma foto em alta definição e teria também um botão de “informação”, que descreveria o produto tanto em português quanto em inglês. Para resolver o problema incrivelmente relevante de como explicar para um gringo que raios é uma coxinha.
O nome do aplicativo: Quanta saudade!
Comecei a esboçar umas telas no meu programa de prototipagem favorito: o Keynote. Como eu sou um Apple fan-boy assumido uso o Keynote, mas o PowerPoint é uma ferramenta equivalente para este fim.
Uma coisa legal para começar é você buscar inspiração de telas em apps que você já curte e que façam coisas similares ao que você pretende fazer. Não tem problema em copiar descaradamente quando seu objetivo é dar o primeiro hálito de vida à sua idéia.
Eu busco inspiração no kit de design Tethr da invision. É um conjunto de arquivos no formato PSD (do Photoshop, mas que também funciona, com ressalvas, no Gimp) que já possui dezenas de telas com designs belos para um monte de tipos“típicos” de apps. O kit é grátis e vale a pena baixar.
Eu precisava de basicamente duas telas: uma que mostrasse de forma legal uma lista de comidas gostosas e outra que detalhasse uma comida selecionada. É um padrão de aplicativos muito comum, para ser sincero. Explorando o Tethr achei duas telas de que gostei.
Minha tela de listagem teria uma matriz de botões redondos com miniaturas de uma série de comidas e a tela de detalhes teria uma foto grande permitindo a navegação através de uma barra horizontal na parte de baixo.
Antes de começar a desenhar o protótipo aproveitei para procurar na internet fotos de coisas gostosas típicas do Brasil. Alguns itens que não poderiam faltar: coxinha, pão de queijo, brigadeiro, guaraná, fandangos…
Armado de fotos e de telas para copiar, começa então o momento de desenhar os protótipos!
Comecei criando uma apresentação e definindo o tamanho do slide para que tenha o tamanho da tela de um smartphone. Eu usei na época o tamanho 640x960, que corresponde ao tamanho do iPhone 5.
Então copiei em um slide um dos modelos de tela que tirei do Tethr.
Usando esta imagem como referência comecei a colar por cima os elementos de meu próprio aplicativo.
Fiz o mesmo para a tela de detalhe. Este é um processo muito divertido e relativamente rápido, no qual você basicamente trabalha com inserção de textos e figuras, brinca um pouco com sombras e usa as funções de “crop” ou “mask” para recortar imagens ou deixar as bordas redondas.
Para deixar o protótipo mais bacana, o Keynote tem uma função chamada Magic Move (desculpe, não sei qual é o equivalente para o PowerPoint). Se você coloca a mesma figura em dois slides diferentes com posições, tamanhos ou orientações diferentes, o Keynote anima automaticamente a transição da figura entre seus dois estados quando muda o slide.
É por isso que na figura acima as imagens do arroz e feijão e do pão estão fora do slide; no slide seguinte, a imagem do feijão está centrada no lugar da coxinha por isso o Keynote anima uma transição bacana.
Se você brincar com as animações e transições, no momento em que você manda rodar a apresentação de slides parece que é um demo de um aplicativo de verdade!
Você pode ver um vídeo de demonstração do protótipo final abaixo.
Reflexões sobre o exercício
Todo o processo de criação do protótipo durou cerca de três horas. Ou seja, em três horas consegui pegar uma idéia, por mais estúpida que parecesse, e consegui começar a transformá-la em algo tangível. Com a apresentação final eu já tinha algo de concreto que eu podia começar a mostrar para outras pessoas para obter o feedback delas. Este processo é divertido e muito gratificante.
Como eu também gosto de programar, eu tive o benefício adicional de que só o fato de ver a idéia tomando forma já me deixou empolgado para programar. Em mais um dia de trabalho eu já tinha um app funcional que eu podia colocar nas mãos das pessoas para elas poderem mexer. A programação é enormemente facilitada quando o protótipo já está pronto.
E a partir do momento em que eu tinha algo para mostrar, de repente as pessoas para quem eu mostrava começavam a dar idéias e sugestões que me fizeram achar que o app não era tão estúpido assim…
Enfim, quais são algumas idéias que você pode tirar deste texto:
- Criar protótipos é rápido e fácil e você mesmo pode fazê-lo. Você não precisa de programadores nem designers nesse momento.
- Protótipos são bons para você organizar suas idéias e se empolgar com o seu projeto.
- Um protótipo de Keynote (ou PowerPoint) já é muito bom para mostrar para as pessoas a sua idéia.
- Um protótipo completo vai tornar muito mais rápido o trabalho do programador quando você decidir desenvolver seu app.
Espero que você se sinta animado para tentar fazer seus próprios protótipos. Se fizer algum, me conte como foi!