Antes de mais não sou nenhum profissional na matéria mas tenho alguns (bastantes) conhecimentos no tema que vou falar abaixo.

Escrevo este post a pensar que tenho de criar e programar dois layouts para adaptar ao Wordpress. Um deles tenho de entregar obrigatoriamente até dia 26 de Junho e o outro a 5 de Julho (podendo ser mais tarde).

Quanto ao primeiro para já não posso mesmo falar nele. O segundo será um site do restaurante de dois amigos meus, que irá abrir em breve.

Mas deixando de “tretas” vamos ao conteúdo essencial deste post. Ora vou partilhar alguns dos meus conhecimentos de webdesign e programação de layouts.

[1] Escolha de cores
É fundamental que as cores de um layout estejam relacionadas, em parte, com o logotipo/cores que identificam a entidade do vosso site. Um site que tem o logotipo laranja nunca irá fazer um site com tons de cor de rosa nem roxo, por exemplo. Devem ter em atenção escolher de 3 a 5 cores para um site. Sendo importante o cinzento para os textos, uma cor para os links e outras para o design do próprio layout.
Link para site com várias cores e exemplos: http://www.ideo.com/visualizer.html

[2] O desenho do layout
Após escolherem as cores por alto, vem o desenho do layout. Antes de passar à prática convém fazer a lista daquilo que o site vai ter, e em que serão mostrados os itens dessa lista. Utilizem uma folha de rascunho para tal.

[3] Desenho digital do layout
Passem então as ideias do papel para o vosso programa de edição digital. Neste caso irei falar usando o Photoshop CS3. Façam o vosso layout com medidas de 900px de largura no PS.
Após terminarem todo o desenho vem o melhor e que, na minha opinião, é muito fixe (ao mesmo tempo que dá dores de cabeça), ou seja, montar o site em css e html.

[4] Utilizar imagens de alta qualidade
É muito, mas muito importante que o layout tenha imagens de alta qualidade e com cores a condizer com o site (ou não, consoante). Se temos um site de uma empresa convém ter imagens relacionadas com a mesma. No meu caso, que estou a fazer um layout para um restaurante, deverei usar imagens alusivas a restaurantes e afins.
Link para um site com imagens de alta qualidade: http://www.sxc.hu/

[5] Montar o site em CSS e HTML
Voltando ao ponto 3,
“Ah mas eu com as slices eu corto o site no PS e ele faz o html e isso” – Realmente faz isso tudo e é um amor de pessoa o PS em fazer isso, mas na verdade não está a fazer nada de jeito, pois o código é gerado todo ele em tabelas e mais tabelas. E fique aqui claro que hoje em dia não se deve usar tabelas num site, utiliza antes divs e ids.

Para tal utilizem um bloco de notas. Nada como o desafio de estar a programar sem estar a ver, directamente, o que estamos a fazer. Acho que programar em código é do melhor.
Em css vão ter vários problemas com os vários brownsers, para isso escrevi este post.
No css é importante também terem sempre um div clear, podendo ser assim:

.clear {
clear: bottom;
}
Depois para a utilizarem, basta fazer <div class=”clear”></div>.
O clear deverá ser usado para fazer género de uma quebra de linha. Supomos que temos uma caixa de texto e abaixo queremos meter um “Enviar”. Se abaixo da caixa de texto não tiverem o clear, o “Enviar” poderá ficar ao lado da caixa e não abaixo. Se tiverem alguma dúvida sobre este assunto, comentem e explicarei melhor.

Aqui ficam estas pequenas dicas de quem já anda há algum tempo no mundo da Internet e do webdesign. Ainda há bem pouco tempo estive a trabalhar (via estágio) numa empresa de Design Gráfico onde são desenvolvidas várias páginas de grande importância e isso ajudou-me a aprender bastante. Logo são mais coisas que sei e posso utilizar no futuro eheh

Deixem as vossas opiniões sobre este artigo, digam-me se seguem esta “ordem”, como fazem os vossos layouts etc. Acho interessante haver essas troca de opiniões por cá.

Tags:design, Web

Artigo escrito por bfms

Estudante de Tecnologias da Informação e Comunicação (TIC) e administrador deste blog todo maluco. Nos tempos livres gosto de correr, andar de bicicleta, ouvir música, sair com os amigos entre outras coisas que qualquer jovem gosta de fazer. Recomendo que comentes no PDL... dizem que por vezes dá prémios!