O DESIGN E A
PUBLICIDADE
EM SINERGIA COM O
MARKETING DIGITAL
Marcus Vinícius Liberato
2013
marcus
vinicius
marcusvinicius@fulltype.com.br
comunicação & marketing
Av. Alberto Lamego, 2000
Uenf • Centro de Convençõe...
PHILIP KOTLER
STEVE JOBS
“Não faz parte do trabalho do consumidor descobrir o que ele
quer. Não gastamos um dólar com isso...
PSICOLOGIA DAS CORES
GESTALT
IDENTIDADE CORPORATIVA
Trecho do Livro Design/Web/Design | Luli Radfahrer
“Imagem é identidade. A identidade corporativa d...
Tudo começa, e pode terminar, na…
ASSINATURA VISUAL
IDENTIDADE CORPORATIVA
“É aí que entra o design de identidade corporativa: se uma empresa quer ser co-
nhecida como inovad...
IDENTIDADE CORPORATIVA
ASSINATURA VISUAL
Logomarcamal visto
Logotipoimpreciso
Marcacuidado
Assinaturavisual ok
Logoapelido
Design Gráfico (!)
sim...
IDENTIDADE VISUAL (DEFINIÇÃO)
Um sistema de identidade visual [SIV] constitui um conjunto de definições
particulares relac...
ASSINATURA VISUAL (CLASSIFICAÇÃO)
segundo o INPI: marca é todo sinal distintivo, visualmente perceptível, que
identifica e...
ASSINATURA VISUAL (CLASSIFICAÇÃO)
logo-símbolo
ambos signos identificadores
estão formalmente integrados
e constituem uma ...
DEFINIÇÃO
Tipografiaéaáreadodesigngráficodedicadaaoestudo,aousoeacriaçãodeletras,
alfabetos e sistemas de escrita. É um do...
também é ferramenta de expressão.
Marcia Martins
Julia Valle
Diego Cataldo e Sergio Rodríguez
Fred Eerdekens
Vladimir Tomi...
_classificação
antigas
(pré-venezianas)
humanistas
(venezianas)
garaldinas
(old style)
transicional
(neo clássica)
serifa ...
LAYOUT
ZAGUEIRO
LAYOUT
ARTILHEIRO
ALGUMAS NOÇÕES BÁSICAS
DE PLANEJAMENTO VISUAL
RETIRADO DO LIVRO: DESIGN PARA QUEM NÃO É DESIGNER.
WILLIANS, ROBIN. 7ª EDIÇ...
PROXIMIDADE
PROXIMIDADE
O maior problema desta lis-
ta é que tudo está próximo
de tudo, dificultando uma
relação ou organização
A mesm...
ALINHAMENTO
ALINHAMENTO
REPETIÇÃO
CONTRASTE
FLAT DESIGN
Flat Design, o design plano.
Essa tendência do web design
é a pura simplicidade dos
elementos, da clareza do l...
DESENHANDO
COM FONTES
SKEUOMORPHISM
O QUE É ISSO?
Flat Design, o design plano.Essa tendência
do web design é a pura simpli...
METRO A “Linguagem de Design Microsoft”, também conhecido como
“Metro”, é a nova onda varrendo o web design.
DO PINTEREST PARA A WEB
OPinterestexplodiuempopularidadenofinalde2011,edeláparacá,owebdesignfoilargamente
influenciado pel...
FOTOS ORIGINAIS
Fotografias stock ou de metáforas clichê estão caindo em desuso (a menos que você
as useironicamente).Imag...
LAYOUTS ALL TYPE
Recurso já conhecido entre os criadores de artes impressas, o All Type agora é uma tendência
também em la...
FULL BACKGROUND
Backgrounds não são mais despercebidos e ganham cada vez mais detalhes e espaço nos layouts.
A tendência d...
LAYOUT MINIMALISTA
Menos é mais ainda está na moda! Nada de exageros, você pode ter um site
simples, mas rico em detalhes ...
CONTEÚDO SEGMENTADO
É tendência segmentar e dividir o conteúdo do seu site em diferentes páginas que apresentam apenas
inf...
ILUSTRAÇÕES
Emplenaeradigital,nuncafoitãocoolutilizarilustraçõesedesenhosestilizadosparacompor
o design de uma página. Alé...
RESOLUÇÕES MAIORES
Com a própria evolução do hardware, os monitores estão com resoluções cada vez maiores, o que possibili...
TRANSPARÊNCIA
Finalmente o Internet Explorer 6 foi aposentado, com isso, abriram-se as portas para as imagens em extensão
...
CROSSMEDIA TRANSMÍDIA
Crossmedia vem do inglês e significa
“cruzar” – ou “atravessar” – a mídia, ou
seja, levar o conteúdo...
ONLINE + OFFLINE + ONLINE...= ALLLINE
OBRIGADO!
“Nos países desenvolvidos as ideias são caras e os
produtos baratos, nos países sub-desenvolvidos as
ideias são ...
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II
Próximos SlideShares
Carregando em…5
×

Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II

1.050 visualizações

Publicada em

Palestra realizada no EmpíricaSpecialists II por Marcus Vinícius, responsável pela Agência FullType.

Nessa palestra, Marcus Vinícius, convidou o público a pensar fora da caixa quando o assunto é apresentar a marca para o público - de uma forma bem leiga de dizer.

Com toda a maestria que só um grande profissional pode oferecer, Marcus passa por diversos tópicos importantíssimos no que se refere a qualidade do desenvolvimento do Design em prol da publicidade e do Marketing.

Tópicos:
Os mestres da publicidade
A estrutura de pensamento da publicidade e do marketing
Psicologia das Cores
Gestalt
Identidade Corporativa
Tipografia
Layout
Planejamento Visual
Ilustrações
Crossmedia e Transmídia

Publicada em: Educação
1 comentário
1 gostou
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
1.050
No SlideShare
0
A partir de incorporações
0
Número de incorporações
28
Ações
Compartilhamentos
0
Downloads
51
Comentários
1
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Palestra: O Design e a Publicidade em sinergia com o Marketing - Marcus Vinicius - EmpíricaSpecialists II

  1. 1. O DESIGN E A PUBLICIDADE EM SINERGIA COM O MARKETING DIGITAL Marcus Vinícius Liberato 2013
  2. 2. marcus vinicius marcusvinicius@fulltype.com.br comunicação & marketing Av. Alberto Lamego, 2000 Uenf • Centro de Convenções Parque Califórnia | Campos • RJ CEP: 28013.602 Tel. 22 9989.8150 Publicitário e sócio proprietário www.fulltype.com.br
  3. 3. PHILIP KOTLER STEVE JOBS “Não faz parte do trabalho do consumidor descobrir o que ele quer. Não gastamos um dólar com isso. Não dá para sair pergun- tando às pessoas qual é a próxima grande coisa que elas querem. Henry Ford disse que, se tivesse questionado seus clientes sobre o que queriam, a resposta seria um cavalo mais rápido.” “Processo social por meio do qual pessoas e grupos de pessoas obtêm aquilo de que necessitam e o que desejam com a cria- ção, oferta e livre negociação de produtos e serviços de valor com outros.” “Marketing é satisfazes as necessidades dos clientes.”
  4. 4. PSICOLOGIA DAS CORES
  5. 5. GESTALT
  6. 6. IDENTIDADE CORPORATIVA Trecho do Livro Design/Web/Design | Luli Radfahrer “Imagem é identidade. A identidade corporativa de uma empresa é como ela se coloca perante o mundo. Essa identidade está em cartões, instalações, folhetos, cartazes, propaganda, website, em seus funcionários, no que a imprensa diz… é seu posicionamento estratégico na sociedade, uma “geral” da empresa.” “A primeira coisa que vem à cabeça quando falamos em identidade visual de uma empresa é seu logotipo. Isso acontece porque o logo (para os íntimos) é normalmente o primeiro e muitas vezes o único contato que ela terá com seu público. Por isso é tão importante e deve sintetizar todos os elementos que diferenciam essa empresa do resto. Um bom logotipo é muito mais que um desenho bonito ou uma “sacada visual”. É uma declaração de inten- ções e não deve deixar dúvidas.”
  7. 7. Tudo começa, e pode terminar, na… ASSINATURA VISUAL
  8. 8. IDENTIDADE CORPORATIVA “É aí que entra o design de identidade corporativa: se uma empresa quer ser co- nhecida como inovadora, ela deve ser realmente inovadora e, para que todo mun- do saiba disso, ela deve parecer inovadora.” Trecho do Livro Design/Web/Design | Autor Luli Radfahrer
  9. 9. IDENTIDADE CORPORATIVA
  10. 10. ASSINATURA VISUAL Logomarcamal visto Logotipoimpreciso Marcacuidado Assinaturavisual ok Logoapelido Design Gráfico (!) simbolo e/ou logotipo Branding (metonímia) “Marca é a percepção intuitiva de uma pessoa em relação a um produto, serviço ou empresa.” (Marty Neumeier)
  11. 11. IDENTIDADE VISUAL (DEFINIÇÃO) Um sistema de identidade visual [SIV] constitui um conjunto de definições particulares relacionadas a apresentação visual de uma empresa, produto ou serviço. Símbolo, logotipo, fonte de apoio e web, sistema de assinaturas, paleta de cores, grafismos e elementos de apoio linguagem gráfica materiais compor- tamento modelos tridimensionais animação avatares e mascotes, etc.
  12. 12. ASSINATURA VISUAL (CLASSIFICAÇÃO) segundo o INPI: marca é todo sinal distintivo, visualmente perceptível, que identifica e diferencia empresas, produtos e serviços de outros análogos. nominativa tipografia legível e sem estilização (?) figurativa imagem e/ou grafia estilizada mista imagem e tipografia sem estilização segundo o INPI: marca é todo sinal distintivo, visualmente perceptível, que identifica e diferencia empresas, produtos e serviços de outros análogos. classificação identidade visual
  13. 13. ASSINATURA VISUAL (CLASSIFICAÇÃO) logo-símbolo ambos signos identificadores estão formalmente integrados e constituem uma unidade gráfica indissociável. apenas símbolologotipo com símbolo em alguns casos o símbolo alcança um nível de imposição tão grande que pode prescindir totalmente do logotipo. ambos signos são independentes e têm capacidade de identificação tanto em conjunto como separados. formalmente logotipo com fundo o logotipo está inserido em um fundo sem autonomia no processo de identificação da marca. logotipo purologotipo com acessório representação exclusivamente tipográfica, caligráfica ou manuscrita do nome. o logotipo está acompanhado de algum sinal acessório sem autonomia no processo de identificação da marca. identificadores nominais identificadores simbólicosclassificação proposta por Norberto Chaves identidade visual
  14. 14. DEFINIÇÃO Tipografiaéaáreadodesigngráficodedicadaaoestudo,aousoeacriaçãodeletras, alfabetos e sistemas de escrita. É um dos campos mais tradicionais do design, cujo desenvolvimento teórico vem sendo construído há mais de 500 anos. _definição Tipografia é a área do design gráfico dedicada . é um dos campos mais tradicionais do design, cujo desenvolvimento teórico vem sendo construído há mais de 500 anos. ao estudo, ao uso e a criação de letras, alfabetos e sistemas de escrita tipografia
  15. 15. também é ferramenta de expressão. Marcia Martins Julia Valle Diego Cataldo e Sergio Rodríguez Fred Eerdekens Vladimir Tomin Amandine Alessandra 107 tipografia tutorial flopez
  16. 16. _classificação antigas (pré-venezianas) humanistas (venezianas) garaldinas (old style) transicional (neo clássica) serifa quadrada (slab) display (decorativas) modernas (didones) antes de 1400 1400 - 1500 1600 sem serifa (grotescas) 1700 1700 - 1800 1900 tip. digital 2000 (Old English) antigas humanistas garaldinas transicional modernas serifa quad. sem serifa display tip. digital (Centaur) (Baskerville)(Garamond) (Bodoni) (Rockwell) (Helvetica) (Mistral) (Scala) classificação derivada da proposta da pesquisadora Karen Cheng tipografia tutorial flopez
  17. 17. LAYOUT ZAGUEIRO
  18. 18. LAYOUT ARTILHEIRO
  19. 19. ALGUMAS NOÇÕES BÁSICAS DE PLANEJAMENTO VISUAL RETIRADO DO LIVRO: DESIGN PARA QUEM NÃO É DESIGNER. WILLIANS, ROBIN. 7ª EDIÇÃO, SÃO PAULO : CALLIS. 1995
  20. 20. PROXIMIDADE
  21. 21. PROXIMIDADE O maior problema desta lis- ta é que tudo está próximo de tudo, dificultando uma relação ou organização A mesma lista foi criada através de grupos visuais. Acrescentando um con- traste aos títulos e a linha divisória dá-se mais legibili- dade, o que torna mais fácil uma relação entre o título e seus tópicos.
  22. 22. ALINHAMENTO
  23. 23. ALINHAMENTO
  24. 24. REPETIÇÃO
  25. 25. CONTRASTE
  26. 26. FLAT DESIGN Flat Design, o design plano. Essa tendência do web design é a pura simplicidade dos elementos, da clareza do layout. Se distingue por suas formas cleans e planas. O conceito funciona sem variações na estrutura do layout, como chanfros, relevo, gradientes ou outras ferramentas que adicionam profundidade. Cada elemento ou caixa é nítido. Nada realista é adicionado.
  27. 27. DESENHANDO COM FONTES SKEUOMORPHISM O QUE É ISSO? Flat Design, o design plano.Essa tendência do web design é a pura simplicidade dos elementos, da clareza do layout. Se distingue por suas formas cleans e planas. O conceito funciona sem variações na estrutura do layout, como chanfros, relevo, gradientes ou outras ferramentas que adicionam profundidade. Cada elemento ou caixa é nítido. Nada realista é adicionado. Esta palavra complicada trata- se de algo que você encontra diariamente. Skeuomorphism é um estilo de design onde um objeto virtual mantém a aparência e a estrutura de um elemento real, apenas por questão de familiaridade.
  28. 28. METRO A “Linguagem de Design Microsoft”, também conhecido como “Metro”, é a nova onda varrendo o web design.
  29. 29. DO PINTEREST PARA A WEB OPinterestexplodiuempopularidadenofinalde2011,edeláparacá,owebdesignfoilargamente influenciado pelo visual limpo e ordenado do layout de grade que ele usa com maestria
  30. 30. FOTOS ORIGINAIS Fotografias stock ou de metáforas clichê estão caindo em desuso (a menos que você as useironicamente).Imagensautênticaseinovadorasestãosetornando uma parte vital de qualquer site de sucesso.
  31. 31. LAYOUTS ALL TYPE Recurso já conhecido entre os criadores de artes impressas, o All Type agora é uma tendência também em layouts para a web. Layout All Type consiste em utilizar bastante o contraste de tamanho de fontes, dando destaque a elas sem nenhum recurso de imagem ou foto.
  32. 32. FULL BACKGROUND Backgrounds não são mais despercebidos e ganham cada vez mais detalhes e espaço nos layouts. A tendência do momento é deixar o fundo da página cheio.
  33. 33. LAYOUT MINIMALISTA Menos é mais ainda está na moda! Nada de exageros, você pode ter um site simples, mas rico em detalhes e efeitos
  34. 34. CONTEÚDO SEGMENTADO É tendência segmentar e dividir o conteúdo do seu site em diferentes páginas que apresentam apenas informações relevantes e pertinentes ao tema principal. Muitos testes de usabilidade indicam que o internauta já se habituou a utilizar o botão voltar do navegador, ou seja, a famosa regra dos 3 cliques não é mais válida. MENOS ANIMAÇÕES Apesar das ilustrações estarem em alta, o uso de animações está cada vez mais perdendo força na internet, e os motivos são simples. Animações em Flash não ajudam os buscadores a indexar seu site nos resultados de busca e o aumento do número de acessos mobile está fazendo com que os sites sejam mais amigáveis aos navegadores dos celulares e smartphones. O navegador do iPhone por exemplo, não é compatível com conteúdos em flash que simplesmente não são exibidos na tela.
  35. 35. ILUSTRAÇÕES Emplenaeradigital,nuncafoitãocoolutilizarilustraçõesedesenhosestilizadosparacompor o design de uma página. Além de ajudar a direcionar a atenção do usuário para determinada área, uma boa ilustração agrega valor artístico ao seu site.
  36. 36. RESOLUÇÕES MAIORES Com a própria evolução do hardware, os monitores estão com resoluções cada vez maiores, o que possibilita queossitestrabalhememversõeswide.Oqueanteseraáreaperdida,aslateraisdossitessetornaramespaços potenciais para divulgação de produtos, serviços e até mesmo ferramentas que auxiliam na navegação. Os sites mais recentes têm aproveitado para inserir imagens relevantes e até caprichar em um background todo trabalhado e cheio de detalhes. RODAPÉ MAIS ALTO E ROBUSTO Sabemos que toda a informação importante que procuramos geralmente está disponível no rodapé do site, como telefone pra contato, endereço e horário de atendimento. As empresas perceberam que o rodapé do site é um ponto que pode ser muito bem trabalhado para aumentar a visibilidade das informações contidas ali. Muitas tem inclusive utilizado o espaço do rodapé para incluir um mapa do site com acesso a todas as páginas relevantes.
  37. 37. TRANSPARÊNCIA Finalmente o Internet Explorer 6 foi aposentado, com isso, abriram-se as portas para as imagens em extensão png que permite o uso de transparências e dégradés muito melhores e mais leves que os arquivos gif. Hoje em dia todos os navegadores suportam imagens png, possibilitando que sombras e transparências sejam amplamente usadas em seu site. BARRAS FIXAS Cada vez mais se tem notado o uso de barras fixas no navegador com atalho para as principais funcionalidades do site. Principalmente nos e-commerces esta tendência é muito útil para permitir a visualização rápida dos itens do carrinho e as opções de compartilhamento, além de ser um excelente canal para veiculação de promoções e lançamentos
  38. 38. CROSSMEDIA TRANSMÍDIA Crossmedia vem do inglês e significa “cruzar” – ou “atravessar” – a mídia, ou seja, levar o conteúdo além de um meio apenas. O termo em si não é muito co- mum, mas a utilização desta técnica é. O conteúdo (a mensagem) é distri- buído através de diferentes mídias (o meio) para atingir o público (o recep- tor), mas tudo isso acontece sem que a mensagem tenha qualquer alteração de um meio para o outro. O sentido básico deste termo é que uma pessoa possa acessar o mesmo conteúdo por diferentes meios. O transmedia, que também vem do in- glês, significa “além da” mídia, ou seja, o conteúdo sobressai a mídia. Na práti- ca, significa que o diferentes mídias (os meios) irão transmitir diferentes con- teúdos (as mensagens) para o público (o receptor), mas de forma que os dife- rentes meios se complementem. Se o receptor utilizar apenas um dos meios, vai ter apenas a mensagem parcial.
  39. 39. ONLINE + OFFLINE + ONLINE...= ALLLINE
  40. 40. OBRIGADO! “Nos países desenvolvidos as ideias são caras e os produtos baratos, nos países sub-desenvolvidos as ideias são caras e os produtos são caros” Roberto Menna Barreto

×