TYPO3 - Designprinzipien der Webseiten: Unterschied zwischen den Versionen

ZIM HilfeWiki - das Wiki
K
 
(3 dazwischenliegende Versionen von 2 Benutzern werden nicht angezeigt)
Zeile 13: Zeile 13:
 
   
 
   
 
   
 
   
Dieser Artikel vermittelt Ihnen die wichtigsten Grundlagen und Gestaltungsprinzipien unseres Webauftritts, damit Sie Inhalte zielgruppengerecht, übersichtlich und benutzerfreundlich gestalten können.  
+
Dieser Artikel vermittelt Ihnen die wichtigsten Grundlagen und Gestaltungsprinzipien unseres Webauftritts, damit Sie Inhalte zielgruppengerecht, übersichtlich und benutzerfreundlich gestalten können.  
  
==== Zielgruppe und Inhalte ====
+
====Zielgruppe und Inhalte ====
 
Unsere Webseiten richten sich in erster Linie an externe Besucher*innen wie:  
 
Unsere Webseiten richten sich in erster Linie an externe Besucher*innen wie:  
 
*  Interessierte Schüler*innen und Studieninteressierte
 
*  Interessierte Schüler*innen und Studieninteressierte
* Potenzielle Mitarbeiter*innen und Bewerber*innen
+
*Potenzielle Mitarbeiter*innen und Bewerber*innen
* Gutachter*innen aus der Forschung
+
*Gutachter*innen aus der Forschung
* Die allgemeine Öffentlichkeit\
+
*Die allgemeine Öffentlichkeit\
 
Deshalb liegt der Fokus auf klaren, verständlichen und relevanten Informationen, die nach außen gut kommuniziert werden. Interne Informationen für Studierende, Mitarbeitende und Wissenschaftler*innen werden jedoch in separate, dafür vorgesehene Systeme ausgelagert (z. B. PANDA, Wiki, Confluence, Teams oder Sharepoint).
 
Deshalb liegt der Fokus auf klaren, verständlichen und relevanten Informationen, die nach außen gut kommuniziert werden. Interne Informationen für Studierende, Mitarbeitende und Wissenschaftler*innen werden jedoch in separate, dafür vorgesehene Systeme ausgelagert (z. B. PANDA, Wiki, Confluence, Teams oder Sharepoint).
  
Gerne beraten wir Sie für eine Umsetzung Ihres internen Wissensmanagements. Schreiben Sie uns dafür an [Mailto:zim@uni-paderborn.de zim@uni-paderborn.de.]
+
<bootstrap_alert color=info>Gerne beraten wir Sie für eine Umsetzung Ihres internen Wissensmanagements. Schreiben Sie uns dafür an [Mailto:zim@uni-paderborn.de zim@uni-paderborn.de.]</bootstrap_alert>
 
+
<bootstrap_accordion>
==== Zielgruppengerechte Inhalte und inklusive Sprache ====
+
<bootstrap_panel heading="'''Zielgruppengerechte Inhalte und inklusive Sprache'''">
 
Damit Ihre Inhalte für alle Nutzer*innen verständlich und ansprechend sind, ist eine zielgruppengerechte Aufbereitung essenziell. Dazu gehört eine aktive, moderne und inklusive Sprache, die niemanden ausschließt und den Prinzipien der Barrierefreiheit folgt.
 
Damit Ihre Inhalte für alle Nutzer*innen verständlich und ansprechend sind, ist eine zielgruppengerechte Aufbereitung essenziell. Dazu gehört eine aktive, moderne und inklusive Sprache, die niemanden ausschließt und den Prinzipien der Barrierefreiheit folgt.
  
Wir empfehlen Ihnen, sich an den [https://www.uni-paderborn.de/universitaet/presse-kommunikation-marketing/brandportal/vorgaben-statute redaktionellen Leitfaden]  zu halten, der konkrete Hinweise zur verständlichen, prägnanten und inklusiven Formulierung enthält. Ebenso wichtig sind die Vorgaben im Leitfaden zur Barrierefreiheit (folgt), der erklärt, wie Inhalte für Menschen mit Behinderungen bestmöglich gestaltet werden können.  
+
Wir empfehlen Ihnen, sich an den [https://www.uni-paderborn.de/universitaet/presse-kommunikation-marketing/brandportal/vorgaben-statute redaktionellen Leitfaden]  zu halten, der konkrete Hinweise zur verständlichen, prägnanten und inklusiven Formulierung enthält. Ebenso wichtig sind die Vorgaben im Leitfaden zur Barrierefreiheit (folgt), der erklärt, wie Inhalte für Menschen mit Behinderungen bestmöglich gestaltet werden können. </bootstrap_panel>
  
==== Inhaltliche Vorbereitung vor der technischen Umsetzung ====
+
<bootstrap_panel heading="'''Inhaltliche Vorbereitung vor der technischen Umsetzung'''">
 
Bevor Sie mit der technischen Umsetzung inTYPO3 beginnen, ist es wichtig, sich intensiv und kritisch mit Ihren bestehenden Inhalten auseinanderzusetzen. Nutzen Sie diese Phase, um zu prüfen, welche Inhalte für Ihre Zielgruppen wirklich relevant und aktuell sind. Dabei empfiehlt es sich:
 
Bevor Sie mit der technischen Umsetzung inTYPO3 beginnen, ist es wichtig, sich intensiv und kritisch mit Ihren bestehenden Inhalten auseinanderzusetzen. Nutzen Sie diese Phase, um zu prüfen, welche Inhalte für Ihre Zielgruppen wirklich relevant und aktuell sind. Dabei empfiehlt es sich:
  
* Die Zuständigkeiten für Inhalte zu klären  
+
*Die Zuständigkeiten für Inhalte zu klären
* Die Zielgruppe klar zu definieren
+
*Die Zielgruppe klar zu definieren
* Eine Bestandsaufnahme (Content Audit) aller vorhandenen Seiten und Inhalte durchzuführen
+
*Eine Bestandsaufnahme (Content Audit) aller vorhandenen Seiten und Inhalte durchzuführen
* Die verschiedenen Systeme zur Darstellung und Verwaltung von Inhalten zu kennen.
+
*Die verschiedenen Systeme zur Darstellung und Verwaltung von Inhalten zu kennen.
* Das Design und seine gestalterischen Möglichkeiten kennenzulernen  
+
*Das Design und seine gestalterischen Möglichkeiten kennenzulernen
* Die Seitenstruktur zu überdenken und übersichtlicher zu gestalten  
+
*Die Seitenstruktur zu überdenken und übersichtlicher zu gestalten
 
* Inhalte zu kürzen, zu verdichten und klarer zu formulieren
 
* Inhalte zu kürzen, zu verdichten und klarer zu formulieren
  
Dieser Schritt stellt sicher, dass Sie Ihre Webseiten inhaltlich optimieren. Dadurch erreichen Sie eine prägnantere und ansprechendere Darstellung, die Ihre Nutzer*innen effizienter informiert und überzeugt. Unser [[TYPO3 - Inhalte vorbereiten und strukturieren|Leitfaden zur Inhaltlichen Vorbereitung]] hilft Ihnen bei diesem wichtigen Schritt.
+
Dieser Schritt stellt sicher, dass Sie Ihre Webseiten inhaltlich optimieren. Dadurch erreichen Sie eine prägnantere und ansprechendere Darstellung, die Ihre Nutzer*innen effizienter informiert und überzeugt. Unser [[TYPO3 - Inhalte vorbereiten und strukturieren|Leitfaden zur Inhaltlichen Vorbereitung]] hilft Ihnen bei diesem wichtigen Schritt.</bootstrap_panel>
  
==== Nachhaltige Qualitätssicherung ====
+
<bootstrap_panel heading="'''Nachhaltige Qualitätssicherung'''">
 
Um die Qualität der Inhalte dauerhaft zu gewährleisten, sollten Sie vor der Veröffentlichung Ihre Texte auf Verständlichkeit, Rechtschreibung und korrekte Verlinkungen prüfen. Regelmäßige Pflege und Aktualisierung sind ebenso wichtig, um die Webseiten aktuell und vertrauenswürdig zu halten.  
 
Um die Qualität der Inhalte dauerhaft zu gewährleisten, sollten Sie vor der Veröffentlichung Ihre Texte auf Verständlichkeit, Rechtschreibung und korrekte Verlinkungen prüfen. Regelmäßige Pflege und Aktualisierung sind ebenso wichtig, um die Webseiten aktuell und vertrauenswürdig zu halten.  
  
Zur Unterstützung empfehlen wir unseren [[TYPO3 - Webseitenueberpruefung und Qualitaetssicherung|Leitfadens zur Webseitenüberprüfung und Qualitätssicherung,]] der verschiedene Prüfpunkte bereitstellt und Ihnen hilft, Fehler zu vermeiden.
+
Zur Unterstützung empfehlen wir unseren [[TYPO3 - Webseitenueberpruefung und Qualitaetssicherung|Leitfadens zur Webseitenüberprüfung und Qualitätssicherung,]] der verschiedene Prüfpunkte bereitstellt und Ihnen hilft, Fehler zu vermeiden.</bootstrap_panel>
 +
</bootstrap_accordion>
  
==== Design- und Gestaltungsprinzipien ====
+
====Design- und Gestaltungsprinzipien====
 
Diese Grundsätze helfen Ihnen, Inhalte klar, übersichtlich und mobilgerecht zu gestalten. Erfahren Sie mehr, indem Sie die einzelnen Punkte öffnen.
 
Diese Grundsätze helfen Ihnen, Inhalte klar, übersichtlich und mobilgerecht zu gestalten. Erfahren Sie mehr, indem Sie die einzelnen Punkte öffnen.
 +
<bootstrap_accordion>
 +
<bootstrap_panel heading=''''Single-Page-Design ("Onepager")''''>
 +
Die Inhalte werden bevorzugt auf einer einzelnen, scrollbaren Seite dargestellt – das entspricht modernen Nutzungsgewohnheiten, vor allem auf mobilen Geräten. Statt viele kleine Unterseiten zu erstellen, bieten wir lange, inhaltlich gegliederte Seiten an, die Besucher*innen durch einfaches Scrollen erfassen können. </bootstrap_panel>
  
===== Single-Page-Design ("Onepager")  =====
+
<bootstrap_panel heading="'''Mobile First und Lesbarkeit'''">
Die Inhalte werden bevorzugt auf einer einzelnen, scrollbaren Seite dargestellt – das entspricht modernen Nutzungsgewohnheiten, vor allem auf mobilen Geräten. Statt viele kleine Unterseiten zu erstellen, bieten wir lange, inhaltlich gegliederte Seiten an, die Besucher*innen durch einfaches Scrollen erfassen können.
 
 
 
===== Mobile First und Lesbarkeit =====
 
 
Unsere Webseiten sind konsequent "mobile first" entwickelt. Das bedeutet:  
 
Unsere Webseiten sind konsequent "mobile first" entwickelt. Das bedeutet:  
  
* Inhalte sind vor allem für mobile Endgeräte optimiert und gut lesbar.
+
*Inhalte sind vor allem für mobile Endgeräte optimiert und gut lesbar.
* Layouts verzichten auf nebeneinander angeordnete Spalten, stattdessen werden Elemente untereinander dargestellt.
+
*Layouts verzichten auf nebeneinander angeordnete Spalten, stattdessen werden Elemente untereinander dargestellt.
* Die Navigation ist übersichtlich gestaltet und unterstützt das leichte Navigieren auf kleinen Bildschirmen.
+
*Die Navigation ist übersichtlich gestaltet und unterstützt das leichte Navigieren auf kleinen Bildschirmen.</bootstrap_panel>
  
===== Navigation und Struktur =====
+
<bootstrap_panel heading="'''Navigation und Struktur'''">
  
* '''Vertikale Navigation mit Sticky-Menü:''' Innerhalb einer Seite wird die Navigation über Sprungmarken (Anker) realisiert. Diese "Sticky Navigation" bleibt beim Scrollen stets sichtbar und ermöglicht direkten Zugriff auf wichtige Seitenabschnitte.
+
*'''Vertikale Navigation mit Sticky-Menü:''' Innerhalb einer Seite wird die Navigation über Sprungmarken (Anker) realisiert. Diese "Sticky Navigation" bleibt beim Scrollen stets sichtbar und ermöglicht direkten Zugriff auf wichtige Seitenabschnitte.
* '''Burger-Menü für Seitenwechsel:''' Um zwischen verschiedenen Seiten zu wechseln, nutzen wir ein großes, gut sichtbares Burger-Menü sowie interne Verlinkungen.
+
*'''Burger-Menü für Seitenwechsel:''' Um zwischen verschiedenen Seiten zu wechseln, nutzen wir ein großes, gut sichtbares Burger-Menü sowie interne Verlinkungen.
* Verschaffen Sie sich in unserer [[TYPO3 - Navigation|Übersicht über alle Navigationselemente]] einen Überblick über die weiteren Möglichkeiten, die sie nutzen können, um Besucher*innen durch die Webseite zu führen.
+
*Verschaffen Sie sich in unserer [[TYPO3 - Navigation|Übersicht über alle Navigationselemente]] einen Überblick über die weiteren Möglichkeiten, die sie nutzen können, um Besucher*innen durch die Webseite zu führen.</bootstrap_panel>
  
===== Bild- und Visueller Fokus =====
+
<bootstrap_panel heading="'''Bild- und Visueller Fokus'''">
 
Unser Design ist stark bildorientiert: Große Headerbilder und bildgebundene Inhaltselemente sorgen für eine visuelle Ansprache und unterstützen die Textinhalte. Deshalb verwenden wir hochwertige, professionelle Fotos, die über eine [https://confluence.uni-paderborn.de/spaces/BiDa/pages/74646701/Bilddatenbank+Startseite zentrale Bilddatenbank] verfügbar sind.  
 
Unser Design ist stark bildorientiert: Große Headerbilder und bildgebundene Inhaltselemente sorgen für eine visuelle Ansprache und unterstützen die Textinhalte. Deshalb verwenden wir hochwertige, professionelle Fotos, die über eine [https://confluence.uni-paderborn.de/spaces/BiDa/pages/74646701/Bilddatenbank+Startseite zentrale Bilddatenbank] verfügbar sind.  
 +
Zur besseren Orientierung auf den Webseiten hilft es zudem, wenn Sie versuchen, Ihre Abschnitte klar visuell zu gliedern. Eine beliebte Lösung dafür ist zum Beispiel, dass [[TYPO3 - Highlighted Section|Highlighted Sections]] und Abschnitte ohne Hintergrundfarbe sich abwechseln.
  
Zur besseren Orientierung auf den Webseiten hilft es zudem, wenn Sie versuchen, Ihre Abschnitte klar visuell zu gliedern. Eine beliebte Lösung dafür ist zum Beispiel, dass [[TYPO3 - Highlighted Section|Highlighted Sections]] und Abschnitte ohne Hintergrundfarbe sich abwechseln.  
+
Außerdem finden Sie Informationen zum allgemeinen Auftritt der Universität Paderborn im [https://www.uni-paderborn.de/universitaet/presse-kommunikation-marketing/brandportal Brand Portal].</bootstrap_panel></bootstrap_accordion>
  
Außerdem finden Sie Informationen zum allgemeinen Auftritt der Universität Paderborn im [https://www.uni-paderborn.de/universitaet/presse-kommunikation-marketing/brandportal Brand Portal].
 
  
==== Mehrsprachigkeit ====
+
====Mehrsprachigkeit====
 
Alle Webseiteninhalte sollen regelmäßig auf Deutsch und Englisch bereitgestellt werden. Ein in TYPO3 integriertes Übersetzungstool (DeepL) unterstützt Sie bei der Erstellung und Betreuung der englischen Inhalte, um eine durchgängige bilingualen Präsenz zu gewährleisten. Lesen Sie dazu auch unsere [[TYPO3 Informationen ueber Sprachen innerhalb der Website der Universitaet Paderborn|Informationen über Sprachen innerhalb der Webseiten der Universität Paderborn.]]
 
Alle Webseiteninhalte sollen regelmäßig auf Deutsch und Englisch bereitgestellt werden. Ein in TYPO3 integriertes Übersetzungstool (DeepL) unterstützt Sie bei der Erstellung und Betreuung der englischen Inhalte, um eine durchgängige bilingualen Präsenz zu gewährleisten. Lesen Sie dazu auch unsere [[TYPO3 Informationen ueber Sprachen innerhalb der Website der Universitaet Paderborn|Informationen über Sprachen innerhalb der Webseiten der Universität Paderborn.]]
  
==== Effiziente Inhaltsarbeit: Mehrfachnutzung und zentrale Verwaltung ====
+
====Effiziente Inhaltsarbeit: Mehrfachnutzung und zentrale Verwaltung====
 
Um den Pflegeaufwand zu reduzieren und Inkonsistenzen zu vermeiden, setzen wir auf eine intelligente Mehrfachnutzung von Inhalten:  
 
Um den Pflegeaufwand zu reduzieren und Inkonsistenzen zu vermeiden, setzen wir auf eine intelligente Mehrfachnutzung von Inhalten:  
  
* '''Zentrale Datenbanken:''' Persönliche Profile, Forschungsdaten und weitere relevante Informationen werden zentral gespeichert (z. B. im [[Profilmanager]], [https://www.uni-paderborn.de/forschung/forschungsinformationen-an-der-upb FIS], [[RIS]]). Diese Daten können an unterschiedlichen Stellen auf der Webseite in verschiedenen Darstellungsformen genutzt werden.
+
*'''Zentrale Datenbanken:''' Persönliche Profile, Forschungsdaten und weitere relevante Informationen werden zentral gespeichert (z. B. im [[Profilmanager]], [https://www.uni-paderborn.de/forschung/forschungsinformationen-an-der-upb FIS], [[RIS]]). Diese Daten können an unterschiedlichen Stellen auf der Webseite in verschiedenen Darstellungsformen genutzt werden.
* '''Datensammlungen:''' Sammeln von inhaltlichen Elementen wie [[TYPO3 - Teaser - Themen Teaser Slider|Themen (Topics)]], [[TYPO3 - Count Box|Schlüsselkennzahlen]] oder [[TYPO3 - Testimonial einfuegen|Testimonials]], auf die über Inhaltselemente flexibel zugegriffen werden kann.
+
*'''Datensammlungen:''' Sammeln von inhaltlichen Elementen wie [[TYPO3 - Teaser - Themen Teaser Slider|Themen (Topics)]], [[TYPO3 - Count Box|Schlüsselkennzahlen]] oder [[TYPO3 - Testimonial einfuegen|Testimonials]], auf die über Inhaltselemente flexibel zugegriffen werden kann.
* '''Datensatz-Funktion:''' Einmal erstellte Web-Elemente können an mehreren Stellen gespiegelt werden. Änderungen am Original-Element werden automatisch überall übernommen.
+
*'''Datensatz-Funktion:''' Einmal erstellte Web-Elemente können an mehreren Stellen gespiegelt werden. Änderungen am Original-Element werden automatisch überall übernommen.
* '''Kategoriensystem:''' Kategorien wie Themenbereiche, Zielgruppen oder Veranstaltungstypen helfen, Inhalte logisch zu ordnen und zu filtern. Dies erleichtert sowohl die Pflege als auch die spätere Suche und Darstellung.
+
*'''Kategoriensystem:''' Kategorien wie Themenbereiche, Zielgruppen oder Veranstaltungstypen helfen, Inhalte logisch zu ordnen und zu filtern. Dies erleichtert sowohl die Pflege als auch die spätere Suche und Darstellung.
  
==== Webelemente und Beispiele kennenlernen ====
+
====Webelemente und Beispiele kennenlernen====
 
'''Webelemente sichten''': Machen Sie sich mit den zur Verfügung stehenden Web-Elementen vertraut.
 
'''Webelemente sichten''': Machen Sie sich mit den zur Verfügung stehenden Web-Elementen vertraut.
  
* [https://www.uni-paderborn.de/cms/inhaltselemente/uebersicht Visuelle Übersicht aller Elemente]
+
*[https://www.uni-paderborn.de/cms/inhaltselemente/uebersicht Visuelle Übersicht aller Elemente]
* [https://www.uni-paderborn.de/cms/inhaltselemente/uebersicht/web-elemente Tabellarische Darstellung aller Elemente mit Link zur Hilfeseite]  
+
*[https://www.uni-paderborn.de/cms/inhaltselemente/uebersicht/web-elemente Tabellarische Darstellung aller Elemente mit Link zur Hilfeseite]
  
 
'''Beispiele sichten:''' Schauen Sie sich andere UPB-Webseiten an, um die Design-Ansätze zu verstehen. Wir empfehlen beispielsweise die folgenden Seiten:  
 
'''Beispiele sichten:''' Schauen Sie sich andere UPB-Webseiten an, um die Design-Ansätze zu verstehen. Wir empfehlen beispielsweise die folgenden Seiten:  
  
* Seiten für Arbeitsgruppen/Professuren  
+
*Seiten für Arbeitsgruppen/Professuren  
**  [https://wiwi.uni-paderborn.de/dep2/bwl-insb-controlling-dr-ebert Schlanke Version ohne Unterseiten]
+
** [https://wiwi.uni-paderborn.de/dep2/bwl-insb-controlling-dr-ebert Schlanke Version ohne Unterseiten]
** [https://wiwi.uni-paderborn.de/dep3/winfo010 Umfangreiche Version mit Unterseiten für Team, Lehre, Forschung]
+
**[https://wiwi.uni-paderborn.de/dep3/winfo010 Umfangreiche Version mit Unterseiten für Team, Lehre, Forschung]
* Seiten für Bereiche (Institute/ Departments / Fakultäten / Fächer)  
+
*Seiten für Bereiche (Institute/ Departments / Fakultäten / Fächer)  
** [https://www.hni.uni-paderborn.de/ Heinz Nixdorf Institut]  
+
**[https://www.hni.uni-paderborn.de/ Heinz Nixdorf Institut]
** [https://phoqs.uni-paderborn.de/ Phoqs]
+
**[https://phoqs.uni-paderborn.de/ Phoqs]
** [https://wiwi.uni-paderborn.de/dep3 Department Wirtschaftsinformatik]
+
**[https://wiwi.uni-paderborn.de/dep3 Department Wirtschaftsinformatik]
** [https://physik.uni-paderborn.de/ Physik Institut]
+
**[https://physik.uni-paderborn.de/ Physik Institut]
** [https://www.muwi-detmold-paderborn.de/ Musikwissenschaftlichen Seminar Detmold/Paderborn]
+
**[https://www.muwi-detmold-paderborn.de/ Musikwissenschaftlichen Seminar Detmold/Paderborn]
** [https://kw.uni-paderborn.de/fach-soziologie Fach Soziologie]
+
**[https://kw.uni-paderborn.de/fach-soziologie Fach Soziologie]
** [https://kw.uni-paderborn.de/ Fakultät für Kulturwissenschaften]
+
**[https://kw.uni-paderborn.de/ Fakultät für Kulturwissenschaften]
* Seiten für Projekte  
+
*Seiten für Projekte  
** [https://trr318.uni-paderborn.de/ TRR 318 „Constructing Explainability”]
+
**[https://trr318.uni-paderborn.de/ TRR 318 „Constructing Explainability”]
** [https://trr318.uni-paderborn.de/ TRR 142 "Maßgeschneiderte nicht lineare Photonik"]
+
**[https://trr318.uni-paderborn.de/ TRR 142 "Maßgeschneiderte nicht lineare Photonik"]
  
 
Als Redakteur*in finden Sie in TYPO3 im Ordner CMS sowohl einige dieser Beispielseiten als auch die Übersicht mit allen Web-Elementen. Sie können die Seiten kopieren und bei Ihnen als Vorschauseiten einfügen oder einzelne Inhaltselemente daraus kopieren und einfügen. Bitte beachten Sie, dass die kopierbaren Beispielseiten nicht fortlaufend aktualisiert wurden und sie nicht mit den aktuellen Webseiten übereinstimmen. Sie dienen Ihnen lediglich zur Orientierung, wie Sie die Elemente anordnen und nutzen können.
 
Als Redakteur*in finden Sie in TYPO3 im Ordner CMS sowohl einige dieser Beispielseiten als auch die Übersicht mit allen Web-Elementen. Sie können die Seiten kopieren und bei Ihnen als Vorschauseiten einfügen oder einzelne Inhaltselemente daraus kopieren und einfügen. Bitte beachten Sie, dass die kopierbaren Beispielseiten nicht fortlaufend aktualisiert wurden und sie nicht mit den aktuellen Webseiten übereinstimmen. Sie dienen Ihnen lediglich zur Orientierung, wie Sie die Elemente anordnen und nutzen können.
  
==== Zusammenfassung: Wichtige Prinzipien für Ihre Arbeit ====
+
====Zusammenfassung: Wichtige Prinzipien für Ihre Arbeit====
 
{| class="wikitable"
 
{| class="wikitable"
 
|+
 
|+
 
!
 
!
===== '''Prinzip''' =====
+
====='''Prinzip'''=====
 
!
 
!
===== '''Beschreibung''' =====
+
====='''Beschreibung'''=====
 
!
 
!
 
!
 
!
Zeile 156: Zeile 157:
 
|-
 
|-
 
|'''Mehrsprachigkeit'''
 
|'''Mehrsprachigkeit'''
|Inhalte werden sowohl auf Deutsch als auch auf Englisch angeboten.
+
| Inhalte werden sowohl auf Deutsch als auch auf Englisch angeboten.
 
|
 
|
 
|
 
|
Zeile 166: Zeile 167:
 
|-
 
|-
 
|'''Webelemente und Best-Practice'''
 
|'''Webelemente und Best-Practice'''
|Webelemente, Templates und Beispielseiten stehen für Inspiration und effizientes Arbeiten zur Verfügung.
+
| Webelemente, Templates und Beispielseiten stehen für Inspiration und effizientes Arbeiten zur Verfügung.
 
|
 
|
 
|
 
|
 
|-
 
|-
 
|'''Qualitätssicherung'''
 
|'''Qualitätssicherung'''
|Inhalte werden sorgfältig geprüft, regelmäßig aktualisiert und inhaltlich sowie formal auf hohem Niveau gehalten.
+
| Inhalte werden sorgfältig geprüft, regelmäßig aktualisiert und inhaltlich sowie formal auf hohem Niveau gehalten.
 
|
 
|
 
|
 
|
 
|}
 
|}
  
==== Ihre Unterstützung als Redakteur*in ====
+
====Ihre Unterstützung als Redakteur*in====
 
Als Redakteur*in helfen Sie mit, die Webseite aktuell, übersichtlich und attraktiv zu gestalten. Nutzen Sie dafür die vorhandenen Werkzeuge zur Mehrfachnutzung, beziehen Sie die Zielgruppe stets mit ein, und setzen Sie auf klare, fokussierte Informationen. Bei Fragen zur Bedienung von TYPO3 oder zum Umgang mit dem Bildmaterial sowie zur Mehrsprachigkeit stehen Ihnen [[TYPO3 - Support und Schulungen|Support und Beratung]] jederzeit gerne zur Verfügung.  
 
Als Redakteur*in helfen Sie mit, die Webseite aktuell, übersichtlich und attraktiv zu gestalten. Nutzen Sie dafür die vorhandenen Werkzeuge zur Mehrfachnutzung, beziehen Sie die Zielgruppe stets mit ein, und setzen Sie auf klare, fokussierte Informationen. Bei Fragen zur Bedienung von TYPO3 oder zum Umgang mit dem Bildmaterial sowie zur Mehrsprachigkeit stehen Ihnen [[TYPO3 - Support und Schulungen|Support und Beratung]] jederzeit gerne zur Verfügung.  
  
 
Sollten Sie detaillierte Anleitungen zu einzelnen Funktionen oder Themen benötigen, finden Sie weitere Hilfeartikel und Tutorials in unserem Redaktionsbereich.  
 
Sollten Sie detaillierte Anleitungen zu einzelnen Funktionen oder Themen benötigen, finden Sie weitere Hilfeartikel und Tutorials in unserem Redaktionsbereich.  
  
==== Siehe auch ====
+
====Siehe auch====
  
* [[TYPO3|Alle TYPO3 Hilfeartikel im Überblick]]
+
*[[TYPO3|Alle TYPO3 Hilfeartikel im Überblick]]

Aktuelle Version vom 15. September 2025, 12:48 Uhr

Allgemeine Informationen
Information
Informationen
BetriebssystemAlle
ServiceTYPO3
Interessant fürAngestellte
HilfeWiki des ZIM der Uni Paderborn

no displaytitle found: TYPO3 - Designprinzipien der Webseiten




Dieser Artikel vermittelt Ihnen die wichtigsten Grundlagen und Gestaltungsprinzipien unseres Webauftritts, damit Sie Inhalte zielgruppengerecht, übersichtlich und benutzerfreundlich gestalten können.  

Zielgruppe und Inhalte[Bearbeiten | Quelltext bearbeiten]

Unsere Webseiten richten sich in erster Linie an externe Besucher*innen wie:

  •  Interessierte Schüler*innen und Studieninteressierte
  • Potenzielle Mitarbeiter*innen und Bewerber*innen
  • Gutachter*innen aus der Forschung
  • Die allgemeine Öffentlichkeit\

Deshalb liegt der Fokus auf klaren, verständlichen und relevanten Informationen, die nach außen gut kommuniziert werden. Interne Informationen für Studierende, Mitarbeitende und Wissenschaftler*innen werden jedoch in separate, dafür vorgesehene Systeme ausgelagert (z. B. PANDA, Wiki, Confluence, Teams oder Sharepoint).

Damit Ihre Inhalte für alle Nutzer*innen verständlich und ansprechend sind, ist eine zielgruppengerechte Aufbereitung essenziell. Dazu gehört eine aktive, moderne und inklusive Sprache, die niemanden ausschließt und den Prinzipien der Barrierefreiheit folgt.

Wir empfehlen Ihnen, sich an den redaktionellen Leitfaden  zu halten, der konkrete Hinweise zur verständlichen, prägnanten und inklusiven Formulierung enthält. Ebenso wichtig sind die Vorgaben im Leitfaden zur Barrierefreiheit (folgt), der erklärt, wie Inhalte für Menschen mit Behinderungen bestmöglich gestaltet werden können.

Bevor Sie mit der technischen Umsetzung inTYPO3 beginnen, ist es wichtig, sich intensiv und kritisch mit Ihren bestehenden Inhalten auseinanderzusetzen. Nutzen Sie diese Phase, um zu prüfen, welche Inhalte für Ihre Zielgruppen wirklich relevant und aktuell sind. Dabei empfiehlt es sich:

  • Die Zuständigkeiten für Inhalte zu klären
  • Die Zielgruppe klar zu definieren
  • Eine Bestandsaufnahme (Content Audit) aller vorhandenen Seiten und Inhalte durchzuführen
  • Die verschiedenen Systeme zur Darstellung und Verwaltung von Inhalten zu kennen.
  • Das Design und seine gestalterischen Möglichkeiten kennenzulernen
  • Die Seitenstruktur zu überdenken und übersichtlicher zu gestalten
  • Inhalte zu kürzen, zu verdichten und klarer zu formulieren

Dieser Schritt stellt sicher, dass Sie Ihre Webseiten inhaltlich optimieren. Dadurch erreichen Sie eine prägnantere und ansprechendere Darstellung, die Ihre Nutzer*innen effizienter informiert und überzeugt. Unser Leitfaden zur Inhaltlichen Vorbereitung hilft Ihnen bei diesem wichtigen Schritt.

Um die Qualität der Inhalte dauerhaft zu gewährleisten, sollten Sie vor der Veröffentlichung Ihre Texte auf Verständlichkeit, Rechtschreibung und korrekte Verlinkungen prüfen. Regelmäßige Pflege und Aktualisierung sind ebenso wichtig, um die Webseiten aktuell und vertrauenswürdig zu halten.

Zur Unterstützung empfehlen wir unseren Leitfadens zur Webseitenüberprüfung und Qualitätssicherung, der verschiedene Prüfpunkte bereitstellt und Ihnen hilft, Fehler zu vermeiden.

Design- und Gestaltungsprinzipien[Bearbeiten | Quelltext bearbeiten]

Diese Grundsätze helfen Ihnen, Inhalte klar, übersichtlich und mobilgerecht zu gestalten. Erfahren Sie mehr, indem Sie die einzelnen Punkte öffnen.

Die Inhalte werden bevorzugt auf einer einzelnen, scrollbaren Seite dargestellt – das entspricht modernen Nutzungsgewohnheiten, vor allem auf mobilen Geräten. Statt viele kleine Unterseiten zu erstellen, bieten wir lange, inhaltlich gegliederte Seiten an, die Besucher*innen durch einfaches Scrollen erfassen können.

Unsere Webseiten sind konsequent "mobile first" entwickelt. Das bedeutet:

  • Inhalte sind vor allem für mobile Endgeräte optimiert und gut lesbar.
  • Layouts verzichten auf nebeneinander angeordnete Spalten, stattdessen werden Elemente untereinander dargestellt.
  • Die Navigation ist übersichtlich gestaltet und unterstützt das leichte Navigieren auf kleinen Bildschirmen.


  • Vertikale Navigation mit Sticky-Menü: Innerhalb einer Seite wird die Navigation über Sprungmarken (Anker) realisiert. Diese "Sticky Navigation" bleibt beim Scrollen stets sichtbar und ermöglicht direkten Zugriff auf wichtige Seitenabschnitte.
  • Burger-Menü für Seitenwechsel: Um zwischen verschiedenen Seiten zu wechseln, nutzen wir ein großes, gut sichtbares Burger-Menü sowie interne Verlinkungen.
  • Verschaffen Sie sich in unserer Übersicht über alle Navigationselemente einen Überblick über die weiteren Möglichkeiten, die sie nutzen können, um Besucher*innen durch die Webseite zu führen.

Unser Design ist stark bildorientiert: Große Headerbilder und bildgebundene Inhaltselemente sorgen für eine visuelle Ansprache und unterstützen die Textinhalte. Deshalb verwenden wir hochwertige, professionelle Fotos, die über eine zentrale Bilddatenbank verfügbar sind. Zur besseren Orientierung auf den Webseiten hilft es zudem, wenn Sie versuchen, Ihre Abschnitte klar visuell zu gliedern. Eine beliebte Lösung dafür ist zum Beispiel, dass Highlighted Sections und Abschnitte ohne Hintergrundfarbe sich abwechseln.

Außerdem finden Sie Informationen zum allgemeinen Auftritt der Universität Paderborn im Brand Portal.


Mehrsprachigkeit[Bearbeiten | Quelltext bearbeiten]

Alle Webseiteninhalte sollen regelmäßig auf Deutsch und Englisch bereitgestellt werden. Ein in TYPO3 integriertes Übersetzungstool (DeepL) unterstützt Sie bei der Erstellung und Betreuung der englischen Inhalte, um eine durchgängige bilingualen Präsenz zu gewährleisten. Lesen Sie dazu auch unsere Informationen über Sprachen innerhalb der Webseiten der Universität Paderborn.

Effiziente Inhaltsarbeit: Mehrfachnutzung und zentrale Verwaltung[Bearbeiten | Quelltext bearbeiten]

Um den Pflegeaufwand zu reduzieren und Inkonsistenzen zu vermeiden, setzen wir auf eine intelligente Mehrfachnutzung von Inhalten:

  • Zentrale Datenbanken: Persönliche Profile, Forschungsdaten und weitere relevante Informationen werden zentral gespeichert (z. B. im Profilmanager, FIS, RIS). Diese Daten können an unterschiedlichen Stellen auf der Webseite in verschiedenen Darstellungsformen genutzt werden.
  • Datensammlungen: Sammeln von inhaltlichen Elementen wie Themen (Topics), Schlüsselkennzahlen oder Testimonials, auf die über Inhaltselemente flexibel zugegriffen werden kann.
  • Datensatz-Funktion: Einmal erstellte Web-Elemente können an mehreren Stellen gespiegelt werden. Änderungen am Original-Element werden automatisch überall übernommen.
  • Kategoriensystem: Kategorien wie Themenbereiche, Zielgruppen oder Veranstaltungstypen helfen, Inhalte logisch zu ordnen und zu filtern. Dies erleichtert sowohl die Pflege als auch die spätere Suche und Darstellung.

Webelemente und Beispiele kennenlernen[Bearbeiten | Quelltext bearbeiten]

Webelemente sichten: Machen Sie sich mit den zur Verfügung stehenden Web-Elementen vertraut.

Beispiele sichten: Schauen Sie sich andere UPB-Webseiten an, um die Design-Ansätze zu verstehen. Wir empfehlen beispielsweise die folgenden Seiten:

Als Redakteur*in finden Sie in TYPO3 im Ordner CMS sowohl einige dieser Beispielseiten als auch die Übersicht mit allen Web-Elementen. Sie können die Seiten kopieren und bei Ihnen als Vorschauseiten einfügen oder einzelne Inhaltselemente daraus kopieren und einfügen. Bitte beachten Sie, dass die kopierbaren Beispielseiten nicht fortlaufend aktualisiert wurden und sie nicht mit den aktuellen Webseiten übereinstimmen. Sie dienen Ihnen lediglich zur Orientierung, wie Sie die Elemente anordnen und nutzen können.

Zusammenfassung: Wichtige Prinzipien für Ihre Arbeit[Bearbeiten | Quelltext bearbeiten]

Prinzip[Bearbeiten | Quelltext bearbeiten]
Beschreibung[Bearbeiten | Quelltext bearbeiten]
Fokus auf externe Zielgruppen Inhalte richten sich hauptsächlich an externe Besucher*innen.
Zielgruppengerechte und inklusive Sprache Inhalte werden klar, verständlich und aktiv verfasst, dabei inklusiv und barrierefrei.
Inhaltliche Vorbereitung vor technischer Umsetzung Zielgruppen werden klar definiert, Inhalte kritisch geprüft und zielgruppengerecht und strukturiert aufbereitet, bevor eine Umsetzung in TYPO3 erfolgt. Schnittstellensysteme und interne Wissensmanagementsysteme werden von Anfang an mitgedacht.
Single-Page-Design Lange, scrollbare Seiten statt vieler Unterseiten.
Mobile First Optimierung der Darstellung für mobile Geräte, Verzicht auf Mehrspaltigkeit.
Visuelle Gestaltung Großer Bildfokus mit hochwertigen Fotos und graphischen Elementen.
Flexible Navigation Besucher*innen werden mit verschiedenen Navigationselementen durch die Webseite geführt.
Mehrsprachigkeit Inhalte werden sowohl auf Deutsch als auch auf Englisch angeboten.
Zentrale Inhaltsverwaltung Inhalte werden zentral angelegt, mehrfach genutzt und kategorisiert, um Redundanzen zu vermeiden und Pflegeaufwand zu minimieren.
Webelemente und Best-Practice Webelemente, Templates und Beispielseiten stehen für Inspiration und effizientes Arbeiten zur Verfügung.
Qualitätssicherung Inhalte werden sorgfältig geprüft, regelmäßig aktualisiert und inhaltlich sowie formal auf hohem Niveau gehalten.

Ihre Unterstützung als Redakteur*in[Bearbeiten | Quelltext bearbeiten]

Als Redakteur*in helfen Sie mit, die Webseite aktuell, übersichtlich und attraktiv zu gestalten. Nutzen Sie dafür die vorhandenen Werkzeuge zur Mehrfachnutzung, beziehen Sie die Zielgruppe stets mit ein, und setzen Sie auf klare, fokussierte Informationen. Bei Fragen zur Bedienung von TYPO3 oder zum Umgang mit dem Bildmaterial sowie zur Mehrsprachigkeit stehen Ihnen Support und Beratung jederzeit gerne zur Verfügung.

Sollten Sie detaillierte Anleitungen zu einzelnen Funktionen oder Themen benötigen, finden Sie weitere Hilfeartikel und Tutorials in unserem Redaktionsbereich.

Siehe auch[Bearbeiten | Quelltext bearbeiten]


Bei Fragen oder Problemen können Sie uns zu unseren Servicezeiten telefonisch oder per E-Mail erreichen:

☎ Helpdesk: +49 (5251) 60-5544 ☎ Medien: +49 (5251) 60-2821 E-Mail: zim@uni-paderborn.de

Oder Sie besuchen uns vor Ort: Sie finden das Notebook-Café gemeinsam mit dem Servicecenter Medien in H1.201.

Servicezeiten

Mo - Do Fr
Vor-Ort-Support 08:30 - 16:00 08:30 - 14:00
Telefonsupport 08:30 - 16:00 08:30 - 14:00
Servicecenter Medien 08:30 - 16:00 08:30 - 14:00
Cookies helfen uns bei der Bereitstellung des ZIM HilfeWikis. Bei der Nutzung vom ZIM HilfeWiki werden die in der Datenschutzerklärung beschriebenen Cookies gespeichert.