CURSO DE WEBDESIGN - 11ª AULA

Estruturando conteúdo - O projeto


Para melhor adequação, há necessidade de identificar os elementos estruturais da composição funcional e os elementos formais da composição estética, o design gráfico das páginas e sua navegação coerentes com o tipo de informação veiculada.

Ao clicar com o mouse sobre um dos nós (links), que podem ser: uma palavra sublinhada, uma imagem, um ícone ou um botão, o usuário é remetido a uma outra página (documento), que pode residir ou não no mesmo Site.

Os documentos que compõem a WWW são denominados de "Sites" ou "Websites" e são compostos de "Home Page" e "Páginas Web". 

A Home Page faz a apresentação gráfica de um endereço eletrônico ou URL que localiza e identifica informações na Web, enquanto as Páginas Web são páginas que sucedem a Home Page nesta estrutura hipertextual. 

A Home Page e as Páginas Web encontram-se no "Site", um local virtual de empresas, pessoas, universidades e entidades que fazem parte do Ciberespaço.

Tecnicamente temos um hipertexto, um conjunto de nós interligados, que podem assumir características de palavras, textos, imagens, gráficos, ícones, logotipos, páginas e até outros links com possibilidade de acesso interno e externo ao próprio Site. 

Na elaboração deste espaço interativo, as características quanto à sua estrutura podem ser definidas como horizontal, vertical e mista, que determinam a forma do acesso às informações do site. 

Quando se fala em estrutura horizontal admite-se que as páginas contenham, em excesso, as informações no mesmo nível, isto é, a maior parte dos links acontecem em uma mesma página. 

Desta maneira não se recorre ao recurso de sucessivas etapas de aprofundamento, como no sistema Windows onde as janelas são vistas por níveis, existindo uma dentro da outra. 

A estrutura vertical pode ser considerada como inversa da horizontal, onde o uso deste recurso de aprofundamento acontece no limite, gerando um Site onde cada link se encontra em um nível diferente e portanto o tempo de acesso às informações aumenta. 

A estrutura mista seria um uso equilibrado das duas formas anteriores. 

Portanto, a topologia do Site pode até transformar a configuração semântica das informações e, desta maneira, deve ser elaborada de forma coerente com a intenção da mensagem a ser produzida e com a necessidade de atender aos diferentes usuários. 

Assim, o projeto de construção do Site deve ser norteado pela definição de um conceito, de acordo com o tipo e o objetivo da informação veiculada, além de considerar as características atuais de acesso do usuário à rede. 

Toda esta elaboração irá determinar o tempo de carregamento das páginas, e conseqüentemente, dimensionar as imagens e os recursos utilizados, como animações e áudio.

Pode-se usar uma divisão entre Navegação Interna e Externa, embora na verdade isto não ocorra de uma maneira tão clara e formal. 

A Navegação Interna ocorre dentro do mesmo Site, onde uma estrutura mantém o usuário navegando através dos pontos interligados nas páginas.

Navegação Externa leva o usuário para uma página dentro de outro Site, com outro endereço e com possibilidade de retorno externo ao se utilizar os recursos do software (comando back) ou com links de retorno, se existirem ou forem programadas janelas (frames) de exibição de conteúdo de outro site. 

Quando se fala em Navegação Interna, quer seja na mesma página ou no mesmo Site, a característica do meio tecnológico se faz presente ao definir um limite físico dado pelo monitor, como uma moldura que viabiliza um contexto próprio para as informações aí veiculadas. 

Este limite tecnológico define uma forma de leitura que só acontece com as páginas dimensionadas para este formato ou pela rolagem e troca das páginas através de determinados recursos. 

Estes recursos podem ser gráficos, como ícones e logotipos, imagens mapeadas, desenhos, figuras animadas e textos. 

Na criação das páginas e destes símbolos gráficos é possível se utilizar um padrão existente nos softwares ou mesmo de arquivo, e neste momento, o repertório do usuário determina o reconhecimento ou não destes recursos e sua utilização para navegação. 

Todos estes elementos, além de sua função estética, são responsáveis pela condução do usuário na Web, possibilitando que as informações possam ser ampliadas ou reduzidas e as idéias abertas e analisadas em diferentes níveis de detalhamento. 

Os símbolos gráficos utilizados são tratados como elementos de composição das páginas e podem estar presentes de forma constante, como por exemplo as barras de rolagem que ocupam o lado direito em toda a extensão das páginas, ou espaçadamente repetidas vezes.

O uso destes elementos deve permitir sempre que os usuários possam voltar para o início e final das páginas ou para qualquer outro ponto, que contenha um índice com a possibilidade de um novo percurso, de maneira eficaz e com rapidez. 

Os elementos disponíveis para navegação atuam como sinalizadores e indicadores de possíveis caminhos para os usuários, devendo portanto estarem integrados com a proposta do Site, quer seja artístico, comercial, acadêmico ou informativo. 

Em função do limite físico imposto pelo monitor e sua definição, pode-se identificar um outro recurso utilizado para apresentação das informações e imagens no site que transforma a tela inicial em várias janelas. 

A criação destas janelas, telas ou frames é possibilitada por softwares específicos, que permitem para cada janela percursos próprios dentro do site podendo a leitura até ocorrer com simultaneidade. 

De uma maneira geral, estas outras janelas acabam funcionando como elementos para navegação, facilitando o retorno para outros pontos do Site, avançando e retrocedendo mais rapidamente dentro da estrutura interna, possibilitando enfim, um acesso mais claro e direto à informação desejada pelo usuário. 

A Navegação Externa acontece quando os links existentes transportam o usuário para outros Sites, locados em diferentes pontos da rede. 

No entanto, é necessário uma estrutura interna, que delimite e contenha um espaço e portanto determine sua forma, que significa organização e ordenação, para que os links com os outros endereços ganhem coerência e continuidade dentro desta estrutura.

Para tanto, todas as possibilidades mencionadas anteriormente como recursos de mobilidade dentro da mesma página ou do mesmo Site, podem conter também diferentes endereços e assim transformar o caminho percorrido conforme a opção escolhida pelo usuário. 

Esta nova relação do usuário com as informações dispostas nas Páginas Web, depende das características próprias do Site, pois como proposta artística é possível uma intervenção do usuário na própria mensagem, enquanto um Site de caráter informativo pode querer do usuário apenas um retorno em forma de comentários ou sugestões através do mail ou de contato com o Webmaster.

As diferentes possibilidades de navegação levam ao conceito de interatividade, característica deste meio tecnológico capaz de transformar a forma de apresentação e apreensão de informações até então linear. 

O acesso não linear aos nós-informações e a capacidade de manipulação transformam o usuário e sua posição como receptor.

Elementos Formais da Composição Estética 

No que diz respeito ao aspecto visual de uma Página Web, verifica-se, a princípio, que existe uma certa semelhança com outras peças gráficas, que associam a comunicação verbal (através de texto) com mensagens visuais (imagens), como por exemplo: livros, revistas, cartazes, folhetos.

Porém, apesar de fazer uso dos mesmos elementos que participam de qualquer composição gráfica, a Página Web possui características muito específicas que a diferenciam dos demais produtos citados, como a inclusão de som e movimento, e principalmente, a sua essência mutável e transitória, definida pela possibilidade de múltiplos desdobramentos, propiciados pela estrutura hipertextual. 

De maneira geral a Página Web é composta de três categorias de elementos visuais básicos: 

  • o fundo, superfície suporte sobre o qual todos os outros elementos estão aplicados; 
  • as imagens, que são todos os objetos visuais que aparecem na composição da página (fotos, desenhos, ícones, símbolos gráficos);
  • e a tipologia, que além de funcionar como instrumento de registro da mensagem verbal pretendida (o texto propriamente dito), possui um caráter visual de extrema importância para a composição gráfica da página. 

Na construção de um Site pode-se utilizar elementos visuais de várias procedências. Alguns deles, principalmente símbolos e ícones, podem ser imagens de uso padrão, que por sua frequência de utilização terminam por se incorporar ao repertório visual do usuário, facilitando a compreensão dos comandos contidos nas mensagens gráficas, agilizando assim o acesso aos canais de navegação.

Já outros elementos visuais podem ser obtidos de coleções e arquivos específicos, muitos deles existentes na própria rede. Além disso, são também utilizados objetos visuais criados pelo próprio autor das páginas, utilizando algum dos diversos programas de manipulação de imagens existentes. 

Elementos:

Em termos estruturais o fundo de uma Página Web pode ser de dois tipos: 

  • uma cor, determinada a partir da própria construção em linguagem HTML (Hypertext Markup Language), 
  • ou um arquivo de imagem. 

No caso de ser utilizado um arquivo de imagem como fundo, devem ser observadas algumas condições específicas impostas pelas próprias características atuais do meio tecnológico.

vA primeira destas características refere-se à forma como os programas de edição em HTML criam fundos a partir de imagens. 

Isto é feito segundo uma repetição da mesma imagem lado a lado, tanto no sentido horizontal quanto no vertical, tantas vezes quantas forem necessárias para cobrir toda a extensão da página. 

Os outros fatores a serem considerados são as dimensões do display e o tamanho da imagem, em bytes, o que está diretamente relacionado ao tempo de carregamento da página quando da transmissão dos dados para o usuário. 

No que se refere ao aspecto plástico os tipos de fundo podem ser categorizados como: 

· fundo padrão - liso, de cor cinza, produzido pelos programas de edição HTML, quando não há nenhuma especificação definida para o fundo. 

· fundo liso colorido - pode ser obtido a partir de uma especificação definida em linguagem HTML (cerca de 16 milhões de cores). 

· fundos texturizados - são arquivos de imagens de pequenas dimensões reproduzindo superfícies de materiais ou elementos abstratos, que pela repetição lado a lado geram texturas. Muitas vezes o elemento repetido reproduz um nome, logotipo ou imagem associados ao conteúdo da página.

· fundo de imagem - composto geralmente por uma única imagem, cujas dimensões e posicionamento estão em harmonia com os limites do display. Na maioria das vezes sua intensidade encontra-se minimizada através da aplicação de algum efeito gráfico. 

· faixas verticais ou horizontais - fundo composto pela repetição de uma imagem cuja largura ou comprimento é igual à dimensão correspondente da página na qual será aplicado, criando assim faixas verticais ou horizontais de cores ou outros padrões. 

A escolha do fundo adequado para uma Página Web deve responder a vários fatores. Do ponto de vista estrutural deve ser leve o suficiente para permitir um carregamento mais rápido da página. No que diz respeito ao aspecto gráfico deve, antes de tudo, assegurar a legibilidade do que estiver sendo aplicado sobre ele, exibindo cores e padrões que se harmonizem, tanto a nível plástico quanto conceitual, com as imagens e a tipologia utilizada.

Imagens

Os objetos visuais encontrados nas Páginas Web podem ser classificados de acordo com sua função predominante, ou seja: comunicativa, operacional ou estrutural. 

Os elementos que assumem com mais intensidade a função comunicativa, são aquelas imagens que, predominantemente, contém determinadas mensagens visuais, quer sejam de caráter comercial, informativo, documental ou artístico. 

Estas imagens (fotos, desenhos, gráficos, logomarcas, símbolos, entre outros) podem ser "reaproveitadas" de outros contextos ou elaboradas especificamente para a rede.

Já a função operacional é representada por elementos como botões, barras, faixas que são aplicados principalmente como instrumentos de navegação, isto é, servem como acesso a outras regiões da mesma página, a outras páginas do mesmo Site ou a outros Sites. 

Finalmente, os elementos gráficos abstratos como pontos, linhas e planos de cor, que delimitam espaços e criam áreas de interesse, contribuindo para a configuração plástica da página, são exemplos onde a função estrutural está enfatizada.

Esta categorização é bastante relativa pois cada elemento visual pode estar associado a uma ou mais destas funções. 

Por exemplo, os recursos da programação em linguagem HTML possibilitam que qualquer imagem, ou mesmo áreas escolhidas das imagens (imagem mapeada), se transforme num link, ou canal de navegação, incorporando assim a função operacional. 

Do ponto de vista do design da página esta categorização mostra-se porém bastante importante porque permite que o tratamento aplicado a uma determinada imagem (cor, posição, dimensão) esteja em adequação com o grau de destaque que ela deve possuir dentro do contexto de criação do Site.

Outro fator que diferencia uma imagem aplicada em uma Página Web é sua característica estática ou dinâmica, sendo que a escolha de um destes dois tipos de imagem interfere no tamanho em bytes da página e, conseqüentemente, em seu tempo de carregamento. O projeto das páginas deve, portanto, definir o uso de imagens estáticas ou dinâmicas de forma criteriosa, adequando a inserção de um ou outro tipo de imagem aos objetivos da mensagem a ser veiculada, respeitando o conceito global elaborado para o Site.

As imagens estáticas são arquivos gráficos nos formatos JPEG (Joint Photographic Experts Group) e GIF (Graphics Interchange Format), que são os padrões atuais mais utilizados para compressão de imagens a serem transmitidas em rede. As imagens dinâmicas podem ser obtidas a partir da utilização da linguagem de programação JAVA ou pela criação de animações realizadas por programas específicos como Shockwave ou Gifcon. 

Além disso, podem ser incorporados arquivos de vídeo, sendo que os formatos mais usuais são o Vídeo for Windows ou Quick Time.

Tipologia

O terceiro componente visual na construção de uma página é a tipologia. 

O texto se integra à composição geral não apenas de forma conceitual, a partir do conteúdo semântico da mensagem textual, mas também pelo seu aspecto plástico. 

Apesar da linguagem HTML definir alguns padrões limitados para os tipos, características e disposição das letras em um texto, é possível obter uma gama maior de variações de forma, tamanho, posicionamento e efeitos. 

Os trechos do texto que necessitarem de um destaque visual diferenciado podem ser submetidos a um tratamento gráfico em um dos softwares de manipulação de imagens, passando então a ser inseridos na página como se fossem figuras. 

Isto confere mais alternativas para a diagramação do espaço da página, embora aumente o tempo de acesso à mesma pelo usuário.

Certamente as características formais que a tipologia assume em uma Página Web devem considerar, antes de tudo, os limites mínimos para uma boa leitura, como cores (em relação com o fundo) e tamanhos adequados. 

Além disso também é necessário que estejam em consonância com o perfil conceitual do Site.

Design Gráfico da Página Web

Como em todos os tipos de composição visual, é muito importante no projeto de uma página atentar para as relações formais que existem entre os elementos que participam de sua estruturação. É reconhecido que cada forma integrante de uma composição possui uma tensão interior que lhe confere sua força visual específica, como também possibilita a interação perceptiva e dinâmica com as tensões próprias dos demais elementos.

Segundo ARNHEIM (1980),

"O que uma pessoa ou animal percebe não é apenas um arranjo de objetos, cores e formas, movimentos e tamanhos. É, talvez, antes de tudo uma interação de tensões dirigidas. Estas tensões não constituem algo que o observador acrescente, por razões próprias, a imagens estáticas. Antes estas tensões são inerentes a qualquer percepção como tamanho, configuração, localização ou cor. Uma vez que as tensões possuem magnitude e direção pode-se descrevê-las como "forças" psicológicas".

Para que o design gráfico de uma página possa efetivamente expressar um todo homogêneo, a partir da interação entre as diversas partes que o compõem, os seguintes aspectos devem ser observados:

· as posições absolutas de cada elemento visual no espaço e as relações de proximidade e afastamento com os demais elementos;

· a proporção dos elementos entre si e em relação ao suporte;

· as direções e movimentos visuais sugeridos pelas formas;

· a valorização do conteúdo expressivo de cada elemento, bem como dos espaços vazios e intervalos entre as formas;

· as relações cromáticas, determinadas de acordo com o assunto ou com as características conceituais do Site;

· a unidade de linguagem visual adotada nas diversas páginas que compõe o Site.

Aliado a isto, a maneira característica pela qual são exibidas as Páginas Web deve ser levada em conta ao se elaborar um arranjo gráfico específico para as páginas de um Site. 

A associação entre um limite físico (tamanho da tela do monitor) e um recurso tecnológico (possibilitado pelas barras de rolagem dos programas de navegação) gera um suporte de dupla natureza, que é ao mesmo tempo limitado e contínuo.

Por esta razão a composição parece nunca estar restrita a um só quadro mas invade as áreas adjacentes, contaminando novos espaços que devem por sua vez ir se incorporando à relação estrutural do todo. 

Portanto o design gráfico de Páginas Web deve ser o trabalho sensível e consciente de articulação e arranjo entre os elementos plásticos, na busca de traduzir em um produto visual interativo uma determinada concepção conceitual, respeitando tanto as especificidades do universo da criação gráfica quanto as características do novo meio tecnológico utilizado como veículo.

Na construção de Páginas Web pode-se salientar a estrutura de navegação enquanto a própria topologia do Site, considerando-se a funcionalidade e lógica dos acessos internos e externos. 

No design gráfico, ressalta-se os elementos formais e suas relações de composição dentro da estrutura das páginas, além da adequação da linguagem visual com o conceito do Site numa tentativa de se obter uma síntese qualitativa, uma identidade visual coerente. 

Ou seja, o projeto de criação de um Site para veiculação na Web é uma tarefa que envolve conhecimentos específicos relacionados tanto à composição visual, responsável pelo tratamento gráfico das páginas, quanto ao desenvolvimento de produtos multimídia, através do qual se elabora a estrutura dos percursos de exploração dos vários caminhos que compõem o Site.

Para o desenvolvimento de um projeto coerente e eficaz, deve-se buscar a real integração destes conhecimentos, uma vez que as soluções obtidas em ambas as áreas serão aplicadas de forma interdependente. 

Para isso é necessário possuir uma noção precisa dos fatores que caracterizam os dois campos de atuação, bem como a consciência do alcance da intervenção de cada uma dessas áreas, no resultado final.

Outro fator primordial é estabelecer um perfil conceitual que seja capaz de representar com clareza a mensagem global a ser associada ao conteúdo do Site. 

É a partir desta idéia que serão definidos os parâmetros essenciais na construção da topologia mais adequada para o acesso às informações ali contidas, além dos princípios formais que devem ser evidenciados para que a configuração estética das páginas seja comunicativa, atraente e representativa.

Bibliografia:

  • Fleming, Jennifer - Web Navigation: Designing the User Experience # 2 September 1998.
  • Infopedia 2.0 - CD-ROM
     

    Exercício: Iniciar a estruturação do projeto.