Designers || Developers

Finally Bridging the Gap

Elisabeth Engel

@_lizzelo_

https://unsplash.com/photos/JS_ohjocm00

Once Upon a Time ...

https://unsplash.com/photos/haPm0Iqx6KE

... a Pony Farm.

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

The Reality

Designer

Developer

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

Developer

pdf

pdf

pdf

pdf

Agenda

  • Screen based

  • Perfect look

  • Design award worthy

Agenda

  • Data-orientated

  • Perfect functionality

  • Use latest technology

Designer

Developer

pdf

pdf

pdf

pdf

User

Project Lead

https://unsplash.com/photos/FcvIlm3I2Ts

Rise to Great Heights–Together

Vision

?

?

?

https://unsplash.com/photos/H2N9K9y9e3E

Nope.

https://unsplash.com/photos/z9F_yK4Nmf8

The Right Equipment

https://unsplash.com/photos/_94HLr_QXo8

Right Direction?

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

Measurable Goals?

Choosing The Path

Different View Ports

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

https://unsplash.com/photos/ioYwosPYC0U

Work in Progress - Review

A Collective Process

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

Basis For Discussion

Tiger

Type: Mammal

Animal

Type: String

Age: Integer

Age: 4

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

Styleguide

Font: League Spartan
Font color: #28A2FF
Font size: 30

Font: Lato
Font style: highlighted
Background color: #FF793F

Title

Button

CSS

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

Title

Button

CSS + JS

Bereitstellung z.B. per CDN oder CMS

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

Title

Button

https://github.com/interfacewerk/iwerk-angular-ui

Living Styleguide

https://github.com/davidhund/styleguide-generators

Living Styleguide Generators

Designer

Developer

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

http://styleguides.io/​

https://github.com/alexpate/awesome-design-systems

https://unsplash.com/photos/X62F1WQhuLI

Modularity

https://patternlab.io/

http://demo.patternlab.io/

Atomic Component Library

Design Systems

"single source of truth"

Designer

Developer

User

Project Lead

Design System

Atoms

Molecules

Organisms

Templates

https://unsplash.com/photos/PO7CGnoDFUI

A Common Foundation

Look

&

Feel

?

?

?

?

complete integration

as required

React
Version

solely CSS

solely CSS

Design

System

https://amzn.github.io/style-dictionary/

https://unsplash.com/photos/FlPc9_VocJ4

Handover

Consider Typical Exceptions

Dynamic Areas: 

Actions:

  • Text too long or too short

  • Too many elements

  • Error case
  • Success case
  • Timeout

As [role] in [situation] I want that  [desire ] so that [reason].

[Details to the content & the desired behavior]

[Designs & assets]

[Acceptance criteria]

[Contact for questions]

Design Requirements in The Project

Ticket #307

created by Elisabeth Engel

https://zeplin.io/​

Tool Support

Zeplin

Avocodo

Sketch Measure

Designer

Developer

HTML

CSS

Paper Prototyping

Language

 Course

Design

Thinking

https://unsplash.com/photos/X62F1WQhuLI

 and they worked together happily ever after. 

Thanks to The Team

Slides:

@_lizzelo_

engel@interfacewerk.de

What is your current challenge?

Credits

interfacewerk GmbH

Sebastian Ullherr

 

The DevUx Manifest

devux.now.sh