Sketch: Designing with Data

Following the 'Designing with Data' conversation, presented at the Digital Designer's Toolbox meetup at CommonCode 2015-06-22

Transcript

1. Designing with Data
2. The problem
3. https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482 https://medium.com/@joshpuckett “When we don’t work with real data, we deceive ourselves.”
4. • designs broken by real data • out of date data in mockups • tedious process of updating mockups Pain points
5. https://medium.com/@iansilber/design-tools-at-instagram-4f5867afa4f4 https://medium.com/@markjenkins “Any repetitive work that can be eliminated means more time spent on the creative aspect of design.” “Speed isn’t the only factor that’s important for these tools. The fact that we’re using real data means our designs immediately feel authentic.”
6. https://medium.com/design-at-depop/designing-with-data-7f6bcd907f0a https://medium.com/@markjenkins "Using data, we can see where the problems arise, where the exceptions and edge cases lie and whether our design really works in the way it was intended."
7. • 'content first' approach: 
 ensure that nothing is missed: put the data in first • avoid content / design mismatch: 
 too many, too few, too long, too short • single step data update • distribute responsibility: 
 share a versioned json file for someone else to edit • unlikely bonus points: translation! Desired Benefits
8. The Promised Land nB: the following three slides are animated gifs, which are
 unsupported in this format: follow the links to view online
9. https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482
10. https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482
11. https://medium.com/bridge-collection/modern-design-tools-using-real-data-62d499e97482
12. The Present:
 … is a WIP
13. Data Plugins There are myriad! The most definitive list is at: 
 https://github.com/sketchplugins/plugin-directory
 
 JSON: 
 https://github.com/preciousforever/sketch-data-populator
 https://github.com/timuric/Content-generator-sketch-plugin
 https://github.com/zakkain/sketch-copyeditor
 https://github.com/tylergaw/sketch-generate-posts
 
 Images:
 https://github.com/nickstamas/Sketch-Quick-Pic
 https://github.com/abynim/SketchSquares
 https://github.com/tylergaw/day-player Other:
 https://github.com/thetylerwolf/sketch-data-studio

14. Sketch Data Populator Referenced in the article https://github.com/preciousforever/sketch-data-populator
16. Content Generator Great! https://github.com/timuric/Content-generator-sketch-plugin
17. Sketch Copy Editor Works for flat data,not a set of data. Useful tip: save, close, reopen to sidestep Sketch quirks https://github.com/zakkain/sketch-copyeditor
18. Sketch Data Parser Clunky… not 100% sure it actually works https://github.com/florianpnn/sketch-data-parser
19. Sketch-Quick-Pic Fill an image layer with an image from Flickr with tags
 (fails silently if it doesn’t find images…
 flickr doesn’t have ‘cats,lasers’??) https://github.com/nickstamas/Sketch-Quick-Pic

20. Day Player …crashing sketch… https://github.com/tylergaw/day-player
21. JSON JSON: Javascript Object Notation
22. Generating JSON • Advanced field generation • download / direct API access http://www.json-generator.com/ https://www.mockaroo.com/
24. Managing Plugins
25. Sketch Toolbox http://sketchtoolbox.com/
26. UI Proposal for Sketch Toolbox
27. My wishlist, more like http://astralapp.com/
28. Installing from Source Problem: I want to deactivate a plugin, but not uninstall it completely, such that I forget it’s name, etc. Solution: git clone plugins and create a Finder alias to them inside the Sketch Plugins folder. The alias is disposable, delete it to deactivate, recreate it to reactivate.
29. git clone Terminal.app… not as scary as it sounds! cd ~/my-sketch-plugins # download the source git clone https://github.com/nickstamas/Sketch-Quick-Pic.git # one day: update the plugin cd Sketch-Quick-Pic git pull Git GUIs: https://mac.github.com/, https://www.sourcetreeapp.com/
30. Finder alias: Drag with Cmd+Option ~/my-sketch-plugins/ ~/Library/Application Support/com.bohemiancoding.sketch3/Plugins
31. Tim Osborn @memelab