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
Agenda
-
Screen basiert
-
perfekt aussehen
-
Design Award verdächtig
Agenda
-
Daten orientiert
-
perfekt funktionieren
-
neuerste Technologien
Designer:in
Entwickler:in
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?
