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 (ZKK) | 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 | |
19:00 | Kneipentour mit AEGEE | NK Oberer Torbogen | |
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 | |
12:30-14:00 | Verteilung von Küchenutensilien - AEGEE-Passau x Sustainability Hub | IM 034 | |
14:00 | Infoveranstaltung zu Anmeldung bei der Stadt und Aufenthaltstitel (Englisch) | AM HS10 | |
18:00 | Speed Friending mit AEGEE | Innwiese (neben PHIL) | |
18:30 | Abendwanderung zur Veste Oberhaus mit AEGEE | Innwiese (neben PHIL) | |
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 | |
19:00 | Cook and Run mit AEGEE | individuell, wird mitgeteilt | |
Freitag, 05.04.2024 | 05:45 | Morgenwanderung zum Kühberg mit AEGEE | Innwiese (neben PHIL) |
07:00 | Frühstück mit AEGEE | Innwiese (neben PHIL) | |
10:00 | Tutorenbüro | Zoom | |
19:00 | Potluck im Rio mit AEGEE | Rio Cultural Bar | |
Samstag, 06.04.2024 | 09:00 | Ausflug zu "growing stone" mit AEGEE | Info mit Anmeldung |
Sonntag, 07.04.2024 | 13:00 | Wanderung um die Ilzschleife mit AEGEE | NK Oberer Torbogen |
Montag, 08.04.2024 | 08:00 | Beginn der Orientierungswochen der Fachschaft Informatik für die Studiengänge an der Fakultät für Informatik und Mathematik | https://fsinfo.fim.uni-passau.de/o-woche/ |
08: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) | https://www.wiwi.uni-passau.de/fachschaft-wiwi/orientierungswoche | |
10:00 | Fachschaft SoBi: Begrüßung und Beginn der Orientierungswochenfür die Studiengänge an der Sozial- und Bildungswissenschaftlichen Fakultät (Stud.IP: 23501) | https://www.sobi.uni-passau.de/fachschaft/ | |
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) | https://www.geku.uni-passau.de/fachschaft | |
11:00 | Study Basics & Pizza for Faculty of Computer Science and Mathematics (FIM) Master’s Students | ITZ 004 + Zoom | |
14:00 | Tutorenbüro | Zoom | |
15:15 | Gaudiolympics mit AEGEE | NK Oberer Torbogen | |
20:30 | Karaoke Night mit AEGEE | Shamrock Irish Bar, Roßtränke 5 | |
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 | ITZ 249 | |
19:00 | Pub Quiz mit der Fachschaft WIWI | WIWI HS8 | |
21:00 | Kapfinger Kneipe & Spiele mit AEGEE | Kapfinger Kneipe - Dr.-Hans-Kapfinger-Str. 13 | |
Mittwoch, 10.04.2024 | 10:00 | Tutorenbüro | Zoom |
10:00-16:00 (Mittagspause von 12:00-13:00) | Individuelle Beratung durch die Internationalen Tutoren an der FIM | ITZ 003, https://fsinfo.fim.uni-passau.de/o-woche/ | |
14:00 | Einführung in die IT-Dienste (Englisch) | Zoom | |
14:45 | Fußballturnier mit AEGEE | Sportzentrum | |
16:30 | Stadtführung mit AEGEE | NK Oberer Torbogen | |
17:00 | Making it in Passau – boost your personal wellbeing (Englisch) | ITZ 005 | |
20:00 | EU-elections Pub Quiz mit AEGEE (Deutsch) | Shamrock Irish Bar, Roßtränke 5 | |
Donnerstag, 11.04.2024 | 10:00 | Tutorenbüro | Zoom |
12:00-14:00 | Verteilung von Küchenutensilien - AEGEE-Passau x Sustainability Hub | IM 034 | |
13:00 | Mittagessen in der Mensa mit AEGEE | Mensa | |
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) | |
22:00 | Ende Einstufungstests Englisch, Französisch, Deutsch, Italienisch und Spanisch | Online | |
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 | Weißwurstfrühstück mit AEGEE | Gmoa, Kl. Exerzierplatz 15a |
13:00 | Fahrt nach Freising mit AEGEE | Hauptbahnhof Passau, Bahnhofstr. 29 | |
Sonntag, 14.04.2024 | 14:45 | Sonntagswanderung zum Cafe Blaas mit AEGEE | NK Oberer Torbogen |
13:30 | Semester Opening Eisbaden mit AEGEE | Innwiese (neben PHIL) | |
Freitag, 19.04.2024 | 14:00 | Navigating academic life in Passau successfully (English) | ITZ 005 |
Mittwoch, 24.04.2024 | 14:00-17:00 | Hochschulgruppeninfonachmittag des AStA Führung für internationale Studierende um 14:30 und 16:00 Uhr; Treffpunkt Mensaeingang (Wegen schlechtem Wetter verschoben.) | Mensavorplatz |
Montag, 06.05.2024 | 9:30 - 17:00 | Late Arrival Day | ITZ 005 |
Dienstag, 07.05.2024 | 18:00 | The essentials for your career in Germany (Vortrag auf Englisch; StudIP 65202) | WIWI HS7 |
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.