Strategie & Recherche
Wir analysieren Markt, Zielgruppe und Anforderungen, bevor die erste Zeile Konzept entsteht.
Design & Motion Showcase
Konzept, Design und Umsetzung
Ralf Hoffmeister übersetzt als Creative Developer anspruchsvolle Designs für Agenturen in individuell entwickelte Websites. Von technischer Konzeption und Frontend über Motion bis zum redaktionsfähigen CMS.
Was dieser Showcase ist
… und was nicht. Dieser Showcase zeigt einen Ausschnitt davon, was in der Zusammenarbeit mit mir möglich ist. Ich verbinde Design, Animation und technische Umsetzung. Vom Frontend bis zum individuell entwickelten CMS.
Die gesamte Seite ist mit WordPress umgesetzt und vollständig editierbar. Kein generischer Baukasten, kein Elementor, kein Divi. Stattdessen ein CMS, das genau für die Inhalte entwickelt wurde: flexibel, wo es sinnvoll ist, kontrolliert, wo es nötig ist. Und vor allem intuitiv und frustfrei zu pflegen.
Häufig gestellte Fragen
Performance ist umso wichtiger, wenn man viel animiert. Ein paar Kompromisse gibt es, die liegen aber eher bei der Bildqualität. Bei einzelnen Effekten auch minimal bei der Barrierefreiheit.
Trotz der vielen Effekte und dem großen Umfang dieser Seite sind die Lighthouse-Werte sehr gut.
Das kommt auf die Branche und den Zweck der Website an. Unterstützende Animationen sind fast immer sinnvoll.
Dieser Showcase ist bewusst großzügig animiert, um zu zeigen, was möglich ist.
Diese Seite ist ein Showcase, kein echtes Kundenprojekt. Bilder haben großen Einfluss darauf, wie eine Website wirkt. Damit das Gesamtbild hochwertig und stimmig ist, arbeite ich hier mit KI-generierten Bildern.
Für echte Kundenprojekte würde ich das nicht empfehlen. Echte Bilder zeigen ein Unternehmen persönlicher und ehrlicher, als KI-Content das kann.
Nein. Diese Seite habe ich über mehrere Wochen geplant, gestaltet, programmiert, ausgearbeitet und optimiert. KI kann kreative Arbeit und Programmierung nicht ersetzen.
Wie jeder gute Entwickler nutze ich KI als Werkzeug für einen optimalen Workflow: Debugging, Prototyping, Tests, einheitliche Codestruktur, Barrierearmut, Ladezeit-Optimierung. Das verbessert das Ergebnis und schafft Mehrwert.
EDITORIAL
Haltung, die man sieht, bevor man sie liest
Ein markanter, typografisch dominierter Abschnitt mit großzügigem Weißraum — geeignet als Kapitelauftakt oder Markenstatement.
EDITORIAL
Zwei Bilder, eine Geschichte
Großes Hauptbild, schmale versetzte Textspalte und ein Detailbild ergänzen sich zu einer magazinartigen, asymmetrischen Komposition.
EDITORIAL
Ebenen, die zusammenhalten
Text und Bild überlagern sich kontrolliert auf einer verbindenden Hintergrundfläche — inszeniert, aber immer lesbar.
EDITORIAL
Versatz statt Symmetrie
Headline, Text und Bild starten bewusst an unterschiedlichen Rasterpositionen — reduziert, architektonisch, ohne Überlagerung.
EDITORIAL
Vom Rohstoff zur fertigen Geschichte
Ein umfangreicherer redaktioneller Baustein für Prozesse, Case Studies und Unternehmensgeschichten.
Wechselnde Textbreiten und Bildpositionen gliedern längere Inhalte in eine klare Lesereihenfolge, ohne die redaktionelle Tiefe zu verlieren. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Prozess
Vom Konzept zum fertigen Produkt
Drei Phasen, ein Ergebnis — jede Etappe bringt das Projekt sichtbar weiter.
Konzeption & Design
Aus der Strategie wird ein greifbares visuelles System — iterativ abgestimmt statt einmalig präsentiert.
Umsetzung & Launch
Entwicklung, Qualitätssicherung und ein kontrollierter Rollout schließen das Projekt ab.
+38% Conversion
Produkt
Ein Interface, drei Funktionen
Dieselbe Oberfläche — der Fokus wandert zu den Details, die gerade zählen.
Übersicht
Alle Kennzahlen auf einen Blick, klar strukturiert in einem Dashboard.
Filterfunktion
Ergebnisse lassen sich in Echtzeit eingrenzen — ohne Ladezeit, ohne Umwege.
Filter
Detailansicht
Ein Klick genügt, um bis auf Einzelpositionen herunterzubrechen.
100% Live-Daten
Detail
Filter
Detail
Parallax-Galerie
Bilder-Galerie im Masonry-Look mit echten CSS-Spalten. Beim Scrollen laufen die Spalten dezent unterschiedlich schnell (Column-Parallax), Klick öffnet die Lightbox. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.
Scrollslider Popup
Scrollslider, bei dem ein Klick auf ein Bild die Lightbox in voller Größe öffnet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Tabelle
Tabelle mit variabler Spaltenzahl, Scroll auf mobilen Geräten, Titelzeile und Zwischentitel können farbig hervorgehoben werden. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
| Merkmal | Basis | Premium |
|---|---|---|
| Leistungen | ||
| Speicherplatz | 10 GB | 100 GB |
| Support | Telefon & E-Mail | |
| Nutzer | 1 | 10 |
| Vertrag | ||
| Laufzeit | monatlich | jährlich |
| Preis | 9 € | 29 € |
Prozess
Ein Bild, das mit dem Scrollen wächst
Kurzer Einleitungstext über dem Fließtext.
Fließtext, der beim Weiterscrollen unter dem wachsenden Bild verschwindet. Er bleibt so lange lesbar, bis das Bild seine volle Breite erreicht hat.
Design
Development
CMS-Architektur
Motion
Prozess
Bild wächst in voller Höhe in die Breite
Kurzer Einleitungstext über dem Fließtext.
Das Bild bleibt in voller Höhe und wächst beim Scrollen nur in die Breite auf.
Design
Development
CMS-Architektur
Motion
Die Zusammenarbeit war von Anfang bis Ende unkompliziert und das Ergebnis übertrifft unsere Erwartungen.
Max Mustermann, Geschäftsführung
Hotspot-Bild
Klick auf die Punkte für mehr Informationen, Tooltips positionieren sich automatisch am Bildrand. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Punkt 1
Beschreibung zum ersten Hotspot.
Punkt 2
Beschreibung zum zweiten Hotspot, etwas länger zum Testen des Umbruchs.
Punkt 3
Beschreibung zum dritten Hotspot.
Unsere Partner
Endlos laufendes Logo-Band mit konstanter Geschwindigkeit, unabhängig von Anzahl und Breite der Logos. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Bento-Bilder
Hochformat-Bilder mit variierendem Seitenverhältnis und leichtem Parallax beim Scrollen.
So läuft ein Projekt
Vom gelieferten Layout bis zur laufenden Betreuung — Umsetzung aus einer Hand, ohne Agenturkette dazwischen.
-
Erstgespräch
Ziele, Umfang und Budget. Ich sage ehrlich, ob ich der Richtige für dein Projekt bin.
-
Layout-Check & Struktur
Ich prüfe die gelieferten Layouts auf Machbarkeit und offene Zustände wie Breakpoints, Hover oder Fehlerfälle. Daraus entstehen die wiederverwendbaren Blöcke, die später editierbar sind.
-
Entwicklung
Individuelles WordPress-Theme, handgeschrieben. Das Layout wird genau so umgesetzt, wie es gestaltet wurde.
-
Test & Launch
Browser, Performance und Barrierefreiheit im Check, dann Go-Live. Danach auf Wunsch regelmäßiger Service: Updates, Backups und Weiterentwicklung.
Der Anfang
Beim Scrollen legen horizontale Lamellen das nächste Bild frei.
Die Entwicklung
Die Maske folgt exakt dem Scroll-Fortschritt.
Das Ergebnis
Am Ende löst sich die Section wieder aus dem Sticky-Zustand.
Vorher
Nachher
- Seit 2011 am Markt
- Über 250 Websites umgesetzt
- Made in Germany
- Update und Backup Service
Stack-Cards
Karten stapeln sich beim Scrollen übereinander — der Stapel-Effekt selbst ist reines CSS.
-
Erste Karte
Die erste Karte bleibt beim Scrollen kleben, die nächste schiebt sich darüber.
-
Zweite Karte
Jede Karte kann eine eigene Hintergrundfarbe aus dem zentralen Farbsystem bekommen.
-
Dritte Karte
Auch die Sekundärfarbe steht als Hintergrund zur Wahl.
-
Vierte Karte
Der leichte Versatz oben macht den Stapel sichtbar.
Parallax-Bild
Bild bewegt sich beim Scrollen leicht versetzt zum übrigen Seiteninhalt. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Zahlen & Fakten
Zahlen zählen beim Scrollen ins Blickfeld animiert von null bis zum Zielwert hoch. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
- 250+ Projekte umgesetzt
- 15 Jahre Erfahrung
- 100% selbständig und unabhängig
Nette Leute, gute Projekte
Lass uns zusammen das nächste Projekt angehen. Unkompliziert, schnell und direkt.
Ob wir zusammenpassen, sollten wir in einem ersten Gespräch feststellen.