trabalhando com o sketch app
TRANSCRIPT
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 diferentes resoluções (Mobile)
Não é bom para desenvolver idéias
Complicado de trabalhar múltiplas telas em um único arquivo
• 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 layers
• Difícil de exportar assets
• Pixel grid falha
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
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 Previewhttp://bjango.com/mac/skalapreview/
Sketch Previewhttps://github.com/marcisme/sketch-preview
+
Trabalhando com desenvolvedores
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;
Recuperando arquivos
O Sketch salva os arquivos automaticamente, e você pode acessar
versões anteriores em:
File > Revert To > Browse All Versions…
OBRIGADO :)
@nvasconcelos_
+NelsonVasconcelos
br.linkedin.com/in/nelsonvasconcelos/