Zum Inhalt
← Rezepte
Alle Rezepte

Arbeitgeber: Einblick statt Floskel

Karriereseite und Recruiting-Microsite eines KMU (Handwerk, Pflege, Industrie, Gastronomie, Handel)

Eine Seite für Menschen, die gerade einen Job suchen, oft am Handy und in der Pause: oben das echte Angebot mit Gehaltsspanne, darunter die offenen Stellen und eine Kurzbewerbung ohne Anschreiben. Danach erst die Einblicke: eine Collage aus echten Handyfotos des Teams, ein Tag im Betrieb als waagerechte Zeitleiste, Stimmen mit Namen und Benefits als Zahlen statt Icons. Funnel Display und Funnel Sans, Kreide und Tannengrün, Klatschmohn nur für „Bewerben“. Fotos und Zettel landen wie Sticker mit einem kleinen Überschwinger, Menüs und Formulare bleiben ruhig. Anders als pflege (zweite Startseite im Dienstleister-Auftritt) ist das hier ein eigener Auftritt nur fürs Recruiting, für jede Branche.

Bauplan tokens.css Alle Techniken

Schrift

Einblick statt Floskel

Eine Seite für Menschen, die gerade einen Job suchen, oft am Handy und in der Pause: oben das echte Angebot mit Gehaltsspanne, darunter die offenen Stellen und eine Kurzbewerbung ohne Anschreiben.

Headline
Funnel Display
Text
Funnel Sans

Farbe

  • #F6F3EC
  • #161616
  • #5A5650
  • #EFE6D2
  • #1D4A3A
  • #C8382A

Bewegung

cubic-bezier(0.34, 1.56, 0.64, 1)
Dauer
150 (Druck, Farbe, Schatten; Farbe linear), 400 (Knopf-Hover, Haken nach dem Absenden), 500 (Ankunft der Collage-Teile, Versatz 50 ms, Weg höchstens 48 px, Drehung auf den Endwinkel); UI: 280 öffnen, 190 schließen (Menü, Akkordeon, Schritt der Kurzbewerbung, Dialog)

Aufbau der Seite

SignaturCollage-/Scrapbook-LayoutGepinnte Horizontal-Scroll-Section

HeroCollage-/Scrapbook-Layout

  1. Offene Stellen (Titel geschlechtsneutral oder mit (m/w/d), Ort, Stunden, Gehaltsspanne oder Tarifgruppe, Start, Schicht oder Tour; ab vier Stellen Filter nach Bereich, Ort, Teilzeit; jede Stelle mit eigener Seite und JobPosting-Daten; Initiativbewerbung darunter)Stellenliste mit Kurzbewerbung · Viele StellenStellenseite mit Gehalt, Ablauf und JobPosting-Daten
  2. Kurzbewerbung in zwei Minuten (Stelle, Name, Telefon oder E-Mail, Erfahrung als Auswahl, frühester Start; Lebenslauf freiwillig, kein Anschreiben, keine Frage nach dem bisherigen Gehalt; WhatsApp und Anruf als zweiter Weg; Bestätigung mit Name der Ansprechperson und Antwortfrist)Mehrschritt-Anfrage mit Zusammenfassung · RingFehlerzusammenfassung im Formular · Kompakt über dem KnopfValidierung erst nach InteraktionDatei-Ablage mit Vorschau und Prüfung · Lebenslauf als PDF
  3. So läuft deine Bewerbung (Eingang sofort bestätigt → Anruf innerhalb von x Werktagen → Kennenlernen vor Ort oder per Video → Probetag, bezahlt oder nicht, klar gesagt → Zusage und erster Tag; Dauer je Schritt nur, wenn sie gehalten wird)Prozess-/Timeline-Sektion mit wachsender Linie
  4. Ein Tag als … (je Beruf eine Strecke mit vier bis acht Stationen und Uhrzeit, von Schichtbeginn bis Feierabend: echte Fotos, ein Satz je Station, auch was anstrengend ist; auf dem Telefon als Wischleiste)Gepinnte Horizontal-Scroll-Section
  5. Team-Stimmen (Vorname oder Name, Aufgabe, seit wann dabei, ein konkreter Satz statt Lob; kurze Videos nur mit Untertiteln und schriftlicher Einwilligung)Testimonials neu gedacht · Ein großes ZitatEigener Videoplayer · Kapitel
  6. Was du bekommst, konkret (Gehalt oder Tarif, Zuschläge in Prozent, Urlaubstage, Arbeitszeitmodell, Dienstwagen oder Jobrad mit Betrag, Weiterbildung mit Budget, Altersvorsorge mit Arbeitgeberanteil; und was es nicht gibt: Schicht, Wochenende, Bereitschaft)Zahlen-/Fakten-Sektion als Typo-Ereignis · Ruhige Tabelle
  7. Ausbildung und Einstieg (Berufe mit Dauer, Vergütung je Ausbildungsjahr, Berufsschule, Übernahme, Praktikum zum Reinschnuppern; Quereinstieg und Teilzeit-Ausbildung; Infos für Eltern)Akkordeon mit Höhenanimation auf auto · Leistungsliste
  8. Fragen vor der Bewerbung (Quereinstieg, Teilzeit, Führerschein, Deutschkenntnisse, Anerkennung ausländischer Abschlüsse, Barrierefreiheit des Arbeitsplatzes, Kinderbetreuung)Akkordeon mit Höhenanimation auf auto · FAQ
  9. Deine Ansprechperson und der Weg zu uns (Foto, Name, Aufgabe, Telefon und WhatsApp mit Erreichbarkeit; Adresse als Text, Anfahrt mit Bus und Rad, Parken; Karte per 2-Klick)Team-/Über-mich-Layout mit Porträt-Interaktion · Statement-SatzÖffnungszeiten mit Live-Status · TerminKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · Kartenbild
  10. Job-Alert (neue Stellen per E-Mail mit Double-Opt-in, Bereich wählbar; nur wenn wirklich verschickt wird) und Barrierefreiheit (eigene Seite als freiwilliger Aufbau)Newsletter-Modul mit Persönlichkeit · ShopSeite „Barrierefreiheit“ als Vorlage · Erklärung

Nicht verwenden

Regeln
  • Erster Bildschirm: Collage aus echten Fotos, H1 mit dem konkreten Angebot (Beruf, Ort, Gehaltsspanne oder Tarif, Stunden), „Offene Stellen“ und „In zwei Minuten bewerben“, Ansprechperson mit Telefon und WhatsApp. Die untere Mobilleiste (mobile-bottom-navigation, Variante fab) zeigt Bewerben, Anrufen und WhatsApp.
  • Gehalt in jeder Stelle: Spanne in Euro brutto mit Bezug (Stunde, Monat, Jahr) oder Tarifvertrag mit Entgeltgruppe, dazu Zuschläge. Grundlage: Art. 5 der Entgelttransparenzrichtlinie (EU) 2023/970 verlangt Information über Einstiegsentgelt oder Spanne vor dem Vorstellungsgespräch und verbietet die Frage nach dem bisherigen Gehalt; die Frist zur Umsetzung lief am 07.06.2026 ab, ein deutsches Gesetz ist Stand 02.11.2026 nicht in Kraft (Bundesregierung, BT-Drs. 21/7026). Die Spanne trotzdem nennen; Umsetzung in Deutschland vom Kunden prüfen lassen.
  • AGG: Stellentitel geschlechtsneutral oder mit (m/w/d), Texte ohne Merkmale aus § 1 AGG („junges Team“, „Muttersprache Deutsch“, „bis 35 Jahre“); stattdessen Anforderungen der Aufgabe („Deutsch gut genug für Kundengespräche“). Kein Foto, kein Geburtsdatum, keine Staatsangehörigkeit als Pflichtfeld. Vom Kunden prüfen lassen.
  • Kurzbewerbung: höchstens fünf Pflichtangaben, kein Anschreiben, Lebenslauf freiwillig, keine Frage nach dem bisherigen Gehalt und keine Gehaltsvorstellung als Pflichtfeld (MFM fragt sie ab). Was im Intro versprochen wird, gilt im Formular (Siemon verspricht „ohne Lebenslauf“ und verlangt ihn dann). Nach dem Absenden: Bestätigung mit Name und Foto der Ansprechperson und der Frist, bis wann sie sich meldet.
  • Datenschutz bei Bewerbungen: Hinweis nach Art. 13 DSGVO direkt am Formular, Speicherdauer nach Absage (Frist für AGG-Ansprüche: zwei Monate, § 15 Abs. 4 AGG; übliche Löschfrist etwa sechs Monate) und Talent-Pool nur mit eigener Einwilligung; WhatsApp-Weg mit Hinweis auf die Datenübermittlung. Text vom Kunden; Claude schreibt keine Rechtstexte.
  • Echte Einblicke: Fotos, Namen, Stimmen und Videos nur von echten Mitarbeitenden mit schriftlicher, widerrufbarer Einwilligung; wer geht oder widerruft, verschwindet von der Seite. Keine Stockfotos, keine KI-Bilder von Menschen; wo KI-Bilder doch vorkommen, gekennzeichnet (Art. 50 KI-VO). Die Collage (collage-scrapbook) ist statisch, Teile sind nicht ziehbar, der Inhalt steht zusätzlich als Bildbeschreibung im Text.
  • Benefits konkret: jede Leistung mit Zahl und Bedingung („30 Tage Urlaub“, „Jobrad, wir zahlen 30 € im Monat dazu“, „1.000 € Weiterbildungsbudget im Jahr“); keine Floskeln wie „Obstkorb“, „flache Hierarchien“, „familiäres Umfeld“ ohne Beleg. Auch sagen, was es nicht gibt (Wochenenddienst, Rufbereitschaft, Schicht).
  • Ein Tag als … (horizontal-scroll-section): vier bis acht Stationen mit Uhrzeit und echtem Foto; auf dem Telefon und bei reduzierter Bewegung kein Pin, sondern eine Wischleiste mit Pfeilknöpfen bzw. eine senkrechte Liste. Keine Kerninformation nur in der Zeitleiste (Gehalt, Stunden, Ort stehen in der Stelle).
  • Ausbildung: Vergütung je Ausbildungsjahr in Euro, mindestens nach § 17 BBiG bzw. Tarif, Dauer und Zahl der Jahre stimmen überein (Achberg listet vier Jahre bei 3,5 Jahren Dauer), Übernahme nur versprechen, wenn sie gilt. Für Minderjährige eine kurze Info für Eltern.
  • Stellenseiten für Google: JobPosting-Daten nur auf der Seite einer einzelnen Stelle, passend zum sichtbaren Text, mit datePosted, Ort und, wo vorhanden, baseSalary und validThrough; abgelaufene Stellen sofort entfernen oder als beendet kennzeichnen (Google erlaubt keine abgelaufenen Stellen). Nicht auf der Übersicht.
  • Arbeitgeberbewertungen (kununu, Google): wenn gezeigt, mit Quelle, Schnitt, Anzahl, Stand und dem Hinweis, ob und wie geprüft wird; lieber verlinken als einbetten.
  • Bewegung nach token-federnd-verspielt mit UI-Stil token-toggle-asymmetrisch: Fotos und Zettel der Collage landen einmal mit kleinem Überschwinger (500 ms), der Haken nach dem Absenden federt (400 ms); Menü, Akkordeon und Formularschritte öffnen 280 ms und schließen 190 ms ohne Federn. Der Bewerben-Knopf (fuellung-vom-eintrittspunkt) füllt sich vom Eintrittspunkt, auf Touch nur Druck und Farbe; Links zu Stellen als pfeil-icon-button, Variante linie.
  • Barrierefreiheit: Bewerbung ohne Upload möglich (Telefon, WhatsApp, Formular), Fehlerliste bei der Kurzbewerbung, 200 % Zoom und Kontrastmodus geprüft. Ein Hinweis, dass Bewerbungen schwerbehinderter Menschen willkommen sind, nur ehrlich und mit Ansprechperson. Pflichtangaben (Impressum, Datenschutz) wie auf jeder Seite; Claude schreibt keine Rechtstexte.
Bild und Ton
  • Licht: Echtes Licht im Betrieb, Handyfotos reichen, ungefiltert.
  • Ausschnitt: Werkbank, Tourauto, Küche, Pausenraum, Menschen bei der Arbeit.
  • Personen: Ja: nur echte Mitarbeitende mit schriftlicher, widerrufbarer Einwilligung.
  • Formate: 3:4, 4:5, 1:1
  • Nicht: Keine Stockfotos, keine KI-Bilder von Menschen, kein Imagefilm im Hero, keine Daumen-hoch-Teamfotos.
  • Anrede: du
  • Sätze: Kurz und konkret: Beruf, Ort, Gehalt, Stunden. Benefits mit Zahl und Bedingung.
  • Haltung: Ehrlich und nahbar; sagt auch, was es nicht gibt. Bei Stellen für Führungskräfte oder in sehr förmlichen Betrieben Sie, dann durchgehend.
  • Tonproben: Elektroniker:in gesucht. 38 Stunden, freitags um 13 Uhr Schluss., Bewirb dich in zwei Minuten, ohne Anschreiben.
  • Nicht schreiben: „junges, dynamisches Team“, „flache Hierarchien“, „familiäres Umfeld“, „Obstkorb“, Merkmale aus § 1 AGG.
Hero, Raum und Form
  • Hero-Raster: 12 Spalten: H1 über Spalte 1 bis 6, Collage über 6 bis 12 auf verdecktem Raster (collage-scrapbook); mobil drei bis vier Fotos im Hochformat unter der H1.
  • Hero-Bild: Fünf bis sieben echte Fotos, 3:4 und 4:5, leicht gedreht, dazu ein Zettel mit einem echten Satz aus dem Team.
  • Überschrift: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem), Funnel Display 700, links.
  • Handlung: „In zwei Minuten bewerben“ (Klatschmohn gefüllt) und „Offene Stellen“ (Textlink mit Pfeil).
  • Zusatz: Ansprechperson mit Foto, Telefon und WhatsApp unter den Knöpfen; mobil untere Leiste Bewerben / Anrufen / WhatsApp.
  • Sektionsabstand: clamp(64px, 8vw, 120px)
  • Dichte: mittel
  • Raum: Mobil zuerst: Stellenkarten mit 16 px Innenabstand und Gehalt oben, Kurzbewerbung mit 20 px zwischen Feldern. Die Collage darf eng überlappen.
  • Spalten: 12
  • Maximale Breite: 1360px
  • Raster: Hero 6/6 (H1 links, Collage rechts auf verdecktem 12er-Raster). Stellen als Liste, Tageszeitleiste waagerecht (horizontal-scroll-section), mobil Wischleiste.
  • Radius klein: 6px
  • Radius groß: 2px
  • Schatten: nur Fotos und Zettel der Collage liegen mit kurzem, weichem Schatten wie Papier auf dem Tisch
  • Form: Fotos fast eckig wie Abzüge, leicht gedreht (Demo collage-scrapbook: 1,5 bis 4°); Knöpfe 6 px. Links zu Stellen als Textlink mit Pfeil (pfeil-icon-button, Variante linie).
Vorbilder