Logo der Universität Passau

Gestaltungsbeispiele für Webseiten

Sie haben Fragen, wie Sie ein Thema auf Ihrer Seite am besten visuell darstellen können. Sie überlegen, welche Darstellungsoption in Ihrem Fall geeignet ist oder wollen sich erst einmal orientieren, was für Gestaltungsmöglichkeiten überhaupt möglich sind? Auf dieser Seite finden Sie einige Beispiele, die Ihnen dazu einen ersten Überblick verschaffen sollen.

Zu allen Anwendungen finden Sie in der TYPO3-Online (Video-)Anleitungen.

Erscheinungsbild einer Seite

Wenn Sie eine Seite erstellen, können Sie diese entweder im 2- oder 3-Spalten-Layout anlegen. Das 3-Spalten-Layout bietet allerdings den Vorteil, dass die rechte Spalte, in der oftmals wichtige Informationen stehen, angezeigt wird. 
Hier finden Sie die Anleitung zum Seitenlayout.​​​​​​​

Beispiel

Akkordeonelement

Um viele Informationen auf einer Webseite anzeigen zulassen, ohne dabei die Leser*innen mit zu viel Text auf einmal zu überfordern. empfehlen wir das Akkordeonelement. (Weiterführende) Informationen, die nicht auf den ersten Blick sichtbar sein müssen, können so einfach "wegklappt" werden. Anhand der Überschriften der Elemente können sich die Leser*innen zunächst einen Überblick verschaffen und dann entscheiden, ob und welche Informationen für sie relevant sind, um diese dann zu aufzuklappen.
Die Anleitung für das Akkordeonelement finden Sie hier.

Beispiel

Wenn Sie einen Studiengang studieren, in dem Fremdsprachen verpflichtend sind oder Sie Sprachkurse freiwillig besuchen möchten und bereits Vorkenntnisse in dieser Sprache haben, müssen Sie am sprachlichen Einstufungstest teilnehmen. Das Ergebnis des Sprachtests ist entscheidend für eine Ihren Vorkenntnissen angemessene Einstufung in die Sprachkurse. Bis auf Englisch können Sie alle Sprachen ohne Vorkenntnisse beginnen.

Je nach Ergebnis des Tests werden Sie einem entsprechenden Sprachkursniveau zugewiesen. Anschließend können Sie sich zu einem Sprachkurs des entsprechenden Niveaus anmelden. Wenn Sie eine Sprache ohne Vorkenntnisse beginnen wollen, melden Sie sich für die Grundstufe 1.1 an.

Falls Sie über ein offizielles Sprachzertifikat verfügen (Beispiele) und damit eingestuft werden möchten, senden Sie Ihr Zertifikat bitte an Herrn Wolfang Killer im Sprachenzentrum und bitten um Einstufung.

Viele Sprachtests werden online durchgeführt. Sie können bereits vor der Orientierungswoche stattfinden. Sollten Sie sprachliche Vorkenntnisse in einer Sprache haben, für die es keinen Einstufungstest gibt, klären Sie bitte die angemessene Einstufung rechtzeitig vor Studienbeginn in einem persönlichen Gespräch mit einer Lektorin oder einem Lektor der entsprechenden Sprache.

Termine der Einstufungstests

FAQ zu den Einstufungstests des Sprachenzentrums

Anmeldung zu den Sprachkursen (nach absolviertem Einstufungstest)

Banner

Mit einem Banner können Sie den Einstieg einer Seite ansprechend gestalten. Im Banner werden ein Bild und eine Überschrift angezeigt. Auf langen Seiten können Sie bei Bedarf zusätzlich eine Binnennavigation anlegen. Diese funktioniert wie ein Inhaltsverzeichnis und führt direkt zu den jeweiligen Abschnitten. Sie wird unterhalb des Banners angezeigt und bewegt sich beim nach unten Scrollen mit.

Die Anleitung zum Banner finden Sie hier.

Beispiel

Überschrift als Banner-Bild

Ein Banner kann Themen auf einer Webseite einleiten oder von einander abgrenzen. Gerade bei Seiten mit viel Inhalt und Text ist ein Banner von Vorteil, da es visuell hilft, einen Überblick zu erhalten, ohne die Leser*innen zu überfordern.
Außerdem ist es möglich, Überschriften als Banner-Bild darzustellen. Dieses Feature ist ebenso hilfreich, um einen Themenwechsel ansprechend einzuleiten. 
Die Anleitung zum Überschrift-Banner finden Sie hier.

Beispiel

Button

Um visuell ansprechend auf eine andere Seite, Medien wie Podcasts, Dateien oder ähnliches hinzuweisen sowie auf diese zu verlinken, eignet sich das Plug in „Button". Die Besucher*innen der Seite brauchen das Element nur anklicken und kommen dann direkt zu weiteren Informationent. Falls gewünscht, können Sie den Button auch farblich gestalten.
Die Anleitung für den Button finden Sie hier.​​​​​​​

Dekoratives Bewegtbild

Das dekorative Bewegtbild sorgt dafür, dass Ihre Webseite lebendiger und interaktiver wirkt. Sie können so im wahrsten Sinne des Wortes Bewegung auf Ihre Seite bringen.
Die Anleitung für das dekorative Bewegtbild finden Sie hier.

Beispiel

Flipbook

Um eine pdf-Datei als eine Art Magazin zum Durchblättern anzubieten, eignet sich das „Flipbook"-Plug-In. Die Ansicht auf der Seite ist schöner als ein pdf nur per Link zum Download verfügbar zu machen.
Die Anleitung für das Flipbook finden Sie hier.​​​​​​​

Beispiel

Hier finden Sie näheres zu den Veranstaltungen der Perspektive Osteuropa

Highlight-Box

Um etwas mehr Text, als bei einem Teaser üblich, visuell ansprechend mit einem dekorativen Bild darzustellen, können Sie die Highlight-Box nutzen. Neben dem Bild wird Ihr Text in der optisch hervorgehobenen Box platziert, über einen Button gelangt man zu weiterführenden Informationen. Es gibt zwei verschiedene Darstellungsweisen, siehe in Bild 1 (Großformat) und Bild 2 (Standardformat)

Die Anleitung zur Highlight-Box finden Sie hier.

Beispiel Großformat

Beispiel Standardformat

Kacheln

Kacheln sind eine gute Möglichkeit, Informationen kompakt und visuell ansprechend darzustellen. Die Leser*innen finden so alle Informationen auf einen Blick und können bei weiterem Interesse auf die Kachel klicken, um so mehr zu erfahren. Sie können entweder zwei oder drei Kacheln nebeneinander platzieren, in der mobilen Ansicht werden diese untereinander angezeigt.
Die Anleitung zu den Kacheln finden Sie hier.

Beispiel im neuen Design

Kurz-Profil

Kurz- Profile sind besonders gut dazu geeignet, Personen oder auch ein Thema kurz und kompakt vorzustellen. So erhalten Leser*innen auf einen Blick alle Informationen und einen ersten Überblick.
Die Anleitung zu Kurz- Profilen finden Sie hier.​​​​​​​

Beispiel

Link-Box

Mit einerLink-Box können Sie mehrere Links visuell ansprechend und übersichtlich dartellen. Die Link-Box wird mit einem Bild, einer Übeschrift im Bild und den Links als Aufzählung angezeigt

Die Anleitung zur Link-Box finden Sie hier.

Link-Liste

Alternativ zur Link-Box können Sie eine Link-Liste nutzen, um mehrere Links anzeigen zu lassen. Layout-Option 1 ist mit einem grauen Hintergrund ausgestattet und für eine kurze Liste geeignet. Layout-Option 2 hat einen weißen Hintergrund und ist auf eine längere Liste ausgerichtet.

Die Anleitung zur Link-Liste finden Sie hier.

Logo-Element

Das Logo-Element ermöglicht die einfache Einbindung von Logos auf der Seite, ohne dass die Datei vorher passend zurechtgeschnitten werden muss. Außerdem ist es mit dem Logo-Container möglich, mehrere Logo-Elemente direkt nebeneinander einzubinden.

Die Anleitung zum Logo-Element finden Sie hier.

Beispiel

Rasterelemente (Container)

Um mehrere Inhaltselemte nebeneinander darzustellen, nutzen Sie am besten das Rasterelement. Dabei können Sie entweder zwei oder drei Container nebeneinander platzieren. Um zusätzlich das Layout noch ansprechender zu gestalen, können Sie die einzelnen Elemente auch mit einem farbigen Hintergrund versehen (Funktion „Farbcontainer"), um z. B. Inhalte voneinander abzugrenzen. Sie können auch unterschiedliche Längen der einzelnen Container auf eine einheitliche Länge einstellen.
Die Anleitung zum Rasterelement finden Sie hier.

Slider

Um mehrere Bilder anzeigen zu können, nutzen Sie am besten einen Slider. Die Nutzer*innen können selbstständig, mithilfe der unterhalb eingeblendeten Leiste, durch die verschiedenen Blider klicken.
Die Anleitung zum Slider finden Sie hier.​​​​​​​

Beispiel

Slideshare

Das Plug-In "Slideshare" eignet sich dazu, eine PDF-Datei übersichtlich und ansprechend darzustellen. Auf der Webseite wird die Datei dann wie eine Präsentation dargestellt, durch die sich die Leser*innen selbstständig durchklicken können. 
Die Anleitung zum Slideshare finden Sie hier.​​​​​​​

Beispiel

0 / 0

Teaser-Element

Mit dem Teaser-Element können Sie ein Thema oder eine Information visuell ansprechend darstellen. Neben einem Bild wird ein kurzer Textanriss, auch Teaser, angezeigt, der Interesse auf die vertiefenden Inhalte wecken soll. Der Teaser ist komplett verlinkbar, sodass man auf den dahinterliegenden Inhalt einfach verweisen kann

Die Anleitung zum Teaser-Element finden Sie hier.

Beispiel

Testimonial-Element

Um eine oder mehrere Personen mit einer Empfehlung oder einem kurzen Zitat visuell ansprechend darzustellen, können Sie ein Testimonial-Element verwenden. Es wird neben dem Porträt-Foto und dem Namen ein kurzer Einführungstext angezeigt. Über den „Mehr erfahren“-Link können Sie z. B. auf eine Seite mit einem längeren Zitat verweisen.

Die Anleitung zum Testimonial-Element finden Sie hier.

Beispiel

Sina Bittner

Sina Bittner

Studentin M.A. European Studies/ Doppelmaster Strasbourg

Hier kann man Kontakte fürs Leben knüpfen, sowohl privat als auch beruflich, und tolle Freundschaften schließen.

Studycheck

Stöbern Sie durch die Bewertungen auf Studycheck, um die ungefilterten Meinungen unserer Studierenden zu erfahren.

Mehr erfahren

Zitat-Box

Mit der Zitat-Box können Sie ein Zitat visuell ansprechend darstellen. Das Zitat wird in einer Box angezeigt.

Die Anleitung zur Zitat-Box finden Sie hier.

Beispiel

Kurse

Bitte besuchen Sie die Typo3-Einführungs- und Aufbaukurse, die von ZKK angeboten werden. Diese helfen Ihnen bei den ersten Schritten in Typo3 und führen in die wesentlichen Funktionen ein.

Feedback

Könnten wir Ihre Frage mit der TYPO3-Online-Hilfe beantworten? Senden Sie uns eine Rückmeldung, wenn Sie die gesuchte Information niciht gefunden haben an web-redaktion@uni-passau.de.

TYPO3-Support
Ich bin damit einverstanden, dass beim Abspielen des Videos eine Verbindung zum Server von Vimeo hergestellt wird und dabei personenbezogenen Daten (z.B. Ihre IP-Adresse) übermittelt werden.
Ich bin damit einverstanden, dass beim Abspielen des Videos eine Verbindung zum Server von YouTube hergestellt wird und dabei personenbezogenen Daten (z.B. Ihre IP-Adresse) übermittelt werden.
Video anzeigen