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
Ü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
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
Lehreinheit
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.
Beispiel
Unser Studienangebot
Unsere fünf Fakultäten bieten 39 qualitätsgesicherte Studiengänge. Sehr gute Studierbarkeit, innovative Lehrkonzepte sowie international ausgerichtete Programme zeichnen das Studienangebot der Universität Passau aus.
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
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.
Beispiel
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
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
Wochentag | Uhrzeit | Veranstaltung | Treffpunkt/ Veranstaltungsort |
---|---|---|---|
Dienstag, 26.03.2024 | 10:00-12:00 | Webinar: Wissenswertes für Erstsemester | Zoom |
15:00-17:00 | Webinar: Study Organization for Degree-Seeking Students (Englisch) | Zoom | |
Mittwoch, 27.03.2024 | 11:00-13:00 | Webinar: Wissenswertes für Erstsemester | Zoom |
Dienstag, 02.04.2024 | 12:00 | Anmeldung für für Kompetenz-Seminare und IT-Kurse | Stud.IP |
13:00 | Begrüßung und Beginn der Orientierungswochen (Stud.IP: 992024, Englisch) | AM HS10 + Zoom | |
16:30 | Campusführung mit AEGEE | NK Oberer Torbogen | |
20:00 | Quiz-Abend mit AEGEE | Café Lopes, Theresienstr. 8 | |
Mittwoch, 03.04.2024 | 09:00-12:00 | Besuch der Krankenkassen zur Beschaffung der für die Immatrikulation notwendigen Formulare | AOK; TK; Barmer GEK |
10:00 | Tutorenbüro für eure Fragen | Zoom | |
14:00 | Infoveranstaltung zu Anmeldung bei der Stadt und Aufenthaltstitel (Englisch) | AM HS9 +10 | |
19:00 | Wanderung zur Veste Oberhaus mit AEGEE | Rathausplatz 2 (Rathaus) | |
Donnerstag, 04.04.2024 | 09:00 | Einführung in die Bibliotheksnutzung(Englisch) | Foyer Zentralbibliothek |
10:00 | Einführung in die IT-Dienste (Englisch) | Zoom | |
14:00 | Tutorenbüro | Zoom | |
16:00 | How to survive in Germany mit AEGEE (Englisch) | Zoom | |
17:00 | Stadtführung mit AEGEE | NK Oberer Torbogen | |
18:00 | Bier Pong Turnier | Kapfinger-Bar, Dr.-Hans-Kapfinger-Straße 13 | |
Freitag, 05.04.2024 | 10:00 | Tutorenbüro | Zoom |
12:00 | Wanderung zum Mostbauern mit AEGEE | NK Oberer Torbogen | |
17:00 | Intercultural communication in an academic context | ITZ 004 | |
18:00 | Flying Dinner mit AEGEE | individuell, wird mitgeteilt | |
Samstag, 06.04.2024 | 19:00 | International Potluck Dinner mit AEGEE | ITZ 005 |
Sonntag, 07.04.2024 | 12:00 | Wanderung zum Ilz-Stausee mit AEGEE | NK Oberer Torbogen |
Montag, 08.04.2024 | 09:00 | Anmeldung für den Hochschulsport | Online |
10:00 | Fachschaft WIWI: Begrüßung und Beginn der Orientierungswochen für die Studiengänge an der Wirtschaftswissenschaftlichen Fakultät (Stud.IP: 29010) | ||
10:00 | Fachschaft SoBi: Begrüßung und Beginn der Orientierungswochenfür die Studiengänge an der Sozial- und Bildungswissenschaftlichen Fakultät (Stud.IP: 23501) | ||
10:00 | Fachschaft GeKu: Begrüßung und Beginn der Orientierungswochen für die Studiengänge an der Gesellschafts- und Kulturwissenschaftlichen Fakultät (Stud.IP: 080424) | ||
10:00 | Schnitzeljagd mit AEGEE | NK Oberer Torbogen | |
11:00 | Study Basics & Pizza for Faculty of Computer Science and Mathematics (FIM) Master’s Students (Stud.IP 244) | ITZ 004 + Zoom | |
14:00 | Tutorenbüro | Zoom | |
Dienstag, 09.04.2024 | 09:00 | Tutorenbüro | Zoom |
10:00 | Sprachenzentrum - Informationsveranstaltung zu den Deutschkursen und dem Einstufungstest | PHIL HS3 | |
10:00 | Beginn Einstufungstests Englisch und Französisch (bis 11.04.24 um 22:00 Uhr) | Online | |
11:00 | Beginn Einstufungstests Deutsch, Italienisch und Spanisch (bis 11.04.24 um 22:00 Uhr) | Online | |
12:00 | Campusführung mit AEGEE | NK Oberer Torbogen | |
13:00 | Vorprüfung der Unterlagen für die Ausländerbehörde (auch Anmeldung Stadt Passau für Studierende nach visafreier Einreise und Anträge auf Aufenthaltstitel) | ITZ 004 | |
15:30 | Quidditch-Spiel mit AEGEE & Three River Dragons Passau | Bschüttpark, Halser Str. 32 | |
16:00 | Informationsveranstaltung für die Studierenden der INSA Lyon | N.N. | |
19:00 | Pub Quiz mit der Fachschaft WIWI | WIWI HS8 | |
20:00 | Kinoabend mit AEGEE & UniKino | AM HS10 | |
Mittwoch, 10.04.2024 | 10:00 | Tutorenbüro | Zoom |
10:00-16:00 | One-on-one consulting with the International Student Assistants from FIM | ITZ 003 + Zoom | |
14:00 | Einführung in die IT-Dienste (Englisch) | Zoom | |
15:00 | Für Studierende der Fakultät für Informatik und Mathematik: Virtual Tutors' Office | Zoom | |
16:30 | Stadtführung mit AEGEE | NK Oberer Torbogen | |
17:00 | Wellbeing - Workshop | ITZ 005 | |
Donnerstag, 11.04.2024 | 10:00 | Tutorenbüro | Zoom |
14:00-17:00 | Besuch der Krankenkassen zur Beschaffung der für die Immatrikulation notwendigen Formulare | AOK; TK; Barmer GEK | |
14:00 | Einführung in die IT-Dienste (Deutsch) | IM HS13 | |
22:00 | Erasmusparty mit AEGEE | Zauberberg (Franz-Stockbauer-Weg 1) | |
Freitag, 12.04.2024 | 10:00 | Tutorenbüro | Zoom |
11:30 | Wanderung zum Andorfer mit der Fachschaft WIWI | WIWI Foyer unten | |
16:00 | Flunkyball mit AEGEE (entfällt bei schlechtem Wetter) | Innwiese (neben PHIL) | |
19:00 | Kneipentour mit der Fachschaft WIWI | WIWI Foyer unten | |
Samstag, 13.04.2024 | 10:00 | Campusführung mit AEGEE | NK Oberer Torbogen |
11:00 | Weißwurstfrühstück mit AEGEE | Gmoa, Kl. Exerzierplatz 15a | |
Sonntag, 14.04.2024 | 09:00 | Fahrt nach Regensburg mit AEGEE | Bahnhof Passau, Bahnhofstr. 29 |
14:00 | Quidditch-Spiel mit AEGEE & Three River Dragons Passau | Bschüttpark, Halser Str. 32 |
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
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
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.