#layout tutorial

0. Rascunho

Antes de eu fazer um cronograma, eu sempre faço um rascunho de que funções e abas ele deve ter para eu me organizar. “Se esse cronograma vai ser mostrado para os meu seguidores, como ele deve ser?” “O que a pessoa precisa para encontrar seu próprio pedido e entender em que fase do andamento ele está?” “Se o meu projeto tem uma equipe grande e muitos pedidos, o que preciso para organizar isso tudo?”. Respondendo essas perguntinhas, eu anoto (mentalmente) mais ou menos assim:

Espaço 1 (o que deve conter nele)

Espaço 2 (o que deve conter nele)

Espaço (o que deve conter nele)

Exemplo:

Menu (Espaço para “Sobre” e para 4 links de contato)

Design (título da fanfic, user de quem pediu, prazo, legenda de projeto e status do pedido)

Escrita (título da fanfic, prazo para postar, casal, legenda de projeto e status da fanfic)

Com isso em mente, você deve encaixar todas essas funções em um cronograma como se fosse um quebra-cabeças antes de passar pro papel. Costuma ajudar bastante.

#DICA: Boas referências sempre ajudam! Mas não copie o trabalho do colega, seja crítico e estude o cronograma alheio. Veja o que gosta, o que não gosta, tente pensar o porquê das coisas estarem posicionadas daquele jeito. “Por que será que elu colocou o menu ali? Será que fica mais prático assim?” “Esse banner está muito grande, acho que os meus eu farei menores” “Gostei de como ela usou as linhas, acho que farei assim no meu cronograma!”. Não faça ctrl+c ctrl+v, analise o design alheio, pegue o que gostou e faça do seu jeitinho! E às vezes nem precisa ser um cronograma, você pode se inspirar em uma capa de fanfic, um style, um alimento... Nesse tutorial, o cronograma é inspirado pelo símbolo do Yin Yang!

#DICA: Não descarte suas ideias de cara, sempre tente inovar! Geralmente para eu chegar ao modelo final, eu faço dois ou três modelos diferentes só testando as possibilidades com as ideias que tive. Essas também eu tento sempre fazer um “jogo do contrário”: se em um cronograma o espaço para pedidos ficou da direita, no próximo que eu fizer eu jogo para a esquerda. Se nesse eu usei muita linha pontilhada, no próximo usarei linhas grossas. São detalhes bobos como esse que podem te ajudar a sair do lugar comum. 

1. A base

Agora que você tem tudo definido, vamos passar para o Google Planilhas! Essas são as funções básicas do site nas barras de ferramentas:

Com isso, vamos fazer esse cronograma! 

Eu costumo começar pela cor do plano de fundo. Eu seleciono todas as células e pinto com a cor que eu gostaria que o cronograma tivesse. Dessa vez irei usar branco mesmo, mas eu costumo usar tons de cinza ou cores pastéis/acinzentadas para não doer a vista quando for usar o crono. 

Depois, vá na aba “Ver” e em “Linhas de Grade” para automaticamente tirar todas as linhas da planilha e você poder trabalhar livremente.

Demarque as áreas que você vai usar no cronograma pintando as bordas dele com a Ferramenta Borda. Pode ser usando a borda preta simples mesmo, não precisa ser do jeito que ficará no final, é apenas para posicionar tudo o que você listou no rascunho. 

Ajeite o tamanho das linhas e colunas para dar forma ao seu cronograma. Escreva alguns textos de teste para medir o tamanho que você precisará para cada segmento e ajuste selecionando a coluna/linha ao clicar no número/letra dela e arrastando sua lateral. Você também pode fazer isso clicando no botão direito do mouse e usando a opção “redimensionar coluna”. 

Para áreas onde você vai escrever um texto longo (ex.: regras, bio, avisos), utilize o site Lipsum para que ele gere um texto aleatório do tamanho que você precisar só para teste. Então selecione a área que você precisa (clique numa célula e segure o Shift para clicar na outra borda até formar a área que precisa) e use a ferramenta Mesclar Células, que transforma várias células em uma grandona que cabe seus textos. Você pode fazer o mesmo com títulos que sejam muito grandes!

#DICA: sempre tente alinhar as áreas do seu cronograma e deixe as áreas com a mesma função próximas umas das outras, isso torna ele muito mais bonito visualmente e prático de usar. Também, lembre-se que o sentido de leitura das pessoas é da esquerda para a direita, então deixe à esquerda as áreas mais importantes ou as que você quer dar mais destaque, pois é o lugar onde vão olhar primeiro.

#DICA: deixe o tamanho das linhas e colunas iguais para cada função para que o design se torne mais harmônico (desde que essa seja sua intenção). Também, lembre de mudar o tamanho de TODAS as linhas do seu cronograma para um padronizado fixo (recomendo de 20 a 25 pixels) pois, caso você use um banner, ele não ficará com borda branca quando você escrever algo porque a linha estará fixa! Veja um exemplo abaixo:

2. Fontes e Paletas de Cor

Tá aí uma parte que todo o mundo se embanana (inclusive eu) na hora de fazer um cronograma: Cor e Tipografia. Não sou muito boa explicando as teorias em si, por isso, irei deixar essa pasta do Pinterest sobre Psicologia das Cores e esse guia sobre Tipografia (parte 02, parte 03), pois acho que como base pode te ajudar bastante.

Para as paletas de cores, eu geralmente uso o Pinterest para pesquisar as paletas e o Coolors para pegar os hexcodes (é aquele código de números e letras que representam uma cor). Caso o banner seja uma parte de destaque no seu cronograma, faça seu banner primeiro e depois passe as cores dele pro Cronograma. Essa também é a hora de você mudar as linhas do seu cronograma, mas não há uma regra muito específica para isso. Só tente fazer as separações das informações de forma mais destacada e precisa, onde a pessoa consiga ler as linhas sem se perder com as informações.

Acho que não há muito mistério de como colorir e mudar as fontes de seu cronograma, por isso, essa parte conterá uma lista de #Dicas do que pode tornar seu design mais atrativo. Siga-as se quiser:

Use NO MÁXIMO 3 fontes em seu Design. Recomendo que seja 1 para os títulos e 1 para os textos, desde que a para textos seja LEGÍVEL. Tente usar só fontes Serifadas e Sem Serifas para essa parte pois elas são muito mais fáceis de ler que uma caligráfica (que você pode usar para os títulos).

Sei que vocês gostam de conceito clean e cores pastéis, mas POR FAVOR CUIDADO PARA NÃO COLOCAR TUDO MEGA CLARO NO CRONOGRAMA. Se não a gente não lê nada né? Também não coloque as fontes muito pequenas, pense nos amigos míopes de plantão. 

Cuidado também com as cores vibrantes de mais! Tente sempre as puxar um pouco mais para o cinza, cores muito abertas doem os olhos de quem lê e atrapalha a visualização.

CORES PARA AS LEGENDAS: por favor, faça-as uma diferente da outra, mesmo que você esteja usando uma paleta monocromática. É importante que quem esteja consultando seu crono saiba diferenciar o status do pedido dela, por exemplo. 

Algo que ajuda muito no cronograma se tornar intuitivo é cada área ter sua cor específica, mas seguindo a paleta de cores geral que você escolheu. Nesse que fiz, a área do Design é Branca e a de Escrita é preta, e isso se repete até nas legendas.

No fim, nosso Cronograma ficou coloridinho assim:

3. Banner

Bem, você deve ter se perguntado o que é essa área cinza logo abaixo do “@USERAQUI”, certo? Esse lugar é onde ficará o banner do cronograma, coisa que costumo demarcar já na base caso ele seja algo realmente importante para o design. Eu não tenho como ensinar a fazer um banner do zero porque isso vai do gosto e do estilo de design de cada um. Porém, eu tenho como ensinar como colocar um banner dentro da planilha.

Para que você pegue o tamanho exato do banner, recomendo que você printe seu cronograma com o zoom da tela e da planilha no 100% (para não haver alteração na dimensão). Caso a área seja grande de mais e fique cortada, tire vários prints até ter a área completa e você poder ajustar uma imagem ao lado da outra. 

Dito isso, abra o seu print no Photoshop. Agora é só ir na Ferramenta Corte Demarcado, demarcar o mais exato possível a área que irá ocupar o seu banner e clicar em “Confirmar operação de corte atual”, vulgo “ok”. 

Agora, sem mudar o tamanho dessa área que você recortou, faça o banner em cima dessa dimensão! Isso vai garantir que ele continuará com uma boa qualidade quando for colocar no Cronograma. Uma outra dica é usar a opção do Photoshop “Salvar Para Web” para salvar seu banner em PNG-24 com uma boa qualidade:

De volta para sua planilha, selecione a área que você usará para seu banner e utilize a ferramenta Mesclar Células para que a célula fique do tamanho que você fez o banner. Ainda com essa área selecionada, vá em Inserir > Imagem > Imagem na célula / Imagem sobre as células. Nesse cronograma eu irei usar “Imagem na célula” e depois disso é só selecionar o arquivo do seu banner. Ah, é bom lembrar de pintar a área do banner com a mesma cor do fundo, já que a marcação não vai nos servir mais.

Qual o melhor uso da Inserção de Imagem?

Imagem na célula - Imagem com dimensão exatamente igual da célula a qual você quer inserir. A imagem automaticamente ficará alinhada com as demais células.

Imagem sobre as células - Imagem com qualquer dimensão, já que você pode ajustar isso na hora. A imagem pode ficar alinhada com as demais células, mas não é automático.

Resultado final: 

live preview

Caso use esse cronograma para você ou como inspiração, NÃO RETIRE MEUS CRÉDITOS! Para fazer o download do modelo, é só ir em Arquivo>Fazer uma cópia.

Bem, se você chegou até aqui: PARABÉNS, VOCÊ FEZ UM CRONOGRAMA! Ah, que orgulho!