O documento discute as relações entre design, publicidade e marketing digital. Apresenta conceitos como identidade visual, tipografia, cores, layout e tendências do design digital como flat design. Também aborda temas como crossmedia, transmídia e a integração entre canais online e offline.

1. O DESIGN E A
PUBLICIDADE
EM SINERGIA COM O
MARKETING DIGITAL
Marcus Vinícius Liberato
2013

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

4. 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.”

12. PSICOLOGIA DAS CORES

13. GESTALT

14. 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.”

15. Tudo começa, e pode terminar, na…
ASSINATURA VISUAL

18. 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

19. IDENTIDADE CORPORATIVA

20. 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)

21. 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.

22. 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

23. 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

26. 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

28. 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

29. _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

30. LAYOUT
ZAGUEIRO

31. LAYOUT
ARTILHEIRO

42. 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

43. PROXIMIDADE

44. 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.

45. ALINHAMENTO

46. ALINHAMENTO

47. REPETIÇÃO

48. CONTRASTE

50. 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.

51. 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.

52. METRO A “Linguagem de Design Microsoft”, também conhecido como
“Metro”, é a nova onda varrendo o web design.

53. DO PINTEREST PARA A WEB
OPinterestexplodiuempopularidadenofinalde2011,edeláparacá,owebdesignfoilargamente
influenciado pelo visual limpo e ordenado do layout de grade que ele usa com maestria

54. 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.

55. 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.

56. 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.

57. LAYOUT MINIMALISTA
Menos é mais ainda está na moda! Nada de exageros, você pode ter um site
simples, mas rico em detalhes e efeitos

58. 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.

59. 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.

60. 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.

61. 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

62. 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.

64. ONLINE + OFFLINE + ONLINE...= ALLLINE

69. 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