Uma pequena apresentação sobre o aplicativo Sketch da Bohemian Coding

1. Nelson Vasconcelos
Usando o Sketch

2. Quando pensamos em fazer a UI de um site ou app
as primeiras ferramentas que vem a mente são:

3. Problemas com o
Photoshop
Trabalha primariamente com bitmaps
Arquivos muito pesados
Dificuldade em se trabalhar com diferentes
resoluções (Mobile)
Não é bom para desenvolver idéias
Complicado de trabalhar múltiplas telas em um
único arquivo

4. • 1 única tela possui em formato
PSD possui quase 20mb

5. Problemas com o
Illustrator
• Trabalha primariamente com vetores
• Possui artboards, mas é difícil se se organizar
em layers
• Difícil de exportar assets
• Pixel grid falha

6. Ambos aplicativos gráficos são muito bons para
trabalhar com bitmap ou vetores

7. Mas nenhum deles é focado
unicamente em…

8. UI Design

9. http://bohemiancoding.com/sketch/

10. • O que dá pra fazer com 15mb
no Sketch?

11. (*Sem contar com o template p/ Material Design em outra page)

12. Principais vantagens

13. http://www.sketchappsources.com
Comunidade forte e ativa

14. Organização de Pages > Artboards > Layers

15. Trabalha com vetores, mas com
alinhamento preciso à grid de pixels

16. É muito mais fácil desenvolver idéias
copiando artboards

17. Ótimo controle para paths

18. Múltiplos fills, borders, shadows e
blurs em um único objeto

19. Fácil de exportar assets

20. Prototipação

21. Integração com Invision para
criar protótipos navegáveis
http://www.invisionapp.com/sketch-prototyping

22. Vendo o preview do seu app no aparelho
Skala Preview
http://bjango.com/mac/skalapreview/
Sketch Preview
https://github.com/marcisme/sketch-preview
+

23. Trabalhando com
desenvolvedores

24. Gerando CSS
/* Rectangle 145: */
background: #0091C8;
box-shadow: inset 0px 1px 2px 0px
rgba(255,255,255,0.50),
inset 0px -1px 2px 0px rgba(0,0,0,0.50);
border-radius: 4px;
/* Carregar mais imóvei: */
font-family: OpenSans;
font-size: 32px;
color: #FFFFFF;
line-height: 43px;

25. https://github.com/utom/sketch-measure
Gerando anotações

26. Recuperando
arquivos

27. O Sketch salva os arquivos
automaticamente, e você pode acessar
versões anteriores em:
File > Revert To > Browse All Versions…

29. http://sketchtoolbox.com
Como gerenciar plugins?

31. OBRIGADO :)
o@ner.so
@nvasconcelos_
+NelsonVasconcelos
br.linkedin.com/in/nelsonvasconcelos/