Sketch
@williamhutter@lewagonaixmrs starring
Sketch
UI Design Tool Wireframing TooliOS Android and Web design
Sketch and Windows ?
Buy a macInstall Mac on Windows (Nerd only)
vs
Workshop outlineTheoretical introsBasic concepts to understand
Live-design demosWe design, you don'tYour turn Design & have fun
Dowload the exercisesDownload it
Launch Unzip and open Wagon.sketch
Artboard
Artboards are the Screens of your app
Your turn !
Open the page 1. Artboards & Text
Shape
A Shape is a basic element of your design
Shape attributesSize Radius Color Opacity Borders Shadow
Symbol
A Symbol allows to re-use the same component - DRY
Your turn !
Open the page 2. Shapes & Symbols
Your turn !
Open the page 3. Masks & groups
Your turn !
Open the page 4. Craft Plugin & Content Generation
Page
Each Page represents a platform or a completely different resolution.
Next steps
Mirror your pages on devices
Animate your design with Proto.io
Animate SVG on with CSS
Go further
ondemand.lewagon.org
www.lewagon.org/aix-marseille