Designing with Code

Jonas Hellwig
kulturbanause.de
@_kulturbanause

Jonas Hellwig

Designer, Developer, Writer @_kulturbanause

Seminare, Workshops, Beratung

Was euch erwartet

Einordnung der Thematik

Anforderungen an moderne Design-Tools

Herangehensweisen an den Design-Workflow

Einblick in verschiedene Tools

Wer gestaltet Websites?

Typografie & Visual Design

Responsive Layout

Interaktionen

Data

Performance

Sollen Designer coden?

Sollen Developer gestalten?

Ein kulturelles Problem

Die Industrie trennt die Gewerke

Agile Design/Dev-Workflows sind oft nur Fassade

The best products are built by teams with great communication bridges between designers and engineers.

Designer malen Bilder

Sie gestalten nicht das finale Produkt.

Viele verstehen das Produkt nicht mehr.

Sie beantworten zu wenig Fragen.

How should a button behave when hovered, pressed, focused, or disabled?

How should this UI behave when there is no data to populate it?

How will this UI cope when populated with unusually long data strings?

In which order should elements receive focus when tabbing through?

How will this colour or font render across browser versions, and operating systems?

How will the tiny change I’m making to this button component impact other areas of the product?

How should this layout adapt to the web’s infinite array of possible viewport dimensions, aspect ratios, and pixel densities?

Developer gestalten

Sie entscheiden.

Sie beantworten die Fragen.

Weniger Interpretation

Durch Kommunikation

Durch Tools

Durch Know-how

Design Systeme

Verbessern die Kommunikation

Material Design

Polaris

Häufig getrennt zwischen Design und Dev

Ziel: "Single source of truth"

Workflow #1

Gestaltung ohne Code

Tools versuchen die Lücke zu schließen

Einschränkungen der Systeme werden verdrängt

Code ist nachgelagert

Hand-Off

Marvel

Invision

Zeplin

Avocode

Abstract

XD

Figma

Export

Supernova

Anima Toolkit

Sketch2React

Data

Sketch

Data Populator + JSON

We still design our websites in digital design tools that are so far apart from what the actual end product is made of — code.

Workflow #2

Code ist das Herzstück des Produkts

Designer verstehen und gestalten das Endprodukt

Entscheidungen im Kontext des Ziel-Mediums

Einschränkungen werden verstanden

WYSIWYG

Frontpage

Dreamweaver

Webflow

react-sketchapp

Entwickelt von Airbnb

Code als "Single source of truth"

Visual Coding

Framer

UX Pin

Interplay

Modulz

I’m almost 100% certain you will be able to do this natively in all of the major design apps within a year or two.

Developer Tools + SVG

Farben

Clip Path

Typo

Flexbox und Grid

Local Overwrites und Sources

SVG als Code/Grafik-Format

Zusammenfassung

Vielen Dank!

kulturbanause.de

blog.kulturbanause.de

@_kulturbanause