Workshop Webinsider 2003

1,194 views

Published on

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

No Downloads
Views
Total views
1,194
On SlideShare
0
From Embeds
0
Number of Embeds
13
Actions
Shares
0
Downloads
31
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Workshop Webinsider 2003

  1. 1. workshops webinsider design para web michel lent schwartzman
  2. 2. Agenda do dia <ul><li>9:00h: Início do workshop </li></ul><ul><li>10:40h: Coffee-break (20 min) </li></ul><ul><li>12:40h: Almoço </li></ul><ul><li>14:00h: Reinício </li></ul><ul><li>16:40h: Coffee-break (20 min) </li></ul><ul><li>19:00h: Término </li></ul>
  3. 3. Pauta do workshop <ul><li>0. Apresentação de projetos </li></ul><ul><li>1. Criação, design, web, webdesign </li></ul><ul><li>1.1 Debate </li></ul><ul><li>2. Criação não: solução. O processo </li></ul><ul><li>de design voltado para o resultato </li></ul><ul><li>3. Mercado hoje e amanhã </li></ul><ul><li>3.1 Debate final </li></ul>
  4. 4. apresentação de credenciais histórico profissional e apresentação de portfolio
  5. 5. RIO 1988 1993 puc-rio, freelance
  6. 6. Banda Bel | Primeiro offset | 1988
  7. 7. Convite para show | Banda Bel | 1989
  8. 8. Banda Bel | Logotipo | 1990
  9. 9. LP “Rei do Rio”, Banda Bel | 1991
  10. 10. Turnê “Rei do Rio” | Banda Bel | 1991
  11. 11. CD “Sambadrome” | Banda Bel | 1993
  12. 12. Marcas diversas | 1993
  13. 13. NYC 94 96 nyu/agency.com/euro.rscg
  14. 14. Primeiro experiência em HTML | 1994
  15. 15. Primeiro site profissional (prog HTML)| American Express University | Agency.com | 1995
  16. 16. Biquini Cavadão | MLS | 1995
  17. 18. RIO 9600 mlab/10’/bowne/globo.com
  18. 19. Banco Itaú | Medialab | 1996
  19. 20. Shell do Brasil | Medialab | 1996
  20. 23. Site oficial do Ronaldinho | 10’Minutos | 1997
  21. 24. Lançamento Ronaldinho no JN | 10’MInutos | 1997
  22. 25. Site Institucional | Bowne | 1998
  23. 26. Brasil 500 | Bowne | 1999
  24. 27. Globo.com | Globo.com | 2000
  25. 28. SP 00 01 DM9DDB
  26. 29. Site Institucional | Itaú Seguros | 2001
  27. 30. Radio Triton | Triton | 2001
  28. 31. 15ª Semna da Criacao Publicitaria | 2001
  29. 32. TV Interativa Itaú | Itaú | 2001
  30. 33. MAR 02 10’Minutos, São Paulo
  31. 34. Hotsite Honda NXR | DM9 | 2003
  32. 35. Prêmio Empreededor do Ano | Ernst & Young | 2003
  33. 36. Portal Banco Real | Banco Real | 2003
  34. 37. Hotsite Honda FIT | DM9 | 2003
  35. 38. Klassicos Kaiser / Kaiser Oktoberfest | Bates | 2003
  36. 39. Hotsite Kaiser Bock | 2003
  37. 40. Portal Kaiser Music | Bates | 10’Minutos | 2003
  38. 41. Cliente atendidos | 10’ | 2003
  39. 42. Direção de Criação | Prêmios
  40. 43. 1 . criação, design, web, webdesign conceitos, fronteiras, modismos e práticas
  41. 44. verdades e mitos sobre criação
  42. 45. Design não é desenho <ul><li>Curso de Design no Brasil é chamado de Desenho Industrial (Industrial Drawing) </li></ul><ul><li>Tradução do Design para ‘Desenho’ é uma forte contribuição para a confusão </li></ul><ul><li>Fazer design não é desenhar </li></ul>
  43. 46. Desenhar e Design <ul><li>design  . [Ingl.] S. m. 1. Concepção de um projeto ou modelo; planejamento. 2. O produto desse planejamento. 3. Restr. Desenho industrial. 4. Restr. Desenho-de-produto. 5. Restr. Programação visual. </li></ul>
  44. 47. Design não é Arte <ul><li>Universo das artes plásticas, artes gráficas e da Comunicação Visual muitas vezes se confunde </li></ul><ul><li>Artistas plásticos frequentemente se tornam ótimos comunicadores visuais </li></ul><ul><li>No Design há o compromisso coletivo com a solução </li></ul>
  45. 49. A diferença entre criar e criar <ul><li>Na separação entre a Arte e o Design encontramos a diferença entre criar para a Arte e criar para o Design </li></ul><ul><li>O verbo está presente nos dois universos </li></ul><ul><li>Mas com significados completamente diferentes </li></ul>
  46. 50. Criar é propor soluções <ul><li>A atividade do ‘criar’ no Design é a busca da solução para um problema específico </li></ul><ul><li>O verbo ‘criar’ deve ser usado com parcimônia </li></ul><ul><li>A livre ‘criação’ não pode ser empregada no Design sob pena de distorcer seu objetivo final </li></ul>
  47. 51. compreendendo o design
  48. 52. A origem do design <ul><li>Início indefinido </li></ul><ul><ul><li>Desde a primeira ilustração de uma obra destinada a um público específico </li></ul></ul><ul><ul><li>Desde a fabricação de armas e apetrechos na idade média </li></ul></ul><ul><ul><li>Talvez no começo da Revolução Industrial com início da produção em série </li></ul></ul><ul><li>Como conceito definido </li></ul><ul><ul><li>Em 1919 com a fundação da Bauhaus na Alemanha </li></ul></ul>
  49. 53. Mulheres na fábrica de velas (Alemanha)
  50. 55. Arquitetura e Design <ul><li>Hoje profissões distanciadas, são como mãe e filha </li></ul><ul><li>A própria Bauhaus é fundada por Walter Gropius, um arquiteto </li></ul><ul><li>Na espinhal dorsal das duas atividades está a mesma estrutura de projeto, a mesma abordagem </li></ul><ul><li>Ambas criam produtos o uso, mas em escalas diferentes </li></ul>
  51. 57. Dessau 1926, Wassily e Nina Kandinsky,  Georg Muche, Paul Klee, Walter Gropius
  52. 58. Design é projeto <ul><li>Fazer Design é fazer um projeto de um produto para uso do homem </li></ul><ul><li>Este produto ser tridimensional, bidimensional, unilateral, interativo </li></ul><ul><li>Independente da forma ou objetivo, todo produto existente no mundo parte de um projeto de Design </li></ul>
  53. 59. Design é propor soluções <ul><li>Fazer um projeto de Design é propor uma solução para uma situação problemática existente no mundo </li></ul><ul><li>Este problema pode ser de comunicação, ferramenta, transporte, social, recreativo, etc </li></ul><ul><li>Para cada problema, há uma solução através de um processo de Design </li></ul>
  54. 60. Design está a nossa volta <ul><li>A melhor pergunta para se fazer a um Designer é “o que é Design?” </li></ul><ul><li>A reação do designer deve ser: começar a apontar para tudo que está a nossa volta </li></ul><ul><li>Tudo que está a nossa volta é fruto de um projeto de Design </li></ul><ul><li>Tudo. </li></ul>
  55. 62. As fronteiras do design <ul><li>A família Arquitetura e Design vinha dando conta de todas as fronteiras </li></ul><ul><li>A Arquitetura cuidando dos espaços físicos </li></ul><ul><li>E o Design de Produto e a Comunicação Visual de todos os objetos a nossa volta </li></ul><ul><li>Até o surgimento da INTERFACE </li></ul>
  56. 63. A interface: uma nova fronteira <ul><li>O surgimento da interface gráfica cria uma nova fronteira para o Design </li></ul><ul><li>A interface gráfica tem suas raízes na década de 50, mas é realmente desenvolvida em meados de 1970 pelo PARC (Palo Alto Research Center) da Xerox </li></ul><ul><li>O primeiro computador a usar uma interface gráfica é o Alto </li></ul>
  57. 64. “ Alto” da Xerox
  58. 65. o design de interfaces e a web
  59. 66. Web é a interface mais popular <ul><li>A Apple com o Macintosh e principalmente a Microsoft com o Windows, iniciaram o processo de popularização do computador pessoal e consequentemente da interface gráfica </li></ul><ul><li>Entretanto, a Web é hoje o ambiente de interface gráfica mais popular do planeta </li></ul>
  60. 70. O surgimento da Web <ul><li>1989, Tim-Berners-Lee do CERN, organização européia para pesquisa nuclear, inicia projeto para troca entre cientistas </li></ul><ul><li>Em 1991, o projeto estava pronto e disponível para algumas universidades. Um pouco depois, podia ser usado via internet </li></ul><ul><li>Em 1993, havia cerca de 50 servidores WWW no mundo inteiro </li></ul><ul><li>Menos de 10 anos depois, a Web é usada por mais de 1 bilhão de pessoas no mundo </li></ul>
  61. 71. Fonte: Hobbes’ Internet Timeline
  62. 72. Websites existentes
  63. 73. Muito primitiva e limitada <ul><li>HTML, principal linguagem de formatação da Web é muito limitada </li></ul><ul><li>Um sistema que precisa viver de ‘gambiarras’ pra funcionar </li></ul><ul><li>Ferramental disponível para desenho é primitivo </li></ul><ul><li>Enfrenta sérias questões de usabilidade e acessabilidade </li></ul>
  64. 76. Em terra de ninguém <ul><li>A interface gráfica ainda está em terra de ninguém </li></ul><ul><li>Não há concenso sobre por quem deve ser feita e o que é preciso se saber para fazer </li></ul><ul><li>Há os programadores que não entendem de design </li></ul><ul><li>Há os designers que não entedem de programação </li></ul><ul><li>Há os que entendem de tudo um pouco, mas não o suficiente para fazer um produto ideal </li></ul>
  65. 77. a importância da interface no mundo de hoje
  66. 78. Gera muita demanda <ul><li>A explosão da Web e a necessidade da construção de sistemas e de interfaces gráficas para este ambiente tem gerado muita demanda por profissionais qualificados </li></ul><ul><li>Numa fase de superaquecimento do mercado (bolha) essa demanda inflacionou salários </li></ul><ul><li>Hoje com um balanço maior entre demanda e oferta, ainda oferece boa remuneração </li></ul>
  67. 79. Profissionais migrantes <ul><li>Sem formação específica, até bem recente essa demanda veio sendo suprida por profissionais migrantes de outras áreas </li></ul><ul><li>Basicamente profissionais de sistemas, de Design e sem profissão definida </li></ul>
  68. 80. Profissional ‘legítimo’ aparece <ul><li>Primeiros cursos de formação superior ou sequencial específicos colocam no mercado as primeiras levas de profissionais ‘legítimos’ </li></ul><ul><li>Aquele que tem ‘formação’ na área </li></ul><ul><li>Se essa formação é adequada ou não, deve ser motivo para debate </li></ul>
  69. 81. o designer x o programador
  70. 82. Situação atípica <ul><li>Pela sua situação ‘primitiva’, a interface gráfica da Web ainda pode ser toda feita por um só profissional </li></ul><ul><li>Quando surgiu, os sistemas eram ainda mais simples e o ferramental ainda mais inexistente </li></ul><ul><li>Era obrigatório algum conhecimento de programação para se criar uma interface de ambiente Web </li></ul>
  71. 83. Limitada a projetos pequenos <ul><li>Na medida em que a tecnologia vem evoluindo, o projeto do “um homem só” se torna cada vez mais raro e cada vez mais limitado a projetos de pequeno porte </li></ul><ul><li>Em projetos maiores e mais complexos, é necessária a formação de uma equipe multidiciplinar </li></ul>
  72. 84. A invenção do Webdesigner <ul><li>A falta de software apropriado também contribuiu para a confusão do designer com o programador </li></ul><ul><li>Esse híbrido passou a ser conhecido como o ‘Webdesigner’ </li></ul><ul><li>Na medida em que o software evolui, há menos necessidade de se conhecer os dois lados da moeda </li></ul><ul><li>Há espaço para a especialização </li></ul>
  73. 85. O ‘front-end’ e o ‘back-end’ <ul><li>Na realização de projetos complexos, a tendência é que se tenha um divisor de águas entre a programação ‘front-end’ e a ‘back-end’ </li></ul><ul><li>O profissional de interface gráfica deve ficar responsável pelo ‘front-end’ e o resto com o programador </li></ul>
  74. 86. A Web é a ponta do iceberg <ul><li>A Web é a principal e praticamente nossa única maneira de explorarmos a internet hoje em dia </li></ul><ul><li>Tudo é feito através do computador e do browser </li></ul><ul><li>Mas o verdadeiro potencial da internet não se esgota na Web </li></ul><ul><li>Com o desenvolvimento da tecnologia e dos aparelhos, um universo inimaginável de opções estará a disposição </li></ul>
  75. 87. Debate <ul><li>O que é um profissional de internet? </li></ul><ul><li>Qual a diferença entre o Webdesigner e o designer para a Web? </li></ul><ul><li>Faculdade x formação livre hoje e no futuro </li></ul><ul><li>A resposabilidade do designer de interfaces perante o mundo </li></ul>
  76. 88. 2. criação não: solução o processo de criação e design voltado para resultados
  77. 89. Definição da situação problemática <ul><li>Primeira prerrogativa: design de interface </li></ul><ul><li>Quem é o cliente </li></ul><ul><li>Qual é a sua necessidade (problema) </li></ul><ul><li>Em que ambiente ele se encontra </li></ul><ul><li>Qual é sua realidade social e referências </li></ul><ul><li>O que está dando origem a sua necessidade de design </li></ul><ul><li>Condições de viablização do projeto </li></ul>
  78. 90. Análise de situações análogas <ul><li>Quais são as referências que nosso cliente forneceu para o projeto </li></ul><ul><li>Quem são os concorrentes de mercado do nosso cliente </li></ul><ul><li>Que soluções de projeto os concorrentes de mercado oferecem </li></ul><ul><li>Que outras soluções similares podemos levantar </li></ul><ul><li>Documentação e análise de todo o material levantado para referência (benchmark) </li></ul>
  79. 91. Definição de objetivos <ul><li>A necessidade </li></ul><ul><ul><li>O que o cliente diz que precisa </li></ul></ul><ul><ul><li>O que achamos que o cliente precisa </li></ul></ul><ul><ul><li>O que o cliente realmente quer </li></ul></ul><ul><li>O público-alvo </li></ul><ul><ul><li>Com quem o cliente quer falar </li></ul></ul><ul><ul><li>Com quem o cliente deve falar </li></ul></ul><ul><ul><li>Com quem o cliente realmente quer falar </li></ul></ul><ul><li>A definição </li></ul><ul><ul><li>Qual objetivo o projeto procurará atingir </li></ul></ul>
  80. 92. Planejamento e arquitetura de informação <ul><li>Primeira listagem de idéias (brainstorm) </li></ul><ul><li>Estruturação das idéias em grupos de informação </li></ul><ul><li>Definição do fluxo de informação </li></ul><ul><li>Especificação de sistemas e componentes </li></ul><ul><li>Estimativa do esforço em horas para desenvolvimento de cada seção do projeto </li></ul><ul><li>Priorização de áreas essenciais e secundárias </li></ul><ul><li>Orçamento e definição de verba para desenvolvimento </li></ul>
  81. 93. PLANILHA DE CUSTOS ARQUITETURA DE INFORMAÇÃO
  82. 95. Design de interface <ul><li>Primeira definição é a nível estrutural, sem influência do design gráfico (brand) </li></ul><ul><li>Definição de elementos mestres </li></ul><ul><li>Definição de telas mestres </li></ul><ul><li>Definição da necessidade de funcionalidade de cada tela do sistema </li></ul>
  83. 96. INTERFACE FUNCIONAL EXEMPLO REAL
  84. 97. Protótipo e usabilidade (1) <ul><li>Programação simples de protótipo funcional </li></ul><ul><ul><li>Links que permitam a navegação </li></ul></ul><ul><ul><li>Interação simples </li></ul></ul><ul><li>Testes de usabilidade </li></ul><ul><ul><li>Pouco ou muito estruturados </li></ul></ul><ul><ul><li>Feitos com pessoas não envolvidas no projeto </li></ul></ul><ul><li>Análise e reação sobre resultados </li></ul><ul><ul><li>Identificação de problemas estruturais </li></ul></ul><ul><ul><li>Correção de interface </li></ul></ul><ul><ul><li>Novo protótipo </li></ul></ul><ul><ul><li>Novo teste </li></ul></ul>
  85. 98. Design gráfico <ul><li>Definição gráfica sobre interface funcional </li></ul><ul><li>Alteração da estética, comunicação, marketing </li></ul><ul><li>Redação de conteúdo </li></ul><ul><li>Manutenção dos elementos funcionais </li></ul><ul><li>Aprovação das telas estáticas </li></ul><ul><li>Ajustes eventuais </li></ul>
  86. 100. Protótipo e usabilidade (2) <ul><li>Nova programação de protótipo simples </li></ul><ul><li>Novos testes de usabilidade com os mesmos usuários da versão anterior </li></ul><ul><li>Identificação de eventuais problemas funcionais causados pelo brand </li></ul><ul><li>Análise e reação sobre resultados </li></ul>
  87. 101. Implementação <ul><li>Desenvolvimento do software de ‘front-end’ e ‘back-end’ necessário para dar suporte aos objetivos de negócio do site e funcionalidades de interface </li></ul><ul><li>Cheque de consistência </li></ul><ul><li>Debug priorizado conforme prazo de execução (cosmético, funcional, grave) </li></ul>
  88. 102. Ajustes <ul><li>Versão beta testada em ambiente controlado </li></ul><ul><li>Site funcionando com estrutura final </li></ul><ul><li>Abertura gradual para maior número de usuários </li></ul><ul><li>Últimos testes e ajustes de problemas </li></ul>
  89. 103. Publicação <ul><li>Liberação do endereço para acesso público </li></ul><ul><li>Comunicação gradual ao mercado sobre a publicação do novo projeto </li></ul><ul><li>Monitoramento de acessos e funcionalidade </li></ul><ul><li>Análise de logs para identificação de problemas de funcionalidade ou de conteúdo </li></ul>
  90. 104. 3. mercado hoje e amanhã o futuro da profissão
  91. 105. panorama do mercado atual
  92. 106. Perspectivas de mercado <ul><li>Começou incipiente e cresceu rápido </li></ul><ul><li>Passou por fase de superaquecimento (bolha) seguida de depressão exagerada </li></ul><ul><li>Passa por uma fase de consolidação e retomada de negócios </li></ul><ul><li>Tende a ficar cada vez mais concorrido e especializado </li></ul>
  93. 107. Atenção: esse gráfico é uma completa “selvagem suposição”, principalmente no que se refere a curva de demanda do mercado. As curvas de oferta e capital são um pouco mais confiáveis, mas também não estão baseadas em números reais, tendo sido usadas apenas em caráter ilustrativo.
  94. 108. Áreas de atuação <ul><li>O design e a programação começaram sendo as únicas áreas existentes para se trabalhar com a Web </li></ul><ul><li>Produtoras e empresas de informática eram os únicos lugares </li></ul><ul><li>Complexificação da atividade abriu novas áreas </li></ul>
  95. 109. Concorrentes e novos concorrentes <ul><li>O tipo de profissional concorrente também mudou </li></ul><ul><li>No começo, todos concorriam com todos e ninguém era originalmente do meio </li></ul><ul><li>Amadurecimento traz hoje um profissional mais especializado, com mais formação </li></ul>
  96. 110. A nova geração <ul><li>A nova geração não precisa ser tão auto-didata quanto os pioneiros </li></ul><ul><li>Já se forma em cursos, escolas técnicas e universidades </li></ul><ul><li>É mais embasada e ao mesmo tempo vai se especializando mais nas diferentes áreas em contraste com o profissional “sabe-tudo” </li></ul>
  97. 111. Tipos de profissional / empresa <ul><li>Hoje é possível encontrar profissionais nas mais diferentes empresas, nas áreas de TI, design, publicidade e marketing </li></ul><ul><li>O trabalho tem sido contratado por: </li></ul><ul><ul><li>O cliente diretamente </li></ul></ul><ul><ul><li>Agências de comunicação </li></ul></ul>
  98. 112. Modelos de funcionamento <ul><li>Profissional liberal </li></ul><ul><ul><li>Trabalha sozinho e/ou com parcerias para tarefas específicas </li></ul></ul><ul><li>Studios de design </li></ul><ul><ul><li>Entre 3 e 8 profissionais </li></ul></ul><ul><ul><li>Maior foco no design, front end e na programação simples </li></ul></ul><ul><li>Produtoras de internet </li></ul><ul><ul><li>Entre 10 e 30 profissionais </li></ul></ul><ul><ul><li>Criam sites médios do começo ao fim </li></ul></ul>
  99. 113. Modelos de funcionamento <ul><li>Empresas de TI </li></ul><ul><ul><li>Mais de 30 profissionais </li></ul></ul><ul><ul><li>Desenvolvem sistemas de TI completos, independente da sua relação com a Web </li></ul></ul><ul><ul><li>Projetam interfaces como complemento de seus sistemas </li></ul></ul><ul><li>Agências de internet </li></ul><ul><ul><li>Entre 5 a 15 profissionais </li></ul></ul><ul><ul><li>Foco na estratégia, criação e atendimento aos projetos </li></ul></ul><ul><ul><li>Não tem equipe interna fixa, contrata de acordo com as necessidades de cada projeto </li></ul></ul>
  100. 114. perspectivas de futuro
  101. 115. A internet além da Web <ul><li>A Web é a segunda forma mais popular de acessarmos a internet (a primeira é o email) </li></ul><ul><li>Hoje, toda nossa relação com a internet se dá através de um mesmo equipamento primitivo: computador pessoal </li></ul>
  102. 116. horroroso melhorzinho
  103. 117. O fim da internet e da Web <ul><li>Quando tivermos mais e melhores opções de acesso, a Web tende a perder sua importância ou eventualmente desaparecer </li></ul><ul><li>Internet ainda é muito rudimentar e por isso está muito presente no nosso dia-a-dia </li></ul><ul><li>Na medida em que funcionar bem e se incorporar no cotidiano, vamos deixar de pensar na tecnologia e passar a pensar no serviço que ela nos oferece </li></ul>
  104. 118. Ninguém se preocupa em como uma geladeira funciona. Apenas se ela está cheia ou não.
  105. 119. O mundo de interfaces <ul><li>A informática entrou para nunca mais sair das nossas vidas </li></ul><ul><li>Todo aplicativo de informática vai sempre demandar alguma interação </li></ul><ul><li>Toda interação sempre demandará uma interface </li></ul><ul><li>Durante muito tempo, essa interface ainda será GRÁFICA </li></ul><ul><li>Em um mundo de interfaces gráficas o designer é peça FUNDAMENTAL </li></ul>
  106. 121. A especialização das profissões <ul><li>Mais e melhores projetos virão </li></ul><ul><li>Ferramentas mais aprimoradas </li></ul><ul><li>Todos esses indicativos nos levam a acreditar na necessidade de profissionais menos generalistas e mais especializados, com funções mais definidas </li></ul><ul><li>A separação entre Design e Tecnologia deve seguir o caminho da Arquitetura e da Engenharia civil </li></ul>
  107. 122. Caminhos seguros a seguir <ul><li>Independente do tipo de interface e do tipo de projeto de design, o processo de trabalho seguirá sendo sempre o mesmo que vimos hoje </li></ul><ul><li>Ele se adapta a qualquer tipo de tecnologia ou ferramenta final </li></ul><ul><li>É fundamental que se coloque a tecnologia sempre em segundo plano e que se invista todo o possível em conceito e teoria </li></ul><ul><li>Tecnologias mudam todo mês, conceitos e teorias passam séculos se aprimorando </li></ul>
  108. 123. Debate final <ul><li>O ‘fim’ da Web é o fim do ‘Webdesigner’? </li></ul><ul><li>Como se preparar para o futuro e levar o dia-a-dia? </li></ul><ul><li>Como os profissionais ‘generalistas’ podem se especializar sem voltar para a escola? </li></ul><ul><li>Do que abrir mão na hora da especialização se gosto de tudo? </li></ul><ul><li>Quanto tempo isso vai levar para se tornar realidade? Quando é o ‘futuro’? </li></ul>
  109. 124. São Paulo, novembro de 2003

×