COMO CRIAR BOAS INTERFACES: DICAS DE UI/UX

fala pessoal hoje a gente vai falar de um tema que é crucial para quem desenvolve aplicações seja mobile ou web que é como criar boas interfaces e se você é programador como eu sabe que às vezes a gente fica tão focado ali no código que acaba deixando a interface para depois mas isso pode ser um erro enorme porque uma boa interface pode fazer toda a diferença no sucesso da sua aplicação então se você já perdeu tempo tentando criar uma interface e ficou frustrado ou frustrada com o resultado esse vídeo aqui é para você e para

nos ajudar a entender melhor o assunto eu trouxe aqui um convidado especial que é o William Lima Ele é product design com mais de duas décadas de experiência aí especialista em yx já ajudou grandes empresas a melhorar a experiência do usuário em suas aplicações Will cara muito obrigado por estar aqui com a gente eh tô muito feliz de poder ter você aqui e bora compartilhar com essa galera algumas dicas que podem mudar o jogo aí na hora de criar a interface Especialmente para quem desenvolve aplicações mobile mas com certeza as Suas dicas podem se aplicar

para aplicações web também né E aí tudo bem Fala Rodrigo beleza cara primeiro lugar agradecer aqui a presença meu fui pegando de surpresa na hora que o Rodrigo falou cara você pode fazer fazer parte aqui de um episódio para trocar uma ideia com a gente sobre essa parte de y o x como que é essa vivência do lado de cá e do lado de vocês ali porque eu já passei por alguns setores nesse mercado que realmente eu tive que ter certas conexões que até hoje eu coloco Como regra pras pessoas que estão chegando que é

um diferencial você ter uma conexão com quem tá desenvolvendo ou você saber ter esse olhar pelo outro lado é o diferencial na hora de montar uma interface total né E até porque pensando eh em Claro Empresas bem estruturadas empresas que que levam bastante a sério assim a experiência do usuário geralmente o Dev vai trabalhar muito próximo ali de alguém que que foca nesse aspecto né de desenhar as interfaces até porque no no no nessa etapa de desenhar as interfaces não é só pensar num aspecto bonito né ah num aplicativo bonito numa interface ali web Bonita

eh acho que além disso tem outras outras ocupações também que vão além do do do só do do bonito claro que é super importante desenvolver aquelas interfaces que nossa né que agrade o e o usuário de usar mas acho que até pra gente deixar todo mundo na mesma página Qual que é a diferença entre o y e o x eu acho que passa um pouco aí sobre esse sei que são grandes coisa mas acho que para deixar a galera assim na mesma página Vamos vamos falar assim né Rodrigo de uma forma bem bem aberta mesmo

bem Ampla porque não dá pra gente entrar em muitos detalhes porque aí acarreta muita coisa mas de certa forma cara quando você olha para um ui ux Hoje você tá falando de algo muito próximo você tá falando de vamos supor a experiência da pessoa ali e as interfaces que estão sendo montad aqui quando você vai montar uma interface é importante você entender o cenário por onde aquele usuário vai passar o que que ele vai executar como que é a jornada nele no meio daquele ambiente e muitas vezes essa jornada ela fica meio restrita ali a

galera fica deixando de lado e fala não vamos pra interface vamos montar aquela parte boa a parte bonita né o bonito é assim ele vende muito a primeiro ponto porque você vai bater o olho você vai falar nossa que incrível só que na hora que você começar a Navegar se você não entender realmente o que que o usuário queria fazer na hora de montar aquela tela você vai ficar para trás então assim o teu o teu projeto vai ficar no tempo ele vai ficar parado estagnado ele vai ter perca o pessoal vai sair da página

não vai conseguir executar o objetivo que você queria e qual que é a diferença disso quando a gente fala o iex ele olha exatamente para essa experiência Ele olha pra pesquisa ele olha para entender aquele cenário aquele usuário e o ui ele vai pegar esse estudo pegar esse conceito e aplicar ele na interface trazendo cores uma identidade que realmente tenha força levando todo o conceito junto das das heurísticas das hierarquias que tem ali para poder entregar uma página que realmente faça sentido o estudo por si na parte de w é exatamente para isso é para

você puxar ali e trazer uma uma estruturação que realmente faça sentido com público alvo que você tá tendo e leve aquele usuário até o objetivo que ele quer agora o ui vai fazer toda aquela parte Bela incrível não só Bela também vamos colocar de uma forma bem clara que ele vai entregar realmente um produto que tenha qualidade um produto que faça sentido pro usuário no momento dele ele não vai cansar o usuário ele não vai deixar o usuário perdido ele não vai fazer o usuário modificar a forma do que ele tá buscando o objetivo então

assim é uma conexão entre um e o outro às vezes eu recebo uma pergunta aqui que a galera fala assim cara mas é melhor eu sei ui ou é melhor eu sei o x Ah mas o ex tá ganhando mais do que ui primeira coisa já falar real dinheiro vem com o tempo dinheiro vem com a tua repetição de processo então não adianta você achar que você vai sair ganhando um rio de dinheiro porque você fez uma escolha sendo que você precisa das duas para poder chegar no objetivo no resultado final e mais do que

isso que acho que é um ponto até que o próprio Rodrigo vai falar aqui a gente precisa de ter essa conexão com o desenvolvedor com a pessoa que tá na ponta para poder referenciar isso a um nível maior do contrário vai bater vai dar atrito e não vai chegar no resultado final Legal com certeza eu eu mesmo aqui compartilhando me a minha perspectiva como deve acho já bati muito cabeça porque eu acho que todo deve passa por isso assim no começo da carreira principalmente é muito ansioso eu era muito ansioso e queria adiantar e queria

já sair codando queria já sair escrevendo código ali para desenvolver a aplicação rápido e aí eu batia e quebrava muito a cabeça porque depois do meio do caminho eu descobria que Putz eu não tinha previsto esse cenário Nossa eu não tinha pensado que o usuário ia precisar passar por aqui e às vezes Eu perdia a todo aquele trabalho que eu tinha feito ou grande parte porque eu tinha que literalmente desfazer o que eu tinha feito para fazer de novo Eh aquilo ou fazer um puxadinho ali e aí o projeto começava a ficar cada vez mais

estranho ali e E aí com o passar do tempo eu descobri que antes de escrever qualquer linha de código o ideal é pensar primeiro no projeta pensar em como vai ser essa jornada do usuário Quais são as a por onde o usuário vai passar Quais são as interfaces eu acho que até considerando o contexto de aplicativo a gente tem até um desafio eh diferente de outros contextos que é uma tela menor né é diferente por exemplo de uma aplicação web que Teoricamente ali você tem no mínimo uma aplicação desktop na maior eh parte do tempo

dá para pensar no responsivo lá também também dá né mas no mobile o tempo todo você tem uma tela menor então fazer escolhas entre o que que eu preciso mostrar pro usuário aqui o que que é relevante paraa funcionalidade da aplicação e o que eu quero comunicar oo usuário naquele momento ali e antes eu não tinha isso muito claro sabe eu baixava a cabeça e saía fazendo e no meio do caminho Eu perdia muito tempo desfazendo coisas porque eu só ia descobrir que [ __ ] esqueci daquilo no meio do caminho acho que é por

isso que é importante ter esse projeto antes e nem precisa ser Ah um especialista em design para pensar nisso né Will é você vai eh vamos falar assim quando a gente vai trabalhar em um projeto vamos você vai trabalhar numa equipe primeiro ponto você entender Quem são os profissionais as suas excelências e que cada um executa com nível de excelência maior E aí quando você vem para dentro do pessoal que tá na equipe de desenvolvimento geralmente o maior fogo que você vê é aquele programador que na maioria das vezes sabe exatamente como chegar no objetivo

como montar aquela arquitetura como entregar um código Limpo só que na mente dele ele tá indo direto na execução ele vai lá ó eu tenho que fazer esse clique esse botão aqui acabou só que às vezes para chegar nesse clique ele tem que passar por um outro ponto que é uma jornada que na lógica da Cabeça no programador muitas vezes ele não tá observando aquilo porque ele tem essa excelência aqui e aí se ele não se conecta com um cara que tá na outra ponta que vai fazer uma parte de y vai fazer uma parte

de w e conversa entre si que são bate-papos que você tem que ter ao longo do projeto desde lá do início se ele não faz isso literalmente ele vai travar entendeu porque ele vai falar assim pô vou chegando num ponto beleza aí ele vai falar agora eu já executei essa parte executou muitas vezes com maestria só que a questão em si é que ficou alguma regra de negócio para trás que tava envolvido lá dentro da parte de w que ia fazer uma inversão por causa de um simples toque que o usuário ia dar ali na

tela no mobile ia falar assim Hum não quero mais essa funcionalidade E aí aquela é o momento onde o programador Fala meu Deus agora eu tenho que refazer toda essa estrutura por causa de poucos pontos então tem pontos de pessoas pessoas e pessoas no mercado que às vezes preferem caminhar sozinhas E aí é um problema errado em qualquer área Independente se você tá em y x programação front back não adianta caminhar sozinho é um erro isso já é o primeiro ponto segundo a gente tá em um projeto primeira coisa que eu falo para qualquer pessoa

que tiver se você é y conecta no Dev lá conversa com o Dev tenta entender primeiro o cenário dele se ele recebeu uma regra de negócio legal se ele trocou uma ideia se ele tem uma arquitetura que tecnologia que ele tá usando se essa tecnologia suporta o que você tá pensando em executar porque eu já vi muita gente desenhar algo que muitas vezes vai uma peça lá pro bens e é magnífico E aí na hora que você olha ali dá na mão do programador o cara quase chora e aí você fala pô mas o cara

não dá conta mas não é que o cara não dá conta ele dá mas ele entende da tecnologia do tempo da conversão para montar aquilo pô se cabe ou não ser um aplicativo para aquela função se aquela função faz sentido e aí você começa a entender que os cenários eles só se atrapalham um no outro quando o pessoal começa a caminhar sozinho e isso daí deriva muito também das empresas igual você comentou lá no início as empresas elas estão cada cada vez mais observando essa conjuntura entre as entre os profissionais quem que trabalha com quem

como que trabalha pelo lado da empresa na maioria das vezes ela vem retendo o quê custo ela vem diminuindo esse custo dela de desenvolvimento e às vezes aproxima um profissional do outro se pula algumas etapas então para isso muitos profissionais hoje estão começando a olhar para um contexto aonde ele tem que saber mais sobre a determinada área seguinte para poder entender e ter uma noção na hora que ele tá executando assim era L atrás você deve ter uma proximidade você é mais novo que eu mas você deve ter uma proximidade com a mesma época ali

eh se você for parar para ver lá de trás web Master que era o cara que manjava é o Web Design depois não sei o quê aí o pessoal começou a tipo assim cresceu um monte de responsabilidade nas profissões Depois tirou e colocou todo mundo como especialista ó o cara aí Y só faz y o outro só faz w outro só faz front o front que fazia front 15 20 anos atrás hoje já é quase um back se já não for o back o back é outro cara que tá na ponta mano virou uma loucura

só que aí você começa a olhar e fala todo mundo tá se conectando todo mundo tá conversando E aí as empresas à eles pegam essas contratações colocam numa sala só que elas esquecem de entender se todo mundo compreende o que o outro executa E aí a gente começa a ter certos gargalos em desenvolvimento gargalos cara tem n projetos que eu já vi gigante que muitas vezes morreu na praia ou quando não morreu se distanciou do ponto de entrega por quê Porque existe uma um abismo entre as áreas lá dentro P eu desenhava uma coisa linda

sem o back sem o Fronte saber então os programadores nem sabiam na hora que chegava na mão dele aí o a empresa já tinha pedido o escopo de projeção que que ia ser entregue quanto tempo ia levar aí o programador só recebia um mapa lá das funcionalidades só que ele não imaginava que ia ter um um choque de tecnologia que ia ter um problema sério ali entre entender Qual que é a navegação que hoje um simples protótipo resolve isso daí para muita coisa eu falo isso daí a muita gente meu vamos fazer um protótipo vamos

pega aí o protótipo chama o programador Senta aqui troca uma ideia comigo funciona tecnologia bate faz sentido é legal e bacana você trazer o programador para dentro desse universo de experiência que o Yi tem por agrega valor para ele ele começa a compreender alguns cenários e ele traz a expertise dele pra gente para falar sobre cara por que que isso funciona nesse Formato na tecnologia E por que senão ó Isso carrega desse jeito puxa no servidor vem assim o outro carrega na máquina do cara e aí você começa a melhorar o teu processo e auxiliar

a equipe né mas é um lance ainda é um pouco pesado pra galera colocar na mão que eles tem que abrir mão do Eco e falar mano vamos caminhar junto boa sensacional inclusive o protótipo ele é excelente para ajudar nesse processo ali de definições né porque é muito mais barato modificar no protótipo do que por exemplo modificar no no código né digamos assim né então é muito mais muito mais barato né modificar ali no no protótipo e acho que até tem uma etapa anterior do protótipo do Wi frame que é muito mais barato ainda né

pensando também no no no tempo ali de de quem faz o projeto da da interface e tudo mais né da da aplicação e e o e o protótipo também ajuda muito na em MVP né então não precisa ser acho que que nada robusto né Por exemplo colocar ali um uma a pessoa para construir passar um mês inteiro construindo uma interface né Acho que ajuda muito também até ter respostas mais rápidas os os times se alinharem também muito mais rápido e já dizer olha isso funciona isso não funciona isso é viável ali na hora de implementar

isso não é viável e e que isso se ajuste e comum ponto importante sempre sem abrir mão daquilo que daquilo que precisa ser entregue no final de valor para para quem vai usar que é o usuário né E aí tem muito essa percepção né do valor que eu vou entregar pro meu usuário que vai usar aquela aplicação no dia a dia daquilo que a gente quer colocar no projeto e que às vezes a gente tá querendo colocar ou só para ficar mais bonito ou só para deixar mais eh colocar um alguma coisa ali para enfim

para até se se mostrar Tecnicamente em alguns aspectos e às vezes é pura perda de tempo né porque às vezes a gente perde o foco de debater o que que é realmente relevante ali para a entrega final do usuário e debater isso em cima do protótipo que ajuda muito né a dará muita tração e velocidade né para já definir rápido né Isso é muito é muito do que acontece no mercado hoje que a gente costuma chamar de perfumaria Às vezes você tem você tem os elementos que você vai incluir numa página que vão dar um

destaque para ela em nível de beleza às vezes uma arquitetura mais robusta um visual mais atraente Só que já tem outros pontos que não vão ter necessidade de est ali que vão consumir do celular na maioria das vezes que vão consumir eh das pessoas ali ao olhar nela vai consumir às vezes um atrito ali Nossa essa cor não tá batendo esse efeito que tá fazendo aqui às vezes o cara faz aquele efeito maravilhoso na tela só que aí ele faz aquele efeito na hora que abre no splash no mobile ali De repente ele faz de

novo na hora que faz uma transição aí ele faz de novo meu se torna cansativo consumindo e a gente muitas vezes quando a gente tá desenhando do lado de cá isso principalmente quando você fala no mobile é muito bacana você olhar pro desenvolvimento entender como é que é a carta de arquitetura que eles montaram ali meu Chama o Rodrigo lá Fala Rodrigo como é que vocês pensaram no projeto E aí você parte da ideia que veio deles para você fazer essa estrutura de desenho porque muitas vezes você lá vai montar uma arquitetura já pensando no

quanto que Essas funções nativas ou não vão consumir do celular o quanto que isso daí vai realmente pesar pro usuário na ponta e e assim vai você vai colocando bom é imagens hoje a gente tem várias várias Sacadas os celulares já tão maravilhosos a internet net tá incrível e no final das contas um svg ou uma outra linha ou vários um ebp aí funciona maravilhosamente bem só que mesmo assim você tem que ter essa regra e muitos muitos não t as empresas elas contratam a profissional para ele fazer entrega mas a empresa não sabe na

maioria das vezes como que é que aquele profissional se contenta em trabalhar e como que ele executa aquilo ali então quando você pega algumas equipes que realmente olham para esse contexto meu é muito bacana você trabalhar com alguém que tem boas práticas de aplicação a pessoa que tem uma documentação qualificada a pessoa que olha para aquele processo e fala meu eh se a gente trabalhar esse campo nesse formato talvez é melhor E aí quando você tem essa sinergia entre as equipes programação ux ui cara a evolução do produto é muito maior é é tipo assim

Surreal de se ver a diferença como salta lá na frente e claro a gente não tem mais dois TR meses às vezes para mentar determinados processos dentro de uma empresa sim total cara eu confesso assim que isso quando eu trabalhava com frila Teve uma época que eu pegava bastante frila para fazer e teve uma vez que me doeu muito no coração que eu gastei assim um final de semana fazendo eu já tava quase pronto o projeto que eu ia entregar para um cliente e eu passei um final de semana assim adicionando um monte de coisas

a mais ele não tinha me pedido aquilo e eu comecei a adicionar Perfumaria literalmente comecei a adicionar uma coisinha ali e aí eu fui todo empolgado mostrar para ele e ele falou assim tira não quero isso E aí eu falei assim cara e eu tá bom vou ter que tirar porque primeiro que ele não tinha me me pedido por aquilo e nem também ia me pagar por aquilo e no final das contas ele não gostou e eu achando que tava arrasando assim eu falei assim mas é são são tudo aprendizado né mas agora entrando um

pouco no no teu processo assim como que é o seu fluxo de trabalho quando você recebe um projeto por exemplo Will precisamos criar um aplicativo de delivery de de sei lá de de comida por exemplo você começa com por documento por documentação você começa fazer um rascunho por um Wi frame da vida Ou você já vai direto pro figma como que é esse seu fluxo aí eu gostaria muito de direto pro figma mas eu você bem sincero contigo o primeiro ponto quando chega de um cliente a gente vai batendo papo faz um KickOff Na verdade

o KickOff já tá a partir do momento que você já fechou com um cara geralmente quando ele vem trocar essa ideia falar sobre ó te indicaram tô querendo fazer um projeto assim assim assim as primeiras perguntas já são vinculadas a você tem uma equipe já junto de desenvolvimento você quem são as pessoas que vão tocar o projeto porque às vezes eu vou entrar numa fase Independente se for um produto ou um projeto eu vou entrar numa fase de desenvolver essas interfaces e muitas das vezes eu não vou participar Depois dessa continuação como um frila já

no caso desenvolvimento ele permanece porque ele vai tomar conta desse produto ele vai fazer esse produto evoluir nessa casta e continuar fazendo testes e outras informações então a minha primeira conexão com o cliente é tem um time tem ou seja tem um front tem um back como é que funciona aí ele explica sobre esse processo aí eu peço para que ele Me conecte a partir do momento em que a gente fechar esse Esopo escopo que Ah beleza vou desenvolver você quer O que exatamente Ah eu quero um aplicativo de comida beleza aí ele vai fazer

um bate-papo comigo explicando primeiro quem são os concorrentes o mercado dele diferencial e tudo mais por ali eu consigo capturar dele a vivência dele dentro daquele mercado o nohow muitos projetos a gente sabe que a pessoa Às vezes não vivenciou aquele mercado não estudou aquele mercado só achou bacana e da hora e fala meu gostaria de ter algo e às vezes sobra uma grana para ela vamos falar um valor aí que cabe na cabeça dela né na maioria das vezes e ela vem atrás de um projeto aí aonde eu tento estancar essa situação para entender

se ela vai ter potencial de fazer o segundo passo porque senão ela vem Fecha Comigo uma interface sem contratar sem ter ideia de um programador sem entender preço sem ter nada de documentação dessa estrutura e sem imaginar que o gasto dela vai estar depois em cada marketing para fazer rodar e atrar gente nessa ferramenta então assim o meu primeiro bate-papo com ele é para entender se ele entende o cenário dele entendeu o cenário dele beleza ele tem uma equipe ele tem uma produção ali já e ele quer profissionalizar isso ele quer trazer mesmo esse aplicativo

pro Ar agora beleza primeiro ponto fazemos um KickOff mando um orçamento para ele aprova Kof na área aí o KickOff eu já chamo a galera junto falo assim ó Então nesse KickOff você já traz comigo aqui o teu programador teu Fronte e bem geralmente separado às vezes é só os programadores mesmo e aí Fala para eles ó vamos trocar uma ideia de igual para igual aí começa a entender o cenário de conexão entre eles aquele naquela reunião nesse KickOff eu vou entender e alinhar expectativa do cliente vou entender e alinhar a expectativa dos programadores também

ver como é que eles têm o que que eles já trabalharam até o momento se eles não trabalharam com que que eles trabalham aí a gente discute tecnologia a gente discute processos que eles utilizam todo mundo é familiarizado com figma ou não já trabalhar vezes com Dev mode lá junto como é que é a experiência deles com projetos aí os caras vão abrir abrir o leque deles ali a gente vai discutir beleza bateu esse papo fechou essa reunião aí eu venho pra estrutura de abro figma adiciono todo mundo que vai participar do projeto inclusive os

devis e ali eu venho fazer estruturação de pesquisa eu inicio pelas pesquisas vai aí a gente vai pesquisa de campo para entender se precisar senão a gente veio pra pesquisa ali só para fazer um um bit dos concorrentes Quem são os Players que estão no mercado desse cara E aí Ali você tem que levantar uma documentação bem grande para você ter essa informação e depois não ficar vamos supor criando o que a gente chama de Ah eu tenho aquele momento Branco simplesmente [ __ ] vazou tudo a cabeça não esse momento a gente evita como

colocando bastante conteúdo dentro das pesquisas Então você vai pesquisando fazendo benchmark entendendo o cenário das outros players e vai levantando isso no figma e nisso todas as equipes podem entrar o momento que quiser observar aí você puxa ali um mod board ou um painel semântico Ali vai pegando as referências visuais pegou as referências visuais aí você já tem um estudo de Campo tem as referências visuais se precisar fazer uma pesquisa terceiro que aí ó a gente vai sair para Campo ou vai sair para algum outro ponto ou vai fazer uma Aquária uma quant para entender

algum cenário do teu cliente aí Geralmente eu conecto com uma pessoa a par para fazer isso tipo eu como freelancer para executar essa parte eu não consigo Então eu tenho outros processos outras empresas para olhar também eu não consigo estar no dia a dia executando Essa parte aí eu delego essa parte entrego e ali volta esse retorno para mim aí desse retorno de informação mais uma vez eu tenho uma rodada ali de informação já eu vou quê trocar uma ideia com o time falar pro time Ó tem as informações aqui agora a gente vai compreender

esse cenário e eu vou trazer aqui as linhas de visão tipo nisso daí eu já peço PR os programadores se eles têm regras de negócio alinhado se eles têm todos os pontos já se já trabalharam a arquitetura que vai ser montada e tudo mais se for possível para que eles passem para mim para que eu entenda o que que eles estão pensando no banco na lógica na brincadeira deles ali e disso daí eu não sou programador tá não sou é o lance de você olhar e falar assim beleza vamos trocar uma ideia de igual para

igual Rodrigo e aí que que você me fala ah a gente montou uma arquitetura aqui no banco assim porque vai ter isso para isso um para n NN para um pá E aí a gente vai trocando essa ideia nisso eu já vou pensando na estrutura de tela eu vou pensando bem é um vou dar um exemplo aqui colocar um um grande é um iFood beleza é um iFood gente vai fazer então tá teu bent maior tá ali é o iFood a maioria das vezes você não vai Reinventar roda pô tem 1 milhão de pessoas que

tá desenvolvendo um aplicativo lá investimento pesado Beleza você vai olhar PR aquela jornada você vai entender com o teu programador com o pessoal da equipe num bate-papo mesmo ali meu E aí que que vocês estão achando dessa linha de raciocínio vamos utilizar essa função Qual é o diferencial do nosso cliente às vezes o cliente nosso tem um diferencial que é considerado que é uma funcionalidade que não está no ativo às vezes não foi validado aí eu vou conversando com o programador então assim o programador ele consiste ele permanece todo o processo meu de desenvolvimento visual

é aquele ponto ele participa comigo para ele trazer enriquecer o meu processo e para que eu consiga passar para ele tirar dúvida passar para ele alguma situação que envolva o projeto bem uma vez que a gente bateu isso daí junto começa a desenvolver essas telas nesse desenvolvimento de telas terminei todas as telas da interface faço uma reunião com o cliente geralmente e com os programadores na maioria das vezes o cliente vem em segundo lugar e os programadores participam dessa primeira reunião e por quê muitas vezes eu vou desenvolver uma parte visual tá com bem conceituada

com que o programador já trabalhou porém eu quero entender se a tecnologia ficou conectada então tipo assim bem eh entender se o cenário que eu desenhei encaixa na tecnologia se o o o componente que eu que eu criei ali se ele realmente é adaptável pro pro pro programador na ponta você fala assim cara esse componente que você desenhou de calendário aí não tem como eu lodar isso daqui nessa estrutura Eu tenho um nativo que funciona melhor vai reduzir em 70% tempo de desenvolvimento Então vamos lá vamos encaixar ele beleza aí a gente traz então é

o momento de você entender essas composições que você tá fazendo conversar com o programador E aí alinhar com o teu cliente Alin com o cliente vem o cliente junto programador tá junto ali nesse momento cliente e programador troca uma ideia de figurinha junto comigo também isso fortalece a equipe na hora de desenvolver então o cliente não fica fora momento nenhum e o programador também não fica ele sabe o que ele vai receber ali na ponta e aí a gente já começa a entender Qual que é o cenário de entrega Ó essas entregas vão correr de

tanto em tanto tempo material como é que você trabalha que jeito que o programador ou front end ali falo frontend porque da minha época front chend era diferente do do back el em cima Mas hoje vocês estão num outro nível estratosférico nem perto do que eu lembro e assim eh entender o cenário que eu consiga entregar o melhor cenário para ele Qual que é a melhor forma dele receber um handoff tipo assim o que que ele prefere na hora de receber esse processo Como que essa documentação fica mais assertiva e como que eu consigo ajustar

isso daqui para reduzir o impacto lá na ponta pô porque aí eu conversei cliente viu as telas bonito tal se for um projeto menor eu já intensifico conversando com o programador para na hora que eu for apresentar pro cliente já tenha todas as microinterações do protótipo votando porque o cliente na ponta ele muitas vezes ele vai olhar uma tela seca ele vai tentar imaginar mas ele não vai saber então na hora que você tá ali pega o mobile mostra para ele e aí fala para ele Ah é sim ou vai ali no aplicativo do mobile

ele vai ficar Ah legal legal mas e aí agora se você clica Abre o menu faz uma outra ação móvel o que ele quer então assim dois momentos cliente adorou e o programador mais ainda porque ele vai falar cara você fez tudo o que tá dentro do meu do meu conceito aqui então eu não tenho que me Reinventar ou buscar às vezes plugins malucos fora ou alguma coisa do tipo ou até desenvolver do zero para poder amparar eu numa jornada incrível que eu quis desenhar então ali tá tá essa bateu esse merge ali perfeito bateu

nisso daqui tá ok aí eu falo pro cliente ó programador tá alinhado com você tá entregue essa parte visual eh a estrutura já tá com os componentes aí você cria o Style guide que vai junto ali com todos os componentes programador poder acompanhar os estilos as componentização tudo com o programador já tá ciente se for uma programação onde o cara já usa já os tokens e tudo mais aí você executa tudo tudo isso junto mas por quê Porque tudo isso já tá alinhado desde lá da frente quando você colocou o programador no começo da jornada

que era o correto não quando você pegou ele aqui no final e Falou brother tá aqui ó desenha pega o desenho aí agora e se viro Pois é não e com certeza acho que as principais habilidades aqui que fica em destaque de tudo que a gente tá conversando olhando até para soft Skills é comunicação então é o Dev ele não pode deixar de conversar com e outros times inclusive para alinhar a parte de regra de negócios né também entender eh todos esses detalhes e de fato não não não não ser uma surpresa né mas juntos

trabalhar durante todas as etapas aí do do processo e cara tipo muito legal saber assim que são várias etapas que você passa aí eh percorre para conseguir entregar ali uma um projeto né de de interface ali que depois vai se transformado em código mas para fechar com chave de ouro Will Quais são as Suas dicas para programadores que muitas vezes não tem uma formação em design mas querem criar interfaces simples e eficiente Se você pudesse dar algumas dicas para essa galera que cara não estudou design mas quer ter aí uma dicas para como construir interfaces

simples e eficientes olha eu vou falar assim antes de qualquer coisa você já até falou no no bloco aqui comunicação comunicação ela faz você ter uma crescente muito rápida ou ainda mais hoje você pega a garotada que tá chegando no mercado meu se você tiver uma desenvoltura de falar ou de se comunicar ou de pelo menos ouvir bem muitas vezes a pessoa é não quero falar nesse momento e tal mas ouvir bem aquela escuta fica ali observa o que tá sendo feito se conecta com pessoas que estão entregando ou seja Ah eu Tô num time

tem três quatro caras ali que desenham bem para caramba sou programador beleza pô passa pra gente deixa eu ver se vocês tem um portfólio alguma coisa acompanhe o que eles estão desenvolvendo hoje você tem vários comunicadores dentro das empresas que você consegue fazer isso e as empresas também oferece isso daí como padrão pras pessoas fala pro meu aproveita aí faz uma conexão entre vocês e Executa se você não está dentro de uma empresa e você tá fora trabalhando como freeler tentando iniciar nessa carreira e tudo primeira regra que eu te falo é vai procurar referências

pessoas que estão no mercado Já executando acompanha o que eles entregam então assim se é uma agência dá uma olhada no que a agência entrega eu todo dia eu acordo primeiro padrão que eu faço isso há 20 anos aí é entrar em algum site que tem referências visuais Então hoje eu uso muito Pinterest eu uso muito behance uso muito dripple aí você vai falar às vezes para mim assim pô mas são projetos que muitas vezes não casam com a realidade Nossa aqui mas a questão é que você não buscando fazer uma cópia de referência Você

tá buscando realmente entender as cores que foram aplicadas elementos visuais componentes que foram aplicados porque às vezes você vê um componente mobile ali e aí você vê ele Com design com algo que você vai falar meu jamais caberia num projeto que eu tô executando aqui mas às vezes tem um pedacinho daquele componente um botão de fechar uma forma de às vezes fazer uma seleção alguma coisa você olha para aquilo ali e fala meu que diferente vou tentar fazer uma aplicação E aí você começa a juntar essas peças então assim referências visuais S muito bem-vindas independente

da onde você vai pegar elas lembre-se que você não está copiando É para você consumir esse conteúdo e na hora de aplicar é um outro ponto também Para de tentar pegar templates prontos e já aplicar direto é lindo é maravilhoso você vai otimizar muito tempo tal mas tenta fazer ali o componente na mão abre o figma faz a estruturação porque ali você vai aprender posicionamento aprender mar você vai aprender um paging você vai começar a olhar pro que tem pronto fazer uma réplica ali e começar a entender alguns pontos e aí a conexão vem com

o tempo é outra coisa também não é do dia paraa noite mas você consegue aplicar isso em Passos pequenos ao longo do dia a gente só fica bom quando a gente repete o processo então não adianta você Ah não vou fazer hoje e eu vejo muita gente que chega vai consumir um conteúdo que é o quê curso o cara vai lá cumpra um curso me manda um curso e assiste o curso inteiro 30 horas de aula sem mexer em nada só assistindo fechou notebook Nossa assisti o curso do Will inteirinho vou embora agora que eu

sei amanhã não sabe mais nada então assim é pílulas e aplicação pírula e aplicação é sempre isso consumir o pouquinho aplica é a regra cara não tem como cara sensacional inclusive as pessoas tendem a falar muito que ah mas eu não sou criativo eu não tenho criatividade e e a questão de treinar mesmo né a criatividade também ela é treinável né eu lembro que eu não sou especialista em em em desenho de interfaces mas grande parte da minha carreira eu tive que me virar Principalmente quando eu fazia freila e e até hoje eventualmente Eu me

pego também fazendo algum algumas interfaces né fazendo eh o projeto de interface antes de de codar e e uma e uma das coisas que eu fui aprendendo com o passar do tempo é quanto mais você treina você vai aperfeiçoando ali uma ferramenta você vai entendendo melhor como que funciona por exemplo antes eu não fazia ideia de ah hierarquia por exemplo de tipografia né que os os textos né o tamanho do texto se tá [ __ ] se tá semibold eh trabalhar por exemplo com aquele Grid de oito né de os múltiplos ali para para manter

uma proporção né então começa com texto por exemplo Sei lá o texto tem 24 aí depois vem vai diminuindo 18 16 14 vai vai reduzindo ele vai escalando para manter uma proporção Então tudo isso eu não sabia eu fui aprendendo fazendo mesmo vendo outras pessoas fazendo então não é porque eu sou programador que eu vou deixar de de me de me interessar ou de aprender essas coisas acho que acho que é muito legal quando você tem essa oportunidade de Pera deixa eu dar uma olhada ali como que ele faz isso poxa Qual que é o

racional por de trás ali do que ele tá fazendo porque tem um porquê né porque um dia eu perguntei cara como que você organiza aqui essa parte de tipografia cara eu uso aqui múltiplos de de oito aqui o Grid de oito né Eu não lembro o termo correto assim mas eu uso aqui os múltiplos vou escalando e eu mant um um padrão em proporção E aí fica é mais e uniforme né fica mais padronizado e tal e aí eu fui olhando como que esses caras fazem né pessoas que que trabalham aqui que trabalharam já e

trabalham aqui junto falei cara faz sentido e aí eu fui treinando treinando os primeiros protótipos que eu fiz assim ficaram horríveis E aí com o passar do tempo eu fui melhorando fui entendendo como fazer mais sentido mas hoje hoje eu não começo a fazer nenhum projeto sem antes pelo menos ter um rascunho o que que eu geralmente faço quando eu recebo ali o eu tenho uma ideia de um aplicativo ou eu recebo uma demanda de aplicativo primeiro eu vou para um wireframe porque aí eu faço rabisco mesmo aí eu tento focar mais num primeiro momento

na jornada do usuário tipo quais telas vai ter esse aplicativo eh O que que tem em cada tela então eu foco mais em qual é o conteúdo de cada tela e vou rabiscando ali seja num f lá no no tem o Além do figma tem o o fig o fig gen né fig gen Mas você vai direto pro digital você não você do papel não eu já vou no digital antes eu fazia no papel aí eu comecei a ir direto pro digital mais por preguiça mesmo aí eu aí eu abro um fig da vida ou

às vezes eu nem faço no formato de tela no primeiro momento às vezes eu faço no formato de flo coloco o quadrado ó o usuário vai sair daqui ele tem que vir para cá aí depois eu começo a transformar isso em em telas ou às vezes eu vou direto pra tela mesmo e já usei bastante o incal também que ele já tem uns componen uns componentes prontos né já aí é só segurar e arrastar é interessante falar sobre isso porque muitas vezes as pessoas acham que é um processo único e travado igual você falou aí

Varia muito o projeto Varia muito o que você tá executando varia o momento que você tá o tempo que você tem também E é claro sempre compreender se o processo que você tá tomando não vai danificar um resultado lá na frente ou você vai ter que ter um retrabalho Então quando você olha meu igual você falou vou usar o whc por quê tem vários amigos que utilizam ele por quê tá pronto você vai arrastando juntando montando e a rapidez dessa eficiência dessa qualidade é muito boa e por que que ela é boa porque você já

sabe que e como é aquele fluxo você já vai montando o fluxo na tua cabeça é igual na hora que você vem para montar o componente na tela igual você falou ali pô já vou pegando os componentes e ab pistando no airframe Beleza se você sabe que componentes vão numa página fica incrível e é um dos pontos que eu até falo pra galera falo meu pensa no seguinte primeiro entenda que componentes que vão na página porque eu já vi gente querendo abraçar projeto de e-commerce e não sabe o que tem num carrinho de ecommerce e

às vezes você acha que é só o botão então assim igual você falou se você tá no papel você vai rabiscando se você entra pro figc aire isso é um processo legal muito bacana eu adoraria fazer tudo no pap todas as vezes quando eu vejo uma galera aí que desenha mesmo você vê que até os desenhos ficam bonitos Depois de várias vezes que a pessoa desenha então assim e é legal porque acho que é um é um ponto de criatividade é você entender uma jornada e ter uma liberdade para desenhar aquilo ali a gente fica

muito preso no digital muitas vezes sómente muito tempo né que que a gente tem hoje de total é total o que me ajuda muito nesse nesse fluxo de nesse processo né de antes Fazer um rascunho ali é que eu já consigo ir entendendo qual vai ser a complexidade do projeto eu já consigo ir mentalizando ali meio que na cabeça já ter o que que eu vou precisar ali de biblioteca talvez dentro do código e de da onde talvez eu vou ter que ter mais cuidado eu já consigo deixar mais claro toda a regra de negócio

que tá em jogo ali e depois eu consigo até usar isso como uma referência para chamar o cliente ou o stakholder ou a pessoa ali que que que é a dona daquele do projeto a responsável eu consigo chamar ela para validar é realmente isso daqui que eu entendi e aí a pessoa meio que dá um double check na minha linha de raciocínio Não realmente não ou não cara isso daqui não ficou claro para você não foi bem isso que eu quis dizer porque às vezes tem isso né também na comunicação né o cara comunica uma

coisa você acha que entendeu mas entendeu às vezes um detalhezinho E aí depois você descobre eh que não era bem aquilo depois de de fazer todo o trabalho Acho que por isso que antes de escrever código pensar em todo esse projeto antes é importante por isso né que é muito mais de novo barato e rápido validar confirmar tudo ali no projeto eh do que depois perder Dias ali eh de ou horas até de código escrito então Eh Nossa vale muito a pena e outra coisa que eu gosto de fazer muito até às vezes antes de

fazer o wireframe é inspiração Cara às vezes que que eu faço eu recebo uma um uma ideia de um de um aplicativo ou recebo uma demanda às vezes eu tiro um dia para ficar só olhando a inspiração aí eu pego o dribble ali da vida e fico olhando por exemplo filtro ali pelo o legal que dá para você filtrar né você coloca o tema consegue filtrar dá para filtrar lá por Web Design ou dá para filtrar por mobile filtro por mobile por exemplo e começo a olhar Pô gostei dessa interface copio ela e vou jogando

tudo num único lugar e depois Às vezes o aplicativo na a ideia ali de de estrutura visual nasce às vezes da combinação de vários porque às vezes eu acho bonito falo cara Gostei da maneira como o cara colocou aqui essa tela de buscar o produto cara vou me inspirar nessa para fazer a busca de produto Gostei dessa dessa tela aqui que o cara usou na parte de perfil do usuário Achei bem minimalista achei legal então às vezes você meio que não se usa várias inspirações e isso te ajuda muito a aumentar teu repertório né porque

você vai conhecendo como Outras aplicações Por aí estão fazendo isso aumenta bastante o repertório cara uma uma ferramenta que eu não usava e depois que eu passei a fazer projetos principalmente mobile falou vamos fazer um aplicativo e tal eu comecei a utilizar e assinei ela recentemente é o mobin Ah não sei se você já viu que é uma plataforma que ele é tipo assim as melhores os melhores players estão ali dentro então eles fazem todo o fluxo de todas as telas E aí você faz essa navegação por componente Você quer um ui elemento Você quer

um screens shot você que é o app você qu é o flow dele ele mostra tudo e aí cara você consegue pegar os melhores Play mercado aí e fazer entendimento né Por que que aquela tela tem Realmente esse componente o que que essa tela tem nessa jornada nesse momento aqui que impacta para mim então eu tendo essa visão muitas vezes eu já praticamente que eu já defino alguns pontos que estão dentro do segmento da do app do meu cliente então assim bom se é uma áa uma área de alimentação Pô a gente tá falando de

Marketplace então não pegar determinado ó se é um aplicativo que vão fazer para vamos supor aí para eh aluguel de alguma coisa vou pegar um outro para poder fazer tipo um rbm lá aí vou pegar ele vou pegar umas referências e entender o cenário que igual a gente falou hoje o negócio é dinheiro hoje o negócio é você ter tempo entregar uma qualidade pro teu usuário só que respeitar também o que você tem dentro da casa se é uma empresa se é se você tá trabalhando como frila também porque não adianta você precisa de terminar

um projeto para iniciar outro e a gente tem uma referência que é o quê meu primeiro você tem que est sempre bem colocado no mercado bem posicionado você tem que ter projetos que realmente vão entregar valor lá na frente porque se você entrega o projeto ele morre aqui amanhã o outro morre aqui que cas que você vai ter para apresentar no dia de amanhã sim por isso tem que ter um carinho né com aquilo que a gente vai desenvolver entregar né Não só entregar por entregar né acho que é importante entender todas essas pontas e

conectar tudo né cara sensacional Will passaria aqui horas conversando sobre passa muito rápido o tempo aqui muito bom tá aqui falando com você Suas dicas inclusive são extremamente valiosas inclusive muito obrigado por compartilhar todo esse conhecimento com a gente e galera eu espero que vocês tenham anotado tudo e se quiser inclusive saber mais Sigam o Will nas redes sociais que ele compartilha muito conteúdo também inclusive depois eu vou deixar aqui na descrição também a as suas redes sociais e mais uma vez agradecer aí a sua participação aqui e eu que agradeço Rodrigo agradeço mes de

coração cara foi um na hora que você falou para mim Falei pô não tem nem o que falar né tá ali junto trocando ideia acompanha o teu canal acompanha o teu trabalho já participamos ali também fazendo um projeto locket ali então é inclusive galera inclusive Olha só o Will tem um curso de figma é assim é fenomenal o curso de figma dele disponível na plataforma da Rocket Então eu vou deixar aqui também o link do curso de figma do Will também aqui na descrição para você dar uma olhada mas tá tá tá sensacional inclusive lá

no curso né Se quiser dar um um overview você fala ali sobre é toda a parte de cor é cores tipografia é ali o o curso a gente trouxe ele na verdade foi o processo própria a própria Rocket trouxe dele jun rodrig trouxe para mim esse projeto da seguinte forma que era pra gente se basear mesmo e entregar um conceito base de ux ui ali para pessoa poder realmente entender como é que funciona montar uma interface então assim qual que é a dificuldade Qual que é o trabalho E aí a gente vem executando vários pontos

nela até se completar uma interface então você passa por vários pontos do figma vários pontos Dex e de y ali explicando exatamente talvez ou a parte do que a gente papou aqui tá dentro daquele contexto para que você compreenda o cenário Lembrando que lá a gente tá falando mais até da parte web do que de um aplicativo mas em si é igual o Rodrigo falou no começo do bate-papo aqui eh o conceito de uso é o mesmo a moda de aplicar ou seja o processo de aplicação que muda você tá falando de telas menores você

tá falando de prioridades maiores muitas vezes do que você tá ali num simplesmente um responsivo se reajustando então é diferente o processo mas assim você vai realmente entender na hora que você olhar o projeto Ali você vai falar meu tá realmente de acordo com que a gente sensacional e galera não se esqueça de deixar o like se inscrever aqui no canal e ativar o Sininho para você receber mais vídeos como esse Claro comenta aqui também embaixo aqui nos comentários qual foi a maior dificuldade que você já enfrentou ao criar uma interface vamos trocar uma ideia

deixa aqui nos comentários valeu pessoal e até a próxima valeu valou tchau tchau