{"id":1035,"date":"2009-03-29T13:41:33","date_gmt":"2009-03-29T12:41:33","guid":{"rendered":"http:\/\/www.zeichenschatz.net\/?p=1035"},"modified":"2009-03-29T13:41:33","modified_gmt":"2009-03-29T12:41:33","slug":"sparkling-science-funkelt-online","status":"publish","type":"post","link":"https:\/\/zeichenschatz.net\/en\/showroom\/sparkling-science-funkelt-online\/","title":{"rendered":"Sparkling Science funkelt online"},"content":{"rendered":"

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

 <\/p>\n

\"Sparkling<\/a>
Sparkling Science vorher<\/figcaption><\/figure>\n

Sparkling Science besitzt nun nicht wirklich<\/a> ein Logo. Erkennungsmerkmale sind die Trade Gothic<\/a>, 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\u00fcrde man die Assoziation zum Projekt und den Drucksorten verlieren. Die Seite sollte seri\u00f6s, offiziell, aber auf keinen Fall beamtisch oder steril wirken, schlie\u00dflich sind viele Sch\u00fcler ihre Besucher. Da die Bandbreite der eingereichten Projekte sehr gro\u00df 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 \u00fcbernommen. Die strahlen stilvoll verspielt als neutrale Basis im Hintergrund.<\/p>\n

 <\/p>\n

\"Das<\/a>
Das Redesign von Sparkling Science<\/figcaption><\/figure>\n

Der Web 2.0-Geist wohnt mir nat\u00fcrlich 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\u00e4rt. Ebenso wollte ich immer schon die M\u00f6glichkeit nutzen, mit CSS die Laufweite<\/a> zwischen den Buchstaben zu verringern. So entstanden kompakte, spannende und ungezwungen klein geschriebene \u00dcberschriften in einer gro\u00dfen, fetten Arial.<\/p>\n

Am herausfordernsten und interessantesten was es aber die Informationen neu zu gliedern. Vor allem die Projekt\u00fcbersicht, auf der man mit Hilfe eines Farbsystems den \u00dcberblick beh\u00e4lt. Jede der acht Kategorien bekommt eine Farbe und als Icon den jeweiligen Anfangsbuchstaben (zum Gl\u00fcck unterscheiden die sich alle) in ein Quadreat gesetzt. Auch die Einzelansicht der Projekte war eine trickreiche Aufgabe, denn einige<\/a> haben viel Material zu zeigen (wie Fotos, Videos, Presseartikel oder f\u00fchren sogar ein Blog) und andere<\/a> nur eine knappe Beschreibung mit zwei Bildern. Als L\u00f6sung dient eine Men\u00fcstruktur, die immer gleich bleibt, aber je nach Projekt nicht alle Links aktiviert hat. So verliert man nicht die Orientierung und bekommt gleich einen \u00dcberblick \u00fcber die Vielfalt der jeweiligen Projektinhalte.<\/p>\n

 <\/p>\n

\"Die<\/a>
Die \u00dcbersichtsseite aller Projekte mit Farbsystem<\/figcaption><\/figure>\n

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<\/a> (falls die Links nicht schon viel weiter oben geklickt wurden). Mehr Entw\u00fcrfe gibt es hier im Portfolio<\/a> (hoffentlich) zu bestaunen.<\/p>\n

R\u00fcckblickend war es ein sch\u00f6nes 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\u00fcssen 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\u00fcrs Web. Nichts desto trotz freu ich mich schon aufs n\u00e4chste (vielleicht sogar gedruckte).<\/p>","protected":false},"excerpt":{"rendered":"

Das Beethoven weicht vom Platz 1 im Portfolio, denn nun ist auch mal was Neues dran: mit Sparkling Science durfte ich das umfangreiche visuelle wie konzeptionelle Redesign einer Website vornehmen. Hier ein paar Hintergr\u00fcnde zum Prozess.<\/p>","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10],"tags":[201,295,347,414],"class_list":["post-1035","post","type-post","status-publish","format-standard","hentry","category-showroom","tag-konzept","tag-redesign","tag-sparkling-science","tag-webdesign"],"_links":{"self":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts\/1035","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/comments?post=1035"}],"version-history":[{"count":0,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/posts\/1035\/revisions"}],"wp:attachment":[{"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/media?parent=1035"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/categories?post=1035"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/zeichenschatz.net\/en\/wp-json\/wp\/v2\/tags?post=1035"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}