Tudo o que você sempre quis saber sobre prototipagem (mas tinha medo de perguntar)

Protótipos são meu framework para aprender novas ferramentas, plataformas e técnicas. Um protótipo funciona como uma prova concreta de que uma ideia funcionará ou não. É central para todo o meu processo criativo e é o meio que uso para me relacionar com as pessoas e empresas com quem colaboro.

Sou entusiasmado com protótipos porque acho que eles podem fazer maravilhas , mas também acho que eles não recebem o que merecem. A prototipagem geralmente não é incorporada aos cronogramas do projeto ou, se for, geralmente como alguma entrega tangencial a um projeto maior. Pode ser mais se você quiser!

Quero convencê-lo a criar protótipos mais profundamente em seu fluxo de trabalho. Essa maneira de abordar projetos pode mudar a maneira como você colabora, aprende e cresce como pessoa criativa. O negócio é o seguinte: vou tentar obter uma boa definição no papel e, em seguida, investigar como você pode tornar a prototipagem tão importante para a sua prática quanto para a minha . E para adoçar o pote, vou fornecer alguns protótipos que criei para um jogo que fiz, Melody Jams, que foi apresentado pela Apple em 130 países e foi o aplicativo infantil número um na loja por um breve período.

O que é um protótipo?

A definição clássica de um protótipo é que é uma demonstração em escala de uma coisa em escala real que você deseja fazer. Um protótipo pode ser parcialmente construído ou projetado para mostrar um recurso específico de um sistema maior. Esta é uma definição muito boa, mas gosto de pensar em protótipos como algo ainda mais amplo. Minha definição de protótipo? É um artefato tangível que explora uma ideia .

Pode ser tão simples quanto alguns esboços desenhados em papel. Talvez seja puramente projetado, como um passo a passo animado de como uma interface funciona no After Effects. Talvez seja uma demo grosseira lançada no Codepen. Ou pode ser algo muito maior em fidelidade. Quando alguém vê um protótipo, não deve haver ambiguidade em sua resposta. Em outras palavras, se a pessoa perguntar: “E se o aplicativo for azul?”, isso não é um protótipo. Se você mostrar como o aplicativo ficaria se fosse azul, então é.

Existem também diferentes tipos de protótipos, cada um com uma finalidade diferente: interno, externo e público .

Protótipo Interno

Um protótipo interno não necessariamente transmite valor imediato para qualquer pessoa fora de mim ou da minha equipe. Pode ser tão áspero e rápido quanto eu quero fazê-lo. No mundo do site, eu poderia construir um componente simples usando CSS vanilla, HTML e JavaScript, React, Angular ou Vue, apenas para ter uma noção de como funciona e pesar os prós e os contras. Esses tipos de protótipos tendem a aparecer muito cedo no meu processo – na verdade, no primeiro dia em que um projeto começa. Com esses protótipos, não preciso ter medo de que alguém não “pegue” ou que cause mais mal do que bem. Posso optar por mostrar Protótipos Internos a um cliente ou stakeholder para reforçar o valor do processo de prototipagem a meu critério, mas esse não é o ponto ainda - agora quero mostrar ideias rápido, rápido, rápido.

Protótipo Externo

Um protótipo externo defende a direção que você está tentando seguir, para mostrar o progresso ou demonstrar como algo funciona. Quando um cliente precisa de uma ferramenta de administração, posso criar um blog rápido no Craft, WordPress e Contentful (sim, todos os três!) melhor para eles. Esses protótipos são ótimos nos estágios intermediários e posteriores de um projeto. Lembro-me de um projeto em que um cliente estava considerando uma mudança para incluir a API de um novo provedor de serviços. A montagem de um protótipo demonstrou ao cliente o que o provedor poderia fazer, com que rapidez poderíamos integrá-lo e qual seria o impacto no restante do projeto.

Protótipo Público

Um protótipo público está por aí no mundo todo. Trata-se basicamente de enviar o processo de design real para a natureza, aprender o que os usuários fazem e iterar a partir daí. Pode ser um produto piloto completo ou algo acessível a um pequeno subconjunto de usuários. É o tipo de protótipo mais polido e mais próximo daquela definição tradicional a que me referi anteriormente. Ele tende a se encaixar em um projeto maior como parte de uma fase de teste de alguma natureza.

Os protótipos rápidos são bons protótipos?

A resposta curta é sim. Prototipe rapidamente e o mais rápido possível em um projeto. Para lhe dar uma ideia do porquê, vamos tentar um exercício.

Imagine em sua mente como é uma cadeira. Tem uma boa ideia disso? Seria esta cadeira?

Provavelmente não, certo? Você pode estar pensando em uma cadeira ao ar livre, uma poltrona, uma cadeira de escritório ou um banquinho. Você pode nem estar pensando em uma cadeira fotorrealista! Agora que você tem uma foto desta cadeira, não há ambiguidade. Esta é a cadeira de que estou falando e, a partir de agora, todos nós sabemos disso. Agora temos um quadro de referência comum.

Quando seu cliente diz: “Preciso que meu site pareça moderno”, como você sabe o que isso significa? Sem um artefato tangível, como um quadro de humor, todos terão uma definição diferente de “moderno” em sua mente, assim como na cadeira acima. O problema não é específico do design. É sobre como funciona um fluxo de login ou escolher entre ambientes de hospedagem. Fazer as coisas rapidamente força conversas e reações. Todas as coisas nebulosas são descobertas mais rapidamente.

É importante ressaltar que o protótipo não precisa resolver o problema que você espera que ele resolva . Simplesmente criá-lo e compartilhá-lo, às vezes, desbloqueia ideias, inspiração, desafios ou preocupações que as pessoas não conheciam. Quanto mais rápido e com mais frequência você prototipar, mais cedo todas essas coisas boas virão à tona.

Esta é a chave. A prototipagem desbloqueia sua capacidade de experimentar, falhar, aprender e crescer em um sandbox. Você está melhorando simultaneamente a si mesmo e ao produto em que está trabalhando.

Quem deve prototipar?

Todos! A prototipagem é uma oportunidade para quebrar as barreiras entre as disciplinas. Os designers devem prototipar para que possam aprender as limitações, complexidades e possibilidades do projeto. Os codificadores podem fazer protótipos para testar a viabilidade, é claro, mas também para se envolver mais no processo criativo. Gerentes de projeto, produtores, redatores, qualquer pessoa que tenha uma ideia pode se envolver.

Novamente, a prototipagem não é necessariamente codificar algo maluco – ou mesmo codificar! Trata-se de gerar e testar ideias com coisas reais para brincar e explorar.

Como a prototipagem pode ser tão simples ou complexa quanto você deseja, você obterá muito valor ao adotá-la como parte de sua prática. Vamos passar por alguns dos benefícios.

Arranha uma coceira criativa

Às vezes você só quer tentar construir algo que você nunca viu antes, ou imitar algo que você acha legal. Pode ser uma ideia maluca ou a próxima tendência da interface do usuário – quem sabe? No mínimo, descobrir como as coisas funcionam é uma das partes mais satisfatórias de ser um designer, e a prototipagem é um terreno fértil.

Adiciona espaço para bravura e ideias radicais

É difícil tentar simultaneamente enviar algo que os usuários entendam e sejam inventivos. Mesmo que você inicie um projeto com uma “semana de prototipagem”, essa é uma semana em que o céu é o limite.

Aumenta a experiência no assunto

Cada loja de desenvolvimento que conheço parece ter profundo conhecimento em uma plataforma e secretamente deseja trabalhar além dela (tenho certeza que isso é o mesmo para designers). Você está construindo tudo em PHP e quer entrar no Rails? Construa alguns protótipos ao iniciar um projeto, mesmo que sejam irrelevantes para a meta de negócios.

Reduz o risco

Fazer algo que você nunca fez antes é assustador. Descobrir isso de forma grosseira e rápida remove as barreiras psicológicas. De repente, o impossível leva apenas um ou dois dias para ser feito.

Cria um Catálogo de Ideias

À medida que sua biblioteca de protótipos cresce de projeto para projeto, as ideias são revisitadas. Às vezes, o lixo de um projeto se torna um tesouro para o próximo.

Capacita a todos

Quando você está apenas começando a entender as coisas, títulos, anos de experiência e conjuntos de habilidades não devem importar. Boas ideias podem vir de qualquer pessoa, mas isso é difícil de fazer quando o criativo sênior fulano de tal vem do alto para dirigir o pensamento. Começar com um processo de criação puro derrete títulos e borbulha boas ideias de baixo para cima.

Personaliza seu processo

Eu trabalhei com vários designers e agências, e uma coisa que eles parecem constantemente impressionados é a rapidez com que começo a trabalhar. Não espero que os requisitos sejam preenchidos, a direção de arte seja aprovada ou qualquer outra coisa. Ao começar a correr, posso levar o projeto adiante muito mais rápido.

Como começar

A maneira errada de prototipar é se preocupar se você está prototipando da maneira errada. Como Bruce Lee disse: “Esforce-se para não se esforçar”. Com isso em mente, aqui estão algumas diretrizes para ajudá-lo a promover uma prática de prototipagem rápida.

Escrever declarações de problemas

Dado o que você está tentando aprender ou resolver, divida-o em unidades atômicas e trate cada uma delas como protótipos distintos. “Como carrego um mapa no iOS?” “Como posiciono o mapa em um local específico?” “Como faço para desenhar uma forma no mapa?” “Como coloco um alfinete no mapa?” Quatro declarações, quatro protótipos, quatro coisas aprendidas rapidamente.

Comece com algo que você sabe fazer

Assim como o alongamento antes do treino, você não consegue entrar no ritmo começando a toda velocidade. Se você é um programador que está prototipando um site, talvez queira começar construindo seu próprio clichê: um arquivo HTML estático, uma configuração Gulp, esse tipo de coisa. Isso fará com que sua criatividade flua, de modo que, quando estiver em território desconhecido, seu mojo já esteja funcionando.

Construir feio

Use Comics Sans MS e verde-limão brilhante para suas fontes. Não nomeie suas camadas. Quebre todas as regras. Agora não é hora de perfeição de pixel; é hora de colocar as ideias no papel.

Mantenha os protótipos iniciais em 60 minutos no máximo

Prototipagem e complexidade são inimigos mortais. Quando você está fazendo certo, você deve ser capaz de produzir pelo menos quatro protótipos até o final do seu primeiro dia no projeto.

Priorize por sentimento, não por urgência

O que você sente vontade de fazer hoje? Não tem nada a ver com o projeto? Não lute contra isso. Faça. Quem sabe? Talvez tenha valor ainda não descoberto!

Garfo

Nunca sobrescreva um protótipo. Em vez disso, faça uma cópia e itere a partir daí. Dessa forma, seus protótipos serão sempre os mais simples possíveis, podem ser bifurcados em diferentes direções e serão fáceis de aprender.

Compartilhamento excessivo

Mostre a todos o que você está fazendo! Tenha orgulho disso! A energia positiva que você constrói em torno da prática alimentará todo o ciclo de vida do projeto. Esta etapa por si só pode melhorar drasticamente a cultura de um projeto.

Documente o que você está prototipando e os resultados

Isso pode ser tão simples quanto um arquivo README em um diretório ou uma mensagem no Slack. Sempre volte para aprender com o que você fez.

Anote seus medos à medida que avança e transforme-os em declarações de problemas

Então, você acabou de enviar seu primeiro site para o Heroku, mas está preocupado em como configurar um certificado SSL? Não é um problema. Coloque-o na fila para prototipagem mais tarde.

Como orçar isso em seu projeto

Aqui está a coisa: você não. Isso não é algum tipo de upsell. Esta é a maneira que eu faço. Este artigo tem a palavra “processo” no título por um motivo: não se trata apenas de como criar um protótipo. É um princípio orientador sobre como construir coisas.

Você começaria a prototipagem no dia em que iniciasse um projeto. Você não pararia até que não houvesse mais nada para prototipar. Um protótipo não é o mesmo que seu código principal ou arquivos de design. No início, seus protótipos devem ser muito ásperos para estarem prontos para a produção. Mais tarde, se encontrar uma maneira de fazer a transição parece fazer sentido, tudo bem. É uma decisão projeto a projeto. A prototipagem é sempre uma constante. Quando é configurado dessa maneira, não existe um protótipo com falha ou um erro.

Quando falo com um cliente em potencial, explico a ele que esse processo tende a gerar muito mais resultados muito mais rapidamente do que eles esperariam dos meus concorrentes (leia: você). Essa saída pode ajudar a definir uma API ou provar a viabilidade técnica ou verificar uma tarefa assustadora. Onde é particularmente impactante é com designers e equipes internas de design - eles adoram trabalhar dessa maneira porque eu sou muito rápido com eles, descobrindo as coisas. Produzo trabalhos de maior qualidade, mais personalizados e menos propensos a erros. Como todo mundo se acostuma a ver um trabalho árduo, não há risco de que um protótipo que falhe alarme um cliente - algumas coisas que não funcionam são apenas uma parte esperada do processo.

Também me posiciona bem a longo prazo, porque sou capaz de pegar novas tecnologias muito rapidamente. Meus clientes sabem que podem entrar em contato comigo para uma instalação, um projeto de computação física, um aplicativo ou um site de qualquer escala, pois sabem que a abordagem garante resultados de sucesso.

Para mim, não se trata de maximizar o lucro. É sobre ganhar a vida fazendo o que eu quero fazer. Eu nunca quis ser bom em sites ou aplicativos - na verdade, essas coisas não existiam quando comecei! Comecei a aprender coisas legais e interessantes com código. Quero que minha carreira seja longa, gratificante, excitante e constantemente cheia de coisas novas para aprender. Um processo orientado a protótipos é perfeito para isso.

Ferramentas

Hoje em dia, parece que você não pode dizer a palavra “protótipo” sem pensar na InVision – é como o lenço de papel da prototipagem. Caso você nunca tenha usado o InVision antes, é uma ótima ferramenta para designers fazerem cliques de projetos sem a necessidade de um codificador. É o negócio real: rápido, intuitivo e fácil de aprender.

Com o Sketch ganhando popularidade, muitos plugins estão aparecendo para facilitar protótipos usando-o. Framer é um exemplo fantástico; ele importa arquivos do Sketch e, com um pouco de conhecimento de codificação, você pode criar demonstrações personalizadas, como animações de toque. O InVision também possui um plug-in Sketch. Vale a pena explorar outros, incluindo Marvel e Craft. Há uma tonelada de ferramentas para experimentar.

Você não precisa ser um codificador ou mesmo usar software para prototipar. A prototipagem em papel é uma ótima maneira de experimentar o design da interface do usuário sem precisar de um computador. Você pode quadro branco também. Essas técnicas funcionam até para o design de jogos.

Não sabe por qual começar? Considere um sprint de prototipagem usando cada uma dessas ferramentas!

De volta ao mundo do desenvolvimento web e de software, uma coisa que adoro fazer é configurar um repositório GitHub especificamente para protótipos. Incluí um arquivo README que descreve algumas das regras com as quais me importo ao prototipar, que você pode usar ou bifurcar para tentar.

Estudo de caso: Melody Jams

Cerca de um ano atrás, eu construí e lancei um jogo iOS para crianças com alguns amigos, chamado Melody Jams (e escrevi um artigo para a Smashing Magazine sobre isso!). Esse jogo foi codificado como sopa de nozes em cerca de três meses. Houve alguns desafios: o designer nunca havia feito um aplicativo antes, ele morava a 3.000 milhas de distância de mim e nunca nos conhecemos. Além disso, eu não tinha codificado um aplicativo iOS em um ano, então minhas costeletas se atrofiaram consideravelmente.

O jogo envolve arrastar monstros da parte inferior da tela para pontos de acesso designados no palco. A partir desse único design, várias declarações de problemas passaram pela minha cabeça:

• Como criar um aplicativo iOS?
• Como faço para criar um jogo para iOS?
• Como eu crio uma coisa no jogo?
• Como posso tocar nessa coisa?
• Como eu arrasto a coisa?
• Como eu tenho várias coisas que podem ser arrastadas?
• Como faço para detectar quando uma coisa está perto de outra coisa?

E assim por diante. Cada um deles se tornou protótipos individuais sob medida - um aplicativo iOS para cada um - até que todos fossem resolvidos. Cada um resolveu um problema, e alguns levantaram novos problemas — por exemplo, como faço para animar uma coisa quando termino de arrastá-la?

Eu recriei esses protótipos no Swift 3, para que você possa ver como o repositório de protótipos ficaria se fosse construído hoje. Uma coisa que você notará é que a documentação sobre eles é bem leve - um arquivo README e uma captura de tela ou GIF em cada diretório, mas não uma tonelada de documentação detalhada. Se ajudar a imprimir nossos comentários, faça-o. Para mim, trata-se de ver uma progressão. Não há teoria aqui, nenhum post de blog ou tutorial. O protótipo 3 flui do protótipo 2, que flui do protótipo 1. Com bastante prática, você pode captar as nuances da linguagem de programação rapidamente, mesmo que nunca a tenha visto antes.

Seguimos esse fluxo nas primeiras semanas do projeto, desenvolvendo protótipos em grande parte sem trabalhar no aplicativo principal. Ao final do projeto, tínhamos mais de 50 protótipos distintos que testaram diferentes tipos de animação, esquemas de carregamento, cache, testes de som e mecânica de interface do usuário.

Enquanto isso, o designer estava prototipando logotipos, testes de movimento, ícones de aplicativos e assim por diante. O designer de som forneceu exemplos de músicas que ele estava pensando. E todos adoraram o que estávamos fazendo o tempo todo.

Conclusão

Indo pela minha definição ampla, você provavelmente já faz alguns protótipos sem sequer pensar nisso como tal. Talvez o próximo passo para você seja compartilhar com seus colegas com mais frequência ou afirmar que a prototipagem será como você iniciará seu próximo projeto.

Integrar a prototipagem profundamente em seu processo criativo pode ser transformador . Isso pode contribuir para uma cultura de equipe mais positiva e enriquecedora. Pode ser um mecanismo para desenvolvedores aprenderem novas linguagens ou para designers aprenderem novas ferramentas. Os projetos são feitos mais rápido e com maior qualidade e são mais divertidos. Seus clientes terão maior visibilidade do processo e estarão preparados para ver as coisas com menor fidelidade, o que torna o compartilhamento mais frequente e menos doloroso. Você também parecerá que trabalha muito mais rápido do que seus concorrentes e que é capaz de trabalhar em uma variedade maior de projetos.

Com todos esses benefícios, como não gostar? Então, me diga, você está convencido? Inspirado? Como é o seu próximo passo?