Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Nelson Vasconcelos
Usando o Sketch
Quando pensamos em fazer a UI de um site ou app
as primeiras ferramentas que vem a mente são:
Problemas com o
Photoshop
Trabalha primariamente com bitmaps
Arquivos muito pesados
Dificuldade em se trabalhar com diferen...
• 1 única tela possui em formato
PSD possui quase 20mb
Problemas com o
Illustrator
• Trabalha primariamente com vetores
• Possui artboards, mas é difícil se se organizar
em laye...
Ambos aplicativos gráficos são muito bons para
trabalhar com bitmap ou vetores
Mas nenhum deles é focado
unicamente em…
UI Design
http://bohemiancoding.com/sketch/
• O que dá pra fazer com 15mb
no Sketch?
(*Sem contar com o template p/ Material Design em outra page)
Principais vantagens
http://www.sketchappsources.com
Comunidade forte e ativa
Organização de Pages > Artboards > Layers
Trabalha com vetores, mas com
alinhamento preciso à grid de pixels
É muito mais fácil desenvolver idéias
copiando artboards
Ótimo controle para paths
Múltiplos fills, borders, shadows e
blurs em um único objeto
Fácil de exportar assets
Prototipação
Integração com Invision para
criar protótipos navegáveis
http://www.invisionapp.com/sketch-prototyping
Vendo o preview do seu app no aparelho
Skala Preview
http://bjango.com/mac/skalapreview/
Sketch Preview
https://github.com...
Trabalhando com
desenvolvedores
Gerando CSS
/* Rectangle 145: */
background: #0091C8;
box-shadow: inset 0px 1px 2px 0px
rgba(255,255,255,0.50), 

inset 0p...
https://github.com/utom/sketch-measure
Gerando anotações
Recuperando
arquivos
O Sketch salva os arquivos
automaticamente, e você pode acessar
versões anteriores em:
File > Revert To > Browse All Versi...
http://sketchtoolbox.com
Como gerenciar plugins?
OBRIGADO :)
o@ner.so
@nvasconcelos_
+NelsonVasconcelos
br.linkedin.com/in/nelsonvasconcelos/
Trabalhando com o Sketch App
Trabalhando com o Sketch App
Upcoming SlideShare
Loading in …5
×

Trabalhando com o Sketch App

1,898 views

Published on

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

Published in: Design

Trabalhando com o Sketch App

  1. 1. Nelson Vasconcelos Usando o Sketch
  2. 2. Quando pensamos em fazer a UI de um site ou app as primeiras ferramentas que vem a mente são:
  3. 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. 4. • 1 única tela possui em formato PSD possui quase 20mb
  5. 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. 6. Ambos aplicativos gráficos são muito bons para trabalhar com bitmap ou vetores
  7. 7. Mas nenhum deles é focado unicamente em…
  8. 8. UI Design
  9. 9. http://bohemiancoding.com/sketch/
  10. 10. • O que dá pra fazer com 15mb no Sketch?
  11. 11. (*Sem contar com o template p/ Material Design em outra page)
  12. 12. Principais vantagens
  13. 13. http://www.sketchappsources.com Comunidade forte e ativa
  14. 14. Organização de Pages > Artboards > Layers
  15. 15. Trabalha com vetores, mas com alinhamento preciso à grid de pixels
  16. 16. É muito mais fácil desenvolver idéias copiando artboards
  17. 17. Ótimo controle para paths
  18. 18. Múltiplos fills, borders, shadows e blurs em um único objeto
  19. 19. Fácil de exportar assets
  20. 20. Prototipação
  21. 21. Integração com Invision para criar protótipos navegáveis http://www.invisionapp.com/sketch-prototyping
  22. 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. 23. Trabalhando com desenvolvedores
  24. 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. 25. https://github.com/utom/sketch-measure Gerando anotações
  26. 26. Recuperando arquivos
  27. 27. O Sketch salva os arquivos automaticamente, e você pode acessar versões anteriores em: File > Revert To > Browse All Versions…
  28. 28. http://sketchtoolbox.com Como gerenciar plugins?
  29. 29. OBRIGADO :) o@ner.so @nvasconcelos_ +NelsonVasconcelos br.linkedin.com/in/nelsonvasconcelos/

×