Bendesign Grafiker Logo
Das Webdesign der Startseite in der mobilen Darstellung auf einem iPhone. Dabei wird deutlich, wie sich die Inhalte durch ein responsives Layout optimal an kleine Bildschirmgrößen anpassen und eine intuitive Nutzung ermöglichen.
Das Webdesign der Startseite in der mobilen Darstellung auf einem iPhone. Dabei wird deutlich, wie sich die Inhalte durch ein responsives Layout optimal an kleine Bildschirmgrößen anpassen und eine intuitive Nutzung ermöglichen.

Webdesign für Bildungseinrichtungen: Digital Education Branding

Webdesign

Aufgabenstellung:
Für die VWA München sollte ein zukunftsweisendes Webdesign-Konzept entwickelt werden, das die traditionsreiche Marke modern und professionell im digitalen Raum positioniert. Bei Bildungseinrichtungen liegt eine besondere Herausforderung im Stakeholder-Management, da eine Akademie unterschiedliche Zielgruppen bedient. Während Studieninteressierte emotional abgeholt und intuitiv durch das Angebot geführt werden wollen, benötigen Dozierende und aktive Studierende eine hocheffiziente, sachliche Organisation. Das Ziel war ein Webdesign München, das diesen Spagat zwischen emotionaler Ansprache und funktionaler Struktur perfekt meistert.

Umsetzung:

  • Mobile-First:
    In der heutigen Bildungslandschaft gilt das Smartphone als das wichtigste Arbeitsgerät. Ob Kurspläne im Vorraum des Hörsaals checken oder kurzfristige Infos abrufen. Der Zugriff erfolgt fast ausschließlich mobil. Daher wurde das gesamte Konzept nach dem Mobile-First-Prinzip entwickelt. Eine kompromisslose mobile Nutzbarkeit und ein durchgängiges responsive Design Framework stellen sicher, dass die Bildungseinrichtung auf jedem Endgerät gut aussieht.
  • Inklusion durch Barrierefreiheit (Accessibility):
    Bildungseinrichtungen tragen eine gesellschaftliche Verantwortung für Inklusion. Daher war die Berücksichtigung von Barrierefreiheit nach WCAG-Standards ein Kernbestandteil der Entwicklung. Durch optimierte Kontraste, eine klare visuelle Hierarchie und eine hervorragende Lesbarkeit der Typografie stellen wir sicher, dass die Website für alle Menschen zugänglich und einfach bedienbar ist.
  • Schnittstellen-Kompetenz
    Webdesign ist nur so gut wie seine technische Umsetzung. Da die Programmierung durch einen externen Dienstleister erfolgte, lag ein Schwerpunkt auf einem reibungslosen Design-to-Development Hand-off. Dem Entwicklerteam wurden nicht nur fertige Designdateien zur Verfügung gestellt, sondern auch ein umfassender Styleguide und ein modulares UI-Kit. Diese professionelle Vorbereitung trug dazu bei, dass das Webdesign ohne Qualitätsverluste eins zu eins im Code landete.
Ergebnis
Entstanden ist ein ganzheitliches Webdesign für Bildungseinrichtungen, das die VWA München als modernen, strukturierten und nutzerfreundlichen Bildungsbegleiter positioniert. Die neu konzipierte Informationsarchitektur verkürzt die intuitiv verständlichen Wege zu den Inhalten und verbessert die Orientierung.

Durch das definierte Designsystem wird eine konsistente visuelle Identität sichergestellt, die akademische Seriosität mit zeitgemäßer digitaler Ansprache verbindet. Das Ergebnis ist eine funktionale, zukunftsfähige und inklusive Webpräsenz, die den hohen Ansprüchen der Bildungseinrichtung und ihrer Nutzer gerecht wird.

Kunde:

VWA-München

Branche: Bildungseinrichtungen

Aufgabenbereich:
UX-Design, Webdesign, Bildkonzept

Technik:
Layouts in Photoshop, Prototypen mit HTML, CSS und JS

Darstellung der Startseite der VWA München in einer responsiven Ansicht auf verschiedenen Endgeräten vor einem blauen Hintergrund. Dabei wird die konsistente Gestaltung und flexible Anpassung des Webdesigns über unterschiedliche Bildschirmgrößen hinweg visualisiert.
Darstellung der Startseite der VWA München in einer responsiven Ansicht auf verschiedenen Endgeräten vor einem blauen Hintergrund. Dabei wird die konsistente Gestaltung und flexible Anpassung des Webdesigns über unterschiedliche Bildschirmgrößen hinweg visualisiert.
Die Headernavigation mit klar strukturierter Hauptnavigation und verschachtelten Untermenüs erleichtert die Orientierung innerhalb des umfangreichen Inhaltsangebots. Eine Breadcrumb-Navigation zeigt dabei jederzeit die aktuelle Position im Seitenaufbau und unterstützt eine transparente Nutzerführung.
Die Headernavigation mit klar strukturierter Hauptnavigation und verschachtelten Untermenüs erleichtert die Orientierung innerhalb des umfangreichen Inhaltsangebots. Eine Breadcrumb-Navigation zeigt dabei jederzeit die aktuelle Position im Seitenaufbau und unterstützt eine transparente Nutzerführung.
UX-Design der rechten, sticky Sidebar mit Quicklinks und interaktiven Response-Elementen. Beim Erreichen definierter Scroll-Breakpoints reagiert die Sidebar dynamisch und hebt sich durch subtile Animationen und Bewegungseffekte hervor.
UX-Design der rechten, sticky Sidebar mit Quicklinks und interaktiven Response-Elementen. Beim Erreichen definierter Scroll-Breakpoints reagiert die Sidebar dynamisch und hebt sich durch subtile Animationen und Bewegungseffekte hervor.
Konsistent gestaltete Formulare mit Lightbox-Funktionen und variablen Parametern, eingebettet in ein einheitliches Corporate Design. Dadurch entsteht eine durchgängige und professionelle Nutzererfahrung über alle Eingabebereiche hinweg.
Konsistent gestaltete Formulare mit Lightbox-Funktionen und variablen Parametern, eingebettet in ein einheitliches Corporate Design. Dadurch entsteht eine durchgängige und professionelle Nutzererfahrung über alle Eingabebereiche hinweg.
Corporate-Design Footer mit Bereichen zu Vorteilen, anstehende Termine, Testimonials, CTA und Kontaktdaten.
Umfangreicher Footer mit Terminen, Quicklinks und CTA Elementen.
Konsistent gestaltete Icons zur visuellen Darstellung der verschiedenen Studienschwerpunkte. Dadurch werden Inhalte schnell erfassbar und klar voneinander differenzierbar gemacht.
Konsistent gestaltete Icons zur visuellen Darstellung der verschiedenen Studienschwerpunkte. Dadurch werden Inhalte schnell erfassbar und klar voneinander differenzierbar gemacht.
Das Kontaktformular mit den zentralen Eingabefeldern und einem klar strukturierten UX-Design. Nicht relevante Seitenelemente werden über eine Lightbox ausgeblendet, sodass der Fokus vollständig auf dem aktuellen Eingabeprozess liegt.
Das Kontaktformular mit den zentralen Eingabefeldern und einem klar strukturierten UX-Design. Nicht relevante Seitenelemente werden über eine Lightbox ausgeblendet, sodass der Fokus vollständig auf dem aktuellen Eingabeprozess liegt.
Der Mediaplayer wird standardmäßig in einer Lightbox dargestellt, die unwesentliche Bildschirmbereiche ausblendet und den Fokus auf den aktuellen Medieninhalt legt. Durch einen Klick außerhalb des Inhaltsbereichs lässt sich die Ansicht minimieren, während sie über das entsprechende Navigationssymbol wieder in den Vollbildmodus erweitert werden kann.
Der Mediaplayer wird standardmäßig in einer Lightbox dargestellt, die unwesentliche Bildschirmbereiche ausblendet und den Fokus auf den aktuellen Medieninhalt legt. Durch einen Klick außerhalb des Inhaltsbereichs lässt sich die Ansicht minimieren, während sie über das entsprechende Navigationssymbol wieder in den Vollbildmodus erweitert werden kann.
Das Bestellformular für die Infobox wird in einer Lightbox dargestellt, wodurch alle in diesem Schritt nicht relevanten Elemente ausgeblendet werden. So wird der Fokus gezielt auf den aktuellen Bestellprozess gelenkt.
Das Bestellformular für die Infobox wird in einer Lightbox dargestellt, wodurch alle in diesem Schritt nicht relevanten Elemente ausgeblendet werden. So wird der Fokus gezielt auf den aktuellen Bestellprozess gelenkt.
Darstellung der Website auf zwei mobilen Endgeräten. Gezeigt werden sowohl die zeitlich nächstgelegenen Infoabende als auch eine übersichtliche Ansicht der Studiendetails.
Darstellung der Website auf zwei mobilen Endgeräten. Gezeigt werden sowohl die zeitlich nächstgelegenen Infoabende als auch eine übersichtliche Ansicht der Studiendetails.

>> Zurück zum

Designportfolio

Eigenes
Projekt starten

Kontaktieren Sie mich, und ich unterstütze Sie dabei, Ihr Projekt erfolgreich umzusetzen.