Interaction Design// Sketching & Just-Enough-Prototyping
Verknüpfung zwischen realer und digitaler Kommunikation: Interaktiver Service

Interface Design // Die digitalen Medien beeinflussen unsere Lebens- und Arbeitsräume grundlegend. Wir kommunizieren über elektronische Wege dank Mobiltelefon und Internet. Maschinen und Produkte werden über digitale und virtuelle Schnittstellen gesteuert. Medienfassaden und Interactive Bedienoberfl ächen übernehmen in weiten Teilen die Informationsvermittlung. Das stellt neue und hohe Ansprüche an Interface Designer, die neben dem klassischen zwei- und dreidimensionalen Design nun auch Prozessabläufe
zwischen Menschen und Maschinen gestalten und darstellen müssen.

Thema // In diesem Kurs werden anhand des aktuellen Themas „Digital
Private Information Tool“ Digitalisierung des privaten Handlungsraumes interaktiv sinnvoll zu bedienende und benutzbare Benutzeroberfl ächen außerhalb des Computers entwickelt. Produkt- und Interface Design wird hier für interaktive Arbeitsoberfl ächen aus der physischen und digitalen Welt kombiniert. Untersucht werden Verhalten und Eigenschaften physischer und digitaler Interfaces. Interface Konzepte, die plausible Visualisierung von dynamischen Informationen der persönlichen und auch vernetzen gemeinschaftlichen Kommunikation mit anderen Personen durch das Internet werden schrittweise entwickelt.

Ziel // Gesucht werden Szenarien, die eine sinnvolle Erweiterung persönlicher Aufgaben auf interaktiven Arbeitsoberfl ächen außerhalb des persönlichen Computers sind, wie dem interaktiv Table.

Kursinhalte // Konkret erhalten die Teilnehmer des Kurses Einblick in das Fachgebiet, in Interface Design Prozesse und Methodiken der Gestaltung. Wir arbeiten mit Entwürfen und spielerischen interaktiven Experimenten, ausgehend von den Methoden Sketching & Just-Enough-Prototyping, vom Video bis zum einfachen interaktiven Prototypen, über Ideensammlungen zu konzeptionellen Studien. Der Kurs ist in drei wöchentliche Einheiten gegliedert:

// Visualisierung von Informationen im privat geschützten Raum
// Gestalten von Interaktionen zwischen Objekten und Informationen
// Grundlagen zum Aufbau von interaktiven Installationen
// Design eines persönlichen Tools (Widget, Service)
= Videopräsentation der Entwürfe, Dokumentation und Plattform

Vermittelt wird technisches Know How für interactive Space:

// Hardware Installation des „Interactiv Table“
// Software Installation mit „Whiteboard“ von Johnny Lee/ HCI
// Videoprototyping mit iMovie/ Apple iLife 09
// Basic Coding mit Processing von Ben Fry and Casey Reas/ MIT
Das digitale Werkzeug, die Open-Source Entwicklungsumgebung Processing wird in einem Tutorial mit leicht zugänglichen Übungen in den Kurs eingebettet.

Den detaillierten Ablaufplan für den Kurs besprechen wir gemeinsam in den ersten Unterrichtsstunden.

专业：视觉传达
任课教师：Steffi Hußlein 教授

真实与数字交流之间的结合：数字个人信息工具 ─ 交互服务

界面设计
数字媒体对我们的生活空间和工作空间产生着根本性的影响。多亏有了移动电话和因特网，我们能够通过“电子路径”进行交流；通过数字和虚拟的控制台，机器和产品可以被操控；媒体幕墙和可互动的操作面板广泛地进行信息传播。这就对界面设计师提出了新的高要求──他们要在从事传统的二维和三维设计之余，对人机之间的(互动)流程进行设计与表现。

主题
本课程根据主题“ 数字个人信息工具”，要求学生将个人的行为空间数字化，并在电脑以外设计能产生有意义的互动的用户操作面板。这里的互动工作面板是产品设计和界面设计、物质世界和数字世界的结合。本课程要求学生研究物质界面和数字界面的形态和特性。界面方案，即对个人及与他人共同交流联系的动态信息的有信服力的视觉化呈现，将通过因特网逐步发展起来。

目标
寻找如下场景：在个人电脑以外的互动工作面板上有意义地拓宽个人的任务，如同interactiv Table。

内容
本课程的参与者将获得界面设计专业领域设计过程和设计方法论的认知。我们以游戏式的互动实验进行设计工作，出发点是Sketching & Just-Enough-Prototyping方法，从视频到简单的互动装置模型，从收集想法到方案研究。本课程在三周时间里构成如下单元：
─ 个人空间的信息视觉化；
─ 物体与信息之间的交互设计；
─ 互动装置构建基础；
─ 设计一个个人工具(小装置，服务) 。
结果：设计、文档和(网络)平台的视频展示。
对互动空间技能的传授包括：

─ 硬件“Interactiv Table”的安装；
─ 软件“ Whiteboard“ (Johnny Lee/ HCI)的安装；
─ 用iMovie/Apple iLife 09制作视频模型；
─ 用Processing (Ben Fry & Casey Reas / 麻省理工学院)编写基础计算机代码。
开放源代码数字工具Processing在本课程中将通过简单的练习进行辅导。

我们将在第一次课上一起讨论详细的课程安排。

Die chinesisch deutsche Kunstakademie ist ein Gemeinschaftsunternehmen der Universität der Künste Berlin UdK und der chinesischen Kunstakademie CAA. Seit 2003 betreiben beide Institutionen gemeinsam die chinesisch deutsche Kunstakademie CdK mit dem Ziel einen Master Studiengng im bereich der Gestaltung, der Architektur und der Kunst im internationalen Kontext zu etablieren. Im Bereich Bildende Kunst werden die Fachrichtungen Malerei, Bildhauerei und Neue Medien und im Bereich Gestaltung die Fachrichtungen Architektur, Industrial Design und Visuelle Kommunikation angeboten. Das Studium dauert fünf Semester. Bestandteil des Studiums ist ein dreimonatiger Studienaufenthalt in Deutschland.

Die Universität der Künste (UdK) ist verantwortlich für die Entwicklung und Vermittlung von künstlerisch-wissenschaftlichen Lehrstoffen und Lehrmethoden. Damit wird der Nachfrage in China nach einem Kunststudium mit Bezügen zur deutschen Kunst und Kultur entsprochen.

Ohne die intesive Zusammenarbeit mit Mr. Wang als fachspezifischer Übersetzer für Visuelle Kommunikation hätten die Inhalte der Lehre nicht in die andere Sprache sowie in den kulturellen Kontext überführt werden können.

	Gong Long Yu
	Xu Jingzhe
	Cheng Zhe
	Zhang Wei
	Huang Yaoyao
	Liang Guanbo
	Zheng Qing
	Zhu Wen
	Ai Weiwei
	Zhang Liqun
	Zheng He
	Feng Jing
	Ye Qiaomin
	Wang Dandan

1) Was kann mein Gegenstand?
2) Welche Funktionen kann der Gegenstand machen?
3) Welche Interaktionen können ausgeführt werden?
4) Welche Handlungen kann der Benutzer ausführen?
5) Welcher menschliche Sinn wird angesprochen?
////////////////////////////
6) Welche Assoziationen hat der Gegenstand in der Digitalen Welt?
7) Analyse: Wie werden reale Produkte und dessen Handlungsräume in der digitalen Welt in ihrer Bedeutung aufgeschlüsselt?
8*) Finde Metaphern (Übertragungen) für Informationen des realen Produktes!
9) Was können reale Produkte in der digitalen Darstellung simulieren?
10)Wie können Funktionen aus Produkten in die digitale Welt übertragen werden?
11) Wie kann der Benutzer diese Informationen lesen und aufrufen? Wie finden die Interaktionen statt? Wir wollen Metaobjekte identifizieren. Zugänge zu Informationsstrukturen deutlich darstellen. Interaktionen durchführen.
////////////////////////////
12) Wie finden die Interaktionen statt?
13) Wir wollen Metaobjekte identifizieren.
14) Zugänge zu Informationsstrukturen deutlich darstellen. Interaktionen durchführen.
15) Die Ideen und Konzepte darstellen
16) Ein Szenario erstellen / Videoprototyp.
////////////////////////////
Erstellen Sie ein schlüssiges Konzept.
01) Titel der Arbeit
02) Einführung: Abstract und These 03) Brainstorming
04) Idee
05) Kommunikationskonzept: Beschreibung des Szenarios, Darstellung des Szenarios, Zielgruppe, Vorteile
06) Navigationskonzept: Interaktionsformate, Funktion und Handlung, Interpretation, etc.
07) Strukturplan für die Funktionen
08) Interaktionsformate
09) Storyboard für den Videoprototypen
10) Entwürfe und Variationen
11) Technische Umsetzung: Skizzen des Installationsaufbau, Technische Implementierung: WiiFlash Server, Whiteboard, ActionScript3 und Installation
12) Design
13) Interaktive Prototypen
14) Videoprototyp

数字个人空间 // 个人工具设计

Widget, 服务数字模拟和物质性装置
要挖掘新技术的巨大潜能，只有将物件或系统的整体功能通过界面有意义地表现出来并使其可被使用。

1) 我的物件能做什么？
2) 该物件有哪些功能？
3) 该物件能产生哪些交互？
4) 用户会有哪些行为？
5) 附合哪些人类的感官？
////////////////////////////
6) 该物件在数字世界里有哪些联想？
7) 分析：真实的物件与其行为空间在数字世界里如何从意义上被解码？
8*) 寻找真实物件的信息的转喻！
9) 真实物件在数字化的表现中能模拟什么？
10) 物件的功能在数字世界中如何转化？
11) 用户如何阅读和调出信息？
////////////////////////////
12) 交互如何形成？
13) 我们要识别转化物。
14) 清晰表现信息结构的路径，执行交互。
15) 表现想法和方案。
16) 制作一个场景 / 视频草模。

////////////////////////////

构成一个合乎逻辑的方案
01) 作业的标题
02) 引言：摘要和提纲
03) 头脑风暴
04) 想法
05) 交流方案：场景表述，场景表现，目标受众，优点
06) 导向方案：交互形式，功能和行为，诠释，等等
07) 功能的结构计划
08) 交互形式
09) 视频草模的分镜头剧本
10) (初步)设计和变化
11) 技术性实现：草图和构建装置，技术实践与计算机相关：Whiteboard, Processing和装置
12) 设计
13) 交互草模
14) 视频草模

Projektdokumentation als PDF

Abschlusspräsentation

Zhang Wei // Feng Jing
Interaktive Wasserkanne

Projektdokumentation als PDF

Abschlusspräsentation

Zhu Wen // Zheng Qing
Interaktiver Stempel

Projektdokumentation als PDF

Abschlusspräsentation

Ai Weiwei // Ye Qiaomin
Zeit der Erinnerung

Projektdokumentation als PDF

Abschlusspräsentation

Wang Dandan // Gong Long Yu
Interaktiver Radiergummi

Projektdokumentation als PDF

Abschlusspräsentation

Xu Jingzhe // Cheng Zhe
1080 Grad

Projektdokumentation als PDF

Abschlusspräsentation

Huang Yaoyao // Liang Guanbo
Interaktiver Spiegel

Projektdokumentation als PDF

Abschlusspräsentation

1) Zuerst analysieren wir Photoshop und Word. Untersucht werden Verhalten und Eigenschaften physischer und digitaler Interfaces. Parallel hierzu wird der Fokus auf Verhalten und Handlungen des Nutzers gerichtet. Aufgabe: Bitte erstellen Sie Photos mit jeweils zwei Szenarien.

In- and Output physikalischer Gegenstände
1. Was für eine Aktion führt der Benutzer aus?
2. Die digitale interaktive Funktion
3. Die analoge Handlungsausführung der Interaktion
Beim In-Output digitaler Applikationen werden Funktionen aus der realen Welt abstrakt in die digitale zweidimensionale Ebene dargestellt. Mit Hilfe von analogen Prozessen sollen 2 Funktionen dargestellt werden. Der In- Output physikalischer Gegenstände soll nachvollzogen werden.

Möglichkeiten von Handlungen, die in Interaktionen umgesetzt werden:
suchen, wählen, auswählen, anzeigen, mixen, rühren, drehen, kreuzen, aufbewahren, trocknen, kochen, kühlen, abspielen, laufen, heizen, brennen, Signal anzeigen, klingeln, klopfen, etc.

2)
In- and Output physikalischer Gegenstände
Welche Handlungsschritte werden beim Bedienen der Software ausgeführt?
Erstellen Sie eine Serie von Filmsequenzen mit 5-8 Interaktionen (Ein- und Ausgabe), der Prozesskette Ihres Szenarios: Fotografieren Sie die Zustände „Ausgangssituation, an, aus, Ergebnis“ der Interaktion ab. Erstellen Sie eine Prozesskette der Interaktionen der aufeinander folgenden Handlungen des Nutzers. Zustände mit physischen Gegenständen, beispielhaft aus der Küche, dem Wohnzimmer, dem öffentlichen Raum mit den Funktionen, die das Medium der Erinnerungen beinhalten soll. (Beispielhaft: Ein Mixer kann mixen. Er kann Materialien zerkleinern und gleichzeitig vermengen. Feste Masse wird flüssig => Metapher für Daten aus der digitalen Welt: Die Daten werden pixelgenau zerkleinert und beliebig vermengt. Danach werden wir gemeinsam prüfen, ob die Handhabung (Aktion des Nutzers), die physikalische und digitale Interaktion passend zusammen gesetzt werden können.

输入和输出，调控和操作

首先，我们要分析Photoshop, 研究物质和数字界面的关系和特性。同时对用户的举动和行为进行聚焦。
作业：用照片的形式记录两个场景。

(物质性)物件的输入和输出
1. 用户的动作是什么？
2. 数字交互功能。
3. 交互的物质行为方式。

在“输入-输出”数字应用的同时，真实世界的功能在数字二维层面将被抽象地表现出来。通过物质过程的帮助表现两个功能。(物质性)物件的输入和输出应能联系起来。

在交互中实现的行为的可能性：
寻找、选择、挑选、指示、混合、触动、转动、交叉、保存、干燥、烹饪、播放、跑动、加热、燃烧、发出信号、按铃、敲击，等等。

Zhang Wei / Feng Jing // Sperren / Gruppieren // PDF

Zhu Wen / Zhen Quing // PDF

Ai Wei Wei / Ye Qiaomin // … / Messen // PDF

Gong Longyu / Wang Dandan // Freistellen / Struktur // PDF

Cheng Zhe / Xu Jingzhe // Rotieren / Farbton/Sättigung // PDF

Liang Guanbo / Huang Yaoyao // … / … //PDF

Me In My Bag
Prof. Steffi Hußlein

1. Was ist Interface oder Interaction Design?
Bitte digitalisieren/verschriftlichen Sie Ihre Ansicht/ Beschreibung über
Interface oder Interaction Design. Als PDF/ InDesign speichern.

2. Eine Tasche ist ein Behältnis zum Transportieren von persönlichen, immer gegenwärtigen Gegenständen. Die Tasche ist im übergeordneten Sinn ein täglicher Speicherort für persönliche Utensilien oder mitgenommene Gegenstände. Das Spannungsfeld der grafischen Repräsentation von Informationen mit physikalischen Zuständen oder Vorgängen verknüpft. Frage: Ist meine Tasche ein Interface? Welche Dinge, Produkte oder unscheinbare Notizen trage ich in meiner Tasche mit mir?

Fotografieren:
Bitte fotografieren Sie Ihre ausgeschüttete Tasche ab. Kennzeichnen Sie wichtige Gegenstände, Symbole oder mitgeführte Informationen.
Inhalt: Welche Tätigkeite werden mit den Gegenständen ausgeführt? Welche Informationen stecken in den Gegenständen?

Informationsgrafik:
Bitte stellen Sie eine Informationsgrafik
Icons sind erwünscht. Es soll für mich verständlich sein, welche Informationen der Träger beinhaltet.

Dokumentation:
Bitte dokumentieren Sie den Zustand und Inhalt Ihrer oder der Tasche Ihres Nachbarn.
Formblatt: Name, Alter, Nationalität, Inhalt der Tasche, Aufzählung von min. 5 Gegenständen. Welche Informationen oder Funktionen stecken hinter dem Gegenstand? Wofür? Warum? Interpretationen! PDF-Abgabe/ InDesign.

* Interfaces zum Aufbewahren, archivieren, sammeln von Dingen, anzeigen von Daten, abrufen von Daten, Oerbinden von Objekten etc.

Zhang Wei / Feng Jing // PDF

Zhu Wen / Zhen Quing // PDF

Ai Wei Wei / Ye Qiaomin // PDF

Gong Longyu / Wang Dandan // PDF

Cheng Zhe / Xu Jingzhe // PDF

Liang Guanbo / Huang Yaoyao // PDF

Was gehört zu einer Entwicklung esines Videoprototyps dazu?

Szenario in ca.10 Sätzen beschreiben Ideen skizzieren Konzept darstellen Stoaryboard Video präsentieren
Erstes Beispiel: Paperprototyping für eine Anwendung am Interaktiv Table und dem Mobile/Handy
Studentin// Anja Novak, Masterkurs Interface Design 2009, am Bauhaus Dessau
fiducals

Zweites Beispiel: Szenarion Prototyping für eine Anwendung am Interaktiv Table

Links: www.vimeo.com. www.youtube.com

Gestaltungsparameter
1) Menge
2) Grösse
3) Farbe
4) Struktur
5) Kontrast
6) Proportionen
7) Perspektive
8*) Hintergrund/ Vordergrund
9) Länge
10) Abstand
11) Strichstärke
12) Linie/ Fläche

Die Navigation:
Die Hauptnavigation (schwarzer Riegel) speist sich aus den BlogKategorien, die angelegt sind. Es werden allerdings nur die Kategorien angezeigt, die auch mit Artikeln gefüllt sind. Ich habe die einzelnen Kategorien, die du mir geschickt hast schon vorbereitet ( ci, logo, naming,…) Es müssen quasi nur noch die Artikel erstellt werden, also die Studis müssen nur noch einen Artikel zur entsprechenden Kategorie erstellen und diesen dann zur Kategorie zuordnen – beim speichern.

Die Artikel
die einzelnen Artikel können mit PreviewBildern versehen werden (310×150px) – die dann immer überhalb des Titels sichtbar sind. Die sind sehr zu empfehlen, da die Seite dadurch sehr lebendig wird. und für die Kategorie Logo ist das sicherlich auch sehr spannend. Ich habe kurz zusammengefasst, wie das funktioniert in dem Artikel : ANLEITUNG – BILDER!+MULTIMEDIA. in der Kategorie Webdesign…. hehe. Es sind auch sehr viele BeispielEinträge im Blog, von denen man abgucken kann.

Die Seiten
Ich habe noch versucht die Pages in die Navigation zu integrieren, was mit zwar technisch gelungen ist, ich das CSS nur nicht dazu bekomme, die Elemente auch anzusprechen – kurzum das sah scheisse aus. Daher würde ich vorschlagen die allgemeinen Inhalte zur Kategorie auch als Artikel zu verfassen und am Ende unter dem aktuellstem Datum abzuspeichern. (Alle Artikel werden chronologisch geordnete, d.h. der Artikel zur Beschreibung wäre dann der Erste) – sorry, das ich da nichts besseres bieten kann, mir fehlt ein bischen die Zeit für ne Recherche deswegen. Ich hoffe das geht so.

Logo+ Artwork
Das Logo hab ich dir noch angehangen als .ai. Alle Bildelemente die vom Blog benutzt werden, sind auch auf dem Webspace, also wenn irgendetwas geändert werden muss, dann reicht es die Datei auf dem Server einfach zu überscheiben – dafür am Besten FileZilla nehmen, das mach keinen Mist.

CSS
Das CSS ist unterteilt in die verschiedenen Funktionsbereiche.sehr übersichtlich. Wenn noch etwas geändert werden muss, dann geht das am Besten, in dem man nur den betreffenden CodeTeil (also Header,…) in das Super Programm TopStyleLite > http://topstyle.en.softonic.com/ > einfügt – da sieht man die Änderung gleich live, super.

Navigation Admin
Die Navigation und essentielle Funktionen befinden sich in der header.php – ich habe dort alle Funktionsweisen hinterlegt und auskommentiert, falls ihr doch noch was freischalten wollt. auskommentierte Tag sehen so aus.