Designer && Entwickler

endlich verstehen wir uns

Elisabeth Engel

@_lizzelo_

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

Entwickler

Personas

Wireframes

UCD

Layers

Prototypes

HTML

DB

CSS

Angular

ACID

error codes

requests

API call

race condition

Needs

Sketch

Pixel

Design Thinking

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

Designer

Entwickler

pdf

pdf

pdf

pdf

Agenda

  • Screen basiert

  • perfekt aussehen

  • Design Award verdächtig

Agenda

  • Daten orientiert

  • perfekt funktionieren

  • verwendet neuste Technologien

Designer

Entwickler

pdf

pdf

pdf

pdf

Nutzer

Projektleiter

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

Entwickler

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

https://unsplash.com/photos/X62F1WQhuLI

Modularität

https://patternlab.io/

Design Systems

Designer

Entwickler

Nutzer

Projektleiter

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]

[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

Entwickler

HTML

CSS

Paper Prototyping

Sprach

kurse

Design

Thinking

https://upload.wikimedia.org/wikipedia/commons/2/28/Red_Bugs_%28Pyrrhocoridae%29_nymphs_%2817965743402%29.jpg

Bugs

http://gbphotodidactical.com/images/Butterfly-My-BUGS-Collection-Box-1.jpg

bestimmen, sortieren & priorisieren

Möglichkeit der Priorisierung

Beeinträchtigung

Häufigkeit

hoher Lösungsbedarf

niedriger

Lösungsbedarf

1

2

3

4

5

?

?

https://unsplash.com/photos/X62F1WQhuLI

... dann halten sie noch heute zusammen.

Dank ans Team

Slides & Gimmick:

Credits

interfacewerk GmbH

Sebastian Ullherr

 

The DevUx Manifest

devux.now.sh

Designer && Entwickler - Endlich verstehen wir uns

By Elisabeth Engel

Designer && Entwickler - Endlich verstehen wir uns

Der Vortrag richtet sich an Designer und Entwickler, sowie Teamleiter und Unternehmensverantwortliche, die sich eine engere Zusammenarbeit von Design und Entwicklung wünschen.

  • 200
Loading comments...

More from Elisabeth Engel