Designvorschau
DAS KA DESIGNSYSTEMVERSION 0.1

Klar gebaut.
Einfach bedient.

Ein gemeinsames Design für unseren Arbeitsalltag.
Vom ersten Aufmaß bis zur letzten Gerüststange.

Bausteine entdecken Für die Baustelle. Für das Büro. Für uns.
Unverkennbar KA

Unsere Farben. Unsere Schrift.

Überall zu Hause

Handy, Tablet und Schreibtisch.

Fürs Anpacken gemacht

Klare Wege. Große Bedienflächen.

Hier darf ausprobiert werden. Alle Inhalte sind Beispieldaten. Eingaben und Dateien werden weder übertragen noch dauerhaft gespeichert.

01 / UNSERE GRUNDLAGE

Die Handschrift von KA.

Vertraut aus unseren Unterlagen. Weitergedacht für den Bildschirm.

Unsere Farben

FARBSYSTEM
Gerüstblau#1B3A5C
KA Orange#E8871E
Weiß#FFFFFF
Hellgrau#F5F6F8
Blau gibt Halt. Orange zeigt, wo es weitergeht.

Unsere Schrift

GERUEST GROTESK
Aa
Handwerk mit Haltung.

Gut lesbar. Klar im Ausdruck.
Die Webschrift unserer Homepage.

Book 400Medium 500Bold 700
02 / HANDELN

Ein Klick. Ein klarer nächster Schritt.

Eindeutige Aktionen mit einer verlässlichen Hierarchie.

Buttons & Aktionen

ZUM AUSPROBIEREN
Primär · der nächste Schritt
BearbeitenSekundär · weitere Aktionen
Baustellen ansehen Dezent · weiterführender Link
Destruktiv · mit Rückfrage
BEISPIELDIALOG

Entwurf wirklich löschen?

In der fertigen App lässt sich dieser Schritt nicht rückgängig machen. Hier wird nur der Bestätigungsablauf gezeigt.

WEITERE ZUSTÄNDEMindestens 44 px Platz zum Antippen.
03 / ERFASSEN

Weniger suchen. Einfach eingeben.

Sichtbare Beschriftungen und Hilfe genau dort, wo sie gebraucht wird.

Neue Baustelle

Ein Formular aus unserem Arbeitsalltag.

BEISPIEL

* Pflichtfeld · Vorschau ohne Speicherung

Auswahl & Einstellungen

Priorität
Erinnerung an den Abbau

Beispiel für eine aktivierte Einstellung.

Kolonne informieren

Beispiel für eine optionale Einstellung.

Hilfe & Eingabezustände

Die Fläche kann nach dem Aufmaß angepasst werden.
Bitte eine vollständige E-Mail-Adresse eingeben.
04 / DEN ÜBERBLICK BEHALTEN

Alles Wichtige auf einen Blick.

Am Schreibtisch eine Tabelle. Auf dem Handy eine übersichtliche Karte.

Unsere Baustellen 4

Erfundene Baustellen zum Testen von Suche und Filtern.

Neue Baustelle
Beispielbaustellen mit Kolonne, Aufbautermin und Status
BaustelleKolonneAufbauStatusDetails
B-2026-041Fassadensanierung LindenMusterstraße 12 · Hannover
K1Kolonne 114.09.2026Im Aufbau
B-2026-042Dacharbeiten GarbsenBeispielweg 8 · Garbsen
K2Kolonne 215.09.2026Geplant
B-2026-043Wohnhaus BarsinghausenMusterallee 4 · Barsinghausen
K1Kolonne 116.09.2026Rückfrage
B-2026-044PV-Montage SüdstadtBeispielstraße 21 · Hannover
K2Kolonne 211.09.2026Freigegeben
BAUSTELLENVORSCHAU

Baustelle

Erfundene Beispieldaten. Die vollständige Baustellenakte folgt im nächsten Ausbauschritt.

STATUS MIT KLARTEXTEntwurf Im Aufbau Rückfrage Freigegeben Überfällig
05 / DIREKT VOR ORT

Vom Handy in den Arbeitsablauf.

Fotos auswählen, Zeiten eingeben und Fortschritt sichtbar machen.

Ein Bild sagt mehr.

Baustellenfoto oder Beleg hier ablegen.

JPG, PNG, WebP, HEIC oder PDF · max. 10 MB pro Datei

    Nur lokale Vorschau. Kein Upload, keine Speicherung.

    Ein Vorgang, klare Schritte

    In Bearbeitung

    Beispiel: eine Baustelle ans Büro übergeben.

    1. Baustelle erfasst

      Adresse und Ansprechpartner sind vollständig.

    2. 2
      Aufmaß ergänzen

      Maße, Fotos und Besonderheiten festhalten.

    3. 3
      Ans Büro übergeben

      Alle Informationen an einem Ort.

    1 von 3 Schritten
    1 von 3 Schritten
    Fortschritt ist immer auch als Text erkennbar.
    06 / IN VERBINDUNG BLEIBEN

    Eine Oberfläche, die mitdenkt.

    Verständliche Rückmeldungen. Auch wenn etwas fehlt oder schiefgeht.

    Hinweise & Rückmeldungen

    Alles vollständig.

    Beispiel: Die Angaben sind bereit zur Prüfung.

    Eine Angabe fehlt noch.

    Bitte ergänze das Datum für den geplanten Aufbau.

    Übertragung nicht möglich.

    Beispiel für einen Fehler mit einer klaren nächsten Aktion.

    Du behältst den Überblick.

    Statusmeldungen stehen direkt am zugehörigen Vorgang.

    Hier ist Platz für den Anfang.

    Noch keine Dokumente vorhanden.
    Füge den ersten Beleg oder ein Baustellenfoto hinzu.

    Erste Datei auswählen

    Gut zu wissen

    Was funktioniert in dieser Vorschau?

    Suche, Filter, Formulare, Dateivorschau, Zeitberechnung und Dialoge lassen sich ausprobieren. Beim Neuladen werden Eingaben verworfen.

    Wie nutze ich die App auf dem Handy?

    Die Oberfläche passt sich an den Bildschirm an. Über „App installieren“ findest du die Anleitung für deinen Startbildschirm. Eine sichere HTTPS-Adresse ist dafür erforderlich.

    Was passiert ohne Empfang?

    Eine bereits geladene Seite bleibt bedienbar. Beim erneuten Laden zeigt die App einen Offline-Hinweis. Das Speichern und Synchronisieren von Baustellendaten ist noch nicht Teil dieser Vorschau.

    Das Fundament steht. Wir bauen darauf auf.

    Einheitliche Bausteine für alles, was unseren Arbeitsalltag leichter macht.

    Zur Übersicht
    DEIN MOBILER ARBEITSPLATZ

    KA auf deinen Startbildschirm.

    So ist die App auf der Baustelle immer griffbereit.

    iPhone · Safari

    Teilen-Menü öffnen → „Zum Home-Bildschirm“ → „Hinzufügen“.

    Android · Chrome

    Browser-Menü öffnen → „App installieren“ oder „Zum Startbildschirm hinzufügen“.

    Die Installation benötigt HTTPS oder localhost. Diese Vorschau bietet noch keine Offline-Datenerfassung.