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 necessariamente fazendo no computador, é rápido e barato, deu erro? Rasgafaz 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.

Wikipedia

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 sem pauta

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


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.

Adobe XD

Esse software me encantou desde a 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 protótipar uma ideia eu levava um tempo que eu não tenho, a grande sacada do XD é 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 simplesmente criar um link e mandar isso para o cliente (matou a pau em Adobe?)
  • Você pode dar play no seu protótipo e fazer um vídeo usando o protótipo (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 protótipo

Recentemente, peguei um trabalho em que usei bastante o XD, 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.

Aplicativo da Prime Hyundai que desenvolvi

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 XD, então dá uma ligada nesse podcast:

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/