Kolloquium 2010 Susanne Bramer
1
Susanne Bramer // 9156
4 3 2 1
m Illustration
Plastisches Naturstudium Fl채che und Struktur
Flash Prototypen
mediaBasics.19
Inform Visuelles Gestalten
Fotografie
B
Druck- und Reprotechnik
k체nstlerische Grundlagen
2
Int
Processing
TypoBasis B
Darstellung und Technik
Kommunikationsdesign
In
mobile webApps
teraction Design
Textanalyse/-erarbeitung
Projektwoche: Website Seminar: afterEffects
Computerlabor
Eros in allen Dingen
Projektwoche: Website
Fotolabor
Theorie
sonstige LV
Werkst채tten und Labore
mationsarchitektur
Basics Interface
nterfacedesign
Designmanagement
3
Processing
Programme entwerfen
4
Die Aufgabenstellung des Kurses lag darin, einen Prozess aus Natur oder Stadtbild zu programmieren und interaktiv erlebbar zu machen. Ich habe mich für Magnetfelder und Magnetfeldlinien entschieden. Das unsichtbare sichtbar machen.
Interaktität Mit der linken Maustaste kann ein negativer, mit der rechten ein positiver Magnet hinzugefügt werden. Klick auf Magnet = Magnet auswählen Taste + / - = Ladung ändern drag&drop = Magnet verschieben
5
Basics Interface
6
7
Kolloquium 2010
Arte 12:15
GUI Bei dem experimentellen Entwurf steht je ein Kreis für einen Sender. Sender können in den Arbeitsbereich gezogen werden um diesen zu aktivieren und Details zu sehen. Ein Klick auf den Sender vergrößert diesen und visualisiert die aufgenommenen Videos. Bei dieser Detailansicht werden wiederum alle aufgenommen Videos mittels Kreisen dargestellt. Die Verbindung zum
Arte
8
Senderkreis erfolgt mit einer Linie, die an die Startuhrzeit andockt. Dauer durch hellere Farbe (von Anfangs- bis Startzeit). Um eine neue Aufnahme zu planen, zieht man den Kreis mit (+) gekennzeichnet zur beliebigen Startuhrzeit des Senderkreises und stellt dann alle weiteren Angaben (Tag und Dauer der Aufnahme) über das sich öffnende Fenster ein. Start eines Videos durch Klick.
2. Semester
Basics Interface
Arte 12:15
Arte am pm
Arte
9
Kolloquium 2010
Klangbild
10
Visualisierung einer akustische Begebenheit in einem Zeitraster. 30-sekündige Passage des Titels »So weit« von Urbs mittels zerschnittenen, verformten und ineinandergestecktem Strohhalmen.
Deine Haare waren rot Oder vielleicht waren sie schwarz Seine Augen waren blau Oder vielleicht waren sie schwarz Weißt du, weißt du, Weißt du, weißt du
2. Semester
Basics Interface
ophon
s
vier
hakaTschaka
hak
11
12 12
13
Kolloquium 2010
1000 Worte
14
Gegenübergestellt wird der industrielle Verarbeitungsprozess von Butter (Sauerrahmbutter, mildgesäuerte Butter sowie Süßrahmbutter) dem traditionellen. Die Arbeitschritte sind rechts/links in den jeweiligen Blöcken zu finden, die ablaufenden Prozesse, die bei beiden Verfahren identisch sind, werden in der Mitte visualisiert.
2. Semester
Basics Interface
Prozessbeschreibung 1
Milchaufbereitung Abtöten von Keimen durch Erhitzen
2
Rahmgewinnung Rahm wird von übrigbleibender Magermilch getrennt (industr.: Zentrifuge – trad.: Zeit)
3
Rahmaufbereitung Abtöten von Keimen durch Erhitzen, anschließend Abkühlen
4
Rahmreifung
5
Butterung Rahm schlagen, Fettkügelchen des Milchfetts werden zerstört, Milchfett tritt aus und verklebt sich untereinander (industr.: Butterfertiger – trad.: Butterfass)
6
Werden während des gesamten Prozesses keine Milchsäurebakterien zugesetzt, so entsteht Süßrahmbutter (pH-Wert ≥ 6,4). Um Sauerrahmbutter (pH-Wert ≤ 5,1) zu erhalten, werden dem Rahm vor der Rahmreifung Milchsäurebakterien zugesetzt, um mildgesäuerte Butter (pH-Wert < 6,4) zu erhalten wird nach der Verbutterung Milchsäure zudosiert. Aus 20l Rohmilch können 18l Milch, 1l Buttermilch und knapp 1kg Butter gewonnen werden. 15
Schaubild von Susanne Bramer | Basics Interface | SoSe 2009
2 Wege zur Butter
16 0,3%
1,5%
+
3,5%
+
17
>82%
>82%
<1%
>82%
Kolloquium 2010
Bastian Sick
Der Dativ ist dem Genitiv sein Tod
Deutsch
t’s
Digitales Buch
18
Für die Umsetzung des Buches »Der Dativ ist dem Genitiv sein Tod« von Bastian Sick wurde ein illustrativer Chrakter gewählt. Da der Untertitel des Buches »Ein Wegweiser durch den Irrgarten der deutschen Sprache« lautet, wurde die Headergrafik als Labyrinth mit einzelnen Schildern gestaltet, über die die Navigation durch die einzelnen Kapitel erfolgt. Beim Mouseover über ein Schild erscheint ein Icon, das den Inhalt des Kapitels visualisiert.
Ein Wegweiser durch den Irrgarten der deutschen Sprache
Über dem hölzernen staben der Schriftzug Petra’s Hamster, Susi Australien’s Känguru hen vor dem alles ver zu spät: Die Welt ver
Zähneknirschend n wasser der Rechtsch Hähncheneck« und erhielten und offizie gescholtene so genan salonfähig geworden hig, aber zumindest ihr kleines Restaura schaltet, braucht sie ßen die mondäne A erhobenen Hauptes doch richtig so! Steh
Tatsächlich: dort – w deutschen Sprache – neuen amtlichen Re zur Verdeutlichung
2. Semester
Basics Interface
t’s
hland, deine Apostroph‘s
n Kahn prangte in grellen Neonbuchg »Noah’s Arche«. Und sie kamen alle: i’s Meerschweinchen, Indien’s Elefanten, u’s, selbst Marabu’s und Kolibri’s. Sie florheerenden Häk’chen-Hagel. Doch es war rsank, und übrig blieb am Ende – nicht’s.
nahm man es hin, dass im trüben Fahrhreibreform mit einem Mal »Helga’s »Rudi’s Bierschwemme« höchste Weihen ell sanktioniert wurden. Der von vielen nnte Deppen-Apostroph war über Nacht n. Nun ja, vielleicht noch nicht salonfät imbissbudenfähig. Wenn Oma morgens ant aufschließt und die Beleuchtung einsich nicht mehr zu schämen, dass drauAufschrift »Oma’s Küche« prunkt. Stolz kann sie sagen: »Was habt ihr denn? Ist ht sogar im Duden’s!«
wie auch in anderen Standardwerken zur – heißt es in Übereinstimmung mit den egeln: »Gelegentlich wird das Genitiv-s der Grundform des Namens auch durch
einen Apostroph abgesetzt.« Man beachte die Wortwahl: Gelegentlich. Das klingt wie: »Einige können es eben nicht lassen.« Und um sein Unwohlsein noch deutlicher zum Ausdruck zu bringen, fügt der Duden fast trotzig an: »Normalerweise wird vor einem Genitiv-s kein Apostroph gesetzt.« Ach ja, die gute alte Normalität! Als »Clarissa’s Hairstudio« noch »Frisörsalon Lötzke« hieß – wo ist sie hin? »Man sieht sich immer zweimal!«, weissagte der sächsische Genitiv nicht ohne Häme, als er sich anschickte, im Gefolge der Angeln und Sachsen nach Britannien auszuwandern. Er sollte Recht behalten. Er kehrte zurück - und wie! Doch kurioserweise nicht aus dem Westen (wo man allgemein den Ursprung aller Anglizismen vermutet), sondern aus dem Osten. Denn im Verbund mit D-Mark und Marktwirtschaft wurde nach der Wende in Ostdeutschland auch der Apostroph eingeführt. Keine Geschäftseröffnung, kein neues Ladenschild ohne das obligatorische Häkchen. Die ApostrophEuphorie schwappte in den Westen zurück und schwappt seitdem gesamtdeutsch hin und her, vorzugsweise in den seichten Niederungen des »Internet’s«. 2
19
Kolloquium 2010
Informationsarchitektur und -visualisierung
20
21
Kolloquium 2010
Textvisualisierung
22
Betrachtet wird die Anzahl der in einem beliebigen Text vorkommenden Buchstaben. Diese werden in einer kreisförmigen Datengrafik visualisiert. Jeder Keil entspricht einem Buchstaben. Der Radius ist bezeichnend für die Anzahl.
Interaktivität Der User hat die Möglichkeit, Farben und Hintergrund zu wählen und kann sich Begrenzungslinien sowie zugehörige Buchstaben anzeigen lassen.
2. Semester
Informationsarchitektur- und visualisierung
, . _
Z Y
(1)
(2)
(32)
(2)
(3)
W
(2)
V
(2)
U
(8)
T
(16) S
(14) R
(15) P
(3) O
(7)
23
Kolloquium 2010
Stammbaum
24
Die Grundlage meiner Visualisierung bilden Halbkreise, die jeweils f端r 100 Jahre stehen. Jede Kurve steht f端r eine Person. Kurven verheirateter Paare liegen nebeneinander. Die weibliche Person liegt dabei im Innern. Kinder gehen von Paaren an dem Punkt ab, an dem sie geboren wurden. Ich habe mich daf端r entschieden die 辰lteren Generationen heller zu gestalten, da diese immer weiter in Vergessenheit geraten (verblassende Erinnerungen).
2. Semester
Informationsarchitektur- und visualisierung
25
Kolloquium 2010
Grundlagen der visuellen Gestaltung
26
27
Kolloquium 2010
28
29
Kolloquium 2010
30
2. Semester
Grundlagen der visuellen Gestaltung
31
Fotografie
32
33
Kolloquium 2010
34
3. Semester
Fotografie
35
Kolloquium 2010
36
3. Semester
Fotografie
Suchen und Finden. Und irgendwo dazwischen verloren.
37
Kolloquium 2010
38
3. Semester
Fotografie
Suchen und Finden. Und irgendwo dazwischen verloren.
39
Kolloquium 2010
40
3. Semester
Fotografie
Suchen. Finden. Irgendwo dazwischen verloren.
41
Designmanagement
42
Mit unterschiedlichen Kreativitätstechniken wurden alternative Produkte und Ideen für den Marmeladenhersteller Zentis entwickelt. Die Bandbreite reicht vom Zentis-Bier über den Zentis-Automaten bis hin zur Zentis-Kosmetikserie.
Touch ermöglicht eine dezente Veredelung von verschiedenen Speisen. Der neuartige Sprühaufsatz lässt eine einfache und genaue Dosierung zu, die sowohl Jung als auch Alt mit dem Produkt vertraut werden lässt und zum Experimentieren einlädt.
Die fruchtig-zarte Ber端hrung. NE U NEU!
Unsere Fr端chte jetzt auch zum Spr端hen.
Leicht dosierbar, fruchtig-lecker.
43
MediaBasics
44
45
Kolloquium 2010
46
Yves Rocher
3. Semester
mediaBasics.19
Nie wurde die Natur der Frau so respektiert.
47
Kolloquium 2010
Als das Meer verschwand 48
Voice-Over zur Tonspur aus gleichnamigem Film
3. Semester
An einem Tag in einer Stadt am Ende der Welt kam die Ebbe – aber die Flut kam nicht. Das Meer war einfach ohne Vorwarnung verschwunden. Zu Anfang waren die Menschen nur ein wenig verwirrt, sie machten einfach weiter mit ihrem Tratsch und Streit über immer die selben Dinge. Aber bald machte sich in der Stadt ein Schweigen breit. Vor den Augen der Menschen entstand eine Wüste von unglaublichen Ausmaß. Der Ozean war für immer verschwunden. Es vergingen Wochen und noch immer gab es kein Zeichen vom Meer. Die Menschen begannen sich Sorgen zu machen. Dann wurde beschlossen, eine kleine Gruppe loszuschicken, in der Hoffnung, das Meer zurückzubringen. Als die Tage vergingen, machten sich immer mehr Menschen auf die Suche. Die Menschen suchten überall, aber der Ozean war spurlos verschwunden. Das ruhige Land das früher so reich
mediaBasics.19
gewesen war, war hart und erbarmungslos geworden. Dann tauchte am Horizont eine Shilouette auf, die Menschen glaubten durch die flirrende Luft brechende Wellen herannahen zu sehen. Doch als das Wasser sich näherte, veränderte und verschob sich sein Aussehen. Was ausgesehen hatte wie eine Welle, die sich brach, das waren in Wahrheit wilde Pferde. Wohin sie auch blickten, sie sahen Pferde, die näher und näher kamen. Die Menschen hatten nur die eine Wahl, sie mussten darauf vertrauen, dass die Pferde sie zum Ozean zurückführen würden. Ohne Zügel, ohne Sattel ritten sie auf den Pferden über das verödete Land. Der Ozean jedoch war für immer verschwunden. Sie lernten an dem Ort zu Leben, den der Ozean ihnen zurückgelassen hatte, obwohl er in ihren Träumen fortbestand.
49
Kolloquium 2010
50
3. Semester
mediaBasics.19
51
Kolloquium 2010
52
3. Semester
mediaBasics.19
53
Human Computer Interaction Design
54
55
Kolloquium 2010
ökoCHECK
56
Mit der zu entwickelnden Applikation für mobile Endgeräte soll dem Konsumenten die Möglichkeit gegeben werden, weitreichende Informationen zu Produkten zu erhalten und somit das Einkaufsverhalten auf die Erhaltung der Umwelt
auszurichten. Die Applikation dient als Einkaufsassistent um dem Kosumenten die Bewertung von Produkten zu erleichtertn und für ihn das richtige Produkt nach eigenen Kriterien zu finden.
4. Semester Uneinheitliche und versteckte Inhaltsund Nährwertangaben sowie eine Vielzahl von Gütesiegeln und Kennzeichnungen machen es dem Konsumenten nicht einfach zu entscheiden, welche Produkte gesund, biologisch und geeignet sind. Dabei soll besonderen Wert auf einen gesunden, nachhaltigen, soziologisch und biologisch korrekten Einkauf gelegt und der Konsument in der Bewertung seiner vor Ort im Markt ausgewählten Produkte unterstützt werden, indem ernährungs-
Human Computer Interaction Design und gesundheitsspezifische Aspekte wie Nährwerte, Zusammensetzung und Zusatzstoffe sowie ökologische Aspekte in einer einheitlichen Form dargestellt werden. Produkte werden gescannt und erfasst, die Daten werden einfach, übersichtlich und einheitlich visualisiert. Dem Konsumenten wird die Möglichkeit geschaffen, äquivalente Produkte mit einer besseren ernährungsspezifischen und/oder ökologischen Bilanz zu ermitteln.
57
Kolloquium 2010
58
1
ökologische Bilanz ermitteln Kriterien: Inhaltsstoffe, Transport, Verpackung, Gentechnik, soziale Aspekte, Tierschutz
2
CO2-Bilanz ermitteln
3
Nährwerte und Inhaltsstoffe Ampelsystem, Zusatzstoffe, Informationen zu einzelnen Komponenten, Siegel
4
Alternativen
5
Saisonkalender Obst und Gemüse
4. Semester
Human Computer Interaction Design
59
Kolloquium 2010
60
1
Konsumenten, die Wert auf Ökologie und Nachhaltigkeit legen
2
Konsumenten, die sich gesünder ernähren wollen wenig Fett, wenig Zusatzstoffe, wenig Zucker und Salz
3
Konsumenten mit speziellen Anforderungen Vegetarier, Veganer, Diabetiker
4
Konsumenten mit Allergien Gluten, Kuhmilch, Eier
4. Semester
Human Computer Interaction Design
61
Illustration
62
63
Kolloquium 2010
64
4. Semester
Illustration
65
Kolloquium 2010
66
4. Semester
Illustration
67
Kolloquium 2010
68
4. Semester
Illustration
69
mobile webApps
iRUN
70
Entwickelt wurde eine Webapplikation für mobile Endgeräte. iRun ist ein Trainingslogbuch für sportliche Aktivitäten wie Joggen, Wandern, Inlineskaten oder Fahrradfahren. Erfasst werden Distanz, Zeitdauer, Ge-
schwindigkeit und verbauchte kcal. Die gelaufene Route (ermittelt durch GPSDaten) wird in einer Map visualisiert. Weitere Features: Ansicht einer Historie der bereits absolvierten Läufe, Aufbereitung der Daten als Grafik.
4. Semester
Illustration
71
72
Š Susanne Bramer, 2010 Matrikelnr.: 9156 Studiengang: Interfacedesign
Eine Dokumentation im Rahmen des Kolloquiums an der FHP im Sommersemester 2010.