Dokumentation: Gestalterische Grundlagen
Die gestalterischen Grundlagen bilden das visuelle und konzeptionelle Gerüst einer Website. Sie bestimmen, wie Inhalte wahrgenommen, verstanden und erlebt werden. Farben, Formen, Typografie und Struktur sind dabei nicht nur ästhetische Entscheidungen, sondern tragen wesentlich zur Funktionalität und Verständlichkeit bei. Ein durchdachtes Design sorgt dafür, dass eine Website klar, ansprechend und benutzerfreundlich wirkt – unabhängig vom Gerät oder der Zielgruppe. In diesem Kapitel geht es um die zentralen gestalterischen Prinzipien, die während der Umsetzung meines Projekts eine Rolle gespielt haben. Dabei steht im Vordergrund, wie Gestaltung gezielt eingesetzt wird, um Orientierung, Lesbarkeit und emotionale Wirkung zu schaffen, und wie visuelle Entscheidungen dazu beitragen, dass Technik und Design zu einer stimmigen Gesamterfahrung verschmelzen.
Meine Farbwahl
Für meine Website habe ich mich für die Farben Blau und Orange entschieden. Diese beiden Töne sind Komplementärfarben, also Farben, die sich im Farbkreis gegenüberliegen. Durch ihren starken Helligkeits- und Farbkontrast ergänzen sie sich besonders gut und sorgen für eine gute Lesbarkeit.
Die Kombination gewährleistet zudem eine hohe Zugänglichkeit (Accessibility), da Texte und grafische Elemente klar voneinander unterscheidbar bleiben – unabhängig vom Gerät oder der Sehfähigkeit der Nutzerinnen und Nutzer.
Für das Farbschema wurden Orange (#ff9f00) als Akzentfarbe und Blau (#465665) als
Zusätzlich wurden noch verschiedene Blautöne als Gestaltungsfarbe integriert.
Reflexion: Farben
Während der Arbeit am Farbkonzept habe ich viel Neues über Accessibility und den Einfluss von Kontrasten auf die Lesbarkeit und Benutzerfreundlichkeit gelernt. Mir wurde bewusst, wie wichtig es ist, dass Farben nicht nur ästhetisch ansprechend sind, sondern auch für alle Nutzer gut erkennbar bleiben – unabhängig von Bildschirm, Umgebung oder Sehvermögen. Besonders spannend fand ich, zu sehen, wie Farben miteinander harmonieren und welche Wirkung sie im Zusammenspiel entfalten. Durch das Experimentieren mit Komplementärfarben, wie Orange und Blau, habe ich verstanden, wie gezielte Farbwahl sowohl Aufmerksamkeit lenken als auch visuelle Balance schaffen kann. Diese Auseinandersetzung hat mein Bewusstsein für inklusive Gestaltung geschärft und gezeigt, dass gutes Design immer auch zugängliches Design bedeutet.
Quellenangaben: Farbe im Internet
Schriftwahl und Typografie
Für meine Website habe ich mich für die Schriftfamilie Roboto entschieden – konkret Roboto für den Fliesstext und Roboto Slab für Überschriften. Beide Schriften stammen aus derselben Familie und ergänzen sich optisch harmonisch. Da es sich um Google Fonts handelt, sind sie kostenlos, rechtlich unbedenklich und bereits für die Darstellung auf Bildschirmen optimiert. Die Schrift Roboto eignet sich besonders gut für längere Texte, da sie eine hohe Lesbarkeit bietet und das Auge beim Lesen weniger ermüdet. Roboto Slab mit ihren markanteren Serifen sorgt hingegen für einen klaren visuellen Kontrast und eignet sich ideal für Überschriften und Hervorhebungen. Zur optischen Unterstützung habe ich die Überschriften in der Primärfarbe Orange gestaltet, um Struktur und visuelle Orientierung innerhalb der Website zu verstärken
Überschrift
Lauftext
Datenschutz und Einbindung von Google Fonts
Wenn Google Fonts nicht korrekt eingebunden werden, kann der Browser beim Laden der Website automatisch eine Verbindung zu Google-Servern herstellen. Dabei werden personenbezogene Daten, wie die IP-Adresse, an Google übermittelt – was gegen Datenschutzrichtlinien (DSG / DSGVO) verstossen kann. Durch die lokale Einbindung der Schriften wird dieses Risiko vermieden. Gleichzeitig wird sichergestellt, dass die gewählte Schriftart immer korrekt dargestellt wird und der Browser keine Ersatzschrift verwendet. So bleibt das Design konsistent, die Lesbarkeit gewährleistet und der Datenschutz vollständig gewahrt.
Schrift eingebunden
Schrift nicht eingebunden
Reflexion: Typografie und Lesbarkeit
Während der Arbeit an der Typografie habe ich erkannt, wie stark Schriftgestaltung die Wahrnehmung, Lesbarkeit und Zugänglichkeit einer Website beeinflusst. Typografie ist nicht nur ein ästhetisches, sondern auch ein funktionales Gestaltungselement, das Orientierung und Struktur schafft. Durch die Arbeit mit der Schriftfamilie Roboto wurde mir bewusst, wie wichtig klare Formen und konsequente Hierarchien sind. Meine Mutter – selbst Designerin – hat mich darauf hingewiesen, dass viele Nicht-Gestalter zu viele Schriftfamilien mischen. Dabei ist es entscheidend, wenige, zusammengehörige Schriften zu verwenden, um Kontinuität und Wiedererkennung zu sichern – ganz ähnlich wie bei einem stimmigen Farbkonzept. Auch die technische Einbindung der Schriftarten spielt eine wichtige Rolle. Schriften müssen entweder direkt in der Website eingebunden oder über Google Fonts korrekt verlinkt werden. Geschieht das nicht, ersetzt der Browser die Schrift automatisch durch eine Standardschrift – was das Design und die Lesbarkeit stark beeinträchtigen kann. Diese Erkenntnisse haben mein Bewusstsein für professionelles, zugängliches und technisch sauberes Webdesign deutlich geschärft.
Quellenangaben: Typografie
Layout und Struktur
Das Layout wurde bewusst übersichtlich, modular und benutzerfreundlich gestaltet. Ziel war es, eine klare Struktur zu schaffen, die Inhalte leicht erfassbar macht und den Nutzer intuitiv durch die Seite führt. Durch die konsequente Verwendung von Raster, wiederkehrenden Elementen und klaren Abständen entsteht ein harmonisches Gesamtbild, das Orientierung und Lesefluss unterstützt. Die visuelle Hierarchie wird durch gezielte Grössenunterschiede, Akzentfarben und typografische Gewichtungen betont. So lassen sich Überschriften, Texte und interaktive Elemente deutlich voneinander unterscheiden – was sowohl die Usability als auch die Accessibility verbessert. Grosszügige Weissräume schaffen Ruhe und helfen, Inhalte visuell zu gliedern. Gleichzeitig sorgt das responsive Design dafür, dass das Layout auf allen Geräten – vom Smartphone bis zum Desktop – gut lesbar und bedienbar bleibt. Das Zusammenspiel aus Struktur, Farbgebung und Typografie vermittelt ein modernes, professionelles Erscheinungsbild, das Funktionalität und Ästhetik miteinander verbindet und den Nutzer klar durch die Inhalte führt.
Hauptseiten
Wichtig war zudem die Konsistenz im Aufbau: Hauptseiten und Unterseiten folgen stets dem gleichen strukturellen Prinzip, wodurch sich Nutzer schnell zurechtfinden. Die wiederholte Verwendung von Farben, Symbolen und Layout-Elementen stärkt den Wiedererkennungswert und sorgt für ein einheitliches Erscheinungsbild.
Übersichtsseite Umsetzung
Übersichtsseite Dokumentation
Unterseite
Die Unterseiten folgen dem gleichen Aufbau wie die Hauptseiten, bleiben jedoch kompakter. Der Header schrumpft zu einem schmalen Balken, zeigt aber dasselbe Bild, um das jeweilige Thema wiederzuerkennen. Ein Breadcrumb erleichtert die Orientierung, während die Seitennavigation ermöglicht, zur Hauptseite zurückzukehren oder bequem zwischen den Unterseiten desselben Themenbereichs zu wechseln.
Infoseite Umsetzung
Infoseite Dokumentation
Responsive Layout und Anpassung an verschiedene Geräte
Das Responsive Design war einer der anspruchsvollsten Teile der gesamten Umsetzung.
Sowohl das CSS als auch der Textaufbau und die Spaltenstruktur mussten sorgfältig auf verschiedene Bildschirmgrössen abgestimmt werden. Jede Änderung am Layout erforderte eine individuelle Anpassung, damit Inhalte auf Desktop, Tablet und Smartphone stets korrekt und übersichtlich dargestellt werden. Besonders herausfordernd war es, ein einheitliches Erscheinungsbild zu bewahren, obwohl sich die Darstellung je nach Gerät und Browser unterscheidet. Jeder Browser verwendet eigene Standardwerte und Voreinstellungen, wodurch sich kleine Unterschiede bei Abständen, Schriften oder Linienhöhen ergaben.
Diese mussten gezielt korrigiert werden, um ein möglichst konsistentes Design zu erreichen. Durch diese Arbeit habe ich gelernt, wie komplex die Gestaltung wird, wenn sie technisch flexibel und visuell konsistent bleiben soll. Gleichzeitig zeigte sich, wie wichtig eine klare CSS-Struktur und ein durchdachter Seitenaufbau sind, um später effizient weiterarbeiten und Anpassungen vornehmen zu können.
Auf verschiedene Geräten
Reflexion: Layout
Während der Gestaltung des Layouts habe ich gemerkt, wie viel Planung, Struktur und Feinarbeit in einem stimmigen Aufbau steckt. Anfangs dachte ich, dass sich ein ansprechendes Layout relativ schnell umsetzen lässt – doch ich habe deutlich unterschätzt, wie viel Zeit und Aufwand dieser gesamte Prozess tatsächlich erfordert. Ich habe gelernt, dass ein gutes Layout weit mehr ist als nur eine optische Anordnung von Elementen. Es geht darum, Inhalte sinnvoll zu gliedern, Lesefluss und Orientierung zu fördern und gleichzeitig eine klare visuelle Hierarchie zu schaffen. Besonders das Abstimmen von Farben, Abständen und Typografie aufeinander hat gezeigt, wie wichtig jedes Detail für das Gesamtergebnis ist. Diese Erfahrung hat mir verdeutlicht, dass hinter einem einfachen und übersichtlichen Design oft sehr viel konzeptionelle Arbeit steckt. Ich habe ein tieferes Verständnis dafür entwickelt, wie wichtig es ist, Gestaltung und Funktion in Einklang zu bringen und dabei immer die Benutzerfreundlichkeit im Blick zu behalten.
Meine Usability
Bei der Gestaltung meiner Website habe ich grossen Wert auf Usability, also auf die Benutzerfreundlichkeit, gelegt. Mein Ziel war es, eine Oberfläche zu schaffen, die einfach, verständlich und intuitiv zu bedienen ist. Ein zentraler Aspekt dabei war die Konsistenz im Design. Ich habe bewusst darauf geachtet, dieselben Elemente immer wieder zu verwenden, zum Beispiel bei Buttons, Überschriften, Icons oder Abständen. Dadurch entsteht für den Nutzer ein vertrautes und wiedererkennbares Erscheinungsbild, das die Orientierung erleichtert und Fehlbedienungen vermeidet. Wiederkehrende Strukturen und ein einheitliches Layout helfen dem Nutzer, schneller zu verstehen, wie die Seite funktioniert, ohne ständig neu lernen zu müssen, wo sich welche Funktionen befinden. Diese Einheitlichkeit sorgt für ein ruhiges und geordnetes Erscheinungsbild und trägt wesentlich zu einer positiven Benutzererfahrung bei. Insgesamt war es mir wichtig, dass die Website nicht nur gut aussieht, sondern auch funktional und zugänglich ist. Durch die klare Struktur, die wiederkehrenden Elemente und die intuitive Navigation entsteht ein Design, das ästhetisch und benutzerfreundlich zugleich ist.
Reflexion: Usability
Während der Arbeit an der Usability meiner Website habe ich gelernt, wie wichtig Wiederholung und Konsistenz für eine gute Benutzererfahrung sind. Anfangs lag mein Fokus eher auf der visuellen Gestaltung, doch mit der Zeit wurde mir bewusst, dass Benutzerfreundlichkeit vor allem durch klare Strukturen und wiederkehrende Elemente entsteht. Ich habe verstanden, dass Nutzer sich schneller zurechtfinden, wenn gleiche Elemente immer gleich funktionieren und aussehen. Diese Wiederholungen schaffen Vertrauen und erleichtern die Orientierung. Besonders beim Aufbau von Buttons, Überschriften oder Navigationselementen habe ich erkannt, wie stark sich ein konsistentes Design auf die Verständlichkeit und den Gesamteindruck auswirkt. Durch diesen Prozess habe ich gelernt, Design nicht nur als optisches, sondern auch als funktionales Werkzeug zu sehen. Gute Usability bedeutet für mich heute, dass ein Nutzer ohne nachzudenken versteht, wie eine Website funktioniert – weil alles logisch, vertraut und übersichtlich aufgebaut ist. Diese Erfahrung hat mein Bewusstsein für strukturierte, durchdachte und nutzerorientierte Gestaltung deutlich gestärkt.
Meine Accessibility
Bei der Gestaltung meiner Website habe ich grossen Wert auf Accessibility, also auf die Zugänglichkeit für alle Nutzer, gelegt. Ziel war es, ein Design zu schaffen, das unabhängig von Alter, Erfahrung oder eventuellen Einschränkungen gut lesbar und verständlich bleibt. Ein besonders wichtiger Aspekt dabei war der Kontrast zwischen Text und Hintergrund. Ich habe darauf geachtet, dass Farben genügend Helligkeitsunterschied bieten, damit Texte auch bei unterschiedlichen Bildschirmhelligkeiten oder Sehbedingungen klar erkennbar sind. Durch diese bewusste Farbwahl wird sichergestellt, dass die Inhalte leicht lesbar und barrierearm bleiben. Darüber hinaus habe ich eine klare Typografie, ausreichende Abstände und übersichtliche Strukturen verwendet, um das Lesen und Navigieren zu erleichtern. Auch interaktive Elemente wie Buttons und Links wurden deutlich hervorgehoben, damit sie schnell gefunden und eindeutig verstanden werden können. Insgesamt war mir wichtig, dass meine Website nicht nur optisch ansprechend, sondern auch inklusive und benutzerfreundlich ist. Ein durchdachter Kontrast, klare Strukturen und einfache Navigation tragen wesentlich dazu bei, dass alle Nutzer gleichermassen von der Seite profitieren können.
Reflexion: Accessibility
Während der Arbeit an der Accessibility meiner Website habe ich gelernt, wie wichtig Kontraste und klare Strukturen für eine barrierefreie Gestaltung sind. Anfangs habe ich den Einfluss von Farben und Helligkeit auf die Lesbarkeit eher unterschätzt, doch mit der Zeit wurde mir bewusst, dass der richtige Kontrast entscheidend dafür ist, ob Inhalte gut erkennbar sind – besonders für Nutzer mit eingeschränktem Sehvermögen. Ich habe verstanden, dass Accessibility nicht nur ein zusätzlicher Aspekt des Designs ist, sondern ein grundlegendes Qualitätsmerkmal. Durch gezielte Farbwahl, deutliche Text-Hintergrund-Kontraste und klar strukturierte Layouts konnte ich sicherstellen, dass meine Inhalte für alle Nutzer zugänglich und gut lesbar bleiben. Diese Arbeit hat mir gezeigt, dass gutes Design immer auch inklusive Gestaltung bedeutet. Barrierefreiheit entsteht nicht zufällig, sondern durch bewusste Entscheidungen in Typografie, Farbe und Aufbau. Ich habe gelernt, dass selbst kleine Anpassungen – wie ein stärkerer Kontrast oder grössere Abstände – einen grossen Unterschied in der Nutzererfahrung machen können. Insgesamt hat sich mein Verständnis dafür vertieft, dass Accessibility nicht nur eine technische, sondern vor allem eine menschliche Verantwortung im Designprozess ist.