Die Kommunikation zwischen Designern und Entwicklern ist nicht immer einfach. Sie produktiv und effizient zusammenarbeiten zu lassen, ist noch schwieriger. In unserem Talk zeigen wir, warum es in unserem Team funktioniert und wie uns auf diese Weise die besten Produkte gelingen. Tim Schneider https://twitter.com/tmschndr https://speakerdeck.com/tmschndr Liane Thönnes https://twitter.com/liane_thoennes https://ruby.froscon.org/talks/true-false-cats-dogs-designer-entwickler/

1. True & False. Cats & Dogs. Designer & Entwickler?

2. @tmschndr
Entwickler
@liane_thoennes
Designerin

3. True & False. Cats & Dogs. Designer & Entwickler?

4. ?

5. Designer sind keine Entwickler sind keine Designer

6. DESIGNER ENTWICKLER
8 Buchstaben 10 Buchstaben
Schnittmenge = 4 verschiedene Buchstaben
22,2 % Gemeinsamkeiten
77,8 % Unterschiede
q.e.d.
DESIGNER ENTWICKLER
E N
i R

8. Ja! Wir sind verschieden!

9. Liane Tim

10. Liane Tim
Erstes Praktikum
in einem
Designbüro 1994
Werkstudent in
den Sommerferien
1999 in der
Halbleiter-Industrie

11. Liane Tim
Gestaltung von
Infografiken für
Freunde der
Geschwister
Homepages für
Vereine, Friseure,
Kurierdienste

12. Liane Tim
Fotoassistentin,
Ausbildung zur
Mediengestalterin,
Diplom in
Kommunikations-
design
Informatik im Abitur,
dann Studium der
Medieninformatik

13. Liane Tim
Seit 2003 als
Freelance- oder feste
Designerin tätig
erst freier Web-
Entwickler, dann
Mit-Gründer eines
Entwicklerteams

14. Liane Tim
ABC
ABC

15. Was treibt dich an?

16. Liane Tim

17. Ich bin keine Entwicklerin, weil …

18. Ich bin kein Designer, weil …

19. Ja! Wir sind verschieden!

20. Und so verschieden arbeiten
Designer und Entwickler zusammen …

21. Idee / Konzept
MockUps / Prototyping
technisches Design
Entwicklungsplanung
Screendesign
Entwicklung
Feedback-Zyklen
Produktmanagement
Allgemeine Aufgaben u.a.

22. Idee, Produktmanagement
Sprintplanung
Technisches Konzept für
die Feature Entwicklung
</>
</>
Entwicklung</>
2., 3., n. Iteration</>
MockUps, Prototyping
Finales Screendesign,
Vorlagen für Entwickler
Review / Feedback,
QA, Abnahme

23. Vorurteile

24. Liane kennt solche Entwickler …
Tim kennt solche Designer …

25. Tim kennt solche Designer …
die in Blockabsätzen Wortabstände bemängeln!

26. Liane kennt a Entwickler …
die offensichtlich der „No-UI Bewegung“ frönen! ;)

27. Wir alle kennen diese Beispiele!

29. ( unterschiedliche Denkweisen können
allerdings auch von Vorteil sein )

30. Lost in Translation

31. Ego
Desinteresse bis Arroganz
wenig Kompromissbereitschaft
ME
MYSELF
I
I

32. Gelernte Feindschaft

33. Hug it out!

34. Form follows function. Functionality affects form.

35. Grundlagen von Ästhetik

37. Schön ist, was einfach und effektiv ist.

40. Code? Beautiful? Sure!

42. Design Pattern
Design
Typographie /
Schrift
!
Einfachheit
!
Klarheit
Entwicklung
Principle of least
surprise
!
Don‘t repeat yourself
!
No code is
better than no code

43. Ähnliche Arbeitsweisen

44. einfach und effektiv

45. vom Modell zum Detail
(iterativ)

46. Tiefes Problemverständnis erforderlich

47. Oft gesucht:
Designerentwickler / Entwicklerdesigner (m/w)

48. "The difference between a designer and
developer, when it comes to design skills,
is the difference between shooting a bullet
and throwing it." Scott Hanselmann

49. So funktioniert‘s bei uns

50. Gemischtes, gleichberechtigtes Team

51. Idee
Konzept
MockUps
Prototyping
Sprint Planning
Screendesign
Iterative Implementierung
Produktmanagement
Unser Prozess

52. Idee
Konzept
MockUps
Prototyping
Sprint Planning
Screendesign
Iterative Implementierung
Produktmanagement
Unser ProzessLiane
✓
✓
✓
✓
✓
✓
✓

53. Idee
Konzept
MockUps
Prototyping
Sprint Planning
Screendesign
Iterative Implementierung
Produktmanagement
Unser ProzessLiane Tim
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓
✓

54. Gemeinsame Tools
Entwicklung
Git & GitHub
(statt CSS per Mail)
Photoshop CSS
(Stephan kotzt zwar)
Frameworks
(Foundation, Bootstrap)

55. Gemeinsame Tools
Entwicklung
Git & GitHub
(statt CSS per Mail)
Photoshop CSS
(Stephan kotzt zwar)
Frameworks
(Foundation, Bootstrap)
Konzept, Design
Typecast
(typecast.com)
MockUp /
Wireframing /
Prototyping Tools
(z.B. Balsamiq)
redpen.io
Whiteboard

57. Gemeinsame Tools
Entwicklung
Git & GitHub
(statt CSS per Mail)
Photoshop CSS
(Stephan kotzt zwar)
Frameworks
(Foundation, Bootstrap)
Konzept, Design
Typecast
MockUp /
Wireframing /
Prototyping Tools
(z.B. Balsamiq)
redpen.io
Whiteboard
Organisation
Tracker
(oder Github Issues)
!
gemeinsame
Sprint-Planung
!
gemeinsamer
Chat, kein
Dev-Chat

60. Geschmacksmuster statt PSD

62. Gemeinsame (Weiter-) Entwicklung
eines Styleguides

63. Living Styleguides bieten Designern die Möglichkeit,
Design zu optimieren

64. Gemischtes Team
Gemeinsame Konzeptarbeit und Planung
„Schnittstellenoptimierung“ durch gute Tools
lebendige Designs, die weiterentwickelt
werden können
+
+
+

65. Good habits

66. Lieber Entwickler,
Erkläre einfach
Setz dich mit Design auseinander
Sei ehrlich was umgesetzt werden kann & was nicht
Setze auch mal Design-Details um
!
= Designer:

67. Lieber Designer,
Erkläre einfach
Setz dich mit der Entwicklung auseinander
Gestalte gründlich, bedenke Ausnahmen
Sei auch mal pragmatisch
!
= Entwickler:

68. Entwickler & Designer:
Be nice
Behaltet Euer gemeinsames Ziel im Auge
Lasst euch vielfältig inspirieren und seid offen
Lernt voneinander
!
= Und alle:

69. True & False. Cats & Dogs. Designer & Entwickler.

70. Leidenschaft

71. Routine

72. Kämpft!

73. Love & Hate.
Vielen Dank!