Mit Stil ans Ziel

47
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

Transcript of Mit Stil ans Ziel

Page 1: 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“

Mit Stil ans Ziel.Danilo Schmidt

Page 2: Mit Stil ans Ziel

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

Page 3: Mit Stil ans Ziel

www.ingenfeld.deMit Stil ans Ziel

2/2

Page 4: 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“

Mit Stil ans Ziel.Danilo Schmidt

Page 5: Mit Stil ans Ziel

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 ?

Page 6: Mit Stil ans Ziel

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

2/4

Page 7: Mit Stil ans Ziel

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

2/4

Page 8: Mit Stil ans Ziel

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

2/4

Page 9: Mit Stil ans Ziel

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

3/4

Page 10: Mit Stil ans Ziel

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

3/4

Page 11: Mit Stil ans Ziel

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

1/4

Page 12: Mit Stil ans Ziel

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

1/4

Page 13: Mit Stil ans Ziel

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

1/4

Page 14: 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“

Mit Stil ans Ziel.Danilo Schmidt

Page 15: Mit Stil ans Ziel

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

Page 16: Mit Stil ans Ziel

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

Page 17: Mit Stil ans Ziel

3. HCI „Was du schon immer wissen wolltest“

1/5

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

Page 18: Mit Stil ans Ziel

3. HCI „Was du schon immer wissen wolltest“

1/5

b.3) Das Gesetz der Geschlossenheit

Page 19: Mit Stil ans Ziel

3. HCI „Was du schon immer wissen wolltest“

1/5

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

Page 20: Mit Stil ans Ziel

3. HCI „Was du schon immer wissen wolltest“

1/5

c) Optische Täuschungen gezielt einsetzen

Page 21: Mit Stil ans Ziel

3. HCI „Was du schon immer wissen wolltest“

1/5

c) Optische Täuschungen gezielt einsetzenDer sensorische Nachhall

Page 22: Mit Stil ans Ziel

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

Page 23: Mit Stil ans Ziel

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“

Page 24: Mit Stil ans Ziel

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

Page 25: Mit Stil ans Ziel

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.

Page 26: Mit Stil ans Ziel

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

Page 27: Mit Stil ans Ziel

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

Page 28: Mit Stil ans Ziel

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.

Page 29: Mit Stil ans Ziel

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

Page 30: Mit Stil ans Ziel

3. HCI „Was du schon immer wissen wolltest“

3/5

3.) Chunking (Gedächtnis-Brocken)

Page 31: Mit Stil ans Ziel

3. HCI „Was du schon immer wissen wolltest“

3/5

3.) Chunking (Gedächtnis-Brocken)

Page 32: Mit Stil ans Ziel

3. HCI „Was du schon immer wissen wolltest“

3/5

3.) Chunking (Gedächtnis-Brocken)

BISTDUSOWEITNEWP7APPZUDESIGNEN?

BIST DU SOWEIT NE WP7 APP ZU DESIGNEN?

Page 33: Mit Stil ans Ziel

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

Page 34: Mit Stil ans Ziel

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)

Page 35: Mit Stil ans Ziel

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

Page 36: Mit Stil ans Ziel

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)

Page 37: Mit Stil ans Ziel

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"

Page 38: Mit Stil ans Ziel

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

Page 39: 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“

Mit Stil ans Ziel.Danilo Schmidt

Page 40: Mit Stil ans Ziel

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

Page 41: Mit Stil ans Ziel

1. Richtige Bildplatzierung

Was ist hier richtig, warum setzt man es ein?

1/4Design Techniken„Mit Stil ans Ziel“

Page 42: Mit Stil ans Ziel

1. Falsche Bildplatzierung

Was wirkt hier störend oder gut?

1/4Design Techniken„Mit Stil ans Ziel“

Page 43: 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“

Page 44: Mit Stil ans Ziel

3. Leserichtung auf Plakaten, Webseiten

3/4Design Techniken„Mit Stil ans Ziel“

Page 45: Mit Stil ans Ziel

4. Der goldene Schnitt

4/4Design Techniken„Mit Stil ans Ziel“

Page 46: 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

Page 47: Mit Stil ans Ziel

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)[email protected]