Findungsphase Berlin, 9. Mai 2009
Inhalt 1.0 Allgemeines 3 1.1 Einleitung 3 1.2 Namensgebung 4 2.0 Rebranding 5 2.1 Logo 5 2.2 Farbgebung 8 3.0 Struktur 9 3.1 Sitemap 9 3.2 Wireframes 11 4.0 Visualisierung 15 4.1 Karten 15 4.2 Timeline 16 4.3 Skizzen 17 2
1.0 Allgemeines 1.1 Einleitung Einleitung Dieses Dokument enthält die Ergebnisse der Findungsphase zur Neugestaltung des Webauftritts 20jahremauerfall.de der Gedenkstätte Berliner Mauer in der Bernauer Strasse. Alle hier dargestellen Inhalte sind als Diskussionsgrundlage zu verstehen und bedürfen der Einstimmung durch den Auftraggeber. 3
1.0 Allgemeines 1.2 Namensgebung Namensgebung Die gegenwärtige URL der Website der Gedenkstätte ist: 20jahremauerfall.net Diese Bezeichnung ist zum einen zeitlich auf ein besonderes Jubiläum begrenzt in diesem Fall auf den zwanzigsten Jahrestag des Falls der Berliner Mauer 1989 zum anderen dem offiziellen Logo der Stadt Berlin anläßlich des Mauerfall- Jubiläums zu ähnlich. Die zeitliche Bezugnahme bedeutet, dass Anfang 2010 die Web-Adresse an Attraktivität und Aktualität verlieren könnte. Zudem wollen wir eine bewußtere Trennung der beiden Informations- Angebote anstreben, um die Ressourcen der Gedenkstätte Berliner Mauer stärker zu exponieren. Wir haben aus diesem Grund nach alternativen Web-Adressen gesucht die einerseits noch verfügbar sind und andererseits den langzeitigen Wert der Site als Informationsplattform in Bezug auf die Berliner Mauer und deren Geschichte garantieren können. Obwohl sie sich visuall stark unterscheiden, sind die Schriftzüge der Gedenkstätten-Site und das offizielle Logo der Stadt Berlin anlässlich des Mauerfall-Jubiläums inhaltlich identisch und sorgen so für unnötige Verwirrung. Zudem beziehen sich beide auf einen zeitlich begrenzten Event. Im Falle des offiziellen Logos spielt der 20 Jahre Mauerfall Claim die Rolle einer Sub-Brand, d.h. einer temporären Marke der Stadt Berlin, die nach dem Ende des Jubiläumsjahres einfach nicht mehr veröffentlicht wird. Im Falle der Gedenkstätte handelt es sich allerdings um einen Informations-Auftritt, der auch nach Ablauf des Jubiläums noch Bestand haben soll. berliner-mauer-dokumentation.de dokumention-berliner-mauer.de mauergeschichte.de / com / info / net / org mauerdoku.de / com / info / net / org wallofberlin.info theberlinwall.info berlinbarrier.de / com / net / info / org westeastberlin.de / com / net / info / org mauer-en.de maueren.de Die Helligkeit der hier dargestellten verfügbaren Web-Adressen bezieht sich auf die tatsächliche Relevanz für den neuen Webauftritt der Gedenkstätte. berliner-mauer-dokumentation.de ist am nächsten an der Web- Adresse der Gedenkstätte (berliner-mauer-dokumentationszentrum.de) und wird daher von uns favorisiert. 4
2.0 Rebranding 2.1 Logo Logo Ein Logo oder Logotype steht in der Regel für den zentralen Charakter eines Unternehmens, einer Institution oder eines Services von dem aus abwärts die Charakteristika aller weiteren Kommunikationsmittel dekliniert werden sollten. Daher sollte das Logo eine gewisse Aussagekraft besitzen, da es meist den ersten (und oft bleibenden) Eindruck hinterlässt. Die zentrale Rolle des Webauftritts der Gedenkstätte Berliner Mauer liegt in der Information und Wissensübermittlung. Diese eher sachlichen als emotionalen Aspekte sollten sich im Logotype wiederspiegeln. Gleichzeitig sollte das Logo allerdings eine gewisse zielgruppengerechte Modernität besitzen. Allen Entwürfen zur Grundlage liegt die Mauer als sowohl tatsächliches, als auch symbolisches Element der Teilung. Wie bei der Stadt Berlin durch die Jahre der Mauer wird auch die Integrität der Typographie hier durch einen mehr oder weniger stark ausgeprägten Schnitt gebrochen. ANSATZ 01 berliner mauer DOKUMENTATION Bei der Wahl der Schriftarten lagen Sachlichkeit, Glaubwürdigkeit und eine gewisse Ernsthaftigkeit als Aussagewerte im Vordergrund ( Dokumenation ). Desweiteren spielten Überlegungen hinsichtlich der Lesbarkeit (auch bei kleiner Logo-Darstellung) eine Rolle. BERLINER DOKUMENTATION BERLINER DOKUMENTATION MAUER 20 JAHRE MAUERFALL MAUER 20 JAHRE MAUERFALL Die Texte der Hauptnavigation sind allesamt als Bitmaps definiert und verwenden den fetten Schnitt der Syntax, der Haus-Schrift von Schott. 5
2.0 Rebranding 2.1 Logo Logo Die alte Namensgebung könnte teilweise beibehalten werden, wenn ein modulares System implementiert wird, dass es erlaubt bestimmte Ereignisse (wie Jubiläen oder Jahrestage) als Specials in das grafische System zu integrieren. Der Vorteil eines solchen System wäre es, zeitlich begrenzte Aspekte zu integrieren, ohne die Gesamtheit des Auftritts zu kompromittieren. Es gäbe bei diesem Ansatz eine Dachmarke (berliner-mauer-dokumentation) mit verschiedenen, austauschbaren Untermarken. Ein Ansatz, der ein modulares System aufbaut, dessen Einzelbestandteile je nach Bedarf oder Anforderung geändert oder kombiniert werden könnten. Die Form der einzelnen Felder soll an Kalender-Blätter erinnern 20 Jahre Mauerfall berliner mauer dokumentation 20 Jahre Mauerfall berliner mauer DOKUMENTATION 20 Jahre Mauerfall Ein Ansatz, der noch die ältere Namensgebung berücksichtigt, allerdings auch mit der neuen funktionieren würde 20JAHREMAUERFALL GEDENKSTÄTTE BERNAUER//STRASSE 6
2.0 Rebranding 2.1 Logo Logo Logotypen erscheinen potenziell auf einer Vielzahl von verschiedene Anwendungen: Websites, Briefbogen, Faxe, Broschüre, Handouts usw. Daher ist stets darauf zu achten, dass der favorisierte Logotyp sowohl einfarbig als auch auf verschiedenen Hintergründen anwendbar ist. Dieser Entwurf verwendet ein Symbol (anstatt der Typographie selbst) um die Teilung in zwei gleiche Einheiten zu symbolisieren. Es wird außerdem visualisiert, wie das Logo auf verschiedenen (hellen und dunklen) Hintergründen funktionieren könnte. Dieser Entwurf ist der am meisten verbildlichte: er symbolisiert die charakteristische Leerfläche zwischen den beiden Teilen der Stadt, die durch den Grenzstreifen entstand und macht diese Leerfläche den eigentlichen Gegenstand der Untersuchung (Dokumentation). 7
Neugestaltung Website 20jahremauerfall.net 2.0 Rebranding 2.2 Farbgebung Farbgebung Grundsätzlich sollte eine dokumentations-lastige Website allerdings farblich zurückhaltend auftreten, d.h. eine Auszeichnungsfarbe (für Links und Hilights besitzen) Die Farbstudien für die Neugestaltung des Webauftritts sind äußerst vorläufig und sind weitgehend abhängig von den grafischen Anteilen der späteren Seiten (Textmenge, Fotos, Farbflächen). TYPO Bei den ersten beiden Schemata gilt Weiss jeweils als Hintergrundfarbe, Schwarz als Textauszeichnung und die dritte Farbe als Hervorhebungselement. Schwarz-Weiss-Rot hat einen hohen Auffälligkeitscharakter (man denke an Boulevard-Zeitungen) kann allerdings gerade bei einem historisch sensiblen Thema wie dem hier zu Grunde liegenden problematisch werden. Schwarz-Weiss-Blau hat nicht die historischen Konnotationen, wirkt allerdings weniger nachhaltig. Gotham Bold Gotham Reg Gotham Light FARBWELT Dieses Schema schlägt eine Farbkodierung vor, bei dem jede inhaltliche Einheit einer bestimmten Farbe zugewießen wird, die wiederrum eine bestimmte Bedeutung hat. Eine solche Herangehensweise ist moderner, läuft allerdings Gefahr zu unübersichtlich und zu bunt zu geraten. 8 Die Farbwelt
3.0 Struktur 3.1 Sitemap Sitemap Bevor wir den Vorschlag für eine neue Sitemap erstellten, kam ein sogenannter Paper-Prototype zum Einsatz. Hierbei werden einzelne Bereiche der Site auf Kartei-Karten oder Blätter geschrieben, die dann schnell verschoben werden können und einen raschen Überblick über die möglichen Kombinationen und An- ordnungen innerhalb der Site-Hierarchie ergeben. Das Ergebnis dieser Untersuchung ein Vorschlag für die Neustrukturierung der Site ist auf der nächsten Seite zu sehen Bilder von der heiss-diskutierten Prototyp-Session am Ende der ersten Woche. 9
3.0 Struktur 3.1 Sitemap Sitemap 1.0 1.1 Texte 6.0 Autoren Datum Orte 7.0 Kontakt 8.0 Gedenkstätten 9.0 Links Dieser Vorschlag sieht fünf Hauptbereiche der Site vor, die allerdings stark untereinander verknüpft sind (so kann etwa ein Eintrag im Bereich Timeline zu einem Eintrag im Bereich Texte oder Mediathek verlinken und umgekehrt). Impressum Desweiteren gibt es vier sogenannte Meta-Navigationspunkte, das sind Bereiche, die weniger inhaltlicher als eher funktionaler Natur sind. 2.0 2.1 Zeitleiste Orte Ereignisse Personen 0.0 3.0 3.1 3.2 Index Die Mauer Karte (Mauerverlauf) Infografik 4.0 4.1 Mediathek Texte Bilder Videos 5.0 Veranstaltungen 5.1 Lesungen Führungen 10
3.0 Struktur 3.2 Wireframes Wireframes Wireframes sind Dokumente, die die funktionale und inhaltliche Verortung von Modulen aufzeigen ohne bereits auf das visuelle Design der Site einzugehen. Sie sind als ideelle Diagramme zu verstehen, die veruchen den Fluss innerhalb eines Webauftritts und die Art der Navigation zu visualisieren. Auf dieser und den folgenden Seiten werden ein paar Wireframes als Diskussionsgrundlage abgebildet. Der erste Entwurf zeigt eine zweispaltige Startseite mit einer horizontalen Dachnavigation auf. Der zweite Entwurf ist an eine klassiche, mittelspaltige Aufteilung angelehnt, wie sie im Moment auch auf der aktuellen Site existert. Aus jedem der Unterbereiche werden für die rechte Spalte Inhalte nach oben gezogen. logo / home(start) interactive- / bild search imprint kontakt geden..blabla links Text welcome text Auf den folgenden drei Seiten sind Wireframes für mehrere Seiten abgebildet die auf einem sehr modularen 12-Spalten-System basieren, dass verschiedene Seitentypen und Modul- Aufteilungen erlaubt. timeline mauer median veranstaltungen timeline / mauer median veranstaltung update bereich 11
LOGO Imprint Kontakt Gedenk stätte Links Suche Home Texte Zeitleiste Die Mauer Mediathek Veranstaltungen sit amet, consectetuer uism d tincidunt ut laoreet dolore magna aliqueniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo con equat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conse uat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lore um dolor sit amet, consectetuer adipiscing... sit amet, consectetuer uism d tincidunt ut laoreet dolore magna aliqueniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo con equat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conse uat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lore um dolor sit amet, consectetuer adipiscing... Aktuelles sit amet, consectetuer adipiscing elit, sed odio dignissim qui blan dit praesent luptatum diam nonummy nibh eu ismod ncidunt ut laoreet dolore magna aliqu... sit amet, consectetuer adipiscing elit, sed odio dignissim qui blan dit praesent luptatum diam nonummy nibh eu ismod ncidunt ut laoreet dolore magna aliqu... sit amet, consectetuer adipiscing elit, sed odio dignissim qui blan dit praesent luptatum diam nonummy nibh eu ismod ncidunt ut laoreet dolore magna aliqu... Kalender sit amet, consectetuer uism d tincidunt ut laoreet dolore magna aliqueniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo con equat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conse uat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lore um dolor sit amet, consectetuer adipiscing... sit amet, consectetuer uism d tincidunt ut laoreet dolore magna aliqueniam quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo con equat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie conse uat, vel illum dolore eu feugiat nulla facilisis at vero et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lore um dolor sit amet, consectetuer adipiscing... sit amet, consectetuer am erat a. Ut wisi enim ad minim v niam, quis nostrud exerci tation... sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer Imprint Kontakt Gedenk stätte Links 12
LOGO Imprint Kontakt Gedenk stätte Links Suche Home Texte Zeitleiste Die Mauer Mediathek Veranstaltungen animierte Grafik sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer Imprint Kontakt Gedenk stätte Links 13
LOGO Imprint Kontakt Gedenk stätte Links Suche Home Texte Zeitleiste Die Mauer Mediathek Veranstaltungen Untermenu sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer sit amet, consectetuer 14 Imprint Kontakt Gedenk stätte Links
4.0 Visualisierungen 4.1 Karten Karten Da heute nur noch sehr wenige Teile der Mauer in Berlin zu besichtigen sind, wären detaillierte Karten zum vormaligen Verlauf der Grenzanlagen ein hervorragendes Mittel um den Informationsgehalt der Site aufzuwerten und sie zugleich mulitmedialer zu gestalten. Eine solche Karte könnte über Hotspots mit anderen Bereichen der Site verknüpft werden (etwa einem Text zu einem bestimmten Ereignis, welches sich an einem auf der Karte markierten Ort ereignete). Zugleich könnte eine solche Karte statistische Informationen zur Mauer enthalten (etwa an welcher Stelle Menschen ein Fluchtversuch gelang). Mit Hilfe der Googlemaps API können solche Aspekte relativ einfach in die Site integriert werden. Bernauer Strasse sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. Konzept-Skizze für die Verwendung von Google Maps als Grundlage einer interaktiven Karte. 15
4.0 Visualisierungen 4.2 Timeline und Mediaplayer Timeline und Mediaplayer Die Timeline betrachten wir als einen zentralen Bestandteil des neuen Webauftritts. In ihr würden verschieden Ereignisse als grafische Events dargestellt werden, die wiederrum mit anderen Inhalten der Site (Texte, Fotos, Videos) verlinkt werden könnten. Eine solche Timeline sollte dynamisch aufgebaut sein und bestimmte Skalierungs- und Filtermöglichkeiten enthalten. Adobe Flash Technologie betrachten wir als geeignete Software hierzu. Konzept-Skizze für eine interaktive Timeline und Integration von multimedialen Inhalten. 16
Neugestaltung Website 20jahremauerfall.net 4.0 Visualisierungen 4.3 Skizzen Skizzen Die Umsetzung dieser Aspekte ist abhängig vom Zeitrahmen und der technischen Machbarkeit. Verschiedene weitere Visualisierungsmöglichkeiten sind hier anskizziert: Hierzu gehören Illustrationen und Daten zum Aufbau des Grenzstreifens sowie zur gesamtdeutschen Lage während der Teilung (und wie sie überhaupt zu Stande kam), sowie informative und illustrative Ablaufdiagramme, die visualisieren, welche Hürden ein potentieller Flüchtling hätte nehmen müssen, um die Grenze zu überwinden. Die berühmte Leute, die in der Zeit gab Kleine Gechichten über sie und die Fotos Die berühmte Leute, die in der Zeit gab Kleine Gechichten über sie und die Fotos 4 Seite 3 Seite 17 Information 1 Seite 2 Seite
Team Hauptansprechpartner und Kursleiter Prof. Thomas Noller t.noller@btk-fh.de Kundenkontakt Nils Hardtke Information Architecture/Site Struktur Ruben Braun David Streit Branding und Identity Constantin Kawohl Jared Leistner Diogo Novaes Jin Uh Timeline Frederic Aue Markus Wulff Infografik Jana Kuadros Lorena Richter Simon Schmidt Maps Ricardo Gantschew 18