SketchRapid Prototyping & Theme Design

Ryan King kingr@si.edu @ryancanhelpyou

What is Sketch?

http://bohemiancoding.com/sketch/

Professional digital design for Mac.

Assumptions• General graphic app concepts and

terminology

• Basic understanding of how webpages work

• While you can use Sketch for other design purposes, this talk is primarily web focused

Presentation• This is just an introduction.

• One of the great things about sketch is the community. There are so many high quality resources out there from tutorials, to plugins that enhance functionality, to shared assets and UI/UX libraries to get you started (think stock graphics)

• I will get you started, and provide you resources to continue the journey on your own

Open Source• Sadly, no.

• $99 license (educational pricing also)

• Open Source alternatives:

https://inkscape.org

http://www.gimp.org

What about Adobe?• Powerful and great… but with that, bloated and

steep learning curve

• …and expensive: $120 - $600/ year

When to use Sketch?

Sketch: Web (vector / flat artwork)

Photoshop: photographs, heavy image retouching and manipulation (photo correction)

Illustrator: logos, line art / drawing

InDesign: print

Why I use Sketch?Nicely designed, solid app that allows me to work faster and happier ;)

https://thenetawards.com/

http://bohemiancoding.com/sketch/

Benefits

Benefits

SimplicityEasy to use, quick to learn

The Inspector panel

Very thorough and free online manual: http://bohemiancoding.com/sketch/support/documentation/

Benefits

Vector“Vector-based drawing is by far the the best way to design websites, icons or interfaces.”

- sketch manual

Benefits

SpaceInfinite canvas + multiple artboards

Benefits

Reusable ElementsObjects

Symbols

Text Styles

Benefits

Easy ExportingMultiple formats

Streamlined workflow

Side note

I’m a beginnerI picked it up on my own and am still learning… but wanted to share with you my findings and tips I’ve learned along the way

Other cool stuff

Extrasdrag out layers (boom. done.)

CSS styles

Printing (great for review and critiques)

iOS Mirror…. magical + fun

Built for Mac

IntegratedFast, snappy

Auto-save & Versions (amazing!)

iCloud sync

Enough talk; let’s explore.

The Interface• one-window app

• toolbar on top

• inspector on right (adapts/contextual…displaying only the properties you need for the tool you are currently using)

• layers and artboards on left

Quick Start

• Let the magic begin!

• Demo: File > New From Template: iOS App, iOS UI, Material Design (Google), Web Design, Welcome to Sketch

Tools• Shapes

• Text

• Artboards

• Symbols

• Slices

• iOS Mirror

Plugins• Content Generator

• Swatches

• Integrations: Slack, Git, etc

• Sketch Toolbox

Export

• Demo: drag whole art board

• export multiple versions @ once (png, jpg, pdf)

• will only give you the necessary options

• can even set specific width, etc

Resourceshttp://bohemiancoding.com/sketch/learn/ (user manual)

http://bohemiancoding.com/sketch/community/

http://blog.invisionapp.com/11-tips-for-prototyping-with-sketch/

http://www.sketchappsources.com

“Thank you

Ryan King kingr@si.edu @ryancanhelpyou

To design is to communicate clearly by whatever means you can control or master. - Milton Glaser