Zum Inhalt
← Rezepte
Alle Rezepte

Coworking und Räume: hell, offen, buchbar

Coworking Space / Büros auf Zeit und Business Center / Meeting-, Seminar- und Workshopräume / Coworking im ländlichen Raum (auch Werkstatt- und Atelierplätze)

Wer ein Coworking sucht, fragt: Kann ich heute kommen, was kostet ein Tag oder ein fester Platz, welche Räume gibt es für wie viele Leute, und wie komme ich rein? Deshalb steht unter dem Hero „Heute“: Tagespass, Öffnung und Zugang, freie Plätze nur aus dem Buchungssystem. Danach Arbeitsplätze und Preise mit Endpreisen, Räume mit Kapazität und Bestuhlung, das Haus Geschoss für Geschoss, Community-Termine, Firmensitz und Post nur mit ehrlichem Rahmen. Bricolage Grotesque für alles, Azeret Mono für Raumcodes, Zeiten und Preise. Beton hell, Kreidegrün und Graphit, Tomatenrot nur für „Tagespass buchen“. Signatur: Geschoss für Geschoss. Das Foto des Hauses ist in waagerechte Scheiben geschnitten, jede Scheibe ein Geschoss mit seinem Angebot; sie heben sich beim Laden einmal und folgen dem Zeiger (bild-scheiben-tiefe, waagerecht). Beim Seitenwechsel steigen fünf Stufen wie Etagen.

Bauplan tokens.css Alle Techniken

Schrift

Hell, offen, buchbar

Wer ein Coworking sucht, fragt: Kann ich heute kommen, was kostet ein Tag oder ein fester Platz, welche Räume gibt es für wie viele Leute, und wie komme ich rein?

Coworking Space

Headline
Bricolage Grotesque
Text
Bricolage Grotesque
Akzent
Azeret Mono

Farbe

  • #EEEDE8
  • #1A1A18
  • #D7E2D9
  • #232629
  • #B8361F
  • #595954

Bewegung

cubic-bezier(0.625, 0.05, 0, 1)
Dauer
250 (Hover, Farbe), 400 (Reiter, Akkordeon, Dialog öffnen), 280 (schließen), 525 (H1-Zeilen einmal), 725 (Geschosse des Hausbilds heben sich einmal), 1100 (Seitenwechsel als fünf Stufen, zurück 740)

Aufbau der Seite

SignaturBild-Scheiben in der Tiefe

HeroBild-Scheiben in der Tiefe · GeschosseoderFoto-Hero: echtes Foto, ein Satz, ein Weg · Split

  1. Heute (direkt unter dem Hero: Tagespass mit Endpreis und Leistungen, Öffnung und Zugang, freie Plätze heute nur aus dem Buchungssystem, Anfahrt in einem Satz)Öffnungszeiten mit Live-Status · Kopfzeile
  2. Arbeitsplätze und Preise (Tagespass, Mehrfachkarte, Flex Desk, Fix Desk, Büro für Teams; Laufzeit, Kündigung, was enthalten ist; Endpreise für Verbraucher:innen, Netto nur mit Hinweis „nur für Unternehmen“)Preisseite: Endpreise, Rechenweg, Vergleich · MitgliedschaftVergleichstabelle mit fester Kopfzeile · Paketvergleich
  3. Räume (Meetingraum, Seminarraum, Werkstatt, Telefonkabinen als Liste mit Raumcode, Personen, Bestuhlung, Technik, Preis je Stunde und Tag; Filter nach Gästezahl)Räume mit Kapazitäten je Bestuhlung · VergleichstabelleTrennlinien im Raster (Gap Decorations) · WerklisteBild-Zoom in der Maske · Basis
  4. Raum-Detailseite (je Raum eine Seite: Fakten, Bestuhlung als Auswahl mit Platzzahl, Plan, Fotos, Barrierefreiheit ehrlich, Buchen)Räume mit Kapazitäten je Bestuhlung · Ein RaumTermin-Buchung per 2-Klick-Einbettung · Platzhalter
  5. Das Haus (Geschoss für Geschoss: was wo ist, Küche, Duschen, Fahrradkeller, Aufzug und Stufen ehrlich; die Scheibe des Geschosses hebt sich im Kapitel)Split-Screen mit Sticky-Seite (eine Seite steht, andere scrollt) · Sticky-Titel und Karten
  6. Community und Termine (Frühstück, Vorträge, Workshops; ab etwa acht Terminen im Monat als Kalender, sonst Liste; je Termin eine Seite mit Anmeldung)Programm-Kalender mit Liste und Monat · Liste und MonatVeranstaltung: Detailseite mit Zuständen · Anmeldung
  7. Firmensitz und Post (Geschäftsadresse, Postannahme, Scan; nur mit ehrlichem Rahmen: was erlaubt ist, welche Prüfung nötig ist, was es kostet)Akkordeon mit Höhenanimation auf auto · FAQ
  8. Stimmen (Mitglieder mit Name, Beruf und Platzart; Google-Bewertungen nur mit Echtheitshinweis)Testimonials neu gedacht · KundenlistePlattform-Bewertungen mit Echtheitshinweis · Kopfzeilen-Pille
  9. Fragen (Zugang am Wochenende, WLAN, Drucken, Hunde, Parken, Rechnung, Kündigung)FAQ-Seite mit Suche · Kurz
  10. Anfrage für Teams und Büros (als Satz mit Lücken: Personen, ab wann, wie lange, Kontakt; Bestätigung mit Rückmeldezeit)Kontakt- und Anfrageformular als eigene Sektion · Satz-FormularDanke-Seite: was jetzt passiert · Offene Anfrage
  11. Anfahrt und Zugang (Eingang, Klingel, Fahrradkeller, Parken als Skizze; Empfangszeiten und Zugang für Mitglieder getrennt; Adresse als Text)Karte per 2-Klick (Anfahrt ohne vorab geladene Karte) · LageskizzeÖffnungszeiten mit Live-Status · Karte
  12. Vertrag widerrufen, kündigen und Barrierefreiheit (bei Online-Abschluss mit Verbraucher:innen; Mitgliedschaften als Dauervertrag mit Kündigungs-Button; Footer ohne Login)Widerrufs- und Kündigungs-Button · RichtigSeite „Barrierefreiheit“ als Vorlage · Informationen nach BFSG

Nicht verwenden

Regeln
  • Erster Bildschirm: Hausbild in Geschoss-Scheiben, H1, Geschosse mit Angebot und „Tagespass buchen“; direkt darunter „Heute“ mit Endpreis, Zugang und Öffnung. Mobil Leiste mit Tagespass / Räume / Anfahrt.
  • Signatur (bild-scheiben-tiefe, Variante waagerecht): nur mit einem eigenen Hausfoto, dessen Geschossdecken die Schnitte tragen; keine Gesichter oder Schrift an den Kanten. Geschosse und Angebot stehen immer zusätzlich als Text. Auf Touch und bei reduzierter Bewegung liegt das Bild flach.
  • Preise nach Preisangabenverordnung: Verbraucher:innen sehen Endpreise inkl. MwSt.; Netto-Preise nur mit dem Hinweis, dass das Angebot sich an Unternehmen richtet. Laufzeit, Kündigungsfrist und Leistungen stehen beim Preis.
  • Online-Abschluss mit Verbraucher:innen (Mitgliedschaft, Mehrfachkarte): „Vertrag widerrufen“ und bei Dauerverträgen „Verträge hier kündigen“ im Footer ohne Login (widerruf-und-kuendigung-schaltflaeche, Variante richtig). Vom Kunden prüfen lassen.
  • Geschäftsadresse und Postservice: Wer Sitz-, Geschäfts- oder Postadressen für Firmen bereitstellt, kann nach dem Geldwäschegesetz als Dienstleister für Gesellschaften gelten (Identifizierung, Registrierung bei der Aufsicht). Angebot nur mit diesem Rahmen beschreiben. Vom Kunden prüfen lassen.
  • Zugangssystem und Videoüberwachung: Hinweis an der Tür und in der Datenschutzerklärung; Buchungs- und Zugangsdaten nur, soweit nötig. Vom Kunden prüfen lassen.
  • Barrierefreiheit der Räume ehrlich: Stufen, Aufzug, Türbreiten, WC je Geschoss; bei Online-Buchung die Erklärung nach BFSG prüfen lassen.
  • Knöpfe: Pfeil-Pille in Tomate, deren Kreis zur Fläche wächst (pfeil-icon-button, Variante kreis-expand), für Tagespass und Raum buchen; Nebenwege mit zeichnender Kontur (kontur-button-zeichnen, Variante zeichnen). Alle Zustände nach button-zustaende.
Bild und Ton
  • Licht: Tageslicht, große Fenster, auch Abendlicht mit Lampen; kein Blitz.
  • Ausschnitt: Haus von außen mit klaren Geschossen, Räume leer und in Benutzung, Details (Küche, Fahrradkeller, Telefonkabine).
  • Personen: Mitglieder nur mit Einwilligung, gern von hinten oder angeschnitten.
  • Formate: 4:5, 3:2, 16:9
  • Nicht: Keine Stockbilder mit Laptops und Kaffee, keine KI-Büros, keine Fotos fremder Spaces.
  • Anrede: du oder Sie, je nach Haus; eine Anrede für die ganze Seite
  • Sätze: Kurz und praktisch: was kostet es, was ist dabei, wie komme ich rein.
  • Haltung: Wie der Empfang am Morgen: unkompliziert, genau bei Preisen und Regeln.
  • Tonproben: Tagespass 25 € inkl. MwSt. Kaffee, WLAN und ein Platz am Fenster., Zugang am Wochenende nur für Mitglieder mit fester Karte.
  • Nicht schreiben: „Community first“, „New Work“, „inspirierende Atmosphäre“ ohne Inhalt, Anglizismen ohne Not.
Hero, Raum und Form
  • Hero-Raster: H1, Geschossliste und Handlung über Spalte 1 bis 5; Hausbild mit drei Scheiben über Spalte 6 bis 12; mobil H1, Bild, Geschossliste untereinander.
  • Hero-Bild: Eigenes Foto des Hauses mit klaren Geschosslinien, 4:5 Desktop, 4:5 mobil.
  • Überschrift: clamp(2.5rem, 1.2rem + 5vw, 5.25rem), Bricolage Grotesque opsz 96; Name des Hauses oder ein Satz zum Ort, kein Label darüber.
  • Handlung: „Tagespass buchen“ (Tomate, Pfeil-Pille) und „Räume ansehen“ als Kontur-Knopf.
  • Zusatz: Geschosse als Liste in Azeret Mono (EG, 1. OG, DG) mit Angebot; direkt unter dem Hero „Heute“.
  • Sektionsabstand: clamp(64px, 8vw, 128px)
  • Dichte: mittel
  • Raum: Offen wie eine Etage: Preise und Raumliste dicht mit Haarlinien, Hero und Haus mit viel Luft.
  • Spalten: 12
  • Maximale Breite: 1320px
  • Raster: Hero 5/7 mit dem Hausbild rechts; Raumliste als Werkliste über 12 Spalten mit Haarlinien (gap-decorations-raster); Preise als drei ungleich breite Spalten.
  • Radius klein: 6px
  • Radius groß: 14px
  • Schatten: nur an gehobenen Scheiben (aus bild-scheiben-tiefe)
  • Form: Knöpfe als Pille, Karten 14 px, Raumliste ohne Kästen.
Vorbilder