Criando um Layout Web

Criando um Wireframe

• Duas amostras do que é o Wireframe:

Desenhando o Layout

Depois de criar o esqueleto vamos definir que sua camada Wireframe fique bloqueada () e criaremos uma nova camada Layout sobre ela que permitira desenhar livremente sobre o wireframe.

Dicas de recortes para o layout

Exportando partes do layout

Importante lembrar!

• Evite exportar o layout em muitas partes, isso dificulta manter o layout ou uma futura atualização.
• Também evite que o layout seja apenas poucas imagens de tamanho grande, pode deixar o site lento devido o tamanho dos arquivos

Sempre existe um 'ponto médio' do que é necessário ser um recorte completo ou recorte para ser replicado.

Recortes replicados

Recorte replicado é um pedaço do layout que definimos através do CSS a propriedade de repetição em X, Y ou ambos.

Para ganhar desempenho no layout, tamanho e facilitar a manutenção, procuramos áreas onde podemos utilizar recortes replicados.

<div style="
 background: url(' Local da Imagem ') top left repeat-x;"
/>
Esta área utiliza um fundo replicado.
</div>

Criando botões animados

Para iniciar você precisa definir o tamanho do seu botão, se é somente um ícone presente nele ou ele tem um formato determinado. Nos exemplos que utilizei são três ícone 20x20, ativo, normal e quando receber ação :hover do mouse e também mais uma versão animada .gif , o outro tem largura e tamanho fixo 138x30. Basta usar sua criatividade, dentro de um retângulo/molde você cria as três variações do seu botão. Veja o código CSS se não é tão simples como o Inkscape. :c)

ul { list-style: none; padding: 0px; margin: 0px; }

li a {
display: block; 
background-image: url('Imagem com os 3 Ícones');
background-repeat: no-repeat;
background-position: top left;
padding-left: 20px;
height: 20px;
font-size: 12px;
/* Para funcionar o alinhamento ao cento */
line-weight: 20px;
/* Alinhar o label do botão ao centro na vertical */
vertical-align: middle; 
color: green;
text-decoration: none;
}

/* :hover é quando o mouse passa sobre o link,
    :focus é quando utiliza TABulação                  */
a:hover, a:focus {  
background-position: bottom left;
color: black;
}

/* .ativa é uma class definida na opção do menu que
   esta ativo, :active é quando pressiona o clique sobre
   o link                                       */
a.ativa, a:active {
background-position: 0px -20px;
}

/* Este outro é especifico para quando passar o mouse
    sobre a opção ativa. */
a:hover.ativa {
background-image: url('Imagem de ícone animado GIF');
}

----------------------------
o código HTML fica:

<ul>
<li><a href="#1" class="ativa">Anima e Ativa</a></li>
<li><a href="#2">outra opção</a></li>
<li><a href="#3">e outra...</a></li>
</ul>

O mesmo código do menu do lado, muda que definimos a
largura fixa em 138px, altura 30px e a imagem que usamos
de fundo é uma outra.  :)

Finalizando

O Inkscape somente vai exportar as imagens no formato .PNG, se sua imagem é somente um degradê ou utiliza poucas cores o formato .PNG ganha em qualidade, tamanho e compactação. Ele é um formato onde quanto maior quantidade de cores idênticas, melhor. Já o JPG é para fotografias, ou se seu layout abusa no uso das cores. GIF fica somente para Animar ou utilizar uma imagem com fundo transparente para IEcá 6 ou inferior. Para trabalhar com os outros formatos eu indico o Gimp.

Para montar o quebra cabeça em HTML + CSS, sugiro estudar Tableless, a técnica e modo correto de construir layouts Web, Acessíveis. Utilizar um programa bonitinho onde você vai mover as peças nem sempre vai mostrar igual em todos os navegadores, por isso eu escrevo minhas coisas e faço meu alinhamento clicando sempre em "Atualizar" no navegador.

Links úteis

• SVG dos layouts e ilustrações utilizado neste tutorial.
• Tableless.com.br
• Curso Livre para Arquiteto da Informação - por Bruno
• Blog da Wenetus