Olá pessoal. Tudo bem? Eu sou o Leonardo. Eu sou Fund Changer na Taqtile. E nesse vÃdeo a gente vai conversar um pouco sobre ferramentas de prototipação. A ideia aqui é entender um pouco melhor o que é uma ferramenta de prototipação. Vamos citar aqui alguns exemplos, não dá para falar sobre todos porque a diversidade de ferramentas no mercado hoje é muito grande. Então com base nisso, eu criei alguns cenários onde ocorrem mais a necessidade de se fazer o protótipo, e aà eu elenquei algumas ferramentas para falar pouco mais sobre elas. Uma ferramenta de prototipação, ela é uma ferramenta que te ajuda a tornar a criação deste produto mais rápido e muito mais eficaz. Os protótipos eles demonstram as suas ideias e ao fazê-lo podem mudar a norma como você projeta. Bom, então sobre as ferramentas que nós vamos conversar aqui hoje vamos começar pelo Sketch. O Sketch é uma ferramenta de design baseada em vetor, que te ajuda a criar interface de forma mais rápida e mais intuitiva. Então pensa ele no Photoshop misturado com o Illustrator, só que ele é muito mais leve e tem uma gama muito maior para você criar artboards e ter projeto muito maior dentro de um software só. Uma outra caracterÃstica, que é uma boa vantagem quando se usa uma ferramenta dessa, é as vezes a gente ter a preocupação na hora de escolher, pois não tem muito suporte, ou não tem muitas pessoas usando, e o no caso do Sketch é diferente, pois a comunidade é muito grande, é muita ativa. Arrisco até a dizer que é uma das maiores destas ferramentas de hoje dia. Uma outra caracterÃstica que chama bastante atenção no Sketch, é a função de sÃmbolos. Porque ela chama atenção para o caso de prototipação, para esse caso especÃfico. Dado que eu vou utilizar o mesmo componente visual, em várias telas, fica muito mais fácil se eu precisar fazer uma alteração, eu alterar em lugar só e essa alteração ser replicada todos os pontos aonde está sendo usado o componente. E essa é a vantagem do sÃmbolo. Até então em algumas ferramentas você tinha que fazer componente, ia colocando de tela tela onde você ia precisando, só que agora com os sÃmbolos você vai e consegue ter componente, usar este sÃmbolo vários lugares, e a hora que você altera este sÃmbolo é alterado todos os lugares ao mesmo tempo. E pensando também no caso onde se esse protótipo virar um produto mesmo, você já tem toda uma base componentizada para criar o seu design system, criar o seu próprio guideline, por exemplo. O que facilitaria muito já ter essa base e para dar manutenção é muito mais fácil. Um ponto a ser considerado sobre o Sketch é que ele está disponÃvel somente para usuários de Mac. Então se você é usuário de Windows, infelizmente você não vai conseguir ter essa ferramenta por hora. Outro ponto também a ser considerado é que ela custa 99 dólares a licença e ela deve ser renovada anualmente. Bom, uma outra ferramenta que é muito utilizada para prototipação em casos mais de interação de telas é o InVision. O InVision, ele integra muito bem com os outros aplicativos, inclusive com o Sketch. A diferença dele para o Sketch é que você não cria o design si no InVision. você coloca todas as suas artes, você faz upload de suas imagens todas lá e você consegue criar as interações entre as telas. O legal disso é que isso oferece uma liberdade muito grande para o designer, projetar, não só para quem está projetando, mas quem ajuda a revisar, quem ajuda a testar, A hora que você consegue compartilhar todo esse protótipo, essa fase de criação com todo mundo do projeto, não só os designers, como os desenvolvedores e outros membros, isso facilita muito a comunicação. Uma outra vantagem é que os recursos de colaboração do projeto é muito boa. Um dos recursos que ele tem, que é o free hand, você coloca umas telas na qual você gostaria da opinião dos membros da equipe, ou até de outras equipes, isso fica online, você disponibiliza o link e as pessoas conseguem apontar, comentar, dar sua opinião. E isso é um feedback muito rápido, tempo real. Então você não precisa mais ficar perdendo tempo marca uma reunião, ou imprime o seu Sketch, ou imprime o seu design, manda para a pessoa olhar, escrever. Não, esse é processo tempo real que facilita muito. Uma outra vantagem que o InVision fornece, é o fata de ele ter uma integração muito boa para dispositivos móveis. Então você está criando o seu protótipo, você já consegue testar ele no mobile. Isso é uma coisa que nem todas as ferramentas estão disponÃveis e que facilita bastante você ter feedback real dependendo de sua aplicação. Uma das vantagens do InVision, é que ele não está atrelado a uma plataforma só. Atualmente, como ele é um ambiente web, você consegue acessar entrando de uma ambiente Mac quanto Windows. Uma outra vantagem é que se você quer só testar, começar a fazer com projeto seu, pessoal, você consegue fazer isso sem gasto nenhum. O InVision, até um projeto é grátis, então você não paga nada e tem todas as funcionalidades. Se você começar a usar mais e começar a colocar mais de um projeto, então até três projetos são 15 dólares por mês. Se você quiser projetos ilimitados, eles têm plano de 25 dólares mensais. E se você quer na sua empresa, ou na sua faculdade, para onde tenha mais de uma pessoa, são 99 dólares mensais. Uma nova ferramenta que está surgindo hoje, está ganhando espaço no mercado é o Figma Para vocês terem uma noção, o Figma, ele está sendo utilizado nas aulas de design das universidades de Stanford e de Berkeley. Ela tem uma interface bem parecida com o Sketch e ela tenta trazer uma inovação, que é essa parte colaborativa do projeto. Como eu citei na parte do InVision, ela faz isso muito bem também. O feedback é tempo real, todo mundo podendo comentar, todo mundo do projeto está participando, toma a decisão junto. Então isso é uma coisa que tem cativado bastante os designers na hora de escolher essa ferramenta para fazer o seu protótipo. Ela também é free até três projetos. Então esse é outro ponto onde vale a pena fazer teste, porque pode ser que ela atenda as suas necessidades. E se você passar de três projetos você paga 12 dólares por projetos inventados por mês. Então essa aà é uma boa vantagem também. E diferente do Sketch, ela é uma ferramenta que está disponÃvel para Windows e Mac. Então outro ponto a ser levantado que talvez influencie na sua decisão de escolher esta ferramenta. Uma outra ferramenta que também vem ganhando espaço, até pelo fato de a dona da empresa que está desenvolvendo esta ferramenta já ser famosa no mercado, que é a Adobe, é o Adobe XD. O Adobe XD é uma mistura do Sketch com o InVision e o plugin do Sketch, que é o Scratch. Então você consegue criar o seu design lá, ou também importar e fazer as interações até um pouco mais elaboradas que o InVision, com algumas animações, e colocar conteúdo também. Uma outra vantagem do Adobe XD é que a conectividade com os próprios aplicativos da Adobe é muito boa. Então se você tem o costume de usar o Photoshop, ou o Illustrator, ou se você está fazendo algum protótipo de alguma revista, alguma coisa nessa linha, ou design, a conexão é muito boa, é muito fácil você passar as telas de aplicativo para o outro. Você não precisa ter que salvar, abrir arquivo; é simplesmente sincronizar os arquivos e ele já transfere de um aplicativo para o outro e isto tem ajudado bastante. Bom, ele está também disponÃvel para as plataformas Mac e Windows, o problema é que ele não é free, como nada da Adobe atualmente. Se você for usar só o Adobe XD, é valor de 35 reais mensais. Uma outra ferramenta que é muito utilizada por designers que tem algumas skills de front end é o Framer. O Framer consegue fazer muita coisa, desde a parte do Sketch, ele tem a parte de design interno dele, você consegue fazer o design dentro dele, você consegue fazer interações de todos os nÃveis, desde o mais simples, aonde você faz interação, navegação telas, até animações de camadas. Isso é fantástico. Você consegue criar um protótipo onde a fidelidade dele para o usuário final pode se tornar muito parecido com a aplicação real mesmo. Não vai ficar parecendo algo muito superficial. Se você tiver tempo, se você tiver um conhecimento, a ferramenta exige que você programe. Se você precisar fazer animações mais detalhadas, mais complexas, você consegue fazer elas de diversas opções, porém ela é código. Então você vai ter que programar CoffeeScript, que é a linguagem que eles interpretam e aà você consegue fazer animações muito detalhadas e que torna a experiência muito melhor, mas isso também vai depender da sua necessidade. Isso é uma coisa que acaba contando. Um pesar desta ferramenta é que, como o Sketch, o Framer também também só está disponÃvel para Mac. Então usuários de Windows por enquanto não tem essa opção. Bom, depois de termos conhecido um pouco sobre cada uma das ferramentas já citadas aqui, eu criei alguns cenários para tentar ajudar vocês no momento que vocês forem tomar a decisão para escolher a ferramenta. Geralmente surge a dúvida, 'Bom, qual ferramenta eu devo escolher? Qual ferramenta é a mais adequada para a minha necessidade?' Então eu criei alguns cenários aqui e tem gráfico, eu vou mostrar para vocês aonde qual situação, se encaixa melhor cada uma das ferramentas citadas, está bom? Se vocês notarem nesse gráfico, tem uma escala ali entre velocidade e interatividade. Então, quanto mais para cima, mais veloz é a ferramenta, você vai ter mais praticidade, velocidade de fazer esse protótipo. Porém, quanto mais para a direita, mais interativo é. Pode perceber que, conforme fica mais para a direita, mais baixo ele vai ficando. Eu separei umas seções ali entre ótimo para wireframes estáticos, ideal para protótipos navegáveis e interação de camadas. Qual a sua necessidade? Se você for testar apenas wireframe, onde é uma telinha simples que você vai imprimir no papel ou vai ser seguido ali na tela do computador. Na área interativa, só o seu usuário olhar, testar, pronto, o Sketch, o Figma, o Adobe XD está de excelente tamanho. Se você vai fazer um protótipo onde você precisa de navegação, você precisa de interação entre as telas, o recomendável é você usar o Invision ou até o XD também. Se você quer um protótipo onde tenha a interação bem complexa, bem minuciosa, onde você quer animações muito parecidas com a plataforma que você está testando. Por exemplo, se você está fazendo protótipo de um aplicativo e você quer que ele se comporte exatamente com o material design do Google ou com os guidelines da Apple, você consegue fazer essas animações perfeitamente idênticas como eles recomendam. Porém a curva de aprendizagem é um pouquinho maior, mas a fidelidade vai estar bem cima do que você espera. Outro cenário é que você quer velocidade mas você não tem muito tempo para gastar fazendo protótipo, porém você preza muito a fidelidade, que é o que eu estava citando o exemplo do Framer. Se você quer algo rápido e fácil mas com interações bem simples, navegação bem simples, de novo, eu mantenho o Invision ali como o mais indicado. Agora se você quer maior controle estético, com resultados visuais melhores, mas não quer tanta interação, Estão ali o Adobe XD, o Sketch ali estão lado a lado e você consegue fazer isso muito bem. Agora, se você quer interações detalhadas, bem fiéis à quela plataforma, à quele guidelie ou uma tecnologia especÃfica que você: eu quero que essa interação seja idêntica, esse protótipo tem que realizar exatamente como se ele estivesse usando a aplicação, então o Framer é uma das indicações. Porém você perde em relação à velocidade. Terceiro cenário é onde seria: você preza muito pela acessibilidade e a interatividade. Se a sua necessidade for trabalhar com acessibilidade, então você vê que a ordem do gráfico muda: o Figma sobe, o Sketch se mantém ali nos 50 mais ou menos. Pois, nessa questão de acessibilidade, o Figma proporciona coisas já pré-prontas, coisas muito parecidas com guideline, com as plataformas já existentes e isso facilita bastante. Agora, se você quer acessibilidade e protótipos navegáveis. Se você já usa as ferramentas da Adobe, fica muito mais fácil você fazer as interações com o Adobe XD. Isso facilita bastante, da mesma forma que, se você criar o seu design no Sketch e for usar o InVision, também é uma combinação muito boa, onde você consegue fazer o seu design, já sincronizar com o Sketch e já criar as suas telas, já lincar as suas telas e criar a sua navegação. Agora, se você precisa, se você quer que o seu protótipo tenha interações entre camadas e bem detalhadas, onde você separa as camadas, os botões vão entrar botão por botão, a bolinha entra girando, a tela roda, sim o Framer é o cara para isso, mas a velocidade não é fator que você vai ganhar e a acessibilidade também, porque por mais que ele tenha a própria ferramenta de design dentro dele, se você não for bem detalhista, ele não te proporciona nada muito na mão relação ao design. Você faz tudo direitinho no Sketch, faz ele lá dentro e garanta isso e você vai ganhar muito na interatividade. E um quarto cenário é onde você preza pela acessibilidade, mas também pela fidelidade. E aà você vê que o gráfico muda um pouco pois para se manter rápido e fácil, o Invision sempre vai ser uma das opções que vai sempre estar ganhando. Sim, ele é sempre muito rápido, muito simples, é você fazer o upload das suas fotos, das suas imagens e lincar. É basicamente isso. Agora, quando você precisa tratar alguma coisa e você quer fazer tudo numa ferramenta só, você pode usar o Adobe XD, você fazer com o Figma. O problema é que, se você usar só o Sketch, você não consegue ter interação. Você tem só ali o seu Sketch, o seu design mas sem interação nenhuma. Então, você precisa de outro software. Agora, se você quer fazer tudo o mais próximo possÃvel, o mais fiel à sua plataforma, desde o design até a interação, o Framer é uma das indicações. Porém é necessário saber, você ter alguns skills de front, você vai precisar programar, não tem jeito. Bom, pessoal, no vÃdeo de hoje nós falamos sobre essas ferramentas de prototipação, falamos sobre alguns cenários, espero que vocês tenham gostado. Até a próxima!
