O layout - Como fazer um site #2

Oi gente, tudo bem?
Então, ontem eu falei sobre o domínio, inicialmente falar disso não era o foco, ia falar apenas do desenvolvimento do site, mas acabei achando que seria importante explicar, inclusive por causa do layout, como já foi explicado anteriormente...
Mas na verdade é hoje que você começa realmente a fazer seu site...

Este é o primeiro passo para se fazer um site... A ideia inicial é chamada de layout, isso nada mais é do que a cara do seu site... Afinal se você está montando um site pra você, nada mais justo do que ele ter a sua cara!
Para fazer esse primeiro passo no desenvolvimento de sites você vai precisar saber mexer no photoshop(ou outro editor de imagem), uma boa dica para quem está começando a fazer sites é a simplicidade, buscar formas e posicionamentos simétricos, quadrados, retângulos, círculos perfeitos, elementos lado à lado ou em cascata(um embaixo do outro), isso ajudará bastante na hora de transformar o desenho em código... Outra coisa que se deve prestar muita atenção na hora de se fazer um site são as cores...

Não estou querendo me alongar muito nesse assunto sobre cores, se você quiser saber mais sobre isso é só você dar uma pesquisada por ai na internet, mas pra servir como exemplo, sites com elementos verdes inspiram confiança, por isso lojas virtuais geralmente inserem botões de compra dessa cor... Já o vermelho é tentação, por isso sites adultos geralmente tem essas cores... Isso é uma coisa que influência os seus visitantes, sem que eles percebam...
Ainda falando sobre cores, analise se o seu visitante ficará muito ou pouco tempo em seu site, pois sites com fundo escuro não são uma boa para ficar se olhando muito tempo, simplesmente faça uma página preta com letras brancas e tente ficar lendo por algum tempo, quando você sair da página ainda vai ficar vendo as letras, enfim, é uma sensação ruim...
O fundo branco quase sempre é o mais indicado para sites, afinal quanto mais tempo a pessoa passar no seu site, melhor... Mas é claro que há casos em que o fundo preto é sim indicado, como no caso de galerias de fotos, as fotos ficam mais destacadas quando estão em um fundo preto, isso faz com que as pessoas achem suas fotos mais bonitas, elas poderão não gostar de ficar muito tempo no seu site, mas poderão voltar pra ver as fotos bonitas novamente...

Como falei acima, se este é o seu primeiro site, aconselho você a fazê-lo simples...
Simples não quer dizer mal feito, pelo contrário, simples é um site sem tantos enfeites, um site que prioriza o visitante, o bem estar dele... Ou seja o site não vai demorar pra carregar, não vai ser cheio de códigos que travam o navegador do visitante, etc..

Pra quem ta começando e ainda não sabe, fazer site é saber pegar exemplos, ou seja, se você gosta de um site, porque os elementos são posicionados de tal forma, é simples, posicione os elementos no seu da mesma forma... Se você vai concorrer com algum outro site, tente ver o que ele tem que atraí tanta gente, e tente fazer algo parecido ou melhor... Você não precisa imitar esteticamente os elementos, só o posicionamento deles já fará diferença...

Foque muito na capa e no logo do seu site...

Espero que você ainda não tenha desenhado nada do seu layout...rs
Digo isso porque na minha opinião a segunda coisa que você deve fazer(depois de pensar em tudo que falei), é o logo... Por que? Porque o logo é uma das coisas que mais demora para ser feita(se fizer da maneira certa, é claro)...
Veja bem, se você for seguir meu conselho de fazer um site simples, o recomendável é que o seu logo seja marcante o suficiente para que a pessoa ao vê-lo lembre do seu site... Você acha que é fácil de se fazer isso? Exatamente, um logo não é nada fácil de ser criado, não basta saber desenhar, tem que ter criatividade e feeling pra conseguir capturar o que você quer passar pro visitante... Não tenha pressa pra criar seu logo, no final desse post vou deixar a imagem do layout que eu fiz, e só para vocês terem uma noção eu fiquei uma semana pensando em como ia fazer o logo do meu site, eu não sou bom eu fazer logo, preciso de muita inspiração mesmo, rabisquei muito um papel, fazendo vários desenhos, sim você pode fazer o desenho no papel antes de fazer no seu computador se preferir... E pra vocês terem ideia de como é de inspiração(quando não se trabalha com isso), esse logo que saiu e pra mim ficou lindo, não tem nenhum elemento que lembre algum dos que eu tinha desenhado no começo, no começo eu só estava apenas entrelaçando as letras E e C... Então pra não alongar mais, tenha paciência, seja criativo no seu logo, isso poderá fazer você ser lembrado...

O layout

Bom se você fez o logo, agora é hora de criar o layout, lembre-se de que independente se você vai fazer páginas fodas ou simples, o logo sempre tem que ficar destacado, assim ele poderá ser lembrado...

O legal de já ter o logo pronto, antes de começar o layout é que você poderá posicioná-lo e criar o layout em volta dele, fora que o logo pode inspirar o layout, seja em questão de cores, seja em questões de estética... Como assim? Se o seu logo é arredondado, você provavelmente vai criar outros elementos arredondados no seu site, para ornar com seu logo, já se ele tiver mais formas retas o seu site também terá, enfim, o layout geralmente vai acompanhar as formas que o seu logo tiver, e outros casos também pode-se abrir mão de seguir o modelo do logo para que ele consiga ficar mais destacado...

Deixando de lado um pouco o logo agora, vamos nos focar no layout apenas...

Assim como você fez no logo, é interessante que o layout traga elementos que referenciem a ideia do seu site, por exemplo se o seu site tiver vídeo de pessoas pagando mico, você pode inserir bananas nos menus, enfim, é uma ideia, não sei se é o melhor exemplo... xD

No meu layout vocês poderão ver que inseri uma espécie de costura em alguns lugares, isso porque é um sobre roupas, logo as roupas tem costuras... ^^

Notem que nem é uma coisa que se destaca tanto diante o logo, o logo ainda permanece sendo uma das coisas principais que há no layout...

Eu demorei uma semana pra fazer o logo e uns 2 dias pra fazer esse layout...

Bom galera, como vocês podem ver esse é o layout da minha página inicial, é aconselhável que você faça layouts para cada uma das páginas, assim você conseguirá planejar e aproveitar melhor os espaços, eu não vou fazer porque já fiz uma outra loja virtual e pretendo usar o mesmo modelo, mas enfim, se quando eu usar não ficar bom, acaberei tendo que fazer...

Outra coisa que deve ser ressaltada é você gravar o seu arquivo em .psd pra poder acessar cada camada separadamente depois, se você gravar em .jpg além de perder qualidade ficará mais difícil de trabalhar com seu layout, pois você terá que fazer recortes na imagem e não terá como salvar imagens transparentes...

Pra finalizar, é importante lembrar que você deve fazer um layout que coloque o logo o menu e o rodapé em posições bem definidas e que haja um espaço também pre-definido para que todo conteúdo seja exibido... Isso é bom pois sempre que a pessoa se perder no seu site, saberá que o logo estará em determinado lugar e que apertando nele ela voltará para a página inicial... Essa é uma das coisas que contará para que seu site seja considerado amigável...

Outra coisa que torna seu site atrativo são as fontes que você usará, tente manter um padrão de fonte, não use em cada elemento uma fonte diferente, isso vai fazer o usuário pensar que é palhaçada... Tente usar fontes que ficam boas em todos navegadores e sistemas operacionais... O tamanho da fonte geralmente é 12, 14 e 16 pixels...

Também sempre que possível tente criar elementos capazes de serem reproduzidos com CSS puro, pois eles carregarão muito mais rápido do que se você fizer o site baseado em imagens... Mas isso é assunto para uma outra aula, quem sabe a de amanhã... rs

Bom, como vocês estão podendo ver, fazer sites é bem complexo, e mesmo que eu queira ensinar, vocês vão ter que se esforçar bastante...rs

Preparem-se, pois amanhã começam os códigos...

Valeu!