UNIVERSIDADE ANHEMBI MORUMBI
DESIGN DIGITAL
GANKO: SITE EXPERIMENTAL BASEADO EM RAQUEL KOGAN
DANIEL GALLONETTI - 08102932
DANILO BUCCIOTTI - 08200807
FABIANA FIGUEIREDO - 08200608
GIOVANNA SOARES - 08102508
ROGER NERY - 08200597
São Paulo
2009
2
UNIVERSIDADE ANHEMBI MORUMBI
DESIGN DIGITAL
GANKO: SITE EXPERIMENTAL BASEADO EM RAQUEL KOGAN
Trabalho apresentado como exigência parcial para a
disciplina Projeto Interdisciplinar, do curso Design Digital
da Universidade Anhembi Morumbi, sob a orientação do
Prof. José Minerini Neto e da Prof.ª Mércia de Assis
Albuquerque.
São Paulo
3
RESUMO
Projeto com tema em arte, design e tecnologia proposto pelo curso Design
Digital no terceiro período, Universidade Anhembi Morumbi. Demonstraremos
nesse artigo científico os estudos sobre imersão e interatividade obtidos na obra
Reflexão de Raquel Kogan. A partir desse estudo desenvolvemos o site
experimental “Ganko”, no qual exploramos o conceito de ambiente virtual e suas
regras (tendo como princípio o estudo de imersão e interatividade).
Palavras-Chaves: Raquel Kogan, Site Experimental, Arte e Tecnologia, Imersão e Interatividade
4
SUMÁRIO
Introdução..................................................................................................................5
1. A Artista.......................................................................................................6
2. Análise da obra escolhida .........................................................................7
3. Sobre arte e tecnologia ..............................................................................9
3.1 Imersão ...........................................................................................9
3.2 Interatividade................................................................................10
4. Proposta de hipermídia............................................................................13
5. O Site .........................................................................................................14
5.1 Conceito........................................................................................14
5.2 Referência Iconográfica ..............................................................15
5.3 Mapa de Conteúdo.......................................................................16
5.4 Mapa de Navegação.....................................................................19
5.5 Tipografia......................................................................................20
5.6 Paleta de Cores ............................................................................21
6. Conclusão .................................................................................................22
Bibliografia...............................................................................................................23
5
INTRODUÇÃO
O projeto da Interdisciplinar do curso design digital da Universidade Anhembi
Morumbi consiste na temática Arte, Design e Tecnologia dentro do qual estudamos a
artista Raquel Kogan. Ao longo desse artigo, você entenderá as razões e coleta de
informações referente à artista. Começando com a artista e analisando a obra que
escolhemos (Reflexão), desde a tecnologia aplicada até sua interpretação. Logo em
seguida propomos nosso problema, que consiste em coleta de informações sobre
Imersão e Interatividade, e o uso dessas técnicas. Após essa reunião de
informações fazemos a proposta de hipermídia, que consiste em como aplicamos a
idéia que coletamos em nosso projeto final. Por fim, concluímos o nosso artigo.
6
1. A ARTISTA
De acordo com o site do Itaú Cultural, Raquel Tasny Kogan nasceu em 1955
em São Paulo. É uma artista multimídia, gravadora e pintora. Formou-se em
Arquitetura e Urbanismo na Universidade Mackenzie.
Fig 1. Raquel Kogan (www.mannual.com.br)
Utiliza números (1, 2, 3, 4, etc.) em seus trabalhos, eles definem o espaço e a
profundidade em suas pinturas e gravuras. Já nos objetos, instalações e
intervenções, são utilizados como meio de interação. Iniciou sua série “Reflexão” em
2003, onde foi apresentada no Ciber@arte 2004, Festival de Novas
Tecnologias+Arte e Comunicação de Bibao, na Espanha. Mais tarde esse trabalho
foi desdobrada nas instalações “Reflexão#2” e “Reflexão#3”. Em 2004 desenvolveu
obras interativas como “Projeção”, no Paço das Artes, intervenção “Fotoarte”, em
Brasília, instalação “401 Lord Palace”, em São Paulo, e objetos interativos no 11º
Salão da Bahia, Salvador.
7
2. ANÁLISE DA OBRA ESCOLHIDA
Na obra Reflexão#3 (fig. 2) de Raquel Kogan, há uma grande visibilidade do
conceito de imersão e interatividade. Ela transmite através da reflexão em vidros, de
espelhos e água, uma sensação de infinito visual onde o público interage com
números e integra-se, imergindo dentro da obra, através de números que habitam o
espaço como uma contagem infinita.
Para Raquel Kogan, a obra Reflexão gera em cada pessoa uma interpretação
diferente, ou seja, cada interpretação vem da representação das coisas do mundo
que estão em nossa mente, e é isso que Raquel quer transmitir com sua obra,
explorando a mente das pessoas para diferentes significados através da imersão
delas mesmas na obra Reflexão.
A tecnologia utilizada no trabalho “Reflexão” é o uso, do computador que está
gerando as fileiras de números projetados em uma parede (fig 3). Os sensores
eletrônicos que auxiliam na captação de movimento (para que a velocidade dos
números seja aumentada ou diminuída) e o uso da projeção em frente à parede (tem
como propósito, quando a pessoa passar em frente à projeção, ela ser interferência
na obra. Sendo assim, a sua sombra interfere na projeção, porém a pessoa é
totalmente preenchida pela imagem).(fig. 4)
8
Fig 2. Reflexão #3 (http://apps.divirta-se.uai.com.br)
Fig 3. Reflexão
(http://bitedit.com.br/portfolio)
Fig 4. Reflexão
(http://bitedit.com.br/portfolio)
9
3. O PROBLEMA
3.1 IMERSÃO
Partindo do conceito de Daries (GRAU, 2007. p. 233), “Nenhum outro espaço
permite isso, nenhum outro meio de expressão humana”. O autor assim refez a
imersão, o conceito no qual começamos a elaborar o projeto de nosso trabalho.
Baseado na artista Raquel Tasny Kogan, brasileira nascida em 1955 em São Paulo
e formada em 1978 na Universidade Presbiteriana do Mackenzie em Arquitetura e
Urbanismo. Tendo como característica artística a utilização de uma tipografia
descaracterizada, ou seja, o uso de símbolos tipográficos deixa de ter seu valor de
leitura, ela propõe obras de arte que vão desde exposições com pinturas, até
ambientações como o nosso foco “Reflexão”. Antônio Malta Campos diz:
Raquel escreve, mas não dá pra entender nada. É claro! Seus textos
não devem ser lidos, e sim vistos. Uma caligrafia incompreensível,
solta, voltada para todas as direções, preta, branca, cinza, positivo no
negativo, negativo no positivo. [...] (CAMPOS, 98)
Utilizando como base elementos como imersão, começamos a elaborar nosso
projeto. Imersão na era digital tem como características fundamentais apelar não
somente para os olhos, mas também aguçar todos os sentidos humanos. Em seu
trabalho “Reflexão”, Raquel Kogan utiliza esses elementos, criando um ambiente
totalmente escuro, com o piso da sala refletindo a retro projeção de uma grande
parede preenchida com números aleatórios. Toda ambientada em preto, e números
brancos (que variam para tons de laranja e verde), esses números ficam enfileirados
na vertical, em um ritmo de sobe e desce que varia de acordo com sensores
acionados pela presença humana. Quanto mais pessoas no local, maior a
velocidade dos números. Assim, criando uma brincadeira de realidade virtual com o
espectador em sua obra.
Na realidade virtual, a interface é a chave para a obra de arte
midiática e define o caráter de interação e percepção. O efeito é uma
profunda sensação personificada que, no curso, da ‘imersão’, resulta
em um estado emocional ainda mais acentuado pela música.
(CAMPOS, 98)
10
3.2 INTERATIVIDADE
Decidimos desmembrar interatividade de imersão, que apesar de serem
conceitos próximos, possuem importâncias separada. No trabalho Reflexão#3 de
Raquel Kogan, a imersão é proporcionada por todos os fatores explicados
anteriormente, porém ela é intensificada através da interação. Além do grande painel
numérico, os elementos sonoros, visuais e afins, há também a interação com botões
que proporcionam a velocidade e ritmo dos números propostos. Sem a interação do
usuário, o painel fica inativo, sem ritmo nem velocidade. Logo, vimos que a imersão
é dependente da interatividade nesse aspecto. Podemos dizer que:
O conceito da interatividade é bastante antigo e, pelo menos
metaforicamente, toda obra de arte de qualidade traz em si o potencial
interativo. No entanto, com o advento de novas tecnologias, aparece
uma ênfase num determinado tipo de interatividade. No caso
específico da hipermídia, podemos pontuar que a obra em si só se
torna obra no momento em que ela é fruída pelo leitor. Enfim, a leitura
é elemento construtivo na realização do trabalho. (LEÃO, 2001. p. 34)
Interatividade pode ser entendida como o potencial de habilidade de certa
mídia que permite que o usuário exerça influência sobre o conteúdo, tendo uma
relação entre duas ou mais pessoas que, em determinada situação, adaptam seus
comportamentos e ações uns aos outros.(COSTA, 2003)
Para alguns, interatividade é sinônimo de interação, e para outros,
interatividade significa simplesmente uma “troca”. O conceito de interatividade é bem
mais recente que o conceito de interação, que defende a teoria científica de ser as
relações e influências mútuas entre dois ou mais fatores. Isto é, cada fator altera o
outro, a si próprio e também a relação existente entre eles.(COSTA, 2003)
A interatividade é mais do que só interação digital. Ela está na disposição ou
predisposição para mais interação entre os usuários, para mais participação e
intervenção. Não é apenas um ato, uma ação, e sim um processo, uma abertura
11
para mais comunicação, mais trocas e mais participação. A diferença entre
interatividade e interação estaria relacionada ao contato interpessoal, que se dá na
interatividade, já na interação seria um contato mediado.
Ela está relacionada a diversos atos do dia a dia de cada um, como uma
simples troca de e-mail, ou ao assistir a algum programa de televisão em que o
telespectador pode escolher através de ligações telefônicas o conteúdo do
programa, ou em um jogo de videogame em que o jogador executa comandos de
forma a agir como se fosse um dos personagens do jogo.
A interação trata-se de uma ação entre entes (inter + ação = ação entre), e
envolve uma ação entre vários sujeitos. Todos os dias experimentamos formas de
interação técnica e social:
- interação social: diz respeito à relação entre homem-homem, também
denominada simplesmente interação.
- interação técnica: refere-se à relação do homem-técnica, que se caracteriza
pela ação dialógica entre o homem e a máquina, ou a eletrônico-digital, que permite
ao usuário além de interagir com a máquina, também interagir com o conteúdo, ou
seja, a informação. (http://poseducacaoestatistica.vilabol.uol.com.br/interatividade.htm)
Existe uma classificação de interatividade em níveis, analisados em três
critérios: tempos de resposta, qualidade do resultado e complexidade do diálogo.
O tempo, quanto menor for à demora maior será o grau de interatividade, a
qualidade do resultado estaria relacionada à complexidade do sistema. E a
complexidade do diálogo se dá a partir da comparação com um processo de
conversão impessoal.
Referente à interação técnica (recorte de nosso tema), podemos dizer que:
A cultura da atualidade está intimamente ligada à idéia de
interatividade, de interconexão, de inter-relação entre homens,
informações e imagens dos mais variados gêneros. Essa interconexão
diversa e crescente é devida, sobretudo, à enorme expansão das
tecnologias digitais na última década. Com o forte crescimento da
12
oferta e consumo de produtos ditos de última geração, já não se pode
mais falar do futuro que bate às nossas portas, mas simplesmente de
alguns novos hábitos disseminados entre milhões de pessoas por todo
o mundo. [...] (COSTA, 2003. p. 8)
Olhando ao redor, no mundo que vivemos, não é difícil encontrar pequenas
janelas digitais que oferecem interação e atraem nossa atenção, seja para notícias,
avisos, diversão, recados de amigos. São elas os celulares, palmtops, terminais
eletrônicos de bancos, computadores, televisão digital , game boys, tamagochis e
outras coisas. A tecnologia evolui, e os usuários também. Cada vez mais exigindo
algum conteúdo pra determinada forma de interação, em constante mutação. Pode-
se dizer que um ambiente digital vive de nossa atenção e concentração ao que se
passa em seu interior.
[...] É bem verdade, no entanto, que uma das associações
mais comuns quando se pensa em ‘digital’ é com a idéia de
interatividade: ‘Se é digital, é interativo!’. Há uma ligação muito forte
no imaginário popular entre ‘digital’, de um lado, e tudo aquilo com o
que se possa interagir e manipular, de outro. É assim que aparelhos
digitais são anunciados como uma grande evolução porque, dentre
outras coisas, seriam interativos. [...] (COSTA, 2003. p. 17)
13
4. PROPOSTA DE HIPERMÍDIA
Como proposta de hipermídia, iremos reunir os conceitos propostos em
imersão e tentar ambientar em uma proposta digital. Por meio de programas como
Adobe Photoshop, Illustrator, Flash e After Effects, pretendemos criar um ambiente
totalmente único e que dê a sensação de imersão e interatividade. Entregar algo
pré-determinado e fazer com que o nosso surfer se sinta livre pra refletir e tirar o
conceito que desejar. Em alguns brainstorms, chegamos ao conceito de éticas de
internet. Todos os usuários sabem que possuem certas regras a serem seguidas no
meio digital, e pretendemos demonstrá-las de forma que o usuário possa manipulá-
la a sua maneira, porém arcando com as conseqüências. O conceito de imersão e
interatividade estaria incluso nessa proposta, e a “reflexão pessoal” também.
14
5. O SITE
5.1 CONCEITO DE CRIAÇÃO
O conceito que trabalharemos em nosso site são imersão e interatividade,
focando em “éticas” de web. Coisas que devemos ou não fazer, para que coexista
de uma forma saudável com o mundo digital. Criar situações com inúmeros clichês,
porém aplicado de forma dinâmica e por vezes com tom de brincadeira. A página
inicial do site será um ambiente de desktop semelhante ao de Windows, com menu
iniciar e com dois ícones iniciais: Internet e Lixeira. O ícone de Internet onde terão
alguns “sites” que fazem parte da rotina de um usuário comum, e dentro deles
algumas situações. Por exemplo:
Página do Gmail, você recebe uma corrente falando “Oi, meu nome é
Samara. Eu faria 14 anos hoje... se estivesse viva. Se você não reenviar isso pra 35
amigos seus, irei puxar seu pé ao anoitecer”. Nisso aparecem determinadas opções,
por exemplo, “reenviar para 35 amigos” ou “enviar pra caixa de spam”. Se você
enviar para seus amigos, várias “Samaras” irão invadir o seu desktop virtual, ficar
atrapalhando a navegação, até que dê a famosa tela azul do Windows e você
precisará reiniciar o pc (fim de jogo). Fazendo coisas que são ditas como “ético”,
você receberia acesso a novos sites, com novas situações. Ao final, você faria o
“download” de um arquivo, que iria pro desktop. E nela teriam detalhes do grupo,
conceito trabalhado, wallpapers, etc.
Os conceitos de Raquel Kogan estarão totalmente inseridos, a partir do que
obtivemos sobre imersão e interatividade. Como Reflexão#3 de Kogan necessita da
participação do visitante (possui um painel com botões, que ao apertá-los,
movimenta a parede de números), iremos fazer com que a proteção de tela do
computador seja uma parede numérica, caso a pessoa não interaja com o site por
determinado tempo. O processo de todo o trabalho pode ser acompanhado no blog
http://imersimbolo.wordpress.com
15
5.2 REFERÊNCIA ICONOGRÁFICA
Para a construção do site experimental Ganko, tomamos como referênciao
uso do site Jen.Lu, que ambiente um desktop com ícones que levam para algum
trabalho ou situação do mundo virtual.
Fig 5. Site de Jen Lu (http://jen.lu)
16
5.3 MAPA DE CONTEÚDO
Nosso site será uma representação de um desktop (área de trabalho) de um
computador. Nela haverá ícones representando aplicativos/programas como o
Internet Explorer e o bloco de notas. Para acessá-los será necessário clicar duas
vezes em cima de seu ícone.
Na home encontra-se um wallpaper, um menu inferior e os ícones para entrar
nas sessões "internet", "bloco de notas" e "player".
Na sessão "bloco de notas" o usuário encontra informações sobre o projeto
e uma explicação simples sobre a navegação. Esta sessão iniciará aberta no site,
havendo a possibilidade de fechá-la, como uma pasta.
Na sessão "player" o usuário pode escolher uma entre as 10 músicas
adicionadas para escutar enquanto navega no site. Enquanto ele estiver ouvindo,
um ícone representando o player ficará no menu inferior como um atalho rápido para
a sessão.
Na sessão "internet", logo ao entrar, o usuário é repreendido por uma
mensagem dizendo “Seu antivírus está desligado. Gostaria de iniciá-lo e atualizá-lo
agora?" contendo duas respostas: Sim e Não.
Ao clicar em "Sim" uma mensagem aparece dizendo que o usuário está
protegido e que ganhou uma parte de um arquivo "zip", para acessá-lo é necessário
mais 5 partes. Um ícone aparecerá na home. Ao clicar em "Não" algumas
animações na tela acontecerão, mostrando ao usuário que sua escolha não foi boa.
Após a resposta uma pasta se abrirá e nela haverá 5 ícones representando a
sessões "email", "twitter", "fórum", "orkut" e "msn". Ao clicar em uma das sessões o
usuário abrirá uma página falsa representativa no próprio site. Cada sessão tem
uma ação e reação diferente, dependendo da resposta que o usuário escolher.
17
Sempre que visitar uma sessão e escolher uma das respostas, não poderá acessá-
la novamente.
Sessão email: Uma página representativa do gmail aparece e o usuário terá
a opção de clicar em um email corrente, no caso a da "Samara". Ao clicá-la terá
duas opções: (1) mandá-la para todos os seus amigos, ou (2) enviá-la para a caixa
de spam. Ao clicar na primeira opção uma mensagem no canto inferior direito
aparecerá dizendo "Você recebeu 522 emails 'Corrente Samara' de seus amigos." e
várias ilustrações de "Samara" aparecerão na tela do site, impossibilitando a
navegação fácil e agradável. Ao clicar na 2 opção, uma mensagem aparecerá
dizendo que o usuário ganhou outra parte de um arquivo "zip", e que ele precisa das
outras partes para acessá-lo. Outro ícone aparecerá na home.
Sessão Twitter: uma página representativa do twitter aparece e o usuário
terá a opção de adicionar uma mensagem. Ao adicionar a primeira uma mensagem
aparecerá dizendo "Seus amigos não gostam quando você se transforma em um
narrador de jogo de futebol, ou comenta sobre todas as falas da novela." e o usuário
terá a opção de adicionar várias mensagens seguidas. Se o usuário o fizer e
adicionar várias mensagens, o número de "followers" (seguidores no twitter)
diminuirá gradativamente. Após a 10° mensagem um alerta aparece dizendo "Você
não tem mais seguidores". Se o usuário escolher por postar apenas mais uma vez,
ganhará uma parte do "zip".
Sessão Fórum: uma página representando um fórum aparecerá e o usuário
tem a opção de adicionar uma mensagem. Antes de escrevê-la uma mensagem
dizendo “O Fórum não permite gritarias e linguagens de internet”, e aparecerão as
opções (1) “postar em caixa alta e ‘miguxês’” e (2) “postar seguindo as normas da
língua portuguesa”. Se o usuário selecionar a opção 1, uma mensagem aparece
dizendo que foi banido do fórum. Se escolher a opção 2, ganha uma parte do "zip".
Sessão Orkut: uma página representando a rede de relacionamento Orkut
aparecerá e o usuário terá a opção de adicionar uma foto. Aparecerão duas opções,
18
(1) adicionar uma foto pornográfica e (2) adicionar uma foto normal. Se o usuário
selecionar a opção 1, uma mensagem aparecerá dizendo que ele tem novos
recados. Ao clicar na sessão de recados, varias mensagens ofensivas estarão
escritas e um link para uma campanha alertando sobre a pornografia caseira. Se
escolher a opção 2, terão mensagens agradáveis e divertidas na página de recados
e o usuário ganhará uma parte do "zip".
Sessão MSN: uma página representando o programa MSN aparece e o
usuário terá a opção conversar com um amigo. Aparecerá uma mensagem
perguntando: “Você está com muita pressa e precisa saber algo importante.” e
depois duas opções para selecionar: (1) “fazer a pergunta sem regalias” e (2) “falar
oi e ver se esta ocupado antes de fazer a pergunta”. Se o usuário selecionar a opção
1, uma mensagem aparecerá dizendo que seu amigo o bloqueou. Se escolher a
opção 2, seu amigo responderá educadamente a pergunta, e o usuário ganhará uma
parte do "zip".
Sessão “ZIP”: Ao final, se o usuário obtiver todas as partes a sessão ZIP
será liberada e aparecerá na home. Nela conterão todas as informações do trabalho,
e um manual explicativo em PDF de como ser ético e ter boas maneiras na web.
Caso o usuário não receba todas as partes, uma tela azul parecerá no site,
impossibilitando a navegação. Após alguns segundos uma mensagem dizendo que
o site é um trabalho acadêmico, e incentivando o usuário a navegá-lo outra vez, mas
agora optando pelas opções corretas. Um botão escrito “reiniciar” aparecerá, e ao
clicá-lo o site será recarregado.
Proteção de Tela: Caso não haja navegação no site durante alguns minutos,
uma representação de “protetor de tela” aparecerá. Números em fileiras ficarão
descendo e subindo de forma aleatória, representando o trabalho de Kogan
“Reflexão”.
19
5.4 MAPA DE NAVEGAÇÃO
20
5.5 TIPOGRAFIA
Virtual DJ
Bit Low
Bit Light
System
Verdana
Arial
21
5.6 PALETA DE CORES
A nossa paleta de cor trabalhada foi conceituada a partir dos princípios de
tecnologia e internet obtida. Coletando elementos do RGB, chegamos à seguinte
paleta de cor:
22
6. CONCLUSÃO
Coletando elementos de imersão e interatividade, concluímos os pontos que
queremos em nosso projeto de hipermídia. A nossa meta é criar um ambiente
baseado em éticas de web, porém que a pessoa tenha o direito de segui-las ou não,
e assim, junto de elementos como a interação, áudio e afins, transformá-lo em
imersivo. Um ambiente digital já possui essa barreira a ser rompida, afinal é um
ambiente que nos faz acreditar que essa ilusão é real. A curto modo: preparamos o
terreno e o usuário obtêm o seu conceito, singular e único. Não é uma resposta
automática ou exata, é um conceito pessoal, uma construção de idéia interior (como
pensado e aplicado no trabalho Reflexão de Raquel Kogan), porém com
conseqüências do mundo de web. Todos os usuários possuem certa noção do que
pode ser feito no mundo digital, e se fizer mau uso do mesmo, as suas
conseqüências. Queremos demonstrar a maioria dessas situações (e até reforçar
certas gafes), para que o usuário participe do site, aprendendo e reforçando
conceitos, porém de uma forma leve e agradável. Todo esse processo pode ser
acompanhado através do blog do grupo http://imersimbolo.wordpress.com.
23
BIBLIOGRAFIA
COSTA, Rogério da. Folha Explica: A Cultura Digital. 2° edição. São Paulo:
Publifolha, 2003.
DIAZ, Juan Enrique. Além dos meios e mensagens. Introdução à comunicação
como processo, tecnologia, sistema e ciência. 10° edição. São Paulo: Editora Vozes,
2002.
DOMINGUES, Diana. Criação e Interatividade na Ciberarte. 1° edição. São Paulo:
Editora Experimento, 2002.
FRUTIGER, Adrian. Sinais & Símbolos. 2° edição. São Paulo: Martins Fontes,
2007.
GRAU, Oliver. Arte Virtual. Da ilusão à imersão. 1° edição. São Paulo: Editora
Senac, 2007.
LEÃO, Lucia. O Labirinto da Hipermídia. 2° edição. São Paulo: Editora Iluminuras,
2001.
CAMPOS, Antônio Malta. 20x20x240. São Paulo, 1998. Disponível em:
<http://www.raquelkogan.com/20x20x240.html>.
Itaú Cultural. Disponível em:
<http://www.itaucultural.org.br/aplicExternas/enciclopedia_IC/index.cfm?fuseaction=a
artista_criticas&cd_ververb=3970&cd_item=15&cd_idioma=28555>.
http://www.raquelkogan.com
Top Related