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.

VWA

Webdesign für VWA-München

Auftraggeber:
Verwaltungs- und Wirtschaftsakademie München e. V.

Aufgabenstellung:
Für die VWA München sollte ein vollständiges Webdesign-Konzept für modernes Webdesign München entwickelt werden, das die Marke modern und professionell präsentiert. Ziel war es, ein klar strukturiertes, nutzerfreundliches Interface zu gestalten, das die Vielzahl an Informationen im Bildungsangebot übersichtlich aufbereitet und eine intuitive Navigation ermöglicht.

Der Fokus lag auf einer konsistenten Markenwirkung sowie einer verbesserten Benutzerführung für Studierende, Interessenten und Dozierende.

Umsetzung:
Im Rahmen des Projekts wurden zunächst Informationsarchitektur und Seitenhierarchien vollständig neu konzipiert. Darauf aufbauend entstand ein visuelles Designsystem, das Typografie, Farbwelt und Bildsprache klar definiert und aufeinander abstimmt.

Besonderes Augenmerk lag auf einer stringenten Nutzerführung sowie einer hohen Lesbarkeit der Inhalte, um komplexe Bildungsangebote verständlich zu strukturieren. Alle Gestaltungselemente wurden so entwickelt, dass sie eine konsistente Markenkommunikation über alle Seiten hinweg gewährleisten.

Die finale technische Umsetzung erfolgte durch einen externen Dienstleister, der das Designkonzept als verbindliche Grundlage für die Entwicklung nutzte.

Ergebnis:
Entstanden ist ein umfassendes Webdesign-Konzept, das die VWA München modern, strukturiert und benutzerfreundlich positioniert. Die klare Informationsarchitektur erleichtert den Zugang zu Studien- und Weiterbildungsangeboten und verbessert die Orientierung auf der Website deutlich.

Durch das definierte Designsystem wird eine konsistente visuelle Identität sichergestellt, die sowohl Seriosität als auch zeitgemäße digitale Ansprache verbindet. Das Ergebnis bildet die Grundlage für eine funktionale und zukunftsfähige Webpräsenz im Bildungsbereich.

VWA-München

Branche: Bildung

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.