Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

20
Visuelle Gestaltung Interaktiver Produkte M14

Transcript of Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Page 1: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Visuelle Gestaltung Interaktiver Produkte M14

Page 2: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

@dblO_Om

Creative Director @ Mysign

Als Creative Director bringe ich 17 Jahre Erfahrung als

Designer in verschiedensten CD Agenturen und meiner 7

jährigen Tätigkeit als Inhaber der Design- und Webagentur

frühjahr mit. Nach meiner Ausbildung als Grafiker an der

Kunstgewerbeschule in Bern entwickelte ich in meiner

Karriere Corporate Designs, Webdesigns und Interfaces für

verschiedenste Brands.

Ich bin Mitglied beim SGD (Swiss Graphic Designers). Eine

Schwäche von mir ist der Hang zur Perfektion. Ich mag

Jalapeños, Qualität von früher, Technologie von morgen und

Uhren. Viele Uhren.

DavidBlum

Page 3: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

L1GestaltFormStruktur

Page 4: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Raster UsabilityTypografie

Grids, Fluid– / Responsive Design,

CSS-Frameworks

Lesbarkeit, Schriftgrössen RWD, Strategien,

Schriften kaufen / einbinden

Farben, Kontraste, Lesbarkeit, Grössen,

Touch Abstönden, Hamburger Icons und co.

GestaltFormStruktur

Page 5: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Raster

Page 6: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

vs

Page 7: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte
Page 8: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Responsivevs Adaptive

Page 9: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Alles im Fluss

Page 10: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

RelativeWerte

Page 11: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Breakpoints

Page 12: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Max und Min

Page 13: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Mobile oderDesktop first?

Page 14: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Typografie

Page 15: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

vs

Page 16: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

vs

Page 17: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

A B

Schiftgrösse in allen Breakpoints gleich. Schiftgrösse je Breakpoint teilweise unterschiedlich.

Page 18: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

fonts.com150’000 Schriften

Page 19: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

Usability

Page 20: Interactive Dock – Visuelle Gestaltung Interaktiver Produkte

vs

Farbkontraste auf Papier Farbkontraste auf Display