Skip to content

Instantly share code, notes, and snippets.

@clarklab

clarklab/rwd-summit-notes.md

Created March 12, 2015 17:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save clarklab/a7a07509cd27acc7bda5 to your computer and use it in GitHub Desktop.
Save clarklab/a7a07509cd27acc7bda5 to your computer and use it in GitHub Desktop.
Download ZIP
RWD Summit Notes
Raw
rwd-summit-notes.md

Intro

  • 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

Second Title Slide

  • 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

My views!

  • 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!"

Coming from Photoshop

  • 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?

Pages/Artboards

  • 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

Exporting

  • 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
  • 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/Styles

  • 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)

Atomic Design

  • 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"

Icons

  • 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

Sketch Tool

  • 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

CSS

  • 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!

Some things I like

  • 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

Mirror

  • 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

Plugins

  • Sketch Toolbox
  • Dynamic Button
  • Export Text Styles
  • Content Generator
  • Sketch Measure

Links

These things rule:

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment