Dev and Designers intro to Sketch

Post on 14-Feb-2017

176 views 0 download

Transcript of Dev and Designers intro to Sketch

INTRODUCTION TO SKETCH 3.0

“Or how I learned to stop using Photoshop”

“…except for when I need to edit an actual photo. Then I’ll probably use Photoshop.”

Mark SchumacherManager of Interactive Design

Ackmann & Dickenson

BA in Graphic Design from Minnesota State University Moorhead 10+ years experience in UI and UX

@rad235

Web Development (rails, .net, java, php, custom javascript)

Digital Marketing

UI/UX

Mobile Applications (android, iOS)

www.ackmanndickenson.com @adcraftsmen

We’re located at

221 E Indianola Ave, Phoenix

Phoenix’s member-sustained, community-supported collaborative coworking space.

Sketch By Bohemian Coding

Professional digital design for Mac.

Sketch gives you the power, flexibility and speed you always wanted in a lightweight and easy-to-use package.

Finally you can focus on what you do best: Design.

Sketch 1.0 came out in 2010. It was primitive,

but there was hope.

Sketch 3.0 April 2014

Sketch Upsides

Close to web rendering

Small file sizes

Built in grids

Fast application

Non destructive editing

Sketch Downsides

Poor Color Management

Still has the occasional bug

Zoom levels aren’t perfect

Fewer shortcuts

Third party plugins aren’t always updated

Multiple Artboards

Multiple Artboards

Multiple Artboards

Multiple Artboards

Multiple Artboards

Multiple Artboards

Templates / UI Components

Templates / UI Components

Templates / UI Components

Templates / UI Components

Templates / UI Components

Templates / UI Components

Templates / UI Components

Templates / UI Components

Symbols

Symbols

Symbols

Symbols

Symbols

Text Styles

Text Styles

Text Styles

Text Styles

Text Styles

Exporting

Exporting Assets

Exporting Assets

Exporting Assets

Sketch Mirror

Sketch Mirror

App Store Download

Sketch Mirror

Exporting CSS

Exporting CSS/markup

Plugins

Plugins

Plugin Manager

Plugins of Note

Magic Mirror Create automated perspective mockups and more.

http://magicmirror.design/

Magic Mirror

by InVision Labs Create designs with real data.

https://www.invisionapp.com/craft

Zepelin Generate style guides and markup automatically.

https://zeplin.io

Sketch Toolbox A super simple plugin manager for Sketch

http://sketchtoolbox.com

Quick demo…