Interface e arquitetura da

informação
aula A2
Overmundo Lab módulo A: Introdução à internet colaborativa «
Instituto Overmundo (cc) Alguns direitos reservados.
 1
Comentários sobre a noção de interface. Introdução à
discussão sobre sistemas de interação proposta pelos
estudos de Cibernética.

2
Influências do design gráfico no design da informação
em páginas web. Produção de sentido na obra artística
contemporânea.

3 Interface e imersão: conceitos de realidade virtual.

4 Modo-texto vs. Graphic User Interface (GUI).

5 Usabilidade em páginas web. Design da informação

vs. Arquitetura da informação.

6 Noções de aplicação de wireframes. Modularidade e

design estruturado semanticamente.

7 Taxonomia vs. Folksonomia.

Overmundo Lab
Instituto Overmundo (cc) Alguns direitos reservados.
 » aula A2 // resumo

Interface e arquitetura da
informação
O professor apresenta as influências do design gráfico
na arquitetura de sites e páginas web, aproximando os
alunos da discussão que relaciona os conceitos de
usabilidade e modularidade, através da técnica de
construção e análise de wireframes. Esta sessão,
portanto, fornece subsídios para a compreensão das
principais tendências da evolução do design e da
arquitetura da informação em ambiente web,
introduzindo e debatendo a noção de interface e
estruturação semântica da informação.

Overmundo Lab 3
Instituto Overmundo (cc) Alguns direitos reservados.

metodologia
Aula constituída de exposição oral em torno
de 50 minutos, com abertura para debate e
comentários sobre as referências citadas e
utilizadas. O professor pode ainda realizar
com os alunos a dinâmica proposta abaixo.
sugestões de dinâmica
O professor pode propor uma ou mais das
dinâmicas a seguir: na primeira, o professor
apresenta aos alunos uma série de exemplos
de wireframes, a fim de indicar a construção
modularizada de diversos sites; na segunda,
o professor propõe que os alunos explorem
sites com diferentes temas visuais
(recomenda-se p. ex. o CSS Zen Garden),
sensibilizando-os para a distância entre
código e layout; na terceira proposta, o
professor apresenta o Flickr aos alunos e
sugere, dentre um leque pré-determinado de
imagens, que os alunos atribuam suas
próprias tags aos conteúdos.
critérios de avaliação
É possível comentar a dinâmica com
wireframes a partir de uma aproximação com
a própria paginação e o design gráfico do
jornal impresso. A exploração de temas e
estilos diferentes pode também ser de rápida
apreensão. No exercício proposto para o
Flickr, o professor pode, ao fim da aula,
mapear quais foram as tags utilizadas pelos
alunos para definir os valores de cada
conteúdo.
Overmundo Lab
Instituto Overmundo (cc) Alguns direitos reservados.
debate
É Norbert Wiener, o chamado “pai da
Cibernética”, quem define que a sociedade só
pode ser compreendida a partir do estudo das
mensagens entre homem e máquina, entre
máquina e homem e entre máquina e
máquina. E, diz ele, a cada dia que passa,
estas mensagens ganham mais e mais
importância no cenário contemporâneo. A
Cibernética, como descrita pelo filósofo, é o
estudo das interações estabelecidas por estas
mensagens. Estas interações, por natural, se
dão a partir de uma linguagem comum, uma
linguagem que possa traduzir a linguagem
humana em linguagem de máquina. Nos
primórdios da computação, estas interações
se davam, então, por meio de uma linguagem
de programação, que pressupunha comandos
em texto a serem interpretados pela máquina.
Com o passar do tempo, o surgimento da
interface gráfica proporciona um nível de
interação simbólica visual, baseado em um
sistema prático de convenções. Estas
convenções e técnicas de organização do
conteúdo constituem o que se convencionou
chamar de “usabilidade”, condição que
determina a facilidade de uso e navegação em
aplicações web.
Além da usabilidade, as páginas web
dinâmicas também devem se preocupar em
organizar e dispor seus conteúdos de forma
estruturada e semanticamente facilitada. Esta
organização de conteúdos, baseada em
classificações e valores (categorias e palavras-
chaves, p. ex.), é parte integrante do leque de
atribuições da arquitetura da informação, que
consiste no design de ambientes
informacionais compartilhados.
4
leitura recomendada
▪ CAUDURO, Flávio Vinicius.
Design gráfico & pós-modernidade.
In: MARTINS, Francisco Menezes;
SILVA, Juremir Machado da. A
genealogia do virtual:
Comunicação, Cultura
Tecnologias do Imaginário. Porto
Alegre: Sulina, 2004.
▪ JOHNSON, Steven. Cultura da
interface. Rio de Janeiro: Jorge
Zahar, 2001.
▪ PASSOS, Ravi; MOURA, Mônica.
Design da informação na hipermídia.
In: InfoDesign: Revista Brasileira
de Design da Informação, n. 4,
vol. 2 [2007]. São Paulo: SBDI,
2007.
▪ SANTOS, Robson. Alguns
conceitos para avaliar usabilidade.
In: Webinsider. Disponível em:
<http://webinsider.uol.com.br/index.p
hp/2003/06/19/alguns-conceitos-
para-avaliar-usabilidade>.
Overmundo Lab
Instituto Overmundo (cc) Alguns direitos reservados.
leitura complementar
▪ MANOVICH, Lev. Remixing and
remixability. In: Manovich.net.
Disponível em:
<http://www.manovich.net/DOCS/Re
mix_modular.doc>.
e
▪ NIELSEN, Jakob. Guidelines for
visualizing links. In: UseIt.com.
Disponível em:
<http://www.useit.com/alertbox/2004
0510.html>.
▪ O’REILLY, Tim. What is Web 2.0:
design patterns and business models
for the next generation of software.
In: O’Reilly.com. Disponível em:
<http://oreilly.com/pub/a/web2/archi
ve/what-is-web-20.html?page=1>.
▪ PRIMO, Alex. Interação mútua e
interação reativa: uma proposta de
estudo. In: Revista Famecos, n. 12
[2000]. Porto Alegre: PUC-RS, 2000.
▪ WEBDESIGNER DEPOT. CNN's
new website design deconstructed.
In: Webdesigner Depot. Disponível
em:
<http://www.webdesignerdepot.com/
2009/11/cnns-new-website-design-
deconstructed/>.
▪ WIENER, Norbert. Cibernética e
sociedade: o uso humano de seres
humanos. São Paulo: Cultrix, 1968.
5
 websites
créditos ▪ Andreas Lutz.
Overmundo Lab <http://www.andreaslutz.com/>
um projeto Instituto Overmundo
▪ DontClick.It.
planejamento didático <http://www.dontclick.it/>
Viktor Chagas (coordenação)
Helena Aragão
Olívia Bandeira ▪ FormatPixel.
Oona Castro <http://www.formatpixel.com>
Thiago Camelo
▪ Jakob Nielsen's UseIt.com.
identidade visual
Viktor Chagas
<http://www.useit.com/>

rede de oficineiros ▪ Jesse James Garret.

Viktor Chagas (coordenação) <http://blog.jjg.net/>
Douglas Vieira
Helena Aragão
▪ Nebulosa's Home Page.
Olívia Bandeira
Oona Castro <http://nebulosabar.com/SiliconValley
Saulo Frauches /Heights/6882/>
Thiago Camelo
+ ▪ Webdesigner Depot.
Claudia Rangel
Daniel Duende <http://www.webdesignerdepot.com>
Marcelo Cabral
Sergio Rosa ▪ Zen Garden.
Thiago Skárnio <http://www.csszengarden.com>
Yusseff Abrahim

Overmundo Lab
Instituto Overmundo (cc) Alguns direitos reservados. 6
 • <http://lab.overmundo.org.br>

• <http://delicious.com/overmundo>

Creative Commons <CC BY-NC-SA 3.0> •

atribuição •

uso não-comercial •

compartilhamento pela mesma licença •

Overmundo Lab
Instituto Overmundo (cc) Alguns direitos reservados.
 Secretaria de
Cidadania Cultural

Overmundo Lab
Instituto Overmundo (cc) Alguns direitos reservados.