Bauunternehmen: Projekt, Bauschild, Mannschaft
Bauunternehmen / Hoch- und Tiefbau / Generalunternehmer / Schlüsselfertigbau / Sanierung (optional Bauträger mit Verkauf)
Ein Bauunternehmen zeigt, was es baut und wer es baut: Projekte im Bau und fertig, mit den Daten vom Bauschild, Leistungsfähigkeit mit echten Zahlen und vor allem Stellen, denn Personal ist der Engpass. Der Hero ist ein Baustellenfoto mit Bauschild-Daten als Bildunterschrift. Auf jeder Projektseite erklärt eine Aufnahme mit nummerierten Punkten die Bauabschnitte und Gewerke. Big Shoulders kondensiert für Überschriften wie auf einem Bauzaunbanner, Google Sans Flex für Text, Geist Mono für Bauschild-Daten. Beton, Sand und ein Signalorange nur für Anfragen und Bewerben. Abgrenzung zu architektur-ruhiges-raster (Entwurf), handwerk-werkstatt-klartext (Gewerk und Privatkunde) und immobilien-diskret-hochwertig (Verkauf).
Schrift
Projekt, Bauschild, Mannschaft
Ein Bauunternehmen zeigt, was es baut und wer es baut: Projekte im Bau und fertig, mit den Daten vom Bauschild, Leistungsfähigkeit mit echten Zahlen und vor allem Stellen, denn Personal ist der …
Bauunternehmen
- Headline
- Big Shoulders
- Text
- Google Sans Flex
- Akzent
- Geist Mono
Farbe
- #EDECE8
- #1A1A18
- #DCD4C3
- #262624
- #B43C0A
- #5B5952
- #CFCBC0
Bewegung
- Dauer
- 200 (Hover, Farbe), 350 (Akkordeon, Filter, Hotspot-Karte), 230 (schließen), 500 (Masken-Reveal eines Projektbilds), 700 (Baufortschritt-Linie)
Aufbau der Seite
SignaturBild mit Markierungspunkten
HeroFoto-Hero: echtes Foto, ein Satz, ein Weg · Bildunterschrift als
- Projekte im Bau und fertig (je Projekt Bauschild-Daten: Art, Ort, BGF oder Volumen, Bauzeit, Fertigstellung, Leistung; Bauherr nur mit Erlaubnis; Filter nach Art und Region erst ab etwa 12 Projekten)Facettenfilter mit Ergebnisliste · FilterleisteNatives CSS-Karussell (Scroll-Snap, Scroll-Buttons, Scroll-Marker) · Variable BreitenKarussell-Steuerung und Anzeige · ZählerGanze Karte klickbar · Raster
- Projektseite (Bildfolge, Bauschild-Daten als Kenndaten, Baufortschritt als Etappen mit Datum, beteiligte Gewerke; eine Baustellenaufnahme mit höchstens sechs nummerierten Bauabschnitten, Liste darunter als Hauptweg; Visualisierungen als solche beschriftet)Bild mit Markierungspunkten · BauteileProzess-/Timeline-Sektion mit wachsender Linie · BaufortschrittRaster-zu-Vollbild mit geteiltem Element (Lightbox 2026) · Projektraster zu
- Leistungen (Hochbau, Tiefbau, Schlüsselfertigbau, Sanierung und Umbau, Ingenieurbau; je Leistung eine Unterseite, Antwort zuerst: Projektgröße, Region, typische Bauzeit, eine Referenz)Akkordeon mit Höhenanimation auf auto · LeistungslisteLeistungsseite: Antwort zuerst · HandwerkAnsprechperson-Band · Handwerk
- Leistungsfähigkeit (Mitarbeitende, Kolonnen, Geräte, Eigenleistungsanteil, Präqualifikation mit Nummer, Zertifikate mit Gültigkeit; nur echte Zahlen mit Stand)Zahlen-/Fakten-Sektion als Typo-Ereignis · Ruhige TabelleLogo-Wand / Social-Proof-Band · Siegel mit Nachweis
- Karriere als zweite Startseite (Maurer:in, Beton- und Stahlbetonbauer:in, Polier:in, Bauleiter:in, Azubis und duales Studium; Lohn nach Tarif mit Stand, Baustellen der Region, Fahrzeug, Auslöse bei Montage; Kurzbewerbung mit Anruf und WhatsApp; Menschen von echten Baustellen)Stellenliste mit Kurzbewerbung · Viele StellenStellenseite mit Gehalt, Ablauf und JobPosting-Daten · HandwerkTeam-/Über-mich-Layout mit Porträt-Interaktion · Statement-Satz
- Für Bauherren: Ihre Ansprechperson (Projektleitung mit Foto und Durchwahl; Anfrage mit Vorhaben, Grundstück oder Bestand, Zeitraum, Plänen als Upload)Kontakt- und Anfrageformular als eigene Sektion · Anfrage-SektionDatei-Ablage mit Vorschau und Prüfung · Lebenslauf als PDF
- Wohnungen und Häuser vom Bauträger (nur bei eigenem Verkauf: Exposé mit Kaufpreis, Fertigstellung, Pflichtangaben zum Energieausweis; Visualisierungen beschriftet)Objekt-Steckbrief im Exposé · Kauf
- Aktuelles und Baustelleninfo für Anwohnende (Sperrungen, Arbeitszeiten, Ansprechperson vor Ort; Meldungen mit Datum)Editorial-/Magazin-Layout · ZeitungNews-Übersicht mit Kategorien und Jahr-Archiv · Weitere laden
- Artikel-Detailseite (je Beitrag eine Seite: Meldung zu Baustart, Richtfest, Sperrung oder Übergabe mit Datum, Ort und Ansprechperson vor Ort; mit Datum, Autorin oder Autor und Stand)Artikelseite mit Autorin, Stand und Strukturdaten · Meldung
- Niederlassungen und Bauhof (Adresse als Text, Zeiten, Einzugsgebiet; Liste ab zwei Standorten; Karte per 2-Klick)Standortfinder als Liste · Nur ListeKarte per 2-Klick (Anfahrt ohne vorab geladene Karte) · StandorteFirmendaten aus einer Quelle · Kfz-Werkstatt
- Erklärung zur Barrierefreiheit (freiwillig als Aufbau; beim Online-Verkauf an Verbraucher nach BFSG prüfen lassen)Seite „Barrierefreiheit“ als Vorlage · Erklärung
Nicht verwenden
- Sichtbares Raster (Swiss/Blueprint-Linien) Signatur von industrie-b2b-mittelstand
- Vorher-Nachher-Vergleichsregler Signatur von handwerk-werkstatt-klartext; der Baufortschritt erzählt in Etappen
- Richtungsbewusste Übergänge (vorwärts, zurück, hierarchisch) Signatur von immobilien-diskret-hochwertig
- Interaktives 3D-Objekt im HeroScroll-gesteuerte 3D-Szene / 3D-Modell (Kamerafahrt) BIM-Modelle als Hero sind teuer und zeigen keine echte Baustelle
- Rollende Ziffern (Zahlen-Ticker / Odometer) Mitarbeiterzahlen und Kubikmeter werden nicht hochgezählt
- Marquee-Laufband (optional scroll-gekoppelt) Bauherren-Logos als Laufband ohne Erlaubnis
- Smooth Scroll mit Lenis stört Filter und Formulare
- Gelb-Schwarz-Warnstreifen, Helm-Icons, Daumen-hoch-Stockfotos – Klischee
- Renderings als fertige Projekte – Visualisierungen immer als solche beschriften
- „klimaneutral bauen“, „nachhaltig“ ohne Nachweis – Umweltaussagen nur mit Beleg (Leitfaden 8a)
Regeln
- Erster Bildschirm: echtes Baustellen- oder Projektfoto mit Bauschild-Daten als Bildunterschrift, ein Satz zu Leistung und Region, zwei Wege „Projekt anfragen“ und „Jobs auf unseren Baustellen“.
- Signatur (bild-hotspots, Variante bauteil): Auf der Projektseite eine große Baustellenaufnahme mit höchstens sechs nummerierten Punkten (Bauabschnitt, Gewerk, Material, Termin); die gleiche Information als Liste darunter. Punkte ohne Dauerpuls, Karte als Popover, mobil als Liste unter dem Bild. Höchstens ein Hotspot-Bild pro Ansicht.
- Bauschild-Daten in Geist Mono mit Einheit (m² BGF, m³ BRI, Monate); Bauherr und Architekt nur mit Erlaubnis.
- Karriere hat die gleiche Tiefe wie die Projekte: Stellen mit Lohn nach Tarif oder Spanne, Einsatzorten und Arbeitszeiten, Kurzbewerbung in zwei Minuten, jede Stelle mit JobPosting (stellenseite-mit-jobposting).
- Visualisierungen und KI-Bilder sind als solche beschriftet; fertige Projekte nur mit echten Fotos.
- Pflichtangaben und Recht (Leitfaden 8a): Impressum mit Handwerkskammer und Eintrag in die Handwerksrolle (Maurer und Betonbauer sind zulassungspflichtig); Präqualifikation und Zertifikate nur mit Nummer und Gültigkeit (logo-wand-social-proof, Variante siegel-nachweis); beim Bauträger-Verkauf Erlaubnis nach § 34c GewO im Impressum und die Pflichtangaben zum Energieausweis in jeder Anzeige (objekt-steckbrief-expose); Fotos von Mitarbeitenden auf Baustellen nur mit Einwilligung. Vom Kunden prüfen lassen.
- Knöpfe: Signalorange gefüllt (fuellung-vom-eintrittspunkt, Variante basis) für Anfragen und Bewerben; Nebenwege als Kontur mit Eckklammern wie Vermessungsmarken (kontur-button-zeichnen, Variante ecken).
- gap-decorations-raster nur als Zusatz (Priorität F) für die Kenndaten-Tabelle; ohne Unterstützung stehen normale Linien.
- Kapitelkanten als Stufen mit Höhenkote (kapitel-kante-signatur, Variante stufe) zwischen Projekten, Leistungen und Karriere; nur senkrecht, Koten und Abschnitte nur aus echten Projektdaten.
Bild und Ton
- Licht: Tageslicht auf der Baustelle, auch grau und nass; nicht geschönt.
- Ausschnitt: Baustelle in der Totale, Mannschaft bei der Arbeit, Detail von Bewehrung und Schalung, fertiges Gebäude mit Umgebung.
- Personen: Ja: eigene Mitarbeitende mit Einwilligung und korrekter Schutzausrüstung.
- Formate: 3:2, 16:9, 4:5
- Nicht: Keine Stockfotos mit Helm und Daumen hoch, keine Renderings ohne Beschriftung, keine fremden Firmenlogos.
- Anrede: Sie (Bauherren), du (Karriere), je Bereich durchgehend
- Sätze: Kurz und konkret: was, wo, wie groß, bis wann.
- Haltung: Stolz auf die Arbeit, ohne Prahlen.
- Tonproben: Bürogebäude in [Ort], 6.400 m² BGF, fertig im Mai 2027., Wir suchen Poliere für Baustellen im Umkreis von 50 km.
- Nicht schreiben: „Ihr kompetenter Partner rund um den Bau“, „Bauen mit Leidenschaft“, „Qualität aus einer Hand“.
Hero, Raum und Form
- Hero-Raster: Foto über 12 Spalten unbeschnitten, darunter eine Zeile Bauschild-Daten; Satz und Wege über Spalte 1 bis 6 darunter.
- Hero-Bild: Echtes Baustellen- oder Projektfoto, 16:9 Desktop, 4:5 mobil.
- Überschrift: clamp(2.75rem, 1.6rem + 5vw, 6rem), Big Shoulders 800 in gemischter Schreibung; kein Label darüber.
- Handlung: „Projekt anfragen“ (Signalorange gefüllt) und „Jobs auf unseren Baustellen“ (Kontur mit Eckklammern).
- Zusatz: Bauschild-Daten in Geist Mono als Bildunterschrift.
- Sektionsabstand: clamp(64px, 9vw, 128px)
- Dichte: mittel
- Raum: Plakativ und geordnet: große Überschriften mit wenig Luft darüber, Kenndaten eng (8 px), Projektbilder mit 32 px Abstand.
- Spalten: 12
- Maximale Breite: 1360px
- Raster: Hero-Foto über 12 Spalten mit Bildunterschrift-Zeile; Projektseite 8/4 (Bild und Hotspots links, Bauschild-Daten rechts sticky).
- Radius klein: 0
- Radius groß: 0
- Schatten: keiner
- Form: Eckig wie Schalung und Bauschild. Signalorange nur auf Knöpfen.