UX Design : Best practices to prototype your website / mobile app with Sketch

1. Sketch
@williamhutter@lewagonaixmrs starring

2. Sketch

3. Sketch
UI Design Tool
Wireframing Tool
iOS Android and Web design

4. Other Design tools
vs

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

8. Setup
Download it

9. Dowload the exercises
Download it

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

15. Rename it
Double click

16. Add text

17. Your turn !
Open the page
1. Artboards & Text

18. Shape
A Shape is a basic element of your design

19. Shape attributes
Size
Radius
Color
Opacity
Borders
Shadow

20. Shape operations

21. Shape operations
Select two shapes
Select an operation

22. Import other shapes

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

27. Craft Plugin
Download it

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

36. Go further
ondemand.lewagon.org
www.lewagon.org/aix-marseille

37. Feedback
Answer our typeform

38. Help us ;)
Review our Facebook page

39. Thank you!