1. Sumário
• A nova geração da Web
• Arquitetura da Informação
• Webdesign
2. Arquitetura da Informação e Webdesign
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.
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.
5. 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.
Ela busca a interação
entre usuários, com a
criação e o compartilhamento de
conteúdo.
6. Mapa de Noções
da 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
8. Arquitetura da Informação e Webdesign
Arquitetura da Informaçã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.
9. Arquitetura da Informação e Webdesign
Sistemas da Arquitetura da Informaçã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:
10. 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
11. 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.
12. Arquitetura da Informação e Webdesign
Sistema de Navegação: Determina o modo de navegar ou mover
no espaço Informacional (e hipertextual).
13. 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.
14. Arquitetura da Informação e Webdesign
Documentos da AI: Blueprints
(fluxograma de navegação)
Sobre nós
Home
Serviços Detalhe-Serviço
Eles mostram as relações entre as
páginas e outros componentes e Produtos Detalhe-Produto
podem ser usada para retratar a
organização, navegação, etiquetagem Busca Resultados
de sistemas.
Contato
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: 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.
16. Arquitetura da Informação e Webdesign
Exemplo de wireframe e layout final de um website:
Navegação Global
Conteúdo Global
Conteúdo Local
18. 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)
19. Arquitetura da Informação e Webdesign
Usabilidade: Portanto um website...
Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e
foco na experiência
do usuário.
21. 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.
22. Arquitetura da Informação e Webdesign
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)
23. 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)
24. 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.
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)
25. 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 ÚTEIS, bons, bonitos,
baratos e eficazes.
28. 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)
29. Arquitetura da Informação e Webdesign
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.
30. Arquitetura da Informação e Webdesign
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)
31. 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
Parte superior com
Navegação global Nielsen, Adksson e Krug
links na horizontal
Navegação local Coluna da esquerda Nielsen, Adksson e Bernard
Parte superior, abaixo da Adksson, Lida e Chaparro e
Breadcrumbs
marca da empresa Krug
Conteúdo global e contextual Área central Bernard
Navegação de rodapé Parte inferior Nielsen, Krug, Lynch e Horton
(Memória, 2005)
32. Arquitetura da Informação e Webdesign
Webdesign: 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. 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)
34. 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
35. 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)
36. Arquitetura da Informação e Webdesign
Webdesign: Fontes legíveis para web
Nome da Fonte Característica
Arial 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 pequeno
Todas com 10 pontos ou acima. (Nielsen e Loranger, 2007)
37. Arquitetura da Informação e Webdesign
Webdesign: Legibilidade, textos existem para serem lidos.
Fonte serifada
Exemplo:
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. 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)
39. 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)
40. 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)
41. Arquitetura da Informação e Webdesign
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)
43. 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...
(Ferreira, 2005, p. 12)
44. 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)
46. 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)
47. 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.
Deve ser objetivo / enxuto – com frases e parágrafos curtos.
Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008
48. 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
49. 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
50. 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
52. 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
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.