Optische Neugestaltung

Farbgestaltung

Das Corporate Design (CD) der RUB sieht eigentlich nur drei Farben vor: Dunkel-blau, Grau und Schwarz. Das Blau entspricht der Volltonfarbe HKS42 oder den CMYK-Farben 90,30,0,0. Eine Umsetzung dieser Farbe in das RGB-System entspricht der RGB-Kombination 45, 86, 154. Die nächsten Farben in der Webfarbpalette wären #333399 (RGB:51,51,153) oder #336699 (51,102,153). Hier sieht die erste Farbe #333399 auf dem Bildschirm wesentlich satter aus und entspricht dem Print-Blau am ehesten. Bei dem Grau handelt es sich um einen 10%-Grauwert, der so nicht in der Webpalette vorhanden ist, hier wird statt dessen der Grauton #cccccc genutzt, für Schwarz kommt #000000 und für weiß #ffffff zum Einsatz. Auf Abstufungen der Farben habe ich verzichtet, um die strikte Farbgestaltung beizubehalten.

Es wäre zwar möglich, verschiedene Bereiche durch verschiedene Farbcodes vonein-ander abzugrenzen und das CD allein durch Struktur und Typographie zu durchsetzen, doch finde ich die Farbgestaltung sehr gut zum seriösen aber auch gleichzeitig etwas modernen CD passend. Daher habe ich von der Nutzung einer Farbcodierung abgesehen.

Guidelines Farbgestaltung

Typographie

Die RUB nutzt für ihr CD die Schriften Lithos und Walbaum. Die Lithos hat zwar den Charakter einer alten griechischen Schrift, wirkt jedoch auch gleichzeitig modern. Der Nachteil der Lithos ist jedoch, daß es nur Großbuchstaben gibt und daß sie zwar sehr gut für kurze Titelüberschriften sowie für Wortmarken (Ruhr-Universität Bochum) brauchbar ist. Bei einer Bezeichnung wie „Institut für Mess- und Regeltechnik" wird sie jedoch schnell unlesbar, da der Lesefluß durch die fehlenden Ober- und Unterlängen nicht optimal verläuft.

Die Walbaum ist eine klassizistische Renaissance-Antiqua, die durch die schlichten, kantigen Serifen sehr seriös und edel wirkt. Sie ist gleichzeitig eine sehr ausdrucksstar-ke Schrift mit sehr seriösem Charakter, stammt aber aus der Zeit Goethes und bildet so einen typographischen Brückenschlag in die Zeit des deutschen Bildungsbürgertums.

Beide Schriften unterstreichen das seriöse, formelle Corporate Design, daß dennoch modern, aber nicht verspielt wirkt. Allerdings lassen sich beide Schriften nur sehr bedingt ins Web-Design übertragen, da sie auf den meisten Computer-Systemen nicht vorhanden sind, zumindest sollte man als Webgestalter davon ausgehen. Deshalb ist eine Einbindung der Schriften nur durch Grafiken oder die Nutzung von Plug-Ins möglich, was den Gebrauch erheblich ein-schränkt. Komplette Texte als Grafik im Web auszugeben, mag zwar der Original-Typographie der RUB am nächsten kommen, dies frißt jedoch Bandbreiten und macht die Durchsuchbarkeit unmöglich. Bei einem Durchstöbern des RUB-Internetangebotes fällt nunmehr auf, daß ein Großteil der Grafiken meist nur die Lithos enthält, die Walbaum geht fast völlig unter. Eigentlich schade, den die Lithos ist zwar - wie bereits gesagt - für kurze Wortmarken gut und schön, aber für längere Texte oder Bezeichnun-gen nicht mehr sehr gut lesbar.

Aus diesem Grunde sollten die Schriften Lithos und Walbaum gleichwertig behandelt werden und beide ihre Chance erhalten. So kann man die Lithos und Walbaum auch nutzen, wie ich es in den Grafiken der zentralen Seiten auch gemacht habe, indem man die erste Zeile eines Logos in Lithos setzt, die zweite hingegen in Walbaum. Dabei habe ich mich für den kursiven Schnitt entschieden, der durch seine Dynamik ein Gegengewicht zur schweren Lithos bildet. Für den restlichen Text müssen allerdings die Standardschriften genutzt werden. Neben den Monospace-Fonts (Courier) unterscheidet man in Serifen- und serifenlosen Fonts. Standardmäßig sind bei den Browsern als serifenlose Schrift Arial (PC) oder Helvetica (Mac) eingestellt, als Serifen-Schriften fungieren Times New Roman (PC) oder Times (Mac).

Häufig wird empfohlen, zur besseren Lesbarkeit eine Serifen-Schrift anzuwenden, al-so in diesem Falle Times. Doch das Problem ist einfach: Die Times ist eine Barock-Antiqua und dies beißt sich mit der klassizistischen Walbaum. Das Problem läßt sich mit der Standard-Serifenlosen-Schrift einfach lösen: Die Arial und die Helvetica sind beide serifenlose klassizistische Schriften, die sich typographisch problemlos mit der Walbaum mischen lassen. Zusammen mit den schlichten serifenlosen Schriften, dem Einsatz der Lithos UND der Walbaum ergibt sich somit ein typographisches Gesamt-bild, das die Seriosität und schlichte Eleganz des Print-CD ins Web überträgt.

Guidelines Typographie

Seitenraster

Unter Seitenraster ist die Aufteilung der Website in verschiedene Aktionsbereiche gemeint. Beim Surfen durch das Webangebot der Ruhr-Universität Bochum begegnet man sehr unterschiedlichen Seitenrastern, am häufigsten der Version, die sich auch im zentralen Bereich der RUB wiederfindet: Am linken Rand ist ein blauer Streifen, hier finden sich z.T. Navigationselemente, der eigentliche Inhalt ist im rechten Seitenfen-ster. Dabei ist grundsätzlich anzumerken, daß es keine einheitliche Navigation gibt: Entweder liegen die Navigationselemente auf dem blauen Streifen oder im Weißraum, auch eine Unterscheidung zwischen zentralen und lokalen Navigationsmöglichkeiten gibt es eher zufällig. Da es keine einheitliche Positionierung von Navigationselementen gibt, ist es für den Benutzer schwierig, sich durch die verschiedenen Seiten bis zum Ge-suchten durch zu kämpfen. Ziel muß es also sein, ein verbindliches, übersichtliches Seitenraster zu entwickeln, in dem Navigationselemente und Inhalte ihren angestamm-ten Platz haben und somit die Usability der Webseiten insgesamt erhöht wird.

Zentrale Navigationsleiste

Mein Vorschlag für ein neues Seitenraster ist eine Neuaufteilung des Bildschirms. Wurde dieser bisher vor allem durch den blauen Streifen horizontal aufgeteilt, werden in meinem Konzept zentrale und lokale Elemente vertikal voneinander abgegrenzt und der lokale Teil dann horizontal untergliedert. In der oberen Hälfte findet sich die zentra-le Navigationsleiste. Diese gibt der angezeigten Seite einen oberen Abschluß, sorgt für Wiedererkennungswert und hat vor allem einen direkten Zugriff auf die zentralen Sei-ten parat. Diese Navigationsleiste ist ca. 100 Pixel hoch und kann sich in der Breite va-riabel anpassen, sie geht also sowohl auf einem 14-Zoll-Monitor als auch auf einem 21-Zoll-Monitor über die gesamte Seitenbreite.

Diese zentrale Navigationsleiste kann auf allen lokalen Seiten entweder als Tabelle oder als Frame eingefügt werden und somit ist den BenutzerInnen jederzeit der Zugriff auf die wichtigsten Zentralbereiche möglich. Ich habe bei meinen Beispielseiten zwei unterschiedliche Versionen dieser Zentralen Navigationsleiste entworfen: Die erste ist die klassische Variante mit komplettem Siegel und sehr klaren Strukturen, die zweite Version hingegen ist sehr viel moderner gehalten; mit einem angeschnittenen und gedrehten Siegel sowie durchscheinenden Schrifteffekten wirkt sie modern, aber noch nicht zu verspielt.

Lokaler Content

Der untere Teil des Bildes steht nun für den lokalen Content zur Verfügung. Durch ein Logo oder eine Überschrift kann hier der Bereich angezeigt werden, in dem man sich befindet. Dieses Logo soll nur ca. 30-50% der Seitenbreite und auch max. 100 Pixel in der Höhe in Anspruch nehmen, so daß durch den Weißraum auch eine optische ver-tikale Trennung von zentralem und lokalem Bereich stattfindet. Wie diese Logos zu ge-stalten sind, liegt außer den ungefähren Breiten- und Höhenvorgaben in den Händen der jeweiligen lokalen Institutionen, allerdings sollten von Seiten der RUB hier Anre-gungen und Muster-Vorlagen erstellt werden. Für die zentralen Seiten sind hier bei meinem Projekt schon Anregungen gefallen.

Gestaltungsraster Portale

Die Portalseiten sollen unterhalb der zentralen Navigationsleiste aufgeteilt sein, wie eine „richtige" Portalseite. Dies bedeutet einen dreispaltigen horizontalen Aufbau, mit einer Linkliste auf der linken Seite, einem zentralen Bereich mit aktuellen Nachrichten und eine rechte Spalte mit Interaktionsmöglichkeiten (z.B. UB-Recherche, Telefonbuch der RUB etc.). Die erste und letzte Spalte sollten ca. 120 Pixel breit, die mittlere Spalte hinsichtlich der Breite variabel sein, so daß unabhängig von Monitor und Auflösung sich die Seite über die gesamte Breite erstreckt. In allen Spalten sind die Elemente modular aufgebaut, d.h. bei den Zielgruppen-Links sind die Links in Kategorien geordnet (z.B. Service, Studium, Jobs) und durch Kästen, wie auch die Interaktionselemente auf der rechten Seite voneinander abgegrenzt. Ebenso sind auch die Nachrichten in der mittleren Spalte in sich durch Weißraum getrennt. Dadurch wird der bei Portalen häufiger anzutreffenden Überfrachtung und Unübersichtlichkeit entgegengetreten. Der modulare Aufbau und die Nutzung von Kästen hilft im Nebeneffekt auch, das Print-CD der Ruhr-Universität, das sich auch durch die Nutzung rechteckiger geometrischer Formen auszeichnet, ins Web zu übertragen.

Gestaltungsraster Fakultäten

Diese „heilige Dreispaltigkeit" ist bei den Portalseiten zwar „state-of-the-art", dennoch kann diese nicht für jede Seite als Vorlage dienen, dafür sind die lokalen Bedürfnisse und Anforderungen der einzelnen Fakultäten und Einrichtungen zu unterschiedlich - Geographen haben wahrscheinlich andere Anforderungen als Juristen, Beratungseiten sehen bestimmt anders aus als Publikationslisten. Einheitlich soll nur die zentrale Navigationsleiste sein, für den lokalen Bereich sollten aber Hinweise zur typographischen, farblichen etc. Gestaltung gegeben werden. Bei meinem Projekt habe ich ein paar Seiten der fiktiven „Fakultät für Legotechnik" vorbereitet, um anzudeuten, wie lokale Seiten aussehen könnten.

Unter der Zentralen Navigationsleiste findet sich hier das Logo der Fakultät als Ab-grenzung des lokalen und zentralen Content. Unterhalb des Logos findet sich nun eine zweispaltige Anordnung: auf der linken Seite die Navigationselemente, auf der rechten Seite der lokale Content.

Guidelines Seitenraster


(c)2000 by Heiko Jansen