Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Exploring the Intersection
of Code & Design
@veronica_hanus @FlatironSchool
Code // Design
@veronica_hanus
What is version control?
@veronica_hanus
Trello
Google Docs
How does Git work?
Local & remote versions
Labeling each version
Avoid this
How does Git work?
@veronica_hanus
Local & remote versions
Labeling each version
Avoid this
A timeline of a Very Visual Veronica
My mantra: “Documentation Lowers Cognitive Load”
@veronica_hanus
Geology Web Workflow...
@veronica_hanus
Iteration is not design!
What does design process look like?
- Team “interview”
- Translate business
objec...
@veronica_hanus
- “Remove lighter
green font & add
underline to nav
bar”
- “Remove
lighter/brighter
font &...”
What commit...
@veronica_hanus
Steps to roll back to a commit:
- Select the commit
- Find the ID for the commit
- Enter command to “check...
What would you do?
@veronica_hanus
Better commit messages? Find tools giving cues? Other ways?
Your idea here
Screenshots in a local folder
First attempts
Color preview in-editor
Eg. Sublime’s Color Highlighter (view), Atom’s Pigmen...
Screenshots in saved in Git
Solving some problems
What pain points does my solution
have?
@veronica_hanus
How do I address...
Screenshots for testing… and tracking?
A few tools:
➔ Puppeteer-screenshot-tester
➔ Resemble.js
➔ Wraith
@veronica_hanus
O...
A “Git” for design!
@veronica_hanusOur examples: Abstract’s Compare Mode, Sketch’s Pages & Artboards, Sketch’s Zeplin
Ready to dive in
@veronica_hanus
Puppeteer or
Pyppeteer automate
screenshots
Git hooks “hook” one
action to others
Termina...
What can you bring?
@veronica_hanus
Geology Web Workflows for ML
Keep in touch!
@veronica_hanus @FlatironSchool
Resources
Thanks to…
Each of you for coming(!), the Flatiron
School for a w...
Upcoming SlideShare
Loading in …5
×

Exploring the Intersection of Code & Design

73 views

Published on

Explore how you can customize a system to integrate screenshots into your version control and support new contributors.
As a coder, can you remember the difference between two hex color values? Neither can we! Tracking screenshots of changes to visual projects in version control (Git) makes review of past changes easier, speeds acclimation to a new web project, and increases understanding of tools used for automated testing. Join us for a review of integrated screenshot methods currently in use (ie. Python’s Pyppeteer) and explore how you can customize a system to integrate screenshots into your version control, lower your cognitive load, and support new contributors.
Event link: https://www.eventbrite.com/e/workshop-the-intersection-of-code-design-flatiron-school-nyc-tickets-53840658860#

Published in: Design
  • Be the first to comment

  • Be the first to like this

Exploring the Intersection of Code & Design

  1. 1. Exploring the Intersection of Code & Design @veronica_hanus @FlatironSchool
  2. 2. Code // Design @veronica_hanus
  3. 3. What is version control? @veronica_hanus Trello Google Docs
  4. 4. How does Git work? Local & remote versions Labeling each version Avoid this
  5. 5. How does Git work? @veronica_hanus Local & remote versions Labeling each version Avoid this
  6. 6. A timeline of a Very Visual Veronica My mantra: “Documentation Lowers Cognitive Load” @veronica_hanus Geology Web Workflows for ML ?
  7. 7. @veronica_hanus Iteration is not design! What does design process look like? - Team “interview” - Translate business objectives to new state - ID what you don’t know - Review existing market product - Brainstorming - Listing user tasks - Roadmap - Focus group - Card sorting - Usability test - Concept testing - Guerrilla testing - Field studies - Eye movement tracking - Accessibility audit - A/B testing - (finally) Iteration Design has methods & tools!
  8. 8. @veronica_hanus - “Remove lighter green font & add underline to nav bar” - “Remove lighter/brighter font &...” What commits messages should we make? So many greens! Long and still hard to understand!
  9. 9. @veronica_hanus Steps to roll back to a commit: - Select the commit - Find the ID for the commit - Enter command to “checkout” the commit with that ID - Open the code & HTML file - Is it what we want? - Create new branch (section of timeline) before making changes Rolling back individual commits
  10. 10. What would you do? @veronica_hanus Better commit messages? Find tools giving cues? Other ways? Your idea here
  11. 11. Screenshots in a local folder First attempts Color preview in-editor Eg. Sublime’s Color Highlighter (view), Atom’s Pigments (view) & Color Picker (select/add) @veronica_hanus
  12. 12. Screenshots in saved in Git Solving some problems What pain points does my solution have? @veronica_hanus How do I address these?
  13. 13. Screenshots for testing… and tracking? A few tools: ➔ Puppeteer-screenshot-tester ➔ Resemble.js ➔ Wraith @veronica_hanus One example: “Automated visual diffing with Puppeteer” (2018), Monica Dinculescue’s blog https://bit.ly/2C3z25t Screenshot diffing
  14. 14. A “Git” for design! @veronica_hanusOur examples: Abstract’s Compare Mode, Sketch’s Pages & Artboards, Sketch’s Zeplin
  15. 15. Ready to dive in @veronica_hanus Puppeteer or Pyppeteer automate screenshots Git hooks “hook” one action to others Terminal prompt for you to save by hand Time to take screenshots Remembering to take screenshots Adding image link to your commit message Pain Investigate Your commit to Git Git hook calls Pyppeteer Pyppeteer takes screenshot Terminal prompts you to save
  16. 16. What can you bring? @veronica_hanus Geology Web Workflows for ML
  17. 17. Keep in touch! @veronica_hanus @FlatironSchool Resources Thanks to… Each of you for coming(!), the Flatiron School for a wonderful eventing, my crew Kasey Wang, Deborah Hanus, Diego Berrocal, & Anna Ossowski for help investigating this topic ➔ Puppeteer/Selenium/WebDriver for screenshots taken at every change ➔ Abstract/Zeplin/Sketch for scroll- through visuals to be used alongside your version control ➔ Hand-created screenshots checked into version control ➔ Editor plugins that help you visualize the colors on your site ➔ Your knowledge of your process & workflow for deciding what is right for you

×