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

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?“

www.ingenfeld.deMit Stil ans Ziel

2/2

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. 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 ?

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

2/4

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

2/4

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

2/4

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

3/4

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

3/4

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

1/4

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

1/4

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

1/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

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

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) GestaltgesetzeErklä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

3. HCI „Was du schon immer wissen wolltest“

1/5

b.1-2) Das Gesetz der Nähe und Ähnlichkeit

3. HCI „Was du schon immer wissen wolltest“

1/5

b.3) Das Gesetz der Geschlossenheit

3. HCI „Was du schon immer wissen wolltest“

1/5

b.4) Das Gesetz der guten Form (Prägnanz)

3. HCI „Was du schon immer wissen wolltest“

1/5

c) Optische Täuschungen gezielt einsetzen

3. HCI „Was du schon immer wissen wolltest“

1/5

c) Optische Täuschungen gezielt einsetzenDer sensorische Nachhall

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

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“

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

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.

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

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

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.

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

3. HCI „Was du schon immer wissen wolltest“

3/5

3.) Chunking (Gedächtnis-Brocken)

3. HCI „Was du schon immer wissen wolltest“

3/5

3.) Chunking (Gedächtnis-Brocken)

3. HCI „Was du schon immer wissen wolltest“

3/5

3.) Chunking (Gedächtnis-Brocken)

BISTDUSOWEITNEWP7APPZUDESIGNEN?

BIST DU SOWEIT NE WP7 APP ZU DESIGNEN?

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

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)

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

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)

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"

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?)

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

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

1. Richtige Bildplatzierung

Was ist hier richtig, warum setzt man es ein?

1/4Design Techniken„Mit Stil ans Ziel“

1. Falsche Bildplatzierung

Was wirkt hier störend oder gut?

1/4Design Techniken„Mit Stil ans Ziel“

2. Typographie – Die FaustregelnBitt 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“

3. Leserichtung auf Plakaten, Webseiten

3/4Design Techniken„Mit Stil ans Ziel“

4. Der goldene Schnitt

4/4Design Techniken„Mit Stil ans Ziel“

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

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

QuellenDanilo Schmidt

Vielen Dank,

MSP Danilo Schmidt (Berlin)danilo.schmidt@studentpartners.de