Get started with Sketch: a fast (and awesome) communication and design tool
33
-
Upload
christopher-azar -
Category
Software
-
view
944 -
download
0
Transcript of 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 Started1. 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…
What’s Inside?
Pages. Artboards. Layers.
Layer
Artboard
Page
Pages. Artboards. Layers.
Sizes. Styles.
SizeBorder radius
FillBorderShadows
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 IDComputer 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
![Plumbing the Depths of Handlebars...Handlebars.partials[‘awesome-templ’] = ’{{#if isCorrect}} Awesome {{/if}}’; Handlebars.registerPartial(‘awesome-templ’, ‘{{#if isCorrect}}](https://static.fdocuments.us/doc/165x107/600fe2aee9391c6cc748fb43/plumbing-the-depths-of-handlebars-handlebarspartialsaawesome-templa-.jpg)
