Für die PIER (Partnership for Innovation, Education and Research) in Hamburg, eine strategische Partnerschaft zwischen DESY und der Universität Hamburg zur Förderung von Forschung und Lehre, haben wir einen neuen Webauftritt gestaltet, der die Einzelauftritte von PIER und der PIER Helmholtz Graduate School (PHGS) zusammenführt und die bestehenden Inhalte neu strukturiert.
Konzeption
Web-Design
Frontend
Icons
Aus zwei mach eins
Unsere Aufgabe bestand darin, die beiden getrennten Internetauftritte von PIER und der PIER Helmholtz Graduate School (PHGS) zu einem einheitlichen Online-Auftritt zusammenzuführen. Dabei sollten die bestehenden, organisch gewachsenen Inhalte konsolidiert, modernisiert und an die Bedürfnisse der Zielgruppe angepasst werden. Ein zeitgemäßes und responsives Design sollte im Vordergrund stehen, um der jungen Zielgruppe ein ansprechendes Nutzererlebnis zu bieten. Die neue Website sollte übersichtlich und informativ sein, alle relevanten Themen für Studierende, Alumni, Doktoranden und Postdocs vereinen und eine klare Struktur bieten. Zu diesen Themen gehören Innovationsförderung, Lehre, Forschung und Promotion.
Content first
Die Konsolidierung der Inhalte von PIER und PHGS erfolgte in mehreren Workshops, an denen Mitarbeiter beider Institutionen teilnahmen. In diesen Workshops wurden die Hauptthemen festgelegt und alle Seiten in Form eines klickbaren Wireframes zusammengestellt und redigiert. Dieser Dummy ermöglichte es, frühzeitig ein klares Verständnis für die optimale Strukturierung des späteren Content Management Systems der Website zu entwickeln. Durch dieses methodische Vorgehen konnte sichergestellt werden, dass die Inhalte nicht nur vollständig und korrekt sind, sondern auch den Anforderungen und Erwartungen der Zielgruppe entsprechen.
Da viele jüngere Besucher der PIER-Website hauptsächlich Mobilgeräte nutzen, haben wir besonderen Wert auf ein responsives Design gelegt. Die Website passt sich nahtlos an verschiedene Bildschirmgrößen an und stellt sicher, dass alle Inhalte auf Smartphones und Tablets genauso übersichtlich und ansprechend dargestellt werden wie auf einem Desktop. So ist gewährleistet, dass die Nutzererfahrung immer optimal ist, egal welches Gerät verwendet wird.
Für die PIER-Website haben wir über 40 individuelle, stilistisch einheitliche Piktogramme entworfen. Diese Icons dienen im Rahmen der Navigationselemente sowohl als Orientierungshilfe als auch zur Auflockerung der Inhalte. Zusätzlich wurden einige Icons in optimierten Versionen erstellt, um ihre Klarheit und Erkennbarkeit auch bei kleineren Darstellungsgrößen zu erhalten. Diese maßgeschneiderten Icons tragen wesentlich zur Benutzerfreundlichkeit der Website bei und helfen den Nutzern, sich schnell und intuitiv zurechtzufinden.
Frontend trifft Backend
Das Design der Website wurde in enger Zusammenarbeit mit PIER anhand zahlreicher Layouts, insbesondere hinsichtlich der Bildauswahl, abgestimmt und konkretisiert.
Nach der finalen Freigabe der Layouts wurden von uns alle notwendigen CSS- und HTML-Elemente erstellt und für die Integration durch die DESY-IT vorbereitet, um eine möglichst reibungslose Umsetzung der Seite in das bei PIER eingesetzte ZMS-CMS zu gewährleisten.
Während des gesamten Prozesses bis zum endgültigen Launch standen wir dem PIER-Team und der IT zur Seite, um sicherzustellen, dass die Seite zur Zufriedenheit aller umgesetzt wurde. So konnten wir sicherstellen, dass das Endergebnis sowohl funktional als auch ästhetisch den hohen Anforderungen entsprach.
Neben der Gestaltung der Website haben wir eine eigenständige Wort-/Bildmarke für den Bereich »PIER Startup« entwickelt.
»PIER Startup« bietet Workshops an, die sich auf verschiedene Phasen der Unternehmensgründung und des Unternehmertums konzentrieren. Sie vermitteln Nachwuchswissenschaftlern, die an der Gründung eines eigenen Unternehmens interessiert sind, die notwendigen Kenntnisse, Fähigkeiten und Techniken.
Das Markenzeichen besteht aus zwei nach oben gerichteten Pfeilen, die einerseits an Piktogramme auf Umzugskartons erinnern und so zusammen mit der verwendeten Schablonenschrift etwas Flüchtiges, Improvisiertes vermitteln. Andererseits zeigen die Pfeile deutlich nach oben und symbolisieren damit die Aufwärtsbewegung und die positive Richtung eines Start-ups. Farblich greift das Logo die Farben Cyan und Rot des PIER Corporate Designs auf, um eine einheitliche visuelle Identität zu gewährleisten.
Durch die Zusammenführung der Websites und die Neustrukturierung der Inhalte erhält PIER einen einheitlichen und modernen Online-Auftritt.
Die klare Struktur und das ansprechende Design verbessern die Benutzerfreundlichkeit und erleichtern den Zugang zu den Informationen. Die erstellten Icons und optimierten Bilder tragen zusätzlich zur visuellen Attraktivität der Website bei.
