01 Ai Webdesign

Arquitetura da Informação
e Webdesign
Sumário
o Arquitetura da Informação
o Webdesign
Arquitetura da
Informação
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.
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:

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
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.
Sistema de Navegação: Determina o modo de navegar ou mover
no espaço Informacional (e hipertextual).
Sistema de Pesquisa:
Estabelece as dúvidas
(perguntas) executadas em uma
consulta de pesquisa e como elas
serão respondidas.
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
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:
Navegação Global
Conteúdo Global
Conteúdo Local
Usabilidade
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)
Usabilidade: Portanto um website...
Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e

foco na experiência
do usuário.
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.
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)
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)
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)

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.
Aparência não é
Importante!
A prática da
simplicidade!
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)
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.
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)
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)
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)

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)
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
Fontes pré-instaladas:
Arial;
Arial black;
Comic Sans MS;
Courier New;
Georgia;
Impact;
Times New Roman;
Trebuchet MS;
Verdana.
(Nielsen e Loranger, 2007)
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)

Webdesign: Legibilidade, textos existem para serem lidos.
Exemplo:
Fonte serifada
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
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)
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)
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)
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)
Webstandards
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)

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)
Webwriting
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)
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

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

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
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;

Considerações
Considerações:
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:
Processo de desenvolvimento para website
Muito
Obrigado!
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.

01 Ai Webdesign

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

01 Ai Webdesign

Enviado por

Direitos autorais:

Formatos disponíveis

Arquitetura da Informação

Foi criada por Saul Wurman em 1976, com o objetivo de

É o estudo que se aplica em website, buscando um

A Arquitetura da Informação possui 4 sistemas, onde cada um

Esses sistemas são:

Define a forma de representar a

São elementos fundamentais que

O wireframe descreve o conteúdo e a

Possui componentes múltiplos e é radicionalmente associada

• Ser fácil de aprender;

Deve ser fácil de usar; Com simplicidade, OBJETIVIDADE e

É uma extensão da prática do

Ele surgiu de estudos, voltados ao visual da Internet, feitos por

É planejar e criar a organização

O Arquiteto da Informação projeta o site com diferentes métodos

O Webdesigner constrói o layout aplicando conceitos e técnicas de

(Rosenfeld e Morville, 2006)

Segundo Norman (2006), o design tem a missão de colaborar na

Informação visual criada para comunicar, utilizando

Estrutura que organiza informações dentro de um

Design balanceado: equilíbrio e composição entre imagens, gráficos e

Contraste: integração entre os elementos do design.

Linhas invisíveis: são áreas criadas entre diferentes partes de um design.

A padronização das interfaces é um dos conceitos mais importantes

Elas estão relacionadas a conceitos de psicologia cognitiva, como

Marca da empresa Canto superior Nielsen, Adksson e Bernard

Busca Parte superior Nielsen, Adksson e Bernard

Parte superior com

Navegação local Coluna da esquerda Nielsen, Adksson e Bernard

Parte superior, abaixo da Adksson, Lida e Chaparro e

Conteúdo global e contextual Área central Bernard

Navegação de rodapé Parte inferior Nielsen, Krug, Lynch e Horton

Navegação local Conteúdo global Conteúdo

Navegação rodapé (MEMÓRIA, 2005)

É a arte, o processo de criação e a classificação do

Fonte com serifa projetada para leitura on-line.

Trebuchet MS Moderna, simples.

Verdana Fonte on-line mais legivel, mesmo em texto pequeno

Todas com 10 pontos ou acima. (Nielsen e Loranger, 2007)

Fonte sem serifa

Para cada sociedade do planeta,

As cores podem ter alguns significados, provocar lembranças e

Vermelho: paixão, força, energia, amor;

Círculo cromático - Método de representar o

Seu gráfico é conhecido também como Roda das

 Combina três cores eqüidistantes

Criados pelo W3C (World Wide Web Consortium), eles

(Ferreira, 2005, p. 12)

Os Padrões Web tornam o desenvolvimento mais simples e

 Montagem Rápida do Layout;

É o conjunto de técnicas que auxiliam na distribuição de

O texto para Web deve ser apresentado mais conciso,

Deve ser objetivo / enxuto – com frases e parágrafos curtos.

Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008

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

Bloco de texto único X Bloco de texto 2

Fonte: www.midiadigital.com.br – Acessado em: 09/08/2008

Entre dois sinônimos, escolha o mais curto.

 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

Para apresentar conteúdos em Ambientes Informacionais