1
Universidade Anhembi Morumbi Curso de Design Digital Turma NA8 Trabalho de conclusão de curso Título Terra e Chuva em um só Coordenação Profª Rachel Zuanon Orientação Profº Claudia Teixeira Marinho Profº Nelson Somma Junior Diego Abrahão Modesto Leandro Vicaria Palmeira Paulo Eduardo Gentile Junior Rafael Fuentes Rodolfo Leite De Moraes Atilio Saulo Ribeiro Martins Thais Paola Galvez Rodolfo Leite São Paulo
Saulo Ribeiro Martins
Rafael Fuentes
Leandro Vicaria Paulo Gentile
2009
Diego Abrahão Thais Paola Galvez
2
3
JUSTIFICATIVA O projeto estuda o antagonismo 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 desse 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 estabelece entre eles, além de buscar referência visual entre os outros meios abordados na pesquisa (vídeo, cordel e fotografia). Assim como em outras linguagens, 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, tendo com isso a possibilidade de colocar o seu próprio ponto de vista e discutir com outros usuários sobre o conflito e outros assuntos relacionados. No centenário da morte de Euclides da Cunha, testemunha ocular deste
conflito, sua mais importante obra literária, Os Sertões, estabelece o elo entre a Fotografia de Flávio de Barros, a Literatura de Cordel da época - o passado, e o curta-metragem A Matadeira, de Jorge Furtado - o presente. O antagonismo entre as obras e suas visões estabelece o conceito e a linguagem visual para o projeto. PEÇA DIGITAL A peça digital tem o propósito interpretar e traduzir 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 fragmentos que seriam os aspectos
dentro do conflito. Cada fragmento possuirá uma discussão diferente, mas que se completam com outras. Dentro de cada uma terá uma poesia e animação (em vídeo, tipografia e ilustrações) autorais sobre o assunto discutido. O interator 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, criando uma grande malha. O intuito é gerar uma ferramenta social e que tenha discussões periódicas (inicialmente mensal). A peridiocidade em outros meios também será um aprimoramento. O interator terá a possibilidade
de criar seu próprio Editorial, um pequeno painél semântico, onde ele discutirá os pontos de maior relevância para ele, através dos posts, vídeos, ou comentários feitos na peça on-line
4
5
IGN
DES
de
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 fragmento possui mesclas de sons de instrumentos de corda e percussão, além dos sons naturais 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 tensã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. Contrastando com o design frio que o site apresenta, criando uma contraposição harmônica entre som e design.
6
7
GROTESQUE
A B C D E F G H I J K L M N O P Q R ST U V W Q R ST U V W XY Z abcdefghijklmnopqrstuvwqrstuvwxyz 1234567890
CHAPARRAL
ABCDEFGHIJKLMNOPQRSTUVWQRST UVWXYZ abcdefghijklmnopqrstuvwqrstuvwxyz 1234567890 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.
Brasilêro
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.
ABCDEFGHIJKLMN OPQRSTUVWQRST UVWXYZ abcdefghijklmno pqrstuvwqrstu vwxyz 1234567890
CASLON
ABCDEFGHIJKLMNOPQRS TUVWQRSTUVWXYZ abcdefghijklmnopqrstuvw qrstuvwxyz 1234567890 A Caslon é uma tipografia que data de 1720. Sua tradiçã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 tipografia. 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.
Para títulos, tanto das interfaces quanto da peça gráfica, criamos a tipografia ANTAGÔNICA, uma simbiose dos negativos e positivos de duas tipografias aqui usadas, Grotesque e Caslon.
8
S E R O C E D A T E L A P
9
231F20 PRETO
E91D25
CMYK - 0|100|100|0 RGB - 234|234|37
FAFDFE BRANCO
As 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 estas. 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 fotografias, 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.
10
IC
ON
OG
RA
FI
A 11
As imagens iconográ- Baseamos-nos em ilus- branco. Afastamos-nos o as postagens dos interato- possível ser criado usando ficas seguem as mesmas trações, grafias e outras máximo possível de um de- res. Essa limitação é pro- apenas duas cores. Esse foi características das cores. composições em preto e sign que se confunda com lifera no sentido do que é o nosso desafio.
12
13
PERFIL DO PÚBLICO AL VO
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 sobre 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).
14
E P
A Ç
A IC
R G
F Á
15
Peça Gráfica A peça gráfica se divide em dois momentos. • A primeira é a seqüencial, onde as construções do significado dependem das páginas posteriores, e vice versa. Com isso tentamos explicar 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. • A segunda é a história de Canudos, onde é contata resumidamente a história de sua formação de um ponto de vista material, onde as condiçõ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.
16
17
DESIGN DE INFORMAÇÃO E NAVEGAÇÃO
18
VER DISCUSSÃO ANTERIORES SPLASH SCREEN
INTRODUÇÂO INTERFACE PRINCIPAL
FRASE
FRASE 2
BUSCA DE POST
FRASE 3
FRASE 4 TEXTO
VISUALIZAR POSTS FOTO CRIAR POST
VIDEO
19
Em todas as interfaces o interator encontrará mecanismos para auxiliar sua navegação. Sendo que o acesso: logar, 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 segunda 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úsica, 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ção
ferramenta de posicionamento da interface
Podcast player
20
Após o vídeo de introdução, a explosão gerada pelo conflito dá origem aos fragmentos na interface. Esses fragmentos geram dois grupos distintos; O primeiro da origem aos elementos navegacionais como: Barra de login, MP3 player, ferramenta de busca, entre outros. Esses elementos possibilitam ao interator realizar a maioria das tarefas disponíveis e dão o suporte à navegação. O segundo dá origem à navegaçã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 profundidade. Dentre esses fragmentos quatro são clicáveis, que representam as interfaces (ou discussões) presentes na peça digital. Três fragmentos servem de suporte para interfaces não clicáveis como o resultado 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 interface 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
21
também fazer sua própria postagem (tal tarefa exige 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 tenha 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ãoclicáveis da interface. A qualquer momento, o usuário pode utilizar os elementos da interface para: cadastrar-se, logar-se, realizar uma busca, acessar o twiiter do projeto, navegar por entre os fragmentos e controlar as músicas selecionadas para compor a trilha do projeto. A busca deve ser realizada através de palavras-chave, possibilitando o acesso a todas as postagens relacionadas.
Campo de fragmentos em profundidade
Interface após o clique em um fragmento ativo
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 trazer 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. 22
N G I S DE
E C A F R E T N de I
23
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 conflito 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 manifestar 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.
24
Flash/Actionscript3 O 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. Papervision3D Um 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. RSS Afim 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 Code Um 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 sequencias quem podem ser interpretadas como dados pelo computador. 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 Max Modelagem de personagens, ícones e interface. After Effects CS4 Para a construção dos vídeos que farão parte da composição das interfaces InDesign CS4 Na construção de idéias para as interfaces e diagramação da peça gráfica, que pretendemos fazer um jornal. Illustrator CS4 Tratamento das ilustrações para as interfaces e a peça gráfica.
TECNOLOGIAS UTILIZADAS
25
BIBLIOGR AFIA DE PRODU ÇÃO.
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 livros. 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, Editora 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.
26