Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch...

104
Design/UI/UX- Grundlagen für Entwickler Roland Weigelt 29.06.2016 – .NET User Group Rhein/Ruhr

Transcript of Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch...

Page 1: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Design/UI/UX-

Grundlagen

für Entwickler

Roland Weigelt

29.06.2016 – .NET User Group Rhein/Ruhr

Page 2: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Roland Weigelt

ab 1983: 80er Computer Kid

1997-2011: Entwickler

Comma Soft in Bonn

GUIs für Business-Anwendungen

Page 3: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Roland Weigelt (UI/UX)

ab 2008: private Weiterbildung

im Bereich UI/UX

ab 2012: UX Specialist / Senior

Product Designer

bei Comma Soft

Page 4: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Roland Weigelt (Privat)

Seit 2003 Weblog zu .NET

weblogs.asp.net/rweigelt

Seit 2006 .NET User Group

„Bonn-to-Code.Net“

Seit 2009 dotnet Cologne

Community-Konferenz

Page 5: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Mehr in Teil 2...

Page 6: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Heute Abend

Design/UI/UX-Grundlagen für

Entwickler (ca. 60 min)

Pause

Spaß, Verwirrung, Furcht und

Basketball (ca. 45 min)

Page 7: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Design/UI/UX-

Grundlagen

für Entwickler

Page 8: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Design

Page 9: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Gutes Design?

Page 10: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Gutes Design?

Page 11: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

„Kommt darauf an...“

Page 12: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

„Hängt vom

Szenario ab...“

Page 13: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Geschäftsanwendungen

Klar, sauber, nicht zu wild

Vertrauenserweckend

Page 14: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Themen

Visuelle Wahrnehmung

Design-Prinzipien

UI-Design schnell und günstig

User Experience

Page 15: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelle Wahrnehmung

Page 16: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 17: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 18: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Peripher

Foveal

Page 19: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Foveale Wahrnehmung

Hohe räumliche Auflösung

Sehr geringer Winkelbereich

Periphere Wahrnehmung

Hohe zeitliche Auflösung

Unscharf, räumlich verzerrt

Page 20: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

„Da war ich wohl blind“

Page 21: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 22: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 23: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 24: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 25: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 26: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Augenbewegung

„Arbeitsspeicher“

Erinnerungen

Mustererkennung

Page 27: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 28: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 29: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 30: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Gestalttheorie

Page 31: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Gestaltgesetze

Gesetz der Prägnanz

Gesetz der Nähe

Gesetz der Ähnlichkeit

Gesetz der Kontinuität

Gesetz der Geschlossenheit

Gesetz der gemeinsamen Bewegung

Gesetz der fortgesetzt durchgehenden Linie

Gesetz der gemeinsamen Region

Gesetz der Gleichzeitigkeit

Gesetz der verbundenen ElementeQuelle: Wikipedia

Page 32: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Gestaltgesetze

Formulierte Beobachtungen

Liefern keine Erklärung

Kurz: „Visuelle Firmware“

Page 33: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

1 2 3

4 5 6

7 8 9

I 0 J

A

C

E

G

B

D

F

H

Page 34: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Design-Prinzipien

Page 35: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Design-Prinzipien

Page 36: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Nähe

Page 37: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Frankfurt

[email protected]

New York

[email protected]

Max

Mustermann

John

Doe

Page 38: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Max Mustermann

Frankfurt

[email protected]

John Doe

New York

[email protected]

Page 39: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Ausrichtung

Page 40: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Eine zentrierte

Ausrichtung

schafft Symmetrie.

Das ist aber nicht

in allen Situationen

erstrebenswert.

Page 41: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Eine linksbündige Ausrichtung

schafft starke Kanten.

Diese wirken auch über größere

Entfernung hinweg.

Page 42: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Eine rechtsbündige Ausrichtung

schafft starke Kanten.

Diese wirken auch über größere

Entfernung hinweg.

Page 43: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Nichtbeachten der unsichtbaren

Verbindungslinien wirkt leicht

unsauber.

Daher Vorsicht bei kleinen

Abständen

Page 44: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Nichtbeachten der unsichtbaren

Verbindungslinien wirkt leicht

unsauber.

Daher Vorsicht bei kleinen

Abständen

Page 45: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Nichtbeachten der unsichtbaren

Verbindungslinien wirkt leicht

unsauber.

Dann lieber größere Abstände,

damit es gewollt aussieht

Page 46: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Wichtigstes Hilfmittel für eine

einheitliche Ausrichtung:

Gitter (Grid)

Page 47: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 48: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 49: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 50: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 51: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 52: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Minimum: einheitliche Abstände

Page 53: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Minimum: einheitliche Abstände

Page 54: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Ausrichtung von Texten

AAAA

WWW

MMM

IIIIIIIII

Page 55: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Ausrichtung von Texten

Beispieltext

Page 56: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Ausrichtung von Texten

Page 57: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Ausrichtung von Texten

Page 58: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Vertikale Ausrichtung

CANCELOK

Page 59: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Vertikale Ausrichtung

Ok Cancel

Page 60: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Vertikale Ausrichtung

Ok Cancel

Page 61: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Vertikale Ausrichtung

XYZ-Test g,j,y-Test

Page 62: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

HelloWorld

Page 63: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

HelloWorld

Page 64: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelles Gewicht

Page 65: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 66: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 67: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 68: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 69: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelles Gewicht

Intensität

Farbe

Größe

Detailgrad

Page 70: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Dominanz

Page 71: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Dominanz ergibt sich, wenn einem

oder mehreren Elementen durchFarbe, , Form ,

Ausrichtung

oder Größebesonderes Gewicht gegeben wird

Page 72: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Page 73: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Page 74: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Dominanz

Markiert wichtige Einstiegs-

punkte für das Auge

Ist natürlich immer relativ

Kontrast wichtig!

Page 75: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Kontrast

Page 76: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Page 77: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Page 78: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Page 79: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Wichtig Wichtig Wichtig Wichtig

Page 80: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

„Wettrüsten“

vermeiden!

Whitespace

Page 81: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 82: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelle Hierarchie

Page 83: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelle Hierarchie

Priorisierung Abstufung

Visuelles Gewicht A vs. B vs. C

Page 84: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Beispiel

Dieser Text ist echt superwichtig

Dieser Text ist auch sehr wichtig

Und dieser Text ist nicht so wichtig

wie die anderen, aber das müssen

die Leser erst einmal herausfinden

Page 85: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelle Hierarchie

Dieser Text ist echt superwichtig

Dieser Text ist auch sehr wichtig

Und dieser Text ist nicht so wichtig

wie die anderen, aber das müssen

die Leser erst einmal herausfinden

Auffälligkeit/Dominanz durch Intensität...

Page 86: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelle Hierarchie

Dieser Text ist echt superwichtigDieser Text ist auch sehr wichtig

Und dieser Text ist nicht so wichtig

wie die anderen, aber das müssen

die Leser erst einmal herausfinden

...oder durch Unterschiede in der Größe...

Page 87: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelle Hierarchie

Dieser Text ist echt superwichtigDieser Text ist auch sehr wichtig

Und dieser Text ist nicht so wichtig

wie die anderen, aber das müssen

die Leser erst einmal herausfinden

...oder durch Kombination.

Page 88: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Whitespace

Dieser Text ist echt superwichtig

Dieser Text ist auch sehr wichtig

Und dieser Text ist nicht so wichtig

wie die anderen, aber das müssen

die Leser erst einmal herausfinden

Whitespace verstärkt die Wirkung

Page 89: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Nähe

Dieser Text ist echt superwichtigDieser Text ist auch sehr wichtig

Und dieser Text ist nicht so wichtig

wie die anderen, aber das müssen

die Leser erst einmal herausfinden

Nähe drückt Zugehörigkeit aus

Page 90: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Design-Beispiel:

Team-Aufstellung

Page 91: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

4 Bryce Taylor

5 Chris Ensminger

6 Johannes Strasser

7 Alex King

8 Moussa Diagne

9 John Bowler

10 Jared Jordan

11 Artur Kolodziejski

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Ronald Dupree

16 Fabian Thülig

17 Jonas Wohlf.-Bottermann

4 Sajmen Hauer

5 Chris Ensminger

6 Jeremy Hunt

7 Alex King

8 Folarin Campbell

9 Fabian Thülig

10 Nic Wise

11 Jacob Jaacks

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Jonas Wohlf.-Bottermann

25 Mark Tyndale

4 Simonas Serapinas

5 Chris Ensminger

6 Benas Veikalas

7 Zvonko Buljan

8 Andrej Mangold

9 Fabian Thülig

10 Jared Jordan

11 Daniel Hain

12 Florian Koch

13 Tony Gaffney

14 Talor Battle

15 Jonas Wohlf.-Bottermann

Team 2009/2010 Team 2010/2011 Team 2011/2012

Telekom Baskets Bonn

Page 92: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

4 Bryce Taylor

5 Chris Ensminger

6 Johannes Strasser

7 Alex King

8 Moussa Diagne

9 John Bowler

10 Jared Jordan

11 Artur Kolodziejski

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Ronald Dupree

16 Fabian Thülig

17 Jonas Wohlf.-Bottermann

4 Sajmen Hauer

5 Chris Ensminger

6 Jeremy Hunt

7 Alex King

8 Folarin Campbell

9 Fabian Thülig

10 Nic Wise

11 Jacob Jaacks

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Jonas Wohlf.-Bottermann

25 Mark Tyndale

4 Simonas Serapinas

5 Chris Ensminger

6 Benas Veikalas

7 Zvonko Buljan

8 Andrej Mangold

9 Fabian Thülig

10 Jared Jordan

11 Daniel Hain

12 Florian Koch

13 Tony Gaffney

14 Talor Battle

15 Jonas Wohlf.-Bottermann

Team 2008/2009 Team 2009/2010 Team 2011/2012

Telekom Baskets Bonn

Page 93: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Team 2009/2010

4 Bryce Taylor

5 Chris Ensminger

6 Johannes Strasser

7 Alex King

8 Moussa Diagne

9 John Bowler

10 Jared Jordan

11 Artur Kolodziejski

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Ronald Dupree

16 Fabian Thülig

17 Jonas Wohlf.-Bottermann

Team 2010/2011

4 Sajmen Hauer

5 Chris Ensminger

6 Jeremy Hunt

7 Alex King

8 Folarin Campbell

9 Fabian Thülig

10 Nic Wise

11 Jacob Jaacks

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Jonas Wohlf.-Bottermann

25 Mark Tyndale

Team 2011/2012

4 Simonas Serapinas

5 Chris Ensminger

6 Benas Veikalas

7 Zvonko Buljan

8 Andrej Mangold

9 Fabian Thülig

10 Jared Jordan

11 Daniel Hain

12 Florian Koch

13 Tony Gaffney

14 Talor Battle

15 Jonas Wohlf.-Bottermann

Telekom Baskets Bonn

Ausrichtung

Page 94: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Telekom Baskets Bonn

Ausrichtung

Team 2009/2010

4 Bryce Taylor

5 Chris Ensminger

6 Johannes Strasser

7 Alex King

8 Moussa Diagne

9 John Bowler

10 Jared Jordan

11 Artur Kolodziejski

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Ronald Dupree

16 Fabian Thülig

17 Jonas Wohlf.-Bottermann

Team 2010/2011

4 Sajmen Hauer

5 Chris Ensminger

6 Jeremy Hunt

7 Alex King

8 Folarin Campbell

9 Fabian Thülig

10 Nic Wise

11 Jacob Jaacks

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Jonas Wohlf.-Bottermann

25 Mark Tyndale

Team 2011/2012

4 Simonas Serapinas

5 Chris Ensminger

6 Benas Veikalas

7 Zvonko Buljan

8 Andrej Mangold

9 Fabian Thülig

10 Jared Jordan

11 Daniel Hain

12 Florian Koch

13 Tony Gaffney

14 Talor Battle

15 Jonas Wohlf.-Bottermann

Page 95: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Telekom Baskets Bonn

Dominanz

Team 2009/2010

4 Bryce Taylor

5 Chris Ensminger

6 Johannes Strasser

7 Alex King

8 Moussa Diagne

9 John Bowler

10 Jared Jordan

11 Artur Kolodziejski

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Ronald Dupree

16 Fabian Thülig

17 Jonas Wohlf.-Bottermann

Team 2010/2011

4 Sajmen Hauer

5 Chris Ensminger

6 Jeremy Hunt

7 Alex King

8 Folarin Campbell

9 Fabian Thülig

10 Nic Wise

11 Jacob Jaacks

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Jonas Wohlf.-Bottermann

25 Mark Tyndale

Team 2011/2012

4 Simonas Serapinas

5 Chris Ensminger

6 Benas Veikalas

7 Zvonko Buljan

8 Andrej Mangold

9 Fabian Thülig

10 Jared Jordan

11 Daniel Hain

12 Florian Koch

13 Tony Gaffney

14 Talor Battle

15 Jonas Wohlf.-Bottermann

Page 96: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Telekom Baskets Bonn

Hierarchie

Team 2009/2010

4 Bryce Taylor

5 Chris Ensminger

6 Johannes Strasser

7 Alex King

8 Moussa Diagne

9 John Bowler

10 Jared Jordan

11 Artur Kolodziejski

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Ronald Dupree

16 Fabian Thülig

17 Jonas Wohlf.-Bottermann

Team 2010/2011

4 Sajmen Hauer

5 Chris Ensminger

6 Jeremy Hunt

7 Alex King

8 Folarin Campbell

9 Fabian Thülig

10 Nic Wise

11 Jacob Jaacks

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Jonas Wohlf.-Bottermann

25 Mark Tyndale

Team 2011/2012

4 Simonas Serapinas

5 Chris Ensminger

6 Benas Veikalas

7 Zvonko Buljan

8 Andrej Mangold

9 Fabian Thülig

10 Jared Jordan

11 Daniel Hain

12 Florian Koch

13 Tony Gaffney

14 Talor Battle

15 Jonas Wohlf.-Bottermann

Page 97: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Telekom Baskets Bonn

Hierarchie

2009/2010

4 Bryce Taylor

5 Chris Ensminger

6 Johannes Strasser

7 Alex King

8 Moussa Diagne

9 John Bowler

10 Jared Jordan

11 Artur Kolodziejski

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Ronald Dupree

16 Fabian Thülig

17 Jonas Wohlf.-Bottermann

2010/2011

4 Sajmen Hauer

5 Chris Ensminger

6 Jeremy Hunt

7 Alex King

8 Folarin Campbell

9 Fabian Thülig

10 Nic Wise

11 Jacob Jaacks

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Jonas Wohlf.-Bottermann

25 Mark Tyndale

2011/2012

4 Simonas Serapinas

5 Chris Ensminger

6 Benas Veikalas

7 Zvonko Buljan

8 Andrej Mangold

9 Fabian Thülig

10 Jared Jordan

11 Daniel Hain

12 Florian Koch

13 Tony Gaffney

14 Talor Battle

15 Jonas Wohlf.-Bottermann

Page 98: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Telekom Baskets Bonn2009/2010

4 Bryce Taylor

5 Chris Ensminger

6 Johannes Strasser

7 Alex King

8 Moussa Diagne

9 John Bowler

10 Jared Jordan

11 Artur Kolodziejski

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Ronald Dupree

16 Fabian Thülig

17 Jonas Wohlf.-Bottermann

2010/2011

4 Sajmen Hauer

5 Chris Ensminger

6 Jeremy Hunt

7 Alex King

8 Folarin Campbell

9 Fabian Thülig

10 Nic Wise

11 Jacob Jaacks

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Jonas Wohlf.-Bottermann

25 Mark Tyndale

2011/2012

4 Simonas Serapinas

5 Chris Ensminger

6 Benas Veikalas

7 Zvonko Buljan

8 Andrej Mangold

9 Fabian Thülig

10 Jared Jordan

11 Daniel Hain

12 Florian Koch

13 Tony Gaffney

14 Talor Battle

15 Jonas Wohlf.-Bottermann

Page 99: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

4 Bryce Taylor

5 Chris Ensminger

6 Johannes Strasser

7 Alex King

8 Moussa Diagne

9 John Bowler

10 Jared Jordan

11 Artur Kolodziejski

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Ronald Dupree

16 Fabian Thülig

17 Jonas Wohlf.-Bottermann

4 Sajmen Hauer

5 Chris Ensminger

6 Jeremy Hunt

7 Alex King

8 Folarin Campbell

9 Fabian Thülig

10 Nic Wise

11 Jacob Jaacks

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Jonas Wohlf.-Bottermann

25 Mark Tyndale

4 Simonas Serapinas

5 Chris Ensminger

6 Benas Veikalas

7 Zvonko Buljan

8 Andrej Mangold

9 Fabian Thülig

10 Jared Jordan

11 Daniel Hain

12 Florian Koch

13 Tony Gaffney

14 Talor Battle

15 Jonas Wohlf.-Bottermann

Team 2009/2010 Team 2010/2011 Team 2011/2012

Telekom Baskets Bonn

Page 100: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Telekom Baskets Bonn2009/2010

4 Bryce Taylor

5 Chris Ensminger

6 Johannes Strasser

7 Alex King

8 Moussa Diagne

9 John Bowler

10 Jared Jordan

11 Artur Kolodziejski

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Ronald Dupree

16 Fabian Thülig

17 Jonas Wohlf.-Bottermann

2010/2011

4 Sajmen Hauer

5 Chris Ensminger

6 Jeremy Hunt

7 Alex King

8 Folarin Campbell

9 Fabian Thülig

10 Nic Wise

11 Jacob Jaacks

12 Vincent Yarbrough

13 Patrick Flomo

14 Tim Ohlbrecht

15 Jonas Wohlf.-Bottermann

25 Mark Tyndale

2011/2012

4 Simonas Serapinas

5 Chris Ensminger

6 Benas Veikalas

7 Zvonko Buljan

8 Andrej Mangold

9 Fabian Thülig

10 Jared Jordan

11 Daniel Hain

12 Florian Koch

13 Tony Gaffney

14 Talor Battle

15 Jonas Wohlf.-Bottermann

Page 101: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke
Page 102: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelles Design

Nähe, um Zusammen-

gehörigkeit auszudrücken

Ausrichtung, um Kanten zu

schaffen (ohne sie zu zeichnen)

Page 103: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelles Design

Dominanz, um wichtige

Einstiegspunkte zu markieren

Hierarchien für verständliche

Wichtigkeitsabstufung

Page 104: Roland Weigelt Design/UI/UX- Grundlagen für Entwickler · Design-Prinzipien ... Diese wirken auch über größere Entfernung hinweg. Eine rechtsbündige Ausrichtung schafft starke

Visuelles Design

Whitespace für Übersicht,

und Lesbarkeit

Visuelles Gewicht beachten

und in Balance halten