Danilo Rosisca Pereira
Especialista em Sistemas para Internet
Arquitetura da Informação e Webdesign

OA
 Avanço d W b
        da Web

Percebe-se o aumento exagerado de
informações disp...
Arquitetura da Informação e Webdesign



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



A Web 2.0 é A NOVA
GERAÇÃO DA WEB, que
traz   novas regras e
serviços      basead...
Arquitetura da Informação e Webdesign




A Web 2.0         busca
 interação
ai t    ã    entre
               t
usuários,...
Arquitetura da
  Informação
Arquitetura da Informação e Webdesign

Arquitetura d Informação
    i       da f      ã

Foi criada por Saul Wurman em 197...
Arquitetura da Informação e Webdesign

Si
 istemas d Arquitetura d Informação
         da    i       da f      ã

A Arquit...
Arquitetura da Informação e Webdesign

Sistema d O
Si t    de Organização: Maneira de categorizar e organizar a
          ...
Arquitetura da Informação e Webdesign

Sistema d R t l ã
Si t    de Rotulação:

Define a forma de representar a
informação...
Arquitetura da Informação e Webdesign

Sistema d N
Si t    de Navegação: Determina o modo de navegar ou mover
            ...
Arquitetura da Informação e Webdesign

Sistema d P
Si t    de Pesquisa:
                i

Estabelece as dú id
           ...
Arquitetura da Informação e Webdesign

Documentos d AI: Wireframe
D      t da AI


O wireframe descreve o conteúdo e
a inf...
Arquitetura da Informação e Webdesign

Exemplo de wireframe e layout final de um website:

      N
      Navegação Gl b l
...
Usabilidade
Arquitetura da Informação e Webdesign

Usabilidade:
U bilid d

Possui
Poss i componentes múltiplos e é radicionalmente ass...
Arquitetura da Informação e Webdesign

Usabilidade: Portanto um website...
U bilid d P                b i




           B...
Webdesign
Arquitetura da Informação e Webdesign

Webdesign:

É uma extensão da prática 
do design, onde o foco do 
projeto é a criaç...
Arquitetura da Informação e Webdesign

Webdesign: Seu objetivo

É planejar e CRIAR a 
organização funcional de todo 
conte...
Arquitetura da Informação e Webdesign

Arquiteto da Informação x Webdesigner

O Arquiteto da Informação projeta o site com...
Arquitetura da Informação e Webdesign

A missão do design

Segundo Norman (2006), o design tem a missão de colaborar na 
 ...
Arquitetura da Informação e Webdesign

Webdesign: Os três elementos fundamentais de um layout

D i       b l  d
Design bal...
Arquitetura da Informação e Webdesign




Nem sempre a

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




A prática da 
Simplicidade
Si li id d
em layout para
WEB.
Arquitetura da Informação e Webdesign

Webdesign  C
Webdesign: Convenções de desenho de Interface
                  õ  d  ...
Arquitetura da Informação e Webdesign

Webdesign: Convenções de desenho de Interface
Webdesign  C      õ  d  d     h  d  I...
Arquitetura da Informação e Webdesign

Webdesign: Tipografia


É a arte, o processo de criação e a classificação do
desenh...
Arquitetura da Informação e Webdesign

Webdesign: Tipografia

As fontes tipográficas
(ou apenas fontes) são
classificadas ...
Arquitetura da Informação e Webdesign

Webdesign: F t l í i para web
           Fontes legíveis  b

Nome da Fonte         ...
Arquitetura da Informação e Webdesign

Webdesign: Legibilidade, textos existem para serem lidos.
                         ...
Arquitetura da Informação e Webdesign

Webdesign: P i l i das cores
           Psicologia d

As cores podem ter alguns sig...
Webstandards
Arquitetura da Informação e Webdesign

Webdesign: Padrões Web (Webstandards)

Criados pelo W3C (World Wide Web Consortium)...
Arquitetura da Informação e Webdesign

Webdesign: Padrões Web (Webstandards)

Os Padrões Web tornam o desenvolvimento mais...
Webwriting
Arquitetura da Informação e Webdesign

Webdesign: Webwriting

 É o conjunto de técnicas que auxiliam na distribuição de co...
Arquitetura da Informação e Webdesign

Webdesign: Webwriting

O texto para Web deve ser apresentado mais conciso, simplifi...
Arquitetura da Informação e Webdesign

Webdesign: Webwriting

Parágrafos separados por espaços (“blocos de texto”);

     ...
Arquitetura da Informação e Webdesign

Webdesign: Webwriting – sujestões que podem ajudar

Entre dois sinônimos, escolha o...
Arquitetura da Informação e Webdesign

Webdesign: Webwriting e suas vantagens

   O texto torna‐se mais prático;

   A com...
Conclusão
Arquitetura da Informação e Webdesign

Conclusão:

A Arquitetura d I f
  A it t      de Informação através d seus conceito...
Arquitetura da Informação e Webdesign




Muito
Obrigado!
danilo@sitedodanilo.com.br
Arquitetura da Informação e Webdesign

REFERÊNCIAS BIBLIOGRÁFICAS

CAVICHIOLI, O. Tipografia, Teoria das Cores. Disponível...
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Arquitetura Da InformaçãO E Webdesign   Danilo Rosisca Pereira
Upcoming SlideShare
Loading in …5
×

Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira

1,799 views
1,751 views

Published on

1ª Semana de Tecnologia em Palmital

Published in: Education, News & Politics
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,799
On SlideShare
0
From Embeds
0
Number of Embeds
12
Actions
Shares
0
Downloads
156
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Arquitetura Da InformaçãO E Webdesign Danilo Rosisca Pereira

  1. 1. Danilo Rosisca Pereira Especialista em Sistemas para Internet
  2. 2. Arquitetura da Informação e Webdesign OA Avanço d W b da Web Percebe-se o aumento exagerado de informações disponibilizadas em ambientes digitais digitais. E muitas vezes apresentadas de forma vezes, desorganizada.
  3. 3. 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. d g ta s.
  4. 4. Arquitetura da Informação e Webdesign A Web 2.0 é A NOVA GERAÇÃO DA WEB, que traz novas regras e serviços baseados na Web como plataforma.
  5. 5. Arquitetura da Informação e Webdesign A Web 2.0 busca interação ai t ã entre t usuários, com a criação e o compartilhamento de conteúdo.
  6. 6. Arquitetura da Informação
  7. 7. Arquitetura da Informação e Webdesign Arquitetura d Informação i da f ã Foi criada por Saul Wurman em 1976 com o objetivo de 1976, 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 i f informação. ã
  8. 8. Arquitetura da Informação e Webdesign Si istemas d Arquitetura d Informação da i da f ã A Arquitetura da Informação possui 4 sistemas, onde cada um sistemas possui suas próprias regras e características, e quando reunidas servem para organizar o ambiente informacional de p g um website. Rosenfeld e Morville (2006). Esses sistemas são:
  9. 9. Arquitetura da Informação e Webdesign Sistema d O Si t de Organização: Maneira de categorizar e organizar a i ã informação. 1 Esquema de Organização Alfabética Esquema de Organização por Tempo 2 Esquema de Organização 3 por Assunto
  10. 10. Arquitetura da Informação e Webdesign Sistema d R t l ã Si t de Rotulação: Define a forma de representar a informação. São l Sã elementos f d t fundamentais que t i antecipam o que virá a seguir logo após efetuar o clique em um link.
  11. 11. Arquitetura da Informação e Webdesign Sistema d N Si t de Navegação: Determina o modo de navegar ou mover ã no espaço Informacional (e hipertextual).
  12. 12. Arquitetura da Informação e Webdesign Sistema d P Si t de Pesquisa: i Estabelece as dú id dúvidas (perguntas) executadas em uma consulta de pesquisa e como elas serão respondidas. (Exemplo de busca de fácil compreensão)
  13. 13. Arquitetura da Informação e Webdesign Documentos d AI: Wireframe D t da AI 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 página.
  14. 14. Arquitetura da Informação e Webdesign Exemplo de wireframe e layout final de um website: N Navegação Gl b l ã Global Conteúdo Global Conteúdo Local
  15. 15. Usabilidade
  16. 16. Arquitetura da Informação e Webdesign Usabilidade: U bilid d Possui Poss i 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)
  17. 17. Arquitetura da Informação e Webdesign Usabilidade: Portanto um website... U bilid d P b i Bicicleta Convergente de Jacques Carelman. Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e foco na experiência do usuário usuário.
  18. 18. Webdesign
  19. 19. Arquitetura da Informação e Webdesign 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.
  20. 20. Arquitetura da Informação e Webdesign 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)
  21. 21. Arquitetura da Informação e Webdesign 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 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)
  22. 22. Arquitetura da Informação e Webdesign A missão do design Segundo Norman (2006), o design tem a missão de colaborar na  ç criação de produtos cada vez mais  p ÚTEIS, bons, bonitos,  , , , baratos e  eficazes.
  23. 23. Arquitetura da Informação e Webdesign Webdesign: Os três elementos fundamentais de um layout D i b l d Design balanceado: equilíbrio e composição entre imagens, gráficos e fontes  líb ã áf f tipográficas. Contraste: integração entre os elementos do design. Linhas invisíveis: são áreas criadas entre diferentes partes de um design.  p g Proporção de 70% para conteúdo e 30% para espaços em branco. 
  24. 24. Arquitetura da Informação e Webdesign Nem sempre a Aparência não é Importante! 
  25. 25. Arquitetura da Informação e Webdesign A prática da  Simplicidade Si li id d em layout para WEB.
  26. 26. Arquitetura da Informação e Webdesign Webdesign  C Webdesign: Convenções de desenho de Interface õ  d  d h  d  I t f A padronização das interfaces é um dos conceitos mais importantes  para se projetar websites. El   tã   l i Elas estão relacionadas a conceitos de psicologia cognitiva, como   d     it  d   i l i   iti   facilidade de aprendizado e memorização, diminuindo as chances de  p p dúvidas e erros por parte dos usuários. (Memória, 2005)
  27. 27. Arquitetura da Informação e Webdesign Webdesign: Convenções de desenho de Interface Webdesign  C õ  d  d h  d  I t f Marca buscar Navegação global Breadcrumbs Navegação local Conteúdo global Conteúdo e contextual relacionado Navegação rodapé (Memória, 2005)
  28. 28. 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, (Cavichioli 2008)
  29. 29. 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. g Fonte: DigitalPaperWeb.com.br Acessado em: 01 julho 2008
  30. 30. Arquitetura da Informação e Webdesign Webdesign: F t l í i para web Fontes legíveis b Nome da Fonte Característica Arial Moderna, limpa, básica. Fonte F t com serifa projetada para l it if j t d leitura on-line. li Georgia Aparência Tradicional, visual mais moderno que Times News Roman. Trebuchet MS Moderna, simples. Verdana Fonte on-line mais legivel, mesmo em texto pequeno Todas com 10 pontos ou acima. (Nielsen e Loranger, 2007)
  31. 31. Arquitetura da Informação e Webdesign Webdesign: Legibilidade, textos existem para serem lidos. Fonte serifada Exemplo: para título í l 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. 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
  32. 32. Arquitetura da Informação e Webdesign Webdesign: P i l i das cores Psicologia d As cores podem ter alguns significados, provocar lembranças e significados sensações diferentes às pessoas dependendo de sua cultura: Vermelho: paixão, força, energia, amor; Azul: harmonia, confidência, monotonia, tecnologia; g Verde: natureza, primavera, fertilidade, riqueza, ganância; Amarelo: otimismo, alegria, felicidade, riqueza (ouro), fraqueza; Branco: Branco: pureza, inocência, paz, simplicidade, esterilidade; Preto: poder modernidade, sofisticação, morte, medo mistério poder, modernidade sofisticação morte medo, mistério. (Cavichioli, 2008)
  33. 33. Webstandards
  34. 34. Arquitetura da Informação e Webdesign 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...   tibilid d     t bilid d     d  di iti (Ferreira, 2005, p. 12)
  35. 35. Arquitetura da Informação e Webdesign 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) 
  36. 36. Webwriting
  37. 37. Arquitetura da Informação e Webdesign 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)
  38. 38. Arquitetura da Informação e Webdesign Webdesign: Webwriting O texto para Web deve ser apresentado mais conciso, simplificado (curto)  e não com menor quantidade de informações (curto), e não com menor quantidade de informações. Deve ser objetivo / enxuto – com frases e parágrafos curtos com frases e parágrafos curtos. Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
  39. 39. Arquitetura da Informação e Webdesign Webdesign: Webwriting Pará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
  40. 40. Arquitetura da Informação e Webdesign 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: 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
  41. 41. Arquitetura da Informação e Webdesign 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; Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
  42. 42. Conclusão
  43. 43. Arquitetura da Informação e Webdesign Conclusão: A Arquitetura d I f A it t de Informação através d seus conceitos e ã t é de it planejamento das funcionalidades, visa a organização da informação de forma simples e compreensível para os informação, usuários. O Webdesign é a técnica de design que se difere por sua funcionalidade e harmonia estética na distribuição dos elementos de ambientes informacionais di it i l t d bi t i f i i digitais.
  44. 44. Arquitetura da Informação e Webdesign Muito Obrigado! danilo@sitedodanilo.com.br
  45. 45. 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. Design do dia-a-dia. Ri de Janeiro: Rocco, 2006. NORMAN D A O D i d di di Rio d J i R 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.

×