O documento discute a evolução da computação e da internet, desde os primeiros computadores capazes de armazenar e processar dados até as interfaces digitais modernas encontradas na web e em aplicativos. Também aborda como diferentes mídias, como pintura, fotografia e cinema, influenciaram o design de interfaces e a experiência do usuário nas telas digitais.

3. Vídeo
Did you Know 4.0

5. Internet
Web
Design
Webdesign
Mídia
Interfaces
Branding

6. A evolução da
computação está
ligada ao cálculo e
armazenamento.

7. O computador realiza operações. Essa
faceta de máquina de processar, calcular,
buscar resultados é fundamental para
pensarmos a Internet.

10. Computadores contém dados.
Computadores são organizáveis
em redes.
Internet conecta redes de
computadores com dados.

12. Professor at the Visual
Arts
Department, University of
California - San Diego
(UCSD).
2008

13. anterior
A tela é uma tecnologia muito
às possibilidades recentes que tomamos
contato hoje, da Renascença ao cinema do
século XX.

14.  A cultura visual do período moderno é
caracterizada por um intrigante fenômeno – a
existência de um outro espaço virtual, um outro
mundo tridimensional fechado por uma
moldura e situado dentro do nosso espaço
normal.

15. A moldura (frame)
separa dois espaços
absolutamente
diferentes que de
alguma forma
coexistem.

16.  Herança da pintura: pensar nas proporções e
nas nomenclaturas portrait e landscape usadas
hoje.

17.  A tela que disponibiliza uma imagem que muda
no tempo. A tela do cinema, tv, vídeo.
 Impõe uma outro protocolo de
visualização entre a imagem
e o espectador.

18.  Já aparecia na tela clássica, mas agora
aumenta a noção de “preenchimento
completo da tela pela
imagem”, descarte do espaço
“ao redor” da tela pelo foco que a mesma
requisita. Imersão.

19. A tela é agressiva.
Ela filtra o entorno.

20.  Esta relação-protocolo de visualização (tela
é desafiada
quer sua atenção total)
com a chegada da tela do
computador.

21.  Ao contrário da
fotografia e do cinema
(imagens estáticas, ou
imagens estáticas em
seqüência), vemos
pela 1ª vez uma
tela cuja imagem
pode mudar em
tempo real,
mostrando mudanças
no referente (posição
de objeto ou mudança
nos dados do
computador).

22. A tela de tempo real é
o terceiro tipo de tela, inaugurada pelo radar.

23.  Janelas coexistentes no lugar de uma
única imagem, princípio da Graphical
User Interface (GUI).

24.  A concentração da visualização deixa de ser
em apenas uma imagem.
 Blocos de dados de texto,
imagem, vídeo sugerem que a
tela do computador tem mais a
ver com design gráfico e janelas.

25.  A informação processada passa a ser
representada na tela de tempo real: lugar de
inserir e retirar informação de um computador.

26.  Aomudar
algo na tela,
mudamos
algo na
memória do
computador

27.  Clássica
Dinâmica
– Real time –
Interativa

30.  Sistema que faz a mediação
de um
usuário solicitante com um
sistema pré-programado que
busca atendar as demandas do primeiro.
 Duas áreas gostam de lidar muito com a
interface: Design + estudos de HCI
(Human-computer Interface)

31. Quando estamos diante de uma tela
clássica+dinâmica+realtime
+interativa provavelmente temos uma interface digital na
nossa frente.

32.  Criada em 1991 por Tim-Berners Lee
espaço hipertextual global e aberto, no qual
qualquer informação pudesse ser
acessada através de um único Universal
Document Identifier (Identificador
Universal de Documentos).
 A web fez pela Internet o
que o Windows fez pelo
computador, tornou a
interface “amigável”.

33. Os softwares chamados
navegadores, permitem que se
acesse os documentos HTML
que universalizam a forma de
“recepção” do conteúdo que se
desejasse fazer circular pela
Internet. Textos,
imagens,
sons, vídeos começam
a aparecer nas
interfaces digitais da
web.
O usuário ao requisitar uma
página, faz um “pedido” ao
servidor que a disponibilize.

34. GRIDS

35. O [uso do] grid é a
manifestação mais vívida
do desejo de ordenar
no design.
(Vinh e Boulton, 2007)

36. Ordem total na experiência?
Nunca terão.

37. Ainda assim, a web é o lado
mídia da Internet.
Mas...o que é mídia?

40.  QUANTO MAIS O HOMEM DESEJA ATINGIR
O REAL, MAIS “MÍDIAS” CRIA PARA CHEGAR
LÁ.
 TÉCNICAS, FORMAS E
SIGNIFICADOS SÃO LEVADOS,
REMIXADOS, ABSORVIDOS DE UMA MÍDIA
PARA O OUTRA. DA ANTIGA PARA A NOVA E
VICE-VERSA.

41.  Atos de remidiação:
 empréstimo,
arquivamento,
remodelagem,
absorção.

42.  As chamadas mídias digitais podem ser
melhor compreendidas pelas formas pelas
homenageiam,
quais
rivalizam e revisam a
pintura em perspectiva, fotografia, filme,
televisão e impresso. O que é novo sobre
as “novas mídias” seria a forma particular
com que estes aspectos são tratados entre
as mídias novas e antigas.

43. Tudo isso está
acontecendo nas
experiências que se
passam nas interfaces,
que carregam o lado
mídia da internet na
web, ou agora nos…

44. …APPs

45. Ou
touch
sites

46. Photo: Woodlywonderworks (Flickr)

47. Internet
Web
Design
Webdesign
Mídia
Interfaces
Branding

48. Não conte para os
colegas do curso de
Design, mas eu
vou resumir
8 semestres em
uma frase.

49. DESIGN É PROJETO.
#prontofalei

50. E se o publicitário
pensasse MENOS em
peça/formato/veiculação e
MAIS em projetar
experiência/engajamento
e conteúdo?

51. Mediadesign seria
projetar a
comunicação nas telas
pensando que a
experiência está
acontencendo antes,
durante e depois delas.

52. Objetivo disso tudo:
BRANDING
“Atividade de associação do
nome da marca à significados,
emoções, imagens que são
relevantes para o processo
decisório dos consumidores e
stakeholders em geral” (Keller e
Machado, 2006).

55. CASES, EXEMPLOS

61.  We choose the moon
 Let´s Colour (Dulux)

62.  Google TV
 IAd

63.  As telas digitais misturaram as mídias e
acrescentaram os softwares
 Projetar experiências é pensar para além da
zona de segurança dos menus, colunas e
“sacadinhas”.
 Projetar a mídia como participante da
experiência, se a web estiver junto, tudo bem.
 Acompanhar o Google Labs e não só os TTs
do Twitter ou o que disseram no festival de
publicidade de gramado.

64. Twitter/gusfischer
Slideshare.net/gusfischer
fischer.gustavo@gmail.com
Unisinos.br/design