BILDSCHIRMANZEIGEN FÜR DAS BAUWESEN

• zeigt den Lauf der Zeit
• ermöglicht das "Scrollen der Baustelle"

Beispiel:

2025 ───────── 2026 ───────── 2027

        (aktueller Zeitpunkt)

Verhalten der Schnittstelle

Klicken Sie auf das Objekt

Zeigt:

• Reisepass
• Teilnehmer
• Status
• Risiken

Klicken Sie auf die Firma. Zeigt:

• Projekte
• Rolle
• Herunterladen

Klicken Sie auf Kontakt. Zeigt:

• Vertrag
• Betrag
• Zeitrahmen
• Status

Klick auf Risiko. Zeigt:

• Beschreibung
• Kritikalität
• Verantwortlichen

Farbsystem (erforderlich)

Dies macht die Schnittstelle "smart" ohne Text:

• Es ist okay.
• ? Risiko
• .. das Problem
• Daten / Neutral
• ? Finanzen

Minimales Benutzerszenario. Stellen Sie sich einen Beamten oder Investor vor:

• Öffnet das System
• Objekt sehen
• Siehe:
• Bauunternehmer
• Bank
• Risiken
• Erkennt .
• Anklicken
• sieht das Problem
• Entscheiden

Alles in 10–20 Sekunden

MVP-Version des Bildschirms (wirklich erreichbar)

Muss sein:

Graph (Knoten + Verbindungen)

Karte des Objekts

* Liste der Teilnehmer

* Basisstatus

1–2 Risiko

Nicht sofort brauchen:

❌ BIM

* Komplexe Analytik

* Komplexe Filter

Überladene Platten

Wie man es implementiert (direkt am Stack)

Frontend:

• React + Next.js
• Cytoscape.js (graph)
• React Query
• Tailwind

Komponenten:

GraphCanvas

• Nodes zeichnen
• Zoom
• drag

NodeCard

• Popup-Karte

SidePanel

• Objektdaten

Timeline

• Zeitleiste

JSON für Graph (unter UI)

Hier ist das Format, das mit dem Backend kommen sollte:

{

  "nodes": [

    { "id": "p1", "type": "project", "label": "LCD Nord", "status": "risk" },

    { "id": "c1", "type": "company", "label": "Kunde", "status": "active" },

    { "id": "c2", "type": "company", "label": "Auftragnehmer", "status": "active" },

    { "id": "r1", "type": "risk", "label": "Zeitverfall", "status": "high" }

  ],

  "edges": [

    { "source": "c1", "target": "p1", "type": "customer" },

    { "source": "c2", "target": "p1", "type": "contractor" },

    { "source": "p1", "target": "r1", "type": "risk" }

  ]

Die Hauptbedeutung des Bildschirms. Wenn man es hart formuliert:

Es ist keine Schnittstelle.

Es ist eine Visualisierung der Bau-Realität

Was du bekommst. Mit diesem Bildschirm können Sie:

• Zeigen Sie dem Investor ein Produkt
• dem Staat das System zeigen
• Entwicklern eine Aufgabe geben
• laufen MVP

Der nächste Schritt. Jetzt gibt es 3 starke Richtungen:

1. - Machen Sie eine UI-Spezifikation (Pixel in Pixel)→ für den Designer

2. Code starten (React + Cytoscape)→ Ein echter Prototyp

3. Produktpräsentation zusammenstellen→ Ressourcen zu gewinnen

🎯 UI SPEC: BAUKRISTALL (CORE SCREEN)

Allgemeine Layout-Struktur

, Bildschirmgitter

┌───────────────────────────────────────────────┐

│ TOP BAR                                      │

├──────────────┬───────────────────────┬────────┤

│ LEFT MENU    │   GRAPH CANVAS        │ RIGHT  │

│              │                       │ PANEL  │

│              │                       │        │

├──────────────┴───────────────────────┴────────┤

│ TIMELINE                                      │

└───────────────────────────────────────────────┘

TOP BAR (oberes Panel)

Zusammensetzung:

? Suche

• placeholder: “Suche nach Immobilien, Unternehmen...”
• debounce: 300ms
• Ergebnisse:
• Projekte
• Unternehmen

? Filter

• Region (Dropdown)
• Status (multi-select)
• Stufe (Multi-Select)

* Modi

• toggle:
• Objekt
• Region
• Die Branche

Benutzer:

• avatar
• Menüs:
  
• Profil
• Ausgang

LEFT MENU (navigation)

Breite:

• 72px (collapsed)
• 240px (expanded)

Punkte:

Verhalten:

• hover → tooltip
• active → Hervorhebung
• Klick → Kontextwechsel

GRAPH CANVAS (Zentrum)

Hauptkomponente: GraphCanvas

Funktionen: Grafische Zeichnung

• Bibliothek: Cytoscape.js
• layout: force-directed

Knoten

Knotentypen:

• Name
• Status (Farbe)
• Bühne
• haushalt
• Zeitrahmen

Teilnehmer:

• Liste der Unternehmen
• Rolle
• Status

? Risiken

• Risikoliste
• severity
• Status

? Verträge

• Zimmer
• Betrag
• Status

? Aktionen

• “Aufgabe zuweisen”
• “Status aktualisieren”
• "Risiko hinzufügen"

Unternehmen ausgewählt

• Name
• Typ
• bewertung
• Projekte
• Herunterladen

Risiko ausgewählt

• Beschreibung
• Ebene
• Datum
• verantwortlich
• Schaltfläche “Schließen”

TIMELINE (Unterplatte)

Komponente: Timeline

Visualisierung:

• drag → Verschiebung auf der Zeitachse
• Klick → zum Datum wechseln
• Modus:
• Tatsächlicher Zustand
• Vorhersage

SYSTEMBEDINGUNGEN

Loading

• skeleton UI
• Spinner im Zentrum

Empty

• “Keine Daten”
• Schaltfläche “Objekt erstellen”

Error

• Nachricht
• retry

Partial Data

• Teil der Knoten
• Warnung

UX-Regeln (sehr wichtig)

Keine überladenen Formulare

→ nur Handlungen über den Kontext

Alles über Klick

→ keine komplizierte Navigation

Farbe = Bedeutung

→ Benutzer liest Bildschirm ohne Text

80% — visuell

→ 20% — Text

DESIGN TOKENS

Farben:

• Primary: #2563EB
• Success: #16A34A
• Warning: #F59E0B
• Danger: #DC2626
• Neutral: #64748B

Hintergrund:

• Dark mode:
• bg: #0F172A
• panel: #1E293B

Typografie:

• Überschrift: 16–20px
• Text: 14px
• Unterschriften: 12px

COMPONENT TREE

App

 ├── TopBar

 ├── Sidebar

 ├── GraphCanvas

 │    ├── Node

 │    ├── Edge

 │    └── Tooltip

 ├── EntityPanel

 └── Timeline

KRITISCHE KOMPONENTEN

Wenn Sie MVP tun - konzentrieren Sie sich auf:

• GraphCanvas
• EntityPanel
• API graph

WAS IST DAS? Das ist es schon:

• Design-Dokument
• Aufgabe des Designers
• Frontend-Aufgabe
• Produktprototyp

Eine ehrliche Schlussfolgerung. Du zeichnest nicht nur eine Schnittstelle.

Wir schaffen eine neue Art, den Bau zu sehen

Der nächste Schritt. Jetzt gibt es zwei starke Richtungen:

1. - Machen Figma-Struktur (Bildschirme + Zustand)

2. Code starten (React + Cytoscape)

Wir machen die Figma-Struktur der Produktebene, nicht nur “schöne Bildschirme”. Es wird ein System von Dateien, Seiten, Komponenten und Zuständen sein, das Sie sofort dem Designer geben und mit der Arbeit beginnen können.

🎯 FIGMA STRUCTURE

Kristallbau (MVP)

Die Struktur der Figma-Datei

Dateiname: Crystal Construction - MVP UI Kit & App

Seiten (Pages)

1. Cover

2. Design System

3. Components

4. Layouts

5. Screens (Core)

6. Screens (States)

7. Flows

8. Dev Handoff

Page 1: Cover

Inhalt:

• Produktname
• Logo (falls vorhanden)
• version (v0.1 MVP)
• Datum

Das ist wichtig für Präsentationen.

Seite 2: Design System Die Basis von allem. Ohne sie herrscht Chaos.

Farbe

Die wichtigsten

• Primary — #2563EB
• Success — #16A34A
• Warning — #F59E0B
• Danger — #DC2626

Hintergrund (Dark UI)

• Background — #0F172A
• Panel — #1E293B
• Border — #334155

Neutrale

• Text Primary — #E2E8F0
• Text Secondary — #94A3B8

Typografie

Gitter

• 12-column grid
• Margin: 24px
• Gutter: 16px

Spacing

• 4 / 8 / 12 / 16 / 24 / 32

Seite 3: Komponenten. Das ist das Wichtigste. Mach es wie eine Bibliothek.

Buttons

Optionen:

• Primary
• Secondary
• Danger

Zustände:

• Default
• Hover
• Active
• Disabled

Input

• Default
• Focus
• Error
• Filled

Status Badge

Node (Knoten des Grafen). Es ist eine Schlüsselkomponente.

Optionen:

Project Node

• groß
• Blau

Company Node

• Durchschnitt
• Grau

Risk Node

• klein
• Rot

Edge (Verbindung)

• solid
• dashed
• red (risk)
• double (finance)

Panel Card

Wird in der rechten Leiste verwendet:

• title
• content
• actions

Seite 4: Layouts. Wir sammeln das Bildschirmskelett.

Layout 1: Main App

TopBar

Sidebar | Graph | RightPanel

Timeline

Layout 2: Full Graph

Ohne rechte Leiste

Layout 3: List View

Für Projekte / Unternehmen

Inhalt:

• Graph
• Right Panel (object)
• Top Bar
• Timeline

Dies ist der Hauptproduktbildschirm

Screen 2: Project Lis

• Tabelle
• Filter
• Status

Screen 3: Company List

• Liste der Unternehmen
• bewertung
• Rollen

Screen 4: Analytics

• KPI
• Diagramme
• Risikokarte

Seite 6: Bildschirme (States) Sehr wichtig. Hier ist 80% UX.

Für Graph:

State 1 — Default

• Objekt ausgewählt

State 2 — Node Hover

• Hervorhebung von Verbindungen

State 3 — Node Selected

• aktives Panel

Für das System:

Loading

• skeleton
• spinner

Empty

• “Keine Daten”
• CTA Druckknopf

Error

• Nachricht
• retry

Für Right Panel:

Object selected

Company selected

Risk selected

Seite 7: Flows Szenarien zeigen.

Flow 1=Objekt anzeigen

• Öffnen
• Objekt auswählen
• Analyse der Verbindungen
• Risiko-Ansicht

Flow 2: Umgang mit Risiken

• Klicken Sie auf Risiko
• Ansicht öffnen
• Risiko-Schließung

Flow 3: Mitglied hinzufügen

Das brauchen die Entwickler

Seite 8: Dev Handoff Zur Weiterleitung in die Entwicklung.

Inhalt:

• Abmessungen der Komponenten
• spacing
• Farben
• Status

Erforderlich:

• Auto Layout
• Variants
• Naming system

Naming Convention

Sehr wichtig.

Komponenten:

Button/Primary

Button/Secondary

Node/Project

Node/Company

Node/Risk

Panel/Object

Panel/Company

Panel/Risk

Zustände:

Button/Primary/Hover

Node/Project/Active

Panel/Object/Expanded

Was zuerst getan werden sollte

Tag 1–2:

• Design System
• Colors
• Typography

Tag 3–4:

• Components
• Node
• Panel

Tag 5–6:

• Main Screen

In einer Woche haben Sie bereits ein Produkt

Eine ehrliche Schlussfolgerung. Das ist kein Design mehr.

Es ist das Betriebsmodell der Industrie-Schnittstelle

Nächster Schritt 

1. . . . . . .

2. - Erstellen Sie eine Produktpräsentation (basierend auf Figma)