Aprenda Sketch 3

Aprenda Sketch 3

Sketch é uma ferramenta de design vetorial inteiramente focada no design de interfaces. É relativamente fácil de aprender e com um custo beeem inferior ao Photoshop. Por causa de sua simplicidade, qualquer um com uma mínima noção de design pode aprender. É perfeito para fazer design para múltiplos dispositivos e para exportar os assets (imagens, ícones…).

O Sketch usa uma unidade única, estilos que são relevantes ao design de interface (UI), uma ferramenta embutida de preview em iPhone e as Artboards, um jeito fantástico e eficiente de fazer várias telas no mesmo arquivo.

 

Eu, particularmente, uso o Sketch há uns 2 anos e meio, e embora ainda use o Illustrator e Photoshop às vezes para interfaces, o Sketch mudou bastante minha forma de trabalho. Ele é constantemente atualizado e cada vez aparecem mais recursos e plugins para ele.

 

Em 2015 o Sketch foi votado como o App do Ano pelo NetAwards, e como a ferramenta mais usade de Wireframing e User Interface, numa pesquisa feita com 4000 designers, tirando o reinado do todo-poderoso Photoshop. Embora o Sketch tenha começado a engrenar em 2015/16, ele já existe há mais de 4 anos. O time deles é bem enxuto, porém adoram feedbacks e o mais importante, o Sketch possui uma comunidade crescente muito disposta a ajudar.

 

Introdução ao Sketch

Sketch é a melhor ferramenta para design para iOS, Android e Web. Pesando apenas 47,5Mb, é muito pequeno, se comparado ao Photoshop por exemplo, que pesa 1,6Gb. Assim que é iniciado, um canvas infinito aparece pra você. Nada de janelas perguntando qual unidade você quer usar, ou o tamanho da sua área de trabalho. Disponível apenas para macOS, ele seguiu a linha de design dos aplicativos padrões do sistema, portanto a interface é bem familiar para quem já usa o Mac, uma toolbar no topo, um navegador de arquivos à esquerda e uma barra de ferramentas (Inspector) à direita. Como resultado, você já entra nele adaptado à sua interface.

Desenhado para interfaces

 

Você só pode trabalhar com pixels, afinal ele é pra interfaces. Portanto você não precisa se preocupar com as outras unidades, padrões de cores, pixels por polegada, etc. De cara você não vê aquela barra de ferramentas onde metade das opções foram destinadas para edição de fotos, pintura digital e 3D. Nada contra, afinal elas tem suas funções, mas não para interfaces, portanto focando em UI permite você fazer seu trabalho com mais eficiência e menos distrações.

Tudo o que você aprenderá no Sketch será imediatamente útil para o design de apps..

Customizando sua Toolbar

 

 

Seguindo a linha de design do macOS, a Toolbar pode ser customizada clicando com o botão direita nela. Você simplesmente arrasta suas ferramentas favoritas e as organiza. Com o tempo a gente vai aprendendo bastantes atalhos de teclado, então é bom deixar aqueles que você ainda não lembra dos atalhos, assim fica mais fácil e rápido recorrer a eles. Alguns só aparecem quando é possível utilizá-los.

 

Artboards

Artboards são as telas de seu app. Cada Artboard representa uma tela ou uma interação dentro de uma tela. Ter um fluxo eficiente das telas é crucial para um designer. E o modo dele organizar as Artboards é super simples e eficiente. Você não precisa ter mais um arquivo para cada tela, e  por ser vetorial, o arquivo fica leve mesmo com dezenas de telas.

 

Com as Artboards e as Páginas, fica extremamente fácil organizar tudo. Chega daquela centenas de layers onde você se perdia. Cada Artboard agrupa suas próprias layers, e você pode facilmente regornizar, duplicar (⌘ D) ou exportá-las separadamente. Para criar uma nova Artboard, basta apertar a tecla A e você vai encontrar uma lista de templates (iOS, Android, Web ou Impressão) para começar.

 

Para o iOS, recomendo fazer seu design em 1x com o iPhone 6 (375 x 667 px), já que é a resolução mais popular.

Artboards customizadas podem ser criadas clicando o botão +.

Páginas

Cada Página (Page) representa uma plataforma ou resolução diferente. Para a maioria dos projetos, você vai ter dezenas de Artboards para uma plataforma iOS. E aí você pode criar uma página para Android, Web, Apple Watch, tvOS, etc. Assim você pode ter todo seu projeto em um único arquivo, economizando bastante seu tempo ao alternar entre plataformas e telas.

 

Você pode abrir as páginas clicando na seta próxima ao nome da página. Você também pode alternar rapidamente entre as páginas usando o dropdown. O atalho no teclado ”é Fn ↑ e ↓.

 

Templates UI

O Sketch já conta com alguns templates de interfaces para iOS, Material Design e Sites web responsivos. Para acessar os templates, basta ir no Menu FileNew From TemplateiOS UI Design.

 

Os templates do iOS e Material Design são um ótimo ponto de partida para quaisquer designers, sejam eles iniciantes ou avançados.

Sketch iOS UI Kit.

 

Material Design UI Kit.

 

Há diversos templates muito bom disponíveis na Internet, como o iOS 9 GUI ou o Facebook Resources. Para salvá-los na lista dos Templates, abra o arquivo e clique no menu FileSave as Template…

 

Cores

Muitas pessoas lutam com cores, é por isso que eu acho que é importante ter uma boa paleta inicial pré-definida. O Sketch deixa você armazenar cores globais ou de um documento específico. Ter as cores do documento gera uma boa economia de tempo e consistência no design. Você pode usar a ferramenta Conta-gotas (Eyedropper) para copiar qualquer cor dentro ou fora do Sketch. Assim você rapidamente cria sua própria paleta. Confira três ótimas paletas para você usar de modelo: iOS, Material Design and Flat UI.

 

 

As paletas de cores podem ser compartilhadas como um arquivo.  Nesse link você tem um exemplo para baixar. Existe um plugin para importar rapidamente as paletas de cores também: Sketch Palettes.

 

Gradientes já não são facilmente importados, mas você pode adicioná-los manualmente, como no vídeo abaixo. Faça o Download do arquivo Gradients Sketch file e siga a demonstração.

 

 

Trabalhando com Textos

O macOS já vem com algumas fontes muito boas, e você também encontra diversas fontes grátis e bonitas no Google Fonts. Algumas indicações de fontes grátis: San Francisco (nova fonte padrão dos sistemas da Apple), Avenir Next, Open Sans and Roboto (fonte padrão do Android). Algumas indicações de fontes pagas: Museo, Gotham e  Proxima Nova.

Para criar uma nova camada de texto, pressione T. Na barra ao lado direito, você pode escolher a fonte e editar os estilos. E ainda, você pode usar estilos de textos pra reutilizar em outras camadas de textos, tipo as classes de CSS, onde você cria uma e aplica nos elementos que quiser.

 

 

Trabalhando com Ícones

Ao criar apps ou layouts para sites, com certeza você vai precisar de muitos ícones em vetor.

Há algumas bibliotecas de ícones, como o PixelLove e Streamline que funcionam muito bem com o iOS. O Sketch é inteiramente baseado em vetor, então você pode facilmente importar ícones em SVG (formato universal de vetor) e editá-los diretamente pelo Sketch, caso necessário.

Se você não tiver muito conhecimento em vetores, pelo menos você consegue facilmente mudar a cor e o tamanho dos ícones para se ajustar ao seu projeto.

 

Símbolos

Uma das coisas que mais gostei no Sketch foram os símbolos. Eles permitem você compartilhar os mesmos elementos entre suas Artboards. É bastante útil quando você usa muitos elementos iguais em muitas telas, como por exemplo a barra de status, a barra de navegação ou a tab bar. Se você mudar um, você não precisa ir de um em um pra mudar, basta modificar o símbolo, e ele vai sincronizar automaticamente todas as instâncias que usam o mesmo símbolo.

 

Símbolos aninhados

Você pode criar símbolos dentro de outros símbolos. Por exemplo, você cria um símbolo de um botão, e dentro dele você cria as variações para botões primários, secundários ou ternários, e além disso ainda pode inserir as variações de hover ou disabled. Embora isso também possa ser feito usando os estilos compartilhados no Inspector.

 

Rápida Exportação para múltiplas resoluções

Essa também é uma das funcionalidades muito úteis do Sketch. Você exporta facilmente as imagens ou ícones para diversas resoluções e formatos.

Ao selecionar os elementos que deseja exportar e clicar em Make exportable a direita da sua tela, você pode escolher exportar em qualquer escala (1x, 2x, 3x) e também em 6 formatos de arquivo (JPG, PNG, SVG, PDF, TIFF and EPS). O PDF é bem útil para os assets de iOS e o SVG é um excelente formato para a web.

 

 

Para muitos usuários, essa função faz o Sketch ganhar muitos pontos. Você não precisa fatiar os elementos como no Photoshop, um por um. Apenas selecionando-os e clicando em Make Exportable já é feito o trabalho. Por padrão, ele já é setado para a escala de 1x, e adicionando slices ele já adiciona 2x e 3x. Mas você também pode colocar a escala em largura e altura (w e h). Por exemplo, se quiser exportar uma imagem com a largura máxima de 400px, basta escrever 400w.

 

Controle de Versão, Autosave e iCloud

Quando você esquece de salvar um documento e acidentalmente desliga seu computador, você geralmente corre o riso de perder todas suas mudanças. É aqui que o Autosave entra. Ele regularmente salva múltiplas versões de seu arquivo, então você não precisa se preocupar em salvar toda hora. Você consegue até reverter para algumas versões anteriores. Isso é bastante útil por exemplo, quando algum outro colaborador abre seu arquivo e não tem as fontes que você usou e aí mudam todas as camadas para a fonte padrão. O Autosave funciona sem ter backup, mas é recomendável você configurar o Time Machine em seu Mac para uma segurança extra. Se seus arquivos forem um pouco grandes, o Autosave vai consumir bastante espaço em disco. Neste artigo tem uma dica boa para você limpar esses backups automáticos do Autosave do Sketch. O iCloud também funciona muito bem com o Sketch. Cada arquivo salvo é guardado em seu HD e também nos servidores da Apple, portanto você consegue recuperar de outro computador caso dê problema com o seu.

 

Visualizando em seu iPhone

Um bom design requer bastante teste. O que pode parecer lindo na tela de seu computador, pode não ser muito bom no seu iPhone. Graças ao app Sketch Mirror, você consegue visualizar seus designs conectando seu iPhone pelo cabo ou usando o Wifi. Se você sai toda hora da sua área de trabalho, você pode configurar o Personal Hotspot em seu iPhone para obter melhores resultados.

As Artboards podem ser alternadas deslizando-as para a esquerda ou direita. Deslizando pra cima ou pra baixo, você alterna as Páginas. Você também pode dar um toque duplo para dar um zoom ou ajustar na tela. O Mirror também permite um scroll durante o preview.

 

Migrando do Photoshop e Illustrator

Como um Designer de Interfaces, você deve estar sentindo falta da sua biblioteca de ícones e logos. Mas assim que você exporta eles para SVG, o processo de migração para o Sketch é super tranquilo.

 

Shapes do Photoshop para o Sketch

Se você tem um conjunto de ícones que é feito exclusivamente no Photoshop, você só precisa exportá-los para SVG, mas você vai precisar também do Illustrator.

 

E meus arquivos PSD?

Considere duas coisas: 1) Você deve trabalhar com vetores e 2) Sempre comece a trabalhar do zero, exceto para suas bibliotecas. Reciclagem de trabalho antigo é um mau hábito para qualquer designer. Em vez de saltar para o Sketch no meio de um projeto, pense em juntar a equipe e experimente o Sketch para fazer um Hackathon ou um projeto pequeno.

 

Os clientes e o Legado do Photoshop

A principal razão para alguns designers não migrarem para o Sketch é pela expectativa dos colegas de trabalho. É uma avaliação justa. Não há uma solução direta para isso, mas vou dizer algumas coisas. Eu trabalhei com o Sketch em 3 lugares diferentes e também com alguns clientes. Em todos, eu consegui converter com sucesso cada designer, engenheiro e gerente. A dica? Ser convincente. O custo de se manter no Photoshop é bem maior do que trocar para uma ferramenta feita sob medida para seu trabalho. Se legado fosse um problema, eu nunca teria migrado para um Mac há 10 anos atrás. O Windows era “tão bom” né? Como nosso gênio Steve Jobs pontuou certa vez: “Por quê entrar na Marinha, se você pode ser um pirata?”. Seja a mudança que você quer ver.

 

Atalhos de Teclado

Design é fácil de aprender, mas difícil para se tornar um mestre. Pode parecer óbvio, mas os atalhos de teclado são umas das coisas que tornam o Sketch tão eficiente no design de interfaces. Ter que clicar tanto com o mouse foi uma das razões que fez eu migrar do Photoshop.

Aqui está uma lista dos principais atalhos para se aprender. Como faço essas ações centenas de vezes no dia, acho importante você se lembrar pelo menos desses. Excluí os padrões Copiar (Command C), Colar (Command V), Zoom (Command +/-) e Salvar (Command S).

 

Enter Editar Texto ou Vetor
R Retângulo
O Círculos (Oval)
T Texto
Alt Mostrar a distância
⌘ G Agrupar Camadas
⌘ Shift G Desagrupar
Ctrl P Mostra/Esconder os Pixels
Ctrl C Color Picker
⌘ D Duplicar
⌘ Shift L Travar/Destravar as camadas
⌘ Shift H Mostrar/Esconder as Camadas
Alternar entre Janelas
⌘ 2 Focar na Camada
⌘ Shift V Colar no mesmo lugar

 

Existem mais de 100 atalhos de teclado para o Sketch.

 

 

 

Obs: Este post é uma adaptação do site Designcode.io e estará em constante atualização. Toda semana irei inserir novos conteúdos explicativos sobre o Sketch aqui.

Ralph Almeida
nosfer@gmail.com

UI/UX Designer e front-end developer • Campinas/SP Com formação acadêmica em TI e pós-graduado em Design Thinking Focado em design de interfaces e experiência do usuário (UI/UX), tendo trabalhado com design de aplicativos mobile (iOS e Android), grandes sites, sistemas web e aplicações desktop.

Sem comentários ainda.

Postar um comentário