Interface para o ambiente hipermídia Fundamentos da Cor do projeto AVA_ AD

Transcrição

1 Interface para o ambiente hipermídia Fundamentos da Cor do projeto AVA_ AD The graphical interface of the color basis hypermedia of the virtual learning environment for architecture and design Alice C. Pereira 1 Berenice Gonçalves 2 Juliano Regis da Silva 3 Paulo Germano 4 Resumo O presente artigo aborda o desenvolvimento da interface para o ambiente hipermídia Fundamentos da Cor, caracterizado como um desdobramento do projeto AVA_AD. Inicialmente apresenta-se os objetivos e conteúdos abordados no hipermídia. Num segundo momento, trata-se da criação da interface, em que são apresentados os padrões cromáticos e formais, o desenvolvimento de estudos gráficos, bem como a solução final. O maior desafio foi construir uma interface que mantivesse a identidade do projeto AVA_AD e, simultaneamente, a especificidade para o hipermídia. Palavras-chave: hipermídia, cor, interface gráfica Abstract This article approaches two aspects concerning the graphical interface of the Color Basis hypermedia, a sub-product of the Virtual Learning Environment for Architecture and Design (VLE_AD). Objectives and contents are presented as well as the interface s creation proccess. Formal and color patterns studies supported the final solution proposal. Keeping the visual identity of the VLE_AD project was the major challenge. Key-words: hypermedia, Color, graphical interface 1 Introdução O ambiente hipermídia Fundamentos da cor tem como principal objetivo abordar o fenômeno cromático de modo sistêmico, apresentando os diferentes campos de conhecimentos que colaboram para sua compreensão. Assim, mesmo ciente da 1 alice@ava.ufsc.br 2 berenice@ava.ufsc.br 3 julianoregis@pop.com.br 4 paulo.germano@gmail.com.br

2 2 complexidade do tema, buscou-se, ao longo do projeto do ambiente destacar os fundamentos da teoria da cor direcionada a área de Projeto Gráfico. Este hipermídia foi desenvolvido no contexto do Projeto AVA_AD [Ambientes Virtuais de Aprendizagem em Arquitetura e Design] do Dep. de Expressão Gráfica da Universidade Federal de Santa Catarina. (GONÇALVES; PEREIRA, 2004). Atualmente o AVA_AD é suportado por um site, e objetiva o desenvolvimento de atividades de aprendizagem colaborativas, à distância, sobretudo nas áreas de Arquitetura e Design. Nesse contexto, o ambiente hipermídia Fundamentos da Cor foi desenvolvido para atender a duas necessidades: apoiar às atividades a distância propostas na plataforma AVA_AD, como também, apoiar cursos presenciais (ou processos individuais de aprendizagem) sobre o tema Fundamentos da Cor. de estudo e bibliografia complementar para aprofundamento dos assuntos.os exercícios disponíveis estão divididos em três grupos: exercícios interativos, exercícios de análise e composição. Estes podem ser realizados individualmente, em grupo ou explorados num contexto formal de sala de aula. Figura 1:interface do site do AVA_AD Fonte: 2 A hierarquização dos conteúdos do hipermídia Fundamentos da Cor Os conteúdos abordados no hipermídia enfatizam os fundamentos físicos, fisiológicos e cognitivos da cor, os princípios de organização cromática no espaço bidimensional, as estratégias de harmonia e contraste. A imagem a seguir (figura 2) apresenta os principais eixos de conteúdos abordados no CD. As relações entre cor, modelos de representação e tecnologias também são destacadas tendo em vista a importância desse tema para á área de design gráfico. Ao longo dos tópicos de conteúdos são disponibilizadas dicas, sugestões Figura 2: Fluxograma de conteúdos do Hipermídia Fundamentos da cor. Fonte: Arquivos do projeto AVA_AD

3 3 3 O desenvolvimento da Interface Para início do processo de criação da interface do hipermídia Fundamentos da Cor, foi necessário aprofundar a estrutura do ambiente on-line, explorando aspectos como navegação, organização de conteúdos, padrões dos exercícios, imagens e textos, visando facilitar a estruturação do processo de criação. A partir deste reconhecimento, um mapa com toda a estrutura de informações acerca do Tema Fundamentos da cor contidas no site foi criado, visando auxiliar o entendimento do conteúdo como um todo. A partir desta estrutura montada, buscou-se definir aspectos que norteariam o projeto da interface. Foram estabelecidas as principais diferenças a serem apresentadas no hipermídia. Duas das principais diferenças apontadas foram: O projeto deveria levar em conta a utilização de mais recursos dinâmicos, Apesar do respeito ao projeto de identidade visual do ambiente AVA AD, através da utilização de elementos gráficos e cores institucionais, a interface para o CD Rom Cor deveria possuir uma identidade própria, que o diferenciasse do ambiente virtual online; 3.1 Padrões de Identidade Visual O primeiro aspecto para o desenvolvimento da interface do Hipermídia foi considerar o projeto de Identidade Visual do site do AVA_AD (PEÓN, 2000; FRAGNANI, 2004). Buscou-se admitir pequenas variações considerando o padrão cromático do AVA. Assim, adotou-se as cores predominantes na interface, conforme mostra a figura abaixo. Figura 3: Escala Cromática para a Interface do CD Rom. Fonte: arquivos do AVA_AD. Nas áreas destinadas aos conteúdos (textos e imagens) optou-se pelo fundo cinza visando o favorecimento da legibilidade, sobretudo quando em contraste com a cor a ser utilizada nos textos (Azul R: 0; G: 51; B: 102). Também por ser um tom de uma escala acromática (PEDROSA, 1982), não interfere na leitura de imagens coloridas, as quais ocorrem freqüentemente nos conteúdos do CD Rom. Outro elemento de suma importância a figurar na interface foi a marca do projeto AVA AD, presente em todo o material institucional do projeto. Figura 4: Marca do Projeto AVA AD. Fonte: Manual de identidade do AVA_AD (FRAGNANI, 2004) 3.2 O grid da interface Para a definição do grid da interface a equipe realizou discussões acerca dos requisitos principais de navegação e exibição do conteúdo (RADFAHRER,1999). Assim, foram ressaltadas as áreas de menus; os espaços destinados à exibição do conteúdo propriamente dito; a localização dos ícones que funcionariam como atalhos para recursos disponíveis dentro da mídia; a forma de apresentação das dicas, do glossário e demais conteúdos ativos e a definição de espaços para a exibição dos elementos institucionais do projeto. Uma importante decisão recaiu sobre o menu principal. Devido a grande quantidade de tópicos e sub-tópicos de conteúdos disponíveis, um menu retrátil seria a melhor solução. Concluiu-se que este tipo de menu oferece uma visão geral dos conteúdos, exibindo seus tópicos como partes da estrutura de uma árvore e facilitando a navegação (NIELSEN,2000; KRUG,2001).

4 4 3.3 Os estudos gráficos iniciais A partir de todas as informações previamente definidas, partiu-se para a fase de elaboração da interface. Como primeiro estudo foi desenvolvida uma interface que em muito se assemelhou à interface do site. Destacou-se uma barra superior em azul contendo a marca situada na lateral esquerda. O espaço destinado ao conteúdo situa-se na parte central da interface. Na parte inferior encontram-se os ícones /links que levam aos conteúdos complementares. Nas três áreas citadas predominou a cor verde, como forma de estabelecer um equilíbrio com a barra azul superior. A posição do menu foi modificada e um primeiro experimento com tipografia visando à padronização de exibição do módulo em questão foi feito nesta proposta (figura 6) Como estratégia de projeto, buscou-se desenvolver algo diferenciado na interface para o CD Rom, foi criada uma segunda proposta. Este estudo envolveu uma maior exploração cromática e formal, dando um aspecto um pouco menos rígido à interface. Valorizou-se a distribuição das áreas de informações em uma estrutura geometrizada (ARNHEIM, 1984). Elementos como linhas aparentes, texturas e tons foram agregados ao estudo visando um contraponto com os estudos anteriores. Outros elementos visuais foram agregados aos já existentes, dando um aspecto completamente diferente em relação ao previsto para a interface. Procurou-se manter o equilíbrio através da contraposição de pesos, valendo-se de aspectos cromáticos e formais. Figura 5: Proposta 1 para Interface. Fonte do Autor. A partir deste, outro estudo foi desenvolvido, imprimindo modificações que trouxeram mais especificidade ao projeto gráfico. Figura 7: Proposta 2 para Interface. Fonte do Autor. Num estudo principal, utilizou-se o contraste entre duas cores institucionais (PEON, 2000), o azul e o cinza, este último utilizado como cor predominante na interface. Também utilizou-se recursos gráficos como manchas visando um aspecto mais informal e contrastando com a proposta principal. 4. Solução final Figura 6: Segundo estudo para interface. Fonte: Arquivos do projeto AVA_AD Com base nos estudos preliminares, elegeu-se as principais orientações para a configuração da interface final, assim buscou-se:

5 5 1. A possibilidade de adaptação da interface a outros temas/ conteúdos desenvolvidos pelo projeto AVA_AD; 2. A manutenção da marca do projeto AVA_AD; 3. O uso de uma barra superior/inferior, destinadas a servir como elemento delimitador do espaço da interface, separando a área central dos demais elementos; 4. O uso de uma área destinada ao menu principal (de conteúdos); 5. Um espaço destinado aos menus secundários, 6. Uma área destinada aos conteúdos escolhidos pelo usuário; 7. Uma área destinada aos textos contendo dicas referentes ao conteúdo ativo; 8. Uma área destinada aos textos do glossário de termos referentes ao conteúdo ativo; 9. O Emprego dos mesmos ícones já desenhados no âmbito do projeto AVA_AD. qualquer momento os conteúdos do ambiente. Este tipo de menu hierarquiza os conteúdos, exercícios e material de apoio, objetivando a visão global das informações disponibilizadas. Assim, mesmo os níveis mais específicos do conteúdo podem ser encontrados de maneira prática. Ao selecionar um conteúdo no menu hierárquico, o conteúdo é apresentado na parte central da interface (figura 9). Essa área suporta, além dos textos on-line, animações, interações e imagens que ilustram o ambiente mantendo assim a linguagem gráfico-visual do projeto AVA_AD. A interface do CD possui as mesmas dimensões do ambiente on-line, visando maior praticidade na transposição dos conteúdos do projeto. A partir das orientações supra citadas, o nome do hipermídia foi destacado em caixa alta no canto superior esquerdo (figura 8), que é onde se dá início o processo de leitura de imagens e textos na cultura ocidental (ARNHEIM, 1984). Figura 9: Interface final do Hipermídia Fundamentos da Cor Fonte: Arquivos do projeto AVA_AD Figura 8: Grid construído a partir dos requisitos de projeto.(1) Marca do projeto; (2) barra superior (3) área do menu retrátil, (4) menu secundário, (5) área de trabalho. Fonte: Arquivos do projeto AVA_AD O menu retrátil foi implantado na área esquerda da interface, de modo a disponibilizar a Ainda foram mantidos alguns links que levam as ferramentas de suporte à aprendizagem. Os três ícones encontrados abaixo dos conteúdos Exercícios Interativos, Dicas e Sugestões de Estudo complementam os dados do tópico estudado, tornando-se disponíveis quando necessário. Já os três ícones (links) localizados na barra superior Laboratório Interativo de Cor, Glossário e Ajuda - estão disponíveis em qualquer tela do ambiente. Estas ferramentas de apoio foram também adaptadas às novas necessidades e restrições. O glossário, revisado e ampliado, e o link

6 6 ajuda foram desenvolvidos especialmente para o hipermídia. Os exercícios interativos foram reestruturados, oferecendo aos usuários um feedback imediato. Figura 11: Interface do glossário do hipermídia Fundamentos da cor Fonte: Arquivos do AVA_AD Figura 10: Interface dos exercícios interativos do ambiente. Fonte: Arquivos do projeto AVA_AD. A identidade visual do projeto foi respeitada, tanto no padrão cromático (já citado anteriormente) quanto na tipografia utilizada, além da apresentação da marca (figura 2) como link para os créditos do projeto. Alguns elementos visuais do ambiente on-line foram mantidos, conferindo assim, unidade à interface dentro do AVA_AD. Para o desenvolvimento desta interface foi necessário um estudo das particularidades de cada veículo de aprendizagem e suas semelhanças com o propósito de minimizar os problemas ligados à transposição dos conteúdos de um ambiente ao outro. Apesar de se tratarem de dois meios virtuais, observa-se que estes funcionam de forma específica. Podem apresentar limitações e oportunidades variadas, por exemplo: tecnologias que envolvem banco de dados ou necessitam de servidor (PHP, por exemplo) tiveram que ser abandonadas no hipermídia. 5. Conclusão No ambiente hipermídia Fundamentos da Cor buscou-se explorar as diversas possibilidades de interatividade, através de uma navegação dinâmica e clara, enfatizando o uso de hot words que fazem a ligação entre os conteúdos e o glossário de cor. Ao longo do projeto também se buscou desenvolver um modelo de interface que pudesse abrigar outros temas desenvolvidos pelo projeto AVA_ AD. Dessa forma, o projeto pode dar seqüência ao seu desenvolvimento, sempre visando à expansão qualitativa de suas operações frente à sociedade que necessita e requer novas propostas pedagógicas para a aprendizagem. Para que os CDs atendam a esta função, deve-se levar em consideração, também, as limitações do público alvo, suprir as necessidades visando o máximo de conforto visual. A hipermídia está concluída e encontra-se em fase de publicação. Desta forma, o AVA_AD gera mais um produto de apoio aos processos virtuais e presenciais de aprendizagem. 6. Referências Bibliográficas ARNHEIM, Rudolf. Arte e Percepção Visual Uma Psicologia da Visão Criadora. São Paulo, Livraria Pioneira Editora, GONÇALVES, PEREIRA, 2004.

7 7 FRAGNANI, Patrícia. Manual de identidade do projeto AVA_AD. Arquivos do AVA_AD, NIELSEN, Jakob. Projetan do websites. Rio de Janeiro: Campus, PEDROSA, Israel. Da Cor à Cor Inexistente, Rio de Janeiro, Léo Christiano Editorial Ltda: PEÓN, Maria Luísa. Sistemas de identidade visual. Rio de Janeiro: 2AB, RADFAHRER, Luli. Design/web/design. São Paulo: Market Press, KRUG, Steve. Não me faça pensar. São Paulo: Market Books, BOYLE, Cailin. Color Harmony for the Web: A Guide for Creating Great Color Schemes On- Line Gloucester: Rockport, 2001