Suchwort eingeben

OOD

Out of date


Update
Wissenschaftler bereitet ein Experiment vorWissenschaftler bereitet ein Experiment vor

PIER Website

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.

Screenshot der PIER Website
PIER Logo vor einem blau/rot eingefärbten Foto auf dem ein wissenschaftlicher Dozent vor einer Tafel mit physikalischen Formeln zu sehen ist

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.

Wireframe zur Festlegung und Positionierung von Inhalten auf der neuen PIER Website
Darstellung der PIER Website auf einem Smartphone und Tablet
Darstellung der PIER Website auf einem Laptop

Unser Ziel war es, ein optimales Einkaufserlebnis für alle Nutzer zu schaffen – unabhängig davon, ob sie den Shop auf einem Desktop-Computer oder einem Mobiltelefon besuchen. Mit Shopify konnten wir ein responsives Design umsetzen, das sich automatisch an das jeweilige Endgerät anpasst. So können Kunden bequem von zu Hause oder von unterwegs aus in Claus Krögers Feinkostwelt eintauchen und ihre Lieblingsprodukte bestellen.

Beispiel-Screenshot "Innovation" aus der PIER-WebsiteBeispiel-Screenshot "Innovation" aus der PIER-Website
Beispiel-Screenshot "Funding" aus der PIER-WebsiteBeispiel-Screenshot "Funding" aus der PIER-Website
Beispiel-Screenshot "Page Navigation" aus der PIER-WebsiteBeispiel-Screenshot "Page Navigation" aus der PIER-Website
Beispiel-Screenshot "Education" aus der PIER-WebsiteBeispiel-Screenshot "Education" aus der PIER-Website
Beispiel-Screenshot "Formular" aus der PIER-WebsiteBeispiel-Screenshot "Formular" aus der PIER-Website
Beispiel-Screenshot "Particle & Astroparticle Physics" aus der PIER-WebsiteBeispiel-Screenshot "Particle & Astroparticle Physics" aus der PIER-Website
Beispiele von Icons für die PIER Website von SOFA53NEUN, die in zwei auflösungsoptimierten Versionen gestaltet wurden.

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.

Ein Übersicht der Icons, die für die PIER Website und Öffentlichkeitsarbeit gestaltet wurden
PIER Icon für "Particle & Astroparticle Physics", im Hintergrund ein Teilchendetektor
PIER Icon für "Infection And Structural Biology", im Hintergrund ein Forscher bei der Arbeit
PIER Icon für "Photon Science", im Hintergrund ein Testaufbau
PIER Icon für "Accelerator Research", im Hintergrund ein Teilchenbeschleuniger

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.

Logo PIER Startup

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.

PIER

PIER (Partnership for Innovation, Education and Research) ist eine strategische Partnerschaft zwischen dem Deutschen Elektronen-Synchrotron (DESY) und der Universität Hamburg. Diese Kooperation zielt darauf ab, die wissenschaftliche Forschung und Lehre in den Bereichen Physik, Materialwissenschaften, Strukturbiologie und Nanowissenschaften zu stärken. PIER fördert den Wissensaustausch und die Zusammenarbeit zwischen Forschenden, Wissenschaftlerinnen und Wissenschaftlern sowie Studierenden. Durch die enge Zusammenarbeit zwischen DESY und der Universität Hamburg schafft PIER eine einzigartige Umgebung, in der innovative Forschung und exzellente Ausbildung Hand in Hand gehen.

Ein zentraler Bestandteil von PIER ist die PIER Helmholtz Graduate School (PHGS), die speziell auf die Bedürfnisse von Doktorandinnen und Doktoranden zugeschnitten ist. Die PHGS bietet ein umfassendes Ausbildungs- und Förderprogramm, das den wissenschaftlichen Nachwuchs optimal auf eine Karriere in der Forschung vorbereitet. Neben wissenschaftlichen Seminaren und Workshops werden auch Soft-Skill-Trainings und Karriereentwicklungsprogramme angeboten. Die Partnerschaft unterstützt den wissenschaftlichen Fortschritt und trägt zur internationalen Sichtbarkeit und Attraktivität des Forschungsstandortes Hamburg bei.


www.pier-hamburg.de

Next case

Leane Zaborowski Coaching Website

Web-Design, Corporate Design

Leane Zaborowski, lächelnd für ein Porträt mit ihrer Spiegelung in einer Glasscheibe, in einem olivgrünen Top.