28
Besseres Design Eine (subjektive) Einführung in Design Grundlagen von Dipl.-Ing. (FH) Arnold Kegebein FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com Dipl.-Ing. (FH) Arnold Kegebein Besseres Design

FMK 2013 Besseres Design, Arnold Kegebein

Embed Size (px)

Citation preview

Page 1: FMK 2013 Besseres Design, Arnold Kegebein

Besseres Design

Eine (subjektive) Einführung in Design Grundlagenvon Dipl.-Ing. (FH) Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold Kegebein Besseres Design

Page 2: FMK 2013 Besseres Design, Arnold Kegebein

De|sign

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Was ist Design?

Design, dasSubstantiv, Neutrum

Dudenwww.duden.de/rechtschreibung/Design

Formgerechte und funktionale Gestalt-gebung und daraus sich ergebende Form eines Gebrauchsgegenstandes o. Ä.; Entwurf[szeichnung]

Page 3: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Was ist Design?• Design ist mehr als eine abstrakte Definition

• Design ist Mittel zum Zweck, nicht Zweck an sich

• Design ist die Verbindung zwischen Ratio und Emotio, zwischen Struktur und Inhalt, zwischen Daten und Bedeutung

• Design wird wahrgenommen

• Design ist ein wichtiger Teil des User Interfaces

Page 4: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Zehn Thesen für gutes Design

• Gutes Design ist innovativ

• Gutes Design macht ein Produkt brauchbar

• Gutes Design ist ästhetisch

• Gutes Design macht ein Produkt verständlich

• Gutes Design ist unaufdränglich

• Gutes Design ist ehrlich

• Gutes Design ist langlebig

• Gutes Design ist konsequent bis ins letzte Detail

• Gutes Design ist umweltfreundlich

• Gutes Design ist so wenig Design wie möglich

Dieter Rams, Chef-Designer bei Braun von 1961 - 1995

Page 5: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Wahrnehmung• Wahrnehmung und Wirklichkeit unterscheiden sich

• Unsere Erfahrung prägt unsere Wahrnehmung

• Wahrnehmung erzeugt Assoziationen

Page 6: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Wahrnehmung • Sehen

• Ordnung, Struktur, Farben, Text, …

• Hören

• Fehlerton, akustische Aktion (E-Mail senden), Mausklick

• Gleichgewicht

• Anordnung, Hell-Dunkel, optische Balance

• Fühlen (Tastsinn)

• Bewegen der Maus, Mausklicks, Tastatureingaben

• Touch Screen (Fingergesten)

Page 7: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Chaos & Ordnung• Chaos führt zu Reizüberflutung, Stress

• Das Gehirn sucht Ordnung im Chaos

• Ordnung beruhigt

• Ordnung hilft, sich zu orientieren

• Dabei kann zu viel Ordnung auch Stress erzeugen

• Unordnung kann gezielt genutzt werden

Page 8: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Musterbildung

Page 9: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Whitespace (Leerraum)• Whitespace ist die Abwesenheit von Text und Grafik

• Passiv und aktiv

• Ordnung

• Gruppierung

• Struktur

• Übersicht

• Der Inhalt fällt auf

• Das Auge wird geführt

• Whitespace erzeugt Emotionen

• klar, übersichtlich, aufgeräumt

• positiv, einfach, wertig

Page 10: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Struktur• Anordnung

• Felder, Labels

• Position, Breite, Höhe

• Abstände

• Ausrichtung

• Feldinhalte

• Links-/Rechtsbündig

• Grid / Raster

Page 11: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Grid (Raster)• Struktur, Ordnung

• Ausrichtung

• Gruppierung

• Wiederholung

• Vereinfacht die gezielte Verwendung von Whitespace

• DIE Grid-Lösung gibt es nicht

• Beispiel: Möglichkeiten in FileMaker

• Horizontales/vertikales Grid

Page 12: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Farben • Farbwirkung und -symbolik

• Farblehre

• Der Farbkreis

• Komplementärfarben, Simultanwirkung

• Kontrast

• Farbharmonie und -modulation

• Winkelkontrast und Winkelharmonie

• Farbreihen

Page 13: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Font • Schriftfamilie, Attribute

• Schriftauswahl

• Readability (Lesbarkeit)

• Pairing (Zusammenstellung)

• Schriftgrößen

• Farben

• Durchschuss

• Grid System

• Ausgabemedium

Page 14: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Schriftfamilie

The quick brown fox jumps over the lazy dogMaecenas suscipit interdum lectus at imperdiet. Etiam quis nunc enim. Nulla eu purus commodo dolor lacinia vulputate at sed urna. In orci libero, cursus a ornare sit amet, consectetur id est. Duis vulputate eu augue quis pretium. In feugiat auctor tempus. Aliquam libero diam, feugiat non suscipit in, porta in tellus. Ut iaculis convallis elit, a facilisis arcu vestibulum sit amet. Nunc egestas sit amet eros a tristique.

Duis faucibus metus vel metus laoreet, id porttitor justo mollis.

Donec iaculis est vitae vestibulum dictum. Nulla vitae suscipit leo. Aliquam viverra et erat et pretium.

Suspendisse quis nisi ipsum. Mauris vitae augue consectetur, pellentesque diam sit amet, iaculis nisl. Pellentesque dignissim mattis lorem, in semper neque molestie in.

The quick brown fox jumps over the lazy dog

Maecenas suscipit interdum lectus at imperdiet. Etiam quis nunc enim. Nulla eu purus commodo dolor lacinia vulputate at sed urna. In orci libero, cursus a ornare sit amet, consectetur id est. Duis vulputate eu augue quis pretium. In feugiat auctor tempus. Aliquam libero diam, feugiat non suscipit in, porta in tellus. Ut iaculis convallis elit, a facilisis arcu vestibulum sit amet. Nunc egestas sit amet eros a tristique.

Duis faucibus metus vel metus laoreet, id porttitor justo mollis.

Donec iaculis est vitae vestibulum dictum. Nulla vitae suscipit leo. Aliquam viverra et erat et pretium.

Suspendisse quis nisi ipsum. Mauris vitae augue consectetur, pellentesque diam sit amet, iaculis nisl. Pellentesque dignissim mattis lorem, in semper neque molestie in.

The����������� ������������������  quick����������� ������������������  brown����������� ������������������  fox����������� ������������������  jumps����������� ������������������  over����������� ������������������  the����������� ������������������  lazy����������� ������������������  dog

Maecenas����������� ������������������  suscipit����������� ������������������  interdum����������� ������������������  lectus����������� ������������������  at����������� ������������������  imperdiet.����������� ������������������  Etiam����������� ������������������  quis����������� ������������������  nunc����������� ������������������  enim.����������� ������������������  Nulla����������� ������������������  eu����������� ������������������  purus����������� ������������������  commodo����������� ������������������  dolor����������� ������������������  lacinia����������� ������������������  vulputate����������� ������������������  at����������� ������������������  sed����������� ������������������  urna.����������� ������������������  In����������� ������������������  orci����������� ������������������  libero,����������� ������������������  cursus����������� ������������������  a����������� ������������������  ornare����������� ������������������  sit����������� ������������������  amet,����������� ������������������  consectetur����������� ������������������  id����������� ������������������  est.����������� ������������������  Duis����������� ������������������  vulputate����������� ������������������  eu����������� ������������������  augue����������� ������������������  quis����������� ������������������  pretium.����������� ������������������  In����������� ������������������  feugiat����������� ������������������  auctor����������� ������������������  tempus.����������� ������������������  Aliquam����������� ������������������  libero����������� ������������������  diam,����������� ������������������  feugiat����������� ������������������  non����������� ������������������  suscipit����������� ������������������  in,����������� ������������������  porta����������� ������������������  in����������� ������������������  tellus.����������� ������������������  Ut����������� ������������������  iaculis����������� ������������������  convallis����������� ������������������  elit,����������� ������������������  a����������� ������������������  facilisis����������� ������������������  arcu����������� ������������������  vestibulum����������� ������������������  sit����������� ������������������  amet.����������� ������������������  Nunc����������� ������������������  egestas����������� ������������������  sit����������� ������������������  amet����������� ������������������  eros����������� ������������������  a����������� ������������������  tristique.

Duis����������� ������������������  faucibus����������� ������������������  metus����������� ������������������  vel����������� ������������������  metus����������� ������������������  laoreet,����������� ������������������  id����������� ������������������  porttitor����������� ������������������  justo����������� ������������������  mollis.

Donec����������� ������������������  iaculis����������� ������������������  est����������� ������������������  vitae����������� ������������������  vestibulum����������� ������������������  dictum.����������� ������������������  Nulla����������� ������������������  vitae����������� ������������������  suscipit����������� ������������������  leo.����������� ������������������  Aliquam����������� ������������������  viverra����������� ������������������  et����������� ������������������  erat����������� ������������������  et����������� ������������������  pretium.

Suspendisse����������� ������������������  quis����������� ������������������  nisi����������� ������������������  ipsum.����������� ������������������  Mauris����������� ������������������  vitae����������� ������������������  augue����������� ������������������  consectetur,����������� ������������������  pellentesque����������� ������������������  diam����������� ������������������  sit����������� ������������������  amet,����������� ������������������  iaculis����������� ������������������  nisl.����������� ������������������  Pellentesque����������� ������������������  dignissim����������� ������������������  mattis����������� ������������������  lorem,����������� ������������������  in����������� ������������������  semper����������� ������������������  neque����������� ������������������  molestie����������� ������������������  in.

The quick brown fox jumps over the lazy dog

Maecenas suscipit interdum lectus at imperdiet. Etiam quis nunc enim. Nulla eu purus commodo dolor lacinia vulputate at sed urna. In orci libero, cursus a ornare sit amet, consectetur id est. Duis vulputate eu augue quis pretium. In feugiat auctor tempus. Aliquam libero diam, feugiat non suscipit in, porta in tellus. Ut iaculis convallis elit, a facilisis arcu vestibulum sit amet. Nunc egestas sit amet eros a tristique.

Duis faucibus metus vel metus laoreet, id porttitor justo mollis.

Donec iaculis est vitae vestibulum dictum. Nulla vitae suscipit leo. Aliquam viverra et erat et pretium.

Suspendisse quis nisi ipsum. Mauris vitae augue consectetur, pellentesque diam sit amet, iaculis nisl. Pellentesque dignissim mattis lorem, in semper neque molestie in.

Page 15: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Simplicity• Das einfachste grafische Objekt ist der Kreis

• Ordnung, Einheit, Vollkommenheit

• Ruhe, Harmonie, Zentrum

• Das Quadrat

• Stabilität, Struktur

• Das Dreieck

• Dynamik, Richtungsweiser

• Orientierung erzeugt unterschiedliche Wirkung

Page 16: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

iPod User Interface

MENU

Page 17: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Design Inspiration

iPodApple Inc.

2001

T3 TaschenradioBraun AG

1958

Page 18: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Symbole• Wirksamkeit von Symbolen

• Erlernte oder assoziierte Bedeutung

• Kulturelle Unterschiede

• Wiederholung

• Eindeutigkeit

Page 19: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Einfach ist nicht einfach• Etwas zu vereinfachen, kann viel Aufwand oder komplexe bzw.

komplizierte Prozesse erfordern➟ Beispiel: MagicValueList

• Einfach kann manchmal wieder kompliziert sein➟ Beispiel: Die Ein-Tasten-Maus

• Einfach ist kontextabhängig➟ Beispiel: Menüs (Anwender/Developer Mode)

Page 20: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Das Ziel• Wo liegt die goldene Mitte zwischen Einfachheit und Komplexität?

⇆•Play•Stop•Pause•Rückwärts•Schnelllauf vorwärts•Schnelllauf rückwärts•Vorspulen•Zurückspulen•Auswerfen•…

Wie komplexmuss es sein?

Wie einfach kannman es gestalten?

Page 21: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Simplicity - 10 Rules• SIMPLICITY – Die zehn Gesetze der Einfachheit

John Maeda, Spektrum Akademischer Verlag

1. Reduzieren2. Organisieren3. Zeit4. Lernen5. Unterschiede

6. Kontext7. Gefühle8. Vertrauen9. Fehlschläge10. Das e i n e Gesetz

Page 22: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Reduzieren• Weglassen

• Was muss nicht unbedingt vorhanden sein?

• VVV = Verkleinern, Verstecken, Verbinden➟ Beispiel: Fernbedienung➟ Beispiel: FileMaker

Page 23: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Organisieren• SKIP

• Sortieren

• Kategorisieren

• Integrieren

• Priorisieren

• OGER

• Ordnen

• Gruppieren

• Einbinden

• Relevanz/Rang

Page 24: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Organisieren

Winter

Gestern

Julia

Schule

Grau

Innen-raum

Garten-zwerg

Schaden

Lupe

Chile

Wurzel

EpilogPolitik-verdruss

Page 25: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Organisieren

Winter JuliaSchaden

Chile

Politik-verdruss

Innen-raum

Grau

Gestern

Garten-zwerg

Schule

Lupe Wurzel

Epilog

Immer Blau Geschichte Sandsturm

Page 26: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Hilfsmittel• Papier und Bleistift

• Post-Its

• MindMaps

• Wikis

• Mockups

• Internet

• Web Design

Page 27: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Weiterführendes Material• Gutes Design – 10 Thesen von Dieter Rams

• www.vitsoe.com/de/ueber-vitsoe/gutes-design• www.creativebloq.com/netmag/dieter-rams-10-principles-good-web-design-1133872

• Tutorials• 50 Totally Free Lessons in Graphic Design Theory

psd.tutsplus.com/articles/web/50-totally-free-lessons-in-graphic-design-theory

• Bücher• Simplicity, John Maeda, Spektrum Akademischer Verlag, ISBN 978-3-8274-1869-2

• Sonstiges• Mein zweiter Vortrag auf der FMK 2013 mit vielen Tools und Quellenangaben

Page 28: FMK 2013 Besseres Design, Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Vielen Dank unseren Sponsoren

Danke für das Bewerten dieses Vortrages