Issuu on Google+

1


mobile webApps

iRUN

2

Entwickelt wurde eine Webapplikation für mobile Endgeräte. iRun ist ein Trainingslogbuch für sportliche Aktivitäten wie Joggen, Wandern, Inlineskaten oder Fahrrad fahren. 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

3


4


5


Kolloquium 2010

1000 Worte

6

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. 7


Schaubild von Susanne Bramer | Basics Interface | SoSe 2009

2 Wege zur Butter

8 0,3%

1,5%

+

3,5%

+


9

>82%

>82%

<1%

>82%


Processing

Programme entwerfen

10

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


11


Basics Interface

12


13


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

14

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

15


12 16


17


Kolloquium 2010

Informationsarchitektur und -visualisierung

18


19


Kolloquium 2010

Textvisualisierung

20

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)

21


Kolloquium 2010

Stammbaum

22

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

23


Kolloquium 2010

Grundlagen der visuellen Gestaltung

24


25


Kolloquium 2010

26


27


Kolloquium 2010

28


2. Semester

Grundlagen der visuellen Gestaltung

29


Fotografie

30


31


Kolloquium 2010

32


3. Semester

Fotografie

33


Kolloquium 2010

34


3. Semester

Fotografie

Suchen und Finden. Und irgendwo dazwischen verloren.

35


Kolloquium 2010

36


3. Semester

Fotografie

Suchen und Finden. Und irgendwo dazwischen verloren.

37


Kolloquium 2010

38


3. Semester

Fotografie

Suchen. Finden. Irgendwo dazwischen verloren.

39


Illustration

40


41


Kolloquium 2010

42


4. Semester

Illustration

43


Kolloquium 2010

44


4. Semester

Illustration

45


Kolloquium 2010

46


4. Semester

Illustration

47


48


missusB portfolio 1