Relat贸rio Projetual
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
1
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
2
Índice
3
04
Webdesign III
10
Produção Gráfica I
20
Roteiro e Storyboard
23
Inglês Instrumental
27
Percepção Visual I
36
Referências Projetuais
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Cap铆tulo Web III
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
4
Webdesign III Pensar e realizar o site do Álbum Distraído foi um grande desafio para nós. Pois, em função da pouca experiência com as tecnologias (HTML, CSS e JavaScript) e das elaboradas ideias que tínhamos, encontramos dificuldades em transpor as ideias do design para o código. Dessa forma, tínhamos muitas ideias, passávamos para o papel, porém na hora de transformar em código encontrávamos um bloqueio. No entanto, através de aulas de orientação e buscas, encontramos algumas saídas satisfatórias que possibilitaram a produção de um site responsivo e “user friendly” e alinhado com todo o conceito idealizado na produção da identidade visual do projeto. Nossa proposta, enquanto idealizávamos o site, era trabalhar com bastante espaços em branco para tornar a experiência do usuário menos caótica, uma vez que haveria uma boa quantidade de informações (textos e muitas imagens) a serem consumidas pelo mesmo. Fizemos uso de um grid de 12, 6 e 4 colunas para facilitar a diagramação dos itens nos chamados breaking points dos sites responsivos. No projeto em questão, os breaking points foram os de 480px e 320px, ambos de ambiente mobile. Em nossa busca por sites responsivos percebemos que o Menu é algo bastante valorizado. Porém, nós não possuímos muitos ícones, sendo assim era um menu bastante curto, por isso optamos por sequenciá-lo horizontalmente em tamanhos menores. Dessa forma, quando a tela fosse reduzida para o tamanho mobile, seriam poucos ícones e poderiam ser sequenciados na vertical. Nossos maiores desafios dentro do código foram trabalhar com medidas 100% e medidas fechadas de containers. Sem a devida atenção, o código fica bastante confuso e há a necessidade de recomeçar inúmeras vezes. Nas páginas a seguir desse relatório, apresentamos algumas etapas do nosso processo, desde os rascunhos até o layout final.
5
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Webdesign III
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
6
7
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Webdesign III
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
8
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
9
Capítulo Produção Gráfica I
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
10
Produção Gráfica I
Conceituação e Argumentação
mais tarde para compor os produtos.
Optamos pelo artista Ricardo Ayade para trabalhar dentro desse projeto integrado, pois buscávamos tornar esse projeto o mais real possível. Dentro das opções que buscamos de artistas, nos atraíram aqueles com quem possuímos proximidade e bastante contato. Após isso a nossa escolha se baseou no fato de que poderíamos extrair muito bem a essência do trabalho do Ricardo Ayade e que ele teria bastante conteúdo anterior para nos fornecer. Após definirmos o nosso artista, entramos em contato com ele e passamos uma série de briefings (questionários que preparamos especialmente para esse caso). Após as respostas dele, analisamos tudo para daquele material e concluimos que é um artista que lida diretamente com o ser humano e que busca nele a fonte para a sua inspiração. Em todas as características do ser humano, Ricardo extrai algo, na sua naturalidade, displicência, diferença, igualdade e visceralidade. Logo após esse fato ficar muito claro para a gente, buscamos um contraponto que pudesse contrastar e chegamos a formas geométricas que tendem a simetria e ordem, completamente oposto da natureza do ser humano. E utilizamos esse contraste entre formas geométricas e a natureza do ser humano em todo o processo para formar o nosso conceito e a identidade visual dos produtos. Dessa forma podemos justificar escolhas desde a tipografia, a escolha de uma mais handmade contra outra mais “quadrada”, mais adequada a simetria, até a escolha do formato de nosso digipack. Mas iremos falar dos produtos logo em breve. Continuemos, por enquanto, com as escolhas que guiaram nosso início de projeto. A escolha da paleta de cores se deu pela busca de tons que fossem capazes de levar o usuário até as raízes da humanidade com o con-
traste entre tons de cinza, que seriam utilizados
11
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Produção Gráfica I
Produtos e suas escolhas O primeiro formato de produto que definimos foi o do encarte. Já que buscávamos passar essa essência humana do artista, ficou muito óbvio que nossos produtos teriam que exigir um mínimo de interação do usuário com os produtos. Dessa forma, julgamos que uma forma de interação interessante seria o usuário ter que desdobrar e dobrar o encarte. Assim, pensamos em algo grande, que caberia em um folha A3, resultado em algo do tipo do usuário abrir o encarte e poder realmente mergulhar na informação, nas fotos e em tudo o que preparamos para o encarte. Após termos definido como o nosso conceito se encaixaria nos nossos produtos, fizemos o cd. Foi o produto que encontramos menos dificuldades, pois buscamos um template que a PIMACO disponibiliza no site, dessa forma, aplicamos de uma forma clean, mas que respeitasse e mantivesse o nosso conceito. Dentro da nossa diagramação, utilizamos triângulos (equiláteros) e também alguns paraRelatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
lelepípedos seguindo o ângulo dos triângulos, ou seja, na diagonal. E esses paralelepípedos seriam úteis além de compor “espaços em branco”, alojariam tudo o que fosse texto. Outro produto que nos foi solicitado foi o digipack e ele foi o que nos trouxe maiores dificuldade e desafios. Nós tivemos algumas ideias, mas que logo depois foram descartadas pois não possuíamos muita experiência na área gráfica e nem a noção de como isso poderia interferir nas nossas ideias. Dessa forma, realizamos o contato com a gráfica com muita antecedência e estabelecemos uma relação desde o início, apresentávamos o que gostaríamos de fazer e procurávamos saber se aquilo seria possível ou o que teríamos de mudar. Com esse contato constante com a gráfica e com as aulas de orientação chegamos ao resultado desejado sem maiores problemas. Buscamos aplicar o nosso conceito, porém não usamos apenas fotos de pessoas desconhecidas, em algumas partes do produtos utilizamos algumas fotos do cantor.
12
Como nós queriamos ousar um pouco mais na diagramação do encarte, seguramos um pouco e não inovamos muito no digipack e fizemos um modelo mais básico, mais conhecido, porém dentro dele buscamos aplicar o conceito, como por exemplo o local onde fica o corte para retirar o cd, aquilo é um triângulo. Gostaríamos de destacar aqui algumas experiências relevantes do processo: - O contato com gráficas e bureaus, desde o pedido de orçamento, até o fechamento do projeto, foi muito interessante e teve um lado muito bom já que nós fizemos todo o nosso planejamento e check-list antes de começarmos o projeto. Dessa forma, conseguimos prever um tempo muito bom para lidarmos com gráficas e aprovar os testes de cor e outros processos desse meio.
13
Para finalizar o relatório, fixamos aqui que em todos os nossos produtos seguem o nosso conceito e a identidade visual desenvolvida, e podemos observar isso nas formas triangulares, nas
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Produção Gráfica I
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
14
Materiais necessários: -Label para cd (impressão em gráfica digital) -Um CD -CDpply (Aplicador da PIMACO) -Software com as medidas de CD (da PIMACO)
Materiais necessários para confecção do Digipack: -Impressão Digital em A3; -4x4 -Couché 230gr
Materiais necessários para confecção do Encarte -Impressão Digital em A3; -4x4 -Couché 115gr -3 dobras (com vincadeira)
15
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Produção Gráfica I
Frente do Digipack
Verso do Digipack
Digipack aberto em perspectiva
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
16
12 cm
12 cm
17
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Produção Gráfica I Formato e Medidas do Digipack
2,5 cm
12,5 cm
12,5 cm
10 cm
3 cm
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
18
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
19
Cap铆tulo Roteiro e Storyboard
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
20
Roteiro e Storyboard Escolhemos a música ‘Lima Doce’ do artista Ricardo Ayade, pois nela percebemos uma capacidade muito grande de explorar o campo da superação humana através da busca pelos objetivos e dedicação aos mesmos . Para chegarmos ao resultado final que foi o roteiro técnico e o storyreel (storyboard animado sincronizado com a música) seguimos as etapas que aprendemos durante o módulo. Como por exemplo, definir os personagens, o plot principal, escrever o storyline, decupar em cenas e após ter tudo isso muito bem especificado, focamos no roteiro técnico. Já com o roteiro técnico em mãos começamos a trabalhar no storyboard e fazer os desenhos. Encontramos algumas dificuldades apenas na parte do roteiro técnico, em como deveria ser traduzido aquilo que escremos no roteiro literário para o técnico. Alguns termos não conhecidos geraram um pouco de estranheza, não sabíamos muito ao certo qual seria o melhor termo para especificar alguns detalhes que queríamos. Mas, após algumas buscas e orientações de dúvidas pelo professor conseguimos achar o caminho e acreditamos que para o primeiro storyboard e para uma dupla que nunca havia feito nada parecido antes, o resultado ficou muito interessante. Destacamos aqui a liberdade que tivemos para criar em cima da música. Criamos, realmente, uma história, para contar e cantar música. Que conforme vai sendo contada, pode ser entendida e dessa forma, tudo é desvendado. O roteiro técnico está sendo enviado na pasta conjunta a este relatório, assim como os outros arquivos pedidos, como storyline e roteiro literário. O link para o vídeo no youtube: http://www.youtube.com/watch?v=VfAPYbKr3-s
21
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
22
Capítulo
Inglês III
23
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Inglês Instrumental III Para esse módulo nos foi pedido dentro do Projeto Integrado que realizássemos uma entrevista com a banda/cantor e que todo o conteúdo do site estivesse em Inglês. Na tradução do conteúdo do site não encontramos muitas dificuldades e podemos ressaltar aqui que fizemos uso de palavras aprendidas dentro do vocabulário durante as aulas. Para a confecção da entrevista foi algo muito interessante, pois como o nosso artista (cantor) é uma pessoa próxima, que conhecemos então ao formarmos as perguntas buscamos temas interessantes e que fossem atuais, já que eles seriam respondidos de verdade pelo cantor. Após ter todas as perguntas e as respostas prontas não encontramos muitas dificuldades na tradução e ressaltamos que usamos alguns tempos verbais vistos em sala de aula.
most, I write. I don’t know exactly. I feel like an employee of the Arts, she asks, I do. Q: Why the name Distraído for the first album? A: The name Distraído (Distracted in Portuguese) is because as they say, ‘when we are distracted is that things happen’. And I, somewhat distracted, another well tuned, live always in this state. Q: You wrote all the songs on the album. Did you end up getting a lot of composed music outside this first album? A: Yes, I still have about 50 new songs. Q: After the release of this album, what are yours future prospects with artistic career?
Abaixo, segue todo o conteúdo presente no site:
A: Every artist hopes her work earn projection and it is well accepted in the market. I think my expectation is that too. But, honestly, and without cliches, the hope is that more power to touch people with my music and poetry. I think that’s what moves me even! Q: What is your biggest dream as a musician?
Release On your new released album, “Distraído”, Ricardo Ayade shows us one of your most inspirations font is the human being. The “human animal”. With it’s imperfections and peculiar inequalities.
A: Touch people with my music and live music! Q: If you could choose anyone (living or dead) to share the stage, who would you choose? A: Caetano Veloso, Milton Nascimento. Q: Who are your idols in music?
Concept The new album’s concept can be translated by as an overlaping of antagonistic ideas. If on the one hand we have the “human animal” and it’s character, on the other we have the geometry and it’s order and organization.
Interview QUESTION: How long have you been collecting and creating songs to launch Distraído? ANSWER: Well, the album has songs composed since 2008 that I never thought would enter on the album and also has music composed especially for him. Q: This album consists of songs that talk a lot of the relationship between humans. What is the concept that you use to decide what that relationship or situation deserves a song? A: There isn’t a concept to decide this, just intuition, feeling from the moment. What touches me Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
A: Caetano Veloso, Milton Nascimento,Tom Zé, Novos Baianos... Q: In your opinion, where you have better performance: in the studio where you can concentrate, or live with the heat of the public? A: They are two completely different things. It’s good to be in the studio with the musicians, creating, that’s where things happen and this stage is the best free creation of the whole process of recording. But being on stage is always going to be the realization of any artist. The exchange with the public is essential and the energy is amazing. Q: How to be an artist of the music genre in Brazil? A: Nowadays with the internet platform, is much more accessible. The market is changing all the time. Brazil is a huge country with lots of variety and musical. Also there is a lot of competition, but I think it has room for everyone. Q: Do you see or feel government support and its members to invest in the cultural industry, especially music?
24
Inglês Instrumental III A: From some time now there have been some politics directed towards art and culture and thus for the music. The government today gives some basis for the creation and circulation of shows and that’s great, but it is too little for a country with continental dimensions like ours. I think we are on the way and I hope things get better and better! “The name Distraído is because as they say, when we are distracted is that things happen. And I, somewhat distracted, another well tuned, live always in this state.”
25
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
26
Capítulo Percepção Visual
27
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Percepção Visual I
A iconografia utilizada no site do álbum Distraído faz um link direto com os simbolismos utilizados nos produtos impressos (digipack, encarte e label de cd), que por sua vez trazem o conflito (contraste) entre as formas geométricas com sua ordem e simetria, e o conceito do ser humano com todas as suas desigualdades e visceralidade. Assim como nos impressos, tentamos utilizar símbolos de partes do corpo/sentidos que se aproximavam aos títulos de cada sessão do site. Buscamos a criação de uma família consistente de ícones utilizando as cores da nossa paleta e a composição de formas triangulares marcantes.
1. Fluxograma
APRESENTAÇÃO
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Sendo assim, cada ícone tem como significado: Olho = home (Para isso, buscamos a ideia de que o olho é a janela da alma, é a “página principal”) Boca = apresentação (Tendo em vista que a boca é nosso instrumento para fala, logo, para a apresentação) Ouvido = CD (Utilizando o nosso órgão que tem a capacidade de filtrar e transmitir ruídos para nós: o ouvido) Mão = Making Of (A justificativa é que é a mão que realmente trabalha por trás de tudo isso) Envelope = Contato
HOME
CD
MAKING OF
CONTATO
28
Percepção Visual I 2. Rascunhos e estudos dos ícones
29
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Percepção Visual I
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
30
Percepção Visual I
31
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Percepção Visual I 3. Nível de detalhamento No desenvolvimento dos ícones, tentamos seguir o conceito desenvolvido por Otto Neurath, criador da International System of TYpographic Picture Education- ISOTYPE-, onde a aplicação de um ícone/signo deverá ser somente para uma única informação. Ou seja, cada seção do site possui seu respectivo ícone. Tentamos também desenvolver pictogramas que fizessem semelhança ao conceito desenvolvido para toda a identidade visual do álbum e, por isso, utilizamos imagens de partes do corpo humano que são associadas aos 5 sentidos. Além disso, buscamos manter o ícone em uma visão “chapada” sem passar a ideia de algo com perspectiva ou grafismos 3D, pois como o nosso site, e consequentemente todo o nosso conceito, passam muitas informações por meio de cores, imagens e formas buscamos algo que pudessem não poluir, que não ficassem caóticos quando aplicados no site.
4. Ícones finalizados
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
32
Percepção Visual I 5. Aplicações no site
33
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
Percepção Visual I
Relatório Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
34
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
35
Refer锚ncias Projetuais http://www.behance.net/gallery/Translation-Recordings/3046705 http://designspiration.net/image/14558692869/ http://www.splashnology.com/article/unusual-geometry-in-web-design/5947/ http://blog.joannahobbs.co.uk/2013/01/adventure.html http://www.behance.net/gallery/Russia-1/6683471 http://www.behance.net/gallery/Potenxial/8192641 http://dribbble.com/shots/555938-xylophonia-identity http://www.fontsquirrel.com/fonts/Museo-Sans http://www.fontsquirrel.com/fonts/dancing-script-ot http://www.behance.net/gallery/50mm-portraits/1423457 http://www.behance.net/gallery/The-Other-Face-of-Life-2/1872067
Relat贸rio Projetual Ricardo Ayade - 5o ciclo Tamara Bravo e Gabriel Felix GDG2012 2M
36