O documento discute a terceira área do design web e inclui seções sobre web design, gerações da web, agências digitais e projetos digitais. Em três frases ou menos: O documento aborda conceitos-chave de web design, como a evolução histórica da web, características de gerações diferentes de usuários, o funcionamento de agências digitais e etapas típicas em projetos digitais.

1. A 3ª Área do Design
Web Design
Gustavo Zimmermann

2. Quem sou eu?
Gustavo Zimmermann???
Twitter: @gust4vo
LinkedIn: http://br.linkedin.com/in/gust4vo

3. path de navegação
1. webAlpha
2. webGerações
3. Uma Agência Digital
4. Um Projeto Digital
5. O Web Designer
6. Layout Web
7. Dúvidas e tomates

4. webAlpha
Como tudo começa?

5. webAlpha
• 1975: 100 sites na Arpanet;
• 1982: 315 sites na Internet;
• Hoje: mais de 174 milhões de sites, na Internet.
web design

6. webAlpha
Tim Berners-Lee
Inventor do HTML e diretor da W3C
07 de agosto de 1991:
1º site na Web, construído por
Tim Berners-Lee : http://bit.ly/z1N8L
web design

7. webAlpha
56% - Internet Explorer
22,75% - Mozilla Firefox
10,7% - Google Chrome
6,3% - Safari
2,28% - Opera
Via: Net Applications
http://bit.ly/cLNsfS
web design

8. webGerações

9. webGerações
1. Tradicionais (até 1945)
2. Baby-Boomers (1946 a 1964)
3. Geração X (1965 a 1977)
4. Geração Y (a partir de 1978)
web design

10. webGerações
• Nascidos antes de 1960
• Renda per capta baixa;
• Viviam sem a necessidade de
um computador;
• O computador não era visto
como futuro.
1ª Geração
web design

11. webGerações
• Nascidos antes de 2010
• Melhor renda per capta ;
• Não vivem sem o computador
(estudos + profissional);
• A utilização global do computador é o
futuro.
2ª Geração
web design

12. webGerações
• Nascidos antes de 2030
• Renda per capta indiferente;
• Não mais sobrevivem sem o
computador e a Internet;
• A Internet em constante evolução na
utilização do dia-a-dia.
3ª Geração
web design

13. webGerações
não Somos entendidos
quando...
web design

14. webGerações
...queremos estar com
quem amamos!
web design

15. webGerações
...falamos com
quem amamos!
web design

16. webGerações
...a nossa maior atenção é para
quem amamos!
web design

17. webGerações
...quando não queremos ficar longe de
quem amamos!
web design

18. web++
evolução do conteúdo na Web

19. web++
apresentação + informação = divulgação
1991
web 1.0
o ontem...
web design

20. web++
interação + intuição + feedback = colaboração
2004
web 2.0
o hoje...
web design

21. web++
receber + compreender + feedback = web semântica
2016???
web 3.0
o amanhã...
web design

22. Agência Digital
Como funciona?

23. Agência Digital
depto.
Criação
depto.
Cliente Comercial
depto.
Desenvolvimento
web design

24. Agência Digital
depto. Comercial
• Dir. Comercial
• Gerente de Projetos
• Consultor Comercial
• Conector
web design

25. Agência Digital
depto. Criação
• Dir. Criação
• UX Designer
• Montion Designer
• Web Designer
• Codificador
web design

26. Agência Digital
depto. Desenvolvimento
• Dir. Desenvolvimento
• Hoster
• TI
• Web Developer
• Flash Developer
• Programador
web design

27. o Projeto
Como lidar com projetos web?

28. o Projeto
depto. Comercial: o contrato
Vídeo: Designers vs. Clientes (http://youtu.be/CYu1cQs4Y5Y)
web design

29. o Projeto
depto. Comercial: o contrato
• Descrição do projeto, revisões e layout
• Pagamentos
• Direitos autorais e copyright
• Prazos
• Aprovação final
• Cancelamento de projeto
web design

30. o Projeto
depto. Comercial: o briefing
1. Projeto de web site novo ou redesenho de web site
antigo?
2. Quais são os objetivos da empresa com o web site?
3. Quais são as páginas (divisões) que a empresa irá precisar
que tenha no web site?
web design

31. o Projeto
depto. Comercial: o briefing
4. Você possui o acompanhamento de alguma agência ou
fotografo que possa lhe auxiliar na geração de imagens?
5. Você possui o acompanhamento de alguma agência ou
profissional na área de comunicação (RP/ Publicitário/
Jornalista) que possa lhe auxiliar na geração de
textos/conteúdo?
web design

32. o Projeto
depto. Comercial: o briefing
6. Quais sistemas você pensa serem necessários para uso no
site (ex.: cadastro de clientes, newsletter, e-commerce,
etc...)?
7. Você quer realizar a manutenção do web site de forma
autônoma (você gerenciando o conteúdo), ou gostaria de
manutenção mensal?
8. Você já possui domínio registrado e hospedagem para o
web site?
web design

33. o Projeto
depto. Comercial: o briefing
9. Você possui alguma data limite para a publicação do web
site?
10. Você pode listar abaixo alguns web sites que julgue
possuírem características desejadas para o web site da sua
empresa? Se possível comentar o que julga bom em cada
caso.
web design

34. o Projeto
depto. Comercial: o briefing
Vídeo: Placa de STOP (http://youtu.be/GjXXsUujpLI)
web design

35. Briefing pronto?
Reunir a galera!
Brainstorm já

36. o Projeto
Benchmarking
• Referências de Marca
• Referências de Negócio
• Referências de Layout
web design

37. o Projeto
Site Map (fluxograma)
Site Map:
uma representação
hierárquica da estrutura
de um site, composta
por páginas web.
web design

38. Agência Digital Cliente
Briefing
Cliente SIM
NÃO
Benchmarking Validou?
Site Map
depto.
Comercial
depto.
Criação
web design

39. o Projeto
Wireframe
Wireframe:
documento que rege a
hierarquização dos
elementos/conteúdos.
web design

40. 1/7 Wireframe: NationWide / NASCAR

41. 2/7 Wireframe: 5 Anos de Firefox

42. 3/7 Wireframe: Links

43. 4/7 Wireframe: GEOINT2009 (Microsite)

44. 5/7 Wireframe: Coastal Capital Partners

45. 6/7 Wireframe: Vimeo Página de Profile

46. 7/7 Wireframe: CommLogix Wireframe

47. o Projeto
depto. depto. depto.
Comercial Criação Desenvolvimento
1. Contrato 5. Wireframe 12. Des. de Sistemas
2. Briefing Validação (com Cliente) 13. Aplicação dos Sistemas
3. Benchmarking 6. Layout Estrutura 14. Testes
4. Site Map
Validação (com Cliente)
15. Validação HTML/CSS
Validação (com Cliente) 7. Layout Conteúdo Validação (com Cliente)
Validação (com Cliente) 16. Publicação
8. Codificação Estrutura
9. Codificação Conteúdo
10. Scripts, Animações
11. Validação HTML/CSS
Validação (com Cliente)
web design

48. o Projeto
Problemas de comunicação
durante o projeto
web design

50. o Projeto
Case: Super Iveco
web design

51. Agora Web Design
oO/o/

52. Web Design
Você pode ser um
Web Designer??
web design

53. Web Design
O que clientes esperam que
web designers saibam?
Vídeo: O desabafo de um Web Designer:
(http://youtu.be/m711mKI54iI)
web design

54. Web Design é o cara!

55. Web Design
O que clientes esperam que web designers saibam?
1. Programação em PHP
2. Ilustração
3. Criatividade
4. Design de logos
5. PSD limpo, código limpo
6. CSS 3
7. Javascript e Frameworks de Javascript
8. Desenvolvimento para aparelhos móveis
web design

56. Web Design
Mas o que o
Web Designer FAZZ afinal?
‘-.-
web design

57. Web Design
Design
Gráfico Produto
web design

58. Web Design
Design
Gráfico Digital Produto
web design

59. Web Design
A preocupação fundamental do web designer
é agregar os conceitos de usabilidade com o
planejamento da pessoa em destaque
interface, garantindo que o usuário final
atinja seus objetivos de forma agradável e
intuitiva.
web design

60. Web Design
conhecimentos
• UX Design/UCD/Ergonomia
• Arquitetura de Informação
• Usabilidade/Navegabilidade
• Acessibilidade Digital
• Linguagem de Marcação e Formatação
web design

61. Web Design
UX Design/UCD/Ergonomia + Arquitetura de Informação
• O que as pessoas vão procurar no site?
• Site um escorregador para o usuário!
• Prevendo a Expansão
web design

62. Web Design
Usabilidade/Navegabilidade
• Cross-browser
• 25 pontos do Dr. Peter Mayers
http://bit.ly/akmpT
web design

63. Web Design
Acessibilidade Digital
• Site verde e vermelho o
e se o usuário for daltônico?
• Área de leitura Vs. Sono
• Background
web design

64. Web Design
Acessibilidade Digital
Página de abertura?
1. Entrei aqui para encontrar algo;
2. Se acessei seu site, é por que eu quero entrar nele;
3. Quer me parar de tentar me vender algo antes de eu
poder acessar o site?;
4. Eu tenho pressa;
5. Gosto é que nem roupa – cada um tem seu estilo;
web design

65. Web Design
Acessibilidade Digital
Página de abertura?
6. Por que eu -preciso- escutar isso?;
7. Como que faço para pular isto?;
8. Pare de comer meu processador!;
9. Cadê o menu?;
10. A página inicial é a mais importante.
web design

66. Web Design
Todo o Super Herói
tem “arqui-inimigos”
web design

68. Web Design
Web Design Vs. Web Developer
web design

69. Web Design
Web Design Vs. Sobrinho
O Sobrinho
web design

70. Web Design
Layout de Sites produzidos por Web Designers
web design

71. Web Design
Layout de Site produzidos pelo Sobrinho
web design

72. Web Design
Layout de Blog produzidos por Web Designers
web design

73. Web Design
Layout de Blog produzido pelo Sobrinho
web design

74. Web Design
Layout para YouTube produzidos por Web Designers
web design

75. Web Design
Layout para YouTube produzido pelo Sobrinho
web design

76. Web Design 1.0
A Era dos Layouts Miguxos

77. Web Design 1.0
web design

78. Web Design 2.0
Layout mais legais :D

79. Web Design 2.0
• Menus de navegação claros
• Mais espaços em branco
• Blocos de introdução
• Blocos de mídia
• Carrosséis
• Layout multi-colunas
• Janelas modelos (lightbox)
• Ilustrações
web design

80. Web Design 2.0
Menus de navegação claros
web design

81. Web Design 2.0
Menus de navegação claros
web design

82. Web Design 2.0
Mais espaçamentos em branco
Pouco Espaçamento
Bom Espaçamento
web design

83. Web Design 2.0
Bloco de introdução
web design

84. Web Design 2.0
Bloco de introdução
web design

85. Web Design 2.0
Bloco de Mídia
web design

86. Web Design 2.0
Carrosséis
web design

87. Web Design 2.0
Layout multi-colunas
web design

88. Web Design 2.0
Layout multi-colunas
web design

89. Web Design 2.0
Janelas Modelo
web design

90. Web Design 2.0
Ilustrações
web design

91. Web Design 2.0
Evolução de um Web Designer
1. Sobrinho
Tabela Telmo Junior
http://twitpic.com/nao8p
web design

92. Web Design 2.0
Evolução de um Web Designer
2. CTRL + C
web design

93. Web Design 2.0
Evolução de um Web Designer
3. CTRL + C e
Modifica
web design

94. Web Design 2.0
Evolução de um Web Designer
4. Insight
web design

95. Web Design 2.0
Evolução de um Web Designer
5. Quee Massa
http://www.janploch.de
web design

96. Layout Web
Partindo do 3º nível

97. Layout Web
• Inspiração (massageie a Criatividade)
• Trabalhe usando um Grid
• Entenda a estrutura básica de um site
• A Página Inicial é uma página totalmente diferente das demais
web design

98. Layout Web
Inspiração
1. The FWA: http://thefwa.com/
2. The CSS Awards: http://www.thecssawards.com/
3. Creattica: http://creattica.com/
4. ThemeForest: http://themeforest.net/
5. Template Monster: http://www.templatemonster.com/
6. CSS Mania: http://cssmania.com/
7. CSSelite.com: http://www.csselite.com/
8. HTML5 Gallery: http://html5gallery.com/
9. Smashing Magazine: http://www.smashingmagazine.com/
10. Onextrapixel: http://www.onextrapixel.com/
web design

99. Layout Web
Trabalhe usando Grid
web design

100. Layout Web
Estrutura de um site
• Topo
• Área de Conteúdo
• Área de apoio (sidebar)
• Rodapé
web design

101. Layout Web
Estrutura de um site
Topo
web design

102. Layout Web
Estrutura de um site
Topo
web design

103. Layout Web
Estrutura de um site
Conteúdo
web design

104. Layout Web
Estrutura de um site
Área de apoio
web design

105. Layout Web
Estrutura de um site
Rodapé
web design

106. Ùltimas coisas
• Certificações Vs. Experiências
• Meu foco é:
O que eu gosto? NÃO!
O que o Cliente gosta? NÃO!
O que gera Resultado? SIM!
web design

107. Perguntas
Gustavo Zimmermann
E-mail: gustavozimer@gmail.com
Twitter: @gust4vo
LinkedIn: http://br.linkedin.com/in/gust4vo
web design