Webmastering - Webdesign

Fevereiro 2017

Introdução ao webdesign

O termo “webdesign” designa a disciplina que consiste em estruturar os elementos gráficos de um website para traduzir, através de uma dimensão estética, a identidade visual da empresa ou da organização. Trata-se assim de uma etapa de concepção visual, por oposição à concepção funcional (ergonomia, navegação).

O objectivo do webdesign é valorizar a imagem da empresa ou da organização por meio de elementos gráficos para reforçar a sua identidade visual e oferecer um sentimento de confiança ao utilizador. No entanto, em virtude dos critérios de ergonomia, um site deve corresponder às expectativas dos utilizadores e, sobretudo, ajudá-los a encontrar facilmente a informação que procuram.

O webdesign é assim um compromisso entre uma apresentação que possui um grafismo que impressiona, permitindo dar uma credibilidade e uma imagem de marca à empresa, e uma navegação sóbria (ou mesmo contida) que permita ao utilizador encontrar facilmente o que procura.

Por extensão, o termo webdesigner designa o ofício que consiste em conceber o desenho de um website.

.

A necessária inspiração

O desenho de uma página web é sobretudo um acto artístico que combina invenção e criatividade. O objectivo deste guia é dar alguns elementos chave que permitem obter um desenho eficaz. No entanto, visitar sites de referência, nomeadamente sites profissionais, pode ser uma boa fonte de inspiração. É interessante, nomeadamente, estudar como cada um deles dispõe a informação, como são apresentados os menus e os blocos de informação e também determinar o que faz com que um síte pareça profissional.

Disposição da página

Geralmente, são criados modelos de páginas (em inglês templates), que servem de modelo para a criação do site. Os templates são imagens, com a forma de decalques, que representam o esqueleto gráfico de uma página tipo.

A estrutura tradicional de uma página web é a seguinte:

  • um logotipo situado na parte superior esquerda. Geralmente, o logotipo é clicável e conduz à página inicial;
  • uma zona de navegação (menu), situada à esquerda e/ou direita;
  • uma rubrica que contém o nome do síte, barra de navegação e uma zona prevista para uma faixa (publicitária ou não);
  • um corpo de página, contendo o essencial da informação;
  • um rodapé que reúne informações úteis como a data de actualização, um link para um formulário de contacto, um mapa de acesso, etc.



disposição da página web



É essencial distinguir, no template, os elementos invariáveis, idênticos em todas as páginas, dos que variam de uma página para a outra.

Estatuto gráfico

Um “carta gráfico” (em inglês graphic charter) é um documento sintético que recapitula as regras de apresentação dos elementos gráficos de um site, traduzindo a sua identidade visual.

O estatuto gráfico define o aspecto gráfico da página, nomeadamente as dimensões, cores e aparências dos textos, imagens e botões, bem como o posicionamento relativo dos objectos na página.

 

Maquete

Uma maquete é um síte web fictício (protótipo) que apresenta o grafismo do site e a sua navegação. A maquete permite formalizar a concepção do site e constitui geralmente a etapa de validação desta fase, para passar à fase de realização.

A maquete representa as páginas principais do site (sem conteúdo) através de páginas estáticas e permite simular a navegação. Assim, os elementos dinâmicos como o motor de busca poderão, por exemplo conduzir a uma página que apresenta resultados fictícios.

Dimensão das páginas

A dimensão da página web depende essencialmente da definição do ecrã do visitante (o termo "resolução" é utilizado erradamente).

Em termos de largura, o ideal é optar por um valor inferior à definição horizontal da maioria dos visitantes, para não os obrigar a deslocar a página com a barra horizontal. Com efeito, uma página estreita permite ao visitante visualizar facilmente a informação, para localizar os elementos que lhe interessam.

No que diz respeito ao comprimento, é desejável não exceder três a cinco alturas de ecrã. Com efeito, as páginas demasiado longas correm o risco de não ser lidas na totalidade e demoram mais tempo a carregar.

Para garantir uma afixação óptima na maior parte dos ecrãs, existem várias estratégias:

  • Escolher a mais largura pequena suportada pelo maior número de equipamentos (entre 600 e 800 pixéis de largura, por exemplo);
  • Escolher uma página que comporte quadros invisíveis de larguras variáveis (definidos em percentagens);
  • Detectar a resolução dos visitantes com um certificado (em javascript, por exemplo), e reencaminhar visitante para uma página com a boa largura. Este método exige que os visitantes tenham um navegador com o Javascript activado e a criação de várias páginas com as larguras desejadas.

Posição das informações

Aquando da criação das páginas, a posição da informação tem a sua importância. Dado o sentido de leitura das informações (em diagonal do canto superior esquerdo ao canto inferior direito), a informação situada na parte superior da página terá mais possibilidades de ser lida pelos visitantes.

Escolha das cores

É aconselhável não utilizar mais de três cores diferentes num website, para respeitar o critério de sobriedade. A escolha das cores deverá corresponder, se for caso disso, às cores da organização (nomeadamente às cores do logotipo) e exprimir um ambiente específico.

Independentemente da escolha das cores, deve estabelecer-se uma cor predominante, representando a parte essencial da página web, e uma ou várias cores secundárias mais bilhantes e vivas, em menores proporções, para destacar elementos.


As cores possuem um simbolismo implícito. Por isso é importante escolhê-las com conhecimento de causa. Com efeito, as cores influenciam o comportamento dos indivíduos:

  • fisicamente: apetite, sono, temperatura do corpo, etc.
  • emocionamente: sentimento de medo, de segurança, de alegria, etc.
  • psicologicamente: dinamismo, concentração, etc.

O quadro abaixo recapitula o significado associado classicamente às cores:


CorSimbólica positivaSimbólica pejorativaDomínio
AzulCalma, confiança, autoridade, apaziguamento, serenidade, protecção, seriedade, mística, bondade, água, céu, pazFrio, sonoNavegação, novas tecnologias, informática, medicina
VioletaDelicadeza, paixão, discrição, modéstia, religião.Melancolia, tristeza, luto, insatisfaçãoCultura, política
RosaEncanto, intimidade, mulher, belezaIngenuidadeDiário pessoal, mulheres
VermelhoCalor, força, coragem, dinamismo, triunfo, amor, entusiasmo.Violência, cólera, perigo, urgência, proibições, sangue, inferno.Luxo, moda, desporto, marketing, meios de comunicação social
LaranjaTepidez, conforto, glória, felicidade, riqueza, honra, prazer, citrinos, odor, tonicidade, vitalidade.Fogo, alertaDivertimento, desporto, viagens
AmareloLuz, alegria, sol, vida, poder, dignidade, ouro, riqueza, imortalidade.
Engano, egoísmo, inveja, orgulho, alerta

Turismo
VerdeNatureza, vida vegetal, auxílio, equilíbrio, fé, apaziguamento, repouso, confiança, tolerância, esperança, orgulho, juventude, caridade. Descobertas, natureza, viagem, educação
CastanhoCalma, filosofia, terra-mãe.SujidadeAmbiente
BrancoPureza, inocência, neve, limpeza, frescura, riqueza. Moda, notícias
CinzentoNeutralidade, respeito. Desenho, associações, organizações com fins não lucrativos
PretoSobriedade, luxo, noite.Morte, obscuridade, tristeza, monotonia.Cinema, arte, fotografia e proibição


A composição das cores tem igualmente uma influência sobre a percepção dos volumes. A composição das cores pode oferecer uma sensação de bem-estar, tanto na decoração de uma casa, como no grafismo de um site.

O círculo cromático é um bom instrumento que permite visualizar as interacções entre as cores. O círculo cromático é uma representação circular das cores, na qual figuram as cores seguintes:

  • As cores primárias (vermelho, azul, verde), cores “puras”, que não podem ser obtidas por mistura de outras cores;
  • As cores secundárias (cyan, magenta, amarelo), obtidas com a mistura em partes iguais de duas cores primárias adjacentes. As cores secundárias opõem-se diametralmente à sua cor complementar no círculo cromático;
  • As cores terciárias, obtidas por mistura de uma cor primária com uma cor secundária.

As cores podem também ser divididas em cores “quentes” (cujo tom é próximo do vermelho) e “frias” (mais próximas do azul).

círculo cromático




Existem regras universais que regem a harmonia das cores, dadas as propriedades físicas do olho. Com efeito, quando contempla uma cor, o olho cria automaticamente, no seu contorno, um filtro da cor complementar. Fala-se de“contraste simultâneo”. Devido a este mecanismo, a percepção das cores depende das cores vizinhas. Assim, o amarelo parecerá mais alaranjado quando é associado ao azul e o azul parecerá mais violeta. Azul ao lado de um vermelho parecerá um pouco verde, etc.

Além disso, cores vizinhas no diagrama cromático criam uma sensação de equilíbrio para o olho, em virtude da ausência de contraste, é a “harmonia de analogia”.

Existem, então, duas maneiras principais de escolher cores harmoniosas:

  • escolhendo matizes de uma mesma cor, ou cores da mesma gama com tons semelhantes,
  • misturando cores complementares (quentes e frias), ou seja, cores afastadas no diagrama cromático. Para duas cores, basta escolher cores complementares, diametralmente opostas; para três cores, as cores escolhidas devem formar um triângulo equilátero, etc.



Por último, elementos de cor quente parecerão globalmente maiores que elementos de cor fria.

Escolha das imagens

As imagens permitem decorar um site e torná-lo mais alegre. No entanto, o abuso de imagem pode obstruir o conforto visual, bem como o carregamento das páginas.

Os webmasters principiantes gostam de alegrar o seu site com animações retiradas da web. Na medida do possível, é preferível esquecê-las, porque podem enervar o leitor dão um ar amador ao síte.

Cor de fundo

A escolha da cor de fundo (em inglês background) é primordial, porque um fundo mal escolhido pode obstruir a legibilidade. Um bom contraste entre a cor de primeiro plano e a cor dominante do fundo é necessário. A esse respeito, desaconselha-se fortemente optar por um fundo gráfico, porque pode impedir a leitura e transmite geralmente um sentimento de amadorismo. O fundo escolhido deverá assim ser algo pálido.

Tipografia


Não se devem utilizar mais de dois tipos de letra num site. Os tipos estilizados devem ser utilizados com parcimónia (para o título por exemplo) e o essencial da página web deverá ser realizado com um tipo clássico (Arial, Verdana, Helvetica, etc.).

Nos textos impressos tradicionais, os tipos de letra com serifas (pequenos traços e prolongamentos que aparecem no fim das hastes das letras) facilitam geralmente a leitura, porque as distâncias entre eixos permitem acompanhar o olhar do leitor.


Na net, a utilização de tal tipo de letras é desaconselhada, porque de acordo com a definição do ecrã do visitante, as distâncias entre eixos podem tornar-se muito rapidamente em empecilhos para a leitura. Assim, é desejável optar por letras sem serifas, mais redondas.


Por último, convém saber que os textos que utilizam letras não standardizadas correm o risco de não aparecer correctamente nos ecrãs dos cibernautas. Para criar títulos com tais letras é possível, no entanto, contornar esta limitação criando imagens transparentes que comportam o texto.

Símbolos gráficos

É aconselhado usar pictogramas ou ícones, para criar uma sinalização visual. Atenção, contudo, à escolha dos símbolos, porque o sentido apreendido pelo utilizador pode ser diferente do que se lhe atribuiu, nomeadamente se o site tiver uma vocação internacional. Assim, os pictogramas seguintes são geralmente utilizados:

  • uma lupa representa habitualmente uma função de busca;
  • um envelope representa a possibilidade de contactar o webmaster por mail;
  • um ponto de interrogação representa uma ajuda em linha;
  • uma casa representa um link para a página de acolhimento;
  • uma bandeira indica a língua da página corrente ou a possibilidade de mudar de língua.

Veja também


Webmastering - Webdesign
Webmastering - Webdesign
Webmastering - Diseño web
Webmastering - Diseño web
Webmastering - Webdesign
Webmastering - Webdesign
Webmastering: Webdesign
Webmastering: Webdesign
Este documento, intitulado 'Webmastering - Webdesign', está disponível sob a licença Creative Commons. Você pode copiar e/ou modificar o conteúdo desta página com base nas condições estipuladas pela licença. Não se esqueça de creditar o CCM (br.ccm.net) ao utilizar este artigo.