Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

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

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Basic Interface – Dokumentation Suske

Dokumentation des Kurses Basic Interface von Elias Suske.

Dieser Kurs stellt eine grundlegende Auseinandersetzung mit den zentralen Themen des Interface Designs dar. Ausgehend von einer Reihe von Entwürfen und Experimenten wird die Herangehensweise an gestalterische Probleme im Interface Design vermittelt. Konkret werden im Kurs die Themen Screendesign, grafische User-Interfaces, Visualisierung und Semiotik behandelt. Dabei stehen insbesondere konzeptionelle Studien im Mittelpunkt. Weiterhin wird ein Überblick auf die Geschichte des Interface Designs gegeben, wobei relevante Projekte im Detail diskutiert werden.

Aufgabe 1 – Interface

Die erste Aufgabe bestand darin, ein bestehendes Buch auf die Plattformen Tablett und Smartphone zu transferieren. Dabei sollen die Funktionalitäten der neuen Medien genutzt werden.

Das Buch unserer Wahl war Das Kosmos Wald und Forst Lexikon

Ein Lexikon ist im Gegensatz zu Romanen nicht chronologisch aufgebaut. Vielmehr versteht es sich als „Blätterwerk“. Der Nutzer soll schnellst möglich seinen gesuchten Begriff finden. Auf der anderen Seite läd ein analoges Buch dazu ein, darin zu stöbern und so neue Dinge zu entdecken. Diese zwei Funktionen sollten auch in die App des „Kosmos Naturlexikon“ einfließen. Es ist möglich, den Inhalt entweder zu durchforsten oder per Suche zu finden.

Gestaltet werden sollte eine Tablett und eine Smartphone Variante. Dabei sollen die Funktionen an das jeweilige Format angepasst werden.

Gruppenarbeit mit: Philipp Strixner-Weber

Konzeptskizzen

1-Suske_Strixner_XGA_1.jpg1-Suske_Strixner_XGA_1.jpg
2-Suske_Strixner_XGA_2.jpg2-Suske_Strixner_XGA_2.jpg
3-Suske_Strixner_XGA_3.jpg3-Suske_Strixner_XGA_3.jpg
4-Suske_Strixner_QVGA_1.jpg4-Suske_Strixner_QVGA_1.jpg
5-Suske_Strixner_QVGA_2.jpg5-Suske_Strixner_QVGA_2.jpg
6-Suske_Strixner_QVGA_3.jpg6-Suske_Strixner_QVGA_3.jpg

Rasteraufteilung

Ansicht des Spaltenrasters, des Grundlinienraster und des Dokumentenrasters.

Basic Interface Präsentation Strixner Suske03.pngBasic Interface Präsentation Strixner Suske03.png
Basic Interface Präsentation Strixner Suske04.pngBasic Interface Präsentation Strixner Suske04.png
Basic Interface Präsentation Strixner Suske05.pngBasic Interface Präsentation Strixner Suske05.png

Tablett Version

Basic Interface Präsentation Strixner Suske06.pngBasic Interface Präsentation Strixner Suske06.png
Basic Interface Präsentation Strixner Suske07.pngBasic Interface Präsentation Strixner Suske07.png
Basic Interface Präsentation Strixner Suske08.pngBasic Interface Präsentation Strixner Suske08.png
Basic Interface Präsentation Strixner Suske09.pngBasic Interface Präsentation Strixner Suske09.png
Basic Interface Präsentation Strixner Suske10.pngBasic Interface Präsentation Strixner Suske10.png
Basic Interface Präsentation Strixner Suske11.pngBasic Interface Präsentation Strixner Suske11.png
Basic Interface Präsentation Strixner Suske12.pngBasic Interface Präsentation Strixner Suske12.png
Basic Interface Präsentation Strixner Suske13.pngBasic Interface Präsentation Strixner Suske13.png
Basic Interface Präsentation Strixner Suske14.pngBasic Interface Präsentation Strixner Suske14.png
Basic Interface Präsentation Strixner Suske15.pngBasic Interface Präsentation Strixner Suske15.png
Basic Interface Präsentation Strixner Suske16.pngBasic Interface Präsentation Strixner Suske16.png
Basic Interface Präsentation Strixner Suske17.pngBasic Interface Präsentation Strixner Suske17.png
Basic Interface Präsentation Strixner Suske18.pngBasic Interface Präsentation Strixner Suske18.png
Basic Interface Präsentation Strixner Suske19.pngBasic Interface Präsentation Strixner Suske19.png

Smartphone Version

Basic Interface Präsentation Strixner Suske20.pngBasic Interface Präsentation Strixner Suske20.png
Basic Interface Präsentation Strixner Suske21.pngBasic Interface Präsentation Strixner Suske21.png
Basic Interface Präsentation Strixner Suske22.pngBasic Interface Präsentation Strixner Suske22.png
Basic Interface Präsentation Strixner Suske23.pngBasic Interface Präsentation Strixner Suske23.png
Basic Interface Präsentation Strixner Suske24.pngBasic Interface Präsentation Strixner Suske24.png
Basic Interface Präsentation Strixner Suske25.pngBasic Interface Präsentation Strixner Suske25.png
Basic Interface Präsentation Strixner Suske26.pngBasic Interface Präsentation Strixner Suske26.png
Basic Interface Präsentation Strixner Suske27.pngBasic Interface Präsentation Strixner Suske27.png
Basic Interface Präsentation Strixner Suske28.pngBasic Interface Präsentation Strixner Suske28.png

Aufgabe 2 – Brainstorm App

Wie kann man den Vorgang des Brainstormings mittels einer App unterstützen, ohne dabei den kreativen »Flow« zu verlangsamen oder gar zu unterbrechen?

Die App Freestyle ist für die Zielgruppe der Rapper, Rhymer, Freestyler und sonstige Sprachartisten gedacht. Der Reim- und Synonymfinder gibt Inspiration beim Entwerfen von Texten, im Freestyle Modus kann man sein Können testen und »My Collection« bietet eine Übersicht aller verfasster Texten und Reim-Wortlisten. So können Reime on-the-go gefunden, festgehalten und getestet werden. Freestyle bietet so das kleine, praktische tool für das Smartphone, dass jeden Reim-Artisten dort unterstützen kann wo er es braucht.

Screenshots

1.png1.png
2.png2.png
3.png3.png
4.png4.png
5.png5.png
6.png6.png
7.png7.png
8.png8.png
9.png9.png
10.png10.png
11.png11.png
12.png12.png
13.png13.png
14.png14.png
15.png15.png
16.png16.png
17.png17.png
19.png19.png
20.png20.png
21.png21.png

Flowchart

Flowchart2.pngFlowchart2.png

Aufgabe 3 – Klangvisualisierung

Wie sieht ein Klang eigentlich aus? Wie kann man Abstrakte Töne visuell darstellen?

Chinesisches Mandarin hat im Vergleich zu europäischen Sprachen eine ganz andere Klangmelodie. Der Kontext eines Wortes verändert sich, indem sich die Stimme am Ende des Wortes erhebt, senkt, in einem Bogen gesprochen wird etc. Es gibt viele verschiedene solcher Betonungsmöglichkeiten. Das macht es für uns Europäer schwer diese Sprache zu lernen und zu verstehen. Alleine das wiedergeben, oder nachsprechen einzelner Worte stellt sich als äusserst schwierig dar.

Auf dem Audiofile sind zwei Menschen zu hören die sich auf Mandarin unterhalten. Die Grafik visualisiert die Sprache auf zwei Ebenen: Die Sprache wurde so abgetippt das es auch für nicht chinesisch sprechende Menschen lesbar und aussprechbar ist, und darüber wurde die Sprachmelodie visualisiert. Diese Form einer Lautsprache macht es jedem Betrachter möglich, Chinesisch zu lesen und wiederzugeben.

Übersicht Klangbild

Suske_Klangbild.pdf PDF Suske_Klangbild.pdf

Klangvisualisierung 1.0-03.pngKlangvisualisierung 1.0-03.png
Klangvisualisierung 1.0_Zeichenfläche 5.pngKlangvisualisierung 1.0_Zeichenfläche 5.png

Aufgabe 4 – 1000 Worte

Ein Bild sagt mehr als tausend Worte. Ein komplexer Prozess soll anhand von Abbildungen, Grafiken etc. verständlich gemacht werden.

Ein Rubiks Cube ist ein mathematisches Rätsel. Der Spieler kann aus jeder möglichen Kombination des Würfels das Ziel erreichen, und das mit dem jeweils selben System. Es ist kein chronologisches System, sondern viel mehr eine Toolbox an Bewegungsabläufen die man je nach Situation anwendet. Diese Anleitung ermöglicht jedem Menschen einen Rubiks Cube zu lösen, auch wenn es mit Anleitung trotzdem noch eine Herrausforderung bleibt. Der Rekord hat sich übrigens mit der Zeit verbessert: 5,3 Sekunden!

Gruppenarbeit mit: [Miachael Schultz](https://incom.org/profil/5145 „Miachael Schultz“)

1000 Worte

Schultz_Suske Basic Interafce 1000 Worte.pdf PDF Schultz_Suske Basic Interafce 1000 Worte.pdf

Rubix_neu4-02.pngRubix_neu4-02.png
Rubix_neu4-03.pngRubix_neu4-03.png
Rubix_neu4-04.pngRubix_neu4-04.png

Fazit

Der Kurs hat mir viel Spaß bereitet. Ein guter Einstieg in das Thema Interface- und Screendesign. Auch die Vorträge von Boris Müller als auch seine Kritik zu den einzelnen Arbeiten sind für mich sehr fördernd in der Entwicklung von Ideen als auch in der Ausführung gewesen. Ich kann diesen Kurs jeden (angehenden) Designer ans Herz legen.

Ein Projekt von

Fachgruppe

Gestaltungsgrundlagen

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Prof. Boris Müller

Entstehungszeitraum

Sommersemester 2014