Aus einem KI-Prototyp wird eine Marke mit eigenem Licht
Vom KI-Prototyp zur Webflow-Website: Design, Animationen und Umsetzung für einen Venture-Capital-Fonds, der an der Schnittstelle von Gesundheit und Pflege investiert.
- Branche:
- Venture Capital im Gesundheitswesen
- Land:
- USA
- Meine Rolle:
- Teamleitung, Review und Kundenkommunikation
Figma
Webflow
Überblick
Next Ventures ist ein Venture-Capital-Fonds in der frühen Phase. Er investiert an der Schnittstelle von Gesundheit und Pflege und unterstützt Gründerinnen und Gründer, die eine intelligentere, vernetzte Zukunft der Gesundheit aufbauen.
Das Ziel: einen KI-generierten Prototyp in eine hochwertige Webflow-Website verwandeln. Sie soll Vertrauen bei Gründern, Investoren und Partnern schaffen, statt Anfragen zu erzeugen.
Aufgaben
- Eine eigene visuelle Richtung finden, die sich vom generischen KI-Look löst
- Den HTML-Prototyp des Kunden in Figma zu einem eigenständigen, hochwertigen Design umbauen
- Startseite, Portfolio und Team gestalten, inklusive Beratern
- Eine komponentenbasierte Webflow-Website mit CMS-Collections für Portfolio und Team bauen
- Eigene Animationen und Mikro-Interaktionen entwickeln, die die Marke lebendig machen
- Performance, Responsivität und SEO von der ersten Komponente an mitdenken
Vorgehen
Vom Prototyp zum Design
Der Kunde kam mit einem KI-generierten HTML-Prototyp und einem klaren Auftrag: Die dunkle, minimale Stimmung soll bleiben, der Vorlagen-Look soll verschwinden. Der Prototyp diente als Strukturgerüst, und jeder Abschnitt wurde in Figma neu gestaltet, mit verfeinerter Typografie, stärkerer Hierarchie und einem leuchtenden Lichtring als Erkennungszeichen.
Gestaltungsrichtungen
Das Team testete mehrere Richtungen, von tiefem Petrolblau bis zu warmem, leuchtendem Orange, und prüfte, wie gut jede die Idee der Konvergenz ausdrückt. Die finale Richtung verbindet eine fast schwarze Fläche mit einem einzelnen Lichtring, einer kursiven Serifenschrift als Akzent und zurückhaltender, redaktioneller Typografie.
Website-Design
Die ganze Website folgt einer durchgehenden Bildsprache: von der Startseite über ein Portfolio, das sich nach Gesundheit und Pflege filtern lässt, bis zu Teamprofilen, Beratern und der 404-Seite. Jeder Bildschirm bleibt minimal und auf den Punkt. Der leuchtende Ring, die kursiven Serifen-Akzente und das Zeichen aus Hammer und Nagel halten das Erlebnis zusammen.
Die Animation trägt die Geschichte der Konvergenz: Ein leuchtender Ring eröffnet die Startseite, und der Abschnitt „Approach“ zeigt, wie sich die Strategien für Gesundheit und Pflege an einem Punkt treffen. Dezente Hover-Effekte, Einblendungen und Übergänge geben jedem Abschnitt Tiefe, ohne die Seite zu bremsen.
Responsive
Jeder Abschnitt wurde für Tablet und Smartphone angepasst, nicht einfach verkleinert. Die leuchtende Startseite, das Diagramm aus Gesundheit, Konvergenz und Pflege sowie das Portfolio-Raster sind zu vertikalen Layouts umgebaut, die sich gut mit dem Daumen bedienen lassen.
Performance
Performance war von der ersten Komponente an eine Priorität. Trotz aufwendiger Bilder und Bewegung erreicht die Website in Lighthouse 99 Punkte bei Performance, 92 bei Barrierefreiheit und je 100 bei Best Practices und SEO, bei einem Largest Contentful Paint von 0,8 Sekunden.
Ergebnis
Aus einem KI-generierten Prototyp wurde eine unverwechselbare Marken-Website. Rund um die Idee der Konvergenz entstand eine eigene visuelle Identität. Gründer, Investoren und Partner finden eine minimale Seite, die Vertrauen aufbaut. Die komponentenbasierte Webflow-Umsetzung mit CMS für Portfolio und Team ist leicht zu pflegen, und die eigenen Animationen und Mikro-Interaktionen kommen mit einem sehr guten Performance-Wert.
