Prototyping im Web Workflow

A presentation at Webworker NRW Meetup in May 2018 in Düsseldorf, Germany by Matthias Ott

Slide 1

Slide 1

Prototyping 
 im Web Work ! ow → Matthias Ott 
 @ Webworker NRW

Slide 2

Slide 2

Matthias Ott

User Experience Designer 
 und UI Engineer


 @m_ott https://matthiasott.com Hi!

Slide 3

Slide 3

Prototyping.news

https://prototyping.news/

Slide 4

Slide 4

Prototyping

Slide 5

Slide 5

Slide 6

Slide 6

Slide 7

Slide 7

800 × 600 px

Slide 8

Slide 8

1024 × 768 px

Slide 9

Slide 9

Design Konzept Development

Slide 10

Slide 10

Slide 11

Slide 11

Bildschirmgröße 
 Pixeldichte 
 Farbraum 
 Sensoren 
 Input-Typen 
 Verbindungsgeschwindigkeit 
 Browser Screenreader 
 APIs 
 Augmented Reality 
 Virtual Reality Machine Learning 
 AI/KI 
 …

Slide 12

Slide 12

Slide 13

Slide 13

Das Web ist

nicht

homogen

Slide 14

Slide 14

Kontrolle 
 ist eine 
 Illusion

Slide 15

Slide 15

Slide 16

Slide 16

Mobile, 
 Tablet, 
 Desktop 
 O   RLY?

Slide 17

Slide 17

Slide 18

Slide 18

“What would happen if we stopped treating the Web like a blank canvas to paint on, and started treating it like a material to build   with?” — Frank Chimero , “ ! e Web’s Grain”

Slide 19

Slide 19

Das Web als 
 Material?

Slide 20

Slide 20

Slide 21

Slide 21

Charles und 
 Ray Eames

Slide 22

Slide 22

Slide 23

Slide 23

Slide 24

Slide 24

Slide 25

Slide 25

Prototyping mit dem Web als Material

Slide 26

Slide 26

3 Beispiele

Slide 27

Slide 27

Prototyping (Grid) Layouts

Slide 28

Slide 28

Example: CSS Grid

Slide 29

Slide 29

Example: CSS Grid @jensimmons 
 youtube.com/layoutland

Slide 30

Slide 30

Prototyping Web-Typographie

Slide 31

Slide 31

Slide 32

Slide 32

Slide 33

Slide 33

Prototyping Components

Slide 34

Slide 34

Slide 35

Slide 35

Example: Fractal

Slide 36

Slide 36

Slide 37

Slide 37

Layout 
 Typogra $ e 
 Komponenten Interaktionen Barrierefreiheit/A11y 
 Performance Animationen 
 Content ServiceWorker Browser APIs 
 …

Slide 38

Slide 38

Prototyping Ein Mindset

Slide 39

Slide 39

…hat keine spezi $ sche Form Prototyping

Slide 40

Slide 40

…ist experimentell und explorativ Prototyping

Slide 41

Slide 41

…ist kollaborativ Prototyping

Slide 42

Slide 42

Danke!

! @m_ott 
 matthiasott.com