Como eu faço prototipos de sistemas e aplicativos usando o caderno e o Adobe Experience Design

Prototipação capa

Prototipar é importante!

Toda vez que vou desenvolver algo é quase certo que vou esboçar em desenho, eu passei a gostar muito de desenhar componentes e talvez seja porque antes de eu entrar para informática ainda moleque eu gostava muito de desenhar e, meu pai é tatuador, então eu tenho um gosto por desenhos, além disso o desenho me ajuda porque eu não preciso estar necessáriamente fazendo no computador, é rápido e barato, deu erro? Rasga e faz outro.

Eu sei que nem todo mundo tem intimidade com desenhos mas vale até mesmo aquele esboço grotesco, mas que demonstra para o cliente a proposta de uma possível funcionalidade ou componente.

Segundo o Wikipedia:

Na Engenharia de Software, protótipo é um sistema/modelo (um website ou outro software) sem funcionalidades inteligentes (acesso à banco de dados, por exemplo), podendo conter apenas funcionalidades gráficas. Utilizado para fins de ilustração e melhor entendimento, geralmente em reuniões entre a equipe de Análise de Sistemas e o contratante.

O que eu uso?

Papel, caneta, a cabeça e um software… mas confere ai vai, o post tá super ilustrado.

01 - Caderno comum de folhas brancas

Existe frescura para tudo, até na hora de desenhar, o que não é o meu caso! Eu optei por esse modelo de caderno, ele é simples, barato e bom, aqui na minha cidade não passa de R$10 reais.

Caderno comum branco

02 - Canetas variadas com ponta fina (0.5)

Comprei mais de uma cor (três exatamente) para ajudar na hora de diferenciar algo dentro do desenho, isso realmente me ajuda muito a entender melhor o protótipo, e depois na hora de passar para uma versão mais apurada já digital também facilita.

Canetas ponta fina

Na imagem a direita, eu tava ali esboçando uma ideia de funcionalidade que ia manipular a DOM, eu tinha uma div fixa que tava com overflow sumindo com alguns links. Quebrei cabeça, e bingo! o desenho ajudou pra caramba.

Régua que dobra

Cara, eu sempre quebrava as réguas, porque minha mochila anda muito cheia de papéis e outras coisas que carrego, e essa régua que pode dobrar foi uma mão na luva, achei na Americanas.

Alguns exemplos

Quando to produzindo um aplicativo ou sistema, eu tenho costume também de pegar a minha mão e tirar um esboço do meu dedo como se estivesse clicando no app, outro recurso é fazer uma mãozinha mesmo identificando o toque.

Alguns esboços de aplicativos

Adobe Experience Design

Esse software me encantou desda primeira vez que eu usei (eu não tenho experiência nenhuma com outros como o Sketch), basicamente o Adobe Experience Design foi feito focando 100% em uma premissa que é ser fácil de usar, se você não conhece, dá uma olhada nesse vídeo a seguir:



Depois de desenhar com o cliente, uma dificuldade que enfrentei por bastante tempo era mostrar um modelo visual do que seria o aplicativo ou o sistema final, cheguei a perder horas no Illustrator fazendo isso, porém o que acontece é que eu sou programador e não designer, e para prototipar uma ideia eu levava um tempo que eu não tenho, a grande sacada do Experience Design é que ele é muito fácil de mexer, tem um menu muito simplificado e tem recursos que poupam horas de trabalho, mas vai além, vou listar algumas das coisas que mais me encantam usando esse software:

  • É muito fácil desenhar com ele
  • É muito fácil colocar sombra, arredondar borda
  • Quando se importa um SVG, é possível customizar todo, apagar alguns componentes, mudar a cor (lindo)
  • Repetição de elementos: você cria um elemento, exemplo, uma imagem e um título, depois agrupa e arrastar repetindo ele no layout (pqp!)
  • Navegar entre as telas prototipadas também é muito legal, fácil de dar zoom e menos zoom
  • No modo prototype, você pode ligar um botão em outra página e criar uma navegação com fadeIn
  • Depois de prototipado a ideia, pasmem, você pode simplismente criar um link e mandar isso para o cliente (matou a pau em Adobe?)
  • Você pode dar play no seu prototipo e fazer um vídeo usando o prototipo (isso é lindo também)
  • Existe um cliente para iOS e Android que conectado ao USB da sua máquina deixa você rodar seu protótipo no seu aparelho (foda!)
  • Lembra do link que falei? O cliente pode comentar e pinar os pontos do prototipo

Recentemente, peguei um trabalho em que usei bastante o Experience, a conclusão que eu cheguei logo de cara é que ele me deu poder para dar um feedback muito rápido para o cliente do resultado final além de me guiar completamente na produção do aplicativo, porque olhando para a imagem a seguir eu pude já saber quais as views, controllers e demais recursos eu iria precisar, o que antes eu ia seguindo pelo instinto.

Prime - Esboço no Adobe Experience Design

Gostou do assunto?

O Paulo Silveira da Caelum tem um canal de podcast chamado hipsters.tech e a edição #28 é um podcast muito irado falando sobre Prototipação com participantes de peso como o Demian Borba que é Gerente de Produto da Adobe Experience Design, então dá uma ligada nesse podcast:

http://hipsters.tech/prototipacao-erre-cedo-para-acertar-cedo-hipsters-28/

Resumo

Então galera, a minha proposta aqui era compartilhar minha experiência, a forma que eu uso hoje para construir os sistemas e aplicativos que venho tocando, espero que tenho te ajudado, se você faz diferente ou se identificou com alguma coisa, deixa seu comentário, vai me deixar feliz \o/

http://www.adobe.com/br/products/experience-design.html