O DESIGN E APUBLICIDADE

EM SINERGIA COM OMARKETING DIGITAL

Marcus Vinícius Liberato

2013

marcusviniciusmarcusvinicius@fulltype.com.br

comunicação & marketing

Av. Alberto Lamego, 2000Uenf • Centro de ConvençõesParque Califórnia | Campos • RJCEP: 28013.602

Tel. 22 9989.8150

Publicitário e sócio proprietário

www.fulltype.com.br

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

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

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

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.

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ívele sem estilização (?)

figurativa

imagem e/ougrafia 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

(classificação de Viena)

40

identidade visual

tutorial flopez

ASSINATURA VISUAL (CLASSIFICAÇÃO)

logo-símbolo

ambos signos identificadores estão formalmente integrados e constituem uma unidade gráfica indissociável.

apenas símbolo logotipo com símbolo

em alguns casos o símbolo alcança um nível de imposiçãotão grande que pode prescindir totalmente do logotipo.

ambos signos são independentes e têm capacidadede 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 exclusivamentetipográfica, caligráfica ou manuscrita do nome.

o logotipo está acompanhadode algum sinal acessório semautonomia no processo de identificação da marca.

identificadores nominais

identificadores simbólicosclassificação proposta por Norberto Chaves

41

identidade visual

tutorial flopez

DEFINIÇÃOTipografia é a área do design gráfico dedicada ao estudo, ao uso e a criação de letras, 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.

105

_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

tutorial flopez

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

141

_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

LAYOUTZAGUEIRO

LAYOUTARTILHEIRO

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

PROXIMIDADE

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.

ALINHAMENTO

ALINHAMENTO

REPETIÇÃO

CONTRASTE

FLAT DESIGNFlat 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.

DESENHANDO COM FONTES

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

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

DO PINTEREST PARA A WEBO Pinterest explodiu em popularidade no final de 2011, e de lá para cá, o web design foi largamente influenciado pelo visual limpo e ordenado do layout de grade que ele usa com maestria

FOTOS ORIGINAISFotografias stock ou de metáforas clichê estão caindo em desuso (a menos que você as use ironicamente). Imagens autênticas e inovadoras estão se tornando uma parte vital de qualquer site de sucesso.

LAYOUTS ALL TYPERecurso 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.

FULL BACKGROUNDBackgrounds 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.

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

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ÇÕESApesar 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.

ILUSTRAÇÕESEm plena era digital, nunca foi tão cool utilizar ilustrações e desenhos estilizados para compor 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.

RESOLUÇÕES MAIORESCom a própria evolução do hardware, os monitores estão com resoluções cada vez maiores, o que possibilita que os sites trabalhem em versões wide. O que antes era área perdida, as laterais dos sites se tornaram espaç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 ROBUSTOSabemos 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.

TRANSPARÊNCIAFinalmente 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 FIXASCada 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

CROSSMEDIA TRANSMÍDIACrossmedia 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.

ONLINE + OFFLINE + ONLINE...= ALL LINE

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