Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Get to know the audience How many of you have… • done PowerPoint presentations? • used graphical assets like banners etc. a lot (e.g. social media)? • used Sketch or Adobe etc. before? • done some print stuff? Illustrations or posters etc.

Slide 3

Slide 3 text

How many of you… How many of you have… • used WYSIWYG tools to build layouts? MailChimp etc.? • done animation? • a technical background? • coded in HTML + CSS or other UI tech?

Slide 4

Slide 4 text

Why learn Sketch? Understand key parts of development pipeline better Learn to validate ideas independently • UX idea? • Draft it: force yourself to consider things you may have overlooked • Same reason why we build prototypes before producing a feature Be less dependent on others Learning is fun!

Slide 5

Slide 5 text

Do you know what’s the difference between vectors and bitmaps? Have you ever heard of JPG, PNG, GIF, SVG, AI, EPS? Have you ever heard of PDFs? Graphics formats

Slide 6

Slide 6 text

Graphic formats? SVG PNG

Slide 7

Slide 7 text

SVG PNG

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

What is Sketch for? Graphics editor: raw vector editing capabilities • Creating and editing points, lines, shapes and text elements • Adjust stylistic properties of these objects (border styles, colors, gradients, font weights…) Good for creating UI graphics • But doesn't have the most advanced features • Excellent when less graphically intensive needs Advanced tools for maintaining complex documents and automating asset production

Slide 11

Slide 11 text

What is Sketch for? Supports bitmap images copy-pasted or imported from files VERY limited bitmap editing • "Sketch contains a couple of most-common bitmap editing capabilities to help prevent you from jumping between different design tools." • Cropping, inverting colors, solid fills Blending options (such as brightness etc.) work for both bitmaps and vector objects

Slide 12

Slide 12 text

Interface walkthrough

Slide 13

Slide 13 text

Hands-on

Slide 14

Slide 14 text

Resources Full documentation, tutorials, community links: sketchapp.com Tons of other materials: google.com