Plinio Okamoto [email_address] O que é Digital? Aula 1 Prof. Plinio Okamoto - 11 de Janeiro de 2011 O que é Digital? Digital 1:Conceitos Básicos

Plinio Okamoto [email_address] Programa da Disciplina O que é Digital? Digital 1:Conceitos Básicos Programa da Disciplina A01 - O que é Digital? A02 - Mídia Digital Tradicional A03 - Mídia Digital Rich-Media A04 - Planejamento de Campanhas * Layouts JOB 2 A05 - Redes Sociais + Marketing Viral * Layouts JOB 3 A06 - Entretenimento e Serviços * Layouts JOB 4 A07 - Mensuração de resultados A08 - Pós-Venda Digital * Layouts JOB 1 A09 - Integrando com outras mídias A10 - Avaliação Final com convidado * TODOS Layouts Programação de aulas sujeita a alterações * Feriado 25 de Janeiro - Reposição

Plinio Okamoto [email_address] Cenário Digital

O que é Digital? Digital 1:Conceitos Básicos Convergência das Mídias

Tempo de adoção de novas tecnologias Fonte: National Center for Policy Analysis 50 Milhões de pessoas Telefone 35 anos Rádio 22 anos Televisão 26 anos Celular 13 anos O que é Digital? Digital 1:Conceitos Básicos Internet 4 anos iPod 3 anos Facebook 100 mi em 9 meses

Valor Pessoas atingidas Clientes ou prospects de Maior Valor ou de Maior Potencial Marketing Direto Marketing de Massa Barreira Fonte: Peppers and Rogers Group Alcance das ferramentas de Mkt O que é Digital? Digital 1:Conceitos Básicos

Investimento em comunicação Fonte: Advertising Age http://adage.com/agencynews/article?article_id=126852 Brasil 4,8% Inglaterra 13,7% O que é Digital? Digital 1:Conceitos Básicos

VENDA DE COMPUTADORES 100 MILHÕES DE COMPUTADORES ATÉ 2012 Fonte: G1.COM.BR/ FGV O que é Digital? Digital 1:Conceitos Básicos COMPUTADORES VENDIDOS EM 2007 8,3 MILHÕES% + 10 MILHÕES PREVISÃO DE VENDAS PARA 2009 + 40 MILHÕES PREVISÃO DE VENDAS ATÉ 2012

68,5 MILHÕES DE PESSOAS ACESSAM A INTERNET NO BRASIL. Fonte: Datafolha – Residencial e corporativo A Internet é o único meio com crescimento constante ao longo dos anos. Antes considerada mídia segmentada, ultrapassou a penetração de revista e jornal e hoje consolida-se como mídia de massa. O que é Digital? Digital 1:Conceitos Básicos

O que é Digital? Digital 1:Conceitos Básicos

PENETRAÇÃO DOS MEIOS A combinação dos meios com a internet potencializa a cobertura da campanha. O que é Digital? Digital 1:Conceitos Básicos

PENETRAÇÃO DA INTERNET NA CLASSE C Estudos sócio-econômicos garantem a capacidade de compra da classe C em 2009. Entre os diversos sonhos de consumo deste segmento, a posse de computadores e acesso a Internet seguem como prioridades. IAB estima que até o final de 2009, praticamente de cada 2 pessoas dessa classe, 1 seja internauta. Fonte: TGI Brasil fev à jul - 2008 O que é Digital? Digital 1:Conceitos Básicos

Plinio Okamoto [email_address] Plataformas de propagação da comunicação on-line Fonte: Cannes Presentations, 2009. O que é Digital? Digital 1:Conceitos Básicos

Campanhas passam a ser full-time Fonte: Cannes Presentations, 2009. O que é Digital? Digital 1:Conceitos Básicos

REDES SOCIAIS NO BRASIL Fonte: COMSCORE AGO/09 INTERNAUTAS ATIVOS EM ALGUMA REDE SOCIAL 24.980.000 9.040.000.000 TOTAL DE MINUTOS NAVEGADOS NAS REDES SOCIAIS 06h03m16s TEMPO MÉDIO DE NAVEGAÇÃO POR USUÁRIO DE REDE SOCIAL 32.059.000.000 PÁGINAS VISTAS DENTRO DAS REDES SOCIAIS 90% do consumo de banda larga do tráfego da internet seja direcionado para as redes sociais. Segundo estudos feitos pela IBM em junho/09 é de que até 2012

Conhecimento Consideração Pesquisa Compra Experiência Uso Satisfação Eu vejo, quero, compro e gosto Opinião Alguns palpites sobre isso Recomendação Vou te apresentar aos meus amigos Clientes satisfeitos contam para 3 Clientes insatisfeitos contam para 3.000 Fonte: Emerson Callegaretti, MySpace

Publicidade: Grau de confiança do consumidor Fonte: Forrester Research and Inteliseek O que é Digital? Digital 1:Conceitos Básicos

A Ca uda Longa Mkt de Nicho O que é Digital? Digital 1:Conceitos Básicos

Digital: Ciclo completo de Venda Exposição de Marca Conhecimento do produto Experiência* Compra CRM     Websites, Mobile Sites & Apps O que é Digital? Digital 1:Conceitos Básicos

O consumidor vive 5 momentos com uma marca/produto O que é Digital? Digital 1:Conceitos Básicos tempo Relacionamento com a marca Aquisição Rentabilização Fidelização Anti- Atrito Retenção Win Back

Programa de fidelidade Clube de Vantagem Reconhecimento Estratégias de RETENÇÃO: Ações especiais para quem está em curva de desativação. Ilha de retenção no sac separada Lead Generation Venda Direta Up – grade Cross Selling MGM Estratégias de recuperação: Ações c/ofertas agressivas Pesquisa Estratégia para cada momento do ciclo de vida O que é Digital? Digital 1:Conceitos Básicos tempo Relacionamento com a marca Aquisição Rentabilização Fidelização Anti- Atrito Retenção Win Back

Site O que é Digital? Digital 1:Conceitos Básicos

Inovação: Redesign de QR-Codes para acessar os sites mobile. Louis Vuitton

Ver Vídeo 4:30 CHANEL PARIS-SHANGHAI Série de 8 filmes de cerca de 10 minutos de duração cujas histórias girariam em torno do BMW. Produção cinematográfica só distribuida pela internet. www.chanel-paris-shanghai.com www.chanel-paris-shanghai.com Chanel

“ Interactive Kitchen Vignettes” - Permite customizar nove diferentes cozinhas e ajuda a achar os produtos certos baseado nos atributos funcionais e de design Sustentabilidade – Comentários de construtores, designers e consumidores sobre cozinhas “verdes” Link para lojas que vendem produtos orgânicos Fonte: The Digital IQ Index, September 2009 Sub-Zero and Wolf

Plinio Okamoto [email_address]

Plinio Okamoto [email_address]

http://www.votorantim.com.br/ O que é Digital? Digital 1:Conceitos Básicos

Fonte: Jesse James Garrett Etapas da construção de sites O que é Digital? Digital 1:Conceitos Básicos

Estratégia Escopo Através do novo site, mostrar modernidade do grupo, deixando claro que Votorantim é mais do que cimento, engloba diversas UNs e tem presença global. - Grupo Votorantim - Presença Global - 3 idiomas - Unidade de negócios - Responsabilidade Social - Sala de imprensa - Votorantim e Você - RH O que é Digital? Digital 1:Conceitos Básicos

Estrutura (Mapa do Site) O que é Digital? Digital 1:Conceitos Básicos

Descrição da tela English version I Versión en Español I Webmail I Mapa do site Logo Votorantim 2005 – Grupo Votorantim I Todos os direitos reservados Política de privacidade Copyright Adicione aos favoritos O Grupo Votorantim Presença Global Áreas de Negócio Votorantim e você Responsabilidade Social Informações Finaceiras Gestão de Pessoas - RH Sala de Imprensa Estudantes Atendimento Notícias Votorantim I Lorem ipsum dolor sit amet, consectetuer adipiscing elit lorem ipsum dolor sit amet, consectetuer adipiscing elit I Descrição da tela Logo – presente em todas as telas com link para home do site Header – presente em todas as telas com Busca Menu – presente em todas as telas com os nomes das seções de primeiro nível com “mouse-over” para ver as sub-seções Menu das áreas de negócio – ao clicar em uma área de negócio diferente de alterar a imagem de ambientação e a área de conteúdo abaixo da imagem de ambientação. Imagem de ambientação – ao entrar no site deve aparecer uma imagem do grupo votorantim com link para “conheça a votorantim” que chamará um conteúdo em flash já produzido pela votorantim. Nesta mesma área tanto a imagem como o link devem mudar conforme a “área de negócio” escolhida no menu lateral dentro da ambientação. Destaque principal – destaque principal com título, texto, imagem e link possíveis de alterar via sistema administrador Destaques secundários – destaque com título, texto e link possíveis de alterar via sistema administrador Notícias – tira de notícias animadas.Presente em todas as telas. Rodapé – link para os pop ups do menu de apoio presente em todas as telas. Imagem de ambientação Sub-título Texto sobre matéria, texto sobre a matéria texto sobre a matéria saiba mais >> Título Agroindústria Celulose e Papel Cimentos Energia Internacional Metais Química Finanças Novos Negócios Conheça a Votorantim Sub-título Texto sobre matéria, texto sobre a matéria texto sobre a matéria saiba mais >> Título imagem do destaque AI – Wireframes/DDF HOMEPAGE O que é Digital? Digital 1:Conceitos Básicos Busca ok

Descrição da tela English version I Versión en Español I Webmail I Mapa do site Logo Votorantim 2005 – Grupo Votorantim I Todos os direitos reservados Política de privacidade Copyright Adicione aos favoritos O Grupo Votorantim Presença Global Áreas de Negócio Votorantim e você Responsabilidade Social Informações Finaceiras Gestão de Pessoas - RH Sala de Imprensa Estudantes Atendimento Notícias Votorantim I Lorem ipsum dolor sit amet, consectetuer adipiscing elit lorem ipsum dolor sit amet, consectetuer adipiscing elit I imagem de ambientação Título imagem 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur interdum porttitor erat. Morbi a erat sed tortor tempus mattis. Sed quam lectus, pellentesque nec, tristique ut, rutrum nec, lacus. Suspendisse porttitor volutpat tellus. Mauris lectus velit, auctor eget, tempus id. Tempor vel, sapien. Donec sagittis, eros vel venenatis vehicula, lectus diam nonummy lorem, quis dictum ligula velit et urna. Quisque mollis tellus nec ligula. Nulla iaculis, eros ac ultrices faucibus, nisl tortor fermentum tellus, elementum viverra elit wisi ac ante. Nulla quam nisl, suscipit rhoncus, fringilla eu, mattis eu, quam. Nullam commodo dapibus diam. Praesent at felis. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur interdum porttitor erat. Morbi a erat sed tortor tempus mattis. Sed quam lectus, pellentesque nec, tristique ut, rutrum nec, lacus. Suspendisse porttitor volutpat tellus. Mauris lectus velit, auctor eget, tempus id, tempor vel, Descrição da tela Imagem de ambientação – imagem estática presente em todas as telas. Item obrigatório. Cada seção deve ter um imagem de referencia. Título – item obrigatório. Possível de alterar via sistema administrador Hierarquia de navegação – item obrigatório, presente em todas as telas com link para as respectivas seções. Olho – Destaque no começo do texto com limite de tamanho de texto. Possível de alterar via sistema administrador Texto – Item obrigatório. Possível de alterar via sistema administrador com limite de tamanho de texto. Imagem – possível de alterar via sistema administrador Links do rodapé (elementos obrigatórios) versão para impressão – possibilidade de imprimir o conteúdo desta tela voltar – voltar a tela de origem do usuário topo – âncora com o título da página home > 1º nível > 2º nível Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur interdum porttitor erat. Morbi a erat sed tortor tempus mattis. Sed quam lectus, pellentesque nec, tristique ut, rutrum nec, lacus. voltar topo versão para impressão AI – Wireframes/DDF INTERNA O que é Digital? Digital 1:Conceitos Básicos Busca ok

Descrição da tela English version I Versión en Español I Webmail I Mapa do site Logo Votorantim 2005 – Grupo Votorantim I Todos os direitos reservados Política de privacidade Copyright Adicione aos favoritos O Grupo Votorantim Presença Global Áreas de Negócio Votorantim e você Responsabilidade Social Informações Finaceiras Gestão de Pessoas - RH Sala de Imprensa Estudantes Atendimento Notícias Votorantim I Lorem ipsum dolor sit amet, consectetuer adipiscing elit lorem ipsum dolor sit amet, consectetuer adipiscing elit I imagem de ambientação Título imagem 1 Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur interdum porttitor erat. Morbi a erat sed tortor tempus mattis. Sed quam lectus, pellentesque nec, tristique ut, rutrum nec, lacus. Link para a seção>> Tempor vel, sapien. Donec sagittis, eros vel venenatis vehicula, lectus diam nonummy lorem, quis dictum ligula velit et urna. Quisque mollis tellus nec ligula. Nulla iaculis, eros ac ultrices faucibus, nisl tortor fermentum tellus, elementum viverra elit wisi ac ante. Nulla quam nisl, suscipit rhoncus, fringilla Link para a seção>> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur interdum porttitor erat. Morbi a erat sed tortor tempus mattis. Sed quam lectus, pellentesque nec, tristique ut, rutrum nec, lacus. Link para a seção>> Descrição da tela Imagem de ambientação – imagem estática presente em todas as telas. Item obrigatório. Cada seção deve ter um imagem de referencia. Título – item obrigatório. Possível de alterar via sistema administrador Hierarquia de navegação – item obrigatório, presente em todas as telas com link para as respectivas seções. Olho – Destaque no começo do texto com limite de tamanho de texto. Possível de alterar via sistema administrador Sub-título – Possível de alterar via sistema administrador Blocos de texto – Item obrigatório. Possível de alterar via sistema administrador com limite de tamanho de texto. Cada bloco de texto pode ter ou não uma imagem associada e um link externo ou interno. Imagens – possível de alterar via sistema administrador. Permite inserção de uma imagem vinculada para cada texto Links do rodapé (elementos obrigatórios) versão para impressão – possibilidade de imprimir o conteúdo desta tela voltar – voltar a tela de origem do usuário topo – âncora com o título da página home > 1º nível > 2º nível Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur interdum porttitor erat. Morbi a erat sed tortor tempus mattis. Sed quam lectus. voltar topo versão para impressão imagem 2 imagem 3 Sub-título 1 Sub-título 2 Sub-título 3 AI – Wireframes/DDF NOTÍCIAS O que é Digital? Digital 1:Conceitos Básicos Busca ok

AI – Wireframes/DDF FORMULÁRIOS Descrição da tela English version I Versión en Español I Webmail I Mapa do site Logo Votorantim 2005 – Grupo Votorantim I Todos os direitos reservados Política de privacidade Copyright Adicione aos favoritos O Grupo Votorantim Presença Global Áreas de Negócio Votorantim e você Responsabilidade Social Informações Finaceiras Gestão de Pessoas - RH Sala de Imprensa Estudantes Atendimento Notícias Votorantim I Lorem ipsum dolor sit amet, consectetuer adipiscing elit lorem ipsum dolor sit amet, consectetuer adipiscing elit I imagem de ambientação Título Descrição da tela Imagem de ambientação – imagem estática presente em todas as telas. Item obrigatório. Cada seção deve ter um imagem de referencia. Título – item obrigatório. Possível de alterar via sistema administrador Hierarquia de navegação – item obrigatório, presente em todas as telas com link para as respectivas seções. Olho – Destaque no começo do texto com limite de tamanho de texto. Possível de alterar via sistema administrador Imagens – possível de alterar via sistema administrador. permite inserção de uma imagem com tamanho preestabelecido. Teremos um place holder de imagem Links do rodapé (elementos obrigatórios) voltar – voltar a tela de origem do usuário topo – âncora com o título da página home > 1º nível > 2º nível voltar topo versão para impressão Item 1 Item 2 Item 3 Item 4 opção 1 opção 2 Item 5 enviar Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur interdum porttitor erat. Morbi a erat sed tortor tempus mattis. Sed quam imagem 1 O que é Digital? Digital 1:Conceitos Básicos Busca ok

AI – Wireframes/DDF IMAGENS Descrição da tela English version I Versión en Español I Webmail I Mapa do site Logo Votorantim 2005 – Grupo Votorantim I Todos os direitos reservados Política de privacidade Copyright Adicione aos favoritos O Grupo Votorantim Presença Global Áreas de Negócio Votorantim e você Responsabilidade Social Informações Finaceiras Gestão de Pessoas - RH Sala de Imprensa Estudantes Atendimento Notícias Votorantim I Lorem ipsum dolor sit amet, consectetuer adipiscing elit lorem ipsum dolor sit amet, consectetuer adipiscing elit I imagem de ambientação Título Descrição da tela Imagem de ambientação – imagem estática presente em todas as telas. Item obrigatório. Cada seção deve ter um imagem de referencia. Título – item obrigatório. Possível de alterar via sistema administrador Hierarquia de navegação – item obrigatório, presente em todas as telas com link para as respectivas seções. Olho – Destaque no começo do texto com limite de tamanho de texto. Possível de alterar via sistema administrador Imagens – possível de alterar via sistema administrador. Permite inserção de imagens com tamanho pré-estabelecido. Ao clicar em uma imagem o usuário dever ver um pop up com a imagem em tamanho maior. Legenda –Possível de alterar via sistema administrador com limite de tamanho de texto. Links do rodapé (elementos obrigatórios) versão para impressão – possibilidade de imprimir o conteúdo desta tela voltar – voltar a tela de origem do usuário topo – âncora com o título da página home > 1º nível > 2º nível voltar topo versão para impressão legenda, legenda Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur interdum porttitor erat. Morbi a erat sed tortor tempus mattis. Sed quam lectus, pellentesque nec. Morbi a erat sed tortor tempus mattis. Sed quam lectus, pellentesque nec. imagem 1 legenda, legenda imagem 2 legenda, legenda imagem 3 legenda, legenda imagem 4 legenda, legenda imagem 5 legenda, legenda imagem 6 legenda, legenda imagem 7 legenda, legenda imagem 8 legenda, legenda imagem 9 legenda, legenda imagem 10 O que é Digital? Digital 1:Conceitos Básicos Busca ok

Identidade Visual – Interface / Layout HOMEPAGE

Identidade Visual – Interface / Layout INTERNA

Plinio Okamoto [email_address] S T Q Q S S D S T Q Q S S D S T Q Q S S D S T Q Q O que é Digital? Digital 1:Conceitos Básicos

Métricas O que é Digital? Digital 1:Conceitos Básicos Nº Visitantes 149.000 Nº de Cadastros Hotsite 33.515 Taxa de Conversão (acessos. unic. x cadastros) 45,51% Nº Exibições Páginas (impressões) 1.441.677 Nº de Frases Concurso Cultural 7.017 Tempo Médio no Site 13m06 Wallpapers 4.443 downloads Média de páginas por visita 4 (12%) / 20+ (10%)

Fonte: Jesse James Garrett Etapas da construção de sites O que é Digital? Digital 1:Conceitos Básicos

O que é Digital? Digital 1:Conceitos Básicos

O que é Digital? Digital 1:Conceitos Básicos

O que é Digital? Digital 1:Conceitos Básicos

Plinio Okamoto [email_address] O que é Digital? Aula 1 Prof. Plinio Okamoto - 11 de Janeiro de 2011 O que é Digital? Digital 1:Conceitos Básicos