A prototipagem, como conceito, existe desde antes da Internet. Normalmente, as pessoas que desenvolvem um novo produto físico primeiro constroem a coisa e garantem que ela funcione como pretendido. A primeira versão seria patenteada, talvez, e mostrada a potenciais investidores. Se o inventor tivesse acesso aos seus próprios meios de manufatura (se eles trabalhassem em uma empresa existente, por exemplo), eles simplesmente iriam em frente e resolveriam os erros até que tivessem um modelo pronto para produção.
Lembre-se daqueles discos de demonstração antigos? Você sabe, aqueles que vieram com programas com funcionalidade limitada, ou o primeiro nível ou dois em um jogo? Os protótipos são muito parecidos com esses demos, apenas mais simples ainda.
Você cria um protótipo de um website ou aplicativo para garantir que o conceito funcionará como pretendido
Seu propósito não é tanto fazer com que clientes em potencial comprem um produto, como ajudar você a fazer um melhor. Você cria um protótipo de um website ou aplicativo para garantir que o conceito funcione conforme o pretendido. Você também a usa para mostrar a seus clientes, ou potenciais investidores, como ela deve funcionar.
Recentemente, vimos muitos aplicativos voltados para a criação de protótipos para a web e também para aplicativos para dispositivos móveis. Agora, o Adobe Experience Designer foi lançado, combinando a funcionalidade de um "aplicativo de design" específico da Web e de dispositivos móveis com o de um aplicativo de prototipagem. Dada a reputação da Adobe e sua participação de mercado no setor profissional, é lógico que muitas pessoas que não fizeram muitos protótipos no passado agora possam dar esse passo.
Assim, como a maioria dos outros guias finais, este é para iniciantes. É para pessoas que estão apenas começando a construir protótipos regularmente, seja qual for sua experiência anterior (ou falta dela) na indústria do design.
Neste guia, tentamos abordar os princípios básicos acima de tudo. Depois disso, há links para guias com mais informações e, é claro, uma grande lista de aplicativos e ferramentas com os quais você pode trabalhar.
Agora, o designer que já existe há algum tempo provavelmente já trabalhou com wireframes e / ou projetou modelos em algum editor de imagens. Esses não são protótipos?
Não. Nem sempre, de qualquer maneira.
O problema com wireframes e mockups estáticos é que eles são ... bem ... estáticos. Há muita informação que eles simplesmente não podem transmitir sobre a funcionalidade de uma coisa. Isso pode levar a equívocos nas mentes dos clientes, ou mesmo de seus desenvolvedores, sobre como a coisa deve funcionar. Por esse motivo, os protótipos geralmente são interativos de alguma forma.
As exceções mais comuns são protótipos conceituais e protótipos estáticos excepcionalmente bem documentados. O que faz a diferença não é a interatividade em si, mas o envio de informações sobre a funcionalidade pretendida de um produto.
Dito isso, wireframes e mockups são frequentemente usados na criação de protótipos, então ninguém os está abandonando.
Sempre que você precisar mostrar como algo deve funcionar. É isso aí.
O exemplo óbvio é o de um aplicativo da web ou móvel. Os aplicativos tendem a ter um pouco de funcionalidade que pode não ser vista ou deduzida facilmente de uma maquete. No entanto, até mesmo websites estáticos e com conteúdo podem exigir um protótipo.
Por um lado, tive clientes que olharam modelos para um site de negócios simples e perguntaram “Ok, então se eles clicam nas coisas no topo, 'Sobre nós', 'Serviços' e outras coisas, isso os leva para outros páginas? ”, ou“ Quando eles clicam em enviar no formulário de contato, eu recebo um e-mail? ”
Até tarefas simples ... muitas vezes são repletas de incertezas ... os protótipos podem ajudar a eliminar algumas das suposições
Mesmo tarefas simples de navegação são muitas vezes carregadas de incerteza para alguns usuários e possíveis clientes, de modo que os protótipos podem ajudar a eliminar algumas das suposições do processo de aprovação.
Além disso, eles são sempre úteis no teste do usuário. Afinal, se você vai fazer testes de usuário, é melhor começar com uma prévia do projeto. A última coisa que você quer é ter que fazer grandes mudanças depois que a maior parte do trabalho já tiver sido feita.
Antes de começar a prototipagem, você vai querer determinar que tipo você quer usar. Você sempre pode usar mais de um tipo em qualquer projeto; a maioria dos designers faz, em algum momento.
O tipo de protótipo que você escolher precisará ser o certo para você, seu cliente, o projeto e até mesmo o estágio específico do projeto em que você está. Agora, isso pode parecer complexo, mas não é tão ruim assim.
Cada um deles deve ser usado em diferentes estágios na fase de design. O resto depende de sua preferência e de como seu cliente é bom em entender visuais abstratos.
Clientes com menos experiência em processos de design moderno podem esperar ver algo que pareça mais “polido”, para que possam dizer para aumentar o logotipo, mover essa linha uma polegada para a esquerda e que o site não fique em latim. , então você poderia colocar algum inglês por favor?
Se você tiver problemas com isso, protótipos mais detalhados - e muito café - são sua melhor aposta. Se não, então você pode usar algo um pouco mais vago, e se concentrar em zombar da funcionalidade pretendida.
Estes, muitas vezes, não se parecem em nada com o produto acabado em qualquer forma ou formato. Com protótipos conceituais, os detalhes e o layout da interface não importam. As únicas coisas em que você está trabalhando são interações e processos.
O objetivo de qualquer protótipo é mostrar como algo funciona ou funciona. Nesse sentido, isso é prototipagem em sua forma mais pura. É literalmente tudo sobre a função, e a forma nem entra nela.
Eles podem parecer quase tudo, neste estágio. Você pode usar um fluxograma, notas post-it, uma apresentação em PowerPoint, um vídeo explicando o processo com ilustrações baseadas em ícones, ou uma gravação de si mesmo falando na câmera e agitando os braços violentamente. Qualquer coisa que aponte a ponta serve.
Os protótipos conceituais são normalmente usados no estágio inicial de qualquer projeto. Seu projeto pode nem ter nome. É apenas uma ideia para um aplicativo ou um site, e você estará dizendo coisas como: "Sim, acho que deveria funcionar assim ..."
Os protótipos de baixa fidelidade são onde você começa a incluir coisas como o layout e o tamanho da tela, além de outras preocupações mais tangíveis. Eles geralmente são feitos rapidamente e descartados mais rapidamente.
Eles pretendem fornecer a maneira mais rápida possível de iterar suas ideias até que você e / ou seu cliente estejam satisfeitos com o básico. Então não se apegue. A maioria deles não será longa, e isso é bom.
Como mencionado anteriormente, o termo “protótipos de baixa fidelidade” é frequentemente intercambiável com “wireframes”. De fato, esse estágio geralmente acontece no papel.
Quando é feito em um aplicativo, é aconselhável usar um que tenha funções básicas de prototipagem, como links para outras telas, anotações, etc. Os aplicativos de wireframing têm a vantagem de permitir uma colaboração mais fácil pela Internet, mas geralmente são mais lentos usar.
Eles também são usados no início de um projeto, mas você provavelmente já tem um modelo de negócios e uma ideia para um nome. É hora de analisar as inúmeras idéias que flutuam em sua cabeça e iterar até que você tenha algo que tenha certeza de que funcionará.
Às vezes, um protótipo de baixa fidelidade só não consegue entender bem o ponto, e uma alta fidelidade é trabalho demais no momento. Talvez você não tenha refinado completamente o guia de estilo, ou nem todos os seus recursos gráficos foram criados ainda.
Em qualquer caso, esse é o tipo de protótipo que você pode usar no início ao meio da fase de design. Eles geralmente são feitos com aplicativos de prototipagem, que fazem uso intenso da interação simulada. Eles também podem ser construídos com HTML e CSS, geralmente com a ajuda de um framework CSS.
Yup, Bootstrap e Foundation são provavelmente duas das maiores ferramentas de prototipagem disponíveis no momento.
Você deve usar imagens de marca para estas, se você tiver, mas as imagens de ações servirão. Os elementos da IU de estoque geralmente são usados para criar a interface simulada mais rapidamente. Muitos aplicativos de prototipagem vêm com bibliotecas desses elementos para tornar seu trabalho mais rápido.
Esses tipos de protótipos são ótimos para os pensadores mais literais que precisam ver uma aproximação aproximada de como ele vai parecer e funcionar. É mais fácil para eles ignorar um cabeçalho que ainda não está pronto, do que uma forma de aparência irregular que não se parece nem um pouco com um cabeçalho de site como eles sabem.
Para esses clientes, você pode querer esboçar suas ideias rapidamente e nunca mostrá-las ao cliente. Em seguida, crie um protótipo de média fidelidade que facilite a visualização de onde você está indo.
Bem, estamos aqui. E assim é o seu projeto. Você tem seus mockups para cada tela, e tudo parece ótimo. É hora de mostrar às pessoas como isso vai funcionar, em toda a sua glória, quando alguém finalmente o integra com o código de back-end.
Os protótipos de alta fidelidade são geralmente usados para obter uma aprovação final do projeto pelo cliente. Mas você não pode simplesmente enviar os PSDs. Este material tem que ser interativo.
Isso geralmente é feito de duas maneiras. Alguns usam HTML e CSS estáticos para colocar os visuais finalizados juntos de uma forma semi-interativa. Outros usam aplicativos que importam imagens, ou até mesmo arquivos PSD brutos, e adicionam recursos pseudo-interativos para imitar a funcionalidade final do aplicativo.
Dependendo do aplicativo, você pode até mesmo demonstrar esses protótipos na Web (ou em um dispositivo móvel, se estiver trabalhando em um aplicativo).
Agora que examinamos os principais tipos de protótipos que você pode fazer, é hora de cobrir as ferramentas usadas para criá-los. Mencionei a maioria deles na seção anterior e seu uso básico; mas eu gostaria de entrar em mais detalhes.
Novamente, o método escolhido depende do que você e o cliente estão confortáveis.
Estes são muitas vezes feitos para vender uma ideia antes de qualquer trabalho concreto ter sido feito. Assim, eles geralmente são direcionados a investidores em potencial. Eles podem ser usados para clientes também; mas muitas vezes há maneiras mais eficientes de se comunicar com um cliente. Sua milhagem pode variar.
Os protótipos baseados em vídeos e apresentações feitos para anúncios de vendas geralmente seguem uma fórmula de estilo comercial:
Alguns desses protótipos usam apenas ícones, textos e ilustrações. Outros têm animação; e outros ainda usam ação ao vivo para mostrar o ponto. E isso é bem ... o ponto. Enquanto você vender sua ideia, você fez certo.
Aqui está um exemplo incrível que mistura prototipagem de vídeo com prototipagem de papel.
Os wireframes podem ser feitos em papel ou em apps. Eles são quase sempre considerados protótipos de baixa fidelidade, embora possam ser atualizados para a fidelidade média se você dedicar tempo suficiente a eles. Raramente vale o esforço, no entanto.
Normalmente, os wireframes são projetados para serem desenhados e descartados rapidamente. Essa é uma das coisas que torna o desenho no papel tão atraente. Os aplicativos podem ser muito mais precisos e você pode editar facilmente os wireframes existentes; mas nada supera a velocidade de um esboço que ninguém deveria ver além de si mesmo ... nunca.
No entanto, como mencionado anteriormente, os wireframes baseados em aplicativos têm a vantagem de imitar mais facilmente a funcionalidade de uma interface. Batendo em uma armação de arame de papel só vai fazer um som agradável thunk-thunk-thunk.
Isso pode ser divertido, mas pode não transmitir o seu significado.
Você pode optar por usar os dois: papel para definir os conceitos mais básicos e um aplicativo para ampliá-lo e compartilhá-lo facilmente.
Estes diferem de wireframes em que eles são muito mais do que desenhos. Nesse tipo de protótipo, o papel é usado para fazer um modelo físico, ainda que bastante plano, da interface. Você pode ver um desses no vídeo acima.
Os elementos da interface são geralmente desenhados, recortados, às vezes copiados para fazer extras e depois montados em outro pedaço de papel. Isso lhes dá a vantagem da flexibilidade. Onde você pode jogar fora uma folha inteira de papel com um wireframe, você pode simplesmente reorganizar os elementos de um modelo de papel até que esteja satisfeito. Tem um elemento do tamanho errado, depois de reorganizar as coisas algumas vezes? Basta cortar uma nova versão.
Eles também tendem a se sentir um pouco mais "reais" do que uma armação de arame. Mesmo que nada de interessante aconteça, um cliente pode tocar em um modelo de papel. Eles podem sentir isso. Essa sensação tátil às vezes pode explicar mais a um cliente do que qualquer coisa que você possa mostrar.
Todos precisam de contato físico para alcançar um melhor entendimento de qualquer objeto. Metade do design UX é sobre recriar o sentimento de interação física com uma interface digital.
Estes têm muito em comum com os protótipos de papel. Protótipos feitos com um aplicativo como o Invision, ou uma das muitas outras opções disponíveis (veja a lista abaixo), são tipicamente feitos a partir de elementos de interface pré-desenhados, e depois reunidos para imitar o produto final.
A diferença é, claro, que tudo é feito na tela. Ah, e você pode fazer isso com os gráficos e marcas finais, fazendo com que o protótipo pareça exatamente com o produto acabado. Então, como mencionei anteriormente, alguns aplicativos podem demonstrar o produto no navegador e em dispositivos móveis.
Isso traz a sensação tátil de volta ao jogo e você quer isso. Se você puder dar a seus clientes essa sensação, e eles gostarem, você basicamente terá sua aprovação final.
É claro que, se a interação é o que você quer, construir protótipos de interface com código é uma boa maneira de obtê-lo. Agora, você pode escolher protótipos baseados em código por um dos vários motivos:
Prototipagem no navegador pode ser um pouco mais lenta, especialmente se grandes revisões ainda estão sendo feitas. Eu não recomendaria isso para os estágios iniciais de um projeto, então é melhor para protótipos de fidelidade de médio a alto.
Ainda assim, é uma das melhores maneiras de mostrar um projeto quase pronto, se você já gosta de trabalhar com HTML e CSS.
Prototipagem com frameworks
Deve-se notar que o uso de uma estrutura para construir protótipos pode acelerar consideravelmente a prototipação baseada em código. Como um bônus, se você usar a estrutura que deve ser usada para o produto final, haverá menos codificação para fazer no geral.
Como uma nota lateral, algumas pessoas construíram editores de páginas da Web drag 'n' drop baseados em frameworks mais populares, como Bootstrap e Fundação . Usando estes, uma vez poderia concebivelmente criar tudo, desde os protótipos de baixa fidelidade ao produto final com código.
No entanto, algumas pessoas apenas as usam para criar protótipos rapidamente e, em seguida, usam código personalizado para o projeto final. Isso funciona de qualquer maneira.
Agora que cobrimos todos os aspectos básicos, é hora de realmente entrar em detalhes. Como quase tudo o mais no design e na vida, não há um caminho certo para construir um protótipo. Só existe o jeito que funciona para você. Dito isso, os processos de design bem-sucedidos tendem a ter algumas coisas em comum.
Aqui estão alguns guias diferentes para protótipos que se concentram em diferentes métodos e fidelidades, apenas para você começar. Tire deles o que funciona para você, ignore o que não funciona.
(Não incluiremos tutoriais específicos de aplicativos, porque simplesmente são muitos.)
Este guia da Smashing Magazine se concentra em uma metodologia para construir protótipos rapidamente e iterar com frequência.
Isto é um artigo mais pessoal por Nick Pettit no blog Treehouse, que descreve sua própria abordagem à prototipagem.
Aqui está um terceiro artigo em prototipagem rápida. Parece ser popular. Este aqui está no Webdesigner Depot e delineia algumas dicas e armadilhas inerentes ao processo.
Outro artigo da revista Smashing , este entra em maiores detalhes sobre a prototipação de baixa fidelidade.
Neste profundo e francamente artigo fascinante A agência Newfangled descreve seu processo em profundidade. Ele gira em torno da prototipagem em escala de cinza baseada em navegador, e eles são convincentes para experimentá-la.
Outro aqui no WDD , este artigo trata de garantir que seu protótipo tenha um ponto. Se você fizer apenas o teste de usabilidade depois de concluir o projeto final, provavelmente estará fazendo algo errado.
Você terá que ceder algumas de suas informações pessoais (ou simplesmente mentir) para obter este ebook , mas ei, eles não estão pedindo dinheiro! Ele inclui mais informações sobre métodos populares de prototipagem, tutoriais baseados em aplicativos e práticas recomendadas de grandes empresas como Google, Apple, Zurb e muito mais.
Agora, ele é feito pelas pessoas por trás do UXPin, um aplicativo de prototipagem, então elas podem ser ligeiramente tendenciosas sobre qual aplicativo você deve usar. Ainda assim, tem muita informação boa.
Ok, então você tem a teoria. É hora de começar a construir protótipos. Supondo que você não vai se ater a modelos de papel ou código, você vai usar um aplicativo em algum momento.
A boa notícia: há muitos ótimos apps para você escolher. A má notícia: há muitos ótimos aplicativos para você escolher.
Mais uma vez, tudo se resume à maneira como você trabalha. Você precisa da capacidade de demonstrar aplicativos móveis? Você precisa sincronizar seus arquivos com o Google Drive, Dropbox ou algum outro serviço? Como sobre a integração do Github? Low-fi, médio ou alto-fi? Scripts avançados?
Os aplicativos listados abaixo apresentam algumas ou todas essas opções. Vou listar os recursos mais relevantes para cada um deles para dar uma ideia de onde procurar.
Deve-se notar que muitos deles são principalmente conhecidos como ferramentas de armação de arame. É comum que o software wireframing integre os recursos necessários para protótipos interativos. Sua milhagem com esses aplicativos pode variar.
este é a mais nova oferta no mercado atualmente, e está pronta para oferecer uma concorrência séria a um mercado um pouco saturado. Não é apenas um aplicativo de moldagem de arame ou protótipos; é um aplicativo de design. É como Esboço ou o agora morto Fogos de artifício , mas leva as coisas um passo adiante, permitindo que você crie protótipos a partir de tudo que você acabou de projetar.
É atualmente apenas para Mac, e na fase de pré-visualização, mas uma versão do Windows é devido antes do final do ano.
A versão de pré-lançamento é gratuita, assim que a versão final for enviada, ela fará parte do plano de assinatura da Creative Cloud da Adobe.
Microsoft PowerPoint , Apple Keynote , LibreOffice Impress e Slides do Google todos podem ser usados para fazer protótipos. Principalmente, esses protótipos seriam da variedade conceitual. Você pode imitar uma certa quantidade de interatividade, apenas ligando os slides juntos.
Poderia funcionar igualmente bem para a prototipagem de sites de conteúdo, e é provável que você já esteja usando pelo menos um desses programas. Se não, o Impress e o Slides estão livres.
Invision é outro dos “grandes nomes”, com mais protótipos de alta fidelidade. Ele enfatiza o controle de versão e se orgulha de seus recursos de colaboração e feedback em tempo real. Como o aplicativo da Marvel, ele também tem animação, incorporação de protótipos, demonstrações no dispositivo e muito mais.
Além disso, eles compraram recentemente o Silver Flows, uma ferramenta que integra a funcionalidade de prototipagem com o Sketch. Eles pretendem usá-lo para integrar o Sketch com seu software on-line.
Há um plano gratuito, mas você só pode criar um único protótipo. Depois disso, você pode começar em $ 15USD por mês.
Justinmind parece deliberadamente voltada para a criação de protótipos de aplicativos de alta fidelidade. O site também menciona a criação de protótipos de sites responsivos. Também há demonstrações no aplicativo.
O preço atualmente começa em US $ 19 por usuário, por mês, se você pagar anualmente.
Marvel App é um aplicativo enorme (um dos "grandes nomes" em protótipos) com um plano gratuito e preços moderados para todas as atualizações. Os recursos notáveis incluem: suporte para Photoshop e Sketch, sincronização com o Drive e o Dropbox, incorporação de protótipos em páginas da Web) e recursos que transformam seus protótipos em apresentações animadas.
Este é sobre protótipos de alta fidelidade, com certeza.
Axure é um pouco estranho com recursos para prototipagem de baixa e alta resolução. é ainda mais estranho, porque é um aplicativo de desktop com um preço único. Ele é projetado para usuários corporativos e grandes equipes, com recursos para escrever sua própria documentação, gerenciamento de projetos e muito mais.
As edições padrão chegam a US $ 289 por licença.
HotGloo tem tudo a ver com estruturas de arame e protótipos de baixa a média fidelidade. Começou basicamente como um aplicativo de wireframing, principalmente, mas a funcionalidade para protótipos mais avançados está lá.
Onde outros aplicativos se concentram em aplicativos de prototipagem, o HotGloo começou com web designers. Então, você pode fazer isso também.
Os planos começam em $ 14USD por mês e esse plano pode incluir até 10 pessoas colaborando.
Annnnnd estamos de volta para a prototipagem de alta fidelidade com Proto.io . Ele tem interações complexas, animação, exportação, impressão, incorporação e demonstrações de dispositivos embutidas. Os preços começam em $ 24USD por mês, mas há uma avaliação gratuita de 15 dias se você quiser dar um giro.
Solidificar é trazido para nós pela Zurb, a mesma empresa que faz a estrutura da Fundação. Ele é projetado para lidar com (e obter feedback) tudo, desde esboços a protótipos e maquetes de alta fidelidade.
Em vez de se concentrar em animação e outras ferramentas de apresentação, o Solidify oferece uma abundância de recursos de teste do usuário. Você pode executar testes pessoalmente ou remotamente e compartilhar os resultados com sua equipe.
POP distingue-se de outros aplicativos, ajudando você a criar um híbrido de esboços de armação de arame e protótipos digitais. Você começa tirando fotos de seus esboços com um iPhone, um telefone Android ou um telefone com Windows e transforma esses desenhos em um protótipo interativo.
Se você fizer a maior parte do seu trabalho em papel, poderá ser uma ótima maneira de compartilhar os resultados. O serviço é gratuito para dois projetos e os planos começam em $ 10USD por mês.
Flairbuilder é outro aplicativo de desktop, embora tenha um visualizador on-line para projetos. Parece voltado para wireframes e protótipos de média fidelidade. Ele tem recursos que permitem adicionar interação, fazer demonstrações no dispositivo e enfatiza o design baseado em grade.
O preço é de uma taxa única de US $ 99,00. Isso é íngreme, claro, mas muito mais barato que o Axure.
Flinto na verdade tem duas versões: há um aplicativo para Mac e uma versão Lite baseada na web. A diferença? A versão para Mac traz animações, recursos e interações mais complexas para a tabela. Ele também permite que você importe seus ativos do Sketch, o que a versão da Web não pode fazer.
Custa $ 99USD como compra única. Curiosamente, a versão Lite (que custa 20USD por mês) inclui uma licença para a versão desktop, dando-lhe o melhor dos dois mundos.
UXPin é um aplicativo de prototipagem de fidelidade média a alta com todos os recursos que esperamos. Como alguns dos outros, também tem colaboração em tempo real, recursos internos de teste de usabilidade e gerenciamento de projetos.
Ao contrário de outros aplicativos, o UXPin pretende ser uma loja de design completa. Como em, você pode pular o Photoshop, Sketch, ou o que você tem, e transformar suas molduras em maquetes. Isso é ambicioso para dizer o mínimo, mas se funcionar como prometido, posso ver que isso é útil para muitos designers.
O preço começa em US $ 19,99 por mês, por usuário.