Criando Layout – Empresa de Tecnologia: Parte 1/2

Criando Layout para Empresa de Tecnologia: Parte 1

Criando Layout para Empresa de Tecnologia: Parte #1

Salve-salve Fireworkseiros de plantão! :D

Neste tutorial, veremos como criar um layout para uma empresa de tecnologia, utilizando algumas técnicas ainda não empregadas em tutoriais anteriores.

Pré-Requisitos

Facilidade quanto ao manuseio do Fireworks CS3/CS4

Objetivo

Criar um layout para uma empresa de tecnologia utilizando o Fireworks

Conteúdo

1º Passo – Definindo a Estrutura do Site

Como mencionei no tutorial Criando um Site Passo-a-Passo: Parte 5, a utlização de um Wireframe, ou seja, a criação de uma estrutura antes do desenvolvimento em si, faz com que economizemos tempo e otimizemos o processo de criação. Pensando nisso, vejamos como está dividido o layout a ser desenvolvido:

Fig. 01 - Wireframe - Estrutura do website

Fig. 01 – Wireframe – Estrutura do website

2º Passo – Utilizando Modelo do 960 Grid System

Grande parte dos layouts desenvolvidos por mim, utilizo como base para alinhamento e proporções, modelos do 960 Grid. Portanto, façamos o download no site oficial – 960.gs e descompactemos os arquivos PNG. Ao descompactarmos, veremos dois modelos: um 12_col (contém 12 colunas) e outro, 16_col (contém 16 colunas).

E qual deles usar?

Simples. Geralmente (eu disse: geralmente), se o layout tiver 3 caixas (exemplo: “Sobre a Empresa, Atendimento e Notícias, como na Fig. 01”), utilizaremos o modelo 12_col. Isso porque 12 é múltiplo de três. Já para um layout com 4 caixas, utilizaríamos o 16_col, devido o fato de 16 ser múltiplo de quatro.

Então, ao abrirmos o arquivo 960_grid_12_col.png, teremos:

Fig. 02: 960 Grid System - 12 Colunas

Fig. 02: 960 Grid System – 12 Colunas

3º Passo – Criação do Topo – Tarja

Com um retângulo de 940 x 05 pixel, de preenchimento #28333C, criaremos uma pequena “tarja”:

Fig. 03 - Criação da tarja do topo

Fig. 03 – Criação da tarja do topo

4º Passo – Criação do Topo – Barra de Menu

Criemos outro retângulo de dimensões 940 x 30 pixel, com a mesma cor da tarja e posicionamento X: 40 e Y: 70:

Fig. 04: Barra de menu

Fig. 04: Barra de menu

5º Passo – Criação do Topo – Logotipo, Feed e Twiter

Realizando os downloads do logotipo e ícones, complementaremos o topo como mostra as orientações das figuras 05 e 06 a seguir:

[wpdm_file id=11 title=”true” ]

[wpdm_file id=12 title=”true” ]
(desenvolvedor, o Dry Icons)

Fig. 05: Posicionamento do logotipo

Fig. 05: Posicionamento do logotipo

Fig. 06: Ícones, Feed, Twiter e links do topo

Fig. 06: Ícones, Feed, Twiter e links do topo

Vejamos o resultado até aqui:

Fig. 07: Resultado parcial do topo do layout da empresa de tecnologia

Fig. 07: Resultado parcial do topo do layout da empresa de tecnologia

6º Passo – Criação do Topo – Barra de Menu

E concluindo o topo, utilizando a fonte Arial Narrow, tamanho 13 e cor #D7E1E8, posicionemos os itens como na imagem a seguir:

Fig. 08: Barra de menu - links

Fig. 08: Barra de menu – links

7º Passo – Criação do Background

Passemos agora para a criação do background do site. Façamos um retângulo com as dimensões 940 x 350 pixel. Em seguida, vamos aplicar um preenchimento gradiente do tipo barra (bars) com as cores branca e azul conforme a imagem abaixo:

Fig. 09: Criação do background

Fig. 09: Criação do background

8º Passo – Inserindo Imagem dos Computadores

De acordo com a imagem abaixo, após realizarmos o download dos computadores, posicionemos nas coordenadas – X: 379 | Y: 71. E Complementemos com o slogan da empresa: “Empresa Especializada em Tecnologia WEB

[wpdm_file id=10 title=”true” ]

Fig. 10: Inserção do slogan da empresa e imagem ilustrativa

Fig. 10: Inserção do slogan da empresa e imagem ilustrativa

9º Passo – Lista de Serviços – Textos

Criaremos agora a lista de serviços da empresa, juntamente com seus botões e ícones.

Posicionemos os textos conforme a imagem abaixo:

Fig. 11: Lista de serviços da empresa

Fig. 11: Lista de serviços da empresa

10º Passo – Lista de Serviços – Ícone

Agora, criaremos os ícones para cada item da lista.

Primeiramente, façamos um círculo na cor branca e com as dimensões 14 x 14 px. Depois uma estrela que se transformará num triângulo de 7 x 6 px.

Fig. 12: Criação do ícone

Fig. 12: Criação do ícone

11º Passo – Lista de Serviços – Botões

E para concluirmos esta seção, criaremos os botões “Saiba Mais…” e “Adquira Já!”

Fig. 13: Criação do botão

Fig. 13: Criação do botão

O mesmo processo deverá ser aplicada para a criação do outro botão.

Vejamos o resultado até aqui:

Fig. 14: Criando Layout para Empresa de Tecnologia - resultado da 1ª parte

Fig. 14: Criando Layout para Empresa de Tecnologia – resultado da 1ª parte

Bom, pessoal

No próximo tutorial, concluiremos o layout.

Até lá.

CarlosHPS Webdesigner 8)

Webtutoriais:1AE7E97B


Posts Relacionados
Comentários ( 2 )
  1. Andressa
    5 de Janeiro de 2016 at 20:25
    Responder

    Olá, estou adorando o tutorial…
    Como faço para colocar a barra de pesquisa?

    Desde já agradeço

    • CarlosHPS Webdesigner
      CarlosHPS Webdesigner
      10 de Fevereiro de 2016 at 10:18
      Responder

      Andressa, em qual local você deseja colocar a barra de pesquisa?

      Abs.

      CarlosHPS Webdesigner 8)

Deixe uma resposta
Captcha Clique para atualizar o código