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. 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. 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. 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. 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. 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. 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. Musterbildung
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

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. 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. 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. 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. 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. Schriftfamilie
The

15. q quick brown fox jumpslazy

16. og the lazy dog
The uick

17. brown

18. fox

19. jumps

20. over

21. jumps dover the lazy dog
The quick brown fox jumps over the lazy dog
brown fox the

22. over
Maecenas suscipit lectus

23. at

24. mperdiet.

25. E
Maecenas

26. suscipit

27. interdum

28. interdum lectus at quis

29. nunc

30. enim.

31. Etiam
Maecenas suscipit interdum lectustiam

32. imperdiet. Etiam
Maecenassuscipit interdum ilectus at imperdiet. Etiamulla

33. eu

34.
N quis
purus

35. enim. olor

36. lacinia

37. ulputate

38. at

39. sed

40. commodo dolor lacinia
nunc ommodo

41. enim. eu vpurus purusurna.

42. dolor lacinia vulputate
quiscnunc denim. Nulla eu commodo In

43. orci

44. libero,

45. cursus

46. a

47. ornare

48.
Nulla Nulla eu purus commodo dolor lacinia
sit

49. amet,

50. consectetur

51. urna. In orci libero, cursus a ornare
at sed urna. In orci st.

52. Duis

53. ulputate

54. a augue

55. quis

56. pretium.

57. ornaresit
vulputate at sedid

58. elibero,vcursus eu

59. ornare sit amet,n

60. feugiat

61. sit
sed urna. In orci libero, cursus a I
auctor

62. t consectetur id vulputate on

63. suscipit

64. in,

65. eu pretium.Ut

66.
consectetur id est. Duisiam,

67. Duis vulputate eu augue quis
amet,empus.

68. Aliquam

69. libero

70. dest.feugiat

71. nvulputatequisaugue quis
consectetur
eu augue porta

72. in

73. tellus.

74. In
iaculis

75. convallis

76. lit,

77. a

78. facilisis

79. arcu

80. v tempus. diam,unc

81. libero
feugiat auctor tempus. Aliquam liberoAliquam egestas

82. diam,
pretium. Inefeugiat auctorestibulum

83. sit

84. aAliquamliberosit

85. amet

86.
In feugiat auctor tempus. met.

87. N feugiat non
feugiat in, porta
eros

88. a

89. t feugiat in suscipit iaculis convallis elit, a
suscipit non non tellus. Ut in, porta in tellus. Ut iaculis
diam,ristique. suscipit in, porta in tellus. Ut iaculis facilisis
arcu vestibulum facilisis Nunc vestibulum sit amet. Nunc
convallis elit, a sit amet. arcu vestibulum sit amet.aNunc
facilisis arcu egestas sit amet eros
egestas
Duis

90. faucibus

91.
tristique. metus

92. vel

93. etus

94. l a tristique.
egestas sit ametmerosaoreet,

95. id

96. porttitor

97. justo

98. mollis.
tristique.
Donec

99. faucibus metus vel metus laoreet, id porttitor
Duis faucibus metus vel metus Nulla

100. vitae

101. suscipit

102. lporttitorviverra

103.
Duisiaculis

104. est

105. vitae

106. vestibulum

107. dictum.

108. laoreet, id porttitorliquam

109. justo
metus vel metus laoreet, id eo.

110. A justo
mollis.
et

111. erat

112. e
mollis. t

113. pretium.
justo mollis.
Suspendisse

114. quis

115. n est vitae vestibulum dictum. Nulla vitaevitae
Donec iaculis est vitae vestibulum dictum. Nulla vitae
Doneciaculis isi

116. ipsum.

117. Mauris

118. vitae

119. augue

120. consectetur,

121. pellentesque

122. diam

123. sit

124.
iaculis
dictum. Nulla
amet,

125. iaculis

126. nisl.

127. Pellentesque

128. dignissim

129. et erat et n

130. semper

131.
suscipit leo. Aliquam viverra erat et et ipretium.
suscipitleo. Aliquam viverra etmet eratpretium. neque

132. molestie

133.
Aliquam viverra attis

134. lorem,

135. pretium.
in.
Suspendisse quis
Suspendisse quis nisi ipsum. Mauris vitae augue consectetur,
Suspendisse quis nisi ipsum. Mauris vitae augue
Mauris vitae augue
pellentesque pellentesque diam sit amet, iaculis nisl.
consectetur,diam sit amet, iaculis nisl. Pellentesque nisl.
pellentesque
amet, iaculis
Pellentesque
dignissim mattis lorem, in semper neque in semper neque
Pellentesque dignissim mattis lorem, in semper neque
lorem, molestie in.
molestie in.
in.
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

136. 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
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

137. iPod User Interface
MENU




Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

138. Design Inspiration
iPod
Apple Inc.
2001
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
T3 Taschenradio
Braun AG
1958
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

139. Symbole
• Wirksamkeit von Symbolen
• Erlernte oder assoziierte Bedeutung
• Kulturelle Unterschiede
• Wiederholung
• Eindeutigkeit
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

140. 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)
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

141. Das Ziel
• Wo liegt die goldene Mitte zwischen Einfachheit und Komplexität?
Wie einfach kann
man es gestalten?
⇆
Wie komplex
muss es sein?
• Play
• Stop
• Pause
• Rückwärts
• Schnelllauf vorwärts
• Schnelllauf rückwärts
• Vorspulen
• Zurückspulen
• Auswerfen
•…
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

142. Simplicity - 10 Rules
• SIMPLICITY – Die zehn Gesetze der Einfachheit
John Maeda, Spektrum Akademischer Verlag
1. Reduzieren
6. Kontext
2. Organisieren
7. Gefühle
3. Zeit
4. Lernen
8. Vertrauen
9. Fehlschläge
5. Unterschiede
10. Das e i n e Gesetz
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

143. Reduzieren
• Weglassen
• Was muss nicht unbedingt vorhanden sein?
• VVV = Verkleinern, Verstecken, Verbinden
➟ Beispiel: Fernbedienung
➟ Beispiel: FileMaker
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

144. Organisieren
• SKIP
• Sortieren
• Kategorisieren
• Integrieren
• Priorisieren
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
• OGER
• Ordnen
• Gruppieren
• Einbinden
• Relevanz/Rang
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

145. Organisieren
Schaden
Julia
Gestern
Grau
Winter
Schule
Lupe
Epilog
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
Wurzel
Gartenzwerg
Chile
Innenraum
Politikverdruss
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

146. Organisieren
Immer
Winter
Blau
Schaden
Chile
Gestern
Innenraum
Gartenzwerg
Grau
Geschichte
Sandsturm
Julia
Politikverdruss
Lupe
Wurzel
Schule
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
Epilog
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

147. Hilfsmittel
• Papier und Bleistift
• Post-Its
• MindMaps
• Wikis
• Mockups
• Internet
• Web Design
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

148. 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
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com

149. Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com