Esta tradução está incompleta. Por favor, ajude a traduzir este artigo do Inglês.

Como é que será apresentado o seu site da Web? descreve o planeamento e o trabalho de desenho que precisa de fazer para o seu site da web antes de escrever código, 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 qualquer coisa, precisa de algumas ideias. O que é que o seu site da web realmente deveria fazer? Um site da web pode fazer basicamente qualquer coisa, mas para a sua primeira tentativa deverá manter as coisas simples. Nós iremos começar a criar uma página da 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 itens numa página, estilo de escrita apropriado, e assim por diante. Isto às vezes é chamado de 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 da web simples, não há muito o que esboçar, mas deve adquirir o hábito de fazer isso agora. Isso realmente ajuda - não tem que ser um Van Gogh!

Nota: Even on real, complex websites, the design teams usually start out with rough sketches on paper and later on build digital mockups using a graphics editor or web technologies.

Web teams often include both a graphic designer and a user-experience (UX) designer. Graphic designers, obviously, put together the visuals of the website. UX designers have a somewhat more abstract role addressing how users will experience and interact with the website.

Escolha do conteúdo

At this point, it's good to start putting together the content that will eventually appear on your webpage.

Texto

You should still have your paragraphs and title from earlier. Keep these close by.

Cor do tema

To choose a color, go to the Color Picker and find a color you like. When you click on a color, you'll see a strange six-character code like #660066. That's called a hex(adecimal) code, and represents your color. Copy the code down somewhere safe for now.

Imagens

To choose an image, go to Google Images and search for something suitable.

  1. When you find the image you want, click on the image.
  2. Press the View image button.
  3. On the next page, right-click the image (Ctrl + click on a Mac), choose Save Image As..., and choose a safe place to save your image. Alternatively, copy the image's web address from your browser's address bar for later use.

Nota: Most images on the web, including in Google Images, are copyrighted. To reduce your likelihood of violating copyright, you can use Google's license filter. Just 1) click on Search tools, then on 2) Usage rights:

Tipo de letra

Para escolher um tipo de letra:

  1. Go to Google Fonts and scroll down the list until you find one you like. You can also use the controls on the right to further filter the results.
  2. Click the "plus" (Add to) icon next to the font you want.
  3. Click the "* Family Selected" button in the panel at the bottom of the page ("*" depends on how many fonts you selected).
  4. In the popup box, you can see and copy the lines of code Google gives you into your text editor to save for later.

 

 

Neste módulo

 

Etiquetas do documento e contribuidores

Contribuidores para esta página: mansil
Última atualização por: mansil,