Issuu on Google+

Literato: desenvolvimento de website.

Olinda, 2008


José Mateus de Melo Alves

Literato: desenvolvimento de website.

Trabalho de conclusão de curso apresentado como requisito complementar para obtenção do grau de Bacharel em Comunicação Social, com habilitação em Publicidade e Propaganda, das Faculdades Integradas Barros Melo.

Orientador: Prof. Daniel da Hora

Olinda, 2008


Agradecimentos À minha família, pelo apoio e incentivo de todas as horas, cada um da sua forma. Pelas palavras experientes que sempre me ajudaram a superar as dificuldades de começo e meio de curso. À minha avó Eunice pela veia artística e energias positivas passadas durante toda minha vida, através de seus ensinamentos sábios e obras inspiradoras. A todos os colegas e amigos que fiz durante os quatro anos de curso na Barros Melo e que tiveram considerável importância e participação neste projeto. Aos vários Ds: Daniel Da Hora, pelo incentivo, apoio e conselhos desde antes dos tempos da Inata. Duda Buarque, pelas críticas, nem sempre feitas de forma carinhosa, mas sempre construtivas. Dinda Moraes, Débora Lima e Danuza França, pela enorme paciência comigo no dia-a-dia. A Felipe Autran, pela amizade, companheirismo e brainstorms a qualquer hora. A Gabi Cruz pelo seu coração gigante e pelas orientações preciosas nas horas de desespero. A Thiago Diniz pelas broncas, piadas e verdades ditas durante esses quatro anos, que me fizeram crescer bastante, mesmo sem que ele soubesse. Aos Rs: Ricardo Bicudo e Roberto Soares pelos papos e ensinamentos fotográficos. Aos Ss: Shirley Santana e Sandra Lima, por ouvirem com carinho nossas críticas e sugestões e contribuírem sempre para melhoria do nosso curso. A Izabella Lucena, pela oportunidade de poder desenvolver trabalhos junto ao Projeto Literato e por acreditar com tamanha confiança, em tão pouco tempo de convívio, no meu trabalho. A Victor Moreira, Manoel Affonso, Manu Araujo, André Ferreira, e todos os outros provocadores de cultura envolvidos pelo ideal do Projeto.


Resumo O Projeto Literato – Provocação Cultural, é fruto do empenho da psicóloga e antropóloga Izabella Lucena, e tem como principal objetivo preservar, divulgar e vender as obras do poeta e professor Manoel Affonso e do artista plástico Victor Moreira. Por se tratar de um produto novo e ainda desconhecido, surgiu a necessidade da criação de um site para dar suporte ao que vem sendo divulgado do Projeto através de reportagens e notas em jornais e televisão. Este estudo mostra o processo de criação do website do Projeto Literato, desde o estudo de referências até a criação dos layouts finais, passando pelos rafes e estudo da arquitetura das informações do website. Palavras-chave: Direção de Arte; Website; Literato.


Lista de Figuras Figura 1 (3) – Camiseta Tibet Free ....................................…………….......………..

14

Figura 2 (4) – The Crossings .......................................…………….......…………….. Figura 3 (4) – Red & Blu...…........................................…………….......……………..

17 18

Figura 4 (4) – Lucy Blackmore ....................................…………….......……………..

19

Figura 5 (4) – Alexandru Cohaniuc .............................…………….......……………..

20

Figura 6 (4) – Pain is Good ..........................................…………….......……………..

21

Figura 7 (4) – Thread..................... ..............................…………….......……………..

22

Figura 8 (4) – Camisetaria...........................................…………….......…….………..

22

Figura 9 (4) – Menu e Abas de Subpáginas ...............…………….......……………..

23

Figura 10 (4) – Fundo Atrás do Menu ........................…………….......……………..

24

Figura 11 (4) – Folhas ......................................................………….......……………..

24

Figura 12 (4) – Menu Móvel ............................................………….......……………..

25

Figura 13 (4) – Arquitetura do Website ..............................……………......………..

26

Figura 14 (5) – Home .................................................…………….......……...………..

30

Figura 15 (5) – Abas de Subpáginas ...........................…………….......……………..

31

Figura 16 (5) – Quem Provoca? Manoel ....................…………….......……………..

31

Figura 17 (5) – Quem Provoca? Victor .......................…………….......……………..

32

Figura 18 (5) – Use Literato .......................................…………….......……………..

32

Figura 19 (5) – Equipe .................................................…………….......……………..

33

Figura 20 (5) – Notícias (Fotos e Blog) .......................…………….......……………..

33

Figura 21 (5) – Provoque ...........................................…………….......……………...

34


Sumário 1 Introdução.....................................................................................................................

08

2 Objetivos .......................................................................................................................

10

2.1 Objetivo Geral ................................................................................................

10

2.2 Objetivos Específicos .....................................................................................

10

3 Briefing..........................................................................................................................

11

3.1 Definição do Problema ..................................................................................

13

3.2 Publico Alvo....................................................................................................

14

4 Processo de Criação......................................................................................................

16

4.1 Pesquisa de Referências.................................................................................

16

4.2 Rafes................................................................................................................

23

4.3 Arquitetura do Website..................................................................................

25

4.4 Linguagem.......................................................................................................

26

4.5 Defesa dos Elementos.....................................................................................

27

4.6 Estudo de Cores..............................................................................................

29

5 Apresentação da Interface Gráfica.............................................................................

30

6 Considerações Finais.....................................................................................................

35

Referências Bibliográficas ..............................................................................................

37


7

1 Introdução O cliente deste Trabalho é o projeto Literato. Um projeto real, cujo conceito é a provocação cultural e tem como principal objetivo preservar, divulgar e vender as obras do poeta e professor Manoel Affonso e do artista plástico Victor Moreira, além de comercializar outros produtos “provocadores de cultura” criados por colaboradores. Este Trabalho de Conclusão de Curso teve como principal função identificar a necessidade do cliente, encontrar e desenvolver uma peça com o objetivo de apresentar o Projeto Literato de maneira geral, além de funcionar como catálogo de produtos e dar suporte ao que vem sendo divulgado a respeito do Projeto na mídia. A solução encontrada foi a construção de um website, ferramenta que traz uma relação estreita entre negócio e entretenimento. A internet como ferramenta da comunicação na modernidade veio possibilitar a utilização e exploração de informações distribuídas na rede de modo espetacular. O avanço, nos últimos anos, e sua extensão definitiva para o grande público com o surgimento da Web, integra todas as possibilidades em uma única interface com formato hipermídia, ou seja, uma combinação de multimídia e hipertexto (SANCHO, 1999). Suas características, como o aspecto dinâmico dos links, a interatividade e conectividade das telas como elementos inacabados, a possibilidade de produção de efeitos específicos de vídeo digital, sons etc, permitindo a oferta de informações que respondem às ações dos internautas, reúne elementos que atendem aos anseios do cliente em questão. Widemmann também explica porque a internet, e a interatividade que ela oferece, vem sendo cada dia mais usada como principal artefato para muitos clientes: porque a internet representa a principal arma de controle do consumidor tecnologicamente informado. A era do marketing dependente dos media está rapidamente a chegar ao fim, uma vez que os consumidores estão a afastar-se dos canais que não controlam, como a televisão e a impressa,


8

voltando-se para os que podem controlar, como a internet, os sistemas de jogos de vídeo os iPods, telemóveis e os PVRs (WIDDEMAN, 2005).

Diante do exposto, este Trabalho de Conclusão de Curso tem como objeto de estudo a criação de um website para o Projeto Literato.


9

2 Objetivos 2.1 Objetivo Geral •

Criar e desenvolver a interface gráfica para o website do Projeto Literato.

2.2 Objetivos Específicos •

Reunir as idéias e obras dos artistas envolvidos no Projeto Literato em um ambiente de fácil acesso, reunindo entretenimento, cultura e negócios.

Arquitetar as informações do website.

Desenvolver, a partir de referências estéticas, uma identidade visual para o website do Projeto Literato.

Criar os layouts das páginas que compõem o site do Projeto Literato, de acordo com a estética desenvolvida e com o conteúdo exposto.


10

3 Briefing Este capítulo apresenta um resumo da primeira etapa do processo de criação: o briefing que, de acordo com Sampaio (1997), “deve conter todas as informações relevantes” a respeito de um projeto (p.206). Dessa forma, apresenta o projeto, o problema, o público-alvo e a solução encontrada. A maioria das informações, já que o briefing trata-se de uma passagem das mesmas, foi adquirida através de conversas com o cliente, buscas em dicionários, jornais impressos e televisivos. Esse Trabalho de Conclusão de Curso iniciou com o briefing construído a partir das informações passadas por Izabella Lucena, diretora do Projeto Literato, para que fosse desenvolvido o design gráfico do website para o mesmo Projeto. Segundo Lynch e Horton “o design gráfico é a gestão visual das informações, usando as ferramentas de leuiaute de página, a tipografia e as ilustrações para orientar os olhos do leitor ao longo da página” (2004, p.82). Na origem da palavra, o termo literato quer dizer “pessoa que se ocupa de literatura”, “escritor” (LAROUSSE). No caso em questão, Literato é o nome dado a um projeto real, cujo conceito é a provocação cultural. O Projeto tem como principal objetivo preservar, divulgar e vender as obras do poeta e professor Manoel Affonso e do artista plástico Victor Moreira. Manoel Affonso de Mello é historiador, arquiteto, pós-graduado em Educação, professor de História Geral e História da Arte e sócio-diretor do Colégio Atual (Recife). Como escritor, publicou “Nem o Corpo Nem a Alma: o Humano” e “Das Sociedades Anteriores à Escrita ao início da Civilização”. É ainda co-autor de livros didáticos para o Ensino Médio, adotados em diversos estados brasileiros onde profere palestras. Atualmente, Manoel dedica-se, além do Projeto Literato, à publicação de suas principais idéias, sintetizando-as sob a forma de citações em breves textos, por acreditar na palavra como “a mais poderosa das armas. Não pelo tom , mas pelo eco”, como afirma.


11

O segundo artista envolvido no Projeto é Victor Moreira, definido por dois adjetivos fortes e atuais: libertário e inovador (NE TV, 2008). Nascido em Olinda-PE em 1934, Victor é formado em Odontologia, mas desempenhou a profissão somente por dois anos, até tornar-se estilista, figurinista e cenógrafo em Recife. Em 1965, mudou-se para São Paulo, onde morou e trabalhou até 1977. Mudou-se novamente para Fortaleza, a convite de uma maison de alta costura. Durante anos, foi um estilista e estampador de sucesso e recebeu vários prêmios. No mundo da moda, participou de salões nacionais e internacionais, desenhou guarda-roupas de algumas misses mundo, explorou diferentes tecidos e foi colunista para o jornal cearense O Povo. Também foi um dos precursores de ações sociais aliadas ao mundo fashion, de campanhas contra o câncer e pioneiro no uso do labirinto na alta costura e da mescla trabalhada como tecido nobre. Como diretora e idealizadora do Projeto, Izabella Lucena resgatou cerca de 100 lâminas com estampas jamais vistas pelo público e encantou-se com as possibilidades de leituras permitidas pelos contrastes que as imagens criadas pelo múltiplo artista Victor Moreira (seu tio) permitiam. Inéditas, as estampas elaboradas nos revolucionários anos 70 traduzem, pelo dinâmico movimento das formas e mágico jogo de cores, a liberdade da década que consolidou "a imaginação no poder", slogan gritado nas ruas de Paris pelos jovens de 1968 (WIEDEMANN, 2005).


12

3.1 Definição do Problema Para levar ao público final o Projeto, as idéias e os produtos, bem como para estabelecer um canal de relacionamento, era necessária a criação de uma ferramenta simples e acessível, que servisse como cartão de visitas do Literato. Com isso, surgiu a idéia de um website, onde o internauta pudesse conhecer o Projeto Literato de maneira geral, além de funcionar como um catálogo de produtos e dar suporte ao que vem sendo divulgado a respeito do Projeto na mídia. A ferramenta permite ainda, como afirmado anteriormente, uma relação estreita entre negócio e entretenimento, que possibilita uma exposição em grande escala ao público que se deseja atingir. Segundo Prado e Rabelo (2007), a internet é um espaço sedutor e de utilidade, podendo ser explorado de forma segmentada, repercutindo notícias ou mesmo estimulando a compra imediata. Dessa forma, o website do Literato serve para tornar conhecida a obra de Manoel Affonso – suas palavras, que ilustram camisetas e cartões e seus desenhos em um estilo muito próprio (caneta Bic) – e Victor Moreira – suas mais de 100 estampas criadas nos anos 70 e que também dão vida aos cartões do Projeto. Ao mesmo tempo, a exposição do produto abre possibilidades de utilização e comercialização no mundo da moda, na aquisição dos direitos de uso e até na ampliação do Projeto, seja nesse ou em algum novo segmento. Entre os produtos expostos no site, estão também outras criações, todas ligadas ao conceito chave do Projeto como “provocadoras de cultura". É o caso da camiseta "Tibet Free" (abaixo) e “Bombardeio de Idéias”, entre outras.


13

Figura 1 (3) – Camiseta Tibet Free

FONTE: Desenvolvida pelo Autor, 2008.

O website também deve servir como ambiente de suporte para comentários e idéias dos usuários. Dessa forma, além de estreitar relacionamentos, é possível saber de que forma o Projeto é percebido pelo público.

3.2 Público-alvo O público-alvo do Projeto é formado por pessoas inquietas com o mundo e com as questões sociais, que partilham de idéias inovadoras e revolucionárias, podendo estar ligadas ou não a movimentos culturais, artísticos e ou em qualquer outro segmento e atividades profissionais. O conceito do Projeto: “provocação cultural” é o que une os seus criadores e o seu público. Logo, qualquer forma de provocar cultura é alimento para esta união, sejam as palavras, as artes plásticas, a música e também os negócios. Desse modo, é possível considerar também como público-alvo diversas atividades e segmentos que tenham interesse em utilizar a obra dos artistas Victor e Manoel associada ao seu produto. Um exemplo disso seria utilização de estampas, idéias e textos de Victor e Manoel em coleções de peças de vestuário nos diversos segmentos e tendências da moda: estação, praia etc.


14

As obras dos dois artistas apresentam grande versatilidade, reunindo ao mesmo tempo características diferentes, dispondo de uma vasta possibilidade de aplicações e ampliando, portanto, o público-alvo pouco segmentado.


15

4 Processo de Criação Neste capítulo, são apresentados os passos posteriores ao briefing. A maioria das informações está baseada em Lynch e Horton, Widdemann, e Farina. Recebido o briefing, o primeiro passo dado foi a pesquisa a respeito dos artistas, que tipo de conteúdo eles produziam e o que o website teria a oferecer para satisfazer às necessidades do cliente. Em seguida, algumas reuniões foram feitas com o cliente e equipe - diretor de arte, encarregado da programação do website, jornalista etc -, a fim de definir a arquitetura das informações e a linha conceitual que deveria ser seguida. Partindo deste ponto, pesquisas de referência e rafes foram feitos, apresentados, alterados e aprovados com o cliente. Partiu-se então para a elaboração dos leiautes de cada uma das páginas, seguindo os rafes apresentados e colocando neles todo o conteúdo fornecido pelo cliente. Para melhor atender às necessidades do leiaute, as fotos dos artistas e também dos produtos foram produzidas pelo diretor de arte e autor deste Trabalho de Conclusão de Curso. O produto final é um website que atende às necessidades apresentadas no briefing, tendo o leiaute desenvolvido pelo autor deste Trabalho, utilizando as obras dos artistas Manoel Affonso e Victor Moreira como elementos gráficos. O website satisfaz as expectativas não só do cliente, mas também dos artistas envolvidos e de uma parcela do publico alvo que acompanhava a execução do projeto junto ao cliente.

4.1 Pesquisas de Referência Para a definição da arquitetura do conteúdo e como base para a estética do website do Projeto Literato, foi feita uma pesquisa buscando referências visuais e técnicas em websites de projetos culturais, de portfólios de artistas plásticos e também de lojas que comercializam


16

produtos do segmento semelhante ao do nosso cliente. Entre as referências encontradas, aqui estão algumas que tiveram relevância na elaboração do leiaute do site do Literato seguidos de uma breve justificativa.

Figura 2 (4) – The Crossings

FONTE: The Crossings, 2008.

O website do The Crossings apresentado na figura 2, explora diferentes texturas para dividir o seu conteúdo, formando uma espécie de pasta classificadora e utiliza de um menu que não muda o seu formato ou seus links durante toda a navegação do usuário. As fotos que ilustram a home do site são dispostas em formato de fotografias tipo Polaroid sobre a base do site, com setinhas dos dois lados permitindo que o usuário passe uma por uma. No website do Literato as fotos ganham um suporte parecido com o sugerido acima, que ao aparecer, ganham um maior destaque, pois o fundo atrás delas escurece, prendendo a atenção do usuário a cada detalhe delas.


17

Figura 3 (4) - Red&Blu

FONTE: Red&Blu, 2008

O website da Red&Blu foi usado como referência de animação. Em sua abertura, fotos se movem como se fossem impulsionadas pelo vento e desaparecem “abrindo” para o conteúdo do website. No Projeto Literato as animações são um pouco mais simples, usadas somente para dar idéia de que os papéis saem por debaixo do menu do website.


18

Figura 4 (4) - Lucy Blackmore

FONTE: Lucy Blackmore, 2008.

O website da artista Lucy Blackmore usa de texturas e cores fortes. O uso do papel nesse site fica claro como material que sustenta o que quer ser dito pela autora. A posição do papel posto sobre os pincéis, bisnagas de tinta e sobre uma textura de madeira passa a idéia de que esse é o ambiente de trabalho da artista. Essas características são passadas para a interface do website do Literato, onde os papéis aparecem sobre as obras dos artistas.


19

Figura 5 (4) - Alexandru Cohaniuc

FONTE: Alexandru Cohaniuc, 2008.

A textura infinita no fundo e os papéis colados nela, usados no site do webdesigner Alexandru Cohaniuc representam uma opção de como as informações podem ser colocadas sobre uma imagem de fundo, que nesse caso se apresenta como em um segundo plano, deixando que os papéis tomem a atenção do usuário.


20

Figura 6 (4) - Pain is Good

FONTE: Pains is Good, 2008

A home do Pain is Good mostra a concentração de informações em um único bloco central, dispensando o uso de rolagens. O website do Literato tenta ao máximo não quebrar as suas informações (principalmente imagens), para que o visitante não dê mais atenção ao que aparece antes de qualquer rolagem. Isso pode ser bem observado na aba de produtos, onde um pequeno detalhe de cada um dos produtos é apresentado em thumbnails (thumb.nail, segundo o Oxford American Dictionary, na computação: uma foto/retrato/figura pequena de uma imagem ou do leiaute de uma página), no topo da página, mesmo que eles não apareçam por completo em um primeiro momento.


21

Figura 7 (4) - Threadless T-Shirts

FONTE: Threadless T-Shirts, 2008.

Figura 8 (4) - Camiseteria

FONTE: Camiseteria, 2008.

As páginas do Threadless e do Camiseteria foram usadas como referência para disposição dos produtos vendidos pelo Projeto. Ao escolher um dos produtos, ambos os sites mostram ao usuário, modelos vestidos com as camisetas e maiores detalhes delas na mesma página, como padrões de tamanho e opções de pagamento. A diferença entre estes dois


22

websites e o do cliente deste Trabalho de Conclusão de Curso é que o Literato não vende os produtos através da sua página, apenas os apresenta ao consumidor que, quando decide efetuar a compra, é direcionado para portais de venda como o Saraiva.com, por exemplo.

4.2 Rafes Os rafes (roughs) são desenhos feitos à mão usados para apresentar idéias brutas para uma pré aprovação (CARVALHO, s.d.). Para que a cliente pudesse visualizar a idéia de construção de leiaute do site e suas características técnicas, foram feitos alguns rafes que mostram desde a posição dos elementos até a lógica de funcionamento da interface (CARVALHO, s.d.). Começando pela apresentação do menu em sua forma básica, os rafes foram apresentados da seguinte forma: Figura 9 (4) – Menu e abas de subpáginas.

FONTE: Desenvolvido pelo autor, 2008.

A fihura 9 mostra o menu em sua forma básica e também a posição dos links para as subpáginas.


23

Figura 10 (4)– Fundo atrás do menu.

FONTE: Desenvolvido pelo autor, 2008.

As obras dos artistas, usadas como fundo na maioria das páginas do website é mostrada pela figura 10. Todo o espaço ao redor do conteúdo principal está envolvido pelas estampas e ilustrações. Figura 11 (4) - Folhas

FONTE: Desenvolvido pelo autor, 2008.

Todo o conteúdo do site é carregado sobre folhas que surgem por trás do menu, cada


24

vez que o usuário clica em um link. No caso da imagem 11, as páginas aparecem acima e abaixo da barra do menu. Figura 12 (4) – Menu Móvel

FONTE: Desenvolvido pelo autor, 2008.

A característica móvel do menu é explicada na figura 12. Dependendo do espaço pedido pelo conteúdo a ser apresentado, o menu desce ou sobe com o clique do usuário.

4.3 Arquitetura do Website Antes de criar qualquer página que defina a aparência do website, é recomendável definir a posição de cada uma das páginas, para simular uma visita a ele e se ter uma idéia de qual será a sensação do usuário ao navegar pelas páginas. Conforme Lynch e Horton (2004), “a criação de um protótipo permite que os designers gráficos desenvolvam relações entre qual é a aparência do site e qual é a sua compatibilidade com o design das informações da interface para navegação”.


25

As informações fornecidas pela cliente e suas exigências levaram também em consideração uma organização do conteúdo de forma que o usuário pudesse conhecer tudo sobre o Projeto em uma ordem de importância. A organização hierárquica é praticamente uma exigência na Internet. A maior parte dos sites depende de hierarquias, indo da visão mais geral do site (como a página inicial) às páginas de sub-menus e conteúdos, divididos segundo uma ordem de especificidade crescente. Os segmentos de informação devem ser classificados de acordo com o seu nível de importância e organizados segundo as relações estabelecidas entre as unidades. (GUIA DE ESTILO DA WEB, 2004)

A arquitetura do site foi então definida da seguinte forma: Figura 13 (4) – Arquitetura do website

FONTE: Desenvolvido pelo autor, 2008.

4.4 Linguagem A Internet, pelas suas características, possui uma linguagem muito específica. O tempo que um usuário gasta em uma página de site é muito curto, principalmente se aquela página não consegue prender a atenção dele. Os textos precisam ser mais leves e curtos, a diagramação deles precisa passar essa idéia de mais suave, mais descontraído e rápido também. O leiaute, como para qualquer peça publicitária, precisa ser convidativo. A demanda do consumidor atual é muito relacionada a imagens: mais cores visuais do que informações


26

visuais, que vão requerer um outro tipo de atenção. A velocidade com que o consumidor se relaciona com websites também se refletem nas estatísticas que mostram que: “interessante é o facto de 50% dos utilizadores nunca passarem da página principal, de entrada. Tal significa que não viram nada de interessante ou suficientemente apelativo para clicarem uma vez onde quer que fosse e prosseguirem a consulta” (WIDDEMANN, 2005). Um website que fale de cultura e arte não poderia deixar de explorar cores, mas com a preocupação de manter o refinamento que o Projeto Literato pede e com o cuidado de dar mais destaque às obras dos artistas, às imagens dos produtos, mais do que a qualquer outro elemento gráfico.

4.5 Defesa dos Elementos A idéia de usar papel como elemento principal para o desenvolvimento da interface gráfica do website veio do princípio de que ele é a base ou a matéria-prima usada pelos dois artistas como suporte para seus trabalhos. É no papel que Manoel Affonso e Victor Moreira projetam suas idéias e inspiração, dando forma, cor e vida aos elementos que compõem seu trabalho e transformando o que antes era um espaço vazio. Todo o site foi construído sobre lâminas de papel organizadas de forma descontraída, buscando transmitir a idéia de movimento e leveza. O menu do site está disposto em uma barra horizontal móvel, que se desloca a cada página nova que é aberta. Dependendo da quantidade de informações e dos pesos que elas merecem, ele sobe ou desce, dando espaço pra que essas informações sejam melhor trabalhadas. Apesar do menu não permanecer fixo durante a navegação nas subpáginas, o visitante não se sentirá perdido, já que os links são apresentados sobre a barra do menu na home como o único elemento de destaque sobre um fundo opaco e que não desaparece de vista em nenhum momento da navegação. No menu foi usada uma textura de papel


27

envelhecido em um recorte de uma foto de um livro aberto, reforçando sutilmente o conceito que se escolheu para nortear o site: papel como matéria-prima principal para a obra dos dois artistas. As páginas da seção “Quem Provoca” trazem como background composições das estampas de Victor Moreira, quando a subpágina fala sobre o artista, e desenhos de Manoel Affonso quando a subpágina trata do escritor. “Sem o impacto visual de formato, cor e contraste, as páginas ficam graficamente desinteressantes e não motivarão a pessoa que as estiver visualizando” (LYNCH, HORTON, 2004, p.81). “A construção de um diagrama de leiaute geralmente começa pela análise da estrutura do conteúdo que você elaborou e pela decisão sobre o que você necessitará para a maior parte dos objetivos gerais de navegação” (LYNCH, HORTON, 2004, p.64). O leiaute do site a ser construído precisa ter espaço suficiente para comportar o que é necessário e pedido pelo cliente. É o caso da página de produtos, por exemplo, onde a quantidade de elementos é maior que nas outras páginas, mas mesmo assim tudo é disposto de uma forma que o usuário consegue identificar aonde ir e o onde ele precisa clicar pra ver as imagens dos produtos maiores, por exemplo. Estruturar o conteúdo serve também para dar uma ordem do que o usuário, que entra pela primeira vez no site, deve ver primeiro e então seguir para o resto das páginas. A diagramação das informações no site foi feita pensando em um bloco de 900x600 pixels. Para Lody (2004, [on line]), é a “abreviação de picture element (elemento da foto). É a menor parte de uma imagem digitalizada. Cada um destes pontos possui a informação que determina sua cor. Este conjunto de pontos é arrumado no formato de uma matriz. Essa matriz forma a imagem. O pixel determina a resolução desta imagem”. O bloco é visto toda vez que uma nova subpágina é aberta. Dessa forma é possível atrair a atenção do visitante para o todo o conteúdo do site de uma forma simples e concentrada, evitando páginas com longas


28

rolagens e onde as informações que ficam abaixo desse bloco perdem a força e, muitas vezes, passam despercebidas. Para que as informações fossem distribuídas de forma harmônica nas páginas foi necessário avaliar o peso dos objetos que iriam compor cada uma delas. As páginas que descrevem os artistas dão espaço para que o texto tenha uma leitura leve o leiaute tenha um peso maior abaixo da barra do menu com a foto do artista. Já nas outras páginas, onde fotos de produtos são mais pesadas, o contrapeso é feito com a barra do menu acima ou abaixo das mesmas. Se a barra dividisse ao meio dois elementos pesados, seria difícil distinguir qual dos dois exige mais atenção do visitante. Segundo Lynch e Horton (2004), “o equilíbrio e a organização geral dos elementos gráficos são fundamentais para atrair a atenção do leitor para o conteúdo” (p.82).

4.6 Estudo de Cores Conforme afirma Farina (1990), “psicólogos estão de comum acordo quando atribuem certos significados a determinadas cores que são básicas para qualquer indivíduo que viva dentro da nossa cultura” (p.111). Alguns dos significados psicológicos das cores enfaticamente utilizadas no leiaute do website estão descritos abaixo: - Preto: “é alegre quando combinado com certas cores. Às vezes tem conotação de nobreza, seriedade” (FARINA, 1990, p.113). - Amarelo: iluminação, conforto, idealismo, espontaneidade, originalidade. “Simboliza a cor da luz irradiante em todas as direções” (FARINA, 1990, p.114). Essas duas cores predominam na composição do leiaute base do site. O amarelo passa e reforça o espírito de um site cheio de idéias explosivas, originais e inquietas. O preto vem para dar um tom de seriedade ao site, fazendo dele também um site nobre e elegante.


29

5 Apresentação da Interface Gráfica Esse capítulo traz imagens da interface gráfica proposta pelo autor deste Trabalho de Conclusão de Curso para o website do Projeto Literato, em estudo ao longo de todo o relatório.

Figura 14 (5) – Home

FONTE: Desenvolvido pelo autor, 2008.


30

Figura 15 (5) – Abas de subpáginas

FONTE: Desenvolvido pelo autor, 2008.

Figura 16 (5) – Quem provoca? Manoel

FONTE: Desenvolvido pelo autor, 2008.


31

Figura 17 (5) – Quem provoca? Victor

FONTE: Desenvolvido pelo autor, 2008.

Figura 18 (5) – Use Literato

FONTE: Desenvolvido pelo autor, 2008.


32

Figura 19 (5) – Equipe

FONTE: Desenvolvido pelo autor, 2008.

Figura 20 (5) – Notícias (Fotos e Blog)

FONTE: Desenvolvido pelo autor, 2008.


33

Figura 21 (5) – Provoque

FONTE: Desenvolvido pelo autor, 2008.


34

6 Considerações Finais Reunir informações e publicar na web, requer atenção quanto aos objetivos do site, ao perfil do público principal, à estética a ser utilizada, ao conteúdo em si, ao orçamento, entre outros aspectos que são determinantes na construção de websites. O processo deve iniciar baseado em um briefing completo e uma pesquisa que contemple desde concorrentes até sites que não tenham conteúdo semelhante mas que possam servir de referência para a estética ou a mecânica da peça. Vários itens como mensuração e manutenção do website são igualmente importantes, mas não aprofundados neste Trabalho de Conclusão de Curso uma vez que o mesmo explora a direção de arte. Dessa maneira, o objetivo principal de criar e desenvolver a interface gráfica para o website do Projeto Literato passou por fases de reunião de idéias e obras dos artistas envolvidos, ao mesmo tempo em que era feito um estudo sobre a melhor forma para organizar e publicar esse conteúdo em um ambiente de fácil acesso, reunindo entretenimento, cultura e negócios. Foi através das definições da arquitetura das informações do website e após várias pesquisas e rafes elaborados, que pôde ser proposta uma identidade visual para o website do Projeto Literato com efetividade, eficiência e satisfação. Desenvolver esse projeto foi bastante útil, já que colocou em estudo e em prática todas as etapas anteriormente descritas. Como pontos positivos de um trabalho de direção de arte para web, pode-se citar o fato de sair da esfera de leiautes em maioria feitos para impressos e explorar técnicas e funções que não são possíveis de colocar numa folha de papel. No Projeto Literato, em particular, também lista-se a importância da liberdade de utilização de obras originais (desenhos e texturas) para a elaboração do leiaute.


35

Não existem pontos negativos a serem citados a partir desta experiência de desenvolvimento de leiaute para website. Um fato que ocorreu durante o processo criativo, mas que não se limita a criações para web, foi a incompatibilidade de idéias entre diretor de arte e cliente, no sentido de algumas sugestões que não eram adequadas ao leiaute e a mecânica proposta. O site, no entanto, foi aprovado com a satisfação de todos os envolvidos e já está no ar. A intenção é que o website do Projeto Literato seja atualizado sempre que surja algum produto novo ou haja necessidade de uma nova seção de produtos. O blog existente no site já funciona e é alimentado por uma jornalista/assessora de imprensa. Fotos também são adicionadas ao site sempre que algum evento do Projeto acontecer. Essa manutenção permite que o site seja dinâmico e faz com que os usuários queiram visitar o espaço outras vezes.


36

Referências Bibliográficas

ALEXANDRE COHANIUC. Disponível em: http://www.alexcohaniuc.com/. Acessado em: 20 Abr. 2008. CAMISETERIA. Disponível Acessado em: 15 Mai. 2008.

em:

http://www.camiseteria.com/product.aspx?pid=1097.

CARVALHO, Nelly. A Terminologia da publicidade. s.d. http://www.filologia.org.br/ixcnlf/16/03.htm Acesso em: 29 Mai. 2008.

Disponível

em:

FARINA, Modesto. Psicodinâmica das Cores em Comunicação. São Paulo: Edgar Blücher, 1990. 4 ed. LAROUSSE Cultural. Dicionário da Língua Portuguesa. São Paulo: Ed. Moderna, 1992. LODY, Fábio. I Masters [ on line ]. Disponível em http://imasters.uol.com.br/artigo/1681. Acessado em: 15 Ago. 2008. LUCY BLACKMORE. Disponível em: http://www.lucyblackmore.co.uk/. Acessado em: 20 Abr. 2008. LYNCH, Patrick J., HORTON, Sarah. Guia de Estilo da Web. Barcelona: Gustavo Gili, 2004 NE TV. Magia dos anos 70 redescoberta. 03 Maio. 2008. Disponível em: http://pe360graus.globo.com/tv360/noticiaVideo.asp?newsId=126504 . Acessado em 10 Mai 2008. OXFORD American Dictionary. Thumb.nail. Disponível em: http://www.oup.com/us/catalog/general/subject/Reference/EnglishDictionaries/?view=usa&ci =9780195170771. Acessado em: 02 Ago. 2008. PAIN IS GOOD. Disponível em: http://www.painisgood.com/. Acessado em: 20 Abr. 2008. PRADO, Antonio Carlos, RABELO, Carina. Paixões na Rede. Revista Isto é. n. 1950, ano 30, p. 66-69, 14 Mar. 2007.


37

RED&BLU. Disponível em: http://www.redblu.com/ Acessado em: 20 Abr. 2008. SAMPAIO, Rafael. Propaganda de A a Z: como usar a propaganda para construir marcas e empresas de sucesso. Rio e Janeiro: Campus, ABR, 1997. 4 ed. SANCHO, Juana M. Para uma tecnologia educacional. Porto Alegre: ArtMed,1999. THE CROSSINGS. Disponível em: http://www.thecrossings.cc/. Acessado em: 20 Abr. 2008. THREADLESS T-SHIRTS. Disponível em: http://www.threadless.com/product/1320/Lost_City. Acessado em: 15 Mai. 2008. WIDDEMANN, Julius. Advertising Now. On Line. China: Taschen, 2005.


Literato - Projeto do Web Site