Framer: criando protótipos de alta fidelidade para aplicativos | Alura Cursos Online
Primeiras aulas do curso Framer: criando protótipos de alta fidelidade para aplicativos
Framer: criando protótipos de alta fidelidade para aplicativos
Olá! Bem-vinda ou bem-vindo a mais um curso aqui da Alura. Meu nome é André Lisboa e eu sou professor de designer digital aqui da plataforma. Eu já trabalho nesse ambiente do design digital há mais de 5 anos e já desenvolvi diversos aplicativos e sites ao longo da minha trajetória. E, nesse curso aqui, nós vamos aprofundar um pouco nossos conhecimentos acerca da ferramenta do Framer e das microinterações.
Então, esse curso é voltado, principalmente, para você que já trabalha com Figma, já sabe mexer no Adobe XD, ou no Sketch, em algum desses programas, e agora quer ampliar um pouco os seus conhecimentos e criar protótipos cada vez mais realistas. E, também, é muito importante que, se você está vendo esse curso, você tenha feito o meu curso anterior de Framer, onde nós aprendemos conceitos mais básicos da plataforma e mais introdutórios.
Nesse curso nós vamos aprender o seguinte: primeiramente, nós vamos entender um pouco sobre o que são protótipos de alta fidelidade e de baixa fidelidade, porque nós vamos produzir nesse curso um protótipo de alta fidelidade, e nós temos que saber o que é isso que nós estamos produzindo.
E o curso é bastante ferramental. Nós temos apenas essa primeira aula, este primeiro capítulo mais teórico, e depois nós vamos cair dentro do Framer, vamos começar a criar nosso protótipo.
Ele se baseia no seguinte: nós temos aqui algumas telas feitas dentro da ferramenta do Figma que eu vou disponibilizar no material de apoio, para você utilizá-las como tela base para construirmos as interações. E esse aqui é um aplicativo de médicos, então por meio desse aplicativo, o médico pode fazer login, ele pode ver quem são os pacientes, quais são as consultas que ele tem marcadas, e ele também pode marcar consultas via telefone.
Então ele pode, por dentro do aplicativo, ligar por vídeo, fazer uma ligação de vídeo com esse paciente. Também terão relatórios, quem são os pacientes, onde esse paciente mora (caso tenha que ir na casa desse paciente), enfim, é um aplicativo voltado para esse mundo da medicina.
O que nós aprenderemos será o seguinte: ao longo desse curso, nós vamos focar bastante nos packages do Framer. Então, nós vamos aprender o que são os packages e vamos trabalhar muito com eles, para criarmos interatividade. Primeiro, nós vamos dar uma passeada rapidamente no aplicativo para ver o que nós vamos produzir.
Nós temos essa tela de login aqui, onde eu posso digitar "andré@alura.com.br", e posso por aqui "alura1234". Aqui nessa minha tela nós vamos aprender a fazer a visualização e desvizualização da senha e nós vamos fazer isso, justamente, utilizando códigos em react, porque o Framer trabalha com essa linguagem e ele permite que você utilize códigos para auto customização dos seus protótipos.
Além disso, nós vamos também aprender sobre o pacote do Switch - eu vou clicar no botão "entrar" e entrar rapidamente. O pacote do Switch é um pacote bem legal, e nele (o package que eu estou querendo dizer) nós conseguimos criar interações entre telas.
No caso aqui, eu tenho dois estados principais: que é essa minha tela inicial, e essa minha segunda tela aqui. Isso foi produzido utilizando o pacote do Switch, um pacote bem versátil para nós criarmos as interações. Além disso, aqui na página da home também, você está vendo que esse elemento que está aqui (o "hoje"), conforme eu escrollo, fica fixo no topo?
Repara no "amanhã", quando eu chegar no topo também no "amanhã", ele substitui aquele "hoje". Repare agora na "quarta-feira" o que que vai acontecer: a mesma coisa. Nós vamos aprender a utilizar isso aqui utilizando o package do sticky headers, então, já fica anotado algumas coisas que nós vamos aprender.
Além disso, vamos clicar nessa tela de relatórios, para ver um relatório interativo utilizando o package do Animator. Nós vamos aprender a fazer isso também. Ainda na tela da home, nessa parte consultas, vamos aprender a ligar por vídeo, e olha só o que vai acontecer: vai carregar a minha câmera, a câmera do dispositivo que eu estou mexendo.
Isso é bem legal, nós conseguimos trazer muita realidade para os protótipos que estamos produzindo. Então, bem legal essa funcionalidade aqui.
Por fim também, vamos aprender essa parte de clientes: se eu clicar num cliente, nós vamos aprender a utilizar um mapa interativo. Então, se eu clicar nesse mapa aqui, ele vai expandir para mim em tela cheia e vai mostrar o mapa onde eu consigo mexer e navegar por onde quiser.
Posso dar zoom out, zoom in, enfim é bem legal. Isso que nós vamos aprender, trazendo mais realismo para esse protótipo que nós estamos criando.
E por fim, nós vamos aprender a exportar isso aqui, dessa maneira que estamos vendo, e também vamos aprender um pouco sobre o handoff, que é como ter uma comunicação boa entre o time de design e o time de desenvolvimento.
Espero que você tenha gostado de todo o conteúdo que está preparado para você ao longo desse curso e eu te espero na próxima aula, onde nós vamos traçar um pouco o roteiro para ver todas as aulas que veremos, vamos destrinchar um pouco a ementa deste curso. Eu espero você na próxima aula.
Introdução - Overview
Olá! Nós vamos agora, nesse vídeo, dar uma olhada, mais ou menos, em toda a ementa que está preparada para esse curso. Vamos começar pela primeira aula, que é a aula de introdução, que é essa aula que nós nos encontramos. Nós já vimos a 1.1, que é a introdução de fato e estamos aqui na Overview, que estamos dando uma passeada pela ementa deste curso.
Depois que terminarmos esse vídeo, nós teremos um conteúdo teórico, que é falando de protótipos de alta fidelidade. Então, nessa aula aqui, nós vamos falar um pouco sobre o que são protótipos de alta fidelidade, o que são protótipos de baixa fidelidade, para entendermos o que nós vamos fazer. Afinal, nós vamos criar um protótipo de alta fidelidade ao longo desse curso.
Depois, daqui para frente, da aula 2 para frente, todos esses vídeos serão voltados para meter a mão na massa dentro da plataforma do Framer e de fato criar esse aplicativo, esse protótipo de alta fidelidade.
Então aqui, na segunda aula, nós vamos conhecer os pacotes principais, os packages do Framer, porque este curso vai ter um forte peso em conhecer pacotes criados por terceiros que não necessariamente fazem parte da equipe do Framer para tornar o nosso trabalho melhor, para dar mais funcionalidades, mais disponibilidades de funcionalidades da plataforma. Então é bem legal a utilização desses pacotes.
Primeiro no 2.1, nós vamos conhecer o pacote do Switch. O pacote do Switch, se nós dermos uma olhada aqui (vou mostrar rapidamente), é esse pacote onde, na home, eu criei dois estados. Eu tenho esse aqui que é o Switch Home que é linkado em dois estados: a home zero e a home um.
A partir desse pacote, eu faço a transição entre a tela inicial e a segunda, utilizando a opção "Switch to State Action". Vamos aprender tudo isso quando nós formos 'meter a mão na massa' de fato, nessa funcionalidade.
Depois disso, nós vamos criar componentes junto com status bar. Aqui você vai notar que o relógio do meu computador está 16:03 e aqui está exatamente o horário que está no meu computador. Isso não foi feito sem querer, é um componente que nós utilizamos para pegar o tempo real que o usuário está vendo.
Então, podemos criar mais interatividade dessa maneira e também vamos aprender a criar componentes. Você pode ver que eu tenho aqui (no menu à esquerda), um componente chamado status bar comum, que eu mesmo criei, e aqui nessas pastas, se encontram cada um desses pacotes que nós vamos instalando no nosso projeto.
Depois, nós vamos criar relatórios interativos. Vamos ver aqui? Se eu clicar aqui na parte de relatórios, você vai ver que ele vai carregar aqui para mim uma telinha com esses valores se mexendo. Ficou um pouquinho travado, não deu tanto para ver, mas nós estamos utilizando o pacote do Animator, onde conseguimos pegar um path (um caminho de um gráfico), e a partir dele fazer uma interação.
Vou clicar na parte de relatórios novamente, para darmos uma olhada. Está vendo que está um pouquinho lento, porque está gravando também ao mesmo tempo, mas ele cria essa interação bem legal, utilizando esse pacote do Animator. Vamos dar uma olhada aqui, para vermos como isso se comporta.
Você está vendo que eu tenho os gráficos aqui do lado de fora, e dentro, eu tenho os elementos chamados Animator, que estão conectados nesses gráficos. Então, ele funciona dessa maneira.
Partindo para o terceiro capítulo, nós vamos continuar conhecendo mais pacotes e interações diferentes. E uma delas aqui, na 3.1, nós vamos aprender a habilitar a câmera do dispositivo. Você lembra que na aula introdutória eu mostrei que tem a possibilidade do médico ligar para o seu paciente e apareceu a minha carinha?
Então, exatamente isso, nós vamos utilizar o componente do câmera mais para trazer essa funcionalidade. Estão me vendo aqui, estou aparecendo aqui graças a esse componente que nós vamos aprender a utilizar também.
E, posteriormente, nós vamos inserir mapas interativos. Então a 3.2 e a 3.3 são focados em incluir um mapa. É bem legal também, essa é uma outra funcionalidade, um pacote do Framer que é bem interessante.
Vou mostrar aqui para você rapidamente, com ele eu consigo: criar o mapa, eu consigo customizar o mapa com as cores que eu quero, com a tipografia que eu quero, com tudo que eu quero, ou então pegar o mapa pronto e trazer para dentro dos Framer com interatividade.
Então, eu posso mexer nesse mapa: posso dar zoom in, eu posso dar um zoom out, eu posso ver todas as informações. Vou mostrar aqui rapidamente (está demorando um pouco para carregar), mas jogando para o lado, cheguei aqui no mapa expandido, e você vai ver que eu consigo mexer o quanto eu quiser nesse meu mapa.
Então se eu quiser dar zoom in, zoom out, você está vendo que tem aqui esse ícone mostrando uma localização. Nós vamos aprender tudo isso, a inserir esses elementos aqui.
Você viu: deu um zoom out, ele mostrou outros lugares. Posso ir navegando por aqui, ele vai carregando outras áreas. Enfim, olha o Museu do Amanhã, Museum of Tomorrow, acho que depois dá para mudar, isso é bem tranquilo. Então nós vamos aprender a fazer isso nos mapas interativos, usando o Map Box.
Depois, na quarta aula, nós vamos finalizar esse protótipo. Nós vamos criar um menu fixo interativo. Se você lembrar também da nossa aula inicial, do nosso vídeo introdutório aqui do curso, eu criei lá na página da home alguns menus fixos que conforme esse elemento vai chegando no topo, ele fica fixo lá.
Por exemplo, o "hoje", se eu começar a escrolar, ele não estava fixo no topo, mas eu escrolei, quando chegou ao topo ele ficou fixo. Olha o "amanhã": vou escrolar. Tomou o lugar do hoje, então é bem legal. O quarta-feira quando chegar, você vai ver, troca de lugar também. Bem interessante essa funcionalidade.
E por fim, nós vamos usar códigos para criar componentes. Então, o Framer é bem bacana porque conseguimos utilizar códigos na linguagem do react, que é um framework de JavaScript, uma linguagem de programação, como se fosse um plugin do JavaScript e, a partir dele, nós conseguimos escrever o que quisermos por código, e temos muita flexibilidade para criar transições, interações muito customizadas, a partir dos códigos.
Então aqui, nós tivemos uma leve introdução, uma introdução bem leve mesmo a esse conteúdo. Nós fizemos aqui essa "área do login", onde eu posso digitar uma senha que não dá para ver e se eu clicar aqui, eu consigo ver o que eu escrevi.
Isso tudo eu estou utilizando (dentro da pasta login criada no menu à esquerda), se descermos aqui um pouco, deixa eu clicar aqui só para vermos um pouco melhor, está vendo que eu tenho esse input, e aqui no meu input tem esse overrides, que tem um file (um arquivo) e um override, e aqui tem o edit code.
Isso é, justamente, porque eu criei um código dizendo essas informações. Nós não vamos criar isso aqui do zero, nós vamos pegar um que já existe e vamos adaptar para o nosso projeto, só para deixar claro.
E para finalizar, na última aula nós vamos exportar e concluir. Então, nós vamos aprender a criar um link para visualizarmos. Você pode ver que quando eu clico aqui, está aparecendo a bolinha como se fosse o meu dedo mexendo no dispositivo. Bem legal isso que nós vamos aprender a fazer.
E, por fim, nós vamos aprender a parte do handoff, que é essa ferramenta onde eu posso ver os códigos, bem interessante. Não só os códigos de elementos estáticos, mas os códigos das interações entre uma tela e outra. Bem bacana tudo isso.
E por fim, vamos concluir o curso para dar uma recapitulada em tudo que nós aprendemos. Espero que você tenha gostado de todo conteúdo que está preparado para você ao longo desse curso, e eu te vejo na próxima aula, onde nós vamos começar, de fato, a aprender um pouco sobre os protótipos de alta fidelidade para introduzir o nosso curso de Framer. Vai ser uma aula bem legal e eu espero você lá.
Introdução - Protótipos de alta fidelidade
Agora nós vamos entender um pouco sobre o que são protótipos de alta fidelidade.
Nesse curso aqui de Framer, nós vamos trabalhar com essa ferramenta do Framer, que permite que nós criemos protótipos muito parecidos com o que seria um produto final, com um aplicativo já funcional, funcionando de fato, um site já no ar. Então, para isso temos que entender um pouco o que é isso que estamos produzindo, um protótipo de alta fidelidade.
Vamos lá? Para começar, vamos falar primeiro dos protótipos de baixa fidelidade, porque para entender o que os que são de alta, primeiro vamos falar sobre os que são de baixo fidelidade, que são protótipos que visam definir, de modo simples, como seria a interação de um usuário com um projeto, não tendo nenhuma, ou quase nenhuma preocupação com elementos ligados ao design.
Aqui (eu vou mostrar um exemplo para você entender um pouco), seria no caso, um protótipo de baixa fidelidade, onde aqui é uma folha de papel impressa com alguns elementos cinza e está dentro de uma casca, no caso acho que de um tablet ou um computador (acho que é mais de um tablet). Você pode ver que isso é muito utilizado para fazermos testes rápidos.
Então, por exemplo, o usuário clica aqui (em um dos elementos representados no papel) e simula um clique nesse elemento. Nós pegamos esse papel, puxamos e temos sempre um papel abaixo que seria a tela seguinte. Então, funciona dessa maneira para validação rápida.
Um protótipo de alta fidelidade, que é o que, inclusive, nós vamos produzir ao longo do nosso curso, é uma representação interativa. Ou seja, que têm cliques, tem interação, tem motion, tem funcionalidades de um produto, baseado no computador ou em dispositivos móveis, porque vamos trabalhar ou para computador, para celular, enfim.
Esse protótipo já apresenta maior semelhança com o design final, em termos de detalhes, funcionalidades, interações, etc. Então, muitas vezes o usuário (a pessoa que está mexendo nesse protótipo), vai achar: "Caraca, olha só! Isso aqui é o aplicativo no ar, já funcionando. Posso baixar na Play Store?" Não, é só um protótipo, não está pronto ainda.
"Caraca, parece que eu tenho um aplicativo realmente, de fato, funcionando". Isso porque ele tem alto grau de similaridade com o produto final, então ele permite testes muito mais precisos.
Vou mostrar um exemplo de um protótipo de alta fidelidade, que você pode ver nesse vídeo. Isso aqui não é um aplicativo funcionando, é um protótipo que mostra todas as interações, tudo muito detalhado. Isso aqui é muito interessante para utilizarmos quando quisermos fazer uns testes mais elaborados, mais detalhados.
E qual é o melhor método para nós utilizarmos? Vamos trabalhar com protótipo de alta fidelidade, baixa? O que nós fazemos aqui no nosso trabalho? Depende muito, porque os dois métodos são eficazes, dependendo da etapa que você se encontra no seu produto.
Se você está numa etapa mais de validação da minha ideia, estou tendo ainda ideias de como seria o meu produto, posso muito bem utilizar protótipo de baixa fidelidade, que é mais para entender como os usuários estão com relação às suas expectativas, em relação ao produto que estamos trabalhando, e ter insights de novas ideias.
Então, de baixa fidelidade é um teste muito rápido, mais para ideação. Enquanto que o protótipo de alta fidelidade já é algo mais final, onde conseguimos testar de forma mais detalhada tudo o que o usuário está interagindo, porque ele já tem bem mais detalhes, ele se assemelha muito com o produto final.
E por que nós vamos utilizar um protótipo de alta fidelidade? Primeiro, para testarmos o produto que estamos trabalhando antes de lançar. Então, é mais fácil produzirmos um protótipo bem real mesmo, de alta fidelidade, onde simule todas as interações, todos os cliques: "a fonte está certinha, as cores exatamente como eu queria".
Então, dessa maneira, conseguimos testar para encontrar erros antes de lançar, de fato, porque quando lançamos: "Caraca, enxurrada de erros", mil pessoas reclamando! Então, fazemos esse teste com o protótipo de alta fidelidade para termos uma noção maior dos erros, das coisas que não estão tão redondas.
E outra coisa bem interessante, para criarmos apresentações: "quero mostrar para alguém essa minha ideia aqui, como eu vou fazer para mostrar?" Faço um protótipo de alta fidelidade, aí mostra: "olha só como seria essa interação aqui que eu planejei". Então, é bem interessante para nós fazermos a apresentação de funcionalidades.
Os benefícios são: testes mais detalhados, como eu comentei, porque conseguimos ter um teste bem mais rico em detalhes, porque todos os elementos estão muito similares ao produto final.
[ ] Então conseguimos pescar que: "aquela interação ali, com o elemento indo naquela direção, não foi muito boa. Será que podemos fazer de outra maneira?" Você consegue fazer testes bem detalhados.
E também, para uma melhor comunicação com os desenvolvedores, também é importante, entre o time designer e o time desenvolvimento. Muitas vezes estou pensando aqui numa interação que seria irada, seria bem maneira para colocar aqui no aplicativo. Mas como é que o desenvolvedor vai entender essa interação?
Está na minha cabeça, eu tenho que externar isso que está no meu pensamento. Então, usamos os protótipos de alta fidelidade para externar esse pensamento e falar: "você consegue fazer isso? Você acha que seria válido criar algo dessa maneira?"
Então, o time de design e o de desenvolvimento, ficam bem mais alinhados. [05:36] E também, óbvio, gera economia de tempo e verba, porque exatamente como eu comentei, se você consegue testar seu produto antes de lançar, você economiza tempo, porque depois você vai lançar de fato, e "caracas, mil erros, tenho que consertar tudo!". Você perdeu o maior dinheiro e o maior tempão.
E, consequentemente, também é caro fazer essas coisas. Designer custa dinheiro, desenvolvimento custa dinheiro, então, quanto mais rápido você descobrir os erros, melhor para você.
As desvantagens, que nós podemos considerar dos protótipos de alta fidelidade que, como eu comentei, eles são caros e trabalhosos porque realmente dá mais trabalho.
Você tem que pensar em toda funcionalidade. Você tem que pensar em todas as cores, tipografia, no design final e, além disso, nas interações: "quando clicar aqui, qual o tipo de movimentação: vai ser um ease in? Vai ser um ease out? Vai ser um movimento linear? Quantos milissegundos vai durar isso?"
Então, é mais trabalhoso, claro. E como é mais trabalhoso, é mais caro. E o segundo é bem similar ao primeiro, porque se é mais trabalhoso para fazer, quando tem erros, demora mais para consertar. Essa é uma das desvantagens.
E também, uma terceira aqui que eu levantei é que os participantes, se você estiver testando o seu protótipo com algumas pessoas, elas podem se sentir um pouco mais inibidas para darem feedbacks negativos, porque é algo que está pronto aí a pessoa pensa: "já está pronto, não vou falar mal".
Quando é um protótipo de baixa fidelidade: "Está no papel ainda, está começando agora, não tem problema falar mal". Então, a pessoa pode se sentir um pouco mais à vontade para críticas no protótipo de baixa fidelidade.
Espero que você tenha gostado dessa aula aqui, e na próxima nós vamos começar a meter a mão na massa no Framer, para produzirmos o nosso protótipo de alta fidelidade, aqui nesse curso. Espero você lá.
Sobre o curso Framer: criando protótipos de alta fidelidade para aplicativos
O curso Framer: criando protótipos de alta fidelidade para aplicativos possui 142 minutos de vídeos, em um total de 39 atividades. Gostou? Conheça nossos outros cursos de UI Design em UX & Design, ou leia nossos artigos de UX & Design.