Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.

Pattern Mamas and Agile Waterslides - Patterns as Product

626 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

×