Top Banner
Sketch @williamhutter @lewagonaixmrs starring
39

Le wagon Aix-Marseille - sketch

Apr 13, 2017

Download

Design

Louis Chavane
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Le wagon Aix-Marseille  -   sketch

Sketch

@williamhutter@lewagonaixmrs starring

Page 2: Le wagon Aix-Marseille  -   sketch

Sketch

Page 3: Le wagon Aix-Marseille  -   sketch

Sketch

UI Design Tool Wireframing TooliOS Android and Web design

Page 4: Le wagon Aix-Marseille  -   sketch

Other Design tools

vs

Page 5: Le wagon Aix-Marseille  -   sketch

Sketch and Windows ?

Buy a macInstall Mac on Windows (Nerd only)

vs

Page 6: Le wagon Aix-Marseille  -   sketch

Workshop outlineTheoretical introsBasic concepts to understand

Live-design demosWe design, you don'tYour turn Design & have fun

Page 7: Le wagon Aix-Marseille  -   sketch

Let’s enter a new world

Page 8: Le wagon Aix-Marseille  -   sketch

Setup

Download it

Page 9: Le wagon Aix-Marseille  -   sketch

Dowload the exercisesDownload it

Page 10: Le wagon Aix-Marseille  -   sketch

Launch Unzip and open Wagon.sketch

Page 11: Le wagon Aix-Marseille  -   sketch

Artboard

Artboards are the Screens of your app

Page 12: Le wagon Aix-Marseille  -   sketch

Create an artboard

Shortcut : A

Page 13: Le wagon Aix-Marseille  -   sketch

Define a size

Page 14: Le wagon Aix-Marseille  -   sketch

Use templates

Page 15: Le wagon Aix-Marseille  -   sketch

Rename it

Double click

Page 16: Le wagon Aix-Marseille  -   sketch

Add text

Page 17: Le wagon Aix-Marseille  -   sketch

Your turn !

Open the page 1. Artboards & Text

Page 18: Le wagon Aix-Marseille  -   sketch

Shape

A Shape is a basic element of your design

Page 19: Le wagon Aix-Marseille  -   sketch

Shape attributesSize Radius Color Opacity Borders Shadow

Page 20: Le wagon Aix-Marseille  -   sketch

Shape operations

Page 21: Le wagon Aix-Marseille  -   sketch

Shape operations

Select two shapes

Select an operation

Page 22: Le wagon Aix-Marseille  -   sketch

Import other shapes

Page 23: Le wagon Aix-Marseille  -   sketch

Symbol

A Symbol allows to re-use the same component - DRY

Page 24: Le wagon Aix-Marseille  -   sketch

Your turn !

Open the page 2. Shapes & Symbols

Page 25: Le wagon Aix-Marseille  -   sketch

Your turn !

Open the page 3. Masks & groups

Page 26: Le wagon Aix-Marseille  -   sketch

Pick color from pages

Page 27: Le wagon Aix-Marseille  -   sketch

Craft Plugin

Download it

Page 28: Le wagon Aix-Marseille  -   sketch

Your turn !

Open the page 4. Craft Plugin & Content Generation

Page 29: Le wagon Aix-Marseille  -   sketch

Page

Each Page represents a platform or a completely different resolution.

Page 30: Le wagon Aix-Marseille  -   sketch

Your Turn

Page 31: Le wagon Aix-Marseille  -   sketch

Export your job

Page 32: Le wagon Aix-Marseille  -   sketch

Drag and drop export

Page 33: Le wagon Aix-Marseille  -   sketch

Export locally

Page 34: Le wagon Aix-Marseille  -   sketch

Export SVG

Page 35: Le wagon Aix-Marseille  -   sketch

Next steps

Mirror your pages on devices

Animate your design with Proto.io

Animate SVG on with CSS

Page 36: Le wagon Aix-Marseille  -   sketch

Go further

ondemand.lewagon.org

www.lewagon.org/aix-marseille

Page 37: Le wagon Aix-Marseille  -   sketch

Feedback

Answer our typeform

Page 38: Le wagon Aix-Marseille  -   sketch

Help us ;)

Review our Facebook page

Page 39: Le wagon Aix-Marseille  -   sketch

Thank you!