Talk from Thomas Piribauer and Björn Ganslandt at the Mind The Product Engage Conference in Hamburg, 28 April 2017

1. PATTERNS ALS
PRODUKT.
THOMAS PIRIBAUER
BJÖRN GANSLANDT
@INTUIO

2. HTTP://WWW.SLIDESHARE.NET/JASONMESUT/TRUTH-AND-DARE-04
JASON MESUT, EUROIA 2012

3. HALLO.

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

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

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

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

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

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

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

11. Whatshamacallit?
— JINA BOLTON
DESIGNING A DESIGN SYSTEM
HTTPS://SPEAKERDECK.COM/JINA/DESIGNING-A-DESIGN-SYSTEM
HTTPS://MEDIA.GIPHY.COM/MEDIA/UPEBLKAA25XY8/GIPHY.GIF

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

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

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

16. PRODUKTMANAGER
SIND EWIGE GÄRTNER
EDWARD SCISSORHANDS, 1990

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

18. INVENTAR

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

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

25. CARD STUDIO

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

27. 20 MIN

28. 15 MIN
15 MIN

29. 40 MIN

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

33. DOKUMENTATION
PRODUKTION PATTERNS

34. PATTERNS FIRST
PATTERNS PRODUKTION

35. AGILE WASSERFÄLLE
Button
Button
.btn { } PRODUKTION
AXURE, BALSAMIQ
SKETCH, PHOTOSHOP
CODE

36. AGILE WASSERRUTSCHEN
PAPIER,
SKIZZEN
SKETCH
CODEPEN,
DESIGN
IM BROWSER
Button
Button
.btn { }
PRODUKTION
CODE

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

38. ABC abc 123
#1 VERTEILT

39. #1 VERTEILT
GESCHWINDIGKEIT
AKZEPTANZ
+
ANFORDERUNGEN
QUALITÄT
KONSISTENZ
–

40. WUCHERN

41. ABC abc 123
#2 ZENTRAL

42. ANFORDERUNGEN
QUALITÄT
KONSISTENZ
#2 ZENTRAL
+
FLASCHENHALS
AKZEPTANZ
–

43. VERDORREN
😳

44. HTTP://WWW.WORLDOFHOSIERY.CO.UK/IMAGES/DETAILED/10/AN6_ADULTS_RATHER_BE_GARDENING_BUSH_HATS.JPG
WER HAT DEN AUF?

45. TECH
ARCHITECT
VISUAL
DESIGNER
PATTERN MAMA

46. #3 FÖDERALISTISCH
ABC abc 123

48. DÜNGEN &
JÄTEN
HTTP://IMAGES.TTCDN.CO/MEDIA/I/PRODUCT/176535-63C0990A61E54461BAC97224C32A3268.JPEG?SIZE=2000

49. ENGE
KOPPELUNG

50. LOSE
KOPPELUNG

51. THOMAS BJÖRN
@ANSIMORPH@TPIRIBAUER
SAGEN
DANKE.