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

Como é que será apresentado o seu site? discutir o planeamento e o trabalho de desenho que precisa de fazer para o seu site 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

Before you do anything, you need some ideas. What should your website actually do? A website can do basically anything, but for your first try you should keep things simple. We'll start by creating a simple webpage with a heading, an image, and a few paragraphs.

To begin with, you'll need to answer these questions:

  1. What is your website about? Do you like dogs, New York, or Pacman?
  2. What information are you presenting on the subject? Write a title and a few paragraphs, and think of an image you'd like to show on your page.
  3. What does your website look like, in simple high-level terms? What's the background color? What kind of font is appropriate: formal, cartoony, bold and loud, subtle?

Nota: Complex projects need detailed guidelines that go into all the details of colors, fonts, spacing between items on a page, appropriate writing style, and so on. This is sometimes called a design guide or a brand book, and you can see an example at the Firefox OS Guidelines.

Esboçar o seu desenho

Next, get a pen and paper and sketch out roughly how you want your site to look. For your first simple webpage, there's not much to sketch out, but you should get in the habit of doing this now. It really helps — you don't have to be 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,