O documento discute Arquitetura da Informação e Webdesign. Apresenta os conceitos de Web 2.0, Arquitetura da Informação, sistemas de organização e navegação, e discute a importância da usabilidade. Também aborda elementos do Webdesign como tipografia, cores, padrões web e técnicas de redação para a web.

1. Arquitetura da Informação e Webdesign Programa de Especialização em Sistemas para Internet – Centro Universitário Eurípides de Marília - Fundação Eurípides Soares da Rocha. Marília 2008 Apresentação de Monografia Discente : Danilo Rosisca Pereira Orientadora: Profa. Ms. Caroline Kraus Luvizotto Co-orientador: Prof. Ms. Elvis Fusco

2. Sumário A nova geração da Web Arquitetura da Informação Webdesign

3. A nova geração da Web Percebe-se o aumento exagerado de informações disponibilizadas em ambientes digitais. E muitas vezes, apresentadas de forma desorganizada. Arquitetura da Informação e Webdesign

4. Arquitetura da Informação e Webdesign A NOVA GERAÇÃO DA WEB exige uma mudança e um repensar no processo de desenvolvimento de ambientes informacionais digitais.

5. Web 2.0

6. A Web 2.0 é A NOVA GERAÇÃO DA WEB, que traz novas regras e serviços baseados na Web como plataforma . E la busca a interação entre usuários, com a criação e o compartilhamento de conteúdo . Arquitetura da Informação e Webdesign

7. Fonte: www.oreillynet.com/pub/a/oreilly/tim/news/2005/09/30/what-is-web-20.html. Acesso em: 05/05/2008 Mapa de Noções da Web 2.0

8. Arquitetura da Informação

9. Arquitetura da Informação e Webdesign A rquitetura da I nformação Foi criada por Saul Wurman em 1976, com o objetivo de organizar a informação, tornando simples o que é complexo. É o estudo que se aplica em website, buscando um balanceamento entre usuário-conteúdo-contexto, facilitando para as pessoas o acesso a informação.

10. Arquitetura da Informação e Webdesign S istemas da A rquitetura da I nformação A Arquitetura da Informação possui 4 sistemas, onde cada um possui suas próprias regras e características, e quando reunidas servem para organizar o ambiente informacional de um website. Rosenfeld e Morville (2006). Esses sistemas são:

11. Arquitetura da Informação e Webdesign Sistema de Organização: Maneira de categorizar e organizar a informação. Esquema de Organização Alfabética Esquema de Organização por Tempo Esquema de Organização por Assunto

12. Arquitetura da Informação e Webdesign Sistema de Rotulação: Define a forma de representar a informação. São elementos fundamentais que antecipam o que virá a seguir logo após efetuar o clique em um link.

13. Arquitetura da Informação e Webdesign Sistema de Navegação: Determina o modo de navegar ou mover no espaço Informacional (e hipertextual).

14. Arquitetura da Informação e Webdesign Sistema de Pesquisa: Estabelece as dúvidas ( perguntas ) executadas em uma consulta de pesquisa e como elas serão respondidas.

15. Arquitetura da Informação e Webdesign Documentos da AI: Blueprints (fluxograma de navegação) Eles mostram as relações entre as páginas e outros componentes e podem ser usada para retratar a organização, navegação, etiquetagem de sistemas. Sobre n ó s Home Servi ç os Produtos Busca Contato Resultados Detalhe-Produto Detalhe-Servi ç o

16. Arquitetura da Informação e Webdesign Documentos da AI: Wireframe O wireframe descreve o conteúdo e a informação a ser incluída na arquitetura relativamente a espaços confinados bidimensional, conhecida como página.

17. Exemplo de wireframe e layout final de um website: Arquitetura da Informação e Webdesign Navega ç ão Global Conte ú do Global Conte ú do Local

18. Usabilidade

19. Arquitetura da Informação e Webdesign Usabilidade: Possui componentes múltiplos e é radicionalmente associada com 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)

20. Usabilidade: Portanto um website... Deve ser fácil de usar ; Com simplicidade , OBJETIVIDADE e foco na experiência do usuário . Arquitetura da Informação e Webdesign

21. Webdesign

22. Webdesign: É uma extensão da prática do design , onde o foco do projeto é a criação de websites e documentos disponíveis no ambiente da Web. Arquitetura da Informação e Webdesign

23. Webdesign: O nascimento… Ele surgiu de estudos, voltados ao visual da Internet, feitos por designers gráficos que descobriram e aperfeiçoaram o uso de ferramentas avançadas de criação gráfica. (Damasceno , 2003) Arquitetura da Informação e Webdesign

24. Webdesign: Seu objetivo É planejar e criar a organização funcional de todo conteúdo que será transmitido(apresentado), permitindo que o usuário compreenda rapidamente a mensagem. (Damasceno, 2003) Arquitetura da Informação e Webdesign

25. Arquiteto da Informação x Webdesigner O Arquiteto da Informação projeta o site com diferentes métodos atribuindo uma hierarquia entre as informações. O Webdesigner constrói o layout aplicando conceitos e técnicas de design usando como guia o wireframe feito pelo arquiteto. (Rosenfeld e Morville, 2006) Arquitetura da Informação e Webdesign

26. A missão do design Segundo Norman (2006), o design tem a missão de colaborar na criação de produtos cada vez mais ÚTEIS , bons , bonitos , baratos e eficazes . Arquitetura da Informação e Webdesign

27. Aparência não é Importante! Arquitetura da Informação e Webdesign

28. A prática da simplicidade! Arquitetura da Informação e Webdesign

29. Arquitetura da Informação e Webdesign Webdesign : Interface/Layout Informação visual criada para comunicar, utilizando influencias, sentimentos e experiência de quem a observa. Estrutura que organiza informações dentro de um determinado contexto, promovendo interação entre o usuário e a informação. (Cavichioli, 2008)

30. Webdesign: Os três elementos fundamentais de uma interface Design balanceado: equilíbrio e composição entre imagens, gráficos e fontes tipográficas. Contraste: integração entre os elementos do design. Linhas invisíveis: são áreas criadas entre diferentes partes de um design. Proporção de 70% para conteúdo e 30% para espaços em branco. Arquitetura da Informação e Webdesign

31. Webdesign: Convenções de desenho de Interface A padronização das interfaces é um dos conceitos mais importantes para se projetar websites. Elas estão relacionadas a conceitos de psicologia cognitiva, como facilidade de aprendizado e memorização, diminuindo as chances de dúvidas e erros por parte dos usuários. (Memória, 2005) Arquitetura da Informação e Webdesign

32. (Memória, 2005) Arquitetura da Informação e Webdesign ELEMENTO DE INTERFACE POSICIONAMENTO PESQUISADOR Marca da empresa Canto superior Nielsen, Adksson e Bernard Busca Parte superior Nielsen, Adksson e Bernard Navegação global Parte superior com links na horizontal Nielsen, Adksson e Krug Navegação local Coluna da esquerda Nielsen, Adksson e Bernard Breadcrumbs Parte superior, abaixo da marca da empresa Adksson, Lida e Chaparro e Krug Conteúdo global e contextual Área central Bernard Navegação de rodapé Parte inferior Nielsen, Krug, Lynch e Horton

33. Webdesign: Convenções de desenho de Interface (MEMÓRIA, 2005) Arquitetura da Informação e Webdesign Marca Navegação local Breadcrumbs Conteúdo global e contextual Conteúdo relacionado buscar Navegação global Navegação rodapé

34. Arquitetura da Informação e Webdesign Webdesign: Tipografia É a arte, o processo de criação e a classificação do desenho de letras do alfabeto e de caracteres usados para formar palavras. (CAVICHIOLI, 2008)

35. Arquitetura da Informação e Webdesign Webdesign: Tipografia As fontes tipográficas (ou apenas fontes) são classificadas em 4 grupos básicos: as com serifas, as sem serifas, as cursivas e as fontes dingbats . Fonte: DigitalPaperWeb.com.br Acessado em: 01 julho 2008

36. Arquitetura da Informação e Webdesign Webdesign: Tipografia Fontes pré-instaladas: Arial; Arial black; Comic Sans MS; Courier New; Georgia; Impact; Times New Roman; Trebuchet MS; Verdana. (Nielsen e Loranger, 2007)

37. Webdesign: Fontes legíveis para web Todas com 10 pontos ou acima. Arquitetura da Informação e Webdesign (Nielsen e Loranger, 2007) Nome da Fonte Característica Arial Moderna, limpa, básica. Georgia Fonte com serifa projetada para leitura on-line. Aparência Tradicional, visual mais moderno que Times News Roman. Trebuchet MS Moderna, simples. Verdana Fonte on-line mais legivel, mesmo em texto pequeno

38. Webdesign: Legibilidade, textos existem para serem lidos. Exemplo: 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. Arquitetura da Informação e Webdesign Fonte serifada para título Fonte sem serifa para texto

39. Arquitetura da Informação e Webdesign Webdesign: Psicologia das cores Desde os primórdios da humanidade, a cor já é utilizada como elemento de sinalização; Para cada sociedade do planeta, uma mesma cor possui diferentes significados. (Damasceno, 2003)

40. Arquitetura da Informação e Webdesign Webdesign: Psicologia das cores As cores podem ter alguns significados, provocar lembranças e sensaçõ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)

41. Arquitetura da Informação e Webdesign Webdesign: Combinação de cores Círculo cromático - Método de representar o espectro visível agrupando as cores na seqüência da freqüência espectral; Seu gráfico é conhecido também como Roda das cores, Círculo das cores ou Círculo cromático. (Cavichioli, 2008)

42. Webdesign: Círculo cromático Esquema 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) Arquitetura da Informação e Webdesign

43. Webstandards

44. Webdesign: Padrões Web (Webstandards) Criados pelo W3C (World Wide Web Consortium), eles separam o conteúdo em HTML da apresentação em CSS, mantendo a compatibilidade e portabilidade com navegadores, dispositivos... (Ferreira, 2005, p. 12) Arquitetura da Informação e Webdesign

45. Webdesign: Padrões Web (Webstandards) Os Padrões Web tornam o desenvolvimento mais simples e produtivo, 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) Arquitetura da Informação e Webdesign

46. Webwriting

47. Webdesign: Webwriting É o conjunto de técnicas que auxiliam na distribuição de conteúdo informativo em ambientes digitais, tendo como base a persuasão. (Rodrigues, 2006) Arquitetura da Informação e Webdesign

48. Webdesign: Webwriting O texto para Web deve ser apresentado mais conciso , simplificado ( curto ) , e não com menor quantidade de informações. Deve ser objetivo / enxuto – com frases e parágrafos curtos. Arquitetura da Informação e Webdesign Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008

49. Webdesign: Webwriting Parágrafos separados por espaços (“blocos de texto”); Arquitetura da Informação e Webdesign X Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008 Bloco de texto único Bloco de texto 1 Bloco de texto 2 Bloco de texto 3

50. Webdesign: Webwriting – sujestões que podem ajudar Entre dois sinônimos , escolha o mais curto . Evite repetições , palavras inúteis , longas e excessivas . Ex: Arquitetura da Informação e Webdesign Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008 EVITAR USAR Empreender Unicamente No Estado do Paraná Na eventualidade de Durante o ano de 2005 Na época em que vivemos Fazer Só No Paraná Se Em 2005 Hoje

51. Webdesign: 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 ; Arquitetura da Informação e Webdesign Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008

52. Conclusão

53. Arquitetura da Informação e Webdesign Conclusão: Para apresentar conteúdos em Ambientes Informacionais Digitais de forma eficiente, clara, compreensível, objetiva, que valorize as informações, a partir de conceitos e metodologias relacionadas a Arquitetura da Informação e Webdesign. Sugere-se que seja utilizado o seguinte processo de desenvolvimento para website:

54. Arquitetura da Informação e Webdesign Processo de desenvolvimento para website

55. Arquitetura da Informação e Webdesign Muito Obrigado! Perguntas?

56. Arquitetura da Informação e Webdesign REFERÊNCIAS BIBLIOGRÁFICAS CAVICHIOLI, 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: O'Reilly, 2006.