Mit Stil ans Ziel

780 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
780
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
2
Aktionen
Geteilt
0
Downloads
4
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Mit Stil ans Ziel

  1. 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. 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. 3. www.ingenfeld.de Mit Stil ans Ziel 2/2
  4. 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. 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. 6. 2. Die gezielte Wirkung „Design ist mehr als bunt“ 2/4
  7. 7. 2. Die gezielte Wirkung „Design ist mehr als bunt“ 2/4
  8. 8. 2. Die gezielte Wirkung „Design ist mehr als bunt“ 2/4
  9. 9. 2. Die gezielte Wirkung „Design ist mehr als bunt“ 3/4
  10. 10. 2. Die gezielte Wirkung „Design ist mehr als bunt“ 3/4
  11. 11. 2. Die gezielte Wirkung „Design ist mehr als bunt“ 1/4
  12. 12. 2. Die gezielte Wirkung „Design ist mehr als bunt“ 1/4
  13. 13. 2. Die gezielte Wirkung „Design ist mehr als bunt“ 1/4
  14. 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. 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. 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. 17. 3. HCI „Was du schon immer wissen wolltest“ 1/5 b.1-2) Das Gesetz der Nähe und Ähnlichkeit
  18. 18. 3. HCI „Was du schon immer wissen wolltest“ 1/5 b.3) Das Gesetz der Geschlossenheit
  19. 19. 3. HCI „Was du schon immer wissen wolltest“ 1/5 b.4) Das Gesetz der guten Form (Prägnanz)
  20. 20. 3. HCI „Was du schon immer wissen wolltest“ 1/5 c) Optische Täuschungen gezielt einsetzen
  21. 21. 3. HCI „Was du schon immer wissen wolltest“ 1/5 c) Optische Täuschungen gezielt einsetzen Der sensorische Nachhall
  22. 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. 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. 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. 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. 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. 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. 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. 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. 30. 3. HCI „Was du schon immer wissen wolltest“ 3/5 3.) Chunking (Gedächtnis-Brocken)
  31. 31. 3. HCI „Was du schon immer wissen wolltest“ 3/5 3.) Chunking (Gedächtnis-Brocken)
  32. 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. 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. 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. 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. 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. 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. 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. 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. 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. 41. 1. Richtige Bildplatzierung Was ist hier richtig, warum setzt man es ein? 1/4Design Techniken „Mit Stil ans Ziel“
  42. 42. 1. Falsche Bildplatzierung Was wirkt hier störend oder gut? 1/4Design Techniken „Mit Stil ans Ziel“
  43. 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. 44. 3. Leserichtung auf Plakaten, Webseiten 3/4Design Techniken „Mit Stil ans Ziel“
  45. 45. 4. Der goldene Schnitt 4/4Design Techniken „Mit Stil ans Ziel“
  46. 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. 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

×