Web Designer - O Arquiteto da Informação

3,393 views

Published on

Palestra na 15ª Semana Design (UNIFRA)

Published in: Design
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,393
On SlideShare
0
From Embeds
0
Number of Embeds
2,162
Actions
Shares
0
Downloads
46
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Web Designer - O Arquiteto da Informação

  1. 1. Web Designer O Arquiteto da Informação Digital by Gustavo Zimmermann
  2. 2. Quem???
  3. 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. 4. ? O que é Web Design?
  5. 5. O QUE NÓS FAZEMOS? Pergunte ao colega do lado
  6. 6. ??? Responda
  7. 7. 1 “Design é o resultado da produção humana pensada e analisada de maneira eficiente” Fernando Rosseto
  8. 8. 2 “Design é transformar necessidades reais do ser humano em soluções de fácil entendimento.” Fernando Rosseto
  9. 9. ? O que é Web Design?
  10. 10. Calma, calma, não criemos pânico!
  11. 11. Tim Bernes-Lee •Criador da WWW •Inventor do HTML 1º site da Web http://bit.ly/z1N8L
  12. 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. 13. informação GERAÇÕES Tradicionais até 1945
  14. 14. informação GERAÇÕES Baby-Boomers 1946 a 1964
  15. 15. informação GERAÇÕES Geração X 1965 a 1977
  16. 16. informação GERAÇÕES Geração Y 1978 a 1990
  17. 17. informação GERAÇÕES Geração z 1991 a ???
  18. 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. 19. Brasil INDICADORES 53% dos internautas ativos são homens; IBOPE/Nielsen http://bit.ly/1806PHu
  20. 20. Brasil INDICADORES 47% dos internautas ativos são mulheres; IBOPE/Nielsen http://bit.ly/1806PHu
  21. 21. Brasil INDICADORES 25 IBOPE/Nielsen http://bit.ly/1806PHu 49 anos 51,1%
  22. 22. Brasil INDICADORES 12 IBOPE/Nielsen http://bit.ly/1806PHu 24 anos 22,1%
  23. 23. Viagens ANTIGAMENTE
  24. 24. Música ANTIGAMENTE
  25. 25. Celular ANTIGAMENTE
  26. 26. Hoje cabe NO BOLSO
  27. 27. LOUCOS POR INFORMAÇÃO
  28. 28. Web++ A EVOLUÇÃO DA INTERNET
  29. 29. Web 1.0 apresentação + informação = divulgação
  30. 30. Web 2.0 interação + + intuição feedback = colaboração
  31. 31. Web 3.0 analisar = + compreender + feedback web semântica
  32. 32. ? O que é Web Design?
  33. 33. “Design é transformar necessidades reais do ser humano em soluções de fácil entendimento.” Fernando Rosseto
  34. 34. INFORMAÇÃO
  35. 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. 36. EU POSSO SER UM Web Designer?
  37. 37. VOCÊ AMA O ?
  38. 38. VOCÊ TEM ?
  39. 39. VOCÊ ACHA atraentes?
  40. 40. ESTÁ DISPOSTO A ?
  41. 41. VOCÊ TEM UM ?
  42. 42. BLZA! Agora vamos entender algumas coisas...
  43. 43. Design vs. Gráfico
  44. 44. 10 DICAS DE COMO estragar UM SITE:
  45. 45. Use IMAGENS 1 AO INVÉS de CSS
  46. 46. 2 Esconda SEU E-MAIL
  47. 47. 2
  48. 48. 3 PLAGEIE
  49. 49. 4 Não CANTE
  50. 50. Misture 5 ANUNCIOS
  51. 51. Use 6 INTRODUÇÃO
  52. 52. Tenha 7 MÚSICA TOCANDO no site
  53. 53. Reinvente 8 A NAVEGAÇÃO
  54. 54. 9 USE muitos POP-UPs
  55. 55. Use 10 HOSPEDAGEM gratuita
  56. 56. O QUE PRECISO Saber?
  57. 57. O QUE PRECISO Saber? • • • • • • UX Design Layout Web standards Design Responsivo Cross-browser DHTML
  58. 58. O QUE PRECISO Saber? User Interface
  59. 59. O QUE PRECISO Saber? • • • • • UX Design Freedback Implementação Interface proativa Intuição Eficiência
  60. 60. 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
  61. 61. O QUE PRECISO Saber? Dan Staffer http://bit.ly/14sx5FA UX Design
  62. 62. O QUE PRECISO Saber? Layout
  63. 63. O QUE PRECISO Saber? Web standards
  64. 64. O QUE PRECISO Saber? Design Responsivo 2010
  65. 65. O QUE PRECISO Saber? Cross-browser *Vídeo: Guerra dos Navegadores: http://youtu.be/DeEafmwRk6A
  66. 66. no mundo NAVEGADORES set/2013 40,8% 8,52% 28,56% 1,16% 18,36% Dados da StatCounter: http://bit.ly/1co0Vn0
  67. 67. no Brasil NAVEGADORES set/2013 64,45% 2,15% 16,8% 0,6% 13,95% Dados da StatCounter: http://bit.ly/1aDzl1w
  68. 68. O QUE PRECISO Saber? DHTML
  69. 69. Tendências no momento 01. Skeuomorphism
  70. 70. Tendências no momento 02. Flat Design (Design Plano)
  71. 71. Tendências no momento Skeuomorphism vs. Flat Design
  72. 72. 03. Uso de cores e ícones simples
  73. 73. 04. Tudo grande e muito espaço em branco
  74. 74. 05. Layout dinâmico em grade
  75. 75. 06. Grandes fotos como fundo
  76. 76. 07. Desenhar com Fontes
  77. 77. 2014 tendências Flat Design
  78. 78. 2014 tendências Tipografias estilizadas
  79. 79. 2014 tendências Sites Aplicativos
  80. 80. 2014 tendências Design Responsivo
  81. 81. 2014 tendências Low Poly
  82. 82. TODO O super-herói TEM INIMIGOS
  83. 83. UMA LUTA LENDÁRIA
  84. 84. O SOBRINHO
  85. 85. Finalizando • • • • alinhamento imagem cor tipografia
  86. 86. • alinhamento
  87. 87. • imagem
  88. 88. • cor
  89. 89. • tipografia
  90. 90. 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/
  91. 91. 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/
  92. 92. 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/
  93. 93. </fim> Gustavo Zimmermann site: gust4vo.com

×