Richtlinien zur Gestaltung - MPG HLL - Max-Planck-Gesellschaft

Web
Design
Richtlinien
zur Gestaltung
der Webseiten
der Max-Planck-Institute
München, Juli 2003

INHALT
VORWORT 3
1. SEITENRASTER
Browserdarstellung 11
Flächenaufteilung 12
2. NAVIGATION
Haupt-Navigation 15
Meta-Navigation 20
Institutskennung 21
Sub-Navigation 22
Suche 24
3. GRAFISCHE ELEMENTE
Logo-Platzierung 27
Icons 28
Icon-Platzierung 29
Farben 30
Alternative Farbsets 32
4. TYPOGRAFIE | ABBILDUNGEN
Schriften 37
Schlüsselbild 38
Bildplatzierung 39
Weitere Bildformate 40
5. WEITERE ANWENDUNGEN
Stellenangebote 45
Adressdarstellung 46
Anfahrtsbeschreibung 47
Formulare 48
Linklisten 50
Mitarbeiterlisten 52
Publikationen 54
Sitemap 56
6. ONW – OPEN NEW WINDOW
Flächenaufteilung 59
Mitarbeiterdarstellung 60
Anfahrtskarten 62
CD-ROM 64

VORWORT
Webdesign und Funktionalität
www.maxplanck.de ist der neue Internetauftritt der Max-Planck-
Gesellschaft zur Förderung der Wissenschaften e.V. (MPG). Er verdeutlicht
die Kompetenzen und das Leistungsspektrum der MPG auf eine
seriöse und zugleich souveräne Art und Weise. Im Mittelpunkt stehen
Informationen und neues Wissen aus allen Instituten, gewissermaßen
aus „erster Hand“.
Auf Grund der komplexen Struktur der MPG und der weit reichenden
Forschungsaktivitäten ihrer Institute sind dabei die unterschiedlichsten
Themen und Inhalte an verschiedene nationale und internationale Zielgruppen
zu kommunizieren, wie beispielsweise an:
– die breite Öffentlichkeit
– die Medien
– Universitäten und Schulen
– andere Forschungseinrichtungen
– Wirtschaftsunternehmen
– die eigenen Mitarbeiter
Um die Richtigkeit und Aktualität der Informationen zu gewährleisten
und die Pflege der Inhalte effizient zu gestalten, stützt sich der neue
Internetauftritt der MPG auf ein Content-Management-System (CMS).
Das CMS erlaubt es, alle Inhalte getrennt vom Design in einer komplexen
Datenbank zu verwalten und für unterschiedliche Anwendungen zu
nutzen (cross media publishing). Durch den Einsatz des CMS ergeben
sich neue Möglichkeiten, aber auch zusätzliche Anforderungen an die
Gestaltung und Struktur der Website. Daher muss der Internetauftritt
der MPG gleichzeitig eine Vielzahl von Anforderungen so gut wie möglich
erfüllen:
– Die technischen Anforderungen an die Systemvoraussetzungen
bei den Anwendern sollten auf ein Mindestmaß reduziert sein. So
ist der Webauftritt der Max-Planck-Gesellschaft bereits bei einer
Bildschirmauflösung von 800 Bildpunkten in der Horizontalen und
600 Bildpunkten in der Vertikalen (800 x 600 Pixel) voll nutzbar
und selbst bei einer geringeren Auflösung noch zu navigieren.
– Einen weiteren Aspekt liefern die Betriebssystem- und Browserversionen.
Zwar verwenden inzwischen mehr als 90 Prozent der Nutzer
den „Internet Explorer“, im akademischen Umfeld sind jedoch häufig
noch ältere „Netscape-Versionen“ und andere, eher seltene Browser
wie Lynx, Opera, u.Ä. im Einsatz. Darum ist die Konzeption und
3

VORWORT
Umsetzung der Website so flexibel gestaltet, dass sie der Vielzahl an
Betriebssystemen und Browsern, wie sie bei der weltweiten Gruppe
der Anwender gegeben ist, Rechnung trägt.
– Das Navigationskonzept soll eine „intuitive“ Bedienbarkeit der
Website ermöglichen. Auch wenn der Anwender beispielsweise
„Javascript“ in seinem Browser ausgeschaltet hat. Daher muss die
Navigation eine eindeutige Codierung und eine nachvollziehbare
Visualisierung der Interaktionsmöglichkeit bieten. Die dazu verwendeten
Elemente wie Buttons, Icons und Menüs müssen allgemein
gehalten und international verständlich sein.
– Text, Bild, Grafik, Sound und Video. Eine Vielzahl von Contenttypen
mit völlig unterschiedlicher Qualität, Quantität und Komplexität
müssen mediengerecht abgebildet werden. Dabei sind die besonderen
Anforderungen des CMS zu berücksichtigen. Gleichzeitig gilt es die
Möglichkeiten der System- und Datenbankarchitektur voll auszuschöpfen.
Das stellt anspruchsvolle Anforderungen an das Design des
Webauftritts und die Gestaltung der Redaktionsoberflächen. Die
Dialogmasken, mittels derer die Redakteure die Inhalte einpflegen,
müssen einfach gestaltet und leistungsfähig zugleich sein. Das
Template-System, das die Darstellung der Inhalte bei der Wiedergabe
in der Website steuert, muss einen sinnvollen Kompromiss zwischen
dem Wunsch nach Einzigartigkeit einerseits und der Bedienbarkeit
(usability) und Effizienz durch die Wiederverwertbarkeit der
Templates (recyclability) andererseits herstellen.
Neben diesen Rahmenbedingungen und Basisanforderungen spielen
weitere Aspekte bei der Planung und Realisation von Internetangeboten
eine entscheidende Rolle.
Heute sind im World Wide Web die Anwender (User) und die großen
Suchmaschinen zentrale „Stellgrößen“. Informationen, die über Bilder
oder Grafiken vermittelt werden, können durch Suchmaschinen nicht
erkannt und indiziert werden. D.h., sie sind für den Anwender nicht
gezielt „suchbar“. Eine stark bildlastige Gestaltung, die auf den Einsatz
von großformatigen Bildern, animierten Inhalten in Form von Flash-
Animationen und/oder Quicktime-Movies aufbaut, errichtet Barrieren,
da sie unnötig lange Lade- und Wartezeiten verursacht und oft spezielle
Zusatzsoftware, so genannte Plugins, voraussetzt.
Da erfolgreiche Websites und ihr Design heute wieder und wieder
kopiert werden, haben die Nutzer zunehmend einheitlichere Erwartungen
und Sehgewohnheiten. Eine Studie des Internetexperten Dr.
Jakob Nielsen aus dem Jahre 2002 besagt, dass Benutzer/innen genaue
Erwartungen hinsichtlich der Position bestimmter Navigations- und
4

VORWORT
Menü-Elemente einer Internetseite haben. So sollten Firmenname und
-logo in der linken oberen Ecke platziert werden, die Suchfunktion dagegen
oben rechts. Der Link zur Startseite wird zumeist in der linken,
oberen Ecke der Website vermutet, während man die Hauptnavigation
am mittleren, linken Bildschirmrand erwartet.
(Quelle: u.a. Nielsen, Deep Linking is good Linking, 3. März 2002)
Unsere Wahrnehmung wird entscheidend von Atavismen beeinflusst, die
wir nur wenig beeinflussen und steuern können. Zu diesen biologisch
programmierten „Gewohnheiten“ zählen beispielsweise das reflexartige
Ansprechen unserer Aufmerksamkeit auf Bewegungen oder intensive
Farben. Im Verhältnis zu Textinhalten werden Bildmotive und Abbildungen
überproportional stark beachtet.
Daher bestehen die Probleme bei nicht funktionsgerecht gestalteten
Websites häufig darin, dass zu viele Informationen und Techniken
gleichzeitig zum Einsatz kommen. Die Seite wird überfrachtet. Viele
Farben, mehrere Schriftarten, bunte Buttons, „schreiende“ Grafiken und
Animationen stehen in Konkurrenz zueinander. Der Anwender kann
keine Prioritäten setzen und die Schwerpunkte der Website nicht erkennen.
Solche Websites signalisieren vor allem eines: Alles ist wichtig!
Und letzten Endes ist dann eben doch nichts mehr hervorgehoben. Die
Gestaltung von Websites fordert Bescheidenheit bei der Auswahl der
Mittel. Nur dann ist eine Hervorhebung und Priorisierung von Inhalten
und Funktionen möglich.
Als logische Konsequenz daraus lässt sich im Verlauf der vergangenen
Jahre ein eindeutiger Trend weg von der rein visuell-dekorativ gestalteten
Website hin zu ergonomischen, medien- und anwendergerechten
Internetangeboten erkennen. Erfolgreich sind insbesondere klare
Seitenraster und benutzerfreundliche Prinzipien wie die bewährte räumliche
Platzierung der benötigten Navigationselemente (vgl. die Nielsen-
Studie) und der sparsame Einsatz von Signalfarben, Bildern und
Animationen.
Und das aus gutem Grund. Navigationselemente, die als solche nicht
erkannt werden, erschweren dem Anwender das Auffinden der
Information. Er ist mehr mit dem Verstehen der Funktionalität und der
Interpretation der Website als mit der eigentlichen Wissensaufnahme
beschäftigt.
Eine gute Konzeption stellt daher die Inhalte in den Mittelpunkt und
unterstützt die Informationsaufnahme durch eine verständliche, intuitiv
bedienbare Navigation. Eine klare Gliederung der Bildschirmoberfläche
in separate Bereiche für Inhalt und Navigation hat sich bewährt
und etabliert.
5

VORWORT
Das spricht für die Unterteilung der Hauptnavigation in Spalten.
Menüoptionen, die in Spalten angeordnet sind, werden – so jüngste
Untersuchungen – zu 20 bis 30 Prozent schneller verarbeitet als in zeilenweise
aufgebauten Menüs.
Darüber hinaus vermitteln Durchgängigkeit und Beständigkeit in der
Gestaltung dem Anwender „Erfolgserlebnisse“. Je mehr seine Erwartungshaltungen
erfüllt werden und eine konsistente Gestaltung bereits
Gelerntes bestätigt, umso schneller und zielsicherer kann er das Informationsangebot
nutzen. Er zieht eine positive Bilanz aus seinem virtuellen
Rundgang durch die Max-Planck-Gesellschaft. Die Akzeptanz der
Website wird direkt und indirekt erhöht.
Gutes Webdesign führt zu einer optimalen Strukturierung von Informationen
und Kommunikationsabläufen. Der Gestalter schafft dabei
einen Raum, in dem sich der Nutzer frei bewegen und auf neue
Informationen konzentrieren kann. Zudem sollte sich der Nutzer an jeder
Stelle der Website im Klaren darüber sein, welchen Weg er bisher
zurückgelegt hat, an welcher Stelle der Website er sich gerade befindet
und welche Navigationsmöglichkeiten ihm für weitere Themen zur
Verfügung stehen.
6

VORWORT
Allgemeine Hinweise
Dieses Handbuch und die beiliegende CD-ROM richten sich an alle,
die für die Gestaltung der Internetseiten der Institute und Einrichtungen
der Max-Planck-Gesellschaft zuständig sind, sowie an beauftragte
Agenturen, Grafiker und Programmierer. Ein weiteres Handbuch widmet
sich dem Design der Internetseiten der Max-Planck-Gesellschaft.
Das in diesem Handbuch beschriebene Design für die Darstellung der
Max-Planck-Institute im Internet ist die logische Fortsetzung der bereits
seit dem Jahr 1999 für den Printbereich gültigen Corporate-Design-
Richtlinien. Ein einheitliches Erscheinungsbild kann nur entstehen,
wenn alle Medien konsequent nach den für den Print- und Internetbereich
gültigen Richtlinien gestaltet werden.
Navigation
Alle wesentlichen Navigationselemente sind an „gelernten“ Positionen
platziert.
– Wort-Bild-Marke: links oben
– Suche: rechts oben
– Haupt-Navigation: linker Seitenrand
– Meta-Navigation: Kopfzeile
Gestaltung und Verwendung von Links
Kommentierte Menüpunkte im Content-Bereich:
Pfeil-Icon, Verdana bold, 10 Pixel
Farbe: Schwarz, kein Rollover
Interne Links am Seitenanfang:
Pfeil-Icon, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
Externe Links am Seitenanfang:
Pfeil-Icon, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
Anker am Seitenanfang:
Pfeil-Icon, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
Link zum Seitenanfang:
Pfeil-Icon, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
7

VORWORT
Links zu Dokumenten im neuen Fenster (z.B. Presseinformationen):
Dokument-Icon, Verdana bold, 10 Pixel
Farbe: Schwarz, kein Rollover
Links zu PDF-Dokumenten:
PDF-Icon, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
Linklisten URLs:
Flaggen-Icon für Sprachversion, Verdana regular, 10 Pixel
Farbe: Grau, Rolloverfarbe: Rot
Textlinks im Content:
Pfeil-Icon, Verdana regular, 10 Pixel
Farbe: Rot, kein Rollover
URLs mit Icon:
ONW-Icon, Verdana regular, 10 Pixel
Farbe: Rot, kein Rollover
E-Mail-Adressen:
E-Mail-Icon, Verdana regular, 10 Pixel
Farbe: Rot, kein Rollover
Bildformate (Breite x Höhe), Beispiele siehe Seite 40 ff.
Nachrichten aktuell:
Kommentierte Links:
Bilder im Content-Fließtext:
Publikationen/Wochenspiegel:
Thumbnail-Anfahrtskarten:
Anfahrtskarten:
Institutsabbildung unter Adresse:
Porträts:
140 x 83
140 x 83
290 x 83
140 x 83
140 x Höhe
290 x Höhe
140 x 83
140 x 83
290 x Höhe
140 x 83
140 x 166
70 x 83
Standardbildformat
Standardbildformat
Schmales Querformat
Standardbildformat
Hochformat
Großes Querformat
Standardbildformat
Standardbildformat
Großes Querformat
Standardbildformat
Hochformat
Thumbnails
8

VORWORT
Farben
Die Farbgebung der grafischen Elemente orientiert sich hauptsächlich
an der Hausfarbe der Max-Planck-Gesellschaft (Standard-Grün:
Pantone 328 und Standard-Grau: Pantone 428). Hierfür wurden mediengerechte
Alternativen gewählt. Als Highlight-Farbe wurde Rot gewählt,
da Rot die höchste Signalwirkung hat (siehe Seite 30 ff.).
Schriften
Die Navigation besteht nahezu ausschließlich aus Systemtext:
auf Windows und Mac Verdana, l0 Pixel, auf UNIX Helvetica, l0 Pixel
(siehe dazu Seite 15 ff. und Anwendungsbeispiele Seite 37 ff.).
Technische Umsetzung
Für die technische Realisierung der HTML-Seiten oder die Umsetzung
mit dem Content-Management-System NPS steht ein Template-
Baukasten mit einer ausführlichen Dokumentation zur Verfügung.
Interessenten wenden sich bitte an: webmaster@mpg.de
9

1. Seitenraster
10

SEITENRASTER/BROWSERDARSTELLUNG
1024
760
2
2
2
2
1
1
3 3
Sichtbare Fläche
Die Website der Max-Planck-Gesellschaft sowie die Internetseiten der
Institute und Einrichtungen sind für die Standardauflösung von
800 x 600 Pixel angelegt, berücksichtigen aber auch die von vielen
Nutzern verwendete Monitorauflösung von 1024 x 768 Pixel.
Im letzteren Fall wird der Content zentriert und rechts und links
ergänzt durch:
1
Weißraum
2
3
die Fortführung der Farbbalken
Farbe: Grün R 124 / G 166 / B 166, # 7C A6 A6
eine Linienbegrenzung (vertikal, 1 Pixel gepunktet)
Farbe: Grün R 124 / G 166 / B 166, # 7C A6 A6
11

SEITENRASTER/FLÄCHENAUFTEILUNG
760
281 13 466
140 1 140 26 140 10 140 10 140
1
2
4
5
3
Flächenaufteilung
Jede Seite ist sowohl horizontal als auch vertikal in bestimmte
Bereiche unterteilt.
1
2
3
4
3
5
Die horizontale Gliederung trennt den
Meta-Navigationsbereich und
den Kopfbereich (mit den Logos von Gesellschaft und Institut) vom
Contentbereich.
Die vertikale Gliederung separiert den
Bereich der Haupt-Navigation vom
Contentbereich mit einer angegliederten
Iconspalte.
Diese bietet Platz für Download-Angebote, aktuelle
interne und externe Links sowie sonstige Zusatzfunktionen.
12

SEITENRASTER/FLÄCHENAUFTEILUNG
760
281 13 466
140 1 140 26 140 10 140 10 140
3
1
15
21
74
1 1
90
16
83
4
21
20
14
2
5
Spalte 1 Spalte 2
Spalte 3
Spalte 4 Spalte 5
Spaltenraster der Startseiten
Die Unterteilung der Seite in Absender-, Navigations- und Contentbereiche
erfolgt auf der Basis eines fünfspaltigen Grundrasters.
1
2
3
4
5
Absenderbereich
Haupt-Navigation
Meta-Navigation
Sub-Navigation
Contentbereich
13

2. Navigation
14

NAVIGATION/HAUPT-NAVIGATION
281
140 1 140
10 10
2
83
10
1
3
10
4
20
1
41
Haupt-Navigation
1
2
Die Haupt-Navigationspunkte sind in der ersten Spalte unterhalb des
Schlüsselbilds (Format: 140 x 83 Pixel) vertikal als einzelne gerahmte
Menüelemente (140 x 41 Pixel) angeordnet.
Font: Verdana regular
Größe: 10 Pixel, Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Grau R 102 / G 102 / B 102, # 66 66 66
3
4
Beim Anwählen eines Punktes erscheinen in der zweiten Spalte nach
unten ablaufend die hierarchisch tiefer liegenden Navigationspunkte
(siehe Seite 16 ff.).
Im aktiven Zustand erscheinen innerhalb der Menüelemente
quadratische Pfeilelemente (Format: 20 x 20 Pixel, siehe Seite 28),
die die Richtung des verfolgten Pfads markieren.
15

NAVIGATION/HAUPT-NAVIGATION
1 2
Navigations-Verhalten
Befindet sich der Mauszeiger über einem Menüelement
(Rollover-Status), wird das entsprechende Feld durch eine farbige
Hintergrundfläche markiert.
1
2
Button-Highlight
Befindet sich der Mauszeiger über einem Menüelement, erscheint die
farbige Hintergrundfläche.
Nach dem Klick weist das Pfeil-Icon auf weiterführende Menüpunkte
hin.
Farbe: Grün R 201 / G 219 / B 216, # C9 DB D8
(je nach gewähltem Farbset wird der mittlere Tonwert eingesetzt,
siehe Seite 31 ff.).
16

NAVIGATION/HAUPT-NAVIGATION
1
2
Navigations-Verhalten
1
Ist ein Menüpunkt durch Klick aktiviert, erscheinen im
Contentbereich gegebenenfalls die weiteren Submenüpunkte.
Zusätzliches Feature bei aktiviertem Javascript ist das
Pull-Down-Menü. Es erscheint, wenn sich der Mauszeiger über dem
Pfeil-Icon befindet und listet die zugehörigen Unterpunkte auf.
Sie zeigen das gleiche Rollover-Verhalten wie die Haupt-Navigation
und können durch Klick aktiviert werden.
2
Button-Highlight
Farbe: Grün R 201 / G 219 / B 216, # C9 DB D8
(je nach gewähltem Farbset wird der mittlere Tonwert eingesetzt,
siehe Seite 31 ff.).
17

NAVIGATION/HAUPT-NAVIGATION
281
140 1 140
10 10
1
2
6
6
6
23
23
33
6
23
3
1
Pull-Down-Navigation
Befindet sich der Mauszeiger über einem Menüelement
(Rollover-Status), wird das entsprechende Feld durch eine farbige
Hintergrundfläche (1-zeilig: 23 Pixel, 2-zeilig: 33 Pixel) markiert.
2
3
Button-Highlight
Farbe: Grün R 201 / G 219 / B 216, # C9 DB D8
(je nach gewähltem Farbset wird der mittlere Tonwert eingesetzt,
siehe Seite 31 ff.).
Button-Begrenzung (Rahmen):
Farbe: Grau R 204 / G 204 / B 204, # CC CC CC
Font: Verdana regular
Größe: 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Grau R 102 / G 102 / B 102, # 66 66 66
18

NAVIGATION/HAUPT-NAVIGATION
1
2
Navigations-Verhalten
1
Befindet man sich auf der nächsten Navigationsebene, werden die
vorher besuchten Ebenen durch farbige Hinterlegung von der
aktiven Stufe abgesetzt. So wird der durchlaufene Pfad markiert.
Farbe: Hellgrün R 230 / G 242 / B 242, # E6 F2 F2
(je nach gewähltem Farbset wird der hellste Tonwert eingesetzt,
siehe Seite 31 ff.).
2
Hat man die unterste Hierarchieebene erreicht, d.h. es gibt keine
weiterführenden Navigationspunkte, so erscheint kein Pfeil-Icon mehr
im aktiv markierten Navigationselement.
19

NAVIGATION/ META-NAVIGATION
12
25 25 25 25 25
25
466
140
2
1
15
4
5
28
16
6
16
25
26 64 89
1
3
21
20
Meta-Navigation
Die Meta-Navigationsleiste schließt die Seite nach oben hin ab.
Font: Verdana regular, 9 Pixel
Laufweite: 0
Farbe: Grau R 102 / G 102 / B 102, # 66 66 66
Hellgrüner Grund: R 230 / G 242 / B 242, # E6 F2 F2
(hellster Tonwert je nach gewähltem Farbset, siehe Seite 31 ff.).
1
Innerhalb der grünen Grafik steht der gewählte Menüpunkt als
Headline, darunter erscheinen die Submenüpunkte der Metanavigation.
Rollover, Button-Highlights
2
3
4
5
Metanavigation: R 201 / G 219/ B 216, # C9 DB D8
Submenü: R 230 / G 242 / B 242, # E6 F2 F2
(je nach gewähltem Farbset wird der mittlere bzw. hellste Tonwert
eingesetzt, siehe Seite 31 ff.).
Suchen
Font: Verdana bold
Größe: 10 Pixel, Laufweite: 0
Farbe: Rot R 204 / G 51 / B 51, # CC 33 33
Schnellzugriff
Das Pull-Down-Menü des Schnellzugriffs enthält Deep-Links zu
institutsspezifischen Schwerpunktthemen.
Font: Verdana regular, 10 Pixel
Laufweite: 0
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
20

NAVIGATION/INSTITUTSKENNUNG
10
306 10
Institutsname ohne eigene Bildmarke
1
64
32
Institutsname mit Bildmarke
2
64
32
Institutsname mit Bildmarke
2
64
32
Institutsname 3-zeilig
ohne eigene Bildmarke
64
32
Wort-Bild-Marke des Instituts
1
2
Auf Höhe der Linie des MPG-Logos (Minerva) – über der dritten und
vierten Spalte – steht die jeweilige Wort-Bild-Marke des Instituts
(siehe Seite 25 bzw. Seite 27).
Der Textteil des Logos wird in der Schrift
Font: Bodoni Book, 18 Pixel
Zeilenhöhe: 20 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
mit dem Antialising-Grad „crisp“ gesetzt und als GIF platziert.
Der Bildteil des Logos erscheint in den logospezifischen Farben
und wird mit einem Mindestabstand von 40 Pixel auf der Grundlinie
des Textteils platziert. Die maximale Höhe des Bildzeichens soll
58 Pixel nicht überschreiten.
21

NAVIGATION/SUB-NAVIGATION
1
2
3
Start-Content: Aktuell
1
2
3
„Reiter“-System
Der erste (links stehende) Punkt „Nachrichten“ ist beim Start der
Website automatisch aktiv (Unterlegung mit dem hellsten Tonwert des
Farbsets, siehe Seite 31). Der „Reiter“-Effekt entsteht im
Zusammenwirken mit der Content-Markierung.
Content-Markierung/fixierte Meldung
Der Start-Content wird idealerweise wöchentlich aktualisiert. Zur
besonderen Hervorhebung einer Meldung (beliebig zeitlich fixierbar
auf Position 1) wird das Contentfeld ebenfalls mit dem hellsten
Tonwert des Farbsets hinterlegt. Weitere Meldungen werden
chronologisch absteigend nachfolgend aufgeführt.
Trennlinien
Die einzelnen Themenpunkte werden durch eine durchgezogene
1-Pixel-Linie getrennt. Textabtand zur Linie entspricht der
normalen Zeilenhöhe von 14 Pixel.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
22

NAVIGATION/SUB-NAVIGATION
1010 6 25
25 25
466
1
2
7
6
6
21
20
14
3
128
83
14
1
Navigations-Headline
Font: Verdana bold, 10 Pixel
Laufweite: 0
Farbe: Weiß R 255 / G 255 / B 255, # FF FF FF
2
Sub-Navigation
Font: Verdana regular, 10 Pixel
Laufweite: 0
Farbe: Grau R 102 / G 102 / B 102, # 66 66 66
3
Content-Texte
Fonts: Verdana bold (Headlines, rote Hervorhebung)
Verdana regular (Fließtext)
Größe: 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farben: Schwarz R 0 / G 0 / B 0, # 00 00 00
Rot R 201 / G 51 / B 40, # CC 33 33
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
23

NAVIGATION/SUCHE
1
2
3
4
5
Suche
1
Die angebotene Suchfunktion liefert ein Suchergebnis auf Basis einer
Volltextsuche. Weitere Optionen zur Optimierung stehen innerhalb der
Expertensuche zur Verfügung.
Suchergebnis-Anzeige
2
3
4
5
Fonts: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana bold, 10 Pixel (Titel Suchergebnis)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00 (Fließtext)
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Link-Rollover, URL)
Datum, Ursprung und URL des gefundenen Dokuments werden mit
einer Zeilenhöhe von 18 Pixel abgesetzt.
Die einzelnen Treffer sind durch durchgezogene, horizontale
1-Pixel-Linien getrennt. Der Abstand zum Text beträgt 14 Pixel.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
24

NAVIGATION/SUCHE
466
10 146
125
32 125
28
4
64
64
32
1
16
2
3
32
12
8
12
8
12
Expertensuche
1
2
3
4
Bei der Expertensuche kann das Suchergebnis verfeinert werden,
z.B. durch Einschränkung auf einen bestimmten Zeitraum oder
Einschränkung der Suche innerhalb einer oder mehrerer ausgewählter
Subkategorien.
Die Subkategorien sind als Baumstrukturen angelegt. Durch Klick
auf das Plus- oder Minus-Icon vor einer Subkategorie können weitere
Unterkategorien geöffnet oder wieder geschlossen werden. Durch
Markierung der zugehörigen Checkbox werden die entsprechenden
Subkategorien ausgewählt.
Suchoptionen/Hilfe
Der Klick auf das Icon mit dem Fragezeichen öffnet einen Hilfetext,
der die Funktionen der Expertensuche erläutert.
Weitere Hinweise zur Implementierung der Suchfunktion finden Sie
in der technischen Dokumentation.
25

3. Grafische Elemente
26

GRAFISCHE ELEMENTE/LOGO-PLATZIERUNG
140
10 10
2
1
15
21
1
74
90
16
25
MPG-Logo (Minerva)
Die Wort-Bild-Marke der Max-Planck-Gesellschaft wird im oberen
linken Bereich der Seite platziert – und zwar spaltenfüllend in der
ersten vertikalen Spalte (Haupt-Navigationsspalte).
Das Logo erscheint in einer mediengerechten Variante der
Max-Planck-Hausfarbe.
Farbe: Grün R 124 / G 166 / B 166, # 7C A6 A6
(GIF auf beiliegender CD-ROM: minerva_logo.gif).
1
2
Das MPG-Logo verlinkt von der Institutswebsite zur Website der
Max-Planck-Gesellschaft.
Der darüberstehende Link in der Meta-Navigationsleiste verlinkt zur
Institutsstartseite.
27

GRAFISCHE ELEMENTE/ICONS
vor/interner Link
PDF
zurück
Dokument/Infotext
externer Link
Zoom/Vorschau
nach oben/Top
Film
nach unten/Anker
editieren/Formular ausfüllen
E-Mail
löschen
neues Fenster (ONW)
Download/speichern
Button-Pfeilelemente
(öffnen bei aktiviertem
Javascript das Pull-
Down-Menü)
Plus-Icon
Minus-Icon
drucken
Hilfe
Flagge für Sprachversion z.B.
bei Links
Icons
Die Icons wurden speziell für die Seiten der Max-Planck-Gesellschaft
entwickelt und erhöhen die Attraktivität und Benutzerfreundlichkeit.
Sämtliche Elemente sind in Signalrot mit grauem Schatten gestaltet.
Farben: Rot R 204 / G 51 / B 51, # CC 33 33
Grau R 204 / G 204 / B 204, # CC CC CC
Sämtliche Icons finden Sie im GIF-Format auf der beiliegenden
CD-ROM.
28

GRAFISCHE ELEMENTE/ICONS
10 6
10 6
1 2 1 2
3
4
Platzierung der Icons
1
2
3
4
Icons werden in der dafür vorgesehenen Icon-Spalte platziert. Daher
beträgt die maximale Breite der Icons (ohne Schatten) 10 Pixel. Der
graue Schatten kann in Einzelfällen auch in die rechts angrenzende,
6 Pixel breite Leerspalte (Abstand zwischen Icon- und Contentspalte)
laufen.
Die Icons werden linksbündig auf die Schriftgrundlinie gesetzt.
Ausnahmen:
Das PDF-Icon wird aufgrund seiner außergewöhnlichen Höhe um
drei Pixel nach unten versetzt).
Das Zeichen für externe Links schließt bündig mit der
Schriftoberkante ab.
29

GRAFISCHE ELEMENTE/FARBEN
R 102
G 102
B 102
Navigation, Links
Hex # 66 66 66
R 153
G 153
B 153
Trennlinien im Text-Contentbereich
Hex # 99 99 99
R 204
G 204
B 204
Button-Begrenzung (Rahmen)
Hex
# CC CC CC
R 204
G 51
B 51
Highlight-Farbe
für Icons, Textlinks, Rollovers, „suchen“-Button, „ok“-Button
Hex # CC 33 33
Allgemeine Basisfarben
Die Basisfarbtöne harmonieren mit den Farben des allgemein geltenden
Corporate Designs der Max-Planck-Gesellschaft.
Ergänzend zum dunklen Grün – der Hauptfarbe dieses Corporate
Designs – werden neutrale Grautöne verwendet.
Ein leuchtendes Rot signalisiert Funktionalität wie z.B. bei Textlinks.
30

GRAFISCHE ELEMENTE/FARBEN
– Headline-Hintergrundbalken
– Seitenbegrenzung oben und unten
– vertikale punktierte Begrenzungslinien
– Button-Highlights
– Hintergrundfarbe Meta-Navigation
– Content-Markierung der Startseite
– Navigationspfad-Unterlegung
R 124
G 166
B 166
R 201
G 219
B 216
R 230
G 242
B 242
1
Hex # 7C A6 A6 # C9 DB D8 # E6 F2 F2
R 121
G 164
B 196
R 200
G 220
B 236
R 226
G 239
B 249
2
Hex # 79 A4 C4 # C8 DC EC # E2 EF F9
R 208
G 186
B 137
R 232
G 220
B 194
R 244
G 238
B 223
3
Hex # D0 BA 89 # E8 DC C2 # F4 EE DF
R 214
G 171
B 171
R 233
G 213
B 213
R 243
G 235
B 235
4
Hex # D6 AB AB # E9 D5 D5 # F1 EB EB
1 2 3 4
Alternative Farbsets
Die hier vorgestellten vier alternativen Farbsets stehen bei der
Definition eines institutsspezifischen Farbklimas zur freien Auswahl.
Jedes der vier Sets besteht aus drei im RGB-Farbmodus definierten
Tonstufen einer Grundfarbe. Da diese vorrangig bei der Hintergrundund
Navigations-Flächengestaltung eingesetzt werden, tragen sie
entscheidend zum individuellen Charakter der Site bei (Anwendungsbeispiele
siehe folgende Seiten).
31

GRAFISCHE ELEMENTE/ALTERNATIVE FARBSETS
1
Grünes Farbset
Dunkle Flächenfarbe
(Standard-Grafikelemente):
R 124 / G 166 / B 166, # 7C A6 A6
Helle Flächenfarbe
(Meta-Navigations-Hintergrund/Fondfarbe):
R 230 / G 242 / B 242, # E6 F2 F2
Button-Highlights:
R 201 / G 219 / B 216, # C9 DB D8
32

GRAFISCHE ELEMENTE/ALTERNATIVE FARBSETS
2
Blaues Farbset
Dunkle Flächenfarbe
(Standard-Grafikelemente):
R 121 / G 164 / B 196, # 79 A4 C4
Helle Flächenfarbe
(Meta-Navigations-Hintergrund/Fondfarbe):
R 226 / G 239 / B 249, # E2 EF F9
Button-Highlights:
R 200 / G 220 / B 236, # C8 DC EC
33

GRAFISCHE ELEMENTE/ALTERNATIVE FARBSETS
3
Ockerfarbenes Farbset
Dunkle Flächenfarbe
(Standard-Grafikelemente):
R 208 / G 186 / B 137, # D0 BA 89
Helle Flächenfarbe
(Meta-Navigations-Hintergrund/Fondfarbe):
R 244 / G 238 / B 223, # E4 EE DF
Button-Highlights:
R 232 / G 220 / B 194, # E8 DC C2
34

GRAFISCHE ELEMENTE/ALTERNATIVE FARBSETS
4
Rötliches Farbset
Dunkle Flächenfarbe
(Standard-Grafikelemente):
R 214 / G 171 / B 171, # D6 AB AB
Helle Flächenfarbe
(Meta-Navigations-Hintergrund/Fondfarbe):
R 243 / G 235 / B 235, # F1 EB EB
Button-Highlights:
R 233 / G 213 / B 213, # E9 D5 D5
35

4. Typografie | Abbildungen
36

TYPOGRAFIE/SCHRIFTEN
1
2
1
2
Verdana regular als Standardschrift für Navigations- und Fließtext
Eine hohe X-Höhe, gleichmäßige Dickten und der ausgewogene
Schnitt machen die Verdana zu einer ausgezeichnet lesbaren
Webschrift.
Das Schriftbild ist klar und zeitgemäß, ohne modisch zu wirken.
Sie wird als Systemschrift (ungeglättet) durchgehend in einer
Schriftgröße von 10 Pixel mit einer regulären Zeilenhöhe von
14 Pixel eingesetzt – lediglich die Begriffe der Meta-Navigation
weisen eine Größe von 9 Pixel auf.
Falls Verdana regular nicht als Systemschrift vorhanden ist, wird
als Ersatzfont Helvetica regular verwendet.
Verdana bold für Headlines, Zwischenüberschriften u. Hervorhebungen
Navigations- und Content-Headlines werden in Verdana bold mit
11 Pixel gesetzt. Auch bei Hervorhebungen kommt Verdana bold
zum Einsatz.
Falls Verdana bold nicht als Systemschrift vorhanden ist, wird als
Ersatzfont Helvetica bold verwendet.
37

ABBILDUNGEN/SCHLÜSSELBILD
140
10 140 1
1
83
2
83
3
83
83
1
2
Schlüsselbild
Das Schlüsselbild im Standard-Bildformat von 140 x 83 Pixel zeigt
eine repräsentative, plakative Abbildung aus einem Fachbereich
des Instituts. Dabei bleibt es freigestellt, ob die gewählte Abbildung
immer erscheint oder sich in den unterschiedlichen Navigationsbereichen
ändert.
Headlines (Startseite)
Headlines werden in der Verdana bold mit einer Schriftgröße von
10 Pixel und einer maximalen Laufweite über alle drei Contentspalten
gesetzt. Die Standardfarbe ist Schwarz.
3
Fließtexte
Fließtexte laufen im linksbündigen Flattersatz bei 10 Pixel
Schriftgröße und 14 Pixel Zeilenhöhe. Der verwendete Schriftschnitt
ist Verdana regular. Die Standardfarbe ist Schwarz.
38

ABBILDUNGEN/BILDPLATZIERUNG
290
10
10 140
1
1
83
1
83
1
Bildplatzierung bei kommentierten Links
Kommentierte Menüpunkte im Contentbereich können auch mit
Bildern ergänzt werden. Die Bilder werden grundsätzlich rechtsbündig
und mit der oberen Textzeile abschließend platziert.
Außerdem wird je ein Pixel Abstand zu der horizontalen Trennline
und der vertikalen gepunkteten Linie eingehalten.
Es stehen folgende hier Bildformate zur Auswahl:
Standardbildformat: 140 x 83 Pixel (1-spaltig)
Schmales Querformat: 290 x 83 Pixel (2-spaltig)
1
Trennlinien
Der Abstand der grauen Trennlinien zur nachfolgenden Textzeile
entspricht der normalen Zeilenhöhe von 14 Pixeln.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
39

ABBILDUNGEN/WEITERE BILDFORMATE
10
290 1
1
x
Bildplatzierung im Content-Fließtext
Innerhalb der Contentfläche werden Abbildungen rechtsbündig und
mit der oberen Fließtextzeile abschließend platziert. Dabei stehen
diverse Bildformate zur Auswahl.
Der Text umfließt die Abbildungen linksseitig mit einem Mindestabstand
von 10 Pixel, der dem allgemeinen Spaltenabstand
entspricht. Soll innerhalb des Contents ein weiteres Bild eingesetzt
werden, so wird es bündig mit der obersten Textzeile des neuen
Absatzes platziert.
1
Bildformat
Großes Querformat: 290 Pixel x Höhe x (2-spaltig)
(nur im Content-Fließtext!)
Fonts: Verdana bold, 11 Pixel (Headlines)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
40

ABBILDUNGEN/WEITERE BILDFORMATE
10
140 1
1
83
1
Bildformate im Content-Fließtext
Standardformat: 140 x 83 Pixel (1-spaltig)
Fonts: Verdana bold, 11 Pixel (Headlines)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
41

ABBILDUNGEN/WEITERE BILDFORMATE
10
140 1
1
x
1
Bildformate im Content-Fließtext
Hochformat: 140 Pixel x Höhe x (1-spaltig)
Fonts: Verdana bold, 11 Pixel (Headlines)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
42

ABBILDUNGEN/WEITERE BILDFORMATE
316 10
140
1
1
166
1
376 10 70 1
2
83
1
Porträt-Formate im Content
1
2
Porträt: 140 x 166 Pixel (1-spaltig),
siehe auch Mitarbeiterdarstellung Seite 60 ff.
Thumbnail: 70 x 83 Pixel
Fonts: Verdana bold, 11 Pixel (Headlines)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Rot R 204 / G 51 / B 51, # CC 33 33
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
43

5. Weitere Anwendungen
44

WEITERE ANWENDUNGEN/STELLENANGEBOTE
1
2
Start-Content: Aktuell – Stellenangebote
1
2
Hier werden zunächst die aktuellsten Stellenangebote in Kurzform
dargestellt. Wie bei allen Seiten des Startcontents besteht die
Möglichkeit, eine Position zeitlich zu fixieren und durch die farbige
Hintergrundmarkierung besonders hervorzuheben. Nachfolgende
Stellen werden chronologisch nach unten verschoben. Durch Klick
auf ein ausgewähltes Angebot erhält man die ausführliche Stellenbeschreibung.
Die einzelnen Einträge werden durch eine horizontale
1-Pixel-Linie getrennt. Textabstand zur Linie entspricht der
normalen Zeilenhöhe von 14 Pixel.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
Fonts: Verdana bold, 11 Pixel
Verdana regular, 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Rot R 204 / G 51 / B 51, # CC 33 33 (Datum)
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
45

WEITERE ANWENDUNGEN/ADRESSDARSTELLUNG
140
10 1
1
3
83
2
1
1
Adressdarstellung
1
2
3
Haus-, Post- und Lieferanschriften (falls vorhanden) werden untereinander
angeordnet und durch eine durchgezogene, horizontale
Linie voneinander getrennt. Der Textabstand zur Linie entspricht der
normalen Zeilenhöhe von 14 Pixel.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
Abbildungen (idealerweise von Institutsgebäuden) werden entsprechend
den üblichen Platzierungsregeln für Content-Abbildungen
eingesetzt.
Fonts: Verdana bold, 11 Pixel (Headlines)
Verdana regular, 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
46

WEITERE ANWENDUNGEN/ANFAHRTSBESCHREIBUNG
140
10 1
5
1
2
83
1
6
3 4
Anfahrtsbeschreibung
1
2
3
4
5
6
Die Anfahrtsbeschreibungen werden nach den unterschiedlichen
Verkehrsmitteln gesondert aufgeführt und durch eine Kartenansicht
ergänzt.
Die Thumbnail-Darstellungen entsprechen dem Standard-Bildformat
140 x 83 Pixel.
Link zur Ansicht und Druckversion der Anfahrtskarten in einem
neuen Fenster (siehe Seite 62).
Link zur Druckversion der Seite.
Anker zum Rücksprung an den Seitenanfang.
Fonts: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana bold, 10 Pixel (Bereichs-Headline)
Verdana regular, 10 Pixel (Fließtext)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
47

WEITERE ANWENDUNGEN/FORMULARE
Formularanwendungen
Kontaktformular als Beispiel für eine Formulardarstellung innerhalb
des Gestaltungsrasters.
Alle Formulare basieren auf demselben Seitenraster.
48

WEITERE ANWENDUNGEN/FORMULARE
466
10 146
282
28
16
16
24
1
64
24
8
8
8
8
8
16
16
16
16
16
16
Flächenaufteilung
1
Die Formularfelder sind rechts im Contentbereich über 2 Spalten
angelegt. Die Feldbezeichnung steht linksbündig in der 1. Spalte.
Font: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana regular, 10 Pixel (Feldbezeichnung)
Laufweite: 0
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
49

WEITERE ANWENDUNGEN/LINKLISTEN
1
Linklisten
1
Wird der Bereich „Links“ aus der Meta-Navigation aufgerufen,
erscheinen zunächst die verschiedenen Linkkategorien zur Auswahl.
Fonts: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana bold, 10 Pixel (Linküberschrift)
Verdana regular, 10 Pixel (Fließtext, URL)
Laufweite: 0
Zeilenhöhe: 18 Pixel (Links)
14 Pixel (Fließtext)
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Link-Rollover)
50

WEITERE ANWENDUNGEN/LINKLISTEN
1
3
2
4
Linklisten
1
2
3
4
Subkategorien des ausgewählten Themenbereichs sind als Anker
am Seitenanfang aufgeführt. Die Unterkategorien werden mit durchgezogenen,
horizontalen 1-Pixel-Linen getrennt.
Das Top-Icon ermöglicht den Rücksprung zum Seitenanfang.
Die einzelnen Linkangebote (idealerweise mit Kommentar und URL)
werden nachfolgend aufgelistet – gekennzeichnet durch das Icon für
externe Links.
Flaggen-Icons kennzeichnen die angebotenen Sprachversionen des
jeweiligen Links.
Innerhalb einer Kategorie werden die einzelnen Linkangebote durch
gepunktete, horizontale 1-Pixel-Linien getrennt. Textabstand zu den
Linien entspricht der normalen Zeilenhöhe von 14 Pixel.
Linienfarbe: Grau R 153 / G 153 / B 153, # 99 99 99
Fonts: Verdana bold, 11 Pixel (Kategorie-Headlines)
siehe auch gegenüberliegende Seite
51

WEITERE ANWENDUNGEN/MITARBEITERLISTEN
1
2
3
4
Mitarbeiterlisten
1
2
3
4
Am Seitenanfang werden verschiedene Sortierungsoptionen angeboten.
Danach werden die einzelnen Mitarbeiter – je nach Sortierung – gelistet.
Der Abstand zur Sortierungsüberschrift beträgt eine Leerzeile mit der
regulären Zeilenhöhe von 14 Pixel.
Das Icon neben dem Namen verweist auf die ausführliche
Mitarbeiterdarstellung im neuen Fenster (siehe Seite 60 ff.),
der Link dahinter auf die Kurzdarstellung der zugehörigen Abteilung.
Die durchgezogene, horizontale 1-Pixel-Linie trennt die einzelnen
Bereiche innerhalb der Auflistung.
Farbe: Grau R 153 / G 153 / B 153, # 99 99 99
Hinweise zur Implementierung der Sortierungsfunktion finden Sie in der
technischen Dokumentation.
52

WEITERE ANWENDUNGEN/MITARBEITERLISTEN
466
10 16 212 16
212
2 1 2
1
Rasteraufteilung
1
2
Einen Sonderfall bezüglich der Spaltenaufteilung stellt die
Mitarbeiterliste dar.
Der Content ist hier horizontal in zwei Spalten mit jeweils links
angrenzender Iconspalte untergliedert –
linke Spalte: Mitarbeiter – rechte Spalte: zugehörige Abteilung.
Fonts: Verdana bold, 11 Pixel (Sortierungs-Headlines/Buchstaben)
Verdana bold, 10 Pixel (Namen)
Verdana regular, 10 Pixel (zugehörige Abteilung)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Link-Rollover)
53

WEITERE ANWENDUNGEN/PUBLIKATIONEN
1
2
3
Start-Content: Aktuell – Publikationen
1
2
3
Hier werden zunächst die aktuellsten Publikationen in Kurzform
dargestellt.
Durch Klick auf eine ausgewählte Publikation erhält man die
ausführlichen Publikationsdaten (complete reference).
Diese stehen auch per Klick auf das entsprechende Icon als
Download-Datei zur Verfügung.
Die einzelnen Einträge werden durch eine horizontale, gepunktete
1-Pixel-Linie getrennt. Textabstand zur Linie entspricht der
normalen Zeilenhöhe von 14 Pixel.
Linienfarbe: Grau R 153 / G 153 / B 153, # 99 99 99
Fonts: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana bold, 10 Pixel (Titel)
Verdana regular, 10 Pixel (Autoren, Quelle)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Quelle, Link-Rollover)
54

WEITERE ANWENDUNGEN/PUBLIKATIONEN
Publikationsdaten – Complete Reference
Hier werden die Publikationsdaten in der Übersicht gelistet.
Die einzelnen Angaben werden durch eine Leerzeile getrennt.
Fonts: Verdana bold, 11 Pixel (Seiten-Headline)
Verdana bold, 10 Pixel
Verdana regular, 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
55

WEITERE ANWENDUNGEN/SITEMAP
1
2
3
Sitemap
Die Sitemap zeigt hierarchisch den Strukturbaum der Website.
1
2
3
Die Menüpunkte der Hauptnavigation werden fett hervorgehoben,
alle Untermenüpunkte erscheinen im für Links üblichen Grau.
Die Icons für interne Links zeigen an, dass alle Punkte direkt
anwählbar sind.
Die durchgezogenen, horizontalen 1-Pixel-Linien trennen die
Navigationsbäume der Hauptmenüpunkte. Textabstand zur Linie
entspricht der normalen Zeilenhöhe von 14 Pixel.
Linienfarbe: Grau R 153 / G 153 / B 153, # 99 99 99
Fonts: Verdana bold, 10 Pixel (Hauptmenüpunkte)
Verdana regular, 10 Pixel (Submenüpunkte)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Link-Rollover)
56

WEITERE ANWENDUNGEN/SITEMAP
1010 6 16 16
14
14
Sitemap
Durch Einrücken der Submenüpunkte wird die Hierarchie der
Navigationsstruktur visualisiert. Dabei werden die üblichen
Abstände zu den Link-Icons eingehalten.
57

6. ONW – Open New Window
58

ONW/FLÄCHENAUFTEILUNG
567
581
Flächenaufteilung
Die ausführliche Mitarbeiterdarstellung wird bei aktiviertem
Javascript in einem neuen Fenster mit einer Größe von
567 x 581 Pixel geöffnet (ONW = Open New Window).
Ist kein Javascript aktiviert, wird die Seite in einem neuen
Browserfenster mit undefinierter Größe angezeigt.
Die Flächenaufteilung orientiert sich am Seitenraster der Homepage.
59

ONW/MITARBEITERDARSTELLUNG
530
10 140 60 10 16
147 10 147
15
75
16
21
20
14
1
2
Raster
Die Flächenaufteilung orientiert sich, wie u.a. die Logoplatzierung,
am Seitenraster der Homepage.
1
2
Die Anordnung der Navigationsspalte und das Navigationsverhalten
entsprechen der Homepage.
Da die zweite Ebene der Hauptnavigation entfällt, ist der Abstand
zwischen Navigations- und Contentbereich auf eine Breite von
60 Pixel verringert.
Der Contentbereich mit der vorangestellten Icon-Spalte ist über zwei
Spalten angelegt.
60

ONW/MITARBEITERDARSTELLUNG
10
140
1
166
2
Mitarbeiterdarstellung
1
2
Das Porträt entspricht mit 140 Pixel Breite der normalen Spaltenbreite.
Die Bildhöhe beträgt 166 Pixel (doppelte Höhe eines
Standardbilds).
Die E-Mail-Adresse und – falls vorhanden – die eigene Homepage
werden durch die entsprechenden Icons hervorgehoben.
Fonts: Verdana bold, 11 Pixel (Name)
Verdana regular, 10 Pixel
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00 (Fließtext)
Rot R 204 / G 51 / B 51, # CC 33 33 (Textlinks)
Grau R 102 / G 102 / B 102, # 66 66 66 (Navigation)
61

ONW/ANFAHRTSKARTEN
10
530
140 60 10
290 30
15
75
2
1
16
21
20
16
x
Anfahrtskarten
Die Anfahrtskarten werden bei aktiviertem Javascript in einem neuen
Fenster mit einer Größe von 567 x 581 Pixel geöffnet
(ONW = Open New Window).
Ist kein Javascript aktiviert, wird die Seite in einem neuen
Browserfenster mit undefinierter Größe angezeigt.
Die Flächenaufteilung orientiert sich am Seitenraster der Homepage,
siehe auch Spaltenraster der Mitarbeiterdarstellung.
1
2
Die Bildgröße der Karten beträgt 290 Pixel x Höhe x.
Die Navigation erlaubt zwischen der Darstellung einer Detailansicht
und einer Übersichtskarte zu wechseln.
62

ONW/ANFAHTRTSKARTEN
1
Anfahrtskarten
Unter der Karte, getrennt durch eine gepunktete, horizontale Linie,
ist die Kontaktadresse des Instituts platziert. Textabstand zur Linie
entspricht der normalen Zeilenhöhe von 14 Pixel.
Linienfarbe: Grau R 153 / G 153 / B 153, # 99 99 99
1
Per Klick auf das Druck-Icon kann die Seite direkt gedruckt werden.
Fonts: Verdana bold, 10 Pixel (Institutsname)
Verdana regular, 10 Pixel (Adresse, Links)
Laufweite: 0
Zeilenhöhe: 14 Pixel
Farbe: Schwarz R 0 / G 0 / B 0, # 00 00 00
Grau R 102 / G 102 / B 102, # 66 66 66 (Links)
Rot R 204 / G 51 / B 51, # CC 33 33 (Link-Rollover)
63

CD-ROM
CD-ROM
Auf dieser CD-Rom finden sie alle auf S. 28 vorgestellten Icons
sowie eine mediengerechte Version des MPG-Logos (Minerva)
im GIF-Format.
Hinweise zur technischen Dokumentation finden sie unter der Datei
index.html.
Zur Bestellung des Template-Baukastens wenden Sie sich bitte an:
webmaster@mpg.de
64

Herausgeber
Max-Planck-Gesellschaft zur Förderung der Wissenschaften e.V.
Referat für Presse- und Öffentlichkeitsarbeit
Hofgartenstraße 8
80539 München
Telefon: (0 89) 2108-1276
Fax: (0 89) 2108-1207
Internet: www.mpg.de
Projektleitung
Dr. Andreas Trepte
Telefon: (0 89) 2108-1238
andreas.trepte@mpg-gv.mpg.de
Technik/CMS
Michael Frewin
Telefon: (0 89) 2108-1273
webmaster@mpg.de
Konzept und Gestaltung
Oestreicher+Wagner Medientechnik GmbH
Frankenthaler Straße 20
81539 München
Internet: www.oew.de
Juli 2003