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 File ➤ New From Template ➤ iOS 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 File➤ Save 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).

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.

1. O scroll infinito pode diminuir sua Taxa de Rejeição (Bounce Rate). O site Time.com diminuiu sua taxa de rejeição em 15% após adotar o scroll infinito.

Fonte

2.Em 10 anos, um investimento de US $ 10.000 em empresas que tem o design como parte do business, teria rendido retornos 228% maiores do que o mesmo investimento no S&P (indicador do mercado acionário americano de grande capitalização).

Fonte

3. As receitas da ESPN.com subiram 35% depois de terem escutado a sua comunidade e incorporado sugestões no redesign do site.

Fonte

4. O Bing.com aumentou sua receita anual em U$ 80 milhões ao escolher um azul específico em uma gama de tons de azuis.

Fonte

5. Para cada $1 gasto em e-mail marketing, a média de retorno é de $44.25.

Fonte

6. 88% dos consumidores online são menos propensos a retornar a algum site depois de uma experiência ruim que tiveram nele.

Fonte

7. Sites que demoram a carregar custam aos varejistas cerca de $2.6 bilhões em perdas a cada ano.

Fonte

8. 75% das pessoas julgam a credibilidade de um site baseado na estética global dele.

Fonte

9. As primeiras impressões são 94% relacionadas ao design.

Fonte

10. 85% dos adultos acham que o site em um dispositivo móvel de uma empresa deve ser tão bom ou melhor do que o site na versão desktop.

Fonte

11. Em uma avaliação com 200 sites de pequenas empresas, 70% deles não exibiram Call-to-actions evidentes para qualquer coisa em suas páginas iniciais, como ofertas especiais, boletins informativos por e-mail, guias de instruções, demos e ferramentas interativas.

Fonte

12. 90% das pessoas usam vários dispositivos ao mesmo tempo (tablet, celular, tv, computador).

Fonte

13. Você é 279.64 vezes mais propenso a escalar o Monte Everest do que clicar num banner de propaganda.

Fonte. Photo by shrimpo1967. CC BY-SA 2.0.

Confira o post original no Blog do Invision

Pois é, descobri essa semana o Animate Mate, um plugin para o Sketch, que é bem simples de mexer e animar as coisas. São animações simples, claro, não é um substituto para os softwares que citei acima, mas já ajuda bastante para dar um up nos protótipos.

Segue o link para download: Animate Plugin – Sketch

Veja abaixo algumas animações feitas com ele:

Projeto do Animate Mate no Github

Elas são ótimas fontes para serem usadas em leitura na web, como tem textos grandes, notícias, blogs, etc. E também ficam muito boas em títulos grandes.

Os links para baixá-las são esses:

Download the Yrsa fonts (Latin script)

Download the Rasa fonts (Gujarati script)

Abaixo temos alguns exemplos de utilização das fontes:

Cair numa página não encontrada de um site não é uma boa experiência para o usuário. Para amenizar esse erro, muitos designers resolvem tornar essa página uma experiência diferente, colocando algum desenho/ilustração/imagem diferente, bonita visualmente ou adicionando um toque de humor.

O site CollectUI fez uma seleção das melhores páginas de erro 404 no Dribbble, no mês de Março, para você se inspirar.

–

Para desenvolvedores que não gostam muito de design, é uma ótima pedida utilizar templates em HTML+CSS e apenas fazer a programação. Alguns templates já vem com vários plugins para animação, loadings, botões e até preparados para Angular JS. Mais pra frente vamos fazer um post com esses templates prontos.

Mas agora você vê alguns templates disponibilizados em PSD (Photoshop) e Sketch, para você utilizar sua imaginação e usar eles como inspiração. Todos são gratuitos e você pode usar sem problemas. Essa compilação foi feita pelo site Speckyboy.com.

Buvud eCommerce Dashboard UI/UX Kit (Photoshop PSD)

Designed by Anton Kalik

Flat Course Admin Dashboard (Skectch)

Designed by Hoang Nguyen

Kavina Dashboard Analytics Template (Photoshop PSD)

Designed by Septiandika Pratama

UInugge Dashboard Design (Photoshop PSD)

Admin Dashboard Free Template (Photoshop PSD)

Designed by Aaron Sananes

ThemePanda Responsive Dashboard Design (Photoshop PSD)

Designed by Raaz Das

Smart Admin Dashboard UI (Photoshop PSD)

Designed by Mushfiq

Dashboard Freebie (Sketch App)

Designed by Ante Matijaca

Morph-UI Flat Dashboard UI Kit (PNG & Photoshop PSD)

Designed by Morphosis

Analytics Dashboard UI Kit (Photoshop PSD)

Designed by Balkan Brothers

Admin Dashboard UI Freebie (Photoshop PSD & Sketch App)

Designed by Sergiu Firez

Clean Dashboard (Sketch App)

Designed by Padam Boora

Data Analytics Dasboard (Sketch App)

Designed by Tonda Kus

eCommerce Dashboard Admin (Photoshop PSD)

Designed by Bagus Fikri

Dribbble Stats Dashboard (Photoshop Photoshop PSD)

Designed by Dany Rizky

Merkury Dashboard Template (Photoshop PSD)

Designed by Symu

FokiraDash Dashboard UI Template (Photoshop PSD)

Designed by Eftakher Alam

Dashboard UI Elements (Photoshop PSD)

Designed by Craftwork

Free Dashboard (Photoshop PSD)

Designed by Malte Westedt

São dicas como adicionar line-height ao body, alinhar verticalmente ao centro, listas separadas por vírgula, e muitas outras.
No link abaixo você vê o artigo completo, em inglês:

CSS Protips

1. Arraste e solte para substituir o preenchimento de um shape

2. Arraste e solte para substituir a imagem de um símbolo

3. Legendas de fotos redimensionáveis

4. Arraste e solte suas artes direto para o Slack

5. Use uma imagem como preenchimento de um texto

6. Snap Text to a Path

7. Tipografia super customizada

8. Card Grids perfeitos

No link abaixo você vê o artigo completo, em inglês:

I didn’t know Sketch could do that!

Pois é, hoje em dia muitos sites estão meio que seguindo um padrão de design, e não é difícil você ver diversos sites com a mesma estrutura de design.

Veja o site abaixo, é provavelmente a estrutura que você vê na maioria dos sites de agências.

E parece que todo o mercado de web design/ux design tem seguido padrões nos sites. Vemos isso em e-commerces, mídias sociais, páginas de produtos, landing pages, blogs, portifolios, mensageiros e até plataformas de vídeo, cada um seguindo o padrão da sua indústria.

No link abaixo você vê o artigo completo, em inglês:

WHERE HAS THE CREATIVITY GONE IN WEB (AND UX) DESIGN?