Psicologia das Cores - @Curso em Vídeo HTML5 e CSS3

Já chegamos agora ao capítulo 13 onde nós vamos falar bastante sobre cores [Aplausos] E aí [Música] o Olá tudo bem com você seja bem-vindo seja bem-vindo a mais uma aula aqui do seu curso de html com CSS nós estamos falando a parte de designer e nessa série nessa série de vídeos que vai falar sobre o capítulo 13 nós vamos ver os conceitos de cores e muito mais do que os conceitos de cores que os cursos de html normalmente dão até mesmo o meu antigo curso de html a gente ensinou lá como representar uma cor e

pronto só que as cores elas são de suma importância para os sites tá tudo na vida na verdade a gente vai ver isso durante essa série aqui de vídeos falando sobre cores e o meu objetivo aqui além de ensinar como representar uma cor é ensinar principalmente como escolher uma cor tão é só que a gente vai precisar bastante para gente começar os nossos estudos aqui primeiro lugar você vai gostar do seu caderno não esquece para você anotar todas as informações todos os detalhes outra coisa que você vai ter que ter é o material em pdf

o que eu vou me referenciar a constantemente a ele porque tem muita informação que tem que eu não vou botar aqui e tem muita informação e aqui e que não tem lá então usar caderno PDF e o seu computador aí também como complemento Fechou então vamos começar falando sobre emoções de cores eu não sei se você sabe não sei se você já ouviu falar ou se você já tinha ouvido falar antes dele o pdf cores são de suma importância para tudo você pode ver que o produto que você compra um site que você visita o

carro que você adquire a casa que você escolheu a cor que você resolveu pintar o seu quarto isso tudo tem uma importância muito grande então existe um conceito que você vai ter que pesquisar por fora se você quiser aprender um pouco mais Inclusive eu botei alguns links lá no material em PDF é o conceito de Psicologia Das Cores então existem clarão é uma coisa tão rígido assim de ar não era só o amarelo é uma cor que remete a felicidade então se eu vou fazer alguma coisa que eu vou representar alguma coisa triste eu sou

proibido de usar o amarelo Não é bem assim mas existem alguns parâmetros a serem seguidos o link para gente né eu não sou um designer eu sou um desenvolvedor mas nada me impede de estudar um pouquinho de design todo o conhecimento para o desenvolvedor é extremamente útil marketing digital por exemplo redes sociais produção de vídeo tá de usar Photoshop CorelDRAW e isso é importante para todo tipo de produção a tecnologia mais cores cara a gente tem que entender um bocadinho delas isso não vai ver tudo Provavelmente você tem uma matéria de design no seu colégio

na sua faculdade que vai complementar esse conhecimento que eu vou te dar aqui mas eu vou tentar te trazer uma linha de raciocínio aqui pra gente poder entender e saber decidir por cores existem alguns estudos que dizem que a cor de alguma coisa apresenta você tá procurando um produto a escolha que você faz para comprar um produto ou não está intrinsecamente relacionado a cor não somente do produto a cor da embalagem a apresentação visual do produto a embalagem dela isso tudo vai fazer você decidir comprar ou não a mesma coisa para site o conjunto de

cores de um site Harmonia visual e vai fazer você decidir se você quer acessar um não esse site se você depois de acessar se você vai consumir aquele conteúdo não e essa porcentagem de poder que as cores têm é altíssima chega em algumas pesquisas a 90 porcento isso é você pode ser dois sites com conteúdo muito semelhantes que abordam o mesmo assunto um site harmonicamente com cores distribuídas e outro site que não se preocupou com isso você vai acessar o site que se preocupou mais em harmonizar as cores né utilizar as cores de forma mais

inteligente e eu vou te dizer um negócio nada disso é consciente você não vai olhar para falar sim eu vou visitar esse site porque ele harmonizou as cores Psicologia Das Cores ela te diz o seguinte Nós seres humanos antes que ativamente né é irracional a coisa você não consegue descrever o que você tá sentindo e muitas das vezes nós olhamos uma coisa assim nossa que bonito se você perguntar aquela assim você sabe por que você achou esse bonito a pessoa geralmente fazer é bonito é bonito tá mas o que que te chamou mais atenção ela

não vai saber dizer e provavelmente o que fez ela decidir por isso que é uma coisa é bonita o que uma coisa feia é o conjunto e harmonia de cores que essa coisa tá então vai por mim dá uma pesquisada aí no termo Psicologia Das Cores acessos link que eu coloquei no pdf lá para você dar uma lida rapidinho depois que você tiver um tempinho ou até mesmo se você quiser parar de ver esse vídeo ir lá consumir se conteúdo de Psicologia Das Cores e depois da uma voltar aqui também tranquilo não vou ficar chateada

com você não mas o que importa é que você tenha consciência e cores são Poderosas para sites escolher uma boa paleta de cores escolheu uma boa Harmonia de cores é extremamente importante para o desenvolvimento de site e eu vou começar com um exemplo onde é que o computador que eu vou explicar essa coisa da Psicologia Das Cores eu venho falando aqui no curso de HTML e CSS várias vezes sobretudo na alta isso aqui é mais um recado da plataforma se o nosso curso aqui de desenvolvimento de site e se interessou pela coisa de servidores se

interessou pela parte física né você tem até os cursos básicos aqui no curso em vídeo mas para aprender isso tudo de verdade com termos mais técnicos mais aprofundados academicamente organizados aí é só lá no estudonalta mesmo inclusive o nosso curso de redes nossos módulos de redes são criados exclusivamente pelo Alfredo que é o nosso professor aqui do curso em Harvard e do curso de redes e mostram muito mais do que o nosso custa que bem básico bem Inicial mostrou a mesma coisa não curso de Linux ele foi totalmente criado pelo professor Ricardo ele mostra desde

o básico até o mais avançado de um servidor Linux na verdade um servidor local né Da sua rede local mas já é um bom start para você conseguir aprender a criar servidores Linux mas também lançamos no estudonalta um curso de eletrônica básica com o professor Eduardo mas não é um curso para especialistas em eletrônica não foi um curso totalmente modelado e pensado para quem o canal de informática de ti mas tem que começar aprender a mexer com motores tem que entender um pouquinho mais sobre elétrica eletricidade e tudo tá sendo explicado de uma maneira muito

simples e bem objetiva tudo isso já está disponibilizado no estudo na alta e você pode ser um assinante uma assinante acessando esse link está aparecendo aqui na tela dois vamos seguir com o nosso curso mas considere também se tornar um aluno ou uma aluna do Studio Now Então é só eu estou aqui e eu vou mostrar para vocês alguns sites dá uma olhadinha aqui no Facebook se usa Facebook para que você não use mais mas algum tempo você usou bastante né O que tem em comum por exemplo Facebook o Twitter é uma olhadinha no Twitter

aqui o Linkedin também que tem como também com o hotel com HP e com Intel lá todas elas são empresas de tecnologia cara não é bem assim é óbvio que elas são empresas tecnologia as todas elas têm em comum uma mesma cor a verdade não o mesmo tom de cores mas dá uma o Facebook Azul glitter azul fundo aqui tá azul escuro para os botões azuis LinkedIn logo Azul destaques de texto azuis del também Azul HP mesma cor Intel também então ela Poxa mana Será Que Será uma grande coincidência você manipulou aí para poder botar

tá olha só as empresas de tecnologia elas escolhem muito Peloso eu não curso em vídeo na hora de decidir uma cor né junto com o Ramon que foi o ar aqui desenvolveu a identidade visual do curso em vídeo o azul sempre esteve presente em tons diferentes desse da Intel se você perceber o tom da Dell da HP e da Intel é muito semelhante parece muito o azul de um com as outras isso tem um motivo o azul por exemplo só você olhar na cadeirinha que eu te dei aí no pdf ou até colar dela o

azul ele tem uma ligação com os conceitos como competência sabedoria calma confiança profissionalismo integridade segurança consegue entender que o nossos e percebe o azul e acaba percebendo não todas essas variações de conceitos mas às vezes um outro cor azul também é a cor que tem uma coisa estatisticamente muito valiosa ela é a cor mais aceita do mundo aproximadamente quarenta e seis por cento de aprovação é só você perguntar para qualquer pessoa a qual a sua cor favorita você vai ouvir homens e mulheres dizendo azul e ela também o azul é a cor com a menor

taxa de rejeição se você perguntar para a pessoa assim a qual a cor que você realmente não gosta normalmente as pessoas não vão dizer azul são a taxa de rejeição de aproximadamente um por cento somente um por cento das pessoas não gosta de azul mas 45 porcento aproximadamente gostam da cor e ela remete a coisas do tipo confiança profissionalismo segurança inteligência e qual é a empresa que não quer remeter a isso é por isso que muitas empresas acabam levando o suas cores sua identidade visual para curar uma questão de segurança não vai ah pô A

Coisa Nova Vamos aqui já tem garantido aqui e se você dá uma olhada na tabela que eu coloquei no seu material em PDF eu coloquei lá o vermelho significa quando é melhor usar o vermelho quando é melhor evitar o vermelho que cor da vermelho vermelho segundo o material que é a cor que é associada a amor a emoção a energia mas também é relacionada a raiva a perigo a recomendação do vermelho é usado muito em sites de comida sites de moda de entretenimento serviços de emergência e Serviços de Saúde e aqui também a gente deve

evitar o uso de vermelho em produtos que querem se remeter alguma coisa como luxo como natureza como os uso de serviços em geral é só você acompanhar o seu PDF aí eu não vou ficar lendo a tabela toda aqui com você agora é importante dizer o seguinte a eu botei para evitar e site de luxo Você não está proibido ou proibida de usar o vermelho é um site de luxo por exemplo mas você tem que usar o vermelho sabendo que o vermelho causa no cérebro humano e são de amor emoção energia raiva perigo da mas

quando eu exagero no vermelho a gente tem sites que usam vermelho de uma maneira bem tranquilo e até um tanto quanto exagerada dá uma olhadinha aqui ó a nossa conhecida Netflix a Netflix também identidade vermelha e preta muito forte né então você tem lá todo site principal do Netflix é preto e vermelho Inclusive eu vou utilizar o site do Netflix como exemplo para uma coisa que geralmente aluno faz em sala de aula muitos alunos quando estão começando tem uma tendência a criar sites com fundo preto e a letra branca essa combinação preto com branco ela

causa um contraste muito grande só que a gente tem que tomar muito cuidado porque preto com branco nesse contraste não fundo branco letra preta e sem fundo preto letra branca tá causa um cansaço visual muito rápido então se você olhar que ele vai lá Guanabara eu dou a Netflix usa site preto com letra branca usa mas olha a quantidade de texto que têm nessa página ó aproveita TV um parágrafo pequenininho aqui também o Paraguai e aqui um parágrafo pequeno algumas perguntas quando você clica que ele dá uma amenizada né Bota um cinza mas ainda assim

um contraste com letra branca que causa cansaço visual mas é pouco agora quando você vai para uma área de por exemplo centro de ajuda onde existe provavelmente uma quantidade grande de texto Olha aí o tradicional Branco um preto fundo branco letra Preta perto então sim toma cuidado com isso porque a tendência de você falar não vou fazer um site todo com fundo preto letra branca somente usa esse tipo de contraste se você tem pouquíssimo conteúdo a consumir certo atualizar por termos de uso da Netflix também ó o tradicional fundo branco letra preta então assim vai

no padrão Quando você vai ler alguma coisa fazer um contrato você vai alguma coisa a folha de papel Branca a letra preta o nosso cérebro já tá mais acostumado com isso não fica inventando as coisas vou usar aquela mesma coisa que eu acabei de falar da esse empresas que escolheram o azul sai no padrão cara vai do que você sabe que funciona tá sem nada é proibido Apesar de que na sua lista e o vermelho também tem a parte de entretenimento a gente também pode ver que no vermelho teve também usarem comida vermelho e amarelo

amarelo tem felicidade alegria e otimismo Então é só se o vermelho faz uma relação com um site de comida e o amarelo com felicidade Olha isso aqui onde estás do Mcdonalds é vermelho e amarelo então assim isso já está comprovado que você pode ver um monte de estudos e que mostram que o vermelho a combinação vermelho com amarelo está relacionado à alimentação tem uma relação também com alimentação e com felicidade tô sem que eu fico feliz comece a burgão de né então o McDonald's ele usa muito disso McDonald's tem utilizado muito o marrom e o

cinza para dar essa ideia naquele sanduíches um pouco mais prêmio aqueles sanduíches mais gordinhos na tá vendo aqui ó todos esses daqui já levam muito um marrom em consideração também o marrom tem identidade ele tem relação com vermelho e também tem relação com o amarelo indeterminado as e também tem a ligação aí com isso tá vendo as cores apresentação Olha a roupa da moça Olha o azul aqui na roupa do moço então sem todos aqui está relacionado com a Psicologia Das Cores Burger King por exemplo que é concorrente do McDonald's pegou mais uma identidade de

laranja tá vendo ele utiliza aqui o cinza né tipo cimento queimado mas ele usa bastante a coisa do laranja ele deixa o vermelho o verde né a cor as cores dos componentes do lanche também presentes mas o foco do Burger King seria o laranja e colocarei aqui ó divertimento ambição calor cautela tá então dessa maneira que o laranja tô sendo explorado como exemplo ou pelo Gere outra cor Se você começar a pesquisar é bem menos utilizada mas tem pontos específicos de uso é o verde ó o exemplo que eu vou dar Óbvio é o site

do Greenpeace Greenpeace ele utiliza de verde bastante na sua identidade tá vendo ele e exagera bastante o verde mas existem modos e modos por exemplo um verde aqui ele te leva a conceito de saúde natureza dinheiro sorte mas também te leva a inveja ele é muito utilizado para relaxamento tá Turismo para coisas financeiras para meio ambiente e evitar o uso do verde para luxo para tecnologia muito meninas adolescentes parece que alguns estudos levam a crer que o verde não é uma cor muito aceita para meninas adolescentes Então nada impede de você utilizar cada caso um

caso ele está vendo aqui é uma porcentagem né A maioria uma porcentagem considerável a vou mostrar o uso de vermelho aqui eu acho exagerado mas o que quer é uma embalagem vermelha mas eu acho que esse site aqui ó tá vendo quando você sabe que o cara não vai ficar muito tempo aqui consumindo o que que esse site vira ele vira um jeito aí para te levar para outros lugares no Twitter por um Tumblr para o Pinterest Google Plus não existe mais pelo YouTube enfim eles Me leva para outros lugares onde é que tem Brasil

tem Brasil pequeno pode levar me levar nesse site ele é um jeito aí para mim levar para outros lugares a verdade é que as perguntar me levanto online enfim Então essas coisas elas geralmente a gente quando você usa uma cor específica relacionada a marca né fica também muito cômodo usuário não Tá acessando o que te cast.com.br site não está disponível por exemplo Milka que uma outra marca de chocolate ele usa o roxinho né os tons né então Aqueles que criaram um site é dito monocromático Então são vários tons de roxinho né do mesmo roxo até

esse Tom tem esses estão aqui listrado tem esse de baixo que ficou um pouco mais claro Enfim então eles utiliza bastante de uma mesma cor a monocromia existe um outro conjunto por exemplo já falei rostinho o rosa o rosa aqui na lista tá amor romance sinceridade cuidados é bem recomendado para uso em produtos femininos e cosméticos e evitar usar o e ele pode te dar uma ideia muito sentimental o doce caso seu produto não tenha essa pegada sentimental ou doce evite usar o rosa mas dá uma olhada aqui ó numa empresa que é relacionada à

cosméticos já se usa bastante rosa é tons de maquiagem né enfim você vê aplicação de tons semelhantes em sites como esses porém tô dizendo a senhora não então você tá dizendo que a sua de menino e aí Rosa de menina não é bem assim que funciona ó eu vou te mostrar um outro exemplo aqui ó olha esse site aqui da Paola Klaus ela é uma é uma desenvolvedora de joias não é uma designer de joias Olha que bonito esse uso dia do amarelo do Dourado a laranja aqui a o prata quando a joia prateada dá

uma olhada aqui tá vendo Então ela tem o uso de tons ano a placa ela já usou preto e branco no dourado ela já puxou mais para o amarelo tá dando a iluminação a cor da roupa quando é prata já foi para outra outra p bom então assim você pode brincar com cores as cores vendem muito as cores elas são muito relacionadas vai ver que o dourado é muito relacionado com o vermelho como tava ali anteriormente enfim tem uma cor que muita gente não gosta que é o marrom é só que o marrom Se você

olhar aí na sua na sua lista ela tem uma ideia de roubo Space estabilidade de amizade na Então olha só aplicação do marrom que eu trouxe para você isso aqui é um restaurante francês dá uma olhada em como é que eu marrom foi bem utilizado bem aproveitado tá vendo ele deu uma ideia de luxo tá vendo o marrom com dourado traduz preços aqui enfim lá no quando ele fala de legume da cozinha dos ingredientes Já puxou um pouquinho mais para o verde que eu tom de verde quando falou de bebida ele Já puxou um pouco

mais para Azul mas o marrom dourado então aqui presente tá vendo Então assim foi um exemplo que eu consegui captar aqui que o uso do marrom acabou ficando bem interessante Então quando a gente fala assim quando a galera que estuda design e pode domar um cara não é no filmes a fugir do Mal Tem que às vezes experimentar mas você tem que ter a noção de que as vezes é bem delicado E aí tá gostando do curso tá achando legal a ideia desse curso Ele tá dando um trabalhão para gente desenvolver eu vim aqui te

pedir um e-mail por favor para divulgar esse curso eu creio jeito bem legal de também talvez divulgar o seu trabalho isso porque no repositório que eu vou falar várias vezes no curso além do nosso material de apoio todos os exercícios também vai ter uma pasta chamada ajude na divulgação se você quiser pode entrar lá baixar essa pasta inteira e aí você vai encontrar várias imagens em vários formatos para ajudar na divulgação eu particulamente vou fazer uma versão mas você que artista Você que sabe desenhar que sabe ilustrar o que manja muito de Photoshop no Estreito

pode criar uma arte baseada nos tamanhos né gente vai ter o tamanho deitado o tamanho pé e também quadradinho você pode criar essas Artes e mandar para gente Para esse e-mail aqui ó que é é uma curso em video ponto com não tem ponto br no final e as artes selecionadas vão ser divulgadas no meu Instagram pessoal e no Instagram do conseguido estão aparecendo aqui embaixo então se você é artista pode ajudar a gente criando Artes pode produzir o seu conteúdo que a gente ajuda a divulgar e se você não é bom com artes não

tem problema é só se essa pasta ajude na divulgação do nosso repositório escolher um ou mais imagens e divulgar nas suas redes sociais grupos e tudo mais valeu mesmo já agradeço antecipadamente pela sua divulgação o que vai tornar Com certeza esse curso muito grande que vai ajudar muitas pessoas a outra outra ideia apresentador roxo roxo tem criatividade poder sabedoria Só que você tem que evitar eles segundo aquela Cidadela que não Prende muito a atenção da coisa na do do espectador mas ele é bastante utilizado também tá coisas inovadoras para as coisas criativas até uns bancos

né que são roxinhos e tudo mais Olha só isso é um azul meio Roxo o milho é uma empresa de Finanças né financeira Mas ela é bem jovem Ela é bem inovadora procurassem inovadora dá uma olhada tá vendo tipo em usa bem essas cores na sua identidade tá vendo ele basicamente desses dois Tons o azul eo vermelho só que então diferença é duas cores com tons diferentes e muito toda a identidade com isso é um site que eu achei bem bonito também o outro site que eu achei bem bonito bem elegante que utiliza o azul

como base é esse daqui ó que fala sobre vinhos na Vinho do Porto EA que interessante que é o seguinte Olha só quando você escolhe a família do vinho né Por exemplo esse daqui vinho branco olha como é que fica o site eles estão as clarinho ó e fica um tom de verde que ficou tão da garrafa mas ele ficou mais claro se você for para um outro Deixa eu voltar aqui eu não sei como navegar muito nesse site não acho que é só vou lá agora que eu vou falando ele vai mudando Taberna E

aí ó olha que legal a identidade vendo já ficou diferente com os tons terrosos ou marrom aqui de novo então você consegue brincar com as cores e as cores junto Olha esse um Nub aqui provavelmente vai brincar um pouco mais com o vermelho Na próxima família eu não estou conseguindo acessar aqui a gente ó o Rose por exemplo que é Rosinha provavelmente vai cair para os tons Rosa tá vendo Então assim isso vende a coisa né Isso mostra que as cores são importantes Olha esse outro aqui que bonito isso aqui é um refrigerante promete relaxamento

né se bebe Relaxa tudo mais Olha isso os sabores também conforme vão mudando vai mudando a cor do site tá vendo laranjinha ficou Rosa mesmo ideia do vinho que a gente acabou de ver esse daqui é o site de um cédric Pereira que ele é um designer de produtos né de trabalho em produtos então a lista ele trabalha no design de sites como da Tesla como dizer alguma identidade do aplicativo Deezer o enjoo alguns na Olha que bonito quando você clica aqui tá vendo cada um a cor diferente quando você clica ele amplia e te

mostra aqui ó o que que ele fez no site Quais foram as identidades que ele criou e tudo mais é um portfólio bem bonito e para finalizar em relação a cores também para te mostrar que cores têm identidades Olha isso aqui é um site do Google que é igual plan your Planet aqui são coisas que a gente pode melhorar o mundo né coisa de tipo economizar energia a economizar água né coisa de comida por exemplo água obviamente azul eu clico gente já muda a identidade Zinho aqui para Azul ele já te faz uma brincadeira todas

as cada gota conta e ele faz umas coisinhas Quanto tempo você geralmente leva para tomar banho você então não precisar - centro tomar banho é dois minutos tá bom beleza um banhozinho se você já começa a aumentar a ele já você já tá consumindo uma piscina Se for muito 11 já foi para um tamanho de um ônibus então assim e tudo isso com a identidade de anuncie e essa essa coisa É bem interessante de as cores conseguirem representar coisas guarda e sus entre na sua cabeça e agora que você já sabe que as cores são

importantes nos próximos vídeos a gente vai começar a entender que cor contraste com outra que não adianta você decide catar Azul tá beleza Azul você pode utilizar né monocromaticamente o azul Sem problema mas normalmente eu vou acertar mais azul combina com que cor existe uma ciência para isso a gente vai ver isso partir do próximo vídeo você não perde por esperar você esquece faz anotações de tudo aquilo que a gente tá falando porque esse conceito de design é muito importante para a gente beleza grande abraço espero que você tenha gostado nos exemplos e a gente

se vê na próxima [Música] [Aplausos] E aí [Aplausos] [Música]