Als PDF, PPTX herunterladen
Hochgeladen vonmspgermany
Mit Stil ans Ziel
Das Dokument beschäftigt sich mit den Grundlagen und Techniken des Designs, einschließlich der Selbstkritik und der effektiven Wirkung von Design auf die Zielgruppe. Es werden Aspekte der menschlichen Computerinteraktion (HCI) behandelt, wie visuelle Wahrnehmung, Farbsymbolik und Gedächtnisarten, um ein umfassendes Verständnis für gutes Design zu fördern. Zudem werden praktische Designtechniken wie Bildplatzierung, Typographie und Leserichtung erläutert.
Mit Stil ans Ziel
- 1. 1. Einstellung undHerangehensweise „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 ichein 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 ansZiel 2/2
- 4. 1. Einstellung undHerangehensweise „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 gezielteWirkung „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 gezielteWirkung „Design ist mehr als bunt“ 2/4
- 7. 2. Die gezielteWirkung „Design ist mehr als bunt“ 2/4
- 8. 2. Die gezielteWirkung „Design ist mehr als bunt“ 2/4
- 9. 2. Die gezielteWirkung „Design ist mehr als bunt“ 3/4
- 10. 2. Die gezielteWirkung „Design ist mehr als bunt“ 3/4
- 11. 2. Die gezielteWirkung „Design ist mehr als bunt“ 1/4
- 12. 2. Die gezielteWirkung „Design ist mehr als bunt“ 1/4
- 13. 2. Die gezielteWirkung „Design ist mehr als bunt“ 1/4
- 14. 1. Einstellung undHerangehensweise „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 duschon 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 duschon 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 duschon immer wissen wolltest“ 1/5 b.1-2) Das Gesetz der Nähe und Ähnlichkeit
- 18. 3. HCI „Was duschon immer wissen wolltest“ 1/5 b.3) Das Gesetz der Geschlossenheit
- 19. 3. HCI „Was duschon immer wissen wolltest“ 1/5 b.4) Das Gesetz der guten Form (Prägnanz)
- 20. 3. HCI „Was duschon immer wissen wolltest“ 1/5 c) Optische Täuschungen gezielt einsetzen
- 21. 3. HCI „Was duschon immer wissen wolltest“ 1/5 c) Optische Täuschungen gezielt einsetzen Der sensorische Nachhall
- 22. 3. HCI „Was duschon 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 duschon 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 duschon 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 duschon 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 duschon 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 duschon 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 duschon 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 duschon 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 duschon immer wissen wolltest“ 3/5 3.) Chunking (Gedächtnis-Brocken)
- 31. 3. HCI „Was duschon immer wissen wolltest“ 3/5 3.) Chunking (Gedächtnis-Brocken)
- 32. 3. HCI „Was duschon immer wissen wolltest“ 3/5 3.) Chunking (Gedächtnis-Brocken) BISTDUSOWEITNEWP7APPZUDESIGNEN? BIST DU SOWEIT NE WP7 APP ZU DESIGNEN?
- 33. 3. HCI „Was duschon 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 duschon 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 Stilans 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 duschon 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 duschon 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 duschon 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 undHerangehensweise „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 „MitStil 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 Wasist hier richtig, warum setzt man es ein? 1/4Design Techniken „Mit Stil ans Ziel“
- 42. 1. Falsche Bildplatzierung Waswirkt 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 aufPlakaten, Webseiten 3/4Design Techniken „Mit Stil ans Ziel“
- 45. 4. Der goldeneSchnitt 4/4Design Techniken „Mit Stil ans Ziel“
- 46. 1. Einstellung undHerangehensweise „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: - ausden 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