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.

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.​​​​​​​

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.

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.​​​​​​​

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.

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.

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.​​​​​​​

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.​​​​​​​

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.

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.​​​​​​​

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.​​​​​​​

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.