Dokumentation

Allgemeines Designkonzept

Das visuelle Erscheinungsbild der Website folgt einem klaren, reduzierten und funktionalen Designansatz. Ziel war es, eine moderne, ruhige Oberfläche zu schaffen, die Inhalte in den Vordergrund stellt und gleichzeitig gut zugänglich ist. Das Layout ist bewusst „clean“ gehalten, um Ablenkungen zu vermeiden und die Orientierung zu erleichtern.

Rahmen werden mit dünnen Linien von 1 px Stärke umgesetzt und besitzen leichte Abrundungen von 5 px. Diese Details sorgen für eine dezente visuelle Struktur, ohne zu dominant zu wirken. Kontrastreiche Farbkombinationen unterstützen zusätzlich die klare Trennung von Elementen.

Farbkonzept und Kontraste

Die Farbpalette besteht aus einer reduzierten, aber gezielt eingesetzten Auswahl:

• Weiß (#f2f0ef)
• Schwarz (#121212)
• Hellgrün (#afff66)
• Dunkelgrün (#354d1b)
• Pink (#ff7bac)
• Lila (#910091)

Der Standard-Hintergrund sowie die Schriftfarben sind überwiegend in Schwarz bzw. Weiß gehalten, um einen optimalen Kontrast zu gewährleisten. Mit einem Kontrastverhältnis von 16,49:1 wird dabei der AAA-Standard für Barrierefreiheit deutlich erfüllt.

Für selektierten oder hervorgehobenen Text kommen Hellgrün bzw. Pink auf schwarzem Hintergrund zum Einsatz. Auch diese Farbkombinationen erreichen sehr hohe Kontrastwerte (AAA 15,45:1 bzw. 7,74:1) und bleiben somit gut lesbar.

Typografie und Lesbarkeit

Die Website ist darauf ausgelegt, Inhalte schnell und angenehm erfassbar zu machen. Großzügige Zeilenabstände und eine klare Hierarchie unterstützen die Lesbarkeit längerer Texte.

Für die Typografie wurden bewusst unterschiedliche Schriftarten kombiniert:

• Noto Sans und Noto Serif für Fließtexte und Links, um eine gute Lesbarkeit und einen neutralen Charakter zu gewährleisten.
• Unbounded für Headlines, um diese visuell hervorzuheben und ihnen eine eigene Identität zu geben.

Zusätzlich kommt Fluid Typography für Überschriften zum Einsatz. Dadurch passen sich Schriftgrößen dynamisch an verschiedene Viewport-Größen an und sorgen auf allen Geräten für ein stimmiges Erscheinungsbild.

Interaktionen und Hover-Effekte

Interaktive Elemente werden klar und konsistent hervorgehoben. Alle Links besitzen sichtbare Hover-Zustände, um Nutzern direktes Feedback zu geben.

Textlinks verfügen über eine animierte Underline, die mittels transition und scale() umgesetzt ist. Der Hero-Bereich verwendet einen als Button gestalteten Link mit Farbwechsel und angepasstem Kontrast in einem Rotton, um eine klare Handlungsaufforderung zu erzeugen.

In der Projects-Section sind die Button-Links mit einem animierten Farbübergang versehen, der die Interaktivität zusätzlich unterstreicht.

Barrierefreiheit (Accessibility)

Barrierefreiheit war ein zentraler Bestandteil der Konzeption. Texte, die über Bildern liegen, werden durch Transparenz und Blur-Filter vom Hintergrund abgehoben. Dadurch bleibt die Lesbarkeit auch bei komplexen Bildinhalten erhalten.

Die aktuell aktive Seite wird sowohl in der Hauptnavigation als auch in der Footer-Navigation mit einer dotted underline markiert. Zusätzlich überprüft ein JavaScript IntersectionObserver, ob sich der Nutzer in der Projects-Section befindet. Entsprechend werden die zugehörigen Navigationslinks dynamisch hervorgehoben oder wieder zurückgesetzt.

Für generisch benannte Links in der Projects-Section wurden ARIA-Labels ergänzt, damit Screenreader diese eindeutig unterscheiden können. Der inhaltliche Bezug bleibt für sehende Nutzer weiterhin visuell nachvollziehbar. Eventuelle negative Auswirkungen auf SEO werden im Rahmen dieses Projekts bewusst in Kauf genommen.

Alle Links und Formularfelder besitzen ein eigenes :focus-visible-Styling. So ist jederzeit klar erkennbar, welches Element aktuell den Tastaturfokus hat. Darüber hinaus wurden für alle Bilder sinnvolle Alt-Texte hinterlegt.

Tests und Qualitätssicherung

Die Website wurde manuell mit VoiceOver auf macOS getestet sowie zusätzlich mit verschiedenen Accessibility-Tools überprüft, um möglichst viele potenzielle Barrieren zu identifizieren und zu beheben.

Ein abschließender Test mit Lighthouse ergab sehr gute Ergebnisse:

• Startseite: 100 Punkte
• Unterseiten: 99 Punkte

Diese Resultate bestätigen den Fokus auf Performance, Accessibility und saubere Umsetzung.

Kommentare & Reflexion

Verbesserungsmöglichkeiten bei der Code-Struktur

Rückblickend würde ich die Namensgebung der Klassen und IDs überarbeiten. Zu Beginn des Projekts habe ich versucht, mich an der BEM-Methodik zu orientieren. Allerdings ist es mir nicht durchgängig gelungen, die zugrunde liegende Struktur konsequent und sauber umzusetzen. Dadurch sind an einigen Stellen Klassennamen entstanden, die unnötig komplex oder weniger intuitiv sind, als ursprünglich beabsichtigt.

Darüber hinaus würde ich die allgemeine Struktur der CSS-Dateien klarer und durchdachter aufbauen. Eine stärkere Gliederung sowie ein konsequenterer Einsatz von Variablen hätten den Code wartbarer, übersichtlicher und langfristig besser erweiterbar gemacht.

Reflexion

Insgesamt stellt das Projekt eine solide und bewusste Umsetzung meiner gestalterischen und technischen Entscheidungen dar. Viele Aspekte – insbesondere Design, Kontrast, Typografie und Barrierefreiheit – wurden gezielt geplant, umgesetzt und überprüft. Die sehr guten Ergebnisse in den Accessibility- und Lighthouse-Tests bestätigen diesen Ansatz.

Gleichzeitig hat das Projekt deutlich gemacht, wie wichtig eine frühzeitig klar definierte Struktur im Code ist. Besonders in Bezug auf die Namensgebung von Klassen und IDs sowie die Organisation der CSS-Dateien hätte eine konsequentere Planung zu einer besseren Wartbarkeit geführt. Diese Erkenntnisse stellen jedoch keinen Nachteil dar, sondern liefern wertvolle Erfahrungen für zukünftige Projekte.

Zusammenfassend diente die Website nicht nur als fertiges Ergebnis, sondern auch als Lernprozess. Die gewonnenen Erkenntnisse werden in zukünftigen Arbeiten einfließen und ermöglichen eine noch strukturiertere, effizientere und nachhaltigere Umsetzung ähnlicher Projekte.

Hinweis zum Text-Content in diesem Projekt:

Alle Texte wurden inhaltlich von mir in Stichpunkten vorbereitet und bei besonders langen Textparagraphen mit Hilfe von ChatGPT ausformuliert, um mir Zeit zu sparen.