• Zum Inhalt springen
  • Zur Navigation springen
  • Zum Seitenende springen
Organisationsmenü öffnen Organisationsmenü schließen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
  • FAUZur zentralen FAU Website
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
  • RRZE
  • Videoportal
  • Lageplan und Anfahrt
  1. Friedrich-Alexander-Universität
  2. Regionales Rechenzentrum Erlangen
Friedrich-Alexander-Universität Dokumentation der WordPress-Themes und -Plugins
Menu Menu schließen
  • Grundlagen
    • Rahmenbedingungen für Webauftritte
    • Über WordPress
      • Grundsätzliches zum Webpublishing
      • Login und Navigation im Backend
      • Profil
      • Dashboard
      • Der Customizer
      • Einstellungen im Backend
      • Einen neuen Benutzer anlegen
    • Seiten
      • Eine Seite erstellen
      • Mehrere Seiten gleichzeitig konfigurieren
      • Seiten und Beiträge freigeben
    • Beiträge
    • Inhalte bearbeiten
      • Mediathek
      • Bilder
      • Galerie
        • Bildergalerie im Gridformat
      • Tabellen
      • Zitate
      • Formeln, Daten und Quellcode
    • Seitenstruktur erstellen
      • Kategorien und Schlagworte
      • Die Sidebar
    • Menüs
      • Menüs mit Widgets erstellen
    • Häufig gestellte Fragen
    Portal Grundlagen
  • Plugins
    • Plugins aktivieren
    • Externe Daten einbinden
      • Calendar
      • CRIS
      • FAU oEmbed
      • Jobs
      • Remoter
      • Statistik
      • UnivIS
      • Video
    • Neue Inhaltstypen erstellen
      • Expo
      • FAQ
      • Glossary
      • Person
      • Legal (ehemals ToS – „Terms of Service“)
      • RSVP
      • Synonym
    • Inhaltsseiten mit Funktionen erweitern
      • Contact Form 7
      • Downloads
      • Elements
      • Multilang
      • Ratebutton
      • TinyMCE Advanced
      • Verfallsdatum für Beiträge („Post-Expiration“)
    • Zugang beschränken
      • Access Control
      • Private Site
    • Beiträge teilen
      • Auto-Tweet
      • RSS
    • Plugin-Help
    • Spezialplugins
      • Newsletter
      • Progressive Web-App (PWA)
      • Workflow
    • Über Externe Plugins
    • Über FAU- und RRZE-Plugins
    Portal Plugins
  • Themes
    • FAU Einrichtungen
      • Umsetzungsbeispiele
      • Templates
        • Standardtemplate
        • Die Inhaltsseite mit Navi
        • Portalseite
        • Portalindexseite
        • Startseite
        • Startseite Fakultät
      • Shortcodes
        • Blogroll
        • Portalmenus
        • Bildlinks
    • FAU Events
      • Startseite
      • Widget-Bereiche und Footer-Inhalt
      • Referenten und Vorträge
      • Shortcodes für Referenten und Vorträge
      • Call for Papers
      • Externe Anmeldeformulare einbinden
    Portal Themes
  • Entwicklung
    • Design
      • Farben (Markendesign 2021)
      • Logos
        • Logos zentraler Anwendungen
        • Einsatz im Videoportal
        • Einsatz im Social Media und auf Online-Plattformen
      • Schriften
    • Einsatzkontext (Statistik)
      • Einrichtungsbezeichnungen
    • Versionsverwaltung Git
    • Einheitliche Vergabe von Versionsnummern
    • Vorgaben an Themes
    • Vorgaben an Plugins
    • Eigene Testinstanz
    • Serverkonfiguration
    • Statistiken zu Webauftritten
    Portal Entwicklung
  • Tutorials
    • Schnelleinstieg FAU Events
    • Hinweise zur redaktionellen Arbeit
    • Publikationsliste erstellen
    • Tipps und Tricks
    • Neue Daten in die FAU-Karte einbinden
    • Vortragsliste erstellen
    • Schnelleinstieg FAU Einrichtungen
      • Vorbereitungen
      • Navigation im Backend und allgemeine Grundlagen in WordPress
      • Ein Theme auswählen
      • Seitenlogo und Seiteninformationen ergänzen
      • Eine Startseite erstellen
      • Rechtstexte generieren
      • Inhaltsseiten erstellen für Anfänger
      • Beiträge und die dynamische Sidebar
      • Abmessungen für Bilder und Grafiken
      • Beiträge und die dynamische Sidebar
      • Portale und die Seitennavigation
      • Blogroll und Finetuning
    • Barrierefreiheit
      • Vorwort und Überblick
      • Einführung und Hintergründe
      • Bereitstellung und Pflege von Inhalten
      • Entwicklung und Design
      • Organisatorische und rechtliche Anforderungen
      • Satzungen
      • Tests der Barrierefreiheit
      • Weitere Leitfäden und relevante Informationsangebote
      • Kurzanleitung zur Verbesserung der digitalen Barrierefreiheit in Dokumenten aus Büroanwendungen
    • SEO – Search engine optimization
      • SEO Inhalte gestalten
      • SEO Grundlagen
      • SEO und Barrierefreiheit
    Portal Tutorials
  1. Startseite
  2. Tutorials
  3. Tipps und Tricks
  4. Tipp: Corporate Design

Tipp: Corporate Design

Bereichsnavigation: Tutorials
  • Barrierefreiheit
    • Vorwort und Überblick
    • Einführung und Hintergründe
    • Bereitstellung und Pflege von Inhalten
      • Spickzettel
    • Entwicklung und Design
      • Browser-Add-ons
    • Organisatorische und rechtliche Anforderungen
    • Satzungen
    • Tests der Barrierefreiheit
    • Weitere Leitfäden und relevante Informationsangebote
    • Kurzanleitung zur Verbesserung der digitalen Barrierefreiheit in Dokumenten aus Büroanwendungen
  • Digitale Hilfsmittel für Kongresse und Veranstaltungen an der FAU
  • Hinweise zur redaktionellen Arbeit
  • Neue Daten in die FAU-Karte einbinden
    • Neue Daten in die FAU-Karte einbinden – Tutorial
  • Publikationsliste erstellen
    • Publikationsliste erstellen – Tutorial
  • Schnelleinstieg FAU Einrichtungen
    • Vorbereitungen
    • Navigation im Backend und allgemeine Grundlagen in WordPress
    • Ein Theme auswählen
    • Seitenlogo und Seiteninformationen ergänzen
    • Eine Startseite erstellen
    • Rechtstexte generieren
    • Inhaltsseiten erstellen für Anfänger
    • Beiträge und die dynamische Sidebar
    • Abmessungen für Bilder und Grafiken
    • Portale und die Seitennavigation
    • Blogroll und Finetuning
  • Schnelleinstieg FAU Events
  • SEO – Search engine optimization
    • SEO Grundlagen
    • SEO Inhalte gestalten
    • SEO und Barrierefreiheit
  • Tipps und Tricks
    • Tipp: Seitenumbrüche
    • Tipp: Logos und Titel
    • Tipp: Brotkrümel-Navigation und Seitennavigation
    • Tipp: Corporate Design
    • Tipp: Statistik
    • Tipp: Ein Top-Event herausstellen
    • Tipp: GitHub – Kommunikation mit den Entwicklern
    • Tipp: Eine Kategorieseite ins Menü einbinden
    • Tipp: Die News-Sidebar nutzen
    • Tipp: Beiträge zu einem bestimmten Datum veröffentlichen
    • Tipp: Beiträge auf der Startseite halten
    • Tipp: Zeitumstellung im Kalender
    • Tipp: Möglichkeiten, Bilder und Grafiken hervorzuheben
  • Vortragsliste erstellen
    • Vortragsliste erstellen – Tutorial
  • WordPress Tipp der Woche

Tipp: Corporate Design

Immer wieder erreichen uns Mails von Nutzern, die mit den Templates für die Einrichtungen und Fakultäten unzufrieden sind. Sei es, dass die Farbe der Fakultät Missfallen erregt oder die Möglichkeiten der Menüführung – oft genug bietet das jeweilige Theme nicht die Freiheit, die man sich wünscht.

Sicher ist es schwierig, mit Vorgaben zurechtzukommen, die den eigenen Vorstellungen nicht entsprechen. Wenn man aber – wie die FAU – gern einen Wiedererkennungswert schaffen möchte und viele verschiedene Einrichtungen ihre eigenen Webauftritte haben, kommt man um so ein Corporate Design leider nicht herum. Wir fassen für Sie heute die wichtigsten Elemente zusammen, die im Sinne des Corporate Design beachtet werden sollten:

Die Startseite

Eine Startseite sollte unbedingt vorhanden sein und Sie sollten dafür auch das entsprechende Template benutzen: Für Einrichtungen und Lehrstühle das Template „Startseite“, für Fakultäten das Template „Startseite Fakultät“. Die einzelnen Elemente sind auf den verlinkten Seiten ausführlich beschrieben.

Warum unterschiedliche Startseiten?

Das Startseitentemplate für die Fakultäten ist auf sehr große, weit verzweigte Institutionen ausgerichtet, die viele News haben, viele Veranstaltungen ankündigen und Möglichkeiten brauchen, schnellen Zugriff auf die wichtigsten der sehr vielen Seiten anzubieten. Daneben lohnt sich die große Bühne mit dem Bildwechsler nur, wenn Sie wirklich häufig neue Artikel haben und so auch oft genug Neues präsentieren können.

Gerade der große Bildwechsler benötigt ein recht spezielles Bildformat; so muss für jeden Artikel ein zusätzliches Bild entsprechend bearbeitet werden. Die Mitarbeiter dafür hat man vielleicht an den Fakultäten und eventuell in dem einen oder anderen Department, an den Lehrstühlen eher nicht. In der Folge wurde ein Startseiten-Template für Einrichtungen und Lehrstühle zur Verfügung gestellt, das mit einem Banner auskommt und auch auf die Quicklink-Leiste verzichtet. Insgesamt ist das leichter zu handhaben und deutlich weniger pflegeintensiv.

Veranschaulichung der Unterschiede zwischen Startseite Fakultät und Startseite für Lehrstühle und Einrichtungen

Startseite Fakultät mit Quicklinks
und Fehler beim Bühnenbild
(Vergrößern)
Startseite für Einrichtungen
und Lehrstühle
(Vergrößern)
Startseite Fakultät mit Quicklinks und Fehler beim Bühnenbild
Startseite für Einrichtungen und Lehrstühle

Startseite Fakultät mit Quicklinks und Fehler beim BühnenbildStartseite für Lehrstühle und Einrichtungen

Die Navigationen

Navigationen, die überall vorhanden sind, sind die Metanavigationen oben und unten (jeweils im Seitenkopf und Seitenfuß) sowie die Hauptnavigation, die oberhalb des farbigen Balkens auf jeder Seite zu finden ist.

Metanavigation oben

Die Metanavigation im Seitenkopf enthält Links auf die FAU-Seite und die jeweilige Fakultät; in der Grundeinstellung ist die Fakultät ausgeschrieben, der Link kann aber gekürzt werden, wenn Sie als Nutzer das gern möchten. Weitere Menüpunkte können, müssen aber nicht in dieser Navigation vorhanden sein. Es empfiehlt sich, hier die Links auf einen Lageplan und Campus oder StudOn zu setzen.

Metanavigation unten

Hier sollte auf jeden Fall das Impressum verlinkt sein, dazu alles, was Sie auf allen Seiten greifbar haben möchten: Stellenangebote, Kontaktformular, dergleichen. Wichtig für beide Metanavigationen: Nicht überladen!

Hauptnavigation

Die Hauptnavigation ist das Herzstück des Corporate Design und ihre Möglichkeit, ihre Seite auf den ersten Blick sehr individuell zu gestalten. Sie soll aus Links auf Portalseiten bestehen, die jeweils themengebundene Startseiten sind und deswegen auch Unterseiten haben. Ohne Unterseite ist ein Portal kein Portal – und soll dann auch nicht in die Hauptnavigation eingebunden werden.

Das Menü in der Hauptnavigation besteht aus den Portalen und ihren Unterseiten. Dazu können Sie ein Zitat oder einen kleinen Text sowie auch ein Bild in den Portalseiten einfügen, die dann in der Hauptnavigation angezeigt werden, wenn man mit der Maus über den Menüpunkt fährt.

Portalmenüs

Für die Portalseiten sollen eigene Menüs angefertigt werden, die auf den jeweiligen Portalseiten unterhalb des Einführungstexts angezeigt werden. In diese Menüs werden die Unterseiten des Portals eingebunden. Die Links auf die Unterseiten bestehen dann aus dem jeweiligen Beitragsbild der Unterseite und ihrem Titel. Wenn es unterhalb der Seite noch weitere Seiten gibt, können diese als reiner Link darunter dargestellt werden.

Seitennavigation

Für die Navigation auf den Unterseiten stehen Ihnen zwei Möglichkeiten zur Verfügung:

Der Screenshot zeigt die Brotkrümelnavigation: Horizontal angeordnet, mit Schrägstrichen als Trennung.
Beispiel für eine Brotkrümelnavigation

Wenn Sie das Template „Standardtemplate“ wählen, ist nur die Breadcrumb-Navigation im farbigen Balken über dem Seiteninhalt vorhanden.

Für empfehlenswerter halten wir das Template „Inhaltsseite mit Navi„, das aus der Seitenhierarchie eine Navigation am linken Seitenrand erstellt.

Um den Besucher nicht zu verwirren, sollten Sie sich für einen Navigationstyp für Ihre Unterseiten entscheiden: Entweder die Navigation an der linken Seite (Inhaltsseite mit Navi) oder das Standardtemplate mit der Brotkrümelnavigation. Wenn Sie sich für Ersteres entscheiden und bei ein oder zwei Seiten auf das Standardtemplate zurückgreifen, ist das nicht weiter schlimm. Vermieden werden sollte eine Mischung, bei der der Besucher immer wieder nach seinem Menü suchen muss.

Die Struktur

Zur Struktur wurde ja bereits im Abschnitt über die Portalseiten einiges gesagt. Hier noch einmal zur Übersicht die im Corporate Design vorgesehene Strukturierung:

  • Startseite
    • Portalseite
      • Unterseite
      • Unterseite
      • Unterseite
    • Portalseite
      • Unterseite
      • Unterseite
      • Unterseite

Und so fort. Wir empfehlen unseren Nutzern eigentlich immer, vor der Erstellung der Seite eine Mindmap anzulegen, auf der sie sich eine sinnvolle Verteilung ihrer Inhalte sozusagen vorzeichnen. So eine Mindmap könnte so aussehen:

Mindmap, die eine Musterstruktur für Lehrstühle mit Startseite, Portalseiten und Unterseiten visuell darstellt.
Musterstruktur für Lehrstühle

 

Anhand einer solchen Vorlage ist die Erstellung der Hauptnavigation und der Portalmenüs ein Kinderspiel und sie verlieren dabei wenig Zeit, deswegen empfehlen wir dieses Vorgehen vor allem dann, wenn Sie bereits eine Homepage haben und diese in dem Design, das für die Fakultäten, Lehrstühle und Einrichtungen zur Verfügung gestellt wird, neu auflegen möchten.

Seitentemplates

Ihnen stehen verschiedene Seitentemplates zur Verfügung, die auch jeweils einen Zweck verfolgen:

  • Startseite: Wird nur ein einziges Mal benutzt, nämlich für die Startseite (die Startseite Fakultät ist den Fakultäten vorbehalten; bitte beachten Sie dies, um auch den Unterschied zu den darunter eingeordneten Einrichtungen zu zeigen)
  • Portalseite: Wird für die Portale, in die die Hauptmenüpunkte führen, genutzt. Sie muss einen einführenden Text und ein Portalmenü enthalten.
  • Portalindex: Kann ebenfalls als Portal genutzt werden; das Template hat den Trennbalken zwischen Content und Portalmenü nicht, damit man es auch nutzen kann, um eine Seite mit Bildlinks zu erzeugen (z. B. die Logos von Kooperationspartnern, jeweils mit Link dorthin unterlegt).
  • Inhaltsseite mit Navi: Die Seiten mit diesem Template sollten hierarchisch unterhalb der Portalseiten angesiedelt werden. Wenn sie in der Seitenhierarchie richtig eingeordnet sind, wird das Untermenü unterhalb des Portals automatisch erzeugt.
  • Standardtemplate: Dieses Template hat nur die Brotkrümelnavigation (Abbildung unter dieser Liste) zur Orientierung für den Besucher.

Allgemein gilt:

Kleinere Abweichungen vom Corporate Design sind natürlich möglich; auch empfehlen wir Ihnen, sich an uns zu wenden, wenn Ihnen auffällt, dass Ihnen ein Feature fehlt, das Sie dringend benötigen. Sollten viele unserer Nutzer ein bestimmtes Feature benötigen, können wir es auch umsetzen – Einzellösungen sind leider nicht möglich.

Insgesamt lässt sich sagen, dass ein Corporate Design immer ein Konsens ist. Manche begrüßen es begeistert, andere eher zähneknirschend. Wichtig ist aber, dass möglichst viele Mitglieder der „Corporation“ (in diesem Fall der FAU) diesen Konsens mittragen, um das gemeinsame Ziel zu erreichen: Den gemeinsamen Auftritt nach außen mit Wiedererkennungswert.

 

 

Regionales RechenZentrum Erlangen
(RRZE)

Martensstraße 1
91058 Erlangen
  • Kontakt
  • Webworking Blog
  • Impressum
  • Datenschutz
  • Barrierefreiheit
  • RSS Feed
  • GitHub
  • Twitter
Nach oben