Incom ist die Kommunikations-Plattform der Technische Hochschule Augsburg Gestaltung

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Braun_Michael (Block I)

Erste Datenvisualisierungen mithilfe eines Datensatzes des Deutschen Wetterdienstes für die Stadt Augsburg. In diesem Projekt werden drei grundlegende Ansätze mit deren individuellen Entwicklungsprozessen festgehalten.

Farbe und Kontrast

Beta1small.pngBeta1small.png

Aus dem ersten Kennenlernen mit der p5js Library ensteht diese Grafik, in welcher, farblich unterschieden, verschiedene Temperaturausschläge für jeden Tag für ein angefragtes Jahr ausgegeben werden.

Rot:  Tagesmaximumtemperatur
Blau:  Tagesminimumtemperatur
Grün: Tagesdurchschnittstemperatur


concept small fix border smaller.pngconcept small fix border smaller.png

Hinzu einer Konzeptgrafik in radialer darstellung.
Die anschließenden Arbeiten an diesem Entwurf im Code brach die ein oder andere Problematik mit sich, was schließlich dazu führte, dass sie nicht weiterentwickelt wurde.

Die Gedanken sollen aber nicht verschwendet sein. Die Idee wurde als Konzeptgrafik festgehalten und wird bei Bedarf in der Zukunft wieder aufgegriffen.


Punkt, Linie und Fläche

Bedeckungsgrad Fläche.pngBedeckungsgrad Fläche.png

Die graue Fläche veranschaulicht den Bedeckungsgrad über dem Himmel Augsburgs zum jeweils angeforderten Jahr. Zunächst bedarf diese Darstellung wenig Erklärung.  Viel Grau = Viel Wolken.

Die Farbgebung mit einem himmelblauen Hintergrund, sowie die gelb eingesetzte Sonne soll den Kontext hierfür schaffen. Die besten Beschreibungen sind schließlich die, welche sich selbst erklären.

Linien lassen sich zwar zunächst gut einsetzen um Information genau darzustellen, jedoch ähnelt die „Wolkendecke“ im momentanen Zustand eher einem Strichcode.

ellipse wolken bedeckung nostroke.pngellipse wolken bedeckung nostroke.png
ellipse wolken bedeckung.pngellipse wolken bedeckung.png
ellipse wolken.pngellipse wolken.png

Durch substitution der Linien durch Ellipsen wirkt die Grafik sofort wolkenähnlicher, leider jedoch immernoch relativ abstrackt. 

Generell stellte sich in diesem Ansatz die Frage:

„Wie viele und wie genau können Daten dargestellt werden und wie viel Information geht verloren, je künstlerischer das Endergebnis wird?“

Der Prozess endete schließlich in einem Datenpainting. Von den zu Beginn aussagekräftigen Linien, welche jeden Tag präzise darstellen konnten, blieb eine rießige Informationswolke.

Genau richtig.

Dargestelltes Jahr: 2018


Typographie

typo guide.pngtypo guide.png

Im Typographie Ansatz erfolgt die Darstellung der täglichen Mitteltemperatur in Form eines kompakten Clothing Guides.

Jeder Output gibt eine für den Tag am universell geeignetste Bekleidungsempfehlung in abgekürzter Schreibweise aus.

Grund der kryptischen Ausdrucksweise ist vor allem Platz zu sparen. Immer mehr Displays finden ihren weg in den Alltag, man siehe Smartwatches oder die Anzeigen an modernen Küchengeräten.

Bildschirme müssen heutzutage in allen Formaten funktionieren, was dementsprechend herausforderungen mit sich bringt. Hier kann dieser Typo Entwurf Punkten. Die minimalistische Darstellung folglt purem funktionalismus und lässt sich dadurch auf allen Geräten realisieren.

var.pngvar.png

Im Entwicklungsprozess wurden des Weiteren Farbgebungen und alternative Versionen des Outputtextes versucht.

Oft ist weniger jedoch mehr.

typo color underline.pngtypo color underline.png
2017.png2017.png
typo guide color.pngtypo guide color.png
typo color brackets.pngtypo color brackets.png
a2 normedPS.pnga2 normedPS.png

Die verschiedenen Ansätze ergaben durchaus interessante Gesamtbilder, jedoch waren sie, objektiv betrachtet, überflüssig und lenkten unnötig vom wesentlichen ab.

Ein interessanter Versuch, hier jedoch unpassend.

Back to the basics.

Resultat

Final v1 cut.pngFinal v1 cut.png
wb typo fix 4 descr NORMED.pngwb typo fix 4 descr NORMED.png

Titel: „Set for '17“

Die Verspieltheit beiseite gelegt, wurde eine monochrome Font eingesetzt um Abstände zu wahren und ein einheitliches Gesamtbild (-raster) zu erschaffen.

(Font: IBM Plex Mono)

Unten rechts wurden des Weiteren die nötigsten Angaben zu Ort und Datum in gleichem Stil ergänzt.

Von einem Titel auf dem Plakat wurde abgesehen, da dieser mit der reihenweisen Darstellung gebrochen hätte. Ziel war es, eine so schlicht wie mögliche Grafik zu erzeugen, welche sich selbst erklärt.

Einen potentiellen Anwendungsbereich dieses Projekts sehe ich insbesondere im mobilen Segment. Mithilfe eines aktuellen/live Datensatzens kann hier eine schlichte, funktionelle alternative zu traditionellen WetterApps enstehen.


Anwendung

Hier noch eine Implementierung meiner Arbeit in ein minimalistisches Konzept Wallpaper von EightOneCreative (https://eightonecreative.com/off-white-wallpaper). Offensichtlich haben sie die Ersteller des Wallpapers stark an der design Größe „Virgil Abloh“ und seiner Marke „OFF-WHITE“ Orientiert.

Mein Block I Projekt passt hier wie die Faust aufs Auge und ergänzt den Look mit einer zusätzlichen Information ohne aus der Reihe zu fallen.
Tatsächlich würde einer unwissenden Person wahrscheinlich nicht auffallen, dass hier nachgearbeitet wurde.

Ich könnte mir kein besseres Anwendungsbeispiel für mein Projekt wünschen.

(Font: Helvetica)

apple watch off white mockup cut original.pngapple watch off white mockup cut original.png
apple watch off white mockup cut original  FIXED SPACING.pngapple watch off white mockup cut original  FIXED SPACING.png

Ein Projekt von

Fachgruppe

Interaktive Medien

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Daniel Rothaug

Zugehöriger Workspace

IA Grundlagen interaktiver Gestaltung (Gruppe A)

Entstehungszeitraum

Sommersemester 2020

Keywords

zusätzliches Material