-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathprojekt-2020.html
202 lines (178 loc) · 10.5 KB
/
projekt-2020.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
---
layout: projekt
result-snippet: false
hero: assets/images/projekt-2020-hero.jpg
title: Projekt 2020
subtitle: Funktionserweiterung «Bilder vergleichen»
---
<section class="section">
<div class="container">
<div class="content is-medium has-seperator">
<p>Das diesjährige Projekt dreht sich um das <a href="http://lucascranach.org/index.php">Cranach Digital Archive
(CDA)</a>,
eine Initiative der Stiftung Museum Kunstpalast, Düsseldorf und der Technischen Hochschule Köln in
Zusammenarbeit mit über 270 Museen, Forschungseinrichtungen und Kirchgemeinden in 30 Ländern, gefördert durch
die Andrew W. Mellon Foundation.</p>
<p>Im Oktober 2009 begannen acht große Museen in Europa und den USA gemeinsam mit dem Museum Kunstpalast in
Düsseldorf und der Technischen Hochschule Köln ein Forschungsprojekt zur digitalen Erschließung der Gemälde
eines der bedeutendsten Maler der deutschen Renaissance: Lucas Cranach der Ältere. Gefördert wird das Projekt
von der Andrew W. Mellon Foundation als Teil einer größeren Initiative, deren Ziel es ist, eine
internetbasierte Infrastruktur für den Austausch und die Vermittlung neuer kunsthistorischer, technologischer
und naturwissenschaftlicher Forschungsergebnisse zu entwickeln, welche die Grenzen von Institutionen und
internationalen Grenzen überschreitet. Der umfangreiche Fundus an Bild- und Textinformationen soll der
Öffentlichkeit ein tieferes Verständnis der Kunst Lucas Cranachs ermöglichen und die Forscher künftig dabei
unterstützen, u. a. Fragen zu Zuschreibung und Werkstattorganisation zu beantworten.</p>
</div>
<div class="js-video widescreen">
<iframe width="1280" height="700" src="https://www.youtube.com/embed/eDvCuqXlmjw" frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="content">
<h2>Cranach Bildvergleich</h2>
<p>
Im Rahmen des Screendesign Projekts soll ein Gestaltungs- und Interktionskonzept für die Funktionserweiterung «Bilder vergleichen» entwickelt werden. Hierbei kann der Nutzer zwei oder mehrere Bilder miteinander vergleichen. Die Funktionserweiterung richtet sich an Experten. Orientieren Sie sich dabei an folgendem, groben User Flow.
</p>
<h3>#01 Bilder sammeln</h3>
<p>
Im ersten Schritt muss es Nutzern möglich sein Bilder zu merken oder zu sammeln, um sie später vergleichen zu können. Hierbei geht es um konkrete Bilder zu einem Werk, z.B. eine Gesamtaufnahme, eine Detailaufnahme oder eine Infrarotreflektographie.
</p>
<h3>#02 Bilder vergleichen</h3>
<p>
Im nächsten Schritt muss es dem Nutzer möglich sein, zwei der gemerkten Bilder zu vergleichen. Hier könnten einige Funktionen hilfreich sein, z.B. vergleichen von Stapeln, gleichzeitiges Zoomen, gleichzeitiges Panning, Ausschnitte wählen und vergleichen etc. Welche Funktionen hier interessant und wichtig sind, müssen Sie erarbeiten.
</p>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="content is-medium">
<div class="box">
<div class="columns">
<div class="column is-one-third">
<h2>Screendesign<br>Projektaufgabe</h2>
</div>
<div class="column">
<p>
Entwickeln Sie ein Gestaltungs- und Interktionskonzept für die Funktionserweiterung «Bilder vergleichen». Analysieren Sie das bestehende Design des Grafikbereichs und bauen Sie Ihre Erweiterung darauf auf. Berücksichtigen Sie die funktionalen und kommunikativen Ziele. Die Erweiterung muss für größere Touchdevices (z.B. Tablets) und WIMP-fähige Computer funktionieren.
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="content has-seperator">
<h2>Funktionen & erforderliche Screens</h2>
<p>Welche Screens sind zu gestalten, welche Aufgabe haben sie und welche Funktionen enthalten sie?</p>
<table class="table">
<thead>
<tr>
<th width="33%">Funktionsgruppe/ Screen</th>
<th>Funktion/ Erläuterung</th>
</tr>
</thead>
<tbody>
<tr>
<td>Bilder sammeln</td>
<td>
<strong>Hinzufügen & Entfernen: </strong> Es muss die Möglichkeit bestehen, einzelne Bilder zu einer Sammlung hinzufügen und entfernen zu können.
<hr>
<strong>Sammlung anzeigen: </strong> Es muss die Möglichkeit bestehen, sich alle gesammelten Bilder in einer Übersicht anzeigen zu lassen.
<hr>
<strong>Indikation: </strong> Überall, wo Bilder angezeigt werden, muss erkennbar sein, ob dieses Bild bereits Teil der Sammlung ist oder nicht.
<hr>
<strong>Sortierung: </strong> Eventuell sollten Bilder in der Sammlung sortiert werden können.
</td>
</tr>
<tr>
<td>Bilder vergleichen</td>
<td>
<strong>Bildauswahl: </strong>Sollte die Sammlung mehr als zwei Bilder enthalten, muss die Möglichkeit zur Auswahl von zwei Bildern gegeben werden, die dann schlussendlich verglichen werden.
<hr>
<strong>Vergleich starten und beenden: </strong>Der Vergleich muss gestartet und beendet werden können. Für die Vergleich sollte möglichst viel Fläche zur Verfügung gestellt werden.
<hr>
<strong>Aufteilung ändern (opt): </strong>Für bestimmte Use Cases könnte es hilfreich sein die Aufteilung der Darstellungsfläche zu ändern, so dass z.B. einem Bild mehr Platz zur Verfügung gestellt wird, als dem anderen.
<hr>
<strong>Lock Zoom (opt): </strong>Für bestimmte Use Cases könnte es hilfreich sein den Zoom für beide Bilder zu verriegeln, so dass dann in beide Bilder synchron gezoomt werden kann.
<hr>
<strong>Lock Panning (opt): </strong>Für bestimmte Use Cases könnte es hilfreich sein das Panning für beide Bilder zu verriegeln, so dass dann beide Bilder synchron verschoben werden können.
<hr>
<strong>Multi Compare (opt): </strong>Für bestimmte Use Cases könnte es hilfreich sein mehr als nur zwei Bilder vergleichen zu können.
<hr>
<strong>Stacks (opt): </strong>Für bestimmte Use Cases könnte es hilfreich sein ein Bild mit vielen anderen zu vergleichen. Die anderen Bilder könnten auf eine Art Stapel gelegt werden und dann kann in dem Stapel navigiert werden.
<hr>
<strong>Ausschnitte vergleichen (opt): </strong>Für bestimmte Use Cases könnte es hilfreich sein Ausschnitte aus den Bilder zu wählen und diese vergleichen zu können.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</section>
<section class="section ">
<div class="container">
<div class="content has-seperator">
<h2 class="title">Zahlen & Fakten</h2>
<p>Die wesentlichen Informationen rund um die Funktionserweiterung.</p>
<table class="table">
<tbody>
<tr>
<th width="33%">Anwendung</th>
<td>Funktionserweiterung «Bilder vergleichen»</td>
</tr>
<tr>
<th>unterstütze Geräte</th>
<td>Touchdevices ab 9"<br>WIMP Geräte</td>
</tr>
<tr>
<th>Zielgruppe</th>
<td>Experten</td>
</tr>
<tr>
<th>Aktueller Prototyp</th>
<td>
<ul>
<li><a href="https://lucascranach.org/graphics/de/">lucascranach.org: Übersichtsseite</a></li>
<li><a href="https://lucascranach.org/graphics/de/GWN_LC_HVI-107_132">lucascranach.org: Detailseite</a></li>
</ul>
(Zugangsdaten befinden sich im Ilias) <br>
Als Grundlage für den Prototyp kann diese <a href="https://www.figma.com/file/pUhy5emhMJ360xIOkqDYLO/Basis-f%C3%BCr-Screendesign?node-id=280%3A159" title="Screendesign Basis Projekt WS 2020/21">Figma-Datei</a> verwendet werden.</td>
</tr>
<tr>
<th>Kommunikationsziele/ Leitplanken</th>
<td>Das Cranach Digital Archive ist professionell, klar, möglichst einfach, reduziert, akzentuiert und zeitlos. Einige Gestaltungslemente sind bereits definiert. Alle Schriftgrößen und Abstände folgen der <a href="https://en.wikipedia.org/wiki/Renard_series">Renard 10 Serie</a>. Das Farbschema kann auch invertiert werden, sprich: weiße Schrift auf dunklem Grund.</td>
</tr>
</tbody>
</table>
<div class="js-video">
<iframe style="border: none;" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FedZxrUWHFScWr3jQhmGAxy%2FBase-v2-Copy%3Fnode-id%3D0%253A1" allowfullscreen></iframe>
</div>
<div class="js-video">
<iframe style="border: none;" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FpUhy5emhMJ360xIOkqDYLO%2FBasis-f%25C3%25BCr-Screendesign%3Fnode-id%3D527%253A4184" allowfullscreen></iframe>
</div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="content">
<h2>Deliverables, Projektteam & Prüfung</h2>
<p>
Die Arbeit erfolgt in 2er Teams. Im Rahmen des Screendesign Projekts müssen folgende Deliverables via Übergabepunkt abgegeben werden: Designkonzept als Mockup, Patternlab/Styleguide und Kurzdokumentation. Weitere Informationen dazu, auch zur Bewertung, finden Sie unter <a href="/mi-bachelor-screendesign/niveaustufen/">Niveaustufen und Deliverables</a>.
</p>
<p>
Die Prüfung findet in Form einer Projektpräsentationsprüfung statt. Zur Prüfung müssen Sie sich im
PSSO anmelden <strong>und</strong> einen Termin im Ilias buchen. Die Bewertung erfolgt mit Hilfe der <a
href="/mi-bachelor-screendesign/niveaustufen/">Niveaustufen</a>.
Dies sollten Sie sich unbedingt zur Projektlaufzeit und vor der Prüfung anschauen, um zu wissen, was erwartet
wird und ihre Arbeit entsprechend ausrichten. Hier finden Sie weitere <a href="/mi-bachelor-screendesign/projektpraesentationspruefung/">Informationen zur Projektpräsentationsprüfung</a>.
</p>
</div>
</div>
</section>