Programmiertes Entwerfen 2
Program: BA Communication Design
Credits: 4SWS
Time: Mondays 9:00 - 12:00
Course Description
Programm
(Basierend auf dem Programm von Prof. Michael Götte)
Wir beschäftigen uns in diesem Kurs mit der Beziehung zwischen Form und Farbe. Anhand von mehreren Übungen und Projekten werden wir Farbe als Gestaltungsmittel untersuchen.
Farbtheorie und -praxis
Impulsreferate und Übungen, Einzelarbeit
Wir nähern uns dem Thema Farbe von mehreren Seiten. Dazu bereiten je eine Studentin/ein Student einen kurzen Vortrag vor. Im Anschluss daran machen wir eine Übung zu dem Thema. Themen siehe unten.
Projekt 1: Kalender
Website und Plakat (A3), Gruppenarbeit
Als erstes Projekt skizzieren wir Ideen für die Visualisierung von Zeitabläufen. Das kann der persönliche Tagesablauf sein, oder Ereignisse der letzten Woche. Es kann aber auch ein Jahreskalender sein, in dem bestimmte Tage oder Wochen hervorgehoben werden: gesellschaftliche, politische, religiöse, naturwissenschaftliche Ereignisse - welche genau, ist jeder/m selbst überlassen. Das Plakat soll keine alphanumerischen Zeichen enthalten und nur mit Grundformen ohne Transparenz arbeiten, und kann analog oder digital umgesetzt werden.
Weiters überlegen wir uns, wie die Visualisierung interaktiv gestaltet werden könnte. Einfache Interaktionen und Ein/Ausblenden von Ebenen, eventuell Animationen, machen die Daten erfahrbar. Das kann als Konzept oder als Prototyp/Skizze ausgearbeitet werden.
Das Projekt 1 dient vor allem als Vorbereitung für Projekt 2.
Projekt 2: Datenvisualisierung
Interaktive Website mit Dokumentation, Prozessplakat und Ergebnisplakat (A2), Gruppenarbeit
Das Thema ist frei wählbar. Grundlage für die Visualisierung muss ein Datensatz mit einer Zeitdimension sein. Nach einer Themenrecherche widmen wir uns dem Experimentieren und Entwerfen. Wir arbeiten prozessorientiert: die Variantenbildung und der Prozess stehen im Mittelpunkt, weniger das Ergebnis.
Eine besondere Herausforderung besteht darin, auch bei dieser Visualisierung keine alphanumerischen Zeichen zu verwenden. Die Website bietet dann die Möglichkeit, das Plakat mit interaktiven Beschriftungen zu erklären und verständlich zu machen.
Zusätzlich enthält die Website die Dokumentation des Entwurfsprozesses.
Farbthemen
-
Physikalische Aspekte von Farbe
Was ist Farbe?
Stichworte: Welle/Teilchen, Spektralband, Reflektion/Absorption, Einfluss von Farbtemperatur des Lichts und Materialität.
Übung: Illustriere / skizziere einen Aspekt von Farbe als Informationsgrafik oder schematische Darstellung. -
Physiologische Aspekte und Farbwahrnehmung
Wie funktioniert das Auge und wie nehmen wir Farbe wahr?
Stichworte: Aufbau des Auges, Sehvorgang, Farbsehen/Hell-Dunkelsehen, Farbfehlsichtigkeit, subjektive Wahrnehmung.
Übung: Illustriere die Funktionsweise des Auges (Skizze). -
Additive und Subtraktive Farbmischung
Wie entstehen verschiedene Farben?
Übung: Illustriere eine additive und eine subtraktive Farbmischung. -
Kulturelle und historische Aspekte von Farbe
Was bedeuten Farben?
Stichworte: Symbolische Bedeutung der Farben, Kultureller Kontext, Verwendung von Farben in der Kunst
Übung: Finde ein historisches oder zeitgenössisches Beispiel, wo Farbe als Gestaltungsmittel eingesetzt wird. -
Historische Farbmodelle im Vergleich
Wie kann man Farben klassifizieren?
Stichworte: Farbmodelle von Runge, Munsell und Hickethier u.a., Vor- Nachteile verschiedener Modelle, Historische Entwicklung, Einsatzbereiche
Übung: Wähle ein Farbmodell aus und interpretiere es in einer Visualisierung, Infografik oder Skizze. -
Farbkontraste und Wirkung
Wie wirken mehrere Farben zusammen?
Stichworte: Theorie und Anwendung, Barrierefreiheit, Phänomene
Übung: Zeige einen oder mehrere Farbkontraste anhand eines eigenen Beispiels (Foto, Illustration). -
Farbtäuschungen
Warum ist Farbe relativ?
Übung: Erstelle deine eigene Farbtäuschung (Foto, Illustration). -
Farbe in der Drucktechnik
Wie bringt man Farbe auf's Papier?
Stichworte: Offset/Siebdruck/Digitaldruck, Rasterung CMYK Prozessfarben, Sonderfarben Pantone, HKS, Farbfächer
Übung: Illustriere die Drucktechniken in einer Informationsgrafik. -
Farbe am Computer: Farbmodi und -management
Welche Farben sehe ich am Bildschirm?
Stichworte: Farbmodi RGB CMYK LAB, Farbmanagement, Farbprofile, Kalibrierung.
Übung: Illustriere die Unterschiede zwischen RGB und CMYK in einer Informationsgrafik. -
Farbe am Computer: Farbpaletten
Wie verwende ich Farbe in meinem Tool?
Stichworte: Farbe im Web und digitalen Interfaces, für den Druck, Farben mischen und Farbpaletten erstellen in Indesign, Illustrator, Adobe CS, Sketch und Figma, Farben austauschen mit .ase, Export Einstellungen.
Übung: Erstelle deine eigene Farbpalette. -
Farbe in zeitgenössischer Kunst
Wie setzen Künstler Farbe ein?
Übung: Finde ein weiteres Beispiel für Farbe in der Kunst. -
Farbe in zeitgenössischem Grafikdesign
Wie setzen Grafikdesigner Farbe ein?
Übung: Finde ein weiteres Beispiel für Farbe im Grafikdesign.
Die Themen werden in einzeln erarbeitet und präsentiert. Die Präsentation sollte kurz und bündig sein und max. 10 Minuten dauern (empfohlene Tools: Keynote, Powerpoint, Google Slides, PDF).
Projects
-
Mobilität – Vergleich zweier Personen
Alexandra Hanisch, Jana Junk -
Schlafrythmus verschiedener Altersgruppen
Mariam-Sophie Karl, Alina Bachofer -
Waldbrände in Deutschland
Kiara Klotz Canelón, Jana Gerspach -
Saat- und Erntezeiten von Gemüsesorten
Kim Helen Fettes, Sophia Huber -
Number One Hits
Noah Hinz Campo, Moritz Luderer
Slides
Intro zum Kurs
Lehrinhalte, Beurteilungskriterien, Ablauf, Projekte
Farbübungen
Einführung zum Thema Farbe, interaktive Übungen, Farbtafeln von Josef Albers
Farbe im zeitgenössischen Grafikdesign
Erscheinungsbilder, Orientierungssysteme, Kartografie, Filme, Musikvideos, in denen vorrangig Farbe als Gestaltungsmittel eingesetzt wird
Methoden
Phasen eines kreativen Projekts, Design Thinking
Visualisierung von Zeitabläufen
Historische Beispiele von Datenvisualisierungen von Zeit, Beispiele von Studentenarbeiten an der HfG
Visuelle Codierung
Grundlagen der Datenvisualisierung: wie können Daten visuell kommuniziert werden?
Books
-
Gestaltung im Projekt der Moderne
Harald Stelzer, Gabriele N. Reichert, Thomas Rurik
avedition 1997Entwicklung und Orientierung der Hochschule für Gestaltung Schwäbisch Gmünd -
Interaction of Color
Josef Albers
Yale University Press 1963/2013 -
Farbe
Frans Gerritsen
Otto Maier Verlag, Ravensburg 1975 -
Generative Gestaltung, Entwerfen. Programmieren. Visualisieren.
Hartmut Bohnacker, Benedikt Groß, Julia Laub und Claudius Lazzeroni
Hermann Schmidt Verlag 2009 -
Information Graphics
Julius Wiedemann, Sandra Rendgen, Ursula Wulfekamp
Taschen Verlag 2012 -
Data Flow 1+2, Visualising Information in Graphic Design
R. Klanten, N. Bourquin, S. Ehrmann
Die Gestalten Verlag 2008/2010 -
Envisioning Information
Edward R. Tufte
Graphics Press 1990 -
The Visual Display of Quantitative Information
Edward R. Tufte
Graphics Press 1983 -
The Functional Art: An introduction to information graphics and visualization
Alberto Cairo
New Riders 2012 -
Cartographies of time: A History of the Timeline
Daniel Rosenberg and Anthony Grafton
Princeton Architectural Press 2010
Links
-
An alternative to pink & blue: Colors for gender data
Thoughts on color & gender by Lisa Charlotte Rost -
Your Friendly Guide to Colors in Data Visualisation
Thoughts on color & datavis by Lisa Charlotte Rost -
Dear Data
Analog data drawing project by Giorgia Lupi and Stefanie Posavec -
Datawrapper
Tool zum Erstellen von Charts und Karten -
Mistakes, we’ve drawn a few
Sarah Leo from the Economist on their learnings from making mistakes in data visualisation -
colorsystem
Farbsysteme in Kunst und Wissenschaft, basierend auf "IdeeFarbe" von Narciso Silvestrini, umgesetzt von der Zürcher Hochschule der Künste. -
Vis for Future contest 2019
International competition to gather state-of-the-art visualizations of climate change by Urban Complexity Lab Potsdam -
The surprising pattern behind color names around the world
Short documentary on why so many languages invented words for colors in the same order. -
Colors in Cultures
Infographic by AlwaysWithHonor.com and David McCandless. -
Design By Data
Dokumentation von Gabriella Beer, Ling-Hsuan Wang and Daniel Silva Luna -
Datavisualisation.ch
A carefully selected list of recommended tools (not regularly updated) -
Data Viz Project
An overview of chart types and visualisation techniques by Copenhagen company ferdio -
Visual Complexity
-
Financial Times Visual Vocabulary
A poster and web site to assist designers and journalists to select the optimal symbology for data visualisation -
Hans Rosling: New Insights on Poverty (TED talk)
-
Interaction of Color iPad App
-
The Magic and Logic of Color: How Josef Albers Revolutionized Visual Culture and the Art of Seeing by Maria Popova
-
Ausstellung Bauhaus Ulm - Von Peterhans bis Maldonado
-
Adobe Color
Tool zur Erstellung von Farbpaletten -
Coolors
Tool zur Erstellung von Farbpaletten -
Guess the color
Kleines Spiel zum Üben von HEX-Code