Etsy Patterns

1. @aaronmoodie Hi! I’m Aaron Moodie, I design and build products for the web.
2. @aaronmoodie
3. @aaronmoodie New strategies in the process of design
4. @aaronmoodie 30 product designers
5. @aaronmoodie 30 product designers Working on 20 teams
6. @aaronmoodie 30 product designers Working on 20 teams 50 deploys a day
7. @aaronmoodie How do we move fast while keeping things consistent?
8. @aaronmoodie Designing patterns
9. @aaronmoodie
10. @aaronmoodie
11. @aaronmoodie It’s not just how it looks, it’s how it works Once you add variations, a buyer will be required to select an option before purchase. You’ll be able to view the options they’ve selected on your sold orders, receipts, and transaction emails. How do variations work? ␡ Cancel Done @aaronmoodie
12. @aaronmoodie It’s not just how it looks, it’s how it works Once you add variations, a buyer will be required to select an option before purchase. You’ll be able to view the options they’ve selected on your sold orders, receipts, and transaction emails. How do variations work? ␡ Cancel Done @aaronmoodie
13. @aaronmoodie Building patterns
14. @aaronmoodie Usability Accessibility Compatibility
15. @aaronmoodie Usability Making the overlay plug and play
16. @aaronmoodie Once you add variations, a buyer will be required to select an option before purchase. You’ll be able to view the options they’ve selected on your sold orders, receipts, and transaction emails. How do variations work? ␡ Cancel Done @aaronmoodie
17. @aaronmoodie <script> $("[data-overlay-region='myOverlay']").etsyOverlay(); </script> <div id="mask"> <div class="overlay-region" data-overlay-region="myOverlay"> <div class="overlay-view"> <div class="overlay-header"> <a data-close class="overlay-close"> <span title="link text to close overlay" class="ss-icon ss-delete"></span> </a> <span title="Heading" class="overlay-title">How do variations work?</span> </div> <div class="overlay-body"> <!-- overlay content --> </div> <div class="overlay-footer clearfix"> <button data-close class="btn btn-primary">Done</button> <button data-close class="btn btn-secondary">Cancel</button> </div> </div> </div> </div>
18. @aaronmoodie Accessibility Designing for compatibility with all technology
19. @aaronmoodie @aaronmoodie
20. @aaronmoodie <div id="mask"> <div class="overlay-region" data-overlay-region="myOverlay" aria-labelledby="overlay-title" aria-hidden="false" role="dialog"> <div class="overlay-view"> <div class="overlay-header"> <a data-overlay-close class="overlay-close"> <span title="link text to close overlay" class="ss-icon ss-delete"></span> </a> <span title="Heading" id="overlay-title" class=“overlay-title"> How do variations work? </span> </div> <div class="overlay-body"> <!-- overlay content --> </div> <div class="overlay-footer clearfix"> <button data-close class="btn btn-primary">Done</button> <button data-close class="btn btn-secondary">Cancel</button> </div> </div> </div> </div> Show to screen reader
21. @aaronmoodie <div id="mask"> <div class="overlay-region" data-overlay-region="myOverlay" aria-labelledby="overlay-title" aria-hidden="false" role="dialog"> <div class="overlay-view"> <div class="overlay-header"> <a data-overlay-close class="overlay-close"> <span title="link text to close overlay" class="ss-icon ss-delete"></span> </a> <span title="Heading" id="overlay-title" class=“overlay-title"> How do variations work? </span> </div> <div class="overlay-body"> <!-- overlay content --> </div> <div class="overlay-footer clearfix"> <button data-close class="btn btn-primary">Done</button> <button data-close class="btn btn-secondary">Cancel</button> </div> </div> </div> </div> no href
22. @aaronmoodie <div id="mask"> <div class="overlay-region" data-overlay-region="myOverlay" aria-labelledby="overlay-title" aria-hidden="false" role="dialog"> <div class="overlay-view"> <div class="overlay-header"> <button data-overlay-close class="btn btn-link overlay-close"> <span title="link text to close overlay" class="ss-icon ss-delete"></span> </button> <span title="Heading" id="overlay-title" class=“overlay-title"> How do variations work? </span> </div> <div class="overlay-body"> <!-- overlay content --> </div> <div class="overlay-footer clearfix"> <button data-close class="btn btn-primary">Done</button> <button data-close class="btn btn-secondary">Cancel</button> </div> </div> </div> </div> Much better!
23. @aaronmoodie Compatibility Working within a legacy codebase
24. @aaronmoodie <div id="mask"> <div class="overlay-region" data-overlay-region="myOverlay" aria-labelledby="overlay-title" aria-hidden="false" role="dialog"> <div class="overlay-view"> <div class="overlay-header"> <button data-overlay-close class="btn btn-link overlay-close"> <span title="link text to close overlay" class="ss-icon ss-delete"></span> </button> <span title="Heading" id="overlay-title" class=“overlay-title"> How do variations work? </span> </div> <div class="overlay-body"> <!-- overlay content --> </div> <div class="overlay-footer clearfix"> <button data-close class="btn btn-primary">Done</button> <button data-close class="btn btn-secondary">Cancel</button> </div> </div> </div> </div> All masks use #mask
25. @aaronmoodie Usability Accessibility Compatibility
26. @aaronmoodie It’s not just how it looks, it’s how it works
27. @aaronmoodie Thanks! aaronmoodie.com @aaronmoodie