A nova geração da web karen lowhany

535 visualizações

Publicada em

Prof. Anderson

0 comentários
0 gostaram
Estatísticas
Notas
  • Seja o primeiro a comentar

  • Seja a primeira pessoa a gostar disto

Sem downloads
Visualizações
Visualizações totais
535
No SlideShare
0
A partir de incorporações
0
Número de incorporações
2
Ações
Compartilhamentos
0
Downloads
14
Comentários
0
Gostaram
0
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

A nova geração da web karen lowhany

  1. 1. Sumário• A nova geração da Web• Arquitetura da Informação• Webdesign
  2. 2. Arquitetura da Informação e WebdesignA nova geração da WebPercebe-se o aumento exagerado deinformações disponibilizadas emambientes digitais.E muitas vezes, apresentadas de formadesorganizada.
  3. 3. Arquitetura da Informação e WebdesignA NOVA GERAÇÃO DA WEBexige uma mudançae um repensar noprocesso de desenvolvimento deambientes informacionaisdigitais.
  4. 4. Web 2.0
  5. 5. Arquitetura da Informação e WebdesignA Web 2.0 é A NOVA GERAÇÃODA WEB, que traz novasregras e serviços baseadosna Web como plataforma.Ela busca a interaçãoentre usuários, com acriação e o compartilhamento deconteúdo.
  6. 6. Mapa de Noçõesda Web 2.0 Fonte: www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html. Acesso em: 05/05/2008
  7. 7. Arquitetura da Informação
  8. 8. Arquitetura da Informação e WebdesignArquitetura da InformaçãoFoi criada por Saul Wurman em 1976, com o objetivo deorganizar a informação, tornando simples o que é complexo.É o estudo que se aplica em website, buscando umbalanceamento entre usuário-conteúdo-contexto, facilitandopara as pessoas o acesso a informação.
  9. 9. Arquitetura da Informação e WebdesignSistemas da Arquitetura da InformaçãoA Arquitetura da Informação possui 4 sistemas, onde cada umpossui suas próprias regras e características, e quandoreunidas servem para organizar o ambiente informacional deum website. Rosenfeld e Morville (2006).Esses sistemas são:
  10. 10. Arquitetura da Informação e WebdesignSistema de Organização: Maneira de categorizar e organizar ainformação. Esquema de Organização Alfabética Esquema de Organização por Tempo Esquema de Organização por Assunto
  11. 11. Arquitetura da Informação e WebdesignSistema de Rotulação:Define a forma de representar ainformação.São elementos fundamentais queantecipam o que virá a seguir logoapós efetuar o clique em um link.
  12. 12. Arquitetura da Informação e WebdesignSistema de Navegação: Determina o modo de navegar ou moverno espaço Informacional (e hipertextual).
  13. 13. Arquitetura da Informação e WebdesignSistema de Pesquisa:Estabelece as dúvidas(perguntas) executadas em umaconsulta de pesquisa e como elasserão respondidas.
  14. 14. Arquitetura da Informação e WebdesignDocumentos da AI: Blueprints(fluxograma de navegação) Sobre nós Home Serviços Detalhe-ServiçoEles mostram as relações entre aspáginas e outros componentes e Produtos Detalhe-Produtopodem ser usada para retratar aorganização, navegação, etiquetagem Busca Resultadosde sistemas. Contato
  15. 15. Arquitetura da Informação e Webdesign A imagem não pode ser exibida. Talv ez o computador não tenha memória suficiente para abrir a imagem ou talv ez ela esteja corrompida. Reinicie o computador e abra o arquiv o nov amente. Se ainda assim aparecer o x v ermelho, poderá ser necessário excluir a imagem e inseri-la nov amente.Documentos da AI: WireframeO wireframe descreve o conteúdo e ainformação a ser incluída na arquiteturarelativamente a espaços confinadosbidimensional, conhecida como página.
  16. 16. Arquitetura da Informação e WebdesignExemplo de wireframe e layout final de um website: Navegação Global Conteúdo Global Conteúdo Local
  17. 17. Usabilidade
  18. 18. Arquitetura da Informação e WebdesignUsabilidade:Possui componentes múltiplos e é radicionalmente associadacom estes cinco atributos: • Ser fácil de aprender; • Ser eficiente na utilização; • Ser fácil de ser recordado; • Ter poucos erros; • Ser subjetivamente agradável. (Nilsen, 1993)
  19. 19. Arquitetura da Informação e WebdesignUsabilidade: Portanto um website...Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e foco na experiência do usuário.
  20. 20. Webdesign
  21. 21. Arquitetura da Informação e WebdesignWebdesign:É uma extensão da prática dodesign, onde o foco doprojeto é a criação dewebsites e documentosdisponíveis no ambiente daWeb.
  22. 22. Arquitetura da Informação e WebdesignWebdesign: O nascimento…Ele surgiu de estudos, voltados ao visual da Internet,feitos por designers gráficos que descobriram eaperfeiçoaram o uso de ferramentas avançadas de criaçãográfica. (Damasceno , 2003)
  23. 23. Arquitetura da Informação e WebdesignWebdesign: Seu objetivoÉ planejar e criar aorganização funcional detodo conteúdo que serátransmitido(apresentado),permitindo que o usuáriocompreenda rapidamente amensagem.(Damasceno, 2003)
  24. 24. Arquitetura da Informação e WebdesignArquiteto da Informação x WebdesignerO Arquiteto da Informação projeta o site com diferentesmétodos atribuindo uma hierarquia entre as informações.O Webdesigner constrói o layout aplicando conceitos etécnicas de design usando como guia o wireframe feitopelo arquiteto. (Rosenfeld e Morville, 2006)
  25. 25. Arquitetura da Informação e WebdesignA missão do designSegundo Norman (2006), o design tem a missão de colaborar nacriação de produtos cada vez mais ÚTEIS, bons, bonitos,baratos e eficazes.
  26. 26. Arquitetura da Informação e WebdesignAparência não éImportante!
  27. 27. Arquitetura da Informação e WebdesignA prática dasimplicidade!
  28. 28. Arquitetura da Informação e WebdesignWebdesign : Interface/LayoutInformação visual criada para comunicar, utilizandoinfluencias, sentimentos e experiência de quem a observa.Estrutura que organiza informações dentro de umdeterminado contexto, promovendo interação entre ousuário e a informação. (Cavichioli, 2008)
  29. 29. Arquitetura da Informação e WebdesignWebdesign: Os três elementos fundamentais de umainterfaceDesign balanceado: equilíbrio e composição entre imagens, gráficos efontes tipográficas.Contraste: integração entre os elementos do design.Linhas invisíveis: são áreas criadas entre diferentes partes de umdesign. Proporção de 70% para conteúdo e 30% para espaços em branco.
  30. 30. Arquitetura da Informação e WebdesignWebdesign: Convenções de desenho de InterfaceA padronização das interfaces é um dos conceitos maisimportantes para se projetar websites.Elas estão relacionadas a conceitos de psicologia cognitiva,como facilidade de aprendizado e memorização, diminuindo aschances de dúvidas e erros por parte dos usuários. (Memória, 2005)
  31. 31. Arquitetura da Informação e WebdesignELEMENTO DE INTERFACE POSICIONAMENTO PESQUISADORMarca da empresa Canto superior Nielsen, Adksson e BernardBusca Parte superior Nielsen, Adksson e Bernard Parte superior comNavegação global Nielsen, Adksson e Krug links na horizontalNavegação local Coluna da esquerda Nielsen, Adksson e Bernard Parte superior, abaixo da Adksson, Lida e Chaparro eBreadcrumbs marca da empresa KrugConteúdo global e contextual Área central BernardNavegação de rodapé Parte inferior Nielsen, Krug, Lynch e Horton (Memória, 2005)
  32. 32. Arquitetura da Informação e WebdesignWebdesign: Convenções de desenho de Interface Marca buscar Navegação global Breadcrumbs Navegação local Conteúdo global Conteúdo e contextual relacionado Navegação rodapé (MEMÓRIA, 2005)
  33. 33. Arquitetura da Informação e WebdesignWebdesign: TipografiaÉ a arte, o processo de criação e a classificação dodesenho de letras do alfabeto e de caracteres usados paraformar palavras. (CAVICHIOLI, 2008)
  34. 34. Arquitetura da Informação e WebdesignWebdesign: TipografiaAs fontes tipográficas(ou apenas fontes) sãoclassificadas em 4 gruposbásicos: as com serifas, assem serifas, as cursivas e asfontes dingbats. Fonte: DigitalPaperWeb.com.br Acessado em: 01 julho 2008
  35. 35. Arquitetura da Informação e WebdesignWebdesign: TipografiaFontes pré-instaladas: Arial; Arial black; Comic Sans MS; Courier New; Georgia; Impact; Times New Roman; Trebuchet MS; Verdana. (Nielsen e Loranger, 2007)
  36. 36. Arquitetura da Informação e WebdesignWebdesign: Fontes legíveis para webNome da Fonte CaracterísticaArial Moderna, limpa, básica. Fonte com serifa projetada para leitura on-line.Georgia Aparência Tradicional, visual mais moderno que Times News Roman.Trebuchet MS Moderna, simples.Verdana Fonte on-line mais legivel, mesmo em texto pequenoTodas com 10 pontos ou acima. (Nielsen e Loranger, 2007)
  37. 37. Arquitetura da Informação e WebdesignWebdesign: Legibilidade, textos existem para serem lidos. Fonte serifadaExemplo: para título Curiosidade, inovação e descoberta A World Wide Web abriu fronteiras inacreditáveis: pela primeira vez os profissionais de layout e artes gráficas têm acesso a um público enorme, que pode ver seus trabalhos a qualquer instante. Alguns dizem que o conjunto das tais “páginas pessoais” é a maior exposição pública de arte da história. Sob alguns aspectos, esse público é até maior que o dos publicitários, pois não tem restrições de tempo. Fonte sem serifa para texto
  38. 38. Arquitetura da Informação e WebdesignWebdesign: Psicologia das coresDesde os primórdios dahumanidade, a cor já é utilizadacomo elemento de sinalização;Para cada sociedade do planeta,uma mesma cor possui diferentessignificados. (Damasceno, 2003)
  39. 39. Arquitetura da Informação e WebdesignWebdesign: Psicologia das coresAs cores podem ter alguns significados, provocar lembranças esensações diferentes às pessoas dependendo de sua cultura:Vermelho: paixão, força, energia, amor;Azul: harmonia, confidência, monotonia, tecnologia;Verde: natureza, primavera, fertilidade, riqueza, ganância;Amarelo: otimismo, alegria, felicidade, riqueza (ouro), fraqueza;Branco: pureza, inocência, paz, simplicidade, esterilidade;Preto: poder, modernidade, sofisticação, morte, medo, mistério. (Cavichioli, 2008)
  40. 40. Arquitetura da Informação e WebdesignWebdesign: Combinação de coresCírculo cromático - Método de representar oespectro visível agrupando as cores na seqüência dafreqüência espectral;Seu gráfico é conhecido também como Roda dascores, Círculo das cores ou Círculo cromático. (Cavichioli, 2008)
  41. 41. Arquitetura da Informação e WebdesignWebdesign: Círculo cromáticoEsquema Triádico – Combina três cores eqüidistantes (triangulação); – Como a intensidade entre as cores são pouco distintas, esse esquema é mais versátil; – Pode-se utilizar essa técnica para diminuir a vibração óptica das cores. (Cavichioli, 2008)
  42. 42. Webstandards
  43. 43. Arquitetura da Informação e WebdesignWebdesign: Padrões Web (Webstandards)Criados pelo W3C (World Wide Web Consortium), elesseparam o conteúdo em HTML da apresentação em CSS,mantendo a compatibilidade e portabilidade com navegadores,dispositivos... (Ferreira, 2005, p. 12)
  44. 44. Arquitetura da Informação e WebdesignWebdesign: Padrões Web (Webstandards)Os Padrões Web tornam o desenvolvimento mais simples eprodutivo, resultando em:• Montagem Rápida do Layout;• Desenvolvimento simplificado;• Independência entre layout e conteúdo;• Manutenção simplificada;• Padrões Reaproveitáveis. (Ferreira, 2005)
  45. 45. Webwriting
  46. 46. Arquitetura da Informação e WebdesignWebdesign: WebwritingÉ o conjunto de técnicas que auxiliam na distribuição deconteúdo informativo em ambientes digitais, tendo comobase a persuasão. (Rodrigues, 2006)
  47. 47. Arquitetura da Informação e WebdesignWebdesign: WebwritingO texto para Web deve ser apresentado mais conciso,simplificado (curto), e não com menor quantidade deinformações.Deve ser objetivo / enxuto – com frases e parágrafos curtos. Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
  48. 48. Arquitetura da Informação e WebdesignWebdesign: WebwritingParágrafos separados por espaços (“blocos de texto”); Bloco de texto 1 Bloco de texto único X Bloco de texto 2 Bloco de texto 3 Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
  49. 49. Arquitetura da Informação e WebdesignWebdesign: Webwriting – sujestões que podem ajudarEntre dois sinônimos, escolha o mais curto.Evite repetições, palavras inúteis, longas e excessivas. Ex: EVITAR USAR Empreender Fazer Unicamente Só No Estado do Paraná No Paraná Na eventualidade de Se Durante o ano de 2005 Em 2005 Na época em que vivemos Hoje Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
  50. 50. Arquitetura da Informação e WebdesignWebdesign: Webwriting e suas vantagens • O texto torna-se mais prático; • A compreensão do leitor é mais rápida e fácil; • Facilita a criação de fidelidade com o visitante; Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
  51. 51. Conclusão
  52. 52. Arquitetura da Informação e WebdesignConclusão:Para apresentar conteúdos em Ambientes InformacionaisDigitais de forma eficiente, clara, compreensível, objetiva,que valorize as informações, a partir de conceitos emetodologias relacionadas a Arquitetura da Informação eWebdesign. Sugere-se que seja utilizado o seguinte processode desenvolvimento para website:
  53. 53. Arquitetura da Informação e WebdesignProcesso de desenvolvimento para website
  54. 54. Arquitetura da Informação e WebdesignREFERÊNCIAS BIBLIOGRÁFICASCAVICHIOLI, O. Tipografia, Teoria das Cores. Disponível em: <http://cavichioli.blogspot.com/>. Acesso em em: 26/05/2008.DAMASCENO, A. Webdesign: Teoria e Prática. Florianópolis: Visual Books, 2003.FERREIRA, E. Produtividade Web 2.0. São Paulo: Visie, 2005.MEMÓRIA, F. Design para Internet: projetando a experiência perfeita. Rio de Janeiro: Elsevier, 2005.NIELSEN, J. Usabiliy Engineering. San Francisco: Academic Press, 1993. 361 p.NIELSEN, J.; LORANGER, H. Usabilidade na web. Rio de Janeiro: Elsevier, 2007.NORMAN, D. A. O Design do dia-a-dia. Rio de Janeiro: Rocco, 2006.RODRIGUES, B. Webwriting: Redação & Informação na Web. Rio de Janeiro: Brasport, 2006.ROSENFELD, L.; MORVILLE, P. Information Architecture for the Word Wide Web. 2ed. Sebastopol: OReilly, 2006.

×