SlideShare a Scribd company logo

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

•
•
Christopher Azar
Christopher Azar

Brown bag talk given at SocialCode for product managers, engineers, designers, and even people operations.

Related slideshows

Adobe XD
Adobe XD Adobe XD
Adobe XD
 
Prototyping Axure
Prototyping AxurePrototyping Axure
Prototyping Axure
 
3Ds Max Render Farm
3Ds Max Render Farm3Ds Max Render Farm
3Ds Max Render Farm
 
1 of 33
Download to read offline
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

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