13 outubro 2016

DIY Layout #1 - O design

DIY Layout - Design

A partir de agora os tutoriais seguirão a ordem que eu uso pra fazer os meus layouts.

Nesse post, você irá encontrar dicas de como desenhar o layout do seu blog, antes de tentar fazer ele. Durante o post também indiquei alguns links que vão te ajudar nesse processo. O post ficou grandinho, mas vale super a pena ♥

Antes de você fazer o seu layout, se aventurar nos códigos e caçar tutoriais, você precisa decidir o que quer. A parte do design é uma das partes mais importantes do layout, e precisa ser feita com cuidado. Acredito que muitas vezes você pode não gostar do resultado, não porque não soube fazer, mas porque não soube planejar.

Quando eu digo design, me refiro ao rascunho, um desenho que você vai fazer de tudinho como você quer no seu layout. Nele você vai escolher as cores, fontes, formas, posições, e é isso que vai dar a harmonia na carinha do seu blog. E essa harmonia é tudo. É ela quem faz o layout ficar bonito, e é isso que eu vou ensinar para vocês, a fazer o design e ter essa linda harmonia.

1 - O que eu quero no meu blog?


Você precisa pensar em todos os elementos que você acha importante ter no seu blog. No post da Anatomia do blog perfeito eu dei umas dicas legais sobre o que é mais útil e necessário de se ter em um blog, então da uma olhadinha antes de continuar com esse aqui!

Vou te dar uma ajudinha com os que eu acho necessário, e depois na sua lista, você tira e acrescenta o que for da sua vontade. ok?

 Logo/Cabeçalho
  Menu de navegação
  Postagens Recentes
  Área dos posts
    ♥  Título
      Data
      Categorias
      Texto
      Postado por:
      Botão para comentar
      Postagens Relacionadas
  Sidebar
      Quem sou eu
      Redes Sociais
      Categorias
      Caixa de Busca
      Facebook
      Instagram
      Newsletter/Seguir o blog
  Rodapé com créditos

Então copia a lista, cola no bloco de notas, e faz as modificações dos itens.

2 - Como eu quero?


Preto e branco ou colorido? Elaborado ou no estilo minimalista? Com flores? Triângulos? Você já sabe como quer o seu layout? Antes de definir isso, eu aconselho você a procurar inspirações. Entre em blogs que gosta dos layouts, em portfólios, no pinterest, procure blogs que você curta o estilo para se inspirar. Lembrando que se inspirar não é copiar hein?

3 - Cores e Harmonia.


Se você optar por um layout preto e branco, com alguns detalhes de outra cor, é mais fácil, porque qualquer cor que você escolher vai cair bem com preto e branco. Só tome cuidado para não colocar uma cor clara em um fundo branco, ou uma cor escura em um fundo preto.

Mas se você quer uma coisa mais colorida, com uma variação maior de cores, é preciso ter bastante cuidado, então lá vai algumas dicas:

Para escolher as cores, o site Color Collective. Ele é um site de paletas inspiradas em imagens. Então é muito legal para ter ideias de combinações e de tons das cores, que as vezes a gente até esquece que existe hahahaha, afinal, são muitas variações.

Se a sua ideia for usar uma cor para o fundo e outra cor na frente, use cores que causem bastante contraste, por exemplo:

Se for usar detalhes que não irão se sobrepor, opte usar cores semelhantes, por exemplo:

E uma dica legal é: Se você quer dar um ar moderno para o seu blog, escolha as cores dos textos e outros detalhes preto. Mas se você quiser dar um ar mais romântico, ou doce, tente usar cinza escuro no lugar do preto.

4 - Fontes.


Não use muitas fontes diferentes no seu design, use no máximo três: A do logo, dos títulos e do texto.

Sempre use fontes que dê para entender o que está escrito. É fácil pra você que escreveu entender, mas e pra quem está do lado de fora?

Em textos e partes longas, use fontes comuns que tem em todos os computadores. Não use fontes importadas, do google fonts, ou de outros lugares para textos longos, porque isso atrapalha no carregamento do site.

Para as fontes diferentes: Google Fonts

5 - Mão na massa.


Para fazer isso, você vai precisar ter uma ferramenta de edição. Se você não tiver o photoshop - que pra mim é o melhor pra tudo - eu aconselho você a usar o Photoscape, já que é um programa leve, fácil de baixar e fácil de usar! E pra provar que é possível sim, eu fiz um design simples e rapidinho no photoscape pra vocês verem como fica:

Diy Layout - Feito no photoscape

Eu não fiz o layout inteiro porque eu só queria mostrar de exemplo, e acho que deu pra ter uma boa ideia né? No seu rascunho, você vai desenhar todas as coisas que você listou (tópico 2), e já vai fazendo tudo como você quer, pensando no jeito, nas cores.

P.S. A flor do fundo, eu desenhei nesse site: Paint Online

6 - Hora de fazer

Após terminar o seu design, salve ele em um lugar seguro. Agora sim você já pode ir procurar os tutoriais para fazer esse layout. Para facilitar:

Use meu tema base responsivo, é free e vai te ajudar a montar seu layout!

Vá em ordem da sua listinha de itens importantes, comece pelo logo, depois o menu, depois as postagens recentes... e assim vai. Crie de cima para baixo.

Na página de Extras do blog, vou deixar todos os tutoriais desse novo projetinho em ordem para facilitar. E lá você também encontra os outros tutoriais que já teve aqui no blog que poderá te ajudar! Caso você queira algum tutorial que não tenha aqui no blog ainda, deixe nos comentários, vou amar saber.

Qualquer dúvida, reclamação ou sugestão, comente! Os comentários me incentivam a continuar. E se você gostou muito do post, compartilhe e indique.

Comente com o Facebook:

13 comentários:

  1. Faz muito tempo que venho trabalhando no meu primeiro theme do blog e essas dicas me ajudaram muito! Sucesso com o blog

    ResponderExcluir
    Respostas
    1. Oi Patricia <3 Fico feliz que tenha te ajudado. Boa sorte com o seu layout <3 Beijos!

      Excluir
  2. Menina, que post incrível! Eu sempre faço meus layouts mas não tenho nem metade da sua organização. Vou levar algumas dessas dicas em conta quando for fazer o meu próximo! ♥

    ResponderExcluir
    Respostas
    1. Obrigada ♥ No começo, quando fazia só pra mim, eu saia fazendo como queria, mas depois que aprendi a planejar antes de fazer, o resultado começou a ser bem melhor, e não parei mais de fazer assim kkkk. Espero que te ajude tanto quanto me ajudou. Beijinhos ♥

      Excluir
  3. oii larissa,Adorei as dicas com certeza vou me organizar mais na hora de fazer meu layout...
    Gostaria que vc ensinasse a fazer e colocar o cabeçalho usando o seu template responsivo...
    Ajudaria eu e muitas pessoas, tenho muita dificuldade nesse quesito , como no tamanho,planejamento e etc.
    Um beijo gosto muito de ti <3

    ResponderExcluir
    Respostas
    1. Fico feliz que tenha gostado <3 É verdade Ana, vejo muita gente com essa dificuldade, vou fazer um post bem explicadinho sobre isso, adorei a sugestão, muio obrigada!

      Obrigada pelo carinho <3 Beijos!

      Excluir
  4. AMEEEEI as dicas e a tua iniciativa <3 Eu costumo fazer/personalizar os meus layouts, mas sempre tem coisas que eu não sei e preciso de ajuda. Uma das coisas que eu sempre quis saber fazer é como fazer o widget de posts recentes com aquele quadradinho branco e o título, como tem no blog Bela Psicose, se puder ensinar vou amar <3

    ResponderExcluir
    Respostas
    1. Obrigada! <3 Esse widget ficou bonitinho mesmo, vou ver se preparo um tutorial com alguns modelos e posto aqui <3 Obrigada mesmo pela sugestão, linda! Beijos!

      Excluir
  5. Nossa, fui tentar fazer uma flor no site que você indicou e não consegui kkkk' acho que não tenho talento pra essas coisas :'( ai que tristeza :ccc
    Beijos.

    ResponderExcluir
    Respostas
    1. Eu demorei muito tempo e tentei muitas vezes até sair um resultado legalzinho kkkkkkkkk. Continua tentando <3 Qualquer coisa, faz num papel antes como você queria que fosse, e tenta reproduzir no site. Beijos <3

      Excluir
  6. Amei! Faz o tutorial de um slide bonito tipo aqueles do themexpose <3333

    ResponderExcluir

Butlariz • contatobutlariz@gmail.com Feito com ♥ por Lariz Santana / Moonly Design