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

1. PATTERN MAMAS AND
AGILE WATERSLIDES.
THOMAS PIRIBAUER
@TPIRIBAUER

2. HELLO.

3. HTTP://ULRIKECRODEL.DE/MALEREI/WP-CONTENT/UPLOADS/2012/01/WIEN-DACH.JPG

4. HTTPS://WWW.FLICKR.COM/PHOTOS/23209471@N03/9230713767/SIZES/O/

5. HTTPS://WWW.FLICKR.COM/PHOTOS/KOTOMI-JEWELRY/17565430042/SIZES/K/

6. HTTPS://WWW.YOUTUBE.COM/WATCH?V=RWTI09RFKMA&LIST=RDRWTI09RFKMA#T=872

7. HTTPS://WWW.YOUTUBE.COM/WATCH?V=3RPRJU5RVME

8. HTTPS://MEDIA.GIPHY.COM/MEDIA/KVO0EPTSRLLGE/GIPHY.GIF
RESPONSIVE
DESIGN

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. Whatshamacallit?
— JINA BOLTON
DESIGNING A DESIGN SYSTEM
HTTPS://SPEAKERDECK.COM/JINA/DESIGNING-A-DESIGN-SYSTEM
HTTPS://MEDIA.GIPHY.COM/MEDIA/UPEBLKAA25XY8/GIPHY.GIF

11. HTTPS://MEDIA.GIPHY.COM/MEDIA/YTHCLGHGW14TI/200W_D.GIF

12. HAVE YOU DESIGNED OR BUILT A STYLE GUIDE
OR PATTERN LIBRARY ALREADY?
IS IT STILL UP-TO-DATE TODAY?

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. WITHER
HTTPS://PRINCESSBLAYA.FILES.WORDPRESS.COM/2012/09/BALCONY-ENTROPY.JPG

15. OVERGROW
HTTPS://WWW.FLICKR.COM/PHOTOS/THECAY/750153434/SIZES/O/

16. PRODUCT MANAGERS
ARE CONSTANT GARDENERS
EDWARD SCISSORHANDS, 1990

17. HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/564X/DF/FE/E6/DFFEE6EC5D6843496CF4933B8225F127.JPG
SEEDING &
PLANTING

18. INVENTORY

20. HTTPS://MEDIUM.COM/EIGHTSHAPES-LLC/THE-COMPONENT-CUT-UP-WORKSHOP-1378AE110517#.1YZO7WJ7W

21. HTTPS://MEDIUM.COM/SWLH/BUILDING-THE-UI-FOR-THE-NEW-THE-TIMES-WEBSITE-26DC4E6569E#.QWZDMGCK9

22. 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

23. TAXONOMY

24. ATOMS MOLECULES ORGANISMS TEMPLATES PAGES
— BRAD FROST
ATOMIC DESIGN
HTTP://BRADFROST.COM/BLOG/POST/ATOMIC-WEB-DESIGN/

25. CARD
SORTING
DESIGN
STUDIO
??

26. CARD STUDIO

27. HTTP://WWW.FREEPIK.COM/FREE-VECTOR/NICE-AVATARS-BUSINESS-PEOPLE_945834.HTM
15 MIN

28. 20 MIN

29. 15 MIN
15 MIN

30. 40 MIN

33. HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/736X/D3/F1/E5/D3F1E5FFD3DCDFD6252B703B2D3199DF.JPG
WATERING

34. DOCUMENTATION
PRODUCTION PATTERNS

35. PATTERNS FIRST
PATTERNS PRODUCTION

36. AGILE WATERFALLS
Button
Button
.btn { } PRODUCTION
AXURE, BALSAMIQ
SKETCH, PHOTOSHOP
CODE

37. AGILE WATERSLIDES
PAPER,
OUTLINES
SKETCH
CODEPEN,
DESIGN IN THE BROWSER
Button
Button
.btn { }
PRODUCTION
CODE

38. HTTPS://S-MEDIA-CACHE-AK0.PINIMG.COM/736X/64/CE/FB/64CEFB29C545F938C4F509FBEB75CFFD.JPG
GROW

39. ABC abc 123
#1 DISTRIBUTED

40. #1 DISTRIBUTED
SPEED
ACCEPTANCE
+
REQUIREMENTS
QUALITY
CONSISTENCY
–

41. OVERGROW

42. ABC abc 123
#2 CENTRALISED

43. REQUIREMENTS
QUALITY
CONSISTENCY
#2 CENTRALISED
+
BOTTLENECK
ACCEPTANCE
–

44. WITHER
😳

45. RESPONSIBLE?
HTTP://WWW.WORLDOFHOSIERY.CO.UK/IMAGES/DETAILED/10/AN6_ADULTS_RATHER_BE_GARDENING_BUSH_HATS.JPG
WHO IS

46. TECH
ARCHITECT
VISUAL
DESIGNER
PATTERN MAMA

47. ABC abc 123
#3 FEDERATED

49. MANURING &
WEEDING
HTTP://IMAGES.TTCDN.CO/MEDIA/I/PRODUCT/176535-63C0990A61E54461BAC97224C32A3268.JPEG?SIZE=2000

50. TIGHT
COUPLING

51. LOOSE
COUPLING

52. THANKS.
THOMAS
@TPIRIBAUER

53. BACKUPS

54. CARD SORTING
‹
HTTPS://DIGITALFIRSTNOTTS.FILES.WORDPRESS.COM/2015/01/DSCF1468.JPG

55. 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

56. STRICT
FLEXIBLE