Proposta de Design by Atitud

Capa_PD_Sincretico_Anexos.indd 2-3

19.06.09 18:23:32

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

Junho de 2009

CrĂ&#x2030;ditos Arved Kloumberg Josias Silva Marcela Moreira MaurĂcio Rubio Nilson Benis Ricardo Maia Tatiana Trigueirinho

SUMÁrio TEMA TÍTULO

PERFIL DO PÚBLICO ALVO

JUSTIFICATIVA

PEÇA DIGITAL

PEÇA GRÁFICA

ELEMENTOS PROJETUAIS

Iconografia

Paleta de cores

Tipografia

DESIGN DE NAVEGAÇÃO DESIGN DE INTERAÇÃO DESIGN DE INTERFACE DESIGN DA INFORMACAO DESIGN DE SOM TECNOLOGIA UTILIZADA BIBLIOGRAFIA DE CRIAÇÃO

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 através do real e imaginário da cidade de São Paulo, a partir do processo criativo de Roberto Piva, representado no livro Paranóia. Com isso, se observa que as formas de associações é resultado do modo como o poeta relaciona o seu processo criativo em meio ao contexto social urbano da cidade à sua construção poética, que movimenta a noite, o erotismo, os ícones que surgem da marginalidade, as drogas, a religião, as formas, as cores e tantas outras imagens que dão sentido à narrativa. Neste sentido, o objetivo deste projeto é mostrar uma nova forma de ver e sentir o espaço urbano através do imaginário poético, de modo que seja, no meio digital ou impresso, possível reconhecer fragmentos do imaginário individual e coletivo da cidade de São Paulo.

PEÇA DIGITAL A peça digital busca aproximar a relação entre o real e o imaginário decorrente da nossa experiência nômade pela cidade. Para isto, os lugares como Largo do Arouche, a Rua Augusta e a igreja da Santa Cecília foram escolhidos em acordo ao roteiro traçado entre um poema e outro do livro Paranóia, assim como a temática que envolve o livro. A construção visual das interfaces, baseada no método paranóico crítico de Salvador Dali, foi projetada a partir de fragmentos fotográficos dos lugares citados no livro, que possuem dupla representação com o objetivo de aproximar realidades opostas e assim estimular no interator o interesse em explorar a peça. A navegação espacial acontece conforme o interator reconhece nas imagens e textos, meios de locomoção e interação, que servem como ponte entre realidades opostas. Neste sentido, o que determina a expansão da narrativa é a exploração das interfaces. Já a interação da peça, busca estabelecer o diálogo entre o real e o imaginário através dos elementos poéticos observados na relação existente entre o processo criativo e a construção poética do livro Paranóia.

PEÇA GrÁFiCA Baseados na experiência nômade de Roberto Piva e na combinação de poesia e fotografia da obra Paranóia,, apresentamos o “Roteiro Sincrético”. No formato de 12x20 cm, com dobra em vinco, formando um projeto “sanfonado”. O resultado deste misto de cidade e poesia, é uma coletânea autoral de fragmentos do universo simbólico da cidade de São Paulo, onde cada integrante do grupo apresenta a sua percepção da cidade através do dialogo entre texto e imagem.

ELEMENtos ProJEtUAis iconograf ia

6 8

iconograf ia

11 14

iconograf ia

35 34

36 33

Creditos: 01 – http://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 – http://farm4.static.flickr.com/3574/ 3373007263_cab36bdd68_o.jpg

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 – http://veniamin.deviantart.com/art/ Deep-Unconsciousness-11552813 27 – http://farm4.static.flickr.com/3599/33 73875564_3280902ec5_o.jpg 28 – http://farm4.static.flickr.com/3575/ 3370579740_e07d07877d_o.jpg 29 – http://serafinamoon.deviantart.com/ art/Escape-from-Reality-108324075 30 – http://fc45.deviantart.com/fs17/i/2007/ 225/a/9/Paranoia_by_EvilOnion.jpg 31 – http://scottfacon.deviantart.com/art/ The-City-Painted-87919878 32 – http://e-invoked.deviantart.com/art/ Dreamer-s-places-I-78369418 33 – http://desire-reflex.deviantart.com/art/ HDR-I-104723721 34 – http://guts80.deviantart.com/art/ Geometric-Reflection-45320532 35 – http://farm4.static.flickr.com/3575/33 70579698_5f79eca09b_o.jpg 36 – http://farm4.static.flickr.com/3475/ 3369757467_e5d3e017cf_o.jpg 37 – http://farm4.static.flickr.com/3646/33 73823958_3419ae0070_o.jpg 38 – http://farm4.static.flickr.com/3641/33 73824416_2d1b2177d3_o.jpg

Paleta de cores RGB: 23 139 98 CMYK: 83 0 30 46 HEX: 178b62

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: 21 129 121 CMYK: 83 0 6 50 RGB: 25 116 58 HEX: 158179 CMYK: 78 0 50 55

RGB: 23 139 32 CMYK: 83 0 77 46 HEX: 178B20

RGB: 81 217 36 CMYK: 63 0 83 15 HEX: 51D924

HEX: 19743A

RGB: 39 33 174 CMYK: 77 81 0 32 HEX: 2721AE

RGB: 73 31 164 CMYK: 55 81 0 36 RGB: 36 61 151 CMYK: 76 60 0 41 HEX: 491FA4

HEX: 243D97

RGB: 212 49 22 CMYK: 0 77 90 17 HEX: D43116

RGB: 246 89 25 CMYK: 0 64 90 3 RGB: 235 36 39 CMYK: 0 85 83 8 HEX: F65919

HEX: EB2427

RGB: 219 154 26 CMYK: 0 30 88 14 HEX: DB9A1A

RGB: 244 193 29 CMYK: 0 21 88 4 RGB: 242 152 41 CMYK: 0 37 83 5 HEX: F4C11D

HEX: F29829

RGB: 219 208 44 CMYK: 0 5 80 14 HEX: DBD02C

RGB: 33 101 174 CMYK: 81 42 0 32 HEX: 2165AE

RGB: 212 22 120 CMYK: 0 90 43 17 HEX: D41678

RGB: 47 199 252 CMYK: 81 21 0 1 HEX: 2FC7FC

RGB: 300 90 97 CMYK: 1 90 0 3 HEX: F419F6

RGB: 219 105 26 CMYK: 0 52 88 14 HEX: DB691A

RGB: 255 89 39 CMYK: 0 65 88 0 HEX: FF591E

RGB: 220 244 49 CMYK: 10 0 80 4 RGB: 242 212 61 CMYK: 0 12 75 5 HEX: DCF431

HEX: F2D43D

RGB: 219 172 44 CMYK: 0 21 80 14 HEX: DBAC2C

RGB: 255 180 52 CMYK: 0 29 80 0 HEX: FFB434

RGB: 240 191 139 CMYK: 0 21 42 6 HEX: F0BF8B

RGB: 230 194 134 CMYK: 0 15 42 13 RGB: 217 166 137 CMYK: 0 24 37 15 HEX: DEBC81

RGB: 240 161 139 CMYK: 0 33 42 6 HEX: 74 27 23

HEX: D9A689

RGB: 139 120 92 CMYK: 0 14 34 46 HEX: 8B785B

RGB: 255 156 148 CMYK: 0 39 42 0 HEX: FF9C94

RGB: 129 116 85 CMYK: 0 10 34 50 RGB: 116 98 82 CMYK: 0 16 29 55 HEX: 817455

HEX: 746252

RGB: 220 201 198 CMYK: 0 9 10 14 HEX: DCC9C6

RGB: 139 107 91 CMYK: 0 23 34 46 HEX: 8B6B5B

RGB: 245 227 220 CMYK: 0 7 10 4 RGB: 243 243 243 CMYK: 0 0 0 5 HEX: F5E3DC

RGB: 220 198 209 CMYK: 0 10 5 14 HEX: DCC6D1

HEX: F3F3F3

RGB: 88 80 79 CMYK: 0 9 10 66 HEX: 58504F

RGB: 78 72 70 CMYK: 0 7 10 70 RGB: 65 65 65 CMYK: 0 0 0 75 HEX: 4E4846

HEX: 414141

RGB: 51 47 46 CMYK: 0 9 10 80 HEX: 332F2E

RGB: 51 47 46 CMYK: 0 7 10 80 RGB: 14 14 14 CMYK: 0 0 0 95 HEX: 332F2E

HEX: 0EOEOE

RGB: 51 46 48 CMYK: 0 10 5 80 HEX: 332E30

RGB: 217 156 142 CMYK: 0 28 34 15 HEX: D99C8E

RGB: 88 79 84 CMYK: 0 10 5 66 HEX: 584F54

RGB: 115 103 115 CMYK: 0 10 0 55 HEX: 736773

RGB: 255 229 255 CMYK: 0 10 0 0 HEX: FFE5FF

RGB: 166 149 166 CMYK: 0 10 0 35 HEX: A695A6

Tipograf ia A peça online conterá quatro tipos de tipografia: Heattesnschweiler, Bisonprr, Palatino e a Futura. 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

Acrescentamos a família da tipografia Futura pela quantidade de variações de estilo e por garantir legibilidade aos textos.

Futura Light

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Futura Book

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Futura Medium

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Futura Heavy

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Futura Bold

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ Futura Extra Bold

abcdefghijklmnopqrstuvwxyz ABCDEFGHIJKLMNOPQRSTUVWXYZ

DESIGN DE NAVEGAÇÃO No projeto de navegação procuramos maneiras de estimular o interesse do interator em explorar o espaço onde se encontram as interfaces de maneira simples e de fácil assimilação. Para isso foram desenvolvidos dois recursos distintos que podem ser definidos como navegação global e navegação através de hiperlinks e hipertexto. O movimento do interator dentro do ambiente digital é determinado pela posição do mouse na tela, esse movimento é limitado por uma área correspondente ao conteúdo presente em cada interface para que o interator não se perca. Com o clique do mouse, o interator é levado até a interface escolhida. No início todas as interfaces têm somente um fragmento de seu conteúdo revelado, conforme o usuário interage com a peça as interfaces vão se expandindo. Tanto dentro, quanto fora da interface, o interator tem a possibilidade de navegar pelos três eixos. Os eixos X e Y são determinados pela posição do mouse e o eixo Z pelo scroll do mouse. Para voltar ao ambiente inicial, basta clicar em qualquer área fora da interface. Além disto, para ir de um ambiente a outro, a peça dispõe de três tipos de hyperlinks: texto, imagem e vídeo. A sinalização dos textos e imagens é feita pela alteração no ponteiro do mouse e na saturação das cores do objeto. Os vídeos que servem como hyperlinks também têm uma alteração no ponteiro do mouse e se iniciam com o mouse over.

Navegação Global Navegação por Hiperlinks e Hipertexto

VG Visão Geral 1 Sacro e Profano 2 Erotismo 3 Poesia e Fotografia

4 4 Nomadismo 5 Drogas 6 Comportamento

Design de interação O projeto de design de interação, busca fortalecer os elementos poéticos observados na relação existente entre o processo criativo e a construção poética do livro Paranóia. Para isto, a experiência nômade no contexto urbano, com ênfase nos detalhes que passam desapercebidos, a construção de linguagem simbólica e a escrita automática, contam com o apoio de diferentes tecnologias. Neste sentido, para aproximar as realidades apostas que foram encontradas nas caminhadas pela cidade, cada interface é separada em vários blocos de informações que contam com o recurso de rotação dos fragmentos em 180º para que o interator possa observar e comparar as discussões apresentadas. O site também conta com recursos voltados a conectividade com outros sites, para isto a API do Google Maps, foi utilizada com o objetivo de proporcionar ao interator a possibilidade de compartilhar um roteiro pessoal dentro da cidade de São Paulo. No roteiro, o interator pode incluir as coordenadas, a descrição de sua experiência e fotografias que são armazenadas em um álbum que leva o nome do roteiro, no site de fotografias Flickr, onde existe o perfil do Projeto Sincrético. As palavras da descrição dos roteiros são aproveitadas para compor o ambiente na interface Poesia. Cada palavra é mostrada de modo espacial e podem ser clicadas separadamente. A interação acontece quando a palavra é utilizada como tag e uma imagem vinda do Flickr em seu verso é mostrada. Além disto, as palavras clicadas são concatenadas com o objetivo de gerar uma frase. Esta frase que repete os moldes da escrita automática, assim como acontece no Paranóia, é enviada ao Twitter do projeto assim que o interator sai da interface, fazendo com que este também seja constantemente atualizado com as visitas de novos usuários.

3 Poesia e Fotografia

4 Nomadismo

C4 C2

dEsiGN dE iNtErFACE O projeto design das interfaces relaciona a experiência nômade do processo criativo de Roberto Piva à construção do universo simbólico que movimenta o livro Paranóia. Neste sentido, a experiência nômade foi repetida com objetivo de selecionar quais lugares da cidade de São Paulo, citados no livro, possuíam características relacionadas à critica social e moral presente na narrativa. Do mesmo modo como o processo criativo foi repetido, a técnica de construção simbólica foi mantida, é por isto que a construção visual das interfaces não só é produzida com fragmentos destes lugares como cada elemento possui dupla representação, com o objetivo de enfatizar a força das imagens poéticas, que é a aproximação de realidades opostas, neste sentido, ao explorar o ambiente digital, o navegador encontra recursos de navegação e interação tanto de um lado como do outro das interfaces.

dEsiGN dA iNForMAÇÃo Comportamentos

Poesia e Fotograﬁa

Sacro e Profano

Nomadismo

Erotismo

Drogas

Esta interface discute valores sociais vigentes por meio dos contrapontos encontrados no Largo do Arouche. A interface de poesia discute a forma de escrita automática apresentada nos poemas de Roberto Piva. Ao clicar nas palavras o interator visualiza uma imagem que vem mostrar a relação de poesia e fotografia existentes em Paranóia. Para falar de Sacro e profano, escolhemos a Igreja da Santa Cecília, onde observamos o profano do lado de fora da igreja através de pessoas no bar, tomando cerveja, mendigo alimentando pombas e vendedor ambulante. Esta interface mostra várias formas de se locomover pelo espaço urbano e discute o caminhar como processo criativo, através do olhar de cada interator em seu roteiro postado. A interface discute o contraponto do dia e da noite na Augusta. A noite é representada pelo ambiente erótico através do neon das casas noturnas e das putas; o mesmo lugar é apresentado de dia, mas com outra realidade. A interface Drogas discute a distorção da realidade e a linguagem onírica com suas formas irregulares e orgânicas.

DESIGN DE SOM O projeto de design de som tem como objetivo envolver o interator numa atmosfera de mistério entre o mundo real e simbólico. Para isto a trilha sonora da peça é composta pela produção autoral de sons relacionados à cidade combinado a trechos de músicas: Utilizamos o projeto Urbanograma de Felipe Julián que trata de gravações da cidade através de recursos binaurais para simulação de áudio tridimensional; samples de guitarra e teclado do compositor Cliff Martinez para dar um ar de mistério e exploração da ambientação; ritmo acelerado, quase dissonante de Battles, e para completar o universo paranóico usamos recitações das poesias de Roberto Piva, de áudios capturados de um debate na Casa das Rosas e do filme Assombrações Urbanas. 1.ª Camada: INTERAÇÃO Nesta camada, o som está associado à ação de feedback do interator. 2.ª Camada: AMBIENTAÇÃO Esta camada está associada aos efeitos sonoros para enfatizar o ambiente de cada interface. Utilizamos sons autorais de multidão, pessoas caminhando, meios de transportes, gravação com prostituta, edições das bandas já cidadãs e poesias narradas por Roberto Piva. Esses sons estão serão disparados através da navegação, dependendo da interação do usuário na interface. 3.ª Camada: CONTEÚDO Esta é a camada associada à construção do imaginário de cada interface através do mistério, para isso, utilizamos trechos musicais do projeto Urbanograma para representar a parte real da cidade e representando o imaginário utilizamos o instrumental de Cliff Martinez e Battles.

TECNOLOGIA UTILIZADA Adobe Premiere CS4 – Edição dos vídeos. Adobe Flash CS4 – Criação das interfaces interativas da peça online. Adobe After Effects CS4 – Tratamento e animação de vídeos. 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 e manipulação dos elementos vetoriais. Adobe InDesign CS4 – Layout e diagramação das peças gráficas. Adobe Photoshop CS4 – Criação, manipulação e tratamento de imagens. 3D Studio Max 9 – Criação de objetos e animação em 3D. Adobe Lightroom 2 – Manipulação e tratamento de fotografias. Adobe Audition 1.5 – Criação, manipulação e tratamento de sons.

BIBLIOGRAFIA DE CRIAÇÃO 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

Capa_PD_Sincretico_Anexos.indd 2-3

19.06.09 18:23:32