O documento discute o papel do designer de web, incluindo as habilidades necessárias e as tendências atuais na área. Resume as principais gerações da internet e como o design de web evoluiu ao longo do tempo para se adaptar às novas tecnologias e comportamentos dos usuários. Também fornece dicas sobre como projetar sites de forma responsiva e para múltiplos navegadores.

1. Web Designer
O Arquiteto da Informação Digital
by Gustavo Zimmermann

2. Quem???

3. O que
VEREMOS?
1.
Design: conceito
2.
Gerações na Internet
3.
Web Gerações
4.
Informação
5.
Web Design
6.
Como estragar um site
7.
Posso ser um Web Designer? O que preciso saber?
8.
Tendências
9.
Finalização

4. ?
O que é Web Design?

5. O QUE NÓS
FAZEMOS?
Pergunte ao colega do lado

6. ???
Responda

7. 1
“Design é o resultado da produção
humana pensada e analisada de
maneira eficiente”
Fernando Rosseto

8. 2
“Design é transformar necessidades
reais do ser humano em soluções de
fácil entendimento.”
Fernando Rosseto

9. ?
O que é Web Design?

10. Calma, calma, não
criemos pânico!

11. Tim
Bernes-Lee
•Criador da WWW
•Inventor do HTML
1º site da Web
http://bit.ly/z1N8L

12. 2012
634 milhões de sites
2009
175 milhões de sites
1982
315 sites na Internet
*Vídeo: A História da Internet:
http://youtu.be/yyY_392Tn7Q
1975
100 sites na Arpanet

13. informação
GERAÇÕES
Tradicionais
até 1945

14. informação
GERAÇÕES
Baby-Boomers
1946 a 1964

15. informação
GERAÇÕES
Geração X
1965 a 1977

16. informação
GERAÇÕES
Geração Y
1978 a 1990

17. informação
GERAÇÕES
Geração z
1991 a ???

18. informação
GERAÇÕES
2012
634 milhões de sites
2009
175 milhões de sites
1982
315 sites na Internet
1975
100 sites na Arpanet

19. Brasil
INDICADORES
53% dos
internautas ativos
são homens;
IBOPE/Nielsen
http://bit.ly/1806PHu

20. Brasil
INDICADORES
47% dos
internautas ativos
são mulheres;
IBOPE/Nielsen
http://bit.ly/1806PHu

21. Brasil
INDICADORES
25
IBOPE/Nielsen
http://bit.ly/1806PHu
49
anos
51,1%

22. Brasil
INDICADORES
12
IBOPE/Nielsen
http://bit.ly/1806PHu
24
anos
22,1%

23. Viagens
ANTIGAMENTE

24. Música
ANTIGAMENTE

25. Celular
ANTIGAMENTE

26. Hoje cabe
NO BOLSO

27. LOUCOS POR
INFORMAÇÃO

28. Web++
A EVOLUÇÃO DA INTERNET

29. Web 1.0
apresentação
+
informação
=
divulgação

30. Web 2.0
interação
+ +
intuição
feedback
=
colaboração

31. Web 3.0
analisar
=
+
compreender
+
feedback
web semântica

32. ?
O que é Web Design?

33. “Design é transformar necessidades
reais do ser humano em soluções de
fácil entendimento.”
Fernando Rosseto

34. INFORMAÇÃO

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

36. EU POSSO
SER UM
Web Designer?

37. VOCÊ AMA O
?

38. VOCÊ TEM
?

39. VOCÊ ACHA
atraentes?

40. ESTÁ DISPOSTO A
?

41. VOCÊ TEM UM
?

42. BLZA!
Agora vamos
entender algumas
coisas...

44. Design
vs. Gráfico

45. 10
DICAS DE COMO
estragar
UM SITE:

46. Use
IMAGENS
1
AO INVÉS
de CSS

47. 2
Esconda
SEU E-MAIL

48. 2

49. 3 PLAGEIE

50. 4
Não
CANTE

51. Misture
5
ANUNCIOS

52. Use
6 INTRODUÇÃO

53. Tenha
7
MÚSICA
TOCANDO
no site

54. Reinvente
8 A NAVEGAÇÃO

55. 9
USE
muitos
POP-UPs

56. Use
10 HOSPEDAGEM
gratuita

58. O QUE
PRECISO
Saber?

59. O QUE
PRECISO
Saber?
•
•
•
•
•
•
UX Design
Layout
Web standards
Design Responsivo
Cross-browser
DHTML

60. O QUE
PRECISO
Saber?
User Interface

61. O QUE
PRECISO
Saber?
•
•
•
•
•
UX Design
Freedback
Implementação
Interface proativa
Intuição
Eficiência

62. O QUE
PRECISO
Saber?
UX Design
“Design de experiência do usuário é a
criação e sincronização dos elementos
que afetam a experiência dos usuários
RUSS UNGER
com um produto. Com isso é possível
influenciar
suas
comportamentos.”
percepções
e

63. O QUE
PRECISO
Saber?
Dan Staffer
http://bit.ly/14sx5FA
UX Design

64. O QUE
PRECISO
Saber?
Layout

65. O QUE
PRECISO
Saber?
Web standards

66. O QUE
PRECISO
Saber?
Design Responsivo
2010

67. O QUE
PRECISO
Saber?
Cross-browser
*Vídeo: Guerra dos Navegadores:
http://youtu.be/DeEafmwRk6A

68. no mundo
NAVEGADORES
set/2013
40,8%
8,52%
28,56%
1,16%
18,36%
Dados da StatCounter:
http://bit.ly/1co0Vn0

69. no Brasil
NAVEGADORES
set/2013
64,45%
2,15%
16,8%
0,6%
13,95%
Dados da StatCounter:
http://bit.ly/1aDzl1w

70. O QUE
PRECISO
Saber?
DHTML

71. Tendências
no momento
01. Skeuomorphism

72. Tendências
no momento
02. Flat Design (Design Plano)

73. Tendências
no momento
Skeuomorphism vs. Flat Design

74. 03. Uso de cores e ícones simples

75. 04. Tudo grande e muito espaço em branco

76. 05. Layout dinâmico em grade

77. 06. Grandes fotos como fundo

78. 07. Desenhar com Fontes

79. 2014
tendências
Flat Design

80. 2014
tendências
Tipografias estilizadas

81. 2014
tendências
Sites Aplicativos

82. 2014
tendências
Design
Responsivo

83. 2014
tendências
Low Poly

84. TODO O
super-herói
TEM INIMIGOS

86. UMA LUTA
LENDÁRIA

87. O
SOBRINHO

88. Finalizando
•
•
•
•
alinhamento
imagem
cor
tipografia

89. • alinhamento

90. • imagem

91. • cor

92. • tipografia

93. Referências
imagens e conhecimentos
1.
Blue Bus: http://www.bluebus.com.br/
2. Choco la Design: http://chocoladesign.com/
3.
Des1gn’ON: http://www.des1gnon.com/
4. Design.blog: http://design.blog.br/
5. Wix Blog: http://pt.wix.com/blog/

94. Ferramentas
vale a pena conferir :)
1.
Behance (portfolio online): http://www.behance.net/
2. Carbonmade (portfolio online): http://carbonmade.com/
3.
Codepen (DHTML online): http://codepen.io/pen/
4. Codrops (frameworks jQuery): http://tympanus.net/codrops/
5. Cross Browser Testing : http://crossbrowsertesting.com/

95. Inspirações
vale a pena conferir :)
1.
Creattica: http://creattica.com/
2. CSSelite.com: http://www.csselite.com/
3.
CSS Mania: http://cssmania.com/
4. HTML5 Gallery: http://html5gallery.com/
5. Onextrapixel: http://www.onextrapixel.com/
6. Smashing Magazine: http://www.smashingmagazine.com/
7. Template Monster: http://www.templatemonster.com/
8. The CSS Awards: http://www.thecssawards.com/
9. ThemeForest: http://themeforest.net/
10. The FWA: http://thefwa.com/

96. </fim>
Gustavo Zimmermann
site: gust4vo.com