Artigo científico realizado com o objetivo de relatar o Projeto Interdisciplinar do 3° semestre de Design Digital da Anhembi Morumbi do ano de 2010.

1. EXPERIMENTO MENTAL: APLICAÇÃO HIPERMIDIÁTICA
EXPERIMENTAL AUTORAL A PARTIR DAS TÉCNICAS DE RUAIRI
GLYNN
MENTAL EXPERIMENT: HYPERMEDIATIC APPLICATION COPYRIGHT
FROM THE EXPERIMENTAL TECHNIQUES RUAIRI GLYNN
Amanda Miyuki de Sá, Danilo Polo Cain, Douglas Ferreira Neto, Fábio Henrique Alves Will,
Patrícia Hitomi Nakazone1.
Mercia de Assis Albuquerque Prof.2.
RESUMO
Este artigo tem como objetivo relatar as etapas de produção de uma aplicação
hipermidiática online, autoral de caráter experimental, a partir dos conceitos presentes na produção
do artista contemporâneo Ruairi Glynn, exploramos os elementos sensoriais de suas obras.
Realizou-se uma pesquisa teórica referencial com o intuito de estudarmos as principais
características de Glynn e qual a sua relação com design, arte e tecnologia. Isto posto, optamos por
explorar os elementos sensoriais audiovisuais presentes nas obras de Glynn onde o interator
através de suas escolhas “inconsciente” determina a navegação do site. Neste artigo apresentamos
uma breve biografia do artista, um pequeno texto explicativo sobre design, arte, tecnologia,
hipermídia e hipertexto. Analisamos a obra Performative Ecologies destacando os principais
elementos sensoriais utilizados por Glynn na interação de sua obra em que a partir disso
determinarmos o conceito de criação explorando o efeito das cores e formas com base na teoria de
Kandinsky, utilizamos características do movimento minimalista e sons para a produção dos
1
Acadêmicos do segundo período do curso de Design – habilitação em Design Digital - Turma MA3 – 2010 / 3
E-mail: grupointerdigital@hotmail.com
2
Orientadora da Disciplina Projeto Interdisciplinar III do Curso de Graduação – Habilitação Design Digital – Turma
MA3, Universidade Anhembi Morumbi, São Paulo, 2010/3.

2. 2
layouts. Concomitante, foi desenvolvido a proposta projetual digital e gráfica, e o desenvolvimento
de um blog contendo as etapas de produção do projeto.
Palavras Chave: Hipermídia, Arte Digital, Hipertexto, Interação
ABSTRACT
This article aims to present the steps of producing a hypermedia application online,
copyright on an experimental basis from the concepts present in the production of the
contemporary artist Ruairi Glynn, we explored the sensory elements of his works. A theoretical
reference was done with the order to study the main features of Glynn and what it was the
relationship with design, art and technology.If that said, we chose to explore the audio-visual
sensory elements of Glynn’s works that the interactor through their "unconscious" choices
determines the site navigation. This article presents a brief biography of the artist, a short
explanatory text about design, art, technology, hypertext and hypermedia. We analyzed the work
Performative Ecologies highlighting the main sensory elements used by Glynn in the interaction of
his work who determine the concept of the creation by exploring the colors effects and shapes
based on the theory of Kandinsky, we use features of the minimalist movement and sounds
to produc the layouts. Concomitantly, it was developed a proposal digital and graphic projects,
and development of a blog containing steps of the production’s project.
Key Words: Hypermidia, Digital Art, Hypertext, Interaction
INTRODUÇÃO
O objetivo geral do Projeto Interdisciplinar III: Design, Arte e Tecnologia foi desenvolver
uma aplicação hipermidiática on-line, autoral de caráter experimental, a partir dos conceitos
presentes na produção do artista contemporâneo Ruairi Glynn através da exploração dos
elementos da hipermídia. Apresentamos neste artigo as etapas da produção do projeto. De início
apresentamos uma breve biografia do artista, analisamos as principais características da obra

3. 3
Performative Ecologies que utilizamos como referência para desenvolvermos o projeto,
destacando os elementos sensoriais tais como as cores que são aplicadas para atrair e manter a
atenção do interator de acordo com o seu interesse pela obra, relacionando os assuntos design,
arte, tecnologia, hipermídia e hipertexto. Essa relação que dá sustentação aos aspectos culturais,
estéticos, funcionais e de linguagem do projeto. Analisaremos também as teorias das cores e
formas de Kandinsky e o movimento artístico minimalista, ambos aplicados em nosso projeto, e
que são relacionados aos elementos audiovisuais e sensoriais das interações de Glynn.
1 DESIGN, ARTE E TECNOLOGIA
1.1 Design e/é Arte
De acordo com Mônica Moura (2007), “o design está relacionado à cultura e a produção
de linguagem, o que faz com que haja estreitas relações entre Arte e Design, assim como muitos
artistas podem ser designers e vice versa.”
Pode se dizer que o Design é a complementação da arte e da ciência.
“O designer é o profissional capaz de encontrar as soluções para os problemas estéticos
coletivos, e o usuário quando utiliza um objeto ou um produto projetado por um
verdadeiro designer, tem consciência da presença de um artista que trabalhou para ele,
melhorando as condições da vida humana e favorecendo a relação com o mundo da
estética.” (MUNARI apud MOURA, 1993, pag. 03)
Portanto pode-se dizer que o design e a arte caminham juntos afim de encontrar soluções
para os problemas estéticos coletivos melhorando as condições da vida humana.
1.2 Design é (também) Tecnologia
A tecnologia também estabelece uma estreita relação com o Design, assim como a Arte.

4. 4
De acordo com Diana Domingues (2002), as tecnologias numéricas são a passagem da
arte da representação para uma arte comportamental, onde o paradigma da representação da ideia
do belo é trocado pela ideia de um processo a ser vivido.
“Não há como se desenvolver um projeto sem a tecnologia, e também sem os
procedimentos de criação, invenção e de inovação que advém da arte. Mas um projeto não
é apenas tecnologia ou somente pura arte. É a integração da tecnologia e da arte que dão
sustentação aos aspectos culturais, estéticos, funcionais e de linguagem do projeto que
serão refletidas no produto que foi desenvolvido.” (MOURA, 2007, pág. 7)
Um projeto de design, portanto, é a combinação das tecnologias com a arte, pois é essa
combinação que dá sustentação aos aspectos culturais, estéticos, funcionais e de linguagem do
projeto podendo transformar a ideia do belo em ideia de um processo a ser vivido.
2 HIPERMÍDIA E HIPERTEXTO
2.1 Hipermídia
Pode se dizer que hipermídia é um conjunto de mídias interligadas entre si, permitindo ao
usuário interagir de forma dinâmica entre texto, imagem e vídeos.
Segundo Juliana Apolo (2007):
“A hipermídia une os conceitos de hipertexto e multimídia. Ou seja, um documento
hipermídia contém imagens, sons, textos e vídeos. Mas a principal característica da
hipermídia é possibilitar a leitura não linear de determinado conteúdo, ou seja, não ter
necessariamente início, meio e fim, e sim se adaptar conforme as necessidades do
usuário.” (APOLO, online)
Assim podemos compreender como hipermídia a leitura não linear de determinado
conteúdo conforme as necessidades do usuário podendo não ter necessariamente início, meio e
fim. Ele pode “passear” dentro de um site, por exemplo, escolhendo por onde navegar, decidindo

5. 5
o que verá primeiro na ordem que bem entender, ao contrário de um livro, em que precisamos
seguir uma linha de leitura.
2.2 Hipertexto
O termo hipermídia tem relação com o conjunto de elementos (informações) ligados entre
si. Esses elementos fazem parte da linguagem visual, sonora ou seqüencial. Cada um desses
elementos são os hipertextos. A navegação hipertextual, o hipertexto, é à base da navegação na
internet. (ROYO, 2008)
Então pode se dizer que a hipermídia é ligada ao um conjunto de hipertextos, que são
elementos da linguagem visual, sonora e seqüencial. Ao lermos um texto de um artigo na
internet, podemos ter um exemplo do que vem a ser o hipertexto. Muitos artigos possuem textos
“clicáveis” que nos levam a outros textos, portanto, podemos interromper a linearidade da leitura
para partirmos para outro tópico de leitura no momento que quisermos.
3 BIOGRAFIA DE RUAIRI GLYNN
Ruairi Glynn começou sua carreira artística como escultor e estudou design interativo na
Universidade Central Saint Martins de Arte e Design, em Londres, e no Instituto de Arte Digital e
Tecnologia, em Plymouth. É integrante do grupo Interactive Architecture, da Escola de
Arquitetura Bartlett, em Londres. Foi aluno do ciberneticista inglês Ranulph Glanville.
(COLOMBO, online).
Ficou conhecido no meio das artes digitais por suas obras interativas, como o
“Performative Ecologies Dancers” (2008), e o “Reciprocal Space” (2005).

6. 6
4 DESCRIÇÃO DA OBRA: PERFORMATIVE ECOLOGIES, DANCERS
Performative Ecologies Dancers, 2008. (Ruairi Glynn, online)
Ruari descreve sua obra como uma comunidade de robôs que, basicamente, se orienta por
meio de um software de reconhecimento de padrões faciais. As esculturas se engajam em formas
de comunicação não verbais, usando como argumentos simbólicos imagens dos observadores e o
tempo de permanência deles frente à suas câmeras. A ecologia do título refere-se ao sistema
formado por robôs e humanos que, juntos, perfazem a co-emergência de comportamentos, com
cada parte estimulando a outra de maneira provocativa, no sentido de manter e reconhecer um
relacionamento não determinado por processos deterministas. Os robôs, em dado momento,
executam um verdadeiro balé cibernético, como se estivessem retribuindo (e celebrando) a sua
comunhão com humanos. (Ruairi Glynn, online)
De acordo com Glynn, este projeto explora a natureza da interatividade e não apenas
reações pré-programadas, onde ele busca através de elementos sensoriais, como o
reconhecimento fácil, a utilização de luzes e cores e sons para chamar a atenção de seu publico.
Como dito anteriormente, o projeto Performative Ecologies, busca interagir através de
elementos sensoriais, assim decidimos trabalhar essa questão com recursos audiovisuais para
explorar a hipermídia utilizando-se das cores e as sensações que elas transmitem aliada aos
elementos sonoros.

7. 7
5 Conceito de Criação
De acordo com Glynn, o projeto Performative Ecologies Dancers explora a natureza da
interatividade, onde ele busca através de elementos sensoriais, como reconhecimento facial, a
utilização de luzes, cores e sons para chamar a atenção de seu publico. Isto posto, trabalhamos
com elementos audiovisuais para atrair a atenção do interator, utilizando-se de cores e formas
baseados nos estudos de Kandinsky que remetem algumas sensações no interator, luzes e efeitos
sonoros. A navegação do site será definida a partir do modo como o usuário interage com as
interfaces criadas, o Performative Ecologies faz uma menção do interesse de seu público e ao
identificar que seu espectador está se desinteressando pela sua performance ele busca novas
formas de atrair sua atenção. Em nosso projeto aplicamos este conceito na menção da
interatividade do usuário, por exemplo em uma de nossas interações de acordo com a velocidade
do mouse mudaria as formas e suas respectivas cores.
Nossos layouts são baseados nas obras de Kandinsky e o Minimalismo, usados como
referência iconográfica.
Figura: Obra “Composição VIII” de Kandinsky Figura: Obra minimalista de Mondrian
Fonte: Karvoka (Online) Fonte: Arte2rx (Online)

8. 8
Figura: Página do site 7 Up Lima Free Figura: Página do site Star Solution
Fonte: 7 Up Lima Free (Online) Fonte: Star Solution (Online)
O que complementa nossas referências seriam esses dois site, em que na primeira
usaríamos como base o seu estilo de navegação e no segundo as cores implantadas representando
a luz.
6 ESTUDOS DAS CORES
Serão de fundamental importância para o sucesso do site experimental um estudo das
cores, e o seu papel em relação à obra: Quais as sensações que as cores podem causar em quem
as vê? Qual o significado e sensação transmitida por cada cor? Foi com base nessas perguntas, e
sabendo que as cores são um importante recurso na obra Performative Ecologies Dancers (2008),
de Ruairi Glynn, que decidimos estudar o significado por trás das cores, e usá-las como uma
ferramenta para a produção do site experimental.
Decidimos usar Kandinsky dentro da Bauhaus como base, por ser uma referência
universal, tendo em mente a questão cultural onde certas cores podem ter significados opostos.
Como escreveu Kandinsky (1996) “a cor é [...] um meio para se exercer influência direta
sobre a alma. A cor é a tecla. O olho é o martelo. A alma é o piano de inúmeras cordas. Quanto
ao artista, é a mão que, com a ajuda desta ou daquela tecla, obtém da alma a vibração certa.”
“As cores quentes são as cores que tendem para o amarelo. Por receber influência do
amarelo, essas cores têm um movimento que se aproxima do expectador, possuindo uma
característica material. Já as cores frias tendem para o azul, com movimento que se

9. 9
distancia do espectador, possuindo uma característica imaterial.” (MILLER, 2006, pag.
173)
“O verde, fruto da mistura entre as duas cores que formam o contraste mais importante
para ele (o amarelo e o azul), representa a anulação, a ausência das forças citadas. Assim o
verde é uma cor em equilíbrio, transmite uma sensação de passividade e satisfação”
(MILLER, 2006, pag. 175)
Dito isso decidimos usar três cores principais, o azul, verde e amarelo, para assim
representar Equilíbrio, Calma e Agitação. (Ver no mapa do site)
7.1 As cores básicas e as formas geométricas.
“A origem dessas associações entre cores e formas geométricas abstratas está na busca de
Kandinsky por uma linguagem plástica autônoma, desvinculada da representação da natureza.”
(MILLER, pag. 178)
Ou seja, ele buscava associar forma e cores para dar origem a uma linguagem universal,
sem fronteiras culturais.
“O amarelo, cor irradiante e excêntrica para Kandinsky, correspondia naturalmente à
forma de um triângulo, figura angular e pontiaguda que avança em todas as direções. O
azul, por sua vez imaterial, essencialmente profundo, centrípeto e espiritual, encontrava no
currículo sua representação formal.” (MILLER, pag. 180)
Então, pode se dizer que depois de comprovado a teoria de Kandinsky, surgiu um padrão
entre forma e cor, do quadrado e vermelho, do triângulo e amarelo e do círculo e azul.
A partir desses dados, na produção dos layouts, decidimos como seria dada a transição de
um layout ao outro no site, por exemplo, quando o site estiver no “estado de espírito” calmo,
serão utilizadas formas mais arredondadas e de cor azul e uma transição mais lenta, por exemplo.

10. 10
7.2 Cores
A partir de Kandinsky destacamos algumas cores chaves para nosso site, o que ela
transmite e com que som ela combina, assim construindo nossa paleta de cores:
Cor Amarelo
Movimento Cor que se irradia, símbolo de fonte de luz, Kandinsky descreve um
movimento horizontal na direção do espectador com força impactante.
Simbolismo Kandisnky o vê como cor essencialmente material e terrestre.
Temperatura A mais quente das cores.
Som Musical Sons extremos agudos.
Estado de Loucura e o delírio.
espírito
Cor Azul.
Movimento Concêntrico, dirigido para seu próprio centro, ao contrário do amarelo, uma
cor absorvente, adstringente.
Simbolismo “o azul, ao exercer seu movimento em direção ao espírito e não ao corpo
físico, transportando o espectador para outra dimensão, mostra-se uma cor
imaterial, capaz de despertar no ser humano um profundo desejo de pureza e
de contato com o divino.” (MILLER, pag. 188)
Temperatura A mais fria das cores.
Som Musical Sons mais graves.
Estado de Paz e calma, mas também um estado de tristeza, à medida que o azul escurece
espírito em direção ao preto.
Cor Verde.
Movimento Ausência do movimento, ponto de equilíbrio entre as forças do amarelo e do
azul.
Simbolismo Representa uma passividade saudável, repleta de satisfação, a cor da natureza.
Temperatura Por se tratar de uma cor em equilíbrio não é nem quente nem fria.
Som Musical Soa como um violino, tocado em escalas medianas, sem extremos graves ou

11. 11
agudos, mas sons amplos e calmos.
Estado de Estado de satisfação e realização pleno.
espírito
Foi com base nessas informações que escolhemos a paleta que será usada.
Figura: Paleta de cores
Fonte: Proposta de desenvolvimento Projetual (2010)
Como as cores dos elementos geométricos e interativos do site (formas) se baseiam em
três cores para três estados de espírito: calma, agitação e equilíbrio, geramos uma paleta com o
mesmo princípio. Excluindo a cor preta (BG) que é uma cor neutra para a boa visualização das
outras cores, temos as cores vermelha, azul e verde, alternadas em seus três extremos, havendo
uma queda de valores: temos a cor natural escura, e gradualmente atingindo um tom mais claro.

12. 12
8 MINIMALISMO
Escolhemos para o nosso site experimental o estilo minimalista, pois iríamos utilizar um
numero limitado de elementos, formas geométricas e cores.
As obras minimalistas possuem um mínimo de recursos e elementos, em que usam poucas
cores e privilegia formas geométricas simples, repetidas simetricamente. O minimalismo
exerceu grande influência em vários campos de atividade do design onde produziam objetos
simples em sinônimo e sofisticação. (BATCHELOR, 2001)
Para não sair dessa linha, optamos pela escolha da fonte Helvética, em que é uma
tipografia simples e não iria interferir no conceito de criação.
Figura: Tipografia utilizada
Fonte: Proposta de desenvolvimento Projetual (2010)
9 DIAGRAMA DO SITE

13. 13
Figura: Diagrama do site.
Fonte: Grupo
10 MAPA DE NAVEGAÇÃO

14. 14
A primeira interface começa com uma linha
horizontal na cor azul e uma batida sonora
minimalista. O objetivo do usuário é manipular o
ponto central da mesma sendo que para cima a
cria-se um ângulo agudo e a cor muda para
amarelo com efeitos sonoros agudos e ruídos. Ao
puxar para baixo a linha transforma-se em um
semicírculo verde com sons graves.
Figura: Primeira interface
Fonte: Grupo
A troca das interfaces será controlada pela barra de
intensidade. Dependendo da intensidade da interação
do usuário com as interfaces a barra central irá se
mover em direção à cor resultante.
A velocidade de interação das interfaces também
será controlada por essa barra. Quanto mais próximo
da cor amarela, mais rápida será e quanto mais
Figura: Indicador
próxima ao verde mais lenta.
Fonte: Grupo
A segunda interface trará a tela inicialmente sem
nenhum objeto. Ao movimentar o mouse objetos
serão desenhados na tela de acordo com a
velocidade do cursor. Movimentos rápidos
desenharão objetos pontiagudos e amarelos na
tela, movimentos médios objetos retos e azuis e
movimentos lentos objetos com forma mais
orgânicas e puxados para a tonalidade verde.
Figura: Segunda interface
Fonte: Grupo

15. 15
A terceira interface trata-se de uma
composição que o usuário arrastará os
objetos pré existentes na tela (compostos de
formas geométricas, cada qual com uma cor)
até a área de composição, criando assim uma
nova composição à partir das formas já
existentes.
Figura:Terceira interface
Fonte: Grupo
A interação entre som e teclado estará
presente na interface número 4. Pressionado
algumas teclas, sons serão emitidos e as
barras verticais respectivas ao tipo de som
(amarelas param sons agudos, azuis para sons
suaves e verdes para sons graves) irão se
acender e mexer.
Figura: Quarta interface
Fonte: Grupo
A última tela mostra o texto legal e o nome
dos integrantes do grupo.
Figura: Última interface
Fonte: Grupo

16. 16
CONSIDERAÇÕES FINAIS
Entendemos que entre design, arte e tecnologia existe uma estreita relação pois um projeto
de design é a combinação das tecnologias com a arte afim de encontrar soluções para os
problemas estéticos coletivos melhorando as condições de vida humana, é esta combinação que
dá sustentação aos aspectos culturais, estéticos, funcionais e de linguagem do projeto podendo
transformar a ideia em um processo a ser vivido. Assim desenvolvemos uma aplicação
hipermidiática que consiste em uma criação não linear, ou seja, o conteúdo atende as
necessidades do usuário podendo não ter necessariamente um início, meio e fim.
Ao analisarmos as características das obras de Ruairi Glynn foi possível depreender que
ele se utiliza de elementos sensoriais como forma de interação aliado aos elementos visuais para
chamar a atenção do interator. Isto posto, optamos por utilizar cores que remetem as sensações
humanas fazendo com que o interator determine de forma “inconsciente” a navegação do site
uma vez que a hipermídia trata-se de uma leitura não linear de determinado conteúdo conforme
as necessidades do usuário, podendo não ter necessariamente início, meio e fim. Concomitante
desenvolvemos uma interface minimalista a fim de atrair a atenção do interator com elementos
simples para um melhor entendimento.
REFERÊNCIAS
APOLO, Juliana. Hipermídia? O que é isso? Uma mídia grande? 2007. Disponível em:<
http://www.julianaapolo.com/blog/?p=15 > Acesso em: 23 de maio de 2010.
ARTE2RX. Disponível em: <arte2rx.blogspot.com/2008/10/o-minimalismo.html>.Acesso em: 24
de abril de 2010.
BATCHELOR, David. Minimalismo. Editora Cosac Naify, 2001.

17. 17
COLOMBO, Grazziani. Emoção art.ficial 4.0 - A Emergência no Itaú Cultural. 2008. Disponível
em: < http://www.criativopunk.com.br/2008/07/02/emocao-artficial-40-a-emergencia-no-itau-
cultural/#more-200 > Acesso em: 22 de maio de 2010.
DOMINGUES, Diana. Criação e interatividade na ciberarte. Editora Experimento, 2002.
Emoção Artificial 4.0 (Emergência). Editora Itaú Cultural, 2009.
GLYNN, Ruairi. Performative Ecologies, 2008. Disponível em: <
http://www.ruairiglynn.co.uk/portfolio/performative-ecologies/ > Acesso em : 22 de março de
2010.
KANDINSKY, Wassily. Curso da Bauhaus, São Paulo, Editora Martins Fontes,1996.
KARVOKA. Disponível em: < http://kavorka.wordpress.com/2008/07/02/wassily-kandinsky-
composition-viii-1923/>. Acessado em: 21 de abril de 2010.
KUJAWSKI, Guilherme. A Arte Cibernética de Segunda Ordem. 2008. Disponível em: <http://
www.cibercultura.org.br/tikiwiki/tiki-read_article.php?articleId=65 > Acesso em: 22 de março de
2010.
LÉVY, Pierre. As tecnologias da inteligência. O futuro do pensamento na era da informática. Rio
de Janeiro: Ed. 34, 1993.
LÉVY, Pierre. Cibercultura. Editora 34 Ltda, 2008.
MEDINA, Mariana. Hipermídia, o que é isso? 2007. Disponível em:
<http://hipermidias.wordpress.com/2007/10/05/hipermidia-o-que-e-isso/ > Acesso em: 23 de
março de 2010.

18. 18
MILLER, Lilian. A Cor no Processo Criativo, 3ª edição. 2006. Editora: Senac São Paulo.
MOURA, Monica. Design, Arte e Tecnologia, 2007.
ROYO, Javier. Design Digital. Editora Rosari, 2008
SILVA, Jofre. Design, Arte e Tecnologia. 2006. CD-ROM.
STAR SOLUTION. Disponível em: < http://www.startaresolution.com/>. Acesso em: 20 de abril
de 2010.
UFSCAR. Disponível em: < http://www.ufscar.br/rua/img/s06/image5.jpg>. Acesso em: 5 de
abril de 2010.
7UP LIME FREE. Disponível em: < http://www.7uplimafree.com/>. Acesso em: 20 de abril de
2010.