O documento discute como profissionais criam sites na era da Web 2.0, abordando tópicos como planejamento, arquitetura de informação, desenvolvimento e otimização para mecanismos de busca.

1.
Criação
de
Sites
na
era
da
Web
2.0
Saiba
como
os
profissionais
trabalham
nas
agências
digitais

2. Diego Brito
Publicitário, Empresário, Palestrante, Escritor e Blogueiro.
Formado pela Belas Artes de São Paulo, possui 11 anos de experiência com Internet, mídia
impressa e editoração. Já atuou como diretor de arte, diagramador diretor de criação, gestor de
comunicação integrada de marketing e desenvolvedor.
Proprietário da D2B Comunicação, agência de Marketing Digital com 3 anos de vida.
Autor do livro Criação de Sites na era da Web 2.0 pela Editora Brasport
Blogueiro (www.diegobrito.com.br/blog) e colaborador do site ProfissionaisTI
Sobre mim

3. Atendimento
Planejamento
Arquitetura de Informação
Criação
Redação
Desenvolvimento
Otimização (SEO)
Agenda

4. O que é Web 2.0?
Uma nova versão da Internet? Uma tendência de layout?
Atualização de so ware? Uma modinha passageira?
Atualização de hardware? As comunidades e redes sociais?
Introdução

5. O que é Web 2.0?
“A Web 2.0 não é uma atualização de so ware ou
hardware, não é nenhuma tecnologia por si só, não
representa nenhum avanço tecnológico de forma
separada. A Web 2.0 é um conceito!”
Introdução

6. Atendimento

7. Como lidar com as expectativas do cliente 7
Primeiramente precisamos entender que compreender as expectativas
do cliente é algo que vai além de redigir um briefing, é algo que deve
estar no âmago de todo profissional de comunicação, é a sensibilidade
que distingue o ato de “fabricar sites” da sinergia necessária para criar
soluções que agreguem valor.
Como já dizia o escritor José Saramago, não basta ver, é preciso
enxergar. Sendo assim, é necessário entender primeiramente os
motivos e desejos do cliente, sejam quais forem.

8. Tipos de Cliente 8

9. Tipos de Cliente: Maratonista 9
Esse é um dos melhores clientes, pois o projeto não fica parado e as
respostas são sempre no estilo “toma lá, dá cá”.
Pontos positivos: o projeto seguirá o cronograma provavelmente sem
atrasos e não haverá desgaste entre as partes envolvidas.
Pontos negativos: por conta de sua agilidade, ele acaba tendendo a
ser menos reflexivo em suas decisões e certamente haverão ajustes a
serem feitos depois que o trabalho estiver pronto.
Expectativa: possuir um site rapidamente, mesmo que não seja uma
versão completa.

10. Tipos de Cliente: Cartesiano 10
Possui a necessidade de obter resultados tangíveis e mensuráveis.
Sua estratégia com o novo site é aumentar o seu lucro. Esse tipo de
cliente é muito difícil de ser persuadido por ideias conceituais,
portanto o ideal é utilizar a estratégia de evidenciar o ROI.
Pontos positivos: sabe o que quer e confia em você para cuidar do
projeto dele.
Pontos negativos: racionaliza demais a comunicação e não
consegue perceber fatores como ganho de marca, imagem e
posicionamento.
Expectativa: obtenção de lucro através do novo site.

11. Tipos de Cliente: Enrolado 11
Esse cliente é complicado de ser atendido. Os clientes enrolados são
aqueles que falam bastante, solicitam reuniões e explicações, você
despende tempo e dedicação, mas, no final das contas, o serviço que
é bom, nada.
Pontos positivos: você irá apenas ganhar experiência.
Pontos negativos: é um tipo de cliente que somente lhe fará perder
tempo e no final das contas o valor recebido, na maioria das vezes
não compensará o desgaste.
Expectativa: ele não sabe, hehe.

12. Tipos de Cliente: Enrolado 12

13. Briefing 13
1) Resumo sobre a empresa.
2) Breve histórico.
3) Qual é o público-alvo da empresa?
4) Como a empresa se posiciona no mercado?
5) Qual é o principal produto/serviço da empresa?
6) Qual é a relação da empresa com a Internet?
7) Motivo de criação do novo site?
8) Retorno esperado?
9) O cliente já possui o conteúdo para incluir no site?
10) Qual é a expectativa de conclusão do projeto?
11) Quais são os sites dos principais concorrentes?
12) De quais sites a empresa mais gosta?

14. Cronograma 14

15. Planejamento

16. Brainstorming 16

17. Análises Prognósticas 17
1) Empresa 8) Processo de negócio
2) Produto ou serviço 9) Reflexão
3) Mercado 10) Matriz BCG
4) Distribuição 11) Concorrência
5) Preço 12) Referências
6) Público-alvo 13) Análise SWOT
7) Customer Goals 14) Análise de cenário

18. Estratégia do Projeto 18
1) Como deverá ser o conteúdo?
2) Como deverá ser o layout?
3) Qual deverá ser a tecnologia sugerida?

19. Arquitetura de Informação

20. Usabilidade 20

21. Usabilidade 21

22. Usabilidade 22

23. Usabilidade 23

24. Usabilidade 24

25. Usabilidade 25

26. Fluxo de Navegação 26
Home !"#$%&'()*+,
Sobre a Empresa Promoções Pacotes Trilhas Ecológicas Contato
Texto e foto Texto e foto Texto e foto Formulário de contato
Cruzeiros
Texto e foto
Pacotes Nacionais
Texto e foto
Pacotes Internacionais
Texto e foto
• Seja “pão duro” (no bom sentido)
• Pense de forma lógica
• Crie pequenas “ondas”
• Nem tudo é página
• Seja organizado, mas nem tanto

27. Wireframe 27
Fonte: gentilmente cedido por ‘Peldi’ Guilizzoni, fundador e CEO da Balsamiq Studios.

28. Wireframe 28
Fonte: gentilmente cedido por ‘Peldi’ Guilizzoni, fundador e CEO da Balsamiq Studios.

29. Wireframe 29

30. Redação

31. Técnica da pirâmide invertida adaptada para a criação de sites 31

32. Técnica da pirâmide invertida adaptada para a criação de sites 32
1) Oferecemos gratuitamente no pacote de viagem
familiar os custos de até uma criança (até 12 anos).
2) Para os pacotes de viagem familiares é necessário
fechar conosco com no mínimo três meses de
antecedência.
3) Orientamos a todos que por precaução, compareçam
no dia e local de embarque com os seguintes itens: RG,
CPF e comprovante de pagamento da primeira parcela
do pacote.

33. Técnica da pirâmide invertida adaptada para a criação de sites 33
4) O senhor é meu pastor e nada me faltará.
5) A cidade de São Paulo é considerada a capital da
pizza, pois possui diversas pizzarias com cardápios
elogiados internacionalmente além de uma enorme
variedade de sabores.
6) Possuímos sede própria.
7) A Espanha vence a copa do mundo.

34. Criação

35. Controle de variáveis na criação: contraste 35

36. Controle de variáveis na criação: cores 36

37. Controle de variáveis na criação: margens 37

38. Controle de variáveis na criação: margens 38

39. Controle de variáveis na criação: margens 39
Legenda: a primeira página do jornal norueguês Bergens Tidente do dia 30 de janeiro de 1870.

40. Controle de variáveis na criação: alinhamentos 40

41. Controle de variáveis na criação: alinhamentos 41

42. Controle de variáveis na criação: proporção áurea 42

43. Controle de variáveis na criação: proporção áurea 43

44. Controle de variáveis na criação: proporção áurea (adaptada para sites) 44

45. Controle de variáveis na criação: proporção áurea (adaptada para sites) 45

46. Conceito criativo 46
A lição mais importante para guardar é que, independentemente do
conceito que você deseja seguir, é importante ter unidade, concisão e
coerência, pois, do contrário, o conjunto da obra pode parecer sem
sentido para o usuário.
Dicas:
• Resuma o conceito em apenas uma palavra.
• Mantenha uma unidade visual entre os elementos do site.
• Utilize a repetição de alguns elementos em todas as páginas.

47. Desenvolvimento

48. Comparativo Designer vs Desenvolvedor 48

49. Comparativo Designer vs Desenvolvedor 49

50. Desenvolvimento é como magia 50
Arquitetura Criação
Desenvolvimento
Site entregue

51. Sites estáticos e dinâmicos 51

52. Sistemas colaborativos 52

53. Diferença entre desenvolver para front-end e back-end 53

54. Qual tecnologia escolher? 54

55. Otimização (SEO)

56. Busca do Google 56

57. SEO on-page (dentro da página) e o -page (fora da página) 57
On-Page: O -Page:
• Títulos relevantes nas páginas • Links externos (backlinks)
• Meta tags adequadas • Qualidade dos links externos
• Colocar “alt” nas imagens • Texto âncora dos links externos
• Código Semântico • Criação de sitemap
• Domínio e URLs contextuais • Cadastro em diretórios
• Conteúdo textual de qualidade • Presença digital

58. Tipos de estratégia: black hat, gray hat e white hat 58

59. Perguntas

60. Diego Brito
E-mail: contato@diegobrito.com.br
Blog pessoal: www.diegobrito.com.br
Twitter: @diegodebrito
Empresa: D2B Comunicação (www.d2b.com.br)
Criação de Sites na era da Web 2.0
• Fan Page: www.facebook.com/criacaodesitesweb20
• Editora: Brasport
• Ano: 2011
• Número de páginas: 222
• ISBN: 978-85-7452-466-5
• Pontos de venda online: Submarino, Saraiva, Fnac,
Siciliano, Editora Brasport, Martins Fontes, etc.
Obrigado!