Qual será a aparência do seu site da Web?

Este artigo descreve o planeamento e conceptualização necessários antes de escrever o código do site da internet, incluindo "Que informação é que o meu site oferece?", "Quais os tipos de letra e cores que eu quero?" e ​​"O que é que o meu site faz?"

Antes de tudo: planeamento

Antes de fazer o que quer que seja, precisa de algumas ideias. O que é que o seu site realmente deve fazer? Um website pode fazer qualquer coisa, mas para a sua primeira tentativa, procure manter as coisas simples. Vamos começar a criar uma página web simples com um cabeçalho, uma imagem e alguns parágrafos.

Para começar, irá precisar de responder a estas questões:

  1. De que se trata o seu site da Web? Gosta de cães, Nova Iorque, ou Pacman?
  2. Que informação é que vai apresentar no assunto? Escreva um título e alguns parágrafos, e pense numa imagem que gostaria de mostrar na sua página.
  3. Como será apresentado o seu site da Web, em termos simples de alto nível? Qual é a cor de fundo? Que tipo de letra é apropriado: formal, cartoons, negrito e tom alto, subtil?

Nota: projetos complexos precisam de diretrizes detalhadas que abordem todos os detalhes de cores, tipos de letra, espaçamento entre elementos de uma página, estilo de escrita apropriado, e assim por diante. Isto às vezes é chamado guia de desenho ou livro de marca, e pode ver um exemplo em  Firefox OS - Orientações (inglês).

Esboçar o seu desenho

A seguir, pegue numa caneta e papel e crie um esboço do layout do seu site. Para a sua primeira página, não há muito o que esboçar, mas deve adquirir o hábito de fazer isso agora. Isto é mesmo uma grande ajuda — não tem que ser um Van Gogh!

Nota: Mesmo em sites a sérios, complexos, a equipa de design costuma começar com esboços grosseiros em papel e mais tarde constrói maquetes digitais com um editor de imagem ou tecnologias web.

Equipas de desenvolvimento web geralmente incluem um designer gráfico e um designer user-experience (UX). Obviamente, os designers gráficos montam os elementos visuais do site. Designers UX têm um papel mais abstrato, que consiste em abordar a forma como utilizadores vão experimentar e interagir com o site.

Escolha do conteúdo

Nesta altura, é boa ideia começar a criar o conteúdo que virá a aparecer na sua página da internet.

Texto

Ainda deve ter o parágrafo e títulos de há bocado. Mantenha-os por perto.

Cor do tema

Para escolher uma cor, vá ao Seletor de Cores e encontre uma cor de que gosta. Quando clicar numa cor, vai ver um código estranho com seis caracteres, tal como #660066. Este é um código hexadecimal que representa um tom de cor específico. Aponte o código num local de fácil acesso.

Imagens

Para escolher uma imagem, pesquise Images no Google procure algo adequado.

  1. Quando encontrar a imagem que quer, clique nela.
  2. Prima o botão Ver imagem.
  3. Na página seguinte, carregue o botão direito do rato (Ctrl + clique nos Mac), escolha Guardar imagem como..., e escolha um lugar seguro para guardar a imagem. Em alternativa, copie o endereço da imagem da barra de endereço do seu navegador para a utilizar mais tarde.

Nota: A maioria das imagens, includindo na pesquisa de Imagens do Google, estão protegidas por direitos de autor. Para reduzir probabilidades de violar estes direitos, pode usar o filtro de licença do  Google. Primeiro, clique em Ferramentas de Pesquisa, e depois em Direitos de utilização:

Tipo de letra

Para escolher um tipo de letra:

  1. Vá ao Google Fonts e deslize para baixo até encontrar um de que goste. Também pode usar os controlos à direita para filtrar resultados.
  2. Clique no ícone "mais" (Adicionar) perto do tipo de letra que escolheu.
  3. Clique no botão "* Family Selected" no painel no fim da página ("*" será o número de tipos de letra selecionados).
  4. Na caixa apresentada, copie as linhas de código que o Google lhe dá para um editor de texto e guarde para utilizar mais tarde.

 

 

Neste módulo