Le wagon Aix-Marseille - sketch
1 like1,549 views
Sketch is a UI design tool for wireframing iOS, Android, and web designs. The document outlines a workshop to introduce basic Sketch concepts like artboards, shapes, symbols, and pages. Attendees will learn how to use these tools by following demonstrations and exercises to design mockups. Exporting designs from Sketch and next steps like animation are also covered. Feedback is requested at the end to help improve future workshops.
Le wagon Aix-Marseille - sketch
- 2. Sketch
- 3. Sketch UI Design Tool Wireframing Tool iOS Android and Web design
- 5. Sketch and Windows ? Buy a mac Install Mac on Windows (Nerd only) vs
- 6. Workshop outline Theoretical intros Basic concepts to understand Live-design demos We design, you don't Your turn Design & have fun
- 7. Let’s enter a new world
- 10. Launch Unzip and open Wagon.sketch
- 11. Artboard Artboards are the Screens of your app
- 12. Create an artboard Shortcut : A
- 13. Define a size
- 14. Use templates
- 16. Add text
- 17. Your turn ! Open the page 1. Artboards & Text
- 18. Shape A Shape is a basic element of your design
- 20. Shape operations
- 21. Shape operations Select two shapes Select an operation
- 23. Symbol A Symbol allows to re-use the same component - DRY
- 24. Your turn ! Open the page 2. Shapes & Symbols
- 25. Your turn ! Open the page 3. Masks & groups
- 26. Pick color from pages
- 28. Your turn ! Open the page 4. Craft Plugin & Content Generation
- 29. Page Each Page represents a platform or a completely different resolution.
- 30. Your Turn
- 31. Export your job
- 32. Drag and drop export
- 33. Export locally
- 34. Export SVG
- 35. Next steps Mirror your pages on devices Animate your design with Proto.io Animate SVG on with CSS
- 38. Help us ;) Review our Facebook page
- 39. Thank you!