Zum Inhalt
← Rezepte
Alle Rezepte

Industrie-Mittelstand: Datenblatt und Fachperson

Maschinen- und Anlagenbau / Zulieferer und Lohnfertiger / Hidden Champions / technische Dienstleister (B2B)

Eine Seite, die sich liest wie ein gutes Datenblatt: Jede Angabe hat Einheit, Stand und Quelle, jede Anwendung hat eine Fachperson mit Namen und Durchwahl. Das sichtbare Konstruktionsraster ist die Signatur, die Beschriftung folgt der Normschrift technischer Zeichnungen statt einer Mono. Breite, ruhige Headlines in Strichpunkt Sans, Archivo mit Breitenachse für Text und Tabellen, kühles Blechgrau und Verkehrsblau nur für die Anfrage. Bewegt wird wie an einer Linearachse: nur waagerecht oder senkrecht, harte Masken, nichts glänzt. Anders als saas: keine Dashboards, kein Dunkelmodus, kein Glow, keine Mono-Labels.

Bauplan tokens.css Alle Techniken

Schrift

Datenblatt und Fachperson

Eine Seite, die sich liest wie ein gutes Datenblatt: Jede Angabe hat Einheit, Stand und Quelle, jede Anwendung hat eine Fachperson mit Namen und Durchwahl.

Headline
Strichpunkt Sans
Text
Archivo

Farbe

  • #F3F3F0
  • #111417
  • #4E555B
  • #E4E5E1
  • #16202A
  • #0E518D

Bewegung

cubic-bezier(0.25, 1, 0.5, 1)
Dauer
200 (Hover, Filter-Indikator, Reiter), 350 (Mega-Menü, Akkordeon, Listenzeilen nach Filterwechsel), 500 (Bild-Maske bei Referenzen, Schritt der Anfrage), 700 (H1 im Hero, einmal); Austritt 70 % davon, Versatz 40 ms

Aufbau der Seite

SignaturSichtbares Raster (Swiss/Blueprint-Linien)

HeroSichtbares Raster (Swiss/Blueprint-Linien)oderBildsequenz-/Video-Scrub

  1. Ihre Anwendung, Ihre Fachperson (Branche und Land wählen → zuständige Vertriebs- oder Anwendungsingenieur:in mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail, Sprachen; darunter „Projekt anfragen“ in Schritten: Anwendung → Teil, Werkstoff, Stückzahl oder Takt → Land und Zeitraum → Kontakt und Datei-Upload für Zeichnung; Antwortzeit nennen)Team-/Über-mich-Layout mit Porträt-Interaktion · RasterMehrschritt-Anfrage mit Zusammenfassung · SenkrechtFehlerzusammenfassung im Formular · ListeValidierung erst nach Interaktion
  2. Anwendungen und Branchen (typografische Liste mit Bild bei Hover, mobil Daumenbild fest in der Zeile; je Branche eine Unterseite, Antwort zuerst: Aufgabe, passende Produktfamilie, eine Referenz, zuständige Person)Bildvorschau beim Listen-HoverLeistungsseite: Antwort zuerst · Handwerk
  3. Produkte mit technischen Daten (Familie → Baureihe → Variante; Kenndaten als Tabelle mit Einheit und Normbezug, Varianten nebeneinander, Datenblatt als PDF je Sprache, CAD nach Klick, „Diese Variante anfragen“ mit vorausgefüllter Artikelnummer; Produktfinder mit Facetten erst ab etwa zehn Varianten)Klebende Produkt-Unternavigation mit Handlung · AbschnitteProduktseite mit technischen DatenFacettenfilter mit Ergebnisliste · SeitenleisteBild mit Markierungspunkten · Bauteile
  4. Downloads (Datenblätter, Betriebsanleitungen, CAD-Daten, Konformitätserklärungen, Zertifikate; filterbar nach Produkt, Dokumentart, Sprache; je Datei Version, Stand, Format, Größe und eine dauerhafte Adresse)Download-Center für technische DokumenteReparatur-Richtpreise und Reparaturweg · Hersteller
  5. Referenzen und Fallstudien (Aufgabe, Lösung, Ergebnis in Messwerten mit Einheit, Branche, Land, Jahr; Kundenname und Logo nur mit schriftlicher Freigabe, sonst anonymisiert; auf der Startseite drei bis fünf als Reihe)Case-Study-Gerüst auf Award-NiveauNatives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Kartenreihe
  6. So läuft ein Projekt (Anfrage → Machbarkeit und Versuch mit Kundenteilen → Angebot → Konstruktion → Abnahme im Werk → Inbetriebnahme vor Ort → Service; Dauer je Schritt als ehrliche Spanne)Prozess-/Timeline-Sektion mit wachsender Linie
  7. Unternehmen, Qualität und Zertifikate (wenige Kennzahlen mit Stand und Quelle als ruhige Tabelle; Zertifikate mit Norm, Nummer, Geltungsbereich, Zertifizierer, gültig bis und PDF)Zahlen-/Fakten-Sektion als Typo-Ereignis · Ruhige TabelleLogo-Wand / Social-Proof-Band · Ruhiges Raster
  8. Messen und Termine (Tabelle mit Datum, Messe, Stadt und Land, Halle und Stand, Ticket-Code, Termin am Stand vereinbaren, .ics je Messe; Vergangenes fällt heraus; bei zwei oder drei Messen im Jahr eine einfache Liste)Programm-Kalender mit Liste und Monat · Liste und Monat
  9. Standorte weltweit (Werke, Tochtergesellschaften, Vertretungen als Liste mit Land, Rolle, Sprachen, Ansprechperson, Ortszeit als Text; Entfernung erst nach PLZ oder Standortfreigabe, Karte erst nach zweitem Klick)Standortfinder als Liste · Liste
  10. Karriere (Einstiege Ausbildung, Studium, Berufserfahrene; Stellen mit Gehaltsspanne oder Tarifgruppe, Ort, Schicht; Kurzbewerbung; ab vier Stellen Filter; bei eigener Karriere-Microsite Rezept arbeitgeber-karriere)Stellenliste mit Kurzbewerbung · Viele Stellen
  11. Kontakt, Service-Hotline und Anfahrt (Zentrale und Service getrennt, Erreichbarkeit mit Zeitzone; kurzes Formular für allgemeine Fragen; Adresse als Text; Werkszufahrt als eigene Skizze mit Besuchereingang und LKW-Tor)Kontakt- und Anfrageformular als eigene SektionÖffnungszeiten mit Live-Status · TerminKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · LageskizzeFirmendaten aus einer Quelle · Kfz-Werkstatt

OptionalTrennlinien im Raster (Gap Decorations)Agentenformular mit WebMCP

Nicht verwenden

Regeln
  • Erster Bildschirm: echtes Foto der Maschine im Einsatz, H1 mit Produkt und Anwendung, eine belegte Kennzahl mit Stand, „Projekt anfragen“ und „Produkte und Datenblätter“. Sprache und Land oben rechts als Text, keine Flaggen.
  • Datenblatt-Regel: Jede technische Angabe hat Wert, Einheit und, wo es sie gibt, Norm oder Prüfbedingung („Saugkraft 550 N bei -250 mbar“). Einheiten immer an derselben Stelle (eigene Spalte), Dezimaltrenner je Sprache einheitlich (Schmalz mischt Komma und Punkt), Tabellenziffern. Leere Felder und leere Überschriften fallen weg.
  • Fachperson statt Formular-Sackgasse: Jede Branche oder Region hat eine Person mit Foto, Name, Zuständigkeit, Durchwahl, E-Mail und Sprachen. Die Anfrage nennt, wann geantwortet wird, und nimmt Zeichnungen an (STEP, DXF, PDF, mit Größengrenze); Hinweis, dass Daten vertraulich behandelt werden und eine Geheimhaltungsvereinbarung auf Wunsch vorab möglich ist (Text vom Kunden).
  • Konstruktionsraster konsequent: 12 Spalten ab 821 px, 8 bis 820 px, 4 darunter; Linien als Zellkanten (blueprint-raster-sichtbar), Plus-Marker nur an Schnittpunkten, Achsbeschriftung und Abschnittscodes in Archivo schmal. Jedes Element sitzt auf einer Linie; was nicht passt, wird umgebaut, nicht verschoben. Ein Material-Effekt pro Ansicht: das Raster.
  • Mehrsprachigkeit: Sprache und Land getrennt (Schmalz), hreflang je Fassung, keine automatische Umleitung nach IP ohne Rückweg; Maße auf englischen Seiten für Nordamerika zusätzlich in Zoll, wenn der Kunde das liefert (Herrenknecht: „0,8–1,5m (30–60")“). Jede Sprachfassung erreicht Impressum und Datenschutz.
  • Produkte: Familie → Baureihe → Variante; die Varianten einer Baureihe stehen als Tabelle nebeneinander, die Artikelnummer ist mit einem Klick kopierbar (kopieren-feedback). Preise nur, wenn der Kunde sie nennen will; „Preis auf Anfrage“ ist erlaubt, ein toter Warenkorb nicht.
  • Downloads: dauerhafte Adressen, die sich bei neuen Versionen nicht ändern (alte Version bleibt erreichbar und ist als ersetzt markiert), Version, Stand, Sprache, Format und Größe an jeder Datei. CAD-Viewer und Konfiguratoren von Dritten erst nach Klick bzw. Einwilligung.
  • Referenzen zeigen Aufgabe, Lösung und Ergebnis in Messwerten (Herrenknecht: Strecke und Bauzeit). Kundenname, Logo und Fotos aus Kundenwerken nur mit schriftlicher Freigabe; sonst „Tier-1-Zulieferer, Süddeutschland“.
  • Zertifikate nur gültig und vollständig: Norm mit Ausgabejahr (ISO 9001:2015), Zertifikatsnummer, Geltungsbereich, Standort, Zertifizierer, gültig bis, PDF. Abgelaufene Zertifikate sofort entfernen; ein Logo ohne Nachweis ist Irreführung (§ 5 UWG) – vom Kunden prüfen lassen.
  • Messen als Tabelle mit Halle und Stand bei jedem Eintrag (bei ifm fehlen sie, bei Festo nur einmal), Ticket-Code, „Termin am Stand vereinbaren“ und .ics; vergangene Messen fallen automatisch heraus.
  • Bewegung nach token-swiss-knackig: nur waagerecht oder senkrecht, Masken statt Fade, 200 bis 700 ms, Austritt 70 %. Tabellen, Filterergebnisse und Formulare stehen sofort, Filterwechsel ohne Animation der Werte.
  • Pflichtangaben und Recht (Leitfaden 8a): Impressum nach § 5 DDG mit Rechtsform, Vertretungsberechtigten, Registergericht und -nummer, USt-IdNr., in jeder Sprachfassung erreichbar. Richtet sich ein Shop oder eine Preisliste nur an Unternehmen, das klar sagen und technisch durchhalten; sonst gilt die Preisangabenverordnung mit Endpreisen. Umweltaussagen („CO₂-neutral“, „nachhaltig produziert“) nur mit Nachweis. Betriebsanleitungen, die digital bereitgestellt werden: nach der Maschinenverordnung (EU) 2023/1230 ab 20.01.2027 herunterladbar und druckbar, mindestens zehn Jahre online bzw. für die Lebensdauer der Maschine, Papier auf Wunsch beim Kauf. Gibt es ein Hinweisgebersystem (HinSchG), den Zugang im Footer verlinken. Alles vom Kunden prüfen lassen; Claude schreibt keine Rechtstexte.
  • Barrierefreiheit: Das BFSG zielt auf Leistungen für Verbraucher; reine B2B-Seiten sind meist nicht erfasst (vom Kunden prüfen lassen). Gebaut wird trotzdem nach WCAG 2.2 AA; Tabellen mit echten Kopfzellen, Linien des Rasters nie als einzige Trennung von Bedeutung.
  • Karriere: Stellen mit Gehaltsspanne oder Tarifgruppe, geschlechtsneutral (AGG), Kurzbewerbung ohne Anschreiben; die Regeln stehen im Rezept arbeitgeber-karriere.
Bild und Ton
  • Licht: Hallenlicht oder Licht beim Kunden, technisch scharf.
  • Ausschnitt: Maschine im Einsatz, Mensch als Maßstab, Detail der Funktion.
  • Personen: Ja: Fachpersonen mit Namen; Kundenwerke nur mit schriftlicher Freigabe.
  • Formate: 3:2, 16:9, 4:3
  • Nicht: Keine Renderings im Hero (außer das Produkt ist noch nicht gebaut), keine Stock-Ingenieur:innen mit Tablet, kein Globus, kein Glanz.
  • Anrede: Sie
  • Sätze: Wie ein Datenblatt: Wert, Einheit, Bedingung. Verben sachlich, keine Adjektivketten.
  • Haltung: Belastbar und präzise; jede Anwendung hat eine Person mit Durchwahl.
  • Tonproben: Spannsysteme für Fräszentren, gefertigt in [Ort]., Ihre Ansprechperson für Holz: [Name], Durchwahl [Nummer].
  • Nicht schreiben: „Hidden Champion“ als Selbstlob, „innovativ“, „Lösungen“ ohne Gegenstand, „weltweit führend“ ohne Beleg.
Hero, Raum und Form
  • Hero-Raster: Sichtbares 12-Spalten-Raster mit Achsbeschriftung 1–12 im Steg: Text über Spalte 1 bis 6, Foto über 7 bis 12, beide auf Linien.
  • Hero-Bild: Echtes Foto der eigenen Maschine im Einsatz, 3:2. bildsequenz-video-scrub nur als hero_variante mit 60 bis 120 CAD-Bildern, mobil Standbild.
  • Überschrift: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem), Strichpunkt Sans 600 wdth 116, links oben auf einer Rasterlinie.
  • Handlung: „Projekt anfragen“ (Verkehrsblau gefüllt) und „Produkte und Datenblätter“ (Kontur mit Eckklammern), nebeneinander.
  • Zusatz: Belegte Kennzahl mit Stand; Sprache und Land oben rechts als Text; Abschnittscode „01 · …“ in Archivo schmal.
  • Sektionsabstand: clamp(64px, 8vw, 128px)
  • Dichte: dicht
  • Raum: Datenblatt-Dichte: Tabellenzeilen 8 bis 12 px, Zellen mit 16 bis 24 px Innenabstand. Jedes Element sitzt auf einer Rasterlinie.
  • Spalten: 12
  • Maximale Breite: 1440px
  • Raster: 12 Spalten ab 821 px, 8 bis 820 px, 4 darunter (Regel). Sichtbares Raster mit Plus-Markern nur an Schnittpunkten und Achsbeschriftung im Steg (blueprint-raster-sichtbar). Spaltenabstand 0, Linien sind die Zellkanten; Innenabstand der Zelle clamp(16px, 2vw, 24px).
  • Radius klein: 0
  • Radius groß: 0
  • Schatten: keiner
  • Form: Keine Rundung, kein Glanz. Nebenweg als Kontur mit Eckklammern (kontur-button-zeichnen, Variante ecken), Verkehrsblau flach.
Vorbilder