nogor
_cards
Information in
schönster Form
B2B-Dashboards mit einer kuratierten Card-Library und Visualisierungen, die fachliche Use Cases direkt abbilden — einsatzbereit und integrierbar in moderne Enterprise-Plattformen.
Kompromissloses Next-Level-Design für das, was wirklich zählt: Decisions, not Discussions.
AI Driven
GPT-5 Thinking koppelt React-Komponenten mit mathematischer Modellierung; präzise, reproduzierbare UI-Muster entstehen durch konsistentes Mapping und dynamische Zustände.
Design
Skalierbares Business-Design: minimalistisch, interaktiv, mit klarer Informationsarchitektur und präziser Micro-Motion – konsistent über Themes hinweg und bereit für modulare Dashboards.
Δθ= 2π (1−1φ)≈2π⋅0.381966 ≈137.508∘,φ=1+52Δθ=2π(1−φ1)≈2π⋅0.381966≈137.508∘,φ=21+5 Hexagon-Größe sk=c rk α(α≲1),oder normiert: sk=c (rk−aRmax−a)αsk=crkα(α≲1),oder normiert: sk=c(Rmax−ark−a)α Rotation der Hexagone ϕk=ϕ0+m k(mitdrehen),oderϕk=ϕ0(konstant) ϕk=ϕ0+mθk(mitdrehen), oderϕk=ϕ0(konstant) Parastichie-Eindruck Δθ=konstant (z. B. goldener Winkel)
Decisions, not Discussions.
Dashboards sind keine Reporting-Deko. Sie sind der kürzeste Weg von Zahlen zu klaren Entscheidungen.
Die nogor-Cards machen aus komplexen Daten eindeutige Decision Points – für Manager und Entscheider, die Meetings beenden wollen, statt neue zu planen.
Alles gesagt, alles gesehen, alles verstanden – jetzt entscheiden.
Dashboards
Dashboards fassen einen Themenbereich in einer klaren Ansicht zusammen. Sie ordnen Informationen, reduzieren Komplexität und machen den nächsten Schritt offensichtlich. Die Seite zeigt einen Baukasten, mit dem diese Prinzipien reproduzierbar werden – für unterschiedliche Daten, Teams und Projekte. So entsteht Orientierung, die sich an den tatsächlichen Fragen des Alltags ausrichtet.
Ein Dashboard besteht aus Sections: Bereiche, die zusammengehörige Informationen bündeln. Eine Section kann eine kompakte KPI‑Leiste sein, ein Vergleichs‑Grid, eine Tabelle oder ein Spreadsheet. Dadurch bleibt der Bildschirm in sinnvolle Blöcke gegliedert, und der Wechsel zwischen Überblick und Detail fällt leicht. Wer später erweitert, fügt einfach eine weitere Section hinzu – ohne das Grundlayout zu brechen.
Sectionen
Die Inhalte einer Section entstehen aus Widgets. Technisch gehören Cards und Charts beide zu dieser Familie – sie unterscheiden sich im Zweck. Karten (Cards) machen eine Aussage auf den Punkt; Diagramme (Charts) öffnen die Sicht auf Zusammenhänge. Das System hält beide Varianten konsistent, damit alles wie aus einem Guss wirkt.
Charts
Charts nutzen mehr Fläche und geben Kontext: Trends, Vergleiche, Muster. Sie unterstützen Tooltips/Mouseover für Details, Umschalter für Varianten und – je nach Typ – Zoom oder Schwenk. Ob Linie, Balken, Fläche oder Kombination: die Darstellung passt sich dem Inhalt an. So wird aus einer Zahl eine Geschichte, die sich Schritt für Schritt nachvollziehen lässt.
Cards
Cards sind kompakte Aussagen: eine Zahl, ein Status, ein kleiner Verlauf. Die Interaktion bleibt bewusst reduziert – zum Beispiel ein Week/Month‑Umschalter oder ein einfacher Slider. Eine Card lässt sich mehrfach einsetzen, in unterschiedlichen Dashboards und Layouts. Auf dem Smartphone stehen Cards untereinander, auf der Smartwatch funktionieren sie auch einzeln – die Botschaft bleibt klar.
Der Baukasten
Basis‑Template mit vier Layout‑Varianten: unterschiedliche Dichte, gleichbleibende Ordnung.
Themes in hell und dunkel; Charts wahlweise farbig oder monochrom – bewusst ruhig, damit die Daten sprechen.
Controls (Umschalter, Regler) in mehreren Formfaktoren: Pille/rund, abgerundet, sechseckig, quadratisch‑abgerundet, eckig.
Sectionen: Chart‑Canvas, 4‑Spalten‑Grid, Galleries,Tabellen, Spreadsheet, Infografiken, Navigationen und Formulare...
1. Themes
Themes ordnen nicht nur Farben, sie steuern Lesbarkeit, Hierarchie und Vergleichbarkeit über alle Widgets und Sections. Hell/Dunkel sowie farbig vs. monochrom lassen sich je Aufgabe wählen: Monochrom für strukturierte Übersicht, Farbe gezielt für Bedeutung (z. B. Kategorien, Status, Ausreißer). Einheitliche Typografie, Abstände und Zustände sorgen für konsistente Informationsaufbereitung und reduzieren kognitive Last. Der Wechsel erfolgt in Echtzeit und bleibt barrierearm (Kontraste, Dunkelmodus), sodass Inhalte klar vermittelt und schneller erfasst werden.
Controls: Konfiguration in Echtzeit
Alle Einstellungen reagieren sofort: Layout, Theme, Radien, Linienstärke, Farbmodus, Zeitraum. Diese Direktheit macht das Experimentieren leicht – und gute Entscheidungen schneller. Gefundene Kombinationen lassen sich als Defaultsichern und später wiederverwenden. So entsteht mit wenigen Handgriffen eine stabile Grundlage für das Team.
Themekonfigurator
Konfiguration der Formen
Konfiguration der Cards
Konfiguration der Farbe in den Charts
Verknüpfte Sichten
Widgets können Daten und Zustände teilen. Ändert sich ein Filter oder Modus, aktualisieren sich dort, wo es sinnvoll ist, die verknüpften Elemente. Das bewahrt den Kontext und vermeidet doppelte Bedienung. Auch komplexe Abhängigkeiten bleiben so transparent und nachvollziehbar.
Labels und Prompting
Was noch nicht per Oberfläche konfigurierbar ist, lässt sich per Prompt (Text oder Sprache) beschreiben. Auf dieser Basis schlägt das System passende Bausteine vor oder ergänzt die Logik. Individuelle Wünsche fügen sich dadurch in das bestehende Muster ein, ohne die Klarheit zu verlieren. So wächst das Dashboard mit seinen Anforderungen – Schritt für Schritt.
2. Layouts
Kompakt-Raster
Viele kleine Widgets auf engem Raum. Ideal für Status-Überblicke und dichte KPI-Sammlungen. Das Grid priorisiert Scanbarkeit: klare Zeilen, wiederkehrende Zellbreiten, stabile Abstände – auch wenn Inhalte wachsen.
Vergleichs-Grid (2–4 Spalten)
Parallele Sichten nebeneinander – z. B. Zeiträume, Segmente oder Standorte. Gleiches Layout, gleiche Skalen, gleiche Interaktion: Unterschiede werden sofort sichtbar, ohne zwischen Ansichten zu wechseln.
Fokus-Canvas
Eine große Fläche für komplexe Charts oder kombinierte Visualisierungen. Genug Platz für Details, Tooltips, Zoom/Schwenk und Variantenumschalter – ohne die Lesbarkeit zu verlieren. Der Rest der Seite liefert Kontext in separaten Sections.
Listen-/Tabellen-Ansicht
Strukturierte Datenarbeit mit Sortierung, Filtern und kompakten Zeilen. Gut für Pipelines, Backlogs, Ereignisse und Protokolle. Die Tabelle bleibt ruhig im Bild, während andere Sections Überblick oder Visualisierung übernehmen.
3. Datengenerierung und Daten-Mapping
Für Entwurf, Test und frühes Feedback wird zuerst eine belastbare Datenbasis erzeugt. Falls produktive Quellen noch fehlen, entstehen synthetische, aber realistische Datensätze: mit saisonalen Mustern, Ausreißern, Lücken und typischen Randfällen. Anschließend erfolgt das Mapping: Felder erhalten klare Namen, Typen, Einheiten und Zeitzonen; Schlüssel und Beziehungen (Zeitindex, Kategorien, IDs) werden definiert. Durch Normalisierung, Bereinigung und Versionierung bleibt das Schema stabil und reproduzierbar — eine Voraussetzung, damit Widgets/Charts konsistent arbeiten.
Kernschritte
- Datenerzeugung: Sampling/Simulation, realistische Verteilungen, Variation (Trend, Saisonalität, Ausreißer)
- Datenqualität: Duplikate/Nulls behandeln, Wertebereiche prüfen, einfache Anomalie-Checks
- Mapping: Feldnamen, Datentypen, Einheiten, Zeitzone, Primär-/Fremdschlüssel, Zeit-/Kategorie-Indizes
- Normalisierung: Datums-/Zahl-/Währungs-Formate, Kategoriensets, benannte Skalen
- Reproduzierbarkeit: Seeded-Generatoren, Fixtures, Schema-Versionierung und Änderungslog
- Ergebnisartefakte: Beispiel-CSV/JSON, Schema (z. B. JSON-Schema), kurze Datenbeschreibung
Ergebnis
- Ein sauberes, dokumentiertes Datenschema plus Testdaten, das in jedem Umfeld gleich funktioniert
- Grundlage, auf der Visualisierung, Logik und Interaktion vorhersehbar und vergleichbar sind
4. Business Logic
Auf Basis des Schemas werden Regeln und Berechnungen festgelegt: Kennzahlen, Aggregationen, Zeitfenster (z.B. Woche/Monat), Schwellenwerte und Zustände. Interaktionen wie Filter, Varianten-Umschalter oder Drill-Downswerden fachlich beschrieben und technisch als reine, testbare Funktionen umgesetzt. So reagieren Widgets/Charts nachvollziehbar, und verknüpfte Elemente bleiben im Gleichklang. Performance (Caching/Memoization) und Randfälle (fehlende Daten, Lücken, Extremwerte) werden explizit behandelt.
Kernschritte
- Metrik-Definitionen: Formeln, Referenzzeiträume, Vergleichslogik (WoV, MoM, YoY), Glättung/Smoothing
- Zustände & Schwellen: Statuslogik, Toleranzen, Warn-/Alarmgrenzen, Fallback-Werte
- Interaktionen: Filter (Zeit/Kategorie), Modus-Umschalter, Drill-Down/Drill-Up, Synchronisierung zwischen Widgets
- Robustheit: Null/NaN-Handling, Ausreißerbehandlung, Lückenfüllung (Imputation), Zeitumstellung/Zeitzonen
- Performanz: Voraggregation, Window-Funktionen, Caching/Memoization, inkrementelle Updates
- Qualitätssicherung: Unit-/Property-Tests, Contract-Tests gegen das Schema, kleine Golden-Datasets
Ergebnis
- Eine modulare, testbare Logikschicht, die Daten deterministisch in Aussagen übersetzt
- Nachvollziehbares Verhalten der UI: gleiche Eingaben ⇒ gleiche Ergebnisse, auch bei verknüpften Widgets/Charts
METHODEN
Arbeiten mit Gen AI
Modellierung
Ausgangspunkt ist die Auswahl des Widget-Typs (z. B. KPI, Liste, Chart). Die Anforderungen werden per Prompterfasst – wahlweise als Text, Voice, Image oder Dokumente. Ziel ist ein präzises Modell: Was soll das Widget leisten, welche Daten liegen vor, wie soll es wirken?
KI
Die KI ergänzt bzw. erzeugt die nötige Business-Logik, Mathematik und ggf. Beispieldaten. Data- & Field-Mappingklärt Feldnamen, Formate und Quellen. Auf Basis dessen entstehen React-Code und die Einbindung ins Basistemplate, damit der Baustein konsistent im System nutzbar ist.
Output
Ergebnis der Generierung ist ein Basis-Template mit integriertem Widget-Template. Dieser Output ist lauffähig, folgt den Design- und Strukturregeln und kann direkt in eine Oberfläche aufgenommen werden. Damit ist ein neutraler, funktionsfähiger Ausgangspunkt geschaffen.
Konfiguration
Im Control Center werden Basistemplate und Widget angepasst: Layout, Interaktion, Animation, Patterns. Optional lassen sich per Prompt weitere Logik- oder Interaktionswünsche ergänzen. Am Ende steht das React-Dashboard mit dem neuen Widget, bereit für Datenanbindung und Einsatz.