O documento descreve a história do design digital, dividida em quatro áreas: projetos de sinalização, sistemas visuais de informação, identidade visual e evolução tecnológica. Apresenta vários marcos no desenvolvimento de cada área, como o mapa do metrô de Londres, padronização de sinais de trânsito, normas gráficas do governo americano e o computador Xerox Star, que introduziu a metáfora do desktop.
13. Beck substituiu a fidelidade geográfica por
uma interpretação diagramática
sexta-feira, 16 de março de 2012
14. Outro avanço foi codificar a identificação das
diferentes linhas com cores brilhantes.
sexta-feira, 16 de março de 2012
15. O avanço alcançado por Beck foi
fundamental para o desenvolvimento
do Design da Informação
sexta-feira, 16 de março de 2012
16. Unificação dos
sinais de
circulação
Vienna Convention on Road Signs and Signals (1968)
sexta-feira, 16 de março de 2012
17. A padronização dos sinais de circulação
criou uma linguagem global para o trânsito
de veículos
sexta-feira, 16 de março de 2012
18. Normas
gráficas
Federal Design Improvement Program (1974)
sexta-feira, 16 de março de 2012
19. "I believe that we all can find that the arts have
a great deal more to contribute to what we in
government are seeking to accomplish -- and
that this will be good for the arts and good for
the country."
President Richard Nixon, 1971
sexta-feira, 16 de março de 2012
20. O objetivo era melhorar a qualidade da
comunicação visual e otimizar a relação
entre os órgãos governamentais e os
cidadãos.
sexta-feira, 16 de março de 2012
21. Estabeleceram normas para tamanho,
formatos e especificações de papel, cores,
tipografia e sistema de retícula
sexta-feira, 16 de março de 2012
22. Sistema de
Símbolos para
Pasageiros
AIGA (1974)
sexta-feira, 16 de março de 2012
23. Esta foi mais uma iniciativa do Governo dos
Eua na área de Design
sexta-feira, 16 de março de 2012
24. Foi encomendado à AIGA um sistema de
símbolos destinado a passageiros, pedestres
e usuários de transporte
sexta-feira, 16 de março de 2012
27. A importância desse trabalho residiu no
passo definitivo na unificação de significados
que transcende as barreiras culturais e
idiomáticas
sexta-feira, 16 de março de 2012
28. Metáfora do
Desktop
Xerox Star (1981)
sexta-feira, 16 de março de 2012
29. Estabelece-se pela primeira vez uma série de
ícones herdeiros dos sinais viários que
funcionarão como sinais para navegar pelo
sistema
sexta-feira, 16 de março de 2012
31. Ao executar um clique duplo em um ícone,
uma pasta se abria em forma de janela
sexta-feira, 16 de março de 2012
32. Os espaços do nosso mundo começam a se
estabelecer como espaços virtuais, espaços
de informação representados por metáforas
e ícones
sexta-feira, 16 de março de 2012
33. Projetos de sinalização
Sist. Visuais de Inf
Identidade Visual
Evolução tecnológica
sexta-feira, 16 de março de 2012
34. Representações gráficas que contêm um alto
grau de informação e tem um objetivo
didático
sexta-feira, 16 de março de 2012
35. Isotype
Otto Neurath (1920)
sexta-feira, 16 de março de 2012
36. Desenvolver uma padronização visual para
fins educativos compreensível por qualquer
cidadão
sexta-feira, 16 de março de 2012
37. A idéia central era desenvolver uma
linguagem mundial sem palavras
sexta-feira, 16 de março de 2012
38. Essa vocação de globalidade é aplicada à
comunicação das novas tecnologias
sexta-feira, 16 de março de 2012
39. Não ao acaso, muito dos pictogramas atuais
são encotrados em uso na Internet
sexta-feira, 16 de março de 2012
41. User Centered
Design
Will Burtin (1949)
sexta-feira, 16 de março de 2012
42. Upjohn para a Scope Magazine
(Will Burtin, 1951)
sexta-feira, 16 de março de 2012
43. The brain
(Will Burtin, 1964)
sexta-feira, 16 de março de 2012
44. Quatro realidades principais:
“A o do homem, como unidade e mediador;
a da luz, da cor e da textura; a do espaço, do
tempo e do movimento; e a da ciência”
sexta-feira, 16 de março de 2012
45. Burtin dizia que o homem era o aspecto
mais importante para o designer. Nele já
estava latente a ideia do design centrado no
usuário
sexta-feira, 16 de março de 2012
46. Todo o conhecimento pertence ao estudo da
percepção do usuário, de como ele recebe a
informação
sexta-feira, 16 de março de 2012
47. Atlas
Geográfico
Mundial
Herbet Bayer (1953)
sexta-feira, 16 de março de 2012
48. Nessa obra, Bayer apresentava toda a
informação por meio de símbolos mapas
geográficos e diagramas
sexta-feira, 16 de março de 2012
49. Esse trabalho representou um dos primeiros
grande trabalhos dedicados à visualização da
informação em estado puro e um
antecedente da representação da informação
tal como a conduzimos na internet
sexta-feira, 16 de março de 2012
51. Projetos de sinalização
Sist. Visuais de Inf
Identidade Visual
Evolução tecnológica
sexta-feira, 16 de março de 2012
52. No inicío do século XX surgiram as
primeiras iniciativas para padronizar a
imagem corportava das empresas
sexta-feira, 16 de março de 2012
53. Identidade
Corporativa -
AEG
Otto Neurath e Peter Behrens (1920)
sexta-feira, 16 de março de 2012
54. Eles foram os primeiros a sistematizar uma
imagem de identidade visual coordenada da
forma como vemos hoje
sexta-feira, 16 de março de 2012
55. Organizaram todo o sistema de projeção da
identidade da forma como até hoje
conhecemos
sexta-feira, 16 de março de 2012
56. Escola de
Design de Ulm
Otl Aicher e Martin Krampen (1949 - 1964)
sexta-feira, 16 de março de 2012
57. A importância da Escola de Ulm reside na
renovação do conceito metodológico
aplicado à imagem da marca e aos signos
visuais
sexta-feira, 16 de março de 2012
58. Entre os principais feitos de Otl Aicher estão
a elaboração das imagens corporativas para a
Lufthansa e Braun
sexta-feira, 16 de março de 2012
61. Estes trabalhos foram resultados de um
estudo metodológico que levava a entender
a imagem corporativa como uma imagem
global que organizava todo o material gráfico
sexta-feira, 16 de março de 2012
62. Hoje em dia os sistemas de identidade visual
optam por soluções estruturais menos
rígidas, nos quais a marca e suas aplicações
são mais flexíveis e permeáveis
sexta-feira, 16 de março de 2012
63. Nas novas tecnologias, a importância da
marca é medida também em termos de uso
das ferramentas
sexta-feira, 16 de março de 2012
64. A representação da identidade visual e o seu
uso converge e se mistura no ciberespaço
sexta-feira, 16 de março de 2012
65. Projetos de sinalização
Sist. Visuais de Inf
Identidade Visual
Evolução tecnológica
sexta-feira, 16 de março de 2012
66. Bem, aqui a coisa é longa e são várias as
iniciativas.Vamos dividir em algumas
subcategorias
sexta-feira, 16 de março de 2012
67. Pré-história
Visualizar a informática
Mudança de Paradigma
Interface gráfica atual
Internet e Ciberespaço
Guerra dos Navegadores
sexta-feira, 16 de março de 2012
68. Pré-história
Visualizar a informática
Mudança de Paradigma
Interface gráfica atual
Internet e Ciberespaço
Guerra dos Navegadores
sexta-feira, 16 de março de 2012
69. A história da interface gráfica do usuário
acompanha a evolução tecnológica. Quanto
mais espaços foram criados, mais interfaces
foram desenvolvidas
sexta-feira, 16 de março de 2012
70. A era dos pré-computadores eletrônicos
caracteriza-se por dispositivos de input e
output e que desempenhavam funções
relacionadas com cálculos
sexta-feira, 16 de março de 2012
71. Eram máquinas extremamente adaptadas. O
homem é que tinha que se adaptar à
máquina.
sexta-feira, 16 de março de 2012
72. Nuria Almirón:
Anti-interface em seu estado puro
sexta-feira, 16 de março de 2012
73. Maquina
Diferencial
Charles Babbage (1835)
sexta-feira, 16 de março de 2012
74. Aplicava cinco conceitos modernos dos
computadores modernos: entrada de dados,
armazenamento, processador, unidade de
controle, dispositivo de saída
sexta-feira, 16 de março de 2012
75. Cartões
Perfurados
Joseph Marie Jacquard (1891)
sexta-feira, 16 de março de 2012
76. Os cartões perfurados foram criados para o
tear automático. Depois foram adptados pela
Hollerith para o censo dos EUA, sendo o
primeiro sistema de processamento de
informação
sexta-feira, 16 de março de 2012
77. Composto de uma leitora elétrica de cartões
perfurados, uma classificadora rudimentar, e
uma unidade tabuladora (somava e imprimia
resultados)
sexta-feira, 16 de março de 2012
78. Cartão Perfurado
(Hollerith, 1890)
sexta-feira, 16 de março de 2012
79. ENIAC
J. Eckert e J. Mauchly (1945)
sexta-feira, 16 de março de 2012
80. O desenvolvimento tecnológico durante o
século XX até a chegada das primeiras
interfaces levaram à construção de
computadores cada vez menores
sexta-feira, 16 de março de 2012
81. Tido como o primeiro computador digital
eletrônico de grande escala
sexta-feira, 16 de março de 2012
82. Paralelamente foi-se ampliando a memória e
a capacidade de cálculo até que o
computador conseguisse suportar e
apresentar gráficos
sexta-feira, 16 de março de 2012
83. Pré-história
Visualizar a informática
Mudança de Paradigma
Interface gráfica atual
Internet e Ciberespaço
Guerra dos Navegadores
sexta-feira, 16 de março de 2012
84. Foi no MIT que apareceram os primeiros
resultados de pesquisas em relação às
imagens geradas por computador
sexta-feira, 16 de março de 2012
85. Whirlwind
MIT (1949)
sexta-feira, 16 de março de 2012
86. Foi o primeiro computador com capacidade
de realizar cálculos de forma digital e
representá-los diretamente em uma tela de
raios catódicos
sexta-feira, 16 de março de 2012
87. Sketchpad
Ivan Sutherland (1962)
sexta-feira, 16 de março de 2012
88. Diante de uma tela, podia-se desenhar linhas,
mudá-las, repeti-las, armazená-las etc.
sexta-feira, 16 de março de 2012
89. Abriu caminho para uma conceituação
diferente da interface e das relações entre
pessoas e computadores
sexta-feira, 16 de março de 2012
90. Além disso, foi a primeira interface aplicada
ao desenho, o início do Computer-aided
design
sexta-feira, 16 de março de 2012
91. Bloco de Desenho
(Sutherland, 1962)
sexta-feira, 16 de março de 2012
92. Sutherland também desenvolveu geradores
de cenas para simuladores de aviões militares
e comerciais
sexta-feira, 16 de março de 2012
93. Dynabook
Alan Kay (1960)
sexta-feira, 16 de março de 2012
94. Esse projeto é o embrião do que chamamos
hoje de laptop
sexta-feira, 16 de março de 2012
95. Uma plataforma criada para um computador
pessoal usando sistema de orientação gráfica
dentro da interface e fácil de usar por alunos
de educação primária
sexta-feira, 16 de março de 2012
97. Mouse
Douglas Engelbart (1968)
sexta-feira, 16 de março de 2012
98. A invenção do mouse gerou o princípio da
manipulação direta da interface.
sexta-feira, 16 de março de 2012
99. Sistema
Operacional
com Janelas
Augmentation Research Center (1968)
sexta-feira, 16 de março de 2012
100. O próprio Engelbart realizou a primeira
demonstração pública de um sistema
operacional com janelas
sexta-feira, 16 de março de 2012
101. A navegação era realizada por teclado e
mouse
sexta-feira, 16 de março de 2012
102. As pesquisas realizadas foram as precursoras
do conceito de interface atual
sexta-feira, 16 de março de 2012
103. Pré-história
Visualizar a informática
Mudança de Paradigma
Interface gráfica atual
Internet e Ciberespaço
Guerra dos Navegadores
sexta-feira, 16 de março de 2012
104. Que mudança de paradigma é essa?
sexta-feira, 16 de março de 2012
105. Essa mudança diz respeito à forma em que a
informação era pensada. Em princípio, se
pensava em informação estanque, depois, em
informação compartilhada.
sexta-feira, 16 de março de 2012
106. Hipertexto
Theodore Holm Nelson (1960)
sexta-feira, 16 de março de 2012
107. Vislumbrava o computador como uma
máquina fácil de usar, divertida e que tivesse
uma interface com imagem e som
sexta-feira, 16 de março de 2012
108. Além de ser esse entusiasta, ele desenvolveu
o conceito de hipertexto
sexta-feira, 16 de março de 2012
109. O termo referia-se a um acúmulo de de
informações ou escrita, unidas de forma não-
sequêncial, mas horizontal, que permitia ao
usuário buscar informações com maior
liberdade, gerando seu próprio conteúdo.
sexta-feira, 16 de março de 2012
110. Ted Nelson observava também os jogos de
video-game como uma experiência com alto
grau de imersão por parte do usuário
sexta-feira, 16 de março de 2012
111. ArpaNET
SRI, UCLA, UCSB, UU (1969)
sexta-feira, 16 de março de 2012
112. Baseada nos conceitos de hipertexto e das
pesquisas do projeto Xanadu, de Ted Nelson
sexta-feira, 16 de março de 2012
113. A primeira mensagem nodo a nodo entre a
UCLA e a SRI
sexta-feira, 16 de março de 2012
114. Outros produtos acabaram sendo
desenvolvidos, o correio eletrônico, por
exemplo
sexta-feira, 16 de março de 2012
115. Atari
Nolan Bushnell (1980)
sexta-feira, 16 de março de 2012
116. Os jogos de arcade, como o Pong, foram a
primeira forma de utilização exclusiva do
computador para puro entretenimento
sexta-feira, 16 de março de 2012
117. Pré-história
Visualizar a informática
Mudança de Paradigma
Interface gráfica atual
Internet e Ciberespaço
Guerra dos Navegadores
sexta-feira, 16 de março de 2012
118. Chip
Intel (1971)
sexta-feira, 16 de março de 2012
119. Possibilitou o nascimento da informática
pessoal, com o consequente
desenvolvimento da interface destinada ao
usuário
sexta-feira, 16 de março de 2012
120. Desktop e
WIMP
Alan Kay (1973)
sexta-feira, 16 de março de 2012
121. O Xerox Parc é considerado o primeiro
computador de uma interface gráfica
sexta-feira, 16 de março de 2012
122. A Rank Xerox teve muito pouca visão de
futuro ao não querer incorporar a nova
interface WIMP
sexta-feira, 16 de março de 2012
123. Lisa
Apple (1976)
sexta-feira, 16 de março de 2012
124. No projeto Lisa é que foi estabelecido a ideia
de interface amiga do usuário
sexta-feira, 16 de março de 2012
125. Viewtel 202
Birmingham Post and Mail (1979)
sexta-feira, 16 de março de 2012
126. Considerado o primeiro jornal do mundo
que tinha por base um suporte eletrônico
sexta-feira, 16 de março de 2012
127. Foi o primeiro jornal a ser lido em uma tela
e era considerado como um serviço
complementar do jornal.
sexta-feira, 16 de março de 2012
128. Era necessário um aparelho decodificador e
funcionava de Segunda a Sábado, doze horas
por dia
sexta-feira, 16 de março de 2012
129. Lisa
Apple (1983)
sexta-feira, 16 de março de 2012
130. Estabeleceu-se entre os usuários uma nova
forma de entender a interface gráfica; pela
primeira vez foram utilizados os menus
deslocáveis
sexta-feira, 16 de março de 2012
131. Como resultado, houve a recuperação da
linguagem pictográfica para a gestão da
informação e a sinalização do espaço de
informação
sexta-feira, 16 de março de 2012
132. O sucesso definitivo desse novo modelo de
interface chegou em 1984 com o Macintosh
sexta-feira, 16 de março de 2012
133. Macintosh
(Apple, 1984)
sexta-feira, 16 de março de 2012
134. Pré-história
Visualizar a informática
Mudança de Paradigma
Interface gráfica atual
Internet e Ciberespaço
Guerra dos Navegadores
sexta-feira, 16 de março de 2012
135. Um dos avanços mais importantes no que se
refere à história da interatividade é o
progresso das telecomunicações
sexta-feira, 16 de março de 2012
136. Habitat
Lucasfilm Games (1986 e 1988)
sexta-feira, 16 de março de 2012
137. Comunidades Virtuais acessíveis a milhares
de computadores pessoais unidos entre si via
modem.
sexta-feira, 16 de março de 2012
138. Nesse espaço as pessoas poderiam fazer
negócios, publicar jornais, assim como muitas
outras coisas que podem ser feitas em um
lugar real.
Bom, ao menos foi assim que foi registrado.
sexta-feira, 16 de março de 2012
139. O Habitat indica o caminho a ser seguido
pelas interfaces gráficas que têm a
responsabilidade de conectar muita gente
entre si por meio de comunidade virtuais,
com comunicação em tempo real.
sexta-feira, 16 de março de 2012
140. Habitat
(Lucasfilm Games, 1986)
sexta-feira, 16 de março de 2012
141. HyperCard
Bill Atkinson (1987)
sexta-feira, 16 de março de 2012
142. Desenvolvido como uma ferramenta com a
finalidade de buscar, administrar e guardar
todo tipo de informação e ligá-la entre si.
sexta-feira, 16 de março de 2012
143. Foi um dos primeiros sistemas hipermédia
de sucesso antes do surgimento do World
Wide Web.
sexta-feira, 16 de março de 2012
144. Curiosamente, Atkinson utilizou o ícone de
uma casa (home) para representar a tela
principal.
sexta-feira, 16 de março de 2012
145. World Wide
Web
Tim Berners-Lee (1989)
sexta-feira, 16 de março de 2012
146. Tudo começou quando Berners-Lee
escreveu um documento apresentando uma
proposta de gestão da informação
divulgando-a por meio de um sistema de
hipertexto.
sexta-feira, 16 de março de 2012
147. O advento da internet modificou
completamente a nossa forma de interagir.
Eram as ideias de Ted Nelson em estado
latente.
sexta-feira, 16 de março de 2012
148. Mosaic
Marc Andressen (1991)
sexta-feira, 16 de março de 2012
149. Considerado o primeiro navegador popular,
permitia passar de uma página para outra
clicando o mouse em uma série de ícones
sexta-feira, 16 de março de 2012
150. Mosaic 1.0
(NCSA, 1991)
sexta-feira, 16 de março de 2012
151. Pesquisas no
MediaLab
Muriel Cooper e Visible
Language Workshop - MIT
(1974 a 1994)
sexta-feira, 16 de março de 2012
152. Cabe ressaltar o resultado das pesquisas
ligadas à interface gráfica do grupo de Muriel
Cooper
sexta-feira, 16 de março de 2012
153. Muriel Cooper defendia em sua tese a ideia
de abster-se dos ícones, de forma que os
textos representassem a si próprios
sexta-feira, 16 de março de 2012
154. Seu projeto defendia que a forma mais
potente de se trabalhar com ideias era
recorrer a abstrações (símbolos tipográficos)
ao invés de se recorrer às metáforas
sexta-feira, 16 de março de 2012
155. Ela mostrou que as telas com informações
preenchidas com o códigos poderiam ser
preenchidas com tipografia elegante, cores
exuberantes e animações vivas.
sexta-feira, 16 de março de 2012
157. Netscape
Navigator 1.0
Netscape (1994)
sexta-feira, 16 de março de 2012
158. O Netscape foi responsável por consolidar o
público da internet.
sexta-feira, 16 de março de 2012
159. No seu painel de controle, podemos
observar os ícones setas, home e recarga.
sexta-feira, 16 de março de 2012
160. Os ícones encontrados nesses navegadores
são imagens oriundos de pictogramas que
utilizamos na sinalização tradicional
sexta-feira, 16 de março de 2012
161. O valor da visualidade adquire um novo
sentido: a escrita alfabética perde seu papel
mais importante de comunicar ideias para
esse símbolos
sexta-feira, 16 de março de 2012
162. Pré-história
Visualizar a informática
Mudança de Paradigma
Interface gráfica atual
Internet e Ciberespaço
Guerra dos Navegadores
sexta-feira, 16 de março de 2012
163. Internet
Explorer
1.0 e 2.0
Microsoft (1995)
sexta-feira, 16 de março de 2012
164. Guerra dos Browsers foi o nome dado a um
período (1995 a 1999) na história da
Internet no qual a Netscape perde a sua
liderança absoluta no mercado para a
Microsoft e o Internet Explorer.
sexta-feira, 16 de março de 2012
166. O navegador da Microsoft foi lançado em
agosto de 1995 e, em novembro já estava
sendo lançada a versão 2.0
sexta-feira, 16 de março de 2012
167. A tela enche-se de ícones em uma tentativa
de oferecer mais serviços e arrebatar o
mercado
sexta-feira, 16 de março de 2012
168. Mosaic 2.0
NCSA (1995)
sexta-feira, 16 de março de 2012
169. Essa versão inclui dois ícones a mais: Recarga
e Salvar Documento.
sexta-feira, 16 de março de 2012
170. Até esse momento era o navegador que
conseguia, com cinco ícones, a maior
concisão de ações
sexta-feira, 16 de março de 2012
171. Netscape
Navigator 2.0
Netscape (1996)
sexta-feira, 16 de março de 2012
172. Apresenta uma importante melhora ao
colocar dentro da janela de navegação um
ícone que levava a um programa de correio
eletrônico
sexta-feira, 16 de março de 2012
174. Internet
Explorer 3.0
Microsoft (1996)
sexta-feira, 16 de março de 2012
175. Essa versão do IE marcou eliminação dos
botões quadrados como conhecíamos
sexta-feira, 16 de março de 2012
176. Apesar desse avanço o Netscape continuava
com maior consistência gráfica em relação
ao conjunto de todos os ícones
sexta-feira, 16 de março de 2012
177. Mosaic 3.0
NCSA (1997)
sexta-feira, 16 de março de 2012
178. Os ditos 5 ícones agora pertenciam a uma
janela flutuante
sexta-feira, 16 de março de 2012
179. O Navegador Chrome retoma a interface do
Mosaic ao incluir uma lista mínima de ícones
e intergrar funções como uma página do
próprio navegador
sexta-feira, 16 de março de 2012