[Música] bem-vindos de volta à nossa jornada o agora que você já tem informações bem legais sobre a empresa o problema o usuário o produto e o mercado vou convidá-los para passearmos no caminho feliz ou na linguagem técnica o Golden pef caminho Dourado todos esses termos se resumem a criação de um fluxo que os usuários saindo do problema em direção à solução todos os serviços e produtos que utilizamos geralmente tem um fluxo por exemplo para realizar uma compra online geralmente é necessário acessar o site ou app encontrar um produto adicionar ao carrinho realizar um cadastro preencher
dados de pagamento e frete e depois aguardar a chegada do produto antes de criar as telas de fluxo o ex designer sabe que esse fluxo deve ser bem definido e dividido em etapas quando realizamos esse processo começamos a enxergar oportunidades de design Conseguimos ver as interações com usuários e entender melhor como tudo vai funcionar esse processo também ajuda a equipe técnica que já pode imaginando como o produto será desenvolvido e adicionando restrições técnicas ao processo também o ex design é uma prática que geralmente envolve todos os colaboradores de um projeto ajudando não somente o usuário
mas também empresa e outros times que atuam dentro dela e a criação de um fluxo considerando os usuários é a prova disso vamos dar uma olhada no meu fluxo que eu criei para o meu exemplo continuando com os estudos do nosso tas eu vou agora utilizar uma ferramenta chamada Golden p o Golden pe caminho Dourado caminho feliz tem vários nomes que você pode achar por aí é um conceito utilizado em um para desenhar o fluxo ideal que um usuário deve percorrer para atingir para interagir com um produto ou seja o que que eu preciso desenhar
antes de eu pensar em fazer telinhas antes de começar a pensar como que eu vou resolver a solução eu preciso entender a lógica por trás dessa solução então uma das coisas que a gente precisa fazer é começar a anotar como as coisas devem funcionar e esse aqui é uma ferramenta muito muito boa ela é bem simples de ser utilizada e para hoje eu vou pedir para vocês fazerem ela em papel e caneta pode fazer com lápis pode fazer com canetinha Mas vamos usar hoje papel e caneta lemb que a gente usa muito isso dentro das
fase de descobertas do Design por eu vou explicar até um pouquinho mais PR frente bom para mim começar com Golden pe eu vou ter que escolher um fluxo alguma coisa que está acontecendo dentro do meu produto então eu vou ter que escolher não pode ser tudo falar assim ah eu vou fazer o site inteiro vou fazer a aplicação inteira a solução inteira de qualquer forma eu vou ter que escolher uma parte para mim fazer um estudo nesse aqui eu escolhi o fluxo principal de agendamento de visita técnica do usuário comum para o estudo do caso
pois identifiquei o mesmo com o fluxo principal da solução que vou apresentar no exercício de vocês que é diferente do meu colocando de novo que é tá lá no grupo lá explicando qual que é o tema do desafio de vocês vocês vão ter que identificar um dos fluxos principais sobre a solução que vocês querem colocar pro problema de vocês beleza bom aqui no meu caso eu entendi que o fluxo princip aqui o que eu gostaria de estudar agora seria Exatamente esse o agendamento de visita técnica bom o que que eu vou fazer aqui Pode parecer
até estranho porque minha letra não é muito bonita mas isso aqui foi uma coisa que eu fiz num papel eu comecei a imaginar como que a pessoa ia percorrer o nosso site para essa questão de agendamento de visita técnica então o que que eu comecei a anotar primeiro dentro desses quadradinhos eu anotei Quais são as fases principais então vou ter uma página inicial que a pessoa acessa né esse site ela cai lá de algum jeito eu vou ter uma uma página de agendar a visita que tem um formulário com seleção de datas uma página de
confirmação e uma página de obrigado então eu só vou anotar isso aqui e por que que é importante fazer isso com papel se eu for fazendo tela se já for pensando na solução diretamente eu posso perder tempo caso uma tela pode ficar junto com a outra imagina essa de agendar visita ela pode ser a mesma tela de confirmação pode ser que não tenha tela ela de obrigado e depois disso eu vou ter que mexer todo o meu sistema vou ter que fazer tudo de novo desenhar um monte de coisa então É bem interessante que a
gente tenha um fluxo que a gente tenha uma lógica de como as coisas vão funcionar Então esse aqui não foi o primeiro que eu fiz ah eu já fiz isso aqui página inicial e anotei até aqui algumas coisinhas botão em destaque agendar visita Vai ter formulário vai ter seleção de datos confirma ele pode voltar nessa página aqui pro agendar visita e obrigado canais de atendimento no final também então eu já comecei a notar algumas coisinhas aqui para mim então isso aqui se eu errasse nisso aqui é só eu rasgar o papel colocar no lixo não
tem problema colocar na reciclagem né e eu já posso começar a fazer dessa forma mas se eu tivesse feito isso já dentro de um software já começa a produzir eu posso perder tempo e beleza Assim que eu tiver esse fluxo bem definido na minha cabeça E logicamente nos os estudos futuros ele pode alterar Mas é interessante que eu já tenho uma base que eu já tenho alguma coisa de como isso vai funcionar beleza bom agora continuando depois que eu fiz esse fluxo aqui eu posso ter um Wi frame eu vou explicar aqui de novo ó
lembrando pessoal sempre explicar Qual que é a ferramenta e qual que é o resultado que eu obtive dela aqui beleza sempre explicar certinho que daí fica linear ó aqui todas as coisinhas que eu fiz até agora show meu fluxo foi definido mas é básico ainda vamos dar um toque de tecnologia para isso vamos utilizar os wireframes Wire o qu os wireframes são representações mais básicas de telas que um produto pode ter eles são tão básicos que podem ser criados inicialmente com papel e caneta eles representam um fluxo e não contam com imagens cores e nem
estilos servem para demonstrar a funcionalidade de um processo do jeito mais cru que possa existir os warframes são importantes Porque ressaltam como as coisas vão funcionar e qual é posicionamento dela das Ferramentas principais que leva a usuário à solução Eles garantem que um projeto deve funcionar independentemente de ser bonito ou não o que um ex designer faz Exatamente isso trabalhamos para que as coisas funcionem antes delas serem bonitas vou mostrar para vocês como ficou o meu arrame que eu utilizei papel e lápis vai fazer tudo muito bem simples de ser realizado wireframe antes de começar
a desenhar as telas necessário criar um protot de baixa fidelidade o wireframe é exatamente isso um rabisco de como as principais telas do produto devem apresentar seus elementos Ou seja a hora que eu tenho um fluxo definido eu já posso começar a pensar como vão ser os elementos dessa página como que a pessoa vai poder interagir mas antes de eu fazer isso lá no computador antes de eu pensar nisso dentro de um software de desenho u figma que nem o adob XD eu já tenho que mais ou menos ter uma ideiaz inha antes de começar
a ter o produto lá vai começar a fazer as coisas lá e isso é a base do exx Design então ou seja sempre pensar antes de fazer para na hora que a gente for fazer alguma coisa a gente ser muito assertivo então ter muitos estudos antes antes de botar a mão na massa esse estudo ajuda a entender melhor como funciona o fluxo apresentado anteriormente por não possuir cores e estilos a interação do wireframe é garantir que exista uma lógica no de realizar a tarefa visual então o que que acontece o meu airframe e o meu
fluxo eles vão garantir que o que está funcionando é a usabilidade como que a pessoa vai usar facilidade de uso mas não tem nada a ver com beleza tem a ver com com arquitetura de informação onde vão ficar colocando os elementos da minha página e tem a ver diretamente com funcionalidade ou seja como aquilo vai funcionar e eu fiz aqui em papel também então eu comecei a pensar pessoal a partir desse ponto aqui também Ah vocês podem decidir se vocês querem fazer uma versão só para celular uma versão só para o computador para tablet tal
foque em uma versão uma versão somente para essa jornada aqui se sobrar tempo faça as outras versões não ter problema e seu cas vai ficar muito melhor mas para cá vamos colocar Vamos focar em uma coisa só então eu vou fazer aqui para celular então beleza meso vocêo num site vou fazer para celular bom vamos dar uma olhada aqui no meu wireframe eu vim aqui e comecei a montar mais ou menos como que vai ficar meu site você vê que ele ficar Bem feinho aqui se ficar muito bonito isso aqui tá errado perdeu o tempo
porque isso é uma coisa que pode ser apagada pode ser rápida Na verdade tem até algumas marcas de borracha aqui que eu apaguei um deles aqui porque eu não tinha gostado do que eu tinha pensado e olha como é fácil se eu não gostar Eu Rabisco eu crio outro embaixo e tudo mais então fica muito fácil muito barato de criar isso daí é um exercício que geralmente a gente pode fazer em mais pessoas tudo bem tudo mais e a gente vai conseguir fazer bem rápido e sem gastar nada somente cabeça mesmo bom o que que
eu fiz aqui Existem algumas coisas dentro do wireframe que eu preciso delimitar que nem toda vez que eu tiver uma imagem o interessante tem me fazer um quadradinho com x no meio aqui vai ficar o logo do site quer dizer que eu não escrevi logo nem nada só fiz isso aqui vai ficar uma imagem aqui aqui escrevi Zap é um botão de WhatsApp que vai ter aqui em cima crii um título da página bem-vindo coloquei aqui hora de atendimento agendar aparelhos se vocês darem uma olhada a minha arquitetura de informação tá começando a aparecer aqui
ó aparen quando ve você colocar Um textinho também você pode colocar essas linhazinha aqui não precisa ficar escrevendo o texto não porque isso pode ser perda de tempo porque não importa muito o que vai estar escrito aqui eu sei que eu tenho um texto eu sei que eu tenho um botão eu sei que eu tenho fotinhas que isso aqui é um slider tem uma setinha tem as coisinhas aqui tem um rodapé eu sei que vai ter uma fotinha Redonda aqui então eu fui criando aqui mais ou menos de como que vai ficar minhas coisas aqui
e olha como é fácil Se eu me perder aqui Se eu achar que não ficou bom eu não gastei quase tempo nenhum com isso Eu Rabisco e faço outro rabisco é muito importante eu vou pedir para vocês que vocês façam esses fluxos aqui em papel e caneta papel e lápis e coloquem a foto deles aqui é muito interessante colocar isso porque dentro de um Case mostra que você não está totalmente ligado somente com a parte do do software mas que você sabe organizar reuniões de wx design e publicar conceitos de design dentro de um projeto
sem precisar de um computador então se acabar a energia Você já sabe o que fazer também belza que is não é um caso que geralmente acontece mas é que você consegue pensar dessa forma também beleza com essas duas ferramentas já posso começar a enxergar minha solução e esse é o processo de wx design primeiro precisamos entender o problema depois começar a imaginar como vamos resolver este problema assim garantimos que o sucesso de nosso produto não depende de sorte e que tudo isso foi muito bem planejado para o desafio de hoje vocês vão precisar de lápis
caneta e papel desenho o flux do caminho feliz do seu projeto e o wireframe feito à mão tiram aquela foto e coloquem dentro do seu case lembre-se de explicar também dentro do Case a importância de saber o fluxo dos usuários e por desenhar wireframes antes de criar as telas e para qualquer dúvida sobre as ferramentas e o processo consultem nossos links e os mentores dentro do grupo da da jornada Bons estudos e até a próxima aula para você que estava esperando finalmente trabalhar com uma ferramenta de design chegou a hora
