Webmastering - Webdesign
O que é Webmastering
O termo Webmastering 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 da etapa de 'concepção visual', por oposição à concepção funcional (ergonomia, navegação).
O objetivo do Webmastering é 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 usuário. No entanto, em virtude dos critérios de ergonomia, um site deve corresponder às expectativas dos usuários e, sobretudo, ajudá-los a encontrar facilmente a informação que procuram. assim, há um compromisso entre uma apresentação que possui um grafismo que impressiona, permitindo credibilizar o site e uma imagem de marca da empresa associando uma navegação sóbria (ou mesmo contida) que permite ao usuário encontrar facilmente o que procura. O termo webdesigner designa o ofício da pessoa que concebe o desenho de um website.
O desenho de uma página web é sobretudo um ato artístico que combina invenção e criatividade. Visitar sites de referência profissionais pode ser uma boa fonte de inspiração. É interessante, 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 seja percebido como profissional.
Como definir a disposição da página
Geralmente, são criados modelos de páginas, os 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 atualização, um link para um formulário de contacto, um mapa de acesso, etc:
É 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.
Como é normalizado o uso gráfico de um site
Uma convenção gráfica (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 com as dimensões, as cores e aparências dos textos, imagens e botões, bem como o posicionamento dos objetos na página.
Como é a 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. Ela representa as páginas principais do site (sem conteúdo) através de páginas estáticas, mas que já permite simular a navegação. Assim, os elementos dinâmicos como o motor de busca poderão, por exemplo, levar à uma página que apresenta resultados fictícios.
Como é concebida a dimensão das páginas
A dimensão da página web depende essencialmente da definição da tela do visitante (o termo resolução é mal empregado).
Em termos de largura, o ideal é optar por um valor inferior à definição horizontal da maioria dos visitantes, para não obrigá-los a deslizar a página pela barra horizontal. Uma página estreita permite ao visitante visualizar facilmente a informação, para localizar os elementos que interessam mais.
No que diz respeito o comprimento, é desejável não exceder três a cinco alturas da tela. As páginas muito longas correm o risco de não ser lidas na totalidade e demoram mais tempo a carregar. Para garantir uma boa viualização na maior parte das telas, existem várias estratégias como escolher a menor largura suportada pelo maior número de equipamentos (entre 600 e 800 pixels 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 o visitante para uma página com a boa largura. Este método exige que os visitantes tenham um navegador com o Javascript ativado e a criação de várias páginas com as larguras desejadas.
Como posicionar as informações
Durante a 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.
Saber 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 (principalmente à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 brilhantes 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: fisico: apetite, sono, temperatura do corpo, etc; emocional: sentimento de medo, de segurança, de alegria; psicológico: dinamismo, concentração, etc. O quadro abaixo recapitula o significado associado às cores:
| Cor | Simbólica positiva | Simbólica pejorativa | Domínio |
|---|---|---|---|
| Azul | Calma, confiança, autoridade, apaziguamento, serenidade, proteção, seriedade, mística, bondade, água, céu, paz | Frio, sono | Navegação, novas tecnologias, informática, medicina |
| Violeta | Delicadeza, paixão, discrição, modéstia, religião | Melancolia, tristeza, luto, insatisfação | Cultura, política |
| Rosa | Encanto, intimidade, mulher, beleza | Ingenuidade | Diário pessoal, mulheres |
| Vermelho | Calor, 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 |
| Laranja | Tepidez, conforto, glória, felicidade, riqueza, honra, prazer, citrinos, odor, tonicidade, vitalidade | Fogo, alerta | Divertimento, desporto, viagens |
| Amarelo | Luz, alegria, sol, vida, poder, dignidade, ouro, riqueza, imortalidade | Engano, egoísmo, inveja, orgulho, alerta |
Turismo |
| Verde | Natureza, vida vegetal, auxílio, equilíbrio, fé, apaziguamento, repouso, confiança, tolerância, esperança, orgulho, juventude, caridade | Descobertas, natureza, viagem, educação | |
| Castanho | Calma, filosofia, terra-mãe | Sujidade | Ambiente |
| Branco | Pureza, inocência, neve, limpeza, frescura, riqueza | Moda, notícias | |
| Cinzento | Neutralidade, respeito | Desenho, associações, organizações com fins não lucrativos | |
| Preto | Sobriedade, 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 para visualizar as interações entre as cores. O círculo cromático é uma representação circular das cores, na qual figuram 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 pela mistura de uma cor primária e 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):
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.
Como escolher as imagens
As imagens permitem decorar um site e torná-lo mais atraente. No entanto, o abuso de imagem pode obstruir o conforto visual, bem como o carregamento das páginas.
Os webmasters principiantes gostam de enriquecer o seu site com animações encontradas na web. Na medida do possível, é preferível esquecê-las, porque podem írritar o leitor por conferir um ar amador ao síte.
Qual as melhores cores para o plano de fundo do site
A escolha da cor de fundo (em inglês background) é primordial, porque uma cor 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 com tonalidades suaves.
Qual tipografia usar
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 resolução da tela 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 estandardizadas correm o risco de não aparecer corretamente nas telas. Para criar títulos com tais letras é possível, no entanto, contornar esta limitação criando imagens transparentes que comportam o texto.
Quais símbolos gráficos usar
É aconselhado usar pictogramas ou ícones, para criar uma sinalização visual. Atenção, contudo, à escolha dos símbolos, porque o sentido apreendido pelo usuário pode ser diferente do que foi atribuído, principalmente 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.
Assine nossa newsletter!
