Dokumentation: Inhaltliche Umsetzung
Die inhaltliche Umsetzung bildet die kommunikative und gestalterische Ebene der Website. Hier werden Texte, Bilder, Icons und Interaktionen zu einem stimmigen Gesamterlebnis verbunden. Ziel war es, Inhalte nicht nur informativ, sondern auch verständlich, ansprechend und benutzerorientiert zu präsentieren. Dabei spielen Sprache, Bildsprache und Struktur eine ebenso wichtige Rolle wie Konsistenz, Lesbarkeit und emotionale Wirkung.In diesem Kapitel geht es darum, wie Inhalte konzipiert, formuliert und visuell umgesetzt wurden – von der Texterstellung über die Auswahl und Bearbeitung von Bildern bis hin zur Gestaltung des User Interface. Der Fokus liegt darauf, wie durch gezielte inhaltliche und gestalterische Entscheidungen ein harmonisches Zusammenspiel von Information, Design und Benutzerführung entsteht.
Meine Texte
Beim Verfassen meiner Texte habe ich grossen Wert auf Klarheit, Verständlichkeit und Struktur gelegt. Mein Ziel war es, Inhalte so zu formulieren, dass sie informativ, nachvollziehbar und gut lesbar sind. Dazu habe ich die Texte in mehreren Schritten erarbeitet: zunächst durch Recherche und Informationssammlung, anschliessend durch eigene Formulierungen und Anpassungen an den jeweiligen Themenbereich. Ich habe darauf geachtet, dass die Texte auf dem Niveau von FMS-Schülerinnen und -Schülern geschrieben sind. Sie sollten sprachlich einfach, aber fachlich korrekt bleiben und ein gutes Gleichgewicht zwischen Verständlichkeit und inhaltlicher Tiefe bieten. So konnte ich sicherstellen, dass die Inhalte klar vermittelt werden, ohne zu oberflächlich oder zu komplex zu wirken. Zudem war mir wichtig, dass die Texte visuell mit den Grafiken harmonieren und nicht zu sogenannten „Bleiwüsten“ werden. Dafür habe ich viele Passagen mehrfach umgeschrieben, gekürzt oder umstrukturiert, um eine bessere Lesbarkeit und optische Balance auf der Seite zu erzielen. Ein weiterer Aspekt war die Auffindbarkeit der Website über Suchmaschinen. Durch präzise Formulierungen, sinnvolle Überschriften und klare Schlüsselbegriffe konnte ich sicherstellen, dass die Texte auch suchmaschinenfreundlich (SEO-optimiert) sind. So entstand ein stimmiges Zusammenspiel aus Inhalt, Gestaltung und Struktur, das sowohl den Nutzer anspricht als auch den technischen Anforderungen einer modernen Website gerecht wird.
Reflexion: Text
Beim Schreiben der Texte habe ich gelernt, wie anspruchsvoll es ist, Inhalte auf einem bestimmten sprachlichen Niveau zu formulieren und gleichzeitig verständlich zu bleiben. Mein Ziel war es, die Themen fachlich korrekt, aber dennoch einfach und klar auf FMS-Niveau zu vermitteln. Oft war es eine Herausforderung, komplexe Zusammenhänge so zu erklären, dass sie nachvollziehbar bleiben, ohne an inhaltlicher Tiefe zu verlieren. Ich habe erkannt, dass gutes Schreiben nicht nur darin besteht, Informationen zu sammeln, sondern sie gezielt, strukturiert und leserfreundlich aufzubereiten. Besonders wichtig war mir eine einheitliche Sprache, ein logischer Aufbau und klare Satzstrukturen, die zur Gestaltung und zu den begleitenden Grafiken passen. Durch die wiederholte Überarbeitung und Anpassung an das Layout habe ich gelernt, wie stark Text, Gestaltung und Lesefluss voneinander abhängen. Dabei wurde mir bewusst, dass Verständlichkeit und Präzision wichtiger sind als Fachsprache – und dass gut geschriebene Texte wesentlich zur Professionalität und Zugänglichkeit einer Website beitragen.
Eingesetzte Icons
Für meine Bildwelt habe ich mich bewusst für den Einsatz von Icons entschieden. Icons sind ein klarer, moderner und leicht verständlicher Weg, um Informationen visuell zu vermitteln, ohne den Nutzer mit zu vielen grafischen Details zu überladen. Sie unterstützen die Struktur der Seite und helfen dabei, Inhalte schnell zu erfassen und einzuordnen. Ein wichtiger Grund für diese Entscheidung war die Möglichkeit, ein einheitliches und konsistentes Design zu schaffen. Durch den gezielten Einsatz von Icons lässt sich die gesamte Gestaltung optisch besser aufeinander abstimmen, da Form, Farbe und Stil an das Layout angepasst werden können. So entsteht ein harmonisches Gesamtbild, das professionell wirkt und die Wiedererkennbarkeit stärkt. Für die Umsetzung habe ich ausschliesslich Icons aus der Fontawesome Bibliothek verwendet. Diese bietet eine grosse Auswahl an Symbolen in einem klaren, modernen Stil. Für die meisten Themenbereiche fand ich bereits passende Icons, bei einigen musste ich jedoch zwei Symbole kombinieren, um die gewünschte Aussage präzise darzustellen. Alle Icons habe ich in Adobe Illustrator individuell angepasst – insbesondere in Farbe, Form und Grösse. Dabei habe ich sie bewusst in meinen zwei Hauptfarben eingefärbt, um eine personalisierte und durchgängige Designsprache zu schaffen, die sich über alle Seiten hinweg wiederholt. Darüber hinaus tragen die Icons zur Benutzerfreundlichkeit und Barrierefreiheit bei. Sie ergänzen Textinhalte durch visuelle Hinweise, die den Nutzer intuitiv leiten, und sorgen in Kombination mit klarer Typografie und gezielter Farbgebung für eine funktionale und ästhetisch ansprechende Bildsprache. Insgesamt spiegeln die Icons meine gestalterische Haltung wider: reduziert, klar und benutzerorientiert – mit dem Ziel, Informationen verständlich, zugänglich und visuell harmonisch zu präsentieren.
Farblich angepasste Icons
Angepasste Icons
Reflexion: Icons
Während der Arbeit an meiner Bildwelt habe ich erkannt, wie wirkungsvoll Icons für die visuelle Kommunikation und das Gesamtdesign einer Website sind. Anfangs habe ich die Bedeutung dieser kleinen grafischen Elemente unterschätzt, doch im Verlauf des Projekts wurde mir klar, dass sie einen grossen Einfluss auf Struktur, Wiedererkennbarkeit und Designharmonie haben. Durch die Verwendung von Icons konnte ich ein deutlich einheitlicheres Erscheinungsbild schaffen. Sie halfen mir, verschiedene Bereiche optisch miteinander zu verbinden und eine klare gestalterische Linie beizubehalten. Gleichzeitig habe ich gelernt, dass Icons nicht nur dekorativ sind, sondern auch funktional, da sie den Nutzer intuitiv leiten und Informationen schneller erfassbar machen. Ich war froh, dass ich bereits Erfahrungen mit Adobe Illustrator hatte, da mir das die Bearbeitung und Anpassung der Icons deutlich erleichtert hat. Ich konnte gezielt Formen, Farben und Grössen anpassen und so sicherstellen, dass die Symbole perfekt zum Layout und zur Farbwelt meiner Website passen. Dieses Vorwissen hat mir geholfen, gestalterische Entscheidungen bewusster zu treffen und effizienter zu arbeiten. Die Arbeit mit Icons hat mir ausserdem gezeigt, wie wichtig es ist, Konsistenz im Stil und in der Symbolik zu bewahren, um ein professionelles und ausgewogenes Design zu erreichen. Ich habe verstanden, dass eine reduzierte, klare Bildsprache oft mehr Wirkung und Verständlichkeit erzeugt als komplexe Grafiken oder Fotos. Insgesamt hat diese Erfahrung mein Bewusstsein dafür geschärft, wie stark visuelle Elemente zur Benutzerfreundlichkeit und zum Gesamteindruck einer Website beitragen – und wie sehr gestalterische Werkzeuge wie Illustrator dabei helfen, diese Wirkung gezielt zu gestalten.
Quellenangaben: Icons
Eingesetzte Bilder
Für meine Headerbilder habe ich mich bewusst an mein Farbschema aus Blau und Orange gehalten, um eine klare visuelle Kontinuität über die gesamte Website zu gewährleisten. Diese Farben bilden nicht nur einen starken Kontrast, sondern stehen auch für die gestalterische Identität meiner Seite. Ich habe mich zudem für abstrakte Motive entschieden, da sie thematisch vielseitig einsetzbar sind und sich harmonisch in das Gesamtbild einfügen. Diese Entscheidung war sowohl gestalterisch als auch praktisch begründet: Abstrakte Bilder lenken weniger vom Inhalt ab, wirken professioneller – und sie liessen sich in der gegebenen Projektzeit effizienter umsetzen. Viele der verwendeten Bilder waren ursprünglich nicht direkt barrierefrei nutzbar. Deshalb habe ich sie in Adobe Photoshop überarbeitet – insbesondere in Bezug auf Kontrast, Farbwirkung und Lesbarkeit der überlagerten Texte. Durch diese Anpassungen konnte ich sicherstellen, dass die Headerbilder ästhetisch ansprechend, aber auch zugänglich und funktional sind. Insgesamt unterstützen die Headerbilder die Struktur der Website, schaffen Wiedererkennung und tragen zu einem ruhigen, professionellen Gesamteindruck bei.
Originalbild
Optimiertes Bild
Kompression der Bilder mit TinyPNG
Um die Ladezeiten der Website zu optimieren, habe ich alle Bilder mit TinyPNG komprimiert. Das Tool reduziert die Dateigrösse deutlich, ohne die sichtbare Qualität zu beeinträchtigen. Dadurch laden die Seiten schneller, was nicht nur die Benutzererfahrung verbessert, sondern auch einen positiven Einfluss auf die Performance der gesamten Website hat.
TinyPNG
Reflexion: Bilder-Umsetzung
Ich bin froh, bereits Vorerfahrungen mit Adobe Photoshop gehabt zu haben. Das hat mir die Arbeit an den Headerbildern deutlich erleichtert, besonders beim Anpassen von Farben, Kontrasten und Bildkompositionen. Ohne dieses Vorwissen wäre der Prozess wesentlich zeitaufwendiger und technischer gewesen. Beim Optimieren der Bilder für das Web habe ich zusätzlich das Tool TinyJPG verwendet. Diese Arbeit war zwar aufwendig, aber absolut notwendig, um die Dateigrössen zu reduzieren und damit die Ladezeiten zu verbessern. Auch wenn das CMS Contao die Bilder beim Hochladen automatisch komprimiert, konnte ich durch die zusätzliche Optimierung sicherstellen, dass die Performance meiner Website bestmöglich bleibt. Rückblickend hat sich meine Wahl von Contao als CMS erneut bestätigt: Es hat mir nicht nur beim Aufbau der Seitenstruktur, sondern auch bei der Verwaltung und Einbindung der Bilder grosse Flexibilität geboten.
Quellenangaben: Bilder
Mein User Interface
Bei der Gestaltung meines User Interface stand die klare und intuitive Navigation im Vordergrund. Ziel war es, den Nutzerinnen und Nutzern eine einfache Orientierung innerhalb der Website zu ermöglichen – ohne ständig zur Hauptseite zurückkehren zu müssen. Dafür habe ich eine Subnavigation eingebaut, die innerhalb der inhaltlichen Bereiche einen schnellen Wechsel zwischen den einzelnen Unterseiten erlaubt. So kann man sich effizient durch die Themen bewegen und behält stets den Überblick über die aktuelle Position auf der Website. Ergänzend dazu befindet sich im Header eine Hauptnavigation mit einem Dropdown-Menü, das alle Hauptseiten übersichtlich auflistet. Dadurch ist der Zugriff auf die wichtigsten Inhalte jederzeit möglich, unabhängig davon, auf welcher Unterseite man sich gerade befindet. Die Kombination aus Haupt- und Subnavigation sorgt für eine logische Seitenstruktur und unterstützt eine flüssige, benutzerfreundliche Navigation. So entsteht ein Interface, das funktional klar aufgebaut, leicht verständlich und angenehm in der Bedienung ist.
Reflexion: User Interface
Durch die Arbeit an meiner Website habe ich erkannt, wie zentral eine einfach verständliche und logisch aufgebaute Navigation für eine gute Benutzererfahrung ist. Anfangs stand für mich das Design im Vordergrund, doch ich habe schnell gemerkt, dass klare Strukturen und eine intuitive Führung viel wichtiger sind, damit sich Nutzerinnen und Nutzer ohne Mühe zurechtfinden. Besonders die Kombination aus Hauptnavigation mit Dropdown-Menü und Subnavigation hat mir gezeigt, wie sehr Übersicht und Zugänglichkeit das Nutzungserlebnis verbessern. Ich habe gelernt, dass jedes Navigationselement von Menüpunkten, über Buttons bis zu Links eindeutig erkennbar und sinnvoll platziert sein müssen. Auch der Abstand, die Farbgebung und die Wiedererkennbarkeit spielen dabei eine grosse Rolle. Diese Erfahrung hat mir gezeigt, dass gutes UI-Design nicht nur aus Ästhetik besteht, sondern vor allem aus Funktionalität, Klarheit und Nutzerorientierung.