Die Webseiten der Freien Universität Berlin werden im zentralen Content Management System (CMS) der Universität ausgeliefert und sind für dieses optimiert. Für alle Webseiten die sich außerhalb des CMS befinden ist eine Absprache mit dem CMS-Team und dem Arbeitesbereich Medien hinsichtlich der Übernahme von Funktionalitäten sowie Design-Elementen der Webseite der Freien Universität erforderlich.

Die Gestaltungselemente der Webseite basieren auf den Vorgaben für gedruckte Publikationen. Für die Gestaltung der Webseiten gelten jedoch einige zusätzliche medienspezifische Design-Regeln. Ziel ist eine einheitliche und benutzerfreundliche Internetpräsenz.

Das Grundlayout der Webseiten ist flexibel (Responsive Design), passt sich den Anforderungen der gängigen Endgeräte automatisch an und ermöglicht eine dafür optimierte Darstellung und Navigation.

Elemente des Kopfbereichs

1. Logo der Freien Universität
2. Service-Navigation
3. Sprachauswahl
4. Direktzugang und frei definierbares Auswahlelement
5. Suche
6. Schriftzug (Elemente des Kopfbereichs für die Darstellung auf kleinen Bildschirmen, Breite kleiner als 768 px)
7. Such- und weitere Links Icon (Elemente des Kopfbereichs für die Darstellung auf kleinen Bildschirmen, Breite kleiner als 768 px)

Im Kopfbereich steht das Logo der Freien Universität Berlin in fester Position in der oberen linken Ecke der Gestaltungsfläche des Headers auf einem weißen Hintergrund.

Das Logo fungiert auf jeder Webseite als Link zur Homepage der Freien Universität Berlin (www.fu-berlin.de).

Identitätsbereich

1. Identitätsbereich zweizeilig (Fachbereich / Institut)
2. Identitätsbereich für die Darstellung auf kleinen Bildschirmen (Institut)
3. Identitätsbereich für die Darstellung auf kleinen Bildschirmen nach einem Klick auf dem Pfeil-Icon (Fachbereich / Institut)

Der Identitätsbereich dient der Orientierung des Nutzers und ist in seiner festen Position unterhalb des Logos als Gestaltungselement für alle Webseiten verbindlich. Er nimmt die gesamte Breite der Gestaltungsfläche ein und den Namen der Einrichtung bzw. des Projekts auf.

Der Name wird als Schriftzug (keine Grafik) in der Hausschrift "Nexus" mit ausreichendem Kontrast zum Hintergrund gesetzt. Damit wird auch eine Forderung der Regelungen zur Barrierefreiheit berücksichtigt.

Die Farbgestaltung des Identitätsbereichs orientiert sich am Farbklima des Corporate Designs der Freien Universität Berlin. Die Platzierung von weiteren Elementen wie Logos, Grafiken oder Bildern ist im Identitätsbereich nicht vorgesehen. Diese können im Inhaltsbereich, unterhalb des Identitätsbereichs, platziert werden.

Unter dem Identitätsbereich befindet sich die aufklappbare, horizontale Hauptnavigation die bis zu vier Ebenen enthalten kann.

1. Darstellung auf großen und standard Bildschirmen.
2. Darstellung auf kleinen Bildschirmen, (Breite kleiner als 768 px)

Zeilenorientiertes Layout

1. Zusammengehörige Inhalte werden zeilenweise in Blöcken, die über die gesamte Seitenbreite gehen, angeordnet. Innerhalb der Zeilen sind die Anzahl und die Breiten der Boxen bis zu einem gewissen Grade variabel. 
2. Durch die Linearisierung bleibt die Zusammengehörigkeit der Inhalte bei der Darstellung auf kleinen Bildschirmen erhalten.

Zweispaltiges Layout

1. Der Inhaltsbereich wird in zwei Spalten aufgeteilt. Eine linke Spalte für den Hauptinhalt und eine rechte für Zusatzinformationen, die Marginalspalte.
2. Bei der Darstellung auf kleinen Bildschirmen wird der Hauptinhalt vor der Maginalspalte angezeigt.

Der Inhaltsbereich ist der „Kern“ der Webseite: Er enthält die redaktionellen Inhalte, wie Texte, Grafiken, Links, Listen, Banner, Datentabellen, Formulare und Animationen, die individuell von den Webredakteuren eingefügt werden können.

Der Inhaltsbereich ist unterhalb des Identitätsbereichs positioniert und nimmt die volle Breite der Gestaltungsfläche ein.

Farbflächen und Grafikelemente, die im Inhaltsbereich zum Einsatz kommen, müssen dem Farbklima des Corporate Designs der Freien Universität Berlin entsprechen.

Bitte beachten Sie auch die Informationen zur barrierefreien Verwendung von Texten, Bildern und Tabellen in der rechten Spalte.

Der Fußbereich liegt unterhalb des Inhaltsbereichs. Er enthält bis zu vier Link-Blöcke. Die weiße Schrift steht dabei immer auf einem dunkelgrauen Hintergrund.

• frei definierte Linkliste
• Wiederholung der Service-Navigation aus dem Kopfbereich
• Social-Media
• Seitenfunktionen wie Drucken, RSS-Feed, usw.

Auf den Webseiten der Freien Universität Berlin wird die Systemschrift "Arial" eingesetzt. Überschriften werden in "NexusSans" als Webschrift gesetzt. Die Reihenfolge der Alternativschriften lautet: "Arial", "Helvetica", "sans-serif".

Die Gestaltung der Schrift – Schriftarten, -größen, -farben und Zeilenabstände – sind im Sinne der Barrierefreiheit in den Style Sheets zentral festgelegt und für alle Webseiten unter dem Corporate Design vereinheitlicht. Dabei werden ausschließlich relative Maßangaben verwendet (%, em). Bei auf diese Weise gestalteten Webseiten können die Nutzer die Darstellung der Schriftgröße in allen Browsern individuell bestimmen. 

Die Bildsprache der Webpräsenz der Freien Universität Berlin basiert auf authentischen und dokumentarischen Bildern mit hoher Aussagekraft. Collagen und verfremdende Nachbearbeitungen sind zu vermeiden.

Bilder, Grafiken und Tabellen benötigen Bildunterschriften. Text- und Bildelemente, die zusammengehören, sollen formal und inhaltlich klar als Einheit gekennzeichnet sein.

Bei Bildern soll ein Bildnachweis angegeben werden, um dem Urheberrecht gerecht zu werden.

Bildarchiv

Die Abteilung für Presse und Kommunikation stellt eine Reihe kostenloser Fotos online zur Verfügung, die Sie im Bildarchiv herunterladen können.