Como criar e fazer layouts para sites com visual moderno

Você aprendeu a usar o photoshop, é uma pessoa criativa e quer criar seu site ou criar um site para alguém, mas mesmo sendo criativo, você não sabe de onde os designers mais experientes tiram as idéias para montar um site.

Montar o layout de um site não é só criar uma imagem com cores bonitas, é preciso saber que fonte utilizar, que tipo de botão usar, barra de status se for necessário, ícones de rede social e para sinalizar as áreas do site, como organizar o conteúdo, formulários de contato, e por aí vai…

Eu não irei ensinar vocês a ser designer, mas vou tentar passar um pouco o caminho das pedras para vocês que estão iniciando. Com certeza com essas dicas, vocês já farão sites bem mais bonitos que antes. hehehe

1 –  Pesquisa de referência:
É importante fazer uma pesquisa de sites referências, para que você possa ter algumas idéias observando outros sites. Para isso, acesse sites como:

2 – Após fazer a pesquisa e formar uma idéia sobre o seu layout e como ele será, você precisará escolher uma ou duas fontes que irão compor o visual do site. Eu indico que as fontes sejam escolhidas no google.com/webfonts, pois é mais fácil de adicionar as fontes no HTML, não dá erros entre navegadores e são mais leves. Mas o ideal é usar fontes customizadas em títulos, subtítulos, e no máximo em menus, mas nos textos normais do site, o melhor é usar fontes como Tahoma, Verdana, Georgia, Trebuchet e Times, pois não há distorção da fonte entre navegadores e resoluções de tela. Com outras fontes, é comum acontecer.

3 – Fonte escolhida, idéia formulada na cabeça, então agora vamos passar a idéia para o papel… Sim, papel de verdade! Pode parecer brincadeira, mas isso ajuda MUITO!

sketched ui wireframewireframe home 1

4 – Agora que você já tem a idéia, as fontes e o rascunho, é hora de começar a fazer a sua arte hehe. Hora de dar seu show. Maaaasss como tempo é dinheiro, * agora vem a malandragem *, já existe muita coisa semi-pronta na internet, que os “grandes designers” também usam, e que você pode usar também, e por ser gratuito, economiza tempo e dinheiro.

Você já deve ter visto o termo UI, que significa User Interface. este termo se refere a interface do usuário, que não é só o visual do site, mas também todos os elementos que você utilizará para compor e facilitar o uso e a navegação do site.

Alguns sites possuem muitos elementos prontos, tanto em Illustrator, como em JPG e PSD, bastando somente você aplicar os itens no seu template e customizá-los. Segue dois sites excelentes para você baixar itens como botões, menus, formulários, barra de rolagem, player de música, ícones, ilustrações, imagens e etc.

Segue alguns exemplos de materiais que vocês encontrarão nestes sites:

Agora que você já tem o caminho das pedras, basta iniciar, tentar e tentar, porque não é fácil fazer um layout, principalmente por ser algo que depende muito da opinião dos outros, e não da sua, até porque você faz o site para os outros, né!? Então, aquela cor super chamativa que você adora, misturada com laranja e verde água, que você acha “super alegre”, não vai rolar!

Foque no tema do site, nas cores da logo do cliente, evite usar fundos coloridos, principalmente quando houver massas de textos e não deixe de espaçar bem os conteúdos dentro do seu layout, para que haja área de respiro e fique fácil a leitura.

Aaah, e mesmo que você faça um layout com fundo vazado, que ocupe a tela toda, o ideal é que o conteúdo se encaixe dentro de 940 pixels, para que possa ser visualizado em dispositivos como iPad sem ter barra de rolagem na horizontal.

Espero ter ajudado! Quem tiver dúvidas é só entrar em contato, e quem usar nossas dicas para fazer um layout e quiser nos mandar para exibirmos aqui, é só mandar para contato@sabecomofazer.com.br, agora… É preciso que aguente críticas da galera do blog. hehe

6 comentários em “Como criar e fazer layouts para sites com visual moderno

    • 31 de maio de 2013 em 11:44
      Permalink

      Que bom Rômulo, a idéia é ajudar mesmo, e deixar a internet menos feia! Se você criar algo usando nossas dicas, manda pra gente dar uma olhada!
      Abraços.

      Resposta
  • 5 de julho de 2013 em 12:34
    Permalink

    com que programa se abre os arquivos?
    :unsure:

    Resposta
    • 8 de julho de 2013 em 15:53
      Permalink

      Você pode usar o Photoshop para abrir os arquivos. Em alguns casos pode usar o Adobe illustrator também.

      Resposta
  • 19 de novembro de 2014 em 10:01
    Permalink

    Amigo, muito boas as suas dicas. Gostei demais, as vezes sabrmos toda a teoria, estamos cheios de ideias mas ficamos agarrados naquela mesma etapa por não seguir um planejamento. Parabés denovo!

    Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *