Zu Beginn des Sommersemesters ’19 hatte ich den starken Drang mich bei der FH Potsdam endlich mal zu revanchieren. Die Jahre davor habe ich immer gern die Werkschau miterlebt. Dieses Mal wollte ich selbst mit anpacken und hatte schon gleich zu Beginn ein Ziel vor Augen: „Ich mach auf jeden Fall die Website!“

TLDR;
- Alte Website
- Neue Website

Bestandsaufnahme

Ich wollte also die Website redesignen – aber wieso eigentlich redesignen und nicht einfach das derzeitige Design weiter benutzen für das Jahr 2018? Wieso schwierig, wenn es doch auch einfach geht? Nun ja …

Probleme

Der größte eigene Antrieb zum neuen Redesign war das derzeitige Design der Werkschau Website, dass der „Kunterbuntheit“ und der Vielfältigkeit der Werkschau niemals gerecht werden konnte. Jedes Jahr fließt so viel Herzblut von uns Studierenden in die Werkschau – etwas, was man auf der aktuellen Website der Werkschau stets vergeblich suchte.

Alte Versionen

Ich konnte noch einige alte Versionen der Website auf web.archive.org finden, die viel aussagekräftiger und besser gestaltet waren:

Websites Archiv Links:

• 2015
• 2016
• 2017/2018

Positives

Das Schöne an der alten Website ist, dass diese noch von „Laien“ ganz einfach selbst befüllt werden konnte. Durch das Wordpress CMS im Hintergrund war das relativ leicht.

Alles Neu!

Es gab bereits viele coole Werkschau Website Designs in der Vergangenheit. Einige davon wurden von Fabian Ehmel designed und programmiert. Vielen Dank an dieser Stelle an Fabian für seine Arbeiten der letzten Jahre!

In meinem Redesign habe ich mich an einigen Stellen an Fabian’s alten Websites orientiert. So habe ich zum Beispiel schnell festgelegt, dass mein Redesign auch wieder ein One Pager werden wird. One Pagers sind besonders besucherfreundlich, da sämtlicher (der wichtigste) Inhalt ohne weiteres Navigieren auf einer einzelnen Seite zu finden ist. Viele Websites haben das Problem, dass wichtiger Inhalt gern auf Unterseiten vergraben wird und von Besuchern dadurch seltener gefunden wird.

Auch die Aufteilung der 2016er Website in einzelne, abgekapselte Sektionen habe ich übernommen. Das macht das Ganze nochmal wesentlich übersichtlicher für den Besucher. Aber alles der Reihe nach.

Mockup v0

In unserem Werkschau Kurs, geleitet von Josephin Kunze und Mira Kellner, trafen wir uns wöchendlich um die aktuellen Stände der Teams zu zeigen und die nächsten Schrite zu besprechen. Ich war leider mein eigenes Team und zeigte im ersten Wurf folgende Ideen:

In meinem ersten Entwurf ging es erst einmal um die grundsätzliche Struktur des One Pagers. Mit Absprache von Mira, Josephin und Anouk Meißner einigten wir uns auf folgende Grundbestandteile und -bedingungen:

Navigation mit Werkschau Logo

Aufmacher Slideshow
Eine Slideshow mit den schönsten Bildern der letzten Werkschau. Ziel ist es einen möglichst guten Eyecatcher für die Besucher anzubieten, um eine geringere Absprungrate zu haben.

Werkschau erklärt
Erklärung der Werkschau: was ist die Werkschau, von wem ist sie und was erwartet den Besuchern der Werkschau? Projekte von Studierenden („Leuchtturmprojekte“) aus dem Vorjahr sollen ebenfalls als Teaser aufgeführt werden.

Interaktiver Lageplan
Ein interaktiver Lageplan (soll nur umgesetzt werden, wenn dafür noch genug Zeit ist). Basierend auf den Grundrissen der Hochschule sollen sämtliche Projekte und deren zugeordneten Räume auf einer interaktiven Karte verortet werden. Zusammen mit einem Besucherleitsystem, das vor Ort in den Räumlichkeiten angebracht werden sollte, sollte das Problem des „Verlaufens“ minimiert werden.

Zeitplan
Da am Wochenende verschiedenste Vorträge, Präsentationen und Workshops über das Wochenende geplant waren, brauchten wir unbedingt einen zweispaltigen (Freitag und Samstag) Zeitplan. Als kleines Gimmick wollte ich die derzeitig laufenden Veranstaltungen visuell highlighten, so dass man immer weiß, was gerade läuft und was als nächstes laufen wird.

Google Map
Eine einfache Karte mit dem verorteten FH Potsdam Standpunkt.

Footer
Ein einfacher Footer mit weiteren Links für z. B. rechtliche Inhalte wie der Datenschutzerklärung, Impressum, …

Mockup v1

Nach dem Abstecken der Grundbedürfnisse und -wünsche an die Website ging es weiter ans definieren und „shapen“, um der finalen Version Schritt für Schritt näher zu kommen.

Das war die erste visuelle Ausarbeitung des Designs für die Werkschau:

Mockup v2

In v2 des Mockups kamen dann auch die ersten Versionen des interaktiven Lageplans. Der Lageplan besteht hier aus zwei großen Komponenten, die beide als Navigations- und Explorierungselemente dienen sollten.

Interaktive Ausstellungskarte

Die Legende (links) beinhaltet die Liste aller auszustellenden Kurse mit Kursnamen und den Räumlichkeiten. Wenn man über solch einen Eintrag fährt soll in der Grundrisskarte (rechts) der Kurs mit dem aktuellen Raum gehighlighted werden.

Der Zeitplan

Der Zeitplan sollte anfänglich aus einer einfachen zweispaltigen Liste mit Zeiteinträgen bestehen:

Mit der aktuellen Länge der Platzhaltertexte hätte diese Ansicht vollkommen ausgereicht. Vorerst hatte ich leider auch keine Möglichkeit die Länge der Texte abzuschätzen. Ich habe hier nicht all zu weit in die Zukunft gedacht und nicht damit gerechnet, dass in den Zeitplan auch noch sämtliche Beschreibungstexte aufgenommen werden sollen.

Mockup v3

In v3 kamen kleine weitere Änderungen, da einigen Leuten in unserem Kurs nicht so ganz zufrieden waren mit den Übergängen von Sektionen.

Aus diesem Übergang:

wurde z. B. dieser einfachere Übergang:

Mockup v4 und v5

In den letzten Wochen vor der Werkschau bekam ich endlich die „finalen“ Informationen und Texte zu den einzelnen Sektionen, wodurch ich kurzerhand noch einige Dinge im Design abändern musste, was leider etwas lästig war.

Dies hier ist einer der letzten Stände des Designs:

Aktualisierung des Zeitplanes

Durch die neuesten Wünsche, sämtliche Texte der Zeitslots mit aufzunehmen, musste ich nochmal die Zeitplan Sektion abändern. Die finale Version sieht wie folgt aus:

Programmierung der Website

Die Programmierung der Website habe ich relativ früh begonnen, da ich wusste, dass es sehr lange dauern wird bis das finale Design abgenommen werden kann. Im Werkschau Kontext ist dieser Ansatz auf jeden Fall der Richtige gewesen. Ich konnte stets zeitnah sämtliche Änderungen im Design auch „in Code gießen“. Wer weitere Informationen über den Code und den verwendeten Technologien erfahren möchte, kann sich gerne die Readme.md und den Source Code anschauen:

→ Readme ansehen → Source Code ansehen

Du hast Lust an unserem Werkschau Website Projekt teilzunehmen? Gerne lade ich dich als Contributor in das Git Repository ein; du brauchst dafür nur einen Gitlab Account. Die FH;P und ich freuen sich sehr über jede Hilfe!

Das Finale

Leider habe ich als einzelne Person nicht alles umsetzen können, was von mir geplant war. Am zeitintensivsten waren auf jeden Fall die Korrekturschleifen und textlichen Anpassungswünsche der „Redaktion“. Die letzten Hotfix-Änderungen wurden sogar noch einige Stunden nach Beginn der Werkschau umgesetzt.

Pitfalls und Probleme, die euch erspart bleiben können

Kommunikation ist Alles

Ein sehr großes Problem, dass mich auch des öfteren schlaflose Nächte gekostet hat, war auf jeden Fall die Kommunikation zwischen den einzelnen „Stakeholdern“, wenn man sie so nennen will. Eine digitale Absprache mit Josephin, Mira, Anouk und schließlich auch Mandy Puchert (verantwortlich für die Corporate Identity der Fh;P) war extrem schwer. Ich kann jeden Weiteren, der sich um die Website kümmern möchte, nur raten, die Absprachen analog und vor Ort abzuhandeln.

Die wichtigste Person im Website Prozess fehlte

… und ich hatte leider keine Ahnung davon, dass sie fehlt. Ich möchte hier niemanden verunglimpfen. Punkt. Leider wussten Mira und auch Josephin (und dem zu Folge ich) nicht, dass die wichtigste Person in meinem Website Prozess und sämtlichen Korrekturschleifen fehlte – Mandy, die Verantwortliche für die CI der FH;P).

Das erste Gespräch hatte ich mit ihr frühestens nach drei Monaten, seit dem Kurs begonnen hatte. Ich war quasi mit sämtlicher Umsetzung fertig, Josephin, Mira und Anouk hatten bereits sämtliche „GOs!“ für die Website gegeben, alles war bereits das zweihundertste Mal angepasst worden. Auf dem Weg zur Zielgeraden schaltete sich dann Mandy ein und hatte viel Kritik, natürlich absolut berechtigte Kritik, am Design zu äußern.

Vieles musste anders gebaut werden, abgeändert werden etc. Diese Änderungen haben mich nochmal sehr viel Zeit gekostet, was man hätte verhindern können, wenn sie früher in unseren Prozess mit aufgenommen worden wäre.

Also rate ich jedem weiteren Helfer, der an der Website arbeiten möchte:

⚠️ Sprecht alles mit Mandy Puchert von der Hochschulkommunikation ab.
Den Kontakt findet Ihr auf dieser Website: https://www.fh-potsdam.de/informieren/service/hochschulkommunikation/

Und zum Schluss noch etwas Zucker

Ich möchte zum Schluss noch einige kleine Features zeigen, die in die Website eingebaut wurden.

Zufall

Beim Programmieren des Video Overlays und der Projektübersicht generiere ich bei jedem Besuch die Anordnung der Inhalte neu. So hat jedes Projekt und Video die gleichen Chancen vom Besucher gesehen zu werden. Ich wollte nicht, dass jemand (besonders bei den Teaservideos) bevorzugt wird.

Laufende Veranstaltungen

Die derzeitig laufenden Veranstaltungen werden blau hinterlegt:

Optischer Randausgleich

Der optische Randausgleich ist in Programmen wie InDesign kein Problem; im Web sieht das ganz anders aus. Hier gibt es derzeitig leider nur „custom“ Lösungen. Ich habe deshalb für die Zeitslots einen eigenen Randausgleich für die ersten Zeilen neuer Textabschnitte geschrieben:

Offene ToDos für die Werkschau ’20

• [ ] Anbindung der Website an ein CMS statt über Markdown Dateien für einfacheres Bearbeiten von Texten
• [ ] Gitlab Integration Script für CMS Deployment schreiben
• [ ] Umsetzung der interaktiven Ausstellungskarte

Vielen Dank

… für die vielen unermüdlichen Hände, die bei der Werkschau ’19 mitgeholfen haben!