1

2

Universidade Anhembi MorumbiCurso de Design DigitalTurma NA8Trabalho de conclusão de curso

Título Terra e Chuva em um só

CoordenaçãoProfª Rachel Zuanon OrientaçãoProfº Claudia Teixeira MarinhoProfº Nelson Somma Junior

Diego Abrahão ModestoLeandro Vicaria PalmeiraPaulo Eduardo Gentile JuniorRafael FuentesRodolfo Leite De Moraes AtilioSaulo Ribeiro MartinsThais Paola Galvez

São Paulo

2009

Thais Paola Galvez

Saulo Ribeiro Martins Rafael Fuentes

Rodolfo Leite

Diego Abrahão

Leandro Vicaria

Paulo Gentile

3

4

JUSTIFICATIVA

O projeto estuda o antago-nismo dentro do contexto da luta, o choque entre a República e os Sertanejos, na Guerra de Canudos. As diversas linguagens que retratam o conflito se mostram semelhantes em alguns aspectos e ao mesmo tempo distantes na sua estrutura narrativa e informacional, criando novos aspectos ou mesmo visões distintas do fato registrado. Partindo des-se objetivo de transportar trechos de Os Sertões de Euclides da Cunha, onde o escritor detalha o modo de vida dos canudenses, a

atitude dos republicanos e o conflito que se estabele-ce entre eles, além de bus-car referência visual entre os outros meios aborda-dos na pesquisa (vídeo, cordel e fotografia). As-sim como em outras lin-guagens, a mídia digital será uma nova tradução do fato, através de novos pontos de vista. Já em uma segunda etapa o usu-ário poderá colaborar com conteúdos diferentes, ten-do com isso a possibilida-de de colocar o seu próprio ponto de vista e discutir com outros usuários sobre o conflito e outros assun-tos relacionados. No centenário da mor-te de Euclides da Cunha, testemunha ocular deste

conflito, sua mais impor-tante obra literária, Os Sertões, estabelece o elo entre a Fotografia de Flá-vio de Barros, a Literatu-ra de Cordel da época - o passado, e o curta-metra-gem A Matadeira, de Jor-ge Furtado - o presente. O antagonismo entre as obras e suas visões estabe-lece o conceito e a lingua-gem visual para o projeto.

PEÇA DIGITAL

A peça digital tem o pro-pósito interpretar e tra-duzir alguns aspectos desse conflito através da atemporalidade, o vínculo entre o passado e o futuro.A navegação principal será um ambiente onde a partir do choque entre as duas classes criam-se fragmen-tos que seriam os aspectos

dentro do conflito. Cada fragmento possuirá uma discussão diferente, mas que se completam com ou-tras. Dentro de cada uma terá uma poesia e anima-ção (em vídeo, tipografia e ilustrações) autorais sobre o assunto discutido. O in-terator poderá então criar um perfil e postar (com possibilidade de incluir ví-deos do Youtube), criando discussões e ainda poderá comentar outros posts de outros interatores, crian-do uma grande malha. O intuito é gerar uma fer-ramenta social e que te-nha discussões periódicas (inicialmente mensal). A peridiocidade em outros meios também será um aprimoramento. O inte-rator terá a possibilidade

de criar seu próprio Edi-torial, um pequeno painél semântico, onde ele discu-tirá os pontos de maior re-levância para ele, através dos posts, vídeos, ou co-mentários feitos na peça on-line

DESI

GN de

5

6

A composição sonora do trabalho será dividida em ambiente e interação, abrangendo

músicas e os ruídos.

O ambiente consiste em níveis sonoros trazendo aspectos de profundidade. Cada frag-

mento possui mesclas de sons de instrumentos de corda e percussão, além dos sons na-

turais como vento, areia, sons metálicos (eletrônicos), ruídos urbanos, ritmados (dando

ênfase à formação militar) oferecendo uma imersão maior em cada ponto de discussão.

O projeto nesse ponto recorre à repetição, alteração de tom, velocidade para causar ten-

são em alguns momentos.

Os ruídos serão utilizados ainda no feedback de interações como em cadastro, postagem

e comentário no site.

As musicas foram selecionadas justamente para criar um ambiente mais emocional,

onde o interator possa sentir-se mais empolgado com os assuntos e a navegação. Con-

trastando com o design frio que o site apresenta, criando uma contraposição harmônica

entre som e design.

7

8

GROTESQUEA B C D E F G H I J K L M N O P Q R S T U V W Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w q r s t u v w x y z1 2 3 4 5 6 7 8 9 0

CHAPARRALA B C D E F G H I J K L M N O P Q R S T U V W Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w q r s t u v w x y z1 2 3 4 5 6 7 8 9 0

CASLONA B C D E F G H I J K L M N O P Q R S T U V W Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w q r s t u v w x y z1 2 3 4 5 6 7 8 9 0Brasilêro

A B C D E F G H I J K L M N O P Q R S T U V W Q R S T U V W X Y Za b c d e f g h i j k l m n o p q r s t u v w q r s t u v w x y z1 2 3 4 5 6 7 8 9 0

Para títulos, tanto das interfaces quanto da peça gráfica, criamos a tipografia ANTAGÔNICA, uma simbiose dos negati-vos e positivos de duas tipografias aqui usadas, Grotesque e Caslon.

A Grotesque é uma Sans Serif, que possui excelentes qualidades para cartazes e cabeçalhos de textos. Ela será usada na opção condensada para títulos grandes que precisam chamar atenção sem ocupar muito espaço. Seu uso será nas telas do conflito, onde ela possui um apelo forte como informação e propaganda dos acontecimentos, criando tensão visual para o interator.

Sua altura de X é menor que as tipografias serifadas convencionais, dando leveza ao texto sem perder legibilidade. Seu estilo ilustra bem como tipografia de jornal e pode passar essa sensação na peça online, nas informações mais descritivas. Em tela para uma boa legibilidade seu tamanho mínimo de uso é de 16pt.

A Caslon é uma tipografia que data de 1720. Sua tra-dição e estilo serão usados para títulos e composi-ções datadas, para caracterizar melhor os ambientes temporais não só por fotos, mas com a própria tipo-grafia. Será usada junto com a Grotesque em títulos e chapéus, mas em conteúdos diferentes.

Brasilêro é uma conhecida tipografia vernácula, seu estilo é todo baseado em letras manuais feitas por homens simples que anunciam seus produtos sem uso de tecnologias, criando uma tipografia expressiva e orgânica, com variações dos eixos, das hastes e das ascendentes e desentendes. Será usada para menus, e aberturas junto com a tipografia autoral.

PALETA DE CORES

9

10

FAFDFE

BRAN

CO

CMYK - 0|100|100|0RGB - 234|234|37

E91D25

PRET

O

231F20As cores que determinam o projeto online e gráfico são o preto e o branco. Essas cores são inspiradas no cordel, mas não é ele que as justifica. O preto e o branco em nosso caso foram usados de duas formas. Na peça online, ele tem a função de não brigar com as postagens do interator como imagens, vídeo etc. Seu papel é emoldurar as postagens, mas não disputar em cor e estéticas variadas com es-tas. Ainda na peça online, usamos um pouco de vermelho, para guiar o interator aonde ele tem que clicar para navegar no site.Na peça gráfica a síntese é a mesma, só que usamos os tons de cinza, com o mesmo fim, de não brigar com as cores das foto-grafias, que imperam no trabalho. Ao mesmo tempo em que se cria um clima mais contemporâneo para falar de Canudos, onde buscamos a austeridade do centro de São Paulo como referência.

ICONOGRAFIA

11

12

As imagens iconográ-ficas seguem as mesmas características das cores.

Baseamos-nos em ilus-trações, grafias e outras composições em preto e

branco. Afastamos-nos o máximo possível de um de-sign que se confunda com

as postagens dos interato-res. Essa limitação é pro-lifera no sentido do que é

possível ser criado usando apenas duas cores. Esse foi o nosso desafio.

PERF

IL D

OPÚ

BLIC

O AL

VO

13

14

O projeto será voltado ao público de ambos os gêneros, que possuam o grau de escolaridade em pré-universitário, ensino médio e ensino superior, na faixa etária de 17 a 35 anos e pessoas ou grupos de discussão que possuam repertório ou interesse em criar novos debates so-bre temas sociais (como pobreza, economia e fé), atuantes em área como ciências sociais (antropologia e sociologia), história (estudantes e professores), ilustradores e designers.

Através do conceito do projeto, o interesse do público consiste em literatura (histórica e regional), cinema (regional como Deus e o Diabo na Terra do Sol de Glauber Rocha e metafóricos e narrativos como A Matadeira e Ilha das Flores de Jorge Furtado), ilustração (Xilogravura e gravuras em geral), fotografia (Fotojornalista e Fotodocumentário), atualidades e assuntos sobre a sociedade.

O público deve ter obrigatoriamente acesso à computador e conexão à internet (Banda larga), sendo opcional webcam, câmera fotográ-fica e vídeo (aumentando a interação com o projeto). Possuir experiência em publicações em ferramentas sociais (como o twitter), sendo necessários para atingir a amplitude da discussão do projeto (narrativa através da colaboração do interator).

PEÇA GRÁFICA

15

16

Peça Gráfica

A peça gráfica se divide em dois momentos. • Aprimeiraéaseqüencial,ondeasconstruçõesdosignificadodependemdaspáginasposteriores,eviceversa.Comissotentamosex-

plicar como acontece os conflitos, quais são as características e contrastes que separam as pessoas, usando sempre imagens do presente misturadas com as características de Canudos.

• AsegundaéahistóriadeCanudos,ondeécontataresumidamenteahistóriadesuaformaçãodeumpontodevistamaterial,ondeascondições precárias de vida das pessoas as levam a criar a cidade de Canudos em analogia aos textos são usadas imagens atuais.

O conceito da peça é justamente mostrar que passado e futuro estão conectados por uma realidade, as condições precárias de vidada de seres humanos, justamente porque são explorados por outros seres humanos.

Assim como Euclides e denunciou as barbáries de sua época, nos denunciamos as da nossa.

17

DESIGN DE INFORMAÇÃO E NAVEGAÇÃO

18

19

SPLASHSCREEN INTRODUÇÂO

INTERFACEPRINCIPAL

VER DISCUSSÃOANTERIORES

BUSCA DE POST

FRASE FRASE 2 FRASE 3

VISUALIZARPOSTS

TEXTO

FOTO

VIDEO

CRIARPOST

FRASE 4

20

Em todas as interfaces o interator encontrará mecanismos para auxiliar sua navegação. Sendo que o acesso: lo-gar, cadastrar (caso não esteja logado), perfil, buscador, twitter e setas que ajudam na navegação, permanecerão na interface constantemente, com o intuito de facilitar o trajeto dos interatores.

Ao acessar um dos fragmentos, o interator encontrará mais duas ferramentas, uma é o botão postagem, que dá ao mesmo o poder de intervir na interface, expondo sua opinião, através de vídeo, foto e texto, além de poder questionar ou apoiar postagens de outros usuários, que a cada resposta, receberá por e-mail um aviso. A segun-da ferramenta tem a função de auxiliar no posicionamento da interface, através do sinal “+”, “-“ e “voltar”.

Para garantir conforto ao interator, o site oferece um podcast player, com botões que permitem alterar a músi-ca, pausar o som e também identifica qual é a música tocada.

Todas as ferramentas tem como intuito agilizar e facilitar as intervenções dos interatores, para que os mesmos consigam expor sua opinião, estabelecer debates e criar novas relações com os conflitos já vividos pelo homem.

seta de navegaçãoferramenta de posicionamento da interface Podcast player

21

Após o vídeo de introdução, a explosão ge-rada pelo conflito dá origem aos fragmen-tos na interface. Esses fragmentos geram dois grupos distintos; O primeiro da ori-gem aos elementos navegacionais como: Barra de login, MP3 player, ferramenta de busca, entre outros. Esses elementos pos-sibilitam ao interator realizar a maioria das tarefas disponíveis e dão o suporte à navegação. O segundo dá origem à nave-gação, onde os fragmentos são colocados aleatoriamente na interface formando um campo em profundidade.

A navegação acontece como se o interator estivesse na primeira pessoa, navegando por um campo de fragmentos em profun-didade. Dentre esses fragmentos quatro são clicáveis, que representam as interfa-ces (ou discussões) presentes na peça di-gital. Três fragmentos servem de suporte para interfaces não clicáveis como o resul-tado da busca, o perfil/cadastro de usuário e a interface de perfil de outros usuários. Ao acessar a área de discussões, a inter-face se construirá a partir do fragmento revelando uma poesia autoral, um vídeo (também autoral) e as postagens dos usu-ários. A partir disto, o usuário pode ler e comentar as postagens existentes, como

Splash

Animação de entrada

22

também fazer sua própria postagem (tal tarefa exi-ge que o usuário esteja devidamente cadastrado e logado). Ainda dentro dessa interface da discussão, o interator pode clicar nas postagens para obter um zoom e facilitar a leitura do conteúdo. O interator pode ainda clicar no avatar de outro usuário que te-nha realizado uma postagem e ir para o perfil do usu-ário onde terá acesso às informações sobre este perfil e as postagens realizadas por ele. Esta interface de perfil se formará a partir de um dos fragmentos não-clicáveis da interface.

A qualquer momento, o usuário pode utilizar os ele-mentos da interface para: cadastrar-se, logar-se, rea-lizar uma busca, acessar o twiiter do projeto, navegar por entre os fragmentos e controlar as músicas se-lecionadas para compor a trilha do projeto. A busca deve ser realizada através de palavras-chave, possi-bilitando o acesso a todas as postagens relacionadas.

Para minimizar os elementos da interface, o usuário pode utilizar atalhos disponíveis na própria interface, como clicar no vazio para voltar uma ação ou utilizar as bordas para deslocar as interfaces quando estiver dentro de uma delas. Como as interfaces podem tra-zer uma grande quantidade de postagens com texto, imagem e vídeo, esses recursos foram acrescentados afim de maximizar o espaço útil para a visualização do conteúdo.

Campo de fragmentos em profundidade

Interface após o clique em um fragmento ativo

DESIGN de INTERFACE

23

24

Baseada na discussão sobre a atemporalidade no conflito de Canudos, a peça digital on-line parte da idéia de fragmentos gerados pelo con-flito entre povo e república ou explorados e exploradores, os fragmentos são uma representação da colisão dos aspectos sociais e idéias que perpetuam sobre o conflito, e são responsáveis por formar os elementos de interface e de navegação.

Tendo esse conceito como ponto de partida, é sugerido ao interator, através de vídeos e poesias autorais em quatro interfaces principais, que a análise sobre o conflito de canudos seja re-contextualizada e colocada nos dias atuais. Para tal, o interator tem a possibilidade de se ma-nifestar sobre os assuntos tratados através de postagens em cada interface, optando por agregar à interface, texto, imagem (com um breve descritivo) ou ainda um vídeo do Youtube (também com breve descrito). O interator pode também comentar as postagens de outros usuários e ainda buscar por conteúdo através de palavras-chave.

25

Flash/Actionscript3O Flash junto com a sua linguagem de desenvolvimento possibilitam uma maior variedade de interações com o usuário, além de possibilitar animações e outros apelos visuais afim de “imergir” o interator na peça.Papervision3DUm conjunto de classes para a linguagem Actionscript que permite trabalhar com cenas e objetos em 3D no flash.Twitter, youtube, flickr API`s: Conjunto de classes disponibilizadas para integrar peças on-line com o sistemas dos respctivos sites.RSSAfim de permitir ao usuário se manter atualizado em relação ao que acontece no fórum sem a necessidade de acessar o site em sí atravéz do RSS.QR CodeUm meio para integrar a peça gráfica com a peça on-line. O QR Code funciona fotografando uma imagem que contém em sua forma se-quencias quem podem ser interpretadas como dados pelo compu-tador. No caso do nosso trabalho essa tecnologia será utilizada para disponibilizar conteúdo extra na peça on-line para o usuário que tiver em mãos a peça gráfica.3D Studio MaxModelagem de personagens, ícones e interface.After Effects CS4Para a construção dos vídeos que farão parte da composição das in-terfacesInDesign CS4Na construção de idéias para as interfaces e diagramação da peça grá-fica, que pretendemos fazer um jornal.Illustrator CS4Tratamento das ilustrações para as interfaces e a peça gráfica.

TECNOLOGIAS UTILIZADAS

26

FAWCETT-TANG, Roger & ROBERTS, Caroline. O livro e o designer I: embalagens, navegação, estrutura e especificação. São Paulo, Editora Rosari, 2007.

HASLAM, Andrew. O livro e o designer II: como criar e produzir liv-ros. São Paulo, Editora Rosari, 2006.

HOLLIS, Richard. Design gráfico: uma história concisa. São Paulo, Editora Martins Fontes, 2005.

LEÃO, Lucia. O chip e o caledoscópio: reflexões sobre as novas mídias. São Paulo, Editora Senac São Paulo, 2005.

LUPTON, Ellen & PHILLIPS, Cole. Novos fundamentos do design. São Paulo, Editora Cosac Naify, 2008.

ROCHA, Claudio. Projeto tipográfico: análise e produção de fontes digitais. São Paulo, Editora Rosari, 2003.

SAMARA, Timothy. Grid: construção e desconstrução. São Paulo, Edi-tora Cosac Naify, 2007.

SCHAFER, R. Murray. O ouvido pensante. São Paulo, Editora UNESP, 2003.

SHUPE, Rich. Learning actionsript 3.0 design. CIDADE PAÍS, Editora Oreilly & Assoc, 2007.

BIBL

IOGR

AFIA

DE

PRO

DUÇÃ

O.