Hinweis

Ich habe das aktuelle Webdesign geändert. Grundlegende Elemente sind aber gleich geblieben.

Siehe auch Informationen zum gesamten Angebot

Vorbemerkungen

Bei den Beiträgen und Seiten von Tivolifoto wird das Datum der Veröffentlichung und der Aktualisierung angezeigt, um auf die inhaltlichen, technischen und gestalterischen Bedingungen der Entstehungszeit hinzuweisen. Das jeweilige Webdesign kann sich nämlich erheblich vom gegenwärtigen Erscheinungsbild unterscheiden. 2011 am Beginn meines Onlineangebots gab es nicht alle heutigen technischen Möglichkeiten, oder ich konnte manches wegen geringer Kenntnisse und Erfahrungen nicht nutzen. Webdesign ist immer abhängig von zeitlichen und technischen Entwicklungen.

Anfänglich lehnte ich vieles ab, um die Gäste beim Lesen und Anschauen nicht zu beeinflussen. Mittlerweile versuche ich, die Wirkung von Designelementen zu ergründen, zu lernen und anzuwenden, weil Inhalt und Form, Struktur oder Gestalt von Zeichen zusammengehören. Diese Erkenntnis ist leider nicht weit verbreitet. Oft wird ein Teil vernachlässigt oder die Pragmatik gegenüber der Semantik und Semiotik bevorzugt.

Diese Fachbegriffe der Sprachwissenschaft beziehen sich auf Handlungen, Inhalte und Zeichen. Das Design befindet sich auf der Zeichenebene, ist aber nur theoretisch von den anderen Ebenen zu trennen. Insgesamt gelten für das Webdesign die folgenden Erkenntnisse und Redewendungen.

Weniger ist mehr.
Ganzheitlichkeit ist der Weg und das Ziel.
Das Ganze ist mehr als die Summe seiner Teile.

Entwicklungen

Ich habe keine Ausbildung als Journalist und als Webdesigner, sondern nur autodidaktische Kenntnisse und Erfahrungen. Das Internet eignet sich nämlich zum Selbstlernen in vielen Bereichen. Eine Beschreibung des gegenwärtigen Designs ist überflüssig, weil es natürlich anzuschauen ist. Außerdem unterliegt es einem ständigen Wandel, wird auch ohne Worte wahrgenommen und wandelt sich. Es gab aber Entwicklungen, die zum aktuellen Design führten und hier zu begründen sind.

Mein erster Standpunkt war die Ablehnung von Designelementen, weil sie in der Literatur und im Schriftverkehr nur sehr wenig beinhaltet sind. Dann besann ich mich auf die Praxis in Zeitungen und Zeitschriften mit Abbildungen und gerahmten oder gefärbten Einschüben. Mein Kenntnisstand erweiterte sich mit Grundwissen zur Typografie und zu Farben. Parallel dazu wurden die Angebote von WordPress und der Themes um vielfältige Designelemente erweitert.

Sprachwissenschaften trennen die Bereiche Inhalt und Form. Letzteres kann auch als Struktur oder Design bezeichnet werden. Es geht um die Frage, wie ein Inhalt gegliedert und dargeboten wird. Die Inhaltsebene im Denken ist von der Gestaltebene im Wahrnehmen und Handeln zu unterscheiden.

Den Ausgangspunkt bildeten die Fotobücher mit Fotostrecken und Fotoalben, die weitgehend ohne Sprache gestaltet wurden. Dann kamen bebilderte Texte zur Dokumentation, die schließlich in die Tivoligeschichten mit Kritik und Satire mündeten.

Innerhalb dieser Entwicklungen kam und kommt es zu Ausnahmen, die durch Erfahrung, Veränderung und Weiterentwicklung entstanden sind. Ein Entwicklungssprung erfolgte im Februar 2015 mit dem Wechsel des bei WordPress sogenannten Themes. Mein überarbeitetes Angebot sollte mit der Zeit gehen und responsives Webdesign bekommen. Der zweite Sprung erfolgte im Februar 2022 mit dem erneuten Theme-Wechsel. 

Im Verlauf des Angebots kamen zu den Fotobüchern weiter Beiträge hinzu, z. B. Zusammenfassungen von Textseiten, zwei Videos mit Fotoschau, PDF-Programmüberblicke und PDF-Behördenschreiben. Ab 2018 bot ich auch Fotoalben bei Google Fotos an.

Das heutige, technisch mögliche Webdesign verfügt im Vergleich zum Druckdesign über nahezu unbegrenzte Möglichkeiten. Grundlegende Gestaltungselemente sind unter anderem Linie, Farbe, Form, Textur, Umrahmung und Schrift. Der vorliegende Beitrag beinhaltet nur eine Auswahl durch persönliche Einstellungen und Erfahrungen. So wird unter anderem auf Animationen verzichtet.

CMS WordPress und Theme Blocksy

Im Gegensatz zu den werbefinanzierten Vorgaben der fälschlicherweise sogenannten sozialen Medien bieten das CMS WordPress und das Theme Blocksy Freiheit. Sie entwickelten sich zu Geistmaschinen, können aber auch als Geldmaschinen missbraucht werden.

Wer diese Fachbegriffe nicht kennt, wird auf Wikipedia verwiesen: WordPress ist ein Content-Management-System (CMS) und das Theme Blocksy ein WordPress-Theme von 
Creative Themes.

Bei der Verwendung des CMS von WordPress.org verfügt man über alle Freiheiten des Systems, muss sich aber an einen Hoster binden. Mein Hoster war von Anfang an WordPress.com, weil dieser Anbieter eine Vielzahl von zusätzlichen Diensten ermöglicht und versucht, technische Probleme weitgehend zu verhindern. Die Unterschiede werden auf der Seite WordPress.com im Vergleich zu WordPress.org verglichen.

Viele Designmöglichkeiten ergeben sich aus dem ab 2022 verwendeten Theme Blocksy Pro. Ich halte Blocksy für einen Standard des aktuell technisch Machbaren. Es wird laufend weiterentwickelt und hat nach meinen Erfahrungen einen hervorragenden Support mit Forum, Facebook-Gruppe und schnellen, direkten E-Mail-Kontakten.

Gravatar

Ein Gravatar ist ein global verfügbarer Avatar, der mit der E-Mail-Adresse des Benutzers verknüpft ist und mit der Integration in WordPress.com bereitgestellt wird. Nachfolgend wird der Gravatar von Tivolifoto gezeigt, als 64-Pixel-Gravatar mit Ecken, mit zehn Prozent abgerundet und als Kreis sowie als 32-Pixel-Kreis und innerhalb eines Farbverlaufs.

Wie so häufig im Internet hat das Porträt ein gleichbleibendes Alter. Meines entstand 2011. Der gebräunte Hautton war echt und stammte vom mehrstündigen Radeln in der Frühlingssonne, bei der ich aber noch eine schwarze Jacke brauchte. Über das im Gesicht eingebaute Lächeln kann ich leider nicht immer verfügen. Der Hintergrund war Zufall, betont aber den Hirnschädel. Ich halte den Wiedererkennungswert meines Gravatars im Internet für hoch, sodass ich ihn nicht ändern möchte.

Favicon oder Logo

Ein Favicon zeigt ein Icon, Symbol oder Logo für Webbrowser, um eine Website für das Wiedererkennen zu kennzeichnen. Im nächsten Absatz befindet sich das Tivolifoto-Logo als 64-Pixel-Favicon mit Ecken, mit zehn Prozent abgerundet und als Kreis, sowie als 32-Pixel-Kreis und innerhalb eines Farbverlaufs.

Mein Favicon besteht aus Buchstaben des freien ZurichCalligraphic Fonts, der mich an Vergangenes erinnert. Ich will Tradition, Bewegung, Beschwingtheit und Heiterkeit ausdrücken. Eine altbayerische Frakturschrift sollte vermieden werden, um Anmutungsqualitäten wie Preußen, Nazi und Deutschland auszuschließen. Die Farbgebung entspricht den bayerischen Nationalfarben Weiß und Blau sowie dem Theme-Blocksy-Blau mit den Hex-Farben #2872fa und Weiß #ffffff.

Farben

Bei einer altbayerischen Onlineschau ist die Farbe Blau verpflichtend. Irgendwas muss weißblau sein. Man kann sich an öffentlich bekannten Farben orientieren oder eigene Wege gehen. Eine Anlehnung an die ersten drei Beispiele in der folgenden Abbildung sollte vermieden werden.

Tivolifoto verwendete zunächst mit LightSteelBlue1 den Farbcode #cae1ff, der im System nahe bei Hawkes Blue liegt. Dabei handelt es sich um ein sehr ungesättigtes, sehr helles, kaltes Azurblau. Hawke heißt Falke, der bei den Kelten als Übermittler zwischen Diesseits und Jenseits galt.

Danach folgte ein radialer Farbgradient, der einen Farbverlauf oder Helligkeitsübergang beschreibt. Der hexadezimale Farbcode #f5f7fa ist ein sehr heller Farbton von Cyanblau und geht mit #c3cfe2 in ein helles Graublau über. Der Gradient wird nach Sankt Petersburg benannt. Die Mischung gilt als kühl beruhigend und wird für ein heiteres, ruhiges Design verwendet.

.e

Die Sprache des Internets, die Hypertext-Auszeichnungssprache HTML, sieht für einen Block im Block-Editor Gutenberg das folgende class-Attribut vor. Das wiederum folgende Style-Attribut ergänzt HTML unmittelbar mit Stilvorlagen oder Stylesheets. Die Stylesheet-Sprache CSS definiert die Formateigenschaften einzelner HTML-Befehle.

class=“has-background“ style=“background:radial-gradient(#f5f7fa 0%,#c3cfe2 100%)“

Der radiale Gradient kann als eine Variation der bayerischen Nationalfarben Weiß und Blau wahrgenommen und verstanden werden. Er ist ganz einfach meine Wahl für die weißblauen, bayerischen Rauten und steht für persönliche, bayerische Eigenständigkeit, Freiheit und Eigentümlichkeit des Internetangebots.

Zudem gehört der Gradient für mich nicht zum Bayern-Kitsch und ermöglicht die Lesbarkeit von schwarzen Texten. Die radialen Farbverläufe befinden sich in Kopfzeilen, Fußzeilen und Textzeilen oder Textkästen. In der Sprache von WordPress heißt das natürlich: Gradient in Header, Footer und Background.

Das Falkenblau wird in meinen bayerischen Rauten weiterhin verwendet. Vor dem Hintergrund des Gradienten bildet sich ein Kontrast, der mir gefällt.

Kopfzeile und Fußzeile

Der Tivolifoto-Header beinhaltet in der ersten Zeile das Favicon, den Titel, den Untertitel, die Bayernrauten, den Autorennamen und den Gravatar. Das Favicon und der Untertitel sind mit der Hauptseite verlinkt, der Autorennamen mit der Vorstellungsseite. Die zweite Zeile des Headers zeigt die neun Menüpunkte. Beim Scrollen verschwindet die erste Zeile, wobei die zweite Zeile mit dem Menü ständig auf dem Bildschirm bleibt.

In der ersten Zeile des Tivolifoto-Footers befindet sich das vierspaltige Autorenmenü. Die zweite Zeile zeigt das Favicon, den Titel, die Symbole mit Links zu ausgewählten sozialen Medien und das Folgen-Feld mit einem Button. Die Copyright-Informationen bilden den Schluss in der dritten Zeile.

Der Header und der Footer haben auf Desktop- und Mobilgeräten den radialen Tivolifoto-Gradienten als Farbhintergrund, wobei die Farben in den jeweiligen zwei Zeilen fließend übergehen. Unter der Kopfzeile und unter dem oberen Rand der Fußzeile befindet sich jeweils ein Schatten, der einen räumlichen Eindruck andeuten soll.

Auf Mobilgeräten wird die Fußzeile mit mehreren Zeilen umgebrochen. Die Kopfzeile verzichtet auf den Untertitel, die Bayernrauten, den Autorennamen und den Gravatar. Diese Teile würden auf den kleinen, mobilen Bildflächen nur Platz wegnehmen.

Desktop-Ansicht und Menü

Ab 2022 bereitete mir das Spiel mit den Gestaltungselementen immer mehr Freude, weil die Möglichkeiten von WordPress und des Blocksy-Themes gewachsen waren. Die Standardstruktur aller Beiträge auf der Hauptseite ist in drei Spalten angeordnet und zeigt Beitragsbilder, Titel, Beitragstexte, Kategorien und Lesedauer.

Ich entwickelte die Startseite von Tivolifoto mit einem Menü, das zwei Symbole für Startseite und Suchen sowie neun Inhaltsteile in einer ständig sichtbaren Menüzeile enthält. Beim Cursor-Kontakt zeigt die Zeile automatisch einen der neun Bereiche mit insgesamt 40 Spalten und 225 Menüpunkten (Stand Oktober 2024).

Die jeweiligen Menüs mit den Spalten werden laufend mit neuen Beiträgen oder Seiten aktualisiert. In diesen neun Hauptmenüs öffnen sich die Fenster im aktuellen Browserfenster. Innerhalb der Beiträge werden Links meist in einem neuen Browserfenster angezeigt.

Das Menü unterscheidet sich von Header, Footer und Gesamt-Hintergrund mit einem hellen Farbgradienten als Menü-Hintergrund (#e6e9f0 0%,#eef1f5 100%). Der Gradient mit dem Namen Snow Again erzeugt eine kühle, beruhigende Atmosphäre und ist mit den Farben Athens Gray vom antiken Athen inspiriert.

Das Mega-Menü beinhaltet die Titel der Beiträge und teilweise die Artikelbilder. Die neun Menübereiche öffnen sich durch Cursorbewegungen, ohne Klicken oder Tippen.

Formen

Ab 2011 schnitt ich Fotos aus Fotobüchern mit den Formaten DIN A6 quer und DIN A5 quer aus. Dabei ergaben sich etwa die Standardformate 3:2 und 4:3 für die Bilder. Die dicken, teilweise unterschiedlichen, schwarzen Rahmen in der Tivolifoto-Anfangszeit verwende ich heute nicht mehr. Sie waren eine Folge des Ausschneidens der Fotos aus den Umschlägen der Fotobücher mit der Maus. Heute sehe ich das als Designfehler an, der zudem die weitere Verwendung einschränkt.

Danach legte ich mich auf das 4:3-Format fest und schnitt die Titelfotos mit einer Software. Sie bekamen einen dünnen weißen und schwarzen Rahmen, der vorwiegend nur jeweils drei Pixel groß ist.

Die Beitragsfotos blieben ohne Rahmen. Werden Bilder aber mit Texten umflossen, verwende ich einen Ein-Pixel-Rahmen, z. B. im zentralen Beitrag Die Geschichte des Tivoli in München.

Rahmen und Eckenradius für Fotos können mittlerweile im WordPress-Editor hinzugefügt werden. Abgerundete Ecken und breitere Bildformate sind modern, aber nicht immer sinnvoll.

Ich weiß, dass das 16:9-Format das menschliche Blickfeld besser als das 4:3-Format abdeckt. Trotzdem bleibe ich bei 4:3, weil sich breite Flächen weniger für Personen und Gesichter eignen.

Icons und Buttons

Die folgenden, selbst gebastelten Icons sind Beispiele mit dem Download-Angebot einer PDF-Datei und eines Fotobuchs. Sie sind absichtlich klein, um nicht den Eindruck zu erwecken, Tivolifoto will etwas verkaufen.

Mit den Icons sollen interessierte Gäste nicht nur die Fotostrecken in den Beiträgen, sondern auch auf die PDF-Fotobücher und die Buchansichten von fotobuch.de hingewiesen werden. Die Icons für die entsprechenden Links befinden sich vorwiegend nach dem einführenden Text eines Fotobuchs oder in der ersten Zeile einer Seite. Alle PDF-Dateien und Fotobuch-Ansichten mit Bestellmöglichkeiten sind auch in der alphabetischen Liste der Fotobücher verlinkt.

In den Fotobuch-Beiträgen ab 2023 wurden die obigen Icons durch die unten stehenden Buttons ersetzt. Die zwei weiteren Buttons befinden sich in den Kontaktformularen.

Ansichten mit Tablet und Smartphone

Das Tivolifotoangebot soll postkartenfotografisch und nicht minifotografisch sein, die Ansicht mit einem Tablet oder Smartphone ist aber möglich. Dabei wird das Hauptmenü nur als Symbol mit drei waagerechten Strichen ( ≡ ) zum Öffnen angezeigt. Dann bieten sich die Beitragstitel der neun Menübereiche in senkrechter Ordnung an, die wiederum zu öffnen sind. Dabei werden Titel und teilweise Beitragsbilder angezeigt.

Ich verfüge über die Ansicht mit Smartphone und Tablet zum mobilen Herzeigen. Für die Bearbeitung und Weiterentwicklung nutze ich aber nur die komfortable Desktop-Ansicht. Gäste von Tivolifoto möchte ich ermuntern, in der Öffentlichkeit auf digitale Medien zu verzichten. Direkte Sinneswahrnehmung und persönliche Gespräche sind wichtiger als technische Mittel.

Weglassungen

Schreibt man über einen Sachverhalt, sollte eigentlich auf das Fehlende nicht hingewiesen werden. Ich mache es trotzdem, um zu zeigen, dass ich darüber Bescheid weiß, und um zu begründen, warum ich es wegließ.

Das Theme Blocksy bietet die Umschaltung auf den Dunkelmodus an. Meine Fotos sind aber oft Bildfolgen oder wie Collagen angeordnet, weil sie häufig aus Fotobuchseiten ausgeschnitten wurden. Deshalb haben die Bilder weiße Abstände in den Zwischenräumen. Diese wären bei einem Dark Mode unvorteilhaft anzuschauen. Außerdem wäre viel Text mit der Umkehr von weißem Text auf schwarzem Hintergrund nur schwer zu lesen. Daher wird auf die Umschaltung in den Dark Mode im Theme verzichtet.

Für Gäste von Tivolifoto ist der Dunkelmodus trotzdem mit dem WordPress-Plugin Dark Reader möglich. Dazu befindet sich am rechten oberen Bildschirmrand ein Umschalt-Button.

Eine Vorlesefunktion für Tivolifoto ist nicht sinnvoll, weil sie wegen des fotografischen Schwerpunkts nicht zur Barrierefreiheit beiträgt. Wer etwas vorlesen lassen will oder muss, kann eigene Software nutzen.

Angebote für Übersetzungen sind in einem einzelnen Internetangebot überflüssig, weil sie sich bereits in den Webbrowsern befinden. Trotzdem befindet sich eine Schaltfläche für Google Translate mit den 24 EU-Amtssprachen rechts unter der Fußzeile.

Tivolifoto verzichtet gänzlich auf eine Seitenleiste. Die möglichen Inhalte oder Widgets befinden sich im Mega-Menü der Kopfzeile, in der Fußzeile und im Menüpunkt Autor. Dort können sie besonders mit dem Link Empfehlungen aufgerufen werden. Zudem ist eine Seitenleiste mit Ausnahme eines ausschaltbaren Menüs auf Mobilgeräten nicht sinnvoll.

Bei der Schrift wird bislang nur der Systemstandard des Themes Blocksy mit unterschiedlichen Formatierungen, mit der Größe 18 Pixel und mit der Zeilenhöhe 1,5 verwendet.

Animationen, Smileys, Emojis und Vergleichbares sind bei Tivolifoto nicht beinhaltet, weil sie nur eine Sprachverarmung darstellen.

Fazit

Das Webdesign verfügt über vielfältige Möglichkeiten, die hier nicht alle erwähnt und bei Tivolifoto angeboten werden. Insgesamt bin ich mit den vielen Gestaltungselementen ein Entdeckender und Lernender ohne jegliche Ausbildung – so wie bei den Texten und Fotos. Anfänglich hatte ich weitgehend auf Design und Textgestaltung verzichtet. Dann versuchte ich, diese Möglichkeiten stärker zu nutzen. Insgesamt werden auf dieser Seite und bei Tivolifoto viele Designangebote bisher nicht oder absichtlich nicht erörtert oder genutzt.

Webdesign gleicht einer Spielzeugeisenbahn mit ständig neuen Zügen und Landschaften.

Frühere Titelfotos

Mit dieser Sammlung zeige ich frühere Titelfotos her. Die Bilder sind eine Auswahl, die nicht den Titelbildern der Fotobücher entspricht. Etwas gefällt mir aber oder erinnert mich in besonderer Weise an Personen und Sachverhalte. Bildqualität und Aussage sind wechselhaft. Ich weiß, dass ein zufällig ausgewähltes Titelfoto nicht zum jeweiligen Beitrag oder zur Begleitseite passt. Trotzdem nutze ich die Möglichkeit, diese Bilder als Titel meines gesamten Angebots hervorzuheben.

Kellnerin Lea in der Schwemme des Münchner Hofbräuhauses – leider konnte dieses Fotobuch-Projekt wegen der Corona-Pandemie nicht fertiggestellt werden

Raben über der Spitze des Chinesischen Turms im Englischen Garten

Madl vom Trachtenverein „d’Mangfalltaler Westerham“

Patrona Bavariae vor den Türmen der Frauenkirche

Fensterblick zwischen Chinaturmspitze und Nachbarbaum

Fensterblick mit besonderem Licht auf die Chinaturmspitze

Fensterblick mit besonderem Licht auf den Nachbarbaum

Musikverein Kellmünz auf dem historischen Karussell im Museumszelt der Oidn Wiesn 2018

Taferl, Fahnen und Janker im Festzelt vor dem Festzug des Oberländer Gaus in Murnau 2018

Madl-Gruppe beim Festzug des Loisachgaus in Baierbrunn 2018

Josef Menzl im Festzelt Herzkasperl der Oidn Wiesn 2017

Goldener Oktober am Entenfallweiher im Englischen Garten

Freiheit für Bayern im Traditionszelt der Oidn Wiesn 2017

Freiheit für Bayern im Museumszelt der Oidn Wiesn 2015

Heimat- und Trachtenverein Raisting-Sölb beim Heimattag Huosigau 2017

Sommertagtraum am Kleinhesseloher See im Englischen Garten

Frühlingsbesuch am Tivoliweiher im Tucherpark

Jürgen Kirner, Paar 2016, Verlobungspaar 2017, Vorstadthochzeit 1905

500 Jahre Original Münchner Schäfflertanz 1517 – 2017

D’Schwanecker Rittersleit beim Faschingszug der Damischen Ritter 2006

Tegernseer Musikanten mit Hansl Reiter, Karl Holl und dem Kiem Pauli

Christkindl-Liesl vom Viktualienmarkt – Brunnenfigur der Elisabeth Wellano oder Liesl Karlstadt geschmückt vom Blumenstandl Inge Rainer Blumen

Gaugruppe des Trachtengaus München und Umgebung vor dem Festzelt Tradition 2016

Teilansicht der Erntekrone vor dem Festzelt Tradition 2015

Englischer Garten beim Japanischen Teehaus

Robinie auf dem Viktualienmarkt im Frühsommer

Kastanienblüte auf dem Viktualienmarkt

Vor der Kastanienblüte auf dem Viktualienmarkt

Frühlingsblumen auf dem Viktualienmarkt

Umschlagbild des Foto-Lese-Buchs Heiter bis bockig mit neuen Tivoligeschichten

Trachtengau München und Umgebung am 1. Oktober auf der Oidn Wiesn 2015

Eröffnungstag des 182. Oktoberfests am 19. September 2015

20. Japanfest am 19. Juli 2015 im Englischen Garten

Prinz-Carl-Brücke über den Oberstjägermeisterbach auf dem östlichen Weg vom Chinesischen Turm zum Kleinhesseloher See

Mehlbeerbäume im Englischen Garten am Forstweg zwischen Oberföhringer Wehr und Aumeister

Manfred Klein bei der Begrüßung des Ensembles Bavaria in der Augustiner Bierhalle und in der Marktschänke der Forschungsbrauerei München

Tänzerinnen bei der Traumschiffreise der Münchner Gesellschaft Narrhalla am Unsinnigen Donnerstag auf dem Viktualienmarkt