[Música] e estamos de volta com a nossa jornada wx da IB E hoje vamos aprofundar mais sobre a criação de interfaces se você pulou as outras aulas recomendo que entre no nosso grupo do curso e veja todo o conteúdo que já foi passado até aqui a aula de hoje é um resumo dos estudos que realizamos nessa semana e assim funciona o processo de wx design pesquisa e muito estudo antes de fazer qualquer coisa aner a mão em qualquer tela e falando em tela estamos aqui de novo com David que é o ex designer sor e
Expert dessa área tudo bem com você Tudo bom giov mais uma vez aqui obrigado Opa animado pra nossa aula de hoje hoje a gente vai falar da sua área mesmo hein é Então bora vamos vamos colocar em prática aí beleza falando em tela David o que pode ser considerado um protótipo se eu fizer um desenho é um protótipo pode pode ser considerado um protótipo por exemplo um protótipo ele é um um layout uma interface que a gente vai utilizar para validar as coisas né então a gente tem alguns níveis de de protótipo protótipo em alta
protótipo em baixa protótipo de média fidelidade então um protótipo média é relativamente mais simples ou baixa fidelidade mais simples aind um alta já tem um melhor acabamento e aí depende Claro do que você tá fazendo no no projeto né Depende de qual fase o projeto está você vai lidar com esses tipos de protótipos Ah então O protótipo ele também não deixa de ser um artefato Assim como as pesquisas Assim como as matrizes qualquer coisa que a gente estuda ou produz ele é um artefato David eu escuto muito ouvir uma palavra protótipo navegável sim e qual
a diferença de um protótipo para um protótipo navegável é que o navegável é interativo Você vai testar com pessoas Você vai quando a gente tá falando de produto digital a gente tá falando basicamente ali de você criar um protótipo no no figma por exemplo você linkar os frames linkar as telas e com através de botões links interações com quais forem E aí a pessoa vai acessar através do computador do do celular e vai vai navegar entre a as telas vai fazer o a utilização daquele protótipo para que você valide a aquilo que você tá propondo
como solução de design então a gente tá falando vamos dizer eu tenho três telas uma de login uma página inicial e uma página de produto Se eu mandar só essas três telas PR pessoa valide essas três telas aqui ele não é um protótipo navegável sim se ele tiver os links e e a pessoa tem que interagir com aqu interagir então não adianta mandar só três jpag três fotos pra pessoa quer dizer que não é navegável a pessoa tem que clicar em algum alguma coisa fazero alguma coisa sim porque aí sim você vai conseguir perceber como
que ela utiliza aquele protótipo se forem só imagens estáticas ela basicamente só vai analisar o visual ali não vai ter interação né então é importante que ela possa Navegar aí sim seria um protótipo interativo então fica a dica pessoal O que precisa para protótipo ser navegável é a interação Sim e eu já trabalhei cara e em projeto que já mandaram coisas atrocidade posso chamar de atrocidades arquivos de 200 me era horrível aquilo lá hoje eu até mesmo como desenvolvedor conversando com desenvolvedores eles também adoram quando chega en figma cai até lagriminha no olho deles que
ele fala olha mandaram em fig esse negócio aqui falou graça é isso é isso Qual que é a vantagem pro programador depois que um projeto foi feito em figma e não feito só numa imagem assim s a interatividade qual o que que qual que seria tipo o ganho programador no dia a dia dele é facilitar essa transição entre desig e código e programação Vale lembrar que quando a gente cria um layout no figma por mais que se ele seja interativo Aquilo não é ainda o produto final Então para que aquele produto seja utilizado no navegador
eh no celular seja Apple seja Android precisa de programação Então essa é a segunda parte do projeto dentro dessa a segunda parte quem vai fazer o desenvolvedor como você falou então o desenvolvedor vai pegar os arquivos de design e vai construir como se fosse um lego entre aspas aquele layout para que ele possa ser utilizado E aí o figma facilita para caramba porque o o figma tem componentes você pode podem ser reutilizados e trocados ali o as características daquele componente de uma maneira bem simples facilitada otimizada o figma Tem a parte de prototipação como a
gente tá falando então a gente cria o layout estático coloca interação animações nesse protótipo com isso a gente pode mostrar pro desenvolvedor como que será aquilo que a gente projetou então ele tem uma visão de como será o funcionamento e facilita muito mais do que ele ter que imaginar o a gente ter que ficar falando e explicando para ele né e também tem o Dev mode que é uma opção onde o desenvolvedor ele consegue pegar as características dos elementos que Nós criamos dos artefatos e seja eles ali quais forem tipografia cor imagem Grid ele consegue
ver aquilo só que na parte de código também então já vem tudo estruturado para que ele possa se assim ele achar necessário né já pegar aquela parte e que o figma disponibiliza para ele em código copiar colar e utilizar no no no código que ele tá fazendo uma das grandes vantagens até aqui mesmo uma pessoal minha eh eu consegui saber as fontes isso eu tinha um problema muito grande antes a pessoa mandava um arquivo para mim num software que eu não tinha no meu computador e diferente até mesmo do figma não preciso instalá-lo posso criar
uma conta no meu computador que seja Linux seja Mac seja Windows e tudo mais e eu posso clicar num elemento ele fala essa fonte é desse tamanho e ela é desse jeito aqui e se você quiser exportar qualquer imagem que tá lá também é muito fácil pro programador coisa que antes era muito mas muito ruim O protótipo em si ele é só pro ex e pro programador assim ou ele ajuda mais outras pessoas do time não ajuda todo mundo que tá inserido dentro do do projeto entender como que será como foi pensado o design e
o figma por exemplo ele tem algumas outras funcionalidades muito interessantes como por exemplo a parte de comentários né E você mesmo citou que não precisa instalar o figma necessariamente então a pessoa pode acessar por uma conta é o figma no navegador M que ela não seja designer ela pode ser um programador pode ser alguém de marketing um cliente e aí ela pode testar ver se se funcionou o designer perceber como que as pessoas estão utilizando aquilo a pessoa pode comentar em cima então deixar sua observação o desenvolvedor pode deixar sua observação Então na verdade o
eh hoje em dia tá muito facilitado né As coisas estão muito mais simples a gente passou por uma antigamente nós passamos por alguns perrengues que vocês não vão precisar passar e a questão de criação de protótipos interativos no figma tem todas essas facilidades hoje em dia uma coisa que eu passei muito que até entra nesse caso é exatamente você chegar e ter uma coisa que é bacana tava até esquecendo dela a gente hoje quando uma pessoa entra no link do figma Ela já tem a versão final daquele projeto e todo mundo está vendo a versão
final antes eu já recebia arquivo versão um versão dois versão final final do versão final final versão C então a gente tinha bastante coisa acontecendo disso daí e is tira né hoje a gente não tem mais esse problema né então todo mundo tem a versão final e as pessoas podem comentar ou seja o cliente falou olha não gostei disso eu gostei disso já tá lá no próprio arquivo do F agora eu queria que você explicasse um pouco mais o que que é essa alta fidelidade e baixa Fidelidade que a gente escuta tanto falar baixa fidelidade
Como o próprio nome já diz é um protótipo mais é mais simples ele tá mais na parte do esboço e um frame seria baixa fidelidade sim um Wi frame pode ser baixa fidelidade uma Pode até ser média fidelidade né então ele não precisa necessariamente ser interativo pode ser mas pode não ser também e utiliza de forma geométrica simples retângulos até mesmo quem faz um papel que é possível né a pessoa faz uns rabiscos ali bem simples apenas para projetar a sua ideia numa plataforma projetar sua ideia num papel no figma por exemplo já O protótipo
em alta fidelidade nós costumamos eh encará-lo como o projeto que tá sendo direcionado pro desenvolvedor pegar rodar e publicar Então vai subir pra produção ele pode sofrer algumas alterações no decorrer do caminho que é natural um refinamento também maior mas já é o o produto mais robusto realmente é o layout que já tá sendo direcionado para que o desenvolvedor possa prosseguir com o trabalho e colocar ele no ar quase pronto tá quase pronto quase ou até mesmo pronto dependendo né de quem estiver fazendo e do projeto Eu já ouvi falar que eu já vi gente
fazendo protótipos de vários jeitos eu lembro de gente gravando as telas assim mostrando como que funcionaria o até uma coisa que a gente mencionou aqui no dentro da jornada que são os fluxos né o Golden PF pessoal tipo fazendo isso daí no figma parece que ele tem uma coisa muito mais fácil todo mundo para criar esses protótipos é muito fácil de criar um protótipo básico vamos dizer nada uma coisa Espetacular se eu começar hoje aprender protótipo mas eu tô sabendo mais ou menos provavelmente Se você pegar para estudar um dia só de protótipo você vai
ficar melhor do que 90% das pessoas que trabalham com figma e o protótipo em alta por exemplo que a gente tava comentando que é a parte onde a gente especifica cores deixa a tipografia certinha com os pesos com os espaçamento já deixa o layout realmente Pronto né a pessoa pode pegar esse layout eh utilizar a parte de protótipos do figma e transformar ele realmente num num site ali num aplicativo né fazer eh essa essa versão que a pessoa que vai utilizar vai ter a percepção como se fosse o produto já publicado e para fazer isso
não precisa de muita coisa não demanda tanto esforço Assim na verdade se a gente parar para pensar as funcionalidades básicas de prototipação do figma já serão suficiente para isso claro que uma coisa mais avançada uma transição Talvez um Carrossel diferente que você tenha no layout demande mais esforço Mas no geral são são as funcionalidades mais simples do da parte de prototipação do figma de transição de elementos de frames que já serão suficientes para simular Como será a interface realmente em produção então isso ajuda bastante teve Ah um protótipo que você já fez assim era muito
complexo assim já teve algum caso com você nessa já plexo foi um protótipo de aplicativo de Bank de pix Hum porque PX tem muitas telas a gente precisa respeitar as regras do Banco Central e ele manda pra gente um documento a gente precisa ler esse documento entender e criar as telas a partir disso então não era nem tanto a questão da da prototipação em si em questões de visual talvez ali de de transições de animações mas sim o volume muito complexo de interação isso a lógica por trás da funcionalidade da da do produto né do
layout era bem complexo mesmo sempre vai ter um projeto desafiador para você se uma pessoa agora ela vai começar a aprender Qual que é a coisa mais básica que ela pode aprender assim qual que é o básico que ela precisa saber para entrar no mercado eu preciso saber fazer animação drop Down fazer o site virado ponta cabeça aplicativo Deb Qual que é o básico que ela precisa para entrar no mercado que o que eu espero de uma pessoa que começou agora que ela consiga simular o básico da da interação do aplicativo ou do site então
o básico seria por exemplo navegar entre os links é pessoa clicar num num determinado item e aparecer uma lista de opções abaixo Talvez um over né então Ou seja quando você passa o mouse em cima de um botão ele mudar a cor para mostrar interação Talvez o tamanho da tipografia coisas nesse sentido que são mais próximas da utilização da gente do nosso dia a dia Muitas vezes a gente vê aqueles protótipos Ou aquelas animações no driblo no próprio behance que são Galerias né de design que a gente gosta de se inspirar mas elas não necessariamente
são funcionais na prática mesmo são coisas mais simples e o que a gente precisa ter é ideia é de simular é o protótipo é uma simulação né para que a gente possa testar validar seja com o cliente seja para mostrar pro desenvolvedor como vai ser seja para até mesmo apresentar pro nosso chefe pra diretoria para que eles entendam o que a gente tá fazendo Eu já entrei em algum desses protótipos ou até mesmo das redes que você falou que parece que a aplicação inteira tudo funciona mas eu também acho não entendo se isso funciona bem
pro mercado até a pessoal falou não a gente já sabe como isso vai funcionar a gente só precisava testar isso ainda mais para questões de testes de usabilidade também pessoal agora vamos dar um pouquinho de vida a nosso protótipo usando o figma então V aqui comigo pra nossa telinha bom agora com meu wireframe bem definido e com meu Style guide a gente começa a falar sobre alta fidelidade e baixa fidelidade e que Isso quer dizer alta fidelidade quer dizer quando um produto ele tá muito próximo da realidade do que vai ser entregue vamos dizer assim
a uma casa uma casa que está pintada com telhado com Jardim e tudo mais vamos dizer que pode ser uma casa de alta fidelidade e uma casa de baixa fidelidade seria ela na planta e isso funciona bem para ex design também vamos dar uma olhadinha aqui que nem eu tenho aqui meu arrame de papel ele seria de baixíssima fidelidade Vamos colocar por quê Uma ele é feito de papel e meu minha solução ao meu produto ele não funciona no papel outra ele não tem os elementos de estilo e tudo mais ele é super importante gente
não pode descaracterizar ele ele é mega importante porque ele definiu para mim até agora quais vão ser a minha arquitetura de informações onde vão ficar cada coisa e como as coisas vão funcionar que muitas vezes é muito mais importante do ser bonito como a gente coloca no exemplo da casa uma casa com uma planta bem feita uma casa que dura mais é uma casa que ela é mais organizada e tudo mais e uma casa que é só bonita mas não não a gente não ela não é funcional é uma casa que pode ser não tão
boa assim então aqui funciona a mesma coisa então essa aqui como existe a planta da casa essa aqui é a planta do meu site que tô fazendo pro meu case da eletromania que é diferente do de vocês hein pessoal lembra sempre de consultar lá no grupo Qual que é o tema do desafio de vocês Esso aqui é só para a gente exemplificar como que faz os exercícios Beleza então isso aqui é baixíssima a fidelidade então ele tá bem longe da realidade de entrega do produto Então não vai ficar parecido com isso aqui vai ficar parecido
com outra coisa mas mesmo assim é muito importante e depois eu vou ter aqui meu airframe digital ele já é um pouco mais parecido com a realidade mas mesmo assim ele é de baixa fidelidade ele ainda não está do jeito que o produto final vai ficar Então só pra gente ressaltar baixa fidelidade quer dizer que tá longe da realidade e alta fidelidade está mais próximo da realidade Porém isso não tem nada a ver com uma questão de funcionalidades as funcionalidades elas já TM que ser deflagradas nos dois tanto alta fidelidade Como baixa fidelidade como que
eu transforma isso aqui agora em alta fidelidade Bom basicamente é eu aplicar o meu design insistem dentro dele aqui e começar a pensar nos textos e conteúdos e imagens que vão estar aqui dentro então alta fidelidade tem que parecer muito com a realidade vou repetir de novo porque precisa pegar muito bem esse conceito então o que que eu fiz aqui eu vou pegar esse aqui o meu o meu ST guide e vou aplicar aqui vamos dar uma olhadinha aqui ah para fazer isso pessoal eu tô usando algumas páginas dentro do figma aqui lá no nosso
curso lá de basicão de figma para fazer a jornada aqui ele ensina sobre isso então não vou me aprofundar dentro muito das questões do figma porque ela tem os tutoriais de como fazer para você entender um pouco melhor beleza e façam com bastante calma é bem facinho e bem intuitivo de fazer também e qualquer dúvida que vocês tiverem tem os nossos mentores aqui dentro do lá do grupo que eles podem ajudar vocês também fechado então beleza que que eu fiz eu vou pegar meu Wi frame porque eu já defini o que tem que aparecer que
o que como vai aparecer eu já sei quais são as informaões a chance eu só preciso definir agora como elas vão aparecer num aspecto visual então eu fiz isso aqui o que que eu fiz aqui peguei aqui coloquei o loginho deles comecei a trabalhar com botões comecei a trabalhar com as fontes que eu falei que seriam aquelas fontes e comecei a trabalhar com os textos então coloquei textos muito mais próximos da realidade Ah mas são esses textos vai ficar sem preço não eles podem mudar mas ele já tem que ter um contexto aqui muito mais
completo que um wireframe beleza então beleza o que que eu fui fazendo fui criando botãozinho e Olha que bacana Se você dar uma olhada aqui entre esse e meu alame ele não mudou muita coisa eu tenho uma imagem tem um leitura de menu e um botão tem um texto tem um arrependimento tem um outro botão aqui e olha que bacana toda vez que eu tenho wireframe fica muito mais fácil de eu começar a criar o s porque primeiramente eu garanti que tudo vai funcionar ou seja que a funcionalidade do do do ou da minha solução
ela vai ser a primeira coisa que eu vou pensar e agora eu vou começar a pensar como que eu vou colorir ela como que vou deixar estilosa Como vou deixar agradável e tudo mais Então olha que beleza tem aqui nossas especialidades coloquei as fotinhas aqui comecei a colocar os nossos clientes aqui coloquei um depoimento aqui que eu achei na internet então vou colocando esse tipo de coisa então beleza então quer dizer que isso aqui eu já tenho um protótipo não muita gente confunde com conceito de alta fidelidade e baixa fidelidade com protótipo mas Tecnicamente uma
coisa não está relacionada diretamente com a outra alta fidelidade e baixa fidelidade como a gente já viu Tem a ver sobre aparência de produto final se ele parece com alguma coisa que vai que está próxima da realidade e protótipo tem a ver com interatividade Ou seja eu vou até aqui pegar o meu minha telinha eu vou dar um play aqui dentro dela isso aqui de vo também como funciona os modos de apresentação mas é só ele entrar nesse modo que ele me apresenta aqui minha telinha no celular ótimo de o play aqui e agora vamos
pensar isso aqui é um protótipo não isso aqui é uma tela se eu clico aqui nada acontece não pode ser considerado protótipo protótipo tem que ser interativo Ah então mas quer dizer que para ser um protótipo interativo tem que ser de alta fidelidade Claro que não um exercício muito comum dentro do des é pegar os nossos protótipos de papel que ali frame de papel e recortar eles imagina que eu recorte aqui ele em tirinhas tipo pega a tesoura aqui e faça isso aqui e eu falo pra pessoa imagina que você entrou nesse site e mostr
ela sem estar no computador sem nada clica num botão aí agendar Quando você clicar você vai para essa tela e você fica trocando essas telas aqui e mostrando uma certa interatividade aqui dentro dessas questões ou seja isso aqui é um é uma baixa fidelidade porém é um protótipo não deixa de ser um protótipo Mas se não tiver interação não é protótipo Então esse meu aqui também não é um protótipo até mesmo a se eu for aqui dentro do meu wireframe eu posso chegar aqui também e dar um play nele aqui do mesmo jeito que eu
fiz no outro se esse aqui acontecesse alguma coisa quando eu clicasse ele era um protótipo e esse não então interatividade é sobre protótipo alta e baixa Fidelidade é sobre aparência beleza é muito bom gravar esses conceitos porque quando vão pedir coisa para você me faça uma tela de baixa fidelidade is quer dizer que você não precisa fazer um protótipo não precisa ser interativo Me faça um protótipo de baixa fidelidade Então quer dizer que aquilo tem que ser interativo Beleza então vamos dar uma olhadinha aqui vou fechar aqui esse outro aqui do frame ótimo agora a
pergunta se eu tenho minhas telinhas aqui que eu já arrumei e nesse caso ainda que que eu fiz aqui eu tenho um selecionador de um seletor de data que eu fiz exatamente do protótipo eu quero saber como que ele vai funcionar no protótipo Se você dar uma olhada no meu frame ele não tá lá mas como eu vou usar meu protótipo para realizar os testes numa próxima fase eu precisava ter essa telinha aqui então eu criei ela exclusivamente aqui para ela lembra que como a gente vai criar um protótipo todo protótipo tem que ter um
fluxo Ah vou criar o fluxo se você precisar criar o fluxo nessa etapa aqui você comeu bola você pulou etapas esse fluxo já tem que est definida aqui a gente fez aquele exercício do Golden pef anterior que ele já falou para mim como que ia funcionar esse fluxo Então tem que ser o fluxo que foi definido aqui então vocês estão vendo como que é importante os estudos anteriores porque ah antigamente o que que acontecer ou até hoje acontece em outros lugares em projetos que dão errado eles dão errado porque a pessoa a primeira coisa que
ela vai fazer essa telinha aqui a gente demorou um tempo para chegar nessa tela as informações que estão dentro dessa tela elas foram pensadas Anes se elas estavam de acordo com a necessidade necessidades que a gente descobriu realizando pesquisas criando personas e fazendo diversos estudos ou seja antes as pessoas faziam essa telinha aqui e entregava o produto e ele não funcionava pra gente fazer chegar nesse resultado Aqui foram feito um monte de coisas a gente fez wireframe fez Style guide fez todas as questões até chegar aqui e agora vamos fazer um protótipo então bom se
eu sei que tem um fluxo eu já organizei minhas telas aqui baseadas no fluxo Na verdade eu já tinha feito isso até lá no n frame já porque eu já sabia qu era as telas que eu tinha que trabalhar ótimo agora vamos começar a criar o fluxo como que eu crio fluxos dentro do protótipos dentro do Firma primeiro eu entendo meu fluxo e segundo eu vou começar a pensar bom pra pessoa vir daqui para cá que que ela tem que fazer ela tem que criar clicar nesse botão de agend de uma visita técnica bom primeira
coisa que a gente tem que fazer é vir no cantinho aqui e trocar de design para Prototype aqui nesse menu direito aqui bem no comecinho aqui e eu vou clicar em Prototype quando eu clicar em Prototype você vai ver que meus elementos Eles já não aparecem os configurações dele como aparece normal ele não não vai perguntar para mim cor tamanho borda não ele vai aparecer essa bolinha essa bolinha quer dizer que eu posso lincar ela com outra coisa pode ser com outro objeto mas geralmente com uma outra tela que a gente liga e Olha que
bacana peguei ele aqui e falei ó vou a gente dar uma visita tcnica daqui ele vem para cá Ah interessante vamos ver o que acontece aqui então se eu tô aqui quando eu ten um protótipo dentro do figma e essa é uma vantagem muito grande do figma qualquer lugar que eu clique aqui ele vai começar a piscar os elementos que são clicáveis porque ele já sabem que aquele elemento tem uma ação o resto Pode não ter Além do mais porque a gente vai testar um fluxo não um site inteiro é muito difícil vocês pegarem um
projeto que você vão ter que fazer todas as coisas aqui mas geralmente é só um fluxo Olha que bacana então is se eu clicar aqui agora ou ele foi PR outra tela olha como isso fica legal para uma pessoa testar ou visualizar porque ela começa a entender como que vai funcionar todas as ferramentas e o processo antes disso ir lá pro desenvolvedor antes da ir pra fila de desenvolvimento ou até mesmo se eu errar aqui eu posso consertar muito mais rápido do que errar na programação então eu garanto que minhas coisas vão funcionar vamos continuar
com o nosso protótipo eu sei que depois daqui pessoal precisa a data então de novo vou clicar aqui no botão no meu formulário e vou mandar ele para cá pô isso aqui só funciona com botão formulário não funciona com qualquer elemento pode ser um título posso colocar o título vindo para cá posso colocar qualquer coisa aqui V tar ISO aqui para a gente não ter problema eu vou aqui colocar nesse elemento aqui na minha bolinha do número 15 porque o que que eu quero aqui que a pessoa vem aqui ela seleciona uma data e nessa
hora aqui eu criei essas duas telas no meu grp Exatamente porque nessa hora é uma hora que eu poderia me confundir um pouco então o wireframe ele não ia me ajudar tanto aqui então eu já criei dentro do próprio protótipo e depois que a pessoa selecionar uma data ela vai selecionar um horário vou clicar aqui numa bolinha de um horário qualquer colocar aqui pode ser não precisa ser mas você pode colocar até os três botões levando pro mesmo lugar então qualquer horário que a pessoa clicar Ela vai para cá posso fazer a mesma coisa aqui
pro calendário né e falar assim ó qualquer lugar que você clicar aqui dentro desse de datas você vai para essa tela aqui que fica mais fácil dependendo de como que a gente vai testar aqui eu vou deixar desse jeito mas vocês podem achar do melhor jeito que vocês colocar com o tema de vocês Pessoal lembrando que todos esses estudos tem que ser feito com o tema do desafio que tá lá no grupo lá esse aqui é o meu de exemplos estou fazendo is só para exemplificar Ok bom depois eu criei uma tela aqui para mim
ganhar um pouco de tempo que já vem tudo preenchido Na verdade só não veio alum dado aqui que tinha aqui vou verar no outro que que é tinha aqui out Ah era o ti do aparelho aqui que não veio essa informação e esse aqui eu posso arrumar depois também não tem problema mas ok aqui já coloquei uma telinha que vai vir tudo preenchido Então vamos lá vamos dar uma olhada no nosso fluxo vou clicar em agente de uma visita vou pedir para selecionar uma data vai abrir essa telinha de seleção de data pessoal vai clicar
numa data depois ela vai clicar dentro de um horário que aparece depois dessa aqui daí ela vem para isso aqui onde tá tudo meio que preenchido já para ela que é só para testar e depois op aqui ó colocando no botão de cancelar ali eu vou clicar em agendar minha visita depois que eu clicar em agendar minha visita vou clicar em confirmar meus dados ele vai vir para cá que é minha telinha de confirmação de dados que é muito parecida com aquela que eu fiz no meu Wi frame E obrigado por confirmar então aqui eu
tenho adicionado data da da agenda do Google Agenda do iPhone precisa de mais ajuda bom num fluxo de teste é sempre interessante a gente colocar um botão que a pessoa possa voltar se ela se perder então sempre coloquem Geralmente eu coloco ou no logo que todo mundo já sabe que mais ou menos faz isso essa aqui eu não vou colocar e tá voltando ó que legal então só pessoa clicar aqui ela volta para essa tela se ela clicar nesse aqui ela volta para cá e eu posso até colocar os outros botõezinhos aqui também e é
bem legal de fazer isso aqui que depois você vai amarrando eles aqui ó se can celar volta para cá ess ess Se cancelar volta para cá também esse aqui tem um botão de voltar e corrigir então eu vou começando a arrumar a navegação do meu fluxo e é sempre interessante colocar as opções que a pessoa consiga voltar tem que voltar aqui o início Então tem que sar no finalzinho Então o que acontece aqui às vezes fica fica uma bagunça mesmo às vezes D uma olhada ess flechinha tá tudo para conta canto Mas não tem problema
isso aqui não se preocupe com isso ainda mas em si o que é mais bacana que eu consigo colocar tudo como vai funcionar a minha aplicação aqui vamos dar uma olhadinha então aqui como que ele tá funcionando ó se eu clicar no meu logo eu já volto para cá se eu clicar aqui ele já mostra até onde que eu posso clicar ó posso clicar no logo e selecionar uma data lembra que ele ficar piscando esse azulzinho aqui para mostrar onde são os elementos clicáveis vou clicar aqui vou clicar na data Olha que legal vou clicar
aqui ele vai mostrar para mim aqui posso voltar no logo vou clicar naag minha cancelar também voltar meu fluxo um pouco mais no começo ele vai confirmar minha visita técnica vai mostrar alguns dados tal e tudo mais e depois vai mostrar aquil então o que que eu tenho agora isso aqui finalmente é um protótipo de alta fidelidade então ele tá muito parecido com a realidade como que vai ser o produto final e ele já tá mostrando para mim como que vão funcionar pelo menos um fluxo beleo que eu end protótipo é uma coisa que ajuda
todo mundo né todo mundo que participa do do processo então serve pro cliente ele serve muito bem pro programador serve pro steak rodo para qualquer um que tá envolvido com o projeto teu protótipo é bacana então sim eu vejo que faz parte do trabalho do designer ou da equipe de design criar protótipos né que são as simulações para que as outras pessoas têm a percepção de como será o produto Vai facilitar para todo mundo tanto pro designer entender se ele errou se ele acertou o que ele pode melhorar o que ele pode talvez retirar do
projeto quanto o desenvolvedor vai ter a percepção de como funcionam as coisas e a partir daquilo vai poder criar com menos eh dificuldade vai poder ter mais autonomia e também as pessoas estão inseridas dentro do projeto né que nem você falou steakholders diretores fica muito mais fácil apresentar as pessoas perceberem como que é realmente aquilo que você fez ou que a equipe de design pensou como vai funcionar é quase que o produto né sim tipo vamos dizer é lógico tem o trabalho do programador depois do devops e todo mundo da da parte mais técnica mas
ali ele consegue entender o que que vai chegar mais ou menos no final na mão dele sim é o primeiro teste né é muito importante isso porque você consegue filtrar várias coisas e agilizar outras né durante esse processo não perfeito pessoal para o nosso desafio agora vamos precisar de um protótipo navegável e Para realizar isso vai ser necessário criar antes O protótipo de alta fidelidade baseada no seu wireframe e no desafio proposto pela jornada lembre-se de acionar no seu Case também a importância de realizar os protótipos navegáveis ou seja agora chegou a hora de a
gente começar a encorpar o produto e deixar ele bem bacana no queis isso vale muito a pena visualmente não é quando a gente coloca no nosso portfólio um protótipo navegado ele tem um peso maior a nível de que a pessoa pode ver mas lógico é importante sempre colocar nas fases do nosso portfólio Por que a gente fez aqui Criei um protótipo para testar Y ou para fazer x ou qualquer coisa parecida correto correto e eu vejo que é uma ótima é uma ótima colocar o protótipo navegável Porque além da pessoa perceber realmente na prática porque
utilizar uma coisa ler a outra eh como você pensou a o design ela também percebe a sua capacidade na ferramenta porque ela vai conseguir entender quem tiver te avaliando seja o seu futuro empregador a pessoa que que tá te avaliando por uma vaga por exemplo a sua capacidade técnica na ferramenta isso também faz parte do processo né com toda a certeza faz parte também deid pessoal que tá começando agora hum V vamos manda aquela mensagem se pessoal tá nessa jornada aqui agora já faz um certo tempo tá estudando bastante tá fazendo os desafios que que
manda uma mensagem para esse pessoal que tá em casa agora que tá assistindo você que tá assistindo a tá quase no finalzinho dela manda aquela mensagem aquela coisa para dar um up nele também eu acho que você tem que começar a praticar mais se você tá com dificuldade eu vejo que é é normal dar um desespero Talvez né As pessoas olham assim falam Nossa muita coisa para aprender eu fig mas é muito difícil mas na verdade é mais difícil num primeiro momento assim depois você começa a fazer as coisas praticar bastante eu vejo que design
é muito prática também e junta né você tem que encontrar o equilíbrio entre teoria e prática você vai consir consu evoluir de uma maneira mais tranquila mais natural então se você tá com dificuldade agora se você tá desmotivado vamos vamos PR cima não pode desistir agora porque talvez a parte mais difícil que seja entender design seja entender os processos Você já fez você já passou Agora realmente é colocar a mão na massa e e mostrar para que você veio né e é isso aí pessoal você que tá na jornada agora aqui segue a mensagem do
David e te vejo na pra aula vamos utilizar uma ferramenta essencial Dex design chamada teste de usabilidade
