Upload
jornalismo-digital
View
859
Download
0
Embed Size (px)
DESCRIPTION
Material de aula do dia 9 de maio, produzido pela profa. Marta Gleich.
Citation preview
PLANEJAMENTO DE PRODUTOS DIGITAIS
MARTA GLEICH8 de maio de 2010
Do briefing ao lançamentoHá diferenças dependendo da empresa, mas o processo é semelhanteAprender este processo pode ser útil para desenvolver qualquer projeto, inclusive os não digitais!
Processo de desenvolvimento
Processo de desenvolvimentoQuanto maior e mais complexo, mais importante é obedecer o processo
GRANDES
Portal
Site de jornal
MÉDIOS
Aplicativo iPhone
Site mobile
PEQUENOS
Funcionalidade MANUTENÇÃO
Correções
Melhorias
(Processo constante)
Processo de desenvolvimento
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
Equipe de que falamos ontem
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Cliente
• Própria equipe
• Briefing
• Atendimento
• Analista de negócio/produto – benchmarking/defi-nição do produo
• Gerente de projeto
• Arquiteto de informação/distri-buição das informações
• Designer
• Programador/có-digo e entrega das ferramentas e do produto
• Redator
• Editor
•Colocam o produto no ar
As etapas não são lineares, se desenrolam simultaneamente (métodos ágeis)
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento (todo o processo)
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
• Inserção, atualização e manutenção do conteúdo
Atendimento
Interface entre o cliente e a equipe de desenvolvimento
Comunicação do andamento do projeto e apresentação e aprovação dos documentos do processo
Recebimento e elaboração do briefing Negociação de alteração de prazo ou escopo
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
Definição de escopo
Enumeração do que o produto terá (e não terá) Quanto mais detalhado o escopo, menor a
margem para mal entendidos entre o planejado e o realizado
Tão importante quanto o escopo de um projeto é o não-escopo
Representa o “contrato” entre cliente e equipe de desenvolvimento
Definição de escopo
Enumeração do que o produto terá (e não terá) Quanto mais detalhado o escopo, menor a
margem para mal entendidos entre o planejado e o realizado
Tão importante quanto o escopo de um projeto é o não-escopo
Representa o “contrato” entre cliente e equipe de desenvolvimento
É o que será feito
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
Detalhamento
Define a lógica de navegação
Lista ferramentas a serem utilizadas
Define novas funcionalidades
Estabelece regras de negócio
Serve de documento de consulta até depois do encerramento do projeto
Detalhamento
Define a lógica de navegação
Lista ferramentas a serem utilizadas
Define novas funcionalidades
Estabelece regras de negócio
Serve de documento de consulta até depois do encerramento do projeto
É o “como” será feito
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
Horas/homem e a gravidez
Cálculo de quanto tempo demandará cada atividade considerando a equipe e o tempo que se tem à disposição
Leva em consideração diferentes cenários de desenvolvimento e deve ser apresentado para aprovação do cliente antes de se dar prosseguimento ao trabalho
Prevê quais atividades podem ser realizadas em paralelo e quais exigem trabalho isolado de apenas um profissional
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
Processo – Cronograma
Ajuda a organizar o trabalho das diferentes equipes
Permite enxergar o tempo real de desenvolvimento e a prever riscos e atrasos
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
Gerenciamento de projeto
Acompanha todas as atividades do projeto, do início ao fim
Faz o meio de campo entre as diferentes equipes envolvidas, negociando e providenciando a alocação dos profissionais
Mantém sempre atualizado o cronograma do projeto
Identifica quando é necessário propor eventuais alterações de escopo e de prazo
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
Executa os wireframes, que são a “planta baixa”, definindo como será a navegação do produto
Reflete todas as definições do documento de detalhamento
Orienta as atividades seguintes: de Design gráfico, Web Standards e TI
Pode ou não ser feito em paralelo com o trabalho de detalhamento
Etapa na qual são realizados testes de usabilidade Possibilita a identificação de inconsistências no
produto, evitando retrabalho no design gráfico
Arquitetura de informação
Wireframes
Arquitetura de informação
Wireframes
Wireframes
Wireframes
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
Design gráfico É a parte mais
esperada desde o começo do projeto
Acrescenta emoção e personalidade ao trabalho do arquiteto de informação
Demanda estudo cuidadoso da mensagem que se pretende passar visualmente
Design gráfico – Case BBC
Há dois anos, a BBC imprimiu todo seu site e colou na parede que passou a ser conhecida como “Wall of Shame” (parede da vergonha) e deu início ao projeto “Global Visual Language 2.0”, para unificar os designs de interação e gráfico de seus produtos digitais
Design gráfico – Case BBC
A equipe trabalhou para racionalizar as centenas de diferentes estilos existentes no portal da BBC num novo sistema visual e de navegação
Design gráfico – Case BBC
O estudo incluiu a escolha cuidadosa de todos os elementos dos novos produtos, como as fontes a serem usadas em todas as páginas
Design gráfico – Case BBC
Também foi elaborada uma paleta de cores completa, para dar unidade aos produtos
Design gráfico – Case BBC
Para finalizar, toda a iconografia foi refeita
Design gráfico – Case BBC
A lógica foi estendida inclusive para os sites mobile
Design gráfico – Case BBC
Este case está descrito em detalhes no post “A new global visual language for the BBC's digital services”, de fevereiro deste ano
Design gráfico
Exemplos BBC CNN El País iG Globo.com MSNBC The Guardian The New York Times
Atividades – metade do caminho!
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
• Inserção, atualização e manutenção do conteúdo
Web Standards
Traduz o trabalho de arquitetura de informação e de design gráfico para os navegadores
Segue padrão internacional
É o código que o Google lê para indexar as páginas
Atividades
Ideia/Pedido
Produto Arte TI Conteúdo
SEO | Web Analytics | Marketing | Planejamento Comercial | Opec
• Novo produto
• Melhoria de produto existente
• Necessidade técnica
• Oportunidade comercial
•Adequação a novas tecnologias
• Atendimento
• Definição de escopo
• Detalhamento
• Horas/homem
• Cronograma
• Gerenciamento do projeto
• Design de Interação/ Arquitetura de informação
• Design gráfico
• Inserção, atualização e manutenção do conteúdo
• Codificação/ Web Standards
• Programação/Ferramentas
• Server
• Desempenho
Programação
Integra o código do novo produto às ferramentas existentes
Cria novas ferramentas Adapta ferramentas de mercado à nossa realidade Organiza a infra-estrutura Zela pelo desempenho e disponibilidade dos sites
Programação
Códigos Constroem as
ferramentas
Softwares e sites de uso livre e código abertoUso de ferramentas de mercado, algumas gratuitas
Ferramentas
Ferramentas – podem inspirar o trabalho
• Blogs/Sites (CMS)– WordPress– Blogspot– Drupal
• Vídeos– YouTube– Qik– Vimeo
• Fotos– Flickr– Picasa
• Áudios– Gengibre
• Feeds– Google Reader
• Slideshows– Slideshare
• Busca– Google Custom Search
• Chats– CoverItlive
• Bookmarks– Delicious
• Redes sociais– Twitter– Facebook
• Comunidades– Ning– Google Friend Connect
• Controle de audiência– Google Analytics
• Monetização– Google Adsense
Parte 3
Atividade
Atividade
Revisar o briefing anterior com base no que foi visto hoje
Fazer benchmarking Detalhar escopo e não-escopo
Deve ser trazido pronto na próxima aula, quando será executado/finalizado o documento de definição do produto
Referências
Referências
Brainstorm 9 Creative Commons Designing and planning
webpages editorsweblog.org eHub Ferramentas digitais par
a jornalistas Google Labs Internet Legal
Jornalistas da Web Knight Center for
Journalism Mashable.com NCSA News University Online Journalism Blog Standards e Guidelines
da BBC Techcrunch Tiago Dória
Até a próxima aula...
7 de maio 8 de maio 22 de maio
Apresentação Processo de desenvolvimento Atividade prática (Conclusão)
Conceito Atividade prática (Parte 2)
Inovação
Equipe
Atividade prática (Parte 1)