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

Matthias Ott

User Experience Designer 
 und UI Engineer


 @m_ott https://matthiasott.com Hi!

Prototyping.news

https://prototyping.news/

Prototyping

800 × 600 px

1024 × 768 px

Design Konzept Development

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

Das Web ist

nicht

homogen

Kontrolle 
 ist eine 
 Illusion

Mobile, 
 Tablet, 
 Desktop 
 O   RLY?

“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”

Das Web als 
 Material?

Charles und 
 Ray Eames

Prototyping mit dem Web als Material

3 Beispiele

Prototyping (Grid) Layouts

Example: CSS Grid

Example: CSS Grid @jensimmons 
 youtube.com/layoutland

Prototyping Web-Typographie

Prototyping Components

Example: Fractal

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

Prototyping Ein Mindset

…hat keine spezi $ sche Form Prototyping

…ist experimentell und explorativ Prototyping

…ist kollaborativ Prototyping

Danke!

! @m_ott 
 matthiasott.com