Designer && Entwickler

endlich verstehen wir uns

https://unsplash.com/photos/JS_ohjocm00

Es war einmal...

https://unsplash.com/photos/haPm0Iqx6KE

... ein Ponyhof.

https://de.wikipedia.org/wiki/Turmbau_zu_Babel_(Bruegel)

Die Realität.

Designer:in

Entwickler:in

Personas

Wireframes

UCD

Layers

Prototypes

HTML

DB

CSS

Angular

React

error codes

requests

API call

race condition

Needs

Sketch

Pixel

Design Thinking

http://lostmegabites.com/tag/matrix/

Designer:in

Entwickler:in

pdf

pdf

pdf

pdf

Agenda

  • Screen basiert

  • perfekt aussehen

  • Design Award verdächtig

Agenda

  • Daten orientiert

  • perfekt funktionieren

  • neuerste Technologien

Designer:in

Entwickler:in

pdf

pdf

pdf

pdf

Nutzende

Projektleitung

https://unsplash.com/photos/FcvIlm3I2Ts

Gemeinsam den Gipfel erklimmen

Vision

?

?

?

https://unsplash.com/photos/H2N9K9y9e3E

Nope.

https://unsplash.com/photos/z9F_yK4Nmf8

Gute Ausrüstung

https://unsplash.com/photos/_94HLr_QXo8

Richtige Richtung?

https://de.wikipedia.org/wiki/H%C3%B6henmesser

Messbare Zielerreichung?

Wegewahl

Blickrichtung

https://unsplash.com/photos/xgAcJZRk9_8, /Jb8ClLr_Kjo, /SEWvXEy0f3w

https://unsplash.com/photos/ioYwosPYC0U

Work in Progress - Review

Gemeinsamer Prozess

https://unsplash.com/photos/ioYwosPYC0Uhttps://www.newscientist.com/article/2099655-tolerance-of-smoke-may-have-given-us-an-edge-over-neanderthals/

Gesprächsgrundlage

Tiger

Art: Säugetier

Tier

Art: String

Alter: Integer

Alter: 4

https://www.indiatoday.in/india/story/west-bengal-injured-man-in-hospital-claims-tiger-attacked-him-1188042-2018-03-13

Styleguide

Schriftart: League Spartan
Schriftfarbe: #28A2FF
Schriftgröße: 30 Punkt

Schriftart: Lato
Schriftstil: hervorgehoben
Hintergrundfarbe: #FF793F

Überschrift

Button

CSS

font-family: 'League Spartan', sans-serif;
color: #28A2FF;
font-size: 4rem;
...
font-family: 'Lato', sans-serif;
background-color: #FF793F;
font-weight: 600;
...

Überschrift

Button

CSS + JS

Bereitstellung z.B. per CDN oder CMS

addEventListener(
    'click', openDialog);
addEventListener(
    'mouseenter', showTooltip);
addEventListener(
    'mouseleave', removeTooltip);

Überschrift

Button

Living Styleguide

Living Styleguide Generatoren

Designer:in

Entwickler:in

http://astrum.nodividestudio.com/pattern-library/

https://unsplash.com/photos/X62F1WQhuLI

Modularität

https://patternlab.io/

Atomic Component Library

Design System

"single source of truth"

Existierende Komponenten Bibliotheken

Designer:in

Entwickler:in

Nutzende

Projektleitung

Design System

Atoms

Molecules

Organisms

Templates

https://unsplash.com/photos/PO7CGnoDFUI

gemeinsames Fundament

Look

&

Feel

?

?

?

?

komplette Integration

nach Bedarf

React
Version

nur CSS

nur CSS

Design

System

https://unsplash.com/photos/FlPc9_VocJ4

Handover

Typische Sonderfälle beachten

Dynamische Bereiche: 

Aktionen:

  • Text zu lang oder zu kurz

  • zu viele Elemente

  • Fehlerfall
  • Erfolgsfall
  • Timeout

Als [Rolle] möchte ich wenn [Situation], dass [Wunsch], damit [Begründung].

[Details zum Inhalt & dem gewünschten Verhalten]

[Designs & Assets]

[Akzeptanz Kriterien]

[Kontakt für Fragen]

Design Requirements im Projekt

Ticket #307

erstellt von Elisabeth Engel

Tool Unterstützung

Zeplin

Avocodo

Sketch Measure

Designer:in

Entwickler:in

HTML

CSS

Paper Prototyping

Sprach

kurse

Design

Thinking

In die Welt des anderen begeben

Um eine gute Lösung ringen

https://commons.wikimedia.org/wiki/File:CSA_Steaua_Bucure%C8%99ti_-_Timi%C8%99oara_Saracens_Rugby_Scrum_2017.jpg

https://unsplash.com/photos/X62F1WQhuLI

... dann halten sie noch heute zusammen.

Du möchtest auch so arbeiten?

Feedback:

Was ist Eure aktuelle Herausforderung?

Credits

interfacewerk GmbH

Sebastian Ullherr

 

The DevUx Manifest

devux.now.sh

Designer && Entwickler - Endlich verstehen wir uns 2022

By Elisabeth Engel

Designer && Entwickler - Endlich verstehen wir uns 2022

Der Vortrag richtet sich an Designende und Entwickelnde, sowie Teamleitungen und Unternehmensverantwortliche, die sich eine engere Zusammenarbeit von Design und Entwicklung wünschen.

  • 1,163