Primeiras aulas do curso Framer: criando protótipos de alta fidelidade para aplicativos

Framer: criando protótipos de alta fidelidade para aplicativos

Introdução - Apresentação

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.

Imagem da interface do Framer com o projeto "Framer Intermediário" aberto, sendo exibidas sete telas criadas da aplicação. No caso esquerdo, há listas de itens com os elementos do projeto e outras ações.

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.

Imagem da tela inicial em um smartphone da aplicação "AluraMed" no Framer, com o nome "5.2 - Handoff" no canto superior esquerdo. A tela exibida possui uma ilustração digital da figura de uma pessoa com cabelos presos, com um dos braços levantados e punho cerrado, com um estetoscópio no pescoço e roupa branca de profissional da saúde. Abaixo, há uma mensagem que convida o usuário a inserir login e senha para acessar ou criar uma nova conta, com um botão de "Entrar" ao final.

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?

Imagem da tela de usuário em um smartphone da aplicação "AluraMed" no Framer, com o nome "5.2 - Handoff" no canto superior esquerdo. A tela exibida possui uma foto de perfil arredondada seguida de "    Olá Sônia". Abaixo, há alguns cards com nomes e fotos de pacientes, bem como horários de consulta contendo botões de "Ligar por vídeo",  "ligar por áudio" e "Ver endereço" em cada um.

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.

Imagem da tela de usuário em um smartphone da aplicação "AluraMed" no Framer, com o nome "5.2 - Handoff" no canto superior esquerdo. A tela exibida possui alguns cards com nomes e fotos de pacientes separados em "Hoje" e "Amanhã", bem como horários de consulta contendo botões de "Ligar por vídeo",  "ligar por áudio" e "Ver endereço" em cada um.

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.

Imagem da tela de chamada de vídeo em um smartphone da aplicação "AluraMed" no Framer, com o nome "5.2 - Handoff" no canto superior esquerdo. A tela exibida possui uma mulher com tranças compridas sorrindo em visão frontal preenchendo toda a área da tela, e outra janela menor com o instrutor em chamada de vídeo. Há botões de ação, como o de encerrar a ligação por exemplo.

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.

Imagem da tela de "detalhe do paciente" no Framer contendo um texto genérico, um mapa com um localizador e o endereço, e uma sessão de "próximas consultas" com cards de nomes de pacientes e botões de ação de "ligar por vídeo" e de "ligar por áudio".

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.

Imagem da tela de "Casa do paciente" no Framer contendo um mapa bidimensional com um localizador colorido em uma das ruas que possuem legenda com o nome.

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.

Imagem da interface do Framer com o nome do projeto "5.2 - Handoff" no canto superior direito, ao lado de botões de ação. Abaixo, no canto esquerdo da tela, há uma lista na aba "Layers" com a "Home1" aberta em destaque. Na área central de trabalho, há sete telas visíveis da aplicação, e a tela inicial aumentada em evidência com o texto "Olá! Acesse sua conta" do "AluraMed" contendo uma ilustração de uma pessoa de cabelos pretos e presos, com um braço levantado e punho cerrado, usando um estetoscópio e roupa de profissional de saúde. Abaixo, há os campos de login e senha com o botão "Entrar".

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.

Imagem da interface do Framer com o nome do projeto "5.2 - Handoff" no canto superior direito, ao lado de botões de ação. Abaixo, no canto esquerdo da tela, há uma lista na aba "Layers" com o item "Status bar comum" de "Home estados" aberta em destaque. Na área central de trabalho, há duas telas visíveis da aplicação, e a tela de usuário aumentada em evidência com o texto "Olá! Sônia" do "AluraMed" contendo uma cads de pacientes com nomes, horários e botões de "Ligar por vídeo", "Ligar por áudio" e "Ver endereço". Há uma guia centralizada nesta tela indicando a ação do instrutor.

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.

Imagem da interface do Framer com o nome do projeto "5.2 - Handoff" no canto superior direito, ao lado de botões de ação. Abaixo, no canto esquerdo da tela, há uma lista na aba "Layers" com o item "Animator2" de "Relatórios > Clientes atendidosgrupo" em destaque. Na área central de trabalho, há cinco telas visíveis da aplicação, e a tela de "Seus relatórios" aumentada em evidência com o gráfico de "Clientes Atendidos", cujo eixo horizontal vai de domingo a sábado, e eixo vertical de zero a doze, e duas linhas de legenda "visita ao paciente" e "ligações de vídeos" que oscilam, sendo a primeira com uma ascensão central e pico na quarta-feira, e a segunda com um pico na sexta-feira. Abaixo do gráfico, hádois outros com o "tempo médio de cada consulta" com o valor "52 min" e "Clientes atendidos" com o valor "22".

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.

Imagem da interface do Framer com o nome do projeto "5.2 - Handoff" no canto superior direito, ao lado de botões de ação. Abaixo, no canto esquerdo da tela, há uma lista na aba "Layers" com o item "Animator2" de "Relatórios > Clientes atendidosgrupo" em destaque. Na área central de trabalho, há cinco telas visíveis da aplicação, e a tela de chamada por vídeo aumentada em evidência com a imagem do instrutor em ligação por vídeo, com uma foto em um círculo de uma mulher em visão frontal. Nesta tela, há botões de ação, como o de abrir o microfone e a câmera, bem como de desligar. No caso direito da tela, há a aba "Code" com os códigos desta parte em evidência.

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.

Imagem da interface do Framer com o nome do projeto "5.2 - Handoff" no canto superior direito, ao lado de botões de ação. Abaixo, no canto esquerdo da tela, há uma lista na aba "Layers" com o item "Mapa agendado" aberto em destaque. Na área central de trabalho, há a tela com o mapa aberto na seção "Casa do Paciente" contendo um marcador de localização em uma das ruas. As telas exibidas possuem elementos que se relacionam, como o "tempo médio de cada consulta" e "número de consultas".

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.

Imagem da interface do Framer com o nome do projeto "5.2 - Handoff" no canto superior direito, ao lado de botões de ação. Abaixo, no canto esquerdo da tela, há uma lista na aba "Layers" com o item "Home estados" aberto em destaque. Na área central de trabalho, há dezesseis telas visíveis com suas respectivas relações representadas por linhas. Há uma última em evidência com os cadsa de pacientes.

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.

Imagem do Framer com o nome do projeto "5.2 - Handoff" no canto superior direito, exibindo a simulação de uma tela de smartphone com a parte de "Detalhes do paciente" aberta. Sobre o texto de "Anotações sobre a paciente", há um círculo transparente representando a interação com a tela pelo touchscreen. Abaixo, há um mapa bidimensional com o título "endereço", seguido de "próximas consultas".

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.

Imagem com uma fotografia colorida com close de um par de mãos segurando um smartphone, e um dos dedos está pressionando o canto superior esquerdo da tela onde há o texto "Top Challenges". Abaixo deste título, há três cards com títulos "Marathon Running Prep"e um botão de "Seguir" ilustrado por uma fotografia de um homem em visão lateral correndo, seguido de "Month of Illustrations" e de outro card com texto ilegível.

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.

Matricule-se e comece a estudar com a gente hoje! Conheça outros tópicos abordados durante o curso:

Aprenda UI Design acessando integralmente esse e outros cursos, comece hoje!

Plus

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$85
à vista R$1.020
Matricule-se

Pro

  • Acesso a TODOS os cursos da plataforma

    Mais de 1200 cursos completamente atualizados, com novos lançamentos todas as semanas, em Programação, Front-end, UX & Design, Data Science, Mobile, DevOps e Inovação & Gestão.

  • Alura Challenges

    Desafios temáticos para você turbinar seu portfólio. Você aprende na prática, com exercícios e projetos que simulam o dia a dia profissional.

  • Alura Cases

    Webséries exclusivas com discussões avançadas sobre arquitetura de sistemas com profissionais de grandes corporações e startups.

  • Certificado

    Emitimos certificados para atestar que você finalizou nossos cursos e formações.

  • Alura Língua (incluindo curso Inglês para Devs)

    Estude a língua inglesa com um curso 100% focado em tecnologia e expanda seus horizontes profissionais.

12X
R$120
à vista R$1.440
Matricule-se
Conheça os Planos para Empresas

Acesso completo
durante 1 ano

Estude 24h/dia
onde e quando quiser

Novos cursos
todas as semanas