Universidade Anhembi Morumbi Curso de Design Digital
Proposta de Design
o real e o imaginario na cidade de Sao Paulo Coordenação: Prof.ª Rachel Zuanon Orientação: Prof.ª Claudia Marinho e Prof. Nelson Somma Junior
Março de 2009
Creditos Arved Kloumberg Josias Silva Marcela Moreira MaurĂcio Rubio Nilson Benis Ricardo Maia Tatiana Trigueirinho
sumario TEMA TÍTULO
4 4 4
PERFIL DO PÚBLICO ALVO JUSTIFICATIVA
5
PEÇA DIGITAL
6
PEÇA GRÁFICA
7 8
ELEMENTOS PROJETUAIS Iconograf ia
8 16
Paleta de cores Tipograf ia
18
DESIGN DE NAVEGAÇÃO
19
DESIGN DE INTERAÇÃO
20 22
DESIGN DA INFORMAÇÃO 24
DESIGN DE INTERFACE DESIGN DE SOM TECNOLOGIA UTILIZADA BIBLIOGRAFIA DE CRIAÇÃO
26 27 28
TEMA Design e Literatura
TiTULO Sincrético: o real e o imaginário na cidade de São Paulo.
PERFIL DO PUBLICO ALVO Nossas peças estarão pautadas em um público composto por entusiastas de poesia, fotografia, arquitetura, designers, artes e interessados por roteiros urbanos, com curso superior em andamento ou completo e faixa etária entre os 22 aos 50 anos. É desejável que esses usuários possuam acesso à conexão de banda larga e se interessem por sites experimentais.
JUSTIFICATIVA Este projeto, estuda a construção autoral de um universo delirante, à partir do processo criativo de Roberto Piva, representado na obra Paranóia. Deste processo simbolizado pela paranóia, se observa a construção de um universo particular, governado pelas influências beat e surrealistas, que surge à medida que o poeta se relaciona com o espaço urbano, com o qual percebe em suas múltiplas formas, conversa, imprime, expressa e registra a sua realidade onírica combinada à ícones que surgem da marginalidade e dos paradoxos de sacro e profano, erotismo e drogas. Nos meios digitais, este diálogo entre o transeunte e o espaço urbano é definido e atualizado através da colaboração direta de cada interator, com o objetivo de promover o diálogo entre imagem e poesia, em sintonia com a força vital de cada interator que ao compartilhar suas fotos e pensamentos, faz desta cidade um organismo vivo, pulsante e delirante.
PEcA DIGITAL A peça digital, tem como objetivo, provocar no interator a experiência de viver uma realidade absurda (onírica) na cidade, através dos recursos de linguagem de hipermídia, na internet, oferecendo à seus interatores, “território livre e sem fronteiras de espaço, possibilidade de construção e atualização de elementos pelos usuários, valorização a experiência das outras pessoas como forma de construção de um ambiente mais “democrático” (LÉVY, 1999, p.185). A idéia de promover no interator uma experiência associada ao caos, sufoco e à transfiguração do real, divide a navegação em duas camadas, que simbolizam a expansão urbana e a transfiguração do universo coletivo em universo particular. Neste sentido, a navegação não disponibiliza de imediato, acesso à todas as interfaces da peça, se origina na interface que simboliza a cidade real e à partir dela se expande, transformando-a em loucura. As nove interfaces gráficas presentes na peça, discutem a relação de espaço e tempo, através do nomadismo, comportamento, poesia, diálogo entre poesia e fotografia e os paradoxos de drogas, sacro e profano, realidade e fantasia e erotismo com o objetivo de despertar no interator interesse pela participação colaborativa e construção de comunidades ou fóruns de discussão. Neste sentido, a linguagem visual das interfaces funde a influência beat, surrealista, elementos fotográficos, produzidos pelo grupo em roteiros pelo centro da cidades, e à poesia.
PEcA GRaFICA A peça gráfica é resultado dos roteiros fotográficos pelos pontos do centro da cidade, realizados pelo grupo em busca de matéria prima para construção do ambiente digital e tem como objetivo promover o diálogo entre a cidade virtual e a cidade real. O roteiro no formato de 13x20 cm, apresentado com dobra em vinco, formando um projeto “sanfonado”, com capa em papel cartão, impresso em 180g que reúnem diversas texturas. Apresenta uma coleção de fotográfica com diferentes pontos da cidade, onde cada integrante revela a sua relação pessoal com aquele lugar, sugerindo aos leitores, este tipo de colaboração no ambiente digital.
3
ELEMENTOS PROJETUAIS Iconograf ia
4
1
5 2
6 8
9
7
Iconograf ia
12
10
13
11 14
15
18
16
17
19
20
Iconograf ia
23
21
24
22
25
26
29
28
30
27
31
Iconograf ia
35 34
32
36 33
37
Creditos: 01 – h ttp://farm4.static.flickr.com/3560/337 3006247_810056876c_o.jpg 02 – http://www.cgtextures.com/texview2. php?id=6261&PHPSESSID=fe0dac86 92f6fd045c353b16521a2ebc 03 – http://www.cgtextures.com/texview2. php?id=6815&PHPSESSID=fe0dac86 92f6fd045c353b16521a2ebc 04 – http://farm4.static.flickr.com/3662/ 3373007915_bdfb608dda_o.jpg 05 – http://www.flickr.com/search/?q= Sao_Paulo%20___Brazil_by_ andreregitano&w=all&s=int 06 – http://www.flickr.com/photos/riccardomigliore/3268510376/ 07 – http://www.flickr.com/photos/33300779@N05/3369610371/ 08 – http://farm4.static.flickr.com/3574/337 3827828_67900ee086_o.png 09 – http://farm4.static.flickr.com/3642/33 73011059_9f92f053a0_o.jpg 10 – h ttp://farm4.static.flickr.com/3574/ 3373007263_cab36bdd68_o.jpg
38
11 – http://www.flickr.com/photos/cristinatakes/417018820/ 12 – http://farm4.static.flickr.com/3539/337 3824710_82614a2853_o.jpg 13 – Nilson Benis 14 – http://www.flickr.com/photos/ 33300779@N05/3370432752/ 15 – Tatiana Trigueirinho 16 – http://www.flickr.com/photos/ 33300779@N05/3369610731/ 17 – http://www.flickr.com/photos/33300779@N05/3369610825/ 18 – http://www.flickr.com/photos/ kms1590/2606808754/ 19 – http://farm4.static.flickr.com/3423/330 7160068_5e8c18190a_o.jpg 20 – Nilson Benis 21 – Nilson Benis 22 – http://www.flickr.com/photos/ trans-formation/144652353/in/set72157594215118712/ 23 – http://farm4.static.flickr.com/3430/33 73823818_47d7a1f3d0_o.jpg 24 – http://www.flickr.com/photos/henry0/2530521547/ 25 – http://scottwills.deviantart.com/art/ Big-Yellow-Taxi-2-12957812
26 – h ttp://veniamin.deviantart.com/art/ Deep-Unconsciousness-11552813 27 – h ttp://farm4.static.flickr.com/3599/33 73875564_3280902ec5_o.jpg 28 – h ttp://farm4.static.flickr.com/3575/ 3370579740_e07d07877d_o.jpg 29 – h ttp://serafinamoon.deviantart.com/ art/Escape-from-Reality-108324075 30 – http://fc45.deviantart.com/fs17/i/2007/ 225/a/9/Paranoia_by_EvilOnion.jpg 31 – h ttp://scottfacon.deviantart.com/art/ The-City-Painted-87919878 32 – h ttp://e-invoked.deviantart.com/art/ Dreamer-s-places-I-78369418 33 – h ttp://desire-reflex.deviantart.com/art/ HDR-I-104723721 34 – h ttp://guts80.deviantart.com/art/ Geometric-Reflection-45320532 35 – h ttp://farm4.static.flickr.com/3575/33 70579698_5f79eca09b_o.jpg 36 – h ttp://farm4.static.flickr.com/3475/ 3369757467_e5d3e017cf_o.jpg 37 – h ttp://farm4.static.flickr.com/3646/33 73823958_3419ae0070_o.jpg 38 – h ttp://farm4.static.flickr.com/3641/33 73824416_2d1b2177d3_o.jpg
Paleta de cores RGB: 20 140 100 CMYK: 85 20 75 6 HEX: 19743A
A paleta de cores foi retirada da iconografia presente no painel semântico, baseado em dois grupos: o espaço urbano e transfiguração do real (onírico). O espaço urbano terá predominância de tons monocromáticos de alto contraste; já no espaço onírico estará presente uma gama de cores saturadas, com o objetivo de provocar estímulos sensoriais nos interatores.
RGB: 25 116 58 CMYK: 78 0 50 55 RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 RGB: 35 65 150 CMYK: 100 85 5 0 HEX: 19743A
HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 RGB: 235 40 40 CMYK: 0 100 100 0 HEX: 19743A
HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 RGB: 240 150 40 CMYK: 0 50 100 0 HEX: 19743A
HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 RGB: 240 210 60 CMYK: 5 10 90 0 HEX: 19743A
HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 RGB: 220 165 140 CMYK: 10 40 40 0 HEX: 19743A
HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 RGB: 115 100 85 CMYK: 78 0 50 55 HEX: 19743A
HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 RGB: 245 245 245 CMYK: 3 2 2 0 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 RGB: 65 65 65 CMYK: 65 60 60 45 HEX: 19743A
HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 RGB: 15 15 15 CMYK: 75 70 65 80 HEX: 19743A
HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
RGB: 25 116 58 CMYK: 78 0 50 55 HEX: 19743A
Tipograf ia A peça online conterá três tipos de tipografia: Heattesnschweiler, Bisonprr e a Palatino. Cada fonte terá seu papel e hierarquia: a Bisonprr será utilizada nos títulos, por apresentar formas geométricas e fragmentação presente no espaço urbano, a Palatino, por ser uma fonte serifada, será usada na leitura de textos, pela sua qualidade na legibilidade, traços leves e contraste moderado. Já a Heattesnschweiler servirá para compor o título do projeto junto com a Palatino, representando a dualidade que permeia em nosso trabalho.
Heattesnschweiler
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Bison
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Palatino
abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ
DESIGN DE NAVEGAcaO B4
B1
A1 IN : PÁGINA INICIAL A1 : COMPORTAMENTO
A2
IN
A4
A2 : POESIA E FOTOGRAFIA A3 : NOMADISMO
A3
A4 : POESIA B1 : DROGAS B2 : REALIDADE E FANTASIA
B3
B2
B3 : EROTISMO B4 : SACRO E PROFANO
Conexão bidirecional. Na página inicial abrem-se quatros opções de navegação Conexão bidirecional. A cada porta acessada no nível 2, abrem-se mais duas portas.
Além da opção que o usuário terá de navegar para qualquer parte do site através do menu global.
Conexão bidirecional. No nível 3, o usuário terá a possibilidade de colaborar com o site e poderá voltar para os outros níveis.
DESIGN DE INTERACAO A interação da peça online pode ser divida em dois grupos: o primeiro está relacionado à participação colaborativa dos usuários, as interfaces trarão elementos que podem ser adicionados e modificados conforme a ação de outros interatores, neste caso quando a peça for ao ar haverão espaços que poderão ser preenchidos através da ação dos usuários como: aplicação de texturas e imagens em estruturas da metrópole, construção de elementos visuais relacionados com a cidade na forma de texto, e também a adição de novos roteiros para nosso banco de dados permitindo com isso a integração com outras plataformas na web via APIs como Google Maps, Flickr e Twitter. Esse primeiro grupo de interação dá conta de modificações na peça que serão permanentes e que poderão ser vistas por todos os usuários que acessarem o site após terem sido iniciadas.
C
B4
C4
A A2
Em um segundo grupo podemos dividir as interações que acontecerão apenas individualmente com o usuário de forma a dar acesso à outras interfaces, novos conteúdos e modificação de elementos gerais na peça. Seguindo nosso conceito as interfaces se iniciarão de forma mais usual, com elementos colocados de forma racional e lógica, não fugindo aos padrões de nossa realidade comum. Porém conforme o interator avança nas interfaces ele também muda as caracteristicas dos elementos fazendo com que o mundo usual se torne cada vez mais onírico, por conta disso haverão interações que modifiquem cores, texturas, formas, sons e outros elementos de composição e com isso permitindo que nossa discussão tenha diferentes pontos de vista à respeito de elementos e situações semelhantes.
B3
IN
A
C3
C1
MySQL (Interface Comportamento: conectividade) – Nessa interface traremos elementos de interação que visem proporcionar uma discussão mais abrangente sobre a multiplicidade de modos de vida que compõe o espaço urbano. Será possivel que os usuários modifiquem elementos da cidade principalmente através de imagens, assim, uma vez que esses elementos forem alterados, teremos uma integração com um banco de dados onde todas as imagens enviadas serão armazenadas e linkadas dinamicamente para que façam parte da peça permanentemente e sejam vistas por todos os novos usuários.
B1
A1
N
A4
C2
A3
3
B2
C3
Google Maps (Interface Nomadismo: conectividade) – Na discussão sobre o caminhar como processo criativo, queremos possibilitar que os usuários coloquem roteiros urbanos interessantes, isso possibilitará que a abrangencia dos lugares percorridos aumente e que também possamos conhecer locais que desconhecemos. Esses dados serão armazenados em uma base e serão resgatados e integrados com a API do Google Maps, proporcionando que os roteiros sejam visualizados, encontrados e compreendidos com maior facilidade.
C4 Flickr (Interface Fotografia: Conectividade) – A interface Fotografia, discutiremos a desfragmentação do espaço e a união de diferentes realidades. Para isso permitiremos que o ambiente seja composto por imagens diversas que estarão ligadas com os textos da interface Poesia. Resgataremos esses textos e com uma conectividade com a API do Flickr traremos pedaços de uma série de imagens resgatadas por meio de palavras chave que estarão fragmentadas mas formando uma unidade visual.
C2 Twitter (Interface Poesia: conectividade) – Essa interface terá elementos que se formam a partir de textos enviados pelos usuários. Esses textos ficarão armazenados em nossa conta do Twitter por meio de uma API e posteriormente resgatados tanto na própria interface Poesia com a construção de formas por utilizando os textos como textura, quanto maior a colaboração, mais estruturas da cidade serão compostas os textos enviados, e na interface Fotografia aparecerão como tags para conectividade com o Flickr.
DESIGN DA INFORMACAO
IN Interface inicial A Interfaces de nível intermediário B Interfaces de nível secundário
IN Interface Inicial – Discute a primeira impressão, a forma
como o interator percebe detalhes do espaço urbano e social em sua relação de tempo e o espaço.
A Comportamentos – Esta interface, discute os valores sociais
e morais deste tempo e deste espaço.
A Poesia – Esta interface, discute a fragmentação do discurso
poético, da ruptura com a métrica, dos fluxos de criatividade como representação direta deste tempo e espaço.
A Nomadismo – Esta interface discute o andar pelo espaço
urbano, pelo vies da influência intertextual de Rimbaud, Baudelaire e Walt Whitman.
A Poesia e Fotografia – Esta interface discute a forma como o
diálogo entre poesia e fotografia imprimem de forma intertextual as marcas do tempo e do espaço.
B Sacro e Profano – Esta interface, discute o modo como o
poeta se relaciona com o espaço, a sua crítica à forma como a religião doutrina um pensamento social.
B Drogas – Esta interface, discute a alteração da percepção do
mundo linear e usual em estado de vigília, combinada à exploração da fantasia e realidade.
B Realidade e Fantasia – Esta interface discute a
convergência do tempo e do espaço, da realidade e fantasia protogonizada por referências intertextuais que se misturam à cidade.
B Erotismo – Esta interface discute a formação das imagens
poéticas à partir da aproximação de realidades diferentes.
DESIGN DE INTERFACE O caminhar na cidade como processo criativo. As experiências e sensações que acontecem na cidade transformando-se em fonte de inspiração e propicia a troca entre outros interatores. Na representação visual desta cidade prevalecerão as formas geométricas e o uso exagerado de perspectiva com diferentes pontos de fuga. A textura servirá para fundir visualmente a cidade e seus habitantes, os tornando em um mesmo organismo vivo e pulsante.
Interface inicial composta pela repetição de formas geométricas dispostas de maneira desordenada e a sobreposição de texturas diversas captadas na cidade. As cores serão, em grande parte, composta por tons cinzas e baixa saturação, exceto nas áreas onde o interator provocar a metamorfose para o universo onírico.
Aqui, elementos antagônicos se aproximarão e a construção de um universo particular se baseará, principalmente, pelo uso da linguagem poética e o desapego com a racionalidade.
Início transição entre o universo coletivo [real] e o particular [onírico]. As cores ganham mais saturação e as formas passam a ser mais orgânicas e de aspecto volátil.
Os vídeos serão amplamente utilizados nesta área onde discutiremos a relação entre poesia, como linguagem verbal, e fotografia, como linguagem visual, através da linguagem cinematográfica e a utilização de cortes abruptos.
Área da interface que discutirá a poesia. Os textos deixam de ser meramente informacional para ganhar forma e se fundir com a paisagem urbana tornando-se um elemento vivo e passivel de interação e modificação pelos interatores.
DESIGN DE SOM Este projeto tem como principal objetivo levar o interator a imersão num universo particular delirante, usando sons específ icos, de maneira a climatizá-lo e orientá-lo dentro de cada ambiente da peça on-line. Usaremos trilhas sonoras, efeitos musicais e sons autorais capturados através das nossas caminhadas pela cidade. Com isso dividiremos o projeto de som nas seguintes camadas: 1ª Camada: INTERAÇÃO Em primeiro plano estarão os sons provenientes da interação do usuário que servirão para dar feedback às ações do interator. 2ª Camada: AMBIENTAÇÃO A camada de imersão servirá para complementar os efeitos visuais e de interação nas interfaces. Serão utilizados efeitos sonoros para aumentar a sensação de desconforto que queremos despertar no interator através do uso de ruídos das grandes cidades, como: buzinas, sirenes, multidão, vendedores ambulantes, pregadores de praças públicas, manifestações, carros, trens, construções, comércio e escolas. E quando o interator estiver no universo particular usaremos sons distorcidos, ecos e contratempos para causar sensação de delírio e alucinação no interator. 3ª Camada: CONTEÚDO A camada de ambientação consiste em situar o espaço em que o interator se encontra. Para isso, na representação da metrópole usaremos fragmentos de trilhas sonoras de Miles Davis e John Coltrane, o jazz que estava presente quando Roberto Piva encontrava seus amigos para discutir poesias e na inspiração do ritmo na sua escrita. Na representação do universo particular vamos usar fragmentos do compositor Cliff Martinez e o instrumental de Battles, para retratar um ambiente misterioso com ruídos e distorções. Também vamos utilizar a narrativa de Piva dos poemas Paranóia para auxiliar no conteúdo informacional.
TECNOLOGIA UTILIZADA Adobe Premiere CS4 – Edição dos vídeos que serão capturados em nossas caminhadas pela cidade. Adobe Flash CS4 – Criação das interfaces interativas da peça online. Adobe After Effects CS4 – Tratamento dos vídeos capturados e também para a criação de animações. Adobe Dreamweaver CS4 – Criação das páginas em HTML e também para alguns recursos de javascript como Google Analytics e SWF Object. Adobe Illustrator CS4 – Criação de elementos vetoriais para utilização na peça gráfica e digital. Adobe InDesign CS4 – Utilizado para o layout e diagramação dos documentos gráficos. Adobe Photoshop CS4 – Criação, manipulação e tratamento de imagens na peça online, gráfica e nos cartazes. 3D Studio Max 9 – Criação de objetos em 3D que serão utilizados nas interfaces. Adobe Lightroom 2 – Tratamento de fotografias que serão captadas nas caminhadas do grupo pela cidade. Adobe Audition 1.5 – Criação, manipulação e tratamento de sons utilizados na peça online.
BIBLIOGRAFIA DE CRIACAO CASTRO, Ruy; SEIXAS, Heloisa. Tempestade de ritmos: jazz e música popular no século XX. São Paulo: Companhia das Letras, 2007 deviantART. Disponivel em: http://www.deviantart.com. Acesso em 20 jan de 2009. GUILLERMO, Alvaro. Design do virtual ao digital. Rio de Janeiro: Rio Books, 2002. LEMOS, André. Janelas do Ciberespaço - Comunicação e Cibercultura. Sulina: EDUFBA, 2004 LÉVY, Pierre. Cibercultura. São Paulo: Editora 34, 1999 MOURA, Mônica. Design de Hipermídia: dos princípios aos elementos. São Paulo: NMD e Ed. Rosari, 2007