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

Dipl.-Ing. (FH) Arn...
Was ist Design?

De|sign
Design, das
Substantiv, Neutrum

Formgerechte und funktionale Gestaltgebung und daraus sich ergeb...
Was ist Design?
• Design ist mehr als eine abstrakte Definition
• Design ist Mittel zum Zweck, nicht Zweck an sich
• Design...
Zehn Thesen für gutes Design
Dieter Rams, Chef-Designer bei Braun von 1961 - 1995

• Gutes Design ist innovativ
• Gutes De...
Wahrnehmung
• Wahrnehmung und Wirklichkeit unterscheiden sich
• Unsere Erfahrung prägt unsere Wahrnehmung
• Wahrnehmung er...
Wahrnehmung
• Sehen
• Ordnung, Struktur, Farben, Text, …
• Hören
• Fehlerton, akustische Aktion (E-Mail senden), Mausklick...
Chaos & Ordnung
• Chaos führt zu Reizüberflutung, Stress
• Das Gehirn sucht Ordnung im Chaos
• Ordnung beruhigt
• Ordnung h...
Musterbildung

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

FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.c...
Whitespace (Leerraum)
• Whitespace ist die Abwesenheit von Text und Grafik
• Passiv und aktiv
• Ordnung
• Gruppierung
• Str...
Struktur
• Anordnung
• Felder, Labels
• Position, Breite, Höhe
• Abstände
• Ausrichtung
• Feldinhalte
• Links-/Rechtsbündi...
Grid (Raster)
• Struktur, Ordnung
• Ausrichtung
• Gruppierung
• Wiederholung
• Vereinfacht die gezielte Verwendung von Whi...
Farben
• Farbwirkung und -symbolik
• Farblehre
• Der Farbkreis
• Komplementärfarben, Simultanwirkung
• Kontrast
• Farbharm...
Font
• Schriftfamilie, Attribute
• Schriftauswahl
• Readability (Lesbarkeit)
• Pairing (Zusammenstellung)
• Schriftgrößen
...
Schriftfamilie
The
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
FMK 2013 Besseres Design, Arnold Kegebein
Nächste SlideShare
Wird geladen in …5
×

FMK 2013 Besseres Design, Arnold Kegebein

1.363 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.363
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
32
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

FMK 2013 Besseres Design, Arnold Kegebein

  1. 1. Besseres Design Eine (subjektive) Einführung in Design Grundlagen von Dipl.-Ing. (FH) Arnold Kegebein Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  2. 2. Was ist Design? De|sign Design, das Substantiv, Neutrum Formgerechte und funktionale Gestaltgebung und daraus sich ergebende Form eines Gebrauchsgegenstandes o. Ä.; Entwurf[szeichnung] Duden www.duden.de/rechtschreibung/Design Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  3. 3. 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 Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  4. 4. Zehn Thesen für gutes Design Dieter Rams, Chef-Designer bei Braun von 1961 - 1995 • 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 Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  5. 5. Wahrnehmung • Wahrnehmung und Wirklichkeit unterscheiden sich • Unsere Erfahrung prägt unsere Wahrnehmung • Wahrnehmung erzeugt Assoziationen Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  6. 6. 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) Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  7. 7. 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 Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  8. 8. Musterbildung Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  9. 9. 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 Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  10. 10. Struktur • Anordnung • Felder, Labels • Position, Breite, Höhe • Abstände • Ausrichtung • Feldinhalte • Links-/Rechtsbündig • Grid / Raster Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  11. 11. 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 Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  12. 12. Farben • Farbwirkung und -symbolik • Farblehre • Der Farbkreis • Komplementärfarben, Simultanwirkung • Kontrast • Farbharmonie und -modulation • Winkelkontrast und Winkelharmonie • Farbreihen Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  13. 13. Font • Schriftfamilie, Attribute • Schriftauswahl • Readability (Lesbarkeit) • Pairing (Zusammenstellung) • Schriftgrößen • Farben • Durchschuss • Grid System • Ausgabemedium Dipl.-Ing. (FH) Arnold Kegebein Besseres Design FileMaker Konferenz 2013 Salzburg www.filemaker-konferenz.com
  14. 14. Schriftfamilie The

×