Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.
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
Prochain SlideShare
Chargement dans…5
×

Trabalhando com o Sketch App

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

  • Identifiez-vous pour voir les commentaires

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/

×