fmk 2013 besseres design, arnold kegebein
TRANSCRIPT
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
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]
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
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
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
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)
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
FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com
Dipl.-Ing. (FH) Arnold KegebeinBesseres Design
Musterbildung
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
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
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
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
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
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.
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
FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com
Dipl.-Ing. (FH) Arnold KegebeinBesseres Design
iPod User Interface
MENU
FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com
Dipl.-Ing. (FH) Arnold KegebeinBesseres Design
Design Inspiration
iPodApple Inc.
2001
T3 TaschenradioBraun AG
1958
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
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)
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?
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
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
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
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
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
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
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
FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com
Dipl.-Ing. (FH) Arnold KegebeinBesseres Design
Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages