Zum Inhalt
← Rezepte
Alle Rezepte

Personaldienstleister: direkt und fair

Personaldienstleister / Zeitarbeit (Arbeitnehmerüberlassung) / Personalvermittlung / Personalberatung für Fach- und Hilfskräfte in Industrie, Logistik, Handwerk, Pflege und Büro

Zwei Gruppen kommen auf die Seite: Menschen, die Arbeit suchen („Gibt es was in meiner Nähe, in meiner Schicht, was verdiene ich?“), und Betriebe, die Personal brauchen („Wie schnell, welche Qualifikation, was kostet das?“). Deshalb ist der Hero eine Weiche mit zwei gleich großen Wegen. Für Bewerbende folgen Jobs in der Nähe mit Filter nach Schicht, Arbeitszeit und Führerschein, Stellenseiten mit Stundenlohn als Spanne, Tarif und Einsatzort, eine Kurzbewerbung ohne Anschreiben und ehrliche Antworten zu Zeitarbeit (Equal Pay, Übernahme, Probezeit). Für Betriebe Überlassung und Vermittlung mit Ablauf und Anfrage. Special Gothic kräftig für Überschriften, TikTok Sans für Text. Hellgrau, Arbeitsblau und Werkblau, Grün nur für „Jetzt bewerben“. Signatur: der Schichtfilter. Die Filter sind eine verbundene Knopfgruppe (Früh, Spät, Nacht, Teilzeit, Führerschein), die beim Drücken breiter und eckiger wird und gewählt rund bleibt; die Trefferliste ordnet sich sichtbar neu (button-gruppe-expressiv, toggle, mit flip-zustandswechsel).

Bauplan tokens.css Alle Techniken

Schrift

Direkt und fair

Zwei Gruppen kommen auf die Seite: Menschen, die Arbeit suchen („Gibt es was in meiner Nähe, in meiner Schicht, was verdiene ich?“), und Betriebe, die Personal brauchen („Wie schnell, welche …

Headline
Special Gothic
Text
TikTok Sans

Farbe

  • #F4F4F1
  • #16181C
  • #DCE5F0
  • #13233A
  • #1B7340
  • #575B62

Bewegung

cubic-bezier(0.25, 1, 0.5, 1)
Dauer
200 (Hover, Farbe), 350 (Filter, Reiter, Dialog öffnen), 240 (schließen), 250 (Filterknopf ändert Form, Trefferliste ordnet sich neu), 500 (H1-Zeilen einmal), 600 (Seitenwechsel, Stellentitel wird H1)

Aufbau der Seite

SignaturButton-Gruppe expressiv (Toggle, Auswahl, Split)

HeroFoto-Hero mit Leiste, Karte oder Weiche · Weiche zu den Filialen

  1. Jobs in deiner Nähe (Postleitzahl oder Ort, Filter als Knopfgruppen: Schicht, Arbeitszeit, Führerschein; Trefferliste mit Stundenlohn als Spanne, Einsatzort, Schicht; Leerzustand mit Job-Alarm)Button-Gruppe expressiv (Toggle, Auswahl, Split) · Toggle-GruppeAnimierter Filter- und Ansichtswechsel (FLIP / View Transitions) · NativGanze Karte klickbarFehlerseite und Leerzustände · Suche ohne Treffer
  2. Stellenseite (je Stelle eine Seite: Aufgaben, Stundenlohn als Spanne und Tarif, Zuschläge, Schichten, Einsatzort, Arbeitnehmerüberlassung oder Direkteinstellung genannt, Führerschein nur wenn nötig; JobPosting nur für sichtbare Inhalte)Stellenseite mit Gehalt, Ablauf und JobPosting-Daten · Handwerk
  3. Kurzbewerbung (ohne Anschreiben: Name, Telefon, Wunschzeit für den Rückruf, Lebenslauf freiwillig als Foto oder Datei; Fehlerliste; Bestätigung mit Rückrufzeit)Stellenliste mit Kurzbewerbung · KurzbewerbungDatei-Ablage mit Vorschau und Prüfung · Ein Knopf und KachelnFehlerzusammenfassung im Formular · Kompakt über dem KnopfDanke-Seite: was jetzt passiert · Fester Termin
  4. Was wir bieten (Tarif, Zuschläge, Urlaub, Arbeitskleidung, Fahrtkosten, Übernahmechance ehrlich; Zahlen nur echt als Tabelle)Zahlen-/Fakten-Sektion als Typo-Ereignis · Ruhige Tabelle
  5. So läuft es für Bewerbende (Bewerbung → Gespräch → Vertrag → Einsatz → feste Ansprechperson; Dauer ehrlich)Prozess-/Timeline-Sektion mit wachsender Linie · Unterstrich je Schritt
  6. Für Betriebe (Arbeitnehmerüberlassung, Personalvermittlung, Branchen; je Leistung eine Seite mit Antwort zuerst: wie schnell, welche Qualifikation, wovon der Verrechnungssatz abhängt)Leistungsseite: Antwort zuerst · HandwerkAnsprechperson-Band · Handwerk
  7. Anfrage für Personal (Qualifikation, Anzahl, Zeitraum, Einsatzort, Schicht; erledigte Schritte als Kurzfassung)Mehrschritt-Anfrage mit Zusammenfassung · Senkrecht
  8. Niederlassungen (ab vier Standorten Liste mit Suche; je Niederlassung eine Seite mit Status, Bus und Rad, Disposition, Jobs vor Ort)Standortfinder als Liste · ListeStandort-Detailseite · FilialeKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Standorte
  9. Stimmen (Mitarbeitende mit Vorname, Einsatz und Monat; Bewertungen von Google oder Arbeitgeberportalen nur mit Echtheitshinweis)Testimonials neu gedacht · Masonry-WandPlattform-Bewertungen mit Echtheitshinweis · Mehrere Plattformen
  10. Fragen zu Zeitarbeit (Was ist Zeitarbeit, Equal Pay, Höchstüberlassungsdauer, Probezeit, Übernahme, Kosten für Bewerbende: keine; eigene Seite mit Suche)FAQ-Seite mit Suche · Mit Suche
  11. Erklärung zur Barrierefreiheit (eigene Seite; freiwillig im bewährten Aufbau, vom Kunden prüfen lassen)Seite „Barrierefreiheit“ als Vorlage · Erklärung

Nicht verwenden

Regeln
  • Erster Bildschirm: Foto aus einem Einsatz, H1 und zwei gleich große Wege („Ich suche Arbeit“ mit Postleitzahl, „Ich suche Personal“ mit Telefon der Disposition). Mobil untere Leiste Anrufen / Jobs / Bewerben.
  • Signatur (button-gruppe-expressiv, Variante toggle): Filter als verbundene Knopfgruppen mit höchstens fünf Optionen, role=toolbar und aria-pressed, Trefferzahl per aria-live; Umordnen per flip-zustandswechsel (Variante nativ) nur als Position. Nie als Navigation zwischen Seiten. Bei reduzierter Bewegung nur Farbe und Häkchen.
  • Erlaubnis zur Arbeitnehmerüberlassung der Bundesagentur für Arbeit mit erteilender Stelle im Impressum (§ 5 DDG); Tarifvertrag nennen. Stellen, die als Überlassung besetzt werden, als solche erkennbar machen. Vom Kunden prüfen lassen.
  • Stellen ehrlich: Stundenlohn als Spanne und Tarif, Zuschläge, Schichten, Einsatzort oder Region; Einsatzbetrieb nur mit dessen Zustimmung. Equal Pay und Höchstüberlassungsdauer in den Fragen erklären, ohne Rechtsberatung. Entgeltangaben in Stellenanzeigen nach den Regeln zur Entgelttransparenz vom Kunden prüfen lassen.
  • Bewerbende zahlen nichts; Vermittlungsgutscheine nur nennen, wenn der Träger dafür zugelassen ist. Bewerberdaten nur für den Zweck, mit Löschfrist in der Datenschutzerklärung; Lebenslauf freiwillig. Vom Kunden prüfen lassen.
  • Stellenanzeigen ohne Benachteiligung (m/w/d, keine Altersgrenzen ohne Grund); JobPosting-Daten nur für sichtbare Stellen und mit Ablaufdatum.
  • Bewertungen von Google oder Arbeitgeberportalen nur mit Echtheitshinweis direkt dabei (bewertungsprofil-mit-echtheitshinweis).
  • Knöpfe: Taste in Grün (tiefen-taste-3d, Variante stapel) für „Jetzt bewerben“ und „Personal anfragen“; Nebenwege als Textlink mit Pfeil (pfeil-icon-button, Variante linie). Alle Zustände nach button-zustaende.
Bild und Ton
  • Licht: Echtes Arbeitslicht in Halle, Lager, Station, Büro; keine Studio-Porträts.
  • Ausschnitt: Menschen bei der Arbeit, Hände am Werkzeug, Disposition am Telefon; Einsatzbetrieb nur mit Freigabe erkennbar.
  • Personen: Mitarbeitende nur mit Einwilligung; Einsatzbetriebe nur mit Zustimmung.
  • Formate: 3:2, 4:5
  • Nicht: Keine Helme mit Daumen hoch, keine Handschlag-Bilder, keine KI-Arbeiter:innen.
  • Anrede: du für Bewerbende, Sie für Betriebe (eine Anrede je Weg, vom Kunden bestätigen lassen)
  • Sätze: Kurz und direkt: was, wo, wann, wie viel.
  • Haltung: Wie eine Disponentin am Telefon: zupackend, ehrlich bei Lohn und Schichten.
  • Tonproben: Lager in [Ort], Frühschicht 6 bis 14:30 Uhr, 15,20 bis 16,80 € pro Stunde nach Tarif., Wir rufen dich zu deiner Wunschzeit zurück. Anschreiben brauchst du nicht.
  • Nicht schreiben: „Wir suchen dich!“ ohne Stelle, „Top-Gehalt“, „junges dynamisches Team“.
Hero, Raum und Form
  • Hero-Raster: H1 oben links über 7 Spalten, Foto randlos darunter, zwei gleich breite Wege (6/6) auf dem unteren Bilddrittel; mobil H1, Foto, Wege untereinander.
  • Hero-Bild: Echtes Foto aus einem Einsatz, 16:9 Desktop, 4:5 mobil.
  • Überschrift: clamp(2.5rem, 1.2rem + 5.4vw, 5.5rem), Special Gothic; ein Satz für beide Gruppen oder der Name, kein Label darüber.
  • Handlung: Weg 1 „Ich suche Arbeit“ mit Postleitzahl und „Jobs zeigen“; Weg 2 „Ich suche Personal“ mit Telefon der Disposition und „Personal anfragen“ (Grün).
  • Zusatz: Mobil untere Leiste Anrufen / Jobs / Bewerben.
  • Sektionsabstand: clamp(56px, 7vw, 128px)
  • Dichte: kompakt
  • Raum: Dicht wie eine Stellentafel: Trefferliste mit 12 px Abstand, Filter mit 2 px Fugen, Kapitel mit klarem Abstand.
  • Spalten: 12
  • Maximale Breite: 1280px
  • Raster: Hero mit zwei gleich breiten Wegen (6/6) unter dem Foto. Trefferliste: Filter oben über 12 Spalten, Karten zweispaltig, auf dem Telefon einspaltig. Stellenseite 8/4 mit Lohn und Bewerben rechts sticky.
  • Radius klein: 8px
  • Radius groß: 16px
  • Schatten: nur an der Taste (tiefen-taste-3d)
  • Form: Griffig: Filterknöpfe wechseln zwischen 8 px und rund, Karten 16 px, Taste mit Tiefe.
Vorbilder