Sketch Workshop

Workshop de Sketch realizado no terceiro meetup do IxDA SJC.

O objetivo foi apresentar uma das ferramentas mais amadas pelos designers da atualidade: Sketch! através de uma abordagem mão na massa, apresentei o básico da ferramenta como : layers, symbols, libraries, design system e os plugins e foi lançado um desafio simulando um projeto real onde os participantes fizeram wireframe com "pápis e papel" (baixa fidelidade) e em seguida desenharam o layout no sketch (alta fidelidade) em um sprint de 50 minutos.

Transcript

1. W O R K S H O P
2. Michel Amaral @michelamaral designa.com.br
4. 2 partes
5. Teoria 15 minutos
6. Prática 60 minutos
7. …
8. A.S.
9. D.S.
10. A.S. Antes Sketch
11. D.S. Depois do Sketch
12. A.S. Antes Sketch
16. ?
17. Photoshop
18. Photoshop
19. Illustrator
20. Illustrator
21. É o que temos pra hoje!
22. Problemas Quem nunca…
23. Exportar Assets… vulgo “fatiar"
24. Artboards Qual o tamanho do device?
25. Pixel Pixel Perfect
26. Color Qual o hexa dessa cor?
27. Espaço Qual distância entre esses elementos?
28. …
29. D.S. Depois do Sketch
30. Versão 3.0 Lançada em 14/04/2014
31. Versão 47.1 Última versão 17/10/2017
32. Último ano Mais de 15 versões
33. Updates https://www.sketchapp.com/updates/
35. #sorteio
36. Primeiros passos
37. Download https://www.sketchapp.com
38. Price Trial or $99/year
39. Interface artboard, inspector, layer list, pages
40. Shapes rotate, masking, calc sizes
41. Styling colors, fill, borders, shadow, blur
42. Canvas rules, guides, grids, measuring, distance
43. Exporting make exportable, file formats, export artboard, presets, “/“
44. Symbols reuse elements, nested symbol, organizing “/“
45. Libraries share & collaborate, design system
46. Comunidade
47. Plugins extensions, created by community
 
 http://sketchrunner.com
 https://zeplin.io
48. Community https://www.sketchapp.com/community/
49. Learn https://www.sketchapp.com/docs/
50. Prática " " " "
51. Cenário Um cliente entrou em contato…
52. https://www.udacity.com
53. Cursos online Ele já tem versão web. Ele quer um app!
54. Pesquisa Já fizemos! Já entendemos o contexto
55. Público Já definimos as personas!
56. Jornada do usuário Já fizemos!
57. Sprint #1 Fluxo de login
58. Wireframe Em papel, vulgo “rabisco frame” (10 minutos)
59. Wireframe (10 minutos) Cadastro por e-mail ou facebook Login por e-mail ou facebook Esqueci a senha
60. Sketch Alta fidelidade (50 minutos)
61. Muito obrigado! @michelamaral www.designa.com.br