- find me on twitter, codepen
- heckle me on Twitter, use the hashtag
- a little bit about myself
- worked on the web for over a decade now
- just left a gig at TheZebra.com
- a team of about 2 dozen
- was there about 2 years
- lone designer, lots of engineers
- made me think about our process
- UX designer (that does everything)
- previously self-employed
- androidandme.com
- do all my own front-end dev
- lots of "designer" talk in here
- the lines are blurring, I do both a lot, having a feeling some of you do too
- if you don't do any design, you'll at least come away with some suggestions for your designer
- Everything I'm about to say is from my viewpoint
- Like any good tool, lots of ways to use Sketch
- Sound off! Ask questions, nitpick, tell me how you do it
- Lots of love for Sketch, I'll try not to sound like an advertisement
- Lots of 3rd party tools seem to love Sketch too, so I'll include those as we go
- Plugins make stating a fact almost impossible
- "you said Sketch doesn't export animated gifs but I found a plugin!"
-
First visual design tool I've used that feels like it's made for a front-end
-
you'll find lots of common concepts
-
code in it's blood
-
First things first, Sketch is vector
- More like Illustrator or Fireworks instead of Photoshop, which is raster
-
Vectors are math, resolution independent, not based on pixels
-
If you've heard someone talk about SVGs or canvas, that's vector
-
Sketch is not for editing photos.
- you might still need Photoshop for that (or a lackey designer)
-
Sketch is building a "tool chain" (their words, not mine) that goes well beyond a single app or experience
-
Automation - today's theme
-
Automation in design applications? Sounds scary
-
Can't recall the last time a Photoshop announcement/development excited me
- individual rounded corners?
- old days, builds had a handful of static views
- nowadays, every screen I build has multiple views, animations, modals, etc
- Sketch is great at managing a large, complex build
- Pages/artboards in ONE sketch file replaces your old folder of 14 PSDs
- Pages (I use for different screens/views)
- Home
- About
- Contact
- Artboards (I use for different versions of the same screen/view)
- Mobile/tablet
- Menu open
- Artboards and pages can be exported individually
- my favorite feature, makes assets easy to manage
- like Photoshop Generator but not lame
- You know what? That's not fair.
- After using Sketch, everything feels "like Photoshop but not lame
- before I explain, let's see how some others do it
- Slicy not based on naming conventions
- actual UI, settings for creating assets
- see all assets in a file
- not obscured by layers/groups or naming conventions
- like Photoshop Generator but not lame
- Export settings are meta that travel with file
- a designer (who might be incredibly anal) can pass asset-ready file
- a developer (who might be incredibly sloppy) can continually pull assets
- Can be automated
- Sketch Tool
- Grunticon (talk about these more later)
-
symbols are reusable elements (ala Fireworks)
-
something that needs to be repeated, sorta like CSS styles
- update one symbol, all others sync
- create a library of symbols
- Sketch has some built-in via templates, like simple web elements
-
things I use symbols for
- headers
- menus
- widgets
- streams
- any interface/element that shows up in your document again and again
- purple folder
-
"change the background color of the header?"
-
"can you try it with stars instead of dots?"
-
great for complex views, when a tray opens over another view, it can be a symbol
- update that original view, new tray open view looks perfect
-
styles (text, layer) are reusable styles (duh)
- match things like font face, color, font size, shadow, etc
- update one, all change
- CSS based, talking about it soon
-
both are great in large, complex documents
-
things I use styles for
- body/title copy
- so nice! to add text and know the sizing
- buttons
- color, shadow, outline stay same
- text, icons, length can change
- passing exact specs to developer (or myself)
- body/title copy
-
a system from Brad Frost and other sharp folks
-
a way of thinking small and combining into something more complex (hey, that sounds like it would be perfect for mobile-first, no?)
-
Assemble your blocks and build like LEGO
- post with hero
- post with regular image
- post with no image
- post with gallery
- blurb post, aside
- sidebars, comments, ads, community stuff
-
Index view just uses assets from other parts of my .sketch file
- makes mocking up view after view quite simple
- "Can you show me a hero post with photo and sidebar activated with an alert turned on?"
- "OK"
- Most use sets off the shelf
- combine to save space
- make custom icons (whaaat)
- artboards/slices per icon
- resize all at once
- setup export for others (over dropbox, or source control / shared space)
- Sketch Tool
- Grunticon
- free
- cross platform command line tool
- list, export, dump
- with parameters
- "export all the artboards as PNGs with save for web enabled"
- "list all the pages, so I know what I'm getting myself into"
- can be added into your other automation
- "export all artboards as SVGs, then run grunticon on the result"
- result: developer can get latest, custom icon set from a design file without opening a design app or bothering the designer
- source control
- font dependency
-
any element can be right clicked for CSS attributes
-
NOT WYSIWYG, not all inclusive
- better/quicker than clicking element, seeing attributes with your eye
- better than filling your document with notes, swatches, etc
- hell of a lot better than eyeballing
-
text- get font face, size, color, line-height, spacing, etc
-
elements- get fill, borders, shadows, etc
-
symbol - all the CSS for all the elements
-
it even outputs rules with vendor prefixes!
- although hopefully you don't need them
-
you can select multiple and output
- even notes the element names
-
With plugins, you can go crazy
-
Visual style guide showing all common styles
-
Real CSS, with class names!
- Math
- Percentages
- Masks
- good when resizing items, with backgrounds or patterns or whatever
- background blur, which is useful for mobile
- Sizing, ala Inspector, shows changing pixel values
- Sketch Mirror is an iOS app that shows on your mobile device what's on your desktop screen
- See layouts on the device you're building for
- live
- make a change, see it reflected immediately
- Supports pages, artboards
- Multiple devices at once (over wifi)
- want to test standard res and retina at the same time?
- want to see if the text size in your document "feels right" in your hand?
- there are others ways to mirror a screen, but Mirror gives you control from the target device, something most can't do
- Sketch Toolbox
- Dynamic Button
- Export Text Styles
- Content Generator
- Sketch Measure
These things rule: