O documento discute o design de interfaces digitais ao longo do tempo. Apresenta como as interfaces evoluíram de binário para linguagens de programação mais amigáveis ao usuário e como os princípios de design tornaram as interações mais intuitivas. Também mostra exemplos contemporâneos de design de interfaces criativas e interativas.

1. DESIGN &
CÓDIGO
Herbert Rafael Oi Futuro | jul/2010

2. DESIGN &
CÓDIGO
Por que discutir design?
Por que discutir interfaces?

3. DESIGN &
CÓDIGO
PARTE 1
A criação a partir do digital
PARTE 2
A recepção do design digital

4. DESIGN &
CÓDIGO
Padrões de design
X
Criatividade

5. DESIGN &
CÓDIGO
CONTEXTO
Criação do design a partir
de interfaces gráficas
computacionais

6. DESIGN &
CÓDIGO
BINÁRIO
LINGUAGEM
INTERFACE

7. DESIGN &
CÓDIGO
Nos anos 50 programava-se
transmitindo à máquina
instruções em código binário
através de cartões e fitas
perfuradas.

8. DESIGN &
CÓDIGO

9. DESIGN &
CÓDIGO
BINÁRIO
LINGUAGEM
INTERFACE

10. DESIGN &
CÓDIGO
Com os surgimentos de diversas
linguagens de programação
(assembler, Fortran) o código
binário deixou de ser o meio de
modificação e se constituiu a
base interna dos circuitos do
computador.

11. DESIGN &
CÓDIGO
A informática deixa de ser
binária até certo ponto.
A interface de trabalho para
desenvolvimento de aplicativos
é a linguagem.

12. DESIGN &
CÓDIGO
BINÁRIO
LINGUAGEM
INTERFACE

13. DESIGN &
CÓDIGO
Surgem os aplicativos que fazem
a ponte necessária entre
programação e resultado
objetivo na tela.

14. DESIGN &
CÓDIGO
A forma de uma interface define
as condições de atuação do
usuário e orienta a obtenção do
resultado desejado.

15. DESIGN &
CÓDIGO
INTERFACES
UTILITÁRIAS
X CRIATIVAS /
ARTÍSTICAS

16. DESIGN &
CÓDIGO
COREL DRAW X MAX MSP

17. DESIGN &
CÓDIGO
COREL DRAW X MAX MSP

18. DESIGN &
CÓDIGO
E SE JOGÁSSEMOS A INTERFACE FORA?

19. DESIGN &
CÓDIGO
Magnetic Ink
/
Robert Hodgin
VÍDEO http://www.flight404.com/
Vídeo
http://www.vimeo.com/615344

20. DESIGN &
CÓDIGO
Empires Decline / Os Lusíadas
/
Pedro Miguel Cruz
VÍDEO http://mondeguinho.com/master/
IMAGEM
Vídeo
http://www.vimeo.com/11506746

21. DESIGN &
CÓDIGO
Os Lusíadas

22. DESIGN &
CÓDIGO
/ John Maeda x Reebok Ventilator
IMAGEM John Maeda
http://www.maedastudio.com/

23. DESIGN &
CÓDIGO
John Maeda x Reebok Ventilator

24. DESIGN &
CÓDIGO
John Maeda x Reebok Ventilator

25. DESIGN &
CÓDIGO
John Maeda x Reebok Ventilator

26. DESIGN &
CÓDIGO
John Maeda x Reebok Ventilator

27. DESIGN &
CÓDIGO
/ Shiseido
IMAGEM John Maeda
http://www.maedastudio.com/

28. DESIGN &
CÓDIGO
Shiseido

29. DESIGN &
CÓDIGO
/
IMAGEM Lovebytes
VÍDEO Universal Everything
http://www.universaleverything.com/

30. DESIGN &
CÓDIGO
Lovebytes

31. DESIGN &
CÓDIGO
Lovebytes

32. DESIGN &
CÓDIGO
Lovebytes

33. DESIGN &
CÓDIGO
Lovebytes

34. DESIGN &
CÓDIGO
/
IMAGEM MTV Brasil
VÍDEO Dimitre Lima
http://dmtr.org/

35. DESIGN &
CÓDIGO
MTV Brasil

36. DESIGN &
CÓDIGO
MTV Brasil

37. DESIGN &
CÓDIGO
Birds!
/
Barbarian Group + Nervo
IMAGEM http://www.barbariangroup.com/
VÍDEO
Vídeo
http://www.vimeo.com/1252803

38. DESIGN &
CÓDIGO
Birds!

39. DESIGN &
CÓDIGO
Birds!

40. DESIGN &
CÓDIGO
Barba
/
3bits
VÍDEO http://www.3bits.net
Vídeo
http://www.vimeo.com/1219134
DESIGN DE
HIPERMÍDIAS
4 Mostra de Design
HERBERT RAFAEL //

41. DESIGN &
CÓDIGO
QUEM ESTÁ APTO A CRIAR SEM
A FACILIDADE DA INTERFACE?

42. DESIGN &
CÓDIGO
PARTE 1
A criação a partir do digital
PARTE 2
A recepção do design digital

43. DESIGN &
CÓDIGO
“ Quem quer que se defronte com
uma obra de arte, seja recriando-a
esteticamente, seja investigando-a
racionalmente, é afetada por seus
três componentes: forma
”
materializada, idéia e conteúdo.
Panofsky, E. O significado nas artes visuais.
São paulo: Editora Perspectiva, 2002

44. DESIGN &
CÓDIGO
“ Não há espectador
totalmente ‘ingênuo’.
Panofsky, E. O significado nas artes visuais.
São paulo: Editora Perspectiva, 2002
”

45. DESIGN &
CÓDIGO
Em geral o leitor não se importa
se a sua apreciação (ou
interpretação) está certa ou
errada.

46. DESIGN &
CÓDIGO
Na maioria das vezes ele não
compreende que sua própria
bagagem cultural contribui para
o objeto de sua experiência.

47. DESIGN &
CÓDIGO
Conscientemente ou não, o que
sempre vemos é uma tradução
de nossa própria experiência.

48. DESIGN &
CÓDIGO
A física moderna mostra que a
realidade depende basicamente
do ponto de vista do observador.
Quando o observador pára de
olhar o mundo, esse deixa de
existir.

49. DESIGN &
CÓDIGO
Platão tinha a concepção de que
todo conhecimento não passava
de recordação.

50. DESIGN &
CÓDIGO
Vários princípios básicos foram
pensados para a criação de uma
interface amigável que
possibilite uma maximização da
interação homem-máquina:

51. DESIGN &
CÓDIGO
- Representação diagramática
ou icônica dos comandos.

52. DESIGN &
CÓDIGO
- o uso do “mouse” que permite
ao usuário agir sobre o que
ocorre na tela intuitiva e
sensoriomotora.

53. DESIGN &
CÓDIGO
- os menus que mostram ao
usuário as operações que ele
pode realizar.

54. DESIGN &
CÓDIGO
- a tela gráfica de alta
resolução.

55. DESIGN &
CÓDIGO

56. DESIGN &
CÓDIGO

57. DESIGN &
CÓDIGO
A comunicação com a máquina,
a princípio abstrata e desprovida
de sentido para o usuário, foi
substituída por processos de
interação intuitivos, metafóricos
e sensório-motores.

58. DESIGN &
CÓDIGO
Embora, na maioria das vezes,
as interfaces possuem poucas
características intuitivas,
ocorrem dentro da indústria
informática, dois processos
convergentes:

59. DESIGN &
CÓDIGO
1- uma progressiva aculturação
da sociedade em relação aos
novos instrumentos e às novas
linguagens

60. DESIGN &
CÓDIGO
2- uma contínua tendência a
simplificar as modalidades de
interação com as máquinas

61. DESIGN &
CÓDIGO
Novos conceitos para o design
‣ Interatividade
‣ Variabilidade
‣ Inputs dinâmicos
‣ Múltiplos outputs

62. DESIGN &
CÓDIGO
IqFont
/
Pleaseletmedesign + Zac Lieberman
VÍDEO http://www.plmd.me/
VÍDEO
http://www.vimeo.com/5233789

63. DESIGN &
CÓDIGO
Mesa das Emoções
/
3bits
VÍDEO http://www.3bits.net/
VÍDEO
http://3bits.net/blog/mesa-interativa/

64. DESIGN &
CÓDIGO
Experience Information
/
Stefan Kuzaj + Jochen Winker
VÍDEO http://www.stefan-kuzaj.de/
Vídeo
http://www.vimeo.com/9468855

65. DESIGN &
CÓDIGO
/ Amphibious Architecture
VÍDEO Living Architecture Lab
http://www.thelivingnewyork.com/

66. DESIGN &
CÓDIGO
Amphibious Architecture

67. DESIGN &
CÓDIGO
Amphibious Architecture

68. DESIGN &
CÓDIGO
Amphibious Architecture

69. DESIGN &
CÓDIGO
Elle MacPherson Intimates.
/
MindShare/Destination Media Group
VÍDEO http://www.dmgus.com/
Vídeo
http://www.youtube.com/watch?v=kL-QXXycciQ

70. DESIGN &
CÓDIGO
Billboard Magazine
/
Almap/BBDO
IMAGEM http://www.almapbbdo.com.br/
VÍDEO
Vídeo
http://www.vimeo.com/11870207

71. DESIGN &
CÓDIGO
Billboard Magazine

72. DESIGN &
CÓDIGO
Billboard Magazine

73. DESIGN &
CÓDIGO
Billboard Magazine

74. DESIGN &
CÓDIGO
Monstermaker
/
SPTA
VÍDEO http://spta.de/
Vídeo
http://www.vimeo.com/10760387

75. DESIGN &
CÓDIGO
Debug
/
EDHV
VÍDEO http://www.edhv.nl/
Vídeo
http://www.vimeo.com/10889539

76. DESIGN &
CÓDIGO
OBRIGADO
hrafael@3bits.net
www.3bits.net