O DESIGN E A

PUBLICIDADE
EM SINERGIA COM O
MARKETING DIGITAL
Marcus Vincius Liberato
2013
marcus
vinicius
marcusvinicius@fulltype.com.br
comunicao & marketing
Av. Alberto Lamego, 2000
Uenf Centro de Convenes
Parque Califrnia | Campos RJ
CEP: 28013.602
Tel. 22 9989.8150
Publicitrio e scio proprietrio
www.fulltype.com.br
PHILIP KOTLER
STEVE JOBS
No faz parte do trabalho do consumidor descobrir o que ele
quer. No gastamos um dlar com isso. No d para sair pergun-
tando s pessoas qual a prxima grande coisa que elas querem.
Henry Ford disse que, se tivesse questionado seus clientes sobre
o que queriam, a resposta seria um cavalo mais rpido.
Processo social por meio do qual pessoas e grupos de pessoas
obtm aquilo de que necessitam e o que desejam com a cria-
o, oferta e livre negociao de produtos e servios de valor
com outros.
Marketing satisfazes as necessidades dos clientes.
PSICOLOGIA DAS CORES
GESTALT
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 cartes, instalaes, folhetos,
cartazes, propaganda, website, em seus funcionrios, no que a imprensa diz
seu posicionamento estratgico na sociedade, uma geral da empresa.
A primeira coisa que vem cabea 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
pblico. Por isso to 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 declarao de inten-
es e no deve deixar dvidas.
Tudo comea, e pode terminar, na
ASSINATURA VISUAL
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
IDENTIDADE CORPORATIVA
ASSINATURA VISUAL
Logomarca mal visto
Logotipo impreciso
Marca cuidado
Assinatura visual ok
Logo apelido
Design Grfco (!)
simbolo e/ou logotipo
Branding (metonmia)
Marca a percepo intuitiva
de uma pessoa em relao a um
produto, servio ou empresa.
(Marty Neumeier)
IDENTIDADE VISUAL (DEFINIO)
Um sistema de identidade visual [SIV] constitui um conjunto de defnies
particulares relacionadas a apresentao visual de uma empresa, produto
ou servio.
Smbolo, logotipo, fonte de apoio e web, sistema de assinaturas, paleta de
cores, grafsmos e elementos de apoio linguagem grfca materiais compor-
tamento modelos tridimensionais animao avatares e mascotes, etc.
ASSINATURA VISUAL (CLASSIFICAO)
segundo o INPI: marca todo sinal distintivo, visualmente perceptvel, que
identifca e diferencia empresas, produtos e servios de outros anlogos.
nominativa
tipografia legvel
e sem estilizao (?)
figurativa
imagem e/ou
grafia estilizada
mista
imagem e tipografia
sem estilizao
segundo o INPI: marca todo sinal distintivo, visualmente perceptvel,
que identifica e diferencia empresas, produtos e servios de outros anlogos.

classificao
(classificao de Viena)
40
identidade visual
tutorial flopez
ASSINATURA VISUAL (CLASSIFICAO)
logo-smbolo
ambos signos identificadores
esto formalmente integrados
e constituem uma unidade
grfica indissocivel.
apenas smbolo logotipo com smbolo
em alguns casos o smbolo
alcana um nvel de imposio
to grande que pode prescindir
totalmente do logotipo.
ambos signos so
independentes e tm capacidade
de identificao tanto em
conjunto como separados.
formalmente
logotipo com fundo
o logotipo est inserido em
um fundo sem autonomia no
processo de identificao da
marca.
logotipo puro logotipo com acessrio
representao exclusivamente
tipogrfica, caligrfica ou
manuscrita do nome.
o logotipo est acompanhado
de algum sinal acessrio sem
autonomia no processo de
identificao da marca.
identificadores nominais
identificadores simblicos classificao proposta por Norberto Chaves
41
identidade visual
tutorial flopez
DEFINIO
Tipografa a rea do design grfco dedicada ao estudo, ao uso e a criao de letras,
alfabetos e sistemas de escrita. um dos campos mais tradicionais do design, cujo
desenvolvimento terico vem sendo construdo h mais de 500 anos.
105
_definio
Tipografia a rea do design grfico dedicada
. um dos campos
mais tradicionais do design, cujo desenvolvimento terico vem sendo
construdo h mais de 500 anos.
ao estudo, ao uso e a
criao de letras, alfabetos e sistemas de escrita
tipografia
tutorial flopez
tambm ferramenta de expresso.
Marcia Martins
Julia Valle
Diego Cataldo e Sergio Rodrguez
Fred Eerdekens
Vladimir Tomin
Amandine Alessandra
107
tipografia
tutorial flopez
141
_classificao
antigas
(pr-venezianas)
humanistas
(venezianas)
garaldinas
(old style)
transicional
(neo clssica)
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)
classificao derivada da proposta da pesquisadora Karen Cheng
tipografia
tutorial flopez
LAYOUT
ZAGUEIRO
LAYOUT
ARTILHEIRO
ALGUMAS NOES BSICAS
DE PLANEJAMENTO VISUAL
RETIRADO DO LIVRO: DESIGN PARA QUEM NO DESIGNER.
WILLIANS, ROBIN. 7 EDIO, SO PAULO : CALLIS. 1995
PROXIMIDADE
PROXIMIDADE
O maior problema desta lis-
ta que tudo est prximo
de tudo, difcultando uma
relao ou organizao
A mesma lista foi criada
atravs de grupos visuais.
Acrescentando um con-
traste aos ttulos e a linha
divisria d-se mais legibili-
dade, o que torna mais fcil
uma relao entre o ttulo e
seus tpicos.
ALINHAMENTO
ALINHAMENTO
REPETIO
CONTRASTE
FLAT DESIGN
Flat Design, o design plano.
Essa tendncia do web design
a pura simplicidade dos
elementos, da clareza do layout.
Se distingue por suas formas
cleans e planas. O conceito
funciona sem variaes na
estrutura do layout, como
chanfros, relevo, gradientes
ou outras ferramentas que
adicionam profundidade. Cada
elemento ou caixa ntido. Nada
realista adicionado.
DESENHANDO
COM FONTES
SKEUOMORPHISM
O QUE ISSO?
Flat Design, o design plano.Essa tendncia
do web design a pura simplicidade dos
elementos, da clareza do layout. Se distingue
por suas formas cleans e planas. O conceito
funciona sem variaes na estrutura do
layout, como chanfros, relevo, gradientes
ou outras ferramentas que adicionam
profundidade. Cada elemento ou caixa
ntido. Nada realista adicionado.
Esta palavra complicada trata-
se de algo que voc encontra
diariamente. Skeuomorphism
um estilo de design onde
um objeto virtual mantm a
aparncia e a estrutura de
um elemento real, apenas por
questo de familiaridade.
METRO
A Linguagem de Design Microsoft, tambm conhecido como
Metro, a nova onda varrendo o web design.
DO PINTEREST PARA A WEB
O Pinterest explodiu em popularidade no fnal de 2011, e de l para c, o web design foi largamente
infuenciado pelo visual limpo e ordenado do layout de grade que ele usa com maestria
FOTOS ORIGINAIS
Fotografas stock ou de metforas clich esto caindo em desuso (a menos que voc
as use ironicamente). Imagens autnticas e inovadoras esto se tornando uma parte
vital de qualquer site de sucesso.
LAYOUTS ALL TYPE
Recurso j conhecido entre os criadores de artes impressas, o All Type agora uma tendncia
tambm 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.
FULL BACKGROUND
Backgrounds no so mais despercebidos e ganham cada vez mais detalhes e espao nos layouts.
A tendncia do momento deixar o fundo da pgina cheio.
LAYOUT MINIMALISTA
Menos mais ainda est na moda! Nada de exageros, voc pode ter um site
simples, mas rico em detalhes e efeitos
CONTEDO SEGMENTADO
tendncia segmentar e dividir o contedo do seu site em diferentes pginas que apresentam apenas
informaes relevantes e pertinentes ao tema principal. Muitos testes de usabilidade indicam que o internauta
j se habituou a utilizar o boto voltar do navegador, ou seja, a famosa regra dos 3 cliques no mais vlida.
MENOS ANIMAES
Apesar das ilustraes estarem em alta, o uso de animaes est cada vez mais perdendo fora na internet, e os
motivos so simples. Animaes em Flash no ajudam os buscadores a indexar seu site nos resultados de busca
e o aumento do nmero de acessos mobile est fazendo com que os sites sejam mais amigveis aos navegadores
dos celulares e smartphones. O navegador do iPhone por exemplo, no compatvel com contedos em fash
que simplesmente no so exibidos na tela.
ILUSTRAES
Em plena era digital, nunca foi to cool utilizar ilustraes e desenhos estilizados para compor
o design de uma pgina. Alm de ajudar a direcionar a ateno do usurio para determinada
rea, uma boa ilustrao agrega valor artstico ao seu site.
RESOLUES MAIORES
Com a prpria evoluo do hardware, os monitores esto com resolues cada vez maiores, o que possibilita
que os sites trabalhem em verses wide. O que antes era rea perdida, as laterais dos sites se tornaram espaos
potenciais para divulgao de produtos, servios e at mesmo ferramentas que auxiliam na navegao. Os
sites mais recentes tm 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 informao importante que procuramos geralmente est disponvel no rodap do site,
como telefone pra contato, endereo e horrio de atendimento. As empresas perceberam que o rodap do
site um ponto que pode ser muito bem trabalhado para aumentar a visibilidade das informaes contidas ali.
Muitas tem inclusive utilizado o espao do rodap para incluir um mapa do site com acesso a todas as pginas
relevantes.
TRANSPARNCIA
Finalmente o Internet Explorer 6 foi aposentado, com isso, abriram-se as portas para as imagens em extenso
png que permite o uso de transparncias e dgrads muito melhores e mais leves que os arquivos gif.
Hoje em dia todos os navegadores suportam imagens png, possibilitando que sombras e transparncias sejam
amplamente usadas em seu site.
BARRAS FIXAS
Cada vez mais se tem notado o uso de barras fxas no navegador com atalho para as principais funcionalidades
do site. Principalmente nos e-commerces esta tendncia muito til para permitir a visualizao rpida
dos itens do carrinho e as opes de compartilhamento, alm de ser um excelente canal para veiculao de
promoes e lanamentos
CROSSMEDIA TRANSMDIA
Crossmedia vem do ingls e signifca
cruzar ou atravessar a mdia, ou
seja, levar o contedo alm de um meio
apenas. O termo em si no muito co-
mum, mas a utilizao desta tcnica
. O contedo (a mensagem) distri-
budo atravs de diferentes mdias (o
meio) para atingir o pblico (o recep-
tor), mas tudo isso acontece sem que
a mensagem tenha qualquer alterao
de um meio para o outro. O sentido
bsico deste termo que uma pessoa
possa acessar o mesmo contedo por
diferentes meios.
O transmedia, que tambm vem do in-
gls, signifca alm da mdia, ou seja,
o contedo sobressai a mdia. Na prti-
ca, signifca que o diferentes mdias (os
meios) iro transmitir diferentes con-
tedos (as mensagens) para o pblico
(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.
ONLINE + OFFLINE + ONLINE...= ALL LINE
OBRIGADO!
Nos pases desenvolvidos as ideias so caras e os
produtos baratos, nos pases sub-desenvolvidos
as ideias so baratas e os produtos so caros
Roberto Menna Barreto