1. 1. Einstellung und Herangehensweise
„Bin ich ein guter Designer“
2. Die gezielte Wirkung von Design
„Design ist mehr als nur bunt“
3. HCI (Human Computer Interaction)
„Was du schon immer über
Design wissen wolltest“
4. Design Techniken
„Mit Stil ans Ziel“
5. Selbstkritische Überprüfung
„Gut Ding will Weile“
Mit Stil ans Ziel.
Danilo Schmidt

2. 1. Herangehensweise
„Bin ich ein guter Designer?“
1/2
• Nicht nur Kritik vertragen können,
sondern auch Kritik erwarten
• Genaue Analyse meiner Zielgruppe
„Wer muss sich mein Design ansehen?“
„Welche Techniken setze ich ein, damit mein
Design von der Zielgruppe akzeptiert wird?“
• W-Fragen mit Focus auf die Fülle
„Wie viel Informationen muss ich darstellen?“
„Wie viel Platz gibt es für Designelemente?“
„Welche Aufgabe soll das Design erfüllen?“

3. www.ingenfeld.de
Mit Stil ans Ziel
2/2

4. 1. Einstellung und Herangehensweise
„Bin ich ein guter Designer“
2. Die gezielte Wirkung von Design
„Design ist mehr als nur bunt“
3. HCI (Human Computer Interaction)
„Was du schon immer über
Design wissen wolltest“
4. Design Techniken
„Mit Stil ans Ziel“
5. Selbstkritische Überprüfung
„Gut Ding will Weile“
Mit Stil ans Ziel.
Danilo Schmidt

5. 2. Die gezielte Wirkung
„Design ist mehr als bunt“
1/4
Die Aufgaben von Design
1. Marktwirtschaft
- Kunde identifiziert sich mit Produkten, Firmen
-Firmenpräsentation (Logo, Corporate Identity)
2. Informationsträger
- Flyer, Webseiten, Zeitschriften, Zeitung, Plakate usw.
3. Branding
- Logos, Werbespots, Kampagnen
4. Funktionalität
- Funktionsübertragung (Software, Icons, Controls)
- Affordanz (sichtbare Verwendung mit Hilfe von
Design)
Ein kleiner Praxis-Test gefälligst  ?

6. 2. Die gezielte Wirkung
„Design ist mehr als bunt“
2/4

7. 2. Die gezielte Wirkung
„Design ist mehr als bunt“
2/4

8. 2. Die gezielte Wirkung
„Design ist mehr als bunt“
2/4

9. 2. Die gezielte Wirkung
„Design ist mehr als bunt“
3/4

10. 2. Die gezielte Wirkung
„Design ist mehr als bunt“
3/4

11. 2. Die gezielte Wirkung
„Design ist mehr als bunt“
1/4

12. 2. Die gezielte Wirkung
„Design ist mehr als bunt“
1/4

13. 2. Die gezielte Wirkung
„Design ist mehr als bunt“
1/4

14. 1. Einstellung und Herangehensweise
„Bin ich ein guter Designer“
2. Die gezielte Wirkung von Design
„Design ist mehr als nur bunt“
3. HCI (Human Computer Interaction)
„Was du schon immer über
Design wissen wolltest“
4. Design Techniken
„Mit Stil ans Ziel“
5. Selbstkritische Überprüfung
„Gut Ding will Weile“
Mit Stil ans Ziel.
Danilo Schmidt

15. 3. HCI
„Was du schon immer wissen wolltest“
1/5
Human Computer Interaction und Design
1. Visuelle Wahrnehmung und Gestaltgesetze
„Ab wann erkennen wir?“
2. Das Farbgefühl
„Wie nehmen wir welche Farbe wahr?“
3. Chunking
„Wie schaffe ich Übersicht? “
4. Gedächtnisarten
„Wie tickt der Betrachter?“
5. Affordanz
„Was kann ich damit machen?“ zum ausprobieren 

16. 3. HCI
„Was du schon immer wissen wolltest“
1/5
1.) Visuelle Wahrnehmung und Gestaltgesetze
a) Unbewusste Vorverarbeitung
– Erkennen bekannter Strukturen
– "Vorsortierung" der visuellen Information
– Unterdrückung von Dauerreizen Hintergrundstrukturen
b) Gestaltgesetze
Erklärungen der Vorverarbeitung
über 100 Gestaltgesetze, 4 Hauptgesetze:
– Gesetz der Nähe
– Gesetz der Ähnlichkeit
– Gesetz der Geschlossenheit
– Gesetz der Prägnanz
c) Optische Täuschung

17. 3. HCI
„Was du schon immer wissen wolltest“
1/5
b.1-2) Das Gesetz der Nähe und Ähnlichkeit

18. 3. HCI
„Was du schon immer wissen wolltest“
1/5
b.3) Das Gesetz der Geschlossenheit

19. 3. HCI
„Was du schon immer wissen wolltest“
1/5
b.4) Das Gesetz der guten Form (Prägnanz)

20. 3. HCI
„Was du schon immer wissen wolltest“
1/5
c) Optische Täuschungen gezielt einsetzen

21. 3. HCI
„Was du schon immer wissen wolltest“
1/5
c) Optische Täuschungen gezielt einsetzen
Der sensorische Nachhall

22. 3. HCI
„Was du schon immer wissen wolltest“
2/5
Human Computer Interaction und Design
1. Visuelle Wahrnehmung und Gestaltgesetze
„Ab wann erkennen wir?“
2. Das Farbgefühl
„Wie nehmen wir welche Farbe wahr?“
3. Chunking
„Wie schaffe ich Übersicht? “
4. Gedächntisarten
„Wie tickt der Betrachter?“
5. Affordanz
„Was kann ich damit machen?“ zum ausprobieren 

23. 3. HCI
„Was du schon immer wissen wolltest“
2/5
2. Das Farbgefühl Welche Farbe sagt was?
Rot als Farbe des Feuers:
-Aufmerksamkeit, Vitalität, Energie, Liebe, aggressiv
-Aufwühlend, Wut, Zorn, Brutalität
Orange - Symbol der untergehenden Sonne
-Optimismus, Lebensfreude, Aufgeschlossenheit,
Kontaktfreude, Jugendlichkeit, Gesundheit
Selbstvertrauen
-aber auch Leichtlebigkeit, Aufdringlichkeit,
Ausschweifung vermitteln oft auch „billig“ und „unseriös“

24. 3. HCI
„Was du schon immer wissen wolltest“
2/5
2. Das Farbgefühl Welche Farbe sagt was?
Gelb ist die Farbe der Sonne.
-Licht, Heiterkeit, Freude, steht für Wissen, Weisheit,
Vernunft und Logik.
-Schmutzige Gelbtöne dagegen: negative Assoziationen
(Täuschung), Rache, Pessimismus, Egoismus, Geiz, Neid
Grün "Wiesen und Wälder"
-beruhigend, steht für Großzügigkeit, Sicherheit,
Harmonie, Hoffnung, Erneuerung des Lebens.
-aber auch Neid, Gleichgültigkeit, Stagnation und
Müdigkeit

25. 3. HCI
„Was du schon immer wissen wolltest“
2/5
2. Das Farbgefühl Welche Farbe sagt was?
Cyan (Türkis)
-wirkt frisch, Farbe des Meeres an einem sonnigen Tag
-vermittelt Wachheit, Bewusstheit, Klarheit, geistige
Offenheit und Freiheit
-Aber auch kühl, distanziert, Gefühl von Leere
Blau, Farbe des Himmels
- kühl, steht für Ruhe, Vertrauen, Pflichttreue, Schönheit,
Sehnsucht
- aber auch Traumtänzerei, Nachlässigkeit oder
Melancholie vermitteln.

26. 3. HCI
„Was du schon immer wissen wolltest“
2/5
2. Das Farbgefühl Welche Farbe sagt was?
Violett - Farbe der Inspiration
- Würde, Mystik, Magie, Kunst, außergewöhnlich,
extravagante: Frömmigkeit, Buße und
Opferbereitschaft
- aber auch stolz und arrogant oder unmoralisch
Magenta, (auch Pink)
-sanft, Blüten, Blumen, Naturschauspiel, steht für
Idealismus, Dankbarkeit, Engagement, Ordnung, Mitgefühl
-aber auch Arroganz und Dominanz

27. 3. HCI
„Was du schon immer wissen wolltest“
2/5
2. Das Farbgefühl Welche Farbe sagt was?
Weiß (Eis und Schnee)
-Symbol der Reinheit, Klarheit, Erhabenheit und
Unschuld.
-aber Zeichen der Unnahbarkeit, Empfindsamkeit und
kühler Reserviertheit
Grau (wolkenverhangener Himmel, trübe Tage)
-vollkommener Neutralität, Geld, Vorsicht, Zurückhaltung
und Kompromissbereitschaft
-auch Langeweile, Eintönigkeit, Unsicherheit und
Lebensangst

28. 3. HCI
„Was du schon immer wissen wolltest“
2/5
2. Das Farbgefühl Welche Farbe sagt was?
Schwarz (Dunkelheit bzw. Lichtlosigkeit)
- Trauer, Unergründlichkeit, Unabänderlichkeit, drückt
das Furchterregende und Geheimnisumwitterte
- aber auch Ausdruck von Würde und Ansehen und hat
einen besonders feierlichen Charakter.

29. 3. HCI
„Was du schon immer wissen wolltest“
3/5
Human Computer Interaction und Design
1. Visuelle Wahrnehmung und Gestaltgesetze
„Ab wann erkennen wir?“
2. Das Farbgefühl
„Wie nehmen wir welche Farbe wahr?“
3. Chunking
„Wie schaffe ich Übersicht? “
4. Gedächtnisarten
„Wie tickt der Betrachter?“
5. Affordanz
„Was kann ich damit machen?“ zum ausprobieren 

30. 3. HCI
„Was du schon immer wissen wolltest“
3/5
3.) Chunking (Gedächtnis-Brocken)

31. 3. HCI
„Was du schon immer wissen wolltest“
3/5
3.) Chunking (Gedächtnis-Brocken)

32. 3. HCI
„Was du schon immer wissen wolltest“
3/5
3.) Chunking (Gedächtnis-Brocken)
BISTDUSOWEITNEWP7APPZUDESIGNEN?
BIST DU SOWEIT NE WP7 APP ZU DESIGNEN?

33. 3. HCI
„Was du schon immer wissen wolltest“
4/5
Human Computer Interaction und Design
1. Visuelle Wahrnehmung und Gestaltgesetze
„Ab wann erkennen wir?“
2. Das Farbgefühl
„Wie nehmen wir welche Farbe wahr?“
3. Chunking
„Wie schaffe ich Übersicht? “
4. Gedächtnisarten
„Wie tickt der Betrachter?“
5. Affordanz
„Was kann ich damit machen?“ zum ausprobieren 

34. 3. HCI
„Was du schon immer wissen wolltest“
4/5
4.) Die Gedächtnisarten
Sensorisches Gedächtnis:
- ikonischer Speicher
(12 Chunks, 0,5 sec Persistenz)
- echoischer Speicher
(bis 5 sec. Persistenz)
KZG (Kurzzeit-Gedächtnis)
- Arbeitsspeicher
- 7 +/- 2 Chunks, 15-30 sec.
- störungsanfällig
- Informationsverlust durch Überlastung
- auffrischbar durch Wiederholung
LZG (Langzeit-Gedächtnis)
- Unbegrenzte Kapazität und Persistenz
(100 TB)
- Assoziatives Wissensnetz
- Zugriffszeit 8 sec/Chunk
- Recall / Recognition (Zugang zum Wissensnetz)

35. 4. Designtechniken
„Mit Stil ans Ziel“
1/4
4.) Designtechniken
1. Visuelle Wahrnehmung und Gestaltgesetze
„Ab wann erkennen wir?“
2. Das Farbgefühl
„Wie nehmen wir welche Farbe wahr?“
3. Chunking
„Wie schaffe ich Übersicht? “
4. Gedächtnisarten
„Wie tickt der Betrachter?“
5. Affordanz
„Was kann ich damit machen?“ zum ausprobieren 

36. 3. HCI
„Was du schon immer wissen wolltest“
5/5
5.) Affordanz = Design was Funktionalität zeigt
Welche Tür geht wie auf?
Und wie könnte ein Steuer-Bedienelement auf einem Krahn
aussehen mit dem ich in alle Richtungen fahren kann?
Live erarbeitet: Steuerknüppel, den man auch ziehen und drücken
kann, 2 Steuerknüppel (einer für 4 Richtungen, der ander für hoch
und runter)

37. 3. HCI
„Was du schon immer wissen wolltest“
5/5
Affordanz im Bereich der Medien und Software
Bedienelemente (Widgets)
– Knopf, Checkbox, Slider, Scrollbar, Menüs
Folge:
Affordanz-"Kultur" wurde bereits geprägt
 andere Verwendungen wirken "exzentrisch"

38. 3. HCI
„Was du schon immer wissen wolltest“
5/5
Praxisteil
Wie könnte ein Bedienelement für 4 unterschiedliche
Zustände gestaltet werden?
Live erarbeitete Fragen/Antworten:
- wie kann ich visualisieren, dass ein Zustand nicht aus
Versehen übersprungen wird?
-Schieberegler, der in Zacken dargestellt wird
-Radiobuttons (eindeutige Zustände)
-Schieberegler wie auf Mischpulten (sinnvoll?)

39. 1. Einstellung und Herangehensweise
„Bin ich ein guter Designer“
2. Die gezielte Wirkung von Design
„Design ist mehr als nur bunt“
3. HCI (Human Computer Interaction)
„Was du schon immer über
Design wissen wolltest“
4. Design Techniken
„Mit Stil ans Ziel“
5. Selbstkritische Überprüfung
„Gut Ding will Weile“
Mit Stil ans Ziel.
Danilo Schmidt

40. Design Techniken „Mit Stil ans Ziel“
1.) Bildplatzierung
-Bilder bilden eine Linie, wirken nicht störend
-Bilder stehen sich gegenüber (Provokation)
2.) Typographie
- gezieltes Einsetzen von Schrift
3.) Leserichtung auf Webseiten, Plakaten
4.) Der goldene Schnitt
Design Techniken
„Mit Stil ans Ziel“
1/4

41. 1. Richtige Bildplatzierung
Was ist hier richtig, warum setzt man es ein?
1/4Design Techniken
„Mit Stil ans Ziel“

42. 1. Falsche Bildplatzierung
Was wirkt hier störend oder gut?
1/4Design Techniken
„Mit Stil ans Ziel“

43. 2. Typographie – Die Faustregeln
Bitt e nicht lesen, sondern zuhören 
• Die Renaissance Antiqua wirkt würdig und in sich ruhend
• Schriften aus der Gruppe der Barock-Antiqua sind spannungsreich, aufbauend und variabel
• Die klassizistische Antiqua wirkt klar, edel, und gediegen
• Schriften aus der Gruppe der serifenbetonten Antiqua sagt man nach, kraftvoll, konstruktiv
und linienbetont zu sein
• Die serifenlose Antiqua vermittelt einen sachlichen, ruhigen und konstruktiven Eindruck
• Schreibschriften wirken verspielt und dynamisch
• Variationen in den Strichstärken wirken elegant
• Gebrochene Schriften wirken alt
• Fette Schriften oder Schnitte wirken dominant und laut, schwer und träge
• Leichte Schriften oder Schnitte wirken dezent und zurückhaltend
• Kursive Schriften wirken dynamisch
Typographie auf graphischen Elementen:
• Text muss immer hinreichenden Schwarz-Weiß-Anteil haben
• Positivdarstellung im hellen Raum
• Negativdarstellung im dunklen Raum
• Monitor als Lichtquelle nicht unterschätzen!
2/4Design Techniken
„Mit Stil ans Ziel“

44. 3. Leserichtung auf Plakaten, Webseiten
3/4Design Techniken
„Mit Stil ans Ziel“

45. 4. Der goldene Schnitt
4/4Design Techniken
„Mit Stil ans Ziel“

46. 1. Einstellung und Herangehensweise
„Bin ich ein guter Designer“
2. Die gezielte Wirkung von Design
„Design ist mehr als nur bunt“
3. HCI (Human Computer Interaction)
„Was du schon immer über
Design wissen wolltest“
4. Design Techniken
„Mit Stil ans Ziel“
5. Selbstkritische Überprüfung
„Gut Ding will Weile“
am Bsp. Einer KINECT-Präsentation
Mit Stil ans Ziel.
Danilo Schmidt
4/4

47. Externe Quellen:
Inhalte:
- aus den Seminaren der BHT Berlin (I.Schmaedicke)
- Typografie und Layout (Claudia Runk)
- Wiki, Bildmaterial aus google, M.C. Escher
- Fraunhofer: http://www.ipsi.fraunhofer.de/
Zur Veranschaulichung (Beispiele):
- www.ingenfeld.de, http://de.fifa.com/
- Microsoft Word
Quellen
Danilo Schmidt
Vielen Dank,
MSP Danilo Schmidt (Berlin)
danilo.schmidt@studentpartners.de