Gestalt no Design Gráfico

E aí a Gestalt tá cara Gestalt basicamente ele é o estudo das formas tá é o estudo de como a gente interpreta fotografias imagens é como nosso cérebro interpreta essas essas informações tá então eu chamo que Gestalt ao código-fonte do designer porque se vo quando você começa a entender as leis básicas no Gestalt tá você vai começar a perceber Como como modelar as coisas e como os desenhos funcionam e como a comunicação visual funciona como nosso cérebro que codifica a as imagens que a gente produz as fotografias que a gente produz os designers que a

gente produz eu não sou um exímio a profundo conhecedor de Gestalt peço dos peço licença que poética a a psicólogos tá porque existe também uma grande uma grande vertente de estudo de psicologia em Salt certo quem foi o cara que que veio a trazer a Gestalt foi esse carrinho aqui foi o Max Hitman tá isso 1880 foi o cara que começou a juntar artefatos e começar a estudar começa falar sobre Gestalt e que gastar eu tinha uma palavra alemã aqui que fala que significa forma ou figura tá então é um estudo em resumo é um

campo de estudo da psicologia da forma o princípio básico tá da da Gestalt é que disse que o seguinte que o nosso cérebro ele primeiro enxerga o todo para depois e decodificando as partes então toda vez que a gente tem um layout eu tenho alguma peça tudo que eu vou falando aqui vou falando já na parte de designer e prática tá então eu vou dar exemplos práticos então toda vez que a gente produz uma Peça a primeira coisa que a gente faz é enxergar o todo a gente enxergo conjunto e depois que a gente vai

ver classificando-as para as pequenas partes vou a ter visto essa imagem que muito clássica que tem a mesma são dois rostos e também é um pé de uma mesa né então nosso cérebro fica brigando lá mais adiante a gente vai ver um dos princípios que forma isso mas ele fica brigando para entender o que que é a imagem né mas primeiro de tudo vocês olharam o conjunto e depois a gente foi olhando as formas separadas então basicamente Gestalt explica isso uma coisa que eu quero deixar claro aqui que a seguinte a Gestalt muitas vezes a

gente tem mais de uma lei aplicada um determinado objeto ou peça ou comunicação enfim tá então a gente vai ver mais de uma mais de uma lei aplicada ao mesmo tempo então elas dificilmente são completamente isoladas umas das outras tá aqui é um exemplo tá de como a gente vê a gente tá enxergando quando a gente olha para sua estante a gente tá vendo uma estante com livros com tudo então depois que a gente enxerga essa estante Oi gente começa a olhar para os livros a olhar detalhe por detalhe e aqui tem um pouco mais

as peças por peças daquela instante mas inicialmente a gente viu a gente viu uma estante cheia de livros Isso já é um signo nossa cabeça de enxergar aquilo nosso cérebro decodifica aquele conjunto completo de informação aqui também tem uma outra questão que nosso cérebro muito é muito peculiar que no momento que a gente enxerga as estrelas bolinhas aqui a gente tá enxergando as três esferas porém ao mesmo tempo a gente tá enxergando na verdade um triângulo a parte de baixo ou que a gente tá enxergando né então o cérebro complementa essa parte que falta mesmo

a gente não querendo isso é Gestalt e parece mágica mas é o que o nosso cérebro funcionando e trabalhando para completar as imagens e decodificar essas informações tá então para que que serve a Gestalt né Qual a função que a Gestalt tem a ferramenta obviamente muito poderosa muito poderosa para tá criando principalmente para gente que trabalha com o visual né tá criando formas está criando comunicações de uma maneira muito poderosa então por exemplo a coca-cola é uma é uma é uma marca que utiliza muito da Gestalt né muitas peças da coca-cola tem muita Gestalt por

trás por isso que ela consegue ser tão emblemática e nos lembrar tão facilmente aqui por exemplo a gente consegue enxergar Mesmo não tendo nada a garrafa né garrafa de coca-cola então isso nada mais é do que o nosso cérebro que já foi muitas vezes aplicado né a imagem da garrafa né então hoje a gente consegue enxergar garrafa sem se ela precisar estar presente aonde stout basicamente é para gente conseguir comunicar de uma maneira muito mais efetiva e muito mais a profunda tá então basicamente quem eu disse para vocês que é entender o funcionamento do cérebro

que é o mundo é tão complexo e o servo se desenvolveu com estratégias para lidar com essa confusão isso é uma coisa muito interessante para quem gosta de neurociência Eu gosto muito de neurociência e na neurociência a gente a gente estuda como o cérebro faz para decodificar coisas né então o cérebro como a gente lida com muita informação tanto tanto visual quanto olfativa quanto o sonora quanto a de Paladares sentimento então tem muitas informações nosso cérebro é um grande processador Itinerante acaba ocorrendo que a nossa mente com o decorrer do tempo quando a gente é

bem bebezinho e começa a desenvolver o cérebro começa a desenvolver caminhos e atalhos tratar processando essas informações de maneira mais rápida então a gente começa a criar padrões né padrões de tanto de objeto os padrões de informação para que a gente consiga digerir de uma forma muito mais simples o problema existe uma coisa chamada navalha de occam tá se vocês pesquisarem isso é muito interessante chamado navalha de ocam que diz que a nossa mente sempre vai procurar a solução mais simples por um problema então se você tiver uma interface na qual tem Muita confusão Eu

uma interface que tem apenas um botão você vai perceber que se você fizer um teste AB os muito consideravelmente o número de pessoas que não consegui utilizar a coisa mais simples será muito maior do que aqui vão utilizar a coisa mais complexa isso a gente vê muito em softer né que sobra tem muitas normalmente o programador que não manja muito de o ex né e Uai tem muita informação sobre aposto e tudo e acaba não sendo muito funcional por quê Porque o nosso cérebro tem a tendência de simplificar e tomar decisões cada vez mais simples

ele não quer passar trabalho né você eu sempre economizar energia daí aqui que eu tava falando também que ele acaba agrupando né o cérebro agrupa coisas e informações de com características comuns entre elas para que fique mais fácil da gente tá memorizando tem uma documentário Depois eu deixo aqui nos nos comentários do YouTube que é muito legal de ver que é sobre memorização tem no Netflix e é um grupo muito grande de cara os caras são excepcionais memorizadores tem campeonato mundial disso tem caras os caras memorizo milhares de números milhares gráfico 18 horas memorizando o

número o número de grantesco assim até o fim e eles utilizam técnicas de agrupamento de informação para tá chegando nesse resultado tá então quanto mais forte for o grupo mais forte águia stout tá então quanto mais forte for o grupo de informação que a gente consegue Ah tá quando você conhecer os princípios quanto mais forte foram esses princípios mais forte a gastar o que se dá tá então aqui tem um pouquinho que o grupo tudo que é balanceado então tipo algumas peças são boas porque elas utilizam um pouco de um pouco de um princípio outro

pouco de outro princípio para que essa mescla e esse equilíbrio funcione bem em nosso cérebro não torne isso algo carregado demais enfim tá então vamos lá para os princípios existem escolas existem momentos linhas de pensamento que tem oito princípios tem minhas pensamentos fala em 10 princípios tem escolas que falam em seis princípios então eu não quero me ater aqui a regra está escrita na pedra então aqui eu trouxe as seis principais princípios da Gestalt com esses 6 princípios aqui vocês podem depois dá uma olhada enfim se aprofunda tem tem alguns princípios aqui que se desdobra

em mais de um Então mas a 46 se Vocês conseguem ter uma grande uma grande visão do que que a Gestalt EA partir delas você já vão conseguir melhorar muito o design de vocês e o processo criativo de vocês tá então vamos lá o primeiro delas é a similaridade tá primeiro princípio da Gestalt é similaridade o que que é similaridades elementos de design que parecem de uma forma semelhante que podem ser através de cor forma outra banho são percebidos como correlacionados tá então que acontece no momento que a gente tem elementos com uma mesma forma

uma mesma cor ou com uma mesma até tamanho também com a mesma medida do que que o nosso cérebro faz e vai lá e agrupa os objetos então aqui é um exemplo bem clássico aqui que a gente tem três esferas três quadrados três esferas três triângulos e três esferas e assim por diante o que que o nosso cérebro automaticamente já fez ele já agrupou e a grupo que as três esferas e as três linhas de triângulo tá então a similaridade objetos similares eles se conectam entre eles está aqui na similaridade na geometria é que eu

coloquei eu nem sei porque eu coloquei esses lados mas não sei que a gente pode passar adiante que fica mais fácil da gente mostrar adiante aqui os três elementos construtores tá então que eu falei cor forma e tamanho Deixa eu ver se eu tenho um slide aqui que ele fala não tenho mas aqui por exemplo a gente já consegue ver através de cor tá lembra que em cima aqui no preto por exemplo a que tem no preto certo então nosso cérebro foi o que ele pegou forma já que não tem cor e não tem tamanho

todos os tamanhos são iguais todas as cores são iguais ele foi na forma tão forma ele já ele Conseguiu agrupar em três em quatro em dois grupos né dois grupos distintos as esferas e os triângulos quando a gente tem cor mesmo que o olho de vocês nesse momento e para linha ele não olhou mais para as esferas e nem para os triângulos e meu pra linha azul e se chama muito atenção então através da cor a gente consegue fazer um agrupamento Aonde é que eu consigo ver isso de uma maneira muito fácil cara se você

olhar em layouts por exemplo de vou botar no Instagram aqui vamos ver se eu consigo ter uma maneira muito fácil de mostrar para vocês interfaces de sites e instagram ou qualquer mídia digital é muito fácil de mostrar isso por exemplo aqui ó aqui por exemplo esse post aqui a gente tem cor diferença de cor Então as 5 maneiras ou não e os cinco maneiras eu deixei da mesma cor então automaticamente nosso olho olha para isso aí tenho laranja que em outra cor então o dividiu no layout em dois tipos ele tem três elementos básicos aqui

tem o fundo que é uma cor verde tem essa outra cor O que é um brinco é o areia um begezinho e tem o laranja né então por exemplo aqui também aqui por exemplo ó aí eu tenho lá eu tenho laranja do fundo e eu tenho verde o verde Eu Quis colocar aqui colocar aqui os bebezinhos eu botei aqui aqui aqui quando você olha para a imagem deu certo vai decodificando por pedaços a imagem ele olha o inteiro e depois vai depois de ficando quando eu tenho uma maneira fácil de mostrar por exemplo uso a

aproxime dar uso a similaridade de uma maneira bem feita teu cérebro tem um conforto visual né ele atrai o teu olho Mas ao mesmo tempo fica fácil de decodificar porque eu fui agrupando as informações com coisas diferentes tá isso Insight também tem muito a ver por exemplo um botar o site da Nike Nike ponto com e não sai de qualquer Tá mas por exemplo e vamos ver se ele tem aqui Um exemplo que eu posso dar tá e agrupamento de cores botão é um agrupamento a a forma tá vendo a forma do botão ela é

semelhante a outra então toda forma que de Botão é semelhante nosso olho vai ter uma maneira ar eu sei que isso aqui é um botão né então a forma de aplicar facilmente é a interface por exemplo a gente tem uma maneira muito fácil de ver quando tá quando tá Esse princípio ativo Tá eu vou adiante aqui pra gente não se perder cor tá então cor é uma maneira da Gente Tá formando a similaridade é através de cor por exemplo que cortar melhor mesmo que eu fiz um a gente colocou vários diferentes a gente com o

nosso o nosso olho agrupa os azuis e Os Pretos então a similaridade mesmo que o a forma não seja igual através da cor a gente tem a similaridade forma é outra segunda maneira que acontece a gente tem várias várias em vários quadrados quando eu mudo os quadrados automaticamente nosso olho consegue interpretar e agrupar formatos diferentes então agora a gente tem os quadrados aqui e as esferas aqui tá então forma é uma outra maneira está grudando e a terceira maneira é tamanho então é a mesma coisa eu tenho as esferas diferentes aqui então eu tenho esferas

maiores esferas menores ao topo se eu tivesse uma terceiro nível de esfera eu já começar ia ficar fraca a minha Gestalt Que carga está o forte é quando eu tenho ela simples Eu tenho dois objetos só de tamanhos diferentes eu consigo facilmente agregar se eu tivesse um tamanho intermediário já Ficaria um pouco mais difícil se diluiria essa percepção né então o princípio da similaridade explica isso tá exemplos práticos e exemplos práticos parece que são um slide aqui por exemplo similaridade que que eu consigo fazer cor forma e tamanho aqui eu tenho três formas aplicadas cura

eu tenho o azul diferente do azul de frente do vermelho e o branco do fundo né então tem as cores a o circo e te a mãozinha eu consigo ter um olhar e também as fontes minha Grubba e todas as vermelhas as coisas vermelhas minha Grupo em outro grupo forma mesma coisa eu tenho as tipografias semelhantes pode ver que todo esses vermelhos aqui eu consigo interpretar que são semelhantes entre eles têm algumas diferenças mas são semelhantes se agrupam e o circo e também é as todo ele tem uma forma semelhante eu consigo enxergar isso e

tamanho também porque tenho várias perspectivas de tamanho porém eu consigo por exemplo no circo e te enxergar um tamanho só isso me atrás para colorir interface que eu te aqui tava fácil de mostrar para vocês o a assembleia é muito fácil de enxergar aqui ó objetos por exemplo vou dar um zoom aqui e se consigo dar um play aqui e aqui fica mais fácil a nesse nesse nesse bloco de baixo aqui tá vendo que tem vários cards esse Card aqui é igual de baixo é igual de baixo o que que acontece nosso cérebro confortavelmente entende

que o pai isso aqui é um isso aqui tem um padrão aqui né então ele se repete ó tem um padrão e cima outro embaixo outro embaixo tem uma eles são similares Então tem um conforto esses um conforto cognitivo aqui para a gente está interpretando essa informação mesma coisa os botões aqui tem um contraste bem grande com o resto né então a cor faz com que a gente enxerga o botão na hora e consiga fazer já o link para sabendo que a poli é uma ação de alguma coisa né então objetos que são iguais vão

se agrupando então no momento se eu fizesse um botão com as bolinhas quadrados daqui a pouco um botão com as bordas Redonda um botão com a borda enfim triangular eu não teria uma Gestalt forte né então eu teria uma ele era hierarquia de design mal bom então por isso que quando a gente pega um design System a gente tem que vocês percebem que tem toda uma estrutura montada baseada em mesmos elementos né quando vai usar botão os mesmos botões quando vai usar tipografia usa as mesmas tipografias porque tudo isso tem a ver com a chance

de similaridade tá no próximo aqui um longo de sushi por exemplo a cor e forma eu consigo enxergar que o todo todo o conjunto preto se destaca do conjunto da cor do fundo né então consigo perceber muito facilmente essa essa diferença e eu tô usando de uma maneira muito fácil restaurante aqui e aqui um ambiente por exemplo a gente tem aqui o fundo tá vendo que existe uma similaridade que entre a parede aí a gente tá enxergando todo todo o ambiente da parede como sofás por exemplo então é um grupo de objetos ó a gente

a gente consegue agrupar os sofás no grupo as paredes eo teto enfim todo o resto em outro grupo a gente consegue agrupar também as tá vendo as luminárias tem a sua luminária aqui a sua luminária que aquela lá de cima e o da minha mesa é um outro grupo de objeto isso por isso que quando a gente olha coisas bonitas a gente não consegue entender como vaca como é que conseguiu ficar tão bonito por isso que eu desbloqueado stout ela é o código-fonte do Design é a como é como a gente descreve né como já

está escrevendo aquela forma bonita existe uma fórmula para trás disso matemática né que não é matemática mas enfim existe uma fórmula por trás dessa dessa beleza existe técnica por trás e essa técnica é o isto e aqui um pouco também a gente tem que que acontece a similaridade nos objetos de todos os objetos aqui aqui a gente tem uma quebra né a gente tem uma quebra de padrão né E essa quebra de padrão para nosso olho vem completamente para cá porque que ele vem completamente para cá Porque a gente usou essa tal de maneira correta

a gente vem vem jogando o objeto super parecido e daqui a pouco a gente inverte isso isso geram Impacto geram contraste muito grande e além obviamente da que nem eu disse para vocês além de de um um princípio aqui que é o princípio da singularidade a gente tem um princípio também que é o do figura-fundo né que é o contraste que tem com fundo mas isso a gente vai ver no próximo tá então aqui mais um exemplo segundo princípio tá é a continuidade que que a continuidade dispara gente ela sempre que teu olho sempre vai

seguir linhas contínuas de escrita a leitura da não só de leitura as linhas nosso nosso olho tem uma tendência a seguir linhas para que se forme as imagens se formem os objetos a gente usa a gente tem esse recurso visual para estar seguindo tá então por exemplo aqui ó que acontece na imagem acima por exemplo os pontos vermelhos da minha curva parecem estar relacionados aos pontos pretos da linha tá vendo que as a linha aqui parece que parece que passa reto o quê que vocês enxergar o primeiro eu enxerguei primeiro elas passando aqui em uma

pela outra a na imagem acima por exemplo os pontos vermelhos na linha curva parece estar mais relacionados aos pontos retos da linha curva do que os pontos vermelhos da linha reta horizontal isso porque se olho segue naturalmente uma linha curva tornando a continui continuação Sinal mais forte de parentesco do que à semelhança das cores Então o que acontece a gente vê uma linha reta que a gente vê uma linha curva aqui a gente não enxerga tá só porque aqui E aí aqui tá vermelho o nosso olho veio e parou aqui seguiu reto Não enche olhou

para isso eu enxerguei na linha reta e enxerguei um esse aqui em cima tem certeza que você enxergou também isso né então isso é o princípio da continuidade na sua ele tem a tendência continuar uma linha é a continuar e não segui não e não cortar uma continuidade exemplos práticos a continuidade aqui por exemplo é para o cara ocular o designer que fez isso aqui usou esse princípio ele fez nosso olho seguir por toda o objeto ó ele fez um pôster aqui que ele seguiu a linha todo objeto tão nosso olho fase se esse a

moldura é porque é o princípio da continuidade e aqui por exemplo é uma essa aqui é uma interface da Amazon que que acontece aqui tá vendo é uma linha isso aqui nosso olho tem a tendência a seguir é um Carrossel então a gente vem para esse aqui pula para esse pula para ele falar para ele fala para ele é uma tendência o Carrossel Funciona porque nosso olho tem uma tendência a seguir uma linha de leitura né a gente não é difícil se ele tivesse duas linhas duas imagens daqui a pouco um quadrado uma fotografia daí

depois outra imagem isso atrapalharia a leitura né usabilidade da peça aqui então por isso que eles utilizam uma linha reta para que fique fácil nosso olho não perca esse princípio de visto aqui mais um pouco também de design gráfico utilizando o continuidade o cara utilizou além da continuidade né da nossa linha continua aqui a gente nossa tô sozinho aqui na além disso a gente tem um princípio também da da proximidade né que a gente tem as cores roxas pentear grupo cores roxas e agrupa e também né então a tem dois princípios em atividade aqui e

aqui a continuidade também princípio da continuidade faz com que a gente consiga enxergar além de uma de 2 clips conseguem enxergar aqui não é um ser vivo no canal ser vai 11 buffaloes quer né então a Gestalt se aplica aqui porque a gente consegue enxergar além disso a gente consegue enxergar um burro também por esse princípio a nossa linha nossa mente consegue completar esse e automaticamente música no Nosso repertório de imagens alguma coisa semelhante a isso atenta decodificar e acaba encontrando um obviamente ligado aqui ó ao nome também se a gente acabar se Tirando esse

nome daqui de repente a gente não conseguiria Alencar né mas nesse caso aqui a gente consegue a e aqui mais um exemplo da linha de continuidade então através de uma linha a gente consegue também perceber um homem tocando um trompete tá então a uma linha consegue formar uma imagem pelo princípio de isso que a gente não não não quebra né a continuidade da linha e aqui grande soubesse né soubesse que é um de um designer aí professor também ele que fez esse essa peça e aqui também princípio de continuidade ao nosso olho vai para lá

utilizando Esse princípio cara a gente consegue fazer milhares de coisas então Normalmente quando você vê pôsteres clássicos assim design clássico você vai ver muito be taught causava muito Gestalt para que a gente tem esse tipo de impacto mesmo para que a gente tenha a funciona o nosso cérebro e que nos transmita uma uma informação né não simplesmente uma arte qualquer aqui um pouquinho também te continuation né então a gente vê o nome já tá dando a imagem que tem dentro e tem tudo a ver é uma marca que consegue passar essa informação e aqui fica

bem louco nosso cérebro porque quando a gente olha para isso a gente lê a gente consegue enxergar as linhas mas também enxerga mulher ali né E ao mesmo tempo a gente consegue enxergar toda mulher e ela não tem partes dela que não estão aqui então isso é muito louco porque nosso cérebro entende que é uma mulher e também tem de que são linhas se o princípio da continuidade E também o princípio da similaridade né que a gente consegue dividir os dois Campos tanto do fundo quanto o do objeto da frente e aqui um pouquinho mas

também só para sempre ficar e continuidade tô aqui na Aparecida continuar continuidade na fotografia uma bela de uma fotografia isso se torna bonito porque nosso olho tá custar preparado para tá enxergando isso então a gente enxerga esse uma maneira esteticamente agradável ao cérebro e vamos lá terceiro item da terceira lei é a lei do fechamento essa é uma lei muito legal e muito importante principalmente para quem trabalha com uma arca e desenvolve marca é porque a gente usa muito isso do fechamento aqui é o seguinte o que que acontece por isso pelo fechamento Ele disse

que nosso cérebro não precisa a gente não precisa ter o a cena completa para que ele faça a aquele complete né vamos assim os objetos aqui no caso a gente tá enxergando três três esferas tá uma com corte só que no jeito que está posicionado a gente consegue enxergar um triângulo perfeito aqui dentro então Existem várias marcas que utilizam este princípio vou ver se eu consegui botar aqui para vocês por exemplo aqui gente tá enxergando um cachorro andando porém existem só algumas partes pretas do cachorro e as partes brancas não existem então isso Esse é

o princípio da continuidade não desculpa o princípio da do fechamento que faz com que a gente conseguir enxergar o cachorro completo porque o nosso cérebro já tem lá no HD dele esse objeto Pronto né então quando a gente enxerga algumas partes a gente consegue completar é por isso que a gente tem que dominar essas leis para que consiga projetar coisas inteligentes para que a gente consiga projetar coisas que o cérebro da pessoa que tá recebendo a informação que está projetando também consiga decodificar e também a gente utiliza uma parte dessa dessa mágica que o cérebro

dela faz né então por isso que design estão interessantes cantam interessantes por isso que é utilizado bem o princípio da Gestalt aqui se você não não sabe ainda mas é o logotipo da do Carrefour e eu é o ícone do Carrefour no caso né se existissem aqui dentro não sei se você já sabia disso obviamente com muita gente já sabe mas muita também não sabe existe um cê aqui dentro um CD Carrefour esse sede Carrefour depois que você enxergou ele você nunca mais vai deixar de enxergar e se sente Carrefour e ele se utiliza desta

regra né que é uma regra da do princípio do fechamento você não precisa estar completo aqui em cima e nem aqui embaixo para aquele se complete obviamente que um pouco mais adiante a gente vai ver na lei de figura-fundo no momento aqui não tá tão não está tão forte o fundo em relação a figura da frente por isso que a gente não consegue enxergar mas ele está presente os e aqui dentro então o designer utilizou desse princípio de do fechamento aqui se a gente fechar uma nenenzinha que baixo Então veio cedo Carrefour não se você

nunca enxergou isso nunca mais você vai deixar de enxergar você do Carrefour aqui é a mesma coisa e não existe uma lâmpada em cima é apenas uma mão Porém quando você olha para essa imagem você enxerga claramente uma lâmpada porque a gente tem só o bulbo só o é a ponta da lâmpada aqui E esse esse essa forma faz com que a gente olha para isso e enxergue de uma maneira muito clara o fechamento quem trabalha com publicidade que direção de arte é muito interessante aprender Gestalt também direção de arte pode beber muito da Gastaldi

por questão que muitas vezes a gente tem que passar uma informação adiante no anúncio E se a gente faça algo utiliza algumas regras dessas fica muito mais interessante as peças fica muito mais interessante nosso layout né Então aqui tem mais um exemplo de fechamento aqui Um clássico da coca-cola também que a gente enxerga tem algumas esferas tendo uma boquinha da garrafa aqui um pedacinho do Canto e a patricinha da parte hoje a gente consegue enxergar completamente obviamente da minha cor né Se eu colocar uma cor preta aqui de repente a gente não tem esse sentimento

e a gente não tem essa gente não consiga trazer à tona essa lembrança que a coca-cola Mas desta forma que a gente consegue de uma maneira muito fácil enxergar garrafa ali que é o princípio do fechamento em Ação a gente não precisa desenhar toda a garrafa né e aqui mais uma vez princípio do fechamento tensão também e a gente consegue enxergar eu já tinha mostrado esse exemplo lá no início e aqui ele fica muito mais claro como o fechamento é mágico né aqui também Um clássico a marca do Johnny Walker onde a gente enxerga que

a calça dele a gente enxerga a parte do rosto dele sem existir na verdade né Principalmente as bota essa bota que tá voando por exemplo e a gente consegue nosso olho perfeitamente consegue fechar a calça dele aqui e eles usam usam é o princípio do fechamento de um amarelo de uma maneira muito muito incrível né dessa marca então é por isso que você é muito bom você pegar essa essa Esse princípio né esses princípios todos e estudar e começar a perceber no dia a dia as coisas e tentar começar a aplicar porque isso vai se

tornar o seu designer vai para passar para o próximo nível né que é um nível que impacta diretamente o nosso nossa mente o nosso cérebro aqui uma mais estria perfeita né então uma propaganda do homo no qual só tem simplesmente um fundo branco e a roupa branca né dizendo que o ovo limpa tudo e a gente consegue enxergar incrivelmente uma gente consegue imaginar né na verdade uma roupa não é uma blusa pendurada ali Porque existe uma pequena parte existe objeto avidamente né o signo se a gente não estudou ainda semana Bom dia existe o signo

aí na semântica não é para me sujar palavras mas enfim existe um existe um ensinar dizendo que que temos aí uma uma roupa pendurada e aqui também usa né o fechamento também aqui embaixo e a marca muito interessante também a marca da da Starbucks que também utiliza o princípio do fechamento é essa aqui também que a gente vê que tem um pouco um povo a gente tem uma um pavão aqui dentro e as pétalas do pavão e a gente só enxerga tem um pavão porque tem essa esse pequeno né um pequeno biquinho eu faço tudo

isso se parecer todo sentido né faz todo o sentido da peça apenas com um pequeno detalhe e eu acho que eu não tenho mais nada aqui o próximo proximidade tá o princípio da proximidade Ele anda muito em conjunto com da similaridade tá o a diferença dele é que objetos que estão próximos eles têm a tendência da gente perceber como uma unidade tá então por exemplo aqui ó Então nesse caso aqui a gente sabe a gente percebe que os objetos que estão agrupados nesse lado eles têm uma diferença desse objeto que tão agrupado esse lado aqui

tá então basicamente quando a gente tem um layout Por exemplo quando a gente a grupos a gente a grupos objetos você vai fazer um card por exemplo tá então você tem o título Você tem uma chamada né você tem mais uma sully um subtítulo e um botão Então são três grupos de informação então se você dividir eles voltarem muito separados a pessoa tem uma impressão mas você juntar mais eles a pessoa vai começando ter outro tipo de percepção da peça por exemplo aqui ó se a gente tem os objetos separados isso aqui não faz muito

sentido mas no momento que ela grupo eles nosso olho tem a tendência é muito maior a decodificar nisso aqui eu fico tentando entender o que que é né fico tentando juntar ao cérebro fica por cima será que isso aqui é uma forma Será que então a proximidade tem essa força de transmitir uma informação e decodificar a informação mais fácil para pessoa tá então aqui é um exemplo ó eu fiz uma pequena um pequeno layout olha o exemplo da esquerda olha exemplo de direito o exemplo da esquerda Eu tenho um texto aqui em cima um texto

no meio um texto que uma chamada grande outro embaixo aqui embaixo que que eu fiz naquele no lado direito eu agrupei em três grandes grupos qual dos dois que a gente tem uma conforto visual maior é o do lado direito porque que tem um conforto maior porque o meu olho automaticamente Lê ele vai ler obviamente a parte maior aqui né Este é um exemplo do princípio da proximidade de e ficou tem uma patricinha aqui embaixo Olha o béquer outubro de dois mil e vinte aula aqui em cima aulas gastaut entendeu então eu agrupei isso esse

é um princípio muito simples e que uma galera se quebra principalmente na hora de estar produzindo peças ou produzindo layouts o coisas assim sempre que você começar agrupar vai ficar mais fácil de ser um Depois de ficar isso tem muito a ver com hierarquia né a gente tem uma direto que a forte de informação aqui por exemplo que acontece que que agrupado que a gente tem um menu aqui em cima Então a gente tem um grupo de informação aqui em cima agrupado nota nosso olho já cai ali a gente enxerga eu não tô dizendo aqui

que a ordem de leitura tá só mostrando como a informação é agrupada aqui deixa eu pegar lagostomus aqui e toma aqui ó tá arranhando a garganta e o dó tem o menor aqui em cima é um grupo tem o menu que a direita que é um outro grupo de ícones aqui tem o texto para levar menos Originals eqt a teta da é um grupo de informação tem o tênis aqui então quando eu vou agrupando por mais que parece que está espalhado eu agrupei não é o designer aqui é o grupo pedaços né Por série de

coisas e fica totalmente legível totalmente navegável e tu consegue entender totalmente né Então esse é o princípio da proximidade aqui um exemplo no próprio logo da Adidas que a proximidade com os meninos o logo da Adidas fosse assim a gente não tem uma não ter uma coerência visual E no momento que ela grupo isso isso se torna uma tendência visual fica muito mais fácil da gente enxergar e muito mais fácil daqui a gente decodificar eu não tô nem falando aqui que é porque o logo da Adidas mesmo que você não conhecesse o logo da Adidas

fosse uma primeira marca existe um conforto visual muito maior no da direita no Duque da esquerdo justamente por quê a esquerda como são objetos separados teu cérebro lembra da regra o servo sempre tenta ficar o nosso cérebro está sempre tentando decodificar alguma coisa o tempo inteiro está tentando decodificar então nosso papel é fazer o que é desenhar coisas fáceis do século depois ficar esse é o nosso papel então o dos direitos ficaria muito mais fácil da gente decodificar aqui por exemplo é uma confusão Isso é uma confusão mas se fosse analisar existem grupos de informações

então apresentar os caras colocaram por exemplo aqui do lado direito existem três grandes três grandes decks é um agrupamento de informação aqui por exemplo os vermelhinhos bidião vermelhinho tem os azuizinhos tem as colunas tem os tipos de cores é uma confusão obviamente que acho que não dei um exemplo tão bom de repente poderia ter outras interfaces melhores Tá mas é uma é um jeito de mostrar que quando a gente aproxima as informações ela se ela se tornam Coé oi e daí a partir daí a gente consegue decodificar melhor tá então aqui também ó por exemplo

aqui a gente tem um agrupamento no meio de informação a gente tem um grupo aqui em cima um grupo aqui do lado outro grupo aqui outro grupo aqui em cima olha como fica bonito isso fica equilibrado né então no momento que a gente começa a entender que se você agrupar pequenos pontos de informação isso se torna mais interessante seu layout ele se torna mais mais sofisticado vamos dizer assim por justamente porque ele torna o seu cérebro fácil servo pensar né Então aí tem mais um exemplo e aqui mais um exemplo também ó Então a gente

tem um agrupamento aqui Além Deste agrupamento a gente tem o da linha lembra que a gente falou da continuidade Então eu tenho agrupamento aqui em cima no agrupamento aqui embaixo tem um agrupamento aqui ó existem aqui embaixo eu tenho texto Então nosso cérebro certinho Ele lê primeiro aqui em cima eu consigo nesse do mês clica em baixo porque ele agrupou se eu tivesse essa fonte o maior Ou tudo um pouco mais junto eu não teria essa estética limpa e as estética fácil de assimilar é mais um exemplo vamos lá figura-fundo deixa eu ver quantos faltam

ainda acho que figura fundo e simetria tá figura-fundo que que figura fundo desfigura fundo ele é o contraste tá é o é aquele que eu disse para vocês no início lá mostrar essa imagem no início e ele diz o que a relação figura-fundo pode ser estável ou instável dependendo de com faço é determinar qual é qual tão lembra do logo da do Carrefour do Carrefour ela é instável porque tem estável porque a gente não consegue enxergar de primeira você né ela ela ela tem essa questão que você fica ali meio tu não consegue entender daqui

a pouco óleo ser agora porque eu tô enxergando não enxerga e assim por diante é a mesma coisa que essa imagem aqui ela é instável porque a gente enxerga o os sorrisos nas se enxerga As Duas Faces se olhando e também a gente enxerga o pé da mesa ao mesmo tempo e fica trocando né jogando um para o outro então isso diz que é uma figura instável tá aqui também figura-fundo tá aqui agora não vou entrar ser instável estava aqui é muito mais estável muito mais que a gente consegue enxergar três garrafas né e um

uma esqueci o nome o fotógrafo só que a gente não ficar brigando para enxergar a gente consegue enxergar que são três garrafas e Olaf né não fica trocando o sentido deles é muito mais estável e o figura-fundo é isso figura-fundo a gente tem o fundo da imagem conta uma história para nós e a figura que está à frente da imagem contra outra história quando a gente pega uma tipografia por exemplo e dá um zoom a tipografia existem as coisas as partes negativas da fonte as áreas da tipografia existem a parte preenchida a parte que é

negativa é o fundo e a parte que é preencher é a figura da tipografia então se você esticar muito mais tipografia um a por exemplo grande salte da tela ele perde o sentido ele perde o sentido porque a Esse princípio de figura-fundo está presente ali e a figura a gente não tá enxergando Qual é mais não sei se deu para catar um pouquinho aqui também tem uma um exemplo de figura assunto gente consegue utilizar o fundo se tornando e a interagindo com a figura que a parte da frente tá isso é incrível quando a gente

consegue um efeito desse que também pode ser muito bem utilizado em para fazer marca né marca e Campanha também enfim direção de arte e aqui Uma Peça também incrível que a gente vê as mãos né brancas com as partes pretas não é muito muito Óbvio de enxergar aqui também a gente vê uma um um pássaro né a cabeça de um pássaro e uma vitrola antiga também utilizando esse município e aqui também toma Raposa e que formam a pomba ali e também tem um fundo uma ilustração e aqui também um cartaz em cartazes é muito bom

eu adoro cartazes acho que quem não gosta daqui de cartazes e também não tiver os ratos e também vem as mãos Então esse jogo né então como é difícil isso também dominar isso mas quando se acerta fica um resultado incrível e por último para encerrar o sexto é a simetria tá é o sexto princípio que que esse princípio prega que a quando a gente tem algo simétrico a gente nosso cérebro tem um conforto AJ nos dá uma uma sensação de solidez e Ordem né então a gente tenta sempre buscar a simetria tão vou dar alguns

exemplos para você zoar aqui a gente tem uma simetria né o lado direito é igual ao lado esquerdo naturalmente mesmo que a Leo mas não é exatamente igual porque aqui é preto é que é branca que a branca que é preta tudo bem mas no momento que a gente olha para isso a gente tá enxergando isso simétrico a gente não está enxergando uma divisão não existe outros elementos desse lado que Pese para esse lado aqui né não é assimétrico é simétrico então numa naturalmente objetos simétricos tem uma tendência a ser mais confortáveis e esse percebidas

como sólidos e confiáveis aqui por exemplo simetria outro objeto que mostra a simetria de um lado da super bem aplicada aqui uma capa de revista ou a totalmente simétrico também a gente vê que é tudo dobrado ao meio e como como isso chama atenção no nosso olho né Gente olha para isso e e tem uma sensação muito prazerosa e uma sensação muito confortável né gente enxergar os dois lados do mesmo jeito aqui um ícone por exemplo um símbolo Norma naturalmente símbolos assim também são simétricos e nos passam esse sentimento essa sensação e aqui uma superlotação

cheia de informação mas que é simétrico e esse conforto visual essa sensação de prazer que nos dá de olhar ela vem muito dessa assimetria e muitos lustradores e designers utilizam da simetria para tratar produzindo né peças para que gere se esse tipo de impacto e aqui Mandala também que é um exemplo bem clássico de um objeto simétrico e o porquê que ele é tão apreciado aí quando a gente produz tá deixa eu ver se tem mais alguma coisa fotografia também é a simetria a gente vê muito também no cinema se vocês perceberem filmes do Hitchcock

por exemplo ele sempre faz aquelas cenas enquadradas simétricas perfeitas assim né então começa comecem a perceber o cinema é uma escola de mais sobre Gestalt assim e é interessantíssimo a gente tá e depois que abre a cabeça para isso fica muito bom né de desenhar em fim de projetar minhas coisas e aqui também um outro símbolo um outro símbolo que também é simétrico que representa muito esse Esse princípio tá então gente foram seis princípios aqui tá Que eu mostrei pra vocês como eu disse no início é não sou nem um exímio conhecedor de Gestalt mas

eu acho que deu para passar Deu para entender um pouco de com profundo é Gestalt tá e eu mente a menos a minha a minha a minha missão aqui é muito mais plantar em vocês uma semente assim de cara olha só a daqui a pouco você nem sabiam que existia isso e isso abre o mundo agora na cabeça de vocês né porque Gestalt é o código-fonte né O que dita como design feito claro que existem outras regras obviamente que tem eu não tô aqui né sensação é mas vocês puderam perceber que no momento que a

gente Domina a Gestalt a gente vai dormir na grande parte de como imagens e como as coisas são feitas tá eu não sei se deixa eu ver aqui o demônio para saber esse sepulta legal Lucas não sabia também que existia Acabei de chegar lá mas com certeza é a cara de Nelly chega junto depois vai ficar gravada eu não deixo gravada esse aqui porque eu baixo ela e Eu deleto aqui e suba ela novamente porque eu dou um barzinho no áudio porque normalmente esse áudio fica meio cágado não sei porque e é isso tá eu

não sei se foi alguma pergunta alguma questão cara ou trancou tudo não galera tá aí ainda então é isso gente tá pesquise sobre Gestalt cara tem tem um livro muito bom tá sobre Gestalt eu esse livro aqui e eu já publiquei um tempão atrás quem que puder comprar aí Compre que é o livro fora demais cadê o cara que eu já publiquei de coisa eu vou até retomar ele aqui para quem se interessou pelo assunto aqui ó ah não esse aqui é já que esse é também é outra esse aqui é outra aula que a

gente vai tentar o herói e o fora da lei cara arquétipos é cabuloso tá E esse taught aqui ó eu fiz um posto de Gestalt também aqui tem aqui tem até mais princípios tá segregação figura-fundo que a gente falou similaridade óbvio que é super minimalista isso aqui mas está a proximidade fechamento continuidade pregnância da pregnância não botei lá tá mas pregnância também entre pregnância uma imagem impregnante só um pouquinho que a minha estagiária chamando aqui é bem e dá atrás Alginac E aí me liga aí e pega leitor vai ser um E aí e não

quer montar um a digitar o Nemo dela aqui pregnância tá aqui a pregnância da gente é uma coisa interessante de falar pregnância é o quanto uma imagem ela é per facilmente percebida uma imagem de alta pregnância é uma imagem Quanto bate o olho tu consegue entender o que quer por exemplo se a gente tiver uma maçã e essa maçã for bem desenhada que você olhe para que lopa eu consigo enxergar com uma maçã existe uma alta pregnância quando a gente faz um layout eu faço alguma peça uma arte enfim alguma coisa que tem baixa pregnância

é que aquilo ficou confuso a gente não consegue entender o que quer já aconteceu de você mandar ou para alguém uma peça e o cara não entender o que que é eu não entendeu a Ana Clara Não entendi mas Pois é mas tinha essa cor no furo cara isso é uma baixa pregnância então pregnância algo que tem que também a questao de explica que objetos precisam ter alta pregnância para que uma questao de seja bem feita tá que o nosso cérebro conseguir interpretar de uma maneira a simetria a gente viu unidade da unidade ela é

muito a ver com o princípio da proximidade tá aqui no momento que a gente aproxima os objetos eles se tornam a unidade eles se tornam objetos comuns entre eles tá mas não é isso existe um livro que ele tá em algum canto aqui briefing não existe um livro gente e cadê a do livro eu faço tudo ao vivo mesmo né cara tudo não preparam nada cara não sei onde é que tá o livro agora o Facebook e Instagram parou de carregar ah sei lá eu vou botar depois no Depois eu subo para vocês o aqui

caramba ó esse livro aqui ó esse livro aqui cara é demais Gestalt do objeto procure na Amazon a Amazon stout do objeto esse livro aqui tem que ter na biblioteca Gestalt do objeto ó esse livro aqui tem esse livro ele não sei se tá não sei se está disponível para comprar a capa comum e tanta pila ó 80 pilas cara é um sushi a menos que vocês que a gente come aí comprei esse livro esse livro que explica até do caramba tá e eu sempre digo para vocês terem livros porque às vezes eu tenho livros

aqui que daqui a pouco tu tá escrevendo uma defesa para uma uma um trabalho e você vai ali ele pesquisa um pouquinho escreve um texto mais legal e assim por diante Então tem que ter na nossa biblioteca tá gente é isso eu vou deixar gravado essa aula então espero que você tenha curtido de verdade de mais uma vez decoração aí esse conhecimento que adquiri E cada vez que eu passo os conhecimento para mim ficar mais fascinante ainda é um assunto que a gente poderia conversar aí horas e horas deixa eu ver se tem mais alguma

do Muito obrigado palavra muito massa por Gabi estamos junto rondinelli também e Mateus Mateus sem presente e como a gente pode pensar em gestao de projetos George sem ser forçado como sabemos o momento certo de aplicar um projeto o cara assim ó Na verdade o seguinte alguma coisa que que tem que ter na cabeça tá quando a gente vai fazer um projeto Jardim e eu particularmente quando eu vou desenhar uma logo por exemplo eu eu tenho que usar a Gestalt eu não tento é que nem Ingrid tá isso aqui na Ingrid ai eu ele pode

fazer mal eu acho que eu fiz uma aula de fibonattis tá tem uma aula aqui no YouTube de figurante Ah então tá então quer dizer então que eu vou estar usando fibonet para tudo eu vou sair usando figurante não cara eu não faço isso eu a primeira coisa que eu faço quando eu vou dizer uma marca por exemplo eu faço um multi bot Tá eu vou lá e pesquiso faça um painel semântico né a vou fazer uma máquina de um café por exemplo Qual o nome do café a o nome do café vai se chamar

café casa valeu e só um chutão exemplo tá cara Café casa café casa que que significa a caça a gente vai lá casa significa lá significa Família significa em casa a casa mesmo daí significa chaminé já tava na hora e tu vai listando tá isso isso a gente pode fazer era era para ser aula de hoje tá mas a galera voltou aula de uma Gestalt mas na aula de painel semântico e a gente vai falar um pouco disso cara trabalho estando as coisas isso vai te abrindo um monte de opção eu faço desse jeito tá

que acontece quando tem um monte de opção eu não fico pensando agora eu vou usar a Gestalt na prática não cara a Gestalt ela vem no momento que depois que eu fiz um monte opção comecei a desenhar começo me dá uma ideia tu cara tu tava será eu vou fazer aqui então uma uma casinha vou fazer então uma casinha em Deus da porta todo um exemplo tá em vez da porta eu vou fazer um cafezinho né tipo aí vou fazer um cafezinho ali Ah beleza então tá então vou dizer a porta um cafezinho cara beleza

Mas aí no momento que eu botei desenhei Opa mas parei de repente eu tirar a massa você tirar o formato do café e tirar parte do Miolo não dá para enxergar que é um café mas eu não preciso dela completa Opa isso aqui eu tô usando o princípio do fechamento de gastaut entendeu Mas tu só vai enxergar uma aplicação dela no momento que você tiver estiver desenhando entendeu no momento que você tiver aplicando não vai contra o pensamento a cabeça que nem é que nem no os agride a não você depois que a galera isso

muita galera e faculdade fasta eu tenho tem alguns assistentes enfim faz o contrato nas pessoas e a galera vem vem com isso sim a por isso na faculdade eu aprendi que tem que usar Grid Claro para que tem que usar grande mas o Grid vai te ajudar e nada te atrapalhar o cara já monta o Grid de cara cara Primeiro pega abre tava fazer um livro fazer uma revista começa a jogar aleatóriamente o as informações ali dentro porque ele começa a modelar informação a vai ser um bloco desse aqui que vai ser uma foto daqui

a pouco arrasto para acabar com um título tristeza exatamente naquele momento aí depois sim o tempo e objeto mais modelado aquele formação mais modelada aí sim a vou botar no Grid por quê que é o Grid te ajuda né naquelas naquela confusão visual e o Grid começa a te ajudar a tomar decisões ele começa a te ajudar naquele momento a será que vai até aqui outra ali tem um Grid para dizer isso né então é a mesma coisa que a Gestalt a Gestalt é muito mais de vocês a gente não vou falar vocês que eu

também sou estudante a gente estudar bastante e dominar ou como como as leis operam e ter isso em mente porque isso no momento que a gente vai começar a desenhar ou vai começar a pensar em alguma coisa isso vem naturalmente mas eu não acho que vocês tem que ter um post-it colado no computador a Quais são as leis da Gestalt ali e sabe assim que não eu acho que não é por esse caminho eu acho que interessante coisas que tem que ser dominar básicas tem que dominar que é o por exemplo aproximação cara aproximação é

básico o Brasil básica a gente vê layout das vezes que o botão tá no meio que sabe assim isso esse tipo de coisa básica esse tipo de coisa um bom designer tem que ter desde o início isso quando a gente faz rede social quando a gente passa eu vou mostrar um pouquinho aqui na da vou abrir o filme aqui vou mostrar uma peça de aproximação que eu tô falando agora que Gestalt ficou muito claro para mim depois que eu comecei a ver isso mas por exemplo aqui ó a roupa que tem os conteúdos aqui que

não saiu ainda mas vamos ver aqui por exemplo lá e vamos ver aproximação Eu só acho a confusão né Aí você sabe como é que sai as coisas mas aqui por exemplo lá tá vendo a aqui ó tá vendo aqui é que eu tenho um objeto e aqui eu tenho outro objeto tá esse outro objeto não briga com esse aqui porque existe um contraste entre eles né esse tipo de coisa gastaut né então mas isso eu eu sempre fiz isso meio instintivamente eu fui conhecer gastaut depois sabe depois que eu fui conhecer um restaurante mas

por isso que eu quero trazer esses conteúdos para vocês agora porque daqui a pouco agora você já conseguem despertar para isso que eu demorei anos para despertar né então é isso é a minha missão assim meio que eu tirei para para fazer tá gente e obrigado Mais uma vez Matheus Daniel cara por favor siga o canal e não sei se você já segue não segue importamos tamo junto e eu acho que nessa aula eu não vou nem eu vou deixar essa aula mesmo aqui que daí fica gravado vocês todos falando aí também acho que fica

legal deixe nos comentários para mim também que ajuda aí né enfim e é isso tá nos vemos na próxima segunda-feira próxima segunda a gente vai falar de painel semântico vou fazer uma mãe qat a gente vê tá Qualquer coisa quiserem conversar comigo Leo@Léo becker.com deixa aqui é o arroba Léo becker.com que é meu e-mail porque às vezes semana lá no Instagram não vejo porque cara no Instagram uma confusão Então se quiser trocar ideia comigo Mandar trampo cara para mim olhar abranger vamos enfim trocar figurinha tô aberta aço Manda ele é o roberto.com e há um

tempo tô com ele nunca tem que perguntar mano tem uma aula tá aqui ó Java E aí e isso é uma ter essa cobra aí na semana passada o retrasada aqui ó vem aqui no canal a meu canal Olha só pior Sigma aula 2 velho 43 minutos lá cara eu dei a gente falou 43 minutos sobre o Sigma e eu expliquei tipo basicão das coisas e é muito barbada de mexer tá ele é super simples mexer mostrei como é que faz um por exemplo um um Carrossel dentro dele e ficar dá uma olhada nessa hora

aqui que ela ficou bem simples e espero que eu tenha luz idade acho que vai te abrir a mente é um software muito simples cara muito simples de mexer se tu tem já uma na facilidade mexer com Photoshop Illustrator tu vai achar uma barbada a curva de aprendizado dele é muito curta assim e assim eu depois que tu pegou Nunca mais tu vai fazer até PT é pra ver o que vai fazer no cima o fig mãe o signo software incrível vou dizer para você isso aqui tudo tudo que vocês estão vendo aqui são tudo

posts dos últimos Sei lá cara últimos três meses eu acho Cara isso mesmo tudo Photoshop velho o cara cheio de anti board o 7 borda no Photoshop é uma confusão e no os três muito menos né que não é nem para isso é e assim basicamente o figo ele é a ele faz tudo cara só eu só não entendi a foto né no recorte foto tal tu não faz mas a raça foto depois para cá e segue o baile vai botando coisa vai montando Ó tem até mais imagens soltas e tal então cara é muito

bom muito bom mesmo Vai nele que é Firmão e tu consegue fazer tudo que digital É sim cara bate Borja inferno mas eu não fique mestre bom ele funciona super bem tá gente vai nessa reparação 8:30 fiz uma hora e meia de ideal Mas é isso aí curto muito caro dá um eu saí energizado dessas aulas tá obrigado beijo no coração aí e a gente se vê na próxima qualquer coisa mandei meios é nós valeu o [Música]