Im Oktober-Meetup präsentierte Monika de Weryha das Thema „Sinnvolles Webdesign“ und legte dabei besonderen Wert auf die Do’s and Don’ts im Design, um Benutzerfreundlichkeit und Zugänglichkeit zu optimieren. Mit einer übersichtlichen und klaren Gestaltung können Webseiten die Nutzerführung verbessern und eine intuitive Erfahrung schaffen. Monika zeigte typische Design-Fehler und gab praxisnahe Empfehlungen, um häufige Stolpersteine zu vermeiden.
Zu den wichtigsten Do’s im Webdesign zählte Monika eine aufgeräumte Struktur mit einer logischen Hierarchie der Elemente, hohe Kontraste für Lesbarkeit und Konsistenz bei den Schriftgrößen. Ein klares Farbschema und hochwertige Fotografenbilder unterstützen eine professionelle und ansprechende Optik. Gleichzeitig ist es wichtig, die Zielgruppe und Markenidentität zu berücksichtigen: Ein gut durchdachtes Moodboard und die Fokussierung auf das Wesentliche helfen, eine authentische Atmosphäre zu schaffen, die Besucher:innen anspricht und die Marke stärkt.
Auf der Don’t-Seite standen häufige Fehler wie überladene „Kasten im Kasten“-Layouts, das Einbinden zahlreicher externer Elemente und Stilmischungen, die das Design unruhig wirken lassen. Geringe Kontraste und Begrüßungsphrasen wie „Willkommen auf meiner Website“ können die Benutzererfahrung negativ beeinflussen, ebenso wie der Einsatz kostenloser Icon-Sets und minderwertiger Stockbilder. Monika betonte, dass auch auf XL-Slider im Header verzichtet werden sollte, um die Übersichtlichkeit zu wahren und den Fokus auf die wesentlichen Inhalte zu legen.
Monika sprach außerdem die Bedeutung eines „Mobile-First“-Ansatzes an. Während sie selbst oft von „Desktop-first“ ausgeht, ist die Gestaltung für mobile Geräte in Zeiten steigender mobiler Nutzung unverzichtbar. Seiten wie Awwwards und CSS Design Awards bieten sowohl ihr als auch ihren Kund:innen wertvolle Inspiration und aktuelle Designtrends.
Barrierefreiheit im Webdesign
Ein weiterer Fokus des Vortrags lag auf der Zugänglichkeit von Webseiten. Monika stellte einige essenzielle Barrierefreiheits-Tipps vor, die den Zugang für alle Nutzer:innen erleichtern und den WCAG-Richtlinien entsprechen:
-
Hoher Farbkontrast zwischen Text und Hintergrund
-
Lesbare Textgröße und Skalierbarkeit
-
Alternativtexte für alle Bilder
-
Klare und zugängliche Navigation
-
Tastaturbedienbarkeit aller Inhalte
-
Strukturierte Überschriften mit korrekter Hierarchie
-
Einfache und verständliche Sprache
-
Visuelles Feedback bei interaktiven Elementen
-
Untertitel und Transkripte für Videos
-
Deutliche Fehlermeldungen und Hilfen in Formularen
Diese Do’s and Don’ts und die Barrierefreiheitstipps bieten eine solide Basis, um Webseiten effektiv und nutzerfreundlich zu gestalten. Monika ergänzte den Vortrag mit praktischen Ressourcen und Links, die beim Design und der Überprüfung der Zugänglichkeit hilfreich sind.
Links und Ressourcen
Zielgruppenanalyse & Moodboards
-
Wery Design Studio Meetup-Seite (Präsentationsdownload): https://wery-designstudio.de/wp-meetup
Design-Inspiration und aktuelle Trends
-
Awwwards: https://awwwards.com/
-
CSS Design Awards: https://cssdesignawards.com/
Barrierefreiheit und Testing-Tools
-
European Accessibility Act Talk auf WordPress.tv: https://wordpress.tv/2024/07/03/the-european-accessibility-act-explained/
-
Barrierefreiheitsstärkungsgesetz (BFSG 2025): https://www.revier.de/news/detail/barrierefreiheitsstaerkungsgesetz-bfsg-2025/
-
Equalize Digital Accessibility Checker: https://equalizedigital.com/accessibility-checker/
-
Accessibility Checker Plugin auf WordPress: https://de.wordpress.org/plugins/accessibility-checker/
-
Barrierefreies Webdesign: https://www.barrierefreies-webdesign.de/
Icons und Grafiken
-
The Noun Project: https://thenounproject.com/
-
Envato Elements: https://elements.envato.com/de/
Schönere Farbverläufe
-
CSS Tricks: Farbverläufe ohne „graue Zone“: https://css-tricks.com/the-gray-dead-zone-of-gradients/
Weitere Details und den Download der Präsentation finden Sie auf der Meetup-Seite von Wery Design Studio.