Worum geht’s?

Seien wir mal ehrlich: Viele Onlineauftritte von deutschen Schulen sehen aus heutiger Perspektive nicht wirklich gut aus. Zahlreiche Schulwebsites haben Probleme, sich adäquat darzustellen und ihr volles digitales Potenzial zu nutzen.

Im Kurs »ReView, ReThink, ReDesign« haben wir uns entschlossen, für dieses Problem ein inhaltliches Konzept auszuarbeiten und es am Beispiel des Karl-Friedrich-Schinkel Gymnasiums Neuruppin visuell umzusetzen. Das Konzept zielt durch ein neues, dynamisches Branding unter anderem darauf ab, das Engagement von Schüler·innen zu steigern. Zudem könnte die inhaltliche Struktur und Aufbereitung als Vorlage für andere Schulen dienen.

Wir haben uns für unser Projekt für das Schinkel-Gymnasium entschieden, da Max die aktuelle Version der Website vor vielen Jahren während seiner Schulzeit in Neuruppin gestaltet und entwickelt hatte. So konnten wir mit einer Ladung Insiderwissen direkt loslegen. 💨

Direkt zum Prototypen springen 🡣

Die Website des Karl-Friedrich-Schinkel-Gymnasiums Neuruppin

Im Rahmen der Analyse der aktuellen Website ist eine UX Review entstanden. In der UX Review wurden vor allem der Erste Eindruck, die Positionierung der Schule, sowie potenzielle Ziele und Probleme analysiert. Hier die Ergebnisse in zusammengefasster Form:

Erster Eindruck

• man erkennt, dass es hier um eine Schule geht
• Seite wirkt relativ aufgeräumt und strukturiert (inhaltliche Chunks sind gut voneinander unterscheidbar)

Positionierung

• keine klare Positionierung und Abgrenzung (kein Fokus auf z. B. Sport, Naturwissenschaften, …)
• richtet sich primär an Schüler:innen, Eltern, Lehrer·innen und Neuzugänge (Schüler·innen und Eltern, die sich z. B. aufgrund eines angestrebten Schulwechsels über die Schule informieren wollen)

Potenzielle Ziele

• Repräsentation der Schule im Internet
• aktuelle News & Informationen bereitstellen
• Schulalltag mit digitalem Angebot begleiten

Probleme

• schlechte Zielführung durch 14 interaktive Elemente im Header
• Header nimmt zu viel Platz ein und minimiert sich beim Scrollen nicht
• Bedienelemente heben sich durch Farbgebung schlecht vom Rest der Seite ab
• typografische Gestaltung ist verbesserungswürdig
• innerhalb der globalen Chunks sind die Inhalte schlecht strukturiert und formatiert

Um die Zielsetzungen unseres Redesigns besser angehen zu können, starteten wir vor der Entwurfsphase eine Recherche, bei der wir uns nach Websites umgeschaut haben, die vor allem in den Kategorien Markenbewusstsein, Kommunikation und Accessibility bestechen. Dabei haben wir uns nicht ausschließlich auf Websites anderer Bildungseinrichtungen konzentriert, sondern haben uns bewusst auch in anderen Branchen umgesehen, weil wir der Meinung waren, dass viele der klassischen Schulwebsites nicht gut durchdacht und gestaltet sind.

Hier ein paar Einblicke in die Ergebnisse der Recherche:

Markenbewusstsein

In diesem Segment haben wir vor allem nach Websites mit einer einheitlichen Corporate Identity, gutem Visual Design und einer klaren Positionierung gesucht.

u.a. Neues Gymnasium Leibniz, Discord

Kommunikation

Wie der Name schon sagt, haben wir hier nach Websites gesucht, die ihren Nutzer·innen besonders gute Kommunikationstools an die Hand geben.

u.a. eduPort, Incom

Accessibility

Im Accessibility-Segment haben wir Websites gesucht, die sich durch den besonders zugänglichen Einsatz von Schrift, Sprache, Kontrast und assistiven Technologien hervorheben.

u.a. Hertie School, Bundesministerium für Bildung und Forschung

Um unsere Ziele umsetzen zu können, mussten wir grundlegende Änderungen an der Informationsstruktur der Seite vornehmen. Die Ergebnisse dieses Umbaus werden ersichtlich, wenn man die Informationsarchitekturen der Originalseite und der redesignten Seite vergleicht.

Zu den schematischen Darstellungen in Figma 🡥

Farbe

Bei der Farbgebung haben wir uns für einen Violettton mit leichtem Blaustich entschieden.

Das Violett soll dabei die hohe kreative Energie und Dynamik der Marke hervorheben. Das Blau spielt wiederum auf die seriöse und loyale Rolle der Schule gegenüber den Schüler·innen und Eltern an.

Für unser Redesign haben wir einen Farbkatalog entwickelt, dessen Primärfarben sich alle aus unserer Theme-Farbe ableiten.

Der Farbkatalog mit allen im Redesign verwendeten Farben

Schrift

Da es sich bei einer Schulwebsite um ein typografielastiges Projekt handelt, lag während der Gestaltung ein besonderes Augenmerk auf der Schriftwahl. Wir entschieden uns für die Skolar Sans von David Březina, da sie hervorragend gestaltet ist und viele technische Vorteile wie Ligaturen sowie eine breite Sprachunterstützung bietet. Mit den 72 Schnitten und dezenten formsprachlichen Besonderheiten lässt sie vor allem in der Responsive-Anwendung keine Wünsche übrig.

Übersicht zur Skolar Sans

Der »Schinkel-Winkel«

Von Karl Friedrich Schinkels Architektur und Möbelgestaltung haben wir das wichtigste Branding-Element in unserem Markenkonzept in leicht stilisierter Form abgeleitet: Den »Schinkel-Winkel«.

Die Nikolaikirche in Potsdam und der Schinkel-Pavillon in Bielefeld

Die stilisierte Form des charakteristischen »Schinkel-Daches«: Unser »Schinkel-Winkel«

Logo

Ausgehend vom »Schinkel-Winkel« als zentrales Element und der typografischen Sprache haben wir verschiedene Wort-Bild-Marken herausgearbeitet. Daraus sind zwei finale Zeichen entstanden, die in ihrer unterschiedlichen Form je nach Anwendung vorteilhaft sind.

Erste Entwürfe

Finale Ausarbeitungen des Logos

Formsprache

Da sich in den folgenden ersten Entwürfen bereits Screen-Varianten aus eckigen und runden Formen ergaben, beschlossen wir kurzerhand eine gute Mischung zu erzeugen. Ausgehend vom kantigen »Schinkel-Winkel« entstanden Hintergrund- und Trägerflächen.

Übersicht zur Form- und Bildsprache verschiedener Elemente

Die ersten Ausarbeitungen unterschieden sich vor allem im Einsatz von runden und eckigen Grundformen. In einer Variante setzten wir auf ein eher kühleres kantigeres Gesamtbild, während sich die andere an freundlichen und runden Formen bediente.

Ausschnitte des ersten Aufschlags in zwei formsprachlichen Varianten 

Nachdem wir uns für unsere Entwürfe und Branding-Ideen wertvolles Feedback vom Kurs abgeholt hatten, begannen wir damit unserer finales Design zu finden. Wir waren uns bereits von Anfang an einig, dass wir unser Redesign komponentenbasiert mit Figma aufbauen wollen. Daher ging es im nächsten Schritt darum die einzelnen Komponenten, wie etwa den Header, den Footer und die Cards anzulegen. Das hat es uns erlaubt die Platzhalter-Inhalte der Seite unabhängig vom visuellen Design anzupassen und war gerade zum Ende des Semesters eine echte Arbeitserleichterung.

Wir entschieden uns für unseren Prototypen, der eine Desktop- und Mobile-Version umfassen sollte, drei Seiten aus unserem Redesign-Konzept umzusetzen: die Startseite, die »Über Uns«-Seite und den Projektbereich.

Prototyp

Zum Desktop-Prototypen in Figma 🡥

Zum Mobile-Prototypen in Figma 🡥

»Notizzettel«

Um den Schulkontext noch einmal demonstrativ aufzugreifen, setzen wir Notizzettel ein, die an bestimmten Stellen im Interface wichtige Informationen hervorheben.

Der »Notizzettel« als Branding-Element in der Desktop-Ansicht

Projektbereich

Um eine bessere Selbstbeteilung von Schüler·innen zu ermöglichen, umfasst unsere redesignte Seite einen Projektbereich, in dem Ergebnisse aus Arbeitsgemeinschaften und z. B. persönlichen Projekten hochgeladen werden können.

Ausschnitt des Projektbereichs in der Desktop-Ansicht

Seitennavigation

Für die globale Navigation haben wir uns bei Geräten mit großem Viewport für einen klassischen Header mit Overflow-Menü entschieden. Unter »Meine Schule« haben wir alle Navigationslinks zusammengefasst, die nur für Schüler·innen, Lehrer·innen und Eltern relevant sind, nicht aber für das anderweitige Publikum der Website.

Für Geräte mit kleinem Viewport erscheint die Navigation als Fullscreen-Overlay.

Seitennavigation auf Desktop- und Mobilgeräten

Der Kurs »ReThink, ReView, ReDesign« von Paul und Ivo hat uns sehr gut gefallen. Sinnvoll strukturierter Input in Form von nachvollziehbaren Präsentationen und wirklich hilfreiches Feedback gaben uns eine hervorragende Arbeitsgrundlage für unser Vorhaben. Von den vielen tollen Buchempfehlungen können wir auf lange Sicht ebenfalls profitieren.

Das Endprojekt stellte uns vor die spannende Aufgabe, Interface- und Brandingelemente intelligent zu verbinden und diese in eine Zielgruppen-gerechte Umgebung zu implementieren. Schlussendlich haben wir es geschafft, dem Karl-Friedrich-Schinkel-Gymnasium eine ansprechende Identität zu verleihen und die umfangreichen Inhalte übersichtlicher zu strukturieren. Wir glauben, dass mit den Neuerungen im Redesign die Kommunikation zwischen Schüler·innen & Lehrer·innen maßgeblich verbessert werden könnte – ohne dass Abstriche hinsichtlich der Benutzbarkeit der Seiten gemacht werden.

Vielen Dank an Paul & Ivo für die inspirative Zeit und den tollen Kurs! 👏