PATTERN MAMAS AND

AGILE WATERSLIDES.
THOMAS PIRIBAUER
@TPIRIBAUER
HELLO.
HTTP://ULRIKECRODEL.DE/MALEREI/WP-CONTENT/UPLOADS/2012/01/WIEN-DACH.JPG
HTTPS://WWW.FLICKR.COM/PHOTOS/23209471@N03/9230713767/SIZES/O/
HTTPS://WWW.FLICKR.COM/PHOTOS/KOTOMI-JEWELRY/17565430042/SIZES/K/
HTTPS://WWW.YOUTUBE.COM/WATCH?V=RWTI09RFKMA&LIST=RDRWTI09RFKMA#T=872
HTTPS://WWW.YOUTUBE.COM/WATCH?V=3RPRJU5RVME
HTTPS://MEDIA.GIPHY.COM/MEDIA/KVO0EPTSRLLGE/GIPHY.GIF
RESPONSIVE
DESIGN
DESIGN SYSTEM
BRAND BOOK
STYLE
G
UIDE
PATTERN LIBRARY
HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/ORIGINALS/68/42/8C/68428C77585B...
Whatshamacallit?
— JINA BOLTON
DESIGNING A DESIGN SYSTEM
HTTPS://SPEAKERDECK.COM/JINA/DESIGNING-A-DESIGN-SYSTEM
HTTPS://ME...
HTTPS://MEDIA.GIPHY.COM/MEDIA/YTHCLGHGW14TI/200W_D.GIF
HAVE YOU DESIGNED OR BUILT A STYLE GUIDE
OR PATTERN LIBRARY ALREADY?
IS IT STILL UP-TO-DATE TODAY?
HTTPS://TWITTER.COM/SMASHINGMAG/STATUS/750970258874306560
HAVE YOU DESIGNED OR BUILT A STYLE GUIDE
OR PATTERN LIBRARY ALRE...
WITHER
HTTPS://PRINCESSBLAYA.FILES.WORDPRESS.COM/2012/09/BALCONY-ENTROPY.JPG
OVERGROW
HTTPS://WWW.FLICKR.COM/PHOTOS/THECAY/750153434/SIZES/O/
PRODUCT MANAGERS
ARE CONSTANT GARDENERS
EDWARD SCISSORHANDS, 1990
HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/564X/DF/FE/E6/DFFEE6EC5D6843496CF4933B8225F127.JPG
SEEDING &
PLANTING
INVENTORY
HTTPS://MEDIUM.COM/EIGHTSHAPES-LLC/THE-COMPONENT-CUT-UP-WORKSHOP-1378AE110517#.1YZO7WJ7W
HTTPS://MEDIUM.COM/SWLH/BUILDING-THE-UI-FOR-THE-NEW-THE-TIMES-WEBSITE-26DC4E6569E#.QWZDMGCK9
The most important part of this process
is the one we talk the least about:
naming & organizing patterns.

Start with lang...
TAXONOMY
ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
— BRAD FROST
ATOMIC DESIGN
HTTP://BRADFROST.COM/BLOG/POST/ATOMIC-WEB-DESIGN/
CARD
SORTING
DESIGN
STUDIO
??
CARD STUDIO
HTTP://WWW.FREEPIK.COM/FREE-VECTOR/NICE-AVATARS-BUSINESS-PEOPLE_945834.HTM
15 MIN
20 MIN
15 MIN
15 MIN
40 MIN
HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/736X/D3/F1/E5/D3F1E5FFD3DCDFD6252B703B2D3199DF.JPG
WATERING
DOCUMENTATION
PRODUCTION PATTERNS
PATTERNS FIRST
PATTERNS PRODUCTION
AGILE WATERFALLS
Button
Button
.btn { } PRODUCTION
AXURE, BALSAMIQ
SKETCH, PHOTOSHOP
CODE
AGILE WATERSLIDES
PAPER, 

OUTLINES
SKETCH
CODEPEN,
DESIGN IN THE BROWSER
Button
Button
.btn { }
PRODUCTION
CODE
HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/736X/64/CE/FB/64CEFB29C545F938C4F509FBEB75CFFD.JPG
GROW
ABC abc 123
#1 DISTRIBUTED
#1 DISTRIBUTED
SPEED
ACCEPTANCE
+
REQUIREMENTS
QUALITY
CONSISTENCY
–
OVERGROW
ABC abc 123
#2 CENTRALISED
REQUIREMENTS
QUALITY
CONSISTENCY
#2 CENTRALISED
+
BOTTLENECK
ACCEPTANCE
–
WITHER
😳
RESPONSIBLE?
HTTP://WWW.WORLDOFHOSIERY.CO.UK/IMAGES/DETAILED/10/AN6_ADULTS_RATHER_BE_GARDENING_BUSH_HATS.JPG
WHO IS
TECH
ARCHITECT
VISUAL
DESIGNER
PATTERN MAMA
ABC abc 123
#3 FEDERATED
MANURING &
WEEDING
HTTP://IMAGES.TTCDN.CO/MEDIA/I/PRODUCT/176535-63C0990A61E54461BAC97224C32A3268.JPEG?SIZE=2000
TIGHT
COUPLING
LOOSE
COUPLING
THANKS.
THOMAS
@TPIRIBAUER
BACKUPS
CARD SORTING
‹
HTTPS://DIGITALFIRSTNOTTS.FILES.WORDPRESS.COM/2015/01/DSCF1468.JPG
DESIGN STUDIO
‹
charrette | ʃaˈrɛt | n. [French]
1. A two-wheeled cart
HTTP://WWW.GRANDEMASSE.ORG/MULTIMEDIA/PUBLIC_DOCUME...
STRICT
FLEXIBLE
Pattern Mamas and Agile Waterslides - Patterns as Product
Pattern Mamas and Agile Waterslides - Patterns as Product
Pattern Mamas and Agile Waterslides - Patterns as Product
Pattern Mamas and Agile Waterslides - Patterns as Product
Nächste SlideShare
Wird geladen in …5
×

Pattern Mamas and Agile Waterslides - Patterns as Product

361 Aufrufe

Veröffentlicht am

Talk from Thomas Piribauer at the UX Camp Europe Berlin, 3rd June 2017

Veröffentlicht in: Design
  • Als Erste(r) kommentieren

Pattern Mamas and Agile Waterslides - Patterns as Product

  1. 1. PATTERN MAMAS AND
 AGILE WATERSLIDES. THOMAS PIRIBAUER @TPIRIBAUER
  2. 2. HELLO.
  3. 3. HTTP://ULRIKECRODEL.DE/MALEREI/WP-CONTENT/UPLOADS/2012/01/WIEN-DACH.JPG
  4. 4. HTTPS://WWW.FLICKR.COM/PHOTOS/23209471@N03/9230713767/SIZES/O/
  5. 5. HTTPS://WWW.FLICKR.COM/PHOTOS/KOTOMI-JEWELRY/17565430042/SIZES/K/
  6. 6. HTTPS://WWW.YOUTUBE.COM/WATCH?V=RWTI09RFKMA&LIST=RDRWTI09RFKMA#T=872
  7. 7. HTTPS://WWW.YOUTUBE.COM/WATCH?V=3RPRJU5RVME
  8. 8. HTTPS://MEDIA.GIPHY.COM/MEDIA/KVO0EPTSRLLGE/GIPHY.GIF RESPONSIVE DESIGN
  9. 9. DESIGN SYSTEM BRAND BOOK STYLE G UIDE PATTERN LIBRARY HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/ORIGINALS/68/42/8C/68428C77585B1E48E961494A6C2D3FF5.JPG CI MANUAL PATTERN LANGUAGE TOOLKIT UI FRAMEWORK DESIGN LANGUAGE
  10. 10. Whatshamacallit? — JINA BOLTON DESIGNING A DESIGN SYSTEM HTTPS://SPEAKERDECK.COM/JINA/DESIGNING-A-DESIGN-SYSTEM HTTPS://MEDIA.GIPHY.COM/MEDIA/UPEBLKAA25XY8/GIPHY.GIF
  11. 11. HTTPS://MEDIA.GIPHY.COM/MEDIA/YTHCLGHGW14TI/200W_D.GIF
  12. 12. HAVE YOU DESIGNED OR BUILT A STYLE GUIDE OR PATTERN LIBRARY ALREADY? IS IT STILL UP-TO-DATE TODAY?
  13. 13. HTTPS://TWITTER.COM/SMASHINGMAG/STATUS/750970258874306560 HAVE YOU DESIGNED OR BUILT A STYLE GUIDE OR PATTERN LIBRARY ALREADY? IS IT STILL UP-TO-DATE TODAY? YEP!23% 24% 27% 26% ALMOST. NOT AT ALL! WE’VE GIVEN UP…
  14. 14. WITHER HTTPS://PRINCESSBLAYA.FILES.WORDPRESS.COM/2012/09/BALCONY-ENTROPY.JPG
  15. 15. OVERGROW HTTPS://WWW.FLICKR.COM/PHOTOS/THECAY/750153434/SIZES/O/
  16. 16. PRODUCT MANAGERS ARE CONSTANT GARDENERS EDWARD SCISSORHANDS, 1990
  17. 17. HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/564X/DF/FE/E6/DFFEE6EC5D6843496CF4933B8225F127.JPG SEEDING & PLANTING
  18. 18. INVENTORY
  19. 19. HTTPS://MEDIUM.COM/EIGHTSHAPES-LLC/THE-COMPONENT-CUT-UP-WORKSHOP-1378AE110517#.1YZO7WJ7W
  20. 20. HTTPS://MEDIUM.COM/SWLH/BUILDING-THE-UI-FOR-THE-NEW-THE-TIMES-WEBSITE-26DC4E6569E#.QWZDMGCK9
  21. 21. The most important part of this process is the one we talk the least about: naming & organizing patterns.
 Start with language, not interfaces. — LUKE WROBLEWSKI ON ETHAN MARCOTTE’S TALK AN EVENT APART APRIL 03, 2017 HTTP://WWW.LUKEW.COM/FF/ENTRY.ASP?1971
  22. 22. TAXONOMY
  23. 23. ATOMS MOLECULES ORGANISMS TEMPLATES PAGES — BRAD FROST ATOMIC DESIGN HTTP://BRADFROST.COM/BLOG/POST/ATOMIC-WEB-DESIGN/
  24. 24. CARD SORTING DESIGN STUDIO ??
  25. 25. CARD STUDIO
  26. 26. HTTP://WWW.FREEPIK.COM/FREE-VECTOR/NICE-AVATARS-BUSINESS-PEOPLE_945834.HTM 15 MIN
  27. 27. 20 MIN
  28. 28. 15 MIN 15 MIN
  29. 29. 40 MIN
  30. 30. HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/736X/D3/F1/E5/D3F1E5FFD3DCDFD6252B703B2D3199DF.JPG WATERING
  31. 31. DOCUMENTATION PRODUCTION PATTERNS
  32. 32. PATTERNS FIRST PATTERNS PRODUCTION
  33. 33. AGILE WATERFALLS Button Button .btn { } PRODUCTION AXURE, BALSAMIQ SKETCH, PHOTOSHOP CODE
  34. 34. AGILE WATERSLIDES PAPER, 
 OUTLINES SKETCH CODEPEN, DESIGN IN THE BROWSER Button Button .btn { } PRODUCTION CODE
  35. 35. HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/736X/64/CE/FB/64CEFB29C545F938C4F509FBEB75CFFD.JPG GROW
  36. 36. ABC abc 123 #1 DISTRIBUTED
  37. 37. #1 DISTRIBUTED SPEED ACCEPTANCE + REQUIREMENTS QUALITY CONSISTENCY –
  38. 38. OVERGROW
  39. 39. ABC abc 123 #2 CENTRALISED
  40. 40. REQUIREMENTS QUALITY CONSISTENCY #2 CENTRALISED + BOTTLENECK ACCEPTANCE –
  41. 41. WITHER 😳
  42. 42. RESPONSIBLE? HTTP://WWW.WORLDOFHOSIERY.CO.UK/IMAGES/DETAILED/10/AN6_ADULTS_RATHER_BE_GARDENING_BUSH_HATS.JPG WHO IS
  43. 43. TECH ARCHITECT VISUAL DESIGNER PATTERN MAMA
  44. 44. ABC abc 123 #3 FEDERATED
  45. 45. MANURING & WEEDING HTTP://IMAGES.TTCDN.CO/MEDIA/I/PRODUCT/176535-63C0990A61E54461BAC97224C32A3268.JPEG?SIZE=2000
  46. 46. TIGHT COUPLING
  47. 47. LOOSE COUPLING
  48. 48. THANKS. THOMAS @TPIRIBAUER
  49. 49. BACKUPS
  50. 50. CARD SORTING ‹ HTTPS://DIGITALFIRSTNOTTS.FILES.WORDPRESS.COM/2015/01/DSCF1468.JPG
  51. 51. DESIGN STUDIO ‹ charrette | ʃaˈrɛt | n. [French] 1. A two-wheeled cart HTTP://WWW.GRANDEMASSE.ORG/MULTIMEDIA/PUBLIC_DOCUMENTS/BLOG/ENSBA-ENSA_ENSEIGNEMENT-ET-LIEUX-ENSEIGNEMENT/CHARETTE_ATELIER-DE-PROVINCE.JPG
  52. 52. STRICT FLEXIBLE

×