SlideShare uma empresa Scribd logo
1 de 56
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
Sumário ,[object Object],[object Object],[object Object]
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
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.
Web 2.0
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
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
Arquitetura da Informação
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.
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:
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
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.
Arquitetura da Informação e Webdesign Sistema de Navegação:  Determina o modo de navegar ou mover no espaço Informacional (e hipertextual).
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.
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
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.
Exemplo de  wireframe  e  layout final  de um website: Arquitetura da Informação e Webdesign Navega ç ão Global Conte ú do Global Conte ú do Local
Usabilidade
Arquitetura da Informação e Webdesign ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
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
Webdesign
[object Object],[object Object],Arquitetura da Informação e Webdesign
[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign
[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign
[object Object],[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign
[object Object],[object Object],Arquitetura da Informação e Webdesign
[object Object],[object Object],Arquitetura da Informação e Webdesign
[object Object],[object Object],Arquitetura da Informação e Webdesign
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)
[object Object],[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign
[object Object],[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign
(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
[object Object],[object Object],Arquitetura da Informação e Webdesign Marca ,[object Object],Breadcrumbs Conteúdo global  e contextual Conteúdo  relacionado buscar ,[object Object],Navegação rodapé
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)
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
Arquitetura da Informação e Webdesign ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],(Nielsen e Loranger, 2007)
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
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign Fonte serifada para título Fonte sem serifa para texto
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)
Arquitetura da Informação e Webdesign ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Arquitetura da Informação e Webdesign ,[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign
Webstandards
[object Object],[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign
[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign
Webwriting
[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign
[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
[object Object],[object Object],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
[object Object],[object Object],[object Object],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
[object Object],[object Object],[object Object],[object Object],Arquitetura da Informação e Webdesign Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
Conclusão
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:
Arquitetura da Informação e Webdesign Processo de desenvolvimento para website
Arquitetura da Informação e Webdesign Muito Obrigado! Perguntas?
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.

Mais conteúdo relacionado

Mais procurados

Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
duradez
 

Mais procurados (20)

Arquitetura de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de Informação
 
Arquitetura da Informacao na WEB
Arquitetura da Informacao na WEBArquitetura da Informacao na WEB
Arquitetura da Informacao na WEB
 
Por que Arquitetura de Informação e Usabilidade são importantes?
Por que Arquitetura de Informação e Usabilidade são importantes?Por que Arquitetura de Informação e Usabilidade são importantes?
Por que Arquitetura de Informação e Usabilidade são importantes?
 
Arquitetura de informação
Arquitetura de informaçãoArquitetura de informação
Arquitetura de informação
 
Arquitetura da Informação e Webdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Arquitetura da Informação e Webdesign
 
Navegação e Arquitetura de Informação
Navegação e Arquitetura de InformaçãoNavegação e Arquitetura de Informação
Navegação e Arquitetura de Informação
 
Arquitetura de informação para Interface Digital
Arquitetura de informação para Interface DigitalArquitetura de informação para Interface Digital
Arquitetura de informação para Interface Digital
 
Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação - Aulas 04 e 05Arquitetura de Informação - Aulas 04 e 05
Arquitetura de Informação - Aulas 04 e 05
 
Intensivo 80h - Arquitetura de informação e usabilidade
Intensivo 80h - Arquitetura de informação e usabilidadeIntensivo 80h - Arquitetura de informação e usabilidade
Intensivo 80h - Arquitetura de informação e usabilidade
 
A nova geração da web karen lowhany
A nova geração da web   karen lowhanyA nova geração da web   karen lowhany
A nova geração da web karen lowhany
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
Aula sobre Arquitetura de Informação
Aula sobre Arquitetura de InformaçãoAula sobre Arquitetura de Informação
Aula sobre Arquitetura de Informação
 
Introducao à Arquitetura de Informacao
Introducao à Arquitetura de InformacaoIntroducao à Arquitetura de Informacao
Introducao à Arquitetura de Informacao
 
Arquitetura da informação
Arquitetura da informaçãoArquitetura da informação
Arquitetura da informação
 
Arquitetura de Informacao em Projetos de Design
Arquitetura de Informacao em Projetos de DesignArquitetura de Informacao em Projetos de Design
Arquitetura de Informacao em Projetos de Design
 
Sistemas de organização e rotulação
Sistemas de organização e rotulaçãoSistemas de organização e rotulação
Sistemas de organização e rotulação
 
Arquitetura da Informação- Origem e Desenvolvimento
Arquitetura da Informação- Origem e DesenvolvimentoArquitetura da Informação- Origem e Desenvolvimento
Arquitetura da Informação- Origem e Desenvolvimento
 
Arquitetura da Informação e Usabilidade
Arquitetura da Informação e UsabilidadeArquitetura da Informação e Usabilidade
Arquitetura da Informação e Usabilidade
 
Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)Arquitetura de Informação (atualizado)
Arquitetura de Informação (atualizado)
 
Navegação
NavegaçãoNavegação
Navegação
 

Destaque (7)

Arquitetura Da Informação
Arquitetura Da InformaçãoArquitetura Da Informação
Arquitetura Da Informação
 
Padronizacao medicamentos 2011
Padronizacao medicamentos 2011Padronizacao medicamentos 2011
Padronizacao medicamentos 2011
 
Aula 2 Webdesign
Aula 2 WebdesignAula 2 Webdesign
Aula 2 Webdesign
 
Usabilidade para Pequenos e Médios Projetos Web
Usabilidade para Pequenos e Médios Projetos WebUsabilidade para Pequenos e Médios Projetos Web
Usabilidade para Pequenos e Médios Projetos Web
 
Web Design > Gestalt e suas leis
Web Design > Gestalt e suas leisWeb Design > Gestalt e suas leis
Web Design > Gestalt e suas leis
 
Arte do renascimento - arquitetura
Arte do renascimento - arquiteturaArte do renascimento - arquitetura
Arte do renascimento - arquitetura
 
TCC - Terapia Cognitiva Comportamental
TCC - Terapia Cognitiva ComportamentalTCC - Terapia Cognitiva Comportamental
TCC - Terapia Cognitiva Comportamental
 

Semelhante a Arquitetura da Informacao e Webdesign

Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10
Rafael Marinho
 
Introducao a arquitetura de informacao
Introducao a arquitetura de informacaoIntroducao a arquitetura de informacao
Introducao a arquitetura de informacao
eramos7senac
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
Rodrigo Correia
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
posgraduacaorj
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
pospipoca
 

Semelhante a Arquitetura da Informacao e Webdesign (20)

Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca PereiraArquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira
 
Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10Arquiteturadeinformao apresentao2-03-05-10
Arquiteturadeinformao apresentao2-03-05-10
 
Introducao a arquitetura de informacao
Introducao a arquitetura de informacaoIntroducao a arquitetura de informacao
Introducao a arquitetura de informacao
 
Apresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo SantiagoApresentação PCC - Rodrigo Santiago
Apresentação PCC - Rodrigo Santiago
 
Apresentação - Arquitetura de Informação
Apresentação - Arquitetura de InformaçãoApresentação - Arquitetura de Informação
Apresentação - Arquitetura de Informação
 
Criação de sites
Criação de sitesCriação de sites
Criação de sites
 
Arquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e CenáriosArquitetura de Informação - Personas e Cenários
Arquitetura de Informação - Personas e Cenários
 
Design para a web - da interface ao branding
Design para a web - da interface ao brandingDesign para a web - da interface ao branding
Design para a web - da interface ao branding
 
Arquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de NavegaçãoArquitetura de Informação - Sistemas de Navegação
Arquitetura de Informação - Sistemas de Navegação
 
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...29/09/2011 -  9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
29/09/2011 - 9h às 12h30 - oficina - arquitetura da informação em sistemas 2...
 
Arquitetura de Informação
Arquitetura de InformaçãoArquitetura de Informação
Arquitetura de Informação
 
Aula 1 Webdesign
Aula 1 WebdesignAula 1 Webdesign
Aula 1 Webdesign
 
RPC.com.br - Produto
RPC.com.br - ProdutoRPC.com.br - Produto
RPC.com.br - Produto
 
Arquitetura de Informação e Usabilidade
Arquitetura de Informação e UsabilidadeArquitetura de Informação e Usabilidade
Arquitetura de Informação e Usabilidade
 
Web Standards
Web StandardsWeb Standards
Web Standards
 
Inov Aula2
Inov Aula2Inov Aula2
Inov Aula2
 
Arquitetura da Informação Aplicada ao Jornalismo - Vanessa Otovicz
Arquitetura da Informação Aplicada ao Jornalismo - Vanessa OtoviczArquitetura da Informação Aplicada ao Jornalismo - Vanessa Otovicz
Arquitetura da Informação Aplicada ao Jornalismo - Vanessa Otovicz
 
Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira Arquitetura de Informação - Rogério Pereira
Arquitetura de Informação - Rogério Pereira
 
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato RosaPalestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
Palestra "Usabilidade: conceito, aplicações e testes" de Renato Rosa
 
Aula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesignAula introdutória da disciplina de webdesign
Aula introdutória da disciplina de webdesign
 

Último

Último (8)

ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
Convergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor SucroenergéticoConvergência TO e TI nas Usinas - Setor Sucroenergético
Convergência TO e TI nas Usinas - Setor Sucroenergético
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 

Arquitetura da Informacao e Webdesign

  • 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.
  • 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.
  • 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
  • 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
  • 19.
  • 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
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 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.
  • 31.
  • 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.
  • 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.
  • 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.
  • 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.
  • 41.
  • 42.
  • 44.
  • 45.
  • 47.
  • 48.
  • 49.
  • 50.
  • 51.
  • 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.