Sketch

@williamhutter@lewagonaixmrs starring

Sketch

Sketch

UI Design Tool Wireframing TooliOS Android and Web design

Other Design tools

vs

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

Let’s enter a new world

Setup

Download it

Dowload the exercisesDownload it

Launch Unzip and open Wagon.sketch

Artboard

Artboards are the Screens of your app

Create an artboard

Shortcut : A

Define a size

Use templates

Rename it

Double click

Add text

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

Shape operations

Shape operations

Select two shapes

Select an operation

Import other shapes

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

Pick color from pages

Craft Plugin

Download it

Your turn !

Open the page 4. Craft Plugin & Content Generation

Page

Each Page represents a platform or a completely different resolution.

Your Turn

Export your job

Drag and drop export

Export locally

Export SVG

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

Feedback

Answer our typeform

Help us ;)

Review our Facebook page

Thank you!