Page 1
Sketch
@williamhutter@lewagonaixmrs starring
Page 3
Sketch
UI Design Tool Wireframing TooliOS Android and Web design
Page 4
Other Design tools
vs
Page 5
Sketch and Windows ?
Buy a macInstall Mac on Windows (Nerd only)
vs
Page 6
Workshop outlineTheoretical introsBasic concepts to understand
Live-design demosWe design, you don'tYour turn Design & have fun
Page 7
Let’s enter a new world
Page 9
Dowload the exercisesDownload it
Page 10
Launch Unzip and open Wagon.sketch
Page 11
Artboard
Artboards are the Screens of your app
Page 12
Create an artboard
Shortcut : A
Page 15
Rename it
Double click
Page 17
Your turn !
Open the page 1. Artboards & Text
Page 18
Shape
A Shape is a basic element of your design
Page 19
Shape attributesSize Radius Color Opacity Borders Shadow
Page 21
Shape operations
Select two shapes
Select an operation
Page 22
Import other shapes
Page 23
Symbol
A Symbol allows to re-use the same component - DRY
Page 24
Your turn !
Open the page 2. Shapes & Symbols
Page 25
Your turn !
Open the page 3. Masks & groups
Page 26
Pick color from pages
Page 27
Craft Plugin
Download it
Page 28
Your turn !
Open the page 4. Craft Plugin & Content Generation
Page 29
Page
Each Page represents a platform or a completely different resolution.
Page 32
Drag and drop export
Page 35
Next steps
Mirror your pages on devices
Animate your design with Proto.io
Animate SVG on with CSS
Page 36
Go further
ondemand.lewagon.org
www.lewagon.org/aix-marseille
Page 37
Feedback
Answer our typeform
Page 38
Help us ;)
Review our Facebook page