1ª Semana de Tecnologia em Palmital

1. Danilo Rosisca Pereira
Especialista em Sistemas para Internet

3. 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.

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.
d g ta s.

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.

6. 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.

10. Arquitetura da
Informação

11. 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.
ã

12. 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:

13. 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

14. 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.

15. 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).

16. 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)

17. 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.

18. 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

19. Usabilidade

20. 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)

21. 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.

22. Webdesign

23. 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.

24. 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)

25. 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)

26. 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.

27. 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.

28. Arquitetura da Informação e Webdesign
Nem sempre a
Aparência não é
Importante!

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

30. 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)

31. 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)

32. 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)

33. 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

34. 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)

35. 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

36. 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)

37. Webstandards

38. 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)

39. 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)

40. Webwriting

41. 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)

42. 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

43. 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

44. 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

45. 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

46. Conclusão

47. 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.

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

49. 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.