Eine neue Markenidentität braucht einen digitalen Auftritt, der sie konsequent weiterführt. Doch zwischen einem überzeugenden Design und einer funktionierenden Website liegen zahlreiche technische Entscheidungen. Wie werden Gestaltungselemente in wiederverwendbare Komponenten übersetzt? Wie lassen sich bestehende Unternehmenssysteme integrieren? Und wie entsteht eine Website, die nicht nur zum Launch funktioniert, sondern auch langfristig zuverlässig betrieben und erweitert werden kann?
Für QOR begann unsere Zusammenarbeit mit der Entwicklung einer neuen Markenidentität. Neben dem Branding gehörte auch die Konzeption und Gestaltung der zukünftigen Website in Figma zu unserem Auftrag. Die technische Umsetzung war ursprünglich anderweitig vorgesehen.
Als die Realisierung nicht wie geplant vorankam, entwickelten wir eigenständig einen ersten funktionsfähigen Prototypen. Damit konnten wir zeigen, wie sich das neue Erscheinungsbild in eine interaktive Website übersetzen lässt.
Aus diesem ersten Schritt entwickelte sich ein deutlich umfangreicheres Projekt. Wir übernahmen schließlich die vollständige Webentwicklung und konnten gemeinsam mit QOR die neue Unternehmenswebsite veröffentlichen.
Ein Design, das nicht beim Figma-Prototypen endete Die Grundlage des Projekts bildete die neue visuelle Identität von QOR. Farben, Typografie, Bildsprache und wiederkehrende Gestaltungselemente sollten zu einem konsistenten Markenauftritt zusammenfinden.
Im Mittelpunkt stand dabei nicht nur die Frage, wie die Website aussehen soll, sondern auch, wie sich das Design langfristig einheitlich umsetzen und weiterentwickeln lässt.
Deshalb haben wir aus dem ursprünglichen Figma Design ein eigenes technisches Designsystem entwickelt.
Zentrale Gestaltungswerte wie Markenfarben, Schriftgrößen, Abstände, Rundungen und responsive Breakpoints werden über sogenannte Design Tokens verwaltet. Darauf aufbauend haben wir eine Bibliothek wiederverwendbarer Komponenten erstellt, darunter Buttons, Formulare, Inhaltskarten, Navigationselemente und unterschiedliche Seitenlayouts.
Für die Entwicklung bedeutet das, dass gemeinsame Gestaltungselemente nicht auf jeder Unterseite neu programmiert werden müssen. Anpassungen können zentral vorgenommen werden, während das visuelle Erscheinungsbild konsistent bleibt.
Auch für zukünftige Erweiterungen schafft dieser Ansatz eine wichtige Grundlage: Neue Seiten und Funktionen lassen sich auf Basis bereits vorhandener Komponenten entwickeln, ohne dass die gestalterische Qualität bei jeder Ergänzung neu abgesichert werden muss.
Moderne Webentwicklung mit Nuxt 4, Vue 3 und TypeScript Der eingesetzte Techstack bei QOR Ingenieure Für die technische Umsetzung haben wir uns für Nuxt 4, Vue 3 und TypeScript entschieden.
Anders als bei einer rein statischen Unternehmenswebsite mussten wir bei QOR verschiedene interaktive Funktionen, geschützte Verwaltungsbereiche und externe Schnittstellen miteinander verbinden.
Nuxt bietet dafür eine Architektur, in der sich Frontend und serverseitige Funktionen innerhalb eines gemeinsamen Projekts entwickeln lassen.
Die öffentliche Website profitiert vom serverseitigen Rendering. Wichtige Inhalte können bereits als HTML an den Browser übertragen werden, während Vue anschließend interaktive Komponenten übernimmt.
Für Suchmaschinen schafft das gute Voraussetzungen, da zentrale Inhalte nicht ausschließlich von einer nachträglichen Ausführung von JavaScript abhängig sind.
TypeScript sorgt zusätzlich für klar definierte Datenstrukturen und Schnittstellen zwischen den einzelnen Anwendungsbereichen. Das ist besonders relevant, wenn Daten nicht nur dargestellt, sondern verarbeitet, validiert und an externe Systeme übertragen werden.
Die Website ist damit mehr als eine Sammlung gestalteter Unterseiten. Sie bildet eine eigenständige Webanwendung, in der Unternehmenskommunikation, Recruiting und interne Verwaltungsfunktionen auf einer gemeinsamen technischen Grundlage zusammenkommen.
Eine Karriereplattform mit direkter Personio Integration Ein wesentlicher Bestandteil des Projekts war die Entwicklung des Karrierebereichs.
Für Unternehmen ist die eigene Website häufig einer der wichtigsten Kontaktpunkte mit potenziellen Mitarbeitenden. Entsprechend sollte auch der Bewerbungsprozess in das neue Markenerlebnis integriert werden.
Statt Bewerber lediglich auf eine externe Plattform weiterzuleiten, haben wir einen eigenen Karrierebereich mit Stellenübersicht, individuellen Detailseiten und Bewerbungsformular entwickelt.
Die technische Besonderheit liegt in der Anbindung an Personio.
Offene Stellen werden innerhalb der QOR Website verwaltet und über eine interne Stellenkennung mit den entsprechenden Positionen in Personio verbunden. Bewerber können ihre Daten und Unterlagen direkt über die Website einreichen.
Die serverseitige Integration übernimmt anschließend die Übertragung der Bewerberdaten sowie der hochgeladenen Dokumente an das Recruiting System.
Dabei werden Eingaben und Dateianhänge geprüft, bevor die Informationen an Personio weitergegeben werden. Die benötigten Zugangsdaten bleiben ausschließlich auf dem Server.
Für Bewerber entsteht so ein durchgängiger Prozess innerhalb der Unternehmenswebsite. Gleichzeitig können die Verantwortlichen bei QOR weiterhin mit ihrem bestehenden Bewerbermanagement arbeiten.
Die Integration verbindet damit zwei Anforderungen, die bei Unternehmenswebsites häufig getrennt betrachtet werden: ein konsistentes Nutzererlebnis und die Weiterverwendung vorhandener Geschäftsprozesse.
Ein eigener Verwaltungsbereich statt zusätzlicher CMS Komplexität Für die Pflege der Karriereinhalte haben wir einen eigenen Administrationsbereich entwickelt.
Dort können berechtigte Mitarbeitende Stellenangebote erstellen, bearbeiten, aktivieren oder deaktivieren. Auch Ansprechpartner lassen sich verwalten und den jeweiligen Positionen zuordnen.
Für den Zugang haben wir die Microsoft Anmeldung über Entra ID integriert.
Dadurch können freigegebene Organisationskonten zur Authentifizierung verwendet werden. Eine zusätzliche Prüfung auf dem Server stellt sicher, dass nur ausdrücklich autorisierte Benutzer auf die Verwaltungsfunktionen zugreifen können.
“ Bewusst haben wir für diese Aufgaben kein vollständiges zusätzliches Content Management System eingeführt.
Stattdessen verfügt die Anwendung über eine auf den konkreten Bedarf zugeschnittene Verwaltungsoberfläche. Die Daten werden über eine eigene Backend Struktur verarbeitet und gespeichert.
Dieser Ansatz ermöglicht eine schlanke Bedienung, ohne Funktionen oder redaktionelle Strukturen bereitzustellen, die für den vorgesehenen Anwendungsfall nicht benötigt werden.
Performance und technisches SEO als Grundlage Eine Unternehmenswebsite muss nicht nur visuell überzeugen, sondern auch zuverlässig gefunden und auf unterschiedlichen Endgeräten effizient geladen werden können.
Deshalb haben wir Performance und Suchmaschinenoptimierung direkt in die technische Umsetzung integriert.
Die Website verwendet moderne Bildformate wie WebP und AVIF sowie unterschiedliche Bildgrößen für verschiedene Bildschirmauflösungen. Über responsive Bildquellen kann der Browser die passende Variante auswählen.
Bilder außerhalb des unmittelbar sichtbaren Bereichs werden an geeigneten Stellen verzögert geladen. Wichtige Motive erhalten dagegen eine höhere Ladepriorität.
Auch die Markenschrift Barlow wird lokal eingebunden, sodass für ihre Auslieferung kein externer Schriftdienst benötigt wird.
Für die Suchmaschinenoptimierung haben wir individuelle Seitentitel, Beschreibungen, Canonical URLs und Social Media Metadaten integriert.
Ergänzend verwenden wir strukturierte Daten nach Schema.org. Damit lassen sich unter anderem Informationen über das Unternehmen, Standorte, Dienstleistungen und Stellenangebote maschinenlesbar beschreiben.
Die dynamisch erzeugte XML Sitemap berücksichtigt nicht nur die regulären Inhaltsseiten, sondern auch veröffentlichte Stellenangebote.
Besonders im Recruiting ist das relevant: Für Stellenausschreibungen erzeugen wir strukturierte JobPosting Daten, die Suchmaschinen zusätzliche Informationen über die jeweiligen Positionen bereitstellen.
Damit werden die Inhalte nicht nur für Menschen gestaltet, sondern auch für Suchmaschinen technisch nachvollziehbar aufbereitet.
Barrierefreiheit und Qualitätssicherung als Entwicklungsprozess Die Google Lighthouse Resultate für qor-ingenieure.com Ein gutes Design muss auch dann funktionieren, wenn Menschen eine Website unter unterschiedlichen Bedingungen nutzen.
Deshalb haben wir bei der Umsetzung auf semantische HTML Elemente, erkennbare Fokuszustände, beschriftete Bedienelemente und zugängliche Formularstrukturen geachtet.
Interaktive Komponenten wie Akkordeons und Dialoge berücksichtigen die Tastaturbedienung und relevante Accessibility Attribute. Animationen respektieren an zahlreichen Stellen die Betriebssystemeinstellung für reduzierte Bewegung.
Zur technischen Qualitätssicherung haben wir außerdem eine eigene Komponentenentwicklungsumgebung mit Storybook eingerichtet.
Hier lassen sich Gestaltungselemente unabhängig von der eigentlichen Website betrachten, dokumentieren und testen.
Ergänzend nutzen wir automatisierte Tests mit Vitest und Vue Test Utils. Accessibility Prüfungen mit axe-core kontrollieren ausgewählte Barrierefreiheitsregeln. Mit Playwright überprüfen wir zusätzlich die visuelle Darstellung einzelner Komponenten anhand definierter Referenzansichten.
Automatisierte Prüfungen ersetzen keine vollständige manuelle Überprüfung der Barrierefreiheit. Sie helfen jedoch dabei, Fehler frühzeitig zu erkennen und Änderungen an bestehenden Funktionen kontrolliert umzusetzen.
Gerade bei einer Website, die kontinuierlich erweitert werden soll, ist diese Absicherung ein wesentlicher Bestandteil einer nachhaltigen technischen Umsetzung.
Von der Markenentwicklung zum digitalen Unternehmenssystem Der Relaunch von QOR zeigt, wie eng Markenstrategie, Gestaltung und technische Entwicklung miteinander verbunden sind.
Aus einem ursprünglich auf Branding und Webdesign ausgerichteten Auftrag wurde eine umfassende digitale Lösung.
Das neue Erscheinungsbild bildet die gestalterische Grundlage. Ein eigenes Designsystem sorgt für Konsistenz und Erweiterbarkeit. Nuxt und Vue verbinden die öffentliche Website mit individuellen Backend Funktionen. Die Personio Integration führt Bewerbungen direkt in bestehende Unternehmensprozesse. Automatisierte Tests und Veröffentlichungsabläufe unterstützen den langfristigen Betrieb.
Für uns war dabei besonders interessant, wie sich das Projekt entwickelt hat.
Der erste technische Prototyp entstand aus der Initiative, eine bereits vorhandene Gestaltung selbst in eine funktionierende Anwendung zu übersetzen. Daraus wurde schließlich die Verantwortung für die gesamte technische Umsetzung.
Das Ergebnis ist eine Unternehmenswebsite, die nicht nur die neue Identität von QOR sichtbar macht, sondern auch konkrete digitale Aufgaben innerhalb des Unternehmens übernimmt.
Denn eine moderne Unternehmenswebsite sollte nicht nur zeigen, wofür ein Unternehmen steht. Sie sollte auch dazu beitragen, wie dieses Unternehmen arbeitet.
