Showroom

Sparkling Science funkelt online

Im vergangenen Dezember trat das Büro die Antwort an mich heran, und fragte, ob ich Lust hätte die Website des BMWF-Projektes Sparkling Science neu zu konzipieren und zu gestalten. Das vorherige Design kam von ihnen, doch im Laufe der Zeit hatte sich so viel am Projekt geändert und es wurde so viel nachgebessert, dass die Website den neuen Anforderungen nicht mehr entsprach. Die Antwort betreut die Seite schon länger und wollte jemanden hereinholen, der das Ganze noch unvoreingenommen betrachtet. Eine spannende Aufgabe, denn bei Sparkling Science geht es darum, dass Schüler direkt mit Forschern an echten Projekten zusammenarbeiten.

 

Sparkling Science vorher
Sparkling Science vorher

Sparkling Science besitzt nun nicht wirklich ein Logo. Erkennungsmerkmale sind die Trade Gothic, in der der Name gesetzt ist, die Farben des Bundesministeriums und das Foto des halben Gesichtes eines Burschen, das mit dem halben Gesicht einer Statue verbunden ist. Dies galt es nun prominent einzusetzen, denn sonst würde man die Assoziation zum Projekt und den Drucksorten verlieren. Die Seite sollte seriös, offiziell, aber auf keinen Fall beamtisch oder steril wirken, schließlich sind viele Schüler ihre Besucher. Da die Bandbreite der eingereichten Projekte sehr groß ist, sollte Sparkling Science auch nicht unbedingt eine Forschungsrichtung visuell bevorzugen. Deshalb habe ich nicht Bilder irgendwelcher wissenschaftlichen Objekte eingesetzt, sonder die funkelnden Sparks aus dem Namen übernommen. Die strahlen stilvoll verspielt als neutrale Basis im Hintergrund.

 

Das Redesign von Sparkling Science
Das Redesign von Sparkling Science

Der Web 2.0-Geist wohnt mir natürlich schon lange inne und so mussten auch ein paar Klischees raus, die aber durchaus ihren Sinn haben. Zum Beispiel textete ich einen plakativen Einleitungssatz auf der Startseite, der das Projekt in sechs Zeilen erklärt. Ebenso wollte ich immer schon die Möglichkeit nutzen, mit CSS die Laufweite zwischen den Buchstaben zu verringern. So entstanden kompakte, spannende und ungezwungen klein geschriebene Überschriften in einer großen, fetten Arial.

Am herausfordernsten und interessantesten was es aber die Informationen neu zu gliedern. Vor allem die Projektübersicht, auf der man mit Hilfe eines Farbsystems den Überblick behält. Jede der acht Kategorien bekommt eine Farbe und als Icon den jeweiligen Anfangsbuchstaben (zum Glück unterscheiden die sich alle) in ein Quadreat gesetzt. Auch die Einzelansicht der Projekte war eine trickreiche Aufgabe, denn einige haben viel Material zu zeigen (wie Fotos, Videos, Presseartikel oder führen sogar ein Blog) und andere nur eine knappe Beschreibung mit zwei Bildern. Als Lösung dient eine Menüstruktur, die immer gleich bleibt, aber je nach Projekt nicht alle Links aktiviert hat. So verliert man nicht die Orientierung und bekommt gleich einen Überblick über die Vielfalt der jeweiligen Projektinhalte.

 

Die Übersichtsseite aller Projekte mit Farbsystem
Die Übersichtsseite aller Projekte mit Farbsystem

Sparkling Science ist nun seit einem Monat offiziell im neuen Gewande. Mit ein paar Abweichungen vom Entwurf kann man sich die Seite hier online anschauen (falls die Links nicht schon viel weiter oben geklickt wurden). Mehr Entwürfe gibt es hier im Portfolio (hoffentlich) zu bestaunen.

Rückblickend war es ein schönes und herausforderndes Projekt, bei dem ich viel lernen konnte. Es war auch spannend einmal ein Redesign zu machen, sich an gewisse Vorgaben (z.B das Foto oder die Farben) halten zu müssen und sich innerhalb dieser Grenzen auszutoben oder sie teilweise zu brechen. Witziges Detail zum Schluss: die Antwort hatte mich eingentlich wegen Print-Design angesprochen und das erste Projekt, das wir zusammen gemacht haben war fürs Web. Nichts desto trotz freu ich mich schon aufs nächste (vielleicht sogar gedruckte).

Ein Kommentar

  1. “Ebenso wollte ich immer schon die Möglichkeit nutzen, mit CSS die Laufweite zwischen den Buchstaben zu verringern” sieht wirklich gut aus!

Leave a Reply

Your email address will not be published. Required fields are marked *