[Música] Opa estamos de volta com a nossa jornada w e hoje temos um convidado especial para o nosso tema para você que estava esperando finalmente trabalhar com uma ferramenta de design chegou a hora quero apresentar para vocês o David e o ex designer Senor e mago das interfaces digitais Fala David como é que você está Oi aí giov tudo bom prazer estar aqui com você fazer esse conteúdo pessoal da jornada yx Opa David pra gente começar como é que você caiu nessa Dex designer o que que aconteceu como que você foi parar aqui então eu
comecei a trabalhar com design em 2009 tô ficando velho já né e eu era Web Designer comecei sempre tive o foco em design digital então comecei a trabalhar com we designer fui um pouco frontend e nessa minha caminhada passando por empresas de TI agências Até que foi um caminho natural meio que uma evolução natural as coisas foram migrando a área foi tendo um entendimento melhor sobre o que é design O que é programação dividindo as coisas segregando deixando cada um na sua caixinha então foi meio que um caminho natural foi a evolução ali do Web
Designer né pra IX antes mesmo existia muitas coisas que eram tipo web Master Web Designer que eram pessoas que além de fazer o ex fazer layouts criar ap criar telas aplicativos elas T um monte de trabalhos cuidavam de banco de dados e tudo mais depois is foi ficando cada vez mais afunilado e o Wax design ele nasce muito disso daí também Wax focado em usuário em experiência do usuário eu vi que você tem um podcast também e praticamente eu vi muito figma sendo falado lá por que figma juntou essa legião de Adoradores porque as pessoas
gostam do figma Sim é no meu canal falo bastante de design Dex de nos podcasts e tem o playlist de figma também Então quem quiser assistir depois pode procurar por pelo meu canal e o figma ele conseguiu ter essa expansão porque ele veio com uma proposta diferente ele veio com uma boa usabilidade né com uma boa experiência pro usuário coisa que a gente tinha dificuldade em outras ferramentas né as outras ferramentas Tinha alguns porquês aí que a gente pode discutir então o figma veio com uma ótima prototipação uma ótima colaboração e trouxe uma abertura para
que a gente pudesse trabalhar com através do navegador sem necessariamente instalar ferramenta de uma maneira mais leve de uma maneira que os devs e as outras pessoas envolvidas no projeto conseguem integrar no no no processo então por isso que ele ganhou essa expansão e também Claro porque ele era gratuito né apesar de hoje em dia ter a versão freemium né Ele é um software freemium tem a versão paga mas você consegue utilizar quase que tudo assim ao menos que você seja uma empresa ou precise realmente de uma equipe você consegue trabalhar de forma gratuita e
até mesmo do navegador então Esses foram os motivos que fizeram com que o figma se tornasse o que ele é hoje então pra gente já entender que para ter uma uma boa programa para criar o ex design para fazer design tem que ter o ex design também envolvido dentro do desse processo o figma ele é difícil de aprender se imagina que eu nunca mexi com nenhuma dessas outras ferramentas anteriores ao figma não tenho nenhuma ideia sobre design é muito difícil para mim aprender o figma Não não é difícil a pessoa só vai ter que se
dedicar para aprender eu vejo que a curva de aprendizagem do figma é até menor do que outras ferramentas que eu você deve ter lidado no passado e outras ferramentas que tem aí no mercado a curva de aprendizagem comparado com outras ferramentas Na minha opinião é bem tranquila e dá para você aprender figma mesmo que você saia do zero é questão de prática de pegar o software e Debar em cima dele para aprender né a ferramenta ela é é até tranquila a a a gente falou de ex da ferramenta né a usabilidade da ferramenta ela causou
tanto impacto no mercado que outras ferramentas acabam eh sendo derivadas ou seguindo a mesma tendência dela porque ela trouxe realmente uma boa experiência e uma facilidade de uso que eh outras ferramentas não não estavam tão aprimoradas assim então Eh pegar para praticar a curva de aprendizagem é relativamente tranquila mesmo que a pessoa comece do zero como tudo na vida ou seja vai dar um esforço Então tem que sentar na cadeira e aprender direitinho mas até mesmo falando de ferramentas Nem só de ferramenta Viva o design out a pessoa que tá participando da jornada já tá
vendo que até agora eles não mexeram em nada com ferramenta Ah qual que me dê uma dica alguma coisa pras pessoas que estão começando tanto na parte de Wi como onde que elas deveriam focar os estudos dela fazer uma base boa para criar uma coisa legal eu vejo que elas TM que aprender primeiro fazer design O que é design então entender o processo a metodologia desde a parte de entendimento ideação passando pra prototipação que é a parte final da coisa aprender também sobre princípios e fundamentos de design é super importante muitas pessoas que migram para
essas áreas de tecnologia não tem uma base de design então saber sobre tipografia cor e como aplicar o seu design visual nas mídias né no celular no no desktop é super importante e eu vejo que ferramenta é importante também vai vai ser e é importante para quem tá iniciando porque talvez a pessoa acaba acabe ingressando primeiro na parte mais operacional criando os protótipos Mas ela é uma parte do processo o mais importante mesmo é você ter a base de design Então você até falou as pessoas ainda não mexeram tanto na ferramenta eu vejo que tá
no caminho certo porque elas precisam entender como que se faz e a ferramenta é uma parte desse processo é uma parte que inclusive é mutável a gente tinha outras ferramentas no passado teremos outras no futuro não sabemos como vai ser mas se você tem a base como designer se você entende sobre projeto de design seja qual ferramenta for você vai se adaptar e vai saber utilizar da maneira que que for necessário ou seja se Toda vez você criar uma base bem sólida sobre qualquer assunto pode mudar as ferramentas você vai saber o que fazer com
elas hoje a nossa aula vai ser sobre warframes Style guide você usa bastante eles você gosta de usar eles você acha importante as pessoas saberem isso nesse processo de design sim super importante os dois Warframe que é como se fosse um esboço né tentando trazer de uma forma mais fácil pra galera entender então ele ajuda a gente no entendimento do projeto ajuda da gente dialogar com as pessoas inseridas dentro do projeto desenvolvedores sei lá PMs outros stakeholders para que a gente valide as nossas hipóteses de design para que a gente teste algumas questões de usabilidade
e Antes de Partir realmente para o protótipo final para um acabamento e um refinamento maior a gente já tem a base e já saiba o caminho que tá sendo trilhado ali para onde que a gente vai ir e o Style guide é um documento de design onde a gente especifica o que nós fizemos naquele projeto Então você vai colocar lá os tokens você vai colocar as cores as tipografia os espaçamentos de botões Como que o design tem que ser aplicado para manter a consistência visual porque é super importante dentro de um projeto quando você determina
isso através de um documento você consegue passar isso pras outras pessoas inseridas também nesse projeto para que elas possam seguir essa essa linha de pensamento que foi Projetada pro naquele design perfeito vamos lembrar que o ex design é uma atividade coletiva ou seja muito dos materiais artefatos que a gente faz vai todo mundo utilizar tipo o programador vai utilizar os stakeholders os clientes os interessados no projeto em si ah hoje eu vou fazer um ar frame e um guia de estilos bem básicos lá no figma sabemos que essas ferramentas utilizam formas básicas textos cores utilizam
vamos dizer tipo o body frame a gente sabe que se se Demorou muito para fazer tá errado sim ah o figma é bom para fazer Style guide e wireframe sim Total o figma agiliza PR caramba tanto a criação de Wi frames quanto a criação de Style guides né na na parte de de Wi frames você consegue criar com forma simples né o objetivo é que ele seja simples para que a gente possa validar e testar as nossas ideias e propor as soluções que a gente entende como as melhores E no caso do Style guide tem
muito recurso Então são componentes eh recursos de layout como ao layout variáveis tem uns plugins que a comunidade disponibiliza que agilizam e facilitam o nosso trabalho então ficou muito mais fácil criar hoje em dia e Style guides através do e é a ferramenta do mercado não tem como fugir muito disso facilita para todo mundo porque as pessoas já estão acostumadas com utilização dela é isso então a gente já sabe que a gente tem uma base de conhecimento bem legal e uma base técnica de ferramentas e a gente pode usar o figma para resolver o o
tema da nossa aula de hoje então bora botar a mão no massa e conhecer o figma bem de pertinho de volta com o nosso super Case aqui da nossa jornada vamos dar olhadinha agora sobre como vai ficar meu wireframe digital então eu terminei meu wireframe no papel e garanti que esse wireframe no papel estava Ok então se ele não tiver Ok é só refazer ele aqui no papel que a gente já viu que é muito simples que que faz rabisca beleta joga fora rasga recicla mas crie as telinhas desse jeito aqui e a partir desse
momento eu posso fazer a minhas telinhas de wireframe digital bana que ficou a minha aqui lembrando pessoal que tem lá no nosso grupo além do tema do desafio de vocês tem um monte de tutoria zinhos para ensinar vocês a mexer lá no Google slides no fig j e no figm para que fique bem fácil para que você consiga fazer todos os exercícios e ficar uma coisa parecida do que eu tô mostrando aqui pode ficar até muito mais bonito mas o que mais importa mesmo é o conteúdo bom nessa aula aqui a gente já vai entrar
no figma aqui então então vamos dar uma olhadinha aqui como que eu fiz meu wireframe dentro do figma bom primeiramente eu me baseei nisso aqui que eu já estava no papel então eu não vou fugir disso aqui isso eu confirmei que ia ficar mais ou menos desse jeito e agora vou mexer nele aqui no meu figma bom ah para colocar aqui um link dentro do figma pessoal é bem facinho também vocês tendo uma um arquiv aqui do figma temo dentro na pagin minha vocês podem vir aqui nesse share e você clicando aqui você decide aqui
qualquer um com o link né que seria o certo pra gente poder corrigir o exercício de vocês pode colocar esse can viw aqui que tipo Pode Só ver não pode editar mexer você pode copiar o link depois você vem aqui e cola aqui então se qualquer arquivo seu que ficou muito grande dentro do caser Poxa não ficou legal na tela Cola uma apresentação Zinha dele como se fosse só uma imagenzinha representativa e cola o link dele aqui também então fica fácil para quem tá mexendo também para quem vai avaliar esse case e para quem vai
estudar ele porque daí tem todos os arquivos de vocês todos num lugar só lembrando a gente tá repe bastante isso mas é muito importante porque isso faz parte da construção de portfólio é muito importante que um Case tem um raciocínio lógico tem uma linha uma coisa que você vai seguindo sair daqui e vim para cá beleza bom vamos aqui dentro do meu figma e ver como que ficou o meu as minhas telinhas ó se você for ver bem é as mesmas coisas informações que eu tenho lá no meu Wi frame de papel Então eu só
coloquei elas aqui vou até mostrar aqui rapidinho como que a gente monta isso aqui o vai ter o tutorialzinho vocês podem ver mas mostar PR vocês como que é simples Eu vou clicar aqui e vou criar um frame novo e vou colocar um celular aqui aqui embaixo Aqui no no direito ele mostra para mim algum dispositivo que posso colocar tem computador tem apresentação tem tablet eu vou usar o celular aqui vou usar iPhone 8 beleza coloquei aqui de uma forma muito simples sem pensar em estilos dá uma olhada aqui ó não tem estilos não tem
cor tudo é a mesma fonte tal e tudo tud mais o que que eu vou fazer eu vou começar a montar meu wireframe aqui E para isso a gente vai usar as coisas mais básicas que existem dentro do figma que seria quadrados que vão representar imagens eu coloquei até uma coloração um pouquinho diferente aqui eu vou colocar um outro quadradinho aqui e vou colocar ele em preto Clic aqui no fio seleciona preto e vai ser um botão ó aqui bonitinho aqui já vou começar a alinhar ele aqui mais ou menos na tela vou escrever botão
existem maneiras muito mais avançadas de fazer isso aqui pessoal o figma também é muito bom mas a gente não precisa delas nesse exato momento se não que intuito desse curso também é para você começar a entender então ó ci um botão aqui então vai ter uma imagem vai ter um botão aí eu vou colocar um texto aqui ó título vou aumentar a fonte dele aqui né daí fonte a gente pode já começar dar uma dedicada aqui nessa questão aí aqui embaixo eu vou colocar esse Loren y e até vou explicar para vocês ó posso até
copiar um elemento de um lugar pro outro eu só segurei a tecla Alt cliquei com o mouse ele copia um elemento né como eu posso também apagar clicar contrl ctrl v e arrastar ele aqui pro meu pra minha telinha então para cada telinha minha eu vou começar a colocar essas coisinhas aqui e é bem desse jeitinho que eu mostrei para vocês é formas básicas e Não se preocupe em alterar fonte nem nada talvez tamanho para você saber o que que é um cabeçalho o que que é um texto normal mas é só ir fazendo desse
jeito é uma é bem é bem legal de fazer isso aqui na verdade uma das partes que eu mais gosto dentro do Wax design então aqui ó coloquei aqui bem-vindo coloquei atendimento crii um botão agendar uma visita ó falei até que esse botão ia Tem um ícone aqui no caso do frame eu coloquei falei olha tem um Icone Zinho uma imagenzinha fica do lado ó criei aqui um um triangulinho coloquei as coisinhas aqui você viu que não tem imagem não tem nada de mais é que isso aqui é para mostrar como vai funcionar da mesma
ideia do meu Primio de papel como que vai ficar a estrutura das Telas se for roxo se for vermelho se isso aqui for maior se for menor se isso aqui for canto arredondado isso já seriam protótipos de alta fidelidade e não é o que a gente tá estudando agora o que a gente tá vendo aqui é estrutura e arquitetura de informação ou seja qualquer aplicação ela tem que funcionar aqui antes dela funcionar em qualquer outro lugar então é mais ou menos isso tem que funcionar primeiro aqui se ela se ela não funciona aqui não vai
ter beleza que salve ela se ela funciona aqui pode ser até feio o que for paraa frente mas vai funcionar ou seja o ex designer não trabalha só com conceito de beleza Ele trabalha com um conceito de funcionalidade E usabilidade então tem que ser bom pro usuário tem que conseguir terminar as coisas dele e depois a gente pensa em beleza diferente de projetos mais arcaicos como a gente tinha antes que falava Vamos fazer uma tela vamos deixar bonito depois a gente resolve o problema não não não aqui a gente pensa muito antes então tem um
raciocínio lógico tem uma coisa que eu venho pesquisando desde as outras aulas que a gente já fez para chegar nesse resultado Lembrando que até mesmo as informações que estão presentes dentro do meu Wi frame e que tanto no de papel como no daqui Elas têm que est pertinente ao projeto Ó coloquei o horário de atendimento porque a gente sabe que precisa de horário de atendimento coloquei ou agendar uma visita porque eu sei que vai ter isso coloquei uma um uma questão de aparelhos aqui pro pessoal poder ver quais são os aparelhos que tem que eles
dão suporte porque isso é necessário o é nessa parte aqui que começa o trabalho visual mas tudo isso já foi preparado lá antes então eu não posso chegar aqui sair criando tela sem saber as necessidades dos usuários as necessidades do modelo de negócio Como funciona o mercado quem é a empresa Qual o problema é e qual solução tô tentando entregar e qual e nesse caso aqui ainda que a gente pegou um fluxo né que a gente lado do Golden P então beleza A gente tem essa essa questão aqui então tipo selecionei um fluxo para mim
dos meus estudos e já comecei a fazer o wireframe bonitinho aqui então é bem simplezinho de fazer você vê que você pode ficar copiando as coisinhas aqui ah vou colocar um outro botão aqui posso dar cont contrl ctrl v nele ó posso deixar ele maior posso escrever uma coisa diferente agora isso aqui é importante pessoal Dent do frame eu tô usando esse l y aqui at comentar com vocês que é uma é um texto padrão assim tipo você pode colocar em qu qual lugar ninguém vai assustar de ver isso aqui se você não tem o
que escrever escreve Loren ypson Você pode achar ali dentro da internet você escrevam Loren Y vai S um dos primeiros sites aqui você pode clicar nele e clica em generate ele vai criar esse textão aqui para você e você pode ficar copiando esse pedacinho aqui isso aqui é só para não colocar coisas dentro do Design que às vezes a gente vai apresentar isso para alguém a pessoa olha mas isso aqui tá errado ó a empresa não começou esse ano não não é para focar na funcionalidade não nos textos ainda então aqui pode colocar esse lorem
Y aqui que é super aceitável então não sabe o que escrever coloca lorem Y Beleza então fechou e aqui uma das coisas muito importante dos Wi frames é sempre colocar pelo menos aonde vai ter o botão ou quando tem uma ação nunca escrever lur Y escrever botão aqui que nem eu fiz lá no outro lá isso aqui vocês não podem fazer sempre escrevam o que que essa ação vai fazer agendar uma visita ou até mesmo os cabeçalhos aparelhos depoimentos a pessoa saber o que que é aqui eu posso escrever título aqui isso aqui não faz
muito sentido quando eu for apresentar para alguém pessoa ah título mas título do quê Ah título da parte de depoimentos Ah não não então escreve depoimentos então Sempre coloca identifique coloca bem claro ó contato se for um menu menu bem-vindo os textos internos não precisa muito mas os botões são muito importantes porque eles que vão dar uma ação agendar uma visita Então vai ter um botão de agendar uma visita se inscrever só o botão a gente pode se perder beleza bom aí a segunda etapa que a gente vai fazer depois que a gente tem nosso
War frame digital é agora começar a pensar num Style guide deixa até fechar aqui Opa vamos apresentar de novo para ficar bonitinho aqui bom o que que é o Style guide o Style guide é um guia de estilos é um estilo é um documento técnico que dá orientações sobre Fontes cores estilos Agora eu tenho tudo isso aqui eu vim lá de trás lá agora hora que eu vou começar a pensar no meu Style guide Beleza então agora que eu já tenho meu case que eu tenho minhas coisinhas aqui eu vou começar a pensar lá no
Style guide Então agora que eu vou falar de fontes cores e estilos que o produto deve ter Então esse documento é importante para manter a consistência visual dos elementos durante a utilização do produto garantindo que todo visual vai estar coerente em todas as páginas dos elementos Então beleza que eu vou ter que ter aqui Ah agora eu vou começar a pensar a pensar na aparência e para isso eu vou criar um documento porque esse documento ele vai reger o site inteiro então o que que vai acontecer com esse documento ele vai falar para mim é
essa fonte que usa é essas cores que usa porque tudo tem que ter consistência consistência é uma questão muito importante dentro do ex design eu não posso est dentro de um produto ou dentro de uma experiência e do nada mudar as cores não saber mais onde que eu tô e tudo mais e o Style guide é Quem garante isso daí e esse é meu o super Style Guy que é bem simplesinho ó a letramania ele já tinha um logo então eu peguei o loginho deles aqui tem um Ráo tem uma fontezinha aqui tal não é
o mais bonito do mundo mas já é um login e o que que eu vou falar no meu site eu vou usar essa fonte chamada osvald b e vou usar uma outra fonte chamada op regular vou falar isso aqui são minhas tipografias e vou colocar um exemplinho de uso delas de texto título do texto coloquei aqui como que fica mais ou menos e o texto Isso é para G antir que as fontes sejam legíveis que todo mundo tá conseguindo ler que as fontes estão de acordo e aí vem uma um processo de escolha Lembrando que
o designer de wx ele não vai escolher somente uma fonte ele vai falar assim ah vou escolher uma fonte porque essa fonte é bonita não ele vai levar em consideração outras coisas também que a gente pode ter até colocado dentro dos estudos imagina que a gente tem uma Persona que tem uma um algum problema com a visão dela tem alguma deficiência com a questão de de de enxergar de de de de ler textos coisas assim parecidas ou até mesmo dislexia ou qualquer coisa parecida a gente vai escolher Fontes que façam sentido nesses sentidos também porque
tudo se trata do usuário então É bem interessante até mesmo dos tons que podem ser escolhidos existem ferramentas que podem ser para da tônicos para Out para outros distúrbios que a gente tem de de divisão também então aqui eu vou fazer bem simplesinho e vocês podem fazer bem simplesinho na Internet vocês vão achar coisas que tem um monte de detalhes tem ícones e tudo mais mas o básico disso mesmo o que vocês precisam entregar e que é al o básico que é a base mesmo é Quais s a tipografia um exemplo de uso da tipografia
com título e texto e quais são as cores então eu vou usar esse púrpura o chumbo um amarelo e esse bege que eu tô usando aqui no fundo também então tipo essa aqui são as corez que eu vou usar escolhi quatro cores e está ótimo pode ser duas que você tenha Lembrando que esse chumbo eu escolhi que cor dos meus textos né que é o preto mas você pode colocar preto também pode colocar branco pode escolher as coisas que você vai est utilizando dentro do seu layout lembrando de novo muita informação aqui pode atrapalhar o
projeto também olha só eu achei bem simples o figma É bem intuitivo comparado com os outros softwares que a gente estava falando aqui né que que você acha mais ou menos assim vend esse exemplinho assim ah muito tranquilo até porque a gente já passou por tanta coisa né que tanto softwares gente que é mais velho sabe como que era a dificuldade então eu vejo que o pessoal deve ter feito feito com tranquilidade aí bom bem facinho mesmo você sabia que aqui na ibac tem um curso específico para quem quer prender figma sabia é tem um
curso bem bom aqui me disseram me disseram por aí pessoal agora chegou a vez de vocês para deixar o seu Case bem bonito e completo preciso que você crie um arquivo no figma que contenha seu wireframe digital e seu Style Gu lá no Case você precisa explicar qual é a vantagem de usar wireframe e o Style guide e colar o link do seu arquivo Lembrando que todos ess materiais devem ser criados com o tema do desafio que você encontra no grupo lá da jornada David falando em links Como que eu posso achar o seu podcast
Ah é muito simples quem quiser me encontrar na internet basta procurar por David Art com y no final Tif of design você vai encontrar no YouTube no Google no no Spotify quem que gostar de Podcast vídeo tem conteúdo de todas as maneiras para que as pessoas possam aprender e o ex aprender e o y design também comigo perfeito Aí sim foi muito legal est aqui com você o ex design tem uma comunidade muito grande muito forte assim e é muito legal sempre ter essas trocas é uma coisa que a gente vê acontecendo diretamente em diversos
locais que é o pessoal conversando em comunidades conversando em grupos conversando e tudo mais então aguardo vocês para a próxima aula vamos aprofundar mais sobre a criação de interfaces
