A 3ª Área do Design: Web Design

4,774 views

Published on

Palestra ministrada na 12ª Semana Acadêmica do curso de Design da Unijuí

Published in: Design

A 3ª Área do Design: Web Design

  1. 1. A 3ª Área do Design Web Design Gustavo Zimmermann
  2. 2. Quem sou eu? Gustavo Zimmermann???Twitter: @gust4voLinkedIn: http://br.linkedin.com/in/gust4vo
  3. 3. path de navegação1. webAlpha2. webGerações3. Uma Agência Digital4. Um Projeto Digital5. O Web Designer6. Layout Web7. Dúvidas e tomates
  4. 4. webAlpha Como tudo começa?
  5. 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. 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. 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. 8. webGerações
  9. 9. webGerações1. 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. 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. 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. 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. 13. webGeraçõesnão Somos entendidosquando... web design
  14. 14. webGerações ...queremos estar com quem amamos! web design
  15. 15. webGerações ...falamos com quem amamos! web design
  16. 16. webGerações ...a nossa maior atenção é para quem amamos! web design
  17. 17. webGerações ...quando não queremos ficar longe de quem amamos! web design
  18. 18. web++ evolução do conteúdo na Web
  19. 19. web++apresentação + informação = divulgação 1991web 1.0 o ontem... web design
  20. 20. web++interação + intuição + feedback = colaboração 2004 web 2.0 o hoje... web design
  21. 21. web++receber + compreender + feedback = web semântica 2016??? web 3.0 o amanhã... web design
  22. 22. Agência Digital Como funciona?
  23. 23. Agência Digital depto. Criação depto. Cliente Comercial depto. Desenvolvimento web design
  24. 24. Agência Digital depto. Comercial• Dir. Comercial• Gerente de Projetos• Consultor Comercial• Conector web design
  25. 25. Agência Digital depto. Criação• Dir. Criação• UX Designer• Montion Designer• Web Designer• Codificador web design
  26. 26. Agência Digital depto. Desenvolvimento• Dir. Desenvolvimento• Hoster• TI• Web Developer• Flash Developer• Programador web design
  27. 27. o Projeto Como lidar com projetos web?
  28. 28. o Projetodepto. Comercial: o contratoVídeo: Designers vs. Clientes (http://youtu.be/CYu1cQs4Y5Y) web design
  29. 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. 30. o Projeto depto. Comercial: o briefing1. 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. 31. o Projeto depto. Comercial: o briefing4. 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. 32. o Projeto depto. Comercial: o briefing6. 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. 33. o Projeto depto. Comercial: o briefing9. 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. 34. o Projetodepto. Comercial: o briefingVídeo: Placa de STOP (http://youtu.be/GjXXsUujpLI) web design
  35. 35. Briefing pronto? Reunir a galera! Brainstorm já
  36. 36. o ProjetoBenchmarking• Referências de Marca• Referências de Negócio• Referências de Layout web design
  37. 37. o ProjetoSite Map (fluxograma) Site Map: uma representação hierárquica da estrutura de um site, composta por páginas web. web design
  38. 38. Agência Digital Cliente Briefing Cliente SIM NÃO Benchmarking Validou? Site Map depto.Comercial depto. Criação web design
  39. 39. o ProjetoWireframeWireframe:documento que rege ahierarquização doselementos/conteúdos. web design
  40. 40. 1/7 Wireframe: NationWide / NASCAR
  41. 41. 2/7 Wireframe: 5 Anos de Firefox
  42. 42. 3/7 Wireframe: Links
  43. 43. 4/7 Wireframe: GEOINT2009 (Microsite)
  44. 44. 5/7 Wireframe: Coastal Capital Partners
  45. 45. 6/7 Wireframe: Vimeo Página de Profile
  46. 46. 7/7 Wireframe: CommLogix Wireframe
  47. 47. o Projeto depto. depto. depto. Comercial Criação Desenvolvimento1. Contrato 5. Wireframe 12. Des. de Sistemas2. Briefing Validação (com Cliente) 13. Aplicação dos Sistemas3. Benchmarking 6. Layout Estrutura 14. Testes4. Site Map Validação (com Cliente) 15. Validação HTML/CSSValidaçã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. 48. o ProjetoProblemas de comunicaçãodurante o projeto web design
  49. 49. o ProjetoCase: Super Iveco web design
  50. 50. Agora Web Design oO/o/
  51. 51. Web DesignVocê pode ser umWeb Designer?? web design
  52. 52. Web DesignO que clientes esperam queweb designers saibam?Vídeo: O desabafo de um Web Designer:(http://youtu.be/m711mKI54iI) web design
  53. 53. Web Design é o cara!
  54. 54. Web DesignO 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
  55. 55. Web DesignMas o que oWeb Designer FAZZ afinal?‘-.- web design
  56. 56. Web Design Design Gráfico Produto web design
  57. 57. Web Design Design Gráfico Digital Produto web design
  58. 58. 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
  59. 59. Web Design conhecimentos• UX Design/UCD/Ergonomia• Arquitetura de Informação• Usabilidade/Navegabilidade• Acessibilidade Digital• Linguagem de Marcação e Formatação web design
  60. 60. Web DesignUX 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
  61. 61. Web DesignUsabilidade/Navegabilidade• Cross-browser• 25 pontos do Dr. Peter Mayers http://bit.ly/akmpT web design
  62. 62. Web DesignAcessibilidade Digital• Site verde e vermelho o e se o usuário for daltônico?• Área de leitura Vs. Sono• Background web design
  63. 63. Web DesignAcessibilidade 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
  64. 64. Web DesignAcessibilidade 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
  65. 65. Web DesignTodo o Super Heróitem “arqui-inimigos” web design
  66. 66. Web DesignWeb Design Vs. Web Developer web design
  67. 67. Web DesignWeb Design Vs. Sobrinho O Sobrinho web design
  68. 68. Web DesignLayout de Sites produzidos por Web Designers web design
  69. 69. Web DesignLayout de Site produzidos pelo Sobrinho web design
  70. 70. Web DesignLayout de Blog produzidos por Web Designers web design
  71. 71. Web DesignLayout de Blog produzido pelo Sobrinho web design
  72. 72. Web DesignLayout para YouTube produzidos por Web Designers web design
  73. 73. Web DesignLayout para YouTube produzido pelo Sobrinho web design
  74. 74. Web Design 1.0 A Era dos Layouts Miguxos
  75. 75. Web Design 1.0 web design
  76. 76. Web Design 2.0 Layout mais legais :D
  77. 77. 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
  78. 78. Web Design 2.0Menus de navegação claros web design
  79. 79. Web Design 2.0Menus de navegação claros web design
  80. 80. Web Design 2.0Mais espaçamentos em branco Pouco Espaçamento Bom Espaçamento web design
  81. 81. Web Design 2.0Bloco de introdução web design
  82. 82. Web Design 2.0Bloco de introdução web design
  83. 83. Web Design 2.0Bloco de Mídia web design
  84. 84. Web Design 2.0Carrosséis web design
  85. 85. Web Design 2.0Layout multi-colunas web design
  86. 86. Web Design 2.0Layout multi-colunas web design
  87. 87. Web Design 2.0Janelas Modelo web design
  88. 88. Web Design 2.0Ilustrações web design
  89. 89. Web Design 2.0Evolução de um Web Designer1. Sobrinho Tabela Telmo Junior http://twitpic.com/nao8p web design
  90. 90. Web Design 2.0Evolução de um Web Designer2. CTRL + C web design
  91. 91. Web Design 2.0Evolução de um Web Designer 3. CTRL + C e Modifica web design
  92. 92. Web Design 2.0Evolução de um Web Designer4. Insight web design
  93. 93. Web Design 2.0Evolução de um Web Designer5. Quee Massahttp://www.janploch.de web design
  94. 94. Layout Web Partindo do 3º nível
  95. 95. 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
  96. 96. Layout WebInspiração1. 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
  97. 97. Layout WebTrabalhe usando Grid web design
  98. 98. Layout WebEstrutura de um site• Topo• Área de Conteúdo• Área de apoio (sidebar)• Rodapé web design
  99. 99. Layout WebEstrutura de um site Topo web design
  100. 100. Layout WebEstrutura de um site Topo web design
  101. 101. Layout WebEstrutura de um site Conteúdo web design
  102. 102. Layout WebEstrutura de um site Área de apoio web design
  103. 103. Layout WebEstrutura de um siteRodapé web design
  104. 104. Ù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
  105. 105. Perguntas Gustavo Zimmermann E-mail: gustavozimer@gmail.com Twitter: @gust4vo LinkedIn: http://br.linkedin.com/in/gust4vo web design

×