SlideShare a Scribd company logo
Get started with Sketch: a fast (and awesome) communication and design tool
Get started with Sketch: a fast (and awesome) communication and design tool
Get started with Sketch: a fast (and awesome) communication and design tool
Agenda
‣ Getting Started, What is Sketch?
‣ Feature Review
‣ Layers, Colors, Strokes
‣ Navigating, Duplicating, Drawing
‣ Measuring, Slicing, Exporting
‣ Activity!
‣ Experiment with a SocialCode UI Kit and Export Creation
Getting Started
1. Got a license?
Download: bohemiancoding.com/sketch/
2. Got fonts? 



3. Got a Sketch UI Kit?
{
svn checkout https://github.com/google/fonts/trunk/apache/opensans
mv -f ~/opensans/*.ttf ~/Library/Fonts/
rm -rf opensans
}
What is Sketch?
Sketch is design program 

for user interfaces…
Vector Bitmap
Building and Growing…
tools.subtraction.com
tools.subtraction.com
tools.subtraction.com
What’s Inside?
Pages. Artboards. Layers.
Layer
Artboard
Page
Pages. Artboards. Layers.
Sizes. Styles.
Size
Border radius
Fill
Border
Shadows
Drawing Tools!
Rt-click here
Drawing Tools!
Rt-click hereCustomize
Customize Toolbar
Customize Toolbar
Also: “R” for Rectangle
“L” for Line
“V” for Vector
Export Images
It’s here!
Export Images
BAM
Export Images
1. Double-click to select
Export CSS
Export CSS
2. Rt-click 3. Copy CSS
This is an example of a success
toast confirming that something
happened as expected.
Spacing (⌥+ )
‣ Find the distance between any two elements
‣ 1. Double-click and Select the layer
‣ 2. Hold option and hover over elements
This is an example of a success
toast confirming that something
happened as expected.
15
15
1515
Where is it useful?
‣ In the process of software dev at SocialCode
‣ Good for: fast drawing tool, diagrams, flow charts, 

high-res mockups, assets
‣ Other tools: Whiteboards, Zeplin, InVision, CodePen
‣ Part II of this talk…?
‣ Handoffs and process tools in general (that make sense)
Time
For an Abstract Model
For a User Flow
For DR Accounts, Pull Spend/
Impressions/Website Clicks/
Conversions/Conversion Value.
For video, pull down retention
metrics.
Client team goes through and
manually labels creative
“Ideally, these creatives would be labeled as
part of our upload process, but in a lot of
cases we're labeling them after the fact, which
is a pretty massive undertaking.”
—HJ
Take the new data file with relevant
creative labels and go through and
analyze the data by each of those
labels in terms of their key
performance metrics
BLAH. More stakeholders and hand
holding.
Analyze data by label Deck needs design/brand
overview
Create set of 10-15 categories that we
label each creative (ex: product,
primary colors, etc.). Next divide up the
creatives for the team and to manually
pull up each individual post, and enter
in correct labels for each category
Create a PNG that has no interactivity
and no spice. Z-index (hover effects)
and time (updates to data, watching
video, any animation) gone!
Set Categories for Each Creative Put it into a deck
Use SQL query to pull post data from
the Facebook interface by Page ID and
Post ID. Story ID is used to build out
Post URLs
Pull the Creative DataPull Performance DataManual Labeling
Disadvantage: No machine learning produced from the manual
addition/creation of insights that go into decks.
This means we are burning all the learning instead
of investing it.
Disadvantage: After ALL this work, the output is static! Decks are
slow, hard to make, and not interactive. The web is a
better way to display deep data about rich media.
Tell better stories faster with a webpage
|Post ID
Computer vision goes through and
labels the creative various ways
(Color, type, objects, etc)
User selects creative for analysis
Human (ad manager) adds/edits other
brand relevant labels to creative
(Tone, brand message etc)
Also adds insights.
The goal is that after the user saves the
annotations that we have a beautiful
interface that can be shared with
customers and clients
Share!User Annotates LabelsMachine Generate Labels
NEW Creative Labeling ServiceJavaScript Bookmarklet Frontend/UI
Current Creative Analysis Process
Proposed Creative Analysis Process
For UI Elements
Recap
‣ What’s Sketch?
‣ Design tool for wireframes and user interfaces
‣ Why’s it great?
‣ Built with UI design in mind
‣ Export graphics and CSS with ease
‣ It’s Growing! New extensions released all the time
Activity
‣ Export…
‣ 1x and @2x PNG Images
‣ CSS Style for a text layer
‣ Extra credit: Export an image to SVG
‣ Measure and Spec Out an Element
‣ Find the dimensions and margin/padding in px
Thanks
design@socialcode.com 


More Related Content

PDF
Future of UX
PDF
Using Sketch in Your Workflow – From Idea to Finished Product
DOCX
what are the different modules in 3 ds max ? Dhyan Academy
PPTX
Adobe xd- The Empire strikes back
ZIP
Tools For Creating Wow Experiences In Flex
PDF
Designing with Sketch App
PDF
Breakup with Photoshop & Start Loving Sketch App
PPTX
Introduction to Fusion 360
Future of UX
Using Sketch in Your Workflow – From Idea to Finished Product
what are the different modules in 3 ds max ? Dhyan Academy
Adobe xd- The Empire strikes back
Tools For Creating Wow Experiences In Flex
Designing with Sketch App
Breakup with Photoshop & Start Loving Sketch App
Introduction to Fusion 360

What's hot (20)

PPTX
Adobe XD
PDF
Prototyping Axure
PPTX
3Ds Max Render Farm
PDF
Degrafa Top 5 Features
PPT
Degrafa Overview
PDF
DiegoGanga-CV-1page
PPTX
Essentials of Adobe Experience Design
PPT
Fireworks
PPT
Responsive Web Design Tools
PDF
Flash Camp - Degrafa & FXG
DOCX
Joseph bryan bastin resume
PDF
AndroInk vector graphics editor with Inkscape for Android
PPTX
What is 3 d modeling unit 66
PPT
Storyboarding and Wireframe Tools Review
PDF
Mapping Skills and Software Design
PDF
June Design-storm : Piktochart
PPTX
Lviv MD Day 2015 Ярослав Куп’як "Мобільний дизайн очима розробника"
PPTX
Adobe Edge Animate and Captivate 8
KEY
DOCX
Mesh construction
Adobe XD
Prototyping Axure
3Ds Max Render Farm
Degrafa Top 5 Features
Degrafa Overview
DiegoGanga-CV-1page
Essentials of Adobe Experience Design
Fireworks
Responsive Web Design Tools
Flash Camp - Degrafa & FXG
Joseph bryan bastin resume
AndroInk vector graphics editor with Inkscape for Android
What is 3 d modeling unit 66
Storyboarding and Wireframe Tools Review
Mapping Skills and Software Design
June Design-storm : Piktochart
Lviv MD Day 2015 Ярослав Куп’як "Мобільний дизайн очима розробника"
Adobe Edge Animate and Captivate 8
Mesh construction
Ad

Similar to Get started with Sketch: a fast (and awesome) communication and design tool (20)

PPT
Unify Design & Deliverables
PDF
The Art of Web Design, 101
PPTX
VS Code and Modern Development Environment Preview
PDF
Digital Signage Content Strategies for Savvy Integrators
PPT
Introduction to Web Page Design OT and Network
PDF
closed-circuit television, is a system of cameras and monitors that record an...
PDF
NYU Talk
KEY
Stocktwits & Responsive Web Design, social network meets flexible framework
PPTX
June2011_SketchFlow_v2
PDF
Wireframes and UI-Prototypes
 
PPTX
Good Graphic design and an Introduction to Inkscape
PDF
Launch Apps in Under 1 Hour: xBesh AI No-Code Builder Review (2025)
PDF
How Do Web Design and Web Development Differ_.pdf
PDF
Workflow diagramming and information architecture
PPTX
Sum of the Parts Speaker Series - Experience Engineering and UX
PDF
MVPWorkshop_CodeCamp 2023.pdf
PPTX
CognifyzInternsh bhhvvbhhbhhbbbbbbbip.pptx
PDF
Building a game engine with jQuery
PPTX
Modern ux-workflow-presentation
PDF
Mobile Design at Gilt
Unify Design & Deliverables
The Art of Web Design, 101
VS Code and Modern Development Environment Preview
Digital Signage Content Strategies for Savvy Integrators
Introduction to Web Page Design OT and Network
closed-circuit television, is a system of cameras and monitors that record an...
NYU Talk
Stocktwits & Responsive Web Design, social network meets flexible framework
June2011_SketchFlow_v2
Wireframes and UI-Prototypes
 
Good Graphic design and an Introduction to Inkscape
Launch Apps in Under 1 Hour: xBesh AI No-Code Builder Review (2025)
How Do Web Design and Web Development Differ_.pdf
Workflow diagramming and information architecture
Sum of the Parts Speaker Series - Experience Engineering and UX
MVPWorkshop_CodeCamp 2023.pdf
CognifyzInternsh bhhvvbhhbhhbbbbbbbip.pptx
Building a game engine with jQuery
Modern ux-workflow-presentation
Mobile Design at Gilt
Ad

Recently uploaded (20)

PDF
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
PPTX
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
PDF
System and Network Administration Chapter 2
PPTX
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
PPTX
CHAPTER 2 - PM Management and IT Context
PDF
Internet Downloader Manager (IDM) Crack 6.42 Build 41
PDF
System and Network Administraation Chapter 3
PPTX
Transform Your Business with a Software ERP System
PDF
Design an Analysis of Algorithms I-SECS-1021-03
PPTX
L1 - Introduction to python Backend.pptx
PDF
EN-Survey-Report-SAP-LeanIX-EA-Insights-2025.pdf
PPTX
Introduction to Artificial Intelligence
PDF
Understanding Forklifts - TECH EHS Solution
PDF
Softaken Excel to vCard Converter Software.pdf
PPTX
Essential Infomation Tech presentation.pptx
PDF
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
PPTX
history of c programming in notes for students .pptx
PDF
Adobe Illustrator 28.6 Crack My Vision of Vector Design
PPTX
Odoo POS Development Services by CandidRoot Solutions
PDF
Navsoft: AI-Powered Business Solutions & Custom Software Development
Why TechBuilder is the Future of Pickup and Delivery App Development (1).pdf
Oracle E-Business Suite: A Comprehensive Guide for Modern Enterprises
System and Network Administration Chapter 2
Agentic AI : A Practical Guide. Undersating, Implementing and Scaling Autono...
CHAPTER 2 - PM Management and IT Context
Internet Downloader Manager (IDM) Crack 6.42 Build 41
System and Network Administraation Chapter 3
Transform Your Business with a Software ERP System
Design an Analysis of Algorithms I-SECS-1021-03
L1 - Introduction to python Backend.pptx
EN-Survey-Report-SAP-LeanIX-EA-Insights-2025.pdf
Introduction to Artificial Intelligence
Understanding Forklifts - TECH EHS Solution
Softaken Excel to vCard Converter Software.pdf
Essential Infomation Tech presentation.pptx
SAP S4 Hana Brochure 3 (PTS SYSTEMS AND SOLUTIONS)
history of c programming in notes for students .pptx
Adobe Illustrator 28.6 Crack My Vision of Vector Design
Odoo POS Development Services by CandidRoot Solutions
Navsoft: AI-Powered Business Solutions & Custom Software Development

Get started with Sketch: a fast (and awesome) communication and design tool

  • 4. Agenda ‣ Getting Started, What is Sketch? ‣ Feature Review ‣ Layers, Colors, Strokes ‣ Navigating, Duplicating, Drawing ‣ Measuring, Slicing, Exporting ‣ Activity! ‣ Experiment with a SocialCode UI Kit and Export Creation
  • 5. Getting Started 1. Got a license? Download: bohemiancoding.com/sketch/ 2. Got fonts? 
 
 3. Got a Sketch UI Kit? { svn checkout https://github.com/google/fonts/trunk/apache/opensans mv -f ~/opensans/*.ttf ~/Library/Fonts/ rm -rf opensans }
  • 7. Sketch is design program 
 for user interfaces…
  • 20. Customize Toolbar Also: “R” for Rectangle “L” for Line “V” for Vector
  • 24. 1. Double-click to select Export CSS
  • 25. Export CSS 2. Rt-click 3. Copy CSS
  • 26. This is an example of a success toast confirming that something happened as expected. Spacing (⌥+ ) ‣ Find the distance between any two elements ‣ 1. Double-click and Select the layer ‣ 2. Hold option and hover over elements This is an example of a success toast confirming that something happened as expected. 15 15 1515
  • 27. Where is it useful? ‣ In the process of software dev at SocialCode ‣ Good for: fast drawing tool, diagrams, flow charts, 
 high-res mockups, assets ‣ Other tools: Whiteboards, Zeplin, InVision, CodePen ‣ Part II of this talk…? ‣ Handoffs and process tools in general (that make sense)
  • 29. For a User Flow For DR Accounts, Pull Spend/ Impressions/Website Clicks/ Conversions/Conversion Value. For video, pull down retention metrics. Client team goes through and manually labels creative “Ideally, these creatives would be labeled as part of our upload process, but in a lot of cases we're labeling them after the fact, which is a pretty massive undertaking.” —HJ Take the new data file with relevant creative labels and go through and analyze the data by each of those labels in terms of their key performance metrics BLAH. More stakeholders and hand holding. Analyze data by label Deck needs design/brand overview Create set of 10-15 categories that we label each creative (ex: product, primary colors, etc.). Next divide up the creatives for the team and to manually pull up each individual post, and enter in correct labels for each category Create a PNG that has no interactivity and no spice. Z-index (hover effects) and time (updates to data, watching video, any animation) gone! Set Categories for Each Creative Put it into a deck Use SQL query to pull post data from the Facebook interface by Page ID and Post ID. Story ID is used to build out Post URLs Pull the Creative DataPull Performance DataManual Labeling Disadvantage: No machine learning produced from the manual addition/creation of insights that go into decks. This means we are burning all the learning instead of investing it. Disadvantage: After ALL this work, the output is static! Decks are slow, hard to make, and not interactive. The web is a better way to display deep data about rich media. Tell better stories faster with a webpage |Post ID Computer vision goes through and labels the creative various ways (Color, type, objects, etc) User selects creative for analysis Human (ad manager) adds/edits other brand relevant labels to creative (Tone, brand message etc) Also adds insights. The goal is that after the user saves the annotations that we have a beautiful interface that can be shared with customers and clients Share!User Annotates LabelsMachine Generate Labels NEW Creative Labeling ServiceJavaScript Bookmarklet Frontend/UI Current Creative Analysis Process Proposed Creative Analysis Process
  • 31. Recap ‣ What’s Sketch? ‣ Design tool for wireframes and user interfaces ‣ Why’s it great? ‣ Built with UI design in mind ‣ Export graphics and CSS with ease ‣ It’s Growing! New extensions released all the time
  • 32. Activity ‣ Export… ‣ 1x and @2x PNG Images ‣ CSS Style for a text layer ‣ Extra credit: Export an image to SVG ‣ Measure and Spec Out an Element ‣ Find the dimensions and margin/padding in px