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.

 

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