Page 1

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.

UIxD Portfolio 2010  

Grundstudiumsarbeiten FH Potsdam Susanne Bramer Interface Design – User Experience – User Content

Advertisement