Digital1_Aula01

65
Plinio Okamoto [email protected] O que é Digital? Aula 1 Prof. Plinio Okamoto - 12 de Janeiro de 2010 O que é Digital? Digital 1:Conceitos Básicos

description

 

Transcript of Digital1_Aula01

Page 1: Digital1_Aula01

Plinio [email protected]

O que é Digital?

Aula 1

Prof. Plinio Okamoto - 12 de Janeiro de 2010

O que é Digital?

Digital 1:Conceitos Básicos

Page 2: Digital1_Aula01

Plinio [email protected]

Programa da Disciplina

A01 - 12.Jan - O que é Digital?A02 - 19.Jan - Mídia Digital TradicionalA03 - 26.Jan - Mídia Digital Rich-Media A04 - 02.Fev - Planejamento de Campanhas A05 - 09.Fev - Redes Sociais + Marketing Viral A06 - 16.Fev – Entretenimento e Serviços A07 - 23.Fev – Mensuração de resultados - ROI e ROEA08 - 02.Mar - Pós-Venda Digital A09 - 09.Mar – Integrando com outras mídias A10 - 16.Mar – Integrando com outras mídias A11 - 23.Mar - Avaliação Final com convidado

O que é Digital?

Digital 1:Conceitos Básicos

Page 3: Digital1_Aula01

Plinio [email protected]

Cenário Digital

Page 4: Digital1_Aula01

• Há 20 anos, mundo era praticamente todo analógico

• CDs foram a primeira forma de informação digital mais popular

• No analógico, cada aparelho para uma função

• Cada canal com um objetivo

Mundo analógico

O que é Digital?

Digital 1:Conceitos Básicos

Fonte: Michel Lent Schwartzman

Page 5: Digital1_Aula01

• Informação está completando um processo de digitalização

• O que antes era analógico, agora passa a ser representado em ‘zeros’ e ‘uns’: DIGITAL

• Tudo é digitalizável:– Imagem; Sons; Vídeo; Texto, Informação

• Aparelhos digitais, passam a ser multimídia: relógio-cdplayer; celular com câmera; TV com internet

• Graças ao DIGITAL

O mundo passa a ser digital

O que é Digital?

Digital 1:Conceitos Básicos

Fonte: Michel Lent Schwartzman

Page 6: Digital1_Aula01

Convergência das Mídias

O que é Digital?

Digital 1:Conceitos Básicos

Fonte: Michel Lent Schwartzman

• A informação está em todos os lugares

• Todos os aparelhos podem fazer tudo

• As mídias convergem, os aparelhos se confundem

• Diferença das mídias e das empresas, começa a desaparecer

• A internet é o ‘laboratório’ de ensaios para este encontro

Page 7: Digital1_Aula01

O que é Digital?

Digital 1:Conceitos Básicos

Convergência das Mídias

Page 8: Digital1_Aula01

Possibilidade da Interação

O que é Digital?

Digital 1:Conceitos Básicos

Fonte: Michel Lent Schwartzman

• Entramos na era da comunicação da interativa

• Onde o avanço tecnológico começa a possibilitar a interação

• Um momento onde os dois modelos, “tradicional” e “novo”, convivem

• Um com formatos muito bem desenvolvidos, mas ultrapassados

• Outro com formatos experimentais, mas promissores

Page 9: Digital1_Aula01

A internet é a arena central da Campanha

O que é Digital?

Digital 1:Conceitos Básicos

Fonte: Michel Lent Schwartzman

• Foi-se o tempo em que os comerciais de 30” eram o centro de uma campanha

• A arena central agora é a internet

• Os projetos especiais criados para campanhas são o novo centro da comunicação das marcas

• É na internet que se dá a verdadeira interação

• É na internet onde o espaço é ilimitado e tudo pode ser feito

• Sem definição de formato, duração, tecnologia

Page 10: Digital1_Aula01

Tempo de adoção de novas tecnologias

Fonte: National Center for Policy Analysis

50 Milhõesde pessoas

Internet 4 anos

Telefone 35 anosRádio 22 anosTelevisão 26 anosCelular 13 anos

iPod 3 anos

Facebook 100 mi em 9 meses

O que é Digital?

Digital 1:Conceitos Básicos

Page 11: Digital1_Aula01

Valor

Pessoasatingidas

Clientes ou prospectsde Maior Valor ou de Maior Potencial

Marketing DiretoMarketing de Massa

Barreira

Fonte: Peppers and Rogers Group

Alcance das ferramentas de Mkt

O que é Digital?

Digital 1:Conceitos Básicos

Page 12: Digital1_Aula01

3

3

2 2

2 2

1

5 5 4 46

6 5 5 4 4

1

1

1

Volume de Vendas ou Lucratividade

Pote

nci

al de V

end

as

• Relacionamento B2C / B2B

O que é Digital?

Digital 1:Conceitos Básicos

Page 13: Digital1_Aula01

Prescrição Produtos Roche

Pote

nci

al d

e P

resc

riçã

o

B5

C5

B4 B3

C4 C3

D4 D3 D2 D1D5

E5 E4 E3 E2 E1

C1

B2

C2

A5 A4 A3 A1A2

B1

D5

MÉDIO POTENCIAL DE PRESCRIÇÃO E MÉDIO VOLUME DE PRESCRIÇÃO

• Cliente mediano em termos de receita total mas com potencial grande de incremento de prescrição • Investimento médio • Freqüência média com mescla de ações de certo impacto e com ações que tragam a Roche para perto dele

ALTO POTENCIAL DE PRESCRIÇÃO E ALTO VOLUME DE PRESCRIÇÃO

• Melhor cliente. Quase todo o potencial transformado em prescrição• Investimento alto • Freqüência baixa com ações de grande impacto

BAIXO POTENCIAL DE PRESCRIÇÃO E ALTO VOLUME DE PRESCRIÇÃO

• Cliente muito bom dentro do potencial de prescrição. Quase todo o potencial transformado em prescrição• Investimento médio • Freqüência baixa com ações de grande impacto

BAIXO POTENCIAL DE PRESCRIÇÃO E BAIXO VOLUME DE PRESCRIÇÃO

• Mesmo que o volume de receita cresça, sempre será pouco lucrativo para a Roche• Baixo investimento • Média freqüência

ALTO POTENCIAL DE PRESCRIÇÃO E BAIXO VOLUME DE PRESCRIÇÃO

• Cliente muito fraco em termos de receita total mas com o melhor potencial de incremento de prescrição• Investimento médio • Freqüência alta de comunicação

BAIXO POTENCIAL DE PRESCRIÇÃO E MÉDIO VOLUME DE PRESCRIÇÃO

• Cliente fraco em termos de receita total mas com potencial interessante de incremento de prescrição• Investimento médio • Freqüência média com poucas ações de certo impacto e com mais ações que tragam a Roche para perto dele

O que é Digital?

Digital 1:Conceitos Básicos

Page 14: Digital1_Aula01

Investimento em comunicação

Fonte: Advertising Agehttp://adage.com/agencynews/article?article_id=126852

Brasil 4,8%

Inglaterra 13,7%

O que é Digital?

Digital 1:Conceitos Básicos

Page 15: Digital1_Aula01

NÚMERO DE INTERNAUTAS NO BRASIL

Em Mil – População 16 anos

Estimativa IAB

Histórico IBOPE/Gnett

Amostra com linha telefônica, com

acesso de qualquer lugar

Estimativa IBOPE Nielsen Online para

2008Amostra

independente de linha telefônica, com acesso de qualquer

lugar.

Estimativa IBOPE Nielsen Online para

2008Amostra

independente de linha telefônica, com acesso de qualquer

lugar.

10%

Crescimento médio 10% ao ano Em 3 anos a web cobrirá + 50% da população Mídia de massa sem perder a essência da mídia de nicho

O que é Digital?

Digital 1:Conceitos Básicos

Page 16: Digital1_Aula01

VENDA DE COMPUTADORES

COMPUTADORES VENDIDOS EM 2007

8,3 MILHÕES%

+ 10 MILHÕESPREVISÃO DE VENDAS PARA 2009

+ 40 MILHÕESPREVISÃO DE VENDAS ATÉ 2012

100 MILHÕESDE COMPUTADORES ATÉ 2012

Fonte: G1.COM.BR/ FGV

O que é Digital?

Digital 1:Conceitos Básicos

Page 17: Digital1_Aula01

68,5 MILHÕES DE PESSOAS ACESSAM A INTERNET NO BRASIL.

Fonte: Datafolha Set/08 – 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

Page 18: Digital1_Aula01

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

Page 19: Digital1_Aula01

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

Page 20: Digital1_Aula01

Divulgação

Busca Mídia Viral

- Busca Orgânica- Links Patrocinados

- Banners- Redes Sociais- E-mail Mkt- Mobile- Games- Offline

- Esforço inicial- Sem controle- Vídeo no YouTube- Ferramenta

O que é Digital?

Digital 1:Conceitos Básicos

Page 21: Digital1_Aula01

Plinio [email protected]

Plataformas de propagação da comunicação on-line

Fonte: Cannes Presentations, 2009.

O que é Digital?

Digital 1:Conceitos Básicos

Page 22: Digital1_Aula01

Campanhas passam a ser full-time

Fonte: Cannes Presentations, 2009.

O que é Digital?

Digital 1:Conceitos Básicos

Page 23: Digital1_Aula01

REDES SOCIAIS NO BRASILFo

nte:

CO

MSC

OR

E A

GO

/09

INTERNAUTAS ATIVOS EM ALGUMA REDE SOCIAL

24.980.000

9.040.000.000TOTAL DE MINUTOS NAVEGADOS

NAS REDES SOCIAIS

06h03m16sTEMPO MÉDIO DE NAVEGAÇÃO POR

USUÁRIO DE REDE SOCIAL

32.059.000.000PÁ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

Page 24: Digital1_Aula01

Conhecimento

Consideração

Pesquisa

Compra

Experiência

Uso

SatisfaçãoSatisfaçãoEu vejo, quero, Eu vejo, quero, compro e gostocompro e gosto

OpiniãoOpiniãoAlguns palpites Alguns palpites

sobre issosobre isso

RecomendaçãoRecomendaçãoVou te Vou te

apresentar aos apresentar aos meus amigosmeus amigos Clientes satisfeitos contam para 3

Clientes insatisfeitos contam para 3.000 Fonte: Emerson Callegaretti, MySpace

Page 25: Digital1_Aula01

EVOLUÇÃO DO SEARCH

INTERNAUTAS ATIVOS EM BUSCA24.565.000

1.044TOTAL DE MINUTOS NAVEGADOS NAS

REDES SOCIAIS

42m07sTEMPO MÉDIO DE NAVEGAÇÃO POR

USUÁRIO EM BUSA

Font

e: C

omSc

ore

ago/

09

A exemplo do mercado americano o Bing (buscador- parceria entre Yahoo! E Microsoft) já começa a aparecer no mercado brasileiro. A expectativa é que Microsoft e Yahoo!

podem chegar a ter 40% de participação nos EUA.Fonte: ComScore.

Page 26: Digital1_Aula01

EVOLUÇÃO DO ECOMMERCE

Page 27: Digital1_Aula01

Publicidade: Grau de confiança do consumidor

Fonte: Forrester Research and Inteliseek

O que é Digital?

Digital 1:Conceitos Básicos

Page 28: Digital1_Aula01

A Cauda Longa

Mkt de Nicho

O que é Digital?

Digital 1:Conceitos Básicos

Page 29: Digital1_Aula01

• Personalização e Customização em massa

• Web: Horário de trabalho

• Celular: on the move

• Consome mídia QUANDO, AONDE e NO FORMATO que quiser

Novo Cenário

O que é Digital?

Digital 1:Conceitos Básicos

Page 30: Digital1_Aula01

Digital: Ciclo completo de Venda

Exposiçãode Marca

Conhecimentodo produto

Experiência* Compra CRM

Websites, Mobile Sites & Apps

O que é Digital?

Digital 1:Conceitos Básicos

Page 31: Digital1_Aula01

Internet Comunicação Dirigida

Comunicação Dirigida Segmentação

SegmentaçãoPerfil demográfico

Comportamento e hábitosOcasião de consumo

Momento do ciclo de vida

Premissas

O que é Digital?

Digital 1:Conceitos Básicos

Page 32: Digital1_Aula01

tempo

Rel

acio

nam

ento

com

a m

arca

Aquisição

Rentabilização Fidelização

Anti- Atrito Retenção

Win Back

O consumidor vive 5 momentos com uma marca/produto

O que é Digital?

Digital 1:Conceitos Básicos

Page 33: Digital1_Aula01

tempo

Rel

acio

nam

ento

com

a m

arca

Aquisição

Rentabilização Fidelização

Anti- Atrito Retenção

Win Back

Programa de fidelidadeClube 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 GenerationVenda Direta

Up – gradeCross 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

Page 34: Digital1_Aula01

Site

O que é Digital?

Digital 1:Conceitos Básicos

Page 35: Digital1_Aula01

• “BeoLounge” mostra produtos e a tecnologia da marca

• Passeio pela casa com um representante virtual

• Personalize seu próprio BeoLounge e dividia a experiência

Fonte: The Digital IQ Index, September 2009

Bang & Olufsen

Page 36: Digital1_Aula01

• Construa o carro dos seus sonhos

• Explora novas tecnologias

• Site “Verde” – páginas mudam para modo energético mais eficiente

• Imagens deslumbrantes

• Uso intensivo de redes sociais

Fonte: The Digital IQ Index, September 2009

BMW

Page 37: Digital1_Aula01

• Possibilidade de customizar a icônica t-shirt polo e outras roupas

• Diferentes estilos e cores

• Personalizar texturas e monogramas

Fonte: The Digital IQ Index, September 2009

Ralph Lauren

Page 38: Digital1_Aula01

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

Louis Vuitton

Page 39: Digital1_Aula01

• Campanha mais recente celebrou o 40o. Aniversário da chegada do homem à Lua

• 15% das vendas online vão para a ONG “The Climate Project” de Al Gore

Fonte: The Digital IQ Index, September 2009

Louis Vuitton

louisvuittonjourneys.com

Page 40: Digital1_Aula01

CHANEL PARIS-SHANGHAI

• Abertura da nova loja em Xangai, Novembro de 2009

• China > Mercado chave para indústria da moda de luxo

• Nova coleção by Karl Lagerfeld em 3 de Dezembro de 2009

• Série de curtas dirigidos por Karl Lagerfeld que mostram o processo criativo desta nova coleção

Chanel

Page 41: Digital1_Aula01

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

Page 42: Digital1_Aula01

Estée Lauder’s makeover widget

• Suba sua foto e teste virtualmente cada um dos produtos • Aplicativo compatível com mais de 20 redes sociais diferentes.• Funciona no desktop.

Fonte: The Digital IQ Index, September 2009

Estée Lauder

Page 43: Digital1_Aula01

• Consultora – ajuda a escolher os produtos adequados ao tipo de pele

• Permite comentários dos usuários em sua página de produtos

• 24/7 customer service no site através de e-chat and maintains

• Facebook - brindes virtuais, vídeo, enquetes e blogs

Fonte: The Digital IQ Index, September 2009

Clinique

Page 44: Digital1_Aula01

Starwood’s W Hotels encabeça o ranking de Digital IQ para hotéis:

• Uso intensivo de video tours

• Redes Sociais: Concursos no Facebook em parceiro com a HBO

• Serviços: “SMS—Who’s Got Text” Aplicativo notifica quando chega alguma entrega ou mensagem para o hóspede

Fonte: The Digital IQ Index, September 2009

W Hotels

Page 45: Digital1_Aula01

Club MED

• Ação utilizando mídias sociais na Bélgica: Twitter, Flickr e blogueiros

• Blogueiros passam 1 semana no Club Med Chamonix, na França – deve produzir o conteúdo que quiser: Twitter, postar fotos no Flickr

• Banners nos principais blogs belgas, trazendo os posts e fotos em Real time

Page 46: Digital1_Aula01

“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

Page 47: Digital1_Aula01

• Plataforma elegante de e-commerce

• Busca de produtos visual

• Boa funcionalidade de busca de presentes

• Uso de vídeos emocionais

• Same-day call back

• SEO é bem feito

• Redes Sociais: Facebook

Fonte: The Digital IQ Index, September 2009

Ver Vídeo

Tiffany & Co.

Page 48: Digital1_Aula01

Plinio [email protected]

Page 49: Digital1_Aula01

Plinio [email protected]

Page 50: Digital1_Aula01

http://www.votorantim.com.br/

O que é Digital?

Digital 1:Conceitos Básicos

Page 51: Digital1_Aula01

Fonte: Jesse James Garrett

Etapas da construção de sites

O que é Digital?

Digital 1:Conceitos Básicos

Page 52: Digital1_Aula01

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

Page 53: Digital1_Aula01

Estrutura(Mapa do Site)

O que é Digital?

Digital 1:Conceitos Básicos

Page 54: Digital1_Aula01

Descrição da tela

Busca okEnglish version I Versión en Español I Webmail I Mapa do siteLogo 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ê

ResponsabilidadeSocial

InformaçõesFinaceiras

Gestão dePessoas - RH

Sala deImprensa

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 siteHeader – presente em todas as telas com BuscaMenu – presente em todas as telas com os nomes das seções de primeiro nível com “mouse-over” para ver as sub-seçõesMenu 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 administradorDestaques secundários – destaque com título, texto e link possíveis de alterar via sistema administradorNotí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

CimentosEnergia

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ítuloimagem do destaque

AI – Wireframes/DDF HOMEPAGE

O que é Digital?

Digital 1:Conceitos Básicos

Page 55: Digital1_Aula01

Descrição da tela

Busca okEnglish version I Versión en Español I Webmail I Mapa do siteLogo 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ê

ResponsabilidadeSocial

InformaçõesFinaceiras

Gestão dePessoas - RH

Sala deImprensa

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 administradorHierarquia 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 administradorTexto – Item obrigatório. Possível de alterar via sistema administrador com limite de tamanho de texto.Imagem – possível de alterar via sistema administradorLinks do rodapé (elementos obrigatórios)versão para impressão – possibilidade de imprimir o conteúdo desta telavoltar – voltar a tela de origem do usuáriotopo – â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

Page 56: Digital1_Aula01

Descrição da tela

Busca okEnglish version I Versión en Español I Webmail I Mapa do siteLogo 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ê

ResponsabilidadeSocial

InformaçõesFinaceiras

Gestão dePessoas - RH

Sala deImprensa

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 1Lorem 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 administradorHierarquia 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 administradorSub-título – Possível de alterar via sistema administradorBlocos 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 textoLinks do rodapé (elementos obrigatórios)versão para impressão – possibilidade de imprimir o conteúdo desta telavoltar – voltar a tela de origem do usuáriotopo – â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

Page 57: Digital1_Aula01

AI – Wireframes/DDF FORMULÁRIOS

Descrição da tela

Busca okEnglish version I Versión en Español I Webmail I Mapa do siteLogo 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ê

ResponsabilidadeSocial

InformaçõesFinaceiras

Gestão dePessoas - RH

Sala deImprensa

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 administradorHierarquia 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 administradorImagens – possível de alterar via sistema administrador. permite inserção de uma imagem com tamanho preestabelecido.Teremos um place holder de imagemLinks do rodapé (elementos obrigatórios)voltar – voltar a tela de origem do usuáriotopo – â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

Page 58: Digital1_Aula01

AI – Wireframes/DDF IMAGENS

Descrição da tela

Busca okEnglish version I Versión en Español I Webmail I Mapa do siteLogo 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ê

ResponsabilidadeSocial

InformaçõesFinaceiras

Gestão dePessoas - RH

Sala deImprensa

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 administradorHierarquia 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 administradorImagens – 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 telavoltar – voltar a tela de origem do usuáriotopo – â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

Page 59: Digital1_Aula01

Identidade Visual – Interface / LayoutHOMEPAGE

Page 60: Digital1_Aula01

Identidade Visual – Interface / LayoutINTERNA

Page 61: Digital1_Aula01

Plinio [email protected]

S T Q Q S S D S T Q Q S S D S T Q Q S S DD S T Q Q

O que é Digital?

Digital 1:Conceitos Básicos

Page 62: Digital1_Aula01

Nº Visitantes 149.000Nº de Cadastros Hotsite 33.515Taxa 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.017Tempo Médio no Site 13m06Wallpapers 4.443 downloadsMédia de páginas por visita 4 (12%) / 20+ (10%)

Métricas

O que é Digital?

Digital 1:Conceitos Básicos

Page 63: Digital1_Aula01

Nº Visitantes 149.000Nº de Cadastros Hotsite 33.515Taxa 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.017Tempo Médio no Site 13m06Wallpapers 4.443 downloadsMédia de páginas por visita 4 (12%) / 20+ (10%)

Métricas

O que é Digital?

Digital 1:Conceitos Básicos

Page 64: Digital1_Aula01

Fonte: Jesse James Garrett

Etapas da construção de sites

O que é Digital?

Digital 1:Conceitos Básicos

Page 65: Digital1_Aula01

Plinio [email protected]

O que é Digital?

Aula 1

Prof. Plinio Okamoto - 12 de Janeiro de 2010

O que é Digital?

Digital 1:Conceitos Básicos