Website für Hydro-Ingenieure: Ingenieurbüro, Siedlungswasserwirtschaft

+49 172 6067457 Kostenloses Erstgespräch

Website-Relaunch für ein Ingenieurbüro: Hydro-Ingenieure aus Düsseldorf

Website / Ingenieurbüro, Siedlungswasserwirtschaft, Düsseldorf, vier weitere Standorte in Deutschland

Live ansehen

Kunde: Hydro-Ingenieure
Branche: Ingenieurbüro, Siedlungswasserwirtschaft, Düsseldorf, vier weitere Standorte in Deutschland
Live: hydro-ingenieure.de
Leistungen: Vier Designkonzepte zur Auswahl
Komplettes Redesign der bisherigen Website
Konzept und Seitenstruktur für mehr als 60 Unterseiten
Webdesign
Entwicklung in Code mit Next.js
Übernahme der Inhalte aus der bisherigen WordPress-Seite
Kompetenz-, Standort-, Projekt- und Karriereseiten
Kontakt- und Bewerbungsformular mit eigenem Backend
Technik: Next.js 14
TypeScript
Tailwind CSS
Framer Motion
Lenis
PHP
Vimeo

So entsteht der Preis

01 / Auf einen Blick

Ausgangslage
Ein Ingenieurbüro mit 129 Fachleuten und fünf Standorten, dessen viele Inhalte auf einer veralteten WordPress-Seite lagen.
Lösung
Ein komplettes Redesign in Next.js mit Wasser als Leitmotiv: Film im Einstieg, Kompetenzen als Kapitel im Querlauf, Standortkarte und ein eigener Karrierebereich.
Ergebnis
Auftraggeber finden die passende Kompetenz in wenigen Klicks, Bewerber die offenen Stellen mit direktem Formular.

60+Unterseiten im neuen Auftritt

02 / Ausgangslage

Wo das Projekt stand.

Ingenieurbüros für Wasserwirtschaft arbeiten meist für öffentliche Auftraggeber. Dort entscheidet nicht ein Klick auf einen Button, sondern der Eindruck von Erfahrung und Verlässlichkeit. Gleichzeitig suchen fast alle Büros Fachkräfte. Die Website muss also zwei Gruppen überzeugen: Auftraggeber und Bewerber.

Hydro-Ingenieure ist eine unabhängige Ingenieurgesellschaft mit Sitz in Düsseldorf und Standorten in Kaiserslautern, Karlsruhe, Darmstadt und Osnabrück. Die bisherige Seite lief auf WordPress und war in die Jahre gekommen. Aufgabe war ein komplettes Redesign in Code. Es sollte die Größe des Büros sichtbar machen und die vielen Inhalte zu Kompetenzen, Projekten und Stellen sauber ordnen.

03 / Die Lösung

Was wir gebaut haben, und warum.

Erklärung wählenEinfach gesagtFür Leute vom Fach

01
Vier Konzepte, eine Richtung
Bevor eine Zeile Code entstand, gab es vier Designrichtungen: technisch, menschlich, redaktionell und filmisch. Gewählt wurde eine Mischung aus filmischer Bildsprache mit Wasser als Motiv und klarer, technischer Ordnung.
Die Konzepte Precision Engineering, Human First, Bold Editorial und Flow wurden gegeneinander gestellt. Umgesetzt ist Flow plus Precision: filmische Bildflächen in dunklem Blau, dazu ein strenges Raster für Texte, Listen und Kennzahlen. Primärfarbe ist das Blau aus dem bestehenden Logo.
- Vier Richtungen zur Auswahl
- Wasser als visuelles Leitmotiv
- Raster und Typografie für technische Klarheit
02
Ein Einstieg, der wie ein Film beginnt
Die Startseite öffnet mit bewegten Luftaufnahmen eines Klärwerks und dem Logo in der Mitte. Beim Scrollen tritt das Logo zurück, und die Kennzahlen des Büros erscheinen: 129 Fachleute, über 40 Jahre, über 2.000 Projekte, 5 Standorte.
Hero als Hintergrundvideo mit scrollgesteuertem Logo-Reveal über Framer Motion (useScroll, useTransform). Die Kennzahlen sind Angaben des Kunden. Danach folgt ein Statement-Block auf Weiß und ein eingebetteter Imagefilm über Vimeo. Lenis sorgt für gleichmäßiges Scrollen über die langen Kapitel.
- Bewegte Luftaufnahmen im Einstieg
- Kennzahlen erscheinen beim Scrollen
- Imagefilm direkt auf der Startseite
03
Sechs Kompetenzen als Kapitel im Querlauf
Abwasser, Wasser, Energie, Digitale Planung, Forschung und Mikroverunreinigungen laufen beim Scrollen von rechts nach links durch. Jede Kompetenz füllt den Bildschirm und führt auf eine eigene Unterseite.
Horizontal-Scroll-Sektion mit Sticky-Container: Die vertikale Scrollbewegung verschiebt sechs vollflächige Panels seitlich. Davor steht ein Logo-Ticker mit Auftraggebern wie Emschergenossenschaft, Stadtentwässerung Köln oder Wupperverband als Vertrauensanker. Jede Kompetenz hat eine eigene Seite mit Ansprechpartnern.
- Ein Bildschirm pro Kompetenz
- Auftraggeber-Logos direkt davor
- Sechs Unterseiten mit eigenem Ansprechpartner
04
Standorte, Projekte und Karriere als eigene Bereiche
Eine Deutschlandkarte zeigt die fünf Standorte. Dazu kommen Referenzprojekte, Neuigkeiten, Kunden, Mitgliedschaften und ein Karrierebereich mit allen offenen Stellen. Insgesamt hat die Website mehr als 60 Unterseiten.
Statischer Export aus Next.js mit generierten Detailseiten für Referenzprojekte, Beiträge und Stellen. Inhalte aus der alten WordPress-Seite wurden per Skript übernommen. Kontakt- und Bewerbungsformular senden an PHP-Endpunkte mit Rate-Limit. Ein Event-Hinweis kündigt Messen an und blendet sich nach dem Termin selbst aus.
- Mehr als 60 Unterseiten in einer Struktur
- Stellenseiten mit direkter Bewerbung
- Event-Hinweis mit Ablaufdatum

04 / Das Ergebnis

60+Unterseiten im neuen Auftritt

Die neue Website ist live und zeigt Hydro-Ingenieure so, wie das Büro arbeitet: ruhig, genau und mit großen Projekten. Auftraggeber finden Kompetenzen, Standorte und Referenzen auf direktem Weg. Bewerber sehen offene Stellen und bewerben sich ohne Umweg.

Sechs Kompetenzen mit eigenen Unterseiten
Mehr als 60 Unterseiten, komplett in Code gebaut
Fünf Standorte auf einer Deutschlandkarte
Karrierebereich mit Stellenseiten und Bewerbungsformular
Inhalte der alten WordPress-Seite vollständig übernommen

05 / Kurz erklärt

Siedlungswasserwirtschaft: Alles rund um Trinkwasser, Abwasser und Regenwasser in Städten und Gemeinden, von der Kläranlage bis zum Kanal.
Horizontal-Scroll: Inhalte bewegen sich beim normalen Scrollen seitlich durch den Bildschirm, wie Seiten in einem Buch.
Statischer Export: Die Website wird vorab komplett als fertige Dateien erzeugt. Das macht sie schnell und wenig anfällig.
Next.js: Ein verbreitetes Werkzeug für schnelle, gut auffindbare Websites mit vielen Unterseiten.

Fragen, die dazu oft kommen.

Was muss die Website eines Ingenieurbüros leisten?

Sie muss Auftraggebern Erfahrung und Referenzen zeigen und gleichzeitig Bewerber ansprechen. Bei Hydro-Ingenieure trennen eigene Bereiche für Kompetenzen, Projekte und Karriere diese beiden Wege.

Können Inhalte der alten WordPress-Seite übernommen werden?

Ja. Bei Hydro-Ingenieure wurden Referenzen, Beiträge und Stellen per Skript aus der alten Seite übernommen und in die neue Struktur eingeordnet.

Lohnt sich ein Karrierebereich auf der Firmenwebsite?

Für Büros, die Fachkräfte suchen, fast immer. Eigene Stellenseiten mit direktem Formular senken die Hürde für Bewerbungen und lassen sich bei Google finden.

Was kostet ein Website-Relaunch für ein Ingenieurbüro?

Das richtet sich nach dem Umfang, vor allem nach der Zahl der Unterseiten, Standorte und Formulare. Das Angebot mit Festpreis liegt einen Werktag nach dem Erstgespräch vor.

Ähnliche Projekte