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

Post on 05-Jul-2015

282 views 0 download

description

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/

Transcript of True & False. Cats & Dogs. Designer & Entwickler?

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

@tmschndr Entwickler

@liane_thoennes Designerin

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

?

Designer sind keine Entwickler sind keine Designer

DESIGNER ENTWICKLER

8 Buchstaben 10 Buchstaben

Schnittmenge = 4 verschiedene Buchstaben

22,2 % Gemeinsamkeiten 77,8 % Unterschiede

q.e.d.

DESIGNER ENTWICKLERE Ni R

Ja! Wir sind verschieden!

Liane Tim

Liane Tim

Erstes Praktikum in einem

Designbüro 1994

Werkstudent in den Sommerferien

1999 in der Halbleiter-Industrie

Liane Tim

Gestaltung von Infografiken für

Freunde der Geschwister

Homepages für Vereine, Friseure,

Kurierdienste

Liane Tim

Fotoassistentin, Ausbildung zur

Mediengestalterin, Diplom in

Kommunikations- design

Informatik im Abitur, dann Studium der Medieninformatik

Liane Tim

Seit 2003 als Freelance- oder feste

Designerin tätig

erst freier Web-Entwickler, dann

Mit-Gründer eines Entwicklerteams

Liane Tim

ABCABC

Was treibt dich an?

Liane Tim

Ich bin keine Entwicklerin, weil …

Ich bin kein Designer, weil …

Ja! Wir sind verschieden!

Und so verschieden arbeiten Designer und Entwickler zusammen …

Idee / Konzept

MockUps / Prototyping

technisches Design

Entwicklungsplanung

Screendesign

Entwicklung

Feedback-Zyklen

Produktmanagement

Allgemeine Aufgaben u.a.

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

Vorurteile

Liane kennt solche Entwickler … Tim kennt solche Designer …

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

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

Wir alle kennen diese Beispiele!

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

Lost in Translation

Ego

Desinteresse bis Arroganz

wenig Kompromissbereitschaft

ME

MYSELF

II

Gelernte Feindschaft

Hug it out!

Form follows function. Functionality affects form.

Grundlagen von Ästhetik

Schön ist, was einfach und effektiv ist.

Code? Beautiful? Sure!

Design Pattern

Design

Typographie / Schrift !Einfachheit !Klarheit

Entwicklung

Principle of least surprise !Don‘t repeat yourself !No code is better than no code

Ähnliche Arbeitsweisen

einfach und effektiv

vom Modell zum Detail (iterativ)

Tiefes Problemverständnis erforderlich

Oft gesucht: Designerentwickler / Entwicklerdesigner (m/w)

"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

So funktioniert‘s bei uns

Gemischtes, gleichberechtigtes Team

Idee

Konzept

MockUps

Prototyping

Sprint Planning

Screendesign

Iterative Implementierung

Produktmanagement

Unser Prozess

Idee

Konzept

MockUps

Prototyping

Sprint Planning

Screendesign

Iterative Implementierung

Produktmanagement

Unser Prozess Liane

Idee

Konzept

MockUps

Prototyping

Sprint Planning

Screendesign

Iterative Implementierung

Produktmanagement

Unser Prozess Liane Tim

Gemeinsame Tools

Entwicklung

Git & GitHub (statt CSS per Mail)

Photoshop CSS (Stephan kotzt zwar)

Frameworks (Foundation, Bootstrap)

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

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 !gemeinsamerChat, keinDev-Chat

Geschmacksmuster statt PSD

Gemeinsame (Weiter-) Entwicklung eines Styleguides

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

Gemischtes Team

Gemeinsame Konzeptarbeit und Planung

„Schnittstellenoptimierung“ durch gute Tools

lebendige Designs, die weiterentwickelt werden können

+++

Good habits

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:

Lieber Designer,

Erkläre einfach

Setz dich mit der Entwicklung auseinander

Gestalte gründlich, bedenke Ausnahmen

Sei auch mal pragmatisch

!

= Entwickler:

Entwickler & Designer:

Be nice

Behaltet Euer gemeinsames Ziel im Auge

Lasst euch vielfältig inspirieren und seid offen

Lernt voneinander

!

= Und alle:

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

Leidenschaft

Routine

Kämpft!

Love & Hate.

Vielen Dank!