Zum Inhalt
← Rezepte
Alle Rezepte

IT-Systemhaus: erreichbar und verlässlich

IT-Dienstleister / Systemhaus / IT-Betreuung für kleine und mittlere Unternehmen, Praxen und Kanzleien (Managed Services, Netzwerk, Telefonie, Sicherheit)

Ein Systemhaus verkauft kein Produkt, sondern Erreichbarkeit und Verantwortung: Wen rufe ich an, wenn nichts mehr geht, wie schnell ist jemand dran, was kostet das je Arbeitsplatz. Ganz oben stehen Hotline mit Zeiten, Fernwartung und der aktuelle Status, darunter Pakete mit Reaktionszeit je Priorität, die feste Ansprechperson und Referenzen aus der Region. Host Grotesk für alles, Martian Mono für Ticketnummern, Zeiten und Reaktionszeiten. Helles Grau, Grafit, ein Kobaltblau für Anfragen; Statusfarben nur zusammen mit Wörtern. Signatur: ein feines Punktraster, auf dem Statuszeile und Pakete wie auf einer Platine sitzen. Abgrenzung zu saas-produkt-praezise (Produkt-UI, Preise pro Plan) und industrie-b2b-mittelstand (Produkte mit technischen Daten).

Bauplan tokens.css Alle Techniken

Schrift

Erreichbar und verlässlich

Ein Systemhaus verkauft kein Produkt, sondern Erreichbarkeit und Verantwortung: Wen rufe ich an, wenn nichts mehr geht, wie schnell ist jemand dran, was kostet das je Arbeitsplatz.

IT-Dienstleister

Headline
Host Grotesk
Text
Host Grotesk
Akzent
Martian Mono

Farbe

  • #F1F2F3
  • #16191D
  • #E1E4E8
  • #1B1F24
  • #2946B0
  • #565C64
  • #1E6E43
  • #7F5400
  • #CDD1D6

Bewegung

cubic-bezier(0.2, 0, 0.38, 0.9)
Dauer
70 (Hover), 110 (Kopieren-Bestätigung), 240 (Akkordeon, Panels), 160 (schließen), 400 (Einblendung einer Statusmeldung)

Aufbau der Seite

SignaturLinien- und Punktraster

Hero–

  1. Hilfe jetzt (Hotline mit Zeiten und Rufbereitschaft, Ticket per Mail oder Portal mit Kopier-Knopf, Fernwartungs-Programm mit Hinweis, dass eine Sitzung nur mit Ihrer Zustimmung startet; aktuelle Störung als Leiste, nur wenn es eine gibt)Öffnungszeiten mit Live-Status · HinweisleisteKopieren-FeedbackLinien- und PunktrasterAnruf-Knopf mit Erreichbarkeit · Knopf
  2. Status und Störungen (ein Satz, ob alles läuft; laufende Störung mit Beginn, letztem Update und Zeitleiste; betreute Dienste mit 90-Tage-Verlauf; geplante Wartung; E-Mail-Abo; nur mit echter Quelle, nie von Hand geschönt)Status- und Störungsseite · Systemhaus
  3. Ihre Ansprechperson (feste Technikerin oder fester Techniker mit Foto, Name, Zertifizierungen mit Nachweis, Durchwahl; Vertretung genannt)Team-/Über-mich-Layout mit Porträt-Interaktion · Raster
  4. Pakete mit Reaktionszeit (Arbeitsplatz-Betreuung, Server und Netzwerk, Backup, Microsoft 365, Telefonie, IT-Sicherheit; Preis je Arbeitsplatz und Monat, Reaktionszeit je Priorität als Tabelle in Mono; was nicht enthalten ist)Vergleichstabelle mit fester Kopfzeile · PaketvergleichTabelle schmal und robust · Feste erste Spalte
  5. Leistungen (je Leistung eine Unterseite, Antwort zuerst: was übernommen wird, für wie viele Arbeitsplätze, ab-Preis, was der Kunde selbst tun muss)Akkordeon mit Höhenanimation auf auto · LeistungslisteLeistungsseite: Antwort zuerst · HandwerkAnsprechperson-Band · Handwerk
  6. So wechseln Sie zu uns (Bestandsaufnahme vor Ort → Angebot → Übernahme mit Dokumentation und Zugangsdaten-Übergabe → Betreuung mit festen Terminen)Prozess-/Timeline-Sektion mit wachsender Linie
  7. Referenzen aus der Region (Branche, Arbeitsplätze, seit wann betreut, was gelöst wurde; Firmenname und Logo nur mit Erlaubnis)Testimonials neu gedacht · ReiheLogo-Wand / Social-Proof-Band · Ruhiges Raster
  8. Sicherheit und Datenschutz (Auftragsverarbeitung, Fernwartung nur mit Freigabe je Sitzung, Standort der Daten, Zertifizierungen mit Nummer; keine Sicherheitsversprechen)Akkordeon mit Höhenanimation auf auto · FAQFAQ-Seite mit Suche · Mit SucheText-Hervorhebung mit ::highlight() · Suchtreffer
  9. Downloads (Fernwartung, Anleitungen, Vorlage zur Auftragsverarbeitung; Liste ab etwa zehn Dokumenten, sonst in der FAQ)Download-Center für technische Dokumente · Bibliothek
  10. Karriere (Fachinformatiker:in Systemintegration, Ausbildung, Werkstudierende; Gehaltsspanne, Rufbereitschaft mit Pauschale)Stellenliste mit Kurzbewerbung · Wenige StellenStellenseite mit Gehalt, Ablauf und JobPosting-Daten · Ausbildung
  11. Kontakt und Servicegebiet (Erstgespräch mit wenigen Feldern: Firma, Arbeitsplätze, Anliegen, Rückruf; Büro mit Adresse als Text, Servicegebiet als Orte, Karte per 2-Klick)Kontakt- und Anfrageformular als eigene Sektion · Anfrage-SektionKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · KartenbildFirmendaten aus einer Quelle · Kfz-Werkstatt
  12. Erklärung zur Barrierefreiheit (freiwillig als Aufbau; reine B2B-Angebote fallen meist nicht unter das BFSG, vom Kunden prüfen lassen)Seite „Barrierefreiheit“ als Vorlage · Erklärung

OptionalAgentenformular mit WebMCP

Nicht verwenden

Regeln
  • Erster Bildschirm: Hotline mit Nummer und heutigen Zeiten, Fernwartung starten, Status als Wort mit Zeitstempel, ein Satz zu Zielgruppe und Region, zwei Wege. Ansprechperson direkt darunter.
  • Signatur (linien-punkt-raster): ein feines Punktraster (20 px, Punkt 1 px, 26 % Deckkraft) nur hinter Hero, Statuszeile und Paket-Tabelle; Inhalte richten sich an den Punkten aus. Nie hinter Fließtext, nie mit Glow, im Kontrastmodus aus.
  • Reaktionszeiten nur, wenn sie vertraglich zugesagt sind: Tabelle je Priorität mit Definition, was Priorität 1 ist. Erreichbarkeit mit echten Zeiten; Rufbereitschaft nur mit Preis.
  • Preise: für Gewerbe netto und als netto gekennzeichnet, mit Laufzeit und Kündigungsfrist; Einrichtung und Vor-Ort-Stunden getrennt.
  • Status: aus einer echten Quelle (Monitoring oder von Hand gepflegt) mit Zeitstempel; Farbe immer mit Wort („Läuft“, „Eingeschränkt“, „Störung“) und Symbol.
  • Fernwartung: Download vom Hersteller oder mit Prüfsumme, Hinweis auf Freigabe je Sitzung und Protokoll; Lizenz des Fernwartungs-Programms vom Kunden prüfen lassen.
  • Datenschutz und Recht: Auftragsverarbeitung nach Art. 28 DSGVO als Thema mit Vorlage, keine Garantie für Sicherheit oder Rechtskonformität der Kunden; Pflichten der Kunden aus der NIS2-Umsetzung nur als Hinweis mit Quelle; Partner-Logos von Herstellern nur nach deren Regeln; KI-Chat beim Start kennzeichnen (Art. 50 KI-VO). Vom Kunden prüfen lassen.
  • Typografie: Martian Mono für jede Nummer, Zeit und Version; Host Grotesk in zwei Gewichten.
  • Knöpfe: Kobalt gefüllt mit allen Zuständen (button-zustaende); Nebenwege und Downloads als Kontur, deren Striche nur bei Hover laufen (kontur-button-zeichnen, Variante laufend). Kopieren mit Rückmeldung (kopieren-feedback).
  • agentenformular-webmcp nur als Zusatz (Priorität F): Das Erstgespräch funktioniert vollständig als normales Formular.
Bild und Ton
  • Licht: Natürliches Büro-Licht, keine blauen Neonfarben.
  • Ausschnitt: Team beim Kunden, Hände am Gerät, Werkbank im Büro; keine Rechenzentren.
  • Personen: Ja: eigenes Team mit Einwilligung; Kundenbüros nur mit Erlaubnis und ohne lesbare Bildschirme.
  • Formate: 3:2, 1:1
  • Nicht: Keine Serverraum- und Kabel-Stockfotos, keine Kapuzen-Hacker, keine Schlösser und Schilde.
  • Anrede: Sie
  • Sätze: Kurz, konkret, ohne Fachchinesisch: wer, wie schnell, was es kostet.
  • Haltung: Ruhig und verbindlich wie ein guter Support-Anruf.
  • Tonproben: Priorität 1: Wir sind innerhalb von 4 Stunden dran., Ihr fester Ansprechpartner ist [Name], Durchwahl [Nummer].
  • Nicht schreiben: „Digitalisierungspartner“, „ganzheitliche Lösungen“, „100 % sicher“, Anglizismen-Ketten.
Hero, Raum und Form
  • Hero-Raster: Oben eine volle Zeile auf Grafit (Hotline, Zeiten, Fernwartung); darunter 12 Spalten auf dem Punktraster: Satz und Status über 1 bis 7, Ansprechperson über 8 bis 12.
  • Hero-Bild: Kein Hero-Bild; Porträt der Ansprechperson 1:1 rechts.
  • Überschrift: clamp(2.25rem, 1.4rem + 3.4vw, 4rem), Host Grotesk 700; kein Label darüber.
  • Handlung: „Erstgespräch anfragen“ (Kobalt gefüllt) und „Pakete und Preise“ (Kontur); in der Grafit-Zeile „Fernwartung starten“.
  • Zusatz: Status der betreuten Dienste als Wort mit Zeitstempel in Martian Mono.
  • Sektionsabstand: clamp(60px, 8vw, 120px)
  • Dichte: mittel
  • Raum: Abstände in Vielfachen des 20-px-Punktrasters, wo das Raster sichtbar ist; Tabellen dicht.
  • Spalten: 12
  • Maximale Breite: 1280px
  • Raster: Spalt gleich dem Punktraster (20 px). Hero 7/5 (Satz und Status links, Ansprechperson rechts). Pakete als Tabelle über 12 Spalten, mobil gestapelt mit fester erster Zeile.
  • Radius klein: 4px
  • Radius groß: 8px
  • Schatten: keiner
  • Form: Klare Kästen wie Module auf einer Platine; Statusfelder mit 1 px Rand in der Statusfarbe plus Wort.
Vorbilder