Tipografia-responsiva-copy 38
Hoje você vai aprender a fazer na mão um sistema de tipografia. Isso mesmo passo a passo. FÁCIL!
Mas antes vamos conversar sobre o porque organização e processos são importantes quando você começa um projeto.
Pensa comigo naqueles arquivos com layers todas bagunçadas, layer 2 copy 39, sim da até nervoso so de imaginar, agora pensa no processo de criação daqui um mês com essas layers crescendo e se multiplicando com nomes cada vez mais complicados. Em algum momento isso vai atrapalhar seu trabalho em: tempo.
Tempo é algo que nós como designers não temos muito pra perder.
Agora que você entendeu que seu tempo é valioso e que seus processos e organização podem te ajudar, AGORA e no FUTURO. Vamos aprender como isso tudo funciona no Sketch.
Passo a passo
E que a mágica comece, abra seu Sketch ou qualquer programa de preferência, a idéia inicial é relacionada a processo, sendo assim qualquer software vai ter as mesmas possibilidades de criação.
Antes de tudo começar se você usa Sketch, você vai precisar de alguns plugins. Esses são: Renameit, Style Master, Styles Generator. (que por sinal estão inclusos no StyleGuide Kit 0.5)
Passo 1: Crie uma hierarquia basica de nomes e ja pensando la na frente os tamanhos de cada um. Um padrão web responsivo seria: H1 ate o H6, Intro para sub-titulos, Body para uso textual padrão, Buttons para uso exclusivo nos botões, Quote para uso em citações e depoimentos, e os outros estilos vai da estrutura do seu projeto. Nesse exemplo usaremos a estrutura abaixo.
Passo 2: Vamos definir os tamanhos de cada estilo e suas propriedades como espaçamento, kerning, bold ou light, e etc.
Passo 3: Nivel basicão ainda hein. Copie e cole as fontes pro alinhamento direita e esquerda. Exemplo abaixo.
Passo 4: Agora vamos pro nivel médio?
Atenção nesse passo, porque são de alta importância pra consistência e organização do sistema de tipografia. Pra que você tenha uma organização tipografica em folder como o exemplo abaixo:
Você precisa definir como seus “folders” vão se comportar.
Exemplo acima: H3/Alinhamento/Cor/Responsivo
Lembrando que eu utilizo nessa formação dos “folders” mas você pode definir de outra forma tambêm sinta-se a vontade, tenho colegas que utilizam outro método de organização. Exemplo: H3/Responsivo/Alinhamento/Cor
Nesse artigo utilizaremos o que eu sempre uso mesmo pra que vocês entendam o truque do porque deixo Responsivo como ultima seleção. Como sempre processos são mais importantes do que tudo na vida de um designer.
Usando o plugin RenameIt, você vai renomear suas layers. Da pra fazer na mão…SIM! Mas né vai te demorar uns bons minutinhos.
Clica em Layer name, que vai adicionar o %* isso significa que o primeiro nome é o nome é o das suas layers depois disso a estrutura dos “folders”. Repita o processo pra Center e Right. Exemplo abaixo:
O resultado dos nomes das suas layers deve estar assim:
Se você for espertinho ja viu onde isso vai dar hein. Mas vamos la parar os proximos passos.
Passo 5: Agora vamos pro nivel avançado?
Respira que agora vem o responsivo e cores tudo de uma vez, e isso tudo ate agora não gerou estilo nenhum dentro do Sketch, isso é apenas a estrutura hein. Eu sei é um trabalhão gigantesco.
Copie o artborad pra Tablet e mobile, copie os 3 com fundo branco, adicione fundo preto pra criar a variação de fonte branca. URRAAA!!!! Agora vamos renomear essa porra toda pra criar os folders “/tablet” “/mobile” “/white”.
Mas vamos com calma jovemmmm. Primeiro renomear a cor do estilo branco. (de novo você pode fazer isso na mão ou usando o RenameIt)
ok agora você tem tudo em /Black os 3 artboards acima e /White os 3 artboards abaixo, vamos agora fazer o /Tablet e /Mobile.
pronto você tem tudo! Agora é só gerar os estilos e a magica vai acontecer.
Passo 6: Gerando os estilos com 1 clique. Seleciona todas as layers de texto, vai no plugin e clica pra gerar os estilos. BOOM!!!!!!!!!!!!!!!!!
Agora que você aprendeu como fazer isso tudo, eu te trago um problema e 2 soluções. hahahaha achou que não tinha problema?! Tudo na vida de um designer começa com um problema.
Problema: Você tem 2/3/4 fontes no seu projeto. Sua estrutura de folders então vai ficar mais longa e mudar um pouquinho adicionando /FonteX ou /FonteY. Isso faz parte de um dos treinamentos do meu curso de Design, varias fontes e edição dos estilos em métodos avançados.
Solução 1: Custando 9.99 dólares você tem um plugin que te ajuda demais nesse processo de organização, troca de nomes e mover estilos. (não me pagaram nada por esse ad gratuito)
Solução 2: Vem com o pai, arquivo mastigado que eu fiz pra vocês, inclui 3 cores de fonte prontas nos estilos, estilos de cores, UI Kit de simbolos basicos e icones, 18+ imagens pagas… e muito mais, o arquivo ta cheio de dicas e tutoriais.
Considerações finais
👏 Like se você gostou do artigo
💬 Comenta se você tiver uma pergunta ou quiser adicionar algo que não estava no artigo
👾 Follow pra ver mais artigos como esse
📩 Sign up receba no seu email: Sketch files, ebooks e conteúdo gratuito. Link: https://goo.gl/jQha7k
Redes sociais
Instagram @appariciojr
Linkedin @appariciojunior
