Junge-Gründer.de ist eine Website, die sich mit Informationen rund um das Thema “Gründen” beschäftigt. Es gibt viele einzelne Artikel über die unterschiedlichen Aspekte, die dabei zu beachten sind, sowie Informationen und Hintergrundgeschichten zu aktuellen Ereignissen.
Da die Website schon recht alt war, wurde ich engagiert, um ihr ein moderneres Erscheinungsbild zu verleihen. Meine Aufgaben bestanden darin, das UI und die UX zu entwickeln sowie das Projektmanagement für das Team zu übernehmen und den Vertragsgenerator umzusetzen.
Design Mockups
Im Folgenden finden Sie einige Ausschnitte der fertigen Designs, die als vollständig klickbare Mockups in Figma erstellt wurden.
Old vs new
Hier sind einige Vergleichsbilder zwischen der vorherigen Website und meinen Neuerungen basierend auf der Anforderungstabelle, die ich mit dem Kunden erarbeitet habe.
Mockup Strategien
In der Entwicklung dieses Projekts war es auch meine Aufgabe, den Vorständen, Autoren und Programmierern die Designs zu vermitteln und sie ordnungsgemäß zu übergeben. Dazu habe ich neben einem vollständig klickbaren Mockup in Figma auch einfache Übersichtsgrafiken erstellt und eine Präsentation vorbereitet, in der ich mit allen relevanten Parteien die Designs überprüft habe.
Auflösungen
Bei der Entwicklung einer Website ist es wichtig, die unterschiedlichen Auflösungen, Zoomstufen, Monitorgrößen und Formate zu berücksichtigen. In meinen Mockups erstelle ich daher für die am häufigsten verwendeten Systeme eine Dummy-Version, um zu überprüfen, wie sich das Design in diesen Fällen verhält. Dies dient auch den Entwicklern als Richtlinie. Es ist nicht immer die beste Lösung, ein flüssig responsives Design zu verwenden. Es kann Situationen geben, in denen andere Ansätze geeigneter sind.
UI/UX Ablaufdiagram
Für die Konzeption von Software erstelle ich zunächst Ablaufdiagramme mit Miro. Solche Diagramme sind äußerst sinnvoll, insbesondere für die Kommunikation zwischen Designern und Entwicklern. Sie helfen dabei, den Designprozess zu überprüfen und mögliche Fehlerquellen zu identifizieren. Die Verwendung von grafischen Darstellungen erleichtert die Zusammenarbeit und stellt sicher, dass alle Beteiligten ein klares Verständnis für den Ablauf und die Funktionalität des Designs haben.
