arquitetura da informação

Prévia do material em texto

Danilo Rosisca PereiraDanilo Rosisca Pereira
Especialista em Sistemas para Internet
Arquitetura da Informação e Webdesign
O A d W b
Arquitetura da Informação e Webdesign
O Avanço da Web
Percebe-se o aumento exagerado de 
informações disponibilizadas em 
ambientes digitaisambientes digitais.
E muitas vezes apresentadas de forma E muitas vezes, apresentadas de forma 
desorganizada.
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
AANOVA GERAÇÃO DA WEB 
exige uma mudançaexige uma mudança
e um repensar no
processo de desenvolvimento de processo de desenvolvimento de 
ambientes informacionais 
digitais.d g ta s.
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
AAWeb 2.0 é A NOVA 
GERAÇÃO DA WEB, que 
traz novas regras e 
serviços baseados serviços baseados 
na Web como 
plataforma.
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
AA Web 2.0 busca
i t ã t a interação entre 
usuários, com a 
criação e o 
compartilhamento de 
conteúdoconteúdo.
Arquitetura da
Informação
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
A i d I f ãArquitetura da Informação
Foi criada por Saul Wurman em 1976 com o objetivo de 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 
 i f ãpara as pessoas o acesso a informação.
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Si d A i d I f ãSistemas da Arquitetura da Informação
A Arquitetura da Informação possui 4 sistemas onde cada um 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 p g
um website. Rosenfeld e Morville (2006). 
Esses sistemas são:
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Si t d O i ã Sistema de Organização: Maneira de categorizar e organizar a 
informação. 
1
Esquema de Organização Esquema de Organização 
1
Esquema de Organização 
Alfabética
Esquema de Organização 
Alfabética
Esquema de 
Organização por 
Tempo
Esquema de 
Organização por 
TempoTempoTempo
Esquema de 
Organização 
por Assunto
Esquema de 
Organização 
por Assunto
2
3
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Si t d R t l ã Sistema de Rotulação: 
Define a forma de representar a Define a forma de representar a 
informação.
Sã l t f d t i 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 WebdesignArquitetura da Informação e Webdesign
Si t d N ã Sistema de Navegação: Determina o modo de navegar ou mover 
no espaço Informacional (e hipertextual).
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Si t d P i Sistema de Pesquisa: 
dú id Estabelece as dúvidas 
(perguntas) executadas em uma 
consulta de pesquisa e como elas consulta de pesquisa e como elas 
serão respondidas.
(Exemplo de busca de fácil compreensão)
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
D t d AI Documentos da AI: Wireframe
O wireframe descreve o conteúdo e 
a informação a ser incluída na a informação a ser incluída na 
arquitetura relativamente a espaços 
confinados bidimensional, conhecida 
como páginacomo página.
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Exemplo de wireframe e layout final de um website:
N ã Gl b lNavegação Global
Conteúdo Global
Conteúdo Local
UsabilidadeUsabilidade
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
U bilid dUsabilidade:
Poss i componentes múltiplos e é radicionalmente associada Possui componentes múltiplos e é radicionalmente associada 
com estes cinco atributos:
• Ser fácil de APRENDER;
• Ser eficiente na utilização;Ser eficiente na utilização;
• Ser fácil de ser recordado;
• Ter poucos erros;• Ter poucos erros;
• Ser subjetivamente agradável.
(Nilsen, 1993)
Arquitetura da Informação e Webdesign
U bilid d P b i
Arquitetura da Informação e Webdesign
Usabilidade: Portanto um website...
Bicicleta Convergente de Jacques Carelman.
Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e
foco na experiência foco na experiência 
do usuáriousuário.
WebdesignWebdesign
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Webdesign:
É uma extensão da prática 
do design, onde o foco do do design, onde o foco do 
projeto é a criação de websites e 
documentos disponíveis no documentos disponíveis no 
ambiente da Web.
Arquitetura da Informação e WebdesignArquitetura 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 permitindo que o usuário 
compreenda rapidamente a 
mensagem. mensagem. 
(Damasceno, 2003)
Arquitetura da Informação e WebdesignArquitetura 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çõesinformaçõ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 WebdesignArquitetura 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 ÚTEIS, bons, bonitos, ç p , , ,
baratos e eficazes.
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Webdesign: Os três elementos fundamentais de um layout
D i b l d líb ã áf fDesign 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. p g
Proporção de 70% para conteúdo e 30% para espaços em branco. 
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Nem sempre aNem sempre a
Aparêncianão éAparêncianão é
Importante! 
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
A prática da 
Si li id dSimplicidade
em layout paraem layout para
WEBWEB.
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Webdesign  C õ  d  d h  d  I t fWebdesign: Convenções de desenho de Interface
A padronização das interfaces é um dos conceitos mais importantes A padronização das interfaces é um dos conceitos mais importantes 
para se projetar websites.
El   tã   l i d     it  d   i l i   iti    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.p p
(Memória, 2005)
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Webdesign  C õ  d  d h  d  I t fWebdesign: Convenções de desenho de Interface
Marca
Navegação global
buscar
Breadcrumbs
Navegação local Conteúdo global
e contextual
Conteúdo 
relacionado
Navegação rodapéNavegação rodapé
(Memória, 2005)
Arquitetura da Informação e WebdesignArquitetura 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 paraformar palavras.
(Cavichioli 2008)(Cavichioli, 2008)
Arquitetura da Informação e WebdesignArquitetura 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
Arquitetura da Informação e Webdesign
Webdesign: F t l í i b
Arquitetura da Informação e Webdesign
Webdesign: Fontes legíveis para web
Nome da Fonte Característica
Arial Moderna, limpa, básica.
F t if j t d l it li
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
Todas com 10 pontos ou acima.
(Nielsen e Loranger, 2007)
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Webdesign: Legibilidade, textos existem para serem lidos.
Exemplo:
Fonte serifadaFonte serifada
 í l í l
Fonte serifadaFonte serifada
 í l í lExemplo:
Curiosidade, inovação e descoberta
para títulopara títulopara títulopara título
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 instantequalquer 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 Fonte semsem serifaserifa
para para textotexto
Fonte Fonte semsem serifaserifa
para para textotexto
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Webdesign: P i l i d Webdesign: Psicologia das cores
As cores podem ter alguns significados provocar lembranças e 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;g
Verde: natureza, primavera, fertilidade, riqueza, ganância;
Amarelo: otimismo, alegria, felicidade, riqueza (ouro), fraqueza;Amarelo: otimismo, alegria, felicidade, riqueza (ouro), fraqueza;
BrancoBrancoBranco:: pureza, inocência, paz, simplicidade, esterilidade;
Preto: poder modernidade sofisticação morte medo mistérioPreto: poder, modernidade, sofisticação, morte, medo, mistério.
(Cavichioli, 2008)
WebstandardsWebstandards
Arquitetura da Informação e WebdesignArquitetura 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 
tibilid d     t bilid d     d  di iti  compatibilidade e portabilidade com navegadores, dispositivos... 
(Ferreira, 2005, p. 12)
Arquitetura da Informação e WebdesignArquitetura 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;ƒDesenvolvimento simplificado;
ƒ Independência entre layout e conteúdo;
ƒManutenção simplificada;
ƒ Padrões Reaproveitáveis.
(Ferreira, 2005) 
WebwritingWebwriting
Arquitetura da Informação e WebdesignArquitetura 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)
Arquitetura da Informação e WebdesignArquitetura 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 curtosDeve ser objetivo / enxuto – com frases e parágrafos curtos.
Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Webdesign:Webwriting
Parágrafos separados por espaços (“blocos de texto”);
Bloco de texto 1Bloco de texto 1
Bloco de texto único Bloco de texto 2XX
Bloco de texto 3
Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
Arquitetura da Informação e WebdesignArquitetura 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
EmpreenderEmpreender FazerFazer
UnicamenteUnicamente
No Estado do ParanáNo Estado do Paraná
SóSó
No ParanáNo Paraná
Na Na eventualidadeeventualidade de de 
Durante o Durante o anoano de 2005de 2005
SeSe
EmEm 20052005
Na Na épocaépoca emem queque vivemosvivemos HojeHoje
Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Webdesign:Webwriting e suas vantagens
ƒ O texto torna‐se maisprá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
ConclusãoConclusão
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Conclusão:
A A it t d I f ã t é d it A Arquitetura de Informação através de seus conceitos e 
planejamento das funcionalidades, visa a organização da 
informação de forma simples e compreensível para os informação, de forma simples e compreensível para os 
usuários. 
O Webdesign é a técnica de design que se difere por sua 
funcionalidade e harmonia estética na distribuição dos 
l t d bi t i f i i di it ielementos de ambientes informacionais digitais.
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
Muito
Obrigado!
danilo@sitedodanilo.com.br
Arquitetura da Informação e WebdesignArquitetura da Informação e Webdesign
REFERÊNCIAS BIBLIOGRÁFICAS 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 D i d di di Ri d J i R 2006NORMAN, 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.