Euer Website-Konzept

HR-Expertise,
die zusammenwirkt.

Das Projekt wurde vollständig durchdacht – von der Designrichtung über die Seitenstruktur bis zum Projektplan. Hier seht ihr, wie eure Website aussehen und funktionieren wird.

21
Seiten & Bereiche
9
Leistungsbereiche
5
Projektphasen
Unternehmernetzwerk
Spezialisierte Experten aus HR, Recht & Management
Zielgruppe: Mittelstand
Unternehmen ab 50 Mitarbeitenden mit HR-Komplexität
Moderne Webtechnologie
Schnell, sauber und ohne unnötige Abhängigkeiten
Informations- & Kontaktplattform
Klar strukturiert – Vertrauen aufbauen, Kontakt generieren
Designstil: Modern & Vertrauensvoll
Inspiriert von Stripe, Linear & Notion – ruhig und strukturiert

Für wen ist diese Website?

Die Website richtet sich an Entscheider in mittelständischen Unternehmen, die mit komplexen HR-Themen konfrontiert sind.

Mittelständische Unternehmen ab ca. 50 Mitarbeitenden stehen vor der Herausforderung, gleichzeitig mehrere HR-Themen – Recruiting, Arbeitsrecht, Digitalisierung, Payroll und Benefits – zu managen.

Bisherige Lösungen über einzelne Dienstleister liefern keine koordinierte Unterstützung. Das HR Teams Netzwerk schließt diese Lücke.

  • Mittelständische Unternehmen ab ~50 Mitarbeitenden
  • Geschäftsführer und HR-Verantwortliche
  • Unternehmen in Wachstumsphasen oder Transformationsprozessen
  • Betriebe mit mehreren parallel laufenden HR-Themen
  • Entscheider, die professionelle Unterstützung suchen
Thomas M.
Geschäftsführer, 120 MA
Entscheider
Sandra K.
HR-Leiterin, 80 MA
HR Buyer
Markus R.
CFO, 60 MA
Co-Entscheider
Julia B.
Prokuristin, 200 MA
Prozess Owner

Wie eure Website wirken wird

Inspiriert von modernen B2B-Plattformen – klar, ruhig und professionell. Nicht wie eine klassische Beratungswebsite, sondern wie ein zeitgemäßes Unternehmen.

01 / Ruhig
Viel Weißraum
Großzügige Abstände lassen Inhalte atmen. Weniger ist mehr. Euer Besucher soll sich orientieren – nicht überfordert werden.
02 / Strukturiert
Klare Hierarchie
Headline → Subline → Inhalt → Kontakt. Jeder Bereich folgt einer klaren visuellen Reihenfolge, die den Blick führt.
03 / Modern
Zeitgemäßes Layout
Modulare Bereiche, klare Karten, dezente Animationen. Kein veralteter Beratungswebsite-Charakter.
04 / Vertrauensvoll
Vertrauen schaffen
Netzwerkmitglieder, Erfahrungswerte, klare Leistungsfelder. Euer Kunde braucht Substanz – keine leeren Versprechen.
05 / Fokussiert
Klares Konzept
Wenige, gut definierte visuelle Elemente. Konsistenz auf allen Seiten. Qualität vor Quantität.
06 / Zielgerichtet
Klarer Kontaktpfad
Jede Seite hat ein Ziel: das Erstgespräch. Alle Bereiche führen auf einen klaren nächsten Schritt hin.
Designreferenzen
Stripe Linear Notion Vercel Loom Pitch

Die Farbwelt eurer Website

Eine ruhige, neutrale Farbwelt mit einem Akzent-Lila als einzigem aktivem Element. Sparsam und gezielt eingesetzt – professionell und modern.

Hintergrund
#FFFFFF
Primärer Seitenhintergrund
Hellgrau
#F5F6F8
Alternierende Seitenbereiche
Dunkel
#111111
Hero, dunkle Bereiche
Akzent
#5B4BFF
Buttons, Links, Highlights
Akzent Hover
#4A3DE0
Hover-Zustand der Buttons
Haupttext
#1A1A1A
Headlines, Fließtext
Sekundärtext
#6B6F76
Beschreibungen, Subtexte

Schrift & Hierarchie

Inter – eine moderne, klar lesbare Schrift, die auf allen Geräten professionell und hochwertig wirkt.

Hauptüberschrift
48–56px / Fett
Hero-Bereich
HR-Expertise, die wirkt.
Bereichsüberschrift
36–40px / Semibold
Seitenabschnitte
Das Netzwerk erklärt.
Kartenüberschrift
22–24px / Semibold
Karten & Module
Recruiting & Personalgewinnung
Fließtext
16px / Regular
Zeilenabstand 1.6
Mittelständische Unternehmen stehen vor komplexen HR-Herausforderungen. Einzelne Dienstleister können diese Komplexität nicht vollständig abbilden. Das HR Teams Netzwerk bündelt Expertise aus einem interdisziplinären Team.
Kleintext
14px / Regular
Labels & Hinweise
Gespräch vereinbaren · Leistungen ansehen · Netzwerk kennenlernen

Baukasten der Website

Wenige, gut definierte Elemente bilden das visuelle System. Konsequent, konsistent und wiedererkennbar.

Schaltflächen
Primär: Akzentfarbe #5B4BFF — Sekundär: Transparent mit Rahmen
Navigation
Hintergrund #111111 · Sticky · Logo links, Links mittig, CTA rechts
Leistungskarten
Recruiting
Personalgewinnung & Employer Branding
Arbeitsrecht
Rechtssichere HR-Prozesse & Beratung
Kennzahlen
+120
Projekte
20+
Jahre Erfahrung
9
Leistungsbereiche
100%
Mittelstand Fokus

Der erste Eindruck

Split-Layout: Klare Botschaft links, animiertes Bildgitter rechts – mit Portraits der Netzwerkmitglieder. Die Spalten bewegen sich sanft gegeneinander.

Layout
Desktop: 50/50 Split. Mobil: Text zuerst, Bildgitter darunter.
Animation
Spalten 1+3 scrollen nach unten, Spalte 2 nach oben – sehr langsam und ruhig.
Portraits
Hochformat-Kacheln (2:3). Platzhalter bis zur Bildlieferung. Später: Portraits eurer Netzwerkmitglieder.
Handlungsaufforderung
Primär: "Gespräch vereinbaren" (Akzentfarbe) · Sekundär: "Leistungen ansehen" (dezent).

Alle Seiten im Überblick

Eine Hauptseite, neun Leistungsseiten und zwei Kernseiten. 21 Bereiche – klar strukturiert und logisch aufgebaut.

Hauptdomain
hr-teams.de
Hauptseite – 8 Bereiche
01
Hero
02
Problem
03
Strukturlücke
04
Lösung / Netzwerkmodell
05
Leistungsfelder
06
Alleinstellungsmerkmale
07
Netzwerk
08
Kontaktaufforderung
Leistungsseiten – 9 Seiten
Recruiting
Leistungsseite
Arbeitsrecht
Leistungsseite
Payroll
Leistungsseite
HR Digitalisierung
Leistungsseite
Benefits
Leistungsseite
BAV
Leistungsseite
Bewerbermanagement
Leistungsseite
HR Partner / Interim
Leistungsseite
Projektleitung
Leistungsseite
Kernseiten – 2 Seiten
Netzwerk
Kernseite
Kontakt
Kernseite

So läuft euer Projekt ab

Fünf klar strukturierte Phasen – von der ersten Idee bis zur fertigen, veröffentlichten Website.

1
Phase 01
Konzeptphase
  • Projektverständnis
  • Designrichtung
  • Struktur und Zielbild
Aktiv
2
Phase 02
Website-Aufbau
  • Aufbau der Seiten
  • visuelle Umsetzung
  • inhaltliche Integration
Ausstehend
3
Phase 03
Abstimmung
  • gemeinsame Durchsicht
  • Feedbackrunde
  • Feinanpassungen
Ausstehend
4
Phase 04
Finalisierung
  • Einarbeitung des Feedbacks
  • inhaltliche & visuelle Nachbearbeitung
  • technische Vorbereitung
Ausstehend
5
Phase 05
Abschluss
  • finale Website-Fassung
  • Logoentwicklung auf Basis des Webdesigns
  • Vorbereitung für Domain & Veröffentlichung
Ausstehend